/* ==========================================================================
   PADEL WITH YSA — LA CAJA / THE GLASS BOX
   Padel is the only racket sport played inside a glass box, and the walls are
   in play. The whole site is that enclosure: hairline court frames, steel
   corner posts, fence mesh in the gaps, floodlight blue rising off the floor,
   and a lime ball for a cursor.
   Palette + light are pulled from Ysa's own night-match photography.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --ink:        #05070A;
  --ink-2:      #090D14;
  --ink-3:      #0E141E;
  --court:      #1F5CFF;
  --court-lit:  #4D82FF;
  --court-deep: #071A4D;
  --ball:       #E2FF4F;
  --ball-dim:   #A9C22F;
  --paper:      #EDF1F7;
  --paper-ink:  #0A0D13;

  --text:       #E8EDF5;
  --muted:      rgba(232,237,245,.58);
  --faint:      rgba(232,237,245,.34);
  --line:       rgba(190,214,255,.17);
  --line-soft:  rgba(190,214,255,.09);
  --glass:      rgba(160,195,255,.045);
  --glass-2:    rgba(160,195,255,.085);

  --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ff-body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --gut:  clamp(20px, 4.4vw, 76px);
  --maxw: 1520px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 74px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.62;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, NEVER hidden — overflow-x:hidden silently kills position:sticky */
  overflow-x:clip;
}
img,svg,video,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,h5,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--ball); color:var(--ink); }

:focus-visible{ outline:2px solid var(--ball); outline-offset:3px; border-radius:2px; }

/* ---------- type ---------- */
.d1,.d2,.d3,.d4{
  font-family:var(--ff-display);
  font-weight:900;
  font-stretch:118%;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.018em;
  margin:0;
}
.d1{ font-size:clamp(46px, 10.4vw, 168px); }
.d2{ font-size:clamp(34px, 6.2vw, 92px); }
.d3{ font-size:clamp(26px, 3.5vw, 50px); line-height:.95; }
.d4{ font-size:clamp(19px, 2.1vw, 30px); line-height:1.02; letter-spacing:-.01em; }

/* condensed micro-label — same family, other end of the width axis */
.lab{
  font-family:var(--ff-display);
  font-weight:700;
  font-stretch:66%;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.3em;
  color:var(--faint);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  line-height:1;
}
.lab::before{
  content:"";
  width:16px; height:1px;
  background:var(--ball);
  flex:0 0 auto;
}
.lab.no-rule::before{ display:none; }

.lede{ font-size:clamp(16px,1.35vw,20px); line-height:1.6; color:var(--muted); max-width:min(660px,92vw); }
.body-copy p + p{ margin-top:1.1em; }
strong{ font-weight:600; color:var(--text); }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.sec{ position:relative; padding-block:clamp(76px,10vw,168px); }
.sec-tight{ padding-block:clamp(52px,6vw,96px); }

/* fence mesh — the court's steel netting, used in the gaps */
.mesh{ position:relative; }
.mesh::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(45deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(-45deg, var(--line-soft) 1px, transparent 1px);
  background-size:26px 26px;
  opacity:.5;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 50%, #000 20%, transparent 78%);
}

/* floodlight — blue light rising off the court floor */
.floodlit{ position:relative; isolation:isolate; }
.floodlit::after{
  content:"";
  position:absolute; left:50%; bottom:-40%;
  width:min(1400px,140vw); aspect-ratio:2/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(31,92,255,.20), transparent 66%);
  pointer-events:none; z-index:-1;
}

/* ---------- the glass frame (the box itself) ---------- */
.court{
  position:relative;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(2px);
}
.court::before,.court::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
  border:1px solid var(--court-lit); background:var(--ink);
}
.court::before{ left:-5px; top:-5px; box-shadow:calc(100% + 0px) 0 0 -1px var(--ink); }
.court::after{ right:-5px; bottom:-5px; }
/* the other two posts */
.court > .post-tr,.court > .post-bl{
  position:absolute; width:9px; height:9px; border:1px solid var(--court-lit);
  background:var(--ink); pointer-events:none;
}
.court > .post-tr{ right:-5px; top:-5px; }
.court > .post-bl{ left:-5px; bottom:-5px; }

/* the frame draws itself on reveal — NEVER clip-path on an IO target
   (a clip-path-hidden element has zero area, never intersects, deadlocks) */
