/*
 * CanIWorkForYou.com — Studio 2035 front end.
 * Ported from the approved spec mockups/caniworkforyou-2035-concept.html.
 * Loaded only on the studio page templates; the live v2 pages never see it.
 *
 * Preserved fixes from the approved concept:
 *  - .lines .ln padding/negative margin keeps the capital "E" in "Every" unclipped.
 *  - .bigwm .bw padding-right + JS fit keeps the final "m" of ".com" unclipped.
 */
/* Self-hosted variable fonts (latin subset, from Google Fonts, OFL). */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/inter-tight-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/newsreader-normal-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 400;font-display:swap;src:url(fonts/newsreader-italic-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(fonts/jetbrains-mono-normal-latin.woff2) format("woff2")}

:root{
  --bg:#070708; --bg-1:#0C0C0E; --bg-2:#131316; --bg-3:#1A1A1E;
  --ivory:#EEE9E0; --ivory-2:rgba(238,233,224,.72); --ivory-3:rgba(238,233,224,.48); --ivory-4:rgba(238,233,224,.28);
  --line:rgba(238,233,224,.10); --line-2:rgba(238,233,224,.18);
  --paper:#ECE7DD; --paper-2:#E3DDD1; --ink:#0B0B0C; --ink-2:rgba(11,11,12,.70); --ink-3:rgba(11,11,12,.48); --pline:rgba(11,11,12,.12);
  --champ:#D6C29C; --champ-2:#B39869; --champ-ink:#8C6E40;
  --metal:linear-gradient(135deg,#F3E7CC 0%,#CDB283 42%,#9C7F50 62%,#E2CFA8 100%);
  --rec:#FF3D2E;
  --sans:"Inter Tight",ui-sans-serif,system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(20px,4.2vw,64px); --max:1440px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --navtop:0px;
}
.admin-bar{--navtop:32px}
@media (max-width:782px){.admin-bar{--navtop:46px}}
@media (max-width:600px){.admin-bar{--navtop:0px}}

.ciwfy-studio *,.ciwfy-studio *:before,.ciwfy-studio *:after{box-sizing:border-box}
/* zero-specificity reset so plugin markup (FormLayer) keeps its own spacing */
:where(.ciwfy-studio main,.ciwfy-studio .nav,.ciwfy-studio .sheet,.ciwfy-studio .s-foot,.ciwfy-studio .dock) :where(*){margin:0;padding:0}
:where(.ciwfy-studio .studio-form) :where(*){margin:revert;padding:revert}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.ciwfy-studio{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.ciwfy-studio a{color:inherit;text-decoration:none}
.ciwfy-studio button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.ciwfy-studio svg{display:block}
.ciwfy-studio ::selection{background:var(--champ);color:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.serif{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.01em}
.champ{color:var(--champ)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* accessibility */
.s-skip{position:fixed;left:16px;top:calc(var(--navtop) + 12px);z-index:300;padding:12px 18px;background:var(--ivory);color:var(--ink)!important;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;transform:translateY(-200%);transition:transform .3s var(--ease)}
.s-skip:focus{transform:none}
.ciwfy-studio a:focus-visible,.ciwfy-studio button:focus-visible,.ciwfy-studio summary:focus-visible,.ciwfy-studio [tabindex]:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
.light a:focus-visible,.light button:focus-visible,.light summary:focus-visible{outline-color:var(--champ-ink)}

/* film grain */
body.ciwfy-studio:after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:200;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* scroll progress */
.progress{position:fixed;left:0;top:var(--navtop);height:1px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--metal);z-index:120}

/* ---------- brand ---------- */
.mark{fill:url(#champ)}
.brand{display:flex;align-items:center;gap:12px}
.brand .mark{width:15px;height:27px;flex:none}
.wm{font-weight:600;letter-spacing:-.03em;font-size:19px;line-height:1;white-space:nowrap}
.wm i{font-style:normal;font-family:var(--serif);font-weight:500;color:var(--champ);margin:0 .03em 0 .015em;font-variation-settings:"opsz" 72}
.wm s{text-decoration:none;color:var(--ivory-3);font-weight:500}

/* ---------- nav ---------- */
.nav{position:fixed;top:var(--navtop);left:0;right:0;z-index:100;transition:background .5s var(--ease),border-color .5s,backdrop-filter .5s;border-bottom:1px solid transparent}
.nav.scrolled,.menu-open .nav{background:rgba(7,7,8,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.nav ul{display:flex;list-style:none;gap:4px;align-items:center}
.nav ul a{position:relative;display:block;padding:10px 14px;font-size:13.5px;color:var(--ivory-2);letter-spacing:.005em;transition:color .3s}
.nav ul a:after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;background:var(--champ);transform:scaleX(0);transition:transform .45s var(--ease)}
.nav ul a:hover,.nav ul a.on{color:var(--ivory)}
.nav ul a:hover:after,.nav ul a.on:after{transform:scaleX(1)}
.nav-r{display:flex;align-items:center;gap:22px}
.status{display:flex;align-items:center;gap:8px;color:var(--ivory-3)}
.status .dot{width:6px;height:6px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(255,61,46,.6);animation:rec 2s infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(255,61,46,.55)}70%{box-shadow:0 0 0 7px rgba(255,61,46,0)}100%{box-shadow:0 0 0 0 rgba(255,61,46,0)}}

/* Primary buttons stay physically still on hover: no translate, scale or movement.
   Only an internal metallic sweep and a brightness change. */
.cta{position:relative;display:inline-flex;align-items:center;gap:14px;height:44px;padding:0 8px 0 20px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)!important;background:var(--metal);border-radius:2px;overflow:hidden;isolation:isolate;transition:filter .5s var(--ease),box-shadow .5s var(--ease)}
.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:-1}
.cta:hover:before{transform:translateX(120%)}
.cta:hover{filter:brightness(1.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.cta .arr{display:grid;place-items:center;width:30px;height:30px;background:var(--ink);color:var(--champ);border-radius:1px}
.cta.lg{height:58px;padding:0 10px 0 28px;font-size:12.5px}
.cta.lg .arr{width:40px;height:40px}
.ghost{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 4px;font-size:15px;color:var(--ivory);border-bottom:1px solid var(--line-2);transition:border-color .3s,gap .4s var(--ease)}
.ghost:hover{border-color:var(--champ);gap:18px}
.ghost .play{width:28px;height:28px;border:1px solid var(--line-2);border-radius:50%;display:grid;place-items:center}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1px;background:var(--ivory);transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px;left:19px}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:22px;left:11px;transform:rotate(-45deg)}

/* mobile sheet */
.sheet{position:fixed;inset:0;z-index:90;background:rgba(7,7,8,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(100px + var(--navtop)) var(--gut) calc(28px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s var(--ease),visibility 0s .5s}
.menu-open .sheet{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s var(--ease),visibility 0s}
.sheet a.big{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:40px;font-weight:500;letter-spacing:-.03em;transform:translateY(20px);opacity:0;transition:transform .7s var(--ease),opacity .7s}
.sheet a.big .mono{color:var(--ivory-4)}
.menu-open .sheet a.big{transform:none;opacity:1}
.sheet .cta{margin-top:28px;justify-content:space-between;width:100%;height:60px}
.sheet .foot{margin-top:22px;color:var(--ivory-4)}
.menu-open{overflow:hidden}

/* ---------- section scaffolding ---------- */
.ciwfy-studio section{position:relative}
.sec{padding:clamp(96px,12vw,180px) 0}
.label{display:flex;align-items:center;gap:14px;color:var(--ivory-3)}
.label .n{color:var(--champ)}
.label:after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.light .label{color:var(--ink-3)}.light .label .n{color:var(--champ-ink)}.light .label:after{background:var(--pline)}
.h2{font-size:clamp(44px,6.6vw,108px);font-weight:500;letter-spacing:-.045em;line-height:.94;margin-top:28px!important}
.h2 .serif{font-weight:300;letter-spacing:-.025em}
.light{background:var(--paper);color:var(--ink)}
.light .serif.champ,.light .champ{color:var(--champ-ink)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ivory-2);max-width:560px}
.light .lede{color:var(--ink-2)}

/* reveal (only when JS is running, so content is never hidden without it) */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
/* The padding + matching negative margin is the approved fix that keeps tall
   capitals (the "E" in "Every") and descenders from being clipped. */
.lines .ln{display:block;overflow:hidden;padding:.12em 0 .16em!important;margin:-.12em 0 -.1em!important}
.lines .ln>span{display:inline-block}
.js .lines .ln>span{transform:translateY(105%);transition:transform 1.2s var(--ease)}
.js .lines.in .ln>span{transform:none}
.lines.in .ln:nth-child(2)>span{transition-delay:.1s}
.lines.in .ln:nth-child(3)>span{transition-delay:.2s}

/* ---------- hero ---------- */
.hero{min-height:min(100vh,1000px);padding:calc(150px + var(--navtop)) 0 0!important;overflow:hidden;background:
  radial-gradient(1200px 700px at 78% 30%,rgba(214,194,156,.10),transparent 60%),
  radial-gradient(900px 600px at 10% 100%,rgba(120,20,30,.10),transparent 60%),var(--bg)}
.hero .grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:120px 120px;opacity:.35;mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,#000 0%,transparent 75%)}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:center}
.nav .brand-t{display:flex;flex-direction:column}
.nav .slg{display:flex;align-items:center;gap:9px;margin-top:6px!important;font-family:var(--serif);font-style:italic;font-size:12.5px;line-height:1;color:var(--ivory-3);white-space:nowrap}
.nav .slg b{font-weight:400;color:var(--ivory)}
.nav .slg .tl{position:relative;width:40px;height:1px;background:var(--line-2);overflow:visible}
.nav .slg .tl:after{content:"";position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--rec);animation:scrub 3.2s var(--ease) infinite}
@keyframes scrub{0%{left:0;opacity:0}12%{opacity:1}85%{left:calc(100% - 7px);opacity:1}100%{left:calc(100% - 7px);opacity:0}}
.hero h1{font-size:clamp(60px,8.6vw,150px);font-weight:500;letter-spacing:-.055em;line-height:.88}
.hero h1 .serif{font-weight:300;letter-spacing:-.035em;color:var(--champ)}
.hero .lede{margin-top:36px!important;max-width:520px}
.hero .ctas{display:flex;align-items:center;gap:32px;margin-top:44px!important}
.specline{display:flex;gap:0;margin-top:64px!important;border-top:1px solid var(--line);max-width:600px}
.specline div{flex:1;padding:16px 18px 0 0!important}
.specline div+div{padding-left:18px!important;border-left:1px solid var(--line)}
.specline b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em}
.specline span{color:var(--ivory-4);font-size:10.5px}

/* stage */
.stage{position:relative;height:700px;perspective:1600px}
.stage-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--ease)}
.scr{position:absolute;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(238,233,224,.12),0 60px 120px -40px rgba(0,0,0,.9),0 30px 60px -30px rgba(0,0,0,.8)}
.scr>svg,.scr>video,.scr>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr.main{width:330px;left:50%;top:50%;transform:translate(-50%,-52%) translateZ(60px);z-index:3}
.scr.s1{width:228px;left:4%;top:13%;transform:rotateY(18deg) translateZ(-80px);filter:brightness(.62) saturate(.9);z-index:1}
.scr.s2{width:228px;right:2%;top:24%;transform:rotateY(-18deg) translateZ(-80px);filter:brightness(.62) saturate(.9);z-index:1}
.scr .ui{position:absolute;inset:0;padding:16px!important;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.ui-top{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.85);font-family:var(--mono);font-size:9.5px;letter-spacing:.12em}
.ui-top .rec{display:flex;align-items:center;gap:6px}
.ui-top .rec:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rec);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.segs{display:flex;gap:4px}
.segs i{flex:1;height:2px;background:rgba(255,255,255,.22);border-radius:2px;overflow:hidden;position:relative}
.segs i b{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.cap{position:relative;min-height:96px}
.cap p{position:absolute;left:0;right:0;bottom:22px;font-size:25px;font-weight:500;letter-spacing:-.03em;line-height:1.05;color:#fff;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.cap p em{font-family:var(--serif);font-weight:300;font-style:italic;color:#F1DDB4}
.cap p.on{opacity:1;transform:none}
.cap .shop{display:inline-flex;align-items:center;gap:8px;margin-top:12px!important;padding:9px 14px!important;background:rgba(255,255,255,.92);color:#000;font-size:12px;font-weight:600;letter-spacing:-.01em;border-radius:2px}

.snap{position:absolute;left:-2%;bottom:6%;z-index:4;width:150px;padding:8px 8px 30px!important;background:#E9E5DE;border-radius:2px;transform:rotate(-7deg) translateZ(120px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.snap svg,.snap img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;display:block}
.snap span{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#555}
.flow{position:absolute;left:0;bottom:-14px;z-index:4;display:flex;align-items:center;gap:10px;color:var(--ivory-3);transform:translateZ(120px)}
.flow i{display:block;width:56px;height:1px;background:linear-gradient(90deg,var(--ivory-4),var(--champ))}
.readout{position:absolute;right:0;bottom:8%;z-index:4;text-align:right;color:var(--ivory-4);line-height:1.9;transform:translateZ(100px)}
.readout b{color:var(--ivory-2);font-weight:400}

.hero-foot{display:flex;justify-content:space-between;align-items:center;margin-top:56px!important;padding:22px 0 26px!important;border-top:1px solid var(--line);color:var(--ivory-4)}
.plats{display:flex;gap:34px;align-items:center}
.plats span{color:var(--ivory-2)}
.plats span:first-child{color:var(--ivory-4)}
.scroll-cue{display:flex;align-items:center;gap:12px}
.scroll-cue i{width:1px;height:28px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-cue i:after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--champ);animation:cue 2s var(--ease) infinite}
@keyframes cue{to{top:100%}}

/* ---------- work ---------- */
.work-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.work-head .lede{max-width:420px}
.films{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);margin-top:clamp(56px,7vw,96px)!important}
/* Stagger uses the independent `translate` property so the reveal transform
   (.rv) cannot cancel it. */
.films>*:nth-child(4n+2){translate:0 72px}
.films>*:nth-child(4n+4){translate:0 36px}
.films>*:nth-child(4n+3){translate:0 -24px}
.film{position:relative}
@media (pointer:fine){.film:not(.next){cursor:none}}
.film .media{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--line);transition:box-shadow .5s}
.film .media>svg,.film .media>video,.film .media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.film:hover .media>svg,.film:hover .media>video,.film:hover .media>img{transform:scale(1.045)}
.film:hover .media{box-shadow:0 0 0 1px var(--line-2),0 40px 80px -40px rgba(0,0,0,.9)}
.film .ui{position:absolute;inset:0;padding:14px!important;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.film .ui-top{opacity:.9}
.film .bar{height:2px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.film .bar b{display:block;height:100%;width:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.film:not(.has-video):hover .bar b{transform:scaleX(1);transition:transform 15s linear}
.film.has-video .bar b{transform:scaleX(var(--p,0))}
.film .ovl{position:absolute;left:14px;right:14px;bottom:30px;color:#fff;font-weight:500;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.03em;line-height:1.05;opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.film .ovl em{font-family:var(--serif);font-style:italic;font-weight:300}
.film:hover .ovl,.film:focus-within .ovl{opacity:1;transform:none}
.film.has-video .ovl{text-shadow:0 1px 18px rgba(0,0,0,.45)}
.film.lt .ovl,.film.lt .ui-top{color:#141414}
.film.lt .bar{background:rgba(0,0,0,.15)}.film.lt .bar b{background:#141414}
.film .snd{position:absolute;right:12px;top:34px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(7,7,8,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto;opacity:0;transition:opacity .4s}
.film:hover .snd,.film:focus-within .snd,.film .snd[aria-pressed="true"]{opacity:1}
.film .snd .on{display:none}.film .snd[aria-pressed="true"] .on{display:block}.film .snd[aria-pressed="true"] .off{display:none}
.film .meta{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:18px 2px 0!important}
.film .meta .cat{grid-column:1/-1;color:var(--champ)}
.film h3{font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin-top:6px!important}
.film .spec{align-self:end;color:var(--ivory-4)}
.film .meta p{grid-column:1/-1;font-size:13.5px;color:var(--ivory-3);margin-top:4px!important}
.film.next .media{display:flex;flex-direction:column;justify-content:space-between;padding:22px!important;background:
  radial-gradient(120% 80% at 50% 110%,rgba(214,194,156,.18),transparent 60%),var(--bg-1);box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.film.next .media:before{content:"";position:absolute;inset:14px;border:1px dashed var(--line-2);border-radius:6px;pointer-events:none}
.film.next .media>*{position:relative}
.film.next .media>.mono{color:var(--ivory-4)}
.film.next .big{font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1}
.film.next .big .serif{color:var(--champ)}
.film.next .go{display:flex;align-items:center;justify-content:space-between;color:var(--ivory-2)}
.film.next .go b{width:44px;height:44px;border-radius:50%;background:var(--metal);display:grid;place-items:center;color:var(--ink);transition:transform .5s var(--ease)}
.film.next:hover .go b{transform:rotate(-45deg)}
/* PLAY cursor: the element follows the pointer on the compositor (no transition, no
   layout); the circle and label inside it animate the grow-in on their own. */
.cursor{position:fixed;left:0;top:0;z-index:150;width:84px;height:84px;margin:-42px 0 0 -42px;color:var(--ink);display:grid;place-items:center;pointer-events:none;transform:translate3d(var(--cx,-200px),var(--cy,-200px),0);will-change:transform}
.cursor:before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(238,233,224,.92);transform:scale(0);transition:transform .35s var(--ease)}
.cursor.on:before,.cursor.on span{transform:scale(1)}
.cursor span{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.16em;display:flex;align-items:center;gap:6px;transform:scale(0);transition:transform .35s var(--ease)}
/* Hover preview stability (2026-10 fix):
   - the preview video is its own GPU layer and only zooms once frames are playing,
     gently, instead of being resampled mid-decode;
   - the big hover shadow fades in on a separate layer instead of being repainted;
   - the site grain pauses while a film card is under the pointer. */
.film.has-video{isolation:isolate}
.film.has-video .media{transition:none}
.film.has-video:hover .media{box-shadow:0 0 0 1px var(--line-2)}
.film.has-video:before{content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:9/16;border-radius:10px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;z-index:-1}
.film.has-video:hover:before{opacity:1}
.film.has-video .media>video{transform:translateZ(0);backface-visibility:hidden;will-change:transform;transition:transform 1.8s var(--ease)}
.film.has-video:hover .media>video{transform:translateZ(0)}
.film.has-video.is-playing:hover .media>video{transform:translateZ(0) scale(1.03)}
.film.has-video .bar b{will-change:transform}
body.film-hover:after{animation-play-state:paused}
/* Cards with a finished full ad carry a small cue so touch visitors know to tap. */
.film.has-full .media:after{content:"Full ad \00B7  Sound";position:absolute;right:12px;top:38px;padding:5px 9px;border-radius:999px;background:rgba(7,7,8,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;pointer-events:none}
.film.has-full{cursor:pointer}
.rail-ctrl{display:none}
/* Clears the 72px stagger of the last row; .work-note.fine beats the generic .fine margin. */
.work-note.fine{margin-top:clamp(104px,9vw,130px)!important;color:var(--ivory-4);font-size:12.5px}

/* ---------- storyboard (light) ---------- */
.board-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:60px;align-items:end}
.beats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,7vw,100px)!important;border-top:1px solid var(--ink);position:relative}
.beat{padding:22px 22px 0 0!important;position:relative}
.beat+.beat{padding-left:22px!important;border-left:1px solid var(--pline)}
.beat .t{display:flex;justify-content:space-between;color:var(--ink-3)}
.beat .t b{color:var(--ink);font-weight:500}
.beat .fr{margin:22px 0 24px!important;aspect-ratio:9/16;max-width:200px;border:1px solid var(--ink);border-radius:8px;position:relative;overflow:hidden;background:var(--paper-2)}
.beat .fr svg{width:100%;height:100%}
.beat h3{font-size:26px;font-weight:500;letter-spacing:-.035em;line-height:1.15}
.beat h3 .serif{color:var(--champ-ink)}
.beat p{font-size:14.5px;color:var(--ink-2);margin-top:8px!important;max-width:260px}
.beat .psy{margin-top:18px!important;padding-top:14px!important;border-top:1px solid var(--pline);color:var(--champ-ink)}
.timeline{position:absolute;left:0;right:0;top:-1px;height:1px}
.timeline i{position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--rec);animation:tl 9s linear infinite}
@keyframes tl{from{left:0}to{left:calc(100% - 9px)}}

/* ---------- services (light) ---------- */
.svc-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,110px);align-items:start}
.svc-intro{position:sticky;top:calc(120px + var(--navtop))}
.intake{margin-top:44px!important;border:1px solid var(--pline);background:var(--paper-2);border-radius:4px;padding:22px!important}
.intake .row{display:flex;align-items:center;gap:14px;padding:12px 0!important}
.intake .row+.row{border-top:1px solid var(--pline)}
.intake .ico{width:38px;height:38px;flex:none;border:1px solid var(--pline);border-radius:50%;display:grid;place-items:center;background:var(--paper)}
.intake .row b{display:block;font-weight:500;font-size:15px;letter-spacing:-.01em}
.intake .row span{font-size:13px;color:var(--ink-3)}
.intake .out{display:flex;align-items:center;justify-content:space-between;margin-top:10px!important;padding:14px 16px!important;background:var(--ink);color:var(--paper);border-radius:2px}
.intake .out .mono{color:var(--champ)}
.svcs{list-style:none;border-top:1px solid var(--ink)}
.svc{display:grid;grid-template-columns:52px 44px minmax(0,1fr) auto;gap:18px;align-items:center;padding:26px 0!important;border-bottom:1px solid var(--pline);position:relative;transition:padding .5s var(--ease)}
.svc:before{content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease)}
.svc:hover:before{transform:scaleX(1)}
.svc:hover{padding-left:10px!important}
.svc .num{color:var(--ink-3)}
.svc .ic{width:44px;height:44px;color:var(--ink)}
.svc h3{font-size:clamp(20px,1.9vw,28px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.svc p{font-size:14.5px;color:var(--ink-2);margin-top:4px!important;max-width:520px}
.svc .ar{width:36px;height:36px;border:1px solid var(--pline);border-radius:50%;display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--ease)}
.svc:hover .ar{background:var(--ink);color:var(--paper);transform:rotate(-45deg)}

/* ---------- process ---------- */
.proc{background:radial-gradient(900px 500px at 50% 0%,rgba(214,194,156,.07),transparent 70%),var(--bg)}
.proc-head{text-align:center;display:flex;flex-direction:column;align-items:center}
.final .label:before,.proc-head .label:before{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(64px,8vw,110px)!important;position:relative}
.steps:before{content:"";position:absolute;left:0;right:0;top:27px;height:1px;background:var(--line-2)}
.steps .head{position:absolute;left:0;top:27px;height:1px;width:100%;background:var(--metal);transform-origin:0 50%;transform:scaleX(0);transition:transform 2.4s var(--ease)}
.steps.in .head,.no-js .steps .head{transform:scaleX(1)}
.step{padding-right:32px!important;position:relative}
.step .k{width:55px;height:55px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--champ);position:relative;transition:border-color .5s}
.step:hover .k{border-color:var(--champ)}
.step h3{margin-top:30px!important;font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.035em;line-height:1.08}
.step p{margin-top:12px!important;font-size:15px;color:var(--ivory-3);max-width:290px}
.step .t{margin-top:20px!important;color:var(--ivory-4)}
.without{margin-top:clamp(80px,9vw,130px)!important;padding:30px 0 36px!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.without>.mono{color:var(--ivory-3);display:block;margin-bottom:22px!important}
.nos{display:grid;grid-template-columns:repeat(5,auto);gap:12px 28px;justify-content:space-between;list-style:none}
.no{position:relative;justify-self:start;font-size:clamp(20px,2.1vw,32px);font-weight:400;letter-spacing:-.035em;color:var(--ivory-3);white-space:nowrap}
.no:after{content:"";position:absolute;left:-2%;width:104%;top:54%;height:1px;background:var(--rec);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--ease)}
.without.in .no:after,.no-js .no:after{transform:scaleX(1)}
.without.in .no:nth-child(2):after{transition-delay:.15s}.without.in .no:nth-child(3):after{transition-delay:.3s}.without.in .no:nth-child(4):after{transition-delay:.45s}.without.in .no:nth-child(5):after{transition-delay:.6s}
.fine{margin-top:16px!important;color:var(--ivory-4);font-size:12.5px}

/* ---------- pricing ---------- */
.pricing{background:var(--bg-1);border-top:1px solid var(--line)}
.price-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.price-head .lede{max-width:400px}
.tabs{display:none}
.plans{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:0;margin-top:clamp(56px,7vw,96px)!important;align-items:stretch;border:1px solid var(--line)}
.plan{position:relative;padding:40px clamp(24px,2.6vw,44px) 40px!important;display:flex;flex-direction:column;--mx:50%;--my:0%;overflow:hidden}
.plan+.plan{border-left:1px solid var(--line)}
.plan:before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx) var(--my),rgba(214,194,156,.08),transparent 50%);opacity:0;transition:opacity .5s;pointer-events:none}
.plan:hover:before{opacity:1}
.plan.sig{background:linear-gradient(180deg,#17161A,#0F0F12);margin:-28px 0!important;padding-top:68px!important;padding-bottom:68px!important;box-shadow:0 0 0 1px rgba(214,194,156,.38),0 60px 120px -50px rgba(0,0,0,.9);z-index:2}
.plan.sig:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--metal)}
.badge{position:absolute;top:24px;left:clamp(24px,2.6vw,44px);display:flex;align-items:center;gap:8px;color:var(--champ)}
.badge:before{content:"";width:6px;height:6px;background:var(--champ);transform:rotate(45deg)}
.plan .tier{display:flex;justify-content:space-between;color:var(--ivory-4)}
.plan h3{margin-top:18px!important;font-size:clamp(28px,2.5vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1}
.plan.sig h3 .serif{color:var(--champ)}
.plan .for{margin-top:12px!important;font-size:14.5px;color:var(--ivory-3);min-height:46px}
.price{display:flex;align-items:flex-start;gap:4px;margin-top:30px!important;padding-bottom:28px!important;border-bottom:1px solid var(--line)}
.price .cur{font-size:22px;font-weight:400;margin-top:8px!important;color:var(--ivory-2)}
.price .amt{font-size:clamp(56px,5vw,76px);font-weight:500;letter-spacing:-.055em;line-height:.95}
.plan.sig .amt{background:linear-gradient(180deg,#F6EBD3,#C9AE7E);-webkit-background-clip:text;background-clip:text;color:transparent}
.price .per{align-self:flex-end;margin:0 0 8px 8px!important;color:var(--ivory-4)}
.cadence{display:flex;gap:0;margin-top:22px!important}
.cadence div{flex:1}
.cadence div+div{padding-left:14px!important;border-left:1px solid var(--line)}
.cadence b{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em}
.cadence span{color:var(--ivory-4);font-size:10px}
.feat{list-style:none;margin-top:26px!important;flex:1}
.feat li{display:grid;grid-template-columns:18px 1fr;gap:12px;padding:9px 0!important;font-size:14.5px;color:var(--ivory-2);line-height:1.45}
.feat li svg{margin-top:4px!important;color:var(--champ)}
.plan .act{margin-top:34px!important;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px 0 22px!important;border:1px solid var(--line-2);border-radius:2px;font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;transition:background .4s,color .4s,border-color .4s}
.plan .act b{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:1px;transition:transform .4s var(--ease)}
.plan .act:hover{background:var(--ivory);color:var(--ink)}
.plan .act:hover b{transform:translateX(3px);border-color:rgba(0,0,0,.15)}
.plan.sig .act{position:relative;overflow:hidden;isolation:isolate;background:var(--metal);color:var(--ink);border:0;transition:filter .5s var(--ease)}
.plan.sig .act:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease);z-index:-1}
.plan.sig .act:hover{background:var(--metal);color:var(--ink);filter:brightness(1.07)}
.plan.sig .act:hover:before{transform:translateX(120%)}
.plan.sig .act:hover b{transform:none}
.plan.sig .act b{background:var(--ink);color:var(--champ);border:0}
.price-notes{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center;margin-top:56px!important;color:var(--ivory-3);list-style:none}
.price-notes li{display:flex;align-items:center;gap:10px}
.price-notes li:before{content:"";width:4px;height:4px;background:var(--champ);transform:rotate(45deg)}

/* ---------- standards ---------- */
.std{background:var(--bg)}
.std-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,96px)!important;border-top:1px solid var(--line)}
.sd{padding:36px 34px 40px 0!important;border-bottom:1px solid var(--line);position:relative}
.sd:not(:nth-child(3n+1)){padding-left:34px!important;border-left:1px solid var(--line)}
.sd .v{font-size:clamp(34px,3.4vw,52px);font-weight:500;letter-spacing:-.05em;line-height:1}
.sd .v .serif{color:var(--champ)}
.sd>.mono{color:var(--champ);display:block;margin-bottom:28px!important}
.sd h3{margin-top:22px!important;font-size:17px;font-weight:500;letter-spacing:-.02em}
.sd p{margin-top:6px!important;font-size:14.5px;color:var(--ivory-3);max-width:340px}
.sd .safe{position:absolute;right:34px;top:36px;width:44px;height:78px;border:1px solid var(--line-2);border-radius:5px}
.sd .safe:before{content:"";position:absolute;inset:12px 8px 18px 6px;border:1px dashed var(--champ);border-radius:2px;opacity:.7}

