/* =========================================================
   inbound — editorial cover styles
   Palette: warm paper + ink, single hot accent
   ========================================================= */

@font-face{
  font-family:"Breathing";
  src:url("fonts/breathing.ttf") format("truetype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"InboundHand";
  src:url("fonts/auzhera.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --paper:#EFE6D8;         /* warm cream */
  --paper-2:#e4d9c6;
  --ink:#14151a;
  --ink-soft:#33353d;
  --muted:#8f9099;
  --line:rgba(20,21,26,.14);
  --accent:#1E3FD6;        /* brand blue */
  --accent-ink:#1832a6;
  --accent-bright:#3355f0;
  --orange:#E8752B;        /* brand orange */
  --black:#1C1A17;         /* warm black */
  --amb:#1a6b5a;           /* ambassador green */
  --dark:#141520;
  --dark-paper:#eef0f6;
  --serif:"Archivo",-apple-system,Segoe UI,sans-serif;
  --sans:"Archivo",-apple-system,Segoe UI,sans-serif;
  --mono:"Archivo",-apple-system,Segoe UI,sans-serif;
  --hand:"Shantell Sans","Comic Sans MS",cursive;
  --pad:clamp(18px,5vw,80px);
  --maxw:1240px;
  --blue-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='1' exponent='3.4' offset='0'/%3E%3CfeFuncG type='gamma' amplitude='1' exponent='3.4' offset='0'/%3E%3CfeFuncB type='gamma' amplitude='1' exponent='3.4' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --blue-marble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='1100'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.010 0.013' numOctaves='5' seed='12' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='gamma' amplitude='1.5' exponent='0.8' offset='-0.24'/%3E%3CfeFuncG type='gamma' amplitude='1.5' exponent='0.8' offset='-0.24'/%3E%3CfeFuncB type='gamma' amplitude='1.5' exponent='0.8' offset='-0.24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;position:relative;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.5;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
em{font-style:italic}
a{color:inherit}

.mono{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

/* paper grain overlay */
.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='1.15' intercept='-0.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}


/* ---- section chrome / edge rails ---- */
.edge{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px var(--pad);
}
.edge--light{}
.edge--bot{}

/* =========================================================
   HERO  (magazine cover — cobalt on paper)
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:clamp(90px,14vh,150px) var(--pad) clamp(70px,12vh,120px);
  overflow:hidden;
}
.defs{position:absolute}

/* --- typewriter credit blocks --- */
.hero__meta{
  position:absolute;top:clamp(22px,4vh,44px);
  display:flex;flex-direction:column;gap:.15rem;
  font-size:.62rem;line-height:1.7;letter-spacing:.12em;
  color:var(--ink-soft);z-index:3;
}
.hero__meta--tl{left:var(--pad);text-align:left}
.hero__meta--tr{right:var(--pad);text-align:left}
.hero__logo{
  position:absolute;top:clamp(22px,4vh,44px);left:var(--pad);z-index:5;
  display:flex;align-items:center;gap:.5em;
  color:var(--accent);text-decoration:none;
}
.hero__logo svg{height:clamp(22px,2.8vh,28px);width:auto;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.hero__logo:hover svg{transform:scale(1.08)}
.hero__nav{
  position:absolute;top:clamp(22px,4vh,44px);left:50%;transform:translateX(-50%);
  display:flex;gap:clamp(16px,3vw,48px);z-index:5;white-space:nowrap;
  font-size:.66rem;letter-spacing:.16em;
}
.hero__nav a{color:var(--ink-soft);text-decoration:none;transition:color .25s}
.hero__nav a:hover{color:var(--accent)}
@media (max-width:520px){.hero__nav{gap:12px;font-size:.54rem;letter-spacing:.1em}}
.hero__code{margin-top:.9rem;color:var(--accent);line-height:1.5;letter-spacing:.08em}
.hero__by{margin-top:.55rem;color:var(--accent)}

/* --- floating hand-drawn letters --- */
.scatter{position:absolute;inset:0;pointer-events:none;z-index:1}
.scatter__l{
  position:absolute;left:var(--x);top:var(--y);
  font-family:var(--hand);font-weight:600;
  color:var(--accent);
  opacity:.9;
  font-size:calc(clamp(4rem,11vw,9rem) * var(--s,.5));
  transform:translate(-50%,-50%) rotate(var(--rot,0));
  filter:url(#rough);
  text-transform:lowercase;
}

/* --- crayon wordmark --- */
.hero__center{position:relative;z-index:2;text-align:center;width:100%;max-width:100%}
.wordmark{
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(0px,0.3vw,5px);
  font-family:"InboundHand",var(--hand);
  font-weight:400;
  color:var(--accent);
  line-height:.9;
  margin:0;width:100%;
  --u:clamp(10rem,37vw,31rem);   /* base cap unit */
}
.wordmark .l{display:inline-block;text-transform:lowercase}
.l-i{font-size:calc(var(--u) * 1.02);transform:rotate(-3deg)}
.l-n{font-size:calc(var(--u) * .66);transform:translateY(.02em) rotate(2deg)}
.l-b{font-size:calc(var(--u) * 1.18);transform:translateY(.06em) rotate(-2deg);margin:0 .04em 0 .12em}
.l-o{font-size:calc(var(--u) * .7);transform:translateY(-.12em) rotate(4deg)}
.l-u{font-size:calc(var(--u) * .4);transform:translateY(-1.05em) rotate(-5deg);margin-left:.14em}
.l-n2{font-size:calc(var(--u) * .5);transform:translateY(-.12em) rotate(3deg);margin-right:.18em}
.l-d{font-size:calc(var(--u) * .78);transform:translateY(-.04em) rotate(-3deg)}

.hero__tagline{
  font-family:var(--serif);
  font-size:clamp(1rem,2.4vw,1.5rem);
  font-weight:300;
  margin:clamp(-2.6rem,-4vh,-1rem) auto 0;
  max-width:none;white-space:nowrap;
  color:var(--ink-soft);
  line-height:1.4;
}
/* The desktop lockup tucks the tagline up under the wordmark with a negative margin.
   The wordmark scales on vw, so below ~820px its b/d/n descenders landed on top of the
   tagline — ease the pull-up off across the whole mobile/tablet range. */
@media (max-width:820px){
  .hero__tagline{margin-top:clamp(-1rem,-1.2vh,-.2rem)}
}
@media (max-width:520px){
  .hero__tagline{white-space:normal;max-width:26ch}
}
.hero__cta{
  display:inline-flex;align-items:center;gap:.55em;
  margin-top:clamp(1.5rem,3.4vw,2.4rem);
  font-family:var(--sans);font-weight:500;font-size:clamp(.86rem,1.05vw,1rem);
  letter-spacing:.03em;text-decoration:none;
  color:#fff;background:var(--accent);
  padding:.9em 1.7em;border-radius:40px;
  box-shadow:0 12px 32px rgba(30,63,214,.26);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,background .28s;
}
.hero__cta:hover{transform:translateY(-3px);background:#173bc7;box-shadow:0 18px 42px rgba(30,63,214,.36)}
.hero__cta span{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.hero__cta:hover span{transform:translateX(4px)}
.hero__tagline em{color:var(--accent);font-style:italic}

/* --- barcode, bottom-left --- */
.barcode{
  position:absolute;bottom:clamp(26px,5vh,50px);left:var(--pad);
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;z-index:3;
}
.barcode__bars{
  width:132px;height:40px;
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 9px,var(--ink) 9px 12px,transparent 12px 13px);
}
.barcode__num{color:var(--ink);font-size:.58rem;letter-spacing:.1em}

.hero__scroll{
  position:absolute;bottom:clamp(26px,5vh,50px);right:var(--pad);
  color:var(--muted);z-index:3;
}

/* =========================================================
   WHY INBOUND  (big script, centered copy)
   ========================================================= */
.why{
  position:relative;
  background:var(--paper);color:var(--black);
  padding:clamp(30px,5vw,70px) var(--pad) clamp(40px,6vw,90px);
  margin-top:clamp(20px,4vw,60px);
  overflow:visible;text-align:center;
}
.why__label{
  position:absolute;top:clamp(22px,4vh,44px);
  font-size:.6rem;letter-spacing:.14em;color:rgba(28,26,23,.45);
}
.why__label--l{left:var(--pad)}
.why__label--r{right:var(--pad);color:rgba(28,26,23,.45)}

.why__script{
  font-family:"Breathing",var(--hand),cursive;font-weight:400;
  color:var(--accent);line-height:.86;margin:0;
  font-size:clamp(2.6rem,9.2vw,7rem);
  position:relative;z-index:1;
}
.why__script--top{color:var(--orange);transform:rotate(-12deg) translateY(var(--py,0));text-align:left;margin-left:clamp(0px,2vw,40px);margin-top:clamp(-110px,-7.5vw,-50px)}
.why__script--bot{color:var(--accent);transform:rotate(-12deg) translateY(var(--py,0));text-align:right;margin-right:clamp(0px,3vw,60px);margin-bottom:clamp(-40px,-3vw,-16px)}

.why__mid{max-width:74ch;margin:clamp(20px,3.5vw,52px) auto;position:relative;z-index:2}
.why__kicker{color:var(--orange);letter-spacing:.2em;margin:0 0 1.2rem}
.why__body{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.05rem,1.5vw,1.38rem);line-height:1.5;letter-spacing:-.005em;
  color:var(--black);margin:0;
}
.why__body .w-out{color:var(--orange)}
.why__body .w-in{color:var(--accent)}
.why__body .why__hi{color:var(--orange);font-weight:700}
.why__body em{
  font-family:var(--sans);font-style:normal;font-weight:300;
  color:var(--black);font-size:1em;
}

.why__bridge{
  position:absolute;z-index:5;
  right:clamp(50px,13vw,220px);
  bottom:clamp(-38px,-3vw,-18px);
  width:clamp(140px,16vw,215px);height:auto;display:block;
  box-shadow:0 16px 40px rgba(10,14,40,.26);
  filter:grayscale(1);
}

@media (max-width:640px){
  .why__script{font-size:clamp(2.8rem,15vw,6rem)}
  .why__label--r{display:none}
  .why__bridge{position:relative;right:auto;bottom:auto;margin:1.5rem auto 0;width:min(72%,280px)}
}

/* =========================================================
   THE GAP
   ========================================================= */
.gap{padding-bottom:clamp(40px,8vw,90px)}
.statement{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(2rem,7vw,5.2rem);
  line-height:1.02;
  letter-spacing:-.02em;
  margin:clamp(40px,9vw,110px) var(--pad) clamp(30px,6vw,70px);
  max-width:16ch;
}
.circled{position:relative;display:inline-block;color:var(--accent);font-family:"Breathing",var(--hand),cursive;font-style:normal;font-size:1.12em;line-height:.9;padding:0 .08em}
.scribble--circle{
  position:absolute;left:-14%;top:-24%;width:128%;height:150%;
  color:var(--accent);pointer-events:none;
}
.gap__grid{
  display:grid;gap:clamp(24px,5vw,64px);
  grid-template-columns:1.1fr .9fr;
  padding:0 var(--pad);align-items:start;
}
.gap__lead{
  font-family:var(--serif);
  font-size:clamp(1.3rem,2.6vw,2rem);
  font-weight:300;line-height:1.28;margin:0;
}
.gap__hi{display:block;color:var(--orange);font-weight:400;margin-bottom:1em}
.gap__note p{
  font-size:clamp(1rem,1.4vw,1.12rem);
  color:var(--ink-soft);margin:0 0 1rem;max-width:40ch;
}
.gap__note em{color:var(--ink);font-style:italic;font-weight:500}

/* =========================================================
   THE ROOM  (file-folder carousel)
   ========================================================= */
.room{
  background-color:var(--accent);color:#fff;
  background-image:var(--blue-grain);background-size:240px 240px;background-blend-mode:screen;
  position:relative;
  padding:clamp(56px,7.5vw,120px) var(--pad) clamp(60px,7vw,110px);
}
.room__top{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1.5px solid rgba(255,255,255,.38);padding-top:14px;
}
.room__top .mono{color:rgba(255,255,255,.78)}
.room__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4.8vw,3.6rem);line-height:1.02;letter-spacing:-.02em;
  margin:clamp(26px,3.6vw,48px) 0 clamp(34px,4.4vw,60px);
}

.folderwrap{
  display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,84px);align-items:center;
}

/* ---- the manila folder ---- */
.folder2{
  position:relative;
  background:#e7ddc2;
  border-radius:3px 12px 12px 12px;
  padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px) clamp(34px,4vw,56px);
  box-shadow:0 28px 56px rgba(20,21,26,.26);
  transform:rotate(var(--r,0));
}
.folder2::before,.folder2::after{      /* stacked sheets behind */
  content:"";position:absolute;inset:0;z-index:-1;
  background:#ded3b6;border-radius:3px 12px 12px 12px;
}
.folder2::before{transform:rotate(2.4deg) translate(10px,8px)}
.folder2::after{background:#d3c8a8;transform:rotate(4.6deg) translate(20px,16px)}
.folder2__tab{
  position:absolute;top:-27px;left:26px;
  background:#e7ddc2;color:#5c5540;
  padding:9px 22px;border-radius:9px 9px 0 0;
  letter-spacing:.2em;font-size:.6rem;
}
.folder2__holes{position:absolute;left:14px;top:22%;display:flex;flex-direction:column;gap:clamp(30px,5vh,64px)}
.folder2__holes span{width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}

/* ---- polaroid on the folder ---- */
.polaroid{
  position:relative;width:min(74%,300px);margin:6px auto 0;
  background:#fcfbf8;padding:11px 11px 0;
  border:1px solid rgba(0,0,0,.07);
  box-shadow:0 20px 40px rgba(0,0,0,.34);
  transform:rotate(-1.6deg);cursor:pointer;
}
.polaroid__img{
  display:block;width:100%;aspect-ratio:4/5;object-fit:contain;object-position:bottom center;
  background:#fcfbf8;filter:grayscale(1) contrast(1.05);
  transition:opacity .35s ease;
}
.polaroid__name{
  font-family:var(--hand);color:var(--accent);
  text-align:center;font-weight:500;
  font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;
  padding:.5em 0 .62em;margin:0;
  transition:opacity .35s ease;
}
.clip--big{
  position:absolute;z-index:3;
  width:clamp(28px,3.2vw,42px);height:auto;
  top:calc(-1 * clamp(20px,2.2vw,30px));right:22%;
  transform:rotate(9deg);
  filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));
}

/* ---- bio side (on blue) ---- */
.bio{max-width:44ch}
.bio__role{color:#fff;letter-spacing:.16em;margin:0 0 1.1rem}
.bio__desc{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.5;letter-spacing:-.005em;
  color:rgba(255,255,255,.92);margin:0 0 1.8rem;min-height:6.5em;
  transition:opacity .35s ease;
}
.bio__li{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.42);border-radius:40px;
  padding:.7rem 1.15rem;transition:border-color .25s,background .25s,color .25s;
}
.bio__li svg{width:16px;height:16px;color:#fff}
.bio__li:hover{border-color:#fff;background:rgba(255,255,255,.14)}

.bio__nav{display:flex;align-items:center;gap:18px;margin-top:clamp(28px,3.4vw,44px)}
.navbtn{
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.42);background:transparent;color:#fff;
  font-size:1.1rem;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,background .25s,transform .25s;
}
.navbtn:hover{border-color:#fff;background:rgba(255,255,255,.16);transform:translateY(-2px)}
.bio__count{color:rgba(255,255,255,.72);letter-spacing:.18em}
.bio__count b{color:#fff;font-weight:400}
.is-swapping{opacity:0}

/* =========================================================
   THIS COULD BE YOU · SCATTER (tiles around a heading)
   ========================================================= */
.cby2{
  background:var(--paper);color:var(--black);
  padding:clamp(40px,5vw,72px) var(--pad) clamp(64px,8vw,120px);
  position:relative;
}
.cby2__wrap{
  max-width:1320px;margin:0 auto;position:relative;
}
.cby2__row{display:flex;flex-direction:row;align-items:flex-start;gap:clamp(20px,3vw,52px);max-width:1440px;margin:0 auto}
.cby2__intro{flex:1 1 auto;min-width:0;max-width:none;position:relative;z-index:1}
.cby2__head{
  margin:0;color:var(--accent);text-transform:uppercase;text-align:left;
  font-family:"Archivo",var(--sans);font-weight:300;letter-spacing:-.04em;line-height:.82;
}
.cby2__w{display:block;font-size:clamp(2.6rem,11vw,9rem)}
.cby2__w--you{
  font-size:clamp(4.8rem,22vw,17rem);line-height:.78;white-space:nowrap;
  display:inline-block;transform-origin:0 50%;
  animation:youmove 5s ease-in-out infinite;
}
.cby2__body{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,1.2vw,1.12rem);line-height:1.5;text-align:right;
  color:var(--ink-soft);margin:0;max-width:none;white-space:nowrap;
  position:absolute;top:clamp(160px,21vw,232px);right:clamp(60px,10vw,132px);z-index:8;
}
@media (max-width:820px){
  .cby2__body{position:static;text-align:center;margin:clamp(20px,4vw,30px) auto 0;max-width:40ch;white-space:normal}
}
/* fanned card deck — click a card to pop it open */
.deck{
  position:relative;z-index:5;flex:1 1 56%;
  display:flex;justify-content:center;align-items:center;
  padding:0;min-height:clamp(300px,40vw,560px);
}
.deck__card{
  flex:none;width:clamp(92px,10.2vw,158px);aspect-ratio:9/16;
  border:0;padding:0;background:none;cursor:pointer;
  border-radius:clamp(9px,1.1vw,15px);overflow:hidden;
  margin:0 clamp(-16px,-1.2vw,-6px);
  box-shadow:0 24px 56px rgba(20,21,26,.28);
  transform:rotate(var(--rot,0)) translateY(var(--ty,0));
  animation:deckfloat var(--fdur,5s) ease-in-out infinite;animation-delay:var(--fdelay,0s);
  will-change:transform;
}
.deck__card img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.03);transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s}
.deck__card:hover{z-index:20}
.deck__card:hover img,.deck__card:focus-visible img{transform:scale(1.07);filter:none}
@keyframes deckfloat{
  0%,100%{transform:rotate(var(--rot,0)) translateY(var(--ty,0))}
  50%{transform:rotate(calc(var(--rot,0) * .82)) translateY(calc(var(--ty,0) - 18px))}
}
.deck__card:nth-child(1){--rot:-24deg;--ty:78px;z-index:1;--fdur:5.2s;--fdelay:-.4s}
.deck__card:nth-child(2){--rot:-12deg;--ty:24px;z-index:2;--fdur:4.4s;--fdelay:-1.3s}
.deck__card:nth-child(3){--rot:0deg;--ty:-20px;z-index:3;width:clamp(108px,12vw,186px);--fdur:5.8s;--fdelay:-.8s}
.deck__card:nth-child(4){--rot:12deg;--ty:24px;z-index:2;--fdur:4.8s;--fdelay:-1.7s}
.deck__card:nth-child(5){--rot:24deg;--ty:78px;z-index:1;--fdur:5.4s;--fdelay:-.6s}
@media (max-width:820px){
  .cby2__row{flex-direction:column;align-items:stretch;gap:clamp(20px,5vw,40px)}
  .deck{flex:none}
  .deck__card{animation:none}
}

/* single row of photos, lined up */
.pgrid{
  flex:0 0 clamp(560px,68vw,940px);
  margin-top:clamp(135px,19vw,250px);
  transform:translateX(clamp(-40px,-3vw,-14px));
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,15px);
}
.vcard{
  width:100%;aspect-ratio:1/1;
  border:0;padding:0;background:none;cursor:pointer;
  border-radius:0;overflow:hidden;
  box-shadow:0 16px 40px rgba(20,21,26,.18);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s;
  will-change:transform;
}
.vcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .5s}
.vcard:hover{transform:translateY(-6px) scale(1.02);z-index:5;box-shadow:0 28px 56px rgba(20,21,26,.28)}
.vcard:hover img{transform:scale(1.05);filter:none}
@media (max-width:820px){
  .pgrid{flex:none;width:100%}
}

