/* =====================================================================
   Metatron Ads — site.css
   Layout: "viewfinder" — big frames with camera corner marks and format
   labels on an editorial 12-column grid. Warm-white paper sections
   alternate with charcoal screening-room sections; coral is kept for
   actions and the lens mark from the logo.
   ===================================================================== */
:root{
  /* colour — taken from the logo: coral #FF5B3A, charcoal #252525, lens grey #9C9C9C */
  --paper:#FAF8F5;
  --paper-2:#F2EEE8;
  --paper-3:#E7E1D9;
  --ink:#252525;
  --ink-soft:#45413E;
  --muted:#6B6560;
  --char:#1C1A19;
  --char-2:#262321;
  --char-3:#322E2B;
  --on-char:#F4F1EC;
  --muted-on-char:#A9A39D;
  --coral:#FF5B3A;
  --coral-deep:#C63B1E;
  --lens:#9C9C9C;
  --line:rgba(37,37,37,.13);
  --line-strong:rgba(37,37,37,.3);
  --line-on-char:rgba(244,241,236,.15);
  --line-on-char-strong:rgba(244,241,236,.32);
  --header-bg:rgba(250,248,245,.94);

  /* type — Bricolage Grotesque echoes the notched joints of the wordmark;
     Manrope is the logo's tagline face; Fragment Mono for slate labels */
  --f-display:"Bricolage Grotesque","Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-hero:clamp(2.85rem,1.35rem + 6.6vw,7.4rem);
  --t-xxl:clamp(2.5rem,1.3rem + 5vw,6.1rem);
  --t-xl:clamp(2.2rem,1.3rem + 3.9vw,4.9rem);
  --t-l:clamp(1.8rem,1.25rem + 2.3vw,3.2rem);
  --t-m:clamp(1.4rem,1.15rem + 1.05vw,2rem);
  --t-s:clamp(1.12rem,1.04rem + .4vw,1.32rem);
  --t-lead:clamp(1.08rem,1rem + .38vw,1.3rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.74rem;

  /* layout */
  --gutter:clamp(16px,4.4vw,60px);
  --col-gap:clamp(16px,2.2vw,32px);
  --maxw:1360px;
  --header-h:76px;
  --sec:clamp(4.5rem,3rem + 7vw,9rem);
  --radius:clamp(10px,1.1vw,16px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
:root{padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-body);line-height:1.65;font-weight:450;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
[hidden]{display:none!important}
::selection{background:var(--coral);color:var(--char)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-120px;z-index:100;background:var(--char);color:var(--on-char);padding:.7rem 1.1rem;border-radius:10px;text-decoration:none;font-weight:700}
.skip:focus{top:12px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec)}
.on-dark{background:var(--char);color:var(--on-char)}
.on-paper2{background:var(--paper-2)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:clamp(2.5rem,2rem + 2.2vw,4.25rem)}
.section-head > div{display:grid;gap:1.1rem;min-width:0}
.section-head .lead{max-width:46ch}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.3}
.eyebrow::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--coral)}
.on-dark .eyebrow,.proj-dialog .eyebrow{color:var(--muted-on-char)}
.h-hero{font-size:var(--t-hero);font-weight:760;letter-spacing:-.04em;line-height:.93;font-stretch:92%}
.h-xxl{font-size:var(--t-xxl);font-weight:740;letter-spacing:-.036em;line-height:.95;font-stretch:93%}
.h-xl{font-size:var(--t-xl);font-weight:720;letter-spacing:-.032em;line-height:.98;font-stretch:94%}
.h-l{font-size:var(--t-l);font-weight:700;letter-spacing:-.028em;line-height:1.02}
.h-m{font-size:var(--t-m);font-weight:680;letter-spacing:-.02em;line-height:1.1}
.h-s{font-size:var(--t-s);font-weight:700;letter-spacing:-.012em;line-height:1.22}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-soft);max-width:46ch;font-weight:500}
.on-dark .lead{color:var(--muted-on-char)}
.prose{max-width:62ch;display:grid;gap:1.05em}
.prose p{color:var(--ink-soft)}
.on-dark .prose p{color:var(--muted-on-char)}
.label{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;line-height:1.4}
.on-dark .label,.proj-dialog .label{color:var(--muted-on-char)}

/* ---------- buttons & links ---------- */
.btn{--b-bg:var(--coral);--b-fg:var(--char);--b-dot:var(--char);--b-hover:var(--on-char);--b-border:var(--coral);
  position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.72rem;min-height:3.25rem;padding:.8rem 1.5rem .8rem 1.15rem;border:1.5px solid var(--b-border);border-radius:999px;background:var(--b-bg);color:var(--b-fg);font-family:var(--f-body);font-weight:700;font-size:1rem;line-height:1.1;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:color .45s var(--ease),border-color .45s var(--ease)}
.btn::before{content:"";position:relative;z-index:-1;flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--b-dot);transition:transform .75s var(--ease-out)}
.btn:hover,.btn:focus-visible{color:var(--b-hover)}
.btn:hover::before,.btn:focus-visible::before{transform:scale(64)}
.btn--ghost{--b-bg:transparent;--b-fg:var(--ink);--b-dot:var(--ink);--b-hover:var(--paper);--b-border:var(--line-strong)}
.btn--ghost:hover{--b-border:var(--ink)}
.on-dark .btn--ghost,.proj-dialog .btn--ghost{--b-fg:var(--on-char);--b-dot:var(--on-char);--b-hover:var(--char);--b-border:var(--line-on-char-strong)}
.btn--dark{--b-bg:var(--char);--b-fg:var(--on-char);--b-dot:var(--coral);--b-hover:var(--char);--b-border:var(--char)}
.btn--sm{min-height:2.6rem;padding:.55rem 1.1rem .55rem .9rem;font-size:.92rem;gap:.55rem}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}

.arrow-link{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;padding-bottom:.3rem;border-bottom:1.5px solid currentColor;line-height:1.2}
.arrow-link svg{width:1.05em;height:1.05em;flex:none;transition:transform .4s var(--ease-out)}
.arrow-link:hover svg{transform:translateX(5px)}
.icon{width:1.1em;height:1.1em;flex:none}

/* ---------- placeholders (removed at launch) ---------- */
.ph{position:relative;overflow:hidden;background:var(--char-2);color:var(--on-char);isolation:isolate}
.ph-fill{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(110% 95% at 18% 14%,rgba(255,255,255,.075),transparent 55%),
  radial-gradient(90% 80% at 88% 92%,rgba(255,91,58,.09),transparent 62%),
  linear-gradient(160deg,var(--char-3),var(--char-2) 55%,var(--char));
  transition:transform 1.2s var(--ease-out)}
