@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --bg:#111418;
  --panel:#181C22;
  --ink:#F4F2EE;
  --dim:#8A8F99;
  --hot:#E0652F;
  --hot-fill:#E0652F;
  --line:rgba(244,242,238,.12);
  --nav-bg:rgba(17,20,24,.9);
  --nav-glass:rgba(26,30,36,.58);--nav-edge:rgba(244,242,238,.16);
  --nav-sheen:rgba(255,255,255,.10);--nav-cast:rgba(0,0,0,.34);
  --nav-ink:rgba(244,242,238,.82);
  --glass:rgba(26,30,36,.5);--glass-hi:rgba(40,46,54,.62);
  --glass-edge:rgba(244,242,238,.14);--glass-sheen:rgba(255,255,255,.09);
  --glass-cast:rgba(0,0,0,.3);--glass-blur:18px;
  --logo:rgba(244,242,238,.42);
  --tile:rgba(255,255,255,.035);
  --strip:rgba(5,6,8,.5);
  --mark:#9AA0AA;
  --display:'Anton',sans-serif;
  --body:'Space Grotesk',sans-serif;
  --mono:'JetBrains Mono',monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#E9E7E2;--hot:#C85222;--hot-fill:#E0652F;
    --panel:#DCD9D3;
    --ink:#171614;
    --dim:#66625D;
    --line:rgba(23,22,20,.15);
    --nav-bg:rgba(233,231,226,.95);
    --nav-glass:rgba(255,255,255,.5);--nav-edge:rgba(23,22,20,.12);
    --nav-sheen:rgba(255,255,255,.82);--nav-cast:rgba(74,62,54,.15);
    --nav-ink:rgba(23,22,20,.76);
    --glass:rgba(255,255,255,.4);--glass-hi:rgba(255,255,255,.62);
    --glass-edge:rgba(23,22,20,.12);--glass-sheen:rgba(255,255,255,.82);
    --glass-cast:rgba(74,62,54,.12);--glass-blur:18px;
    --logo:rgba(23,22,20,.46);
    --tile:rgba(23,22,20,.04);
    --strip:rgba(255,255,255,.3);
    --mark:#5D5953;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#E9E7E2;--hot:#C85222;--hot-fill:#E0652F;
  --panel:#DCD9D3;
  --ink:#171614;
  --dim:#66625D;
  --line:rgba(23,22,20,.15);
  --nav-bg:rgba(233,231,226,.95);
  --nav-glass:rgba(255,255,255,.5);--nav-edge:rgba(23,22,20,.12);
  --nav-sheen:rgba(255,255,255,.82);--nav-cast:rgba(74,62,54,.15);
  --nav-ink:rgba(23,22,20,.76);
  --glass:rgba(255,255,255,.4);--glass-hi:rgba(255,255,255,.62);
  --glass-edge:rgba(23,22,20,.12);--glass-sheen:rgba(255,255,255,.82);
  --glass-cast:rgba(74,62,54,.12);--glass-blur:18px;
  --logo:rgba(23,22,20,.46);
  --tile:rgba(23,22,20,.04);
  --strip:rgba(255,255,255,.3);
  --mark:#5D5953;
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-weight:300;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--hot-fill);color:#fff}
img,video{display:block;max-width:100%}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;font-weight:400}
.label{font-family:var(--mono);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--dim)}
.label .n{color:var(--hot)}
section{--gutter:max(5vw,calc((100% - 1040px)/2));padding:120px var(--gutter)}
.reveal{opacity:0;transform:translateY(36px)}
.no-anim .reveal{opacity:1;transform:none}

:focus-visible{outline:2px solid var(--hot);outline-offset:4px;border-radius:4px}
.skip{position:fixed;top:-60px;left:16px;z-index:1000;background:var(--hot);color:#fff;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;padding:12px 16px;border-radius:999px;transition:top .3s}
.skip:focus{top:14px}

/* ---------- MOBILE MENU ---------- */
#menuBtn{display:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--ink);
  place-items:center;flex:none;position:relative;z-index:901}
#menuBtn span{display:block;width:14px;height:1.5px;background:currentColor;position:relative;transition:transform .35s,background .2s}
#menuBtn span::before,#menuBtn span::after{content:'';position:absolute;left:0;width:14px;height:1.5px;background:currentColor;transition:transform .35s,top .35s}
#menuBtn span::before{top:-5px}#menuBtn span::after{top:5px}
html.menu-open #menuBtn span{background:transparent}
html.menu-open #menuBtn span::before{top:0;transform:rotate(45deg)}
html.menu-open #menuBtn span::after{top:0;transform:rotate(-45deg)}
#mmenu{position:fixed;inset:0;z-index:790;background:var(--nav-bg);display:flex;flex-direction:column;justify-content:center;
  padding:0 8vw;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
#mmenu{backdrop-filter:blur(34px) saturate(1.4);-webkit-backdrop-filter:blur(34px) saturate(1.4)}
html.menu-open #mmenu{opacity:1;visibility:visible}
html.menu-open{overflow:hidden}
html.menu-open #smooth-wrapper{pointer-events:none}
#mmenu a.big{font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,12vw,92px);line-height:1;
  padding:10px 0;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:16px;
  transform:translateY(30px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s}
#mmenu a.big small{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--hot)}
html.menu-open #mmenu a.big{transform:none;opacity:1}
html.menu-open #mmenu a.big:nth-child(2){transition-delay:.06s}
html.menu-open #mmenu a.big:nth-child(3){transition-delay:.12s}
html.menu-open #mmenu a.big:nth-child(4){transition-delay:.18s}
html.menu-open #mmenu a.big:nth-child(5){transition-delay:.24s}
#mmenu .foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase}
#mmenu .foot .cta{color:#111418;font-weight:500;background:var(--hot-fill);padding:14px 22px;border-radius:999px}
@media (max-width:1180px){#menuBtn{display:grid}}

/* ---------- BRIEF FORM ---------- */
#brief{position:relative;margin:64px auto 0;max-width:820px;text-align:left;
  border:1px solid var(--line);border-radius:22px;padding:34px;background:var(--tile)}
#brief .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#brief .f{display:flex;flex-direction:column;gap:8px}
#brief .f.full{grid-column:1/-1}
#brief label{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
#brief input,#brief select,#brief textarea{font:inherit;font-size:15px;color:var(--ink);background:transparent;
  border:none;border-bottom:1px solid var(--line);padding:10px 0;border-radius:0;transition:border-color .3s}
#brief option{color:#111}
#brief input:focus-visible,#brief select:focus-visible,#brief textarea:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-bottom-color:var(--hot)}
#brief input:focus,#brief select:focus,#brief textarea:focus{border-bottom-color:var(--hot)}
#brief textarea{min-height:96px;resize:vertical}
#brief .row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
#brief .note{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
#brief button{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;padding:18px 34px;border-radius:999px;background:var(--hot-fill);color:#111418;font-weight:500;transition:transform .3s,background .3s}
#brief button:hover{background:#EA7A47;transform:translateY(-2px)}
#sentMsg{margin:40px auto 0;max-width:820px;border:1px solid var(--hot);border-radius:999px;padding:16px 22px;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--hot);text-align:center}
@media (max-width:640px){#brief .grid{grid-template-columns:1fr}#brief{padding:26px 20px}}

/* ---------- NAV ---------- */
#nav{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:800;
  display:flex;align-items:center;gap:38px;
  padding:12px 14px 12px 26px;border-radius:999px;
  background:var(--nav-glass);
  backdrop-filter:blur(26px) saturate(1.7);-webkit-backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid var(--nav-edge);white-space:nowrap;
  /* the inset line is the lit top edge that makes glass read as glass */
  box-shadow:0 10px 34px var(--nav-cast),inset 0 1px 0 var(--nav-sheen)}
/* Glass is a decoration, never the thing holding the text up: anywhere the blur
   cannot run, or transparency is turned down, fall back to the solid bar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #nav{background:var(--nav-bg);box-shadow:0 10px 34px var(--nav-cast)}
}
@media (prefers-reduced-transparency: reduce){
  #nav{background:var(--nav-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
}
#nav .wordmark{font-family:var(--display);font-size:19px;letter-spacing:.05em}
#nav .wordmark i{font-style:normal;color:var(--hot)}
#nav .links{display:flex;gap:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;white-space:nowrap}
#nav .links a{position:relative;padding:6px 0;color:var(--nav-ink);transition:color .3s}
#nav .links a:hover{color:var(--ink)}
#nav .cta{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:#111418;font-weight:500;
  background:var(--hot-fill);padding:12px 22px;border-radius:999px;transition:transform .3s,background .3s}
#nav .cta:hover{background:#EA7A47;transform:translateY(-1px)}
#themeBtn{width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;border:1px solid var(--line);color:var(--dim);
  transition:color .3s,border-color .3s,transform .3s}
#themeBtn:hover{color:var(--hot);border-color:var(--hot);transform:rotate(24deg)}
#themeBtn svg{width:16px;height:16px;display:block}
@media (max-width:1180px){#nav .links{display:none}#nav{gap:20px}}
@media (max-width:480px){#nav .cta{display:none}#nav{gap:16px;padding:10px 12px 10px 20px}}

/* ---------- HERO ---------- */
#hero{position:relative;height:100svh;min-height:640px;overflow:hidden;padding:0;
  display:flex;align-items:center;justify-content:center}
#space{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
section,footer,.marquee{position:relative;z-index:1}
#hero .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#hero .shade{position:absolute;inset:0;background:linear-gradient(rgba(12,14,18,.5),rgba(12,14,18,.72))}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- REELS GALLERY ---------- */
#reels h2{font-size:clamp(44px,7.5vw,110px);line-height:.95;margin:18px 0 44px}
#reels .head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-link{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--hot);display:inline-flex;align-items:center;gap:10px;margin-bottom:44px}
.cta-link .arr{transition:transform .3s}
.cta-link:hover .arr{transform:translateX(6px)}
.reel-wrap{max-width:1040px;margin:0 auto;width:100%}
.reel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.reel{aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:transform .4s,border-color .4s}
.reel:hover,.reel:focus-visible{transform:translateY(-6px);border-color:rgba(224,101,47,.55)}
.reel video,.reel .reel-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Homepage previews delegate activation to the surrounding button, so the video
   itself must not swallow the pointer. Pages with native controls keep them. */
.reel-preview video,.reel-preview .reel-thumb{pointer-events:none}
.reel::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,14,18,0) 55%,rgba(12,14,18,.86));pointer-events:none;z-index:1}
/* native-control cards: keep the scrim clear of the control strip */
.reel:not(.reel-preview)::after{background:linear-gradient(rgba(12,14,18,0) 40%,rgba(12,14,18,.8) 78%,rgba(12,14,18,0) 88%)}
.reel:not(.reel-preview) figcaption{bottom:52px}
.reel figcaption{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;pointer-events:none}
.reel figcaption .label{display:block;color:var(--hot-fill);margin-bottom:5px;font-size:9px}
.reel h3{font-size:clamp(14px,1.2vw,19px);line-height:1.05;color:#fff}
.reel .play{position:absolute;top:12px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:#fff;
  background:rgba(17,20,24,.55);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);transition:background .3s,transform .3s}
.reel:hover .play{background:var(--hot-fill);transform:scale(1.08)}
@media (max-width:900px){.reel-grid{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (max-width:640px){.reel-grid{grid-template-columns:repeat(2,1fr);gap:14px}}

/* ---------- SERVICES ---------- */
#services h2{font-size:clamp(44px,7.5vw,110px);line-height:.95;margin:18px 0 70px}
#services .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
#services .card{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4.5;background:var(--panel)}
#services .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
#services .card::after{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(12,14,18,0) 45%,rgba(12,14,18,.9))}
#services .card:hover img{transform:scale(1.06)}
#services .card .inner{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;
  display:flex;align-items:center;justify-content:flex-start;gap:12px}
#services .card h3{font-size:clamp(19px,1.9vw,27px);line-height:1.05;color:#fff}
#services .card .arr{color:var(--hot);font-size:19px;transition:transform .3s;flex:none}
#services .card:hover .arr{transform:translateX(6px)}
#services .card .k{position:absolute;top:18px;left:22px;z-index:2}
@media (max-width:900px){
  #services .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){#services .grid{grid-template-columns:1fr}#services .card{aspect-ratio:4/3}}

/* ---------- WHY SMV (bento) ---------- */
.rule{display:flex;align-items:center;gap:0;margin:34px 0 0;max-width:180px}
.rule::before{content:'';flex:1;height:1px;background:var(--ink);opacity:.7}
.rule::after{content:'';width:7px;height:7px;border:1px solid var(--ink);margin-left:10px}
#why .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:64px}
.tile{position:relative;border:1px solid var(--line);border-radius:22px;padding:66px 30px 28px;min-height:250px;
  background:var(--tile);overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .4s,transform .4s}
.tile::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(224,101,47,.22),transparent 62%)}
.tile:hover{border-color:rgba(224,101,47,.5);transform:translateY(-3px)}
.tile:hover::before{opacity:1}
.tile.w2{grid-column:span 2}
.tile .k{position:absolute;top:24px;left:30px}
.tile h3{font-size:clamp(22px,2.3vw,34px);line-height:.98;margin:0 0 10px}
.tile p{color:var(--dim);font-size:14px;line-height:1.65;max-width:42ch}
.tile .big{font-family:var(--display);font-size:clamp(64px,7.5vw,120px);line-height:.9;color:var(--ink);margin-bottom:8px}
.tile .big em{font-style:normal;color:var(--hot)}
.tl{display:flex;align-items:center;gap:0;margin:0 0 26px;max-width:520px}
.tl .dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--dim);flex:none;transition:background .4s,border-color .4s}
.tl .dot.on{background:var(--hot-fill);border-color:var(--hot-fill)}
.tl .bar{flex:1;height:1px;background:var(--line);position:relative}
.tl .bar i{position:absolute;inset:0;background:var(--hot-fill);transform:scaleX(0);transform-origin:left}
.tl-l{display:flex;justify-content:space-between;max-width:520px;margin:-16px 0 22px;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--dim)}
.map{position:absolute;right:26px;top:26px;width:min(46%,260px);opacity:.9}
.map .g{fill:var(--dim);opacity:.28}
.map .c{fill:var(--hot-fill)}
.map .pulse{fill:none;stroke:var(--hot);stroke-width:1;transform-origin:center;animation:pulse 2.6s ease-out infinite}
.map .pulse.d2{animation-delay:1.3s}
@keyframes pulse{0%{transform:scale(.3);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.map text{font-family:var(--mono);font-size:7px;letter-spacing:.25em;fill:var(--ink)}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.specs span{font-family:var(--mono);font-size:9px;letter-spacing:.22em;padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
@media (max-width:900px){#why .grid{grid-template-columns:repeat(2,1fr)}.tile.w2{grid-column:span 2}}
@media (max-width:600px){#why .grid{grid-template-columns:1fr}.tile.w2{grid-column:span 1}.map{position:static;width:100%;margin-bottom:18px}}

/* ---------- CLIENTS ---------- */
#clients{border-top:1px solid var(--line)}
#clients .marq{margin-top:70px;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#clients .track{display:inline-flex;will-change:transform;animation:lmq 34s linear infinite}
#clients .marq:hover .track{animation-play-state:paused}
#clients .unit{display:inline-flex;align-items:center;gap:6vw;padding-right:6vw}
@keyframes lmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){#clients .track{animation:none}}
#clients .clogo{--lh:clamp(54px,7vw,84px);height:var(--lh);flex:none;
  color:var(--logo);transition:color .35s,transform .35s}
#clients .unit .clogo:nth-child(1){width:calc(var(--lh)*3.125)}
#clients .unit .clogo:nth-child(2){width:calc(var(--lh)*3.5)}
#clients .unit .clogo:nth-child(3){width:calc(var(--lh)*2.875)}
#clients .unit .clogo:nth-child(4){width:calc(var(--lh)*4)}
#clients .unit .clogo:nth-child(5){width:calc(var(--lh)*2.375)}
#clients .unit .clogo:nth-child(6){width:calc(var(--lh)*2.125)}
#clients .clogo:hover{color:var(--hot);transform:translateY(-3px)}
#clients .clogo text{font-family:var(--display);fill:currentColor;letter-spacing:.06em}
#clients .clogo .sub{font-family:var(--mono);letter-spacing:.34em}
#clients .clogo .ln{stroke:currentColor;fill:none}
#clients .clogo .fl{fill:currentColor}
@media (max-width:700px){#clients .wall{grid-template-columns:repeat(2,1fr);gap:40px 8vw}}

/* ---------- STATS ---------- */
#stats{padding-top:60px}
#stats .row{display:grid;grid-template-columns:repeat(4,1fr);gap:4vw}
#stats .cell{border-top:1px solid var(--line);padding-top:24px}
#stats .cell b{font-family:var(--display);font-weight:400;font-size:clamp(40px,5.5vw,84px);color:var(--ink);display:block;line-height:1}
#stats .cell b em{font-style:normal;color:var(--hot)}
#stats .cell .label{margin-top:12px}
#stats .cell .sub{margin-top:6px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim);opacity:.65;text-transform:uppercase}
@media (max-width:700px){#stats .row{grid-template-columns:repeat(2,1fr);gap:36px 6vw}}

/* ---------- CTA / CONTACT ---------- */
#contact{position:relative;text-align:center;padding:160px var(--gutter) 60px;overflow:hidden}
#contact .label{position:relative}
#contact h2{position:relative;font-size:clamp(32px,4.6vw,72px);line-height:1.04;margin:26px 0 34px;color:var(--ink)}
#contact .btns{position:relative;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
#contact .btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;padding:20px 38px;border-radius:999px;transition:transform .3s,background .3s,border-color .3s}
#contact .btn.hot{background:var(--hot-fill);color:#111418;font-weight:500}
#contact .btn.hot:hover{background:#EA7A47;transform:translateY(-2px)}
#contact .btn.ghost{border:1px solid var(--line);color:var(--ink)}
#contact .btn.ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
#contact .mail{position:relative;display:inline-block;margin-top:60px;
  font-family:var(--mono);font-size:clamp(12px,1.6vw,16px);letter-spacing:.3em;color:var(--dim);transition:color .3s}
#contact .mail:hover{color:var(--hot)}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line);padding:44px max(5vw,calc((100% - 1040px)/2)) 34px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:14px;align-items:flex-start;text-align:start}
footer .wordmark{font-family:var(--display);font-size:20px;margin-bottom:4px}
footer .wordmark i{font-style:normal;color:var(--hot)}
footer .col{width:100%;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);line-height:2.1;text-transform:uppercase}
footer .col b{color:var(--ink);font-weight:400;display:block}
footer .col a:hover{color:var(--hot)}
footer .copy{width:100%;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--dim);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-transform:uppercase}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
    #hero .scrolldn::after{animation:none}
}

/* ---------- added: a11y + classes replacing inline styles ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.hp{display:none}
.map .o1{transform-origin:160px 80px}
.map .o2{transform-origin:190px 58px}
#hero .vid{background:#111418}
#hero .vid[poster]{object-fit:cover}

/* ====================== CREATIVE LAYER ====================== */
#leader{position:fixed;inset:0;z-index:1200;background:#0C0E12;display:none;align-items:center;justify-content:center;color:#F4F2EE}
html.leader #leader{display:flex}
#leader .bar{position:absolute;left:0;right:0;height:50%;background:#07080B;z-index:2}
#leader .bar.top{top:0;transform-origin:top}
#leader .bar.bot{bottom:0;transform-origin:bottom}
#leader .count{position:relative;z-index:3;width:min(42vw,260px);aspect-ratio:1;display:grid;place-items:center}
#leader .count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
#leader .ring-bg{fill:none;stroke:rgba(244,242,238,.12);stroke-width:1.5}
#leader .ring{fill:none;stroke:var(--hot-fill);stroke-width:2.5;stroke-dasharray:289;stroke-dashoffset:289;stroke-linecap:round}
#leader #leaderNum{font-family:var(--display);font-size:clamp(90px,18vw,190px);line-height:1;color:#F4F2EE}
#leader .slate{position:absolute;z-index:3;bottom:7vh;left:0;right:0;text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.4em;color:var(--hot-fill)}
#cur{position:fixed;left:0;top:0;z-index:1500;pointer-events:none;display:none;
  width:12px;height:12px;border:1px solid rgba(255,109,72,.95);border-radius:50%;
  background:rgba(255,74,31,.28);box-shadow:0 0 16px rgba(255,74,31,.34),inset 0 0 8px rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(2px) saturate(1.25);backdrop-filter:blur(2px) saturate(1.25);
  align-items:center;justify-content:center;opacity:0;will-change:transform,width,height;
  transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1),
    background .35s,border-color .35s,box-shadow .35s}
