:root {
  --cream: #fff8ed;
  --paper: #fffdf8;
  --ink: #10272b;
  --ink-2: #284348;
  --muted: #617277;
  --coral: #ff7257;
  --coral-dark: #a83222;
  --mint: #a9e8c9;
  --blue: #a7dded;
  --yellow: #ffd774;
  --snow: #f5fbfc;
  --line: #173136;
  --radius: 32px;
  --shadow: 0 18px 0 rgb(16 39 43 / 8%), 0 38px 90px rgb(31 65 68 / 14%);
  --ease: cubic-bezier(.2, .82, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cream); }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--ink); background: var(--yellow); }
:focus-visible { outline: 4px solid #27798c; outline-offset: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 10px;
  padding: .8rem 1rem;
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.scroll-meter {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  pointer-events: none;
}
.scroll-meter i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
}

.site-header {
  position: fixed;
  z-index: 100;
  top: 18px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  width: min(calc(100% - 32px), 1320px);
  min-height: 60px;
  padding: 7px 8px 7px 20px;
  border: 1px solid rgb(16 39 43 / 12%);
  border-radius: 999px;
  background: rgb(255 253 248 / 88%);
  box-shadow: 0 10px 40px rgb(20 50 54 / 10%);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translateX(-50%);
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
  width: fit-content;
  font-size: .88rem;
  font-weight: 850;
  letter-spacing: -.025em;
  text-decoration: none;
}
.wordmark__dot {
  width: .72rem;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 38% 62% 58% 42%;
  background: var(--coral);
  box-shadow: 4px 3px 0 var(--yellow);
  transform: rotate(18deg);
}
.site-header nav { display: flex; gap: 1.6rem; padding: 0 1.7rem; }
.site-header nav a {
  color: var(--ink-2);
  font-size: .78rem;
  font-weight: 720;
  text-decoration: none;
}
.header-buy,
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .72rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 820;
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.header-buy { color: #fff; background: var(--ink); }
.header-buy:hover, .button:hover { transform: translateY(-3px) rotate(-1deg); }
.button--ink { color: #fff; background: var(--ink); box-shadow: 6px 7px 0 var(--coral); }
.button--coral { color: var(--ink); background: var(--coral); box-shadow: 6px 7px 0 var(--ink); }

.kicker,
.eyebrow {
  margin: 0;
  color: var(--ink-2);
  font-size: .72rem;
  font-weight: 820;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.kicker { display: flex; align-items: center; gap: .55rem; }
.kicker span { color: var(--coral); font-size: .75rem; }
.eyebrow { color: var(--coral-dark); }

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: linear-gradient(140deg, #fffaf1, #f4e7d6);
}
.hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgb(255 248 237 / 98%) 0 32%, rgb(255 248 237 / 66%) 45%, transparent 72%);
}
.hero__world {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
}
.hero__world > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 50%;
  filter: saturate(.98) contrast(.98);
  transform: scale(1.018);
}
.hero__weather {
  position: absolute;
  inset: 0;
  opacity: .38;
  pointer-events: none;
}
.hero__weather--rain {
  background-image: repeating-linear-gradient(110deg, transparent 0 47px, rgb(110 178 196 / 32%) 48px 50px, transparent 51px 92px);
  background-size: 140px 140px;
  animation: rain-drift 10s linear infinite;
}
.hero__weather--snow {
  opacity: .58;
  background:
    radial-gradient(circle at 18% 12%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 62% 28%, #fff 0 3px, transparent 4px),
    radial-gradient(circle at 84% 16%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 42% 72%, #fff 0 2px, transparent 3px);
  background-size: 210px 190px;
  animation: snow-drift 18s linear infinite;
}
.hero__copy {
  position: relative;
  z-index: 3;
  width: min(47rem, 52vw);
  padding: clamp(9rem, 19vh, 13rem) 0 10rem max(5vw, calc((100vw - 1320px) / 2));
}
.hero h1 {
  max-width: 10ch;
  margin: .25em 0 .28em;
  font-size: clamp(3.8rem, 6.7vw, 7.7rem);
  font-weight: 880;
  letter-spacing: -.075em;
  line-height: .83;
}
.hero h1 em {
  display: inline-block;
  color: var(--coral-dark);
  font-style: normal;
}
.hero__intro {
  max-width: 37rem;
  margin: 0 0 1.35rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.4vw, 1.22rem);
  line-height: 1.5;
}
.role-switch,
.mini-switch {
  display: flex;
  width: fit-content;
  gap: .35rem;
  padding: .35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(255 253 248 / 78%);
}
.role-switch button,
.mini-switch button {
  min-height: 38px;
  padding: .6rem .85rem;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: .76rem;
  font-weight: 780;
  cursor: pointer;
}
.role-switch button.is-active,
.mini-switch button.is-active {
  color: #fff;
  background: var(--ink);
}
.hero__buyline {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 1.35rem;
}
.hero__buyline p { display: grid; margin: 0; }
.hero__buyline strong { font-size: 1.9rem; letter-spacing: -.05em; line-height: 1; }
.hero__buyline span { font-size: .74rem; font-weight: 680; }
.hero__product {
  position: absolute;
  z-index: 2;
  right: -2.5vw;
  bottom: -4vh;
  width: min(48vw, 700px);
  aspect-ratio: 1;
  filter: drop-shadow(0 42px 40px rgb(22 42 40 / 28%));
  transform: rotate(4deg);
}
.hero__product img { width: 100%; height: 100%; object-fit: contain; }
.hero__orbit {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 4.5rem;
  min-height: 4.5rem;
  padding: .6rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  background: var(--paper);
  box-shadow: 6px 7px 0 var(--ink);
  font-size: .7rem;
  font-weight: 860;
  letter-spacing: .05em;
  text-transform: uppercase;
  animation: bob 5s var(--ease) infinite;
}
.hero__orbit--touch { top: 5%; left: 20%; background: var(--blue); }
.hero__orbit--grip { top: 34%; right: 4%; background: var(--yellow); animation-delay: -1.6s; }
.hero__orbit--zip { right: 18%; bottom: 6%; background: var(--coral); animation-delay: -3.1s; }
.hero__route-link {
  position: absolute;
  z-index: 4;
  bottom: 2.3rem;
  left: max(5vw, calc((100vw - 1320px) / 2));
  display: grid;
  grid-template-columns: auto 120px;
  align-items: center;
  gap: 1rem;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: none;
}
.hero__route-link svg { width: 120px; }

.route { position: relative; background: var(--blue); }
.route__intro {
  min-height: 72svh;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 8rem 6vw;
  border-bottom: 2px solid var(--ink);
  text-align: center;
  background:
    radial-gradient(circle at 8% 18%, rgb(255 255 255 / 62%) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 42%, rgb(255 255 255 / 55%) 0 5px, transparent 6px),
    linear-gradient(135deg, #c7eff6, var(--blue));
  background-size: 90px 90px, 130px 130px, auto;
}
.route__intro h2,
.crew h2,
.fit-check h2,
.size-section h2,
.quick-facts h2 {
  margin: .22em 0;
  font-size: clamp(3rem, 7vw, 7.2rem);
  font-weight: 880;
  letter-spacing: -.07em;
  line-height: .88;
}
.route__intro > p:last-child {
  max-width: 34rem;
  margin: .7rem auto 0;
  color: var(--ink-2);
  font-size: 1.05rem;
  line-height: 1.55;
}

.route__visual { display: none; }
.route__experience { position: relative; }
.route__steps { width: min(100% - 2rem, 760px); margin-inline: auto; padding: 5rem 0; }
.route-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1rem 0 5rem;
}
.route-step__number {
  font-size: .8rem;
  font-weight: 850;
  letter-spacing: .1em;
  writing-mode: vertical-rl;
}
.route-step__copy {
  padding: 2rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 10px 12px 0 var(--ink);
}
.route-step h3 {
  max-width: 11ch;
  margin: .22em 0 .3em;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  letter-spacing: -.06em;
  line-height: .9;
}
.route-step__copy > p:not(.eyebrow) { max-width: 31rem; color: var(--ink-2); line-height: 1.52; }
.route-step__poster {
  grid-column: 2;
  width: 100%;
  margin-top: 2rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--paper);
}
.fact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
}
.fact-pills li {
  padding: .58rem .78rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--yellow);
  font-size: .72rem;
  font-weight: 760;
}
.route-step:nth-child(2) .fact-pills li { background: var(--coral); }
.route-step:nth-child(3) .fact-pills li { background: var(--mint); }
.route-step:nth-child(4) .fact-pills li { background: var(--blue); }
.route-step:nth-child(5) .fact-pills li { background: var(--cream); }
.mini-switch { margin-top: 1rem; background: var(--cream); }
.test-touch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
  padding: .78rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: var(--mint);
  box-shadow: 4px 5px 0 var(--ink);
  font-size: .78rem;
  font-weight: 820;
  cursor: pointer;
}
.zip-control {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .65rem;
  margin-top: 1rem;
  color: var(--ink-2);
  font-size: .7rem;
  font-weight: 760;
}
.zip-control input { width: 100%; accent-color: var(--coral); }

