/* ============================================================
   LUMO FINANCE — DESIGN SYSTEM
   Hand-built. No framework, no template.
   Style once at desktop, override only where it breaks.
   ============================================================ */

/* ---------- FONTS ----------
   Helvetica Now is licensed for anyone who already has it installed, so
   local() picks it up. There is deliberately no url() source: we never had
   a webfont licence for it, so those files were never shipped, and every
   page was firing five 404s a load asking Netlify for fonts that aren't
   there. With local() alone the family simply isn't available when it
   isn't installed, and the stack falls through to helvetica-neue-world
   from the Adobe kit, which is what nearly everyone sees anyway.     */

@font-face{
  font-family:"Helvetica Now Display";
  src:local("Helvetica Now Display Bold");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Display";
  src:local("Helvetica Now Display ExtraBold");
  font-weight:800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Display";
  src:local("Helvetica Now Display Black");
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Text";
  src:local("Helvetica Now Text Regular");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Helvetica Now Text";
  src:local("Helvetica Now Text Medium");
  font-weight:500;font-style:normal;font-display:swap;
}

/* ---------- TOKENS ---------- */

:root{
  /* brand */
  --orange:#ff914d;
  --yellow:#ffde59;
  --green:#c1ff72;
  --grad:linear-gradient(135deg,var(--orange),var(--yellow),var(--green));

  /* ink — body copy sits at #454545 (8.7:1 on white), not a washed-out grey */
  --ink:#111111;
  --muted:#454545;
  --faint:#6f6f6f;
  --line:rgba(17,17,17,.22);
  --soft:rgba(17,17,17,.08);
  --hair:rgba(17,17,17,.12);
  --bg:#ffffff;

  /* type
     Helvetica Now sits first so the site upgrades itself the moment
     licensed files land in /fonts/ (or Now is added to the Adobe kit).
     Until then everyone — Mac, Windows, Android — gets Helvetica Neue
     World from Adobe Fonts, instead of Windows dropping to Arial. */
  --display:"Helvetica Now Display","helvetica-neue-world","Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --text:"Helvetica Now Text","helvetica-neue-world","Helvetica Neue",Helvetica,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* fluid scale — nothing jumps at a breakpoint */
  --t-hero:clamp(2.375rem,5.6vw,5.5rem);
  --t-h1:clamp(2.5rem,5.4vw,4.5rem);
  --t-h2:clamp(2rem,4vw,3.5rem);
  --t-h3:clamp(1.375rem,2.2vw,2rem);
  --t-big:clamp(1.35rem,2.05vw,2.05rem);
  --t-lead:clamp(1.0625rem,1.5vw,1.375rem);
  --t-body:clamp(1rem,1.15vw,1.125rem);
  --t-label:clamp(1rem,1.2vw,1.1875rem);
  --t-fine:0.8125rem;

  /* layout */
  --wrap:1400px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(3.5rem,8vw,8.5rem);
  --nav-h:clamp(64px,7vw,88px);

  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- RESET ---------- */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Helvetica Neue World stops at 700. Without this the browser fakes
     800 and 900 by smearing the outlines, which looks cheap at masthead
     size. Off means it picks the nearest real weight instead — and the
     900s come back for free if Helvetica Now Display is ever added. */
  font-synthesis:style small-caps;   /* i.e. weight synthesis off, italics kept */
  font-synthesis-weight:none;        /* modern longhand, same effect */
}
img,svg,video{max-width:100%;height:auto;display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- LAYOUT ---------- */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.section{padding-block:var(--sec);}
/* anchors must clear the sticky nav */
:target,section[id],h2[id],h3[id],[data-anchor]{
  scroll-margin-top:5.5rem;
}
.section--tight{padding-block:clamp(2.5rem,5vw,5rem);}
.rule{border:0;border-top:1px solid var(--hair);margin:0;}

/* ---------- TYPE ---------- */

.display{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.04em;
  line-height:1.02;
  text-wrap:balance;
}
.hero-type{font-size:var(--t-hero);font-weight:900;letter-spacing:-0.045em;}
.h1{font-size:var(--t-h1);}
.h2{font-size:var(--t-h2);}
.h3{font-size:var(--t-h3);letter-spacing:-0.03em;line-height:1.1;}

.lead{
  font-family:var(--text);
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--muted);
  max-width:56ch;
  text-wrap:pretty;
}
.body{max-width:66ch;text-wrap:pretty;}
.fine{font-size:var(--t-fine);line-height:1.6;color:var(--muted);}

/* Eyebrow: gradient dot + solid label.
   Small text filled with yellow/green sits at ~1.5:1 on white — unreadable.
   The dot carries the brand, the words stay legible.            */
.eyebrow{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-family:var(--display);
  font-weight:800;
  font-size:0.8125rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:1.25rem;
}
.eyebrow::before{
  content:"";
  width:.6rem;height:.6rem;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--grad);
}