@media (hover:hover) and (pointer:fine){
  html.cur #cur{display:flex}
  html.cur,html.cur a,html.cur button,html.cur [role=button],html.cur label{cursor:none}
  /* never hide the pointer where the OS control matters */
  html.cur video,html.cur video *,html.cur input,html.cur textarea,html.cur select,
  html.cur #feed,html.cur #feed *,html.cur #rp,html.cur #rp *{cursor:auto}
  html.cur input[type=range]{cursor:pointer}
}
#cur .dot{display:none}
#cur .ring{display:contents}
#cur .ring b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.2em;
  color:#fff;white-space:nowrap;opacity:0;text-shadow:0 1px 8px rgba(0,0,0,.68);transition:opacity .25s}
#cur.big{width:76px;height:76px;background:rgba(255,74,31,.045);border-color:rgba(255,108,71,.74);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 22px rgba(255,74,31,.16);
  -webkit-backdrop-filter:blur(.65px) saturate(1.1);backdrop-filter:blur(.65px) saturate(1.1)}
#cur.big .ring b{opacity:1}
#progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:1050;pointer-events:none}
#progress i{display:block;height:100%;width:100%;background:var(--hot-fill);transform:scaleX(0);transform-origin:left}
#chapter{position:fixed;left:22px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:700;pointer-events:none;
  display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:9px;letter-spacing:.32em;color:var(--dim);opacity:0;transition:opacity .5s}
#chapter i{width:1px;height:34px;background:var(--hot-fill);display:block}
#chapter #chapterNum{color:var(--hot-fill)}
html.chapters #chapter{opacity:1}
@media (max-width:1100px){#chapter{display:none}}
.reel-grid{perspective:1200px}
.reel-preview{transform-style:preserve-3d;will-change:transform}
.reel-preview .glare{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.22),transparent 60%);transition:opacity .35s}
.reel-preview:hover .glare{opacity:1}
#services .card img{will-change:transform}
@media (prefers-reduced-motion:reduce){#leader,#cur,#progress,#chapter{display:none!important}}

/* ====================== ADVANCED LAYER ====================== */
#heroGL{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity .8s;pointer-events:none}
html.gl #heroGL{opacity:1}
html.gl .wipe .line{overflow:hidden;display:block}
#smooth-content{will-change:transform}

/* ====================== PRO LAYER ====================== */
.intro{max-width:52ch;color:var(--dim);font-size:15px;line-height:1.7;margin:-14px 0 34px}
/* hero HUD + showreel button */
.reel-btn{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .3s,background .3s,transform .3s}
.reel-btn .tri{width:0;height:0;border-left:9px solid var(--hot-fill);border-top:6px solid transparent;border-bottom:6px solid transparent}
.reel-btn:hover{border-color:var(--hot-fill);background:rgba(224,101,47,.15);transform:translateY(-2px)}
/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 34px}
.filters button{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;padding:10px 16px;border-radius:999px;border:1px solid var(--line);color:var(--dim);transition:color .3s,border-color .3s,background .3s}
.filters button:hover{color:var(--ink);border-color:var(--ink)}
.filters button.on{background:var(--hot-fill);border-color:var(--hot-fill);color:#111418}
.reel.is-hidden{display:none}
/* faq */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 4px;font-family:var(--display);font-size:clamp(17px,1.7vw,24px);text-transform:uppercase;letter-spacing:.02em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--hot)}
.faq summary i{position:relative;width:22px;height:22px;flex:none;border:1px solid var(--line);border-radius:50%}
.faq summary i::before,.faq summary i::after{content:'';position:absolute;left:50%;top:50%;width:9px;height:1px;background:currentColor;transform:translate(-50%,-50%);transition:transform .3s}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq details[open] summary{color:var(--hot)}
.faq p{color:var(--dim);font-size:15px;line-height:1.7;padding:0 4px 24px;max-width:62ch}
/* vertical feed */
#feed{position:fixed;inset:0;z-index:950;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
#feed.open{opacity:1;visibility:visible}
#feed .feed-bg{position:absolute;inset:0;background:rgba(6,8,12,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#feed .feed-top{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:rgba(255,255,255,.7)}
#feed .feed-top button,#feedMute{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:#fff;padding:10px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px;transition:border-color .3s,color .3s}
#feed .feed-top button:hover,#feedMute:hover{border-color:var(--hot-fill);color:var(--hot-fill)}
#feedMute{position:absolute;z-index:3;bottom:26px;left:50%;transform:translateX(-50%)}
.feed-col{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feed-col::-webkit-scrollbar{display:none}
.feed-item{height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.feed-item .frame{position:relative;height:min(86vh,900px);aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#000;box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.feed-item video{width:100%;height:100%;object-fit:cover;display:block}
.feed-item .cap{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;pointer-events:none}
.feed-item .cap .label{display:block;color:var(--hot-fill);margin-bottom:6px}
.feed-item .cap h3{color:#fff;font-size:clamp(18px,2vw,26px);line-height:1.05}
.feed-item .frame::after{content:'';position:absolute;inset:0;background:linear-gradient(rgba(12,14,18,0) 60%,rgba(12,14,18,.8));pointer-events:none}
/* showreel player */
#rp{position:fixed;inset:0;z-index:960;display:grid;place-items:center;padding:max(64px,4vw) 4vw 4vw;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
#rp.open{opacity:1;visibility:visible}
#rp .rp-bg{position:absolute;inset:0;background:rgba(6,8,12,.96)}
#rpClose{position:absolute;top:22px;right:5vw;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;color:#fff;padding:10px 16px;border:1px solid rgba(255,255,255,.25);border-radius:999px}
#rpClose:hover{border-color:var(--hot-fill);color:var(--hot-fill)}
.rp-box{position:relative;width:min(1280px,100%);z-index:2;display:flex;flex-direction:column;max-height:calc(100dvh - 8vw);min-height:0}
#rpVideo{width:100%;max-width:100%;flex:1 1 auto;min-height:0;aspect-ratio:16/9;object-fit:contain;background:#000;border-radius:16px;display:block;margin-inline:auto}
.rp-ui{display:flex;align-items:center;gap:16px;margin-top:16px;flex:0 0 auto;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:rgba(255,255,255,.82)}
#rpPlay{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;flex:none;transition:border-color .3s,background .3s}
#rpPlay:hover{border-color:var(--hot-fill);background:rgba(224,101,47,.15)}
#rpPlay .tri{width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
#rpPlay.playing .tri{width:10px;height:14px;border:0;border-left:3px solid #fff;border-right:3px solid #fff;margin:0}
.rp-bar{position:relative;flex:1;height:3px;background:rgba(255,255,255,.15);border-radius:3px;cursor:pointer}
.rp-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(255,255,255,.3);border-radius:3px}
.rp-bar b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--hot-fill);border-radius:3px}
.rp-bar b::after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--hot-fill);transform:translateY(-50%)}
#rpMute{padding:10px 14px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em}
#rpMute.off{color:var(--dim)}

/* ====================== LIBRARY COMPONENT PORTS ====================== */
/* Aceternity · Flip Words */
/* Magic UI · Animated Shiny Text */
.tagbox.shiny span{background:linear-gradient(110deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.82) 40%,#fff 50%,rgba(255,255,255,.82) 60%,rgba(255,255,255,.82) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 3s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
/* Aceternity · Hover Border Gradient */
@property --hbg{syntax:'<angle>';inherits:false;initial-value:0deg}
.hbg{position:relative;padding:0!important;border:0!important;background:transparent!important;overflow:visible!important}
.hbg::before{content:'';position:absolute;inset:-1px;border-radius:999px;background:conic-gradient(from var(--hbg),rgba(255,255,255,.15) 0 60%,var(--hot-fill) 78%,#ffb38a 86%,rgba(255,255,255,.15) 100%);
  animation:hbgspin 3.5s linear infinite;opacity:.9;transition:opacity .3s}
.hbg:hover::before{opacity:1;animation-duration:1.2s}
.hbg-in{position:relative;display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border-radius:999px;background:#111418;color:#fff;z-index:1}
#contact .btn.ghost.hbg .hbg-in{padding:20px 38px;color:var(--ink);background:var(--bg)}
@keyframes hbgspin{to{--hbg:360deg}}
/* Magic UI · Shimmer Button */
.shimmer{position:relative;overflow:hidden;isolation:isolate;box-shadow:inset 0 -6px 12px -8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.shimmer::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shimmer 2.8s ease-in-out infinite;z-index:-1}
@keyframes shimmer{60%,100%{transform:translateX(120%)}}
/* Magic UI · Grid / Dot Pattern backdrops */
#reels{position:relative}
#reels::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 40%,#000 30%,transparent 100%);mask-image:radial-gradient(60% 55% at 50% 40%,#000 30%,transparent 100%);opacity:.5}
#stats{position:relative}
#stats::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(var(--dim) 1px,transparent 1.2px);background-size:22px 22px;opacity:.18;
  -webkit-mask-image:radial-gradient(55% 60% at 50% 50%,#000 20%,transparent 100%);mask-image:radial-gradient(55% 60% at 50% 50%,#000 20%,transparent 100%)}
/* Aceternity · Focus Cards (reels) */
@media (hover:hover) and (pointer:fine){
  .reel{transition:transform .4s,border-color .4s,filter .45s,opacity .45s}
  .reel-grid:hover .reel:not(:hover){filter:blur(2px) saturate(.7);opacity:.45}
}
/* Aceternity · Direction Aware Hover (services) */
#services .card .dah{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(160deg,rgba(224,101,47,.55),rgba(224,101,47,.05) 60%,transparent)}
#services .card .inner{transition:transform .45s cubic-bezier(.2,.7,.2,1)}
#services .card:hover .inner{transform:translateY(-6px)}
/* Aceternity · Glowing Effect (bento borders) + Magic UI · Border Beam */
.tile{--ang:0deg;--glow:0}
.tile::after{content:'';position:absolute;inset:0;border-radius:22px;padding:1.5px;pointer-events:none;opacity:var(--glow);transition:opacity .4s;
  background:conic-gradient(from var(--ang),transparent 0 70%,var(--hot-fill) 82%,#ffd2b8 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
@property --beam{syntax:'<angle>';inherits:false;initial-value:0deg}
.tile.beam::before{opacity:1;background:none}
.tile.beam::after{opacity:1;background:conic-gradient(from var(--beam),transparent 0 80%,var(--hot-fill) 92%,transparent 100%);animation:beam 6s linear infinite}
@keyframes beam{to{--beam:360deg}}
/* Magic UI · Border Beam — the same travelling edge the bento tiles use, run
   around the navigation pill. The mask paints the ring only: a conic gradient
   fills the padding box, then the content box is punched out of it. */
#nav::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  pointer-events:none;z-index:2;
  background:conic-gradient(from var(--beam),transparent 0 74%,var(--hot-fill) 88%,
    #ffd2b8 94%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:beam 7s linear infinite}
/* the beam is decoration; hold it still rather than remove the edge entirely */
@media (prefers-reduced-motion:reduce){#nav::after{animation:none}}
.lite #nav::after{animation:none}

/* Aceternity · Lamp Effect (contact) */
.lamp{position:relative;height:clamp(180px,28vw,320px);margin:-40px auto 0;max-width:900px;pointer-events:none;overflow:visible}
.lamp .l1,.lamp .l2{position:absolute;bottom:36%;width:50%;height:100%;opacity:0;transform-origin:bottom;filter:blur(2px)}
.lamp .l1{right:50%;background:conic-gradient(from 70deg at calc(100% - 1px) 100%,var(--hot-fill) 0deg,transparent 48deg);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 95%);mask-image:linear-gradient(180deg,#000 10%,transparent 95%)}
.lamp .l2{left:50%;background:conic-gradient(from 290deg at 1px 100%,transparent 312deg,var(--hot-fill) 360deg);-webkit-mask-image:linear-gradient(180deg,#000 10%,transparent 95%);mask-image:linear-gradient(180deg,#000 10%,transparent 95%)}
.lamp .bar{position:absolute;left:50%;bottom:36%;width:0;height:2px;background:#ffd2b8;transform:translateX(-50%);box-shadow:0 0 24px 4px rgba(224,101,47,.8)}
.lamp .glow{position:absolute;left:50%;bottom:36%;width:0;height:40px;transform:translate(-50%,50%);border-radius:50%;background:var(--hot-fill);filter:blur(36px);opacity:.7}
.lamp+.label{margin-top:-60px}
#contact{overflow:visible}
/* Aceternity · Floating Navbar */
#nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s}
html.nav-hide #nav{transform:translate(-50%,-150%);opacity:0}
@media (prefers-reduced-motion:reduce){.hbg::before,.shimmer::after,.tagbox.shiny span,.tile.beam::after{animation:none}}

/* ---------- editorial hero ---------- */
#hero{align-items:flex-end;justify-content:flex-start}
.hero-copy{position:relative;z-index:2;width:100%;padding:0 max(5vw,calc((100% - 1040px)/2)) 9vh;text-align:left}
.hero-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:rgba(255,255,255,.8);margin-bottom:26px}
.hero-copy .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--hot-fill);box-shadow:0 0 12px rgba(224,101,47,.9)}
#hero h1{font-size:clamp(44px,6.4vw,104px);line-height:.96;letter-spacing:.01em;color:#fff}
#hero h1 .l{display:block;overflow:hidden}
#hero h1 .l>span{display:inline-block}
.no-anim #hero h1 .l>span{transform:none}
#hero h1 em{font-style:normal;color:var(--hot-fill)}
.hero-copy .sub{max-width:44ch;margin:22px 0 30px;color:rgba(255,255,255,.75);font-size:15px;line-height:1.7}
@media (max-width:640px){.hero-copy{padding-bottom:8vh}.hero-copy .sub{font-size:14px;margin:16px 0 22px}#hero h1{font-size:clamp(24px,8.6vw,44px)}}

.no-anim .hero-copy .eyebrow,.no-anim .hero-copy .sub,.no-anim .hero-ctas,.no-anim .hero-copy .trust{opacity:1}


/* ---------- PREMIUM CONTENT SYSTEM (2026-08 content overhaul) ---------- */
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:32px}
.hero-ctas .btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;padding:17px 30px;border-radius:999px;transition:transform .3s,background .3s,border-color .3s;text-transform:uppercase}
.hero-ctas .btn.hot{background:var(--hot-fill);color:#111418;font-weight:500}
.hero-ctas .btn.hot:hover{background:#EA7A47;transform:translateY(-2px)}
#hero .hero-ctas .btn.ghost{border:1px solid rgba(255,255,255,.55);color:#fff}
#hero .hero-ctas .btn.ghost:hover{border-color:#fff;transform:translateY(-2px)}
.hero-ctas .btn.ghost{border:1px solid var(--line);color:var(--ink)}
.hero-ctas .btn.ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.hero-copy .trust{margin-top:26px;font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:rgba(255,255,255,.62);text-transform:uppercase}
@media (max-width:640px){.hero-ctas{gap:10px}.hero-ctas .btn{padding:14px 22px}.hero-copy .trust{font-size:8px;letter-spacing:.18em}}

/* Process steps */
.steps{border-top:1px solid var(--line);max-width:1040px}
.steps .step{display:grid;grid-template-columns:90px 1fr 1.4fr;gap:26px;align-items:start;border-bottom:1px solid var(--line);padding:32px 4px}
.steps .num{font-family:var(--mono);font-size:11px;letter-spacing:.26em;color:var(--hot)}
.steps h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,2vw,28px);text-transform:uppercase;letter-spacing:.02em}
.steps p{color:var(--dim);font-size:14.5px;line-height:1.7;max-width:52ch}
.steps .out{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--hot);text-transform:uppercase}
@media (max-width:760px){.steps .step{grid-template-columns:1fr;gap:10px;padding:26px 2px}}

/* Static subpages */
.static-page #nav{opacity:1}
.page-hero{padding:190px var(--gutter) 70px;position:relative;z-index:1}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;color:var(--hot);text-transform:uppercase}
.page-hero .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--hot-fill)}
.page-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,5.6vw,84px);line-height:.98;letter-spacing:.01em;color:var(--ink);text-transform:uppercase;margin:22px 0 0;max-width:22ch}
.page-hero .lead{margin-top:26px;max-width:62ch;color:var(--dim);font-size:16px;line-height:1.75}
.page-hero .hero-ctas{opacity:1;margin-top:34px}
.page-hero .hero-ctas .btn.ghost{border-color:var(--line);color:var(--ink)}
.page-hero .hero-ctas .btn.ghost:hover{border-color:var(--ink)}
.page-sec{padding:70px var(--gutter) 90px;position:relative;z-index:1}
.page-sec h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.05;text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin:0 0 26px;max-width:26ch}
.page-sec .body{max-width:64ch;color:var(--dim);font-size:15.5px;line-height:1.8}
.page-sec .body + .body{margin-top:18px}
.plist{border-top:1px solid var(--line);max-width:1040px;margin-top:34px}
.plist .item{border-bottom:1px solid var(--line);padding:26px 4px;display:grid;grid-template-columns:1fr 1.6fr;gap:24px;align-items:start}
.plist .item h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.8vw,24px);text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.plist .item p{color:var(--dim);font-size:14.5px;line-height:1.7}
.plist .item .kv{margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--hot);text-transform:uppercase;line-height:2}
@media (max-width:760px){.plist .item{grid-template-columns:1fr;gap:10px}}

