/* ==========================================================================
   Eyad Al Tanani — portfolio
   Tokens measured from the reference (thestart.com.au), mapped to Eyad's brand
   ========================================================================== */
:root{
  --ground:#f6f6f6;      /* reference bgLight */
  --ink:#111114;         /* reference textDark / dark panels */
  --black:#050505;       /* reference hero */
  --line:#dedede;        /* reference borderLight */
  --line-d:#2a2a30;      /* reference borderDark */
  --subtle:#707075;      /* reference uses #bdbdbd; darkened to pass 4.5:1 */
  --subtle-d:#a3a3ab;    /* subtle text on dark */
  --orange:#ef7230; --red:#e52a1b; --sky:#407fc2; --blue:#2e58a4; --navy:#151a30;

  --ar:"IBM Plex Sans Arabic","Inter Tight",system-ui,sans-serif;
  --mono:"VT323",ui-monospace,monospace;

  --gutter:32px;
  --cell:24px;
  --header:70px;

  /* Emil Kowalski curves */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  /* type scale (reference: 16/26 body, 22–28 headings, all weight 400) */
  --t-body:16px; --t-small:14px;
  --t-h3:clamp(20px,1.55vw,24px);
  --t-h2:clamp(22px,1.75vw,28px);
  --t-lead:clamp(24px,2.15vw,34px);
  --t-hero:clamp(26px,2.5vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:#9a9aa0 transparent}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped,.scroll-locked{overflow:hidden}
main section,footer{scroll-margin-top:var(--header)}
#reel{scroll-margin-top:0}
[hidden]{display:none!important}
body{font-family:var(--ar);font-size:var(--t-body);line-height:26px;font-weight:400;color:var(--ink);background:var(--black);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--orange);color:var(--ink)}
input,textarea{caret-color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#9a9aa0;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.mono{font-family:var(--mono);font-size:18px;line-height:20px;letter-spacing:.02em;text-transform:uppercase}
.mono-s{font-family:var(--mono);font-size:15px;line-height:16px;letter-spacing:.02em;text-transform:uppercase}
.dot::before{content:"";display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:currentColor;margin-inline-end:12px;vertical-align:.18em}
.dot.o::before{background:var(--orange)}
.split-line{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-60px;right:16px;z-index:300;background:#fff;color:var(--ink);padding:10px 16px;border-radius:999px}
.skip:focus{top:12px}

/* pressable feedback (Emil: buttons must feel responsive) */
.press{transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.press:active{transform:scale(.97)}

#intro{position:fixed;inset:0;z-index:100;background:var(--black);color:#fff;display:grid;place-items:center;pointer-events:none;transition:opacity 330ms var(--ease-out)}
#intro.leaving{opacity:0}
#intro span{position:absolute;left:var(--gutter);bottom:var(--gutter);color:var(--subtle-d)}
#intro i{position:absolute;inset:auto 0 0;height:1px;background:var(--orange);transform:scaleX(0);transform-origin:right}

/* ---------- header ---------- */
header.top{position:fixed;inset:0 0 auto;z-index:90;height:var(--header);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);pointer-events:none}
header.top>*{pointer-events:auto}
.brand{justify-self:start;display:flex;align-items:center;gap:12px;height:44px}
.brand img{height:30px;width:auto;transition:filter 300ms ease}
.brand .mono-s{color:#fff;transition:color 300ms ease}
.ask{display:flex;align-items:center;width:min(30vw,420px);height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:rgba(17,17,20,.6);color:#fff;padding-inline:16px 4px;transition:border-color 300ms ease,background-color 300ms ease,color 300ms ease}
.ask input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:14px}
.ask input::placeholder{color:rgba(255,255,255,.62)}
.ask button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}
.ask:focus-within{border-color:var(--orange)}
.menu-btn{justify-self:end;display:flex;align-items:center;gap:10px;min-height:34px;padding:0 16px;border-radius:999px;border:1px solid #313135;background:var(--ink);color:#fff}
.menu-btn .ic{position:relative;width:10px;height:10px}
.menu-btn .ic::before,.menu-btn .ic::after{content:"";position:absolute;top:50%;left:0;width:10px;height:1.5px;background:currentColor;transition:transform 300ms var(--ease-out)}
.menu-btn .ic::after{transform:rotate(90deg)}
body.menu-open .menu-btn .ic::before{transform:rotate(45deg)}
body.menu-open .menu-btn .ic::after{transform:rotate(135deg)}
body.hl .brand img{filter:invert(1)}
body.hl .brand .mono-s{color:var(--ink)}
body.hl .ask{border-color:var(--ink);background:rgba(246,246,246,.6);color:var(--ink)}
body.hl .ask input::placeholder{color:#55555a}
body.hl .menu-btn{background:#fff;border-color:var(--line);color:var(--ink)}
body.menu-open .brand img{filter:none}
body.menu-open .brand .mono-s{color:#fff}
body.menu-open .menu-btn{background:#fff;border-color:#fff;color:var(--ink)}
body.menu-open .ask{border-color:rgba(255,255,255,.45);background:rgba(17,17,20,.6);color:#fff}
@media (hover:hover) and (pointer:fine){
  .menu-btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
  .ask button:hover{background:var(--orange);color:var(--ink)}
}

/* fixed bottom pill (reference "● NEVER STOP STARTING™") */
.tag-pill{position:fixed;left:var(--gutter);bottom:22px;z-index:80;color:#fff;mix-blend-mode:difference;font-family:var(--ar);font-weight:500;font-size:15px;letter-spacing:.01em;display:flex;align-items:center;height:44px}
.tag-pill{transition:opacity 250ms ease}
body.atend .tag-pill,body.pill-obscures-reel .tag-pill{opacity:0;visibility:hidden;pointer-events:none}
.tag-pill span{font-family:"Inter Tight",sans-serif;font-weight:500}

/* ---------- menu (drop panel) ---------- */
.menu-bg{position:fixed;inset:0;z-index:84;pointer-events:none;opacity:0;background:linear-gradient(rgba(5,5,5,.55),rgba(5,5,5,.25));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:opacity 400ms ease}
body.menu-present .menu-bg{pointer-events:auto}
body.menu-open .menu-bg{opacity:1}
#menu{position:fixed;top:0;left:0;right:0;z-index:86;padding-top:var(--header);pointer-events:none;visibility:hidden}
body.menu-present #menu{pointer-events:auto;visibility:visible}
#menu .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-height:calc(100dvh - var(--header));overflow:auto;overscroll-behavior:contain;background:var(--ink);opacity:0;transform:translateY(-16px);transition:opacity 180ms ease,transform 180ms var(--ease-out)}
body.menu-open #menu .cols{opacity:1;transform:none;transition-duration:240ms}
#menu :is(.col,.socials,.filler){transform:translateY(-101%);transition:transform 350ms cubic-bezier(.65,0,.35,1)}
body.menu-open #menu :is(.col,.socials,.filler){transform:none;transition-duration:600ms;transition-delay:var(--menu-delay,0ms)}
#menu .col:nth-child(2){--menu-delay:70ms}
#menu .col:nth-child(3){--menu-delay:140ms}
#menu .col:nth-child(4){--menu-delay:210ms}
#menu .socials{--menu-delay:280ms}
#menu .filler{--menu-delay:350ms}
#menu :is(h3,li,.pages a,.socials a){opacity:0;transform:translateY(-10px);transition:opacity 180ms ease,transform 180ms var(--ease-out)}
body.menu-open #menu :is(h3,li,.pages a,.socials a){opacity:1;transform:none;transition-duration:350ms;transition-delay:calc(var(--menu-delay,0ms) + 220ms + var(--item-delay,0ms))}
#menu li:nth-child(2),#menu .pages a:nth-child(2),#menu .socials a:nth-child(2){--item-delay:18ms}
#menu li:nth-child(3),#menu .pages a:nth-child(3){--item-delay:36ms}
#menu li:nth-child(4),#menu .pages a:nth-child(4){--item-delay:54ms}
#menu .pages a:nth-child(5){--item-delay:72ms}
#menu .col{background:var(--ink);border-inline-start:1px solid #252525;border-bottom:1px solid #252525;padding:var(--cell) var(--cell) 40px;display:flex;flex-direction:column;gap:22px;color:#fff}
#menu .col:first-child{border-inline-start:0}
#menu h3{font-weight:400;font-size:20px;line-height:22px}
#menu ul{list-style:none}
#menu li a{display:flex;align-items:center;justify-content:flex-end;color:#bdbdbd;padding:9px 0;transition:color 200ms ease}
#menu li a::before{content:"";width:5px;height:5px;border-radius:50%;background:#55555a;margin-inline-end:14px;transition:background-color 200ms ease}
#menu .pages{gap:14px}
#menu .pages a{font-size:20px;line-height:30px;transition:opacity 200ms ease}
#menu .start{display:inline-flex;align-items:center;align-self:flex-start;height:44px;padding:0 20px;border:1px solid #313135;border-radius:999px;font-size:17px;margin-top:6px}
#menu .start::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;margin-inline-end:12px}
#menu .socials{grid-column:span 2;display:flex;gap:8px;padding:16px var(--cell);background:var(--ink);border-bottom:1px solid #252525}
#menu .socials a{height:36px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid #313135;border-radius:999px;color:#fff}
#menu .filler{grid-column:span 2;background:var(--ink);border-inline-start:1px solid #252525;border-bottom:1px solid #252525}
@media (hover:hover) and (pointer:fine){
  #menu li a:hover{color:#fff}
  #menu li a:hover::before{background:var(--orange)}
  #menu .pages a:hover{opacity:.7}
  #menu .start:hover,#menu .socials a:hover{background:#fff;color:var(--ink)}
  #menu .start:hover::before{background:var(--orange)}
}

/* ---------- hero ---------- */
#hero{position:relative;background:var(--black)}
#hero.immersive{height:420svh;overflow-anchor:none}
#hero .stick{position:relative;min-height:100svh;overflow:hidden}
#hero.immersive .stick{position:sticky;top:0;height:100svh}
#gl,.hero-still{position:absolute;inset:0;width:100%;height:100%}
#gl{opacity:0;transition:opacity 250ms ease}
#hero.rendering #gl{opacity:1}
.hero-still{display:grid;place-items:center;background:radial-gradient(circle at center,var(--navy),var(--black) 50%)}
.hero-still img{width:clamp(64px,10vw,128px);height:auto}
#hero.rendering .hero-still img{visibility:hidden}
.hero-copy{position:absolute;right:var(--gutter);bottom:clamp(30px,6vh,64px);z-index:3;color:#fff;max-width:min(560px,46vw)}
.hero-copy h1{text-shadow:0 2px 18px rgba(5,5,5,.75);font-weight:400;font-size:var(--t-hero);line-height:1.25;letter-spacing:-.005em;text-wrap:balance}
.hero-copy .hero-name{margin-bottom:12px;font-size:var(--t-h3);font-weight:500;text-shadow:0 2px 12px var(--black)}
.hero-copy .mono{display:block;margin-top:22px;color:#fff}
.hero-copy2{position:absolute;inset:auto 0 clamp(70px,10vh,110px);z-index:3;text-align:center;color:#fff;opacity:0;pointer-events:none}
.hero-copy2 .mono{color:var(--subtle-d)}
.hero-copy2 p{font-size:var(--t-h2);line-height:1.4;margin-top:12px}
.tiles{position:absolute;inset:0;z-index:5;display:grid;pointer-events:none}
.tiles b{background:var(--ground);opacity:0}
.tiles b.on{opacity:1}
.tiles b.edge{box-shadow:inset 0 0 0 1px var(--line)}

.reel-entry{position:fixed;z-index:70}
.reel-entry b{background:var(--black)}
.tiles.tl-light b{background:var(--ground)}

/* ---------- light frame ---------- */
.light{background:var(--ground);position:relative;z-index:2}
.wrap{max-width:1680px;margin:0 auto;padding:0 var(--gutter)}
.frame{border-inline:1px solid var(--line)}
.shead{display:flex;align-items:flex-end;gap:16px;padding:var(--cell);border-top:1px solid var(--line)}
.shead h2{font-weight:400;font-size:var(--t-h2);line-height:1.15;display:flex;align-items:baseline}
.shead h2 .dot::before{background:var(--orange)}
.shead sup{font-family:var(--mono);font-size:17px;color:var(--subtle);margin-inline-start:10px;vertical-align:super;line-height:0}
.shead .ctl{margin-inline-start:auto;display:flex;gap:8px}
.space{height:96px;border-top:1px solid var(--line)}
.row-link{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding:28px var(--cell)}
.lnk{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:18px;letter-spacing:.02em;text-transform:uppercase;direction:ltr}
.lnk::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:12px;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .lnk:hover::before{transform:scale(1.5)} }

/* works */
.works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);container-type:inline-size}
.work{grid-column:span 1;align-items:stretch;padding:16px;border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:14px;cursor:pointer;color:inherit;text-align:start}
.work.wide{grid-column:span 2}
.work.first{border-inline-start:0}
.work .media{position:relative;display:grid;gap:6px;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:#e7e7e9}
.work.wide .media{height:calc(25cqw - 32px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:transparent}
.work .media>span{overflow:hidden;border-radius:4px;background:#e7e7e9}
.work .media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.work .ttl{font-size:16px;line-height:22px}
@media (hover:hover) and (pointer:fine){ .work:hover .media img{transform:scale(1.03)} }

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line)}
.about .l{padding:var(--cell) var(--cell) 120px;border-inline-end:1px solid var(--line)}
.about .l h2{font-weight:400;font-size:var(--t-lead);line-height:1.35;max-width:22ch;text-wrap:balance}
.about .l h2 .dot::before{background:var(--orange)}
.about .r{display:flex;flex-direction:column;justify-content:flex-end}
.about .r p{padding:var(--cell);max-width:62ch;color:#2b2b31}
.about .r p+p{padding-top:0}
.about .r .row-link{justify-content:flex-start;margin-top:var(--cell)}
.portrait{border-top:1px solid var(--line);padding:16px}
.portrait .ph{position:relative;aspect-ratio:21/9;border-radius:4px;overflow:hidden;background:#111}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:opacity 700ms ease}
.portrait img+img{opacity:0}
@media (hover:hover) and (pointer:fine){ .portrait .ph:hover img+img{opacity:1} }

/* services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.svc{display:flex;flex-direction:column;border-inline-start:1px solid var(--line)}
.svc:first-child{border-inline-start:0}
.svc .n{padding:var(--cell) var(--cell) 0;color:var(--subtle);font-size:16px}
.svc .bd{padding:72px var(--cell) 40px;display:flex;flex-direction:column;gap:20px;flex:1}
.svc h3{font-weight:400;font-size:var(--t-h3);line-height:1.2}
.svc p{max-width:42ch;color:#2b2b31}
.svc ul{list-style:none;border-top:1px solid var(--line)}
.svc li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--cell);border-bottom:1px solid var(--line)}
.svc li:last-child{border-bottom:0}
.svc li span{color:var(--subtle);font-family:"Inter Tight",sans-serif;font-size:13px;direction:ltr}

/* ---------- reel (dark, pinned) ---------- */
#reel{position:relative;background:var(--black);color:#fff;z-index:2}
#reel.immersive{height:360svh;overflow-anchor:none}
#reel .stick{display:grid;gap:var(--cell);padding:calc(var(--header) + var(--cell)) var(--gutter) calc(var(--cell) * 2)}
#reel.immersive .stick{display:block;padding:0;position:sticky;top:0;height:100svh;overflow:hidden}
#reel.immersive .reel-art{position:absolute;inset:0}
#reel:not(.immersive) :is(#blob,.halo,#tilesOut){display:none}
#reel:not(.immersive) :is(.reel-copy,.stage,.ring,.panel,.stats){position:relative;inset:auto;width:auto;height:auto;margin:0}
#reel:not(.immersive) .ring{display:flex;gap:12px;overflow:auto;padding:4px 4px 12px;scroll-snap-type:x proximity;scrollbar-color:var(--subtle) transparent}
#reel:not(.immersive) .stage{min-width:0}
#reel:not(.immersive) .panel{flex:0 0 min(75%,420px);aspect-ratio:16/9;filter:none;scroll-snap-align:start}
#reel:not(.immersive) .stats{padding:0;background:none;max-width:560px}
#tilesOut{z-index:8}
#blob{position:absolute;inset:0;width:100%;height:100%}
.reel-copy{position:absolute;right:var(--gutter);top:calc(var(--header) + 40px);z-index:4;max-width:400px}
.reel-copy .mono{color:var(--subtle-d)}
.reel-copy h2{font-weight:400;font-size:var(--t-h2);line-height:1.25;margin:16px 0 14px;color:#ededed}
.reel-copy p{color:#c9c9cf;max-width:40ch}
.reel-copy .lnk{margin-top:18px;color:#fff}
.stage{position:absolute;left:54%;top:60%;width:0;height:0;perspective:1500px;z-index:3}
.ring{position:absolute;inset:0;transform-style:preserve-3d}
.panel{position:absolute;width:280px;height:158px;margin:-79px 0 0 -140px;border-radius:3px;overflow:hidden;backface-visibility:hidden;cursor:pointer;background:#111;filter:grayscale(1);transition:filter 500ms ease}
.panel.front{filter:none}
.panel video,.panel img{width:100%;height:100%;object-fit:cover}
.panel video{position:absolute;inset:0;opacity:0;pointer-events:none}
.panel video.playing{opacity:1}
.panel:focus-visible{outline-offset:-3px}
.halo{position:absolute;left:54%;top:62%;width:min(980px,96vw);aspect-ratio:1;transform:translate(-50%,-50%) rotateX(76deg);z-index:2;pointer-events:none}
.halo svg{width:100%;height:100%}
.halo text{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:26px;letter-spacing:.32em;fill:#d4d4da}
.stats{position:absolute;left:var(--gutter);bottom:clamp(40px,8vh,88px);z-index:6;width:min(340px,26vw);transform:translateZ(0);padding:18px 18px 12px;margin-inline-end:-18px;background:rgba(5,5,5,.84);border-radius:4px}
.stats h3{font-weight:400;font-size:22px;line-height:24px;padding-bottom:16px;color:var(--ground)}
.stats li{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid #98989a}
.stats li span{font-family:"Inter Tight",sans-serif;direction:ltr}
.stats .lnk{margin-top:18px;color:#fff}

/* clients */
.clients{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line)}
.client{aspect-ratio:3/2;display:grid;place-items:center;padding:18px;border-bottom:1px solid var(--line);border-inline-start:1px solid var(--line)}
.client:nth-child(6n+1){border-inline-start:0}
.client img{width:auto;height:auto;max-width:74%;max-height:74%;min-width:0;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.1);opacity:.82;transition:filter 300ms ease,opacity 300ms ease}
@media (hover:hover) and (pointer:fine){ .client:hover img{filter:none;opacity:1} }

/* tools (reference testimonial cards) */
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.tool{display:flex;flex-direction:column;gap:28px;padding:var(--cell) var(--cell) 32px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);min-height:420px}
.tool:first-child{border-inline-start:0}
.tool .hd{display:flex;justify-content:space-between;color:var(--subtle)}
.tool .badge{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;font-family:"Inter Tight",sans-serif;font-weight:600;font-size:26px;direction:ltr}
.tool blockquote{font-size:22px;line-height:30px;letter-spacing:-.01em;color:var(--ink);max-width:16ch}
.tool .who{margin-top:auto;display:flex;flex-direction:column;gap:2px}
.tool .who b{font-weight:400;font-family:"Inter Tight",sans-serif;direction:ltr;text-align:right}
.tool .who .mono-s{color:var(--subtle)}

/* identities */
.ids-wrap{border-top:1px solid var(--line);overflow:auto hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}
.ids{display:flex}
@media (hover:hover) and (pointer:fine){.ids .idc{cursor:grab}}
.ids-wrap.drag{scroll-snap-type:none}
.ids-wrap.drag .idc{cursor:grabbing}
.idc:focus-visible{outline-offset:-4px}
.idc{flex:0 0 calc(100%/3.25);scroll-snap-align:start;padding:16px;display:flex;flex-direction:column;gap:18px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);user-select:none;-webkit-user-select:none;color:inherit;text-align:start}
.idc:first-child{border-inline-start:0}
.idc .img{position:relative;aspect-ratio:3/2;border-radius:4px;overflow:hidden;background:#e7e7e9}
.idc .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity 500ms ease}
.idc .img img.logo{opacity:0}
@media (hover:hover) and (pointer:fine){ .idc:hover .img img.logo{opacity:1} }
.tags{display:flex;gap:6px;flex-wrap:wrap;padding:0 8px}
.tags span{font-size:13px;line-height:1;border:1px solid var(--ink);border-radius:999px;padding:7px 12px}
.idc h3{font-weight:400;font-size:var(--t-h3);line-height:1.2;padding:0 8px}
.idc p{color:var(--subtle);padding:0 8px 8px}
.circ{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center}
.circ[aria-disabled="true"]{opacity:.42;cursor:default}
@media (hover:hover) and (pointer:fine){ .circ:not([aria-disabled="true"]):hover{background:var(--ink);color:#fff} }

/* reels */
.reels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line)}
.rl{display:flex;flex-direction:column;padding:12px;border-inline-start:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;color:inherit;text-align:start}
.rl:first-child{border-inline-start:0}
.rl .v{display:block;width:100%;position:relative;aspect-ratio:9/16;border-radius:4px;overflow:hidden;background:#111}
.rl img,.rl video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rl .play{position:absolute;bottom:10px;left:10px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink)}
.rl .ttl{display:block;margin-top:12px;font-size:15px;line-height:20px}

/* faq */
.faq{border-top:1px solid var(--line)}
.q{border-bottom:1px solid var(--line)}
.q button{width:100%;display:grid;grid-template-columns:56px 1fr 44px;align-items:center;gap:8px;min-height:72px;padding:12px var(--cell);text-align:start;font-weight:500;font-size:20px;line-height:28px;color:var(--ink)}
.q .n{font-family:"Inter Tight",sans-serif;font-weight:400;font-size:13px;letter-spacing:.3em;color:var(--subtle);direction:ltr;text-align:right}
.q .pl{justify-self:end;position:relative;width:14px;height:14px}
.q .pl::before,.q .pl::after{content:"";position:absolute;top:50%;left:0;width:14px;height:1.5px;background:currentColor;transition:transform 300ms var(--ease-out)}
.q .pl::after{transform:rotate(90deg)}
.q.open .pl::before{transform:rotate(45deg)}
.q.open .pl::after{transform:rotate(135deg)}
.q .a{overflow:hidden}
.q .a p{padding:0 calc(var(--cell) + 64px) 28px var(--cell);max-width:calc(70ch + 120px);color:#2b2b31}

/* ---------- footer ---------- */
footer{background:var(--black);color:#fff;position:relative;z-index:2}
footer .frame{border-color:var(--line-d)}
.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cta .l{padding:clamp(48px,7vw,128px) var(--cell);border-inline-end:1px solid var(--line-d);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.cta h2{font-weight:400;font-size:var(--t-lead);line-height:1.2;display:flex;align-items:center;gap:16px}
.cta h2 a{display:inline-flex;align-items:center;gap:16px}
.cta h2 svg{transition:transform 300ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .cta h2 a:hover svg{transform:translateX(-8px)} }
.direct{display:flex;flex-direction:column;gap:6px}
.direct a{font-family:"Inter Tight",sans-serif;font-size:20px;line-height:30px;direction:ltr;text-align:right;width:fit-content;transition:opacity 200ms ease}
@media (hover:hover) and (pointer:fine){ .direct a:hover{opacity:.7} }
.cta .r{padding:clamp(48px,7vw,128px) var(--cell)}
form h3{font-weight:400;font-size:22px;line-height:24px}
form .sub{color:var(--subtle-d);margin:12px 0 28px}
.fld{margin-bottom:18px}
.fld label{display:block;font-family:var(--mono);font-size:17px;text-transform:uppercase;color:#d6d6dc;margin-bottom:10px;direction:ltr;text-align:right}
.fld label b{color:var(--orange);font-weight:400}
.fld input,.fld select,.fld textarea{width:100%;height:46px;padding:0 20px;background:#1a1a1f;border:1px solid #2c2c33;border-radius:999px;color:#fff;font-size:15px;outline:0;transition:border-color 200ms ease}
.fld textarea{height:auto;min-height:120px;padding:14px 20px;border-radius:22px;resize:vertical;line-height:24px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#bdbdbd 50%),linear-gradient(135deg,#bdbdbd 50%,transparent 50%);background-position:22px 20px,17px 20px;background-size:5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--orange)}
.fld .err{display:none;color:#ff9b6b;font-size:13px;margin-top:6px}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad textarea{border-color:#ff9b6b}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.btn-w{height:44px;padding:0 24px;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--mono);font-size:18px;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){ .btn-w:hover{background:var(--orange);color:var(--ink)} }
.out{display:none;margin-top:18px;color:#d6d6dc;font-size:15px}
.out.show{display:block}
.out a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-d)}
.fcols>div{padding:var(--cell) var(--cell) 96px;border-inline-start:1px solid var(--line-d);display:flex;flex-direction:column;gap:24px}
.fcols>div:first-child{border-inline-start:0}
.fcols h4{font-weight:400;font-size:20px;line-height:22px}
.fcols ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.fcols li{color:#bdbdbd;padding:6px 0}
.fcols .pages a{font-size:20px;line-height:22px;display:inline-block;padding:6px 0;transition:opacity 200ms ease}
@media (hover:hover) and (pointer:fine){ .fcols .pages a:hover{opacity:.7} }
.pills{display:flex;gap:8px;flex-wrap:wrap;padding:18px var(--cell);border-top:1px solid var(--line-d)}
.pills a{height:40px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid #313135;border-radius:999px}
@media (hover:hover) and (pointer:fine){ .pills a:hover{background:#fff;color:var(--ink)} }
.legal{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px var(--cell) 30px;border-top:1px solid var(--line-d);color:#8a8a92;font-size:13px}
.legal .tm{color:#fff;font-family:"Inter Tight",sans-serif;font-weight:500;font-size:15px;direction:ltr;display:flex;align-items:center}
.legal .tm::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;margin-right:10px}

/* ---------- modals ---------- */
.modal{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;color:inherit;background:transparent;overflow:hidden}
.modal::backdrop{background:transparent}
.modal .bg{position:absolute;inset:0;background:rgba(5,5,5,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity 300ms ease}
.modal.vis .bg{opacity:1}
.x{position:absolute;top:18px;left:var(--gutter);z-index:5;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:18px}
@media (hover:hover) and (pointer:fine){ .x:hover{background:var(--orange);color:var(--ink)} }
#vmodal .box,#idmodal .box{position:absolute;inset:76px var(--gutter) var(--gutter);display:grid;place-items:center;opacity:0;transform:scale(.97);transition:opacity 250ms var(--ease-out),transform 250ms var(--ease-out)}
#vmodal.vis .box,#idmodal.vis .box{opacity:1;transform:none}
#vmodal video{max-width:100%;max-height:100%;border-radius:4px;background:#000}
#vmodal .t{position:absolute;top:26px;right:var(--gutter);z-index:5;color:#fff}
#idmodal .box{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:stretch}
#idmodal .box>img{width:100%;height:100%;object-fit:contain}
#idmodal .r{display:flex;flex-direction:column;gap:16px;min-height:0;color:#fff}
#idmodal .r img{flex:1;min-height:0;width:100%;object-fit:contain;background:#fff;border-radius:4px}
#idmodal h3{font-weight:400;font-size:24px}
#idmodal p{color:var(--subtle-d)}
.video-status{grid-area:1/1;z-index:1;background:var(--ink);color:#fff;padding:var(--cell);border-radius:4px}
.video-status a{text-decoration:underline}
#vmodal video{grid-area:1/1}
#case .sheet{position:absolute;inset:0;background:var(--ground);overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform 360ms var(--ease-drawer)}
#case.vis .sheet{transform:none;transition-duration:500ms}
#case .x{position:fixed}
.case-hd{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.case-hd>div{padding:96px var(--cell) 40px}
.case-hd>div+div{border-inline-start:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;gap:24px}
.case-hd .k{color:var(--subtle)}
.case-hd h2{font-weight:400;font-size:clamp(34px,4vw,64px);line-height:1.1;margin:16px 0 18px;letter-spacing:-.01em}
.case-hd .lead{font-size:18px;line-height:30px;max-width:56ch;color:#2b2b31}
.case-hd .tags{padding:0}
.pal{display:flex;height:76px;border-radius:4px;overflow:hidden;margin-top:12px}
.pal i{flex:1;position:relative}
.pal i span{position:absolute;bottom:6px;right:8px;font-family:var(--mono);font-size:15px;direction:ltr;color:#fff;mix-blend-mode:difference}
.study{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.study>div{padding:var(--cell) var(--cell) 40px;border-inline-start:1px solid var(--line)}
.study>div:first-child{border-inline-start:0}
.study .n{color:var(--subtle);display:block;margin-bottom:48px}
.study h4{font-weight:400;font-size:var(--t-h3);margin-bottom:12px}
.study p{color:#2b2b31;max-width:46ch}
.gal{columns:3;column-gap:16px;padding:16px}
.gal img{width:100%;margin-bottom:16px;border-radius:4px;break-inside:avoid;background:#e7e7e9}
.next{display:flex;justify-content:space-between;align-items:center;width:100%;padding:40px var(--cell) 56px;border-top:1px solid var(--line);text-align:start;color:var(--ink)}
.next h3{font-weight:400;font-size:clamp(26px,3vw,44px);transition:color 200ms ease}
@media (hover:hover) and (pointer:fine){ .next:hover h3{color:var(--orange)} }

/* cursor dot (reference) */
#cur{position:fixed;top:0;left:0;z-index:200;pointer-events:none;will-change:transform}
#cur i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;transition:transform 200ms var(--ease-out),opacity 150ms ease}
#cur.on i{transform:scale(2.6)}
#cur b{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;height:30px;padding:0 13px 0 11px;border-radius:999px;background:var(--ink);color:#fff;font:400 16px/1 var(--mono);letter-spacing:.02em;white-space:nowrap;direction:ltr;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:transform 200ms var(--ease-out),opacity 150ms ease}
#cur b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
#cur.lab b{transform:translate(-50%,-50%) scale(1);opacity:1}
#cur.lab i{opacity:0}
@media (hover:none),(pointer:coarse){#cur{display:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--gutter:20px;--cell:20px}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool:nth-child(3){border-inline-start:0}
  .reels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rl:nth-child(4){border-inline-start:0}
  .clients{grid-template-columns:repeat(4,minmax(0,1fr))}
  .client:nth-child(6n+1){border-inline-start:1px solid var(--line)}
  .client:nth-child(4n+1){border-inline-start:0}
  .idc{flex-basis:calc(100%/2.2)}
  #menu .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  #menu .col:nth-child(3){border-inline-start:0}
}
@media (max-width:800px){
  :root{--gutter:14px;--cell:18px;--header:62px}
  .ask{display:none}
  header.top{grid-template-columns:1fr auto}
  .hero-copy{left:var(--gutter);max-width:none;bottom:96px}
  .tag-pill{left:auto;right:var(--gutter);bottom:16px}
  .works{grid-template-columns:1fr}
  .work,.work.wide{grid-column:auto;border-inline-start:0}
  .work.wide .media{height:auto;aspect-ratio:2/1}
  .about,.services,.cta,.case-hd,.study,.fcols{grid-template-columns:1fr}
  .about .l,.cta .l{border-inline-end:0;padding-bottom:48px}
  .about .r,.cta .r,.svc,.study>div,.case-hd>div+div{border-inline-start:0;border-top:1px solid var(--line)}
  .cta .r{border-color:var(--line-d)}
  .fcols>div{border-inline-start:0;border-top:1px solid var(--line-d);padding-bottom:32px}
  .fcols>div:first-child{border-top:0}
  .svc .bd{padding-top:40px}
  .portrait .ph{aspect-ratio:4/3}
  .tools{grid-template-columns:1fr}
  .tool{border-inline-start:0;min-height:0}
  .reels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rl:nth-child(odd){border-inline-start:0}
  .rl:nth-child(4){border-inline-start:1px solid var(--line)}
  .clients{grid-template-columns:repeat(3,minmax(0,1fr))}
  .client:nth-child(4n+1){border-inline-start:1px solid var(--line)}
  .client:nth-child(3n+1){border-inline-start:0}
  .idc{flex-basis:84%}
  .stats li{padding:6px 0}
  header.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--black);opacity:.0;transition:opacity 300ms ease,background-color 300ms ease}
  body.hl header.top::before{background:var(--ground);opacity:.94}
  body.scrolled:not(.hl) header.top::before{opacity:.9}
  .gal{columns:2;column-gap:10px;padding:10px}
  #idmodal .box{grid-template-columns:1fr;overflow:auto;overscroll-behavior:contain}
  #idmodal .box>img{height:auto}
  #vmodal .t{max-width:calc(100% - 130px);line-height:1.1}
  .q button{grid-template-columns:40px 1fr 32px;font-size:17px;line-height:26px}
  .q .a p{padding:0 var(--cell) 24px}
  #menu .cols{grid-template-columns:1fr}
  .menu-btn{min-height:44px}
  #menu .col{border-inline-start:0;padding-bottom:24px}
  #menu .socials,#menu .filler{grid-column:auto}
  #menu .filler{display:none}
  #menu li a{min-height:44px}
  .two{grid-template-columns:1fr}
  .legal{padding-bottom:76px}
}

@media (max-width:800px),(max-height:680px){
  #reel.immersive{height:auto}
  #reel.immersive .stick{display:grid;position:relative;top:auto;height:auto;padding:calc(var(--header) + var(--cell)) var(--gutter) calc(var(--cell) * 2);overflow:visible}
  #reel.immersive :is(.reel-copy,.stats){position:relative;inset:auto;width:auto;margin:0}
  #reel.immersive .reel-track{height:calc(clamp(170px,52svh,390px) + 105svh);min-width:0}
  #reel.immersive .reel-art{position:sticky;inset:auto;top:calc(var(--header) + 8px);height:clamp(170px,52svh,390px);overflow:hidden}
  #reel.immersive .stage{left:50%;top:66%;perspective:760px}
  #reel.immersive .halo{left:50%;top:66%;width:min(620px,130%);opacity:.7}
  #reel.immersive .panel{width:150px;height:85px;margin:-42px 0 0 -75px}
  #reel.immersive .stats{padding:0;background:none;max-width:560px}
  #reel.immersive #tilesOut b{background:var(--black)}
  #reel.immersive #tilesOut b.edge{box-shadow:inset 0 0 0 1px var(--line-d)}
}
@media (max-width:800px){
  #reel.immersive :is(.halo,.stats h3){display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  #cur{display:none}
  #menu .cols,#menu :is(.col,.socials,.filler,h3,li,.pages a,.socials a){transform:none;transition:none}
  #case .sheet,#vmodal .box,#idmodal .box{transform:none;transition:none}
  .press:active{transform:none}
}

.work-status{padding:var(--cell)}