.court.draw{ border-color:transparent; transition:border-color .01s .55s; }
.court.draw > .rule{ position:absolute; background:var(--line); pointer-events:none; }
.court.draw > .rule.t{ top:-1px; left:-1px; height:1px; width:0; }
.court.draw > .rule.b{ bottom:-1px; right:-1px; height:1px; width:0; }
.court.draw > .rule.l{ left:-1px; bottom:-1px; width:1px; height:0; }
.court.draw > .rule.r{ right:-1px; top:-1px; width:1px; height:0; }
.court.draw.in{ border-color:var(--line); }
.court.draw.in > .rule.t,.court.draw.in > .rule.b{ width:calc(100% + 2px); transition:width .62s var(--ease-out); }
.court.draw.in > .rule.l,.court.draw.in > .rule.r{ height:calc(100% + 2px); transition:height .62s var(--ease-out) .12s; }
.court.draw > .post-tr,.court.draw > .post-bl,
.court.draw::before,.court.draw::after{ opacity:0; transition:opacity .3s .58s; }
.court.draw.in > .post-tr,.court.draw.in > .post-bl,
.court.draw.in::before,.court.draw.in::after{ opacity:1; }

/* ---------- reveals ---------- */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .78s var(--ease-out), transform .78s var(--ease-out); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.08s } .rv-d2{ transition-delay:.16s } .rv-d3{ transition-delay:.24s }
.rv-d4{ transition-delay:.32s } .rv-d5{ transition-delay:.40s } .rv-d6{ transition-delay:.48s }

/* curtain wipe — safe alternative to clip-path reveals */
.curtain{ position:relative; overflow:hidden; }
.curtain::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  transform-origin:right; transition:transform .82s var(--ease-out);
}
.curtain.in::after{ transform:scaleX(0); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--ball); --fg:var(--ink);
  position:relative; display:inline-flex; align-items:center; gap:.75em;
  padding:15px 26px;
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-display); font-weight:800; font-stretch:88%;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase;
  border:0; cursor:pointer; overflow:hidden;
  transition:transform .3s var(--ease), color .3s var(--ease);
}
.btn span{ position:relative; z-index:1; }
.btn::after{
  content:""; position:absolute; inset:0; background:var(--court);
  transform:translateY(101%); transition:transform .42s var(--ease-out); z-index:0;
}
.btn:hover{ color:#fff; }
.btn:hover::after{ transform:translateY(0); }
.btn:active{ transform:scale(.975); }
.btn .arw{ position:relative; z-index:1; width:14px; height:9px; }

.btn-ghost{ --bg:transparent; --fg:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ color:var(--ink); }
.btn-ghost::after{ background:var(--ball); }

.btn-blue{ --bg:var(--court); --fg:#fff; }
.btn-blue::after{ background:var(--ball); }
.btn-blue:hover{ color:var(--ink); }

/* text link with a court-line underline that serves in from the left */
.tlink{ position:relative; display:inline-block; padding-bottom:2px; }
.tlink::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--ball); transform:scaleX(0); transform-origin:right;
  transition:transform .38s var(--ease-out);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ==========================================================================
   NAV — the court is symmetric about the net, so the bar is too:
   three links, the mark, three links. (A logo-left / links-right / CTA-right
   header is the default shape and is banned on client sites.)
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(5,7,10,.74);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line-soft);
}
.nav .wrap{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,3vw,48px);
}

.nav-side{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); min-width:0; }
.nav-side.left{ justify-content:flex-end; }
.nav-side.right{ justify-content:flex-start; }
.nav-side a{
  font-family:var(--ff-display); font-weight:700; font-stretch:70%;
  font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:6px 0; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav-side a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--ball); transform:scaleX(0); transform-origin:right;
  transition:transform .34s var(--ease-out);
}
.nav-side a:hover{ color:var(--text); }
.nav-side a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-side a[aria-current="page"]{ color:var(--ball); }
.nav-side a[aria-current="page"]::after{ transform:scaleX(1); }