/* gentle sway on YOU */
@keyframes youmove{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(2.6%) scale(1.03)}}

/* lightbox pop */
.lightbox{
  position:fixed;inset:0;z-index:9998;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,5vw,64px);
  background:rgba(18,19,24,.84);
  opacity:0;transition:opacity .35s;
}
.lightbox[hidden]{display:none}
.lightbox.is-open{opacity:1}
.lightbox__fig{
  margin:0;max-width:min(430px,92vw);display:flex;flex-direction:column;
  transform:scale(.9);transition:transform .42s cubic-bezier(.2,.7,.2,1);
}
.lightbox.is-open .lightbox__fig{transform:none}
.lightbox__fig img{width:100%;height:auto;max-height:76vh;object-fit:cover;border-radius:10px;box-shadow:0 44px 100px rgba(0,0,0,.55)}
.lightbox__cap{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  color:#fff;padding:1rem .3rem 0;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
}
.lightbox__cap a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;white-space:nowrap}
.lightbox__cap a:hover{border-color:#fff}
.lightbox__close{
  position:absolute;top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px);
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;
  font-size:1.5rem;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:background .25s;
}
.lightbox__close:hover{background:rgba(255,255,255,.16)}
body.lb-lock{overflow:hidden}
@media (max-width:640px){
  .deck{flex-wrap:wrap;gap:14px}
  .deck__card{margin:0;width:min(42%,180px)!important;transform:none!important}
}
/* scattered polaroid pile — overlaid over the giant type */
.cby2__pile{
  position:absolute;top:clamp(150px,17vw,300px);right:clamp(-10px,1vw,30px);
  width:clamp(240px,29vw,390px);height:clamp(420px,48vw,660px);
  z-index:6;margin:0;
}
.tile{
  position:absolute;width:clamp(150px,17vw,210px);text-decoration:none;
  background:#fdfcfa;padding:13px 13px 46px;border-radius:2px;
  box-shadow:0 22px 44px rgba(20,21,26,.36);
  transform:rotate(var(--r,0)) translate3d(0,var(--py,0),0);transition:box-shadow .4s;
  z-index:1;
}
.tile__pic{position:relative;overflow:hidden;background:var(--paper-2)}
.tile img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 30%;display:block;
  filter:grayscale(1) contrast(1.03);transition:filter .45s;
}
.tile:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:6;box-shadow:0 30px 60px rgba(20,21,26,.44)}
.tile:hover img{filter:grayscale(0) contrast(1.03)}
.tile--1{top:2%;left:0;z-index:2}
.tile--2{top:26%;left:46%;z-index:3}
.tile--3{top:50%;left:6%;z-index:4}
.tile--4{top:70%;left:50%;z-index:3}
@media (max-width:820px){
  .cby2__wrap{grid-template-columns:1fr;gap:clamp(30px,6vw,50px);text-align:center}
  .cby2__intro{max-width:none;margin:0 auto}
  .cby2__pile{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:30px clamp(16px,4vw,28px);max-width:520px;margin-inline:auto}
  .tile{position:relative;width:100%;top:auto;left:auto;transform:rotate(var(--r,0))}
}
@media (max-width:460px){
  .cby2__pile{grid-template-columns:1fr;gap:26px;max-width:280px}
}
.upclose{
  background:var(--paper);color:var(--ink);
  position:relative;
  padding:clamp(8px,1.5vw,28px) var(--pad) clamp(60px,8vw,120px);
}
/* stage carousel */
.stage{
  position:relative;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:clamp(6px,2vw,28px);
  margin-top:clamp(30px,4vw,60px);
}
.ucnav{
  width:clamp(46px,5vw,62px);height:clamp(46px,5vw,62px);border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  font-size:1.35rem;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,background .25s,color .25s,transform .25s;z-index:5;
}
.ucnav:hover{border-color:var(--accent);color:var(--accent);background:#fff;transform:scale(1.06)}
/* icon hover movement */
.ucnav__a{display:inline-block;transition:transform .32s cubic-bezier(.2,.75,.25,1)}
.ucnav--prev:hover .ucnav__a,.ucnav--prev:focus-visible .ucnav__a{transform:translateX(-5px)}
.ucnav--next:hover .ucnav__a,.ucnav--next:focus-visible .ucnav__a{transform:translateX(5px)}
.anno--detail .li-ico{transition:transform .32s cubic-bezier(.2,.75,.25,1)}
.anno--detail:hover .li-ico,.anno--detail:focus-visible .li-ico{transform:translateY(-2px) scale(1.12)}
.uc-dots button{transition:background .25s,border-color .25s,transform .25s cubic-bezier(.2,.75,.25,1)}
.uc-dots button:hover{transform:scale(1.6)}
/* magnetic name + speech box */
.anno--name,.anno--note{transition:transform .4s cubic-bezier(.2,.8,.2,1);will-change:transform}
/* clickable role/blog tag */
.anno--role{text-decoration:none;cursor:pointer;transition:border-color .25s,color .25s,transform .25s}
.upclose .anno--role:hover{border-color:var(--accent);color:var(--accent)}

.spot{
  position:relative;max-width:820px;width:100%;margin:0 auto;
  min-height:clamp(440px,56vw,640px);
  display:grid;place-items:end center;
}
/* rectangular framed photo (legacy) */
.spot__photo{
  position:relative;z-index:1;
  width:clamp(230px,38%,350px);aspect-ratio:3/4;
  border-radius:10px;overflow:hidden;
  box-shadow:0 30px 62px rgba(20,21,26,.26);
}
.spot__photo img{width:100%;height:100%;object-fit:cover;filter:contrast(1.03)}
/* transparent cut-out standee (sized by height so full/half body fits) */
.spot__photo--cut{
  border-radius:0;overflow:visible;box-shadow:none;background:none;
  width:auto;aspect-ratio:auto;align-self:end;display:flex;
}
.spot__photo--cut img{
  height:clamp(360px,52vw,560px);width:auto;max-width:86vw;object-fit:contain;
  filter:grayscale(1) contrast(1.05) drop-shadow(0 20px 24px rgba(20,21,26,.22));
  transition:opacity .3s ease;
}

.uc-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(24px,3vw,40px)}
.uc-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--muted);background:transparent;transition:background .25s,border-color .25s,transform .25s;
}
.uc-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent);transform:scale(1.25)}
.uc-swap{opacity:0}

