/* ============================================================
   SiteHub service page design system (.shp)
   Shared by every service page. Base: Growth Systems template.
   Edit here once, every page updates.
   ============================================================ */

/* ==========================================================================
   Site Hub, Growth Systems page body
   Scoped entirely under .shp. Tokens copied from the Site Hub design system
   (colors_and_type.css) and redeclared locally so this block is self
   sufficient inside the WordPress/Elementor page shell. Sibling of the
   pricing page body: same token block, same row/table/FAQ/form primitives,
   same class-naming scheme, so the two pages read as one site.
   ========================================================================== */
.shp {
  --sh-lime-50:  #f4f7e8;
  --sh-lime-200: #d0e096;
  --sh-lime-300: #b9cd63;
  --sh-lime-400: #a7c04d;
  --sh-lime-500: #99b640;
  --sh-lime-600: #7f9834;

  --sh-slate-300: #8c8f92;
  --sh-slate-400: #5c6064;
  --sh-slate-500: #3d4245;

  --sh-teal-500: #08b5af;
  --sh-teal-600: #009590;

  --sh-fog-100: #ecedee;
  --sh-border:  #d7dbda;

  --sh-paper:     #ffffff;
  --sh-offwhite:  #fafbf7;
  --sh-fg-on-dark-2: #bfc3c2;

  --sh-focus-ring: color-mix(in oklch, var(--sh-lime-500) 55%, transparent);

  --sh-shadow-sm: 0 1px 3px rgba(61,65,68,0.08), 0 1px 2px rgba(61,65,68,0.04);
  --sh-shadow-md: 0 4px 12px rgba(61,65,68,0.08), 0 2px 4px rgba(61,65,68,0.04);

  --sh-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sh-dur-base: 200ms;
  --sh-dur-fast: 120ms;

  --sh-font-display: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --sh-font-body: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Offset for the live site's sticky header. 0 by default; set this custom
     property (inline style or theme CSS) to the real header height in px
     once this block is dropped into the page shell, e.g. --shp-header-offset: 64px; */
  --shp-header-offset: 0px;

  font-family: var(--sh-font-body);
  color: var(--sh-slate-500);
  background: var(--sh-paper);
  line-height: 1.5;
}

.shp, .shp *, .shp *::before, .shp *::after { box-sizing: border-box; }
.shp img { max-width: 100%; display: block; }
.shp ul { list-style: none; margin: 0; padding: 0; }
.shp p { margin: 0; }
.shp h1, .shp h2, .shp h3 { margin: 0; font-family: var(--sh-font-display); font-weight: 900; color: var(--sh-slate-500); }
.shp button { font-family: inherit; }
.shp [hidden] { display: none !important; }

/* Link styling is global on this page (unlike the pricing page, which only
   colors links inside specific components). Several in-content links
   deliberately override this with text-decoration: none, noted inline. */
.shp a { color: var(--sh-lime-600); text-decoration-color: var(--sh-lime-300); text-underline-offset: 2px; transition: color var(--sh-dur-fast) var(--sh-ease-out); }
.shp a:hover { color: var(--sh-lime-500); }
.shp a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring); border-radius: 3px; }

.shp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.shp-section { padding: clamp(56px, 7vw, 104px) 24px; }

/* ---- shared type patterns ---- */
.shp-eyebrow {
  font-family: var(--sh-font-display); font-size: 13px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-lime-600);
}
.shp-h2 {
  font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.025em;
  text-wrap: balance;
}
.shp-h2--sub { font-size: clamp(24px, 2.8vw, 38px); }
.shp-body { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); text-wrap: pretty; }

/* Card-level eyebrow, 12px (vs. the 13px section eyebrow above) */
.shp-step-eyebrow { font-family: var(--sh-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-lime-600); }
.shp-step-eyebrow--teal { color: var(--sh-teal-600); }

/* ---- buttons ---- */
.shp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sh-font-display); font-weight: 700; font-size: 16px; line-height: 1;
  padding: 17px 30px; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background var(--sh-dur-base) var(--sh-ease-out), color var(--sh-dur-base) var(--sh-ease-out), transform var(--sh-dur-fast) var(--sh-ease-out), border-color var(--sh-dur-base) var(--sh-ease-out);
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.shp-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring); }
.shp-btn--primary { background: var(--sh-lime-500); border-color: var(--sh-lime-500); color: #fff; }
.shp-btn--primary:hover { background: var(--sh-lime-600); border-color: var(--sh-lime-600); color: #fff; transform: translateY(-1px); }
.shp-btn--outline { background: transparent; border-color: var(--sh-slate-500); color: var(--sh-slate-500); }
.shp-btn--outline:hover { background: var(--sh-slate-500); color: #fff; }
.shp-btn--lg { padding: 19px 36px; font-size: 17px; margin-top: 34px; }

/* Generic section header row: eyebrow+h2 on the left, a short line or link on the right */
.shp-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.shp-section-head h2 { margin-top: 12px; }

/* Reusable inline text link (Roboto Condensed 800, no underline) */
.shp-inline-link { font-family: var(--sh-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-decoration: none; }

/* Reusable badge, used on the featured "four pieces" card */
.shp-badge {
  position: absolute; top: -12px; right: 22px; background: var(--sh-lime-500); color: #fff;
  font-family: var(--sh-font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}

/* Reusable teal-bordered callout */
.shp-gating {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 28px; padding: 20px 24px;
  background: #fff; border: 1px solid var(--sh-border); border-left: 3px solid var(--sh-teal-500); border-radius: 12px;
}
.shp-gating p { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); max-width: 90ch; }
.shp-gating strong { color: var(--sh-slate-500); }

/* ==========================================================================
   1. Hero
   ========================================================================== */
.shp-hero {
  background: var(--sh-offwhite); border-bottom: 1px solid var(--sh-border);
  padding: clamp(48px, 7vw, 104px) 24px clamp(44px, 6vw, 88px);
}
.shp-hero h1 {
  font-size: clamp(36px, 5.8vw, 76px); line-height: 0.98; letter-spacing: -0.03em;
  margin-top: 14px; max-width: 20ch; text-wrap: balance;
}
.shp-hero-lede {
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--sh-slate-400);
  margin-top: 22px; max-width: 60ch; text-wrap: pretty;
}
.shp-hero-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.shp-hero-proofrow {
  display: flex; flex-wrap: wrap; gap: 10px 36px; margin-top: 40px; padding-top: 28px;
  border-top: 1px solid var(--sh-border);
}
.shp-hero-proofrow div { font-size: 14px; font-weight: 600; color: var(--sh-slate-400); }

/* ==========================================================================
   2. What a Growth System is + scope boundary
   ========================================================================== */
.shp-whatgs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.shp-whatgs-grid h2 { max-width: 24ch; }
.shp-whatgs-grid > div > p { font-size: 17px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 20px; max-width: 56ch; text-wrap: pretty; }
.shp-whatgs-grid > div > p + p { margin-top: 16px; }

.shp-scope-card { background: var(--sh-offwhite); border: 1px solid var(--sh-border); border-radius: 16px; padding: 30px 28px 32px; }
.shp-scope-eyebrow { font-family: var(--sh-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sh-slate-300); }
.shp-scope-card h3 { font-size: 24px; letter-spacing: -0.01em; margin-top: 10px; }
.shp-scope-card > p { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 12px; }
.shp-scope-list { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.shp-scope-item { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.shp-scope-item:not(:last-child) { padding-bottom: 14px; border-bottom: 1px solid var(--sh-border); }
.shp-scope-link { font-family: var(--sh-font-display); font-weight: 900; font-size: 17px; text-decoration: none; }
.shp-scope-desc { font-size: 14.5px; line-height: 1.5; color: var(--sh-slate-400); }

/* ==========================================================================
   3. The four pieces
   ========================================================================== */
.shp-pieces { background: var(--sh-offwhite); border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 104px) 24px; }
.shp-pieces .shp-section-head p { font-size: 16px; line-height: 1.6; color: var(--sh-slate-400); max-width: 40ch; margin: 0; }
.shp-pieces-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-top: 40px; align-items: stretch; }
.shp-piece-card { position: relative; background: #fff; border: 1px solid var(--sh-border); border-radius: 18px; padding: 28px 26px 30px; box-shadow: var(--sh-shadow-sm); }
.shp-piece-card--featured { border: 2px solid var(--sh-lime-500); box-shadow: var(--sh-shadow-md); }
.shp-piece-card h3 { font-size: 25px; letter-spacing: -0.02em; margin-top: 10px; }
.shp-piece-price { font-family: var(--sh-font-display); font-weight: 900; font-size: 36px; letter-spacing: -0.03em; line-height: 1; margin-top: 18px; }
.shp-piece-price .shp-permo { font-family: var(--sh-font-body); font-size: 15px; font-weight: 700; color: var(--sh-slate-300); letter-spacing: 0; }
.shp-piece-card > p { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 14px; }

/* ==========================================================================
   4. How a Growth System gets built
   ========================================================================== */
.shp-build { padding: clamp(56px, 7vw, 104px) 24px; }
.shp-steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px;
  margin-top: 36px; background: var(--sh-border); border: 1px solid var(--sh-border);
  border-radius: 16px; overflow: hidden;
}
.shp-step-cell { background: #fff; padding: 28px 24px 30px; }
.shp-step-num { font-family: var(--sh-font-display); font-weight: 900; font-size: 40px; letter-spacing: -0.03em; line-height: 1; color: var(--sh-lime-500); }
.shp-step-cell h3 { font-size: 21px; letter-spacing: -0.01em; margin-top: 14px; }
.shp-step-cell p { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 10px; }
.shp-build .shp-gating { background: var(--sh-offwhite); margin-top: 28px; }

/* ==========================================================================
   5. What you get
   ========================================================================== */
.shp-deliverables { background: var(--sh-offwhite); border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 104px) 24px; }
.shp-deliverables > .shp-container > p { font-size: 17px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 16px; max-width: 56ch; text-wrap: pretty; }

/* ---- shared table shell, reused for both the deliverable list and the rate card ---- */
.shp-table { margin-top: 36px; background: #fff; border: 1px solid var(--sh-border); border-radius: 16px; overflow: hidden; }

.shp-deliverable-row { padding: 20px 24px; border-top: 1px solid var(--sh-border); display: flex; align-items: flex-start; gap: 16px; }
.shp-deliverable-row:first-child { border-top: none; }
.shp-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: var(--sh-lime-500); margin-top: 7px; }
.shp-deliverable-row h3 { font-size: 19px; letter-spacing: -0.01em; text-wrap: pretty; }
.shp-deliverable-row p { font-size: 15px; line-height: 1.55; color: var(--sh-slate-400); margin-top: 6px; text-wrap: pretty; }

/* ==========================================================================
   6. On-page pricing
   ========================================================================== */
.shp-gs-pricing { padding: clamp(56px, 7vw, 104px) 24px; scroll-margin-top: var(--shp-header-offset); }
.shp-gs-pricing .shp-table { margin-top: 32px; }

.shp-row { border-top: 1px solid var(--sh-border); background: #fff; transition: background 150ms var(--sh-ease-out); }
.shp-row:first-child { border-top: none; }
.shp-row.is-open { background: var(--sh-offwhite); }

.shp-row-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 20px 22px;
  width: 100%; text-align: left; background: none; border: none; margin: 0; color: inherit;
  transition: background 150ms var(--sh-ease-out); cursor: default;
}
.shp-row-head--toggle { cursor: pointer; }
.shp-row-head--toggle:hover { background: var(--sh-lime-50); }
.shp-row-head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sh-focus-ring); }

.shp-row-left { flex: 1 1 300px; min-width: 0; }
.shp-row-nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.shp-row-name { font-family: var(--sh-font-display); font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: var(--sh-slate-500); }
.shp-row-blurb { font-size: 14.5px; line-height: 1.55; color: var(--sh-slate-400); margin-top: 5px; max-width: 66ch; text-wrap: pretty; }

.shp-tag {
  font-family: var(--sh-font-display); font-weight: 800; font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--sh-fog-100); color: var(--sh-slate-400);
}
.shp-tag--chosen { background: var(--sh-lime-500); color: #fff; }

.shp-row-right { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; margin-left: auto; }
.shp-row-pricewrap { text-align: right; }
.shp-price { font-family: var(--sh-font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; color: var(--sh-slate-500); white-space: nowrap; }
.shp-price-note { font-family: var(--sh-font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sh-slate-300); margin-top: 4px; }

.shp-chev {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--sh-border);
  background: #fff; color: var(--sh-slate-400); display: flex; align-items: center; justify-content: center;
  font-family: var(--sh-font-display); font-weight: 900; font-size: 18px; line-height: 1;
  transition: background 150ms var(--sh-ease-out), border-color 150ms var(--sh-ease-out), color 150ms var(--sh-ease-out);
}
.shp-row.is-open .shp-chev { border-color: var(--sh-lime-500); background: var(--sh-lime-500); color: #fff; }

.shp-row-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sh-dur-base) var(--sh-ease-out); }
.shp-row.is-open .shp-row-panel { grid-template-rows: 1fr; }
.shp-row-panel-inner { overflow: hidden; min-height: 0; }
.shp-row-panel-content { padding: 0 22px 24px; border-top: 1px dashed var(--sh-border); }
.shp-panel-label { font-family: var(--sh-font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-slate-300); padding-top: 18px; }
.shp-panel-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px; margin-top: 12px; }
.shp-panel-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--sh-slate-500); }
.shp-panel-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--sh-lime-500); }

