/* ============================================================
   BARKERS OGILVY ZIMBABWE
   main.css — shared token system + shared components
   Per-page overrides hang off  body[data-dimension="…"]
   ============================================================ */

/* ---------- 1. TOKENS ---------- */

:root{
  /* Base palette — off-black / bone / Ogilvy red */
  --off-black:#0B0B0C;
  --off-black-2:#131315;
  --bone:#F2EFE9;
  --bone-2:#E7E2D8;
  --red:#E4002B;          /* Ogilvy red — accent only, never a wash */
  --grey-60:#8C8A85;
  --grey-30:#4A4A4C;

  /* Dimension-level roles. Overridden per page. */
  --paper:var(--off-black);
  --ink:var(--bone);
  --ink-soft:#9B9892;
  --rule:rgba(242,239,233,.14);
  --accent:var(--red);           /* fills, rules, large type */
  --accent-text:#F4364F;         /* same red, lifted for small text (AA on off-black) */
  --plate:#17171A;

  /* Type */
  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-huge:clamp(3.2rem,min(16vw,22vh),17rem);
  --t-xl:clamp(2.6rem,8.4vw,8.5rem);
  --t-lg:clamp(2rem,5vw,4.4rem);
  --t-md:clamp(1.35rem,2.5vw,2.25rem);
  --t-body:clamp(1rem,1.12vw,1.15rem);
  --t-meta:clamp(.68rem,.78vw,.78rem);

  /* Space */
  --gut:clamp(1.25rem,4.6vw,5.5rem);
  --stack:clamp(5rem,12vh,11rem);
  --maxw:1680px;

  /* Motion */
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-inout:cubic-bezier(.65,.05,.36,1);
  --d-1:.45s; --d-2:.75s; --d-3:1.1s;

  --nav-h:clamp(58px,6vh,74px);
}

/* ---------- DIMENSIONS ---------- */

body[data-dimension="arrival"]{
  --paper:#0B0B0C; --ink:var(--bone); --ink-soft:#918E88;
  --rule:rgba(242,239,233,.13); --plate:#151517;

  --accent-text:#F4364F;
}
body[data-dimension="floor"]{          /* work index */
  --paper:#F2EFE9; --ink:#0B0B0C; --ink-soft:#5C5A56;
  --rule:rgba(11,11,12,.16); --plate:#DFD9CD;

  --accent-text:#C60024;
}
body[data-dimension="deep"]{           /* case study */
  --paper:#08080A; --ink:#EFEBE3; --ink-soft:#8A8781;
  --rule:rgba(239,235,227,.12); --plate:#111114;

  --accent-text:#F4364F;
}
body[data-dimension="system"]{         /* capabilities */
  --paper:#131110; --ink:#EFE9DE; --ink-soft:#918A80;
  --rule:rgba(239,233,222,.14); --plate:#1C1917;

  --accent-text:#F4364F;
}
body[data-dimension="house"]{          /* about */
  --paper:#EDE7DC; --ink:#12110F; --ink-soft:#5E5A52;
  --rule:rgba(18,17,15,.16); --plate:#DED6C7;

  --accent-text:#C60024;
}
body[data-dimension="exit"]{           /* contact */
  --paper:#0A0A0B; --ink:var(--bone); --ink-soft:#8E8B85;
  --rule:rgba(242,239,233,.13); --plate:#141416;

  --accent-text:#F4364F;
}
body[data-dimension="press"]{          /* insights — a reading room, cooler than the
                                          two bone dimensions so long copy reads as
                                          paper rather than as gallery wall */
  --paper:#F4F3F0; --ink:#0E0E10; --ink-soft:#57565C;
  --rule:rgba(14,14,16,.15); --plate:#E4E3DF;

  --accent-text:#C60024;
}

/* ---------- 2. RESET / BASE ---------- */

@supports not (overflow-x:clip){
  /* Older engines: no clip. Keep sticky alive and let the page own the axis. */
  html{overflow-x:hidden}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-size:var(--t-body);
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* clip, NOT hidden — overflow-x:hidden turns <body> into a scroll
     container and silently disables every position:sticky on the page. */
  overflow-x:clip;
  transition:background-color .6s var(--e-out),color .6s var(--e-out);
}
img{max-width:100%;display:block;border:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--red);color:#fff}

:focus-visible{outline:2px solid var(--red);outline-offset:4px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;top:-100px;left:var(--gut);z-index:1000;background:var(--red);color:#fff;padding:.7rem 1.1rem;font:600 .8rem/1 var(--f-mono);letter-spacing:.08em}
.skip:focus{top:12px}

/* ---------- 3. TYPE PRIMITIVES ---------- */

.display{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:106%;
  letter-spacing:-.035em;
  line-height:.84;
  text-transform:uppercase;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.statement{font-size:var(--t-huge)}
.h-xl{font-size:var(--t-xl)}
.h-lg{font-size:var(--t-lg)}
.h-md{font-size:var(--t-md);line-height:1.12;letter-spacing:-.02em;font-weight:600;text-transform:none;font-stretch:100%}

.serif{font-family:var(--f-serif);font-weight:400;text-transform:none;letter-spacing:-.015em;font-stretch:100%}
.serif-i{font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:-.01em;font-stretch:100%}

.meta{
  font-family:var(--f-mono);
  font-size:var(--t-meta);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
}
.meta--accent{color:var(--accent-text)}

.lede{
  font-size:clamp(1.15rem,1.85vw,1.7rem);
  line-height:1.42;
  letter-spacing:-.015em;
  max-width:34ch;
  color:var(--ink);
}
.body-copy{max-width:62ch;color:var(--ink-soft);line-height:1.62;font-size:clamp(1rem,1.05vw,1.08rem)}
.body-copy + .body-copy{margin-top:1.1em}

.rule{height:1px;background:var(--rule);border:0;margin:0}
.rule--accent{height:2px;background:var(--accent)}

.mark{color:var(--accent-text)}

/* red index dot */
.dot{display:inline-block;width:.42em;height:.42em;background:var(--accent);border-radius:50%;vertical-align:.12em;margin-inline:.15em}

/* ---------- 4. LOADER ---------- */

.loader{
  position:fixed;inset:0;z-index:900;
  background:var(--off-black);color:var(--bone);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:var(--gut);
  transition:opacity .7s var(--e-out),visibility .7s;
}
.loader[hidden]{display:none}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark img{height:clamp(26px,4.4vw,54px);width:auto;display:block}
.loader__bar{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--gut) + 2.2rem);height:1px;background:rgba(242,239,233,.16)}
.loader__bar i{display:block;height:100%;width:0%;background:var(--red);transition:width .3s linear}
.loader__pct{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.16em;color:#8E8B85}

/* ---------- 5. CURTAIN ---------- */

.curtain{
  position:fixed;inset:0;z-index:800;pointer-events:none;
  display:grid;
}
.curtain__panel{
  position:absolute;inset:0;
  background:var(--off-black);
  transform:scaleX(0);
  transform-origin:right center;
  will-change:transform;
}
.curtain__panel--2{background:var(--red)}
.curtain__panel--3{background:var(--off-black-2)}
.curtain__label{
  position:absolute;left:var(--gut);bottom:var(--gut);
  font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);opacity:0;
}
.curtain.is-active{pointer-events:all}

/* ---------- 6. CURSOR ---------- */

.cursor{position:fixed;top:0;left:0;z-index:950;pointer-events:none;mix-blend-mode:difference;will-change:transform}
.cursor__dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#fff}
.cursor__ring{
  position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  transition:width .32s var(--e-out),height .32s var(--e-out),margin .32s var(--e-out),opacity .3s;
}
.cursor__label{
  position:absolute;transform:translate(-50%,-50%);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;opacity:0;transition:opacity .25s;white-space:nowrap;
}
body.cursor-hover .cursor__ring{width:76px;height:76px;margin:-38px 0 0 -38px}
body.cursor-hover .cursor__dot{opacity:0}
body.cursor-label .cursor__label{opacity:1}
body.cursor-hidden .cursor{opacity:0}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- 7. NAV ---------- */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:700;
  height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--gut);
}
/* a scrim, not a bar — it only appears once content is travelling under it */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);
  opacity:0;transition:opacity .4s var(--e-out);
}
body.is-scrolled .nav::before{opacity:.97}
body.nav-invert .nav::before{background:#08080A}
@supports (backdrop-filter:blur(2px)){
  body.is-scrolled .nav::before{opacity:.94;backdrop-filter:blur(18px)}
}
.nav::after{
  content:"";position:absolute;left:var(--gut);right:var(--gut);bottom:0;height:1px;
  background:var(--rule);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--e-out) .2s;
}
.nav.is-lined::after{transform:scaleX(1)}

