/* ============================================================
   Integrated Biosciences — replica
   Tokens ▸ Base ▸ Components ▸ Header ▸ Hero ▸ Blocks ▸ Footer
   ============================================================ */

:root{
  --c-dark:  #000a45;
  --c-deep:  #0016a9;
  --c-mint:  #b1dfff;
  --c-azure: #0099ff;
  --c-sage:  #cacaca;
  --c-bone:  #e8eaf0;
  --c-off:   #f6f6f6;
  --c-grey:  #ececec;
  --c-white: #ffffff;
  --c-page:  #e3e5ea;
  --c-cream: #f7f2e9;

  --font-sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero: clamp(3rem, .6rem + 9.4vw, 9.5rem);
  --t-h2:   clamp(2rem, .95rem + 4.3vw, 5.4rem);
  --t-h3:   clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem);
  --t-lead: clamp(1.05rem, .95rem + .55vw, 1.45rem);
  --t-body: clamp(.95rem, .92rem + .22vw, 1.08rem);
  --t-mono: clamp(.66rem, .63rem + .13vw, .8rem);

  --gutter: clamp(1.1rem, .3rem + 3.4vw, 4rem);
  --maxw:   1680px;
  --pad:    clamp(4.5rem, 2rem + 8.5vw, 11rem);
  --rad:    clamp(1rem, .5rem + 1.3vw, 1.75rem);
  --frame:  clamp(.4rem, .2rem + .6vw, .75rem);

  --ease:   cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.is-loading{ overflow:hidden; }
body{
  background:var(--c-page); color:var(--c-dark);
  font-family:var(--font-sans); font-size:var(--t-body);
  line-height:1.55; letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding:var(--frame);
}
img,svg,canvas{ display:block; max-width:100%; }
/* <picture> only picks the format; the <img> inside lays out as if unwrapped */
picture{ display:contents; }
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ list-style:none; padding:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
::selection{ background:var(--c-mint); color:var(--c-dark); }

/* ── utilities ───────────────────────────────────────────── */
.u-container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.u-mono{
  font-family:var(--font-mono); font-size:var(--t-mono);
  text-transform:uppercase; letter-spacing:.13em; font-weight:400;
}

/* tag pill with mint square */
.u-tag{
  display:inline-flex; align-items:center; gap:.75em;
  padding:.6em 1.1em; border-radius:100px;
  background:var(--c-white); color:var(--c-dark);
  font-family:var(--font-mono); font-size:var(--t-mono);
  text-transform:uppercase; letter-spacing:.13em; line-height:1; white-space:nowrap;
}
.u-tag i{ width:.72em; height:.72em; background:var(--c-azure); border-radius:2px; flex:none; }
.u-tag.-dark{ background:var(--c-dark); color:var(--c-off); }
.u-tag.-sm{ padding:.5em .85em; }

