/* Generated by the WFFL dashboard — edit content there, not here. */
:root{
  --ink:#0A0409;
  --ink-2:#12070D;
  --panel:#180B12;
  --panel-2:#1F0F18;
  --flex:#ED0B5E;
  --flex-hot:#FF1A6E;
  --flex-deep:#5C0326;
  --chalk:#E6E3E7;
  --silver:#8D8A93;
  --silver-2:#5E5A64;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);

  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gut:clamp(20px,4vw,64px);
  --max:1560px;
}
/* ============================================================
   WOMEN'S FANTASY FLEX LEAGUE™
   Design language modelled on athlos.com
   Palette: power black · Flex pink · crisp white · restrained silver
   ============================================================ */


*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--ink);color:var(--chalk);
  font-family:var(--body);font-size:17px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--flex);outline-offset:3px;border-radius:2px}

/* ---------- type roles ---------- */
.display{
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-weight:900;text-transform:uppercase;line-height:.86;letter-spacing:-.032em;
  margin:0;color:var(--chalk);text-wrap:balance;
}
.h2{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 850;
  font-weight:800;text-transform:uppercase;line-height:.94;letter-spacing:-.015em;
  font-size:clamp(30px,4.1vw,54px);margin:0;text-wrap:balance;
}
.h3{
  font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 800;
  font-weight:800;text-transform:uppercase;line-height:1;letter-spacing:-.01em;
  font-size:clamp(19px,1.55vw,23px);margin:0;
}
.eyebrow{
  font-family:var(--mono);font-size:13px;font-weight:500;text-transform:uppercase;
  letter-spacing:.1em;color:var(--flex);margin:0 0 22px;display:block;
}
.eyebrow.pale{color:var(--silver)}
.lede{
  font-size:clamp(19px,1.75vw,23px);line-height:1.45;color:var(--chalk);
  margin:0;max-width:36ch;letter-spacing:-.01em;
}
p{margin:0 0 1.1em;color:var(--silver);max-width:64ch}
p:last-child{margin-bottom:0}
p strong{color:var(--chalk);font-weight:600}
.chain{
  font-family:var(--mono);font-size:clamp(12px,1.05vw,15px);text-transform:uppercase;
  letter-spacing:.06em;color:var(--chalk);line-height:1.9;overflow-wrap:anywhere;
}
.chain b{color:var(--flex);font-weight:400;padding:0 .3em}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{position:relative}
.band{padding:clamp(72px,9vw,140px) 0;border-top:1px solid var(--line-soft)}
.band.tight{padding:clamp(56px,6vw,92px) 0}
.band.flush{border-top:0}
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,88px);align-items:center}
/* Grid children default to min-width:auto, which lets long display words and
   inputs push a column past the viewport. Opt every grid child out of that. */
