@font-face{font-family:'Bricolage Grotesque';src:url('fonts/bricolage-grotesque.woff2') format('woff2');font-weight:500 800;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');font-weight:400 700;font-display:swap}

.imv.light{--page-bg:#F6FAFD;--bg:#F6FAFD;--bg-2:#EAF5FD;--panel:#FFFFFF;--input:#FFFFFF;
--ink:#041D56;--ink-2:#37486B;--ink-3:#56617B;--line:#DCE8F3;--line-strong:#BFD2E4;
--key:#266CA9;--key-hover:#1F5A91;--key-ink:#FFFFFF;--key-text:#266CA9;--key-soft:rgba(38,108,169,.18);--key-glow:0 12px 24px -12px rgba(4,29,86,.45);
--focus:#266CA9;--white:#FFFFFF;--on-media:#FFFFFF;--on-media-2:rgba(255,255,255,.92);--on-media-3:rgba(255,255,255,.86);--on-media-line:rgba(255,255,255,.5);--error:#C8322B;
--head-ink:#FFFFFF;--head-ink-solid:#041D56;--head-bg:rgba(255,255,255,.86);
--quote-bg:#0F2573;--quote-ink:#FFFFFF;--quote-ink-2:#D6ECFB;--quote-mark:#ADE1FB;--quote-light:rgba(173,225,251,.42);--band:#041D56;--band-ink:#FFFFFF;--band-ink-2:#CFE5F6;--band-accent:#ADE1FB;--band-line:rgba(255,255,255,.16);--band-hover:#0F2573;--band-light:rgba(38,108,169,.34);--care-bg:#01082D;--care-ink:#FFFFFF;--care-ink-2:#CFE5F6;--care-line:rgba(255,255,255,.32);
--foot-word:#041D56;--foot-size:min(17.6vw,256px);--scroll-thumb:#BFD2E4;
--f-display:'Bricolage Grotesque',system-ui,sans-serif;--f-body:'Inter',system-ui,sans-serif;
--w-display:800;--w-section:800;--w-quote:600;--case-display:none;--stretch-display:100%;
--track-display:-.025em;--track-title:-.01em;--track-word:-.03em;
--r-btn:999px;--r-frame:20px;--r-panel:28px;--r-input:12px;--r-chip:16px;
--fab-bg:linear-gradient(135deg,#FFB321 0%,#FF7A1A 55%,#FF5A1F 100%);--fab-ink:#041D56;--fab-ic-bg:#041D56;--fab-ic-ink:#FFFFFF;--fab-ring:#FF7A1A;
--fab-shadow:0 14px 28px -12px rgba(4,29,86,.5),0 2px 6px rgba(4,29,86,.18);--fab-shadow-hover:0 20px 36px -12px rgba(4,29,86,.55),0 2px 6px rgba(4,29,86,.18)}
.light .h-display{font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,7.2vw,6rem);line-height:.98;letter-spacing:-.025em}
.light .h-display em{font-style:normal;color:var(--key)}
.light .h-section{font-family:var(--f-display);font-weight:800;font-size:clamp(2.375rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.025em}
.light .brand-word{letter-spacing:.04em}
.hero-light{height:68vh;max-height:900px;min-height:420px;width:100%}
.hero-light .hero-shade{background:linear-gradient(180deg,rgba(5,6,10,.58) 0%,rgba(5,6,10,.28) 12%,rgba(5,6,10,0) 26%,rgba(5,6,10,0) 62%,rgba(5,6,10,.74) 100%)}
.intro{padding-top:clamp(48px,6vw,84px);padding-bottom:clamp(24px,3vw,40px)}
.intro-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-top:40px}
.intro-sub{max-width:560px;font-size:1.1875rem;color:var(--ink-2)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.light .work{padding-top:clamp(80px,10vw,150px)}
.light .careers .h-section{color:var(--white)}
.light .intro .h-display{color:var(--ink)}
.light .careers .btn-key{background:var(--white);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.light .careers .btn-key:hover{background:#E6ECFB;box-shadow:none}}
.light .careers::before{content:"";position:absolute;right:-260px;top:-330px;width:440px;height:440px;border-radius:50%;border:64px solid var(--key);opacity:.55}
.light .seg button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.light .bd-now,.light .bd-tag{background:rgba(255,255,255,.88);color:var(--ink)}
.light .tm-pic{border-radius:20px}
/* logo */
.light .brand .logo{height:30px;width:auto}
.light .foot-logo{width:clamp(150px,13vw,190px);color:var(--ink)}
.light .foot-logo svg{width:100%;height:auto}
.light .foot-row{margin-top:36px}
/* selected work: one 16:9 carousel */
.wk{position:relative}
/* the whole frame always fits one screen (header hides on the way down) */
.wk-stage{width:min(100%,calc((100vh - 120px) * 16 / 9));width:min(100%,calc((100svh - 120px) * 16 / 9));margin-inline:auto}
.wk-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-frame);overflow:hidden;background:#0A0B0E;isolation:isolate}
.work-card.wk-slide{position:absolute;inset:0;display:block;opacity:0;visibility:hidden}
.wk-slide .work-frame{position:absolute;inset:0;border-radius:0}
.wk-slide.is-on{opacity:1;visibility:visible}
.wk-slide.is-top{z-index:2}
/* lower third */
.wk-shade{position:absolute;left:0;right:0;bottom:0;height:68%;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,.46) 38%,rgba(5,6,10,.86) 100%)}
.wk-lower{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 clamp(20px,3vw,44px) clamp(44px,4.6vw,64px);color:var(--white);pointer-events:none}
.wk-info{flex:1;min-width:0;max-width:820px}
.wk-count{font-size:0.8125rem;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--on-media-2);margin-bottom:12px}
.wk-count .wk-cur{color:var(--white)}
.wk-title{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.wk-cap-t{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(1.625rem,3.4vw,3.25rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance;text-shadow:0 2px 24px rgba(5,6,10,.35)}
.wk-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:0.9375rem;color:var(--on-media-3)}
.wk-count,.wk-meta{text-shadow:0 1px 12px rgba(5,6,10,.7)}
.wk-hint{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--white);opacity:0;transform:translateX(-6px)}
.wk-hint .ic-arrow{width:16px;height:16px}
.wk-nav{display:flex;gap:10px;flex:none;pointer-events:auto}
.wk-btn{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(10,12,18,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wk-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .wk-btn:hover{background:var(--white);border-color:var(--white);color:var(--ink)}
  .wk-stage:hover .wk-hint{opacity:1;transform:none}
}
@media (hover:none){ .wk-hint{opacity:1;transform:none} }
/* progress / index inside the frame */
.wk-dots{position:absolute;left:clamp(20px,3vw,44px);right:clamp(20px,3vw,44px);bottom:clamp(10px,1.2vw,16px);z-index:4;display:flex;gap:6px;list-style:none;margin:0;padding:0}
.wk-dots li{flex:1;min-width:0}
.wk-dot{all:unset;box-sizing:border-box;position:relative;display:block;width:100%;height:24px;cursor:pointer}
.wk-dot::before,.wk-dot .wk-prog{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.wk-dot::before{background:rgba(255,255,255,.32)}
.wk-dot .wk-prog{background:var(--white);transform:scaleX(0);transform-origin:left}
.wk-dot[aria-current="true"] .wk-prog{transform:scaleX(1)}
.wk-dot:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){ .wk-dot:hover::before{background:rgba(255,255,255,.6)} }
.light .case-frame{aspect-ratio:16/9}
.light .dlg{max-width:min(1040px,calc(100vw - 32px))}
/* what we do: compact two-column list (previous layout) */
/* What we do: a navy band, lit from the top-left like a key light falling on the title */
.svc1{position:relative;overflow:hidden;isolation:isolate;padding:clamp(96px,11vw,160px) 0;background:var(--band);color:var(--band-ink)}
.svc1::before{content:"";position:absolute;z-index:-1;left:-12%;top:-30%;width:72%;height:120%;background:radial-gradient(closest-side,var(--band-light),rgba(38,108,169,0) 100%);pointer-events:none}
.light .svc1 .h-section{color:var(--band-ink)}
.svc1-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,96px)}
.svc1-side p{color:var(--band-ink-2);max-width:380px;margin-top:20px;font-size:1.125rem;line-height:1.55}
.svc1-spark{margin-top:44px;width:88px;color:var(--band-accent)}
.svc1-spark svg{width:100%;height:auto}
.svc1-list{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--band-line)}
.svc1-row{display:flex;gap:28px;align-items:baseline;padding:28px 16px 28px 0;border-top:1px solid var(--band-line);border-radius:6px;transition:background-color 200ms ease}
.svc1-row>*{transition:transform 300ms var(--ease-out)}
.svc1-n{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--band-accent);width:32px;flex:none;font-variant-numeric:tabular-nums}
.svc1-txt{flex:1;display:flex;flex-wrap:wrap;gap:8px 32px;min-width:0}
.svc1-txt h3{flex:1 1 220px;font-family:var(--f-display);font-weight:700;font-size:1.75rem;letter-spacing:-.02em;line-height:1.15;color:var(--band-ink)}
.svc1-txt p{flex:1 1 280px;color:var(--band-ink-2);font-size:1.0625rem;line-height:1.55;max-width:46ch}
@media (max-width:900px){
  .svc1-in{grid-template-columns:minmax(0,1fr)}
  .svc1-spark{display:none}
  .svc1-row{gap:16px}
  .svc1-txt h3{font-size:1.375rem}
}
/* clients follows Selected work (both on white): the work section's bottom padding is the gap */
.light .clients{padding-top:0}
.light .clients{padding-bottom:clamp(72px,8vw,128px)}
/* ---------- device adaptation ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.hero-light{height:68vh;height:68svh;min-height:min(420px,92svh)}
.hero-meta>*{flex-shrink:0}
.hero-meta .reel-progress{flex:1 1 auto;min-width:48px}
@media (max-width:1100px){
  .hero-meta .reel-progress{display:none}
  .hero-meta{gap:18px}
  .hero-meta .reel-note{margin-right:auto}
}
@media (max-width:600px){
  .intro .h-display{padding-right:48px}
  .fab{min-height:52px;padding:5px}
  .fab-badge{width:42px;height:42px}
}
/* touch: comfortable hit areas, no sticky hover states */
@media (pointer:coarse){
  .nav a,.foot-row a,.contact-link,.brand,.head-cta{min-height:44px;display:inline-flex;align-items:center}
  .foot-row nav{gap:4px 20px}
  .contact-mail{display:inline-flex;align-items:center;min-height:44px}
}
@media (hover:none){
}
/* phone held sideways: keep the reel and the headline on one screen */
@media (max-height:500px) and (orientation:landscape){
  .hero-light{height:86svh;min-height:0}
  .intro{padding-top:36px}
  .light .h-display{font-size:clamp(2.25rem,6vw,3.5rem)}
}
.hero-meta{text-shadow:0 1px 10px rgba(5,6,10,.55)}
.menu-open .fab-wrap{visibility:hidden}
/* selected work on small screens: the lower third tightens, arrows stay inside the frame */
@media (max-width:900px){
  .wk-lower{gap:16px;padding:0 20px 44px}
  .wk-cap-t{font-size:clamp(1.375rem,4.4vw,2.125rem)}
  .wk-meta{font-size:0.875rem}
}
@media (max-width:600px){
  .wk-stage{border-radius:16px}
  .wk-shade{height:82%;background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,.56) 34%,rgba(5,6,10,.88) 100%)}
  .wk-lower{gap:12px;padding:0 14px 34px;align-items:flex-end}
  .wk-count{font-size:0.75rem;margin-bottom:6px}
  .wk-cap-t{font-size:clamp(1.0625rem,5.2vw,1.375rem);line-height:1.1}
  .wk-meta{margin-top:4px;font-size:0.75rem}
  .wk-hint{display:none}
  .wk-nav{gap:6px}
  .wk-btn{width:44px;height:44px}
  .wk-dots{left:14px;right:14px;bottom:4px;gap:4px}
  .wk-dot{height:24px}
  .ph-tag{left:10px;top:10px;padding:4px 10px;font-size:0.75rem}
}
/* legibility over the showreel: the menu pill and the meta line carry their own scrim */
.site-head:not(.is-solid) .menu-btn{background:rgba(5,6,10,.24);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-meta .reel-note{opacity:.85}
/* client quote: full-bleed cobalt band, the one bright moment between two white sections */
.light .quote{position:relative;overflow:hidden;isolation:isolate;background:var(--quote-bg);color:var(--quote-ink);padding-top:clamp(112px,14vw,200px);padding-bottom:clamp(112px,14vw,200px)}
.light .quote::before{content:"";position:absolute;z-index:-1;right:-14%;bottom:-40%;width:78%;height:130%;background:radial-gradient(closest-side,var(--quote-light),rgba(173,225,251,0) 100%);pointer-events:none}
.light .quote figure{max-width:1120px}
.light .quote .quote-mark{display:block;color:var(--quote-mark);width:clamp(56px,7vw,96px);height:auto;margin-bottom:clamp(20px,3vw,36px)}
.light .quote blockquote{font-weight:700;font-size:clamp(2.125rem,4.4vw,4.25rem);line-height:1.18;letter-spacing:-.025em;color:var(--quote-ink);text-wrap:balance}
.light .quote figcaption{margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--band-line);max-width:420px;color:var(--quote-ink-2);font-size:1.0625rem;font-weight:500}
/* the legibility scrim belongs to the hero state only; an open menu sits on a light page */
.menu-open .site-head .menu-btn{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}

