/* ===========================================================================
   ONE & ONLY MEDIA — Activation Build, after dark
   The design system is still the mall activation, but the lights are down:
   the step-and-repeat is lit rather than printed, every card is a screen in a
   dark bezel, and the floor shadows have become ambient glows.
   Palette follows the v2 "Neon Curator" direction, with the logo-sampled
   magenta kept as primary rather than v2's softer pastel.
   =========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root{
  /* brand — magenta is still sampled from the logo, not from any mockup */
  --magenta:#EB3C96;        /* primary */
  --magenta-lit:#FF89AB;    /* v2 haute pink: glow, hover, small text on dark */
  --magenta-deep:#C0206F;   /* gradient end — never a text colour on dark */
  --violet:#BC83FF;         /* v2 secondary */
  --violet-deep:#8600EF;
  --cyan:#C1FFFE;           /* v2 tertiary — sparing, a cooling agent */

  /* the five accents that carry the service and channel colour coding */
  --a-magenta:#EB3C96;
  --a-coral:#F08C73;
  --a-apricot:#FAC39B;
  --a-violet:#BC83FF;
  --a-cyan:#C1FFFE;

  /* surface tiers — the room, stacked */
  --surface-lowest:#000000;
  --surface:#0E0E13;
  --surface-low:#131318;
  --surface-container:#19191F;
  --surface-high:#1F1F26;
  --surface-highest:#25252C;
  --surface-bright:#2C2B33;

  --on-surface:#F8F5FD;          /* never pure white — ocular fatigue on dark */
  --on-surface-variant:#ACAAB1;

  /* materials: the foam edge is now a screen bezel, same geometry */
  --bezel:#0B0910;
  --bezel-w:7px;
  --ghost:rgba(255,255,255,.10);        /* felt, not seen */
  --ghost-strong:rgba(255,255,255,.18);

  --rail:2px;
  --r-lg:14px;
  --r-md:10px;
  --r-sm:6px;

  /* depth is light, not smudge: a black seat plus a violet-tinted ambience */
  --shadow-floor:0 24px 44px -24px rgba(0,0,0,.88), 0 0 40px rgba(49,0,93,.20);
  --shadow-lift:0 32px 60px -26px rgba(0,0,0,.92), 0 0 56px rgba(49,0,93,.34);
  --glow-magenta:0 0 24px rgba(235,60,150,.34);

  --pad:clamp(1.25rem, 4vw, 3.5rem);
  --gap:clamp(1rem, 2.2vw, 2rem);
  --bleed:min(1440px, 100%);

  --ease:cubic-bezier(.16,.84,.3,1);
}

/* --- reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,video,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

/* --- browser surfaces: these ship with the design, not with the browser -- */
::selection{background:var(--magenta);color:#fff}
/* the whole page is dark now, so one focus ring serves every ground */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--cyan);
  outline-offset:3px;
  border-radius:3px;
}
html{scrollbar-color:var(--magenta) var(--surface-high)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--surface-high)}
::-webkit-scrollbar-thumb{background:var(--magenta);border:3px solid var(--surface-high);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--magenta-lit)}
:root{caret-color:var(--magenta-lit)}
a{text-underline-offset:.18em;text-decoration-thickness:from-font}

/* --- typography --------------------------------------------------------- */
body{
  font-family:"Archivo","Noto Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.62;
  color:var(--on-surface);
  background:var(--surface);
  font-variant-numeric:tabular-nums;
}
.display,h1,h2{
  font-family:"Gabarito","Archivo","Noto Sans SC",system-ui,sans-serif;
  font-weight:800;
  line-height:.94;
  letter-spacing:-.03em;
  text-wrap:balance;
}
h1{font-size:clamp(2.4rem,6.6vw,5.25rem)}
h2{font-size:clamp(2rem,5.2vw,3.75rem)}
h3{
  font-family:"Gabarito","Archivo",system-ui,sans-serif;
  font-weight:700;font-size:1.3rem;line-height:1.12;letter-spacing:-.02em;
  text-wrap:balance;
}
p{max-width:68ch}
.lede{font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.5;max-width:46ch;color:var(--on-surface-variant)}

/* the production spec tag — a registration mark on a built element,
   never an eyebrow stacked above a heading */
.spec{
  font-family:"Archivo",system-ui,sans-serif;
  font-weight:600;font-size:.71rem;line-height:1.35;
  letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;
}

