/* ============================================================
   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; }

/* --- Numbered circles, borrowed from the about page's accent language ----
   The service pages already carry numerals in three sizes: .shp-step-num (40px,
   on step cells), .shp-industry-num (13px, inline on card grids) and
   .shp-proc-num (40px, process rows). They read as plain text. Setting them as
   filled lime discs gives the same punctuation the about page gets from its
   accent numbers, costs no content edits, and applies everywhere at once.
   Accent is --sh-lime-500 (#99b640); the about page uses Elementor's
   --e-global-color-accent (#9BB645), near enough that they read as one colour. */

.shp-step-num,
.shp-proc-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--sh-lime-500);
  color: #0e0f10;
  font-family: var(--sh-font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 1;
}
/* the dark "how we run it" band: a lime disc on a white card still reads */
.shp-build .shp-step-num { font-size: 20px; width: 54px; height: 54px; }

@media (max-width: 600px) {
  .shp-step-num,
  .shp-proc-num,
  .shp-build .shp-step-num { width: 44px; height: 44px; font-size: 17px; }
}

/* card grids: a small disc sitting beside the category tag */
.shp-industry-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shp-industry-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sh-lime-500);
  color: #0e0f10;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1;
}

/* --- Accent colour inside a headline -----------------------------------
   The about page puts the accent on a word or a number inside a heading. This
   is the utility for it. CSS cannot choose which word to accent, so this does
   nothing until a word is wrapped: <h2 class="shp-h2">Text <em>word</em></h2>
   or <span class="shp-accent">word</span>. Both forms are supported, and <em>
   keeps its meaning if the CSS ever goes away. */
.shp-accent,
.shp-h2 em,
.shp-hero h1 em {
  color: var(--sh-lime-600);
  font-style: normal;
}
.shp-finalcta .shp-h2 em,
.shp-build .shp-h2 em,
.shp-proof .shp-accent { color: var(--sh-lime-400); }

/* --- Match the about page's badge exactly -------------------------------
   The about page's M_01 / V_02 markers above Mission and Vision are not plain
   discs. Their signature is a soft halo ring:
     background-color: var(--e-global-color-accent);   #9BB645
     box-shadow: 0 0 0 6px rgba(153,182,64,.18);
   with 12px / 700 / 0.12em type. V_02 uses the teal (#00B4AF) with a matching
   teal halo, so the pair alternates.

   Applying the halo to the service-page numerals. Kept to lime by default
   rather than alternating every card: on a 9-card grid an alternating pair
   reads as noise, where on the about page it is exactly two markers. */
.shp-step-num,
.shp-proc-num,
.shp-industry-num {
  box-shadow: 0 0 0 6px rgba(153, 182, 64, 0.18);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.shp-industry-num { box-shadow: 0 0 0 5px rgba(153, 182, 64, 0.18); }

/* on the dark band the 18% halo disappears, so lift it */
.shp-build .shp-step-num { box-shadow: 0 0 0 6px rgba(153, 182, 64, 0.26); }

/* the halo needs room; these grids clip at the rounded corner */
.shp-steps-grid,
.shp-pillars-grid { overflow: visible; }

@media (max-width: 600px) {
  .shp-step-num,
  .shp-proc-num,
  .shp-build .shp-step-num { box-shadow: 0 0 0 5px rgba(153, 182, 64, 0.18); }
}

/* Teal counterpart, for where a second marker should read as a pair the way
   Mission and Vision do. Not applied anywhere yet; add .shp-num--alt to use. */
.shp-num--alt {
  background: var(--sh-teal-500);
  box-shadow: 0 0 0 6px rgba(8, 181, 175, 0.18);
  color: #fff;
}

/* --- Pill eyebrows, lifted from the about page -------------------------
   The about page's section eyebrows (// ABOUT.MAP, // BY THE NUMBERS,
   // THE TEAM ...) are pills:
     #FFFFFF99 ground, 1px #D7DBDA border, 999px radius, 6px 14px padding
     12px uppercase, 0.25em tracking, slate text (#54595F)
     an 8px lime dot with box-shadow 0 0 0 4px rgba(153,182,64,.18), gap 12px
   The dot carries the colour, not the word. That is what keeps it quiet.
   Same halo language as the M_01 / V_02 badges, so the two read as one system.

   This REPLACES the 38px lime rule I put above eyebrows earlier: a rule plus a
   pill is two devices doing one job. Section eyebrows only. Card-level
   .shp-step-eyebrow stays plain, because a pill on every card is noise. */
.shp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  padding: 6px 14px;
  border: 1px solid var(--sh-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--sh-slate-400);
}
.shp-eyebrow::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-lime-500);
  box-shadow: 0 0 0 4px rgba(153, 182, 64, 0.18);
  /* cancel the earlier rule treatment */
  margin: 0;
}

