/* ============================================================
   MERIDIAN DENTAL STUDIO
   Porcelain ground · deep spruce accent · machined tray material
   ============================================================ */

:root{
  --ground:#F2F1ED;
  --ground-2:#E9E8E2;
  --paper:#FBFAF8;
  --core:#FFFFFF;
  --ink:#16191C;
  --ink-2:#3B4245;
  --mist:#767C79;
  --line:rgba(20,64,60,.11);
  --line-2:rgba(20,64,60,.06);
  --spruce:#14403C;
  --spruce-deep:#0C2A27;
  --on-spruce:#F0F4F2;
  --enamel:#A8D8CF;
  --enamel-wash:rgba(168,216,207,.40);
  --brass:#B08D4F;
  --tray-sheen:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  --cap-fill:rgba(255,255,255,.15);
  --shadow-amb:0 40px 90px -44px rgba(12,42,39,.30), 0 12px 34px -20px rgba(12,42,39,.13);
  --shadow-lift:0 66px 130px -50px rgba(12,42,39,.36), 0 20px 48px -24px rgba(12,42,39,.18);
  --shadow-btn:0 18px 38px -18px rgba(12,42,39,.55);
  --hl:inset 0 1px 0 rgba(255,255,255,.92);
  --hl-soft:inset 0 1px 0 rgba(255,255,255,.6);
  --glass:rgba(251,250,248,.72);
  --grain-op:.032;
  --plate-portrait:radial-gradient(120% 90% at 72% 12%, rgba(255,255,255,.95), transparent 55%),radial-gradient(80% 70% at 22% 88%, rgba(168,216,207,.5), transparent 62%),radial-gradient(90% 80% at 92% 78%, rgba(20,64,60,.16), transparent 60%),linear-gradient(155deg,#E7E6E0,#D9DCD6 48%,#C6CDC7);
  --plate-clinic:radial-gradient(100% 80% at 18% 14%, rgba(255,255,255,.9), transparent 58%),radial-gradient(90% 90% at 88% 96%, rgba(20,64,60,.24), transparent 58%),linear-gradient(200deg,#EDECE6,#CFD6D1 62%,#A7B5AF);
  --plate-tooth:radial-gradient(70% 60% at 50% 28%, rgba(255,255,255,1), transparent 62%),radial-gradient(90% 90% at 50% 120%, rgba(168,216,207,.45), transparent 58%),linear-gradient(180deg,#F4F3EF,#DBE2DE);
  --plate-team:radial-gradient(90% 70% at 30% 10%, rgba(255,255,255,.92), transparent 55%),radial-gradient(80% 80% at 90% 90%, rgba(176,141,79,.2), transparent 60%),linear-gradient(165deg,#EAE8E1,#D3D2CB 55%,#BAC0BA);
  --e-fluid:cubic-bezier(.32,.72,0,1);
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.1,1);
  --r:2rem;
  --pad:.4rem;
  --maxw:1240px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#0A0E0D;
    --ground-2:#101615;
    --paper:#141A19;
    --core:#19211F;
    --ink:#ECEEEA;
    --ink-2:#C2CAC6;
    --mist:#8A938E;
    --line:rgba(168,216,207,.15);
    --line-2:rgba(168,216,207,.07);
    --spruce:#8FD8C9;
    --spruce-deep:#B9E7DC;
    --on-spruce:#06110F;
    --enamel:#3E7A70;
    --enamel-wash:rgba(63,122,112,.32);
    --brass:#D2AE72;
    --tray-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
    --cap-fill:rgba(0,0,0,.16);
    --shadow-amb:0 40px 90px -44px rgba(0,0,0,.8), 0 12px 34px -20px rgba(0,0,0,.55);
    --shadow-lift:0 66px 130px -50px rgba(0,0,0,.88), 0 20px 48px -24px rgba(0,0,0,.6);
    --shadow-btn:0 18px 38px -18px rgba(0,0,0,.75);
    --hl:inset 0 1px 0 rgba(255,255,255,.07);
    --hl-soft:inset 0 1px 0 rgba(255,255,255,.05);
    --glass:rgba(18,24,23,.74);
    --grain-op:.05;
    --plate-portrait:radial-gradient(120% 90% at 72% 12%, rgba(143,216,201,.18), transparent 55%),radial-gradient(80% 70% at 22% 88%, rgba(63,122,112,.34), transparent 62%),linear-gradient(155deg,#1B2523,#111917 50%,#0B1110);
    --plate-clinic:radial-gradient(100% 80% at 18% 14%, rgba(143,216,201,.16), transparent 58%),radial-gradient(90% 90% at 88% 96%, rgba(63,122,112,.28), transparent 58%),linear-gradient(200deg,#18211F,#0F1615 62%,#090F0E);
    --plate-tooth:radial-gradient(70% 60% at 50% 28%, rgba(143,216,201,.22), transparent 62%),linear-gradient(180deg,#1C2624,#0C1211);
    --plate-team:radial-gradient(90% 70% at 30% 10%, rgba(210,174,114,.16), transparent 55%),linear-gradient(165deg,#1A211F,#0C1110);
  }
}

:root[data-theme="dark"]{
  --ground:#0A0E0D;
  --ground-2:#101615;
  --paper:#141A19;
  --core:#19211F;
  --ink:#ECEEEA;
  --ink-2:#C2CAC6;
  --mist:#8A938E;
  --line:rgba(168,216,207,.15);
  --line-2:rgba(168,216,207,.07);
  --spruce:#8FD8C9;
  --spruce-deep:#B9E7DC;
  --on-spruce:#06110F;
  --enamel:#3E7A70;
  --enamel-wash:rgba(63,122,112,.32);
  --brass:#D2AE72;
  --tray-sheen:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  --cap-fill:rgba(0,0,0,.16);
  --shadow-amb:0 40px 90px -44px rgba(0,0,0,.8), 0 12px 34px -20px rgba(0,0,0,.55);
  --shadow-lift:0 66px 130px -50px rgba(0,0,0,.88), 0 20px 48px -24px rgba(0,0,0,.6);
  --shadow-btn:0 18px 38px -18px rgba(0,0,0,.75);
  --hl:inset 0 1px 0 rgba(255,255,255,.07);
  --hl-soft:inset 0 1px 0 rgba(255,255,255,.05);
  --glass:rgba(18,24,23,.74);
  --grain-op:.05;
  --plate-portrait:radial-gradient(120% 90% at 72% 12%, rgba(143,216,201,.18), transparent 55%),radial-gradient(80% 70% at 22% 88%, rgba(63,122,112,.34), transparent 62%),linear-gradient(155deg,#1B2523,#111917 50%,#0B1110);
  --plate-clinic:radial-gradient(100% 80% at 18% 14%, rgba(143,216,201,.16), transparent 58%),radial-gradient(90% 90% at 88% 96%, rgba(63,122,112,.28), transparent 58%),linear-gradient(200deg,#18211F,#0F1615 62%,#090F0E);
  --plate-tooth:radial-gradient(70% 60% at 50% 28%, rgba(143,216,201,.22), transparent 62%),linear-gradient(180deg,#1C2624,#0C1211);
  --plate-team:radial-gradient(90% 70% at 30% 10%, rgba(210,174,114,.16), transparent 55%),linear-gradient(165deg,#1A211F,#0C1110);
}

/* ---------------- base ---------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Geist","Geist Fallback",ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--spruce);outline-offset:3px;border-radius:8px}
/* Anchor and skip-link targets are given tabindex=-1 so focus follows the scroll.
   They are containers, not controls: the ring belongs on the next real control. */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
::selection{background:var(--enamel);color:var(--spruce-deep)}

/* ---------------- lenis ----------------
   Required by the smooth-scroll engine. Lenis drives window.scrollTo rather than
   transforming a wrapper, so .nav, .grain and .legal-nav keep their fixed/sticky
   containing block. These classes are put on <html> by Lenis itself. */
html.lenis,
html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
/* keep a nested scroller's overscroll from chaining out to the page */
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal]{overscroll-behavior:contain}

/* ---------------- atmosphere ---------------- */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:var(--grain-op);transform:translateZ(0);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aura{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;
  transform:translateZ(0)}

/* ---------------- shell ---------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.wrap{padding-inline:2.5rem}}
.sec{position:relative;padding-block:6rem}
@media(min-width:768px){.sec{padding-block:9.5rem}}
/* The closing section of every page butts up against the footer CTA card, which is
   already its own break. Full section rhythm there just reads as dead space.
   Two selectors: dist puts the sections straight in <main>, the single-file
   preview wraps each page in a .page div. */
main > .sec:last-child,
.page > .sec:last-child{padding-bottom:3rem}
@media(min-width:768px){
  main > .sec:last-child,
  .page > .sec:last-child{padding-bottom:5rem}
}
.sec-head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3.5rem}
@media(min-width:900px){
  .sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:4rem;margin-bottom:5rem}
  .sec-head .sh-left{max-width:32ch}
  .sec-head .sh-right{max-width:42ch;padding-bottom:.4rem}
}

/* signature device: calibration rule */
.rule{
  height:11px;width:100%;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 10px) bottom left/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 50px) bottom left/100% 9px no-repeat,
    linear-gradient(90deg,transparent,var(--line) 6%,var(--line) 94%,transparent) bottom/100% 1px no-repeat;
}

/* ---------------- type ---------------- */
.eyebrow{
  /* inline-flex + nowrap means this is meant to hug its text, but as a flex or grid
     item (.stack, .sh-left, a flex .tray-core) the default stretch alignment blows it
     out to the full column width. Pin it to the start on both axes. */
  display:inline-flex;align-self:flex-start;align-items:center;gap:.55rem;
  font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace;
  font-size:10px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist);padding:.42rem .85rem;border-radius:999px;
  border:1px solid var(--line);background:var(--paper);box-shadow:var(--hl-soft);
  white-space:nowrap;
}
.eyebrow .dot{width:5px;height:5px;border-radius:50%;background:var(--spruce);flex:none}
.eyebrow .dot.live{animation:pulse 2.8s var(--e-soft) infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.d1{font-size:clamp(2.85rem,7.4vw,6.2rem);letter-spacing:-.05em;line-height:.94;font-weight:500}
.d2{font-size:clamp(2.1rem,4.8vw,4rem);letter-spacing:-.045em;line-height:1}
.d3{font-size:clamp(1.35rem,2.3vw,1.85rem);letter-spacing:-.032em;line-height:1.14}
.d4{font-size:1.08rem;letter-spacing:-.022em;font-weight:500;line-height:1.3}
.serif{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.005em;color:var(--spruce)}
.lede{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.62;color:var(--ink-2);max-width:52ch}
.small{font-size:.87rem;line-height:1.55;color:var(--mist)}
.mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------- tray (double bezel) ---------------- */
.tray{
  position:relative;padding:var(--pad);border-radius:var(--r);
  background:var(--tray-sheen),var(--ground-2);
  border:1px solid var(--line);
  box-shadow:var(--shadow-amb);
}
.tray-core{
  position:relative;border-radius:calc(var(--r) - var(--pad));
  background:var(--paper);border:1px solid var(--line-2);
  box-shadow:var(--hl);overflow:hidden;
}
.tray.sm{--r:1.35rem;--pad:.3rem}
.tray.lg{--r:2.5rem;--pad:.5rem}
.tray.dark{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0)),var(--spruce-deep);border-color:rgba(255,255,255,.1)}
.tray.dark .tray-core{background:var(--spruce);border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:var(--on-spruce)}

.lift{transition:transform .8s var(--e-fluid),box-shadow .8s var(--e-fluid)}
.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

/* ---------------- buttons ---------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.8rem;
  padding:.5rem .5rem .5rem 1.45rem;border-radius:999px;
  font-size:.94rem;font-weight:500;letter-spacing:-.014em;white-space:nowrap;
  transition:transform .55s var(--e-fluid),box-shadow .55s var(--e-fluid),background-color .5s var(--e-out),color .5s var(--e-out);
}
.btn:active{transform:scale(.972)}
.btn .cap{width:2.15rem;height:2.15rem;border-radius:999px;flex:none;display:grid;place-items:center;
  transition:transform .6s var(--e-fluid),background-color .5s var(--e-out)}
.btn .cap svg{width:14px;height:14px}
.btn:hover .cap{transform:translate(3px,-2px) scale(1.07)}
.btn-primary{background:var(--spruce);color:var(--on-spruce);box-shadow:var(--shadow-btn),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary .cap{background:var(--cap-fill)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 30px 60px -22px rgba(12,42,39,.55),inset 0 1px 0 rgba(255,255,255,.24)}
.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--line);box-shadow:var(--hl-soft),0 12px 28px -20px rgba(12,42,39,.35)}
.btn-ghost .cap{background:var(--ground-2)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--hl-soft),0 24px 48px -22px rgba(12,42,39,.4)}
.btn-quiet{padding:.5rem 1rem;border-radius:999px;font-size:.9rem;font-weight:450;color:var(--ink-2);
  transition:color .45s var(--e-out),background-color .45s var(--e-out)}
.btn-quiet:hover{color:var(--ink);background:var(--line-2)}
.btn-line{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:500;color:var(--spruce);
  transition:gap .5s var(--e-fluid)}
.btn-line:hover{gap:.85rem}

/* ---------------- nav island ---------------- */
.nav{position:fixed;top:1.1rem;left:0;right:0;z-index:40;display:flex;justify-content:center;padding-inline:1rem;pointer-events:none}
.nav-pill{
  pointer-events:auto;display:flex;align-items:center;gap:.3rem;
  padding:.42rem .42rem .42rem 1.1rem;border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  border:1px solid var(--line);
  box-shadow:var(--hl-soft);
  transition:transform .9s var(--e-fluid);
  max-width:100%;
  position:relative;
}
.nav-pill::before,.nav-pill::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  transition:opacity .9s var(--e-fluid);
}
.nav-pill::before{box-shadow:0 26px 54px -30px rgba(12,42,39,.45)}
.nav-pill::after{box-shadow:0 18px 40px -26px rgba(12,42,39,.4);opacity:0}
.nav.tucked .nav-pill{transform:scale(.972)}
.nav.tucked .nav-pill::before{opacity:0}
.nav.tucked .nav-pill::after{opacity:1}
.brand{display:flex;align-items:center;gap:.55rem;padding-right:.85rem;margin-right:.3rem;border-right:1px solid var(--line)}
.brand-mark{width:1.6rem;height:1.6rem;flex:none}
.brand-name{font-size:.94rem;font-weight:600;letter-spacing:-.025em;white-space:nowrap}
.nav-links{display:none;align-items:center;gap:.05rem}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-cta{display:none}
@media(min-width:560px){.nav-cta{display:inline-flex}}
.burger{position:relative;width:2.5rem;height:2.5rem;border-radius:999px;display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line-2)}
@media(min-width:1024px){.burger{display:none}}
.burger span{position:relative;display:block;width:15px;height:11px}
.burger i{position:absolute;left:0;width:15px;height:1.4px;background:var(--ink);border-radius:2px;
  transition:transform .65s var(--e-fluid),opacity .35s var(--e-out)}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:5px}