/* ---------- faq (light) ---------- */
.faq-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,7vw,120px);align-items:start}
.faq-side{position:sticky;top:calc(120px + var(--navtop))}
.faq-side .ask{margin-top:40px!important;padding-top:22px!important;border-top:1px solid var(--pline);font-size:15px;color:var(--ink-2)}
.faq-side .ask a{color:var(--ink);border-bottom:1px solid var(--champ-ink)}
.qa{border-top:1px solid var(--ink)}
.qa details{border-bottom:1px solid var(--pline)}
.qa summary{list-style:none;display:grid;grid-template-columns:44px 1fr 28px;gap:12px;align-items:center;padding:26px 0!important;cursor:pointer}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary .mono{color:var(--ink-3)}
.qa summary h3{font-size:clamp(18px,1.55vw,23px);font-weight:500;letter-spacing:-.025em;line-height:1.25}
.qa summary .pm{width:28px;height:28px;position:relative}
.qa summary .pm:before,.qa summary .pm:after{content:"";position:absolute;left:7px;right:7px;top:13.5px;height:1px;background:var(--ink);transition:transform .5s var(--ease)}
.qa summary .pm:after{transform:rotate(90deg)}
.qa details[open] summary .pm:after{transform:rotate(0)}
.qa .ans{display:grid;grid-template-columns:44px 1fr 28px;gap:12px;padding:0 0 28px!important}
.qa .ans p{grid-column:2;font-size:16px;color:var(--ink-2);max-width:620px}
.qa .ans a{color:var(--ink);border-bottom:1px solid var(--champ-ink)}
.qa details[open] .ans p{animation:ans .6s var(--ease)}
@keyframes ans{from{opacity:0;transform:translateY(-6px)}}