.split > *,.stack > *,.stagger > *,.cards > *,.form > *,.fgrid > *{min-width:0}
.split.top{align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* ---------- nav ---------- */
.nav{position:fixed;inset:14px 14px auto;z-index:80;display:flex;justify-content:space-between;
  gap:14px;pointer-events:none}
.pill{
  pointer-events:auto;display:flex;align-items:center;gap:4px;
  background:rgba(20,8,14,.74);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:12px;padding:7px 8px;
}
.brand{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-weight:900;font-size:15px;letter-spacing:-.01em;text-transform:uppercase;
  padding:8px 12px;line-height:1;color:var(--chalk);white-space:nowrap;
}
.brand i{color:var(--flex);font-style:normal}
.nlink{
  font-family:var(--mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:9px 12px;border-radius:7px;color:var(--silver);transition:color .18s,background .18s;white-space:nowrap;
}
.nlink:hover{color:var(--chalk);background:rgba(255,255,255,.06)}
.nlink[aria-current="page"]{color:var(--chalk);background:rgba(255,255,255,.09)}
.navcta{
  font-family:var(--mono);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;
  background:var(--flex);color:#fff;padding:11px 16px;border-radius:8px;transition:background .18s;white-space:nowrap;
}
.navcta:hover{background:var(--flex-hot)}
.burger{display:none;pointer-events:auto;background:rgba(20,8,14,.74);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:12px;color:var(--chalk);width:46px;height:46px;
  align-items:center;justify-content:center;cursor:pointer;padding:0}
.burger span{display:block;width:18px;height:1.5px;background:currentColor;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:currentColor}
.burger span::before{top:-6px}.burger span::after{top:6px}
.socials{display:flex;gap:3px}
.soc{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:var(--silver);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;transition:color .18s,background .18s}
.soc:hover{color:var(--chalk);background:rgba(255,255,255,.07)}

.desk-links{display:contents}
/* Breakpoint set above the widest the pills reach with webfonts loaded,
   so the two nav pills can never collide mid-range. */
@media (max-width:1280px){
  .nav .desk{display:none!important}
  .burger{display:flex}
  .nav{inset:12px 12px auto}
}
/* Comfortable tap targets on touch devices */
@media (pointer:coarse){
  .nlink{padding:13px 14px}
  .soc{width:44px;height:44px}
  .btn{padding:16px 24px}
  .fcol a{padding:4px 0;margin-bottom:9px}
  .srow{padding:24px 0}
}
.sheet{
  position:fixed;inset:0;z-index:90;background:var(--ink-2);
  display:none;flex-direction:column;padding:86px var(--gut) 40px;overflow-y:auto;
}
.sheet.open{display:flex}
.sheet a{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 850;font-weight:800;
  text-transform:uppercase;font-size:clamp(30px,8vw,52px);line-height:1.05;letter-spacing:-.02em;
  padding:14px 0;border-bottom:1px solid var(--line-soft);color:var(--chalk);
}
.sheet a.accent{color:var(--flex)}
.sheetclose{position:fixed;top:12px;right:12px;z-index:91;width:46px;height:46px;border-radius:12px;
  border:1px solid var(--line);background:rgba(20,8,14,.9);color:var(--chalk);font-size:20px;cursor:pointer;display:none}
.sheet.open ~ .sheetclose{display:block}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;padding:15px 24px;border-radius:9px;
  border:1px solid var(--line);color:var(--chalk);background:transparent;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.btn:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.btn.solid{background:var(--flex);border-color:var(--flex);color:#fff}
.btn.solid:hover{background:var(--flex-hot);border-color:var(--flex-hot)}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- asset slots (supplied creative goes here) ---------- */
.slot{
  position:relative;border-radius:10px;overflow:hidden;background:var(--panel);
  border:1px solid var(--line-soft);isolation:isolate;
}
.slot::before{ /* stadium light bloom */
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 78% at 50% -14%,rgba(237,11,94,.34),transparent 62%),
    radial-gradient(58% 44% at 14% 104%,rgba(255,255,255,.10),transparent 70%),
    linear-gradient(168deg,#1E0B15 0%,#0C0509 96%);
}
.slot::after{ /* brush / grain texture */
  content:"";position:absolute;inset:0;z-index:1;opacity:.5;mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(112deg,rgba(255,255,255,.05) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(22deg,rgba(0,0,0,.3) 0 1px,transparent 1px 5px);
}
.slot .tag{
  position:absolute;z-index:2;left:12px;top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--chalk);
  background:rgba(10,4,9,.72);border:1px solid var(--line);border-radius:5px;padding:5px 8px;
}
.slot .cap{
  position:absolute;z-index:2;left:13px;right:13px;bottom:12px;font-family:var(--mono);
  font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--silver);line-height:1.6;
  text-wrap:pretty;
}
.slot .mark{position:absolute;z-index:2;right:12px;top:12px;width:22px;height:22px;
  border-top:1.5px solid var(--flex);border-right:1.5px solid var(--flex);opacity:.85}
.slot.r43{aspect-ratio:4/3}
.slot.r11{aspect-ratio:1/1}
.slot.r169{aspect-ratio:16/9}
.slot.r34{aspect-ratio:3/4}
.slot.r219{aspect-ratio:21/9}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px 0 clamp(30px,4vw,56px);overflow:hidden}
.hero.short{min-height:auto;padding:clamp(150px,17vw,210px) 0 clamp(46px,5vw,80px)}
.herobg{position:absolute;inset:0;z-index:0}
.herobg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(88% 62% at 50% 8%,rgba(237,11,94,.30),transparent 60%),
    radial-gradient(60% 50% at 82% 96%,rgba(237,11,94,.13),transparent 70%),
    linear-gradient(180deg,#160810 0%,#0A0409 74%);
}
.herobg::after{
  content:"";position:absolute;inset:0;opacity:.4;
  background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.045) 0 2px,transparent 2px 9px);
}
.beams{position:absolute;inset:0;z-index:1;opacity:.55;pointer-events:none}
.hero .wrap{position:relative;z-index:3;width:100%}
/* full-bleed recap video plate — the brief's homepage hero */
.videoslot{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.herovid{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:center 42%;background:#0A0409;
}
/* Scrim sits ABOVE the footage — the recap carries its own title cards, so
   the headline needs this to stay readable over them. */
.videoslot::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(64% 52% at 50% 38%,rgba(237,11,94,.20),transparent 66%),
    repeating-linear-gradient(94deg,rgba(255,255,255,.028) 0 2px,transparent 2px 11px),
    linear-gradient(180deg,rgba(10,4,9,.42) 0%,rgba(10,4,9,.60) 44%,rgba(10,4,9,.93) 100%);
}
.playbtn{
  position:absolute;z-index:5;left:50%;top:40%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:13px;
  background:none;border:0;cursor:pointer;color:var(--chalk);padding:8px;
}
.playbtn[hidden]{display:none}
.playbtn .ring{
  width:78px;height:78px;border-radius:50%;border:1.5px solid rgba(237,11,94,.8);
  display:grid;place-items:center;color:var(--flex);font-size:20px;padding-left:4px;
  background:rgba(10,4,9,.45);backdrop-filter:blur(3px);transition:background .2s,transform .2s;
}
.playbtn:hover .ring{background:rgba(237,11,94,.22);transform:scale(1.06)}
.playbtn .plbl{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--silver);
}
@media (max-width:760px){
  .playbtn{top:32%}
  .playbtn .ring{width:64px;height:64px;font-size:17px}
}

