/* ═══════════════════════════════════════════
   DISTRICT 11 — Dubai creative agency
   Perception. Strategy. Culture. Performance.
   ═══════════════════════════════════════════ */

:root{
  --dark:#0a0a0a;
  --dark-2:#141416;
  --light-a:#d1d1d1;
  --light-b:#e6e6e6;
  --light-c:#f4f4f4;
  /* the exact plate the slats wipe to — every section revealed by a wipe
     must start on this colour or its leading edge becomes visible */
  --reveal-bg:#e9e9e9;
  --ink:#2b2b2b;
  --ink-dim:#6e6e6e;
  --accent:#d93a26;
  --orange:#ff7a1f;
  --brand:#6e1515;
  --brand-deep:#300909;
  --ease:cubic-bezier(.16,1,.3,1);
  --sans:'General Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --serif:'Instrument Serif',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--dark);-webkit-font-smoothing:antialiased;}
body{
  background:var(--dark);
  color:#f2f2f2;
  font-family:var(--sans);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;color:inherit;}
input,select,textarea{font:inherit;background:none;border:none;color:inherit;}
img{display:block;width:100%;height:100%;object-fit:cover;}
sup{font-size:.5em;vertical-align:super;}
::selection{background:var(--ink);color:#fff;}

.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;}

/* cursor */
@media (hover:hover) and (pointer:fine){
  body,a,button,input,select,textarea{cursor:none;}
  .cursor{
    position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;
    background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9997;
    transform:translate(-50%,-50%);
    transition:width .3s var(--ease),height .3s var(--ease);
  }
  .cursor.hover{width:48px;height:48px;}
}
@media not all and (hover:hover){ .cursor{display:none;} }

/* scroll progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9996;background:rgba(255,255,255,.06);}
.scroll-progress span{display:block;height:100%;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;}

/* ══════ LOADER ══════ */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--dark);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
}
.loader-mark{font-weight:700;font-size:1.4rem;letter-spacing:.04em;}
.loader-bar{width:190px;height:2px;background:rgba(255,255,255,.14);overflow:hidden;}
.loader-bar span{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%;}

/* ══════ NAV ══════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:26px clamp(18px,3.4vw,48px);
  color:#f2f2f2;
  transition:color .45s var(--ease);
}
.nav.is-light{color:var(--ink);}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.02rem;letter-spacing:.03em;}
.brand img{
  width:auto;height:36px;object-fit:contain;
  transition:filter .45s var(--ease);
}
/* the mark ships as off-white, so it needs flipping when the nav goes dark-on-light */
.nav.is-light .brand img{filter:brightness(0);}
.nav-right{display:flex;align-items:center;gap:12px;}
@media (max-width:640px){
  .nav{padding:20px 18px;}
  .nav-right .pill-solid{display:none;}   /* the menu carries the same call */
  .brand img{height:30px;}
}

.sound-btn{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.1);
  transition:background .4s var(--ease);
}
.nav.is-light .sound-btn{background:rgba(0,0,0,.08);}
.sound-btn svg{width:17px;height:17px;fill:currentColor;stroke:currentColor;stroke-width:1.7;}
.sound-slash{opacity:1;transition:opacity .25s;}
.sound-btn.on .sound-slash{opacity:0;}

.pill{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 19px;border-radius:100px;line-height:1;
  display:inline-flex;align-items:center;gap:9px;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.pill-solid{background:#f2f2f2;color:var(--dark);}
.nav.is-light .pill-solid{background:var(--dark);color:#f2f2f2;}
.pill-ghost{border:1px solid rgba(255,255,255,.38);}
.nav.is-light .pill-ghost{border-color:rgba(0,0,0,.45);}
.pill-ghost i{position:relative;width:13px;height:7px;display:block;}
.pill-ghost i::before,.pill-ghost i::after{
  content:'';position:absolute;left:0;right:0;height:1px;background:currentColor;
  transition:transform .4s var(--ease);
}
.pill-ghost i::before{top:0;}
.pill-ghost i::after{bottom:0;}
.pill-ghost.active i::before{transform:translateY(3px) rotate(45deg);}
.pill-ghost.active i::after{transform:translateY(-3px) rotate(-45deg);}

/* ══════ MENU ══════ */
.menu-overlay{
  position:fixed;inset:0;z-index:450;background:var(--dark);color:#f2f2f2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:130px clamp(18px,3.4vw,48px) 46px;
  clip-path:inset(0 0 100% 0);pointer-events:none;
}
.menu-overlay.active{pointer-events:auto;}
.menu-link{display:block;overflow:hidden;width:fit-content;}
.menu-link span{
  display:block;font-size:clamp(2.4rem,7.4vw,5.4rem);font-weight:600;line-height:1.14;
  letter-spacing:-.02em;color:#8a8a8a;transition:color .35s var(--ease);
}
.menu-link:hover span{color:#fff;}
.menu-link.current span{color:#fff;}
.menu-link.current span::after{
  content:'';display:inline-block;width:.14em;height:.14em;border-radius:50%;
  background:var(--accent);vertical-align:.55em;margin-left:.22em;
}
.menu-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  border-top:1px solid rgba(255,255,255,.15);padding-top:20px;}
.menu-social{display:flex;gap:22px;}

/* ══════════════ HERO ══════════════ */
/* Long enough for the 51-150 run to breathe. The geometry is tied together:
   the wipe occupies the last 42% of this range, which is 100vh out of the
   240vh of actual scroll (340 minus the sticky screen) — the exact time Key
   facts needs to climb one screen. Change this height and the -100vh pull-up
   on .facts has to change with it. */
.hero-wrap{position:relative;height:340vh;background:var(--dark);}
.hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;}

.hero-layer{position:absolute;inset:0;}

.hero-tagline{
  position:absolute;left:clamp(18px,10vw,190px);top:22%;line-height:1.62;color:#efefef;
  font-family:var(--sans);font-size:.86rem;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
}

/* ── the hero film ── */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
/* the frames are near-black already; this only seats the type, it must not
   crush the mark in the middle of the frame */
.hero-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,6,8,.5) 0%,rgba(6,6,8,0) 26%,rgba(6,6,8,0) 62%,rgba(6,6,8,.72) 100%);
}
/* Vignette: the sequence is drawn to fit rather than fill, so this both hides
   where the frame stops and keeps the eye on the mark in the middle. */
