/* ===========================================================================
   APEX MEDICAL — Phase 2D.3
   Art direction: documentary medical-technology photography carrying the page,
   with precise technical annotation laid over it. Type is restrained; the
   images provide scale and colour (Polestar/Leica principle). Density varies
   hard between sections — airy image moments against dense specification
   blocks — which is what stops it reading as one repeated component.

   ONE typeface (Archivo variable) across two widths. Neutral base, graphite
   depth, a single deep-petrol signal used at roughly 1% of surface as a
   calibration mark. No cyan/purple, no healthcare blue, no black/gold.

   Phase 2F-A: the signal was retraced from vermilion (#9F3F26/#F08A63) to
   deep petrol (#0D4F52/#4FB3B8) — same role, same ~1% usage, higher contrast
   in both directions (8.0:1 on paper, 7.2:1 on ink vs. 5.6:1 / 7.2:1 before).

   Phase 2F-B correction pass: the raised tint read as too bright/aqua — a
   generic SaaS teal rather than a mineral one. Both values deepened and
   desaturated toward mineral-teal (#0B4245/#6B9E9F). The dark value carries
   headline-weight emphasis (labels, links, CTA hover); the lighter tint is
   now reserved for fine lines, rails and small indicators only — it was
   never used for large fills, so this is a values-only correction.
   =========================================================================== */

:root{
  --paper:#F0EEEA;          /* warm neutral, not beige, not white */
  --paper-2:#E6E3DD;
  --ink:#14181B;            /* graphite */
  --ink-2:#1C2225;
  --ink-3:#262E32;
  --t1:#14181B; --t2:#4B565B; --t3:#5C666B;   /* t3 was #6E787D at 4.07:1 */
  --i1:#F0EEEA; --i2:#A8B2B6; --i3:#7E888D;
  --sig:#0B4245;   /* signal mineral-teal, deep. 9.6:1 as text on paper (was #0D4F52 then #9F3F26) */
  --sig-i:#6B9E9F; /* the same signal, muted and raised for dark grounds — fine lines/rails/small indicators only. 6.0:1 on ink (was #4FB3B8, too bright/aqua) */
  --err:#A6362C;   /* form-validation error only — kept apart from the brand signal so a calm accent never reads as an alarm */
  --steel:#5B6B70;
  --ln:#D3CFC7; --ln-i:rgba(240,238,234,.14);
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --wrap:1320px; --gut:clamp(1.15rem,4vw,3rem);
  --e:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--t1);font-family:var(--f);
  font-size:1.0313rem;line-height:1.6;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.05;letter-spacing:-.028em}
p{margin:0}img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
.on-ink :focus-visible,.hero :focus-visible{outline-color:var(--sig-i)}
.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--i1);padding:.8rem 1.2rem;z-index:300}
.skip:focus{left:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- the one recurring device: a condensed technical label ---------------- */
.tech{font-variation-settings:"wdth" 78;font-size:.7rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.on-ink .tech{color:var(--i3)}
.tech.sig{color:var(--sig)}
.on-ink .tech.sig{color:var(--sig-i)}

/* --- type scale ---------------------------------------------------------- */
.d1{font-size:clamp(2.5rem,5.6vw,4.6rem);letter-spacing:-.035em;line-height:1}
.d2{font-size:clamp(1.9rem,3.7vw,3.05rem);letter-spacing:-.03em}
.d3{font-size:clamp(1.35rem,2vw,1.75rem);letter-spacing:-.022em;line-height:1.2}
.body-lg{font-size:clamp(1.05rem,1.25vw,1.19rem);line-height:1.55;color:var(--t2)}
.on-ink .body-lg{color:var(--i2)}

/* --- buttons: small, confident, not SaaS --------------------------------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.78rem 1.35rem;
  font-size:.9rem;font-weight:600;letter-spacing:-.005em;border-radius:1px;
  transition:.2s var(--e)}
.btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .22s var(--e)}
.btn:hover svg{transform:translateX(3px)}
.btn-solid{background:var(--ink);color:var(--i1)}
.btn-solid:hover{background:var(--sig)}
.btn-line{border:1px solid var(--ln);color:var(--t1)}
.btn-line:hover{border-color:var(--ink)}
.on-ink .btn-solid{background:var(--i1);color:var(--ink)}
.on-ink .btn-solid:hover{background:var(--sig-i);color:var(--ink)}
.on-ink .btn-line{border-color:var(--ln-i);color:var(--i1)}
.on-ink .btn-line:hover{border-color:var(--i1)}
/* inline link with a signal underline */
.lnk{display:inline-flex;align-items:center;gap:.45rem;font-size:.92rem;font-weight:600;
  padding-bottom:3px;border-bottom:1.5px solid var(--sig);transition:.2s var(--e)}
.lnk:hover{gap:.75rem}
.on-ink .lnk{border-color:var(--sig-i)}

/* ========================= NAV (over the hero) =========================== */
.nav{position:absolute;top:0;left:0;right:0;z-index:120}
.nav.stuck{position:fixed;background:rgba(20,24,27,.9);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--ln-i);animation:drop .35s var(--e)}
@keyframes drop{from{transform:translateY(-100%)}to{transform:none}}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;
  min-height:78px;color:var(--i1)}
.nav.stuck .nav-in{min-height:64px}

.nav-links{display:flex;gap:1.9rem}
.nav-links a{font-size:.875rem;font-weight:500;opacity:.82;position:relative;padding-block:.35rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--sig-i);transform:scaleX(0);transform-origin:left;transition:transform .24s var(--e)}
.nav-links a:hover{opacity:1}.nav-links a:hover::after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:1rem}
.burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:20px;height:1.5px;background:currentColor;transition:.25s var(--e)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{display:none;position:fixed;inset:0;z-index:110;background:var(--ink);color:var(--i1);
  padding:6rem var(--gut) 2rem;overflow:auto}
.mnav[data-open="true"]{display:block}
.mnav a{display:block;padding:1.15rem 0;font-size:1.35rem;font-weight:600;letter-spacing:-.02em;
  border-bottom:1px solid var(--ln-i)}
.mnav .btn{margin-top:1.8rem;width:100%;justify-content:center}

/* ========================= 1. HERO ======================================= */
/* Full-bleed documentary photograph. Type sits low-left inside the image, with
   a spec block top-right — an editorial caption, not a credential strip. */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  background:var(--ink);overflow:hidden;color:var(--i1)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:58% 45%}
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(12,16,18,.82) 0%,rgba(12,16,18,.24) 34%,rgba(12,16,18,.55) 68%,rgba(12,16,18,.94) 100%),
    linear-gradient(90deg,rgba(12,16,18,.8) 0%,rgba(12,16,18,.15) 62%)}
