/* Lazar Upper Cervical — site stylesheet
   Tokens from docs/brand-system/styles.css (prefix --mucc-), mapped onto page roles in docs/design-package.md §2. */

:root{
  --mucc-blue:#21328A;--mucc-blue-deep:#131E52;--mucc-blue-soft:#3B4780;--mucc-blue-mid:#2E43A8;--mucc-blue-lift:#4E5FC9;
  --mucc-blue-mist:#8E9BCB;--mucc-blue-pale:#A8B4E0;--mucc-blue-tint:#EAECF7;
  --mucc-bone:#F4F3EF;--mucc-bone-deep:#E7E5DE;--mucc-white:#FFFFFF;
  --mucc-gray-700:#5C6570;--mucc-gray-500:#8A929C;--mucc-gray-300:#B0B6BD;--mucc-line:#E5E5E0;

  --canvas:var(--mucc-bone);--panel:var(--mucc-white);--canvas-quiet:var(--mucc-blue-tint);
  --canvas-field:var(--mucc-blue);--canvas-deep:var(--mucc-blue-deep);
  --accent:var(--mucc-blue);--accent-hover:var(--mucc-blue-mid);--accent-muted:var(--mucc-blue-tint);
  --text-primary:var(--mucc-blue-deep);--text-secondary:var(--mucc-gray-700);
  --text-on-field:var(--mucc-white);--text-pale-on-field:var(--mucc-blue-pale);
  --rule:var(--mucc-line);--rule-strong:var(--mucc-gray-700);--strand:var(--mucc-blue-deep);--held-point:var(--mucc-blue-deep);
  --focus-ring:var(--mucc-blue-lift);
  --tshadow:0 1px 2px rgba(19,30,82,.55),0 3px 12px rgba(19,30,82,.35),0 10px 44px rgba(19,30,82,.30);

  --font-core:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-read:'Source Serif 4',Georgia,'Times New Roman',serif;

  --step--1:0.8125rem;--step-0:1rem;--step-1:1.25rem;--step-2:1.5625rem;--step-3:1.9531rem;--step-4:2.4414rem;--step-5:3.0518rem;--step-6:3.8147rem;
  --ease-out:cubic-bezier(.22,.61,.36,1);--ease-inout:cubic-bezier(.65,0,.35,1);
  --radius-card:16px;--radius-img:18px;--radius-pill:999px;
  --shadow-3:0 18px 44px rgba(19,30,82,.14),0 3px 10px rgba(19,30,82,.06);
  --pad-x:48px;--section-y:104px;--wrap:1240px;
}
@media (max-width:900px){:root{--pad-x:24px;--section-y:64px}}
@media (max-width:480px){:root{--pad-x:20px;--section-y:56px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text-primary);font-family:var(--font-core);font-size:var(--step-0);line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
.js body{opacity:0;transition:opacity .5s var(--ease-out)}
.js body.ready{opacity:1}
h1,h2,h3,h4{margin:0;font-family:var(--font-core);font-weight:600;line-height:1.12;letter-spacing:-.015em;text-wrap:pretty}
h1{font-size:var(--step-5);font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--step-4)}
h3{font-size:var(--step-2)}
p{margin:0 0 1em;text-wrap:pretty}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--mucc-blue-pale);transition:color .15s,border-color .15s}
a:hover{color:var(--text-primary);border-bottom-color:var(--accent)}
img,svg,video{max-width:100%;display:block}
button{font:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.skip{position:absolute;left:-999px;top:12px;background:var(--panel);color:var(--text-primary);padding:10px 16px;border-radius:var(--radius-pill);z-index:100;border:1px solid var(--rule-strong)}
.skip:focus{left:12px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.eyebrow{font-family:var(--font-core);font-weight:600;font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.g-field .eyebrow,.g-deep .eyebrow{color:var(--text-pale-on-field)}
.read{font-family:var(--font-read);font-size:1.0625rem;line-height:1.62;max-width:64ch}
.lead{font-family:var(--font-read);font-weight:600;font-size:var(--step-1);line-height:1.5;max-width:46ch;color:var(--mucc-blue-soft)}
.small{font-size:var(--step--1);color:var(--text-secondary)}
.num{font-variant-numeric:tabular-nums;font-weight:600}

/* the one environment behind everything: paper grain, whisper level */
body::before{content:"";position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .07 0 0 0 0 .12 0 0 0 0 .32 0 0 0 .6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  animation:grain 90s linear infinite -30s}
@keyframes grain{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(-2%,1%,0)}100%{transform:translate3d(0,0,0)}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-pill);border:1px solid transparent;padding:16px 30px;font-weight:600;font-size:15px;line-height:1;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,border-color .15s,transform .15s;text-shadow:none;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--text-on-field);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--text-on-field)}
.btn-outline{background:transparent;color:var(--text-primary);border-color:var(--text-primary)}
.btn-outline:hover{background:var(--canvas)}
.g-field .btn-primary{background:var(--mucc-white);color:var(--accent);border-color:var(--mucc-white)}
.g-field .btn-primary:hover{background:var(--mucc-bone)}
.g-field .btn-outline{color:var(--mucc-white);border-color:rgba(255,255,255,.7)}
.g-field .btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:11px 22px;font-size:13.5px}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:14px;padding-bottom:14px}
.nav .brand{border:0;display:inline-flex;align-items:center}
.nav .brand{flex:none}
.nav .brand img{height:44px;width:auto;flex:none}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links .book-m{display:none}
.nav-links a{border:0;font-weight:500;font-size:14px;color:var(--mucc-blue-soft);padding:6px 0;position:relative}
.nav-links a:hover{color:var(--text-primary)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent)}
.nav .phone{border:0;font-weight:500;font-size:14px;color:var(--mucc-blue-soft)}
.nav-links .phone-m{display:none}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:var(--radius-pill);padding:10px 14px;font-weight:600;font-size:13px;color:var(--text-primary);cursor:pointer}
@media (max-width:900px){
  .nav-links{display:none;position:absolute;left:0;right:0;top:100%;background:rgba(255,255,255,.98);border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad-x) 16px}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .nav.open .nav-links{display:flex}
  .nav-links .phone-m{display:block;font-weight:600;color:var(--accent)}
  .nav-toggle{display:inline-flex}
  .nav .phone{display:none}
  .nav-links .book-m{display:block}
}