.anno{position:absolute;z-index:2}

/* name tab + connector */
.anno--name{
  left:2%;top:19%;
  background:rgba(30,63,214,.13);
  border-left:3px solid var(--accent);
  padding:.5rem .95rem .62rem;border-radius:2px 9px 9px 2px;
}
.anno__name{
  font-family:"Breathing",var(--hand),cursive;font-weight:400;color:var(--accent-ink);
  font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1;display:block;
}
.anno--name::before{content:"";position:absolute;right:-54px;top:50%;width:54px;height:1.5px;background:var(--accent);transform:translateY(-50%)}
.anno--name::after{content:"";position:absolute;right:-60px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}

/* role tag (static, not clickable) */
.anno--role{
  right:3%;top:13%;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--line);border-radius:40px;padding:.55rem .95rem;background:var(--paper);
}

/* description card */
.anno--note{
  left:0;bottom:8%;width:min(66%,360px);
  background:#fff;border:1px solid var(--line);border-radius:15px;
  box-shadow:0 18px 38px rgba(20,21,26,.17);
  padding:.8rem 1.05rem 1.1rem;
}
.note__bar{display:flex;justify-content:flex-start;align-items:center;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.note__q{font-family:var(--serif);font-weight:300;font-size:clamp(.92rem,1.15vw,1.1rem);line-height:1.42;margin:0;color:var(--ink)}

/* linkedin "view profile" pill + connector */
.anno--detail{
  right:1%;bottom:17%;display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);border-radius:40px;
  padding:.62rem 1.05rem;transition:border-color .25s,color .25s,background .25s;
}
.anno--detail:hover{border-color:var(--accent);color:var(--accent);background:#fff}
.anno--detail .li-ico{width:17px;height:17px;color:var(--accent);flex:none}
.anno--detail span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.anno--detail::before{content:"";position:absolute;left:-48px;top:50%;width:48px;height:1.5px;background:var(--accent);transform:translateY(-50%)}
.anno--detail::after{content:"";position:absolute;left:-54px;top:50%;width:9px;height:9px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}

/* ---- beige theme: up-close section on paper ---- */
.upclose{
  background:var(--paper);
  color:var(--ink);
}
.upclose .room__top{border-top-color:var(--line)}
.upclose .room__top .mono{color:var(--muted)}
.upclose .room__title{color:var(--black)}
/* name: blue handwriting, no box, right-anchored well left of the body */
.upclose .anno--name{background:transparent;border-left:0;padding:0;left:auto;right:72%;text-align:right;white-space:nowrap}
.upclose .anno__name{color:var(--accent)}
/* connector: floats in the gap toward the person, without touching */
.upclose .anno--name::before{width:52px;right:-52px}
.upclose .anno--name::after{right:-58px}
/* connectors -> accent so they read on beige */
.upclose .anno--name::before,.upclose .anno--name::after,
.upclose .anno--detail::before,.upclose .anno--detail::after{background:var(--accent)}
/* role tag: outlined */
.upclose .anno--role{background:var(--paper);border-color:var(--line);color:var(--ink)}
/* view-profile pill */
.upclose .anno--detail{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
.upclose .anno--detail:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
/* arrows */
.upclose .ucnav{background:var(--paper);border-color:var(--line);color:var(--ink)}
.upclose .ucnav:hover{background:#fff;border-color:var(--accent);color:var(--accent)}
/* dots */
.upclose .uc-dots button{border-color:var(--muted)}
.upclose .uc-dots button[aria-current="true"]{background:var(--accent);border-color:var(--accent)}

/* alternate rhythm: flip annotation sides on even spotlights (legacy stack only) */
.spots .spot:nth-child(even) .anno--name{left:auto;right:2%;border-left:0;border-right:3px solid var(--accent);border-radius:9px 2px 2px 9px}
.spots .spot:nth-child(even) .anno--name::before{right:auto;left:-54px}
.spots .spot:nth-child(even) .anno--name::after{right:auto;left:-60px}
.spots .spot:nth-child(even) .anno--role{right:auto;left:3%}
.spots .spot:nth-child(even) .anno--note{left:auto;right:0}
.spots .spot:nth-child(even) .anno--detail{right:auto;left:1%}
.spots .spot:nth-child(even) .anno--detail::before{left:auto;right:-48px}
.spots .spot:nth-child(even) .anno--detail::after{left:auto;right:-54px}

/* =========================================================
   NEXT GENERATION (the mission)
   ========================================================= */
.gen{
  position:relative;
  background:var(--paper);color:var(--black);
  text-align:center;padding:clamp(48px,7vw,110px) var(--pad) clamp(60px,8vw,120px);
}
.gen__photo{
  position:absolute;z-index:3;
  right:clamp(30px,7vw,150px);
  top:clamp(250px,27vw,430px);
  width:clamp(190px,22vw,320px);height:auto;display:block;
  box-shadow:0 16px 40px rgba(10,14,40,.22);
  filter:grayscale(1);
}
@media (max-width:820px){
  .gen__photo{position:relative;right:auto;top:auto;margin:clamp(24px,5vw,40px) auto 0;width:min(72%,300px)}
}
.gen__eyebrow{color:var(--orange);letter-spacing:.2em;margin:0 0 clamp(20px,2.6vw,36px)}
.gen__head{
  max-width:none;width:calc(100% + 2*var(--pad));
  margin:clamp(-120px,-9.6vw,-64px) 0 clamp(24px,3.4vw,52px) calc(-1 * var(--pad));
  position:relative;z-index:2;
}
.gen__curve{width:100%;height:auto;display:block;overflow:visible}
.gen__curve text{
  font-family:"Archivo",var(--sans);font-style:normal;font-weight:300;
  font-size:58px;fill:var(--black);letter-spacing:-.5px;
}
/* The curved headline is deliberately full-bleed on desktop, where there is enough room
   for the path to start at x=6 without touching anything. On a phone that put the start
   point ~2px from the viewport edge and sliced the "B" off "Building". Inset it to the
   section padding, and scale the type back up so the narrower box doesn't shrink it.
   (Must come after the base rule above — same specificity, so source order decides.) */
@media (max-width:820px){
  .gen__head{width:100%;margin-left:0;margin-right:0}
  .gen__curve text{font-size:65px}
}
.gen__curve-hi{font-family:"Archivo",var(--sans);fill:var(--accent)}
.gen__copy{
  max-width:52ch;
  margin:clamp(-260px,-20vw,-120px) 0 0 clamp(40px,13vw,250px);
  display:flex;flex-direction:column;gap:1.05rem;text-align:left;
}
@media (max-width:820px){
  .gen__copy{margin:clamp(-40px,-6vw,-10px) auto 0;max-width:none}
}
.gen__copy p{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.9rem,1.15vw,1.04rem);line-height:1.62;color:var(--ink-soft);margin:0;
}
.gen__punch{
  color:var(--black)!important;font-weight:500!important;
  font-size:clamp(1.02rem,1.5vw,1.32rem)!important;line-height:1.38!important;
  margin-top:.6rem!important;
}
.gen__lead{
  color:var(--accent)!important;font-weight:700!important;
  font-size:clamp(1.05rem,1.5vw,1.35rem)!important;letter-spacing:-.01em!important;
  margin:0 0 clamp(18px,2.2vw,30px)!important;
}
.gen__stats{display:flex;flex-direction:column;gap:clamp(14px,1.9vw,26px);margin:0 0 clamp(24px,3vw,40px)}
.gen__stat{display:flex;align-items:baseline;gap:clamp(12px,1.5vw,22px)}
.gen__num{
  font-family:"Archivo",var(--sans);font-weight:800;color:var(--accent);
  font-size:clamp(2.3rem,4.6vw,4rem);line-height:.85;letter-spacing:-.03em;
  flex:none;min-width:2.2ch;font-variant-numeric:tabular-nums;
}
.gen__slabel{
  font-family:var(--sans);font-weight:300;color:var(--ink-soft);
  font-size:clamp(.9rem,1.05vw,1.04rem);line-height:1.3;max-width:24ch;
}

/* =========================================================
   THE GAP — alt layout (centered, numbered columns)
   ========================================================= */
.galt{
  background:var(--paper);color:var(--black);
  position:relative;overflow:hidden;
  padding:clamp(56px,7vw,110px) var(--pad) clamp(56px,7vw,110px);
}
.galt__wrap{
  max-width:1200px;margin:0 auto;
}
.galt__lead{max-width:min(64ch,66%)}
.galt__script-line{
  font-family:"Breathing",var(--hand),cursive;font-weight:400;
  color:#1E3FD6;line-height:.9;margin:0;position:relative;z-index:1;
  font-size:clamp(2.3rem,4.8vw,3.9rem);
}
.galt__script-line--a{transform:translate3d(var(--px,0),0,0);white-space:nowrap;z-index:4;margin:clamp(-50px,-4.8vw,-28px) 0 0 min(calc(8px - var(--pad)), calc(608px - 50vw))}
.galt__script-line--b{
  transform:translate3d(var(--px,0),0,0);white-space:nowrap;z-index:4;
  margin:clamp(2px,0.6vw,14px) 0 0 clamp(150px,26vw,440px);
}
.galt__head{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2rem,4.7vw,4.1rem);line-height:1.12;letter-spacing:-.022em;
  margin:0;color:var(--black);max-width:16ch;
}
.galt__script{
  display:inline-block;font-family:"Breathing",var(--hand),cursive;color:var(--accent);
  font-size:1.02em;line-height:1;transform:translateY(.06em);
}
.galt__method{display:flex;flex-direction:column;gap:1.1rem;max-width:none;position:relative;z-index:2;margin:clamp(24px,3vw,52px) 0 0}
.galt__method p{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,1.25vw,1.18rem);line-height:1.55;color:var(--ink-soft);margin:0;
}
.galt__method b{font-weight:700;color:var(--black)}
@media (max-width:820px){
  .galt__wrap{grid-template-columns:1fr;gap:clamp(28px,5vw,52px);align-items:start}
  .galt__head{max-width:none}
  .galt__method{max-width:none}
}
.galt__cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,56px);
  max-width:1040px;margin:0 auto;text-align:left;
}
.galt__col{padding-top:18px}
.galt__num{display:block;color:var(--orange);letter-spacing:.12em;margin-bottom:1rem;font-size:.72rem}
.galt__col p{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,1.15vw,1.1rem);line-height:1.5;color:var(--black);margin:0;
}
.galt__col em{font-style:normal;color:var(--accent)}