.hero-in{position:relative;width:100%;padding-block:clamp(2rem,5vw,4.5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end}
.hero h1{font-size:clamp(2.4rem,5.4vw,4.5rem);max-width:16ch;letter-spacing:-.038em}
.hero h1 span{display:block;color:var(--sig-i)}
.hero-sub{margin-top:1.5rem;max-width:44ch;font-size:clamp(1rem,1.2vw,1.13rem);
  line-height:1.55;color:rgba(240,238,234,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.1rem}
/* annotation rule — the engineering language, applied to a photograph */
.hero-rule{position:relative;margin-bottom:1.5rem;padding-top:.85rem;
  border-top:1px solid rgba(240,238,234,.3);max-width:30rem;
  display:flex;align-items:center;gap:.8rem}
.hero-rule::before{content:"";position:absolute;top:-1px;left:0;width:52px;height:3px;background:var(--sig-i)}
/* spec block — proof as a photo caption */
.spec{border-left:1px solid rgba(240,238,234,.26);padding-left:1.3rem;max-width:16rem}
.spec dl{margin:0;display:grid;gap:1rem}
.spec dt{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(240,238,234,.55);margin-bottom:.2rem}
.spec dd{margin:0;font-size:.9rem;line-height:1.35;color:var(--i1);font-weight:500}
.spec dd b{font-weight:700}

/* ========================= 3. THE GAP (dense, dark) ====================== */
.gap{background:var(--ink);color:var(--i1);position:relative;overflow:hidden}
.gap-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem);align-items:stretch}
/* the image bleeds off the left edge — breaks the container, deliberately */
.gap-fig{position:relative;margin-left:calc(50% - 50vw);min-height:clamp(320px,44vw,620px)}
.gap-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.gap-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 55%,rgba(20,24,27,.85) 100%)}
.gap-fig figcaption{position:absolute;left:var(--gut);bottom:1.2rem;z-index:2;
  font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(240,238,234,.62)}
.gap-body{padding-block:clamp(3.5rem,7vw,7rem)}
.gap-body h2{max-width:17ch;margin-bottom:1.4rem}
.gap-list{margin-top:clamp(2rem,3.5vw,3rem);border-top:1px solid var(--ln-i)}
.gap-row{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;gap:1rem 1.2rem;
  align-items:baseline;padding-block:1.05rem;border-bottom:1px solid var(--ln-i);
  transition:background .22s var(--e)}
.gap-row:hover{background:rgba(240,238,234,.04)}
.gap-row .idx{font-variation-settings:"wdth" 78;font-size:.72rem;font-weight:600;
  letter-spacing:.1em;color:var(--i3)}
.gap-row .nm{font-size:1.05rem;font-weight:500}
.gap-row .nm span{display:block;font-size:.85rem;font-weight:400;color:var(--i3);margin-top:.2rem;max-width:44ch}
.gap-row .st{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sig-i);white-space:nowrap}
.gap-row.solved .nm{color:var(--i3)}
.gap-row.solved .st{color:var(--i3)}
.gap-note{margin-top:2.2rem;max-width:52ch;font-size:.98rem;color:var(--i2)}

/* ========================= 6. METHOD (dense spec sheet) ================== */
/* Deliberately the densest block on the page — small type, tabular, technical.
   The contrast against the airy image sections is what creates pacing. */
.meth{padding-block:clamp(4rem,8vw,7rem);background:var(--paper-2)}
.meth-hd{max-width:34ch;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.spec-sheet{border-top:1.5px solid var(--ink)}
.spec-row{display:grid;grid-template-columns:2.6rem minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.85fr);
  gap:.6rem clamp(1rem,2.4vw,2.4rem);padding-block:1.15rem;border-bottom:1px solid var(--ln);
  align-items:baseline}
.spec-row .k{font-variation-settings:"wdth" 78;font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--t3)}
.spec-row .stage{font-size:1rem;font-weight:600;letter-spacing:-.018em}
.spec-row .what{font-size:.9rem;color:var(--t2);line-height:1.5}
.spec-row .out{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t3)}
.spec-row.key{background:rgba(11,66,69,.028)}  /* tint kept light: at .06 the signal text dropped to 4.3:1 */
.spec-row.key .k,.spec-row.key .out{color:var(--sig)}
.spec-row.key .stage{color:var(--sig)}
.meth-foot{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline;
  justify-content:space-between}
.meth-foot p{max-width:54ch;font-size:.95rem;color:var(--t2)}

/* ========================= 7. TESTIMONIAL =============================== */
.quote{padding-block:clamp(4.5rem,9vw,8rem)}
.quote-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.quote blockquote{margin:0;font-size:clamp(1.35rem,2.7vw,2.15rem);font-weight:500;
  letter-spacing:-.028em;line-height:1.28;text-wrap:pretty}
.quote blockquote::before{content:"";display:block;width:52px;height:3px;background:var(--sig);margin-bottom:1.6rem}
.quote .attr{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}
.quote .attr b{font-weight:700}
.quote .attr span{color:var(--t2);font-size:.93rem}
.quote .ctx{margin-top:1.4rem;max-width:56ch;font-size:.93rem;color:var(--t2)}
.eng-index{border-top:1px solid var(--ln);padding-top:1.2rem}
.eng-index li{display:flex;justify-content:space-between;gap:1rem;padding-block:.75rem;
  border-bottom:1px solid var(--ln);font-size:.9rem}
.eng-index ul{margin:0;padding:0;list-style:none}
.eng-index .who{font-weight:600}
.eng-index .what{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--t3);text-align:right;padding-top:.2rem}

/* ========================= 8. ABOUT (image bleeds right) ================= */
.about{background:var(--ink);color:var(--i1);position:relative;overflow:hidden}
.about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
.about-body{padding-block:clamp(4rem,8vw,7rem)}
.about-body h2{max-width:15ch;margin-bottom:1.4rem}
.about-body p + p{margin-top:1.1rem}
.about-fig{position:relative;margin-right:calc(50% - 50vw);align-self:stretch;min-height:clamp(300px,40vw,560px)}
.about-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.about-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,24,27,.9) 0%,transparent 45%)}

/* ========================= 9. INSIGHTS (index, not cards) =============== */
.ins{padding-block:clamp(4rem,8vw,7rem)}
.ins-hd{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap;
  padding-bottom:1.4rem;border-bottom:1.5px solid var(--ink)}
.ins-row{display:grid;grid-template-columns:7rem minmax(0,1.3fr) minmax(0,1fr);
  gap:.5rem clamp(1rem,2.5vw,2.5rem);padding-block:1.4rem;border-bottom:1px solid var(--ln);
  align-items:baseline;transition:.22s var(--e)}
