/* Runverra Studios — preview prototype in the "Gallery × Clean" brand.
   Bone and ink, no accent colour. Geist for everything, Geist Mono for labels and indexes.
   1px hairlines on a 12-column grid. Square matte buttons. Dark (ink) only for film. */
@font-face{font-family:"Geist";src:url(../fonts/geist-latin-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(../fonts/geist-mono-latin-wght.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --bone:#F2EFE9;--linen:#E9E5DD;--ink:#111111;--graphite:#3A3936;--stone:#8A857C;--hair:#DAD4C9;
  --stone-text:#6F6A61; /* stone darkened for small text on bone (4.5:1) */
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);--ease-out:cubic-bezier(.19,1,.22,1);
  --gut:clamp(16px,4vw,56px);--maxw:1320px;color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bone);-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bone);color:var(--graphite);font:400 17px/1.55 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01"}
img,canvas,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;color:var(--ink)}
p{margin:0}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:200;background:var(--ink);color:var(--bone);padding:12px 18px;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.wrap{width:min(var(--maxw),100% - 2*var(--gut));margin-inline:auto}
h1,h2{font-weight:640;letter-spacing:-.06em;line-height:.92}
h2{font-size:clamp(44px,6.4vw,104px)}
h3{font-weight:600;letter-spacing:-.02em;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.lede{max-width:34em;font-size:clamp(17px,1.3vw,19px);color:var(--graphite)}
.rule{display:flex;justify-content:space-between;gap:16px;padding-top:12px;border-top:1px solid var(--ink);color:var(--stone-text)}
.sec{padding:clamp(90px,10vw,150px) 0}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:24px;margin:clamp(28px,4vw,56px) 0 clamp(36px,5vw,72px)}
.sec-head h2{grid-column:1/span 8}
.sec-head .lede{grid-column:9/span 4;align-self:end}
@media (max-width:900px){.sec-head h2,.sec-head .lede{grid-column:1/-1}}

/* buttons: square, matte */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border:1px solid var(--ink);border-radius:0;font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.btn-ink{background:var(--ink);color:var(--bone)}
.btn-ink:hover{background:var(--graphite);border-color:var(--graphite)}
.btn-line{background:transparent;color:var(--ink)}
.btn-line:hover{background:var(--ink);color:var(--bone)}
.btn-sm{min-height:42px;padding:0 18px;font-size:14px}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);background:transparent;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
.hd.solid{background:var(--bone);border-bottom-color:var(--hair)}
.hd.dark{background:transparent}
.hd.dark .brand img{filter:invert(1)}
.hd.dark .hd-nav a{color:var(--bone)}
.hd.dark .btn-ink{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.brand img{width:132px;height:auto}
.hd-nav{display:flex;gap:32px}
.hd-nav a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:5px;font-size:14.5px;color:var(--ink);transition:text-decoration-color .25s}
.hd-nav a:hover{text-decoration-color:currentColor}
@media (max-width:860px){.hd-nav{display:none}}
@media (max-width:420px){.brand img{width:112px}.hd{padding:12px 16px}}

