/* ====================================================================
   Service pages — /service/<slug>
   Layered on new-landing.css: tokens, header, footer, .faq and .cta all
   come from there. This file only adds the section types the homepage
   has no equivalent for. Everything below is built from the existing
   tokens (--orange / --ink / --cream / --panel / --navy / --slate / --sky)
   so a service page and the homepage read as one site.
   ==================================================================== */

.page-service {
  background: var(--cream);
  padding-top: var(--header-h);
}

/* shared shell — every service section aligns to the same gutter */
.svc {
  padding: clamp(46px, 6vw, 104px) var(--gut);
}
.svc__inner {
  max-width: 1180px;
  margin: 0 auto;
}
.svc--panel { background: var(--panel); }
.svc--ink   { background: var(--ink); color: var(--cream); }
.svc--sky   { background: var(--sky); }

.svc__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vw, 13px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 14px;
}
.svc__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 50px);
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 18px;
  text-wrap: balance;
}
.svc--ink .svc__eyebrow { color: var(--orange); }
.svc__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.66;
  max-width: 68ch;
  margin: 0 0 14px;
}
.svc__lead strong { font-weight: 600; }
.svc__note {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 1.05vw, 14px);
  color: var(--muted);
  margin: 18px 0 0;
}

/* ---------- hero ---------- */
.svc-hero {
  padding: clamp(30px, 4.4vw, 72px) var(--gut) clamp(40px, 5vw, 84px);
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.svc-hero__inner { max-width: 1180px; margin: 0 auto; }
.svc-hero__crumb {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 22px;
}
.svc-hero__crumb a { color: var(--muted); text-decoration: none; }
.svc-hero__crumb a:hover { color: var(--ink); text-decoration: underline; }
.svc-hero__h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.6vw, 78px);
  line-height: .98;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0 0 20px;
  max-width: 20ch;
  text-wrap: balance;
}
.svc-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 30px;
}
.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.svc-btn,
.svc-btn--ghost {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.svc-btn { background: var(--orange); color: #fff; }
.svc-btn:hover { transform: translateY(-2px); background: #d9531f; }
.svc-btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(26,26,26,.22); }
.svc-btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.svc-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 42px;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.svc-hero__facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  color: var(--ink);
}
.svc-hero__facts span {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- pain cards ---------- */
.svc-pains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin: 30px 0 0;
  list-style: none;
  padding: 0;
}
.svc-pain {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 22px 24px;
}
.svc--ink .svc-pain { background: rgba(242,239,233,.06); border-color: rgba(242,239,233,.14); }
.svc-pain h3 {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  margin: 0 0 9px;
  line-height: 1.35;
}
.svc-pain p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.62;
  margin: 0;
  color: rgba(26,26,26,.74);
}
.svc--ink .svc-pain p { color: rgba(242,239,233,.76); }

/* ---------- deliverables ---------- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 32px 0 0;
  list-style: none;
  padding: 0;
}
.svc-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 26px 26px 28px;
}
.svc--panel .svc-card { background: var(--panel); }
.svc-card__n {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--orange);
  display: block;
  margin-bottom: 12px;
}
.svc-card h3 {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
  line-height: 1.32;
  margin: 0 0 10px;
}
.svc-card p {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.64;
  margin: 0;
  color: rgba(26,26,26,.74);
}
.svc-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(26,26,26,.74);
}

/* ---------- process (a real sequence, hence the numbering) ---------- */
.svc-steps {
  counter-reset: svcstep;
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}
.svc-step {
  counter-increment: svcstep;
  background: var(--panel);
  padding: 26px clamp(20px, 3vw, 38px);
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 30px);
  align-items: start;
}
.svc-step::before {
  content: counter(svcstep, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1;
  color: var(--orange);
}
.svc-step h3 {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 600;
  margin: 0 0 8px;
  line-height: 1.3;
}
.svc-step p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.66;
  margin: 0;
  color: rgba(26,26,26,.76);
  max-width: 72ch;
}
.svc-step__when {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
  display: block;
}
@media (max-width: 620px) {
  .svc-step { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- fit / not fit ---------- */
.svc-fit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  margin: 30px 0 0;
}
.svc-fit__col {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 26px 28px 30px;
}
.svc-fit__col--no { background: transparent; }
.svc-fit__col h3 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.svc-fit__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.svc-fit__col li {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  padding-left: 26px;
  position: relative;
  color: rgba(26,26,26,.8);
}
.svc-fit__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--orange);
}
.svc-fit__col--no li::before { border-color: var(--muted); }

/* ---------- proof ---------- */
.svc-proof__quote {
  margin: 30px 0 0;
  padding: 0 0 0 clamp(18px, 2.4vw, 32px);
  border-left: 3px solid var(--orange);
}
.svc-proof__quote p {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.5;
  font-weight: 300;
  margin: 0 0 12px;
  max-width: 58ch;
}
.svc-proof__quote cite {
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- related links ---------- */
.svc-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  list-style: none;
  padding: 0;
}
.svc-links a {
  display: block;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 18px 20px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .18s ease, border-color .18s ease;
}
.svc-links a:hover { transform: translateY(-2px); border-color: rgba(26,26,26,.28); }
.svc-links strong {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.svc-links span {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(26,26,26,.66);
}
.svc-links__sub {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 34px 0 0;
}



/* ====================================================================
   Answer blocks — a 40–60 word direct answer at the top of every major
   section. These exist to be lifted verbatim by an answer engine, so
   they are visually distinct from the body copy that follows and never
   depend on surrounding context to make sense.
   ==================================================================== */
.svc-answer {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: 4px;
  padding: 20px clamp(18px, 2.2vw, 30px);
  margin: 0 0 26px;
  max-width: 74ch;
}
.svc--panel .svc-answer { background: var(--cream); }
.svc--ink .svc-answer {
  background: rgba(242,239,233,.06);
  border-color: rgba(242,239,233,.16);
  border-left-color: var(--orange);
}
.svc-answer__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.svc-answer p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
  color: var(--ink);
}
.svc--ink .svc-answer p { color: var(--cream); }
.svc-answer p strong { font-weight: 600; }

