:root{
  --paper:#F4F5F1; --ink:#121412; --muted:#5A6058; --line:#D9DCD5; --surface:#FFFFFF;
  --accent:#2E45D8; --court:#2E45D8; --kitchen:#2539BC; --court-ink:#F6F7FF; --court-line:#FFFFFF; --net:#0B1336;
  --display:"Archivo","Arial Black",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E100F; --ink:#ECEEE9; --muted:#9BA198; --line:#2A2E2B; --surface:#161917;
    --accent:#8A97FF; --court:#2A3FC4; --kitchen:#22349F; --court-ink:#F3F4FF; --court-line:#E9ECFF; --net:#04061A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E100F; --ink:#ECEEE9; --muted:#9BA198; --line:#2A2E2B; --surface:#161917;
  --accent:#8A97FF; --court:#2A3FC4; --kitchen:#22349F; --court-ink:#F3F4FF; --court-line:#E9ECFF; --net:#04061A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.page{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:8px 28px}
.mark{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:16px;letter-spacing:.04em}
.status{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 12px;border-radius:999px;background:var(--surface)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
@media (prefers-reduced-motion: no-preference){.dot{animation:ping 2.2s ease-out infinite}}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}

/* Hero */
.hero{display:grid;gap:18px;padding-block:12px 36px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0}
h1{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(40px,8.2vw,104px);line-height:.92;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(17px,1.9vw,20px);max-width:60ch;margin:0}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cta{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--paper);border:1.5px solid var(--ink)}
.cta.ghost{background:transparent;color:var(--ink)}
@media (hover:hover){.cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}}

/* Court */
.court-fig{margin:0 0 64px;padding-block:12px 0}
.court{position:relative;display:grid;gap:3px;padding:3px;background:var(--court-line);border-radius:6px;aspect-ratio:44/20;width:100%;max-width:100%;
  grid-template-columns:15fr 7fr 7fr 15fr;grid-template-rows:1fr 1fr;list-style:none;margin:0}
.box{background:var(--court);color:var(--court-ink);display:flex;min-width:0}
.box a{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:clamp(12px,2.2vw,26px);color:inherit;text-decoration:none;min-width:0;transition:background-color .2s}
@media (hover:hover){.box a:hover{background:color-mix(in srgb,var(--court-ink) 10%,transparent)}}
.box a:focus-visible{outline:2px solid var(--court-ink);outline-offset:-6px}
.box .foot{display:grid;gap:8px}
.box .ig{font-family:var(--mono);font-size:12px;letter-spacing:.02em;opacity:.9;overflow-wrap:anywhere}
.box .cat{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.box strong{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(24px,3.6vw,44px);line-height:.95;letter-spacing:-.01em;overflow-wrap:anywhere}
.box .desc{font-size:clamp(13px,1.3vw,15px);line-height:1.4;opacity:.88;max-width:30ch}
.b1{grid-column:1;grid-row:1}.b2{grid-column:1;grid-row:2}.b3{grid-column:4;grid-row:1}.b4{grid-column:4;grid-row:2}
.kitchen{background:var(--kitchen);display:flex;align-items:center;justify-content:center}
.kitchen span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--court-ink);opacity:.5}
.k1{grid-column:2;grid-row:1/3}.k2{grid-column:3;grid-row:1/3}
.net{position:absolute;top:-8px;bottom:-8px;left:50%;width:5px;transform:translateX(-50%);background:var(--net);border-radius:3px}
.court-fig figcaption{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px}
@media (max-width:719px){
  .court{aspect-ratio:20/44;grid-template-columns:1fr 1fr;grid-template-rows:15fr 7fr 7fr 15fr}
  .b1{grid-column:1;grid-row:1}.b2{grid-column:2;grid-row:1}.b3{grid-column:1;grid-row:4}.b4{grid-column:2;grid-row:4}
  .k1{grid-column:1/3;grid-row:2}.k2{grid-column:1/3;grid-row:3}
  .kitchen span{writing-mode:horizontal-tb;transform:none}
  .net{top:50%;bottom:auto;left:-8px;right:-8px;width:auto;height:5px;transform:translateY(-50%)}
  .box strong{font-stretch:110%}
}

