/*
TOCAR SPORTS INTERNATIONAL — HOMEPAGE
Palette and type follow the Tocar Sports app design system:
dark stadium navy, electric orange, cyan highlights.
*/

/* TOKENS */
:root{
  --bg:#0B0E14;
  --surface:#11151D;
  --surface-2:#181D27;
  --line:#242A36;
  --text:#FAFAFA;
  --muted:#8F96A3;
  --orange:#FF4D00;
  --orange-2:#E66A00;
  --cyan:#2CD4F7;
  --radius:20px;
  --gutter:clamp(20px, 5vw, 64px);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --font-display:'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:'Outfit', -apple-system, system-ui, sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;
}

/* BASE */
*, *::before, *::after{ box-sizing:border-box;}
html{ background:var(--bg); -webkit-text-size-adjust:100%;}
html.lenis, html.lenis body{ height:auto;}
.lenis.lenis-smooth{ scroll-behavior:auto !important;}
.lenis.lenis-stopped{ overflow:hidden;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-weight:300; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;}
body::after{ content:''; position:fixed; inset:0; z-index:200; pointer-events:none; opacity:0.05; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
img{ max-width:100%; display:block;}
a{ color:inherit; text-decoration:none;}
h1, h2, h3, h4{ margin:0; font-weight:400;}
p{ margin:0;}
em{ font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--orange); text-transform:none; letter-spacing:0;}
::selection{ background:var(--orange); color:#fff;}
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px;}
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.wrap{ width:100%; max-width:1360px; margin:0 auto; padding:0 var(--gutter);}
main{ position:relative;}

/* TYPE HELPERS */
.eyebrow{ font-size:12px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; display:flex; align-items:center; gap:14px;}
.eyebrow span{ color:var(--orange); font-weight:600;}
.eyebrow span::after{ content:''; display:inline-block; width:36px; height:1px; background:var(--line); vertical-align:middle; margin-left:14px;}
.section-title{ font-family:var(--font-display); font-size:clamp(48px, 6.4vw, 104px); line-height:0.92; letter-spacing:0.01em; text-transform:uppercase;}
.section-sub{ color:var(--muted); font-size:17px; line-height:1.75; max-width:620px; margin-top:28px;}

/* BUTTONS */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 30px; border-radius:999px; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:0.16em; text-transform:uppercase; transition:transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), background 0.3s, border-color 0.3s; will-change:transform;}
.btn-primary{ background:var(--orange); color:#fff; box-shadow:0 0 20px rgba(255,77,0,0.3), 0 0 40px rgba(255,77,0,0.15);}
.btn-primary:hover{ box-shadow:0 0 30px rgba(255,77,0,0.5), 0 0 60px rgba(255,77,0,0.25), 0 0 90px rgba(255,77,0,0.1); transform:translateY(-2px);}
.btn-ghost{ border:1px solid rgba(255,255,255,0.18); color:var(--text); background:rgba(17,21,29,0.4); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.btn-ghost:hover{ border-color:rgba(255,255,255,0.5); transform:translateY(-2px);}

/* LOADER */
.loader{ display:none;}
.js .loader{ position:fixed; inset:0; z-index:300; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;}
.loader-logo{ width:min(260px, 60vw); opacity:0.9;}
.loader-bar{ width:min(260px, 60vw); height:1px; background:var(--line); overflow:hidden;}
.loader-bar span{ display:block; height:100%; background:var(--orange); transform-origin:left; transform:scaleX(0); box-shadow:0 0 12px var(--orange);}
.loader-count{ font-family:var(--font-display); font-size:14px; letter-spacing:0.3em; color:var(--muted);}

/* TOP BAR */
.topbar{ position:fixed; top:0; left:0; right:0; z-index:120; display:flex; align-items:center; justify-content:space-between; padding:22px var(--gutter); transition:background 0.4s, padding 0.4s, border-color 0.4s; border-bottom:1px solid transparent;}
.topbar.is-solid{ background:rgba(11,14,20,0.72); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:rgba(36,42,54,0.6); padding-top:14px; padding-bottom:14px;}
.topbar-logo img{ height:30px; width:auto; transition:opacity 0.5s, transform 0.5s var(--ease-out);}
.anim .topbar:not(.is-solid) .topbar-logo img{ opacity:0; transform:translateY(-8px); pointer-events:none;}
.menu-toggle{ width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); background:rgba(17,21,29,0.4); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); cursor:pointer; position:relative; transition:border-color 0.3s, background 0.3s;}
.menu-toggle:hover{ border-color:var(--orange);}
.menu-toggle span{ position:absolute; left:16px; right:16px; height:1.5px; background:var(--text); transition:transform 0.5s var(--ease-out), top 0.5s var(--ease-out);}
.menu-toggle span:nth-child(1){ top:21px;}
.menu-toggle span:nth-child(2){ top:29px;}
.menu-open .menu-toggle span:nth-child(1){ top:25px; transform:rotate(45deg);}
.menu-open .menu-toggle span:nth-child(2){ top:25px; transform:rotate(-45deg);}