.ins-row:hover{padding-left:.5rem}
.ins-row .cat{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sig)}
.ins-row h3{font-size:clamp(1rem,1.4vw,1.2rem);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.ins-row p{font-size:.88rem;color:var(--t2)}
.ins-foot{margin-top:1.6rem;font-size:.86rem;color:var(--t3)}

/* ========================= 10. CONTACT + FOOTER ========================== */
.contact{background:var(--ink);color:var(--i1);padding-block:clamp(3.5rem,7vw,6rem)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,5vw,4rem);align-items:end}
.contact h2{max-width:15ch}
.contact .sub{margin-top:1.2rem;max-width:44ch;color:var(--i2);font-size:1.02rem}
.contact-act{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.contact-meta{border-left:1px solid var(--ln-i);padding-left:1.5rem}
.contact-meta dt{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--i3);margin-bottom:.25rem}
.contact-meta dd{margin:0 0 1.1rem;font-size:.94rem}
.foot{background:var(--ink);color:var(--i3);border-top:1px solid var(--ln-i);padding-block:1.5rem}
.foot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-variation-settings:"wdth" 82;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}

/* --- reveal: opt-in, and it can never leave content invisible ------------
   .rv is VISIBLE by default. JS adds .js-reveal to <html> only when it can
   actually run the observer, and a timeout removes it if anything stalls.
   A failed observer therefore degrades to plain visible content. */
.js-reveal .rv{opacity:0;transform:translateY(16px)}
.js-reveal .rv.in{opacity:1;transform:none;
  transition:opacity .7s var(--e),transform .7s var(--e)}

/* ========================= RESPONSIVE ==================================== */
@media (max-width:1080px){
  .gap-grid,.about-grid,.quote-grid,.contact-grid{grid-template-columns:1fr}
  .gap-fig{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:46vw}
  .about-fig{margin-right:calc(50% - 50vw);margin-left:calc(50% - 50vw);min-height:52vw;order:-1}
  .about-fig::after{background:linear-gradient(180deg,rgba(20,24,27,.55),transparent 60%)}
  .svc-row{grid-template-columns:2.6rem minmax(0,1fr);row-gap:.8rem}
  .svc-row .meta{grid-column:2}
  .spec-row{grid-template-columns:2.4rem minmax(0,1fr);row-gap:.35rem}
  .spec-row .what,.spec-row .out{grid-column:2}
  .ins-row{grid-template-columns:6rem minmax(0,1fr);row-gap:.4rem}
  .ins-row p{grid-column:2}
  .hero-grid{grid-template-columns:1fr}
  .spec{border-left:0;border-top:1px solid rgba(240,238,234,.26);padding-left:0;
    padding-top:1.3rem;max-width:none;margin-top:2rem}
  .spec dl{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.2rem 2rem}
}
@media (max-width:900px){
  .nav-links,.nav-r .btn{display:none}
  .burger{display:flex}
  .hero{min-height:min(88vh,760px)}
  .entry-cols{grid-template-columns:1fr}
  .entry-col + .entry-col{border-left:0;border-top:1px solid rgba(240,238,234,.18);
    padding-left:0;margin-top:1.6rem;padding-top:1.6rem}
  .quote-grid{gap:2.5rem}
}
@media (max-width:620px){
  .hero-img img{object-position:64% 45%}
  .hero-cta .btn,.contact-act .btn{width:100%;justify-content:center}
  .st-facts{grid-template-columns:1fr}
  .st-facts div{padding-right:0;border-bottom:1px solid var(--ln)}
  .st-facts div:last-child{border-bottom:0}
  .meth-foot{flex-direction:column;align-items:flex-start}
  .contact-meta{border-left:0;border-top:1px solid var(--ln-i);padding-left:0;padding-top:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
}

/* ===========================================================================
   PHASE 2D.4 — refined sections
   Replaces: the three-column statement block, the numbered service rows and
   the dark comparison module. Same brand system, more bespoke composition.
   =========================================================================== */

/* --- hero measurement rail: instrument language over the photograph -------
   Deliberately NOT a progress tracker — no nodes, no states, no connecting
   path. Fine ticks and two end caps, as on a calibrated scale. */
.rail{position:absolute;right:clamp(1rem,3vw,2.4rem);top:50%;transform:translateY(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.9rem;pointer-events:none}
.rail-cap{font-variation-settings:"wdth" 78;font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(240,238,234,.5);writing-mode:vertical-rl}
.rail-cap.end{color:var(--sig-i)}
.rail-line{display:flex;flex-direction:column;gap:9px;align-items:flex-end}
.rail-line i{display:block;width:9px;height:1px;background:rgba(240,238,234,.34)}
.rail-line i:nth-child(3n+1){width:17px;background:rgba(240,238,234,.5)}
.rail-line i:last-child{width:20px;background:var(--sig-i);height:2px}

/* --- 2. ASYMMETRY: statement + weighted evidence -------------------------
   Was: headline, divider, three equal stat columns. Now: an image anchoring
   a left column, a statement that breaks the measure, and evidence weighted
   so the strongest proof is visibly dominant rather than one of three. */
.asym{padding-block:clamp(4rem,8vw,7.5rem);overflow:hidden}
.asym-grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.asym-fig{position:relative;margin:0;margin-left:calc(50% - 50vw);
  padding-left:calc(50vw - 50% - var(--gut));align-self:stretch}
.asym-fig img{width:100%;height:100%;min-height:clamp(260px,32vw,440px);object-fit:cover;
  object-position:50% 45%}
.asym-fig figcaption{margin-top:.85rem;font-variation-settings:"wdth" 78;font-size:.66rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--t3)}
.asym-fig figcaption .tech{display:inline;margin-right:.5rem}
.asym-statement{font-size:clamp(1.75rem,3.9vw,3.15rem);font-weight:600;letter-spacing:-.034em;
  line-height:1.08;max-width:15ch}
.asym-statement em{font-style:normal;color:var(--sig)}
.ev{margin-top:clamp(2.2rem,4vw,3.2rem)}
.ev-lead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.5vw,2rem);
  align-items:start;padding-bottom:1.6rem;border-bottom:1px solid var(--ln)}
.ev-n{font-size:clamp(3rem,6vw,5rem);font-weight:700;letter-spacing:-.05em;line-height:.85;
  color:var(--t1);white-space:nowrap}
.ev-n i{display:block;font-style:normal;font-variation-settings:"wdth" 78;font-size:.19em;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sig);margin-top:.5rem}
.ev-lead p{font-size:clamp(1rem,1.2vw,1.13rem);line-height:1.5;color:var(--t2);max-width:46ch}
.ev-lead p b{color:var(--t1);font-weight:600}
.ev-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.6rem);
  padding-top:1.5rem}