/* Display type narrows its width axis as the viewport narrows, so long words
   ("EXPERIENCE", "FOOTBALL") stay on one line instead of forcing h-scroll. */
.giant{
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 900;font-weight:900;
  text-transform:uppercase;line-height:.84;letter-spacing:-.03em;margin:0;
  font-size:clamp(34px,11.4vw,250px);color:var(--chalk);
  position:relative;z-index:3;white-space:nowrap;
}
/* Each hero line is authored, so it must never break mid-word. Script
   measures the longest line and scales the headline to fit; if that would
   drop below the legible floor it re-enables word wrapping instead. */
/* must outrank `html.anim .ln > span{display:block}` above, or each line
   measures as the full container width and the fit maths collapses */
.giant .ln > span,html.anim .giant .ln > span{display:inline-block}
.giant.wrapok{white-space:normal}
.giant .thin{font-variation-settings:inherit;font-weight:500;color:var(--silver)}
@media (min-width:640px){
  .giant{font-variation-settings:"wdth" 114,"wght" 900;font-size:clamp(56px,12.4vw,250px);line-height:.82}
}
@media (min-width:1024px){
  .giant{font-variation-settings:"wdth" 125,"wght" 900;font-size:clamp(78px,15.3vw,250px);
    line-height:.8;letter-spacing:-.035em}
}
/* Hero stage — cut-out subject stands in FRONT of the display type
   (the athlos.com hero treatment). */
