/* ==========================================================================
   KOBO SPORT MANAGEMENT — Design System
   Brand: KOBO Black #000000 · KOBO Red #E42501 · White #FFFFFF
   Geometry: everything derives from the 75° modular grid (skewX(-15deg))
   Type: Magistral (display, with Exo 2 web fallback) / SF Pro Display (UI)
   ========================================================================== */

/* ---------- 0. FONTS (self-hosted — no external dependency) ----------
   Magistral is the licensed wordmark face. It is used automatically for
   anyone who has it installed (Kobo's own designers, print handoffs); the
   web fallback below reproduces its wide, oblique, geometric character.
   Drop Magistral .woff2 files into assets/fonts/ and add a matching
   @font-face block named "Magistral" to switch the whole site over. */
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/exo-2-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/exo-2-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:700;font-display:swap;
  src:url("../fonts/exo-2-latin-700-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:700;font-display:swap;
  src:url("../fonts/exo-2-latin-ext-700-italic.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/exo-2-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:800;font-display:swap;
  src:url("../fonts/exo-2-latin-ext-800-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:800;font-display:swap;
  src:url("../fonts/exo-2-latin-800-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:800;font-display:swap;
  src:url("../fonts/exo-2-latin-ext-800-italic.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Exo 2";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/exo-2-latin-900-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Exo 2";font-style:italic;font-weight:900;font-display:swap;
  src:url("../fonts/exo-2-latin-900-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/inter-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/inter-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/inter-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- 1. TOKENS ---------- */
:root{
  --black:#000000;
  --red:#E42501;
  --red-dark:#B41D01;
  --red-glow:rgba(228,37,1,.35);
  --white:#FFFFFF;

  --ink-900:#000000;
  --ink-800:#0A0A0A;
  --ink-700:#111111;
  --ink-600:#161616;
  --ink-500:#1E1E1E;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);
  --mute:rgba(255,255,255,.62);
  --mute-soft:rgba(255,255,255,.45);

  --paper:#F4F4F2;
  --paper-line:rgba(0,0,0,.12);
  --paper-mute:rgba(0,0,0,.62);

  --font-display:"Magistral","Exo 2","Saira",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --skew:-15deg;            /* 75° from the horizontal */
  --unskew:15deg;

  --shell:1280px;
  --gutter:clamp(20px,5vw,64px);
  --sec-y:clamp(72px,10vw,148px);

  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.28s var(--ease);
  --slow:.6s var(--ease);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--font-ui);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:800;line-height:.94;letter-spacing:-.02em;text-transform:uppercase}
p{margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:var(--white)}

/* ---------- 3. LAYOUT ---------- */
.shell{width:min(100% - (var(--gutter) * 2),var(--shell));margin-inline:auto}
.section{padding-block:var(--sec-y);position:relative}
.section--paper{background:var(--paper);color:var(--black)}
.section--tight{padding-block:clamp(48px,6vw,88px)}
.grid{display:grid;gap:clamp(20px,3vw,36px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:960px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}}
@media (max-width:600px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- 4. TYPE SCALE ---------- */
.display{font-family:var(--font-display);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.025em}
.d1{font-size:clamp(3.1rem,10.5vw,8.6rem)}
.d2{font-size:clamp(2.4rem,6.6vw,5.2rem)}
.d3{font-size:clamp(1.9rem,4vw,3.3rem)}
.d4{font-size:clamp(1.35rem,2.3vw,2rem);letter-spacing:-.015em}
.italic{font-style:italic}
.lede{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.55;color:var(--mute);max-width:62ch}
.section--paper .lede{color:var(--paper-mute)}
.body{color:var(--mute);max-width:66ch}
.section--paper .body{color:var(--paper-mute)}
.red{color:var(--red)}
.small{font-size:.82rem;line-height:1.6}

/* Eyebrow: skewed red rule + tracked label */
.eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin-bottom:22px;
}
.eyebrow::before{
  content:"";width:34px;height:5px;background:var(--red);
  transform:skewX(var(--skew));flex:none;
}
.eyebrow--muted{color:var(--white)}
.section--paper .eyebrow--muted{color:var(--black)}

/* ---------- 5. THE 75° MOTIF ---------- */
.slash{display:inline-block;width:.42em;height:1em;background:var(--red);transform:skewX(var(--skew));vertical-align:-.08em;margin-right:.28em}

/* Chevron / parallelogram pattern lifted from the brand guideline */
.pattern{
  --pat:rgba(228,37,1,.9);
  background-image:
    linear-gradient(75deg,var(--pat) 25%,transparent 25.5%,transparent 50%,var(--pat) 50.5%,var(--pat) 75%,transparent 75.5%);
  background-size:26px 26px;
}
.pattern-bar{height:18px;width:100%}
.pattern-bar--soft{--pat:rgba(228,37,1,.28)}
.pattern-bar--ghost{--pat:rgba(255,255,255,.14)}

/* Big ghost numeral sitting behind content */
.ghost-num{
  font-family:var(--font-display);font-style:italic;font-weight:800;
  font-size:clamp(5rem,14vw,12rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.16);
  pointer-events:none;user-select:none;
}
.section--paper .ghost-num{-webkit-text-stroke-color:rgba(0,0,0,.14)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;font-family:var(--font-ui);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  transform:skewX(var(--skew));
  transition:background var(--fast),color var(--fast),transform var(--fast),box-shadow var(--fast);
  will-change:transform;
}
.btn > *{transform:skewX(var(--unskew))}
.btn span{display:inline-block;transform:skewX(var(--unskew))}
.btn--primary{background:var(--red);color:var(--white)}
.btn--primary:hover{background:var(--white);color:var(--black);transform:skewX(var(--skew)) translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.5)}
.btn--ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
.btn--ghost:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--white);transform:skewX(var(--skew)) translateY(-3px)}
.section--paper .btn--ghost{color:var(--black);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.section--paper .btn--ghost:hover{background:var(--black);color:var(--white)}
.btn--sm{padding:12px 22px;font-size:.72rem}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* Text link with animated red underline */
.tlink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.8rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:6px;position:relative;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:var(--red);transform:skewX(var(--skew)) scaleX(.28);transform-origin:left;
  transition:transform var(--fast);
}
.tlink:hover::after{transform:skewX(var(--skew)) scaleX(1)}
.tlink .arrow{transition:transform var(--fast)}
.tlink:hover .arrow{transform:translateX(6px)}

/* ---------- 7. HEADER ---------- */
.header{
  position:fixed;inset:0 0 auto 0;z-index:80;
  background:rgba(0,0,0,0);backdrop-filter:blur(0px);
  transition:background var(--fast),backdrop-filter var(--fast),box-shadow var(--fast);
}
.header.is-stuck{background:rgba(0,0,0,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.header__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{height:34px;width:auto}
.brand__sub{
  font-family:var(--font-display);font-size:.6rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);padding-left:12px;border-left:1px solid var(--line-strong);
}
@media (max-width:520px){.brand__sub{display:none}}

.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav a{
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);padding:8px 0;position:relative;transition:color var(--fast);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--white)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--red);
  transform:skewX(var(--skew)) scaleX(0);transform-origin:left;transition:transform var(--fast);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:skewX(var(--skew)) scaleX(1)}
