/* =====================================================================
   RISHAB SAINI — PORTFOLIO REDESIGN (preview)
   Brand kept: black + red, Bebas Neue / DM Sans / DM Mono.
   Structure: tokens → base → buttons → nav → hero → sections → responsive
   ===================================================================== */

/* ── TOKENS ───────────────────────────────────────────────────────── */
:root{
  /* palette (brand: #060606 ink + #e8002d red) */
  --ink:#060606;
  --ink-2:#0d0d0f;
  --ink-3:#151517;
  --ink-4:#1d1d20;
  --paper:#f5f5f7;
  --paper-2:#ffffff;
  --red:#e8002d;
  --red-hi:#ff4d66;      /* red text on dark  (AA contrast) */
  --red-lo:#c4002a;      /* red text on light (AA contrast) */

  /* text */
  --t-dark:#f0f0f1;
  --t-dark-2:rgba(240,240,241,.68);
  --t-light:#1d1d1f;
  --t-light-2:#5a5a60;

  /* lines */
  --line-dark:rgba(255,255,255,.12);
  --line-light:rgba(0,0,0,.10);

  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:clamp(20px,5vw,56px);
  --section-y:clamp(80px,11vw,144px);

  /* shape + motion */
  --radius:22px;
  --radius-sm:14px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:56px;

  /* fonts */
  --f-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --f-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

/* section themes — components read these, so one component works on light or dark */
.theme-dark{
  --bg:var(--ink);
  --bg-2:var(--ink-2);
  --card:var(--ink-3);
  --card-2:var(--ink-4);
  --fg:var(--t-dark);
  --fg-2:var(--t-dark-2);
  --line:var(--line-dark);
  --accent:var(--red-hi);
  --focus:#ffffff;
}
.theme-light{
  --bg:var(--paper);
  --bg-2:#ececf0;
  --card:#ffffff;
  --card-2:#f0f0f3;
  --fg:var(--t-light);
  --fg-2:var(--t-light-2);
  --line:var(--line-light);
  --accent:var(--red-lo);
  --focus:#1d1d1f;
}

/* ── BASE ─────────────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  background:var(--ink);
}
body{
  background:var(--ink);
  color:var(--t-dark);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;                 /* fallback */
  text-rendering:optimizeLegibility;
}
@supports (overflow:clip){ body{overflow-x:clip;} }   /* clip keeps position:sticky working */
img,canvas{display:block;max-width:100%;}
ul{list-style:none;}
a{color:inherit;}
section[id]{scroll-margin-top:calc(var(--nav-h) - 1px);}
#home{scroll-margin-top:0;}
::selection{background:var(--red);color:#fff;}

.wrap{width:min(100% - 2*var(--gutter),1200px);margin-inline:auto;}
.sec{background:var(--bg);color:var(--fg);padding-block:var(--section-y);position:relative;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

.skip-link{
  position:fixed;top:12px;left:12px;z-index:1000;
  background:#fff;color:#000;padding:10px 16px;border-radius:999px;
  font:500 13px/1 var(--f-sans);text-decoration:none;
  transform:translateY(-200%);transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translateY(0);}

/* visible keyboard focus everywhere */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus,#fff);
  outline-offset:3px;
  border-radius:6px;
}

/* ── TYPE ─────────────────────────────────────────────────────────── */
.eyebrow{
  font:500 12px/1.2 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
}
.h2{
  font-family:var(--f-sans);
  font-weight:650;
  font-size:clamp(40px,6.4vw,88px);
  line-height:1.02;
  letter-spacing:-.035em;
  color:var(--fg);
  margin-top:var(--s4);
  text-wrap:balance;
}
.lede{
  font-size:clamp(18px,1.7vw,22px);
  line-height:1.5;
  color:var(--fg-2);
  max-width:58ch;
  margin-top:var(--s5);
}

/* ── BUTTONS (one system) ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 24px;
  font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;border-radius:999px;border:1px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease-out),background-color .25s,border-color .25s,color .25s,box-shadow .35s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.98);}
.btn--primary{background:var(--red);color:#fff;box-shadow:0 8px 28px rgba(232,0,45,.28);}
.btn--primary:hover{background:#ff1a44;box-shadow:0 12px 36px rgba(232,0,45,.4);}
.btn--ghost{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.28);color:#fff;}
.btn--ghost:hover{background:#fff;border-color:#fff;color:#000;}

/* ── NAV (translucent, readable fallback) ─────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--nav-h);
  background:rgba(6,6,6,.94);                         /* readable fallback */
  border-bottom:1px solid transparent;
  transition:border-color .3s,background-color .3s;
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .nav{background:rgba(6,6,6,.62);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);}
}
.nav.is-scrolled{border-bottom-color:var(--line-dark);}
.nav-in{
  height:100%;width:min(100% - 2*var(--gutter),1200px);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.n-logo{font:400 21px/1 var(--f-display);letter-spacing:.14em;color:#fff;text-decoration:none;white-space:nowrap;}
.n-logo span{color:#ff2a50;}
.n-links{display:flex;gap:clamp(16px,2.4vw,34px);margin-inline:auto;}
.n-links a{
  position:relative;display:block;padding:8px 2px;
  font:500 12px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:rgba(240,240,241,.72);
  transition:color .2s;
}
.n-links a::after{
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out);
}
.n-links a:hover,.n-links a.on{color:#fff;}
.n-links a:hover::after,.n-links a.on::after{transform:scaleX(1);}
.n-only-m{display:none;}
.n-actions{display:flex;align-items:center;gap:10px;}
.n-resume{
  display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.28);
  transition:background-color .25s,color .25s,border-color .25s;
}
.n-resume:hover{background:#fff;color:#000;border-color:#fff;}
.n-cta{
  display:inline-flex;align-items:center;min-height:36px;padding:0 18px;border-radius:999px;
  font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#fff;background:var(--red);
  transition:background-color .25s,transform .3s var(--ease-out);
}
.n-cta:hover{background:#ff1a44;transform:translateY(-1px);}

/* hamburger (hidden on desktop, shown only when JS is running on small screens) */
.n-toggle{
  display:none;position:relative;width:44px;height:44px;border-radius:50%;
  background:transparent;border:1px solid rgba(255,255,255,.28);cursor:pointer;color:#fff;
}
.n-toggle span{
  position:absolute;left:13px;right:13px;height:1.5px;background:currentColor;border-radius:2px;
  transition:transform .35s var(--ease-out),top .35s var(--ease-out);
}
.n-toggle span:nth-child(1){top:17px;}
.n-toggle span:nth-child(2){top:25px;}
.nav.is-open .n-toggle span:nth-child(1){top:21px;transform:rotate(45deg);}
.nav.is-open .n-toggle span:nth-child(2){top:21px;transform:rotate(-45deg);}

/* ── HERO ─────────────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 64px;
  background:var(--ink);color:var(--t-dark);
}
.hero-grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(32px,6vw,96px);align-items:center;
}
.h-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:500 12px/1.3 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(240,240,241,.78);
}
.h-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);flex-shrink:0;}
.h-name{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(76px,11.5vw,176px);
  line-height:.86;letter-spacing:.01em;margin-top:22px;
}
.h-name span{display:block;}
.h-name .n1{color:#fff;}
.h-name .n2{color:#fff;}
@supports (-webkit-text-stroke:2px #fff){
  .h-name .n2{color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.92);}
}
.h-name .n3{color:var(--red);}
.h-tagline{
  max-width:46ch;margin-top:28px;padding-left:18px;
  border-left:2px solid var(--red);
  font-size:clamp(17px,1.5vw,20px);line-height:1.55;font-style:italic;font-weight:400;
  color:rgba(240,240,241,.86);
}
.h-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;}
.h-pills{display:flex;flex-wrap:wrap;margin-top:30px;max-width:62ch;gap:8px 26px;}
.pill{font:500 11px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(240,240,241,.72);}
.pill.hot{color:#fff;}

.h-figure{
  position:relative;justify-self:end;width:min(100%,440px);aspect-ratio:3/4;
  border-radius:28px;overflow:hidden;background:var(--ink-3);
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1);
}
.h-figure img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transition:transform 1.4s var(--ease-out);
}
.h-figure:hover img{transform:scale(1.035);}
.h-cap{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex;flex-direction:column;gap:2px;
  padding:13px 16px;border-radius:16px;
  background:rgba(10,10,10,.9);border:1px solid rgba(255,255,255,.14);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .h-cap{background:rgba(10,10,10,.76);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
}
.h-cap-t{font:600 15px/1.25 var(--f-sans);color:#fff;}
.h-cap-s{font:400 13px/1.35 var(--f-sans);color:rgba(240,240,241,.88);}

.h-stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;
  margin-top:clamp(44px,6vw,80px);padding-top:28px;
  border-top:1px solid var(--line-dark);
}
.hst-n{font:400 clamp(44px,5vw,66px)/1 var(--f-display);letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums;}
.hst-n .a{color:var(--red-hi);}
.hst-n{display:flex;align-items:center;}
.hst-ico{color:var(--red-hi);width:.82em;height:.82em;}
.hst-l{margin-top:8px;font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(240,240,241,.68);}

.scroll-ind{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;
  font:500 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:rgba(240,240,241,.5);
}
.scroll-ln{display:block;width:22px;height:1px;background:currentColor;}

/* hero entrance — staggered; only when JS is running, ends fully visible */
.js .h-anim{animation:hIn .95s var(--ease-out) both;animation-delay:calc(var(--i,0)*90ms + 80ms);}
@keyframes hIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ── TICKER ───────────────────────────────────────────────────────── */
.ticker{background:var(--ink-2);border-block:1px solid var(--line-dark);overflow:hidden;padding:15px 0;color:var(--t-dark-2);}
.t-track{display:flex;width:max-content;animation:marq 80s linear infinite;}
.ticker:hover .t-track{animation-play-state:paused;}
.t-group{display:flex;flex-shrink:0;}
.t-item{
  position:relative;padding:0 30px;white-space:nowrap;
  font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
}
.t-item::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--red);}
@keyframes marq{to{transform:translateX(-50%);}}

/* ── ABOUT ────────────────────────────────────────────────────────── */
#about{padding-bottom:clamp(48px,7vw,80px);}
.about-g{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,96px);align-items:start;
  margin-top:clamp(40px,6vw,72px);
}
.at p{font-size:clamp(18px,1.6vw,21px);line-height:1.62;color:var(--fg-2);margin-bottom:1.1em;max-width:60ch;}
.at p strong{color:var(--fg);font-weight:600;}
.at blockquote{
  margin:34px 0;padding-left:24px;border-left:3px solid var(--red);
  font-size:clamp(24px,2.7vw,34px);font-weight:600;line-height:1.2;letter-spacing:-.022em;color:var(--fg);
  text-wrap:balance;
}
.ic-list{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:6px 28px;box-shadow:0 24px 70px rgba(0,0,0,.07);
}
.ic{padding:18px 0;border-bottom:1px solid var(--line);}
.ic:last-child{border-bottom:0;}
.ic-l{font:500 11px/1.2 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);}
.ic-v{margin-top:7px;font-size:16px;font-weight:500;line-height:1.45;color:var(--fg);overflow-wrap:anywhere;}
.ic-v a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:4px;transition:color .2s;}
.ic-v a:hover{color:var(--red-lo);}