/* dark grounds: the white pill would glare, so invert it */
.shp-build .shp-eyebrow,
.shp-proof .shp-eyebrow,
.shp-howwe-card--dark .shp-eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #cfd3d1;
}
.shp-build .shp-eyebrow::before,
.shp-proof .shp-eyebrow::before,
.shp-howwe-card--dark .shp-eyebrow::before {
  background: var(--sh-lime-400);
  box-shadow: 0 0 0 4px rgba(167, 192, 77, 0.24);
}

/* the hero sits on the concrete texture, so give the pill a touch more body */
.shp-hero .shp-eyebrow { background: rgba(255, 255, 255, 0.78); }

@media (max-width: 600px) {
  .shp-eyebrow { letter-spacing: 0.18em; padding: 5px 12px; gap: 10px; }
}

/* --- Headlines were running narrow, and the lede sat too close ----------
   .shp-hero h1 was capped at 20ch. At the 76px display size that lands near
   800px inside a 1152px content box, so roughly 350px of the container went
   unused and headlines wrapped a line earlier than they needed to.
   Other headline caps were tight for the same reason: .shp-whatgs-grid h2 at
   24ch and .shp-finalcta h2 at 22ch.

   Caps are kept (a headline running the full 1200px would be a poor measure),
   just widened. Mobile is unaffected: at 36px the container is the binding
   constraint long before the ch cap is. */
.shp-hero h1 { max-width: 28ch; }
.shp-whatgs-grid h2 { max-width: 30ch; }
.shp-finalcta h2 { max-width: 26ch; }

/* breathing room under the H1. 22px was tight against a 76px headline set at
   0.98 line-height, which pulls the lede visually closer still. */
.shp-hero-lede { margin-top: clamp(20px, 2.4vw, 34px); }

/* the same gap under section headings that carry a lede paragraph */
.shp-section-head h2 { margin-top: 12px; }
.shp-section-head > div + p { margin-top: 4px; }

/* --- Fix the pill's dot: a leftover rule was still winning ---------------
   When I added the pill eyebrow I said it replaced the 38px lime rule. It did
   not. The old rule is scoped
     .shp-section-head .shp-eyebrow::before            (0,2,1)
   and my dot was
     .shp-eyebrow::before                              (0,1,1)
   so inside every .shp-section-head the ::before kept rendering as a 38x3px
   horizontal bar sitting in the middle of the pill. Same specificity here,
   declared later, so the dot wins. */
.shp-section-head .shp-eyebrow::before,
.shp-faq > .shp-container > .shp-eyebrow::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sh-lime-500);
  box-shadow: 0 0 0 4px rgba(153, 182, 64, 0.18);
  margin: 0;
}
.shp-build .shp-section-head .shp-eyebrow::before,
.shp-proof .shp-section-head .shp-eyebrow::before {
  background: var(--sh-lime-400);
  box-shadow: 0 0 0 4px rgba(167, 192, 77, 0.24);
}

/* =======================================================================
   Audit fixes, 2026-09-18. Several of these are regressions introduced by
   earlier layers today; each is noted as such.
   ===================================================================== */

/* --- P0. Section padding collapsed against banded sections (MY REGRESSION)
   An earlier rule zeroes padding-top between adjacent sections, and its own
   comment says it is only safe for "borderless, background-less sections".
   Two later layers broke that precondition: the nth-of-type banding gave
   .shp-section a background and borders, and .shp-build became the dark band.
   Result: 23 places across 18 pages where an eyebrow sits flush on a 1px
   border with no top padding. /partners/ has 5. Restore padding wherever the
   PRECEDING section actually paints a ground. */
:is(.shp-section, .shp-build, .shp-gs-pricing, .shp-faq)
  + :is(.shp-section, .shp-gs-pricing, .shp-faq) {
  padding-top: var(--shp-section-pad);
}

/* --- P2. The alternating band never alternated (MY REGRESSION, now removed)
   nth-of-type counts sibling <section> elements, not off-white ones, and it
   had no idea .shp-pieces / .shp-deliverables / .shp-related / .shp-quote are
   already off-white. On a standard service page it produced THREE consecutive
   off-white bands. Those section types already alternate on their own, so the
   rule was doing harm for no gain. */
.shp .shp-section:nth-of-type(even) {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
}