.js .route__experience {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(26rem, .75fr);
  align-items: start;
  width: min(100%, 1540px);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 4rem);
}
.js .route__visual {
  position: sticky;
  top: 0;
  display: block;
  height: 100svh;
  min-height: 42rem;
}
.js .route__stage {
  --scene-progress: 0;
  --route-progress: 0;
  --zip-progress: .52;
  position: relative;
  height: calc(100% - 4rem);
  margin: 2rem 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: clamp(28px, 4vw, 52px);
  background: var(--paper);
  box-shadow: 14px 16px 0 var(--ink);
}
.route__map {
  position: absolute;
  z-index: 10;
  top: 1rem;
  right: 2rem;
  left: 2rem;
  height: 74px;
  color: rgb(16 39 43 / 38%);
}
.route__map svg { width: 100%; height: 100%; }
.route__traveller {
  position: absolute;
  top: 31px;
  left: calc(3% + var(--route-progress) * 85%);
  width: 28px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 45% 55% 38% 62%;
  background: var(--coral);
  box-shadow: 3px 4px 0 var(--ink);
  transform: translateX(-50%) rotate(-8deg);
  transition: left 280ms var(--ease);
}
.route__traveller::before,
.route__traveller::after {
  position: absolute;
  bottom: -8px;
  width: 8px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  content: "";
}
.route__traveller::before { left: 1px; }
.route__traveller::after { right: 1px; }

