/* WITFAWN, Inc. recruiting page. Step van version. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #15121a;
  --ink-2: #4a4652;
  --paper: #f3f2ee;
  --white: #ffffff;
  --purple: #4d148c;
  --orange: #ff6200;
  --orange-t: #d94a00;
  --line: rgba(21, 18, 26, .16);
  --line-d: rgba(255, 255, 255, .2);
  --grid: rgba(21, 18, 26, .055);

  --pad: clamp(18px, 5vw, 40px);
  --max: 1200px;
  --top-h: 60px;
  --r: 6px;

  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (min-width: 680px) { :root { --top-h: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.55;
  color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
[id] { scroll-margin-top: 16px; }
@media (min-width: 680px) { [id] { scroll-margin-top: calc(var(--top-h) + 16px); } }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
/* iPhone held sideways: keep text clear of the notch. */
@supports (padding: max(0px)) {
  .wrap { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
}
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: .8125rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.4; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: 0 1.5em;
  font: 800 1.02rem/1 var(--body); font-stretch: 108%; letter-spacing: .01em;
  white-space: nowrap; text-decoration: none;
  color: var(--ink); background: var(--orange);
  border: 2px solid var(--ink); border-radius: var(--r);
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(2px); }
.btn--lg { min-height: 62px; padding: 0 1.7em; font-size: 1.12rem; }
.btn--sm { min-height: 44px; padding: 0 1.05em; font-size: .92rem; }
.btn--ink { background: var(--ink); color: #fff; }
@media (hover: hover) {
  .btn:hover { background: var(--ink); color: #fff; }
  .btn--ink:hover { background: #fff; color: var(--ink); }
}
.btn__more { display: none; }
/* "Apply" and " on Indeed" are two flex items, so the button's icon gap would add to the word space. */
.top .btn { gap: 0; }
@media (max-width: 339px) { .btn--lg { padding: 0 1em; font-size: 1.02rem; } }
@media (min-width: 400px) { .btn__more { display: inline; } }

/* ---------- Header ---------- */
.top { position: relative; z-index: 50; height: var(--top-h); }
.top__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; min-width: 0; }
.brand__mark { font-family: var(--display); font-weight: 900; font-stretch: 122%; font-size: 1.18rem; line-height: 1; letter-spacing: .01em; }
.brand__sq { flex: none; width: 13px; height: 13px; background: var(--orange); }
.brand__tag { display: none; color: var(--ink-2); white-space: nowrap; }
.nav { display: none; gap: 28px; }
.nav a { text-decoration: none; padding: 8px 0; background: linear-gradient(var(--orange), var(--orange)) 0 100% / 0 2px no-repeat; transition: background-size .2s ease; }
@media (hover: hover) { .nav a:hover { background-size: 100% 2px; } }
@media (min-width: 600px) { .brand__tag { display: inline; } }
/* Phones: the header isn't a bar of its own here, so what the eye sees is the band from the top of the page down to
   the hero's first rule. Push the logo and button down to sit in the middle of that band. */
@media (max-width: 679px) { .top__in { padding-top: 10px; } }
@media (max-width: 479px) { .top__in { padding-top: 8px; } }
@media (min-width: 680px) {
  .top { position: sticky; top: 0; transition: background-color .25s ease, box-shadow .25s ease; }
  .top.is-stuck { background: rgba(243, 242, 238, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
}
@media (min-width: 1000px) { .nav { display: flex; } }

/* Scroll route: a small van rides along as the page scrolls. */
.route { position: absolute; left: 0; right: 0; bottom: -1px; height: 0; pointer-events: none; display: none; }
.js .top.is-stuck .route, .js .dock .route { display: block; }
.route__van { position: absolute; left: 0; bottom: 0; width: 30px; will-change: transform; }
.route__van svg { width: 30px; height: auto; }
.dock .route { bottom: auto; top: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; margin-top: calc(-1 * var(--top-h)); padding-top: calc(var(--top-h) + 10px); padding-bottom: clamp(34px, 6vw, 72px); overflow: hidden; overflow: clip; }
.hero__meta { display: flex; justify-content: space-between; gap: 8px 20px; padding: 10px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.hero__meta > span:nth-child(2), .meta__x { display: none; }
.hero__meta .live { display: inline-flex; align-items: center; gap: .6em; white-space: nowrap; }
.pulse { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); opacity: .55; animation: pulse 2s ease-out infinite; }
@keyframes pulse { to { transform: scale(2.8); opacity: 0; } }

.hero__lock { container-type: inline-size; margin-top: clamp(10px, 2vw, 22px); }
.h1 { font-family: var(--display); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .84; }
.h1 .fit { display: block; white-space: nowrap; letter-spacing: -.03em; width: max-content; max-width: none; }
.h1__a { font-size: 27.6vw; }
.h1__b { font-size: 21.8vw; margin-top: .04em; }
.payline {
  margin-top: clamp(14px, 2.4vw, 22px);
  font-family: var(--display); font-stretch: 112%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 7.2vw, 2.9rem); line-height: 1.08; letter-spacing: -.01em;
}
.payline i { font-style: normal; background: var(--orange); padding: 0 .16em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@supports (font-size: 1cqi) {
  .h1__a { font-size: 32.4cqi; }
  .h1__b { font-size: 25.6cqi; }
}
.hero__van { position: relative; z-index: 2; margin: -3.5% 0 0; }
.hero__van svg { width: 100%; height: auto; overflow: visible; margin-bottom: -7%; }
.hero__cap { margin-top: 6px; color: var(--ink-2); }
.hero__sub { margin-top: 14px; font-size: clamp(1.06rem, 2vw, 1.22rem); line-height: 1.5; color: var(--ink-2); font-weight: 500; max-width: 31em; }
.hero__cta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; }
.hero__cta .btn { width: 100%; }
.more { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--orange); }
@media (hover: hover) { .more:hover { text-decoration-color: var(--ink); } }
.callout { display: none; }
/* Phones: tighter first screen, so the orange Apply button shows without scrolling on a standard iPhone.
   Width only, on purpose. A height rule would flip when Safari's toolbar slides away and make the page jump. */
@media (max-width: 479px) {
  .hero { padding-top: calc(var(--top-h) + 8px); }
  .hero__meta { padding: 8px 0; }
  .hero__lock { margin-top: 8px; }
  .payline { margin-top: 10px; }
  .hero__sub { margin-top: 10px; }
  .hero__cta { margin-top: 16px; }
  .hero__cta .btn--lg { min-height: 58px; }
}
@media (min-width: 480px) { .hero__cta .btn { width: auto; } .meta__x { display: inline; } }
@media (min-width: 680px) {
  .hero__meta > span:nth-child(2) { display: inline; }
  .h1 .fit { display: inline-block; }
  .h1__a, .h1__b { font-size: 12.2vw; margin-top: 0; }
  @supports (font-size: 1cqi) { .h1__a, .h1__b { font-size: 14.1cqi; } }
  .hero__van { margin-top: -1.5%; }
}
@media (min-width: 1000px) {
  .hero__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .hero__copy { padding-top: 34px; }
  .hero__copy .payline { margin-top: 0; }
  .hero__van { order: 2; margin-top: -4.5%; }
  .hero__van svg { margin-bottom: 0; }
  .callout { display: block; }
}

/* ---------- Van drawing ---------- */
.van-ink { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.van-thin { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.livery text { font-family: var(--display); font-weight: 800; }
[data-livery="plain"] .livery { display: none; }
.wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.15s linear infinite; }
.road { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 34 26; fill: none; animation: road .55s linear infinite; }
.bob { animation: bob .62s ease-in-out infinite alternate; }
.speed line { stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 40 400; animation: speed 1.1s linear infinite; }
.speed line:nth-child(2) { animation-delay: -.4s; }
.speed line:nth-child(3) { animation-delay: -.75s; }
.hero__van.paused .wheel, .hero__van.paused .road, .hero__van.paused .bob, .hero__van.paused .speed line { animation-play-state: paused; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes road { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 60; } }
@keyframes bob { to { transform: translateY(-2.5px); } }
@keyframes speed { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 440; } }
.callout line, .callout circle { stroke: var(--ink); stroke-width: 1.6; fill: var(--paper); }
.callout text { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .06em; fill: var(--ink); }
.callout rect { fill: var(--orange); }
/* The van rolls in once, when the page opens. */
.js .hero__van .van { transform: translateX(-120%); }
.js .hero__van.in .van { transform: none; transition: transform 1.25s cubic-bezier(.16, .84, .3, 1); }
.js .hero__van .callout { opacity: 0; }
.js .hero__van.in .callout { opacity: 1; transition: opacity .5s ease 1.2s; }

/* ---------- Section frame ---------- */
.sec { padding-block: clamp(60px, 10vw, 120px); }
.sec--grid { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 28px 28px; }
.sec--dark { background: var(--ink); color: #fff; }
.sec--dark :focus-visible { outline-color: var(--orange); }
.sh { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(26px, 5vw, 52px); }
.sh__bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.sec--dark .sh__bar { border-color: var(--line-d); }
.tag { display: inline-block; padding: 3px 8px 2px; background: var(--orange); color: var(--ink); font-family: var(--mono); font-size: .8125rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3; }
.sh__note { text-align: right; opacity: .72; }
.h2 { font-family: var(--display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2rem, 9.4vw, 4.6rem); line-height: .92; letter-spacing: -.022em; overflow-wrap: break-word; }
.h2 em { font-style: normal; color: var(--orange-t); }
.sec--dark .h2 em { color: var(--orange); }
.apply .h2 em { color: #fff; }
@media (min-width: 680px) { .h2 { font-size: clamp(2.6rem, 6.2vw, 4.6rem); } }
@media (max-width: 339px) { .h2 { font-stretch: 100%; } }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.32rem); line-height: 1.45; font-weight: 500; max-width: 34em; }
.h3 { font-family: var(--display); font-weight: 800; font-stretch: 108%; font-size: clamp(1.4rem, 5.4vw, 1.85rem); line-height: 1.05; letter-spacing: -.012em; }
.photo { position: relative; overflow: hidden; border: 2px solid var(--ink); border-radius: var(--r); background: #7f7b80; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Photo band ---------- */
.band-sec { padding-block: clamp(22px, 5vw, 60px); }
.band .photo { aspect-ratio: 4 / 3; border-color: rgba(255, 255, 255, .5); }
.band .photo img { object-position: 44% 50%; }
.band figcaption { margin-top: 10px; color: rgba(255, 255, 255, .62); }
@media (min-width: 680px) { .band .photo { aspect-ratio: 16 / 9; } .band .photo img { object-position: 50% 50%; } }

/* ---------- 03 The day ---------- */
.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 38px; }
.step .photo { aspect-ratio: 3 / 2; }
.step:first-child .photo img { object-position: 30% 50%; }
.step__n { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--ink-2); }
.step__n::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.step .h3 { margin: 10px 0 6px; }
.step p { color: var(--ink-2); max-width: 30em; }
.load { margin-top: 14px; max-width: 330px; }
.load svg { width: 100%; height: auto; }
.load rect { stroke: var(--ink); stroke-width: 2; fill: var(--purple); }
.load rect.you { fill: var(--orange); }
.js .load rect { transform: translateY(-14px); opacity: 0; }
.js .load.play rect { transform: none; opacity: 1; transition: transform .32s cubic-bezier(.3, 1.3, .5, 1), opacity .2s ease; transition-delay: calc(var(--i) * 70ms + .25s); }
/* Drawings under steps 03 and 04. Like every small drawing, they start when site.js adds .play (drawing on screen). */
.trip, .heavy { margin-top: 14px; max-width: 330px; }
.trip svg, .heavy svg { width: 100%; height: auto; }
.gd { stroke: var(--ink); stroke-width: 2; fill: none; }
.trip .rd { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 8 8; fill: none; }
.trip .hs { fill: var(--white); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.trip .bx { fill: var(--orange); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 100%; }
.js .trip .bx { transform: scale(0); }
.js .trip.play .bx { transform: none; transition: transform .3s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 680ms + 1.6s); }
.js .trip .go { transform: translateX(-330px); }
.js .trip.play .go { transform: none; transition: transform 3.2s linear .3s; }
.heavy rect { stroke: var(--ink); stroke-width: 2; }
.heavy text { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .04em; fill: var(--ink); }
.heavy .tp { fill: none; stroke: var(--ink); stroke-width: 2; }
.heavy .fr { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.heavy .dolly { transform-origin: 146px 54px; }
.js .heavy .lift { transform: translateY(-14px); opacity: 0; }
.js .heavy.play .lift { transform: none; opacity: 1; transition: transform .32s cubic-bezier(.3, 1.3, .5, 1) .3s, opacity .2s ease .3s; }
.js .heavy .dolly { transform: translateX(-48px) rotate(-16deg); opacity: 0; }
.js .heavy.play .dolly { transform: none; opacity: 1; transition: transform .9s cubic-bezier(.3, 1, .4, 1) .7s, opacity .2s ease .7s; }
@media (min-width: 680px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px clamp(22px, 3.4vw, 44px); }
  .step:nth-child(even) { margin-top: clamp(36px, 6vw, 72px); }
}
.hours { margin-top: clamp(44px, 7vw, 84px); padding: clamp(20px, 4.4vw, 44px); background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hours__big { font-family: var(--display); font-weight: 900; font-stretch: 116%; text-transform: uppercase; font-size: clamp(2.1rem, 11vw, 4.4rem); line-height: .9; letter-spacing: -.025em; }
.hours__big em { font-style: normal; color: var(--orange-t); }
.hours__txt { margin-top: 14px; font-size: clamp(1.04rem, 2vw, 1.18rem); line-height: 1.5; max-width: 34em; }
.arc svg { width: 100%; height: auto; overflow: visible; }
.arc__base { fill: none; stroke: var(--line); stroke-width: 3; stroke-dasharray: 3 9; stroke-linecap: round; }
.arc__run { fill: none; stroke: var(--orange); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.arc text { font-family: var(--mono); font-size: 15px; font-weight: 500; letter-spacing: .05em; fill: var(--ink-2); }
.arc__sun { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }
@media (min-width: 860px) { .hours { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: clamp(28px, 5vw, 64px); } }

/* ---------- 04 What you need ---------- */
.need__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.need__photo { aspect-ratio: 5 / 4; }
.need__photo img, .who__photo img { object-position: 50% 0%; } /* portraits have almost no headroom: crop from the bottom only */
.checks { padding: 2px 18px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); }
.checks li { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; font-size: 1.08rem; font-weight: 600; line-height: 1.35; border-bottom: 1px solid var(--line); }
.checks li:last-child { border-bottom: 0; }
.tick { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.tick rect { fill: var(--orange); stroke: var(--ink); stroke-width: 2; }
.tick path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .tick path { stroke-dashoffset: 1; }
.js .in .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset .35s ease calc(var(--i, 0) * 110ms + .2s); }
.rule { padding: 16px 20px; font-size: 1.04rem; line-height: 1.4; color: rgba(255, 255, 255, .86); background: var(--ink); border-radius: var(--r); }
.rule strong { color: #fff; font-weight: 800; }
/* <br class="br-m"> breaks the line on phones only. From 680px up the rule is wide enough for one line. */
@media (min-width: 680px) { .br-m { display: none; } }
@media (min-width: 680px) {
  .need__photo, .who__photo { align-self: stretch; aspect-ratio: auto; min-height: 0; }
  .need__photo::before, .who__photo::before { content: ""; display: block; padding-top: 125%; }
  .need__photo img, .who__photo img { position: absolute; inset: 0; }
  .need__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "photo checks" "rule rule"; column-gap: clamp(28px, 5.5vw, 84px); align-items: start; }
  .need__photo { grid-area: photo; }
  .checks { grid-area: checks; padding: 4px 24px; }
  .rule { grid-area: rule; }
}
@media (min-width: 920px) { .need__grid { grid-template-areas: "photo checks" "photo rule"; grid-template-rows: auto 1fr; } }

/* ---------- 05 Getting started ---------- */
.start__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.path { position: relative; counter-reset: step; --p: 1; }
.path::before, .path::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 30px; width: 2px; }
.path::before { background: repeating-linear-gradient(var(--line) 0 6px, transparent 6px 12px); }
.path::after { background: var(--orange); transform-origin: 50% 0; transform: scaleY(var(--p)); }
.path li { counter-increment: step; position: relative; z-index: 1; padding: 0 0 28px 62px; }
.path li:last-child { padding-bottom: 0; }
.path li::before { content: "0" counter(step); position: absolute; left: 0; top: 0; width: 44px; height: 44px; display: grid; place-items: center; font: 700 .86rem/1 var(--mono); background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); transition: background-color .25s ease; }
.path li.in::before, html:not(.js) .path li::before { background: var(--orange); }
.path .h3 { padding-top: 8px; }
.path p { margin-top: 5px; color: var(--ink-2); }
.start__photo { aspect-ratio: 3 / 2; }
.start__photo img { object-position: 42% 50%; }
@media (min-width: 680px) {
  .start__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
  .start__photo { aspect-ratio: 4 / 5; }
  .start__photo img { object-position: 43% 50%; }
}
@media (min-width: 1000px) { .start__photo { aspect-ratio: 1 / 1; } .start__photo img { object-position: 42% 50%; } }