/* the hero's answer block sits under the lead, tighter and wider */
.svc-hero .svc-answer { margin: 0 0 28px; max-width: 70ch; }

/* an entity strip — the named tools, platforms, and buyer types a page
   legitimately covers. Text, not logos: nothing here is a client claim. */
.svc-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.svc-entities li {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(26,26,26,.72);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 14px;
}
.svc--ink .svc-entities li {
  color: rgba(242,239,233,.78);
  background: rgba(242,239,233,.06);
  border-color: rgba(242,239,233,.14);
}

/* ====================================================================
   Full-bleed editorial layout (chosen 2026-08-26)
   The hero is a photograph, not a text block. The header floats over it
   untouched — new-landing.css only paints the header plate once the page
   has scrolled, so no override is needed here.
   ==================================================================== */
.page-service--bleed { padding-top: 0; }

.svc-bleed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #14140F;           /* ground behind the photo, both themes */
  color: #F2EFE9;
}
.svc-bleed__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: -2;
}
.svc-bleed__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(14,14,11,.90) 0%, rgba(14,14,11,.74) 44%, rgba(14,14,11,.34) 78%, rgba(14,14,11,.22) 100%),
    linear-gradient(0deg, rgba(14,14,11,.55) 0%, rgba(14,14,11,0) 46%);
}
.svc-bleed__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 60px) var(--gut);
}

/* --- the hero --- */
.svc-bleed--hero {
  min-height: clamp(560px, 86vh, 860px);
  display: flex;
  align-items: flex-end;
}
.svc-bleed--hero .svc-bleed__inner {
  padding-top: calc(var(--header-h) + clamp(30px, 6vw, 90px));
  padding-bottom: clamp(34px, 5vw, 74px);
}
.svc-bleed .svc-hero__crumb,
.svc-bleed .svc-hero__crumb a { color: rgba(242,239,233,.66); }
.svc-bleed .svc-hero__crumb a:hover { color: #fff; }
.svc-bleed .svc-hero__h1 {
  color: #F7F5F1;
  max-width: 24ch;
  text-shadow: 0 1px 28px rgba(10,10,8,.5);
}
.svc-bleed .svc-hero__lead {
  color: rgba(242,239,233,.9);
  max-width: 54ch;
  text-shadow: 0 1px 18px rgba(10,10,8,.55);
}
.svc-bleed .svc-btn--ghost {
  color: #F2EFE9;
  border-color: rgba(242,239,233,.42);
  backdrop-filter: blur(2px);
}
.svc-bleed .svc-btn--ghost:hover { border-color: #F2EFE9; }
.svc-bleed .svc-hero__facts {
  border-top-color: rgba(242,239,233,.24);
  margin-top: clamp(24px, 3vw, 38px);
}
.svc-bleed .svc-hero__facts b { color: #F7F5F1; }
.svc-bleed .svc-hero__facts span { color: rgba(242,239,233,.6); }

/* --- the answer strip: the hero's answer, given its own full-width band --- */
.svc-strip {
  background: var(--panel);
  border-top: 2px solid var(--orange);
  border-bottom: 1px solid var(--rule);
  padding: clamp(24px, 3.4vw, 46px) var(--gut);
  text-align: center;
}
.svc-strip__inner { max-width: 82ch; margin: 0 auto; }
.svc-strip .svc-answer__label { margin-bottom: 10px; }
.svc-strip p:not(.svc-answer__label) {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.58;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}

/* --- mid-page photographic cut --- */
.svc-cut {
  position: relative;
  min-height: clamp(190px, 26vw, 330px);
  display: flex;
  align-items: center;
}
.svc-cut .svc-bleed__scrim {
  background: linear-gradient(92deg, rgba(14,14,11,.78) 0%, rgba(14,14,11,.44) 52%, rgba(14,14,11,.12) 100%);
}
.svc-cut__quote {
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: clamp(17px, 2vw, 27px);
  font-weight: 300;
  line-height: 1.38;
  margin: 0;
  color: #F7F5F1;
  text-shadow: 0 1px 20px rgba(10,10,8,.5);
}
.svc-cut__attrib {
  display: block;
  margin-top: 14px;
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(242,239,233,.62);
}

/* --- proof band with an inset portrait --- */
.svc-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, .65fr);
  gap: clamp(22px, 3.4vw, 54px);
  align-items: start;
}
.svc-proof__portrait { margin: 0; }
.svc-proof__portrait img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  filter: saturate(.96);
}
.svc-proof__portrait figcaption {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 10px;
}
@media (max-width: 800px) {
  .svc-proof { grid-template-columns: 1fr; }
  .svc-proof__portrait { max-width: 320px; }
}

