/* ==========================================================================
   Eastment's Caraclean
   Concept: "The part you never see." The roof is the tell.
   Lane: British caravanning enamel badge. Oxblood + chalk blue + ink navy,
         taken from Brian's own printed brand, not imposed.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Colour: Committed strategy. Oxblood carries the anchors. */
  --oxblood:      oklch(0.335 0.105 16);
  --oxblood-deep: oklch(0.225 0.076 16);
  --oxblood-lift: oklch(0.425 0.118 16);
  --chalk:        oklch(0.858 0.040 252);
  --chalk-deep:   oklch(0.788 0.052 252);
  --chalk-soft:   oklch(0.915 0.026 252);
  --paper:        oklch(0.974 0.006 252);
  --ink:          oklch(0.245 0.052 258);
  --ink-soft:     oklch(0.400 0.048 258);
  --enamel:       oklch(0.520 0.145 250);
  --white:        oklch(1 0 0);

  /* Ink on dark grounds */
  --on-dark:        oklch(0.985 0.006 252);
  --on-dark-soft:   oklch(0.855 0.030 252);

  /* Type */
  --display: 'Aleo', ui-serif, Georgia, serif;
  --body: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(0.86rem, 0.84rem + 0.10vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.34vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.32rem + 0.62vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.50rem + 1.20vw, 2.5rem);
  --step-4:  clamp(2.1rem, 1.68rem + 2.05vw, 3.4rem);
  --step-5:  clamp(2.5rem, 1.80rem + 3.40vw, 4.5rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.75rem;
  --sp-6: 4rem;
  --sp-7: clamp(4rem, 8vw, 7rem);
  --sp-8: clamp(5.5rem, 11vw, 10rem);

  --gutter: clamp(1.15rem, 4.5vw, 3rem);
  --measure: 66ch;
  --wide: 1220px;
  --narrow: 780px;

  --radius: 4px;
  --radius-lg: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 620ms;

  /* z-scale, semantic */
  --z-base: 0;
  --z-plate: 1;
  --z-sticky: 100;
  --z-nav: 200;
  --z-drawer: 300;
  --z-toast: 400;
}

/* ---------- Reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); line-height: 1.18; }
h4 { font-size: var(--step-1); line-height: 1.25; letter-spacing: -0.012em; }
p  { margin: 0; text-wrap: pretty; }

a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--enamel);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .band--oxblood :focus-visible { outline-color: var(--chalk); }

::selection { background: var(--oxblood); color: var(--white); }

.skip {
  position: absolute; left: var(--sp-3); top: -100px;
  background: var(--oxblood); color: var(--white);
  padding: 0.7rem 1.1rem; border-radius: var(--radius);
  z-index: var(--z-toast); font-weight: 600;
  transition: top 180ms var(--ease-out);
}
.skip:focus { top: var(--sp-3); }

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

/* ---------- Layout ---------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wide)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--narrow)); margin-inline: auto; }
.prose { max-width: var(--measure); }
.stack > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-5); }

.band { padding-block: var(--sp-7); position: relative; }
.band--tight { padding-block: var(--sp-6); }
.band--tall  { padding-block: var(--sp-8); }
.band--paper { background: var(--paper); }
.band--chalk { background: var(--chalk); }
.band--chalk-soft { background: var(--chalk-soft); }
.band--oxblood { background: var(--oxblood); color: var(--on-dark); }
.band--deep { background: var(--oxblood-deep); color: var(--on-dark); }
.band--oxblood h2, .band--deep h2, .band--oxblood h3, .band--deep h3 { color: var(--on-dark); }

/* Any light panel dropped inside a dark band must re-assert ink, or the
   near-white inherited colour lands on a near-white surface. */
.calc, .card, .season__item:not([data-now="true"]), .table-scroll, .form { color: var(--ink); }

/* The roof seam: a structural full-bleed band transition, echoing the
   aluminium trim strip that runs the length of every caravan roof. */
.seam {
  height: 7px;
  background:
    linear-gradient(to bottom,
      var(--chalk-deep) 0 2px,
      transparent 2px 5px,
      var(--chalk-deep) 5px 7px);
}
.band--oxblood + .seam, .band--deep + .seam { background:
    linear-gradient(to bottom,
      var(--oxblood-lift) 0 2px,
      transparent 2px 5px,
      var(--oxblood-lift) 5px 7px); }

/* ---------- Type helpers ---------- */
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }
.band--oxblood .lede, .band--deep .lede { color: var(--on-dark-soft); }
.small { font-size: var(--step--1); }
.muted { color: var(--ink-soft); }
.band--oxblood .muted, .band--deep .muted { color: var(--on-dark-soft); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* A single named brand device, used sparingly: the plate label.
   Not a tracked-uppercase eyebrow, and never repeated section on section. */
.plate-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 700;
  font-size: var(--step--1);
  padding: 0.3rem 0.7rem;
  background: var(--oxblood); color: var(--white);
  border-radius: 3px;
}
.band--oxblood .plate-label, .band--deep .plate-label {
  background: var(--chalk); color: var(--oxblood-deep);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 52px; padding: 0.8rem 1.5rem;
  font-family: var(--body); font-weight: 600; font-size: var(--step-0);
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft),
              border-color 220ms var(--ease-soft), transform 220ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--oxblood); color: var(--white); }