/* Section heads */
.sec-label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
h2{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(28px,4.4vw,52px);line-height:1;letter-spacing:-.015em;margin:0;text-wrap:balance}
section{scroll-margin-top:16px}

/* Why */
.why{display:grid;gap:22px;padding-block:8px 72px}
.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.why-grid > div{border-top:2px solid var(--ink);padding-top:14px}
.why-grid h3{font-family:var(--display);font-stretch:112%;font-weight:750;font-size:18px;line-height:1.2;margin:0 0 6px}
.why-grid p{margin:0;color:var(--muted)}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.why-grid{grid-template-columns:1fr}}

/* Roles */
.roles-head{display:grid;gap:16px;padding-bottom:8px}
.index{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.index a{display:inline-block;text-decoration:none;color:var(--ink);border:1px solid var(--line);background:var(--surface);padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px}
@media (hover:hover){.index a:hover{border-color:var(--accent);color:var(--accent)}}
.role{border-top:3px solid var(--ink);padding-block:28px 40px;display:grid;gap:20px;scroll-margin-top:16px}
.role-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 24px}
.role-head > div{min-width:0}
.tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.role-title{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(30px,5vw,58px);line-height:.95;letter-spacing:-.02em;margin:0;text-wrap:balance}
.facts{display:grid;gap:8px;justify-items:start}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:0}
.brands{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0}
.brands li{font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--paper));color:var(--accent)}
.pitch{font-size:clamp(19px,2.2vw,24px);line-height:1.35;margin:0;max-width:46ch;font-weight:500;text-wrap:pretty}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.cols h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.cols ul,.needs{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.cols li,.needs li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.45}
.cols li::before,.needs li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--accent);border-radius:1px}
.role-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding-top:4px}
.tools{font-size:14px;color:var(--muted);margin:0;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline}
.tools b{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:600}
@media (max-width:860px){.cols{grid-template-columns:1fr}}

.btn{font:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn.solid{background:var(--ink);color:var(--paper)}
@media (hover:hover){.btn.solid:hover{background:var(--accent);border-color:var(--accent);color:#fff}}

/* Process */
.process{padding-block:72px 24px;display:grid;gap:24px}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.steps li{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:16px;display:grid;gap:6px;align-content:start}
.steps .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.steps strong{font-family:var(--display);font-stretch:112%;font-weight:750;font-size:17px}
.steps span:last-child{font-size:14px;color:var(--muted)}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* Apply */
.apply{margin-top:40px;border:1.5px solid var(--ink);border-radius:12px;background:var(--surface);padding:clamp(20px,4vw,40px);display:grid;gap:26px}
.apply-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:36px}
@media (max-width:900px){.apply-grid{grid-template-columns:1fr}}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0;align-content:start}
.field.full{grid-column:1/-1}
.field label,.field .lbl{font-size:13.5px;font-weight:600}
.req{color:var(--accent)}
.field input,.field select,.field textarea{font:inherit;font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);width:100%;min-width:0}
.field textarea{min-height:96px;resize:vertical}
.field input[type=file]{padding:9px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.check{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14px}
.check input{margin-top:4px;accent-color:var(--accent)}
.submit-row{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.form-note{font-size:14px;margin:0;padding:12px 14px;border-radius:8px;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface));grid-column:1/-1}
aside.side{display:grid;gap:24px;align-content:start}
aside.side > div{border-top:1px solid var(--line);padding-top:16px}
aside.side p{margin:0}
address{font-style:normal;font-size:16px;line-height:1.5;margin:6px 0 12px}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:28px;margin-top:48px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}

