/* ========================================================================
   1. TOKENS
   ======================================================================== */
:root{
  /* --- raw palette: green ramp ------------------------------------- */
  --g-50:#EDFAF3;
  --g-100:#DDF5E9;   /* Soft Mint */
  --g-200:#C2E9D5;
  --g-300:#A9CFBF;   /* muted text on deep surfaces (7.2:1) */
  --g-500:#18A66A;   /* Growth Green. GRAPHIC USE ONLY */
  --g-600:#128D59;
  --g-700:#0D7047;   /* green text + light-surface CTA (6.1:1 on white) */
  --g-800:#0A5A39;
  --g-900:#0B3D2E;   /* Primary Deep Green */
  --g-950:#07281E;   /* deepest ink-green, section floors */

  /* --- raw palette: warm neutrals ----------------------------------- */
  --n-0:#FFFFFF;
  --n-50:#F7F8F4;    /* Warm Off-White */
  --n-100:#EFF0EA;
  --n-200:#E3E5DD;
  --n-300:#CBCEC5;
  --n-400:#A3A79D;
  --n-500:#7C8178;
  --n-600:#5B6058;   /* secondary text (6.0:1 on canvas) */
  --n-700:#3E433C;
  --n-900:#111814;   /* Near Black */

  /* --- semantic: default (light surfaces) --------------------------- */
  --bg:var(--n-50);
  --bg-raised:var(--n-0);
  --bg-sunken:var(--n-100);
  --text:var(--n-900);
  --text-2:var(--n-600);
  --text-3:var(--n-500);
  --text-brand:var(--g-700);
  --line:var(--n-200);
  --line-strong:var(--n-300);
  --line-brand:color-mix(in srgb, var(--g-500) 32%, transparent);

  /* --- elevation: green-tinted, never neutral grey ------------------ */
  --sh-1:0 1px 2px rgba(11,61,46,.05), 0 1px 1px rgba(11,61,46,.04);
  --sh-2:0 10px 26px -10px rgba(11,61,46,.14), 0 2px 6px -2px rgba(11,61,46,.06);
  --sh-3:0 34px 64px -28px rgba(11,61,46,.26), 0 10px 22px -14px rgba(11,61,46,.12);
  --sh-float:0 22px 48px -20px rgba(11,61,46,.28), 0 4px 10px -4px rgba(11,61,46,.10);

  /* --- radius: SEMANTIC. role determines value ---------------------- */
  --r-xs:4px;    /* tags, readout pills, inline chrome */
  --r-sm:8px;    /* inputs, small controls */
  --r-md:10px;   /* buttons — intentionally not pill */
  --r-lg:16px;   /* cards, panels */
  --r-xl:22px;   /* device + browser frames, large surfaces */
  --r-2xl:30px;  /* full-bleed feature slabs only */

  /* --- spacing: 4px base ------------------------------------------- */
  --s-1:.25rem;  --s-2:.5rem;   --s-3:.75rem;  --s-4:1rem;
  --s-5:1.25rem; --s-6:1.5rem;  --s-8:2rem;    --s-10:2.5rem;
  --s-12:3rem;   --s-16:4rem;   --s-20:5rem;   --s-24:6rem;

  /* --- layout ------------------------------------------------------- */
  --wrap:1240px;
  --wrap-narrow:760px;   /* prose: keeps measure under 72ch */
  --wrap-wide:1440px;
  --gutter:clamp(1.25rem,5vw,2.5rem);
  --sec-y:clamp(4.5rem,3rem + 7vw,8.5rem);
  --sec-y-tight:clamp(3rem,2rem + 4vw,5rem);

  /* --- motion ------------------------------------------------------- */
  --e-out:cubic-bezier(.22,.61,.36,1);      /* UI response */
  --e-enter:cubic-bezier(.16,1,.30,1);      /* reveals, entrances */
  --e-inout:cubic-bezier(.65,0,.35,1);      /* pinned / scrubbed */
  --d-1:140ms;  /* hover, press */
  --d-2:240ms;  /* state change */
  --d-3:420ms;  /* layout, expand */
  --d-reveal:640ms;
  --drift:9s;   /* tier 1 floating UI loop */

  /* --- type --------------------------------------------------------- */
  --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-display-1:clamp(2.75rem,1.1rem + 6.6vw,5.25rem);
  --t-display-2:clamp(2.25rem,1.3rem + 4.2vw,3.9rem);
  --t-hero:clamp(2.25rem,.95rem + 3.1vw,3.45rem);  /* hero h1: set for a 5-col measure */
  --t-h2:clamp(1.85rem,1.2rem + 2.6vw,3rem);
  --t-h3:clamp(1.35rem,1.1rem + 1.2vw,1.95rem);
  --t-h4:1.125rem;
  --t-lead:clamp(1.0625rem,1rem + .45vw,1.3125rem);
  --t-body:1.0625rem;   /* 17px — mobile legibility floor */
  --t-sm:.9375rem;
  --t-xs:.8125rem;
  --t-readout:.75rem;

  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--g-600);
}

/* Brand-locked. The page is art-directed and does not invert with the
   viewer's OS theme. Dark SECTIONS are a compositional device (.sec--deep). */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --bg:var(--n-50); --text:var(--n-900); color-scheme:light; }
}
:root[data-theme="dark"]{ --bg:var(--n-50); --text:var(--n-900); color-scheme:light; }

/* Surface inversion — applied by .sec--deep / .sec--ink / .on-dark. */
.on-dark{
  --bg:var(--g-900);
  --bg-raised:color-mix(in srgb,var(--n-0) 7%,var(--g-900));
  --bg-sunken:var(--g-950);
  --text:var(--n-0);
  --text-2:var(--g-300);
  --text-3:color-mix(in srgb,var(--g-300) 72%,transparent);
  --text-brand:var(--g-500);
  --line:color-mix(in srgb,var(--n-0) 13%,transparent);
  --line-strong:color-mix(in srgb,var(--n-0) 24%,transparent);
  --line-brand:color-mix(in srgb,var(--g-500) 46%,transparent);
  --sh-1:none; --sh-2:none;
  --sh-3:0 40px 80px -40px rgba(0,0,0,.6);
  --sh-float:0 30px 60px -30px rgba(0,0,0,.55);
  --focus:0 0 0 2px var(--g-950), 0 0 0 4px var(--g-500);
}

/* ========================================================================
   2. BASE
   ======================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--n-50);
  color:var(--text);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;           /* hard stop on horizontal overflow */
}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
img,svg,video{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--focus);
  border-radius:var(--r-xs);
}

::selection{background:var(--g-200);color:var(--g-950)}
.on-dark ::selection{background:var(--g-500);color:var(--g-950)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:var(--s-4);top:-4rem;z-index:99;
  background:var(--g-900);color:#fff;padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md);text-decoration:none;font-weight:600;
  transition:top var(--d-2) var(--e-out);
}
.skip-link:focus-visible{top:var(--s-4)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ========================================================================
   3. LAYOUT
   ======================================================================== */
.sec{padding-block:var(--sec-y);position:relative;background:var(--bg);color:var(--text)}
.sec--tight{padding-block:var(--sec-y-tight)}
.sec--flush{padding-block:0}
.sec--canvas{--bg:var(--n-50)}
.sec--paper{--bg:var(--n-0)}
.sec--mint{--bg:var(--g-100)}
.sec--deep{background:var(--g-900)}
.sec--ink{background:var(--g-950)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.wrap--wide{max-width:var(--wrap-wide)}

/* 12-col editorial grid. Sections choose an offset; they do not all start
   at the same column — that repetition is what makes pages feel templated. */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-6) var(--s-6)}
/* v1.1 fix: span is set on grid-column-END only. The v1.0 shorthand
   (grid-column:span N) also set the START, so any .col-* combined with a
   .start-* collapsed the item to a single column. Same authoring API. */
.col-4{grid-column-end:span 4}
.col-5{grid-column-end:span 5}
.col-6{grid-column-end:span 6}
.col-7{grid-column-end:span 7}
.col-8{grid-column-end:span 8}
.col-12{grid-column-end:span 12}
.start-2{grid-column-start:2}
.start-6{grid-column-start:6}
.start-7{grid-column-start:7}
.start-9{grid-column-start:9}
@media (max-width:860px){
  .grid{gap:var(--s-5)}
  .col-4,.col-5,.col-6,.col-7,.col-8{grid-column-end:span 12}
  .start-2,.start-6,.start-7,.start-9{grid-column-start:1}
}

.stack>*+*{margin-top:var(--s-4)}
.stack-lg>*+*{margin-top:var(--s-8)}
.cluster{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ========================================================================
   4. TYPOGRAPHY
   ======================================================================== */
.display-1{font-size:var(--t-display-1);line-height:.96;letter-spacing:-.032em;font-weight:600;text-wrap:balance}
.display-2{font-size:var(--t-display-2);line-height:1.02;letter-spacing:-.028em;font-weight:600;text-wrap:balance}
.h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.024em;font-weight:600;text-wrap:balance}
.h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.016em;font-weight:600}
.h4{font-size:var(--t-h4);line-height:1.35;letter-spacing:-.008em;font-weight:600}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--text-2);max-width:56ch}
.prose{max-width:68ch;color:var(--text-2)}
.sm{font-size:var(--t-sm);line-height:1.6}
.xs{font-size:var(--t-xs);line-height:1.55;color:var(--text-3)}
.muted{color:var(--text-2)}
.brand{color:var(--text-brand)}
.tnum{font-variant-numeric:tabular-nums}

/* Instrument readout. Data components only — never section chrome. */
.readout{
  font-family:var(--mono);font-size:var(--t-readout);font-weight:500;
  letter-spacing:.02em;color:var(--text-3);font-variant-numeric:tabular-nums;
}

.headline-block{max-width:20ch}
.headline-wide{max-width:26ch}

/* ========================================================================
   5. BUTTONS
   ======================================================================== */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--line-strong);
  display:inline-flex;align-items:center;gap:.6em;
  padding:.85rem 1.35rem;min-height:48px;          /* thumb target */
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--r-md);
  font-size:var(--t-sm);font-weight:600;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;
  transition:background var(--d-1) var(--e-out),
             border-color var(--d-1) var(--e-out),
             transform var(--d-1) var(--e-out),
             box-shadow var(--d-2) var(--e-out);
}
.btn__arrow{
  display:inline-block;
  transition:transform var(--d-2) var(--e-out);
  will-change:transform;
}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--down:hover .btn__arrow{transform:translateY(3px)}
.btn:active{transform:translateY(1px)}

.btn--primary{--btn-bg:var(--g-700);--btn-fg:#fff;--btn-bd:var(--g-700);box-shadow:var(--sh-2)}
.btn--primary:hover{--btn-bg:var(--g-800);--btn-bd:var(--g-800);box-shadow:var(--sh-3)}
.on-dark .btn--primary{--btn-bg:var(--g-500);--btn-fg:var(--g-950);--btn-bd:var(--g-500)}
.on-dark .btn--primary:hover{--btn-bg:var(--g-200);--btn-bd:var(--g-200)}

.btn--secondary{--btn-bg:transparent;--btn-fg:var(--text);--btn-bd:var(--line-strong)}
.btn--secondary:hover{--btn-bd:var(--g-600);--btn-bg:color-mix(in srgb,var(--g-500) 7%,transparent)}

.btn--quiet{--btn-bd:transparent;padding-inline:.35rem;min-height:40px}
.btn--quiet:hover{--btn-fg:var(--text-brand)}

.btn--lg{padding:1.05rem 1.7rem;min-height:56px;font-size:var(--t-body)}
.btn--sm{padding:.6rem 1rem;min-height:40px;font-size:var(--t-xs)}
.btn--block{width:100%;justify-content:center}

/* ========================================================================
   6. SURFACES + COMPONENTS
   ======================================================================== */
.brandmark{display:flex;align-items:center;gap:.6rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.brandmark i{width:22px;height:22px;border-radius:7px;background:var(--g-900);position:relative;display:block;flex:none}
.brandmark i::after{content:"";position:absolute;inset:6px 6px auto auto;width:7px;height:7px;border-radius:50%;background:var(--g-500)}

.card{
  background:var(--bg-raised);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6);
  box-shadow:var(--sh-1);
}
.card--raised{box-shadow:var(--sh-2);border-color:transparent}
.card--quiet{background:transparent;box-shadow:none}
.card--interactive{transition:transform var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out)}
.card--interactive:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--line-brand)}

.panel{background:var(--bg-sunken);border-radius:var(--r-xl);padding:clamp(1.5rem,4vw,var(--s-12))}

.tag{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.3rem .6rem;border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--g-500) 12%,transparent);
  color:var(--text-brand);font-size:var(--t-xs);font-weight:600;
}
.on-dark .tag{background:color-mix(in srgb,var(--g-500) 18%,transparent)}

/* Floating metric card — the recurring "machinery" object (sections 04–10) */
.metric{
  background:var(--bg-raised);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-float);
  min-width:190px;
}
.metric__value{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);line-height:1;letter-spacing:-.03em;font-weight:600;font-variant-numeric:tabular-nums}
.metric__label{margin-top:.35rem;font-size:var(--t-xs);color:var(--text-2)}
.metric__delta{color:var(--g-700)}
.on-dark .metric__delta{color:var(--g-500)}

/* Browser frame — wrapper for real performance screenshots (section 05) and
   for the practice-website interface metaphor in the hero. */
.frame{
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--bg-raised);box-shadow:var(--sh-3);
}
.frame__bar{
  display:flex;align-items:center;gap:var(--s-3);
  padding:.7rem var(--s-4);border-bottom:1px solid var(--line);
  background:var(--bg-sunken);
}
.frame__dots{display:flex;gap:6px;flex:none}
.frame__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong);display:block}
.frame__url{
  flex:1;min-width:0;padding:.25rem .65rem;border-radius:var(--r-xs);
  background:var(--bg-raised);border:1px solid var(--line);
  font-family:var(--mono);font-size:var(--t-readout);color:var(--text-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Media placeholder. Intrinsic ratio = zero CLS (sections 05/06). */
.slot{
  position:relative;aspect-ratio:var(--ratio,16/10);
  background:
    linear-gradient(to right,var(--line) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(to bottom,var(--line) 1px,transparent 1px) 0 0/44px 44px,
    var(--bg-sunken);
  display:grid;place-content:center;gap:.4rem;text-align:center;padding:var(--s-4);
}
.slot__id{font-family:var(--mono);font-size:var(--t-readout);color:var(--text-2);letter-spacing:.04em}
.slot__note{font-size:var(--t-xs);color:var(--text-3);max-width:34ch}
.slot--video{--ratio:4/5}
.caption{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--text-3);max-width:50ch}

/* Connective layer — node/link chain (section 03) */
.node{
  width:var(--node,52px);aspect-ratio:1;border-radius:50%;
  display:grid;place-content:center;flex:none;
  background:var(--bg-raised);border:1px solid var(--line-brand);
  box-shadow:var(--sh-1);color:var(--text-brand);
  font-family:var(--mono);font-size:var(--t-readout);font-weight:500;
}
.node--active{background:var(--g-500);border-color:var(--g-500);color:var(--g-950)}
.link{flex:1;height:1px;background:var(--line-strong);position:relative;min-width:18px}
.link::after{
  content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--g-500),transparent);
  transform:scaleX(0);
}
.is-in .link::after{animation:trace 1.6s var(--e-inout) forwards}
@keyframes trace{
  0%{transform:scaleX(0) translateX(0)}
  60%{transform:scaleX(1) translateX(0)}
  100%{transform:scaleX(1) translateX(0);opacity:.5}
}
.chain{display:flex;align-items:center;gap:var(--s-2)}

/* Marquee base (section 02 extends it) */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;gap:var(--s-10);animation:slide 42s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:var(--s-3);white-space:nowrap;color:var(--text-2);font-size:var(--t-sm);font-weight:500}
.marquee__item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--g-500);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* Icon defaults */
.ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico--fill{fill:currentColor;stroke:none}

/* ========================================================================
   7. MOTION UTILITIES
   ======================================================================== */
[data-reveal]{opacity:0;transform:translateY(16px);will-change:transform,opacity}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--d-reveal) var(--e-enter),transform var(--d-reveal) var(--e-enter);
  transition-delay:calc(var(--i,0) * 90ms);
}

/* TIER 1 — ordinary interface drift, ±5px */
.float{animation:drift var(--drift) var(--e-inout) infinite alternate;will-change:transform}
.float--b{--drift:11s;animation-delay:-3.5s}
.float--c{--drift:13s;animation-delay:-6s}
@keyframes drift{from{transform:translateY(-5px)}to{transform:translateY(5px)}}

/* TIER 2 — narrative suspension, 8–18px. Always returns to origin so it can
   start mid-cycle without a jump. Used only inside .engine. */
@keyframes suspend{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(var(--fx,4px),var(--fy,-13px),0)}
  100%{transform:translate3d(0,0,0)}
}

/* Perf: keep long offscreen sections out of the render path */
.defer{content-visibility:auto;contain-intrinsic-size:auto 720px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .marquee__track,.rail__track{animation:none;transform:none}
  .plane{transform:none !important}
}

/* ========================================================================
   8. SITE HEADER
   ======================================================================== */
.site-head{position:relative;z-index:6;padding-block:var(--s-5)}
.site-head__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4)}
@media (max-width:560px){
  .site-head__cta{display:none}
  .hero__cta .btn--primary{width:100%;justify-content:center}
}

/* ========================================================================
   9. SECTION 01 — HERO + DENTAL GROWTH ENGINE
   ======================================================================== */
.hero{
  --hero-pb:clamp(4rem,2.5rem + 6vw,7.5rem);
  position:relative;
  padding-block:clamp(1.5rem,.5rem + 3vw,3.5rem) var(--hero-pb);
  isolation:isolate;
}

/* --- environment: restrained depth behind the engine ----------------- */
.hero__env{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__glow{
  position:absolute;right:-6%;top:-14%;width:min(980px,86vw);aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--g-500) 13%,transparent) 0%,
    color-mix(in srgb,var(--g-500) 5%,transparent) 38%,
    transparent 66%);
}
.hero__glow--b{
  right:auto;left:-18%;top:auto;bottom:-32%;width:min(700px,70vw);
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--g-100) 62%,transparent) 0%,transparent 64%);
}
.hero__mesh{
  position:absolute;inset:0;
  background:
    linear-gradient(to right,color-mix(in srgb,var(--g-900) 6%,transparent) 1px,transparent 1px) 0 0/72px 72px,
    linear-gradient(to bottom,color-mix(in srgb,var(--g-900) 6%,transparent) 1px,transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(120% 78% at 72% 40%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 78% at 72% 40%,#000 0%,transparent 72%);
  opacity:.75;
}

.hero__wrap{position:relative;z-index:2}
.hero__grid{align-items:center;row-gap:clamp(2.5rem,6vw,4rem)}
.hero__copy{position:relative;z-index:3}

/* --- headline: two blocks, tonal hierarchy, art-directed breaks ------ */
.hero__h1{font-size:var(--t-hero);line-height:1.03;letter-spacing:-.034em;font-weight:600}
.hero__h1 span{display:block}
.hero__h1 .l-a{color:var(--n-600)}
.hero__h1 .l-b{color:var(--n-900);font-size:1.05em;margin-top:.22em;letter-spacing:-.038em}
.hero__lead{margin-top:var(--s-6);max-width:46ch}
.hero__cta{display:flex;align-items:center;gap:var(--s-4) var(--s-5);flex-wrap:wrap;margin-top:var(--s-8)}
.hero__cta .btn--quiet{margin-left:-.35rem}
.hero__trust{
  display:flex;gap:.65rem;align-items:flex-start;margin-top:var(--s-8);
  font-size:var(--t-sm);color:var(--text-2);max-width:38ch;
}
.hero__trust::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--g-500);margin-top:.62rem;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--g-500) 12%,transparent);
}