.route-scene {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5.5rem 2rem 4rem;
  visibility: hidden;
  opacity: 0;
  transform: scale(.96) translateY(14px);
  transition: opacity 360ms var(--ease), transform 520ms var(--ease), visibility 0s 520ms;
}
.route__stage[data-active-scene="regen"] .route-scene--regen,
.route__stage[data-active-scene="grip"] .route-scene--grip,
.route__stage[data-active-scene="touch"] .route-scene--touch,
.route__stage[data-active-scene="rits"] .route-scene--rits,
.route__stage[data-active-scene="maat"] .route-scene--maat {
  z-index: 3;
  visibility: visible;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0s;
}
.scene-card--product {
  position: relative;
  width: min(74%, 650px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 42% 58% 53% 47% / 46% 42% 58% 54%;
  background: #e8eaec;
  box-shadow: 13px 16px 0 var(--blue), 15px 18px 0 var(--ink);
  transform: rotate(-3deg) translateY(calc(var(--scene-progress) * -12px));
}
.scene-card img,
.scene-plate,
.scene-product,
.zip-stack img,
.material-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.drop {
  position: absolute;
  width: 15px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 70% 42% 67% 44%;
  background: rgb(128 211 229 / 72%);
  box-shadow: 0 4px 12px rgb(16 39 43 / 20%);
  animation: drop-slide 4s var(--ease) infinite;
}
.drop--1 { top: 20%; left: 32%; }
.drop--2 { top: 34%; left: 64%; animation-delay: -1.4s; }
.drop--3 { top: 56%; left: 45%; animation-delay: -2.7s; }
.helper-card {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .72rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 20px;
  color: var(--ink);
  box-shadow: 6px 7px 0 var(--ink);
  transform: rotate(2deg);
}
.helper-card span {
  display: grid;
  width: 2.3rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-weight: 900;
}
.helper-card p { margin: 0; font-size: .74rem; font-weight: 800; line-height: 1.25; }
.helper-card--blue { right: 7%; bottom: 12%; background: var(--blue); }
.helper-card--coral { top: 17%; right: 7%; background: var(--coral); }
.helper-card--mint { right: 7%; bottom: 13%; background: var(--mint); }
.helper-card--yellow { right: 8%; bottom: 12%; background: var(--yellow); }
.helper-card--ink { right: 8%; bottom: 11%; color: #fff; background: var(--ink); }
.helper-card--ink span { color: var(--ink); }

.scene-plate {
  position: absolute;
  inset: 5.5rem 1.6rem 3.3rem;
  width: calc(100% - 3.2rem);
  height: calc(100% - 8.8rem);
  border: 2px solid var(--ink);
  border-radius: 30px;
  object-fit: cover;
  box-shadow: 10px 12px 0 var(--ink);
}
.scene-product {
  position: absolute;
  z-index: 3;
  object-fit: contain;
  filter: drop-shadow(0 30px 30px rgb(13 36 38 / 28%));
}
.scene-product--palm {
  left: 5%;
  bottom: 2%;
  width: 62%;
  height: 72%;
  transform: rotate(-16deg) translate(calc(var(--scene-progress) * 8px), calc(var(--scene-progress) * -12px));
}
.route-scene--grip[data-grip-mode="tas"] .scene-product--palm {
  left: 37%;
  transform: rotate(12deg) translate(calc(var(--scene-progress) * -8px), calc(var(--scene-progress) * -12px));
}
.scene-product--touch {
  right: -8%;
  bottom: -3%;
  width: 70%;
  height: 72%;
  border-radius: 50% 0 0 0;
  transform: rotate(4deg) scale(calc(.93 + var(--scene-progress) * .05));
}
.touch-pulse {
  position: absolute;
  z-index: 5;
  top: 42%;
  right: 26%;
  width: 46px;
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgb(169 232 201 / 50%), 0 0 40px 22px rgb(169 232 201 / 65%);
  opacity: .2;
  transform: scale(.7);
  transition: opacity 220ms ease, transform 380ms var(--ease);
}
.route-scene--touch.is-tested .touch-pulse { opacity: 1; transform: scale(1.15); }

.zip-stack {
  position: relative;
  width: min(70%, 650px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 38px;
  background: #eee;
  box-shadow: 12px 14px 0 var(--coral), 14px 16px 0 var(--ink);
  transform: rotate(-2deg);
}
.zip-stack img { position: absolute; inset: 0; }
.zip-stack .zip-open { opacity: var(--zip-progress); clip-path: inset(calc((1 - var(--zip-progress)) * 55%) 0 0); }

.material-stack {
  position: relative;
  width: min(80%, 720px);
  height: min(72%, 620px);
}
.material-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 72%;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 9px 10px 0 var(--ink);
  transition: transform 460ms var(--ease);
}
.material-tile img { object-fit: cover; }
.material-tile span {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  left: .65rem;
  padding: .55rem .7rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  font-size: .7rem;
  font-weight: 830;
  text-align: center;
}
.material-tile--shell { z-index: 1; transform: translate(-82%, -50%) rotate(-7deg); }
.material-tile--fleece { z-index: 3; transform: translate(-50%, -56%); }
.material-tile--print { z-index: 2; transform: translate(-18%, -50%) rotate(7deg); }
.route__stage[data-active-scene="maat"] .material-tile--shell { transform: translate(-116%, -50%) rotate(-10deg); }
.route__stage[data-active-scene="maat"] .material-tile--print { transform: translate(16%, -50%) rotate(10deg); }

.route__stage-meta {
  position: absolute;
  z-index: 12;
  right: 2rem;
  bottom: 1.25rem;
  left: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.route__stage-meta span { color: var(--coral-dark); }
.js .route__steps { width: auto; margin: 0; padding: 0 0 0 clamp(1.5rem, 4vw, 4rem); }
.js .route-step {
  min-height: 100svh;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8rem 0;
  opacity: .38;
  transition: opacity 280ms var(--ease);
}
.js .route-step.is-active { opacity: 1; }
.js .route-step__number { display: none; }
.js .route-step__copy {
  width: 100%;
  padding: clamp(1.7rem, 3vw, 2.6rem);
  box-shadow: 9px 10px 0 var(--ink);
  transform: translateY(18px) rotate(.8deg);
  transition: transform 420ms var(--ease);
}
.js .route-step.is-active .route-step__copy { transform: translateY(0) rotate(0); }
.js .route-step h3 { font-size: clamp(2.8rem, 4.5vw, 5.4rem); }
.js .route-step__poster { display: none; }

.crew {
  padding: clamp(7rem, 11vw, 11rem) max(5vw, calc((100vw - 1320px) / 2));
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
}
.crew__heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.5rem; margin-bottom: 3rem; }
.crew__heading .kicker { grid-column: 1 / -1; }
.crew__heading h2 { max-width: 9ch; margin: 0; font-size: clamp(3.5rem, 7vw, 7rem); }
.crew__heading > p:last-child { max-width: 25rem; margin: 0 0 .5rem; color: var(--muted); line-height: 1.5; }
.crew__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.crew-card {
  position: relative;
  min-height: 33rem;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 36px;
  box-shadow: 10px 12px 0 var(--ink);
  transition: transform 260ms var(--ease);
}
.crew-card:hover { transform: translateY(-8px) rotate(-.8deg); }
.crew-card--mint { background: var(--mint); }
.crew-card--coral { background: var(--coral); }
.crew-card--coral .eyebrow,
.crew-card.crew-card--coral > p:not(.eyebrow) { color: var(--ink); }
.crew-card--yellow { background: var(--yellow); }
.crew-card h3 {
  max-width: 10ch;
  margin: .25em 0;
  font-size: clamp(2rem, 3vw, 3.2rem);
  letter-spacing: -.055em;
  line-height: .92;
}
.crew-card > p:not(.eyebrow) { max-width: 26rem; color: var(--ink-2); line-height: 1.45; }
.crew-card > a { margin-top: auto; font-size: .8rem; font-weight: 840; }
.crew-avatar {
  height: 14rem;
  margin: -.4rem -.3rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background-image: url("./assets/route-hero-1500.webp");
  background-repeat: no-repeat;
  background-size: 230% auto;
  box-shadow: 6px 7px 0 var(--ink);
}
.crew-avatar--bike { background-position: 17% 69%; }
.crew-avatar--scooter { background-position: 46% 69%; }
.crew-avatar--worker { background-position: 70% 68%; }

.fit-check {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  min-height: 88svh;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
}
.fit-check__scene { position: relative; min-height: 44rem; overflow: hidden; }
.fit-check__scene img { width: 100%; height: 100%; object-fit: cover; }
.fit-check__scene::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 68%, var(--ink));
  content: "";
}
.fit-check__cat {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 8%;
  display: grid;
  width: 78px;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 46% 46% 52% 52%;
  background: var(--coral);
  box-shadow: 7px 8px 0 var(--yellow);
  font-size: .8rem;
  font-weight: 900;
}
.fit-check__copy {
  align-self: center;
  padding: 6rem max(6vw, calc((100vw - 1320px) / 2)) 6rem 5vw;
  color: var(--paper);
}
.fit-check__copy .kicker { color: var(--mint); }
.fit-check__copy h2 { max-width: 8ch; margin: .3em 0 .5em; font-size: clamp(3rem, 6vw, 6rem); }
.fit-row { display: grid; grid-template-columns: 3.3rem 1fr; gap: 1rem; align-items: start; max-width: 34rem; padding: 1.1rem 0; border-top: 1px solid rgb(255 255 255 / 18%); }
.fit-row p { margin: .25rem 0 0; color: #d7e1df; line-height: 1.5; }
.fit-icon {
  display: grid;
  width: 3rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--paper);
  border-radius: 50%;
  color: var(--ink);
  box-shadow: 4px 5px 0 rgb(255 255 255 / 28%);
  font-weight: 900;
}
.fit-icon--yes { background: var(--mint); }
.fit-icon--more { background: var(--yellow); }

