/* ==========================================================================
   INNOVATIVE IDEA — art-directed agency site
   Tokens: Night ink base, peacock-eye accents (quill cyan, eye magenta,
   spark gold) taken from the logo. English: Myriad Pro (Bold Condensed for the
   display voice, Light for the written voice). Arabic: Cairo.
   ========================================================================== */
/* fonts: self-hosted (assets/fonts). Cairo only loads where Arabic text appears. */
@font-face{font-family:"Myriad Pro";src:url("../fonts/myriad-pro-light.woff2") format("woff2");font-weight:100 349;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/myriad-pro-regular.woff2") format("woff2");font-weight:350 549;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/myriad-pro-semibold.woff2") format("woff2");font-weight:550 649;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/myriad-pro-bold.woff2") format("woff2");font-weight:650 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro Condensed";src:url("../fonts/myriad-pro-cond.woff2") format("woff2");font-weight:100 549;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro Condensed";src:url("../fonts/myriad-pro-boldcond.woff2") format("woff2");font-weight:550 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-light.woff2") format("woff2");font-weight:100 349;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-regular.woff2") format("woff2");font-weight:350 449;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-medium.woff2") format("woff2");font-weight:450 549;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-semibold.woff2") format("woff2");font-weight:550 649;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-bold.woff2") format("woff2");font-weight:650 749;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Cairo";src:url("../fonts/cairo-extrabold.woff2") format("woff2");font-weight:750 1000;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+25CC,U+FB50-FDFF,U+FE70-FEFF}
:root{
  --night:#080616; --dusk:#140E2E; --deep:#0D0A22;
  --text:#F2F0F7; --muted:#A8A2C2; --faint:rgba(242,240,247,.14);
  --stock:#E5E4E9; --ink:#1E2731; --ink-muted:#555D69;
  --cyan:#35BEEC; --blue:#1E96CC; --violet:#6F4FD6; --magenta:#E5258D; --gold:#F5C552; --ember:#F29A38;
  --quill:linear-gradient(95deg,#35BEEC 0%,#1E96CC 28%,#6F4FD6 62%,#E5258D 100%);
  --f-sans:"Myriad Pro","Helvetica Neue",Arial,sans-serif;
  --f-cond:"Myriad Pro Condensed","Myriad Pro","Arial Narrow",Arial,sans-serif;
  --f-serif:var(--f-sans);
  --dirx:1;
  --gutter:clamp(20px,4vw,64px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --night:#080616; --text:#F2F0F7; } }
:root[data-theme="dark"]{ --night:#080616; --text:#F2F0F7; }
*,*::before,*::after{box-sizing:border-box}
html{scrollbar-gutter:stable;-webkit-text-size-adjust:100%;scroll-padding-top:env(safe-area-inset-top,0px);background:var(--night)}
body{margin:0;background:var(--night);color:var(--text);font-family:var(--f-sans);font-size:clamp(16px,1.05vw,18px);line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,canvas,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px}
::selection{background:var(--gold);color:var(--ink)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
main{position:relative;z-index:1;overflow-x:clip}
.is-intro body{overflow:hidden}
.is-locked body{overflow:hidden}

/* brand art (data URIs live once, in these variables) */
.fx{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain}
.fx--feather{background-image:url("../images/logo-feather.webp");aspect-ratio:195/360}
.fx--feather-ink{background-image:url("../images/logo-feather-ink.webp");aspect-ratio:195/360}
.fx--word{background-image:url("../images/logo-wordmark.webp");aspect-ratio:640/185}
.fx--word-ink{background-image:url("../images/logo-wordmark-ink.webp");aspect-ratio:640/185}

/* ---------- atmosphere ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env canvas{position:absolute;inset:0;width:100%;height:100%}
.env__haze{position:absolute;inset:-25%;background:
  radial-gradient(34% 38% at 72% 30%,rgba(111,79,214,.20),transparent 70%),
  radial-gradient(38% 44% at 18% 78%,rgba(30,150,204,.10),transparent 70%),
  radial-gradient(26% 30% at 46% 52%,rgba(229,37,141,.05),transparent 70%);will-change:transform}
.grain{position:fixed;inset:0;z-index:65;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:300;pointer-events:none;display:none}
.has-cursor .cursor{display:block}
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input,.has-cursor textarea{cursor:text!important}
.cursor__dot,.cursor__ring{position:absolute;left:0;top:0;will-change:transform}
.cursor__dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--gold);transition:opacity .25s}
.cursor__ring{width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:1px solid rgba(242,240,247,.42);display:grid;place-items:center;transition:width .5s var(--ease-out),height .5s var(--ease-out),margin .5s var(--ease-out),background-color .35s,border-color .35s,opacity .3s}
.cursor__label{font-size:12px;font-weight:650;letter-spacing:.01em;color:var(--ink);opacity:0;transform:scale(.5);transition:opacity .25s,transform .45s var(--ease-out);white-space:nowrap}
.cursor.is-hover .cursor__ring{width:58px;height:58px;margin:-29px 0 0 -29px;border-color:var(--gold)}
.cursor.is-label .cursor__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--gold);border-color:var(--gold)}
.cursor.is-label .cursor__label{opacity:1;transform:none}
.cursor.is-label .cursor__dot{opacity:0}
.cursor.is-down .cursor__ring{width:30px;height:30px;margin:-15px 0 0 -15px}
.cursor.is-off{opacity:0}
.cursor.on-light .cursor__ring{border-color:rgba(30,39,49,.45)}
.cursor.on-light .cursor__dot{background:var(--ink)}
.cursor.on-light.is-label .cursor__ring{background:var(--ink);border-color:var(--ink)}
.cursor.on-light.is-label .cursor__label{color:var(--text)}

/* ---------- lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:.34em;font-size:19px;line-height:0;direction:ltr}
.lockup .fx--feather,.lockup .fx--feather-ink{height:2.1em}
.lockup .fx--word,.lockup .fx--word-ink{height:.95em}
.lockup__pair{position:relative;display:inline-flex;align-items:center;gap:.34em}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:70;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gutter) 18px;pointer-events:none;transition:opacity .8s var(--ease-out),color .4s,transform .7s var(--ease-out)}
.nav::before{content:"";position:absolute;left:0;right:0;top:0;height:150%;z-index:-1;pointer-events:none;background:linear-gradient(rgba(8,6,22,.72),rgba(8,6,22,0));opacity:0;transition:opacity .5s}
.nav.is-scrolled::before{opacity:1}
.nav.is-light::before{background:linear-gradient(rgba(229,228,233,.85),rgba(229,228,233,0))}
.nav.is-hidden{transform:translate3d(0,-110%,0)}
.menu-open.nav::before{opacity:0}
.nav > *{pointer-events:auto}
.is-intro .nav{opacity:0}
.nav__brand{justify-self:start;position:relative}
.nav .nav__brand.lockup{font-size:31px}
.nav__brand .ink{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s}
.nav__brand .lt{transition:opacity .4s}
.nav.is-light .nav__brand .ink{opacity:1}
.nav.is-light .nav__brand .lt{opacity:0}
.chap{display:none!important;align-items:baseline;gap:.9em;font-size:13px;color:var(--muted);height:1.5em;overflow:hidden;transition:color .4s}
.chap__in{display:flex;gap:.9em;will-change:transform}
.chap__num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text);transition:color .4s}
.nav.is-light{color:var(--ink)}
.nav.is-light .chap{color:var(--ink-muted)}
.nav.is-light .chap__num{color:var(--ink)}
.nav__right{justify-self:end;display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:.6em;height:44px;padding:0 1.25em;border-radius:999px;border:1px solid rgba(242,240,247,.28);font-size:14px;font-weight:500;letter-spacing:.005em;white-space:nowrap;transition:background-color .35s,color .35s,border-color .35s}
.pill:hover{background:var(--text);color:var(--night);border-color:var(--text)}
.pill__dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.nav.is-light .pill{border-color:rgba(30,39,49,.28)}
.nav.is-light .pill:hover{background:var(--ink);color:var(--stock);border-color:var(--ink)}
[data-magnetic]{transition:transform .7s var(--ease-out),background-color .35s,color .35s,border-color .35s}
[data-magnetic].is-mag{transition:transform .18s linear,background-color .35s,color .35s,border-color .35s}
.mag-i{display:inline-flex;align-items:center;gap:inherit;transition:transform .7s var(--ease-out)}
[data-magnetic].is-mag .mag-i{transition:transform .18s linear}

/* ---------- menu ---------- */
.menu{position:fixed;inset:0;z-index:68;background:#0C0920;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:4vw;padding:calc(env(safe-area-inset-top,0px) + 110px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 40px);clip-path:circle(0px at var(--mx,95%) var(--my,40px));visibility:hidden;transition:clip-path 1s var(--ease-io),visibility 0s 1s;overflow-y:auto}
.menu:focus,.cs:focus,.player:focus{outline:none}
.menu.is-open{clip-path:circle(150vmax at var(--mx,95%) var(--my,40px));visibility:visible;transition:clip-path 1s var(--ease-io),visibility 0s}
.menu__list{list-style:none;margin:0;padding:0;align-self:center}
.menu__list a{display:flex;align-items:baseline;gap:.6em;padding:.05em 0}
.menu__n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;width:2.4em;flex:none}
.menu__t{font-size:clamp(2.2rem,6.6vh,5.4rem);line-height:1;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-family:var(--f-cond);transition:transform .7s var(--ease-out),color .3s}
.menu__list a:hover .menu__t,.menu__list a:focus-visible .menu__t{transform:translateX(calc(1vw * var(--dirx)));color:var(--gold)}
.menu__list li{overflow:hidden}
.menu__list li > a{transform:translateY(110%);transition:transform .9s var(--ease-out);transition-delay:calc(.25s + var(--i)*45ms)}
.menu.is-open .menu__list li > a{transform:none}
.menu__side{align-self:end;display:flex;flex-direction:column;gap:28px;color:var(--muted);font-size:15px}
.menu__side h3{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:8px}
.menu__side a{color:var(--text)}
.menu__mail{font-size:clamp(1.2rem,2vw,1.8rem);font-family:var(--f-serif)}
.menu__social{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:80;pointer-events:none;display:none;overflow:hidden}
.is-intro .intro{display:block}
.intro__spark{position:absolute;left:50%;top:44%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#FFF6DC;box-shadow:0 0 10px 3px rgba(245,197,82,.95),0 0 46px 16px rgba(242,154,56,.35),0 0 140px 60px rgba(229,37,141,.12);opacity:0}
.intro__bloom{position:absolute;left:50%;top:44%;width:140vmax;height:140vmax;margin:-70vmax 0 0 -70vmax;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.03);background:radial-gradient(closest-side,rgba(255,244,220,.85) 0%,rgba(245,197,82,.42) 9%,rgba(242,154,56,.2) 18%,rgba(229,37,141,.12) 30%,rgba(111,79,214,.06) 46%,rgba(8,6,22,0) 70%);will-change:transform,opacity}
.intro__brand{position:absolute;left:0;top:0;transform-origin:0 0;font-size:clamp(30px,4.4vw,62px);opacity:0}
.intro__brand .fx--feather{clip-path:inset(100% 0 0 0)}
.intro__brand .fx--word{clip-path:inset(0 100% 0 0)}
.intro__tag{position:absolute;left:0;right:0;text-align:center;font-size:clamp(12px,1vw,14px);letter-spacing:.02em;color:var(--muted);opacity:0}
.intro__skip{position:absolute;inset-inline-end:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);pointer-events:auto;font-size:13px;color:var(--muted);padding:10px 4px;transition:color .3s}
.intro__skip:hover{color:var(--text)}

/* ---------- hero ---------- */
.hero{position:relative}
.hero__pin{position:relative;height:260vh}
.hero--short .hero__pin{height:228vh}  /* no closing line: 100vh + 80% of the 160vh scroll (main.js Hero.k) */
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
@supports (height:100svh){.hero__stage{height:100svh}}
.hero__cam{position:absolute;inset:0;animation:breathe 16s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.025)}}
.hero__haze{position:absolute;inset:-15%;background:
  radial-gradient(32% 40% at 66% 46%,rgba(111,79,214,.34),transparent 70%),
  radial-gradient(26% 30% at 36% 72%,rgba(229,37,141,.16),transparent 72%),
  radial-gradient(44% 40% at 52% 104%,rgba(30,150,204,.14),transparent 70%);will-change:transform,opacity}
.hero__word{position:absolute;z-index:1;inset-inline-start:calc(var(--gutter) - .04em);top:clamp(84px,12.5vh,140px);font-weight:800;font-size:min(31vw,54vh);line-height:.8;letter-spacing:-.012em;font-family:var(--f-cond);text-transform:uppercase;white-space:nowrap;will-change:transform}
.cw{display:inline-block;white-space:nowrap}
.hm{display:inline-block;overflow:hidden;vertical-align:top;will-change:transform,opacity}
.hl{display:inline-block;will-change:transform}
.bird{position:absolute;z-index:2;inset-inline-end:-3vw;top:8vh;width:min(72vw,124vh);aspect-ratio:1800/1255;will-change:transform,opacity}
.bird__mouse,.bird__intro,.bird__float{position:absolute;inset:0}
.bird__intro{will-change:transform,opacity}
.bird__float{animation:float 8s ease-in-out infinite alternate}
@keyframes float{0%{transform:translate3d(0,-1.1%,0) rotate(-.7deg)}100%{transform:translate3d(-.6%,1.1%,0) rotate(.5deg)}}
.bird__flip{position:absolute;inset:0}
.bird__img{position:absolute;inset:0;background:url("../images/hero-peacock.webp") center/contain no-repeat}
.bird__sheen{position:absolute;inset:0;-webkit-mask:url("../images/hero-peacock.webp") center/contain no-repeat;mask:url("../images/hero-peacock.webp") center/contain no-repeat;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.26) 50%,transparent 58%) no-repeat;background-size:260% 100%;background-position:160% 0;mix-blend-mode:screen;animation:sheen 10s var(--ease-io) 6s infinite}
@keyframes sheen{0%,72%{background-position:160% 0}100%{background-position:-60% 0}}
.bird__trail{position:absolute;left:-35%;top:-10%;width:145%;height:130%;pointer-events:none}
.hero__line{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:15.5vh;font-weight:500;font-size:clamp(2.1rem,7.3vw,8.6rem);line-height:.9;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap}
.hero__line .dot{color:var(--gold)}
.mk{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.mk__i{display:inline-block;will-change:transform}
.hero__foot{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 4.5vh);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:24px;font-size:15px;color:var(--muted)}
.hero__intro{max-width:38ch}
.hero__cue{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px}
.hero__cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--text),transparent);transform-origin:top;animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{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}}
.hero__disc{justify-self:end;text-align:end;list-style:none;margin:0;padding:0;line-height:1.55}
.hero__next{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:0 var(--gutter);pointer-events:none}
.hero__next p{max-width:15ch;text-align:center;font-size:clamp(2.1rem,5.6vw,6.2rem);line-height:1;font-weight:400;letter-spacing:-.02em}
.hero__next .w{display:inline-block;opacity:0;will-change:transform,opacity}
.is-intro .hero__line .mk__i{transform:translateY(125%)}
.is-intro .hero__word .hl{transform:translateY(110%)}
.is-intro .hero__foot,.is-intro .hero__haze{opacity:0}
.is-intro .bird__intro{opacity:0}
.js:not(.split) .hero__word,.js:not(.split) .hero__line,.js:not(.split) .hero__next,.js:not(.split) .hero__foot{opacity:0}