/* --- closing CTA as the last photograph --- */
.svc-bleed--cta {
  min-height: clamp(340px, 42vw, 480px);
  display: flex;
  align-items: center;
  text-align: center;
}
.svc-bleed--cta .svc-bleed__scrim {
  background: linear-gradient(0deg, rgba(14,14,11,.82) 0%, rgba(14,14,11,.6) 60%, rgba(14,14,11,.5) 100%);
}
.svc-bleed--cta .svc-bleed__inner { width: 100%; }
.svc-cta__eyebrow {
  font-family: var(--font-body);
  font-size: clamp(12.5px, 1.1vw, 15px);
  color: rgba(242,239,233,.82);
  margin: 0 0 14px;
}
.svc-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1;
  text-transform: uppercase;
  color: #F7F5F1;
  margin: 0 0 26px;
  text-wrap: balance;
}
.svc-bleed--cta .svc-hero__actions { justify-content: center; }

/* The hero photograph is a 3:2 frame with Mark right of centre; the copy runs
   down the left. Hold that framing as the band gets wider or shorter. */
.svc-bleed--hero .svc-bleed__img { object-position: 50% 16%; }
@media (max-width: 900px) {
  /* portrait viewports crop hard: keep his head, let the house go */
  .svc-bleed--hero .svc-bleed__img { object-position: 50% 12%; }
  .svc-bleed--hero { min-height: clamp(460px, 82vh, 640px); }
  .svc-bleed__scrim {
    background:
      linear-gradient(178deg, rgba(14,14,11,.62) 0%, rgba(14,14,11,.72) 40%, rgba(14,14,11,.88) 100%);
  }
}

/* The hero type sits in the lower half so the photograph keeps its subject.
   Tighter measures than the flat-hero pages, which have the whole band. */
.svc-bleed--hero .svc-hero__h1 { font-size: clamp(32px, 4.3vw, 62px); max-width: 21ch; }
.svc-bleed--hero .svc-hero__lead { max-width: 40ch; font-size: clamp(15px, 1.32vw, 18.5px); margin-bottom: 26px; }

/* Left-anchor the hero copy to the page gutter instead of the centred
   1180 container: it clears the middle of the frame, which is where the
   subject of the photograph stands. */
.svc-bleed--hero .svc-bleed__inner {
  max-width: none;
  width: 100%;
  padding-left: var(--gut);
  padding-right: var(--gut);
}
.svc-bleed--hero .svc-bleed__inner > * { max-width: 620px; }
.svc-bleed--hero .svc-hero__facts { max-width: 620px; }
/* and lighten the scrim past the copy column so he is not veiled */
.svc-bleed--hero .svc-bleed__scrim {
  background:
    linear-gradient(94deg, rgba(14,14,11,.93) 0%, rgba(14,14,11,.86) 24%, rgba(14,14,11,.52) 46%, rgba(14,14,11,.16) 66%, rgba(14,14,11,.10) 100%),
    linear-gradient(0deg, rgba(14,14,11,.42) 0%, rgba(14,14,11,0) 38%);
}
@media (max-width: 900px) {
  .svc-bleed--hero .svc-bleed__inner > *,
  .svc-bleed--hero .svc-hero__facts { max-width: none; }
  .svc-bleed--hero .svc-bleed__scrim {
    background: linear-gradient(178deg, rgba(14,14,11,.58) 0%, rgba(14,14,11,.7) 38%, rgba(14,14,11,.9) 100%);
  }
}

/* ====================================================================
   SECTION SYSTEM  (sv-*)  — 2026-08-26
   Every band on a service page is the same object: a numbered eyebrow, a
   question-shaped title, one answer block, then exactly one body pattern.
   Same padding, same measures, same card geometry, strict ground rhythm.
   The svc-* rules above are legacy, still used by /service and
   /service/growth-advisor until those are regenerated on this system.
   ==================================================================== */

/* ---------- hero: solid ink panel, hard edge, subject in the right third ---- */
.sv-hero {
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: clamp(720px, 96vh, 1060px);
  background: var(--cream);
  color: var(--ink);
}
.sv-hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: calc(var(--header-h) + clamp(24px, 3vw, 46px)) clamp(26px, 3.4vw, 60px)
           clamp(34px, 4vw, 60px) var(--gut);
}
.sv-hero__figure { position: relative; margin: 0; overflow: hidden; }
.sv-hero__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 14%;
}
.sv-hero__crumb {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
}
.sv-hero__crumb a { color: inherit; text-decoration: none; }
.sv-hero__crumb a:hover { color: var(--ink); text-decoration: underline; }
.sv-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(29px, 3.5vw, 52px);
  line-height: 1.02;
  letter-spacing: .008em;
  text-transform: uppercase;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.sv-hero__lead {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.2vw, 17px);
  line-height: 1.62;
  color: var(--ink-soft, rgba(26,26,26,.78));
  margin: 0;
  max-width: 44ch;
}
.sv-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sv-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  list-style: none;
  margin: 10px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule);
}
.sv-hero__facts b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1;
}
.sv-hero__facts span {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 900px) {
  /* stack rather than shrink: the copy never sits on the photograph */
  .sv-hero { grid-template-columns: 1fr; min-height: 0; }
  .sv-hero__figure { order: -1; position: relative; aspect-ratio: 5 / 4; }
  .sv-hero__figure img { position: absolute; }
  .sv-hero__panel { padding: clamp(28px, 7vw, 44px) var(--gut) clamp(34px, 8vw, 48px); }
  .sv-hero { padding-top: 0; }
  .page-service--bleed .sv-hero__figure { padding-top: var(--header-h); }
}