/* Founder profile — a human, accountable lead without relying on portraiture. */
.founder-profile{padding-top:38px;padding-bottom:38px}
.founder-grid{max-width:1040px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);
  gap:clamp(42px,7vw,92px);align-items:end;padding:clamp(34px,5vw,64px);border:1px solid var(--glass-edge);
  border-radius:30px;background:linear-gradient(145deg,var(--glass-hi),var(--glass));
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 24px 70px var(--glass-cast)}
.founder-copy .pv-kicker{margin-bottom:18px}
.founder-copy h2{margin-bottom:28px;max-width:none;white-space:nowrap}
.founder-tenure{min-height:230px;padding-inline-start:clamp(28px,4vw,54px);border-inline-start:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.founder-tenure strong{font-family:var(--display);font-weight:400;font-size:clamp(92px,11vw,164px);line-height:.72;
  letter-spacing:-.02em;color:var(--hot-fill)}
.founder-tenure span{margin-top:26px;font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.24em;
  color:var(--ink);text-transform:uppercase}
html[lang="ar"] .founder-tenure span{text-transform:none;letter-spacing:.08em;font-size:13px;line-height:1.75}
@media (max-width:760px){
  .founder-grid{grid-template-columns:1fr;gap:38px;padding:30px 24px;border-radius:24px}
  .founder-copy h2{font-size:clamp(23px,7.2vw,36px)}
  .founder-tenure{min-height:0;padding-inline-start:0;padding-top:30px;border-inline-start:0;border-top:1px solid var(--line)}
  .founder-tenure strong{font-size:clamp(88px,30vw,130px)}
}
.cap-block{border-top:1px solid var(--line);padding:38px 4px;max-width:1040px}
.cap-block .k{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--hot)}
.cap-block h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,2.6vw,36px);text-transform:uppercase;letter-spacing:.01em;margin:12px 0 14px;color:var(--ink)}
.cap-block p{color:var(--dim);font-size:15px;line-height:1.75;max-width:62ch}
.cap-block .kv{margin-top:16px;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;line-height:2.1}
.cap-block .kv b{color:var(--hot);font-weight:400}
.cap-block .cta-link{margin:18px 0 0;display:inline-flex}
.check-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1040px;margin-top:10px}
.check-cols ul{list-style:none;border-top:1px solid var(--line)}
.check-cols li{border-bottom:1px solid var(--line);padding:14px 4px;color:var(--dim);font-size:14px;line-height:1.6}
.check-cols h3{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--hot);text-transform:uppercase;margin-bottom:14px}
@media (max-width:760px){.check-cols{grid-template-columns:1fr}}

/* Contact page form (reuses #brief) */
.contact-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;margin-top:42px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact-path div{display:flex;align-items:center;gap:16px;min-height:82px;padding:18px 22px;border-inline-end:1px solid var(--line)}
.contact-path div:last-child{border-inline-end:0}
.contact-path b{font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--hot);font-weight:400}
.contact-path span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ink);text-transform:uppercase;line-height:1.6}
.direct-email{max-width:820px;margin:0 auto 18px;padding:19px 24px;display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:22px;border:1px solid var(--line);border-radius:18px;background:var(--tile);transition:border-color .3s,transform .3s}
.direct-email:hover{border-color:var(--hot);transform:translateY(-2px)}
.direct-email span{font-family:var(--mono);font-size:9px;letter-spacing:.25em;color:var(--dim);text-transform:uppercase}
.direct-email strong{font-family:var(--display);font-size:clamp(19px,2vw,28px);font-weight:400;color:var(--ink)}
.direct-email i{font-style:normal;color:var(--hot);font-size:18px}
#brief .f.checks{flex-direction:row;align-items:flex-start;gap:12px;grid-column:1/-1}
#brief .f.checks input{width:16px;height:16px;margin-top:2px;accent-color:var(--hot-fill);border:0}
#brief .f.checks label{font-family:var(--body,inherit);font-size:13px;letter-spacing:0;text-transform:none;color:var(--dim);line-height:1.6}
#brief .f.checks a{color:var(--hot);text-decoration:underline}
#brief .privacy-note{grid-column:1/-1;font-size:12px;color:var(--dim);opacity:.8;line-height:1.6}
.form-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:2;max-width:70ch;margin:18px 0 30px}
#brief .brief-details{margin:28px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#brief .brief-details summary,#brief .privacy-disclosure summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 2px;cursor:pointer;list-style:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--hot);text-transform:uppercase}
#brief .brief-details summary::-webkit-details-marker,#brief .privacy-disclosure summary::-webkit-details-marker{display:none}
#brief .brief-details summary i,#brief .privacy-disclosure summary i{position:relative;width:16px;height:16px;flex:0 0 16px}
#brief .brief-details summary i::before,#brief .brief-details summary i::after,#brief .privacy-disclosure summary i::before,#brief .privacy-disclosure summary i::after{content:'';position:absolute;top:7px;left:1px;width:14px;height:1px;background:currentColor;transition:transform .25s}
#brief .brief-details summary i::after,#brief .privacy-disclosure summary i::after{transform:rotate(90deg)}
#brief .brief-details[open] summary i::after,#brief .privacy-disclosure[open] summary i::after{transform:rotate(0)}
#brief .brief-details .grid{padding:6px 0 26px}
#brief .brief-consent{margin-top:26px}
#brief .privacy-disclosure{margin-top:18px;border-top:1px solid var(--line)}
#brief .privacy-disclosure .privacy-note{margin:0;padding:0 0 18px;max-width:72ch}
html[lang="ar"] #brief{text-align:right}
html[lang="ar"] .contact-path span,html[lang="ar"] .direct-email span,html[lang="ar"] #brief .brief-details summary,html[lang="ar"] #brief .privacy-disclosure summary{text-transform:none;letter-spacing:.08em}
@media (max-width:700px){
  .contact-path{grid-template-columns:1fr;margin-top:32px}
  .contact-path div{min-height:64px;border-inline-end:0;border-bottom:1px solid var(--line)}
  .contact-path div:last-child{border-bottom:0}
  .direct-email{grid-template-columns:1fr auto;gap:8px 14px;padding:18px 20px}
  .direct-email strong{grid-column:1}.direct-email i{grid-column:2;grid-row:1/3}
}

/* Static work grid */
.static-page .reel-grid .reel{cursor:default}
.static-page .reel video{width:100%;height:100%;object-fit:cover;display:block}
.work-note{margin-top:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:2;max-width:74ch}

.static-page #brief{margin-top:0}

/* 404 */
.err-wrap{min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);position:relative;z-index:1}


/* ---------- 05 · CONFIDENCE — service journey (winding drawn line) ---------- */

/* ---------- BIG SECTION HEADINGS for approach / confidence / credentials ---------- */
#process h2,#confidence h2,#credentials h2{font-size:clamp(40px,6vw,92px);line-height:.96;margin:18px 0 30px}
#process .intro,#confidence .intro,#credentials .intro{margin-top:0}

/* ---------- 03 · APPROACH — glass timeline cards ---------- */
.flow{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px;
  margin-inline:calc(3vw - var(--gutter))}
.flow::before{content:'';position:absolute;top:26px;left:3%;right:3%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,101,47,.55) 12%,rgba(224,101,47,.55) 88%,transparent)}
.fcard{position:relative;border:1px solid var(--line);border-radius:22px;padding:20px 20px 24px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 55%,rgba(224,101,47,.04));
  transition:transform .35s,border-color .35s}
.fcard:hover{transform:translateY(-4px);border-color:rgba(224,101,47,.45)}
.fcard .node{position:absolute;top:18px;left:18px;width:14px;height:14px;border-radius:50%;
  background:var(--hot-fill);box-shadow:0 0 0 5px rgba(224,101,47,.16),0 0 18px rgba(224,101,47,.55)}
.fcard .mini{position:relative;margin:34px 0 20px;height:96px;border-radius:12px;overflow:hidden;
  background:rgba(10,13,17,.72);border:1px solid rgba(255,255,255,.07);padding:14px 14px 30px}
:root[data-theme="light"] .fcard .mini{background:rgba(18,20,24,.85)}
.fcard .mini b{position:absolute;left:14px;bottom:10px;font-family:var(--mono);font-weight:400;
  font-size:8px;letter-spacing:.24em;color:rgba(244,242,238,.55)}
.fcard .mini .ln{display:block;height:2px;border-radius:2px;background:rgba(244,242,238,.28);margin-bottom:9px;width:82%}
.fcard .mini .ln.s{width:58%}
.fcard .mini .ln.hot{width:70%;background:var(--hot-fill)}
.fcard .mini .bx{display:inline-block;width:9px;height:9px;border:1px solid rgba(244,242,238,.4);border-radius:2px;margin:0 8px 6px 0;vertical-align:middle}
.fcard .mini .bx.on{background:var(--hot-fill);border-color:var(--hot-fill)}
.fcard .mini .ln + .bx{margin-top:2px}
.fcard .mini.rec .ring{position:absolute;left:50%;top:32px;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;border:2px solid rgba(244,242,238,.35)}
.fcard .mini.rec .ring::after{content:'';position:absolute;inset:9px;border-radius:50%;background:rgba(244,242,238,.2)}
.fcard .mini.rec .dot{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--hot-fill)}
.fcard .mini.rec .d1{top:14px;left:14px}
.fcard .mini.rec .d2{top:20px;right:16px}
.fcard .mini.bars .br{position:absolute;bottom:34px;width:7px;border-radius:3px;background:linear-gradient(180deg,#EA7A47,var(--hot-fill))}
.fcard .mini.bars .b1{left:22%;height:26px}
.fcard .mini.bars .b2{left:34%;height:38px}
.fcard .mini.bars .b3{left:46%;height:20px}
.fcard .mini.bars .b4{left:58%;height:32px}
.fcard .mini.bars .b5{left:70%;height:42px}
.fcard .mini .pill{display:block;height:8px;border-radius:99px;border:1px solid rgba(244,242,238,.3);margin-bottom:10px;width:84%}
.fcard .mini .pill.s{width:62%}
.fcard .mini .pill.hot{width:74%;border-color:var(--hot);background:rgba(224,101,47,.35)}
.fcard .stepk{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--hot)}
.fcard h3{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,30px);letter-spacing:.02em;text-transform:uppercase;margin:10px 0 10px;color:var(--ink)}
.fcard p{color:var(--dim);font-size:13px;line-height:1.65}
.fcard .meta{display:block;margin-top:14px;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim);opacity:.8;text-transform:uppercase;line-height:1.9}
@media (max-width:1150px){.flow{grid-template-columns:repeat(2,1fr);margin-inline:0}.flow::before{display:none}.fcard:last-child{grid-column:1/-1}}
@media (max-width:600px){.flow{grid-template-columns:1fr}.fcard:last-child{grid-column:auto}}

/* ---------- 05 · CREDENTIALS — glass value tiles ---------- */
.nrow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1040px;margin-top:14px}
.ncell{position:relative;border:1px solid var(--line);border-radius:20px;padding:52px 22px 24px;
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 55%,rgba(224,101,47,.04));
  transition:transform .35s,border-color .35s}
.ncell:hover{transform:translateY(-4px);border-color:rgba(224,101,47,.45)}
.ncell .node{position:absolute;top:18px;left:20px;width:11px;height:11px;border-radius:50%;
  background:var(--hot-fill);box-shadow:0 0 0 4px rgba(224,101,47,.15),0 0 14px rgba(224,101,47,.5)}
.ncell .v{font-family:var(--display);font-size:clamp(34px,3.6vw,58px);line-height:1;letter-spacing:.005em;color:var(--ink);text-transform:uppercase}
.ncell .v i{font-style:normal;color:var(--hot)}
.ncell .l{margin-top:14px;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--dim);text-transform:uppercase;line-height:1.9}
.cred-note{margin:40px 0 24px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:2;max-width:72ch}
@media (max-width:900px){.nrow{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.nrow{grid-template-columns:1fr}}

/* ---------- LANGUAGE TOGGLE ---------- */
#nav .lang{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em}
#nav .lang a{color:var(--nav-ink);transition:color .3s;padding:4px 2px}
#nav .lang a:hover{color:var(--ink)}
#nav .lang a.on{color:var(--hot)}
#nav .lang i{font-style:normal;color:var(--line)}
#mmenu .mlang{display:block;font-family:var(--mono);font-size:13px;color:var(--hot);margin-bottom:14px}

/* ---------- ARABIC (ar.html) ---------- */
@font-face{font-family:'Almarai';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/almarai-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Almarai';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/almarai-arabic-800.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
html[lang="ar"]{--body:'Almarai','Space Grotesk',system-ui,sans-serif}
html[lang="ar"] *{letter-spacing:0!important}
html[lang="ar"] body,html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] p,html[lang="ar"] a,html[lang="ar"] button,html[lang="ar"] span,html[lang="ar"] div,html[lang="ar"] summary,html[lang="ar"] li,html[lang="ar"] figcaption{font-family:'Almarai','Space Grotesk',system-ui,sans-serif}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] .ncell .v,html[lang="ar"] .wordmark{font-weight:800}
html[lang="ar"] #hero h1{font-size:clamp(30px,4.8vw,76px);line-height:1.22}
html[lang="ar"] h2.wipe,html[lang="ar"] #reels h2,html[lang="ar"] #services h2,html[lang="ar"] #contact h2,html[lang="ar"] #process h2,html[lang="ar"] #confidence h2,html[lang="ar"] #credentials h2{font-size:clamp(28px,4.6vw,68px);line-height:1.2;text-transform:none}
html[lang="ar"] .hero-copy{text-align:right}
html[lang="ar"] .fcard .node{left:auto;right:18px}
html[lang="ar"] .fcard .mini b{left:auto;right:14px}
html[lang="ar"] .ncell .node{left:auto;right:20px}
html[lang="ar"] .fcard h3{font-size:clamp(19px,1.7vw,26px);text-transform:none}
html[lang="ar"] .faq summary{font-size:clamp(15px,1.5vw,21px);text-transform:none}
html[lang="ar"] .label,html[lang="ar"] .stepk,html[lang="ar"] .meta,html[lang="ar"] .cred-note,html[lang="ar"] .ncell .l,html[lang="ar"] .work-note,html[lang="ar"] .intro,html[lang="ar"] .fcard p{font-size:12px;line-height:1.9}
html[lang="ar"] .plist .item h3{text-transform:none;font-size:clamp(16px,1.6vw,22px)}
html[lang="ar"] #hero .sub{font-size:15px;line-height:2;max-width:52ch}
html[lang="ar"] .btn,html[lang="ar"] #nav .cta{font-size:12px}

/* ================= ACCESSIBILITY / ROBUSTNESS LAYER (2026-08 hardening) ================= */

/* 21 · Content is visible by default. Reveal-hiding applies only when JS is running,
   and never for reduced motion, print or forced-visible capture. */
.reveal{opacity:1;transform:none}
html.js:not(.no-anim) .reveal{opacity:0;transform:translateY(24px)}

html:not(.js) #hero h1 .l>span,html.no-anim #hero h1 .l>span{transform:none}
html:not(.js) .hero-copy .eyebrow,html:not(.js) .hero-copy .sub,html:not(.js) .hero-ctas,
html:not(.js) .hero-copy .trust,html.show-all .hero-copy .eyebrow,html.show-all .hero-copy .sub,
html.show-all .hero-ctas,html.show-all .hero-copy .trust{opacity:1}
html.show-all .reveal,html.show-all .service-stop,html.show-all .fcard,html.show-all .ncell{opacity:1!important;transform:none!important;visibility:visible!important}
html.show-all #hero h1 .l>span{transform:none!important}
@media print{
  .reveal,.fcard,.ncell,.service-stop,h1,h2,h3,p,.intro,.label{opacity:1!important;transform:none!important;visibility:visible!important}
  #hero h1 .l>span{transform:none!important}
  #nav,#mmenu,#space,#cur,#progress,#chapter,#leader,.cred-strip{display:none!important}
  .hero-copy .eyebrow,.hero-copy .sub,.hero-ctas,.hero-copy .trust{opacity:1!important}
}

/* 14 · main landmark carries the smoother content on the homepage */
#main{display:block}

/* 18 · fixed nav must never cover a deep-linked heading */
:target{scroll-margin-top:120px}
section[id],[id^="cap-"],#credentials,#brief-sec,#main,h1[id],h2[id],h3[id],.cap-block{scroll-margin-top:120px}
@media (max-width:820px){:target,section[id],.cap-block{scroll-margin-top:96px}}

/* 16 · auto-hiding nav must come back for keyboard users and never trap focus off-screen */
html.nav-hide #nav{transform:translate(-50%,-140%);transition:transform .45s}
html.nav-hide #nav:focus-within{transform:translate(-50%,0)}
#nav:focus-within{transform:translate(-50%,0)!important}