/* --- layout ------------------------------------------------------------- */
.wrap{width:var(--bleed);margin-inline:auto;padding-inline:var(--pad)}
.zone{position:relative;padding-block:clamp(4rem,9vw,8rem)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--cyan);color:var(--surface);padding:.75rem 1.15rem;border-radius:0 0 var(--r-sm) 0;
  font-weight:700;
}
.skip:focus{left:0}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================================
   THE BACKDROP — first viewport
   The press wall is no longer printed magenta; it is a dark wall with the
   step-and-repeat catching the light, and the brand colour arrives as glow.
   ========================================================================= */
.backdrop{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  background:var(--surface);
  color:var(--on-surface);
  overflow:hidden;
  isolation:isolate;
}
.backdrop__wall{
  position:absolute;inset:-14% -10%;
  width:120%;height:128%;
  z-index:-2;
  pointer-events:none;
}
/* stage lighting: a magenta wash from above and a violet bloom off to one
   side, so the wall is lit rather than filled */
.backdrop::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 74% at 50% -20%, rgba(235,60,150,.30), transparent 64%),
    radial-gradient(70% 60% at 88% 18%, rgba(188,131,255,.20), transparent 70%),
    linear-gradient(180deg, transparent 46%, rgba(0,0,0,.55) 100%);
}

/* overhead truss + hung nav */
.rig{position:relative;z-index:3;padding-top:clamp(.5rem,1.4vw,1rem)}
.truss{width:100%;height:clamp(30px,3.2vw,42px);color:rgba(255,255,255,.42)}
.rig__wires{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--gap);flex-wrap:wrap;
}
.wire{position:relative;padding-top:clamp(14px,2.4vw,26px)}
.wire::before{
  content:"";position:absolute;top:0;left:50%;width:1px;height:clamp(14px,2.4vw,26px);
  background:rgba(255,255,255,.28);
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand img{width:clamp(38px,4.4vw,54px);height:auto;filter:drop-shadow(0 2px 10px rgba(235,60,150,.5))}
.brand__name{
  font-family:"Gabarito",system-ui,sans-serif;font-weight:800;
  font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.05;letter-spacing:-.02em;
  white-space:nowrap;
}
.brand__cn{
  display:block;font-family:"Noto Sans SC","Archivo",sans-serif;font-weight:500;
  font-size:.72rem;letter-spacing:.28em;margin-top:.2em;color:var(--on-surface-variant);
}
.nav{display:flex;gap:clamp(.9rem,2vw,1.9rem);align-items:center;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-weight:600;font-size:.86rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-surface-variant);
  padding-bottom:3px;border-bottom:2px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
}
.nav a:hover{color:var(--on-surface);border-bottom-color:var(--magenta)}

.backdrop__body{
  position:relative;z-index:2;
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
  padding-block:clamp(2rem,5vw,4rem);
}
/* on the homepage the lockup is the brand mark, so the nav hangs alone */
.rig__wires--nav-only{justify-content:flex-end}
.hero-logo{
  display:block;width:min(100%,clamp(300px,50vw,620px));height:auto;
  margin-bottom:clamp(1.25rem,2.5vw,2rem);
  filter:drop-shadow(0 4px 22px rgba(235,60,150,.35));
}
.backdrop h1{margin-bottom:clamp(1rem,2vw,1.5rem)}
/* the emphasised word is the one piece of the headline that is lit */
.backdrop h1 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--magenta-lit),var(--violet) 62%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.backdrop .lede{color:var(--on-surface-variant);margin-bottom:clamp(1.5rem,3vw,2.25rem)}
@media (max-width:860px){
  .backdrop__body{grid-template-columns:minmax(0,1fr)}
  .backdrop__stage{max-width:290px}
}

/* =========================================================================
   THE HOMEPAGE HERO
   The reel stays a framed totem rather than a bleeding panel — the footage is
   bright client content and at full bleed it overpowers the lit wall behind
   it. The hero is capped instead, so the first viewport is filled by the
   composition rather than by slack above it.
   ========================================================================= */
.backdrop--stage{min-height:min(100svh,900px)}
.backdrop--stage .backdrop__body{
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  padding-block:clamp(1.25rem,3vw,2.25rem);
}
/* the screen keeps its native 3:4 — no client frame is ever cropped — so the
   column is tuned instead, to stand the totem at roughly the height of the
   headline block. Widening it further is self-defeating: it narrows the text
   column, the headline wraps to a third line, and the block grows faster than
   the totem does. */
@media (max-width:860px){
  .backdrop--stage .backdrop__body{grid-template-columns:minmax(0,1fr)}
}