.ph-fill::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.09;mix-blend-mode:overlay}
.ph-label{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 2.5rem);text-align:center;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.55;color:rgba(244,241,236,.74);border:1px dashed rgba(244,241,236,.34);border-radius:6px;padding:.55em .9em;background:rgba(28,26,25,.42)}
.ph-label b{display:block;font-weight:400;color:var(--coral)}
.ph-label--low{top:auto;bottom:clamp(1.4rem,3vw,2.4rem);transform:translateX(-50%)}
.ph-chip{display:inline-block;font-family:var(--f-mono);font-size:.64rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1.45;color:var(--coral-deep);border:1px dashed currentColor;border-radius:4px;padding:.1em .45em;margin-right:.55em;vertical-align:.2em;white-space:nowrap}
.ph-chip--draft{color:var(--ink-soft);border-style:solid}
.on-dark .ph-chip,.proj-dialog .ph-chip,.ph .ph-chip,.mobile-menu .ph-chip,.site-footer .ph-chip{color:var(--coral)}
.on-dark .ph-chip--draft{color:var(--on-char)}
.ph-text{color:var(--muted)}
.on-dark .ph-text,.proj-dialog .ph-text,.site-footer .ph-text{color:var(--muted-on-char)}

/* viewfinder corner marks */
.vf::after{content:"";position:absolute;inset:clamp(10px,1.5vw,20px);z-index:2;pointer-events:none;
  --c:rgba(244,241,236,.72);--l:clamp(14px,1.5vw,22px);--t:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--t) var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--t) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--t) var(--l) no-repeat}

/* the lens mark from the logo's "o": coral ring, grey centre */
.lens{position:relative;display:inline-block;width:.3em;height:.3em;margin-left:.045em;vertical-align:baseline}
.lens::before{content:"";position:absolute;inset:0;border-radius:50%;border:.062em solid var(--coral)}
.lens::after{content:"";position:absolute;inset:30%;border-radius:50%;background:var(--lens)}
.lens--rec::after{animation:rec 2.8s 1.8s ease-in-out infinite}
@keyframes rec{0%,100%{background:var(--lens)}45%,60%{background:var(--coral)}}

/* ---------- header ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.3) blur(14px);backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease);view-transition-name:site-header}
.site-header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:1rem;height:var(--header-h)}
.brand{display:block;flex:none;margin-right:auto;line-height:0;border-radius:4px}
.brand img{height:30px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.4rem);margin-right:clamp(.5rem,1.8vw,1.6rem)}
.nav a{position:relative;font-weight:650;font-size:.95rem;text-decoration:none;padding-block:.5rem;color:var(--ink-soft);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:1.5px;background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:.5rem}
.menu-btn{display:none;width:44px;height:44px;place-items:center;padding:0;border:1.5px solid var(--line-strong);border-radius:50%;background:transparent}
.menu-lines{position:relative;display:block;width:16px;height:10px}
.menu-lines::before,.menu-lines::after{content:"";position:absolute;left:0;right:0;height:1.8px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease-out),top .35s var(--ease-out)}
.menu-lines::before{top:0}
.menu-lines::after{top:8px}
.menu-btn[aria-expanded="true"] .menu-lines::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-lines::after{top:4px;transform:rotate(-45deg)}
@media (max-width:980px){
  :root{--header-h:66px}
  .nav{display:none}
  .menu-btn{display:inline-grid}
  .brand img{height:26px}
}
@media (max-width:400px){.brand img{height:23px}.header-actions .btn--sm{padding-inline:.8rem .95rem}}
@media (max-width:350px){.header-actions .btn{display:none}}

.mobile-menu{position:fixed;left:0;right:0;bottom:0;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:59;overflow-y:auto;overscroll-behavior:contain;background:var(--char);color:var(--on-char);padding-block:1.5rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
.mobile-menu:not([hidden]){animation:mmIn .5s var(--ease-out)}
@keyframes mmIn{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.mm-nav{display:flex;flex-direction:column}
.mm-nav a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.7rem;border-bottom:1px solid var(--line-on-char);font-family:var(--f-display);font-size:clamp(1.75rem,7.5vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;text-decoration:none}
.mm-nav a svg{width:1.4rem;height:1.4rem;opacity:.5}
.mm-nav a[aria-current="page"]{color:var(--coral)}
.mm-foot{display:grid;gap:1.4rem;margin-top:2rem}
.mm-foot .label{margin-bottom:.35rem}
.mm-foot a{text-decoration:none;font-weight:600}
html.menu-open{overflow:hidden}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3rem,1.8rem + 6vw,7rem) clamp(2.5rem,2rem + 3vw,4.5rem)}
.hero .eyebrow{margin-bottom:clamp(1.4rem,1rem + 1.6vw,2.5rem)}
.hero h1 .line{display:block}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem 3rem;margin-top:clamp(2rem,1.4rem + 2.8vw,3.75rem)}
.hero-foot .lead{max-width:44ch}
@media (max-width:820px){.hero-foot{grid-template-columns:minmax(0,1fr)}}
.js .hero .line{animation:rise 1.15s var(--ease-out) both}
.js .hero .line + .line{animation-delay:.09s}
.js .hero .lens::before{animation:focus 1.3s .45s var(--ease-out) both}
@keyframes rise{from{transform:translateY(.16em)}to{transform:none}}
@keyframes focus{from{transform:scale(2.1)}to{transform:none}}

/* ---------- showreel ---------- */
.reel-sec{padding-bottom:var(--sec)}
.reel{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:var(--radius);overflow:hidden;background:var(--char);color:var(--on-char);isolation:isolate}
@media (max-width:640px){.reel{aspect-ratio:4/5}}
.reel .ph-fill::after{inset:-60%;opacity:.13;animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}60%{transform:translate(-4%,-3%)}80%{transform:translate(6%,5%)}100%{transform:translate(0,0)}}
.reel-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(42% 52% at 50% 50%,rgba(255,91,58,.16),transparent 70%)}
.hud{position:absolute;inset:clamp(22px,3vw,40px);z-index:3;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;font-family:var(--f-mono);font-size:clamp(.66rem,.6rem + .25vw,.8rem);letter-spacing:.12em;text-transform:uppercase;color:rgba(244,241,236,.86)}
.hud-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.rec{display:inline-flex;align-items:center;gap:.6em}
.rec i{width:.62em;height:.62em;border-radius:50%;background:var(--coral);animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
.tc{font-variant-numeric:tabular-nums}
.play{position:absolute;left:50%;top:50%;z-index:4;width:clamp(86px,9vw,132px);aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--coral);color:var(--char);transform:translate(-50%,-50%);transition:transform .55s var(--ease-out)}
.play svg{width:30%;height:30%;margin-left:7%}
.play::before{content:"";position:absolute;inset:-13px;border-radius:50%;border:1.5px solid rgba(255,91,58,.6);animation:ring 2.8s var(--ease) infinite}
.play:hover{transform:translate(-50%,-50%) scale(1.07)}
.play-text{position:absolute;left:50%;top:calc(50% + clamp(62px,6.4vw,92px));z-index:3;transform:translateX(-50%);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,241,236,.8);white-space:nowrap;pointer-events:none}
@keyframes ring{0%{transform:scale(.94);opacity:1}100%{transform:scale(1.38);opacity:0}}
.reel-cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 1.5rem;margin-top:1.1rem;color:var(--muted);font-size:var(--t-small)}