.hero-media::before{
  content:'';position:absolute;inset:-1px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 78% 74% at 50% 48%,transparent 32%,rgba(4,4,6,.55) 74%,#040406 100%);
}
/* everything except the film sits above it; each element brings its own position */
.hero-layer > *:not(.hero-media){z-index:2;}

/* top-right stamp */
.hero-stamp{
  position:absolute;top:104px;right:clamp(18px,3.4vw,48px);
  text-align:right;color:rgba(255,255,255,.5);line-height:1.9;
}

/* right-hand service index */
.hero-index{
  /* below the marquee band, above the brief line */
  position:absolute;top:64%;right:clamp(18px,3.4vw,48px);transform:translateY(-50%);
  display:flex;flex-direction:column;gap:13px;align-items:flex-end;
}
.hero-index li{list-style:none;display:flex;align-items:center;gap:11px;}
.hero-index b{font-family:var(--mono);font-size:.58rem;font-weight:400;color:rgba(255,255,255,.32);}
.hero-index span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);
}

/* left copy + CTA sitting above the masthead */
.hero-brief{
  position:absolute;left:clamp(18px,3.4vw,48px);right:clamp(18px,3.4vw,48px);
  bottom:clamp(128px,17vh,208px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
}
.hero-brief p{
  max-width:310px;font-size:.72rem;line-height:1.85;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.58);font-family:var(--mono);
}

/* the DISTRICT / 11 masthead */
.hero-mast{
  position:absolute;left:0;right:0;bottom:0;
  border-top:1px solid rgba(255,255,255,.16);
  margin:0 clamp(18px,3.4vw,48px);
  padding:10px 0 18px;
  display:flex;align-items:baseline;justify-content:space-between;
}
.hero-mast span{
  display:flex;
  font-size:clamp(3.1rem,9.6vw,8.6rem);font-weight:600;line-height:.86;
  letter-spacing:-.045em;color:#fff;text-transform:uppercase;
}
/* each letter comes up on its own as the sequence turns */
.hero-mast i{display:block;font-style:normal;opacity:0;will-change:opacity;}

/* giant marquee */
.marquee{
  position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);
  overflow:hidden;pointer-events:none;
}
.marquee-track{
  display:flex;align-items:center;gap:.34em;width:max-content;
  font-size:clamp(64px,12.4vw,178px);font-weight:400;line-height:1;
  letter-spacing:-.015em;color:#e8e8e8;white-space:nowrap;
  animation:slide 26s linear infinite;
}
.marquee-track em{font-style:normal;font-size:.34em;opacity:.85;transform:translateY(-.12em);}
@keyframes slide{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}


/* ── the split / slat reveal ── */
.slats{position:absolute;inset:0;pointer-events:none;}
.slat{
  --clip:50;
  position:absolute;left:0;width:100%;
  /* +1px so neighbouring bands overlap and no hairline seam survives rounding */
  height:calc(12.5% + 1px);
  top:calc(var(--i) * 12.5%);
  overflow:hidden;
  background:var(--reveal-bg);
  clip-path:inset(calc(var(--clip) * 1%) 0 calc(var(--clip) * 1%) 0);
}
/* single flat plate faded in once the bands meet, so the finished wipe is seamless */
.slat-fill{
  position:absolute;inset:0;background:var(--reveal-bg);opacity:0;pointer-events:none;
}
/* inverted copy of the marquee, offset so it lines up with the real one behind */
.slat .marquee{
  position:absolute;left:0;right:0;
  top:calc(40vh - var(--i) * 12.5vh);
  transform:translateY(-50%);
}
.slat .marquee-track{color:var(--ink);}