/* gradient text utility */
.grad{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- THE LUMO LINK ----------
   Plain text. No box, no pill, no icon.
   Gradient fills on hover, nudges 2px right.        */

.link{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.28;          /* was 1.15 — clipped descenders on gradient hover */
  color:var(--ink);
  display:inline-block;
  padding:2px 0 .09em;
  cursor:pointer;
  background:none;
  border:0;
  text-align:left;
  transition:transform .2s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.link:hover,
.link:focus-visible,
.link.is-active{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.link:hover,.link:focus-visible{transform:translateX(2px);}

.link--big{font-size:var(--t-big);}
.link--huge{font-size:var(--t-h2);font-weight:900;letter-spacing:-0.035em;}
.link--sm{font-size:1rem;font-weight:800;}

/* ---------- LOADING SCREEN ----------
   Team photo, desaturated, with the wordmark over it.
   Plays once per session so it never gets tedious.   */

.preloader{
  position:fixed;
  inset:0;
  z-index:200;
  background:#0c0c0c;
  display:grid;
  place-items:center;
  overflow:hidden;
  transition:opacity .75s var(--ease), visibility .75s var(--ease);
}
.preloader__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
  filter:grayscale(1) contrast(1.06) brightness(.52);
}
.preloader__word{
  position:relative;
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:1;
  font-size:clamp(4rem,16vw,14rem);
  color:#fff;
  animation:lumoIn .9s var(--ease) both;
}
@keyframes lumoIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:none;}
}
.preloader__bar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:clamp(2rem,8vh,4.5rem);
  width:min(280px,52vw);
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.preloader__bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--grad);
  animation:lumoLoad 1.5s var(--ease) forwards;
}
@keyframes lumoLoad{to{width:100%;}}

.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none;}
.preloader.is-instant{display:none;}
html.is-loading{overflow:hidden;}

@media (prefers-reduced-motion:reduce){
  .preloader{display:none;}
}

/* ---------- MASTHEAD + BAR ----------
   Two separate things, deliberately.

   The masthead is static and scrolls away. The bar is fixed and slides
   in behind it. Nothing changes height on scroll, so there is no layout
   feedback loop and the wordmark cannot judder.          */

.masthead{position:relative;z-index:2;background:transparent;}
.masthead__inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:clamp(1rem,2.2vw,1.75rem) clamp(.75rem,1.6vw,1.25rem);
}
/* ============================================================
   GRADIENT TEXT NEEDS A TALLER BOX

   background-clip:text paints the gradient across the element's background
   box and then clips it to the shape of the glyphs. Any part of a letter
   that falls outside that box has no gradient behind it, so it simply isn't
   drawn — the letter looks sliced off.

   The display type here runs at a line-height below 1, which is what makes
   it sit tightly. That also makes the background box shorter than the
   letters are tall, so the bottoms disappeared the moment a hover turned
   the gradient on.

   Padding grows the background box. The matching negative margin gives the
   space straight back, so the box gets bigger without anything moving.
   ============================================================ */
.brand,
.crew__name,
.lane__name{
  padding-block:.18em .24em;
  margin-block:-.18em -.24em;
}

.brand{
  display:block;
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.055em;
  line-height:.85;
  font-size:clamp(2.75rem,7vw,6.5rem);
}
.brand:hover{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.nav__links{
  display:flex;
  align-items:baseline;
  gap:clamp(1.25rem,2.4vw,2.25rem);
  padding-bottom:clamp(.35rem,.9vw,.75rem);
}
.nav__links .link{font-size:clamp(1rem,1.3vw,1.25rem);}
.nav__chat{position:relative;}
.nav__chat::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-.3em;
  height:3px;border-radius:2px;
  background:var(--grad);
}

.bar{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--hair);
  transform:translateY(-101%);
  transition:transform .32s var(--ease);
}
.bar.is-on{transform:none;}
.bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:.7rem;
}
.bar .brand{font-size:clamp(1.375rem,2.1vw,1.875rem);}
.bar .nav__links{padding-bottom:0;align-items:center;}

.nav__toggle{
  display:none;
  flex:0 0 auto;
  font-family:var(--display);
  font-weight:900;
  font-size:1.125rem;
  letter-spacing:-0.02em;
  background:none;border:0;cursor:pointer;
  padding:0 0 clamp(.3rem,1vw,.7rem);
}
.bar .nav__toggle{padding-bottom:0;}
.nav__toggle:hover{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* full-screen mobile menu */
.menu{
  position:fixed;
  inset:0;
  z-index:90;
  background:var(--bg);
  padding:var(--pad);
  display:none;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.menu.is-open{display:flex;}
.menu__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding-block:clamp(.75rem,1.6vw,1.25rem);
  margin-bottom:clamp(1.5rem,6vw,3rem);
}
.menu__top .brand{font-size:clamp(2.25rem,9vw,3.25rem);}
.menu__list{display:grid;gap:clamp(.75rem,2.5vw,1.25rem);}
.menu__list .link{font-size:clamp(2.25rem,10vw,3.5rem);font-weight:900;letter-spacing:-0.04em;}
.menu__foot{margin-top:auto;padding-top:2.5rem;display:grid;gap:.5rem;justify-items:start;}

@media (max-width:860px){
  .nav__links{display:none;}
  .nav__toggle{display:block;}
}

/* ---------- HERO ---------- */

.hero{
  padding-top:clamp(1.75rem,4.5vw,3.5rem);
  padding-bottom:clamp(2rem,5vw,4rem);
}
.hero__title{max-width:19ch;line-height:1.05;}
.hero__lead{margin-top:clamp(1.5rem,2.8vw,2.25rem);max-width:60ch;}
.hero__actions{
  margin-top:clamp(1.75rem,3.5vw,2.75rem);
  display:flex;
  flex-wrap:wrap;
  gap:clamp(1.25rem,3vw,2.5rem);
}

/* ---------- STEP NUMBER ---------- */

.step__num{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.5rem,2.4vw,2rem);
  letter-spacing:-0.04em;
  line-height:1;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- ENTRY GRID ----------
   Four doors. Heading fades, options take its place.
   Tap-driven so it works identically on a phone;
   hover is a pointer-only enhancement.               */

.entry{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,3rem) clamp(2.5rem,6vw,4.5rem);
}
.door{
  position:relative;
  min-height:clamp(190px,20vw,255px);
  padding-top:.375rem;
}
.door__head{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.75rem,3.4vw,3.25rem);
  letter-spacing:-0.035em;
  line-height:1.18;
  margin:0;
  text-align:left;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color:var(--ink);
  width:100%;
  transition:opacity .22s var(--ease),transform .22s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* quiet affordance on pointer devices — the bar widens to say it's live */