.btn--primary:hover { background: var(--oxblood-lift); }
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in oklch, var(--ink) 30%, transparent); }
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); }
/* Dark grounds: the hero and the trust strip are dark too, not just bands. */
.band--oxblood .btn--primary, .band--deep .btn--primary, .hero .btn--primary { background: var(--chalk); color: var(--oxblood-deep); }
.band--oxblood .btn--primary:hover, .band--deep .btn--primary:hover, .hero .btn--primary:hover { background: var(--white); }
.band--oxblood .btn--ghost, .band--deep .btn--ghost, .hero .btn--ghost { color: var(--on-dark); border-color: color-mix(in oklch, var(--chalk) 55%, transparent); }
.band--oxblood .btn--ghost:hover, .band--deep .btn--ghost:hover, .hero .btn--ghost:hover { border-color: var(--chalk); background: color-mix(in oklch, var(--chalk) 14%, transparent); }
/* ...but a light panel inside a dark band gets the light-ground buttons back. */
.calc .btn--primary { background: var(--oxblood); color: var(--white); }
.calc .btn--primary:hover { background: var(--oxblood-lift); }
.calc .btn--ghost { color: var(--ink); border-color: color-mix(in oklch, var(--ink) 32%, transparent); }
.calc .btn--ghost:hover { border-color: var(--ink); background: color-mix(in oklch, var(--ink) 7%, transparent); }
.btn--wide { width: 100%; }
.btn svg { flex: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 600; text-decoration: none;
  border-bottom: 2px solid color-mix(in oklch, currentColor 35%, transparent);
  padding-bottom: 2px;
  transition: border-color 200ms var(--ease-soft), gap 200ms var(--ease-out);
}
.link-arrow:hover { border-color: currentColor; gap: 0.65rem; }

/* ---------- Logo ---------- */
/* Brian's mark is a caravan silhouette with the name set into the body.
   That lockup only reads at size, so the bar uses the horizontal variant:
   caravan mark plus the name in live text beside it. Same mark, legible small. */
.badge { display: block; height: auto; }
.badge .body-fill { fill: var(--oxblood); }
.badge .word { fill: var(--chalk); }
.on-dark .badge .body-fill { fill: var(--chalk); }
.on-dark .badge .word { fill: var(--oxblood-deep); }

.lockup { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--oxblood); }
.lockup .mark { width: 46px; height: auto; flex: none; }
.lockup__text {
  display: grid; font-family: var(--display); font-weight: 700;
  font-size: 0.98rem; line-height: 1.02; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--ink);
}
.lockup__text span:last-child { color: var(--oxblood); }
.on-dark .lockup { color: var(--chalk); }
.on-dark .lockup__text { color: var(--white); }
.on-dark .lockup__text span:last-child { color: var(--chalk); }
@media (min-width: 480px) { .lockup .mark { width: 54px; } .lockup__text { font-size: 1.12rem; } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
.nav__inner {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 68px; padding-block: 0.6rem;
}
.nav__brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; margin-right: auto; }
.nav__brand svg { width: 132px; }
.nav__list { display: none; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.nav__list a {
  text-decoration: none; font-weight: 500; font-size: 0.95rem;
  padding: 0.4rem 0; position: relative; white-space: nowrap;
}
.nav__list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--oxblood); transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--ease-out);
}
.nav__list a:hover::after, .nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__cta { display: none; }
.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 46px; padding: 0 0.9rem;
  background: var(--oxblood); color: var(--white);
  border: 0; border-radius: var(--radius); font-weight: 600; cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 3px; width: 17px; }
.nav__toggle-bars span { height: 2px; background: currentColor; border-radius: 2px; transition: transform 260ms var(--ease-out), opacity 180ms linear; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav__drawer {
  position: fixed; inset: 68px 0 auto 0; z-index: var(--z-drawer);
  background: var(--oxblood); color: var(--on-dark);
  padding: var(--sp-3) var(--gutter) var(--sp-5);
  transform: translateY(-102%); visibility: hidden;
  transition: transform 380ms var(--ease-out), visibility 0s linear 380ms;
  max-height: calc(100dvh - 68px); overflow-y: auto;
}
.nav__drawer[data-open="true"] { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.nav__drawer a {
  display: block; text-decoration: none; font-family: var(--display); font-weight: 700;
  font-size: var(--step-2); padding: 0.62rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--chalk) 22%, transparent);
}
.nav__drawer .btn { margin-top: var(--sp-3); }
.nav__scrim {
  position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1);
  background: color-mix(in oklch, var(--ink) 45%, transparent);
  opacity: 0; visibility: hidden; transition: opacity 300ms linear, visibility 0s linear 300ms;
}
.nav__scrim[data-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

@media (min-width: 960px) {
  .nav__list { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .nav__drawer, .nav__scrim { display: none; }
}

/* ---------- Photo plate ---------- */
/* Images are mounted like a screwed-on enamel plate: hairline frame,
   a small oxblood tab bottom-left carrying the caption. */
.plate { position: relative; background: var(--chalk-deep); border-radius: var(--radius-lg); overflow: hidden; }
/* <picture> is an inline box with auto height, so a percentage height on the
   img resolves to auto and landscape photos stop short of a fixed-ratio
   plate. Pin the picture to the plate so object-fit always has a box. */
.plate > picture { position: absolute; inset: 0; display: block; }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: var(--radius-lg);
}
.plate--tall { aspect-ratio: 3 / 4; }
.plate--wide { aspect-ratio: 4 / 3; }
.plate--squat { aspect-ratio: 16 / 11; }

.plate-cap {
  position: absolute; left: 0; bottom: 0; z-index: var(--z-plate);
  background: var(--oxblood); color: var(--white);
  font-size: 0.82rem; font-weight: 600; line-height: 1.35;
  padding: 0.5rem 0.85rem;
  border-radius: 0 var(--radius) 0 var(--radius-lg);
  max-width: min(88%, 34ch);
}

/* ---------- Wash reveal (signature: arrival) ---------- */
/* Dirty roof canvas over the clean one; brush the dirt off, it heals back.
   Both layers are the verified Unicorn pair. See initWash in site.js. */
.wash { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--chalk-deep); aspect-ratio: 3 / 4; touch-action: pan-y; }
.wash::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: var(--radius-lg);
}
.wash__clean { position: absolute; inset: 0; z-index: 0; }
.wash__clean img { width: 100%; height: 100%; object-fit: cover; }
.wash__dirty { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* source only, drawn to canvas */
.wash__canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; cursor: crosshair; }
.wash--static .wash__canvas { display: none; } /* reduced motion: clean image shows plainly */
.wash__hint {
  position: absolute; left: 50%; top: 0.9rem; transform: translateX(-50%);
  z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.8rem; border-radius: 100px;
  background: color-mix(in oklch, var(--oxblood-deep) 82%, transparent);
  color: var(--on-dark); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
  backdrop-filter: blur(4px);
  transition: opacity 400ms var(--ease-soft);
}
.wash.is-brushed .wash__hint { opacity: 0; }
.wash--static .wash__hint { display: none; }
.wash__hint svg { width: 15px; height: 15px; fill: var(--chalk); }
.wash__cap {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--oxblood); color: var(--white);
  font-size: 0.82rem; font-weight: 600; line-height: 1.35;
  padding: 0.5rem 0.85rem; border-radius: 0 var(--radius) 0 var(--radius-lg);
  max-width: min(80%, 30ch);
}