/* two-part CTA: dark label pill + mint arrow key */
.u-cta{
  display:inline-flex; align-items:stretch; gap:.3rem;
  font-family:var(--font-mono); font-size:var(--t-mono);
  text-transform:uppercase; letter-spacing:.13em; line-height:1;
}
.cta_pill{
  display:flex; align-items:center; padding:1.25em 1.9em;
  border-radius:100px; background:var(--c-dark); color:var(--c-off);
  transition:background-color .45s var(--ease), color .45s var(--ease);
}
.cta_arrow{
  display:grid; place-items:center; flex:none;
  width:3.35em; border-radius:12px 22px 22px 12px;
  background:var(--c-mint); color:var(--c-dark);
  font-family:var(--font-sans); font-size:1.05em;
  transition:background-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.u-cta:hover .cta_pill{ background:var(--c-mint); color:var(--c-dark); }
.u-cta:hover .cta_arrow{ background:var(--c-dark); color:var(--c-mint); transform:translateX(2px); }
.u-cta.-light .cta_pill{ background:var(--c-dark); color:var(--c-off); }

/* hover label swap — inner span travels, ::after slides in behind it */
.btn_label{ position:relative; display:block; overflow:hidden; }
.btn_label::after{
  content:attr(data-label); position:absolute; inset:0;
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.label_inner{ display:block; transition:transform .45s var(--ease); }
a:hover .label_inner,button:hover .label_inner{ transform:translateY(-110%); }
a:hover .btn_label::after,button:hover .btn_label::after{ transform:translateY(0); }

/* ── scroll-in primitives ────────────────────────────────── */
[data-inview]{
  opacity:0; transform:translateY(1.75rem);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-inview].is-inview{ opacity:1; transform:none; }

/* word-by-word fill driven by scroll position */
/* words arrive out of focus: faint, blurred and a touch low, then sharpen and
   settle as the scroll lights them one after another */
.fw{
  display:inline-block;
  opacity:.1; filter:blur(12px); transform:translateY(10px);
  transition:opacity .5s var(--ease), filter .5s var(--ease),
             transform .5s var(--ease), color .5s var(--ease);
}
.fw.is-lit{ opacity:1; filter:blur(0); transform:none; }

.split_word{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.split_word > span{
  display:inline-block; transform:translateY(105%);
  transition:transform 1.1s var(--ease); transition-delay:var(--d,0ms);
}
.is-revealed .split_word > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .fw{ opacity:1 !important; filter:none !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-inview]{ opacity:1; transform:none; }
  .split_word > span{ transform:none; }
}

/* ── organic moving background ───────────────────────────── */
.hero_bg{ position:absolute; inset:0; overflow:hidden; z-index:0; will-change:transform; }
.hero_still{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.hero_video{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* visible from the start: the still behind it covers any gap, so the hero
     never waits on JS, autoplay permission or a decoded frame */
  opacity:1; transition:opacity 1.4s var(--ease);
}
/* readability where the text sits, plus a soft close into the next section */
.hero_veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(105deg, rgba(0,10,69,.52) 0%, rgba(0,10,69,.12) 42%, rgba(0,10,69,0) 68%),
    linear-gradient(180deg, rgba(0,10,69,.34) 0%, rgba(0,10,69,0) 22%,
                            rgba(0,10,69,.34) 54%, rgba(0,10,69,.90) 100%);
}
/* animated film grain — oversized and nudged each step so it never sits still */
.hero_grain{
  position:absolute; inset:-60%; z-index:3; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainDrift 1.1s steps(6) infinite;
}
@keyframes grainDrift{
  0%{transform:translate(0,0)}      16%{transform:translate(-1.5%,-2%)}
  33%{transform:translate(2%,-1%)}  50%{transform:translate(-1%,2%)}
  66%{transform:translate(1.5%,1%)} 83%{transform:translate(-2%,-1.5%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion:reduce){ .hero_grain{ animation:none; } }

/* ── intro ───────────────────────────────────────────────── */
/* The mark is built from bricks that carry crops of event photography, so it
   assembles as one image per letter rather than as abstract squares. The
   backdrop is the same navy as the hero, which is what lets the hand-off
   happen with no flash — the ground never changes colour, only what sits on it. */
.c-loader{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:var(--c-dark);
  transition:background-color .8s var(--ease);
}
.c-loader.is-clearing{ background-color:rgba(0,10,69,0); pointer-events:none; }
.c-loader.is-done{ opacity:0; visibility:hidden; transition:opacity .32s linear, visibility .32s; }

.loader_mark{
  --tile:clamp(11px, 2.05vw, 24px);
  --gap:2px;
  position:relative;
  width:calc(var(--cols) * var(--tile));
  height:calc(var(--rows) * var(--tile));
  transform-origin:50% 50%;
  will-change:transform;
}
.brick{
  position:absolute;
  left:calc(var(--c) * var(--tile));
  top:calc(var(--r) * var(--tile));
  width:calc(var(--tile) - var(--gap));
  height:calc(var(--tile) - var(--gap));
  /* one photograph stretched across each letter, addressed per brick */
  background-image:var(--img);
  background-size:calc(var(--gw) * 100%) calc(var(--gh) * 100%);
  background-position:var(--px) var(--py);
  /* screened over a brand tint: the dark parts of a photograph would otherwise
     disappear into the navy, and half the mark with them */
  background-color:rgba(120,170,255,.34);
  background-blend-mode:screen;
  filter:contrast(1.04) saturate(1.02);
  opacity:0;
  transform:translate3d(0,14px,0) scale(.7);
  will-change:transform, opacity;
}
.brick.-a{ --img:url("assets/partners/partner-3.jpg"); }
.brick.-i{ --img:url("assets/partners/partner-5.jpg"); }
.brick.-p{ --img:url("assets/partners/partner-6.jpg"); }

/* the build: each brick lands with a touch of overshoot */
.is-building .brick{
  animation:brickIn .52s cubic-bezier(.34,1.42,.56,1) both;
  animation-delay:calc(var(--k) * 8ms);
}
@keyframes brickIn{
  from{ opacity:0; transform:translate3d(0,14px,0) scale(.7); }
  to  { opacity:1; transform:translate3d(0,0,0) scale(1); }
}

@media (prefers-reduced-motion:reduce){
  .is-building .brick{ animation:none; opacity:1; transform:none; }
  .c-loader{ transition:background-color .3s linear; }
}

/* ── header ──────────────────────────────────────────────── */
.c-header{
  position:fixed; z-index:100;
  top:1.5rem; left:1.5rem; right:1.5rem;
  width:auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:transform .6s var(--ease);
}
.c-header.is-hidden{ transform:translateY(calc(-100% - var(--frame) - 2rem)); }

.header_logo{
  transition:opacity .45s var(--ease);
  display:inline-flex; align-items:center;
  padding:.65rem 1.25rem; border-radius:100px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  color:var(--c-dark); transition:background-color .4s var(--ease);
}
.logo_img{ width:auto; height:1.55rem; display:block; }
/* the mark ships black on transparent; invert it for dark grounds */
.logo_img.-invert{ filter:invert(1) brightness(2); height:1.9rem; }

.header_nav{
  display:flex; align-items:center; gap:.3rem;
  padding:.3rem; border-radius:100px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
}
.nav_links{ display:flex; }
.nav_links a{
  display:block; padding:.95rem 1.35rem; border-radius:100px;
  font-family:var(--font-mono); font-size:var(--t-mono);
  text-transform:uppercase; letter-spacing:.13em;
  transition:background-color .4s var(--ease);
}
.nav_links a:hover{ background:rgba(0,8,60,.07); }
.nav_cta{
  padding:.95rem 1.5rem; border-radius:100px;
  background:var(--c-dark); color:var(--c-off);
  font-family:var(--font-mono); font-size:var(--t-mono);
  text-transform:uppercase; letter-spacing:.13em;
  transition:background-color .4s var(--ease), color .4s var(--ease);
}
.nav_cta:hover{ background:var(--c-mint); color:var(--c-dark); }

.menu_btn{
  display:none; width:3.1rem; height:3.1rem; border-radius:100px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  align-items:center; justify-content:center;
}
.btn_ico{ display:grid; gap:5px; width:20px; }
.btn_ico i{ display:block; height:1.5px; background:currentColor; transition:transform .45s var(--ease); }
.is-menu-open .btn_ico i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.is-menu-open .btn_ico i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.header_popup{
  position:fixed; inset:0; z-index:-1; color:var(--c-off);
  display:flex; align-items:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.is-menu-open .header_popup{ opacity:1; visibility:visible; }
.popup_bg{
  position:absolute; inset:0; z-index:-1; background:var(--c-dark);
  border-radius:var(--rad); clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease);
}
.is-menu-open .popup_bg{ clip-path:inset(0 0 0 0); }
.popup_inner{ width:100%; display:grid; gap:clamp(2rem,1rem+4vw,4rem); justify-items:start; }
.popup_menu li{ overflow:hidden; }
.popup_menu a{ display:block; font-size:clamp(2rem,1rem+5.5vw,4.5rem); font-weight:400; letter-spacing:-.035em; }
.popup_menu span{ display:block; transform:translateY(105%); transition:transform .7s var(--ease); }
.is-menu-open .popup_menu span{ transform:none; }
.popup_menu li:nth-child(2) span{ transition-delay:.06s; }
.popup_menu li:nth-child(3) span{ transition-delay:.12s; }
.popup_inner .cta_pill{ background:var(--c-off); color:var(--c-dark); }

/* ── hero ────────────────────────────────────────────────── */
.c-hero{ height:360vh; position:relative; }
.hero_sticky{
  /* body carries `padding: var(--frame)` for the rounded page frame, so the
     pin offset has to match it or the gap collapses while the hero is stuck */
  position:sticky; top:.75rem; height:calc(100svh - 1.5rem);
  transform-origin:50% 42%; will-change:transform, filter;
  border-radius:calc(1.5rem + var(--recede,0) * 1.25rem);
  overflow:hidden; color:var(--c-off);
  background:
    radial-gradient(120% 90% at 68% 36%, #14259e 0%, rgba(6,14,102,0) 60%),
    radial-gradient(95% 85% at 16% 92%, #0a1478 0%, rgba(3,8,60,0) 62%),
    linear-gradient(160deg, #01073c 0%, #060e66 50%, #000530 100%);
}

/* state A — headline */
.hero_intro{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:9.5rem 4rem 3rem;      /* top clears the floating nav */
  max-width:var(--maxw); margin-inline:auto;
}
.hero_heading{
  font-size:7.25rem; font-weight:400; line-height:.95; letter-spacing:-.04em;
  max-width:72%;
}
.hero_foot{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:clamp(1.5rem,1rem+2vw,3rem);
}
.hero_sub{
  color:rgba(226,234,252,.72);
  font-size:1.35rem; max-width:36ch; line-height:1.35; letter-spacing:-.018em;
  opacity:0; transform:translateY(1.5rem);
  transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s;
}
.hero_foot .u-cta{
  opacity:0; transform:translateY(1.5rem);
  transition:opacity 1s var(--ease) .65s, transform 1s var(--ease) .65s;
}
.is-ready .hero_sub,.is-ready .hero_foot .u-cta{ opacity:1; transform:none; }

/* state B — scroll carousel, anchored to the foot of the frame */
.hero_scroller{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:7rem 0 3.25rem;
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
}
.hero_scroller.is-on{ opacity:1; pointer-events:auto; }
.scroller_top{ max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:4rem; }

.scroller_stage{
  position:relative;
  max-width:var(--maxw); width:100%; margin-inline:auto; padding-inline:4rem;
}
.scroller_body{ position:relative; z-index:1; max-width:62%; }
.scroller_eyebrow{
  display:block; margin-bottom:1.5rem;
  color:var(--c-mint); letter-spacing:.2em;
}
.scroller_items{ position:relative; }
.scroller_item{
  font-size:3rem; font-weight:400; line-height:1.18; letter-spacing:-.03em;
}
.scroller_item:not(.is-active){ position:absolute; inset:0; opacity:0; pointer-events:none; }
/* unlit words stay legible — they read as recessed, not hidden */
.scroller_item .fw{ color:rgba(244,246,250,.46); }
.scroller_item .fw.is-lit{ color:var(--c-off); }

.scroller_meter{
  margin-top:2.75rem;
  display:flex; align-items:center; gap:1.5rem;
}
.meter_track{
  position:relative; width:clamp(7rem,14vw,13rem); height:2px;
  background:rgba(244,246,250,.22); border-radius:2px; overflow:hidden;
}
.meter_bar{
  position:absolute; left:0; top:0; height:100%; width:0;
  background:var(--c-mint); border-radius:2px;
  transition:width .12s linear;
}
.meter_label{ color:rgba(244,246,250,.58); }

/* oversized index numeral, sunk into the background */
.scroller_numeral{
  position:absolute; right:4rem; bottom:-2.5rem; z-index:0;
  font-size:clamp(8rem,17vw,15rem); font-weight:500; line-height:.8;
  letter-spacing:-.05em; color:rgba(244,246,250,.07);
  pointer-events:none; user-select:none;
}


/* ── editorial: type in the middle, work scattered around it ─ */
/* The scattered pieces drift at their own rates as the section passes, so the
   headline sits still while the work moves around it. */
.c-editorial{
  position:relative;
  /* the corners tuck under the hero's rounded card so the seam is a curve,
     not a corner */
  --r-top:clamp(1rem,.6rem + 1vw,1.6rem);
  border-radius:calc(var(--r-top) + var(--recede,0) * 1.1rem)
                calc(var(--r-top) + var(--recede,0) * 1.1rem) 0 0;
  margin-top:calc(var(--r-top) * -1);
  transform-origin:50% 42%; will-change:transform, filter;
  /* it reads as arriving over the hero, so it casts back onto it */
  box-shadow:0 -34px 70px -30px rgba(0,4,30,.55);
  background:var(--c-off); color:var(--c-dark);
  padding-block:clamp(5rem,3rem + 7vw,10rem);
}
.ed_frame{ position:relative; min-height:clamp(34rem,80vh,52rem); display:grid; }
.ed_corner{
  position:absolute; top:0; color:rgba(0,8,60,.4); z-index:3;
}
.ed_corner.-tr{ text-align:right; }
.ed_corner.-tl{ left:var(--gutter); }
.ed_corner.-tr{ right:var(--gutter); }

/* the centre column */
.ed_center{
  position:relative; z-index:2;
  place-self:center; width:min(46rem,60%);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.5rem;
}
.ed_title{
  font-size:clamp(2rem,.9rem + 3.1vw,4.1rem);
  font-weight:400; line-height:1.04; letter-spacing:-.038em;
  text-wrap:balance;
}
.ed_title .fw{ color:#c3c8d6; }
.ed_title .fw.is-lit{ color:var(--c-dark); }
.ed_line{
  width:clamp(10rem,22vw,20rem); height:auto; margin-top:-.35rem;
  overflow:visible;
}
.ed_line path{
  stroke-dasharray:var(--len,700); stroke-dashoffset:var(--len,700);
}
.ed_text{
  max-width:52ch; color:rgba(0,8,60,.7); line-height:1.6;
}

/* the centre column arrives a piece at a time as the section is read */
[data-reveal]{
  opacity:0; transform:translateY(1.4rem); filter:blur(10px);
  will-change:transform, opacity, filter;
}

/* the turning badge */
.ed_badge{
  position:absolute; right:calc(var(--gutter) + 1vw); bottom:0; z-index:3;
  width:clamp(5.5rem,8vw,7.5rem); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%; background:var(--c-white);
  box-shadow:0 2px 6px rgba(0,8,60,.08), 0 24px 40px -26px rgba(0,8,60,.5);
}
.ed_badge svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:badgeSpin 22s linear infinite;
}
.ed_badge text{
  fill:var(--c-dark); font-family:var(--font-mono); font-size:8px;
  letter-spacing:.16em; text-transform:uppercase;
}
.ed_badge_dot{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:38%; aspect-ratio:1; border-radius:50%;
  background:var(--c-dark); color:var(--c-off); font-size:.85rem;
  transition:transform .5s var(--ease);
}
.ed_badge:hover .ed_badge_dot{ transform:scale(1.12); }
@keyframes badgeSpin{ to{ transform:rotate(360deg); } }

@media (max-width:900px){
  .ed_center{ width:100%; }
  .ed_badge{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .ed_badge svg{ animation:none; }
  .ed_line path{ stroke-dashoffset:0; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* ── story: the intro, then files fanning out of a drawer ── */
.c-story{
  background:var(--c-cream); color:var(--c-dark);
  padding-block:var(--pad); overflow:clip;
}
.story_intro{ padding-bottom:clamp(3rem,2rem + 4vw,6rem); }
.story_title{
  font-size:clamp(2.4rem,1rem + 5.4vw,7rem);
  font-weight:400; line-height:.98; letter-spacing:-.045em;
  max-width:16ch;
}
.story_title .fw{ color:#cfcabf; }
.story_title .fw.is-lit{ color:var(--c-dark); }

/* label on the left, the statement carrying the column on the right */
.story_about{
  margin-top:clamp(3rem,2rem + 4vw,6rem);
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1.58fr);
  gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:start;
}
.story_kicker{ color:rgba(0,8,60,.45); padding-top:.55rem; }
.story_lead{ max-width:52rem; }
.story_statement{
  font-size:clamp(1.35rem,1rem + 1.5vw,2.35rem);
  font-weight:400; line-height:1.28; letter-spacing:-.028em;
}
.story_sub{
  margin-top:clamp(1.25rem,1rem + 1vw,2rem);
  max-width:46ch; color:rgba(0,8,60,.6); line-height:1.6;
}
.story_lead .u-cta{ margin-top:clamp(1.75rem,1rem + 2vw,2.75rem); }

/* Files hang from one line, each tab stepped to the right like folders in a
   drawer. They all rest at the same height, so a file rising covers the panel
   below it while every tab before it stays on show. */
.files{
  --tab-h:clamp(3.3rem,2.5rem + 2vw,4.6rem);
  --tab-w:clamp(12rem,19vw,19.5rem);
  --tab-cut:clamp(1.1rem,1.7vw,2rem);
}
.file{
  position:sticky;
  top:clamp(5rem,4rem + 3vw,7.5rem);   /* every tab rests on one line */
  padding-top:var(--tab-h);
  margin-bottom:clamp(1.5rem,3vh,3rem);
}
.file_tab{
  position:absolute; top:0;
  left:calc(var(--i) * (var(--tab-w) + .3rem));
  width:var(--tab-w); height:calc(var(--tab-h) + 1.2rem);
  display:flex; align-items:center; gap:.75rem;
  padding-inline:clamp(.9rem,1.4vw,1.4rem);
  border-radius:.8rem .4rem 0 0;
  /* the angled shoulder that makes it read as a folder tab */
  clip-path:polygon(0 0, calc(100% - var(--tab-cut)) 0, 100% 100%, 0 100%);
}
.file_no{ opacity:.6; font-size:.72rem; }
.file_name{
  font-size:clamp(1rem,.85rem + .62vw,1.4rem);
  font-weight:500; letter-spacing:-.022em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.file_panel{
  position:relative;
  min-height:clamp(18rem,48vh,27rem);
  border-radius:0 clamp(1rem,.6rem + 1vw,1.5rem) clamp(1rem,.6rem + 1vw,1.5rem) clamp(1rem,.6rem + 1vw,1.5rem);
  box-shadow:0 -16px 36px -28px rgba(0,4,30,.65);
}
.file.-deep  .file_tab,.file.-deep  .file_panel{ background:var(--c-deep);  color:var(--c-off); }
.file.-azure .file_tab,.file.-azure .file_panel{ background:var(--c-azure); color:var(--c-dark); }
.file.-dark  .file_tab,.file.-dark  .file_panel{ background:var(--c-dark);  color:var(--c-off); }

/* the contents, which open as the file settles into place */
.file_body{
  padding:clamp(1.75rem,1.2rem + 2vw,3.25rem) clamp(1.25rem,.8rem + 1.6vw,2.75rem)
          clamp(2rem,1.5rem + 2vw,3.5rem);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(1.5rem,1rem + 2.5vw,4rem); align-items:center;
  opacity:var(--open,0); transform:translateY(calc((1 - var(--open,0)) * 18px));
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.file_media{
  margin:0; border-radius:clamp(.6rem,.4rem + .6vw,1rem); overflow:hidden;
  aspect-ratio:16/10; background:rgba(255,255,255,.08);
}
.file_media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.03) translateY(calc((1 - var(--open,0)) * 10px));
  transition:transform .7s var(--ease);
}
.file_text{
  font-size:clamp(1.15rem,.95rem + 1.4vw,2.1rem);
  line-height:1.32; letter-spacing:-.025em; max-width:26ch;
}

@media (max-width:900px){
  .story_about{ grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .files{ --tab-w:clamp(8rem,31vw,12rem); }
  .file_panel{ min-height:15rem; }
  .file_body{ grid-template-columns:minmax(0,1fr); }
  .file_media{ aspect-ratio:16/9; }
}
@media (prefers-reduced-motion:reduce){
  .file{ position:relative; top:auto; }
  .file_body{ opacity:1; transform:none; }
}

/* ── numbers: slabs stacking over a held photograph ──────── */
/* The photograph behind is fixed for the length of the pin and cross-fades
   between frames; each slab rises from below, covers the one before it, and
   the covered slab tilts back a degree or two so the stack reads as physical. */
.c-stats{
  --plate:clamp(.9rem,.4rem + 1.5vw,2.25rem);   /* the white margin around the frame */
  --r-top:clamp(1rem,.6rem + 1vw,1.6rem);
  background:var(--c-white);
  height:400vh; position:relative;
  border-radius:var(--r-top) var(--r-top) 0 0;
  margin-top:calc(var(--r-top) * -1);
  box-shadow:0 -34px 70px -30px rgba(0,4,30,.4);
}
.stats_sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:var(--plate);
  background:var(--c-white);
}

/* the photograph is held for the whole pin — it never moves and never swaps.
   It sits as a plate inset from the edges, so white frames it on all sides. */
.stats_bed{
  position:absolute; inset:var(--plate); z-index:0;
  border-radius:clamp(1rem,.5rem + 1.2vw,2rem);
  overflow:hidden;
}
.bed_img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* only enough veil to keep white type safe; the frame stays legible */
.bed_veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,10,69,.34) 0%, rgba(0,10,69,.12) 45%, rgba(0,10,69,.4) 100%);
}

/* the stack */
/* the stack is inset from the frame, so the photograph reads all the way
   round it rather than being covered */
.stats_stack{
  position:relative; z-index:1; perspective:1800px; perspective-origin:50% 40%;
  width:min(58rem, calc(100% - 2 * var(--plate) - 3 * var(--gutter)));
  height:clamp(20rem,54svh,32rem);
  margin-bottom:0;
}
.slab{
  position:absolute; inset:0; overflow:hidden;
  border-radius:clamp(1.5rem,.9rem + 1.6vw,2.75rem);
  display:grid; place-items:center;
  padding:clamp(1.5rem,1rem + 2vw,3rem);
  transform-origin:50% 100%;
  will-change:transform;
  z-index:calc(var(--i) + 1);
  isolation:isolate;
  /* Glass, not paint: the tint is thin, the blur does the work, and the light
     is carried by edges rather than by a fill. */
  backdrop-filter:blur(34px) saturate(1.9) brightness(1.06);
  -webkit-backdrop-filter:blur(34px) saturate(1.9) brightness(1.06);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:
    /* the lit top edge and the light pooling just inside it */
    inset 0 1.5px 1px rgba(255,255,255,.85),
    inset 0 -1.5px 1px rgba(255,255,255,.32),
    inset 0 22px 40px -30px rgba(255,255,255,.9),
    /* colour refracting at opposite corners, the way a thick edge splits light */
    inset 14px 14px 40px -30px var(--edge-a,rgba(0,153,255,.9)),
    inset -14px -14px 40px -30px var(--edge-b,rgba(177,223,255,.9)),
    /* the body it casts */
    0 2px 10px rgba(0,8,60,.12),
    0 44px 80px -44px rgba(0,4,30,.75);
}
/* a slow specular sweep — the "fluid" part, drifting rather than pulsing */
.slab::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 18%, rgba(255,255,255,.42) 34%,
    rgba(255,255,255,0) 52%, rgba(255,255,255,.16) 68%, rgba(255,255,255,0) 84%);
  background-size:260% 100%;
  mix-blend-mode:soft-light;
  animation:slabSheen 19s linear infinite;
}
/* a thin bright rim, brightest where the light lands */
.slab::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(120% 80% at 22% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%);
  mix-blend-mode:screen; opacity:.6;
}
@keyframes slabSheen{
  from{ background-position:120% 0; }
  to  { background-position:-140% 0; }
}
.slab_mark,.slab_body{ position:relative; z-index:1; }

/* the tints stay as they were, thinned so the photograph reads through */
.slab.-mint{
  background:rgba(177,223,255,.3); color:var(--c-dark);
  --edge-a:rgba(0,153,255,.95); --edge-b:rgba(255,255,255,.9);
}
.slab.-bone{
  background:rgba(232,234,240,.32); color:var(--c-deep);
  --edge-a:rgba(0,22,169,.55); --edge-b:rgba(177,223,255,.9);
}
.slab.-sky{
  background:rgba(231,242,255,.3); color:var(--c-dark);
  --edge-a:rgba(0,153,255,.8); --edge-b:rgba(255,255,255,.95);
}
.slab.-deep{
  background:rgba(0,22,169,.4); color:var(--c-white);
  --edge-a:rgba(0,153,255,1); --edge-b:rgba(177,223,255,.75);
  border-color:rgba(255,255,255,.28);
}
/* no blur support: lean on the tint alone so nothing turns unreadable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .slab.-mint{ background:rgba(177,223,255,.93); }
  .slab.-bone{ background:rgba(232,234,240,.93); }
  .slab.-sky{  background:rgba(231,242,255,.93); }
  .slab.-deep{ background:rgba(0,22,169,.9); }
  .slab::before{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .slab::before{ animation:none; }
}

/* the oversized mark behind the type */
.slab_mark{
  position:absolute; right:-7%; top:50%; translate:0 -50%;
  width:min(42%, 20rem); height:auto;
  opacity:.13; pointer-events:none;
}
.slab.-deep .slab_mark{ filter:invert(1) brightness(2); opacity:.2; }

.slab_body{
  position:relative; z-index:1; text-align:center;
  transition:opacity .25s linear;
  max-width:min(52rem, 100%); margin-inline:auto;
}
.slab_label{ opacity:.6; }
.slab_text{
  margin-top:clamp(1rem,.6rem + 1vw,1.75rem);
  max-width:38ch;
  font-size:clamp(.95rem,.9rem + .35vw,1.2rem);
  line-height:1.5; opacity:.72; max-width:36ch; margin-inline:auto;
}
.slab_title{
  margin-top:clamp(.85rem,.5rem + 1vw,1.6rem);
  font-size:clamp(1.8rem,.9rem + 3.1vw,3.9rem);
  font-weight:500; line-height:1.02; letter-spacing:-.042em;
  text-wrap:balance;
}


@media (max-width:760px){
  .slab_mark{ right:-14%; width:60%; }
  .stats_stack{ height:clamp(24rem,70svh,34rem); }
}
@media (prefers-reduced-motion:reduce){
  /* no pin: the slabs simply follow one another */
  .c-stats{ height:auto; }
  .stats_sticky{ position:static; height:auto; padding:var(--pad) var(--gutter); gap:1rem; }
  .stats_stack{ height:auto; display:grid; gap:1rem; width:100%; }
  .slab{ position:relative; inset:auto; transform:none !important; min-height:18rem; }
  .bed_img{ opacity:0 !important; }
  .bed_img:first-of-type{ opacity:1 !important; }
}

/* ── marquee ─────────────────────────────────────────────── */
.c-marquee{ background:var(--c-off); padding-block:clamp(3.5rem,2rem + 4vw,6.5rem); overflow:hidden; }
.marquee_track{ display:flex; width:max-content; will-change:transform; }
.marquee_set{
  display:flex; align-items:center;
  gap:clamp(1.25rem,.8rem + 1.6vw,2.5rem);
  padding-right:clamp(1.25rem,.8rem + 1.6vw,2.5rem);
}
.marquee_set > span{
  font-size:clamp(2rem,1.1rem + 3.1vw,4.25rem); font-weight:400;
  letter-spacing:-.04em; line-height:1.12; white-space:nowrap;
}
.mq_dash{ opacity:.55; }

/* ── shared accent (highlight word + hand-drawn swoosh) ──── */
.accent{ position:relative; display:inline-block; white-space:nowrap; }
.swoosh{
  position:absolute; left:0; right:0; bottom:-.34em;
  width:100%; height:.42em; overflow:visible;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:340; stroke-dashoffset:340;
  transition:stroke-dashoffset 1.1s var(--ease) .35s;
}
.is-inview .swoosh,[data-inview].is-inview .swoosh{ stroke-dashoffset:0; }

/* ── partners ────────────────────────────────────────────── */
/* The message holds the left; the companies ride four arcs whose centre sits
   off-canvas to the right, so only the near edge of each orbit is on screen
   and new logos keep swinging into view. */
.c-partners{
  background:var(--c-white); color:var(--c-dark);
  height:340vh; position:relative;
}
.partners_sticky{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden;
  background:var(--c-white);
}
.partners_inner{
  position:relative;
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center; gap:clamp(2rem,1rem + 3vw,5rem);
  height:clamp(32rem,84svh,54rem);
}

.partners_copy{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  gap:1.5rem;
}
.partners_title{
  font-size:clamp(2rem,1.1rem + 2.8vw,4rem);
  font-weight:400; line-height:1.08; letter-spacing:-.035em;
  max-width:13ch;
}
.partners_title .accent{ color:var(--c-deep); }
.partners_text{ max-width:34ch; color:rgba(0,8,60,.66); line-height:1.6; }
.partners_meta{ margin-top:auto; color:rgba(0,8,60,.38); }

/* the stage the orbits are drawn in */
.partners_stage{ position:relative; height:100%; }
.partners_orbits{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
.partners_orbits circle{ fill:none; stroke:rgba(0,8,60,.11); stroke-width:1; }
.pring{ position:absolute; inset:0; }

.pcard{
  position:absolute; left:0; top:0;
  width:clamp(4.6rem,5.6vw,6.2rem);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  will-change:transform, opacity;
}
.pcard_logo{
  width:100%; aspect-ratio:1;
  display:grid; place-items:center; padding:.85rem;
  border-radius:1.1rem; background:var(--c-white);
  box-shadow:0 1px 2px rgba(0,8,60,.06), 0 12px 26px -16px rgba(0,8,60,.45);
}
.pcard_logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
}
.pcard_name{
  font-size:.7rem; font-weight:500; letter-spacing:-.005em; text-align:center;
  color:rgba(0,8,60,.72); white-space:nowrap;
  padding:.15em .4em; border-radius:.3rem; background:var(--c-white);
}

@media (max-width:1200px){
  /* no pin below desktop — the companies simply list out under the message */
  .c-partners{ height:auto; }
  .partners_sticky{ position:static; height:auto; padding-block:var(--pad); }
  .partners_inner{ grid-template-columns:minmax(0,1fr); height:auto; gap:3.5rem; }
  .partners_orbits{ display:none; }
  .partners_meta{ margin-top:.5rem; }
  .partners_stage{ height:auto; }
  .pring{
    position:static; display:grid;
    grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));
    gap:1.75rem 1rem;
  }
  .pcard{
    position:static; width:auto;
    transform:none !important; opacity:1 !important;
  }
  .partners_title{ max-width:18ch; }
}
@media (max-width:760px){
  .pring{ grid-template-columns:repeat(auto-fill,minmax(5rem,1fr)); gap:1.5rem .75rem; }
  .pcard_name{ font-size:.62rem; }
}

/* ── mentors ─────────────────────────────────────────────── */
.c-mentors{
  position:relative; overflow:hidden;
  background:var(--c-dark); color:var(--c-off);
  padding-block:var(--pad);
}
/* faint registration grid behind everything */
.c-mentors::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(246,246,246,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246,246,246,.055) 1px, transparent 1px);
  background-size:7rem 7rem;
}
.mentors_inner{ position:relative; z-index:1; }
.mentors_head{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:1.75rem; margin-bottom:5rem;
}
.mentors_title{
  font-size:3.1rem; font-weight:400; line-height:1.14; letter-spacing:-.032em;
  max-width:20ch;
}
.mentors_title .accent{ color:var(--c-mint); }
.mentors_text{ max-width:52ch; color:rgba(246,246,246,.68); line-height:1.6; }