.burger i:nth-child(3){top:10px}
body.menu-open .burger i:nth-child(1){transform:translateY(5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0;transform:scaleX(.2)}
body.menu-open .burger i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.sheet{
  position:fixed;inset:0;z-index:38;display:flex;flex-direction:column;justify-content:center;
  padding:6.5rem 1.5rem 2.5rem;
  background:var(--glass);
  -webkit-backdrop-filter:blur(44px) saturate(1.5);backdrop-filter:blur(44px) saturate(1.5);
  opacity:0;visibility:hidden;transition:opacity .75s var(--e-fluid),visibility .75s;
}
body.menu-open .sheet{opacity:1;visibility:visible}
.m-link{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.65rem 0;
  border-bottom:1px solid var(--line-2);font-size:clamp(1.9rem,8.5vw,2.9rem);letter-spacing:-.048em;
  font-weight:500;line-height:1.1;opacity:0;transform:translateY(3rem);
  transition:opacity .85s var(--e-out) var(--d,0ms),transform .95s var(--e-fluid) var(--d,0ms),color .4s var(--e-out)}
.m-link:hover{color:var(--spruce)}
.m-link .idx{font-family:"Geist Mono",monospace;font-size:10px;letter-spacing:.2em;color:var(--mist)}
body.menu-open .m-link{opacity:1;transform:none}
.m-foot{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  opacity:0;transform:translateY(2rem);
  transition:opacity .85s var(--e-out) .34s,transform .95s var(--e-fluid) .34s}
body.menu-open .m-foot{opacity:1;transform:none}

/* ---------------- reveal ----------------
   The hidden state hangs off .rv-armed, which app.js puts on <html>. Without JS —
   or under reduced motion, where we never arm — every .rv stays visible, so a
   failed script can never blank the page.
   The transition lives on .in only: arming has to hide instantly, not animate out. */
.rv-armed .rv{opacity:0;transform:translateY(24px)}
.rv-armed .rv.in{
  opacity:1;transform:none;
  transition:opacity 700ms cubic-bezier(.22,1,.36,1) var(--d,0ms),
             transform 700ms cubic-bezier(.22,1,.36,1) var(--d,0ms);
}

/* ---------------- image plates ---------------- */
.plate{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ground-2)}
.plate .field{position:absolute;inset:0}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23m)'/%3E%3C/svg%3E")}
.plate .slug{position:absolute;left:.95rem;bottom:.8rem;z-index:2;
  font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:.42}