.ev-pair > div{padding-left:1.1rem;border-left:1px solid var(--ln)}
.ev-s{display:block;font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--t1);margin-bottom:.55rem}
.ev-pair p{font-size:.88rem;color:var(--t2);line-height:1.5}

/* --- 5. MARKET ENTRY: two lanes, one of which terminates -----------------
   Was: two lists side by side over a dark photo. Now: a drawn comparison in
   which the regulatory lane visibly STOPS and the commercial lane continues.
   The asymmetry of the two tracks is the entire argument. */
.entry{background:var(--ink);color:var(--i1);overflow:hidden}
.entry-grid{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.entry-fig{position:relative;margin:0;margin-left:calc(50% - 50vw);
  min-height:clamp(280px,38vw,600px)}
.entry-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 50%}
.entry-fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,24,27,.55) 0%,transparent 32%,rgba(20,24,27,.92) 100%)}
.entry-fig figcaption{position:absolute;left:var(--gut);bottom:1.1rem;z-index:2;
  font-variation-settings:"wdth" 78;font-size:.64rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(240,238,234,.6)}
.entry-body{padding-block:clamp(3.5rem,7vw,6.5rem)}
.entry-body h2{max-width:15ch}
.entry-body h2 span{color:var(--sig-i)}
.entry-body .body-lg{margin-top:1.3rem;max-width:52ch}

.lanes{margin-top:clamp(2.2rem,4vw,3.4rem);display:grid;gap:clamp(1.4rem,2.6vw,2.2rem)}
.lane{position:relative}
.lane-lbl{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--i3);margin-bottom:.85rem}
.lane-lbl.sig{color:var(--sig-i)}
.lane-track{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:0;padding:0;list-style:none}
.lane-track li{position:relative;font-size:.83rem;font-weight:500;padding:.42rem .75rem;
  border:1px solid var(--ln-i);border-radius:1px;color:var(--i2);white-space:nowrap}
.lane.com .lane-track li{border-color:rgba(107,158,159,.32);color:var(--i1)}
.lane-track li + li::before{content:"";position:absolute;left:-.45rem;top:50%;width:.45rem;
  height:1px;background:var(--ln-i)}
.lane.com .lane-track li + li::before{background:rgba(107,158,159,.35)}
.lane-term{display:flex;align-items:center;gap:.85rem;margin-top:1rem;padding-top:.9rem;
  border-top:1px solid var(--ln-i)}
.lane-term p{font-size:.9rem;color:var(--i2);line-height:1.4}
.lane-term p b{color:var(--i1);font-weight:600}
.lane-term .stop{width:34px;height:10px;flex:none;position:relative}
.lane-term .stop::before{content:"";position:absolute;left:0;top:4.5px;width:24px;height:1.5px;
  background:var(--i3)}
.lane-term .stop::after{content:"";position:absolute;right:0;top:0;width:2.5px;height:10px;
  background:var(--i3)}
.lane-term.open{border-top-color:rgba(107,158,159,.4)}
.lane-term.open p b{color:var(--sig-i)}
.lane-term .arrow{width:34px;height:10px;flex:none;position:relative}
.lane-term .arrow::before{content:"";position:absolute;left:0;top:4.5px;width:28px;height:1.5px;
  background:var(--sig-i)}
.lane-term .arrow::after{content:"";position:absolute;right:0;top:2px;width:6px;height:6px;
  border-top:1.5px solid var(--sig-i);border-right:1.5px solid var(--sig-i);transform:rotate(45deg)}
.entry-foot{margin-top:2rem;font-size:.86rem;color:var(--i3);max-width:58ch}

/* --- 9. MEDTECH PULSE ----------------------------------------------------
   Restrained by design: an editorial module, never a ticker. Two layers —
   a selective Apex commentary piece, and the aggregated public feed, each
   labelled so the distinction is unmistakable. */
.pulse{padding-block:clamp(3.5rem,7vw,6rem);background:var(--paper-2);
  border-top:1px solid var(--ln)}
.pulse-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;
  flex-wrap:wrap;padding-bottom:1.5rem;border-bottom:1.5px solid var(--ink);
  margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.pulse-hd h2{max-width:26ch}
.pulse-src{margin-top:.7rem;font-size:.86rem;color:var(--t2);max-width:60ch}
.live{display:inline-flex;align-items:center;gap:.5rem;flex:none;
  font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--t3)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--sig);flex:none;
  box-shadow:0 0 0 3px rgba(11,66,69,.15)}
.pulse-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.pulse-take{background:var(--paper);border:1px solid var(--ln);
  padding:clamp(1.4rem,2.6vw,2rem);border-top:2px solid var(--sig)}
.pulse-take h3{font-size:clamp(1.1rem,1.65vw,1.35rem);line-height:1.25;margin:.8rem 0 .5rem}
.pulse-meta{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.pulse-body{margin-top:1.1rem;font-size:.93rem;color:var(--t2);line-height:1.6}
.sample-flag{display:inline-block;font-variation-settings:"wdth" 78;font-size:.6rem;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sig);
  border:1px dashed rgba(11,66,69,.45);padding:.18rem .45rem;border-radius:1px;
  margin-right:.55rem;vertical-align:1px}
.pulse-feed ul{margin:.9rem 0 0;padding:0;list-style:none}
.pulse-feed li{padding-block:.95rem;border-bottom:1px solid var(--ln);
  transition:padding-left .22s var(--e)}
.pulse-feed li:hover{padding-left:.4rem}
.pulse-feed li:first-child{border-top:1px solid var(--ln)}
.pulse-feed h4{font-size:.95rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;margin:0}
.pulse-feed .src{display:block;margin-top:.35rem;font-variation-settings:"wdth" 78;
  font-size:.62rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.pulse-note{margin-top:1rem;font-size:.78rem;color:var(--t3);line-height:1.5}

/* --- 2D.4 RESPONSIVE ----------------------------------------------------- */
@media (max-width:1080px){
  .asym-grid,.entry-grid,.pulse-grid{grid-template-columns:1fr}
  .asym-fig{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:0}
  .asym-fig img{min-height:44vw}
  .entry-fig{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);min-height:46vw}
  .entry-fig::after{background:linear-gradient(180deg,rgba(20,24,27,.4),transparent 45%,rgba(20,24,27,.9))}
  .sit-in{grid-template-columns:1fr;gap:1.2rem}
  .sit-panel.alt .sit-say{order:1}
  .sit-panel.alt .sit-res{order:2;border-right:0;text-align:left;padding-right:0}
  .sit-res,.sit-panel.alt .sit-res{border-left:1px solid var(--ln);padding-left:1.1rem}
  .sit-panel.alt .sit-res p{margin-left:0}
}
@media (max-width:720px){
  .rail{display:none}
  .ev-lead{grid-template-columns:1fr;gap:.9rem}
  .ev-n{font-size:3.2rem}
  .ev-pair{grid-template-columns:1fr;gap:1.2rem}
  .lane-track li{white-space:normal}
}