/* ── CREDIBILITY ──────────────────────────────────────────────────── */
#cred{background:var(--bg);color:var(--fg);padding-bottom:clamp(64px,9vw,112px);}
#cred .wrap{border-top:1px solid var(--line);padding-top:34px;}
.cred-lbl{font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2);}
.cred-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px clamp(18px,3vw,36px);margin-top:20px;}
.cred-name{font:700 clamp(15px,1.8vw,20px)/1 var(--f-sans);letter-spacing:.2em;color:var(--fg);opacity:.72;}
.cred-sep{width:4px;height:4px;border-radius:50%;background:var(--fg);opacity:.25;}

/* ── CRICKET ──────────────────────────────────────────────────────── */
.gal{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;
  margin-top:clamp(48px,6vw,80px);
}
.gc{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card);margin:0;isolation:isolate;}
.gc img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-out);
}
.gc:hover img{transform:scale(1.045);}
.gc::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none;}
.gt{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;flex-direction:column;gap:3px;
  padding:72px 22px 20px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.84),rgba(0,0,0,.46) 55%,rgba(0,0,0,0));
}
.gt-t{font:600 16px/1.25 var(--f-sans);letter-spacing:-.01em;}
.gt-s{font:400 13px/1.4 var(--f-sans);color:rgba(255,255,255,.8);}
.gt-c{margin-top:4px;font:500 10px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);}
/* bento placement: 8+4 / 4+8 / 7+5 — equal-height rows driven by the portrait tile */
.g-team{grid-column:span 8;align-self:stretch;}
.g-trophy{grid-column:span 4;aspect-ratio:3/4;}
.g-pitch{grid-column:span 4;aspect-ratio:3/4;}
.g-ekana{grid-column:span 8;align-self:stretch;}
.g-news{grid-column:span 7;display:flex;flex-direction:column;background:#0d0d0f;}
/* the clipping keeps its full frame; caption sits below so the Tribune footer stays readable */
.g-news img{position:static;height:auto;aspect-ratio:900/758;object-fit:cover;}
.g-news .gt{position:static;padding:18px 22px 20px;background:#0d0d0f;}
.g-action{grid-column:span 5;align-self:stretch;}
.g-team img{object-position:center 30%;}
.g-pitch img{object-position:center 28%;}
.g-trophy img{object-position:center 30%;}
.g-ekana img{object-position:center 62%;}
.g-action img{object-position:62% 50%;}

.ach-g{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);
  margin-top:clamp(64px,8vw,112px);
}
.ach{border-top:1px solid var(--line);padding-top:24px;}
.ach-n{font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--accent);}
.ach-t{margin:16px 0 10px;font:600 20px/1.25 var(--f-sans);letter-spacing:-.015em;color:var(--fg);}
.ach-d{font-size:15px;line-height:1.6;color:var(--fg-2);}

