/* ==========================================================================
   ARNOLD STUDIO - BOUNCE HOUSE & PARTY RENTAL THEME (PREMIUM)
   Up & Bouncing Party Rentals

   System
   - Palette: cobalt vinyl, sun, vinyl red, deep navy ink, sky. Green is
     reserved for one meaning, "yes": it fits, it is in your party, free.
   - Type: Bagel Fat One (display, inflated letterforms), Gabarito (body
     and UI), Martian Mono (every measurement, label and spec).
   - Layout is not caged in one column. Gutters are fluid (--edge), text
     keeps its own measure, and photos, the road, the drift rows and the
     giant type all run to the viewport edges. Display type is sized in
     container units so it fills the column it sits in at any width.
   - Dashed lines always mean "seam or clearance": stitched placeholders,
     the "Needs" chip on every card, the clearance zone on the yard plan.

   Premium-only features (for the Deluxe/Starter tier ladder):
   inflating type, party list tray, yard check, sticky party-day clock,
   pinned safety photo, drift gallery, animated delivery road, filter pills.

   Contents
    1. Tokens            8. Rentals          15. FAQ
    2. Base              9. Yard check       16. Booking
    3. Type + utilities 10. Party day        17. Footer
    4. Buttons + fields 11. Safety           18. Tray + mobile bar
    5. Header + drawer  12. Drift gallery    19. Motion
    6. Photo slots      13. Reviews          20. Legal pages
    7. Hero             14. Delivery road    21. Reduced motion
                                            20b. Interior pages
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --ink: #111936;
  --ink-2: #0B1128;
  --muted: #4A5378;          /* 7.3:1 on paper */
  --muted-2: #434C70;        /* 7.3:1 on sky */
  --cobalt: #2346D8;         /* white 7.1:1, sun 4.6:1 */
  --cobalt-deep: #1A35A8;
  --cobalt-ink: #16298A;     /* extrusion shadow under sun type */
  --cobalt-soft: #C9D6FF;    /* body text on cobalt 4.9:1, on ink 12:1 */
  --sky: #E8F0FF;
  --sky-line: #BCCBEE;
  --paper: #FBFCFF;
  --line: #D9E0F0;
  --field: #7D87AD;          /* input borders, 3.5:1 on white */
  --sun: #FFC933;
  --sun-deep: #F5B700;
  --red: #D5361F;            /* white text 4.8:1 */
  --red-deep: #B02A16;
  --turf: #1B7F45;           /* white text 5:1 */
  --turf-deep: #146236;      /* small text on sky 6.5:1 */
  --lawn: #4DB873;

  --ff-display: "Bagel Fat One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --ff-body: "Gabarito", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --edge: clamp(1rem, 4.4vw, 6rem);
  --band: clamp(4.75rem, 9vw, 11rem);
  --gap: clamp(1rem, 2vw, 2.5rem);

  --fs-body: clamp(1rem, 0.28vw + 0.94rem, 1.28rem);
  --fs-lede: clamp(1.08rem, 0.5vw + 0.98rem, 1.7rem);
  --fs-h2: clamp(2.6rem, 6.2vw, 9.5rem);
  --fs-h2-side: clamp(2.5rem, 4.7vw, 8rem);
  --fs-h3: clamp(1.25rem, 0.8vw + 1rem, 2rem);

  --r-card: 18px;
  --r-input: 10px;
  --head-h: 76px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (max-width: 599px) {
  :root { --head-h: 64px; }
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
  scroll-padding-bottom: 6rem; /* focused fields clear the sticky bar and the party tray */
  overflow-x: clip;
}
html.is-locked { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
button { font: inherit; }
[hidden] { display: none !important; }

::selection { background: var(--sun); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 6px;
}
.on-dark :focus-visible,
.on-cobalt :focus-visible { outline-color: var(--sun); }
.on-cobalt .quick :focus-visible,
.on-cobalt .book-panel :focus-visible { outline-color: var(--cobalt); }
.site-head:not(.is-solid) :focus-visible { outline-color: var(--sun); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 100;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease-out);
}
.skip-link:focus { transform: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Type + utilities ------------------------------------------------------- */
.edge { padding-inline: var(--edge); }

.kicker {
  display: block;
  margin: 0 0 1.25rem;
  font: 500 clamp(.7rem, .18vw + .64rem, .92rem)/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cobalt);
}
.on-dark .kicker,
.on-cobalt .kicker { color: var(--sun); }

