/* Modern Movement Sport & Spine — revamp preview, brutalist-editorial pass.
   Structure and type system borrowed from a Refero style reference (Dayos, an
   AI-for-business SaaS: near-monochrome canvas, oversized condensed uppercase
   display type, flat surfaces, zero shadows/gradients, heavy card radius). The
   PALETTE is not — that stays the practice's own (#0c5c87 steel, from the logo
   artwork), because the reference's mint-green/neon-yellow is a SaaS signature,
   not a healthcare one. Structure, never palette — same rule REF-01 used. */
:root{
  --steel:#0c5c87; --steel-deep:#08405e; --steel-lift:#1479ab;
  --graphite:#6d7074; --graphite-soft:#8e9195;
  --ink:#0e1012; --ink-soft:#4a4f53; --paper:#eeeae2; --card:#fff; --wash:#e3ddd0; --line:#c9c2b4;
  --font-display:'Barlow Condensed',Anton,'Bebas Neue','Arial Narrow',sans-serif;
  --font-body:Inter,'Neue Haas Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --r-card:28px; --r-btn:8px;
  --shell:min(1180px,92vw);
  --step--1:clamp(.82rem,.79rem + .15vw,.9rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.9rem,1.5rem + 1.8vw,2.9rem);
  --step-3:clamp(2.6rem,1.9rem + 3vw,4.4rem);
  --step-4:clamp(3.1rem,2rem + 5.2vw,6.2rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-weight:400;
  font-size:var(--step-0);line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-underline-offset:3px}
h1,h2,h3{line-height:.94;margin:0;font-family:var(--font-display);font-weight:700;
  letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
h1{font-size:var(--step-4)}h2{font-size:var(--step-3)}h3{font-size:var(--step-1);text-transform:none;font-family:var(--font-body);font-weight:600;letter-spacing:-.01em}
.shell{width:var(--shell);margin-inline:auto}
.eyebrow{font-family:var(--font-mono);font-size:var(--step--1);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

/* ── header — flat, no blur: a hard-edged bar instead of a glass one. Stays on
   the real logo's own light ground rather than inverting it, since the export
   has no reversed/white variant to invert onto a dark bar without distortion. */
/* z-index:60, ABOVE .scrim's 45: #nav's own z-index:50 only competes within
   .hdr's stacking context (it's a child of .hdr, not a sibling of .scrim), so
   if .hdr itself sits below the scrim, the whole drawer — links, close button,
   all of it — becomes unclickable behind an invisible (near-black on
   near-black) backdrop once open. Confirmed via elementFromPoint: every click
   meant for a drawer link was landing on .scrim instead. */
.hdr{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:3px solid var(--ink)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;padding:.7rem 0;justify-content:space-between}
.hdr__logo img{height:52px;width:auto}
.nav{display:flex;gap:1.6rem;align-items:center}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.04em;padding:.4rem 0;border-bottom:2px solid transparent;
  transition:border-color .2s,opacity .2s}
.nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--steel)}
.call{background:var(--steel-lift);color:#fff!important;text-decoration:none;font-weight:600;
  padding:12px 20px;border-radius:var(--r-btn);font-size:var(--step--1);white-space:nowrap;
  text-transform:uppercase;letter-spacing:.04em;transition:background .2s}
.call:hover{background:var(--steel)}
/* position+z-index above #nav's own z-index:50: with the drawer open, the fixed
   nav panel geometrically covers the burger's spot in the header and — as a
   sibling with a higher z-index in the same stacking context — was rendering
   (and hit-testing) on top of it, leaving the X with nothing to close it. */
.burger{display:none;position:relative;z-index:55;background:none;border:0;padding:.55rem;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;
  transition:transform .3s,opacity .3s,background .3s}
.burger[aria-expanded=true] span{background:#fff}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:880px){
  .burger{display:block}
  .nav{position:fixed;inset:0 0 0 auto;width:min(320px,86vw);background:var(--ink);
    z-index:50;height:100svh;
    flex-direction:column;align-items:flex-start;gap:.25rem;padding:5.5rem 1.75rem 2rem;
    transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);overflow-y:auto}
  .nav[data-open]{transform:translateX(0)}
  .nav a{color:#fff;font-size:var(--step-1);padding:.65rem 0;width:100%;border-bottom:1px solid rgba(255,255,255,.16)}
  .nav a:hover,.nav a[aria-current=page]{border-bottom-color:var(--steel-lift)}
  .nav .call{margin-top:1rem;width:100%;text-align:center;border-bottom:0}
  .scrim{position:fixed;inset:0;background:rgba(10,14,18,.6);opacity:0;pointer-events:none;
    transition:opacity .32s;z-index:45}
  .scrim[data-open]{opacity:1;pointer-events:auto}
}