@media (prefers-reduced-motion: reduce) {
  .shp-row-panel, .shp-faq-panel { transition: none !important; }
}

.shp-notes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.shp-notecard { border-radius: 12px; padding: 18px 20px; }
.shp-notecard--lime { background: var(--sh-lime-50); border: 1px solid var(--sh-lime-200); }
.shp-notecard--offwhite { background: var(--sh-offwhite); border: 1px solid var(--sh-border); }
.shp-notecard h3 { font-size: 16px; }
.shp-notecard p { font-size: 14.5px; line-height: 1.55; color: var(--sh-slate-400); margin-top: 6px; }

/* ==========================================================================
   7. Quote form
   ========================================================================== */
.shp-quote { background: var(--sh-offwhite); border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 104px) 24px; scroll-margin-top: var(--shp-header-offset); }
.shp-quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(32px, 5vw, 64px); align-items: start; }
.shp-quote-grid h2 { margin-top: 12px; }
.shp-quote-grid > div > p { font-size: 17px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 18px; max-width: 52ch; text-wrap: pretty; }
.shp-quote-contact { display: flex; flex-direction: column; gap: 6px; margin-top: 28px; }
.shp-quote-phone { font-family: var(--sh-font-display); font-weight: 900; font-size: 22px; color: var(--sh-slate-500); text-decoration: none; }
.shp-quote-email { font-size: 16px; color: var(--sh-slate-400); text-decoration: none; }
.shp-quote-address { font-size: 15px; color: var(--sh-slate-300); }

.shp-form-card { background: #fff; border: 1px solid var(--sh-border); border-radius: 18px; padding: 28px 26px 30px; box-shadow: var(--sh-shadow-sm); }
.shp-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.shp-label { display: flex; flex-direction: column; gap: 6px; }
.shp-label--full { margin-top: 16px; }
.shp-field-grid + .shp-field-grid { margin-top: 16px; }
.shp-label span { font-size: 13px; font-weight: 700; color: var(--sh-slate-400); }
.shp-input, .shp-select, .shp-textarea {
  font-size: 15px; font-family: var(--sh-font-body); padding: 11px 13px; border: 1px solid var(--sh-border);
  border-radius: 10px; background: #fff; color: var(--sh-slate-500); outline: none; width: 100%;
  transition: border-color var(--sh-dur-base) var(--sh-ease-out), box-shadow var(--sh-dur-base) var(--sh-ease-out);
}
.shp-textarea { resize: vertical; }
.shp-input:focus, .shp-select:focus, .shp-textarea:focus { border-color: var(--sh-lime-500); box-shadow: 0 0 0 3px var(--sh-focus-ring); }
.shp-submit {
  width: 100%; margin-top: 20px; font-family: var(--sh-font-display); font-weight: 800; font-size: 17px;
  padding: 16px 24px; border-radius: 999px; background: var(--sh-lime-500); border: 1.5px solid var(--sh-lime-500);
  color: #fff; cursor: pointer; transition: background var(--sh-dur-base) var(--sh-ease-out), border-color var(--sh-dur-base) var(--sh-ease-out);
}
.shp-submit:hover { background: var(--sh-lime-600); border-color: var(--sh-lime-600); }
.shp-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring); }

/* ==========================================================================
   8. FAQ
   ========================================================================== */
.shp-faq { padding: clamp(56px, 7vw, 104px) 24px; }
.shp-faq-list { margin-top: 32px; border-top: 1px solid var(--sh-border); }
.shp-faq-item { border-bottom: 1px solid var(--sh-border); }
.shp-faq-head {
  display: flex; align-items: flex-start; gap: 20px; padding: 22px 4px; cursor: pointer; width: 100%;
  text-align: left; background: none; border: none; color: inherit;
  transition: background 150ms var(--sh-ease-out);
}
.shp-faq-head:hover { background: var(--sh-lime-50); }
.shp-faq-head:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--sh-focus-ring); }
.shp-faq-head h3 { flex: 1 1 auto; font-size: clamp(18px, 1.9vw, 22px); letter-spacing: -0.01em; text-wrap: pretty; }
.shp-faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--sh-dur-base) var(--sh-ease-out); }
.shp-faq-item.is-open .shp-faq-panel { grid-template-rows: 1fr; }
.shp-faq-panel-inner { overflow: hidden; min-height: 0; }
.shp-faq-answer { font-size: 16px; line-height: 1.65; color: var(--sh-slate-400); margin: 0 0 24px; max-width: 84ch; padding: 0 4px; text-wrap: pretty; }
.shp-faq-answer a { text-decoration-color: var(--sh-lime-300); }

/* ==========================================================================
   9. Related services + accolades
   ========================================================================== */