/* --- load sequence ---------------------------------------------------- */
@keyframes heroRise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
[data-seq]{animation:heroRise 720ms var(--e-enter) both;animation-delay:calc(var(--seq,0) * 1ms)}
@keyframes stageIn{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes objIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.97)}to{opacity:1;transform:none}}
@keyframes pathIn{from{opacity:0}to{opacity:1}}

/* ========================= THE ENGINE ================================= */
.hero__stage{position:relative;animation:stageIn 820ms var(--e-enter) both;animation-delay:360ms}
.engine{
  position:relative;width:100%;aspect-ratio:660/616;
  --mx:0;--my:0;--sp:0;
}
.plane{
  position:absolute;inset:0;pointer-events:none;
  transform:translate3d(
    calc(var(--mx) * var(--pf,1) * 1px),
    calc(var(--my) * var(--pf,1) * 1px + var(--sp) * var(--sf,0) * 1px),
    0);
  will-change:transform;
}
.plane--rear{--pf:1.4;--sf:34;z-index:1}
.plane--paths{--pf:2.2;--sf:14;z-index:2}
.plane--mid{--pf:3.2;--sf:-12;z-index:3}
.plane--near{--pf:4.4;--sf:-32;z-index:4}
.plane--front{--pf:5.8;--sf:-62;z-index:5}

/* rear ambient geometry */
.amb{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.amb__ring{fill:none;stroke:color-mix(in srgb,var(--g-900) 13%,transparent);stroke-width:1}
.amb__arc{fill:none;stroke:color-mix(in srgb,var(--g-500) 34%,transparent);stroke-width:1;stroke-dasharray:3 7}
.amb__rise{fill:none;stroke:color-mix(in srgb,var(--g-500) 32%,transparent);stroke-width:1.5}

/* connection paths */
.paths{position:absolute;inset:0;width:100%;height:100%;animation:pathIn 700ms var(--e-out) both;animation-delay:900ms}
.paths--narrow{display:none}
.p{fill:none;stroke:color-mix(in srgb,var(--g-700) 34%,transparent);stroke-width:1.25;stroke-linecap:round}
.p-end{fill:color-mix(in srgb,var(--g-700) 42%,transparent)}
.pulse{
  fill:none;stroke:var(--g-500);stroke-width:2.4;stroke-linecap:round;
  stroke-dasharray:15 100;stroke-dashoffset:115;opacity:0;
}
@keyframes flow{
  0%{opacity:0;stroke-dashoffset:115}
  14%{opacity:1}
  86%{opacity:1}
  100%{opacity:0;stroke-dashoffset:0}
}
.engine.is-s2 .pulse--in{animation:flow 1250ms var(--e-inout) forwards}
.engine.is-s4 .pulse--out{animation:flow 1150ms var(--e-inout) forwards}
.engine.is-s5 .pulse--appt{animation:flow 1050ms var(--e-inout) forwards}

/* --- the practice website (mid plane) -------------------------------- */
.site{
  position:absolute;left:18.2%;top:26%;width:66.7%;
  pointer-events:auto;background:var(--n-0);
}
.site::after{
  content:"";position:absolute;inset:-1px;border-radius:var(--r-xl);
  border:1.5px solid var(--g-500);opacity:0;pointer-events:none;
  transition:opacity var(--d-3) var(--e-out);
}
.engine.is-s3 .site::after{opacity:.55}
.site__body{padding:var(--s-5)}
.site__nav{display:flex;align-items:center;gap:.6rem}
.site__mark{
  width:26px;height:26px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:var(--g-900);color:var(--g-500);font-size:15px;
}
.site__name{font-size:var(--t-xs);font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site__nav-sp{flex:1}
.site__pill{
  font-size:11px;font-weight:600;padding:.28rem .55rem;border-radius:var(--r-xs);
  background:var(--g-100);color:var(--g-800);white-space:nowrap;
}
.site__h{
  margin-top:var(--s-4);font-size:clamp(.95rem,.55rem + .8vw,1.25rem);
  line-height:1.2;letter-spacing:-.022em;font-weight:600;max-width:15ch;
}
.site__chips{display:flex;gap:.4rem;margin-top:var(--s-3);flex-wrap:wrap}
.site__chips span{
  font-size:11px;color:var(--text-2);border:1px solid var(--line);
  border-radius:var(--r-xs);padding:.25rem .5rem;white-space:nowrap;
}
.site__row{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-5);flex-wrap:wrap}
.site__btn{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--g-700);color:#fff;
  font-size:12px;font-weight:600;padding:.55rem .8rem;border-radius:var(--r-sm);
  white-space:nowrap;transition:background var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
}
.engine.is-s3 .site__btn{background:var(--g-500);color:var(--g-950);transform:translateY(1px)}
.site__open{display:flex;align-items:center;gap:.4rem;font-size:11px;color:var(--text-2)}
.site__open i{width:6px;height:6px;border-radius:50%;background:var(--g-500);display:block;flex:none}
.site__cursor{
  position:absolute;right:16%;bottom:14%;width:13px;height:13px;color:var(--g-900);
  opacity:0;transform:translate3d(10px,10px,0);
  transition:opacity var(--d-2) var(--e-out),transform var(--d-3) var(--e-out);
}
.engine.is-s3 .site__cursor{opacity:.75;transform:none}

/* --- floating objects ------------------------------------------------ */
.obj{position:absolute;animation:objIn 760ms var(--e-enter) both;animation-delay:var(--in,600ms)}
.obj__in{animation:suspend var(--fd,7.5s) var(--e-inout) infinite;animation-delay:var(--fdelay,0s);will-change:transform}
.obj__card{
  background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-float);padding:var(--s-4);pointer-events:auto;
  transition:box-shadow var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out);
}
.obj__card:hover{box-shadow:var(--sh-3);border-color:var(--line-brand)}
.obj .readout{display:block;color:var(--text-3)}

/* 01 search intent */
.obj--search{left:-5.5%;top:0;width:clamp(212px,42%,286px);--in:560ms;--fd:6.4s;--fx:5px;--fy:-14px}
.q{
  display:flex;align-items:center;gap:.5rem;margin-top:var(--s-3);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.5rem .6rem;
  background:var(--n-50);transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out);
}
.engine.is-s1 .q,.engine.is-settled .q{border-color:var(--line-brand);background:var(--n-0)}
.q svg{font-size:14px;color:var(--text-3)}
.q__t{font-size:var(--t-xs);color:var(--text);white-space:nowrap}
.caret{width:1.5px;height:13px;background:var(--g-700);display:block;opacity:0;flex:none}
.engine.is-s1 .caret{animation:blink 1s steps(1) 3}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.res{
  display:flex;align-items:center;gap:.55rem;margin-top:.55rem;padding:.5rem;
  border-radius:var(--r-sm);border:1px solid transparent;
  transition:background var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out);
}
.engine.is-s1 .res,.engine.is-s2 .res,.engine.is-s3 .res,.engine.is-settled .res{background:var(--g-50);border-color:var(--line-brand)}
.res__mark{width:22px;height:22px;border-radius:6px;background:var(--g-900);color:var(--g-500);display:grid;place-items:center;font-size:13px;flex:none}
.res b{display:block;font-size:var(--t-xs);font-weight:600;line-height:1.3}
.res em{display:block;font-style:normal;font-size:11px;color:var(--text-3);line-height:1.4}

/* 02 local visibility */
.obj--local{left:-3%;top:72%;width:clamp(206px,40%,262px);--in:820ms;--fd:9.2s;--fx:-6px;--fy:11px}
.map{
  position:relative;height:62px;margin-top:var(--s-3);border-radius:var(--r-sm);
  overflow:hidden;background:var(--g-50);
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--g-900) 8%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--g-900) 8%,transparent) 1px,transparent 1px);
  background-size:17px 17px;
}
.map__road{position:absolute;left:-10%;top:58%;width:130%;height:5px;background:color-mix(in srgb,var(--g-900) 7%,transparent);transform:rotate(-9deg)}
.pin{position:absolute;color:var(--n-400);font-size:13px}
.pin--a{left:16%;top:22%}
.pin--b{right:14%;top:52%}
.pin--me{left:47%;top:30%;color:var(--g-700);font-size:17px}
.pin--me::after{
  content:"";position:absolute;left:50%;top:62%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;background:color-mix(in srgb,var(--g-500) 18%,transparent);
  animation:ripple 4.5s var(--e-inout) infinite;
}
@keyframes ripple{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1);opacity:0}100%{transform:scale(1);opacity:0}}
.vis{display:flex;align-items:flex-end;gap:.55rem;margin-top:var(--s-3)}
.bars{display:flex;align-items:flex-end;gap:3px;height:22px;flex:none}
.bars i{width:6px;border-radius:2px;background:var(--g-500);display:block;transform-origin:bottom;transform:scaleY(.25);animation:grow 900ms var(--e-enter) forwards;animation-delay:calc(1100ms + var(--b) * 110ms)}
@keyframes grow{to{transform:scaleY(1)}}
.bars i:nth-child(1){height:8px;--b:0}
.bars i:nth-child(2){height:11px;--b:1}
.bars i:nth-child(3){height:10px;--b:2;opacity:.85}
.bars i:nth-child(4){height:16px;--b:3}
.bars i:nth-child(5){height:22px;--b:4}
.vis__t{font-size:11px;color:var(--text-2);line-height:1.35}

/* 03 website conversion */
.obj--conv{left:65%;top:11.5%;width:clamp(186px,34%,232px);--in:1000ms;--fd:6.8s;--fx:6px;--fy:12px}
.conv{display:flex;align-items:center;gap:.45rem;margin-top:var(--s-3);font-size:var(--t-xs);font-weight:600}
.conv em{font-style:normal;color:var(--text-2);font-weight:500}
.conv__arrow{color:var(--g-700);font-weight:600}
.conv__out{color:var(--g-800)}
.track{display:flex;gap:4px;margin-top:.6rem}
.track i{height:4px;flex:1;border-radius:2px;background:var(--n-200);display:block;transition:background var(--d-3) var(--e-out)}
.track i:nth-child(1){background:var(--g-500)}
.engine.is-s3 .track i:nth-child(2),.engine.is-s4 .track i:nth-child(2),.engine.is-s5 .track i:nth-child(2),.engine.is-settled .track i:nth-child(2){background:var(--g-500)}
.engine.is-s4 .track i:nth-child(3),.engine.is-s5 .track i:nth-child(3),.engine.is-settled .track i:nth-child(3){background:var(--g-500)}

/* 04 new patient inquiry (front) */
.obj--inq{left:63%;top:57%;width:clamp(222px,37%,268px);--in:1140ms;--fd:7.8s;--fx:-7px;--fy:-16px}
.obj--inq .obj__card{
  border-color:var(--line-brand);
  transition:box-shadow var(--d-3) var(--e-out),border-color var(--d-3) var(--e-out);
}
.engine.is-s4 .obj--inq .obj__card,.engine.is-s5 .obj--inq .obj__card,.engine.is-settled .obj--inq .obj__card{
  border-color:var(--g-500);box-shadow:var(--sh-3),0 0 0 4px color-mix(in srgb,var(--g-500) 12%,transparent);
}
.inq{display:flex;gap:.65rem;align-items:flex-start}
.inq>span{min-width:0}
.inq__ico{width:30px;height:30px;border-radius:9px;background:var(--g-900);color:var(--g-500);display:grid;place-items:center;font-size:17px;flex:none}
.inq__t{display:block;font-size:var(--t-xs);font-weight:600;line-height:1.35}
.inq__s{display:block;font-size:11px;color:var(--text-2);line-height:1.45;margin-top:.1rem}
.inq__dot{width:7px;height:7px;border-radius:50%;background:var(--g-500);flex:none;margin-top:.35rem;opacity:.35;transition:opacity var(--d-2) var(--e-out)}
.engine.is-s4 .inq__dot,.engine.is-s5 .inq__dot,.engine.is-settled .inq__dot{opacity:1;animation:beat 2.4s var(--e-inout) infinite}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

/* 05 appointment confirmed (front) */
.obj--appt{left:45.5%;top:82%;width:clamp(226px,39%,272px);--in:1280ms;--fd:8.3s;--fx:7px;--fy:-11px}
.cal{display:flex;gap:4px;margin-top:var(--s-3)}
.cal i{
  flex:1;height:26px;border-radius:5px;background:var(--n-100);display:block;
  transition:background var(--d-3) var(--e-out);
}
.cal i.on{background:var(--g-100)}
.engine.is-s5 .cal i.on,.engine.is-settled .cal i.on{background:var(--g-500)}
.appt{display:flex;align-items:center;gap:.55rem;margin-top:.7rem}
.chk{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;flex:none;color:var(--g-700);transition:border-color var(--d-3) var(--e-out),background var(--d-3) var(--e-out)}
.engine.is-s5 .chk,.engine.is-settled .chk{border-color:var(--g-500);background:color-mix(in srgb,var(--g-500) 12%,transparent)}
.chk svg{width:12px;height:12px}
.chk path{stroke-dasharray:100;stroke-dashoffset:100}
.engine.is-s5 .chk path,.engine.is-settled .chk path{animation:draw 620ms var(--e-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.appt__label{display:grid;font-size:var(--t-xs);font-weight:600}
.appt__label b{grid-area:1/1;font-weight:600;transition:opacity var(--d-3) var(--e-out)}
.appt__label .l2{opacity:0;color:var(--g-800)}
.engine.is-s5 .appt__label .l1,.engine.is-settled .appt__label .l1{opacity:0}
.engine.is-s5 .appt__label .l2,.engine.is-settled .appt__label .l2{opacity:1}

/* --- hero → section 02 seam ------------------------------------------ */
.seam-wrap{position:relative;height:0;z-index:1}
.seam{
  position:absolute;left:41.6%;top:0;
  width:1px;height:var(--hero-pb);
  background:linear-gradient(to bottom,transparent,var(--line-brand));
}
.seam::after{
  content:"";position:absolute;left:-2px;bottom:-2px;width:5px;height:5px;
  border-radius:50%;background:var(--g-500);
}
.seam i{
  position:absolute;left:-1px;top:0;width:3px;height:16px;border-radius:2px;
  background:var(--g-500);opacity:0;
  animation:seamFlow 6s var(--e-inout) infinite;animation-delay:2.2s;
}
@keyframes seamFlow{
  0%{opacity:0;transform:translateY(-4px)}
  12%{opacity:.85}
  70%{opacity:.85}
  80%,100%{opacity:0;transform:translateY(var(--seam-h,72px))}
}

/* ========================================================================
   10. SECTION 02 — CAPABILITY STRIP
   ======================================================================== */
.strip{overflow:hidden}
.strip__head{position:relative;padding-top:var(--s-2)}
.strip__node{
  position:absolute;left:0;top:-.35rem;width:7px;height:7px;border-radius:50%;
  background:var(--g-500);box-shadow:0 0 0 5px color-mix(in srgb,var(--g-500) 12%,transparent);
}
.strip__node::after{content:"";position:absolute;left:7px;top:3px;width:clamp(24px,4vw,48px);height:1px;background:var(--line-brand)}
.strip__node::before{content:"";position:absolute;left:3px;bottom:7px;width:1px;height:var(--sec-y-tight);background:linear-gradient(to bottom,transparent,var(--line-brand))}
.strip__statement{
  margin-top:var(--s-6);
  font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);
  line-height:1.3;letter-spacing:-.02em;font-weight:500;color:var(--n-700);
  max-width:30ch;
}
.rail{
  margin-top:clamp(2.5rem,5vw,4rem);
  border-block:1px solid var(--line);
  padding-block:clamp(1.1rem,2.4vw,1.6rem);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.rail__track{display:flex;align-items:center;width:max-content;animation:slide 68s linear infinite;will-change:transform}
.rail:hover .rail__track{animation-play-state:paused}
.cap{
  font-size:clamp(1rem,.85rem + .55vw,1.4rem);font-weight:500;letter-spacing:-.022em;
  color:var(--n-700);white-space:nowrap;
}
.sep{position:relative;flex:none;width:clamp(44px,5vw,76px);height:1px}
.sep::before{content:"";position:absolute;inset:0;background:var(--line-strong)}
.sep::after{
  content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;
  border-radius:50%;background:var(--g-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--g-500) 12%,transparent);
}

/* ========================================================================
   11. STICKY MOBILE CTA (architecture; activates past the hero)
   ======================================================================== */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  padding:.6rem var(--s-4) calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--n-0) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform var(--d-3) var(--e-out);
}
.mcta.is-on{transform:none}
@media (max-width:860px){ .mcta{display:block} }

/* ========================================================================
   12. RESPONSIVE
   ======================================================================== */
@media (max-width:1100px){
  /* Narrower stage: the composition gets denser, so the objects lose padding
     and one chip rather than losing legibility. */
  .obj__card{padding:var(--s-3)}
  .site__body{padding:var(--s-4)}
  .site__chips span:nth-child(4){display:none}
  .obj--search{left:-2%;width:clamp(192px,44%,250px)}
  .obj--local{left:0;top:74%;width:clamp(188px,42%,240px)}
  .obj--conv{left:60%;top:3%;width:clamp(172px,40%,212px)}
  .obj--inq{left:58%;top:55%;width:clamp(198px,42%,244px)}
  .obj--appt{left:42%;width:clamp(202px,44%,250px)}
}