.header__right{display:flex;align-items:center;gap:16px}
@media (max-width:1040px){.nav--desktop{display:none}}

/* Language switch */
.lang{display:flex;align-items:center;background:rgba(255,255,255,.08);transform:skewX(var(--skew));overflow:hidden;flex:none}
.lang button{
  padding:9px 14px;font-size:.7rem;font-weight:800;letter-spacing:.1em;
  color:var(--mute);transition:background var(--fast),color var(--fast);
}
.lang button > span{display:block;transform:skewX(var(--unskew))}
.lang button.is-active{background:var(--red);color:var(--white)}
.lang button:not(.is-active):hover{color:var(--white);background:rgba(255,255,255,.1)}

/* Burger */
.burger{display:none;width:44px;height:44px;position:relative;flex:none}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:var(--white);transition:transform var(--fast),opacity var(--fast)}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger.is-open i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1040px){.burger{display:block}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:78px 0 0 0;z-index:70;background:var(--black);
  padding:40px var(--gutter) 60px;display:flex;flex-direction:column;gap:6px;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity var(--fast),transform var(--fast),visibility var(--fast);
  overflow-y:auto;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer a{
  font-family:var(--font-display);font-size:clamp(1.7rem,7vw,2.6rem);font-weight:800;
  text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--line);
  transition:color var(--fast),padding-left var(--fast);
}
.drawer a:hover{color:var(--red);padding-left:10px}
.drawer .btn{margin-top:28px;align-self:flex-start;font-size:.74rem;letter-spacing:.1em;white-space:nowrap}

