:root{
  --canvas:#081421; --surface:#0F2133; --line:#1F3650;
  --ink:#F3EFE4; --ink-soft:#9DB0C2;
  --accent:#DDF247; --accent-ink:#0B1A08;
  --display:"Archivo",system-ui,sans-serif;
  --text:"Instrument Sans",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
  --nav:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.55;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
[data-lang="fr"] [lang="en"],[data-lang="en"] [lang="fr"]{display:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

h1,h2{font-family:var(--display);font-stretch:68%;font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
h2{font-size:clamp(2.4rem,6vw,5.2rem)}
h3{font-family:var(--display);font-stretch:80%;font-weight:700;font-size:1.25rem;text-transform:uppercase;letter-spacing:.02em}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;border-radius:999px;transition:transform .2s ease,background-color .2s ease}
.btn:hover{transform:translateY(-2px);background:#EBFF6B}
.btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.btn-lg{min-height:64px;padding:0 44px;font-size:1.25rem}
.tlink{display:inline-block;margin-top:22px;font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:5px}
.tlink:hover{color:var(--accent)}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--gut);background:linear-gradient(rgba(8,20,33,.82),rgba(8,20,33,0))}
.nav-name{font-family:var(--display);font-stretch:75%;font-weight:800;text-transform:uppercase;text-decoration:none;letter-spacing:.03em}
.nav-links{display:flex;gap:28px;font-size:.92rem}
.nav-links a{text-decoration:none;color:var(--ink-soft);padding:10px 0}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:rgba(8,20,33,.6)}
.lang button{all:unset;cursor:pointer;min-width:44px;min-height:38px;text-align:center;font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--ink-soft)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--canvas)}
.lang button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* 1 HERO */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;padding:calc(var(--nav) + 40px) var(--gut) clamp(40px,8vh,90px)}
.hero-lines{position:absolute;inset:0;pointer-events:none;opacity:.5;background:
  linear-gradient(90deg,transparent calc(62% - 1px),var(--line) calc(62% - 1px),var(--line) 62%,transparent 62%),
  linear-gradient(0deg,transparent calc(38% - 1px),var(--line) calc(38% - 1px),var(--line) 38%,transparent 38%),
  radial-gradient(circle at 86% 16%,rgba(221,242,71,.16) 0,rgba(221,242,71,0) 34%)}