@media (max-width:520px){.nav .brand img{height:34px}.nav .wrap{gap:10px}.nav .btn-sm{padding:10px 14px;font-size:12.5px}.xs-hide{display:none}.nav-toggle{padding:9px 12px}}

/* ---------- hero: pinned scrub ---------- */
.hero{position:relative;height:620vh;background:var(--canvas);z-index:1}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(19,30,82,0) 45%,rgba(19,30,82,.10) 100%);opacity:calc(1 - var(--settle,0))}
.ring{position:absolute;right:28px;bottom:28px;width:36px;height:36px;color:var(--mucc-blue-soft);transform:rotate(-90deg);opacity:.9;transition:opacity .4s}
.ring circle{transition:stroke-dashoffset .12s linear}
.stage.video-ready .ring{opacity:0}
.chevron{position:absolute;right:28px;bottom:28px;width:36px;height:36px;color:var(--mucc-blue-soft);opacity:.8}

/* caption bands */
.band{position:absolute;opacity:0;pointer-events:none;color:var(--text-primary);text-shadow:0 0 14px rgba(244,243,239,.80),0 0 2px rgba(244,243,239,.60);--k:0}
.band.left{left:6vw;width:min(40vw,560px)}
.band.right{right:6vw;width:min(40vw,560px);text-align:right}
.band.mid{top:50%;transform:translateY(-50%)}
.band.low{top:58%}
.band h2{font-family:var(--font-core);font-weight:700;font-size:clamp(28px,4.2vw,58px);line-height:1.06;letter-spacing:-.02em;margin:0 0 .35em}
.band .sub{font-family:var(--font-read);font-style:italic;font-weight:400;font-size:clamp(17px,1.55vw,23px);line-height:1.45;margin:0;color:var(--mucc-blue-soft)}
.band::before{content:"";position:absolute;inset:-14% -12%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 66% at 50% 50%,rgba(244,243,239,var(--scrim,.5)) 0%,rgba(244,243,239,calc(var(--scrim,.5)*.62)) 46%,rgba(244,243,239,0) 76%)}
.band.settle{left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,760px);text-align:center;color:var(--text-primary);text-shadow:none;pointer-events:none;background:rgba(244,243,239,.97);border-radius:var(--radius-card);padding:44px 44px 34px;box-shadow:var(--shadow-3)}
.band.settle.live{pointer-events:auto}
.band.settle::before{display:none}
.band.settle .held{position:absolute;left:50%;top:-4px;margin:0;transform:translateX(-50%)}
.band.settle .guard{font-family:var(--font-read);font-style:italic;font-size:clamp(18px,1.7vw,24px);color:var(--mucc-blue-soft);margin:0 0 .5em}
.band.settle h2{font-size:clamp(30px,4.4vw,60px)}
.band.settle .cta-row{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.band.settle .trust{font-weight:500;font-size:13px;color:var(--text-secondary);margin:0}
.band.settle .alt{font-size:14px;color:var(--text-secondary);margin:6px 0 0}
.band.settle .alt a{border-bottom-color:var(--mucc-blue-pale)}
.held{display:block;width:8px;height:8px;border-radius:50%;background:var(--held-point);margin:0 auto 18px;position:relative;opacity:var(--kb,0)}
.held::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:var(--held-point);opacity:.18;animation:pulse 6s ease-in-out infinite -1.2s}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.14}50%{transform:scale(1.7);opacity:.05}}
/* the strand's own vertical reference behind the settle copy, drawn by CSS, not the video */