/* ---------- 8. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(40px,7vw,90px);padding-top:120px}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 85% at 78% 12%,rgba(228,37,1,.30) 0%,rgba(228,37,1,0) 58%),
    radial-gradient(90% 70% at 8% 92%,rgba(228,37,1,.14) 0%,rgba(228,37,1,0) 60%),
    var(--black);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(75deg,rgba(255,255,255,.045) 0 1px,transparent 1px 74px);
}
.hero__photo{
  position:absolute;right:-4%;bottom:0;height:88%;width:auto;z-index:1;
  object-fit:contain;object-position:bottom right;
  filter:grayscale(.15) contrast(1.08);
  mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%);
  -webkit-mask-image:linear-gradient(to left,#000 58%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 16%);
  mask-composite:intersect;-webkit-mask-composite:source-in;
  opacity:.9;
}
@media (max-width:900px){.hero__photo{right:-22%;height:62%;opacity:.4}}
.hero__inner{position:relative;z-index:2;min-width:0}
.hero h1{max-width:14ch}
.hero h1 .line{display:block;padding-block:.06em}
.hero h1 .line > span{display:block}
.hero__kicker{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:26px;
  background:rgba(255,255,255,.07);padding:10px 18px;transform:skewX(var(--skew));
  font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.hero__kicker > *{transform:skewX(var(--unskew))}
.hero__lede{margin-top:26px}
.hero__scroll{
  position:absolute;left:var(--gutter);bottom:26px;z-index:3;
  font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute-soft);
  display:flex;align-items:center;gap:10px;
}
.hero__scroll i{width:1px;height:34px;background:linear-gradient(var(--red),transparent);display:block;animation:drop 1.9s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){.hero__scroll{display:none}}

/* ---------- 9. TICKER ---------- */
.ticker{background:var(--red);color:var(--white);overflow:hidden;padding:14px 0;position:relative;z-index:3}
.ticker__track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{
  display:flex;align-items:center;gap:26px;padding-right:26px;
  font-family:var(--font-display);font-weight:800;font-style:italic;font-size:.95rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.ticker__item::after{content:"";width:11px;height:15px;background:var(--white);transform:skewX(var(--skew));flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none}}

