/* ============================================================================
   Leading Futures — shared brand layer
   Both sites inherit this. The youth extension lives in fos.html only.
   Becomes packages/brand in the Next.js build.
   ========================================================================= */

:root{
  /* surfaces */
  --bg:#0B0B0B;
  --surface:#111111;
  --surface-2:#161616;
  --line:#262626;

  /* text */
  --ink:#F4F3EE;
  --grey-1:#CFCEC9;
  --grey-2:#9A9994;
  --grey-3:#4A4947;

  /* accent — lime leads, one lime idea per screen */
  --lime:#E8FF47;
  --on-accent:#0B0B0B;   /* text on lime/pink/teal fills — never flips with the band */
  --lime-ink:#5C6600;    /* lime darkened until it reads on a bone surface (5.6:1) */
  --acc-inv:#5C6600;     /* accent inside an INVERTED card: bone card on a dark band */
  --lime-tint:#1A1C10;

  /* lines of work, in order */
  --mint:#7CF5A0;
  --teal:#2FD6C9;
  --blue:#2A8FD6;

  /* youth extension — FOS content only */
  --pink:#FF5CC8;
  --violet:#9B7BFF;

  /* the micro label scale: tracked uppercase labels. Lifts on phones,
     where 10px is unreadable in the hand. */
  --micro:clamp(11.5px,.78vw,12.5px);

  --maxw:clamp(1280px,86vw,1560px);
  --gut:clamp(20px,4.5vw,56px);
  --sec:clamp(72px,8vw,128px);
  --r:0px;            /* institute is square; fos overrides to 16px */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Lexend,system-ui,-apple-system,sans-serif;
  font-weight:300;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em;line-height:1.08;margin:0}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}

.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0;position:relative}
.sec--surface{background:var(--surface)}

/* ---- type -------------------------------------------------------------- */
.eyebrow{
  font-size:var(--micro);font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey-2);margin:0 0 22px;
}
.eyebrow--lime{color:var(--lime)}
h1{font-size:clamp(38px,6.4vw,82px)}
h2{font-size:clamp(28px,3.9vw,52px);max-width:19ch}
h3{font-size:clamp(19px,1.7vw,23px);letter-spacing:-.025em}
h4{font-size:17px;letter-spacing:-.02em}
.lead{font-size:clamp(16.5px,1.35vw,19px);color:var(--grey-1);max-width:68ch;line-height:1.62}
.statement{
  font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.18;
  letter-spacing:-.03em;color:var(--ink);max-width:22ch;
}
.statement b{font-weight:700;color:var(--lime)}
.note{font-size:14px;color:var(--grey-2);line-height:1.55}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15.5px;letter-spacing:-.01em;
  padding:15px 26px;border:1px solid transparent;border-radius:var(--r);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn--lime{background:var(--lime);color:var(--on-accent)}
.btn--lime:hover{background:#F0FF6E}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--grey-3)}
.btn--ghost:hover{border-color:var(--ink)}
.btn .ext{font-size:13px;opacity:.75}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---- logo -------------------------------------------------------------- */
.logo-inline{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.logo-inline svg{width:30px;height:28px;flex:none}
.logo-inline .wm{font-size:17px;letter-spacing:-.03em;line-height:1}
.logo-inline .wm b{font-weight:700;color:var(--ink)}
.logo-inline .wm i{font-style:normal;font-weight:300;color:var(--grey-2)}

.logo-stack{display:block}
.logo-stack svg{width:52px;height:48px;margin-bottom:18px}
.logo-stack .l1,.logo-stack .l2{
  display:block;font-weight:700;font-size:clamp(40px,6.6vw,86px);
  letter-spacing:-.05em;line-height:.92;
}
.logo-stack .l2{color:var(--lime)}
.logo-stack .l3{
  display:block;font-weight:300;font-size:clamp(12px,1.25vw,16px);
  letter-spacing:.56em;text-transform:lowercase;color:var(--grey-1);margin-top:12px;
}

/* ---- header ------------------------------------------------------------ */
.hdr{
  position:sticky;top:0;z-index:70;
  background:rgba(11,11,11,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.hdr .w{display:flex;align-items:center;gap:30px;padding-top:15px;padding-bottom:15px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--grey-1)}
.nav a{white-space:nowrap;padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--lime)}
@media(max-width:900px){.nav{display:none}}

/* ---- waves ------------------------------------------------------------- */
.wave{position:absolute;pointer-events:none;user-select:none;opacity:0;animation:waveIn 1.5s ease .25s forwards}
@keyframes waveIn{to{opacity:1}}
.wave--right{top:50%;right:-14%;width:min(58vw,820px);transform:translateY(-50%)}
.wave--band{left:0;right:0;bottom:0;width:100%;height:auto}
.wave--corner{top:0;right:0;width:min(42vw,560px)}

/* ---- rules and cards --------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px 30px}
.rule{height:4px;width:100%;display:block}
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.grid > *{background:var(--bg)}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1000px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}}

/* ---- lime band --------------------------------------------------------- */
.limeband{background:var(--lime);color:var(--on-accent);overflow:hidden}
.limeband .w{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding-top:16px;padding-bottom:16px;
  font-size:11.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase}

/* ---- forms ------------------------------------------------------------- */
.field{display:block;margin-bottom:16px}
.field span{display:block;font-size:12.5px;letter-spacing:.06em;color:var(--grey-2);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r);color:var(--ink);font:inherit;font-size:15.5px;padding:13px 14px;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--lime);outline-offset:1px;border-color:transparent}
.field textarea{min-height:120px;resize:vertical}

