/* ---------- FROZEN BRAND SYSTEM (identical across all directions) ---------- */
:root{
  --red:#EA1836; --blue:#2F8DE4; --dark:#0F0F0F; --deep:#1747A5;
  --body-dark:#404040; --white:#FFFFFF; --muted:#696969;
  --fd:"Fredoka One","Comic Sans MS",cursive,sans-serif;
  --fb:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fp:"Poppins",var(--fb);
  --track:.3em;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dark);color:var(--white);font-family:var(--fb);
  line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
/* A fully transparent highlight leaves a tap with no acknowledgement at all,
   which reads as the first tap not registering. Keep a faint one. */
a,button,.zoomable,summary{touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(47,141,228,.2)}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only,.skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;clip:auto;
  background:var(--blue);color:#fff;padding:12px 18px;font-family:var(--fd);
  font-size:.7rem;letter-spacing:var(--track);z-index:999}
h1,h2,h3,h4{font-family:var(--fd);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--track);line-height:1.3;margin:0}

/* ---------- marquee mechanics (concept frozen, styling per direction) ------ */
.mq{overflow:hidden;width:100%}
.mq-t{display:flex;width:max-content;animation:mqs var(--mqd,38s) linear infinite;
  will-change:transform;backface-visibility:hidden;transform:translateZ(0)}
.mq-r{display:flex;align-items:center;flex:0 0 auto;gap:var(--mqg,.5em);
  padding-right:var(--mqg,.5em)}
.mq-r span{font-family:var(--fd);text-transform:uppercase;letter-spacing:var(--track);
  white-space:nowrap;font-size:var(--mqf,4rem);line-height:1.4}
@media(max-width:900px){
  .mq-r span{font-size:clamp(1.6rem,7.4vw,var(--mqf,4rem))}
}
@keyframes mqs{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}


/* ---------- shared chrome ---------- */
.hdr{position:fixed;inset:0 0 auto 0;display:flex;align-items:center;
  justify-content:space-between;padding:0 var(--pad);height:var(--hh);z-index:100;
  pointer-events:none;mix-blend-mode:normal}
.hdr>*{pointer-events:auto}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(15,15,15,.82),rgba(15,15,15,0))}
.brand img{width:clamp(96px,9vw,124px)}
.nav{display:flex;gap:clamp(14px,2.3vw,32px)}
.nav a{font-family:var(--fd);font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:#fff}
.nav a[aria-current=page]{text-decoration:underline;text-underline-offset:5px}
.wave{font-size:1.15rem;line-height:1}
.menu-btn{display:none}
.ftr{display:flex;gap:22px;align-items:center;flex-wrap:wrap;
  padding:44px var(--pad) 56px;border-top:1px solid rgba(255,255,255,.12)}
.ftr a{font-family:var(--fd);font-size:.7rem;letter-spacing:var(--track);color:var(--muted)}

.ftr-note{margin-left:auto;font-family:var(--fd);font-size:.7rem;
  letter-spacing:var(--track);color:var(--muted)}
.pager{display:flex;justify-content:space-between;gap:18px;padding:clamp(40px,6vw,80px) var(--pad)}
.pager a{font-family:var(--fd);font-size:.72rem;letter-spacing:var(--track);color:var(--blue);
  display:flex;flex-direction:column;gap:6px}
.pager a:last-child{text-align:right}
.pager span{color:var(--muted);font-size:.6rem}
.nf{min-height:64vh;display:grid;place-content:center;text-align:center;gap:14px;padding:var(--pad)}
.nf h1{font-size:clamp(3rem,13vw,8rem)}
.nf-sub{font-family:var(--fd);letter-spacing:var(--track);text-transform:uppercase;
  color:var(--muted);font-size:clamp(1.1rem,4vw,2.2rem);margin:0}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:500;background:rgba(8,8,8,.96);display:none;
  align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--fd);font-size:1.3rem;padding:14px 18px}
.lb .x{top:8px;right:12px}.lb .p{left:6px;top:50%;transform:translateY(-50%)}
.lb .n{right:6px;top:50%;transform:translateY(-50%)}
.lb figcaption{position:absolute;bottom:16px;left:0;right:0;text-align:center;
  color:var(--muted);font-size:.62rem;padding:0 20px}
.zoomable{cursor:zoom-in}

@media (prefers-reduced-motion:reduce){
  .mq-t{animation:none;transform:none}
  .mq{overflow-x:auto}
  video[data-bg]{display:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ================= DIRECTION C — CINEMA =================
   The work plays; the interface gets out of the way. Full-viewport media,
   edge-to-edge panels, text reduced to captions. Dark throughout.
   The marquee is the one loud typographic gesture. */
:root{--pad:clamp(18px,4.1vw,58px);--hh:88px}
body{background:#080808}
main{padding-top:0}
.c-hero{position:relative;height:100vh;min-height:520px;overflow:hidden;display:grid;align-items:end}
.c-hero--proj{height:86vh}
.c-hero .bgv,.c-hero .c-hero-img,.c-hero picture{position:absolute;inset:0;z-index:0}
.c-hero img,.c-hero video{width:100%;height:100%;object-fit:cover}
.c-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(8,8,8,.86),rgba(8,8,8,.05) 52%)}
.c-hero-cap{position:relative;z-index:2;padding:var(--pad) var(--pad) clamp(46px,8vh,110px)}
.c-hero-cap h1{font-size:clamp(2rem,7.6vw,6.4rem);line-height:1.02;letter-spacing:.05em}
.c-hero-cap p{font-family:var(--fd);font-size:.66rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--blue);margin:16px 0 0}
.c-scroll{position:absolute;right:var(--pad);bottom:clamp(46px,8vh,110px);z-index:2;
  font-family:var(--fd);font-size:.6rem;letter-spacing:var(--track);color:rgba(255,255,255,.6)}