.shp-related { background: var(--sh-offwhite); border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 96px) 24px; }
.shp-related h2 { font-size: clamp(24px, 2.8vw, 38px); }
.shp-related > .shp-container > p { font-size: 16px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 14px; max-width: 56ch; }
.shp-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; }
.shp-related-card {
  display: block; background: #fff; border: 1px solid var(--sh-border); border-radius: 14px;
  padding: 24px 22px 26px; text-decoration: none;
  transition: box-shadow 200ms var(--sh-ease-out), transform 120ms var(--sh-ease-out);
}
.shp-related-card:hover { box-shadow: var(--sh-shadow-md); transform: translateY(-1px); }
.shp-related-card h3 { font-size: 22px; letter-spacing: -0.01em; margin-top: 10px; color: var(--sh-slate-500); }
.shp-related-card p { font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 8px; }

.shp-accolades { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--sh-border); }
.shp-accolades-label { font-family: var(--sh-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-slate-300); flex: 0 0 auto; }
.shp-accolades img { height: 44px; width: auto; opacity: 0.75; }

/* ==========================================================================
   10. Reviews
   White background here (inverted from the pricing page, where reviews sit
   on offwhite) because the preceding section already ends on offwhite.
   Card background is offwhite to match (also inverted vs. the pricing page).
   ========================================================================== */
.shp-reviews { background: #fff; border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 96px) 24px; }
.shp-reviews-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; }
.shp-reviews-head h2 { font-size: clamp(24px, 2.8vw, 38px); }
.shp-reviews-meta { font-family: var(--sh-font-display); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-slate-300); }
.shp-review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 32px; }
.shp-review-card { background: var(--sh-offwhite); border: 1px solid var(--sh-border); border-radius: 14px; padding: 24px 22px 26px; }
.shp-stars { font-family: var(--sh-font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.1em; color: var(--sh-lime-500); }
.shp-review-quote { font-size: 15.5px; line-height: 1.6; color: var(--sh-slate-500); margin-top: 14px; }
.shp-review-attr { font-size: 14px; font-weight: 700; color: var(--sh-slate-400); margin-top: 16px; }

/* ==========================================================================
   11. Final CTA
   ========================================================================== */
.shp-finalcta { background: var(--sh-slate-500); padding: clamp(64px, 8vw, 120px) 24px; text-align: center; }
.shp-finalcta-tag { font-family: var(--sh-font-display); font-weight: 900; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sh-lime-400); }
.shp-finalcta h2 { font-size: clamp(32px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; color: #fff; max-width: 22ch; margin: 20px auto 0; text-wrap: balance; }
.shp-finalcta p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--sh-fg-on-dark-2); max-width: 60ch; margin: 20px auto 0; text-wrap: pretty; }

/* ==========================================================================
   Mobile: verified fluid at 400px via clamp()/auto-fit/flex-wrap above.
   A couple of narrow-viewport refinements:
   ========================================================================== */
@media (max-width: 480px) {
  .shp-row-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .shp-section-head { align-items: flex-start; }
}

/* ==========================================================================
   KIT OVERRIDE - neutralize Elementor kit-6 global <button> styling
   ========================================================================== */
.shp button.shp-row-head, .shp button.shp-faq-head{
  background:none !important; background-color:transparent !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important;
  -webkit-appearance:none !important; appearance:none !important;
  text-transform:none !important; letter-spacing:normal !important;
  font-family:inherit !important; color:inherit !important; min-height:0 !important; white-space:normal !important;
}
.shp button.shp-row-head{ padding:20px 22px !important; }
.shp button.shp-faq-head{ padding:22px 4px !important; }
.shp button.shp-row-head--toggle:hover, .shp button.shp-faq-head:hover{ background:var(--sh-lime-50) !important; }
.shp button.shp-row-head *, .shp button.shp-faq-head *{ text-transform:none !important; letter-spacing:normal !important; white-space:normal !important; overflow-wrap:break-word; }

.shp button.shp-toggle-btn{
  background:transparent !important; background-color:transparent !important;
  border:1px solid transparent !important; border-radius:999px !important;
  padding:10px 18px !important; text-transform:none !important; letter-spacing:0.04em !important;
  font-family:var(--sh-font-display) !important; color:var(--sh-slate-400) !important; min-height:0 !important;
}
.shp button.shp-toggle-btn.is-active{ background:var(--sh-lime-500) !important; background-color:var(--sh-lime-500) !important; color:#fff !important; }

.shp button.shp-submit{
  background:var(--sh-lime-500) !important; background-color:var(--sh-lime-500) !important;
  border:1.5px solid var(--sh-lime-500) !important; border-radius:999px !important;
  padding:16px 24px !important; text-transform:none !important; letter-spacing:normal !important;
  font-family:var(--sh-font-display) !important; color:#fff !important;
}
.shp button.shp-submit:hover{ background:var(--sh-lime-600) !important; background-color:var(--sh-lime-600) !important; border-color:var(--sh-lime-600) !important; }

@media (max-width: 640px){
  .shp .shp-terms-row{ grid-template-columns:1fr !important; gap:2px 0 !important; }
}

/* ============================================================
   Rate-card components (pricing page and any page listing rates)
   ============================================================ */
.shp-howwe-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 32px;}
.shp-howwe-card{background: #fff; border: 1px solid var(--sh-border); border-radius: 14px; padding: 26px 24px 28px;}
.shp-howwe-card--dark{background: var(--sh-slate-500); border-color: var(--sh-slate-500); color: #fff;}
.shp-howwe-card .shp-eyebrow{font-size: 12px;}
.shp-howwe-card--dark .shp-eyebrow{color: var(--sh-lime-300);}
.shp-howwe-card h3{font-size: 24px; letter-spacing: -0.01em; margin-top: 10px;}
.shp-howwe-card--dark h3{color: #fff;}
.shp-howwe-card p{font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 10px;}
.shp-howwe-card--dark p{color: var(--sh-fg-on-dark-2);}
.shp-flagship{background: var(--sh-offwhite); border-top: 1px solid var(--sh-border); border-bottom: 1px solid var(--sh-border); padding: clamp(56px, 7vw, 104px) 24px;}
.shp-flagship-head{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;}
.shp-flagship-head h2{margin-top: 12px;}
.shp-flagship-head p{font-size: 16px; line-height: 1.6; color: var(--sh-slate-400); max-width: 38ch; margin: 0;}
.shp-flagship-cards{display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; align-items: stretch;}
.shp-flagship-card{position: relative; background: #fff; border: 1px solid var(--sh-border); border-radius: 18px;
  padding: 30px 26px 32px; box-shadow: var(--sh-shadow-sm);}
.shp-flagship-card--featured{border: 2px solid var(--sh-lime-500); box-shadow: var(--sh-shadow-md);}
.shp-flagship-card h3{font-size: 28px; letter-spacing: -0.02em; margin-top: 10px;}
.shp-flagship-card > p{font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 8px;}
.shp-flagship-price{font-family: var(--sh-font-display); font-weight: 900; font-size: 48px; letter-spacing: -0.03em; line-height: 1; margin-top: 24px;}
.shp-flagship-price .shp-permo{font-family: var(--sh-font-body); font-size: 16px; font-weight: 700; color: var(--sh-slate-300); letter-spacing: 0;}
.shp-flagship-note{font-family: var(--sh-font-display); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sh-slate-300); margin-top: 8px;}
.shp-feature-list{display: flex; flex-direction: column; gap: 10px; margin-top: 24px;}
.shp-feature-list li{position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--sh-slate-500);}
.shp-feature-list li::before{content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--sh-lime-500);}
.shp-pillars-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px;
  margin-top: 36px; background: var(--sh-border); border: 1px solid var(--sh-border);
  border-radius: 16px; overflow: hidden;}