/* ══════════════ KEY FACTS ══════════════ */
.facts{
  /* Pulled up by exactly one screen, so its leading edge enters the frame as
     the bands begin to close and its top lands at the viewport top as the hero
     range ends. Starts flat on --reveal-bg so the edge itself is invisible. */
  margin-top:-100vh;
  position:relative;z-index:2;
  background:linear-gradient(180deg,var(--reveal-bg) 0%,var(--reveal-bg) 16%,var(--light-c) 54%,#fbfbfb 100%);
  color:var(--ink);
  padding:clamp(70px,10vw,130px) clamp(18px,3.4vw,48px) clamp(60px,8vw,110px);
}
.facts-head{text-align:center;margin-bottom:clamp(36px,4.6vw,60px);}
.facts-title{font-size:clamp(2rem,4.8vw,3.9rem);font-weight:500;letter-spacing:-.03em;line-height:1;}
.facts-sub{margin-top:12px;font-size:clamp(.82rem,1.05vw,.94rem);line-height:1.55;color:#4a4a4a;}

.facts-cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  max-width:950px;margin:0 auto;
  perspective:1500px;perspective-origin:50% 40%;
}
.fact-card{
  position:relative;border-radius:12px;overflow:hidden;
  aspect-ratio:11/14;padding:19px;
  display:flex;flex-direction:column;
  transform-style:preserve-3d;
  /* hinged at the top edge so it flips down like a notepad page */
  transform-origin:50% 0%;
  backface-visibility:hidden;
  will-change:transform,opacity;
}
.fact-dark{background:#3c3c3c;color:#f0f0f0;}
.fact-pale{background:#ededed;color:var(--ink);align-items:center;text-align:center;justify-content:space-between;}
.fact-grey{background:#3a3a3a;color:#f0f0f0;}
.fact-label{position:relative;z-index:2;font-size:.6rem;}
.fact-dark .fact-label,.fact-pale .fact-label{text-align:left;align-self:flex-start;}
.fact-pale .fact-label{align-self:center;}
.fact-grey .fact-label{align-self:flex-end;text-align:right;font-style:italic;}

.fact-img{position:absolute;inset:0;z-index:0;}
.fact-dark .fact-img{object-position:50% 22%;filter:grayscale(.15) contrast(1.05);}
.fact-grey .fact-img{
  position:relative;inset:auto;z-index:1;
  width:74%;aspect-ratio:1/1;margin:20px auto auto;border-radius:4px;
  filter:grayscale(.9) contrast(1.08);
}
.fact-dark::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,20,20,.55) 0%,transparent 32%,transparent 55%,rgba(15,15,15,.86) 100%);
}
.fact-body{position:relative;z-index:2;margin-top:auto;display:flex;flex-direction:column;gap:16px;}
.award-cycle{height:26px;display:flex;align-items:center;}
.award-cycle span{font-weight:700;font-size:.98rem;letter-spacing:.02em;}
.fact-bottom{
  position:relative;z-index:2;margin-top:auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.fact-bottom p{font-size:.76rem;line-height:1.4;}
.fact-num{font-size:clamp(1.6rem,2.7vw,2.35rem);font-weight:400;letter-spacing:-.02em;line-height:.9;}
.fact-orb{
  width:64%;aspect-ratio:1/1;border-radius:50%;background:#fff;
  display:grid;place-items:center;margin:auto;
}
.fact-orb b{font-size:clamp(1.35rem,2.35vw,1.95rem);font-weight:400;letter-spacing:-.02em;}
.fact-note{font-size:.74rem;line-height:1.5;color:#5a5a5a;}

.partners{margin-top:clamp(56px,7vw,100px);text-align:center;}
.partners-label{color:#5f5f5f;margin-bottom:26px;}
.partners-row{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(26px,4.6vw,64px);
}
.partners-row span{
  font-size:clamp(1.05rem,1.9vw,1.5rem);font-weight:600;color:#3a3a3a;letter-spacing:-.01em;
  position:relative;
}
.partners-row span+span::before{
  content:'';position:absolute;left:calc(-1 * clamp(13px,2.3vw,32px));top:12%;bottom:12%;
  width:1px;background:rgba(0,0,0,.16);
}

/* ══════════════ SHOWCASE (one pin: works → services → cards → wipe) ══════════════ */
.showcase{position:relative;z-index:2;background:var(--dark);}
.showcase-pin{
  height:100vh;overflow:hidden;position:relative;
  background:var(--dark);color:var(--ink);
}
.works-track{
  position:absolute;top:0;left:0;height:100%;z-index:7;
  display:flex;align-items:center;
  width:max-content;will-change:transform;
  background:linear-gradient(180deg,#fbfbfb,#e9e9e9);
}
.panel{
  position:relative;flex:none;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(26px,3.6vw,58px);
  border-right:1px solid rgba(0,0,0,.1);
}
.panel-intro{width:min(48vw,640px);}
.panel-intro h2{font-size:clamp(2rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;}
.panel-intro .mono-link{margin-top:30px;}

.mono-link{
  display:inline-flex;align-items:center;gap:26px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.35);width:fit-content;
  transition:gap .4s var(--ease);
}
.mono-link:hover{gap:38px;}

.work-panel{width:min(58vw,780px);will-change:transform,opacity;}
.work-visual{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#111;
}
.work-visual>img{position:absolute;inset:0;}
.wv-inner{position:absolute;inset:0;padding:clamp(16px,2.4vw,34px);color:#f5f5f5;}
 /* one scrim for every cover, so the overlay copy reads on any photography */
.work-visual::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,8,10,.58) 0%,rgba(8,8,10,.08) 34%,rgba(8,8,10,.12) 56%,rgba(8,8,10,.72) 100%);
}
.work-visual .wv-inner{z-index:2;}
.wv-tags{
  position:absolute;left:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);right:clamp(16px,2.4vw,34px);
  z-index:3;display:flex;flex-wrap:wrap;gap:7px;
}
.wv-tags span{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 13px;border-radius:0;line-height:1;
  border:1px solid rgba(255,255,255,.34);color:#f2f2f2;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  background:rgba(255,255,255,.08);
}
.work-visual>img{transition:transform 1.1s var(--ease);}
.work-panel:hover .work-visual>img{transform:scale(1.045);}
.work-meta{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-top:clamp(16px,2vw,26px);
}
.work-meta h3{font-size:clamp(1.1rem,1.85vw,1.55rem);font-weight:500;letter-spacing:-.02em;}
.work-meta p{margin-top:7px;font-size:.86rem;line-height:1.45;color:#5c5c5c;}

.panel-outro{
  width:min(62vw,820px);align-items:center;text-align:center;justify-content:center;
  background:linear-gradient(180deg,#f7f7f7,#ededed);
}
.panel-outro p{font-size:clamp(1.2rem,2.5vw,2.05rem);font-weight:500;letter-spacing:-.02em;line-height:1.32;}
.panel-outro .mono-link{margin-top:34px;}
.outro-x{position:absolute;top:50%;right:clamp(22px,3vw,44px);transform:translateY(-50%);font-size:1.15rem;color:#555;}

.srv-line{
  display:block;font-weight:500;line-height:.82;letter-spacing:-.045em;
  white-space:nowrap;will-change:transform,opacity;
}
/* base = the INITIAL (large) state; script.js scales down to the small state,
   and its shrink factor is tuned so the final size is unchanged */
.srv-line[data-size="1"]{font-size:clamp(2.15rem,6.1vw,5.75rem);}
.srv-line[data-size="2"]{font-size:clamp(2.8rem,7.9vw,7.55rem);}
.srv-line[data-size="3"]{font-size:clamp(3.1rem,9.35vw,9rem);}
.srv-line[data-size="4"]{font-size:clamp(2.95rem,8.5vw,8.2rem);}

/* ══════════════ SERVICES / VIDEO LAYERS (inside the showcase pin) ══════════════ */
/* the light plate the outro panel slides away to expose, before it turns to video */
.stage-light{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#f6f6f6,#e4e4e4);}
.stage-video{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:grayscale(.45) contrast(1.12) brightness(.62);
}
.stage-veil{
  position:absolute;inset:0;z-index:2;opacity:0;
  background:radial-gradient(ellipse at 50% 45%,rgba(10,10,12,.16),rgba(6,6,8,.82) 78%);
}

.stage-label{position:absolute;top:78px;left:50%;transform:translateX(-50%);z-index:6;color:#4a4a4a;opacity:0;}
.stage-type{
  --type-a:#1e1e1e;
  --type-b:#3a3a3a;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;
}
/* gradient lives on each letter, not the line — so a letter keeps its own
   gradient while it flies off during the splash */
.stage-type .ltr{
  display:inline-block;will-change:transform,opacity,filter;
  color:var(--type-a);
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stage-type .ltr{
    background-image:linear-gradient(180deg,var(--type-a) 10%,var(--type-b) 94%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
}
.stage-foot{
  position:absolute;left:0;right:0;bottom:44px;z-index:6;opacity:0;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(18px,3.4vw,48px);color:#333;
}
.stage-foot .mono-link{position:absolute;right:clamp(18px,3.4vw,48px);border-bottom-color:rgba(0,0,0,.35);}

/* ── orbiting glass cards ── */
.orbit{position:absolute;inset:0;z-index:4;pointer-events:none;}
.orb-card{
  position:absolute;left:0;top:0;opacity:0;
  width:min(27vw,430px);
  padding:clamp(18px,1.8vw,30px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(150deg,rgba(255,255,255,.11),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  color:#f1f1f1;will-change:transform,opacity;
}
.orb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-height:74px;}
.orb-head h3{font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:500;letter-spacing:-.02em;line-height:1.18;}
.orb-icon{
  flex:none;width:clamp(46px,4vw,62px);height:clamp(46px,4vw,62px);
  fill:none;stroke:rgba(255,255,255,.72);stroke-width:1.1;
}
.orb-card p{margin-top:clamp(26px,3vw,52px);font-size:.84rem;line-height:1.5;color:rgba(240,240,240,.76);}

/* the stage's own slat wipe → client stories */
.stage-slats{z-index:8;}

/* ══════════════ CLIENT STORIES ══════════════ */
.client{
  /* same treatment as .facts — already past halfway before the second wipe
     finishes, starting on --reveal-bg so it never reads as a panel arriving */
  margin-top:-108vh;
  position:relative;z-index:4;
  background:linear-gradient(180deg,var(--reveal-bg) 0%,var(--reveal-bg) 14%,#e4e4e4 62%,#dedede 100%);
  color:var(--ink);
  padding:clamp(60px,8vw,104px) clamp(18px,5vw,96px) clamp(40px,5vw,70px);
}
.client-head{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.client-head h2{font-size:clamp(2.4rem,6vw,5rem);font-weight:500;letter-spacing:-.035em;line-height:1;}
.client-head p{font-size:.92rem;line-height:1.5;color:#5b5b5b;max-width:230px;padding-top:10px;}

.client-rule{position:relative;margin:clamp(34px,5vw,64px) 0;height:1px;background:rgba(0,0,0,.17);}
.client-rule span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--reveal-bg);padding:0 12px;font-size:.9rem;color:#6a6a6a;line-height:1;
}
.client-rule-end{margin-bottom:0;}

.client-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(30px,5vw,80px);}
.client-list{display:flex;flex-direction:column;gap:9px;list-style:none;}
.client-list li{list-style:none;}
.client-list li::marker{content:'';}
.client-list button{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:#a3a3a3;text-align:left;display:inline-flex;align-items:center;gap:10px;
  transition:color .35s var(--ease);
}
.client-list button::after{content:'→';opacity:0;transition:opacity .35s var(--ease);}
.client-list button.active{color:var(--ink);}
.client-list button.active::after{opacity:1;}
.client-list button:hover{color:#585858;}

.client-quote blockquote{
  font-size:clamp(1.1rem,2.35vw,1.95rem);font-weight:400;line-height:1.35;letter-spacing:-.02em;color:#333;
}
.client-author{display:flex;align-items:center;gap:16px;margin-top:clamp(30px,4vw,62px);flex-wrap:wrap;}
/* a monogram, not a portrait — these entries are placeholders until real,
   approved client testimonials and photographs are supplied */
.client-avatar{
  width:74px;height:74px;border-radius:3px;flex:none;
  display:grid;place-items:center;
  background:#d5d5d5;color:#4f4f4f;
  font-size:1.15rem;font-weight:500;letter-spacing:.02em;
}
.client-author b{display:block;font-size:1rem;font-weight:500;}
.client-author span{display:block;font-size:.92rem;color:#6d6d6d;margin-top:2px;}
.client-listen{margin-left:auto;color:#4a4a4a;}
.client-become{margin-top:clamp(26px,3.4vw,50px);}

.client-nav{display:flex;margin-top:clamp(26px,4vw,58px);}
.client-nav button{
  width:74px;height:60px;border:1px solid rgba(0,0,0,.2);font-size:1rem;color:#4a4a4a;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.client-nav button+button{border-left:none;}
.client-nav button:hover{background:rgba(0,0,0,.06);color:var(--ink);}

/* ══════════════ DESIGN IN MOTION ══════════════ */
.motion{position:relative;z-index:5;height:720vh;background:var(--reveal-bg);}
.motion-pin{
  position:relative;height:100vh;overflow:hidden;
  background:linear-gradient(180deg,var(--reveal-bg) 0%,#c9c9c9 100%);
  color:var(--ink);
}

.motion-lines{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible;will-change:transform;}
.m-line{fill:none;stroke:rgba(0,0,0,.28);stroke-width:1;vector-effect:non-scaling-stroke;}

.motion-title{
  position:absolute;z-index:2;
  font-size:clamp(2.6rem,7.4vw,7rem);font-weight:400;
  letter-spacing:-.035em;line-height:1;color:#4a4a4a;
  white-space:nowrap;pointer-events:none;
}
/* stacked so the centred caption sits in the gap between them */
.motion-title-a{left:15%;top:32%;}
.motion-title-b{right:12%;top:55%;}
.motion-caption{
  position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;color:#5c5c5c;line-height:1.55;pointer-events:none;
}

/* ── 3D reel ── */
.reel{position:absolute;inset:0;z-index:4;perspective:950px;perspective-origin:50% 50%;pointer-events:none;}
.reel-tilt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;}
.reel-stage{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;will-change:transform;
}
/* one face per project — a card is gone off the rim before it could ever turn
   far enough to want a reverse */
.reel-item{
  position:absolute;
  width:clamp(140px,15vw,215px);aspect-ratio:7/5;
  margin-left:calc(clamp(140px,15vw,215px) / -2);
  margin-top:calc(clamp(140px,15vw,215px) * -0.357);
  border-radius:6px;overflow:hidden;background:#111;
  box-shadow:0 26px 60px rgba(0,0,0,.22);
  will-change:transform;
}
.reel-item img{filter:grayscale(.08) contrast(1.04);}
.reel-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px 16px;
  background:linear-gradient(180deg,transparent,rgba(10,10,12,.78));
  color:#fff;
}
.reel-cap b{display:block;font-size:.72rem;font-weight:600;letter-spacing:-.01em;}
.reel-cap span{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ── six works assembling into a grid ── */
.grid-works{
  position:absolute;z-index:6;
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(88vw,1300px);
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.1vw,34px);
  /* the cards wave in on their way to the grid, so they need depth to turn in */
  perspective:1400px;
  pointer-events:none;
}
/* the rule that runs between the two rows, out past the cards on both sides */
.grid-rule{
  position:absolute;z-index:5;left:50%;top:50%;
  width:100vw;height:1px;
  transform:translate(-50%,-50%);
  background:rgba(0,0,0,.16);
  transform-origin:50% 50%;
  pointer-events:none;
}
.gw{
  position:relative;aspect-ratio:7/5;border-radius:8px;overflow:hidden;background:#111;
  will-change:transform,opacity;
  transform-style:preserve-3d;backface-visibility:hidden;
  box-shadow:0 20px 46px rgba(0,0,0,.22);
}
.gw img{filter:grayscale(.08) contrast(1.04);}
.gw figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(180deg,transparent,rgba(10,10,12,.78));color:#fff;
}
.gw figcaption b{display:block;font-size:.92rem;font-weight:600;}
.gw figcaption span{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

.motion-note{
  position:absolute;z-index:7;left:clamp(18px,3.4vw,48px);bottom:56px;
  font-size:.88rem;line-height:1.5;color:#4a4a4a;
}
.motion-cta{position:absolute;z-index:7;right:clamp(18px,3.4vw,48px);bottom:64px;}

/* the third wipe is black */
.motion-slats{z-index:9;}
.motion-slats .slat,
.motion-slats .slat-fill{background:var(--dark);}

/* ══════════════ CONTACT ══════════════ */
.contact{
  /* the Journal's gradient has already run down to --dark by here */
  position:relative;z-index:8;background:var(--dark);color:#f2f2f2;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);
  padding:clamp(74px,11vw,150px) clamp(18px,3.4vw,48px);
}
.contact-label{color:#8d8d8d;}
.contact-title{margin-top:22px;font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:500;letter-spacing:-.03em;line-height:1.1;}
.contact-lines{margin-top:40px;display:flex;flex-direction:column;gap:10px;}
.contact-lines a{font-size:1.05rem;width:fit-content;border-bottom:1px solid transparent;transition:border-color .3s;}
.contact-lines a:hover{border-color:#f2f2f2;}

.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:24px 22px;align-content:start;position:relative;}
.contact-form .full{grid-column:1/-1;}
.contact-form label{display:flex;flex-direction:column;gap:9px;}
.contact-form label span{color:#8d8d8d;}
.contact-form input,.contact-form select,.contact-form textarea{
  border-bottom:1px solid rgba(255,255,255,.2);padding:9px 0;font-size:.98rem;
  transition:border-color .3s;resize:vertical;
}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:#f2f2f2;}
.contact-form select option{background:var(--dark-2);}
.form-status{grid-column:1/-1;color:var(--orange);min-height:1em;opacity:0;transition:opacity .3s;}
.form-status.show{opacity:1;}
.submit-btn{
  grid-column:1/-1;justify-self:start;
  display:inline-flex;align-items:center;gap:26px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  background:#f2f2f2;color:var(--dark);padding:15px 28px;border-radius:100px;
  transition:gap .4s var(--ease);
}
.submit-btn:hover{gap:38px;}

.site-footer{
  position:relative;z-index:6;overflow:hidden;
  background:#070709;color:#cfcfcf;
  padding:clamp(28px,3.6vw,44px) clamp(18px,3.4vw,48px) 0;
}
.foot-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 45% at 68% 22%, rgba(122,138,168,.20), transparent 70%),
    radial-gradient(48% 40% at 22% 68%, rgba(90,104,130,.14), transparent 72%);
  filter:blur(24px);
}
.site-footer > *:not(.foot-glow){position:relative;z-index:1;}

.foot-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:#e8e8e8;}
.foot-clock i{font-style:normal;opacity:.6;margin:0 2px;}

.foot-main{
  display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:34px;
  margin-top:clamp(30px,4.4vw,64px);
}
.foot-title{
  font-size:clamp(2.1rem,5.4vw,4.4rem);font-weight:500;letter-spacing:-.035em;line-height:1.05;
  color:#eeeeee;
}
.foot-actions{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;padding-bottom:6px;}
.foot-actions .mono-link{border-bottom-color:rgba(255,255,255,.34);color:#e6e6e6;}

.foot-meta{
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(20px,3vw,48px);
  margin-top:clamp(30px,4.4vw,64px);
}
.foot-meta-left{display:flex;flex-direction:column;gap:14px;color:#9a9a9a;}
.foot-sound{width:fit-content;color:#9a9a9a;text-align:left;transition:color .3s;}
.foot-sound i{font-style:normal;}
.foot-sound:hover{color:#e8e8e8;}
.foot-col-label{color:#8e8e8e;margin-bottom:14px;}
.foot-col p{font-size:1rem;line-height:1.9;color:#e2e2e2;}
.foot-col p .mono{color:#8e8e8e;margin-right:4px;font-size:.72rem;}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px;}
.foot-social{display:grid;grid-template-columns:1fr 1fr;gap:4px 22px;font-size:1rem;color:#e2e2e2;}

.foot-mark{
  display:block;width:100%;height:auto;margin-top:clamp(26px,4vw,56px);
}
.foot-mark text{
  font-family:var(--sans);font-weight:600;font-size:190px;letter-spacing:-.03em;
  fill:#c9b6b0;
}

.foot-base{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:18px 0 22px;margin-top:8px;
  border-top:1px solid rgba(255,255,255,.09);
  color:#6f6f6f;
}
.foot-base button:hover{color:#e8e8e8;}


/* ══════════════ ABOUT CARDS — extras on the facts grid ══════════════ */
.fact-lede{position:relative;z-index:2;margin-top:auto;font-size:.8rem;line-height:1.62;}
.fact-slot{
  position:relative;z-index:1;width:78%;aspect-ratio:4/5;margin:14px auto auto;
  border-radius:6px;display:grid;place-items:center;gap:8px;
  border:1px dashed rgba(0,0,0,.22);
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.035) 0 9px,transparent 9px 18px),
    #e4e4e4;
  color:#8b8b8b;text-align:center;padding:14px;
}
.fact-slot b{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;}
.fact-slot i{font-style:normal;font-size:1.2rem;opacity:.5;}
.facts-cta{margin-top:clamp(34px,4vw,52px);display:flex;justify-content:center;}
.facts-cta .mono-link{color:var(--ink);border-bottom-color:rgba(0,0,0,.35);}

/* ══════════════ ORBIT CARD — numbering ══════════════ */
.orb-num{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:rgba(255,255,255,.42);display:block;margin-bottom:14px;}

/* ══════════════════════════════════════════════════════════
   HOW WE WORK — a pinned stack. Three process cards fall
   forward one at a time, the spent ones sinking back into
   the dark, then a light slat wipe hands over to the Journal.
   ══════════════════════════════════════════════════════════ */
.process{
  /* pulled up under the motion wipe: its leading edge climbs through the closing
     black bands over empty padding, so the edge itself is never legible */
  margin-top:-108vh;
  position:relative;z-index:6;background:var(--dark);
}
/* The section is pulled up 104vh so it climbs behind the closing black bands.
   This carries the remaining 4vh, which puts the stage's sticky exactly at the
   moment the motion pin releases — so the wipe lands straight on the first
   card instead of on a screen of empty black. */
.process-gap{height:4vh;}

.process-stage{position:relative;height:480vh;}
.process-pin{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 6%,#191a1e 0%,var(--dark) 64%);
}
.process-grain{
  position:absolute;inset:0;z-index:0;opacity:.55;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 74px);
}
.process-head{
  position:absolute;left:clamp(18px,3.4vw,48px);top:50%;transform:translateY(-50%);z-index:2;
  max-width:min(21vw,230px);
}
.process-head .mono{color:rgba(255,255,255,.42);}
.process-head h2{
  margin-top:18px;font-size:clamp(2.1rem,4.6vw,3.8rem);font-weight:500;
  letter-spacing:-.035em;line-height:.94;color:#f4f4f4;
}
.process-ghost{
  position:absolute;right:clamp(18px,3.4vw,48px);bottom:clamp(34px,6vh,74px);z-index:2;text-align:right;
}
.process-ghost h3{
  font-size:clamp(1.5rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.03em;line-height:.96;
  color:rgba(255,255,255,.14);
}
.process-ghost .mono{color:rgba(255,255,255,.24);margin-top:12px;}

/* the step rail sitting to the right of the stack, clear of the heading */
.process-rail{
  position:absolute;left:50%;top:50%;
  transform:translate(calc(-50% + min(33vw,450px) + 34px),-50%);
  z-index:4;display:flex;flex-direction:column;gap:14px;align-items:center;
}
.process-rail span{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  color:rgba(255,255,255,.24);transition:color .45s var(--ease);
}
.process-rail span.on{color:#f2f2f2;}
.process-rail i{display:block;width:1px;height:32px;background:rgba(255,255,255,.16);}

.process-stack{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(66vw,900px);height:min(62vh,480px);z-index:3;perspective:1700px;
}
.pcard{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;
  background:#f4f4f4;color:var(--ink);
  display:grid;grid-template-columns:1.08fr .92fr;
  box-shadow:0 44px 120px rgba(0,0,0,.62);
  transform-origin:50% 0%;backface-visibility:hidden;will-change:transform,opacity;
}
.pcard-body{padding:clamp(28px,3.4vw,54px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;}
.pcard-body .mono{color:#8d8d8d;}
.pcard-body h3{
  margin-top:22px;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:500;
  letter-spacing:-.03em;line-height:1.04;
}
.pcard-body p{margin-top:18px;font-size:.9rem;line-height:1.75;color:#5b5b5b;max-width:36ch;}
.pcard-foot{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:#9a9a9a;text-transform:uppercase;}
.pcard-foot em{font-style:normal;flex:1;height:1px;background:rgba(0,0,0,.14);}
.pcard-img{position:relative;overflow:hidden;}
.pcard-img img{filter:grayscale(.16) contrast(1.06);}

/* the fourth wipe — light again, handing over to the Journal */
.process-slats{z-index:9;}

/* ══════════════════════════════════════════════
   JOURNAL — revealed by the process wipe
   ══════════════════════════════════════════════ */
.journal{
  /* same trick as .facts / .client: pulled up by one screen plus a little, so its
     leading edge enters the frame exactly as the process wipe starts closing and
     is past halfway before the bands meet */
  margin-top:-104vh;
  position:relative;z-index:7;
  background:linear-gradient(180deg,var(--reveal-bg) 0%,var(--reveal-bg) 12%,var(--light-c) 44%,#f7f7f7 100%);
  color:var(--ink);
  padding:clamp(70px,10vw,130px) clamp(18px,3.4vw,48px) clamp(96px,13vw,180px);
}
.journal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.journal-head h2{font-size:clamp(2.4rem,6vw,5rem);font-weight:500;letter-spacing:-.035em;line-height:1;}
.journal-head p{font-size:.92rem;line-height:1.6;color:#5b5b5b;max-width:300px;}
.journal-grid{
  margin-top:clamp(38px,5vw,66px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);
}
.jcard{display:block;border-top:1px solid rgba(0,0,0,.18);padding-top:20px;}
.jcard-img{aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#e0e0e0;}
.jcard-img img{transition:transform 1s var(--ease);}
.jcard:hover .jcard-img img{transform:scale(1.05);}
.jcard h3{margin-top:18px;font-size:1.02rem;font-weight:500;letter-spacing:-.015em;line-height:1.36;}
.jcard .mono{display:block;margin-top:10px;color:#7d7d7d;font-size:.6rem;}
.journal-empty{grid-column:1/-1;font-size:.9rem;color:#6f6f6f;padding:30px 0;}
.journal-foot{
  margin-top:clamp(46px,6vw,84px);display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;
}
.journal-foot p{font-size:.92rem;line-height:1.7;color:#5b5b5b;max-width:460px;}
.journal-foot .mono-link{color:var(--ink);border-bottom-color:rgba(0,0,0,.35);}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:900px){
  .hero-tagline{left:18px;top:20%;}
  .facts-cards{grid-template-columns:1fr;max-width:420px;}
  .fact-card{aspect-ratio:11/13;}
  .panel-intro,.work-panel,.panel-outro{width:86vw;}
  .work-meta{flex-direction:column;align-items:flex-start;gap:16px;}
  .contact{grid-template-columns:1fr;}
  .contact-form{grid-template-columns:1fr;}
  .srv-foot{flex-direction:column;gap:16px;position:static;margin-top:22px;}
  .srv-foot .mono-link{position:static;}
  .orb-card{width:74vw;}
  .client-body{grid-template-columns:1fr;}
  .client-list{flex-direction:row;flex-wrap:wrap;gap:16px;}
  .client-listen{margin-left:0;}
  .motion-title-a{left:6%;top:34%;}
  .motion-title-b{right:6%;top:60%;}
  .grid-works{grid-template-columns:repeat(2,1fr);width:92vw;}
  .motion-note{display:none;}
  .foot-meta{grid-template-columns:1fr;}
  .foot-main{align-items:flex-start;}

  .hero-index{display:none;}
  .hero-stamp{top:88px;}
  .hero-brief{flex-direction:column;align-items:flex-start;gap:16px;bottom:112px;}
  .hero-mast span{font-size:clamp(2.5rem,13vw,4.4rem);}

  .process-gap{height:4vh;}
  .process-stage{height:420vh;}
  .process-head{top:11%;transform:none;}
  .process-ghost{display:none;}
  .process-rail{left:auto;right:clamp(18px,3.4vw,48px);top:auto;bottom:5vh;transform:none;flex-direction:row;gap:12px;}
  .process-rail i{width:22px;height:1px;}
  .process-stack{width:88vw;height:min(64vh,520px);}
  .pcard{grid-template-columns:1fr;grid-template-rows:1fr .8fr;}
  .journal-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .marquee-track,.monolith{animation:none;}
}