.c-lede{padding:calc(var(--hh) + 12vh) var(--pad) 8vh}
.c-lede h1{font-size:clamp(2.2rem,8vw,6rem)}
.mq-big{padding-block:.3em;color:#fff;background:#080808;border-block:1px solid rgba(255,255,255,.1)}
.c-intro{padding:clamp(40px,7vw,110px) var(--pad);max-width:78ch}
.c-lead{font-size:clamp(1.05rem,2.2vw,1.5rem);line-height:1.6;color:#e2e2e2;margin:0 0 1.1em}
.c-roles{font-family:var(--fd);font-size:.64rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--red);margin:26px 0 0}
.c-panels{display:grid;gap:2px}
.c-panel{position:relative;display:block;height:min(78vh,760px);overflow:hidden}
.c-panel-img,.c-panel picture{position:absolute;inset:0}
.c-panel img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);filter:brightness(.82)}

.c-panel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.75),transparent 55%)}
.c-panel-t{position:absolute;z-index:2;left:var(--pad);bottom:clamp(24px,4vw,54px);
  font-family:var(--fd);font-size:clamp(1.1rem,3.4vw,2.6rem);letter-spacing:var(--track);
  text-transform:uppercase;color:#fff}
@media(max-width:700px){.c-panel{height:60vh}}
.c-sec{padding:clamp(30px,5vw,90px) 0}
.c-text{padding:0 var(--pad);max-width:74ch}
.c-text .d1{font-size:clamp(1.2rem,3vw,2.2rem);margin:0 0 .6em}
.c-text .d2{font-size:.66rem;letter-spacing:var(--track);color:var(--blue);margin:0 0 .9em}
.c-text .d3{font-size:.62rem;letter-spacing:var(--track);color:var(--red);margin:0 0 .7em}
.c-text .d1 a{color:var(--red)}
.c-copy{font-size:1rem;line-height:1.72;color:#c6c6c6;margin:0 0 1.1em}
.c-fig{margin:clamp(20px,3.4vw,60px) 0 0}
.c-fig img,.c-fig video{width:100%}
.c-reel{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:10px;scrollbar-width:thin}
.c-rcell{flex:0 0 auto;height:min(66vh,620px);scroll-snap-align:center}
.c-rcell img,.c-rcell video{height:100%;width:auto;max-width:none;object-fit:contain}
@media(max-width:700px){.c-rcell{height:44vh}}
.c-logos{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(10px,2vw,28px);
  align-items:center;padding-inline:var(--pad)}
.c-logos img{filter:grayscale(1) brightness(1.8) opacity(.6)}
@media(max-width:900px){.c-logos{grid-template-columns:repeat(4,1fr)}}
.c-cta{display:block;margin:0 var(--pad);font-family:var(--fp);font-weight:500;
  background:transparent;border:1px solid var(--blue);color:var(--blue);padding:26px;
  text-align:center;letter-spacing:.18em;text-transform:uppercase;font-size:.86rem;
  transition:background .3s,color .3s}


/* ---------- header: no permanent gradient; a solid bar fades in on scroll ---- */
.hdr::before{background:var(--dark);opacity:0;transition:opacity .35s ease}
.hdr.is-stuck::before{opacity:1}
.wave{font-size:1.15rem;line-height:1;text-decoration:none}

.wave{display:inline-block;transition:transform .2s ease}

/* ---------- footer icons ---------- */
.ftr a svg{width:18px;height:18px;fill:currentColor;display:block}
.ftr a{display:inline-flex;color:var(--muted)}


/* ---------- HOME hero: marquee centred over the video, CTA at the base ------ */
.c-hero--home{display:grid;grid-template-rows:1fr auto;
  grid-template-columns:minmax(0,1fr);   /* clamp: the marquee track is far wider
                                            than the viewport and would otherwise
                                            stretch the column to its max-content */
  align-items:center;height:100vh;min-height:520px}
.c-hero--home::after{background:rgba(8,8,8,.30)}   /* flat, not a gradient band */
.c-hero-mqwrap{position:relative;z-index:2;grid-row:1;align-self:center;
  width:100%;min-width:0;overflow:hidden}
.c-hero-mq{background:none}
.c-hero-mq .mq-r span{color:#fff}

/* ---------- card grid: WORK/PLAY/GEN AI + index projects ------------------- */
.c-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(3px,.5vw,8px);
  padding-inline:var(--pad)}
.c-card{position:relative;display:block;overflow:hidden}
.c-card picture,.c-card img{width:100%;aspect-ratio:3/4.1;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}

.c-card-t{position:absolute;z-index:2;left:50%;transform:translateX(-50%);
  bottom:clamp(16px,2.2vw,28px);max-width:calc(100% - 24px);
  text-align:center;font-family:var(--fd);letter-spacing:var(--track);
  text-transform:uppercase;color:#fff;
  background:var(--dark);border-radius:999px;padding:9px 18px}

@media(max-width:760px){.c-cards{grid-template-columns:1fr}}

/* ---------- index-page top marquee ---------- */
.c-mq-top{padding-block:.35em;border-bottom:1px solid rgba(255,255,255,.1);
  margin-top:var(--hh)}
.c-lede{padding:clamp(30px,5vh,64px) var(--pad) clamp(24px,4vh,52px)}

/* ---------- about block ---------- */
.c-about{padding:clamp(56px,9vw,120px) var(--pad)}
.c-about-in{max-width:min(960px,72vw)}   /* ch units mislead at .3em tracking */
.c-about-p{font-family:var(--fd);text-transform:uppercase;letter-spacing:var(--track);
  line-height:1.38;font-size:clamp(1rem,2.05vw,2.4rem);color:var(--muted);
  margin:0 0 1.05em}
.c-about-p:last-child{margin-bottom:0}
.c-about-p a{color:var(--red)}

@media(max-width:760px){.c-about-in{max-width:none}
  .c-about-p{font-size:clamp(.95rem,4.4vw,1.5rem);line-height:1.45}}


/* ---------- header: nav centred on the page, not on the leftover space ----- */
.hdr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.hdr .nav{justify-self:center}
.hdr .wave{justify-self:end}

/* marquees never pause — the motion is the point */


/* ---------- hero: undimmed video ---------- */
.c-hero--home::after{content:none}

/* ---------- AVAILABLE NOW: full-width pill, nav typeface ------------------- */
.c-avail{position:relative;z-index:2;grid-row:2;
  display:block;width:calc(100% - var(--pad)*2);margin:0 auto clamp(30px,5vh,64px);
  border-radius:999px;background:var(--blue);color:#fff;
  font-family:var(--fd);font-weight:400;letter-spacing:var(--track);
  text-transform:uppercase;font-size:.7rem;text-align:center;
  padding:22px 28px;transition:background .25s ease,color .25s ease}


/* ---------- card grids butt together, no gutter ---------- */
.c-cards{gap:0}

/* ---------- about: original display size, blue links ---------------------- */
.c-about-p{font-size:clamp(1.15rem,2.7vw,2.4rem);line-height:1.4}
.c-about-p a{color:var(--blue)}

@media(max-width:760px){.c-about-p{font-size:clamp(1.05rem,4.8vw,1.7rem)}}


/* ---------- small display type: original line-height is 1.3, not body 1.55 -- */
.nav a,.c-avail,.c-card-t,.c-side-k,.c-logo-k,.ftr a,.ftr-note,.pager a{line-height:1.3}


/* ---------- no rules anywhere in this direction ---------------------------- */
.c-mq-top{border-bottom:0}
.ftr{border-top:0;position:relative}
.ftr::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);
  height:1px;background:var(--blue);opacity:.5}