/* MENU OVERLAY */
.menu{ position:fixed; inset:0; z-index:110; background:radial-gradient(120% 80% at 100% 0%, rgba(255,77,0,0.18), transparent 55%), var(--bg); display:flex; flex-direction:column; justify-content:center; padding:120px var(--gutter) 48px; clip-path:circle(0% at calc(100% - var(--gutter) - 26px) 48px); visibility:hidden; transition:clip-path 0.9s var(--ease-out), visibility 0s 0.9s;}
.menu-open .menu{ clip-path:circle(150% at calc(100% - var(--gutter) - 26px) 48px); visibility:visible; transition:clip-path 0.9s var(--ease-out), visibility 0s;}
.menu ul{ list-style:none; margin:auto 0; padding:0;}
.menu li{ overflow:hidden;}
.menu li a{ display:inline-flex; align-items:flex-start; gap:18px; font-family:var(--font-display); font-size:clamp(72px, 12vw, 160px); line-height:0.95; text-transform:uppercase; transform:translateY(105%); transition:transform 0.8s var(--ease-out), color 0.3s;}
.menu li a small{ font-family:var(--font-body); font-size:13px; letter-spacing:0.2em; color:var(--orange); margin-top:1.2em;}
.menu li a:hover{ color:var(--orange);}
.menu-open .menu li a{ transform:none;}
.menu-open .menu li:nth-child(1) a{ transition-delay:0.2s;}
.menu-open .menu li:nth-child(2) a{ transition-delay:0.28s;}
.menu-open .menu li:nth-child(3) a{ transition-delay:0.36s;}
.menu-foot{ display:flex; flex-wrap:wrap; gap:12px 40px; color:var(--muted); font-size:15px;}
.menu-foot a:hover{ color:var(--text);}