/* 17 · minimum 44x44 pointer targets on touch/small screens */
@media (max-width:900px),(pointer:coarse){
  #menuBtn,#themeBtn{width:44px;height:44px}
  #nav .lang a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
  .filters button{min-height:44px;padding-block:12px}
  #feedClose,#rpClose,#feedMute,#rpPlay,#rpMute{min-width:44px;min-height:44px}
  #nav .cta,.hero-ctas .btn,#contact .btn,#brief button{min-height:44px}
  .faq summary{min-height:44px}
  .reel .play{width:44px;height:44px}
}

/* 6 · modal: lock scroll without layout shift, hide background from AT */
html.modal-open{overflow:hidden;padding-right:var(--sbw,0px)}
html.modal-open #nav{padding-right:0}
[inert]{cursor:default}
[inert],[inert] *{-webkit-user-select:none;user-select:none}

/* 6 · accessible seek slider for the showreel */
#rp input.rp-range{-webkit-appearance:none;appearance:none;flex:1;height:22px;background:transparent;cursor:pointer;margin:0}
#rp input.rp-range::-webkit-slider-runnable-track{height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--hot-fill) 0%,var(--hot-fill) var(--p,0%),rgba(255,255,255,.22) var(--p,0%),rgba(255,255,255,.22) 100%)}
#rp input.rp-range::-moz-range-track{height:4px;border-radius:99px;background:rgba(255,255,255,.22)}
#rp input.rp-range::-moz-range-progress{height:4px;border-radius:99px;background:var(--hot-fill)}
#rp input.rp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--hot-fill);margin-top:-5px}
#rp input.rp-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--hot-fill)}
#rp input.rp-range:focus-visible{outline:2px solid var(--hot);outline-offset:3px}

/* 6 · keyboard play/pause inside the selected-work feed */
.feed-item .feed-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:rgba(12,14,18,.55);border:1px solid rgba(255,255,255,.5);color:#fff;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;opacity:0;transition:opacity .3s,transform .3s}
.feed-item .feed-toggle:hover,.feed-item .feed-toggle:focus-visible,.feed-item.paused .feed-toggle{opacity:1}
.feed-item .feed-toggle:hover{transform:translate(-50%,-50%) scale(1.06)}

/* 19 · filter buttons + polite status */
.filters button[aria-pressed="true"]{background:var(--hot-fill);color:#111418;border-color:var(--hot-fill)}
.filter-status{margin-top:14px;font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  color:var(--dim);text-transform:uppercase}

/* 27 · inline validation */
.field-error{display:block;margin-top:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:#FF8A5C;text-transform:uppercase}
:root[data-theme="light"] .field-error{color:#9B2F06}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .field-error{color:#9B2F06}}
#brief [aria-invalid="true"]{border-bottom-color:#FF8A5C}
#formErrors{border:1px solid #FF8A5C;border-radius:14px;padding:16px 20px;margin-bottom:24px}
#formErrors h2{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#FF8A5C;margin:0 0 10px}
#formErrors ol{margin:0;padding-inline-start:18px}
#formErrors li{font-size:13px;line-height:1.8}
#formErrors a{color:var(--ink);text-decoration:underline}
:root[data-theme="light"] #formErrors,:root[data-theme="light"] #formErrors h2{border-color:#9B2F06;color:#9B2F06}
#brief button[aria-disabled="true"],#brief button:disabled{opacity:.6;cursor:progress}
#brief select:invalid,#brief select .ph{color:var(--dim)}

/* 30 · privacy link opens in a new tab; mark it */
.newtab::after{content:'↗';font-size:.8em;margin-inline-start:.25em}

/* 12 · Latin runs inside RTL copy */
[dir="rtl"] bdi{unicode-bidi:isolate}

/* 39 · preview videos stay visible (the poster is the frame); only playback is
   on demand, so the gallery never looks empty before the pointer arrives. */
.reel-preview video{opacity:1}

/* hero pause control */
.hero-pause{position:absolute;right:max(5vw,calc((100% - 1040px)/2));bottom:9vh;z-index:3;
  width:44px;height:44px;border-radius:50%;display:none;place-items:center;
  background:rgba(12,14,18,.5);border:1px solid rgba(255,255,255,.42);color:#fff;
  font-family:var(--mono);font-size:8px;letter-spacing:.1em}
html.js .hero-pause.on{display:grid}
.hero-pause[hidden]{display:none!important}
.hero-pause:hover{background:rgba(224,101,47,.75);border-color:var(--hot-fill)}
[dir="rtl"] .hero-pause{right:auto;left:max(5vw,calc((100% - 1040px)/2))}

/* preview card: the whole card is one button */
.reel-open{position:absolute;inset:0;z-index:4;background:transparent;border:0;cursor:pointer;border-radius:18px}
.reel-open:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.reel .meta-line{display:block;margin-top:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;
  color:rgba(255,255,255,.62);text-transform:uppercase;line-height:1.7}
.reel:not(.reel-preview) .meta-line{color:var(--dim)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.rp-ui{display:flex;align-items:center;gap:14px}


/* contrast + in-text link distinction (axe: color-contrast, link-in-text-block) */
:root[data-theme="light"]{--hot:#8A3512}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--hot:#8A3512}}
#brief .privacy-note,.privacy-note{opacity:1;color:var(--ink)}
#brief .privacy-note a{color:var(--hot)}
.body a,.privacy-note a,.work-note a,.lead a,#formErrors a,.faq p a,label a{text-decoration:underline;text-underline-offset:2px}
.field-error{color:#FF9A70}
:root[data-theme="light"] .field-error,@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .field-error{color:#8A2A06}}

/* showreel controls must always stay inside the viewport */
#rp .rp-ui button{color:inherit}
@media (max-height:640px){#rpVideo{aspect-ratio:auto;height:auto}}

/* ---------- HERO INTRO IN CSS (paints at first frame; no JS dependency) ----------
   The LCP text must not wait for the animation library to download. These run
   immediately; the film leader simply reveals them when it opens on desktop. */
@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes heroLine{from{transform:translateY(112%)}to{transform:translateY(0)}}
@keyframes navDrop{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
html.js:not(.no-anim) #hero h1 .l>span{animation:heroLine 1.15s cubic-bezier(.16,1,.3,1) both}
html.js:not(.no-anim) #hero h1 .l:nth-child(2)>span{animation-delay:.12s}
html.js:not(.no-anim) .hero-copy .eyebrow{animation:heroRise .7s ease-out .18s both}
html.js:not(.no-anim) .hero-copy .sub{animation:heroRise .7s ease-out .26s both}
html.js:not(.no-anim) .hero-ctas{animation:heroRise .7s ease-out .34s both}
html.js:not(.no-anim) .hero-copy .trust{animation:heroRise .7s ease-out .42s both}
html.js:not(.no-anim):not(.static-page) #nav{animation:navDrop .8s ease-out .3s both}
html.nav-hide #nav{animation:none}
@media (prefers-reduced-motion:reduce){
  html.js #hero h1 .l>span,html.js .hero-copy .eyebrow,html.js .hero-copy .sub,
  html.js .hero-ctas,html.js .hero-copy .trust,html.js #nav{animation:none}
}


/* section 04 · three-up confidence rows, same card language as the approach flow */
.flow-3{grid-template-columns:repeat(3,1fr);margin-top:26px}
.flow-3 + .flow-3{margin-top:16px}
.flow-3::before{left:6%;right:6%}
.flow-3 .fcard .mini{height:96px}
.flow-3 .fcard h3{font-size:clamp(18px,1.5vw,24px)}
@media (max-width:1000px){.flow-3{grid-template-columns:repeat(2,1fr)}.flow-3::before{display:none}}
@media (max-width:600px){.flow-3{grid-template-columns:1fr}}




/* Centred sections: a max-width block needs auto inline margins, otherwise it
   hugs the inline-start edge while its text centres inside it (mirrored in RTL). */
#contact .intro,#contact .work-note,#contact .cred-note,#contact p{margin-inline:auto}
#credentials .cred-note,#credentials .intro{margin-inline:auto}

/* Google Drive embed mode for the showreel: Drive supplies its own player, so
   our custom transport is hidden rather than shown non-functional. */
#rpFrame{display:none;width:auto;height:100%;max-width:100%;flex:1 1 auto;min-height:0;
  aspect-ratio:var(--rp-ar,16/9);border:0;border-radius:16px;background:#000;margin-inline:auto}
#rp.rp-embed #rpVideo,#rp.rp-embed .rp-ui{display:none}
#rp.rp-embed #rpFrame{display:block}
#rp.rp-embed .rp-box{align-items:center}
@media (max-width:700px){#rp.rp-embed #rpFrame{width:100%;height:auto}}

/* Drive-backed reel: Google supplies the player, so the tile shows its thumbnail
   and the viewer swaps the <video> for Drive's frame. */
.reel[data-drive] video{object-fit:cover}
.reel[data-drive] .play{background:var(--hot-fill);color:#111418;border-color:var(--hot-fill)}
.feed-item .feed-frame{width:100%;max-height:100%;border:0;border-radius:18px;background:#000;
  display:block;margin:auto}
#feed.no-sound #feedMute{display:none}

/* Work page: a Drive-hosted project fills its card with Google's player */
.reel .reel-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}
.reel:has(.reel-frame)::after{background:linear-gradient(rgba(12,14,18,0) 62%,rgba(12,14,18,.9))}
.reel:has(.reel-frame) figcaption{bottom:14px;z-index:3}


/* Opening must make the panel focusable on the very first frame: keep the fade,
   but flip visibility with no delay (a discrete property inside a transition
   otherwise switches at the midpoint, stranding keyboard focus outside). */
html.menu-open #mmenu{transition:opacity .4s,visibility 0s}
#feed.open{transition:opacity .35s,visibility 0s}
#rp.open{transition:opacity .35s,visibility 0s}
/* embedded-player tiles crop their poster to the card */
.reel[data-film] .reel-thumb{object-fit:cover}

/* ================= SELECTED WORK — stage + numbered switcher ================= */
.selwork{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;
  gap:clamp(28px,4vw,64px);max-width:1040px;margin-top:38px}
/* every featured film is shot vertically, so the stage is portrait — a 16/9 stage
   would only display YouTube's blurred filler either side of the real frame. */
.sw-stage{position:relative;border-radius:20px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line);aspect-ratio:9/16;width:auto;height:min(62vh,600px);
  margin-inline:0}
.sw-stage .sw-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;opacity:0;transition:opacity .45s ease;pointer-events:none}
.sw-stage .sw-shot.on{opacity:1}
.sw-stage::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(12,14,18,0) 55%,rgba(12,14,18,.8))}
.sw-open{position:absolute;inset:0;z-index:3;background:transparent;border:0;cursor:pointer}
.sw-open:focus-visible{outline:2px solid var(--hot);outline-offset:-4px}
.sw-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:rgba(224,101,47,.92);color:#111418;pointer-events:none;transition:transform .35s}
.sw-stage:hover .sw-play{transform:translate(-50%,-50%) scale(1.08)}
.sw-play .tri{width:0;height:0;margin-left:4px;border-left:16px solid currentColor;
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.sw-cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:2}
.sw-cap b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.8vw,26px);letter-spacing:.02em;color:#fff}
.sw-cap span{display:block;margin-top:5px;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.22em;color:rgba(255,255,255,.7);text-transform:uppercase}

.sw-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sw-item{width:100%;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:center;
  text-align:start;padding:20px 2px;background:transparent;border:0;border-bottom:1px solid var(--line);
  cursor:pointer;position:relative;color:var(--ink)}
.sw-item .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--dim)}
.sw-item .t{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(14px,1.25vw,18px);line-height:1.2}
.sw-item::after{content:'';position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:0;
  background:var(--hot-fill);transition:width .45s cubic-bezier(.2,.7,.2,1)}
.sw-item[aria-current="true"]::after{width:52px}
.sw-item[aria-current="true"] .n{color:var(--hot)}
.sw-item:hover .t{color:var(--hot)}
.sw-item:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.sw-all{display:inline-flex;align-items:center;gap:12px;margin-top:30px;padding:17px 30px;
  border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink);transition:border-color .3s,background .3s}
.sw-all:hover{border-color:var(--hot-fill);background:rgba(224,101,47,.12)}
@media (max-width:900px){.selwork{grid-template-columns:1fr;gap:26px}
  .sw-stage{height:min(64vh,520px);margin-inline:auto}}

/* ================= PROJECTS — videography / photography switch ================= */
.pv-switch{display:inline-flex;gap:6px;padding:6px;border-radius:999px;border:1px solid var(--line);
  background:var(--tile);margin-top:30px}
.pv-switch button{padding:13px 26px;border-radius:999px;font-family:var(--mono);font-size:10px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--dim);background:transparent;
  transition:background .3s,color .3s;min-height:44px}
.pv-switch button[aria-selected="true"]{background:var(--ink);color:var(--bg)}
.pv-switch button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.pv-panel[hidden]{display:none}
.pv-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--hot);
  text-transform:uppercase;margin-bottom:14px}

/* photography archive: honest empty state until stills are supplied */
.photo-empty{border:1px dashed var(--line);border-radius:22px;padding:clamp(30px,5vw,58px);
  max-width:760px;background:var(--tile)}
.photo-empty h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,32px);color:var(--ink);margin-bottom:16px}
.photo-empty p{color:var(--dim);font-size:15px;line-height:1.8;max-width:56ch}
.photo-empty .cta-link{margin-top:22px;display:inline-flex}


/* ================= PHOTOGRAPHY GRID ================= */
/* Masonry-ish: stills keep their own shape instead of being cropped square. */


/* ================= SELECTED PRODUCTIONS STRIP =================
   Replaces the old kinetic word band. A slow marquee of the organisations SMV
   has produced for; the run is duplicated so translateX(-50%) meets itself. */
.cred-strip{position:relative;z-index:3;padding:30px 0 34px;overflow:hidden;
  border-top:1px solid var(--glass-edge);border-bottom:1px solid var(--glass-edge);
  background:linear-gradient(135deg,var(--glass-hi),var(--glass));
  backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35);
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 18px 52px var(--glass-cast);
  /* A max-content rail inside an RTL block overflows leftwards and lands off
     screen. Lay the strip out LTR in both locales and give the heading — the
     only real prose here — its direction back. */
  direction:ltr}
[dir="rtl"] .cred-heading{direction:rtl}
.cred-heading{display:flex;align-items:flex-end;justify-content:space-between;
  gap:18px;margin:0 5vw 24px}
.cred-heading .label{display:inline-flex;align-items:center;gap:14px;font-family:var(--display);
  font-size:clamp(36px,4.5vw,68px);line-height:.9;letter-spacing:.015em;color:var(--ink)}
.cred-heading .label::before{content:'';width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--hot-fill);box-shadow:0 0 0 7px rgba(224,101,47,.1),0 0 22px rgba(224,101,47,.42)}
.cred-heading .note{font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase}
.cred-heading .note{color:var(--dim)}

.logo-rail{display:flex;width:max-content;animation:logoRail 46s linear infinite}
/* let it travel with the reading direction rather than against it */
[dir="rtl"] .logo-rail{animation-direction:reverse}
.cred-strip:hover .logo-rail{animation-play-state:paused}
@keyframes logoRail{to{transform:translateX(-50%)}}

.logo-group{display:flex;align-items:center;list-style:none;margin:0;padding:0;
  gap:clamp(44px,5.2vw,84px);padding-inline-end:clamp(44px,5.2vw,84px)}
.client-logo{flex:0 0 clamp(142px,13vw,190px);min-height:72px;padding:8px;
  display:grid;place-items:center}
.client-logo img{display:block;max-width:150px;max-height:48px;width:auto;height:auto;
  object-fit:contain;opacity:.6;filter:grayscale(1) contrast(1.6);
  transition:opacity .35s ease,transform .4s cubic-bezier(.2,.8,.2,1)}
.client-logo:hover img{opacity:.95;transform:scale(1.045)}
/* Dark ground needs light marks, light ground needs dark ones — and "system"
   sets no data-theme at all, so all three states are spelled out. */
.client-logo img{filter:grayscale(1) contrast(1.8) brightness(1.15) invert(1);mix-blend-mode:screen}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .client-logo img{
    filter:grayscale(1) contrast(1.6);mix-blend-mode:multiply}
}
:root[data-theme="light"] .client-logo img{
  filter:grayscale(1) contrast(1.6);mix-blend-mode:multiply}

/* Colour carries the "quiet" here, not opacity: a faded mark composites down
   to roughly 3.6:1 against this strip, which is below AA. --mark is chosen to
   stay subdued and still pass in both themes. */
.textmark{font-family:var(--display);font-weight:400;font-size:17px;line-height:.94;
  letter-spacing:.015em;text-align:center;text-transform:uppercase;color:var(--mark);
  transition:color .35s ease}
.textmark small{display:block;margin-top:7px;font-family:var(--mono);font-size:8px;
  line-height:1.3;letter-spacing:.16em;text-transform:uppercase}
.client-logo:hover .textmark{color:var(--ink)}

/* An endlessly moving strip is exactly what reduced-motion asks us to stop.
   Park it and let the row be scrolled by hand instead. */
@media (prefers-reduced-motion: reduce){
  .logo-rail{animation:none}
  .cred-strip .logo-rail{width:auto;overflow-x:auto;scrollbar-width:thin}
  .logo-group[aria-hidden="true"]{display:none}
}
.lite .logo-rail{animation:none}
.lite .cred-strip .logo-rail{width:auto;overflow-x:auto}
.lite .logo-group[aria-hidden="true"]{display:none}

@media (max-width:900px){
  .cred-heading{flex-direction:column;align-items:flex-start;gap:6px}
  .client-logo{flex-basis:132px;min-height:62px;padding:6px}
  .textmark{font-size:15px}
  .logo-rail{animation-duration:38s}
}
@media (max-width:560px){
  .cred-heading .label{font-size:34px}
  .client-logo{flex-basis:114px;min-height:54px}
  .textmark{font-size:13.5px}
}


/* ============ FAQ, on the contact page ============ */
#faq.page-sec .faq{max-width:none;margin-top:26px}


/* ---------- service cards now carry the image ----------
   The photograph sits behind the label, so the card needs its own scrim; the
   text was previously reading against a flat panel. */