body{margin:0;background:var(--page-bg)}
.imv{--media-ink:#F5F2EC;--media-ink-2:rgba(245,242,236,.92);--scrim:rgba(8,9,12,.62);--gutter:clamp(20px,4vw,64px);--ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);--ease-drawer:cubic-bezier(0.32,0.72,0,1);--ease:var(--ease-out);background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;caret-color:var(--key);overflow-x:clip}
.imv *,.imv *::before,.imv *::after{box-sizing:border-box}
.imv ::selection{background:var(--key);color:var(--key-ink)}
:where(.imv) a{color:inherit}
.imv :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.imv svg{display:block}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:var(--key);color:var(--key-ink);padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:600}
.skip:focus{top:16px}
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line>span{display:block}
h1,h2,h3,p,figure,blockquote,dl,dd,ul{margin:0}
ul{padding:0;list-style:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px;border-radius:var(--r-btn);font:inherit;font-size:1rem;font-weight:600;letter-spacing:.005em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s}
.btn .ic-arrow{transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.btn:hover .ic-arrow{transform:translateX(5px)}}
.btn-key{background:var(--key);color:var(--key-ink)}
@media (hover:hover) and (pointer:fine){.btn-key:hover{background:var(--key-hover);box-shadow:var(--key-glow)}}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
@media (hover:hover) and (pointer:fine){.btn-ghost:hover{border-color:var(--ink)}}