@media (hover:hover) and (pointer:fine){
  .door__head::after{
    content:"";
    display:block;
    width:1.75rem;height:3px;
    border-radius:2px;
    background:var(--grad);
    margin-top:1.1rem;
    opacity:.85;
    transition:width .22s var(--ease);
  }
  .door:hover .door__head::after{width:3.5rem;}
}
.door__panel{
  position:absolute;
  left:0;right:0;
  top:.25rem;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.door.is-open .door__head{
  opacity:0;
  transform:translateY(-10px);
  pointer-events:none;
}
.door.is-open .door__panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
/* There used to be a hover rule here that swapped the heading out for the
   panel as soon as the cursor arrived. It made the headings impossible to
   click on a desktop: you'd move towards one, it would vanish before you got
   there, and the click would land on whichever option had appeared underneath
   the cursor — or on nothing at all. Opening on click only means the thing
   behaves the same way on a mouse as it does on a phone. */
.door__options{display:grid;gap:.625rem;justify-items:start;}
.door__back{
  font-family:var(--display);
  font-weight:800;
  font-size:.9375rem;
  letter-spacing:-0.01em;
  color:var(--faint);
  background:none;border:0;padding:.25rem 0;cursor:pointer;
  margin-bottom:.5rem;
  display:none;
}
.door.is-picked .door__back{display:block;}
.door.is-picked .door__options{display:none;}
/* the chosen option, echoed back as a label (not a link) */
.door__picked{
  display:none;
  margin-bottom:.85rem;
  font-family:var(--display);
  font-weight:800;
  font-size:var(--t-big);
  letter-spacing:-0.02em;
  line-height:1.15;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.door.is-picked .door__picked{display:block;}
.door__actions{display:none;gap:.625rem;}
.door.is-picked .door__actions{display:grid;justify-items:start;}

@media (max-width:1024px){
  .entry{grid-template-columns:1fr;gap:clamp(1.75rem,6vw,2.5rem);}
  .door{min-height:0;}
  /* on one column the absolute panel would collapse the row — go static */
  .door__panel{position:static;opacity:1;transform:none;pointer-events:auto;display:none;margin-top:1rem;}
  .door.is-open .door__panel{display:block;}
  .door.is-open .door__head{opacity:1;transform:none;pointer-events:auto;}
  .door__head::after{
    content:"+";
    display:inline;
    float:right;
    width:auto;height:auto;
    margin:0;
    background:none;
    border-radius:0;
    color:var(--faint);
    font-weight:900;
    transition:transform .2s var(--ease);
  }
  .door:hover .door__head::after{width:auto;}
  .door.is-open .door__head::after{transform:rotate(45deg);}
  .door{border-bottom:1px solid var(--hair);padding-bottom:clamp(1.25rem,4vw,1.75rem);}
}

/* ---------- TEAM STRIP ---------- */

.crew{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:clamp(1.75rem,3.5vw,2.75rem);
}
.crew__name{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(1.5rem,2.4vw,2.125rem);
  letter-spacing:-0.04em;
  line-height:1.02;
}
.crew__blurb{font-size:1rem;color:var(--muted);margin-top:.8rem;max-width:36ch;}
.crew__links{display:flex;gap:1rem;margin-top:.9rem;}
.crew a.crew__card{display:block;}
.crew a.crew__card:hover .crew__name{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- FEATURE LIST (Learn teaser etc) ---------- */

.cols{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:clamp(1.5rem,3vw,2.5rem) clamp(2rem,4vw,3.5rem);
}
.stack{display:grid;gap:.75rem;justify-items:start;}

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
@media (max-width:900px){.split{grid-template-columns:1fr;}}

/* ---------- CTA BAND ---------- */

.cta{
  border-top:1px solid var(--hair);
  padding-block:clamp(3rem,7vw,6.5rem);
}
.cta__title{max-width:14ch;}

/* ---------- FOOTER ---------- */

.foot{padding-block:clamp(2.5rem,5vw,3.5rem) clamp(2rem,4vw,2.75rem);}
.foot__links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.125rem 1.5rem;
  text-align:center;
}
.foot__links a{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.125rem;
  display:inline-block;
  overflow-wrap:anywhere;
  transition:transform .18s var(--ease);
}
.foot__links a:hover{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transform:translateX(2px);
}
.foot__divider{margin:clamp(1.75rem,4vw,2rem) 0 1.25rem;}
.foot__legal{max-width:1200px;}

@media (max-width:640px){
  .foot__links{gap:.875rem .625rem;}
  .foot__links a{font-size:.9375rem;line-height:1.2;letter-spacing:-0.015em;}
}

/* ---------- REVEAL ON SCROLL ---------- */

.rise{opacity:0;transform:translateY(18px);}
.rise.is-in{
  opacity:1;transform:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;}
}

/* ---------- UTILITIES ---------- */

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:#fff;padding:.75rem 1rem;z-index:100;
}
.skip:focus{left:.5rem;top:.5rem;}
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.mt-1{margin-top:.5rem;}
.mt-2{margin-top:1rem;}
.mt-3{margin-top:1.75rem;}
.mt-4{margin-top:clamp(2rem,4vw,3rem);}