/* the deck: the platform edge, now a lit rail rather than a coral slab */
.deck{
  position:relative;z-index:2;
  background:var(--surface-low);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,var(--magenta),var(--violet) 55%,var(--cyan)) 1;
  box-shadow:0 -24px 44px -28px rgba(235,60,150,.55);
}
.deck__inner{
  display:flex;flex-wrap:wrap;gap:.5rem clamp(1rem,3vw,2.5rem);
  align-items:center;justify-content:space-between;
  padding-block:.85rem;
}
.deck .spec{color:var(--magenta-lit);font-size:.76rem;font-weight:700}

/* --- actions: the foamboard plates are now lit panels -------------------- */
.actions{display:flex;flex-wrap:wrap;gap:.8rem}
.plate{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--surface-highest);color:var(--on-surface);
  font-family:"Gabarito",system-ui,sans-serif;font-weight:700;font-size:1rem;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
  padding:.85rem 1.35rem;
  border:1px solid var(--ghost);
  border-radius:999px;
  box-shadow:var(--shadow-floor);
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.plate:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.plate:active{transform:translateY(-1px)}
/* primary: the one gradient on the page allowed to shout */
.plate--go{
  background:linear-gradient(96deg,var(--magenta),var(--magenta-deep));
  color:#fff;border-color:transparent;
}
.plate--go:hover{box-shadow:var(--shadow-lift),var(--glow-magenta);filter:brightness(1.06)}
.plate--wa{
  background:linear-gradient(96deg,var(--violet),var(--violet-deep));
  color:#fff;border-color:transparent;
}
.plate--wa:hover{box-shadow:var(--shadow-lift),0 0 24px rgba(188,131,255,.36)}
/* glass, over whatever it happens to sit on */
.plate--ghost{
  background:rgba(37,37,44,.4);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  color:var(--on-surface);
  border-color:var(--ghost-strong);box-shadow:none;
}
.plate--ghost:hover{background:rgba(37,37,44,.7);box-shadow:none}
.plate svg{width:19px;height:19px;flex:none}

/* =========================================================================
   THE LED TOTEM — the component the whole dark build is designed around
   ========================================================================= */
.totem{
  position:relative;
  background:linear-gradient(150deg,var(--surface-bright),var(--bezel) 45%);
  padding:10px;
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift), inset 0 1px 0 rgba(255,255,255,.10);
}
.totem::after{
  content:"";position:absolute;inset:10px;border-radius:var(--r-sm);
  background:linear-gradient(158deg, rgba(255,255,255,.10), transparent 42%);
  pointer-events:none;
}
.totem__screen{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--bezel);
}
.totem__screen video,.totem__screen img{width:100%;height:100%;object-fit:cover}
.totem__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.55rem .7rem;
  color:#fff;
  /* the caption sits over arbitrary video frames, so the scrim stays strong
     enough behind the text itself and only fades above it */
  background:linear-gradient(0deg, rgba(11,9,16,.94) 0 62%, rgba(11,9,16,.58) 82%, transparent);
}

/* =========================================================================
   SPONSOR STRIP — client credits
   ========================================================================= */
.sponsors{background:var(--surface-lowest);color:var(--on-surface);padding-block:clamp(1.75rem,3.2vw,2.5rem)}
.sponsors__inner{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem clamp(.4rem,1.4vw,1.1rem)}
/* client marks arrive in every possible state — white boxes, black boxes, a
   red box, a baked-in checkerboard — so each is redrawn as a white silhouette
   and centred on one shared canvas, scaled to equal ink area rather than to
   equal height. They then sit at a single optical weight, as the names did. */
.sponsors__logo{
  width:clamp(94px,12vw,146px);height:auto;
  opacity:.78;
  transition:opacity .18s var(--ease);
}
.sponsors__logo:hover{opacity:1}
.sponsors .spec{margin-left:clamp(.4rem,1.5vw,1.2rem)}
.sponsors .spec{color:var(--cyan)}

/* =========================================================================
   THE TOTEM WALL — 12 real clips
   ========================================================================= */
.zone-head{
  display:grid;gap:clamp(1rem,2vw,1.75rem);
  grid-template-columns:minmax(0,1fr);
  margin-bottom:clamp(2rem,4vw,3rem);
}
@media (min-width:900px){
  .zone-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}
}
.reel{
  display:grid;
  /* 12 clips land as 4 / 4 / 4 on desktop and 2 / 2 on phones,
     so the wall never ends on an orphaned row */
  grid-template-columns:repeat(auto-fill,minmax(min(46%,285px),1fr));
  gap:var(--gap);
}
.reel__play{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  background:transparent;border:0;cursor:pointer;color:#fff;padding:0;
  transition:background .2s var(--ease), opacity .2s var(--ease);
}
.reel__play:hover{background:rgba(11,9,16,.34)}
.reel__play span{
  width:52px;height:52px;border-radius:50%;
  background:rgba(20,16,24,.72);
  border:1px solid var(--ghost-strong);
  display:grid;place-items:center;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7);
  transition:transform .22s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.reel__play:hover span{transform:scale(1.09);background:var(--magenta);border-color:transparent;box-shadow:var(--glow-magenta)}
