/* Redline Cleaning Solutions — Alpine Run
   Fonts: Barlow Condensed (display), Overpass (body, a Highway Gothic interpretation). Both SIL OFL, self-hosted. */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("../fonts/overpass-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* Alpine night */
  --ink: #0d1012;
  --slate: #14191c;
  --slate-2: #1b2226;
  --slate-3: #232b30;
  --line: rgb(243 245 244 / .1);
  --line-2: rgb(243 245 244 / .18);
  --snow: #f3f5f4;
  --mist: #aeb7bb;
  --stone: #879196;
  --granite: #5d676c;
  /* Signal */
  --red: #d8050b;
  --red-hi: #d8050b;
  --red-deep: #a50308;
  /* Trail marker tones (notation only) */
  --mk-standard: #f3f5f4;
  --mk-deep: #d8050b;
  --mk-move: #f3f5f4;

  --f-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --f-body: "Overpass", system-ui, sans-serif;

  --r-panel: 14px;
  --r-pill: 999px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(72px, 9vw, 128px);
  --nav-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ink); color: var(--snow);
  font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6;
  font-feature-settings: "kern", "tnum";
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--granite) var(--ink); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--slate-3); border: 3px solid var(--ink); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--granite); }

.wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(calc(-100% - 40px)); z-index: 100; background: var(--snow); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700; transition: transform .2s var(--ease-out); }
.skip:focus { transform: none; }
.muted { color: var(--stone); font-weight: 400; }

/* Type */
.h2 {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.6rem, 5.6vw, 4.75rem); line-height: .92; letter-spacing: -.01em;
  margin: 0 0 .45em; text-wrap: balance;
}
.lead { color: var(--mist); font-size: clamp(1.05rem, 1.3vw, 1.2rem); max-width: 56ch; margin: 0; text-wrap: pretty; }
em { font-style: italic; }

/* Icons + trail markers */
.ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.ico--xl { width: 44px; height: 44px; }
.mk { width: 1em; height: 1em; flex: none; fill: currentColor; }
.mk--standard { color: var(--mk-standard); }
.mk--deep { color: var(--mk-deep); }
.mk--move { color: var(--snow); }
.mk--recurring { color: var(--red-hi); }
.mk--plus { color: var(--granite); }

/* Buttons: pill with a travelling dot that floods on hover */
.btn {
  --bg: var(--red); --fg: #fff; --dot: rgb(255 255 255 / .18); --flood: var(--red-deep);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  min-height: 56px; padding: 6px 7px 6px 26px; border-radius: var(--r-pill);
  background: var(--bg); color: var(--fg); border: 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; letter-spacing: .01em; text-decoration: none;
  transition: transform 160ms var(--ease-out), box-shadow 300ms var(--ease-out);
  box-shadow: 0 12px 24px -14px rgb(0 0 0 / .7);
  will-change: transform;
}
.btn > span { position: relative; z-index: 2; }
.btn__dot {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%; background: var(--dot);
  transition: transform 400ms var(--ease-out);
}
.btn__dot .ico { width: 18px; height: 18px; transition: transform 400ms var(--ease-out); }
.btn::before {
  content: ""; position: absolute; z-index: 1; inset: 0; background: var(--flood);
  clip-path: circle(0 at calc(100% - 29px) 50%);
  transition: clip-path 500ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { clip-path: circle(150% at calc(100% - 29px) 50%); }
  .btn:hover .btn__dot .ico { transform: translateX(3px) rotate(-45deg); }
}
.btn--sm { min-height: 46px; padding: 4px 5px 4px 20px; font-size: .9375rem; gap: 10px; }
.btn--sm .btn__dot { width: 36px; height: 36px; }
.btn--sm::before { clip-path: circle(0 at calc(100% - 23px) 50%); }
.btn--ghost {
  --bg: transparent; --fg: var(--snow); padding: 6px 26px; gap: 10px; box-shadow: inset 0 0 0 1.5px var(--line-2);
}
.btn--ghost::before { background: var(--snow); clip-path: inset(0 100% 0 0); transition: clip-path 420ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { color: var(--ink); }
  .btn--ghost:hover::before { clip-path: inset(0 0 0 0); }
}
.btn--ghost > .ico { position: relative; z-index: 2; }
.btn--ghost { transition: transform 160ms var(--ease-out), color 300ms var(--ease-out); }
.btn--light { --bg: var(--snow); --fg: var(--ink); --dot: var(--ink); --flood: #fff; box-shadow: none; }
.btn--light .btn__dot { color: var(--snow); }
.btn--block { width: 100%; justify-content: space-between; }
.btn[disabled] { opacity: .6; cursor: progress; }

.round {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: transparent; color: var(--snow); border: 1.5px solid var(--line-2); cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 250ms ease, border-color 250ms ease;
}
.round:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: var(--snow); color: var(--ink); border-color: var(--snow); } }
.round--light { background: var(--snow); color: var(--ink); border-color: var(--snow); }