/* --- P1. overflow:visible broke the grid's rounded corners (MY REGRESSION)
   I set this so the numeral halo would not clip. It never needed it: the disc
   sits inside 24px of cell padding and the halo spreads only 6px. Meanwhile
   overflow:hidden was what clipped the white cells to the 16px radius, so
   removing it left square corners over a rounded border. */
.shp-steps-grid,
.shp-pillars-grid { overflow: hidden; }

/* --- P1. Hero accent failed contrast on the concrete photo (MY REGRESSION)
   The accent was set against --sh-offwhite, but background-image paints over
   background-color, so the real ground is hero-marble.jpg. Measured 2.64:1,
   under the 3.0 large-text floor. #5c7322 gives 4.32:1 worst case. */
.shp-accent,
.shp-h2 em,
.shp-hero h1 em { color: #5c7322; }

/* --- P0. Focus indicator was being killed sitewide
   A kit override sets box-shadow:none !important on .shp-row-head/.shp-faq-head,
   which beats the non-important :focus-visible ring. 438 accordion buttons had
   no visible focus at all. */
.shp button.shp-row-head:focus-visible,
.shp button.shp-faq-head:focus-visible,
.shp-row-head:focus-visible,
.shp-faq-head:focus-visible {
  outline: 2px solid transparent;          /* forced-colors mode fallback */
  outline-offset: 2px;
  box-shadow: inset 0 0 0 3px var(--sh-lime-600) !important;
}

/* --- P2. Focus ring was too faint to satisfy 1.4.11 (1.55:1) */
:root { --sh-focus-ring: #7f9834; }

/* --- P1. White on lime measured 2.30:1
   The system already answers this: the footer submit and the numeral discs use
   #0e0f10 on the same lime for 8.33:1. Bring the rest in line. */
.shp-btn--primary,
.shp-submit,
.shp .shp-btn--primary,
.shp button.shp-submit,
.shp-tag--chosen,
.shp-toggle-btn.is-active,
.shp .shp-calc-pill.is-active { color: #0e0f10 !important; }

/* --- P1. Collapsed accordion panels were still focusable and readable
   Collapse was purely visual (grid-template-rows:0fr), so 153 links inside
   closed answers stayed in the tab order and screen readers announced them. */
.shp-faq-panel-inner,
.shp-row-panel-inner {
  visibility: hidden;
  transition: visibility 0s linear var(--sh-dur-base, .25s);
}
.is-open .shp-faq-panel-inner,
.is-open .shp-row-panel-inner {
  visibility: visible;
  transition-delay: 0s;
}

/* --- P1. .shp-contrast had a 64px window where columns touched
   auto-fit held two columns down to a 696px viewport, but the stacked rules
   only started at 759px. Between the two the columns rendered side by side
   with gap:0 and no divider. */
@media (max-width: 759px) {
  .shp-contrast { grid-template-columns: 1fr; }
}

/* --- P2. Muted text below AA */
.shp a.shp-inline-link,
.shp a.shp-scope-link,
.shp-industry-cta,
.shp-step-eyebrow,
.shp-scope-eyebrow { color: #617a23 !important; }   /* was 3.26:1, now 4.87:1 */
.shp-price-note,
.shp-panel-label,
.shp-flagship-note,
.shp-calc-label,
.shp-quote-address,
.shp-audit-note,
.shp-reviews-meta { color: #6e7276; }                /* was 3.25:1, now 4.85:1 */
.shp-contrast-card--bad .shp-contrast-list li { color: #6e7276; }

/* --- P3. Numerals sat optically left inside their disc
   letter-spacing adds trailing space after the last digit inside a centred
   flex box. Nudge it back by the same amount. */
.shp-step-num,
.shp-proc-num,
.shp-industry-num { text-indent: 0.12em; }

/* --- P0. The outline button variant was applied backwards in 6 places ----
   The CSS was right; the markup picked the wrong class. Rather than edit six
   markup locations (and depend on nobody getting it wrong again), decide the
   variant from the GROUND the button sits on, which is what the variant was
   always describing.

   Measured before/after:
     /industries/ hero: white text on hero-marble.jpg  = 1.03-1.24:1
     5 dark final CTAs: #3d4245 on the scrimmed photo  = 1.05-1.27:1
   Both were effectively invisible. */

/* dark ground: the final CTA. Any outline button here goes light. */
.shp-finalcta .shp-btn--outline,
.shp-finalcta a.shp-btn--outline,
.shp .shp-finalcta a.shp-btn--outline {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}
.shp-finalcta .shp-btn--outline:hover,
.shp .shp-finalcta a.shp-btn--outline:hover {
  color: #0e0f10 !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* light ground: the hero. An outline-dark button here goes dark. */
.shp-hero .shp-btn--outline-dark,
.shp .shp-hero a.shp-btn--outline-dark {
  color: var(--sh-slate-500) !important;
  border-color: var(--sh-slate-400) !important;
}
.shp-hero .shp-btn--outline-dark:hover,
.shp .shp-hero a.shp-btn--outline-dark:hover {
  color: #fff !important;
  background: var(--sh-slate-500) !important;
  border-color: var(--sh-slate-500) !important;
}

/* =======================================================================
   Off-brand greens, 2026-09-18. MY REGRESSION from edits13.
   Yesterday's contrast pass invented two olive greens, #5c7322 and #617a23.
   Neither exists anywhere in the site's own palette: base.css uses
   #99b640 (brand), #7f9834 and #a7c04d. Chasing a WCAG number produced a
   colour the brand does not own, which is the wrong trade on a decorative
   accent. Reverted to the real tokens.
   ===================================================================== */

/* Headline accent words -> the actual brand lime.
   These are display sizes (hero 76px, h2 ~40px) used as emphasis inside a
   heading whose remaining words carry the meaning in full slate, so the
   accent is decoration, not the only carrier of information. */
.shp-accent,
.shp-h2 em,
.shp-hero h1 em {
  color: var(--sh-lime-500);
}

/* The hero accent is the one place the ground is a photo (hero-marble.jpg),
   which is what pushed me to darken it in the first place. Keep the brand
   hue and buy the legibility back with a shadow instead of a hue shift. */
.shp-hero h1 em,
.shp-hero .shp-accent {
  text-shadow: 0 1px 2px rgba(14, 15, 16, 0.30), 0 0 2px rgba(14, 15, 16, 0.18);
}

/* Dark grounds keep the lighter tint they already had, and want no shadow. */
.shp-finalcta .shp-h2 em,
.shp-build .shp-h2 em,
.shp-proof .shp-accent {
  color: var(--sh-lime-400);
  text-shadow: none;
}

/* Small accents -> #7f9834, the shade base.css already uses for exactly
   these elements (.shp-step-eyebrow is lime-600 at base.css:91). This is a
   straight revert to the site's own value, not a new colour. */
.shp a.shp-inline-link,
.shp a.shp-scope-link,
.shp-industry-cta,
.shp-step-eyebrow,
.shp-scope-eyebrow {
  color: var(--sh-lime-600) !important;
}

/* =======================================================================
   2026-09-18, second pass.
   ===================================================================== */

/* --- 1. Section spacing on /growth-signal-audit/ (MY REGRESSION, edits13)
   base.css:1000 collapses padding-top between four section types:
     :is(section, build, gs-pricing, faq) + :is(section, build, gs-pricing, faq)
   edits13 restored that padding but dropped .shp-build from the SECOND list,
   so every transition on the page resolves to 2x --shp-section-pad except
   `.shp-section + .shp-build`, which is the single odd 1x gap. On the audit
   page that is the one break between "what you get" and the dark how-we-run-it
   band, which is exactly where the rhythm visibly stutters.

   Making the restore symmetric with the collapse retires the special case, so
   every section boundary on every page is one consistent 2x gap. */
:is(.shp-section, .shp-build, .shp-gs-pricing, .shp-faq)
  + :is(.shp-section, .shp-build, .shp-gs-pricing, .shp-faq) {
  padding-top: var(--shp-section-pad);
}

/* --- 2. Eyebrows carried #7f9834, which reads as the dark green ----------
   The headline accents went back to brand in edits15, but the eyebrow labels
   were left on the site's older #7f9834. On the audit page that is 18 elements
   (6 .shp-eyebrow, 11 .shp-step-eyebrow, 1 .shp-scope-eyebrow), so it is the
   dominant green on the page and duller than the logo.
   Brand #99b640 also matches the lime dot already inside the eyebrow pill. */
.shp-eyebrow,
.shp-step-eyebrow,
.shp-scope-eyebrow,
.shp-section-head .shp-eyebrow,
.shp-industry-cta {
  color: var(--sh-lime-500) !important;
}

/* Inline links inside body copy stay on the darker shade. They are functional
   text rather than a decorative label, they sit at paragraph size, and they
   keep their underline, so colour is not the only affordance. */
.shp p a,
.shp li a,
.shp .shp-faq-answer a,
.shp a.shp-inline-link,
.shp a.shp-scope-link {
  color: var(--sh-lime-600) !important;
}

/* Dark grounds keep the lighter tint. */
.shp-build .shp-eyebrow,
.shp-build .shp-step-eyebrow,
.shp-proof .shp-eyebrow,
.shp-finalcta .shp-eyebrow {
  color: var(--sh-lime-400) !important;
}

/* --- 3. Homepage hero CTA, sized here rather than in Elementor -----------
   Elementor's post CSS is served as /uploads/elementor/css/post-2473.css with
   NO ?ver= query string (this host strips query strings from static assets)
   and cache-control: max-age=2678400. So an Elementor styling change is
   invisible to anyone who loaded the page in the last 31 days: the mobile
   sizing written into the widget settings is live on the server and correctly
   inside @media(max-width:767px), but returning phones keep the month-old
   file. THIS stylesheet is the one that busts reliably, because it ships under
   a new timestamped filename every deploy.

   Same reason the .shp CSS was built this way. Elementor widget styling on
   this host needs to land here too, or it does not reach returning visitors. */
@media (max-width: 767px) {
  .elementor-2473 .elementor-element.elementor-element-1ee89a4 .elementor-button,
  .elementor-2473 .elementor-element.elementor-element-0b90fc9 .elementor-button {
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    padding: 14px 18px !important;
    white-space: nowrap !important;   /* "GET AN ATTRIBUTION AUDIT" fits on one
                                         line at 13px: ~219px inside a 324px
                                         usable width on a 360px phone */
  }
  .elementor-2473 .elementor-element.elementor-element-1ee89a4 .elementor-button svg,
  .elementor-2473 .elementor-element.elementor-element-0b90fc9 .elementor-button svg {
    width: 15px !important;
    height: 15px !important;
  }
}

/* --- Correction to edits16: !important stomped the dark-band pill ---------
   edits16 set `.shp-eyebrow { color: lime-500 !important }` at (0,1,0). An
   !important declaration beats a non-important one at ANY specificity, so it
   also overrode the dark-ground rule that deliberately renders the eyebrow
   pill in grey #cfd3d1 on .shp-build / .shp-proof / .shp-howwe-card--dark.
   That is 1 eyebrow per service page, in the dark band.

   The lesson is the one that keeps recurring here: reach for !important and
   you stop competing on specificity, so every lower-priority rule that was
   correctly winning on context loses at once. Restore the grey explicitly.

   Checked in markup first: .shp-finalcta carries no eyebrow on any page, and
   .shp-proof / .shp-howwe-card--dark carry none on the service pages, so the
   only case that actually renders is .shp-build. The rest are here so the
   next dark band to use one inherits the right value. */
.shp-build .shp-eyebrow,
.shp-proof .shp-eyebrow,
.shp-howwe-card--dark .shp-eyebrow,
.shp-finalcta .shp-eyebrow {
  color: #cfd3d1 !important;
}

/* The numbered step eyebrows inside the dark band keep the lighter lime. They
   had no dark-ground rule before and were rendering at lime-600 (#7f9834),
   which is the dark green on a dark ground. lime-400 is both on brand and the
   more legible of the two here. */
.shp-build .shp-step-eyebrow,
.shp-proof .shp-step-eyebrow {
  color: var(--sh-lime-400) !important;
}

/* ---------------------------------------------------------------------------
   edits18: form field alignment and required-field markers
   --------------------------------------------------------------------------- */

/* .shp-label + .shp-label added 16px of top margin to every adjacent sibling
   label. Inside .shp-field-grid all the labels are siblings, so the second,
   third and fourth field in a grid sat 16px lower than the first. On a two
   column grid that reads as "Name is higher than Business". The stacking
   margin is only wanted between labels that follow each other vertically
   outside a grid, so neutralise it for grid children. */
.shp-field-grid > .shp-label + .shp-label { margin-top: 0; }

/* Required fields were not marked at all. The label text sits in a span that
   precedes the control, so a sibling selector cannot reach backwards and this
   needs :has(). Browsers without :has() simply show no marker, which is the
   behaviour we already had. Colour is the site's own --sh-lime-600, the value
   base.css already uses for small accents, not a new one. */
.shp-label:has(> input:required) > span::after,
.shp-label:has(> select:required) > span::after,
.shp-label:has(> textarea:required) > span::after {
  content: "*";
  color: var(--sh-lime-600);
  margin-left: 3px;
  font-weight: 700;
}

/* A required marker is meaningless without a key, so name it once per form. */
.shp-form-card .shp-required-note {
  font-size: 12.5px;
  color: var(--sh-slate-400);
  margin: 14px 0 0;
}
.shp-form-card .shp-required-note b { color: var(--sh-lime-600); font-weight: 700; }