.reel__play svg{width:20px;height:20px;margin-left:3px}
/* the badge is an affordance, not furniture: with a pointer it stays out of
   the frame until you go for the tile. The button itself still covers the
   whole screen, so the hit target and the keyboard control are unchanged.
   Touch has no hover to reveal it, so there it stays put. */
@media (hover:hover) and (pointer:fine){
  .reel__play span{opacity:0;transform:scale(.92)}
  .reel__play:hover span,
  .reel__play:focus-visible span{opacity:1;transform:scale(1.09)}
  .reel__play span{transition:transform .22s var(--ease), opacity .22s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease)}
}
.totem.is-playing .reel__play{opacity:0;pointer-events:none}
.totem.is-playing .totem__tag{opacity:0;transition:opacity .3s var(--ease)}

/* =========================================================================
   DIECUT STANDEES — the eight service lines
   Each standee keeps its accent, but the accent now tints a dark glass panel
   instead of filling a foamboard face.
   ========================================================================= */
.floor{background:linear-gradient(180deg, var(--surface), var(--surface-low))}
.standees{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));
  gap:clamp(1.6rem,3vw,2.5rem) var(--gap);
  align-items:stretch;   /* one even shelf; the colour run and the glow carry
                            the variety, not ragged heights */
}
.standee{
  position:relative;
  --accent:var(--a-magenta);
  background:var(--surface-high);
  background:linear-gradient(158deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 58%), var(--surface-high);
  border:var(--bezel-w) solid var(--bezel);
  /* the signature cut: one corner opened up, the rest held tight */
  border-radius:var(--r-md) 22px var(--r-md) var(--r-md);
  padding:clamp(1.1rem,2vw,1.5rem);
  box-shadow:var(--shadow-floor);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* the cast floor shadow is now a pool of the standee's own accent light */
.standee::after{
  content:"";position:absolute;left:8%;right:8%;bottom:-15px;height:14px;
  background:radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 72%);
  filter:blur(7px);
  opacity:.5;
  pointer-events:none;
  transition:opacity .25s var(--ease);
}
.standee:hover{transform:translateY(-5px) rotate(-.35deg);box-shadow:var(--shadow-lift)}
.standee:hover::after{opacity:.9}
.standee h3{margin-bottom:.5rem;color:var(--accent)}
.standee p{font-size:.95rem;color:var(--on-surface-variant)}
.standee--m{--accent:var(--a-magenta)}
.standee--c{--accent:var(--a-coral)}
.standee--a{--accent:var(--a-apricot)}
.standee--o{--accent:var(--a-violet)}
.standee--l{--accent:var(--a-cyan)}

/* six items in a four-column auto-fit leaves a hole in the last row;
   this variant settles them 3 x 2 once there is room */