/* ---------- enter screen ---------- */
.gate{display:none}
.gated .gate{display:grid;position:fixed;inset:0;z-index:2147482000;place-items:center;background:var(--bone);padding:24px;transition:opacity .8s var(--ease),visibility 0s .8s}
.gate.leaving{opacity:0;visibility:hidden}
.gated,.gated body{overflow:hidden}
.gate-grid{position:absolute;inset:0 var(--gut);display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none}
.gate-grid i,.grid12 i{border-left:1px solid var(--hair)}
.gate-grid i:last-child,.grid12 i:last-child{border-right:1px solid var(--hair)}
.gate-top{position:absolute;left:var(--gut);right:var(--gut);top:20px;display:flex;justify-content:space-between;color:var(--stone-text);border-bottom:1px solid var(--hair);padding-bottom:10px;font-variant-numeric:tabular-nums}
.gate-in{position:relative;display:grid;justify-items:center;text-align:center;width:min(720px,100%)}
.gate-mark{width:clamp(96px,16vmin,148px);height:auto}
.gm-sq{fill:var(--ink);clip-path:inset(100% 0 0 0);animation:sqin 1s .15s var(--ease-out) forwards}
.gm-r{fill:var(--bone);opacity:0;animation:fadein .5s 1.55s ease forwards}
.gm-line{fill:none;stroke:var(--bone);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s .85s var(--ease) forwards,fadeout .4s 1.8s forwards}
@keyframes sqin{to{clip-path:inset(0 0 0 0)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@keyframes fadeout{to{opacity:0}}
.gate-t{margin-top:34px;font-weight:640;letter-spacing:-.06em;line-height:.95;font-size:clamp(40px,6.4vw,84px)}
.gate-d{margin-top:16px;color:var(--graphite)}
.gate-actions{display:grid;justify-items:center;gap:6px;margin-top:36px;width:min(480px,100%);opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.gate.ready .gate-actions{opacity:1;transform:none}
.gate-main{min-height:56px;min-width:240px;font-size:16px}
.gate-quiet{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;font:400 15px/1 var(--sans);color:var(--ink);opacity:.6;cursor:pointer;text-underline-offset:5px;transition:opacity .2s}
.gate-quiet:hover,.gate-quiet:focus-visible{opacity:1;text-decoration:underline}
.gate-quiet:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.gate-hint{margin-top:18px;color:var(--stone-text)}
@media (max-width:600px){
  .gated .gate{align-items:end;padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  .gate-actions{margin-top:40px}
  .gate-main{width:auto;min-width:220px;min-height:48px;font-size:15px;padding:0 28px}
}
/* the opening screen keeps the real pointer; the crosshair cursor sits above everything else */
.gated .cursor{opacity:0!important}
.gated *{cursor:auto!important}
.gated .gate-btn{cursor:pointer!important}

/* ---------- 01 The Build ---------- */
.build{height:1100vh}
.build-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bone)}
.grid12{position:absolute;inset:0 var(--gut);display:grid;grid-template-columns:repeat(12,1fr);pointer-events:none}
.film,.film-still{position:absolute;inset:0;width:100%;height:100%;opacity:0;background:var(--ink)}
.film-still{object-fit:cover}
.film-shade{position:absolute;inset:0;background:rgba(17,17,17,.24);opacity:0;transition:opacity .6s;pointer-events:none}
.build-pin.dark .film-shade{opacity:1}
.b-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1700px;perspective-origin:50% 40%}
.b-rule{position:absolute;left:var(--gut);right:var(--gut);top:clamp(70px,9vh,86px);transition:color .4s,border-color .4s}
.b-copy{position:absolute;left:var(--gut);right:var(--gut);top:clamp(104px,15vh,150px);pointer-events:none}
/* film-stage shot counter ("02 / 04 · RECEPTION"), under the section rule, left; only shown once the film is up */
.b-shot{position:absolute;z-index:4;left:var(--gut);top:calc(clamp(70px,9vh,86px) + 34px);margin:0;color:rgba(242,239,233,.82);font-size:12px;letter-spacing:.08em;opacity:0;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.b-copy h1{font-size:clamp(52px,8.6vw,148px);max-width:9.5em}
.b-sub{margin-top:18px;font-size:clamp(17px,1.3vw,20px);color:var(--graphite);max-width:26em}

/* the fictional website */
.site{--t:0;--w:0;--ph:0;--c:0;position:relative;transform-style:preserve-3d;will-change:transform;
  --paperNow:color-mix(in srgb,var(--s-paper) calc(var(--t)*100%),#E9E5DD);
  --bgNow:color-mix(in srgb,var(--s-brandBg) calc(var(--c)*100%),var(--paperNow));
  --inkNow:color-mix(in srgb,var(--s-brandInk) calc(var(--c)*100%),var(--s-ink));
  --accNow:color-mix(in srgb,var(--s-brandAccent) calc(var(--c)*100%),var(--s-accent))}
.site-frame{position:absolute;inset:0;background:var(--bgNow);outline:1px solid var(--ink);outline-offset:0;opacity:var(--w);transform-style:preserve-3d}
.site-bar{position:absolute;left:0;right:0;top:0;height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#F7F5F1;border-bottom:1px solid var(--hair)}
.site-bar i{width:8px;height:8px;border-radius:50%;background:var(--hair)}
.site-bar span{margin:0 auto;font:400 11px/1 var(--sans);color:var(--stone-text);background:var(--linen);padding:5px 14px}
.site-page{position:absolute;left:0;right:0;top:28px;bottom:0;transform-style:preserve-3d}
.el{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--ww)*1%);height:calc(var(--hh)*1%);opacity:calc(var(--o,1)*var(--w));transform:translateZ(calc(var(--z,0)*var(--d3,0)*1px));transform-style:preserve-3d;color:var(--inkNow)}
.el.sk::before{content:"";position:absolute;inset:0;background:#DCD7CD;opacity:calc(1 - var(--tl,var(--t)))}
.tx{display:flex;align-items:center;font:400 clamp(10px,1.05vw,14px)/1.3 var(--sans)}
.tx > span{opacity:var(--tl,var(--t))}
.e-logo{font-weight:640;letter-spacing:-.03em;font-size:clamp(13px,1.4vw,21px)}
.e-logo .b{color:var(--accNow)}
.e-links{justify-content:flex-end;gap:clamp(8px,1.6vw,22px)}
.e-links > span{display:flex;gap:inherit}
.e-btn{justify-content:center}
.e-btn > span{display:grid;place-items:center;width:100%;height:100%;background:var(--accNow);color:color-mix(in srgb,var(--s-brandBg) calc(var(--c)*100%),#fff);font-size:clamp(9px,.95vw,13px);border-radius:calc(999px*(1 - var(--c)))}
.e-title{align-items:flex-start}
.e-title p{position:absolute;inset:0;margin:0}
.e-title .fa{font:500 clamp(16px,2.9vw,42px)/1.04 var(--sans);letter-spacing:-.025em;opacity:calc(var(--tl,var(--t))*(1 - var(--c)))}
.e-title .fb{font:680 clamp(22px,5vw,78px)/.9 var(--sans);letter-spacing:-.055em;opacity:var(--c);color:var(--s-brandInk)}
.e-sub{align-items:flex-start;color:color-mix(in srgb,var(--inkNow) 74%,transparent)}
.e-img{overflow:hidden;border-radius:calc(10px*(1 - var(--c)))}
.e-img img,.e-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:var(--ph);transform:scale(calc(1.08 - .08*var(--ph)))}
.e-img::after{content:"";position:absolute;inset:0;background:var(--s-brandBg);opacity:calc(var(--c)*.42)}
.e-card{overflow:hidden;border-radius:calc(8px*(1 - var(--c)))}
.e-card .cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(6px,.9vw,12px);background:rgba(17,17,17,.62);color:#F6F2EA;opacity:var(--tl,var(--t));font:400 clamp(9px,.85vw,12.5px)/1.25 var(--sans)}
.e-card .cap b{display:block;font-weight:600;font-size:clamp(11px,1.1vw,16px);letter-spacing:-.01em;margin-bottom:2px}
.site.v-m .site-frame{outline-width:1px}
.site.v-m .site-bar{height:24px}
.site.v-m .site-bar i{display:none}
.site.v-m .site-page{top:24px}
/* phone mockup: sizes come from fitM() in app.js, measured against each box, so copy never wraps under, clips or overlaps */
.site.v-m .e-title .fa{font-size:var(--fs-fa,18px)}
.site.v-m .e-title .fb{font-size:var(--fs-fb,26px)}
.site.v-m .tx{font-size:10px}
.site.v-m .e-logo{font-size:var(--fs-logo,14px);white-space:nowrap}
.site.v-m .e-sub{font-size:var(--fs-sub,10px);line-height:1.3}
.site.v-m .e-sub > span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--sub-lines,3);line-clamp:var(--sub-lines,3);overflow:hidden}
.site.v-m .e-btn > span{width:auto;padding:0 .8em;white-space:nowrap;font-size:var(--fs-hb,10px)}
.site.v-m [data-e=hbtn]{justify-content:flex-start}
.site.v-m [data-e=btn]{justify-content:flex-end}
.site.v-m [data-e=btn] > span{font-size:var(--fs-nb,10px)}
.site.v-m .e-card .cap{font-size:0;padding:5px 7px}
.site.v-m .e-card .cap b{font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the R as a matte 3D object: stacked slices, ink face, graphite sides */
.r3d{position:absolute;z-index:3;width:clamp(80px,13vmin,150px);aspect-ratio:65/81;transform-style:preserve-3d;visibility:hidden;pointer-events:none}
.r3d .rl{position:absolute;inset:0;fill:var(--graphite);opacity:var(--ro,0)}
.r3d .rl svg{width:100%;height:100%}
.r3d .rl.front{fill:var(--ink)}

/* dive through the bowl of the R: ink curtain with the counter cut out, the R in bone */
.dive{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible}
.dive-curtain{fill:var(--ink)}
.dive-r{fill:var(--bone)}

/* tier rail */
.tiers{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(20px,4vh,40px);margin:0;padding:12px 0 0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;border-top:1px solid var(--hair);transition:border-color .4s}
.tiers li{color:var(--stone-text);transition:color .4s;font-size:13px}
.tiers li span{margin-right:8px}
.tiers li.on{color:var(--ink)}
.tiers .t-bar{position:absolute;left:0;right:0;top:-1px;height:1px}
.tiers .t-bar i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(var(--tp,0))}
.build-pin.dark .tiers{border-color:rgba(242,239,233,.25)}
.build-pin.dark .tiers li{color:rgba(242,239,233,.6)}
.build-pin.dark .tiers li.on{color:var(--bone)}
.build-pin.dark .tiers .t-bar i{background:var(--bone)}
.build-pin.dark .b-rule{color:rgba(242,239,233,.7);border-color:rgba(242,239,233,.4)}
.cine{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(clamp(20px,4vh,40px) + 64px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 24px;opacity:0;pointer-events:none;color:var(--bone)}
.cine-t{grid-column:1/-1;font-weight:640;letter-spacing:-.06em;line-height:.9;font-size:clamp(48px,8.4vw,150px);color:var(--bone)}
.cine-cap{color:rgba(242,239,233,.85)}
.cine-price{pointer-events:auto;font:500 15px/1 var(--sans);color:var(--bone);text-underline-offset:5px}
.scene-pick{position:absolute;right:var(--gut);top:clamp(70px,9vh,86px);transform:translateY(calc(100% + 10px));color:var(--stone-text);transition:color .4s;text-align:right}
.scene-pick b{font-weight:500;color:var(--ink)}
.scene-pick button{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px;padding:6px 0}
.scene-pick button:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.build-pin.dark .scene-pick,.build-pin.dark .scene-pick b,.build-pin.dark .scene-pick button{color:var(--bone)}
.b-hint{position:absolute;left:50%;bottom:calc(clamp(20px,4vh,40px) + 44px);transform:translateX(-50%);color:var(--stone-text);transition:opacity .4s}
.b-scene-cap{display:none}
@media (max-width:760px){
  .build{height:1000vh}
  .b-copy{top:104px}
  .b-copy h1{font-size:clamp(46px,13.4vw,64px)}
  .b-sub{font-size:16px}
  .tiers{left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));gap:6px}
  .tiers li{font-size:11px}
  .tiers li span{display:block;margin:0 0 2px}
  .cine{left:16px;right:16px;bottom:calc(78px + env(safe-area-inset-bottom));grid-template-columns:1fr}
  .scene-pick{left:16px;right:16px;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));transform:none;text-align:right;font-size:11px}
  .cine{bottom:calc(64px + var(--spH,48px) + 18px + env(safe-area-inset-bottom));gap:8px}
  .cine-price{justify-self:start;padding:6px 0}
  .b-hint{display:none}
}