/* ============================================================
   PAGE COMPONENTS
   ============================================================ */

/* ---------- PAGE HEADER ---------- */

.phead{padding-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(1.75rem,4vw,3rem);}
.phead__title{max-width:20ch;}
.phead__lead{margin-top:clamp(1.25rem,2.5vw,1.75rem);max-width:62ch;}

/* ---------- FULL-BLEED PHOTO ---------- */

.shot{
  width:100%;
  margin:0;
  overflow:hidden;
  background:#0c0c0c;
}
.shot img{
  width:100%;
  height:auto;
  display:block;
  filter:grayscale(1) contrast(1.04);
}
.shot--tall img{
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 32%;
}
@media (max-width:720px){
  .shot--tall img{aspect-ratio:4/3;}
}

/* ---------- PROSE ---------- */

.prose{max-width:68ch;}
.prose > * + *{margin-top:1.25rem;}
.prose ul + p{margin-top:1.25rem;}
.prose p{color:var(--muted);text-wrap:pretty;}
.prose h2{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.1;
  font-size:var(--t-h3);
  color:var(--ink);
  margin-top:clamp(2.25rem,4vw,3rem);
}
.prose h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.125rem;
  color:var(--ink);
  margin-top:1.75rem;
}
.prose ul{display:grid;gap:.65rem;margin-top:1rem;}
.prose li{
  color:var(--muted);
  padding-left:1.4rem;
  position:relative;
}
.prose li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:.5rem;height:.5rem;
  border-radius:999px;
  background:var(--grad);
}

/* ---------- NUMBERED STEPS (full page) ---------- */

.steps{display:grid;gap:clamp(2.5rem,5vw,4rem);counter-reset:step;}
.step{
  display:grid;
  grid-template-columns:minmax(0,7rem) minmax(0,1fr);
  gap:clamp(1rem,3vw,3rem);
  align-items:start;
  padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--hair);
}
@media (max-width:720px){
  .step{grid-template-columns:1fr;gap:.75rem;}
}
.step__body{max-width:62ch;}
.step__body p{color:var(--muted);margin-top:.85rem;}

/* ---------- PERSON PAGE ---------- */

.person{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
@media (max-width:900px){.person{grid-template-columns:1fr;}}
.person__name{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.75rem,6vw,5rem);
  letter-spacing:-0.05em;
  line-height:.98;
}
.person__contact{display:grid;gap:.6rem;justify-items:start;margin-top:clamp(1.5rem,3vw,2rem);}

/* ---------- FAQ ---------- */