/* ---------- final cta ---------- */
.final{overflow:hidden;background:radial-gradient(1000px 600px at 50% 120%,rgba(214,194,156,.16),transparent 65%),var(--bg);text-align:center}
.final .ghostmark{position:absolute;left:50%;top:56%;width:min(34vw,380px);aspect-ratio:9/16;height:auto;transform:translate(-50%,-50%);opacity:.06;fill:url(#champ);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 90%);mask-image:linear-gradient(180deg,#000 10%,transparent 90%)}
.final .wrap{position:relative}
.final .label{justify-content:center}
.final h2{font-size:clamp(56px,10vw,184px);font-weight:500;letter-spacing:-.06em;line-height:.86;position:relative;margin-top:34px!important}
.final h2 .serif{color:var(--champ);font-weight:300}
.final .lede{margin:40px auto 0!important;text-align:center}
.final .ctas{display:flex;justify-content:center;gap:28px;align-items:center;margin-top:48px!important;position:relative}
.final .meta{margin-top:72px!important;display:flex;justify-content:center;gap:40px;color:var(--ivory-4);position:relative}

/* ---------- inner pages ---------- */
.sec.first{padding-top:calc(clamp(96px,12vw,180px) + 84px + var(--navtop))!important}
.film.next .media>.mono,.film.next .big{display:block}
.film .meta .h3{display:block;font-size:22px;font-weight:500;letter-spacing:-.03em;line-height:1.2;margin-top:6px!important}
.film .meta .p{display:block;grid-column:1/-1;font-size:13.5px;color:var(--ivory-3);margin-top:4px!important}
.sd p a{color:var(--ivory-2)}
.page-head{padding:calc(170px + var(--navtop)) 0 clamp(72px,8vw,120px)!important;background:
  radial-gradient(1100px 600px at 80% 0%,rgba(214,194,156,.09),transparent 60%),var(--bg);border-bottom:1px solid var(--line)}
.page-head .grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:120px 120px;opacity:.25;mask-image:radial-gradient(ellipse 60% 70% at 70% 0%,#000 0%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 70% at 70% 0%,#000 0%,transparent 75%)}
.page-head .wrap{position:relative}
.page-head .h2{max-width:14ch}
.page-head .lede{margin-top:32px!important}
.page-head .meta-line{margin-top:36px!important;color:var(--ivory-4)}

/* legal / long-form text (content rendered unchanged from the live page) */
.prose-sec{padding:clamp(64px,8vw,120px) 0 clamp(96px,10vw,160px)!important}
.prose{max-width:760px;font-size:17px;line-height:1.75;color:var(--ink-2)}
.prose>*+*{margin-top:1.1em!important}
.prose h1,.prose h2,.prose h3,.prose h4{color:var(--ink);font-weight:500;letter-spacing:-.025em;line-height:1.2}
.prose h2{font-size:clamp(24px,2.2vw,32px);margin-top:2.2em!important;padding-top:1.1em!important;border-top:1px solid var(--pline)}
.prose h3{font-size:21px;margin-top:1.8em!important}
.prose h4{font-size:18px;margin-top:1.6em!important}
.prose ul,.prose ol{padding-left:1.3em!important}
.prose li+li{margin-top:.4em!important}
.prose a{color:var(--ink);border-bottom:1px solid var(--champ-ink)}
.prose strong,.prose b{color:var(--ink);font-weight:600}

/* contact */
.contact-sec{padding:clamp(64px,8vw,120px) 0 clamp(96px,10vw,160px)!important}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,110px);align-items:start}
.plan-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;margin-bottom:28px!important;padding:16px 18px!important;border:1px solid var(--pline);border-left:2px solid var(--champ-ink);background:var(--paper-2)}
.plan-pick b{font-weight:500;letter-spacing:-.01em}
.plan-pick .mono{color:var(--champ-ink)}
.contact-side{position:sticky;top:calc(120px + var(--navtop))}
.contact-side h2{font-size:clamp(28px,2.6vw,40px);font-weight:500;letter-spacing:-.04em;line-height:1.05}
.contact-side h2 .serif{color:var(--champ-ink)}
.contact-side .lede{margin-top:18px!important;font-size:16px}
.contact-side .mail{display:inline-block;margin-top:22px!important;font-size:20px;letter-spacing:-.02em;color:var(--ink);border-bottom:1px solid var(--champ-ink)}
.contact-side .intake{margin-top:36px!important}