/* ---------- 02 Director's Cut ---------- */
.cut{padding-bottom:40px}
.cut-stage{position:relative;width:min(var(--maxw),100% - 2*var(--gut));margin:0 auto;min-height:clamp(540px,66vh,700px);overflow:hidden;isolation:isolate;outline:1px solid var(--ink);transition:background .6s var(--ease),color .6s}
.cut-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);z-index:-1}
.cut-inner{position:relative;padding:clamp(24px,4.4vw,60px);display:grid;gap:18px;perspective:1200px}
.cut-k{color:inherit;opacity:.7}
.cut-t{font-weight:640;letter-spacing:-.05em;line-height:.95;font-size:clamp(36px,5vw,76px);max-width:12em;color:inherit}
.cut-cards{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;transform-style:preserve-3d}
.cut-cards li{position:relative;display:grid;grid-template-rows:auto 1fr;transition:transform .8s var(--ease-out),box-shadow .8s,background .6s,border-color .6s;transform-style:preserve-3d}
.cut-cards img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cut-cards p{padding:14px 16px;font-size:15.5px}
.cut-cta{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 20px;font-size:14.5px;transition:background .6s,color .6s,border-color .6s}
.cut[data-tier="0"] .cut-stage{background:#FBFAF7;color:var(--ink)}
.cut[data-tier="0"] .cut-cards li{background:#fff;border:1px solid var(--hair)}
.cut[data-tier="0"] .cut-cta{background:var(--ink);color:var(--bone)}
.cut[data-tier="2"] .cut-stage{background:var(--linen);color:var(--ink)}
.cut[data-tier="2"] .cut-cards{transform:rotateX(calc(16deg + var(--py,0)*6deg)) rotateY(calc(var(--px,0)*10deg))}
.cut[data-tier="2"] .cut-cards li{background:var(--bone);border:1px solid var(--ink);box-shadow:0 30px 50px -20px rgba(17,17,17,.28)}
.cut[data-tier="2"] .cut-cards li:nth-child(1){transform:translateZ(20px) translateY(16px)}
.cut[data-tier="2"] .cut-cards li:nth-child(2){transform:translateZ(80px) translateY(4px)}
.cut[data-tier="2"] .cut-cards li:nth-child(3){transform:translateZ(140px) translateY(-8px)}
.cut[data-tier="2"] .cut-cta{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cut[data-tier="3"] .cut-stage{background:var(--ink);color:var(--bone)}
.cut[data-tier="3"] .cut-film{opacity:.72}
.cut[data-tier="3"] .cut-inner{min-height:clamp(540px,66vh,700px);align-content:end;background:rgba(17,17,17,.38)}
.cut[data-tier="3"] .cut-t{font-size:clamp(46px,7vw,112px);color:var(--bone)}
.cut[data-tier="3"] .cut-cards{grid-template-columns:repeat(3,auto);justify-content:start;gap:28px}
.cut[data-tier="3"] .cut-cards li{border-left:1px solid rgba(242,239,233,.5)}
.cut[data-tier="3"] .cut-cards img{display:none}
.cut[data-tier="3"] .cut-cards p{padding:2px 0 2px 14px;font-size:14px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.cut[data-tier="3"] .cut-cta{background:transparent;color:var(--bone);border:1px solid var(--bone)}
/* Custom cut: the business's own colours, type and layout */
.cut[data-tier="1"] .cut-stage{background:var(--b-bg);color:var(--b-ink)}
.cut[data-tier="1"] .cut-inner{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(20px,4vw,56px);align-items:start}
.cut[data-tier="1"] .cut-k,.cut[data-tier="1"] .cut-t,.cut[data-tier="1"] .cut-cta{grid-column:1}
.cut[data-tier="1"] .cut-cards{grid-column:2;grid-row:1/span 4;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:12px;margin:0}
.cut[data-tier="1"] .cut-cards li:first-child{grid-row:span 2}
.cut[data-tier="1"] .cut-cards li:first-child img{aspect-ratio:3/4;height:100%}
.cut[data-tier="1"] .cut-cards li{background:transparent}
.cut[data-tier="1"] .cut-cards p{padding:10px 0 0;font-family:var(--b-font);font-size:15px}
.cut[data-tier="1"] .cut-t{font-family:var(--b-font);font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--b-ink)}
.cut[data-tier="1"] .cut-k{color:var(--b-acc);opacity:1}
.cut[data-tier="1"] .cut-cta{background:var(--b-acc);color:var(--b-bg);border:0;font-family:var(--b-font)}
@media (max-width:760px){.cut[data-tier="1"] .cut-inner{grid-template-columns:1fr}.cut[data-tier="1"] .cut-cards{grid-column:1;grid-row:auto;grid-template-columns:1fr 1fr}.cut[data-tier="1"] .cut-cards li{grid-template-columns:1fr}.cut[data-tier="1"] .cut-cards li:first-child{grid-column:1/-1;grid-row:auto}.cut[data-tier="1"] .cut-cards li:first-child img{aspect-ratio:4/3}}
.fader button{font-size:14px}
@media (max-width:420px){.fader button .mono{display:none}}
.skip-intro{display:inline-block;margin-top:8px;padding:4px 0;color:inherit;text-decoration:underline;text-underline-offset:4px;pointer-events:auto}
.build-pin.dark .skip-intro{color:var(--bone)}
.scene-n{color:var(--ink);margin-left:6px}
.build-pin.dark .scene-n{color:var(--bone)}
.cut-stage.switching .cut-inner{animation:cutin .6s var(--ease-out)}
@keyframes cutin{from{opacity:0;transform:translateY(12px)}}
.fader-dock{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom));z-index:20;display:grid;justify-items:center;margin-top:-28px;padding-bottom:6px}
.fader{position:relative;display:grid;grid-template-columns:repeat(4,1fr);width:min(620px,calc(100% - 24px));padding:4px;background:var(--bone);border:1px solid var(--ink)}
.fader-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4);background:var(--ink);transform:translateX(calc(var(--ft,0)*100%));transition:transform .6s var(--ease-out)}
.fader button{all:unset;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;cursor:pointer;font:500 15px/1 var(--sans);color:var(--ink);transition:color .35s}
.fader button .mono{font-size:10.5px;opacity:.7}
.fader button[aria-checked=true]{color:var(--bone)}
.fader button:focus-visible{outline:1px solid var(--ink);outline-offset:-6px}
.fader button[aria-checked=true]:focus-visible{outline-color:var(--bone)}
.cut-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:40px;font-size:18px}
.cut-foot strong{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .cut-cards{grid-template-columns:1fr;gap:10px}
  .cut-cards li{grid-template-columns:96px 1fr;grid-template-rows:auto}
  .cut-cards img{aspect-ratio:1;height:100%}
  .cut[data-tier="2"] .cut-cards li:nth-child(n){transform:translateZ(calc(var(--i)*36px))}
  .cut[data-tier="3"] .cut-cards{grid-template-columns:1fr;gap:10px}
  .cut-stage{min-height:0}
  .cut[data-tier="3"] .cut-inner{min-height:76vh}
}

/* ---------- section helpers ---------- */
.sec-tight{padding-top:clamp(36px,5vw,64px)}
.sec-more{margin-top:28px}
.sec-more a:not(.btn),.card-more,.ind-link,.empty-link{font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.rule-gap{margin-top:clamp(56px,7vw,96px);margin-bottom:24px}
.tel{font-family:var(--mono);font-size:13px;color:var(--ink);white-space:nowrap;letter-spacing:.04em}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0}
.ticks li{padding:9px 0 9px 22px;border-top:1px solid var(--hair);position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;background:var(--ink)}
.btn-xs{min-height:34px;padding:0 12px;font-size:13px}
.btn-paper{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn-paper:hover{background:#fff}

/* ---------- menu (phones) + page wipe ---------- */
.hd-r{display:flex;align-items:center;gap:10px}
.menu-btn{all:unset;display:none;cursor:pointer;min-height:42px;padding:0 12px;border:1px solid var(--ink);color:var(--ink)}
.hd.dark .menu-btn{border-color:var(--bone);color:var(--bone)}
.hd-nav a[aria-current]{text-decoration-color:currentColor}
@media (max-width:860px){.menu-btn{display:inline-flex;align-items:center}}
.mnav{position:fixed;inset:0;z-index:59;background:var(--bone);padding:96px var(--gut) 40px;display:grid;align-content:start;gap:0}
.mnav[hidden]{display:none}
.mnav a{font-weight:640;letter-spacing:-.05em;font-size:clamp(40px,11vw,64px);line-height:1.1;color:var(--ink);text-decoration:none;padding:8px 0;border-bottom:1px solid var(--hair)}
.menu-open .hd{background:var(--bone);border-bottom-color:var(--hair)}
.menu-open .hd .brand img{filter:none}.menu-open .hd .menu-btn{color:var(--ink);border-color:var(--ink)}
.wipe{position:fixed;inset:0;z-index:2147481000;background:var(--bone);display:grid;place-items:center;pointer-events:none;clip-path:inset(100% 0 0 0);border-top:1px solid var(--ink)}
.wipe img{width:48px;height:48px}
.wipe.in{clip-path:inset(0 0 0 0);transition:clip-path .42s var(--ease)}
.wipe.out{clip-path:inset(0 0 100% 0);transition:clip-path .5s var(--ease)}

/* ---------- Work: bold name index ---------- */
.w-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.w-tabs button{all:unset;cursor:pointer;min-height:36px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--hair);color:var(--graphite)}
.w-tabs button[aria-selected=true]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.w-tabs button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.w-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.w-li{border-bottom:1px solid var(--hair)}
.w-row{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:clamp(14px,1.6vw,22px) 0;transition:padding .5s var(--ease-out),color .3s}
.w-row:hover{padding-left:12px}
.w-row:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}
.w-name{font-weight:640;letter-spacing:-.055em;line-height:.95;font-size:clamp(36px,6vw,92px);color:var(--ink)}
.w-meta{color:var(--stone-text);white-space:nowrap}
.w-inline{padding:4px 0 22px;display:grid;gap:12px}
.w-inline .mat{padding:10px}
.w-inline video{width:100%;aspect-ratio:360/780;max-height:70vh;object-fit:cover;background:var(--linen)}
.w-inline .mono{color:var(--stone-text)}
.w-empty{padding:28px 0;border-bottom:1px solid var(--hair);font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.w-empty a{font-size:16px;font-weight:500;margin-left:10px;text-underline-offset:5px}
.w-featured{margin-bottom:40px}
.mat{display:block;padding:clamp(10px,1.2vw,16px);background:#F7F5F1;outline:1px solid var(--hair)}
.wfloat{position:fixed;left:0;top:0;z-index:55;width:min(420px,32vw);pointer-events:none;opacity:0;transform:translate3d(-999px,0,0);transition:opacity .3s;outline-color:var(--ink)}
.wfloat.on{opacity:1}
.wfloat video{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--linen);display:block}
@media (hover:none),(max-width:760px){.wfloat{display:none}}
.cpanel{position:fixed;inset:0;z-index:2147480000;background:rgba(242,239,233,.97);display:grid;place-items:center;padding:clamp(16px,4vw,56px);opacity:0;transition:opacity .35s var(--ease)}
.cpanel.on{opacity:1}
.cp-in{position:relative;width:min(1240px,100%);display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,3vw,44px);align-items:center}
.cp-film video{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--linen);display:block}
.cp-side{display:grid;gap:14px;align-content:start}
.cp-side h2{font-size:clamp(40px,5vw,84px)}
.cp-meta{color:var(--stone-text)}
.cp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.cp-close{all:unset;cursor:pointer;position:absolute;right:0;top:-48px;min-height:40px;padding:0 14px;border:1px solid var(--ink);display:inline-flex;align-items:center;color:var(--ink)}
.cp-close:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.cp-open,.cp-open body{overflow:hidden}
@media (max-width:860px){.cp-in{grid-template-columns:1fr}.cp-close{top:-44px}}