/* ===========================================================================
   PHASE 2D.4b — final polish
   =========================================================================== */

/* --- HERO CTA DEFECT FIX --------------------------------------------------
   Root cause: .hero never carried .on-ink, so .btn-line resolved to the
   light-context rule (color:#14181B) and rendered near-black text on a dark
   scrimmed photograph — 1.58:1. The box was visible, the label was not.
   Fixed by declaring the hero's context (.hero.on-ink) rather than
   special-casing the button.

   Second-order fix: an outlined button over PHOTOGRAPHY cannot rely on the
   scrim alone, because the scrim varies and the image behind it will change.
   The ghost button now carries its own translucent ground, so its legibility
   is guaranteed independent of whatever image is dropped in later. */
.hero .btn-line{
  background:rgba(12,16,18,.58);
  border-color:rgba(240,238,234,.5);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.hero .btn-line:hover{
  background:rgba(12,16,18,.66);
  border-color:rgba(240,238,234,.9);
}

/* --- ONE ART-DIRECTION RULE FOR EVERY PHOTOGRAPH -------------------------
   Before: three images ungraded and two graded differently, which read as a
   gallery of stock rather than one commissioned set. Now a single grade is
   applied to every photograph on the site, defined once.

   Partial desaturation + slight contrast lift is the documentary treatment
   the benchmark set uses (CMR, Leica): it pulls six photographers toward one
   temperature, keeps skin and equipment readable, and lets the vermilion
   accent be the only saturated colour on the page. */
:root{ --grade:grayscale(.34) contrast(1.07) saturate(.9) brightness(.96); }
.hero-img img,
.asym-fig img,
.gap-fig img,
.entry-fig img,
.about-fig img{ filter:var(--grade); }

/* --- 4. FOUR SITUATIONS: a stepped editorial sequence --------------------
   2D.4 used alternating tone bands with a left/right column flip. That still
   read as "alternating rows", which is the pattern being audited out.

   Now the four situations STEP across the page — each indented one increment
   further than the last, joined by a single hairline that runs the length of
   the sequence. The eye travels diagonally rather than ping-ponging, no two
   items sit at the same starting position, and there is no tone banding at
   all. Each item also carries a commercial TRIGGER STATE — the condition
   Apex is called in under — drawn in the site's existing annotation language
   rather than as a decorative icon. */
.sit{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sit-hd{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;
  flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1.5px solid var(--ink);
  margin-bottom:clamp(2rem,4vw,3.2rem)}

.sit-seq{list-style:none;margin:0;padding:0;position:relative}
/* the spine the sequence steps away from */
.sit-seq::before{content:"";position:absolute;left:0;top:.6rem;bottom:2.6rem;width:1px;
  background:linear-gradient(180deg,var(--ln-2),var(--ln) 70%,transparent)}

.sit-item{
  --indent:calc(var(--step) * clamp(0.9rem, 2.6vw, 2.9rem));
  position:relative;
  display:grid;
  grid-template-columns:3.4rem minmax(0,1.42fr) minmax(0,1fr);
  gap:.5rem clamp(1.2rem,3vw,3rem);
  align-items:start;
  padding:clamp(1.6rem,2.8vw,2.4rem) 0 clamp(1.6rem,2.8vw,2.4rem) var(--indent);
  border-bottom:1px solid var(--ln);
  transition:padding-left .3s var(--e);
}
.sit-item:last-child{border-bottom:0}
.sit-item:hover{padding-left:calc(var(--indent) + .5rem)}
/* short connector from the spine to each item, lengthening with the indent */
.sit-item::before{content:"";position:absolute;left:0;top:2.1rem;height:1px;
  width:var(--indent);background:var(--ln-2)}
.sit-item:first-child::before{display:none}

.sit-n{font-variation-settings:"wdth" 78;font-size:.72rem;font-weight:700;
  letter-spacing:.14em;color:var(--sig);padding-top:.5rem}
.sit-say{font-size:clamp(1.18rem,2.05vw,1.78rem);font-weight:500;letter-spacing:-.026em;
  line-height:1.24;color:var(--t1);text-wrap:pretty}
/* trigger state: the commercial condition, not an icon */
.sit-state{display:flex;align-items:center;gap:.55rem;margin-top:1rem;
  font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3)}
.sit-state i{width:16px;height:1px;background:var(--sig);flex:none;position:relative}
.sit-state i::after{content:"";position:absolute;right:0;top:-2px;width:1px;height:5px;background:var(--sig)}
.sit-res{padding-top:.35rem}
.sit-res p{margin-top:.6rem;font-size:.92rem;color:var(--t2);line-height:1.55;max-width:38ch}
.sit-foot{margin-top:clamp(1.8rem,3vw,2.6rem);font-size:.95rem;color:var(--t2);max-width:52ch}

@media (max-width:1000px){
  .sit-item{grid-template-columns:2.8rem minmax(0,1fr);row-gap:.9rem}
  .sit-res{grid-column:2}
}
@media (max-width:720px){
  /* the step collapses on a phone — it would eat the measure. The spine and
     trigger states stay, so the section keeps its identity. */
  .sit-item{--indent:0rem;padding-left:0}
  .sit-item:hover{padding-left:.35rem}
  .sit-item::before{display:none}
  .sit-seq::before{display:none}
}

/* --- WORDMARK ------------------------------------------------------------
   The previous mark was a vertical rule crossed by a horizontal one. At
   16px that reads as a MEDICAL CROSS — the exact motif the brief rules out —
   and it looked provisional next to the rest of the page.

   Resolution: remove the mark and let the identity come from the type system
   the site already runs on. "Apex" at full width and weight 700; "Medical" at
   the condensed width axis (wdth 78) in caps, separated by a short vermilion
   rule. The width-axis contrast IS the brand device — it recurs in every
   technical label on the site, so the wordmark is made of the same material
   as the page rather than sitting on top of it.

   Alternative considered (see review §7): keeping a mark, but as a single
   calibration tick echoing the hero rail. Rejected for now — one strong
   typographic lockup beats a wordmark plus a small ambiguous glyph. */
.brand{display:inline-flex;align-items:baseline;gap:.5rem;text-decoration:none;
  line-height:1;white-space:nowrap}
.bm-a{font-size:1.2rem;font-weight:700;letter-spacing:-.045em;
  font-variation-settings:"wdth" 100}
.bm-r{align-self:center;width:11px;height:1.5px;background:var(--sig-i);flex:none;
  transition:width .28s var(--e)}
.bm-m{font-variation-settings:"wdth" 78;font-size:.78rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;opacity:.82}
.brand:hover .bm-r{width:20px}
/* on paper grounds (footer/mobile menu inherit ink) the rule takes the darker signal */
.foot .bm-r{background:var(--sig)}

/* --- CONVERSION: what a first conversation is ----------------------------
   The design was scoring above its conversion confidence. The gap was not the
   button — it was that nothing said what happens after you press it. This
   removes that uncertainty in four lines, without a funnel, a calendar-first
   flow or any urgency device. */
.first-call{margin-top:1.9rem;padding:1.2rem 1.4rem;border:1px solid var(--ln-i);
  border-left:2px solid var(--sig-i);max-width:52ch;background:rgba(240,238,234,.035)}
.fc-lbl{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sig-i);margin-bottom:.55rem}
.fc-body{font-size:.92rem;line-height:1.6;color:var(--i2)}
.contact .sub{margin-top:1.15rem}