@media (min-width:900px){
  .standees--three{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================================
   RAISED ZONE — was a band of ink against a light page; now it is simply
   one tier up, so the page still changes register here
   ========================================================================= */
.onink{position:relative;background:var(--surface-container);isolation:isolate;overflow:hidden}
.onink::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:auto -10% -30% auto;left:-12%;height:70%;
  background:radial-gradient(60% 100% at 20% 100%, rgba(188,131,255,.13), transparent 70%);
}
.onink h2{color:var(--on-surface)}
.onink .lede{color:var(--on-surface-variant)}
.onink .spec{color:var(--cyan)}

.rail-nav{
  display:flex;gap:.5rem;justify-content:flex-end;
  margin-top:.9rem;
}
.rail-nav button{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;color:var(--on-surface);
  border:2px solid var(--ghost-strong);border-radius:50%;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.rail-nav button:hover:not(:disabled){background:var(--magenta);border-color:var(--magenta);color:#fff}
.rail-nav button:disabled{opacity:.3;cursor:default}
.rail-nav svg{width:20px;height:20px}
@media (hover:none){.rail-nav{display:none}}

/* =========================================================================
   OWNED CHANNELS — the four verticals
   Each unit is a screen in a bezel, with its accent lighting the base.
   ========================================================================= */
.channels{
  display:grid;gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr));
}
.channel{
  position:relative;
  --accent:var(--a-magenta);
  --accent-lit:var(--magenta-lit);   /* small text needs the lighter tint */
  display:flex;flex-direction:column;
  border:var(--bezel-w) solid var(--bezel);
  border-radius:var(--r-md);
  background:var(--surface-high);
  color:var(--on-surface);
  text-decoration:none;
  box-shadow:var(--shadow-floor);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* a screen set into the face of the unit */
.channel__screen{
  position:relative;display:block;
  aspect-ratio:9/16;background:var(--bezel);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  overflow:hidden;
}
.channel__screen img,.channel__screen video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.channel__screen video{position:absolute;inset:0}
.channel__screen--empty{
  display:grid;place-items:center;
  background:
    repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 10px,transparent 10px 20px),
    var(--bezel);
}
.channel__screen--empty span{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.channel__body{
  position:relative;
  display:flex;flex-direction:column;gap:.45rem;flex:1;
  padding:clamp(1rem,1.7vw,1.3rem);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent);
}
.channel--m{--accent:var(--a-magenta);--accent-lit:var(--magenta-lit)}
.channel--c{--accent:var(--a-coral);--accent-lit:var(--a-coral)}
.channel--o{--accent:var(--a-violet);--accent-lit:var(--a-violet)}
.channel--l{--accent:var(--a-cyan);--accent-lit:var(--a-cyan)}
.channel--a{--accent:var(--a-apricot);--accent-lit:var(--a-apricot)}
.channel:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}
.channel__handle{
  font-family:"Gabarito",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.15rem,2.2vw,1.5rem);letter-spacing:-.025em;line-height:1.05;
  color:var(--on-surface);
}
/* the category reads as a shelf tag on the base of the unit, never as a
   kicker stacked above the handle */
.channel__cat{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-lit);
  margin-top:auto;padding-top:.85rem;
  border-top:1px solid var(--ghost);
}
.channel__what{font-size:.92rem;line-height:1.45;color:var(--on-surface-variant)}
.channel__arrow{
  position:absolute;z-index:2;
  top:clamp(.85rem,1.6vw,1.15rem);right:clamp(.85rem,1.6vw,1.15rem);
  width:24px;height:24px;
  color:#fff;                                  /* it sits over the screen */
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.65));
  transition:transform .25s var(--ease);
}
.channel:hover .channel__arrow{transform:translate(3px,-3px)}

/* =========================================================================
   RUN SHEET — the four-move campaign schedule
   ========================================================================= */
.run{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:.35rem clamp(1rem,3vw,2.5rem);
  align-items:baseline;
  padding-block:clamp(1.4rem,2.8vw,2.1rem);
  border-bottom:1px solid var(--ghost);
}
.run:first-of-type{border-top:var(--rail) solid var(--magenta)}
@media (min-width:860px){
  .run{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
}
.run__move{
  font-family:"Gabarito",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.3rem,2.4vw,1.75rem);letter-spacing:-.02em;line-height:1.05;
  color:var(--magenta-lit);
}
.run p{color:var(--on-surface-variant)}

/* =========================================================================
   SPACE AVAILABLE — the honest empty state
   ========================================================================= */
.available{
  border:3px dashed var(--ghost-strong);
  border-radius:var(--r-lg);
  background:
    repeating-linear-gradient(-45deg, rgba(250,195,155,.06) 0 15px, transparent 15px 30px),
    var(--surface-high);
  padding:clamp(1.75rem,4vw,3rem);
  color:var(--on-surface);
  text-align:center;
}
.available h3{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.6rem;color:var(--a-apricot)}
.available p{margin-inline:auto;color:var(--on-surface-variant)}

/* =========================================================================
   THE BRIEF — close
   ========================================================================= */
.brief{background:var(--surface-low);color:var(--on-surface);position:relative;overflow:hidden;isolation:isolate}
.brief__wall{position:absolute;inset:-12% -8%;width:116%;height:124%;z-index:-1;pointer-events:none}
/* the form is the last thing on the page, so it gets the strongest light */
.brief::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-20% -20% auto -20%;height:120%;
  background:
    radial-gradient(50% 60% at 18% 24%, rgba(235,60,150,.22), transparent 70%),
    radial-gradient(46% 56% at 86% 76%, rgba(188,131,255,.16), transparent 72%);
}
.brief h2{margin-bottom:1rem}
.brief .lede{color:var(--on-surface-variant)}
.brief__grid{
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){.brief__grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}