/* ---------- What we do: identical cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{display:grid;grid-template-rows:auto 220px auto 1fr auto;gap:14px;padding:clamp(18px,2vw,26px);background:#F7F5F1;outline:1px solid var(--hair);min-width:0}
.card-k{color:var(--stone-text)}
.card-k span{color:var(--ink);margin-right:8px}
.card-vis{height:220px;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);display:grid;align-content:center;gap:10px;padding:12px 0;position:relative}
.card h3{font-size:clamp(20px,1.6vw,24px);min-height:2.3em}
.card-p{font-size:15.5px}
.card-more{align-self:end;justify-self:start;font-size:15px}
.vis-cap{color:var(--stone-text)}
.beat{width:100%;height:120px}
.beat path{fill:none;stroke:var(--ink);stroke-width:1.25;vector-effect:non-scaling-stroke}
.lang-stage{min-height:96px;display:flex;align-items:center;overflow:hidden;transition:transform .9s var(--ease-out)}
.lang-line{font-weight:640;letter-spacing:-.04em;font-size:clamp(26px,2.2vw,34px);line-height:1.05;color:var(--ink);transition:opacity .3s;width:100%}
.lang-line.out{opacity:0}
.lang-line:lang(zh-Hant),.lang-line:lang(zh-Hans),.lang-line:lang(ko),.lang-line:lang(pa),.lang-line:lang(fa){font-family:system-ui,"Noto Sans",sans-serif;font-weight:700;letter-spacing:0}
.lang-stage.rtl{transform:scaleX(-1)}
.lang-stage.rtl .lang-line{transform:scaleX(-1);text-align:right}
.lang-chips{display:flex;flex-wrap:wrap;gap:5px}
.lang-chips button{all:unset;cursor:pointer;font-size:12px;min-height:28px;padding:0 8px;display:inline-flex;align-items:center;border:1px solid var(--hair);color:var(--graphite)}
.lang-chips button[aria-pressed=true]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.lang-chips button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.vis-store{grid-template-columns:1fr 1fr;gap:10px;align-content:stretch}
.toy-bag,.toy-cal{padding:10px;background:var(--bone);outline:1px solid var(--hair);display:grid;gap:8px;align-content:start}
.toy-item{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink)}
.toy-item img{width:44px;height:44px;object-fit:cover}
.toy-count{color:var(--stone-text)}
.toy-count span{display:inline-block;color:var(--ink)}
.toy-count span.bump{animation:bump .4s var(--ease-out)}
@keyframes bump{40%{transform:translateY(-4px)}}
.toy-cal{grid-template-columns:1fr 1fr;gap:5px}
.toy-day{grid-column:1/-1;color:var(--stone-text)}
.slot{all:unset;cursor:pointer;text-align:center;min-height:34px;border:1px solid var(--hair);font-size:13px;color:var(--ink);transition:background .3s,color .3s}
.slot.booked{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.slot:focus-visible,.toy-add:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.vis-vision{align-content:stretch}
.call{background:var(--ink);color:var(--bone);padding:12px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;height:100%;min-height:0}
.call-top{display:flex;align-items:center;gap:8px;color:rgba(242,239,233,.75);font-size:11px}
.ph-dot{width:7px;height:7px;background:var(--bone);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.call-tx{list-style:none;margin:0;padding:0;display:grid;gap:5px;align-content:start;overflow:auto;font-size:12.5px;line-height:1.35;min-height:0}
.call-tx li{padding:6px 8px;max-width:88%;background:#26251F;animation:pop .35s var(--ease-out)}
.call-tx li.v{justify-self:end;background:var(--bone);color:var(--ink)}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.call-answer{justify-self:start;background:var(--bone);color:var(--ink);border-color:var(--bone)}
.chain{list-style:none;margin:0;padding:0;display:grid}
.chain li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--hair);color:var(--stone-text);animation:chain 5s infinite}
.chain li:last-child{border-bottom:0}
.chain li::after{content:"\2192"}
.chain li:last-child::after{content:"\2713"}
.chain li:nth-child(2){animation-delay:1s}.chain li:nth-child(3){animation-delay:2s}.chain li:nth-child(4){animation-delay:3s}.chain li:nth-child(5){animation-delay:4s}
@keyframes chain{0%,16%{color:var(--ink)}26%,100%{color:var(--stone-text)}}
.fake-field{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 0 0 14px;border:1px solid var(--ink);background:var(--bone);color:var(--stone-text);text-decoration:none}
.fake-field b{display:inline-flex;align-items:center;align-self:stretch;padding:0 14px;background:var(--ink);color:var(--bone);font-weight:500;font-size:14px}
.fake-field:hover b{background:var(--graphite)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards{grid-template-columns:1fr}}

/* ---------- How it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.steps li{position:relative;padding:22px 24px 0 0;display:grid;gap:10px;align-content:start}
.steps li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--ink)}
.steps .mono{color:var(--stone-text)}
.steps h3{font-weight:640;letter-spacing:-.05em;font-size:clamp(28px,2.8vw,42px);line-height:.95}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;row-gap:36px}}
@media (max-width:520px){.steps{grid-template-columns:1fr;border-top:0;border-left:1px solid var(--ink);padding-left:22px}.steps li{padding:0 0 26px}.steps li::before{left:-26px;top:6px}}

/* ---------- industries strip, proof, CTA ---------- */
.ind-strip{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.ind-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:26px 0}
.ind-row .mono{color:var(--stone-text)}
.ind-line{font-weight:600;letter-spacing:-.02em;font-size:clamp(18px,1.7vw,24px);color:var(--ink)}
@media (max-width:760px){.ind-row{grid-template-columns:1fr;gap:10px}}
.proof{padding:40px 0}.proof[hidden]{display:none}
.proof-line{margin-top:16px;color:var(--stone-text)}
.cta-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(28px,4vw,56px);align-items:end}
.cta-grid h2{grid-column:1/span 7;font-size:clamp(56px,8vw,132px)}
.cta-side{grid-column:9/span 4;display:grid;gap:22px;justify-items:start}
@media (max-width:900px){.cta-grid h2,.cta-side{grid-column:1/-1}}