/* case studies — blue panel */
.cases-wrap{
  max-width:1040px;margin:clamp(56px,6.5vw,100px) auto 0;
  background-color:var(--accent);background-image:var(--blue-grain);
  background-size:240px 240px;background-blend-mode:screen;color:#fff;
  border-radius:22px;
  padding:clamp(44px,5.5vw,84px) clamp(28px,4vw,64px);
}
.cases-head{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.05;letter-spacing:-.015em;
  margin:0 0 .8rem;color:var(--black);
}
.cases-sub{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.5;color:var(--ink-soft);
  margin:0 auto clamp(28px,3.4vw,48px);max-width:52ch;
}
/* inline-photo proof collage */
.proof{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.22em .3em;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.15;letter-spacing:-.015em;
  color:#fff;margin:0 auto clamp(20px,2.4vw,34px);max-width:18ch;
}
.proof .galt__script{font-weight:400;font-size:1.08em;color:#fff;transform:rotate(-3deg) translateY(.04em)}
.proof__chip{
  display:inline-block;height:1em;aspect-ratio:16/11;border-radius:.16em;overflow:hidden;
  box-shadow:0 8px 20px rgba(20,21,26,.22);transform:rotate(var(--t,0));
  transition:transform .3s,box-shadow .3s;
}
.proof__chip img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.04)}
.proof__chip:hover{transform:rotate(0) translateY(-3px);box-shadow:0 14px 30px rgba(20,21,26,.3)}
.proof__chip:hover img{filter:none}
.proof__sub{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.5;color:rgba(255,255,255,.9);
  max-width:52ch;margin:0 auto clamp(20px,2.4vw,32px);
}
.proof__links{display:flex;justify-content:center;gap:clamp(20px,4vw,52px);flex-wrap:wrap}
.proof__links a{color:var(--orange);letter-spacing:.1em;text-decoration:none}
.proof__links a:hover{text-decoration:underline}