/* the mark sits on the centre line like the net post */
.brand{ position:relative; display:flex; align-items:center; gap:11px; justify-self:center; padding-bottom:3px; }
.brand .ball-mk{ width:19px; height:19px; flex:0 0 auto; }
.brand b{
  font-family:var(--ff-display); font-weight:800; font-stretch:76%;
  font-size:14px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.brand .post{
  position:absolute; left:50%; bottom:-11px; width:1px; height:9px;
  background:var(--ball); transform:translateX(-50%); opacity:.75;
}

.menu-btn{
  display:none; align-items:center; gap:9px; justify-self:end;
  background:transparent; border:1px solid var(--line);
  padding:10px 15px; cursor:pointer;
  font-family:var(--ff-display); font-weight:700; font-stretch:70%;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.menu-btn .bars{ display:block; width:15px; height:9px; position:relative; }
.menu-btn .bars::before,.menu-btn .bars::after{
  content:""; position:absolute; left:0; width:100%; height:1px; background:var(--text);
  transition:transform .34s var(--ease-out);
}
.menu-btn .bars::before{ top:0 } .menu-btn .bars::after{ bottom:0 }
body.menu-open .menu-btn .bars::before{ transform:translateY(4px) rotate(45deg); }
body.menu-open .menu-btn .bars::after{ transform:translateY(-4px) rotate(-45deg); }

.menu-panel{
  position:fixed; inset:0; z-index:79;
  background:rgba(5,7,10,.97);
  backdrop-filter:blur(22px);
  padding:calc(var(--nav-h) + 24px) var(--gut) 40px;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; visibility:hidden; transition:opacity .38s var(--ease), visibility .38s;
}
body.menu-open .menu-panel{ opacity:1; visibility:visible; }
.menu-panel nav{ display:flex; flex-direction:column; gap:4px; }
.menu-panel nav a{
  font-family:var(--ff-display); font-weight:900; font-stretch:112%;
  text-transform:uppercase; font-size:clamp(30px,8.4vw,58px); line-height:1.06;
  color:var(--text); opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .25s;
}
body.menu-open .menu-panel nav a{ opacity:1; transform:none; }
.menu-panel nav a:nth-child(1){ transition-delay:.06s }
.menu-panel nav a:nth-child(2){ transition-delay:.11s }
.menu-panel nav a:nth-child(3){ transition-delay:.16s }
.menu-panel nav a:nth-child(4){ transition-delay:.21s }
.menu-panel nav a:nth-child(5){ transition-delay:.26s }
.menu-panel nav a:nth-child(6){ transition-delay:.31s }
.menu-panel nav a:hover{ color:var(--ball); }
.menu-foot{ display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:flex-end; }

@media (max-width:1040px){
  .nav .wrap{ grid-template-columns:auto 1fr auto; }
  .nav-side{ display:none; }
  .brand{ justify-self:start; grid-column:1; }
  .brand .post{ display:none; }
  .menu-btn{ display:inline-flex; grid-column:3; }
}

/* colour accent on a display word — never an italic <em> */
.hl{ color:var(--ball); font-style:normal; }

/* ==========================================================================
   HERO — the glass wall
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  /* clear the fixed nav — on a short laptop viewport the title is tall enough
     to run up underneath it otherwise */
  padding-top:calc(var(--nav-h) + 14px);
  padding-bottom:clamp(30px,5vw,74px);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media canvas,.hero-media img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 32%;
}
.hero-media img{ filter:saturate(1.05) contrast(1.06); }
.hero-media canvas{ opacity:0; transition:opacity .9s var(--ease); }
.hero-media.gl-on canvas{ opacity:1; }
.hero-media.gl-on img{ opacity:0; transition:opacity .6s .2s; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top, var(--ink) 2%, rgba(5,7,10,.72) 26%, rgba(5,7,10,.12) 58%, rgba(5,7,10,.45) 100%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(31,92,255,.22), transparent 70%);
}
.hero .wrap{ position:relative; z-index:2; width:100%; }

.hero-title{ position:relative; }
.hero-title .d1{
  color:#fff; text-shadow:0 2px 60px rgba(5,7,10,.5);
  font-size:clamp(40px, min(10.4vw, 17svh), 168px);
}
.hero-title .d1 .ln{ display:block; overflow:hidden; }
.hero-title .d1 .ln > span{
  display:block; transform:translateY(102%);
  transition:transform 1.05s var(--ease-out);
}
.hero.ready .hero-title .d1 .ln > span{ transform:none; }
.hero-title .d1 .ln:nth-child(2) > span{ transition-delay:.09s }
.hero-title .d1 .ln:nth-child(3) > span{ transition-delay:.18s }
.hero-title .d1 em{ font-style:normal; color:var(--ball); }

.hero-tag{
  margin-top:clamp(16px,2vw,26px);
  font-family:var(--ff-display); font-weight:800; font-stretch:74%;
  font-size:clamp(12px,1.15vw,15px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--ball);
  opacity:0; transform:translateY(12px);
  transition:opacity .7s .5s var(--ease-out), transform .7s .5s var(--ease-out);
}
.hero.ready .hero-tag{ opacity:1; transform:none; }

.hero-actions{
  margin-top:clamp(24px,3.2vw,42px); display:flex; flex-wrap:wrap; gap:12px;
  opacity:0; transform:translateY(12px);
  transition:opacity .7s .62s var(--ease-out), transform .7s .62s var(--ease-out);
}
.hero.ready .hero-actions{ opacity:1; transform:none; }

.hero-meta{
  margin-top:clamp(20px,3.2vw,54px);
  display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,54px);
  padding-top:20px; border-top:1px solid var(--line-soft);
  opacity:0; transition:opacity .8s .8s;
}
.hero.ready .hero-meta{ opacity:1; }
.hero-meta div{ display:flex; flex-direction:column; gap:5px; }
.hero-meta dt{
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
}
.hero-meta dd{ margin:0; font-size:14px; color:var(--text); font-weight:450; }