.mentors_grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,.8rem + 1.4vw,2rem); align-items:start;
}
.mentor:nth-child(even){ margin-top:3rem; }     /* the staggered rhythm */
.mentor{ transition:transform .5s var(--ease); }
.mentor:hover{ transform:translateY(-6px); }

.mentor_tile{
  position:relative; aspect-ratio:1/1.04;
  border-radius:1rem; overflow:hidden;
  background:var(--c-bone);
}
.mentor_photo{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transition:transform .7s var(--ease);
}
.mentor:hover .mentor_photo{ transform:scale(1.04); }
.mentor_badge{
  position:absolute; right:.6rem; bottom:.6rem; z-index:1;
  max-width:calc(100% - 1.2rem); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  padding:.45em .7em; border-radius:.5rem;
  background:var(--c-off); color:var(--c-dark);
  font-family:var(--font-mono); font-size:.6rem;
  text-transform:uppercase; letter-spacing:.09em;
}
.mentor_info{
  background:var(--c-off); color:var(--c-dark);
  border-radius:0 0 1rem 1rem; padding:1rem 1.1rem 1.2rem;
  margin-top:-1rem; position:relative; z-index:1;
}
.mentor_name{ font-size:1.05rem; font-weight:600; letter-spacing:-.018em; }
.mentor_role{ margin-top:.3rem; font-size:.9rem; opacity:.62; }