/* ---------- 10. FEATURE / SERVICE CARDS ---------- */
.card{
  position:relative;background:var(--ink-700);padding:clamp(26px,3vw,40px);
  overflow:hidden;transition:background var(--fast),transform var(--fast);
  border-top:3px solid transparent;
}
.card::before{
  content:"";position:absolute;left:-30%;top:0;bottom:0;width:60%;
  background:var(--red);transform:skewX(var(--skew)) translateX(-130%);
  transition:transform var(--slow);z-index:0;
}
.card:hover::before{transform:skewX(var(--skew)) translateX(200%)}
.card > *{position:relative;z-index:1}
.card:hover{background:var(--ink-500);transform:translateY(-6px)}
.card__idx{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:.9rem;color:var(--red);letter-spacing:.1em;margin-bottom:18px;display:block}
.card h3{font-size:clamp(1.15rem,1.7vw,1.5rem);margin-bottom:12px}
.card p{color:var(--mute);font-size:.95rem}
.card__meta{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 12px;background:rgba(255,255,255,.08);color:var(--mute);
  transform:skewX(var(--skew));white-space:nowrap;
}
.chiprow{display:flex;flex-wrap:wrap;gap:9px}
.chip > span{display:block;transform:skewX(var(--unskew))}
.chip--red{background:var(--red);color:var(--white)}
.section--paper .card{background:#fff;border:1px solid var(--paper-line)}
.section--paper .card p{color:var(--paper-mute)}
.section--paper .card:hover{background:#fff}
.section--paper .chip{background:rgba(0,0,0,.06);color:var(--paper-mute)}
.section--paper .card__meta{border-top-color:var(--paper-line)}

/* ---------- 11. TALENT CARDS ---------- */
.talent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media (max-width:960px){.talent-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.talent-grid{grid-template-columns:1fr}}

.talent{position:relative;display:block;overflow:hidden;background:var(--ink-700);aspect-ratio:4/5}
.talent img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center center);filter:grayscale(.3) contrast(1.05);transition:transform .8s var(--ease),filter var(--slow)}
.talent:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.1)}
.talent__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.62) 46%,rgba(0,0,0,.14) 72%,rgba(0,0,0,.28) 100%)}
.talent__bar{position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red);transform:skewX(var(--skew)) scaleX(0);transform-origin:left;transition:transform var(--slow)}
.talent:hover .talent__bar{transform:skewX(var(--skew)) scaleX(1.2)}
.talent__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,2.4vw,30px);color:var(--white)}
.talent__role{
  display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--red);padding:6px 12px;transform:skewX(var(--skew));margin-bottom:18px;
}
.talent__role > span{display:block;transform:skewX(var(--unskew))}
.talent h3{color:var(--white);font-size:clamp(1.3rem,1.95vw,1.65rem);line-height:1.02;margin-bottom:10px;overflow-wrap:anywhere}
.talent__line{display:block;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.72);letter-spacing:.02em}
.talent__cta{
  margin-top:16px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);
  transition:opacity var(--fast),transform var(--fast);
}
.talent:hover .talent__cta{opacity:1;transform:none}
@media (hover:none){.talent__cta{opacity:1;transform:none}}

/* ---------- 12. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--black);padding:clamp(24px,3vw,38px) clamp(18px,2vw,28px)}
.section--paper .stats{background:var(--paper-line)}
.section--paper .stat{background:var(--paper)}
.stat__n{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:clamp(2.4rem,5vw,4rem);line-height:.9;letter-spacing:-.03em}
.stat__n em{font-style:italic;color:var(--red)}
.stat__l{margin-top:12px;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.section--paper .stat__l{color:var(--paper-mute)}

/* ---------- 13. PLAYER PROFILE PAGE ---------- */
.profile-hero{position:relative;padding-top:150px;padding-bottom:clamp(50px,7vw,90px);overflow:hidden}
.profile-hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 80% at 82% 22%,rgba(228,37,1,.26),transparent 60%),var(--black);
}
.profile-hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:repeating-linear-gradient(75deg,rgba(255,255,255,.04) 0 1px,transparent 1px 68px);
}
.profile-hero .shell{position:relative;z-index:1}
.profile-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,4vw,60px);align-items:end}
@media (max-width:900px){.profile-grid{grid-template-columns:1fr}}
.profile-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink-700)}
.profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
.profile-photo::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;background:var(--red);transform:skewX(var(--skew)) scaleX(1.2)}
.profile-name{font-size:clamp(2.4rem,6.4vw,5rem)}
.profile-meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 8px}