/* ---------- intro / tagline ---------- */
.intro-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(1.75rem,1.2rem + 2vw,3rem) var(--col-gap)}
.intro-grid > *{grid-column:1/-1;min-width:0}
.tagline-big{font-size:var(--t-xxl);font-weight:740;letter-spacing:-.036em;line-height:.97;font-stretch:93%;max-width:15ch}
.intro-copy{grid-column:6/-1;display:grid;gap:1.25rem;justify-items:start;max-width:60ch}
@media (max-width:900px){.intro-copy{grid-column:1/-1}}
.mark{position:relative;white-space:nowrap}
.mark svg{position:absolute;left:-1%;bottom:-.16em;width:102%;height:.3em;overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:var(--coral);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s .25s var(--ease-out)}
.js .draw.pre .mark path{stroke-dashoffset:1;opacity:0}
.js .draw.pre.in .mark path{stroke-dashoffset:0;opacity:1}
.mark path{transition:stroke-dashoffset 1.4s .25s var(--ease-out),opacity .2s .25s linear}

/* ---------- services overview (home) ---------- */
.svc-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.svc-list{list-style:none;border-top:1px solid var(--line-on-char)}
.svc-row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;gap:.3rem clamp(1rem,1.6vw,1.5rem);align-items:center;padding-block:clamp(1.1rem,.9rem + .7vw,1.6rem);border-bottom:1px solid var(--line-on-char);text-decoration:none;color:inherit}
.svc-glyph{grid-row:1 / span 2;width:3rem;height:3rem;display:grid;place-items:center;color:var(--muted-on-char);transition:color .35s var(--ease)}
.svc-glyph i{display:block;border:1.5px solid currentColor;border-radius:3px}
.svc-name{font-family:var(--f-display);font-size:clamp(1.25rem,.95rem + 1.25vw,2.05rem);font-weight:650;letter-spacing:-.024em;line-height:1.12;transition:color .35s var(--ease)}
.svc-line{grid-column:2;color:var(--muted-on-char);font-size:var(--t-small);line-height:1.5;max-width:54ch}
.svc-go{grid-row:1 / span 2;grid-column:3;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-on-char-strong);transition:background-color .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .5s var(--ease-out)}
.svc-go svg{width:1.05rem;height:1.05rem}
.svc-row:hover .svc-name,.svc-row.is-active .svc-name{color:var(--coral)}
.svc-row:hover .svc-glyph,.svc-row.is-active .svc-glyph{color:var(--coral)}
.svc-row:hover .svc-go,.svc-row.is-active .svc-go{background:var(--coral);border-color:var(--coral);color:var(--char);transform:rotate(-45deg)}
.svc-foot{margin-top:clamp(2rem,1.6rem + 1.5vw,3rem)}
@media (max-width:560px){.svc-row{grid-template-columns:2.4rem minmax(0,1fr) auto}.svc-glyph{width:2.4rem}.svc-go{width:2.4rem;height:2.4rem}}

.monitor{position:sticky;top:calc(var(--header-h) + 2rem)}
.mon-stage{position:relative;aspect-ratio:1/1;border-radius:var(--radius);background:var(--char-2);border:1px solid var(--line-on-char);overflow:hidden;
  background-image:linear-gradient(var(--line-on-char) 1px,transparent 1px),linear-gradient(90deg,var(--line-on-char) 1px,transparent 1px);background-size:12.5% 12.5%;background-position:center}
.mon-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,transparent 30%,var(--char-2) 100%)}
.mf{--fw:100%;--fh:56.25%;position:absolute;left:50%;top:50%;width:calc(var(--fw) * .74);height:calc(var(--fh) * .74);transform:translate(-50%,-50%);border:1.5px solid var(--on-char);border-radius:8px;background:var(--char-3);overflow:hidden;transition:width .75s var(--ease-out),height .75s var(--ease-out)}
.mf-k{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease)}
.mf[data-kind="film"] .k-film,.mf[data-kind="feed"] .k-feed,.mf[data-kind="calendar"] .k-calendar,.mf[data-kind="reel"] .k-reel,.mf[data-kind="print"] .k-print,.mf[data-kind="web"] .k-web,.mf[data-kind="hiring"] .k-hiring,.mf[data-kind="script"] .k-script,.mf[data-kind="youtube"] .k-youtube{opacity:1}
.mf i{position:absolute;display:block;border-radius:3px;background:rgba(244,241,236,.18)}
.mf .c{background:var(--coral)}
.mf .w{background:rgba(244,241,236,.85)}
.mf .ring{border-radius:50%}
.mon-meta{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-char)}
.mon-meta span:first-child{color:var(--coral)}
@media (max-width:1023px){.svc-split{grid-template-columns:minmax(0,1fr)}.monitor{display:none}}