/* ---- footer ------------------------------------------------------------ */
.ftr{border-top:1px solid var(--line);padding:clamp(46px,5vw,70px) 0 34px;font-size:14.5px}
.ftr .ftr-h{font-size:var(--micro);font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--grey-2);margin:0 0 15px}
.ftr a{color:var(--grey-1);display:block;padding:5px 0}
.ftr a:hover{color:var(--lime)}
.ftr-bot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(34px,4vw,52px);padding-top:24px;border-top:1px solid var(--line);
  font-size:13px;color:var(--grey-2)}

/* ---- placeholders ------------------------------------------------------
   Visible by default so nothing unconfirmed ships by accident. Add
   ?launch to the URL to preview the page with every placeholder hidden. */
html.launch .ph{display:none!important}
html.launch .ph-row{display:none!important}
.draftbar[hidden]{display:none!important}
.draftbar{position:fixed;right:14px;bottom:14px;z-index:120;display:flex;gap:8px;
  align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:7px 8px 7px 14px;font-size:11.5px;color:var(--grey-2)}
.draftbar b{color:var(--lime);font-weight:700}
.draftbar button{border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:999px;padding:5px 12px;font:inherit;font-size:11.5px;cursor:pointer}
.draftbar button:hover{border-color:var(--lime);color:var(--lime)}
@media print{.draftbar{display:none}}
/* ---- placeholders — anything unconfirmed renders visibly ---------------- */
.ph{
  background:var(--lime-tint);color:var(--lime);border:1px dashed rgba(232,255,71,.45);
  padding:1px 7px;font-size:.88em;font-weight:400;border-radius:var(--r);
  /* short tokens stay on one line; a long note wraps instead of overflowing */
  white-space:normal;overflow-wrap:break-word;
}


/* ---- light bands -------------------------------------------------------
   A light section re-points the tokens rather than restyling components,
   so every card, chip, rule and form inside adapts on its own.
   Lime stays a FILL only here: the guidelines forbid lime text on light. */