.faq{display:grid;max-width:64rem;}
.faq__item{border-top:1px solid var(--hair);}
.faq__item:last-child{border-bottom:1px solid var(--hair);}
.faq__q{
  padding-bottom:.1em;
  width:100%;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
  text-align:left;
  background:none;
  border:0;
  cursor:pointer;
  padding:clamp(1.1rem,2.4vw,1.6rem) 0;
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.2;
  font-size:clamp(1.125rem,1.9vw,1.5rem);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
}
.faq__q:hover{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.faq__q span{flex:1 1 auto;}
.faq__q i{
  flex:0 0 auto;
  font-style:normal;
  font-weight:900;
  color:var(--faint);
  -webkit-text-fill-color:var(--faint);
  transition:transform .22s var(--ease);
}
.faq__item.is-open .faq__q i{transform:rotate(45deg);}
.faq__a{display:none;padding:0 0 clamp(1.25rem,2.5vw,1.75rem);}
.faq__item.is-open .faq__a{display:block;}
.faq__a p + p{margin-top:1rem;}
.faq__a p{color:var(--muted);max-width:66ch;}

/* ---------- FORM ---------- */

.field{display:grid;gap:.6rem;}
.field__label{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.025em;
  font-size:var(--t-h3);
  line-height:1.15;
  color:var(--ink);
}
.field__help{font-size:1rem;color:var(--faint);}
.input,
.select,
.textarea{
  width:100%;
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(1.25rem,2vw,1.875rem);
  /* A single-line input clips its text to the content box, and the content
     box is exactly line-height tall. At 1.25 with a heavy display face the
     box ended just below the baseline, so the tails of p, j, g and y were
     sliced off as you typed. 1.5 leaves the descenders inside it. */
  line-height:1.5;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:2px solid var(--line);
  border-radius:0;
  padding:.5rem .25rem .6rem;
  outline:none;
  transition:border-color .22s var(--ease),transform .18s var(--ease);
}
.input::placeholder,.textarea::placeholder{color:rgba(17,17,17,.26);}
.input:focus,.select:focus,.textarea:focus{
  border-bottom-color:var(--ink);
  transform:translateY(-1px);
}
.textarea{resize:vertical;min-height:6rem;font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:500;font-family:var(--text);}
.select{
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 18px) 58%,calc(100% - 12px) 58%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:2.25rem;
}
.chips{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;}
.chip{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(1.0625rem,1.5vw,1.375rem);
  color:var(--ink);
  background:none;border:0;padding:.2rem 0;cursor:pointer;
  transition:transform .18s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.chip:hover,.chip.is-on{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.chip:hover{transform:translateX(2px);}

/* stepper */
.stepper{max-width:46rem;}
.stepper__step{display:none;}
.stepper__step.is-current{display:grid;gap:1.5rem;}
.stepper__nav{display:flex;align-items:center;gap:1.75rem;flex-wrap:wrap;margin-top:.5rem;}
.stepper__meter{
  display:flex;gap:.4rem;margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.stepper__meter b{
  display:block;height:3px;width:2.25rem;border-radius:2px;
  background:var(--soft);
}
.stepper__meter b.is-done{background:var(--grad);}
.form__note{font-size:.9375rem;color:var(--faint);max-width:52ch;}
.form__error{color:#b3261e;font-weight:600;font-size:1rem;display:none;}
.form__error.is-on{display:block;}

/* ---------- LEARN LIBRARY ---------- */

.search{
  display:flex;
  align-items:flex-end;
  gap:1.25rem;
  flex-wrap:wrap;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.search input{
  width:min(880px,100%);
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:clamp(1.375rem,2.4vw,2.125rem);
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:2px solid var(--line);
  border-radius:0;
  padding:.75rem .375rem .625rem;
  outline:none;
  transition:border-color .2s var(--ease);
}
.search input:focus{border-bottom-color:var(--ink);}
.search input::placeholder{color:rgba(17,17,17,.28);}
.search__meta{display:flex;gap:1rem;align-items:center;padding-bottom:.6rem;}
.search__count{font-size:.9375rem;color:var(--faint);}

.library{display:grid;gap:clamp(2.25rem,4vw,3.25rem);}
.topic{display:grid;gap:1rem;}
.topic__name{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.8125rem;
  color:var(--faint);
  display:flex;align-items:center;gap:.55rem;
}
.topic__name::before{
  content:"";width:.6rem;height:.6rem;flex:0 0 auto;
  border-radius:999px;background:var(--grad);
}
.topic__list{
  display:grid;
  grid-template-columns:1fr;
  gap:.75rem 2.5rem;
}
@media (min-width:780px){.topic__list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1120px){.topic__list{grid-template-columns:repeat(3,minmax(0,1fr));}}
.topic__list .link{font-size:1.25rem;font-weight:750;line-height:1.3;}
.is-hidden{display:none !important;}
.no-results{font-size:var(--t-lead);color:var(--muted);margin-top:1.5rem;}

/* ---------- CALLOUT ----------
   Contact details and anything that needs lifting out of the
   flow. A gradient rule down the left rather than a box.   */

.callout{
  border-left:3px solid transparent;
  border-image:var(--grad) 1;
  padding:.25rem 0 .25rem 1.5rem;
  margin-top:1.5rem;
}
.callout__name{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.125rem;
  color:var(--ink);
}
.callout__role{font-size:1rem;color:var(--faint);margin-top:.15rem;}
.callout__lines{display:grid;gap:.35rem;justify-items:start;margin-top:.75rem;}

/* ---------- LEGAL DOCUMENT ---------- */

.doc{
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:start;
}
@media (max-width:940px){
  .doc{grid-template-columns:1fr;gap:2rem;}
  .doc__index{position:static !important;}
}
.doc__index{
  position:sticky;
  top:6rem;
  display:grid;
  gap:.55rem;
  justify-items:start;
}
.doc__index a{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.015em;
  font-size:.9375rem;
  line-height:1.3;
  color:var(--faint);
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.doc__index a:hover,
.doc__index a.is-here{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transform:translateX(2px);
}
.doc__body > section + section{margin-top:clamp(2.5rem,5vw,3.5rem);}
.doc__body h2{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.1;
  font-size:var(--t-h3);
  margin-bottom:1rem;
}
.doc__body p{color:var(--muted);max-width:68ch;text-wrap:pretty;}
.doc__body p + p,
.doc__body ul + p{margin-top:1.25rem;}
.doc__body ul{display:grid;gap:.6rem;margin-top:1rem;max-width:68ch;}
.doc__body li{color:var(--muted);padding-left:1.4rem;position:relative;}
.doc__body li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:.5rem;height:.5rem;border-radius:999px;
  background:var(--grad);
}
.doc__stamp{
  font-family:var(--display);
  font-weight:800;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ============================================================
   BROKER PAGES
   ============================================================ */

/* ---------- WHO YOU'RE READING ---------- */

.switcher{
  display:flex;
  align-items:baseline;
  gap:.75rem;
  flex-wrap:wrap;
  padding-top:clamp(1.25rem,3vw,2rem);
}
.switcher__label{
  font-family:var(--display);
  font-weight:800;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--faint);
}
.switcher select{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.025em;
  font-size:clamp(1.125rem,1.7vw,1.5rem);
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:2px solid var(--line);
  border-radius:0;
  padding:.3rem 2rem .35rem .15rem;
  cursor:pointer;
  appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink) 50%),
    linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 14px) 60%,calc(100% - 8px) 60%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  transition:border-color .2s var(--ease);
}
.switcher select:hover,
.switcher select:focus{border-bottom-color:var(--ink);outline:none;}

/* ---------- BROKER HERO ---------- */

.bhero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  padding-top:clamp(1.5rem,3vw,2.5rem);
  padding-bottom:clamp(2rem,4vw,3.5rem);
}
@media (max-width:820px){
  .bhero{grid-template-columns:1fr;align-items:start;}
  .bhero__portrait{order:-1;max-width:14rem;}
}
.bhero__name{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2.75rem,7vw,6rem);
  letter-spacing:-0.055em;
  line-height:.92;
}
.bhero__tag{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1rem,1.5vw,1.25rem);
  letter-spacing:-0.02em;
  color:var(--ink);
  position:relative;
  padding-top:.85rem;
  margin-top:1.25rem;
  display:inline-block;
}
.bhero__tag::before{
  content:"";
  position:absolute;top:0;left:0;
  width:2.5rem;height:3px;border-radius:2px;
  background:var(--grad);
}
.bhero__line{margin-top:1.5rem;max-width:44ch;}
.bhero__contact{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:1.75rem;}
.bhero__portrait img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center 20%;
  filter:grayscale(1) contrast(1.04);
}