/* NAV */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  transition: background-color 300ms ease, border-color 300ms ease, transform 400ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-solid { background: rgb(13 16 18 / .82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-color: var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.brand img { width: 40px; height: auto; }
.brand__word { font-family: var(--f-display); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; line-height: .85; letter-spacing: .01em; }
.brand__word span { display: block; font-weight: 600; font-size: .72rem; letter-spacing: .16em; color: var(--mist); margin-top: 4px; }
.nav__links { display: flex; gap: 26px; margin-inline: auto; }
.nav__links a { text-decoration: none; font-size: .9375rem; color: var(--mist); position: relative; padding-block: 6px; transition: color 200ms ease; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red-hi); transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--snow); }
  .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav__actions { display: flex; align-items: center; gap: 18px; }
.nav__phone { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: .9375rem; }
.nav__menu { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line-2); background: transparent; cursor: pointer; position: relative; }
.nav__menu i { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--snow); border-radius: 2px; transition: transform 300ms var(--ease-out); }
.nav__menu i:first-of-type { top: 18px; } .nav__menu i:last-of-type { top: 25px; }
.nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.sheet {
  position: absolute; top: var(--nav-h); left: 0; right: 0; padding: 12px var(--gutter) 28px;
  background: rgb(13 16 18 / .97); border-bottom: 1px solid var(--line);
  display: grid; gap: 2px;
  opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 300ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-8px); }
}
.sheet[hidden] { display: none; }
@media (min-width: 1081px) { .sheet { display: none !important; } }
.sheet a { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 2rem; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sheet a.sheet__phone { color: var(--red-hi); border: 0; }

/* HERO */
.hero { position: relative; min-height: 100dvh; display: flex; align-items: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 56px; overflow: clip; }
.topo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .9; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(transparent, var(--ink)); z-index: 0; pointer-events: none; }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero__title {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.4rem, 8.2vw, 7.6rem); line-height: .88; letter-spacing: -.015em; margin: 0 0 28px;
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__title em { color: var(--red-hi); padding-right: .06em; }
.hero__sub { color: var(--mist); font-size: clamp(1.1rem, 1.4vw, 1.3rem); max-width: 34ch; margin: 0 0 36px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__stage { position: relative; perspective: 1400px; justify-self: end; width: min(100%, 540px); }
.hero__photo {
  margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-panel); overflow: hidden; position: relative;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d;
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), 0 0 0 1px var(--line);
  will-change: transform;
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.06) translate(var(--px, 0), var(--py, 0)); transition: transform 1.2s var(--ease-out); }
.runs-mini {
  list-style: none; margin: 0; padding: 0; position: absolute; left: clamp(-56px, -4vw, -20px); bottom: 36px;
  display: grid; gap: 8px; transform: translateZ(60px);
}
.runs-mini li {
  display: grid; grid-template-columns: 18px auto auto; align-items: center; gap: 10px;
  padding: 11px 16px 11px 14px; border-radius: var(--r-pill);
  background: rgb(20 25 28 / .78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 16px 32px -16px rgb(0 0 0 / .7);
  font-size: .9375rem; font-weight: 600; width: max-content;
}
.runs-mini li:nth-child(2) { margin-left: 28px; }
.runs-mini li:nth-child(3) { margin-left: 56px; }
.runs-mini .mk { width: 16px; height: 16px; }
.runs-mini b { color: var(--mist); font-weight: 500; margin-left: 4px; }

/* MARQUEE */
.marquee { position: relative; z-index: 2; background: var(--red); color: #fff; overflow: hidden; transform: rotate(-1.6deg) scale(1.02); margin-block: -8px 0; box-shadow: 0 24px 40px -24px rgb(0 0 0 / .8); }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; list-style: none; margin: 0; padding: 18px 0; }
.marquee__row li { display: flex; align-items: center; gap: 16px; padding-inline: 28px; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 2.25rem); white-space: nowrap; line-height: 1; }
.marquee .mk { width: .8em; height: .8em; color: #fff; }
.marquee .mk--plus { color: rgb(255 255 255 / .6); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* RUN PICKER */
.runs__head { display: grid; gap: 8px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.picker { border-radius: calc(var(--r-panel) + 8px); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.picker__tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.picker__tabs button {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 24px 12px; background: none; border: 0; cursor: pointer; color: var(--stone);
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.6rem);
  transition: color 250ms ease;
}
.picker__tabs button .mk { width: 22px; height: 22px; opacity: .55; transition: opacity 250ms ease, transform 400ms var(--ease-out); }
.picker__tabs button[aria-selected="true"] { color: var(--snow); }
.picker__tabs button[aria-selected="true"] .mk { opacity: 1; transform: scale(1.1); }
@media (hover: hover) and (pointer: fine) { .picker__tabs button:hover { color: var(--snow); } }
.picker__tabs button:active .mk { transform: scale(.9); }
.picker__ink { position: absolute; bottom: -1px; left: 0; width: 25%; height: 3px; background: var(--red-hi); transform: translateX(calc(var(--i, 0) * 100%)); transition: transform 450ms var(--ease-drawer); }
.picker__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.picker__left { padding: clamp(24px, 3.6vw, 48px); border-right: 1px solid var(--line); display: grid; align-content: start; gap: 28px; }
.picker__right { padding: clamp(24px, 3.6vw, 48px); display: grid; gap: 32px; align-content: start; justify-items: start; }
.picker__desc { margin: 0; font-size: 1.25rem; line-height: 1.45; max-width: 30ch; }
.sizes { border: 0; margin: 0; padding: 0; }
.sizes legend { font-size: .8125rem; color: var(--stone); margin-bottom: 12px; font-weight: 600; }
.sizes__list { display: grid; gap: 8px; }
.size {
  display: flex; justify-content: space-between; gap: 16px; align-items: center; text-align: left; width: 100%;
  padding: 14px 18px; border-radius: 12px; background: transparent; border: 1px solid var(--line); cursor: pointer; color: var(--mist);
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.size b { font-weight: 600; color: var(--snow); }
.size small { font-size: .875rem; color: var(--stone); white-space: nowrap; }
.size[aria-pressed="true"] { background: var(--slate-3); border-color: var(--red-hi); color: var(--snow); }
.size:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { .size:hover { border-color: var(--line-2); } }

.price { display: grid; gap: 6px; }
.price__label { font-size: .875rem; color: var(--stone); font-weight: 600; }
.price__value {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(3.6rem, 8vw, 6rem); line-height: .9; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; transition: filter 220ms ease, opacity 220ms ease, transform 320ms var(--ease-out);
}
.price__value.is-swapping { filter: blur(6px); opacity: .25; transform: translateY(6px); }
.price__note { color: var(--mist); font-size: .9375rem; }
.scope { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; width: 100%; transition: opacity 220ms ease, filter 220ms ease; }
.scope.is-swapping { opacity: .2; filter: blur(4px); }
.scope__h { font-size: .875rem; font-weight: 700; margin: 0 0 12px; color: var(--snow); }
.scope__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: .9688rem; color: var(--mist); }
.scope__list li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; line-height: 1.4; }
.scope__list li::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; }
.scope__list--in li::before { background: var(--red-hi); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }
.scope__list--out li { color: var(--stone); }
.scope__list--out li::before { background: var(--granite); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M228,128a12,12,0,0,1-12,12H140v76a12,12,0,0,1-24,0V140H40a12,12,0,0,1,0-24h76V40a12,12,0,0,1,24,0v76h76A12,12,0,0,1,228,128Z'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }

/* WORK: 3D coverflow */
.work { overflow: clip; }
.work__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.work__head .h2 { margin: 0; max-width: 18ch; }
.work__nav { display: flex; gap: 10px; }
.coverflow {
  --w: clamp(240px, 30vw, 400px);
  position: relative; height: calc(var(--w) * 1.33 + 40px); margin-top: clamp(40px, 5vw, 64px);
  perspective: 1600px; touch-action: pan-y; cursor: grab; user-select: none; outline: none;
}
.coverflow:focus-visible { outline: 2px solid var(--red-hi); outline-offset: -2px; border-radius: 12px; }
.coverflow.is-dragging { cursor: grabbing; }
.cf {
  position: absolute; left: 50%; top: 20px; width: var(--w); aspect-ratio: 3 / 4; margin: 0 0 0 calc(var(--w) / -2);
  border-radius: var(--r-panel); overflow: hidden; background: var(--slate);
  transform-style: preserve-3d; will-change: transform;
  transition: transform 700ms var(--ease-drawer), opacity 500ms ease, filter 500ms ease;
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), 0 0 0 1px var(--line);
}
.coverflow.is-dragging .cf { transition: none; }
.cf img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(13 16 18 / var(--shade-l, 0)), rgb(13 16 18 / var(--shade-r, 0))); pointer-events: none; }
.cf__caption { margin-top: 20px; text-align: center; color: var(--mist); font-size: .9375rem; min-height: 1.6em; transition: opacity 200ms ease; }