/* --- NAV: light refinement ----------------------------------------------
   Not a redesign. Slightly tighter stuck-state height, and the CTA now sits
   at the same optical weight as the wordmark rather than shouting. */
.nav.stuck .nav-in{min-height:60px}
.nav-r .btn{padding:.62rem 1.05rem;font-size:.85rem}
.nav-links a{font-size:.855rem;letter-spacing:-.005em}

/* ===========================================================================
   PHASE 2E — page-level architectures
   The brand system from 2D.4b is shared. The COMPOSITIONS are not: each page
   below uses a structurally different layout device so the site never reads as
   one template repeated seven times.

     Services      sticky index rail + long-form case files
     Market Entry  vertical two-path system + decision sequence
     How We Work   centre-axis process spine
     Insights      dense editorial index + live feed
     About         chronological career arc + portrait
     Contact       split form composition
   =========================================================================== */

/* --- shared: compact page masthead (NOT the homepage hero) ---------------
   Pages other than Home open with a typographic masthead on ink — no
   full-bleed photograph. That alone stops every page starting the same way. */
.mast{background:var(--ink);color:var(--i1);padding-block:clamp(6.5rem,10vw,9rem) clamp(2.5rem,5vw,4rem);
  position:relative;overflow:hidden}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ln-i)}
.mast-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.mast h1{font-size:clamp(2.1rem,4.4vw,3.5rem);letter-spacing:-.034em;max-width:17ch}
.mast h1 span{color:var(--sig-i)}
.mast-sub{margin-top:1.2rem;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.55;
  color:var(--i2);max-width:52ch}
.mast-meta{border-left:1px solid var(--ln-i);padding-left:1.3rem}
.mast-meta dt{font-variation-settings:"wdth" 78;font-size:.64rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--i3);margin-bottom:.2rem}
.mast-meta dd{margin:0 0 .95rem;font-size:.9rem;color:var(--i1)}
.crumb{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--i3);margin-bottom:1.1rem}
.crumb a{color:var(--i3)}.crumb a:hover{color:var(--sig-i)}

/* --- nav: active state --------------------------------------------------- */
.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.mnav a[aria-current="page"]{color:var(--sig-i)}

/* ═══════════════════ SERVICES — sticky index + case files ═══════════════ */
.svc-wrap{padding-block:clamp(3rem,6vw,5rem)}
.svc-layout{display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.svc-rail{position:sticky;top:5.5rem}
.svc-rail p{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--t3);margin-bottom:1rem}
.svc-rail ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.svc-rail li{border-bottom:1px solid var(--ln)}
.svc-rail a{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;padding:.85rem 0;
  font-size:.92rem;font-weight:600;letter-spacing:-.015em;color:var(--t2);
  transition:color .2s var(--e),padding-left .25s var(--e)}
.svc-rail a span{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;
  letter-spacing:.1em;color:var(--sig);padding-top:.2rem}
.svc-rail a:hover{color:var(--t1);padding-left:.35rem}

.case{padding-block:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--ln)}
.case:first-child{padding-top:0}
.case:last-child{border-bottom:0}
.case-say{font-size:clamp(1.25rem,2.3vw,1.95rem);font-weight:500;letter-spacing:-.028em;
  line-height:1.22;max-width:26ch;text-wrap:pretty}
.case-name{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.case-name h2{font-variation-settings:"wdth" 78;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sig)}
.case-name i{flex:1;height:1px;background:var(--ln);font-style:normal}
.case-body{margin-top:1.6rem;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.2rem,2.5vw,2.4rem)}
.case-block h3{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--t1);margin-bottom:.7rem}
.case-block p,.case-block li{font-size:.91rem;color:var(--t2);line-height:1.55}
.case-block ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.case-block li{padding-left:1rem;position:relative}
.case-block li::before{content:"";position:absolute;left:0;top:.65em;width:5px;height:1px;
  background:var(--sig)}
/* the honesty block — what Apex does NOT claim */
.case-not{margin-top:1.5rem;padding:.95rem 1.15rem;border:1px dashed var(--ln-2);
  background:rgba(11,66,69,.028)}
.case-not h3{color:var(--sig)}
.case-not p{font-size:.87rem}
.case-foot{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;align-items:center}
.case-eng{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}

/* ═══════════════════ MARKET ENTRY — vertical two-path system ════════════ */
.paths{background:var(--ink);color:var(--i1);padding-block:clamp(3.5rem,7vw,6rem)}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--ln-i)}
.path{padding:clamp(1.5rem,3vw,2.4rem) clamp(1.2rem,2.5vw,2rem) clamp(1.5rem,3vw,2.4rem) 0}
.path + .path{border-left:1px solid var(--ln-i);padding-left:clamp(1.4rem,3vw,2.6rem);padding-right:0}
.path-lbl{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--i3);margin-bottom:.4rem}
.path.apex .path-lbl{color:var(--sig-i)}
.path h3{font-size:1.2rem;margin-bottom:1.4rem}
.path ol{list-style:none;margin:0;padding:0;position:relative}
.path ol::before{content:"";position:absolute;left:5px;top:.7rem;bottom:1.6rem;width:1px;
  background:var(--ln-i)}
.path.apex ol::before{background:rgba(107,158,159,.4)}
.path li{position:relative;padding:0 0 1.05rem 1.7rem;font-size:.93rem;color:var(--i2)}
.path li::before{content:"";position:absolute;left:0;top:.42em;width:11px;height:11px;
  border-radius:50%;border:1.5px solid var(--i3);background:var(--ink)}
.path.apex li::before{border-color:var(--sig-i)}
.path.apex li{color:var(--i1)}
/* the terminal states */
.path-end{margin-top:.4rem;padding:.9rem 1rem;border:1px solid var(--ln-i);
  display:flex;align-items:center;gap:.8rem}