.attr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:34px}
@media (max-width:1100px){.attr-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.attr-grid{grid-template-columns:1fr}}
.attr{background:var(--ink-800);padding:20px 22px}
.attr dt{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-soft)}
.attr dd{margin:8px 0 0;font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.15;text-transform:uppercase;letter-spacing:-.01em}

/* Radar-style rating bars */
.bars{display:grid;gap:16px;margin-top:8px}
.bar__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:16px}
.bar__label{font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--mute)}
.section--paper .bar__label{color:var(--paper-mute)}
.bar__val{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:1.05rem;color:var(--red)}
.bar__track{height:8px;background:rgba(255,255,255,.1);position:relative;overflow:hidden}
.section--paper .bar__track{background:rgba(0,0,0,.09)}
.bar__fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--red);transform:skewX(var(--skew)) scaleX(1.02);transition:width 1.1s var(--ease)}
.is-in .bar__fill{width:var(--w)}

/* Timeline */
.timeline{position:relative;padding-left:34px;margin-top:8px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.section--paper .timeline::before{background:var(--paper-line)}
.tl{position:relative;padding-bottom:34px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-34px;top:6px;width:14px;height:16px;background:var(--red);transform:skewX(var(--skew))}
.tl__yr{font-family:var(--font-display);font-style:italic;font-weight:800;font-size:.85rem;letter-spacing:.14em;color:var(--red);text-transform:uppercase}
.tl h4{font-family:var(--font-display);font-weight:800;font-size:1.15rem;text-transform:uppercase;margin:6px 0 8px}
.tl p{color:var(--mute);font-size:.94rem}
.section--paper .tl p{color:var(--paper-mute)}

/* Video / reel */
.reel{position:relative;aspect-ratio:16/9;background:var(--ink-700);overflow:hidden;display:grid;place-items:center;border:1px solid var(--line)}
.reel__bg{position:absolute;inset:0;opacity:.28;object-fit:cover;width:100%;height:100%;filter:grayscale(1)}
.reel__cta{position:relative;text-align:center;padding:24px}
.reel__play{
  width:78px;height:78px;margin:0 auto 20px;background:var(--red);display:grid;place-items:center;
  transform:skewX(var(--skew));transition:transform var(--fast),background var(--fast);
}
.reel:hover .reel__play{transform:skewX(var(--skew)) scale(1.08)}
.reel__play svg{transform:skewX(var(--unskew)) translateX(2px)}
.reel__note{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-soft);margin-top:14px}

/* ---------- 14. NETWORK MAP ---------- */
.regions{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media (max-width:900px){.regions{grid-template-columns:1fr}}
.region{background:var(--black);padding:clamp(28px,3.2vw,44px);position:relative;overflow:hidden;transition:background var(--fast)}
.region:hover{background:var(--ink-600)}
.region__flagline{display:flex;gap:6px;margin-bottom:22px}
.region__flagline i{width:16px;height:22px;background:var(--red);transform:skewX(var(--skew));opacity:.25}
.region__flagline i:first-child{opacity:1}
.region__flagline i:nth-child(2){opacity:.6}
.region h3{font-size:clamp(1.35rem,2.2vw,1.9rem);margin-bottom:14px}
.region ul{margin-top:22px;display:grid;gap:10px}
.region li{display:flex;gap:12px;align-items:baseline;font-size:.9rem;color:var(--mute)}
.region li::before{content:"";width:8px;height:11px;background:var(--red);transform:skewX(var(--skew));flex:none;position:relative;top:2px}

/* ---------- 15. QUOTE ---------- */
.quote{position:relative;padding:clamp(34px,4vw,56px);background:var(--ink-800);border-left:6px solid var(--red)}
.quote blockquote{margin:0;font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.06;letter-spacing:-.02em}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}