/* BEFORE / AFTER */
.ba__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.compare {
  position: relative; aspect-ratio: 525 / 800; max-height: 82vh; border-radius: var(--r-panel); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line); user-select: none; margin-inline: auto; width: min(100%, 520px);
}
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 var(--pos)); }
.compare__handle {
  position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px;
  display: grid; place-items: center; border-radius: 50%; background: var(--snow); color: var(--ink);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / .6); pointer-events: none; transition: transform 160ms var(--ease-out);
}
.compare::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--snow); z-index: 1; pointer-events: none; }
.compare__handle { z-index: 2; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.compare__range:focus-visible ~ .compare__handle, .compare:active .compare__handle { transform: scale(1.1); }
.compare:has(.compare__range:focus-visible) { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.compare__tag { position: absolute; top: 16px; z-index: 2; padding: 6px 14px; border-radius: var(--r-pill); font-weight: 700; font-size: .8125rem; pointer-events: none; }
.compare__tag--b { left: 16px; background: rgb(13 16 18 / .75); }
.compare__tag--a { right: 16px; background: var(--red); color: #fff; }
.ba__after { margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--line); color: var(--snow); font-weight: 600; max-width: 40ch; }

/* PROCESS: trail */
.process { background: var(--slate); }
.process .h2 { max-width: 16ch; }
.trail { position: relative; margin-top: clamp(48px, 6vw, 80px); }
.trail__line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail__line path { fill: none; stroke: var(--red-hi); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: var(--draw, 0); stroke-linecap: round; }
.trail__stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); position: relative; }
.stop { padding-top: 0; }
.stop:nth-child(1) { margin-top: 56px; } .stop:nth-child(2) { margin-top: 20px; } .stop:nth-child(3) { margin-top: 48px; } .stop:nth-child(4) { margin-top: 8px; }
.stop__pin {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--ink); color: var(--snow); box-shadow: 0 0 0 2px var(--red-hi), 0 0 0 8px var(--slate);
  margin-bottom: 22px; transform: scale(var(--pin, 1)); transition: transform 500ms var(--ease-out);
}
.stop__pin .ico { width: 22px; height: 22px; }
.stop h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; line-height: 1; margin: 0 0 10px; }
.stop p { margin: 0; color: var(--mist); font-size: 1rem; max-width: 30ch; }