.form{display:grid;gap:.85rem}
.form__row{display:grid;gap:.85rem;grid-template-columns:1fr}
@media (min-width:560px){.form__row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem}
.field > span{font-weight:600;font-size:.85rem;color:var(--on-surface)}
.field input,.field select,.field textarea{
  background-color:var(--surface-lowest);
  color:var(--on-surface);
  border:1px solid var(--ghost-strong);
  border-radius:var(--r-sm);
  padding:.7rem .8rem;
  width:100%;
  /* the underline grows out of the field on focus, violet into cyan */
  background-image:linear-gradient(90deg,var(--violet),var(--cyan));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:border-color .16s var(--ease), background-size .24s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#8b8992}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--violet)}
.field input:focus,.field select:focus,.field textarea:focus{background-size:100% 2px}
.field textarea{min-height:7rem;resize:vertical}
.form__note{font-size:.85rem;color:var(--on-surface-variant);max-width:44ch}

.contact{display:grid;gap:1.1rem;align-content:start}
.contact__row{display:grid;gap:.15rem}
.contact__row a{font-weight:600;color:var(--magenta-lit)}
.contact .spec{color:var(--on-surface-variant)}
.pending{
  display:inline-block;margin-left:.45rem;padding:.12rem .5rem;
  border:1px solid var(--ghost-strong);border-radius:99px;
  font-size:.62rem;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  white-space:nowrap;vertical-align:2px;
}

/* =========================================================================
   TEARDOWN — footer
   ========================================================================= */
.teardown{background:var(--surface-lowest);color:var(--on-surface-variant);padding-block:clamp(2.5rem,5vw,4rem)}
.teardown a{text-decoration:none}
.teardown a:hover{text-decoration:underline;color:var(--on-surface)}
.teardown__grid{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  margin-bottom:clamp(2rem,4vw,3rem);
}
.teardown h4{
  font-family:"Archivo",sans-serif;font-weight:600;font-size:.71rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);
  margin:0 0 .7rem;
}
.teardown li{margin-bottom:.35rem}
.teardown__base{
  border-top:1px solid var(--ghost);
  padding-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.85rem;color:var(--on-surface-variant);
}
.teardown__motto{color:var(--magenta-lit);font-weight:600}

/* --- authored motion: the build assembles once, on arrival --------------- */
@media (prefers-reduced-motion:no-preference){
  .js .build{opacity:0}
  .js .is-built .build{animation:rise .9s var(--ease) both;animation-delay:var(--d,0ms)}
  @keyframes rise{
    from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(6px)}
    to{opacity:1;transform:none;filter:blur(0)}
  }
  .js .is-built .truss{animation:drop .7s var(--ease) both}
  @keyframes drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
  /* the totems power on as the wall comes into view */
  .js .reel .totem{opacity:.001;transition:opacity .5s var(--ease)}
  .js .reel.is-lit .totem{opacity:1;transition-delay:calc(var(--i,0) * 55ms)}
}

/* --- channel identity row ------------------------------------------------ */
.channel__id{display:flex;align-items:center;justify-content:center;gap:.55rem}
.channel__logo{
  width:36px;height:36px;flex:none;border-radius:50%;
  background:#fff;object-fit:cover;
  box-shadow:0 0 0 1px var(--ghost-strong);
}

/* --- what the channels published ---------------------------------------- */
.pubrail{position:relative;margin-top:clamp(2rem,4vw,3.25rem)}
.pubrail__label{color:var(--magenta-lit);margin-bottom:.9rem}
.pubs{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:clamp(148px,17vw,208px);
  gap:var(--gap);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  /* the rail clips on the same line the channel row ends on, so the section
     carries one right edge rather than bleeding past it */
  padding:.25rem 0 1rem;
  scrollbar-color:var(--magenta) var(--surface-high);scrollbar-width:thin;
}
@media (prefers-reduced-motion:reduce){.pubs{scroll-behavior:auto}}
.pubs::-webkit-scrollbar{height:8px}
.pubs::-webkit-scrollbar-track{background:var(--surface-high);border-radius:99px}
.pubs::-webkit-scrollbar-thumb{background:var(--magenta);border-radius:99px}
.pub{scroll-snap-align:start;margin:0}
.pub img{
  width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  border:5px solid var(--bezel);border-radius:var(--r-sm);
  background:var(--bezel);
  box-shadow:var(--shadow-floor);
}
.pub figcaption{display:block;padding:.6rem .1rem 0}
.pub__title{
  display:block;font-family:"Gabarito",system-ui,sans-serif;font-weight:700;
  font-size:.92rem;line-height:1.2;letter-spacing:-.015em;color:var(--on-surface);
}
.pub__ch{
  display:block;margin-top:.2rem;
  font-size:.72rem;letter-spacing:.04em;color:var(--magenta-lit);
}