/* ── BRIDGE: cricket → business (one short sticky moment) ─────────── */
.bridge{background:var(--ink);color:#fff;position:relative;}
.bridge-sticky{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,36px);text-align:center;
  padding:clamp(96px,14vw,180px) var(--gutter);
}
.bridge-line{
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(52px,10.5vw,168px);line-height:.92;letter-spacing:.01em;
  text-wrap:balance;max-width:16ch;
}
.bridge-b span{color:var(--red);}
@media (prefers-reduced-motion:no-preference){
  .js-ready .bridge{height:260vh;}
  .js-ready .bridge-sticky{position:sticky;top:0;height:100vh;height:100svh;display:block;padding:0;}
  .js-ready .bridge-line{
    position:absolute;left:50%;top:50%;width:calc(100% - 2*var(--gutter));max-width:16ch;
    will-change:transform,opacity;
  }
  .js-ready .bridge-a{opacity:var(--a,1);transform:translate(-50%,calc(-50% + var(--ay,0px)));}
  .js-ready .bridge-b{opacity:var(--b,0);transform:translate(-50%,calc(-50% + var(--by,28px)));}
}

/* ── EXPERIENCE (timeline) ────────────────────────────────────────── */
.exp-list{margin-top:clamp(48px,6vw,80px);}
.exp-c{
  display:grid;grid-template-columns:150px 28px minmax(0,1fr);
  column-gap:clamp(16px,2.4vw,32px);align-items:stretch;
}
.exp-yr{
  padding-top:30px;text-align:right;
  font:500 13px/1.5 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2);
}
.exp-rail{position:relative;}
.exp-rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line);}
.exp-list>.exp-c:first-child .exp-rail::before{top:42px;}
.exp-list>.exp-c:last-child .exp-rail::before{bottom:auto;height:42px;}
.dot{
  position:absolute;left:50%;top:35px;width:14px;height:14px;margin-left:-7px;z-index:1;
  border-radius:50%;background:var(--paper);border:2px solid var(--fg);
}
.is-current .dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 6px rgba(232,0,45,.16);}
.exp-body{
  margin-bottom:28px;padding:28px clamp(22px,3vw,36px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out),border-color .3s;
}
.exp-body:hover{transform:translateY(-3px);box-shadow:0 26px 64px rgba(0,0,0,.09);border-color:rgba(0,0,0,.2);}
.exp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.exp-org{font:650 clamp(20px,2vw,26px)/1.2 var(--f-sans);letter-spacing:-.02em;color:var(--fg);}
.exp-role{margin-top:6px;font-size:15px;line-height:1.45;color:var(--fg-2);}
.exp-badge{
  flex-shrink:0;white-space:nowrap;
  font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--fg-2);
}
.is-current .exp-badge{background:var(--red);border-color:var(--red);color:#fff;}
.exp-ul{margin-top:18px;display:grid;gap:10px;}
.exp-ul li{position:relative;padding-left:20px;font-size:16px;line-height:1.55;color:var(--fg);}
.exp-ul li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--red);}
.exp-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.exp-tag{
  font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:8px 11px;border-radius:999px;background:var(--card-2);color:var(--fg-2);
}