.p-portrait .field{background:var(--plate-portrait)}
.p-clinic .field{background:var(--plate-clinic)}
.p-tooth .field{background:var(--plate-tooth)}
.p-team .field{background:var(--plate-team)}
.arcs{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.arcs path,.arcs circle,.arcs line{fill:none;stroke:var(--ink);stroke-width:.5;opacity:.16;vector-effect:non-scaling-stroke}

/* ---------------- hero ---------------- */
.hero{position:relative;padding-top:8.5rem;padding-bottom:4rem;overflow:hidden}
@media(min-width:900px){.hero{padding-top:11.5rem;padding-bottom:6rem}}
.hero-grid{display:grid;gap:3rem;align-items:center}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.06fr .94fr;gap:4.5rem}}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.25rem}
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid var(--line-2)}
.proof-item{display:flex;align-items:center;gap:.5rem;font-size:.83rem;color:var(--mist)}
.stars{display:inline-flex;gap:1.5px}
.stars svg{width:12px;height:12px;fill:var(--brass)}

/* floating credential cards on hero plate */
.hero-stage{position:relative}
.float-card{position:absolute;z-index:3;padding:.3rem;border-radius:1.25rem;
  background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line);box-shadow:0 30px 60px -32px rgba(12,42,39,.45)}
.float-card .fc-core{border-radius:.95rem;background:var(--paper);border:1px solid var(--line-2);
  box-shadow:var(--hl);padding:.85rem 1rem}