@media (max-width:860px){
  .hero{padding-block:var(--s-6) var(--sec-y-tight)}
  .hero__grid{row-gap:clamp(2.25rem,7vw,3rem)}
  .hero__h1 .l-b{font-size:1.04em}
  .hero__lead{max-width:38ch}
  .hero__cta{gap:var(--s-3);margin-top:var(--s-6)}
  .hero__trust{margin-top:var(--s-6)}

  /* engine: redesigned, not shrunk */
  .engine{aspect-ratio:360/660;max-width:460px;margin-inline:auto}
  .paths--wide{display:none}
  .paths--narrow{display:block}
  .plane{--pf:0}                      /* no pointer depth on touch */
  .plane--rear{--sf:18}
  .plane--paths{--sf:8}
  .plane--mid{--sf:-6}
  .plane--near{--sf:-10}
  .plane--front{--sf:-16}
  .obj__card{box-shadow:var(--sh-2);padding:var(--s-3)}
  .obj--local,.obj--conv{display:none}   /* density reduction, not shrinking */
  .obj--search{left:0;top:0;width:66%;--fy:-9px;--fx:3px}
  .site{left:8%;top:22%;width:80%}
  .site__chips span:nth-child(4),.site__open{display:none}
  .site__body{padding:var(--s-4)}
  .obj--inq{left:26%;top:66%;width:72%;--fy:-10px;--fx:-4px}
  .obj--appt{left:0;top:82%;width:68%;--fy:-8px;--fx:4px}
  .hero__glow{right:-30%;top:-6%;width:130vw}
  .hero__mesh{-webkit-mask-image:radial-gradient(130% 60% at 50% 55%,#000 0%,transparent 70%);mask-image:radial-gradient(130% 60% at 50% 55%,#000 0%,transparent 70%)}
  .seam{left:0}
  .strip__statement{max-width:26ch}
}

@media (max-width:420px){
  .engine{aspect-ratio:360/690}
  .obj--search{width:76%}
  .obj--inq{left:20%;width:80%}
  .obj--appt{width:76%}
  .site{left:4%;width:88%}
}

/* ========================================================================
   13. SECTION 03 — THE CHAIN (diagnostic patient journey)
   Motion language: progression, not ambience. Nothing floats here.
   ======================================================================== */
.jrn-head{align-items:end}
.jrn-head__p{max-width:44ch}

.jrn{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-6);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.jrn__steps{grid-column:1 / span 5}
.jrn__viz{grid-column:7 / span 6}
.jrn__sticky{position:sticky;top:clamp(4.5rem,13vh,7rem)}
.jrn__panel{position:relative;width:100%;aspect-ratio:560/600}

/* diagnostic ground: exposed grid, no container box */
.jrn__grid{
  position:absolute;inset:-6% -4%;
  background:
    linear-gradient(to right,color-mix(in srgb,var(--g-900) 7%,transparent) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom,color-mix(in srgb,var(--g-900) 7%,transparent) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(90% 70% at 30% 50%,#000,transparent 78%);
  mask-image:radial-gradient(90% 70% at 30% 50%,#000,transparent 78%);
}

/* --- the chain itself ------------------------------------------------- */
.jrn__svg{position:absolute;inset:0;width:100%;height:100%}
.seg{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round;transition:stroke var(--d-3) var(--e-out),opacity var(--d-3) var(--e-out);opacity:.55}
.seg.is-open{stroke-dasharray:4 7;opacity:.5}     /* link not yet made */
.seg.is-done{stroke:var(--g-500);opacity:1;stroke-dasharray:none}
.segflow{
  fill:none;stroke:var(--g-500);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:16 100;stroke-dashoffset:116;opacity:0;
}
.seg-wrap.is-flow .segflow{animation:flow 1200ms var(--e-inout) forwards}
.branch{
  fill:none;stroke:var(--n-400);stroke-width:1.25;stroke-dasharray:3 6;
  opacity:0;transition:opacity var(--d-3) var(--e-out);
}
.branch-tip{fill:none;stroke:var(--n-400);stroke-width:1.25;opacity:0;transition:opacity var(--d-3) var(--e-out)}
.branch.is-on,.branch-tip.is-on{opacity:.85}

.jnode{
  position:absolute;width:15px;height:15px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--n-50);border:1.5px solid var(--line-strong);
  transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),width var(--d-2),height var(--d-2);
}
.jnode__l{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2);white-space:nowrap;transition:color var(--d-2) var(--e-out);
}
.jnode.is-done{background:var(--g-500);border-color:var(--g-500)}
.jnode.is-done .jnode__l{color:var(--text-2)}
.jnode.is-live{background:var(--n-0);border-color:var(--g-500);border-width:2px;box-shadow:0 0 0 5px color-mix(in srgb,var(--g-500) 14%,transparent)}
.jnode.is-live .jnode__l{color:var(--text)}
.jnode.is-live::after{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--g-500);animation:ring 2.6s var(--e-inout) infinite;
}
@keyframes ring{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

/* --- the interface fragment that follows the active stage -------------- */
.jrn__slot{
  position:absolute;left:56%;top:0;width:44%;height:100%;
  transform:translate3d(0,var(--cy,2%),0);
  transition:transform 700ms var(--e-enter);
}
.frag{
  position:absolute;top:0;left:0;width:100%;
  background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-float);padding:var(--s-4);
  opacity:0;transform:translate3d(0,10px,0);pointer-events:none;
  transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out);
}
.frag.is-on{opacity:1;transform:none}
.fx__h{display:block;font-size:11px;font-weight:600;color:var(--text-2);letter-spacing:-.005em}
.q--sm{padding:.4rem .5rem;margin-top:.6rem}
.q--sm .q__t{font-size:11px}
.fx__list{display:grid;gap:.3rem;margin-top:.6rem}
.fx__r{display:flex;align-items:center;gap:.5rem;padding:.4rem .5rem;border-radius:var(--r-sm);background:var(--n-50)}
.fx__r b{font-size:11px;font-weight:500;color:var(--text-2)}
.fx__d{width:16px;height:16px;border-radius:5px;background:var(--n-200);flex:none}
.fx__ghost{
  margin-top:.55rem;padding:.5rem;border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  font-size:11px;color:var(--text-2);text-align:center;
}
.fx__vs{display:grid;gap:.45rem;margin-top:.6rem}
.fx__opt{padding:.55rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.fx__opt b{display:block;font-size:11px;font-weight:600}
.fx__opt i{display:block;height:5px;border-radius:3px;background:var(--n-200);margin-top:.35rem}
.fx__opt i:nth-of-type(1){width:82%}
.fx__opt i:nth-of-type(2){width:58%}
.fx__opt--weak{border-style:dashed;background:var(--n-50)}
.fx__ok{display:block;margin-top:.4rem;font-size:11px;color:var(--g-700);font-weight:600}
.fx__weak{display:block;margin-top:.5rem;font-size:11px;color:var(--text-2)}
.fx__site{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;padding:.55rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.fx__site b{font-size:11px;font-weight:600}
.fx__lines{margin-top:.5rem;display:grid;gap:.3rem}
.fx__lines i{display:block;height:6px;border-radius:3px;background:var(--n-100)}
.fx__lines i:nth-child(2){width:76%}
.fx__lines i:nth-child(3){width:54%}
.fx__acts{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.6rem}
.fx__acts span{font-size:11px;font-weight:600;color:var(--text-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:.3rem .5rem}
.fx__buried{
  margin-top:.5rem;padding:.4rem .5rem;border-radius:var(--r-xs);
  background:var(--n-50);font-size:11px;color:var(--text-2);
  display:flex;justify-content:space-between;gap:.5rem;align-items:center;
}
.fx__buried b{color:var(--text-2);font-weight:600}
.fx__form{display:grid;gap:.3rem;margin-top:.6rem}
.fx__form i{display:block;height:20px;border-radius:5px;background:var(--n-50);border:1px solid var(--line)}
.fx__send{margin-top:.5rem;display:block;text-align:center;font-size:11px;font-weight:600;color:var(--text-2);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:.4rem}
.frag .cal{margin-top:.6rem}
.frag .appt{margin-top:.6rem}
.frag.is-on .cal i.on{background:var(--g-500)}
.frag.is-on .chk{border-color:var(--g-500);background:color-mix(in srgb,var(--g-500) 12%,transparent)}
.frag.is-on .chk path{animation:draw 620ms var(--e-out) forwards}
.frag .appt__label b{opacity:1;color:var(--g-800)}

/* --- narrative column -------------------------------------------------- */
.stg{
  min-height:clamp(215px,26vh,292px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s-4);
  opacity:.9;transition:opacity 460ms var(--e-out);
}
.stg.is-live{opacity:1}
.stg__n{display:flex;align-items:center;gap:.6rem;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2)}
.stg__n b{color:var(--n-400);font-weight:600;transition:color 460ms var(--e-out)}
.stg.is-live .stg__n b{color:var(--g-700)}
.stg__n s{flex:1;max-width:40px;height:1px;background:var(--line-strong);text-decoration:none}
.stg__t{margin-top:var(--s-4);font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);line-height:1.2;letter-spacing:-.022em;font-weight:600;max-width:23ch;color:var(--n-700);transition:color 460ms var(--e-out)}
.stg.is-live .stg__t{color:var(--n-900)}
.stg__p{margin-top:var(--s-3);font-size:var(--t-sm);line-height:1.6;color:var(--text-2);max-width:40ch}
.stg__risk{margin-top:var(--s-3);display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-xs);color:var(--text-2);max-width:34ch}
.stg__risk::before{content:"↳";color:var(--n-400);flex:none}
.stg--win .stg__risk{color:var(--g-800)}
.stg--win .stg__risk::before{content:"✓";color:var(--g-600)}

/* mobile-only compact interface state per stage */
.stg__mini{display:none}

/* --- section conclusion ------------------------------------------------ */
.jrn-end{margin-top:clamp(2.5rem,5vw,4.5rem);position:relative}
.jrn-end__t{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.35rem);line-height:1.15;letter-spacing:-.026em;font-weight:600;max-width:18ch}
.jrn-end__p{margin-top:var(--s-4);max-width:42ch;color:var(--text-2);font-size:var(--t-lead)}

/* shared: 'this is an illustration, not evidence' marker + module note */
.illus{
  margin-top:var(--s-5);display:flex;align-items:center;gap:.55rem;
  font-size:var(--t-xs);font-weight:500;color:var(--text-2);
}
.illus::before{content:"";width:16px;height:1px;background:var(--line-strong);flex:none}
.on-dark .illus{color:var(--g-300)}
.mod__note{margin-top:.6rem;font-size:11px;line-height:1.45;color:var(--g-200)}

/* ========================================================================
   14. THE TURN — canvas resolves into deep green
   ======================================================================== */
.turn{
  position:relative;height:clamp(150px,19vw,260px);
  background:linear-gradient(to bottom,var(--n-50) 0%,#5F7A6C 62%,var(--g-900) 100%);
  overflow:hidden;
}
.turn svg{position:absolute;inset:0;width:100%;height:100%}
.turn .tl{fill:none;stroke:color-mix(in srgb,var(--g-600) 62%,transparent);stroke-width:1.25;stroke-dasharray:5 8;stroke-dashoffset:0}
.turn .tl.is-in{animation:knit 900ms var(--e-enter) forwards}
@keyframes knit{to{stroke-dasharray:180 0}}
.turn__node{
  position:absolute;left:50%;bottom:16px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--g-500);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--g-500) 22%,transparent);
}

/* ========================================================================
   15. SECTION 04 — THE GROWTH SYSTEM (deep, connected, looping)
   ======================================================================== */
.sys{padding-top:clamp(2.5rem,5vw,4rem)}
.sys__label{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;color:var(--g-200);
}
.sys__label::before{content:"";width:22px;height:1px;background:var(--line-brand)}
.sys__p{max-width:46ch}

.board{position:relative;width:100%;aspect-ratio:1040/620;margin-top:clamp(3rem,6vw,5rem)}
.board__svg{position:absolute;inset:0;width:100%;height:100%}
.board .p{stroke:color-mix(in srgb,var(--g-300) 30%,transparent);stroke-width:1.5}
.board .p.loop{stroke-dasharray:4 7}
.pulse--sys{
  fill:none;stroke:var(--g-500);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:15 100;stroke-dashoffset:115;opacity:0;
}
.board.is-all .pulse--sys{animation:loopflow 9s linear infinite;animation-delay:calc(var(--k,0) * 1.05s)}
@keyframes loopflow{
  0%{opacity:0;stroke-dashoffset:115}
  2%{opacity:.95}
  12%{opacity:.95;stroke-dashoffset:0}
  15%,100%{opacity:0;stroke-dashoffset:0}
}
.board__loopl{
  position:absolute;left:1%;top:57%;width:18%;
  font-size:12px;line-height:1.4;color:var(--g-200);
  opacity:0;transition:opacity var(--d-3) var(--e-out);
}
.board.is-all .board__loopl{opacity:1}

.mod{
  position:absolute;background:var(--bg-raised);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-5);
  opacity:.92;transform:translate3d(0,10px,0);
  transition:opacity 640ms var(--e-enter),transform 640ms var(--e-enter),border-color 640ms var(--e-out),box-shadow 640ms var(--e-out);
}
.mod.is-live{opacity:1;transform:none;border-color:var(--line-brand);box-shadow:var(--sh-3)}
/* Text is never dimmed for the activation sequence. Only the green signals
   inside a module wait to come online. */
.mod:not(.is-live) .pbars i,
.mod:not(.is-live) .spark,
.mod:not(.is-live) .demand__r em,
.mod:not(.is-live) .demand__r svg,
.mod:not(.is-live) .cnv__out i,
.mod:not(.is-live) .pid__m{opacity:.3}
.pbars i,.spark,.demand__r em,.demand__r svg,.cnv__out i,.pid__m{transition:opacity 640ms var(--e-enter)}
.mod__h{display:flex;align-items:baseline;gap:.55rem}
.mod__n{font-family:var(--mono);font-size:var(--t-readout);color:var(--g-300)}
.mod__t{font-size:var(--t-h4);font-weight:600;letter-spacing:-.012em}
.mod__i{margin-top:.35rem;font-size:var(--t-sm);color:var(--g-200);max-width:26ch}
.mod__v{margin-top:var(--s-4);border-top:1px solid var(--line);padding-top:var(--s-4)}
.mod__caps{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:var(--s-4)}
.mod__caps span{font-size:11px;font-weight:600;color:var(--g-200);border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:.3rem .5rem;white-space:nowrap}

.mod--position{left:0;top:9%;width:27%}
.mod--attract{left:36%;top:0;width:27%}
.mod--convert{left:71%;top:26%;width:29%}
.mod--grow{left:26%;top:60%;width:29%}

/* module interiors — qualitative states only, never numbers */
.pid{display:flex;align-items:center;gap:.5rem}
.pid__m{width:24px;height:24px;border-radius:7px;background:var(--g-500);color:var(--g-950);display:grid;place-items:center;flex:none;font-size:14px}
.pid__n{font-size:12px;font-weight:600}
.pbars{display:grid;gap:.3rem;margin-top:.5rem}
.pbars i{display:block;height:5px;border-radius:3px;background:color-mix(in srgb,var(--g-300) 26%,transparent)}
.pbars i:nth-child(1){width:88%}
.pbars i:nth-child(2){width:62%}
.pbars i.on{background:var(--g-500)}
.demand{display:grid;gap:.35rem}
.demand__r{display:flex;align-items:center;gap:.5rem;font-size:12px;color:var(--g-200)}
.demand__r svg{font-size:13px;color:var(--g-500)}
.demand__r em{font-style:normal;margin-left:auto;color:var(--g-500);font-size:13px}
.cnv{display:flex;align-items:center;gap:.5rem;font-size:12px;color:var(--g-200)}
.cnv__w{flex:1;min-width:0;border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:.35rem .5rem;font-family:var(--mono);font-size:11px;color:var(--g-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnv__out{margin-top:.45rem;display:flex;align-items:center;gap:.45rem;font-size:12px;font-weight:600;color:var(--n-0);border:1px solid var(--line-brand);border-radius:var(--r-sm);padding:.45rem .55rem}
.cnv__out i{width:7px;height:7px;border-radius:50%;background:var(--g-500);flex:none}
.spark{display:block;width:100%;height:46px}
.spark path{fill:none;stroke:var(--g-500);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.mod.is-live .spark path{animation:draw 1100ms var(--e-out) forwards}
.spark rect{fill:color-mix(in srgb,var(--g-500) 12%,transparent)}

.sys-end{margin-top:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem);display:grid;gap:var(--s-5)}
.sys-end__t{font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);line-height:1.2;letter-spacing:-.024em;font-weight:600;max-width:22ch}
.sys-end__p{color:var(--text-2);max-width:40ch;display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm)}
.sys-end__p .dn{color:var(--g-500);animation:nudge 3.4s var(--e-inout) infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------------- responsive: 03 + 04 ---------------------------------- */
@media (max-width:1100px){
  .jrn__steps{grid-column:1 / span 6}
  .jrn__viz{grid-column:7 / span 6}
  .frag{padding:var(--s-3)}
  .mod{padding:var(--s-4)}
  .mod__i{font-size:var(--t-xs)}
}

@media (max-width:860px){
  /* 03 becomes a vertical journey with the chain running down the left */
  .jrn{display:block;margin-top:var(--s-8)}
  .jrn__viz{display:none}
  .jrn__steps{position:relative;padding-left:34px}
  .stg{min-height:0;padding-block:var(--s-4);opacity:1;position:relative}
  .stg::before{                              /* the link to the next stage */
    content:"";position:absolute;left:-28px;top:34px;bottom:-10px;width:1.5px;
    background:repeating-linear-gradient(to bottom,var(--n-400) 0 3px,transparent 3px 9px);
    opacity:.55;transition:background var(--d-3) var(--e-out),opacity var(--d-3) var(--e-out);
  }
  .stg.is-done::before{background:var(--g-500);opacity:1}
  .stg:last-child::before{display:none}
  .stg__dot{
    position:absolute;left:-34px;top:26px;width:13px;height:13px;border-radius:50%;
    background:var(--n-50);border:1.5px solid var(--line-strong);
    transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out);
  }
  .stg.is-done .stg__dot{background:var(--g-500);border-color:var(--g-500)}
  .stg.is-live .stg__dot{border-color:var(--g-500);border-width:2px;background:var(--n-0);box-shadow:0 0 0 4px color-mix(in srgb,var(--g-500) 14%,transparent)}
  .stg__t{font-size:1.2rem;max-width:22ch}
  .stg__p{max-width:none}
  .stg__risk{max-width:none}
  .stg__mini{
    display:block;margin-top:var(--s-3);background:var(--n-0);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:var(--sh-2);padding:var(--s-3);
  }
  .stg.is-live .stg__mini{border-color:var(--line-brand)}
  .stg.is-live .stg__mini .cal i.on{background:var(--g-500)}
  .stg.is-live .stg__mini .chk{border-color:var(--g-500);background:color-mix(in srgb,var(--g-500) 12%,transparent)}
  .stg.is-live .stg__mini .chk path{animation:draw 620ms var(--e-out) forwards}

  /* 04 becomes a vertical system with the feedback loop on the left */
  .board{aspect-ratio:auto;padding-left:44px;margin-top:var(--s-10)}
  .board__svg,.board__loopl{display:none}
  .mod{position:relative;left:auto;top:auto;width:auto;margin-bottom:var(--s-8);opacity:1;transform:none}
  .mod:last-of-type{margin-bottom:0}
  .mod__dot{
    position:absolute;left:-31px;top:24px;width:13px;height:13px;border-radius:50%;
    background:var(--g-900);border:1.5px solid var(--line-strong);z-index:2;
    transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out);
  }
  .mod.is-live .mod__dot{background:var(--g-500);border-color:var(--g-500)}
  .mrail{display:block;position:absolute;left:19px;top:30px;bottom:30px;width:0;border-left:1.5px solid color-mix(in srgb,var(--g-300) 42%,transparent)}
  .mloop{
    display:block;position:absolute;left:-6px;top:30px;bottom:30px;width:18px;
    border:1.5px dashed color-mix(in srgb,var(--g-500) 42%,transparent);border-right:0;
    border-radius:14px 0 0 14px;
  }
  .mloop::after{
    content:"";position:absolute;right:-4px;top:-4px;width:7px;height:7px;border-radius:50%;
    background:var(--g-500);
  }
  .board__loopm{display:block;margin-top:var(--s-6);font-size:var(--t-xs);color:var(--text-3)}
  .sys-end__t{max-width:none}
}
.mrail,.mloop,.mod__dot,.stg__dot,.board__loopm{display:none}
@media (max-width:860px){
  .mrail,.mloop,.mod__dot,.stg__dot,.board__loopm{display:block}
}


/* ========================================================================
   16. THE RETURN — deep green resolves back to paper for the evidence
   ======================================================================== */