/* ---------- Water beads (signature: ceramic-foam accent) ---------- */
/* His hydrophobic selling point made literal. Droplets bead on the ceramic
   panel; when it scrolls in, some sheet off (run down and fade), the way water
   behaves on a coated roof. Pure transform/opacity, decorative, aria-hidden.
   Droplets are placed by initBeads in site.js so they never clip the caption. */
.beads { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: var(--radius-lg); }
.bead {
  position: absolute; border-radius: 50%;
  background:
    radial-gradient(50% 45% at 36% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.12) 50%, transparent 62%),
    radial-gradient(130% 130% at 62% 80%, rgba(20,30,45,0.14), transparent 58%);
  box-shadow: inset 0 -1px 2px rgba(255,255,255,0.45), inset 0 1px 1px rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.22);
  backdrop-filter: blur(0.4px) brightness(1.03);
  opacity: 0; transform: scale(0.4);
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-out);
  transition-delay: calc(var(--bd, 0) * 1ms);
}
.beads.is-wet .bead { opacity: 0.9; transform: scale(1); }
.beads.is-wet .bead[data-run] {
  animation: bead-run 1500ms var(--ease-soft) forwards;
  animation-delay: calc(1100ms + var(--bd, 0) * 1ms);
}
@keyframes bead-run {
  0% { opacity: 0.9; }
  100% { transform: translateY(var(--run, 60px)) scale(0.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .beads { display: none; }
}

/* ---------- Hero ---------- */
.hero { background: var(--oxblood); color: var(--on-dark); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% 0%, color-mix(in oklch, var(--oxblood-lift) 70%, transparent), transparent 62%);
  pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; gap: var(--sp-5);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem);
}
.hero__title { font-size: var(--step-5); color: var(--white); }
.hero__title em { font-style: normal; color: var(--chalk); }
.hero__sub { font-size: var(--step-1); line-height: 1.5; color: var(--on-dark-soft); max-width: 42ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__actions .btn { flex: 1 1 auto; min-width: 180px; }
.hero__figure { position: relative; }
.hero__figure .plate { aspect-ratio: 3 / 4; }
.hero__pill {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--step--1); font-weight: 600; color: var(--on-dark-soft);
}
.hero__pill b { color: var(--white); font-weight: 700; }
.hero__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--chalk); flex: none; }

@media (min-width: 900px) {
  .hero__inner { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(2rem, 5vw, 4.5rem); }
  .hero__figure .plate { aspect-ratio: 4 / 5; }
}

/* ---------- Trust strip ---------- */
.trust { background: var(--oxblood-deep); color: var(--on-dark); }
.trust ul {
  display: grid; gap: var(--sp-2) var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  padding-block: var(--sp-3);
}
.trust li { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.94rem; line-height: 1.4; }
.trust li b { font-weight: 700; color: var(--white); }
.trust svg { flex: none; width: 15px; height: 15px; fill: var(--chalk); transform: translateY(2px); }

/* ---------- Two-column feature ---------- */
.feature { display: grid; gap: var(--sp-5); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); }
  .feature--flip .feature__media { order: -1; }
  .feature--wide-media { grid-template-columns: 1.15fr 0.85fr; }
}
.feature__body > * + * { margin-top: var(--sp-3); }

/* ---------- Spec list (what's included) ---------- */
.spec { display: grid; gap: 0; }
.spec li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start;
  padding: 0.72rem 0;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
}
.band--oxblood .spec li, .band--deep .spec li { border-color: color-mix(in oklch, var(--chalk) 25%, transparent); }
.spec li:first-child { border-top: 1px solid color-mix(in oklch, var(--ink) 14%, transparent); }
.band--oxblood .spec li:first-child, .band--deep .spec li:first-child { border-top-color: color-mix(in oklch, var(--chalk) 25%, transparent); }
.spec svg { width: 18px; height: 18px; fill: var(--oxblood); transform: translateY(4px); }
.band--oxblood .spec svg, .band--deep .spec svg { fill: var(--chalk); }
.spec b { font-weight: 600; }