/* entrances: transform and opacity only, scrubbed off --k, reversible */
.w{display:inline-block;white-space:pre}
.c{display:inline-block}
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
.e-weave .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
.e-rise .guard{--ks:clamp(0,var(--k,0)*4,1);opacity:var(--ks)}
.e-rise .cta-row{--kb:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*12px))}
.e-rise .held{--kb:clamp(0,(var(--k,0) - .78)*5,1)}

/* static hero (phones, portrait tablets, coarse portrait, landscape phones, reduced motion) */
.static-hero{display:none;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:96px var(--pad-x) 48px}
.static-hero .poster-still{position:absolute;inset:0;background-size:cover;background-position:center}
.static-hero .lane{position:relative;max-width:640px;padding:28px 22px;border-radius:var(--radius-card);background:rgba(244,243,239,.97);box-shadow:var(--shadow-3)}
.static-hero .display{font-weight:700;font-size:clamp(30px,6.5vw,44px);line-height:1.08;letter-spacing:-.02em;margin:12px 0 14px;text-wrap:pretty}
.static-hero .sub{font-family:var(--font-core);font-weight:400;font-size:17px;line-height:1.5;max-width:40ch;margin:0 auto 20px;color:var(--mucc-blue-soft)}
.static-hero .trust{font-weight:500;font-size:13px;color:var(--text-secondary);margin:12px 0 0}
.static-hero .alt{font-size:14px;color:var(--text-secondary);margin:6px 0 0}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .hero{height:100vh;height:100svh}
  .stage video,.stage .band,.stage .ring,.stage .chevron,.stage .scrim,.stage .poster{display:none}
  .static-hero{display:flex}
}
@media (max-height:560px){.ring,.chevron{display:none}}

@media (max-width:1180px){.nav .phone{display:none}.nav-links{gap:20px}}

/* ---------- sections ---------- */
.section{position:relative;padding-top:var(--section-y);padding-bottom:var(--section-y);z-index:1}
.g-white{background:var(--panel)}
.g-bone{background:var(--canvas)}
.g-tint{background:var(--canvas-quiet)}
.g-field{background:var(--canvas-field);color:var(--text-on-field)}
.g-deep{background:var(--canvas-deep);color:var(--mucc-blue-mist)}
.g-field h2,.g-deep h2,.g-field h3{color:var(--text-on-field)}
.g-field p{color:var(--text-pale-on-field)}
.g-field .lead{color:var(--text-pale-on-field)}
.g-field a:not(.btn){color:var(--mucc-white);border-bottom-color:rgba(255,255,255,.45)}
.g-field a:not(.btn):hover{color:var(--mucc-white);border-bottom-color:var(--mucc-white)}
.g-field .fit .not,.g-field .fit li{color:var(--text-on-field)}
.g-field .fit .not li{color:var(--text-pale-on-field)}
.g-field .fit h3{color:var(--text-on-field)}
.hair-top{border-top:1px solid var(--rule)}
.section h2{margin-bottom:22px;max-width:60ch}
@media (min-width:901px){.section .wrap:not(.split) > .rev-group > h2,.section .wrap.rev-group:not(.split) > h2{max-width:calc(50% - 40px)}}