/* ---------- 16. CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;background:var(--red);color:var(--white);padding-block:clamp(56px,7vw,96px)}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(75deg,rgba(0,0,0,.10) 0 2px,transparent 2px 48px);
  pointer-events:none;
}
.cta-band .shell{position:relative;z-index:1}
.cta-band h2{max-width:16ch}
.cta-band .btn--primary{background:var(--black);color:var(--white)}
.cta-band .btn--primary:hover{background:var(--white);color:var(--black)}
.cta-band .btn--ghost{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}

/* ---------- 17. FORMS ---------- */
.form{display:grid;gap:20px}
.form > .btn{justify-self:start}
.field{display:grid;gap:8px}
.field label{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.field input,.field select,.field textarea{
  width:100%;padding:15px 16px;background:var(--ink-700);color:var(--white);
  border:1px solid var(--line);font-family:var(--font-ui);font-size:.95rem;
  transition:border-color var(--fast),background var(--fast);
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:var(--ink-500)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--red) 50%),linear-gradient(135deg,var(--red) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.field--2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:600px){.field--2{grid-template-columns:1fr}}
.form__note{font-size:.76rem;color:var(--mute-soft)}
.form__to{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;color:var(--mute)}
.form__to i{width:8px;height:11px;background:var(--red);transform:skewX(var(--skew));flex:none;position:relative;top:1px}
.form__to a{color:var(--white);font-weight:600;border-bottom:1px solid var(--red);transition:color var(--fast)}
.form__to a:hover{color:var(--red)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- 18. CONTACT PANELS ---------- */
.contact-list{display:grid;gap:1px;background:var(--line);margin-top:34px}
.contact-row{background:var(--black);padding:24px 0;display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:baseline}
@media (max-width:560px){.contact-row{grid-template-columns:1fr;gap:6px}}
.contact-row dt{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-soft)}
.contact-row dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(1.05rem,1.8vw,1.4rem);text-transform:uppercase;word-break:break-word}
.contact-row dd a:hover{color:var(--red)}