/* ---------- subpages ---------- */
.phead{padding:clamp(96px,12vw,140px) 0 0}
.phead h1{margin-top:clamp(24px,3vw,40px);font-size:clamp(52px,8.4vw,140px);max-width:11em}
.phead .rule a{color:inherit}
.cur-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:28px}
.cur{display:inline-flex;border:1px solid var(--ink)}
.cur button{all:unset;cursor:pointer;min-height:36px;padding:0 12px;display:inline-flex;align-items:center;color:var(--ink)}
.cur button[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.cur button:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.tiers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--hair)}
.tier{display:grid;grid-template-rows:auto auto auto auto 1fr auto;gap:12px;padding:22px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);scroll-margin-top:90px}
.tier h2{font-size:clamp(34px,3.2vw,52px)}
.tier .mono{color:var(--stone-text)}
.tier-price{font-weight:600;letter-spacing:-.02em;font-size:clamp(22px,1.8vw,28px);color:var(--ink)}
.tier-price small{font-size:14px;font-weight:400;color:var(--graphite)}
.tier .btn{justify-self:start}
.tier-ink{background:var(--ink);color:var(--bone)}
.tier-ink h2,.tier-ink .tier-price{color:var(--bone)}
.tier-ink .mono{color:rgba(242,239,233,.7)}
.tier-ink .ticks li{border-color:rgba(242,239,233,.25)}.tier-ink .ticks li::before{background:var(--bone)}
@media (max-width:1000px){.tiers-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiers-grid{grid-template-columns:1fr}}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.extras > div{display:grid;gap:8px;padding:20px;background:#F7F5F1;outline:1px solid var(--hair)}
@media (max-width:760px){.extras{grid-template-columns:1fr}}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;font-size:clamp(17px,1.4vw,20px);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 18px;max-width:46em}
.anchors{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px}
.anchors a{min-height:36px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--hair);color:var(--graphite);text-decoration:none}
.anchors a:hover{border-color:var(--ink);color:var(--ink)}
.svc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(28px,3.4vw,48px) 0;border-top:1px solid var(--ink);scroll-margin-top:90px}
.svc > .mono{grid-column:1/span 3;color:var(--stone-text)}
.svc > div{grid-column:5/span 7;display:grid;gap:16px;justify-items:start}
.svc h2{font-size:clamp(34px,4vw,64px)}
.svc-actions{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.svc > .mono,.svc > div{grid-column:1/-1}}
.ind-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 24px}
.ind-wall a{display:grid;gap:8px;text-decoration:none;color:inherit}
.ind-wall img{width:100%;aspect-ratio:16/9;object-fit:cover}
.ind-n{font-weight:640;letter-spacing:-.04em;font-size:clamp(24px,2vw,32px);color:var(--ink);line-height:1}
.ind-p{font-size:15px}
.ind-i{color:var(--stone-text)}
.ind-wall a:hover .mat{outline-color:var(--ink)}
@media (max-width:900px){.ind-wall{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ind-wall{grid-template-columns:1fr}}
.about{display:grid;gap:clamp(48px,6vw,90px)}
.about-lede .lede{font-size:clamp(20px,1.8vw,26px);max-width:30em;color:var(--ink)}
.principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink)}
.principles li{padding-top:20px;display:grid;gap:10px;align-content:start}
.principles .mono{color:var(--stone-text)}
@media (max-width:760px){.principles{grid-template-columns:1fr}}
.case{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(20px,3vw,44px);align-items:start}
.case-film video{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--linen);display:block}
.case-side{display:grid;gap:16px;justify-items:start}
.case-side > .mono,.case-note{color:var(--stone-text)}
.case-note{text-transform:none;letter-spacing:0;font-size:12.5px}
@media (max-width:860px){.case{grid-template-columns:1fr}.case-film video{aspect-ratio:auto}}
.contact{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,3fr);gap:clamp(28px,5vw,80px);align-items:start}
.contact-lede{grid-column:1/-1;max-width:40em;color:var(--ink)}
.contact .inq{grid-column:1}
.contact-side{display:grid;gap:8px;justify-items:start;position:sticky;top:100px;color:var(--stone-text);font-size:12px;padding-top:6px;border-top:1px solid var(--hair)}
.contact-side a{color:var(--ink)}
.btn-xs{min-height:34px;padding:0 12px;font-size:12.5px}
.contact-side p{margin:0}
.tel-big{font-weight:640;letter-spacing:-.04em;font-size:clamp(28px,3vw,44px);color:var(--ink)}
@media (max-width:860px){.contact{grid-template-columns:1fr}.contact-side{position:static}}
.inq{display:grid;gap:18px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.row2{grid-template-columns:1fr}}
.fld{display:grid;gap:8px;min-width:0}
.fld > span{color:var(--stone-text)}
.fld input,.fld select,.fld textarea,.sites input{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--hair);border-radius:0;background:#F7F5F1;color:var(--ink);font:400 16px/1.4 var(--sans)}
.fld textarea{padding:12px 14px;min-height:110px;resize:vertical}
.fld input[type=file]{padding:12px 14px}
.fld input:focus,.fld select:focus,.fld textarea:focus,.sites input:focus{outline:none;border-color:var(--ink)}
.fld input[aria-invalid=true]{border-color:var(--ink);border-width:2px}
.kinds,.sites{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.sites{display:block}
.kinds legend,.sites legend{padding:0;margin-bottom:10px;color:var(--stone-text)}
.kinds label{position:relative}
.kinds input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kinds span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--hair);font-size:14.5px;color:var(--ink)}
.kinds input:checked + span{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.kinds input:focus-visible + span{outline:1px solid var(--ink);outline-offset:2px}
.inq .btn{justify-self:start}
.form-note{color:var(--stone-text);text-transform:none;letter-spacing:0;font-size:12.5px}
.form-note.ok{color:var(--ink)}

/* ---------- footer ---------- */
.ft{padding:clamp(56px,7vw,96px) 0 calc(76px + env(safe-area-inset-bottom));border-top:1px solid var(--ink)}
.ft-cols{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:24px}
.ft-brand{display:grid;gap:16px;justify-items:start;align-content:start}
.ft-brand img{width:132px;height:auto}
.ft-brand p{max-width:22em}
.ft-h{color:var(--stone-text);margin-bottom:12px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft ul a{color:var(--ink);text-decoration:none;font-size:15px}
.ft ul a:hover{text-decoration:underline;text-underline-offset:4px}
.ft-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 30px;margin-top:48px;padding-top:16px;border-top:1px solid var(--hair);color:var(--stone-text)}
.ft-lang{display:flex;flex-wrap:wrap;gap:4px}
.ft-lang span{min-width:30px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--hair);padding:0 6px;color:var(--stone-text);text-transform:none}
.ft-lang span[aria-current]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.ft-legal{display:flex;gap:16px}
.ft-legal a{color:var(--stone-text)}
@media (max-width:1000px){.ft-cols{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media (max-width:420px){.ft-cols{grid-template-columns:1fr}}

/* ---------- sound toggle + crosshair cursor ---------- */
.snd{all:unset;position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:var(--bone);border:1px solid var(--ink);color:var(--ink);cursor:pointer}
.snd[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.snd:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
body.in-cut .snd,body.in-build .snd{bottom:calc(84px + env(safe-area-inset-bottom))}
@media (min-width:761px){body.in-build .snd{bottom:calc(16px + env(safe-area-inset-bottom))}}
.cursor{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;opacity:0;mix-blend-mode:difference;transition:opacity .3s}
.has-cursor .cursor{opacity:1}
.c-h,.c-v{position:absolute;background:#fff}
.c-h{width:21px;height:1px;margin:0 0 0 -10px}
.c-v{width:1px;height:21px;margin:-10px 0 0 0}
.c-label{position:absolute;left:14px;top:12px;padding:5px 7px;background:#fff;color:#000;white-space:nowrap;opacity:0;transition:opacity .2s;font-size:10.5px}
.cursor.is-label .c-label{opacity:1}
.cursor.is-link .c-h,.cursor.is-link .c-v{transform:rotate(45deg)}
.has-cursor body,.has-cursor a,.has-cursor button,.has-cursor label{cursor:none}
.has-cursor input,.has-cursor select,.has-cursor textarea{cursor:auto}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- reduced motion / Save-Data ---------- */
.still *,.still *::before,.still *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.2s!important}
.still .gm-sq{clip-path:none}.still .gm-r{opacity:1}.still .gm-line{display:none}
@media (max-width:760px){.cut[data-tier="3"] .cut-cards li{grid-template-columns:1fr}}
/* ---------- industries list + cinematic strips ---------- */
.ind-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ind-list a{display:grid;grid-template-columns:44px minmax(0,1.2fr) minmax(0,2fr) 20px;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit}
.ind-list a:hover .il-n{text-decoration:underline;text-underline-offset:4px}
.ind-list .mono{color:var(--stone-text)}
.il-n{font-weight:600;color:var(--ink)}
.il-p{font-size:15px}
@media (max-width:640px){.ind-list a{grid-template-columns:34px 1fr 16px}.il-p{grid-column:2;grid-row:2}}
.cine-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,5vw,64px)}
.cine-row{display:grid;gap:14px;border-top:1px solid var(--ink);padding-top:14px}
.cine-name{font-weight:640;letter-spacing:-.04em;font-size:clamp(26px,2.6vw,40px);color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.cine-name .mono,.cine-name small{color:var(--stone-text);letter-spacing:.06em;font-weight:500}
.cine-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.cine-shots figure{margin:0;padding:8px}
.cine-shots video{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--ink);display:block}
.cine-shots figcaption{margin-top:8px;color:var(--stone-text)}
@media (max-width:760px){.cine-shots{grid-template-columns:1fr}}
.tier-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.tier-film{color:var(--ink);text-underline-offset:4px;font-weight:500;margin-top:auto;justify-self:start}
.tier-ink .tier-film{color:var(--bone)}
.b-ans{margin-top:14px;max-width:36em;font-size:14.5px;line-height:1.5;color:var(--stone-text)}
@media (max-width:760px){.b-ans{font-size:13.5px}}
/* ---------- answer blocks (quotable, near the top of key pages) ---------- */
.answer-box{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:22px 0 26px;border-bottom:1px solid var(--hair);margin-bottom:clamp(28px,4vw,48px)}
.answer-box h2{grid-column:1/span 4;font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;line-height:1.15;font-weight:600}
.answer-box .answer{grid-column:6/span 7;font-size:clamp(17px,1.35vw,20px);color:var(--ink);line-height:1.5}
@media (max-width:760px){.answer-box h2,.answer-box .answer{grid-column:1/-1}}
/* ---------- about ---------- */
.about2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.about-id{grid-column:1/span 4;display:flex;align-items:center;gap:16px;align-self:start}
.about-id img{width:80px;height:80px;border-radius:50%;object-fit:cover;outline:1px solid var(--hair);outline-offset:3px;background:#111}
.about-id p{display:grid;gap:2px}
.about-id b{font-weight:600;color:var(--ink);font-size:18px}
.about-id .mono{color:var(--stone-text)}
.about-text{grid-column:6/span 7;display:grid;gap:18px;font-size:clamp(17px,1.3vw,19px)}
.about-text p:first-child{font-size:clamp(20px,1.8vw,26px);color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.about-facts{grid-column:1/-1;list-style:none;margin:clamp(24px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.about-facts li{padding:18px 20px 0 0;display:grid;gap:8px;align-content:start}
.about-facts .mono{color:var(--stone-text)}
.about-facts h3{font-size:clamp(19px,1.6vw,23px)}
.about-credit{grid-column:1/-1;margin:8px 0 0;color:var(--stone-text);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:900px){.about-id,.about-text{grid-column:1/-1}.about-facts{grid-template-columns:1fr 1fr;row-gap:24px}}
@media (max-width:480px){.about-facts{grid-template-columns:1fr}}
/* ---------- industry pages + check + legal ---------- */
.ind-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,44px);align-items:start;margin-bottom:clamp(36px,5vw,64px)}
.ind-hero img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.ind-hero .cap{margin-top:10px}
.needs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--ink)}
.needs li{padding-top:18px;display:grid;gap:8px;align-content:start}
.needs .mono{color:var(--stone-text)}
@media (max-width:860px){.ind-hero,.needs{grid-template-columns:1fr}}
.check-big{display:flex;flex-wrap:wrap;gap:10px;max-width:760px}
.check-big input{flex:1 1 260px;min-height:56px;padding:0 16px;border:1px solid var(--ink);border-radius:0;background:var(--bone);color:var(--ink);font:400 18px var(--sans)}
.check-big input:focus{outline:2px solid var(--ink);outline-offset:2px}
.legal{max-width:46em}
.legal h2{font-size:clamp(22px,2vw,28px);margin:32px 0 10px;letter-spacing:-.02em}
.legal h3{margin:22px 0 8px}
.legal p,.legal li{margin:0 0 10px}
.legal ul,.legal ol{padding-left:20px}
.legal table{width:100%;border-collapse:collapse;margin:12px 0;font-size:15px}
.legal th,.legal td{text-align:left;padding:8px 10px 8px 0;border-bottom:1px solid var(--hair);vertical-align:top}
.legal details{border-top:1px solid var(--hair);padding:10px 0}
.legal summary{cursor:pointer;font-weight:600;color:var(--ink)}
.crumbs{color:var(--stone-text)}
.crumbs a{color:inherit}
/* v3.2: the headline never runs under the scene line (top right); on phones the sound button sits above the scene line */
@media (min-width:761px){.b-copy{right:auto;width:min(58vw,1040px)}.b-copy h1{font-size:clamp(52px,7.4vw,140px)}}
/* phones, in the hero: the fixed button steps aside and its twin inside the pinned frame (.b-snd) sits bottom-left on the
   skip-intro line. It is positioned in the same box as the tier row and scene line, so iOS Safari's toolbar can't shift it onto them. */
.b-snd{display:none}
@media (max-width:760px){
  body.in-build .snd{visibility:hidden}
  .b-snd{all:unset;position:absolute;z-index:6;left:16px;bottom:calc(64px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;min-height:30px;padding:0 10px;font-size:11px;background:var(--bone);border:1px solid var(--ink);color:var(--ink);cursor:pointer;pointer-events:auto;box-sizing:border-box}
  .b-snd[aria-pressed=true]{background:var(--ink);color:var(--bone)}
  .b-snd:focus-visible{outline:1px solid currentColor;outline-offset:3px}
  .b-snd::after{content:"";position:absolute;inset:-8px -4px}
}

/* ---------- v5 site round ---------- */
/* one currency everywhere; the small switch (footer, /websites/) */
.cur-line,.ft-cur{margin:0;color:var(--stone-text);font-size:12px;letter-spacing:.06em}
.cur-line b,.ft-cur b{color:var(--ink);font-weight:500}
.cur-line button,.ft-cur button{all:unset;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.cur-line button:focus-visible,.ft-cur button:focus-visible{outline:1px solid currentColor;outline-offset:2px}
/* Director's Cut: a quiet link instead of a demo button */
.cut-link{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
/* /portfolio/ */
.pf-tabs{position:sticky;top:64px;z-index:5;background:var(--bone);padding:10px 0;margin:18px 0 0}
.pf-sec[hidden]{display:none!important}
.pf-h{font-weight:640;letter-spacing:-.04em;font-size:clamp(30px,3.4vw,52px);margin:6px 0 18px}
.pf-shots{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,1.7fr) minmax(0,3.3fr);gap:14px;align-items:start}
.pf-shots figure{margin:0;padding:8px}
.pf-shots .pf-d video{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;background:var(--ink);display:block}
.pf-shots .pf-m video{width:100%;aspect-ratio:9/19;object-fit:cover;object-position:top;background:var(--ink);display:block}
.pf-shots figcaption{margin-top:8px;color:var(--stone-text)}
.pf-side{display:grid;gap:10px;align-content:start;padding-top:8px}
.pf-note{max-width:34em}
.cine-name small a{color:var(--ink)}
@media (max-width:900px){.pf-shots{grid-template-columns:minmax(0,3fr) minmax(0,1fr)}.pf-side{grid-column:1/-1}}
@media (max-width:560px){.pf-shots{grid-template-columns:1fr}.pf-shots .pf-m{max-width:220px}}
/* About: the signature draws itself, the social links sit under it */
.about-id{flex-wrap:wrap}
.sig{flex-basis:100%;width:min(280px,100%);height:auto;margin-top:12px;overflow:visible}
.sig-ink{fill:var(--ink)}
/* The ink is revealed through a mask of pen lines that follow the signature's own strokes, in signing order (app.js initSig
   runs each line's dash at a hand's pace). Without JS the pen lines are solid, so the signature simply shows. */
.sig-pens{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round}
.sig.ready .sig-pens path{stroke-dasharray:1 2;stroke-dashoffset:1}
.about-social{flex-basis:100%;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;font-size:12px}
.about-social a{color:var(--ink)}

/* FAQ: grouped accessible accordions (/websites/#faq, /for/, /partners/) */
.faq-wrap .sec-head{margin-bottom:8px}
.faq-nav{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 8px}
.faq-nav a{min-height:34px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--hair);color:var(--graphite);text-decoration:none;font-size:12px}
.faq-nav a:hover,.faq-nav a:focus-visible{border-color:var(--ink);color:var(--ink)}
.faq-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding-top:28px;scroll-margin-top:90px}
.faq-gh{grid-column:1/span 4;font-weight:640;letter-spacing:-.02em;font-size:clamp(20px,1.7vw,26px);align-self:start;padding-top:16px;display:flex;gap:12px;align-items:baseline}
.faq-gh .mono{color:var(--stone-text);font-size:12px;letter-spacing:.06em;font-weight:500}
.faq-g > .faq{grid-column:5/span 8}
.faq{border-top:1px solid var(--ink)}
.faq-i{border-bottom:1px solid var(--hair)}
.faq-q{margin:0;font:inherit}
.faq-q button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;min-height:48px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;font-weight:600;font-size:clamp(16px,1.25vw,19px);color:var(--ink);line-height:1.3}
.faq-q button:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.faq-x{flex:none;width:12px;height:12px;position:relative}
.faq-x::before,.faq-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .25s var(--ease)}
.faq-x::after{transform:rotate(90deg)}
.faq-q button[aria-expanded=true] .faq-x::after{transform:rotate(0)}
.faq-a p{margin:0;padding:0 0 18px;max-width:46em;color:var(--graphite)}
@media (max-width:860px){.faq-gh,.faq-g > .faq{grid-column:1/-1}.faq-gh{padding-bottom:6px}}

