/* Mad Genius — 3D homepage. Black, red, white. Instrument Serif Italic (display) + DM Sans (text).
   Every colour is solid: secondary text uses mid-tones picked per room, never alpha, so nothing reads
   as see-through. Rooms: .tone-white / .tone-black / .tone-red set --bg --fg --fg2 --line --accent. */
@font-face{font-family:"MG Serif";src:url("/brand/hero/fonts/instrument-serif-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:block}
@font-face{font-family:"MG Serif";src:url("/brand/hero/fonts/instrument-serif-roman.woff2") format("woff2");font-style:normal;font-weight:400;font-display:block}
@font-face{font-family:"MG Sans";src:url("/brand/hero/fonts/dm-sans-latin.woff2") format("woff2");font-weight:100 1000;font-display:block}
@font-face{font-family:"MG Serif Fallback";src:local("Georgia Italic"),local("Georgia-Italic");font-style:italic;size-adjust:71.8%;ascent-override:137.8%;descent-override:43.2%;line-gap-override:0%}
@font-face{font-family:"MG Sans Fallback";src:local("Arial"),local("ArialMT");size-adjust:91.5%;ascent-override:108.4%;descent-override:33.9%;line-gap-override:0%}

:root{
  --white:#FFFCFB;--black:#0B0B0B;--ink:#121212;--red:#E9281F;--red-deep:#9E120B;
  --grey-w:#5C5856;      /* secondary text on white: 6.9:1 */
  --grey-k:#A9A4A1;      /* secondary text on black: 8.1:1 */
  --line-w:#E2DCD9;--line-k:#2B2827;--line-r:#C21D15;
  --serif:"MG Serif","MG Serif Fallback",Georgia,serif;--sans:"MG Sans","MG Sans Fallback",system-ui,sans-serif;
  --gut:40px;--ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.56,.64,1);--io:cubic-bezier(.76,0,.24,1);
  --r-card:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--ink);color:var(--white);padding:10px 16px;border-radius:999px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.tone-red :focus-visible{outline-color:var(--white)}

/* ---------- rooms ---------- */
.tone-white{--bg:var(--white);--fg:var(--ink);--fg2:var(--grey-w);--line:var(--line-w);--accent:var(--red)}
.tone-black{--bg:var(--black);--fg:var(--white);--fg2:var(--grey-k);--line:var(--line-k);--accent:var(--red)}
.tone-red{--bg:var(--red);--fg:var(--white);--fg2:#000;--line:var(--line-r);--accent:#000}   /* small text on red is pure black: 4.8:1 (ink is only 4.3:1) */

/* ---------- type ---------- */
.eyebrow{font:italic 400 clamp(16px,1.4vw,20px)/1 var(--serif);text-transform:uppercase}
.h-hero{font:italic 400 clamp(34px,5.2vw,80px)/.92 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
.h-hero>span{display:inline}
.h-section{font:italic 400 clamp(56px,9.5vw,140px)/.9 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
.h-head{font:italic 400 clamp(40px,6.4vw,96px)/.95 var(--serif);letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance}
.label,.corner{font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.red,.stop{color:var(--red)}
.tone-red .red{color:var(--white)}

/* ---------- glossy objects (CSS): sphere, ring, pill ---------- */
.bub{position:absolute;width:var(--s,64px);height:var(--s,64px);font-size:calc(var(--s,64px) / 4);pointer-events:none;translate:var(--px,0px) var(--py,0px);transition:translate .9s var(--ease);
  animation:bub-float calc(6s + var(--z,1) * 1.3s) ease-in-out infinite;animation-delay:var(--d,0s)}
.bub i{display:block;width:100%;height:100%;border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%,#fff 0 4%,rgba(255,255,255,.75) 7%,rgba(255,255,255,0) 22%),
    radial-gradient(circle at 70% 82%,rgba(255,255,255,.32) 0,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 42% 38%,var(--c1) 0 42%,var(--c2) 100%);
  box-shadow:inset -.12em -.16em .4em rgba(0,0,0,.28),0 .9em 1.2em -.7em rgba(0,0,0,.45);
  animation:bub-squish calc(2.4s + var(--z,1) * .4s) ease-in-out infinite;animation-delay:var(--d,0s)}
.bub.r{--c1:#F2392F;--c2:#8A0E08}.bub.k{--c1:#363231;--c2:#000}.bub.w{--c1:#FFFFFF;--c2:#C9C2BE}
.bub.ring i{-webkit-mask:radial-gradient(circle,transparent 0 36%,#000 38%);mask:radial-gradient(circle,transparent 0 36%,#000 38%)}
.bub.cap{width:calc(var(--s,64px) * 1.9)}.bub.cap i{border-radius:999px}   /* capsule (not "pill": that is the nav) */
@keyframes bub-float{0%,100%{transform:translate3d(0,0,0) rotate(0)}33%{transform:translate3d(.06em,-.5em,0) rotate(6deg)}66%{transform:translate3d(-.05em,.3em,0) rotate(-4deg)}}
@keyframes bub-squish{0%,100%{transform:scale(1,1)}22%{transform:scale(1.07,.93)}44%{transform:scale(.95,1.05)}66%{transform:scale(1.02,.98)}}

/* glossy icon buttons */
.gbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;flex:none;color:var(--white);
  background:radial-gradient(circle at 32% 26%,#fff 0 4%,rgba(255,255,255,.6) 7%,rgba(255,255,255,0) 24%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#930F09 100%);
  box-shadow:inset -3px -5px 10px rgba(0,0,0,.3),0 8px 14px -8px rgba(0,0,0,.55);transition:transform .45s var(--spring)}
.gbtn svg{width:46%;height:46%}
.gbtn.mini{width:30px;height:30px}
a:hover>.gbtn,a:focus-visible>.gbtn,button.gbtn:hover{transform:scale(1.12) rotate(-8deg)}
.tone-red .gbtn{background:radial-gradient(circle at 32% 26%,#fff 0 4%,rgba(255,255,255,.5) 7%,rgba(255,255,255,0) 24%),radial-gradient(circle at 42% 38%,#3a3634 0 45%,#000 100%)}
.btn{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 9px 0 22px;border-radius:999px;background:var(--ink);color:var(--white);font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .3s ease}
.btn:hover{background:#000}

/* ---------- the pill ---------- */
.pill{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:30px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--ink);color:var(--white);box-shadow:0 0 0 1px #2B2827,0 10px 26px rgba(0,0,0,.28)}
.pill-mark{font:italic 400 18px/1 var(--serif);letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.pill-links{display:flex;gap:28px}
.pill-links a{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:#BDB8B5;transition:color .2s ease}
.pill-links a:hover,.pill-links a:focus-visible{color:var(--white)}
/* the menu button is flat: a plain red disc with two clean lines (the glossy sphere was retired 2026-11-06) */
.pill-menu{border:0;cursor:pointer;padding:0;gap:6px;align-content:center;background:var(--red);box-shadow:none;transition:background .3s ease,transform .3s ease}
button.pill-menu:hover{background:#F23A31;transform:scale(1.06) rotate(0)}
.pill-menu i{display:block;width:18px;height:2px;border-radius:2px;background:var(--white);transition:transform .45s var(--spring)}
.menu-open .pill-menu i:first-of-type{transform:translateY(4px) rotate(45deg)}
.menu-open .pill-menu i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:767px){.pill{gap:18px;padding-left:18px}.pill-links{display:none}}

/* ---------- menu: black room, glossy field, circle reveal from the button ---------- */
.menu{position:fixed;inset:0;z-index:35;background:var(--black);color:var(--white);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:40px;padding:120px var(--gut) 56px;
  clip-path:circle(0px at var(--mx,calc(100% - 60px)) var(--my,48px));visibility:hidden;transition:clip-path .75s var(--io),visibility 0s .75s;overflow:hidden}
html.menu-open .menu{clip-path:circle(160vmax at var(--mx,calc(100% - 60px)) var(--my,48px));visibility:visible;transition:clip-path .9s var(--io),visibility 0s}
html.menu-open{overflow:hidden}
.menu-field{position:absolute;inset:0;pointer-events:none}
.menu-nav{position:relative;display:flex;flex-direction:column;gap:.1em;font-size:clamp(44px,7.2vw,104px)}
.menu-nav a{display:flex;align-items:center;gap:.22em;width:max-content;max-width:100%;font:italic 400 1em/1.12 var(--serif);padding:.02em 0;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;color:var(--white);
  transform:translate3d(0,60%,0);opacity:0;transition:transform .5s var(--ease),opacity .3s ease,color .25s ease}
html.menu-open .menu-nav a{transform:none;opacity:1;transition:transform .9s var(--ease) calc(.28s + var(--i) * .06s),opacity .5s ease calc(.28s + var(--i) * .06s),color .25s ease}
.menu-nav a::before{content:"";flex:none;width:.42em;height:.42em;border-radius:50%;transform:scale(0);transition:transform .5s var(--spring);
  background:radial-gradient(circle at 32% 26%,#fff 0 5%,rgba(255,255,255,.6) 9%,rgba(255,255,255,0) 26%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
.menu-nav a[aria-current]::before{transform:scale(.45)}
.menu-nav a:hover::before,.menu-nav a:focus-visible::before{transform:scale(1)}
.menu-nav a:hover,.menu-nav a:focus-visible{color:var(--red)}
.menu-nav:hover a:not(:hover){color:#5A5654}
.menu-nav a span{display:inline-block;transition:transform .5s var(--ease)}
.menu-nav a:hover span{transform:translateX(.08em) skewX(-4deg)}
.menu-side{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px;border-radius:24px;background:#151413;box-shadow:0 0 0 1px #2B2827;
  transform:translate3d(0,30px,0);opacity:0;transition:transform .6s var(--ease),opacity .3s ease}
html.menu-open .menu-side{transform:none;opacity:1;transition:transform .9s var(--ease) .5s,opacity .5s ease .5s}
.menu-side .label{color:var(--grey-k)}.menu-side .label:not(:first-child){margin-top:18px}
.menu-mail{font:italic 400 clamp(22px,2.2vw,32px)/1.1 var(--serif);text-transform:uppercase;text-decoration:none;border-bottom:1px solid #3A3634;padding-bottom:4px;overflow-wrap:anywhere}
.menu-mail:hover{color:var(--red);border-color:var(--red)}
.menu-social{display:inline-flex;align-items:center;gap:12px;font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.menu-meta{font:500 13px/1.5 var(--sans);color:var(--grey-k)}
@media (max-width:860px){.menu{grid-template-columns:1fr;align-content:center;gap:28px;padding:110px 20px 32px}.menu-side{padding:20px;gap:6px}.menu-side .label:not(:first-child){margin-top:10px}}

/* ---------- world layers ---------- */
.gl{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
html.is3d .gl{opacity:1}
main,.foot{position:relative;z-index:1}
.curtain{position:fixed;inset:0;z-index:50;background:var(--red);transform:translate3d(0,0,0);display:none}
html.js.motion .curtain{display:block}
html.open .curtain{transform:translate3d(0,-101%,0);transition:transform 1.05s var(--io)}

/* ---------- chapters ---------- */
.ch{position:relative;background:var(--bg);color:var(--fg)}
.stick{position:relative;padding:140px var(--gut) 96px;min-height:100vh}
.corner{position:absolute;margin:0;z-index:2}
.c-tl{top:104px;left:var(--gut)}.c-tr{top:104px;right:var(--gut);text-align:right}
.c-bl{bottom:24px;left:var(--gut)}.c-br{bottom:24px;right:var(--gut);text-align:right}
/* pinned chapters: a scroll span with a sticky 100vh stage; flow chapters keep natural height */
html.want3d .ch[data-len]{height:calc(var(--len,200) * 1vh)}
html.want3d .ch[data-len] .stick{position:sticky;top:0;height:100vh;min-height:0;overflow:hidden;padding:0}
html.want3d .f2d{display:none!important}
html.is3d .ch[data-len]{background:transparent}   /* pinned rooms: the canvas paints the room and its glossy field; flow rooms (dense copy) stay solid */
.ch.flow{overflow:clip}

/* reveals (they always end fully opaque) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .18em .22em .08em;margin:-.16em -.18em -.22em -.08em}
.w>span{display:inline-block;transform:translateY(145%);transition:transform 1.05s var(--ease)}
.ch.in .w>span{transform:none}
.ch.in .w:nth-child(2)>span{transition-delay:.05s}.ch.in .w:nth-child(3)>span{transition-delay:.1s}.ch.in .w:nth-child(4)>span{transition-delay:.15s}
.ch.in .w:nth-child(5)>span{transition-delay:.2s}.ch.in .w:nth-child(6)>span{transition-delay:.25s}.ch.in .w:nth-child(7)>span{transition-delay:.3s}
html.reduce .w>span,html:not(.js) .w>span{transform:none;transition:none}
html.js.motion .lcard,html.js.motion .scard,html.js.motion .fact,html.js.motion .proof-shot{translate:0 48px;scale:.97;opacity:0}
html.js.motion .plate{scale:.6;opacity:0}
html.js.motion .plate.in{scale:1;opacity:1;transition:scale 1.1s var(--spring) .25s,opacity .4s ease .25s}
html.js.motion .lcard.in,html.js.motion .scard.in,html.js.motion .fact.in,html.js.motion .proof-shot.in{translate:0 0;scale:1;opacity:1;
  transition:translate 1s var(--spring) calc(var(--i,0) * .07s),scale 1s var(--spring) calc(var(--i,0) * .07s),opacity .5s ease calc(var(--i,0) * .07s)}
.lcard,.scard{--i:0}

/* ---------- hero ---------- */
.ch-hero .stick{display:block;padding:0;min-height:100vh}
.hero-bg{position:absolute;inset:0;background:var(--white);overflow:hidden}
html.is3d .mg2d{visibility:hidden;transition:visibility 0s .6s}   /* the flat MG holds the place until the glass is drawn */
html.is3d .hero-bg{visibility:hidden;transition:visibility 0s .7s}
.mg2d{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(56vw,64vh)}
@media (max-aspect-ratio:9/10){.mg2d{top:36%;width:min(88vw,52vh)}}
.hero-copy{position:absolute;inset:auto 0 9vh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gut);z-index:2}
.hero-copy .eyebrow{margin-bottom:14px}
.hero-sub{margin-top:22px;width:min(430px,100%);height:4.5em;font:500 12px/1.5 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
html.js.motion .hero-copy>*,html.js.motion .ch-hero .corner{opacity:.01;transform:translate3d(0,26px,0)}
html.js.motion.open .hero-copy>*,html.js.motion.open .ch-hero .corner{opacity:1;transform:none;transition:opacity .8s ease,transform 1s var(--ease)}
html.js.motion.open .hero-copy .eyebrow{transition-delay:.3s}html.js.motion.open .hero-copy .h-hero{transition-delay:.38s}
html.js.motion.open .hero-copy .hero-sub{transition-delay:.46s}html.js.motion.open .ch-hero .corner{transition-delay:.55s}
@media (max-aspect-ratio:9/10){.h-hero{font-size:clamp(30px,8.4vw,46px)}.h-hero>span{display:block}.hero-copy{bottom:11vh;padding:0 20px}.hero-sub{width:min(310px,100%);font-size:11px}}

/* ---------- why ---------- */
.why-copy{max-width:1100px;margin:0 auto;text-align:center}
.why-copy .label{margin-top:28px}
.why-logos{max-width:1200px;margin:64px auto 0;padding:22px 0 26px;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.why-logos>.label{text-align:center;color:#857E7B;margin-bottom:22px}
.logo-strip{display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-strip ul{display:flex;align-items:center;gap:72px;flex:none;padding:0 36px;margin:0;list-style:none;animation:drift 46s linear infinite}
.logo-strip li{flex:none;display:flex;align-items:center;height:48px}
.logo-strip a{display:block;opacity:.7;transition:opacity .3s ease}
.logo-strip a:hover,.logo-strip a:focus-visible{opacity:1}
.logo-strip img{display:block;width:auto;height:27px;filter:brightness(0) invert(1)}
.logo-strip img[data-square]{height:44px}
@keyframes drift{to{transform:translate3d(-100%,0,0)}}
.why-logos:hover .logo-strip ul{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.logo-strip ul{animation:none}.logo-strip ul[aria-hidden]{display:none}.logo-strip{flex-wrap:wrap;justify-content:center;mask-image:none;-webkit-mask-image:none}.logo-strip ul{flex-wrap:wrap;justify-content:center;gap:40px}}
.why-tags{display:none}
.why-tags .dot,.reel-sound .dot{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 8%,rgba(255,255,255,0) 30%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
html.want3d .why-copy{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);width:min(1100px,calc(100% - 2*var(--gut)))}
html.want3d .why-logos{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:min(1200px,calc(100% - 2*var(--gut)));margin:0}
html.want3d .why-tags{display:flex;position:absolute;left:0;right:0;bottom:56px;justify-content:center;gap:40px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.why-tags li{display:flex;align-items:center;gap:10px}

/* ---------- services ---------- */
.svc-head .label{margin-top:20px;max-width:420px}
.svc-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
.svc img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card)}
.svc-t{margin-top:14px;font:italic 400 clamp(24px,2.4vw,36px)/1 var(--serif);text-transform:uppercase}
html.want3d .svc-head{position:absolute;left:var(--gut);top:140px}
html.want3d .svc-list{position:absolute;left:var(--gut);bottom:72px;display:flex;flex-direction:column;gap:6px;margin:0}
html.want3d .svc-t{margin:0;font-size:clamp(28px,3.4vw,52px);color:#857E7B;transition:color .4s ease,transform .6s var(--spring);transform-origin:left center}
html.want3d .svc.on .svc-t{color:var(--fg);transform:translateX(14px)}
html.want3d .svc.on .svc-t::before{content:"";display:inline-block;width:.38em;height:.38em;margin-right:.25em;border-radius:50%;vertical-align:.12em;background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,0) 28%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
@media (max-width:767px){.svc-list{grid-template-columns:1fr 1fr}}

/* ---------- proof: the red room ---------- */
.ch-proof .stick{display:flex;align-items:center;padding-top:150px;padding-bottom:120px}
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,88px);align-items:center;width:100%}
.proof-line{margin-top:28px;font:italic 400 clamp(24px,2.3vw,34px)/1.12 var(--serif);text-transform:uppercase;max-width:620px}
.proof-copy .label{margin-top:24px;max-width:500px}
.proof-copy .btn{margin-top:32px}
.proof-stage{position:relative;aspect-ratio:6/5;perspective:1400px}
.proof-shot{position:absolute;left:0;top:8%;width:84%;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:0 40px 70px -30px rgba(60,0,0,.65);
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.proof-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.chrome{display:flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#F1ECE9;border-bottom:1px solid #E1DAD6}
.chrome i{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 10%,rgba(255,255,255,0) 40%),#D9D2CE}
.chrome i:first-child{background:radial-gradient(circle at 35% 30%,#fff 0 10%,rgba(255,255,255,0) 40%),var(--red)}
.chrome span{margin-left:10px;font:500 11px/1 var(--sans);color:#6B6461;letter-spacing:.02em}
.plate{position:absolute;display:flex;flex-direction:column;justify-content:space-between;border-radius:22px;padding:22px;width:36%;aspect-ratio:4/5;
  transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg)) translateZ(60px);box-shadow:0 34px 60px -26px rgba(40,0,0,.7)}
.plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 34%)}
.plate img{width:70%;height:auto;margin:auto;object-fit:contain}
.plate figcaption{display:flex;flex-direction:column;gap:4px}
.plate-n{font:italic 400 clamp(20px,1.9vw,28px)/1 var(--serif);text-transform:uppercase}
.plate-qd{right:0;top:-2%;background:var(--white);color:var(--ink)}
.plate-qd .label{color:var(--grey-w)}
.plate-aar{right:18%;bottom:-8%;background:var(--black);color:var(--white)}
.plate-aar .label{color:var(--grey-k)}
.plate-aar img{filter:brightness(0) invert(1);width:60%}            /* the emblem, reversed out to white on black */
.plate.in{animation:plate-bob 7s ease-in-out infinite 1.2s}
.plate-aar.in{animation-delay:2.4s}
@keyframes plate-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.proof-stage .bub{z-index:3}
@media (max-width:900px){.proof-grid{grid-template-columns:1fr}.proof-stage{margin:8px 0 40px}.ch-proof .stick{padding-top:130px}}

/* ---------- work: two columns ---------- */
.ch-work .stick{padding-top:150px;padding-bottom:120px}
.work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.work-head .label{max-width:360px}
.work-cols{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(28px,3.4vw,56px);margin-top:64px;align-items:start}
.wcol-head{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:6px 18px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.wcol-head .label{grid-column:1/-1;color:#FF6B62}
.wcol-t{font:italic 400 clamp(30px,3.2vw,48px)/.95 var(--serif);text-transform:uppercase;letter-spacing:-.02em}
.wcol-n{justify-self:end;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);text-align:right}
.wcol-r .wcol-head{border-bottom-color:var(--red)}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 18px}
.lcard.feat{grid-column:span 2;grid-row:span 2}
.lcard a{position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none;color:var(--fg);height:100%}
.lshot{position:relative;border-radius:14px;overflow:hidden;background:#1A1817;box-shadow:0 0 0 1px #2B2827,0 24px 40px -26px rgba(0,0,0,.9);transition:transform .6s var(--spring),box-shadow .4s ease}
.lshot .chrome{height:22px;padding:0 9px;gap:5px;background:#1C1A19;border-bottom:1px solid #2B2827}
.lshot .chrome i{width:7px;height:7px;background:radial-gradient(circle at 35% 30%,#fff 0 10%,rgba(255,255,255,0) 40%),#4A4543}
.lshot .chrome i:first-child{background:radial-gradient(circle at 35% 30%,#fff 0 10%,rgba(255,255,255,0) 40%),var(--red)}
.lshot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;transition:transform 1.1s var(--ease)}
.lcard.feat .lshot{flex:1;display:flex;flex-direction:column}.lcard.feat .lshot img{flex:1;min-height:0;aspect-ratio:auto;height:100%}
.lcard a:hover .lshot,.lcard a:focus-visible .lshot{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 0 0 1px var(--red),0 34px 50px -28px rgba(233,40,31,.55)}
.lcard a:hover .lshot img{transform:scale(1.045)}
.lshot.tile{display:grid;grid-template-columns:100%;place-items:center;aspect-ratio:16/11.4;background:radial-gradient(120% 90% at 30% 20%,#2A1210 0,#120C0B 55%,#0B0B0B 100%)}
.tile-logo{width:62%;height:auto;filter:brightness(0) invert(1)}
.tile-name{font:italic 400 clamp(30px,3vw,46px)/1 var(--serif);text-transform:uppercase;color:var(--white);letter-spacing:-.02em}
.tile-note{position:absolute;left:12px;bottom:10px;font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.lmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding-right:40px}
.lname{font:italic 400 clamp(20px,1.7vw,26px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.01em;width:100%;transition:color .25s ease}
.lcard a:hover .lname{color:var(--red)}
.lsub{font:600 10.5px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 9px;border-radius:999px;background:#2A1311;color:#FF8A82;font:600 10px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.6)}}
.lcard .go{position:absolute;right:0;bottom:0;transform:scale(.6);opacity:0;transition:transform .5s var(--spring),opacity .25s ease}
.lcard a:hover .go,.lcard a:focus-visible .go{transform:none;opacity:1}
.lcard.feat .lname{font-size:clamp(28px,2.6vw,42px)}
.sgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
.sshot{position:relative;border-radius:var(--r-card);overflow:hidden;background:#1A1817}
.sshot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.scard:hover .sshot img{transform:scale(1.06) rotate(.6deg)}
.ai-badge{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:700 11px/1 var(--sans);letter-spacing:.04em;color:var(--white);
  background:radial-gradient(circle at 32% 26%,#fff 0 4%,rgba(255,255,255,.55) 8%,rgba(255,255,255,0) 26%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%);box-shadow:0 6px 12px -6px rgba(0,0,0,.6);
  animation:bub-squish 3s ease-in-out infinite;animation-delay:calc(var(--i) * -.4s)}
.scard figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:10px;align-items:baseline}
.sname{font:italic 400 clamp(17px,1.35vw,21px)/1.05 var(--serif);text-transform:uppercase}
.ssub{font:600 10px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}
@media (max-width:1100px){.work-cols{grid-template-columns:1fr;gap:72px}.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lcard.feat{grid-column:1/-1;grid-row:auto}.lcard.feat .lshot img{aspect-ratio:16/10;height:auto}.sgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.lgrid{gap:24px 12px}.sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lmeta{padding-right:0}.lcard .go{display:none}.lname{font-size:18px}.wcol-head{grid-template-columns:1fr}.wcol-n{justify-self:start;text-align:left}.scard figcaption{flex-direction:column;gap:2px}}

/* ---------- facts: the flag arc ---------- */
.ch-facts .stick{padding-top:150px;padding-bottom:110px}
.ch-facts .h-head{max-width:980px}
.arc{position:relative;height:clamp(230px,24vw,330px);margin:44px calc(-1 * var(--gut)) 0}
.arc-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc-line path{fill:none;stroke:var(--red);stroke-width:1.5;stroke-dasharray:2 8;stroke-linecap:round}
.arc-flags{position:absolute;inset:0}
.arc-flags li{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;margin-left:-55px;margin-top:-34px;will-change:transform}
html:not(.arcjs) .arc-flags{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 8px;padding:0 var(--gut)}
html:not(.arcjs) .arc-flags li{position:relative;margin:0}
html:not(.arcjs) .arc-line{display:none}
html:not(.arcjs) .arc{height:auto}
.flagb{position:relative;display:block;width:68px;height:68px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--white),0 16px 24px -12px rgba(0,0,0,.45);transition:transform .5s var(--spring)}
.flagb img{width:100%;height:100%;object-fit:cover}
.flagb::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 24%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 13%,rgba(255,255,255,0) 30%),radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%)}
.arc-flags li:hover .flagb{transform:scale(1.18) rotate(-6deg)}
.flagn{font:600 10.5px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;background:var(--white);padding:5px 9px;border-radius:999px;box-shadow:0 0 0 1px var(--line-w)}
/* figures as a ledger, not boxes: hairlines, a red tick, the number set like a headline */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--ln,rgba(11,11,11,.14))}
.tone-black .facts,.tone-black .fact{--ln:rgba(255,252,251,.16)}
.tone-red .facts,.tone-red .fact{--ln:rgba(0,0,0,.26)}
.fact{position:relative;padding:34px 32px 38px 0;border-bottom:1px solid var(--ln,rgba(11,11,11,.14));background:none;color:inherit;border-radius:0}
.fact+.fact{padding-left:32px;border-left:1px solid var(--ln,rgba(11,11,11,.14))}
.fact dt{display:flex;align-items:center;gap:12px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.fact dt::before{content:"";width:22px;height:2px;background:var(--red);flex:none}
.tone-red .fact dt{color:#000}.tone-red .fact dt::before{background:#000}
.fact .fig{font:italic 400 clamp(72px,8.4vw,136px)/.9 var(--serif);letter-spacing:-.035em;margin:22px 0 14px;color:var(--red);font-variant-numeric:tabular-nums}
.tone-red .fact .fig{color:var(--white)}
.fact .fl{font:italic 400 clamp(19px,1.5vw,24px)/1.18 var(--serif);text-transform:uppercase;max-width:22ch}
.fact .fl2{margin-top:10px;font:500 13px/1.5 var(--sans);color:var(--fg2)}
.fact .bub{display:none}
.ch-facts .c-br{bottom:40px}
@media (max-width:900px){
  .facts{grid-template-columns:1fr;border-top:0}
  .fact{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:end;padding:22px 0 24px}
  .fact+.fact{padding-left:0;border-left:0}
  .fact dt{grid-column:1/-1}
  .fact .fig{grid-column:1;margin:12px 0 0;font-size:clamp(56px,16vw,80px);line-height:.9}
  .fact .fl{grid-column:2;font-size:17px;max-width:none;padding-bottom:5px}
  .fact .fl2{grid-column:1/-1;margin-top:10px}
  .arc{margin-top:28px}
}
@media (max-width:767px){.work-field .bub,.proof-stage .bub{display:none}}
@media (max-width:640px){.flagb{width:52px;height:52px}.arc-flags li{width:90px;margin-left:-45px;margin-top:-26px}}

/* ---------- reel ---------- */
.ch-reel .stick{display:flex;flex-direction:column;align-items:center;justify-content:center}
.h-split{display:flex;align-items:center;gap:clamp(20px,2.4vw,40px);font:italic 400 clamp(64px,12vw,200px)/.85 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
.reel-gap{display:block;width:calc(.75em * 9 / 16);height:.75em}
.reel-frame{width:min(1100px,100%);margin-top:40px}
.reel-frame video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:var(--r-card)}
.gbtn-pill{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 14px;border-radius:999px;border:0;cursor:pointer;color:var(--white);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  background:radial-gradient(120% 140% at 30% 0%,#3A3634 0,#151413 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px #34302F,0 10px 20px -10px rgba(0,0,0,.8);transition:transform .45s var(--spring)}
.gbtn-pill:hover{transform:scale(1.05)}
.gbtn-pill[aria-pressed="true"] .dot{animation:pulse 1.2s ease-in-out infinite}
.reel-sound{position:absolute;right:var(--gut);bottom:28px;z-index:3}
html:not(.is3d):not(.flat) .reel-sound{display:none}

/* ---------- process ---------- */
.proc-head .proc-line{margin-top:18px;font:italic 400 clamp(24px,2.2vw,32px)/1.15 var(--serif);text-transform:uppercase}
.proc-head .label{margin-top:16px;max-width:520px}
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px;border-top:1px solid var(--line);padding-top:24px}
.stage h3{margin:8px 0 10px;font:italic 400 clamp(28px,2.8vw,44px)/1 var(--serif);text-transform:uppercase}
.stage p:last-child{font:500 13px/1.5 var(--sans);color:var(--fg2);max-width:260px}
.ch-process .btn{margin-top:48px}
html.want3d .proc-head{position:absolute;left:var(--gut);top:132px;max-width:820px}
html.want3d .stages{position:absolute;left:var(--gut);right:var(--gut);bottom:110px;margin:0}
html.want3d .stage h3{color:#857E7B;transition:color .5s ease}
html.want3d .stage.on h3{color:var(--fg)}
html.want3d .stage{border-top:2px solid transparent;margin-top:-26px;padding-top:24px;transition:border-color .5s ease}
html.want3d .stage.on{border-top-color:var(--red)}
html.want3d .ch-process .btn{position:absolute;left:var(--gut);bottom:40px;margin:0}
@media (max-width:767px){.stages{grid-template-columns:1fr 1fr}html.want3d .proc-head{top:110px;right:var(--gut)}html.want3d .stages{bottom:96px}}

/* ---------- contact ---------- */
.ch-contact .stick{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.contact-line{margin-top:24px;font:italic 400 clamp(24px,2.4vw,36px)/1 var(--serif);text-transform:uppercase}
.contact-mail{margin-top:40px;font:italic 400 clamp(28px,4.4vw,72px)/1 var(--serif);text-transform:uppercase;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:6px}
.contact-mail:hover{color:var(--ink)}

/* ---------- footer ---------- */
.foot{background:var(--black);color:var(--white);overflow:hidden}
.foot-edge{display:block;width:100%;height:clamp(60px,9vw,140px)}
.foot-field{position:absolute;inset:0;pointer-events:none}
.foot-inner{position:relative;padding:clamp(48px,6vw,88px) var(--gut) 28px}
.foot .label{color:var(--grey-k);margin-bottom:14px}
.foot-top{display:flex;flex-direction:column;align-items:flex-start}
.foot-mail{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,24px);max-width:100%;font:italic 400 clamp(26px,6vw,100px)/.95 var(--serif);letter-spacing:-.03em;text-transform:uppercase;text-decoration:none}
.foot-mail span:first-child{min-width:0;overflow-wrap:anywhere;background:linear-gradient(var(--red),var(--red)) 0 100%/0 3px no-repeat;transition:background-size .6s var(--ease)}
.foot-mail:hover span:first-child{background-size:100% 3px}
.foot-mail .gbtn{width:clamp(40px,5vw,76px);height:clamp(40px,5vw,76px)}
.foot-note{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(56px,7vw,110px);padding-top:32px;border-top:1px solid var(--line-k);font:500 14px/1.7 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.foot-cols nav,.foot-cols div{display:flex;flex-direction:column;align-items:flex-start}
.foot-cols a{display:inline-block;padding:3px 0;text-decoration:none;color:var(--white);background:linear-gradient(var(--red),var(--red)) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--ease),color .2s ease}
.foot-cols a:hover,.foot-cols a:focus-visible{background-size:100% 1.5px;color:#FF8A82}
.foot-markwrap{position:relative;margin-top:clamp(64px,8vw,120px)}
.foot-mark{font:italic 400 clamp(60px,17.2vw,276px)/.8 var(--serif);letter-spacing:-.035em;text-transform:uppercase;white-space:nowrap;color:var(--white)}
.foot-markwrap .bub{animation:bub-bounce 1.6s cubic-bezier(.3,0,.5,1) infinite;animation-delay:var(--d,0s)}
.foot-markwrap .bub i{animation:bub-land 1.6s cubic-bezier(.3,0,.5,1) infinite;animation-delay:var(--d,0s);transform-origin:50% 100%}
@keyframes bub-bounce{0%,100%{transform:translateY(-.4em)}45%{transform:translateY(-3.2em)}90%{transform:translateY(-.25em)}}
@keyframes bub-land{0%,88%,100%{transform:scale(1.12,.86)}10%,80%{transform:scale(.94,1.06)}45%{transform:scale(1,1)}}
.foot-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.foot-legal a{text-decoration:none}.foot-legal a:hover{color:var(--white)}
@media (max-width:767px){.foot-cols{grid-template-columns:1fr 1fr}.foot-cols>div:last-child{grid-column:1/-1}:root{--gut:20px}.c-tl,.c-tr{top:92px}}

/* ---------- phones ---------- */
@media (max-width:767px){
  .ch-contact .h-section{font-size:clamp(36px,10.4vw,140px)}
  .contact-mail{font-size:clamp(20px,6.2vw,72px)}
  .plate{padding:14px;border-radius:16px}
  .ch-work .stick,.ch-facts .stick{padding-top:130px}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .bub,.bub i,.ai-badge,.chip::before,.plate.in,.foot-markwrap .bub,.foot-markwrap .bub i{animation:none!important}
}
@media (max-width:767px){.foot-field .bub.cap,.foot-field .bub.sph.r{display:none}.menu-field .bub.cap{display:none}}
.lshot.tile .tile-logo{position:absolute;left:19%;top:50%;width:62%;height:auto;transform:translateY(-58%)}
.lshot.tile .tile-logo{aspect-ratio:auto;object-fit:contain;transition:none}
html.is3d .corner{background:var(--bg);padding:3px 8px;margin-left:-8px;margin-right:-8px;border-radius:999px}   /* same colour as the room: measurable contrast, no visible change */
.work-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.work-head,.work-cols{position:relative;z-index:1}
.lcard.feat .lshot img{object-position:left top}

/* ---------- launch tiles: every project as its real logo, reversed out on a studio tile ---------- */
.lshot.tile{position:relative;display:block;aspect-ratio:16/10.6;overflow:hidden}
.lshot.tile.v0{background:radial-gradient(120% 90% at 25% 15%,#2A1210 0,#120C0B 55%,#0B0B0B 100%)}
.lshot.tile.v1{background:radial-gradient(120% 100% at 80% 10%,#3A0F0B 0,#170B0A 50%,#0B0B0B 100%)}
.lshot.tile.v2{background:radial-gradient(130% 100% at 50% 110%,#2C1513 0,#121010 55%,#0B0B0B 100%)}
.lshot.tile .tile-logo{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:auto;height:auto;max-width:58%;max-height:34%;aspect-ratio:auto;object-fit:contain;filter:brightness(0) invert(1);transition:transform .7s var(--spring)}
.lshot.tile .tile-logo[data-square]{max-height:46%;max-width:40%}
.lshot.tile .tile-name{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);white-space:nowrap}
.lcard a:hover .lshot.tile .tile-logo,.lcard a:focus-visible .lshot.tile .tile-logo{transform:translate(-50%,-50%) scale(1.08)}
.lshot.tile .tile-note{left:14px;bottom:12px;color:#BDB8B5;letter-spacing:.06em;text-transform:none;font-size:11px}
.lcard.feat .lshot.tile{aspect-ratio:auto;flex:1;min-height:0}
.lcard.feat .lshot.tile .tile-logo{max-width:46%;max-height:52%}
.lcard.feat .lshot.tile .tile-note{font-size:13px;left:20px;bottom:18px}
@media (max-width:1100px){.lcard.feat .lshot.tile{aspect-ratio:16/10;min-height:0}}

/* ---------- proof: the two marks take the stage ---------- */
.proof-stage{aspect-ratio:5/4}
.plate{width:48%}
.plate-qd{left:2%;right:auto;top:4%}
.plate-aar{right:2%;left:auto;bottom:2%;top:auto}

/* ---------- flags: keep the hoist (where the emblem lives) inside the round badge ---------- */
.flagb img[src*="/kw."],.flagb img[src*="/ae."],.flagb img[src*="/jo."]{object-position:12% 50%}
.flagb img[src*="/qa."]{object-position:28% 50%}
.flagb img[src*="/us."]{object-position:0% 0%}
@media (max-width:767px){.foot-field .bub:not(.ring),.foot-markwrap .bub{display:none}.foot-field .ring{left:auto!important;right:-30px}}

/* =================================================================== motion layer (motion.js) ===== */
/* page transitions: the next page wipes up over a red flash (cross-document View Transitions) */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.62s;animation-timing-function:cubic-bezier(.76,0,.24,1)}
::view-transition-old(root){animation:vt-out .62s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vt-in .62s cubic-bezier(.76,0,.24,1) both}
html::view-transition{background:#E9281F}
@keyframes vt-out{to{transform:translateY(-12vh) scale(.96);opacity:.25}}
@keyframes vt-in{from{clip-path:inset(100% 0 0 0 round 28px)}to{clip-path:inset(0 0 0 0 round 0)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* glossy cursor (fine pointers) */
.mg-cursor{position:fixed;left:0;top:0;z-index:70;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;will-change:transform;transition:opacity .25s ease}
.mg-cursor i{position:absolute;inset:0;border-radius:50%;background:var(--red);box-shadow:0 4px 10px -4px rgba(0,0,0,.4);transition:background .3s ease,opacity .3s ease}
.mg-cursor.on-link i{background:transparent;box-shadow:inset 0 0 0 1.5px #fff;mix-blend-mode:difference}   /* over a link the dot becomes a ring, so the link stays readable */
.mg-cursor span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(1 / 4.2));font:700 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s ease;white-space:nowrap}
.mg-cursor.on-card span{opacity:1}
.mg-cursor.gone{opacity:0}
html.has-cursor .menu-open .mg-cursor i{background:#fff}

/* image reveals: a wipe, then the picture settles */
html.js.motion .rvi{clip-path:inset(0 0 100% 0 round 18px)}
html.js.motion .rvi img{scale:1.18}
html.js.motion .rvi.in{clip-path:inset(0 0 0 0 round 0);transition:clip-path .85s cubic-bezier(.77,0,.18,1)}
html.js.motion .rvi.in img{scale:1;transition:scale 1.3s cubic-bezier(.16,1,.3,1)}

/* faster, crisper headline reveals */
.w>span{transition:transform .78s cubic-bezier(.16,1,.3,1)}
.ch.in .w:nth-child(2)>span{transition-delay:.035s}.ch.in .w:nth-child(3)>span{transition-delay:.07s}.ch.in .w:nth-child(4)>span{transition-delay:.105s}
.ch.in .w:nth-child(5)>span{transition-delay:.14s}.ch.in .w:nth-child(6)>span{transition-delay:.175s}.ch.in .w:nth-child(7)>span{transition-delay:.21s}
.ch.in .w:nth-child(n+8)>span{transition-delay:.24s}
html.js.motion .lcard.in,html.js.motion .scard.in,html.js.motion .fact.in{transition-duration:.7s,.7s,.35s}

/* ticker: a strip that runs, and leans with scroll speed */
.ticker{position:relative;overflow:hidden;padding:18px 0;transform:skewY(calc(var(--sk,0deg) * -.25));pointer-events:none}
.tk-track{display:flex;width:max-content;gap:28px;align-items:center;animation:tk 26s linear infinite;animation-duration:calc(26s / var(--boost,1))}
.tk-track span{font:italic 400 clamp(36px,5vw,76px)/1 var(--serif);text-transform:uppercase;letter-spacing:-.02em;white-space:nowrap;transform:skewX(var(--sk,0deg))}
.tk-track i{flex:none;width:.5em;height:.5em;font-size:clamp(36px,5vw,76px);border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,0) 28%),radial-gradient(circle at 42% 38%,#3a3634 0 45%,#000 100%)}
.tone-black .tk-track i,.tone-white .tk-track i{background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,0) 28%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%)}
@keyframes tk{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none}}

/* glossy objects: composited, driven by motion.js (no CSS transition fighting the loop) */
.bub{transition:none;will-change:transform,translate}

/* =========================== phones: the portfolio swipes sideways instead of scrolling forever === */
.swipe-ct{display:none}
@media (max-width:640px){
  .work-cols{gap:48px}
  .lgrid,.sgrid{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;grid-auto-columns:78%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 14px;scroll-padding-inline:var(--gut);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lgrid::-webkit-scrollbar,.sgrid::-webkit-scrollbar{display:none}
  .sgrid{grid-auto-columns:58%}
  .lcard,.scard{scroll-snap-align:start}
  .lcard.feat{grid-column:auto;grid-row:auto}
  .lcard.feat .lshot.tile{aspect-ratio:16/10.6;min-height:0}
  .lcard.feat .lname{font-size:22px}
  .swipe-ct{display:flex;align-items:center;gap:6px;grid-column:1/-1;margin-top:6px;font:600 11px/1 var(--sans);letter-spacing:.08em;color:var(--fg2)}
  .sc-i{color:var(--fg)}
  .sc-h{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--red);transition:opacity .3s ease}
  .sc-h::after{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;animation:nudge 1.4s ease-in-out infinite}
  .swipe-ct.moved .sc-h{opacity:0}
  html.js.motion .lcard,html.js.motion .scard{translate:none;scale:none;opacity:1}
  .ch-work .stick{padding-bottom:72px}
}
@keyframes nudge{50%{transform:translateX(6px)}}

html.internal .curtain{display:none}
.foot>.ticker{position:relative;z-index:2;margin-top:-6px}
.foot>.ticker .tk-track span{color:var(--white)}
.pcta>.ticker{margin-top:-6px}
.pcta>.ticker .tk-track span{color:#000}
@media (max-width:1100px){.work-cols{grid-template-columns:minmax(0,1fr)}.wcol{min-width:0}}
@media (max-width:640px){.lshot.tile .bub{--s:30px!important;font-size:8px}}
.sc-h{color:#FF6B62!important}.tone-white .sc-h{color:var(--red)!important}

/* page changes open along the cut: a slit across the middle that becomes the new page */
::view-transition-old(root){animation:vt-out .5s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vt-cut .72s cubic-bezier(.76,0,.24,1) .06s both}
@keyframes vt-out{to{transform:scale(.94);opacity:.18}}
@keyframes vt-cut{0%{clip-path:inset(49.6% 0 49.6% 0);transform:translateX(3%)}35%{clip-path:inset(49.6% 0 49.6% 0);transform:translateX(0)}100%{clip-path:inset(0 0 0 0);transform:none}}
/* pictures open along the same line */
html.js.motion .rvi{clip-path:inset(50% 0 50% 0 round 18px)}
html.js.motion .rvi.in{clip-path:inset(0 0 0 0 round 0);transition:clip-path .9s cubic-bezier(.77,0,.18,1)}

/* tiles reveal the real screen on hover; study films play on hover */
.tile-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.06);transition:opacity .45s ease,transform .9s var(--ease);z-index:0}
.lshot.tile>*:not(.tile-shot){position:relative;z-index:1}
.lshot.tile .tile-logo,.lshot.tile .tile-name{position:absolute}
.lshot.tile .bub{position:absolute}
.lshot.tile .tile-note{position:absolute}
/* shipped sites show as themselves */
.lshot.tile.has-shot .tile-shot{opacity:1;transform:none}
.lshot.tile.has-shot .tile-logo,.lshot.tile.has-shot .tile-name{display:none}
.lshot.tile.has-shot .tile-note{left:12px;bottom:10px;padding:5px 9px;border-radius:6px;background:rgba(11,11,11,.72);color:#fff;backdrop-filter:blur(6px)}
.lcard a:hover .lshot.tile.has-shot .tile-shot,.lcard a:focus-visible .lshot.tile.has-shot .tile-shot{transform:scale(1.04)}
@media (max-width:767px){.why-logos{margin-top:36px;padding:16px 0 18px}.why-logos>.label{margin-bottom:14px}.logo-strip ul{gap:44px;animation-duration:30s}.logo-strip img{height:20px}.logo-strip img[data-square]{height:36px}html.want3d .why-copy{top:40%}html.want3d .why-logos{bottom:28px}}
@media (hover:hover) and (pointer:fine){
  .lcard a:hover .tile-shot,.lcard a:focus-visible .tile-shot{opacity:1;transform:none}
  .lcard a:hover .tile-logo,.lcard a:hover .tile-name,.lcard a:hover .lshot.tile .bub{opacity:0;transition:opacity .25s ease}
  .lcard a:hover .tile-note{background:#0B0B0B;padding:4px 8px;border-radius:999px}
}
.study-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.scard.playing .study-film{opacity:1}
@media (hover:none){.study-film{opacity:1}}
html{overflow-x:clip}.phero .stick,.pcta .stick{overflow-x:clip}

/* the Why room overlaps the end of the hero: its stage is already pinned when the camera comes through
   the cut, and its copy appears there and then (no empty screen between the two) */
html.want3d #why{margin-top:-100vh}
html.want3d:not(.past-cut) #why .stick{visibility:hidden}
html.want3d:not(.past-cut) #why .w>span{transform:translateY(145%)!important;transition:none!important}
html.want3d:not(.past-cut) #why .label,html.want3d:not(.past-cut) #why .why-tags{opacity:0}
html.want3d #why .label,html.want3d #why .why-tags{transition:opacity .6s ease .35s}

/* ---------- Facts: Cairo to the Gulf, on the map ---------- */
.wmap{margin-top:44px;border-radius:28px;background:var(--black);padding:clamp(14px,2vw,28px);box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}
.wmap-box{position:relative}
.wmap-svg{display:block;width:100%;height:auto}
.wmap-route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rt{fill:none;stroke:var(--red);stroke-width:.45;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200}
.rt-glow{fill:none;stroke:var(--red);stroke-width:1.6;stroke-linecap:round;opacity:.28;filter:blur(.6px);stroke-dasharray:200;stroke-dashoffset:200}
html.js.motion .wmap.in .rt,html.js.motion .wmap.in .rt-glow{animation:rt-draw 1.6s cubic-bezier(.76,0,.24,1) .3s forwards}
html.reduce .rt,html:not(.js) .rt,html.reduce .rt-glow,html:not(.js) .rt-glow{stroke-dashoffset:0}
@keyframes rt-draw{to{stroke-dashoffset:0}}
.rt-dot{fill:#FF6B62;filter:drop-shadow(0 0 .6px #fff)}
.pins{position:absolute;inset:0;margin:0}
.pins li{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;translate:-50% -50%;will-change:transform}
html.js.motion .pins li{scale:0;transition:scale .7s var(--spring) calc(.2s + var(--i) * .07s)}
html.js.motion .pins li.in{scale:1}
.pins .flagb{width:44px;height:44px;box-shadow:0 0 0 3px var(--black),0 0 0 4px #4A4543,0 16px 24px -10px rgba(0,0,0,.8);transition:transform .5s var(--spring)}
.pins li:hover .flagb{transform:scale(1.15)}
.pins .flagn{font-size:10px;padding:4px 8px;background:var(--black);color:var(--white);box-shadow:0 0 0 1px #3A3634}
.wmap-tag{position:absolute;translate:-115% -135%;margin:0;font:italic 400 clamp(18px,1.6vw,24px)/1 var(--serif);text-transform:uppercase;color:var(--white);pointer-events:none;white-space:nowrap}
.wmap-far{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin:clamp(14px,2vw,24px) 0 0;padding-top:clamp(14px,2vw,22px);border-top:1px solid #2B2827;color:var(--white);font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.wmap-far .label{color:var(--grey-k)}
.wmap-far li:not(.label){display:flex;align-items:center;gap:10px}
.wmap-far .flagb{width:30px;height:30px;box-shadow:0 0 0 2px #3A3634}
@media (max-width:767px){
  .wmap-scroll{overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * clamp(14px,2vw,28px));padding:0 clamp(14px,2vw,28px)}.wmap-scroll::-webkit-scrollbar{display:none}
  .wmap-box{width:200vw}
  .pins .flagb{width:34px;height:34px;box-shadow:0 0 0 2px var(--black),0 0 0 3px #4A4543}
  .pins .flagn{display:none}
  .wmap-tag{font-size:12px}
  .wmap-far{gap:10px 16px}
}

/* ---------- page changes: a liquid drop falls into the next page ---------- */
.mg-drop{position:fixed;left:calc(50% - 26px);top:-70px;width:52px;height:52px;border-radius:50%;pointer-events:none;z-index:60;
  background:radial-gradient(circle at 32% 26%,#fff 0 6%,rgba(255,255,255,.6) 9%,rgba(255,255,255,0) 26%),radial-gradient(circle at 42% 38%,#F2392F 0 45%,#8A0E08 100%);view-transition-name:drop}
::view-transition-group(drop){animation:drop-fall .78s cubic-bezier(.4,0,.2,1) both;z-index:5}
::view-transition-old(drop),::view-transition-new(drop){animation:none;mix-blend-mode:normal}
@keyframes drop-fall{0%{translate:0 0;scale:.7 1.3}38%{translate:0 50vh;scale:1.1 .9}52%{translate:0 56vh;scale:1.6 .6}70%{translate:0 54vh;scale:1 1;opacity:1}100%{translate:0 54vh;scale:44 44;opacity:0}}
::view-transition-old(root){animation:vt-out .5s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:vt-pool .82s cubic-bezier(.76,0,.24,1) both}
@keyframes vt-pool{0%,50%{clip-path:circle(0% at 50% 54%)}100%{clip-path:circle(150% at 50% 54%)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(drop){animation:none;opacity:0}}
.wmap-tag.gulf{translate:15% -135%}

/* ---------------- book a call ---------------- */
.btn-call{background:#C21D15}.btn-call:hover{background:#A3170F}
.tone-red .btn-call{background:var(--ink)}.tone-red .btn-call:hover{background:#000}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.foot-book{margin:26px 0 0}
html.book-open{overflow:hidden}
.book{border:0;padding:0;margin:auto;width:min(700px,calc(100% - 32px));max-height:calc(100dvh - 32px);border-radius:28px;background:var(--black);color:var(--white);
  box-shadow:0 0 0 1px #2B2827,0 60px 120px -40px rgba(0,0,0,.8);overflow:auto;overscroll-behavior:contain}
.book[open]{animation:book-in .5s var(--spring)}
.book.out{opacity:0;transform:translateY(16px) scale(.98);transition:opacity .25s ease,transform .25s ease}
.book::backdrop{background:rgba(11,11,11,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@keyframes book-in{from{opacity:0;transform:translateY(26px) scale(.96)}}
.book-f{position:relative;display:grid;gap:24px;padding:clamp(24px,4vw,44px)}
.book .label{color:var(--grey-k);margin:0}
.book-t{margin:-8px 0 0;font:italic 400 clamp(46px,7.4vw,80px)/.95 var(--serif);letter-spacing:-.03em;text-transform:uppercase}
.book-x{all:unset;position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;background:#1C1A19;box-shadow:0 0 0 1px #34302F;cursor:pointer;display:grid;place-items:center;transition:background .2s ease}
.book-x:hover{background:var(--red)}.book-x:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.book-x i{position:absolute;width:16px;height:2px;border-radius:2px;background:var(--white);rotate:45deg}.book-x i+i{rotate:-45deg}
.book fieldset{border:0;margin:0;padding:0;min-width:0}
.book legend{padding:0;margin-bottom:12px}
.book-tz{color:#FF6B62;margin-left:6px}
.book-row{display:flex;gap:8px;overflow-x:auto;padding:3px;margin:-3px;scrollbar-width:none}
.book-row::-webkit-scrollbar{display:none}
.bchip{position:relative;flex:none}
.bchip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.bchip span{display:grid;justify-items:center;gap:3px;min-width:66px;padding:11px 12px;border-radius:16px;background:#1C1A19;box-shadow:0 0 0 1px #34302F;
  font:600 11px/1.1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#BDB8B5;transition:background .2s ease,box-shadow .2s ease,transform .35s var(--spring)}
.bchip em{font:italic 400 30px/1 var(--serif);letter-spacing:-.02em;color:var(--white)}
.bchip.t span{min-width:0;padding:13px 16px;font-size:12px;color:var(--white)}
.bchip:hover span{box-shadow:0 0 0 1px #6A6461}
.bchip input:checked+span{background:var(--red);box-shadow:none;color:var(--white);transform:translateY(-2px)}
.bchip input:focus-visible+span{outline:2px solid var(--white);outline-offset:2px}
.book-local{margin:12px 0 0;min-height:1.4em;font:500 13px/1.4 var(--sans);color:#BDB8B5}
.book-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.book .fld{display:grid;gap:8px}.book .fld.wide{grid-column:1/-1}
.book .fld>span{font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-k)}
.book .fld i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75}
.book .fld input{width:100%;box-sizing:border-box;border:0;border-radius:16px;background:#1C1A19;box-shadow:0 0 0 1px #34302F;color:var(--white);font:500 15px/1.4 var(--sans);padding:14px 16px}
.book .fld input::placeholder{color:#8F8986}
.book .fld input:focus{outline:none;box-shadow:0 0 0 2px var(--red)}
.book .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book-send{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.book-send .btn{background:#C21D15}.book-send .btn:hover{background:#A3170F}.book-send .btn:disabled{opacity:.6;cursor:progress}
.book-status{margin:0;max-width:44ch;font:600 12px/1.5 var(--sans);letter-spacing:.04em;color:#BDB8B5}
.book-status[data-ok="0"]{color:#FF8A82}
@media (max-width:600px){.book-fields{grid-template-columns:minmax(0,1fr)}.book{width:calc(100% - 20px);border-radius:24px}}
@media (prefers-reduced-motion:reduce){.book[open]{animation:none}.book.out{transition:none}}
.book-times .book-row{flex-wrap:wrap;overflow:visible}
.book-f>.label:first-of-type{padding-right:60px}
/* phones: nothing under 12px */
@media (max-width:767px){.lsub,.lshot.tile .tile-note,.ssub,.foot-legal,.wcol-n,.chip,.swipe-ct{font-size:12px}}

@media (max-width:767px){.h-split{flex-direction:column;gap:.1em;font-size:clamp(56px,16vw,72px)}.reel-gap{width:calc(.9em * 9 / 16);height:.9em}}

/* 2026-11-01: the glossy CSS objects are retired on every page (the client found them unprofessional) */
.bub{display:none!important}

/* ---------- flat pass (2026-11-07): no glossy spheres anywhere. Buttons, dots, badges, flags, drops are plain red / ink. ---------- */
.gbtn,.tone-red .gbtn,.ai-badge,.terms .tn,.mg-drop,.gdot,.why-tags .dot,.reel-sound .dot,.menu-nav a::before,.prose h2::before,html.want3d .svc.on .svc-t::before,.tk-track i,.tone-black .tk-track i,.tone-white .tk-track i,.chip-opt input:checked+span::before{background:var(--red)!important;box-shadow:none!important}
.tone-red .gbtn,.tone-red .ai-badge{background:var(--ink)!important}
.gbtn{border-radius:50%}
a:hover>.gbtn,a:focus-visible>.gbtn,button.gbtn:hover{transform:translateX(3px) rotate(0)}
.gbtn-pill{background:var(--ink)!important;box-shadow:0 0 0 1.5px var(--white)!important}
.chrome i,.lshot .chrome i{background:#D9D2CE!important;box-shadow:none}.chrome i:first-child,.lshot .chrome i:first-child{background:var(--red)!important}
.flagb{box-shadow:0 0 0 2px var(--white)!important}.flagb::after{display:none}
.pins .flagb{box-shadow:0 0 0 2px var(--black),0 0 0 3px #4A4543!important}.wmap-far .flagb{box-shadow:0 0 0 2px #3A3634!important}
.fl .flagb{box-shadow:none!important}