.turn--rise{
  background:linear-gradient(to bottom,var(--g-900) 0%,#5F7A6C 46%,var(--n-0) 100%);
  height:clamp(120px,14vw,190px);
}
.turn--rise .turn__node{top:14px;bottom:auto;background:var(--g-500)}
.turn--rise .tl{stroke:color-mix(in srgb,var(--g-600) 62%,transparent)}

/* ========================================================================
   17. SECTION 05 — DENTAL PERFORMANCE EVIDENCE
   Inspectable, not animated. One screenshot, one context panel, three tabs.
   ======================================================================== */
.ev-id{margin-top:var(--s-4);font-size:var(--t-sm);color:var(--text-2)}
.ev-id b{color:var(--text);font-weight:600}

/* review-only status strip — never sits on top of reporting data */
.review-flag{
  margin-top:clamp(2rem,4vw,3rem);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  padding:.7rem .9rem;background:var(--n-50);
  font-size:var(--t-xs);color:var(--text-2);
}
.review-flag b{
  font-family:var(--mono);font-size:var(--t-readout);font-weight:500;
  letter-spacing:.04em;color:var(--text);
}
.review-flag span{display:inline-flex;align-items:center;gap:.45rem}
.review-flag span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--n-400);flex:none}

.ev{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:var(--s-6);margin-top:var(--s-6);align-items:stretch;
}
.ev__tabs{grid-column:1 / span 8;display:flex;flex-wrap:wrap;gap:var(--s-5);border-bottom:1px solid var(--line)}
.ev__tab{
  appearance:none;background:none;border:0;margin:0;padding:.7rem .15rem;
  font:inherit;font-size:var(--t-sm);font-weight:600;letter-spacing:-.008em;
  color:var(--text-2);cursor:pointer;position:relative;min-height:46px;
  transition:color var(--d-2) var(--e-out);
}
.ev__tab::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--g-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--d-2) var(--e-out);
}
.ev__tab:hover{color:var(--text)}
.ev__tab[aria-pressed="true"]{color:var(--text)}
.ev__tab[aria-pressed="true"]::after{transform:none}

.ev__panel{
  grid-column:9 / span 4;grid-row:1 / span 2;display:flex;flex-direction:column;
  background:var(--g-50);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6);
}
.ev__loc{display:flex;flex-direction:column;gap:.2rem}
.ev__loc b{font-size:var(--t-h4);font-weight:600;letter-spacing:-.014em}
.ev__loc span{font-size:var(--t-sm);color:var(--text-2)}
.ev__metric{
  margin-top:var(--s-5);font-size:clamp(3rem,2rem + 3.4vw,4.5rem);
  line-height:.95;letter-spacing:-.04em;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--n-900);
}
.ev__mlabel{margin-top:.5rem;font-size:var(--t-sm);font-weight:600}
.ev__delta{margin-top:.35rem;font-size:var(--t-sm);color:var(--text-2)}
.ev__delta b{color:var(--g-700);font-weight:600}
.ev__qual{
  margin-top:auto;padding-bottom:0;padding-top:var(--s-5);border-top:1px solid var(--line);
  font-size:var(--t-xs);line-height:1.55;color:var(--text-2);
}
.ev-fade{animation:evIn 380ms var(--e-enter)}
@keyframes evIn{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}

.ev__frame{grid-column:1 / span 8;margin:0;background:var(--n-0)}
.shot{
  position:relative;aspect-ratio:946/509;background:var(--n-0);
  overflow:hidden;
}
.shot__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center top;
  opacity:0;transition:opacity 240ms var(--e-out);
}
.shot__img.is-on{opacity:1}
.shot__cap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-4);flex-wrap:wrap;
  padding:var(--s-4);border-top:1px solid var(--line);
}
.shot__cap p{font-size:var(--t-xs);line-height:1.5;color:var(--text-2);max-width:56ch}

.ev__note{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:64ch;font-size:var(--t-sm);line-height:1.6;color:var(--text-2);
  display:flex;gap:.7rem;align-items:flex-start;
}
.ev__note::before{
  content:"";flex:none;width:2px;align-self:stretch;border-radius:2px;
  background:var(--line-strong);
}
.ev__prov{margin-top:var(--s-3);max-width:64ch;font-size:var(--t-xs);color:var(--text-3);padding-left:calc(2px + .7rem)}

.ev-bridge{
  margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);
  padding-top:clamp(2rem,4vw,3rem);align-items:end;
}
.ev-bridge__t{font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);line-height:1.2;letter-spacing:-.024em;font-weight:600;max-width:20ch}
.ev-bridge__p{margin-top:var(--s-4);color:var(--text-2);max-width:40ch;font-size:var(--t-sm)}
.ev__wire{
  margin-top:var(--s-3);font-size:var(--t-xs);color:var(--text-2);
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:.6rem .7rem;
}

/* ---- enlarged report ------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--gutter)}
.lb[hidden]{display:none}
.lb__scrim{position:absolute;inset:0;background:color-mix(in srgb,var(--g-950) 72%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb__box{
  position:relative;width:min(1100px,100%);max-height:92vh;overflow:auto;
  background:var(--n-0);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  padding:var(--s-5);
}
.lb__head{display:flex;align-items:flex-start;gap:var(--s-4);flex-wrap:wrap}
.lb__t{font-size:var(--t-h4);font-weight:600;letter-spacing:-.014em}
.lb__s{font-family:var(--mono);font-size:var(--t-readout);color:var(--text-3);margin-top:.2rem}
.lb__x{
  margin-left:auto;appearance:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);min-width:44px;min-height:44px;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--text-2);
}
.lb__x:hover{border-color:var(--g-600);color:var(--text)}
.lb__img{width:100%;height:auto;margin-top:var(--s-4);border:1px solid var(--line);border-radius:var(--r-sm)}
.lb__note{margin-top:var(--s-4);font-size:var(--t-xs);line-height:1.6;color:var(--text-2);max-width:74ch}

@media (max-width:1100px){
  .ev__tabs,.ev__frame{grid-column:1 / span 7}
  .ev__panel{grid-column:8 / span 5}
  .ev__panel{padding:var(--s-5)}
}

@media (max-width:860px){
  /* required mobile order: tabs → context → screenshot → enlarge → note */
  .ev{display:block}
  .ev__tabs{gap:var(--s-4)}
  .ev__tab{font-size:var(--t-xs);padding-inline:.1rem}
  .ev__panel{margin-top:var(--s-5);padding:var(--s-5)}
  .ev__qual{margin-top:var(--s-5)}
  .ev__metric{font-size:clamp(2.75rem,2rem + 6vw,3.5rem)}
  .ev__frame{margin-top:var(--s-5)}
  .shot__cap{padding:var(--s-3)}
  .shot__cap .btn{width:100%;justify-content:center}
  .lb__box{padding:var(--s-4);max-height:90vh}
  .ev-bridge .btn{width:100%;justify-content:center}
}


/* ========================================================================
   18. SECTION 06 — PRACTICE PERSPECTIVE (editorial video showcase)
   Mint stage, two elevated 16:9 cards, one reusable <dialog> player.
   Scoped separately from the Section 05 report lightbox.
   ======================================================================== */
.vstage{
  margin-top:clamp(2rem,4vw,3rem);
  background:var(--g-50);border:1px solid var(--line);
  border-radius:var(--r-2xl);padding:clamp(1.25rem,3vw,2.5rem);
}
.vids{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(1.25rem,3vw,2.25rem);
}
.vid{
  margin:0;background:var(--n-0);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);
  transition:box-shadow var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out);
}
.vid:hover{box-shadow:var(--sh-3);border-color:var(--line-brand)}
.vid__hit{
  display:block;position:relative;width:100%;padding:0;margin:0;border:0;
  background:none;cursor:pointer;
}
/* inset ring: the card clips its overflow, so an outside focus shadow
   would be cut off */
.vid__hit:focus-visible{outline:2px solid var(--g-600);outline-offset:-3px;box-shadow:none}
.vid__poster{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--n-200)}
.vid__scrim{
  position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none;
  background:linear-gradient(to top,rgba(7,40,30,.70),rgba(7,40,30,.26) 44%,transparent);
}
.vid__play{
  position:absolute;left:var(--s-4);bottom:var(--s-4);
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.6rem .95rem .6rem .7rem;border-radius:var(--r-md);
  background:color-mix(in srgb,var(--n-0) 92%,transparent);
  border:1px solid transparent;
  color:var(--g-900);font-size:var(--t-sm);font-weight:600;
  box-shadow:var(--sh-2);
  transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out);
}
.vid__play i{
  width:26px;height:26px;border-radius:50%;background:var(--g-700);
  display:grid;place-items:center;flex:none;
}
.vid__play i::before{
  content:"";width:0;height:0;margin-left:2px;
  border-left:8px solid var(--n-0);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.vid__hit:hover .vid__play,
.vid__hit:focus-visible .vid__play{
  background:var(--n-0);border-color:var(--line-brand);box-shadow:var(--sh-3);
}
.vid__dur{
  position:absolute;right:var(--s-4);bottom:var(--s-4);
  font-family:var(--mono);font-size:var(--t-readout);
  color:var(--n-0);background:color-mix(in srgb,var(--g-950) 62%,transparent);
  padding:.25rem .5rem;border-radius:var(--r-xs);
}
.vid__body{padding:var(--s-5)}
.vid__title{
  margin-top:.7rem;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);
  line-height:1.25;letter-spacing:-.018em;font-weight:600;
}
.vid__desc{margin-top:.4rem;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);max-width:38ch}
.vstage__note{
  margin-top:clamp(1rem,2.2vw,1.5rem);
  font-size:var(--t-xs);color:var(--text-2);
}

/* internal build status — never part of the marketing composition */
.dev-panel{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  background:var(--n-50);font-size:var(--t-xs);color:var(--text-2);
}
.dev-panel>summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem;
  padding:.7rem .9rem;min-height:44px;
  font-family:var(--mono);font-size:var(--t-readout);letter-spacing:.04em;color:var(--text-2);
}
.dev-panel>summary::-webkit-details-marker{display:none}
.dev-panel>summary::before{content:"\25B8";color:var(--n-400)}
.dev-panel[open]>summary::before{content:"\25BE"}
.dev-panel__in{padding:0 .9rem .9rem;line-height:1.6}
.dev-panel ul{margin:0 0 .6rem;padding-left:1.1rem}
.dev-panel li{margin-top:.25rem}
.dev-panel li b{font-family:var(--mono);color:var(--text);font-weight:500}
.dev-panel p{margin-top:.5rem;max-width:80ch}
.dev-panel code{font-family:var(--mono);color:var(--text)}

/* ---- player dialog ---------------------------------------------------- */
.vp{
  width:min(1040px,94vw);max-width:none;max-height:92vh;
  padding:0;border:0;border-radius:var(--r-xl);
  background:var(--n-0);color:var(--text);
  box-shadow:var(--sh-3);overflow:hidden;
}
.vp::backdrop{background:color-mix(in srgb,#07281E 76%,transparent)}
.vp__in{
  display:flex;
  flex-direction:column;
  max-height:92vh;
  overflow:hidden;
}
.vp__head{
  display:flex;align-items:center;gap:var(--s-4);
  padding:var(--s-4) var(--s-5);border-bottom:1px solid var(--line);flex:none;
}
.vp__t{font-size:var(--t-h4);font-weight:600;letter-spacing:-.014em}
.vp__s{font-size:var(--t-xs);color:var(--text-2);margin-top:.1rem}
.vp__x{
  margin-left:auto;appearance:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);min-width:44px;min-height:44px;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--text-2);flex:none;
}
.vp__x:hover{border-color:var(--g-600);color:var(--text)}
.vp__stage{
  position:relative;
  background:var(--g-950);
  width:100%;
  aspect-ratio:16/9;
  max-height:calc(92vh - 150px);
  flex:none;
  overflow:hidden;
}

.vp__poster,
.vp__video{
  display:block;
  width:100%;
  height:100%;
  max-height:none;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
  background:var(--g-950);
}

.vp__poster[hidden],
.vp__video[hidden]{
  display:none !important;
}

.vp__msg{
  padding:var(--s-4) var(--s-5);border-top:1px solid var(--line);
  font-size:var(--t-sm);color:var(--text-2);flex:none;
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
}
.vp__msg b{color:var(--text);font-weight:600}
.vp__foot{
  padding:0 var(--s-5) var(--s-5);
  font-size:var(--t-xs);
  color:var(--text-3);
  flex:none;
}

@media (max-width:860px){
  .vstage{padding:var(--s-4);border-radius:var(--r-xl)}
  .vids{grid-template-columns:1fr;gap:var(--s-5)}
  .vid__body{padding:var(--s-4)}
  .vid__desc{max-width:none}
  .vid__play{left:var(--s-3);bottom:var(--s-3);padding:.5rem .8rem .5rem .55rem;font-size:var(--t-xs)}
  .vid__play i{width:22px;height:22px}
  .vid__dur{right:var(--s-3);bottom:var(--s-3)}
  .vp{width:100vw;max-height:100vh;border-radius:0}
  .vp__in{max-height:100vh}
  .vp__head{padding:var(--s-3) var(--s-4)}
  .vp__msg{padding:var(--s-3) var(--s-4)}
  .vp__foot{padding:0 var(--s-4) var(--s-4)}
}
/* short landscape screens: keep the close control on screen */
@media (max-height:520px){
  .vp__poster,.vp__video{max-height:52vh}
  .vp__foot{display:none}
}

/* ========================================================================
   19. SECTION 07 — THE $49 DENTAL GROWTH BLUEPRINT
   Deep-green offer environment. A tangible product presentation on the
   left, a light purchasing panel on the right, then the breakdown.
   ======================================================================== */
.turn--offer .tl{stroke:color-mix(in srgb,var(--g-600) 58%,transparent)}

.offer__lead{max-width:46ch}

/* a light surface nested inside the dark section: semantic tokens are
   re-declared locally, exactly as .on-dark does. No global token changes. */
.offer-light{
  --bg:var(--n-0);--bg-raised:var(--n-0);--bg-sunken:var(--n-100);
  --text:var(--n-900);--text-2:var(--n-600);--text-3:var(--n-500);
  --text-brand:var(--g-700);
  --line:var(--n-200);--line-strong:var(--n-300);
  --line-brand:color-mix(in srgb,var(--g-500) 32%,transparent);
  --focus:0 0 0 2px var(--n-0),0 0 0 4px var(--g-600);
  color:var(--text);
}

.offer{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,3vw,2.5rem);
  margin-top:clamp(2.5rem,5vw,4rem);align-items:start;
}

/* ---- deliverable preview --------------------------------------------- */
.bp-prev{grid-column:1 / span 7;grid-row:1;position:relative}
.bp-stage{position:relative;width:100%;aspect-ratio:620/560}
.bp-doc{
  position:absolute;background:var(--n-0);border-radius:var(--r-lg);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.55),0 8px 18px -10px rgba(0,0,0,.35);
}
.bp-page{width:46%;aspect-ratio:3/4;padding:var(--s-3) var(--s-4)}
.bp-page span{
  font-size:11px;font-weight:600;letter-spacing:-.005em;color:var(--n-700);
  white-space:nowrap;
}
.bp-page--c{left:15%;top:5%;z-index:1}
.bp-page--b{left:10%;top:12%;z-index:2}
.bp-page--a{left:5%;top:19%;z-index:3}

.bp-cover{
  left:0;top:26%;width:46%;aspect-ratio:3/4;z-index:4;
  padding:var(--s-5);display:flex;flex-direction:column;
  border:1px solid var(--n-200);
}
.bp-cover__mark{display:flex;align-items:center;gap:.5rem;font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--n-700)}
.bp-cover__mark i{width:16px;height:16px;border-radius:5px;background:var(--g-900);position:relative;flex:none}
.bp-cover__mark i::after{content:"";position:absolute;inset:4px 4px auto auto;width:5px;height:5px;border-radius:50%;background:var(--g-500)}
.bp-cover__rule{height:1px;background:var(--n-200);margin:var(--s-4) 0}
.bp-cover__t{
  font-size:clamp(1rem,.55rem + 1.2vw,1.45rem);line-height:1.12;
  letter-spacing:-.028em;font-weight:600;color:var(--n-900);max-width:11ch;
}
.bp-cover__s{margin-top:.4rem;font-size:11px;color:var(--n-600)}
.bp-cover__art{margin-top:auto;width:100%}
.bp-cover__art svg{width:100%;height:auto;display:block}

.bp-card{
  left:58%;top:27%;width:42%;z-index:5;padding:var(--s-4);
  border:1px solid var(--n-200);
}
.bp-card__h{font-size:11px;font-weight:600;color:var(--n-900)}
.bp-check{margin-top:.6rem;display:grid;gap:.4rem}
.bp-check li{display:flex;align-items:center;gap:.5rem;font-size:10px;color:var(--n-600);line-height:1.3}
.bp-check i{
  width:13px;height:13px;border-radius:50%;flex:none;
  border:1.5px solid var(--n-300);display:grid;place-items:center;
}
.bp-check li.on i{background:var(--g-500);border-color:var(--g-500)}
.bp-check li.on i::before{
  content:"";width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) translate(0,-1px);
}

.bp-soc{
  width:20%;aspect-ratio:4/5;z-index:5;overflow:hidden;
  border:1px solid rgba(255,255,255,.28);display:flex;flex-direction:column;
  justify-content:flex-end;padding:.6rem;
}
.bp-soc--1{left:58%;top:62%;background:var(--g-900)}
.bp-soc--2{left:80%;top:68%;background:var(--g-100)}
.bp-soc__art{position:absolute;inset:0;overflow:hidden}
.bp-soc__art i{position:absolute;border-radius:50%}
.bp-soc--1 .bp-soc__art i:nth-child(1){width:70%;aspect-ratio:1;right:-18%;top:-14%;background:color-mix(in srgb,var(--g-500) 34%,transparent)}
.bp-soc--1 .bp-soc__art i:nth-child(2){width:36%;aspect-ratio:1;left:10%;top:24%;background:color-mix(in srgb,var(--g-100) 22%,transparent)}
.bp-soc--2 .bp-soc__art i:nth-child(1){width:64%;aspect-ratio:1;left:-16%;top:-10%;background:color-mix(in srgb,var(--g-500) 26%,transparent)}
.bp-soc--2 .bp-soc__art i:nth-child(2){width:30%;aspect-ratio:1;right:12%;top:30%;background:color-mix(in srgb,var(--g-900) 16%,transparent)}
.bp-soc__t{position:relative;font-size:10px;line-height:1.25;font-weight:600;letter-spacing:-.012em}
.bp-soc--1 .bp-soc__t{color:var(--n-0)}
.bp-soc--2 .bp-soc__t{color:var(--g-950)}
.bp-soc__dot{position:relative;width:6px;height:6px;border-radius:50%;background:var(--g-500);margin-bottom:.4rem}

.bp-cap{
  margin-top:var(--s-5);font-size:var(--t-xs);line-height:1.55;
  color:var(--g-300);max-width:44ch;
}