/* ---------- the band: one object, repeated ---------- */
.sv {
  padding: clamp(52px, 6.4vw, 104px) var(--gut);
  background: var(--cream);
  color: var(--ink);
}
.sv[data-ground="panel"] { background: var(--panel); }
.sv[data-ground="ink"] { background: var(--ink); color: var(--cream); }
.sv__in { max-width: 1180px; margin: 0 auto; }
.sv__head { max-width: 64ch; margin: 0 0 clamp(26px, 3vw, 44px); }
.sv__num {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 12px;
}
.sv__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(23px, 2.9vw, 40px);
  line-height: 1.04;
  letter-spacing: .008em;
  text-transform: uppercase;
  margin: 0 0 18px;
  text-wrap: balance;
}
.sv__answer {
  border-left: 2px solid var(--orange);
  padding: 2px 0 2px 18px;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
}
.sv[data-ground="ink"] .sv__answer { border-left-color: var(--orange); }
.sv__note {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  max-width: 72ch;
}

/* ---------- body patterns: even grids only, no orphan rows ---------- */
.sv-grid { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.sv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .sv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-grid--2, .sv-grid--3 { grid-template-columns: 1fr; } }

.sv-card {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--orange);
  border-radius: 3px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sv[data-ground="panel"] .sv-card { background: var(--cream); }
.sv[data-ground="ink"] .sv-card {
  background: rgba(242,239,233,.06);
  border-color: rgba(242,239,233,.16);
}
.sv-card h3 {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.34;
  margin: 0;
}
.sv-card p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.62;
  margin: 0;
  color: color-mix(in srgb, currentColor 74%, transparent);
}

.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.sv-step { background: var(--cream); display: grid; grid-template-columns: 54px minmax(0, 1fr) 108px; gap: clamp(12px, 1.8vw, 26px); align-items: baseline; padding: 20px clamp(18px, 2.2vw, 28px); }
.sv[data-ground="panel"] .sv-step { background: var(--cream); }
.sv-step em { font-family: var(--font-display); font-style: normal; font-size: clamp(19px, 2vw, 26px); color: var(--orange); line-height: 1; }
.sv-step h3 { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; margin: 0 0 6px; }
.sv-step p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin: 0; color: rgba(26,26,26,.74); }
.sv-step span { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); text-align: right; }
@media (max-width: 760px) {
  .sv-step { grid-template-columns: 40px minmax(0, 1fr); }
  .sv-step span { grid-column: 2; text-align: left; margin-top: 8px; }
}

.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.sv-list li { font-family: var(--font-body); font-size: 14.5px; line-height: 1.58; padding-left: 26px; position: relative; }
.sv-list li::before { content: ""; position: absolute; left: 0; top: .46em; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--orange); }
.sv-list--no li::before { border-color: var(--muted); }
.sv-col { background: var(--cream); border: 1px solid var(--rule); border-radius: 3px; padding: 24px 24px 26px; }
.sv-col h3 { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }

.sv-quote { margin: clamp(24px, 3vw, 40px) 0 0; padding-left: 18px; border-left: 2px solid var(--orange); }
.sv-quote p { font-family: var(--font-body); font-size: clamp(16px, 1.7vw, 23px); font-weight: 300; line-height: 1.46; margin: 0 0 10px; max-width: 52ch; }
.sv-quote cite { font-family: var(--font-body); font-style: normal; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }

.sv-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, .6fr); gap: clamp(22px, 3.4vw, 52px); align-items: start; }
.sv-split figure { margin: 0; }
.sv-split img { width: 100%; height: auto; display: block; border-radius: 3px; }
.sv-split figcaption { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
@media (max-width: 820px) { .sv-split { grid-template-columns: 1fr; } .sv-split figure { max-width: 300px; } }

.sv-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .sv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sv-links { grid-template-columns: 1fr; } }
.sv-links a { display: block; height: 100%; background: var(--cream); border: 1px solid var(--rule); border-radius: 3px; padding: 16px 18px; text-decoration: none; color: var(--ink); transition: border-color .18s ease, transform .18s ease; }
.sv-links a:hover { border-color: rgba(26,26,26,.3); transform: translateY(-2px); }
.sv-links strong { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; display: block; margin-bottom: 5px; }
.sv-links span { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(26,26,26,.64); }
.sv__subhead { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: clamp(26px, 3vw, 38px) 0 14px; }

.sv-faq { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.sv-faq details { background: var(--cream); }
.sv-faq summary { font-family: var(--font-body); font-size: 15.5px; font-weight: 600; line-height: 1.4; padding: 19px clamp(18px, 2.2vw, 28px); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; font-family: var(--font-display); color: var(--orange); font-size: 20px; line-height: 1; }
.sv-faq details[open] summary::after { content: "\2013"; }
.sv-faq p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; margin: 0; padding: 0 clamp(18px, 2.2vw, 28px) 22px; max-width: 80ch; color: rgba(26,26,26,.78); }

/* ====================================================================
   Per-section patterns. Each band gets its own object, built from the
   same tokens: no two sections repeat a layout.
   ==================================================================== */