.scroll-hint{
  position:absolute; right:var(--gut); bottom:clamp(38px,6vw,74px); z-index:2;
  display:flex; align-items:center; gap:10px;
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
  opacity:0; transition:opacity .8s 1s;
}
.hero.ready .scroll-hint{ opacity:1; }
.scroll-hint .tick{ display:block; width:1px; height:38px; background:linear-gradient(var(--ball), transparent); }
@media (max-width:700px){ .scroll-hint{ display:none; } }

/* page hero (inner pages) — shorter */
.phero{ position:relative; padding-top:calc(var(--nav-h) + clamp(56px,9vw,120px)); padding-bottom:clamp(30px,4vw,56px); }
.phero .d1{ font-size:clamp(40px,8.4vw,124px); }

/* ==========================================================================
   SCROLL-FILL STATEMENT  (never size display type in ch — ch resolves against
   the INHERITED font, not the child's face)
   ========================================================================== */
.fill-sec{ position:relative; height:280vh; }
.fill-sticky{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(20px,3vw,40px);
  text-align:center;
}
.fill-wrap{ width:100%; max-width:1240px; padding-inline:var(--gut); margin-inline:auto; }
.fill{
  font-family:var(--ff-display); font-weight:900; font-stretch:112%;
  text-transform:uppercase;
  font-size:clamp(27px, 5.1vw, 82px);
  line-height:1.02; letter-spacing:-.02em;
  text-wrap:balance;
}
.fill w{
  display:inline-block;
  color:transparent;
  background-image:linear-gradient(90deg,
    var(--ball) 0%, var(--ball) calc(var(--wp,0) * 100%),
    rgba(232,237,245,.16) calc(var(--wp,0) * 100%), rgba(232,237,245,.16) 100%);
  -webkit-background-clip:text; background-clip:text;
  transition:filter .3s linear;
  filter:blur(calc((1 - var(--wp,0)) * .9px));
}
.fill w + w{ margin-left:.26em; }
.fill-cite{
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
}
.fill-cite b{ color:var(--muted); font-weight:700; }

/* ==========================================================================
   RALLY RAIL — scroll progress as a ball travelling the sideline
   ========================================================================== */
.rail{
  position:fixed; left:calc(var(--gut) * .42); top:0; bottom:0; width:1px; z-index:60;
  background:var(--line-soft);
  pointer-events:none;
  opacity:0; transition:opacity .5s;
}
.rail.on{ opacity:1; }
.rail b{
  position:absolute; left:50%; top:0;
  width:7px; height:7px; border-radius:50%;
  background:var(--ball);
  transform:translate(-50%,-50%);
  box-shadow:0 0 12px rgba(226,255,79,.7);
}
.rail i{
  position:absolute; left:50%; width:1px; top:0;
  background:linear-gradient(var(--ball), transparent);
  transform:translateX(-50%);
}
@media (max-width:1180px){ .rail{ display:none; } }

/* ==========================================================================
   CURSOR — the ball
   ========================================================================== */
.cur,.cur-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; will-change:transform; }
.cur{
  width:9px; height:9px; border-radius:50%; background:var(--ball);
  margin:-4.5px 0 0 -4.5px;
  box-shadow:0 0 14px rgba(226,255,79,.55);
  transition:width .22s var(--ease), height .22s var(--ease), margin .22s var(--ease), opacity .3s;
}
.cur-ring{
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(226,255,79,.42);
  transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), opacity .3s, border-color .3s;
  opacity:.75;
}
body.cur-hot .cur{ width:5px; height:5px; margin:-2.5px 0 0 -2.5px; }
body.cur-hot .cur-ring{ width:58px; height:58px; margin:-29px 0 0 -29px; border-color:var(--ball); opacity:1; }
body.cur-down .cur-ring{ width:26px; height:26px; margin:-13px 0 0 -13px; }
canvas.trail{ position:fixed; inset:0; z-index:9998; pointer-events:none; }
@media (hover:none),(pointer:coarse){ .cur,.cur-ring,canvas.trail{ display:none !important; } }

/* ==========================================================================
   LOADER — the serve
   ========================================================================== */
.load{
  position:fixed; inset:0; z-index:9000; background:var(--ink);
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:var(--gut);
  transition:opacity .6s var(--ease), visibility .6s;
}
.load.gone{ opacity:0; visibility:hidden; }
.load .lw{
  font-family:var(--ff-display); font-weight:900; font-stretch:118%;
  text-transform:uppercase; font-size:clamp(30px,7vw,86px); line-height:.88;
  color:var(--text);
}
.load .lw em{ font-style:normal; color:var(--ball); }
.load .lc{
  font-family:var(--ff-display); font-weight:900; font-stretch:66%;
  font-size:clamp(30px,7vw,86px); line-height:.88; color:var(--ball);
  font-variant-numeric:tabular-nums;
}
.load .lbar{ position:absolute; left:0; bottom:0; height:2px; background:var(--ball); width:0; }