.fc-a{left:-1rem;bottom:2.5rem;width:15rem}
.fc-b{right:-1rem;top:2rem;width:12.5rem}
@media(max-width:999px){.fc-a{left:.5rem;bottom:1rem;width:13rem}.fc-b{right:.5rem;top:1rem;width:11rem}}
@media(max-width:520px){.fc-b{display:none}.fc-a{left:.5rem;right:.5rem;bottom:.75rem;width:auto}}
.float-drift{animation:drift 9s var(--e-soft) infinite}
.float-drift-2{animation:drift 11s var(--e-soft) infinite reverse}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------------- marquee ---------------- */
.marq{position:relative;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)}
.marq-track{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.marq-item{display:flex;align-items:center;gap:.7rem;padding-inline:2rem;white-space:nowrap;
  font-size:.95rem;font-weight:500;letter-spacing:-.02em;color:var(--ink-2);opacity:.75}
.marq-item .sep{width:4px;height:4px;border-radius:50%;background:var(--spruce);opacity:.5}

/* ---------------- bento ---------------- */
.bento{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:760px){.bento{grid-template-columns:repeat(6,1fr);gap:1.1rem}}
@media(min-width:1080px){.bento{grid-template-columns:repeat(12,1fr);gap:1.25rem}}
.b-card{display:flex;flex-direction:column;min-height:15rem}
.b-card > .tray{display:flex;flex-direction:column}
.b-card .tray-core{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:1.6rem;gap:2.5rem}
@media(min-width:1080px){
  .s-1{grid-column:span 7}
  .s-2{grid-column:span 5}
  .s-3{grid-column:span 4}
  .s-4{grid-column:span 4}
  .s-5{grid-column:span 4}
  .s-6{grid-column:span 5}
  .s-7{grid-column:span 7}
}
@media(min-width:760px) and (max-width:1079px){
  .s-1,.s-2,.s-3,.s-4,.s-5,.s-6,.s-7{grid-column:span 3}
  .s-1,.s-7{grid-column:span 6}
}
.b-icon{width:2.6rem;height:2.6rem;border-radius:.85rem;display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line-2);box-shadow:var(--hl-soft)}
.b-icon svg{width:18px;height:18px;stroke:var(--spruce);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.b-tag{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.b-feature{position:relative;min-height:21rem}
.b-feature .tray-core{padding:0;justify-content:flex-end}
.b-feature .b-body{position:relative;z-index:2;padding:1.7rem}

/* ---------------- before / after ---------------- */
.ba{position:relative;aspect-ratio:16/10;user-select:none;touch-action:pan-y;cursor:ew-resize;isolation:isolate}
/* each layer owns its stacking context, so the .plate>img z-index:2 stays local
   and cannot paint over the clipped .after layer */
.ba .layer{position:absolute;inset:0;isolation:isolate}
.ba .after{z-index:1;clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:rgba(255,255,255,.85);
  box-shadow:0 0 22px rgba(12,42,39,.35);z-index:4;transform:translateX(-1px)}
.ba .knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3.1rem;height:3.1rem;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.5);box-shadow:0 16px 34px -14px rgba(12,42,39,.5);
  display:grid;place-items:center;transition:transform .5s var(--e-fluid)}
.ba:hover .knob{transform:translate(-50%,-50%) scale(1.07)}
.ba .knob svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ba .lbl{position:absolute;bottom:1rem;z-index:5;font-family:"Geist Mono",monospace;font-size:9px;
  letter-spacing:.22em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);color:var(--ink)}
.ba .lbl.l{left:1rem}
.ba .lbl.r{right:1rem}
.ba .ba-range{z-index:3}

/* ---------------- doctors ----------------
   Compact: a small portrait sits beside the name, bio runs full column width
   underneath. The portrait is ~144px at its largest, roughly a quarter of the
   half-width block it replaced. */