/* ---------- Cards (used only where a card is genuinely right) ---------- */
.cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid color-mix(in oklch, var(--ink) 15%, transparent);
  border-radius: var(--radius-lg); overflow: hidden; text-decoration: none;
  transition: border-color 240ms var(--ease-soft), transform 300ms var(--ease-out);
}
a.card:hover { border-color: var(--oxblood); transform: translateY(-3px); }
.card__media { aspect-ratio: 4 / 3; background: var(--chalk-deep); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
a.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__price { margin-top: auto; padding-top: 0.6rem; font-family: var(--display); font-weight: 700; color: var(--oxblood); font-size: var(--step-1); }
.card__price small { font-family: var(--body); font-weight: 500; color: var(--ink-soft); font-size: 0.8rem; display: block; letter-spacing: 0; }

/* ---------- Process (a real numbered sequence, so numbers are earned) ---------- */
.process { counter-reset: step; display: grid; gap: var(--sp-2); }
.process li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid color-mix(in oklch, var(--chalk) 28%, transparent);
}
.process li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  color: var(--oxblood); line-height: 1;
}
.band--oxblood .process li::before, .band--deep .process li::before { color: var(--chalk); }
.band--paper .process li, .band--chalk .process li { border-bottom-color: color-mix(in oklch, var(--ink) 14%, transparent); }
.process h4 { margin-bottom: 0.2rem; }

/* ---------- Quote calculator ---------- */
.calc {
  background: var(--paper);
  border: 2px solid var(--oxblood);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px -30px color-mix(in oklch, var(--ink) 60%, transparent);
}
.calc__head { background: var(--oxblood); color: var(--white); padding: var(--sp-3) var(--sp-4); }
.calc__head h3 { color: var(--white); }
.calc__head p { color: var(--on-dark-soft); font-size: var(--step--1); margin-top: 0.3rem; }
.calc__body { padding: var(--sp-4); display: grid; gap: var(--sp-4); }

.field > legend, .field > .field__label {
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  margin-bottom: var(--sp-2); padding: 0; display: block;
}
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field__hint { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.5rem; }

.opts { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt span {
  display: flex; flex-direction: column; gap: 0.15rem; justify-content: center;
  min-height: 62px; padding: 0.65rem 0.85rem;
  background: var(--white);
  border: 2px solid color-mix(in oklch, var(--ink) 20%, transparent);
  border-radius: var(--radius); font-weight: 600; line-height: 1.3;
  transition: border-color 180ms var(--ease-soft), background 180ms var(--ease-soft), color 180ms var(--ease-soft);
}
.opt small { font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); }
.opt input:hover + span { border-color: color-mix(in oklch, var(--oxblood) 55%, transparent); }
.opt input:checked + span { background: var(--oxblood); border-color: var(--oxblood); color: var(--white); }
.opt input:checked + span small { color: var(--chalk); }
.opt input:focus-visible + span { outline: 3px solid var(--enamel); outline-offset: 2px; }

.calc__out {
  background: var(--chalk); border-top: 2px solid var(--oxblood);
  padding: var(--sp-4);
  display: grid; gap: var(--sp-3);
}
.calc__figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }
.calc__from { font-family: var(--display); font-weight: 700; font-size: var(--step-1); color: var(--ink-soft); }
.calc__price {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(3rem, 9vw, 4.6rem); line-height: 0.92;
  color: var(--oxblood); letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  position: relative; display: inline-block;
}
.calc__price[data-poa="true"] { font-size: clamp(1.8rem, 5vw, 2.6rem); letter-spacing: -0.02em; }
/* Reward moment: a wax-gloss highlight sweeps the figure once when it changes,
   like sun on a freshly waxed panel. Mechanic banked from 21st hover-glare-card;
   here it is a background-clip gloss band panned across the glyphs (so it reads
   as light ON the number, not a rectangle over it). One shot, then it rests. */
.calc__price.is-waxed {
  background-image: linear-gradient(105deg,
    transparent 38%,
    color-mix(in oklch, var(--oxblood-lift) 55%, white) 47%,
    white 50%,
    color-mix(in oklch, var(--oxblood-lift) 55%, white) 53%,
    transparent 62%);
  background-size: 260% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: var(--oxblood);
  animation: wax-sweep 900ms var(--ease-soft) 1;
}
@keyframes wax-sweep {
  from { background-position: 150% 0; }
  to { background-position: -110% 0; }
}
@media (prefers-reduced-motion: reduce) { .calc__price.is-waxed { animation: none; background: none; -webkit-text-fill-color: currentColor; } }
.calc__meta { font-size: var(--step--1); color: var(--ink-soft); }
.calc__meta strong { color: var(--ink); }
.calc__incl { display: grid; gap: 0.3rem; font-size: 0.9rem; }
.calc__incl li { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
.calc__incl svg { width: 15px; height: 15px; fill: var(--oxblood); transform: translateY(4px); }
.calc__actions { display: grid; gap: 0.6rem; }
@media (min-width: 560px) { .calc__actions { grid-template-columns: 1fr 1fr; } }

/* ---------- Price table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent); }
table.prices { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--paper); }
table.prices caption { text-align: left; padding: var(--sp-3); font-weight: 600; color: var(--ink-soft); font-size: var(--step--1); }
table.prices th, table.prices td { padding: 0.85rem 1rem; text-align: right; border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); }
table.prices th:first-child, table.prices td:first-child { text-align: left; }
table.prices thead th { background: var(--oxblood); color: var(--white); font-weight: 600; font-size: 0.9rem; border-bottom: 0; }
table.prices tbody th { font-weight: 600; }
table.prices tbody tr:last-child th, table.prices tbody tr:last-child td { border-bottom: 0; }
table.prices tbody tr:nth-child(even) { background: color-mix(in oklch, var(--chalk) 30%, transparent); }
table.prices td { font-variant-numeric: tabular-nums; font-weight: 600; }
table.prices td.highlight { color: var(--oxblood); }
table.prices small { display: block; font-weight: 400; color: var(--ink-soft); font-size: 0.78rem; }

/* Below 620px the four column table becomes one block per vehicle, so the
   most important content on the site never needs a sideways swipe. */
@media (max-width: 619px) {
  .table-scroll { overflow: visible; border: 0; border-radius: 0; }
  table.prices { display: block; min-width: 0; background: transparent; }
  /* display:block on the table leaves table-caption shrink-to-fit, which
     wraps the caption one word per line. Make it a block too. */
  table.prices caption { display: block; width: 100%; padding: 0 0 var(--sp-3); }
  table.prices thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.prices tbody { display: grid; gap: var(--sp-2); }
  table.prices tbody tr, table.prices tbody tr:nth-child(even) {
    display: block; background: var(--paper);
    border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
    border-radius: var(--radius); padding: var(--sp-3);
  }
  table.prices tbody th {
    display: block; text-align: left; border: 0; padding: 0 0 0.6rem;
    font-family: var(--display); font-size: var(--step-1); line-height: 1.2;
  }
  table.prices tbody td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border: 0; padding: 0.4rem 0; text-align: right;
    border-top: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  }
  table.prices tbody td::before {
    content: attr(data-label); text-align: left;
    font-weight: 500; color: var(--ink-soft); font-size: 0.9rem;
  }
}