.service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;opacity:.88}
/* Weighted to the bottom, where the label sits: the top of the frame stays a
   photograph rather than being washed flat. */
.service-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(12,14,18,0) 34%,rgba(12,14,18,.62) 66%,rgba(12,14,18,.93))}
.service-card b,.service-card span{color:#fff}
:root[data-theme="light"] .service-card::after{
  background:linear-gradient(rgba(12,14,18,0) 34%,rgba(12,14,18,.58) 66%,rgba(12,14,18,.9))}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .service-card::after{
  background:linear-gradient(rgba(12,14,18,0) 34%,rgba(12,14,18,.58) 66%,rgba(12,14,18,.9))}}
.service-card b,.service-card span,.service-card i{position:relative;z-index:2}
.service-card i{position:absolute}
.service-card{min-height:240px}
@media (max-width:900px){.service-card{min-height:200px}}




/* ================= PHOTOGRAPHY: CATEGORY LIST + ALBUM GRID =================
   The albums borrow the retired services-card treatment wholesale — portrait
   frame, bottom gradient, orange arrow, orange wash on hover — so the two
   halves of the Work page feel like one product. */
.photo-note{margin-top:30px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim)}
.photo-shell{display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:clamp(26px,3.4vw,54px);margin-top:30px;align-items:start}

.photo-cats{list-style:none;margin:0;padding:0;position:sticky;top:120px}
.pcat{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:transparent;border:0;border-bottom:1px solid var(--line);cursor:pointer;
  text-align:start;padding:15px 2px;color:var(--dim);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  transition:color .3s,border-color .3s}
.pcat i{font-style:normal;font-size:8.5px;opacity:.65}
.pcat:hover{color:var(--ink)}
.pcat.on{color:var(--hot);border-color:var(--hot-fill)}
.pcat:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.album-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.album{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4.5;
  background:var(--panel);border:1px solid var(--line)}
.album img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.06) saturate(1.05);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.album:hover img{transform:scale(1.06)}
.album::after{content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(12,14,18,0) 45%,rgba(12,14,18,.9))}
/* an album with no cover yet still needs a floor for its label to sit on */
.album.is-empty{background:
  linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),var(--panel)}
.album .k{position:absolute;top:18px;inset-inline-start:22px;z-index:2}
.album .inner{position:absolute;inset-inline:22px;bottom:20px;z-index:2;
  display:flex;align-items:center;gap:12px;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.album:hover .inner{transform:translateY(-6px)}
.album h3{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.7vw,25px);line-height:1.05;color:#fff}
.album .arr{color:var(--hot);font-size:19px;transition:transform .3s;flex:none}
.album:hover .arr{transform:translateX(6px)}
.album-state{position:absolute;inset-inline:22px;bottom:6px;z-index:2;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.62);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.album:hover .album-state{transform:translateY(-6px)}

/* the orange wash, entering from whichever edge the pointer crossed */
.album .dah{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  transform:translate(var(--dx,0),var(--dy,100%));
  background:linear-gradient(160deg,rgba(224,101,47,.55),rgba(224,101,47,.05) 60%,transparent);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.album.lit .dah{opacity:1;transform:translate(0,0)}
@media (prefers-reduced-motion:reduce){
  .album .dah{transition:opacity .2s;transform:none}
  .album img,.album .inner,.album .arr,.album-state{transition:none}
}
.album.is-hidden{display:none}

@media (max-width:1080px){.album-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
  .photo-shell{grid-template-columns:1fr}
  .photo-cats{position:static;display:flex;flex-wrap:wrap;gap:8px;
    border-bottom:1px solid var(--line);padding-bottom:12px}
  .pcat{width:auto;border:1px solid var(--line);border-radius:100px;padding:10px 14px}
  .pcat.on{border-color:var(--hot-fill)}
}
@media (max-width:520px){.album-grid{grid-template-columns:repeat(2,1fr);gap:14px}}


/* ================= GLASS SYSTEM =================
   One surface treatment shared by the navigation, the buttons and the cards:
   a translucent fill, a lit top edge, a soft cast. The blur is the expensive
   part, so it is spent where something sits behind the surface and skipped
   where it would only cost — see the note above the card rules. */

/* ---- buttons: few of them, and they sit over the hero and over images ---- */
.btn.ghost,.reel-btn,.sw-all,.pv-switch,#themeBtn,#menuBtn,.pcat.is-pill,
.service-chips span,.album-open{
  background:var(--glass);border:1px solid var(--glass-edge);
  backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
  box-shadow:0 6px 18px var(--glass-cast),inset 0 1px 0 var(--glass-sheen)}
.btn.ghost:hover,.reel-btn:hover,.sw-all:hover,#themeBtn:hover,#menuBtn:hover{
  background:var(--glass-hi);border-color:var(--hot-fill)}
#contact .btn.ghost{background:var(--glass);border:1px solid var(--glass-edge)}
/* the primary call to action stays opaque — translucency would cost it both
   contrast and its place in the hierarchy. It takes the finish, not the fill. */
.btn.hot,#nav .cta{border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 22px rgba(224,101,47,.28),inset 0 1px 0 rgba(255,255,255,.34)}
.pv-switch button[aria-selected="true"]{box-shadow:inset 0 1px 0 var(--glass-sheen)}

/* ---- cards ---- */
.tile,.fcard,.nrow,.reel,.album,.photo-empty,.sw-stage,.service-card,.production-unit,#brief{
  background:var(--glass);border:1px solid var(--glass-edge);
  box-shadow:0 14px 40px var(--glass-cast),inset 0 1px 0 var(--glass-sheen)}
.photo-empty{border-style:dashed}
.album.is-empty{background:
  linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%),var(--glass)}
/* A card's backdrop is the starfield and the grid texture, so the blur is worth
   having — but there are up to 37 cards on a page, and that many backdrop roots
   is a scroll cost a phone should not pay. Desktop pointers only. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .tile,.fcard,.nrow,.album,.photo-empty,.service-card,.production-unit,#brief{
    backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4)}
}
.reel:hover,.album:hover{border-color:rgba(224,101,47,.55)}

/* ---- the honest fallbacks ---- */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn.ghost,.reel-btn,.sw-all,.pv-switch,#themeBtn,#menuBtn,
  .tile,.fcard,.nrow,.reel,.album,.photo-empty,.sw-stage,.service-card,.production-unit,#brief,
  .cred-strip,#contact,footer,#mmenu{
    background:var(--panel)}
}
@media (prefers-reduced-transparency: reduce){
  .btn.ghost,.reel-btn,.sw-all,.pv-switch,#themeBtn,#menuBtn,.service-chips span,
  .tile,.fcard,.nrow,.reel,.album,.photo-empty,.sw-stage,.service-card,.hero-project-link,
  .production-unit,#brief,.cred-strip,#contact,footer,#mmenu{
    background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* ================= WHAT WE DELIVER =================
   A scroll-led service journey: copy and animated line-art alternate around a
   live production rail while keeping the established SMV glass language. */
#production-system{position:relative;padding-top:92px;padding-bottom:88px;overflow:hidden}
#production-system::before{content:'';position:absolute;inset:4% 0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:54px 54px;opacity:.22;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 48%,#000 18%,transparent 100%);
  mask-image:radial-gradient(60% 70% at 50% 48%,#000 18%,transparent 100%)}
.production-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.65fr);
  gap:clamp(28px,6vw,90px);align-items:end;margin-top:18px}
.production-head h2{font-size:clamp(50px,6.8vw,98px);line-height:.88;letter-spacing:.005em}
.production-head .intro{max-width:40ch;margin:0 0 6px;color:var(--dim);font-size:15px;line-height:1.75}
.production-grid{--production-progress:0;position:relative;display:flex;flex-direction:column;
  gap:clamp(48px,7vw,92px);max-width:1120px;margin:58px auto 0;padding:24px 0}
.production-grid::before,.production-grid::after{content:'';position:absolute;left:50%;top:0;bottom:0;
  width:1px;pointer-events:none}
.production-grid::before{background:var(--line)}
.production-grid::after{width:2px;margin-left:-.5px;background:linear-gradient(var(--hot),var(--hot-fill));
  transform:scaleY(var(--production-progress));transform-origin:center top;box-shadow:0 0 18px rgba(224,101,47,.32)}
.production-unit{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(84px,11vw,160px);align-items:center;min-height:292px;padding:0;overflow:visible;
  isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;transition:none}
.production-unit:hover{transform:none;border-color:transparent;background:transparent;box-shadow:none}
.production-unit::before,.production-unit::after{content:'';position:absolute;left:50%;top:50%;border-radius:50%;
  pointer-events:none;z-index:3;transform:translate(-50%,-50%)}
.production-unit::before{width:11px;height:11px;background:var(--bg);border:2px solid var(--hot-fill);
  box-shadow:0 0 0 7px rgba(224,101,47,.08),0 0 20px rgba(224,101,47,.2)}
.production-unit::after{width:29px;height:29px;border:1px solid rgba(224,101,47,.18)}
.production-copy{grid-column:1;grid-row:1;min-width:0}
.production-visual{grid-column:2;grid-row:1;min-width:0;padding:20px;border:1px solid var(--glass-edge);
  border-radius:28px;background:linear-gradient(145deg,var(--glass-hi),var(--glass) 62%,rgba(224,101,47,.04));
  box-shadow:0 18px 52px var(--glass-cast),inset 0 1px 0 var(--glass-sheen);transition:border-color .35s,transform .35s}
.production-unit:nth-child(even) .production-copy{grid-column:2}
.production-unit:nth-child(even) .production-visual{grid-column:1}
.production-visual:hover{border-color:rgba(224,101,47,.46);transform:translateY(-4px)}
.production-no{display:block;margin-bottom:18px;font-family:var(--mono);font-size:10px;
  font-weight:700;letter-spacing:.26em;color:var(--hot)}
.production-no::before{content:'/';margin-right:8px;color:var(--dim)}
.production-graphic{position:relative;height:172px;margin:0;border-radius:18px;overflow:hidden;
  border:1px solid var(--glass-edge);background:
  linear-gradient(90deg,transparent 49.5%,var(--line) 50%,transparent 50.5%),
  linear-gradient(transparent 49.5%,var(--line) 50%,transparent 50.5%),rgba(8,10,13,.16)}
.production-graphic{transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.production-visual:hover .production-graphic{transform:translateY(-2px);border-color:rgba(224,101,47,.34);
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 8px 26px rgba(224,101,47,.08)}
:root[data-theme="light"] .production-graphic{background:
  linear-gradient(90deg,transparent 49.5%,var(--line) 50%,transparent 50.5%),
  linear-gradient(transparent 49.5%,var(--line) 50%,transparent 50.5%),rgba(255,255,255,.3)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .production-graphic{background:
  linear-gradient(90deg,transparent 49.5%,var(--line) 50%,transparent 50.5%),
  linear-gradient(transparent 49.5%,var(--line) 50%,transparent 50.5%),rgba(255,255,255,.3)}}
.production-unit h3{margin:0;font-size:clamp(34px,4vw,58px);line-height:.98;color:var(--ink)}
.production-unit small{display:block;margin-top:18px;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.19em;line-height:1.55;color:var(--dim)}
.production-visual>span{display:block;margin:15px 2px 1px;font-family:var(--mono);font-size:8px;
  font-weight:700;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
html.js:not(.no-anim) .production-copy,html.js:not(.no-anim) .production-visual{
  opacity:.32;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),border-color .35s}
html.js:not(.no-anim) .production-unit:nth-child(odd) .production-copy{transform:translateX(-28px)}
html.js:not(.no-anim) .production-unit:nth-child(odd) .production-visual{transform:translateX(28px)}
html.js:not(.no-anim) .production-unit:nth-child(even) .production-copy{transform:translateX(28px)}
html.js:not(.no-anim) .production-unit:nth-child(even) .production-visual{transform:translateX(-28px)}
html.js:not(.no-anim) .production-unit.is-active .production-copy,
html.js:not(.no-anim) .production-unit.is-active .production-visual{opacity:1;transform:none}

.pg-plan i{position:absolute;left:15px;height:1px;background:var(--dim);opacity:.62}
.pg-plan i:nth-child(1){top:20px;width:68%}.pg-plan i:nth-child(2){top:38px;width:50%}.pg-plan i:nth-child(3){top:56px;width:74%}
.pg-plan b{position:absolute;top:12px;bottom:12px;left:68%;width:2px;background:var(--hot-fill);
  box-shadow:0 0 14px rgba(224,101,47,.55)}

.pg-crew::before{content:'';position:absolute;inset:18px 20%;background:
  linear-gradient(45deg,transparent 49.4%,var(--line) 50%,transparent 50.6%),
  linear-gradient(-45deg,transparent 49.4%,var(--line) 50%,transparent 50.6%)}
.pg-crew i{position:absolute;width:9px;height:9px;border:1px solid var(--dim);border-radius:50%;background:var(--glass-hi)}
.pg-crew i:nth-child(1){left:18%;top:17px}.pg-crew i:nth-child(2){right:18%;top:17px}
.pg-crew i:nth-child(3){left:18%;bottom:17px}.pg-crew i:nth-child(4){right:18%;bottom:17px}
.pg-crew b{position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--hot-fill);box-shadow:0 0 0 7px rgba(224,101,47,.1),0 0 18px rgba(224,101,47,.45)}

.pg-location::before{content:'';position:absolute;left:50%;top:10px;bottom:10px;width:1px;background:var(--line)}
.pg-location i{position:absolute;left:10px;right:10px;top:50%;height:1px;background:var(--line)}
.pg-location b{position:absolute;left:50%;top:50%;width:42px;height:42px;transform:translate(-50%,-50%);
  border:1px solid var(--hot);border-radius:50%;box-shadow:0 0 24px rgba(224,101,47,.12)}
.pg-location b::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--hot-fill)}

.pg-protocol i{position:absolute;left:18px;width:12px;height:12px;border:1px solid var(--dim);border-radius:3px}
.pg-protocol i::after{content:'';position:absolute;left:22px;top:5px;width:clamp(90px,13vw,156px);height:1px;background:var(--line)}
.pg-protocol i:nth-child(1){top:14px}.pg-protocol i:nth-child(2){top:33px}.pg-protocol i:nth-child(3){top:52px}
.pg-protocol i:nth-child(-n+2){border-color:var(--hot);background:rgba(224,101,47,.22)}
.pg-protocol b{position:absolute;right:18px;top:19px;width:7px;height:13px;border:solid var(--hot-fill);border-width:0 2px 2px 0;transform:rotate(45deg)}

.pg-live i{position:absolute;bottom:17px;width:5px;border-radius:5px 5px 1px 1px;background:var(--dim);opacity:.68}
.pg-live i:nth-child(1){left:23%;height:23px}.pg-live i:nth-child(2){left:34%;height:38px}.pg-live i:nth-child(3){left:45%;height:29px}
.pg-live i:nth-child(4){left:56%;height:46px;background:var(--hot-fill);opacity:1}.pg-live i:nth-child(5){left:67%;height:31px}
.pg-live b{position:absolute;right:14px;top:14px;width:8px;height:8px;border-radius:50%;background:var(--hot-fill);
  box-shadow:0 0 0 6px rgba(224,101,47,.1),0 0 18px rgba(224,101,47,.5)}

.pg-quality b{position:absolute;left:22%;top:50%;width:44px;height:44px;border:1px solid var(--hot);
  border-radius:50%;transform:translateY(-50%)}
.pg-quality b::after{content:'';position:absolute;left:14px;top:9px;width:10px;height:18px;
  border:solid var(--hot-fill);border-width:0 3px 3px 0;transform:rotate(45deg)}
.pg-quality i{position:absolute;left:52%;right:14px;height:2px;border-radius:2px;background:var(--line)}
.pg-quality i:nth-child(1){top:29px}.pg-quality i:nth-child(2){top:47px;background:var(--hot-fill);right:28px}

/* Each control has its own production behaviour. IntersectionObserver adds
   is-active only while the card is on screen, so the motion stays purposeful
   and does not spend work in the background. */