/* ==========================================================================
   SPLIT — athlete / creator
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.split > div{ background:var(--ink); padding:clamp(26px,3.4vw,52px); position:relative; overflow:hidden; }
.split > div::before{
  content:""; position:absolute; inset:auto 0 0 0; height:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.split > div.in::before{ transform:scaleX(1); }
.split .s-a::before{ background:var(--court); }
.split .s-b::before{ background:var(--ball); }
.split h3{ margin:14px 0 10px; }
.split .big{
  font-family:var(--ff-display); font-weight:900; font-stretch:112%;
  font-size:clamp(40px,5.6vw,84px); line-height:.9; letter-spacing:-.02em;
}
.split .s-a .big{ color:var(--court-lit); }
.split .s-b .big{ color:var(--ball); }
.split ul{ margin-top:18px; display:flex; flex-direction:column; gap:9px; }
.split li{ display:flex; gap:11px; align-items:baseline; font-size:14.5px; color:var(--muted); }
.split li::before{ content:""; width:5px; height:5px; flex:0 0 auto; background:currentColor; opacity:.5; transform:translateY(-2px); }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

/* ==========================================================================
   TEAM
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,26px); }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; max-width:460px; } }
.tcard{ position:relative; display:block; }
.tcard .ph{ position:relative; aspect-ratio:3/4; overflow:hidden; background:var(--ink-3); }
.tcard .ph img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.86);
  transition:transform 1.1s var(--ease-out), filter .55s var(--ease);
}
.tcard:hover .ph img{ transform:scale(1.045); filter:none; }
.tcard .ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(5,7,10,.85), transparent 52%);
}
.tcard .ph .glow{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 80% 50% at 50% 100%, rgba(31,92,255,.5), transparent 70%);
  transition:opacity .5s var(--ease);
}
.tcard:hover .ph .glow{ opacity:1; }
.tcard .txt{ position:absolute; left:0; right:0; bottom:0; padding:clamp(16px,1.8vw,26px); z-index:2; }
.tcard .role{
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ball); display:block; margin-bottom:7px;
}
.tcard .nm{ display:block; font-family:var(--ff-display); font-weight:900; font-stretch:104%; text-transform:uppercase; font-size:clamp(19px,1.6vw,25px); line-height:1; }
.tcard .ig{ margin-top:8px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; transition:color .3s; }
.tcard:hover .ig{ color:var(--ball); }

/* ==========================================================================
   COLLABORATIONS — the trophy case
   ========================================================================== */
/* Her 26 marks come from 26 different places: some are dark line art on
   transparent, several (Recovery Therapy, Core Padel Workouts, Koia, Swing
   Vision, Vala Padel, BodyHealth) are flat PNGs with an OPAQUE background.
   The usual `brightness(0) invert(1)` monochrome trick turns those six into
   solid white blocks. So the wall is a rack of frosted-glass plates instead —
   on concept, and every logo renders correctly whatever its source file.
   Desaturated at rest so the wall reads as one system; full colour on hover,
   which is also how a brand wants to be shown on a sponsorship page. */
.brands{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(164px,1fr));
  gap:clamp(7px,.8vw,12px);
}
.bcell{
  position:relative;
  /* an explicit height, not aspect-ratio: a percentage max-height on the mark
     only resolves reliably against a DEFINITE height, and against an
     aspect-ratio box Chrome let Celsius render 85px tall inside a 70px cap. */
  height:clamp(94px, 8.6vw, 128px);
  display:flex; align-items:center; justify-content:center; padding:16px 20px;
  overflow:hidden;
  background:rgba(233,240,250,.93);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  transition:background .4s var(--ease), transform .5s var(--ease-out), box-shadow .45s var(--ease);
}
/* plate chosen per mark by brandPlates() in base.js — see the note there.
   .ink-dark  = dark artwork, light plate (default)
   .ink-flip  = light GREYSCALE artwork, inverted so it prints dark on the same
                light plate, which keeps the wall one material
   .ink-light = light COLOURED artwork, dark plate, colours left alone */
.bcell.ink-flip img{ filter:saturate(0) invert(1) contrast(1.05); opacity:.8; }
.bcell.ink-flip:hover img{ filter:saturate(0) invert(1) contrast(1.1); opacity:1; }
.bcell.ink-light{
  background:rgba(12,17,26,.96);
  box-shadow:inset 0 0 0 1px var(--line);
}
.bcell.ink-light:hover{
  background:var(--ink-3);
  box-shadow:inset 0 0 0 1px rgba(77,130,255,.5), 0 14px 34px -14px rgba(31,92,255,.85);
}
.bcell.ink-light .bn{ color:var(--ball); }
.bcell img{
  max-width:74%; max-height:62%;
  width:auto; height:auto; object-fit:contain;
  filter:saturate(.12) contrast(1.03);
  opacity:.82;
  transition:filter .45s var(--ease), opacity .45s var(--ease), transform .55s var(--ease-out);
}
.bcell:hover{
  background:#fff;
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 #fff, 0 14px 34px -14px rgba(31,92,255,.85);
}
.bcell:hover img{ filter:none; opacity:1; transform:scale(1.045) translateY(-5px); }
.bcell .bn{
  position:absolute; left:0; right:0; bottom:9px; text-align:center;
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--court);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out);
  padding-inline:8px;
}
.bcell:hover .bn{ opacity:1; transform:none; }
@media (max-width:640px){ .brands{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); } }