/* home 07: Find your industry */
.find-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:28px;padding-top:14px;border-top:1px solid var(--hair);font-size:12px;letter-spacing:.06em}
.find-row a{color:var(--graphite);text-decoration:none;padding:6px 0;text-transform:uppercase}
.find-row a:hover,.find-row a:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
/* /partners/: same 12-column grid as /websites/ */
.steps.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding:clamp(20px,2.6vw,36px) 0 clamp(36px,5vw,64px)}
.p-side{grid-column:1/span 4}.p-main{grid-column:5/span 8;min-width:0}
.p-side .lede{margin:0 0 14px}.p-note{color:var(--graphite);font-size:15px;max-width:30em;margin-top:14px}
.p-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-content:start}
.p-table{overflow-x:auto}
.earn{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.earn th,.earn td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--hair);vertical-align:top;font-weight:400}
.earn thead th{font:500 12px/1.3 var(--mono,monospace);letter-spacing:.04em;color:var(--stone-text);border-top:1px solid var(--ink)}
.earn tbody th{font-weight:560}.earn td:last-child{font-weight:600}
.p-apply{border-top:1px solid var(--ink);margin-top:clamp(36px,5vw,64px)}.p-apply .pf-h{margin-top:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:900px){.p-side,.p-main{grid-column:1/-1}.steps.steps-3{grid-template-columns:1fr}}
@media (max-width:640px){.p-two{grid-template-columns:1fr}
 .earn thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .earn tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;border-top:1px solid var(--hair);padding:12px 0}
 .earn th,.earn td{border:0;padding:0}.earn tbody th{grid-column:1/-1}
 .earn td::before{display:block;font:500 11px/1.3 var(--mono,monospace);color:var(--stone-text);letter-spacing:.04em}
 .earn td:nth-of-type(1)::before{content:"Price"}.earn td:nth-of-type(2)::before{content:"Client pays"}.earn td:nth-of-type(3)::before{content:"You earn"}}