/* ---------- THE GUIDE ---------- */

.guide{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}
@media (max-width:900px){.guide{grid-template-columns:1fr;}}
.guide__cover{
  background:#0c0c0c;
  aspect-ratio:1/1.414;
  max-width:22rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  position:relative;
}
.guide__cover .eyebrow{color:rgba(255,255,255,.6);margin-bottom:0;}
.guide__cover .eyebrow::before{width:.5rem;height:.5rem;}
.guide__cover h3{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(2rem,3.6vw,2.75rem);
  letter-spacing:-0.045em;
  line-height:.98;
  color:#fff;
}
.guide__cover span{font-size:.875rem;color:rgba(255,255,255,.62);}

/* ---------- SHORT READS ---------- */

.reads{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:0 clamp(2rem,4vw,3.5rem);
}
.read{
  display:block;
  padding:clamp(1.5rem,3vw,2rem) 0;
  border-top:1px solid var(--hair);
}
.read__title{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.03em;
  line-height:1.22;
  font-size:clamp(1.25rem,1.9vw,1.5rem);
  color:var(--ink);
  transition:transform .2s var(--ease);
}
.read:hover .read__title{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transform:translateX(2px);
}
.read__hook{color:var(--muted);margin-top:.6rem;max-width:44ch;font-size:1rem;}
.read__more{
  font-family:var(--display);font-weight:800;font-size:.9375rem;
  color:var(--faint);margin-top:.85rem;display:inline-block;
}

/* ---------- ARTICLE ---------- */

.article{max-width:34rem;margin-inline:auto;}
.article__meta{
  display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;
  font-size:.9375rem;color:var(--faint);margin-bottom:1.25rem;
}
.article__title{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.045em;
  line-height:1.02;
  font-size:clamp(2.125rem,4.4vw,3.25rem);
  margin-bottom:1.5rem;
}
.article__standfirst{
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--ink);
  font-weight:500;
  margin-bottom:2rem;
  text-wrap:pretty;
}
.article p{color:var(--muted);text-wrap:pretty;}
.article p + p{margin-top:1.25rem;}
.article h2{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.03em;
  font-size:1.375rem;
  color:var(--ink);
  margin-top:2.25rem;
  margin-bottom:.85rem;
}
/* The nine agri pieces were hand-written and only ever used h2 and ul.
   The imported library uses the lot — subheadings, numbered lists, pull
   quotes, figures, inline links — so everything an article can contain is
   styled here. Anything left unstyled falls back to browser defaults, which
   is how an imported page ends up looking broken on an otherwise finished
   site. */
.article h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:1.0625rem;
  color:var(--ink);
  margin-top:1.75rem;
  margin-bottom:.5rem;
}
.article h4{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  margin-top:1.5rem;
  margin-bottom:.4rem;
}

.article ul,
.article ol{display:grid;gap:.6rem;margin-top:1.25rem;margin-bottom:1.25rem;}
.article li{color:var(--muted);padding-left:1.4rem;position:relative;}
.article ul > li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:.5rem;height:.5rem;border-radius:999px;background:var(--grad);
}
/* numbered lists keep their numbers — in a how-to the order is the content */
.article ol{counter-reset:step;padding-left:0;list-style:none;}
.article ol > li{padding-left:1.9rem;counter-increment:step;}
.article ol > li::before{
  content:counter(step) ".";
  position:absolute;left:0;top:0;
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:.9375rem;
}
.article li > ul,
.article li > ol{margin-top:.6rem;margin-bottom:0;}

/* inline links in prose. Underlined because in a wall of text, colour alone
   isn't enough to mark a link — and these are black on cream, not blue. */
.article p a,
.article li a,
.article blockquote a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
  text-decoration-color:rgba(17,17,17,.3);
  transition:text-decoration-color .2s var(--ease);
}
.article p a:hover,
.article li a:hover,
.article p a:focus-visible,
.article li a:focus-visible{text-decoration-color:var(--ink);}

.article blockquote{
  margin:1.75rem 0;
  padding-left:1.1rem;
  border-left:3px solid transparent;
  border-image:var(--grad) 1;
}
.article blockquote p{
  font-family:var(--display);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:-0.015em;
  color:var(--ink);
}

.article figure{margin:2rem 0;}
.article figure img{
  width:100%;height:auto;display:block;border-radius:2px;
}
.article figcaption{
  margin-top:.6rem;
  font-size:.8125rem;
  color:var(--faint);
}

.article hr{
  border:0;border-top:1px solid var(--hair);margin:2.25rem 0;
}

/* Squarespace tables are rare but they exist, and an unstyled one overflows
   the column on a phone. */