.production-unit.is-active .pg-plan i{transform-origin:left;animation:prodLineIn .72s cubic-bezier(.2,.75,.2,1) both}
.production-unit.is-active .pg-plan i:nth-child(2){animation-delay:.1s}
.production-unit.is-active .pg-plan i:nth-child(3){animation-delay:.2s}
.production-unit.is-active .pg-plan b{animation:prodScan 3.2s ease-in-out .45s infinite}
.production-unit.is-active .pg-crew i{animation:prodNode 3.2s ease-in-out infinite}
.production-unit.is-active .pg-crew i:nth-child(2){animation-delay:.35s}
.production-unit.is-active .pg-crew i:nth-child(3){animation-delay:.7s}
.production-unit.is-active .pg-crew i:nth-child(4){animation-delay:1.05s}
.production-unit.is-active .pg-crew b{animation:prodCore 2.4s ease-in-out infinite}
.production-unit.is-active .pg-location b{animation:prodTarget 2.8s ease-in-out infinite}
.production-unit.is-active .pg-location b::after{animation:prodDot 1.4s ease-in-out infinite}
.production-unit.is-active .pg-protocol i{animation:prodGate 3.6s ease-in-out infinite}
.production-unit.is-active .pg-protocol i:nth-child(2){animation-delay:.45s}
.production-unit.is-active .pg-protocol i:nth-child(3){animation-delay:.9s}
.production-unit.is-active .pg-protocol b{animation:prodCheck 3.6s ease-in-out infinite}
.production-unit.is-active .pg-live i{transform-origin:center bottom;animation:prodWave 1.35s ease-in-out infinite}
.production-unit.is-active .pg-live i:nth-child(2){animation-delay:-.5s}.production-unit.is-active .pg-live i:nth-child(3){animation-delay:-.9s}
.production-unit.is-active .pg-live i:nth-child(4){animation-delay:-.25s}.production-unit.is-active .pg-live i:nth-child(5){animation-delay:-.72s}
.production-unit.is-active .pg-live b{animation:prodLive 1.7s ease-in-out infinite}
.production-unit.is-active .pg-quality b{animation:prodQuality 3s ease-in-out infinite}
.production-unit.is-active .pg-quality b::after{animation:prodCheckPop 3s cubic-bezier(.2,.8,.2,1) infinite}
.production-unit.is-active .pg-quality i:nth-child(2){transform-origin:left;animation:prodReview 3s ease-in-out infinite}
@keyframes prodLineIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:.62}}
@keyframes prodScan{0%,100%{transform:translateX(-42px);opacity:.45}50%{transform:translateX(30px);opacity:1}}
@keyframes prodNode{0%,70%,100%{border-color:var(--dim);box-shadow:none}12%{border-color:var(--hot-fill);box-shadow:0 0 0 5px rgba(224,101,47,.08)}}
@keyframes prodCore{0%,100%{box-shadow:0 0 0 6px rgba(224,101,47,.08),0 0 12px rgba(224,101,47,.28)}50%{box-shadow:0 0 0 12px rgba(224,101,47,0),0 0 24px rgba(224,101,47,.6)}}
@keyframes prodTarget{0%,100%{transform:translate(-50%,-50%) scale(.82);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes prodDot{0%,100%{box-shadow:0 0 0 0 rgba(224,101,47,.32)}50%{box-shadow:0 0 0 9px rgba(224,101,47,0)}}
@keyframes prodGate{0%,58%,100%{background:transparent;border-color:var(--dim)}12%,32%{background:rgba(224,101,47,.28);border-color:var(--hot-fill)}}
@keyframes prodCheck{0%,18%{opacity:0;transform:rotate(45deg) scale(.4)}28%,72%{opacity:1;transform:rotate(45deg) scale(1)}82%,100%{opacity:0;transform:rotate(45deg) scale(.4)}}
@keyframes prodWave{0%,100%{transform:scaleY(.52);opacity:.45}50%{transform:scaleY(1);opacity:1}}
@keyframes prodLive{0%,100%{box-shadow:0 0 0 4px rgba(224,101,47,.1),0 0 12px rgba(224,101,47,.35)}50%{box-shadow:0 0 0 11px rgba(224,101,47,0),0 0 24px rgba(224,101,47,.68)}}
@keyframes prodQuality{0%,100%{box-shadow:0 0 0 0 rgba(224,101,47,0)}45%,70%{box-shadow:0 0 0 8px rgba(224,101,47,.08)}}
@keyframes prodCheckPop{0%,22%{opacity:0;transform:rotate(45deg) scale(.3)}38%,82%{opacity:1;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(.3)}}
@keyframes prodReview{0%,18%{transform:scaleX(0);opacity:.3}48%,82%{transform:scaleX(1);opacity:1}100%{transform:scaleX(0);opacity:.3}}

[dir="rtl"] .production-unit h3,[dir="rtl"] .production-unit small{text-align:right}
[dir="rtl"] .production-unit:nth-child(odd) .production-copy{grid-column:2}
[dir="rtl"] .production-unit:nth-child(odd) .production-visual{grid-column:1}
[dir="rtl"] .production-unit:nth-child(even) .production-copy{grid-column:1}
[dir="rtl"] .production-unit:nth-child(even) .production-visual{grid-column:2}
[dir="rtl"] .production-no::before{margin-right:0;margin-left:8px}
[dir="rtl"] .production-visual>span{text-align:right}
html[lang="ar"] #production-system h2{text-transform:none;font-size:clamp(42px,6vw,82px);line-height:1.1}
html[lang="ar"] .production-unit h3{text-transform:none;font-size:clamp(28px,3.15vw,46px);line-height:1.25}
html[lang="ar"] .production-unit small{font-size:11px;line-height:1.8}
html[lang="ar"] .production-visual>span{font-size:10px}
@media (max-width:860px){
  .production-head{grid-template-columns:1fr;gap:22px}.production-head .intro{max-width:56ch}
  .production-grid{gap:54px;margin-top:40px;padding-inline-start:42px}
  [dir="rtl"] .production-grid{padding-inline-start:42px;padding-inline-end:0}
  .production-grid::before,.production-grid::after{left:12px}
  [dir="rtl"] .production-grid::before,[dir="rtl"] .production-grid::after{left:12px;right:auto}
  .production-unit{grid-template-columns:1fr;gap:20px;min-height:0}
  .production-unit .production-copy,.production-unit:nth-child(odd) .production-copy,.production-unit:nth-child(even) .production-copy,
  [dir="rtl"] .production-unit .production-copy,[dir="rtl"] .production-unit:nth-child(odd) .production-copy,
  [dir="rtl"] .production-unit:nth-child(even) .production-copy{grid-column:1;grid-row:1}
  .production-unit .production-visual,.production-unit:nth-child(odd) .production-visual,.production-unit:nth-child(even) .production-visual,
  [dir="rtl"] .production-unit .production-visual,[dir="rtl"] .production-unit:nth-child(odd) .production-visual,
  [dir="rtl"] .production-unit:nth-child(even) .production-visual{grid-column:1;grid-row:2}
  .production-unit::before,.production-unit::after{left:-30px;top:24px}
  [dir="rtl"] .production-unit::before,[dir="rtl"] .production-unit::after{left:-30px;right:auto;transform:translate(-50%,-50%)}
  html.js:not(.no-anim) .production-unit .production-copy,
  html.js:not(.no-anim) .production-unit .production-visual{transform:translateY(22px)}
}
@media (max-width:540px){
  #production-system{padding-top:82px;padding-bottom:82px}
  .production-head h2{font-size:clamp(44px,14vw,66px)}
  .production-grid{gap:46px;padding-inline-start:30px}
  [dir="rtl"] .production-grid{padding-inline-start:30px;padding-inline-end:0}
  .production-grid::before,.production-grid::after{left:8px}
  [dir="rtl"] .production-grid::before,[dir="rtl"] .production-grid::after{left:8px;right:auto}
  .production-unit::before,.production-unit::after{left:-22px}
  [dir="rtl"] .production-unit::before,[dir="rtl"] .production-unit::after{left:-22px;right:auto}
  .production-visual{padding:13px;border-radius:22px}.production-graphic{height:132px}
  .production-unit h3{font-size:clamp(29px,10vw,44px)}
  html[lang="ar"] .production-unit h3{font-size:clamp(25px,8.6vw,38px)}
}
@media (prefers-reduced-motion:reduce){
  .production-unit .production-copy,.production-unit .production-visual,
  .production-unit .production-graphic,.production-unit .production-graphic *{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}
  .production-grid::after{transform:scaleY(1)}
}

/* Track record — large verified figures, kept open and typographic after the
   denser service journey above. */
#credentials{padding-top:88px;padding-bottom:72px}
.numbers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:18px}
#credentials .numbers-head h2{margin:0;font-size:clamp(56px,8vw,122px);line-height:.88}
.numbers-head>span{padding-bottom:10px;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.26em;color:var(--dim)}
#credentials .nrow{position:relative;isolation:isolate;gap:0;max-width:none;margin-top:40px;
  border:0;border-top:1px solid var(--glass-edge);border-bottom:1px solid var(--glass-edge);
  border-radius:0;overflow:visible;background:transparent;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}
#credentials .nrow::before{content:none}
#credentials .ncell{min-width:0;min-height:184px;overflow:hidden;isolation:isolate;border:0;
  border-inline-end:1px solid var(--glass-edge);border-radius:0;padding:42px 26px 28px;
  background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .35s}
#credentials .ncell:last-child{border-inline-end:0}
#credentials .ncell::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(145deg,transparent 52%,rgba(224,101,47,.045))}
#credentials .ncell::after{content:'';position:absolute;width:100px;height:100px;right:-72px;bottom:-76px;
  z-index:-1;border-radius:50%;background:var(--hot-fill);filter:blur(34px);opacity:0;transition:opacity .35s}
#credentials .ncell:hover{transform:none;border-color:var(--glass-edge);background:rgba(224,101,47,.035);box-shadow:none}
#credentials .ncell:hover::after{opacity:.14}
#credentials .ncell .node{top:24px;left:26px;width:24px;height:2px;border-radius:2px;box-shadow:none}
[dir="rtl"] #credentials .ncell .node{left:auto;right:26px}
#credentials .ncell .v{font-size:clamp(54px,6.2vw,94px);white-space:nowrap}
#credentials .ncell .v strong{font:inherit;font-weight:inherit;color:inherit}
#credentials .ncell .v i{font-size:.62em;vertical-align:.2em}
#credentials .ncell .l{margin-top:16px;font-size:9px;line-height:1.75}
#credentials .cred-note{margin:28px 0 0;max-width:86ch}
@media (max-width:900px){
  #credentials .ncell:nth-child(2){border-inline-end:0}
  #credentials .ncell:nth-child(-n+2){border-bottom:1px solid var(--glass-edge)}
}
@media (max-width:480px){
  .numbers-head{align-items:flex-start;flex-direction:column;gap:12px}
  #credentials .numbers-head h2{font-size:clamp(52px,18vw,78px)}
  .numbers-head>span{padding-bottom:0}
  #credentials .nrow{grid-template-columns:1fr}
  #credentials .ncell,#credentials .ncell:nth-child(2){min-height:148px;border-inline-end:0;border-bottom:1px solid var(--glass-edge);padding:42px 18px 22px}
  #credentials .ncell:last-child{border-bottom:0}
}

/* The homepage now uses glass as a continuous material: marquee, controls,
   credentials and closing brief all belong to the same visual system. */
#contact{width:calc(100% - clamp(24px,6vw,96px));margin:34px auto 38px;padding-top:108px;
  border:1px solid var(--glass-edge);border-radius:clamp(28px,4vw,52px);
  background:linear-gradient(145deg,var(--glass-hi),var(--glass) 48%,rgba(224,101,47,.045));
  backdrop-filter:blur(24px) saturate(1.35);-webkit-backdrop-filter:blur(24px) saturate(1.35);
  box-shadow:0 24px 70px var(--glass-cast),inset 0 1px 0 var(--glass-sheen)}
footer{background:linear-gradient(180deg,var(--glass),rgba(224,101,47,.025));
  border-top-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-sheen)}
@media (max-width:640px){#contact{width:calc(100% - 24px);padding-inline:20px;margin-top:26px}}

/* ================= HOMEPAGE HERO — production timeline ================= */
#hero{display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:end;justify-content:stretch;
  min-height:680px;padding:0 var(--gutter) clamp(32px,5vh,58px);background:
  radial-gradient(circle at 78% 24%,rgba(224,101,47,.11),transparent 30%),
  linear-gradient(145deg,rgba(255,255,255,.025),transparent 44%)}
#hero::before{content:'';position:absolute;inset:-12%;z-index:1;pointer-events:none;opacity:.9;
  background:conic-gradient(from 214deg at 88% 13%,transparent 0 9deg,rgba(224,101,47,.075) 18deg,
    rgba(244,242,238,.035) 29deg,transparent 44deg);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.74) 58%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.74) 58%,transparent 96%)}
#hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:clamp(58px,6.2vw,94px) clamp(58px,6.2vw,94px);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%)}
.hero-field{position:absolute;inset:0;z-index:1;pointer-events:none;color:var(--dim);
  font-family:var(--mono);font-size:8px;letter-spacing:.24em}
.field-code{position:absolute;top:18%;right:var(--gutter);font-size:10px;font-weight:600;letter-spacing:.2em}
.field-time{position:absolute;top:calc(18% + 28px);right:var(--gutter);color:var(--hot)}
.field-axis{position:absolute;display:block;background:var(--line)}
.field-axis-x{left:50%;right:var(--gutter);top:33%;height:1px}
.field-axis-y{top:17%;bottom:21%;right:24%;width:1px}
.field-axis-x::before,.field-axis-y::before{content:'';position:absolute;width:7px;height:7px;border:1px solid var(--hot);border-radius:50%}
.field-axis-x::before{left:-3px;top:-3px}.field-axis-y::before{left:-3px;bottom:-3px}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1040px;margin:auto;padding:14vh 0 4vh;text-align:left}
.hero-copy .eyebrow{color:var(--dim);margin-bottom:24px;font-size:11px;font-weight:600;letter-spacing:.24em}
#hero h1{max-width:9.5ch;font-size:clamp(58px,7.7vw,118px);line-height:.88;letter-spacing:0;color:var(--ink)}
.hero-copy .sub{max-width:none;margin:22px 0 0;color:var(--dim);font-family:var(--mono);
  font-size:11.5px;line-height:1.65;letter-spacing:.19em;text-transform:uppercase}
.hero-ctas{margin-top:30px}
.hero-project-link{position:relative;min-height:48px;padding:0 22px;display:inline-flex;align-items:center;gap:12px;
  overflow:hidden;border:1px solid var(--glass-edge);border-radius:999px;
  background:linear-gradient(135deg,var(--glass-hi),var(--glass));
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 12px 28px var(--glass-cast);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);
  font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.18em;color:var(--ink);text-transform:uppercase;
  transition:transform .3s,border-color .3s,background .3s,box-shadow .3s}
.hero-project-link::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.65;
  background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 34% 68%,rgba(224,101,47,.08))}
.hero-project-link span{color:var(--hot);font-size:15px;transition:transform .3s}
.hero-project-link:hover{transform:translateY(-2px);border-color:rgba(224,101,47,.42);
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 16px 34px var(--glass-cast)}
.hero-project-link:hover span{transform:translate(3px,-3px)}
.hero-timeline{position:relative;z-index:3;width:100%;max-width:1040px;margin:0 auto;padding-top:0}
.timeline-rail{position:absolute;left:12.5%;right:12.5%;top:7px;height:1px;background:var(--line)}
.timeline-fill{position:absolute;inset:0;display:block;background:var(--hot-fill);transform:scaleX(0);transform-origin:left;
  animation:timelineFill 4.35s cubic-bezier(.22,.7,.18,1) 1.2s forwards}
.timeline-fill::after{content:'';position:absolute;right:-5px;top:-5px;width:11px;height:11px;border-radius:50%;
  background:var(--hot-fill);box-shadow:0 0 0 7px rgba(224,101,47,.1),0 0 24px rgba(224,101,47,.65)}
.hero-timeline ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0}
.hero-timeline li{position:relative;padding:29px clamp(5px,1.1vw,14px) 0;text-align:center;color:var(--dim)}
.hero-timeline li::before{content:'';position:absolute;z-index:2;left:50%;top:1px;width:11px;height:11px;border-radius:50%;
  transform:translateX(-50%);background:var(--bg);border:1px solid var(--line);
  animation:timelineNode .42s ease-out calc(1.2s + var(--step)*1.42s) forwards}
.hero-timeline li span{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:.22em;color:var(--hot);opacity:.5}
.hero-timeline li b{display:block;margin-top:6px;font-family:var(--display);font-size:clamp(18px,1.8vw,27px);
  font-weight:400;line-height:1;color:var(--dim);letter-spacing:.03em;
  animation:timelineLabel .42s ease-out calc(1.2s + var(--step)*1.42s) forwards}
.hero-timeline li small{display:block;margin-top:8px;font-family:var(--mono);font-size:6.8px;line-height:1.55;
  letter-spacing:.14em;color:var(--dim);opacity:.55}
@keyframes timelineFill{to{transform:scaleX(1)}}
@keyframes timelineNode{to{background:var(--hot-fill);border-color:var(--hot-fill);box-shadow:0 0 0 6px rgba(224,101,47,.09)}}
@keyframes timelineLabel{to{color:var(--ink)}}
html.js:not(.no-anim) .hero-timeline{animation:heroRise .7s ease-out .42s both}

[dir="rtl"] .hero-copy{text-align:right}
[dir="rtl"] .field-code,[dir="rtl"] .field-time{right:auto;left:var(--gutter)}
[dir="rtl"] .field-axis-x{right:50%;left:var(--gutter)}
[dir="rtl"] .field-axis-y{right:auto;left:24%}
[dir="rtl"] .timeline-fill{left:auto;right:0;transform-origin:right}
[dir="rtl"] .timeline-fill::after{right:auto;left:-5px}
html[lang="ar"] #hero h1{max-width:9ch;font-size:clamp(44px,5.9vw,88px);line-height:1.14;text-transform:none}
html[lang="ar"] .hero-timeline li b{font-family:'Almarai','Space Grotesk',system-ui,sans-serif;font-weight:800;font-size:clamp(17px,1.6vw,24px)}
html[lang="ar"] .hero-timeline li small{font-size:9px;line-height:1.65}

@media (max-width:700px){
  #hero{min-height:680px;padding-bottom:28px;background:
    radial-gradient(circle at 86% 26%,rgba(224,101,47,.1),transparent 35%)}
  #hero::after{opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000)}
  .hero-copy{padding:15vh 0 3vh}
  .hero-copy .eyebrow{max-width:30ch;font-size:9.5px;line-height:1.65;margin-bottom:20px}
  #hero h1{font-size:clamp(48px,14vw,72px);line-height:.9}
  .hero-copy .sub{font-size:9.5px;letter-spacing:.14em;margin-top:18px}
  .hero-ctas{flex-direction:column;align-items:flex-start;gap:8px;margin-top:24px}
  .field-code,.field-time{display:none}.field-axis-x{left:58%;top:29%}.field-axis-y{right:14%;top:14%;bottom:30%}
  [dir="rtl"] .field-axis-x{right:58%;left:var(--gutter)}[dir="rtl"] .field-axis-y{left:14%}
  .hero-timeline li{padding:25px 3px 0}
  .hero-timeline li span{font-size:6.5px}
  .hero-timeline li b{font-size:clamp(14px,4vw,18px);letter-spacing:0}
  .hero-timeline li small{display:none}
  html[lang="ar"] #hero h1{font-size:clamp(38px,11.5vw,58px);line-height:1.18}
  html[lang="ar"] .hero-timeline li b{font-size:clamp(13px,3.7vw,17px)}
}
@media (max-height:700px) and (min-width:701px){
  .hero-copy{padding-top:13vh;padding-bottom:2vh}
  #hero h1{font-size:clamp(50px,7vw,88px)}
  .hero-copy .sub{margin-top:16px}.hero-ctas{margin-top:20px}
  .hero-timeline li small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .timeline-fill{animation:none;transform:scaleX(1)}
  .hero-timeline li::before{animation:none;background:var(--hot-fill);border-color:var(--hot-fill)}
  .hero-timeline li b{animation:none;color:var(--ink)}
  .hero-timeline{animation:none!important}
}
.no-anim .timeline-fill{animation:none;transform:scaleX(1)}
.no-anim .hero-timeline li::before{animation:none;background:var(--hot-fill);border-color:var(--hot-fill)}
.no-anim .hero-timeline li b{animation:none;color:var(--ink)}