/* ── PROJECTS ─────────────────────────────────────────────────────── */
.proj-g{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:clamp(48px,6vw,80px);
}
.pc{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .6s var(--ease-out),border-color .3s,box-shadow .6s var(--ease-out);
}
.pc:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.26);box-shadow:0 36px 90px rgba(0,0,0,.6);}

/* CSS typographic cover — uses the project's real title + category */
.pc-cover{
  position:relative;isolation:isolate;overflow:hidden;
  aspect-ratio:16/11;padding:22px 24px 24px;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  background:var(--cv-bg,#111);color:#fff;
}
.pc-cover::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(115deg,transparent 0 22px,rgba(255,255,255,.04) 22px 23px);
}
.pc-cover::after{
  content:"";position:absolute;right:-6px;bottom:-34px;z-index:-1;
  font:400 220px/1 var(--f-display);color:rgba(255,255,255,.07);letter-spacing:.02em;pointer-events:none;
  transition:transform 1.2s var(--ease-out);
}
.pc:hover .pc-cover::after{transform:translate(-8px,-8px) scale(1.04);}
.pc-cover--1{--cv-bg:radial-gradient(120% 90% at 100% 0%,rgba(232,0,45,.6),transparent 60%),linear-gradient(160deg,#1c0a0e,#060606);}
.pc-cover--2{--cv-bg:radial-gradient(110% 90% at 0% 100%,rgba(232,0,45,.42),transparent 55%),linear-gradient(160deg,#272a30,#0b0c0e);}
.pc-cover--3{--cv-bg:linear-gradient(150deg,#b3001f 0%,#5a0010 55%,#1a0306 100%);}
.pc-cover--4{--cv-bg:radial-gradient(100% 80% at 80% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(160deg,#1b1b1f,#050505);}
.pc-cover--5{--cv-bg:radial-gradient(120% 90% at 0% 0%,rgba(232,0,45,.52),transparent 58%),linear-gradient(200deg,#10131a,#050507);}
.pc-cover--6{--cv-bg:linear-gradient(160deg,#1f1f23,#0d0d0f);}
.pc-cover--1::after{content:"01";}
.pc-cover--2::after{content:"02";}
.pc-cover--3::after{content:"03";}
.pc-cover--4::after{content:"04";}
.pc-cover--5::after{content:"05";}
.pc-cover--6::after{content:"06";}
.pc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.pc-cat{
  font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.9);
  padding:7px 11px;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.2);
}
.pc-num{font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.8);}
.pc-title{
  font:400 clamp(34px,3.3vw,46px)/.95 var(--f-display);letter-spacing:.015em;color:#fff;
  max-width:13ch;text-wrap:balance;
}
.pc-body{display:flex;flex-direction:column;gap:18px;padding:24px;flex:1;}
.pc-desc{font-size:15.5px;line-height:1.6;color:var(--fg-2);}
.pc-tools{display:flex;flex-wrap:wrap;gap:7px;}
.pc-tool{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border-radius:999px;border:1px solid var(--line);color:var(--fg-2);
}
.pc-cta{
  position:static;margin-top:auto;width:fit-content;
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;
  font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;
  transition:background-color .3s,border-color .3s;
}
.pc-cta span[aria-hidden]{display:inline-block;transition:transform .4s var(--ease-out);}
/* stretched link: the whole card is the tap target (works on touch, no hover needed) */
a.pc-cta::after{content:"";position:absolute;inset:0;border-radius:var(--radius);}
.pc:hover a.pc-cta{background:var(--red);border-color:var(--red);}
.pc:hover a.pc-cta span[aria-hidden]{transform:translateX(4px);}
a.pc-cta:focus-visible{outline:none;}
a.pc-cta:focus-visible::after{outline:2px solid var(--focus);outline-offset:-3px;}
.pc--soon:hover{transform:none;box-shadow:none;border-color:var(--line);}
.pc-cta--soon{color:var(--fg-2);border-style:dashed;border-color:rgba(255,255,255,.2);}

/* ── SKILLS ───────────────────────────────────────────────────────── */
.sk-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(48px,6vw,80px);}
.sk{
  display:flex;flex-direction:column;gap:14px;padding:30px 28px 28px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.sk:hover{transform:translateY(-5px);box-shadow:0 30px 72px rgba(0,0,0,.1);}
.sk-ico,.cert-ico,.fc-ico{
  width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
  background:var(--card-2);font-size:24px;line-height:1;
}
.sk-name{font:650 21px/1.2 var(--f-sans);letter-spacing:-.02em;color:var(--fg);}
.sk-desc{flex:1;font-size:15.5px;line-height:1.6;color:var(--fg-2);}
.sk-bar-w{height:4px;border-radius:4px;background:var(--card-2);overflow:hidden;}
.sk-bar{height:100%;width:var(--w,0);border-radius:4px;background:linear-gradient(90deg,var(--red),#ff6a7f);}
.js-ready .sk-bar{width:0;transition:width 1.5s var(--ease-out) .25s;}
.js-ready .sk.on .sk-bar{width:var(--w);}
.sk-tools{display:flex;flex-wrap:wrap;gap:7px;}
.sk-tool,.fc-tag{
  font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  padding:7px 10px;border-radius:999px;
}
.sk-tool{background:var(--card-2);color:var(--fg-2);}

/* ── SPORT IN MOTION ──────────────────────────────────────────────── */
.anim-wrap{
  margin-top:clamp(40px,5vw,64px);padding:clamp(16px,2.4vw,28px);overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.anim-tabs{display:inline-flex;flex-wrap:wrap;gap:6px;padding:5px;margin-bottom:20px;border-radius:999px;background:rgba(255,255,255,.07);}
.anim-tab{
  min-height:40px;padding:0 18px;border:0;border-radius:999px;background:transparent;cursor:pointer;
  font:500 13px/1 var(--f-sans);color:var(--t-dark-2);
  transition:background-color .25s,color .25s;
}
.anim-tab:hover{color:#fff;}
.anim-tab.on{background:#fff;color:#000;}
#sc{width:100%;height:240px;border-radius:14px;background:#010a01;}

/* ── CERTIFICATIONS ───────────────────────────────────────────────── */
.cert-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,80px);}
.cert{
  display:flex;flex-direction:column;gap:10px;padding:28px 24px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .55s var(--ease-out),box-shadow .55s var(--ease-out);
}
.cert:hover{transform:translateY(-4px);box-shadow:0 26px 64px rgba(0,0,0,.09);}
.cert-ico{margin-bottom:10px;}
.cert-pl{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.cert-nm{font:600 19px/1.3 var(--f-sans);letter-spacing:-.015em;color:var(--fg);}

/* ── FUTURE ───────────────────────────────────────────────────────── */
.fut-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,80px);}
.fc{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;
  padding:32px 28px 30px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  transition:transform .6s var(--ease-out),border-color .3s,box-shadow .6s var(--ease-out);
}
.fc::before{
  content:"";position:absolute;right:-30%;top:-40%;width:80%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,0,45,.22),transparent);opacity:0;
  transition:opacity .6s var(--ease-out);pointer-events:none;
}
.fc:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.22);box-shadow:0 30px 80px rgba(0,0,0,.5);}
.fc:hover::before{opacity:1;}
.fc-wide{grid-column:1/-1;}
.fc-title{font:650 22px/1.2 var(--f-sans);letter-spacing:-.02em;color:var(--fg);padding-right:28px;}
.fc-desc{font-size:15.5px;line-height:1.65;color:var(--fg-2);max-width:72ch;}
.fc-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px;}
.fc-tag{border:1px solid var(--line);color:var(--fg-2);}
.fc-arr{position:absolute;top:26px;right:26px;font-size:20px;line-height:1;color:var(--fg-2);transition:transform .4s var(--ease-out),color .3s;}
.fc:hover .fc-arr{transform:translate(3px,-3px);color:#fff;}

/* ── CONTACT ──────────────────────────────────────────────────────── */
#contact{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  background:var(--ink);color:var(--fg);
  padding-block:clamp(96px,13vw,180px);
}
#contact::before{
  content:"";position:absolute;left:50%;top:50%;z-index:-1;
  width:min(1100px,150vw);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(232,0,45,.3),rgba(232,0,45,0) 70%);
}
.ct-big{
  font:400 clamp(96px,19vw,280px)/.84 var(--f-display);letter-spacing:.01em;color:#fff;margin-top:22px;
}
.ct-big .r{color:var(--red);}
.ct-sub{max-width:44ch;margin:28px auto 0;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--fg-2);}
.ct-email{
  display:inline-block;margin-top:32px;
  font:500 clamp(18px,2.6vw,30px)/1.25 var(--f-sans);letter-spacing:-.01em;color:#fff;
  text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:8px;
  overflow-wrap:anywhere;transition:color .25s;
}
.ct-email:hover{color:var(--red-hi);}
.ct-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px;}

/* ── FOOTER ───────────────────────────────────────────────────────── */
footer{background:var(--ink);border-top:1px solid var(--line-dark);padding-block:26px;color:var(--fg-2);}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;}
.fl,.fr{font:500 11px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(240,240,241,.64);}
.fr span{color:var(--red-hi);}

/* ── REVEAL SYSTEM ────────────────────────────────────────────────── */
/* Content is visible by default. The hidden start state exists ONLY after
   main.js has initialised successfully and added .js-ready to <html>.    */
.js-ready .rv:not(.on){opacity:0;}
.js-ready .rv.on{animation:rvIn .95s var(--ease-out) var(--rv-d,0s) backwards;}
@keyframes rvIn{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
.d1{--rv-d:.08s;}
.d2{--rv-d:.16s;}
.d3{--rv-d:.24s;}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */

/* tablet + mobile navigation */
@media (max-width:1020px){
  .n-cta{display:none;}
  .js .n-toggle{display:block;}
  .n-links{
    position:absolute;top:var(--nav-h);left:0;right:0;margin:0;
    display:none;flex-direction:column;gap:0;
    padding:6px var(--gutter) 24px;
    background:#060606;border-bottom:1px solid var(--line-dark);
    max-height:calc(100vh - var(--nav-h));max-height:calc(100svh - var(--nav-h));overflow-y:auto;
  }
  .js .nav.is-open .n-links{display:flex;}
  .n-links li{border-bottom:1px solid var(--line-dark);}
  .n-links li:last-child{border-bottom:0;}
  .n-links a{padding:18px 2px;font-size:14px;}
  .n-links a::after{display:none;}
  .n-only-m{display:block;padding-top:20px;}
  .n-links a.btn{width:100%;padding:0 24px;font-size:12px;letter-spacing:.14em;color:#fff;}
  .n-links a.btn:hover{color:#fff;}
}

@media (max-width:1020px){
  .hero{padding-bottom:48px;}
  .hero-grid{grid-template-columns:1fr;gap:40px;}
  .h-figure{justify-self:center;width:min(100%,380px);}
  .h-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;}
  .scroll-ind{display:none;}

  .about-g{grid-template-columns:1fr;}

  .gal{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g-team,.g-ekana,.g-news,.g-action{grid-column:span 2;align-self:auto;}
  .g-team,.g-ekana{aspect-ratio:4/3;}
  .g-action{aspect-ratio:3/2;}
  .g-trophy,.g-pitch{grid-column:span 1;}
  .g-action img{object-position:center 50%;}

  .ach-g{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;}
  .proj-g,.sk-g,.fut-g{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cert-g{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fut-g .fc:nth-child(3){grid-column:1/-1;}
}

@media (max-width:720px){
  .exp-c{
    grid-template-columns:22px minmax(0,1fr);
    grid-template-areas:"rail yr" "rail body";
    column-gap:14px;
  }
  .exp-yr{grid-area:yr;text-align:left;padding-top:0;margin-bottom:12px;}
  .exp-rail{grid-area:rail;}
  .exp-body{grid-area:body;}
  .dot{top:3px;}
  .exp-list>.exp-c:first-child .exp-rail::before{top:10px;}
  .exp-list>.exp-c:last-child .exp-rail::before{height:10px;}
  .exp-head{flex-direction:column-reverse;gap:12px;}
}

@media (max-width:560px){
  body{font-size:16px;}
  .h-ctas .btn{flex:1 1 auto;}
  .gal{grid-template-columns:1fr;gap:14px;}
  .g-team,.g-ekana,.g-news,.g-action,.g-trophy,.g-pitch{grid-column:span 1;}
  .g-trophy,.g-pitch{aspect-ratio:4/5;}
  .gt{padding:56px 18px 16px;}
  .ach-g,.proj-g,.sk-g,.fut-g,.cert-g{grid-template-columns:1fr;}
  .fut-g .fc:nth-child(3){grid-column:auto;}
  .ic-list{padding:4px 20px;}
  .ct-btns .btn{flex:1 1 100%;}
  .foot-in{justify-content:center;text-align:center;}
}

/* ── REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;
    transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important;
  }
  .js .h-anim{animation:none;}
  .js-ready .rv:not(.on){opacity:1;}
  .js-ready .rv.on{animation:none;}
  .js-ready .sk-bar{width:var(--w,0);}
  /* ticker becomes a calm, wrapped static list */
  .t-track{width:auto;display:block;animation:none;}
  .t-dup{display:none;}
  .t-group{flex-wrap:wrap;justify-content:center;row-gap:12px;}
  .pc:hover,.fc:hover,.sk:hover,.cert:hover,.exp-body:hover,.btn:hover{transform:none;}
  .gc:hover img,.h-figure:hover img{transform:none;}
}

/* ── NO JAVASCRIPT ────────────────────────────────────────────────── */
.no-js .nav-in{flex-wrap:wrap;height:auto;padding-block:10px;row-gap:6px;}
.no-js .nav{height:auto;}
.no-js .n-toggle{display:none;}
@media (max-width:1020px){
  .no-js .n-links{
    position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:2px 18px;order:3;width:100%;
    padding:0;background:none;border:0;max-height:none;
  }
  .no-js .n-links li{border:0;}
  .no-js .n-links a{padding:8px 2px;font-size:12px;}
  .no-js .n-only-m{display:none;}
  .no-js .hero{padding-top:150px;}
  .no-js section[id]{scroll-margin-top:120px;}
}

/* ── PRINT ────────────────────────────────────────────────────────── */
@media print{
  .nav,.ticker,.bridge,.scroll-ind,.anim-wrap{display:none !important;}
  .js-ready .rv:not(.on){opacity:1;}
  body{background:#fff;color:#000;}
}