.herostage{position:relative}
.heroart{
  position:absolute;left:50%;bottom:-3%;z-index:4;
  width:clamp(240px,46vw,700px);height:auto;
  transform:translateX(-50%);pointer-events:none;user-select:none;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.62));
}
.artglow{
  position:absolute;left:50%;bottom:-16%;z-index:1;
  width:clamp(320px,58vw,900px);aspect-ratio:16/11;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(237,11,94,.42),transparent 68%);
  filter:blur(26px);pointer-events:none;
}
html.anim .heroart{animation:artin 1.05s .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes artin{
  from{opacity:0;transform:translateX(-50%) translateY(30px) scale(.975)}
  to{opacity:1;transform:translateX(-50%)}
}
/* On phones the headline already fills the width, so overlaying the subject
   would bury it. She stacks above the type instead, tucked in just far
   enough to keep the two reading as one composition. */
@media (max-width:620px){
  .heroart{position:static;left:auto;right:auto;bottom:auto;transform:none;
    display:block;width:min(74vw,320px);margin:2px auto -14px;
    filter:drop-shadow(0 14px 24px rgba(0,0,0,.6))}
  html.anim .heroart{animation-name:artin-m}
  .artglow{left:50%;right:auto;top:0;bottom:auto;transform:translateX(-50%);
    width:min(96vw,400px)}
}
@keyframes artin-m{
  from{opacity:0;transform:translateY(24px) scale(.975)}
  to{opacity:1;transform:none}
}
.herofoot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,34px);position:relative;z-index:3}
.stamp{font-family:var(--display);font-variation-settings:"wdth" 120,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:clamp(17px,2.1vw,27px);letter-spacing:-.01em;color:var(--flex);line-height:1}
.hmeta{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--silver);line-height:1.8}
.sound{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.09em;color:var(--chalk);background:rgba(10,4,9,.6);
  border:1px solid var(--line);border-radius:100px;padding:9px 15px;cursor:pointer;
  position:absolute;z-index:4;right:var(--gut);top:96px;transition:border-color .18s,background .18s;
}
.sound:hover{border-color:var(--flex);background:rgba(237,11,94,.14)}
.sound .dot{width:6px;height:6px;border-radius:50%;background:var(--flex)}

/* ---------- marquee ribbon ---------- */
.ribbon{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:var(--flex);overflow:hidden;padding:13px 0}
.ribbon .track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.ribbon span{font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:15px;letter-spacing:.01em;color:#fff;padding:0 26px;white-space:nowrap}
.ribbon span i{font-style:normal;opacity:.5}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- staggered grid (Athlos "how it works") ---------- */
.stagger{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)}
.stagger > *:nth-child(2){margin-top:clamp(22px,3.2vw,52px)}
.stagger > *:nth-child(3){margin-top:clamp(40px,6.4vw,104px)}
.stagger > *:nth-child(4){margin-top:clamp(-40px,-4vw,-8px)}
.stagger > *:nth-child(5){margin-top:clamp(-18px,-1vw,0px)}
.stagger > *:nth-child(6){margin-top:clamp(18px,2.6vw,44px)}
@media (max-width:1180px){ /* tablet landscape — 3 cols get cramped */
  .stagger{grid-template-columns:repeat(2,1fr)}
  .stagger > *{margin-top:0}
  .stagger > *:nth-child(even){margin-top:clamp(26px,4vw,56px)}
}
@media (max-width:720px){
  .stagger{grid-template-columns:1fr;gap:44px}
  .stagger > *{margin-top:0!important}
}
.step .num{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--flex);display:block;margin-bottom:14px}
.step .slot{margin-bottom:22px}
.step h3{margin:0 0 10px}
.step .title{
  font-family:var(--body);font-size:clamp(21px,2vw,26px);font-weight:600;color:var(--flex);
  letter-spacing:-.015em;margin:0 0 9px;line-height:1.15;
}
.step p{font-size:15.5px;line-height:1.55;max-width:42ch}

/* ---------- season sequence ---------- */
.season{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.srow{
  display:grid;grid-template-columns:76px minmax(0,1fr) minmax(0,1.25fr);gap:clamp(16px,3vw,44px);
  align-items:baseline;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line);
  transition:background .2s;
}
.srow:hover{background:rgba(255,255,255,.028)}
.srow .n{font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:var(--flex)}
.srow .nm{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 850;font-weight:800;
  text-transform:uppercase;font-size:clamp(19px,2vw,27px);letter-spacing:-.012em;line-height:1.05;color:var(--chalk);
}
.srow p{margin:0;font-size:16px}
@media (max-width:820px){
  .srow{grid-template-columns:52px 1fr;row-gap:10px}
  .srow p{grid-column:2}
}

/* ---------- flow rail ---------- */
/* 1px gap over a line-coloured ground keeps the grid ruled cleanly
   at any column count, so it never goes ragged when it rewraps. */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:1px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line);width:100%}