/* ---------- project cards ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.75rem,2rem + 3vw,4.75rem) clamp(16px,2.6vw,40px)}
.proj-grid--featured > :nth-child(even){margin-top:clamp(0rem,9vw,8rem)}
.proj-card{min-width:0}
.proj-link{display:block;text-decoration:none;color:inherit;border-radius:var(--radius)}
.proj-media{position:relative;aspect-ratio:4/3;border-radius:var(--radius);max-width:100%}
.proj-link:hover .ph-fill{transform:scale(1.045)}
.proj-view{position:absolute;right:clamp(14px,1.6vw,22px);bottom:clamp(14px,1.6vw,22px);z-index:3;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .95rem;border-radius:999px;background:var(--coral);color:var(--char);font-weight:700;font-size:.88rem;line-height:1;transition:transform .5s var(--ease-out),opacity .4s var(--ease)}
.proj-view svg{width:1rem;height:1rem}
@media (hover:hover){.proj-view{opacity:0;transform:translateY(10px)}.proj-link:hover .proj-view,.proj-link:focus-visible .proj-view{opacity:1;transform:none}}
.proj-meta{display:grid;gap:.45rem;padding-top:1.15rem}
.proj-title{font-size:var(--t-m);font-weight:680;letter-spacing:-.022em;line-height:1.12}
.proj-desc{color:var(--ink-soft);max-width:50ch;font-size:var(--t-small);line-height:1.55}
@media (max-width:720px){.proj-grid{grid-template-columns:minmax(0,1fr)}.proj-grid--featured > :nth-child(even){margin-top:0}}

/* ---------- process steps ---------- */
.steps{--sgap:clamp(1.5rem,2.8vw,3.25rem);--rgap:2.25rem;list-style:none;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--rgap) var(--sgap)}
.step-arrow{position:absolute;top:.68rem;right:calc(var(--sgap) / -2);z-index:1;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--paper-2);color:var(--coral-deep);transform:translate(50%,-50%)}
.step-arrow svg{width:1.05rem;height:1.05rem}
.on-dark .step-arrow{background:var(--char);color:var(--coral)}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:.68rem;height:1.5px;background:var(--line-strong)}
.steps::after{background:var(--coral);transform-origin:left;transform:scaleX(.08)}
@supports (animation-timeline:view()){
  .steps::after{animation:fill linear both;animation-timeline:view();animation-range:entry 25% cover 55%}
}
@keyframes fill{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
.step{position:relative;display:grid;gap:.75rem;align-content:start;padding-top:3rem;min-width:0}
.step-dot{position:absolute;left:0;top:0;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--paper-2);border:.33rem solid var(--coral);box-shadow:0 0 0 5px var(--paper-2)}
.step-dot::after{content:"";position:absolute;inset:.08rem;border-radius:50%;background:var(--lens)}
.on-dark .step-dot,.booking .step-dot{background:var(--char);box-shadow:0 0 0 5px var(--char)}
.step-name{display:flex;align-items:baseline;gap:.5em;font-size:var(--t-l);font-weight:720;letter-spacing:-.03em;line-height:1}
.step-name .arr{color:var(--coral-deep);font-weight:500;font-family:var(--f-body);font-size:.7em}
.on-dark .step-name .arr{color:var(--coral)}
.step p{color:var(--ink-soft);max-width:34ch}
.on-dark .step p{color:var(--muted-on-char)}
@media (max-width:900px){
  .steps{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .steps::before,.steps::after{left:.68rem;right:auto;top:.5rem;bottom:.5rem;width:1.5px;height:auto}
  .steps::after{transform-origin:top;transform:scaleY(.08)}
  @supports (animation-timeline:view()){.steps::after{animation-name:fillY}}
  .step{padding-top:0;padding-left:3.1rem}
  .step-arrow{top:auto;right:auto;left:.68rem;bottom:calc(var(--rgap) / -2);transform:translate(-50%,50%) rotate(90deg)}
}
@keyframes fillY{from{transform:scaleY(.04)}to{transform:scaleY(1)}}

/* ---------- closing invitation ---------- */
.cta-band{background:var(--coral);color:var(--char);padding-block:clamp(4.5rem,3rem + 7vw,9rem)}
.cta-band ::selection{background:var(--char);color:var(--coral)}
.cta-band .eyebrow{color:var(--char)}
.cta-band .eyebrow::before{background:var(--char)}
.cta-title{font-size:clamp(2.35rem,1.25rem + 4.7vw,6.2rem);font-weight:760;letter-spacing:-.04em;line-height:.95;font-stretch:92%;max-width:16ch;margin-top:1.6rem}
.cta-title span{display:block}
.cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 2rem;margin-top:clamp(2rem,1.6rem + 2vw,3.25rem)}
.cta-tel{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:.2rem;font-variant-numeric:tabular-nums}

/* ---------- footer ---------- */
.site-footer{background:var(--char);color:var(--on-char);padding-block:clamp(3.5rem,3rem + 3vw,5.5rem) 2rem;border-top:1px solid var(--line-on-char)}
.f-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem var(--col-gap)}
.f-brand{display:grid;gap:1.4rem;align-content:start;justify-items:start}
.f-brand img{width:min(100%,400px)}
.f-brand p{color:var(--muted-on-char);max-width:36ch;font-size:var(--t-small)}
.f-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem var(--col-gap)}
.f-col{min-width:0}
.f-col h2{font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-char);margin-bottom:1rem}
.f-col ul{list-style:none;display:grid;gap:.6rem}
.f-col a{text-decoration:none;color:var(--on-char)}
.f-col a:hover{color:var(--coral)}
.f-col li{font-size:var(--t-small);overflow-wrap:anywhere}
.f-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(3rem,2.5rem + 2vw,4.5rem);padding-top:1.5rem;border-top:1px solid var(--line-on-char);color:var(--muted-on-char);font-size:.875rem}
@media (max-width:960px){.f-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.f-col--contact{grid-column:1/-1}}

/* ---------- inner page hero ---------- */
.page-hero{padding-block:clamp(3rem,1.8rem + 5.5vw,7rem) clamp(2.5rem,2rem + 3vw,4.5rem)}
.page-hero h1{font-size:var(--t-xxl);font-weight:750;letter-spacing:-.038em;line-height:.95;font-stretch:92%;max-width:17ch;margin-top:1.5rem}
.page-hero .lead{margin-top:clamp(1.4rem,1.1rem + 1.2vw,2.2rem);max-width:54ch}
.page-hero .draft-note{margin-top:1.5rem}
.js .page-hero h1{animation:rise 1.1s var(--ease-out) both}
.frame{position:relative;border-radius:var(--radius);max-width:100%}
.frame--wide{aspect-ratio:21/9}
.frame--video{aspect-ratio:16/9}
@media (max-width:640px){.frame--wide,.frame--video{aspect-ratio:4/3}}