.shp-pillar-cell{background: #fff; padding: 28px 24px 30px;}
.shp-pillar-cell h3{font-size: 22px; letter-spacing: -0.01em;}
.shp-pillar-price{font-family: var(--sh-font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.02em; color: var(--sh-lime-600); margin-top: 12px;}
.shp-pillar-price .shp-permo{font-family: var(--sh-font-body); font-size: 14px; font-weight: 700; color: var(--sh-slate-300); letter-spacing: 0;}
.shp-pillar-cell p{font-size: 15px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 12px;}
.shp-ratecard{background: var(--sh-offwhite); border-top: 1px solid var(--sh-border);}
.shp-ratecard-top{padding: clamp(56px, 7vw, 96px) 24px 0;}
.shp-ratecard-head{display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px;}
.shp-ratecard-head h2{margin-top: 12px;}
.shp-toggle{display: inline-flex; background: #fff; border: 1px solid var(--sh-border); border-radius: 999px; padding: 4px;}
.shp-toggle-btn{font-family: var(--sh-font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.04em;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
  background: transparent; color: var(--sh-slate-400); cursor: pointer;
  transition: background var(--sh-dur-base) var(--sh-ease-out), color var(--sh-dur-base) var(--sh-ease-out);}
.shp-toggle-btn:focus-visible{outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring);}
.shp-toggle-btn.is-active{background: var(--sh-lime-500); color: #fff;}
.shp-stickynav{position: sticky; top: var(--shp-header-offset); z-index: 20; background: rgba(250,251,247,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sh-border); margin-top: 36px;}
.shp-stickynav-inner{display: flex; gap: 6px; overflow-x: auto; padding: 12px 0;
  scrollbar-width: none;}
.shp-stickynav-inner::-webkit-scrollbar{display: none;}
.shp-navpill{font-family: var(--sh-font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 9px 16px; border-radius: 999px; text-decoration: none;
  white-space: nowrap; background: #fff; color: var(--sh-slate-400); border: 1px solid var(--sh-border);
  transition: background 150ms var(--sh-ease-out), color 150ms var(--sh-ease-out);}
.shp-navpill:focus-visible{outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring);}
.shp-navpill.is-active{background: var(--sh-slate-500); color: #fff; border-color: var(--sh-slate-500);}
.shp-ratecard-body{padding: 0 24px clamp(56px, 7vw, 104px);}
.shp-group{padding-top: clamp(48px, 6vw, 80px); scroll-margin-top: calc(72px + var(--shp-header-offset));}
.shp-group-head{display: flex; align-items: baseline; gap: 14px;}
.shp-group-num{font-family: var(--sh-font-display); font-weight: 900; font-size: 15px; letter-spacing: 0.08em; color: var(--sh-lime-500);}
.shp-group-head h3{font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em;}
.shp-group-footnote{font-size: 14px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 14px; max-width: 92ch; text-wrap: pretty;}
.shp-terms-row{display: grid; grid-template-columns: minmax(160px, 260px) minmax(0, 1fr); gap: 4px 32px;
  padding: 18px 22px; align-items: baseline; border-top: 1px solid var(--sh-border);}
.shp-terms-row:first-child{border-top: none;}
.shp-terms-row--gate{background: var(--sh-lime-50);}
.shp-term-label{font-family: var(--sh-font-display); font-weight: 900; font-size: 16px; color: var(--sh-slate-500);}
.shp-term-value{font-size: 15px; line-height: 1.55; color: var(--sh-slate-400);}
.shp-terms-footnote{font-size: 14px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 14px; max-width: 92ch; text-wrap: pretty;}
.shp-inclusions-grid{display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;}
.shp-inclusion-card{border-radius: 16px; padding: 32px 28px 34px;}
.shp-inclusion-card--lime{background: var(--sh-lime-50); border: 1px solid var(--sh-lime-200);}
.shp-inclusion-card--dark{background: var(--sh-slate-500); border: 1px solid var(--sh-slate-500);}
.shp-inclusion-card h3{font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em;}
.shp-inclusion-card--dark h3{color: #fff;}
.shp-inclusion-list{display: flex; flex-direction: column; gap: 12px; margin-top: 20px;}
.shp-inclusion-list li{position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--sh-slate-500);}
.shp-inclusion-list li::before{content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 2px; background: var(--sh-lime-500);}
.shp-inclusion-list--dash li{color: var(--sh-fg-on-dark-2);}
.shp-inclusion-list--dash li::before{top: 10px; width: 11px; height: 2px; border-radius: 0; background: var(--sh-lime-400);}
.shp-label + .shp-label, .shp-form-card .shp-label--full{margin-top: 16px;}

/* ============================================================
   KIT LINK OVERRIDE
   The Elementor kit sets a global `a` color (.elementor-kit-6 a),
   which outranks the design's bare class rules and breaks the
   inherit-based link colors. Restore intent at higher specificity.
   ============================================================ */
.shp a{color:inherit!important;}
.shp p a,.shp li a,.shp .shp-faq-answer a{color:var(--sh-lime-600)!important;}
.shp a.shp-btn--primary,.shp a.shp-btn--primary:hover{color:#fff!important;}
.shp a.shp-btn--outline{color:var(--sh-slate-500)!important;}
.shp a.shp-btn--outline:hover{color:#fff!important;}
.shp a.shp-scope-link,.shp a.shp-inline-link{color:var(--sh-lime-600)!important;}
.shp a.shp-quote-phone{color:var(--sh-slate-500)!important;}
.shp a.shp-quote-email{color:var(--sh-slate-400)!important;}
.shp a.shp-related-card{color:inherit!important;}
.shp a.shp-navpill{color:var(--sh-slate-500)!important;}
.shp a.shp-navpill.is-active{color:#fff!important;}

/* form status message */
.shp .shp-form-note{margin:14px 0 0;font-size:15px;line-height:1.5;padding:12px 14px;border-radius:10px;}
.shp .shp-form-note.is-ok{background:var(--sh-lime-50);color:#4c611a;border:1px solid var(--sh-lime-300);}
.shp .shp-form-note.is-err{background:#fdf1f0;color:#98342c;border:1px solid #e8b7b2;}

/* ============================================================
   INDUSTRY PAGE COMPONENTS
   Industries overview + industry single pages.
   ============================================================ */

/* --- numbered industry grid --- */
.shp-industry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:40px;align-items:stretch;}
.shp-industry-card{display:block;position:relative;background:#fff;border:1px solid var(--sh-border);border-radius:16px;
  padding:26px 24px 28px;text-decoration:none;box-shadow:var(--sh-shadow-sm);
  transition:border-color var(--sh-dur-base) var(--sh-ease-out),box-shadow var(--sh-dur-base) var(--sh-ease-out),transform var(--sh-dur-base) var(--sh-ease-out);}
.shp-industry-card:hover{border-color:var(--sh-lime-500);box-shadow:var(--sh-shadow-md);transform:translateY(-2px);}
.shp-industry-num{font-family:var(--sh-font-display);font-weight:900;font-size:13px;letter-spacing:.1em;color:var(--sh-lime-600);}
.shp-industry-tag{display:inline-block;font-family:var(--sh-font-display);font-weight:800;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sh-slate-300);border:1px solid var(--sh-border);border-radius:999px;padding:4px 10px;margin-left:10px;}
.shp-industry-card h3{font-family:var(--sh-font-display);font-weight:900;font-size:23px;letter-spacing:-.01em;color:var(--sh-slate-500);margin:12px 0 0;text-wrap:balance;}
.shp-industry-card p{font-size:15px;line-height:1.6;color:var(--sh-slate-400);margin:8px 0 0;text-wrap:pretty;}
.shp-industry-cta{display:inline-block;margin-top:16px;font-family:var(--sh-font-display);font-weight:800;font-size:14px;letter-spacing:.02em;color:var(--sh-lime-600);}

/* --- client logo wall: one normalized cell size --- */
.shp-logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-top:32px;}
.shp-logocell{display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--sh-border);
  border-radius:12px;padding:14px;height:92px;}
.shp-logocell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.72;transition:filter var(--sh-dur-base) var(--sh-ease-out),opacity var(--sh-dur-base) var(--sh-ease-out);}
.shp-logocell:hover img{filter:grayscale(0);opacity:1;}

/* --- without / with contrast --- */
.shp-contrast{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:32px;align-items:stretch;}
.shp-contrast-card{border-radius:16px;padding:26px 24px;border:1px solid var(--sh-border);background:#fff;}
.shp-contrast-card--bad{background:var(--sh-fog-100);}
.shp-contrast-card--good{background:var(--sh-lime-50);border-color:var(--sh-lime-300);}
.shp-contrast-card h3{font-family:var(--sh-font-display);font-weight:900;font-size:19px;color:var(--sh-slate-500);margin:10px 0 0;}
.shp-contrast-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px;}
.shp-contrast-list li{position:relative;padding-left:24px;font-size:15px;line-height:1.55;color:var(--sh-slate-400);}
.shp-contrast-list li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--sh-slate-300);}
.shp-contrast-card--good .shp-contrast-list li::before{background:var(--sh-lime-500);}

/* --- proof band (a named client, given real weight) --- */
.shp-proof{background:var(--sh-slate-500);border-radius:20px;padding:clamp(30px,4vw,48px);margin-top:40px;color:#fff;}
.shp-proof .shp-eyebrow{color:var(--sh-lime-300);}
.shp-proof h3{font-family:var(--sh-font-display);font-weight:900;font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:12px 0 0;color:#fff;text-wrap:balance;}
.shp-proof p{font-size:16px;line-height:1.65;color:var(--sh-fg-on-dark-2);margin:12px 0 0;max-width:70ch;text-wrap:pretty;}
.shp-proof-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:26px;}
.shp-proof-stat{border-top:2px solid var(--sh-lime-500);padding-top:12px;}
.shp-proof-stat b{display:block;font-family:var(--sh-font-display);font-weight:900;font-size:28px;color:#fff;line-height:1.1;}
.shp-proof-stat span{display:block;font-size:14px;color:var(--sh-fg-on-dark-2);margin-top:4px;}

/* --- location count calculator --- */
.shp-calc{background:#fff;border:1px solid var(--sh-border);border-radius:18px;padding:26px 24px 28px;margin-top:24px;box-shadow:var(--sh-shadow-sm);}
.shp-calc-label{font-family:var(--sh-font-display);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-slate-300);}
.shp-calc-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.shp .shp-calc-pill{font-family:var(--sh-font-display)!important;font-weight:800!important;font-size:13px!important;letter-spacing:.04em!important;
  padding:9px 16px!important;border-radius:999px!important;border:1px solid var(--sh-border)!important;white-space:nowrap!important;
  background:transparent!important;color:var(--sh-slate-400)!important;cursor:pointer;text-transform:none!important;min-height:0!important;}
.shp .shp-calc-pill.is-active{background:var(--sh-lime-500)!important;border-color:var(--sh-lime-500)!important;color:#fff!important;}
.shp .shp-calc-pill:focus-visible{outline:none;box-shadow:0 0 0 3px var(--sh-focus-ring);}
.shp-calc-out{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:22px;}
.shp-calc-cell{border-top:2px solid var(--sh-lime-500);padding-top:12px;}
.shp-calc-cell b{display:block;font-family:var(--sh-font-display);font-weight:900;font-size:clamp(26px,3vw,34px);color:var(--sh-slate-500);line-height:1.05;}
.shp-calc-cell span{display:block;font-size:14px;color:var(--sh-slate-400);margin-top:5px;}
.shp-calc-foot{font-size:14px;line-height:1.6;color:var(--sh-slate-400);margin:22px 0 0;padding-top:18px;border-top:1px solid var(--sh-border);text-wrap:pretty;}
@media(max-width:640px){
  .shp-logowall{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));}
  .shp-logocell{height:76px;}
}

/* outline button on a dark ground (final CTA bands, proof bands) */
.shp .shp-btn--outline-dark{background:transparent!important;border-color:var(--sh-fg-on-dark-2)!important;color:#fff!important;}
.shp .shp-btn--outline-dark:hover{background:#fff!important;border-color:#fff!important;color:var(--sh-slate-500)!important;}

/* --- embedded booking calendar --- */
.shp-booking{background:#fff;border:1px solid var(--sh-border);border-radius:18px;padding:12px;
  box-shadow:var(--sh-shadow-sm);margin-top:28px;overflow:hidden;}
.shp-booking iframe{display:block;width:100%;min-height:800px;border:0;border-radius:10px;background:var(--sh-offwhite);}
.shp-booking-fallback{font-size:14px;line-height:1.6;color:var(--sh-slate-400);margin:12px 4px 2px;text-wrap:pretty;}
@media(max-width:640px){
  .shp-booking{padding:6px;border-radius:14px;}
  .shp-booking iframe{min-height:700px;}
}
@media(max-width:640px){
  /* let the booking calendar use the full screen width, it is cramped inside the gutter */
  .shp-booking{margin-left:-18px;margin-right:-18px;border-radius:0;border-left:0;border-right:0;padding:2px;}
}

/* equal-height cards: the grid stretches the cell, the card fills it */
.shp-piece-card,.shp-industry-card,.shp-contrast-card,.shp-flagship-card{display:flex;flex-direction:column;height:100%;}
.shp-piece-card>p:last-child,.shp-industry-card>p:last-child,.shp-contrast-card>*:last-child{margin-bottom:0;}
.shp-industry-card .shp-industry-cta{margin-top:auto;padding-top:16px;}

/* --- compact client logo strip (replaces the old accolades badges) --- */
.shp-trustrow{margin-top:48px;padding-top:32px;border-top:1px solid var(--sh-border);}
.shp-logowall--compact{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:12px;margin-top:16px;}
.shp-logowall--compact .shp-logocell{height:72px;padding:10px 12px;}
@media(max-width:640px){
  .shp-logowall--compact{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;}
  .shp-logowall--compact .shp-logocell{height:62px;padding:8px;}
}

/* ===== ARCHIVE HEADER + TOPIC FILTER ===== */
.sh-arch{
  --a-lime:#99b640; --a-lime-600:#7f9834; --a-lime-50:#f4f7e8;
  --a-ink:#3d4245; --a-mut:#5c6064; --a-faint:#8c8f92;
  --a-line:#d7dbda; --a-soft:#ecedee; --a-paper:#fff;
  max-width:1140px; margin:0 auto; padding:40px 20px 22px;
  border-bottom:1px solid var(--a-line);
}
.sh-arch__h1{
  font-size:clamp(30px,5vw,44px); line-height:1.08; margin:0 0 12px;
  color:var(--a-ink); letter-spacing:-.01em; text-wrap:balance;
}
.sh-arch__blurb{
  margin:0 0 10px; max-width:66ch; color:var(--a-mut);
  font-size:clamp(15px,1.6vw,17px); line-height:1.6;
}
.sh-arch__count{
  margin:0 0 22px; color:var(--a-faint);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.sh-arch__label{
  display:block; margin-bottom:10px; color:var(--a-faint);
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.sh-arch__pills{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.sh-arch__pills li{margin:0; padding:0;}
.sh-arch__pills li::marker{content:none;}
.sh-pill{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border:1px solid var(--a-line); border-radius:999px;
  background:var(--a-paper); color:var(--a-ink) !important;
  font-size:14px; line-height:1.2; font-weight:500; text-decoration:none !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.sh-pill:hover{background:var(--a-lime-50); border-color:var(--a-lime); color:var(--a-lime-600) !important;}
.sh-pill:focus-visible{outline:2px solid var(--a-lime); outline-offset:2px;}
.sh-pill.is-on{background:var(--a-ink); border-color:var(--a-ink); color:#fff !important;}
.sh-pill.is-on .sh-pill__n{background:rgba(255,255,255,.22); color:#fff;}
.sh-pill__n{
  background:var(--a-soft); color:var(--a-faint);
  border-radius:999px; padding:1px 7px;
  font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;
}

/* ---- post cards ---- */
.sh-arch-list{
  max-width:1140px; margin:0 auto; padding:30px 20px 56px;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:34px 30px;
}
.sh-arch-list .sh-card{
  display:flex; flex-direction:column; margin:0; padding:0; border:0; background:none;
}
.sh-card__img{display:block; margin-bottom:14px; overflow:hidden; border-radius:6px; background:#ecedee;}
.sh-card__img img{
  display:block; width:100%; height:190px; object-fit:cover; max-width:100%;
  transition:transform .35s ease;
}
.sh-card__img:hover img{transform:scale(1.04);}
.sh-card__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:9px;
  margin:0 0 8px; font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.sh-card__cat{color:#7f9834 !important; text-decoration:none !important;}
.sh-card__cat:hover{text-decoration:underline !important;}
.sh-card__meta time{color:#8c8f92; font-weight:500; letter-spacing:.06em;}
/* Elementor kit-6 styles bare h2, so these need to outrank it. */
.sh-arch-list .sh-card h2.sh-card__title{
  margin:0 0 9px !important; font-size:19px !important; line-height:1.3 !important;
  font-weight:700 !important; letter-spacing:-.005em; text-wrap:balance;
}
.sh-arch-list .sh-card h2.sh-card__title a{
  font-size:inherit !important; line-height:inherit !important; font-weight:inherit !important;
  color:#3d4245 !important; text-decoration:none !important;
}
.sh-arch-list .sh-card h2.sh-card__title a:hover{color:#7f9834 !important;}
.sh-arch-list .sh-card p{margin:0 0 12px !important; color:#5c6064; font-size:14.5px !important; line-height:1.62 !important;}
.sh-arch-list .sh-card p.sh-card__meta{font-size:11.5px !important; margin:0 0 8px !important;}
.sh-card__more{
  margin-top:auto; align-self:flex-start;
  color:#7f9834 !important; font-size:13.5px; font-weight:700;
  text-decoration:none !important; border-bottom:1px solid rgba(127,152,52,.4); padding-bottom:1px;
}
.sh-card__more:hover{border-bottom-color:#7f9834;}

@media (max-width:600px){
  .sh-arch{padding:28px 16px 18px;}
  .sh-arch-list{padding:24px 16px 40px; gap:28px; grid-template-columns:1fr;}
  .sh-card__img img{height:auto; aspect-ratio:16/9;}
}
@media (prefers-reduced-motion:reduce){
  .sh-card__img img,.sh-pill{transition:none;}
}

/* ===== BLOG POST QUOTES (Gutenberg wp:quote inside single posts) ===== */
.single-post .wp-block-quote{
  border-left:4px solid #99b640; margin:30px 0; padding:8px 0 8px 24px;
  font-size:1.12em; line-height:1.55; color:#3d4245; background:none; font-style:normal;
}
.single-post .wp-block-quote p{margin:0 0 8px !important; font-size:inherit !important; line-height:inherit !important;}
.single-post .wp-block-quote cite{
  display:block; margin-top:10px; font-size:.72em; font-style:normal; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#7f9834;
}
.single-post .schema-faq-section{margin:0 0 22px;}
.single-post .schema-faq-question{display:block; margin-bottom:6px; color:#3d4245;}

/* Single post excerpt widget: template data now says none, this guards against the stale edge copy of post-3354.css */
.elementor-3354 .elementor-element.elementor-element-2c7c2b6e{text-transform:none !important;}

/* ===== CASE STUDY HUB: headline result inside a card ===== */
.shp .shp-industry-card p.shp-cs-stat{
  font-family:var(--sh-font-display); font-weight:900; font-size:19px; line-height:1.2;
  letter-spacing:-.01em; color:var(--sh-lime-600); margin:10px 0 0;
}
.shp .shp-industry-card p.shp-cs-stat + p{margin-top:8px;}

/* ===== RELATED POSTS (appended to single posts by sitehub-seo.php) ===== */
.sh-related{
  max-width:1140px; margin:48px auto 0; padding:34px 0 0; border-top:1px solid #d7dbda;
}
.single-post .sh-related h2.sh-related__h{
  margin:0 !important; font-size:24px !important; line-height:1.15 !important;
  font-weight:900 !important; color:#3d4245; letter-spacing:-.01em;
}
.sh-related__sub{
  margin:5px 0 22px !important; font-size:11.5px !important; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#8c8f92;
}
.sh-related__grid{
  list-style:none; margin:0 !important; padding:0 !important;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:26px;
}
.sh-related__grid li{margin:0; padding:0; display:flex; flex-direction:column;}
.sh-related__grid li::marker{content:none;}
.sh-related__img{display:block; margin-bottom:11px; border-radius:6px; overflow:hidden; background:#ecedee;}
.sh-related__img img{display:block; width:100%; height:140px; object-fit:cover; max-width:100%;}
.sh-related__cat{
  display:block; margin-bottom:5px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#7f9834;
}
.single-post .sh-related a.sh-related__title{
  font-size:16px !important; line-height:1.34 !important; font-weight:700 !important;
  color:#3d4245 !important; text-decoration:none !important;
}
.single-post .sh-related a.sh-related__title:hover{color:#7f9834 !important;}
@media (max-width:600px){
  .sh-related{margin-top:36px; padding-top:26px;}
  .sh-related__grid{grid-template-columns:1fr; gap:22px;}
  .sh-related__img img{height:auto; aspect-ratio:16/9;}
}

/* ==========================================================================
   1b. Ad spend audit + Gravity Forms skin
   The audit section is the landing target for paid traffic promising an ad
   budget review. The .shp-gf block re-skins Gravity Forms so an embedded form
   reads as part of this design system rather than a bolted-on plugin.
   ========================================================================== */
.shp-audit {
  background: var(--sh-offwhite);
  border-top: 1px solid var(--sh-border);
  border-bottom: 1px solid var(--sh-border);
  padding: clamp(56px, 7vw, 104px) 24px;
  scroll-margin-top: var(--shp-header-offset);
}
.shp-audit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.shp-audit-intro h2 { margin-top: 12px; }
.shp-audit-intro > p {
  font-size: 17px; line-height: 1.6; color: var(--sh-slate-400);
  margin-top: 18px; max-width: 52ch; text-wrap: pretty;
}
.shp-audit-list { margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.shp-audit-list li {
  position: relative; padding-left: 28px;
  font-size: 16px; line-height: 1.55; color: var(--sh-slate-400); max-width: 52ch;
}
.shp-audit-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sh-lime-200); border: 2px solid var(--sh-lime-500);
}
.shp-audit-list strong { color: var(--sh-slate-500); font-weight: 700; }
.shp-audit-note { margin-top: 24px; font-size: 14px; color: var(--sh-slate-300); }
.shp-audit-formwrap {
  background: #fff; border: 1px solid var(--sh-border); border-radius: 18px;
  padding: 28px 26px 30px; box-shadow: var(--sh-shadow-sm);
}

/* --- Gravity Forms skin ------------------------------------------------- */
.shp .gform_wrapper { margin: 0; }
.shp .gform_wrapper form { margin: 0; }
.shp .gform_wrapper .gform_fields { display: grid; grid-template-columns: 1fr; gap: 22px; }
.shp .gform_wrapper .gfield_label,
.shp .gform_wrapper legend.gfield_label {
  font-family: var(--sh-font-body);
  font-size: 15px; font-weight: 700; color: var(--sh-slate-500);
  margin: 0 0 8px; padding: 0; line-height: 1.4;
}
.shp .gform_wrapper .gfield_required { color: var(--sh-teal-600); }
.shp .gform_wrapper .gfield_description {
  font-size: 13px; color: var(--sh-slate-300); padding: 0; margin: 0 0 10px;
}
.shp .gform_wrapper input[type="text"],
.shp .gform_wrapper input[type="email"],
.shp .gform_wrapper input[type="tel"],
.shp .gform_wrapper input[type="url"],
.shp .gform_wrapper textarea,
.shp .gform_wrapper select {
  font-size: 15px; font-family: var(--sh-font-body);
  padding: 11px 13px; border: 1px solid var(--sh-border); border-radius: 10px;
  background: #fff; color: var(--sh-slate-500); outline: none; width: 100%;
  transition: border-color var(--sh-dur-base) var(--sh-ease-out),
              box-shadow var(--sh-dur-base) var(--sh-ease-out);
}
.shp .gform_wrapper textarea { resize: vertical; min-height: 96px; }
.shp .gform_wrapper input:focus,
.shp .gform_wrapper textarea:focus,
.shp .gform_wrapper select:focus {
  border-color: var(--sh-lime-500); box-shadow: 0 0 0 3px var(--sh-focus-ring);
}

/* Choices render as tappable cards: easier on phones than bare radios. */
.shp .gform_wrapper .gfield_checkbox,
.shp .gform_wrapper .gfield_radio { display: flex; flex-direction: column; gap: 8px; }
.shp .gform_wrapper .gchoice {
  position: relative; display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--sh-border); border-radius: 10px;
  padding: 11px 13px; background: #fff;
  transition: border-color var(--sh-dur-fast) var(--sh-ease-out),
              background var(--sh-dur-fast) var(--sh-ease-out);
}
.shp .gform_wrapper .gchoice:hover { border-color: var(--sh-lime-300); background: var(--sh-lime-50); }
.shp .gform_wrapper .gchoice input[type="checkbox"],
.shp .gform_wrapper .gchoice input[type="radio"] {
  width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--sh-lime-500); cursor: pointer;
}
.shp .gform_wrapper .gchoice label {
  font-size: 15px; line-height: 1.45; color: var(--sh-slate-500);
  margin: 0; cursor: pointer; flex: 1;
}
.shp .gform_wrapper .gchoice:has(input:checked) {
  border-color: var(--sh-lime-500); background: var(--sh-lime-50);
}

/* Buttons: submit fills, next/back sit side by side. */
.shp .gform_wrapper .gform_footer,
.shp .gform_wrapper .gform_page_footer {
  margin: 24px 0 0; padding: 0; display: flex; gap: 12px; align-items: center;
}
.shp .gform_wrapper .gform_button,
.shp .gform_wrapper .gform_next_button,
.shp .gform_wrapper .gform_previous_button {
  font-family: var(--sh-font-display); font-weight: 800; font-size: 17px;
  padding: 16px 24px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--sh-lime-500); background: var(--sh-lime-500); color: #fff;
  transition: background var(--sh-dur-base) var(--sh-ease-out),
              border-color var(--sh-dur-base) var(--sh-ease-out);
}
.shp .gform_wrapper .gform_button { width: 100%; }
.shp .gform_wrapper .gform_next_button { flex: 1; }
.shp .gform_wrapper .gform_button:hover,
.shp .gform_wrapper .gform_next_button:hover {
  background: var(--sh-lime-600); border-color: var(--sh-lime-600);
}
.shp .gform_wrapper .gform_previous_button {
  background: #fff; color: var(--sh-slate-400); border-color: var(--sh-border);
  flex: 0 0 auto; font-size: 15px; padding: 14px 20px;
}
.shp .gform_wrapper .gform_previous_button:hover {
  border-color: var(--sh-slate-300); background: var(--sh-fog-100);
}
.shp .gform_wrapper button:focus-visible,
.shp .gform_wrapper input[type="submit"]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--sh-focus-ring);
}

/* Step indicator */
.shp .gform_wrapper .gf_page_steps {
  display: flex; gap: 8px; margin: 0 0 26px; padding: 0 0 18px;
  border-bottom: 1px solid var(--sh-border);
}
.shp .gform_wrapper .gf_step {
  flex: 1; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sh-slate-300);
  padding-top: 10px; border-top: 3px solid var(--sh-border); opacity: 1;
}
.shp .gform_wrapper .gf_step_active { color: var(--sh-slate-500); border-top-color: var(--sh-lime-500); }
.shp .gform_wrapper .gf_step_completed { color: var(--sh-slate-400); border-top-color: var(--sh-lime-300); }
.shp .gform_wrapper .gf_step_number { display: none; }

/* Validation */
.shp .gform_wrapper .gfield_error input,
.shp .gform_wrapper .gfield_error textarea { border-color: #c8553d; }
.shp .gform_wrapper .validation_message {
  font-size: 13px; color: #c8553d; margin-top: 6px; background: none; border: none; padding: 0;
}
.shp .gform_wrapper .gform_validation_errors {
  border: 1px solid #e6b8ad; background: #fdf3f1; border-radius: 10px;
  padding: 14px 16px; margin: 0 0 22px; box-shadow: none;
}
.shp .gform_wrapper .gform_validation_errors h2 {
  font-size: 15px; font-family: var(--sh-font-body); font-weight: 700; color: #a8412c; margin: 0;
}

/* Confirmation: the booking step. */
.shp-audit-done-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--sh-lime-600);
  background: var(--sh-lime-50); border: 1px solid var(--sh-lime-200);
  border-radius: 999px; padding: 6px 14px;
}
.shp-audit-done h3 {
  font-family: var(--sh-font-display); font-weight: 900; font-size: clamp(24px, 3vw, 32px);
  color: var(--sh-slate-500); margin: 16px 0 0; line-height: 1.15;
}
.shp-audit-done > p { font-size: 16px; line-height: 1.6; color: var(--sh-slate-400); margin-top: 12px; max-width: 56ch; }
.shp-booking--confirm { margin-top: 24px; border: 1px solid var(--sh-border); border-radius: 14px; overflow: hidden; }
.shp-booking--confirm iframe { display: block; width: 100%; border: 0; }

/* The quote section reuses the same skin inside its existing card. */
.shp-gf-embed .gform_wrapper { margin: 0; }

@media (max-width: 600px) {
  .shp-audit-formwrap { padding: 22px 18px 24px; }
  .shp .gform_wrapper .gf_step { font-size: 0; padding-top: 8px; }
  .shp .gform_wrapper .gform_page_footer { flex-wrap: wrap; }
}

/* ==========================================================================
   Section rhythm + headline wrapping
   --------------------------------------------------------------------------
   1. One padding token, so every section's top and bottom always match.
      Previously .shp-hero was 104px top / 88px bottom, and .shp-related and
      .shp-reviews capped at 96px while everything else capped at 104px.
   2. Two borderless sections in a row were stacking their padding, so the gap
      between them was roughly double the gap inside them, with no border or
      background change to explain it. That is the space above the heading
      "Why your numbers don't match" on the measurement page. Bordered sections
      read as their own band, so they keep their full padding.
   3. text-wrap: balance evens out line lengths by deliberately shortening the
      first line, which on a wide screen reads as wrapping too early. "pretty"
      keeps the orphan protection without giving up the full measure.
   ========================================================================== */
.shp {
  --shp-section-pad: clamp(56px, 7vw, 104px);
}

.shp-hero,
.shp-section,
.shp-pieces,
.shp-build,
.shp-deliverables,
.shp-gs-pricing,
.shp-quote,
.shp-faq,
.shp-related,
.shp-reviews,
.shp-audit {
  padding-top: var(--shp-section-pad);
  padding-bottom: var(--shp-section-pad);
}

/* The borderless, background-less sections. Only these can double up. */
:is(.shp-section, .shp-build, .shp-gs-pricing, .shp-faq)
  + :is(.shp-section, .shp-build, .shp-gs-pricing, .shp-faq) {
  padding-top: 0;
}

.shp-h2 { text-wrap: pretty; }

/* ==========================================================================
   SiteHub edits, 2026-09-18
   Appended to the previous stylesheet and shipped as a NEW timestamped file,
   because sitehub-shp-assets.php enqueues whichever sitehub-shp-*.css has the
   newest mtime. Nothing above this line was modified.
   ========================================================================== */

/* --- 1. Concrete texture on every page header ---------------------------
   Same asset and treatment as the homepage hero (hero-marble.jpg, despite the
   name it is the concrete texture). Kept behind the off-white as a background
   COLOR fallback so the dark heading text never loses contrast if it 404s. */
.shp-hero {
  background-color: var(--sh-offwhite);
  background-image: url("https://yoursitehub.com/wp-content/uploads/2026/05/hero-marble.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --- 2. Mobile gutters --------------------------------------------------
   .shp-section carried 24px of side padding AND .shp-container added another
   24px, with no mobile override, so copy sat 48px from each edge. On a 375px
   phone that is a quarter of the screen. Collapse to a single 18px gutter. */
@media (max-width: 600px) {
  .shp-hero, .shp-section, .shp-faq, .shp-finalcta, .shp-pieces, .shp-build,
  .shp-deliverables, .shp-gs-pricing, .shp-quote, .shp-related, .shp-reviews,
  .shp-flagship, .shp-audit, .shp-ratecard-top {
    padding-left: 0;
    padding-right: 0;
  }
  .shp-container { padding: 0 18px; }
}

/* --- 4. Pre-footer CTA gets the homepage concrete photo -----------------
   A dark scrim over it so the white heading and lime button keep contrast. */
.shp-finalcta {
  background-color: var(--sh-slate-500);
  background-image:
    linear-gradient(rgba(38, 42, 45, 0.84), rgba(38, 42, 45, 0.84)),
    url("https://yoursitehub.com/wp-content/uploads/2026/05/shutterstock_1969222828-scaled-1.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* --- 5. Logo walls were oversized -------------------------------------- */
.shp-logocell { height: 58px; }
.shp-logowall--compact .shp-logocell { height: 50px; padding: 8px 10px; }
@media (max-width: 600px) {
  .shp-logocell { height: 46px; }
  .shp-logowall--compact .shp-logocell { height: 42px; }
}

/* --- 6. Bullets: round, not square ------------------------------------- */
.shp-panel-list li::before,
.shp-feature-list li::before,
.shp-inclusion-list li::before { border-radius: 50%; }
/* the dash variant is deliberate, leave it alone */
.shp-inclusion-list--dash li::before { border-radius: 0; }

/* --- 7. Drop the pastel wash behind accordions -------------------------
   --sh-lime-50 (#f4f7e8) read as a tint rather than an interaction. A neutral
   ink wash gives the same affordance without the colour. */
.shp-row-head--toggle:hover,
.shp-faq-head:hover,
.shp button.shp-row-head--toggle:hover,
.shp button.shp-faq-head:hover { background: rgba(16, 18, 20, 0.045) !important; }
.shp-row.is-open { background: #fff; }
.shp-terms-row--gate { background: var(--sh-offwhite); }

/* --- 8. One section rhythm --------------------------------------------
   Sections previously disagreed: 56/7vw/104, hero 48..44, finalcta 64/8vw/120,
   ratecard 56/7vw/96. All now run off the same variable. */
.shp-hero, .shp-section, .shp-faq, .shp-finalcta, .shp-pieces, .shp-build,
.shp-deliverables, .shp-gs-pricing, .shp-quote, .shp-related, .shp-reviews,
.shp-flagship, .shp-audit {
  padding-top: var(--shp-section-pad);
  padding-bottom: var(--shp-section-pad);
}
.shp-ratecard-top { padding-top: var(--shp-section-pad); padding-bottom: 0; }

/* --- 11. Break up the wall of white ------------------------------------
   Alternate bands plus a rule above each section eyebrow, so a long service
   page reads as distinct chapters instead of one scroll. */
.shp .shp-section:nth-of-type(even) {
  background: var(--sh-offwhite);
  border-top: 1px solid var(--sh-border);
  border-bottom: 1px solid var(--sh-border);
}
.shp .shp-section:nth-of-type(even) + .shp-section:nth-of-type(odd) { border-top: 0; }
.shp-section-head .shp-eyebrow::before,
.shp-faq > .shp-container > .shp-eyebrow::before {
  content: "";
  display: block;
  width: 38px;
  height: 3px;
  border-radius: 2px;
  background: var(--sh-lime-500);
  margin-bottom: 14px;
}

/* --- 3. Footer newsletter submit matched to the site button ------------
   It was rendering with raw Elementor button styling, which is why it looked
   unrelated to every .shp-btn on the page. */
.elementor-497 .elementor-button,
.elementor-497 button.elementor-button,
.elementor-497 .elementor-field-type-submit button {
  background: var(--sh-lime-500);
  color: #0e0f10;
  border: 1.5px solid var(--sh-lime-500);
  border-radius: 999px;
  font-family: var(--sh-font-display);
  font-weight: 800;
  font-size: 16px;
  padding: 15px 28px;
  transition: background 150ms var(--sh-ease-out), color 150ms var(--sh-ease-out);
}
.elementor-497 .elementor-button:hover,
.elementor-497 button.elementor-button:hover,
.elementor-497 .elementor-field-type-submit button:hover {
  background: var(--sh-lime-600);
  border-color: var(--sh-lime-600);
  color: #fff;
}

/* --- 10. Footer: close the mobile gap under the description ------------ */
@media (max-width: 767px) {
  .elementor-497 .elementor-element.elementor-element-765eb79 { row-gap: 10px; }
  .elementor-497 .elementor-element.elementor-element-765eb79 .elementor-widget-image { margin-bottom: 0; }
  .elementor-497 .elementor-element.elementor-element-765eb79 .elementor-widget-text-editor { margin-bottom: 0; }
  .elementor-497 > .e-con-inner { row-gap: 26px; }
}

/* --- 11b. One dark band per service page --------------------------------
   Measured first: no service page used the dark .shp-proof block, so the only
   dark element on a page was the final CTA. Everything between the header and
   the footer was light cards on light ground, which is what made them read as
   flat next to the about page (which punctuates with 10 numeric counters and
   6 icon boxes).

   .shp-build is the "how we run it" step section and appears exactly once on
   every service page, so inverting it gives each page a single strong break
   at a consistent point. The step cards stay white, so they lift off the dark
   ground and the existing 01/02/03 numerals finally carry some weight. */
.shp-build {
  background: var(--sh-slate-500);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.shp-build h2,
.shp-build .shp-h2 { color: #fff; }
.shp-build .shp-eyebrow { color: var(--sh-lime-400); }
.shp-build .shp-eyebrow::before { background: var(--sh-lime-400); }
.shp-build > .shp-container > p,
.shp-build .shp-section-head p { color: #cfd3d1; }

/* the grid's 1px rules come from its own background showing through the gap */
.shp-build .shp-steps-grid {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.14);
}
.shp-build .shp-step-cell { background: #fff; }

/* give the numerals some presence now that they sit on a card over dark */
.shp-build .shp-step-num { font-size: 46px; }
@media (max-width: 600px) {
  .shp-build .shp-step-num { font-size: 36px; }
}

/* --- 5b. Logo wall: normalise optical size, especially on mobile --------
   The wall mixes aspect ratios hard: a 1024x242 wordmark (4.2:1), a 768x500
   (1.5:1) and a 300x300 circle (1:1). In a short, narrow cell the wide marks
   get constrained by WIDTH and shrink, while the square ones fill the HEIGHT
   and look oversized. That mismatch is what reads as "mis-sized", not the
   cell height on its own.

   Fix: make cells wide enough that HEIGHT is the binding constraint for every
   logo, then cap the image height so they all render at one optical size. On
   mobile that means exactly two columns, not auto-fill, which otherwise packs
   three narrow cells onto a 375px screen and squeezes the wordmarks. */
.shp-logowall {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.shp-logocell { height: 64px; padding: 12px 16px; }
.shp-logocell img { max-height: 32px; max-width: 100%; }

.shp-logowall--compact {
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}
.shp-logowall--compact .shp-logocell { height: 56px; padding: 10px 14px; }
.shp-logowall--compact .shp-logocell img { max-height: 26px; }

@media (max-width: 640px) {
  .shp-logowall,
  .shp-logowall--compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .shp-logocell,
  .shp-logowall--compact .shp-logocell { height: 58px; padding: 10px 14px; }
  .shp-logocell img,
  .shp-logowall--compact .shp-logocell img { max-height: 28px; max-width: 100%; }
}

/* --- Contrast blocks, redrawn -------------------------------------------
   The old pattern was a grey-tinted "what usually happens" card sitting beside
   a lime-tinted "what we build instead" card, both rounded, both filled, with
   coloured dot bullets. Two tinted boxes side by side is the generic template
   tell, and the fill was --sh-lime-50, the same pastel already pulled off the
   accordions.

   Replacement uses no fills and no cards. Two columns split by a hairline,
   each headed by a rule that carries the meaning: muted for the old way, lime
   for ours. Bullets stay circular to match the house style, but the old-way
   column gets a hollow ring and recessive text, so the eye lands on the right
   column without a single block of colour doing the work.
   Live on the 5 industry pages that use .shp-contrast. */
.shp-contrast {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  margin-top: 36px;
  align-items: start;
}

.shp-contrast-card,
.shp-contrast-card--bad,
.shp-contrast-card--good {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 22px 34px 0 0;
}

/* the rule above each column does the labelling work the fill used to do */
.shp-contrast-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 34px;
  height: 2px;
  background: var(--sh-border);
}
.shp-contrast-card--good::before { background: var(--sh-lime-500); }

.shp-contrast-card--bad .shp-step-eyebrow { color: var(--sh-slate-300); }
.shp-contrast-card--good .shp-step-eyebrow { color: var(--sh-lime-600); }

/* hollow ring = the old way, filled = ours. Both circular. */
.shp-contrast-list li::before {
  width: 8px;
  height: 8px;
  top: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--sh-slate-300);
}
.shp-contrast-card--good .shp-contrast-list li::before {
  background: var(--sh-lime-500);
  border-color: var(--sh-lime-500);
}
.shp-contrast-card--bad .shp-contrast-list li { color: var(--sh-slate-300); }

/* side-by-side only: hairline between the columns */
@media (min-width: 760px) {
  .shp-contrast-card + .shp-contrast-card {
    padding: 22px 0 0 34px;
    border-left: 1px solid var(--sh-border);
  }
  .shp-contrast-card + .shp-contrast-card::before { left: 34px; right: 0; }
}

/* stacked: drop the divider, give the columns breathing room */
@media (max-width: 759px) {
  .shp-contrast-card,
  .shp-contrast-card + .shp-contrast-card {
    padding: 20px 0 0;
    border-left: 0;
  }
  .shp-contrast-card::before,
  .shp-contrast-card + .shp-contrast-card::before { left: 0; right: 0; }
  .shp-contrast-card + .shp-contrast-card { margin-top: 30px; }
}

/* --- Pricing: the one section that broke the mobile gutter --------------
   .shp-ratecard-body sets its own `0 24px` AND wraps a .shp-container, so on
   a phone it rendered at 24+18=42px while every neighbouring section sat at
   18px. That mismatch is what reads as inconsistent margins on /pricing/. */
@media (max-width: 600px) {
  .shp-ratecard-body,
  .shp-ratecard,
  .shp-gs-pricing { padding-left: 0; padding-right: 0; }
}

/* --- Retire the remaining pastel washes ---------------------------------
   Keeping every --sh-lime-500 accent: buttons, bullets, rules and chevrons
   are the brand. What goes is the --sh-lime-50 (#f4f7e8) FILL, which is the
   tint that reads as washed-out. Where a block needs to signal "this one
   matters", it now does it with a lime rule on a white ground instead. */
.shp-notecard--lime {
  background: var(--sh-offwhite);
  border: 1px solid var(--sh-border);
  border-left: 3px solid var(--sh-lime-500);
}
.shp-inclusion-card--lime {
  background: #fff;
  border: 1px solid var(--sh-border);
  border-top: 3px solid var(--sh-lime-500);
}
.shp-terms-row--gate { background: var(--sh-offwhite); }
.shp-audit-done-tag {
  background: var(--sh-offwhite);
  border: 1px solid var(--sh-lime-300);
  color: var(--sh-lime-600);
}
.shp .shp-form-note.is-ok {
  background: var(--sh-offwhite);
  border-left: 3px solid var(--sh-lime-500);
  color: var(--sh-slate-500);
}
.shp .gform_wrapper .gchoice:hover { background: rgba(16, 18, 20, 0.04); }
.shp .gform_wrapper .gchoice:has(input:checked) {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--sh-lime-500);
}
.sh-pill:hover { background: rgba(16, 18, 20, 0.05); }
/* the "bad" contrast column already lost its fill in the redraw above; this
   catches the base rule in case the cascade order ever shifts */
.shp-contrast-card--bad { background: none; }

/* --- Scope block: quieter frame to match the rewritten copy -------------
   The copy is being changed from "Scope boundary / This page is the hub" to
   plain language. The frame follows: white ground with a lime top rule like
   the contrast columns, rather than another filled rounded card. */
.shp-scope-card {
  background: #fff;
  border: 1px solid var(--sh-border);
  border-top: 3px solid var(--sh-lime-500);
  border-radius: 4px;
  padding: 28px 26px 30px;
}
.shp-scope-eyebrow { color: var(--sh-lime-600); }

/* --- Footer: the real cause of the mobile gap ---------------------------
   The footer is an Elementor GRID container (8efb31a) holding four columns.
   Elementor emits:
     desktop  --e-con-grid-template-columns:repeat(4,1fr)  rows:repeat(1,1fr)
     tablet   --e-con-grid-template-columns:repeat(2,1fr)  rows:repeat(2,1fr)
     mobile   --e-con-grid-template-columns:repeat(1,1fr)  rows: NOT RESET
   So on a phone four stacked children run against a leftover two-row 1fr
   template with the default align:stretch, which inflates the first cell.
   That cell is the logo + "Marketing you can prove" description, which is the
   shortest of the four, so the empty space lands exactly where it was reported:
   after the description and before the Rochester address.

   My first attempt at this targeted 765eb79 (a child column) and did nothing.
   The row template on the grid itself is the thing that has to be reset. */
@media (max-width: 767px) {
  .elementor-497 .elementor-element.elementor-element-8efb31a {
    --e-con-grid-template-rows: auto;
    grid-template-rows: auto;
    align-items: start;
    row-gap: 28px;
  }
  /* children size to their own content rather than a stretched track */
  .elementor-497 .elementor-element.elementor-element-8efb31a > .e-con {
    align-self: start;
    height: auto;
  }
}

/* --- Footer newsletter submit: my first attempt lost on specificity -------
   Elementor scopes it at (0,4,1):
     .elementor-497 .elementor-element.elementor-element-797f41f
       .elementor-button[type="submit"]{background-color:#F8F8F8;...}
   My earlier `.elementor-497 button.elementor-button` is (0,2,1), so the grey
   kept winning and the button stayed visually unrelated to every .shp-btn.
   Matching their scope and adding an element selector takes it to (0,4,2). */
.elementor-497 .elementor-element.elementor-element-797f41f button.elementor-button[type="submit"],
.elementor-497 .elementor-element.elementor-element-797f41f .elementor-button[type="submit"] {
  background-color: var(--sh-lime-500);
  color: #0e0f10;
  border-radius: 999px;
  font-family: var(--sh-font-display);
  font-weight: 800;
  padding: 14px 26px;
}
.elementor-497 .elementor-element.elementor-element-797f41f button.elementor-button[type="submit"]:hover,
.elementor-497 .elementor-element.elementor-element-797f41f .elementor-button[type="submit"]:hover {
  background-color: var(--sh-lime-600);
  color: #fff;
}
.elementor-497 .elementor-element.elementor-element-797f41f .elementor-button[type="submit"] svg * {
  fill: #0e0f10;
}

/* --- Final CTA button rows were left-aligned -----------------------------
   .shp-hero-btnrow is display:flex with no justify-content, so it defaults to
   flex-start. .shp-finalcta sets text-align:center, but text-align does not
   position flex items, only justify-content does. So the heading and paragraph
   centred while the buttons sat hard left. Verified on /case-studies/.
   Scoped to the final CTA on purpose: hero button rows are meant to be left
   aligned, and 35 pages rely on that. */
.shp-finalcta .shp-hero-btnrow { justify-content: center; }