/* marquee (mobile / secondary) */
.marq{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marq-t{ display:flex; gap:clamp(28px,4vw,68px); width:max-content; animation:marq 42s linear infinite; }
.marq-t img{ height:26px; width:auto; filter:saturate(.15); opacity:.75; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gal{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(8px,1vw,16px);
  grid-auto-flow:row dense;   /* safety net: never leave a hole in a row */
}
.gal figure{ position:relative; overflow:hidden; background:var(--ink-3); margin:0; grid-column:span 4; aspect-ratio:4/5; }
.gal figure.w6{ grid-column:span 6; aspect-ratio:3/2; }
.gal figure.w8{ grid-column:span 8; aspect-ratio:16/10; }
.gal figure.w12{ grid-column:span 12; aspect-ratio:21/9; }
.gal figure.tall{ aspect-ratio:3/4.4; }
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out), filter .5s; filter:brightness(.94); }
.gal figure:hover img{ transform:scale(1.05); filter:brightness(1.04); }
.gal figure::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  box-shadow:inset 0 0 0 1px var(--ball);
  transition:opacity .35s;
}
.gal figure:hover::after{ opacity:1; }
.gal figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(to top, rgba(5,7,10,.9), transparent);
  font-size:12.5px; color:var(--text);
  opacity:0; transform:translateY(9px);
  transition:opacity .4s, transform .4s var(--ease-out);
}
.gal figure:hover figcaption{ opacity:1; transform:none; }
@media (max-width:900px){
  .gal figure,.gal figure.w6,.gal figure.w8{ grid-column:span 6; }
  .gal figure.w12{ grid-column:span 12; }
}
@media (max-width:560px){
  .gal figure,.gal figure.w6,.gal figure.w8,.gal figure.w12{ grid-column:span 12; aspect-ratio:4/5; }
}

/* video cells */
.vid-cell{ position:relative; aspect-ratio:16/9; background:#000; overflow:hidden; }
.vid-cell iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* lightbox */
.lbox{
  position:fixed; inset:0; z-index:9500; background:rgba(3,5,8,.96);
  display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px);
  opacity:0; visibility:hidden; transition:opacity .34s, visibility .34s;
  backdrop-filter:blur(8px);
}
.lbox.on{ opacity:1; visibility:visible; }
.lbox img{ max-width:100%; max-height:86vh; object-fit:contain; box-shadow:0 40px 120px rgba(0,0,0,.7); }
.lbox .x,.lbox .p,.lbox .n{
  position:absolute; background:transparent; border:1px solid var(--line); color:var(--text);
  width:46px; height:46px; display:grid; place-items:center; cursor:pointer;
  transition:border-color .3s, color .3s, background .3s;
}
.lbox .x:hover,.lbox .p:hover,.lbox .n:hover{ border-color:var(--ball); color:var(--ball); }
.lbox .x{ top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px); }
.lbox .p{ left:clamp(10px,2vw,26px); top:50%; margin-top:-23px; }
.lbox .n{ right:clamp(10px,2vw,26px); top:50%; margin-top:-23px; }
.lbox .cnt{
  position:absolute; bottom:clamp(14px,3vw,30px); left:50%; transform:translateX(-50%);
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:11px; letter-spacing:.26em; color:var(--faint); font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   SCOREBOARD — tournaments
   ========================================================================== */
.board{ border-top:1px solid var(--line-soft); }
.brow{
  display:grid; grid-template-columns:88px 1fr auto; gap:clamp(14px,2.4vw,40px);
  align-items:center; padding:clamp(18px,2.2vw,30px) 0;
  border-bottom:1px solid var(--line-soft);
  position:relative; transition:padding-left .45s var(--ease-out);
}
.brow::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--ball);
  transform:scaleY(0); transform-origin:bottom; transition:transform .45s var(--ease-out);
}
.brow:hover{ padding-left:18px; }
.brow:hover::before{ transform:scaleY(1); transform-origin:top; }
.brow .yr{
  font-family:var(--ff-display); font-weight:900; font-stretch:66%;
  font-size:clamp(22px,2.4vw,34px); color:var(--faint); font-variant-numeric:tabular-nums; line-height:1;
  transition:color .35s;
}
.brow:hover .yr{ color:var(--ball); }
.brow .tt{ display:block; font-family:var(--ff-display); font-weight:800; font-stretch:104%; text-transform:uppercase; font-size:clamp(16px,1.7vw,26px); line-height:1.1; }
.brow .mt{ display:block; font-size:13px; color:var(--muted); margin-top:5px; }
.brow .ph{ width:clamp(70px,7vw,110px); aspect-ratio:1; overflow:hidden; background:var(--ink-3); }
.brow .ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.8); transition:filter .45s, transform .7s var(--ease-out); }
.brow:hover .ph img{ filter:none; transform:scale(1.07); }
@media (max-width:640px){
  .brow{ grid-template-columns:64px 1fr; }
  .brow .ph{ display:none; }
}