/* ---- purchasing panel ------------------------------------------------- */
.buy{
  grid-column:8 / span 5;grid-row:1;
  background:var(--n-0);border-radius:var(--r-xl);
  padding:clamp(1.5rem,2.6vw,2rem);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
}
.buy__name{font-size:var(--t-h4);font-weight:600;letter-spacing:-.014em}
.buy__price{
  margin-top:var(--s-4);display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
}
.buy__price b{
  font-size:clamp(3rem,2rem + 3.2vw,4.25rem);line-height:.92;
  letter-spacing:-.045em;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--n-900);
}
.buy__price span{font-size:var(--t-sm);color:var(--text-2)}
.buy__sum{margin-top:var(--s-4);font-size:var(--t-sm);line-height:1.55;color:var(--text-2)}
.buy__list{margin-top:var(--s-5);display:grid;gap:.55rem;padding:0;list-style:none}
.buy__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);line-height:1.45}
.buy__list i{
  width:16px;height:16px;border-radius:50%;flex:none;margin-top:.15rem;
  background:color-mix(in srgb,var(--g-500) 16%,transparent);
  display:grid;place-items:center;
}
.buy__list i::before{
  content:"";width:6px;height:3px;border-left:1.5px solid var(--g-700);border-bottom:1.5px solid var(--g-700);
  transform:rotate(-45deg) translate(0,-1px);
}
.buy .btn{margin-top:var(--s-6);width:100%;justify-content:center;text-align:center}
.buy .btn--primary{--btn-bg:var(--g-700);--btn-fg:#fff;--btn-bd:var(--g-700)}
.buy .btn--primary:hover{--btn-bg:var(--g-800);--btn-bd:var(--g-800)}
.buy__how{margin-top:var(--s-4);font-size:var(--t-sm);line-height:1.5;color:var(--text-2);text-align:center}
.buy__re{margin-top:var(--s-3);font-size:var(--t-xs);line-height:1.5;color:var(--text-2);text-align:center}

/* ---- what's included --------------------------------------------------- */
.incl-h{margin-top:clamp(3.5rem,7vw,6rem)}
.incl{margin:clamp(1.5rem,3vw,2.5rem) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.incl__row{
  display:grid;grid-template-columns:2.5rem minmax(0,15rem) minmax(0,1fr);
  gap:var(--s-4) var(--s-5);align-items:start;
  padding:clamp(1.1rem,2vw,1.5rem) 0;border-bottom:1px solid var(--line);
}
.incl__n{font-family:var(--mono);font-size:var(--t-readout);color:var(--g-300);padding-top:.2rem}
.incl__t{font-size:var(--t-h4);font-weight:600;letter-spacing:-.012em;color:var(--n-0)}
.incl__d{font-size:var(--t-sm);line-height:1.6;color:var(--g-200);max-width:60ch}
.incl__cond{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.45rem;
  font-size:var(--t-xs);font-weight:600;color:var(--g-500);
  border:1px solid var(--line-brand);border-radius:var(--r-xs);padding:.2rem .45rem;
}

.scope{
  margin-top:clamp(2rem,4vw,3rem);
  border-left:2px solid var(--line-brand);padding-left:var(--s-5);
  display:grid;gap:var(--s-4);max-width:72ch;
}
.scope p{font-size:var(--t-sm);line-height:1.65;color:var(--g-200)}

.offer-bridge{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);font-weight:500;
  letter-spacing:-.016em;color:var(--g-200);
}
.buy-again{display:none;margin-top:var(--s-6)}

/* ---- lead-capture dialog (assessment → scheduling) --------------------- */
.leadbox{
  width:min(640px,94vw);max-height:92vh;padding:0;border:0;
  border-radius:var(--r-xl);background:var(--n-0);color:var(--n-900);
  box-shadow:var(--sh-3);overflow:hidden;
}
.leadbox::backdrop{background:color-mix(in srgb,#07281E 76%,transparent)}
.lead__in{display:flex;flex-direction:column;max-height:92vh}
.lead__head{
  display:flex;align-items:flex-start;gap:var(--s-4);flex:none;
  padding:var(--s-5) var(--s-6);border-bottom:1px solid var(--n-200);
}
.lead__t{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em;font-weight:600}
.lead__s{margin-top:.4rem;font-size:var(--t-sm);line-height:1.5;color:var(--n-600);max-width:48ch}
.lead__x{
  margin-left:auto;appearance:none;background:none;border:1px solid var(--n-300);
  border-radius:var(--r-sm);min-width:44px;min-height:44px;cursor:pointer;
  font-size:1rem;line-height:1;color:var(--n-600);flex:none;
}
.lead__x:hover{border-color:var(--g-600);color:var(--n-900)}
.lead__body{padding:var(--s-6);overflow:auto}

.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
.f{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.f--wide{grid-column:1 / -1}
.f > label{font-size:var(--t-xs);font-weight:600;color:var(--n-700)}
.f > label em{font-style:normal;font-weight:500;color:var(--n-500)}
.f input,.f select{
  width:100%;min-height:48px;padding:.7rem .8rem;
  border:1px solid var(--n-300);border-radius:var(--r-sm);
  background:var(--n-0);color:var(--n-900);font:inherit;font-size:var(--t-sm);
  transition:border-color var(--d-1) var(--e-out),box-shadow var(--d-1) var(--e-out);
}
.f select{appearance:none;padding-right:2.2rem;cursor:pointer}
.f__sel{position:relative;display:block}
.f__sel::after{
  content:"";position:absolute;right:.95rem;top:50%;width:7px;height:7px;
  margin-top:-5px;border-right:1.5px solid var(--n-500);border-bottom:1.5px solid var(--n-500);
  transform:rotate(45deg);pointer-events:none;
}
.f input:focus-visible,.f select:focus-visible{
  outline:none;border-color:var(--g-600);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 20%,transparent);
}
.f__err{display:none;font-size:var(--t-xs);font-weight:600;color:var(--n-900);align-items:center;gap:.4rem}
.f__err::before{
  content:"!";flex:none;width:14px;height:14px;border-radius:50%;
  background:var(--n-900);color:var(--n-0);font-size:10px;line-height:14px;text-align:center;
}
.f[data-bad] .f__err{display:flex}
.f[data-bad] input,.f[data-bad] select{border-color:var(--n-900);background:var(--n-50)}

.lead__privacy{margin-top:var(--s-5);font-size:var(--t-xs);line-height:1.55;color:var(--n-600)}
.lead__privacy a{color:var(--g-700);font-weight:600}
.leadbox .btn{margin-top:var(--s-5);width:100%;justify-content:center}
.leadbox .btn--primary{--btn-bg:var(--g-700);--btn-fg:#fff;--btn-bd:var(--g-700)}
.leadbox .btn--primary:hover{--btn-bg:var(--g-800);--btn-bd:var(--g-800)}
.leadbox .btn[disabled]{opacity:.62;pointer-events:none}

.lead__status{margin-top:var(--s-4)}
.lead__status:empty{margin-top:0}
.lead__msg{
  border:1px solid var(--n-300);border-radius:var(--r-sm);
  padding:.8rem .9rem;font-size:var(--t-sm);line-height:1.55;color:var(--n-900);
}
.lead__msg--dev{border-style:dashed;background:var(--n-50);color:var(--n-700)}
.lead__msg p + p{margin-top:.4rem}
.lead__msg .btn{margin-top:.7rem;width:auto}

@media (max-width:640px){
  .leadbox{width:100vw;max-height:100vh;border-radius:0}
  .lead__in{max-height:100vh}
  .lead__head{padding:var(--s-4)}
  .lead__body{padding:var(--s-4)}
  .f-grid{grid-template-columns:1fr}
  .lead__t{font-size:1.35rem}
}

@media (max-width:1100px){
  .bp-prev{grid-column:1 / span 6}
  .buy{grid-column:7 / span 6}
  .incl__row{grid-template-columns:2rem minmax(0,12rem) minmax(0,1fr)}
}

@media (max-width:860px){
  /* required order: intro → price + CTA → preview → inclusions → scope */
  .offer{display:block}
  .buy{padding:var(--s-5)}
  .bp-prev{margin-top:var(--s-8)}
  .bp-stage{aspect-ratio:360/420;max-width:420px;margin-inline:auto}
  .bp-page{width:54%}
  .bp-page--c{left:22%;top:4%}
  .bp-page--b{left:15%;top:11%}
  .bp-page--a{left:8%;top:18%}
  .bp-cover{left:0;top:25%;width:54%}
  .bp-card{left:56%;top:26%;width:44%}
  .bp-soc{width:26%}
  .bp-soc--1{left:56%;top:64%}
  .bp-soc--2{left:74%;top:70%}
  .bp-cap{max-width:none;text-align:center}
  .incl__row{grid-template-columns:2rem minmax(0,1fr);gap:.35rem var(--s-4)}
  .incl__n{grid-row:1;padding-top:.15rem}
  .incl__d{grid-column:2}
  .scope{padding-left:var(--s-4)}
  .buy-again{display:block}
  .buy-again .btn{width:100%;justify-content:center}
}
@media (max-width:420px){
  .bp-stage{aspect-ratio:360/440}
  .bp-page span{font-size:10px}
}


/* ========================================================================
   20. SECTION 08 — HOW THE BLUEPRINT COMES TOGETHER
   Left: four narrative steps on a progress rail.
   Right: one sticky frame whose visual changes with the active step.
   The four artwork files are declared once each as custom properties on
   .proc, so the desktop frame and the mobile inline media share them.
   ======================================================================== */
.proc{
  display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-6);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.proc__steps{grid-column:1 / span 5;position:relative;padding-left:58px}
.proc__rail{
  position:absolute;left:14px;top:14px;bottom:14px;width:2px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.proc__fill{
  display:block;width:100%;height:var(--fill,25%);background:var(--g-500);
  transition:height 560ms var(--e-enter);border-radius:2px;
}

.pstep{
  position:relative;min-height:clamp(230px,27vh,300px);
  display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--s-5);
}
.pstep__dot{
  position:absolute;left:-50px;top:50%;margin-top:-7px;
  width:14px;height:14px;border-radius:50%;
  background:var(--n-50);border:2px solid var(--line-strong);
  transition:background var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out),transform var(--d-2) var(--e-out);
}
.pstep.is-done .pstep__dot{background:var(--g-500);border-color:var(--g-500)}
.pstep.is-live .pstep__dot{
  background:var(--n-0);border-color:var(--g-500);transform:scale(1.15);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--g-500) 14%,transparent);
}
.pstep__n{
  font-family:var(--mono);font-size:var(--t-readout);letter-spacing:.04em;
  color:var(--n-600);transition:color var(--d-2) var(--e-out);
}
.pstep.is-live .pstep__n{color:var(--g-700)}
.pstep__t{
  margin-top:var(--s-3);font-size:clamp(1.25rem,1rem + 1vw,1.7rem);
  line-height:1.22;letter-spacing:-.022em;font-weight:600;
  color:var(--n-700);max-width:20ch;transition:color var(--d-2) var(--e-out);
}
.pstep.is-live .pstep__t{color:var(--n-900)}
.pstep__p{margin-top:var(--s-3);font-size:var(--t-sm);line-height:1.62;color:var(--text-2);max-width:42ch}
.pstep__media{display:none}

/* ---- sticky visual ---------------------------------------------------- */
.proc__viz{grid-column:7 / span 6}
.pviz__sticky{position:sticky;top:clamp(4.5rem,13vh,7rem)}
.pfig{
  margin:0;background:var(--n-0);border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);
}
.pfig__bar{
  display:flex;align-items:center;gap:var(--s-4);
  padding:.8rem var(--s-5);border-bottom:1px solid var(--line);
  background:var(--bg-sunken);
}
.pfig__n{font-family:var(--mono);font-size:var(--t-readout);color:var(--g-700);flex:none}
.pfig__t{
  font-size:var(--t-xs);font-weight:600;letter-spacing:-.005em;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pfig__stage{position:relative;aspect-ratio:1448/1086;background:var(--g-50)}
.pshot{background-repeat:no-repeat;background-position:center;background-size:contain}
.pfig__stage .pshot{
  position:absolute;inset:0;
  opacity:0;transform:translate3d(0,10px,0);
  transition:opacity 520ms var(--e-enter),transform 520ms var(--e-enter);
}
.pfig__stage .pshot.is-on{opacity:1;transform:none}
.pfig__cap{
  display:flex;gap:.6rem;align-items:flex-start;
  padding:.9rem var(--s-5) 1rem;border-top:1px solid var(--line);
  font-size:var(--t-xs);line-height:1.55;color:var(--text-2);
}
.pfig__cap::before,.pstep__media p::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  margin-top:.45rem;background:var(--n-400);
}

.proc-end{
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s-5);flex-wrap:wrap;
}
.proc-end__t{
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);font-weight:500;
  letter-spacing:-.016em;color:var(--n-700);max-width:46ch;
}
.proc-end__l{font-size:var(--t-sm);font-weight:600;color:var(--g-700);text-decoration:none;white-space:nowrap}
.proc-end__l:hover{color:var(--g-800)}
.proc-end__l span{display:inline-block;transition:transform var(--d-2) var(--e-out)}
.proc-end__l:hover span{transform:translateX(3px)}

@media (max-width:1100px){
  .proc__steps{grid-column:1 / span 6}
  .proc__viz{grid-column:7 / span 6}
  .pstep__t{font-size:1.25rem}
}

@media (max-width:860px){
  /* no sticky column: each step carries its own visual */
  .proc{display:block;margin-top:var(--s-8)}
  .proc__viz{display:none}
  .proc__steps{grid-column:auto;padding-left:44px}
  .proc__rail{left:10px}
  .pstep{min-height:0;padding-block:var(--s-6)}
  .pstep__dot{left:-40px;top:2.3rem;margin-top:0}
  .pstep__t{max-width:none}
  .pstep__p{max-width:none}
  .pstep__media{
    display:block;margin-top:var(--s-5);
    background:var(--n-0);border:1px solid var(--line);
    border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);
  }
  .pstep.is-live .pstep__media{border-color:var(--line-brand)}
  .pstep__media .pshot{display:block;width:100%;aspect-ratio:1448/1086;background-color:var(--g-50)}
  .pstep__media p{
    display:flex;gap:.55rem;align-items:flex-start;
    padding:.75rem var(--s-4) .85rem;border-top:1px solid var(--line);
    font-size:var(--t-xs);line-height:1.55;color:var(--text-2);
  }
  .proc-end{display:block}
  .proc-end__l{display:inline-block;margin-top:var(--s-4)}
}

/* =======================================================================
   SECTION 08 — PROCESS VISUALS  (the only place these images are set)
   ---------------------------------------------------------------------
   --s1  Step 01  modern_dental_practice_signup_ui
   --s2  Step 02  dental_growth_audit_dashboard
   --s3  Step 03  dental_growth_strategy_dashboard
   --s4  Step 04  dental_growth_blueprint_mockup

   To replace a visual, change that one url() — nothing else. The desktop
   sticky frame and the mobile inline image both read the same value, the
   frame is fixed at 4:3 and the image is contained (never cropped), and
   the accessible names describe the STEP, not the artwork, so they stay
   correct after a swap. For the exported build, each value can be a
   relative path, e.g. --s1:url("assets/modern_dental_practice_signup_ui.jpg");
   ======================================================================= */
.proc{
  --s1:url("assets/images/modern_dental_practice_signup_ui.jpg");
  --s2:url("assets/images/dental_growth_audit_dashboard.jpg");
  --s3:url("assets/images/dental_growth_strategy_dashboard.jpg");
  --s4:url("assets/images/dental_growth_blueprint_mockup.jpg");
}
.pshot--1{background-image:var(--s1)}
.pshot--2{background-image:var(--s2)}
.pshot--3{background-image:var(--s3)}
.pshot--4{background-image:var(--s4)}


/* ========================================================================
   21. SECTION 09 — CONNECTED GROWTH CAPABILITIES
   One growth system, four areas of execution. An asymmetric landscape of
   four differently-proportioned zones, joined by a connector path drawn
   behind them from the zones' real positions (see runtime).
   ======================================================================== */
.caps{
  position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(1.25rem,2.4vw,2rem);align-items:start;
  margin-top:clamp(2.5rem,5vw,3.75rem);
}
.caps__svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.caps__link{fill:none;stroke:var(--g-500);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.caps.is-drawn .caps__link{stroke-dashoffset:0;transition:stroke-dashoffset 900ms var(--e-inout)}
.caps.is-drawn .caps__link:nth-of-type(2){transition-delay:260ms}
.caps.is-drawn .caps__link:nth-of-type(3){transition-delay:520ms}
.caps__loop{fill:none;stroke:var(--g-600);stroke-width:1.4;stroke-dasharray:4 7;opacity:0;transition:opacity 700ms var(--e-out) 900ms}
.caps.is-drawn .caps__loop{opacity:.75}
.caps__dot{fill:var(--n-0);stroke:var(--g-500);stroke-width:1.6}
.caps__arrow{fill:var(--g-600);opacity:0;transition:opacity 500ms var(--e-out) 1300ms}
.caps.is-drawn .caps__arrow{opacity:.85}

.czone{
  position:relative;z-index:1;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.25rem,2.2vw,1.75rem);background:var(--n-0);
  box-shadow:var(--sh-1);
  transition:box-shadow var(--d-2) var(--e-out),border-color var(--d-2) var(--e-out);
}
.czone:hover{box-shadow:var(--sh-2);border-color:var(--line-brand)}
.czone--found{grid-column:1 / span 5}
.czone--chosen{grid-column:6 / span 7;margin-top:1.25rem;background:var(--g-50)}
.czone--demand{grid-column:1 / span 7}
.czone--grow{grid-column:8 / span 5;margin-top:1.25rem;background:var(--g-900);border-color:transparent}
.czone--grow:hover{border-color:var(--line-brand)}

.czone--split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1rem,2.2vw,1.75rem);align-items:center}
.czone--demand .czone__viz{order:-1}
.czone--split .czone__viz{margin-top:0}

.czone__head{display:flex;align-items:center;gap:.7rem}
.czone__node{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:var(--t-readout);color:var(--g-700);
  background:var(--n-0);border:1px solid var(--line-brand);
}
.on-dark .czone__node{background:transparent;color:var(--g-300)}
.czone__t{font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem);line-height:1.15;letter-spacing:-.022em;font-weight:600}
.czone__p{margin-top:.65rem;font-size:var(--t-sm);line-height:1.55;color:var(--text-2);max-width:36ch}
.czone__tags{list-style:none;padding:0;margin:var(--s-4) 0 0;display:flex;flex-wrap:wrap;gap:.35rem}
.czone__tags li{
  font-size:var(--t-xs);font-weight:600;line-height:1.3;padding:.3rem .55rem;border-radius:var(--r-xs);
  background:color-mix(in srgb,var(--g-500) 11%,transparent);color:var(--g-800);
}
.on-dark .czone__tags li{background:color-mix(in srgb,var(--g-500) 16%,transparent);color:var(--g-200)}
.czone__viz{margin-top:var(--s-4)}