.rail div{
  padding:18px clamp(12px,1.5vw,20px);font-family:var(--mono);font-size:clamp(10.5px,.92vw,12.5px);
  text-transform:uppercase;letter-spacing:.05em;color:var(--chalk);background:var(--panel);
  display:flex;align-items:center;gap:9px;
}
.rail div::before{content:"→";color:var(--flex);opacity:.9;flex:none}
.rail div:first-child::before{content:"◆";font-size:9px}
@media (max-width:420px){.rail{grid-template-columns:1fr 1fr}}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:clamp(14px,1.6vw,20px)}
.card{
  border:1px solid var(--line);border-radius:10px;padding:clamp(22px,2.4vw,30px);background:var(--panel);
  transition:background .2s,border-color .2s;display:flex;flex-direction:column;gap:11px;
}
.card:hover{background:var(--panel-2);border-color:rgba(255,255,255,.22)}
.card .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--flex);text-transform:uppercase}
.card p{font-size:15.5px;line-height:1.55;margin:0}

/* league tunnels */
.tunnels{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
@media (max-width:860px){.tunnels{grid-template-columns:1fr}
  .tunnel{min-height:clamp(210px,44vw,280px)}}
.tunnel{
  position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  min-height:clamp(300px,34vw,430px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.4vw,30px);background:var(--panel);isolation:isolate;transition:transform .3s;
}
.tunnel:hover{transform:translateY(-4px)}
.tunnel .bg{position:absolute;inset:0;z-index:0}
.tunnel .bg::before{content:"";position:absolute;inset:0;
  background:radial-gradient(100% 66% at 50% 100%,rgba(237,11,94,.4),transparent 62%),linear-gradient(180deg,#0D0509,#1A0A12)}
.tunnel .bg::after{content:"";position:absolute;inset:0;opacity:.34;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 26px),
                   repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 26px);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 100%,#000,transparent 76%);
  mask-image:radial-gradient(70% 60% at 50% 100%,#000,transparent 76%)}
.tunnel > *{position:relative;z-index:1}
.tunnel .nm{font-family:var(--display);font-variation-settings:"wdth" 122,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:clamp(30px,3.9vw,52px);line-height:.88;letter-spacing:-.03em;margin:0 0 12px;color:var(--chalk)}
.tunnel .tl{font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--flex)}

/* ---------- data rows ---------- */
.rows{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.rows div{display:flex;justify-content:space-between;gap:20px;padding:17px clamp(16px,2vw,24px);
  font-family:var(--mono);font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;
  border-bottom:1px solid var(--line-soft);color:var(--chalk)}
.rows div:last-child{border-bottom:0}
.rows div:nth-child(odd){background:rgba(255,255,255,.028)}
.rows div span:last-child{color:var(--silver);text-align:right}
.rows .hd{background:rgba(237,11,94,.12)!important;color:var(--flex)}
.rows .hd span:last-child{color:var(--flex)}

/* ---------- list of pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pillar{background:var(--ink-2);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:9px;
  transition:background .2s}
.pillar:hover{background:var(--panel-2)}
.pillar .k{font-family:var(--display);font-variation-settings:"wdth" 108,"wght" 850;font-weight:800;
  text-transform:uppercase;font-size:16px;letter-spacing:-.005em;color:var(--chalk)}
.pillar p{font-size:15px;line-height:1.5;margin:0}

/* ---------- big statement ---------- */
.statement{
  font-family:var(--display);font-variation-settings:"wdth" 102,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:clamp(23px,6.4vw,88px);line-height:.94;letter-spacing:-.022em;
  margin:0;color:var(--chalk);text-wrap:balance;overflow-wrap:break-word;
}
@media (min-width:640px){.statement{font-variation-settings:"wdth" 112,"wght" 900;line-height:.92}}
@media (min-width:1024px){.statement{font-variation-settings:"wdth" 118,"wght" 900;line-height:.9;letter-spacing:-.03em}}
.statement em{font-style:normal;color:var(--flex)}
.carousel-h{
  font-size:clamp(26px,3.5vw,48px);font-weight:700;line-height:1;letter-spacing:-.025em;
  margin:0;color:var(--chalk);text-wrap:balance;
}
.carousel-h em{font-style:normal;color:var(--flex)}

/* ---------- form ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:760px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.field input,.field select{
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 15px;
  color:var(--chalk);font-family:var(--body);font-size:16px;transition:border-color .18s,background .18s;
  width:100%;min-width:0; /* 16px prevents iOS zoom-on-focus */
}
.field input::placeholder{color:var(--silver-2)}
.field input:focus,.field select:focus{outline:none;border-color:var(--flex);background:var(--panel-2)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
@media (max-width:680px){.form{grid-template-columns:1fr}}
.formnote{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--silver-2);margin-top:6px;text-transform:uppercase}

/* ---------- footer ---------- */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding:clamp(56px,6vw,88px) 0 34px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr;gap:36px}}
.fmark{font-family:var(--display);font-variation-settings:"wdth" 122,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:clamp(26px,3.4vw,42px);line-height:.9;letter-spacing:-.028em;margin:0 0 14px;color:var(--chalk)}
.fmark i{color:var(--flex);font-style:normal}
.ftag{font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--flex);margin:0 0 22px}
.fcol h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--silver-2);margin:0 0 16px;font-weight:400}
.fcol a,.fcol p{display:block;font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--silver);margin:0 0 11px;transition:color .18s;max-width:none}
.fcol a:hover{color:var(--flex)}
.fbot{margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--silver-2)}

