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