/* dark plate passing under the bar — flip the ink, keep the red red */
body.nav-invert .nav{--ink:#F2EFE9;--ink-soft:rgba(242,239,233,.62);--rule:rgba(242,239,233,.18);color:#F2EFE9}
body.nav-invert .nav .wordmark__b,
body.nav-invert .nav .nav__toggle{color:#F2EFE9;transition:color .35s var(--e-out)}
body.nav-invert .nav .wordmark__o,
body.nav-invert .nav .nav__link{color:rgba(242,239,233,.62);transition:color .35s var(--e-out)}
body.nav-invert .nav .nav__link:hover,
body.nav-invert .nav .nav__link[aria-current]{color:#F2EFE9}

.wordmark{display:flex;align-items:center;gap:.45rem;line-height:1}
/* the real two-colour lockup: Barkers red stays red, Ogilvy takes the ink
   of whichever dimension it is standing on */
.wordmark__img{height:clamp(20px,2.1vw,29px);width:auto;display:block}
.wordmark__img--light{display:none}
body[data-dimension="floor"] .wordmark__img--dark,
body[data-dimension="house"] .wordmark__img--dark,
body[data-dimension="press"] .wordmark__img--dark{display:none}
body[data-dimension="floor"] .wordmark__img--light,
body[data-dimension="house"] .wordmark__img--light,
body[data-dimension="press"] .wordmark__img--light{display:block}
/* over a dark full-bleed plate the bone cut wins again */
body.nav-invert .nav .wordmark__img--light{display:none}
body.nav-invert .nav .wordmark__img--dark{display:block}
.foot .wordmark__img{height:clamp(21px,2.3vw,30px)}
.wordmark__b{font-family:var(--f-serif);font-size:clamp(1.15rem,1.6vw,1.5rem);letter-spacing:-.01em}
.wordmark__o{
  font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);padding-left:.5rem;border-left:1px solid var(--rule);
}
.wordmark__dot{width:5px;height:5px;border-radius:50%;background:var(--red);display:inline-block;margin-left:.1rem}

.nav__list{display:flex;align-items:center;gap:clamp(1.1rem,2.4vw,2.6rem)}
.nav__link{
  position:relative;font-family:var(--f-mono);font-size:var(--t-meta);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
  padding-block:.5rem;transition:color .3s var(--e-out);
}
.nav__link:hover{color:var(--ink)}
.nav__link::after{
  content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--e-out);
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--ink)}
.nav__link[aria-current="page"]::after{transform:scaleX(1)}

.nav__toggle{display:none;font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;padding:.6rem 0}
.nav__toggle span{display:inline-block;min-width:3.4em;text-align:right}

/* overlay (mobile) */
.menu{
  position:fixed;inset:0;z-index:690;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--gut);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-inout);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__item{display:block;padding:.28em 0;border-bottom:1px solid var(--rule)}
.menu__item a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(2.2rem,11vw,4rem);line-height:1;letter-spacing:-.035em;text-transform:uppercase;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out);
}
.menu.is-open .menu__item a{opacity:1;transform:none}
.menu__item i{font-family:var(--f-mono);font-style:normal;font-size:.6rem;letter-spacing:.16em;color:var(--accent-text)}
.menu__foot{margin-top:auto;padding-top:2rem}

@media (max-width:900px){
  .nav__list{display:none}
  .nav__toggle{display:block}
}

/* ---------- 8. CHARACTER LAYER ---------- */

.character{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  overflow:hidden;               /* the glow must not widen the layout viewport */
  contain:layout style;
}
.character__inner{
  position:absolute;top:0;left:0;
  width:var(--ch-w,34vw);
  height:100vh;
  transform-origin:50% 100%;
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
}
/* kept inside the character box on purpose — a 150%-wide glow widens the
   mobile layout viewport even when its parent clips it */
.character__glow{
  position:absolute;left:0;right:0;top:52%;height:150%;
  transform:translateY(-50%);
  background:radial-gradient(closest-side circle at 50% 50%,rgba(228,0,43,.34) 0%,rgba(228,0,43,.13) 30%,rgba(228,0,43,0) 62%);
  opacity:var(--ch-glow,.55);
  transition:opacity .6s var(--e-out);
}
.character__shadow{
  position:absolute;left:50%;bottom:6%;width:56%;height:2.4%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 70%);
  opacity:var(--ch-shadow,.5);
}
body[data-dimension="floor"] .character__glow,
body[data-dimension="house"] .character__glow,
body[data-dimension="press"] .character__glow{opacity:.16}
/* light dimensions: he sits back into the paper rather than on top of it */
body[data-dimension="house"] .character__frames{filter:saturate(.72) contrast(.94)}
body[data-dimension="house"] .character__shadow{opacity:.18}
.character__frames{position:absolute;inset:0}
.character__frames img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  opacity:0;
  will-change:opacity;
}
.character.is-ready .character__frames img[data-angle="front"]{opacity:1}

/* ---------- LIVE CHARACTER (contact only) ----------
   A VP9-alpha loop occupying the same box as the still frames. It sits above
   them and fades in once the first frame has actually decoded, so a stalled
   download never leaves a hole where Boff should be. The stills stay in the
   DOM underneath as the permanent fallback. */
.character__live{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.character__live video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;object-position:center bottom;
  opacity:0;transition:opacity .32s ease;
  pointer-events:none;
}
.character__live video.is-on{opacity:1}
.character.is-live .character__live{opacity:1}
/* once the video is carrying the performance the stills would only double him */
.character.is-live .character__frames{opacity:0;transition:opacity .5s ease}

/* content sits in its own layer so the character can be placed
   in front of it (default) or behind it (data-char-depth="behind") */
main{position:relative;z-index:3}
body[data-char-depth="behind"] .character{z-index:2}
/* PASSAGE: he is the constant. During a curtain wipe he rises above it,
   so the only thing that survives the transition is him. */
body.is-travelling .character{z-index:850}
body.is-travelling .character__glow{opacity:.8}

/* ---------- 9. REVEALS ---------- */

.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .85s var(--e-out),transform .85s var(--e-out)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;transform:translateY(102%);transition:transform 1s var(--e-out)}
.is-in .line-mask > span,.line-mask.is-in > span{transform:none}
.line-mask:nth-child(2) > span{transition-delay:.09s}
.line-mask:nth-child(3) > span{transition-delay:.18s}
.line-mask:nth-child(4) > span{transition-delay:.27s}

/* ---------- 10. PIN MECHANICS ---------- */

.pin{position:relative}
.pin__stage{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.pin__progress{position:absolute;left:var(--gut);bottom:calc(var(--gut) * .8);right:var(--gut);height:1px;background:var(--rule)}
.pin__progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- 11. BUTTONS / MAGNETIC ---------- */

.cta{
  display:inline-flex;align-items:center;gap:1rem;
  font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.16em;text-transform:uppercase;
  padding:1.15rem 1.9rem;
  border:1px solid var(--rule);border-radius:100px;
  position:relative;overflow:hidden;isolation:isolate;
  will-change:transform;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .5s var(--e-inout);
}
.cta:hover::before{transform:none}
.cta:hover{color:#fff;border-color:var(--accent)}
.cta__arrow{transition:transform .45s var(--e-out)}
.cta:hover .cta__arrow{transform:translateX(5px)}
.cta--solid{background:var(--accent);color:#fff;border-color:var(--accent)}
.cta--solid::before{background:var(--ink)}
.cta--solid:hover{color:var(--paper)}

/* text link with rule */
.tlink{position:relative;display:inline-block;padding-bottom:.18em}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.35;transform-origin:right;transition:transform .45s var(--e-out)}
.tlink:hover::after{transform:scaleX(0)}

/* ---------- 12. SHARED SECTIONS ---------- */

.section{position:relative;padding-block:var(--stack)}
.section--flush{padding-block:0}

.sec-head{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-bottom:clamp(2.4rem,5vw,4.5rem)}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
}

/* numbers strip */
.figures{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,4vw,3rem) clamp(1rem,3vw,2.5rem)}
@media (min-width:820px){.figures{grid-template-columns:repeat(4,1fr)}}
.figure__n{font-family:var(--f-display);font-weight:800;font-stretch:106%;font-size:clamp(3rem,7.4vw,7.4rem);line-height:.82;letter-spacing:-.05em;display:flex;align-items:baseline}
.figure__n sup{font-size:.34em;font-weight:600;letter-spacing:0;color:var(--accent-text);top:-.9em;position:relative}
.figure__l{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--rule);max-width:15ch}