@media (max-width:760px){
  .galt__cols{grid-template-columns:1fr;gap:0}
  .galt__col{padding:20px 0}
}

/* =========================================================
   THIS COULD BE YOU
   ========================================================= */
.cby{
  background:var(--paper);color:var(--black);text-align:center;
  padding:clamp(72px,10vw,150px) var(--pad);
}
.cby__head{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;letter-spacing:-.02em;
  margin:0 0 clamp(20px,3vw,36px);color:var(--black);
}
.cby__script{
  font-family:"Breathing",var(--hand),cursive;color:var(--accent);
  font-size:1.18em;line-height:.7;
}
.cby__body{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1.05rem,1.6vw,1.4rem);line-height:1.5;
  color:var(--black);max-width:36ch;margin:0 auto;
}

/* experience collage — 2-up carousel, handwriting overlapping each photo */
.expo-carousel{max-width:1120px;margin:clamp(44px,5vw,80px) auto 0}
.collage{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  gap:clamp(30px,4vw,64px);padding-bottom:4px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.collage::-webkit-scrollbar{display:none}
.ci{
  flex:0 0 calc(50% - clamp(15px,2vw,32px));scroll-snap-align:start;
  position:relative;padding-top:clamp(26px,2.8vw,48px);text-align:left;
}
.ci__photo{position:relative;z-index:0}
.ci__photo img{
  width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.03);
  border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,21,26,.17);
  transition:filter .45s;
}
.ci:hover .ci__photo img{filter:grayscale(0) contrast(1.03)}
.ci__words{
  position:absolute;top:0;left:5%;right:5%;z-index:2;margin:0;
  font-family:"Breathing",var(--hand),cursive;color:var(--accent);
  font-size:clamp(1.35rem,2.2vw,2rem);line-height:.94;
  transform:rotate(-3deg);transform-origin:left center;
  text-shadow:0 1px 0 rgba(239,230,216,.9),0 0 7px rgba(239,230,216,.8);
}
.ci:nth-child(even) .ci__words{transform:rotate(2.2deg)}
.ci__cap{
  margin-top:14px;color:var(--muted);letter-spacing:.08em;line-height:1.75;font-size:.62rem;
}
.ci__cap b{color:var(--black)}
.ci__cap a{color:var(--accent);text-decoration:none}
.ci__cap a:hover{text-decoration:underline}

.expo-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:clamp(26px,3vw,44px)}
.expo-arrow{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);background:var(--paper);color:var(--black);
  font-size:1.15rem;cursor:pointer;display:grid;place-items:center;
  transition:border-color .25s,color .25s,background .25s,transform .25s;
}
.expo-arrow:hover{border-color:var(--accent);color:var(--accent);background:#fff;transform:scale(1.06)}
.expo-count{color:var(--muted);letter-spacing:.18em}
.expo-count b{color:var(--black);font-weight:400}
@media (max-width:620px){
  .ci{flex:0 0 86%}
}

/* =========================================================
   HOW
   ========================================================= */
.how__grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.how__item{
  padding:clamp(26px,3.6vw,52px) var(--pad);
}
.how__num{display:block;color:var(--accent);margin-bottom:1.6rem;font-size:.8rem}
.how__item h4{
  font-family:var(--serif);font-weight:300;
  font-size:1.28rem;line-height:1.12;margin:0 0 .7rem;
}
.how__item p{font-size:.96rem;color:var(--ink-soft);margin:0}

/* =========================================================
   APPLY
   ========================================================= */
.apply{background:var(--paper);color:var(--ink);padding-bottom:clamp(50px,8vw,100px)}
.apply .edge{border-color:var(--line)}
.apply .mono{color:var(--muted)}
.apply__wrap{
  max-width:1240px;margin:0 auto;
  padding:clamp(40px,8vw,120px) var(--pad) clamp(50px,8vw,110px);
  display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,80px);
  align-items:end;
}
.apply__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.7rem,8.5vw,7rem);line-height:.94;letter-spacing:-.03em;
  text-align:left;margin:0;
}
.apply__title em{
  color:var(--accent);font-style:italic;display:inline-block;
  transform-origin:left center;will-change:transform;
  animation:applysway 6s ease-in-out infinite;
}
@keyframes applysway{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(7px,-8px) rotate(-1deg)}}
.apply__aside{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px);padding-bottom:.4rem}
.apply__sub{
  text-align:left;max-width:42ch;margin:0;
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.6;color:var(--ink-soft);
}
.apply__btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:.55em;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--sans);font-weight:500;font-size:clamp(.9rem,1.05vw,1rem);letter-spacing:.02em;
  padding:.95em 1.8em;border-radius:40px;
  box-shadow:0 12px 32px rgba(30,63,214,.26);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,background .28s;
}
.apply__btn:hover{transform:translateY(-3px);background:#173bc7;box-shadow:0 18px 44px rgba(30,63,214,.36)}
.apply__btn span{transition:transform .28s cubic-bezier(.2,.7,.2,1)}

/* envelope invitation layout */
.apply__wrap--env{
  display:flex;flex-direction:column;align-items:center;
  grid-template-columns:none;gap:clamp(28px,4vw,52px);
  padding-top:clamp(46px,8vw,110px);
}
/* 95vw ignores the wrapper's own side padding, so the envelope poked past the right
   edge and added horizontal scroll — clamp it to the container instead */
.env{width:min(760px,100%);filter:drop-shadow(0 40px 62px rgba(30,63,214,.20))}
.env__photo{position:relative;display:block;width:100%}
.env__photo img{width:100%;height:auto;display:block}
.env__seal{
  position:absolute;left:51%;top:64%;transform:translate(-50%,-50%) rotate(-5deg);
  width:clamp(92px,13vw,138px);aspect-ratio:1;
  border-radius:47% 53% 50% 50% / 52% 50% 50% 48%;
  background:radial-gradient(circle at 37% 30%, #FFF6CE 0%, #FFEDA8 52%, #F1D98A 100%);
  box-shadow:0 8px 18px rgba(120,92,20,.32), inset 0 3px 5px rgba(255,255,255,.55), inset 0 -4px 8px rgba(150,120,40,.32);
  display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  z-index:3;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;
}
.env__seal span{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(.72rem,1.4vw,.98rem);line-height:1.08;color:var(--accent);
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.env__seal:hover{transform:translate(-50%,-50%) rotate(-5deg) scale(1.07);box-shadow:0 12px 26px rgba(120,92,20,.4), inset 0 3px 5px rgba(255,255,255,.55), inset 0 -4px 8px rgba(150,120,40,.32)}
.env__note{
  position:absolute;left:50%;top:31%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.02em;width:60%;
  font-family:"Breathing",var(--hand),cursive;color:var(--accent);
  font-size:clamp(1.9rem,5.6vw,3.3rem);line-height:1;text-align:center;
}
.apply__aside--env{align-items:center;text-align:center;max-width:600px}
.apply__aside--env .apply__sub{text-align:center;max-width:52ch}
.apply__aside--env .apply__btn{align-self:center}
@media (prefers-reduced-motion:no-preference){
  .env{animation:envfloat 7s ease-in-out infinite}
}
@keyframes envfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(.5deg)}}
.apply__btn:hover span{transform:translateX(4px)}
@media (max-width:820px){
  .apply__wrap{grid-template-columns:1fr;gap:clamp(24px,6vw,40px);align-items:start}
}

.apply__gate{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);
  max-width:920px;margin:0 auto;padding:0 var(--pad);
}
.gatecard{
  display:flex;flex-direction:column;gap:1rem;
  padding:clamp(26px,3.4vw,44px);
  text-decoration:none;
  background:var(--paper-2);
  border:1.5px solid var(--line);
  transition:background .3s,border-color .3s,transform .3s;
}
.gatecard:hover{background:#fff;border-color:var(--accent);transform:translateY(-4px)}
.gatecard--amb:hover{border-color:#3fbf9f}
.gatecard__k{color:var(--muted)}
.gatecard__h{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.7rem,3vw,2.6rem);line-height:1;letter-spacing:-.02em;
}
.gatecard__s{color:var(--accent);letter-spacing:.12em}
.gatecard--amb .gatecard__s{color:#3fbf9f}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{
  padding:clamp(40px,5vw,70px) var(--pad);
  display:grid;gap:1.4rem;
  background:var(--paper-2);
}
.foot__mark{
  --u:clamp(3.2rem,6vw,5.4rem);
  width:auto;justify-content:flex-start;margin:0 0 clamp(6px,1vw,14px);
}
.foot__fine{max-width:70ch;line-height:1.9;color:var(--muted)}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .shot__pic{transition:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:820px){
  .spot{display:block;min-height:0;max-width:420px}
  .spot__photo{width:min(74%,280px);margin:0 auto}
  .anno{position:static!important;margin:16px auto 0;width:-moz-fit-content;width:fit-content}
  .anno--name,.spot:nth-child(even) .anno--name{border-right:0;border-left:3px solid var(--accent);border-radius:2px 9px 9px 2px}
  .anno--name::before,.anno--name::after,.anno--detail::before,.anno--detail::after{display:none}
  .anno--note{width:min(88%,320px)}
  /* inline-flex ignores the auto side margins .anno sets, so the pill hugged the left edge */
  .anno--detail{display:flex;justify-content:center}

  /* the 3-column stage (arrow | photo | arrow) has no room on a phone:
     the cut-out was wider than its cell, so it ran under both arrows and
     pushed the page into horizontal scroll. Stack it and drop the arrows below. */
  .stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(14px,5vw,26px)}
  .spot{order:1;flex:0 0 100%;max-width:none}
  .ucnav--prev{order:2}
  .ucnav--next{order:3}
  .spot__photo--cut{width:100%;justify-content:center}
  .spot__photo--cut img{height:auto;width:min(74%,300px);max-width:100%}
  /* names are set in a wide script face and were nowrap — long ones got cut off both edges */
  .upclose .anno--name{white-space:normal;right:auto;left:auto;text-align:center;max-width:100%}
  .upclose .anno__name{font-size:clamp(1.6rem,7.5vw,2.4rem)}
}
@media (max-width:900px){
  .folderwrap{grid-template-columns:1fr;gap:clamp(40px,7vw,64px)}
  .bio{max-width:none}
  .how__grid{grid-template-columns:1fr 1fr}
  .gap__grid{grid-template-columns:1fr}
  .apply__gate{grid-template-columns:1fr}
  .hero__quote{display:none}
}
@media (max-width:560px){
  .room__title{font-size:clamp(1.7rem,7vw,2.5rem)}
  .folder2__holes{display:none}
  .polaroid{width:min(82%,280px)}
  .how__grid{grid-template-columns:1fr}
  .how__item{border-right:none!important}
  .hero__meta{font-size:.54rem;letter-spacing:.08em}
  .hero__code{margin-top:.5rem}
  .scatter__l{opacity:.7}
  .barcode__bars{width:104px;height:32px}
}