/* page heads on the supporting pages */
.page-head{padding-top:88px;padding-bottom:72px}
.page-head h1{margin-bottom:22px;max-width:60ch}
@media (min-width:901px){.page-head .wrap:not(.split) > h1,.page-head .wrap:not(.split) > .rev-group > h1{max-width:calc(50% - 40px)}.page-head .split h1{max-width:none}}

/* the spine */
.spine{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--strand);transform-origin:top;opacity:.7;pointer-events:none}
.js .spine{transform:scaleY(var(--draw,0))}
.g-field .spine,.g-deep .spine{background:var(--mucc-white);opacity:.6}
.mark{position:absolute;top:calc(var(--section-y) - 2px);left:calc(50% + 14px);font-weight:500;font-size:12px;color:var(--text-secondary);pointer-events:none;white-space:nowrap}
.mark.l{left:auto;right:calc(50% + 14px)}
.g-field .mark,.g-deep .mark{color:var(--text-pale-on-field)}
@media (max-width:900px){
  .spine{left:12px}
  .mark,.mark.l{left:22px;right:auto;top:calc(var(--section-y) - 28px)}
}

/* two columns split by the line */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.split > *{min-width:0}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* two voices on one rule */
.pairs{margin-top:36px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:28px 0;position:relative}
.pair::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-strong);opacity:.5;transform-origin:left;transition:transform .9s var(--ease-out)}
.js .pair::before{transform:scaleX(0)}
.js .pair.in::before{transform:scaleX(1)}
.pair .said{font-family:var(--font-read);font-style:italic;font-size:var(--step-1);line-height:1.45;color:var(--text-primary);text-align:right;padding-right:36px;margin:0}
.pair .reply{font-size:16px;line-height:1.6;color:var(--text-primary);padding-left:36px;margin:0}
@media (max-width:900px){.pair{grid-template-columns:1fr;gap:10px}.pair .said{text-align:left;padding:0}.pair .reply{padding:0 0 0 18px;border-left:1px solid var(--rule-strong)}}
.closing{font-family:var(--font-read);font-weight:600;font-size:var(--step-1);margin-top:32px;max-width:46ch}

/* atlas glyph */
.atlas{width:100%;max-width:360px;margin:0 auto;height:auto}
.atlas .tilt{transform-origin:100px 58px;transform:rotate(calc(-9deg * (1 - var(--settle,0))));transition:transform .2s linear}
.atlas .bob{opacity:clamp(0,(var(--settle,0) - .8)*5,1)}
.atlas .line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0));transition:stroke-dashoffset .2s linear}
.pull{font-family:var(--font-core);font-weight:600;font-size:var(--step-2);line-height:1.2;margin:28px 0 12px;max-width:30ch}
.arrow-link{border:0;font-weight:500}