/* ---------- about ---------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2rem clamp(2rem,5vw,6rem);align-items:start}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr)}}
.principles{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem var(--col-gap);margin-top:clamp(3rem,2.4rem + 2.5vw,5rem);padding-top:clamp(2rem,1.6rem + 1.5vw,3rem);border-top:1px solid var(--line)}
.principles li{display:grid;gap:.8rem;align-content:start;min-width:0}
.principles p{color:var(--ink-soft);max-width:38ch}
@media (max-width:860px){.principles{grid-template-columns:minmax(0,1fr)}}
.founder{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem clamp(2rem,5vw,6rem);align-items:center}
.founder-photo{aspect-ratio:4/5}
.founder-copy{display:grid;gap:1.4rem;justify-items:start;min-width:0}
.founder-role{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-char)}
@media (max-width:860px){.founder{grid-template-columns:minmax(0,1fr)}.founder-photo{max-width:440px;width:100%}}
.audiences{list-style:none;border-top:1px solid var(--line)}
.audiences li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:.5rem var(--col-gap);padding-block:clamp(1.3rem,1.1rem + .8vw,1.9rem);border-bottom:1px solid var(--line);align-items:baseline}
.audiences h3{font-size:var(--t-m);font-weight:680}
.audiences p{color:var(--ink-soft);max-width:56ch}
@media (max-width:700px){.audiences li{grid-template-columns:minmax(0,1fr)}}

/* ---------- services page ---------- */
.svc-index{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(2rem,1.6rem + 1.5vw,3rem)}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.45rem 1rem;border:1px solid var(--line-strong);border-radius:999px;background:transparent;text-decoration:none;font-weight:600;font-size:.9rem;line-height:1.2;color:var(--ink-soft);transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.svc-block{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:2rem var(--col-gap);padding-block:clamp(3rem,2.4rem + 3vw,5.5rem);border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 1rem)}
.svc-visual{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:15rem;width:100%;border-radius:var(--radius);background:var(--char);color:var(--on-char)}
.svc-visual i{display:block;border:1.5px solid var(--on-char);border-radius:4px;background:var(--char-3)}
.svc-visual .label{position:absolute;left:0;right:0;bottom:.85rem;text-align:center;color:var(--muted-on-char);font-size:.66rem}
.svc-body{display:grid;gap:1.6rem;align-content:start;min-width:0}
.svc-body > h2{font-size:var(--t-l)}
.svc-body > .arrow-link{justify-self:start}
.svc-body > p{font-size:var(--t-lead);color:var(--ink-soft);max-width:58ch;line-height:1.55;font-weight:500}
.svc-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem var(--col-gap);padding-top:1.6rem;border-top:1px dashed var(--line-strong)}
.svc-cols h3{font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.8rem}
.svc-cols p{color:var(--ink-soft);max-width:44ch}
.ticks{list-style:none;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.4rem;color:var(--ink-soft);line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;border:1.5px solid var(--coral)}
.on-dark .ticks li,.proj-dialog .ticks li{color:var(--muted-on-char)}
@media (max-width:860px){.svc-block{grid-template-columns:minmax(0,1fr)}.svc-visual{max-width:9.5rem}.svc-cols{grid-template-columns:minmax(0,1fr)}
  .svc-visual .mf{top:43%;width:calc(var(--fw) * .6);height:calc(var(--fh) * .6)}}

/* ---------- studio ---------- */
.formats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.format{display:grid;gap:1rem;align-content:start;padding:1.4rem;border-radius:var(--radius);background:var(--char-2);border:1px solid var(--line-on-char);min-width:0}
.format-vis{display:grid;place-items:center;aspect-ratio:3/2;border-radius:10px;background:var(--char);border:1px solid var(--line-on-char)}
.format-vis i{display:block;border:1.5px solid var(--on-char);border-radius:3px;background:var(--char-3)}
.format h3{font-size:var(--t-s)}
.format p{color:var(--muted-on-char);font-size:var(--t-small);line-height:1.55}
@media (max-width:1080px){.formats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.formats{grid-template-columns:minmax(0,1fr)}}
.included{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap);border-top:1px solid var(--line)}
.included li{display:grid;gap:.5rem;padding-block:1.5rem;border-bottom:1px solid var(--line);align-content:start;min-width:0}
.included p{color:var(--ink-soft);max-width:48ch}
@media (max-width:760px){.included{grid-template-columns:minmax(0,1fr)}}
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.gallery .g-a{grid-column:1 / span 7;aspect-ratio:4/3}
.gallery .g-b{grid-column:8 / span 5}
.gallery .g-c{grid-column:1 / -1;aspect-ratio:21/9}
.gallery > *{border-radius:var(--radius);max-width:100%}
@media (max-width:760px){.gallery .g-a,.gallery .g-b,.gallery .g-c{grid-column:1 / -1;aspect-ratio:4/3}}
.booking{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem clamp(2rem,5vw,5rem);padding:clamp(1.75rem,1.2rem + 3vw,4rem);border-radius:var(--radius);background:var(--char);color:var(--on-char)}
.booking-copy{display:grid;gap:1.2rem;justify-items:start;align-content:start;min-width:0}
.booking dl{display:grid;gap:1rem;align-content:start}
.booking dl div{display:grid;gap:.3rem;padding-bottom:1rem;border-bottom:1px solid var(--line-on-char)}
.booking dt{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-char)}
@media (max-width:860px){.booking{grid-template-columns:minmax(0,1fr)}}