/* FormLayer, restyled to the studio system (scoped to the contact page) */
.studio-form{font-family:var(--sans);color:var(--ink)}
.studio-form form{display:block}
.studio-form label,.studio-form .formlayer-label{display:block;font-family:var(--mono);font-size:11px!important;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)!important;font-weight:400!important;margin-bottom:8px!important}
.studio-form input[type=text],.studio-form input[type=email],.studio-form input[type=tel],.studio-form input[type=url],.studio-form input[type=number],.studio-form select,.studio-form textarea{width:100%;min-height:52px;padding:14px 16px!important;font:inherit;font-size:16px!important;color:var(--ink)!important;background:var(--paper)!important;border:1px solid var(--pline)!important;border-radius:2px!important;box-shadow:none!important;transition:border-color .3s}
.studio-form textarea{min-height:150px}
.studio-form input:focus,.studio-form select:focus,.studio-form textarea:focus{outline:2px solid var(--champ-ink);outline-offset:1px;border-color:var(--ink)!important}
.studio-form ::placeholder{color:rgba(11,11,12,.38)}
.studio-form [class*="help"],.studio-form small,.studio-form .description{font-size:13px!important;color:var(--ink-3)!important}
.studio-form button[type=submit],.studio-form input[type=submit],.studio-form .formlayer-submit,.studio-form [class*="submit"] button{width:100%;height:60px!important;padding:0 24px!important;font-family:var(--mono)!important;font-size:12.5px!important;font-weight:500!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--ink)!important;background:var(--metal)!important;border:0!important;border-radius:2px!important;cursor:pointer;transition:filter .5s var(--ease)!important;transform:none!important}
.studio-form input[type=checkbox],.studio-form input[type=radio]{accent-color:var(--ink);width:18px;height:18px}
.studio-form [class*="section"]{border-top:1px solid var(--pline);padding-top:22px!important;margin-top:26px!important}
.studio-form [class*="section"]:first-child{border-top:0;padding-top:0!important;margin-top:0!important}
.studio-form .formlayer-help-text{font-size:13px!important;color:var(--ink-3)!important;line-height:1.5}
.intake-sec .contact-side h2{font-size:clamp(26px,2.4vw,36px)}
.studio-form .formlayer-submit-wrap{width:100%!important;flex:1 1 100%!important;grid-column:1/-1}
.studio-form button[type=submit]:hover,.studio-form input[type=submit]:hover,.studio-form .formlayer-submit:hover{filter:brightness(1.07)}
.studio-form [class*="file-upload-box"],.studio-form [class*="file-btn"],.studio-form [class*="file_btn"]{border-radius:2px!important}
.studio-form [class*="file"] label[class*="btn"],.studio-form [class*="file-btn"]{background:var(--ink)!important;color:var(--paper)!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.12em!important;text-transform:uppercase}
.studio-form [class*="section"] h3,.studio-form [class*="section-label"]{font-size:20px!important;font-weight:500!important;letter-spacing:-.025em;color:var(--ink)!important;text-transform:none!important;font-family:var(--sans)!important}