/* ---- DIAGNOSTIC ROWS — the problem ------------------------------- */
.dx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.dx__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 26px);
  align-items: center;
  padding: clamp(20px, 2.3vw, 30px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .2s ease;
}
.dx__row:hover { padding-left: 10px; }
.dx__symptom {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.005em;
}
.dx__arrow { color: var(--orange); font-size: 20px; line-height: 1; text-align: center; }
.dx__cost {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.58;
  color: rgba(26,26,26,.66);
}
.dx__legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: clamp(10px, 1.6vw, 26px);
  padding-bottom: 12px;
}
.dx__legend span {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.dx__legend span:nth-child(2) { text-align: center; }
@media (max-width: 700px) {
  .dx__row, .dx__legend { grid-template-columns: 1fr; gap: 8px; }
  .dx__arrow { display: none; }
  .dx__legend span:nth-child(2), .dx__legend span:nth-child(3) { display: none; }
  .dx__cost { padding-left: 16px; border-left: 2px solid var(--orange); }
}

/* ---- SPEC SHEET — the deliverables ------------------------------- */
.spec { margin: 0; border-top: 2px solid var(--ink); }
.spec__row {
  display: grid;
  grid-template-columns: 30px minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 30px);
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.spec__mark {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--orange);
}
.spec dt {
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.25vw, 17px);
  font-weight: 600;
  line-height: 1.34;
  margin: 0;
}
.spec dd {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.62;
  margin: 0;
  color: rgba(26,26,26,.7);
}
@media (max-width: 720px) {
  .spec__row { grid-template-columns: 22px minmax(0, 1fr); }
  .spec dd { grid-column: 2; margin-top: 7px; }
}

/* ---- THE WHEEL — the engagement, as a circle --------------------- */
.wheel { display: grid; grid-template-columns: minmax(300px, 470px) minmax(0, 1fr); gap: clamp(26px, 4vw, 64px); align-items: center; }
.wheel__fig { position: relative; margin: 0; aspect-ratio: 1; }
.wheel__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wheel__ring { fill: none; stroke: var(--rule); stroke-width: 1.5; }
.wheel__arc { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; }
.wheel__node circle { fill: var(--panel); stroke: var(--rule); stroke-width: 1.5; transition: fill .2s ease, stroke .2s ease; }
.wheel__node text { font-family: var(--font-display); font-size: 19px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.wheel__node.is-on circle { fill: var(--orange); stroke: var(--orange); }
.wheel__node.is-on text { fill: #fff; }
.wheel__hub-a { font-family: var(--font-display); font-size: 21px; fill: var(--ink); text-anchor: middle; }
.wheel__hub-b { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; fill: var(--muted); text-anchor: middle; text-transform: uppercase; }
.wheel__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.wheel__item { background: var(--cream); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 15px 4px; cursor: default; }
.sv[data-ground="panel"] .wheel__item { background: var(--panel); }
.wheel__item:hover { background: color-mix(in srgb, var(--orange) 7%, var(--cream)); }
.wheel__letter { font-family: var(--font-display); font-size: 19px; color: var(--orange); line-height: 1; }
.wheel__item h3 { font-family: var(--font-body); font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.wheel__item p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; margin: 0; color: rgba(26,26,26,.68); }
.wheel__when { font-family: var(--font-body); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
  .wheel { grid-template-columns: 1fr; }
  .wheel__fig { max-width: 340px; margin: 0 auto; }
  .wheel__when { display: none; }
}

/* ---- ROLES + PORTRAIT — the fractional option -------------------- */
.roles { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.6vw, 56px); align-items: start; }
.roles figure { margin: 0; position: relative; }
.roles img { width: 100%; height: auto; display: block; border-radius: 3px; }
.roles figcaption { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.roles__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.roles__item { padding: clamp(15px, 1.8vw, 22px) 0; border-bottom: 1px solid var(--rule); }
.roles__item:first-child { border-top: 1px solid var(--rule); }
.roles__item h3 { font-family: var(--font-body); font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; }
.roles__item h3::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
.roles__item p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin: 0 0 0 19px; color: rgba(26,26,26,.7); }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } .roles figure { max-width: 260px; } }