/* ---------- work page ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filter-count{margin-left:auto;font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.work-bar{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding-bottom:clamp(2rem,1.6rem + 1.5vw,3rem);margin-bottom:clamp(2rem,1.6rem + 1.5vw,3rem);border-bottom:1px solid var(--line)}
.work-note{margin-top:clamp(3rem,2.4rem + 2.5vw,5rem);padding:1.4rem 1.6rem;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--ink-soft);max-width:70ch}
@media (max-width:560px){.filter-count{margin-left:0;width:100%}}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem clamp(2rem,5vw,6rem);align-items:start}
@media (max-width:960px){.contact-grid{grid-template-columns:minmax(0,1fr)}}
.c-list{list-style:none;display:grid;border-top:1px solid var(--line)}
.c-item{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem 1rem;padding-block:1.3rem;border-bottom:1px solid var(--line);align-items:start}
.c-ico{grid-row:1 / span 3;width:2.6rem;height:2.6rem;display:grid;place-items:center;border-radius:50%;background:var(--paper-2);color:var(--ink)}
.c-ico svg{width:1.15rem;height:1.15rem}
.c-item .label{margin-bottom:.15rem}
.c-value{font-size:var(--t-s);font-weight:700;letter-spacing:-.01em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.c-actions{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.35rem;font-size:.9rem}
.c-actions a,.c-actions button{display:inline-flex;align-items:center;gap:.35rem;padding:0;border:0;background:none;font-weight:700;text-decoration:none;border-bottom:1px solid var(--line-strong);line-height:1.5}
.c-actions a:hover,.c-actions button:hover{border-color:var(--ink)}
.c-actions svg{width:.95rem;height:.95rem}
.socials{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.form-card{padding:clamp(1.4rem,1rem + 2.2vw,3rem);border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line)}
.form-card h2{font-size:var(--t-m)}
.form-card h2 + p{margin-top:.6rem;color:var(--ink-soft)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem var(--col-gap);margin-top:1.8rem}
.field{display:grid;gap:.45rem;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-weight:700;font-size:.92rem}
.field .opt{font-weight:500;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;min-height:3.1rem;padding:.75rem .95rem;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--paper);color:var(--ink);font-size:1rem;line-height:1.4;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field textarea{min-height:8.5rem;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:2.6rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23252525' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-soft)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(255,91,58,.18)}
.field [aria-invalid="true"]{border-color:var(--coral-deep)}
.err{color:var(--coral-deep);font-size:.85rem;font-weight:600}
.phone-wrap{display:flex;align-items:stretch}
.phone-wrap span{display:grid;place-items:center;padding-inline:.85rem;border:1.5px solid var(--line-strong);border-right:0;border-radius:10px 0 0 10px;background:var(--paper-3);font-weight:700;font-size:.95rem}
.phone-wrap input{border-radius:0 10px 10px 0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.6rem}
.form-foot p{color:var(--muted);font-size:.85rem;max-width:40ch}
.form-dev{margin-top:1.2rem;font-size:.85rem;color:var(--muted)}
.form-success{display:grid;gap:1rem;justify-items:start;padding-block:1rem}
.form-success:focus{outline:none}
.form-success .lens{font-size:4.5rem;margin:0}
@media (max-width:620px){.fields{grid-template-columns:minmax(0,1fr)}}

/* ---------- dialogs ---------- */
dialog{padding:0;border:0;background:transparent;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(20,18,17,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html:has(dialog[open]){overflow:hidden}
.reel-dialog{width:min(1180px,calc(100vw - 2 * var(--gutter)));margin:auto;overflow:visible}
.reel-dialog[open]{animation:dlgIn .5s var(--ease-out)}
@keyframes dlgIn{from{transform:scale(.96);opacity:.4}to{transform:none;opacity:1}}
.reel-slot{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--char-2);color:var(--on-char)}
.reel-slot iframe{width:100%;height:100%;border:0}
.reel-empty{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1rem;padding:2rem;text-align:center}
.reel-empty p{max-width:40ch;color:var(--muted-on-char)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.9rem;color:var(--on-char)}
.dlg-close{display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:.5rem 1rem;border:1px solid var(--line-on-char-strong);border-radius:999px;background:transparent;color:var(--on-char);font-weight:700;font-size:.9rem}
.dlg-close:hover{background:var(--on-char);color:var(--char)}
.dlg-close svg{width:.95rem;height:.95rem}

.proj-dialog{width:100vw;height:100vh;height:100dvh;max-width:100vw;max-height:100vh;max-height:100dvh;margin:0;background:var(--char);color:var(--on-char);overflow:hidden}
.proj-dialog[open]{display:flex;flex-direction:column;animation:poIn .6s var(--ease-out)}
@keyframes poIn{from{transform:translateY(3%);opacity:.5}to{transform:none;opacity:1}}
.po-top{flex:none;border-bottom:1px solid var(--line-on-char);padding-top:env(safe-area-inset-top,0px)}
.po-top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.25rem}
.po-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom,0px)}
.po{display:grid;gap:clamp(2.5rem,2rem + 2.5vw,4.5rem);padding-block:clamp(2rem,1.5rem + 3vw,4.5rem) clamp(3rem,2rem + 4vw,6rem)}
.po-head{display:grid;gap:1.3rem}
.po-title{font-size:var(--t-xl);font-weight:730;letter-spacing:-.034em;line-height:.98;font-stretch:93%;max-width:20ch}
.po-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem var(--col-gap);padding-top:1.4rem;border-top:1px solid var(--line-on-char)}
.po-facts div{display:grid;gap:.35rem;min-width:0}
.po-facts dt{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted-on-char)}
.po-facts dd{font-weight:600;overflow-wrap:anywhere}
.po-media{border-radius:var(--radius);max-width:100%}
.po-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem var(--col-gap)}
.po-body section{display:grid;gap:.9rem;align-content:start;min-width:0}
.po-body h3,.po-video h3{font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.po-body p{color:var(--muted-on-char)}
.po-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap)}
.po-gallery .g-wide{grid-column:1/-1}
.po-gallery .g-half{grid-column:span 6}
.po-video{display:grid;gap:1rem}
.po-video .play{width:clamp(64px,7vw,96px);pointer-events:none}
.po-nav{display:flex;justify-content:space-between;gap:1rem;padding-top:2rem;border-top:1px solid var(--line-on-char)}
.po-nav a{display:grid;gap:.3rem;text-decoration:none;min-width:0}
.po-nav a:last-child{text-align:right;justify-items:end}
.po-nav strong{font-family:var(--f-display);font-size:var(--t-s);font-weight:700;letter-spacing:-.015em}
.po-nav a:hover strong{color:var(--coral)}
@media (max-width:860px){.po-body{grid-template-columns:minmax(0,1fr)}.po-facts{grid-template-columns:minmax(0,1fr)}.po-gallery .g-half{grid-column:1/-1}}

/* ---------- reveal (content is always visible; JS only adds a gentle settle) ---------- */
.rv{transition:transform 1.1s var(--ease-out)}
.js .rv.pre{transform:translateY(24px)}
.js .rv.pre.in{transform:none}

/* ---------- page transitions ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.26s var(--ease) both vtOut}
::view-transition-new(root){animation:.55s var(--ease-out) both vtIn}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(18px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv.pre{transform:none}
}

/* ---------- small additions ---------- */
.reel-dialog{color:var(--on-char)}
.reel-dialog .label{color:var(--muted-on-char)}
.reel-empty .ph-chip{color:var(--coral)}
.draft-note{max-width:62ch}
.svc-blocks .svc-block:last-child{border-bottom:1px solid var(--line)}
.frame-sec{padding-bottom:var(--sec)}
.contact-sec{padding-block:0 var(--sec)}
.work-sec{padding-block:0 var(--sec)}
.socials .chip{color:var(--ink)}
.icon--ext{width:.95em;height:.95em;transform:rotate(-45deg)}
.mm-social{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem}

.reel-empty .h-m{color:var(--on-char)}
@media (max-width:600px){.svc-index{display:none}}

.reel-poster{position:absolute;inset:0;z-index:-1}
.reel-poster img{width:100%;height:100%;object-fit:cover}
.reel-poster.has-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,17,.62),rgba(20,18,17,.12) 32%,rgba(20,18,17,.2) 62%,rgba(20,18,17,.72))}
.reel-poster.has-img ~ .reel-glow{display:none}
.dlg-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.reel-empty .btn{margin-top:.5rem}

.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.2s var(--ease-out)}
.has-img > .ph-label{display:none}
.proj-link:hover .yt-thumb{transform:scale(1.045)}

.ig-wrap{display:flex;justify-content:center}
.ig-wrap .instagram-media{width:100%!important;max-width:420px!important;min-width:280px!important;margin:0!important;border-radius:var(--radius)!important}

.media-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1.2s var(--ease-out)}
.proj-link:hover .media-img{transform:scale(1.045)}
.po-gallery--solo{display:flex;justify-content:center}
.po-gallery--solo .g-item{width:min(100%,440px)}
.po-gallery--grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.po-gallery--grid > :first-child:nth-last-child(2n+1){grid-column:1/-1}
@media (max-width:640px){.po-gallery--grid{grid-template-columns:minmax(0,1fr)}}

.po-facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}

.c-address{font-size:1.05rem;line-height:1.45}
.studio-soon .soon-mark{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);font-size:clamp(12rem,28vw,30rem);line-height:0}
.studio-soon .soon-mark .lens{margin:0}