/* CREW */
.crew { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 88vh; }
.crew__photo { margin: 0; position: relative; overflow: hidden; }
.crew__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.crew__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, var(--ink)); }
.crew__copy { align-self: center; padding-block: var(--section); max-width: 620px; margin: 0; padding-left: clamp(24px, 6vw, 96px); }

/* ADD-ONS */
.addons__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.addons__head { position: sticky; top: calc(var(--nav-h) + 40px); }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ticket {
  position: relative; display: grid; gap: 22px; align-content: space-between; min-height: 150px; padding: 22px;
  border-radius: var(--r-panel); background: var(--slate); box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 300ms var(--ease-out), box-shadow 300ms ease, background-color 300ms ease;
}
.ticket span { font-weight: 600; font-size: 1.0625rem; line-height: 1.3; }
.ticket b { font-family: var(--f-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--snow); }
.ticket::after { content: ""; position: absolute; top: 50%; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); margin-top: -7px; }
.ticket--wide { background: var(--red); box-shadow: none; }
.ticket--wide span { color: #fff; }
.ticket--wide b { color: #fff; }
.ticket--quote { grid-column: span 3; min-height: 0; grid-template-columns: 1fr auto; align-items: center; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
.ticket--quote span { color: var(--mist); font-weight: 500; }
.ticket--quote b { font-size: 1.4rem; white-space: nowrap; }
.ticket--quote::after { display: none; }
@media (hover: hover) and (pointer: fine) { .ticket:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -24px rgb(0 0 0 / .8); } .ticket--wide:hover { box-shadow: 0 24px 40px -24px rgb(0 0 0 / .8); } }

/* PROPERTY */
.property__panel {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px);
  padding: clamp(32px, 5vw, 72px); border-radius: calc(var(--r-panel) + 8px);
  background: radial-gradient(120% 90% at 100% 0%, rgb(216 5 11 / .22), transparent 55%), var(--slate-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.property__intro { display: grid; gap: 22px; justify-items: start; }
.property__intro .h2 { margin: 0; font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.property__intro .ico--xl { color: var(--red-hi); }
.property__steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 0; align-content: center; }
.property__steps li { display: grid; gap: 2px; padding: 18px 0 18px 44px; position: relative; border-bottom: 1px solid var(--line); }
.property__steps li:last-child { border-bottom: 0; }
.property__steps li::before { content: ""; position: absolute; left: 6px; top: 24px; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--red-hi); }
.property__steps li:last-child::before { background: var(--red-hi); }
.property__steps b { font-weight: 700; font-size: 1.0625rem; }
.property__steps span { color: var(--mist); font-size: .9375rem; }

/* FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq__list { display: grid; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.35;
  transition: color 200ms ease;
}
.qa summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--red-hi); } }
.qa summary i { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: transform 350ms var(--ease-out), background-color 250ms ease; }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 350ms var(--ease-out); }
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary i { background: var(--red); box-shadow: none; transform: rotate(180deg); color: #fff; }
.qa[open] summary i::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms var(--ease-out); }
.qa[open] .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { margin: 0 0 26px; color: var(--mist); max-width: 60ch; }

/* QUOTE */
.quote { background: linear-gradient(var(--ink), var(--slate) 30%); }
.quote__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.quote__side { position: sticky; top: calc(var(--nav-h) + 40px); }
.contact { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.contact a, .contact span { display: inline-flex; gap: 12px; align-items: center; text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.contact .ico { color: var(--red-hi); }
@media (hover: hover) and (pointer: fine) { .contact a:hover { color: var(--red-hi); } }

.form { position: relative; display: grid; gap: 22px; padding: clamp(24px, 4vw, 48px); border-radius: calc(var(--r-panel) + 8px); background: var(--slate-2); box-shadow: inset 0 0 0 1px var(--line), 0 60px 100px -60px rgb(0 0 0 / .8); }
.form__row { display: grid; gap: 18px; }
.form__row--2 { grid-template-columns: 1fr 1fr; }
.form__row--4 { grid-template-columns: 1.1fr 1fr 1fr 1.4fr; }
.field { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: .9375rem; color: var(--snow); padding: 0; }
.field legend { margin-bottom: 10px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border-radius: 12px;
  background: var(--ink); border: 1px solid var(--line-2); color: var(--snow);
  transition: border-color 200ms ease, box-shadow 200ms ease;
  caret-color: var(--red-hi);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23aeb7bb'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field input::placeholder, .field textarea::placeholder { color: var(--stone); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red-hi); box-shadow: 0 0 0 3px rgb(216 5 11 / .25); }
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); }
.field.has-error input { border-color: var(--red-hi); }
.field__err { margin: 0; min-height: 0; font-size: .875rem; color: var(--snow); font-weight: 600; }
.field__err:empty { display: none; }
.choice, .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.choice label, .chips label { position: relative; cursor: pointer; }
.choice input, .chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span, .chips span {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-2); color: var(--mist); font-weight: 600; font-size: .9375rem;
  transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.choice label:active span, .chips label:active span { transform: scale(.96); }
.choice input:checked + span { background: var(--snow); color: var(--ink); box-shadow: none; }
.choice input:checked + span .mk--standard, .choice input:checked + span .mk--move { color: var(--ink); }
.chips input:checked + span { background: rgb(216 5 11 / .16); color: var(--snow); box-shadow: inset 0 0 0 1.5px var(--red-hi); }
.chips input:checked + span::before { content: ""; width: 14px; height: 14px; background: var(--red-hi); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.choice input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--red-hi); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .choice span:hover, .chips span:hover { color: var(--snow); box-shadow: inset 0 0 0 1px var(--snow); } }
.form__fine { margin: -8px 0 0; text-align: center; color: var(--stone); font-size: .875rem; }
.form__done {
  position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: var(--slate-2);
  display: grid; place-content: center; justify-items: center; text-align: center; gap: 12px; padding: 32px;
  opacity: 1; transform: none; transition: opacity 300ms ease, transform 400ms var(--ease-out);
  @starting-style { opacity: 0; transform: scale(.97); }
}
.form__done[hidden] { display: none; }
.form__done .ico--xl { color: #fff; background: var(--red); border-radius: 50%; padding: 12px; width: 64px; height: 64px; }
.form__done h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 2.4rem; margin: 6px 0 0; line-height: 1; }
.form__done p { margin: 0; color: var(--mist); max-width: 40ch; }

/* FOOTER */
.foot { padding: clamp(64px, 8vw, 110px) 0 40px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: start; }
.brand--foot img { width: 120px; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; justify-self: end; width: min(100%, 640px); }
.foot__cols div { display: grid; gap: 10px; align-content: start; }
.foot__cols h3 { margin: 0 0 6px; font-size: .875rem; color: var(--stone); font-weight: 700; }
.foot__cols a, .foot__cols span { text-decoration: none; color: var(--mist); overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .foot__cols a:hover { color: var(--snow); } }
.foot__base { display: flex; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--stone); font-size: .875rem; }
.foot__base a { color: var(--stone); }

/* Mobile dock */
.dock { display: none; }

/* Reveal system: visible by default, animated only when JS + motion allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); filter: blur(4px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out), filter 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
  .js .reveal.is-in { opacity: 1; transform: none; filter: none; }
  .js [data-split] .line > span { transform: translateY(105%); transition: transform 1000ms var(--ease-out); }
  .js [data-split] .line:nth-child(2) > span { transition-delay: 90ms; }
  .js [data-split].is-in .line > span { transform: none; }
  .js .hero__photo { clip-path: inset(12% 10% 12% 10% round var(--r-panel)); transition: clip-path 1400ms var(--ease-out); }
  .js .hero__photo.is-in { clip-path: inset(0 0 0 0 round var(--r-panel)); }
  .js .hero__photo img { transform: scale(1.18); }
  .js .hero__photo.is-in img { transform: scale(1.06) translate(var(--px, 0), var(--py, 0)); }
  .js .runs-mini li { opacity: 0; transform: translateX(-18px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(700ms + var(--i) * 90ms); }
  .js .runs-mini.is-in li { opacity: 1; transform: none; }
}

/* RESPONSIVE */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__actions { margin-left: auto; }
  .nav__menu { display: inline-block; }
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .ticket--quote { grid-column: span 2; }
  .form__row--4 { grid-template-columns: 1fr 1fr; }
  .form__row--4 > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  :root { --nav-h: 64px; }
  .nav__phone span { display: none; }
  .nav__phone { width: 46px; height: 46px; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); }
  .nav .btn--sm { display: none; }
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 28px); padding-bottom: 64px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__title { font-size: clamp(3rem, 17vw, 5.2rem); }
  .hero__stage { justify-self: stretch; width: 100%; }
  .hero__photo { aspect-ratio: 4 / 4.2; }
  .runs-mini { left: 12px; bottom: 14px; transform: none; }
  .runs-mini li:nth-child(2) { margin-left: 16px; } .runs-mini li:nth-child(3) { margin-left: 32px; }
  .picker__tabs { grid-template-columns: repeat(2, 1fr); }
  .picker__tabs button { padding: 18px 8px; border-bottom: 1px solid var(--line); }
  .picker__tabs button:nth-child(odd) { border-right: 1px solid var(--line); }
  .picker__ink { display: none; }
  .picker__tabs button[aria-selected="true"] { background: var(--slate-3); box-shadow: inset 0 -3px 0 var(--red-hi); }
  .picker__body { grid-template-columns: 1fr; }
  .picker__left { border-right: 0; border-bottom: 1px solid var(--line); }
  .scope { grid-template-columns: 1fr; gap: 22px; }
  .picker__right .btn { width: 100%; justify-content: space-between; }
  .coverflow { --w: min(62vw, 300px); }
  .work__head { align-items: end; }
  .ba__grid, .addons__grid, .faq__grid, .quote__grid { grid-template-columns: 1fr; }
  .addons__head, .quote__side { position: static; }
  .trail__line { display: none; }
  .trail__stops { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--red-hi); margin-left: 27px; }
  .stop, .stop:nth-child(n) { margin-top: 0; padding: 0 0 36px 44px; position: relative; }
  .stop:last-child { padding-bottom: 0; }
  .stop__pin { position: absolute; left: -29px; top: -4px; box-shadow: 0 0 0 2px var(--red-hi), 0 0 0 8px var(--slate); }
  .crew { grid-template-columns: 1fr; min-height: 0; }
  .crew__photo { aspect-ratio: 4 / 4.4; }
  .crew__photo::after { background: linear-gradient(transparent 60%, var(--ink)); }
  .crew__copy { padding: 8px var(--gutter) var(--section); }
  .property__panel { grid-template-columns: 1fr; }
  .form__row--2 { grid-template-columns: 1fr; }
  .foot__grid { grid-template-columns: 1fr; }
  .foot__cols { justify-self: start; }
  .dock {
    position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
    display: flex; gap: 10px; padding: 8px; border-radius: var(--r-pill);
    background: rgb(20 25 28 / .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -12px rgb(0 0 0 / .8);
    transform: translateY(0); transition: transform 400ms var(--ease-drawer), opacity 300ms ease;
  }
  .dock .btn { flex: 1; justify-content: center; min-height: 52px; padding: 6px 20px; }
  .dock.is-away { transform: translateY(140%); opacity: 0; pointer-events: none; }
  .foot { padding-bottom: 110px; }
}
@media (max-width: 520px) {
  .tickets { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ticket { min-height: 124px; padding: 18px; }
  .ticket b { font-size: 1.6rem; }
  .ticket--quote { grid-template-columns: 1fr; gap: 10px; }
  .hero__ctas .btn { width: 100%; justify-content: space-between; }
  .hero__ctas .btn--ghost { justify-content: center; }
  .foot__cols { grid-template-columns: 1fr; }
  .size { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.top-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

/* Picker without prices: "best for" list + run headline */
.best__h { font-size: .8125rem; color: var(--stone); font-weight: 600; margin: 0 0 12px; }
.best__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.best__list li { padding: 14px 18px; border-radius: 12px; border: 1px solid var(--line); color: var(--snow); font-weight: 600; transition: border-color 200ms ease; }
.best__list li:first-child { border-color: var(--red-hi); background: var(--slate-3); }
.price__value { text-transform: uppercase; font-size: clamp(3rem, 6.4vw, 5rem); margin: 0; }
.ticket span { font-size: .8125rem; font-weight: 600; color: var(--stone); }
.ticket b { font-size: 1.75rem; line-height: 1.05; }
.ticket--wide span { color: rgb(255 255 255 / .8); }

/* ON THE JOB gallery */
.job .lead { margin-bottom: clamp(36px, 4vw, 56px); }
.job__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); align-items: start; }
.job__card { margin: 0; }
.job__card:nth-child(even) { margin-top: clamp(32px, 5vw, 72px); }
.job__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-panel); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgb(0 0 0 / .9); transition: transform 600ms var(--ease-out); }
.job__card:nth-child(3) img { object-position: 50% 30%; }
.job__card figcaption { margin-top: 14px; color: var(--mist); font-size: .9375rem; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .job__card:hover img { transform: translateY(-6px) rotate(-.6deg); } }
.foot__made b { color: var(--snow); font-weight: 700; letter-spacing: .02em; }
@media (max-width: 860px) {
  .job__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: 12px; padding-bottom: 8px; scrollbar-width: none; }
  .job__track::-webkit-scrollbar { display: none; }
  .job__card { flex: 0 0 72%; scroll-snap-align: start; }
  .job__card:nth-child(even) { margin-top: 0; }
  .foot__base { flex-wrap: wrap; }
}

