:root{
  --bg:#ffffff; --surface:#f2f2f2; --ink:#0a0a0a; --muted:#5f5f5f;
  --accent:#0071e3; --accent-ink:#ffffff; --field:#0a0a0a; --field-ink:#ffffff;
  --step-small:clamp(0.875rem,0.84rem + 0.1vw,0.9375rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2.25rem,1.4rem + 3.4vw,4.5rem);
  --step-giant:clamp(3rem,1rem + 7.6vw,8.5rem);
  --m:clamp(16px,2.6vw,40px);
  --gap:clamp(48px,5.4vw,80px);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --font:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.45;letter-spacing:-0.005em}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
b{font-weight:500}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.soft{color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--accent);color:var(--accent-ink);font:500 var(--step-body)/1 var(--font);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform 140ms var(--ease-out),background 180ms ease}
.btn:hover{background:#005bb8}
.btn:active{transform:scale(0.97)}
.btn--light{background:var(--bg);color:var(--ink)}
.btn--light:hover{background:#e6e6e6}
.link{font-weight:500;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;transition:color 180ms ease}
.link:hover{color:var(--accent)}
.link--light:hover{color:#a9cfff}

/* bar */
.bar{display:flex;align-items:center;gap:32px;padding:20px var(--m)}
.bar__logo{font-weight:500;font-size:var(--step-lead);letter-spacing:-0.04em;text-decoration:none}
.bar__nav{display:flex;gap:24px;margin-left:auto;font-size:var(--step-small)}
.bar__nav a{text-decoration:none;color:var(--ink)}
.bar__nav a:hover{color:var(--accent)}
.bar__cta{font-size:var(--step-small);font-weight:500;background:var(--ink);color:var(--bg);text-decoration:none;padding:12px 18px;transition:background 180ms ease}
.bar__cta:hover{background:var(--accent)}

/* hero */
.hero{padding:clamp(32px,4vw,64px) var(--m) 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
.hero__title{grid-column:1 / 9;grid-row:1}
.hero__pic{grid-column:9 / 13;grid-row:1 / 3;align-self:stretch}
.team{background:var(--field);color:var(--field-ink);padding:22px 22px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:14px}
.team__h{font-weight:500;font-size:var(--step-lead);letter-spacing:-0.02em;display:flex;justify-content:space-between;align-items:baseline}
.team__h span{font-size:var(--step-small);color:#7ee08a;font-weight:400}
.team__list{display:grid;gap:6px;align-content:start}
.team__list li{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;background:#1c1c1c;padding:10px 12px}
.team__role{font-weight:500;font-size:var(--step-small);color:#fff}
.team__do{font-size:var(--step-small);color:#c9c9c9}
.team__t{font-size:var(--step-small);color:#8cc2ff;font-variant-numeric:tabular-nums}
.team__foot{font-size:var(--step-small);color:#c9c9c9}
.feed{grid-column:1 / 13}
.hero__title{font-weight:500;font-size:clamp(2.6rem,0.6rem + 6.6vw,8rem);line-height:0.92;letter-spacing:-0.05em}
.slot{display:inline-block;position:relative;width:2.6em;height:0.78em;vertical-align:-0.02em;margin:0 0.06em;overflow:hidden;background:var(--accent);color:var(--accent-ink)}
.slot__m{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 0.22em;font-size:0.2em;line-height:1.15;letter-spacing:-0.01em;font-weight:500;opacity:0}
.slot__m i{font-style:normal;font-size:0.7em;opacity:.85}
.slot__m.on{opacity:1}
.hero__row{grid-column:1 / 9;grid-row:2;display:grid;gap:24px;margin-top:clamp(28px,3vw,44px);align-content:end}
.hero__lead{font-size:var(--step-lead);line-height:1.3;max-width:40ch}
.hero__act{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center}
.feed{margin:clamp(28px,3vw,44px) 0 0;background:var(--surface);overflow:hidden;padding:18px 0}
.feed__track{display:flex;gap:56px;width:max-content;padding-left:var(--m)}
.feed__track span{white-space:nowrap;font-size:var(--step-body)}
.feed__track b{color:#005bb8;margin-right:10px}

/* showcase */
.show{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:var(--gap) var(--m) 0}
.show__stack{grid-column:1 / 9}
.show__h{font-weight:500;font-size:clamp(2.6rem,0.6rem + 6vw,7rem);line-height:1;letter-spacing:-0.05em;white-space:nowrap}
.show__h--soft{color:var(--muted)}
.show__w{display:block;background:none;border:0;padding:0;font:500 clamp(2.6rem,0.6rem + 6vw,7rem)/1 var(--font);letter-spacing:-0.05em;color:var(--muted);cursor:pointer;text-align:left;white-space:nowrap;transition:color 200ms ease}
.show__w:hover{color:var(--ink)}
.show__w.on{color:var(--accent)}
.show__obj{grid-column:9 / 13;grid-row:1 / 3;align-self:start;margin-top:clamp(40px,4vw,72px);width:100%;aspect-ratio:3/4;position:relative;background:#dfe6d6;transform:rotate(4deg);overflow:hidden}
.show__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity 260ms ease}
.show__img--wide{object-fit:contain;background:#fff}
.show__img.on{opacity:1}
.show__facts{grid-column:1 / 8;position:relative;min-height:5.2em;margin-top:28px}
.show__fact{position:absolute;inset:0 0 auto 0;font-size:var(--step-lead);line-height:1.3;opacity:0;visibility:hidden}
.show__fact.on{position:relative;opacity:1;visibility:visible}

/* stats */
.stats{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:var(--gap) var(--m) 0;align-items:start}
.stats__l{grid-column:1 / 6;display:grid;gap:24px}
.stats__l figure{background:#fff}
.stats__l figcaption{font-size:var(--step-small);color:var(--muted);margin-top:8px}
.stats__h{font-weight:500;font-size:clamp(2rem,1.2rem + 2.4vw,3.25rem);line-height:1;letter-spacing:-0.04em}
.stats__list{grid-column:6 / 13}
.stats__row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:baseline;padding:2px 0}
.stats__row dt{font-weight:500;font-size:clamp(3rem,1rem + 5vw,6.5rem);line-height:1;letter-spacing:-0.04em;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.stats__row dd{font-size:var(--step-body);line-height:1.35;max-width:26ch}
.stats__row dd b{color:var(--accent);font-size:var(--step-lead);margin-right:4px}

/* work */
.work{padding:var(--gap) var(--m) 0}
.work__p{font-weight:500;font-size:clamp(1.375rem,0.9rem + 1.6vw,2.25rem);line-height:1.25;max-width:60ch;letter-spacing:-0.04em;color:var(--muted)}
.work__p a{text-decoration:none;color:var(--muted);transition:color 180ms ease}
.work__p a:hover{color:var(--ink)}
.work__p .work__lead{color:var(--ink)}
.tile{display:inline-block;width:1.15em;height:0.78em;overflow:hidden;vertical-align:-0.04em;margin-left:0.12em;background:#dfe6d6;transition:transform 260ms var(--ease-out);transform-origin:left center}
.tile img{width:100%;height:100%;object-fit:cover;object-position:top left}
.work__p a:hover + .tile{transform:scale(1.6)}
.work__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:28px;font-size:var(--step-body)}

/* how */
.how{padding:var(--gap) var(--m) 0}
.how__h{font-weight:500;font-size:var(--step-head);line-height:1;letter-spacing:-0.04em;margin-bottom:clamp(24px,3vw,40px)}
.how__row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:center;padding:clamp(8px,1vw,14px) 0}
.how__row:nth-child(odd){background:var(--surface);margin:0 calc(var(--m) * -1);padding-left:var(--m);padding-right:var(--m)}
.how__v{grid-column:1 / 6;font-weight:500;font-size:clamp(2.2rem,1rem + 3.8vw,5rem);line-height:0.95;letter-spacing:-0.05em}
.how__row p{grid-column:6 / 13;font-size:var(--step-lead);line-height:1.3;max-width:36ch}

/* price */
.price{margin-top:var(--gap);background:var(--field);color:var(--field-ink);padding:clamp(44px,4.6vw,68px) var(--m)}
.price__s{font-weight:500;font-size:clamp(2rem,0.6rem + 5vw,6rem);line-height:1.02;letter-spacing:-0.05em}
.price__tag{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:0 0.15em}
.price__row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:clamp(24px,2.4vw,36px);align-items:end}
.price__row p{grid-column:1 / 8;font-size:var(--step-lead);line-height:1.35;max-width:44ch}
.price__act{grid-column:9 / 13;display:flex;flex-direction:column;align-items:flex-end;gap:18px;text-align:right}

/* club */
.club{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:var(--gap) var(--m) 0;align-items:start}
.club__l{grid-column:1 / 6;display:grid;gap:24px;align-content:start}
.club__h{font-weight:500;font-size:var(--step-head);line-height:1;letter-spacing:-0.04em}
.club__lead{font-size:var(--step-lead);line-height:1.3}
.club__list{grid-column:7 / 13;display:grid;gap:12px}
.club__list li{background:var(--surface);padding:18px 24px;display:grid;gap:6px}
.club__list h3{font-weight:500;font-size:var(--step-lead);letter-spacing:-0.02em}

/* about */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:var(--gap) var(--m) 0}
.about__facts{grid-column:1 / 3;display:grid;gap:10px;font-size:var(--step-small);color:var(--muted);align-content:start;padding-top:0.4em}
.about__facts a{color:var(--ink)}
.about__text{grid-column:3 / 13;display:grid;gap:1.1em}
.about__p{font-size:clamp(1.375rem,0.9rem + 1.4vw,2.125rem);line-height:1.2;letter-spacing:-0.02em}
.about__p--soft{color:var(--muted)}
.about__p--soft a{color:var(--ink)}
.about__pic{float:left;width:5.4em;height:3.6em;object-fit:cover;object-position:60% 30%;margin:0.15em 0.5em 0 0}

/* cta */
.cta{margin-top:var(--gap);background:var(--field);color:var(--field-ink);padding:clamp(44px,4.6vw,68px) var(--m) 36px;display:grid;gap:28px}
.cta__h{font-weight:500;font-size:clamp(2.6rem,1rem + 6vw,7rem);line-height:0.9;letter-spacing:-0.05em}
.cta__row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.cta__row p{grid-column:1 / 6;font-size:var(--step-lead);line-height:1.3}
.cta__row .btn{grid-column:10 / 13;justify-self:end}

/* footer */
.foot{background:var(--accent);color:var(--accent-ink);padding:28px var(--m) 24px;display:grid;gap:clamp(20px,2.4vw,32px)}
.foot__top{display:flex;justify-content:space-between;gap:24px;font-size:var(--step-small)}
.foot a{color:var(--accent-ink)}
.foot__contact{font-weight:500;font-size:clamp(2.6rem,0.6rem + 7vw,7.5rem);line-height:0.9;letter-spacing:-0.05em;text-decoration:none}
.foot__contact:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.foot__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;font-size:var(--step-small)}
.foot__meta nav{display:flex;flex-wrap:wrap;gap:8px 20px}

@media (max-width:900px){
  .bar__nav{display:none}
  .bar__cta{margin-left:auto}
  .hero__title,.hero__row{grid-column:1 / 13}
  .hero__pic{grid-column:1 / 13;grid-row:3;margin-top:28px}
  .hero__act .btn{width:100%}
  .show__stack{grid-column:1 / 13}
  .show__h,.show__w{font-size:11vw}
  .show__obj{grid-column:2 / 12;grid-row:auto;margin-top:8px;transform:rotate(2deg)}
  .show__facts{grid-column:1 / 13}
  .stats__l,.stats__list{grid-column:1 / 13}
  .stats__row{grid-template-columns:52% 1fr;gap:16px}
  .stats__row dt{font-size:14vw}
  .how__v{grid-column:1 / 13}
  .how__row p{grid-column:1 / 13}
  .price__row p,.price__act{grid-column:1 / 13}
  .price__act{align-items:stretch;text-align:left}
  .club__l,.club__list{grid-column:1 / 13}
  .about__facts{grid-column:1 / 13;order:2;grid-auto-flow:column;justify-content:start;gap:20px}
  .about__text{grid-column:1 / 13}
  .about__pic{width:4.6em;height:4.6em}
  .cta__row p{grid-column:1 / 13}
  .cta__row .btn{grid-column:1 / 13;justify-self:stretch}
  .foot__contact{font-size:15vw}
  .how{padding-top:72px}
  .work__foot{flex-direction:column}
  .cta{padding-bottom:0}
  .foot{padding-top:72px;gap:28px}
}

/* motion */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 800ms var(--ease-expo),transform 800ms var(--ease-expo);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.in{opacity:1;transform:none}
.js .rv-x{opacity:0;transform:translateX(-32px);transition:opacity 700ms var(--ease-expo),transform 700ms var(--ease-expo);transition-delay:calc(var(--i,0) * 70ms)}
.js .rv-x.in{opacity:1;transform:none}
.slot__m{transition:opacity 420ms ease,transform 520ms var(--ease-out);transform:translateY(40%)}
.slot__m.on{transform:none}
.slot__m.out{opacity:0;transform:translateY(-40%)}
.feed__track{animation:feed 48s linear infinite}
.feed:hover .feed__track{animation-play-state:paused}
@keyframes feed{to{transform:translateX(-50%)}}
.team__list li{transition:background 600ms ease}
.team__list li.ping{background:#0d2f57}
.team__h span::before{content:"";display:inline-block;width:8px;height:8px;background:#7ee08a;margin-right:6px;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.js .show__obj{clip-path:inset(0 0 100% 0);transition:clip-path 1100ms var(--ease-in-out,cubic-bezier(0.76,0,0.24,1))}
.js .show__obj.in{clip-path:inset(0 0 0 0)}
.js .show__obj .show__img{transform:scale(1.12);transition:transform 1300ms var(--ease-expo),opacity 260ms ease}
.js .show__obj.in .show__img{transform:none}
.show__fact.on{animation:rise 500ms var(--ease-out)}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.price__tag{transition:transform 600ms var(--ease-expo)}
.js .price__tag{transform:scale(.6)}
.js .price.in .price__tag{transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .rv-x{opacity:1;transform:none}
  .js .show__obj{clip-path:none}
  .js .show__obj .show__img,.js .price__tag{transform:none}
  .feed{overflow-x:auto}
}