/* ---------- about: original line-height (1.227), copy beside the contact card */
.c-about-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);
  gap:clamp(28px,6vw,90px);align-items:start}
.c-about-in{max-width:none}
.c-about-p{line-height:1.227}
.c-side{padding-top:.35em}
.c-avatar,.c-side picture img{width:96px;height:96px;border-radius:50%;
  object-fit:cover;margin-bottom:26px}
.c-side-k{font-family:var(--fd);font-size:.7rem;letter-spacing:var(--track);
  text-transform:uppercase;color:#fff;margin:0 0 10px;
  border-bottom:2px solid var(--red);display:block;width:fit-content;padding-bottom:5px}
.c-side-p{font-family:var(--fb);font-size:1.216rem;line-height:1.5;letter-spacing:-.007em;
  color:#fff;margin:0}
.c-side-p a{color:var(--blue)}
@media(max-width:860px){.c-about-grid{grid-template-columns:1fr;gap:38px}}


/* ==========================================================================
   TYPE SCALE — explicit sizes (rem so browser font-size settings still apply)
   10px = .625rem | 12px = .75rem | 18px = 1.125rem | 40px = 2.5rem | 160px = 10rem
   ========================================================================== */
.nav a          {font-size:.625rem}   /* 10px */
.c-avail        {font-size:.625rem}   /* 10px */
.c-card-t       {font-size:.625rem}   /* 10px */
.c-logo-k       {font-size:.625rem}   /* 10px */
.c-side-k       {font-size:.625rem}   /* 10px */
.c-side-p       {font-size:1.125rem}  /* 18px */
.c-about-p      {font-size:clamp(1.15rem,2.8vw,2.5rem)}  /* 40px cap */

/* emoji spacers: symmetrical breathing room, no letter-spacing tail */
.mq-r{font-size:var(--mqf,4rem)}      /* so the em-based gap resolves against
                                          the marquee size, as in the source */
.mq-r span{font-size:1em}
@media(max-width:900px){
  .mq-r{font-size:clamp(1.6rem,7.4vw,var(--mqf,4rem))}
  .mq-r span{font-size:1em}
}
/* emoji spacers sit symmetrically: letter-spacing would pad only their right */
.mq-r span.is-emoji{letter-spacing:0}

/* links are always blue */
a{color:var(--blue)}
.c-text .d1 a,.c-text .d2 a,.c-about-p a,.c-copy a{color:var(--blue)}


/* ==========================================================================
   PROJECT PAGES
   ========================================================================== */
.c-sec.is-light{background:#fff;color:var(--body-dark)}
.c-sec.is-light .p-statement{color:var(--dark)}
.c-sec.is-light .p-copy,.c-sec.is-light .p-caption{color:var(--body-dark)}

/* full-bleed media between sections */
.c-bleed{padding:0;line-height:0}
.c-bleed-media,.c-bleed picture,.c-bleed img,.c-bleed video{width:100%;display:block}
.c-bleed video{max-height:92vh;object-fit:cover}

/* copy laid over a background image */
.c-overlay{position:relative;padding-block:clamp(60px,12vw,180px)}
.c-overlay > .c-overlay-bg,.c-overlay > picture{position:absolute;inset:0;z-index:0}
.c-overlay > picture img,.c-overlay > .c-overlay-bg img{width:100%;height:100%;object-fit:cover}
.c-overlay .c-text{position:relative;z-index:2}

/* ---- intro row: logo | title + description | roles ---- */
.p-intro{padding-block:clamp(44px,7vw,100px)}
.p-intro-grid{display:grid;grid-template-columns:120px minmax(0,2.2fr) minmax(0,1fr);
  gap:clamp(26px,5vw,72px);padding-inline:var(--pad);align-items:start}
.p-logo img{width:100%;height:auto}
.p-title{font-family:var(--fd);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dark);margin:0 0 16px;line-height:1.3}
.p-desc{font-family:var(--fb);font-size:.75rem;line-height:1.6;letter-spacing:-.007em;
  color:var(--body-dark);margin:0 0 1em;max-width:64ch}
.p-roles-k{font-family:var(--fd);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--dark);margin:0 0 14px;line-height:1.3;
  border-bottom:2px solid var(--red);display:block;width:fit-content;padding-bottom:5px}