.hero-copy{position:relative;width:100%}
.hero h1{font-size:clamp(4rem,12.4vw,13rem);font-stretch:62%;font-weight:900;line-height:.82}
.hero h1 span{display:block}
.hero h1 span:last-child{color:var(--accent)}
.hero-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);margin-top:clamp(28px,5vh,56px);align-items:start}
.hero-role{font-family:var(--display);font-stretch:80%;font-weight:700;font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.15}
.hero-desc{margin-top:14px;font-size:clamp(1rem,1.25vw,1.15rem);color:#D5DEE7;max-width:58ch}
.hero-meta{margin:14px 0 24px;color:var(--ink-soft)}
.hero-skills h2{font-family:var(--text);font-stretch:100%;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1.4;margin-bottom:14px}
.hero-skills ul{display:flex;flex-wrap:wrap;gap:8px}
.hero-skills li{padding:9px 16px;border:1px solid #2C4866;border-radius:999px;font-weight:600;font-size:.98rem;background:rgba(15,33,51,.6)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero{--mx:0;--my:0;--sy:0}
.floaters{position:absolute;right:0;top:-24px;width:min(40vw,600px);height:calc(25vw + 12px);z-index:2}
.fl{position:absolute;left:var(--x);top:var(--y);width:clamp(40px,calc(var(--s) * .07vw),calc(var(--s) * 1px));aspect-ratio:1;transform:translate3d(calc(var(--mx) * var(--d) * -16px),calc(var(--my) * var(--d) * -12px + var(--sy) * var(--d) * -9vh),0);will-change:transform}
.tile{display:grid;place-items:center;width:100%;height:100%;border-radius:22%;background:var(--bg,#fff);box-shadow:0 22px 44px -18px rgba(0,0,0,.7),0 6px 14px -6px rgba(0,0,0,.5);transform:rotate(var(--rot));animation:bob var(--bob) ease-in-out infinite alternate}
.tile svg{width:56%;height:56%;fill:var(--fg,#000)}
@keyframes bob{from{transform:translateY(-7px) rotate(var(--rot))}to{transform:translateY(9px) rotate(calc(var(--rot) * -.6))}}
.fl-ps{--bg:#001E36;--fg:#31A8FF}
.fl-pr{--bg:#00005B;--fg:#9999FF}
.fl-dv{--bg:#233A51;--fg:#fff}
.fl-cl{--bg:#D97757;--fg:#fff}
.fl-gp{--bg:#fff;--fg:#000}
.fl-ig{--bg:linear-gradient(45deg,#F9CE34,#EE2A7B 50%,#6228D7);--fg:#fff}
.fl-mt{--bg:#fff;--fg:#0467DF}
.fl-ga{--bg:#fff;--fg:#4285F4}
.fl-tt{--bg:#000;--fg:#fff}
.fl-ph{--bg:var(--accent);--fg:var(--accent-ink)}
.fl-vd{--bg:var(--ink);--fg:var(--canvas)}

.fl-lr{--bg:#001E36;--fg:#31A8FF}
.fl-cc{--bg:#000;--fg:#fff}
.fl-of{--bg:#fff;--fg:#D83B01}
.tile svg.word{width:86%;height:auto}
.sec-desc{margin-top:18px;max-width:70ch;color:var(--ink-soft);font-size:1.05rem}
.close-desc{max-width:52ch;margin:-14px 0 28px;font-size:1.1rem;color:#E3EAF0}
.stats-head p{max-width:62ch}
.panel header p{max-width:46ch}

.fl-wp{--bg:#21759B;--fg:#fff}
.video-sub{padding:0 var(--gut);margin:-4px 0 16px;max-width:calc(74ch + 2 * var(--gut));color:var(--ink-soft)}

/* 2 STATEMENT */
.statement{padding:clamp(90px,18vh,200px) var(--gut)}
.kinetic{font-family:var(--display);font-stretch:85%;font-weight:600;font-size:clamp(1.7rem,4.3vw,3.9rem);line-height:1.12;max-width:22ch;max-width:min(1150px,100%);letter-spacing:-.01em}
.kinetic .w{color:#33485E;transition:color .25s linear}
.kinetic .w.on{color:var(--ink)}

/* 3 TENNIS */
.tennis{height:470vh;position:relative;background:linear-gradient(var(--canvas),#0A1D33 8%,#0A1D33 92%,var(--canvas))}
.tennis-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:clamp(24px,4vw,64px);align-items:center;padding:calc(var(--nav) + 8px) var(--gut) 28px}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.tennis h2{font-size:clamp(2.8rem,6.2vw,6rem)}
.lede{margin-top:16px;color:var(--ink-soft);max-width:38ch}
.rounds{margin-top:clamp(18px,4vh,40px);display:grid;gap:2px}
.rounds li{display:grid;grid-template-rows:auto 0fr;padding:9px 0 9px 16px;border-left:2px solid var(--line);color:#54687D;transition:grid-template-rows .35s ease,color .25s ease,border-color .25s ease}
.rounds strong{font-family:var(--display);font-stretch:78%;font-weight:700;text-transform:uppercase;font-size:1.05rem;letter-spacing:.03em}
.rounds span>span,.rounds li>span{overflow:hidden}
.rounds li>span{font-size:.95rem;color:var(--ink-soft);min-height:0}
.rounds li.on{grid-template-rows:auto 1fr;color:var(--ink);border-color:var(--accent)}
.rounds li.done{color:var(--ink-soft);border-color:#6E7B2A}
.board-wrap{justify-self:end}
.board{height:min(calc(100svh - var(--nav) - 70px),66vw);aspect-ratio:4/5;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);grid-auto-flow:column;gap:clamp(6px,.8vw,12px)}
.post{--t:0;border-radius:6px;overflow:hidden;background:var(--surface);opacity:var(--t);transform:translate3d(0,calc((1 - var(--t))*70px),0) rotate(calc((1 - var(--t))*var(--r))) scale(calc(.86 + .14*var(--t)));box-shadow:0 14px 28px -14px rgba(0,0,0,.7);will-change:transform,opacity}
.post img{width:100%;height:100%;object-fit:cover}
.rail{height:3px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden}
.rail i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}

.talogo{width:56px;height:56px;border-radius:12px;margin-bottom:16px}

/* 3a STATS */
.stats{padding:clamp(70px,12vh,150px) var(--gut) clamp(20px,4vh,50px)}
.stats-head{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;justify-content:space-between;margin-bottom:clamp(28px,5vh,56px)}
.stats-head p{color:var(--ink-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stat-grid li{padding:clamp(18px,3vh,34px) clamp(12px,2vw,28px) clamp(18px,3vh,34px) 0;border-bottom:1px solid var(--line)}
.stat-grid li+li{padding-left:clamp(12px,2vw,28px);border-left:1px solid var(--line)}
.stat-grid strong{display:block;font-family:var(--display);font-stretch:66%;font-weight:900;font-size:clamp(3rem,8.6vw,8.4rem);line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-grid strong b{font-weight:inherit}
.stat-grid li>span{display:block;margin-top:12px;color:var(--ink);font-weight:600;max-width:20ch}
.stats-foot{margin-top:22px;color:var(--ink-soft);max-width:80ch}
.stats-foot .tlink{margin:0 0 0 6px;color:var(--ink)}

/* DETAIL PAGE */
.detail .nav{background:rgba(8,20,33,.92);border-bottom:1px solid var(--line)}
.dmain{padding:calc(var(--nav) + clamp(30px,6vh,70px)) var(--gut) 0;max-width:1240px;margin:0 auto}
.backlink a{color:var(--ink-soft);text-decoration:none;font-weight:600;display:inline-block;padding:10px 0}
.backlink a:hover{color:var(--accent)}
.dhead h1{font-size:clamp(2.8rem,8vw,7rem);font-stretch:64%;font-weight:900}
.dlede{margin-top:20px;font-size:clamp(1.1rem,1.8vw,1.4rem);max-width:56ch}
.dnote{margin-top:12px;color:var(--ink-soft);font-size:.92rem;max-width:70ch}
.dsec{padding:clamp(50px,9vh,100px) 0 0}
.dsec>h2{padding-bottom:16px;border-bottom:2px solid var(--accent);margin-bottom:8px}
.dsec h2 small{font-family:var(--text);font-stretch:100%;font-size:1rem;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-soft);margin-left:10px}
.dsec h3{color:var(--accent);font-size:.95rem;letter-spacing:.12em;margin:clamp(34px,6vh,56px) 0 16px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 clamp(16px,3vw,40px)}
.kpis li{padding:22px 0;border-bottom:1px solid var(--line)}
.kpis strong{display:block;font-family:var(--display);font-stretch:68%;font-weight:900;font-size:clamp(2.2rem,4.6vw,4rem);line-height:.95;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis li>span{display:block;margin-top:8px;color:var(--ink-soft)}
.kpis.small strong{font-size:clamp(1.7rem,3vw,2.5rem)}
.kpis.small{grid-template-columns:repeat(2,1fr)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,6vw,90px)}
.plain{max-width:60ch;color:var(--ink);margin-top:14px}
.steps{display:grid;gap:0}
.steps li{display:grid;grid-template-columns:7.5em 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.steps strong{font-family:var(--display);font-stretch:72%;font-weight:800;font-size:1.6rem;font-variant-numeric:tabular-nums}
.steps li>span{color:var(--ink-soft)}
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child{text-align:left}
thead th{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
tbody th{font-weight:600}
.bars{display:grid;gap:8px}
.bars li{display:grid;grid-template-columns:8.5em 1fr 7.5em;gap:12px;align-items:center}
.bars li>span{color:var(--ink-soft);font-size:.95rem}
.bars i{display:block;height:14px;border-radius:0 3px 3px 0;background:var(--accent);width:calc(var(--v) / var(--max) * 100%);min-width:2px}
.bars b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.bars.pct li{grid-template-columns:8.5em 1fr 4.5em}
.dclose{padding-bottom:clamp(70px,12vh,140px)}
.dclose h2{border:0;margin-bottom:26px}
.dclose .backlink{margin-top:26px}

/* 3a2 TOP 10 */
.top{padding:clamp(60px,10vh,120px) var(--gut) clamp(10px,2vh,30px)}
.top-head{display:grid;grid-template-columns:1fr minmax(0,44ch);gap:24px 40px;align-items:end;margin-bottom:clamp(28px,5vh,52px)}
.top-head p{color:var(--ink-soft)}
.top-head .tlink{margin:0 0 0 4px;color:var(--ink)}
.top-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2.4vw,34px) clamp(10px,1.4vw,20px)}
.top-grid figure{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--surface)}
.top-grid img{width:100%;height:100%;object-fit:cover}
.top-grid .rank{position:absolute;left:0;top:0;min-width:44px;padding:2px 10px 4px;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-stretch:66%;font-weight:900;font-size:1.9rem;line-height:1.1;text-align:center;border-radius:0 0 8px 0}
.top-grid em{position:absolute;right:8px;top:8px;font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;background:rgba(8,20,33,.8);border-radius:999px}
.top-grid p{margin-top:10px;display:flex;align-items:baseline;gap:8px}
.top-grid strong{font-family:var(--display);font-stretch:70%;font-weight:800;font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.top-grid p>span{color:var(--ink-soft);font-size:.92rem}
.top-grid li:first-child strong{color:var(--accent)}
.top-grid a{display:block;border-radius:8px}
.top-grid a:hover img{transform:scale(1.03)}
.top-grid img{transition:transform .3s ease}
.top-grid .when{margin-top:2px;color:var(--ink-soft);font-size:.85rem}

/* 3b ROWS */
.rows{padding:clamp(80px,14vh,160px) 0 clamp(40px,8vh,90px);overflow:hidden}
.rows-head{padding:0 var(--gut);display:grid;grid-template-columns:1fr minmax(0,42ch);gap:32px;align-items:end;margin-bottom:clamp(32px,6vh,64px)}
.rows-head p{color:var(--ink-soft)}
.row{display:flex;gap:14px;width:max-content;padding:0 var(--gut);will-change:transform}
.row+.row{margin-top:14px}
.row img{height:min(44svh,420px);width:auto;aspect-ratio:4/5;max-width:none;object-fit:cover;border-radius:8px}

/* 3b2 VIDEO */
.video{padding:clamp(60px,10vh,120px) 0 clamp(20px,4vh,50px)}
.video-head{padding:0 var(--gut);display:grid;grid-template-columns:1fr minmax(0,44ch);gap:24px 40px;align-items:end;margin-bottom:clamp(20px,4vh,40px)}
.video-head p{color:var(--ink-soft)}
.video h3{padding:0 var(--gut);color:var(--accent);font-size:.95rem;letter-spacing:.12em;margin:clamp(24px,4vh,40px) 0 14px}
.reel-row{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:4px var(--gut) 16px}
.reel-row ul{display:flex;gap:clamp(10px,1.2vw,16px);width:max-content}
.reel-row li{scroll-snap-align:start;width:clamp(150px,15vw,210px)}
.reel{display:block;text-decoration:none}
.reel-img{position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--surface)}
.reel-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.reel:hover .reel-img img{transform:scale(1.04)}
.reel-img i{position:absolute;left:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:var(--accent)}
.reel-img i::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid var(--accent-ink);border-top:7px solid transparent;border-bottom:7px solid transparent}
.reel-t{display:block;margin-top:10px;font-size:.92rem;font-weight:600;line-height:1.3}
.player{border:0;padding:0;background:transparent;color:var(--ink);max-width:none;max-height:none;overflow:visible}
.player::backdrop{background:rgba(4,10,18,.88)}
.player-frame{width:min(92vw,400px);height:min(84svh,740px);border-radius:14px;overflow:hidden;background:#000}
.player-frame iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.player-x{position:absolute;right:-6px;top:-50px;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:var(--canvas);font-size:1.6rem;line-height:1;cursor:pointer}
.player-link{display:block;margin-top:12px;text-align:center;color:var(--ink);font-weight:600;text-underline-offset:4px}

/* 3c COURT */
.court{padding:clamp(60px,10vh,120px) var(--gut) clamp(80px,14vh,160px)}
.court-head{max-width:60ch;margin:0 0 clamp(32px,6vh,64px) auto;text-align:right}
.court-head p{color:var(--ink-soft);margin-top:14px}
.tourney+.tourney{margin-top:clamp(48px,9vh,100px)}
.tourney h3{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.5rem,3vw,2.4rem);font-stretch:70%;font-weight:800;padding-bottom:12px;margin-bottom:clamp(14px,2vw,22px);border-bottom:2px solid var(--accent)}
.tourney h3 small{font-family:var(--text);font-stretch:100%;font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:none;color:var(--ink-soft)}
.court-grid.g4{columns:4}
.court-grid{columns:3;column-gap:clamp(10px,1.4vw,20px)}
.court-grid figure{position:relative;break-inside:avoid;margin-bottom:clamp(10px,1.4vw,20px);border-radius:8px;overflow:hidden}
.court-grid img{width:100%;height:auto;display:block}
.court-grid figcaption{position:absolute;left:10px;bottom:10px;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;background:rgba(8,20,33,.78);border-radius:999px}

/* 3d PELOTA */
.pelota{padding:clamp(40px,8vh,100px) var(--gut) clamp(70px,12vh,140px)}
.pelota-head{display:grid;grid-template-columns:auto minmax(0,58ch);gap:24px clamp(32px,6vw,90px);align-items:end;justify-content:space-between;margin-bottom:clamp(28px,5vh,56px)}
.pelota-head p{color:#D5DEE7;font-size:1.05rem}
.pelota-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,20px)}
.pelota-grid figure{grid-column:span 3;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface)}
.pelota-grid figure:nth-child(-n+3){grid-column:span 4}
.pelota-grid img{width:100%;height:100%;object-fit:cover}

/* 4 FREELANCE */
.free{padding:clamp(40px,8vh,100px) 0 clamp(70px,12vh,140px)}
.free-head{padding:0 var(--gut);display:grid;grid-template-columns:auto minmax(0,56ch);gap:24px clamp(32px,6vw,90px);align-items:end;justify-content:space-between;margin-bottom:clamp(30px,6vh,64px)}
.free-head p{color:var(--ink-soft)}
.client+.client{margin-top:clamp(56px,10vh,110px)}
.client-name{margin:0 var(--gut);padding-bottom:12px;border-bottom:2px solid var(--accent);font-size:clamp(1.5rem,3vw,2.4rem);font-stretch:70%;font-weight:800}
.client h4{margin:clamp(22px,4vh,38px) var(--gut) 14px;font-family:var(--display);font-stretch:80%;font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.client h4 small{color:var(--ink-soft);font-weight:600;letter-spacing:.04em;margin-left:6px}
.client-desc{margin:14px var(--gut) 20px;color:var(--ink-soft);max-width:60ch}
.sq-row{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:0 var(--gut) 12px}
.sq-row+.sq-row{margin-top:10px}
.sq-row>div{display:flex;gap:10px;width:max-content}
.sq-row img{width:clamp(170px,19vw,270px);height:auto;aspect-ratio:1;border-radius:8px;max-width:none}
.free-photos{padding:0 var(--gut)}
.banner-stack{display:grid;gap:12px;padding:0 var(--gut)}
.banner-stack img{width:100%;height:auto;border-radius:8px}

.client-desc{max-width:78ch}
.client-desc .tlink{margin:0 0 0 4px;color:var(--ink)}
.isi-group h4{margin-top:clamp(18px,3vh,30px)}
.isi-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);padding:0 var(--gut)}
.isi-grid figure{position:relative;border-radius:8px;overflow:hidden;background:var(--surface)}
.isi-grid img{width:100%;height:auto;display:block}
.isi-grid figcaption{position:absolute;left:8px;top:8px;font-size:.72rem;font-weight:700;letter-spacing:.08em;padding:3px 8px;background:rgba(8,20,33,.8);border-radius:999px}

.uni{padding:clamp(70px,12vh,140px) 0}
.uni-head{padding:0 var(--gut);margin-bottom:clamp(28px,5vh,56px)}
.uni h4{margin:clamp(22px,4vh,38px) var(--gut) 14px;font-family:var(--display);font-stretch:80%;font-weight:700;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.uni h4 small{color:var(--ink-soft);font-weight:600;margin-left:6px}
.uni-videos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.6vw,22px);padding:0 var(--gut)}
.uni-videos figure{grid-column:span 2}
.uni-videos figure:nth-child(-n+2){grid-column:span 3}
.uni-videos video{width:100%;aspect-ratio:16/9;border-radius:10px;background:#000;display:block;object-fit:cover}
.uni-videos figcaption{margin-top:8px;font-weight:600;font-size:.95rem}

.uni-next{margin-top:clamp(56px,10vh,110px)}
.uni-film{padding:0 var(--gut);max-width:1100px}
.hobby{padding:clamp(40px,8vh,100px) 0 clamp(70px,12vh,140px)}
.expo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);padding:0 var(--gut);align-items:start;margin-bottom:clamp(36px,7vh,80px)}
.expo-main{border-radius:10px;overflow:hidden}
.expo-main img{width:100%;height:auto;display:block}
.expo-text h3{color:var(--accent);margin-bottom:12px}
.expo-text p{color:#D5DEE7}
.expo-me{margin-top:20px;max-width:240px}
.expo-me img{width:100%;height:auto;border-radius:8px;display:block}
.expo-me figcaption{margin-top:6px;font-size:.85rem;color:var(--ink-soft)}

.yt-title{position:absolute;left:clamp(16px,3vw,36px);top:clamp(16px,3vw,32px);font-family:var(--display);font-stretch:68%;font-weight:900;font-size:clamp(1.6rem,4vw,3.4rem);line-height:.95;text-transform:uppercase;color:var(--ink)}
.uni-film .yt{background:linear-gradient(135deg,#12314C,#081421)}

.free-isi{padding-top:clamp(70px,12vh,140px)}

/* 4 PAN */
.pan{height:580vh;position:relative}
.pan-stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
.track{display:flex;align-items:stretch;gap:clamp(40px,7vw,120px);padding:var(--nav) var(--gut) 0;will-change:transform;--ph:min(58svh,560px)}
.panel{flex:none;display:flex;flex-direction:column;justify-content:center;gap:18px}
.panel header p{color:var(--ink-soft);margin-top:4px}
.panel-title{width:min(84vw,520px)}
.panel-title p{color:var(--ink-soft);max-width:40ch;margin-top:18px}
.strip{display:flex;height:var(--ph);border-radius:10px;overflow:hidden}
.strip img{height:100%;width:auto;aspect-ratio:1;max-width:none}
.mix{display:flex;gap:12px;height:var(--ph)}
.mix img{height:100%;width:auto;max-width:none;aspect-ratio:1;object-fit:cover;border-radius:8px}
.mix img.wide{aspect-ratio:3/2}
.banners{display:flex;flex-direction:column;gap:12px;height:var(--ph)}
.banners img{height:calc((var(--ph) - 24px)/3);width:auto;max-width:none;aspect-ratio:1400/458;border-radius:8px;object-fit:cover}
.quad{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;height:var(--ph);aspect-ratio:1}
.quad img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* 5 LEROY (static) */
.leroy2{background:#F3EFE4;color:#0B1B2B;padding:clamp(70px,12vh,140px) var(--gut)}
.leroy2-head{display:grid;grid-template-columns:auto minmax(0,62ch);gap:24px clamp(32px,6vw,90px);justify-content:space-between;align-items:start}
.leroy2 .dates{margin-top:14px;font-weight:700;letter-spacing:.04em;color:#1D5E8C}
.leroy2-text p+p{margin-top:14px;color:#3D5368}
.leroy2 h3{margin:clamp(36px,7vh,70px) 0 10px;color:#1D5E8C;font-size:.95rem;letter-spacing:.12em}
.leroy2-sub{max-width:70ch;margin-bottom:clamp(18px,3vh,30px)}
.leroy2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.leroy2-grid figure{aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 20px 40px -24px rgba(11,27,43,.5)}
.leroy2-grid img{width:100%;height:100%;object-fit:cover}
.leroy2 .tlink{text-decoration-color:#1D5E8C}
.leroy2 .tlink:hover{color:#1D5E8C}

.reel-row.in-sec{padding-left:0;padding-right:0;scrollbar-color:#B9C4CE transparent}
.doc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(18px,3vw,40px);align-items:start}
.yt{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;color:#fff;text-decoration:none}
.yt img,.yt iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.yt i{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--accent)}
.yt i::after{content:"";position:absolute;left:30px;top:22px;border-left:24px solid var(--accent-ink);border-top:16px solid transparent;border-bottom:16px solid transparent}
.yt span{position:absolute;left:14px;bottom:12px;font-weight:700;padding:6px 12px;background:rgba(8,20,33,.8);border-radius:999px;font-size:.92rem}
.doc-clips>p{font-weight:700;margin-bottom:12px}
.doc-clips ul{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

/* 5 LEROY */
.leroy{height:280vh;position:relative;background:#F3EFE4;color:#0B1B2B}
.leroy-stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:auto minmax(280px,1fr);gap:clamp(28px,6vw,96px);align-items:center;padding:calc(var(--nav) + 10px) var(--gut) 30px}
.leroy-frame{position:relative;height:min(74svh,46vw);aspect-ratio:1;border-radius:12px;overflow:hidden;box-shadow:0 40px 70px -30px rgba(11,27,43,.55)}
.leroy-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.leroy{--a:clamp(0,calc(var(--p,0)*2.6 - .25),1);--b:clamp(0,calc(var(--p,0)*2.6 - 1.45),1)}
.leroy-frame .w2{clip-path:inset(0 calc((1 - var(--a))*100%) 0 0)}
.leroy-frame .w3{clip-path:inset(calc((1 - var(--b))*100%) 0 0 0)}
.leroy-copy{max-width:52ch}
.leroy-copy .dates{margin:14px 0 18px;font-weight:700;letter-spacing:.04em;color:#1D5E8C}
.leroy .tlink{text-decoration-color:#1D5E8C}
.leroy .tlink:hover{color:#1D5E8C}

/* 6 TERRAIN */
.terrain{padding:clamp(90px,16vh,180px) var(--gut) clamp(70px,12vh,140px)}
.terrain-head{display:grid;grid-template-columns:1fr minmax(0,40ch);gap:32px;align-items:end;margin-bottom:clamp(40px,8vh,90px)}
.terrain-head p{color:var(--ink-soft)}
.drift{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.drift figure{position:relative;border-radius:8px;overflow:hidden;will-change:transform}
.drift img{width:100%;height:100%;object-fit:cover}
.drift figcaption{position:absolute;left:12px;bottom:10px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;background:rgba(8,20,33,.78);border-radius:999px}
.d1{grid-column:1/6;aspect-ratio:3/2}
.d2{grid-column:6/13;aspect-ratio:3/2;margin-top:9vh}
.d3{grid-column:2/5;aspect-ratio:3/2}
.d4{grid-column:5/10;aspect-ratio:3/2;margin-top:-4vh}
.d5{grid-column:10/13;aspect-ratio:3/2;margin-top:5vh}
.d6{grid-column:3/9;aspect-ratio:3/2;margin-top:2vh}
.videos{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:clamp(50px,9vh,100px)}
.videos a{display:inline-block;padding:10px 0;font-family:var(--display);font-stretch:80%;font-weight:700;text-transform:uppercase;font-size:1.15rem;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.videos a:hover{color:var(--accent)}

/* 7 LEDGER */
.ledger{padding:clamp(70px,12vh,140px) var(--gut);border-top:1px solid var(--line)}
.ledger-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,100px);margin-top:clamp(30px,6vh,60px)}
.ledger h3{color:var(--accent);font-size:.95rem;letter-spacing:.12em;margin:0 0 14px}
.ledger h3:not(:first-child){margin-top:42px}
.ledger dl>div{display:grid;grid-template-columns:11.5em 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.ledger dt{color:var(--ink-soft);font-size:.92rem;font-variant-numeric:tabular-nums}
.ledger dd{color:var(--ink-soft)}
.ledger dd strong{display:block;color:var(--ink);font-weight:600}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags li{padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:.93rem}
.langs{font-size:1.1rem}

/* 8 CLOSE */
.close{position:relative;min-height:100svh;display:grid;align-items:end;overflow:hidden}
.close-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.close::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,20,33,.94) 8%,rgba(8,20,33,.5) 55%,rgba(8,20,33,.25))}
.close-copy{position:relative;z-index:1;padding:0 var(--gut) clamp(40px,8vh,90px)}
.close h2{font-size:clamp(2.6rem,8.4vw,8rem);max-width:16ch;margin-bottom:34px}
.mail{margin-top:22px;font-size:1.1rem}
.mail a{text-underline-offset:5px}
.socials{margin-top:38px;display:flex;flex-wrap:wrap;gap:8px 28px;color:#C9D5E0;font-size:.95rem;align-items:center}
.socials a{padding:10px 0}

/* MOBILE */
@media (max-width:860px){
  .nav-links{display:none}
  .nav-name{font-size:.9rem}
  .hero{align-items:center}
  .hero-cols{grid-template-columns:1fr}
  .floaters{position:static;width:auto;height:auto;display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 4px}
  .fl{position:static;width:46px;height:46px;transform:none}
  .tile{border-radius:12px}
  .hero-skills li{font-size:.9rem;padding:8px 13px}
  .tennis-stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:14px;padding-bottom:18px}
  .tennis h2{font-size:2.6rem}
  .lede{display:none}
  .rounds{margin-top:10px;grid-auto-flow:row}
  .rounds li{display:none}
  .rounds li.on{display:grid}
  .board-wrap{justify-self:center;align-self:center}
  .board{height:auto;width:min(84vw,calc((100svh - var(--nav) - 240px)*.8));aspect-ratio:4/5;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);grid-auto-flow:row}
  .tennis[data-stage="0"] .post:not([data-s="0"]),.tennis[data-stage="1"] .post:not([data-s="1"]),.tennis[data-stage="2"] .post:not([data-s="2"]),.tennis[data-stage="3"] .post:not([data-s="3"]),.tennis[data-stage="4"] .post:not([data-s="4"]){display:none}
  .track{--ph:min(46svh,84vw)}
  .leroy{height:260vh}
  .leroy-stick{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:20px}
  .leroy-frame{height:auto;width:min(100%,44svh);justify-self:center}
  .leroy-copy p:not(.dates){font-size:.95rem}
  .leroy h2{font-size:2.3rem}
  .terrain-head,.rows-head,.top-head,.video-head,.pelota-head,.free-head,.leroy2-head{grid-template-columns:1fr}
  .leroy2-grid{grid-template-columns:1fr 1fr}
  .expo{grid-template-columns:1fr}
  .uni-videos figure,.uni-videos figure:nth-child(-n+2){grid-column:span 6}
  .isi-grid{grid-template-columns:1fr}
  .doc{grid-template-columns:1fr}
  .sq-row img{width:44vw}
  .pelota-grid figure,.pelota-grid figure:nth-child(-n+3){grid-column:span 6}
  .pelota-grid figure:first-child{grid-column:span 12}
  .reel-row li{width:42vw}
  .player-x{right:0}
  .top-grid{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat-grid li:nth-child(3){padding-left:0;border-left:0}
  .two{grid-template-columns:1fr}
  .bars li{grid-template-columns:6.2em 1fr 6.4em;gap:8px}
  .bars.pct li{grid-template-columns:6.2em 1fr 4em}
  .detail .nav-links{display:none}
  .row img{height:min(38svh,300px)}
  .court-grid,.court-grid.g4{columns:2}
  .court-head{text-align:left;margin-left:0}
  .talogo{width:40px;height:40px;margin-bottom:8px}
  .drift{grid-template-columns:repeat(6,1fr)}
  .d1{grid-column:1/6}.d2{grid-column:2/7;margin-top:0}.d3{grid-column:1/4}.d4{grid-column:3/7;margin-top:0}.d5{grid-column:1/5;margin-top:0}.d6{grid-column:2/7;margin-top:0}
  .ledger-grid{grid-template-columns:1fr}
  .ledger dl>div{grid-template-columns:1fr;gap:2px}
}

/* REDUCED MOTION: static compositions, depth kept in layout */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kinetic .w{color:var(--ink);transition:none}
  .tennis{height:auto}
  .tennis-stick{position:static;height:auto;padding-top:90px;padding-bottom:60px;align-items:start}
  .post{opacity:1;transform:none}
  .rounds li{grid-template-rows:auto 1fr;color:var(--ink);display:grid}
  .rail{display:none}
  .pan{height:auto}
  .pan-stick{position:static;height:auto;overflow-x:auto;padding:40px 0}
  .track{transform:none!important}
  .leroy{height:auto}
  .leroy-stick{position:static;height:auto;padding-top:70px;padding-bottom:70px}
  .leroy-frame{aspect-ratio:auto;height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;box-shadow:none;width:min(100%,60vw)}
  .leroy-frame img{position:static;clip-path:none!important;border-radius:8px;aspect-ratio:1}
  .drift figure{transform:none!important}
  .tile{animation:none}
  .fl{transform:none}
  .rows{overflow-x:auto}
  .row{transform:none!important}
  .btn{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:860px){
  .board{grid-template-columns:repeat(2,1fr);grid-template-rows:none;aspect-ratio:auto;width:88vw}
  .tennis .post{display:block!important;aspect-ratio:1}
  .leroy-frame{width:100%}
}