/* Remix The Kicks — built against docs/mockup.png.
   Desktop (>=1024px) is laid out in mockup units: 1u = one pixel of the 718px-wide mockup,
   scaled to the viewport and capped at 2px (a 1436px canvas). Elements marked .ab are placed
   with --x / --y / --w / --h in those units. Below 1024px everything returns to normal flow
   and is recomposed for tablet and phone. */

:root {
  --black: #080808;
  --near-black: #111111;
  --ink: #080906;
  --white: #ffffff;
  --paper: #ededeb;
  --paper-2: #f8f7f7;
  --paper-3: #e9e9e7;
  --card: #f7f7f6;
  --neon-yellow: #f2ff00;
  --charcoal: #242424;
  --gray: #777777;
  --text: #141414;
  --text-2: #3a3a3a;

  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;

  --u: 1px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
/* <picture> only chooses WebP vs JPEG/PNG; it must not change layout. */
picture { display: contents; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--neon-yellow); color: var(--black); padding: 10px 14px;
  font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--neon-yellow); outline-offset: 3px; }
.paper :focus-visible, .paper2 :focus-visible, .paper3 :focus-visible { outline-color: var(--black); }

/* ---------- surfaces ---------- */
.ink { background: var(--ink); color: var(--white); }
.paper { background-color: var(--paper); }
.paper2 { background-color: var(--paper-2); }
.paper3 { background-color: var(--paper-3); }
.paper, .paper2, .paper3, .ink { position: relative; }
.paper::after, .paper2::after, .paper3::after, .ink::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .07; mix-blend-mode: multiply;
}
.ink::after { opacity: .06; mix-blend-mode: screen; filter: invert(1); }
.sec > .canvas, .site-footer > .canvas { position: relative; z-index: 2; }