/* ---- BE FOUND: local-search map --------------------------------------- */
.vmap__q{
  position:absolute;left:.55rem;top:.55rem;z-index:2;
  display:flex;align-items:center;gap:.45rem;padding:.35rem .55rem;box-shadow:var(--sh-1);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--n-0);
  font-size:var(--t-xs);color:var(--n-700);
}
.vmap__q svg{font-size:13px;color:var(--text-3)}
.vmap__tile{
  position:relative;height:clamp(118px,10vw,132px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);background-color:var(--g-50);
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--g-900) 7%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--g-900) 7%,transparent) 1px,transparent 1px);
  background-size:22px 22px;
}
.vmap__road{position:absolute;background:color-mix(in srgb,var(--g-900) 8%,transparent)}
.vmap__road--a{left:-10%;top:56%;width:120%;height:7px;transform:rotate(-8deg)}
.vmap__road--b{left:62%;top:-10%;width:6px;height:130%;transform:rotate(14deg)}
.vpin{
  position:absolute;width:11px;height:11px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);background:var(--n-400);
}
.vpin--a{left:12%;top:58%}
.vpin--b{left:78%;top:62%}
.vpin--c{left:36%;top:70%}
.vpin--you{left:52%;top:30%;width:15px;height:15px;background:var(--g-700)}
.vpin--you::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.5px solid var(--g-500);opacity:0;
}
.caps.is-on .vpin--you::after{animation:capRing 1.8s var(--e-out) 400ms 2}
@keyframes capRing{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
.vmap__you{
  position:absolute;left:calc(52% + 18px);top:calc(30% - 4px);
  font-size:10px;font-weight:600;color:var(--g-800);white-space:nowrap;
  background:var(--n-0);border:1px solid var(--line-brand);border-radius:var(--r-xs);padding:.15rem .4rem;
}
.vmap__states{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin-top:.65rem}
.vmap__states span{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--t-xs);color:var(--text-2)}
.vmap__states i{width:7px;height:7px;border-radius:50%;background:var(--n-300);transition:background 400ms var(--e-out)}
.caps.is-on .vmap__states i{background:var(--g-500)}
.caps.is-on .vmap__states span:nth-child(2) i{transition-delay:200ms}
.caps.is-on .vmap__states span:nth-child(3) i{transition-delay:400ms}

/* ---- GET CHOSEN: practice site, desktop + phone ----------------------- */
.vsite{position:relative;padding-right:20%}
.vsite__win{
  background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--sh-2);
}
.vsite__bar{display:flex;align-items:center;gap:4px;padding:.4rem .55rem;border-bottom:1px solid var(--line);background:var(--n-50)}
.vsite__bar i{width:6px;height:6px;border-radius:50%;background:var(--n-300)}
.vsite__bar span{margin-left:.35rem;font-family:var(--mono);font-size:10px;color:var(--text-3)}
.vsite__body{padding:.75rem .8rem .85rem}
.vsite__h{display:block;font-size:13px;line-height:1.3;font-weight:600;letter-spacing:-.01em;max-width:19ch}
.vsite__chips{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem}
.vsite__chips span{font-size:10px;color:var(--text-2);border:1px solid var(--line);border-radius:var(--r-xs);padding:.15rem .35rem}
.vsite__trust{display:flex;flex-wrap:wrap;gap:.2rem .7rem;margin-top:.5rem;font-size:10px;font-weight:600;color:var(--g-700)}
.vsite__cta{
  display:inline-block;margin-top:.6rem;font-size:11px;font-weight:600;color:var(--n-0);
  background:var(--g-700);border-radius:6px;padding:.4rem .6rem;
  transition:box-shadow 500ms var(--e-out) 300ms;
}
.caps.is-on .vsite__cta{box-shadow:0 0 0 3px color-mix(in srgb,var(--g-500) 24%,transparent)}
.vsite__phone{
  position:absolute;right:0;bottom:-12px;width:27%;aspect-ratio:9/17;
  background:var(--n-0);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);
  padding:.5rem .45rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;
}
.vsite__phone::before{content:"";position:absolute;left:50%;top:6px;width:26%;height:3px;margin-left:-13%;border-radius:2px;background:var(--n-200)}
.vsite__phone b{font-size:10px;line-height:1.2;font-weight:600}
.vsite__phone i{display:block;height:4px;border-radius:2px;background:var(--n-100)}
.vsite__phone .vsite__cta{margin-top:.2rem;font-size:9px;padding:.3rem .35rem;text-align:center}

/* ---- GENERATE DEMAND: paid sources → landing page → inquiry ----------- */
.vflow{display:flex;flex-direction:column;align-items:center}
.vflow__src{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.vchip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .6rem;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--n-0);
  font-size:var(--t-xs);font-weight:600;color:var(--n-700);
}
.vchip i{width:8px;height:8px;border-radius:2px;background:var(--g-700);flex:none}
.vchip:nth-child(2) i{background:var(--g-500)}
.vflow__join{display:block;width:62%;height:30px}
.vflow__join path{fill:none;stroke:var(--line-strong);stroke-width:1.4;vector-effect:non-scaling-stroke}
.vflow__join .sig{stroke:var(--g-500);stroke-width:2.4;stroke-dasharray:.14 1;stroke-dashoffset:1.14;opacity:0}
.caps.is-on .vflow__join .sig{animation:capSig 1100ms var(--e-inout) 500ms forwards}
@keyframes capSig{0%{opacity:0;stroke-dashoffset:1.14}15%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:0}}
.vflow__lp{
  width:min(100%,250px);padding:.7rem .8rem;border-radius:var(--r-md);
  background:var(--n-0);border:1px solid var(--line);box-shadow:var(--sh-2);
  transition:border-color 500ms var(--e-out) 1300ms;
}
.caps.is-on .vflow__lp{border-color:var(--line-brand)}
.vflow__lp b{display:block;font-size:var(--t-xs);font-weight:600}
.vflow__lp span{display:block;margin-top:.15rem;font-size:11px;color:var(--text-2)}
.vflow__lp em{display:flex;gap:.25rem;margin-top:.45rem}
.vflow__lp em i{display:block;height:4px;border-radius:2px;background:var(--n-100);flex:1}
.vflow__lp em i:first-child{flex:2;background:color-mix(in srgb,var(--g-500) 30%,transparent)}
.vflow__down{display:block;width:1.5px;height:18px;background:var(--line-strong);position:relative}
.vflow__down::after{
  content:"";position:absolute;left:50%;bottom:-2px;width:6px;height:6px;margin-left:-3px;
  border-right:1.5px solid var(--line-strong);border-bottom:1.5px solid var(--line-strong);transform:rotate(45deg);
}
.vflow__inq{
  margin-top:.35rem;display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .7rem;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--n-0);
  font-size:var(--t-xs);font-weight:600;color:var(--n-700);
  transition:background 500ms var(--e-out) 1600ms,border-color 500ms var(--e-out) 1600ms,color 500ms var(--e-out) 1600ms;
}
.vflow__inq i{width:7px;height:7px;border-radius:50%;background:var(--n-300);transition:background 500ms var(--e-out) 1600ms}
.caps.is-on .vflow__inq{background:var(--g-50);border-color:var(--line-brand);color:var(--g-800)}
.caps.is-on .vflow__inq i{background:var(--g-500)}

/* ---- KEEP GROWING: trend with checkpoints (no values) ------------------ */
.vtrend svg{display:block;width:100%;height:auto}
.vtrend__base{fill:none;stroke:color-mix(in srgb,var(--n-0) 14%,transparent);stroke-width:1}
.vtrend__line{fill:none;stroke:var(--g-500);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.caps.is-on .vtrend__line{stroke-dashoffset:0;transition:stroke-dashoffset 1400ms var(--e-out) 300ms}
.vtrend__ck{fill:var(--g-900);stroke:var(--g-500);stroke-width:2}
.vtrend__labels{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.35rem;text-align:center}
.vtrend__labels span{font-size:var(--t-xs);font-weight:600;color:var(--g-200)}

.caps-loop{
  display:flex;align-items:center;gap:.6rem;
  margin-top:clamp(2.5rem,3.5vw,3rem);font-size:var(--t-xs);color:var(--text-2);
}
.caps-loop::before{
  content:"";width:28px;height:0;flex:none;
  border-top:1.5px dashed var(--g-600);
}

.caps-end{
  margin-top:clamp(1.75rem,3vw,2.25rem);padding-top:clamp(1.5rem,2.5vw,2rem);
  border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
}
.caps-end__t{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.022em;font-weight:600;max-width:24ch}
.caps-end__p{margin-top:.5rem;font-size:var(--t-sm);color:var(--text-2);max-width:44ch}

@media (max-width:1100px){
  .czone--found{grid-column:1 / span 6}
  .czone--chosen{grid-column:7 / span 6}
  .czone--demand{grid-column:1 / span 6}
  .czone--grow{grid-column:7 / span 6}
  .czone--chosen,.czone--grow{margin-top:0}
  .czone--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .vsite{padding-right:0}
  .vsite__phone{display:none}
}
@media (max-width:960px){
  .czone--split{grid-template-columns:1fr}
  .czone--demand .czone__viz{order:0}
  .czone--split .czone__viz{margin-top:var(--s-5)}
}

@media (max-width:860px){
  /* vertical sequence on a rail; the drawn connector is replaced by it */
  .caps{display:block;padding-left:34px}
  .caps__svg{display:none}
  .caps::before{
    content:"";position:absolute;left:10px;top:24px;bottom:24px;width:2px;
    background:linear-gradient(var(--g-500),var(--g-500)) left top / 2px 100% no-repeat,var(--line);
    border-radius:2px;
  }
  .czone{margin-top:0 !important;margin-bottom:var(--s-5)}
  .czone::before{
    content:"";position:absolute;left:-30px;top:30px;width:12px;height:12px;border-radius:50%;
    background:var(--n-0);border:2px solid var(--g-500);
  }
  .czone:last-child{margin-bottom:0}
  .czone__p{max-width:none}
  .vsite{padding-right:18%}
  .caps-loop{margin-top:var(--s-6)}
  .caps-end{display:block}
  .caps-end .btn{margin-top:var(--s-5);width:100%;justify-content:center}
}


/* ========================================================================
   22. SECTION 10 — WHY NEETECHNOLOGIES
   A calm, editorial "strategy memo" after the dense Section 09. Mostly
   unboxed blocks indexed by a drawn hairline; two quiet surfaces; small
   typographic visuals instead of interfaces. No diagrams, no dashboards.
   ======================================================================== */
/* "NEETECHNOLOGIES?" is one unbreakable word: let the heading scale with the
   viewport on very narrow screens so it never exceeds its column. */
#why-h{font-size:min(var(--t-h2),8vw)}
@media (min-width:861px) and (max-width:1100px){#why-h{font-size:4.1vw}}
.why-lede{
  font-size:clamp(1.1rem,.95rem + .6vw,1.4rem);line-height:1.45;
  letter-spacing:-.014em;color:var(--n-700);max-width:42ch;
}
.why-scale{
  margin-top:var(--s-5);display:flex;align-items:center;gap:.6rem;
  font-size:var(--t-xs);color:var(--text-2);
}
.why-scale::before{content:"";width:18px;height:1px;background:var(--line-strong);flex:none}

.why{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,4vw,3rem) clamp(1.25rem,2.6vw,2.25rem);
  margin-top:clamp(2.5rem,5vw,3.75rem);align-items:start;
}
.wb{position:relative;padding-top:var(--s-6)}
.wb::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line-strong);transform-origin:left;transform:scaleX(0);
  transition:transform 900ms var(--e-inout);
}
.wb.is-in::before{transform:none}
.wb__n{font-family:var(--mono);font-size:var(--t-readout);color:var(--g-700);letter-spacing:.04em}
.wb__t{
  margin-top:.65rem;font-size:clamp(1.2rem,1rem + .8vw,1.5rem);line-height:1.2;
  letter-spacing:-.02em;font-weight:600;max-width:22ch;
}
.wb__p{margin-top:.65rem;font-size:var(--t-sm);line-height:1.62;color:var(--text-2);max-width:48ch}

.wb--1{grid-column:1 / span 7}
.wb--1 .wb__t{font-size:clamp(1.55rem,1.15rem + 1.5vw,2.25rem);max-width:18ch;letter-spacing:-.026em}
.wb--1 .wb__p{font-size:var(--t-body);max-width:46ch}
.wb--2{grid-column:8 / span 5}
.wb--3{grid-column:1 / span 4}
.wb--4{grid-column:5 / span 4}
.wb--5{grid-column:9 / span 4}

/* two quiet surfaces; their border replaces the drawn hairline */
.wb--box{
  padding:var(--s-6);border-radius:var(--r-xl);border:1px solid var(--line);
  transition:border-color var(--d-2) var(--e-out),box-shadow var(--d-2) var(--e-out);
}
.wb--box::before{display:none}
.wb--box:hover{border-color:var(--line-brand);box-shadow:var(--sh-1)}
.wb--2{background:var(--n-50)}
.wb--4{background:var(--g-50)}

/* 01 — the connected path, as type */
.wpath{
  list-style:none;margin:var(--s-8) 0 0;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.wpath::before{
  content:"";position:absolute;left:5px;width:75%;top:5px;height:1px;background:var(--line-strong);
}
.wpath li{position:relative;padding-top:1.35rem;font-size:var(--t-sm);font-weight:600;color:var(--n-700)}
.wpath li::before{
  content:"";position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;
  background:var(--n-0);border:1.5px solid var(--line-strong);
  transition:background 400ms var(--e-out),border-color 400ms var(--e-out);
}
.wb.is-in .wpath li::before{border-color:var(--g-500)}
.wb.is-in .wpath li:nth-child(2)::before{transition-delay:150ms}
.wb.is-in .wpath li:nth-child(3)::before{transition-delay:300ms}
.wb.is-in .wpath li:last-child::before{background:var(--g-500);transition-delay:450ms}

/* 02 — plan → build */
.wsplit{margin-top:var(--s-5);display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem}
.wsplit div{background:var(--n-0);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .8rem}
.wsplit b{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--g-700)}
.wsplit span{display:block;margin-top:.25rem;font-size:var(--t-xs);line-height:1.45;color:var(--text-2)}
.wsplit i{align-self:center;font-style:normal;color:var(--g-600);font-weight:600}

/* 03 — observe / understand / improve */
.wloop{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:.5rem}
.wloop li{display:flex;align-items:center;gap:.65rem;font-size:var(--t-sm);font-weight:600;color:var(--n-700)}
.wloop li::before{
  content:"";width:22px;height:22px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-brand);background:var(--n-0);
}
.wloop li:last-child::before{background:color-mix(in srgb,var(--g-500) 18%,transparent);border-color:var(--g-500)}
.wloop__back{margin-top:.55rem;font-size:var(--t-xs);color:var(--text-2)}

/* 04 — the pull line */
.wpull{
  margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
  font-size:clamp(1.1rem,.95rem + .5vw,1.3rem);line-height:1.3;letter-spacing:-.018em;
  font-weight:600;color:var(--g-800);
}

/* 05 — search ↓ compare ↓ trust ↓ contact */
.wlist{list-style:none;margin:var(--s-5) 0 0;padding:0 0 0 1.15rem;position:relative;display:grid;gap:.55rem}
.wlist::before{content:"";position:absolute;left:4px;top:.55rem;bottom:.55rem;width:1px;background:var(--line-strong)}
.wlist li{position:relative;font-size:var(--t-sm);font-weight:600;color:var(--n-700)}
.wlist li::before{
  content:"";position:absolute;left:-1.15rem;top:.45rem;width:9px;height:9px;border-radius:50%;
  background:var(--n-0);border:1.5px solid var(--g-500);
}
.wlist li:last-child::before{background:var(--g-500)}

.why-end{
  margin-top:clamp(3rem,6vw,4.5rem);padding-top:clamp(1.75rem,3vw,2.25rem);
  border-top:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
}
.why-end__t{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);line-height:1.2;letter-spacing:-.022em;font-weight:600;max-width:24ch}
.why-end__p{margin-top:.5rem;font-size:var(--t-sm);color:var(--text-2);max-width:46ch}

@media (max-width:1100px){
  .why{row-gap:1.75rem;margin-top:var(--s-8)}
  .why-end{margin-top:var(--s-10)}
  .wb{padding-top:var(--s-5)}
  .wb--1 .wb__t{font-size:1.6rem}
  .wpath{margin-top:var(--s-6)}
  .wlist,.wloop{gap:.4rem;margin-top:var(--s-4)}
  .wb--box{padding:var(--s-5)}
  .wsplit{grid-template-columns:1fr;gap:.4rem}
  .wsplit i{justify-self:start;transform:rotate(90deg);margin-left:.6rem}
}
@media (max-width:960px){
  .wb--1{grid-column:1 / span 12}
  .wb--2{grid-column:1 / span 6}
  .wb--3{grid-column:7 / span 6}
  .wb--4{grid-column:1 / span 6}
  .wb--5{grid-column:7 / span 6}
}
@media (max-width:860px){
  .why{display:block}
  .wb{margin-bottom:var(--s-8)}
  .wb:last-child{margin-bottom:0}
  .wb--box{padding:var(--s-5)}
  .wpath{grid-template-columns:repeat(2,1fr);row-gap:1.1rem}
  .wpath::before{display:none}
  .wsplit{grid-template-columns:1fr;gap:.4rem}
  .wsplit i{justify-self:start;transform:rotate(90deg);margin-left:.6rem}
  .why-end{display:block}
  .why-end .btn{margin-top:var(--s-5);width:100%;justify-content:center}
}


/* ========================================================================
   23. SECTION 11 — FAQ & OBJECTION HANDLING
   Calm and editorial: a compact intro column and one accordion. Answers
   are visible without JavaScript; the collapsed state only exists once
   the runtime has taken over (.faq.is-js).
   ======================================================================== */
.faq-grid{align-items:start}
.faq-intro{grid-column:1 / span 4}
.faq-intro__p{margin-top:var(--s-4);font-size:var(--t-sm);line-height:1.6;color:var(--text-2);max-width:34ch}
.faq-note{
  margin-top:var(--s-8);padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--g-50);border:1px solid var(--line);
}
.faq-note__t{font-size:var(--t-h4);line-height:1.3;letter-spacing:-.012em;font-weight:600;max-width:24ch}
.faq-note__p{margin-top:.5rem;font-size:var(--t-sm);line-height:1.6;color:var(--text-2)}

.faq{grid-column:6 / span 7}
.faq__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__h{margin:0;font:inherit}
.faq__q{
  width:100%;display:flex;align-items:flex-start;gap:1rem;
  padding:1.05rem .25rem;min-height:52px;margin:0;
  background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--text);
}
.faq__n{flex:none;width:2rem;padding-top:.22rem;font-family:var(--mono);font-size:var(--t-readout);color:var(--g-700)}
.faq__t{
  flex:1;font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.4;
  letter-spacing:-.01em;font-weight:600;transition:color var(--d-1) var(--e-out);
}
.faq__q:hover .faq__t{color:var(--g-800)}
.faq__q:focus-visible{outline:2px solid var(--g-600);outline-offset:2px;border-radius:var(--r-sm);box-shadow:none}
.faq__ic{
  flex:none;position:relative;width:24px;height:24px;margin-top:.05rem;border-radius:50%;
  border:1px solid var(--line-strong);
  transition:border-color var(--d-2) var(--e-out),background var(--d-2) var(--e-out);
}
.faq__ic::before,.faq__ic::after{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;
  background:var(--n-700);border-radius:1px;transition:transform var(--d-2) var(--e-out);
}
.faq__ic::after{transform:rotate(90deg)}
.faq__item.is-open .faq__ic{border-color:var(--g-600);background:color-mix(in srgb,var(--g-500) 10%,transparent)}
.faq__item.is-open .faq__ic::after{transform:rotate(90deg) scaleX(0)}