/* =========================================================
   WHAT WE DO — pinned split (text frozen, photos scroll)
   ========================================================= */
/* ---- talent spread · poster collage ---- */
.spread{
  position:relative;overflow:visible;color:var(--black);
  /* room either side so the collage doesn't butt up against the section above,
     and the last CTA doesn't run straight into "Meet the talent" below */
  padding:clamp(70px,11vw,170px) 0 clamp(70px,11vw,170px);
  background-color:var(--paper);
  background-image:radial-gradient(46% 58% at 50% 47%,
    rgba(30,63,214,.4) 0%,
    rgba(30,63,214,.22) 38%,
    rgba(30,63,214,.08) 60%,
    rgba(239,230,216,0) 78%);
}
/* ---- three ways in — stacked and centred, inside the "what we do" section ----
   Each programme is its own full-width block: large name, one line on who it's for,
   the detail, then the CTA. Vertical rather than three columns, so each one gets
   room to be read rather than competing side by side. */
.ways{position:relative;z-index:3;text-align:center}
.way{ margin:0 auto clamp(64px,9vw,132px);max-width:62ch }
.way:last-child{margin-bottom:0}
.way__name{
  font-family:"Archivo",var(--sans);font-weight:300;color:#15265c;
  font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 clamp(10px,1.4vw,18px);text-wrap:balance;
}
.way__for{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);
  font-size:clamp(1rem,1.35vw,1.22rem);line-height:1.3;
  margin:0 0 clamp(20px,2.6vw,34px);
}
.way__body{
  font-family:var(--sans);font-weight:300;color:#22346a;
  font-size:clamp(.98rem,1.2vw,1.12rem);line-height:1.72;
  margin:0 auto clamp(26px,3.2vw,42px);max-width:58ch;
}
.way__cta{
  /* block-level, not inline-flex: as an inline box it was taller than its line box
     and spilled past .way into whatever followed */
  display:flex;width:-moz-fit-content;width:fit-content;margin-inline:auto;
  align-items:center;gap:.55em;
  font-family:var(--sans);font-weight:400;font-size:.92rem;letter-spacing:.02em;
  color:#fff;background:var(--accent);text-decoration:none;
  padding:.9em 1.6em;border-radius:40px;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,box-shadow .28s;
}
.way__cta:hover{transform:translateY(-3px);background:#173bc7;box-shadow:0 16px 38px rgba(30,63,214,.34)}
.way__cta span{transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.way__cta:hover span{transform:translateX(4px)}
@media (max-width:820px){
  .ways{padding-top:clamp(40px,10vw,80px)}
  .way{max-width:none}
}

.spread__bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.spread__word{
  position:absolute;font-family:"Georgia","Times New Roman",serif;
  color:rgba(255,255,255,.13);white-space:nowrap;line-height:.86;letter-spacing:-.02em;
}
.spread__word--a{left:-2vw;top:30%;font-size:clamp(7rem,23vw,21rem);font-style:italic}
.spread__word--b{right:-4vw;bottom:9%;font-size:clamp(3.4rem,11vw,10rem)}
.spread__word--c{left:3vw;bottom:2.5%;font-size:clamp(1.2rem,2.6vw,2.3rem);color:rgba(255,255,255,.22);letter-spacing:.01em}
.reg{position:absolute;z-index:4;color:rgba(255,255,255,.55);font-size:19px;line-height:1}
.reg--a{top:clamp(22px,4vw,56px);right:clamp(30px,6vw,90px)}
.reg--b{bottom:clamp(36px,6vw,86px);left:50%}
.reg--c{top:47%;right:clamp(22px,3vw,48px)}
/* Two columns: the left one scrolls, the right one stays pinned while it passes.
   The polaroid collage is the fixed element; the copy and the three programmes are
   what moves. Sticky needs a parent taller than the viewport to have anything to
   stick against, which the left column provides on its own. */
.spread__split{
  position:relative;z-index:2;max-width:1320px;margin:0 auto;padding-inline:clamp(12px,2vw,32px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,3vw,60px);align-items:start;
}
/* programmes on the left, collage on the right (order, not DOM order, so the copy
   still comes first in the markup and on mobile) */
.spread__flow{order:1;padding:clamp(40px,6vw,90px) 0 clamp(40px,6vw,90px) clamp(0px,2vw,44px)}
.spread__stick{order:2;height:100vh;will-change:transform}
.spread__scatter{position:relative;width:100%;height:100%}
/* The polaroids carry fixed inline widths and each is rotated, which inflates its
   bounding box well past that width. Between the breakpoint and ~1366px that pushed
   the leftmost one off the edge, so scale them with the column instead. */
@media (min-width:1101px){
  .spread__scatter .poly{width:clamp(190px,18.5vw,270px)!important}
}
.spread__copy{position:relative;z-index:3;margin:0 0 clamp(40px,6vw,90px);text-align:center}
.spread__copy .wwd__eyebrow{color:#16265a;letter-spacing:.24em;margin:0 0 clamp(14px,1.6vw,22px)}
.spread__copy .wwd__title{
  font-family:"Archivo",var(--sans);font-weight:400;color:#15265c;
  font-size:clamp(1.75rem,3.1vw,2.9rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 clamp(20px,2.4vw,32px);
}
.spread__copy .wwd__body{display:flex;flex-direction:column;gap:1rem;max-width:52ch;margin-inline:auto}
.spread__copy .wwd__body p{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(.9rem,1.15vw,1.04rem);line-height:1.62;color:#22346a;margin:0;
}
.spread__copy .wwd__body b{font-weight:700;color:#0f1f4d}
.pst{
  position:absolute;background:#fff;
  padding:clamp(9px,.95vw,15px) clamp(9px,.95vw,15px) clamp(13px,1.3vw,20px);
  box-shadow:0 2px 5px rgba(20,21,26,.12),0 26px 50px rgba(20,21,26,.22);
  transform:translate(-50%,-50%) rotate(var(--r,0deg));
  will-change:transform;
}
.pst__kick{
  font-family:"Archivo",var(--sans);font-weight:500;
  font-size:clamp(.44rem,.62vw,.58rem);letter-spacing:.01em;line-height:1.28;
  color:var(--black);margin:0 0 clamp(7px,.9vw,13px);
}
.pst__img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;background:#d9d3c6;filter:saturate(1.03) contrast(1.02)}
.pst__title{
  font-family:"Georgia","Times New Roman",serif;font-weight:400;
  font-size:clamp(1.05rem,1.65vw,1.7rem);line-height:1.02;letter-spacing:-.01em;
  color:var(--black);margin:clamp(9px,1.15vw,15px) 0 clamp(5px,.7vw,9px);
}
.pst__sub{font-family:"Archivo",var(--sans);font-weight:500;font-size:clamp(.5rem,.72vw,.66rem);margin:0 0 clamp(5px,.6vw,8px);color:var(--black)}
.pst__date{font-family:"Georgia","Times New Roman",serif;font-size:clamp(.6rem,.88vw,.8rem);margin:0 0 clamp(7px,.95vw,12px);color:var(--black)}
.pst__foot{font-family:"Archivo",var(--sans);font-size:clamp(.32rem,.48vw,.44rem);letter-spacing:.02em;color:rgba(28,26,23,.6);margin:0}
/* 1100, not 820: the polaroids are a fixed 270px, so anything narrower than about
   a 500px column pushes them off the left edge. Below this the section stacks. */
@media (max-width:1100px){
  .spread{padding:clamp(64px,14vw,110px) 0}
  .spread__split{display:block}
  /* bottom padding keeps the last CTA clear of the collage stacked beneath it */
  .spread__flow{padding:0 var(--pad) clamp(40px,8vw,72px)}
  .spread__stick{height:auto;transform:none}
  .spread__scatter{height:auto;display:block;padding:0 var(--pad)}
  .spread__copy{position:static;width:auto;margin:0 0 clamp(30px,7vw,46px);transform:none}
  .spread__scatter .poly{position:relative;left:auto!important;top:auto!important;width:min(74%,320px)!important;transform:rotate(var(--rot,0deg));margin:0 auto clamp(20px,5vw,32px)}
  .reg,.spread__word--a{display:none}
}

.wwd{position:relative;background:var(--paper);padding:clamp(80px,12vw,170px) 0}
.wwd__inner{
  position:relative;max-width:940px;margin:0 auto;padding:0 var(--pad);
}
.wwd__eyebrow{color:var(--accent);letter-spacing:.24em;margin:0 0 clamp(16px,2vw,26px)}
.wwd__title{
  font-family:"Archivo",var(--sans);font-weight:300;color:var(--accent);
  font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 clamp(24px,3.2vw,44px);
}
.wwd__body{display:flex;flex-direction:column;gap:1.15rem;max-width:46ch}
.wwd__body p{
  font-family:var(--sans);font-weight:300;
  font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.55;color:var(--ink-soft);margin:0;
}
.wwd__body b{font-weight:700;color:var(--black)}
.wwd__media{position:relative;height:78vh}
.wwd__pile{position:absolute;inset:0}
/* scattered square polaroids — real & vibey */
.poly{
  position:absolute;margin:0;
  width:clamp(155px,19vw,244px);
  background:#fbf8f1;
  padding:9px 9px 30px;
  border-radius:2px;
  box-shadow:0 2px 4px rgba(20,21,26,.14),0 20px 38px rgba(20,21,26,.24);
  transform:translate(-50%,-50%) rotate(var(--rot,0deg)) translate3d(0,var(--dy,0),0);
  will-change:transform;
}
.poly__img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#d9d3c6;
  filter:saturate(1.04) contrast(1.02);
}
.poly--1{left:26%;top:15%;z-index:3}
.poly--2{left:63%;top:21%;z-index:6}
.poly--3{left:38%;top:42%;z-index:4}
.poly--4{left:74%;top:52%;z-index:5}
.poly--5{left:29%;top:72%;z-index:2}
.poly--6{left:64%;top:83%;z-index:1}
@media (max-width:820px){
  .wwd{height:auto}
  .wwd__inner{height:auto;grid-template-columns:1fr;gap:clamp(28px,6vw,44px);padding:clamp(70px,14vw,120px) var(--pad)}
  .wwd__media{height:auto;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:14px 0}
  .wwd__pile{position:static;display:contents}
  .poly{position:relative;left:auto!important;top:auto!important;width:100%;transform:rotate(var(--rot,0deg))}
}

/* =========================================================
   MOTION LAYER — scroll parallax, drift, marquee, progress
   ========================================================= */
.scrollprog{
  position:fixed;top:0;left:0;height:3px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  z-index:9999;pointer-events:none;
}
[data-para],[data-drift]{will-change:transform}
.gen__photo{transform:translate3d(0,var(--py,0),0)}
.cby2__head{transform:translate3d(var(--px,0),0,0)}

/* scroll-linked word highlight (reads in as you scroll) */
.hlw{will-change:opacity}
#smooth-content{backface-visibility:hidden}

/* pinned statement — line stays put + reads in word-by-word */
.stmt{position:relative;height:145vh;background:var(--paper)}
.stmt__inner{
  position:relative;
  height:100vh;overflow:hidden;will-change:transform;
}
/* full-bleed blue section — slides up over the beige, holds, then leaves */
.stmt__panel{
  position:absolute;z-index:1;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:0 clamp(30px,7vw,140px);overflow:hidden;
  background-color:var(--accent);background-image:var(--blue-grain);
  background-size:240px 240px;background-blend-mode:screen;
  will-change:transform;
}
.stmt__eyebrow{color:rgba(255,255,255,.9);letter-spacing:.24em;margin:0 0 clamp(20px,3vw,40px);position:relative;z-index:3}
.stmt__line{
  font-family:"Archivo",var(--sans);font-weight:300;
  font-size:clamp(1.2rem,2.7vw,2.5rem);line-height:1.18;letter-spacing:-.014em;
  max-width:27ch;margin:0 auto;color:#fff;position:relative;z-index:3;
}
.stmt__bold{font-weight:700}
/* photos layered over the paragraph (kept out of flow so line spacing stays even) */
.stmt__img{
  position:absolute;z-index:1;display:block;height:auto;
  object-fit:cover;filter:grayscale(1) contrast(1.02);
  box-shadow:0 26px 62px rgba(20,21,26,.24);border-radius:2px;
  will-change:transform;
}
.stmt__img--a{right:73%;top:25%;width:clamp(128px,14vw,192px);aspect-ratio:4/3;--rot:-2.5deg;transform:rotate(var(--rot)) translate3d(0,var(--mvy,0),0)}
.stmt__img--b{left:73%;top:46%;width:clamp(128px,14vw,192px);aspect-ratio:4/3;--rot:2.5deg;transform:rotate(var(--rot)) translate3d(0,var(--mvy,0),0)}
/* floating script accents around the statement */
.stmt__script{
  position:absolute;white-space:nowrap;z-index:2;
  font-family:"Breathing",var(--hand),cursive;font-weight:400;line-height:.8;
  font-size:clamp(2.5rem,6vw,5.2rem);
  will-change:transform;cursor:default;
}
.stmt__script__i{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.stmt__script--seen{color:#FFEDA8;left:clamp(16px,4vw,80px);top:19%;animation:floaty1 7.5s ease-in-out infinite}
.stmt__script--chased{color:#FFEDA8;right:clamp(16px,4vw,80px);bottom:18%;animation:floaty2 9s ease-in-out infinite}
@keyframes floaty1{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-13px)}}
@keyframes floaty2{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-7.5deg) translateY(12px)}}
@media (max-width:820px){
  .stmt__script{position:static;display:block;margin:1.2rem 0 0;animation:none;font-size:clamp(2.2rem,10vw,3.4rem);white-space:normal}
  .stmt__img{display:none}
}

/* clip-wipe reveal for images */
.clipr{transition:clip-path 1.15s cubic-bezier(.66,0,.2,1)}

/* On desktop the blue panel is an absolutely-positioned inset:0 layer that slides over the
   beige while the tall .stmt section scrolls. On mobile .stmt collapses to height:auto, so an
   inset:0 layer no longer has a height to fill — it stayed a fixed-height band with
   overflow:hidden and sliced the "Seen first / Chased second" script in half. Let it flow. */
@media (max-width:820px){
  .stmt{height:auto}
  .stmt__inner{height:auto;overflow:visible;padding:0}
  .stmt__panel{position:static;inset:auto;overflow:visible;padding:clamp(80px,18vw,140px) var(--pad)}
}

/* ---- our values (Sioda-style editorial) ---- */
.vals{
  position:relative;overflow:hidden;
  background:var(--paper);color:var(--black);
  padding:clamp(80px,11vw,170px) var(--pad) clamp(80px,10vw,150px);
}
.vals__feature{
  max-width:1280px;margin:0 auto;position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,80px);align-items:center;
}
/* figure: cutout with a vertical serpentine "our values" line running past it */
.vals__figure{position:relative;width:100%;aspect-ratio:760/1040}
.vals__swirl{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.vals__swirltxt{
  fill:var(--accent);font-family:"Archivo",var(--sans);font-weight:600;
  font-size:24px;letter-spacing:.14em;text-transform:uppercase;
}
.vals__img{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  height:82%;width:auto;z-index:2;display:block;
  filter:drop-shadow(0 24px 44px rgba(18,28,86,.18));
}
.vals__list{display:flex;flex-direction:column;gap:clamp(26px,3.2vw,48px)}
.vals__row{position:relative}
.vals__n{
  display:block;color:var(--orange);font-size:.7rem;letter-spacing:.2em;
  margin:0 0 .9em;
}
.vals__t{
  font-family:var(--serif);font-weight:400;font-style:italic;color:var(--accent);
  font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.02;letter-spacing:-.015em;
  margin:0 0 .6em;text-wrap:balance;
}
.vals__b{
  font-family:"Archivo",var(--sans);font-weight:300;
  font-size:clamp(.82rem,.95vw,.94rem);line-height:1.55;letter-spacing:.002em;
  color:var(--black);margin:0;max-width:48ch;
}
.vals__giant{
  position:relative;z-index:1;
  width:100vw;margin-left:calc(50% - 50vw);
  margin-top:clamp(-40px,-4vw,-90px);
  text-align:center;white-space:nowrap;
  font-family:var(--serif);font-style:italic;font-weight:400;
  color:var(--accent);letter-spacing:-.04em;line-height:.72;
  font-size:clamp(9rem,36vw,32rem);
  will-change:transform;
}
@media (max-width:820px){
  .vals{padding-top:clamp(64px,14vw,110px)}
  .vals__feature{display:block}
  .vals__figure{max-width:460px;margin:0 auto clamp(40px,9vw,64px)}
  .vals__swirltxt{font-size:20px}
  .vals__list{gap:clamp(28px,7vw,44px)}
  .vals__b{max-width:none}
  .vals__giant{font-size:clamp(5.5rem,30vw,10rem);margin-top:clamp(6px,2vw,18px)}
}

/* ---- marquee band (connective moving text) ---- */
.marquee{
  overflow:hidden;white-space:nowrap;background:var(--paper);
  padding:clamp(16px,2.4vw,36px) 0;
}
.marquee__track{display:inline-flex;will-change:transform;animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__inner{
  display:inline-flex;align-items:center;flex:none;
  transform:translateX(var(--mqx,0)) skewX(var(--vskew,0deg));transition:transform .3s cubic-bezier(.2,.7,.2,1);
  font-family:"Archivo",var(--sans);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.6rem,4.4vw,3.6rem);letter-spacing:-.01em;line-height:1;color:var(--black);
}
.marquee__inner>span{padding:0 clamp(14px,1.8vw,30px)}
.marquee__inner>i{color:var(--accent);font-style:normal;font-size:.6em;transform:translateY(-.05em)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .deck__card{animation:none}
  .cby2__w--you{animation:none}
  .apply__title em{animation:none}
  .scrollprog{display:none}
  [data-para],[data-drift]{--py:0 !important;--px:0 !important}
  .stmt{height:auto}
  .stmt__inner{height:auto;overflow:visible;padding:0}
  /* same reason as the max-width:820px rule — an inset:0 panel can't fill an auto-height parent */
  .stmt__panel{position:static;inset:auto;overflow:visible;padding:clamp(70px,14vw,120px) var(--pad)}
  .clipr{clip-path:none !important}
  [data-scrub]{transform:none !important;opacity:1 !important}
  .stmt__script{animation:none !important}
  .wwd{height:auto}
  .wwd__inner{height:auto;grid-template-columns:1fr;gap:clamp(28px,6vw,44px);padding:clamp(70px,14vw,120px) var(--pad);transform:none !important}
  .poly{transform:rotate(var(--rot,0deg)) !important}
}

/* ============================ APPLY FORM MODAL ============================ */
.applymodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,40px)}
.applymodal[hidden]{display:none}
.applymodal__backdrop{position:absolute;inset:0;background:rgba(18,24,54,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:amfade .3s ease}
.applymodal__card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow:auto;
  background:var(--paper);color:var(--black);border-radius:16px;padding:clamp(26px,4vw,44px);
  box-shadow:0 40px 100px rgba(18,28,86,.4);animation:amrise .35s cubic-bezier(.2,.7,.2,1)}
.applymodal__close{position:absolute;top:12px;right:14px;border:none;background:transparent;
  font-size:1.9rem;line-height:1;color:var(--ink-soft);cursor:pointer;padding:.05em .28em;border-radius:8px;transition:color .2s,background .2s}
.applymodal__close:hover{color:var(--accent);background:rgba(30,63,214,.08)}
.applymodal__eyebrow{color:var(--accent);letter-spacing:.24em;margin:0 0 .8rem;font-size:.72rem}
.applymodal__title{font-family:var(--serif);font-weight:400;color:var(--accent);font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.04;letter-spacing:-.02em;margin:0 0 .5rem}
.applymodal__sub{color:var(--ink-soft);font-size:clamp(.9rem,1.1vw,1rem);line-height:1.55;margin:0 0 1.6rem;max-width:44ch}
.applymodal__form{min-height:60px}
@keyframes amfade{from{opacity:0}to{opacity:1}}
@keyframes amrise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
/* HubSpot form fields, styled to match the brand */
.applymodal__form form{font-family:var(--sans)}
.applymodal__form .hs-form-field{margin-bottom:14px}
.applymodal__form ul{list-style:none;padding:0;margin:0}
.applymodal__form label{display:block;font-family:var(--sans);font-weight:500;font-size:.82rem;color:var(--ink);margin-bottom:6px}
.applymodal__form .hs-input{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:.95rem;
  padding:.7em .85em;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--black);appearance:none}
