/* Kunik v2, the bold cinematic skin (W7-R38): the base styles, every band's finished frame. Reduce Motion, Save-Data,
   two-frame mode and ?motion=off show exactly this. The practice's own photographs, films and fonts; brass only on ink,
   oak-deep its text-safe sibling on paper (DC2); contrast measured by pane_qa.js, never eyeballed. */
@font-face{font-family:"Bona Nova";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/bona-nova-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Bona Nova";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/bona-nova-latin-700-normal.woff2) format("woff2")}
/* the brand kit of 2026-11-05 (_build/brand-kit/2026-11-05/KIT-NOTES.md): Lato for body text, Montserrat for the uppercase labels
   (the stand-in for TT Chocolates), Belleza for the spaced wordmark, Bona Nova standing in for The Seasons until its license is Brandon's call */
@font-face{font-family:"Montserrat Variable";font-weight:100 900;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-wght-normal.06b16db7.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/lato-latin-400-normal.918b7dc3.woff2) format("woff2")}
@font-face{font-family:"Lato";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/lato-latin-700-normal.c447dd76.woff2) format("woff2")}
@font-face{font-family:"Belleza";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/belleza-latin-400-normal.f2c2b2ff.woff2) format("woff2")}
:root{
  /* the kit's palette: porcelain, mist and silver as the light foundation; midnight green, pine and forest as the deep ground; champagne,
     antique gold and walnut as the warm accents; lime wash and meadow as the five-percent highlight. The old names keep their roles:
     --ink is the deep ground, --paper the light one, --brass the accent on the deep ground, --oak-deep the accent on the light one. */
  --paper:#FDFFFC;--ink:#011B11;--muted:#4D5F58;--oak-deep:#745E42;--brass:#C6AB87;--terrazzo:#E2EAE9;--brick:#C6AB87;--oak:#C6AB87;
  --paper-dim:#C8CECD;--rule-ink:rgba(253,255,252,.16);--rule-paper:#C8CECD;--rule-terrazzo:#C8CECD;
  --pine:#283F22;--forest:#38592F;--meadow:#99B36C;--lime:#CBE59E;--gold:#997950;--mist:#E2EAE9;--silver:#C8CECD;--stone:#AFB5B4;
  --display:"Bona Nova",Georgia,"Times New Roman",serif;--body:"Lato","Helvetica Neue",Arial,system-ui,sans-serif;
  --caps:"Montserrat Variable","Montserrat","Helvetica Neue",Arial,sans-serif;--mark:"Belleza","Montserrat Variable",sans-serif;
  --wrap:min(1200px, calc(100vw - 80px));--gx:calc((100vw - var(--wrap)) / 2);--headh:112px;--barh:56px;
  --fs-display:clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);   /* 42 at 375, 83 at 1280 */
  --fs-h2:clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem);      /* 37 / 68 */
  --fs-voice:clamp(2rem, 1.4rem + 3vw, 4rem);           /* 34 / 61, under the H1 (W7-R25) */
  --fs-num:clamp(6rem, 3rem + 12vw, 12rem);             /* 96 / 192: the door numbers, information, never ornament (DL7) */
  --fs-lede:clamp(1.25rem, 1.1rem + .8vw, 1.625rem);    /* 20 / 26 */
  --fs-line:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);      /* 28 / 44: the practice's sentences set large */
  --sec:clamp(56px, 6vw + 40px, 120px);
  --brake:cubic-bezier(.16, 1, .3, 1);
  --card-w:clamp(300px, calc((100vh - 316px) * .8), 420px);
  --travel:max(0px, calc(5 * var(--card-w) + 96px - var(--wrap)));
}
@media (max-width:1079px){:root{--wrap:calc(100vw - 32px);--headh:56px;--barh:48px;--card-w:min(300px, 78vw)}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--ink);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;
  font-variant-numeric:lining-nums tabular-nums;font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;text-size-adjust:none}