/* the answer: a 0fr → 1fr grid row gives a restrained, content-sized open */
.faq__a{display:grid;grid-template-rows:1fr}
.faq__a > div{overflow:hidden;min-height:0}
.faq__a p{
  padding:0 2.75rem 1.25rem 3.25rem;
  font-size:var(--t-sm);line-height:1.65;color:var(--text-2);max-width:66ch;
}
.faq__a b{color:var(--g-800);font-weight:600}
.faq.is-js .faq__item:not(.is-open) .faq__a{grid-template-rows:0fr;visibility:hidden}
.faq.is-ready .faq__a{transition:grid-template-rows 280ms var(--e-out),visibility 0s linear 280ms}
.faq.is-ready .faq__item.is-open .faq__a{transition:grid-template-rows 280ms var(--e-out),visibility 0s}

.faq-end{
  margin-top:clamp(2.5rem,5vw,3.75rem);padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;
}
.faq-end__t{font-size:clamp(1.2rem,1rem + .9vw,1.6rem);line-height:1.25;letter-spacing:-.02em;font-weight:600;max-width:28ch}

@media (max-width:1100px){
  .faq-intro{grid-column:1 / span 5}
  .faq{grid-column:6 / span 7}
}
@media (max-width:860px){
  .faq-intro,.faq{grid-column:1 / -1}
  .faq-intro__p{max-width:none}
  .faq-note{margin-top:var(--s-5)}
  .faq{margin-top:var(--s-6)}
  .faq__q{gap:.75rem;padding:1rem .15rem}
  .faq__n{width:1.6rem}
  .faq__a p{padding:0 .25rem 1.1rem 2.35rem;font-size:var(--t-body)}
  .faq-end{display:block}
  .faq-end .btn{margin-top:var(--s-5);width:100%;justify-content:center}
}


/* ========================================================================
   24. SECTION 12 — FINAL CONVERSION
   The closing turn to ink. Headline, two entry points into the SHARED
   Section 07 lead form, and a light three-step summary. No new form.
   ======================================================================== */
.turn--ink{
  height:clamp(120px,14vw,180px);
  background:linear-gradient(to bottom,var(--n-50) 0%,#4E6A5C 56%,var(--g-950) 100%);
}
.turn--ink .tl{stroke:color-mix(in srgb,var(--g-600) 60%,transparent)}

.fin{position:relative;overflow:hidden}
.fin__env{position:absolute;inset:0;pointer-events:none}
.fin__glow{
  position:absolute;right:-12%;top:-30%;width:min(900px,80vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--g-500) 16%,transparent) 0%,color-mix(in srgb,var(--g-500) 5%,transparent) 40%,transparent 68%);
}
.fin__wrap{position:relative}
.fin__grid{align-items:center}

.fin__h{
  font-size:clamp(2rem,1.2rem + 2.9vw,3.4rem);line-height:1.06;letter-spacing:-.032em;font-weight:600;
  max-width:20ch;
}
.fin__h span{display:block;text-wrap:balance}
.fin__h .a{color:var(--g-300)}
.fin__h .b{color:var(--n-0);margin-top:.18em}
.fin__p{margin-top:var(--s-6);font-size:var(--t-lead);line-height:1.55;color:var(--g-200);max-width:46ch}
.fin__cta{margin-top:var(--s-8);display:flex;flex-wrap:wrap;gap:var(--s-4);align-items:center}
.fin__re{margin-top:var(--s-5);font-size:var(--t-sm);color:var(--g-200)}
.fin__trust{margin-top:.35rem;font-size:var(--t-xs);color:var(--g-300)}

/* three-step summary — lighter than anything else on the section */
.fin__steps{position:relative;padding-left:2.4rem}
.fin__steps ol{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.fin__rail{
  position:absolute;left:.7rem;top:.55rem;bottom:.55rem;width:1.5px;
  background:color-mix(in srgb,var(--n-0) 16%,transparent);
  transform-origin:top;transform:scaleY(0);transition:transform 900ms var(--e-inout);
}
.fin__viz.is-in .fin__rail{transform:none}
.fin__sig{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0}
.fin__sig::before{
  content:"";position:absolute;left:-3.25px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:var(--g-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--g-500) 24%,transparent);
}
.fin__viz.is-in .fin__sig{animation:finSig 1800ms var(--e-inout) 700ms forwards}
@keyframes finSig{0%{opacity:0;transform:translateY(0)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
.fin__steps li{position:relative}
.fin__steps li::before{
  content:"";position:absolute;left:-2.4rem;top:.2rem;margin-left:.33rem;width:13px;height:13px;border-radius:50%;
  background:var(--g-950);border:1.5px solid color-mix(in srgb,var(--g-500) 60%,transparent);
  transition:background 400ms var(--e-out) 2300ms,border-color 400ms var(--e-out) 2300ms;
}
.fin__viz.is-in .fin__steps li:last-child::before{background:var(--g-500);border-color:var(--g-500)}
.fin__steps .n{display:block;font-family:var(--mono);font-size:var(--t-readout);color:var(--g-300)}
.fin__steps b{display:block;margin-top:.2rem;font-size:var(--t-h4);font-weight:600;letter-spacing:-.012em;color:var(--n-0)}

@media (max-width:860px){
  .fin__viz{margin-top:var(--s-10)}
  .fin__cta{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .fin__cta .btn{width:100%;justify-content:center}
  .fin__steps ol{gap:1.2rem}
  .fin__steps b{font-size:1.05rem}
}

/* Sticky mobile bar: stand aside while the final conversion controls are on
   screen. Scoped add-on; the bar's own rules are untouched. */
.mcta.is-on.is-suppressed{transform:translateY(110%)}


/* ========================================================================
   25. SECTION 13 — FOOTER
   The same ink surface as Section 12, one step quieter: a hairline, then
   navigation and legal. No new surface colour, no second conversion block.
   ======================================================================== */
.foot{
  background:var(--g-950);border-top:1px solid var(--line);
  padding-block:clamp(2.75rem,5vw,4rem) clamp(1.5rem,2.5vw,2rem);
}
.foot__grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(1.75rem,3vw,2.75rem);
}
.foot__brand .brandmark{color:var(--n-0)}
.foot__brand .brandmark i{background:color-mix(in srgb,var(--n-0) 12%,transparent)}
.foot__tag{margin-top:var(--s-4);font-size:var(--t-sm);line-height:1.55;color:var(--g-200);max-width:32ch}
.foot__sub{margin-top:.4rem;font-size:var(--t-xs);color:var(--g-300)}

.foot__h{
  font-size:var(--t-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g-300);
}
.foot__list{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:.15rem}
.foot__list a,.foot__off{
  display:inline-block;padding:.45rem 0;font-size:var(--t-sm);line-height:1.4;
  color:var(--n-0);text-decoration:none;
  transition:color var(--d-1) var(--e-out),transform var(--d-1) var(--e-out);
}
.foot__list a:hover{color:var(--g-500);transform:translateX(2px)}
/* not yet configured: plain text, never a broken link, never focusable */
.foot__off{color:var(--g-300);opacity:.7;cursor:default}

.foot__sig{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--g-300) 72%,transparent);
}
.foot__bottom{
  margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4) var(--s-6);flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--g-300);
}
.foot__legal{display:flex;gap:var(--s-5);flex-wrap:wrap}
.foot__legal a{color:var(--g-300);text-decoration:none;padding:.35rem 0}
.foot__legal a:hover{color:var(--n-0)}
.foot__legal:empty{display:none}

@media (max-width:860px){
  .foot{padding-block:var(--s-10) var(--s-6)}
  .foot__grid{grid-template-columns:1fr;gap:var(--s-8)}
  .foot__tag{max-width:none}
  .foot__list{gap:.35rem}
  .foot__list a,.foot__off{padding:.55rem 0}   /* comfortable tap targets */
  .foot__sig{margin-top:var(--s-8)}
  .foot__bottom{display:block}
  .foot__legal{margin-top:var(--s-4)}
}


/* ========================================================================
   26. ATMOSPHERIC BACKGROUNDS (sections 04, 07, 12)
   Each dark section keeps its own colour; the artwork sits behind the
   content at low opacity, masked away from the side the copy occupies and
   veiled where the artwork is busiest. Nothing moves, nothing parallaxes.
   ======================================================================== */