/* header */
.site-head{position:fixed;top:0;left:0;right:0;z-index:30;height:76px;color:var(--head-ink);transition:background-color .4s,color .4s,border-color .4s;border-bottom:1px solid transparent}
.site-head.is-solid{background:var(--head-bg);color:var(--head-ink-solid);border-bottom-color:var(--line);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.head-in{height:100%;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand-word{font-family:var(--f-display);font-weight:800;font-size:1.1875rem;letter-spacing:.06em;text-transform:uppercase}
.brand-word span{font-weight:500;opacity:.7}
.nav{display:flex;gap:34px;font-size:0.9375rem;font-weight:500}
.nav a,.head-cta{text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1);transform-origin:left}}
.head-cta{font-size:0.9375rem;font-weight:600;padding:10px 18px;border-radius:var(--r-btn);border:1px solid currentColor}
@media (hover:hover) and (pointer:fine){.head-cta:hover{background:var(--key);border-color:var(--key);color:var(--key-ink)}}
.menu-btn{display:none;font:inherit;font-size:0.9375rem;font-weight:600;color:inherit;background:none;border:1px solid currentColor;border-radius:var(--r-btn);padding:9px 16px;min-height:44px;cursor:pointer}
.menu{position:fixed;inset:0;z-index:29;background:var(--bg);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:96px var(--gutter) 48px}
.menu[hidden]{display:none}
.menu a{font-family:var(--f-display);font-size:clamp(2.5rem,11vw,4rem);line-height:1.1;text-decoration:none;color:var(--ink);font-weight:700}
.menu-open .site-head{color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden;background:#05060A;color:var(--media-ink)}
.reel{position:absolute;inset:0;will-change:transform}
.ambient{display:none}
.reel-shots,.reel-shot{position:absolute;inset:0}
.reel-shot:not(:first-child){opacity:0}
.reel-shot svg,.reel-video{width:100%;height:100%;object-fit:cover;transform-origin:50% 55%}
.hero-shade{position:absolute;inset:0;background:radial-gradient(90% 70% at 0% 100%,rgba(5,6,10,.55) 0%,rgba(5,6,10,0) 60%),linear-gradient(180deg,rgba(5,6,10,.55) 0%,rgba(5,6,10,0) 22%,rgba(5,6,10,0) 48%,rgba(5,6,10,.78) 100%)}
.hero-meta{position:absolute;left:0;right:0;bottom:28px;display:flex;align-items:center;gap:20px;padding-right:calc(var(--gutter) + 190px);font-size:0.8125rem;color:var(--media-ink-2)}
.timecode{font-family:ui-monospace,'SF Mono','Cascadia Mono','Roboto Mono',Menlo,Consolas,monospace;font-size:0.8125rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;min-width:96px}
.reel-progress{flex:1;height:1px;background:rgba(245,242,236,.25);position:relative;overflow:hidden}
.reel-progress i{position:absolute;inset:0;background:var(--media-ink);transform-origin:left;transform:scaleX(.35)}
.sound,.reel-full{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:inherit;font:inherit;font-size:0.8125rem;font-weight:500;cursor:pointer;min-height:44px;padding:0 4px}
.sound[aria-pressed="false"] .snd-wave{opacity:.25}
.reel-note{opacity:.6}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,72px)}
.sec-head-tight{margin-bottom:32px}
.sec-note{font-size:0.875rem;color:var(--ink-3)}
.sec-lede{max-width:440px;color:var(--ink-2);font-size:1.0625rem}

