/* =========================================================
   TOKENS — same values as the rest of the SA Hedge Fund site;
   scoped to .service-detail-root so nothing leaks into, or is
   overridden by, the host application's own CSS variables.
   ========================================================= */
.service-detail-root{
  --navy:#0B1F33; --navy-deep:#071523; --navy-raise:#112A44;
  --gold:#C9A24D; --gold-dim:rgba(201,162,77,0.28); --gold-dark:#9A7A34;
  --cream:#F3EFE7; --neutral:#F3F1ED;
  --on-navy:#F3EFE7; --on-navy-mute:#9FAFC2;
  --on-cream:#0B1F33; --on-cream-mute:#5A6579;
  --good:#5B8A6B; --warn:#B5502E;
  --max:1220px; --gutter:clamp(20px,4vw,48px); --read:720px;
}
.service-detail-root, .service-detail-root *{ box-sizing:border-box; }
.service-detail-root{
  width:100%;
  background:var(--cream);
  color:var(--on-cream);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
}
.service-detail-root h1, .service-detail-root h2, .service-detail-root h3, .service-detail-root h4, .service-detail-root .serif{ font-family:'Playfair Display',serif; font-weight:600; margin:0; }
.service-detail-root p{ margin:0; }
.service-detail-root a{ color:inherit; text-decoration:none; }
.service-detail-root ::selection{ background:var(--gold); color:var(--navy-deep); }
.service-detail-root label{ font-family:'Inter',sans-serif; }
.service-detail-wrap{
  width:min(var(--max), calc(100% - (var(--gutter) * 2)));
  max-width:none;
  margin-inline:auto;
}

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold); color:var(--navy-deep); padding:12px 20px; font-size:0.85rem; font-weight:600; }
.skip-link:focus{ left:16px; top:16px; }
a:focus-visible, button:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.service-detail-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:0.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:20px; }
.service-detail-eyebrow::before{ content:''; width:24px; height:1px; background:var(--gold-dark); }
.service-detail-eyebrow-light{ color:var(--gold); }
.service-detail-eyebrow-light::before{ background:var(--gold); }

.service-detail-btn{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 26px; font-size:0.86rem; letter-spacing:0.02em; transition:all .25s ease; border:1px solid transparent; cursor:pointer; font-family:'Inter',sans-serif; background:none; }
.service-detail-btn-primary{ background:var(--gold); color:var(--navy-deep); font-weight:500; }
.service-detail-btn-primary:hover{ background:#dcb769; }
.service-detail-btn-line{ border-bottom:1px solid rgba(11,31,51,0.25); padding:0 0 4px; color:var(--on-cream); }
.service-detail-btn-line:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }
.service-detail-btn-line-light{ border-color:rgba(243,239,231,0.35); color:var(--on-navy); }
.service-detail-btn-line-light:hover{ color:var(--gold); border-color:var(--gold); }
.service-detail-btn:hover .service-detail-arrow{ transform:translateX(3px); }
.service-detail-arrow{ transition:transform .25s ease; display:inline-block; }
.service-detail-section-head{ max-width:660px; }
.service-detail-section-head h2{ font-size:clamp(1.5rem,2.8vw,2rem); }
.service-detail-lede{ font-size:1rem; line-height:1.75; color:var(--on-cream-mute); max-width:64ch; margin-top:16px; }

/* ---------- shared navigation/footer are supplied globally ---------- */

/* =========================================================
   01 HERO — Variant A: deep navy, restrained line-art.
   A photographic Variant B is documented in the HTML below
   (search "HERO VARIANT B") for side-by-side comparison, per
   review note 14 — swap the commented block in to test it.
   ========================================================= */
