/* COMPONENTS (site.css + site.js, shared by every page; home-only parts are in home.css/home.js)

Build: write _build/v4/pages/<slug>.html (the inside of <main>) and run _build/v4/build.py.
assets/v4/<slug>.css and <slug>.js are linked automatically when they exist; edit your PAGES
entry only to change head fields or add extra files. Header, skip link, floating pill and
footer come from the partials; never hand-write them. The header is fixed and transparent:
open the page with a .statement or give its first section at least 96px of top padding.
The class names below belong to this file; give page-only elements other names. Phone
internals (.layer .url .svc .msg and friends) only apply inside .phone.

Tokens. Page colors switch with [data-theme="dark"]: --bg --fg --mute --gray --line
--line-strong --surface --solid --on-solid --deep --placeholder --focus --shadow --ring.
Mock UIs use a palette that never switches: --ink --ink-deep --ui-mute --ui-line --ui-surface.
Gradients --ember --green --cobalt --espresso. Side padding --gut. Easing --ease.

Atoms. .sq / .sq.o square bullet. .g2 gray second line of a headline. .sr screen-reader only.
.sample "Sample" chip, required beside any sample number. .g Google wordmark (six <b>).
.av avatar circle.

Buttons. .pill.solid primary (dark on light pages, light on dark). .pill.white on color.
.big-cta > .ic large arrow button. Put data-cta on in-page booking buttons so the floating
pill steps aside. Every booking link goes to /sitdown (the guard fails the build otherwise).

Sections.
.statement > .cap(p) + .say.words(span > .w ...)   caption left, giant statement right;
  each .w lights up on scroll.
.band.ember|green|cobalt|espresso.on-color[data-tone="dark"] > .band-head(.band-title +
  .band-num) + .cells(.cell > .lab + p) + .band-cta + .mocks(.mock-col > .mock-note? + mock).
  Wrap bands in .stack[data-stack] > .stack-slot to get the layered 3D stack (site.js adds
  .stacked when motion is allowed and every band can dock with its lead mock whole; otherwise,
  and with JS off, they stay normal sections). Put a band's lead mock first
  in .mocks: on short phones it is the one kept whole when the band docks.
.work[data-tone="dark"] black showcase > .statement + .work-grid > .work-tile x2
  (a[data-cursor] or figure) > .work-media + .work-cap; then .work-quote; one .cursor.
  .work-media.site[data-hover-video] > .browser(.browser-bar, .browser-screen > img + video)
  + .handset. .work-media.film[data-autoplay-film] > .film-frame > video, plus
  button.media-ctl[data-film-toggle][data-name="the ..."].
.faq > h2 + .faq-list > details > summary(text + .pm) + p.
.closing > img + .wash + .gridlines + h2, then .split > .l[data-tone="dark"] + .r. Pages get both
  from partials/closing.html through the marker <!--closing title="..."--> (see build.py).

Mocks (light screens in both themes). .phone > .notch + .scr > .sbar + (.layer.on | .bp).
.bp booking page: .url .bp-head .svcs > .svc(.sel) .staff .go. SMS thread: .sms-head .msgs
> .msg.in|.msg.out .linkcard .stamp. .rcard Google review card. .bezel glass frame on color.

Behavior (site.js). [data-bind] fills from ?shop= / ?trade= / the stored choice, on any page,
from the INDUSTRIES registry (generic until the visitor picks): shop domain slug initial Trade
kind kinds noun nouns place want thing booked work fill fills full gap seatLabel busy cap
priceFrom priceNote service.N.name|dur|price staff.N staffInitial.N client.N clientInitial.N.
Add data-words to a bound statement line to keep its word-by-word reveal. #shopInput or
[data-shop-input] edits the name; [data-kind-picker] (role="radiogroup" of [role="radio"]
[data-value] chips) picks the industry. .rv fades up on screen.
[data-tone="dark"] on dark sections flips the fixed controls ([data-tone-probe]) to light.
[data-theme-toggle] switches the theme. Scroll work goes through one rAF pass. */