.h-section,.h-display{color:var(--ink)}
.hero .h-display{color:var(--media-ink)}
/* work */
.work{padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(96px,12vw,180px)}
.work-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.6vw,44px);row-gap:clamp(64px,8vw,120px)}
.work-card{all:unset;display:flex;flex-direction:column;gap:20px;cursor:pointer;min-width:0}
.work-card:focus-visible{outline:2px solid var(--focus);outline-offset:6px;border-radius:var(--r-frame)}
.work-frame{position:relative;display:block;overflow:hidden;border-radius:var(--r-frame);background:#111}
.work-frame svg{width:100%;height:100%;transition:transform 1.4s var(--ease)}
@media (hover:hover) and (pointer:fine){.work-card:hover .work-frame svg{transform:scale(1.045)}}
.ph-tag{position:absolute;left:16px;top:16px;z-index:1;padding:6px 12px;border-radius:var(--r-btn);background:rgba(8,9,12,.76);color:var(--media-ink);font-size:0.75rem;font-weight:600;letter-spacing:.04em}
.work-view{position:absolute;left:20px;bottom:20px;padding:9px 16px;border-radius:var(--r-btn);background:rgba(8,9,12,.72);color:var(--media-ink);font-size:0.8125rem;font-weight:600;letter-spacing:.02em;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .6s var(--ease)}
.work-card:focus-visible .work-view{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){.work-card:hover .work-view{opacity:1;transform:none}}
.work-meta{display:grid;grid-template-columns:1fr auto;column-gap:24px;row-gap:4px}
.work-title{font-family:var(--f-display);font-size:clamp(1.25rem,1.7vw,1.625rem);font-weight:700;line-height:1.2;letter-spacing:var(--track-title)}
.work-sub{color:var(--ink-3);font-size:0.9375rem;text-align:right;white-space:nowrap}
.work-scope{grid-column:1/-1;color:var(--ink-2);font-size:0.9375rem}
.w-a{grid-column:1/-1}.w-a .work-frame{aspect-ratio:21/9}
.w-b{grid-column:1/span 7}.w-b .work-frame{aspect-ratio:16/10}
.w-c{grid-column:9/span 4;align-self:end}.w-c .work-frame{aspect-ratio:4/5}
.w-d{grid-column:1/span 5}.w-d .work-frame{aspect-ratio:4/5}
.w-e{grid-column:7/span 6;align-self:center}.w-e .work-frame{aspect-ratio:16/10}
.w-f{grid-column:3/span 8}.w-f .work-frame{aspect-ratio:16/9}

/* breakdown */
.bd{background:var(--bg-2);padding:clamp(96px,11vw,170px) 0}
.bd-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-frame);background:#0A0B0E}
.bd-layer{position:absolute;inset:0;width:100%;height:100%}
.bd-now,.bd-tag{position:absolute;top:20px;padding:8px 14px;border-radius:var(--r-btn);background:rgba(8,9,12,.66);color:var(--media-ink);font-size:0.8125rem;font-weight:600;letter-spacing:.02em}
.bd-now{left:20px}
.bd-tag{right:20px;font-weight:500;opacity:.85}
.bd-controls{margin-top:28px}
.bd-passes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bd-pass{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:6px;padding:16px 4px 4px;color:var(--ink-3);border-top:1px solid var(--line);transition:color .3s}
@media (hover:hover) and (pointer:fine){.bd-pass:hover{color:var(--ink-2)}}
.bd-pass.done{color:var(--ink-2)}
.bd-pass[aria-pressed="true"]{color:var(--ink)}
.bd-pass:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.bd-idx{font-family:var(--f-body);font-size:0.8125rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.bd-pass[aria-pressed="true"] .bd-idx{color:var(--key-text)}
.bd-name{font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,1.4vw,1.25rem);letter-spacing:var(--track-title)}
.bd-bar{height:2px;background:var(--line);margin-top:-1px;position:relative;overflow:hidden}
.bd-bar i{position:absolute;inset:0;background:var(--key);transform-origin:left;transform:scaleX(1)}
.bd-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:22px;flex-wrap:wrap}
.bd-note{color:var(--ink-2);max-width:620px;min-height:1.6em}
.bd-replay{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--ink);font:inherit;font-size:0.9375rem;font-weight:600;cursor:pointer;min-height:44px;padding:0}
@media (hover:hover) and (pointer:fine){.bd-replay:hover{color:var(--key-text)}}

/* services */
.svc{padding-top:clamp(96px,12vw,180px);padding-bottom:clamp(80px,10vw,150px);position:relative}
.svc-list{border-bottom:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px;align-items:baseline;padding:clamp(24px,2.6vw,38px) 0;border-top:1px solid var(--line)}
.svc-name{font-family:var(--f-display);font-weight:var(--w-section);font-size:clamp(2rem,4.4vw,4.25rem);line-height:1.02;letter-spacing:var(--track-display);text-transform:var(--case-display);font-stretch:var(--stretch-display);transition:transform .7s var(--ease),color .4s}
@media (hover:hover) and (pointer:fine){.svc-row:hover .svc-name{transform:translateX(18px);color:var(--key-text)}}
.svc-desc{color:var(--ink-2);max-width:460px}
.svc-preview{position:fixed;left:0;top:0;z-index:25;pointer-events:none;visibility:hidden;width:340px}
.svc-card{position:relative;aspect-ratio:4/3;border-radius:var(--r-frame);overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);opacity:0}
.svc-img{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.svc-img svg{width:100%;height:100%}

/* clients */
.clients{padding-bottom:clamp(96px,11vw,170px)}
.h-small{font-family:var(--f-display);font-size:0.9375rem;font-weight:600;letter-spacing:.04em;color:var(--ink-2)}
.mq{display:flex;flex-direction:column;gap:14px}
.mq-row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content}
.mq-logo{display:inline-flex;align-items:center;gap:12px;height:64px;padding:0 40px;color:var(--ink-3);font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.02em;white-space:nowrap;transition:color .3s}
@media (hover:hover) and (pointer:fine){.mq-logo:hover{color:var(--ink)}}
.mq-a{font-family:var(--f-display);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:1rem}
.mq-b{font-family:var(--f-body);font-weight:500;letter-spacing:-.01em}
.mq-c{font-family:var(--f-display);font-weight:400;font-style:italic;letter-spacing:.01em}