.service-detail-hero{ position:relative; background:var(--navy); color:var(--on-navy); padding:clamp(56px,8vw,92px) 0 clamp(64px,9vw,100px); overflow:hidden; }
.service-detail-hero-art{ position:absolute; inset:0; opacity:0.16; pointer-events:none; }
.service-detail-hero-inner{ position:relative; max-width:760px; }
.service-detail-hero h1{ font-size:clamp(2.2rem,4.6vw,3.2rem); line-height:1.15; letter-spacing:-0.01em; margin-bottom:20px; }
.service-detail-hero-statement{ font-size:1.15rem; line-height:1.6; color:var(--on-navy); max-width:52ch; margin-bottom:16px; }
.service-detail-hero-sub{ font-size:1rem; line-height:1.75; color:var(--on-navy-mute); max-width:56ch; margin-bottom:36px; }
.service-detail-hero-actions{ display:flex; gap:20px; flex-wrap:wrap; }
/* Variant B helper class — full-bleed photographic hero with a navy
   overlay so text stays legible. Not active by default; see markup. */
.service-detail-hero--photo{ background-image:linear-gradient(180deg, rgba(7,21,35,0.88), rgba(7,21,35,0.94)), var(--hero-photo, none); background-size:cover; background-position:center; }

/* =========================================================
   02 HEALTH PROTECTION ASSESSMENT — merged calculator + gap
   checker, presented as one dashboard-style journey rather
   than two separate tools (review notes 2 & 3).
   ========================================================= */
.service-detail-assess{ padding:clamp(64px,9vw,100px) 0; }
.service-detail-assess .service-detail-section-head{ margin:0 auto clamp(36px,4.5vw,44px); text-align:center; max-width:680px; }
.service-detail-assess .service-detail-eyebrow{ justify-content:center; }
.service-detail-proto-flag{ display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--warn); background:rgba(181,80,46,0.08); border:1px solid rgba(181,80,46,0.3); padding:8px 14px; margin:0 auto 28px; max-width:fit-content; }
.service-detail-proto-flag::before{ content:'●'; font-size:0.6rem; }