.article table{
  width:100%;border-collapse:collapse;margin:1.75rem 0;
  font-size:.9375rem;
}
.article th,
.article td{
  text-align:left;padding:.6rem .5rem;
  border-bottom:1px solid var(--hair);color:var(--muted);
}
.article th{
  font-family:var(--display);font-weight:800;color:var(--ink);
  font-size:.8125rem;letter-spacing:.02em;text-transform:uppercase;
}

.article__end{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hair);
}

.draft b{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ============================================================
   THE BLOB
   A soft wash of the brand gradient trailing the cursor.
   Sits behind everything; pointer devices only.
   ============================================================ */

.blob{
  position:fixed;
  top:0; left:0;
  width:clamp(300px,34vw,460px);
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  /* sits ABOVE the bands, not behind them, so it carries across every
     ground. multiply can only darken, so black body copy underneath is
     unchanged and stays legible. */
  z-index:3;
  mix-blend-mode:multiply;
  opacity:0;
  /* hard circular edge — the colour grades inside it, the boundary doesn't */
  background:radial-gradient(circle at 30% 28%,
    var(--orange) 0%,
    var(--yellow) 50%,
    var(--green) 100%);
  transform:translate3d(-50%,-50%,0);
  transition:opacity .5s var(--ease);
  will-change:transform;
}
.blob.is-on{opacity:.55;}

/* content rides above it — the page has no background of its own,
   so the wash reads through the whitespace rather than behind text */
.masthead,.menu,main,.foot{position:relative;z-index:1;}

/* Desktop only, three ways.
   - hover:none / pointer:coarse  — real phones and tablets, no cursor to follow
   - max-width:860px             — the width the site switches to its mobile
                                   layout, so a narrow desktop window drops it
                                   too rather than showing a blob with no room
   - prefers-reduced-motion      — anyone who's asked for less movement
   The JS also removes the element outright under these conditions, so on a
   phone it isn't a hidden div — it isn't there at all. */
@media (hover:none),(pointer:coarse),(max-width:860px),(prefers-reduced-motion:reduce){
  .blob{display:none;}
}

/* ============================================================
   TEAM HERO — full bleed, names over the photo
   ============================================================ */

.thero{
  position:relative;
  width:100vw;
  left:50%;
  margin-left:-50vw;
  height:min(86vh,900px);
  overflow:hidden;
  background:#0c0c0c;
  z-index:1;
}
.thero__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 24%;
  filter:grayscale(1) contrast(1.05);
}
/* one scrim, bottom only, so the names have something to sit on */
.thero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));
  pointer-events:none;
}
.thero__lanes{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(var(--lanes,4),1fr);
}
.lane{
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:clamp(1.25rem,2.5vw,2.5rem);
}
.lane__inner{display:grid;gap:.5rem;}
.lane__name{
  display:block;
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.04em;
  line-height:1.02;
  font-size:clamp(1.0625rem,2.1vw,2.125rem);
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.5);
}
.lane__name span{display:block;}
.lane:hover .lane__name,
.lane:focus-visible .lane__name{
  display:block;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}
.lane__do{
  display:flex;
  gap:.9rem;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.lane:hover .lane__do,
.lane:focus-within .lane__do{opacity:1;transform:none;}
.lane__do a{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:-0.02em;
  font-size:clamp(.8125rem,1.1vw,1.0625rem);
  line-height:1.3;
  color:rgba(255,255,255,.95);
  text-shadow:0 8px 24px rgba(0,0,0,.45);
}
.lane__do a:hover{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  text-shadow:none;
}

/* the per-person portrait, used only on narrow screens — see below */
.lane__face{display:none;}

/* ---------- the team hero on a phone ----------
   The group photo works on a wide screen because each person stands in
   their own quarter and the name sits under them. Narrow it and the four
   names reflow into a 2x2 grid over the same photo, so they land on
   whoever happens to be behind them — the bottom two ended up captioning
   the legs of the top two.

   So below 860px the group shot steps aside and each person gets their own
   tile with their own portrait. Same markup, same links; it just stops
   pretending one photo can be cut into four. It also means a fifth broker
   is a new tile rather than a new photo shoot. */
@media (max-width:860px){
  .thero{height:auto;background:transparent;}
  .thero__img{display:none;}
  .thero::after{display:none;}

  .thero__lanes{
    position:static;
    grid-template-columns:repeat(2,1fr);
    gap:2px;
  }
  .lane{
    position:relative;
    aspect-ratio:1/1.12;
    padding:.9rem;
    overflow:hidden;
    background:#0c0c0c;
  }
  .lane__face{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 18%;
    filter:grayscale(1) contrast(1.05);
  }
  /* a scrim per tile, so the name has its own ground to sit on */
  .lane::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:62%;
    background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
    pointer-events:none;
  }
  .lane__inner{position:relative;z-index:2;}
  .lane__name{font-size:1.0625rem;}
  .lane__do{opacity:1;transform:none;}
}

/* ============================================================
   THE BIG ASK — Let's chat gets the room it deserves
   ============================================================ */