.proj-media > .play,.po-media > .play{width:clamp(56px,6vw,84px);pointer-events:none}
.has-img > .play{opacity:.92}

/* ---------- service photos ---------- */
.svc-photo{margin:0;display:block;aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--char-2)}
.svc-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-photo .label{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:2.6rem clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);text-align:left;font-size:.68rem;color:var(--on-char);background:linear-gradient(180deg,transparent,rgba(20,18,17,.78))}
@media (max-width:860px){.svc-photo{max-width:100%;width:100%;aspect-ratio:4/3}.svc-photo img{object-position:50% 40%}}

/* ---------- corporate video extras ---------- */
.promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.promise{display:grid;gap:.35rem;align-content:start;padding:1.1rem 1.25rem;border-radius:12px;background:var(--paper-2);min-width:0}
.promise .label{color:var(--coral-deep)}
.promise p:last-child{color:var(--ink-soft);font-size:var(--t-small);line-height:1.55}
.films{display:grid;gap:1.1rem;padding-top:1.6rem;border-top:1px dashed var(--line-strong)}
.films h3{font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.films-list{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem var(--col-gap)}
.films-list li{display:grid;gap:.25rem;align-content:start;min-width:0;padding-left:1.4rem;position:relative}
.films-list li::before{content:"";position:absolute;left:0;top:.5em;width:.55rem;height:.55rem;border-radius:50%;background:var(--coral)}
.films-list strong{font-family:var(--f-display);font-size:1.12rem;font-weight:700;letter-spacing:-.012em;line-height:1.25}
.films-list li > span{color:var(--ink-soft);font-size:var(--t-small);line-height:1.5}
.films-list a{display:inline-flex;align-items:center;gap:.4rem;justify-self:start;margin-top:.15rem;font-size:.88rem;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--coral)}
.films-list a svg{width:.9rem;height:.9rem;transition:transform .4s var(--ease-out)}
.films-list a:hover svg{transform:translateX(4px)}
@media (max-width:640px){.promises,.films-list{grid-template-columns:minmax(0,1fr)}}
/* how a month works (social media) */
.month-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem var(--col-gap)}
.month-row li{position:relative;display:grid;gap:.3rem;align-content:start;min-width:0;padding-top:.95rem;border-top:1.5px solid var(--line-strong)}
.month-row li::before{content:"";position:absolute;left:0;top:-1.5px;width:2.25rem;height:1.5px;background:var(--coral)}
.month-row .label{color:var(--coral-deep)}
.month-row strong{display:flex;align-items:baseline;gap:.45em;font-family:var(--f-display);font-size:1.12rem;font-weight:700;letter-spacing:-.012em;line-height:1.25}
.month-row li:not(:last-child) strong::after{content:"\2192";color:var(--coral-deep);font-family:var(--f-body);font-weight:500;font-size:.9em}
.month-row li > span:last-child{color:var(--ink-soft);font-size:var(--t-small);line-height:1.5}
@media (max-width:1100px){.month-row{grid-template-columns:repeat(2,minmax(0,1fr))}.month-row li strong::after{display:none}}
/* social media: one phone that switches between client pages */
.svc-photo.svc-phones{aspect-ratio:3/4;background:radial-gradient(75% 55% at 50% 42%,rgba(255,91,58,.16),transparent 72%),var(--char)}
.svc-phones .phone{position:absolute;top:7%;bottom:14%;left:50%;transform:translateX(-50%);aspect-ratio:9/19.5;padding:2.4%;border-radius:14%/6.5%;background:#0e0d0c;
  box-shadow:0 0 0 1.5px rgba(244,241,236,.24),0 22px 48px rgba(0,0,0,.5)}
.phone-screen{position:relative;height:100%;border-radius:11%/5.1%;overflow:hidden;background:var(--char-3)}
.phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;animation:psFade 12s linear infinite}
.svc-photo.svc-phones .label{top:auto;bottom:5%;height:1.5em;padding:0;background:none;text-align:center;color:var(--on-char)}
.svc-phones .pc{position:absolute;left:0;right:0;opacity:0;animation:psFade 12s linear infinite}
.phone-screen img:nth-child(1),.svc-phones .pc:nth-child(1){animation-delay:-.5s}
.phone-screen img:nth-child(2),.svc-phones .pc:nth-child(2){animation-delay:3.5s}
.phone-screen img:nth-child(3),.svc-phones .pc:nth-child(3){animation-delay:7.5s}
@keyframes psFade{0%{opacity:0}4.17%{opacity:1}33.33%{opacity:1}37.5%{opacity:0}100%{opacity:0}}
@media (max-width:860px){.svc-photo.svc-phones{aspect-ratio:1/1}.svc-phones .phone{top:6%;bottom:13%}}
@media (prefers-reduced-motion:reduce){.phone-screen img,.svc-phones .pc{animation:none}.phone-screen img:first-child,.svc-phones .pc:first-child{opacity:1}}

/* ---------- behind the scenes (about) ---------- */
.bts-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.bts-tile{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--char-2);aspect-ratio:1/1;max-width:100%}
.bts-tile--video{grid-row:span 2;aspect-ratio:auto}
.bts-tile img,.bts-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bts-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:3rem clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-char);background:linear-gradient(180deg,transparent,rgba(20,18,17,.78))}
@media (max-width:760px){
  .bts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bts-tile--video{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
}

/* ---------- formats row + recent reels (services) ---------- */
.fmt-row{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.fmt-row li{display:flex;align-items:center;gap:.9rem;min-width:0}
.fmt-vis{flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:10px;background:var(--char)}
.fmt-vis i{display:block;border:1.5px solid var(--on-char);border-radius:3px;background:var(--char-3)}
.fmt-txt{display:grid;gap:.1rem;min-width:0;font-size:var(--t-small);line-height:1.4;color:var(--ink-soft)}
.fmt-txt strong{font-family:var(--f-mono);font-weight:400;font-size:.8rem;letter-spacing:.1em;color:var(--ink)}
.reel-embeds{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:var(--col-gap);align-items:start}
.reel-embeds .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:100%!important}
.ig-card{margin:0;padding:0;border:0;background:none}
.ig-fallback{position:relative;display:grid;place-items:center;aspect-ratio:9/16;max-width:100%;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--on-char);
  background:radial-gradient(90% 70% at 50% 40%,rgba(255,91,58,.16),transparent 70%),linear-gradient(160deg,var(--char-3),var(--char))}