/* ---------- Before and after ---------- */
/* Only ever used on VERIFIED same-vehicle pairs. The slider clips the before
   layer with clip-path so both photographs stay pinned to the same box and
   nothing can drift out of alignment. The clip is on the layer, never on an
   element an IntersectionObserver is watching, so it cannot stall a reveal. */
.ba { margin: 0; display: grid; gap: var(--sp-2); }
.ba__frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--chalk-deep);
  aspect-ratio: 3 / 4;
  cursor: ew-resize; user-select: none;
  touch-action: pan-y;  /* vertical scrolling still works on a phone */
}
.ba__frame::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: var(--radius-lg);
}
/* Layers ignore the pointer so the frame receives every event itself. Without
   this, dragging starts a native image drag, the browser fires pointercancel
   and the slider stops dead after one move. */
.ba__layer { position: absolute; inset: 0; pointer-events: none; }
.ba__layer picture { position: absolute; inset: 0; display: block; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.ba__layer--before { clip-path: inset(0 calc(100% - var(--ba-pos, 50%)) 0 0); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%);
  width: 3px; margin-left: -1.5px; background: var(--white);
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--ink) 35%, transparent);
  pointer-events: none;
}
.ba__grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--white); box-shadow: 0 2px 10px -2px color-mix(in oklch, var(--ink) 60%, transparent);
  display: grid; place-items: center;
}
.ba__grip::before, .ba__grip::after {
  content: ''; position: absolute; width: 0; height: 0;
  border-block: 5px solid transparent;
}
.ba__grip::before { border-right: 7px solid var(--oxblood); left: 8px; }
.ba__grip::after { border-left: 7px solid var(--oxblood); right: 8px; }
.ba__tag {
  position: absolute; top: 0.7rem; z-index: var(--z-plate);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em;
  padding: 0.28rem 0.6rem; border-radius: 3px;
  background: var(--oxblood); color: var(--white);
}
.ba__tag--b { left: 0.7rem; }
.ba__tag--a { right: 0.7rem; background: var(--white); color: var(--oxblood-deep); }
.ba__range {
  width: 100%; margin: 0; cursor: ew-resize; accent-color: var(--oxblood);
  min-height: 44px;
}
.ba figcaption { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.band--oxblood .ba figcaption, .band--deep .ba figcaption { color: var(--on-dark-soft); }

/* Side by side, for real pairs whose framing does not line up well enough
   for a slider. Each photograph stands on its own, nothing is implied. */
.bapair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bapair figure { margin: 0; }
.bapair .plate { aspect-ratio: 3 / 4; }
.bapair figcaption {
  margin-top: 0.45rem; font-size: 0.78rem; font-weight: 700;
  color: var(--oxblood);
}
.band--oxblood .bapair figcaption, .band--deep .bapair figcaption { color: var(--chalk); }
.bapair--wide .plate { aspect-ratio: 4 / 3; }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.gallery figure { margin: 0; }
.gallery .plate { aspect-ratio: 3 / 4; }
.gallery figcaption { margin-top: 0.5rem; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.4; }
.band--oxblood .gallery figcaption, .band--deep .gallery figcaption { color: var(--on-dark-soft); }

/* ---------- Season ---------- */
.season { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.season__item {
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  background: color-mix(in oklch, var(--chalk) 45%, var(--paper));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.season__item[data-now="true"] { background: var(--oxblood); color: var(--on-dark); border-color: var(--oxblood); }
.season__item[data-now="true"] h3 { color: var(--white); }
.season__when { font-family: var(--display); font-weight: 700; font-size: var(--step--1); color: var(--oxblood); }
.season__item[data-now="true"] .season__when { color: var(--chalk); }
.season__item[data-now="true"] .muted { color: var(--on-dark-soft); }

/* ---------- Exclusions ---------- */
/* Light ground is the default; dark bands opt in to the inverse. */
.excl { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.excl li {
  display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: start;
  padding: var(--sp-3);
  border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
  border-radius: var(--radius);
  background: color-mix(in oklch, var(--paper) 72%, transparent);
  color: var(--ink);
}
.excl svg { width: 18px; height: 18px; fill: var(--oxblood); transform: translateY(3px); }
.band--oxblood .excl li, .band--deep .excl li {
  border-color: color-mix(in oklch, var(--chalk) 30%, transparent);
  background: color-mix(in oklch, var(--oxblood-lift) 26%, transparent);
  color: var(--on-dark);
}
.band--oxblood .excl svg, .band--deep .excl svg { fill: var(--chalk); }

/* ---------- To-be-confirmed marker ---------- */
/* Visible on purpose: these are facts only Brian can supply. */
.tbc {
  display: inline; border-bottom: 2px dotted var(--oxblood);
  background: color-mix(in oklch, var(--oxblood) 9%, transparent);
  padding: 0.1em 0.3em; border-radius: 2px; font-style: italic;
}
.tbc::before { content: 'To confirm: '; font-style: normal; font-weight: 700; color: var(--oxblood); }
.band--oxblood .tbc, .band--deep .tbc {
  border-bottom-color: var(--chalk); background: color-mix(in oklch, var(--chalk) 16%, transparent);
}
.band--oxblood .tbc::before, .band--deep .tbc::before { color: var(--chalk); }

/* ---------- Areas ---------- */
.areas { display: grid; gap: var(--sp-4); }
@media (min-width: 880px) { .areas { grid-template-columns: 0.95fr 1.05fr; align-items: start; } }
.areas__list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.areas__list h4 { margin-bottom: 0.3rem; }
.areas__list p { font-size: 0.93rem; color: var(--ink-soft); line-height: 1.55; }
.band--oxblood .areas__list p, .band--deep .areas__list p { color: var(--on-dark-soft); }
.map-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--ink) 20%, transparent);
  background: var(--chalk-deep);
}
.map-frame img { width: 100%; height: auto; display: block; }

/* ---------- Review block ---------- */
.review-figure { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.review-figure__stat { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 8vw, 4.4rem); line-height: 0.9; color: var(--white); letter-spacing: -0.03em; }
.stars { display: flex; gap: 3px; }
.stars svg { width: 20px; height: 20px; fill: var(--chalk); }

/* ---------- Form ---------- */
.form { display: grid; gap: var(--sp-3); }
.form__row { display: grid; gap: var(--sp-3); }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: 0.7rem 0.9rem;
  font: inherit; color: var(--ink);
  background: var(--white);
  border: 2px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: var(--radius);
  transition: border-color 180ms var(--ease-soft);
}
.form textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.form input::placeholder, .form textarea::placeholder { color: oklch(0.48 0.03 258); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: color-mix(in oklch, var(--ink) 40%, transparent); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--oxblood); outline: 3px solid color-mix(in oklch, var(--enamel) 45%, transparent); outline-offset: 1px; }
.form .req { color: var(--oxblood); }
.form__note { font-size: var(--step--1); color: var(--ink-soft); }
.form__error { color: var(--oxblood); font-size: 0.86rem; font-weight: 600; margin-top: 0.3rem; display: none; }
.form [aria-invalid="true"] { border-color: var(--oxblood); }
.form [aria-invalid="true"] ~ .form__error { display: block; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; }
.faq details {
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
}
.faq details:first-child { border-top: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--sp-3) 2.5rem var(--sp-3) 0;
  font-family: var(--display); font-weight: 700; font-size: var(--step-1);
  position: relative; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--oxblood); border-bottom: 2px solid var(--oxblood);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 260ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .faq__a { padding-bottom: var(--sp-3); max-width: var(--measure); color: var(--ink-soft); }