/* torn paper edges: one jagged mask, reused and flipped */
.tear {
  position: absolute; left: 0; right: 0; height: calc(14 * var(--u)); min-height: 10px;
  z-index: 3; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V18l14-3 9 5 16-6 12 4 20-8 11 6 18-3 9 5 22-9 13 7 17-2 10 6 24-10 12 8 15-4 19 5 11-6 23 3 10-7 16 8 21-5 12 4 18-9 9 7 25-2 14 5 10-8 22 6 16-3 13 6 19-9 11 5 24 1 12-6 17 7 20-8 10 5 23-3 15 6 12-7 18 4 21-6 9 7 26-4 13 5 11-9 20 8 17-3 14 6 22-8 10 5 19 2 13-7 24 6 12-4 16 7 21-9 11 6 18-2 15 5 23-8 12 7 17-5 20 6 10-7 25 4 14-3 16 6 19-8 11 5 22 1 13-6 18 7 24-9 10 6 15-2 20 5 12-7 23 8 16-4 13 5 21-8 11 6 19-1 14 5 17-7 26 6 12-5 18 7 20-8 10 4 24 2 13-6 16 6 22-9 11 7 18-3 15 5 21-7 12 6 25-4 10 5 17-8 V40Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V18l14-3 9 5 16-6 12 4 20-8 11 6 18-3 9 5 22-9 13 7 17-2 10 6 24-10 12 8 15-4 19 5 11-6 23 3 10-7 16 8 21-5 12 4 18-9 9 7 25-2 14 5 10-8 22 6 16-3 13 6 19-9 11 5 24 1 12-6 17 7 20-8 10 5 23-3 15 6 12-7 18 4 21-6 9 7 26-4 13 5 11-9 20 8 17-3 14 6 22-8 10 5 19 2 13-7 24 6 12-4 16 7 21-9 11 6 18-2 15 5 23-8 12 7 17-5 20 6 10-7 25 4 14-3 16 6 19-8 11 5 22 1 13-6 18 7 24-9 10 6 15-2 20 5 12-7 23 8 16-4 13 5 21-8 11 6 19-1 14 5 17-7 26 6 12-5 18 7 20-8 10 4 24 2 13-6 16 6 22-9 11 7 18-3 15 5 21-7 12 6 25-4 10 5 17-8 V40Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
.tear--top { top: calc(-13 * var(--u)); }
.tear--bottom { bottom: -1px; }
.tear--over { top: calc(-1 * var(--u)); transform: scaleY(-1); }
.tear--paper { background: var(--paper); filter: drop-shadow(0 -1px 0 rgba(255,255,255,.7)); }
.tear--paper2 { background: var(--paper-2); }
.tear--paper3 { background: var(--paper-3); }
.tear--ink { background: var(--ink); }
.tear--bottom.tear--paper2 { transform: scaleX(-1); }

/* ---------- type ---------- */
.display {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  letter-spacing: -.005em; line-height: .98; color: var(--black);
}
.ink .display { color: var(--white); }
.eyebrow {
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: 14px;
  color: var(--black);
}
.eyebrow--yellow { color: var(--neon-yellow); letter-spacing: .06em; }
.eyebrow--white { color: var(--white); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer;
  font-weight: 800; text-transform: uppercase; text-decoration: none; letter-spacing: .01em;
  font-size: 14px; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), filter .2s var(--ease);
}
.btn--yellow { background: var(--neon-yellow); color: var(--black); }
.btn--yellow:hover { filter: brightness(1.08); background: var(--white); }
.btn__arrow { display: inline-block; transition: transform .2s var(--ease); font-weight: 700; }
.btn:hover .btn__arrow, .kick__link:hover .btn__arrow { transform: translateX(5px); }
.btn--lg { min-height: 56px; font-size: 16px; padding: 0 26px; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; color: var(--white);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(8, 8, 8, .94); box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.site-header__inner { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 16px; max-width: 1436px; margin: 0 auto; }
.site-header__logo img { height: 28px; width: auto; }
.site-nav { display: none; }
.site-nav__list { display: flex; }
.site-nav a { text-decoration: none; font-weight: 600; }
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--neon-yellow); }
.btn--header { display: none; }
.menu-toggle {
  margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; padding: 10px;
  display: grid; align-content: center; gap: 6px; cursor: pointer;
}
.menu-toggle span { display: block; height: 3px; background: var(--white); transition: transform .25s var(--ease), opacity .25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 45; background: var(--black); color: var(--white);
  padding: 96px 24px 40px; display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__list { display: grid; gap: 6px; }
.mobile-menu__list a {
  font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 11vw, 64px);
  line-height: 1.05; text-decoration: none;
}
.mobile-menu__list a:hover { color: var(--neon-yellow); }
body.menu-open { overflow: hidden; }

/* ================= MOBILE / TABLET FLOW (default) ================= */
.canvas { position: relative; padding: 0 16px; max-width: 760px; margin: 0 auto; }
.ab { position: relative; }
.d-only { display: none; }

.hero { position: relative; min-height: 700px; display: flex; align-items: flex-end; overflow: hidden; color: var(--white); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.15) 30%, rgba(8,8,8,.75) 58%, rgba(8,8,8,.96) 100%);
}
.hero .canvas { width: 100%; padding-top: 240px; padding-bottom: 56px; }
.hero__logo img { width: min(320px, 82vw); }
.hero__eyebrow { margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; font-size: 14px; line-height: 1.35; }
.hero__accent { margin-top: 14px; font-family: var(--marker); color: var(--neon-yellow); font-size: 26px; line-height: 1.1; text-transform: uppercase; transform: rotate(-1.5deg); transform-origin: left; }
.hero__copy { margin-top: 12px; font-size: 16px; line-height: 1.5; max-width: 34em; }
.hero .btn--hero { margin-top: 20px; white-space: normal; text-align: left; min-height: 52px; }
.hero__micro { margin-top: 18px; font-weight: 700; font-size: 13px; line-height: 1.6; }