/* Full-bleed original motion film: the media is local, shared by both languages. */
#hero.hero-film{display:flex;align-items:center;justify-content:flex-start;isolation:isolate;height:100svh;min-height:690px;padding:140px var(--gutter) 130px;background:#090b0e;color:#f4f2ee}
#hero.hero-film::before,#hero.hero-film::after{display:none}
.hero-film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero-film-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,7,10,.8),rgba(5,7,10,.15) 75%),linear-gradient(0deg,rgba(5,7,10,.9),transparent 38%)}
.hero-film-copy{position:relative;max-width:900px}
.hero-film .eyebrow{opacity:1;color:#d3c7c0;font-size:12px;letter-spacing:.14em;margin-bottom:30px}
#hero.hero-film h1{font-size:clamp(70px,9.5vw,148px);line-height:.97;letter-spacing:-.015em;margin:0;text-align:start;max-width:none;color:#fff}
.hero-film h1>span{display:block}
.hero-film h1 em{color:var(--hot);font-style:normal}
.hero-film-intro{font-family:var(--body);font-size:18px;line-height:1.7;margin-top:28px;color:#ddd7d2}
.hero-film .hero-ctas{opacity:1;display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:30px}
.hero-film .hero-project-link{color:#f4f2ee}
.hero-film-foot{position:absolute;bottom:30px;inset-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.hero-film-foot a{display:flex;align-items:center;gap:18px}
.hero-film-foot a span{color:var(--hot)}
#heroFilmToggle{min-height:44px;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:10px 18px;color:#f4f2ee;background:rgba(10,12,15,.3);font:inherit;cursor:pointer}
#heroFilmToggle:focus-visible{outline:2px solid var(--hot);outline-offset:4px}
html[lang="ar"] #hero.hero-film h1{font-family:var(--body);font-size:clamp(56px,7.3vw,110px);font-weight:800;line-height:1.32;letter-spacing:0;max-width:none}
html[lang="ar"] .hero-film-copy{width:100%;max-width:900px}
html[lang="ar"] #nav .cta,html[lang="ar"] .hero-ctas .btn,html[lang="ar"] #contact .btn,html[lang="ar"] #brief button,html[lang="ar"] #brief label,html[lang="ar"] .filters button,html[lang="ar"] #mmenu .cta{font-family:var(--body);letter-spacing:0;font-size:14px}
html[lang="ar"] .hero-film-shade{transform:scaleX(-1)}
html[lang="ar"] .hero-film .eyebrow,html[lang="ar"] .hero-film-foot{font-family:var(--body);letter-spacing:0;font-size:14px}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 85% 16%,rgba(224,101,47,.085),transparent 55%),conic-gradient(from 214deg at 88% 13%,transparent 0 9deg,rgba(224,101,47,.04) 18deg,rgba(244,242,238,.025) 29deg,transparent 44deg)}
html[lang="ar"] .page-hero h1{line-height:1.35;letter-spacing:0;text-wrap:balance}
html[lang="ar"] .lead,html[lang="ar"] .body,html[lang="ar"] .intro{line-height:1.95}
html[lang="ar"] .page-sec h2,html[lang="ar"] .production-copy h3{line-height:1.5;letter-spacing:0}
@media(max-width:640px){
  #hero.hero-film{min-height:720px;padding-top:150px;padding-bottom:140px;align-items:center}
  #hero.hero-film h1{font-size:clamp(54px,12vw,76px)}
  .hero-film-intro{font-size:16px}
  .hero-film .eyebrow{font-size:11px;letter-spacing:.08em}
  html[lang="ar"] #hero.hero-film h1{font-size:clamp(38px,9.7vw,61px)}
  .hero-film-shade{background:linear-gradient(0deg,rgba(5,7,10,.94),rgba(5,7,10,.4) 80%)}
  .hero-film-foot{font-size:10px;gap:10px}
  html[lang="ar"] .hero-film-foot{font-size:12px}
}

/* A precise cursor, idle when the pointer is idle. */
#cur{width:12px;height:12px;border:1px solid var(--hot);background:transparent;border-radius:50%;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:width .18s,height .18s,opacity .18s}
#cur.big{width:52px;height:52px;background:transparent;border-color:var(--hot);box-shadow:none}
.wordmark{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.sw-silent-preview{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:1}
.sw-stage.is-previewing .sw-play{opacity:0}
#cur .ring b{font-size:12px;color:var(--ink);letter-spacing:.04em}
html[lang="ar"] #cur .ring b{font-family:var(--body);letter-spacing:0}

/* ================= WORK PAGE — CURATED PRODUCTION PORTFOLIO =================
   One dominant production, an editorial archive and a dedicated vertical rail.
   Poster-first cards keep the composition independent of the temporary player
   source; the real player is mounted only after the visitor asks for it. */
.work-page .work-page-hero{padding-bottom:44px}
.work-page .work-page-hero h1{max-width:18ch}
.work-page .work-page-hero h1.work-hero-title{max-width:none}
.work-hero-title span{display:block;white-space:nowrap}
.work-page .work-page-hero .lead{max-width:68ch}
.work-page .work-portfolio{padding-top:22px;padding-bottom:70px}
.work-page .pv-switch{margin:0 0 42px;background:linear-gradient(145deg,var(--glass-hi),var(--glass));
  border-color:var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-sheen),0 18px 48px var(--glass-cast);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.work-page .work-page-title{font-size:clamp(40px,5vw,72px);line-height:1;margin-bottom:30px}
.work-page .pv-panel{outline:0}
.work-page .work-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.work-page .work-section-heading .pv-kicker{margin:0}
.work-count{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--mono);color:var(--hot);white-space:nowrap}
.work-count strong{font-weight:500;font-size:18px;line-height:1;letter-spacing:.12em}
.work-count small{font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

.work-featured{max-width:1240px;margin:0 auto}
.work-featured-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.72fr);
  gap:clamp(20px,2.5vw,38px);margin-top:28px;align-items:stretch}
.work-featured-stage{position:relative;min-width:0;aspect-ratio:16/9;border-radius:32px;overflow:hidden;
  background:var(--panel);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-sheen),0 30px 80px -42px var(--glass-cast)}
.work-page .reel.work-featured-shot{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  border:0;border-radius:0;overflow:hidden;background:#080a0d;transform:none}
.work-page .reel.work-featured-shot[hidden]{display:none}
.work-featured-media,.work-card-media{position:absolute;inset:0;overflow:hidden;background:#080a0d}
.work-card-bg{position:absolute;inset:-8%;background-position:center;background-size:cover;
  filter:blur(32px) saturate(.82) brightness(.58);transform:scale(1.12);opacity:.78}
.work-card-main{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.72,.2,1),filter .5s ease}
.work-featured-media .work-card-main{inset:4% 0;width:100%;height:92%;object-fit:contain;filter:contrast(1.04) saturate(1.02)}
.work-silent-preview{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;
  background:#080a0d;pointer-events:none;opacity:0;animation:workPreviewIn .35s ease .08s forwards}
/* The featured films are vertical inside a wide editorial stage. Keep the
   silent YouTube player on the portrait itself so its black pillarbox never
   spreads beneath the title treatment. */
.work-featured-media .work-silent-preview{inset:4% auto 4% 50%;width:auto;height:92%;
  aspect-ratio:9/16;transform:translateX(-50%);background:transparent}
.work-preview-label{position:absolute;z-index:4;top:clamp(16px,2vw,26px);inset-inline-end:clamp(16px,2vw,28px);
  padding:8px 11px;border:1px solid rgba(255,255,255,.34);border-radius:999px;
  background:rgba(8,10,13,.55);color:rgba(255,255,255,.9);pointer-events:none;
  font-family:var(--mono);font-size:8px;line-height:1;letter-spacing:.18em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@keyframes workPreviewIn{to{opacity:1}}
.work-featured-shot.is-previewing .work-play,.work-card.is-previewing .work-play{opacity:0;transform:translate(-50%,-50%) scale(.82)}
.work-featured-shot.is-previewing .work-card-main,.work-card.is-previewing .work-card-main{filter:brightness(.72)}
.work-featured-shot::after,.work-card::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,10,13,.68),rgba(8,10,13,0) 46%),
    linear-gradient(0deg,rgba(8,10,13,.9),rgba(8,10,13,0) 50%)}
.work-featured-shot figcaption{position:absolute;z-index:3;inset-inline-start:clamp(22px,3vw,44px);
  inset-inline-end:clamp(22px,3vw,44px);bottom:clamp(22px,3vw,40px);pointer-events:none}
.work-featured-shot figcaption .label,.work-card figcaption .label{display:block;color:#f07a43;
  font-family:var(--mono);font-size:9px;line-height:1.5;letter-spacing:.2em;text-transform:uppercase}
.work-featured-shot h3{font-family:var(--display);font-weight:400;color:#fff;text-transform:uppercase;
  font-size:clamp(32px,4.8vw,72px);line-height:.92;margin-top:9px;max-width:12ch}
.work-featured-shot .meta-line{display:block;margin-top:12px;font-family:var(--mono);font-size:9px;
  line-height:1.7;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72);max-width:62ch}
.work-open{position:absolute;inset:0;z-index:5;border:0;background:transparent;cursor:pointer}
.work-open:focus-visible{outline:2px solid var(--hot-fill);outline-offset:-4px}
.work-play{position:absolute;z-index:4;left:50%;top:50%;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;transform:translate(-50%,-50%);pointer-events:none;color:#111418;
  background:rgba(224,101,47,.94);border:1px solid rgba(255,255,255,.38);box-shadow:0 18px 48px rgba(0,0,0,.32);
  transition:transform .35s cubic-bezier(.2,.72,.2,1),box-shadow .35s,opacity .25s}
.work-play i{display:block;width:0;height:0;margin-left:5px;border-left:16px solid currentColor;
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.work-featured-shot:has(.work-open:hover) .work-play,.work-card:has(.work-open:hover) .work-play{
  transform:translate(-50%,-50%) scale(1.09);box-shadow:0 22px 58px rgba(224,101,47,.24)}

.work-featured-list{list-style:none;margin:0;padding:0;border-radius:28px;overflow:hidden;
  background:linear-gradient(145deg,var(--glass-hi),var(--glass));border:1px solid var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 24px 60px -38px var(--glass-cast);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.work-featured-pick{position:relative;width:100%;min-height:20%;display:grid;grid-template-columns:34px 1fr;
  align-content:center;column-gap:12px;text-align:start;padding:18px 22px;border:0;border-bottom:1px solid var(--glass-edge);
  background:transparent;color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
.work-featured-list li:last-child .work-featured-pick{border-bottom:0}
.work-featured-pick>span{grid-row:1/3;font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim)}
.work-featured-pick b{font-family:var(--display);font-weight:400;font-size:clamp(16px,1.45vw,22px);
  line-height:1.05;text-transform:uppercase}
.work-featured-pick small{margin-top:7px;font-family:var(--mono);font-size:7.5px;letter-spacing:.14em;
  line-height:1.4;text-transform:uppercase;color:var(--dim)}
.work-featured-pick::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:var(--hot-fill);transform:scaleY(0);transition:transform .35s;transform-origin:center}
.work-featured-pick[aria-current="true"]{background:rgba(224,101,47,.09)}
.work-featured-pick[aria-current="true"]::before{transform:scaleY(1)}
.work-featured-pick[aria-current="true"]>span{color:var(--hot)}
.work-featured-pick:hover b{color:var(--hot)}
.work-featured-pick:focus-visible{outline:2px solid var(--hot);outline-offset:-3px}

.work-archive,.work-social{max-width:1240px;margin:clamp(92px,11vw,150px) auto 0}
.work-archive-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.work-archive-head .pv-kicker{display:block;margin-bottom:12px}
.work-archive-head h3{font-family:var(--display);font-weight:400;font-size:clamp(36px,5.5vw,76px);
  line-height:.92;text-transform:uppercase;color:var(--ink);max-width:14ch}
.work-archive-head p{margin-top:16px;max-width:62ch;color:var(--dim);font-size:14px;line-height:1.75}
.work-archive-head .work-count{display:grid;justify-items:end;gap:8px;text-align:end}
.work-archive-head .work-count strong{font-family:var(--display);font-weight:400;font-size:clamp(44px,7vw,92px);line-height:.72;color:var(--line)}
.work-archive-head .work-count small{font-size:8px;color:var(--hot)}
.work-filterbar{display:flex;align-items:center;gap:8px;margin:26px 0 32px;overflow-x:auto;
  scrollbar-width:none;padding-bottom:2px}
.work-filterbar::-webkit-scrollbar{display:none}
.work-filterbar button,.work-load{min-height:44px;border-radius:999px;border:1px solid var(--glass-edge);
  background:linear-gradient(145deg,var(--glass-hi),var(--glass));color:var(--dim);white-space:nowrap;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;padding:12px 18px;
  box-shadow:inset 0 1px 0 var(--glass-sheen);transition:color .3s,border-color .3s,background .3s,transform .3s}
.work-filterbar button:hover,.work-filterbar button[aria-pressed="true"]{color:var(--ink);border-color:rgba(224,101,47,.55);
  background:linear-gradient(145deg,rgba(224,101,47,.17),var(--glass))}
.work-filterbar button:focus-visible,.work-load:focus-visible{outline:2px solid var(--hot);outline-offset:2px}

.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);align-items:start}
.work-page .reel.work-card{position:relative;width:100%;height:auto;border-radius:28px;overflow:hidden;
  background:#080a0d;border:1px solid var(--glass-edge);transform:none;cursor:default;
  box-shadow:0 24px 65px -44px rgba(0,0,0,.75)}
.work-page .reel.work-card--wide{grid-column:1/-1;aspect-ratio:16/7.5}
.work-page .reel.work-card--tall{aspect-ratio:4/5}
.work-page .reel.work-card--standard{aspect-ratio:4/3}
.work-page .reel.work-card.is-collapsed,.work-page .reel.work-card[hidden]{display:none}
.work-card figcaption{position:absolute;z-index:3;left:clamp(18px,2.5vw,30px);right:clamp(18px,2.5vw,30px);
  bottom:clamp(18px,2.5vw,28px);pointer-events:none}
[dir="rtl"] .work-card figcaption{left:clamp(18px,2.5vw,30px);right:clamp(18px,2.5vw,30px)}
.work-card h3{font-family:var(--display);font-weight:400;text-transform:uppercase;color:#fff;
  font-size:clamp(22px,3.2vw,46px);line-height:.95;margin-top:7px;max-width:15ch}
.work-card .meta-line{display:block;margin-top:10px;max-width:64ch;font-family:var(--mono);font-size:8px;
  line-height:1.6;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.68);
  opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s}
.work-card .work-play{width:58px;height:58px;opacity:.92}
.work-card .work-play i{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}
.work-card:has(.work-open:hover) .work-card-main{transform:scale(1.035)}
.work-card:has(.work-open:hover) .meta-line,.work-card:has(.work-open:focus-visible) .meta-line{opacity:1;transform:none}
.work-load{display:flex;align-items:center;justify-content:center;gap:14px;margin:34px auto 0;color:var(--ink);padding-inline:28px}
.work-load span{font-size:18px;line-height:1;transition:transform .35s}
.work-load[aria-expanded="true"] span{transform:rotate(45deg)}

.work-social-rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:30px}
.work-page .reel.work-social-card{aspect-ratio:9/16;border-radius:24px}
.work-social-card .work-card-main{object-fit:cover}
.work-social-card h3{font-size:clamp(19px,2.1vw,30px)}
.work-social-card .meta-line{display:none}
.work-social-card .work-play{width:52px;height:52px}
.work-social-card .work-format{display:inline-flex;margin-top:10px;padding:7px 10px;border-radius:999px;
  background:rgba(224,101,47,.9);color:#111418;font-family:var(--mono);font-size:7px;
  letter-spacing:.15em;text-transform:uppercase}