/* STORY — static default (no JS, reduced motion, no WebGL) */
.story{ position:relative; height:100vh; height:100svh;}
.story-stage{ position:relative; height:100vh; height:100svh; overflow:hidden; background:linear-gradient(180deg, rgba(11,14,20,0.55), rgba(11,14,20,0.92)), url(../images/web/innovation.webp) center/cover no-repeat, var(--bg);}
.story-canvas{ position:absolute; inset:0; width:100%; height:100%; display:none;}
.story-vignette{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at center, transparent 40%, rgba(11,14,20,0.85) 100%);}
.story-flash{ position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,140,60,0.65) 18%, rgba(255,77,0,0.25) 40%, transparent 70%); mix-blend-mode:screen;}
.story-whiteout{ position:absolute; inset:0; pointer-events:none; opacity:0; display:none; background:radial-gradient(circle at 50% 50%, #FFF8EC 0%, #FFE2B8 45%, #FFB874 100%);}
.anim .story-whiteout{ display:block;}
.chapter{ display:none;}
.story-final{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:100px var(--gutter) 60px;}
.story-final::before{ content:''; position:absolute; left:50%; top:50%; width:min(900px, 120vw); aspect-ratio:1; transform:translate(-50%, -50%); background:radial-gradient(circle, rgba(255,77,0,0.16), transparent 62%); pointer-events:none; z-index:-1;}
.final-logo{ width:clamp(260px, 36vw, 500px); height:auto; margin-bottom:clamp(28px, 5vh, 48px);}
.final-title{ font-family:var(--font-display); font-size:clamp(40px, 6vw, 92px); line-height:0.95; text-transform:uppercase; letter-spacing:0.01em;}
.final-title em{ display:inline-block; padding-right:0.1em;}
.final-sub{ margin-top:18px; max-width:560px; color:var(--muted); font-size:clamp(15px, 1.3vw, 18px);}
.final-actions{ margin-top:36px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
.story-progress, .scroll-hint{ display:none;}

/* STORY — animated (set by js/home.js when WebGL is available) */
.anim .story{ height:600vh;}
.anim .story-stage{ position:sticky; top:0; background:radial-gradient(ellipse at 50% 40%, #121826 0%, var(--bg) 70%);}
.anim .story-canvas{ display:block;}
.anim .chapter{ display:flex; position:absolute; inset:0; flex-direction:column; justify-content:flex-end; padding:0 var(--gutter) clamp(72px, 12vh, 140px); pointer-events:none; opacity:0;}
.anim .chapter[data-chapter="1"]{ align-items:flex-end; text-align:right;}
.chapter-kicker{ font-family:var(--font-serif); font-style:italic; font-size:clamp(20px, 2.4vw, 36px); color:rgba(250,250,250,0.75); margin-bottom:6px;}
.chapter-word{ font-family:var(--font-display); font-size:clamp(76px, 15vw, 250px); line-height:0.82; text-transform:uppercase; letter-spacing:0.005em; background:linear-gradient(180deg, #FFFFFF 30%, #FFC6AD 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 60px rgba(255,77,0,0.18);}
.anim .story-final{ pointer-events:none;}
.anim .story-final.is-live{ pointer-events:auto;}
.anim .final-logo, .anim .final-title, .anim .final-sub, .anim .final-actions{ opacity:0;}
.anim .story-progress{ display:block; position:absolute; left:var(--gutter); right:var(--gutter); bottom:28px; height:1px; background:rgba(255,255,255,0.08);}
.anim .story-progress span{ display:block; height:100%; background:var(--orange); transform-origin:left; transform:scaleX(0); box-shadow:0 0 10px var(--orange);}
.anim .scroll-hint{ display:flex; position:absolute; left:50%; bottom:52px; transform:translateX(-50%); flex-direction:column; align-items:center; gap:10px; font-size:11px; letter-spacing:0.35em; text-transform:uppercase; color:var(--muted);}
.scroll-hint i{ display:block; width:1px; height:44px; background:linear-gradient(var(--orange), transparent); animation:hint 1.8s var(--ease-out) infinite; transform-origin:top;}
@keyframes hint{ 0%{ transform:scaleY(0);} 50%{ transform:scaleY(1);} 100%{ transform:scaleY(1); opacity:0;}}

/* ESSENCE */
.essence{ padding:clamp(120px, 20vh, 220px) 0 clamp(80px, 12vh, 140px); position:relative;}
.essence-title{ font-family:var(--font-display); font-size:clamp(52px, 8vw, 136px); line-height:0.9; text-transform:uppercase; max-width:15ch;}
.essence-title .w{ display:inline-block;}
.essence-sub{ margin-top:40px; max-width:560px; margin-left:auto; color:var(--muted); font-size:18px; line-height:1.7;}

/* SPLIT (MISSION / VISION) */
.split{ padding:clamp(60px, 10vh, 120px) 0;}
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px, 7vw, 120px); align-items:center;}
.split-title{ font-family:var(--font-display); font-size:clamp(52px, 6.5vw, 108px); line-height:0.9; text-transform:uppercase; margin-bottom:32px;}
.split-title em{ display:block;}
.split-text p:not(.eyebrow){ color:var(--muted); font-size:17px; line-height:1.8; max-width:56ch;}
.split-media{ margin:0; position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/4.4; background:var(--surface); border:1px solid var(--line);}
.split-media img{ position:absolute; left:0; top:-8%; width:100%; height:116%; object-fit:cover; filter:saturate(0.9) brightness(0.92);}
.split-media::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,14,20,0.55)); pointer-events:none;}

/* MARQUEE */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0; overflow:hidden; margin:clamp(60px, 10vh, 120px) 0 0;}
.marquee-track{ display:flex; align-items:center; gap:40px; width:max-content; animation:marquee 45s linear infinite;}
.marquee span{ font-family:var(--font-display); font-size:clamp(40px, 6vw, 92px); line-height:1; text-transform:uppercase; white-space:nowrap; color:transparent; -webkit-text-stroke:1px rgba(250,250,250,0.35);}
.marquee span:nth-of-type(odd){ color:var(--text); -webkit-text-stroke:0;}
.marquee i{ font-style:normal; color:var(--orange); font-size:clamp(20px, 2.4vw, 36px);}
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);}}