.size-section {
  display: grid;
  grid-template-columns: minmax(22rem, .8fr) minmax(24rem, 1fr) minmax(22rem, .8fr);
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  padding: clamp(7rem, 12vw, 12rem) max(5vw, calc((100vw - 1500px) / 2));
  border-bottom: 2px solid var(--ink);
  background:
    radial-gradient(circle at 50% 50%, rgb(167 221 237 / 55%) 0 22%, transparent 23%),
    var(--cream);
}
.size-section__copy h2 { max-width: 8ch; margin: .25em 0; font-size: clamp(3.5rem, 6vw, 6.4rem); }
.size-section__copy > p:not(.kicker) { max-width: 28rem; color: var(--muted); line-height: 1.5; }
.measure-line { position: relative; height: 46px; margin: 1.5rem 0 1rem; }
.measure-line span { position: absolute; top: 20px; right: 0; left: 0; border-top: 3px dashed var(--coral); }
.measure-line i { position: absolute; top: 8px; right: 8%; width: 24px; height: 24px; border: 3px solid var(--coral); border-radius: 50%; background: var(--cream); }
.measure-line b { position: absolute; right: 18%; bottom: 0; padding: .25rem .5rem; background: var(--cream); font-size: .7rem; }
table { width: 100%; border-collapse: collapse; font-size: .84rem; }
caption { padding: 0 0 .7rem; font-weight: 800; text-align: left; }
th, td { padding: .75rem .4rem; border-bottom: 1px solid rgb(16 39 43 / 22%); text-align: left; }
thead th { color: var(--muted); font-size: .68rem; text-transform: uppercase; }