.work-player{position:fixed;inset:0;z-index:980;display:grid;place-items:center;padding:clamp(20px,4vw,64px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.work-player.open{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.work-player-bg{position:absolute;inset:0;border:0;background:rgba(6,8,12,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.work-player-box{position:relative;z-index:2;width:min(1320px,100%);max-height:calc(100dvh - 8vw);overflow:auto;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.55fr);gap:0;border-radius:30px;
  background:linear-gradient(145deg,rgba(32,35,41,.96),rgba(15,17,21,.96));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 40px 120px rgba(0,0,0,.7)}
.work-player-frame{min-height:0;aspect-ratio:16/9;background:#000;border-radius:29px 0 0 29px;overflow:hidden}
[dir="rtl"] .work-player-frame{border-radius:0 29px 29px 0}
.work-player-frame iframe{width:100%;height:100%;display:block;border:0;background:#000}
.work-player-copy{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3.5vw,52px);color:#fff}
.work-player-format-mark{display:none}
.work-player-copy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,4vw,58px);
  line-height:.92;margin-top:12px}
.work-player-copy p{margin-top:18px;font-family:var(--mono);font-size:9px;line-height:1.8;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.work-player-close{position:absolute;z-index:4;top:16px;right:16px;min-height:44px;padding:10px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(9,11,14,.65);color:#fff;font-family:var(--mono);
  font-size:9px;letter-spacing:.18em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
[dir="rtl"] .work-player-close{right:auto;left:16px}
.work-player-close span{font-size:18px;vertical-align:-2px;margin-inline-start:6px}
.work-player-close:hover{border-color:var(--hot-fill);color:var(--hot-fill)}

/* Portrait films keep their native canvas. The adjacent brief occupies the
   remaining landscape space, so there is never a letterboxed black void. */
@media (min-width:681px){
  .work-player.is-vertical{padding:clamp(14px,2.5vw,36px)}
  .work-player.is-vertical .work-player-box{width:min(780px,100%);grid-template-columns:minmax(280px,420px) minmax(250px,360px);
    max-height:calc(100dvh - 28px);overflow:hidden}
  .work-player.is-vertical .work-player-frame{aspect-ratio:9/16;height:min(86dvh,760px);width:auto;justify-self:end;
    border-radius:29px 0 0 29px}
  [dir="rtl"] .work-player.is-vertical .work-player-frame{border-radius:0 29px 29px 0}
  .work-player.is-vertical .work-player-copy{min-width:0;justify-content:center;padding:clamp(30px,3.2vw,46px);overflow:hidden}
  .work-player.is-vertical .work-player-format-mark{display:block;margin-bottom:clamp(28px,5vh,56px);
    font-family:var(--display);font-size:clamp(74px,8vw,118px);font-weight:400;line-height:.72;letter-spacing:-.04em;
    color:rgba(255,255,255,.075);white-space:nowrap;user-select:none}
  .work-player.is-vertical .work-player-details{position:relative;padding-top:22px;border-top:1px solid rgba(255,255,255,.13)}
  .work-player.is-vertical .work-player-details::before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:54px;height:2px;background:var(--hot-fill)}
  .work-player.is-vertical .work-player-copy h2{font-size:clamp(30px,3.5vw,52px);max-width:9ch}
}

.photo-blueprint{max-width:1120px;display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);align-items:center;border-style:solid;padding:clamp(28px,5vw,64px);
  background:linear-gradient(145deg,var(--glass-hi),var(--glass));border-color:var(--glass-edge);
  box-shadow:inset 0 1px 0 var(--glass-sheen),0 28px 70px -46px var(--glass-cast);
  backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.photo-blueprint-graphic{position:relative;display:grid;grid-template-columns:1.3fr .8fr;grid-template-rows:1fr 1fr;
  gap:10px;aspect-ratio:4/3;padding:12px;border-radius:22px;border:1px solid var(--glass-edge);overflow:hidden}
.photo-blueprint-graphic::before{content:'';position:absolute;inset:0;background:
  linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:28px 28px;opacity:.55}
.photo-blueprint-graphic i{position:relative;border:1px solid var(--glass-edge);border-radius:14px;
  background:linear-gradient(155deg,rgba(224,101,47,.16),rgba(255,255,255,.02))}
.photo-blueprint-graphic i:first-child{grid-row:1/-1}
.photo-blueprint h3{font-size:clamp(30px,4.5vw,58px);line-height:.95;margin-top:12px}
.photo-blueprint-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.photo-blueprint-tags span{padding:10px 14px;border-radius:999px;border:1px solid var(--glass-edge);
  font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:var(--dim)}

/* ================= PHOTOGRAPHY — PROJECT STACKS ================= */
.photo-note{max-width:1240px;margin:0 auto 28px}
.photo-shell{max-width:1240px;margin:0 auto;grid-template-columns:190px minmax(0,1fr);gap:clamp(28px,4vw,58px)}
.album-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4vw,58px) clamp(20px,2.5vw,34px)}
.album{isolation:isolate;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--glass-edge);background:#080a0d;
  box-shadow:0 26px 68px -42px rgba(0,0,0,.82);border-radius:24px}
.album-cover{position:absolute;inset:0;overflow:hidden;background:#080a0d}
.album-cover-bg{position:absolute;inset:-8%;background-position:center;background-size:cover;
  filter:blur(28px) saturate(.8) brightness(.52);transform:scale(1.12);opacity:.72}
.album-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.03) saturate(.96);
  transition:transform .75s cubic-bezier(.2,.72,.2,1),filter .4s}
.album:hover .album-cover img{transform:scale(1.045);filter:contrast(1.04) saturate(1.05)}
.album::after{z-index:2;inset:0;border-radius:0;background:linear-gradient(0deg,rgba(7,9,12,.95),rgba(7,9,12,.12) 66%),
  linear-gradient(180deg,rgba(7,9,12,.48),transparent 30%)}
.album .k{top:24px;inset-inline-start:24px;z-index:4;color:#ff8a55}
.album .inner{z-index:4;inset-inline:24px;bottom:50px;align-items:flex-end}
.album h3{font-size:clamp(24px,2.4vw,36px);max-width:11ch;color:#fff;text-transform:uppercase}
.album-state{z-index:4;inset-inline:24px;bottom:26px;color:rgba(255,255,255,.64)}
.album-open{position:absolute;inset:0;z-index:7;width:auto;height:auto;border:0;background:transparent;
  border-radius:24px;cursor:pointer;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.album-open:focus-visible{outline:3px solid var(--hot-fill);outline-offset:4px}
.album .dah{z-index:5;inset:0;border-radius:24px;overflow:hidden}
.photo-templates{display:none!important}

.photo-album-dialog{position:fixed;inset:0;z-index:990;padding:clamp(12px,2vw,28px);opacity:0;visibility:hidden;
  transition:opacity .35s,visibility 0s linear .35s}
.photo-album-dialog.open{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.photo-album-bg{position:absolute;inset:0;border:0;background:rgba(5,7,10,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.photo-album-box{position:relative;z-index:2;width:min(1500px,100%);height:calc(100dvh - clamp(24px,4vw,56px));margin:auto;
  overflow:auto;border-radius:28px;background:linear-gradient(145deg,rgba(30,33,39,.97),rgba(12,14,18,.98));
  border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 120px rgba(0,0,0,.74)}
.photo-album-head{position:sticky;top:0;z-index:4;display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  padding:clamp(22px,3vw,42px);background:linear-gradient(rgba(17,20,25,.98),rgba(17,20,25,.9));
  border-bottom:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.photo-album-head h3{margin-top:9px;color:#fff;font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5vw,76px);line-height:.9}
.photo-album-close{min-width:44px;min-height:44px;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.photo-album-grid{columns:3 300px;column-gap:clamp(12px,1.5vw,22px);padding:clamp(14px,2vw,28px)}
.photo-shot{display:block;width:100%;margin:0 0 clamp(12px,1.5vw,22px);padding:0;border:0;border-radius:18px;overflow:hidden;
  background:#080a0d;break-inside:avoid;cursor:zoom-in}
.photo-shot img{display:block;width:100%;height:auto;transition:transform .55s cubic-bezier(.2,.72,.2,1),filter .35s}
.photo-shot:hover img{transform:scale(1.025);filter:saturate(1.08)}
.photo-shot:focus-visible{outline:3px solid var(--hot-fill);outline-offset:3px}
.photo-viewer{position:absolute;inset:0;z-index:10;display:grid;grid-template-columns:58px minmax(0,1fr) 58px;align-items:center;
  padding:10px;background:rgba(3,4,6,.98);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s linear .25s}
.photo-viewer.open{opacity:1;visibility:visible;transition:opacity .25s,visibility 0s}
.photo-viewer figure{display:grid;grid-template-rows:minmax(0,1fr) auto;height:100%;min-width:0;place-items:center}
.photo-viewer img{display:block;max-width:100%;max-height:calc(100dvh - 34px);width:auto;height:auto;object-fit:contain}
.photo-viewer figcaption{align-self:end;padding-top:12px;color:rgba(255,255,255,.65);font-family:var(--mono);
  font-size:8px;letter-spacing:.12em;text-transform:uppercase;text-align:center}
.photo-viewer-close,.photo-viewer-nav{position:relative;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.07);color:#fff;font-size:22px}
.photo-viewer-close{position:absolute;top:18px;right:18px}
[dir="rtl"] .photo-viewer-close{right:auto;left:18px}
.photo-viewer-nav.next{justify-self:end}
.photo-viewer-close:focus-visible,.photo-viewer-nav:focus-visible{outline:2px solid var(--hot-fill);outline-offset:3px}

@media (max-width:980px){
  .work-featured-layout{grid-template-columns:1fr}
  .work-featured-list{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
  .work-featured-list::-webkit-scrollbar{display:none}
  .work-featured-list li{flex:0 0 min(290px,82vw);scroll-snap-align:start}
  .work-featured-pick{height:100%;min-height:118px;border-bottom:0;border-inline-end:1px solid var(--glass-edge)}
  .work-featured-list li:last-child .work-featured-pick{border-inline-end:0}
  .work-social-rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work-player:not(.is-vertical) .work-player-box{grid-template-columns:1fr}
  .work-player-frame,[dir="rtl"] .work-player-frame{border-radius:29px 29px 0 0}
  .work-player-copy{min-height:210px}
  .album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .work-page .work-page-hero{padding-top:150px;padding-bottom:28px}
  .work-page .work-portfolio{padding-top:8px}
  .work-page .pv-switch{margin-bottom:30px;width:100%;display:grid;grid-template-columns:1fr 1fr}
  .work-page .pv-switch button{padding-inline:12px}
  .work-page .work-page-title{font-size:clamp(48px,17vw,72px);margin-bottom:30px}
  .work-featured-stage{aspect-ratio:4/5;border-radius:24px}
  .work-featured-media .work-card-main{inset:0;width:100%;height:100%;object-fit:cover}
  .work-featured-media .work-silent-preview{inset:0 auto 0 50%;height:100%}
  .work-featured-shot h3{font-size:clamp(34px,11vw,54px)}
  .work-featured-shot .meta-line{display:none}
  .work-play{width:62px;height:62px}
  .work-preview-label{top:14px;inset-inline-end:14px;font-size:7px}
  .work-archive,.work-social{margin-top:88px}
  .work-archive-head{align-items:flex-start}
  .work-archive-head .work-count strong{font-size:50px}
  .work-grid{grid-template-columns:1fr}
  .work-page .reel.work-card--wide,.work-page .reel.work-card--standard,.work-page .reel.work-card--tall{
    grid-column:auto;aspect-ratio:4/5}
  .work-card .meta-line{opacity:1;transform:none;font-size:7.5px}
  .work-social-rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);
    padding-inline:var(--gutter);scrollbar-width:none}
  .work-social-rail::-webkit-scrollbar{display:none}
  .work-page .reel.work-social-card{flex:0 0 min(72vw,280px);scroll-snap-align:center}
  .work-player{padding:10px}
  .work-player-box{max-height:calc(100dvh - 20px);border-radius:22px}
  .work-player-frame,[dir="rtl"] .work-player-frame{border-radius:21px 21px 0 0;aspect-ratio:16/9}
  .work-player.is-vertical .work-player-frame,[dir="rtl"] .work-player.is-vertical .work-player-frame{aspect-ratio:9/16;
    width:min(100%,330px);max-height:63dvh}
  .work-player.is-vertical .work-player-box{grid-template-columns:1fr;width:min(100%,430px);overflow:auto}
  .work-player.is-vertical .work-player-format-mark{display:none}
  .work-player.is-vertical .work-player-details{padding-top:0;border-top:0}
  .work-player.is-vertical .work-player-details::before{display:none}
  .work-player-copy{min-height:180px;padding:24px}
  .photo-blueprint{grid-template-columns:1fr}
  .photo-shell{grid-template-columns:1fr}
  .album-grid{grid-template-columns:1fr;gap:40px}
  .album{max-width:390px;width:100%;margin-inline:auto}
  .photo-album-dialog{padding:6px}
  .photo-album-box{height:calc(100dvh - 12px);border-radius:20px}
  .photo-album-head{padding:20px 16px}
  .photo-album-head h3{font-size:34px}
  .photo-album-close{font-size:0;padding:8px;width:44px}
  .photo-album-close span{font-size:22px}
  .photo-album-grid{columns:2 140px;padding:10px;column-gap:10px}
  .photo-shot{margin-bottom:10px;border-radius:12px}
  .photo-viewer{grid-template-columns:48px minmax(0,1fr) 48px;padding:10px}
  .photo-viewer-close,.photo-viewer-nav{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  .work-card-main,.work-play,.work-card .meta-line,.work-featured-pick::before{transition:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .work-page .pv-switch,.work-featured-list,.photo-blueprint{background:var(--panel)}
  .work-player-bg{background:rgba(6,8,12,.97)}
}
@media (prefers-reduced-transparency:reduce){
  .work-page .pv-switch,.work-featured-list,.photo-blueprint{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}
  .work-player-bg{background:rgba(6,8,12,.98);backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Global film-grain finish: texture, not an effect users have to watch. */
body::after{content:'';position:fixed;inset:-40%;z-index:690;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  background-size:180px 180px;mix-blend-mode:soft-light}
:root[data-theme="light"] body::after{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body::after{display:none}}
:root[data-theme="light"] #hero::before{background:conic-gradient(from 214deg at 88% 13%,transparent 0 9deg,
  rgba(224,101,47,.075) 18deg,rgba(234,186,159,.11) 29deg,transparent 44deg)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) #hero::before{background:conic-gradient(from 214deg at 88% 13%,
  transparent 0 9deg,rgba(224,101,47,.075) 18deg,rgba(234,186,159,.11) 29deg,transparent 44deg)}}
@media (prefers-reduced-transparency:reduce){body::after{display:none}#hero::before{opacity:.45}}
/* Native-format catalogue: the preview never overlaps the caption. */
.work-page .portrait-catalogue{margin:0;padding:0;border:0;max-width:none}
.portrait-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px;align-items:start}
.work-page .reel.portrait-film{position:relative;margin:0;width:100%;height:auto;aspect-ratio:auto;display:block;overflow:visible;background:none;border:0;box-shadow:none;border-radius:0;transform:none}
.work-page .reel.portrait-film[hidden]{display:none}
.portrait-film::after{display:none}
.portrait-film .work-card-media{position:relative;inset:auto;width:100%;aspect-ratio:9/16;border-radius:22px;overflow:hidden;border:1px solid var(--glass-edge)}
.portrait-film[data-ratio="16/9"] .work-card-media{aspect-ratio:16/9}
.portrait-film[data-ratio="4/5"] .work-card-media{aspect-ratio:4/5}
.portrait-film[data-ratio="16/9"]{grid-column:span 2}
.portrait-film.is-actual-landscape{grid-column:span 2}
.portrait-film .work-card-main{object-fit:cover;background:transparent}
.portrait-film:has(.work-open:hover) .work-card-main{transform:none}
.work-page .portrait-film figcaption{position:relative;inset:auto;padding:18px 28px 0 0;min-height:105px;pointer-events:none}
[dir="rtl"] .work-page .portrait-film figcaption{inset:auto;padding:18px 0 0 28px}
.portrait-film figcaption .label{font-size:12px;line-height:1.6;letter-spacing:.08em;color:var(--dim)}
.portrait-film h3{font-size:clamp(24px,2.3vw,36px);line-height:1.08;color:var(--ink);max-width:none;margin-top:8px}
.portrait-link{position:absolute;top:24px;inset-inline-end:0;color:var(--hot);font-size:22px}
.portrait-film .work-open{border-radius:22px 22px 0 0}
.portrait-film .work-play{top:40%;width:52px;height:52px;background:var(--nav-bg);color:var(--ink);border-color:var(--glass-edge);box-shadow:none}
.portrait-film .work-preview-label{font-size:12px;letter-spacing:.03em;top:14px;inset-inline-end:14px}
.portrait-film.is-previewing .work-card-main{filter:none}
.portrait-note{font-size:14px;line-height:1.7;color:var(--dim);margin:0 0 24px}
.portrait-catalogue .work-filterbar{margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px}
.portrait-catalogue .work-filterbar button{min-height:44px;font-size:12px;letter-spacing:.06em;padding:10px 16px}
.work-page .work-page-hero h1.work-hero-title{font-size:clamp(42px,6vw,82px)}
.work-page .work-page-hero{padding-top:150px;padding-bottom:28px}
.work-page .work-portfolio .pv-switch{margin-bottom:28px}
html[lang="ar"] .portrait-film h3{font-family:var(--body);font-weight:800;font-size:clamp(22px,2vw,30px);line-height:1.55;letter-spacing:0}
html[lang="ar"] .portrait-film .label,html[lang="ar"] .portrait-catalogue .work-filterbar button{font-family:var(--body);font-size:14px;letter-spacing:0}
html[lang="ar"] .work-page-hero h1.work-hero-title{font-size:clamp(36px,5vw,64px);line-height:1.5}
@media(min-width:1600px){.portrait-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){.portrait-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portrait-grid{grid-template-columns:1fr;gap:32px}.portrait-film[data-ratio="16/9"]{grid-column:auto}.portrait-film .work-card-media{max-height:70svh;aspect-ratio:9/16;width:auto;margin-inline:auto}.portrait-film[data-ratio="16/9"] .work-card-media{width:100%;max-height:none;aspect-ratio:16/9}.portrait-film figcaption{min-height:0}.portrait-film h3{font-size:28px}.work-page .work-page-hero h1.work-hero-title{font-size:clamp(32px,8.8vw,50px)}}

/* Compact portrait player: metadata below, never an empty side panel. */
.work-player.is-vertical .work-player-box{display:flex;flex-direction:column;width:min(430px,100%);max-height:94dvh;overflow:auto}
.work-player.is-vertical .work-player-frame{flex:none;align-self:center;aspect-ratio:9/16;height:min(68dvh,680px);width:auto;max-width:100%;border-radius:0}
[dir="rtl"] .work-player.is-vertical .work-player-frame{border-radius:0}
.work-player.is-vertical .work-player-copy{padding:18px 22px;overflow:visible}
.work-player.is-vertical .work-player-format-mark{display:none}
.work-player.is-vertical .work-player-details{padding:0;border:0}
.work-player.is-vertical .work-player-details::before{display:none}
.work-player.is-vertical .work-player-copy h2{font-size:26px;line-height:1.12;max-width:none;margin-top:8px}
.work-player.is-vertical .work-player-copy .label{font-size:12px;line-height:1.5;letter-spacing:.06em}
.work-player.is-vertical .work-player-copy p{font-size:12px;line-height:1.7;letter-spacing:.03em;margin-top:10px}
html[lang="ar"] .work-player.is-vertical .work-player-copy h2{font-family:var(--body);font-weight:800;font-size:24px;line-height:1.5}
html[lang="ar"] .page-sec .body,html[lang="ar"] .page-hero .lead{font-size:17px;line-height:1.95}
html[lang="ar"] .page-sec h2{line-height:1.5}
html[lang="ar"] .page-sec h3{line-height:1.55}
html[lang="ar"] .founder-license{font-size:12px;line-height:1.8}
html[lang="ar"] .founder-stat span{font-size:13px;line-height:1.8}
html[lang="ar"] .page-hero .eyebrow,html[lang="ar"] .contact-path span,html[lang="ar"] .direct-contact-label{font-family:var(--body);font-size:14px;line-height:1.7}
html[lang="ar"] .page-hero .form-note,html[lang="ar"] #brief .note,html[lang="ar"] .privacy-note{font-family:var(--body);font-size:13px;line-height:1.9}
html[lang="ar"] #nav .links{font-size:13px}