/* method cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.card{background:var(--panel);border-radius:var(--radius-card);padding:32px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(19,30,82,.06),0 1px 1px rgba(19,30,82,.04)}
.card h3{font-size:22px}
.card p{font-size:14.5px;line-height:1.6;color:var(--text-secondary);margin:0}
.card svg{width:36px;height:36px;stroke:var(--strand);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.measure-notes{margin-top:26px;max-width:64ch}

/* hold to measure: the one interactive moment */
.hold{position:relative;background:var(--panel);border-radius:var(--radius-card);padding:36px 28px;box-shadow:var(--shadow-3);user-select:none;-webkit-user-select:none;touch-action:none;cursor:pointer;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;--p:0}
.hold:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}
.hold .label{font-weight:500;font-size:15px;color:var(--text-primary);text-align:center;margin:0}
.hold .four{font-size:13px;color:var(--text-secondary);margin:6px 0 0;opacity:calc(min(1,var(--p)*4));transition:opacity .2s}
.hold .pend{width:140px;height:200px;margin:12px auto;position:relative}
.hold .pend svg{width:100%;height:100%;overflow:visible}
.hold .pend .arm{transform-origin:50% 0;transform:rotate(calc(8deg * (1 - var(--p))));animation:sway 3.2s ease-in-out infinite;animation-play-state:running}
.hold.active .pend .arm,.hold.done .pend .arm{animation:none}
@keyframes sway{0%,100%{transform:rotate(calc(8deg * (1 - var(--p))))}50%{transform:rotate(calc(-8deg * (1 - var(--p))))}}
.hold .track{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--rule);transform:translateX(-50%)}
.hold .track i{position:absolute;left:0;top:0;width:100%;height:100%;background:var(--accent);transform:scaleY(var(--p));transform-origin:top}
.hold .point{position:absolute;left:50%;bottom:-6px;width:10px;height:10px;border-radius:50%;background:var(--held-point);transform:translateX(-50%) scale(var(--p));opacity:var(--p)}
.hold .lines{list-style:none;padding:0;margin:0;text-align:center;min-height:120px}
.hold .lines li{font-weight:600;font-size:20px;line-height:1.3;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.hold.done .lines li{opacity:1;transform:none}
.hold.done .lines li:nth-child(1){transition-delay:0s}
.hold.done .lines li:nth-child(2){transition-delay:.35s}
.hold.done .lines li:nth-child(3){transition-delay:.7s}
.hold .lines .then{font-family:var(--font-read);font-weight:400;font-style:italic;font-size:17px;color:var(--mucc-blue-soft);margin-top:10px}
.hold.done .lines .then{transition-delay:1.1s}
.hold.done .lines li.settled{transition-delay:0s}

/* the five steps on the spine */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;gap:18px}
.steps li{display:grid;grid-template-columns:1fr 1fr;column-gap:72px;align-items:baseline;position:relative}
.steps li::before{content:"";position:absolute;left:50%;top:.55em;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--rule-strong);transition:background-color .3s}
.steps li.in::before{background:var(--accent)}
.steps .name{font-weight:600;font-size:15px;color:var(--accent);text-align:right}
.steps .what{margin:0;color:var(--text-primary)}
.gate{font-weight:600;font-size:var(--step-1);line-height:1.35;margin:40px 0 10px;max-width:40ch}
@media (max-width:900px){.steps li{grid-template-columns:1fr;row-gap:4px}.steps li::before{display:none}.steps .name{text-align:left}}

/* care */
.photo{border-radius:var(--radius-img);overflow:hidden;background:var(--mucc-bone-deep);aspect-ratio:4/5}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.wide{aspect-ratio:4/3}
.photo.wide img{object-position:42% center}
.commit{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.commit li{padding-left:20px;position:relative}
.commit li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.commit b{font-weight:600}

/* proof */
.rating{display:inline-flex;align-items:baseline;gap:10px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:10px 18px;color:var(--text-primary);border-bottom-color:var(--rule)}
.rating .num{font-size:22px}
.rating .of{font-size:14px;color:var(--text-secondary)}
.quotes{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:26px}
.quotes li{position:relative;padding:22px 0 0}
.quotes li::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--rule-strong);opacity:.5;transform-origin:left;transition:transform .9s var(--ease-out)}
.js .quotes li::before{transform:scaleX(0)}
.js .quotes li.in::before{transform:scaleX(1)}
.quotes li:nth-child(2){margin-left:8%}
.quotes li:nth-child(3){margin-left:16%}
.quotes blockquote{margin:0;font-family:var(--font-read);font-style:italic;font-size:var(--step-1);line-height:1.45}
.quotes cite{display:block;font-style:normal;font-size:13px;color:var(--text-secondary);margin-top:10px}
.radio{display:flex;align-items:center;gap:14px;margin-top:36px;font-size:14px;color:var(--text-secondary)}
@media (max-width:900px){.quotes li:nth-child(2),.quotes li:nth-child(3){margin-left:0}}

/* fit */
.fit h3{font-size:18px;margin-bottom:14px}
.fit ul{margin:0;padding:0 0 0 20px;display:grid;gap:10px}
.fit li{padding-left:4px}
.fit .not{color:var(--text-secondary)}

/* cost */
.cost{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:22px}
.split .cost{margin-top:6px}
.cost li{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:baseline;padding-top:22px;border-top:1px solid var(--rule)}
.cost .price{font-weight:600;font-size:var(--step-2);letter-spacing:-.01em;color:var(--accent)}
.cost .price.small-cap{font-size:.9rem;color:var(--text-primary)}
.cost b{display:block;font-weight:600;margin-bottom:4px}
.cost p{margin:0;color:var(--text-primary)}
.good{margin-top:32px;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-card);padding:20px 24px;max-width:64ch}
.good b{font-weight:600}
@media (max-width:600px){.cost li{grid-template-columns:1fr;gap:6px}}