/* ---- BAND RHYTHM ---------------------------------------------------------
   The rule: bands alternate light and dark, counted backwards from the
   closing band, so the section just above the dark finale is always light
   and the rhythm never ends on two darks. It is automatic. Add, remove or
   reorder a section and the whole page re-flows on its own. Nothing in the
   markup carries a colour.
   The hero and the closing band always stay dark: they have their own wave
   art, and a dark finale is the intended ending. The hero's own lime band
   separates it from whatever follows, so the top never reads as a clash.
   `.sec--light` stays available for a one-off override.                     */
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing),
.sec--light{
  --bg:#F4F3EE;          /* grid cells and tiles paint with --bg, so it must flip too */
  --ink:#0B0B0B;
  --grey-1:#45443F;
  --grey-2:#5E5D58;
  --grey-3:#B9B8B2;
  --surface:#FFFFFF;
  --surface-2:#EAE9E2;
  --line:#D9D8D2;
  --lime-tint:#F2FFB0; --acc-inv:#E8FF47;   /* inverted card here is near-black, so lime is right */
  background:#F4F3EE;
  color:#0B0B0B;
}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .eyebrow--lime,
.sec--light .eyebrow--lime{color:var(--grey-2)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .tag,
.sec--light .tag{color:var(--ink);border-color:rgba(11,11,11,.3)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .statement b,
.sec--light .statement b{color:var(--ink);background:var(--lime);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .btn--ghost,
.sec--light .btn--ghost{color:var(--ink);border-color:rgba(11,11,11,.3)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .btn--ghost:hover,
.sec--light .btn--ghost:hover{border-color:var(--ink)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .ph,
.sec--light .ph{background:#0B0B0B;color:var(--lime);border-color:rgba(11,11,11,.4)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .chip--lime,
.sec--light .chip--lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .chip--teal,
.sec--light .chip--teal{color:#12776F;border-color:rgba(18,119,111,.5)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .score .b1,
.sec--light .score .b1{background:#B9CF2E;opacity:.75}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .plan--rec,
.sec--light .plan--rec{background:var(--lime-tint);border-color:#0B0B0B}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .plan .rec,
.sec--light .plan .rec{background:#0B0B0B;color:var(--lime)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .plan li:before,
.sec--light .plan li:before{background:#0B0B0B}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .faq summary:before,
.sec--light .faq summary:before{color:var(--ink)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .qs .qn,
.sec--light .qs .qn{color:var(--ink)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .num span,
.sec--light .num span{color:var(--grey-2)}


/* ---- accent text ------------------------------------------------------
   On dark the brand accents work as text. On light they do not: lime on
   white is banned outright and pink, violet and teal all fall under 4.5:1,
   so a light band swaps in darkened equivalents of the same hues. */
.acc-lime{color:var(--lime)} .acc-pink{color:var(--pink)}
.acc-violet{color:var(--violet)} .acc-teal{color:var(--teal)}
.acc-mint{color:var(--mint)} .acc-blue{color:var(--blue)}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-lime,
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .more,
.sec--light .more{color:#0B0B0B}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .more:hover,
.sec--light .more:hover{color:#45443F}
.sec--light .acc-lime{color:#0B0B0B}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-pink,
.sec--light .acc-pink{color:#B10070}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-violet,
.sec--light .acc-violet{color:#5B36C7}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-teal,
.sec--light .acc-teal{color:#0F6A63}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-mint,
.sec--light .acc-mint{color:#1A7A42}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .acc-blue,
.sec--light .acc-blue{color:#1C6BA6}


/* The guidelines specify white on violet, which measures 3.15:1 and fails
   AA. Fills that carry white text use a darkened violet (5.65:1); the
   brand violet is kept for decorative use such as rules and numbers. */
:root{ --violet-ink:#6B4FD6; }

/* big-number captions were grey-2 on surface at 2.56:1 */
.num span{color:var(--grey-1)}

/* ---- reveal ------------------------------------------------------------ */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}


/* ---- motion -------------------------------------------------------------
   The brief asks for highlight sweeps, sticker pops, chart dots and bar
   fills. Everything below is transform/opacity only so it stays on the
   compositor, and all of it stops under prefers-reduced-motion. */

/* the lime marker grows left to right as the heading arrives */
.hl{background-image:linear-gradient(var(--lime),var(--lime));background-repeat:no-repeat;
  background-size:0% 100%;background-position:left center;background-color:transparent;
  transition:background-size .75s cubic-bezier(.22,.61,.36,1);color:var(--on-accent)}
.in .hl,.rv.in .hl{background-size:100% 100%}
h2:not(.rv) .hl{background-size:100% 100%}

/* children of a revealed block arrive in sequence rather than together */
.stg > *{opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.rv.in .stg > *,.stg.in > *{opacity:1;transform:none}

/* cards lift on hover so the grids feel alive under the cursor */
.rcard,.phase,.quote,.fac-img,.plan,.card{transition:transform .25s cubic-bezier(.22,.61,.36,1),
  border-color .25s,box-shadow .25s}
.rcard:hover,.phase:hover,.quote:hover,.plan:hover{transform:translateY(-4px);border-color:var(--grey-3)}
.fac:hover .fac-img{transform:translateY(-4px)}
.fac-img img{transition:filter .35s,transform .5s}
.fac:hover .fac-img img{filter:grayscale(0) contrast(1.02);transform:scale(1.04)}

/* numbers count up when they first arrive */
.num b{font-variant-numeric:tabular-nums}

/* chart dots settle into place */
.chart .dot,.chart .us{opacity:0;transform:scale(.4);transform-origin:center;
  transition:opacity .5s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.in .chart .dot,.in .chart .us{opacity:1;transform:scale(1)}
.in .chart .dot:nth-of-type(2){transition-delay:.1s}
.in .chart .dot:nth-of-type(3){transition-delay:.2s}
.in .chart .us{transition-delay:.45s}
.chart .quad{opacity:0;transition:opacity .6s ease .3s}
.in .chart .quad{opacity:1}

@media (prefers-reduced-motion:reduce){
  .hl{background-size:100% 100%!important;transition:none}
  .stg > *{opacity:1;transform:none;transition:none}
  .chart .dot,.chart .us,.chart .quad{opacity:1;transform:none;transition:none}
  .rcard:hover,.phase:hover,.quote:hover,.plan:hover,.fac:hover .fac-img{transform:none}
}

/* ---- a11y -------------------------------------------------------------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:12px;z-index:200;background:var(--lime);color:var(--on-accent);padding:11px 18px;font-weight:700}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .wave{opacity:1;animation:none}
}

/* =========================================================================
   SHARED COMPONENTS — both sites use these. Corner radius follows --r,
   so the institute gets squares and Future Outliers gets rounds.
   ====================================================================== */
/* ---- marquee: one line, always moving. Two identical halves, the second
       aria-hidden, each with a trailing gap so the seam is invisible. ---- */
.mq{overflow:hidden;position:relative}
.mq:before,.mq:after{content:"";position:absolute;top:0;bottom:0;z-index:2;
  width:clamp(36px,7vw,110px);pointer-events:none}
.mq:before{left:0;background:linear-gradient(90deg,var(--bg),rgba(0,0,0,0))}
.mq:after{right:0;background:linear-gradient(270deg,var(--bg),rgba(0,0,0,0))}
.mq-rail{display:flex;width:max-content}
.mq-half{display:flex;gap:var(--mq-gap,16px);margin-right:var(--mq-gap,16px)}
.mq-half>*{flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .mq-rail{animation:mqrun var(--mq-dur,54s) linear infinite}
  .mq:hover .mq-rail,.mq:focus-within .mq-rail{animation-play-state:paused}
  @keyframes mqrun{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){.mq{overflow-x:auto}}

/* ---- portraits on the moving line ---- */
.pstrip{--mq-gap:16px;--mq-dur:64s;margin-top:clamp(30px,3.6vw,46px)}
.pw{width:clamp(146px,14vw,196px)}
.pw .im{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--surface-2);display:flex;align-items:center;justify-content:center}
.pw .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);
  transition:filter .4s,transform .5s}
.pw:hover .im img{filter:none;transform:scale(1.04)}
.pw .ini{font-weight:700;font-size:30px;letter-spacing:-.04em;color:var(--on-accent)}
.pw .nm{font-weight:700;font-size:13.5px;letter-spacing:-.016em;margin-top:12px;line-height:1.25}
.pw .rl{font-size:11.5px;color:var(--grey-2);margin-top:5px;line-height:1.42}


/* ---- source wordmarks under the curriculum ---- */
.srcs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:20px}
@media(max-width:1000px){.srcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.srcs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.src{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  min-height:78px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px 12px;transition:border-color .25s,transform .25s}
.src:hover{border-color:var(--grey-3);transform:translateY(-3px)}
.src img{max-height:30px;width:auto;max-width:100%;
  filter:grayscale(1) brightness(0) invert(1);opacity:.8}
main > section.sec:nth-last-of-type(even):not(.hero):not(.closing) .src img,
.sec--light .src img{filter:grayscale(1) brightness(0);opacity:.75}
.src .wmk{font-weight:700;font-size:13px;letter-spacing:-.02em;line-height:1.25;color:var(--grey-1)}
.src--empty{border-style:dashed;background:transparent}

/* =========================================================================
   PHONE PASS
   Micro-labels sit at 9.5 to 11px beside a wide column, which is right on a
   laptop and too small in the hand. Below 760px nothing drops under 11.5px,
   every link and control in a list gets a 44px tap target, and the last
   multi-column grids collapse.
   ====================================================================== */
@media(max-width:760px){
  :root{--micro:11.5px}
  .eyebrow,.tag,.flab,.ifact k,.fact k,.qlab,.plan .pn,.plan .rec,.pmile,
  .ftr .ftr-h,.ftr-bot,.lwset span,.phkey span,.wkc .wn,.wkc .st,.faq2 .qn,
  .pg-n,.gn-k,.wq .tag2,.srcline .src i,.pil-tags span,.ff-tags span,
  .pw .rl,.fex span,.ff-ch span,.flow .fnum,.topic i,.cap,.score .row span,
  .num span,.phase .rng,.rcard .n,.chip{font-size:11.5px}
  .note,.ftr a,.fact span,.ifact span{font-size:13.5px}
  .ftr a,.menu a,.faq2 summary,.tsl button,.way,.ftr-bot a,.more{
    min-height:44px;display:flex;align-items:center}
  .faq2 summary{align-items:flex-start}
  .chk{min-height:44px;align-items:center}
  .chk input{width:20px;height:20px;margin-top:0}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .facts,.ifacts{grid-template-columns:1fr}
  .wk-nav{display:none}
  .wk{scroll-snap-type:x proximity}
  .btn{min-height:48px}
}