/* Hero CTAs, 10% larger */
.hero__ctas .btn { min-height: 62px; font-size: 1.1rem; padding: 7px 8px 7px 29px; gap: 15px; }
.hero__ctas .btn__dot { width: 48px; height: 48px; }
.hero__ctas .btn__dot .ico { width: 20px; height: 20px; }
.hero__ctas .btn::before { clip-path: circle(0 at calc(100% - 32px) 50%); }
@media (hover: hover) and (pointer: fine) { .hero__ctas .btn:hover::before { clip-path: circle(150% at calc(100% - 32px) 50%); } }
.hero__ctas .btn--ghost { padding: 7px 29px; gap: 11px; }
.hero__ctas .btn--ghost::before { clip-path: inset(0 100% 0 0); }
@media (hover: hover) and (pointer: fine) { .hero__ctas .btn--ghost:hover::before { clip-path: inset(0 0 0 0); } }
.hero__ctas .btn--ghost > .ico { width: 1.25em; height: 1.25em; }
.foot__base a.foot__made { text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .foot__base a.foot__made:hover b { color: var(--red-hi); } }
.foot__base a.foot__made { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; margin: -6px 0; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--mist); transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease; }
.foot__base a.foot__made .ico { width: 14px; height: 14px; color: var(--red-hi); transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .foot__base a.foot__made:hover { background: var(--red); box-shadow: none; color: #fff; }
  .foot__base a.foot__made:hover b, .foot__base a.foot__made:hover .ico { color: #fff; }
  .foot__base a.foot__made:hover .ico { transform: translate(2px, -2px); }
}

/* Footer: three columns */
.foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 860px); }
@media (max-width: 860px) { .foot__cols { grid-template-columns: 1fr 1fr; } }