.docs{display:grid;gap:2.75rem}
@media(min-width:860px){.docs{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}}
.doc-head{display:grid;grid-template-columns:auto 1fr;gap:1.35rem;align-items:center;margin-bottom:1.35rem}
.doc-photo{width:clamp(5.5rem,12vw,9rem)}
.doc-plate{aspect-ratio:4/5}
.doc-id .d3{font-size:clamp(1.12rem,1.8vw,1.4rem)}
.doc-role{font-family:"Geist Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist);margin:.5rem 0 0}
.doc-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.chip{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:999px;background:var(--ground-2);border:1px solid var(--line-2);color:var(--mist)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:820px){.stats{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
.stat .tray-core{padding:1.5rem}
.stat .n{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.05em;line-height:1;font-weight:500}

/* ---------------- reviews ---------------- */
.reviews{display:grid;gap:1.25rem}
@media(min-width:900px){.reviews{grid-template-columns:repeat(3,1fr)}
  .reviews > *:nth-child(2){margin-top:2.25rem}}
.rev .tray-core{padding:1.75rem;display:flex;flex-direction:column;gap:1.25rem;height:100%}
.rev q{quotes:none;font-size:1.02rem;line-height:1.55;letter-spacing:-.018em;color:var(--ink)}
.rev-who{display:flex;align-items:center;gap:.75rem;margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--line-2)}
.avatar{width:2.4rem;height:2.4rem;border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line-2);font-size:.78rem;font-weight:600;letter-spacing:-.02em;color:var(--spruce)}

/* ---------------- offer ---------------- */
.offer-grid{display:grid;gap:1.25rem}
@media(min-width:960px){.offer-grid{grid-template-columns:1.25fr 1fr;gap:1.5rem}}
.price{display:flex;align-items:baseline;gap:.35rem}
.price .cur{font-size:1.4rem;font-weight:400;opacity:.6}
.price .val{font-size:clamp(3.2rem,7vw,4.6rem);letter-spacing:-.055em;line-height:.9;font-weight:500}
.price .per{font-size:.85rem;color:currentColor;opacity:.65;margin-left:.3rem}
.incl{display:flex;flex-direction:column;gap:.6rem;margin-top:1.75rem}
.incl li{display:flex;align-items:flex-start;gap:.7rem;font-size:.92rem;line-height:1.45}
.incl svg{width:15px;height:15px;flex:none;margin-top:.22rem;stroke:currentColor;fill:none;stroke-width:1.2;opacity:.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- visit ---------------- */
.visit-grid{display:grid;gap:1.25rem}
@media(min-width:960px){.visit-grid{grid-template-columns:.85fr 1.15fr;gap:1.5rem}}
.hours{width:100%;border-collapse:collapse}
.hours td{padding:.62rem 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.hours tr:last-child td{border-bottom:0}
.hours td:last-child{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--spruce);font-weight:500}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.5rem 0;text-align:left;font-size:clamp(1.02rem,1.7vw,1.25rem);font-weight:500;letter-spacing:-.026em;
  transition:color .45s var(--e-out)}
.faq-q:hover{color:var(--spruce)}
.faq-sign{width:1.8rem;height:1.8rem;border-radius:999px;flex:none;display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line-2);margin-top:.1rem;
  transition:transform .65s var(--e-fluid),background-color .5s var(--e-out)}
.faq-sign svg{width:12px;height:12px;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round}
.faq-item.open .faq-sign{transform:rotate(135deg);background:var(--spruce)}
.faq-item.open .faq-sign svg{stroke:var(--on-spruce)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--e-fluid)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{margin:0 0 1.75rem;max-width:62ch;color:var(--ink-2);font-size:.96rem;line-height:1.65;
  opacity:0;transform:translateY(.6rem);transition:opacity .6s var(--e-out) .1s,transform .7s var(--e-fluid) .1s}
.faq-item.open .faq-a p{opacity:1;transform:none}

/* ---------------- footer ---------------- */
.foot{padding-block:3.25rem 2.5rem;position:relative}
.foot-word{font-size:clamp(3rem,15vw,11rem);letter-spacing:-.06em;line-height:.8;font-weight:500;
  color:var(--ink);opacity:.08;user-select:none;white-space:nowrap}
.foot-cols{display:grid;gap:2.5rem;margin-bottom:4rem}
@media(min-width:760px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}}
.foot-cols h4{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mist);font-weight:500;margin-bottom:1.1rem}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.foot-cols a{font-size:.92rem;color:var(--ink-2);transition:color .4s var(--e-out)}
.foot-cols a:hover{color:var(--spruce)}
.foot-legal{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;align-items:center;
  padding-top:2rem;border-top:1px solid var(--line-2)}

/* utility */
.stack{display:flex;flex-direction:column}
.g1{gap:.4rem}.g2{gap:.8rem}.g3{gap:1.25rem}.g4{gap:2rem}
.row{display:flex;align-items:center}
.wrapr{flex-wrap:wrap}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.75rem}.mt4{margin-top:2.75rem}
.sp{color:var(--spruce)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv-armed .rv{opacity:1;transform:none;transition:none}
  .marq-track{animation:none}
  .float-drift,.float-drift-2{animation:none}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============================================================
   MERIDIAN — page-level components
   Extends base.css. Nothing here redefines a token.
   ============================================================ */

/* ---------------- asset slots ----------------
   Drop a real photo in by setting src on the <img> inside a .plate.
   The gradient field, arch motif and slug hide themselves automatically. */
.plate > img{display:none}
.plate > img[src]{display:block;position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:var(--focal,50% 50%);z-index:2}
.plate:has(> img[src]) .field,
.plate:has(> img[src]) .arcs,
.plate:has(> img[src]) .slug{display:none}
.plate > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ar{aspect-ratio:var(--ar,4/3)}

/* ---------------- nav dropdown ---------------- */
.has-menu{position:relative}
.nav-trig{display:inline-flex;align-items:center;gap:.35rem}
.nav-trig .chev{width:11px;height:11px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e-fluid)}
.has-menu[data-open="true"] .nav-trig .chev{transform:rotate(180deg)}
.nav-panel{
  position:absolute;top:calc(100% + .9rem);left:50%;
  width:min(29rem,calc(100vw - 2rem));
  padding:.4rem;border-radius:1.6rem;
  background:var(--glass);
  -webkit-backdrop-filter:blur(30px) saturate(1.7);backdrop-filter:blur(30px) saturate(1.7);
  border:1px solid var(--line);
  box-shadow:var(--hl-soft),0 40px 80px -34px rgba(12,42,39,.5);
  opacity:0;visibility:hidden;transform:translate(-50%,-.6rem) scale(.97);
  transition:opacity .5s var(--e-out),transform .6s var(--e-fluid),visibility .5s;
}
.has-menu[data-open="true"] .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.nav-panel-core{border-radius:1.2rem;background:var(--paper);border:1px solid var(--line-2);
  box-shadow:var(--hl);padding:.5rem;display:grid;grid-template-columns:1fr 1fr;gap:.15rem}