.display {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: .92;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.lede {
  max-width: 42ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.on-dark .lede { color: var(--cobalt-soft); }
.on-cobalt .lede { color: #fff; }

.text-link {
  display: inline-block;
  padding-block: .2em;
  color: var(--cobalt);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.text-link:hover { color: var(--ink); }

/* 4. Buttons + fields -------------------------------------------------------- */
/* House orb pill: flat colour shift on hover, orb nudges 3px, no glow, no lift */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: #fff;
  --orb-bg: #fff;
  --orb-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  min-height: 3.25rem;
  padding: .4rem .45rem .4rem 1.4rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 1rem/1.1 var(--ff-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 1.1rem; height: 1.1rem; }

.btn-orb {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--orb-bg);
  color: var(--orb-fg);
  transition: transform .25s var(--ease-out);
}
.btn:hover .btn-orb { transform: translateX(3px); }

.btn-primary { --btn-bg: var(--red); --orb-fg: var(--red); }
.btn-primary:hover { --btn-bg: var(--red-deep); }

.btn-sun { --btn-bg: var(--sun); --btn-fg: var(--ink); --orb-bg: var(--ink); --orb-fg: var(--sun); }
.btn-sun:hover { --btn-bg: var(--sun-deep); }

.btn-ink { --orb-bg: var(--sun); --orb-fg: var(--ink); }
.btn-ink:hover { --btn-bg: #26305A; }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: currentColor; }
.btn-ghost:hover { --btn-bg: var(--sky); }

.btn-plain { justify-content: center; gap: .55rem; padding-inline: 1.3rem; }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: .7rem .9rem;
  border: 2px solid var(--field);
  border-radius: var(--r-input);
  background: #fff;
  color: var(--ink);
  font: 500 1rem/1.3 var(--ff-body);
  transition: border-color .2s;
}
input[type="date"] { -webkit-appearance: none; appearance: none; }
input::-webkit-date-and-time-value { text-align: left; }
input::placeholder, textarea::placeholder { color: #6B7499; opacity: 1; }
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23111936' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9rem center / 1.1rem no-repeat;
}
textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 1px;
  border-color: var(--cobalt);
}
[aria-invalid="true"] { border-color: var(--red) !important; }

.field-err {
  margin-top: .35rem;
  color: var(--red);
  font-size: .88rem;
  font-weight: 700;
}

/* 5. Header + drawer ------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--head-h);
  background: var(--cobalt);
  color: #fff;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s;
}
.site-head.is-solid {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

.head-row {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 3rem);
  height: 100%;
  padding-inline: var(--edge);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: none;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.brand-mark {
  width: clamp(1.9rem, 1vw + 1.5rem, 2.4rem);
  height: auto;
  aspect-ratio: 1;
  color: var(--sun);
  --mark-door: var(--cobalt);
  --mark-dot: var(--red);
  transition: color .35s;
}
.is-solid .brand-mark { color: var(--cobalt); --mark-door: var(--paper); }
.brand-word {
  font-family: var(--ff-display);
  font-size: clamp(1.2rem, .9vw + .9rem, 1.75rem);
  line-height: 1;
  white-space: nowrap;
}
.brand-word .amp { margin-inline: .05em; color: var(--sun); }
.is-solid .brand-word .amp { color: var(--red); }

.head-nav {
  display: none;
  gap: clamp(1rem, 1.7vw, 2.4rem);
  margin-inline: auto;
}
.head-nav a {
  position: relative;
  padding-block: .65rem;
  color: inherit;
  font-weight: 600;
  font-size: clamp(.95rem, .2vw + .9rem, 1.12rem);
  text-decoration: none;
  white-space: nowrap;
}
.head-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .3rem;
  height: 3px;
  border-radius: 2px;
  background: var(--sun);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.is-solid .head-nav a::after { background: var(--red); }
.head-nav a:hover::after,
.head-nav a[aria-current]::after { transform: scaleX(1); }

.head-tools {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.4vw, 1.5rem);
  margin-left: auto;
}
.head-tel {
  display: none;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  color: inherit;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.head-tel svg { width: 1.1rem; height: 1.1rem; }
.head-tel:hover { text-decoration: underline; }
.head-cta { display: none; }

.nav-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.nav-bars { display: grid; gap: 6px; width: 20px; }
.nav-bars span { height: 2.5px; border-radius: 2px; background: currentColor; }
.nav-btn:hover { background: rgba(255, 255, 255, .12); }
.is-solid .nav-btn:hover { background: var(--sky); }

@media (min-width: 1024px) {
  .head-cta { display: inline-flex; }
}
@media (min-width: 1280px) {
  .head-nav { display: flex; }
  .head-tools { margin-left: 0; }
  .nav-btn { display: none; }
}
@media (min-width: 1500px) {
  .head-tel { display: inline-flex; }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(11, 17, 40, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s linear .3s;
}
.scrim.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: min(28rem, 100%);
  padding: 1rem var(--edge) calc(1.5rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--cobalt);
  color: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .45s var(--ease-out), visibility 0s linear .45s;
}
.drawer.is-open { transform: none; visibility: visible; transition: transform .45s var(--ease-out); }

.drawer-close {
  align-self: flex-end;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-links { list-style: none; margin: 1rem 0 2rem; padding: 0; }
.drawer-links a {
  display: block;
  padding-block: .35rem;
  color: #fff;
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 7.5vw, 2.5rem);
  line-height: 1.1;
  text-decoration: none;
}
.drawer-links a:hover { color: var(--sun); }
.drawer-foot { display: grid; justify-items: start; gap: .9rem; margin-top: auto; }
.drawer-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sun);
  font-size: 1.5rem;
  font-weight: 800;
  text-decoration: none;
}
.drawer-foot p { color: var(--cobalt-soft); font-size: .95rem; }
@media (min-width: 1280px) {
  .drawer, .scrim { display: none; }
}

/* 6. Photo slots + rental art ---------------------------------------------- */
/* Photo slots hold a real <img> (optionally inside <picture>). A missing file
   flags its .shot as .is-empty (inline script in <head>) and the stitched
   vinyl placeholder shows. .shot.art is the same stitched vinyl panel used
   on purpose: the rental cards are illustrations, not photos. */
.shot {
  --ph-a: #DDE7FF;
  --ph-b: #E8EFFF;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-card);
  background: var(--ph-a);
}
.shot-dark { --ph-a: #1C3BC2; --ph-b: #2244D0; }
.on-dark .shot-dark { --ph-a: #17204A; --ph-b: #1C2757; }

.shot img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot-art, .shot-tag { display: none; }

.shot.is-empty,
.shot.art { background: repeating-linear-gradient(90deg, var(--ph-a) 0 2.5rem, var(--ph-b) 2.5rem 5rem); }
.shot.is-empty img { display: none; }
.shot.is-empty::after,
.shot.art::after {
  content: "";
  position: absolute;
  inset: .7rem;
  border: 2px dashed rgba(255, 255, 255, .8);
  border-radius: calc(var(--r-card) - .45rem);
  pointer-events: none;
}
.shot-dark.is-empty::after { border-color: rgba(255, 255, 255, .3); }
.shot.is-empty .shot-art,
.shot.art .shot-art {
  display: block;
  position: absolute;
  inset: 13% 12% 19%;
  width: 76%;
  height: 68%;
}
.shot.is-empty .shot-tag {
  display: block;
  position: absolute;
  left: 1.3rem;
  bottom: 1.2rem;
  z-index: 2;
  max-width: calc(100% - 2.6rem);
  padding: .3rem .55rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  font: 500 .64rem/1.35 var(--ff-mono);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}

/* 7. Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: calc(var(--head-h) + clamp(1.75rem, 4.5vw, 5rem)) var(--edge) clamp(3.5rem, 7vw, 8rem);
  background: var(--cobalt);
  color: #fff;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "sub" "quick" "facts" "shot";
}

.hero-title { grid-area: title; font-weight: 400; container-type: inline-size; }
.hero-kicker {
  display: block;
  max-width: 36ch;
  margin-bottom: clamp(1.1rem, 2.2vw, 2.4rem);
  color: var(--sun);
  font: 500 clamp(.72rem, .24vw + .64rem, 1rem)/1.5 var(--ff-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero-title .inf {
  display: block;
  color: var(--sun);
  font-family: var(--ff-display);
  font-size: clamp(3.2rem, 9.4vw, 26rem);
  font-size: 17.5cqi;
  line-height: .86;
  letter-spacing: -.012em;
  text-shadow: 0 .045em 0 var(--cobalt-ink);
}
.hero-title .ln { display: block; }

.hero-sub {
  grid-area: sub;
  max-width: 38ch;
  margin-top: clamp(1.6rem, 3vw, 3.2rem);
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.45;
  text-wrap: pretty;
}

.quick {
  grid-area: quick;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: .9rem .6rem;
  margin-top: clamp(1.75rem, 3.5vw, 3.4rem);
  padding: clamp(1rem, 1.5vw, 1.4rem);
  border-radius: calc(var(--r-card) + 4px);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 28px 60px -28px rgba(6, 14, 60, .6);
}
.q-field label {
  display: block;
  margin-bottom: .4rem;
  color: var(--muted);
  font: 600 .72rem/1.2 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.q-go { grid-column: 1 / -1; min-height: 3.25rem; }
.q-zone { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; }
.q-zone.is-free { color: var(--turf); font-weight: 700; }
.q-zone.is-flat { color: var(--cobalt); font-weight: 700; }
.q-zone.is-far { color: var(--ink); font-weight: 700; }

@media (min-width: 640px) {
  .quick { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) auto; align-items: start; gap: .9rem; }
  .q-go { grid-column: auto; margin-top: calc(.72rem * 1.2 + .4rem); }
}

.hero-facts {
  grid-area: facts;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.75rem;
  margin: clamp(1.5rem, 2.5vw, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: clamp(.95rem, .25vw + .9rem, 1.15rem);
  font-weight: 600;
}
.hero-facts li { display: flex; align-items: center; gap: .5rem; }
.hero-facts svg { width: 1.3rem; height: 1.3rem; color: var(--sun); }

.hero-shot {
  grid-area: shot;
  position: relative;
  margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * var(--edge)) 0;
}
.hero-shot .shot { aspect-ratio: 4 / 5; border-radius: 0; }
.hero-shot figcaption {
  position: absolute;
  top: clamp(1rem, 2vw, 1.75rem);
  left: clamp(1rem, 2vw, 1.75rem);
  z-index: 2;
}
.spec-tag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .8rem;
  padding: .55rem .95rem;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: 700 .98rem/1.2 var(--ff-body);
  text-decoration: none;
  transform: rotate(-2deg);
  transition: background-color .2s;
}
.spec-tag span { color: var(--sun); font: 500 .7rem/1.2 var(--ff-mono); }
.hero-shot .shot.is-empty .shot-tag { left: auto; right: 1.3rem; }
.spec-tag:hover { background: #000; }

@media (min-width: 560px) and (max-width: 1023px) {
  .hero-shot .shot { aspect-ratio: 4 / 3; }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title shot"
      "sub   shot"
      "quick shot"
      "facts shot";
    column-gap: clamp(2rem, 3.5vw, 5rem);
  }
  .hero { padding-top: calc(var(--head-h) + clamp(1.5rem, 4.5vh, 4.5rem)); }
  .hero-title .inf { font-size: min(17.5cqi, calc(18vh - 1.5rem)); }
  .hero-kicker { margin-bottom: clamp(.9rem, 2.4vh, 2.4rem); }
  .hero-sub { margin-top: clamp(1rem, 3.2vh, 3rem); }
  .quick { margin-top: clamp(1.25rem, 3.6vh, 3.4rem); }
  .hero-shot { align-self: start; margin: 0 calc(-1 * var(--edge)) 0 0; }
  .hero-shot .shot { border-radius: var(--r-card) 0 0 var(--r-card); }
  /* The quick check reaches across the gap and over the photo's edge */
  .quick { width: calc(100% + clamp(4rem, 9vw, 16rem)); }
}

/* 8. Rentals ---------------------------------------------------------------- */
.rentals { padding-block: var(--band); background: var(--paper); }

.sec-head {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4.5vw, 5rem);
}
.sec-head .display { max-width: 16ch; }
@media (min-width: 900px) {
  .sec-head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    column-gap: clamp(2rem, 6vw, 9rem);
    align-items: end;
  }
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: clamp(2rem, 3.5vw, 3.75rem);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.9rem;
  padding: .5rem 1.15rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.pill:hover { border-color: var(--ink); }
.pill[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.pill-n { font: 500 .72rem/1 var(--ff-mono); opacity: .8; }

.cat {
  --cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: clamp(2.75rem, 4.5vw, 5.5rem) clamp(1rem, 2vw, 2.5rem);
  margin: 0;
  list-style: none;
}
@media (min-width: 620px)  { .cat { --cols: 2; } }
@media (min-width: 1040px) { .cat { --cols: 3; } }
@media (min-width: 1440px) { .cat { --cols: 4; } }
@media (min-width: 2200px) { .cat { --cols: 6; } }

.unit { display: flex; flex-direction: column; }
.unit .shot { aspect-ratio: 4 / 3; }
.shot.art .shot-art { inset: 15% 12% 15%; }
/* The illustration gives a small bounce when its card is hovered */
.unit .shot-art { transform-origin: 50% 100%; }
@media (hover: hover) {
  .unit:hover .shot-art { animation: art-bounce .7s var(--ease-out); }
}
@keyframes art-bounce {
  0%   { transform: none; }
  30%  { transform: translateY(-7%) scale(.97, 1.04); }
  55%  { transform: translateY(0) scale(1.04, .95); }
  78%  { transform: scale(.99, 1.01); }
  100% { transform: none; }
}

.unit-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  padding-top: 1.15rem;
}
.unit-type {
  grid-column: 1 / -1;
  margin-bottom: .4rem;
  color: var(--muted);
  font: 500 .7rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.unit-name {
  font: 800 var(--fs-h3)/1.08 var(--ff-body);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.unit-name a, .rent-name a { color: inherit; text-decoration: none; }
.unit-name a:hover, .rent-name a:hover { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.unit-price { display: flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
.unit-price .amt {
  color: var(--red);
  font-family: var(--ff-display);
  font-size: clamp(1.6rem, 1vw + 1.2rem, 2.5rem);
  line-height: 1;
}
.unit-price .per { color: var(--muted); font-size: .85rem; font-weight: 600; }

.unit-spec {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .85rem;
  font: 500 .72rem/1.4 var(--ff-mono);
}
.unit-spec span { padding: .28rem .55rem; border-radius: 6px; background: var(--sky); }
.unit-spec .needs { padding: calc(.28rem - 1.5px) calc(.55rem - 1.5px); border: 1.5px dashed var(--field); background: transparent; }
.unit-meta { grid-column: 1 / -1; margin-top: .65rem; color: var(--muted); font-size: .95rem; }

.add {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.9rem;
  margin-top: 1.15rem;
  padding: .3rem 1.15rem .3rem .35rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.add:active { transform: scale(.98); }
.add-ic {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  transition: transform .35s var(--ease-spring), background-color .2s, color .2s;
}
.add-ic svg { width: 1rem; height: 1rem; }
.add:hover { background: var(--sky); }
.add:hover .add-ic { transform: rotate(90deg); }
.add.is-added { border-color: var(--turf); background: var(--turf); color: #fff; }
.add.is-added:hover { border-color: var(--turf-deep); background: var(--turf-deep); }
.add.is-added .add-ic { background: #fff; color: var(--turf); transform: none; }

.cat-foot { margin-top: clamp(3rem, 5vw, 5.5rem); color: var(--muted); font-weight: 600; }

/* 9. Yard check ------------------------------------------------------------- */
.fit { padding-block: var(--band); background: var(--sky); }
.fit .lede { color: var(--muted-2); }

.fit-title { container-type: inline-size; }
.fit-title .inf {
  display: block;
  color: var(--cobalt);
  font-size: var(--fs-h2);
  font-size: 12.6cqi;
  line-height: .86;
}

.fit-grid {
  display: grid;
  gap: clamp(2.5rem, 4vw, 5rem);
  margin-top: clamp(2.5rem, 5vw, 5.5rem);
}
@media (min-width: 1024px) {
  .fit-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.fit-nojs { margin-top: 1.5rem; font-weight: 600; }
.js .fit-nojs { display: none; }
.fit-tool { display: none; }
.js .fit-tool { display: grid; gap: 1.75rem; margin-top: 2.25rem; }

.range-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.range label, .fit-units legend { font-size: 1.05rem; font-weight: 700; }
.range output {
  padding: .2rem .55rem;
  border-radius: 6px;
  background: #fff;
  font: 600 .95rem/1.3 var(--ff-mono);
}

input[type="range"] {
  --fill: 50%;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cobalt) var(--fill), var(--sky-line) var(--fill));
}
input[type="range"]::-moz-range-track { height: 10px; border-radius: 99px; background: var(--sky-line); }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--cobalt); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -10px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
  transition: transform .2s var(--ease-spring);
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--sun);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
input[type="range"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 10px; }

.fit-units { min-width: 0; margin: 0; padding: 0; border: 0; }
.fit-units legend { margin-bottom: .75rem; padding: 0; }
.fit-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.fit-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .35rem .5rem .35rem .95rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.fit-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fit-opt:hover { border-color: var(--ink); }
.fo-state {
  padding: .3rem .45rem;
  border-radius: 999px;
  font: 600 .62rem/1 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fo-state:empty { display: none; }
.fit-opt.fits .fo-state { background: #D9F2E2; color: var(--turf-deep); }
.fit-opt.nofit .fo-state { background: #FFE3DE; color: var(--red-deep); }
.fit-opt:has(input:checked) { border-color: var(--ink); background: var(--ink); color: #fff; }
.fit-opt:has(input:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.fit-sum { font-size: clamp(1.1rem, .5vw + 1rem, 1.45rem); font-weight: 700; line-height: 1.35; text-wrap: pretty; }
.fit-sum strong { color: var(--cobalt); }
#fitAdd { justify-self: start; white-space: normal; text-align: left; }

.fit-stage { min-width: 0; }
@media (min-width: 1024px) and (min-height: 720px) {
  .fit-stage { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}
.plan {
  width: min(100%, calc(100svh - var(--head-h) - 7rem));
  min-width: min(100%, 20rem);
  height: auto;
  aspect-ratio: 1;
  margin-left: auto;
  border-radius: calc(var(--r-card) + 6px);
  background: #fff;
}
@media (max-width: 1023px) {
  .plan { width: 100%; }
}
.plan .zone { fill: rgba(255, 255, 255, .3); stroke: #fff; stroke-width: 4; stroke-dasharray: 14 10; }
.plan .foot { fill: var(--cobalt); stroke: rgba(17, 25, 54, .28); stroke-width: 3; }
.plan.is-nofit .zone { fill: rgba(213, 54, 31, .12); stroke: var(--red); }
.plan.is-nofit .foot { fill-opacity: .85; }
.plan .foot-label { fill: #fff; font-family: var(--ff-body); font-weight: 800; }
.plan-dims path { fill: none; stroke: var(--ink); stroke-width: 3; }
.plan-dims text, .plan-scale text { fill: var(--ink); font: 500 22px var(--ff-mono); }
.plan-scale path { fill: none; stroke: var(--ink); stroke-width: 4; }
.plan-note { font: 700 26px var(--ff-body); }
.plan-note.is-free { fill: var(--turf-deep); }
.plan-note.is-nofit { fill: var(--red-deep); }

.plan-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem 1.4rem;
  margin-top: 1rem;
  color: var(--muted-2);
  font: 500 .68rem/1.3 var(--ff-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.plan-key span { display: inline-flex; align-items: center; gap: .45rem; }
.plan-key i { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 3px; }
.k-foot { background: var(--cobalt); }
.k-zone { border: 2px dashed var(--ink); }
.k-yard { background: var(--lawn); }

/* 10. Party day ------------------------------------------------------------- */
.day { padding-block: var(--band); background: var(--sun); }
.day .kicker { color: var(--cobalt-ink); }
.day .display { font-size: var(--fs-h2-side); }

.day-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .day-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 10rem); }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .day-sticky { position: sticky; top: calc(var(--head-h) + clamp(1.5rem, 4vh, 3rem)); }
}

.clock { display: none; }
@media (min-width: 1024px) {
  .clock { display: block; margin-top: clamp(2rem, 6vh, 4.5rem); }
}
.clock-t {
  display: block;
  color: var(--cobalt);
  font-family: var(--ff-display);
  font-size: clamp(5rem, 11vw, 20rem);
  line-height: .82;
  white-space: nowrap;
  transform-origin: 30% 90%;
}
.clock-c {
  display: block;
  margin-top: 1rem;
  font: 600 .85rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.day-steps { margin: 0; padding: 0; list-style: none; }
.step { padding-block: clamp(2rem, 4vw, 3.5rem); border-top: 2px solid rgba(17, 25, 54, .22); }
.step:last-child { border-bottom: 2px solid rgba(17, 25, 54, .22); }
@media (min-width: 1024px) {
  .step { display: flex; flex-direction: column; justify-content: center; min-height: min(70vh, 46rem); }
}
.step-when {
  margin-bottom: .8rem;
  font: 600 .8rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.step h3 {
  font: 800 clamp(1.6rem, 1.7vw + 1.1rem, 3.2rem)/1.04 var(--ff-body);
  letter-spacing: -.02em;
  text-wrap: balance;
}
.step h3 + p { margin-top: 1rem; }
.step > p:not(.step-when) { max-width: 46ch; color: #2E3553; font-size: var(--fs-lede); text-wrap: pretty; }

.ticks { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ticks li { display: flex; align-items: flex-start; gap: .65rem; font-weight: 600; }
.ticks li::before {
  content: "";
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .18em;
  border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23FFC933' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 68% no-repeat;
}

/* 11. Safety ---------------------------------------------------------------- */
.safe { display: grid; background: var(--ink); color: #fff; }
@media (min-width: 1024px) {
  .safe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.safe-media { position: relative; min-height: min(110vw, 36rem); }
.safe-media .shot { position: absolute; inset: 0; border-radius: 0; }
/* Keep the stake and strap (low in the frame) when the panel crops */
.safe-media .shot img { object-position: 50% 72%; }
@media (min-width: 1024px) {
  .safe-media { min-height: 0; }
  /* The photo holds still while the promises scroll past it */
  .safe-media .shot { position: sticky; inset: auto; top: var(--head-h); height: calc(100vh - var(--head-h)); }
}

.safe-copy { padding: var(--band) var(--edge); }
@media (min-width: 1024px) {
  .safe-copy { padding-left: clamp(2.5rem, 6vw, 8rem); }
}
.safe .display { max-width: 11ch; font-size: var(--fs-h2-side); }
.safe .lede { max-width: 46ch; margin-top: 1.75rem; }

.promises { display: grid; margin-top: clamp(2.5rem, 4vw, 4rem); }
.promises > div { display: grid; gap: .45rem; padding-block: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 1440px) {
  .promises > div { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 2rem; }
}
.promises dt { color: var(--sun); font: 800 clamp(1.15rem, .5vw + 1rem, 1.6rem)/1.2 var(--ff-body); }
.promises dd { color: #DCE3F7; }

.rules {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding: 1.4rem;
  border: 2px dashed rgba(255, 201, 51, .55);
  border-radius: var(--r-card);
}
.rules-h {
  margin-bottom: 1rem;
  color: var(--sun);
  font: 600 .76rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.rules ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.rules li { padding: .5rem .95rem; border-radius: 999px; background: rgba(255, 255, 255, .09); font-weight: 600; }

/* 12. Drift gallery --------------------------------------------------------- */
.gal { padding-block: var(--band); background: var(--paper); }
.drift { display: grid; gap: clamp(1rem, 1.6vw, 2rem); overflow-x: clip; }
.drift-row {
  display: flex;
  gap: clamp(1rem, 1.6vw, 2rem);
  margin: 0;
  padding: 0 var(--edge) .5rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  scrollbar-width: thin;
}
.drift-row > li { flex: none; scroll-snap-align: start; }
.drift.is-live .drift-row {
  width: max-content;
  padding-bottom: 0;
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}
.drift-item { width: min-content; }
.drift-item .shot { height: clamp(15rem, 27vw, 40rem); aspect-ratio: var(--ar, 4 / 3); }
.drift-item figcaption {
  margin-top: .8rem;
  color: var(--muted);
  font: 500 .7rem/1.35 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* 13. Reviews --------------------------------------------------------------- */
.rev { padding-block: var(--band); background: var(--paper); }
.rev-grid { display: grid; gap: clamp(2.75rem, 4vw, 4rem); }
@media (min-width: 1024px) {
  .rev-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "head head" "main side";
    gap: clamp(3rem, 5vw, 5.5rem) clamp(2.5rem, 6vw, 8rem);
  }
  .rev-head { grid-area: head; }
  .quote-lg { grid-area: main; }
  .rev-side { grid-area: side; }
}
.rev-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2.5rem; }
.rev-head .kicker { flex-basis: 100%; margin-bottom: 0; }

.stars { margin-bottom: 1rem; color: var(--red); font-size: 1.15rem; letter-spacing: .14em; }
.quote blockquote p {
  font: 700 clamp(1.2rem, .7vw + 1rem, 1.7rem)/1.36 var(--ff-body);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.quote-lg blockquote p { font-size: clamp(1.75rem, 2.9vw, 4.6rem); line-height: 1.12; letter-spacing: -.025em; }
.quote figcaption { margin-top: 1.3rem; color: var(--muted-2); font-size: .95rem; }
.quote figcaption strong { display: block; color: var(--ink); font-size: 1.05rem; }
.rev-side { display: grid; align-content: start; gap: clamp(2.25rem, 3vw, 3rem); }
.rev-side .quote { padding-top: 1.75rem; border-top: 2px solid var(--ink); }

/* 13b. About ----------------------------------------------------------------- */
.about { padding-block: var(--band); background: var(--sky); }
.about .shot { --ph-a: #FFFFFF; --ph-b: #F2F6FF; aspect-ratio: 4 / 5; }
.about .lede { max-width: 44ch; margin-top: 1.6rem; color: var(--muted-2); }
.about-grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.about-shot { max-width: 34rem; }
.owner-shot { --ph-a: #FFFFFF; --ph-b: #F2F6FF; }
.owner-shot::after { display: none; }
.owner-art { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Transform origins for the hop and the wave (driven from main.js) */
.owner-art .owner-body,
.owner-art .owner-shadow,
.owner-art .owner-wave { transform-box: view-box; }
.owner-art .owner-body { transform-origin: 208px 450px; }
.owner-art .owner-shadow { transform-origin: 208px 452px; }
.owner-art .owner-wave { transform-origin: 152px 226px; }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: clamp(3rem, 7vw, 10rem); }
}
.about .display { max-width: 12ch; }
.about-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2.25rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}
.about-facts dt {
  margin-bottom: .4rem;
  color: var(--muted-2);
  font: 500 .72rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.about-facts dd { font: 800 clamp(1.15rem, .6vw + 1rem, 1.6rem)/1.2 var(--ff-body); }

/* 14. Delivery road --------------------------------------------------------- */
.area { padding-block: var(--band); background: var(--sky); }
.area .lede, .area .stop-note { color: var(--muted-2); }
.area .sec-head { align-items: start; }
.area-side { display: grid; gap: 2rem; }

.zip label { display: block; margin-bottom: .6rem; font-weight: 700; }
.zip-row { display: flex; gap: .6rem; max-width: 26rem; }
.zip-row input { flex: 1; min-width: 0; }
.zip-row .btn { flex: none; min-height: 3.25rem; }
.zip-out { min-height: 1.55em; margin-top: .7rem; font-weight: 700; }
.zip-out.is-free { color: var(--turf-deep); }
.zip-out.is-flat { color: var(--cobalt); }
.zip-out.is-far { color: var(--ink); }
.zip-out.is-err { color: var(--red); }

.road { --road-h: clamp(3.25rem, 4.6vw, 5rem); position: relative; margin-top: clamp(4rem, 8vw, 8rem); }
.road-strip { position: relative; height: var(--road-h); background: var(--ink); }
.road-strip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  margin-top: -2px;
  background: repeating-linear-gradient(90deg, var(--sun) 0 2.2rem, transparent 2.2rem 4rem);
}
.road-label {
  position: absolute;
  left: calc(var(--edge) + 12%);
  bottom: calc(100% + .9rem);
  color: var(--muted);
  font: 500 clamp(.68rem, .2vw + .62rem, .88rem)/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* JS sets --x/--y (the truck's centre inside .road), --dir (facing),
   --rot (90deg on the phone's vertical road), --spin and --bob */
.truck {
  --x: 0px;
  --y: 0px;
  --dir: 1;
  --rot: 0deg;
  --spin: 0deg;
  --bob: 0px;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: clamp(5.25rem, 6.8vw, 9.5rem);
  height: auto;
  overflow: visible;
  pointer-events: none;
  transform: translate(var(--x), var(--y)) translate(-50%, -50%) rotate(var(--rot)) scaleX(var(--dir));
}
.js .truck { display: block; }
.js .truck:not(.is-placed) { visibility: hidden; }
.truck .truck-body { transform: translateY(var(--bob)); }
.truck .wheel { transform-box: fill-box; transform-origin: center; transform: rotate(var(--spin)); }

.stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 5rem);
  margin: 0;
  list-style: none;
}
.stop { position: relative; padding-top: clamp(2.25rem, 3.2vw, 3.25rem); }
.stop-dot {
  --d: 2rem;
  --dot-on: var(--sun);
  position: absolute;
  left: 0;
  top: calc(var(--road-h) / -2 - var(--d) / 2);
  width: var(--d);
  height: var(--d);
  border: 6px solid var(--sun);
  border-radius: 50%;
  background: #fff;
  transition: background-color .35s, scale .45s var(--ease-spring);
}
.stop-home .stop-dot { --d: 2.6rem; --dot-on: var(--lawn); border-color: var(--lawn); }
.stop-far .stop-dot { --dot-on: #8A94B8; border-color: #8A94B8; background: var(--ink); }
/* A stop fills in once the truck has driven past it */
.stop.is-reached .stop-dot { background: var(--dot-on); scale: 1.12; }
.stop-fee {
  margin-bottom: .45rem;
  color: var(--cobalt);
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 2.8vw, 4.4rem);
  line-height: 1;
}
.stop-home .stop-fee { color: var(--turf); }
.stop-far .stop-fee { color: var(--ink); }
.stop-name { font: 800 clamp(1.2rem, .8vw + 1rem, 1.85rem)/1.15 var(--ff-body); }
.stop-note { max-width: 30ch; margin-top: .5rem; color: var(--muted); }

@media (max-width: 759px) {
  .road-strip { display: none; }
  .stops {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    margin-inline: var(--edge);
    padding: .25rem 0 .25rem 3rem;
  }
  .stops::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 14px;
    border-radius: 7px;
    background: var(--ink);
  }
  .stops::after {
    content: "";
    position: absolute;
    left: 5.5px; top: 12px; bottom: 12px;
    width: 3px;
    background: repeating-linear-gradient(180deg, var(--sun) 0 1rem, transparent 1rem 1.9rem);
  }
  .stop { padding-top: 0; }
  .truck { width: 3.4rem; }
  .stop-dot { top: .3rem; left: calc(-3rem + 7px - var(--d) / 2); z-index: 1; }
}

/* 15. FAQ ------------------------------------------------------------------- */
.faq { padding-block: var(--band); background: var(--paper); }
.faq .display { font-size: var(--fs-h2-side); }
.faq-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) {
  .faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 10rem); align-items: start; }
  .faq-sticky { position: sticky; top: calc(var(--head-h) + 2rem); }
}
.faq-call { margin-top: 1.6rem; color: var(--muted-2); font-weight: 600; }
.faq-call a { color: var(--ink); font-weight: 800; white-space: nowrap; }

.qa { border-top: 2px solid var(--ink); }
.qa:last-child { border-bottom: 2px solid var(--ink); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  list-style: none;
  font: 800 clamp(1.15rem, .7vw + 1rem, 1.9rem)/1.22 var(--ff-body);
  letter-spacing: -.01em;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa-mark {
  position: relative;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .4s var(--ease-spring), background-color .2s;
}
.qa-mark::before, .qa-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1rem;
  height: 2.5px;
  margin: -1.25px 0 0 -.5rem;
  border-radius: 2px;
  background: #fff;
}
.qa-mark::after { transform: rotate(90deg); }
.qa summary:hover .qa-mark { background: var(--cobalt); }
.qa[open] .qa-mark { background: var(--red); transform: rotate(45deg); }
.qa-body { max-width: 62ch; padding: 0 3.5rem 1.75rem 0; }
.qa-body p { color: var(--muted-2); font-size: clamp(1rem, .35vw + .95rem, 1.35rem); }
.qa-body a { color: var(--cobalt); font-weight: 700; }

/* 16. Booking --------------------------------------------------------------- */
.book { padding-block: var(--band); background: var(--cobalt); color: #fff; }
.book-grid { display: grid; gap: clamp(2.75rem, 5vw, 5rem); }
@media (min-width: 1100px) {
  .book-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 9rem); align-items: start; }
}
.book .display {
  color: var(--sun);
  font-size: clamp(3rem, 5.8vw, 10rem);
  text-shadow: 0 .045em 0 var(--cobalt-ink);
}
.book-side .lede { margin-top: 1.6rem; }

.book-tel {
  display: inline-grid;
  margin-top: clamp(2rem, 3vw, 3rem);
  color: #fff;
  font: 800 clamp(2rem, 2.8vw, 3.8rem)/1.05 var(--ff-body);
  letter-spacing: -.02em;
  text-decoration: none;
}
.book-tel:hover { color: var(--sun); }
.book-tel-l {
  margin-bottom: .5rem;
  color: var(--sun);
  font: 500 .74rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.next { display: grid; gap: 1.15rem; margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.next li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; }
.next-n {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: 1.15rem;
}
.next p { padding-top: .35rem; color: var(--cobalt-soft); }
.next strong { color: #fff; }

.book-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1.25rem;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .28);
}
.book-facts dt {
  margin-bottom: .35rem;
  color: var(--sun);
  font: 500 .72rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.book-facts dd { font-weight: 600; }

.book-panel {
  padding: clamp(1.25rem, 3vw, 3rem);
  border-radius: calc(var(--r-card) + 8px);
  background: #fff;
  color: var(--ink);
}
.book-form { display: grid; gap: 1.4rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.f-row { display: grid; gap: 1.4rem; }
@media (min-width: 640px) {
  .f-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.f { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.f > label, .f > legend { padding: 0; font-size: .98rem; font-weight: 700; }
fieldset.f > legend { margin-bottom: .5rem; }
.req, .opt { margin-left: .4rem; font: 500 .66rem/1 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; }
.req { color: var(--red); }
.opt { color: var(--muted); }
.f-note { color: var(--muted); font-size: .9rem; font-weight: 600; }
.f-note:empty { display: none; }
.f-note.is-free { color: var(--turf); }
.f-note.is-flat { color: var(--cobalt); }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem 1rem;
  border: 2px solid var(--field);
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--cobalt); outline-offset: 2px; }

.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .5rem; }
.pick {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3rem;
  padding: .55rem .85rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.pick:hover { border-color: var(--field); }
.pick input { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; accent-color: var(--turf); }
.pick-n { flex: 1; font-size: .95rem; font-weight: 600; line-height: 1.2; }
.pick-p { color: var(--muted); font: 500 .74rem/1 var(--ff-mono); }
.pick:has(input:checked) { border-color: var(--turf); background: #EAF7EF; }
.pick:has(input:checked) .pick-p { color: var(--turf-deep); }
.estimate { margin-top: .9rem; font-weight: 600; color: var(--muted); }
.estimate strong { color: var(--turf-deep); }

.f-callout {
  padding: .9rem 1.1rem;
  border: 2px dashed var(--sky-line);
  border-radius: 12px;
  background: var(--sky);
  color: var(--muted-2);
  font-size: .95rem;
}
.f-submit { justify-self: start; }

.form-success { display: grid; gap: 1rem; padding-block: clamp(1rem, 2vw, 2rem); }
.form-success:focus { outline: none; }
.form-success .kicker { margin: 0; }
.fs-title { color: var(--cobalt); font-family: var(--ff-display); font-size: clamp(2rem, 3.4vw, 3.8rem); line-height: .95; }
.form-success a { color: var(--cobalt); font-weight: 700; }

/* 17. Footer ---------------------------------------------------------------- */
.foot { padding-top: clamp(3rem, 6vw, 6.5rem); background: var(--ink-2); color: #fff; overflow-x: clip; }
.foot-word { margin-bottom: clamp(3rem, 6vw, 6rem); padding-inline: var(--edge); container-type: inline-size; }
.foot-word .inf {
  display: block;
  color: var(--sun);
  font-family: var(--ff-display);
  font-size: clamp(3rem, 12vw, 30rem);
  font-size: 14.9cqi;
  line-height: .9;
  white-space: nowrap;
}

.foot-grid { display: grid; gap: 2.5rem; padding-bottom: clamp(3rem, 5vw, 5rem); }
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .foot-grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 5rem); }
}
.foot .brand-mark { color: var(--sun); --mark-door: var(--ink-2); }
.foot-brand p { max-width: 36ch; margin-top: 1.1rem; color: var(--cobalt-soft); }

.social { display: flex; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.social a {
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border: 1.5px solid rgba(255, 255, 255, .38);
  border-radius: 50%;
  color: #fff;
  transition: background-color .2s, color .2s, border-color .2s;
}
.social a:hover { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.social svg { width: 1.15rem; height: 1.15rem; }

.foot-h {
  margin-bottom: 1rem;
  color: var(--sun);
  font: 500 .74rem/1.3 var(--ff-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.foot-col ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; color: var(--cobalt-soft); }
.foot-col a { display: inline-block; padding-block: .3rem; color: #fff; text-decoration: none; }
.foot-col a:hover { color: var(--sun); text-decoration: underline; }
.foot-col .foot-tel { font-size: 1.35rem; font-weight: 800; }

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--cobalt-soft);
  font-size: .9rem;
}
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.foot-bottom a { display: inline-block; padding-block: .3rem; color: #fff; }
.foot-bottom a:hover { color: var(--sun); }

/* 18. Tray + mobile bar ------------------------------------------------------ */
/* Room for the sticky bar lives in the footer, so the page still ends on ink */
@media (max-width: 1023px) {
  .foot-bottom { padding-bottom: calc(1.5rem + 4.6rem + env(safe-area-inset-bottom)); }
}

.tray {
  position: fixed;
  right: var(--edge);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 55;
  display: none;
  align-items: center;
  gap: 1.25rem;
  padding: .45rem .45rem .45rem 1.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 20px 44px -18px rgba(11, 17, 40, .65);
  transition: opacity .3s, translate .35s var(--ease-out), visibility 0s;
}
@media (min-width: 1024px) {
  .tray { display: flex; }
}
.tray.is-away { opacity: 0; translate: 0 1rem; visibility: hidden; pointer-events: none; transition: opacity .3s, translate .35s var(--ease-out), visibility 0s linear .35s; }
.tray-sum { display: grid; line-height: 1.25; }
.tray-n { font-weight: 800; }
.tray-t { color: var(--cobalt-soft); font-size: .85rem; }

.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  padding: .65rem var(--edge) calc(.65rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 -12px 30px -20px rgba(11, 17, 40, .4);
}
@media (min-width: 1024px) {
  .mobile-bar { display: none; }
}
.mobile-bar .btn { min-height: 3.1rem; }
.bar-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding-inline: .4rem;
  border-radius: 999px;
  background: #fff;
  color: var(--red-deep);
  font-size: .85rem;
  font-weight: 800;
}

/* 19. Motion ---------------------------------------------------------------- */
.js .rv { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.js .rv.is-in { opacity: 1; translate: none; }

/* Inflating type. JS splits each .inf into words (.w) and letters (.l). */
.inf-vis { display: block; }
.inf .w { display: inline-block; white-space: nowrap; }
.inf .l { display: inline-block; transform-origin: 50% 86%; }

/* Hide the load headline only until the splitter runs; show it anyway if JS stalls */
.js .inf[data-inflate="load"]:not(.is-split) { opacity: 0; animation: inf-fallback 0s 2.5s forwards; }
@keyframes inf-fallback { to { opacity: 1; } }

.inf.is-armed .l { opacity: 0; transform: scale(1.3, .06); }
.inf.is-inflating .l { animation: inflate .95s var(--ease-out) both; animation-delay: calc(var(--i) * 32ms + 60ms); }
@keyframes inflate {
  0%   { opacity: 0; transform: scale(1.3, .06); }
  16%  { opacity: 1; }
  44%  { transform: scale(.9, 1.14); }
  64%  { transform: scale(1.05, .95); }
  82%  { transform: scale(.985, 1.02); }
  100% { opacity: 1; transform: none; }
}

/* Scroll-driven: --p runs 0 to 1 (with a little overshoot) as the heading rises */
.inf[data-inflate="scroll"] .l {
  opacity: calc(.3 + min(var(--p, 1), 1) * .7);
  transform: scale(calc(1 + (1 - min(var(--p, 1), 1)) * .3), max(var(--p, 1), .12));
}

/* 20. Legal pages ------------------------------------------------------------ */
.legal-head {
  padding: calc(var(--head-h) + clamp(2.5rem, 6vw, 6rem)) var(--edge) clamp(2.5rem, 5vw, 5rem);
  background: var(--cobalt);
  color: #fff;
}
.legal-head h1 { color: var(--sun); font-size: clamp(3rem, 8vw, 9rem); text-shadow: 0 .045em 0 var(--cobalt-ink); }
.legal-head .lede { margin-top: 1.25rem; }
.legal { padding: clamp(3rem, 6vw, 6rem) var(--edge) var(--band); }
.legal-body { max-width: 44rem; }
.legal-body h2 { margin: 2.5rem 0 .75rem; font: 800 clamp(1.3rem, .8vw + 1rem, 1.8rem)/1.2 var(--ff-body); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin-bottom: 1rem; color: var(--muted); }
.legal-body p a { color: var(--cobalt); font-weight: 700; }
.legal-body .btn { margin-top: 1rem; }
.legal-updated { margin-top: 2.5rem; font: 500 .8rem var(--ff-mono); text-transform: uppercase; letter-spacing: .04em; }

/* 20b. Interior pages -------------------------------------------------------- */
/* Page head: a shorter cobalt hero with a parade of rental illustrations */
.page-head {
  padding: calc(var(--head-h) + clamp(2rem, 5vw, 5.5rem)) var(--edge) 0;
  background: var(--cobalt);
  color: #fff;
  overflow-x: clip;
}
.ph-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.ph-title { font-weight: 400; container-type: inline-size; }
.ph-title .inf {
  display: block;
  color: var(--sun);
  font-family: var(--ff-display);
  font-size: clamp(3rem, 10vw, 20rem);
  font-size: 13.4cqi;
  line-height: .86;
  letter-spacing: -.012em;
  text-shadow: 0 .045em 0 var(--cobalt-ink);
}
.ph-title .ln { display: block; }
.ph-facts { display: grid; gap: .55rem; margin: 1.6rem 0 0; padding: 0; list-style: none; font-weight: 600; }
.ph-facts li { display: flex; align-items: center; gap: .55rem; }
.ph-facts svg { width: 1.3rem; height: 1.3rem; color: var(--sun); }
@media (min-width: 1024px) {
  .ph-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2rem, 4vw, 6rem); align-items: end; }
}

.ph-parade {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 4rem);
  margin: clamp(2.5rem, 6vw, 6rem) calc(-1 * var(--edge)) 0;
  padding-inline: var(--edge);
  overflow-x: clip;
}
.ph-parade svg {
  --h: clamp(4.5rem, 9vw, 12rem);
  flex: none;
  width: auto;
  height: var(--h);
  margin-bottom: -3px;
  transform-origin: 50% 100%;
}
.ph-parade svg:nth-child(3n+2) { --h: clamp(5.5rem, 11.5vw, 15rem); }
.ph-parade svg:nth-child(4n) { --h: clamp(4rem, 8vw, 10.5rem); }
.js .ph-parade svg { animation: inflate .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + 300ms); }
@media (max-width: 699px) {
  .ph-parade svg:nth-child(n+5) { display: none; }
}

/* Category rail: pinned under the header while the catalog scrolls */
html:has(.cat-rail) { scroll-padding-top: calc(var(--head-h) + 5rem); }
.cat-rail {
  position: sticky;
  top: var(--head-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  transition: box-shadow .3s;
}
.cat-rail.is-stuck { box-shadow: 0 14px 28px -24px rgba(11, 17, 40, .55); }
.cat-rail ul {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: .75rem var(--edge);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-rail ul::-webkit-scrollbar { display: none; }
.cat-rail a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: .45rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .98rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.cat-rail a:hover { border-color: var(--ink); }
.cat-rail a[aria-current] { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Category sections */
.cat-sec { padding-block: var(--band); background: var(--paper); }
.cat-sec.is-sky { background: var(--sky); }
.cat-sec.is-sky .lede { color: var(--muted-2); }
.cat-title { container-type: inline-size; margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem); }
.cat-title .inf { display: block; font-size: var(--fs-h2); font-size: 11cqi; line-height: .88; }
.cat-intro { display: grid; gap: 1.25rem; margin-bottom: clamp(3rem, 6vw, 6.5rem); }
.cat-meta {
  color: var(--cobalt);
  font: 500 clamp(.72rem, .2vw + .66rem, .92rem)/1.5 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .cat-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(2rem, 6vw, 9rem); align-items: start; }
}

.rent-list { display: grid; gap: clamp(4rem, 8vw, 8rem); margin: 0; padding: 0; list-style: none; }
.rent { display: grid; align-items: center; gap: clamp(1.5rem, 3vw, 2.5rem); }
.rent-art { max-height: min(78vh, 46rem); margin-inline: calc(-1 * var(--edge)); border-radius: 0; }
.cat-sec.is-sky .rent-art { --ph-a: #FFFFFF; --ph-b: #F2F6FF; }
@media (min-width: 900px) {
  .rent { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: clamp(2.5rem, 5vw, 7rem); }
  .rent-art { margin-inline: calc(-1 * var(--edge)) 0; border-radius: 0 var(--r-card) var(--r-card) 0; }
  .rent:nth-child(even) .rent-art { order: 2; margin-inline: 0 calc(-1 * var(--edge)); border-radius: var(--r-card) 0 0 var(--r-card); }
}

.rent-type {
  color: var(--muted);
  font: 500 .72rem/1.4 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.is-sky .rent-type { color: var(--muted-2); }
.rent-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 1.5rem; margin-top: .6rem; }
.rent-name { font: 800 clamp(1.9rem, 1.6vw + 1.25rem, 3.4rem)/1.02 var(--ff-body); letter-spacing: -.02em; text-wrap: balance; }
.rent .unit-price .amt { font-size: clamp(2.1rem, 1.6vw + 1.4rem, 3.6rem); }
.rent-desc { max-width: 44ch; margin-top: 1.1rem; color: var(--muted); font-size: var(--fs-lede); line-height: 1.5; text-wrap: pretty; }
.is-sky .rent-desc { color: var(--muted-2); }

.rent-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.8rem; }
.rent-specs > div { padding: .75rem .9rem; border-radius: 10px; background: var(--sky); }
.is-sky .rent-specs > div { background: #fff; }
.rent-specs > .needs { padding: calc(.75rem - 2px) calc(.9rem - 2px); border: 2px dashed var(--field); background: transparent; }
.is-sky .rent-specs > .needs { background: transparent; }
.rent-specs dt {
  margin-bottom: .3rem;
  color: var(--muted);
  font: 500 .64rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.is-sky .rent-specs dt { color: var(--muted-2); }
.rent-specs dd { font-size: .98rem; font-weight: 700; line-height: 1.3; }
@media (min-width: 1300px) {
  .rent-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.rent-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.3rem 0 0; padding: 0; list-style: none; }
.rent-tags li { padding: .35rem .8rem; border: 1.5px solid var(--sky-line); border-radius: 999px; font-size: .88rem; font-weight: 600; }
.rent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.8rem; }
.rent-actions .add { margin-top: 0; }

/* What every rental includes (sun band) */
.incl { padding-block: var(--band); background: var(--sun); }
.incl .kicker { color: var(--cobalt-ink); }
.incl .display { max-width: 12ch; font-size: var(--fs-h2-side); }
.incl-grid { display: grid; gap: clamp(2.5rem, 5vw, 6rem); }
.incl-cols { display: grid; gap: 2.5rem; }
.incl-cols h3 {
  margin-bottom: 1rem;
  font: 600 .8rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.incl-cols .ticks { margin-top: 0; gap: .85rem; font-size: var(--fs-lede); }
.incl-cols .ticks li { font-weight: 600; }
.ticks.bring li::before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%23111936' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 70% no-repeat;
  box-shadow: inset 0 0 0 2px var(--ink);
}
@media (min-width: 700px) {
  .incl-cols { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 5rem); }
}
@media (min-width: 1024px) {
  .incl-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Compare table */
.compare { padding-block: var(--band); background: var(--paper); }
.table-wrap { margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); overflow-x: auto; }
.cmp { width: 100%; min-width: 60rem; border-collapse: collapse; }
.cmp caption { padding-bottom: 1.25rem; color: var(--muted); text-align: left; }
.cmp th, .cmp td { padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.cmp thead th {
  border-bottom: 2px solid var(--ink);
  color: var(--muted);
  font: 500 .7rem/1.3 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cmp th:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
.cmp tbody th { font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
.cmp tbody th a { color: inherit; text-decoration: underline; text-decoration-color: var(--sky-line); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.cmp tbody th a:hover { color: var(--cobalt); text-decoration-color: currentColor; }
.cmp td { color: var(--muted); font-size: .95rem; }
.cmp .num { color: var(--ink); font: 500 .8rem/1.3 var(--ff-mono); white-space: nowrap; }
.cmp .price { color: var(--red); font-family: var(--ff-display); font-size: 1.45rem; text-align: right; white-space: nowrap; }
.cmp thead th:last-child { text-align: right; }
.cmp tbody tr:hover > * { background: var(--sky); }
.cmp-note { margin-top: 1.75rem; color: var(--muted); font-weight: 600; }

/* Contact: the booking band opens the page */
.book-first { padding-top: calc(var(--head-h) + clamp(2rem, 5vw, 5rem)); }
.book-first h1 { font-weight: 400; }
.book-first h1 .hero-kicker { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.book-first h1 .inf { display: block; }

.notes { padding-block: var(--band); background: var(--sun); }
.notes .kicker { color: var(--cobalt-ink); }
.notes .lede { color: #2E3553; }
.note-grid { display: grid; gap: clamp(2rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3.5rem); margin: 0; padding: 0; list-style: none; }
.note { padding-top: 1.4rem; border-top: 2px solid var(--ink); }
.note-art { width: clamp(2.75rem, 3vw, 3.5rem); height: auto; aspect-ratio: 1; color: var(--ink); }
.note h3 { margin-top: 1rem; font: 800 clamp(1.3rem, .8vw + 1rem, 1.9rem)/1.15 var(--ff-body); letter-spacing: -.01em; }
.note p { margin-top: .6rem; color: #2E3553; }
.note a { color: var(--ink); font-weight: 700; }
@media (min-width: 640px) { .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .note-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Gallery: light page head, masonry wall, lightbox */
.page-head-light { padding: calc(var(--head-h) + clamp(2rem, 5vw, 5rem)) 0 clamp(2.5rem, 5vw, 5rem); background: var(--paper); }
.page-head-light .hero-kicker { color: var(--cobalt); }
.gh-title { font-weight: 400; container-type: inline-size; }
.gh-title .inf {
  display: block;
  color: var(--ink);
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 16vw, 30rem);
  font-size: 19cqi;
  line-height: .84;
  letter-spacing: -.015em;
}
.gh-title .inf .ln:last-child { color: var(--red); }
.gh-title .ln { display: block; }
.gh-row { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 4.5vw, 4.5rem); }
.gh-row .btn { justify-self: start; }
@media (min-width: 900px) {
  .gh-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 3rem; }
}

.gal-page { padding-bottom: var(--band); background: var(--paper); }
.masonry { columns: 1; column-gap: clamp(1rem, 1.6vw, 2rem); margin: 0; list-style: none; }
@media (min-width: 600px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
@media (min-width: 1800px) { .masonry { columns: 4; } }
.m-tile { margin-bottom: clamp(1rem, 1.6vw, 2rem); break-inside: avoid; }
.m-tile figure { margin: 0; }
.m-tile figcaption {
  margin-top: .7rem;
  color: var(--muted);
  font: 500 .7rem/1.35 var(--ff-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.gal-open { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-card); background: none; cursor: zoom-in; }
.gal-open .shot { display: block; }
.gal-open .shot img { transition: transform .8s var(--ease-out); }
.gal-open:hover .shot img { transform: scale(1.04); }
.gal-zoom {
  position: absolute;
  right: .9rem;
  bottom: .9rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  transition: transform .3s var(--ease-spring);
}
.gal-zoom svg { width: 1.1rem; height: 1.1rem; }
.gal-open:hover .gal-zoom { transform: rotate(90deg); }

.m-cta, .m-quote { padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: var(--r-card); }
.m-cta { background: var(--sun); }
.m-cta .m-art { width: 72%; height: auto; margin: 0 auto 1rem; --s1: #2346D8; --s2: #D5361F; --s3: #FFFFFF; }
.m-cta p.m-h { font-family: var(--ff-display); font-size: clamp(1.8rem, 2.4vw, 3rem); line-height: .95; }
.m-cta p:not(.m-h) { margin: .8rem 0 1.3rem; color: #2E3553; }
.m-quote { background: var(--cobalt); color: #fff; }
.m-quote .stars { color: var(--sun); }
.m-quote blockquote p { font: 700 clamp(1.3rem, 1.2vw + .9rem, 1.9rem)/1.3 var(--ff-body); letter-spacing: -.01em; }
.m-quote figcaption { margin-top: 1rem; color: var(--cobalt-soft); }
.m-quote figcaption strong { display: block; color: #fff; }

.lb {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(11, 17, 40, .95);
  color: #fff;
}
.lb::backdrop { background: transparent; }
.lb[open] { display: block; }
.lb-inner { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(4.5rem, 8vh, 6rem) clamp(1rem, 6vw, 7rem); }
.lb-fig { margin: 0; display: grid; justify-items: center; gap: 1rem; }
.lb-fig img { max-width: min(100%, 1500px); max-height: calc(100dvh - 12rem); border-radius: 14px; object-fit: contain; }
.lb-fig figcaption { color: var(--cobalt-soft); font: 500 .8rem/1.3 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; }
.lb-count { position: absolute; top: 1.5rem; left: clamp(1rem, 3vw, 2rem); color: var(--sun); font: 500 .8rem var(--ff-mono); }
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
  background: rgba(11, 17, 40, .5);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.lb-btn:hover { border-color: var(--sun); background: var(--sun); color: var(--ink); }
.lb-btn svg { width: 1.3rem; height: 1.3rem; }
.lb-close { top: 1rem; right: clamp(1rem, 3vw, 2rem); }
.lb-prev, .lb-next { top: 50%; translate: 0 -50%; }
.lb-prev { left: clamp(.5rem, 2vw, 2rem); }
.lb-prev svg { transform: rotate(180deg); }
.lb-next { right: clamp(.5rem, 2vw, 2rem); }
.lb :focus-visible { outline-color: var(--sun); }
@media (max-width: 699px) {
  .lb-prev, .lb-next { top: auto; bottom: 1.25rem; translate: none; }
}

/* Closing CTA band for pages without the booking form */
.cta-band { padding-block: var(--band); background: var(--cobalt); color: #fff; }
.cta-inner { display: grid; gap: 1.5rem; }
.cta-band .display { color: var(--sun); font-size: clamp(3rem, 8vw, 13rem); text-shadow: 0 .045em 0 var(--cobalt-ink); }
.cta-band .lede { max-width: 40ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: .5rem; }
.cta-band .btn-ghost { --btn-fg: #fff; }
.cta-band .btn-ghost:hover { --btn-bg: rgba(255, 255, 255, .12); }
@media (min-width: 1024px) {
  .cta-inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; column-gap: 4rem; }
  .cta-inner .display { grid-row: span 2; }
}

/* About */
.about-head { padding-bottom: 0; }
.ah-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.ah-copy { padding-bottom: clamp(1rem, 3vw, 3rem); }
.ah-copy .lede { margin-top: clamp(1.5rem, 3vw, 2.5rem); max-width: 36ch; }
.ah-art { margin: 0 calc(-1 * var(--edge)); }
.ah-art .shot { aspect-ratio: 4 / 5; border-radius: 0; }
@media (min-width: 1024px) {
  .ah-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 4vw, 6rem); align-items: end; }
  .ah-art { margin: 0 calc(-1 * var(--edge)) 0 0; }
  .ah-art .shot { border-radius: var(--r-card) 0 0 0; }
}
.about-more { margin-top: 1.5rem; }
.rev-sky { background: var(--sky); }
.rev-sky .quote figcaption { color: var(--muted-2); }

.story { padding-block: var(--band); background: var(--paper); }
.story-grid { display: grid; gap: clamp(2rem, 4vw, 4rem); }
.story .display { max-width: 13ch; font-size: var(--fs-h2-side); }
.story-lede { font: 700 clamp(1.45rem, 1.5vw + 1rem, 2.6rem)/1.25 var(--ff-body); letter-spacing: -.02em; text-wrap: pretty; }
.story-body > p:not(.story-lede) { max-width: 58ch; margin-top: 1.25rem; color: var(--muted); font-size: var(--fs-lede); }
.story-body .about-facts dt { color: var(--muted); }
@media (min-width: 1024px) {
  .story-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 7vw, 10rem); align-items: start; }
}

.values { padding-block: var(--band); background: var(--sky); }
.values .lede { color: var(--muted-2); }
.value-grid { display: grid; gap: clamp(2.5rem, 4vw, 4rem) clamp(2rem, 5vw, 7rem); margin: 0; padding: 0; list-style: none; }
.value { padding-top: 1.5rem; border-top: 2px dashed var(--sky-line); }
.value h3 { font: 800 clamp(1.6rem, 1.4vw + 1.1rem, 3rem)/1.05 var(--ff-body); letter-spacing: -.02em; }
.value p { max-width: 44ch; margin-top: .9rem; color: var(--muted-2); font-size: var(--fs-lede); }
@media (min-width: 800px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fleet { padding-block: var(--band); background: var(--paper); }
.fleet-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 70%);
  gap: clamp(1rem, 1.6vw, 2rem);
  margin: 0;
  padding: 0 var(--edge) .75rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
}
.fleet-row > li { scroll-snap-align: start; }
@media (min-width: 900px) {
  .fleet-row { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}
.fleet-tile { display: grid; gap: .35rem; color: var(--ink); text-decoration: none; }
.fleet-tile .shot { aspect-ratio: 1; margin-bottom: .75rem; }
.fleet-name { font: 800 clamp(1.2rem, .8vw + 1rem, 1.7rem)/1.15 var(--ff-body); }
.fleet-meta { color: var(--muted); font: 500 .7rem/1.4 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; }
.fleet-tile:hover .fleet-name { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
@media (hover: hover) {
  .fleet-tile:hover .shot-art { animation: art-bounce .7s var(--ease-out); }
}

/* Rental detail pages */
.rd-head { padding-bottom: clamp(3rem, 6vw, 6rem); }
.rd-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.rd-title .inf { font-size: var(--rd-size, 13cqi); text-wrap: balance; }
.rd-title .inf-vis { text-wrap: balance; }
.rd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.rd-price .amt { color: var(--sun); font-family: var(--ff-display); font-size: clamp(2.6rem, 3.6vw, 5rem); line-height: 1; text-shadow: 0 .045em 0 var(--cobalt-ink); }
.rd-price .per { max-width: 22ch; color: var(--cobalt-soft); font-weight: 600; line-height: 1.3; }
.rd-copy .lede { margin-top: 1.25rem; }
.rd-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.rd-chips li { padding: .4rem .75rem; border: 1.5px dashed rgba(255, 255, 255, .5); border-radius: 8px; font: 500 .74rem/1.35 var(--ff-mono); }
.rd-art { margin: 0 calc(-1 * var(--edge)); }
.rd-art .shot { --ph-a: #FFFFFF; --ph-b: #EEF3FF; aspect-ratio: 4 / 3; border-radius: 0; }
.rd-art .shot-art { inset: 12% 14% 20% 10%; width: 76%; height: 68%; }
.rd-dim-w, .rd-dim-h { position: absolute; z-index: 2; color: var(--ink); font: 500 .7rem/1.2 var(--ff-mono); letter-spacing: .03em; text-transform: uppercase; }
.rd-dim-w { left: 10%; right: 14%; bottom: 10%; height: 12px; border-inline: 2px solid currentColor; }
.rd-dim-w::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 2px solid currentColor; }
.rd-dim-w span { position: absolute; left: 50%; top: 100%; margin-top: .4rem; padding: .15rem .45rem; border-radius: 4px; background: #fff; white-space: nowrap; transform: translateX(-50%); }
.rd-dim-h { top: 12%; bottom: 20%; right: 6%; width: 12px; border-block: 2px solid currentColor; }
.rd-dim-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 5px; border-left: 2px solid currentColor; }
.rd-dim-h span { position: absolute; top: 50%; left: 50%; padding: .15rem .45rem; border-radius: 4px; background: #fff; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
@media (min-width: 1024px) {
  .rd-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: clamp(2rem, 4vw, 6rem); align-items: center; }
  .rd-art { margin: 0 calc(-1 * var(--edge)) 0 0; }
  .rd-art .shot { border-radius: var(--r-card) 0 0 var(--r-card); }
}

.on-dark .add, .on-cobalt .add { border-color: #fff; color: #fff; }
.on-dark .add .add-ic, .on-cobalt .add .add-ic { background: #fff; color: var(--ink); }
.on-dark .add:hover, .on-cobalt .add:hover { background: rgba(255, 255, 255, .12); }
.on-dark .add.is-added, .on-cobalt .add.is-added { border-color: var(--turf); background: var(--turf); }
.on-dark .add.is-added .add-ic, .on-cobalt .add.is-added .add-ic { color: var(--turf); }

.rd-body { padding-block: var(--band); background: var(--paper); }
.rd-layout { display: grid; gap: clamp(3rem, 5vw, 4rem); }
.rd-sec + .rd-sec { margin-top: clamp(4rem, 7vw, 7rem); }
.rd-h2 { max-width: 14ch; font-size: clamp(2.3rem, 3.6vw, 5rem); }
.rd-lede { max-width: 48ch; margin-top: 1.4rem; font: 600 clamp(1.15rem, .7vw + 1rem, 1.6rem)/1.45 var(--ff-body); text-wrap: pretty; }
.rd-feats { margin-top: 1.75rem; }
.rd-feats li { font-size: var(--fs-lede); }
.rd-plan { margin-top: 2rem; padding: clamp(1rem, 2vw, 1.75rem); border-radius: calc(var(--r-card) + 4px); background: var(--sky); }
.rd-plan-svg { width: 100%; height: auto; }
.rd-zone { fill: #4DB873; stroke: #111936; stroke-width: 2.5; stroke-dasharray: 10 8; }
.rd-foot { fill: var(--cobalt); }
.rd-foot-label { fill: #fff; font-family: var(--ff-mono); font-weight: 600; }
.rd-dim { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.rd-dim-label { fill: var(--ink); font: 500 15px var(--ff-mono); }
.rd-plan-key { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .75rem; color: var(--muted-2); font: 500 .68rem/1.3 var(--ff-mono); letter-spacing: .03em; text-transform: uppercase; }
.rd-plan-key span { display: inline-flex; align-items: center; gap: .45rem; }
.rd-plan-key i { display: inline-block; width: 1.1rem; height: .8rem; border-radius: 3px; }
.rd-plan-key .k-zone { border: 2px dashed var(--ink); background: #4DB873; }
.rd-sec .rent-specs { margin-top: 1.5rem; }
.rd-fit { margin-top: 1.25rem; }
.rd-notes { display: grid; gap: 1.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.rd-note { padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.rd-note h3 { font: 800 1.25rem/1.2 var(--ff-body); }
.rd-note p { margin-top: .45rem; color: var(--muted); }
@media (min-width: 700px) { .rd-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rd-card { display: grid; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2.25rem); border-radius: calc(var(--r-card) + 6px); background: var(--ink); color: #fff; }
.rd-card-type { color: var(--sun); font: 500 .72rem/1.3 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; }
.rd-card-name { font: 800 clamp(1.5rem, 1vw + 1.2rem, 2.1rem)/1.1 var(--ff-body); letter-spacing: -.015em; }
.rd-card-price { color: var(--cobalt-soft); font-weight: 600; }
.rd-card-price .amt { margin-right: .25rem; color: var(--sun); font-family: var(--ff-display); font-size: 2.6rem; line-height: 1; vertical-align: -.1em; }
.rd-card-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.rd-card-actions .add { margin-top: 0; }
.rd-card-ticks { display: grid; gap: .5rem; margin: .5rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .16); list-style: none; font-size: .95rem; }
.rd-card-ticks li { display: flex; align-items: flex-start; gap: .5rem; }
.rd-card-ticks svg { width: 1.15rem; height: 1.15rem; margin-top: .15em; color: var(--sun); }
.rd-card-tel { display: inline-block; padding-block: .3rem; color: #fff; font-weight: 700; }
.rd-card-tel:hover { color: var(--sun); }
@media (min-width: 1024px) {
  .rd-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 6vw, 8rem); align-items: start; }
}
@media (min-width: 1024px) and (min-height: 700px) {
  .rd-card { position: sticky; top: calc(var(--head-h) + 1.5rem); }
}
@media (max-width: 1023px) {
  .rd-aside { order: -1; }
}

.related { padding-block: var(--band); background: var(--sky); }
.related .lede { color: var(--muted-2); }
.rel-grid { display: grid; gap: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .rel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rel-link { display: grid; gap: .35rem; color: var(--ink); text-decoration: none; }
.rel-link .shot { --ph-a: #FFFFFF; --ph-b: #F2F6FF; aspect-ratio: 4 / 3; margin-bottom: .8rem; }
.rel-type { color: var(--muted-2); font: 500 .7rem/1.35 var(--ff-mono); letter-spacing: .04em; text-transform: uppercase; }
.rel-name { font: 800 clamp(1.3rem, .8vw + 1.05rem, 1.9rem)/1.1 var(--ff-body); }
.rel-price { color: var(--red-deep); font-family: var(--ff-display); font-size: 1.6rem; line-height: 1.1; }
.rel-price span { color: var(--muted-2); font-family: var(--ff-body); font-size: .85rem; font-weight: 600; }
.rel-link:hover .rel-name { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
@media (hover: hover) {
  .rel-link:hover .shot-art { animation: art-bounce .7s var(--ease-out); }
}

/* 21. Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .rv { opacity: 1; translate: none; }
  .inf .l, .inf.is-armed .l { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js .inf[data-inflate="load"]:not(.is-split) { opacity: 1; animation: none; }
  .unit:hover .shot-art { animation: none; }
  .js .ph-parade svg { animation: none; }
  .fleet-tile:hover .shot-art, .gal-open:hover .shot img, .rel-link:hover .shot-art { animation: none; transform: none; }
}