.applymodal__form .hs-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(30,63,214,.15)}
.applymodal__form textarea.hs-input{min-height:96px;resize:vertical}
.applymodal__form .inputs-list.multi-container{display:flex;flex-wrap:wrap;gap:8px}
.applymodal__form .hs-button{background:var(--accent);color:#fff;border:none;font-family:var(--sans);
  font-weight:500;font-size:.95rem;letter-spacing:.02em;padding:.85em 1.9em;border-radius:40px;cursor:pointer;margin-top:6px;
  box-shadow:0 12px 32px rgba(30,63,214,.26);transition:transform .25s,background .25s,box-shadow .25s}
.applymodal__form .hs-button:hover{transform:translateY(-2px);background:#173bc7;box-shadow:0 18px 40px rgba(30,63,214,.34)}
.applymodal__form .hs-error-msg,.applymodal__form .hs-error-msgs label{color:#c0392b;font-size:.78rem;font-weight:400}
.applymodal__form .hs_error_rollup{margin-top:4px}
.applymodal__form .submitted-message{font-size:1rem;color:var(--black);line-height:1.6}
/* Two-up layout, matching how the HubSpot form grouped its fields: short answers
   pair off, long ones span. Only column-gap is set — row spacing still comes from
   the existing .hs-form-field margin-bottom, so nothing above is touched. */
.applymodal__form .af-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
.applymodal__form .af-grid>.af-wide{grid-column:1 / -1}
/* Ambassadors' short form goes one field per row: its labels are long enough to
   wrap, which knocked the two columns out of alignment with each other. */
.applymodal__form .af-grid--single{grid-template-columns:1fr}
.applymodal__form .af-desc{font-family:var(--sans);font-size:.74rem;line-height:1.4;
  color:var(--muted);margin:-2px 0 6px}
/* "still sending" notice — muted, so a slow submit doesn't look like an error */
.applymodal__form .af-note{font-family:var(--sans);font-size:.78rem;line-height:1.45;
  color:var(--ink-soft);margin:4px 0 0}
@media (max-width:560px){
  .applymodal__form .af-grid{grid-template-columns:1fr}
}

/* honeypot — off-screen rather than display:none, which some bots skip */
.applymodal__form .af-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (prefers-reduced-motion:reduce){.applymodal__backdrop,.applymodal__card{animation:none}}

/* ===== WHAT WE DO · Option D — collage overhead, Represents full width ===== */
/* D — split dropped for this block: collage becomes a header strip, programmes go full width */
.spread__split{display:block!important;max-width:none;padding-inline:0}
.spread__flow{order:unset;padding:0!important}
.spread__stick{height:auto!important;transform:none!important;order:unset;margin:0 0 clamp(34px,4.5vw,66px)}
/* overflow must stay visible or the raised polaroids get clipped; the vertical
   offsets are what stop the five drop-shadows merging into one dark band */
.spread__scatter{height:auto;display:flex;justify-content:center;align-items:center;gap:0;
  flex-wrap:nowrap;overflow:visible;
  padding:clamp(30px,3.8vw,58px) clamp(12px,2vw,32px) clamp(38px,4.4vw,66px)}
.spread__scatter .poly{position:relative!important;left:auto!important;top:auto!important;
  width:clamp(150px,17vw,250px)!important;flex:0 0 auto;
  margin:0 clamp(-20px,-1.6vw,-7px);
  box-shadow:0 2px 4px rgba(20,21,26,.10),0 14px 30px rgba(20,21,26,.16);
  transform:rotate(var(--rot,0deg)) translateY(var(--ty,0)) translateY(var(--dy,0))}
.wwrap{max-width:1120px;margin:0 auto;padding-inline:clamp(18px,4vw,48px)}

.wpair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px);
  align-items:start;margin:0 0 clamp(28px,3.6vw,50px)}