/* VENTURES */
.ventures{ padding:clamp(100px, 16vh, 180px) 0;}
.section-head{ margin-bottom:clamp(48px, 8vh, 80px);}
.venture-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.venture-card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--surface); border:1px solid var(--line); transform-style:preserve-3d; transition:border-color 0.4s, box-shadow 0.5s var(--ease-out); --mx:50%; --my:50%;}
.venture-card figure{ margin:0; position:absolute; inset:0;}
.venture-card img{ width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.2s var(--ease-out), filter 0.6s; filter:saturate(0.85) brightness(0.8);}
.venture-card::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(11,14,20,0) 40%, rgba(11,14,20,0.92) 100%);}
.venture-card::after{ content:''; position:absolute; inset:0; z-index:2; opacity:0; transition:opacity 0.4s; background:radial-gradient(circle at var(--mx) var(--my), rgba(255,77,0,0.28), transparent 45%); mix-blend-mode:screen; pointer-events:none;}
.venture-card:hover{ border-color:rgba(255,77,0,0.5); box-shadow:0 0 30px rgba(255,77,0,0.15), 0 30px 60px rgba(0,0,0,0.45);}
.venture-card:hover img{ transform:scale(1.08); filter:saturate(1) brightness(0.9);}
.venture-card:hover::after{ opacity:1;}
.venture-meta{ position:absolute; left:28px; right:28px; bottom:26px; z-index:3; transform:translateZ(40px);}
.venture-num{ font-size:12px; font-weight:600; letter-spacing:0.3em; color:var(--orange);}
.venture-meta h3{ font-family:var(--font-display); font-size:clamp(34px, 3vw, 44px); line-height:1; margin-top:8px; letter-spacing:0.02em;}
.venture-meta p{ color:rgba(250,250,250,0.7); font-size:15px; margin-top:4px;}

/* SERVICES */
.services{ padding:clamp(80px, 12vh, 140px) 0; position:relative;}
.services::before{ content:''; position:absolute; left:-20vw; top:10%; width:70vw; height:70vw; max-width:900px; max-height:900px; background:radial-gradient(circle, rgba(255,77,0,0.08), transparent 60%); pointer-events:none;}
.services-grid{ display:grid; grid-template-columns:5fr 7fr; gap:clamp(40px, 6vw, 100px); align-items:start; position:relative;}
.services-head{ position:sticky; top:130px;}
.services-head .section-title{ font-size:clamp(44px, 4.8vw, 80px);}
.service-list{ display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.service-card{ padding:36px 32px 34px; border-radius:var(--radius); background:rgba(17,21,29,0.7); border:1px solid rgba(36,42,54,0.8); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:border-color 0.4s, transform 0.5s var(--ease-out), box-shadow 0.5s;}
.service-card:last-child{ grid-column:1 / -1;}
.service-card:hover{ border-color:rgba(255,77,0,0.45); transform:translateY(-4px); box-shadow:0 0 30px rgba(255,77,0,0.12);}
.service-card i{ display:inline-flex; width:64px; height:64px; border-radius:16px; align-items:center; justify-content:center; background:rgba(255,77,0,0.1); border:1px solid rgba(255,77,0,0.25); margin-bottom:28px;}
.service-card i::before{ font-size:30px; color:var(--orange); margin:0; line-height:1;}
.service-card h3{ font-family:var(--font-display); font-size:32px; line-height:1; letter-spacing:0.02em; margin-bottom:12px;}
.service-card p{ color:var(--muted); font-size:15px; line-height:1.7;}

/* INTRODUCTION */
.intro{ padding:clamp(100px, 16vh, 180px) 0; border-top:1px solid var(--line);}
.intro-title{ font-family:var(--font-display); font-size:clamp(68px, 13vw, 220px); line-height:0.84; text-transform:uppercase;}
.intro-title span{ display:block;}
.intro-title em{ display:block; font-size:0.62em; line-height:1.1;}
.intro-body{ margin-top:clamp(40px, 6vh, 64px); margin-left:auto; max-width:620px; display:flex; gap:28px; align-items:flex-start;}
.intro-tag{ font-family:var(--font-display); font-size:28px; color:var(--orange); letter-spacing:0.08em; padding-top:6px; flex-shrink:0;}
.intro-tag::after{ content:''; display:inline-block; width:40px; height:1px; background:var(--orange); vertical-align:middle; margin-left:14px;}
.intro-body p{ font-family:var(--font-serif); font-size:clamp(26px, 2.8vw, 40px); line-height:1.2;}

/* FOOTER */
.site-footer{ position:relative; border-top:1px solid var(--line); overflow:hidden;}
.site-footer::before{ content:''; position:absolute; left:50%; top:0; width:min(1100px, 140vw); aspect-ratio:2/1; transform:translate(-50%, -50%); background:radial-gradient(ellipse, rgba(255,77,0,0.22), transparent 62%); pointer-events:none;}
.footer-cta{ text-align:center; padding:clamp(100px, 16vh, 170px) 0 clamp(80px, 12vh, 120px); position:relative;}
.footer-cta .eyebrow{ justify-content:center;}
.footer-cta h2{ font-family:var(--font-display); font-size:clamp(64px, 11vw, 180px); line-height:0.88; text-transform:uppercase; margin-bottom:44px;}
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; padding:56px 0; border-top:1px solid var(--line);}
.footer-logo{ height:44px; width:auto;}
.footer-col{ display:flex; flex-direction:column; gap:10px;}
.footer-col h4{ font-size:12px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.footer-col a{ color:rgba(250,250,250,0.85); font-size:15px; transition:color 0.3s;}
.footer-col a:hover{ color:var(--orange);}
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; padding:24px 0 32px; border-top:1px solid var(--line); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);}
.footer-bottom a:hover{ color:var(--text);}