/* ---------- footer ---------- */
.s-foot{background:var(--bg);border-top:1px solid var(--line);padding:80px 0 36px}
.ft{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.6fr));gap:40px}
.ft .brand .mark{width:22px;height:39px}
.ft .brand .wm{font-size:24px}
.ft .slg{margin-top:22px!important;font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;line-height:1.3;color:var(--ivory-3);max-width:360px}
.ft .slg b{font-weight:400;color:var(--ivory)}
.ft .svc-of{margin-top:22px!important;color:var(--ivory-4)}
.ft h2{color:var(--ivory-4);font-weight:400;margin-bottom:18px!important}
.ft ul{list-style:none}
.ft li a{display:inline-block;padding:6px 0!important;font-size:15px;color:var(--ivory-2);transition:color .3s}
.ft li a:hover{color:var(--champ)}
.legal{display:flex;justify-content:space-between;gap:20px;margin-top:80px!important;padding-top:26px!important;border-top:1px solid var(--line);color:var(--ivory-4);font-size:12.5px}
.legal{align-items:flex-end}
.legal-copy{display:flex;flex-direction:column;gap:8px;line-height:1.5}
.legal .mono{font-size:10.5px}
/* Oversized wordmark. The .bw padding plus the JS fit is the approved fix that
   keeps the final "m" of ".com" visible without horizontal scroll. */