/* ---------- view routing ---------- */
.view{display:none}
.view.on{display:block;animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- utilities ---------- */
.stack{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px);align-items:flex-start}
.stack-sm{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
/* align-items:flex-start sizes children to fit-content, which can exceed the
   container; cap them so long inline chains wrap instead of overflowing. */
.stack > *,.stack-sm > *{max-width:100%}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.gallery > *:nth-child(1){grid-column:span 2;grid-row:span 2}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery > *:nth-child(1){grid-column:span 2;grid-row:auto}}
.center-max{max-width:900px}
.note{
  border-left:2px solid var(--flex);padding:4px 0 4px 18px;font-family:var(--mono);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--silver);line-height:1.75;max-width:56ch;
}

/* ================================================================
   MOTION LAYER
   Selected: G1 G2 G4 G5 G6 · H1–H7 · E1–E5 · A1–A4 · F1–F3 · P1–P4 · J1–J4
   The `anim` class is added by script only when motion is allowed, so
   with JS off or reduced-motion on, every rule below is inert and the
   page renders fully visible.
   ================================================================ */

/* G1 — section reveal */
html.anim [data-r]{
  opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.anim [data-r].in{opacity:1;transform:none}

/* G2 — display-type line reveal */
.ln{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
html.anim .ln > span{
  display:block;transform:translateY(106%);
  transition:transform .8s cubic-bezier(.22,.85,.26,1);
  transition-delay:calc(var(--l,0) * 85ms);
}
html.anim .lnw.in .ln > span{transform:none}
/* A split headline is animated by its line masks alone — cancel the
   generic reveal on it so the two don't double up. */
html.anim .lnw[data-r]{opacity:1;transform:none;transition:none}

/* G4 — sticky-nav shrink */
.nav .pill,.nav .brand,.nav .nlink,.nav .navcta,.nav .soc{
  transition:padding .3s cubic-bezier(.3,.8,.3,1),font-size .3s,background .3s,width .3s,height .3s}
.nav.small .pill{padding:3px 5px;background:rgba(11,5,9,.92)}
.nav.small .brand{font-size:13.5px;padding:6px 10px}
.nav.small .nlink{padding:7px 10px}
.nav.small .navcta{padding:9px 13px}
.nav.small .soc{width:29px;height:29px}

/* G5 — cursor follower (fine pointers only) */
.cur{position:fixed;left:0;top:0;z-index:200;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--flex);pointer-events:none;opacity:0;
  transform:translate3d(-50%,-50%,0);
  transition:width .22s,height .22s,background .22s,opacity .35s,border-color .22s}
.cur.on{opacity:.9}
.cur.big{width:54px;height:54px;background:rgba(237,11,94,.13);border-color:var(--flex-hot)}
@media (pointer:coarse){.cur{display:none}}

/* G6 — load sequence */
.load{position:fixed;inset:0;z-index:300;pointer-events:none}
.load .half{position:absolute;top:0;height:100%;width:50.6%;background:#08040A;
  transition:transform .95s cubic-bezier(.76,0,.24,1)}
.load .lh{left:0}.load .rh{right:0}
.load .lmk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;font-weight:900;
  text-transform:uppercase;font-size:clamp(15px,2.6vw,26px);letter-spacing:-.01em;color:var(--chalk);
  text-align:center;line-height:1.1;transition:opacity .4s}