.np-item{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem;border-radius:.85rem;
  transition:background-color .45s var(--e-out)}
.np-item:hover{background:var(--ground-2)}
.np-item .ic{width:1.9rem;height:1.9rem;border-radius:.6rem;flex:none;display:grid;place-items:center;
  background:var(--ground-2);border:1px solid var(--line-2)}
.np-item:hover .ic{background:var(--paper)}
.np-item .ic svg{width:15px;height:15px;stroke:var(--spruce);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.np-item .tx{min-width:0}
.np-item .t{display:block;font-size:.88rem;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.np-item .s{display:block;font-size:.76rem;color:var(--mist);line-height:1.35;margin-top:.2rem;text-wrap:pretty}
.np-foot{grid-column:1/-1;margin-top:.15rem;padding:.75rem .7rem .55rem;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* mobile sheet sub-links */
.m-sub{display:flex;flex-wrap:wrap;gap:.4rem;padding:.9rem 0 1.1rem;
  opacity:0;transform:translateY(1.5rem);
  transition:opacity .8s var(--e-out) var(--d,0ms),transform .9s var(--e-fluid) var(--d,0ms)}
body.menu-open .m-sub{opacity:1;transform:none}
.m-sub a{font-size:.85rem;padding:.42rem .85rem;border-radius:999px;background:var(--ground-2);
  border:1px solid var(--line-2);color:var(--ink-2);transition:color .4s var(--e-out),background-color .4s var(--e-out)}
.m-sub a:hover{color:var(--spruce);background:var(--paper)}

/* ---------------- page hero (interior pages) ---------------- */
.phero{position:relative;padding:9rem 0 3.5rem;overflow:hidden}
@media(min-width:768px){.phero{padding:11.5rem 0 5rem}}
.phero-grid{display:grid;gap:2.5rem;align-items:end}
@media(min-width:900px){.phero-grid{grid-template-columns:1.15fr .85fr;gap:4rem}}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1.5rem;
  font-family:"Geist Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.crumb a{color:var(--mist);transition:color .4s var(--e-out)}
.crumb a:hover{color:var(--spruce)}
.crumb span{color:var(--ink-2)}
.crumb .sl{color:var(--mist);opacity:.5}

/* ---------------- alternating feature rows ---------------- */
.rows{display:flex;flex-direction:column;gap:5rem}
@media(min-width:900px){.rows{gap:8rem}}
.frow{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){
  .frow{grid-template-columns:1fr 1fr;gap:4.5rem}
  .frow:nth-child(even) .frow-media{order:-1}
}
.frow-body h3{margin-bottom:1rem}
.frow-body .lede{margin-bottom:1.5rem}

/* ---------------- numbered steps (real sequences only) ---------------- */
.steps{display:grid;gap:1rem;counter-reset:step}
@media(min-width:820px){.steps{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1.15rem}}
.step-c .tray-core{padding:1.6rem;height:100%;display:flex;flex-direction:column;gap:.85rem}
.step-c .tray{height:100%;display:flex;flex-direction:column}
.step-c .tray > .tray-core{flex:1}
.step-n{display:flex;align-items:center;gap:.7rem}
.step-n b{width:1.75rem;height:1.75rem;border-radius:999px;display:grid;place-items:center;
  background:var(--spruce);color:var(--on-spruce);
  font-family:"Geist Mono",monospace;font-size:10px;font-weight:500;letter-spacing:0}
.step-n .dur{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.steps-line{position:relative}
@media(min-width:820px){
  .steps-line::before{content:"";position:absolute;left:0;right:0;top:2.45rem;height:1px;
    background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 9px);z-index:0}
  .steps-line > *{position:relative;z-index:1}
}

/* ---------------- data tables ---------------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;min-width:34rem}
.tbl th,.tbl td{padding:.95rem 1rem;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-2)}
.tbl thead th{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);font-weight:500;border-bottom:1px solid var(--line);padding-block:.75rem}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl tbody tr{transition:background-color .4s var(--e-out)}
.tbl tbody tr:hover{background:var(--ground-2)}
.tbl .em{color:var(--spruce);font-weight:500}
.tbl .mut{color:var(--mist)}
.tbl-note{font-size:.8rem;color:var(--mist);margin:1rem 0 0;max-width:62ch}

/* comparison table: our column highlighted */
.tbl.cmp td:nth-child(2),.tbl.cmp th:nth-child(2){background:var(--ground-2);text-align:left}
.tbl.cmp th:nth-child(2){color:var(--spruce)}
.tbl.cmp td:nth-child(3),.tbl.cmp th:nth-child(3){text-align:left;color:var(--mist)}

/* ---------------- gallery ---------------- */
.filters{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:2.5rem}
.filt{font-size:.85rem;font-weight:450;padding:.5rem 1rem;border-radius:999px;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--hl-soft);
  transition:background-color .5s var(--e-out),color .5s var(--e-out),transform .5s var(--e-fluid)}
.filt:hover{transform:translateY(-1px)}
.filt[aria-pressed="true"]{background:var(--spruce);color:var(--on-spruce);border-color:transparent}
.cases{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:680px){.cases{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{transition:opacity .6s var(--e-out),transform .6s var(--e-fluid)}
.case[hidden]{display:none}
.case-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.case-pair .plate{aspect-ratio:1/1}
.case-pair .tag{position:absolute;left:.55rem;top:.55rem;z-index:3;
  font-family:"Geist Mono",monospace;font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  padding:.25rem .5rem;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--ink)}
.case-meta{padding:1.1rem 1.2rem;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}

/* ---------------- team ---------------- */
.team{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.team{grid-template-columns:repeat(4,1fr)}}
/* The grid stretches every card to the tallest in its row. Without stretching the
   core to match, a one-line role sits in a short core inside a tall tray and the
   outer bezel shows through underneath — cards look doubled up and misaligned. */
.team > .tray{display:flex;flex-direction:column}
.team .tray-core{flex:1;display:flex;flex-direction:column}
.team .plate{flex:none;height:auto;aspect-ratio:3/4}
.team-body{padding:1.1rem;flex:1}

/* ---------------- callout / notice ---------------- */
.callout{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;justify-content:space-between}
.callout .tray-core{padding:1.5rem 1.75rem}
.urgent .tray{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0)),var(--spruce-deep);
  border-color:rgba(255,255,255,.1)}
.urgent .tray-core{background:var(--spruce);border-color:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);color:var(--on-spruce)}
.urgent .tray-core .small{color:var(--on-spruce);opacity:.75}