/* ==========================================================================
   LINK CARDS (shop)
   ========================================================================== */
.lgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(10px,1.4vw,20px); }
/* Layers are all POSITIVE. A z-index:-2 photo under `isolation:isolate` was
   being painted behind the card's own opaque background and never showed. */
.lcard{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(190px,22vw,290px); padding:clamp(20px,2.4vw,32px);
  overflow:hidden; background:var(--ink-3);
}
.lcard img.bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  /* her court photography is shot at night (source luminance 36-44 of 255),
     so this LIFTS rather than darkens — the scrim below does the text protection */
  filter:grayscale(.42) brightness(1.12) contrast(1.04);
  transition:transform 1.2s var(--ease-out), filter .55s;
}
.lcard::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(5,7,10,.9) 0%, rgba(5,7,10,.5) 34%, rgba(5,7,10,.1) 76%);
  transition:background .5s;
}
.lcard:hover img.bg{ transform:scale(1.06); filter:grayscale(0) brightness(1.24) contrast(1.05); }
.lcard:hover::after{ background:linear-gradient(to top, rgba(7,26,77,.9) 4%, rgba(31,92,255,.14) 70%); }
.lcard .in-t{ position:relative; z-index:2; width:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
/* both are <span>s inside the card's flex row, so they need to be blocks or
   the note runs straight on from the label ("ONRunning and training shoes") */
.lcard .nm{ display:block; font-family:var(--ff-display); font-weight:900; font-stretch:112%; text-transform:uppercase; font-size:clamp(26px,2.9vw,42px); line-height:.94; }
.lcard .sb{ display:block; font-size:12.5px; color:var(--muted); margin-top:7px; }
.lcard .go{
  width:44px; height:44px; flex:0 0 auto; border:1px solid var(--line); display:grid; place-items:center;
  transition:background .35s, border-color .35s, color .35s, transform .35s var(--ease-out);
}
.lcard:hover .go{ background:var(--ball); border-color:var(--ball); color:var(--ink); transform:translate(3px,-3px); }

/* ==========================================================================
   PRESS
   ========================================================================== */
.press-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(14px,2vw,28px); }
.pcard{ position:relative; display:flex; flex-direction:column; background:var(--ink-2); border:1px solid var(--line-soft); }
.pcard .top{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#000; }
.pcard .top img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.pcard:hover .top img{ transform:scale(1.04); }
.pcard .bod{ padding:clamp(20px,2.2vw,30px); display:flex; flex-direction:column; gap:11px; flex:1; }
.pcard .out{ font-family:var(--ff-display); font-weight:700; font-stretch:66%; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--ball); }
.pcard h3{ font-family:var(--ff-display); font-weight:800; font-stretch:104%; text-transform:uppercase; font-size:clamp(18px,1.7vw,24px); line-height:1.06; }
.pcard .act{ margin-top:auto; padding-top:8px; }
.play-badge{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none;
}
.play-badge span{
  width:64px; height:64px; border-radius:50%; background:rgba(226,255,79,.94); color:var(--ink);
  display:grid; place-items:center; transition:transform .4s var(--ease-out);
}
.pcard:hover .play-badge span{ transform:scale(1.09); }

/* light editorial band */
.paper{ background:var(--paper); color:var(--paper-ink); }
.paper .lab{ color:rgba(10,13,19,.42); }
.paper .lab::before{ background:var(--court); }
.paper .lede,.paper .muted{ color:rgba(10,13,19,.62); }
.paper .tlink::after{ background:var(--court); }
.paper .court{ border-color:rgba(10,13,19,.13); background:rgba(10,13,19,.02); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.form{ display:grid; gap:16px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .row2{ grid-template-columns:1fr; } }
.fld{ position:relative; display:flex; flex-direction:column; gap:8px; }
.fld label{
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
}
.fld input,.fld textarea,.fld select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:11px 2px; font-size:15.5px; color:var(--text);
  transition:border-color .35s var(--ease);
}
.fld textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.fld input:focus,.fld textarea:focus,.fld select:focus{ outline:none; border-bottom-color:var(--ball); }
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(232,237,245,.24); }
.fld select option{ background:var(--ink-2); color:var(--text); }
.paper .fld input,.paper .fld textarea,.paper .fld select{ color:var(--paper-ink); border-bottom-color:rgba(10,13,19,.18); }
.paper .fld label{ color:rgba(10,13,19,.45); }