@media (min-width:901px){.section .wrap:not(.split) > .rev-group > .good,.section .wrap.rev-group:not(.split) > .good{max-width:calc(50% - 40px)}}

/* faq */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.split .faq{margin-top:6px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;font-family:var(--font-read);font-style:italic;font-size:var(--step-1);line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-family:var(--font-core);font-weight:400;font-size:26px;color:var(--accent);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 0 26px;max-width:64ch;color:var(--text-primary);font-family:var(--font-read);font-size:1.0625rem;line-height:1.62}

/* call to action field */
.cta{text-align:center}
.cta .spine{bottom:auto;height:calc(var(--section-y) + 2px)}
.cta .inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.cta h2{font-size:var(--step-4);margin-bottom:16px}
.cta .body{font-family:var(--font-core);font-weight:400;font-size:1.125rem;line-height:1.55;max-width:44ch;margin-bottom:26px}
.cta .prefer{margin:12px 0 10px;font-size:14px;color:var(--text-pale-on-field)}
.cta .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.cta .tel{color:var(--text-pale-on-field);font-size:15px;margin:4px 0 20px}
.cta .tel a{color:var(--mucc-white);border-bottom-color:rgba(255,255,255,.4)}
.cta .credit{font-family:var(--font-read);font-style:italic;font-size:13px;margin:0 0 6px}
.cta .speed{font-size:13px;margin:0}
.cta .held{background:var(--mucc-white)}
.cta .held::after{background:var(--mucc-white)}

/* footer */
.footer{padding:56px 0 40px}
.footer .brand img{height:33px;width:auto}
.footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1fr;gap:32px;margin-top:36px;font-size:13px;line-height:1.7}
.footer h4{color:var(--mucc-white);font-size:13px;font-weight:600;margin-bottom:8px}
.footer a{color:var(--mucc-blue-mist);border-bottom-color:rgba(142,155,203,.35)}
.footer a:hover{color:var(--mucc-white);border-bottom-color:var(--mucc-white)}
.footer .legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(142,155,203,.25);font-size:11px;line-height:1.7;color:var(--mucc-blue-mist)}
@media (max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer .cols{grid-template-columns:1fr}}

/* reveals: choreography with retired delays */
.js .rev{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.js .in > .rev,.js .in.rev,.js .rev.in{opacity:1;transform:none}
.js .in > .rev:nth-child(2){transition-delay:.08s}
.js .in > .rev:nth-child(3){transition-delay:.16s}
.js .in > .rev:nth-child(4){transition-delay:.24s}
.js .in > .rev:nth-child(5){transition-delay:.32s}
.js .in > .rev:nth-child(6){transition-delay:.40s}
.js .in.settled > .rev:nth-child(n){transition-delay:0s}

/* ---------- reduced motion, honoured completely ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .js body{opacity:1}
  body::before{animation:none}
  .js .rev,.js .in > .rev{opacity:1;transform:none}
  .js .pair::before,.js .quotes li::before{transform:scaleX(1)}
  .js .spine{transform:scaleY(1)}
  .atlas .tilt{transform:none}.atlas .line{stroke-dashoffset:0}
  .hold{--p:1}
  .hold .lines li{opacity:1;transform:none}
  .steps .name::before{background:var(--accent)}
  .held{opacity:1}
}
.js body.rm-pinned .rev,.js body.rm-pinned .in > .rev{opacity:1;transform:none}
.js body.rm-pinned .pair::before,.js body.rm-pinned .quotes li::before{transform:scaleX(1)}
.js body.rm-pinned .spine{transform:scaleY(1)}
body.rm-pinned .atlas .tilt{transform:none}body.rm-pinned .atlas .line{stroke-dashoffset:0}
body.rm-pinned .hold{--p:1}
body.rm-pinned .hold .lines li{opacity:1;transform:none}
body.rm-pinned .held{opacity:1}

/* 404 */
.notfound{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center}
.notfound .spine{bottom:auto;height:120px}