/* INNER PAGE HERO */
.page-hero{ position:relative; isolation:isolate; overflow:hidden; min-height:80vh; min-height:80svh; display:flex; align-items:flex-end; padding:160px 0 clamp(64px, 10vh, 110px); border-bottom:1px solid var(--line);}
.page-hero-bg{ position:absolute; left:0; right:0; top:-10%; height:120%; z-index:-2; overflow:hidden;}
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.75);}
.page-hero::before{ content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(70% 60% at 85% 10%, rgba(255,77,0,0.22), transparent 60%), linear-gradient(180deg, rgba(11,14,20,0.6) 0%, rgba(11,14,20,0.78) 55%, var(--bg) 100%);}
.page-hero-compact{ min-height:64vh; min-height:64svh;}
.page-hero-compact::after{ content:''; position:absolute; inset:0; z-index:-2; opacity:0.5; background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size:72px 72px; -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%); mask-image:radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);}
.page-title{ font-family:var(--font-display); font-size:clamp(88px, 16vw, 260px); line-height:0.82; text-transform:uppercase; letter-spacing:0.005em;}
.page-title em{ font-size:0.8em;}
.page-hero-meta{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px 40px; flex-wrap:wrap; margin-top:clamp(28px, 5vh, 48px); padding-top:28px; border-top:1px solid rgba(255,255,255,0.1);}
.page-hero-meta p{ max-width:520px; color:rgba(250,250,250,0.75); font-size:17px; line-height:1.7;}
.page-hero-meta .tag{ font-size:12px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted);}
.page-hero-meta .tag b{ color:var(--orange); font-weight:600;}

/* ABOUT */
.statement{ padding:clamp(110px, 18vh, 200px) 0 clamp(80px, 12vh, 130px);}
.statement-text{ font-family:var(--font-serif); font-size:clamp(32px, 4.2vw, 64px); line-height:1.12; max-width:22ch;}
.statement-text .w{ display:inline-block;}
.pillars{ --stagger:clamp(60px, 12vh, 140px); padding:0 0 calc(clamp(110px, 18vh, 200px) + var(--stagger));}
.pillar-grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.pillar-grid .venture-card{ aspect-ratio:4/3.4;}
/* Offset the right column without pushing the next row down. */
.pillar-grid .venture-card:nth-child(even){ margin-top:var(--stagger); margin-bottom:calc(-1 * var(--stagger));}
.pillar-grid .venture-meta h3{ font-size:clamp(40px, 4.2vw, 68px); line-height:0.95; margin-top:10px;}