.path-end .bar{width:26px;height:10px;flex:none;position:relative}
.path-end .bar::before{content:"";position:absolute;left:0;top:4.5px;width:18px;height:1.5px;background:var(--i3)}
.path-end .bar::after{content:"";position:absolute;right:0;top:0;width:2.5px;height:10px;background:var(--i3)}
.path-end p{font-size:.88rem;color:var(--i2)}
.path-end p b{display:block;color:var(--i1)}
.path.apex .path-end{border-color:rgba(107,158,159,.4);background:rgba(107,158,159,.06)}
.path.apex .path-end .bar::before{background:var(--sig-i);width:22px}
.path.apex .path-end .bar::after{right:0;top:2px;width:6px;height:6px;background:none;
  border-top:1.5px solid var(--sig-i);border-right:1.5px solid var(--sig-i);transform:rotate(45deg)}
.path.apex .path-end p b{color:var(--sig-i)}

/* decision sequence — the depth layer, distinct from the lanes */
.dseq{padding-block:clamp(3.5rem,7vw,6rem)}
.dseq-list{counter-reset:d;margin-top:clamp(2rem,4vw,3rem)}
.dseq-item{counter-increment:d;display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr);
  gap:1rem clamp(1.2rem,3vw,2.8rem);padding-block:1.5rem;border-bottom:1px solid var(--ln);
  align-items:start}
.dseq-item::before{content:counter(d,decimal-leading-zero);font-variation-settings:"wdth" 78;
  font-size:.72rem;font-weight:700;letter-spacing:.12em;color:var(--sig);padding-top:.35rem}
.dseq-item h3{font-size:1.08rem;letter-spacing:-.02em}
.dseq-item .q{margin-top:.5rem;font-size:.9rem;color:var(--t2);font-style:italic}
.dseq-item .a{font-size:.9rem;color:var(--t2);line-height:1.55}

/* Canada / US contrast */
.cus{background:var(--paper-2);padding-block:clamp(3.5rem,7vw,6rem)}
.cus-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.cus-col{background:var(--paper);border:1px solid var(--ln);padding:clamp(1.4rem,2.6vw,2rem)}
.cus-col h3{font-size:1.15rem;margin-bottom:.3rem}
.cus-col .sub{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sig);margin-bottom:1.1rem}
.cus-col dl{margin:0;display:grid;gap:.85rem}
.cus-col dt{font-size:.82rem;font-weight:700;color:var(--t1)}
.cus-col dd{margin:.15rem 0 0;font-size:.88rem;color:var(--t2);line-height:1.5}

/* ═══════════════════ HOW WE WORK — centre-axis spine ════════════════════ */
.spine{padding-block:clamp(3.5rem,7vw,6rem);position:relative}
.spine-track{position:relative;margin-top:clamp(2rem,4vw,3.5rem)}
.spine-track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--ln-2) 6%,var(--ln-2) 94%,transparent);
  transform:translateX(-.5px)}
.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  gap:clamp(1.2rem,3vw,3rem);align-items:center;padding-block:clamp(1.4rem,2.8vw,2.2rem)}
.stage-node{width:13px;height:13px;border-radius:50%;background:var(--paper);
  border:1.5px solid var(--ln-2);position:relative;z-index:1}
.stage.key .stage-node{border-color:var(--sig);box-shadow:0 0 0 5px rgba(11,66,69,.12)}
.stage-body{padding-block:.2rem;grid-row:1}
.stage:nth-child(odd) .stage-body{grid-column:1;text-align:right}
.stage:nth-child(odd) .stage-aside{grid-column:3}
.stage:nth-child(even) .stage-body{grid-column:3}
.stage:nth-child(even) .stage-aside{grid-column:1;text-align:right}
.stage-aside{grid-row:1}
.stage-k{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  color:var(--sig);display:block;margin-bottom:.45rem}
.stage-body h3{font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.024em}
.stage-body p{margin-top:.6rem;font-size:.92rem;color:var(--t2);line-height:1.55}
.stage-aside{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}

/* AI position block — ink, restrained, subordinate */
.aiblock{background:var(--ink);color:var(--i1);padding-block:clamp(3.5rem,7vw,6rem)}
.ai-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
.ai-does{border-top:1px solid var(--ln-i);margin-top:1.6rem}
.ai-does div{display:grid;grid-template-columns:auto 1fr;gap:1rem;padding-block:.9rem;
  border-bottom:1px solid var(--ln-i);align-items:baseline}
.ai-does .y{font-variation-settings:"wdth" 78;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sig-i);white-space:nowrap}
.ai-does .n{color:var(--i3)}
.ai-does p{font-size:.9rem;color:var(--i2)}
.ai-note{margin-top:1.6rem;padding-left:1rem;border-left:2px solid var(--sig-i);
  font-size:.92rem;color:var(--i2);line-height:1.6}

/* ═══════════════════ INSIGHTS — dense editorial index ══════════════════ */
.ins-layout{padding-block:clamp(3rem,6vw,5rem);display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);
  align-items:start}
.ins-sec-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  flex-wrap:wrap;padding-bottom:1rem;border-bottom:1.5px solid var(--ink);margin-bottom:1.4rem}
.ins-sec-hd h2{font-size:clamp(1.35rem,2.2vw,1.75rem);letter-spacing:-.026em}
.art{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.4rem 1.5rem;
  padding-block:1.35rem;border-bottom:1px solid var(--ln);align-items:baseline;
  transition:padding-left .22s var(--e)}
.art:hover{padding-left:.4rem}
.art .cat{font-variation-settings:"wdth" 78;font-size:.64rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sig)}
.art h3{font-size:1.02rem;letter-spacing:-.02em;line-height:1.3}
.art p{grid-column:2;font-size:.88rem;color:var(--t2);margin-top:.3rem}
.art .status{grid-column:2;margin-top:.5rem;font-variation-settings:"wdth" 78;font-size:.62rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
/* editorial section intro — a deliberate statement, not a placeholder,
   so no dashed "TODO" border: a solid left rule in the signal colour */
.ins-intro{padding:.2rem 0 1.6rem 1.1rem;border-left:2px solid var(--sig);margin-bottom:.4rem}
.ins-intro .body-lg{margin-top:.3rem;max-width:52ch}

/* live feed panel (sidebar on Insights) */
.feed-panel{background:var(--paper-2);border:1px solid var(--ln);padding:clamp(1.2rem,2.4vw,1.7rem)}
.feed-panel .live{margin-bottom:.9rem}
.feed-list{list-style:none;margin:0;padding:0}
.feed-list li{padding-block:.85rem;border-bottom:1px solid var(--ln)}
.feed-list li:first-child{border-top:1px solid var(--ln)}
.feed-list li:last-child{border-bottom:0}
.feed-list a{display:block;font-size:.9rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;
  color:var(--t1);transition:color .18s var(--e)}
.feed-list a:hover{color:var(--sig)}
.feed-list .meta{display:block;margin-top:.35rem;font-variation-settings:"wdth" 78;font-size:.6rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.feed-state{font-size:.85rem;color:var(--t3);line-height:1.55;padding-block:.6rem}
.feed-foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--ln);
  font-size:.75rem;color:var(--t3);line-height:1.5}