/* ---------- 19. FOOTER ---------- */
.footer{background:var(--ink-800);padding-top:clamp(56px,7vw,88px);border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
@media (max-width:860px){.footer__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__top{grid-template-columns:1fr}}
.footer__logo{height:38px;width:auto;margin-bottom:22px}
.footer h4{font-size:.72rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin-bottom:18px}
.footer ul{display:grid;gap:11px}
.footer a{font-size:.9rem;color:var(--mute);transition:color var(--fast)}
.footer a:hover{color:var(--white)}
.footer__bottom{
  margin-top:clamp(40px,5vw,64px);padding:26px 0;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:.76rem;color:var(--mute-soft);
}
.footer__eco{display:flex;align-items:center;gap:10px}
.footer__eco i{width:9px;height:12px;background:var(--red);transform:skewX(var(--skew))}

/* ---------- 20. REVEAL ---------- */
.reveal-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-ready .reveal.is-in{opacity:1;transform:none}
.reveal-ready .reveal[data-d="1"]{transition-delay:.08s}
.reveal-ready .reveal[data-d="2"]{transition-delay:.16s}
.reveal-ready .reveal[data-d="3"]{transition-delay:.24s}
.reveal-ready .reveal[data-d="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal-ready .reveal{opacity:1;transform:none;transition:none}
  .hero__scroll i{animation:none}
}

/* ---------- 21. UTILITIES ---------- */
.mt-0{margin-top:0}.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:clamp(38px,5vw,64px)}
.mb-m{margin-bottom:28px}.mb-l{margin-bottom:clamp(38px,5vw,64px)}
.center{text-align:center}
.max-60{max-width:60ch}
.flexline{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.hr{height:1px;background:var(--line);border:0;margin-block:clamp(38px,5vw,64px)}
.section--paper .hr{background:var(--paper-line)}
.skip{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:12px;top:12px}

/* ---------- 22. PER-SUBJECT IMAGE FRAMING ----------
   The portraits are now delivered pre-cropped to 4:5, the same ratio as the
   cards and profile frames, so they fill without repositioning. Nudge a
   subject here (e.g. --pos:40% 10%) if you swap in a differently framed shot. */
.talent[data-subject="vivian"] img{--pos:center center}
.talent[data-subject="brice"] img{--pos:center center}
.talent[data-subject="taka"] img{--pos:center center}
.profile-photo img{object-position:center center}

/* Talent cards keep the dark treatment even inside a light section */
.section--paper .talent,
.section--paper .talent h3,
.section--paper .talent__body{color:var(--white)}
.section--paper .talent__line{color:rgba(255,255,255,.72)}

/* ---------- 23. RESPONSIVE AND ACCESSIBILITY REPAIRS ---------- */
.grid > *, .split > *, .footer__top > *, .profile-grid > *, .stats > *{min-width:0}
h1,h2,h3,h4{overflow-wrap:break-word}
.btn{max-width:100%;min-height:48px}
.btn .arrow,.tlink .arrow{flex:none}
.btn > span{min-width:0;overflow-wrap:break-word}
.header.is-menu-open{background:var(--black)}
.drawer .btn{padding:16px 22px;white-space:normal;border:0}
.drawer .btn:hover{padding-left:22px}
.field input,.field select,.field textarea{font-size:1rem}
.talent:focus-visible .talent__cta{opacity:1;transform:none}
.chip{max-width:100%;white-space:normal}
@media (max-width:900px){
  .hero{min-height:100vh;min-height:100svh;align-items:center;padding-top:120px;padding-bottom:56px}
  .hero__photo{right:0;top:0;bottom:auto;width:100%;height:100%;object-fit:cover;object-position:65% center;opacity:.28}
  .hero__lede{max-width:48ch;color:rgba(255,255,255,.85)}
  .hero__kicker{max-width:100%;letter-spacing:.12em;line-height:1.6}
}
@media (max-width:600px){
  :root{--gutter:24px;--sec-y:64px}
  .header__bar{gap:12px}
  .header__right{gap:8px}
  .brand img{height:30px}
  .lang button{padding:12px 11px;min-height:44px}
  .hero .d1{font-size:clamp(2.5rem,10.3vw,3.8rem);line-height:1.02}
  .d2{font-size:clamp(1.9rem,7.5vw,2.8rem);line-height:1.06}
  .d3{font-size:clamp(1.7rem,6.5vw,2.3rem);line-height:1.08}
  .hero__kicker{font-size:.6rem;padding:8px 12px;gap:9px;margin-bottom:20px}
  .hero__lede{font-size:1rem;line-height:1.65;margin-top:20px}
  .btn-row{flex-direction:column;align-items:stretch;gap:16px;margin-top:28px;padding-inline:8px}
  .btn-row .btn{width:100%;justify-content:center;text-align:center;padding:16px 20px;font-size:.72rem;letter-spacing:.08em}
  .btn-row .tlink{align-self:flex-start}
  .drawer{padding-top:24px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
  .drawer .btn{align-self:stretch;text-align:center;justify-content:center;margin-inline:8px;letter-spacing:.06em}
  .stat__l{font-size:.65rem;letter-spacing:.08em;overflow-wrap:break-word}
  .talent__role{max-width:100%;font-size:.6rem;letter-spacing:.1em}
  .profile-name{font-size:clamp(2rem,9vw,3.4rem);line-height:1.05}
  .eyebrow{gap:10px;letter-spacing:.15em}
  .footer__eco{flex-wrap:wrap}
}
@media (max-width:360px){
  :root{--gutter:20px}
  .header__bar{gap:8px}
  .header__right{gap:4px}
  .brand img{height:27px}
  .lang button{padding-inline:9px}
  .stat{padding-inline:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Recruitment brief: readable source note on the light panel. */
.section--paper .form__note{color:var(--paper-mute)}
#recruitment,#scouting-video{scroll-margin-top:100px}
#scouting-video{display:block}