/* ── hero ── */
.hero{position:relative;min-height:0;display:block;overflow:visible;background:var(--paper)}
.hero__in{color:var(--ink);padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:920px){.hero__in{grid-template-columns:1.15fr .85fr}}
.hero h1{color:var(--ink);max-width:14ch}
.hero p{color:var(--ink-soft);max-width:52ch;font-size:var(--step-1);margin:1.25rem 0 0}
.hero .rule{width:56px;height:6px;background:var(--steel);margin-bottom:1.5rem;border-radius:0}
.hero__copy{min-width:0}
.hero__img{position:static;border-radius:var(--r-card);overflow:hidden;margin:0;border:1px solid var(--line)}
@media(max-width:919px){.hero__img{max-width:min(26rem,88%);margin-inline:auto}}
.hero__img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;opacity:1;max-height:min(74svh,660px)}
.cta-row{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;padding:.9rem 1.6rem;border-radius:var(--r-btn);
  font-size:var(--step-0);text-transform:uppercase;letter-spacing:.03em;transition:background .2s,color .2s,border-color .2s}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--steel)}
.btn--ghost{border:2px solid var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--line{border:2px solid var(--steel);color:var(--steel)}
.btn--line:hover{background:var(--steel);color:#fff}

/* ── sections ── */
.sec{padding:clamp(3.5rem,7vw,6.5rem) 0}
.sec--wash{background:var(--wash)}
.lede{max-width:60ch;color:var(--ink-soft);font-size:var(--step-1);margin:1.1rem 0 0}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split--flip>*:first-child{order:2}}
.split figure{margin:0;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line)}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.grid{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));margin-top:2.6rem}
.card{background:var(--card);border:1px solid var(--ink);border-radius:var(--r-card);padding:1.8rem;
  display:flex;flex-direction:column;gap:.7rem;text-decoration:none;color:inherit;
  transition:background .2s,color .2s}
.card:hover{background:var(--ink);color:#fff}
.card h3{color:var(--steel-deep)}
.card:hover h3{color:#fff}
.card p{margin:0;color:var(--ink-soft);font-size:var(--step--1);line-height:1.6}
.card:hover p{color:rgba(255,255,255,.78)}
.card .more{margin-top:auto;padding-top:.6rem;font-weight:600;font-size:var(--step--1);
  text-transform:uppercase;letter-spacing:.03em}
.card .more::after{content:" →";transition:margin-left .2s}
.card:hover .more::after{margin-left:.25rem}
.note{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:1.6rem 1.8rem;
  font-size:var(--step-0);line-height:1.6;margin-top:2.4rem}

/* ── footer ── */
.ftr{background:var(--ink);color:rgba(255,255,255,.76);padding:3.5rem 0 2rem;font-size:var(--step--1)}
.ftr a{color:#fff}
.ftr__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ftr h3{color:#fff;font-size:var(--step-0);margin-bottom:.7rem;text-transform:uppercase;
  font-family:var(--font-mono);font-weight:500;letter-spacing:.1em}
.ftr__logo img{height:64px;width:auto;margin-bottom:1rem;border-radius:8px}
.ftr__base{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;color:rgba(255,255,255,.5);
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em}

/* ── motion, with the opt-out honoured ── */
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
}
:focus-visible{outline:3px solid var(--steel-lift);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:60;background:#fff;padding:.7rem 1rem;border-radius:var(--r-btn)}

.hero h1 .rv>span{color:var(--ink)}
.sec--statement{padding-block:clamp(4rem,9vw,8rem)}
.statement{font-family:var(--font-display);text-transform:uppercase;line-height:.92;
  font-size:clamp(2.2rem,1.2rem + 5vw,5.4rem);max-width:18ch;letter-spacing:-.01em}
.note--gap{background:var(--wash);color:var(--ink-soft);border-left:4px solid var(--graphite)}

/* points / checklist / team — added for the page-by-page content resync */
.points{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:2.4rem}
.point{background:var(--card);border:1px solid var(--ink);border-radius:var(--r-card);padding:1.6rem}
.point__icon{font-size:1.8rem;display:block;margin-bottom:.6rem}
.point h3{font-family:var(--font-body);text-transform:none;font-weight:600;font-size:var(--step-0);margin-bottom:.4rem}
.point p{margin:0;color:var(--ink-soft);font-size:var(--step--1);line-height:1.6}

.checklist{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.checklist li{position:relative;padding-left:1.6rem;color:var(--ink-soft);font-size:var(--step-0)}
.checklist li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--steel);border-radius:50%}

.team-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:2.4rem}
.team-card{background:var(--card);border:1px solid var(--ink);border-radius:var(--r-card);padding:1.6rem}
.team-card h3{font-family:var(--font-body);text-transform:none;font-weight:600;font-size:var(--step-0);margin-bottom:.3rem}
.team-card p{margin:0;color:var(--steel);font-size:var(--step--1);font-weight:600;text-transform:uppercase;letter-spacing:.03em}

.hours{list-style:none;padding:0;margin:1.4rem 0 0;max-width:22rem;border-top:1px solid var(--line)}
.hours li{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:var(--step--1);color:var(--ink-soft)}
.hours li span:first-child{color:var(--ink);font-weight:600}