/* ---- THE GATE — who it is built for ------------------------------ */
.gate { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .95fr); gap: clamp(20px, 2.8vw, 44px); align-items: start; }
.gate__yes { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.gate__yes li {
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
  border-radius: 3px;
  padding: 17px 20px;
  font-family: var(--font-body);
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  font-weight: 500;
  line-height: 1.45;
}
.sv[data-ground="panel"] .gate__yes li { background: var(--panel); }
.gate__no {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 22px 22px 24px;
  background: transparent;
}
.gate__no h3 { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.gate__no ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.gate__no li { font-family: var(--font-body); font-size: 13.5px; line-height: 1.55; color: rgba(26,26,26,.62); padding-left: 16px; position: relative; }
.gate__no li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1.5px; background: var(--muted); }
@media (max-width: 760px) { .gate { grid-template-columns: 1fr; } }

/* ---- THE ROUTER — which engagement ------------------------------- */
.router { border-top: 1px solid var(--rule); }
.router__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(12px, 2vw, 32px);
  align-items: center;
  padding: clamp(15px, 1.8vw, 22px) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left .2s ease, background .2s ease;
}
.router__row:hover { padding-left: 10px; background: color-mix(in srgb, var(--orange) 6%, transparent); }
.router__if { font-family: var(--font-body); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.45; color: rgba(26,26,26,.72); }
.router__if b { font-weight: 600; color: var(--ink); }
.router__to { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-body); font-size: clamp(14.5px, 1.3vw, 17px); font-weight: 600; }
.router__to::before { content: "\2192"; color: var(--orange); font-weight: 400; }
.router__posts { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.router__posts a {
  font-family: var(--font-body); font-size: 13px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 99px; padding: 7px 15px; transition: border-color .18s ease;
}
.router__posts a:hover { border-color: var(--orange); }
@media (max-width: 700px) { .router__row { grid-template-columns: 1fr; gap: 7px; } }

/* the FAQ is the homepage component, untouched: .faq brings its own white
   ground and padding from new-landing.css, so nothing is overridden here. */

/* ---- THE CLOSE — the band the footer's summit rises into -----------
   new-landing.css hangs .footer__summit above the footer's top edge and
   expects to land in the preceding band's bottom padding. That band has to
   stay light or the mountain silhouette disappears into it, which is why
   this is warm white rather than ink. */
.sv-cta {
  background: var(--panel);
  padding: clamp(56px, 6.4vw, 104px) var(--gut) clamp(56px, 8vw, 140px);
}
.sv-cta__card {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  background: var(--sky-card);
  border: 1px solid rgba(22, 41, 74, .1);
  border-radius: 5px;
  overflow: hidden;
}
.sv-cta__figure { margin: 0; position: relative; min-height: 280px; }
.sv-cta__figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 54% 32%; }
.sv-cta__body {
  padding: clamp(28px, 3.4vw, 56px) clamp(26px, 3.4vw, 58px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  border-left: 3px solid var(--orange);
}
.sv-cta__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0;
}
.sv-cta__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(25px, 3.3vw, 46px);
  line-height: 1.02;
  letter-spacing: .008em;
  text-transform: uppercase;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.sv-cta__note {
  font-family: var(--font-body);
  font-size: clamp(13.5px, 1.15vw, 15.5px);
  line-height: 1.6;
  color: rgba(22, 41, 74, .78);
  margin: 0;
  max-width: 46ch;
}
.sv-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (max-width: 820px) {
  .sv-cta__card { grid-template-columns: 1fr; }
  .sv-cta__figure { aspect-ratio: 16 / 10; min-height: 0; }
  .sv-cta__body { border-left: 0; border-top: 3px solid var(--orange); }
}

/* a router row whose page is not built yet: same row, no link, labelled */
.router__row--soon { cursor: default; }
.router__row--soon:hover { padding-left: 0; background: transparent; }
.router__row--soon .router__to { color: var(--muted); }
.router__row--soon .router__to::before { color: var(--muted); }
.router__soon {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 99px;
  padding: 3px 9px;
  white-space: nowrap;
  justify-self: end;
}
.router__row--soon { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) auto; }
@media (max-width: 700px) { .router__row--soon { grid-template-columns: 1fr; } .router__soon { justify-self: start; } }

/* ---- mobile legibility -------------------------------------------
   The homepage FAQ sizes its type in container-query units, which lands
   at 10px on a phone. The component is otherwise identical, so rather
   than restyle it, this only holds a readable floor below the tablet
   breakpoint, and only on service pages. */
@media (max-width: 900px) {
  .page-service .faq__q { font-size: 15.5px; line-height: 1.4; }
  .page-service .faq__a { font-size: 14.5px; line-height: 1.62; }
  .page-service .faq__eyebrow { font-size: 11px; letter-spacing: .16em; }
  .page-service .faq__title { font-size: clamp(23px, 7.4vw, 34px); }
  /* breadcrumb links need a real tap target, not a 17px line */
  .sv-hero__crumb { line-height: 2.1; }
  .sv-hero__crumb a { display: inline-block; padding: 4px 2px; }
}

/* ====================================================================
   Patterns for /service/growth-advisor. Same system, different objects:
   an answer page argues by comparison and by stage, not by deliverable.
   ==================================================================== */

/* ---- THE JOBS — four duties with line glyphs ---------------------- */
.jobs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.jobs__item { background: var(--cream); padding: clamp(20px, 2.2vw, 30px) clamp(16px, 1.8vw, 24px) clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 12px; }
.sv[data-ground="panel"] .jobs__item { background: var(--panel); }
.jobs__glyph { width: 30px; height: 30px; color: var(--orange); }
.jobs__glyph svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jobs__item h3 { font-family: var(--font-body); font-size: clamp(14.5px, 1.25vw, 16.5px); font-weight: 600; line-height: 1.32; margin: 0; }
.jobs__item p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; margin: 0; color: rgba(26,26,26,.7); }
@media (max-width: 900px) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jobs { grid-template-columns: 1fr; } }