.load .lmk i{color:var(--flex);font-style:normal}
.load.go .lh{transform:translateX(-101%)}
.load.go .rh{transform:translateX(101%)}
.load.go .lmk{opacity:0}
.load.done{display:none}

/* H1 / H2 — hero parallax */
html.anim .videoslot{will-change:transform}
html.anim .hero .giant{will-change:transform}

/* H3 — word cycle */
html.anim .wc{opacity:0;transform:translateY(6px);display:inline-block;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--w,0) * 130ms)}
html.anim .wc.in{opacity:1;transform:none}

/* H6 / P2 / F2 — rail fill */
html.anim .rail div{color:var(--silver-2);transition:color .34s ease,background .34s ease;
  transition-delay:calc(var(--c,0) * 130ms)}
html.anim .rail div::before{opacity:0;transition:opacity .34s ease;
  transition-delay:calc(var(--c,0) * 130ms)}
html.anim .rail.lit div{color:var(--chalk)}
html.anim .rail.lit div::before{opacity:.9}

/* H7 — next-play card hover */
.card{position:relative;top:0;transition:background .2s,border-color .2s,top .28s cubic-bezier(.2,.8,.3,1)}
a.card:hover{top:-5px}
a.card .k{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.3,1),color .2s}
a.card:hover .k{transform:translateX(6px)}

/* E1 — season scrub */
.srow{position:relative}
.srow::before{content:"";position:absolute;left:-14px;top:14%;width:2px;height:72%;
  background:var(--flex);transform:scaleY(var(--p,0));transform-origin:top;
  transition:transform .12s linear;border-radius:2px}
@media(max-width:820px){.srow::before{left:-8px}}
html:not(.anim) .srow::before{display:none}