/* Live form states (added for deployment) */
body{margin:0}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.err{font-size:12.5px;font-weight:600;color:#C2261B;margin:0}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C2261B}
.check.invalid{color:#C2261B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .err{color:#FF8A80}}
:root[data-theme="dark"] .err{color:#FF8A80}
.progress{grid-column:1/-1;display:grid;gap:6px}
.progress[hidden]{display:none}
.bar{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.bar span{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.progress .hint{font-family:var(--mono)}
.btn[disabled]{opacity:.55;cursor:progress}
.done{display:grid;gap:12px;align-content:start;padding:8px 0}
.done strong{font-family:var(--display);font-stretch:125%;font-weight:850;font-size:clamp(26px,3.6vw,40px);line-height:1;letter-spacing:-.015em}
.done p{margin:0;font-size:17px;max-width:44ch}

/* Compact application form (v3) */
.apply{gap:20px;padding:clamp(18px,3vw,32px)}
.apply-grid{grid-template-columns:1fr;gap:24px}
.form{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px;align-items:end}
.field.s{grid-column:span 2}
.field.m,.field.l{grid-column:span 3}
.field{gap:5px}
.field label,.field .lbl{font-size:13px}
.field input,.field select,.field textarea{font-size:15px;padding:9px 11px}
.field textarea{min-height:84px}
.field.l{align-self:stretch;align-content:start}
.field.m:has(input[type=file]){align-self:start}
.opt{font-weight:500;color:var(--muted)}
.hint{font-size:12px}
.check{font-size:13.5px}
aside.side{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
aside.side > div{padding-top:12px}
address{font-size:15px;margin:4px 0 10px}
@media (max-width:820px){
  .form{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
  .field.s{grid-column:span 1}
  .field.m,.field.l{grid-column:1/-1}
  aside.side{grid-template-columns:1fr}
}
@media (max-width:330px){ .field.s{grid-column:1/-1} }

/* Motion (v3) */
.ball{display:none}
@media (prefers-reduced-motion: no-preference){
  .hero > *{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero > :nth-child(2){animation-delay:.08s}
  .hero > :nth-child(3){animation-delay:.18s}
  .hero > :nth-child(4){animation-delay:.28s}
  @keyframes rise{from{transform:translateY(16px)}to{transform:none}}

  .court .box{animation:land .6s cubic-bezier(.2,.8,.2,1) both}
  .court .b1{animation-delay:.25s}.court .b2{animation-delay:.35s}.court .b3{animation-delay:.45s}.court .b4{animation-delay:.55s}
  @keyframes land{from{transform:translateY(12px) scale(.97)}to{transform:none}}
  .court .net{animation:net .6s .7s cubic-bezier(.3,1.4,.5,1) both}
  @keyframes net{from{transform:translateX(-50%) scaleY(.2)}to{transform:translateX(-50%) scaleY(1)}}
  .box{transition:transform .25s ease}
  @media (hover:hover){.box:hover{transform:translateY(-3px)}}

  /* A pickleball rallying over the net */
  .ball{display:block;position:absolute;width:clamp(12px,1.6vw,18px);aspect-ratio:1;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 35% 35%,#F4FF7A,#D4E600 60%,#A9B800);box-shadow:0 2px 6px rgba(0,0,0,.35);
    top:50%;left:12%;margin:-9px 0 0 -9px;animation:rally 5.5s 1.4s ease-in-out infinite both}
  @keyframes rally{
    0%{left:12%;top:68%}
    25%{left:50%;top:18%}
    50%{left:88%;top:62%}
    75%{left:50%;top:22%}
    100%{left:12%;top:68%}
  }
  @media (max-width:719px){
    .ball{animation-name:rally-v}
    @keyframes rally-v{
      0%{top:12%;left:70%}
      25%{top:50%;left:22%}
      50%{top:88%;left:62%}
      75%{top:50%;left:30%}
      100%{top:12%;left:70%}
    }
  }

  .dot{animation-duration:1.8s}

  /* Sections ease in as you scroll, where the browser supports it */
  @supports (animation-timeline: view()){
    .why-grid > div,.role,.steps li{animation:fade-up linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes fade-up{from{opacity:.7;transform:translateY(20px)}to{opacity:1;transform:none}}
  }
  .cta,.btn{transition:background-color .2s,border-color .2s,color .2s,transform .2s}
  @media (hover:hover){.cta:hover,.btn.solid:hover{transform:translateY(-1px)}}
}
@media (prefers-reduced-motion: no-preference) and (max-width:719px){
  .court .net{animation-name:net-h}
  @keyframes net-h{from{transform:translateY(-50%) scaleX(.2)}to{transform:translateY(-50%) scaleX(1)}}
}
@media (max-width:820px) and (min-width:331px){ .field.m:has(#f-ig){grid-column:span 1} }

/* Full-width field (v4) */
.field.f{grid-column:1/-1}