:root{--bg:#fff;--fg:#1d1d1f;--mu:#6e6e73;--gray:#f5f5f7;--blue:#0071e3;--dark:#000}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.nav{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.08)}
.bar{max-width:1080px;margin:auto;height:52px;padding:0 22px;display:flex;align-items:center;gap:24px}
.logo img{height:16px;width:auto}nav{display:flex;gap:26px;margin:0 auto;font-size:13px}nav a{opacity:.8}nav a:hover,nav a.on{opacity:1}
.btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:980px;padding:9px 20px;font-family:inherit;font-weight:500;font-size:13px;cursor:pointer;transition:.2s}.btn:hover{background:#0077ed}.btn.sm{padding:5px 13px;font-size:12px}
.link{color:var(--blue)}.link:hover{text-decoration:underline}
#burger{display:none;background:none;border:0;width:28px;height:28px}#burger span{display:block;height:1px;background:#000;margin:7px 4px}
.hero{text-align:center;padding:84px 22px 0;overflow:hidden}.hero.small{padding:80px 22px 24px}
.eyebrow{font-size:21px;font-weight:600;margin-bottom:6px}
h1{font-size:clamp(44px,8vw,88px);line-height:1.05;letter-spacing:-.03em;font-weight:700}.small h1{font-size:clamp(36px,6vw,64px)}
h2{font-size:clamp(32px,5vw,56px);line-height:1.1;letter-spacing:-.025em;font-weight:700;margin-bottom:20px}
h3{font-size:21px;letter-spacing:-.01em}
.sub{font-size:clamp(19px,2.6vw,28px);margin:18px auto;max-width:640px;color:var(--mu)}
.cta{display:flex;gap:28px;justify-content:center;align-items:center;margin:26px 0 56px}
.heroimg{width:min(960px,100%);height:min(560px,60vw);object-fit:cover;object-position:center 35%;margin:0 auto;border-radius:28px 28px 0 0}
section{padding:96px 0}section.dark{background:var(--dark);color:#f5f5f7}section.gray{background:var(--gray)}
.wrap{max-width:1080px;margin:auto;padding:0 22px}.narrow{max-width:720px}.center{text-align:center}.lead{font-size:21px;color:inherit;opacity:.85;margin-bottom:22px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}.round{border-radius:28px;width:100%;aspect-ratio:4/5;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:48px 0 32px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card,.tile{background:var(--gray);border-radius:24px;overflow:hidden;transition:transform .3s}.card:hover{transform:scale(1.015)}
section.gray .tile{background:#fff}.tile{padding:32px}.tile p{margin-top:8px;color:var(--mu)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}.cb{padding:24px 28px 30px}.cb h3 span{font-weight:400;color:var(--mu)}
.meta{color:var(--mu);margin:4px 0 12px}.cb p{font-size:15px}.cb .link{display:inline-block;margin-top:14px}
.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.tabs button{border:0;background:var(--gray);padding:8px 20px;border-radius:980px;font:15px inherit;cursor:pointer}.tabs .on{background:var(--fg);color:#fff}
.card.hide{display:none}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;text-align:center}.stats b{display:block;font-size:56px;letter-spacing:-.03em}.stats span{color:var(--mu)}
.masonry{columns:3 260px;column-gap:16px;margin-bottom:40px}.masonry img{width:100%;margin-bottom:16px;border-radius:20px}
details{border-bottom:1px solid #d2d2d7;padding:22px 0}summary{font-size:21px;font-weight:600;cursor:pointer;list-style:none}summary::after{content:"+";float:right;color:var(--mu)}details[open] summary::after{content:"–"}details p{margin-top:10px;color:var(--mu)}
.form{display:grid;gap:12px;margin-top:28px}.form input,.form textarea{font:17px inherit;padding:14px 16px;border:1px solid #d2d2d7;border-radius:14px;background:#fff}.form .btn{justify-self:center}
.prose h3{margin:32px 0 6px}.prose p{color:var(--mu)}
footer{background:var(--gray);padding:32px 0 40px;font-size:12px;color:var(--mu)}.fl{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}.fl a:hover{text-decoration:underline}footer p{margin:4px 0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s}.reveal.in{opacity:1;transform:none}
@media(max-width:768px){.split{grid-template-columns:1fr;gap:32px}section{padding:64px 0}#burger{display:block;margin-left:auto}
nav{position:absolute;top:52px;left:0;right:0;background:rgba(255,255,255,.96);flex-direction:column;gap:0;padding:8px 22px 18px;display:none;font-size:19px}nav.open{display:flex}nav a{padding:12px 0;border-bottom:1px solid #eee}.bar{gap:12px}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ---- monochrome overrides ---- */
:root{--blue:#1d1d1f}
.btn{background:#1d1d1f;color:#fff}.btn:hover{background:#000}
.btn.inv,.dark .btn,.hero.full .btn{background:#fff;color:#1d1d1f}.btn.inv:hover,.dark .btn:hover{background:#e8e8ed}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff}.btn.ghost:hover{background:rgba(255,255,255,.15)}
.link{color:inherit;text-decoration:underline;text-underline-offset:4px}
.nav .btn.sm{background:#1d1d1f;color:#fff}
.hero.full{position:relative;min-height:calc(100vh - 52px);padding:0;display:flex;align-items:center;text-align:left;color:#fff;background-size:cover;background-position:right center;background-color:#000}
.hero.full::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,0) 80%)}
.hc{position:relative;max-width:1080px;margin:auto;width:100%;padding:0 22px}.hero.full .sub{color:rgba(255,255,255,.8);margin-left:0;max-width:520px}
.hero.full .cta{justify-content:flex-start;margin-bottom:0}.hero.full .eyebrow{opacity:.85}
.dark .split{gap:0}.dark{padding:0;overflow:hidden}.dark .split>div{padding:96px 48px 96px 0}
.fade{width:100%;height:100%;min-height:560px;aspect-ratio:auto;object-fit:cover;border-radius:0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 35%);mask-image:linear-gradient(90deg,transparent 0,#000 35%)}
.dark .split{align-items:stretch}.dark .wrap.split{max-width:none;padding:0 0 0 max(22px,calc((100vw - 1080px)/2 + 22px))}
.grid{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:12px}
.card{position:relative;min-height:560px;display:flex;align-items:flex-end;color:#fff;background-size:cover;background-position:center;background-color:#111;border-radius:20px}
.card::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)}
.card .cb{position:relative;padding:32px}.card .meta,.card h3 span{color:rgba(255,255,255,.75)}.card .cb p{font-size:15px}.card .btn{margin-top:18px;padding:8px 18px;font-size:13px}
.card:hover{transform:none}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:4px}.gal img{width:100%;height:420px;object-fit:cover;border-radius:0}
.tabs .on{background:#1d1d1f}
@media(max-width:768px){.grid{grid-template-columns:1fr}.card{min-height:460px}.dark .wrap.split{padding:0}.dark .split>div{padding:64px 22px 32px}
.fade{min-height:380px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%);mask-image:linear-gradient(180deg,transparent 0,#000 35%)}
.hero.full::before{background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.2))}.hero.full{align-items:flex-end;padding-bottom:48px;background-position:70% center}}
.grid.three{grid-template-columns:repeat(3,1fr)}.grid.three .card{min-height:520px}.grid.three .cb{padding:24px}.grid.three .cb p{font-size:14px}
@media(max-width:980px){.grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid.three{grid-template-columns:1fr}}
/* description on hover (desktop); always visible on touch */
@media(hover:hover){
.card .cb p:not(.meta){max-height:0;opacity:0;overflow:hidden;margin:0;transition:max-height .45s ease,opacity .35s ease}
.card .cb .btn{transition:margin .45s ease,background .2s}
.card:hover .cb p:not(.meta),.card:focus-within .cb p:not(.meta){max-height:200px;opacity:1}
.card::before{transition:background .4s}
.card:hover::before{background:linear-gradient(0deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 60%,rgba(0,0,0,.2) 100%)}}
/* wide square service tiles */
.grid{--w:min(1760px,calc(100vw - 24px));width:var(--w);margin-left:calc(50% - var(--w)/2);margin-right:0}
.card,.grid.three .card{min-height:0;aspect-ratio:1/1}
.grid.three{gap:12px}
@media(max-width:620px){.grid{--w:calc(100vw - 24px)}}
/* ===== v3: sections from structure draft ===== */
.dd{position:relative;display:flex}.dd .menu{display:none;position:absolute;top:100%;left:-16px;min-width:210px;padding:8px 0;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.dd:hover .menu{display:block}.dd .menu a{display:block;padding:8px 18px;font-size:14px;opacity:1}.dd .menu a:hover{background:var(--gray)}
.hero.full.subhero{min-height:72vh}.hero.full.subhero h1{font-size:clamp(36px,6vw,72px)}.hero.full h1{font-size:clamp(38px,6.4vw,76px)}
.hero.full::before{background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.1) 100%)}
.crumbs{font-size:13px;color:var(--mu);margin-bottom:14px}.hero .crumbs{color:rgba(255,255,255,.7)}.crumbs a:hover{text-decoration:underline}
.hmeta{margin-top:22px;font-size:14px;color:rgba(255,255,255,.75)}.cta.c{justify-content:center}
h1.pg{font-size:clamp(34px,5.5vw,64px);margin-bottom:18px}h2.fh{margin:48px 0 8px;font-size:30px}
.muted{color:var(--mu)}
.todo{background:#fff3b0;color:#5a4a10;padding:0 5px;border-radius:4px;font-size:.9em}
.dark .todo{background:#fff3b0}
section.tight{padding:0}.bleed{height:70vh;min-height:420px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding:0 0 48px;color:#fff;position:relative}
.bleed::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),rgba(0,0,0,0) 55%)}.bleed p{position:relative;font-size:clamp(28px,4vw,48px);font-weight:700;letter-spacing:-.02em;padding:0 max(22px,calc((100vw - 1080px)/2 + 22px))}
.band{padding:96px 0}.band h2{margin-bottom:28px}
.stats{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.stats b{font-size:40px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.tiles a.tile{display:block}.link-tile:hover{background:#e8e8ed}
.sp .pic{width:100%;height:100%;min-height:480px;object-fit:cover;border-radius:24px}.split.rev>:first-child{order:2}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:16px}th,td{text-align:left;padding:16px 12px;border-bottom:1px solid #d2d2d7;vertical-align:top}th{font-size:13px;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}small{color:var(--mu);font-size:14px;line-height:1.4;display:block;margin-top:4px}
.steps{counter-reset:s;list-style:none;padding:0;margin-top:24px}.steps li{counter-increment:s;padding:16px 0 16px 56px;position:relative;border-bottom:1px solid #d2d2d7;font-size:19px}
.steps li::before{content:counter(s);position:absolute;left:0;top:14px;width:34px;height:34px;border-radius:50%;background:#1d1d1f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px}
.ticks{list-style:none;padding:0;margin:12px 0}.ticks li{padding:8px 0 8px 26px;position:relative}.ticks li::before{content:"✓";position:absolute;left:0}
.quote{background:#fff;border-radius:24px;padding:32px;font-size:21px}.gray .quote{background:#fff}.quote small{margin-top:12px}
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:4px}.gal figure{position:relative;margin:0}.gal img{width:100%;height:440px;object-fit:cover;display:block}
.gal figcaption{position:absolute;left:16px;bottom:14px;color:#fff;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.logos{display:flex;gap:16px;align-items:flex-end;margin:12px 0 20px;background:#fff;border-radius:20px;padding:16px}.logos img{height:90px;width:auto}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-bottom:28px}footer h4{color:var(--fg);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}footer a{display:block;padding:2px 0}
.map{width:100%;height:420px;border:0;border-radius:24px}.btn.ghost.dk{color:#1d1d1f;box-shadow:inset 0 0 0 1px #1d1d1f}.btn.ghost.dk:hover{background:#f5f5f7}
.cta{display:flex;flex-wrap:wrap}
.jc .eyebrow{font-size:13px;opacity:.8}.jc h3{font-size:24px;margin-bottom:6px}
.grid.three .card.jc{aspect-ratio:1/1}
@media(max-width:768px){.dd .menu{display:block;position:static;box-shadow:none;background:none;padding:0 0 0 14px}.dd{flex-direction:column}.dd>a{border-bottom:0}.sp .pic{min-height:320px}.split.rev>:first-child{order:0}.hero.full.subhero{min-height:62vh}}
.stars{color:#1d1d1f;letter-spacing:2px;margin-bottom:10px}
/* split sections: photo bleeds to the right edge */
.sp{padding:0;overflow:hidden}
.sp .wrap.split{max-width:none;gap:0;align-items:stretch;padding:0 0 0 max(22px,calc((100vw - 1080px)/2 + 22px))}
.sp .split>div:first-child{padding:96px 56px 96px 0;align-self:center}
.sp .pic{border-radius:0;min-height:560px;height:100%;width:100%}
@media(max-width:768px){.sp .wrap.split{padding:0}.sp .split>div:first-child{padding:64px 22px 40px}.sp .pic{min-height:360px}}
/* mobile fixes */
.logos{flex-wrap:wrap}.logos img{height:80px;max-width:100%;object-fit:contain}
@media(max-width:768px){#burger span{width:20px;margin:6px 4px}.btn.sm{margin-left:auto}#burger{margin-left:0}.cta .btn{width:100%;text-align:center}.hero.full .cta{flex-direction:column;align-items:stretch}.band .cta.c{flex-direction:column}}
.hero.full .btn.ghost,.dark .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff}
.hero.full .btn.ghost:hover,.dark .btn.ghost:hover{background:rgba(255,255,255,.15)}
@media(max-width:768px){nav{background:#fff;max-height:calc(100vh - 52px);overflow-y:auto}.dd .menu{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;padding:0 0 4px 14px}.dd .menu a{font-size:16px;padding:10px 0;border-bottom:0;opacity:.7}nav>a,.dd>a{font-size:19px;padding:12px 0;border-bottom:1px solid #eee;display:block}}
@media(max-width:768px){th,td{padding:14px 8px}.svc th:last-child,.svc td:last-child{display:none}.svc td:first-child{width:58%}.hero.small,section{scroll-margin-top:60px}}
/* ask dialog */
dialog#ask{border:0;border-radius:28px;padding:0;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);box-shadow:0 30px 80px rgba(0,0,0,.35);color:var(--fg)}
dialog#ask::backdrop{background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
#askf{display:grid;gap:12px;padding:32px;position:relative}#askf h2{font-size:30px;margin:0}
#askf input:not([type=file]),#askf select,#askf textarea{font:16px inherit;padding:14px 16px;border:1px solid #d2d2d7;border-radius:14px;background:#fff;width:100%}
#askf .x{position:absolute;right:16px;top:12px;border:0;background:#f5f5f7;width:34px;height:34px;border-radius:50%;font-size:22px;cursor:pointer;line-height:1}
.file{display:block;border:1px dashed #86868b;border-radius:14px;padding:16px;text-align:center;cursor:pointer;color:var(--mu)}.file:hover{background:#f5f5f7}.file{position:relative}.file input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}.file:focus-within{outline:2px solid #0071e3;outline-offset:2px}
.prev{display:flex;gap:8px;flex-wrap:wrap}.prev img{width:72px;height:72px;object-fit:cover;border-radius:12px}
#askf .btn{justify-self:center;min-width:160px}#askf .btn[disabled]{opacity:.5}
.askrow{margin-top:14px}.btn.sm2{padding:8px 18px;font-size:13px}
dialog#ask{margin:auto}
#askf input,#askf select,#askf textarea,.form input,.form textarea,.tabs button{font-family:inherit;font-size:16px}
/* bento (Visit) */
.bentosec{padding:12px 0 96px}.bentosec .wrap{max-width:1180px}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(190px,auto);gap:12px}
.bt{background:#1c1c1e;border-radius:24px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden}
.bt .k{font-size:13px;color:#a1a1a6;text-transform:uppercase;letter-spacing:.06em;margin-bottom:auto}
.bt .v{font-size:clamp(30px,3.6vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.05}.bt .v.sm{font-size:clamp(22px,2.4vw,28px)}
.bt .s{font-size:15px;color:#c7c7cc;line-height:1.35}
.bt.map{grid-column:span 2;grid-row:span 2;padding:0}.bt.map iframe{width:100%;height:100%;min-height:380px;border:0;filter:grayscale(1) contrast(1.05)}
.bt.wide{grid-column:span 2}.bt.addr{background:#fff;color:#1d1d1f}.bt.addr .k,.bt.addr .s{color:#6e6e73}
.bt .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.bt.addr .btn.inv{background:#1d1d1f;color:#fff}.bt.addr .btn.ghost{color:#1d1d1f;box-shadow:inset 0 0 0 1px #1d1d1f}.bt.addr .btn.ghost:hover{background:#f5f5f7}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.bt.map{grid-column:span 2;grid-row:span 1}.bt.map iframe{min-height:260px}.bt.wide{grid-column:span 2}.bento{grid-auto-rows:minmax(170px,auto)}}
@media(max-width:480px){.bt{padding:20px}.bt .v{font-size:28px}}
.bt.addr{grid-column:1/-1;min-height:170px;display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:24px}.bt.addr .k{grid-column:1/-1}.bt.addr .acts{grid-column:2;grid-row:2/4;margin:0;align-self:end}
@media(max-width:900px){.bt.addr{display:flex}.bt.addr .acts{margin-top:12px}}
/* Visit: compact layout */
.vtop{align-items:center}.vtop+*{}section:has(.vtop){padding:64px 0 56px}section:has(.vpark){padding:56px 0}section:has(.vinfo){padding:48px 0}
.prs{display:grid}.pr{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid #d2d2d7}.pr:first-child{border-top:1px solid #d2d2d7}.pr b{font-weight:600}.pr span{color:var(--mu)}
.vinfo h3{margin-bottom:6px}.vinfo .ticks{margin-top:0}.vinfo .ticks li{padding:4px 0 4px 26px}
@media(max-width:768px){.pr{grid-template-columns:1fr;gap:4px}section:has(.vtop),section:has(.vpark),section:has(.vinfo){padding:40px 0}}
/* availability from Square */
.hnx,.cardnx{display:none}.hnx a{text-decoration:underline;text-underline-offset:3px}.hnx a:hover{opacity:.8}
.nx-on .hold{display:none}.nx-on .hnx{display:inline}.nx-on .cardnx{display:flex}.cardnx:empty{display:none!important}
.cardnx{flex-wrap:wrap;gap:5px;margin:10px 0 2px;align-items:center}.cardnx span{font-size:12px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em;margin-right:2px}
.cardnx a{background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border-radius:980px;padding:4px 10px;font-size:12px;white-space:nowrap;color:#fff}.cardnx a:hover{background:#fff;color:#1d1d1f}
/* embedded booking */
.bk{padding:8px 0 80px}.bk .wrap{max-width:980px}
.bkt{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.bkt button{border:0;background:var(--gray);padding:9px 16px;border-radius:980px;font-family:inherit;font-size:14px;cursor:pointer;color:var(--fg)}.bkt button.on{background:#1d1d1f;color:#fff}
.bkf{background:#fff;border:1px solid #d2d2d7;border-radius:24px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.06)}
.bkf iframe{display:block;width:100%;height:min(960px,calc(100vh - 140px));min-height:640px;border:0}.bkn{font-size:13px;margin-top:14px;text-align:center}
@media(max-width:768px){.bkf{border-radius:18px}.bkf iframe{height:calc(100svh - 120px)}}
/* hero: fade into the next black section */
.hero.full:not(.subhero)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,rgba(0,0,0,0),#000 92%)}
.hero.full:not(.subhero) .hc{z-index:2}
@media(max-width:768px){.hero.full:not(.subhero){padding-bottom:48px}}
/* light home hero (white-background portrait): inverted text and buttons */
.hero.full.light{color:#1d1d1f;background-color:#fff;background-position:right center}
.hero.full.light::before{background:linear-gradient(90deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,0) 72%)}
.hero.full.light::after{display:none}
.hero.full.light .eyebrow{color:#1d1d1f;opacity:.85}
.hero.full.light .sub{color:rgba(29,29,31,.72)}
.hero.full.light .btn{background:#1d1d1f;color:#fff}.hero.full.light .btn:hover{background:#000}
.hero.full.light .btn.ghost{background:transparent;color:#1d1d1f;box-shadow:inset 0 0 0 1px #1d1d1f}.hero.full.light .btn.ghost:hover{background:rgba(0,0,0,.06)}
.hero.full.light .hmeta{color:rgba(29,29,31,.7)}
@media(max-width:768px){.hero.full.light::before{background:linear-gradient(0deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 45%,rgba(255,255,255,0) 80%)}.hero.full.light{background-position:78% top;background-size:auto 70%;background-repeat:no-repeat}}
.hero.full.light{background-size:auto 100%;background-repeat:no-repeat;background-position:right center}
.hero.full.light h1{max-width:11.5em}.hero.full.light .sub{max-width:520px}
@media(max-width:1100px){.hero.full.light{background-size:auto 78%;background-position:right bottom}}
@media(max-width:768px){.hero.full.light{background-position:78% top;background-size:auto 70%}}
.hero.full.light h1{font-size:clamp(36px,4.6vw,64px);max-width:10.5em}
@media(max-width:768px){.hero.full.light{background-size:100% auto;background-position:center top;background-repeat:no-repeat;padding-top:286px;align-items:flex-start}
.hero.full.light::before{background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,0) 190px,#fff 292px)}.hero.full.light .eyebrow{margin-top:4px}}
/* home hero: portrait fades out at its own left edge (mask), so it works at any screen width */
.hero.full.light .hbg{position:absolute;top:0;bottom:0;right:-240px;aspect-ratio:2000/1333;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%)}
.hero.full.light{background:#fff}.hero.full.light::before,.hero.full.light::after{display:none}
@media(max-width:1100px){.hero.full.light .hbg{right:-160px}}
@media(max-width:768px){.hero.full.light .hbg{left:0;right:0;bottom:auto;height:auto;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}}
/* narrow screens and tablets: portrait on top, text below */
@media(max-width:768px){.hero.full.light{padding-top:min(64vw,440px);align-items:flex-start;min-height:0;padding-bottom:48px}
.hero.full.light .hbg{left:0;right:0;top:0;bottom:auto;height:min(64vw,440px);aspect-ratio:auto;background-size:cover;background-position:center 20%;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 62%,transparent 100%)}
.hero.full.light h1{max-width:none}.hero.full.light .sub{max-width:none}}
@media(min-width:769px){.hero.full.light{padding-top:56px;padding-bottom:56px}}
@media(min-width:769px) and (max-width:1100px){.hero.full.light{min-height:min(calc(100vh - 52px),108vw)}.hero.full.light .hbg{right:-30vw}}
/* compact split sections and CTA bands: height follows the text */
.sp .wrap.split{position:relative}
.sp .pic{position:absolute;top:0;right:0;bottom:0;width:50%;height:100%;min-height:0;object-fit:cover}
.sp .split>div:first-child{padding:72px 56px 72px 0}
.band{padding:60px 0}.band h2{margin-bottom:20px}
@media(max-width:768px){.sp .pic{position:static;width:100%;height:320px}.sp .split>div:first-child{padding:48px 22px 28px}.band{padding:48px 0}}
.sp .split>div:first-child{max-width:calc(50vw - max(22px,calc((100vw - 1080px)/2 + 22px)))}
.band .cta{margin:0}
@media(max-width:768px){.sp .split>div:first-child{max-width:none}}
/* dark split block: photo fades into black on its left edge */
section.dark.sp{padding:0}
.dark.sp .pic{-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 12%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 12%,#000 38%)}
.dark.sp .link{color:#fff}
@media(max-width:768px){.dark.sp .pic{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}}
/* horizontal photo carousel (swipe on phones, arrows on desktop) */
.carw{position:relative;margin-top:28px}
.car{--pad:max(22px,calc((100vw - 1080px)/2 + 22px));display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--pad);padding:0 var(--pad) 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.car::-webkit-scrollbar{display:none}
.car figure{flex:0 0 clamp(210px,23vw,330px);aspect-ratio:4/5;margin:0;scroll-snap-align:start;position:relative;border-radius:20px;overflow:hidden;background:#f5f5f7}
.car img{width:100%;height:100%;object-fit:cover;display:block}
.car figcaption{position:absolute;left:14px;bottom:12px;color:#fff;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cprev,.cnext{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 14px rgba(0,0,0,.2);cursor:pointer;font-size:26px;line-height:1;color:#1d1d1f;padding:0 0 3px}
.cprev{left:16px}.cnext{right:16px}.cprev:hover,.cnext:hover{background:#fff}
.cprev[disabled],.cnext[disabled]{opacity:0;pointer-events:none}
@media(max-width:768px){.cprev,.cnext{display:none}.car{gap:10px}.car figure{flex-basis:58vw;border-radius:18px}}
@media(max-width:600px){.gal{grid-template-columns:1fr 1fr}.gal img{height:220px}}
/* compact home hero on phones */
@media(max-width:768px){
.hero.full.light{padding-top:calc(66vw - 8px);padding-bottom:30px}
.hero.full.light .hbg{height:66.7vw;background-size:cover;background-position:center top}
.hero.full.light .eyebrow{font-size:13px;margin:0 0 4px;opacity:.7}
.hero.full.light h1{font-size:clamp(25px,7.2vw,31px);line-height:1.1;letter-spacing:-.02em;margin-bottom:8px}
.hero.full.light .sub{font-size:15px;line-height:1.4;margin:0 0 14px}
.hero.full.light .cta{flex-direction:row;gap:8px;margin:0}
.hero.full.light .cta .btn{width:auto;flex:1 1 0;padding:9px 8px;font-size:13px;white-space:nowrap}
.hero.full.light .hmeta{font-size:12.5px;line-height:1.45;margin-top:12px}
}
/* phone hero: text left, portrait right, small "next available" slots */
@media(max-width:768px){
.hero.full.light{padding:28px 0;min-height:92vw;align-items:center}
.hero.full.light .hbg{left:auto;right:-47vw;top:0;bottom:0;width:auto;height:100%;aspect-ratio:3/2;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%);mask-image:linear-gradient(90deg,transparent 0,#000 12%);background-size:cover;background-position:center}
.hero.full.light .hc>*{max-width:46vw}
.hero.full.light .eyebrow{font-size:11.5px;margin:0 0 4px}
.hero.full.light h1{font-size:22px;line-height:1.12;margin:0 0 8px}
.hero.full.light .sub{font-size:12.5px;line-height:1.38;margin:0}
.hero.full.light .cta,.hero.full.light .hold{display:none}
.hero.full.light .hmeta{display:block;margin-top:12px}
.nx-on .hero.full.light .hnx{display:block;font-size:0}
.nx-on .hero.full.light .hnx::before{content:"Next available";display:block;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:rgba(29,29,31,.5);margin-bottom:3px}
.nx-on .hero.full.light .hnx .sep{display:none}
.nx-on .hero.full.light .hnx a{display:block;font-size:11.5px;line-height:1.35;color:rgba(29,29,31,.85);padding:3px 0;text-decoration:none}
.nx-on .hero.full.light .hnx .sd{display:none}.nx-on .hero.full.light .hnx .sn{display:block;font-weight:600}.nx-on .hero.full.light .hnx .st{display:block;color:rgba(29,29,31,.65)}
}
/* reviews carousel */
.car.qs{align-items:stretch}.car.qs .quote{flex:0 0 clamp(280px,30vw,380px);scroll-snap-align:start;font-size:17px;line-height:1.45;padding:28px;border-radius:24px;margin:0}
.car.qs .stars{margin-bottom:8px}
.gray .carw .cprev,.gray .carw .cnext{background:#fff}
/* phone: Vision and Why blocks as text left + photo right */
@media(max-width:768px){
.car.qs .quote{flex-basis:80vw;font-size:15px;padding:22px;border-radius:20px}
.dark.vis .wrap.split,.dark.sp .wrap.split{display:grid;grid-template-columns:57% 43%;align-items:stretch;padding:0}
.dark.vis .split>div:first-child,.dark.sp .split>div:first-child{padding:36px 10px 36px 22px;max-width:none;align-self:center}
.dark.vis .split>div:first-child h2,.dark.sp .split>div:first-child h2{font-size:22px;line-height:1.12;margin:0 0 10px}
.dark.vis .eyebrow,.dark.sp .eyebrow{font-size:12px;margin-bottom:4px}
.dark.vis .lead,.dark.sp .lead{font-size:13px;line-height:1.42;margin:0 0 14px}
.dark.vis .btn,.dark.sp .btn{padding:9px 16px;font-size:13px}
.dark.vis .fade,.dark.sp .pic{position:relative;width:100%;height:100%;min-height:0;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%)}
.dark.vis .fade{object-position:50% 40%}
}
/* smoother, eased fade of photos into black (Vision / Why blocks) */
:root{--fadeX:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 10%,rgba(0,0,0,.12) 20%,rgba(0,0,0,.28) 30%,rgba(0,0,0,.5) 40%,rgba(0,0,0,.72) 50%,rgba(0,0,0,.88) 60%,rgba(0,0,0,.97) 70%,#000 80%)}
.dark.sp .pic,.dark.vis .fade{-webkit-mask-image:var(--fadeX);mask-image:var(--fadeX)}
@media(max-width:768px){.dark.sp .pic,.dark.vis .fade{-webkit-mask-image:var(--fadeX);mask-image:var(--fadeX)}}
/* phone: Vision / Why photos as rounded tiles on the right (no muddy fade), shorter button label */
@media(max-width:768px){
.dark.vis .wrap.split,.dark.sp .wrap.split{grid-template-columns:56% 44%}
.dark.vis .fade,.dark.sp .pic{-webkit-mask-image:none;mask-image:none;border-radius:18px;margin:26px 22px 26px 0;width:auto;height:auto;align-self:stretch;justify-self:stretch;min-height:0}
.dark.vis .split>div:first-child,.dark.sp .split>div:first-child{padding:26px 14px 26px 22px}
.dsk{display:none}
.dark.vis .btn,.dark.sp .btn{white-space:nowrap}
}
@media(max-width:768px){.dark.vis .fade{object-position:63% 28%}}

/* phone: next slots swipe sideways inside the card */
@media(max-width:768px){
.cardnx{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-right:-22px;padding-right:22px;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
.cardnx::-webkit-scrollbar{display:none}.cardnx span,.cardnx a{flex:0 0 auto;scroll-snap-align:start}
}
@media(max-width:768px){.card .cb{min-width:0;width:100%}}

/* slot row swipes sideways on every screen size */
.cardnx{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.cardnx::-webkit-scrollbar{display:none}.cardnx span,.cardnx a{flex:0 0 auto;scroll-snap-align:start;user-select:none;-webkit-user-drag:none}
.card .cb{min-width:0;width:100%}
.car{--pad:24px}
/* desktop nav: floating glass pill */
@media(min-width:769px){
.nav{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;top:12px;margin-bottom:-64px}
.nav .bar{max-width:920px;height:52px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 6px 28px rgba(0,0,0,.1),inset 0 0 0 1px rgba(0,0,0,.06);padding:0 10px 0 24px}
}
/* hero (desktop): quiet eyebrow, compact heading, small "next available" pills, thin concentric rings behind the portrait */
@media(min-width:769px){
.hero.full.light .sub{display:none}
.hero.full.light h1{font-size:clamp(40px,4.4vw,62px);margin-bottom:14px}
.hero.full.light .eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:10px}
.hero.full.light .hmeta{margin-top:22px;min-height:48px}
.nx-on .hero.full.light .hnx{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:0}.nx-on .hero.full.light .hnx::before{content:"Next available";font-size:10px;letter-spacing:.06em;text-transform:uppercase;opacity:.55;flex:0 0 100%;margin-bottom:2px}
.hero.full.light .hnx a{font-size:10.5px;text-decoration:none;border:1px solid rgba(0,0,0,.2);border-radius:99px;padding:4px 9px}.hero.full.light .hnx .sep{display:none}
.hero.full.light .hbg{mix-blend-mode:multiply}
.hero.full.light{isolation:isolate}
.hero.full.light::before{display:block;content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 76% 52%,transparent 0 27%,rgba(0,0,0,.26) 27% 27.21%,transparent 27.21% 36%,rgba(0,0,0,.18) 36% 36.21%,transparent 36.21% 46%,rgba(0,0,0,.11) 46% 46.21%,transparent 46.21% 58%,rgba(0,0,0,.06) 58% 58.21%,transparent 58.21% 72%,rgba(0,0,0,.025) 72% 72.21%,transparent 72.21%);transform-origin:76% 52%;animation:ringsBreathe 9s ease-in-out infinite}
}
@keyframes ringsBreathe{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.05);opacity:1}}
@media(prefers-reduced-motion:reduce){.hero.full.light::before{animation:none}}
/* availability slots fade in once loaded */
@keyframes nxIn{from{opacity:0}to{opacity:1}}
.nx-on .hnx,.nx-on .cardnx{animation:nxIn 1.2s ease-in-out both}
/* hero: label first, then each slot in turn */
.nx-on .hero.full.light .hnx{animation:none}
.nx-on .hero.full.light .hnx::before{animation:nxIn 1s ease-in-out both}
.nx-on .hero.full.light .hnx a{animation:nxIn 1s ease-in-out both .6s}
.nx-on .hero.full.light .hnx a+.sep+a{animation-delay:1.2s}
@media(prefers-reduced-motion:reduce){.nx-on .hnx,.nx-on .cardnx,.nx-on .hero.full.light .hnx::before,.nx-on .hero.full.light .hnx a{animation:none}}
/* visit page (desktop): compact layout, small grey map beside the address, parking rows in two columns */
@media(min-width:769px){
section:has(.vtop){padding:128px 0 48px}
.vtop{grid-template-columns:1.1fr .9fr;gap:40px}.vtop .map{height:240px;border-radius:16px;filter:grayscale(1)}
.vtop h1{font-size:44px}.vtop+*{}.vtop .lead{font-size:17px}
section.gray:has(.vpark){background:none}
.vpark{grid-template-columns:1fr;gap:12px}.vpark .lead,.vpark .muted{display:none}.vpark .prs{grid-template-columns:1fr 1fr;column-gap:40px}
.vpark .pr{padding:10px 0}section:has(.vinfo){padding:24px 0}.vinfo{grid-template-columns:1fr 1fr 2fr}
}
/* visit page: small outlined pill buttons, like the "next available" pills in the hero */
.vtop .cta{justify-content:flex-start;flex-direction:row;flex-wrap:wrap;gap:6px;margin-top:18px}
.vtop .cta .btn,.vtop .cta .btn.ghost.dk{width:auto;background:none;color:#1d1d1f;box-shadow:none;border:1px solid rgba(0,0,0,.2);border-radius:99px;padding:5px 12px;font-size:12px;line-height:1.4}
.vtop .cta .btn:hover{background:#f5f5f7}
/* visit page: section headings match the page title */
.vpark h2,section:has(#cf) h2{font-size:clamp(34px,5.5vw,64px);line-height:1.05;margin-bottom:18px}
@media(min-width:769px){.vpark h2,section:has(#cf) h2{font-size:44px}}
/* footer: three centred columns */
.fgrid{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:28px 48px;text-align:left}
@media(max-width:768px){.fgrid{grid-template-columns:1fr;justify-content:stretch}}
footer .wrap>.muted{text-align:center}
footer .fgrid a{display:block}
html.inv{filter:invert(1) hue-rotate(180deg);background:#fff}
html.inv img,html.inv iframe,html.inv video,html.inv [style*="background-image"],html.inv .nav{filter:invert(1) hue-rotate(180deg)}
@media(max-width:768px){html.inv .dark.vis img.fade{-webkit-mask-image:none!important;mask-image:none!important}}
/* inverted mode: keep the header exactly as in the light theme (dark logo, white bar) */
html.inv .nav img{filter:none}
@media(min-width:769px){html.inv .nav .bar{background:rgba(255,255,255,.97)}}
@media(max-width:768px){html.inv .nav{background:rgba(255,255,255,.97)}}
/* phone hero: same quiet text as on desktop (no paragraph, small "next available" pills); framing for the inverted photos */
@media(max-width:768px){
.hero.full.light .sub{display:none}
.hero.full.light .eyebrow{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.55}
.nx-on .hero.full.light .hnx{display:flex;flex-wrap:wrap;gap:5px;font-size:0}
.nx-on .hero.full.light .hnx::before{flex:0 0 100%;margin-bottom:1px}
.nx-on .hero.full.light .hnx a{display:inline-block;font-size:10.5px;line-height:1.35;border:1px solid rgba(0,0,0,.2);border-radius:99px;padding:4px 9px}
.nx-on .hero.full.light .hnx .sd{display:inline}.nx-on .hero.full.light .hnx .sn{display:inline;font-weight:400}.nx-on .hero.full.light .hnx .st{display:inline;color:inherit}
html.inv .hero.full.light .hbg{right:-30vw;background-position:60% center}
html.inv .dark.vis .fade{object-position:55% 25%}
}
/* reserve the slots' height up front so the heading does not jump when they load */
@media(max-width:768px){.hero.full.light .hmeta{min-height:112px}}
/* "why 2+ hours": centred text with chat-style question bubbles that type themselves */
.why{position:relative;overflow:hidden;isolation:isolate;padding:0}
.why .wrap{max-width:1080px}
.why .reveal{max-width:540px;margin:0 auto;text-align:center;padding:96px 0;position:relative;z-index:2}
.why .qwrap{position:absolute;inset:0;pointer-events:none;z-index:1}
.qb{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);white-space:nowrap;padding:9px 16px;border-radius:18px 18px 18px 4px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f5f5f7;font-size:15px;line-height:1.25;min-height:38px;opacity:0;transform:scale(.6);transition:opacity .35s,transform .6s cubic-bezier(.2,1.5,.4,1)}
.qb.r{border-radius:18px 18px 4px 18px}
.qb.on{opacity:1;transform:scale(1);animation:qfloat 6s ease-in-out infinite;animation-delay:calc(var(--i)*-.7s)}
@keyframes qfloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.qb.typing .qt::after{content:"";display:inline-block;width:1.5px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:qcar .9s steps(1) infinite}
@keyframes qcar{50%{opacity:0}}
.qdots{display:inline-flex;gap:4px;padding:6px 2px}.qdots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;animation:qdot 1s ease-in-out infinite}.qdots i:nth-child(2){animation-delay:.15s}.qdots i:nth-child(3){animation-delay:.3s}
@keyframes qdot{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@media(max-width:768px){.why .reveal{padding:150px 22px}.qb{font-size:14px;padding:8px 14px;min-height:36px;white-space:normal;max-width:calc(92% - 4px)}.qb.r{max-width:calc(54% - 8px)}}
.qwrap.still{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 40px;pointer-events:auto}.qwrap.still .qb{position:static;opacity:1;transform:none;animation:none;white-space:normal}.qwrap.still .qt::after{display:none}
@media(prefers-reduced-motion:reduce){.qb{transition:none}.qb.on{animation:none}}
/* service cards: Book sits left of the slots; the description opens from an (i) in the top-right corner */
.card .cb{position:static;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"h h" "m m" "b n";column-gap:12px;align-items:center}
.card .cb h3{margin:0;grid-area:h}.card .cb .meta{margin:2px 0 0;grid-area:m}
.card .cb .cardnx{grid-area:n;margin:12px 0 0;min-width:0}
.card .cb .btn{grid-area:b;margin:12px 0 0;justify-self:start}
.card .cb p.desc{display:none;position:absolute;left:14px;right:14px;top:14px;margin:0;max-height:none;opacity:1;padding:14px 58px 14px 16px;background:rgba(18,18,20,.72);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:16px;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.92);cursor:pointer;z-index:3;overflow:visible}
.card.open .cb p.desc{display:block}
.card .info{position:absolute;top:14px;right:14px;z-index:4;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.card .info::before{content:"i";font:italic 700 16px Georgia,serif}.card.open .info::before{content:"\00d7";font:400 22px/1 system-ui}
.card .info:hover{background:rgba(255,255,255,.28)}
.card:hover::before{background:linear-gradient(0deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 70%)}
.card .cb h3,.card .cb .meta,.card .cb .btn,.card .cb .cardnx{position:relative;z-index:1}
/* (i) button: dark glass so it reads on light photos too */
.card .info{width:34px;height:34px;background:rgba(18,18,20,.6);border-color:rgba(255,255,255,.55);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.card .info::before{font-size:18px}
.card .info:hover{background:rgba(18,18,20,.8)}
/* open state: the close button sits inside the panel, as part of it */
.card .info{transition:top .25s,right .25s,width .25s,height .25s,background .25s,border-color .25s,box-shadow .25s}
.card.open .info{top:24px;right:24px;width:28px;height:28px;background:rgba(255,255,255,.16);border-color:transparent;box-shadow:none}
.card.open .info::before{font-size:20px}
.card .cb p.desc{padding-right:64px}
/* (i) and close are the same button in the same place: it only changes colour and glyph, and the panel wraps around it */
.card .info,.card.open .info{top:16px;right:16px;width:32px;height:32px}
.card .cb p.desc{left:10px;right:10px;top:10px;padding:15px 62px 15px 16px;min-height:52px}
.card.open .info{background:rgba(255,255,255,.18);border-color:transparent;box-shadow:none}
.card.open .info::before,.card.open .info::after{content:"";position:absolute;left:calc(50% - 7px);top:calc(50% - .8px);width:14px;height:1.6px;border-radius:1px;background:#fff;font:0 system-ui}
.card.open .info::before{transform:rotate(45deg)}.card.open .info::after{transform:rotate(-45deg)}
/* recent work: vertical videos that play while in view */
.car .vid{flex:0 0 clamp(200px,22vw,300px);aspect-ratio:9/16;border-radius:20px;background:#111;cursor:pointer}
.car .vid video{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:768px){.car .vid{flex-basis:62vw;border-radius:18px}}
/* My Work: grid of vertical videos */
.vgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1240px;margin:0 auto;padding:0 22px}
.vgrid .vid{grid-column:span 2;margin:0;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#111;cursor:pointer}
.vgrid .vid video{width:100%;height:100%;object-fit:cover;display:block}
@media(min-width:621px){.vgrid .vid:nth-child(3n+1):nth-last-child(2){grid-column:2/4}.vgrid .vid:nth-child(3n+2):last-child{grid-column:4/6}.vgrid .vid:nth-child(3n+1):last-child{grid-column:3/5}}
@media(max-width:620px){.vgrid{grid-template-columns:repeat(2,1fr);gap:10px;padding:0 14px}.vgrid .vid{grid-column:auto;border-radius:16px}}
/* My Work page spacing: clear of the floating menu, tight to the videos, room above the black band */
section.mwh{padding:128px 0 28px}section.mwh h1{margin:0}
section.mwg{padding:0 0 96px}
@media(max-width:768px){section.mwh{padding:44px 0 20px}section.mwg{padding-bottom:64px}}
/* FAQ page: header in the same column as the questions, compact spacing */
section.faqh{padding:120px 0 12px}
section.faqh h1.pg{font-size:clamp(32px,4.4vw,48px);line-height:1.08;margin-bottom:12px}
section.faqh .lead{font-size:19px;margin-bottom:18px}
section.faqh p:last-child{margin:0}
section.faqb{padding:12px 0 72px}
section.faqb h2.fh:first-child{margin-top:28px}
@media(max-width:768px){section.faqh{padding:44px 0 8px}section.faqb{padding-bottom:48px}}
/* same height for link and button versions of .btn in the closing bands */
.band .cta .btn{line-height:1.25;padding:9px 20px;font-size:13px}

/* Page transitions (cross-document View Transitions): soft crossfade, header stays put */
/* cross-document view transition disabled: it fought with the .reveal rise animation (double motion on arrival) */
/*@view-transition{navigation:auto}*/
.nav{view-transition-name:nav}
::view-transition-old(root){animation:vtOut .28s cubic-bezier(.4,0,.2,1) both}
::view-transition-new(root){animation:vtIn .42s cubic-bezier(.2,.7,.2,1) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0}}
::view-transition-group(nav){animation-duration:0s}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* Vision block: photo mirrored to the left, text on the right */
.dark.vis .fade{order:1;scale:-1 1}
.dark.vis .split>div:first-child{order:2}
@media(min-width:769px){
.dark.vis .wrap.split{padding:0 max(22px,calc((100vw - 1080px)/2 + 22px)) 0 0}
.dark.vis .split>div:first-child{padding:96px 0 96px 48px}
}
@media(max-width:768px){
.dark.vis .wrap.split{grid-template-columns:44% 56%}
.dark.vis .fade{margin:26px 0 26px 22px}
.dark.vis .split>div:first-child{padding:26px 22px 26px 14px}
}

/* Services cards: rise in, columns staggered */
.grid.three .card.reveal{transform:translateY(64px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.grid.three .card.reveal.in{transform:none}
.grid.three .card.reveal:nth-child(3n+2){transition-delay:.13s}
.grid.three .card.reveal:nth-child(3n){transition-delay:.26s}
@media(max-width:768px){.grid.three .card.reveal:nth-child(n){transition-delay:0s}}
@media(prefers-reduced-motion:reduce){.grid.three .card.reveal{transform:none;transition:none}}

/* Services page */
section.svh{padding:120px 0 6px}section.svh .lead{margin-bottom:0}
section.svb{padding:14px 0 6px}section.svw{padding-bottom:88px}
.sv-l{border-top:1px solid var(--line,#d2d2d7)}
.sv-r{display:grid;grid-template-columns:1fr auto 84px;gap:8px 28px;align-items:baseline;padding:18px 6px;border-bottom:1px solid var(--line,#d2d2d7);color:inherit;text-decoration:none}
.sv-hd{padding:10px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#6e6e73;font-weight:600}
.sv-n b{display:block;font-weight:600;font-size:17px}.sv-n small{display:block;margin-top:4px;font-size:14px;color:#6e6e73;line-height:1.4;max-width:640px}
.sv-p,.sv-t{white-space:nowrap;font-size:17px}
.sv-r.reveal{transition-delay:calc(var(--i,0)*70ms)}
a.sv-k{position:relative}
a.sv-k::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:2px;background:#1d1d1f;transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a.sv-k:hover::before{transform:scaleY(1)}
a.sv-k .sv-n,a.sv-k .sv-t{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
a.sv-k:hover .sv-n{transform:translateX(14px)}
.sv-side a.sv-k:hover .sv-t{transform:translateX(14px)}
.sv-lab{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}.sv-lab span{font-size:20px;font-weight:700;letter-spacing:-.01em}.sv-lab em{font-style:normal;font-size:13px;color:#6e6e73}
.sv-two{display:grid;grid-template-columns:1fr 360px;gap:48px;align-items:start}
.sv-side{background:#f5f5f7;border-radius:24px;padding:24px;position:sticky;top:96px}.sv-side .sv-l{border-top:0}.sv-side .sv-r{grid-template-columns:1fr auto;padding:14px 0}.sv-side .sv-t{grid-column:1/-1;font-size:13px;color:#6e6e73}.sv-side .sv-r:last-child{border-bottom:0}
.sv-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;margin-top:6px;padding:9px 20px;border-radius:999px;background:#1d1d1f;color:#fff;font-family:inherit;font-weight:500;font-size:13px;line-height:1.25}
.sv-btn:hover{background:#000}.sv-btn:focus-visible{outline:2px solid #0071e3;outline-offset:2px}
.sv-d{position:fixed;inset:0;margin:auto;height:fit-content;border:0;border-radius:26px;padding:0;max-width:640px;width:92vw;max-height:86vh;overflow:auto}
.sv-d::backdrop{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sv-di{padding:34px 34px 30px}.sv-di form{margin-top:18px}.sv-di h3{font-size:22px;margin:0 0 8px}.sv-di h4{font-size:16px;margin:20px 0 6px}.sv-di p{font-size:15px;line-height:1.55;color:#424245;margin:0 0 10px}
@media(max-width:900px){.sv-two{grid-template-columns:1fr}.sv-side{position:static}}
@media(max-width:768px){a.sv-k:hover .sv-t{transform:translateX(14px)}section.svh{padding:96px 0 4px}section.svw{padding-bottom:56px}.sv-r{grid-template-columns:1fr auto;gap:2px 16px;padding:16px 2px}.sv-t{grid-column:2;font-size:13px;color:#6e6e73;text-align:right}.sv-hd .sv-t{display:none}.sv-side{padding:20px 18px 6px}.sv-di{padding:26px 22px 24px}}
.sv-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}.sv-act .sv-btn{margin-top:0}
.sv-btn.sv-2{background:#e8e8ed;color:#1d1d1f}.sv-btn.sv-2:hover{background:#dcdce1}
section.dark.svp{padding:96px 0 104px}
.svp .lead{color:rgba(255,255,255,.72)}
.svp .sv-act>.sv-1{background:#fff;color:#000}.svp .sv-act>.sv-1:hover{background:#e8e8ed}
.svp .sv-act>.sv-2{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}.svp .sv-act>.sv-2:hover{background:rgba(255,255,255,.14)}
.svp .sv-d{color:#1d1d1f}
@media(max-width:768px){section.dark.svp{padding:64px 0 72px}}
/* Service cards: whole card is the Book link + subtle hover */
.grid.three .card:not(.jc){cursor:pointer}
.card .cb>.btn{position:static}
.card .cb>.btn::after{content:"";position:absolute;inset:0;z-index:2}
.card .cb>.btn:focus-visible{outline:none}.card:has(.cb>.btn:focus-visible){outline:2px solid #fff;outline-offset:-4px}
.card .cb .cardnx,.card .cb .cardnx a{position:relative;z-index:3}
.grid.three .card.reveal.in{transition:filter .35s ease,box-shadow .55s ease,opacity .9s;transition-delay:0s}
.grid.three .card.reveal.in:hover{box-shadow:0 18px 40px rgba(0,0,0,.3)}
.card .cb>.btn{transition:background .25s}
@media(hover:hover){.card:hover .cb>.btn{background:#fff;color:#000;animation:btnBuzz .5s ease-in-out 1}}
@keyframes btnBuzz{0%,60%,100%{margin-left:0}10%,30%{margin-left:-.8px}20%,40%{margin-left:.8px}50%{margin-left:-.4px}}
@media(prefers-reduced-motion:reduce){.card:hover .cb>.btn{animation:none}}
.grid.three .card::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;opacity:0;transition:opacity .35s ease;box-shadow:inset 0 0 0 3px #fff,inset 0 0 46px rgba(255,255,255,.4)}
.grid.three .card{transition:filter .35s ease}
@media(hover:hover){.grid.three .card:hover::after{opacity:1}.grid.three .card:hover{filter:brightness(1.08)}}
@media(hover:none){.grid.three .card.reveal.in:hover{scale:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){.grid.three .card.reveal.in:hover{scale:none}}
/* visit: circular map with orbit rings and a radar pulse on the pin */
.vmap{position:relative;width:min(500px,100%);aspect-ratio:1;margin:0 auto}
.vc{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:1;transform:translateZ(0);box-shadow:0 24px 60px rgba(0,0,0,.14)}
.vc iframe.map{position:absolute;left:50%;top:50%;width:190%;height:190%;transform:translate(-50%,-50%);border:0;border-radius:0;filter:grayscale(1)}
.vmap::before,.vmap::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.vmap::before{inset:-26px;border:1.5px dashed rgba(0,0,0,.3);animation:vSpin 50s linear infinite}
.vmap::after{inset:-56px;border:1px solid rgba(0,0,0,.12);animation:vSpin 80s linear infinite reverse}
@keyframes vSpin{to{transform:rotate(360deg)}}
.vc .rip{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;border:2px solid #1d1d1f;pointer-events:none;z-index:3;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:vRip 3.2s ease-out infinite}
.vc .rip.b{animation-delay:1.05s}.vc .rip.c{animation-delay:2.1s}
@keyframes vRip{0%{transform:translate(-50%,-50%) scale(.2);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@media(min-width:769px){
section:has(.vcirc){padding:190px 0 28px}
section:has(.vpark){padding-top:36px}
.vtop.vcirc{grid-template-columns:1fr 1fr;gap:56px}
.vcirc h1{font-size:56px}.vcirc .lead{font-size:20px}
.vmap{margin-right:56px}
}
@media(max-width:768px){.vmap{width:min(78vw,340px)}.vmap::before{inset:-16px}.vmap::after{display:none}section:has(.vcirc){padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){.vmap::before,.vmap::after,.vc .rip{animation:none}}
/* chain-inverted mode: hover brightening must keep the photo's counter-inversion */
@media(hover:hover){html.inv .grid.three .card:hover{filter:invert(1) hue-rotate(180deg) brightness(1.08)}}
html.inv .grid.three .card{transition:filter .35s ease}
/* inverted (light) Vision: short fade on the photo's edge so it stays off the face */
@media(min-width:769px){html.inv .dark.vis img.fade{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 6%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.93) 24%,#000 30%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 6%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.72) 18%,rgba(0,0,0,.93) 24%,#000 30%)}}
/* main photos fade in once loaded (class "jsf" is set in <head>, so without JS they simply show) */
.jsf .hbg{opacity:0;transition:opacity 1s ease}
.jsf .hbg.ld{opacity:1}
.jsf img.fade.pend{opacity:0!important}
@media(prefers-reduced-motion:reduce){.jsf .hbg{transition:none}}

/* anonymous feedback band (black), same on Home, FAQ and Services */
section.wh{padding:64px 0;text-align:center}.dark+.wh,.wh+.dark{border-top:1px solid #2a2a2c}
.wh .in{max-width:640px;margin:0 auto}
.wh h2{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.03em;margin-bottom:10px}
.wh .whs{color:#a1a1a6;font-size:18px;margin-bottom:26px}
.wh .whl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8e8e93;margin:18px 0 10px}.wh .whl.first{margin-top:0}.wh .whl span{font-weight:400;letter-spacing:0;text-transform:none;color:#6e6e73}
.wh .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.wh .chip{font:inherit;font-size:14px;border:1px solid #48484a;background:transparent;color:#f5f5f7;border-radius:980px;padding:8px 15px;cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .12s}
.wh .chip:hover{border-color:#a1a1a6}.wh .chip:active{transform:scale(.97)}.wh .chip[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
.wh textarea{display:block;width:100%;margin-top:16px;min-height:132px;font-family:inherit;font-size:19px;line-height:1.45;text-align:left;padding:14px 16px;border:1px solid #3a3a3c;border-radius:16px;background:#111;color:#f5f5f7;resize:vertical;outline:0;transition:border-color .2s,box-shadow .2s}
.wh textarea:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12)}.wh textarea::placeholder{color:#6e6e73}
.wh .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wh .err{color:#ff8a80;font-size:13px;min-height:18px;margin:8px 0 0}.wh .go{margin-top:6px}.wh .go .btn{padding:11px 26px;font-size:14px}.wh .go .btn[disabled]{opacity:.5}
.wh .whp{font-size:12.5px;color:#8e8e93;margin-top:14px}
.wh .whd h3{font-size:24px;margin-bottom:8px}.wh .whd p{color:#a1a1a6;font-size:15px}.wh .whd small{display:block;color:#8e8e93;font-size:12.5px;margin-top:10px}
.wh .whd{animation:whIn .5s ease both}@keyframes whIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wh .lnk{display:flex;gap:8px;align-items:center;background:#111;border:1px dashed #48484a;border-radius:14px;padding:10px 12px;margin:16px 0 6px;font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:#f5f5f7;word-break:break-all;text-align:left}
.wh .lnk a{text-decoration:underline;text-underline-offset:3px}.wh .lnk button{flex:none;margin-left:auto;font:600 12px -apple-system,Inter,sans-serif;border:0;background:#fff;color:#000;border-radius:980px;padding:6px 13px;cursor:pointer}
@media(max-width:768px){section.wh{padding:48px 0}.wh .whs{font-size:16px}.wh textarea{font-size:18px}}
/* private thread page (/f/<token>) */
.th{padding:96px 0 72px}.th .eyebrow{font-size:14px;color:var(--mu);font-weight:600;letter-spacing:.06em;text-transform:uppercase}.th h1.pg{margin-bottom:26px}
.th .meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}.th .meta span{font-size:12px;background:var(--gray);border-radius:980px;padding:4px 11px;color:var(--mu)}
.th .bq,.th .ba{font-size:16px;padding:14px 17px;max-width:92%;white-space:pre-wrap;overflow-wrap:anywhere}.th small{display:block;font-size:12px;margin-top:6px;opacity:.65}
.th .bq{background:var(--gray);border-radius:20px 20px 6px 20px;margin:0 0 8px auto}
.th .ba{background:#1d1d1f;color:#fff;border-radius:20px 20px 20px 6px;margin:12px auto 6px 0}
.th .wait{text-align:center;color:var(--mu);font-size:14px;margin-top:22px}
.th .rf{margin-top:26px}.th .rf textarea{width:100%;min-height:120px;font-family:inherit;font-size:18px;line-height:1.45;padding:14px 16px;border:1px solid #d2d2d7;border-radius:16px;margin-bottom:10px}
.th .rf .err{color:#b3261e;font-size:13px;min-height:18px}
.th .cp{margin-top:22px}.th .cp button{font:inherit;font-size:13px;border:1px solid #d2d2d7;background:#fff;border-radius:980px;padding:7px 15px;cursor:pointer}

/* light version of the feedback band (FAQ, Services) */
section.wh.lt{background:#fff;color:#1d1d1f}
.wh.lt .whs{color:#6e6e73}.wh.lt .whl{color:#6e6e73}.wh.lt .whl span{color:#8e8e93}.wh.lt .whp{color:#8e8e93}
.wh.lt .chip{border-color:#d2d2d7;background:#fff;color:#1d1d1f}.wh.lt .chip:hover{border-color:#8e8e93}.wh.lt .chip[aria-pressed=true]{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.wh.lt textarea{background:#f5f5f7;border-color:#d2d2d7;color:#1d1d1f}.wh.lt textarea:focus{border-color:#1d1d1f;box-shadow:0 0 0 4px rgba(29,29,31,.08)}.wh.lt textarea::placeholder{color:#8e8e93}
.wh.lt .btn{background:#1d1d1f;color:#fff}.wh.lt .btn:hover{background:#000}.wh.lt .err{color:#b3261e}
.wh.lt .whd p{color:#6e6e73}.wh.lt .whd small{color:#8e8e93}
.wh.lt .lnk{background:#f5f5f7;border-color:#b9b9c0;color:#1d1d1f}.wh.lt .lnk button{background:#1d1d1f;color:#fff}

/* phone: the two buttons of the FAQ closing band stay on one row, like the booking policy */
@media(max-width:768px){.band.two .cta.c{flex-direction:row;gap:10px;justify-content:center;flex-wrap:nowrap}.band.two .cta.c .btn{width:auto;flex:0 0 auto;white-space:nowrap}}
.sv-di{outline:0}

/* home: strict black/white alternation (Services and My Work black, Why light) */
section.blk{background:var(--dark);color:#f5f5f7}
section.blk .btn:not(.inv){background:#fff;color:#1d1d1f}
.why:not(.dark) .qb{border-color:rgba(0,0,0,.14);background:rgba(0,0,0,.04);color:#1d1d1f}

/* dark theme shows the dark hero photo (the page itself is colour-inverted, images are inverted back) */
html.inv .hero.full.light .hbg{background-image:url(img/natalie-dark.jpg?v=23421eba)!important}

/* Academy: one-to-one training request */
section.ac{background:#000;color:#f5f5f7;text-align:center;position:relative;overflow:hidden;padding:150px 0 120px;min-height:86vh;display:flex;align-items:center}
section.ac:before{content:"";position:absolute;left:50%;top:-24%;width:900px;height:900px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%);pointer-events:none}
.ac .in{position:relative;width:100%;max-width:700px;margin:auto;padding:0 22px}
.ac .eb{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8e8e93;margin-bottom:14px}
.ac h1{font-size:clamp(46px,9vw,96px);letter-spacing:-.045em;line-height:1;font-weight:700}.ac h1 span{color:#6e6e73}
.ac .acp{display:inline-flex;gap:10px;align-items:baseline;margin:28px 0 6px;padding:8px 20px;border:1px solid #2c2c2e;border-radius:980px;font-size:15px;color:#a1a1a6}.ac .acp b{color:#f5f5f7;font-size:22px;letter-spacing:-.02em;font-weight:600}
.ac .lead{color:#8e8e93;max-width:440px;margin:14px auto 30px;font-size:17px;line-height:1.47}
.ac .one{display:flex;gap:8px;max-width:520px;margin:auto;background:rgba(255,255,255,.07);border:1px solid #2c2c2e;border-radius:980px;padding:6px 6px 6px 22px}
.ac .one input{flex:1;min-width:0;background:none;border:0;color:#f5f5f7;font-family:inherit;font-size:17px;line-height:1.4;outline:0}.ac .one input::placeholder{color:#6e6e73}
.ac .one .btn{padding:12px 24px;font-size:15px;white-space:nowrap}
.ac details{max-width:520px;margin:12px auto 0;text-align:left;border:0;padding:0}.ac summary{list-style:none;cursor:pointer;text-align:center;font-size:14px;font-weight:400;color:#8e8e93;padding:8px 0}.ac summary::-webkit-details-marker{display:none}.ac summary::after,.ac details[open] summary::after{float:none;color:inherit}.ac summary::after{content:" \25BE"}.ac details[open] summary::after{content:" \25B4"}.ac summary:hover{color:#f5f5f7}
.ac .acx{display:grid;gap:10px;margin-top:14px}
.ac .acx input,.ac .acx textarea{width:100%;background:transparent;color:#f5f5f7;border:1px solid #3a3a3c;border-radius:14px;padding:14px 16px;font-size:17px;font-family:inherit;line-height:1.4;outline:0}.ac .acx textarea{min-height:110px;resize:vertical}
.ac .acx input::placeholder,.ac .acx textarea::placeholder{color:#6e6e73}.ac .acx input:focus,.ac .acx textarea:focus{border-color:#f5f5f7}
.ac .small{margin-top:22px;font-size:13px;color:#8e8e93}
@media(max-width:768px){section.ac{padding:120px 0 80px;min-height:auto}.ac .one{padding-left:18px}.ac .one .btn{padding:11px 18px}}

/* Shop: Cuticle Oil coming soon */
section.shp{background:#000;color:#f5f5f7;text-align:center;position:relative;overflow:hidden;padding:130px 0 110px;min-height:86vh;display:flex;align-items:center}
.shp .in{position:relative;width:100%;max-width:700px;margin:auto;padding:0 22px}
.shp .pb{position:relative;width:min(300px,66vw);margin:0 auto 22px}
.shp .pbt{position:relative;z-index:1;display:block;width:100%;height:auto;margin:0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));animation:shfl 6s ease-in-out infinite}
@keyframes shfl{50%{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.shp .pbt,.shp .pb i{animation:none}}
.shp .pb i{position:absolute;left:50%;top:46%;border-radius:50%;pointer-events:none;z-index:0}
.shp .pb .g1{width:760px;height:760px;margin:-380px 0 0 -380px;background:radial-gradient(circle,rgba(255,196,110,.34),rgba(255,160,60,.12) 40%,rgba(255,160,60,0) 68%);animation:shhb 5.5s ease-in-out infinite}
.shp .pb .g2{width:420px;height:420px;margin:-210px 0 0 -210px;background:radial-gradient(circle,rgba(255,225,170,.28),rgba(255,225,170,0) 70%);animation:shhb 5.5s ease-in-out infinite reverse}
@keyframes shhb{0%,100%{transform:scale(.88);opacity:.55}50%{transform:scale(1.08);opacity:1}}
@media(max-width:700px){.shp .pb .g1{width:520px;height:520px;margin:-260px 0 0 -260px}.shp .pb .g2{width:300px;height:300px;margin:-150px 0 0 -150px}}
.shp .eb{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#a1a1a6;margin-bottom:8px}
.shp h1{font-size:clamp(44px,8vw,80px);letter-spacing:-.04em;line-height:1;font-weight:700}
.shp .soon{display:inline-block;margin:18px 0 6px;padding:6px 16px;border-radius:980px;border:1px solid #3a3a3c;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#d1d1d6}
.shp .lead{color:#8e8e93;max-width:380px;margin:12px auto 28px;font-size:17px;line-height:1.47}
.shp .one{display:flex;gap:8px;max-width:460px;margin:auto;background:rgba(255,255,255,.07);border:1px solid #2c2c2e;border-radius:980px;padding:6px 6px 6px 22px}
.shp .one input{flex:1;min-width:0;background:none;border:0;color:#f5f5f7;font-family:inherit;font-size:17px;line-height:1.4;outline:0}.shp .one input::placeholder{color:#6e6e73}
.shp .one .btn{padding:12px 24px;font-size:15px;white-space:nowrap}
.shp .small{margin-top:22px;font-size:13px;color:#8e8e93}
@media(max-width:768px){section.shp{padding:110px 0 80px;min-height:auto}.shp .one{padding-left:18px}.shp .one .btn{padding:11px 18px}}

/* iPhone/iPad: Google Maps or Apple Maps sheet */
.msheet{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}.msheet[hidden]{display:none}
.mso{position:absolute;inset:0;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.msp{position:relative;width:min(440px,100%);background:#fff;color:#1d1d1f;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));display:grid;gap:10px;animation:msup .28s cubic-bezier(.2,.8,.2,1)}
@keyframes msup{from{transform:translateY(40px);opacity:0}}
.mst{text-align:center;font-weight:600;font-size:15px;margin-bottom:4px}
.msb{display:block;text-align:center;background:#1d1d1f;color:#fff;border-radius:980px;padding:15px;font-size:17px;font-weight:500}
.msc{border:0;background:#f5f5f7;color:#1d1d1f;border-radius:980px;padding:15px;font:inherit;font-size:17px;cursor:pointer}
html.mslock{overflow:hidden}

/* Want to join? application: step by step, with a list of steps on the left */
section.jn{background:#000;color:#f5f5f7;position:relative;overflow:hidden;padding:140px 0 110px}
section.jn:before{content:"";position:absolute;left:50%;top:-24%;width:900px;height:900px;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,255,255,.09),transparent 60%);pointer-events:none}
.jn .hd{position:relative;max-width:640px;margin:0 auto 44px;padding:0 22px;text-align:center}
.jn .eb{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#8e8e93;margin-bottom:14px}
.jn h1{font-size:clamp(44px,8vw,84px);letter-spacing:-.045em;line-height:1;font-weight:700}
.jn .lead{color:#8e8e93;max-width:420px;margin:16px auto 0;font-size:17px;line-height:1.47}
.jn6{position:relative;max-width:900px;margin:0 auto;display:grid;grid-template-columns:210px 1fr;border-radius:26px;background:#060606;min-height:400px;animation:jnbreath 4.5s ease-in-out infinite}
.jn .side{list-style:none;padding:40px 0 30px 32px;margin:0;border-right:1px solid #1c1c1e;display:grid;align-content:start;gap:3px}
.jn .side li{display:flex;gap:12px;align-items:center;padding:7px 0;font-size:14px;color:#6e6e73}
.jn .side li:before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid #4a4a4d;flex:none}
.jn .side li.done{color:#a1a1a6}.jn .side li.done:before{background:#a1a1a6;border-color:#a1a1a6}
.jn .side li.cur{color:#fff;font-weight:600}.jn .side li.cur:before{border-color:#fff;background:#fff}
.jn6 .main{padding:44px 44px 36px;position:relative}
.jn .prog{display:none;position:absolute;left:0;right:0;top:0;height:2px;background:#2a2a2c}.jn .prog b{display:block;height:100%;width:0;background:#f5f5f7;transition:width .4s}
.jsf .jn .st{display:none}.jsf .jn .st.on{display:block;animation:jnfi .35s}
@keyframes jnfi{from{opacity:0;transform:translateY(10px)}}
.jn .st{margin-bottom:26px}
.jn .qn{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8e8e93;margin-bottom:10px}
.jn .qt{font-size:clamp(26px,3.4vw,34px);letter-spacing:-.03em;line-height:1.1;font-weight:700}
.jn .qh{color:#8e8e93;font-size:15px;margin-top:6px}
.jn .fd{margin-top:24px;display:grid;gap:12px}
.jn .in{width:100%;background:transparent;color:#f5f5f7;border:0;border-bottom:1px solid #3a3a3c;border-radius:0;padding:12px 0;font-family:inherit;font-size:21px;line-height:1.4;outline:0}
.jn .in::placeholder{color:#6e6e73}.jn .in:focus{border-color:#f5f5f7}.jn textarea.in{min-height:110px;resize:vertical}
.jn .chs{display:flex;flex-wrap:wrap;gap:8px}
.jn .chp{position:relative;cursor:pointer}.jn .chp input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.jn .chp span{display:inline-block;padding:10px 18px;border-radius:980px;border:1px solid #3a3a3c;font-size:16px;color:#f5f5f7;transition:.15s}
.jn .chp:hover span{border-color:#f5f5f7}.jn .chp input:checked+span{background:#f5f5f7;color:#1d1d1f;border-color:#f5f5f7}.jn .chp input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.jn .nv{display:flex;align-items:center;gap:10px;margin-top:8px}
.jn .btn2{font:inherit;font-size:15px;border:0;background:transparent;color:#8e8e93;padding:12px 8px;cursor:pointer}.jn .btn2:hover{color:#f5f5f7}
.jn .nx{padding:12px 26px;font-size:15px}.jn .nx[disabled]{opacity:.3;cursor:default}
.jsf .jn .nv{display:flex}.jn .nv{}
html:not(.jsf) .jn .nv .bk{display:none}
.jn .done{display:none;text-align:center;padding:70px 20px}.jn .done h3{font-size:34px;letter-spacing:-.03em;margin-bottom:8px}.jn .done p{color:#8e8e93}
.jn6.sent{grid-template-columns:1fr}.jn6.sent .side,.jn6.sent form{display:none}.jn6.sent .done{display:block}.jn6.sent~.small{display:none}
.jn .small{text-align:center;margin-top:18px;font-size:14px;color:#a1a1a6}
@media(max-width:820px){section.jn{padding:110px 0 80px}.jn6{grid-template-columns:1fr;border-radius:22px;margin:0 14px}.jn .side{display:none}.jn .prog{display:block}.jn6 .main{padding:34px 22px 28px}}
/* ten menu items: keep each on one line and make the floating bar a little wider */
@media(min-width:769px){nav a{white-space:nowrap}.nav .bar{max-width:1040px;gap:16px}nav{gap:clamp(10px,1.5vw,20px)}}
@media(min-width:769px) and (max-width:1000px){nav{font-size:12px}.nav .bar{padding:0 8px 0 18px}.logo img{height:14px}}

/* black footer under the dark pages */
footer.dk{background:#000;color:#8e8e93;border-top:1px solid #1c1c1e}footer.dk h4{color:#f5f5f7}footer.dk a{color:#a1a1a6}footer.dk a:hover{color:#fff}footer.dk .muted{color:#6e6e73}

/* Join card: a light runs around the border, the card breathes, the current step glows */
@property --jna{syntax:'<angle>';initial-value:0deg;inherits:false}
.jn6:before{content:"";position:absolute;inset:-1px;border-radius:27px;padding:2px;background:conic-gradient(from var(--jna),rgba(255,255,255,.08) 0 55%,#fff 80%,rgba(255,255,255,.08) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jnspin 6s linear infinite;pointer-events:none}
@keyframes jnspin{to{--jna:360deg}}
@keyframes jnbreath{0%,100%{box-shadow:0 0 40px 0 rgba(255,255,255,.06),0 0 100px 8px rgba(255,255,255,.04)}50%{box-shadow:0 0 70px 6px rgba(255,255,255,.20),0 0 130px 20px rgba(255,255,255,.09)}}
.jn .side li.cur:before{box-shadow:0 0 12px 2px rgba(255,255,255,.6);animation:jndot 2s ease-in-out infinite}
@keyframes jndot{50%{box-shadow:0 0 4px 0 rgba(255,255,255,.3)}}
.jn6 .main{border-radius:0 26px 26px 0}.jn6.sent .main{border-radius:26px}
@media(max-width:820px){.jn6 .main{border-radius:22px 22px 0 0;overflow:hidden}.jn6:before{border-radius:23px}}
@media(prefers-reduced-motion:reduce){.jn6,.jn6:before,.jn .side li.cur:before{animation:none}.jn6{box-shadow:0 0 70px 4px rgba(255,255,255,.12)}.jn6:before{background:rgba(255,255,255,.35)}}

/* Collaborations: video hero, what we can do, inquiry */
.cbh{position:relative;min-height:clamp(560px,100vh,920px);overflow:hidden;display:flex;align-items:stretch;background:#000;color:#f5f5f7;padding:0}
.cbh .cbv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;filter:saturate(.95)}
.jsf .cbh .cbv{opacity:0;transition:opacity 2s ease}.jsf .cbh .cbv.on{opacity:.95}
.cbh:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 52%,rgba(0,0,0,.4) 70%,rgba(0,0,0,.8) 88%,#000 100%);pointer-events:none}
.cbh .cbi{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:64px 22px 64px;display:flex;flex-direction:column;justify-content:flex-start;gap:0;text-shadow:0 1px 20px rgba(0,0,0,.7)}
.cbh .hin{max-width:640px;margin:auto 0}
.cbh .eb{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#d1d1d6;margin-bottom:10px}
.cbh h1{font-size:clamp(40px,5.4vw,72px);letter-spacing:-.05em;line-height:1;font-weight:700}.cbh h1 span{color:#a1a1a6}
.cbh .lead{max-width:600px;color:#d1d1d6;margin:16px 0 0;font-size:19px;line-height:1.45}
.cbh .bn{color:#fff;font-weight:600;text-shadow:0 0 14px rgba(255,255,255,.6),0 0 34px rgba(255,255,255,.28);animation:cbglow 4.5s ease-in-out infinite;white-space:nowrap}
.cbh .bn:nth-of-type(2){animation-delay:-1.5s}.cbh .bn:nth-of-type(3){animation-delay:-3s}
@keyframes cbglow{0%,100%{text-shadow:0 0 10px rgba(255,255,255,.4),0 0 26px rgba(255,255,255,.16)}50%{text-shadow:0 0 16px rgba(255,255,255,.75),0 0 40px rgba(255,255,255,.35)}}
.cbh .rot{width:min(380px,100%);flex:none;align-self:flex-end}
.cbh .lab{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#d1d1d6;display:flex;gap:14px;align-items:center;margin:0 0 12px}.cbh .lab .cnt{color:#8e8e93;letter-spacing:.1em}
.cbh .ty{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;font-weight:600;min-height:1.3em;display:flex;align-items:center}
.cbh .caret{display:inline-block;width:2px;height:1em;background:#fff;margin-left:4px;animation:cbbl 1s steps(1) infinite}@keyframes cbbl{50%{opacity:0}}
.cbh .ds{font-size:15px;color:#c7c7cc;line-height:1.4;min-height:44px;margin:6px 0 0;transition:opacity .9s ease}
.cbh .pg{height:2px;background:rgba(255,255,255,.18);margin-top:12px;border-radius:2px;overflow:hidden}.cbh .pg b{display:block;height:100%;width:0;background:#fff}
.cbh .rl{list-style:none;margin:0;padding:0;font-size:14px}.cbh .rl li{padding:3px 0}.cbh .rl b{font-weight:600;margin-right:8px}.cbh .rl span{color:#a1a1a6}
.cbh .rot.on .rl{display:none}
.cbw{background:#000;color:#f5f5f7;padding-bottom:70px;margin-top:-2px;position:relative;z-index:1}
.cbq{max-width:940px;margin:0 auto;padding:34px 22px 0}
.cbq .fc{position:relative;border-radius:24px;padding:30px;background:#060606;animation:jnbreath 4.5s ease-in-out infinite}
.cbq h2{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.cbq .fg{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}.cbq .fg .w{grid-column:1/-1}
.cbq .lb{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8e8e93;margin:14px 0 0}
.cbq .in{width:100%;background:transparent;color:#f5f5f7;border:0;border-bottom:1px solid #3a3a3c;border-radius:0;padding:12px 0;font-family:inherit;font-size:17px;line-height:1.4;outline:0;-webkit-appearance:none;appearance:none}
.cbq .in::placeholder{color:#6e6e73}.cbq .in:focus{border-color:#f5f5f7}.cbq textarea.in{min-height:90px;resize:vertical}.cbq select.in{cursor:pointer;color:#f5f5f7;background:#060606 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center;padding-right:24px}.cbq select.in option{color:#f5f5f7;background:#111}
.cbq .chs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.cbq .chp{position:relative;cursor:pointer}.cbq .chp input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.cbq .chp span{display:inline-block;padding:9px 16px;border-radius:980px;border:1px solid #3a3a3c;font-size:15px;color:#f5f5f7;transition:.15s}.cbq .chp:hover span{border-color:#f5f5f7}.cbq .chp input:checked+span{background:#f5f5f7;color:#1d1d1f;border-color:#f5f5f7}.cbq .chp input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.cbq .fc .btn{margin-top:22px;padding:14px 28px;font-size:16px}.cbq .small{margin-top:14px;font-size:14px;color:#a1a1a6}.cbq .mt{color:#8e8e93}
@media(max-width:820px){.cbh{min-height:680px}.cbh .cbv{object-position:50% 70%}.cbh .cbi{padding:24px 22px 44px}.cbh .rot{margin-top:24px}.cbh .rot{width:100%;align-self:flex-start}.cbh .lead{font-size:17px}.cbh:after{background:linear-gradient(180deg,rgba(0,0,0,.4) 0,rgba(0,0,0,.1) 30%,rgba(0,0,0,.35) 52%,rgba(0,0,0,.8) 80%,#000 100%)}.cbq .fg{grid-template-columns:1fr}.cbq .fc{padding:24px 20px}.cbw{padding-bottom:50px}}
@media(prefers-reduced-motion:reduce){.jsf .cbh .cbv{transition:none}.cbh .bn,.cbh .caret{animation:none}}

/* Collaborations inquiry: same moving glow as the Join card */
.cbq .fc:before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:2px;background:conic-gradient(from var(--jna),rgba(255,255,255,.08) 0 55%,#fff 80%,rgba(255,255,255,.08) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:jnspin 6s linear infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.cbq .fc{animation:none;box-shadow:0 0 70px 4px rgba(255,255,255,.12)}.cbq .fc:before{animation:none;background:rgba(255,255,255,.35)}}

/* gentle fade-in for videos and the shop bottle */
.jsf video[data-v]{opacity:0;transition:opacity 1.3s ease}.jsf video[data-v].on{opacity:1}
.jsf .shp .pb{opacity:0;transition:opacity 1.8s ease}.jsf .shp .pb.on{opacity:1}
@media(prefers-reduced-motion:reduce){.jsf video[data-v],.jsf .shp .pb{transition:none}}
/* home: contact block above already lists address and hours, so the footer keeps only the links */
footer.fh{padding-top:0}footer.fh .fgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin-bottom:18px}footer.fh .fgrid>div{display:contents}footer.fh h4{display:none}footer.fh .fgrid a{display:inline-block}
/* home contact block: Studio links as the third column */
.split.c3{grid-template-columns:1.1fr 1fr auto;align-items:start;gap:56px}.split.c3 h3{margin-bottom:14px}
.sl a{display:block;padding:3px 0;color:var(--mu);font-size:17px}.sl a:hover{color:var(--fg)}
@media(max-width:900px){.split.c3{grid-template-columns:1fr 1fr}.split.c3 .sl{grid-column:1/-1}}
@media(max-width:768px){.split.c3{grid-template-columns:1fr;gap:32px}.sl a{display:inline-block;margin-right:18px}}
footer.fh{padding-top:0}footer.fh .fgrid{display:none}
/* phone: compact contact block, Studio links in one swipeable row */
@media(max-width:768px){
.split.c3{gap:18px}.split.c3 h2{font-size:34px;margin-bottom:10px}.split.c3 .lead{font-size:16px;margin:0 0 10px}.split.c3 .btn{margin-top:2px}
.split.c3 h3{margin-bottom:4px;font-size:18px}.split.c3 th,.split.c3 td{padding-top:9px;padding-bottom:9px;font-size:15px}
.split.c3 .sl{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;white-space:nowrap;margin:0 -22px;padding:6px 22px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 88%,transparent);mask:linear-gradient(90deg,#000 88%,transparent)}
.split.c3 .sl::-webkit-scrollbar{display:none}.split.c3 .sl h3{display:none}.split.c3 .sl a{display:block;margin:0;font-size:15px;flex:none}}
@media(max-width:768px){section.gray:has(.split.c3){padding:48px 0 14px}footer.fh{padding:0 0 28px}}
footer.fh{border-top:0;margin-top:-1px}
/* phone: phone/email on the left, address on the right, button below */
@media(max-width:768px){.split.c3>div:first-child{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start}.split.c3>div:first-child h2{grid-column:1/-1}.split.c3>div:first-child .lead{font-size:14.5px;line-height:1.4;margin:0 0 12px}.split.c3>div:first-child .btn{grid-column:1/-1;justify-self:start}}
/* phone menu: dark glass overlay, big tidy list, dot marks the current page */
nav .nf{display:none}
@media(max-width:768px){
header nav{position:absolute;top:52px;left:0;right:0;height:calc(100dvh - 52px);max-height:none;overflow-y:auto;background:rgba(10,10,12,.985);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#f5f5f7;padding:22px 26px 24px;font-size:24px;flex-direction:column;gap:0}
header nav.open{display:flex;animation:mnin .28s ease}
header nav>a{display:flex;align-items:center;padding:7px 0;border:0;font-size:24px;letter-spacing:-.02em;color:#f5f5f7;opacity:.62}
header nav>a.on{opacity:1}header nav>a.on:after{content:"";width:7px;height:7px;border-radius:50%;background:#f5f5f7;margin-left:auto}
header nav .nf{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid #2c2c2e;font-size:13px;color:#8e8e93}
header nav .nf a{padding:0;border:0;font-size:13px;color:#8e8e93;opacity:1;display:inline}

#burger.x span:first-child{transform:translateY(3.5px) rotate(45deg)}#burger.x span:last-child{transform:translateY(-3.5px) rotate(-45deg)}#burger span{transition:transform .25s}}
@keyframes mnin{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){header nav.open{animation:none}}
.jn .prog{left:28px;right:28px;border-radius:0 0 2px 2px}
.jn .prog{top:22px;left:22px;right:22px;height:3px;border-radius:3px;overflow:hidden}.jn .prog b{border-radius:3px}


/* test: swipeable photo options on a card */
.card.ca{isolation:isolate}.card.ca::before{pointer-events:none}
.card .alts{cursor:pointer;position:absolute;inset:0;z-index:-1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.card .alts::-webkit-scrollbar{display:none}.card .alts img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;user-select:none;-webkit-user-drag:none}
.card .adots{position:absolute;left:0;right:0;top:14px;z-index:2;display:flex;justify-content:center;gap:6px;pointer-events:none}
.card .adots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45)}.card .adots i.on{background:#fff}
/* test cards: the whole-card Book link is off so the photo can be swiped/tapped */
.card.ca .cb>.btn::after{display:none}.card.ca .cb{pointer-events:none}.card.ca .cb a,.card.ca .cb button{pointer-events:auto}
.faqrow{display:flex;gap:28px;align-items:stretch}.faqrow>p{flex:1;min-width:0}
.faqv{position:relative;flex:0 0 clamp(170px,24vw,250px);margin:6px 0 0;border-radius:18px;overflow:hidden;background:#111}.faqv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){.faqrow{flex-direction:column;gap:14px}.faqv{flex:none;width:62%;aspect-ratio:9/16;align-self:flex-start}}
/* phone: the feedback block gets compact, with option chips in one swipeable row */
@media(max-width:768px){
.wh h2{font-size:27px;margin-bottom:8px}.wh .whs{font-size:15px;margin-bottom:18px}
.wh .whl{margin:14px 0 8px;font-size:11px}
.wh .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;gap:6px;margin:0 -22px;padding:2px 22px;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)}
.wh .chips::-webkit-scrollbar{display:none}
.wh .chip{flex:none;white-space:nowrap;font-size:13px;padding:6px 12px}
.wh textarea{min-height:92px;margin-top:12px;font-size:16px;padding:11px 14px}
.wh .go .btn{padding:10px 22px}.wh .whp{margin-top:10px}}

/* About: the story, in the Spotlight style (dark video backdrop, words light up as you read) */
.story{position:relative;background:#000;color:#f5f5f7;padding:0}
.story .sbg{background:#000;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story .sv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.jsf .story .sv{opacity:0;transition:opacity 2s ease}.jsf .story .sv.on{opacity:1}
.story .ssh{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.story .sw{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 clamp(22px,9vw,120px)}
.story .stop{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding-top:52px}
.story .stop .eb{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#d1d1d6;margin-bottom:14px}
.story h1{font-size:clamp(38px,7vw,76px);letter-spacing:-.04em;line-height:1.02;font-weight:700}
.story .sp{padding:clamp(36px,7vw,70px) 0;font-size:clamp(22px,3.5vw,35px);line-height:1.32;font-weight:600;letter-spacing:-.02em;margin:0}
.story .ln{display:block}.story .ln+.ln{margin-top:.8em}
.story .W{display:inline-block}.jsf .story .W{opacity:.14}
.story .sw{padding-bottom:clamp(90px,16vw,170px)}
@media(max-width:768px){.story .ssh{background:rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){.jsf .story .W{opacity:1}}

/* About on phones: opaque menu plate above the fading text; instant poster behind the video (also what shows when the phone blocks autoplay) */
@media(max-width:768px){.story .sbg::before{background-image:url(video/about-m.jpg?v=6598d3a8)}body:has(.story) .nav{background:rgba(255,255,255,.97)}}

.nw{white-space:nowrap}

/* About photo: only when the video cannot play (Low Power Mode, error, reduced motion); never together with the video */
.story .sbg::before{content:"";position:absolute;inset:0;background:url(video/about.jpg?v=eb39e241) center/cover;opacity:1;transition:opacity 1.6s ease}
.jsf .story .sbg::before{opacity:0}.jsf .story .sbg.po::before{opacity:1}

/* About: the pinned video overhangs its section by one screen; the footer slides up over it */

.story .sbw{position:absolute;inset:0;z-index:0}

/* visible keyboard focus for email sign-up fields */
.one:focus-within{outline:2px solid #0071e3;outline-offset:2px}
/* phone home hero: text on the left of the portrait like desktop, same slow rings (without the innermost one) */
@media(max-width:768px){
.hero.full.light{padding:0;min-height:104vw;align-items:center;isolation:isolate}
.hero.full.light .hbg,html.inv .hero.full.light .hbg{left:auto;right:-29vw;top:0;bottom:0;width:auto;height:100%;aspect-ratio:3/2;background-size:cover;background-position:center;mix-blend-mode:normal;-webkit-mask-image:none;mask-image:none}
.hero.full.light::after{display:block;content:"";position:absolute;top:0;left:0;right:0;bottom:0;height:auto;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.72) 0,rgba(255,255,255,.4) 42%,rgba(255,255,255,0) 66%)}
.hero.full.light::before{display:block;content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 72% 44%,transparent 0 39%,rgba(0,0,0,.26) 39% 39.5%,transparent 39.5% 54.6%,rgba(0,0,0,.18) 54.6% 55.1%,transparent 55.1% 72.8%,rgba(0,0,0,.11) 72.8% 73.3%,transparent 73.3% 93.6%,rgba(0,0,0,.06) 93.6% 94.1%,transparent 94.1%);transform-origin:72% 44%;animation:ringsBreathe 9s ease-in-out infinite}
.hero.full.light .hc{position:relative;z-index:2}
.hero.full.light .hc>*{max-width:48vw}
.hero.full.light h1 .nw{white-space:normal}
.hero.full.light h1{font-size:34px;line-height:1.06;letter-spacing:-.03em;margin:0 0 14px}
.hero.full.light .eyebrow{font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;opacity:.55}
.nx-on .hero.full.light .hnx{display:block}
.nx-on .hero.full.light .hnx::before{font-size:9px;margin-bottom:6px}
.nx-on .hero.full.light .hnx a{font-size:8.4px;line-height:1.3;display:block;width:max-content;margin:0 0 5px;border:1px solid rgba(29,29,31,.2);border-radius:11px;padding:4px 10px}
.nx-on .hero.full.light .hnx .sn,.nx-on .hero.full.light .hnx .st{display:block}
.nx-on .hero.full.light .hnx .sd{display:none}
}
@media(min-width:769px) and (max-width:1000px){
.hero.full.light::before{background:radial-gradient(circle at 76% 52%,transparent 0 46.8%,rgba(0,0,0,.22) 46.8% 47.1%,transparent 47.1% 59.8%,rgba(0,0,0,.14) 59.8% 60.1%,transparent 60.1% 75.4%,rgba(0,0,0,.08) 75.4% 75.7%,transparent 75.7% 93.6%,rgba(0,0,0,.035) 93.6% 93.9%,transparent 93.9%)}
}