/* ---------- shared section scaffolding ---------- */
.sec{position:relative}
.side{font-size:14px;color:var(--muted);display:flex;gap:.8em;align-items:baseline}
.side b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw}

/* ---------- about ---------- */
.about{padding:20vh var(--gutter) 18vh}
.about__label{grid-column:1/3;align-self:start;position:sticky;top:120px}
.manifesto{grid-column:3/12;font-family:var(--f-serif);font-weight:400;font-size:clamp(1.9rem,3.9vw,4.5rem);line-height:1.08;letter-spacing:-.01em}
.manifesto .mw{opacity:.16}
.beliefs{margin-top:18vh;row-gap:6vh}
.belief{border-top:1px solid var(--faint);padding-top:22px}
.belief:nth-child(1){grid-column:3/6}
.belief:nth-child(2){grid-column:6/9;margin-top:9vh}
.belief:nth-child(3){grid-column:9/12;margin-top:18vh}
.belief h3{font-size:clamp(1.3rem,1.8vw,1.75rem);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin-bottom:.6em}
.belief p{color:var(--muted);max-width:32ch}

/* ---------- services ---------- */
.services{padding:10vh var(--gutter) 18vh}
.services__head{align-items:end;margin-bottom:9vh;row-gap:24px}
.services__title{grid-column:1/-1;font-size:clamp(3.4rem,11.5vw,13.5rem);line-height:.8;font-weight:800;text-transform:uppercase;letter-spacing:-.025em;font-family:var(--f-cond);white-space:nowrap;will-change:transform}
.services__intro{grid-column:8/13;color:var(--muted);max-width:34ch;margin-top:2vh}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--faint)}
.svc{border-bottom:1px solid var(--faint)}
.svc__row{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:3vw;padding:2.1vh 0}
.svc__name{font-size:clamp(2.5rem,7.4vw,8.8rem);line-height:.92;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;font-family:var(--f-cond);transition:transform .9s var(--ease-out),color .45s}
.svc-list:hover .svc__name{color:rgba(242,240,247,.32)}
.svc-list .svc__row:hover .svc__name,.svc.is-open .svc__name{color:var(--text);transform:translateX(calc(1.4vw * var(--dirx)))}
.svc__items{justify-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35em 1.3em;max-width:44ch;font-size:15px;color:var(--muted);list-style:none;margin:0;padding:0}
.svc__items > span{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .7s var(--ease-out);transition-delay:calc(var(--i)*45ms)}
.svc__row:hover .svc__items > span,.svc.is-open .svc__items > span{opacity:1;transform:none}
.svc__plus{position:relative;width:26px;height:26px;flex:none}
.svc__plus::before,.svc__plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transition:transform .6s var(--ease-out)}
.svc__plus::after{transform:rotate(90deg)}
.svc.is-open .svc__plus::after{transform:rotate(0)}
.svc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s var(--ease-out)}
.svc.is-open .svc__panel{grid-template-rows:1fr}
.svc__panel > div{overflow:hidden}
.svc__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4vw;padding:1vh 0 5vh}
.svc__pic{display:none}
@media (max-width:820px),(hover:none){.svc__pic{display:block;grid-column:1/-1;width:100%;max-width:560px;aspect-ratio:4/3;border-radius:8px;overflow:hidden}.svc__pic svg{width:100%;height:100%}}
.svc__desc{font-family:var(--f-serif);font-size:clamp(1.4rem,2.2vw,2.2rem);line-height:1.15;max-width:26ch}
.svc__more{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.svc__mlist{list-style:none;margin:0;padding:0;color:var(--muted);columns:2;column-gap:2em}
.svc__mlist li{padding:.15em 0}
.svc-list{position:relative;z-index:1}
.svc-preview{position:fixed;left:0;top:0;z-index:0;width:clamp(260px,24vw,380px);aspect-ratio:4/3;opacity:.88;pointer-events:none;border-radius:8px;overflow:hidden;clip-path:inset(50% 50% 50% 50% round 8px);transition:clip-path .7s var(--ease-out);will-change:transform}
.svc-preview.is-on{clip-path:inset(0 0 0 0 round 8px)}
.svc-preview .pv{position:absolute;inset:0;opacity:0;transform:scale(1.12);transition:opacity .45s,transform .9s var(--ease-out)}
.svc-preview .pv.on{opacity:1;transform:none}
.svc-preview svg{width:100%;height:100%}

/* ---------- work ---------- */
.work{padding:12vh var(--gutter) 14vh}
.work__head{margin-bottom:14vh}
.work__title{font-size:clamp(3.6rem,15.5vw,19rem);line-height:.8;font-weight:800;text-transform:uppercase;letter-spacing:-.03em;display:flex;flex-direction:column;white-space:nowrap}
.work__title .a{font-family:var(--f-cond);will-change:transform}
.work__title .b{align-self:flex-end;font-weight:300;letter-spacing:-.01em;will-change:transform}
.work__note{max-width:30ch;color:var(--muted);margin-top:4vh}
.work__grid{row-gap:15vh;align-items:start}
.case{min-width:0}
.case--a{grid-column:1/9}
.case--b{grid-column:9/13;margin-top:28vh}
.case--c{grid-column:2/7}
.case--d{grid-column:8/13;margin-top:16vh}
.case--e{grid-column:1/13}
.case--f{grid-column:4/11}
.case__link{display:block}
.case__media{position:relative;overflow:hidden;border-radius:4px;background:#110D26;clip-path:inset(14% 10% 14% 10%);transition:clip-path 1.5s var(--ease-out)}
.case.is-in .case__media{clip-path:inset(0 0 0 0)}
.case__par{position:absolute;left:0;right:0;top:-8%;bottom:-8%;will-change:transform}
.case__img{position:absolute;inset:0;transition:transform 1.3s var(--ease-out),clip-path 1s var(--ease-out)}
.case__img svg{width:100%;height:100%}
.real{display:block;width:100%;height:100%;object-fit:cover}
.slat .real,.pp .real{position:absolute;top:0;height:100%;width:calc(var(--n) * 100%);left:calc(var(--i) * -100%);max-width:none}
.case__img--key{transform:scale(1.18)}
.case.is-in .case__img--key{transform:scale(1)}
.case__img--alt{clip-path:inset(100% 0 0 0)}
.case__link:hover .case__img--alt,.case__link:focus-visible .case__img--alt{clip-path:inset(0 0 0 0)}
.case.is-in .case__link:hover .case__img--key{transform:scale(1.07)}
.case__cap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35em 1.5em;margin-top:18px;align-items:baseline}
.case__title{font-size:clamp(1.3rem,1.9vw,2rem);font-weight:600;letter-spacing:-.012em;line-height:1.1}
.roll{display:inline-block;overflow:hidden;vertical-align:top}
.roll__in{display:inline-block;position:relative;transition:transform .7s var(--ease-out)}
.roll__in::after{content:attr(data-t);position:absolute;inset-inline-start:0;top:100%;color:var(--gold)}
.case__link:hover .roll__in,a:hover > .roll .roll__in{transform:translateY(-100%)}
.case__cat{color:var(--muted);font-size:14px;text-align:end}
.case__desc{grid-column:1/-1;color:var(--muted);max-width:50ch;font-family:var(--f-serif);font-size:clamp(1.1rem,1.35vw,1.35rem);line-height:1.3}

/* ---------- case study overlay ---------- */
.cs{position:fixed;inset:0;z-index:90;background:var(--night);visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s}
.cs.is-open{visibility:visible;opacity:1;transition:opacity .5s}
.cs__scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cs__hero{position:relative;height:74vh;overflow:hidden}
.cs__hero > div{position:absolute;inset:0}
.cs__hero svg{width:100%;height:100%}
.cs__intro{padding:7vh var(--gutter) 2vh}
.cs__kick{font-size:14px;color:var(--muted);margin-bottom:2vh}
.cs__title{font-size:clamp(3rem,10vw,11rem);line-height:.84;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-family:var(--f-cond)}
.cs__meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:6vh;padding-top:22px;border-top:1px solid var(--faint)}
.cs__meta dt{font-size:13px;color:var(--muted);margin-bottom:6px}
.cs__meta dd{margin:0;font-size:15px}
.cs__body{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,3.2fr);gap:4vw;padding:8vh var(--gutter) 6vh}
.cs__toc{position:sticky;top:110px;align-self:start;list-style:none;margin:0;padding:0;font-size:14px}
.cs__toc a{display:flex;gap:1em;padding:.32em 0;color:var(--muted);transition:color .3s}
.cs__toc a span{font-variant-numeric:tabular-nums;width:1.8em}
.cs__toc a.on{color:var(--text)}
.cs__toc a.on span{color:var(--gold)}
.chapter{padding:0 0 12vh}
.chapter__h{display:flex;gap:1em;align-items:baseline;font-size:14px;color:var(--muted);border-top:1px solid var(--faint);padding-top:18px;margin-bottom:4vh}
.chapter__h b{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.chapter__h h3{font-size:14px;font-weight:500;color:var(--text)}
.chapter__txt{font-family:var(--f-serif);font-size:clamp(1.6rem,2.8vw,3rem);line-height:1.12;max-width:28ch;margin-bottom:5vh}
.chapter__media{display:grid;gap:2vw;grid-template-columns:repeat(var(--cols,1),minmax(0,1fr))}
.chapter__media figure{margin:0;border-radius:4px;overflow:hidden;position:relative}
.chapter__media svg{width:100%;height:100%}
.chapter__media--real{align-items:start}
.chapter__media figure.is-real{background:#0D0A22}
.chapter__media figure.is-real .real{height:auto}
.chapter__media--real figure.is-span{grid-column:1/-1}
.chapter__media--real figure.is-narrow{max-width:min(100%,640px)}
.cs__next{display:block;padding:12vh var(--gutter) 14vh;border-top:1px solid var(--faint)}
.cs__next p{font-size:14px;color:var(--muted);margin-bottom:2vh}
.cs__next strong{display:block;font-size:clamp(2.6rem,9vw,10rem);line-height:.86;font-weight:800;text-transform:uppercase;letter-spacing:-.025em;font-family:var(--f-cond);transition:transform .9s var(--ease-out),color .4s}
.cs__next:hover strong{transform:translateX(calc(1.4vw * var(--dirx)));color:var(--gold)}
.cs__close{position:fixed;z-index:93;top:calc(env(safe-area-inset-top,0px) + 18px);inset-inline-end:var(--gutter);background:rgba(8,6,22,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cs__fade{opacity:0;transform:translateY(30px);transition:opacity .7s,transform 1s var(--ease-out)}
.cs.is-ready .cs__fade{opacity:1;transform:none}
.flip{position:fixed;z-index:91;overflow:hidden;pointer-events:none;border-radius:4px;will-change:left,top,width,height}
.flip svg,.flip > div{width:100%;height:100%}
.flip > div{position:absolute;inset:0}

/* ---------- capabilities ---------- */
.caps{padding:14vh var(--gutter) 12vh}
.caps__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:5vh}
.caps__title{font-size:clamp(2.6rem,6.2vw,7rem);line-height:.9;font-weight:650;letter-spacing:-.02em;max-width:11ch}
.caps__aside{display:flex;flex-direction:column;align-items:flex-end;gap:14px;color:var(--muted);font-size:15px;text-align:end}
.toggle{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 6px 0 18px;border-radius:999px;border:1px solid rgba(242,240,247,.28);font-size:14px;color:var(--text)}
.toggle__track{position:relative;width:44px;height:30px;border-radius:999px;background:rgba(242,240,247,.12);transition:background-color .4s}
.toggle__track::after{content:"";position:absolute;inset-inline-start:4px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--text);transition:transform .5s var(--ease-out),background-color .4s}
.toggle[aria-pressed="true"] .toggle__track{background:var(--gold)}
.toggle[aria-pressed="true"] .toggle__track::after{transform:translateX(14px);background:var(--ink)}
.caps__stage{position:relative;height:min(76vh,780px);min-height:440px;border-radius:28px;overflow:hidden;border:1px solid var(--faint);background:radial-gradient(70% 80% at 50% 0%,rgba(111,79,214,.10),transparent 70%),rgba(13,10,34,.35);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.cap{position:absolute;left:0;top:0;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:999px;height:1.22em;padding:0 .55em;font-weight:750;text-transform:uppercase;letter-spacing:-.01em;line-height:1;will-change:transform;transform:translate3d(-999px,-999px,0)}
.cap--xl{font-size:clamp(2.4rem,6.2vw,7.2rem)}
.cap--l{font-size:clamp(2rem,4.8vw,5.6rem)}
.cap--m{font-size:clamp(1.6rem,3.6vw,4.2rem)}
.cap--s{font-size:clamp(1.3rem,2.6vw,3rem)}
.cap--cyan{background:var(--cyan);color:#052230}
.cap--mag{background:var(--magenta);color:#fff}
.cap--gold{background:var(--gold);color:var(--ink)}
.cap--white{background:var(--text);color:var(--night)}
.cap--violet{background:var(--violet);color:#fff}
.cap--line{box-shadow:inset 0 0 0 2px rgba(242,240,247,.72);color:var(--text)}
.cap--dot{width:1.22em;padding:0;background:radial-gradient(circle at 38% 35%,#FCE38A,var(--gold) 45%,var(--ember))}
.cap--ring{width:1.22em;padding:0;box-shadow:inset 0 0 0 .16em var(--magenta)}
.cap--eye{width:1.22em;padding:0;background:radial-gradient(closest-side,#F5C552 0 42%,#E5258D 43% 66%,#2a1d55 67% 82%,#35BEEC 83% 88%,transparent 89%)}
.cap.is-grab{z-index:2}
.caps__caption{min-height:1.6em;margin-top:18px;color:var(--muted);font-size:15px}
.caps__caption b{color:var(--text);font-weight:600}

/* ---------- process ---------- */
.process__pin{position:relative;height:460vh}
.process__stage{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:4vw;align-content:center;padding:0 var(--gutter);overflow:hidden}
.process__label{position:absolute;inset-inline-start:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 96px)}
.step{display:contents}
.pw{grid-column:1;position:relative;justify-self:start;font-size:min(10.6vw,15.2vh);line-height:.88;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-family:var(--f-cond);margin:0;white-space:nowrap}
.pw__stroke{color:transparent;-webkit-text-stroke:1.4px rgba(242,240,247,.30)}
.pw__fill{position:absolute;inset-inline-start:0;top:0;color:transparent;background:var(--quill);-webkit-background-clip:text;background-clip:text;clip-path:inset(-10% calc(100% - var(--f,0) * 100%) -10% 0)}
.pw__nib{position:absolute;left:0;top:0;height:.62em;opacity:0;pointer-events:none;will-change:transform,opacity}
.pd{grid-column:2;grid-row:1 / span 5;align-self:center;opacity:0;visibility:hidden;transform:translateY(26px);transition:opacity .5s,transform .8s var(--ease-out),visibility 0s .5s}
.pd.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .6s .1s,transform .9s .1s var(--ease-out),visibility 0s}
.pd__n{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:2.4vh}
.pd__n b{color:var(--gold);font-weight:600}
.pd h3{font-size:14px;font-weight:500;color:var(--text);margin-bottom:1.6vh}
.pd p{font-family:var(--f-serif);font-size:clamp(1.5rem,2.3vw,2.4rem);line-height:1.14;max-width:22ch;margin-bottom:3vh}
.pd ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pd li{font-size:13px;border:1px solid var(--faint);border-radius:999px;padding:.45em .95em;color:var(--muted)}

/* ---------- social ---------- */
.social__pin{position:relative}
.social__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.social__track{display:flex;align-items:center;gap:4vw;padding:0 var(--gutter);height:100%;will-change:transform}
.social__intro{flex:0 0 min(40vw,600px);align-self:center}
.social__intro h2{font-size:clamp(2.8rem,7.4vw,8.6rem);line-height:.84;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-family:var(--f-cond);margin-bottom:3.5vh}
.social__intro p{color:var(--muted);max-width:34ch}
.social__hint{margin-top:3vh;font-size:13px;display:flex;align-items:center;gap:12px;color:var(--muted)}
.social__hint i{display:block;width:48px;height:1px;background:var(--muted)}
.sframe{flex:none;margin:0;position:relative}
.sframe__media{position:relative;overflow:hidden;border-radius:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);transition:transform .9s var(--ease-out)}
.sframe__media .art{position:absolute;top:0;bottom:0;left:-5%;right:-5%;will-change:transform}
.sframe__media svg{width:100%;height:100%}
.sframe:hover .sframe__media{transform:translateY(-10px) rotate(-.6deg)}
.sframe--post .sframe__media{height:54vh;aspect-ratio:4/5}
.sframe--story .sframe__media{height:70vh;aspect-ratio:9/16;border-radius:30px;box-shadow:0 0 0 7px #0E0C18,0 0 0 8px rgba(242,240,247,.14),0 40px 90px -40px rgba(0,0,0,.8)}
.sframe--square .sframe__media{height:46vh;aspect-ratio:1}
.sframe--web .sframe__media{height:50vh;aspect-ratio:16/10}
.sframe--up{align-self:flex-start;margin-top:13vh}
.sframe--down{align-self:flex-end;margin-bottom:11vh}
.carousel{display:flex;height:46vh}
.carousel .sframe__media{height:100%;aspect-ratio:1;flex:none}
.carousel .sframe__media + .sframe__media{margin-inline-start:-7vh}
.sframe figcaption{margin-top:14px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;gap:16px}
.sframe figcaption b{color:var(--text);font-weight:600}
.social__end{flex:0 0 min(32vw,440px);font-family:var(--f-serif);font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.12}
.social__bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 5vh);height:1px;background:var(--faint)}
.social__bar span{position:absolute;inset:0;background:var(--text);transform-origin:left;transform:scaleX(0)}

/* ---------- print & ooh ---------- */
.print__pin{position:relative;height:220vh}
.print__stage{position:sticky;top:0;height:100vh;overflow:hidden}
/* the paper opens out of the O in INNOVATIVE */
.print__stage .sheet__brand{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font-size:clamp(32px,9vw,84px);will-change:transform,opacity}
.sheet{position:absolute;inset:0;background:var(--stock);color:var(--ink);clip-path:circle(0px at 50% 46%);will-change:clip-path}
.paper::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .55 0 0 0 0 .6 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.sheet__title{position:absolute;left:var(--gutter);right:var(--gutter);bottom:11vh;font-size:clamp(3rem,11vw,13rem);line-height:.82;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;font-family:var(--f-cond)}
.sheet__title .mk__i{transform:translateY(125%)}
.print__body{position:relative;background:var(--stock);color:var(--ink);padding:4vh var(--gutter) 16vh}
.print__lede{grid-column:1/8;font-family:var(--f-serif);font-size:clamp(1.6rem,2.8vw,3rem);line-height:1.12;max-width:30ch}
.print__aside{grid-column:9/13;align-self:end;color:var(--ink-muted);max-width:34ch}
.objects{row-gap:12vh;margin-top:12vh;align-items:end}
.obj{margin:0;min-width:0}
.obj__stage{position:relative;display:grid;place-items:center;perspective:1400px;aspect-ratio:var(--ar,1)}
.obj figcaption{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2em 1.4em;margin-top:24px;border-top:1px solid rgba(30,39,49,.18);padding-top:14px;font-size:15px}
.obj figcaption b{font-weight:600}
.obj figcaption span{color:var(--ink-muted);max-width:46ch}
.obj--bb{grid-column:1/9;--ar:16/10}
.obj--roll{grid-column:9/13;--ar:3/5}
.obj--box{grid-column:1/8;--ar:3/2}
.obj--cards{grid-column:8/13;--ar:1/1}
.obj--pop{grid-column:1/8;--ar:16/10}
.obj--gift{grid-column:8/13;--ar:16/10}
/* billboard */
.bb{position:relative;width:92%;margin-top:clamp(26px,3vw,44px);transform:rotateY(-7deg) rotateX(2deg);transform-style:preserve-3d}
.bb__face{position:relative;aspect-ratio:16/6.4;display:flex;transform-style:preserve-3d;background:#1B1F27;border:10px solid #2A2F39;border-radius:3px;box-shadow:0 16px 22px -16px rgba(30,39,49,.5)}
.slat{position:relative;flex:1 1 0;height:100%;transform-style:preserve-3d;transition:transform 1.1s var(--ease-io);transition-delay:calc(var(--i)*55ms)}
.slat__f,.slat__b{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#111}
.slat__b{transform:rotateY(180deg)}
.slat svg{position:absolute;top:0;height:100%;width:calc(var(--n) * 100%);left:calc(var(--i) * -100%);max-width:none}
.slat__f::after,.slat__b::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 30%,transparent 75%,rgba(255,255,255,.08))}
.bb__lamps{position:absolute;left:8%;right:8%;top:-34px;display:flex;justify-content:space-between}
.bb__lamps i{display:block;width:34px;height:22px;border-top:3px solid #2A2F39;border-right:3px solid #2A2F39;border-radius:0 8px 0 0;position:relative}
.bb__lamps i::after{content:"";position:absolute;right:-8px;bottom:-6px;width:16px;height:7px;border-radius:3px;background:#3A404C}
/* standing structure: service ledge, steel posts with bracing, concrete footings, ground shadows */
.bb__walk{position:relative;height:clamp(5px,.6vw,9px);margin:0 1.5%;border-radius:0 0 2px 2px;background:linear-gradient(#4A505C,#262A32)}
.bb__legs{position:relative;display:flex;justify-content:space-between;padding:0 21%;height:clamp(60px,9.4vw,134px)}
.bb__legs i{position:relative;display:block;width:clamp(10px,1.35vw,20px);height:100%;background:linear-gradient(90deg,#1C2027 0%,#3B414C 30%,#565D6A 48%,#2B3038 72%,#1C2027 100%);box-shadow:inset 0 12px 10px -8px rgba(0,0,0,.5)}
.bb__legs i::after{content:"";position:absolute;left:50%;bottom:calc(-1 * clamp(4px,.5vw,7px));width:380%;height:clamp(7px,.85vw,12px);transform:translateX(-50%);border-radius:2px 2px 1px 1px;background:linear-gradient(#DADCE1,#A7ACB5);box-shadow:0 2px 0 #8C919B}
.bb__brace{position:absolute;left:21%;top:7%;width:58%;height:70%;overflow:visible}
.bb__brace path{fill:none;stroke:#353A44;stroke-width:2px;vector-effect:non-scaling-stroke}
.bb__ground{position:relative;height:0}
.bb__ground::before{content:"";position:absolute;left:10%;right:10%;top:-3px;height:clamp(14px,1.9vw,28px);border-radius:50%;background:radial-gradient(closest-side,rgba(30,39,49,.42),rgba(30,39,49,0));filter:blur(2px)}
.bb__ground::after{content:"";position:absolute;left:16%;right:-6%;top:0;height:clamp(18px,2.8vw,40px);border-radius:50%;background:rgba(30,39,49,.13);filter:blur(10px);transform:skewX(-38deg);transform-origin:top left}
.obj__shadow{position:absolute;left:50%;bottom:6%;width:60%;height:24px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(30,39,49,.32),transparent);filter:blur(2px)}
/* roll-up */
.rollup{position:relative;height:92%;aspect-ratio:1/2.5;display:flex;flex-direction:column;align-items:center;transition:transform 1.2s var(--ease-out);transform-origin:bottom}
.rollup:hover{transform:rotate(-1.2deg)}
.rollup__bar{width:102%;height:1.4%;background:#2A2F39;border-radius:3px}
.rollup__banner{position:relative;flex:1;width:100%;overflow:hidden;clip-path:inset(100% 0 0 0);transition:clip-path 1.8s var(--ease-out) .2s;box-shadow:0 30px 50px -30px rgba(30,39,49,.6)}
.rollup__banner > div{position:absolute;inset:0;transform:translateY(60%);transition:transform 1.8s var(--ease-out) .2s}
.rollup__banner svg{width:100%;height:100%}
.obj.is-in .rollup__banner{clip-path:inset(0 0 0 0)}
.obj.is-in .rollup__banner > div{transform:none}
.rollup__base{width:116%;height:4.5%;border-radius:6px 6px 3px 3px;background:linear-gradient(#BFC3CC,#8C919C 50%,#5E636D);box-shadow:0 12px 16px -6px rgba(30,39,49,.45)}
/* box */
.box3d{position:relative;font-size:clamp(11px,1.25vw,20px);width:10em;height:14.64em;transform-style:preserve-3d;will-change:transform}
.box3d > div{position:absolute;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.box3d svg{width:100%;height:100%}
.bx-f,.bx-b{width:10em;height:14.64em}
.bx-r,.bx-l{width:2.4em;height:14.64em;left:3.8em}
.bx-t,.bx-u{width:10em;height:2.4em;top:6.12em}
.bx-f{transform:translateZ(1.2em)}
.bx-b{transform:rotateY(180deg) translateZ(1.2em)}
.bx-r{transform:rotateY(90deg) translateZ(5em)}
.bx-l{transform:rotateY(-90deg) translateZ(5em)}
.bx-t{transform:rotateX(90deg) translateZ(7.32em)}
.bx-u{transform:rotateX(-90deg) translateZ(7.32em)}
/* packaging pair: EGAC Bond box + Sofra Beaty takeaway bag (8em x 15em x 4em) */
.pack-photo{position:absolute;left:2%;right:2%;top:6%;bottom:8%;display:flex;align-items:flex-end;justify-content:center;transform-style:preserve-3d;will-change:transform}
.pack-photo .real{width:auto;height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(30,39,49,.24));transform:translateY(34px);opacity:0;transition:transform 1.5s var(--ease-out),opacity 1.1s var(--ease-out)}
.obj.is-in .pack-photo .real,.rm .pack-photo .real{transform:none;opacity:1}
.packs{display:flex;align-items:center;justify-content:center;gap:3.2em;transform-style:preserve-3d;font-size:clamp(9px,1.02vw,16px)}
.packs .box3d{font-size:1em}
.bag3d{width:8em;height:15em}
.bag3d .bx-f,.bag3d .bx-b{width:8em;height:15em}
.bag3d .bx-r,.bag3d .bx-l{width:4em;height:15em;left:2em}
.bag3d .bx-t,.bag3d .bx-u{width:8em;height:4em;top:5.5em}
.bag3d .bx-f{transform:translateZ(2em)}
.bag3d .bx-b{transform:rotateY(180deg) translateZ(2em)}
.bag3d .bx-r{transform:rotateY(90deg) translateZ(4em)}
.bag3d .bx-l{transform:rotateY(-90deg) translateZ(4em)}
.bag3d .bx-t{transform:rotateX(90deg) translateZ(7.5em)}
.bag3d .bx-u{transform:rotateX(-90deg) translateZ(7.5em)}
.bx-r::after,.bx-l::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}
.bx-t::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.1)}
/* cards */
.cards{position:relative;width:min(64%,440px);aspect-ratio:1.75;perspective:1200px}
.bcard{position:absolute;inset:0;transform-style:preserve-3d;transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rz,0deg)) rotateY(var(--ry,0deg));transition:transform 1s var(--ease-out)}
.bcard__f,.bcard__b{position:absolute;inset:0;border-radius:6px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 1px 2px rgba(30,39,49,.12),0 22px 40px -18px rgba(30,39,49,.45)}
.bcard__b{transform:rotateY(180deg)}
.bcard--paper .bcard__f,.bcard--paper .bcard__b{background:#F6F5F8}
.bcard--navy .bcard__f,.bcard--navy .bcard__b{background:var(--ink);color:var(--text)}
.bcard__f{display:grid;place-items:center}
.bcard__f .lockup{font-size:clamp(10px,1.05vw,15px)}
.bcard__b{padding:9% 9%;display:flex;flex-direction:column;justify-content:space-between;font-size:clamp(9px,.8vw,12px);line-height:1.4}
.bcard__f .real,.bcard__b .real{position:absolute;inset:0}
.bcard__b:has(.real){padding:0}
.counter.has-real{overflow:hidden}
.counter.has-real::before{display:none}
.counter .real{position:absolute;inset:0}
.bcard__b strong{font-size:1.5em;font-weight:650;letter-spacing:-.01em}
.bcard__edge{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--quill)}
.bcard:nth-child(1){--tx:-6%;--ty:7%;--rz:-7deg}
.bcard:nth-child(2){--tx:2%;--ty:-1%;--rz:2deg}
.bcard:nth-child(3){--tx:7%;--ty:-6%;--rz:9deg}
.cards:hover .bcard:nth-child(1),.cards.is-fan .bcard:nth-child(1){--tx:-34%;--ty:12%;--rz:-15deg}
.cards:hover .bcard:nth-child(2),.cards.is-fan .bcard:nth-child(2){--tx:0%;--ty:-6%;--rz:0deg}
.cards:hover .bcard:nth-child(3),.cards.is-fan .bcard:nth-child(3){--tx:34%;--ty:10%;--rz:14deg}
.bcard.is-flip{--ry:180deg}
/* pop-up */
/* pop-up stand: sized from its own frame (container units), so the curved wall keeps the artwork's proportions on every screen */
#popStage{container-type:inline-size}
.popup{position:relative;width:100%;height:80%;transform-style:preserve-3d;font-size:clamp(9px,1vw,16px);font-size:1.915cqi;will-change:transform}
.pp{position:absolute;top:6%;left:50%;width:3.3em;height:82%;margin-left:-1.65em;transform:translateZ(var(--R)) rotateY(var(--a)) translateZ(calc(-1 * var(--R)));overflow:hidden;transform-style:preserve-3d}
.pp svg{position:absolute;top:0;height:100%;width:calc(var(--n) * 100%);left:calc(var(--i) * -100%);max-width:none}
.pp::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.12),transparent 40%,rgba(255,255,255,.08));}
.counter{position:absolute;left:50%;bottom:4%;width:13em;height:6.4em;margin-left:-6.5em;transform:translateZ(9em);background:var(--ink);border-radius:4px;display:grid;place-items:center;box-shadow:0 20px 30px -16px rgba(30,39,49,.6)}
.counter .lockup{font-size:.9em}
.counter::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--quill);border-radius:4px 4px 0 0}
/* gifts */
.gifts{position:relative;width:88%;height:88%}
.gifts > *{position:absolute;transition:transform .9s var(--ease-out)}
.gifts:hover > *{transform:translateY(-10px)}
/* gifts made of real cut-outs (bag, notebook, mug, pen), placed exactly as in the photo */
.gifts.gifts--photo{width:88%;height:auto;margin-top:4%}
.gp .real{position:static;display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(30,39,49,.2))}
.gifts--photo > *:nth-child(4){transition-delay:.15s}
.gifts:hover > *:nth-child(2){transition-delay:.05s}
.gifts:hover > *:nth-child(3){transition-delay:.1s}
.tote{left:4%;top:20%;width:44%;height:58%;background:linear-gradient(160deg,#28323E,#1E2731);border-radius:4px 4px 8px 8px;box-shadow:0 26px 40px -20px rgba(30,39,49,.6);display:grid;place-items:center}
.tote::before{content:"";position:absolute;left:28%;right:28%;top:-26%;height:34%;border:5px solid #28323E;border-bottom:0;border-radius:60px 60px 0 0}
.tote .lockup{font-size:clamp(7px,.7vw,11px)}
.note{left:42%;top:8%;width:36%;height:52%;background:linear-gradient(150deg,#2E61C9,#1E96CC);border-radius:4px 10px 10px 4px;box-shadow:0 26px 40px -20px rgba(30,39,49,.55);transform-origin:center}
.note::before{content:"";position:absolute;right:16%;top:0;bottom:0;width:4px;background:rgba(10,14,30,.45)}
.note .fx--feather{position:absolute;left:18%;top:22%;height:42%;opacity:.95}
.mug{left:58%;top:56%;width:28%;height:34%;background:linear-gradient(90deg,#DCDBE2,#FBFAFD 40%,#E2E1E7);border-radius:4px 4px 16px 16px;box-shadow:0 22px 30px -18px rgba(30,39,49,.5);display:grid;place-items:center}
.mug::after{content:"";position:absolute;right:-26%;top:20%;width:34%;height:46%;border:6px solid #E4E3E9;border-left:0;border-radius:0 40px 40px 0}
.mug .fx--feather-ink{height:52%}
.pen{left:10%;top:84%;width:52%;height:10px;border-radius:6px;background:linear-gradient(#F7D27A,#E0A83F);transform:rotate(-8deg);box-shadow:0 10px 14px -6px rgba(30,39,49,.4)}
.gifts .real{position:absolute;inset:0;border-radius:inherit}
.gifts.has-real .note::before{display:none}
.gifts.has-real .tote::before{border-color:#B8862F}
.gifts.has-real .mug::after{border-color:#14213D}
.gifts.has-real .pen::after{content:"ART EFFECT";position:absolute;left:40%;top:50%;transform:translateY(-50%);font:700 7px/1 var(--f-sans);letter-spacing:.08em;color:#4A3510;white-space:nowrap}
.pen.pen--real{left:4%;top:79%;width:60%;height:auto;background:none;box-shadow:none;border-radius:0;transform:none}
.pen--real .real{position:static;display:block;width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(30,39,49,.22))}
.gifts.has-real .pen--real::after{content:none}
.gifts:hover .pen.pen--real{transform:translateY(-10px)}
.gifts:hover .pen{transform:rotate(-8deg) translateY(-10px)}

/* ---------- motion & video ---------- */
.motion__open{position:relative;height:190vh;background:var(--stock)}
.motion__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.lbox__line{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transform:scaleX(0)}
.lbox{position:absolute;inset:0;background:radial-gradient(110% 80% at 50% 40%,#18103A,#080616 72%);clip-path:inset(50% 0 50% 0);display:grid;place-items:center;will-change:clip-path}
.lbox h2{font-size:clamp(3rem,11vw,13rem);line-height:.84;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;text-align:center;font-family:var(--f-cond);will-change:transform}
.lbox h2 span{display:block}
.lbox h2 span:last-child{font-family:var(--f-sans);font-weight:300;letter-spacing:-.01em}
.lbox__meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:7vh;display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.motion__body{padding:10vh var(--gutter) 16vh}
.motion__intro{grid-column:1/7;font-family:var(--f-serif);font-size:clamp(1.5rem,2.5vw,2.6rem);line-height:1.14;max-width:30ch;margin-bottom:9vh}
.reels{row-gap:9vh;align-items:start}
.reel{margin:0;min-width:0}
.reel--main{grid-column:1/9}
.reel--v{grid-column:10/13;margin-top:-14vh}
.reel--s{grid-column:2/6}
.reel--w{grid-column:7/13;margin-top:8vh}
.reel__btn{display:block;width:100%;position:relative}
.reel__screen{position:relative;overflow:hidden;border-radius:6px;background:#0B0819;aspect-ratio:var(--ar,16/9)}
.reel__screen canvas,.reel__screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.reel__btn:hover canvas,.reel__btn:hover video{transform:scale(1.04)}
.reel__tc{position:absolute;inset-inline-start:14px;top:12px;font-size:12px;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.reel__play{position:absolute;inset-inline-end:14px;bottom:16px;width:44px;height:44px;border-radius:50%;background:rgba(8,6,22,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;transition:transform .6s var(--ease-out),background-color .3s}
.reel__btn:hover .reel__play{transform:scale(1.12);background:var(--gold)}
.reel__btn:hover .reel__play svg{fill:var(--ink)}
.reel__play svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.reel__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12)}
.reel__bar span{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.reel figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:14px;color:var(--muted)}
.reel figcaption b{color:var(--text);font-weight:600}
.player{position:fixed;inset:0;z-index:95;display:grid;place-items:center;background:rgba(5,4,14,.94);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.player.is-open{opacity:1;visibility:visible;transition:opacity .5s}
.player__frame{position:relative;width:min(88vw,calc(74vh * var(--arn,1.7778)));aspect-ratio:var(--ar,16/9);background:#000;border-radius:4px;overflow:hidden}
.player.is-native .player__ui{display:none}
.player.is-native .player__frame{width:min(92vw,calc(80vh * var(--arn,1.7778)))}
.player__frame canvas,.player__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player__ui{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(env(safe-area-inset-bottom,0px) + 4vh);display:flex;align-items:center;gap:18px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}
.player__pp{width:48px;height:48px;border-radius:50%;background:var(--gold);display:grid;place-items:center;flex:none}
.player__pp svg{width:16px;height:16px;fill:var(--ink)}
.player__track{position:relative;flex:1;height:28px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.player__track::before{content:"";position:absolute;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}
.player__fill{position:absolute;left:0;height:2px;width:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}
.player__head{position:absolute;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--gold)}
.player__title{position:absolute;inset-inline-start:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 26px);font-size:14px;color:var(--muted)}
.player__title b{color:var(--text);font-weight:600}
.player__close{position:absolute;inset-inline-end:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 18px)}

/* ---------- cta ---------- */
.cta{position:relative;min-height:115vh;display:grid;place-items:center;align-content:center;gap:7vh;padding:16vh var(--gutter);overflow:hidden;text-align:center}
.cta__bird{position:absolute;left:0;top:0;width:min(44vw,640px);aspect-ratio:1800/1255;background:url("../images/hero-peacock.webp") center/contain no-repeat;z-index:0;will-change:transform;opacity:0}
.cta__title{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cta__l1{font-size:clamp(1.5rem,3.2vw,3.4rem);font-weight:400;letter-spacing:-.015em;margin-bottom:.35em;color:var(--muted)}
.cta__l2{font-size:clamp(3rem,10.2vw,13rem);line-height:.88;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap}
.cta__l2 .c{display:inline-block;transform-origin:center bottom;color:color-mix(in srgb,var(--gold) calc(var(--k,0) * 100%),var(--text))}
.cta__btn{position:relative;z-index:1;width:clamp(150px,13vw,190px);aspect-ratio:1;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:650;font-size:15px;text-align:center;line-height:1.2}
.cta__mail{position:relative;z-index:1;color:var(--muted);font-size:15px}
.cta__mail a{color:var(--text);border-bottom:1px solid rgba(242,240,247,.3);padding-bottom:2px;transition:border-color .3s}
.cta__mail a:hover{border-color:var(--gold)}

/* ---------- contact ---------- */
.contact{padding:12vh var(--gutter) 16vh;row-gap:8vh}
.contact__left{grid-column:1/6}
.contact__left h2{font-size:clamp(2.4rem,5vw,5.6rem);line-height:.92;font-weight:650;letter-spacing:-.02em;margin-bottom:4vh;max-width:10ch}
.contact__left p{color:var(--muted);max-width:36ch;margin-bottom:5vh}
.contact__mail{font-family:var(--f-serif);font-size:clamp(1.4rem,2.2vw,2.2rem);display:inline-block;margin-bottom:5vh}
.contact__links{display:flex;flex-wrap:wrap;gap:10px}
.form{grid-column:7/13;display:flex;flex-direction:column;gap:6px}
.field{position:relative;border-bottom:1px solid rgba(242,240,247,.22);padding:16px 0 8px;transition:border-color .3s}
.field:focus-within{border-color:var(--gold)}
.field label,.field legend{display:block;font-size:13px;color:var(--muted);padding:0}
.field input,.field textarea{width:100%;background:none;border:0;color:var(--text);font:inherit;font-size:1.2rem;padding:8px 0 6px;outline:none;resize:vertical}
.field textarea{min-height:110px}
.field.is-error{border-color:#FF7A9A}
.field__err{font-size:13px;color:#FF9DB4;min-height:0}
fieldset.field{border:0;border-bottom:1px solid rgba(242,240,247,.22);margin:0;padding:16px 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{height:40px;padding:0 1em;border-radius:999px;border:1px solid rgba(242,240,247,.26);font-size:14px;transition:background-color .3s,color .3s,border-color .3s}
.chip:hover{border-color:var(--text)}
.chip[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:28px}
.btn-gold{display:inline-flex;align-items:center;height:54px;padding:0 1.8em;border-radius:999px;background:var(--gold);color:var(--ink);font-weight:650;font-size:15px}
.form__msg{font-size:14px;color:var(--muted);max-width:40ch}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;padding:10vh var(--gutter) calc(env(safe-area-inset-bottom,0px) + 28px);border-top:1px solid var(--faint);overflow:hidden}
.footer__cols{row-gap:40px;margin-bottom:10vh}
.footer__col{grid-column:span 3}
.footer__col h3{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:14px}
.footer__col ul{list-style:none;margin:0;padding:0;line-height:2}
.footer__col a{transition:color .3s}
.footer__col a:hover{color:var(--gold)}
.footer__brand{grid-column:span 3}
.footer__brand .lockup{font-size:22px;margin-bottom:18px}
.footer__brand p{color:var(--muted);max-width:28ch;font-size:15px}
.footer__mark{font-size:clamp(3rem,12.2vw,16rem);line-height:.8;font-weight:800;letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;margin:0 -.04em}
.footer__mark span{display:block}
.footer__mark .idea{color:var(--blue)}
.footer__mark .c{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i)*35ms)}
.footer__mark .row{display:block;overflow:hidden}
.footer.is-in .footer__mark .c{transform:none}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:5vh;font-size:13px;color:var(--muted)}

/* ---------- reveal primitives ---------- */
[data-reveal="words"] .mk__i{transform:translateY(125%);transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i)*55ms)}
[data-reveal="words"].is-in .mk__i{transform:none}
[data-reveal="rise"]{opacity:0;transform:translateY(28px);transition:opacity .9s,transform 1.2s var(--ease-out);transition-delay:var(--d,0s)}
[data-reveal="rise"].is-in{opacity:1;transform:none}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .chap__name{display:none}
  .reel--v{grid-column:9/13;margin-top:0}
  .reel--s{grid-column:1/6}
  .reel--w{grid-column:6/13}
}

/* ---------- mobile: recomposed, not shrunk ---------- */
@media (max-width:820px){
  .nav{grid-template-columns:1fr auto;padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
  .nav .nav__brand.lockup{font-size:25px}
  .chap{display:none}
  .nav__talk{display:none}
  .lockup{font-size:16px}
  .menu{grid-template-columns:1fr;padding-top:calc(env(safe-area-inset-top,0px) + 96px);gap:6vh}
  .menu__t{font-size:clamp(2rem,9.5vw,3.4rem)}
  .menu__side{align-self:start}

  .hero__pin{height:200vh}
  .hero--short .hero__pin{height:180vh}
  .bird{width:132vw;inset-inline-end:-14vw;top:13svh}
  .hero__word{font-size:37vw;top:calc(13svh + 80vw);inset-inline-start:calc(var(--gutter) - .03em)}
  .hero__line{font-size:8.8vw;top:calc(13svh + 112vw);bottom:auto}
  .hero__foot{grid-template-columns:1fr;bottom:calc(env(safe-area-inset-bottom,0px) + 5svh);font-size:14px}
  .hero__cue,.hero__disc{display:none}
  .hero__next p{font-size:10.5vw;max-width:12ch}

  .about{padding:14vh var(--gutter) 12vh}
  .about__label{grid-column:1/-1;position:static;margin-bottom:5vh}
  .manifesto{grid-column:1/-1;font-size:clamp(1.8rem,8.4vw,2.6rem);line-height:1.1}
  .beliefs{margin-top:10vh}
  .belief:nth-child(n){grid-column:1/-1;margin-top:0}

  .services__title{grid-column:1/-1;font-size:17.5vw}
  .services__intro{grid-column:1/-1}
  .svc__row{grid-template-columns:minmax(0,1fr) auto;padding:2.4vh 0}
  .svc__name{font-size:clamp(2.1rem,11.5vw,4rem)}
  .svc__row .svc__items{display:none}
  .svc__body{grid-template-columns:1fr;gap:3vh}
  .svc-list:hover .svc__name{color:var(--text)}

  .work__title{font-size:19vw}
  .work__grid{row-gap:10vh}
  .case:nth-child(n){grid-column:1/-1;margin-top:0}
  .case:nth-child(even){grid-column:3/-1}
  .case__cap{grid-template-columns:1fr}
  .case__cat{text-align:start}

  .cs__meta{grid-template-columns:1fr 1fr}
  .cs__body{grid-template-columns:1fr}
  .cs__toc{display:none}
  .cs__hero{height:56vh}
  .chapter__media{--cols:1!important}

  .caps__head{flex-direction:column;align-items:flex-start}
  .caps__aside{align-items:flex-start;text-align:start}
  .caps__stage{height:72svh;min-height:420px;border-radius:20px}
  .cap--xl{font-size:11vw}.cap--l{font-size:9vw}.cap--m{font-size:7.4vw}.cap--s{font-size:6vw}

  .process__pin{height:auto}
  .process__stage{position:relative;height:auto;display:block;padding:14vh var(--gutter) 8vh}
  .process__label{position:static;margin-bottom:6vh}
  .pw{font-size:19.5vw;margin-top:7vh}
  .pd{opacity:1;visibility:visible;transform:none;margin-top:18px}
  .pd__n{margin-bottom:1vh}
  .pd h3{display:none}
  .pd p{max-width:none;font-size:clamp(1.35rem,5.6vw,1.75rem)}

  /* phones: same pinned sideways reel as desktop, frames sized to the screen */
  .social__stage{height:100svh}
  .social__track{gap:8vw}
  .social__intro{flex-basis:80vw}
  .sframe--up,.sframe--down{align-self:center;margin:0}
  .sframe--post .sframe__media{height:min(50svh,100vw)}
  .sframe--story .sframe__media{height:min(60svh,116vw);border-radius:24px}
  .sframe--square .sframe__media{height:min(42svh,80vw)}
  .sframe--web .sframe__media{height:auto;width:84vw}
  .carousel{height:min(34svh,58vw)}
  .carousel .sframe__media + .sframe__media{margin-inline-start:-6vw}
  .social__end{flex-basis:72vw}

  .print__pin{height:180vh}
  .print__lede,.print__aside{grid-column:1/-1}
  .print__aside{margin-top:3vh}
  .obj:nth-child(n){grid-column:1/-1}
  .objects{row-gap:9vh;margin-top:8vh}
  .obj--roll{--ar:4/5}
  .obj--bb{--ar:4/3}
  .bb__lamps{top:-24px}
  .bb__lamps i{width:22px;height:14px;border-width:2px}
  .obj--box{--ar:4/3}
  .obj--pop{--ar:8/7}
  .popup{font-size:2.75cqi}

  .motion__open{height:160vh}
  .print__body{padding-bottom:8vh}
  .motion__intro{grid-column:1/-1}
  .reel:nth-child(n){grid-column:1/-1;margin-top:0}
  .reel--v{grid-column:2/-2!important}
  .reel--s{grid-column:1/9!important}

  .cta{min-height:90svh}
  .cta__bird{width:80vw}
  .cta__l2{font-size:15.5vw;white-space:normal;line-height:.92;max-width:100%}

  .contact__left,.form{grid-column:1/-1}
  .contact__left h2{max-width:none;font-size:clamp(2.4rem,11vw,3.4rem)}
  :is(.contact__left h2,.caps__title,.social__intro h2,.cs__title,.sheet__title,.hero__next p,.belief h3,.cta__l2,.services__intro,.work__note){text-wrap:balance}
  :is(.manifesto,.belief p,.svc__desc,.case__desc,.pd p,.chapter__txt,.print__lede,.motion__intro,.contact__left p,.social__intro p){text-wrap:pretty}
  .footer__col,.footer__brand{grid-column:span 6}
  .footer__brand{grid-column:1/-1}
}

/* ---------- reduced motion ---------- */
.rm .hero__pin{height:100vh}
.rm .hero__next{display:none}
.rm .hero__cam,.rm .bird__float,.rm .bird__sheen,.rm .hero__cue i{animation:none}
.rm .manifesto .mw{opacity:1}
.rm .process__pin{height:auto}
.rm .process__stage{position:relative;height:auto;display:block;padding:14vh var(--gutter) 8vh}
.rm .process__label{position:static;margin-bottom:6vh}
.rm .pw{margin-top:6vh}
.rm .pw__fill{clip-path:none}
.rm .pd{opacity:1;visibility:visible;transform:none;margin-top:18px}
.rm .social__pin{height:auto!important}
.rm .social__stage{position:relative;height:auto;display:block;padding:12vh 0}
.rm .social__track{height:auto;transform:none!important;overflow-x:auto;padding-bottom:24px}
.rm .social__bar{display:none}
.rm .print__pin{height:auto}
.rm .print__stage{position:relative;height:70vh}
.rm .motion__open{height:auto}
.rm .motion__stage{position:relative;height:70vh}
.rm .case__media,.rm .rollup__banner{clip-path:none!important}
.rm .case__img--key{transform:none!important}
.rm .rollup__banner > div{transform:none}
.rm [data-reveal] .mk__i,.rm [data-reveal="rise"]{transform:none!important;opacity:1!important}
.rm .footer__mark .c{transform:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* written voice (was a serif): Myriad Pro Light / Cairo Light */
.manifesto,.svc__desc,.case__desc,.chapter__txt,.pd p,.print__lede,.motion__intro,.social__end,.contact__mail,.menu__mail,.cs__next p{font-weight:300}
.manifesto{font-size:clamp(1.8rem,3.5vw,4rem);line-height:1.12;letter-spacing:-.015em}

/* ==========================================================================
   Language switch (EN / AR)
   ========================================================================== */
.lang{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 5px;border-radius:999px;border:1px solid rgba(242,240,247,.28);direction:ltr;transition:border-color .35s}
.lang__opt{display:grid;place-items:center;height:32px;min-width:38px;padding:0 9px;border-radius:999px;font-family:"Myriad Pro","Helvetica Neue",Arial,sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);transition:color .3s,background-color .4s var(--ease-out)}
.lang__opt:hover{color:var(--text)}
.lang__opt[aria-current]{background:var(--text);color:var(--night);cursor:default}
.nav.is-light .lang{border-color:rgba(30,39,49,.28)}
.nav.is-light .lang__opt{color:var(--ink-muted)}
.nav.is-light .lang__opt:hover{color:var(--ink)}
.nav.is-light .lang__opt[aria-current]{background:var(--ink);color:var(--stock)}
@media (max-width:820px){.lang{height:40px;padding:0 4px}.lang__opt{height:30px;min-width:34px;padding:0 7px}}

/* ==========================================================================
   RTL — mirror only what carries direction
   ========================================================================== */
:root[dir="rtl"]{--dirx:-1}
:root[dir="rtl"] .bird__flip{transform:scaleX(-1)}
:root[dir="rtl"] .pw__fill{clip-path:inset(-10% 0 -10% calc(100% - var(--f,0) * 100%))}
:root[dir="rtl"] .social__bar span,:root[dir="rtl"] .reel__bar span{transform-origin:right}
:root[dir="rtl"] .player__fill{left:auto;right:0;transform-origin:right}
:root[dir="rtl"] .player__head{left:auto;margin-left:0;margin-right:-6px}
:root[dir="rtl"] .toggle[aria-pressed="true"] .toggle__track::after{transform:translateX(-14px)}
:root[dir="rtl"] input[type="email"]{text-align:right}

/* ==========================================================================
   Arabic typography — Cairo for Arabic glyphs; Latin (brand, client
   names, emails) stays in Myriad Pro.
   ========================================================================== */
:root[lang="ar"]{
  --f-sans:"Myriad Pro","Cairo",Tahoma,sans-serif;
  --f-cond:"Myriad Pro Condensed","Cairo",Tahoma,sans-serif;
  --f-serif:var(--f-sans);
}
:root[lang="ar"] body{line-height:1.8}
/* tracking breaks Arabic joining */
:root[lang="ar"] :is(h1,h2,h3,p,span,a,button,li,label,legend,dt,dd,strong,b):not(.footer__mark):not(.footer__mark *){letter-spacing:0!important}
:root[lang="ar"] .mk{padding-top:.08em;margin-top:-.08em;padding-bottom:.3em;margin-bottom:-.3em}

:root[lang="ar"] .hero__word{line-height:1.12;font-weight:700}
:root[lang="ar"] .hero__line{line-height:1.25;font-weight:500}
:root[lang="ar"] .hero__intro{line-height:1.8}
:root[lang="ar"] .manifesto{font-weight:300;font-size:clamp(1.7rem,3.3vw,3.8rem);line-height:1.5}
:root[lang="ar"] .belief h3{line-height:1.45}
:root[lang="ar"] .belief p,:root[lang="ar"] .services__intro,:root[lang="ar"] .work__note,:root[lang="ar"] .social__intro p,:root[lang="ar"] .contact__left p,:root[lang="ar"] .print__aside{line-height:1.85}

:root[lang="ar"] .services__title{line-height:1.2;font-weight:700}
:root[lang="ar"] .svc__name{font-size:clamp(2rem,5.2vw,6rem);line-height:1.35;font-weight:600;transition:transform .9s var(--ease-out),color .45s}
:root[lang="ar"] .svc__desc{font-weight:300;line-height:1.6}

:root[lang="ar"] .work__title{line-height:1.12}
:root[lang="ar"] .work__title .b{font-weight:300}
:root[lang="ar"] .case__title{line-height:1.4}
:root[lang="ar"] .case__desc{font-weight:300;line-height:1.7;font-size:clamp(1.05rem,1.2vw,1.25rem)}
:root[lang="ar"] .cs__title{line-height:1.2;font-weight:700}
:root[lang="ar"] .chapter__txt{font-weight:300;line-height:1.55;font-size:clamp(1.5rem,2.4vw,2.6rem)}
:root[lang="ar"] .cs__next strong{line-height:1.25;font-weight:700}

:root[lang="ar"] .caps__title{line-height:1.3;font-weight:600}
:root[lang="ar"] .cap{height:1.62em;padding:0 .62em;font-weight:600}
:root[lang="ar"] .cap--dot,:root[lang="ar"] .cap--ring,:root[lang="ar"] .cap--eye{width:1.62em;padding:0}

:root[lang="ar"] .pw{font-size:min(9.6vw,12.4vh);line-height:1.26;font-weight:700}
:root[lang="ar"] .pw__stroke{-webkit-text-stroke:0;color:rgba(242,240,247,.12)}
:root[lang="ar"] .pw__nib{top:.32em}
:root[lang="ar"] .pd p{font-weight:300;line-height:1.6}

:root[lang="ar"] .social__intro h2{line-height:1.25;font-weight:700}
:root[lang="ar"] .social__end{font-weight:300;line-height:1.5}
:root[lang="ar"] .sheet__title{line-height:1.2;font-weight:700}
:root[lang="ar"] .print__lede{font-weight:300;line-height:1.55}
:root[lang="ar"] .lbox h2{line-height:1.25;font-weight:700}
:root[lang="ar"] .lbox h2 span:last-child{font-weight:300}
:root[lang="ar"] .motion__intro{font-weight:300;line-height:1.6}

:root[lang="ar"] .cta__l1{line-height:1.5}
:root[lang="ar"] .cta__l2{line-height:1.3;font-weight:700}
:root[lang="ar"] .contact__left h2{line-height:1.25;font-weight:600}

:root[lang="ar"] .menu__t{line-height:1.4;font-size:clamp(1.9rem,5.4vh,4.4rem);font-weight:600;transition:transform .7s var(--ease-out),color .3s}
:root[lang="ar"] .field input,:root[lang="ar"] .field textarea{font-size:1.15rem}
:root[lang="ar"] .chip{font-size:14px}
@media (max-width:820px){
  :root[lang="ar"] .hero__word{font-size:30vw}
  :root[lang="ar"] .hero__line{font-size:9.6vw}
  :root[lang="ar"] .manifesto{font-size:clamp(1.55rem,7.2vw,2.3rem)}
  :root[lang="ar"] .svc__name{font-size:clamp(1.8rem,9vw,3.2rem)}
  :root[lang="ar"] .pw{font-size:16vw}
  :root[lang="ar"] .menu__t{font-size:clamp(1.7rem,8.4vw,2.8rem)}
  :root[lang="ar"] .cta__l2{font-size:15vw;line-height:1.3}
}

/* Tablet portrait: keep the headline clear of the peacock */
@media (min-width:600px) and (max-width:820px){
  .bird{width:112vw;inset-inline-end:-8vw}
  .hero__word{top:calc(13svh + 68vw);font-size:29vw}
  .hero__line{top:calc(13svh + 95vw)}
  :root[lang="ar"] .hero__word{font-size:21vw;top:calc(13svh + 64vw)}
}

/* Latin artwork, the brand wordmark and media timecodes always read left-to-right */
:root[dir="rtl"] svg,:root[dir="rtl"] canvas,:root[dir="rtl"] .bb__face,:root[dir="rtl"] .footer__mark{direction:ltr}
:root[dir="rtl"] .footer__mark{text-align:right}
:root[dir="rtl"] .reel__tc,:root[dir="rtl"] #playerTime,:root[dir="rtl"] #playerDur{direction:ltr;unicode-bidi:isolate}
:root[lang="ar"] .hero__word{font-size:min(22vw,40vh);line-height:1.25}
/* the hamza rises above the line box: grow the letter mask upward so it isn't clipped (glyphs don't move) */
:root[lang="ar"] .hero__word .hm{padding-top:.12em;margin-top:-.12em}
:root[lang="ar"] .caps__title{max-width:16ch}
@media (max-width:820px){
  :root[lang="ar"] .hero__word{font-size:27vw;top:calc(13svh + 80vw)}
  :root[lang="ar"] .hero__line{top:calc(13svh + 114vw)}
  .intro__brand{font-size:36px}
}
/* phones: the peacock (drawn above the headline) reaches ~9.6vw into the Arabic word, so drop word + line below it */
@media (max-width:599px){
  :root[lang="ar"] .hero__word{top:calc(13svh + 92vw)}
  :root[lang="ar"] .hero__line{top:calc(13svh + 126vw)}
}
/* short phones (iPhone SE and similar): a smaller peacock keeps everything on one screen */
@media (max-width:599px) and (max-height:700px){
  .bird{width:116vw;inset-inline-end:-10vw;top:12svh}
  .hero__word{top:calc(12svh + 70vw)}
  .hero__line{top:calc(12svh + 100vw)}
  :root[lang="ar"] .hero__word{top:calc(12svh + 82vw)}
  :root[lang="ar"] .hero__line{top:calc(12svh + 115vw)}
}

/* ---------- floating contact buttons (inquiry form, email, WhatsApp) ---------- */
.fab{--fab:54px;--tip-x:8px;position:fixed;z-index:67;inset-inline-end:calc(env(safe-area-inset-right,0px) + clamp(14px,1.6vw,26px));bottom:calc(env(safe-area-inset-bottom,0px) + clamp(14px,2.6vh,26px));display:flex;flex-direction:column;align-items:center;gap:12px;transition:opacity .45s,transform .6s var(--ease-out),visibility 0s}
:root[dir="rtl"] .fab{--tip-x:-8px}
.fab__btn{position:relative;display:grid;place-items:center;width:var(--fab);height:var(--fab);border-radius:50%;box-shadow:0 10px 28px rgba(5,4,14,.42),0 2px 6px rgba(5,4,14,.28);transition:transform .35s var(--ease-out),background-color .3s,color .3s,border-color .3s}
.fab__btn[hidden]{display:none}
.fab__btn svg{display:block;width:44%;height:44%}
.fab__btn--wa svg{width:52%;height:52%}
.fab__btn:hover{transform:translateY(-2px) scale(1.05)}
.fab__btn:focus-visible{outline-offset:3px;border-radius:50%}
.fab__btn--form{background:var(--gold);color:var(--ink)}
.fab__btn--mail{background:rgba(12,9,32,.78);color:var(--text);border:1px solid rgba(242,240,247,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fab__btn--mail:hover{background:var(--text);color:var(--night);border-color:var(--text)}
.fab__btn--wa{background:#25D366;color:#fff}
.fab__tip{position:absolute;top:50%;inset-inline-end:calc(100% + 12px);padding:7px 13px;border-radius:999px;background:rgba(12,9,32,.92);border:1px solid var(--faint);color:var(--text);font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(var(--tip-x),-50%);transition:opacity .25s,transform .35s var(--ease-out)}
.fab__btn:hover .fab__tip,.fab__btn:focus-visible .fab__tip{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.fab__tip{display:none}}
/* out of the way: during the intro, behind full-screen layers, and where the page already shows contact options */
.is-intro .fab,.is-locked .fab,.fab.is-away{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(18px);transition:opacity .3s,transform .4s var(--ease-out),visibility 0s .4s}
@media (max-width:820px){.fab{--fab:50px;gap:10px}}
@media (max-width:599px){.fab{--fab:46px}}
.rm .fab,.rm .fab__btn,.rm .fab__tip{transition:none}

/* ---------- client inquiry form (modal) ---------- */
.qf{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);visibility:hidden;opacity:0;transition:opacity .4s,visibility 0s .4s}
.qf.is-open{visibility:visible;opacity:1;transition:opacity .4s}
.qf__backdrop{position:absolute;inset:0;background:rgba(5,4,14,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.qf__panel{position:relative;width:min(620px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#0C0920;border:1px solid var(--faint);border-radius:24px;padding:clamp(24px,4vw,44px);box-shadow:0 30px 90px rgba(0,0,0,.55);transform:translateY(24px) scale(.98);transition:transform .6s var(--ease-out)}
.qf.is-open .qf__panel{transform:none}
.qf__close{position:absolute;top:16px;inset-inline-end:16px;height:38px}
.qf__title{font-family:var(--f-cond);font-weight:800;text-transform:uppercase;font-size:clamp(2rem,4.2vw,3.1rem);line-height:.92;letter-spacing:-.01em;padding-inline-end:96px;margin-bottom:10px}
.qf__text{color:var(--muted);font-size:15px;margin-bottom:6px}
.qf__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
.qf .field{padding:14px 0 6px}
.qf .field input,.qf .field textarea,.qf .field select{font-size:1.1rem}
.qf .field textarea{min-height:84px}
.qf .opt{opacity:.6}
.qf .field__err{min-height:0;font-size:13px;color:#FF9DB4}
.qf .field__err:not(:empty){padding-top:4px}
.field select{width:100%;background:none;border:0;color:var(--text);font:inherit;font-size:1.1rem;padding:8px 26px 6px 0;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23A8A2C2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:12px 8px;background-position:right 2px center;cursor:pointer}
:root[dir="rtl"] .field select{padding:8px 0 6px 26px;background-position:left 2px center}
.field select option{background:#0C0920;color:var(--text)}
.has-cursor .field select{cursor:pointer!important}
.qf__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:22px}
.qf__send{gap:10px}
.qf__send[disabled]{opacity:.75;cursor:progress}
.qf__spin{display:none;width:16px;height:16px;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:qfspin .8s linear infinite}
.qf.is-busy .qf__spin{display:inline-block}
@keyframes qfspin{to{transform:rotate(360deg)}}
.qf__msg{flex:1 1 220px;font-size:14px;color:var(--muted)}
.qf__msg.is-err{color:#FF9DB4}
.qf__done{text-align:center;padding:24px 0 8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.qf__done[hidden]{display:none}
.qf__done .qf__title{padding:0;margin:0}
.qf__done .qf__text{max-width:34ch;margin-bottom:10px}
.qf__check{display:block;width:64px;height:64px;color:var(--gold)}
.qf__check svg{width:100%;height:100%}
.qf__done .qf__title:focus{outline:none}
@media (max-width:599px){
  .qf{padding:calc(env(safe-area-inset-top,0px) + 10px) 10px calc(env(safe-area-inset-bottom,0px) + 10px)}
  .qf__panel{border-radius:20px;padding:24px 20px}
  .qf__row{grid-template-columns:minmax(0,1fr)}
  .qf__title{font-size:2.1rem}
  .qf__send{width:100%;justify-content:center}
}
:root[lang="ar"] .qf__title{line-height:1.3;font-weight:700}
:root[lang="ar"] .qf .field input,:root[lang="ar"] .qf .field textarea,:root[lang="ar"] .field select{font-size:1.05rem}
.rm .qf,.rm .qf__panel{transition:none}

/* ---------- email options (beside any email link) ---------- */
.mailbox{position:fixed;left:0;top:0;z-index:69;width:min(320px,calc(100vw - 24px));padding:18px 18px 16px;border-radius:18px;background:#0C0920;border:1px solid var(--faint);box-shadow:0 18px 50px rgba(0,0,0,.5);color:var(--text)}
.mailbox[hidden]{display:none}
.mailbox.is-in{animation:mbIn .35s var(--ease-out)}
@keyframes mbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mailbox__x{position:absolute;top:10px;inset-inline-end:10px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--muted);transition:background-color .25s,color .25s}
.mailbox__x:hover{background:rgba(242,240,247,.1);color:var(--text)}
.mailbox__x svg{width:14px;height:14px}
.mailbox__t{font-size:13px;color:var(--muted);padding-inline-end:30px}
.mailbox__addr{font-size:16px;font-weight:600;margin:2px 0 10px;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
:root[dir="rtl"] .mailbox__addr{text-align:right}
.mailbox__hint{font-size:13px;color:var(--muted);line-height:1.45;margin-bottom:12px}
.mailbox__acts{display:flex;flex-wrap:wrap;gap:8px}
.mailbox .chip{display:inline-flex;align-items:center;height:36px;font-size:13px}
.mailbox .chip:hover{background:var(--text);color:var(--night);border-color:var(--text)}
.mailbox .chip[data-mb="copy"]{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.rm .mailbox.is-in{animation:none}
img,
video {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}