.ask{
  position:relative;
  border-top:1px solid var(--hair);
  padding-block:clamp(4.5rem,12vw,11rem);
}
.ask__kicker{
  font-family:var(--display);
  font-weight:800;
  font-size:.8125rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--faint);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
  display:flex;align-items:center;gap:.55rem;
}
.ask__kicker::before{
  content:"";width:.6rem;height:.6rem;border-radius:999px;background:var(--grad);
}
.ask__word{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.055em;
  line-height:.88;
  font-size:clamp(3.5rem,14vw,13rem);
  display:inline-block;
  /* same trick as .brand above — .06em of real space, the rest taken back */
  padding-bottom:.26em;
  margin-bottom:-.20em;
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  transition:transform .3s var(--ease);
}
a.ask__link:hover .ask__word{transform:translateX(6px);}
.ask__line{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:40ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--muted);
}
.ask__meta{
  margin-top:clamp(1.75rem,3.5vw,2.5rem);
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;
}

/* back sits above the question, quiet, so it never competes with Next */
.step__back{
  font-family:var(--display);
  font-weight:800;
  font-size:.9375rem;
  letter-spacing:-0.01em;
  color:var(--faint);
  background:none;border:0;padding:0 0 .25rem;cursor:pointer;
  justify-self:start;
  transition:color .18s var(--ease),transform .18s var(--ease);
}
.step__back:hover{color:var(--ink);transform:translateX(-2px);}

/* the first chip is the escape hatch — mark it */
.chip--talk{
  width:100%;
  padding-bottom:.9rem;
  margin-bottom:.35rem;
  border-bottom:1px solid var(--hair);
}

/* ============================================================
   BANDS
   Each section sits on its own ground so the page reads as
   chapters rather than one long scroll.

   A scheme is six variables. Slot 6 is the dark closer and is
   deliberately the same in every scheme.

   MIXED is the live scheme — chosen 14 Oct 2026, and what ships.
   It's the brand gradient walked down the page: the orange end, the
   yellow end, the green end, then a cool grey and a warm paper to
   land on before the black closer. Each tint is a 4-5% wash, enough
   to separate the chapters without colouring the room.

   The three below it are kept as alternates. They're not dead code:
   the preview's scheme picker switches between all four by setting
   data-bands on <html>, so they can still be shown to someone. The
   deployed pages carry no data-bands attribute at all, so :root here
   is what the site renders. To change the shipped scheme, move the
   :root selector onto a different block — nothing else.
   ============================================================ */

:root,
[data-bands="mixed"]{
  --band-1:#fff3ea;   /* orange */
  --band-2:#fffbea;   /* yellow */
  --band-3:#f4fcea;   /* green  */
  --band-4:#f1f3f5;   /* cool   */
  --band-5:#faf7f2;   /* paper  */
}

/* ---- alternates, preview only ---- */

[data-bands="spectrum"]{
  --band-1:#fffdf8;   /* near-white, warm   */
  --band-2:#fdf4e4;   /* cream              */
  --band-3:#fbeac8;   /* butter             */
  --band-4:#f8dfae;   /* soft amber         */
  --band-5:#f6d39a;   /* amber              */
}

[data-bands="two"]{
  --band-1:#fdf4e7;
  --band-2:#ffffff;
  --band-3:#fdf4e7;
  --band-4:#ffffff;
  --band-5:#fdf4e7;
}

[data-bands="three"]{
  --band-1:#fdf4e7;   /* cream  */
  --band-2:#ffffff;   /* white  */
  --band-3:#ffeada;   /* peach  */
  --band-4:#fdf4e7;
  --band-5:#ffffff;
}

.band{position:relative;z-index:1;}
.band--1{background:var(--band-1);}
.band--2{background:var(--band-2);}
.band--3{background:var(--band-3);}
.band--4{background:var(--band-4);}
.band--5{background:var(--band-5);}

/* the dark one closes the page */
.band--ink{
  background:#111111;
  color:#fff;
}
.band--ink .ask__kicker{color:rgba(255,255,255,.55);}
.band--ink .ask__line{color:rgba(255,255,255,.72);}
.band--ink .link{color:#fff;}
.band--ink .link:hover,
.band--ink .link:focus-visible{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.band--ink .ask{overflow:hidden;}
.band--ink .ask::before{
  content:"";
  position:absolute;
  right:-6%;
  top:50%;
  width:min(46vw,620px);
  aspect-ratio:1;
  transform:translateY(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 30% 28%,
    var(--orange) 0%, var(--yellow) 50%, var(--green) 100%);
  opacity:.17;
  pointer-events:none;
}
@media (max-width:860px){
  .band--ink .ask::before{right:-30%;opacity:.14;}
}

.band + .band{border-top:0;}
.band .ask{border-top:0;}

/* ============================================================
   BROKER VIDEO SLOT
   Ready for the short interview pieces. Drop an iframe or a
   <video> inside .vid__frame and it sizes itself.
   ============================================================ */

.vid{display:grid;gap:clamp(1rem,2vw,1.5rem);}
.vid__frame{
  position:relative;
  aspect-ratio:16/9;
  background:#0c0c0c;
  overflow:hidden;
}
.vid__frame iframe,
.vid__frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}
.vid__cap{font-size:1rem;color:var(--muted);max-width:52ch;}
.vid--portrait .vid__frame{aspect-ratio:4/5;max-width:26rem;}

/* every page closes on the dark band, so the CTA inherits it too */
.band--ink .lead,
.band--ink .crew__blurb,
.band--ink .fine,
.band--ink .form__note{color:rgba(255,255,255,.72);}
.band--ink .eyebrow{color:rgba(255,255,255,.55);}
.band--ink .cta{border-top:0;}
.band--ink .rule,
.band--ink hr{border-color:rgba(255,255,255,.16);}