/* first-aid cards */
.aid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:700px){.aid{grid-template-columns:repeat(2,1fr);gap:1.15rem}}
.aid .tray-core{padding:1.6rem}
.aid ol{margin:1rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.aid li{font-size:.9rem;line-height:1.5;color:var(--ink-2);padding-left:.3rem}
.aid li::marker{color:var(--spruce);font-variant-numeric:tabular-nums;font-size:.8rem}

/* ---------------- forms ---------------- */
.field-row{display:grid;gap:1rem}
@media(min-width:640px){.field-row.two{grid-template-columns:1fr 1fr}}
.f{display:flex;flex-direction:column;gap:.5rem}
.f label{font-family:"Geist Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mist)}
.f input,.f select,.f textarea{
  width:100%;padding:.85rem 1rem;border-radius:.9rem;
  background:var(--ground-2);border:1px solid var(--line-2);color:var(--ink);
  font:inherit;font-size:.94rem;box-shadow:var(--hl-soft);
  transition:border-color .45s var(--e-out),background-color .45s var(--e-out),box-shadow .45s var(--e-out)}
.f textarea{min-height:7rem;resize:vertical;line-height:1.55}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--spruce);
  background:var(--paper);box-shadow:var(--hl-soft),0 0 0 3px var(--enamel-wash)}
.f input::placeholder,.f textarea::placeholder{color:var(--mist);opacity:.75}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 1.15rem) 55%,calc(100% - .85rem) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.5rem}

/* choice chips (radio-styled) */
.choices{display:grid;gap:.65rem;grid-template-columns:1fr}
@media(min-width:600px){.choices{grid-template-columns:repeat(2,1fr)}}
.choices.three{grid-template-columns:1fr}
@media(min-width:700px){.choices.three{grid-template-columns:repeat(3,1fr)}}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .box{display:flex;align-items:flex-start;gap:.75rem;padding:1rem 1.1rem;border-radius:1.1rem;
  background:var(--ground-2);border:1px solid var(--line-2);box-shadow:var(--hl-soft);
  transition:border-color .5s var(--e-out),background-color .5s var(--e-out),transform .5s var(--e-fluid)}
.choice:hover .box{transform:translateY(-2px)}
.choice input:checked + .box{border-color:var(--spruce);background:var(--paper);
  box-shadow:var(--hl-soft),0 0 0 2px var(--enamel-wash)}
.choice input:focus-visible + .box{outline:2px solid var(--spruce);outline-offset:3px}
.choice .mark{width:1.1rem;height:1.1rem;border-radius:999px;flex:none;margin-top:.15rem;
  border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;
  transition:background-color .4s var(--e-out),border-color .4s var(--e-out)}
.choice .mark::after{content:"";width:.45rem;height:.45rem;border-radius:999px;background:var(--on-spruce);
  transform:scale(0);transition:transform .45s var(--e-fluid)}
.choice input:checked + .box .mark{background:var(--spruce);border-color:var(--spruce)}
.choice input:checked + .box .mark::after{transform:scale(1)}
.choice .t{font-size:.92rem;font-weight:500;letter-spacing:-.02em;line-height:1.3}
.choice .s{font-size:.8rem;color:var(--mist);line-height:1.4;margin-top:.2rem}

/* A tray that is a stretched grid item must stretch its core too. Without this the
   core stays content-height while the outer shell grows to the row, leaving a band of
   the tray's own ground colour inside the rounded shell below the card. */
.offer-grid > .tray,
.visit-grid > .tray,
.book-grid > .tray{display:flex;flex-direction:column}
.offer-grid > .tray > .tray-core,
.visit-grid > .tray > .tray-core,
.book-grid > .tray > .tray-core{flex:1;display:flex;flex-direction:column}
.offer-grid > .tray > .tray-core > *,
.book-grid > .tray > .tray-core > *{flex:1}

/* Visit page location block. The exterior photo holds its 13:5 crop; the map plate
   below it takes whatever height the address / hours / parking column adds, so the
   two columns end level instead of leaving a band of ground under the map. Below the
   960px breakpoint the grid is one column, the stack height goes indefinite, and the
   plate falls back to its own --ar. */
.visit-grid > .visit-stack{min-height:100%}
.visit-grid > .visit-stack > .tray.grow{flex:1;min-height:0;display:flex;flex-direction:column}
.visit-grid > .visit-stack > .tray.grow > .tray-core{flex:1;min-height:0}

/* ---------------- booking stepper ---------------- */
.book-grid{display:grid;gap:1.5rem}
@media(min-width:1000px){.book-grid{grid-template-columns:1.5fr .85fr;gap:1.75rem;align-items:start}}
.stepbar{display:flex;align-items:center;gap:.6rem;margin-bottom:2rem;flex-wrap:wrap}
.stepbar .s{display:flex;align-items:center;gap:.55rem;font-family:"Geist Mono",monospace;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);
  transition:color .5s var(--e-out)}
.stepbar .s b{width:1.5rem;height:1.5rem;border-radius:999px;display:grid;place-items:center;font-weight:500;
  background:var(--ground-2);border:1px solid var(--line-2);color:var(--mist);
  transition:background-color .5s var(--e-out),color .5s var(--e-out),border-color .5s var(--e-out)}