/* studio */
.studio{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,7vw,120px);padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(110px,13vw,190px)}
.studio-body{display:flex;flex-direction:column;gap:22px;color:var(--ink-2);max-width:640px;padding-top:12px}
.studio-lead{font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.5;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px;padding-top:28px;border-top:1px solid var(--line)}
.facts dt{font-size:0.8125rem;color:var(--ink-3);letter-spacing:.02em}
.facts dd{margin-top:4px;color:var(--ink);font-weight:500}

/* team */
.team{background:var(--bg-2);padding:clamp(96px,11vw,170px) 0}
.tm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.tm:nth-child(2){margin-top:clamp(0px,6vw,96px)}
.tm:nth-child(3){margin-top:clamp(0px,3vw,48px)}
.tm-pic{position:relative;aspect-ratio:3/4;border-radius:var(--r-frame);overflow:hidden;background:#05070D}
.tm-pic svg{width:100%;height:100%;transition:transform 1.4s var(--ease)}
@media (hover:hover) and (pointer:fine){.tm:hover .tm-pic svg{transform:scale(1.05)}}
.tm-tag{position:absolute;left:16px;bottom:16px;background:rgba(5,7,13,.62);color:#EDEFF6;font-size:0.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-btn)}
.tm-name{margin-top:22px;font-family:var(--f-display);font-weight:700;font-size:1.5rem;letter-spacing:var(--track-title)}
.tm-role{color:var(--key-text);font-weight:600;font-size:0.9375rem;margin-top:2px}
.tm-line{color:var(--ink-2);font-size:0.9375rem;margin-top:10px;max-width:38ch}

/* quote */
.quote{padding-top:clamp(110px,13vw,190px);padding-bottom:clamp(110px,13vw,190px)}
.quote figure{max-width:1080px}
.quote blockquote{font-family:var(--f-display);font-weight:var(--w-quote);font-size:clamp(1.875rem,3.4vw,3.25rem);line-height:1.3;letter-spacing:var(--track-display)}
.quote figcaption{margin-top:28px;color:var(--ink-3);font-size:0.9375rem}

/* careers */
.careers{background:var(--care-bg);color:var(--care-ink);padding:clamp(96px,11vw,170px) 0;position:relative;overflow:hidden}
.careers-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(32px,6vw,100px);align-items:end;position:relative}
.careers-body{display:flex;flex-direction:column;align-items:flex-start;gap:28px;color:var(--care-ink-2)}
.roles{display:flex;flex-wrap:wrap;gap:10px}
.roles li{border:1px solid var(--care-line);border-radius:var(--r-btn);padding:8px 16px;font-size:0.875rem;font-weight:500;color:var(--care-ink)}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(32px,6vw,100px);padding-top:clamp(110px,13vw,190px);padding-bottom:clamp(110px,13vw,190px)}
.contact-side{display:flex;flex-direction:column;align-items:flex-start;gap:24px;color:var(--ink-2)}
.contact-mail{font-family:var(--f-display);font-size:clamp(1.5rem,2.4vw,2.25rem);font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--key)}
@media (hover:hover) and (pointer:fine){.contact-mail:hover{color:var(--key-text)}}
.contact-link{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--ink);text-decoration:none}
.contact-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(24px,3.4vw,48px)}
.contact-form{display:flex;flex-direction:column;gap:20px}
.seg{display:inline-flex;align-self:flex-start;gap:4px;padding:4px;border:1px solid var(--line-strong);border-radius:var(--r-btn)}
.seg button{font:inherit;font-size:0.875rem;font-weight:600;border:0;border-radius:var(--r-btn);padding:10px 18px;min-height:42px;cursor:pointer;background:transparent;color:var(--ink-2);transition:background-color .3s,color .3s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.f-grid[hidden]{display:none}
.fld{display:flex;flex-direction:column;gap:8px;font-size:0.875rem;font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:1rem;font-weight:400;color:var(--ink);background:var(--input);border:1px solid var(--line-strong);border-radius:var(--r-input);padding:14px 16px;transition:border-color .3s,box-shadow .3s;width:100%}
.fld textarea{resize:vertical;min-height:132px}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--key);box-shadow:0 0 0 3px var(--key-soft)}
.fld input:user-invalid{border-color:var(--error)}
.f-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.f-hint{font-size:0.8125rem;color:var(--ink-3)}
.form-done{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0}
.form-done[hidden]{display:none}
.form-done h3{font-family:var(--f-display);font-size:1.875rem;font-weight:700;letter-spacing:var(--track-title)}
.form-done h3:focus{outline:none}
.form-done p{color:var(--ink-2)}

/* footer */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 32px;overflow:hidden}
.foot-word{font-family:var(--f-display);font-weight:800;font-size:var(--foot-size);line-height:.82;letter-spacing:var(--track-word);font-stretch:var(--stretch-display);white-space:nowrap;color:var(--foot-word)}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px;font-size:0.875rem;color:var(--ink-3)}
.foot-row nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-row a{text-decoration:none;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){.foot-row a:hover{color:var(--ink)}}