/* E2 — row hover panel */
.rowpanel{position:fixed;z-index:60;width:210px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;
  border:1px solid rgba(237,11,94,.5);pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.9);transition:opacity .25s,transform .25s cubic-bezier(.2,.8,.3,1);
  background:linear-gradient(158deg,#3A1020,#0C0509)}
.rowpanel.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.rowpanel span{position:absolute;left:10px;bottom:9px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
@media (pointer:coarse){.rowpanel{display:none}}

/* E3 — gallery entrance */
html.anim .gallery > .slot{opacity:0;transform:scale(.94);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 40ms)}
html.anim .gallery > .slot.in{opacity:1;transform:none}

/* E4 — gallery hover */
.gallery > .slot{will-change:transform}
.gallery > .slot .cap{transition:transform .3s cubic-bezier(.2,.8,.3,1),color .3s}
.gallery > .slot:hover{border-color:rgba(237,11,94,.5)}
.gallery > .slot:hover .cap{transform:translateY(-3px);color:var(--chalk)}
.gallery > .slot::before{transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.gallery > .slot:hover::before{transform:scale(1.06)}

/* E5 — pillar counter */
.pnum{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;color:var(--flex);
  margin-bottom:2px;font-variant-numeric:tabular-nums}

/* A1 — tunnel hover bloom */
.tunnel .bg::before{transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.3,1)}
.tunnel:hover .bg::before{opacity:1;transform:scale(1.12)}
.tunnel .nm,.tunnel .tl{transition:transform .45s cubic-bezier(.2,.8,.3,1)}
.tunnel:hover .nm{transform:translateY(-6px)}
.tunnel:hover .tl{transform:translateY(-3px)}

/* A2 — tunnel tilt (JS-driven; disables the CSS lift while active) */
.tunnel.tilt{transition:transform .35s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d}
.tunnel.tilt:hover{transform:none}

/* A3 — skills ticker */
.tick{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tick .tkt{display:flex;width:max-content;animation:tickmove 26s linear infinite}
.tick .tkt > span{padding-right:0;white-space:nowrap}
@keyframes tickmove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tick:hover .tkt{animation-play-state:paused}

/* A4 / P3 — data-row cascade */
html.anim .rows.seq > div{opacity:0;transform:translateX(-16px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 55ms)}
html.anim .rows.seq > div.in{opacity:1;transform:none}
html.anim .rows.seq > div span:last-child{opacity:0;transition:opacity .45s ease;
  transition-delay:calc(var(--i,0) * 55ms + 200ms)}
html.anim .rows.seq > div.in span:last-child{opacity:1}

/* F1 — impact odometer */
.odo{font-variant-numeric:tabular-nums}

/* F2 — chain sequence */
html.anim .chain.seqc > span{opacity:0;transform:translateY(5px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 160ms)}
html.anim .chain.seqc.in > span{opacity:1;transform:none}

/* F3 — warm ambient */
#v-flex-for-good .herobg::before{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.82}50%{opacity:1}}
html:not(.anim) #v-flex-for-good .herobg::before{animation:none}

/* P1 — pillar cascade */
html.anim .pillars > .pillar{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.3,1);
  transition-delay:calc(var(--i,0) * 65ms)}
html.anim .pillars > .pillar.in{opacity:1;transform:none}

/* P4 — border trace on hover */
.card.trace{position:relative;overflow:hidden}
.card.trace i.tr{position:absolute;background:var(--flex);opacity:0;transition:transform .26s linear,opacity .1s}
.card.trace i.t1{left:0;top:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left}
.card.trace i.t2{right:0;top:0;width:2px;height:100%;transform:scaleY(0);transform-origin:top}
.card.trace i.t3{left:0;bottom:0;height:2px;width:100%;transform:scaleX(0);transform-origin:right}
.card.trace i.t4{left:0;top:0;width:2px;height:100%;transform:scaleY(0);transform-origin:bottom}
.card.trace:hover i.tr{opacity:1}
.card.trace:hover i.t1{transform:scaleX(1)}
.card.trace:hover i.t2{transform:scaleY(1);transition-delay:.26s}
.card.trace:hover i.t3{transform:scaleX(1);transition-delay:.52s}
.card.trace:hover i.t4{transform:scaleY(1);transition-delay:.78s}

/* J1 — floating field label */
@supports selector(:has(*)){
  html.anim .field.flt{position:relative;padding-top:0}
  html.anim .field.flt label{position:absolute;left:16px;top:15px;pointer-events:none;
    transform-origin:left top;font-size:12px;letter-spacing:.06em;color:var(--silver-2);
    transition:transform .28s cubic-bezier(.2,.8,.3,1),color .28s;z-index:1}
  html.anim .field.flt:has(input:focus) label,
  html.anim .field.flt:has(input:not(:placeholder-shown)) label,
  html.anim .field.flt:has(select) label{transform:translateY(-13px) scale(.84);color:var(--flex)}
  html.anim .field.flt input,html.anim .field.flt select{padding:22px 15px 9px}
  html.anim .field.flt input::placeholder{opacity:0;transition:opacity .2s}
  html.anim .field.flt input:focus::placeholder{opacity:1}
}

/* J2 — progressive reveal */
html.anim .field.hid{display:none}
html.anim .field.show{animation:fieldin .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes fieldin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* J3 — submit fill */
.subwrap{position:relative;overflow:hidden;border-radius:9px}
.subwrap .fillbar{position:absolute;inset:0;background:var(--flex-hot);transform:scaleX(0);
  transform-origin:left;transition:transform .65s cubic-bezier(.5,0,.3,1);pointer-events:none}
.subwrap.sent .fillbar{transform:scaleX(1)}

/* J4 — video CTA pulse */
html.anim #v-join .slot.r219 .pring{position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid var(--flex);animation:cta 2.1s ease-in-out infinite;pointer-events:none}
@keyframes cta{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.28);opacity:0}}

/* ---------- CMS: real media inside an asset slot ---------- */
.slot.has-img::before,.slot.has-img::after{opacity:.28}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}
.slot.has-img .cap,.slot.has-img .tag{z-index:3}
.slot.has-img .cap{text-shadow:0 1px 8px rgba(0,0,0,.85)}
.slot.has-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(10,4,9,.72) 100%);mix-blend-mode:normal}
.tunnel[style*="background-image"] .bg::before{opacity:.55}