/* --- client campaigns ---------------------------------------------------- */
.campaigns{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem) var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
}
.campaign{
  display:flex;flex-direction:column;
  background:var(--surface-high);
  border:var(--bezel-w) solid var(--bezel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-floor);
  overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.campaign:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.campaign__shot{display:block;background:var(--bezel)}
.campaign__shot img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-sm) var(--r-sm) 0 0}
.campaign__body{padding:clamp(.9rem,1.6vw,1.15rem);display:flex;flex-direction:column;gap:.4rem;flex:1}
.campaign__body h3{font-size:1.15rem;color:var(--on-surface)}
.campaign__body p{font-size:.92rem;color:var(--on-surface-variant)}
.campaign__cat{
  margin-top:auto;padding-top:.8rem;
  border-top:1px solid var(--ghost);
  color:var(--magenta-lit);
}

/* the channel row is four tall portrait units; swipe it on narrow screens */
@media (max-width:820px){
  .channels{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:min(74vw,300px);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    margin-inline:calc(var(--pad) * -1);
    padding:.25rem var(--pad) 1rem;
    scroll-padding-inline:var(--pad);
  }
  .channel{scroll-snap-align:start}
  /* the channel row swipes edge to edge here, so the published rail below it
     takes the same bleed rather than sitting inset from it */
  .pubs{
    margin-inline:calc(var(--pad) * -1);
    padding:.25rem var(--pad) 1rem;
    scroll-padding-inline:var(--pad);
  }
}

/* --- short backdrop: used by utility pages that have no hero content ------ */
.backdrop--short{min-height:auto}
.backdrop--short .backdrop__body{flex:none}
.receipt{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(3.5rem,10vw,7rem);
  color:var(--on-surface);
}
.receipt h1{margin-bottom:clamp(1rem,2vw,1.4rem);max-width:16ch}
.receipt .lede{color:var(--on-surface-variant);margin-bottom:clamp(1.75rem,3.5vw,2.5rem)}
.receipt__note{margin-top:1.25rem;font-size:.92rem;color:var(--on-surface-variant)}
.receipt__note a{font-weight:600;color:var(--magenta-lit)}

/* =========================================================================
   SUB-PAGE HEAD
   ========================================================================= */
.pagehead{
  position:relative;z-index:2;
  padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4.5rem);
  color:var(--on-surface);
}
.pagehead h1{margin-bottom:clamp(.9rem,2vw,1.35rem);max-width:14ch}
.pagehead .lede{color:var(--on-surface-variant);max-width:52ch}

/* --- a channel's published set ------------------------------------------ */
.channel-set{margin-bottom:clamp(2.5rem,5vw,4rem)}
.channel-set:last-child{margin-bottom:0}
.channel-set__head{
  display:flex;align-items:center;gap:.8rem;
  padding-bottom:.85rem;margin-bottom:clamp(1.1rem,2vw,1.6rem);
  border-bottom:var(--rail) solid var(--ghost-strong);
}
.channel-set__handle{
  font-family:"Gabarito",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.025em;
  text-decoration:none;color:var(--on-surface);
}
.channel-set__handle:hover{text-decoration:underline}
.channel-set__cat{color:var(--magenta-lit);margin-top:.1rem}
.pubgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(46%,168px),1fr));
  gap:clamp(.9rem,1.8vw,1.4rem);
}

/* --- an ongoing client, head beside a strip of shots -------------------- */
.clientrow{
  display:grid;gap:clamp(1rem,2.5vw,2rem);
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(1.75rem,3.5vw,2.75rem);
  border-top:1px solid var(--ghost);
}
.clientrow:last-child{border-bottom:1px solid var(--ghost)}
@media (min-width:900px){
  .clientrow{grid-template-columns:minmax(0,15rem) minmax(0,1fr);align-items:start}
}
.clientrow__head h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:.5rem;color:var(--on-surface)}
.clientrow__head p{font-size:.95rem;color:var(--on-surface-variant);max-width:34ch}
.clientrow__cat{
  margin-top:.9rem;padding-top:.8rem;
  border-top:1px solid var(--ghost);
  color:var(--cyan);
}
.shots{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:clamp(132px,15vw,178px);
  gap:.7rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  margin-inline:calc(var(--pad) * -1);
  padding:0 var(--pad) .9rem;
  scroll-padding-inline:var(--pad);
  scrollbar-color:var(--violet) var(--surface-high);scrollbar-width:thin;
}
@media (min-width:900px){.shots{margin-inline:0;padding-inline:0}}
.shots::-webkit-scrollbar{height:8px}
.shots::-webkit-scrollbar-track{background:var(--surface-high);border-radius:99px}
.shots::-webkit-scrollbar-thumb{background:var(--violet);border-radius:99px}
.shot{margin:0;scroll-snap-align:start}
.shot img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:5px solid var(--bezel);border-radius:var(--r-sm);
  background:var(--bezel);
}