.bigwm{margin-top:60px!important;font-size:clamp(26px,8.6vw,136px);font-weight:600;letter-spacing:-.06em;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(238,233,224,.12);white-space:nowrap;user-select:none;padding-right:2px!important;overflow:hidden}
.bigwm .bw{display:inline-block;padding-right:.16em!important}
.bigwm i{font-style:normal;font-family:var(--serif);font-weight:500;-webkit-text-stroke:1px rgba(214,194,156,.4)}

/* mobile sticky */
.dock{display:none}

/* CookieAdmin consent UI, restyled to the studio palette (studio pages only) */
.ciwfy-studio .cookieadmin_consent_inside,.ciwfy-studio .cookieadmin_cookie_modal{background:var(--bg-2)!important;color:var(--ivory-2)!important;border:1px solid var(--line-2)!important;border-radius:4px!important;box-shadow:0 40px 80px -30px rgba(0,0,0,.9)!important;font-family:var(--sans)!important}
.ciwfy-studio .cookieadmin_consent_inside *,.ciwfy-studio .cookieadmin_cookie_modal *{font-family:var(--sans)!important;color:inherit}
.ciwfy-studio #cookieadmin_notice_title,.ciwfy-studio .cookieadmin_mod_head *{color:var(--ivory)!important;font-weight:500!important;letter-spacing:-.01em}
.ciwfy-studio .cookieadmin_btn{height:44px!important;padding:0 18px!important;border-radius:2px!important;font-family:var(--mono)!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase!important;background:transparent!important;color:var(--ivory)!important;border:1px solid var(--line-2)!important;box-shadow:none!important}
.ciwfy-studio .cookieadmin_btn:hover{border-color:var(--champ)!important}
.ciwfy-studio .cookieadmin_btn.cookieadmin_accept_btn{background:var(--metal)!important;color:var(--ink)!important;border:0!important}
.ciwfy-studio .cookieadmin_re_consent{background:var(--bg-2)!important;border:1px solid var(--line-2)!important;box-shadow:none!important;color:var(--champ)!important;width:40px!important;height:40px!important}
.ciwfy-studio .cookieadmin_re_consent svg,.ciwfy-studio .cookieadmin_re_consent img{opacity:.8;filter:grayscale(1) brightness(1.6)}
@media (max-width:860px){.ciwfy-studio .cookieadmin_re_consent{bottom:calc(84px + env(safe-area-inset-bottom))!important}}