.service-detail-assess-panel{
  width:min(1120px, 100%);
  background:#fff;
  border:1px solid rgba(11,31,51,0.1);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  margin:0 auto;
}
.service-detail-assess-form{ padding:clamp(28px,3.4vw,40px); border-right:1px solid rgba(11,31,51,0.1); }
.service-detail-assess-form fieldset{ border:none; margin:0 0 26px; padding:0; }
.service-detail-assess-form fieldset:last-child{ margin-bottom:0; }
.service-detail-assess-form legend{ font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:18px; padding:0; }
.service-detail-field{ margin-bottom:18px; }
.service-detail-field:last-child{ margin-bottom:0; }
.service-detail-field label{ display:block; font-size:0.86rem; color:var(--on-cream); margin-bottom:8px; font-weight:500; }
.service-detail-field select, .service-detail-field input[type="number"]{ width:100%; min-height:48px; border:1px solid rgba(11,31,51,0.2); background:var(--neutral); padding:0 14px; font-size:0.92rem; font-family:'Inter',sans-serif; color:var(--on-cream); }
.service-detail-field-hint{ font-size:0.76rem; color:var(--on-cream-mute); margin-top:6px; }
.service-detail-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.service-detail-assess-out{ padding:clamp(28px,3.4vw,40px); background:var(--navy); color:var(--on-navy); display:flex; flex-direction:column; justify-content:center; }
.service-detail-assess-out-label{ font-size:0.74rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.service-detail-assess-range{ font-family:'Playfair Display',serif; font-size:clamp(1.7rem,3.2vw,2.2rem); margin-bottom:18px; }

/* dashboard-style stacked bars: existing / requirement / gap */
.service-detail-dash{ margin-bottom:22px; }
.service-detail-dash-row{ margin-bottom:14px; }
.service-detail-dash-row:last-child{ margin-bottom:0; }
.service-detail-dash-label{ display:flex; justify-content:space-between; font-size:0.78rem; color:var(--on-navy-mute); margin-bottom:6px; }
.service-detail-dash-label strong{ color:var(--on-navy); font-weight:600; }
.service-detail-dash-track{ height:10px; background:rgba(243,239,231,0.12); position:relative; }
.service-detail-dash-fill{ position:absolute; top:0; bottom:0; left:0; transition:width .4s ease; }
.service-detail-dash-fill--existing{ background:linear-gradient(90deg,#6f8a9c,#9FAFC2); }
/* range fill is positioned via left+width (not just width) so it reads
   as a segment from the low to the high end of the range, not a 0-based
   bar — existing cover and range become directly comparable quantities. */
.service-detail-dash-fill--range{ background:linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.service-detail-dash-fill--gap{ background:linear-gradient(90deg,#8a3f24, var(--warn)); }
.service-detail-dash-label strong.service-detail-pos--within{ color:var(--good); }
.service-detail-dash-label strong.service-detail-pos--below{ color:var(--warn); }
.service-detail-dash-label strong.service-detail-pos--above{ color:var(--gold); }

.service-detail-assess-insight{ font-size:0.9rem; line-height:1.65; color:var(--on-navy-mute); border-top:1px solid rgba(201,162,77,0.18); padding-top:16px; margin-bottom:16px; }
.service-detail-assess-insight strong{ color:var(--on-navy); }
.service-detail-assess-next{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.service-detail-disclaimer{ font-size:0.76rem; line-height:1.6; color:var(--on-navy-mute); border-top:1px solid rgba(201,162,77,0.18); padding-top:16px; margin-top:4px; }

/* =========================================================
   03 HOW HEALTH COVER IS STRUCTURED — grouped protection
   architecture (personal layers vs. additional/existing
   layers) rather than one sequential four-step stack.
   ========================================================= */
.service-detail-architecture{ background:var(--neutral); padding:clamp(64px,9vw,100px) 0; }
.service-detail-architecture .service-detail-section-head{ margin:0 auto clamp(44px,5.5vw,56px); text-align:center; max-width:640px; }
.service-detail-architecture .service-detail-eyebrow{ justify-content:center; }
.service-detail-arch-groups{
  width:min(920px, 100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(20px,3vw,32px);
  align-items:start;
  margin:0 auto;
}
.service-detail-arch-group{ background:#fff; border:1px solid rgba(11,31,51,0.1); padding:clamp(24px,2.8vw,30px); }
.service-detail-arch-group-title{ font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:18px; }
.service-detail-arch-layer{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-top:1px solid rgba(11,31,51,0.08); }
.service-detail-arch-layer:first-of-type{ border-top:none; padding-top:0; }
.service-detail-arch-icon{ width:38px; height:38px; border-radius:50%; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; flex:none; }
.service-detail-arch-icon svg{ width:17px; height:17px; }
.service-detail-arch-layer h3{ font-size:0.94rem; margin-bottom:5px; }
.service-detail-arch-layer p{ font-size:0.84rem; line-height:1.55; color:var(--on-cream-mute); }
.service-detail-arch-plus{ display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--gold-dark); align-self:center; padding-top:60px; }
.service-detail-arch-note{ text-align:center; font-size:0.86rem; color:var(--on-cream-mute); max-width:56ch; margin:clamp(28px,3.5vw,36px) auto 0; }

/* =========================================================
   04 WHAT TO CHECK BEFORE CHOOSING — expandable evaluation
   matrix (feature / why it matters) instead of a card grid.
   ========================================================= */
.service-detail-criteria{ padding:clamp(64px,9vw,100px) 0; }
.service-detail-criteria .service-detail-section-head{ margin:0 0 clamp(36px,4.5vw,48px); }
.service-detail-criteria .service-detail-wrap{ max-width:var(--read); }
.service-detail-criteria-list{ border-top:1px solid rgba(11,31,51,0.12); }
.service-detail-criteria-item{ border-bottom:1px solid rgba(11,31,51,0.12); }
.service-detail-criteria-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:18px 2px; }
.service-detail-criteria-item summary::-webkit-details-marker{ display:none; }
.service-detail-criteria-item .service-detail-criteria-no{ font-family:'Playfair Display',serif; font-size:0.86rem; color:var(--gold-dark); flex:none; width:28px; }
.service-detail-criteria-item summary span.service-detail-criteria-name{ flex:1; font-size:0.98rem; font-weight:500; color:var(--on-cream); }
.service-detail-faq-chevron{ transition:transform .25s ease; color:var(--gold-dark); flex:none; }
.service-detail-criteria-item[open] .service-detail-faq-chevron{ transform:rotate(180deg); }
.service-detail-criteria-item p{ font-size:0.92rem; line-height:1.65; color:var(--on-cream-mute); max-width:66ch; padding:0 2px 18px 44px; }

/* =========================================================
   05 SA HEDGE FUND PROTECTION FRAMEWORK — elevated,
   numbered methodology artifact (review note 8).
   ========================================================= */
.service-detail-evaluation{ background:var(--neutral); padding:clamp(64px,9vw,100px) 0; }
.service-detail-evaluation .service-detail-section-head{ margin:0 auto clamp(20px,3vw,28px); text-align:center; max-width:640px; }
.service-detail-evaluation .service-detail-eyebrow{ justify-content:center; }
.service-detail-eval-intro{ text-align:center; font-size:1.02rem; line-height:1.75; color:var(--on-cream-mute); max-width:60ch; margin:0 auto clamp(44px,5vw,56px); }
.service-detail-eval-steps{
  width:min(1120px, 100%);
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:1px;
  background:rgba(11,31,51,0.1);
  border:1px solid rgba(11,31,51,0.1);
  margin:0 auto;
}
.service-detail-eval-step{ background:#fff; padding:clamp(18px,2vw,22px) clamp(14px,1.6vw,16px); text-align:center; }
.service-detail-eval-step-no{ font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--gold-dark); display:block; margin-bottom:10px; }
.service-detail-eval-step-name{ font-size:0.8rem; line-height:1.4; color:var(--on-cream); font-weight:500; }
.service-detail-eval-note{ text-align:center; font-family:'Playfair Display',serif; font-style:italic; font-size:1.15rem; color:var(--on-cream); max-width:46ch; margin:clamp(36px,4.5vw,48px) auto 0; line-height:1.5; }

/* =========================================================
   06 COMMON MISTAKES
   ========================================================= */
.service-detail-mistakes{ padding:clamp(64px,9vw,100px) 0; }
.service-detail-mistakes .service-detail-section-head{ margin:0 0 clamp(16px,2vw,20px); }
.service-detail-mistakes-lead{ font-family:'Playfair Display',serif; font-style:italic; font-size:1.1rem; color:var(--on-cream); max-width:52ch; margin-bottom:clamp(32px,4vw,44px); }
.service-detail-mistakes-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(11,31,51,0.1);
  border:1px solid rgba(11,31,51,0.1);
}
.service-detail-mistake-card{ background:#fff; padding:clamp(20px,2.4vw,24px); }
.service-detail-mistake-no{ font-family:'Playfair Display',serif; font-size:0.82rem; color:var(--gold-dark); display:block; margin-bottom:8px; }
.service-detail-mistake-card p{ font-size:0.88rem; line-height:1.55; color:var(--on-cream); }

/* =========================================================
   07 OUR ADVISORY APPROACH — five-step journey plus a
   life-event review timeline (merged from the old standalone
   "When Should You Review?" section — review note 9).
   ========================================================= */
.service-detail-approach{ background:var(--navy); color:var(--on-navy); padding:clamp(72px,10vw,112px) 0; }
.service-detail-approach .service-detail-section-head{ margin:0 auto clamp(48px,6vw,60px); text-align:center; max-width:640px; }
.service-detail-approach .service-detail-eyebrow{ justify-content:center; }
.service-detail-approach h2{ color:var(--on-navy); }
.service-detail-journey{
  width:min(1100px, 100%);
  display:flex;
  gap:clamp(10px,1.6vw,20px);
  margin:0 auto;
}
.service-detail-journey-step{ flex:1; position:relative; padding-top:36px; }
.service-detail-journey-step::before{ content:''; position:absolute; top:12px; left:0; right:0; height:1px; background:rgba(201,162,77,0.25); }
.service-detail-journey-step:first-child::before{ left:50%; }
.service-detail-journey-step:last-child::before{ right:50%; }
.service-detail-journey-marker{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:26px; height:26px; border-radius:50%; background:var(--gold); color:var(--navy-deep); display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:600; }
.service-detail-journey-icon{ width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-dim); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.service-detail-journey-icon svg{ width:18px; height:18px; }
.service-detail-journey-step h3{ text-align:center; font-size:0.96rem; margin-bottom:8px; color:var(--on-navy); }
.service-detail-journey-step p{ text-align:center; font-size:0.8rem; line-height:1.55; color:var(--on-navy-mute); }

.service-detail-review-timeline{
  width:min(1100px, 100%);
  margin:clamp(56px,7vw,72px) auto 0;
  padding-top:clamp(48px,6vw,60px);
  border-top:1px solid rgba(201,162,77,0.18);
}
.service-detail-review-timeline-head{ text-align:center; max-width:56ch; margin:0 auto clamp(28px,3.5vw,36px); }
.service-detail-review-timeline-head h3{ font-size:clamp(1.2rem,2vw,1.4rem); color:var(--on-navy); margin-bottom:10px; }
.service-detail-review-timeline-head p{ font-size:0.92rem; line-height:1.65; color:var(--on-navy-mute); }
.service-detail-events-list{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.service-detail-events-list span{ font-size:0.82rem; color:var(--on-navy); border:1px solid rgba(201,162,77,0.25); padding:9px 14px; }

/* =========================================================
   08 WHY SA HEDGE FUND
   ========================================================= */
.service-detail-why{ padding:clamp(64px,9vw,100px) 0; }
.service-detail-why-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(40px,6vw,72px);
  align-items:start;
}
.service-detail-why h2{ font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:20px; max-width:20ch; }
.service-detail-why p{ font-size:1.02rem; line-height:1.8; color:var(--on-cream); max-width:56ch; }
.service-detail-why p + p{ margin-top:16px; }
.service-detail-why-chain{ background:var(--neutral); border:1px solid rgba(11,31,51,0.1); padding:clamp(26px,3vw,32px); }
.service-detail-why-chain-title{ font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:16px; }
.service-detail-why-chain-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:0.92rem; color:var(--on-cream); margin-bottom:14px; }
.service-detail-why-chain-row span.service-detail-arrow{ color:var(--gold-dark); }
.service-detail-why-not{ font-size:0.86rem; color:var(--on-cream-mute); }

/* =========================================================
   09 FAQ
   ========================================================= */
.service-detail-faq{ background:var(--neutral); padding:clamp(64px,9vw,100px) 0; }
.service-detail-faq .service-detail-wrap{ max-width:var(--read); }
.service-detail-faq .service-detail-section-head{ margin-bottom:clamp(36px,5vw,48px); }
.service-detail-faq-list{ border-top:1px solid rgba(11,31,51,0.12); }
.service-detail-faq-item{ border-bottom:1px solid rgba(11,31,51,0.12); }
.service-detail-faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 2px; font-size:0.98rem; font-weight:500; color:var(--on-cream); }
.service-detail-faq-item summary::-webkit-details-marker{ display:none; }
.service-detail-faq-item[open] .service-detail-faq-chevron{ transform:rotate(180deg); }
.service-detail-faq-item p{ font-size:0.94rem; line-height:1.7; color:var(--on-cream-mute); max-width:66ch; padding:0 2px 20px; }

/* =========================================================
   10 RELATED RESEARCH — placeholder cards clearly labelled
   as forthcoming (review note 13); not styled as live links.
   ========================================================= */
.service-detail-research{ padding:clamp(64px,9vw,100px) 0; }
.service-detail-research .service-detail-section-head{ margin:0 0 clamp(12px,1.6vw,16px); }
.service-detail-research-note{ font-size:0.86rem; color:var(--on-cream-mute); margin-bottom:clamp(36px,4.5vw,48px); max-width:62ch; }
.service-detail-research-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(11,31,51,0.1);
  border:1px solid rgba(11,31,51,0.1);
}
.service-detail-research-card{ background:#fbfaf8; padding:clamp(24px,3vw,28px); display:flex; flex-direction:column; }
.service-detail-research-card .service-detail-tag{ font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold-dark); margin-bottom:12px; }
.service-detail-research-card h3{ font-size:1rem; line-height:1.4; margin-bottom:10px; color:var(--on-cream-mute); }
.service-detail-research-card p{ font-size:0.86rem; line-height:1.6; color:var(--on-cream-mute); flex:1; margin-bottom:14px; }
.service-detail-soon{ font-size:0.74rem; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--on-cream-mute); display:inline-flex; align-items:center; gap:6px; width:fit-content; }
.service-detail-soon::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--on-cream-mute); }

/* =========================================================
   11 FINAL CTA
   ========================================================= */
.service-detail-cta{ background:var(--navy); color:var(--on-navy); padding:clamp(72px,10vw,120px) 0; text-align:center; }
.service-detail-cta .service-detail-wrap{ max-width:640px; }
.service-detail-cta-rule{ width:44px; height:2px; background:var(--gold); margin:0 auto 32px; }
.service-detail-cta h2{ font-size:clamp(1.6rem,3.2vw,2.15rem); margin-bottom:18px; line-height:1.3; color:var(--on-navy); }
.service-detail-cta p{ font-size:1.02rem; line-height:1.75; color:var(--on-navy-mute); margin-bottom:36px; }
.service-detail-cta-actions{ display:flex; gap:22px; justify-content:center; flex-wrap:wrap; }

/* ---------- WhatsApp affordance (contextual, not a floating widget) ---------- */
.service-detail-wa-icon{ width:16px; height:16px; }

/* =========================================================
   MOBILE STICKY CONVERSION BAR — review note 15. Deliberately
   plain (two text links, no shadow/animation) so it reads as
   part of the site chrome rather than an intrusive widget.
   Hidden on desktop; page keeps a clean, un-cluttered layout.
   ========================================================= */
.service-detail-sticky-cta{ display:none; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .service-detail-assess-panel, .service-detail-why-grid{ grid-template-columns:1fr; }
  .service-detail-assess-form{ border-right:none; border-bottom:1px solid rgba(11,31,51,0.1); }
  .service-detail-arch-groups{ grid-template-columns:1fr; }
  .service-detail-arch-plus{ padding-top:0; transform:rotate(90deg); }
  .service-detail-research-grid{ grid-template-columns:repeat(2,1fr); }
  .service-detail-mistakes-grid{ grid-template-columns:repeat(2,1fr); }
  .service-detail-journey{ flex-wrap:wrap; }
  .service-detail-journey-step{ flex:1 1 calc(33.33% - 14px); margin-bottom:28px; }
  .service-detail-eval-steps{ grid-template-columns:repeat(4,1fr); }

  .service-detail-sticky-cta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:70; background:rgba(7,21,35,0.97); backdrop-filter:blur(8px); border-top:1px solid rgba(201,162,77,0.22); }
  .service-detail-sticky-cta a{ flex:1; text-align:center; padding:14px 10px; font-size:0.82rem; color:var(--on-navy); min-height:48px; display:flex; align-items:center; justify-content:center; }
  .service-detail-sticky-cta a:first-child{ border-right:1px solid rgba(201,162,77,0.18); color:var(--gold); font-weight:500; }
  /* page-scoped, not global body — this page's own fixed sticky bar
     needs bottom clearance, but a page-specific component should not
     alter the host template's global body spacing (review note 15). */
  .service-detail-root{ padding-bottom:56px; }
}
@media (max-width:640px){
  .service-detail-wrap{
    width:calc(100% - (var(--gutter) * 2));
  }

  .service-detail-research-grid, .service-detail-mistakes-grid{ grid-template-columns:1fr; }
  .service-detail-journey-step{ flex:1 1 100%; }
  .service-detail-hero-actions, .service-detail-cta-actions{ flex-direction:column; align-items:flex-start; }
  .service-detail-cta-actions{ align-items:center; }
  .service-detail-eval-steps{ grid-template-columns:repeat(2,1fr); }
  .service-detail-field-row{ grid-template-columns:1fr; }
}