/* client marquee */
.marquee{overflow:hidden;position:relative;padding-block:clamp(1.2rem,2.6vw,2rem);border-block:1px solid var(--rule)}
.marquee__track{display:flex;gap:clamp(2.4rem,6vw,6rem);width:max-content;will-change:transform}
.marquee__item{
  font-family:var(--f-display);font-weight:700;font-stretch:98%;
  font-size:clamp(1.3rem,3vw,2.6rem);letter-spacing:-.02em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;display:flex;align-items:center;gap:clamp(2.4rem,6vw,6rem);
}
.marquee__item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* work tiles (shared between index teaser + work index) */
.plate{position:relative;display:block;overflow:hidden;background:var(--plate)}
/* it is a <span>, so it must be blockified or aspect-ratio silently does
   nothing and every tile takes its image's own height */
.plate__media{display:block;position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;background:var(--plate)}
/* the teasers are mostly square social assets whose lock-ups sit in the
   corners — a taller box cropped the brand marks off, so the tile takes the
   artwork's own shape and the two portrait posters give up a little height */
.plate__media--portrait{aspect-ratio:1/1}
.plate__media img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform 1.1s var(--e-out);will-change:transform}
.plate:hover .plate__media img{transform:scale(1.055)}
.plate__fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,2vw,1.8rem);
  background:
    linear-gradient(135deg,rgba(228,0,43,.10),transparent 55%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 7px),
    var(--plate);
}
.plate__fallback .ttl{font-family:var(--f-display);font-weight:800;font-stretch:106%;text-transform:uppercase;letter-spacing:-.03em;line-height:.9;font-size:clamp(1.4rem,3.4vw,3rem);opacity:.5}
.plate__idx{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.16em;color:var(--accent-text)}
.plate__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding-top:1rem;margin-top:1rem;border-top:1px solid var(--rule)}

/* asset-pending flag */
.pending{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-text);border:1px solid var(--accent-text);padding:.25rem .5rem;border-radius:2px;
  align-self:flex-start;
}


/* ============================================================
   FPO PLATES
   Every campaign visual, case still and portrait we do not yet
   have is composed as a typographic plate rather than left as an
   empty box: the campaign's own line, set in the house type, on a
   tinted ground. It reads as a deliberate treatment, and it swaps
   for a photograph by replacing the block with an <img>.
   ============================================================ */

.fpo{
  position:absolute;inset:0;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1rem,2.2vw,2.2rem);
  background:
    linear-gradient(148deg,rgba(228,0,43,.20) 0%,rgba(228,0,43,0) 46%),
    linear-gradient(200deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,0) 40%),
    #131317;
  color:#F2EFE9;
  isolation:isolate;
}
/* a fine diagonal weave so the ground has material, not flat fill */
.fpo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(58deg,rgba(255,255,255,.028) 0 1px,transparent 1px 11px);
}
/* the red keeps its role: a rule, never a wash */
.fpo::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;
  background:var(--red);
}
.fpo > *{position:relative;z-index:2}

.fpo__client{
  font-family:var(--f-mono);font-size:clamp(.58rem,.72vw,.72rem);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,233,.66);
}
.fpo__line{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  text-transform:uppercase;letter-spacing:-.04em;line-height:.86;
  font-size:clamp(1.5rem,5.4vw,4.6rem);
  color:rgba(242,239,233,.92);
  max-width:14ch;
  margin-block:auto clamp(.4rem,1.4vw,1rem);
}
.fpo__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.fpo__tag{
  font-family:var(--f-mono);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,239,233,.42);border:1px solid rgba(242,239,233,.22);
  padding:.22rem .5rem;border-radius:2px;white-space:nowrap;
}
.fpo__idx{
  font-family:var(--f-mono);font-size:clamp(.58rem,.72vw,.72rem);
  letter-spacing:.2em;color:var(--accent-text);
}

/* full-bleed variants: the plate is the page, so the line grows with it */
.stack__media .fpo{padding:clamp(1.4rem,4vw,4rem)}
.stack__media .fpo__line{font-size:clamp(3rem,12vw,11rem);max-width:11ch;color:rgba(242,239,233,.10);margin-block:auto 0}
.stack__media .fpo::after{width:4px}
.case-hero .fpo__line{font-size:clamp(2rem,7vw,6rem);max-width:13ch;color:rgba(242,239,233,.14)}

/* small stills inside a case study */
.fpo--sm{padding:clamp(.8rem,1.6vw,1.2rem)}
.fpo--sm .fpo__line{font-size:clamp(1.1rem,2.4vw,1.9rem);max-width:9ch;color:rgba(242,239,233,.22)}

/* portraits: a monogram, not an empty frame */
.fpo--portrait{
  background:
    linear-gradient(160deg,rgba(228,0,43,.045) 0%,rgba(228,0,43,0) 46%),
    var(--plate);
  color:var(--ink);
  justify-content:flex-end;
}
/* eight red bars in a row would make the accent a pattern — keep it a hairline */
.fpo--portrait::after{width:1px;background:var(--rule)}
.fpo--portrait::before{background:repeating-linear-gradient(58deg,rgba(0,0,0,.02) 0 1px,transparent 1px 11px)}
.fpo--portrait .fpo__mono{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(2.4rem,6vw,4.2rem);line-height:.8;letter-spacing:-.05em;
  color:color-mix(in srgb,var(--ink) 16%,transparent);
  margin-block:auto .4rem;
}
@supports not (color:color-mix(in srgb,red,blue)){
  .fpo--portrait .fpo__mono{opacity:.18}
}
.fpo--portrait .fpo__tag{color:var(--ink-soft);border-color:var(--rule)}