.faq .faq__a > * + * { margin-top: var(--sp-2); }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; }
.cta-band .btn { min-width: 220px; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-4); }

/* ---------- Footer ---------- */
.footer { background: var(--oxblood-deep); color: var(--on-dark); padding-block: var(--sp-6) var(--sp-4); }
.footer__grid { display: grid; gap: var(--sp-5); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-4); } }
.footer h4 { font-size: 1rem; margin-bottom: var(--sp-2); color: var(--white); }
.footer a { text-decoration: none; }
.footer nav a, .footer__contact a { display: inline-block; padding: 0.28rem 0; color: var(--on-dark-soft); border-bottom: 1px solid transparent; }
.footer nav a:hover, .footer__contact a:hover { color: var(--white); border-bottom-color: var(--chalk); }
.footer__brand svg { width: 168px; margin-bottom: var(--sp-3); }
.footer__legal {
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid color-mix(in oklch, var(--chalk) 22%, transparent);
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  justify-content: space-between; align-items: center;
  font-size: 0.84rem; color: var(--on-dark-soft);
}
.footer__legal a { color: var(--chalk); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal a:hover { color: var(--white); }

/* ==========================================================================
   Scheduling demo (/book and /desk). Phone-first.
   ========================================================================== */
.tool { max-width: 760px; margin-inline: auto; }
.tool--wide { max-width: 900px; }

/* Compact header for /book and /desk, so the calendar sits near the top on a
   phone instead of below a full marketing hero. */
.tool-head { padding-block: var(--sp-5) var(--sp-4); }
.tool-head h1 { font-size: var(--step-3); color: var(--white); }
.tool-head .lede { color: var(--on-dark-soft); margin-top: 0.4rem; }

/* These are tools, not marketing pages: the sticky Call/WhatsApp bar does not
   belong here and would cover the controls. */
body:has(.tool) .callbar { display: none; }
@media (max-width: 959px) { body:has(.tool).has-callbar { padding-bottom: 0; } }

.demo-note {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: color-mix(in oklch, var(--oxblood) 10%, var(--paper));
  border: 1px solid color-mix(in oklch, var(--oxblood) 30%, transparent);
  border-radius: var(--radius-lg); padding: var(--sp-3);
  font-size: 0.92rem; line-height: 1.5; color: var(--ink);
  margin-bottom: var(--sp-5);
}
.demo-note b { color: var(--oxblood); }
.demo-note svg { flex: none; width: 20px; height: 20px; fill: var(--oxblood); margin-top: 2px; }

/* ---- calendar shell ---- */
.cal { background: var(--paper); border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); border-radius: var(--radius-lg); overflow: hidden; }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-3); background: var(--oxblood); color: var(--white); }
.cal__title { color: var(--white); font-size: var(--step-2); margin: 0; }
.cal__nav { width: 40px; height: 40px; border: 0; border-radius: var(--radius); background: color-mix(in oklch, var(--white) 18%, transparent); color: var(--white); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cal__nav:hover { background: color-mix(in oklch, var(--white) 30%, transparent); }
.cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--oxblood-deep); color: var(--on-dark-soft); }
.cal__dow span { text-align: center; padding: 0.4rem 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: color-mix(in oklch, var(--ink) 12%, transparent); padding: 2px; }