/* phones: Selected work auto-preview (the row at the centre of the screen opens a short phone loop) */
.w-auto .w-list{overflow-anchor:none}
.w-auto .w-inline{padding:0;overflow:hidden;display:block}
.w-auto .w-prev{padding:2px 0 20px;display:grid;gap:10px;justify-items:start}
.w-auto .w-pv{position:relative;padding:8px;cursor:pointer}
.w-auto .w-pv video{display:block;height:40vh;height:40svh;width:auto;max-height:none;aspect-ratio:360/780;object-fit:cover}
.w-auto .w-tap{color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.w-auto .w-play{all:unset;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--ink);color:var(--bone);padding:9px 14px;cursor:pointer}
.w-auto .w-inline .w-prev{opacity:0;transition:opacity .35s}.w-auto .w-inline.on .w-prev{opacity:1}
.film-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink);opacity:0;transition:opacity .3s}
/* v4.10.1: the sound control never floats over page content. The fixed button (#snd) shows only on desktop while the
   home film or the director's cut fills the screen (dark stage, no body text under it). Everywhere else it lives in the
   header (desktop) or the menu (phones); in the phone hero its twin sits in its own slot on the skip-intro line. */
.snd{display:none}
@media (min-width:761px){body.in-build .snd,body.in-cut .snd{display:inline-flex}}
.hd-snd{all:unset;display:inline-flex;align-items:center;min-height:32px;padding:0 10px;font-size:11px;border:1px solid var(--hair);color:var(--ink);cursor:pointer;box-sizing:border-box}
.hd-snd[hidden]{display:none}
.hd-snd[aria-pressed=true]{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.hd-snd:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
body.in-build .hd-snd,body.in-cut .hd-snd{display:none}
@media (max-width:760px){.hd-snd{display:none}}
.mnav-snd{all:unset;justify-self:start;margin-top:22px;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--ink);color:var(--ink);cursor:pointer}
.mnav-snd[hidden]{display:none}
.mnav-snd[aria-pressed=true]{background:var(--ink);color:var(--bone)}
/* v4.12: industry pages with their own sample site, the grouped industries list, "Inside the build" case pages */
.ind-smp-k{color:var(--stone-text);margin:0 0 6px}
.smp-secs{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.smp-secs li{border:1px solid var(--hair);padding:7px 11px;font-size:11px;color:var(--graphite)}
.ind-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;padding-top:28px;scroll-margin-top:90px}
.ind-gh{grid-column:1/span 4;font-weight:640;letter-spacing:-.02em;font-size:clamp(20px,1.7vw,26px);padding-top:14px;display:flex;gap:12px;align-items:baseline;margin:0}
.ind-gh .mono{color:var(--stone-text);font-size:12px}
.ind-g > .ind-list{grid-column:5/span 8}
.case-dl{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:0 24px;margin:0;border-top:1px solid var(--hair)}
.case-dl dt{color:var(--stone-text);padding:16px 0;border-bottom:1px solid var(--hair)}
.case-dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--hair);color:var(--ink);max-width:44em}
.swatch{display:inline-block;width:18px;height:18px;vertical-align:-3px;border:1px solid var(--hair);margin-right:6px}
.lh{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:24px;border-top:1px solid var(--ink);padding-top:18px}
.lh-t{display:grid;gap:6px}.lh-n{font-weight:640;letter-spacing:-.05em;font-size:clamp(40px,4.4vw,68px);line-height:1;color:var(--ink)}
.lh-t .mono{color:var(--stone-text)}
.inq-from{grid-column:1/-1;margin:0 0 18px;padding:14px 16px;border:1px solid var(--ink);color:var(--ink);background:var(--linen)}
.inq-from[hidden]{display:none}
@media (max-width:860px){.ind-gh,.ind-g > .ind-list{grid-column:1/-1}.ind-gh{padding-bottom:8px}.case-dl{grid-template-columns:1fr}.case-dl dt{padding:14px 0 2px;border-bottom:0}.lh{grid-template-columns:1fr 1fr}}
/* phase 2b: industry pages and "Inside the build" pages. A composed hero, then ONE live, visitor-controlled preview of the
   sample (an iframe in a device frame, Desktop 1440 scaled / Mobile 390; sized by js/preview.js). Nothing scrolls on its own. */