/* campaign lockups — flat brand panels, shown whole */
.lockup-grid{display:grid;gap:clamp(1.6rem,3.4vw,3rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.lockup{overflow:hidden;background:var(--plate);aspect-ratio:16/9}
.lockup img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
/* the deck's lockups are 16:9; the campaign posts are square, and cropping a
   square social asset to 16:9 slices the headline off the bottom */
.lockup--sq{aspect-ratio:1/1}
.lockup-grid{align-items:start}
.lockup-grid li:hover .lockup img{transform:scale(1.04)}
.more-work{border-top:1px solid var(--rule)}

/* ---------- 13. FOOTER ---------- */

.foot{position:relative;z-index:6;background:var(--paper);padding-block:clamp(3rem,7vw,6rem) clamp(1.5rem,3vw,2.4rem);border-top:1px solid var(--rule)}
.foot__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:820px){.foot__grid{grid-template-columns:2fr 1fr 1fr 1.2fr}}
.foot__ttl{margin-bottom:1.1rem}
.foot li + li{margin-top:.55rem}
.foot a:hover{color:var(--accent)}
.foot__base{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;margin-top:clamp(2.5rem,6vw,5rem);padding-top:1.4rem;border-top:1px solid var(--rule)}

/* ---------- 14. REDUCED MOTION ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  .rv{opacity:1;transform:none}
  .line-mask > span{transform:none}
  .curtain__panel{transform:none !important}
  .cursor{display:none}
  .marquee__track{transform:none !important;flex-wrap:wrap;width:100%}
  .character__inner{transition:none}
}

/* ---------- 15. MOBILE SIMPLIFICATION ---------- */

@media (max-width:760px){
  :root{--t-huge:clamp(2.4rem,min(14.5vw,13vh),7rem)}
  .character__glow{opacity:.3}
  .pin__progress{display:none}
  /* fewer layers of depth: he sits behind the type on every page */
  .character{z-index:2}
  .arrival__cue{display:none}
}

/* ============================================================
   PAGE: INDEX  —  dimension "arrival"
   ============================================================ */

body[data-page="index"] .arrival{height:330vh}
body[data-page="index"] .figures-pin{height:210vh}
body[data-page="index"] .ladder-pin{height:270vh}
@supports (height:100svh){.pin__stage{height:100svh}}

.arrival .pin__stage{justify-content:flex-end;padding-top:calc(var(--nav-h) + 1rem);padding-bottom:clamp(3rem,9vh,7rem)}
.arrival__stage{position:relative;z-index:3}
.arrival__eyebrow{margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.arrival__h{margin:0;position:relative}
.arrival__h .line-mask{margin-left:0}
.arrival__h .line-mask:nth-child(2){margin-left:clamp(0px,4.4vw,7rem)}
.arrival__h .line-mask:nth-child(3){margin-left:clamp(0px,8.8vw,14rem)}
@media (max-width:640px){
  .arrival__h .line-mask:nth-child(2),
  .arrival__h .line-mask:nth-child(3),
  .work-head__h .line-mask:nth-child(2){margin-left:0}
}
.arrival__sub{
  opacity:0;margin-top:clamp(1.4rem,3.4vh,2.6rem);
  font-size:clamp(1.15rem,2.3vw,2.1rem);color:var(--ink-soft);max-width:26ch;
}
.arrival__cue{
  position:absolute;right:var(--gut);bottom:calc(var(--gut) * .8 + 1.6rem);
  writing-mode:vertical-rl;letter-spacing:.3em;
}
.arrival__cue::after{content:"";display:block;width:1px;height:44px;background:var(--accent);margin:.8rem auto 0}

/* character sits between the ground and the type on arrival */
body[data-page="index"]{--ch-w:clamp(280px,32vw,560px)}
@media (max-width:900px){body[data-page="index"]{--ch-w:min(52vw,250px)}}

/* ---- position section ---- */
.position{padding-top:clamp(6rem,14vh,12rem)}

/* ---- figures ---- */
.figures-pin .pin__stage{justify-content:center}

/* ---- ladder ---- */
.ladder-pin .pin__stage{justify-content:center}
.ladder__head{display:grid;gap:1rem;margin-bottom:clamp(2rem,4.5vw,3.6rem)}
@media (min-width:900px){.ladder__head{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:baseline}}
.ladder{border-top:1px solid var(--rule)}
.ladder__row{
  position:relative;display:grid;align-items:baseline;gap:.35rem 1.4rem;
  grid-template-columns:auto 1fr;
  padding-block:clamp(.55rem,1.5vh,1.05rem);
  border-bottom:1px solid var(--rule);
  will-change:transform,opacity;
}
@media (min-width:900px){
  .ladder__row{grid-template-columns:4rem minmax(0,1fr) auto}
}
.ladder__i{color:var(--accent-text)}
.ladder__t{font-size:clamp(1.5rem,3.9vw,3.4rem);line-height:.95}
.ladder__d{grid-column:2/-1;justify-self:start}
@media (min-width:900px){.ladder__d{grid-column:auto;justify-self:end}}
.ladder__bar{
  position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
}

/* ---- work teaser ----
   Two columns with a fixed drop on the right, so the section reads as a
   composed spread rather than a card grid — and, unlike the hand-placed
   three-item version this replaces, it holds for any number of teasers. */
.teaser-grid{display:grid;gap:clamp(1.6rem,3.4vw,3rem);counter-reset:teaser}
.teaser-grid > li{counter-increment:teaser;min-width:0}
@media (min-width:860px){
  .teaser-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.6rem,3.4vw,3.5rem);
    row-gap:clamp(2.6rem,5vw,4.5rem);
    align-items:start;
  }
  /* the right-hand column runs one step lower the whole way down */
  .teaser-grid > li:nth-child(even){margin-top:clamp(3rem,7vw,7rem)}
}
.plate__no{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--bone);mix-blend-mode:normal;
  background:rgba(11,11,12,.55);padding:.3rem .5rem;border-radius:2px;
  backdrop-filter:blur(2px);
}
.plate__no::before{content:"0" counter(teaser)}
.teaser-grid > li:nth-child(n+10) .plate__no::before{content:counter(teaser)}

/* ---- clients ---- */
.clients{padding-block:clamp(3.5rem,9vh,8rem)}

/* ---- outro ---- */
.outro{padding-top:clamp(6rem,16vh,14rem);padding-bottom:clamp(6rem,16vh,14rem)}
.outro__h{margin-top:clamp(1.4rem,3vh,2.4rem)}

/* ============================================================
   PAGE: WORK  —  dimension "floor" (bone paper, full-bleed stack)
   ============================================================ */

body[data-page="work"]{--ch-w:clamp(190px,20vw,340px)}
@media (max-width:900px){body[data-page="work"]{--ch-w:min(40vw,180px)}}

.work-head{padding-top:calc(var(--nav-h) + clamp(4rem,14vh,10rem));padding-bottom:clamp(3rem,9vh,7rem)}
.work-head__h{font-size:clamp(2.9rem,11.4vw,12rem)}
.work-head__h .line-mask:nth-child(2){margin-left:clamp(0px,5vw,8rem)}

/* stacked full-bleed plates — each holds the viewport, then the next
   wipes up over it. The slot gives every plate room to be read before
   it is covered. */
.stack{position:relative}
/* the plates are dark islands on a bone page — the red has to lift again */
.stack__item,body.nav-invert .nav{--accent-text:#F4364F}
.stack__slot{position:relative;display:block;height:172vh}
.stack__slot:last-child{height:118vh}
.stack__item{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--off-black);
  color:var(--bone);
  border-top:1px solid rgba(242,239,233,.10);
}
@supports (height:100svh){.stack__item{height:100svh}.stack__slot{height:172svh}.stack__slot:last-child{height:118svh}}
.stack__media{position:absolute;inset:0;overflow:hidden}
.stack__media img{position:relative;z-index:2}
.stack__media img,.stack__fallback{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  will-change:transform;transform:scale(1.14);
}
.stack__fallback{
  background:
    linear-gradient(120deg,rgba(228,0,43,.16),transparent 52%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 2px,transparent 2px 9px),
    #141417;
}
.stack__item::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,8,10,.94) 0%,rgba(8,8,10,.55) 38%,rgba(8,8,10,.12) 72%,rgba(8,8,10,.3) 100%);
}

/* A campaign poster is portrait artwork. Blow it up to fill a landscape
   plate and it stops being readable — so the poster hangs as an artefact
   and a heavily defocused copy of it becomes the room it hangs in. */
.stack__amb{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);
  filter:blur(38px) saturate(1.35) brightness(.30);
}
.stack__poster{
  position:absolute;z-index:3;top:0;bottom:0;right:var(--gut);
  display:flex;align-items:center;margin:0;pointer-events:none;
}
.stack__poster img{
  width:auto;max-height:64vh;max-width:38vw;
  border:1px solid rgba(242,239,233,.16);
}
@supports (max-height:64svh){.stack__poster img{max-height:64svh}}
.stack__item:has(.stack__poster)::after{
  background:linear-gradient(100deg,rgba(8,8,10,.95) 0%,rgba(8,8,10,.82) 44%,rgba(8,8,10,.58) 72%,rgba(8,8,10,.66) 100%);
}
/* cap the CONTENT, not the .wrap — .wrap has margin-inline:auto, so a
   max-width on it centres the column instead of holding the left edge */
/* the poster takes the right of the plate, so the title measure has to hold a
   whole word — 9ch split "Football" across two lines */