.cal__cell {
  display: flex; flex-direction: column; gap: 2px; align-items: stretch;
  min-height: 62px; padding: 5px 5px 6px; border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); text-align: left; font: inherit;
  transition: filter 140ms var(--ease-soft);
}
.cal__cell:hover:not(:disabled) { filter: brightness(0.96); }
.cal__num { font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; gap: 4px; }
.cal__lab {
  font-size: 0.66rem; line-height: 1.12; font-weight: 600; opacity: 0.9; margin-top: auto;
  /* wrap long labels (Motorhome, Horse box) to two lines instead of clipping */
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word;
}
.cal__cell.is-out { visibility: hidden; }
.cal__cell.is-today { box-shadow: inset 0 0 0 2px var(--enamel); }
.cal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--enamel); flex: none; }

/* desk day types */
.t-blank { background: var(--paper); color: var(--ink-soft); }
.t-work  { background: oklch(0.90 0.10 150); color: oklch(0.30 0.08 150); }   /* open, green */
.t-part  { background: oklch(0.86 0.10 75); color: oklch(0.34 0.09 75); }     /* 1 booked, amber */
.t-full  { background: var(--oxblood); color: var(--white); }                 /* full */
.t-off   { background: var(--chalk); color: var(--ink); }
.t-hol   { background: oklch(0.55 0.16 300); color: var(--white); }           /* away, purple */
.has-pending .cal__num { color: inherit; }

.cal__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: var(--sp-3); font-size: 0.8rem; }
.cal__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.sw { width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent); }
.sw--work { background: oklch(0.90 0.10 150); } .sw--part { background: oklch(0.86 0.10 75); }
.sw--full { background: var(--oxblood); } .sw--off { background: var(--chalk); }
.sw--hol { background: oklch(0.55 0.16 300); } .sw--pending { background: var(--enamel); }
.sw--open { background: oklch(0.90 0.10 150); } .sw--near { background: oklch(0.86 0.10 75); }
.sw--no { background: color-mix(in oklch, var(--ink) 12%, var(--paper)); }

/* desk bar (radius + reset) */
.deskbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; margin-top: var(--sp-4); }
.deskbar__radius { flex: 1 1 320px; }
.deskbar__radius label { display: block; font-size: 0.95rem; margin-bottom: 0.35rem; }
.deskbar__radius label .muted { font-weight: 600; }
.deskbar__radius input { width: 100%; accent-color: var(--oxblood); min-height: 44px; }
.deskbar__hint { font-size: 0.8rem; color: var(--ink-soft); margin: 0.3rem 0 0; }
.btn--sm { min-height: 40px; padding: 0.4rem 0.9rem; font-size: 0.9rem; }

/* vehicle badges */
.veh { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 100px; font-size: 0.74rem; font-weight: 700; color: var(--white); white-space: nowrap; }
.veh--tourer { background: oklch(0.55 0.11 250); }
.veh--static { background: oklch(0.55 0.14 300); }
.veh--horsebox { background: oklch(0.5 0.08 180); }
.veh--motorhome { background: var(--oxblood); }

/* ---- editor sheet ---- */
.sheet { position: fixed; inset: 0; z-index: var(--z-modal, 500); display: flex; align-items: flex-end; justify-content: center; }
/* A CSS display value beats the `hidden` attribute, so the overlay would stay
   on top and eat every click. Re-assert none when hidden. */
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: color-mix(in oklch, var(--ink) 55%, transparent); opacity: 0; transition: opacity 240ms var(--ease-soft); }
.sheet.is-open .sheet__scrim { opacity: 1; }
.sheet__panel {
  position: relative; width: min(560px, 100%); max-height: 88dvh; overflow-y: auto;
  background: var(--paper); color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp-4);
  transform: translateY(100%); transition: transform 300ms var(--ease-out);
}
.sheet.is-open .sheet__panel { transform: none; }
@media (min-width: 620px) { .sheet { align-items: center; } .sheet__panel { border-radius: var(--radius-lg); transform: translateY(20px) scale(0.98); } .sheet.is-open .sheet__panel { transform: none; } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.sheet__head h3 { font-size: var(--step-2); }
.sheet__x, .joblist__x { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink-soft); padding: 0.2rem 0.4rem; }
.sheet__x:hover { color: var(--oxblood); }
.sheet__jobs { margin-top: var(--sp-4); }
.sheet__jobs h4 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-2); }