/* ---------- art animations ---------- */
.sweep{animation:sweep 5s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-180px)}55%,100%{transform:translateX(220px)}}
.flame{transform-box:fill-box;transform-origin:50% 100%;animation:flick 2.2s ease-in-out infinite}
@keyframes flick{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(.94,1.06) skewX(2deg)}50%{transform:scale(1.03,.96) skewX(-1.5deg)}75%{transform:scale(.97,1.04) skewX(1deg)}}
.glow{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{50%{opacity:.75}}
.bub{animation:bub 4s linear infinite}
@keyframes bub{from{transform:translateY(0);opacity:0}10%{opacity:.8}to{transform:translateY(-190px);opacity:0}}
.drop{animation:drop 2.6s cubic-bezier(.55,0,1,.45) infinite}
@keyframes drop{0%,30%{transform:translateY(0) scale(.4);opacity:0}38%{transform:translateY(0) scale(1);opacity:1}80%{transform:translateY(78px) scale(1);opacity:1}82%,100%{transform:translateY(80px) scale(1.4,.3);opacity:0}}
.drip{transform-box:fill-box;transform-origin:50% 0;animation:drip 3.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.2)}60%{transform:scaleY(1)}100%{transform:scaleY(.2)}}
.sec-hand{transform-origin:135px 240px;animation:spin 60s linear infinite}
.min-hand{transform-origin:135px 240px;animation:spin 3600s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .nav ul{display:none}.burger{display:block}.status{display:none}
  .hero-in{grid-template-columns:1fr}
  .stage{height:640px;margin-top:20px!important}
  .films{grid-template-columns:repeat(2,minmax(0,1fr))}
  .films>*{translate:none!important}
  .films>*:nth-child(even){translate:0 64px!important}
  .films{padding-bottom:64px!important}
  .svc-wrap,.faq-wrap,.board-head,.contact-grid{grid-template-columns:1fr}
  .svc-intro,.faq-side,.contact-side{position:static}
  .std-grid{grid-template-columns:repeat(2,1fr)}
  .sd:not(:nth-child(3n+1)){padding-left:0!important;border-left:0}
  .sd:nth-child(even){padding-left:28px!important;border-left:1px solid var(--line)}
  .ft{grid-template-columns:1fr 1fr 1fr}
  .ft>div:first-child{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-r .cta{display:none}
  .hero{padding-top:calc(128px + var(--navtop))!important}
  .hero .ctas{flex-direction:column;align-items:stretch;gap:10px}
  .hero .ctas .cta{justify-content:space-between}
  .hero .ctas .ghost{justify-content:center;border:1px solid var(--line-2);border-radius:2px}
  .specline div{padding-right:10px!important}.specline div+div{padding-left:12px!important}
  .stage{height:560px;margin:10px calc(var(--gut)*-1) 0!important}
  .scr.main{width:262px;left:58%}
  .scr.s1{width:180px;left:-6%;top:18%}
  .scr.s2{width:180px;right:-6%;top:26%}
  .snap{width:104px;left:3%;bottom:6%;padding:6px 6px 24px!important}
  .snap span{font-size:7px;left:8px;bottom:7px}
  .beat .t{flex-direction:column;gap:2px}
  .intake .out{flex-direction:column;align-items:flex-start;gap:4px}
  .hov{display:none}
  .flow,.readout{display:none}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:16px}
  .plats{flex-wrap:wrap;gap:10px 22px}
  .scroll-cue{display:none}
  .work-head,.price-head{grid-template-columns:1fr}
  /* work rail */
  .films{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:48px calc(var(--gut)*-1) 0!important;padding:0 var(--gut) 8px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .films::-webkit-scrollbar{display:none}
  .films>*,.films>*:nth-child(even){flex:0 0 76%;scroll-snap-align:center;transform:none!important;translate:none!important}
  .film{cursor:auto}
  .film .ovl,.film .snd{opacity:1;transform:none}
  .rail-ctrl{display:flex;align-items:center;justify-content:space-between;margin-top:26px!important;color:var(--ivory-3)}
  .rail-ctrl .track{flex:1;height:1px;background:var(--line-2);margin:0 18px!important;position:relative;overflow:hidden}
  .rail-ctrl .track b{position:absolute;left:0;top:0;height:1px;background:var(--champ);transition:transform .3s}
  .work-note.fine{margin-top:22px!important}
  .beats{grid-template-columns:1fr 1fr;border-top:0}
  .beat,.beat+.beat{padding:22px 0 30px!important;border-left:0;border-top:1px solid var(--ink)}
  .beat:nth-child(even){padding-left:16px!important;border-left:1px solid var(--pline)}
  .beat:nth-child(odd){padding-right:16px!important}
  .beat .fr{max-width:none}
  .beat h3{font-size:21px}.beat p{font-size:13.5px}
  .timeline{display:none}
  .svc{grid-template-columns:36px minmax(0,1fr) auto;gap:14px;padding:22px 0!important}
  .svc .num{display:none}
  .svc .ic{width:36px;height:36px}
  .svc:hover{padding-left:0!important}
  .steps{grid-template-columns:1fr;gap:0}
  .steps:before{left:27px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps .head{display:none}
  .step{display:grid;grid-template-columns:55px 1fr;gap:0 20px;padding:0 0 40px!important}
  .step .k{grid-row:1/span 4}
  .step h3{margin-top:12px!important}
  .nos{grid-template-columns:1fr 1fr;gap:10px 20px}
  /* pricing tabs */
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px!important;border:1px solid var(--line-2);border-radius:2px;padding:4px!important;position:sticky;top:calc(92px + var(--navtop));z-index:5;background:rgba(12,12,14,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .tabs button{height:48px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-3);border-radius:1px;transition:background .3s,color .3s}
  .tabs button[aria-selected="true"]{background:var(--ivory);color:var(--ink)}
  .tabs button.sigtab[aria-selected="true"]{background:var(--metal)}
  .tabs button[aria-selected="false"]{background:linear-gradient(180deg,rgba(238,233,224,.11),rgba(238,233,224,.05));box-shadow:inset 0 0 0 1px rgba(238,233,224,.28),inset 0 1px 0 rgba(255,255,255,.08);color:rgba(238,233,224,.88)}
  .tabs button[aria-selected="false"]:active{background:rgba(238,233,224,.16)}
  @media (hover:hover){.tabs button[aria-selected="false"]:hover{background:rgba(238,233,224,.13);color:var(--ivory)}}
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
  .tabs button[aria-selected="false"]{--tab-gold:linear-gradient(100deg,#CDB283 0%,#D6C29C 40%,#F6EBD3 50%,#D6C29C 60%,#CDB283 100%);background-image:var(--tab-gold),linear-gradient(180deg,rgba(238,233,224,.11),rgba(238,233,224,.05));background-size:100% 100%,100% 100%;background-repeat:no-repeat;-webkit-background-clip:text,padding-box;background-clip:text,padding-box;color:transparent;-webkit-text-fill-color:transparent}
  .tabs button[aria-selected="false"]:active{background-image:var(--tab-gold),linear-gradient(rgba(238,233,224,.16),rgba(238,233,224,.16))}
  @media (hover:hover){.tabs button[aria-selected="false"]:hover{background-image:var(--tab-gold),linear-gradient(rgba(238,233,224,.13),rgba(238,233,224,.13))}}
  }
  .tabs button[aria-selected="true"]{font-size:0}
  .tabs button[aria-selected="true"]::after{font-size:10.5px;letter-spacing:.12em}
  #tab-creative-essentials[aria-selected="true"]::after{content:"Level 1"}
  #tab-signature-creative[aria-selected="true"]::after{content:"Level 2"}
  #tab-performance-lab[aria-selected="true"]::after{content:"Level 3"}
  .plans{grid-template-columns:1fr;border:0;margin-top:20px!important}
  .js .plan{display:none;border:1px solid var(--line)!important}
  .js .plan.show{display:flex;animation:ans .5s var(--ease)}
  .plan.sig{margin:0!important;padding-top:64px!important;padding-bottom:40px!important}
  .plan .for{min-height:0}
  .plan .act{height:60px}
  .std-grid{grid-template-columns:1fr}
  .sd,.sd:nth-child(even){padding:30px 0 32px!important;border-left:0}
  .qa summary{grid-template-columns:1fr 28px;padding:22px 0!important}
  .qa summary .mono{display:none}
  .qa .ans{grid-template-columns:1fr;padding-bottom:24px!important}
  .qa .ans p{grid-column:1;font-size:15.5px}
  .final .ctas{flex-direction:column;align-items:stretch;gap:10px}
  .final .ctas .cta{justify-content:space-between}
  .final .ctas .ghost{justify-content:center}
  .final .meta{flex-direction:column;gap:8px}
  .page-head{padding-top:calc(140px + var(--navtop))!important}
  .ft{grid-template-columns:1fr 1fr}
  .ft>div:nth-child(4){grid-column:1/-1}
  .legal{flex-direction:column;align-items:flex-start;gap:16px}
  .dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:80;align-items:center;justify-content:space-between;gap:12px;padding:8px 8px 8px 16px!important;background:rgba(19,19,22,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-2);border-radius:4px;transform:translateY(140%);transition:transform .6s var(--ease)}
  .dock.on{transform:none}
  .dock .d-l{display:flex;flex-direction:column;line-height:1.25}
  .dock .d-l b{font-size:14px;font-weight:500;letter-spacing:-.01em}
  .dock .d-l span{color:var(--ivory-4);font-size:10px}
  .dock .cta{height:46px}
  .s-foot{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .hero h1{font-size:58px}
  .nav .slg{font-size:11px;gap:6px;margin-top:5px!important}.nav .slg .tl{width:18px}
  .nav .slg .tl:after{width:5px;height:5px;top:-2px}
  .scr.main{width:236px}
  .h2{font-size:44px}
  .sheet a.big{font-size:34px}
}
@media (max-width:360px){
  .nav .brand{gap:10px}
  .nav .wm{font-size:16px}
  .nav .slg{font-size:9.5px;gap:5px}.nav .slg .tl{width:12px}
  .burger{width:40px}
  .nos{grid-template-columns:1fr}
  .hero h1{font-size:52px}
  .h2{font-size:40px}
}
/* "From product photos" is the longest heading line (about 8.4em). On narrow
   phones it scales down just enough to stay on one line instead of orphaning "photos". */
@media (max-width:480px){
  .proc-head .h2{font-size:min(44px,calc((100vw - 48px) / 8.6))}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ciwfy-studio *,.ciwfy-studio *:before,.ciwfy-studio *:after,body.ciwfy-studio:after{animation:none!important;transition:none!important}
  .js .lines .ln>span{transform:none}
  .steps .head,.no:after{transform:scaleX(1)}
  /* Reveals still happen on scroll, as a short fade with no movement. */
  .js body.ciwfy-studio .rv{transform:none;transition:opacity .7s ease!important}
  /* The small red recording indicators keep running: they are tiny loops, not page movement. */
  .js body.ciwfy-studio .nav .slg .tl:after{animation:scrub 3.2s var(--ease) infinite!important}
  .js body.ciwfy-studio .status .dot{animation:rec 2s infinite!important}
  .js body.ciwfy-studio .ui-top .rec:before{animation:blink 1s steps(2) infinite!important}
  .js body.ciwfy-studio .timeline i{animation:tl 9s linear infinite!important}
}

/* ---------- full-ad player (9:16 dialog) ---------- */
html.fa-open{overflow:hidden}
.fa{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:clamp(14px,3vh,32px) 16px;--h:min(calc(100svh - 196px),calc((100vw - 32px) * 16 / 9),1280px)}
.fa[hidden]{display:none}
.fa-back{position:absolute;inset:0;background:rgba(7,7,8,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .45s var(--ease)}
.fa.in .fa-back{opacity:1}
.fa-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.fa.in .fa-wrap{opacity:1;transform:none}
.fa-stage{position:relative;height:var(--h);aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line-2),0 60px 120px -40px rgba(0,0,0,.9)}
.fa-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer}
.fa-cap{position:absolute;left:8%;right:8%;bottom:12%;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,calc(var(--h) * .03),30px);line-height:1.2;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.65);opacity:0;transition:opacity .25s;pointer-events:none}
.fa-cap.on{opacity:1}
.fa .fa-big{padding:0;position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:0;background:rgba(238,233,224,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s}
.fa.is-paused .fa-big{opacity:1;pointer-events:auto}
/* At the end, replay sits above the end card instead of on the product name. */
.fa.is-ended .fa-big{top:9%;width:54px;height:54px;margin:0 0 0 -27px}
.fa-ctrl{width:calc(var(--h) * 9 / 16);display:flex;align-items:center;gap:12px;color:var(--ivory-2)}
.fa .fa-ctrl button{padding:0;flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:var(--ivory);background:transparent;border:1px solid var(--line-2);cursor:pointer;transition:border-color .3s,color .3s}
.fa .fa-ctrl button:hover{border-color:var(--champ);color:var(--champ)}
.fa-cc{font-size:10px;letter-spacing:.1em}
.fa .fa-ctrl button[aria-pressed="false"]{color:var(--ivory-4)}
.fa-seek{flex:1;height:24px;position:relative;cursor:pointer}
.fa-seek:before,.fa-seek b{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.fa-seek:before{background:var(--line-2)}
.fa-seek b{background:var(--metal);transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.fa-time{flex:none;font-size:11px;letter-spacing:.12em;min-width:40px;text-align:right}
.fa-cta{width:calc(var(--h) * 9 / 16);display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-2);border-radius:8px;color:var(--ivory-2);font-size:14px;transition:border-color .3s}
.fa-cta b{color:var(--ivory);font-weight:500;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.fa-cta:hover{border-color:var(--champ)}.fa-cta:hover b{color:var(--champ)}
.fa .fa-x{padding:0;position:absolute;top:max(14px,env(safe-area-inset-top));right:16px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(19,19,22,.85);border:1px solid var(--line-2);color:var(--ivory);display:grid;place-items:center;cursor:pointer;transition:border-color .3s,color .3s}
.fa .fa-x:hover{border-color:var(--champ);color:var(--champ)}
.fa button:focus-visible,.fa a:focus-visible,.fa-seek:focus-visible{outline:2px solid var(--champ);outline-offset:3px}
@media (max-width:600px){
  .fa{padding:70px 12px 12px;align-items:start;--h:min(calc(100svh - 232px),calc((100vw - 24px) * 16 / 9))}
  .fa-cta{font-size:13px;padding:12px 14px}
}