/* SMS consent + fine print links */
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; cursor: pointer; font-size: .875rem; line-height: 1.5; color: var(--mist); }
.consent input { appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid var(--line-2); background: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.consent input:checked { background: var(--red); border-color: var(--red); }
.consent input:checked::after { content: ""; width: 12px; height: 12px; background: #fff; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.49,80.49l-128,128a12,12,0,0,1-17,0l-56-56a12,12,0,1,1,17-17L96,183,215.51,63.51a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.consent input:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.consent em { font-style: normal; color: var(--stone); }
.form__fine a { color: var(--mist); }
@media (hover: hover) and (pointer: fine) { .form__fine a:hover { color: var(--snow); } }

/* LEGAL PAGES */
.legal { padding: calc(var(--nav-h) + clamp(48px, 7vw, 96px)) 0 var(--section); }
.legal__head { max-width: 860px; margin-bottom: clamp(40px, 5vw, 64px); }
.legal__head .h2 { font-size: clamp(3rem, 7vw, 5.6rem); margin-bottom: .3em; }
.legal__meta { color: var(--stone); font-size: .9375rem; margin: 0; }
.legal__grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal__toc { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 4px; padding-left: 16px; border-left: 1px solid var(--line); }
.legal__toc b { font-size: .8125rem; color: var(--stone); font-weight: 700; margin-bottom: 8px; }
.legal__toc a { color: var(--mist); text-decoration: none; font-size: .9375rem; padding: 4px 0; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .legal__toc a:hover { color: var(--snow); } }
.legal__body { max-width: 72ch; color: var(--mist); }
.legal__body section { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 24px); }
.legal__body section:last-child { border-bottom: 0; }
.legal__body h2 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; color: var(--snow); font-size: 1.75rem; line-height: 1; margin: 0 0 16px; }
.legal__body p, .legal__body li { line-height: 1.7; }
.legal__body p { margin: 0 0 14px; }
.legal__body ul { margin: 0 0 14px; padding-left: 20px; }
.legal__body li { margin-bottom: 6px; }
.legal__body li::marker { color: var(--red-hi); }
.legal__body strong { color: var(--snow); font-weight: 600; }
.legal__body a { color: var(--snow); }
.legal__callout { padding: 18px 20px; border-radius: 12px; background: var(--slate); box-shadow: inset 0 0 0 1px var(--line); color: var(--snow); }
@media (max-width: 860px) {
  .legal__grid { grid-template-columns: 1fr; }
  .legal__toc { position: static; }
}
.foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); }
.foot__cols a[href^="mailto"] { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
@media (max-width: 860px) { .foot__cols { grid-template-columns: 1fr 1fr; } .foot__cols a[href^="mailto"] { white-space: normal; overflow-wrap: anywhere; } }
@media (max-width: 520px) { .foot__cols { grid-template-columns: 1fr; } }

/* Picker: seven cleaning types in one scrollable row */
.picker__tabs { display: flex; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.picker__tabs::-webkit-scrollbar { display: none; }
.picker__tabs button { flex: 1 0 auto; padding: 22px 18px; font-size: clamp(1.05rem, 1.45vw, 1.35rem); white-space: nowrap; scroll-snap-align: start; border-right: 0; border-bottom: 0; }
.picker__tabs button[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--red-hi); }
.picker__ink { display: none; }
.picker__tabs button .mk { width: 20px; height: 20px; }
.mk--post { color: var(--snow); }
.mk--turn, .mk--commercial { color: var(--red-hi); }
@media (max-width: 860px) {
  .picker__tabs button, .picker__tabs button:nth-child(odd) { padding: 18px 16px; border: 0; }
  .picker__tabs button[aria-selected="true"] { background: var(--slate-3); }
}

/* Add-ons: five tickets, no empty cells */
.tickets { grid-template-columns: repeat(6, 1fr); }
.ticket { grid-column: span 2; }
.ticket:nth-child(4), .ticket:nth-child(5) { grid-column: span 3; }
.ticket--quote { grid-column: 1 / -1; }
@media (max-width: 1080px) {
  .tickets { grid-template-columns: repeat(2, 1fr); }
  .ticket, .ticket:nth-child(4), .ticket:nth-child(5) { grid-column: span 1; }
  .ticket--wide { grid-column: 1 / -1; }
  .ticket--quote { grid-column: 1 / -1; }
}
@media (max-width: 860px) { .picker__tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } }

/* ---------- Secure form: honeypot + Turnstile ---------- */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; margin: 4px 0 14px; }
.form__alert { margin-top: 12px; }

/* iOS Safari: keep the date field inside its column */
.field input[type="date"] { display: block; width: 100%; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }

/* ---------- Social links ---------- */
.social { display: flex; gap: 10px; flex-wrap: wrap; }
.social a { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 999px; border: 1.5px solid rgb(243 245 244 / .16); color: var(--snow); text-decoration: none; transition: background-color .2s ease, border-color .2s ease, transform .2s cubic-bezier(.23,1,.32,1); }
.social svg { width: 19px; height: 19px; fill: currentColor; }
.social a:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .social a:hover { background: var(--red); border-color: var(--red); } }
.social a:focus-visible { outline: 2px solid var(--red-hi); outline-offset: 3px; }
.social--contact { margin-top: 24px; }
.social--foot { margin-top: 8px; }
.social--foot a { width: 40px; height: 40px; }
.foot__cols .social { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; gap: 10px; }
.foot__cols .social a { display: inline-grid !important; color: var(--snow); }