.stack__item:has(.stack__poster) .stack__t{max-width:12ch;overflow-wrap:normal}
.stack__item:has(.stack__poster) .stack__d{max-width:26ch}
.stack__item:has(.stack__poster) .stack__client{max-width:34ch}
@media (max-width:900px){
  /* fewer layers: the poster sits back into the ground, type keeps the page */
  .stack__poster{right:0;left:0;justify-content:center;opacity:.30}
  .stack__poster img{max-width:74vw;max-height:56vh;border:0}
  .stack__item:has(.stack__poster) .stack__t,
  .stack__item:has(.stack__poster) .stack__d{max-width:none}
  .stack__item:has(.stack__poster)::after{
    background:linear-gradient(to top,rgba(8,8,10,.95) 0%,rgba(8,8,10,.72) 46%,rgba(8,8,10,.5) 100%);
  }
}
.stack__body{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,8vh,6rem)}
.stack__idx{color:var(--bone);opacity:.7}
.stack__client{margin-top:.9rem;color:#B9B5AE}
.stack__t{font-size:clamp(2.8rem,10vw,9rem);margin-top:.4rem}
.stack__d{margin-top:1.2rem;max-width:34ch;color:#C9C5BD;font-size:clamp(1rem,1.4vw,1.3rem);line-height:1.45}
.stack__cta{margin-top:clamp(1.4rem,3vh,2.4rem)}
.stack__item .cta{border-color:rgba(242,239,233,.28)}
.stack__pending{position:absolute;top:calc(var(--nav-h) + 1rem);right:var(--gut)}
@media (max-width:760px){
  .stack__pending{top:auto;bottom:calc(100% - 1rem);right:var(--gut);display:none}
  .stack__d{display:none}
}

/* character rides above the plates on this page */
body[data-page="work"] .character{z-index:5}

/* ============================================================
   PAGE: CASE STUDY  —  dimension "deep"
   ============================================================ */

body[data-page="project"]{--ch-w:clamp(170px,18vw,300px)}
@media (max-width:900px){body[data-page="project"]{--ch-w:min(38vw,170px)}}

.case-head{padding-top:calc(var(--nav-h) + clamp(4rem,13vh,9rem));padding-bottom:clamp(2.5rem,6vh,5rem)}
.case-head__client{margin-bottom:1.2rem}
.case-head__h{font-size:clamp(3rem,11vw,11rem)}
.case-meta{display:grid;gap:1.6rem 2rem;grid-template-columns:repeat(2,1fr);margin-top:clamp(2.5rem,6vh,4.5rem);padding-top:1.6rem;border-top:1px solid var(--rule)}
@media (min-width:820px){.case-meta{grid-template-columns:repeat(4,1fr)}}
.case-meta dt{margin-bottom:.5rem}
.case-meta dd{margin:0;font-size:clamp(.95rem,1.1vw,1.1rem)}

.case-hero{position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;background:var(--plate)}
.case-hero img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover}
.case-hero .plate__fallback{position:absolute;inset:0;justify-content:center;align-items:flex-start;gap:1.1rem}

/* a campaign poster is portrait artwork — show it whole, on its own ground,
   rather than cropping it into a cinematic band */
.case-hero--poster{
  aspect-ratio:auto;display:flex;justify-content:center;align-items:center;
  padding:clamp(2rem,6vh,5.5rem) var(--gut);
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(228,0,43,.10),transparent 62%),
    #0E0E11;
  border-block:1px solid var(--rule);
}
.case-hero--poster img{
  position:relative;z-index:2;
  width:auto;height:auto;
  max-width:min(100%,600px);max-height:78vh;
  object-fit:contain;
}
.case-hero--poster .fpo{position:relative;inset:auto;width:min(100%,600px);aspect-ratio:3/4}

.case-block{display:grid;gap:1.4rem;padding-block:clamp(3rem,8vh,6.5rem);border-top:1px solid var(--rule)}
@media (min-width:900px){
  .case-block{grid-template-columns:minmax(0,16rem) minmax(0,1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
}
.case-block__k{position:sticky;top:calc(var(--nav-h) + 1.4rem)}
.case-block h2{font-size:clamp(1.6rem,3.4vw,2.8rem);line-height:1.06;letter-spacing:-.03em;margin-bottom:1.4rem}

.case-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1.4rem 1.8rem;margin-top:2rem;align-items:start}
.case-figs figure{position:relative;overflow:hidden;background:var(--plate)}
.case-figs img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e-out)}
.case-figs figure:hover img{transform:scale(1.04)}
.case-figs figcaption{margin-top:.7rem}
.case-figs .figure__n{font-size:clamp(2.2rem,4.6vw,4rem)}

.case-next{position:relative;display:block;padding-block:clamp(4rem,12vh,9rem);border-top:1px solid var(--rule)}
.case-next__h{font-size:clamp(2.4rem,8vw,7rem)}
.case-next:hover .case-next__h{color:var(--accent)}
.case-next__h{transition:color .4s var(--e-out)}

/* ============================================================
   PAGE: CAPABILITIES  —  dimension "system"
   ============================================================ */

body[data-page="capabilities"]{--ch-w:clamp(220px,24vw,420px)}
@media (max-width:900px){body[data-page="capabilities"]{--ch-w:min(46vw,215px)}}

.cap-head{padding-top:calc(var(--nav-h) + clamp(4rem,14vh,10rem));padding-bottom:clamp(3rem,8vh,6rem)}
.cap{border-top:1px solid var(--rule);padding-block:clamp(2.6rem,7vh,5.5rem);position:relative}
.cap__grid{display:grid;gap:1.6rem}
@media (min-width:960px){
  .cap__grid{grid-template-columns:5rem minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,4rem);align-items:start}
}
.cap__n{color:var(--accent-text)}
.cap__t{font-size:clamp(2rem,5.4vw,4.4rem);line-height:.94}
.cap__why{margin-top:1.4rem;max-width:40ch}
.cap__list li{padding-block:.6rem;border-bottom:1px solid var(--rule);display:flex;gap:.9rem;align-items:baseline}
.cap__list li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-.25em)}
.cap__list li:first-child{border-top:1px solid var(--rule)}

.process{display:grid;gap:1.6rem;margin-top:clamp(2rem,5vh,4rem)}
@media (min-width:860px){.process{grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,4vw,4rem)}}
.process__step{border-top:2px solid var(--accent);padding-top:1.2rem}
.process__step h3{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;line-height:1;margin-bottom:.9rem}

/* ============================================================
   PAGE: ABOUT  —  dimension "house"
   ============================================================ */

body[data-page="about"]{--ch-w:clamp(220px,24vw,420px)}
@media (max-width:900px){body[data-page="about"]{--ch-w:min(46vw,215px)}}

.about-head{padding-top:calc(var(--nav-h) + clamp(4rem,14vh,10rem));padding-bottom:clamp(3rem,8vh,6rem)}
.values{display:grid;gap:1.8rem}
@media (min-width:860px){.values{grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,4.5rem)}}
@media (min-width:1280px){.values{grid-template-columns:repeat(4,1fr)}}
.value{border-top:1px solid var(--rule);padding-top:1.2rem}
.value__n{color:var(--accent-text);margin-bottom:.8rem}
.value h3{font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.025em;line-height:1.02;margin-bottom:.8rem}

.team{display:grid;gap:1.4rem 1.6rem;grid-template-columns:repeat(2,1fr);margin-top:clamp(2rem,5vh,3.5rem)}
@media (min-width:820px){.team{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1200px){.team{grid-template-columns:repeat(4,1fr)}}
.person{border-top:1px solid var(--rule);padding-top:1rem}
.person__ph{aspect-ratio:4/5;background:var(--plate);margin-bottom:1rem;position:relative;overflow:hidden}
.person__ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e-out),filter .6s var(--e-out)}
body[data-dimension="house"] .person__ph img{filter:saturate(.9) contrast(1.02)}
body[data-dimension="press"] .character__frames{filter:saturate(.74) contrast(.94)}
body[data-dimension="press"] .character__shadow{opacity:.18}
.person:hover .person__ph img{transform:scale(1.035)}
/* leadership portraits sit inside the value cards */
.lead__ph{aspect-ratio:4/5;overflow:hidden;background:var(--plate);margin-bottom:1.2rem;max-width:22rem}
.lead__ph img{width:100%;height:100%;object-fit:cover}
.person__n{font-size:clamp(1.05rem,1.5vw,1.32rem);letter-spacing:-.02em;line-height:1.1}
.person__r{margin-top:.4rem}