/* LEGAL (PRIVACY) */
.legal{ padding:clamp(80px, 12vh, 130px) 0 clamp(110px, 16vh, 180px);}
.legal-grid{ display:grid; grid-template-columns:280px 1fr; gap:clamp(40px, 7vw, 120px); align-items:start;}
.toc{ position:sticky; top:120px;}
.toc p{ font-size:12px; font-weight:500; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); margin-bottom:18px;}
.toc ol{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line);}
.toc a{ display:flex; gap:12px; padding:7px 0 7px 18px; margin-left:-1px; border-left:1px solid transparent; font-size:14px; line-height:1.4; color:var(--muted); transition:color 0.3s, border-color 0.3s;}
.toc a span{ color:rgba(143,150,163,0.6); font-variant-numeric:tabular-nums; min-width:18px;}
.toc a:hover{ color:var(--text);}
.toc a.is-active{ color:var(--text); border-left-color:var(--orange);}
.toc a.is-active span{ color:var(--orange);}
.legal-body{ max-width:760px;}
.legal-section{ padding:44px 0; border-top:1px solid var(--line); scroll-margin-top:110px;}
.legal-section:first-child{ border-top:none; padding-top:0;}
.legal-section h2{ display:flex; align-items:baseline; gap:18px; font-family:var(--font-display); font-size:clamp(32px, 3.4vw, 46px); line-height:1; letter-spacing:0.02em; text-transform:uppercase; margin-bottom:22px;}
.legal-section h2 span{ font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0.2em; color:var(--orange);}
.legal-section p, .legal-section li{ color:#C3C8D1; font-size:17px; line-height:1.8;}
.legal-section p + p{ margin-top:16px;}
.legal-section strong{ color:var(--text); font-weight:500;}
.legal-section a{ color:var(--orange); text-decoration:underline; text-decoration-color:rgba(255,77,0,0.4); text-underline-offset:3px; transition:text-decoration-color 0.3s;}
.legal-section a:hover{ text-decoration-color:var(--orange);}
.legal-section ul{ list-style:none; margin:18px 0; padding:0;}
.legal-section li{ position:relative; padding-left:28px; margin-bottom:10px;}
.legal-section li::before{ content:''; position:absolute; left:0; top:0.9em; width:14px; height:1px; background:var(--orange);}
.legal-contact{ margin:22px 0; padding:28px 30px; border-radius:var(--radius); background:rgba(17,21,29,0.7); border:1px solid var(--line); font-style:normal; display:grid; gap:6px; font-size:17px;}
.legal-contact strong{ font-family:var(--font-display); font-weight:400; font-size:28px; letter-spacing:0.02em; color:var(--text); margin-bottom:6px;}
.legal-contact a{ color:var(--text); text-decoration:none;}
.legal-contact a:hover{ color:var(--orange);}

/* TABLET */
@media (max-width: 1024px){
  .venture-grid{ grid-template-columns:repeat(2, 1fr);}
  .services-grid{ grid-template-columns:1fr;}
  .services-head{ position:static;}
  .legal-grid{ grid-template-columns:1fr;}
  .toc{ position:static; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(17,21,29,0.6);}
  .toc ol{ columns:2; column-gap:24px; border-left:none;}
  .toc a{ padding-left:0; border-left:none; break-inside:avoid;}
}

/* MOBILE */
@media (max-width: 760px){
  body{ font-size:15px;}
  .topbar{ padding:16px var(--gutter);}
  .topbar-logo img{ height:24px;}
  .menu-toggle{ width:46px; height:46px;}
  .menu-toggle span{ left:14px; right:14px;}
  .menu-toggle span:nth-child(1){ top:18px;}
  .menu-toggle span:nth-child(2){ top:26px;}
  .menu-open .menu-toggle span:nth-child(1), .menu-open .menu-toggle span:nth-child(2){ top:22px;}
  .anim .chapter, .anim .chapter[data-chapter="1"]{ align-items:center; text-align:center; padding-bottom:110px;}
  .split-grid{ grid-template-columns:1fr;}
  .split-reverse .split-media{ order:2;}
  .essence-sub{ margin-left:0;}
  .venture-grid{ grid-template-columns:1fr;}
  .venture-card{ aspect-ratio:4/4.2;}
  .service-list{ grid-template-columns:1fr;}
  .intro-body{ flex-direction:column; gap:14px;}
  .footer-grid{ grid-template-columns:1fr 1fr;}
  .footer-logo{ grid-column:1 / -1;}
  .footer-bottom{ flex-direction:column;}
  .page-hero{ min-height:70svh; padding-top:130px;}
  .page-hero-compact{ min-height:56svh;}
  .pillar-grid{ grid-template-columns:1fr;}
  .pillars{ --stagger:0px;}
  .toc ol{ columns:1;}
  .legal-section{ padding:34px 0;}
  .legal-section p, .legal-section li{ font-size:16px;}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .marquee-track, .scroll-hint i{ animation:none;}
  .menu, .menu li a, .btn, .venture-card img{ transition:none;}
}