.canvas-sec { padding: 56px 0 64px; text-align: center; }
.display--canvas { font-size: clamp(44px, 12vw, 72px); }
.canvas-sec__sub { margin-top: 10px; font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.kicks { display: grid; gap: 16px; margin-top: 32px; }
.kick { background: var(--card); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.kick__link { display: flex; flex-direction: column; align-items: center; height: 100%; text-decoration: none; padding-bottom: 20px; }
.kick__img { width: 100%; transition: transform .35s var(--ease); }
.kick__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; margin-top: 8px;
  min-height: 48px; padding: 0 22px; background: var(--near-black); color: var(--white);
  font-weight: 800; font-size: 14px; text-transform: uppercase; box-shadow: 0 2px 0 rgba(0,0,0,.15);
}
.kick__btn .btn__arrow { color: var(--neon-yellow); }
.kick:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 16px 32px rgba(0,0,0,.1); }
.kick:hover .kick__img { transform: scale(1.05); }
.kick__link:hover .kick__btn { box-shadow: inset 0 -3px 0 var(--neon-yellow); }

.program { padding: 56px 0 0; }
.display--xl { font-size: clamp(46px, 13vw, 76px); }
.program__copy { margin-top: 20px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.program__copy p + p { margin-top: 14px; }
.program__copy .lead { color: var(--text); font-weight: 700; }
.program__media { margin: 32px -16px 0; }
.program__media img { width: 100%; }

.process { padding: 64px 0 56px; text-align: center; }
.display--md { font-size: clamp(34px, 8.6vw, 56px); margin-top: 12px; line-height: 1.02; }
.steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 16px; margin: 36px -16px 0; padding: 0 16px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; text-align: left;
}
.step { scroll-snap-align: start; }
.step img { width: 100%; aspect-ratio: 110 / 85; object-fit: cover; }
.step__num { margin-top: 14px; font-weight: 800; font-size: 22px; line-height: 1; }
.step__title { margin-top: 4px; font-family: var(--display); font-weight: 400; text-transform: uppercase; color: var(--neon-yellow); font-size: 24px; line-height: 1.1; letter-spacing: .01em; }
.step__num::after { content: "  →"; color: var(--neon-yellow); font-weight: 700; }
.step:last-child .step__num::after { content: ""; }
.step__copy { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #e9e9e9; }
.step-arrow { display: none; }

.healing { padding: 64px 0 48px; overflow: hidden; }
.healing__panel { display: none; }
.healing__copy { margin-top: 16px; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--text); }
.benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; margin-top: 36px; text-align: center; }
.benefit .ico { display: block; width: 56px; height: 56px; margin: 0 auto; color: var(--black); }
.benefit__title { margin-top: 8px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 22px; letter-spacing: .01em; }
.benefit p { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--text-2); }

.learn { padding: 0 0 56px; }
.learn__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 30% 30%; }
.learn .canvas { padding-top: 40px; }
.display--md2 { font-size: clamp(44px, 12vw, 68px); margin-top: 8px; }
.arrow-list { margin-top: 20px; display: grid; gap: 10px; }
.arrow-list li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.45; color: var(--text); }
.arrow-list li::before { content: "→"; position: absolute; left: 0; top: 0; font-weight: 800; }

.careers { padding: 64px 0 56px; }
.display--lg { font-size: clamp(42px, 11.5vw, 70px); margin-top: 10px; }
.careers__copy { margin-top: 20px; font-size: 16px; line-height: 1.55; color: #e2e2e2; }
.careers__hl { margin-top: 14px; color: var(--neon-yellow); font-weight: 700; }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; margin-top: 40px; text-align: center; }
.path { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; transition: transform .2s var(--ease), color .2s var(--ease); }
.path .ico { width: 52px; height: 52px; transition: color .2s var(--ease); }
.path:hover { color: var(--neon-yellow); transform: translateY(-3px); }

