/* =========================================================
   Rad Adventure Dude — race-plate / gear-shift design system
   Palette comes from Dakota's own photos: cobalt sky, KTM orange,
   snow, aspen-bark sand, and ink for the night-ride sections.
   ========================================================= */
:root {
  --cobalt: #1B55F0;
  --cobalt-deep: #0E3AB8;
  --ink: #0A1220;
  --ink-2: #131D31;
  --snow: #F4F7FA;
  --tint: #E6EDF5;
  --orange: #FF5A14;
  --sand: #E9D8B4;
  --aspen: #B9A17D;

  --f-display: "Anybody", "Arial Narrow", Impact, sans-serif;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "DM Mono", ui-monospace, Menlo, monospace;

  --gutter: 20px;
  --r: 18px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--snow);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--orange); color: var(--ink); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }

/* ---------- type ---------- */
.d {
  font-family: var(--f-display);
  font-weight: 800;
  font-variation-settings: "wdth" 100;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
}
.eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--sand);
}
.eyebrow--ink { color: var(--cobalt-deep); }
.sec--sand .eyebrow--ink { color: var(--ink); }

.i { width: 1.15em; height: 1.15em; flex: none; }
.i--xl { width: 54px; height: 54px; }
.i--flip { transform: scaleX(-1); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 24px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 100;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn--go { background: var(--orange); color: var(--ink); box-shadow: var(--shadow-hard); }
.btn--go:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.btn--go:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--ink); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--orange); }
.btn--ink:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--orange); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.85rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .25s, box-shadow .25s; }
.nav.is-solid { background: rgba(10, 18, 32, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.nav__bar { height: var(--nav-h); display: flex; align-items: center; gap: 18px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; margin-right: auto; }
.brand__badge { width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 3px; border: 2px solid var(--ink); flex: none; overflow: hidden; }
.brand__badge img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.brand__name { font-size: 0.95rem; line-height: 1; max-width: 9ch; letter-spacing: 0; }
.nav__links { display: none; gap: 26px; }
.nav__links a { color: #fff; text-decoration: none; font-weight: 600; font-size: 0.95rem; opacity: .9; }
.nav__links a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; text-decoration-thickness: 3px; }
.nav__cta { display: none; }
.burger { width: 48px; height: 48px; border: 0; background: transparent; display: grid; place-content: center; gap: 6px; cursor: pointer; }
.burger span { display: block; width: 26px; height: 3px; background: #fff; border-radius: 3px; transition: transform .25s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 90; background: var(--ink); padding: calc(var(--nav-h) + 20px) var(--gutter) 28px; display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.8rem, 8vw, 2.6rem); line-height: 1; color: #fff; text-decoration: none; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.menu nav a:active { color: var(--orange); }
body.menu-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--cobalt); color: #fff; overflow: hidden; padding-top: calc(var(--nav-h) - 6px); isolation: isolate; }
.hero__media { position: relative; z-index: 0; height: 52svh; min-height: 300px; max-height: 480px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 38%; }
.hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--cobalt); mix-blend-mode: multiply; opacity: .42; }
.hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(27,85,240,0) 38%, var(--cobalt) 100%); }
.hero__inner { position: relative; z-index: 2; margin-top: -88px; padding-bottom: 96px; }
.hero__title { display: block; }
.hero__h1 { display: block; font-size: clamp(3rem, 14.5vw, 5.6rem); font-variation-settings: "wdth" 118; line-height: 0.88; letter-spacing: -0.012em; text-wrap: balance; }
.hero__title .eyebrow { color: var(--sand); }
.hero__stay { display: inline-block; margin: 18px 0 14px; background: var(--ink); color: var(--orange); padding: 8px 14px 6px; font-size: 1.15rem; transform: rotate(-2deg); border-radius: 6px; }
.hero__lede { font-size: 1.125rem; max-width: 36rem; color: rgba(255,255,255,.94); }
.hero__ctas { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.plate.plate--hero { position: absolute; right: var(--gutter); top: -276px; transform: rotate(7deg); width: 96px; }

/* ---------- race plate (signature) ---------- */
.plate {
  position: relative;
  background: #fff; color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 22px 22px 14px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 10px 10px;
  box-shadow: 5px 5px 0 var(--ink);
}
.plate::before, .plate::after { content: ""; position: absolute; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .85; }
.plate::before { left: 12px; }
.plate::after { right: 12px; }
.plate__no { font-size: 3.2rem; line-height: .85; font-variation-settings: "wdth" 85; font-weight: 900; }
.plate__tag { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.plate--sm { width: 92px; padding-top: 16px; }
.plate--sm .plate__no { font-size: 2.2rem; }

/* ---------- proof ---------- */
.proof { position: relative; z-index: 3; margin-top: -58px; }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.plate--stat { align-items: flex-start; text-align: left; padding: 22px 14px 14px; min-height: 124px; border-radius: 20px 20px 12px 12px; }
.plate--stat .plate__no { font-size: clamp(2.2rem, 10vw, 3.4rem); color: var(--ink); }
.plate__label { font-size: .82rem; font-weight: 600; line-height: 1.25; margin-top: 8px; }
.plate--hot { background: var(--orange); }

/* ---------- sections ---------- */
.sec { padding: 72px 0; position: relative; }
.sec--tight { padding: 56px 0; }
.sec--snow { background: var(--snow); }
.sec--tint { background: var(--tint); }
.sec--sand { background: var(--sand); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--cobalt { background: var(--cobalt); color: #fff; }
#who { padding-top: 96px; }
.sec__title { font-size: clamp(2rem, 8vw, 3.9rem); font-variation-settings: "wdth" 108; line-height: .94; margin-bottom: 18px; text-wrap: balance; max-width: 20ch; }
.sec__lede { font-size: 1.15rem; max-width: 40rem; }
.sec--ink .sec__lede { color: rgba(255,255,255,.82); }
.sec__lede--tight { margin: 26px 0 22px; }
.mini-title { font-size: 1.5rem; margin: 54px 0 18px; font-variation-settings: "wdth" 108; }
.fine { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .02em; margin-top: 12px; opacity: .75; }
.fine--light { color: #fff; opacity: .85; }

/* reveal (progressive: only hides once JS runs) */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- who ---------- */
.two { display: grid; gap: 20px; margin-top: 38px; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: var(--r); padding: 26px 22px 24px; box-shadow: var(--shadow-hard); }
.card h3 { font-size: 1.7rem; margin: 14px 0 18px; font-variation-settings: "wdth" 105; line-height: 1; }
.card--dark { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 5px 5px 0 var(--orange); }
.card__tag { display: inline-block; font-family: var(--f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; background: var(--sand); padding: 5px 10px; border-radius: 6px; border: 2px solid var(--ink); color: var(--ink); }
.card__tag--hot { background: var(--orange); }

.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.ticks .i { color: var(--cobalt); margin-top: 3px; width: 22px; height: 22px; background: var(--sand); border-radius: 50%; padding: 3px; color: var(--ink); }
.card--dark .ticks .i, .ticks--light .i { background: var(--orange); color: var(--ink); }

/* ---------- method / gear shift ---------- */
.shift { position: relative; margin-top: 42px; display: grid; gap: 0; counter-reset: none; }
.shift::before { content: ""; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 6px; background: rgba(255,255,255,.14); border-radius: 6px; }
.shift::after { content: ""; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 6px; background: linear-gradient(var(--orange), var(--sand)); border-radius: 6px; transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .1s linear; }
.gear { position: relative; z-index: 1; display: grid; grid-template-columns: 70px 1fr; gap: 16px; padding: 14px 0; align-items: start; }
.gear__no { width: 68px; height: 68px; display: grid; place-items: center; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 18px 18px 12px 12px; font-size: 2rem; font-variation-settings: "wdth" 85; font-weight: 900; box-shadow: 4px 4px 0 var(--orange); }
.gear--n .gear__no { background: transparent; color: #fff; border-color: #fff; box-shadow: none; }
.gear--top .gear__no { background: var(--orange); }
.gear h3 { font-size: 1.45rem; margin: 6px 0 6px; font-variation-settings: "wdth" 108; }
.gear p { margin: 0; color: rgba(255,255,255,.82); }

.unlock { display: grid; grid-template-columns: 1fr; gap: 16px; }
.unlock__item { background: var(--ink-2); border: 2px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 22px; }
.unlock__item .i { color: var(--orange); margin-bottom: 12px; }
.unlock__item h4 { font-family: var(--f-display); text-transform: uppercase; font-weight: 800; font-variation-settings: "wdth" 105; font-size: 1.25rem; line-height: 1; margin-bottom: 8px; }
.unlock__item p { margin: 0; color: rgba(255,255,255,.78); font-size: .98rem; }

/* ---------- versus ---------- */
.versus { display: grid; gap: 18px; margin-top: 38px; }
.versus__col { border: 3px solid var(--ink); border-radius: var(--r); padding: 24px 22px; }
.versus__col h3 { font-size: 1.9rem; margin-bottom: 16px; font-variation-settings: "wdth" 110; }
.versus__col ul { display: grid; gap: 12px; }
.versus__col li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.versus__col .i { width: 24px; height: 24px; padding: 4px; border-radius: 50%; margin-top: 2px; }
.versus__col--no { background: #fff; }
.versus__col--no h3 { text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: var(--orange); }
.versus__col--no .i { background: var(--ink); color: #fff; }
.versus__col--yes { background: var(--cobalt); color: #fff; box-shadow: 6px 6px 0 var(--ink); }
.versus__col--yes .i { background: var(--orange); color: var(--ink); }

/* ---------- value bars ---------- */
.bars { display: grid; gap: 18px; margin-top: 34px; }
.bar { background: #fff; border: 3px solid var(--ink); border-radius: var(--r); padding: 20px 20px 18px; }
.bar__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 14px; }
.bar__head h3 { font-size: 1.15rem; line-height: 1; font-variation-settings: "wdth" 105; }
.bar__val { font-family: var(--f-mono); font-weight: 500; font-size: .95rem; }
.bar__track { height: 22px; background: var(--tint); border: 2px solid var(--ink); border-radius: 99px; margin: 12px 0; overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0; border-radius: 99px; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.bar--bad .bar__fill { background: repeating-linear-gradient(-45deg, var(--ink) 0 10px, var(--orange) 10px 20px); }
.bar--mid .bar__fill { background: var(--aspen); }
.bar--rad { background: var(--cobalt); color: #fff; box-shadow: 6px 6px 0 var(--ink); }
.bar--rad .bar__track { background: rgba(255,255,255,.2); border-color: #fff; }
.bar--rad .bar__fill { background: var(--orange); }
.bar p { margin: 0; font-size: .98rem; }
.bars.is-in .bar__fill { width: var(--w); }
.chips { display: grid; gap: 10px; margin: 30px 0 0; }
.chips li { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.55); border: 2px solid var(--ink); border-radius: 14px; padding: 12px 14px; font-weight: 600; }
.chips .i { background: var(--ink); color: var(--sand); width: 24px; height: 24px; padding: 4px; border-radius: 50%; }

/* ---------- guarantee ---------- */
.sec--photo { background: var(--ink); color: #fff; overflow: hidden; }
.sec__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.sec--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,18,32,.85), rgba(10,18,32,.55) 45%, rgba(10,18,32,.9)); z-index: 0; }
.guarantee { position: relative; z-index: 1; display: grid; gap: 30px; }
.seal { position: relative; width: 150px; height: 150px; color: var(--sand); }
.seal__ring { width: 100%; height: 100%; animation: spin 40s linear infinite; }
.seal__core { position: absolute; inset: 26px; background: var(--orange); color: var(--ink); border: 4px solid var(--ink); border-radius: 50%; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 2.3rem; font-variation-settings: "wdth" 90; }
.seal__core small { font-size: .5em; align-self: flex-start; margin-top: .55em; }
.g-lead { font-size: 1.22rem; font-weight: 600; }
.fit { display: grid; gap: 14px; margin: 24px 0; }
.fit__col { border-radius: var(--r); padding: 18px 18px 6px; border: 2px solid rgba(255,255,255,.25); }
.fit__col h3 { font-size: 1.2rem; margin-bottom: 8px; font-variation-settings: "wdth" 105; }
.fit__col--yes { background: var(--cobalt); border-color: var(--cobalt); }
.fit__col--no { background: rgba(255,255,255,.06); }
.g-close { font-size: 1.5rem; color: var(--orange); margin: 6px 0 22px; line-height: 1; }

/* ---------- ebook ---------- */
.book { display: grid; gap: 38px; }
.book__cover { position: relative; width: min(78%, 300px); margin-inline: auto; transform: rotate(-4deg); }
.book__cover img { border: 4px solid var(--ink); border-radius: 12px; box-shadow: 10px 10px 0 var(--ink); }
.stamp { position: absolute; right: -14px; top: -16px; background: var(--orange); color: var(--ink); border: 4px solid var(--ink); border-radius: 50%; width: 82px; height: 82px; display: grid; place-items: center; font-size: 1.25rem; transform: rotate(14deg); }
.book .sec__title { font-size: clamp(1.9rem, 6.4vw, 3rem); max-width: 22ch; }
.book__list-title { font-size: 1.1rem; margin: 22px 0 14px; }
.optin { margin-top: 28px; background: var(--ink); border-radius: var(--r); padding: 20px; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--orange); }
.optin label { display: block; font-weight: 600; margin-bottom: 14px; }
.optin__row { display: grid; gap: 12px; }
.optin input, .cform input, .cform textarea {
  width: 100%; min-height: 54px; padding: 12px 16px; font-size: 16px;
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px;
}
.optin__msg { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; color: var(--sand); }

/* ---------- testimonials ---------- */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px var(--gutter) 22px; margin-top: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rail::-webkit-scrollbar { display: none; }
.quote { flex: 0 0 min(84vw, 380px); scroll-snap-align: center; margin: 0; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); padding: 26px 22px 20px; box-shadow: var(--shadow-hard); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.quote blockquote { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.quote blockquote::before { content: "“"; display: block; font-family: var(--f-display); font-weight: 900; font-size: 4.2rem; line-height: .6; color: var(--orange); margin-bottom: 8px; }
.quote figcaption a { font-family: var(--f-mono); font-size: .82rem; text-decoration: none; padding-top: 12px; border-top: 2px dashed currentColor; display: block; }
.quote--hot { background: var(--orange); }
.quote--hot blockquote::before { color: var(--ink); }
.quote--dark { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--orange); }
.rail__ctrl { display: none; justify-content: flex-end; gap: 12px; }
.rail__btn { width: 52px; height: 52px; border-radius: 50%; border: 3px solid var(--ink); background: #fff; display: grid; place-items: center; cursor: pointer; }
.rail__btn:hover { background: var(--orange); }

/* ---------- about ---------- */
.about { display: grid; gap: 34px; }
.about__photo { position: relative; margin: 0; }
.about__photo img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; object-position: 50% 30%; border: 4px solid var(--ink); border-radius: var(--r); box-shadow: 8px 8px 0 var(--ink); }
.about__photo .plate { position: absolute; right: 14px; bottom: -26px; transform: rotate(-6deg); }
.about__sub { font-size: 1.35rem; color: var(--cobalt-deep); margin-bottom: 18px; line-height: 1; font-variation-settings: "wdth" 105; }
.about__who { font-weight: 700; font-size: 1.2rem; }
.story { margin: 26px 0 0; display: grid; gap: 0; border-left: 4px solid var(--ink); }
.story li { position: relative; padding: 4px 0 18px 22px; display: grid; gap: 2px; }
.story li::before { content: ""; position: absolute; left: -11px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); border: 3px solid var(--ink); }
.story__when { font-size: 1.6rem; line-height: 1; font-variation-settings: "wdth" 105; }
.about__more { margin-top: 56px; }
.pull { font-size: clamp(1.4rem, 5.4vw, 2.3rem); line-height: 1.02; margin: 0 0 30px; padding-left: 18px; border-left: 8px solid var(--orange); font-variation-settings: "wdth" 104; text-transform: none; font-weight: 800; letter-spacing: -.01em; }
.about__cols p { max-width: 44rem; }
.signoff { font-size: 1.7rem; line-height: 1.02; margin: 28px 0 18px; }
.signoff span { font-family: var(--f-mono); font-size: .9rem; text-transform: none; letter-spacing: .04em; font-weight: 500; display: inline-block; margin-top: 8px; }
.ps { background: rgba(255,255,255,.55); border: 2px solid var(--ink); border-radius: var(--r); padding: 18px 20px; max-width: 46rem; margin-bottom: 26px; font-size: 1rem; }

/* ---------- videos ---------- */
.vids { display: grid; gap: 22px; margin: 36px 0 0; }
.vid a { display: block; text-decoration: none; background: var(--ink-2); border: 2px solid rgba(255,255,255,.14); border-radius: var(--r); overflow: hidden; transition: transform .2s, border-color .2s; }
.vid a:hover { transform: translateY(-4px); border-color: var(--orange); }
.vid__thumb { position: relative; display: block; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.vid__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vid__play { position: absolute; inset: 0; display: grid; place-items: center; }
.vid__play .i { width: 58px; height: 58px; padding: 16px 12px 16px 20px; background: var(--orange); color: var(--ink); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); }
.vid__meta { display: grid; gap: 6px; padding: 16px 18px 18px; }
.vid__views { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); }
.vid__title { font-weight: 700; line-height: 1.25; }
.lists { display: grid; gap: 10px; margin-bottom: 36px; }
.lists a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; text-decoration: none; background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 16px; font-weight: 600; min-height: 56px; }
.lists a:hover { background: rgba(255,255,255,.14); }
.lists b { color: var(--orange); font-size: 1.7rem; line-height: 1; text-align: right; font-variation-settings: "wdth" 90; }

/* ---------- gallery ---------- */
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 34px 0 30px; }
.g { margin: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 16px; background: var(--ink); }
.g img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; transition: transform .5s ease; }
.g:hover img { transform: scale(1.05); }
.g--wide { grid-column: span 2; }
.g--wide img { aspect-ratio: 16/9; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 30px; }
.qa { background: #fff; border: 3px solid var(--ink); border-radius: var(--r); margin-bottom: 14px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; min-height: 64px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.12rem; line-height: 1.05; font-variation-settings: "wdth" 104; -webkit-tap-highlight-color: transparent; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 34px; height: 34px; flex: none; background: var(--orange); border: 3px solid var(--ink); border-radius: 50%; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 3px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .25s; }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.qa[open] summary { background: var(--sand); border-bottom: 3px solid var(--ink); }
.qa__body { padding: 20px 20px 8px; }
.kit { display: grid; gap: 14px; margin: 6px 0 16px; }
.kit__col { background: var(--snow); border: 2px solid var(--ink); border-radius: 14px; padding: 16px; }
.kit__col h4 { font-size: 1.05rem; margin-bottom: 12px; font-variation-settings: "wdth" 105; }
.steps { counter-reset: s; display: grid; gap: 12px; margin: 6px 0 16px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 38px; height: 38px; background: var(--ink); color: var(--orange); border-radius: 12px 12px 8px 8px; font-family: var(--f-display); font-weight: 900; font-size: 1.15rem; }
.qa__body .btn { margin: 4px 0 14px; }

/* ---------- shop ---------- */
.shop { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.prod a { display: block; text-decoration: none; }
.prod__img { position: relative; display: block; border: 3px solid var(--ink); border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.prod__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.prod__oos { position: absolute; left: 10px; top: 10px; background: var(--ink); color: #fff; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; }
.prod__name { display: block; margin-top: 14px; font-size: 1.05rem; line-height: 1; font-variation-settings: "wdth" 105; }

/* ---------- blog ---------- */
.posts { display: grid; gap: 16px; margin-top: 28px; }
.post { background: #fff; border: 3px solid var(--ink); border-radius: var(--r); padding: 22px; box-shadow: 4px 4px 0 var(--ink); }
.post time { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.post h3 { font-size: 1.35rem; line-height: 1.12; margin: 8px 0 10px; font-weight: 800; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; }
.post p { margin: 0; }

/* ---------- contact ---------- */
.contact { display: grid; gap: 34px; }
.mail { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font-weight: 700; font-size: 1.1rem; text-decoration-color: var(--orange); text-underline-offset: 5px; text-decoration-thickness: 3px; word-break: break-all; }
.social { display: flex; gap: 12px; margin-top: 22px; }
.social a { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, background .15s; }
.social a:hover { background: var(--orange); transform: translateY(-3px); }
.social .i { width: 26px; height: 26px; }
.cform { background: var(--ink); border-radius: var(--r); padding: 22px; box-shadow: 8px 8px 0 var(--orange); }
.cform label { display: block; font-family: var(--f-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px; color: var(--sand); }
.cform input, .cform textarea { margin-bottom: 16px; }
.cform textarea { resize: vertical; min-height: 120px; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #fff; padding: 54px 0 40px; }
.foot__inner { display: grid; gap: 26px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot__nav a { text-decoration: none; font-weight: 600; opacity: .85; padding: 6px 0; }
.foot__nav a:hover { opacity: 1; color: var(--orange); }
.foot__tag { font-size: clamp(3.4rem, 18vw, 8rem); color: var(--orange); line-height: .85; font-variation-settings: "wdth" 120; margin: 8px 0 0; }
.foot__copy { font-family: var(--f-mono); font-size: .78rem; opacity: .6; margin: 0; }

/* ---------- sticky mobile CTA ---------- */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10,18,32,0), rgba(10,18,32,.9) 40%); transform: translateY(110%); transition: transform .3s ease; pointer-events: none; }
.sticky.is-on { transform: none; pointer-events: auto; }
.sticky .btn { box-shadow: 4px 4px 0 var(--ink); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-40px) rotate(-16deg); } to { opacity: 1; transform: translateY(0) rotate(7deg); } }

.js .hero__title .eyebrow, .js .hero__h1, .js .hero__stay, .js .hero__lede, .js .hero__ctas { animation: rise .8s cubic-bezier(.2,.7,.2,1) both; }
.js .hero__h1 { animation-delay: .08s; }
.js .hero__stay { animation-delay: .22s; }
.js .hero__lede { animation-delay: .3s; }
.js .hero__ctas { animation-delay: .4s; }
.js .plate--hero { animation: drop .9s cubic-bezier(.3,1.3,.5,1) .5s both; }

/* ==================== ≥ 700px ==================== */
@media (min-width: 700px) {
  :root { --gutter: 32px; }
  .hero__ctas { flex-direction: row; }
  .proof__grid { grid-template-columns: repeat(4, 1fr); }
  .two { grid-template-columns: 1fr 1fr; gap: 28px; }
  .card--tilt-l { transform: rotate(-1.2deg); }
  .card--tilt-r { transform: rotate(1.2deg); margin-top: 22px; }
  .unlock { grid-template-columns: 1fr 1fr; }
  .versus { grid-template-columns: 1fr 1fr; gap: 28px; }
  .fit { grid-template-columns: 1fr 1fr; }
  .optin__row { grid-template-columns: 1fr auto; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .vids { grid-template-columns: 1fr 1fr; }
  .vid--big { grid-column: span 2; }
  .vid--big a { display: grid; grid-template-columns: 1.3fr 1fr; }
  .vid--big .vid__meta { align-content: center; padding: 28px; }
  .vid--big .vid__title { font-family: var(--f-display); text-transform: uppercase; font-size: 1.9rem; line-height: .98; font-weight: 800; font-variation-settings: "wdth" 105; }
  .lists { grid-template-columns: 1fr 1fr; }
  .shop { grid-template-columns: repeat(2, minmax(0, 340px)); gap: 28px; }
  .posts { grid-template-columns: 1fr 1fr; }
  .rail__ctrl { display: flex; }
  .rail { padding-inline: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); }
  .kit { grid-template-columns: 1fr 1fr; }
}

/* ==================== ≥ 980px ==================== */
@media (min-width: 980px) {
  :root { --nav-h: 76px; }
  body { padding-bottom: 0; }
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }
  .sticky { display: none; }
  .brand__name { max-width: none; font-size: 1.05rem; }

  .hero { min-height: 720px; display: grid; align-items: center; padding-top: var(--nav-h); }
  .hero__media { position: absolute; inset: 0 0 0 36%; height: auto; max-height: none; }
  .hero__media img { object-position: 50% 42%; }
  .hero__media::after { background: linear-gradient(90deg, var(--cobalt) 0%, rgba(27,85,240,.55) 22%, rgba(27,85,240,0) 55%), linear-gradient(0deg, var(--cobalt) 0%, rgba(27,85,240,0) 22%); }
  .hero__inner { margin-top: 0; padding-block: 70px 130px; }
  .hero__title, .hero__stay, .hero__lede, .hero__ctas { max-width: min(640px, 52vw); }
  .hero__h1 { font-size: clamp(4.8rem, 8.2vw, 7.6rem); }
  .plate.plate--hero { right: clamp(24px, 4vw, 72px); left: auto; top: 118px; bottom: auto; width: 140px; padding-top: 24px; }
  .plate--hero .plate__no { font-size: 4.6rem; }
  .proof { margin-top: -78px; }
  .plate--stat { min-height: 148px; padding: 26px 20px 18px; }

  .sec { padding: 112px 0; }
  .sec--tight { padding: 84px 0; }
  #who { padding-top: 140px; }

  .shift { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 64px; }
  .shift::before { left: 34px; right: 34px; top: 34px; bottom: auto; width: auto; height: 6px; }
  .shift::after { left: 34px; right: 34px; top: 34px; bottom: auto; width: auto; height: 6px; background: linear-gradient(90deg, var(--orange), var(--sand)); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .gear { grid-template-columns: 1fr; gap: 18px; padding: 0; }
  .gear h3 { font-size: 1.25rem; }
  .gear p { font-size: .95rem; }
  .unlock { grid-template-columns: repeat(4, 1fr); }

  .bars { max-width: 900px; }
  .chips { grid-template-columns: 1fr 1fr; max-width: 900px; }

  .guarantee { grid-template-columns: 210px 1fr; gap: 56px; align-items: start; }
  .seal { width: 210px; height: 210px; position: sticky; top: 120px; }
  .seal__core { inset: 36px; font-size: 3.2rem; }

  .book { grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; }
  .book__cover { width: min(100%, 380px); }

  .about { grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
  .about__photo img { aspect-ratio: 4/4.4; object-position: 40% 20%; }
  .about__cols { columns: 2; column-gap: 40px; }
  .about__cols p { break-inside: avoid; }

  .vids { grid-template-columns: repeat(3, 1fr); }
  .vid--big { grid-column: span 3; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .g--wide { grid-column: span 2; }

  .faq { grid-template-columns: 0.7fr 1.3fr; gap: 80px; align-items: start; }
  .faq__intro { position: sticky; top: 120px; }

  .contact { grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: center; }
  .foot__inner { grid-template-columns: 1fr auto; align-items: center; }
  .foot__tag, .foot__copy { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .bar__fill { width: var(--w) !important; }
  .shift::after { transform: none !important; }
}