.size-section__visual { position: relative; min-width: 0; }
.size-glove {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 50% 45% 48% 52%;
  background: var(--paper);
  box-shadow: 14px 16px 0 var(--mint), 16px 18px 0 var(--ink);
  transform: rotate(-4deg);
}
.size-glove img { width: 100%; height: 100%; object-fit: contain; }
.size-note {
  position: absolute;
  display: grid;
  min-width: 4.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 5px 6px 0 var(--ink);
  font-size: .7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.size-note--one { top: 6%; right: -3%; background: var(--coral); }
.size-note--two { bottom: 8%; left: -3%; background: var(--yellow); }

.order-card {
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border: 2px solid var(--ink);
  border-radius: 34px;
  background: var(--paper);
  box-shadow: 12px 14px 0 var(--ink);
}
.order-card__top { display: flex; align-items: start; justify-content: space-between; padding-bottom: 1.2rem; border-bottom: 1px solid rgb(16 39 43 / 18%); }
.order-card h3 { margin: .12em 0 0; font-size: 2.4rem; letter-spacing: -.06em; }
.order-card h3 span { font-size: .8rem; font-weight: 650; letter-spacing: 0; }
.order-card__weather { display: grid; width: 3.1rem; aspect-ratio: 1; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--blue); font-size: 1.2rem; }
.order-card fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.3rem 0 0; padding: 0; border: 0; }
.order-card legend { margin-bottom: .7rem; font-size: .78rem; font-weight: 820; }
.order-card label { cursor: pointer; }
.order-card input { position: absolute; opacity: 0; pointer-events: none; }
.order-card label > span {
  display: grid;
  gap: .2rem;
  padding: .85rem;
  border: 2px solid var(--ink);
  border-radius: 18px;
  background: var(--cream);
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.order-card label:hover > span { transform: translateY(-2px); }
.order-card input:focus-visible + span { outline: 4px solid #27798c; outline-offset: 3px; }
.order-card input:checked + span { background: var(--yellow); box-shadow: 4px 5px 0 var(--ink); transform: translateY(-3px); }
.order-card small { color: var(--muted); font-size: .67rem; }
.size-message, .order-message { min-height: 1.3em; margin: .8rem 0; color: var(--muted); font-size: .72rem; }
.order-button {
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  color: #fff;
  background: var(--ink);
  box-shadow: 6px 7px 0 var(--coral);
  font-weight: 830;
  cursor: pointer;
}

.quick-facts {
  padding: clamp(7rem, 11vw, 11rem) max(5vw, calc((100vw - 1320px) / 2));
  background: var(--mint);
}
.quick-facts h2 { margin: .25em 0 .65em; font-size: clamp(3.5rem, 7vw, 7rem); }
.quick-facts dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0; }
.quick-facts dl div { min-height: 9rem; padding: 1.3rem; border: 2px solid var(--ink); border-radius: 24px; background: var(--paper); box-shadow: 6px 7px 0 var(--ink); }
.quick-facts dt { color: var(--coral-dark); font-size: .68rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.quick-facts dd { margin: 1.5rem 0 0; font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 820; letter-spacing: -.035em; }

.purchase-dock {
  position: fixed;
  z-index: 90;
  bottom: 16px;
  left: 50%;
  display: grid;
  grid-template-columns: auto auto;
  gap: .5rem;
  align-items: center;
  width: min(calc(100% - 28px), 440px);
  padding: .48rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgb(255 253 248 / 90%);
  box-shadow: 8px 10px 0 var(--ink), 0 24px 60px rgb(16 39 43 / 18%);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
  transition: opacity 220ms ease, transform 220ms var(--ease);
}
.js .purchase-dock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 18px);
}
.js .purchase-dock.is-visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}
.purchase-dock button {
  min-height: 45px;
  padding: .65rem .9rem;
  border: 0;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 820;
  cursor: pointer;
}
.dock-size { color: var(--ink); background: transparent; }
.dock-buy { color: #fff; background: var(--ink); }
.dock-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  left: 0;
  padding: 1rem;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: 8px 10px 0 var(--ink);
}
.dock-popover p { margin: 0 0 .6rem; font-size: .75rem; font-weight: 820; }
.dock-popover button { display: flex; justify-content: space-between; width: 100%; margin-top: .4rem; border: 2px solid var(--ink); background: var(--cream); }
.dock-popover button[aria-pressed="true"] { background: var(--yellow); }
.dock-popover small { color: var(--muted); }

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem max(5vw, calc((100vw - 1320px) / 2)) 7rem;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  font-size: .78rem;
}
footer p { color: var(--muted); }
footer > a:last-child { font-weight: 820; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes rain-drift { to { background-position: 140px 280px; } }
@keyframes snow-drift { to { background-position: 210px 380px, -130px 260px, 180px 320px, -210px 380px; } }
@keyframes drop-slide {
  0%, 100% { transform: translateY(-8px) rotate(16deg); opacity: .2; }
  45%, 70% { transform: translateY(35px) rotate(16deg); opacity: 1; }
}

@media (max-width: 1100px) {
  .hero::after { background: linear-gradient(90deg, rgb(255 248 237 / 96%) 0 34%, rgb(255 248 237 / 58%) 58%, transparent 82%); }
  .hero__copy { width: 60vw; }
  .hero__product { right: -9vw; width: 56vw; }
  .size-section { grid-template-columns: 1fr 1fr; }
  .order-card { grid-column: 1 / -1; width: min(100%, 620px); justify-self: center; }
}

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 56px; }
  .site-header nav { display: none; }
  .header-buy { min-height: 42px; }
  .hero { min-height: 920px; }
  .hero::after { background: linear-gradient(180deg, var(--cream) 0 38%, rgb(255 248 237 / 78%) 50%, transparent 70%); }
  .hero__world { top: 32%; }
  .hero__world > img { object-position: 52% 50%; }
  .hero__copy { width: 100%; padding: 8.6rem 6vw 0; text-align: left; }
  .hero h1 { max-width: 8.5ch; font-size: clamp(3.6rem, 13vw, 6rem); }
  .hero__intro { max-width: 32rem; }
  .hero__product { right: -17vw; bottom: -2rem; width: min(88vw, 660px); }
  .hero__orbit { min-width: 4rem; min-height: 4rem; }
  .hero__route-link { bottom: 1.2rem; left: 6vw; grid-template-columns: auto 80px; }
  .hero__route-link svg { width: 80px; }
  .js .route__experience { display: block; padding: 0; }
  .js .route__visual { z-index: 1; height: 54svh; min-height: 23rem; background: var(--blue); }
  .js .route__stage { height: calc(100% - 1rem); margin: 0 .75rem 1rem; border-radius: 26px; box-shadow: 8px 9px 0 var(--ink); }
  .route__map { top: .45rem; right: 1rem; left: 1rem; height: 56px; }
  .route__traveller { top: 22px; }
  .route-scene { padding: 3.8rem 1rem 2.6rem; }
  .route__stage-meta { right: 1rem; bottom: .65rem; left: 1rem; font-size: .6rem; }
  .helper-card { padding: .55rem .65rem; transform: scale(.88) rotate(2deg); transform-origin: right bottom; }
  .scene-plate { inset: 3.7rem .8rem 2.2rem; width: calc(100% - 1.6rem); height: calc(100% - 5.9rem); border-radius: 20px; }
  .scene-card--product { width: min(70%, 430px); }
  .zip-stack { width: min(64%, 440px); }
  .material-stack { width: min(76%, 520px); height: 76%; }
  .js .route__steps { position: relative; z-index: 2; padding: 0 6vw; }
  .js .route-step { min-height: 84svh; align-items: flex-end; padding: 0 0 7svh; opacity: 1; }
  .js .route-step__copy { max-width: 36rem; padding: 1.5rem; background: rgb(255 253 248 / 96%); }
  .js .route-step h3 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .crew__heading { grid-template-columns: 1fr; }
  .crew__grid { grid-template-columns: 1fr; }
  .crew-card { min-height: 29rem; }
  .fit-check { grid-template-columns: 1fr; }
  .fit-check__scene { min-height: 58svh; }
  .fit-check__scene::after { background: linear-gradient(180deg, transparent 70%, var(--ink)); }
  .fit-check__copy { padding: 3rem 7vw 7rem; }
  .size-section { grid-template-columns: 1fr; }
  .size-section__visual { width: min(90%, 620px); justify-self: center; }
  .order-card { grid-column: auto; }
  .quick-facts dl { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .site-header { top: 10px; width: calc(100% - 20px); padding-left: 13px; }
  .wordmark { font-size: .74rem; }
  .header-buy { min-height: 40px; padding: .55rem .8rem; font-size: .72rem; }
  .hero { min-height: 860px; }
  .hero__copy { padding-top: 7.8rem; }
  .hero h1 { font-size: clamp(3.1rem, 15vw, 4.7rem); }
  .hero__intro { margin-bottom: .85rem; font-size: .94rem; }
  .role-switch { width: 100%; }
  .role-switch button { flex: 1; padding-inline: .45rem; font-size: .68rem; }
  .hero__buyline { align-items: stretch; gap: .9rem; }
  .hero__buyline .button { padding-inline: .9rem; font-size: .74rem; }
  .hero__product { right: -28vw; bottom: -1.5rem; width: 112vw; }
  .hero__orbit { min-width: 3.6rem; min-height: 3.6rem; font-size: .58rem; }
  .hero__orbit--touch { top: 11%; left: 26%; }
  .hero__route-link { display: none; }
  .route__intro { min-height: 58svh; padding: 6rem 6vw; }
  .route__intro h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .js .route__visual { height: 48svh; min-height: 21rem; }
  .scene-product--touch { width: 79%; height: 74%; }
  .helper-card { display: none; }
  .route-step__copy > p:not(.eyebrow) { font-size: .94rem; }
  .fact-pills li { padding: .48rem .6rem; font-size: .64rem; }
  .crew { padding-inline: 5vw; }
  .crew__heading h2 { font-size: 3.8rem; }
  .crew-card { border-radius: 28px; }
  .fit-check__scene { min-height: 48svh; }
  .size-section { padding-inline: 6vw; }
  .size-section__copy h2 { font-size: 4rem; }
  .quick-facts { padding-inline: 6vw; }
  .quick-facts dl { grid-template-columns: 1fr; }
  .quick-facts dl div { min-height: 7rem; }
  .purchase-dock { bottom: 10px; width: calc(100% - 20px); }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero__weather { display: none; }
  .hero__product { transform: none; }
  .route__traveller { transition: none; }
  .drop { display: none; }
  .js .route__experience { display: block; width: auto; padding: 3rem 6vw; }
  .js .route__visual { display: none; }
  .js .route__steps { padding: 0; }
  .js .route-step { min-height: auto; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1rem 0 4rem; opacity: 1; }
  .js .route-step__number { display: block; }
  .js .route-step__poster { display: block; }
}