/* honeypots — must be reachable by bots but invisible + unfocusable to humans */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; opacity:0; }

.form-note{ font-size:12.5px; color:var(--faint); line-height:1.55; }
.form-msg{ font-size:14px; padding:13px 16px; border:1px solid var(--line); display:none; }
.form-msg.ok{ display:block; border-color:rgba(226,255,79,.5); color:var(--ball); background:rgba(226,255,79,.05); }
.form-msg.err{ display:block; border-color:rgba(255,90,90,.5); color:#ff9d9d; background:rgba(255,90,90,.05); }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .inner{
  position:relative; z-index:2; text-align:center;
  padding-block:clamp(70px,9vw,140px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,2.4vw,32px);
}
.cta-band .bgimg{ position:absolute; inset:0; z-index:0; }
.cta-band .bgimg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:grayscale(.5) brightness(.34); }
.cta-band .bgimg::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(7,26,77,.6), rgba(5,7,10,.9));
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{ position:relative; padding-top:clamp(56px,7vw,110px); border-top:1px solid var(--line-soft); overflow:hidden; }
.foot-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:clamp(24px,3vw,54px); }
@media (max-width:820px){ .foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-top{ grid-template-columns:1fr; } }
.foot h4{ font-family:var(--ff-display); font-weight:700; font-stretch:66%; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.foot ul{ display:flex; flex-direction:column; gap:10px; }
.foot ul a{ font-size:14.5px; color:var(--muted); transition:color .3s; }
.foot ul a:hover{ color:var(--ball); }
.socials{ display:flex; gap:10px; flex-wrap:wrap; }
.socials a{
  width:42px; height:42px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--muted); transition:color .3s, border-color .3s, transform .3s var(--ease-out);
}
.socials a:hover{ color:var(--ball); border-color:var(--ball); transform:translateY(-3px); }
/* An oversized translucent wordmark is Mentes' own footer move. Hers is the
   thing she actually plays inside: a padel court drawn in plan, edge to edge. */
.court-plan{ position:relative; margin-top:clamp(40px,6vw,86px); padding-inline:var(--gut); }
.court-plan svg{
  width:100%; height:clamp(84px,13vw,190px); display:block;
  overflow:visible;
}
.cp-line{ fill:none; stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.cp-net{ stroke:rgba(190,214,255,.34); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:2 3; }
.cp-glass{ fill:rgba(31,92,255,.10); stroke:rgba(77,130,255,.4); stroke-width:1; vector-effect:non-scaling-stroke; }
/* the court lines are stretched by preserveAspectRatio="none", which would
   squash a circle inside the SVG into an ellipse — so the ball sits on top */
.cp-ball{
  position:absolute; left:33%; top:31%;
  width:7px; height:7px; border-radius:50%;
  background:var(--ball);
  box-shadow:0 0 11px rgba(226,255,79,.6);
}
.cp-cap{
  display:block; margin-top:14px; text-align:center;
  font-family:var(--ff-display); font-weight:700; font-stretch:66%;
  font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
}
.foot-bar{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  padding-block:20px; border-top:1px solid var(--line-soft); margin-top:clamp(20px,3vw,40px);
  font-size:12px; color:var(--faint);
}
.foot-bar nav{ display:flex; gap:18px; flex-wrap:wrap; }
.foot-bar a:hover{ color:var(--ball); }
.by-mentes{ display:inline-flex; align-items:center; gap:7px; }
.by-mentes b{ color:var(--muted); font-weight:600; }

/* ---------- utilities ---------- */
.muted{ color:var(--muted); }
.center{ text-align:center; }
.flex-between{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.mt-s{ margin-top:14px } .mt-m{ margin-top:clamp(20px,2.6vw,38px) } .mt-l{ margin-top:clamp(34px,4.6vw,70px) }
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:9999; background:var(--ball); color:var(--ink);
  padding:12px 18px; font-weight:600;
}
.skip:focus{ left:12px; top:12px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .rv{ opacity:1; transform:none; }
  .hero-title .d1 .ln > span{ transform:none; }
  .hero-tag,.hero-actions,.hero-meta,.scroll-hint{ opacity:1; transform:none; }
  .curtain::after{ transform:scaleX(0); }
  .cur,.cur-ring,canvas.trail,.rail{ display:none !important; }
  .fill-sec{ height:auto; }
  .fill-sticky{ position:static; height:auto; padding-block:100px; }
  .fill w{ background-image:none; color:var(--text); filter:none; }
}