:root{
  --bg:#050506; --ink:#fbf8ff; --soft:#c4bbd3; --raise:#12101a;
  --cyan:#22d3ee; --mag:#ec4899; --grn:#ff7f50; --vio:#a855f7; /* taste-skill-ignore: Puck It brand violet */ --gold:#f6c445;
  --display:"Anton", Impact, "Arial Narrow", sans-serif;
  --text:"Archivo", Arial, Helvetica, sans-serif;
  --m:clamp(16px, 2vw, 28px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:18px;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#000;padding:10px 14px;z-index:50}
.skip:focus{left:8px}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;line-height:.9}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:0 30px;font-family:var(--text);font-weight:700;font-size:18px;text-decoration:none;color:#000;border:0;cursor:pointer;transition:transform .18s var(--ease), background-color .18s}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-mag{background:var(--cyan)} .btn-mag:hover{background:#67e8f9}
.btn-cyan{background:var(--cyan)} .btn-cyan:hover{background:#67e8f9}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:18px var(--m)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:26px;text-transform:uppercase;color:#000}
.brand img{width:64px;height:64px;display:block}
.nav nav{display:flex;gap:26px;align-items:center}
.nav nav a{text-decoration:none;font-weight:700;color:#000;font-size:17px;transition:opacity .15s}
.nav nav a:hover{opacity:.6}
.nav .nav-cta{background:#000;color:var(--ink);padding:12px 18px}
.nav .nav-cta:hover{opacity:1;background:#1d1a26}

/* hero */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-rows:82fr 18fr;overflow:hidden}
.hero-field{background:var(--cyan);position:relative}
.hero-title{position:relative;z-index:1;color:#000;font-size:clamp(80px,12.6vw,200px);line-height:.98;padding:16vh var(--m) 0;display:flex;flex-direction:column}
.hero-photo{position:absolute;z-index:2;right:15vw;bottom:-9vh;width:30vw;aspect-ratio:3/4;transform:rotate(5deg)}
.hero-photo img{width:100%;height:100%;object-fit:cover;border-radius:999px 999px 0 0;aspect-ratio:3/4}
.hero-band{background:var(--bg);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px var(--m) 20px;position:relative;z-index:1}
.hero-band .btn{position:relative;z-index:3}
.hero-band p{max-width:46ch;font-size:20px;line-height:1.4}

/* about */
.about{padding:150px var(--m) 140px}
.about-title{font-size:clamp(48px,6.4vw,104px);margin-bottom:56px;max-width:14ch}
.about-cols{columns:2;column-gap:40px;font-size:clamp(20px,1.85vw,28px);line-height:1.28;color:var(--ink)}
.about-cols p{text-align:justify;hyphens:auto;break-inside:avoid}
.about-cols strong{font-weight:700}
.about-cols p+p{margin-top:1em}
mark{color:#000;padding:0 .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hl-cyan{background:var(--cyan)} .hl-mag{background:#fbf8ff} .hl-grn{background:var(--grn)} .hl-gold{background:var(--gold)} .hl-vio{background:var(--vio)}
.about-close{margin-top:1em;text-align:left!important;font-weight:700}
.about-close a{text-decoration:none}
.about-close a:hover mark{background:var(--ink)}

/* values fan */
.values{position:relative;height:220svh;background:var(--raise)}
.values-stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:110px var(--m) 40px}
.values-head{max-width:900px}
.values-head h2{font-size:clamp(40px,4.4vw,68px)}
.values-head p{margin-top:12px;font-size:18px}
.fan{position:absolute;left:50%;top:56%;width:1090px;height:420px;transform:translate(-50%,-50%)}
.card{position:absolute;top:0;width:340px;height:420px;padding:28px;color:#000;display:flex;flex-direction:column;justify-content:space-between;transition:transform .7s var(--ease), opacity .5s;will-change:transform}
.card h3{font-size:52px;max-width:200px}
.card img{width:200px;aspect-ratio:4/3;object-fit:cover}
.card p{font-size:17px;line-height:1.35;max-width:200px;font-weight:500}
.c-cyan{background:var(--cyan)} .c-mag{background:var(--vio)} .c-grn{background:var(--grn)} .c-gold{background:var(--gold)}
.card:nth-child(1){left:0;transform:rotate(-3deg)}
.card:nth-child(2){left:250px;transform:rotate(2deg)}
.card:nth-child(3){left:500px;transform:rotate(-2deg)}
.card:nth-child(4){left:750px;transform:rotate(3deg)}
.js .card.pending{transform:translateY(110vh) rotate(8deg);opacity:0}
.js .card:nth-child(1).pending{transform:none;opacity:1}

/* verbs */
.verb-panel{position:relative;height:100svh;overflow:hidden;background:#000}
.verb-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transform:scale(1.06);transition:transform 6s linear}
.verb-panel.in>img{transform:scale(1)}
.verb-sticky{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.verb{font-size:clamp(96px,17vw,300px);color:var(--ink);line-height:1}
.verb-panel:nth-child(1) .verb{color:var(--cyan)}
.verb-panel:nth-child(2) .verb{color:var(--gold)}
.verb-panel:nth-child(3) .verb{color:var(--grn)}
.verb-note{position:absolute;left:var(--m);bottom:var(--m);max-width:44ch;font-size:18px;background:rgba(5,5,6,.82);padding:18px 20px}

/* programs */
.programs{background:var(--grn);color:#000;padding:130px var(--m) 140px}
.programs-title{font-size:clamp(56px,8vw,128px)}
.programs-lede{font-size:20px;margin-top:14px;max-width:40ch}
.fit{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.fit-btn{font:700 17px var(--text);background:#000;color:var(--ink);border:0;min-height:52px;padding:0 20px;cursor:pointer;transition:transform .15s var(--ease), background-color .15s}
.fit-btn:hover{transform:translateY(-2px)}
.fit-btn[aria-pressed="true"]{background:var(--cyan);color:#000}
.fit-result{min-height:1.5em;margin-top:18px;font-size:18px;font-weight:700}
.fit-result a{color:#000}
.lineup{margin-top:40px}
.lineup-head{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.4vw,36px);margin:56px 0 18px}
.lineup-head:first-child{margin-top:12px}
.levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.level,.squad{background:#050506;color:#fbf8ff;transition:opacity .25s,transform .25s,box-shadow .25s}
.level{padding:26px 24px 24px;display:flex;flex-direction:column;justify-content:space-between;min-height:220px}
.lv{font-family:var(--display);font-size:clamp(72px,7vw,112px);line-height:1;color:var(--cyan)}
.lv-meta{font-size:15px;line-height:1.45;color:#c4bbd3;margin-top:24px}
.nw{white-space:nowrap}
.squad{margin-top:56px;padding:34px 32px;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:32px;align-items:center}
.squad-name{font-weight:400;font-family:var(--display);text-transform:uppercase;font-size:clamp(48px,5vw,80px);line-height:1;color:var(--vio)}
.squad-copy{font-size:clamp(18px,1.6vw,23px);line-height:1.4;max-width:46ch}
.lineup.filtering [data-fits]:not(.match){opacity:.3}
.lineup [data-fits].match{outline:4px solid var(--cyan);outline-offset:-4px}

/* faq */
.faq .band{display:grid;grid-template-columns:5fr 1fr 6fr;padding:56px var(--m);background:var(--bg)}
.faq .band.alt{background:var(--raise)}
.faq .band h3{grid-column:1;font-family:var(--text);text-transform:none;font-weight:700;font-size:clamp(24px,2.1vw,32px);line-height:1.15;letter-spacing:0}
.faq .band p{grid-column:3;font-size:18px;line-height:1.55}
.faq .band-head{background:var(--cyan);color:#000;min-height:40svh;display:flex;align-items:flex-end}
.faq .band-head h2{font-size:clamp(56px,7vw,120px)}

/* cta */
.cta{min-height:100svh;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:40px var(--m) 32px;text-align:center}
.cta-title{display:contents}
.cta-title span{font-family:var(--display);font-size:clamp(96px,11vw,170px);line-height:1;color:var(--ink)}
.cta-title span:last-child{color:var(--cyan)}
.cta-row{display:flex;align-items:center;gap:40px}
.cta-row .btn{min-width:220px}
.or{color:var(--soft);font-size:18px}
.cta-note{color:var(--soft);font-size:16px}
.cta-title span:first-child{order:0}.cta-mid{order:1}.cta-title span:last-child{order:2}
.cta-mid{display:flex;flex-direction:column;align-items:center;gap:20px}

/* footer */
.foot{display:grid;grid-template-columns:1fr 1fr;min-height:100svh;background:var(--vio);color:#000}
.foot-photo{overflow:hidden}
.foot-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.foot-menu{padding:70px var(--m) 28px 7vw;display:flex;flex-direction:column}
.foot-logo{display:flex;align-items:center;gap:16px;margin-bottom:44px;text-decoration:none;font-family:var(--display);text-transform:uppercase;font-size:30px;line-height:.95}
.foot-logo img{width:180px;height:180px;display:block}
.foot-menu nav{display:flex;flex-direction:column;gap:18px}
.foot-menu nav a{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,3vw,52px);line-height:1;text-decoration:none;transition:transform .2s var(--ease), opacity .2s}
.foot-menu nav:hover a{opacity:.55}
.foot-menu nav a:hover{opacity:1;transform:translateX(12px)}
.foot-blocks{display:flex;gap:48px;margin-top:56px;font-size:16px;font-weight:500}
.foot-blocks a{font-weight:700}
.legal{margin-top:auto;padding-top:40px;font-size:14px}

/* reveal */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.shutter img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.1s var(--ease), transform 1.4s var(--ease)}
.shutter.open img{clip-path:inset(0 0 0 0);transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .shutter img{clip-path:none;transform:none}
  .js .card.pending{transform:none;opacity:1}
}

/* tablet */
@media (max-width:1180px){
  .hero-photo{right:var(--m);bottom:22vh;width:34vw}
  .values{height:auto}
  .values-stage{position:static;height:auto;padding:110px 0 100px}
  .values-head{padding:0 var(--m)}
  .fan{position:static;transform:none;width:auto;height:auto;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px var(--m) 10px}
  .card{position:relative;left:auto!important;transform:none!important;opacity:1!important;flex:0 0 min(82vw,340px);scroll-snap-align:start}
}
/* phone */
@media (max-width:760px){
  body{font-size:17px}
  .nav nav a:not(.nav-cta){display:none}
  .brand{font-size:22px}
  .hero{grid-template-rows:74fr 26fr}
  .hero-title{font-size:19vw;padding-top:15vh}
  .hero-photo{width:54vw;right:-8vw;top:auto;bottom:4vh}

  .hero-band{flex-direction:column;align-items:stretch;justify-content:center;padding:22px 16px}
  .hero-band p{font-size:18px}
  .hero-band .btn{width:100%}
  .about{padding:100px 18px}
  .about-cols{columns:1;font-size:20px;line-height:1.3}
  .about-cols p{text-align:left;hyphens:manual}
  .about-close{margin-top:24px}
  .about-close a{display:block}
  .verb{font-size:24vw}
  .verb-note{left:0;right:0;bottom:0;max-width:none;font-size:16px;padding:18px 16px}
  .programs{padding:90px 16px 100px}
  .programs-title{font-size:15vw}
  .levels{grid-template-columns:1fr 1fr;gap:10px}
  .level{min-height:170px;padding:20px 18px}
  .lv{font-size:64px}
  .lv-meta{font-size:13px}
  .squad{grid-template-columns:1fr;gap:14px;padding:26px 22px;margin-top:36px}
  .squad-name{font-size:44px}
  .fit-btn{flex:1 1 calc(50% - 10px);font-size:15px;padding:0 10px}
  .faq .band{display:block;padding:32px 20px}
  .faq .band h3{font-size:22px;margin-bottom:12px}
  .faq .band p{font-size:17px}
  .faq .band-head{min-height:30svh}
  .faq .band-head h2{font-size:13vw}
  .cta-title span{font-size:18vw}
  .cta-row{flex-direction:column;gap:12px;width:72%;margin:0 auto}
  .cta-row .btn{width:100%;min-width:0}
  .cta-mid{width:100%}
  .cta{min-height:80svh}
  .foot{grid-template-columns:1fr}
  .foot-photo{height:50svh}
  .foot-menu{padding:48px 16px 24px}
  .foot-menu nav a{font-size:8vw}
  .foot-blocks{flex-direction:column;gap:18px}
}