.stepbar .s.on{color:var(--ink)}
.stepbar .s.on b{background:var(--spruce);color:var(--on-spruce);border-color:transparent}
.stepbar .s.done b{background:var(--enamel-wash);color:var(--spruce);border-color:transparent}
.stepbar .bar{flex:1;min-width:1rem;height:1px;background:var(--line)}
.pane{display:none}
.pane.on{display:block;animation:paneIn .7s var(--e-out) both}
@keyframes paneIn{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}
.pane h3{margin-bottom:.5rem}
.pane .lede{margin-bottom:1.75rem}
.book-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:2rem;
  padding-top:1.5rem;border-top:1px solid var(--line-2)}
.book-aside .tray-core{padding:1.6rem}
.done-mark{width:3.5rem;height:3.5rem;border-radius:999px;display:grid;place-items:center;margin:0 auto 1.5rem;
  background:var(--spruce)}
.done-mark svg{width:22px;height:22px;stroke:var(--on-spruce);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- prose (legal) ---------------- */
.legal-grid{display:grid;gap:2.5rem}
@media(min-width:940px){.legal-grid{grid-template-columns:15rem 1fr;gap:4rem;align-items:start}}
.legal-nav{position:sticky;top:7rem;display:flex;flex-direction:column;gap:.15rem}
.legal-nav a{padding:.55rem .8rem;border-radius:.7rem;font-size:.88rem;color:var(--mist);
  transition:color .4s var(--e-out),background-color .4s var(--e-out)}
.legal-nav a:hover{color:var(--ink);background:var(--ground-2)}
.legal-nav a.on{color:var(--spruce);background:var(--ground-2);font-weight:500}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.038em;margin:0 0 1rem}
.prose h3{font-size:1.08rem;letter-spacing:-.024em;margin:2.5rem 0 .75rem}
.prose p{margin:0 0 1.1rem;color:var(--ink-2);font-size:.96rem;line-height:1.7}
.prose ul{margin:0 0 1.25rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.5rem}
.prose li{color:var(--ink-2);font-size:.94rem;line-height:1.6}
.prose li::marker{color:var(--spruce)}
.prose section + section{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--line)}
.prose .updated{font-family:"Geist Mono",monospace;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mist);margin-bottom:1.5rem}

/* ---------------- misc ---------------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.45rem}
.checks{display:grid;gap:.7rem;grid-template-columns:1fr}
@media(min-width:640px){.checks{grid-template-columns:repeat(2,1fr);gap:.7rem 2rem}}
.checks li{display:flex;align-items:flex-start;gap:.7rem;font-size:.93rem;line-height:1.5;color:var(--ink-2)}
.checks svg{width:15px;height:15px;flex:none;margin-top:.22rem;stroke:var(--spruce);fill:none;stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round}
.quote-lg{font-size:clamp(1.3rem,2.6vw,1.85rem);letter-spacing:-.03em;line-height:1.35;quotes:none;
  color:var(--ink);display:block;max-width:26ch}
.kv{display:flex;flex-direction:column;gap:.9rem}
.kv div{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--line-2)}
.kv div:last-child{border-bottom:0;padding-bottom:0}
.kv dt{font-size:.85rem;color:var(--mist)}
.kv dd{margin:0;font-size:.92rem;font-weight:500;text-align:right}

/* ---------------- bundle router (preview build only) ---------------- */
.page{display:none}
.page.on{display:block}

@media(prefers-reduced-motion:reduce){
  .pane.on{animation:none}
}

/* ---------------- skip link ---------------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:70;padding:.7rem 1.1rem;border-radius:999px;
  background:var(--spruce);color:var(--on-spruce);box-shadow:var(--shadow-amb)}

/* ---------------- quick-booking dialog ----------------
   Native <dialog>, so the top layer, Escape, inertness behind and focus
   containment are the platform's job rather than ours. It sits above .nav (40)
   and .grain (60) by virtue of the top layer, so no z-index is needed here.

   The card scrolls internally, not the page: on a short viewport the form is
   taller than the screen, and scrolling the body behind an open dialog is how
   you lose your place in it. */
.bk{
  position:fixed;inset:0;border:0;padding:0;background:transparent;
  max-width:none;max-height:none;width:100%;height:100%;overflow:hidden;color:var(--ink);
}
.bk::backdrop{
  background:rgba(6,20,18,.55);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
}
.bk-card{
  position:relative;margin:auto;width:min(41rem,100%);max-height:100%;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:var(--paper);border:1px solid var(--line);border-radius:1.75rem;
  padding:2.4rem clamp(1.4rem,4vw,2.4rem);
  box-shadow:0 60px 120px -30px rgba(6,20,18,.55);
}
/* the dialog is display:none until open, so flex centring goes on the open state */
.bk[open]{display:flex;align-items:center;justify-content:center;padding:1rem}

.bk-x{
  position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;border-radius:999px;
  display:grid;place-items:center;cursor:pointer;border:1px solid var(--line);
  background:var(--glass);color:var(--mist);transition:color .2s,border-color .2s,transform .2s;
}
.bk-x:hover{color:var(--ink);border-color:var(--ink);transform:rotate(90deg)}
.bk-x:focus-visible{outline:2px solid var(--spruce);outline-offset:3px}
.bk-x svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}

.f label .opt{color:var(--mist);letter-spacing:.12em}
.bk-fine{margin-top:1.4rem;font-size:.78rem;line-height:1.55;color:var(--mist);max-width:52ch}
.bk-fine a{color:var(--spruce)}
.bk-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1.6rem}

/* the field is flagged only after a failed send, so nothing shouts while typing */
.bk-form [aria-invalid="true"]{border-color:var(--spruce)}
.bk-err{margin:1rem 0 0;font-size:.82rem;color:var(--spruce);font-weight:500}

.bk-done{text-align:center}
.bk-kv{max-width:22rem;margin:2rem auto 0;text-align:left}

@media(max-width:560px){
  .bk-card{border-radius:1.4rem;padding:2rem 1.25rem}
  .bk-actions .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .bk-x:hover{transform:none}
}