:root{
  --bg:#F7F6F1;
  --bg-tint:#EAEEFB;
  --ink:#15171D;
  --ink-soft:#2E3240;
  --line:#E4E1D8;
  --accent:#2747DD;
  --accent-deep:#16308F;
  --card:#FFFFFF;
  --maxw:1160px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.serif{font-family:'Fraunces',Georgia,serif}
@media(max-width:560px){.wrap{padding:0 22px}}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(247,246,241,.82);backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
nav.scrolled{border-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:'Fraunces',serif;font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand .d{color:var(--accent)}
.brand-tag{font-weight:400;color:var(--ink-soft)}
.nav-links{display:flex;gap:30px;font-size:14px;color:var(--ink-soft)}
.nav-links a{position:relative;transition:color .25s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1.5px;background:var(--accent);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}.nav-links a:hover::after{width:100%}
@media(max-width:620px){.nav-links{gap:18px}.nav-links a.hideable{display:none}}

/* HERO */
header.hero{padding:84px 0 60px}
.hero-split{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:center}
@media(max-width:820px){.hero-split{grid-template-columns:1fr;gap:36px}}
.hero-video-wrap{aspect-ratio:16/9;width:520px;border-radius:20px;overflow:hidden;box-shadow:0 24px 56px -16px rgba(21,23,29,.22);flex-shrink:0}
@media(max-width:820px){.hero-video-wrap{width:100%;max-width:100%;margin-inline:auto}}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;display:block}
.kicker{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:26px}
.hero h1{font-family:'Fraunces',serif;font-weight:330;font-size:clamp(32px,5.5vw,72px);line-height:.95;letter-spacing:-.035em;margin-bottom:30px}
.hero h1.hero-line2{margin-top:0}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero-sub{max-width:600px;font-size:clamp(17px,2.1vw,20px);color:var(--ink-soft);margin-bottom:40px}
.hero-sub b{color:var(--ink);font-weight:600}
.disciplines{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.disc{font-size:13.5px;color:var(--ink-soft);border:1px solid var(--line);border-radius:100px;padding:8px 16px;background:var(--card)}
.disc.lead{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* SECTION */
section{padding:84px 0}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.eyebrow{display:flex;align-items:center;gap:11px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent)}
.sec-head{font-family:'Fraunces',serif;font-weight:340;font-size:clamp(30px,4.6vw,52px);line-height:1.04;letter-spacing:-.025em}
.sec-head em{font-style:italic;color:var(--accent)}
.sec-note{max-width:430px;color:var(--ink-soft);font-size:16px}

/* VIDEO TILES (local mp4, 9:16) */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(max-width:520px){.vgrid{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}
.vgrid.three{grid-template-columns:repeat(3,1fr);max-width:840px}
@media(max-width:760px){.vgrid.three{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}
.vscroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.vscroll::-webkit-scrollbar{display:none}
.vscroll{-ms-overflow-style:none;scrollbar-width:none}
.vscroll .vtile{flex:0 0 300px;scroll-snap-align:start}
.vtile{margin:0}
.frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0c0d12;
       box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.vtile:hover .frame{transform:translateY(-6px);box-shadow:0 24px 46px -24px rgba(21,23,29,.5)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vcap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:14px}
.vname{font-family:'Fraunces',serif;font-size:18px;font-weight:480;letter-spacing:-.01em}
.vtag{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}

/* A/B SECTION */
.ab{background:var(--bg-tint);border-radius:26px;padding:56px 44px}
@media(max-width:560px){.ab{padding:40px 24px}}
.ab .frame{aspect-ratio:9/16}
.ab .badge{position:absolute;top:14px;left:14px;z-index:3;background:var(--accent);color:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:100px}
.ab .vtile{position:relative}
.winner .frame{outline:2.5px solid var(--accent);outline-offset:3px}
.why-won{margin-top:12px;padding-top:12px;border-top:1px solid rgba(39,71,221,.18)}
.why-won .wlabel{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);font-weight:600;margin-bottom:6px}
.why-won .wpoint{font-size:13.5px;color:var(--ink);display:flex;align-items:flex-start;gap:6px}
.why-won .wpoint::before{content:"→";color:var(--accent);flex-shrink:0}

/* ORGANIC STAT CARDS */
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1000px){.ogrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ogrid{grid-template-columns:1fr;max-width:330px;margin-inline:auto}}
.ocard{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
.ocard:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 24px 46px -24px rgba(21,23,29,.5)}
.othumb{aspect-ratio:9/16;overflow:hidden;background:#0c0d12;position:relative;display:block}
.othumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.ocard:hover .othumb img{transform:scale(1.04)}
.othumb-arrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.othumb:hover .othumb-arrow{opacity:1}
.othumb-arrow svg{width:52px;height:52px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.ometa{padding:18px 18px 20px}
.otop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:10px}
.oidx{font-family:'Fraunces',serif;font-size:15px;color:var(--ink-soft)}
.opill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:var(--bg-tint);padding:4px 10px;border-radius:100px;font-weight:600;white-space:nowrap}
.ohero{display:flex;align-items:baseline;gap:6px;margin-bottom:14px}
.ohero b{font-family:'Fraunces',serif;font-size:36px;font-weight:480;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.ohero span{font-size:13px;color:var(--ink-soft)}
.orow{display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.orow .o{display:flex;flex-direction:column;line-height:1.15}
.orow .ov{font-family:'Fraunces',serif;font-size:16px;font-weight:500}
.orow .ol{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-top:3px}

/* YOUTUBE */
.ygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.ygrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ygrid{grid-template-columns:1fr}}
.ytile{display:block;position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0c0d12;
       box-shadow:0 1px 0 rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ytile:hover{transform:translateY(-6px);box-shadow:0 24px 46px -24px rgba(21,23,29,.5)}
.ytile img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s}
.ytile:hover img{opacity:.85}
.yplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.yplay svg{width:64px;height:64px;filter:drop-shadow(0 2px 12px rgba(0,0,0,.5));transition:transform .3s var(--ease)}
.ytile:hover .yplay svg{transform:scale(1.12)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center;max-width:780px}
.about-body .lead{font-family:'Fraunces',serif;font-size:clamp(21px,2.7vw,27px);line-height:1.34;font-weight:340;margin-bottom:22px;letter-spacing:-.01em}
.about-body p{color:var(--ink-soft);margin-bottom:16px}
.about-body p b{color:var(--ink);font-weight:600}
.prev{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.quote-link{display:block}
.quote{font-family:'Fraunces',serif;font-size:clamp(18px,2vw,24px);font-weight:340;font-style:italic;color:var(--ink);line-height:1.4;margin-bottom:10px}
.quote-src{font-size:13px;color:var(--accent);font-weight:500}

/* CONTACT */
.contact{text-align:center;padding-top:30px}
.contact h2{font-family:'Fraunces',serif;font-weight:330;font-size:clamp(34px,6vw,68px);line-height:1;letter-spacing:-.03em;margin-bottom:24px}
.contact h2 em{font-style:italic;color:var(--accent)}
.contact-sub{font-size:clamp(18px,2.5vw,26px);color:var(--ink-soft);margin-top:16px;margin-bottom:0}
.clinks{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.clinks a{border:1px solid var(--line);border-radius:100px;padding:11px 22px;font-size:14px;color:var(--ink-soft);transition:background .3s,color .3s,border-color .3s;background:var(--card)}
.clinks a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

footer{padding:46px 0 60px;text-align:center;color:var(--ink-soft);font-size:13px}
footer .brand{font-size:15px;color:var(--ink);margin-bottom:6px;display:inline-block}

/* ROTATING TEXT */
#rotating-text{display:inline-block}
#rotating-text::after{content:'|';animation:blink .7s step-end infinite;color:var(--accent)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}