/* dialogs */
.dlg{padding:0;border:0;background:transparent;max-width:min(1200px,calc(100vw - 32px));width:100%;max-height:calc(100vh - 32px);color:var(--ink);overflow:visible}
.dlg::backdrop{background:rgba(4,5,8,.78)}
.dlg-panel{position:relative;background:var(--bg-2);border-radius:var(--r-panel);overflow:auto;max-height:calc(100vh - 32px);box-shadow:0 40px 100px -30px rgba(0,0,0,.6)}
.dlg-close{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(8,9,12,.7);color:var(--media-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){.dlg-close:hover{background:rgba(8,9,12,.92)}}
.case-frame{aspect-ratio:21/9;overflow:hidden;background:#0A0B0E}
.case-frame svg{width:100%;height:100%}
.case-body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr);gap:20px 48px;padding:clamp(24px,3.4vw,44px)}
.case-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.625rem,2.4vw,2.25rem);letter-spacing:var(--track-title);line-height:1.1}
.case-format{color:var(--ink-3);margin-top:6px}
.case-desc{color:var(--ink-2)}
.case-facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-top:24px;border-top:1px solid var(--line)}
.case-facts dt{font-size:0.8125rem;color:var(--ink-3)}
.case-facts dd{margin-top:4px;font-weight:500}
.case-body .btn{grid-column:1/-1;justify-self:start}
.reel-big{position:relative;aspect-ratio:16/9}
.reel-big svg{width:100%;height:100%}
.reel-big p{position:absolute;left:24px;bottom:22px;color:var(--media-ink);background:rgba(8,9,12,.66);padding:8px 14px;border-radius:var(--r-btn);font-size:0.875rem}
.dialog-open{overflow:hidden}

/* floating contact */
.fab-wrap{position:fixed;right:24px;bottom:24px;z-index:40}
.fab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;padding:8px 24px 8px 8px;min-height:58px;border-radius:999px;background:var(--fab-bg);color:var(--fab-ink);text-decoration:none;font-weight:700;font-size:0.9375rem;letter-spacing:.01em;box-shadow:var(--fab-shadow);transition:box-shadow .4s}
@media (hover:hover) and (pointer:fine){.fab:hover{box-shadow:var(--fab-shadow-hover)}}
.fab-badge{position:relative;width:42px;height:42px;flex:none}
.fab-ring{position:absolute;inset:0;border-radius:50%;background:var(--fab-ring)}
.fab-ic{position:absolute;inset:0;border-radius:50%;background:var(--fab-ic-bg);color:var(--fab-ic-ink);display:flex;align-items:center;justify-content:center;transform-origin:50% 40%}
.fab-shine{position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:translateX(-160%) skewX(-20deg);pointer-events:none}

/* browser surfaces */
html{scrollbar-color:var(--scroll-thumb) var(--page-bg);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--page-bg)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:10px;border:2px solid var(--page-bg)}