.quote{padding-block:clamp(4rem,12vh,9rem);border-block:1px solid var(--rule)}
.quote blockquote{font-family:var(--f-serif);font-size:clamp(1.8rem,5.4vw,4.6rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.quote cite{display:block;margin-top:1.6rem;font-style:normal}

/* ============================================================
   PAGE: CONTACT  —  dimension "exit"
   ============================================================ */

body[data-page="contact"]{--ch-w:clamp(260px,30vw,520px)}
@media (max-width:900px){body[data-page="contact"]{--ch-w:min(58vw,280px)}}

.contact-head{padding-top:calc(var(--nav-h) + clamp(4rem,14vh,10rem));padding-bottom:clamp(2rem,6vh,4rem)}
/* the last beat: he comes to rest, and the room is built to hold him */
body[data-page="contact"] .outro{min-height:100vh;display:flex;flex-direction:column;justify-content:center}
@supports (min-height:100svh){body[data-page="contact"] .outro{min-height:100svh}}
.contact-grid{display:grid;gap:clamp(2.4rem,6vw,5rem);padding-bottom:clamp(4rem,12vh,9rem)}
@media (min-width:960px){.contact-grid{grid-template-columns:1.15fr .85fr}}
.contact-lines a{font-size:clamp(1.3rem,2.6vw,2.2rem);letter-spacing:-.025em;line-height:1.15;display:inline-block}
.contact-lines li{padding-block:1rem;border-bottom:1px solid var(--rule)}
.contact-lines li:first-child{border-top:1px solid var(--rule)}
.contact-lines li .meta{display:block;margin-bottom:.35rem}

.form{display:grid;gap:1.2rem}
.field{display:grid;gap:.5rem}
.field input,.field select,.field textarea{
  width:100%;background:transparent;color:var(--ink);
  border:0;border-bottom:1px solid var(--rule);
  padding:.85rem 0;font:inherit;border-radius:0;
}
.field textarea{resize:vertical;min-height:7rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent)}
.field select option{background:var(--plate);color:var(--ink)}
.form__note{font-size:.72rem}


/* ---------- CONTACT: form success ---------- */
.form-done{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.form-done.is-in{opacity:1;transform:none}
.form-done .h-lg{margin:.6rem 0 1.2rem}
.form-done .body-copy{max-width:36ch}
.form-done p:last-child{margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){
  .form-done{transition:none;transform:none}
  .character__live,.character__live video{transition:none}
}

/* ---------- ATMOSPHERE ----------
   The ground layer. Fixed, full-bleed, z-index 1 — below the character (2)
   and below main (3), so Boff still reads "between the ground and the type"
   exactly as the arrival was designed.

   The same plate is reused across the dark pages. To stop it reading as a
   repeated clip rather than a continuous space, each variant mirrors, offsets
   and re-scrims it, and JS drops the playback rate. The light pages (work,
   about) deliberately have no atmosphere at all — that contrast is the point. */
.atmos{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:1;transition:opacity .7s var(--e-out,ease);
}
body.atmos-out .atmos{opacity:0}

.atmos__bg{
  position:absolute;inset:0;overflow:hidden;
  background:#08080A url("../img/hero-dust-poster.webp") center/cover no-repeat;
}
.atmos__bg video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.atmos__bg video.is-on{opacity:1}

/* Default (index / arrival): darkest on the left where the h1 sits, opening
   to the right so the shaft still reads. Second pass lifts the bottom edge. */
.atmos__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(8,8,10,.92) 0%,
      rgba(8,8,10,.78) 32%,
      rgba(8,8,10,.44) 62%,
      rgba(8,8,10,.32) 100%),
    linear-gradient(to top,
      rgba(8,8,10,.88) 0%,
      rgba(8,8,10,0) 40%);
}

/* ---- variant: system (capabilities) ----
   Mirrored and pushed back hard. This page is a dense list of disciplines and
   the plate is doing nothing but keeping the ground from being flat. */
[data-atmos-variant="system"] .atmos__bg{background-color:#131110}
[data-atmos-variant="system"] .atmos__bg video{transform:scaleX(-1) scale(1.08)}
[data-atmos-variant="system"] .atmos__scrim{
  background:
    linear-gradient(180deg,
      rgba(19,17,16,.80) 0%,
      rgba(19,17,16,.90) 55%,
      rgba(19,17,16,.97) 100%);
}

/* ---- variant: deep (case studies) ----
   Mirrored and tilted the other way, and the scrim opens at the top-right so
   the shaft rakes down across the campaign title. Most cinematic of the four. */
[data-atmos-variant="deep"] .atmos__bg{background-color:#08080A}
[data-atmos-variant="deep"] .atmos__bg video{transform:scaleX(-1) scale(1.14) translateY(-3%)}
[data-atmos-variant="deep"] .atmos__scrim{
  background:
    linear-gradient(255deg,
      rgba(8,8,10,.34) 0%,
      rgba(8,8,10,.62) 38%,
      rgba(8,8,10,.88) 74%,
      rgba(8,8,10,.95) 100%),
    linear-gradient(to top,
      rgba(8,8,10,.92) 0%,
      rgba(8,8,10,0) 46%);
}

/* ---- variant: exit (contact) ----
   Boff is already alive on this page, so the plate stays well back — it is
   the room he is standing in, not a second thing competing for attention. */
[data-atmos-variant="exit"] .atmos__bg{background-color:#0A0A0B}
[data-atmos-variant="exit"] .atmos__bg video{transform:scale(1.2) translateX(6%)}
[data-atmos-variant="exit"] .atmos__scrim{
  background:
    linear-gradient(200deg,
      rgba(10,10,11,.90) 0%,
      rgba(10,10,11,.80) 40%,
      rgba(10,10,11,.66) 100%),
    linear-gradient(to top,
      rgba(10,10,11,.94) 0%,
      rgba(10,10,11,0) 42%);
}

@media (max-width:760px){
  /* narrow screens: Boff drops to z-index 2 as well, and a diagonal shaft
     behind stacked type reads as noise — flatten every variant to a wash */
  .atmos__scrim,
  [data-atmos-variant] .atmos__scrim{
    background:linear-gradient(to bottom,
      rgba(8,8,10,.88) 0%,
      rgba(8,8,10,.76) 45%,
      rgba(8,8,10,.93) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .atmos{transition:none}
  .atmos__bg video{display:none}
}

/* ---------- CONTACT: form success ---------- */
.form-done{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.form-done.is-in{opacity:1;transform:none}
.form-done .h-lg{margin:.6rem 0 1.2rem}
.form-done .body-copy{max-width:36ch}
.form-done p:last-child{margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){
  .form-done{transition:none;transform:none}
  .character__live,.character__live video{transition:none}
}

/* ---------- INDEX: hero atmosphere ----------
   The ground layer. Fixed, full-bleed, and sitting at z-index 1 — below the
   character (2) and below main (3), so Boff still reads "between the ground
   and the type" exactly as the arrival was designed. Fades out once the hero
   has been scrolled past rather than following you down the page. */
.atmos{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:1;transition:opacity .7s var(--e-out,ease);
}
body.atmos-out .atmos{opacity:0}

.atmos__bg{
  position:absolute;inset:0;
  background:#08080A url("../img/hero-dust-poster.webp") center/cover no-repeat;
}
.atmos__bg video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.atmos__bg video.is-on{opacity:1}

/* Darkest on the left where the h1 sits, opening to the right so the shaft
   still reads. Second pass lifts the bottom edge off the fold. */
.atmos__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(8,8,10,.92) 0%,
      rgba(8,8,10,.78) 32%,
      rgba(8,8,10,.44) 62%,
      rgba(8,8,10,.32) 100%),
    linear-gradient(to top,
      rgba(8,8,10,.88) 0%,
      rgba(8,8,10,0) 40%);
}

@media (max-width:760px){
  /* narrow screens: he drops to z-index 2 as well, and the diagonal shaft
     behind stacked type reads as noise — flatten it to a vertical wash */
  .atmos__scrim{
    background:linear-gradient(to bottom,
      rgba(8,8,10,.88) 0%,
      rgba(8,8,10,.74) 45%,
      rgba(8,8,10,.92) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .atmos{transition:none}
  .atmos__bg video{display:none}
}

/* ---------- CONTACT: form success ---------- */
.form-done{
  opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);
}
.form-done.is-in{opacity:1;transform:none}
.form-done .h-lg{margin:.6rem 0 1.2rem}
.form-done .body-copy{max-width:36ch}
.form-done p:last-child{margin-top:1.6rem}
@media (prefers-reduced-motion:reduce){
  .form-done{transition:none;transform:none}
  .character__live,.character__live video{transition:none}
}

/* ---------- INDEX: hero atmosphere ----------
   A plate, not a feature. It sits at the very back of the arrival stage,
   under Boff and under the type, held down by a scrim so the h1 never has to
   fight it. The poster image loads first and is never removed — if the video
   never attaches, the still is the design rather than a fallback. */
.arrival__bg{
  position:absolute;inset:0;z-index:0;
  background:#08080A url("../img/hero-dust-poster.webp") center/cover no-repeat;
  pointer-events:none;
}
.arrival__bg video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s ease;
}
.arrival__bg video.is-on{opacity:1}

/* Scrim: darkest at the left where the type sits, opening up to the right so
   the light shaft still reads. Second layer lifts the bottom edge off. */
.arrival__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(8,8,10,.92) 0%,
      rgba(8,8,10,.78) 32%,
      rgba(8,8,10,.42) 62%,
      rgba(8,8,10,.30) 100%),
    linear-gradient(to top,
      rgba(8,8,10,.85) 0%,
      rgba(8,8,10,0) 38%);
}
/* content and character both ride above the plate */
.arrival .wrap,.arrival__cue,.pin__progress{position:relative;z-index:2}

@media (max-width:760px){
  /* narrow screens read the shaft as noise behind stacked type — push it back */
  .arrival__scrim{
    background:
      linear-gradient(to bottom,
        rgba(8,8,10,.86) 0%,
        rgba(8,8,10,.72) 45%,
        rgba(8,8,10,.90) 100%);
  }
}
@media (prefers-reduced-motion:reduce){
  .arrival__bg video{display:none}
}

/* =========================================================
   14. ADDED PASS — insights, faq, the two timelines,
       what makes us special, the execution wall
   ========================================================= */

/* ---------- the two timelines ---------- */
.timelines{display:grid;gap:clamp(2rem,5vw,3.5rem);margin-top:clamp(2rem,5vh,3.5rem)}
@media (min-width:820px){.timelines{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}}
.timeline{border-top:2px solid var(--accent);padding-top:1.2rem}
.timeline__k{color:var(--accent-text);margin-bottom:.9rem}
.timeline h3{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.7rem,3.6vw,2.7rem);letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;margin:0 0 .5rem;
}
.timeline__w{font-family:var(--f-serif);font-style:italic;text-transform:none;
  letter-spacing:-.01em;font-size:clamp(1.05rem,1.8vw,1.35rem);color:var(--ink-soft);
  display:block;margin-bottom:1.2rem}
.timeline ul{display:grid;gap:0}
.timeline li{padding-block:.62rem;border-bottom:1px solid var(--rule);
  display:flex;gap:.9rem;align-items:baseline}
.timeline li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--accent);transform:translateY(-.25em)}
.timeline li:first-child{border-top:1px solid var(--rule)}