.p-role{font-family:var(--fd);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--blue);margin:0 0 7px;line-height:1.3}
@media(max-width:900px){.p-intro-grid{grid-template-columns:1fr;gap:26px}
  .p-logo img{width:110px}}

/* ---- project copy ---- */
.c-sec .c-text{padding-inline:var(--pad);max-width:none}
.p-eyebrow{font-family:var(--fd);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:var(--blue);margin:0 0 18px;line-height:1.3}
.p-statement{font-family:var(--fd);font-size:clamp(1.15rem,2.8vw,2.5rem);
  letter-spacing:var(--track);text-transform:uppercase;line-height:1.227;
  color:#fff;margin:0 0 .7em;max-width:22ch}
.p-copy{font-family:var(--fb);font-size:.75rem;line-height:1.6;letter-spacing:-.007em;
  color:#c6c6c6;margin:0 0 1em;max-width:64ch}
.p-caption{font-family:var(--fb);font-size:.75rem;line-height:1.5;color:var(--muted);
  text-align:center;margin:0;padding-inline:var(--pad)}
/* a wider measure, plus pretty wrapping: the grid column span these used to
   inherit was narrow enough to strand a single word on the last line */
.p-caption{max-width:82ch;margin-inline:auto;text-wrap:pretty}
/* captions sitting in their own section get the full centred width to wrap in,
   rather than whatever columns the source happened to give the block */
.c-sec.c-capsec .fe-b{grid-column:2/-2!important}
.c-sec.c-capsec .p-caption{max-width:82ch;margin-inline:auto}
/* lifted out of its grid, so it can sit a fixed distance under the media
   instead of wherever the leftover grid rows happened to put it */
.p-caption.is-hug{margin-top:18px}
.c-capsec{padding-block:clamp(14px,2vw,26px)}


/* ---- project hero: full width at its natural 2500x927 banner aspect, so
        nothing is cropped off the sides ---- */
.c-hero--proj{height:auto;min-height:0;display:block;position:relative}
.c-hero--proj .c-hero-img,.c-hero--proj picture{position:static;inset:auto}
.c-hero--proj img,.c-hero--proj video{width:100%;height:auto;object-fit:contain}
.c-hero--proj .c-hero-cap{position:absolute;left:0;right:0;bottom:0;padding:var(--pad)}

/* ---- quote breakers: centred, small title white, statement blue ---- */
.p-eyebrow{color:#fff}
.p-statement{color:var(--blue)}
.c-sec.is-light .p-statement{color:var(--blue)}
.c-text.is-quote{text-align:center;max-width:none}
.c-text.is-quote .p-statement{max-width:26ch;margin-left:auto;margin-right:auto}
.c-sec.is-quote{padding-block:clamp(56px,10vw,150px)}

/* ---- embed + copy sections ---- */
.p-embedsec{padding-block:clamp(44px,7vw,110px);position:relative}
.p-split{position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(26px,5vw,80px);padding-inline:var(--pad);align-items:center}
.p-embedsec.is-media-right .p-split-media{order:2}
.p-embedsec.is-media-right .p-split-copy{order:1}
.p-embed{position:relative;width:100%;aspect-ratio:var(--embed-aspect,1.7778);
  background:#000}
.p-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.p-copywrap.p-card{background:#fff;padding:clamp(24px,3vw,48px)}
.p-copywrap.p-card .p-eyebrow{color:var(--dark)}
.p-copywrap.p-card .p-statement{color:var(--blue)}



/* ---- project sections rebuilt on the source's fluid-engine grid ---------- */
.fe-grid{display:grid;
  grid-template-columns:minmax(var(--pad),1fr)
    repeat(var(--cols-m,8),minmax(0,1fr)) minmax(var(--pad),1fr);
  grid-template-rows:repeat(var(--rows-m,1),minmax(var(--row-m-h,24px),auto));
  gap:11px;
  --container-width:min(1500px,calc(100vw - var(--pad)*2));
  --row-scale:0.0215}
.fe-b{grid-area:var(--ga-m,auto);min-width:0;z-index:var(--z,auto)}
/* a grouping hook the phone layout turns into a flex column; everywhere else
   it dissolves so the recovered grid-areas place the blocks themselves */
.strip-col,.strip-chunk{display:contents}
@media(min-width:768px){
  .fe-grid{grid-template-columns:minmax(var(--pad),1fr)
     repeat(var(--cols-d,24),minmax(0,1fr)) minmax(var(--pad),1fr);
   grid-template-rows:repeat(var(--rows-d,1),
     minmax(calc(var(--container-width)*var(--row-scale)),auto))}
  /* last row floorless: the grid then stops at its content rather than
     rounding up to a full row, which is what left a gap under the last image */
  .fe-grid.tail-auto{grid-template-rows:repeat(var(--rows-d1,1),
     minmax(calc(var(--container-width)*var(--row-scale)),auto)) minmax(0,auto)}
  .fe-b{grid-area:var(--ga-d,var(--ga-m,auto))}
}
/* the grid controls measure, so the standalone caps come off */
.fe-b .p-statement,.fe-b .p-copy,.fe-b .p-caption{max-width:none}
.fe-b.is-centred{text-align:center}
.fe-b > picture img,.fe-b > picture,.fe-b video{width:100%;height:auto}
.c-sec:has(.fe-grid){padding-block:clamp(30px,5vw,84px)}

/* eyebrows must flip on white sections or they vanish */
.c-sec.is-light .p-eyebrow{color:var(--dark)}


/* ---- implicit rows must keep the grid's rhythm or late blocks collapse ---- */
.fe-grid{grid-auto-rows:minmax(24px,auto)}
@media(min-width:768px){
  .fe-grid{grid-auto-rows:minmax(calc(var(--container-width)*var(--row-scale)),auto)}
}

/* ---- quote blocks: centred in their own box, with room to breathe -------- */
.fe-b.is-centred{align-self:center;padding-block:clamp(26px,4vw,64px)}
/* copy that has been stretched to match the media beside it: hold the text in
   the middle rather than pinning it to the top of a much taller box */
.fe-b.is-vcentre{align-self:center}
.fe-b.is-topalign{align-self:start}
/* trailing margin on the last line makes centred copy sit high */
.fe-b > :last-child{margin-bottom:0}
.c-sec:has(.fe-b.is-centred){padding-block:clamp(48px,8vw,115px)}

/* ---- captions sit close to what they caption ---------------------------- */
.c-sec.c-capsec,.c-sec.c-capsec:has(.fe-b.is-centred){
  padding-block:clamp(10px,1.4vw,20px) clamp(24px,3.6vw,56px)}
.c-sec.c-capsec .fe-grid{grid-auto-rows:auto;grid-template-rows:auto}
.c-sec.c-capsec .fe-b{align-self:start;padding-block:0}
.p-caption{margin:0;margin-inline:auto}

/* ---- gallery: grid ------------------------------------------------------ */
.g-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gut,0px)}
.g-grid.is-inset{padding-inline:var(--pad)}
.g-cell{min-width:0}
.g-cell picture{display:block}
.g-cell img,.g-cell video{width:100%;height:auto;aspect-ratio:var(--asp,auto);object-fit:cover}
@media(max-width:860px){.g-grid{grid-template-columns:repeat(2,1fr)}}

/* ---- gallery: strips ---------------------------------------------------- */
.g-strips{display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--gut,20px);padding-inline:var(--pad)}
.g-strip-cell{height:var(--strip-h,150px);flex:0 0 auto;line-height:0}
.g-strip-cell img,.g-strip-cell video{height:100%;width:auto;max-width:none;object-fit:contain}
@media(max-width:640px){.g-strips{gap:calc(var(--gut,20px)/2)}
  .g-strip-cell{height:calc(var(--strip-h,150px)*.62)}}
.c-galsec{padding-block:clamp(20px,3vw,43px)}

/* ---- white card behind copy that sits over a background image ----------- */
.fe-b.is-card{background:#fff;padding:clamp(20px,2.4vw,34px)}
.fe-b.is-card .p-eyebrow{color:var(--dark)}
.fe-b.is-card .p-statement{color:var(--blue)}

/* ---- circular mask (kenburns sign-off) ---------------------------------- */
.is-circle,picture:has(.is-circle){border-radius:50%;overflow:hidden}
img.is-circle{aspect-ratio:1;object-fit:cover;border-radius:50%}

/* ---- a content video still to be supplied ------------------------------- */
.p-embed.is-pending{display:grid;place-items:center;background:#141414;
  border:1px dashed rgba(255,255,255,.28)}
.p-embed.is-pending span{font-family:var(--fd);font-size:.6rem;letter-spacing:var(--track);
  color:var(--muted)}
.is-light .p-embed.is-pending{background:#f2f2f2;border-color:rgba(0,0,0,.2)}


/* ---- a positioned backdrop paints over static flow content, so the grid
        has to be lifted above it explicitly ---- */
/* a caption lifted out of its grid is a direct child too, and without this
   the absolutely positioned background image paints straight over it */
.c-overlay > .fe-grid,.c-overlay > .g-grid,.c-overlay > .g-strips,
.c-overlay > .p-caption{position:relative;z-index:1}
/* photo backdrop without a card: darken it so white type reads */
.c-sec.c-overlay.is-dim,.c-sec.c-overlay.is-dim:has(.fe-b.is-centred){padding-block:0}
.c-overlay.is-dim::after{content:"";position:absolute;inset:0;z-index:0;
  background:rgba(8,8,8,.52);pointer-events:none}
/* needs to outrank .c-sec.is-light, which also targets these */
.c-sec.c-overlay .p-eyebrow,.c-sec.c-overlay .p-statement,
.c-sec.c-overlay .p-copy,.c-sec.c-overlay .p-caption{color:#fff}
.c-sec.c-overlay .fe-b.is-card .p-eyebrow{color:var(--dark)}
.c-sec.c-overlay .fe-b.is-card .p-statement{color:var(--blue)}
/* artwork that runs to the section edge */
.c-sec.is-flush-b{padding-bottom:0}

/* ---- captions: white over dark, and tight to their content ---- */
.p-caption{color:#fff}
.c-sec.is-light .p-caption,.g-grid + .p-caption{color:var(--body-dark)}
/* ...but a caption sitting on a background image stays white whatever the
   section theme is, or it disappears into the picture */
.c-sec.c-overlay .p-caption,.c-sec.is-light.c-overlay .p-caption{color:#fff;
  /* these sit on an undimmed photo, so they need their own contrast */
  text-shadow:0 1px 14px rgba(0,0,0,.6),0 0 3px rgba(0,0,0,.4)}
.c-sec.c-overlay.is-dim .p-caption{text-shadow:none}
.c-sec.c-capsec,.c-sec.c-capsec:has(.fe-b.is-centred){
  padding-block:clamp(12px,1.3vw,18px) clamp(20px,3vw,43px)}
/* any band immediately followed by a caption drops its bottom padding, so
   every caption hugs its media by the same amount whatever precedes it */
.c-carsec,.c-sec:has(+ .c-capsec){padding-bottom:0}

/* ---- native content video rows (bigspaceship: centre film larger) ---- */
.nv-row{display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2vw,34px);width:100%;height:100%}
.nv-cell{flex:0 1 21%;align-self:center}
.nv-cell.is-lead{flex:0 1 40%}
.nv-cell video{width:100%;height:auto;display:block}
.nv-solo video,.p-embed .nv-cell video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover}
@media(max-width:760px){.nv-row{flex-wrap:wrap}.nv-cell,.nv-cell.is-lead{flex:0 1 100%}}

/* ---- selectively enlarged art ---- */
.is-grown{transform:scale(2.4);transform-origin:center}
.fe-b:has(.is-grown){overflow:visible}
.is-shrunk{width:68%!important;height:auto;margin-inline:auto}


/* ---- touch targets on tablets too, without changing the layout ---- */
@media(max-width:900px){
  .nav a{padding-block:14px}
  .ftr a{padding:12px;margin:-12px}
  .ftr{gap:34px}
  .pager a{padding-block:10px;min-height:44px}
}

/* ==========================================================================
   MOBILE NAV — the original collapses to a menu button below the phone
   breakpoint; inline links collide with the logo at 375
   ========================================================================== */
@media(max-width:700px){
  .hdr{grid-template-columns:1fr auto;gap:12px}
  .wave{display:none}
  .menu-btn{display:grid;gap:5px;width:44px;height:44px;padding:11px 9px;
    background:none;border:0;cursor:pointer;align-content:center;justify-self:end}
  .menu-btn span{display:block;height:2px;width:26px;background:#fff;
    transition:transform .25s ease,opacity .2s ease}
  .hdr.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hdr.menu-open .menu-btn span:nth-child(2){opacity:0}
  .hdr.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hdr .nav{justify-self:stretch}   /* desktop centres it; the panel is full width */
  .nav{position:fixed;top:var(--hh);left:0;right:0;width:auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--dark);padding:4px 0 14px;
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .hdr.menu-open .nav{opacity:1;transform:none;pointer-events:auto}
  /* the header is transparent at the top of the page; the open menu needs a
     solid bar behind it or the hero video shows through above the panel */
  .hdr.menu-open::before{opacity:1;background:var(--dark)}
  .nav a{padding:15px var(--pad);font-size:.8rem;letter-spacing:.24em}
  .nav a[aria-current=page]{color:var(--blue);text-decoration:none}
}


/* ---- mobile: the 2500x927 banner collapses to a 139px strip, so the hero
        is cropped taller the way the original does ---- */
@media(max-width:700px){
  .c-hero--proj{height:48vh;min-height:300px;overflow:hidden}
  .c-hero--proj img,.c-hero--proj video,.c-hero--proj picture{
    width:100%;height:100%;object-fit:cover}
  .c-hero--proj .c-hero-cap{padding:var(--pad)}
  /* the section behind a hero image needs the scrim back for the title */
  .c-hero--proj::after{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to top,rgba(8,8,8,.8),rgba(8,8,8,0) 55%)}
  .c-hero--proj .c-hero-cap{position:absolute;z-index:2}
  /* three-up film rows stack, so cap their height */
  .nv-cell,.nv-cell.is-lead{flex:0 1 100%}
  /* carousels get a little more presence */
  .c-car-cell{height:calc(var(--car-h,32vh)*.9)}
  /* prev/next and the footer icons need real tap targets */
  .pager a{padding:10px 0;min-height:44px;justify-content:center}
  .pager{gap:22px}
  .ftr a{padding:12px;margin:-12px}
  .ftr{gap:34px;padding-top:34px}
}


/* ---- phones: stack blocks in one column rather than reproducing the
        source's 8-column grid, whose row rhythm does not survive the
        different type sizes. Media leads, then eyebrow, title, copy. ---- */
@media(max-width:700px){
  .fe-grid:not(.keeps-grid){display:flex;flex-direction:column;
    gap:clamp(18px,5vw,30px);padding-inline:var(--pad)}
  .fe-grid:not(.keeps-grid) .fe-b{grid-area:auto!important;width:100%;
    min-width:0;padding-block:0}
  .fe-grid:not(.keeps-grid) .fe-b.is-centred{align-self:auto;padding-block:0}
  /* the stacking rule above would flatten the white card onto its own text */
  .fe-grid .fe-b.is-card{padding:clamp(26px,6.5vw,44px)}
  .fe-grid:not(.keeps-grid) .fe-b:has(.p-embed),
  .fe-grid:not(.keeps-grid) .fe-b:has(.nv-row){order:-1}
  .fe-b > picture img,.fe-b > video{width:100%;height:auto}
  .p-embed{max-width:none}
  .nv-row{flex-direction:column;gap:14px}
  /* grids the source lays out side by side keep doing that; a very tall
     scroll image is constrained by the row height and sits left, which is
     how the original renders it on a phone */
  /* the scroll module becomes an explicit two-column layout: the strip runs
     the full height on the left, the copy chunks distribute evenly beside it
     so the image can meet the top and bottom of the module */
  .keeps-grid:has(.is-scroll){display:grid;grid-template-columns:36% 1fr;
    column-gap:20px;row-gap:0;grid-auto-rows:min-content;
    grid-template-rows:auto!important}
  .keeps-grid:has(.is-scroll) > .fe-b:has(.is-scroll){
    grid-column:1!important;grid-row:1!important;align-self:stretch}
  .keeps-grid:has(.is-scroll) > .strip-col{display:flex;flex-direction:column;
    justify-content:space-between;gap:var(--sp-block);
    grid-column:2!important;grid-row:1!important;min-width:0;
    /* the strip runs edge to edge, the copy beside it must not */
    padding-block:clamp(18px,4.5vw,30px)}
  .keeps-grid:has(.is-scroll) .strip-chunk{display:flex;flex-direction:column;
    gap:6px}
  .strip-col .fe-b{grid-area:auto!important;padding-block:0}
  .keeps-grid .is-scroll{width:100%!important;height:auto;max-width:none;
    object-fit:contain;object-position:left top}
  .keeps-grid:has(.is-scroll) > .fe-b:has(.is-scroll) picture{display:block}
  .keeps-grid .fe-b:has(.is-scroll) picture{display:block;height:100%}
}
@media(min-width:701px){
  /* this module is full-bleed, so nothing else holds the last chunk of copy
     off the bottom edge */
  .keeps-grid:has(.is-scroll) .strip-chunk:last-child .fe-b{
    margin-bottom:clamp(20px,2.4vw,36px)}
}


/* ---- phones: more air, bigger marquee, true viewport hero ---- */
@media(max-width:700px){
  :root{--pad:22px}
  .c-sec{padding-block:clamp(34px,8vw,60px)}
  .c-sec:has(.fe-grid){padding-block:clamp(30px,7vw,54px)}
  .c-about{padding-block:clamp(48px,12vw,90px)}
  .c-about-grid{gap:44px}
  .c-logo-sec{padding-block:clamp(30px,7vw,50px)}
  .c-galsec,.c-carsec{padding-block:clamp(16px,4vw,28px)}
  .pager{padding-block:clamp(34px,8vw,56px)}
  .ftr{padding-block:38px 46px}
  .c-avail{margin-bottom:clamp(26px,6vh,44px)}
  /* the hero must reach the bottom of the visual viewport, not the 100vh
     that mobile browsers report with chrome showing */
  .c-hero--home{height:100svh}
  .c-hero--home .bgv{height:100%;object-fit:cover}
  /* fixed rem, not vw: a vw size changes when mobile browser chrome hides,
     which resizes the marquee track mid-animation and shows up as a snap */
  .c-hero-mq .mq-r span{font-size:3.9rem}
  .c-mq-top .mq-r span{font-size:2.1rem}
}
@supports not (height: 100svh){
  @media(max-width:700px){.c-hero--home{height:100vh}}
}

/* ==========================================================================
   FULL-SCREEN MOBILE MENU — matches the original: white field, blue links
   centred, close cross top right, wave at the foot
   ========================================================================== */
@media(max-width:700px){
  .nav{position:fixed;inset:0;top:0;height:100svh;
    background:#fff;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(10px,1.45vh,13px);padding:0 var(--pad);border:0;
    opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .16s ease,visibility 0s linear .16s}
  .hdr.menu-open .nav{opacity:1;pointer-events:auto;visibility:visible;
    transition:opacity .16s ease,visibility 0s}
  .nav a{font-size:clamp(2.5rem,11.5vw,3.3rem);letter-spacing:.12em;color:var(--blue);
    padding:4px 10px;width:auto;text-align:center;
    transition:transform .12s ease,opacity .12s ease}
  .nav a:active{transform:scale(.94);opacity:.7}
  .nav a[aria-current=page]{text-decoration:underline;text-underline-offset:8px}
  .nav::after{content:"👋";position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);
    font-size:1.6rem;line-height:1}
  /* the panel is position:fixed, so it paints above the static button and
     was swallowing the taps meant to close it */
  .hdr{z-index:200}
  .menu-btn{position:relative;z-index:3}
  .brand{position:relative;z-index:3}
  .hdr.menu-open::before{opacity:1;background:#fff}
  .hdr.menu-open .menu-btn span{background:var(--blue)}
}

/* ==========================================================================
   INTERACTION FEEDBACK — small, consistent, and off under reduced motion
   ========================================================================== */
.c-avail,.c-cta,.c-card,.c-car-btn,.menu-btn,.pager a,.ftr a,.tile{
  transition:transform .18s ease,background-color .22s ease,
             color .22s ease,opacity .18s ease}
.c-avail:active{transform:scale(.985)}
.c-cta:active{transform:scale(.99)}
.c-card:active{transform:scale(.99)}
.c-card:active .c-card-t{background:var(--blue)}
.c-car-btn:active{transform:translateY(-50%) scale(.9)}
.menu-btn:active{transform:scale(.9)}

.pager a:active{transform:translateY(1px);opacity:.75}
.ftr a:active{transform:scale(.88)}
.c-card-t{transition:background-color .22s ease,color .22s ease}
.zoomable{transition:opacity .2s ease}
.zoomable:active{opacity:.82}
@media(prefers-reduced-motion:reduce){
  .c-avail,.c-cta,.c-card,.c-car-btn,.menu-btn,.pager a,.ftr a,.tile,
  .nav a,.zoomable{transition:none}
  .c-avail:active,.c-cta:active,.c-card:active,.c-car-btn:active,
  .menu-btn:active,.pager a:active,.ftr a:active,.nav a:active{transform:none}
}


/* ==========================================================================
   SPACING SCALE — one rhythm for the whole site
   sp-section        gap between modules
   sp-section-tight  modules that are mostly media
   sp-block          gap between blocks inside a module
   sp-caption        media to its caption
   ========================================================================== */
:root{
  --sp-section:clamp(76px,9vw,140px);
  --sp-section-tight:clamp(36px,4.2vw,64px);
  --sp-block:clamp(18px,2.4vw,30px);
  --sp-caption:clamp(10px,1.2vw,16px);
}
@media(max-width:700px){
  :root{
    --sp-section:clamp(60px,15vw,88px);
    --sp-section-tight:clamp(32px,8vw,46px);
    --sp-block:21px;
    --sp-caption:18px;
  }
}

/* one rule set drives every module's vertical rhythm — PHONES ONLY.
   Desktop keeps the per-component paddings that were signed off; this scale
   exists to tidy the phone layout, not to re-flow the approved wide view. */
@media(max-width:700px){
  .c-sec,.c-sec:has(.fe-grid),.c-sec:has(.fe-b.is-centred){padding-block:var(--sp-section)}
  /* restated here: the rules above match with equal specificity and would
     otherwise put a full band gap back between media and its caption */
  .c-carsec,.c-sec:has(+ .c-capsec){padding-bottom:0}
  .c-galsec,.c-carsec{padding-block:var(--sp-section-tight)}
  .c-sec.c-capsec,.c-sec.c-capsec:has(.fe-b.is-centred){
    padding-block:var(--sp-caption) var(--sp-section-tight)}
  .c-intro,.p-intro{padding-block:var(--sp-section)}
  .c-about{padding-block:var(--sp-section)}
  .c-logo-sec{padding-block:var(--sp-section)}
  .p-embedsec{padding-block:var(--sp-section)}
  .c-bleed,.c-sec.c-overlay.is-dim{padding-block:0}
  .pager{padding-block:var(--sp-section)}
  .c-lede{padding:var(--sp-section) var(--pad) var(--sp-section-tight)}
  .fe-grid:not(.keeps-grid){gap:var(--sp-block)}
  .c-about-grid{gap:var(--sp-section-tight)}
  .p-intro-grid{gap:var(--sp-block)}
  .c-fig{margin-top:var(--sp-block)}
  .p-caption{margin-top:var(--sp-caption)}
  /* the transform version paints outside its box and collides on a phone */
  .is-grown{transform:none;width:min(240px,62%)!important;height:auto;max-width:none}
}

/* ==========================================================================
   CAROUSEL — full-bleed, no gutters, no visible scrollbar, arrow controls
   ========================================================================== */
.c-carsec{padding-block:0}
/* two carousels in a row would otherwise touch, since both zero their padding */
@media(max-width:700px){.c-carsec + .c-carsec{padding-top:var(--sp-section-tight)}}
.c-car{position:relative}
.c-car-track{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;   /* no scroll-snap: it re-aligns after the loop
                               rewind and shows up as a visible jump */
  scrollbar-width:none;-ms-overflow-style:none}
.c-car-track::-webkit-scrollbar{display:none;width:0;height:0}
.c-car-cell{flex:0 0 auto;height:var(--car-h,32vh);line-height:0}
.c-car-cell picture,.c-car-cell img,.c-car-cell video{
  height:100%;width:auto;max-width:none;object-fit:cover;display:block}
.c-car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,8,8,.62);color:#fff;font-family:var(--fd);font-size:1.6rem;
  line-height:1;display:grid;place-items:center;padding:0 0 4px;
  transition:background .2s ease,opacity .2s ease}

.c-car-prev{left:clamp(8px,1.4vw,20px)}
.c-car-next{right:clamp(8px,1.4vw,20px)}
@media(max-width:700px){.c-car-btn{width:40px;height:40px;font-size:1.2rem}}

/* ---------- client logos ---------- */
.c-logo-sec{padding-inline:var(--pad)}
.c-logo-k{font-family:var(--fd);font-size:.625rem;letter-spacing:var(--track);
  text-transform:uppercase;color:#fff;margin:0 0 26px}


/* pointer-only: guarded so touch devices do not need a
   first tap just to apply the hover state */
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration:underline}
  .mq:hover .mq-t{animation-play-state:paused}
  .ftr a:hover{color:#fff}
  .c-panel:hover img{transform:scale(1.06);filter:brightness(1)}
  .c-cta:hover{background:var(--blue);color:#fff;text-decoration:none}
  .wave:hover{text-decoration:none;transform:rotate(-12deg)}
  .ftr a:hover{color:#fff}
  .c-card:hover img{transform:scale(1.04)}
  .c-card:hover{text-decoration:none}
  .c-about-p a:hover{color:var(--blue);text-decoration:none}
  .mq:hover .mq-t{animation-play-state:running}
  .c-avail:hover{background:#fff;color:var(--blue);text-decoration:none}
  .c-about-p a:hover{color:var(--blue);text-decoration:underline}
  .pager a:hover{color:#fff}
  .c-car-btn:hover{background:var(--blue)}
}