:root{
  --bg:#FFFFFF; --fg:#191B25; --mute:#6B6E78; --gray:#8A8C96; --line:#E4E5EA; --line-strong:#D6D7DD;
  --surface:#F4F4F6; --solid:#191B25; --on-solid:#FFFFFF; --deep:#0F1016; --placeholder:#B4B6BE; --focus:#2448D8;
  --shadow:0 30px 60px -24px rgba(25,27,37,.35), 0 8px 18px -10px rgba(25,27,37,.18);
  --ink:#191B25; --ink-deep:#0F1016; --ui-mute:#6B6E78; --ui-line:#E4E5EA; --ui-surface:#F4F4F6;
  --ember:linear-gradient(135deg,#C94600 0%,#A23000 100%);
  --green:linear-gradient(135deg,#0F6B43 0%,#073F28 100%);
  --cobalt:linear-gradient(135deg,#2448D8 0%,#12278C 100%);
  --espresso:linear-gradient(135deg,#6A3B22 0%,#2A180F 100%);
  --gut:clamp(16px,4.2vw,60px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ring:0 0 0 0 transparent;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0B0C10; --fg:#F2F2F4; --mute:#9A9DA8; --gray:#6E717C; --line:#262830; --line-strong:#363944;
  --surface:#15171D; --solid:#F2F2F4; --on-solid:#0B0C10; --deep:#08090C; --placeholder:#5F626D; --focus:#8FA8FF;
  --shadow:0 30px 60px -24px rgba(0,0,0,.7), 0 8px 18px -10px rgba(0,0,0,.5);
  --ring:0 0 0 1px rgba(255,255,255,.08);
  color-scheme:dark;
}
.theme-switching *,.theme-switching *::before,.theme-switching *::after{transition:none!important}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--bg);color:var(--fg);font-family:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sq{display:inline-block;width:10px;height:10px;border-radius:2px;background:currentColor;flex:none}
.sq.o{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.g2{color:var(--gray)}

.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap;transition:transform .2s var(--ease),background .2s}
.pill:hover{transform:translateY(-1px)}
.pill.solid{background:var(--solid);color:var(--on-solid)}
.pill.white{background:#fff;color:var(--ink);min-height:50px;padding:0 28px;font-size:16px}

.skip{position:fixed;left:12px;top:-64px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--solid);color:var(--on-solid);font-size:15px;font-weight:500;transition:top .2s var(--ease)}
.skip:focus{top:12px}
[data-on="dark"]{--fg:#FFFFFF;--solid:#FFFFFF;--on-solid:#191B25}
[data-on="light"]{--fg:#191B25;--solid:#191B25;--on-solid:#FFFFFF}
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:22px var(--gut);pointer-events:none}
.hdr > *{pointer-events:auto}
.logo{display:flex;align-items:center;min-height:44px;color:var(--fg);transition:color .3s}
.logo-lockup,.logo-mark{display:flex;align-items:center;gap:10px}
.logo-mark{display:none}
.logo-svg{display:block;height:30px;width:auto}
.logo .mk{width:44px;height:44px;border-radius:12px;background:var(--solid);color:var(--on-solid);display:grid;place-items:center;font-size:15px;font-weight:600;letter-spacing:-.04em;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.logo .wm{font-weight:600;font-size:17px;letter-spacing:-.02em}
.menu-wrap{position:absolute;left:50%;transform:translateX(-50%)}
.menu-pill{display:flex;align-items:center;border-radius:999px;background:var(--solid);color:var(--on-solid);transition:background-color .3s,color .3s}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 16px;border-radius:999px;font-size:15px;font-weight:500}
.menu-btn svg{width:16px;height:16px}
.theme-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;margin-left:-8px;border-radius:50%}
.theme-btn::before{content:"";position:absolute;inset:7px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;opacity:.3;transition:opacity .2s}
.theme-btn:hover::before{opacity:.6}
.theme-btn svg{width:16px;height:16px}
.theme-btn .i-moon,[data-theme="dark"] .theme-btn .i-sun{display:none}
[data-theme="dark"] .theme-btn .i-moon{display:block}
.menu-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);min-width:240px;display:flex;flex-direction:column;background:var(--ink);color:#fff;border-radius:20px;padding:10px;box-shadow:var(--ring),var(--shadow)}
.menu-panel[hidden]{display:none}
.menu-panel a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:12px;font-size:17px}
.menu-panel a:hover,.menu-panel a:focus-visible,.menu-panel a[aria-current="page"]{background:rgba(255,255,255,.1)}
.menu-panel .menu-book{justify-content:center;margin-top:8px;border-radius:999px;background:#fff;color:var(--ink);font-size:16px;font-weight:500}
.menu-panel .menu-book:hover,.menu-panel .menu-book:focus-visible{background:#E8E9EE}
.hdr-book{transition:transform .2s var(--ease),background-color .3s,color .3s}
.menu-pill,.hdr-book{box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.hdr::before{content:"";position:absolute;inset:0 0 -28px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .25s;background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 82%,transparent) 58%,transparent)}
.hdr:has(.logo[data-on="dark"])::before{background:linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 58%,transparent)}
.hdr.scrolled::before{opacity:1}
@media (max-width:899px){
  .menu-wrap{position:relative;left:auto;transform:none}
  .hdr .logo-lockup{display:none}
  .hdr .logo-mark{display:flex}
}
@media (max-width:380px){
  .menu-btn{padding:0 14px 0 12px}
  .hdr-book{padding:0 16px}
}

.float{white-space:nowrap;position:fixed;left:50%;bottom:18px;z-index:45;transform:translateX(-50%);display:inline-flex;align-items:center;gap:14px;min-height:50px;padding:0 6px 0 24px;border-radius:999px;background:var(--solid);color:var(--on-solid);font-size:15px;font-weight:500;box-shadow:0 18px 40px -12px rgba(25,27,37,.5);transition:opacity .3s,transform .3s var(--ease),visibility .3s,background-color .3s,color .3s}
.float .ic{width:38px;height:38px;border-radius:50%;background:var(--on-solid);color:var(--solid);display:grid;place-items:center}
.float .ic svg{width:17px;height:17px}
.float.hide{opacity:0;visibility:hidden;transform:translate(-50%,24px)}

.js .rv{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .words .w{opacity:.14;transition:opacity .7s ease}
.js .words.in .w{opacity:1}

.statement{display:grid;grid-template-columns:32% 1fr;min-height:316px;border-top:1px solid var(--line)}
.statement .cap{padding:96px var(--gut) 30px;border-right:1px solid var(--line);font-size:15px;line-height:1.4;max-width:100%}
.statement .cap p{max-width:280px;text-wrap:balance}
.statement .say{padding:84px clamp(20px,4.2vw,60px) 56px;font-size:clamp(44px,5.6vw,80px);font-weight:600;letter-spacing:-.04em;line-height:1}
.statement .say > span{display:block;text-wrap:balance}
@media (max-width:760px){
  .statement{grid-template-columns:1fr;min-height:0}
  .statement .cap{border-right:0;border-bottom:1px solid var(--line);padding:84px var(--gut) 22px}
  .statement .say{padding:28px var(--gut) 44px}
}

.band{position:relative;display:flex;flex-direction:column;min-height:100svh;color:#fff;padding:clamp(100px,9vw,120px) var(--gut) 80px;overflow:hidden;overflow:clip}
.band.ember{background:var(--ember)} .band.green{background:var(--green)} .band.cobalt{background:var(--cobalt)} .band.espresso{background:var(--espresso)}
.band-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.band-title{text-wrap:balance;font-size:clamp(40px,4.6vw,66px);font-weight:600;letter-spacing:-.04em;line-height:1.02;max-width:11ch}
@media (min-width:900px){.stack .band-title{max-width:15ch}}
.band-num{font-size:clamp(76px,10vw,150px);font-weight:600;letter-spacing:-.05em;line-height:.82}
.cells{display:grid;grid-template-columns:1fr 1fr;border:1px solid rgba(255,255,255,.42);margin-top:clamp(36px,5vw,60px)}
.cell{padding:26px 26px 34px}
.cell + .cell{border-left:1px solid rgba(255,255,255,.42)}
.cell .lab{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500}
.cell p{font-size:clamp(19px,1.75vw,25px);font-weight:500;letter-spacing:-.015em;line-height:1.3;margin-top:20px;max-width:30ch;text-wrap:pretty}
.mocks{display:flex;justify-content:center;align-items:flex-end;gap:clamp(20px,3vw,40px);margin-top:clamp(44px,6vw,72px);flex-wrap:wrap}
.mock-col{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;max-width:100%}
.mock-col > .bezel{max-width:100%}
.mock-note{font-size:13px;font-weight:500}
.bezel{padding:12px;border-radius:34px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.band-cta{position:relative;z-index:1;display:flex;justify-content:center;margin-top:clamp(44px,5vw,64px)}
/* Docking and the extra 100lvh - 100svh of bottom padding use lvh: with Safari's toolbar out that
   padding sits under the toolbar; with it collapsed the docked band still reaches the bottom edge
   (Playwright has svh = lvh, so the checks cannot see this). 80px of padding at every width keeps
   docked mocks clear of the floating Book pill. An arriving panel hinges one screen below its top,
   like a one-screen panel; a covered one (docked by its bottom edge) hinges on that edge. The slot
   clips the part of a tall tilted panel that projects past the screen edges, so the band need not. */
.stack.stacked > .stack-slot{position:sticky;top:min(0px,calc(100lvh - var(--slot-height)));overflow:hidden;overflow:clip;perspective:1400px;perspective-origin:50% 50lvh}
/* The dwell before a panel arrives is its margin-top: as a margin-bottom on the panel below, it would make the stack's end push that panel up mid-cover. */
.stack.stacked > .stack-slot + .stack-slot{margin-top:40svh}
.stack.stacked > .stack-slot.covered{perspective-origin:50% calc(100% - 50lvh)}
.stack.stacked > .stack-slot > .band{min-height:100lvh;padding-bottom:calc(80px + 100lvh - 100svh);overflow:visible;transform-origin:50% 100lvh}
.stack.stacked > .stack-slot.covered > .band{transform-origin:50% 100%}
/* fit() in site.js sets .lead-last when stacked mocks cannot fit the docked frame: the lead mock takes the bottom row (under wrap-reverse, flex-start is a row's bottom). */
.stack.stacked .mocks.lead-last{flex-wrap:wrap-reverse;align-items:flex-start}
@media (max-width:760px){
  .cells{grid-template-columns:1fr;margin-top:28px}
  .cell + .cell{border-left:0;border-top:1px solid rgba(255,255,255,.42)}
  .band-head{flex-direction:column-reverse;gap:8px}
  .band-num{font-size:64px}
  .band{padding:88px var(--gut) 56px}
  .mocks{margin-top:36px;gap:24px}
  .band-cta{margin-top:36px}
  .stack.stacked > .stack-slot + .stack-slot{margin-top:30svh}
}

.phone{position:relative;width:280px;aspect-ratio:9/19;border-radius:46px;background:var(--ink-deep);padding:9px;box-shadow:var(--ring),0 40px 80px -30px rgba(0,0,0,.55);flex:none;color:var(--ink)}
.phone .scr{position:absolute;inset:9px;border-radius:38px;overflow:hidden;background:#fff}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:25px;border-radius:14px;background:var(--ink-deep);z-index:4}
.phone .sbar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;justify-content:space-between;align-items:center;padding:4px 26px 0;font-size:12.5px;font-weight:600;z-index:3}
.phone .layer{position:absolute;inset:0;padding:52px 16px 16px;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s ease,transform .55s var(--ease),visibility .45s}
.phone .layer.on{opacity:1;visibility:visible;transform:none}
@media (max-width:760px){.phone{width:240px}.phone:has(.bp){width:280px}}

.sample{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1;padding:4px 6px;border-radius:6px;background:rgba(25,27,37,.08);color:var(--ink);vertical-align:middle}
.on-color .sample,.sample.w{background:rgba(255,255,255,.22);color:#fff}
.on-color :is(.rcard,.board,.xcard,.dcard,.phone) .sample{background:rgba(25,27,37,.08);color:var(--ink)}
.on-color :focus-visible{outline-color:#fff}
.av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:16px;flex:none}
.g{font-weight:700;font-size:15px;letter-spacing:-.02em}
.g b:nth-child(1){color:#4285F4}.g b:nth-child(2){color:#EA4335}.g b:nth-child(3){color:#FBBC05}.g b:nth-child(4){color:#4285F4}.g b:nth-child(5){color:#34A853}.g b:nth-child(6){color:#EA4335}

.phone .bp{position:absolute;inset:0;padding:50px 16px 16px;display:flex;flex-direction:column;gap:12px}
.phone .url{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ui-surface);border-radius:10px;height:30px;font-size:12px;font-weight:500;color:var(--ui-mute);padding:0 10px;overflow:hidden}
.phone .url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .url svg{width:11px;height:11px;flex:none}
.phone .bp-head{display:flex;align-items:center;gap:10px}
.phone .bp-head b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .bp-head small{display:block;font-size:12px;color:var(--ui-mute)}
.phone .bp h5{font-size:12px;font-weight:600;color:var(--ui-mute);margin-top:2px}
.phone .svc{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;border:1px solid var(--ui-line);border-radius:12px;font-size:13px}
.phone .svc b{font-weight:600;display:block}
.phone .svc small{color:var(--ui-mute);font-size:11.5px}
.phone .svc .pr{font-weight:600}
.phone .svc.sel{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.phone .svcs{display:flex;flex-direction:column;gap:7px}
.phone .staff{display:flex;gap:8px}
.phone .staff span{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--ui-mute)}
.phone .staff i{width:34px;height:34px;border-radius:50%;background:var(--ui-surface);display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--ink);font-size:13px}
.phone .staff span:first-child i{background:var(--ink);color:#fff}
.phone .bp .go{margin-top:auto;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:600;font-size:14px}

.phone .sms-head{display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0 12px;border-bottom:1px solid var(--ui-line);margin:0 -16px 12px}
.phone .sms-head .av{width:38px;height:38px;font-size:15px}
.phone .sms-head b{font-size:13px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone .msgs{display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.35}
.phone .msg{max-width:84%;padding:9px 12px;border-radius:18px}
.phone .msg.in{background:#E9E9EB;align-self:flex-start;border-bottom-left-radius:6px}
.phone .msg.out{background:#1C6EF2;color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.phone .linkcard{align-self:flex-start;width:84%;border-radius:16px;overflow:hidden;background:#E9E9EB}
.phone .linkcard .lc-top{height:62px;background:#fff;display:grid;place-items:center;border:1px solid #E9E9EB;border-radius:16px 16px 0 0}
.phone .linkcard .lc-b{padding:8px 12px;font-size:12px}
.phone .linkcard .lc-b b{display:block;font-size:12.5px}
.phone .stamp{text-align:center;font-size:11px;color:var(--ui-mute)}

.rcard{width:280px;background:#fff;color:var(--ink);border-radius:24px;padding:18px;text-align:left}
.rcard .top{display:flex;justify-content:space-between;align-items:center}
.rcard .who{display:flex;align-items:center;gap:10px;margin-top:14px}
.rcard .who .av{width:34px;height:34px;font-size:14px;background:#0F6B43}
.rcard .stars{color:#F5A623;font-size:18px;letter-spacing:2px;margin-top:10px}
.rcard p{font-size:14px;margin-top:6px}
.rcard small{color:var(--ui-mute);font-size:12px}

.work{--fg:#FFFFFF;--mute:#A6A8B0;--line:rgba(255,255,255,.14);position:relative;background:#000;color:#fff;padding-bottom:clamp(96px,11vw,170px)}
.work .statement{border-top:0}
.work-grid{display:grid;grid-template-columns:1fr 1fr;align-items:start;column-gap:clamp(40px,7.8vw,115px);max-width:calc(1024px + 2 * var(--gut));margin:clamp(56px,7vw,104px) auto 0;padding:0 var(--gut)}
.work-grid > :nth-child(2){margin-top:140px}
.work-tile{display:block;color:#fff}
.work-media{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;isolation:isolate;transition:transform .7s var(--ease)}
.work-cap{margin-top:40px;font-size:18px;line-height:22px;font-weight:400;max-width:32ch}
a.work-tile:focus-visible{outline:none}
a.work-tile:focus-visible .work-media{outline:3px solid #8FA8FF;outline-offset:4px}
@media (hover:hover) and (pointer:fine){.work-tile:hover .work-media{transform:scale(.98)}}
.work-media.site{background:linear-gradient(160deg,#EEECE8 0%,#DCD8D1 100%)}
.browser{position:absolute;left:7%;top:12%;width:86%;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -28px rgba(20,16,10,.45),0 0 0 1px rgba(20,16,10,.08)}
.browser-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#F4F3F1;border-bottom:1px solid rgba(20,16,10,.08)}
.browser-bar i{width:7px;height:7px;border-radius:50%;background:#D6D3CE;flex:none}
.browser-url{display:flex;align-items:center;gap:4px;margin:0 auto;padding:0 10px;height:16px;border-radius:5px;background:#fff;color:#55534E;font-size:10px;font-weight:500;line-height:1}
.browser-url svg{width:8px;height:8px}
.browser-screen{position:relative;aspect-ratio:16/10;background:#111}
.browser-screen img,.browser-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.browser-screen video{opacity:0;transition:opacity .4s ease}
.work-media.playing .browser-screen video{opacity:1}
.handset{position:absolute;left:5%;bottom:3%;width:26%;aspect-ratio:1170/2532;padding:5px;border-radius:22px;background:var(--ink-deep);box-shadow:0 30px 50px -24px rgba(20,16,10,.6)}
.handset img{width:100%;height:100%;border-radius:17px;object-fit:cover;object-position:top}
.work-media.film{display:grid;place-items:center;background:linear-gradient(160deg,#EEE9DF 0%,#E1D9CB 100%)}
.film-frame{width:46%;aspect-ratio:9/16;padding:6px;border-radius:30px;background:var(--ink-deep);box-shadow:0 34px 60px -26px rgba(60,40,20,.55)}
.film-frame video{width:100%;height:100%;border-radius:24px;object-fit:cover;background:#F2EEE5}
.media-ctl{position:absolute;right:14px;bottom:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 6px 18px -8px rgba(0,0,0,.45)}
.media-ctl svg{width:16px;height:16px}
.media-ctl .i-pause,.media-ctl.is-playing .i-play{display:none}
.media-ctl.is-playing .i-pause{display:block}
.work-quote{max-width:calc(1024px + 2 * var(--gut));margin:clamp(96px,10vw,160px) auto 0;padding:0 var(--gut)}
.work-quote blockquote{font-size:clamp(30px,3.6vw,52px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:20ch}
.work-quote figcaption{margin-top:20px;font-size:16px;font-weight:500;color:var(--mute)}
.cursor{position:fixed;left:0;top:0;z-index:44;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none}
.cursor i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:var(--ember);color:#fff;transform:scale(0);transition:transform .35s var(--ease)}
.cursor.on i{transform:scale(1)}
.cursor svg{width:28px;height:28px}
.has-cursor,.has-cursor *{cursor:none}
@media (hover:none),(pointer:coarse){.cursor{display:none}}
@media (max-width:760px){
  .work-grid{grid-template-columns:1fr;row-gap:56px}
  .work-grid > :nth-child(2){margin-top:0}
  .work-cap{margin-top:20px}
}

.faq{display:grid;grid-template-columns:32% 1fr;border-top:1px solid var(--line)}
.faq h2{padding:30px var(--gut);font-size:clamp(32px,3.2vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1.05;border-right:1px solid var(--line)}
.faq-list{padding:14px clamp(20px,4.2vw,60px) clamp(70px,8vw,110px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:72px;padding:16px 0;cursor:pointer;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);flex:none;position:relative;transition:transform .3s var(--ease),background .3s}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--fg);transform:translate(-50%,-50%)}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--surface)}
.faq details p{font-size:17px;color:var(--mute);padding:0 52px 24px 0;max-width:62ch}
@media (max-width:760px){
  .faq{grid-template-columns:1fr}
  .faq h2{border-right:0;border-bottom:1px solid var(--line);padding:24px var(--gut)}
  .faq-list{padding:6px var(--gut) 60px}
  .faq details p{padding-right:0}
}

.closing{position:relative;height:clamp(460px,72vh,660px);overflow:hidden;color:#fff;display:flex;align-items:flex-end;background:#9E3000}
.closing img{position:absolute;top:0;right:0;width:min(100%,900px);height:100%;object-fit:cover;object-position:50% 20%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.closing .wash{position:absolute;inset:0;background:linear-gradient(90deg,#9E3000 0%,rgba(158,48,0,.96) 34%,rgba(200,66,0,.62) 62%,rgba(240,110,20,.38) 100%),linear-gradient(0deg,rgba(110,28,0,.55),transparent 55%)}
.closing .gridlines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:65px 65px}
.closing h2{position:relative;padding:0 var(--gut) clamp(48px,7vw,80px);font-size:clamp(46px,6.2vw,92px);font-weight:600;letter-spacing:-.045em;line-height:1;max-width:16ch;text-wrap:balance;text-shadow:0 2px 30px rgba(80,20,0,.35)}
.split{display:grid;grid-template-columns:1fr 1fr}
.split .l{background:var(--ink);color:#fff;padding:clamp(48px,6vw,80px) var(--gut);display:flex;flex-direction:column;justify-content:space-between;gap:30px}
.split .l p{font-size:clamp(28px,3vw,44px);font-weight:600;letter-spacing:-.035em;line-height:1.08;max-width:16ch;text-wrap:balance}
.split .l .l-sub{font-size:17px;font-weight:400;letter-spacing:0;line-height:1.45;max-width:34ch;color:rgba(255,255,255,.72)}
.split .r{padding:clamp(48px,6vw,80px) var(--gut);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px}
.split .r small{font-size:15px;color:var(--mute)}
.big-cta{display:inline-flex;align-items:center;gap:16px;min-height:72px;padding:0 14px 0 34px;border-radius:999px;background:var(--solid);color:var(--on-solid);font-size:clamp(18px,1.7vw,23px);font-weight:500;letter-spacing:-.01em;transition:transform .2s var(--ease)}
.big-cta:hover{transform:translateY(-2px)}
.big-cta .ic{width:48px;height:48px;border-radius:50%;background:var(--on-solid);color:var(--solid);display:grid;place-items:center;flex:none}
.big-cta .ic svg{width:20px;height:20px}
@media (max-width:760px){
  .closing .wash{background:linear-gradient(0deg,rgba(120,30,0,.95) 0%,rgba(170,52,0,.8) 45%,rgba(230,100,20,.45) 100%)}
  .split{grid-template-columns:1fr}
  .big-cta{padding-left:24px;font-size:18px}
}

.foot{background:var(--deep);color:#C9CAD1;padding:clamp(56px,7vw,96px) var(--gut) 110px;border-top:1px solid rgba(255,255,255,.08);font-size:15px}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 28px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff}
.foot-nav a:hover,.foot-nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.foot-logo{display:flex;width:fit-content;align-items:center;gap:.28em;margin-top:clamp(40px,6vw,88px);color:#fff;font-size:clamp(44px,10.5vw,168px);font-weight:600;letter-spacing:-.045em;line-height:1}
.foot-logo .logo-svg{display:block;height:clamp(56px,13vw,210px);width:auto}
.foot-logo .mk{display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.62em;background:#fff;color:var(--ink);font-size:.4em;letter-spacing:-.04em;flex:none}
.foot-legal{margin-top:clamp(20px,2.4vw,32px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .words .w{opacity:1!important;transform:none!important}
}