@media (max-width:1100px){
  .mentors_grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; }
  .mentors_title{ font-size:2.3rem; }
}
@media (max-width:760px){
  .mentors_grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
  .mentor:nth-child(even){ margin-top:0; }
  .mentors_title{ font-size:1.8rem; }
  .mentors_head{ margin-bottom:3rem; }
}

/* ── newsroom ────────────────────────────────────────────── */
.c-posts{ background:var(--c-grey); padding-block:var(--pad); border-radius:var(--rad) var(--rad) 0 0; }
.posts_lead{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.posts_head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:1.5rem;
  margin-bottom:4.5rem;          /* heading row → featured card */
}
.posts_title{ font-size:var(--t-h2); font-weight:400; letter-spacing:-.035em; line-height:1; }
.posts_title .fw{ color:#c3c8d6; }
.posts_title .fw.is-lit{ color:var(--c-dark); }

.post-feature{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:3rem; align-items:stretch;
  padding:2rem;
  background:var(--c-white); border-radius:var(--rad);
  transition:background-color .5s var(--ease), color .5s var(--ease);
}
.feature_image{
  min-width:0; max-width:100%;
  border-radius:calc(var(--rad) * .75); overflow:hidden;
  aspect-ratio:16/11; background:var(--c-sage);
}
.feature_image img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.post-feature:hover .feature_image img{ transform:scale(1.04); }
.feature_body{
  min-width:0;
  display:flex; flex-direction:column;
  padding:.5rem 2rem 0 1.5rem;   /* left value = the gap beside the image */
}
.post_meta{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.meta_date{ opacity:.55; }
.feature_title{
  margin-top:clamp(1.75rem,1rem+3vw,3.5rem);
  font-size:clamp(1.5rem,1rem+2.2vw,2.9rem); font-weight:400;
  letter-spacing:-.03em; line-height:1.12; max-width:20ch;
}
.feature_excerpt{ margin-top:1.35em; max-width:42ch; opacity:.72; line-height:1.6; }
.feature_foot,.thumb_foot{
  margin-top:auto; padding-top:2.5rem; padding-right:5rem;
  display:flex; align-items:center;
}
/* the arrow sits in the card corner rather than riding the text baseline */
.feature_foot .cta_arrow,.thumb_foot .cta_arrow{
  position:absolute; right:0; bottom:0;
  width:3.5em; height:3.5em;
  border-radius:20px 20px var(--rad) 20px;
}

.posts_grid{
  margin-top:2rem;              /* featured card → thumbnail row */
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem;
}
.post-thumb{
  position:relative;
  display:flex; flex-direction:column;
  min-height:clamp(16rem,11rem+15vw,22rem);
  padding:2rem;
  border-radius:var(--rad);
  transition:transform .5s var(--ease);
}
.post-thumb:hover{ transform:translateY(-6px); }
.post-thumb.-white{ background:var(--c-white); color:var(--c-dark); }
.post-thumb.-deep{ background:var(--c-deep); color:var(--c-off); }
.post-thumb.-dark{ background:var(--c-dark); color:var(--c-off); }
.post-thumb.-deep .u-tag,.post-thumb.-dark .u-tag{ background:rgba(246,246,246,.12); color:var(--c-off); }
.thumb_title{
  margin-top:clamp(2.5rem,1.75rem + 3.2vw,4.25rem);
  font-size:clamp(1.1rem,.95rem+.85vw,1.65rem); font-weight:400;
  letter-spacing:-.028em; line-height:1.12;
}

/* ── footer ──────────────────────────────────────────────── */
.c-footer{
  position:relative; overflow:hidden;
  border-radius:1.5rem; background:var(--c-dark); color:var(--c-off);
  padding-top:6rem;
}
.footer_inner{ position:relative; z-index:1; }

.footer_top{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:3rem; }
.footer_logo{ display:inline-flex; align-items:center; }
.footer_blurb{
  margin-top:1.75rem; max-width:44ch;
  color:rgba(246,246,246,.65); line-height:1.7;
}
.footer_brand .u-cta{ margin-top:2.25rem; }

.footer_col_title{ font-size:1.15rem; font-weight:600; letter-spacing:-.02em; margin-bottom:1.6rem; }
.footer_col li + li{ margin-top:.9rem; }
.footer_col a{ color:rgba(246,246,246,.68); transition:color .4s var(--ease); }
.footer_col a:hover{ color:var(--c-off); }

.footer_rule{ margin:5rem 0 0; border:0; border-top:1px solid rgba(246,246,246,.16); }
.footer_bottom{
  padding-top:2rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
}
.footer_social{ display:flex; gap:.7rem; }
.social_btn{
  width:2.7rem; height:2.7rem; border-radius:100px;
  background:var(--c-off); color:var(--c-dark);
  display:grid; place-items:center;
  transition:background-color .4s var(--ease), transform .4s var(--ease);
}
.social_btn svg{ width:1.2rem; height:1.2rem; fill:currentColor; }
.social_btn:hover{ background:var(--c-mint); transform:translateY(-3px); }

.footer_legal{ display:flex; flex-wrap:wrap; gap:1.75rem; font-size:.95rem; color:rgba(246,246,246,.62); }
.footer_legal a:hover{ color:var(--c-off); }

.footer_up{
  width:3rem; height:3rem; border-radius:100px; flex:none;
  border:1px solid rgba(246,246,246,.3); display:grid; place-items:center;
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.footer_up:hover{ background:var(--c-mint); color:var(--c-dark); border-color:var(--c-mint); }

/* full-bleed team photo — the fade meets the panel colour at the very top
   edge and clears fast, so no tinted wash sits over the image itself */
.footer_photo{
  position:relative; margin-top:4.5rem; overflow:hidden;
  aspect-ratio:1920/760;
}
.footer_photo img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 38%;
  filter:brightness(.92) contrast(1.02);
}
.photo_veil{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    /* 1. the seam — exact panel colour at the top edge, cleared by 24%
          so the join itself is invisible */
    linear-gradient(var(--c-dark) 0%, rgba(0,8,60,.92) 7%,
                    rgba(0,8,60,.55) 14%, rgba(0,8,60,0) 24%),
    /* 2. a long, low neutral falloff — carries the blend well down the
          image without tinting it, so the photo emerges rather than starts */
    linear-gradient(rgba(0,0,0,.58) 0%, rgba(0,0,0,.38) 16%,
                    rgba(0,0,0,.20) 30%, rgba(0,0,0,.09) 43%,
                    rgba(0,0,0,.03) 54%, rgba(0,0,0,0) 66%),
    /* 3. bottom vignette so the copyright line stays legible */
    linear-gradient(rgba(0,0,0,0) 80%, rgba(0,0,0,.55) 100%);
}
.footer_copy{
  position:absolute; left:2rem; bottom:1.25rem; z-index:3;
  color:rgba(246,246,246,.6);
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1100px){
  .hero_heading{ font-size:4.5rem; max-width:90%; }
  .hero_intro{ padding:8rem 2.5rem 2.5rem; }
  .scroller_stage,.scroller_top{ padding-inline:2.5rem; }
  .scroller_body{ max-width:80%; }
  .scroller_item{ font-size:2.2rem; }
  .scroller_numeral{ right:2.5rem; }
  .footer_top{ grid-template-columns:1fr 1fr; gap:2.5rem; }
}
@media (max-width:900px){
  .scroller_item{ font-size:1.65rem; }
  .scroller_body{ max-width:100%; }
  .hero_scroller{ padding-top:5.5rem; }
  .scroller_numeral{ display:none; }
  .hero_heading{ font-size:3.25rem; max-width:100%; }
  .c-header{ top:1rem; left:1rem; right:1rem; }
  .header_nav{ display:none; }
  .menu_btn{ display:flex; }
  .post-feature{ grid-template-columns:1fr; }
  .posts_grid{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .scroller_item{ font-size:1.35rem; }
  .scroller_stage,.scroller_top{ padding-inline:1.5rem; }
  .hero_heading{ font-size:2.6rem; }
  .hero_intro{ padding:7rem 1.5rem 2rem; }
  .hero_sub{ font-size:1.05rem; }
  .c-hero{ height:320vh; }
  .hero_foot{ flex-direction:column; align-items:flex-start; }
  .footer_top{ grid-template-columns:1fr; }
  .footer_bottom{ flex-direction:column; align-items:flex-start; }
  .footer_copy{ left:1.5rem; }
}

/* the intro's mark stands in for the site logo until it lands */
html.is-loading .header_logo{ opacity:0; }

/* ── work with us ────────────────────────────────────────── */
/* One panel behind every "Work with us": either book the call or write. */
.c-connect{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; }
.c-connect[hidden]{ display:none; }
.connect_scrim{
  position:absolute; inset:0; background:rgba(0,8,40,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s var(--ease);
}
.c-connect.is-open .connect_scrim{ opacity:1; }
.connect_card{
  position:relative; z-index:1;
  width:min(34rem, calc(100% - 2.5rem));
  padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);
  border-radius:clamp(1rem,.6rem + 1vw,1.5rem);
  background:var(--c-off); color:var(--c-dark);
  box-shadow:0 30px 70px -30px rgba(0,4,30,.6);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.c-connect.is-open .connect_card{ opacity:1; transform:none; }
.connect_x{
  position:absolute; top:.9rem; right:1rem;
  width:2rem; height:2rem; border-radius:50%; font-size:1.25rem; line-height:1;
  display:grid; place-items:center; color:rgba(0,8,60,.5);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.connect_x:hover{ background:rgba(0,8,60,.07); color:var(--c-dark); }
.connect_title{
  margin-top:1.25rem;
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.25rem);
  font-weight:400; letter-spacing:-.032em; line-height:1.1;
}
.connect_text{ margin-top:.75rem; color:rgba(0,8,60,.66); line-height:1.55; }
.connect_options{ margin-top:1.75rem; display:grid; gap:.75rem; }
.connect_opt{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.15rem; border-radius:.85rem;
  background:var(--c-white); border:1px solid rgba(0,8,60,.1);
  transition:border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.connect_opt:hover{
  border-color:rgba(0,22,169,.45); transform:translateY(-2px);
  box-shadow:0 12px 26px -18px rgba(0,8,60,.5);
}
.connect_opt_ico{
  width:2.5rem; height:2.5rem; flex:none; border-radius:.6rem;
  display:grid; place-items:center; font-size:1.1rem;
  background:var(--c-mint); color:var(--c-dark);
}
.connect_opt_body{ display:flex; flex-direction:column; gap:.2rem; margin-right:auto; }
.connect_opt_name{ font-weight:600; letter-spacing:-.015em; }
.connect_opt_meta{ color:rgba(0,8,60,.5); }
.connect_opt .cta_arrow{
  width:2rem; height:2rem; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--c-dark); color:var(--c-off); font-size:.85rem;
}
@media (prefers-reduced-motion:reduce){
  .connect_scrim,.connect_card{ transition:none; }
}