/* ═══════════════════ ABOUT — career arc + portrait ═════════════════════ */
.bio{padding-block:clamp(3.5rem,7vw,6rem)}
.bio-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* portrait placeholder — deliberately NOT a stock executive */
.portrait{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,var(--paper-2),#DCD8D0);
  border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.5rem}
.portrait::after{content:"";position:absolute;left:0;top:0;width:44px;height:2px;background:var(--sig)}
.portrait p{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t3);line-height:1.8}
.portrait p b{display:block;color:var(--t1)}
.bio-caption{margin-top:.9rem;font-size:.82rem;color:var(--t3);line-height:1.5}

.arc{margin-top:clamp(2.5rem,5vw,4rem);position:relative;border-top:1px solid var(--ln)}
.arc-item{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:.4rem clamp(1.2rem,3vw,2.5rem);
  padding-block:1.5rem;border-bottom:1px solid var(--ln);align-items:baseline}
.arc-when{font-variation-settings:"wdth" 78;font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sig)}
.arc-item h3{font-size:1.05rem;letter-spacing:-.02em}
.arc-item .org{display:block;margin-top:.2rem;font-size:.86rem;color:var(--t3);font-weight:600}
.arc-item p{grid-column:2;margin-top:.55rem;font-size:.91rem;color:var(--t2);line-height:1.55;max-width:56ch}
.arc-note{margin-top:1.6rem;font-size:.82rem;color:var(--t3);line-height:1.55;max-width:60ch}

/* ═══════════════════ CONTACT — split form composition ══════════════════ */
.contact-page{padding-block:clamp(3rem,6vw,5rem)}
.cf-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.form{display:grid;gap:1.05rem}
.field{display:grid;gap:.4rem}
.field label{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--t1)}
.field label .opt{color:var(--t3);font-weight:600}
.field input,.field select,.field textarea{
  font:inherit;font-size:.95rem;color:var(--t1);background:var(--surf,#fff);
  border:1px solid var(--ln-2);border-radius:1px;padding:.72rem .85rem;width:100%;
  transition:border-color .18s var(--e),box-shadow .18s var(--e)}
.field textarea{resize:vertical;min-height:8rem;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--sig);box-shadow:0 0 0 3px rgba(11,66,69,.13)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.form-note{font-size:.8rem;color:var(--t3);line-height:1.5}
.form-status{font-size:.9rem;padding:.75rem .9rem;border-radius:1px;display:none}
.form-status[data-state="ok"]{display:block;background:rgba(10,115,87,.09);
  border:1px solid rgba(10,115,87,.35);color:#0A5C46}
.form-status[data-state="err"]{display:block;background:rgba(166,54,44,.07);
  border:1px solid rgba(166,54,44,.35);color:var(--err)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cf-side > * + *{margin-top:1.6rem}
.cf-card{border:1px solid var(--ln);padding:clamp(1.2rem,2.4vw,1.7rem);background:var(--paper-2)}
.cf-card h2{font-size:1.08rem;letter-spacing:-.022em;margin-bottom:.7rem}
.cf-card p{font-size:.91rem;color:var(--t2);line-height:1.6}
.cf-card.accent{border-left:2px solid var(--sig);background:var(--paper)}
.cf-steps{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.7rem}
.cf-steps li{display:grid;grid-template-columns:1.5rem 1fr;gap:.7rem;font-size:.9rem;color:var(--t2)}
.cf-steps b{font-variation-settings:"wdth" 78;font-size:.66rem;font-weight:700;letter-spacing:.1em;
  color:var(--sig);padding-top:.22rem}
.cf-book{border:1px dashed var(--ln-2);padding:1.1rem 1.25rem;background:rgba(0,0,0,.015)}
.cf-book .tech{margin-bottom:.5rem}
.cf-book p{font-size:.87rem;color:var(--t2);line-height:1.55}

/* ═══════════════════ shared small pieces ═══════════════════════════════ */
.pg-cta{background:var(--ink);color:var(--i1);padding-block:clamp(3rem,6vw,5rem)}
.pg-cta-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:end}
.pg-cta h2{font-size:clamp(1.6rem,2.9vw,2.4rem);letter-spacing:-.03em;max-width:20ch}
.pg-cta p{margin-top:.9rem;color:var(--i2);font-size:1rem;max-width:46ch}
.pg-cta .row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}

/* ═══════════════════ RESPONSIVE ════════════════════════════════════════ */
@media (max-width:1080px){
  .mast-in{grid-template-columns:1fr;gap:1.6rem}
  .mast-meta{border-left:0;border-top:1px solid var(--ln-i);padding-left:0;padding-top:1.2rem}
  .mast-meta dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 2rem}
  .svc-layout,.ins-layout,.bio-grid,.cf-grid,.ai-grid,.pg-cta-grid{grid-template-columns:1fr}
  .svc-rail{position:static}
  .svc-rail ol{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .case-body{grid-template-columns:1fr}
  .cus-grid{grid-template-columns:1fr}
  .bio-grid .portrait{max-width:320px}
}
@media (max-width:820px){
  .paths-grid{grid-template-columns:1fr}
  .path + .path{border-left:0;border-top:1px solid var(--ln-i);padding-left:0;padding-top:1.6rem;margin-top:1.4rem}
  .dseq-item{grid-template-columns:auto minmax(0,1fr);row-gap:.5rem}
  .dseq-item .a{grid-column:2}
  /* the centre axis becomes a left rail on narrow screens — same language,
     re-expressed rather than squashed */
  .spine-track::before{left:6px;transform:none}
  .stage{grid-template-columns:auto minmax(0,1fr);gap:.9rem 1.1rem;align-items:start}
  .stage .stage-node{margin-top:.35rem}
  .stage:nth-child(odd) .stage-body,.stage:nth-child(even) .stage-body{grid-column:2;text-align:left}
  .stage:nth-child(odd) .stage-aside,.stage:nth-child(even) .stage-aside{grid-column:2;text-align:left;margin-top:.5rem}
  .art{grid-template-columns:1fr;row-gap:.3rem}
  .art p,.art .status{grid-column:1}
  .arc-item{grid-template-columns:1fr;row-gap:.25rem}
  .arc-item p{grid-column:1}
}
@media (max-width:620px){
  .field-row{grid-template-columns:1fr}
  .svc-rail ol{grid-template-columns:1fr}
  .pg-cta .row .btn{width:100%;justify-content:center}
}