/* responsive */
@media (max-width:1080px){
  .nav{gap:22px}
  .head-cta{display:none}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .work-grid{grid-template-columns:minmax(0,1fr);row-gap:56px}
  .work-grid>.work-card{grid-column:1/-1;align-self:auto}
  .w-c .work-frame,.w-d .work-frame{aspect-ratio:4/4.4}
  .svc-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .svc-row:hover .svc-name{transform:none}
  .studio,.careers-in,.contact{grid-template-columns:minmax(0,1fr);row-gap:36px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-grid{grid-template-columns:minmax(0,1fr);max-width:460px}
  .tm:nth-child(n){margin-top:0}
  .bd-passes{grid-template-columns:repeat(5,minmax(132px,1fr));overflow-x:auto;scrollbar-width:none}
  .bd-bar{display:none}
  .case-body{grid-template-columns:minmax(0,1fr)}
  .case-facts{grid-template-columns:minmax(0,1fr)}
  .case-frame{aspect-ratio:16/10}
}
@media (max-width:600px){
  .imv{font-size:1rem}
  .f-grid{grid-template-columns:minmax(0,1fr)}
  .hero-meta{padding-right:calc(var(--gutter) + 64px);gap:14px;font-size:0.75rem}
  .hero-meta .reel-progress,.hero-meta .timecode{display:none}
  .hero-meta .sound,.hero-meta .reel-full,.hero-meta .reel-note{white-space:nowrap}
  .hero-meta .reel-note{order:-1}
  .fab-wrap{right:16px;bottom:16px}
  .fab{padding:7px;min-height:56px}
  .intro-sub,.hero-sub,.hero-actions{padding-right:64px}
  .fab>span:nth-child(2){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .work-meta{grid-template-columns:minmax(0,1fr)}
  .work-sub{text-align:left}
}
/* ================= motion + touch pass (Emil Kowalski: emil-design-eng / animate / mobile-native) ================= */
/* hover: only where a real pointer hovers */
@media (hover:hover) and (pointer:fine){
  .svc1-row:hover{background:var(--band-hover)}
  .svc1-row:hover>*{transform:translateX(16px)}
}
@media (max-width:900px){ .svc1-row:hover>*{transform:none} }
/* durations: small UI under 300ms */
.btn{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,box-shadow 200ms ease,scale 160ms var(--ease-out)}
.btn .ic-arrow{transition:transform 200ms var(--ease-out)}
.nav a::after{transition:transform 300ms var(--ease-out)}
.work-view{transition:opacity 200ms var(--ease-out),transform 250ms var(--ease-out)}
.work-frame svg,.tm-pic svg{transition:transform 1.4s var(--ease-out)} /* slow cinematic push-in on hover, kept on purpose */
.wk-item,.mq-logo,.foot-row a,.contact-mail{transition:color 200ms ease}
.wk-btn{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,scale 160ms var(--ease-out)}
.head-cta,.menu-btn,.seg button,.dlg-close,.sound,.reel-full{transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,scale 160ms var(--ease-out)}
.fld input,.fld select,.fld textarea{transition:border-color 200ms ease,box-shadow 200ms ease}
/* press feedback: the individual `scale` property composes with the WAAPI transforms already running on .fab */
.fab{transition:box-shadow 300ms ease,scale 160ms var(--ease-out)}
.btn:active,.wk-btn:active,.head-cta:active,.menu-btn:active,.seg button:active,.dlg-close:active,.sound:active,.reel-full:active,.fab:active{scale:.97}
/* header hides/returns with an interruptible transition (a quick flick up retargets, never restarts) */
.site-head{transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease,transform 280ms var(--ease-out)}
.site-head.is-hidden{transform:translateY(-100%)}
/* floating contact leaves/returns near the form the same way */
.fab-wrap{transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out)}
.fab-wrap.is-away{opacity:0;transform:translateY(24px);pointer-events:none}

/* ---- native feel on phones ---- */
html{-webkit-tap-highlight-color:transparent}
a,button,select,label,summary,[role="button"]{touch-action:manipulation}
button,.btn,.wk-btn,.wk-item,.seg button,.fab,.menu-btn,.head-cta,.nav a,.brand,.dlg-close,.sound,.reel-full,.menu a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.wk-stage{touch-action:pan-y}
.imv{min-height:100vh;min-height:100svh}
.dlg,.dlg-panel{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
.dlg-panel,.menu{overscroll-behavior:contain}
html.menu-open,html.dialog-open{overflow:hidden}
/* safe areas (needs viewport-fit=cover): notch in landscape, home indicator at the bottom */
.site-head{height:calc(76px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.fab-wrap{right:calc(24px + env(safe-area-inset-right,0px));bottom:calc(24px + env(safe-area-inset-bottom,0px))}
.menu{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))}
.foot{padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
@media (max-width:600px){ .fab-wrap{right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))} }

/* ---- reduced motion (only when respectReducedMotion is on): gentler, not zero ---- */
html.rm .site-head{transition:background-color 300ms ease,color 300ms ease,border-color 300ms ease}
html.rm .site-head.is-hidden{transform:none}
html.rm .fab-wrap{transition:opacity 200ms ease}
html.rm .fab-wrap.is-away{transform:none}
html.rm .work-frame svg,html.rm .tm-pic svg,html.rm .btn .ic-arrow,html.rm .svc1-row>*{transition:none}
html.rm .work-card:hover .work-frame svg,html.rm .tm:hover .tm-pic svg,html.rm .btn:hover .ic-arrow,html.rm .svc1-row:hover>*{transform:none}
.wk-hint{transition:opacity 200ms var(--ease-out),transform 250ms var(--ease-out)}
.wk-dot::before{transition:background-color 200ms ease}

/* ---- pause controls (WCAG 2.2.2): one icon swaps for the other ---- */
[data-paused] .ic-play{display:none}
[data-paused="true"] .ic-play{display:inline-flex}
[data-paused="true"] .ic-pause{display:none}
.ic-pause,.ic-play{display:inline-flex;align-items:center}
.reel-pause{display:inline-flex;align-items:center;gap:8px;background:none;border:0;color:inherit;font:inherit;font-size:.8125rem;font-weight:500;cursor:pointer;min-height:44px;padding:0 4px;transition:scale 160ms var(--ease-out)}
.reel-pause:active{scale:.97}
.sec-note-act{display:flex;align-items:center;flex-wrap:wrap;gap:4px 18px}
.mq-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;border:0;font:inherit;font-weight:600;color:var(--ink-2);cursor:pointer;transition:color 200ms ease,scale 160ms var(--ease-out)}
.mq-pause:active{scale:.97}
@media (hover:hover) and (pointer:fine){ .mq-pause:hover{color:var(--ink)} }
.mq-pause:focus-visible,.reel-pause:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:6px}
@media (max-width:600px){
  .reel-pause{padding:0 8px;min-width:44px;justify-content:center}
  .reel-pause .reel-pause-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---- critique fixes ---- */
@media (max-width:600px){
  .hero-meta{flex-wrap:wrap;row-gap:2px}
  .hero-meta .reel-note{order:-1;flex:1 0 100%;margin-right:0}
}
@media (max-width:900px){
  .head-in{gap:10px}
  .head-cta{display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;font-size:.8125rem;white-space:nowrap}
  .menu-btn{padding:9px 14px}
}
@media (max-width:374px){ .head-cta{display:none} }
@media (min-width:901px){
  .light .dlg{max-width:min(1040px,calc(100vw - 32px),max(560px,calc((100vh - 426px) * 2.4)));max-width:min(1040px,calc(100vw - 32px),max(560px,calc((100dvh - 426px) * 2.4)))}
  .light .svc1-side{display:flex;flex-direction:column}
  .light .svc1-spark{margin-top:auto;padding-top:44px}
}

/* official logo colours: off-white over hero, near-black once the header is solid and in the footer */
.light .site-head .brand{color:#F2F0EB}
.light .site-head.is-solid .brand{color:#0B0B0C}
.menu-open .light .site-head .brand,.menu-open .site-head .brand{color:#0B0B0C}
.light .foot-logo{color:#0B0B0C}
.light .brand .logo{height:34px}

/* showreel player */
.light .reel-big.has-video{aspect-ratio:2.4/1;background:#000}
.reel-player{display:block;width:100%;height:100%;object-fit:contain;background:#000}
/* showreel file: poster-only state hides the controls that need a playing video; desktop crops the baked-in corner watermark out from behind the hero controls */
.reel-still [data-reel-pause],.reel-still [data-sound],.reel-still .reel-progress,.reel-still .timecode{display:none}

/* hero shows the 1920x800 reel uncropped: the hero takes the video's own 2.4:1 shape */
.light .reel-video{object-fit:contain;background:#000}
@media (min-width:701px){.light .hero-light{height:auto;aspect-ratio:2.4/1;min-height:0;max-height:100svh}}
@media (max-width:700px){
  .light .hero-light{height:calc(100vw / 2.4 + 128px);min-height:0}
  .light .hero-light .reel{inset:76px 0 auto 0;height:calc(100vw / 2.4)}
  .light .hero-light .hero-shade{display:none}
}

/* real project stills (1920x800, shown uncropped at their own 2.4:1) */
.work-frame img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.work-card:hover .work-frame img{transform:scale(1.045)}}
html.rm .work-frame img{transition:none}
html.rm .work-card:hover .work-frame img{transform:none}
.light .wk-stage{aspect-ratio:2.4/1;width:min(100%,calc((100svh - 120px) * 2.4))}
@media (max-width:700px){
  .light .wk-stage{aspect-ratio:auto;width:100%;height:calc((100vw - 28px) / 2.4 + 124px)}
  .light .wk-slide .work-frame{inset:0 0 auto 0;height:calc((100vw - 28px) / 2.4)}
  .light .wk-shade{display:none}
}
.light .case-frame{aspect-ratio:auto;background:#0A0B0E}
.case-shot{display:block;width:100%;height:auto;aspect-ratio:2.4/1;object-fit:cover}
.case-thumbs{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:#0A0B0E;scrollbar-width:thin}
.case-thumb{all:unset;box-sizing:border-box;flex:none;width:96px;aspect-ratio:2.4/1;border-radius:6px;overflow:hidden;cursor:pointer;opacity:.55;outline-offset:2px;position:relative;transition:opacity 200ms ease}
.case-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.case-thumb[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px #fff}
.case-thumb:focus-visible{outline:2px solid #fff}
@media (hover:hover) and (pointer:fine){.case-thumb:hover{opacity:1}}
@media (max-width:700px){.case-thumb{width:72px;min-height:30px}}

/* selected work: one block per project, every frame shown at its own 2.4:1 */
.wp-list{display:grid;gap:clamp(56px,7vw,104px)}
.wp-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 20px;margin-bottom:16px}
.wp-num{font-size:.8125rem;font-weight:600;letter-spacing:.1em;font-variant-numeric:tabular-nums;color:var(--ink-3)}
.wp-title{font-family:var(--f-display);font-weight:800;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
.wp-meta{color:var(--ink-3);font-size:.9375rem;margin-left:auto}
.wp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wp-shot{all:unset;box-sizing:border-box;display:block;cursor:pointer;border-radius:var(--r-frame)}
.wp-shot:focus-visible{outline:2px solid var(--key);outline-offset:3px}
.wp-shot .work-frame{aspect-ratio:2.4/1;border-radius:var(--r-frame)}
.wp-shot:first-child,.wp-shot:last-child:nth-child(even){grid-column:1/-1}
@media (max-width:700px){.wp-grid{grid-template-columns:minmax(0,1fr);gap:8px}.wp-shot .work-frame{border-radius:12px}.wp-meta{margin-left:0;flex-basis:100%}}

/* selected work: preview left (auto-slide), project list right */
.ws{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(260px,1fr);gap:clamp(20px,3vw,48px);align-items:stretch}
.ws-stage{position:relative;aspect-ratio:2.4/1;border-radius:var(--r-frame);overflow:hidden;background:#0A0B0E;isolation:isolate;touch-action:pan-y}
.ws-open{all:unset;box-sizing:border-box;position:absolute;inset:0;display:block;cursor:pointer}
.ws-open:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ws-layer{position:absolute;inset:0;display:block}
.ws-layer img{display:block;width:100%;height:100%;object-fit:cover}
.ws-layer:nth-child(2){opacity:0}
.ws-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.22);z-index:3}
.ws-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.ws-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px}
.ws-cap{font-family:var(--f-display);font-weight:700;font-size:1.125rem;color:var(--ink);letter-spacing:-.01em}
.ws-cap-n{color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.ws-ctl{display:flex;gap:8px}
.ws-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel);color:var(--ink);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,scale 160ms var(--ease-out)}
.ws-btn:active{scale:.97}
.ws-btn:focus-visible{outline:2px solid var(--key);outline-offset:2px}
.ws-btn svg{width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.ws-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}}
.ws-play{padding:0}
.ws-play .ic-play{display:none}.ws-play[data-paused="true"] .ic-pause{display:none}.ws-play[data-paused="true"] .ic-play{display:inline}
.ws-list{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;border-top:1px solid var(--line-strong)}
.ws-list li{display:flex;border-bottom:1px solid var(--line-strong)}
.ws-row{all:unset;box-sizing:border-box;position:relative;flex:1;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:56px;padding:0 14px;cursor:pointer;color:var(--ink-3);transition:color 200ms ease,background-color 200ms ease}
.ws-n{font-size:.75rem;font-weight:600;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.ws-t{font-family:var(--f-display);font-weight:700;font-size:clamp(1.0625rem,1.5vw,1.375rem);letter-spacing:-.01em;line-height:1.1}
.ws-y{font-size:.875rem;font-variant-numeric:tabular-nums}
.ws-prog{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--key);transform:scaleY(0);transform-origin:top;transition:transform 260ms var(--ease-out)}
.ws-row[aria-current="true"]{color:var(--ink);background:var(--panel)}
.ws-row[aria-current="true"] .ws-prog{transform:scaleY(1)}
.ws-row:focus-visible{outline:2px solid var(--key);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.ws-row:hover{color:var(--ink)}}
@media (max-width:900px){.ws{grid-template-columns:minmax(0,1fr)}.ws-list{grid-auto-rows:auto}.ws-stage{border-radius:12px}.ws-prev span,.ws-next span{display:none}.ws-btn{padding:0}}

/* deck content pass */
.light .facts{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
.light .facts dd{font-family:var(--f-display);font-size:clamp(1.25rem,2vw,1.625rem);font-weight:700;letter-spacing:-.01em}
.light .facts div:last-child dd{font-family:inherit;font-size:1rem;font-weight:500;letter-spacing:0}
@media (max-width:700px){.light .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mq-name{font-family:var(--f-display);font-weight:700;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.01em;white-space:nowrap}
.case-facts div[hidden]{display:none}
/* client logos */
.mq-img{padding:0 36px;height:88px}
.mq-img img{display:block;max-width:none;object-fit:contain}
@media (max-width:700px){.mq-img{padding:0 22px;height:72px}.mq-img img{transform:scale(.8)}}


.form-error{color:var(--error);font-size:.875rem;font-weight:500}
.form-error[hidden]{display:none}
.btn[disabled]{opacity:.6;cursor:progress}