.bg-art{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.bg-art i{
  position:absolute;inset:0;display:block;
  background-repeat:no-repeat;background-size:cover;
  opacity:var(--art-o,.18);
}
.bg-art u{                      /* veil: protects the busy corner */
  position:absolute;inset:0;display:block;text-decoration:none;
}
/* keep every section's own content above the artwork */
.sys > .wrap,.offer-sec > .wrap,.fin__wrap{position:relative;z-index:1}

/* --- 04 Growth System: journey artwork, lower right ------------------- */
.sys{overflow:hidden}
.sys .bg-art i{
  --art-o:.26;
  background-image:var(--art-journey);
  background-position:right 78%;
  -webkit-mask-image:linear-gradient(to right,transparent 6%,#000 52%);
  mask-image:linear-gradient(to right,transparent 6%,#000 52%);
}
.sys .bg-art u{
  background:linear-gradient(to bottom,var(--g-900) 4%,transparent 42%);
}

/* --- 07 Blueprint offer: strategy artwork, left/background ------------ */
.offer-sec{overflow:hidden}
.offer-sec .bg-art i{
  --art-o:.22;
  background-image:var(--art-blueprint);
  background-position:12% 42%;
  -webkit-mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.45) 46%,transparent 72%);
  mask-image:linear-gradient(to right,#000 0%,rgba(0,0,0,.45) 46%,transparent 72%);
}
.offer-sec .bg-art u{
  background:linear-gradient(to bottom,var(--g-900) 2%,transparent 30%,transparent 74%,var(--g-900) 100%);
}

/* --- 12 Final CTA: consultation artwork, right ------------------------ */
.fin .bg-art i{
  --art-o:.20;
  background-image:var(--art-consult);
  background-position:80% 96%;              /* biased low so the top crops */
  -webkit-mask-image:linear-gradient(to right,transparent 22%,#000 66%);
  mask-image:linear-gradient(to right,transparent 22%,#000 66%);
}
.fin .bg-art u{
  background:linear-gradient(to bottom,var(--g-950) 0%,rgba(7,40,30,.62) 40%,transparent 74%);
}

@media (max-width:860px){
  /* the copy runs full width on phones, so the artwork retreats further */
  .sys .bg-art i{--art-o:.18;background-position:72% 88%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 30%,#000 78%);
    mask-image:linear-gradient(to bottom,transparent 30%,#000 78%)}
  .offer-sec .bg-art i{--art-o:.14;background-position:left bottom;
    -webkit-mask-image:linear-gradient(to bottom,transparent 24%,#000 80%);
    mask-image:linear-gradient(to bottom,transparent 24%,#000 80%)}
  .fin .bg-art i{--art-o:.16;background-position:72% 92%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 26%,#000 76%);
    mask-image:linear-gradient(to bottom,transparent 26%,#000 76%)}
  .sys .bg-art u{background:linear-gradient(to bottom,var(--g-900) 16%,transparent 52%)}
  .offer-sec .bg-art u{background:linear-gradient(to bottom,var(--g-900) 12%,transparent 44%)}
  .fin .bg-art u{background:linear-gradient(to bottom,var(--g-950) 10%,transparent 48%)}
}

/* =======================================================================
   ATMOSPHERIC BACKGROUND ARTWORK (sections 04, 07, 12)
   One declaration each. For the exported build swap each value for a
   path, e.g. --art-journey:url("assets/images/dark_green_dental_growth_journey.webp");
   ======================================================================= */
.sys,.offer-sec,.fin{
  --art-journey:url("assets/images/dark_green_dental_growth_journey.webp");
  --art-blueprint:url("assets/images/emerald_dental_strategy_blueprint.webp");
  --art-consult:url("assets/images/moody_dental_consultation_in_green.webp");
}

/* Approved brand and photography additions. Existing motion stays unchanged. */
.site-head .brandmark img{display:block;width:clamp(170px,22vw,250px);height:auto}
.foot__brand .brandmark img{display:block;width:min(260px,100%);height:auto}
.site__feature{display:grid;grid-template-columns:1fr 42%;gap:var(--s-3);align-items:center;margin-top:var(--s-4)}
.site__feature .site__h{margin:0}
.site__photo{width:100%;height:112px;object-fit:cover;object-position:50% 30%;border-radius:var(--r-sm)}
.practice-photo{position:relative;margin:var(--s-10) 0 var(--s-16);border-radius:var(--r-xl);overflow:hidden;isolation:isolate}
.practice-photo img{display:block;width:100%;height:clamp(220px,30vw,380px);object-fit:cover;object-position:70% 48%}
.practice-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--g-950),transparent 85%);z-index:0;opacity:.7}
.practice-photo figcaption{position:absolute;left:var(--s-8);bottom:var(--s-8);max-width:20ch;font-size:var(--t-h3);font-weight:500;line-height:1.25;color:var(--n-0);z-index:1}
.closing-photo{margin:0 0 var(--s-8);overflow:hidden;border:1px solid var(--line-brand);border-radius:var(--r-xl)}
.closing-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 30%}
.enquiry-note{margin:var(--s-4) 0 0;color:var(--g-800);font-size:var(--t-sm);font-weight:600}
.bp-cover__art{position:relative;overflow:hidden}
.bp-cover__photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r-sm)}
.bp-cover__art>svg{display:none}
.lead__payment{padding:var(--s-3) var(--s-4);margin:0 0 var(--s-5);background:var(--g-50);border:1px solid var(--g-200);border-radius:var(--r-sm);color:var(--g-800);font-size:var(--t-sm)}
.form-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
[hidden]{display:none!important}
.lead__msg .btn{margin-top:var(--s-5)}
.foot__list a{overflow-wrap:anywhere}
@media(max-width:600px){
 .site-head__in{gap:var(--s-3)}
 .site-head .brandmark img{width:165px}
 .site-head__cta{font-size:11px;padding:.65rem .7rem;white-space:normal;text-align:center;max-width:135px}
 .site__photo{height:94px}
 .practice-photo figcaption{left:var(--s-5);bottom:var(--s-5);max-width:17ch}
 .practice-photo{margin-bottom:var(--s-10)}
 .closing-photo img{aspect-ratio:16/10}
}
@media(max-width:360px){.site-head .brandmark img{width:145px}.site-head__cta{max-width:110px}}

.bp-cover__mark img{width:160px;max-width:100%;height:auto}
.bp-soc__art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* Revision 2: main-site emerald atmosphere, photographic layers and tighter rhythm. */
:root{--sec-y:clamp(3.5rem,2.5rem + 4vw,6rem);--sec-y-tight:clamp(2.5rem,2rem + 2vw,4rem)}
.site-head{background:#082f24}
.site-head__cta{color:#e4fff1;border-color:#ffffff40;background:#ffffff08}
.site-head__cta:hover{color:#082f24;background:#8fe3bc}
.hero{--hero-pb:clamp(3rem,4vw,5rem);background:radial-gradient(ellipse at 78% 28%,#216647 0,transparent 60%),linear-gradient(135deg,#062a20,#0c4935 72%,#08372a);color:#fff;overflow:clip;padding-top:clamp(1.75rem,4vw,3.5rem)}
.hero__env{background:linear-gradient(transparent,#07332880)}
.hero__mesh{background:linear-gradient(#b9f4d51a 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,#b9f4d51a 1px,transparent 1px) 0 0/64px 64px;mask-image:linear-gradient(90deg,transparent,#000 40%);opacity:.9}
.hero__mesh::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 50%,#ffffff05 50%) 0 0/256px 192px,linear-gradient(transparent 50%,#28b77c08 50%) 64px 0/192px 256px}
.hero__glow{background:radial-gradient(circle,#46d39a30,transparent 65%);animation:emeraldGlow 16s ease-in-out infinite alternate}
.hero__glow--b{background:radial-gradient(circle,#18a66a26,transparent 65%)}
.hero__h1 .l-a{color:#f2fff8}
.hero__h1 .l-b{color:#57dba5}
.hero__lead,.hero__trust{color:#c3ded0}
.hero__cta .btn--primary{background:#35cb8c;color:#052b1e;border-color:#35cb8c;box-shadow:0 12px 34px #0002}
.hero__cta .btn--primary:hover{background:#6be1af}
.hero__cta .btn--quiet{color:#f0fff6}
.hero__stage{padding-top:1rem}
.engine{color:var(--n-900)}
.hero-photos{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-photos__main{position:absolute;right:0;top:3%;width:66%;height:70%;object-fit:cover;object-position:54% 26%;border-radius:var(--r-2xl);border:1px solid #b1edcc55;box-shadow:0 24px 60px #021e1c55;transform:rotate(3deg)}
.hero-photos__detail{position:absolute;left:0;bottom:7%;width:35%;height:32%;object-fit:cover;object-position:64% 50%;border:5px solid #0a402e;border-radius:var(--r-xl);transform:rotate(-7deg)}
.hero-photos__ring{position:absolute;width:75%;aspect-ratio:1;right:-7%;top:-4%;border:1px solid #98e9bd33;border-radius:50%}
.hero .amb__ring{stroke:#a8eccb29}
.hero .amb__arc,.hero .amb__rise{stroke:#62d6a16b}
.hero .site{left:9%;top:33%;width:64%}
.hero .site__feature{display:block;margin-top:var(--s-3)}
.hero .site__h{max-width:21ch}
.hero .site__body{padding:var(--s-4)}
.hero .obj--search{left:0;top:0}
.hero .obj--conv{right:-1%;top:19%}
.strip{background:#0a3b2c;color:#e7fff1;border-top:1px solid #8ad8ab26;border-bottom:1px solid #8ad8ab26}
.strip .strip__statement{color:#e7fff1}
.strip .marquee{color:#bbe7cc}
#journey{--bg:#eff6ef;background:radial-gradient(ellipse at 95% 20%,#a8d8be40,transparent 50%),var(--bg)}
#evidence{--bg:#e7f2e9;background:linear-gradient(140deg,#e4f2e7,#f3f8ee)}
#perspective{--bg:#0a3d2d;background:radial-gradient(ellipse at 8% 20%,#216047,transparent 65%),var(--bg);color:#effff6}
#perspective .vid-head__p,#perspective .vsec__p{color:#c2dfce}
#blueprint-process{--bg:#f1f5eb;background:radial-gradient(ellipse at 90% 10%,#bfdfc480,transparent 55%),var(--bg)}
#growth-capabilities{--bg:#e2f0e5;background:linear-gradient(140deg,#eef6e9,#dbeee0)}
#why-neetechnologies{--bg:#0b3d2e;background:radial-gradient(ellipse at 5% 30%,#27684d,transparent 60%),var(--bg);color:#f2fff5}
#why-neetechnologies .why-lede,#why-neetechnologies .why-scale{color:#c8e4d4}
#why-neetechnologies .wb{--text-2:var(--n-600);color:var(--n-900);background:#f5f9f1;border-radius:var(--r-xl);padding:var(--s-6)}
#why-neetechnologies .wb--1{--text-2:#c8e4d4;color:#effff5;background:#062e22;border:1px solid #76c69a44}
#faq{--bg:#edf5ed;background:radial-gradient(ellipse at 10% 60%,#c2e4cf66,transparent 50%),var(--bg)}
.visual-ribbon{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:var(--s-4);margin-top:var(--s-8);align-items:center}
.visual-ribbon figure{overflow:hidden;border-radius:var(--r-xl);height:210px;box-shadow:var(--sh-2)}
.visual-ribbon img{width:100%;height:100%;object-fit:cover}
.visual-ribbon figure:nth-child(2){height:175px;transform:rotate(-3deg)}
.visual-ribbon figure:nth-child(3){transform:rotate(2deg)}
.why-photos{display:flex;align-items:center;margin-top:var(--s-8);padding-right:var(--s-6)}
.why-photos img{width:62%;height:205px;object-fit:cover;border-radius:var(--r-xl);border:4px solid #144b37;transform:rotate(-4deg)}
.why-photos img+img{width:46%;height:155px;margin-left:-10%;object-position:70% 50%;transform:rotate(5deg)}
.faq-photo{margin:var(--s-6) 0 0;overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-2)}
.faq-photo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:65% 40%}
.turn{max-height:155px}
.hero .engine{aspect-ratio:660/630}
@keyframes emeraldGlow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-5%,6%,0) scale(1.08)}}
@media(max-width:800px){
 .hero-photos__main{width:67%;height:65%;right:1%;top:4%}
 .hero-photos__detail{bottom:14%;width:33%;height:28%}
 .hero .site{top:32%;left:7%;width:70%}
 .visual-ribbon{gap:var(--s-3)}
 .visual-ribbon figure{height:160px}.visual-ribbon figure:nth-child(2){height:130px}
 .why-photos{max-width:500px;margin-bottom:var(--s-5)}
}
@media(max-width:560px){
 .hero{padding-top:var(--s-8)}
 .hero__grid{row-gap:var(--s-6)}
 .hero .engine{aspect-ratio:360/620}
 .hero-photos__main{top:3%;height:45%;width:75%;right:0;border-radius:var(--r-xl);object-position:57% 27%}
 .hero-photos__detail{bottom:4%;left:0;width:38%;height:23%}
 .hero .site{top:29%;left:0;width:90%}
 .hero .obj--search{top:0;left:-1%;width:68%}
 .hero .obj--conv{top:19%;right:-1%;width:51%}
 .hero .site__h{font-size:1.02rem}
 .visual-ribbon{grid-template-columns:1fr 1fr;margin-top:var(--s-6)}
 .visual-ribbon figure{height:160px}.visual-ribbon figure:nth-child(2){display:none}
 .visual-ribbon figure:nth-child(3){height:140px}
 .why-photos img{height:180px}.why-photos img+img{height:140px}
 .turn{max-height:100px}
}

/* Screenshot reference pass: typography and photo-led headings across the page. */
:root{--t-hero:clamp(2.5rem,1.1rem + 3.5vw,4rem);--t-h2:clamp(2rem,1.25rem + 2.8vw,3.4rem)}
h1,h2,h3{font-weight:650}
.hero__h1{font-weight:680;letter-spacing:-.045em;line-height:1.02}
.hero__lead{font-size:clamp(1.125rem,1rem + .5vw,1.4rem);line-height:1.55}
.hero .obj--conv{left:auto;right:-1%}
.heading-image{display:inline-block;width:2.1em;height:.9em;vertical-align:baseline;position:relative;top:.08em;margin:0 .1em;border-radius:999px;overflow:hidden;box-shadow:0 0 0 1px #b0d8bf50}
.heading-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:65% 45%}
.heading-image--team img{object-position:50% 28%}
.strip__statement{max-width:100%;font-size:clamp(1.8rem,1.2rem + 2.5vw,3.5rem);line-height:1.2;letter-spacing:-.035em;font-weight:650}
.strip .strip__intro{max-width:none}
.mint-emphasis{color:#50d59c}
.text-highlight{background:linear-gradient(transparent 62%,#a8dfbb 62%,#a8dfbb 94%,transparent 94%)}
#system{isolation:isolate;overflow:clip;background:#073629}
#system::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#073629ea,#073629ba 50%,#073629dc),url('assets/images/dental-reception.webp') center/cover;opacity:1}
#system>.wrap{position:relative;z-index:1}
#system .bg-art{display:none}
#system .sys__intro,#system .sys__lead{color:#c6e6d4}
#dental-growth-blueprint{background:radial-gradient(ellipse at 90% 20%,#1f6547,transparent 65%),#0b3d2e}
#dental-growth-blueprint .bg-art i{opacity:.28}
#next-step{background:radial-gradient(ellipse at 80% 55%,#1c5e42,transparent 60%),#072b21}
#perspective .muted{color:#bedfcb}
#perspective .vid{color:var(--n-900);--text-2:var(--n-600)}
#perspective .vstage{background:#ffffff0a;border-color:#78ca9b44}
#perspective .vp{color:var(--n-900)}
#why-neetechnologies .wb--1 .wb__n{color:#5cdda5}
#why-neetechnologies .wb--1 .wpath{color:#f2fff6}
.faq-note{border-radius:0 0 var(--r-xl) var(--r-xl);margin-top:0;background:#fff;padding:var(--s-6)}
.faq-photo{border-radius:var(--r-xl) var(--r-xl) 0 0}
.practice-photo{margin-top:var(--s-8);margin-bottom:var(--s-10)}
#journey .stg{min-height:clamp(200px,24vh,260px)}
@media(max-width:800px){#journey .stg{min-height:0}.strip__statement{line-height:1.25}.heading-image{width:1.7em;height:.85em}}
@media(prefers-reduced-motion:reduce){.hero__glow{animation:none}.hero-photos__main,.hero-photos__detail{transform:none}}

/* Full-width editorial statement and readable moving service rail. */
.strip__head.col-7.start-6{grid-column:1/-1}
.strip__statement{max-width:1100px;font-size:clamp(2rem,1.35rem + 3vw,3.7rem)}
.strip .cap{color:#d9f5e6}
.strip .sep::before{background:rgba(176,235,204,.35)}

/* Guided Blueprint enquiry, followed by optional in-dialog scheduling. */
html.lead-open{overflow:hidden}
.leadbox [hidden]{display:none!important}
.leadbox{width:min(680px,calc(100vw - 28px));max-height:92dvh}
.lead__in{max-height:92dvh}
.lead__body{overscroll-behavior:contain;min-height:0}
.lead__head{background:linear-gradient(115deg,#07392b,#176a49);color:#fff;border-bottom:0}
.lead__head .lead__s{color:#d0e9dc}
.lead__eyebrow{font-size:10px;font-weight:700;letter-spacing:.12em;color:#80e5b3;margin-bottom:8px}
.lead__x{color:white;border-color:#ffffff55}
.lead__x:hover{color:#a0f1c5;border-color:#a0f1c5}
.lead__steps{display:flex;list-style:none;margin:0;padding:14px 24px;gap:20px;background:#eff7f1;border-bottom:1px solid #d8e7db;flex:none}
.lead__steps li{display:flex;align-items:center;gap:7px;color:#52665b;font-size:12px;font-weight:600}
.lead__steps span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #a8c3b2;border-radius:50%}
.lead__steps [aria-current],.lead__steps .is-done{color:#075c3a}
.lead__steps [aria-current] span{background:#07613e;color:white;border-color:#07613e}
.lead__visual{position:relative;background:radial-gradient(ellipse at 80% 30%,#2f9760,transparent 65%),linear-gradient(120deg,#073d2e,#12613f);padding:24px;border-radius:18px;overflow:hidden;margin-bottom:22px}
.lead__visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff09 1px,transparent 1px),linear-gradient(90deg,#ffffff09 1px,transparent 1px);background-size:32px 32px}
.lead__blueprint{position:relative;border:1px solid #b5f3ce60;border-radius:12px;padding:18px;color:white;max-width:310px;background:#083d2dc9}
.lead__blueprint>span,.lead__blueprint small{font-size:9px;letter-spacing:.1em;color:#a5ecc4}
.lead__blueprint strong{display:block;font-size:29px;line-height:1.1;margin:13px 0}
.lead__chart{display:flex;align-items:end;height:45px;gap:8px;margin-bottom:10px}
.lead__chart i{width:22px;background:#44d598;border-radius:3px 3px 0 0;height:22%}
.lead__chart i:nth-child(2){height:40%}.lead__chart i:nth-child(3){height:60%}.lead__chart i:nth-child(4){height:76%}.lead__chart i:nth-child(5){height:100%}
.lead__price{position:absolute;right:25px;top:25px;background:#b6f2ca;color:#063d2b;border-radius:50%;width:90px;height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;font-weight:700;box-shadow:0 10px 30px #001f2660}
.lead__price small{font-size:11px}
.lead__overview h4{font-size:22px;line-height:1.25;color:#103e2c}
.lead__benefits{list-style:none;display:grid;gap:12px;padding:0;margin-top:18px}
.lead__benefits li{display:grid;grid-template-columns:105px 1fr;gap:12px;font-size:14px;line-height:1.45}
.lead__benefits b{color:#07613e}.lead__benefits span{color:#52665b}
.lead__fine{font-size:12px;line-height:1.5;color:#52665b;margin-top:12px;text-align:center}
.lead__later,.lead__back{display:block;border:0;background:none;color:#17613f;text-decoration:underline;cursor:pointer;padding:12px;font:inherit;font-size:13px}
.lead__later{margin:4px auto 0}.lead__back{margin:0 0 14px;padding-left:0}
.lead__booking iframe{border:0;width:100%;height:650px;background:white;border-radius:10px;margin-top:16px}
.lead__external{display:block;margin-top:14px;color:#096740;text-decoration:underline}
.leadbox.is-booking{width:min(1020px,calc(100vw - 28px))}
@media(max-width:640px){.leadbox{width:calc(100vw - 16px);border-radius:18px;max-height:94dvh}.lead__in{max-height:94dvh}.lead__steps{padding:12px 16px;gap:12px}.lead__steps li{font-size:10px;gap:5px}.lead__visual{padding:16px}.lead__price{right:14px;top:18px;width:70px;height:70px;font-size:27px}.lead__blueprint{max-width:245px;padding:14px}.lead__blueprint strong{font-size:25px}.lead__benefits li{grid-template-columns:90px 1fr;font-size:13px}.lead__overview h4{font-size:20px}}
.lead__visual{padding:16px;margin-bottom:16px}
.lead__blueprint{padding:12px 16px}
.lead__blueprint strong{font-size:24px;margin:8px 0}
.lead__chart{height:28px;margin-bottom:5px}
.lead__overview .btn{margin-top:18px}
.lead__benefits{gap:8px;margin-top:12px}

.lead__question{margin-top:18px}
.f textarea{width:100%;padding:12px;border:1px solid var(--n-300);border-radius:var(--r-sm);font:inherit;font-size:14px;color:#183d2d;background:white;resize:vertical;min-height:90px}
.f textarea:focus-visible{outline:2px solid #167b50;outline-offset:2px}
/* v6 — continuous photographic chapters and restrained editorial details. */
.site-head{position:fixed;inset:0 0 auto;z-index:40;background:transparent;padding-block:20px;transition:background .25s,box-shadow .25s,padding .25s}
.site-head.is-scrolled{background:#082f24f5;box-shadow:0 1px 0 #ffffff20,0 8px 30px #00251a20;padding-block:12px;backdrop-filter:blur(16px)}
.site-head__cta{display:inline-flex}
.hero-shell{position:relative;isolation:isolate;background:radial-gradient(ellipse at 85% 20%,#24694d,transparent 60%),linear-gradient(120deg,#052a20,#0c4834);color:#effff6}
.hero-shell::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#b8edce12 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,#b8edce12 1px,transparent 1px) 0 0/64px 64px;mask-image:linear-gradient(90deg,transparent,#000 65%)}
.hero-shell .hero{background:transparent;padding-top:clamp(130px,12vw,170px)}
.hero-shell .hero__env{background:none}.hero-shell .hero__mesh{opacity:.3}
.hero-shell .strip{background:transparent;padding:0 0 24px;border:0}
.hero-shell .rail{margin:0;border-block:1px solid #92d3ae38;padding-block:25px;background:#052c2020}
.hero-shell .strip .cap{font-size:clamp(1rem,1.5vw,1.35rem);color:#d3eee0}
.journey-statement{max-width:900px;font-size:clamp(1.15rem,1rem + .8vw,1.65rem);line-height:1.5;margin:38px 0 0;color:#5f7367;border-left:3px solid #28ad78;padding-left:22px}
.journey-statement strong{color:#0b5139;font-weight:600}
.story-surface{position:relative;isolation:isolate;color:#f2fff8;background:#063528;overflow:clip}
.story-surface::before,.story-surface::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.story-surface::before{background:linear-gradient(100deg,#042e24f2,#063c2dd9 55%,#073629ed),var(--story-image) center/cover no-repeat}
.story-surface::after{background:linear-gradient(#b8edce0a 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,#b8edce0a 1px,transparent 1px) 0 0/72px 72px}
.story-surface--system{--story-image:url('assets/images/dental-team-huddle-v6.webp')}
.story-surface--offer{--story-image:url('assets/images/practice-planning-v6.webp')}
.story-surface--closing{--story-image:url('assets/images/dental-care-detail-v6.webp')}
.story-surface #system,.story-surface #dental-growth-blueprint,.story-surface #next-step{background:transparent;overflow:visible}
.story-surface #system::before,.story-surface .bg-art,.story-surface .fin__env{display:none}
.story-surface .turn{background:none!important;max-height:145px;height:clamp(90px,13vw,145px)}
.story-surface .turn .tl{stroke:#59ce9c;opacity:.65}
.story-surface .turn__node{background:#35ce91}
.story-bridge{padding-top:clamp(45px,6vw,80px)}
.story-bridge .jrn-end{margin-top:0;padding-top:0;border-top:0}
.story-bridge .jrn-end__t{color:#edfff5}.story-bridge .jrn-end__p{color:#bdd8ca}
.story-surface #system{padding-top:36px}
.story-surface #dental-growth-blueprint{padding-top:35px}
.story-surface #next-step{padding-top:32px}
.on-dark .text-highlight,#why-neetechnologies .text-highlight{color:#6be2ae;background:linear-gradient(transparent 68%,#66e8aa25 68%,#66e8aa25 94%,transparent 94%)}
#evidence{background:radial-gradient(ellipse at 90% 0,#dceee2,transparent 55%),#f5f7ef}
#evidence .ev-id{display:inline-block;background:#fff9;border:1px solid #cbded0;border-radius:30px;padding:10px 16px;font-size:.85rem;margin-top:18px}
.ev__tabs{gap:10px;border-bottom:0;display:flex;flex-wrap:wrap;margin-bottom:12px}
.ev__tab{border:1px solid #bed6c7;border-radius:30px;padding:12px 22px;background:#ffffff70}
.ev__tab[aria-pressed="true"]{background:#0d6746;color:#fff;border-color:#0d6746;box-shadow:0 5px 15px #0d67461a}
.ev__panel{background:#ffffffd9;border:1px solid #cbded0;border-top:4px solid #24946a;padding:28px;box-shadow:0 18px 40px #244c3510;gap:0}
.ev__metric{color:#0a553a;letter-spacing:-.06em;font-size:clamp(4rem,6vw,6rem);line-height:1.1;margin-top:24px}
.ev__delta{margin-top:12px;line-height:1.5;font-size:.95rem}.ev__delta b{background:#def2e6;padding:4px 7px;border-radius:5px;display:inline-block}
.ev-comparison{margin:30px 0 24px;padding:24px 0;border-block:1px solid #d9e5dc}
.ev-comparison__eyebrow{font-size:9px;letter-spacing:.12em;font-weight:650;color:#527762;margin-bottom:24px}
.ev-comparison__row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#4e6659;margin:15px 0 8px}
.ev-comparison__row b{color:#0b5d40;font-variant-numeric:tabular-nums}
.ev-comparison__track{height:12px;border-radius:3px;background:#eef3ed;overflow:hidden}
.ev-comparison__track i{display:block;height:100%;background:#bdd5c5;border-radius:3px;transition:width .35s}
.ev-comparison__track--current i{width:100%;background:linear-gradient(90deg,#0e7953,#43c98e)}
.ev-comparison__note{font-size:11px;line-height:1.6;color:#6a7d70;margin-top:17px}
.ev__qual{font-size:12px;line-height:1.6;padding-top:18px;border-top:0}
.ev__frame{box-shadow:0 22px 48px #193e2b14;border:1px solid #d3dfd3}
#perspective{--bg:#faf8f1;color:#13291f;background:radial-gradient(ellipse at 5% 20%,#e4eadb,transparent 50%),#faf8f1}
#perspective .muted,#perspective .vid-head__p,#perspective .vsec__p{color:#617166}
#perspective .vstage{background:transparent;border:0;padding:0;box-shadow:none}
#perspective .vids{gap:32px}
#perspective .vid{border:1px solid #d4ddcf;box-shadow:0 12px 30px #233c2310;border-radius:20px;overflow:hidden;transition:transform .25s,box-shadow .25s}
#perspective .vid:hover{transform:translateY(-4px);box-shadow:0 20px 45px #233c231c}
#perspective .vid__label{border-radius:20px;background:#e5f0e4}
#perspective .vstage__note{color:#6b7c70;border-top:1px solid #d9e1d4;padding-top:20px}
#why-neetechnologies{background:linear-gradient(#b6f3ce0b 1px,transparent 1px) 0 0/66px 66px,linear-gradient(90deg,#b6f3ce0b 1px,transparent 1px) 0 0/66px 66px,radial-gradient(ellipse at 5% 30%,#27684d,transparent 60%),#0b3d2e}
.practice-photo{margin-top:35px}.practice-photo img{object-position:center 42%}
.visual-ribbon figure,.visual-ribbon figure:nth-child(2),.visual-ribbon figure:nth-child(3){transform:none;border:1px solid #c1d9c5;box-shadow:0 8px 24px #214e2c10}
.why-photos img,.why-photos img+img{transform:none;border-width:2px}
@media(max-width:800px){.ev__panel{padding:24px}.ev-comparison{margin:24px 0 16px}.ev__metric{font-size:4.7rem}.site-head{padding-block:16px}}
@media(max-width:560px){.site-head .brandmark img{width:155px}.site-head__cta{display:inline-flex;font-size:10px;padding:9px 10px;max-width:132px}.site-head.is-scrolled{padding-block:12px}.hero-shell .hero{padding-top:116px}.hero-shell .rail{padding-block:20px}.story-bridge{padding-top:40px}.story-surface .turn{max-height:85px}.journey-statement{margin-top:26px;font-size:1.1rem}.ev__tabs{gap:6px}.ev__tab{font-size:12px;padding:10px 12px}.ev__panel{padding:22px}.ev-comparison__eyebrow{font-size:9px}#perspective .vids{gap:22px}.heading-image{width:1.7em}.why-photos img{height:155px}.why-photos img+img{height:130px}}
@media(prefers-reduced-motion:reduce){.site-head,.ev-comparison__track i,#perspective .vid{transition:none}}

section[id]{scroll-margin-top:96px}
#perspective .vid-head::before{content:"PRACTICE PERSPECTIVES";display:block;grid-column:1/-1;font:600 11px/1.4 var(--font-mono,monospace);letter-spacing:.16em;color:#34785b;margin-bottom:16px}
.video-eyebrow{font:600 11px/1.4 monospace;letter-spacing:.15em;color:#34785b;margin-bottom:20px}
.story-surface::before{background:linear-gradient(100deg,#042e24f5,#063c2de9 55%,#073629f2),var(--story-image) center/cover no-repeat}
.ev__tab::after{display:none}