/* ---------- what makes us special ---------- */
.special{display:grid;gap:0;margin-top:clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--rule)}
.special__row{
  display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.4rem;align-items:baseline;
  padding-block:clamp(1.1rem,2.6vh,1.7rem);border-bottom:1px solid var(--rule);
}
@media (min-width:760px){
  .special__row{grid-template-columns:4.5rem minmax(0,15.5rem) minmax(0,1fr);
    gap:0 clamp(1.5rem,4vw,3.5rem)}
}
.special__n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--accent-text)}
.special__t{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.2rem,2.2vw,1.72rem);letter-spacing:-.028em;line-height:1.02;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.special__d{color:var(--ink-soft);max-width:46ch}
@media (max-width:759px){
  .special__n{grid-column:1}
  .special__t{grid-column:2}
  .special__d{grid-column:1 / -1;margin-top:.2rem}
}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(2rem,5vh,3.5rem);border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__item summary{
  list-style:none;cursor:pointer;display:grid;
  grid-template-columns:auto 1fr auto;gap:0 clamp(1rem,3vw,2.2rem);
  align-items:start;padding-block:clamp(1.2rem,2.8vh,1.8rem);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faq__n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  color:var(--accent-text);padding-top:.42rem;min-width:2.6rem}
.faq__q{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.15rem,2.6vw,2rem);letter-spacing:-.028em;line-height:1.04;
  text-transform:uppercase;margin:0;text-wrap:balance;
}
.faq__sign{
  flex:none;width:1.15rem;height:1.15rem;position:relative;margin-top:.42rem;
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--ink);
  transition:transform .32s var(--e-out),opacity .32s var(--e-out);
}
.faq__sign::after{transform:rotate(90deg)}
.faq__item[open] .faq__sign::after{transform:rotate(90deg) scaleX(0);opacity:0}
.faq__a{padding:0 0 clamp(1.4rem,3vh,2.2rem)}
@media (min-width:760px){.faq__a{padding-left:calc(2.6rem + clamp(1rem,3vw,2.2rem))}}
.faq__a p{color:var(--ink-soft);max-width:64ch}
.faq__a p + p{margin-top:.9rem}

/* ---------- insights: the list ---------- */
.posts{display:grid;gap:0;border-top:1px solid var(--rule);
  margin-top:clamp(2rem,5vh,3.5rem)}
.post-row{
  display:grid;gap:.8rem 0;padding-block:clamp(1.8rem,4.5vh,3rem);
  border-bottom:1px solid var(--rule);position:relative;
}
@media (min-width:900px){
  .post-row{grid-template-columns:9rem minmax(0,1fr) 12rem;
    gap:0 clamp(1.5rem,4vw,3.5rem);align-items:start}
}
.post-row__k{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);padding-top:.5rem}
.post-row__t{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.6rem,4.2vw,3.1rem);letter-spacing:-.032em;line-height:.98;
  text-transform:uppercase;margin:0;max-width:18ch;text-wrap:balance;
}
.post-row__s{margin-top:1rem;color:var(--ink-soft);max-width:52ch}
.post-row__go{align-self:end;justify-self:start}
@media (min-width:900px){.post-row__go{justify-self:end;padding-top:.5rem;align-self:start}}
.post-row a.tlink{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase}
.post-row a::after{content:"";position:absolute;inset:0}

/* ---------- insights: the article ---------- */
.article{max-width:62ch;margin-top:clamp(2.4rem,6vh,4rem)}
.article h2{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.5rem,3.2vw,2.3rem);letter-spacing:-.03em;line-height:1.02;
  text-transform:uppercase;margin:clamp(2.2rem,5vh,3.4rem) 0 1rem;
}
.article p{color:var(--ink-soft);font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.62}
.article p + p{margin-top:1.1rem}
.article__stand{
  font-family:var(--f-serif);font-style:italic;text-transform:none;letter-spacing:-.01em;
  font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.32;color:var(--ink);
  max-width:34ch;
}
.article__rule{border:0;border-top:1px solid var(--rule);margin:clamp(2.4rem,6vh,4rem) 0}

/* a truthful stub where source copy does not exist yet */
.stub{
  border:1px dashed var(--rule);padding:clamp(1.4rem,3.4vw,2.2rem);
  max-width:62ch;margin-top:clamp(1.6rem,3.5vh,2.4rem);
}
.stub p{color:var(--ink-soft)}
.stub p + p{margin-top:.8rem}

/* ---------- the execution team ----------
   Portraits are cut from the captioned contact sheet, not the deck: automated
   face-matching between the two sets scored zero confident pairs, and a wrong
   name under a real person's face is the one error worth avoiding entirely. */

/* ---------- the old small wall (kept for any legacy markup) ---------- */
.wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(4.6rem,11vw,7.4rem),1fr));
  gap:clamp(.35rem,1vw,.6rem);margin-top:clamp(2rem,5vh,3.5rem);list-style:none;padding:0;
}
.wall li{margin:0}
.wall__ph{
  aspect-ratio:4/5;overflow:hidden;background:var(--plate);position:relative;
  border-bottom:2px solid var(--accent);
}
.wall__ph img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.04);
  transition:transform .8s var(--e-out),filter .5s var(--e-out);
}
.wall li:hover .wall__ph img,
.wall li:focus-within .wall__ph img{filter:grayscale(0) contrast(1);transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .wall__ph img{transition:none}
  .wall li:hover .wall__ph img{transform:none}
}
.wall__note{margin-top:1.4rem;max-width:52ch}

/* ---------- client words, pending ---------- */
.words{margin-top:clamp(2rem,5vh,3.5rem)}
.words__q{
  font-family:var(--f-serif);font-size:clamp(1.5rem,4.2vw,3.2rem);line-height:1.1;
  letter-spacing:-.02em;max-width:24ch;color:var(--ink);margin:0;
}
.words__names{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.8rem}