.ig-fallback .play{width:clamp(56px,6vw,76px)}
.ig-fallback-label{position:absolute;left:0;right:0;bottom:clamp(18px,2.4vw,30px);text-align:center;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:rgba(244,241,236,.85)}
.ig-fallback:hover .play{transform:translate(-50%,-50%) scale(1.07)}
@media (max-width:760px){.fmt-row{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.reel-embeds{grid-template-columns:minmax(0,1fr)}.ig-fallback{aspect-ratio:4/5}}

.reel-item{margin:0;display:grid;gap:.8rem;min-width:0}
.reel-item figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem}
.reel-item figcaption strong{font-family:var(--f-display);font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.reel-item figcaption a{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--coral)}
.reel-item figcaption a svg{width:.85rem;height:.85rem}

/* ---------- two visuals beside one service (script + voice-over) ---------- */
.svc-pair{display:grid;gap:var(--col-gap);align-content:start;min-width:0}
.svc-photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.svc-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.svc-pair .svc-photo{aspect-ratio:4/5}}

/* ---------- founders (about) ---------- */
.founders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(3rem,5vw,4.5rem) clamp(2rem,4vw,4.5rem)}
.founder-card{display:grid;gap:1.7rem;align-content:start;min-width:0}
.founder-card .founder-copy{gap:1.1rem}
.founder-card .founder-role{margin-top:.6rem}
.founders-cta{margin-top:clamp(2.75rem,4vw,3.75rem)}
@media (max-width:760px){.founders{grid-template-columns:minmax(0,1fr)}.founder-card .founder-photo{max-width:440px;width:100%}}

/* ---------- photography grid (services) ---------- */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"tall wide wide" "tall a b" "c c d";gap:.75rem}
.pg-tile{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;background:var(--char-2);aspect-ratio:1/1;min-width:0}
.pg-tall{grid-area:tall;aspect-ratio:auto}
.pg-wide{grid-area:wide;aspect-ratio:2/1}
.pg-a{grid-area:a}
.pg-b{grid-area:b}
.pg-c{grid-area:c;aspect-ratio:2/1}
.pg-d{grid-area:d}
.pg-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease-out)}
.pg-tile:hover img{transform:scale(1.03)}
.pg-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:2.4rem clamp(18px,2.2vw,30px) clamp(16px,2vw,26px);font-family:var(--f-mono);font-size:.64rem;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:var(--on-char);background:linear-gradient(180deg,transparent,rgba(20,18,17,.75))}
@media (max-width:640px){.photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"tall a" "tall b" "wide wide" "c c" "d d";gap:.6rem}.pg-d{aspect-ratio:2/1}}

/* ---------- enquiry form: honeypot and send error ---------- */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
.form-error{margin-top:1rem}
.form-card form{position:relative}

/* ---------- studio: recorded here ---------- */
.sv-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(2rem,3vw,2.5rem) var(--col-gap);align-items:start}
.sv-list{display:grid;gap:clamp(1.75rem,3vw,2.5rem)}
.sv-item{margin:0;display:grid;gap:.9rem;min-width:0}
.sv-media{display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--radius);cursor:pointer;font:inherit}
.sv-media .play{width:clamp(64px,7vw,96px);pointer-events:none}
.sv-media:hover .play{transform:translate(-50%,-50%) scale(1.07)}
.sv-media:hover .yt-thumb{transform:scale(1.03)}
.sv-media:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.sv-item figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem}
.sv-item figcaption strong{font-family:var(--f-display);font-size:1.15rem;font-weight:700;letter-spacing:-.012em}
.sv-item figcaption span{color:var(--ink-soft);font-size:var(--t-small)}
.sv-item figcaption a{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;font-weight:700;text-decoration:none;color:var(--ink);border-bottom:1.5px solid var(--coral)}
.sv-item figcaption a svg{width:.85rem;height:.85rem}
.sv-side{display:grid;gap:.9rem;align-content:start;min-width:0}
.sv-side .reel-embeds{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){.sv-layout{grid-template-columns:minmax(0,1fr)}.sv-side .reel-embeds{grid-template-columns:minmax(0,360px)}}

/* ---------- client logos (home, our work) ---------- */
/* one horizontal strip of same-size circles with white logos, scrolling slowly in a loop.
   --lw on each logo is its width inside the circle (set by build.py). Hover or focus pauses it;
   with reduced motion it stops and becomes a row you can scroll sideways. */
.clients-sec{padding-block:clamp(3.75rem,2.6rem + 4.5vw,7rem);overflow:hidden}
.clients-sec .section-head{margin-bottom:clamp(2rem,1.6rem + 1.8vw,3.25rem)}
.logo-strip{--d:clamp(88px,7.2vw,116px);--lg:clamp(14px,1.6vw,24px);overflow:hidden;padding-block:6px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;width:max-content;animation:logo-scroll 70s linear infinite}
.logo-strip:hover .logo-track,.logo-strip:focus-within .logo-track{animation-play-state:paused}
.logo-list{list-style:none;display:flex;gap:var(--lg);padding-right:var(--lg)}
.logo-list li{flex:none}
.logo-badge{display:grid;place-items:center;width:var(--d);height:var(--d);border-radius:50%;background:var(--char-2);border:1px solid var(--line-on-char);text-decoration:none;transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.logo-badge img{display:block;width:var(--lw);height:auto;filter:brightness(0) invert(1);opacity:.85;transition:opacity .35s var(--ease)}
a.logo-badge:hover{background:var(--char-3);border-color:var(--line-on-char-strong)}
a.logo-badge:hover img{opacity:1}
a.logo-badge:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@keyframes logo-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .logo-strip{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-inline:var(--gutter)}
  .logo-track{animation:none}
  .logo-list[aria-hidden]{display:none}
}

/* ---------- careers ---------- */
.roles{display:grid;gap:1rem;align-content:start;min-width:0}
.role-card{display:grid;gap:.85rem;justify-items:start;padding:clamp(1.3rem,1rem + 1.6vw,2.2rem);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);min-width:0}
.role-meta{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem}
.role-meta li{padding:.32rem .8rem;border-radius:999px;background:var(--paper-2);font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.role-intro{color:var(--ink-soft)}
.role-body{display:grid;gap:.35rem}
.role-body h3{font-size:.95rem;font-weight:800;margin-top:.55rem}
.role-body h3:first-child{margin-top:0}
.role-body p{color:var(--ink-soft);max-width:52ch}
.role-card .btn{margin-top:.5rem}
.role-card--open{background:transparent;border-style:dashed;border-color:var(--line-strong)}
.role-card--open p:last-child{color:var(--ink-soft)}
.field .hint{font-size:.83rem;color:var(--muted)}
.c-jobs{margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem;color:var(--ink-soft)}
.join-sec{padding-block:clamp(3.25rem,2.2rem + 4vw,6rem)}
.join{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.75rem 3rem}
.join-head{display:grid;gap:1rem}
.join-copy{display:grid;gap:1.3rem;justify-items:start}