/* ---- THE COMPARISON — four roles, four questions ------------------ */
.cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-family: var(--font-body); }
.cmp caption { text-align: left; font-size: 12px; color: var(--muted); padding-bottom: 12px; letter-spacing: .02em; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 15px 16px; border-bottom: 1px solid var(--rule); }
.cmp thead th { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.cmp thead th:last-child { color: var(--orange); }
.cmp tbody th { font-size: 13px; font-weight: 600; width: 148px; color: var(--ink); }
.cmp td { font-size: 13.5px; line-height: 1.55; color: rgba(26,26,26,.72); }
.cmp td:last-child { color: var(--ink); background: color-mix(in srgb, var(--orange) 7%, transparent); font-weight: 500; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp__hint { font-family: var(--font-body); font-size: 11.5px; color: var(--muted); margin: 10px 0 0; }
@media (min-width: 861px) { .cmp__hint { display: none; } }

/* ---- THE TRACK — where the advisor fits in a company's life ------- */
.track { list-style: none; margin: 0; padding: 0; position: relative; }
.track::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: var(--rule); }
.track__stage { position: relative; padding: 0 0 clamp(22px, 2.6vw, 34px) 40px; }
.track__stage:last-child { padding-bottom: 0; }
.track__stage::before { content: ""; position: absolute; left: 0; top: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--muted); }
.sv[data-ground="panel"] .track__stage::before { background: var(--panel); }
.track__stage--now::before { border-color: var(--orange); background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 20%, transparent); }
.track__when { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px; }
.track__stage--now .track__when { color: var(--orange); }
.track__stage h3 { font-family: var(--font-body); font-size: clamp(15px, 1.35vw, 18px); font-weight: 600; margin: 0 0 6px; }
.track__stage p { font-family: var(--font-body); font-size: 14px; line-height: 1.62; margin: 0; color: rgba(26,26,26,.7); max-width: 68ch; }

/* ---- THE RAIL — UNLOCK as six moves in a row ---------------------- */
.rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); position: relative; }
.rail::before { content: ""; position: absolute; left: 4%; right: 4%; top: 19px; height: 2px; background: var(--rule); z-index: 0; }
.rail__move { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; }
.rail__letter { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 17px; background: var(--orange); color: #fff; }
.sv[data-ground="ink"] .rail::before { background: rgba(242,239,233,.2); }
.rail__move h3 { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; line-height: 1.3; margin: 0; }
.rail__move p { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; margin: 0; color: rgba(26,26,26,.66); }
.sv[data-ground="ink"] .rail__move p { color: rgba(242,239,233,.7); }
@media (max-width: 900px) { .rail { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; } .rail::before { display: none; } }
@media (max-width: 520px) { .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- START HERE — two doors instead of a link grid ---------------- */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.doors__door { background: var(--cream); border: 1px solid var(--rule); border-top: 3px solid var(--orange); border-radius: 3px; padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); transition: transform .18s ease, border-color .18s ease; }
.sv[data-ground="panel"] .doors__door { background: var(--panel); }
.doors__door:hover { transform: translateY(-2px); border-color: rgba(26,26,26,.28); border-top-color: var(--orange); }
.doors__door--quiet { border-top-color: var(--slate); }
.doors__kicker { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); margin: 0; }
.doors__door h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2vw, 27px); line-height: 1.05; text-transform: uppercase; margin: 0; }
.doors__door p { font-family: var(--font-body); font-size: 14px; line-height: 1.6; margin: 0; color: rgba(26,26,26,.72); }
.doors__go { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--orange); margin-top: auto; }
.doors__go::after { content: " \2192"; }
@media (max-width: 620px) { .doors { grid-template-columns: 1fr; } }

/* The header is ink type on both halves of the hero, which is fine over the
   bone panel and fine over a bright photograph, but fails over a dark one.
   A short bone wash across the top of the figure keeps the nav readable
   whatever the photo does, without touching the header itself. */
.sv-hero__figure::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--header-h) + 26px);
  background: linear-gradient(180deg, rgba(242,239,233,.94) 0%, rgba(242,239,233,.72) 46%, rgba(242,239,233,0) 100%);
  pointer-events: none;
}
@media (max-width: 900px) {
  /* stacked layout: the figure already starts below the header */
  .sv-hero__figure::after { height: calc(var(--header-h) + 10px); }
}

/* ---- the track, with a portrait that follows it ------------------- */
.track-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(210px, .6fr); gap: clamp(24px, 3.6vw, 60px); align-items: start; }
.track-wrap figure { margin: 0; position: sticky; top: calc(var(--header-h) + 20px); }
.track-wrap img { width: 100%; height: auto; display: block; border-radius: 3px; }
.track-wrap figcaption { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
@media (max-width: 860px) {
  .track-wrap { grid-template-columns: 1fr; }
  .track-wrap figure { position: static; max-width: 280px; order: -1; }
}

/* a third ground, so two ink bands never sit next to each other */
.sv[data-ground="navy"] { background: var(--navy); color: var(--sky); }
.sv[data-ground="navy"] .sv__num { color: var(--orange); }
.sv[data-ground="navy"] .sv__answer { border-left-color: var(--orange); }

/* ---- THE RECORD — proof, argued in numerals ---------------------- */
.record { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(26px, 3.6vw, 58px); align-items: start; }
.record__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(207,227,251,.22); border: 1px solid rgba(207,227,251,.22); border-radius: 3px; overflow: hidden; margin: 0; }
.record__stat { background: var(--navy); padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 6px; }
.record__stat b { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.6vw, 50px); line-height: .96; color: #fff; letter-spacing: .01em; }
.record__stat span { font-family: var(--font-body); font-size: 12.5px; line-height: 1.45; color: rgba(207,227,251,.82); }
.record__list { list-style: none; margin: 0; padding: 0; }
/* not grid: a bolded lead-in plus following text would become two grid items
   and the copy would wrap one word per line */