body{margin:0;background:var(--paper)}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h1,h2,h3,h4,figure,ul,ol,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
.wrap{width:var(--wrap);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;z-index:50;background:var(--paper);color:var(--ink);padding:8px 12px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.on-ink :focus-visible,.hero :focus-visible,.voice :focus-visible,.foot :focus-visible,.head :focus-visible,.drawer :focus-visible{outline-color:var(--paper)}
.cap{font:700 11px/1 var(--caps);letter-spacing:.09em;text-transform:uppercase;color:var(--oak-deep)}
.on-ink .cap,.hero .cap,.voice .cap,.foot .cap{color:var(--brass)}
.lede{font:400 var(--fs-lede)/1.45 var(--body);text-wrap:pretty}
.link{color:var(--oak-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.hero .link,.voice .link,.foot .link{color:var(--brass)}
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- the plates: every action; the pressed face is the inverted face ---------- */
/* the plates: a slab of forest or champagne with a hairline bevel and the caps face; on a pointer that can hover a sheen crosses the slab
   and it lifts on a deeper shadow; the press compresses it (motion.js) under a ripple of its own ripple colour from the pointer, and the
   pressed face darkens a touch (the earlier cut to paper is retired). The signed plate is the outline; it fills faintly on hover and press. */
.plate{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:3px;text-decoration:none;
  font:600 14px/1 var(--caps);letter-spacing:.03em;white-space:nowrap;background:var(--forest);color:var(--paper);border:1px solid var(--forest);cursor:pointer;
  position:relative;overflow:hidden;isolation:isolate;--rip:var(--paper);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(1,27,17,.24),0 1px 2px rgba(1,27,17,.18);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.plate--sign{background:transparent;color:var(--ink);border-color:rgba(1,27,17,.4);box-shadow:none;--rip:var(--ink)}
.plate.is-pressed{filter:brightness(.9);box-shadow:inset 0 2px 4px rgba(1,27,17,.28)}
.plate--sign.is-pressed{background:rgba(1,27,17,.1);filter:none;box-shadow:none}
.hero .plate,.voice .plate,.foot .plate,.drawer .plate{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.hero .plate--sign,.voice .plate--sign,.foot .plate--sign,.drawer .plate--sign{background:transparent;color:var(--paper);border-color:rgba(253,255,252,.55);--rip:var(--paper)}
.hero .plate--sign.is-pressed,.voice .plate--sign.is-pressed,.foot .plate--sign.is-pressed,.drawer .plate--sign.is-pressed{background:rgba(253,255,252,.12)}
.plate .rip{position:absolute;z-index:-1;border-radius:50%;background:var(--rip);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(0)}
@media (hover:hover){
  .plate::before{content:"";position:absolute;z-index:-1;top:-30%;bottom:-30%;left:0;width:36%;pointer-events:none;
    background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);transform:translateX(-140%) skewX(-18deg)}
  .plate--sign::before{background:linear-gradient(100deg,transparent 0%,rgba(1,27,17,.07) 50%,transparent 100%)}
  .hero .plate--sign::before,.voice .plate--sign::before,.foot .plate--sign::before,.drawer .plate--sign::before{background:linear-gradient(100deg,transparent 0%,rgba(253,255,252,.14) 50%,transparent 100%)}
  .plate:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(1,27,17,.24),0 10px 22px -10px rgba(1,27,17,.55)}
  .plate--sign:hover{filter:none;background:rgba(1,27,17,.06);border-color:var(--ink);box-shadow:none}
  .hero .plate--sign:hover,.voice .plate--sign:hover,.foot .plate--sign:hover,.drawer .plate--sign:hover{background:rgba(253,255,252,.09);border-color:var(--paper)}
  .plate.is-pressed:hover{filter:brightness(.9);box-shadow:inset 0 2px 4px rgba(1,27,17,.28)}
  .plate--sign.is-pressed:hover{filter:none;box-shadow:none}
  .bar .consult:hover{filter:brightness(1.06)}
  @media (prefers-reduced-motion:no-preference){
    .plate,.bar .consult{transition:filter 160ms,box-shadow 220ms var(--brake),background-color 160ms,border-color 160ms}
    @keyframes ko-sheen{from{transform:translateX(-140%) skewX(-18deg)}to{transform:translateX(420%) skewX(-18deg)}}
    .plate:hover::before{animation:ko-sheen 760ms cubic-bezier(.25,.6,.2,1) 1 both}
  }
}

/* ---------- the header: the films' letterbox bar from the first frame; two rows at rest, one bar past T ---------- */
.head{position:fixed;inset:0 0 auto 0;height:var(--headh);z-index:20;pointer-events:none;color:var(--paper);transform:translateZ(0)}
/* the parts the boarding animates keep their own layers, so cancelling the finished animations never re-composites the bar
   (QA 2026-11-05, M4: Mobile Safari dropped the header for a frame at the settle) */
.bar-ink,.pbar,.pbar .kdisc .kp,.pbar .kdisc i,.pbar .p-text .roll,.pbar .p-ask .roll,.bar .lockplate,.bar .labels nav,.bar .lab,.bar .call,.bar .consult,.bar .consult .ct{will-change:transform}
.head-space{height:var(--headh);background:var(--ink)}
.rows{position:absolute;inset:0 0 auto 0;height:var(--headh);background:var(--ink);pointer-events:auto}
.bar{position:absolute;inset:0 0 auto 0;height:var(--barh);visibility:hidden;pointer-events:auto}
.bar-ink{position:absolute;inset:0;background:var(--ink)}
.head.is-bar .rows{visibility:hidden}
.head.is-bar .bar{visibility:visible}
.sign-row{position:absolute;left:var(--gx);right:var(--gx);top:0;height:72px;display:flex;align-items:center}
/* the lockup: the published raster on a paper plate (BC-25), the plate drawn outside the 120 x 56 slot so the landing math holds */
.lockup{position:absolute;left:0;top:8px;width:120px;height:56px;display:block}
.lockup::before{content:"";position:absolute;inset:-2px -8px;background:var(--paper);border-radius:2px}
.lockup img{position:relative;display:block;width:120px;height:auto}
/* the two rasters overlap: the script carries the K's tail down into the caps line as the published logo draws it (the earlier split cut
   the tail at the caps line, and the 1 px gap read as a white line through it); the caps sit at the original's own line, 262/718 */
.lockup .lk-c{margin-top:-8.36px}
/* the wordmark writes itself: a soft edge sweeps the script on from the left, then the small caps settle in under it (the header's lockup on
   load, the flyer over the third drive). It lives here, not in motion.css, because the splash runs before html.mo arrives; Reduce Motion skips it. */
@media (prefers-reduced-motion:no-preference){
  @keyframes ko-write{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
  @keyframes ko-caps{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
  .is-writing .lk-s{-webkit-mask-image:linear-gradient(to right,#000 44%,transparent 56%);mask-image:linear-gradient(to right,#000 44%,transparent 56%);
    -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:ko-write 1100ms cubic-bezier(.45,0,.25,1) both}
  .is-writing .lk-c{animation:ko-caps 260ms 980ms var(--brake) both}
  /* the doctor band's name writes itself as the heading comes into view (page.js arms it while it is below the fold and starts it at entry):
     the body sweeps on as the header's does, and the K's tail draws down from the stem across the caps line as the last stroke (W7-R46) */
  .lk-name.is-armed .lk-body{-webkit-mask-image:linear-gradient(to right,#000 44%,transparent 56%);mask-image:linear-gradient(to right,#000 44%,transparent 56%);
    -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:ko-write 1100ms cubic-bezier(.45,0,.25,1) both paused}
  .lk-name.is-armed .lk-tail{-webkit-mask-image:linear-gradient(135deg,#000 42%,transparent 58%);mask-image:linear-gradient(135deg,#000 42%,transparent 58%);
    -webkit-mask-size:300% 300%;mask-size:300% 300%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:ko-tail 560ms 380ms cubic-bezier(.4,0,.2,1) both paused}
  .lk-name.is-writing .lk-body,.lk-name.is-writing .lk-tail{animation-play-state:running}
  @keyframes ko-tail{from{-webkit-mask-position:100% 100%;mask-position:100% 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
}
.sign-row .right{margin-left:auto;display:flex;align-items:center}
.nouns{display:flex;gap:26px;margin-right:28px}
.nouns a{font:500 16px/1 var(--body);text-decoration:none;height:40px;display:flex;align-items:center;color:var(--paper)}
.sign-row .plate{height:40px;padding:0 16px;font-size:13px;background:var(--brass);color:var(--ink);border-color:var(--brass)}
.sign-row .plate--sign{background:transparent;color:var(--paper);border-color:rgba(240,239,238,.5)}
.sign-row .plate+.plate{margin-left:10px}
.dir-row{position:absolute;left:calc(var(--gx) - 12px);top:72px;height:40px;display:flex;gap:8px}
.dir{position:relative;height:40px;display:flex;align-items:center;padding:0 12px;font:700 20px/1 var(--display);border-radius:2px 2px 0 0;
  white-space:nowrap;background:none;border:0;color:var(--paper);cursor:pointer}
.dir span{position:relative;z-index:1}
/* the hanger: one paper layer across the door row, clipped to the open label's plate, carrying the row's ink letters */
.hanger{position:absolute;left:0;top:0;height:40px;width:100%;background:var(--paper);visibility:hidden;z-index:2;pointer-events:none;
  clip-path:inset(0px 100% 0px 0px round 2px 2px 0px 0px)}
.hanger.is-on{visibility:visible}
.hanger .hl{position:absolute;top:0;height:40px;display:flex;align-items:center;font:700 20px/1 var(--display);color:var(--ink);white-space:nowrap}
.head.is-bar.is-moving .rows{visibility:visible;clip-path:inset(0px 0px calc(var(--headh) - var(--barh)) 0px)}
.head.is-moving:not(.is-cut) .sign-row .lockup{visibility:hidden}
.reg{font-size:.6em;vertical-align:.5em;line-height:0;margin-left:.04em}
.bar .lockplate{position:absolute;left:calc(var(--gx) - 8px);top:4px;width:102px;height:48px;background:var(--paper);border-radius:2px;transform-origin:8px 4px}
.bar .lockplate img{position:absolute;left:8px;width:86px;height:auto}
.bar .lockplate .lk-s{top:4px}
.bar .lockplate .lk-c{top:35.38px}
.bar .labels{position:absolute;left:calc(var(--gx) + 118px);top:0;height:56px;display:flex;align-items:center;gap:22px}
.bar .labels nav{display:flex;align-items:center;gap:22px}
.bar .lab{position:relative;font:600 12px/1 var(--caps);letter-spacing:.02em;color:var(--brass);white-space:nowrap;height:32px;display:flex;align-items:center;
  padding:0 8px;margin:0 -8px;border-radius:2px;text-decoration:none;transform-origin:left center;background:none;border:0;cursor:pointer}
.bar .lab.is-current{color:var(--lime)}
.bar .lab .reg{font-size:inherit;vertical-align:baseline;line-height:inherit;margin-left:0}
.bar .lab.is-open{background:var(--brass);color:var(--ink)}
.bar .tick{position:absolute;left:0;top:24px;width:1px;height:8px;background:var(--lime);visibility:hidden}
.head.is-bar .bar .tick.is-on{visibility:visible} /* only with the bar up: at rest the bar is hidden and the tick must not show through it (Find us, W7-R46) */
.bar .call{position:absolute;right:calc(var(--gx) + 148px);top:0;height:56px;display:flex;align-items:center;font:600 12px/1 var(--caps);letter-spacing:.02em;color:var(--brass);white-space:nowrap;text-decoration:none;transform-origin:0 50%}
.bar .consult{position:absolute;right:var(--gx);top:8px;height:40px;width:132px;padding:0;background:var(--brass);color:var(--ink);font:600 12px/1 var(--caps);letter-spacing:.02em;border:0;transform-origin:100% 50%}
.bar .consult .ct{display:inline-flex;justify-content:flex-start;white-space:nowrap}
.bar .consult.is-pressed,.p-consult.is-pressed{filter:brightness(.9)}
.prow,.pbar{display:none}
@media (max-width:1079px){
  .sign-row,.dir-row,.bar .lockplate,.bar .labels,.bar .call,.bar .consult,.bar .tick{display:none}
  .prow{display:block;position:absolute;inset:0}
  .prow .lockup{left:16px;top:8px;width:86px;height:40px}
  .prow .lockup::before{inset:-2px -6px}
  .prow .lockup img{width:86px;height:auto}
  .prow .lockup .lk-c{margin-top:-5.99px}
  .pbar{display:block;position:absolute;inset:0}
  .ctl{position:absolute;top:2px;height:44px;display:flex;align-items:center;justify-content:center;text-decoration:none;font:500 15px/1 var(--body);
    background:none;border:0;color:var(--paper);padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .prow .ctl{font:700 12px/1 var(--caps);letter-spacing:.01em;color:var(--paper)}
  .prow .p-consult,.pbar .p-consult{right:112px;width:120px;top:2px;height:44px;padding:0;isolation:isolate;white-space:nowrap;color:var(--ink)}
  .prow .p-consult::before,.pbar .p-consult::before{content:"";position:absolute;inset:2px 0;z-index:-1;background:var(--brass);border-radius:2px}
  .prow .p-call,.pbar .p-call{right:64px;width:44px;top:2px}
  .prow .p-menu,.pbar .p-menu{right:16px;width:44px;top:2px}
  .pbar .ctl{color:var(--brass);font:700 12px/1 var(--caps);letter-spacing:.01em}
  .pbar .p-consult{color:var(--ink)}
  .pbar .kdisc{left:16px;width:44px}
  .pbar .kdisc .kp{position:absolute;left:0;top:0;width:86px;height:46px;background:var(--paper);clip-path:inset(0px 42px 2px 0px round 22px)}
  .pbar .kdisc i{position:relative;width:30px;height:30px;background:var(--ink);-webkit-mask:url(img/k-mark-192.png) center/contain no-repeat;mask:url(img/k-mark-192.png) center/contain no-repeat} /* the whole K with its tail, cut from the logo by its own letterform (the earlier mark carried a sliver of the u and a cut tail: Brandon, "on mobile the K logo is cropped") */
  .pbar .p-text{right:240px;width:44px;overflow:hidden}
  .pbar .p-menu{overflow:hidden}
  .roll{display:block;position:relative}
}

/* ---------- the five panels (from 1080 px): one paper frame hung from the header's foot ---------- */
.panel{position:fixed;left:calc(var(--gx) - 12px);width:calc(var(--wrap) + 24px);height:440px;top:var(--headh);background:var(--paper);color:var(--ink);z-index:19;
  border-radius:0 0 2px 2px;visibility:hidden;box-shadow:0 24px 48px -24px rgba(24,20,19,.5)}
.panel.is-open{visibility:visible}
.head.is-bar ~ .panel{top:var(--barh)}
.panel .rim{position:absolute;top:0;left:0;width:1px;height:1px;background:var(--ink);transform-origin:0 0}
.pane{position:absolute;left:11px;top:24px;width:1200px;height:392px;display:none}
.pane.is-shown{display:block}
.pane .pic{position:absolute;top:0;height:390px;overflow:hidden;background:var(--terrazzo)}
.pane .pic img{width:auto;height:390px;max-width:none}
.pane .col{position:absolute;top:0;height:392px;display:flex;flex-direction:column}
.ttl{font:700 44px/1.02 var(--display);letter-spacing:-.01em}
.sent{font:400 26px/1.3 var(--body);margin-top:20px;text-wrap:pretty}
.kinds{font:500 24px/1.3 var(--body);margin-top:20px}
.kinds span{display:block}
.links{display:flex;gap:28px;margin-top:auto;margin-bottom:-8px}
.links a{font:500 16px/1 var(--body);color:var(--oak-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;height:44px;display:flex;align-items:center}
.p-aligners .pic{left:0;width:468px}.p-aligners .col{left:508px;width:692px}
.p-braces .pic{left:680px;width:520px}.p-braces .col{left:0;width:640px}
.p-hybrid .pic{left:0;width:390px}.p-hybrid .col{left:430px;width:770px}
.p-retainers .pic{left:444px;width:312px}.p-retainers .col{left:0;width:404px;text-align:right}.p-retainers .col2{left:796px;width:404px}
.p-all-ages .pic{left:888px;width:312px}.p-all-ages .col{left:0;width:848px}
.pane .who{margin-top:16px;display:flex;gap:20px;flex-wrap:wrap}
.pane .who label{display:flex;align-items:center;gap:8px;font:500 18px/1 var(--body);min-height:32px;cursor:pointer}
@media (max-width:1079px){.panel{display:none}}

/* ---------- the drawer (under 1080 px): a full-screen ink sheet dropped from the bar ---------- */
.drawer{position:fixed;inset:var(--barh) 0 0 0;z-index:19;background:var(--ink);color:var(--paper);overflow:auto;padding:8px 16px calc(32px + env(safe-area-inset-bottom));display:none}
.drawer.is-open{display:block}
.drawer .ways{display:flex;gap:24px;height:56px;align-items:center;border-bottom:1px solid var(--rule-ink)}
.drawer .ways a{font:500 17px/1 var(--body);text-decoration:none;min-height:44px;display:flex;align-items:center;color:var(--paper)}
.drawer .grp{display:flex;align-items:center;gap:16px;min-height:96px;text-decoration:none;border-bottom:1px solid var(--rule-ink);padding:10px 0;color:var(--paper)}
.drawer .grp img{width:96px;height:auto;flex:none;background:var(--terrazzo)}
.drawer .gt{font:700 32px/1.05 var(--display)}
.drawer .doors{margin-top:24px}
.drawer .cap{display:block;margin-bottom:6px}
.drawer .doors a{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--rule-ink);color:var(--paper)}
.drawer .doors b{display:block;font:700 28px/1.05 var(--display)}
.drawer .doors span{display:block;margin-top:4px;font:400 15px/1.3 var(--body);color:var(--paper-dim)}
.drawer .doors span i{font-style:normal;color:var(--brass);font-weight:700}
.drawer .dplate{margin-top:24px}

/* ---------- the splash: three arrivals, then the sign; the ink owns the first paint (MUST-2) ---------- */
.splash{position:fixed;inset:0;z-index:40;background:var(--ink);display:none}
.js.splashing .splash,.js .splash.is-on{display:block}
.splash .reel{position:absolute;left:0;right:0;top:calc(50vh - 100vw * 21 / 80);height:calc(100vw * 21 / 40);max-height:100vh;overflow:hidden}
.splash video,.splash .still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;visibility:hidden}
.splash video.is-on,.splash .still.is-on{visibility:visible}
/* the three arrivals' title cards: each office's name at display size, cut in with its beat in the films' own corner voice */
.splash .place{position:absolute;left:clamp(16px, 4vw, 48px);bottom:clamp(12px, 3vw, 36px);font:700 clamp(2.25rem, 1.2rem + 5.5vw, 6rem)/1 var(--display);letter-spacing:-.014em;color:var(--paper);visibility:hidden;paint-order:stroke fill;-webkit-text-stroke:6px var(--ink)}
.splash .place.is-on{visibility:visible}
.splash .sign{display:none}
.splash .skiphint{position:absolute;right:16px;bottom:16px;font:700 13px/1 var(--caps);letter-spacing:.05em;color:var(--brass);text-transform:uppercase;letter-spacing:.08em}
/* the handoff: the cover goes transparent while the reel shrinks into the gate (page.js); only the film moves */
.splash.is-morph{background:transparent;pointer-events:none}
.splash.is-morph .place,.splash.is-morph .skiphint{visibility:hidden}
.splash.is-morph .reel{will-change:transform}
.flyer{position:fixed;z-index:45;left:0;top:0;width:120px;height:56px;transform-origin:0 0;pointer-events:none}
.flyer::before{content:"";position:absolute;inset:-2px -8px;background:var(--paper);border-radius:2px}
.flyer img{position:relative;display:block;width:120px;height:auto}
.flyer .lk-c{margin-top:-8.36px}
.js.splashing .sign-row .lockup,.js.splashing .sign-row .nouns,.js.splashing .sign-row .plate,.js.splashing .dir-row,.js.splashing .prow .lockup,.js.splashing .prow .ctl{visibility:hidden}

/* ---------- film grain on the ink surfaces (static; never over a photograph or a film, which sit above it) ---------- */
.grain{position:relative;isolation:isolate}
.grain::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.075;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
.grain>*{position:relative;z-index:1}
@media (forced-colors:active){.grain::before{display:none}}
/* ---------- the drive up (#drive-up): the page is the letterbox; the picture floats in the ink ---------- */
.hero{background:var(--ink);color:var(--paper);padding:24px 0 var(--sec)}
#drive-up{scroll-margin-top:calc(var(--headh) + 24px)}
.hero .wrap{display:grid;grid-template-columns:760px 1fr;column-gap:48px;align-items:start;grid-template-areas:"h1 h1" "gate words" "stops look" "three look" "door door"}
/* the stops stay under the film they switch; the door number fills the words column under the trust lines, so no column runs empty */
.hero .look{grid-area:look;margin-top:40px}
.hero .num{font-size:min(var(--fs-num), 10rem)}
/* the cover, the kit's own composition: a pale green marble slab with the H1 on a midnight inset over its foot, so the words never sit on the veining */
.hero .cover{grid-area:h1;position:relative;padding-top:clamp(72px, 7.5vw, 104px);margin-bottom:24px}
.hero .cover::before{content:"";position:absolute;left:0;right:0;top:0;bottom:40px;background:var(--mist) url(img/marble-1400.webp) center/cover no-repeat;border-radius:2px}
.hero h1{position:relative;display:inline-block;margin:0;padding:20px 36px 4px 0;background:var(--ink);font:700 var(--fs-display)/1 var(--display);letter-spacing:-.014em;font-variant-numeric:lining-nums proportional-nums;text-wrap:balance;max-width:24ch}
.hero h1 .l{display:inline-block}
.gate{grid-area:gate}
.stops{grid-area:stops}
.three{grid-area:three}
.words{grid-area:words}
.door{grid-area:door}
.gate{position:relative;width:760px;height:452px;background:var(--ink)}
.gate .pic{position:absolute;left:0;top:13px;width:760px;height:399px;overflow:hidden;background:var(--ink)}
.gate .pic img,.gate .pic video{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.gate .pic video{visibility:hidden}
.gate .pic video.is-on{visibility:visible}
.gate .veil{position:absolute;left:0;top:13px;width:760px;height:399px;background:var(--ink);opacity:0;pointer-events:none}
.gate .corner{position:absolute;left:12px;top:25px;font:700 13px/1 var(--caps);letter-spacing:.05em;color:var(--paper);paint-order:stroke fill;-webkit-text-stroke:3px var(--ink);text-transform:uppercase;letter-spacing:.08em}
.gate .control{position:absolute;left:12px;top:45px;height:44px;padding:0 14px;display:flex;align-items:center;background:var(--ink);
  color:var(--paper);font:500 16px/1 var(--body);border-radius:2px;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gate .line{position:absolute;left:22px;right:22px;top:425px;height:2px;background:var(--brass);transform-origin:0 50%}
.gate .thumb{position:absolute;left:16px;top:416px;width:14px;height:18px;background:var(--brass);-webkit-mask:url(img/drop-47.png) center/contain no-repeat;mask:url(img/drop-47.png) center/contain no-repeat}
.gate .key{position:absolute;top:434px;font:700 10px/1 var(--caps);letter-spacing:.04em;color:var(--brass);text-transform:uppercase}
.stops{display:flex;gap:16px;margin-top:16px}
.stop{flex:1 1 0;min-width:0;width:auto;padding:0;border:0;background:none;text-align:center;cursor:pointer;color:var(--paper-dim);-webkit-tap-highlight-color:transparent}
.stop .t{width:100%;aspect-ratio:4 / 3;overflow:hidden;display:block}
.stop img{width:100%;height:100%;object-fit:cover;max-width:none}
.stop span.n{display:block;margin-top:10px;font:600 13px/1 var(--body);text-transform:uppercase;letter-spacing:.08em}
.stop.is-shown{color:var(--paper)}
.stop span.n{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:text-decoration-color 180ms var(--brake),color 180ms var(--brake)}
.stop:hover{color:var(--paper)}
.stop:hover span.n{text-decoration-color:var(--paper-dim)}
.stop.is-shown span.n{text-decoration-color:var(--brass)}
.stop.is-shown .t{box-shadow:0 0 0 2px var(--brass)} /* the shown office's still wears a champagne frame (W7-R46) */
.three{margin-top:18px;font:500 15px/1.4 var(--body);color:var(--paper-dim)}
.words{padding-top:6px}
.words .treat{font:500 16px/1.4 var(--body);color:var(--paper-dim)}
.words .deck{margin-top:20px;font:400 var(--fs-lede)/1.42 var(--body);max-width:30ch}
.words .acts{margin-top:26px;display:flex;flex-direction:column;gap:10px;align-items:stretch;max-width:400px}
.trust{margin-top:18px;font:400 14px/1.5 var(--body);color:var(--paper-dim)}
.trust span{display:block}
.trust a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
/* the door: the arrival card as the hero's end card, the number its largest word */
/* the door card is the kit's mist card set on the midnight (W7-R46): ink on mist, walnut for the small caps and the link, forest for the lit landmark */
.door{grid-column:1 / -1;margin-top:40px;padding:36px 40px 40px;background:var(--mist);color:var(--ink);border-radius:2px}
/* the card is the office's facts in two columns: the name, side, district and the way in at the left; the address, the how and the actions at the right */
.door .cinfo{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start;grid-template-areas:"nm addr" "side addr" "district addr" "way how" "way dacts" "way ."}
.door .nm{grid-area:nm}.door .side{grid-area:side}.door .district{grid-area:district}.door .way{grid-area:way}.door .addr{grid-area:addr;margin-top:0}.door .how{grid-area:how;align-self:start}.door .dacts{grid-area:dacts;align-self:start}
.hero .look{display:block}
.hero .look span{display:block;font:400 20px/1.3 var(--body);color:var(--paper)}
.hero .num{display:block;width:fit-content;max-width:100%;font:700 var(--fs-num)/.92 var(--display);font-variant-numeric:lining-nums proportional-nums;color:var(--brass);letter-spacing:-.01em;margin:6px 0 10px;min-width:2.1ch}
.door .nm{font:700 40px/1.05 var(--display)}
.door .side{margin-top:8px;font:700 13px/1 var(--caps);letter-spacing:.05em;color:var(--brass);text-transform:uppercase;letter-spacing:.08em}
.door .district{margin-top:16px;font:400 17px/1.5 var(--body);color:var(--paper-dim);max-width:52ch}
.door .way{margin-top:20px}
.door .way .cap{display:block;margin-bottom:8px}
.door .way li{font:500 17px/1.6 var(--body);color:var(--paper-dim)}
.door .way li.is-lit{color:var(--lime)}
.door .way li small{display:block;font:400 14px/1.4 var(--body);color:var(--paper-dim)}
.door .addr{margin-top:20px;font:400 15px/1.55 var(--body);color:var(--paper)}
.door .addr .roll-l,.door .addr span{display:block}
.door .addr a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.door .how{display:inline-flex;align-items:center;min-height:44px;margin-top:0;font:500 16px/1 var(--body);color:var(--brass);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.door .dacts{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.door .dacts .plate{height:48px;padding:0 20px;font-size:13px}
.door .nm{color:var(--ink)}.door .side{color:var(--oak-deep)}.door .district{color:var(--muted)}.door .way li{color:var(--ink)}.door .way li.is-lit{color:var(--forest)}.door .way li small{color:var(--muted)}
.door .addr,.door .addr a{color:var(--ink)}.door .how{color:var(--oak-deep)}
.door .plate--sign{color:var(--ink);border-color:rgba(1,27,17,.4);--rip:var(--ink)}
.door .plate--sign.is-pressed{background:rgba(1,27,17,.1)}
.door :focus-visible{outline-color:var(--ink)}
@media (hover:hover){
  .door .plate--sign::before{background:linear-gradient(100deg,transparent 0%,rgba(1,27,17,.07) 50%,transparent 100%)}
  .door .plate--sign:hover{background:rgba(1,27,17,.06);border-color:var(--ink)}
}

/* ---------- the walk ---------- */
.band{padding:var(--sec) 0}
.band h2,.treatments h2,.room h2{font:700 var(--fs-h2)/1.02 var(--display);letter-spacing:-.012em;text-wrap:balance}
/* the slate: every band opens on its cap with a hairline running to the right edge, the film's chapter card */
.label-sec{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.label-sec::after{content:"";flex:1;height:1px;background:currentColor;opacity:.3}
.frame{position:relative;overflow:hidden;background:var(--ink)}
.frame img{object-fit:cover;max-width:none}
.place-label{position:absolute;left:12px;top:12px;z-index:2;font:700 13px/1 var(--caps);letter-spacing:.05em;color:var(--paper);paint-order:stroke fill;-webkit-text-stroke:3px var(--ink);text-transform:uppercase;letter-spacing:.08em}
.shut{position:absolute;inset:0;z-index:1;display:none;pointer-events:none}
.shut i{position:absolute;left:0;right:0;height:10%;background:var(--ink);transform:scaleY(0)}
.shut .st{top:0;transform-origin:50% 0}
.shut .sb{bottom:0;transform-origin:50% 100%}
@media (max-width:888px){.request .strip .shut i,.closing .frame .shut i{height:8%}}
@media (max-width:571px){.room-pic .shut i{height:8%}}
@media (max-width:482px){.lobby .frame .shut i{height:8%}}
/* Dr. Kunik holds the door */
/* the band stands on the kit's pale green marble (a background panel, its one texture), the copy on a solid porcelain inset as the kit asks,
   the door photograph on the stone (W7-R46); the marble is a lazy picture so the fold never waits for it, mist until it lands */
.doctor{position:relative;background:var(--mist)}
.doctor .ground{position:absolute;inset:0;z-index:0;overflow:hidden}
.doctor .ground img{display:block;width:100%;height:100%;object-fit:cover}
.doctor .ground::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(253,255,252,.42),rgba(253,255,252,.16) 32%,rgba(253,255,252,.16) 68%,rgba(253,255,252,.42))}
.doctor .wrap{position:relative;z-index:1;display:grid;grid-template-columns:440px 1fr;column-gap:56px;align-items:start}
.doctor .slab{background:var(--paper);padding:44px 40px 48px;border-radius:2px;box-shadow:0 1px 0 rgba(1,27,17,.06),0 24px 48px -32px rgba(1,27,17,.35)}
.doctor .frame{width:440px;height:660px;position:sticky;top:calc(var(--barh) + 24px);box-shadow:0 32px 64px -32px rgba(1,27,17,.5)}
/* the finished frame is the close one Brandon asked for: the door glass, the decal and his face, at 1.5 from the point between them;
   under html.mo the scroll zooms into it from the full door (motion.css ko-zoom) */
/* the still frame is the end of the scroll's zoom (W7-R45): the decal, his face, the suite number and the handle, 2.3 times the door */
.doctor .frame img{width:440px;height:660px;transform:scale(2.3);transform-origin:50% 38%}
.doctor blockquote{margin:28px 0 0;font:400 var(--fs-line)/1.25 var(--display);text-wrap:pretty}
.doctor .attr,.voice .attr{margin-top:14px;font:400 15px/1.4 var(--body);color:var(--muted)}
.doctor .names{margin-top:32px;font:400 17px/1.5 var(--body)}
.doctor .names b{font:700 26px/1.2 var(--display);display:block;margin-bottom:4px}
.rec{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:28px}
.rec h3{font:700 12px/1 var(--caps);letter-spacing:.05em;color:var(--oak-deep);margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em}
.rec li{font:400 15px/1.5 var(--body);padding:6px 0;border-top:1px solid var(--rule-paper)}
.rec li a{color:var(--oak-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.sapph{margin-top:36px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.sapph .lk{display:block;width:150px;height:70px}
.sapph .badge{width:70px;height:70px}
.sapph p{font:400 15px/1.45 var(--body);max-width:36ch}
.sapph small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.doctor .plate{margin-top:32px}
/* the first visit */
.first .lede{margin-top:16px;max-width:44ch}
.first .field{margin-top:28px;background:var(--terrazzo);padding:48px 52px;border-radius:2px}
.rows-lit li{font:500 var(--fs-line)/1.25 var(--body);padding:22px 0;border-top:1px solid var(--rule-terrazzo);color:var(--ink);text-wrap:pretty}
.rows-lit li:first-child{border-top:0;padding-top:0}
.first .field .plate{margin-top:32px}
/* the room */
.room{padding:var(--sec) 0 0}
.room h2{margin-bottom:36px}
.room-hold{position:relative}
.room-pic{position:sticky;top:var(--barh);height:calc(100vw * 21 / 40);max-height:1050px;overflow:hidden;z-index:0;background:var(--ink)}
.room-pic img{width:100vw;height:auto;max-width:none}
.room-over{position:relative;z-index:1;background:var(--paper);padding:72px 0 var(--sec)}
.listens{font:400 var(--fs-line)/1.3 var(--display);max-width:22em}
.listens span{display:inline-block}
.room-over .clause{margin-top:28px;font:400 var(--fs-lede)/1.45 var(--body)}
.room-over .plate{margin-top:32px}
/* his words: the dark beat */
.voice{background:var(--pine);color:var(--paper)}
.voice .said{font:400 var(--fs-voice)/1.08 var(--display);max-width:1100px;text-wrap:balance}
.voice .hm{margin-left:-.4em}
.voice .vcols{margin-top:56px;display:grid;grid-template-columns:1fr 360px;column-gap:120px;align-items:center}
.voice .vtext{max-width:640px}
.voice .more{font:400 26px/1.35 var(--display);color:var(--paper)}
.voice .more+.more{margin-top:20px}
.voice .attr{color:var(--brass)}
.voice .origin{margin-top:32px;font:400 16px/1.55 var(--body);color:var(--paper-dim);max-width:46ch}
.voice .portrait{width:360px;height:540px}
.voice .portrait .frame{width:360px;height:540px}
.voice .portrait img{width:360px;height:540px}
/* the treatments: the filmstrip */
.treatments{padding:var(--sec) 0}
.treatments .lede{margin-top:20px;max-width:48ch}
.strip-band{position:relative;margin-top:36px}
.strip-hold{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gx) 8px;-webkit-overflow-scrolling:touch}
.strip-hold::-webkit-scrollbar{display:none}
.strip{display:flex;gap:24px;width:max-content;align-items:flex-start}
.card-t{width:var(--card-w);flex:none;scroll-snap-align:start;scroll-margin-left:var(--gx)}
.card-t .pic{width:var(--card-w);height:calc(var(--card-w) * 5 / 4);overflow:hidden;background:var(--terrazzo)}
.card-t .pic img{width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--brake)}
@media (hover:hover){.card-t:hover .pic img{transform:scale(1.03)}}
/* children and teens */
.kids .kcols{margin-top:36px;display:grid;grid-template-columns:repeat(3, 1fr);gap:0;background:var(--terrazzo);border-radius:2px}
.kids .kcols>div{padding:36px 32px;border-left:1px solid var(--rule-terrazzo)}
.kids .kcols>div:first-child{border-left:0}
.kids h3{font:700 26px/1.1 var(--display);margin-bottom:14px}
.kids .kcols p{font:400 17px/1.55 var(--body);text-wrap:pretty}
.kids .kcols p+p{margin-top:12px}
.kids .kcols .cap{display:inline;margin-right:6px}
.kids .plate{margin-top:28px}
.card-t h3{margin-top:18px;font:700 clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem)/1.05 var(--display);letter-spacing:-.01em}
.card-t h3 .q{display:block;margin-top:6px;font-size:.78em;color:var(--oak-deep)}
.card-t p{margin-top:10px;font:400 17px/1.5 var(--body);color:var(--ink);text-wrap:pretty}
.card-t .kinds{margin-top:10px;font:500 16px/1.5 var(--body)}
.card-t .kinds span{display:inline;color:var(--muted)}
.card-t .kinds span+span::before{content:" / ";color:var(--muted)}
.card-t .who{margin-top:12px;display:grid;gap:6px}
.card-t .who label{display:flex;align-items:center;gap:10px;font:500 17px/1.3 var(--body);min-height:32px;cursor:pointer}
.card-t .who input{width:18px;height:18px;margin:0;accent-color:var(--ink)}
.card-t .says{margin-top:8px;font:400 14px/1.4 var(--body);color:var(--muted);min-height:20px}
.card-t .plate{margin-top:14px;height:48px;padding:0 20px;font-size:13px}
.treatments .tacts{margin-top:28px}
/* the doctor's intro line and the room's lede */
/* his name in the wordmark's own lettering (Brandon, 2026-11-05): the script raster as a mask in the heading's ink, the text kept for readers and crawlers */
.lk-name{display:inline-block;position:relative;white-space:nowrap}
/* the box is the script raster's own ratio (718 x 312, the tail included); the extra .191em below the old 1em box is the tail's depth,
   given back as a negative bottom margin so the line box and the baseline sit where they did */
.lk-name .lk-word{display:inline-block;position:relative;width:2.74em;height:1.191em;margin-bottom:-.191em;vertical-align:-.12em}
/* two layers of the same raster, both in the heading's ink: the body (rows 0 to 254 of 312, the letters) and the K's tail below the
   caps line (rows 255 to 311), so the tail can draw as its own stroke (W7-R46); at rest the two are the whole mark */
.lk-word .lk-body,.lk-word .lk-tail,.lk-word .lk-body i,.lk-word .lk-tail i{position:absolute;inset:0;display:block}
.lk-word .lk-body i,.lk-word .lk-tail i{background:currentColor;
  -webkit-mask-image:url(img/kunik-script-718.webp);-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0;-webkit-mask-size:100% auto;
  mask-image:url(img/kunik-script-718.webp);mask-repeat:no-repeat;mask-position:0 0;mask-size:100% auto}
.lk-word .lk-body i{clip-path:inset(0 0 18.27% 0)}
.lk-word .lk-tail i{clip-path:inset(81.73% 0 0 0)}
.doctor .intro{margin-top:28px;font:400 var(--fs-lede)/1.45 var(--body);max-width:40ch;text-wrap:pretty}
.room .lede{margin-top:16px;max-width:44ch;margin-bottom:36px}
.room h2{margin-bottom:0}
/* what it costs to start: the one warm band */
.cost{background:var(--brick)}
.cost .big{margin-top:28px;font:400 var(--fs-voice)/1.1 var(--display);max-width:16em;text-wrap:balance}
.cost .costrows{margin-top:28px;max-width:640px}
.cost .costrows li{font:500 var(--fs-lede)/1.3 var(--body);padding:14px 0;border-top:1px solid rgba(1,27,17,.18)}
.cost .cap{color:var(--ink)}
.cost .costrows li:first-child{border-top:0;padding-top:0}
.cost .lede{margin-top:24px;max-width:56ch}
.cost .plate{margin-top:8px}
/* from 1080 px the band is a ledger: the two display lines at the left, the terms at the right */
@media (min-width:1080px){
  .cost .wrap{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;align-items:start;grid-template-areas:"cap cap" "h2 rows" "big lede" "big plate"}
  .cost .label-sec{grid-area:cap}
  .cost h2{grid-area:h2}
  .cost .big{grid-area:big}
  .cost .costrows{grid-area:rows;margin-top:12px;max-width:none}
  .cost .lede{grid-area:lede;margin-top:28px}
  .cost .wrap>p:last-child{grid-area:plate;margin-top:4px}
}
/* under the brass name, and the desk */
.lobby .frame{margin-top:36px;width:var(--wrap);height:calc(var(--wrap) * 2 / 3)}
.lobby .frame img{width:var(--wrap);height:calc(var(--wrap) * 2 / 3)}
.lobby .f14{margin-top:32px;font:400 var(--fs-line)/1.25 var(--display);max-width:22em}
.roster{margin-top:32px;display:grid;grid-template-columns:repeat(3, 1fr);gap:16px 32px;max-width:900px}
.roster li b{display:block;font:700 22px/1.2 var(--display)}
.roster li span{font:400 15px/1.4 var(--body);color:var(--muted)}
.superv{margin-top:20px;font:400 15px/1.5 var(--body);color:var(--muted)}
.lobby .label-sec--sec{margin-top:var(--sec)}
.lobby #questions{margin-top:0}
.qs{margin-top:32px;background:var(--terrazzo);border-radius:2px;padding:8px 32px}
.qs details{border-top:1px solid var(--rule-terrazzo)}
.qs details:first-child{border-top:0}
.qs summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;font:500 22px/1.3 var(--body);color:var(--ink)}
.qs summary::-webkit-details-marker{display:none}
.qs summary .mk{flex:none;width:14px;height:14px;position:relative}
.qs summary .mk::before,.qs summary .mk::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--ink)}
.qs summary .mk::after{transform:rotate(90deg)}
.qs details[open] summary .mk{transform:rotate(45deg)}
.qs .ans{overflow:hidden}
.qs .ans p{padding:0 0 22px;font:400 18px/1.55 var(--body);max-width:60ch}
.qs .ans a{color:var(--oak-deep)}
/* the request: the climax of the walk */
.oak{margin-top:32px;background:var(--oak);padding:44px 48px;border-radius:2px;display:grid;grid-template-columns:1fr 400px;column-gap:48px;align-items:start}
.oak .rlede{font:400 18px/1.5 var(--body);max-width:56ch}
.oak .cap{color:var(--ink);margin:28px 0 8px;display:block}
.note{font:400 clamp(1.5rem, 1.1rem + 1.5vw, 2rem)/1.35 var(--display);background:var(--paper);padding:26px 30px;border-radius:2px;color:var(--ink)}
.note .w{display:inline}
.note .wd{position:relative;display:inline-block}
.note .w .mark{position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--oak-deep);opacity:0}
.exits{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.exits .hint{width:100%;font:400 14px/1.4 var(--body);color:var(--ink)}
.exits .hours{width:100%;font:400 14px/1.4 var(--body);color:var(--ink)}
.quiet{margin-top:16px;display:flex;gap:20px;flex-wrap:wrap}
.quiet a{font:500 15px/1 var(--body);color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.blanks{display:grid;gap:14px}
.blanks label{display:flex;flex-direction:column;gap:6px;font:500 14px/1.3 var(--body);color:var(--ink)}
.blanks select,.blanks input{height:52px;font:500 17px/1 var(--body);padding:0 14px;border:1px solid var(--ink);border-radius:2px;background:var(--terrazzo);color:var(--ink);width:100%}
.blanks .onum{font:400 14px/1.4 var(--body);color:var(--ink);min-height:20px}
.disclaim{margin-top:24px;font:400 14px/1.5 var(--body);color:var(--muted)}
.cform{margin-top:28px}
.cform summary{cursor:pointer;font:500 16px/1 var(--body);color:var(--oak-deep);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:flex;align-items:center;list-style:none}
.cform summary::-webkit-details-marker{display:none}
.cform form{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.cform label{display:flex;flex-direction:column;gap:6px;font:500 14px/1.3 var(--body)}
.cform input,.cform select{height:48px;font:500 16px/1 var(--body);padding:0 12px;border:1px solid var(--ink);border-radius:2px;background:var(--terrazzo);color:var(--ink)}
.cform .full{grid-column:1 / -1}
.cform .consent{grid-column:1 / -1;font:400 13px/1.5 var(--body);color:var(--muted)}
/* on the oak composer the muted and oak-deep inks fall under 4.5:1 (QA 2026-11-05, M3): ink there, 7.9:1 */
.oak .disclaim,.oak .cform summary,.oak .cform .consent{color:var(--ink)}
#open-form,#x-mail,.exits a:not(.plate){min-height:44px;display:inline-flex;align-items:center}
.cform .hp{position:absolute;left:-9999px}
.cform .fstate{grid-column:1 / -1;font:500 15px/1.4 var(--body);min-height:20px}
dialog.calldlg{border:0;border-radius:2px;padding:28px 32px;background:var(--paper);color:var(--ink);max-width:360px;width:calc(100vw - 32px)}
dialog.calldlg::backdrop{background:rgba(24,20,19,.6)}
dialog.calldlg h3{font:700 26px/1.1 var(--display)}
dialog.calldlg ul{margin-top:16px}
dialog.calldlg li a{display:flex;justify-content:space-between;gap:16px;min-height:52px;align-items:center;border-top:1px solid var(--rule-paper);text-decoration:none;font:500 18px/1 var(--body)}
dialog.calldlg li a b{font-weight:500;font-variant-numeric:tabular-nums}
dialog.calldlg .plate{margin-top:20px;width:100%}
/* ---------- the consultation dialog: every Schedule plate opens it; the kit's midnight head, porcelain body, mist fields, forest send ---------- */
dialog.formdlg{border:0;border-radius:2px;padding:0;background:var(--paper);color:var(--ink);width:min(600px, calc(100vw - 32px));max-height:min(92vh, 860px);overflow:auto;box-shadow:0 40px 80px -40px rgba(1,27,17,.6)}
dialog.formdlg::backdrop{background:rgba(1,27,17,.72)}
.fd-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:14px;padding:18px 24px;background:var(--ink);color:var(--paper)}
.fd-head img{width:32px;height:32px;border-radius:50%;background:var(--paper)}
.fd-head h3{font:700 24px/1.1 var(--display);flex:1}
.fd-x{width:44px;height:44px;margin:-8px -12px -8px 0;border:0;background:none;color:var(--brass);font:400 30px/1 var(--display);cursor:pointer;border-radius:2px}
.fd-x:focus-visible{outline-color:var(--paper)}
.fd-body{padding:24px 24px 28px}
.fd-lede{font:400 17px/1.5 var(--body);max-width:44ch}
.fd-lede b{display:block;font:400 var(--fs-lede)/1.2 var(--display);margin-bottom:8px}
.fd-body form{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fd-body label{display:flex;flex-direction:column;gap:6px;font:500 13px/1.3 var(--body)}
.fd-body input,.fd-body select,.fd-body textarea{font:500 16px/1.3 var(--body);padding:0 12px;border:1px solid var(--silver);border-radius:2px;background:var(--mist);color:var(--ink);width:100%}
.fd-body input,.fd-body select{height:48px}
.fd-body textarea{padding:12px;min-height:88px;resize:vertical}
.fd-body input:focus-visible,.fd-body select:focus-visible,.fd-body textarea:focus-visible{outline:2px solid var(--forest);outline-offset:0;border-color:var(--forest)}
.fd-body .full{grid-column:1 / -1}
.fd-body .consent{grid-column:1 / -1;font:400 12px/1.5 var(--body);color:var(--muted)}
.fd-body .hp{position:absolute;left:-9999px}
.fd-body .fstate{grid-column:1 / -1;font:500 15px/1.4 var(--body);min-height:20px}
.fd-body .send{grid-column:1 / -1;margin-top:4px;width:100%}
.fd-body .alt{grid-column:1 / -1;font:400 14px/1.5 var(--body);color:var(--muted)}
.fd-body .alt a{color:var(--ink)}
@media (max-width:1079px){
  dialog.formdlg{width:calc(100vw - 16px);max-height:94vh}
  .fd-body{padding:20px 16px 24px}
  .fd-body form{grid-template-columns:1fr}
}
/* the closing frame: the brass name, then the ink */
.closing{background:var(--paper);padding-top:0}
/* the kit's own line, the sign-off under the brass name (KIT-NOTES.md, 06 Voice) */
.closing .tag{padding:clamp(48px, 7vw, 96px) 16px;text-align:center;font:400 var(--fs-voice)/1.1 var(--display);color:var(--ink);text-wrap:balance;max-width:14em;margin-inline:auto}
.closing .frame{width:100vw;height:calc(100vw / 4);background:var(--ink)}
.closing .frame img{width:100vw;height:calc(100vw / 4)}
/* the footer */
.foot{background:var(--ink);color:var(--paper);padding:72px 0 calc(48px + env(safe-area-inset-bottom))}
.foot .top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot .lock{display:inline-block;background:var(--paper);padding:6px 8px;border-radius:2px}
.foot .lock img{display:block;width:120px;height:auto}
.foot .lock .lk-c{margin-top:-8.36px}
.foot .fname{margin-top:12px;font:700 20px/1.2 var(--display)}
.foot .naps{margin-top:44px;display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.foot .naps h4{font:700 26px/1.1 var(--display);margin-bottom:10px}
.foot .naps p{font:400 15px/1.55 var(--body);color:var(--paper-dim)}
.foot .naps a{color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.foot .naps .dir-link{display:inline-block;margin-top:8px;color:var(--brass)}
.foot .cols{margin-top:44px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-top:36px;border-top:1px solid var(--rule-ink)}
.foot h5{margin:0 0 12px;font:700 12px/1 var(--caps);letter-spacing:.05em;color:var(--brass);text-transform:uppercase;letter-spacing:.08em}
.foot .cols li{font:400 15px/2 var(--body)}
.foot .cols a{text-decoration:none;color:var(--paper)}
.foot .cols .ways8{columns:2}
.foot .small{margin-top:44px;padding-top:28px;border-top:1px solid var(--rule-ink);display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}
.foot .small p{font:400 13px/1.55 var(--body);color:var(--paper-dim)}
.foot .small a{color:var(--paper-dim)}
.foot .credit{margin-top:28px;font:400 14px/1.5 var(--body);color:var(--paper)}
.foot .credit a{color:var(--paper)}

/* ---------- under 1080 px (the phone) ---------- */
@media (max-width:1079px){
  .hero{padding-top:0;padding-bottom:56px}
  .hero .wrap{display:grid;grid-template-columns:1fr;width:auto;grid-template-areas:"gate" "stops" "three" "h1" "words" "look" "door"}
  .hero .look{margin:36px 16px 0}
  .door .cinfo{display:block}
  .door{padding:24px 18px 28px}
  .hero .cover{margin:28px 16px 0;padding-top:84px}
  .hero .cover::before{bottom:36px;background-image:url(img/marble-800.webp)}
  .hero h1{margin:0;max-width:none;padding:14px 20px 2px 0}
  .gate{width:100vw;height:calc(100vw * 21 / 40 + 7px + 30px)}
  .gate .pic,.gate .veil{top:7px;width:100vw;height:calc(100vw * 21 / 40)}
  .gate .pic img,.gate .pic video{width:100%;height:100%}
  .gate .corner{top:17px}
  .gate .control{top:auto;bottom:34px;left:auto;right:8px;height:44px;font-size:14px;padding:0 10px;width:156px;justify-content:center}
  .gate .line{top:auto;bottom:16px;left:16px;right:16px}
  .gate .thumb{top:auto;bottom:8px;left:10px}
  .gate .key{display:none}
  .stops{gap:8px;margin:12px 16px 0}
  .stop{width:auto;flex:1}
  .stop .t,.stop img{width:calc((100vw - 48px) / 3);height:calc((100vw - 48px) / 3 * 3 / 4)}
  .stop span.n{font-size:11.5px;margin-top:8px}
  .three{margin:14px 16px 0}
  .words{padding:14px 16px 0}
  .words .deck{max-width:none}
  .words .acts{max-width:none}
  .door{display:block;margin:40px 16px 0;padding-top:32px}
  .door .cinfo{margin-top:24px}
  .door .nm{font-size:32px}
  .band{padding:64px 0}
  .doctor .wrap{display:block}
  .doctor .frame,.doctor .frame img{width:var(--wrap);height:calc(var(--wrap) * 1.5)}
  .doctor .frame{position:relative} /* not sticky on the phone, but still the shutter's containing block: static let the shutter fall to the band (W7-R46) */
  .doctor .slab{margin-top:20px;padding:24px 18px 28px}
  .doctor h2{margin-top:0}
  .rec{grid-template-columns:1fr}
  .first .lede{margin-top:12px}
  .cost .costrows li{padding:12px 0}
  .first .field{padding:28px 20px}
  .rows-lit li{padding:14px 0;font-size:21px}
  .cost .rows-lit li{font-size:17px}
  .room{padding-top:64px}
  .room h2{margin-bottom:24px}
  .room-over{padding:40px 0 64px}
  .voice .vcols{display:block;margin-top:32px}
  .voice .more{font-size:21px}
  .voice .portrait{margin-top:28px;width:calc(100vw - 32px);height:calc((100vw - 32px) * 1.5)}
  .voice .portrait .frame,.voice .portrait img{width:calc(100vw - 32px);height:calc((100vw - 32px) * 1.5)}
  .treatments{padding:64px 0}
  .strip-band{margin-top:28px}
  .strip-hold{padding:0 16px 8px}
  .card-t{scroll-margin-left:16px}
  .lobby .frame,.lobby .frame img{width:var(--wrap);height:calc(var(--wrap) * 2 / 3)}
  .kids .kcols{grid-template-columns:1fr}
  .kids .kcols>div{padding:24px 20px;border-left:0;border-top:1px solid var(--rule-terrazzo)}
  .kids .kcols>div:first-child{border-top:0}
  .roster{grid-template-columns:1fr 1fr;gap:14px 20px}
  .roster li b{font-size:20px}
  .qs{padding:4px 16px}
  .qs summary{font-size:18px;min-height:60px}
  .qs .ans p{font-size:16.5px}
  .request .strip,.request .strip img{width:var(--wrap);height:calc(var(--wrap) * 350 / 1000)}
  .oak{display:block;padding:24px 18px}
  .blanks{margin-top:24px}
  .note{padding:18px 20px;font-size:21px;line-height:1.4}
  .cform form{grid-template-columns:1fr}
  .closing .frame,.closing .frame img{height:calc(100vw * 21 / 40);object-position:center}
  .foot{padding-top:56px}
  .foot .naps{grid-template-columns:1fr;gap:28px;margin-top:36px}
  .foot .cols{grid-template-columns:1fr;gap:24px}
  .foot .small{grid-template-columns:1fr}
}
@media print{.head,.head-space,.splash,.flyer,.panel,.drawer,.shut,.gate .control{display:none !important}.hero,.voice,.foot{background:#fff;color:#000}}
@media (forced-colors:active){.gate .veil,.bar .tick,.note .w .mark,.shut{display:none}}

/* ---------- Ask Kunik (W7-R55, Route C of the chatbot options): a <dialog> like the call dialog; every answer is a sentence of this site's
   own, held as text in the page and shown by page.js; nothing leaves the browser. The entries: a signed plate in the request band, the
   Ask control in the phone bar (from 390 px, where a sixth 44 px control fits beside the text line), the plate in the phone's menu sheet. ---------- */
.oak .askrow{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.oak .askhint{font:400 14px/1.4 var(--body);color:var(--ink);max-width:34ch}
.drawer .dplate{display:flex;flex-wrap:wrap;gap:10px}
dialog.askdlg{border:0;border-radius:2px;padding:0;background:var(--paper);color:var(--ink);width:min(640px, calc(100vw - 32px));max-height:min(92vh, 860px);box-shadow:0 40px 80px -40px rgba(1,27,17,.6);overflow:hidden}
dialog.askdlg[open]{display:flex;flex-direction:column}
dialog.askdlg::backdrop{background:rgba(1,27,17,.72)}
dialog.askdlg:focus,dialog.askdlg:focus-visible{outline:none}   /* the dialog holds the focus after a tap; it is a frame, not a control */
.ak-head{flex:none;display:flex;align-items:center;gap:14px;padding:16px 24px;background:var(--ink);color:var(--paper)}
.ak-head img{width:32px;height:32px;border-radius:50%;background:var(--paper);flex:none}
.ak-head>div{flex:1;min-width:0}
.ak-head h3{font:700 24px/1.1 var(--display)}
.ak-sub{margin-top:4px;font:400 13px/1.4 var(--body);color:var(--paper-dim)}
.ak-head .fd-x:focus-visible{outline-color:var(--paper)}
.ak-body{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:20px 24px 8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ak-thread{display:flex;flex-direction:column;gap:10px}
.ak-msg{max-width:90%;padding:12px 16px;border-radius:2px;font:400 16px/1.5 var(--body)}
.ak-them{align-self:flex-start;background:var(--mist);color:var(--ink)}
.ak-me{align-self:flex-end;background:var(--forest);color:var(--paper)}
.ak-msg p+p{margin-top:8px}
.ak-msg small{display:block;margin-top:6px;font:400 13px/1.4 var(--body);color:var(--muted)}
.ak-msg .ak-kinds{margin-top:8px;font:500 15px/1.4 var(--body);color:var(--muted)}
.ak-msg a:not(.plate){color:var(--oak-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ak-msg .ak-x{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ak-msg .ak-x .plate{height:auto;min-height:40px;padding:8px 14px;font-size:12px;white-space:normal;text-align:center}
.ak-msg .ak-alt{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.ak-msg .ak-more{margin-top:8px}
.ak-link{background:none;border:0;padding:0;min-height:32px;font:500 14px/1 var(--body);color:var(--oak-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.ak-topics{margin-top:20px}
.ak-topics .label-sec{margin-bottom:12px}
.ak-group{margin-top:14px}
.ak-group .cap{display:block;margin-bottom:8px}
.ak-row{display:flex;flex-wrap:wrap;gap:8px}
.ak-q{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid rgba(1,27,17,.4);border-radius:3px;background:transparent;color:var(--ink);font:600 13px/1.25 var(--caps);letter-spacing:.02em;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ak-q .reg{font-size:.7em;vertical-align:.4em}
.ak-q.is-pressed{background:rgba(1,27,17,.1)}
@media (hover:hover){.ak-q:hover{background:rgba(1,27,17,.06);border-color:var(--ink)}}
.ak-foot{flex:none;padding:12px 24px 20px;background:var(--paper);border-top:1px solid var(--rule-paper)}
.ak-ask{display:flex;gap:8px}
.ak-ask input{flex:1;min-width:0;height:48px;font:500 16px/1 var(--body);padding:0 14px;border:1px solid var(--silver);border-radius:2px;background:var(--mist);color:var(--ink)}
.ak-ask input::placeholder{color:var(--muted);opacity:1}
.ak-ask input:focus-visible{outline:2px solid var(--forest);outline-offset:0;border-color:var(--forest)}
.ak-ask .plate{height:48px;padding:0 20px}
.ak-fine{margin-top:10px;font:400 13px/1.5 var(--body);color:var(--muted)}
@media (max-width:1079px){
  dialog.askdlg{width:calc(100vw - 16px);max-height:94vh}
  @supports (height:1dvh){dialog.askdlg{max-height:94dvh}}
  .ak-head{padding:14px 16px}
  .ak-body{padding:16px 16px 8px}
  .ak-foot{padding:10px 16px calc(14px + env(safe-area-inset-bottom))}
  .ak-msg{max-width:94%;font-size:15.5px}
  .pbar .p-ask{left:64px;width:44px;display:none;overflow:hidden}
}
@media (min-width:390px) and (max-width:1079px){.pbar .p-ask{display:flex}.pbar .p-text{right:235px}}