/* ---------- 06 Pay ---------- */
.pay__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.money__row { padding: 20px 0 22px; border-top: 1px solid var(--line-d); }
.money__row:first-child { border-top: 0; padding-top: 0; }
.money dt { font-family: var(--display); font-weight: 900; font-stretch: 118%; text-transform: uppercase; font-size: clamp(2.5rem, 13vw, 4.6rem); line-height: .88; letter-spacing: -.03em; color: var(--orange); }
.money__row--top dt { font-size: clamp(4rem, 23vw, 8.4rem); color: #fff; }
.money dd { margin-top: 10px; font-size: clamp(1.1rem, 2.2vw, 1.3rem); line-height: 1.4; font-weight: 500; color: rgba(255, 255, 255, .88); max-width: 21em; }
.week { margin-top: 18px; max-width: 420px; }
.week svg { width: 100%; height: auto; overflow: visible; }
.week text { font-family: var(--mono); font-size: 15px; font-weight: 500; fill: rgba(255, 255, 255, .6); text-anchor: middle; }
.week line { stroke: rgba(255, 255, 255, .34); stroke-width: 2; }
.week .fri text { fill: var(--ink); font-weight: 700; }
.week .fri rect { fill: var(--orange); }
.week .fri { transform-box: fill-box; transform-origin: 50% 100%; }
.js .week .fri { transform: scale(0); }
.js .week.play .fri { transform: none; transition: transform .45s cubic-bezier(.3, 1.5, .5, 1) 1.9s; }
.js .week .wk-van { transform: translateX(-300px); }
.js .week.play .wk-van { transform: none; transition: transform 1.5s cubic-bezier(.4, 0, .2, 1) .35s; }
.pay__photo { aspect-ratio: 3 / 2; border-color: rgba(255, 255, 255, .5); }
.kit { margin-top: 16px; padding: 18px 18px 6px; color: var(--ink); background: var(--paper); border-radius: var(--r); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; }
.kit__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.kit__top .mono { color: var(--ink-2); text-align: right; }
.kit li { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-weight: 600; line-height: 1.3; border-bottom: 1px solid var(--line); }
.kit li:last-child { border-bottom: 0; }
.kit svg { flex: none; width: 54px; height: 40px; }
.part { fill: var(--white); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.part-o { fill: var(--orange); stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.part-l { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 680px) {
  .money dt { font-size: clamp(2.5rem, 6.2vw, 4.6rem); }
  .money__row--top dt { font-size: clamp(4rem, 11.4vw, 8.4rem); }
  .pay__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
  .pay__photo { aspect-ratio: 4 / 5; }
  .pay__photo img { object-position: 62% 50%; }
}
@media (min-width: 1000px) { .pay__photo { aspect-ratio: 1 / 1; } .pay__photo img { object-position: 60% 50%; } }

/* ---------- 07 Who ---------- */
.who__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.who .lead + .lead { margin-top: .8em; }
.who__lists { margin-top: 32px; }
.who__lists .mono { display: block; margin-bottom: 12px; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { padding: .5em .9em; font-weight: 700; line-height: 1.2; background: var(--white); border: 2px solid var(--ink); border-radius: var(--r); }
.tags--alt li { background: var(--purple); color: #fff; }
.who__photo { aspect-ratio: 5 / 4; }
@media (min-width: 680px) { .who__photo { aspect-ratio: auto; } .who__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(28px, 5.5vw, 84px); align-items: center; } }

/* ---------- 08 Apply ---------- */
.apply { background: var(--orange); padding-block: clamp(40px, 8vw, 96px); overflow: hidden; overflow: clip; }
.apply__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.apply .sh__bar { margin-bottom: 18px; }
.apply .tag { background: var(--ink); color: #fff; }
.apply .h2 { font-size: clamp(2.2rem, 10.6vw, 5rem); margin-bottom: 14px; }
.apply .lead { margin-bottom: 26px; max-width: 22em; }
.apply .btn { width: 100%; }
.apply__photo { order: -1; aspect-ratio: 4 / 3; }
.apply__photo img { object-position: 100% 50%; }
.seat { margin-top: 30px; max-width: 460px; }
.seat svg { width: 100%; height: auto; overflow: visible; }
.seat .callout { display: block; }
.seat .callout line, .seat .callout circle { fill: var(--orange); }
.seat .road { animation: none; }
.seat .wheel, .seat .bob { animation: none; }
.door { transition: transform .9s cubic-bezier(.3, 0, .2, 1) .35s; }
.js .seat .door { transform: translateX(0); }
.js .seat.play .door, html:not(.js) .seat .door { transform: translateX(-70px); }
@media (min-width: 480px) { .apply .btn { width: auto; } }
@media (min-width: 680px) {
  .apply__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
  .apply .h2 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
  .apply__photo { order: 0; aspect-ratio: 1 / 1; }
}
@media (min-width: 1000px) { .apply__photo { aspect-ratio: 5 / 4; } }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: rgba(255, 255, 255, .8); padding: 40px 0 56px; font-size: .96rem; }
.foot__mark { font-family: var(--display); font-weight: 900; font-stretch: 122%; font-size: 1.3rem; line-height: 1; color: #fff; margin-bottom: 16px; }
.foot__txt p { max-width: 44em; }
.foot__txt p + p { margin-top: 8px; }
.foot__fine { margin-top: 22px; color: rgba(255, 255, 255, .6); }

/* ---------- Phone apply bar ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(243, 242, 238, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 2px solid var(--ink); transform: translateY(130%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; }
@supports (padding: max(0px)) {
  .dock { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
}
.dock.is-on { transform: none; visibility: visible; transition: transform .3s ease; }
.dock__txt { display: none; min-width: 0; flex-direction: column; gap: 3px; }
.dock__txt b { font-family: var(--display); font-weight: 900; font-stretch: 112%; text-transform: uppercase; font-size: 1.12rem; line-height: 1; white-space: nowrap; }
.dock__txt span { color: var(--ink-2); white-space: nowrap; }
.btn--dock { flex: 1 1 auto; min-height: 50px; padding: 0 1.1em; font-size: 1rem; }
@media (min-width: 350px) { .dock__txt { display: flex; } .btn--dock { flex: 0 0 auto; } }
.dock.is-tight .dock__txt { display: none; }
.dock.is-tight .btn--dock { flex: 1 1 auto; }
@media (min-width: 680px) { .dock { display: none; } }

/* ---------- Scroll reveal (only when JS is running) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wheel, .road, .bob, .speed line, .pulse::after { animation: none; }
  .speed { display: none; }
  .js .hero__van .van, .js .hero__van .callout, .js .load rect, .js .week .fri, .js .week .wk-van, .js .trip .bx, .js .trip .go, .js .heavy .lift, .js .heavy .dolly { transform: none; opacity: 1; transition: none; }
  .js .tick path { stroke-dashoffset: 0; transition: none; }
  .js .seat .door { transform: translateX(-70px); transition: none; }
  .btn, .dock, .top { transition: none; }
  .route { display: none !important; }
}