/* a named campaign with no artwork yet — an honest empty plate, not a grey box */
.lockup--empty{
  position:relative;aspect-ratio:1030/572;background:var(--plate);
  border:1px solid var(--rule);display:block;
}
.lockup--empty::after{
  content:"Artwork to follow";position:absolute;inset:auto 0 0 0;
  padding:.7rem .9rem;font-family:var(--f-mono);font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.lockup--empty::before{
  content:"";position:absolute;left:.9rem;top:.9rem;width:1.5rem;height:2px;
  background:var(--accent);
}

/* ---------- gallery ----------
   Masonry by CSS columns, and every piece keeps its own proportions.
   Cropping campaign artwork to a common ratio is what ruined the work
   plates the first time round; it is not repeated here. */
.gal{
  columns:2;column-gap:clamp(.5rem,1.4vw,1rem);
  margin-top:clamp(2rem,5vh,3.5rem);list-style:none;padding:0;
}
@media (min-width:760px){.gal{columns:3}}
@media (min-width:1360px){.gal{columns:4}}
.gal li{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  margin:0 0 clamp(1.4rem,3vw,2.2rem);display:block;
}
.gal figure{margin:0}
.gal__ph{overflow:hidden;background:var(--plate);border:1px solid var(--rule)}
.gal__ph img{
  width:100%;height:auto;display:block;
  transition:transform .9s var(--e-out);
}
.gal li:hover .gal__ph img,
.gal li:focus-within .gal__ph img{transform:scale(1.035)}
.gal figcaption{display:grid;gap:.3rem;margin-top:.8rem}
.gal__c{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text)}
.gal__t{font-size:.95rem;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
@media (prefers-reduced-motion:reduce){
  .gal__ph img{transition:none}
  .gal li:hover .gal__ph img{transform:none}
}

/* ---------- clients ---------- */
.clients{
  display:grid;gap:clamp(1.6rem,3vw,2.4rem) clamp(.6rem,1.6vw,1.1rem);
  grid-template-columns:repeat(2,1fr);
  margin-top:clamp(2rem,5vh,3.5rem);list-style:none;padding:0;
}
@media (min-width:620px){.clients{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.clients{grid-template-columns:repeat(4,1fr)}}
.clients li{margin:0;display:flex;flex-direction:column}
.client{
  margin:0;background:#fff;border:1px solid var(--rule);
  aspect-ratio:5/3;min-height:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,2.6vw,1.9rem);
  transition:border-color .4s var(--e-out);
}
.client:hover{border-color:var(--accent)}
.client img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  min-width:0;min-height:0;object-fit:contain;display:block;
  mix-blend-mode:multiply;
}
.client__n{
  margin-top:.7rem;
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);text-align:center;
}
.sectors{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:clamp(1.4rem,3vh,2rem)}
.sector{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--rule);padding:.42rem .8rem;border-radius:2px;
}

/* ---------- gallery: grouped by campaign ---------- */
.gal-set{margin-top:clamp(2.6rem,6vh,4.5rem)}
.gal-set__head{
  display:grid;gap:.4rem;padding-bottom:1rem;border-bottom:1px solid var(--rule);
}
@media (min-width:820px){
  .gal-set__head{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 2rem}
}
.gal-set__c{color:var(--accent-text)}
.gal-set__t{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.5rem,3.4vw,2.5rem);letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;margin:0;
}
.gal-set .gal{margin-top:clamp(1.2rem,3vh,2rem)}

/* ---------- pack shot ----------
   A cut-out can is not a tile. It gets its own cold ground and is shown whole,
   floor to crown, with the campaign lines beside it rather than under. */
.packshot{
  position:relative;margin-top:clamp(1.2rem,3vh,2rem);
  display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;
  background:linear-gradient(170deg,#0E1A2B 0%,#16243A 45%,#0A1220 100%);
  border:1px solid var(--rule);
  padding:clamp(1.8rem,4vw,3.2rem);
  overflow:hidden;
}
@media (min-width:760px){
  .packshot{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
}
.packshot::before{
  content:"";position:absolute;inset:-30% -10% auto -10%;height:90%;
  background:radial-gradient(55% 100% at 30% 60%, rgba(120,190,255,.22), transparent 70%);
  pointer-events:none;
}
.packshot__can{
  position:relative;justify-self:center;margin:0;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.packshot__can img{
  display:block;width:auto;height:auto;
  max-width:min(100%,11rem);max-height:clamp(17rem,42vw,26rem);
  margin-inline:auto;
}
.packshot__body{position:relative;color:#EAF2FB}
.packshot__k{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:#7FB6E8;margin:0 0 .9rem;
}
.packshot__t{
  font-family:var(--f-display);font-weight:800;font-stretch:106%;
  font-size:clamp(1.7rem,4.4vw,3.2rem);letter-spacing:-.035em;line-height:.94;
  text-transform:uppercase;margin:0 0 1.1rem;color:#fff;
}
.packshot__d{color:#B9CBDE;max-width:44ch;font-size:.98rem;line-height:1.55}
.packshot__specs{display:flex;flex-wrap:wrap;gap:.5rem .6rem;margin-top:1.4rem}
.packshot__specs span{
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:#CFE0F1;border:1px solid rgba(180,215,250,.32);padding:.4rem .7rem;border-radius:2px;
}

/* brand grounds — each pack stands on its own colour, not one generic panel.
   --lite keeps the base cold blue; the rest override it. */
.packshot--lite{}
.packshot--lager{background:linear-gradient(168deg,#3A0B0B 0%,#7A1414 48%,#2A0808 100%)}
.packshot--lager::before{background:radial-gradient(55% 100% at 30% 60%, rgba(255,196,120,.24), transparent 70%)}
.packshot--lager .packshot__k{color:#F0B45E}
.packshot--lager .packshot__d{color:#E8CDBE}
.packshot--lager .packshot__specs span{color:#F6E3D2;border-color:rgba(246,200,140,.34)}

.packshot--label{background:linear-gradient(168deg,#141414 0%,#241416 46%,#0B0B0C 100%)}
.packshot--label::before{background:radial-gradient(55% 100% at 32% 58%, rgba(224,176,96,.22), transparent 70%)}
.packshot--label .packshot__k{color:#D8AE62}
.packshot--label .packshot__d{color:#CBBBA6}
.packshot--label .packshot__specs span{color:#EEDFC6;border-color:rgba(216,174,98,.34)}

.packshot--one80{background:linear-gradient(168deg,#2A1704 0%,#7A4708 46%,#1C0F03 100%)}
.packshot--one80::before{background:radial-gradient(55% 100% at 32% 58%, rgba(255,190,80,.24), transparent 70%)}
.packshot--one80 .packshot__k{color:#F5C15A}
.packshot--one80 .packshot__d{color:#EAD6B4}
.packshot--one80 .packshot__specs span{color:#F8E9CC;border-color:rgba(245,193,90,.34)}

/* a brand with no cut-out yet: the key visual sits framed instead of floating */
.packshot__can--framed{filter:none}
.packshot__can--framed img{
  max-width:min(100%,13rem);max-height:clamp(15rem,36vw,22rem);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 30px rgba(0,0,0,.45);
}
@media (min-width:760px){
  .packshot:has(.packshot__can--framed){grid-template-columns:minmax(0,15rem) minmax(0,1fr)}
}

/* ---------- a stack plate with no artwork ----------
   The DStv Banter key visual was only ever hotlinked from a third-party CDN.
   Rather than leave a plate that renders as a black hole when that host is
   unreachable, the placeholder is designed: brand ground, the campaign line
   at full strength, and an honest tag. */
.fpo--live{
  background:
    linear-gradient(152deg,rgba(0,80,190,.42) 0%,rgba(0,40,110,.18) 46%,transparent 70%),
    linear-gradient(28deg,rgba(228,0,43,.20) 0%,transparent 52%),
    repeating-linear-gradient(58deg,rgba(255,255,255,.028) 0 2px,transparent 2px 10px),
    #0C1220;
}
/* the stack plate already carries its own headline in .stack__body, so the
   placeholder line is pushed to the opposite corner instead of colliding */
.fpo--live .fpo__line{
  color:rgba(242,239,233,.14);
  max-width:9ch;
  align-self:flex-end;
  text-align:right;
  margin-block:auto 0;
}
@media (min-width:900px){
  .fpo--live .fpo__line{max-width:8ch;margin-bottom:14vh}
}
.fpo--live .fpo__client{color:#7FB6E8}
.fpo--live .fpo__tag{color:#CFE0F1;border-color:rgba(180,215,250,.4)}
/* the stack scrim is tuned for photography; lift it where the plate is type */
.stack__item:has(.fpo--live)::after{
  background:linear-gradient(to top,rgba(8,8,10,.86) 0%,rgba(8,8,10,.34) 40%,transparent 74%);
}

/* a hero carrying stand-in artwork says so, quietly, rather than passing it off */
.case-hero__note{
  display:block;margin-top:.9rem;text-align:center;
  color:var(--ink-soft);
}