.seg { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.seg__b { flex: 1 1 auto; min-height: 44px; padding: 0.4rem 0.7rem; border: 2px solid color-mix(in oklch, var(--ink) 20%, transparent); border-radius: var(--radius); background: var(--white); font-weight: 600; cursor: pointer; }
.seg__b.is-on { background: var(--oxblood); border-color: var(--oxblood); color: var(--white); }

.fld { display: block; margin-bottom: var(--sp-3); }
.fld > span { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.fld input, .fld select, .fld textarea {
  width: 100%; min-height: 48px; padding: 0.6rem 0.8rem; font: inherit; color: var(--ink);
  background: var(--white); border: 2px solid color-mix(in oklch, var(--ink) 20%, transparent); border-radius: var(--radius);
}
.fld textarea { min-height: 84px; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--oxblood); outline: 3px solid color-mix(in oklch, var(--enamel) 40%, transparent); outline-offset: 1px; }
.fld .req { color: var(--oxblood); }
.fld__err { color: var(--oxblood); font-weight: 600; font-size: 0.9rem; margin: 0 0 var(--sp-2); }

.joblist { display: grid; gap: 0.5rem; margin: 0 0 var(--sp-3); }
.joblist li { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.7rem; background: var(--white); border: 1px solid color-mix(in oklch, var(--ink) 14%, transparent); border-radius: var(--radius); }
.joblist li.is-pending { border-color: var(--enamel); background: color-mix(in oklch, var(--enamel) 10%, var(--white)); }
.joblist__area { font-size: 0.9rem; color: var(--ink-soft); }
.joblist__actions { margin-left: auto; display: flex; gap: 0.4rem; }
.joblist__x { margin-left: auto; }
.addjob { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .addjob { grid-template-columns: 1.2fr 1fr auto; align-items: center; } }
.addjob select, .addjob input { min-height: 44px; padding: 0.5rem 0.7rem; border: 2px solid color-mix(in oklch, var(--ink) 20%, transparent); border-radius: var(--radius); font: inherit; background: var(--white); }

/* ---- booking flow ---- */
.book__step { display: grid; gap: var(--sp-3); }
/* display:grid beats the hidden attribute, so without this every step renders
   at once (postcode, calendar, form and success all stacked). */
.book__step[hidden] { display: none; }
.book__step h2 { font-size: var(--step-3); }
.book__grid { display: grid; gap: var(--sp-3); }
@media (min-width: 560px) { .book__grid { grid-template-columns: 1fr 1fr; } }
.book__where { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; padding: 0.7rem 0.9rem; background: var(--chalk); border-radius: var(--radius); font-size: 0.92rem; }
.linky { background: none; border: 0; color: var(--oxblood); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 0; font-size: inherit; }
/* comfortable tap height for the inline "Change postcode" control on a phone */
.book__where .linky { display: inline-flex; align-items: center; min-height: 44px; }
.cal--book .cal__cell--book.b-open { background: oklch(0.90 0.10 150); color: oklch(0.30 0.08 150); }
.cal--book .cal__cell--book.b-near { background: oklch(0.86 0.10 75); color: oklch(0.34 0.09 75); }
.cal--book .cal__cell--book.is-no { background: color-mix(in oklch, var(--ink) 8%, var(--paper)); color: color-mix(in oklch, var(--ink) 40%, transparent); cursor: not-allowed; }
.cal--book .cal__cell--book:disabled { cursor: not-allowed; }

.book__summary { display: grid; gap: 0; border: 1px solid color-mix(in oklch, var(--ink) 16%, transparent); border-radius: var(--radius-lg); overflow: hidden; }
.sumrow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; }
.sumrow:nth-child(even) { background: color-mix(in oklch, var(--chalk) 35%, transparent); }
.sumrow span { color: var(--ink-soft); }
.sumrow b { text-align: right; }
.book__done { text-align: center; justify-items: center; }
.book__tick { width: 64px; height: 64px; border-radius: 50%; background: oklch(0.65 0.16 150); color: var(--white); display: grid; place-items: center; font-size: 2rem; }
.book__done .hero__actions { justify-content: center; }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--oxblood-deep);
  border-top: 1px solid color-mix(in oklch, var(--chalk) 25%, transparent);
  transform: translateY(101%); transition: transform 340ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.callbar[data-show="true"] { transform: translateY(0); }
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 56px; text-decoration: none; font-weight: 600; color: var(--on-dark);
  font-size: 0.95rem;
}
.callbar a + a { border-left: 1px solid color-mix(in oklch, var(--chalk) 25%, transparent); }
.callbar svg { width: 17px; height: 17px; fill: var(--chalk); }
@media (min-width: 960px) { .callbar { display: none; } }
@media (max-width: 959px) { body { padding-bottom: 0; } body.has-callbar { padding-bottom: 56px; } }

/* ---------- Reveal ---------- */
/* Content is visible by default. The hidden start state is opted into only
   when motion is welcome, so a headless render or a stalled observer can
   never ship a blank section. */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 700ms var(--ease-soft), transform 780ms var(--ease-out);
  }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  html.js [data-reveal-stagger] > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity 620ms var(--ease-soft), transform 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  html.js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }

  /* Hero load choreography */
  html.js .hero__inner > * > [data-hero] { opacity: 0; transform: translateY(22px); }
  html.js .hero.is-ready [data-hero] {
    opacity: 1; transform: none;
    transition: opacity 800ms var(--ease-soft), transform 900ms var(--ease-out);
    transition-delay: calc(var(--d, 0) * 1ms);
  }
  html.js .hero__figure .plate img { transform: scale(1.07); transition: transform 1500ms var(--ease-out); }
  html.js .hero.is-ready .hero__figure .plate img { transform: scale(1); }
}