.record__list li { position: relative; padding: clamp(13px, 1.5vw, 18px) 0 clamp(13px, 1.5vw, 18px) 28px; border-bottom: 1px solid rgba(207,227,251,.2); font-family: var(--font-body); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.58; color: rgba(207,227,251,.92); }
.record__list li:first-child { border-top: 1px solid rgba(207,227,251,.2); }
.record__list li::before { content: ""; position: absolute; left: 0; top: calc(clamp(13px, 1.5vw, 18px) + .42em); width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.record__list b { color: #fff; font-weight: 600; }
.record__note { font-family: var(--font-body); font-size: 12.5px; color: rgba(207,227,251,.6); margin: 16px 0 0; }
@media (max-width: 820px) { .record { grid-template-columns: 1fr; } }

/* ---- THE EQUATION — how a scope is set, without a price ---------- */
.eq { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; gap: clamp(8px, 1.4vw, 18px); align-items: stretch; }
/* Anton SC has no multiplication sign, so the operator takes the body face */
.eq__op { display: grid; place-items: center; font-family: var(--font-body); font-weight: 400; font-size: clamp(16px, 1.8vw, 22px); color: var(--orange); }
.eq__factor { background: var(--panel); border: 1px solid var(--rule); border-bottom: 3px solid var(--orange); border-radius: 3px; padding: clamp(18px, 2.2vw, 28px); display: flex; flex-direction: column; gap: 10px; }
.sv[data-ground="panel"] .eq__factor { background: var(--cream); }
.eq__factor h3 { font-family: var(--font-body); font-size: clamp(14.5px, 1.3vw, 17px); font-weight: 600; line-height: 1.3; margin: 0; }
.eq__factor p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.6; margin: 0; color: rgba(26,26,26,.7); }
.eq__factor span { font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: auto; }
.eq__out { margin: clamp(18px, 2.2vw, 30px) 0 0; padding: clamp(16px, 2vw, 24px) clamp(18px, 2.2vw, 28px); background: var(--cream); border: 1px dashed var(--rule); border-radius: 3px; font-family: var(--font-body); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.62; color: rgba(26,26,26,.8); }
.sv[data-ground="panel"] .eq__out { background: transparent; }
.eq__out b { color: var(--ink); font-weight: 600; }
@media (max-width: 780px) {
  .eq { grid-template-columns: 1fr; gap: 10px; }
  .eq__op { height: 26px; }
}

/* a section lead: the normal case. The orange-ruled answer block is reserved
   for the two sections that answer a query someone actually types. */
.sv__head .sv__lead {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.62;
  margin: 0;
  color: color-mix(in srgb, currentColor 82%, transparent);
  max-width: 64ch;
}

/* ====================================================================
   Patterns for the pipeline pages. Lead generation argues about where
   the funnel leaks; demand generation argues about creating demand that
   does not exist. Neither is a deliverable list.
   ==================================================================== */

/* ---- THE FUNNEL — stages, and where each one leaks ---------------- */
.funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.funnel__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(12px, 2vw, 28px); align-items: center; }
.funnel__bar { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--orange); border-radius: 3px; padding: 15px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.sv[data-ground="panel"] .funnel__bar { background: var(--cream); }
.funnel__stage:nth-child(1) .funnel__bar { margin-right: 0; }
.funnel__stage:nth-child(2) .funnel__bar { margin-right: 7%; }
.funnel__stage:nth-child(3) .funnel__bar { margin-right: 14%; }
.funnel__stage:nth-child(4) .funnel__bar { margin-right: 21%; }
.funnel__stage:nth-child(5) .funnel__bar { margin-right: 28%; }
.funnel__name { font-family: var(--font-body); font-size: clamp(14.5px, 1.3vw, 17px); font-weight: 600; }
.funnel__who { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.funnel__leak { font-family: var(--font-body); font-size: 13.5px; line-height: 1.58; color: rgba(26,26,26,.7); }
.funnel__leak b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .funnel__stage { grid-template-columns: 1fr; gap: 6px; }
  .funnel__bar { margin-right: 0 !important; }
  .funnel__leak { padding-left: 16px; border-left: 2px solid var(--rule); }
}

/* ---- VERSUS — the two things buyers conflate --------------------- */
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(14px, 2.2vw, 34px); align-items: stretch; }
.versus__side { display: flex; flex-direction: column; gap: 14px; }
.versus__side h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 2.1vw, 28px); line-height: 1.04; text-transform: uppercase; margin: 0; }
.versus__side > p { font-family: var(--font-body); font-size: 14.5px; line-height: 1.6; margin: 0; color: rgba(26,26,26,.74); }
.versus__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.versus__side li { font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; padding-left: 20px; position: relative; color: rgba(26,26,26,.74); }
.versus__side li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--orange); }
.versus__side--quiet h3 { color: var(--slate); }
.versus__side--quiet li::before { border-color: var(--muted); }
.versus__rule { width: 1px; background: var(--rule); position: relative; }
.versus__rule span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--cream); border: 1px solid var(--rule); border-radius: 99px; padding: 5px 11px; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.sv[data-ground="panel"] .versus__rule span { background: var(--panel); }
.versus__foot { margin: clamp(20px, 2.4vw, 32px) 0 0; padding: clamp(15px, 1.8vw, 22px) clamp(17px, 2vw, 26px); background: var(--panel); border: 1px solid var(--rule); border-radius: 3px; font-family: var(--font-body); font-size: clamp(13.5px, 1.15vw, 15.5px); line-height: 1.6; color: rgba(26,26,26,.8); }
.sv[data-ground="panel"] .versus__foot { background: var(--cream); }
.versus__foot b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; }
  .versus__rule { width: auto; height: 1px; }
  .versus__rule span { position: static; transform: none; display: inline-block; }
}