.wpair .peer{max-width:none;margin:0;padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,32px);
  background:rgba(255,255,255,.5);border:1px solid rgba(20,21,26,.12);border-radius:18px;
  backdrop-filter:blur(2px);display:flex;flex-direction:column;height:100%}
.wpair .way__name{font-size:clamp(1.3rem,1.9vw,1.75rem);margin-bottom:.55rem}
.wpair .way__for{margin-bottom:clamp(14px,1.8vw,22px)}
.wpair .way__body{font-size:clamp(.9rem,1vw,1rem);line-height:1.68;max-width:none;
  margin-bottom:clamp(20px,2.4vw,30px);flex:1}

/* .way caps at 62ch and auto-centres — clear both so Represents spans the exact
   width of the two boxes above it */
.wflag{max-width:none;width:100%;margin:0;
  position:relative;overflow:hidden;border-radius:22px;color:#EFE6D8;
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(24px,3.4vw,54px);align-items:center;text-align:left;
  padding:clamp(32px,4vw,56px) clamp(26px,3.2vw,48px);
  /* same treatment as the "Seen first. / Chased second." panel (.stmt__panel):
     flat accent with the blue grain blended over it, not a gradient */
  background-color:var(--accent);background-image:var(--blue-grain);
  background-size:240px 240px;background-blend-mode:screen;
  box-shadow:0 44px 96px -34px rgba(18,36,111,.6)}
.wflag>*{position:relative;z-index:1}
.wflag .flag__badge{font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(239,230,216,.7);margin:0 0 clamp(10px,1.2vw,16px)}
.wflag .way__name{color:#fff;font-size:clamp(1.9rem,3.2vw,2.9rem);margin:0 0 .5rem;text-align:left}
.wflag .way__for{color:#cdd6ff;text-align:left;margin:0 0 clamp(14px,1.8vw,22px)}
.wflag .way__body{color:rgba(239,230,216,.9);max-width:none;margin:0;text-align:left}
.wflag__aside{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.8vw,22px)}
.wflag__aside .way__cta{background:#EFE6D8;color:#12246f;margin-inline:0}
.wflag__aside .way__cta:hover{background:#fff;box-shadow:0 16px 38px rgba(0,0,0,.28)}
.wflag__note{font-family:var(--serif);font-style:italic;color:rgba(239,230,216,.66);
  font-size:clamp(.9rem,1.1vw,1.02rem);line-height:1.5;margin:0}
@media (max-width:900px){
  .wpair{grid-template-columns:1fr}
  .wflag{grid-template-columns:1fr}
  .spread__scatter{flex-wrap:wrap;justify-content:center}
  .spread__scatter .poly{width:clamp(112px,30vw,160px)!important}
}
/* ===== end Option D ===== */