/* =========================================================================
   SPLIT — a service deep-dive: media one side, argument the other
   ========================================================================= */
.split{
  display:grid;gap:clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
  align-items:center;
}
@media (min-width:880px){
  .split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .split--flip .split__media{order:2}
}
.split__media{margin:0}
.split__media img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:var(--bezel-w) solid var(--bezel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-floor);
  background:var(--bezel);
}
.split__body h2{margin-bottom:clamp(.8rem,1.6vw,1.15rem)}
.split__body .lede{margin-bottom:clamp(1.25rem,2.5vw,1.9rem)}
.pointlist{display:grid;gap:1.05rem}
.pointlist li{padding-left:1.1rem;border-left:2px solid var(--magenta)}
.pointlist h3{font-size:1.05rem;margin-bottom:.2rem;color:var(--on-surface)}
.pointlist p{font-size:.95rem;color:var(--on-surface-variant);max-width:46ch}

/* =========================================================================
   SHAPES — three engagement sizes, no prices anywhere
   ========================================================================= */
.shapes{
  display:grid;gap:clamp(1.5rem,3vw,2.25rem) var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr));
  align-items:stretch;
}
.shape{
  display:flex;flex-direction:column;
  --accent:var(--a-magenta);
  background:var(--surface-high);
  background:linear-gradient(158deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 58%), var(--surface-high);
  border:var(--bezel-w) solid var(--bezel);
  border-radius:var(--r-md) 22px var(--r-md) var(--r-md);
  padding:clamp(1.2rem,2.2vw,1.7rem);
  box-shadow:var(--shadow-floor);
  color:var(--on-surface);
}
.shape--m{--accent:var(--a-magenta)}
.shape--c{--accent:var(--a-coral)}
.shape--o{--accent:var(--a-violet)}
.shape.is-featured{box-shadow:var(--shadow-lift),var(--glow-magenta);transform:translateY(-6px)}
@media (max-width:640px){.shape.is-featured{transform:none}}
.shape h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--accent)}
.shape__tag{font-weight:700;font-size:.95rem;margin-top:.1rem;color:var(--on-surface)}
.shape__most{
  display:inline-block;align-self:flex-start;margin-top:.6rem;
  padding:.15rem .55rem;border:1px solid currentColor;border-radius:99px;
  color:var(--accent);
}
.shape > p{font-size:.95rem;margin-top:.8rem;color:var(--on-surface-variant)}
.shape__list{margin-top:1rem;display:grid;gap:.45rem;font-size:.94rem}
.shape__list li{padding-left:1.1rem;position:relative}
.shape__list li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.shape__inc{
  margin-top:auto;padding-top:1rem;
  border-top:1px solid var(--ghost);
  text-transform:none;letter-spacing:.02em;font-size:.76rem;line-height:1.45;
  color:var(--on-surface-variant);
}

/* =========================================================================
   CHIPS — channel shortcuts
   ========================================================================= */
.chips{display:flex;flex-wrap:wrap;gap:var(--gap)}
.chip{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 1.1rem .7rem .7rem;
  background:var(--surface-high);
  border:1px solid var(--ghost);
  border-radius:99px;text-decoration:none;
  transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.chip:hover{background:var(--surface-highest);border-color:var(--magenta);box-shadow:var(--glow-magenta)}
.chip img{width:34px;height:34px;border-radius:50%;background:#fff;flex:none}
.chip strong{display:block;font-family:"Gabarito",system-ui,sans-serif;font-size:1rem;letter-spacing:-.02em;color:var(--on-surface)}
.chip__cat{display:block;font-size:.74rem;color:var(--on-surface-variant)}

/* --- a wider shot strip, for team photography --------------------------- */
.shots--wide{grid-auto-columns:clamp(180px,22vw,280px)}

/* =========================================================================
   DETAILS — the formal company record
   ========================================================================= */
.details{
  display:grid;gap:clamp(1.25rem,2.5vw,2rem) var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  border-top:var(--rail) solid var(--magenta);
  padding-top:clamp(1.5rem,3vw,2.25rem);
}
.details dt{color:var(--magenta-lit);margin-bottom:.35rem}
.details dd{margin:0;line-height:1.55;color:var(--on-surface-variant)}
.details a{font-weight:600;color:var(--on-surface)}

/* --- contact block on the brief ground ---------------------------------- */
#reach .brief__grid{align-items:start}