.outcomes { padding: 64px 0 0; }
.display--lg2 { font-size: clamp(40px, 11vw, 66px); margin-top: 10px; }
.check-list { margin-top: 24px; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.45; color: var(--text); }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: .38em; width: 13px; height: 7px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-48deg);
}
.outcomes__media { margin: 32px -16px 0; }
.outcomes__media img { width: 100%; aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 45%; }

.options { padding: 64px 0 56px; }
.display--lg3 { font-size: clamp(40px, 10.5vw, 64px); margin-top: 10px; }
.opts { margin-top: 32px; display: grid; }
.opt { text-align: center; padding: 26px 0; border-top: 1px solid #c9c9c6; }
.opt:last-child { border-bottom: 1px solid #c9c9c6; }
.opt__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--neon-yellow); color: var(--black); }
.opt__icon .ico { width: 30px; height: 30px; stroke-width: 1.75; }
.site-footer__link { display: inline-flex; transition: opacity .2s var(--ease); }
.site-footer__link:hover { opacity: .8; }
.opt__title { margin-top: 10px; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; }
.opt p { margin: 6px auto 0; font-size: 15px; line-height: 1.5; color: #555; max-width: 26em; }
.opts__rule { display: none; }

.final { overflow: hidden; }
.final__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 25% 50%; }
.final .canvas { padding-top: 32px; padding-bottom: 56px; }
.display--final { font-size: clamp(52px, 14vw, 88px); }
.final__sub { margin-top: 14px; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
.final .btn--hero { margin-top: 24px; white-space: normal; text-align: left; min-height: 52px; }

.inquiry { border-top: 1px solid #1f1f1f; }
.inquiry__inner { max-width: 1100px; margin: 0 auto; padding: 56px 16px 64px; display: grid; gap: 32px; }
.display--inq { font-size: clamp(44px, 11vw, 72px); }
.inquiry__head p { margin-top: 14px; color: #d6d6d6; max-width: 30em; }
.inquiry__form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid #3a3a3a; border-radius: 0;
  background: #151515; color: var(--white); font-size: 16px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--neon-yellow); outline-offset: 0; border-color: var(--neon-yellow); }
.inquiry__status { min-height: 1.5em; color: var(--neon-yellow); font-weight: 700; }
.inquiry.is-collapsed { display: none; }
.inquiry.is-sent .inquiry__form > :not(.inquiry__status) { display: none; }

.site-footer { padding: 28px 0 32px; }
.site-footer .canvas { display: grid; gap: 16px; }
.site-footer__brands { display: flex; align-items: center; gap: 18px; }
.site-footer__brands img { width: auto; object-fit: contain; }
.site-footer__mtte { height: 34px; }
.site-footer__academix { height: 20px; }
.site-footer__x { color: var(--neon-yellow); font-size: 26px; font-weight: 300; line-height: 1; }
.site-footer__tag { font-size: 14px; color: #dcdcdc; }

@media (min-width: 600px) {
  .kicks { grid-template-columns: 1fr 1fr; }
  .paths { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-auto-columns: 42%; }
  .inquiry__form { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

/* ================= DESKTOP: mockup-unit layout ================= */
@media (min-width: 1024px) {
  :root { --u: min(calc(100vw / 718), 2px); }
  .d-only { display: block; }
  br.d-only { display: inline; }

  .canvas { max-width: calc(718 * var(--u)); padding: 0; height: 100%; }
  .sec { height: calc(var(--sh) * var(--u)); padding: 0; min-height: 0; }
  .ab {
    position: absolute; margin: 0;
    left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u));
    width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  }
  .ab--center { left: 0; right: 0; width: auto; text-align: center; }
  .display { line-height: 1; }

  /* header */
  .site-header__inner { height: calc(40 * var(--u)); max-width: calc(718 * var(--u)); padding: 0; position: relative; }
  .site-header__logo { position: absolute; left: calc(22 * var(--u)); top: calc(9 * var(--u)); }
  .site-header__logo img { height: calc(22 * var(--u)); width: auto; }
  .site-header.is-scrolled .site-header__inner { height: calc(40 * var(--u)); }
  .site-nav { display: block; position: absolute; left: calc(161 * var(--u)); top: calc(13 * var(--u)); }
  .site-nav__list { gap: calc(16.5 * var(--u)); }
  .site-nav a { font-size: calc(8.8 * var(--u)); line-height: calc(14 * var(--u)); display: block; }
  .btn--header { display: inline-flex; position: absolute; left: calc(572 * var(--u)); top: calc(8 * var(--u)); width: calc(123 * var(--u)); height: calc(24 * var(--u)); min-height: 0; padding: 0; font-size: calc(7.1 * var(--u)); gap: calc(5 * var(--u)); }
  .menu-toggle, .mobile-menu { display: none; }

  /* hero */
  .hero { --sh: 362; display: block; min-height: 0; }
  .hero__media img { object-position: 50% 0; }
  .hero__media::after { background: linear-gradient(90deg, rgba(8,8,8,.55) 0%, rgba(8,8,8,.25) 38%, rgba(8,8,8,0) 55%); }
  .hero .canvas { padding: 0; }
  .hero__logo img { width: 100%; }
  .hero__eyebrow { font-size: calc(8.9 * var(--u)); line-height: calc(11.5 * var(--u)); letter-spacing: .085em; font-weight: 500; }
  .hero__accent { font-size: calc(15.4 * var(--u)); transform: rotate(-1deg); white-space: nowrap; }
  .hero__copy { font-size: calc(8.9 * var(--u)); line-height: calc(12.2 * var(--u)); font-weight: 500; max-width: none; }
  .hero .btn--hero, .final .btn--hero { margin: 0; font-size: calc(7.2 * var(--u)); padding: 0; min-height: 0; gap: calc(5 * var(--u)); white-space: nowrap; text-align: center; }
  .hero__micro { margin: 0; font-size: calc(7.1 * var(--u)); white-space: nowrap; }
  .hero__micro span { margin: 0 calc(3 * var(--u)); }
  .note { height: auto; }
  .tear { height: calc(14 * var(--u)); min-height: 0; }

  /* choose your canvas */
  .canvas-sec { --sh: 270; text-align: center; }
  .display--canvas { font-size: calc(33.7 * var(--u)); letter-spacing: -.002em; }
  .canvas-sec__sub { font-size: calc(8.3 * var(--u)); letter-spacing: .035em; margin: 0; }
  .kicks { display: block; margin: 0; }
  .kick__link { padding: calc(4 * var(--u)) calc(2 * var(--u)) 0; }
  .kick__img { width: calc(167 * var(--u)); }
  .kick__btn { position: absolute; left: calc(25 * var(--u)); top: calc(148 * var(--u)); width: calc(121 * var(--u)); height: calc(27 * var(--u)); min-height: 0; margin: 0; padding: 0; font-size: calc(7 * var(--u)); gap: calc(5 * var(--u)); }

  /* program */
  .program { --sh: 238; }
  .display--xl { font-size: calc(40.7 * var(--u)); line-height: calc(40 * var(--u)); }
  .program__copy { margin: 0; font-size: calc(7.9 * var(--u)); line-height: calc(12.2 * var(--u)); }
  .program__copy p + p { margin-top: calc(5.5 * var(--u)); }
  .program__copy .lead { margin-bottom: calc(1 * var(--u)); }
  .program__media { margin: 0; overflow: hidden; clip-path: polygon(3% 3%, 12% 1.5%, 22% 3.5%, 33% 1%, 45% 3%, 57% 1.2%, 68% 3.2%, 80% 1%, 91% 2.8%, 100% 1.5%, 100% 100%, 1.5% 100%, 0.4% 88%, 2.2% 76%, 0.6% 63%, 2.6% 51%, 0.8% 39%, 2.4% 27%, 0.5% 15%); }
  .program__media img { width: 100%; height: 100%; object-fit: cover; }

  /* process */
  .process { --sh: 275; text-align: center; }
  .process .eyebrow { font-size: calc(8 * var(--u)); margin: 0; }
  .display--md { font-size: calc(26.7 * var(--u)); line-height: calc(29 * var(--u)); margin: 0; }
  .steps { display: block; margin: 0; padding: 0; overflow: visible; text-align: left; }
  .step img { width: 100%; height: calc(85 * var(--u)); }
  .step__num { margin-top: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); }
  .step__num::after { content: none; }
  .step__title { margin-top: calc(3 * var(--u)); font-size: calc(13.8 * var(--u)); line-height: 1; }
  .step__copy { margin-top: calc(4 * var(--u)); font-size: calc(7.9 * var(--u)); line-height: calc(12.5 * var(--u)); width: calc(112 * var(--u)); font-weight: 500; }
  .step-arrow { display: block; color: var(--neon-yellow); font-weight: 700; font-size: calc(11 * var(--u)); line-height: 1; }

  /* healing */
  .healing { --sh: 170; overflow: visible; }
  .healing__panel {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
    clip-path: polygon(calc(50% - 72 * var(--u)) 0, 100% 0, 100% 100%, calc(50% - 117 * var(--u)) 100%, calc(50% - 114 * var(--u)) 82%, calc(50% - 104 * var(--u)) 60%, calc(50% - 98 * var(--u)) 40%, calc(50% - 84 * var(--u)) 18%);
    filter: drop-shadow(-2px 0 0 #fff);
  }
  .healing .eyebrow { font-size: calc(9 * var(--u)); }
  .healing .display--xl { line-height: calc(40 * var(--u)); }
  .healing__copy { margin: 0; font-size: calc(8.4 * var(--u)); line-height: calc(12.1 * var(--u)); font-weight: 700; }
  .benefits { display: block; margin: 0; }
  .benefit .ico { width: calc(38 * var(--u)); height: calc(38 * var(--u)); margin: calc(3 * var(--u)) auto 0; }
  .benefit__title { margin-top: calc(5 * var(--u)); font-family: var(--body); font-weight: 800; font-size: calc(9.6 * var(--u)); line-height: 1.1; letter-spacing: 0; }
  .benefit p { margin-top: calc(6 * var(--u)); font-size: calc(7.8 * var(--u)); font-weight: 500; line-height: calc(12.2 * var(--u)); color: #3d3d3d; }

  /* learn */
  .learn { --sh: 193; }
  .learn__media { position: absolute; left: 0; top: 0; bottom: 0; width: calc(50% - 89 * var(--u)); z-index: 2; overflow: hidden; }
  .learn__media img { width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 50%; }
  .learn .canvas { padding-top: 0; }
  .learn .eyebrow { font-size: calc(9 * var(--u)); }
  .display--md2 { font-size: calc(27 * var(--u)); line-height: calc(29 * var(--u)); margin: 0; }
  .arrow-list { margin: 0; gap: 0; }
  .arrow-list li { font-size: calc(8.4 * var(--u)); line-height: calc(14.6 * var(--u)); padding-left: calc(22 * var(--u)); font-weight: 500; }
  .arrow-list li::before { font-size: calc(11.5 * var(--u)); line-height: calc(14 * var(--u)); -webkit-text-stroke: calc(.5 * var(--u)) currentColor; }

  /* careers */
  .careers { --sh: 174; }
  .careers .eyebrow { font-size: calc(9 * var(--u)); }
  .careers > .tear--top { top: calc(-7 * var(--u)); height: calc(8 * var(--u)); }
  .display--lg { font-size: calc(35 * var(--u)); line-height: calc(35 * var(--u)); margin: 0; }
  .careers__copy { margin: 0; font-weight: 500; font-size: calc(8.5 * var(--u)); line-height: calc(12.1 * var(--u)); }
  .careers__hl { margin-top: calc(9 * var(--u)); }
  .paths { display: block; margin: 0; }
  .path { gap: calc(6 * var(--u)); font-size: calc(7.7 * var(--u)); white-space: nowrap; }
  .path .ico { width: calc(38 * var(--u)); height: calc(38 * var(--u)); margin-top: calc(3 * var(--u)); }

  /* outcomes */
  .outcomes { --sh: 120; }
  .outcomes .eyebrow { font-size: calc(9 * var(--u)); }
  .display--lg2 { font-size: calc(31.5 * var(--u)); line-height: calc(32.5 * var(--u)); margin: 0; }
  .check-list { margin: 0; gap: 0; }
  .check-list li { font-weight: 500; font-size: calc(8.5 * var(--u)); line-height: calc(16.3 * var(--u)); padding-left: calc(15 * var(--u)); white-space: nowrap; }
  .check-list li::before { left: calc(1 * var(--u)); top: calc(4.5 * var(--u)); width: calc(7 * var(--u)); height: calc(3.6 * var(--u)); border-width: calc(1.3 * var(--u)); }
  .outcomes__media { margin: 0; overflow: hidden; }
  .outcomes__media img { width: 100%; height: 100%; aspect-ratio: auto; }

  /* options */
  .options { --sh: 123; }
  .options .eyebrow { font-size: calc(9 * var(--u)); }
  .options > .tear--top { top: calc(-5 * var(--u)); height: calc(6 * var(--u)); }
  .display--lg3 { font-size: calc(31.3 * var(--u)); line-height: calc(30.5 * var(--u)); margin: 0; }
  .opts { display: block; margin: 0; }
  .opt { padding: 0; border: 0; }
  .opt:last-child { border: 0; }
  .opt__icon { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
  .opt__icon .ico { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
  .opt__title { margin-top: calc(10 * var(--u)); font-size: calc(7.9 * var(--u)); white-space: nowrap; }
  .opt p { margin-top: calc(7 * var(--u)); font-weight: 500; font-size: calc(7.5 * var(--u)); line-height: calc(11.8 * var(--u)); color: #4d4d4d; }
  .opts__rule { display: block; width: 1px; height: calc(76 * var(--u)); background: #c9c9c6; }

  /* final */
  .final { --sh: 193; overflow: visible; }
  .final__media { position: absolute; inset: calc(13 * var(--u)) 0 0 0; overflow: hidden; }
  .final__media img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
  .final__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.35) 75%); }
  .final .canvas { padding: 0; }
  .display--final { font-size: calc(40.4 * var(--u)); line-height: calc(40 * var(--u)); }
  .final__sub { margin: 0; font-size: calc(9.2 * var(--u)); letter-spacing: .035em; white-space: nowrap; }
  .final .tear--over { top: 0; height: calc(15 * var(--u)); }

  .inquiry__inner { grid-template-columns: 5fr 7fr; gap: 64px; padding: 88px 32px 96px; }

  /* footer */
  .site-footer { height: calc(73 * var(--u)); padding: 0; }
  .site-footer .canvas { display: block; }
  .site-footer__brands { gap: calc(12 * var(--u)); }
  .site-footer__mtte { height: calc(22 * var(--u)); }
  .site-footer__academix { height: calc(13 * var(--u)); }
  .site-footer__x { font-size: calc(19 * var(--u)); }
  .site-footer__tag { font-size: calc(7.8 * var(--u)); text-align: right; white-space: nowrap; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 16px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
  .js .hero__media img { animation: heroIn 1.2s var(--ease) both; }
  .js .hero__accent { animation: fadeIn .6s .5s var(--ease) both; }
}
@keyframes heroIn { from { transform: scale(1.02); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .kick:hover, .kick:hover .kick__img, .path:hover { transform: none; }
}