.ind-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding:0 0 clamp(32px,4vw,56px)}
.ind-promise{grid-column:1/span 7;margin:0;color:var(--ink);font-weight:600;font-size:clamp(24px,2.6vw,40px);line-height:1.12;letter-spacing:-.035em;max-width:17em}
.ind-intro{grid-column:9/span 4;display:grid;gap:14px}
.ind-intro .answer{margin:0;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:var(--graphite)}
.ind-smp-k{color:var(--stone-text);margin:0}
.case-top{align-items:start}
.case-lede{grid-column:1/span 6;font-size:clamp(21px,1.9vw,28px);line-height:1.28;letter-spacing:-.025em}
.case-brief{grid-column:8/span 5;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:0 18px;border-top:1px solid var(--ink)}
.case-brief dt{padding:13px 0;border-bottom:1px solid var(--hair);color:var(--stone-text)}
.case-brief dd{margin:0;padding:10px 0;border-bottom:1px solid var(--hair);color:var(--ink);font-size:15px;line-height:1.45}
.pv:not(.rule-gap){margin:0}
.pv-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:12px 0 16px;border-top:1px solid var(--ink)}
.pv-k{margin:0 auto 0 0;color:var(--ink);display:flex;align-items:center;gap:10px}
.pv-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);flex:none}
.pv-tog{display:inline-flex;border:1px solid var(--ink)}
.pv-tog button{min-height:40px;padding:0 18px;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:background .25s,color .25s}
.pv-tog button+button{border-left:1px solid var(--ink)}
.pv-tog button[aria-pressed=true]{background:var(--ink);color:var(--bone)}
.pv-tog button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pv-open{font-weight:500;color:var(--ink);font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.pv-stage{display:flex;justify-content:center;padding:clamp(10px,2.2vw,36px);background:var(--linen);outline:1px solid var(--hair)}
.pv-dev{width:100%;background:#F7F5F1;outline:1px solid var(--hair)}
.pv-chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--hair)}
.pv-chrome i{width:9px;height:9px;border-radius:50%;border:1px solid var(--stone);flex:none}
.pv-chrome span{margin:0 auto;padding:4px 14px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--linen);color:var(--stone-text);font-size:10.5px;letter-spacing:.02em;text-transform:none}
.pv-view{position:relative;width:100%;overflow:hidden;aspect-ratio:16/10;background:var(--linen)}
.pv-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.pv-frame{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block;transform-origin:0 0;background:#fff;opacity:0;transition:opacity .6s var(--ease)}
.pv-on .pv-frame{opacity:1}
.pv-hint{margin:12px 0 0;color:var(--stone-text);text-align:center}
.pv-stage[data-mode=mobile] .pv-dev{width:min(100%,410px);padding:10px;background:var(--ink);border-radius:40px;outline:0}
.pv-stage[data-mode=mobile] .pv-chrome{display:none}
.pv-stage[data-mode=mobile] .pv-view{border-radius:30px;aspect-ratio:390/844}
.pv-in .cursor{opacity:0!important}
.ind-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,64px);margin-top:clamp(56px,7vw,96px)}
.ind-two .rule{margin:0 0 4px}
.ind-asks{list-style:none;margin:0;padding:0}
.ind-asks li{padding:13px 0;border-bottom:1px solid var(--hair);color:var(--ink);font-size:clamp(16px,1.2vw,18px);line-height:1.4;letter-spacing:-.01em}
.ind-trust li{color:var(--ink)}
.ind-secs{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:8px 24px;align-items:start}
.ind-secs .smp-secs{margin:0}
.ind-secs .sec-more{margin:0;justify-self:end}
.ind-secs .ticks{margin:0}
.case-note2{margin:0;color:var(--graphite);font-size:15px;line-height:1.5;max-width:28em}
.ind-film{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,44px);align-items:center}
.ind-film-still img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ind-film-still:hover{outline-color:var(--ink)}
.ind-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(64px,8vw,120px);padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--ink)}
.ind-cta h2{margin:0 0 14px;font-size:clamp(34px,4.4vw,68px)}
.ind-cta .lede{margin:0}
.ind-more{margin-top:32px}
@media (max-width:860px){
  .ind-top{grid-template-columns:minmax(0,1fr);gap:18px}
  .ind-promise,.ind-intro,.case-lede,.case-brief{grid-column:1/-1}
  .ind-two,.ind-secs,.ind-film,.ind-cta{grid-template-columns:minmax(0,1fr)}
  .ind-secs .sec-more{justify-self:start;margin-top:14px}
  .case-brief{grid-template-columns:minmax(0,1fr)}.case-brief dt{padding:12px 0 2px;border-bottom:0}
  .pv-k{flex-basis:100%}
  .pv-tog button{padding:0 16px}
  .pv-open{margin-left:auto;font-size:14px}
  .pv-stage{padding:10px}
  .ind-cta .btn{width:100%}
}
@media (max-width:380px){.pv-open{margin-left:0}}
/* v4.13: the analytics question (consent.js). A quiet card in the bottom-left corner, clear of the Sound button. */
.consent{position:fixed;z-index:60;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));width:min(360px,calc(100vw - 32px));box-sizing:border-box;padding:16px 18px;background:var(--bone);color:var(--ink);border:1px solid var(--ink);font-size:13px;line-height:1.5}
.consent[hidden]{display:none}
.consent p{margin:0}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.consent-b{display:flex;gap:8px;margin-top:12px!important}
.consent-b .btn{padding:9px 14px;font-size:13px}
@media (max-width:719px){.consent{bottom:max(76px,calc(env(safe-area-inset-bottom,0px) + 76px))}}
@media (min-width:861px){.ind2 .ind-trust{grid-template-columns:1fr 1fr;column-gap:24px}}
/* v4.14: the hero film plays by itself (Cinematic playbook) as a video, with a quiet pause control (WCAG 2.2.2) */
.film-v{object-fit:cover}
.b-pause{all:unset;position:absolute;z-index:6;left:var(--gut);bottom:calc(clamp(20px,4vh,40px) + 46px);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);cursor:pointer;text-decoration:underline;text-underline-offset:4px;opacity:.85}
.b-pause[hidden]{display:none}
.b-pause:hover,.b-pause:focus-visible{opacity:1}
.b-pause:focus-visible{outline:1px solid var(--bone);outline-offset:4px}
@media (max-width:760px){.b-pause{left:104px;bottom:calc(72px + env(safe-area-inset-bottom))}}
/* v4.15: the Four cuts show the hero's own mockup for Template, Custom and 3D (same design as the build above);
   Cinematic keeps the film with its caption */
.cut-site{display:none}
.cut:not([data-tier="3"]) .cut-inner{display:none}
.cut:not([data-tier="3"]) .cut-stage{background:var(--bone);display:grid;place-items:center;padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px)}
.cut:not([data-tier="3"]) .cut-site{display:block;position:relative;width:min(1000px,100%);aspect-ratio:1.6;transition:transform .9s var(--ease-out)}
.cut[data-tier="2"] .cut-stage{background:var(--linen);perspective:1600px}
.cut[data-tier="2"] .cut-site{transform:rotateX(calc(26deg + var(--py,0)*5deg)) rotateZ(-12deg) rotateY(calc(var(--px,0)*8deg)) scale(.84)}
.cut-site.v-m{width:min(62%,300px)!important;aspect-ratio:9/19!important}
/* v4.15 live preview on phones (preview.js v2): a still at the device's true shape; a tap opens the live site
   full-screen with a Close button. Nothing loads or scrolls inside the page by itself. */
.pv-tap,.pv-h-m{display:none}
@media (max-width:860px){
  .pv-tap{display:flex;position:absolute;inset:0;z-index:2;align-items:flex-end;justify-content:center;padding:0 0 18px;margin:0;border:0;border-radius:inherit;background:linear-gradient(to top,rgba(17,17,17,.5),rgba(17,17,17,0) 45%);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pv-tap span{background:var(--bone);color:var(--ink);padding:11px 16px;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;border:1px solid var(--ink)}
  .pv-frame{display:none}
  .pv-view{height:auto!important}
  .pv-stage[data-mode=mobile] .pv-dev{width:min(76%,300px);padding:8px;border-radius:36px}
  .pv-stage[data-mode=mobile] .pv-view{border-radius:28px}
  .pv-h-d{display:none}.pv-h-m{display:inline}
}
.pv-full{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:var(--ink);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.pv-full-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));color:var(--bone);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase}
.pv-full-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pv-full-x{all:unset;flex:none;cursor:pointer;padding:10px 16px;border:1px solid var(--bone);color:var(--bone)}
.pv-full-x:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.pv-full-view{position:relative;flex:1;overflow:hidden;background:#fff}
.pv-full-view iframe{position:absolute;top:0;left:0;border:0;transform-origin:0 0;background:#fff}
.pv-full-open,.pv-full-open body{overflow:hidden}
/* v4.16 Selected work on phones: tap a project, see a wide still at the phone's true shape, tap again for the live site */
.w-still{position:relative;width:min(100%,340px);margin:0 auto;aspect-ratio:390/844;overflow:hidden;background:var(--linen)}
.w-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}