/**
 * HAVEN Child — Phase 2 layer.
 *
 * Loaded after haven-visual.css. It styles three things:
 *   A. the Home sections rebuilt in Phase 2 (.hvn-pos2, .hvn-proc2, .hvn-assure2)
 *   B. the quote page (.hvn-qhero … .hvn-qcap)
 *   C. the service-page system (.hvn-shero2 … .hvn-sbar)
 *
 * It introduces no new colour. Every value resolves to a token already
 * defined in style.css or in the Phase 1 surface block of haven-visual.css.
 *
 * MOTION. Phase 2 adds no infinite animation. The only continuous motion on
 * the site remains the accepted information strip. Everything here is either a
 * one-shot entrance driven by the Phase 1 observer, or a transition bound to a
 * real user action. The reduced-motion block at the end neutralises all of it.
 */

/* =========================================================================
   0. SHARED PHASE 2 PRIMITIVES
   ========================================================================= */

:root {
  --hvn-p2-dark: var(--hvn-charcoal);
  --hvn-p2-fig-r: var(--hvn-radius-lg);
}

/* A full-bleed dark band that does not depend on being a direct child of
   anything — used by the process stepper, the flow rails and the honesty
   ledger. */
.hvn-p2dark {
  background: var(--hvn-p2-dark);
  color: var(--hvn-text-invert);
  padding-block: var(--hvn-section-y);
}

/* The index numeral used across Phase 2. Tabular figures so a column of them
   lines up, and gold so the eye can follow the sequence.

   A11Y (R-19, 2026-09-18). These six share a shape but not a background: the
   process rail, the quote flow and the service flow sit on DARK panels, where
   the plain gold is the legible choice; `.hvn-pos2__ix` sits on paper, where
   the same gold measures 2.78:1 against the 4.5:1 that 14px/600 needs.
   Darkening the shared rule fixed the light one and made the dark ones worse,
   so the light case is singled out below instead. */
.hvn-pos2__ix,
.hvn-proc2__num,
.hvn-proc2__pnum,
.hvn-qhelp__no,
.hvn-qflow__no,
.hvn-sflow__no {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hvn-gold);
}

/* The only one of them on a light ground. 5.17:1 instead of 2.78:1. */
.hvn-pos2__ix { color: var(--hvn-gold-deep); }

/* Figures. One treatment, used by every Phase 2 image. */
.hvn-pos2__fig,
.hvn-qcap__fig,
.hvn-sscope__fig,
.hvn-scare__fig {
  margin: 0;
  border-radius: var(--hvn-p2-fig-r);
  overflow: hidden;
  box-shadow: var(--hvn-shadow-2);
  background: var(--hvn-warm-2);
}

.hvn-pos2__fig img,
.hvn-qcap__fig img,
.hvn-sscope__fig img,
.hvn-scare__fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* -------------------------------------------------------------------------
   ONE CORRECTION TO AN EARLIER LAYER.
   The Vienna network motif carried `animation: hvnPulse 3.6s infinite`. On a
   page whose rule is that the information strip is the only perpetual motion,
   a second thing pulsing forever is one thing too many — it competes with the
   strip for the same peripheral attention and never resolves. Three pulses
   announce the node and then stop. The keyframes and the section itself are
   untouched.
   ---------------------------------------------------------------------- */

.hvn-net__pulse { animation-iteration-count: 3; }

@media (prefers-reduced-motion: reduce) {
  .hvn-net__pulse { animation: none; }
}


/* =========================================================================
   A1. HOME — [haven_positioning]
   Was: a statement beside three text blocks, with a wide empty band under it.
   Now: statement against the vehicle photograph, qualifiers as an indexed
   ledger beneath, so the section carries weight across its whole height.
   ========================================================================= */

.hvn-pos2 {
  background: var(--hvn-warm);
  overflow: hidden; /* the parallax image must not extend the page */
}

.hvn-pos2__grid {
  display: grid;
  gap: var(--hvn-s7);
  align-items: center;
}

/* The display scale was set for a heading that owned a full 1240px row. Here
   it shares the row with a photograph, and at 72px the word "Räumungen"
   hyphenated across two lines. Capped to the width it actually has. */
.hvn-pos2__lead .hvn-display {
  margin-block: var(--hvn-s3) var(--hvn-s5);
  font-size: clamp(1.9rem, 1.1rem + 2.5vw, 3.15rem);
}
.hvn-pos2__lead .hvn-lede    { margin-block: 0 var(--hvn-s6); }

.hvn-pos2__fig {
  aspect-ratio: 4 / 3;
  /* The image is oversized so the bounded parallax translate never uncovers
     an edge of the frame. */
  --hvn-par-max: 18px;
}

.hvn-pos2__fig img { height: calc(100% + 44px); margin-top: -22px; }

.hvn-pos2__ledger {
  list-style: none;
  margin: var(--hvn-s8) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--hvn-warm-line);
}

.hvn-pos2__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--hvn-s3) var(--hvn-s5);
  padding-block: var(--hvn-s5);
  border-bottom: 1px solid var(--hvn-warm-line);
}

.hvn-pos2__ix { font-size: var(--hvn-fs-small); padding-top: .35em; }
.hvn-pos2__item h3 { margin: 0; }
.hvn-pos2__item p  { margin: 0; color: var(--hvn-text-secondary); max-width: 62ch; }

@media (min-width: 1000px) {
  .hvn-pos2__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--hvn-s8); }
  .hvn-pos2__ledger { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hvn-warm-line); }
  .hvn-pos2__item {
    grid-template-columns: 1fr;
    gap: var(--hvn-s2);
    padding: var(--hvn-s6) var(--hvn-s6) var(--hvn-s6) 0;
    border-bottom: 0;
    border-right: 1px solid var(--hvn-warm-line);
  }
  .hvn-pos2__item:last-child { border-right: 0; padding-right: 0; }
  .hvn-pos2__ix { padding-top: 0; }
}


/* =========================================================================
   A2. HOME — [haven_process], the stepper
   A radiogroup, not a JS tablist: one tab stop, arrow-key selection and
   announcement all come from the platform. See inc/sections-home.php.
   ========================================================================= */

.hvn-proc2 {
  background: var(--hvn-p2-dark);
  color: var(--hvn-text-invert);
}

.hvn-proc2__head {
  display: grid;
  gap: var(--hvn-s4);
  margin-bottom: var(--hvn-s8);
}

.hvn-proc2__head .hvn-eyebrow { color: var(--hvn-gold); }
.hvn-proc2__head h2 { margin: var(--hvn-s2) 0 0; color: var(--hvn-text-invert); max-width: 22ch; }
.hvn-proc2__head .hvn-lede { margin: 0; color: var(--hvn-text-invert-soft); max-width: 40ch; }

@media (min-width: 880px) {
  .hvn-proc2__head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--hvn-s7); }
}

/* The inputs stay in the focus order — display:none would take the keyboard
   behaviour away, which is the entire reason for using radios. */
.hvn-proc2__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.hvn-proc2__stage { position: relative; }

.hvn-proc2__track {
  list-style: none;
  margin: 0 0 var(--hvn-s7);
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.hvn-proc2__tab {
  display: grid;
  grid-template-columns: 3rem 1fr;
  align-items: baseline;
  gap: var(--hvn-s4);
  padding: var(--hvn-s4) var(--hvn-s2);
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  transition: background-color 260ms var(--hvn-ease), border-color 260ms var(--hvn-ease);
}

.hvn-proc2__num { font-size: var(--hvn-fs-small); opacity: .7; transition: opacity 260ms var(--hvn-ease); }
.hvn-proc2__lab { color: var(--hvn-text-invert-soft); transition: color 260ms var(--hvn-ease); }

.hvn-proc2__tab:hover { background: rgba(255, 255, 255, .05); }

/* Selected state — the numeral brightens and a gold rule marks the step.
   The pairing is positional: the nth input governs the nth tab. It is written
   out rather than generated because there are four steps and a generated
   version would need :has(), which buys nothing here. */
.hvn-proc2__radio:nth-of-type(1):checked ~ .hvn-proc2__track li:nth-child(1) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(2):checked ~ .hvn-proc2__track li:nth-child(2) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(3):checked ~ .hvn-proc2__track li:nth-child(3) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(4):checked ~ .hvn-proc2__track li:nth-child(4) .hvn-proc2__tab {
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 3px 0 0 var(--hvn-gold);
}

.hvn-proc2__radio:nth-of-type(1):checked ~ .hvn-proc2__track li:nth-child(1) .hvn-proc2__lab,
.hvn-proc2__radio:nth-of-type(2):checked ~ .hvn-proc2__track li:nth-child(2) .hvn-proc2__lab,
.hvn-proc2__radio:nth-of-type(3):checked ~ .hvn-proc2__track li:nth-child(3) .hvn-proc2__lab,
.hvn-proc2__radio:nth-of-type(4):checked ~ .hvn-proc2__track li:nth-child(4) .hvn-proc2__lab {
  color: var(--hvn-text-invert);
  font-weight: 600;
}

.hvn-proc2__radio:nth-of-type(1):checked ~ .hvn-proc2__track li:nth-child(1) .hvn-proc2__num,
.hvn-proc2__radio:nth-of-type(2):checked ~ .hvn-proc2__track li:nth-child(2) .hvn-proc2__num,
.hvn-proc2__radio:nth-of-type(3):checked ~ .hvn-proc2__track li:nth-child(3) .hvn-proc2__num,
.hvn-proc2__radio:nth-of-type(4):checked ~ .hvn-proc2__track li:nth-child(4) .hvn-proc2__num { opacity: 1; }

/* Keyboard focus has to be visible on the label, because the control itself
   is off-screen. */
.hvn-proc2__radio:nth-of-type(1):focus-visible ~ .hvn-proc2__track li:nth-child(1) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(2):focus-visible ~ .hvn-proc2__track li:nth-child(2) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(3):focus-visible ~ .hvn-proc2__track li:nth-child(3) .hvn-proc2__tab,
.hvn-proc2__radio:nth-of-type(4):focus-visible ~ .hvn-proc2__track li:nth-child(4) .hvn-proc2__tab {
  outline: 2px solid var(--hvn-gold-lift);
  outline-offset: -2px;
}

.hvn-proc2__panels { display: grid; }

.hvn-proc2__panel {
  grid-area: 1 / 1;
  background: var(--hvn-charcoal-2);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hvn-radius-lg);
  padding: var(--hvn-s6);
}

.hvn-proc2__pnum { display: block; font-size: var(--hvn-fs-small); margin-bottom: var(--hvn-s3); }
.hvn-proc2__panel h3 { margin: 0 0 var(--hvn-s3); color: var(--hvn-text-invert); }
.hvn-proc2__panel p  { margin: 0; color: var(--hvn-text-invert-soft); max-width: 56ch; }

/* Below 880px every panel is shown; nothing is hidden from a narrow screen,
   and the track becomes a plain list of headings rather than a control. */
@media (max-width: 879.98px) {
  .hvn-proc2__track { display: none; }
  .hvn-proc2__panels { gap: var(--hvn-s4); }
  .hvn-proc2__panel { grid-area: auto; }
}

@media (min-width: 880px) {
  .hvn-proc2__stage { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--hvn-s8); align-items: start; }
  .hvn-proc2__track { margin-bottom: 0; }
  .hvn-proc2__panels { min-height: 15rem; }
  .hvn-proc2__panel {
    padding: var(--hvn-s7);
    visibility: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 300ms var(--hvn-ease), transform 300ms var(--hvn-ease), visibility 0s linear 300ms;
  }
  .hvn-proc2__radio:nth-of-type(1):checked ~ .hvn-proc2__panels .hvn-proc2__panel[data-i="0"],
  .hvn-proc2__radio:nth-of-type(2):checked ~ .hvn-proc2__panels .hvn-proc2__panel[data-i="1"],
  .hvn-proc2__radio:nth-of-type(3):checked ~ .hvn-proc2__panels .hvn-proc2__panel[data-i="2"],
  .hvn-proc2__radio:nth-of-type(4):checked ~ .hvn-proc2__panels .hvn-proc2__panel[data-i="3"] {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}


/* =========================================================================
   A3. HOME — [haven_assurance], the honesty ledger
   ========================================================================= */

.hvn-assure2 {
  background: var(--hvn-navy-deep);
  color: var(--hvn-text-invert);
  padding-block: var(--hvn-section-y);
}

.hvn-assure2__grid { display: grid; gap: var(--hvn-s8); align-items: start; }
.hvn-assure2__lead .hvn-eyebrow { color: var(--hvn-gold); }
.hvn-assure2__lead h2 { margin: var(--hvn-s2) 0 var(--hvn-s5); color: var(--hvn-text-invert); max-width: 20ch; }
.hvn-assure2__lead p  { color: var(--hvn-text-invert-soft); max-width: 46ch; }
.hvn-assure2__ask { font-weight: 600; color: var(--hvn-text-invert) !important; }
.hvn-assure2__lead .hvn-actions { margin-top: var(--hvn-s6); }

.hvn-assure2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hvn-s3); }

.hvn-assure2__link {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--hvn-s4);
  align-items: start;
  padding: var(--hvn-s5);
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--hvn-radius-lg);
  background: rgba(255, 255, 255, .03);
  transition: background-color 260ms var(--hvn-ease), border-color 260ms var(--hvn-ease), transform 260ms var(--hvn-ease);
}

.hvn-assure2__link:hover,
.hvn-assure2__link:focus-visible {
  background: rgba(255, 255, 255, .07);
  border-color: var(--hvn-gold);
  transform: translateY(-2px);
}

.hvn-assure2__tick {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 999px;
  color: var(--hvn-charcoal);
  background: var(--hvn-gold);
}

.hvn-assure2__txt { display: grid; gap: var(--hvn-s2); }
.hvn-assure2__txt strong { color: var(--hvn-text-invert); }
.hvn-assure2__txt > span { color: var(--hvn-text-invert-soft); font-size: var(--hvn-fs-small); line-height: 1.6; }

@media (min-width: 1000px) {
  .hvn-assure2__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--hvn-s9); }
}


/* =========================================================================
   B. QUOTE PAGE
   ========================================================================= */

/* ---- B1. the media hero ---- */

.hvn-qhero,
.hvn-shero2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hvn-charcoal);
  color: var(--hvn-text-invert);
  display: grid;
  align-items: end;
  min-height: clamp(26rem, 24rem + 18vw, 40rem);
}

.hvn-qhero__media,
.hvn-shero2__media {
  position: absolute;
  inset: -24px 0;
  z-index: 0;
}

.hvn-qhero__media img,
.hvn-shero2__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  display: block;
}

/* Two stops, not one: a strong foot so the text always clears its background,
   and a light top so the overlay navigation stays legible over the picture. */
.hvn-qhero__scrim,
.hvn-shero2__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 26, 34, .94) 0%, rgba(20, 26, 34, .80) 30%, rgba(20, 26, 34, .52) 58%, rgba(20, 26, 34, .34) 78%, rgba(20, 26, 34, .52) 100%);
}

.hvn-qhero__inner,
.hvn-shero2__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--hvn-s8) var(--hvn-s8);
}

body.hvn-overlay .hvn-qhero__inner,
body.hvn-overlay .hvn-shero2__inner {
  padding-top: calc(var(--hvn-nav-h) + var(--hvn-s7));
}

.hvn-qhero .hvn-eyebrow,
.hvn-shero2 .hvn-eyebrow { color: var(--hvn-gold); }

.hvn-qhero__title,
.hvn-shero2__title {
  font-size: var(--hvn-fs-h1);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--hvn-text-invert);
  margin: var(--hvn-s3) 0 var(--hvn-s4);
  max-width: 18ch;
}

.hvn-qhero__lede,
.hvn-shero2__lede {
  font-size: var(--hvn-fs-lede);
  color: rgba(255, 255, 255, .86);
  max-width: 54ch;
  margin: 0 0 var(--hvn-s6);
}

/* ---- B2. the three channels, inside the hero ---- */

.hvn-qchan {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hvn-s3);
}

.hvn-qchan__item a {
  display: grid;
  gap: var(--hvn-s1);
  padding: var(--hvn-s4) var(--hvn-s5);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--hvn-radius-lg);
  background: rgba(20, 26, 34, .42);
  backdrop-filter: blur(6px);
  transition: background-color 260ms var(--hvn-ease), border-color 260ms var(--hvn-ease), transform 260ms var(--hvn-ease);
}

.hvn-qchan__item a:hover,
.hvn-qchan__item a:focus-visible {
  background: rgba(20, 26, 34, .62);
  border-color: var(--hvn-gold);
  transform: translateY(-2px);
}

.hvn-qchan__k {
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label, .08em);
  text-transform: uppercase;
  color: var(--hvn-gold);
}

.hvn-qchan__v { color: var(--hvn-text-invert); font-weight: 500; }

@media (min-width: 720px) {
  .hvn-qchan { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 46rem; }
}

/* ---- B3. helpers + the form ---- */

.hvn-qform { background: var(--hvn-warm); }

.hvn-qform__grid { display: grid; gap: var(--hvn-s8); align-items: start; }

.hvn-qform__aside .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-qform__asideh { margin: var(--hvn-s2) 0 var(--hvn-s4); max-width: 18ch; }
.hvn-qform__asidep { color: var(--hvn-text-secondary); margin: 0 0 var(--hvn-s6); max-width: 46ch; }

.hvn-qhelp { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--hvn-warm-line); }

.hvn-qhelp__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--hvn-s4);
  padding-block: var(--hvn-s4);
  border-bottom: 1px solid var(--hvn-warm-line);
}

.hvn-qhelp__no { font-size: var(--hvn-fs-small); padding-top: .2em; }
.hvn-qhelp__body { display: grid; gap: var(--hvn-s1); }
.hvn-qhelp__body strong { color: var(--hvn-text); }
.hvn-qhelp__body > span { color: var(--hvn-text-secondary); font-size: var(--hvn-fs-small); line-height: 1.6; }

.hvn-qform__panel {
  background: #FFFFFF;
  border: 1px solid var(--hvn-warm-line);
  border-radius: var(--hvn-radius-lg);
  box-shadow: var(--hvn-shadow-2);
  padding: clamp(1.25rem, .6rem + 2.4vw, 2.5rem);
}

.hvn-qform__panelhead { margin-bottom: var(--hvn-s5); padding-bottom: var(--hvn-s5); border-bottom: 1px solid var(--hvn-warm-line); }
.hvn-qform__panelhead h2 { margin: 0 0 var(--hvn-s2); }
.hvn-qform__panelhead p  { margin: 0; color: var(--hvn-text-secondary); font-size: var(--hvn-fs-small); }

@media (min-width: 1000px) {
  .hvn-qform__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--hvn-s9); }
  /* The form outlives the helper list, so it may sit with the reader. */
  .hvn-qform__panel { position: sticky; top: calc(var(--hvn-nav-h) + var(--hvn-s4)); }
}

/* ---- B4. what happens next ---- */

.hvn-qflow,
.hvn-sflow {
  background: var(--hvn-charcoal);
  color: var(--hvn-text-invert);
  padding-block: var(--hvn-section-y);
}

.hvn-sflow { padding-block: var(--hvn-section-y); }

.hvn-qflow__head,
.hvn-sflow__head { display: grid; gap: var(--hvn-s4); margin-bottom: var(--hvn-s8); }

.hvn-qflow__head .hvn-eyebrow,
.hvn-sflow__head .hvn-eyebrow { color: var(--hvn-gold); }

.hvn-qflow__title,
.hvn-sflow__title { margin: var(--hvn-s2) 0 0; color: var(--hvn-text-invert); max-width: 24ch; }

.hvn-qflow__lede { margin: 0; color: var(--hvn-text-invert-soft); max-width: 40ch; font-size: var(--hvn-fs-lede); }

@media (min-width: 880px) {
  .hvn-qflow__head { grid-template-columns: 1.2fr 1fr; align-items: end; gap: var(--hvn-s7); }
}

.hvn-qflow__rail,
.hvn-sflow__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--hvn-s5);
}

.hvn-qflow__step,
.hvn-sflow__step {
  position: relative;
  padding-top: var(--hvn-s5);
  border-top: 2px solid rgba(255, 255, 255, .18);
}

/* The connector: a gold cap on each step's rule, so the four rules read as one
   track rather than four unrelated lines. */
.hvn-qflow__step::before,
.hvn-sflow__step::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.5rem;
  height: 2px;
  background: var(--hvn-gold);
}

.hvn-qflow__no,
.hvn-sflow__no { display: block; font-size: var(--hvn-fs-small); margin-bottom: var(--hvn-s3); }

.hvn-qflow__step h3,
.hvn-sflow__step h3 { margin: 0 0 var(--hvn-s2); color: var(--hvn-text-invert); }

.hvn-qflow__step p,
.hvn-sflow__step p { margin: 0; color: var(--hvn-text-invert-soft); font-size: var(--hvn-fs-small); line-height: 1.65; }

@media (min-width: 720px) {
  .hvn-qflow__rail { grid-template-columns: repeat(2, 1fr); gap: var(--hvn-s6); }
  .hvn-sflow__rail { grid-template-columns: repeat(2, 1fr); gap: var(--hvn-s6); }
}

@media (min-width: 1060px) {
  .hvn-qflow__rail { grid-template-columns: repeat(4, 1fr); }
  .hvn-sflow__rail { grid-template-columns: repeat(5, 1fr); gap: var(--hvn-s5); }
}

/* ---- B5. capacity ---- */

.hvn-qcap { background: var(--hvn-warm-2); }
.hvn-qcap__grid { display: grid; gap: var(--hvn-s8); align-items: center; }
.hvn-qcap__fig { aspect-ratio: 3 / 2; }
.hvn-qcap .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-qcap__title { margin: var(--hvn-s2) 0 var(--hvn-s4); max-width: 20ch; }
.hvn-qcap__copy > p { color: var(--hvn-text-secondary); max-width: 52ch; }

.hvn-qcap__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--hvn-s5);
  margin: var(--hvn-s6) 0 0;
}

.hvn-qcap__facts div { border-top: 2px solid var(--hvn-gold); padding-top: var(--hvn-s3); }

.hvn-qcap__facts dt {
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label, .08em);
  text-transform: uppercase;
  color: var(--hvn-text-secondary);
  margin-bottom: var(--hvn-s1);
}

.hvn-qcap__facts dd { margin: 0; font-weight: 600; color: var(--hvn-text); }
.hvn-qcap__note { margin: var(--hvn-s6) 0 0; font-size: var(--hvn-fs-small); color: var(--hvn-text-secondary); }

@media (min-width: 960px) {
  .hvn-qcap__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hvn-s9); }
}


/* =========================================================================
   C. SERVICE PAGE SYSTEM
   ========================================================================= */

/* ---- C1. scope ---- */

.hvn-sscope { background: var(--hvn-warm); }
.hvn-sscope__grid { display: grid; gap: var(--hvn-s8); align-items: center; }
.hvn-sscope .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-sscope__h { margin: var(--hvn-s2) 0 var(--hvn-s4); max-width: 18ch; }
.hvn-sscope__fig { aspect-ratio: 4 / 3; }

.hvn-sscope__list { list-style: none; margin: var(--hvn-s6) 0 0; padding: 0; display: grid; gap: 0; }

.hvn-sscope__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--hvn-s3);
  align-items: baseline;
  padding-block: var(--hvn-s3);
  border-bottom: 1px solid var(--hvn-warm-line);
}

.hvn-sscope__list li::before {
  content: '';
  width: .5rem; height: .5rem;
  border-radius: 999px;
  background: var(--hvn-gold);
  transform: translateY(-.1em);
}

@media (min-width: 960px) {
  .hvn-sscope__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--hvn-s9); }
}

/* ---- C2. the estate-clearance passage ---- */

.hvn-scare {
  background: var(--hvn-navy-deep);
  color: var(--hvn-text-invert);
  padding-block: var(--hvn-section-y);
}

.hvn-scare__grid { display: grid; gap: var(--hvn-s8); align-items: center; }
.hvn-scare__fig { aspect-ratio: 4 / 3; box-shadow: none; }
.hvn-scare .hvn-eyebrow { color: var(--hvn-gold); }
.hvn-scare__h { margin: var(--hvn-s2) 0 var(--hvn-s4); color: var(--hvn-text-invert); max-width: 20ch; }
.hvn-scare__p { color: var(--hvn-text-invert-soft); max-width: 50ch; font-size: var(--hvn-fs-lede); margin: 0; }

.hvn-scare__points { list-style: none; margin: var(--hvn-s6) 0 0; padding: 0; display: grid; gap: var(--hvn-s3); }

.hvn-scare__points li {
  padding-left: var(--hvn-s5);
  position: relative;
  color: var(--hvn-text-invert-soft);
  font-size: var(--hvn-fs-small);
  line-height: 1.65;
}

.hvn-scare__points li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: .75rem; height: 2px;
  background: var(--hvn-gold);
}

@media (min-width: 960px) {
  .hvn-scare__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--hvn-s9); }
}

/* ---- C3. preparation, expandable ---- */

.hvn-sprep { background: var(--hvn-warm-2); padding-block: var(--hvn-section-y); }
.hvn-sprep__grid { display: grid; gap: var(--hvn-s8); align-items: start; }
.hvn-sprep .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-sprep__h { margin: var(--hvn-s2) 0 var(--hvn-s4); max-width: 16ch; }
.hvn-sprep__p { color: var(--hvn-text-secondary); max-width: 44ch; margin: 0 0 var(--hvn-s6); }

/* These sections are not `.hvn-section`, so they do not inherit the rule that
   makes a ghost button navy on a warm ground. Without this the WhatsApp button
   rendered white-on-cream and was effectively invisible. */
.hvn-sprep .hvn-btn--ghost,
.hvn-qcap .hvn-btn--ghost { color: var(--hvn-text); border-color: var(--hvn-navy-40); }

.hvn-sprep__list { display: grid; gap: var(--hvn-s3); }

.hvn-sprep__item {
  background: #FFFFFF;
  border: 1px solid var(--hvn-warm-line);
  border-radius: var(--hvn-radius-lg);
  box-shadow: var(--hvn-shadow-1);
  transition: box-shadow 260ms var(--hvn-ease), border-color 260ms var(--hvn-ease);
}

.hvn-sprep__item:hover { box-shadow: var(--hvn-shadow-2); }
.hvn-sprep__item[open] { border-color: var(--hvn-gold); }

.hvn-sprep__item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--hvn-s4) 3rem var(--hvn-s4) var(--hvn-s5);
  font-weight: 600;
  position: relative;
}

.hvn-sprep__item summary::-webkit-details-marker { display: none; }

.hvn-sprep__item summary::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--hvn-gold-deep);
  border-bottom: 2px solid var(--hvn-gold-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 240ms var(--hvn-ease);
}

.hvn-sprep__item[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.hvn-sprep__item p { margin: 0; padding: 0 var(--hvn-s5) var(--hvn-s5); color: var(--hvn-text-secondary); font-size: var(--hvn-fs-small); line-height: 1.65; }
.hvn-sprep__item[open] > *:not(summary) { animation: hvnReveal 320ms var(--hvn-ease) both; }

@media (min-width: 960px) {
  .hvn-sprep__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--hvn-s9); }
}

/* ---- C4. FAQ on the service page ---- */

.hvn-sfaq { background: var(--hvn-warm); }

/* ---- C5. the contextual sticky bar ----
   Hidden below 768px, where the global mobile conversion bar already occupies
   that edge of the screen and two stacked bars would swallow the content. */

.hvn-sbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(20, 26, 34, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: var(--hvn-text-invert);
  transform: translateY(100%);
  transition: transform 340ms var(--hvn-ease);
}

.hvn-sbar[hidden] { display: none !important; }
.hvn-sbar.is-in { transform: none; }

.hvn-sbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hvn-s4);
  padding-block: var(--hvn-s3);
}

.hvn-sbar__txt { margin: 0; font-weight: 600; color: var(--hvn-text-invert); }
.hvn-sbar__actions { display: flex; gap: var(--hvn-s3); flex-wrap: wrap; }
.hvn-sbar .hvn-btn--ghost { color: var(--hvn-text-invert); border-color: rgba(255, 255, 255, .4); }
.hvn-sbar .hvn-btn--ghost:hover { border-color: var(--hvn-gold); color: var(--hvn-gold-lift); }

@media (max-width: 767.98px) {
  .hvn-sbar { display: none !important; }
}


/* =========================================================================
   D. REDUCED MOTION
   Everything Phase 2 added that moves is neutralised here. The controls keep
   working; only the movement stops.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .hvn-proc2__panel,
  .hvn-proc2__tab,
  .hvn-assure2__link,
  .hvn-qchan__item a,
  .hvn-sprep__item,
  .hvn-sprep__item summary::after,
  .hvn-sbar { transition: none !important; }

  .hvn-proc2__panel { transform: none !important; }
  .hvn-assure2__link:hover,
  .hvn-qchan__item a:hover { transform: none !important; }
  .hvn-sprep__item[open] > *:not(summary) { animation: none; }
  .hvn-sbar { transform: none; }
}


/* =========================================================================
   E. PHASE 2.1 — FOOTER LOCKUP, OPTICAL CORRECTION

   The delivered SVG has transparent padding baked into its canvas, and the
   padding is not symmetric. Measured from the artwork itself by rasterising
   it and taking the alpha bounding box of a 1200 x 1086 render:

       ink box (76, 143) - (1124, 1009)
       padding   left 6.33%   right 6.33%   top 13.17%   bottom 7.09%
       ink occupies 79.74% of the canvas height

   Two consequences, both of which the Human Owner saw:
     * `height: 6.5rem` sized the CANVAS, so the mark itself rendered at
       5.18rem — about a fifth smaller than the number in the stylesheet said;
     * with nearly twice as much empty space above the ink as below it, the
       mark sat visually low in its own box, and its left edge started 7px
       inside the column the paragraph and the button align to.

   The fix is arithmetic, not taste: size the box so the INK measures the
   intended height, then pull the transparent margin out of the layout with
   negative margins derived from the same measurements. The artwork is not
   cropped, redrawn, re-exported or altered in any way — only the box around
   it is told what is actually inside it.
   ========================================================================= */

/*
 * The arithmetic above now lives once, on `.hvn-lockup` in haven-visual.css,
 * because the header needed exactly the same correction. All this has to say
 * is how tall the mark should look here. (A second copy of the constants would
 * be a second place for them to drift.)
 */
.hvn-footer .hvn-lockup { --hvn-lk-ink: 5.8rem; }

/* The plate is now exactly as tall as the mark, so the gap to the paragraph
   below is a real, chosen gap rather than leftover transparent canvas. */
.hvn-footer__plate { margin-bottom: var(--hvn-s5); }

@media (max-width: 600px) {
  .hvn-footer .hvn-lockup { --hvn-lk-ink: 4.6rem; }
}


/* =========================================================================
   F. PHASE 3 — THE SERVICE EXPLORER  [haven_services_rich]

   Six services on a rail, one media-led panel that changes. Deliberately not
   styled like the process stepper in section A2: that one is dark, numeric and
   text-led; this is warm, photographic and card-led, because "which of your
   services do I need" and "what happens after I call" are different questions
   and should not look like the same widget twice.

   Same accessible mechanism, though — a native radiogroup, so arrow keys,
   announcement and no-JavaScript operation come free.
   ========================================================================= */

.hvn-sx { background: var(--hvn-warm); }

.hvn-sx__head { display: grid; gap: var(--hvn-s4); margin-bottom: var(--hvn-s8); }
.hvn-sx__head .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-sx__head h2 { margin: var(--hvn-s2) 0 0; max-width: 20ch; }
.hvn-sx__head .hvn-lede { margin: 0; max-width: 46ch; }

@media (min-width: 900px) {
  .hvn-sx__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: var(--hvn-s7); }
}

.hvn-sx__stage { position: relative; }

/* Off-screen, never display:none — the radios are the keyboard interface. */
.hvn-sx__radio {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- the rail — tactile media cards --------------------------------------- *
 * PHASE 3 (tactile). Six photographic cards on a rail that scrolls natively
 * and snaps. haven-tactile.js adds mouse drag with momentum, a rubber-band pull
 * at the ends and a pointer-follow tilt; touch is left to the browser. The
 * radios remain the keyboard interface. The wrap-to-two-rows layout above
 * 1200px is gone: a rail you can grab is the point, at every width. */

.hvn-sx__rail {
  position: relative;
  display: flex;
  gap: .85rem;
  margin: 0 calc(clamp(1.25rem, 4vw, 3rem) * -1) var(--hvn-s5);
  padding: .4rem clamp(1.25rem, 4vw, 3rem) 1.1rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.25rem, 4vw, 3rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}

.hvn-sx__rail::-webkit-scrollbar { display: none; }
.hvn-sx__rail > li { flex: 0 0 auto; scroll-snap-align: start; }

/* Edge fades say "there is more this way" instead of slicing a card in half at
   the column edge. haven-tactile.js sets `is-start` / `is-end`; without the
   script, only the trailing fade is shown. */
.hvn-sx__rail {
  --hvn-fade-l: 0rem;
  --hvn-fade-r: 3.5rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hvn-fade-l), #000 calc(100% - var(--hvn-fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--hvn-fade-l), #000 calc(100% - var(--hvn-fade-r)), transparent 100%);
}

.hvn-sx__rail:not(.is-start) { --hvn-fade-l: 3.5rem; }
.hvn-sx__rail.is-start { --hvn-fade-l: 0rem; }
.hvn-sx__rail.is-end { --hvn-fade-r: 0rem; }

.hvn-sx__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }

/* While page scroll is driving the rail, snap would fight every frame and jerk
   the cards back to the nearest card edge. The visitor gets the snap back the
   moment they take the rail over (haven-tactile.js). */
.hvn-sx__rail.is-linked { scroll-snap-type: none; }
.hvn-sx__rail.is-springing { transition: transform 540ms cubic-bezier(.34, 1.56, .64, 1); }

.hvn-sx__tab {
  --rx: 0deg;
  --ry: 0deg;
  position: relative;
  display: grid;
  width: clamp(10.5rem, 30vw, 13.5rem);
  overflow: hidden;
  border: 1px solid var(--hvn-warm-line);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(20, 26, 34, .05), 0 6px 16px rgba(20, 26, 34, .06);
  cursor: pointer;
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:
    transform 560ms cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 260ms var(--hvn-ease),
    border-color 260ms var(--hvn-ease);
  -webkit-tap-highlight-color: transparent;
}

.hvn-sx__tab.is-tilting { transition: transform 90ms linear, box-shadow 260ms var(--hvn-ease), border-color 260ms var(--hvn-ease); }
.hvn-sx__rail.is-dragging .hvn-sx__tab { pointer-events: none; }

/* Gold rail across the top of the selected card; a soft light that follows
   the pointer while tilting. */
.hvn-sx__tab::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hvn-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms var(--hvn-ease);
}

.hvn-sx__tab::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at var(--gx, 50%) 0%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 62%);
  opacity: 0;
  transition: opacity 260ms var(--hvn-ease);
}

.hvn-sx__tab.is-tilting::after { opacity: 1; }

.hvn-sx__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hvn-warm-2); }

/* The thumbnail and the panel photo come from the same 16:9 master and are
   cropped very differently (near-square chip vs 16:10 panel), so each card
   names the focal point to hold. Default is dead centre. */
.hvn-sx__thumb picture { display: contents; }

.hvn-sx__thumb img,
.hvn-shot img { object-position: var(--hvn-focus, 50% 50%); }

.hvn-sx__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  transition: transform 800ms var(--hvn-ease);
}

.hvn-sx__tab:hover .hvn-sx__thumb img { transform: scale(1.06); }

.hvn-sx__tabtext { display: grid; gap: .2rem; padding: .7rem .9rem .9rem; transition: background-color 300ms var(--hvn-ease); }
.hvn-sx__no   { font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--hvn-gold-deep); }
.hvn-sx__name { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--hvn-text); }

.hvn-sx__tab:hover { border-color: rgba(34, 58, 87, .34); box-shadow: 0 16px 32px rgba(20, 26, 34, .12); }
.hvn-sx__tab:active { transform: perspective(760px) scale(.975); transition-duration: 120ms; }

/* Selected. Positional pairing, written out for six items. */
.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tab {
  border-color: var(--hvn-navy);
  box-shadow: inset 0 0 0 1px var(--hvn-navy), 0 16px 32px rgba(34, 58, 87, .2);
}

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tab::before,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tab::before,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tab::before,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tab::before,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tab::before,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tab::before { transform: scaleX(1); }

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tabtext { background: var(--hvn-navy); }

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__name { color: #FFFFFF; }

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__no { color: var(--hvn-gold-lift); }

/* Keyboard focus lands on the card, because the radio itself is off-screen. */
.hvn-sx__radio:nth-of-type(1):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(2):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(3):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(4):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(5):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(6):focus-visible ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tab {
  outline: 3px solid var(--hvn-gold);
  outline-offset: 3px;
}

/* --- rail controls ------------------------------------------------------- */

.hvn-sx__railnav { display: flex; justify-content: flex-end; gap: .5rem; margin: 0 0 .35rem; }
.hvn-sx__railnav[hidden] { display: none; }

.hvn-sx__railnav button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(34, 58, 87, .22);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hvn-navy);
  cursor: pointer;
  transition: background-color 220ms var(--hvn-ease), color 220ms var(--hvn-ease), border-color 220ms var(--hvn-ease), transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}

.hvn-sx__railnav button:hover:not(:disabled) { background: var(--hvn-navy); border-color: var(--hvn-navy); color: #FFFFFF; }
.hvn-sx__railnav button:active:not(:disabled) { transform: scale(.92); }
.hvn-sx__railnav button:disabled { opacity: .38; cursor: default; }
.hvn-sx__railnav button:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }

/* --- the panels --------------------------------------------------------- */

.hvn-sx__panels { display: grid; }

.hvn-sx__panel {
  grid-area: 1 / 1;
  display: grid;
  gap: 0;
  background: #FFFFFF;
  border: 1px solid var(--hvn-warm-line);
  border-radius: var(--hvn-radius-lg);
  overflow: hidden;
  box-shadow: var(--hvn-shadow-1);
}

.hvn-sx__fig { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--hvn-warm-2); }
.hvn-sx__fig img,
.hvn-sx__fig .hvn-shot { display: block; width: 100%; height: 100%; object-fit: cover; }

.hvn-sx__badge {
  position: absolute;
  left: 0; top: var(--hvn-s5);
  padding: .4rem .9rem .4rem 1.1rem;
  background: var(--hvn-navy);
  color: var(--hvn-gold-lift);
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
  font-variant-numeric: tabular-nums;
  border-radius: 0 999px 999px 0;
}

.hvn-sx__body { padding: clamp(1.25rem, .7rem + 2vw, 2.25rem); display: grid; align-content: start; gap: var(--hvn-s4); }
.hvn-sx__body h3 { margin: 0; font-size: var(--hvn-fs-h2); }
.hvn-sx__desc { margin: 0; color: var(--hvn-text-secondary); max-width: 48ch; }

.hvn-sx__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }

.hvn-sx__chips li {
  padding: .38rem .8rem;
  border-radius: 999px;
  background: var(--hvn-warm-2);
  border: 1px solid var(--hvn-warm-line);
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--hvn-navy-80);
}

.hvn-sx__incl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: var(--hvn-fs-small);
  color: var(--hvn-text-secondary);
}

.hvn-sx__incl > span { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--hvn-gold); color: var(--hvn-charcoal); }
.hvn-sx__actions { margin-top: var(--hvn-s2); }

/* "Worauf es ankommt" — the practical questions, one tap away. */
.hvn-sx__more { border-top: 1px solid var(--hvn-warm-line); padding-top: .2rem; }

.hvn-sx__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.75rem;
  list-style: none;
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--hvn-navy);
}

.hvn-sx__more summary::-webkit-details-marker { display: none; }

.hvn-sx__more summary::after {
  content: '';
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--hvn-gold-deep);
  border-bottom: 2px solid var(--hvn-gold-deep);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 260ms var(--hvn-ease);
}

.hvn-sx__more[open] summary::after { transform: rotate(-135deg); }
.hvn-sx__more summary:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; border-radius: 4px; }

.hvn-sx__qs { display: grid; gap: .55rem; margin: .15rem 0 .5rem; padding: 0; list-style: none; }

.hvn-sx__qs li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-size: var(--hvn-fs-small);
  line-height: 1.55;
  color: var(--hvn-text-secondary);
}

.hvn-sx__qs li::before {
  content: '?';
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 8px;
  background: rgba(34, 58, 87, .07);
  color: var(--hvn-navy);
  font-size: .8rem;
  font-weight: 700;
}

.hvn-sx__more[open] > .hvn-sx__qs { animation: hvnReveal 320ms var(--hvn-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .hvn-sx__tab,
  .hvn-sx__tab.is-tilting,
  .hvn-sx__thumb img,
  .hvn-sx__railnav button,
  .hvn-sx__rail.is-springing { transition: none; }
  .hvn-sx__tab,
  .hvn-sx__tab:active,
  .hvn-sx__tab:hover .hvn-sx__thumb img { transform: none; }
  .hvn-sx__more[open] > .hvn-sx__qs { animation: none; }
}

/* --- panel switching ---------------------------------------------------- */

@media (min-width: 760px) {
  .hvn-sx__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .hvn-sx__fig { aspect-ratio: auto; min-height: 22rem; }
}

@media (min-width: 1060px) {
  .hvn-sx__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hvn-sx__fig { min-height: 25rem; }
}

/* One panel visible at a time. `visibility` rather than `opacity` alone, so
   the inactive panels leave the accessibility tree and the tab order. */
.hvn-sx__panel {
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms var(--hvn-ease), transform 320ms var(--hvn-ease), visibility 0s linear 320ms;
}

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="0"],
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="1"],
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="2"],
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="3"],
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="4"],
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-wrap .hvn-sx__panels .hvn-sx__panel[data-i="5"] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hvn-sx__tab,
  .hvn-sx__arrow,
  .hvn-sx__panel { transition: none !important; }
  .hvn-sx__panel { transform: none !important; }
  .hvn-sx__tab:hover { transform: none; }
}


/* =========================================================================
   SERVICES EXPLORER — THE TRUCK DOCK (2026-09-16, Human-Owner-approved art)

   The approved HAVEN truck artwork is the fixed anchor on the left of a
   full-bleed navy dock. The service cards ride a rail to its right. Advancing
   moves the cards right → left: they approach the torn-paper edge, dim and
   settle slightly, and slide UNDER the artwork, vanishing exactly at the tear
   (the artwork is an alpha cut-out whose transparency follows that edge).

   ONE GEOMETRY SOURCE. Everything is derived from --dock-h:
     truck   height = dock, width = dock × 1.4283 (1344 × 941, never distorted)
     edge    the tear sits at ≈ 99 % of the cut-out width (max of the profile)
     card    ≈ half the dock tall, which keeps every card smaller than the
             truck's cargo box (60 % of the artwork height) and its cab
     lane    at 70.7 % of the dock — the bottom of the cargo box — so the
             cards rest on the same line the box does
   Every card has the same height, the same image box and a text block that
   always reserves two lines — so no card can sit higher or lower than another
   (the defect the Human Owner saw: two-line names made two cards taller).
   ========================================================================= */

.hvn-sx { overflow-x: clip; }

.hvn-sx__stage { position: relative; }

.hvn-sx__dock {
  --dock-h: clamp(21rem, 17rem + 12vw, 29rem);
  --truck-w: calc(var(--dock-h) * 1.4283);
  --truck-x: clamp(-2rem, calc((100% - var(--hvn-wrap)) / 2 - 2rem), 14rem);
  --edge: calc(var(--truck-x) + var(--truck-w) * .99);
  --card-h: calc(var(--dock-h) * .5);
  --card-w: calc(var(--dock-h) * .42);
  --card-gap: clamp(.75rem, .5rem + .6vw, 1.1rem);
  --lane-y: calc(var(--dock-h) * .707);
  --overlap: calc(var(--card-w) + var(--card-gap));

  position: relative;
  height: var(--dock-h);
  margin: 0 0 var(--hvn-s7);
  background:
    radial-gradient(60% 90% at 78% 40%, rgba(40, 84, 150, .28), rgba(0, 21, 52, 0) 70%),
    linear-gradient(90deg, #001B3F 0%, #00173A 45%, #001534 100%);
  color: #FFFFFF;
  isolation: isolate;
}

/* A faint blueprint grid on the open side, continuing the artwork's language. */
.hvn-sx__dock::before {
  content: '';
  position: absolute;
  inset: 0 0 0 var(--edge);
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 170, 235, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 235, .07) 1px, transparent 1px);
  background-size: 3rem 3rem;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 100%);
          mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 100%);
}

.hvn-sx__truck {
  position: absolute;
  top: 0;
  left: var(--truck-x);
  z-index: 3;
  width: var(--truck-w);
  height: var(--dock-h);
  /* The artwork's own left side fades into the dock, so no seam shows. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%);
}

.hvn-sx__truck img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

/* The lane the cards travel on: the cargo-box floor line, running into the tear. */
.hvn-sx__lane {
  position: absolute;
  z-index: 1;
  left: var(--edge);
  right: 0;
  top: var(--lane-y);
  height: 2px;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(192, 137, 83, .75) 0 14px, transparent 14px 26px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 55%, transparent 100%);
}

.hvn-sx__lane::before {
  content: '';
  position: absolute;
  left: .4rem;
  top: -.34rem;
  width: .75rem;
  height: .75rem;
  border-left: 2px solid var(--hvn-gold);
  border-bottom: 2px solid var(--hvn-gold);
  transform: rotate(45deg);
}

/* --- the rail --------------------------------------------------------------
   It starts one card-width UNDER the truck, so a card leaving the view has
   somewhere to go; the scroll padding parks the first card just clear of the
   tear. */
.hvn-sx__dock .hvn-sx__rail {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(var(--edge) - var(--overlap));
  right: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
  margin: 0;
  padding: calc(var(--lane-y) - var(--card-h) - .55rem) clamp(1.25rem, 4vw, 3rem) 0 calc(var(--overlap) + var(--card-gap) * 1.2);
  scroll-padding-inline: calc(var(--overlap) + var(--card-gap) * 1.2) 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4rem), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 4rem), transparent 100%);
}

.hvn-sx__dock .hvn-sx__rail.is-end {
  -webkit-mask-image: none;
          mask-image: none;
}

.hvn-sx__dock .hvn-sx__rail > li {
  --p: 0;
  flex: 0 0 var(--card-w);
  height: var(--card-h);
  /* Proximity to the tear (set by haven-tactile.js): the card settles a
     little and loses light as it enters the truck. */
  transform: translate3d(0, calc(var(--p) * 5px), 0) scale(calc(1 - var(--p) * .07));
  transform-origin: 0% 100%;
  filter: brightness(calc(1 - var(--p) * .42));
}

.hvn-sx__dock .hvn-sx__tab {
  width: 100%;
  height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
  border-color: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 14px 26px -10px rgba(0, 6, 20, .7), 0 2px 4px rgba(0, 6, 20, .35);
}

.hvn-sx__dock .hvn-sx__thumb { aspect-ratio: auto; height: 100%; min-height: 0; }

.hvn-sx__dock .hvn-sx__tabtext {
  align-content: start;
  gap: .12rem;
  padding: .55rem .75rem .65rem;
}

.hvn-sx__dock .hvn-sx__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.25em);
  font-size: clamp(.8125rem, .74rem + .22vw, .9375rem);
  line-height: 1.25;
  -webkit-hyphens: auto;
          hyphens: auto;
  /* Long enough for "Messetransport", too long for "vehicle" — see the note in
     haven-sprint.css. */
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  hyphenate-limit-chars: 8 4 4;
}

.hvn-sx__dock .hvn-sx__tab:hover {
  border-color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 22px 34px -12px rgba(0, 6, 20, .85), 0 0 0 1px rgba(192, 137, 83, .6);
}

/* Selected card: gold frame and gold text band — never a vertical offset, so
   the shared baseline holds for the chosen card too. */
.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tab,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tab {
  border-color: var(--hvn-gold);
  box-shadow: inset 0 0 0 1px var(--hvn-gold), 0 22px 34px -12px rgba(0, 6, 20, .9);
}

/* On the navy dock a navy text band would disappear: the chosen card takes the
   gold band instead (charcoal on gold, 6.1 : 1). */
.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__tabtext,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__tabtext { background: var(--hvn-gold); }

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__name,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__name { color: var(--hvn-charcoal); }

.hvn-sx__radio:nth-of-type(1):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(1) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(2):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(2) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(3):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(3) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(4):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(4) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(5):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(5) .hvn-sx__no,
.hvn-sx__radio:nth-of-type(6):checked ~ .hvn-sx__dock .hvn-sx__rail li:nth-child(6) .hvn-sx__no { color: var(--hvn-navy-deep); } /* A11Y R-19: navy on tan is 3.83:1; navy-deep is 4.82:1 */

/* Arrival: on first view the cards drive in from the right, one after another. */
.hvn-sx__dock.is-arriving .hvn-sx__rail > li > .hvn-sx__tab { animation: hvnSxArrive 900ms cubic-bezier(.2, .8, .2, 1) both; }
.hvn-sx__dock.is-arriving .hvn-sx__rail > li:nth-child(2) > .hvn-sx__tab { animation-delay: 70ms; }
.hvn-sx__dock.is-arriving .hvn-sx__rail > li:nth-child(3) > .hvn-sx__tab { animation-delay: 140ms; }
.hvn-sx__dock.is-arriving .hvn-sx__rail > li:nth-child(4) > .hvn-sx__tab { animation-delay: 210ms; }
.hvn-sx__dock.is-arriving .hvn-sx__rail > li:nth-child(5) > .hvn-sx__tab { animation-delay: 280ms; }
.hvn-sx__dock.is-arriving .hvn-sx__rail > li:nth-child(6) > .hvn-sx__tab { animation-delay: 350ms; }

@keyframes hvnSxArrive {
  from { opacity: 0; transform: translate3d(38vw, 0, 0); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* --- dock bar: hint + controls ------------------------------------------- */

.hvn-sx__dockbar {
  position: absolute;
  z-index: 4;
  left: var(--edge);
  right: clamp(1.25rem, 4vw, 3rem);
  bottom: calc(var(--dock-h) * .06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  pointer-events: none;
}

.hvn-sx__hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}

.hvn-sx__hint svg { color: var(--hvn-gold-lift); }
.hvn-sx__hint-short { display: none; }

.hvn-sx__dock .hvn-sx__railnav { margin: 0; pointer-events: auto; }

.hvn-sx__dock .hvn-sx__railnav button {
  border-color: rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .06);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

.hvn-sx__dock .hvn-sx__railnav button:hover:not(:disabled) { background: var(--hvn-gold); border-color: var(--hvn-gold); color: var(--hvn-charcoal); }
.hvn-sx__dock .hvn-sx__railnav button:disabled { opacity: .3; }

/* --- tablet and phone: same metaphor, re-composed --------------------------
   The whole truck cannot sit beside a usable rail on a narrow screen, so the
   artwork slides left until the tear sits at ~44 % of the width: the cargo box
   with the HAVEN mark and the torn edge stay in view, the cab leaves the
   frame, and one full card plus the edge of the next are always visible —
   the visible edge is the swipe affordance. */
@media (max-width: 1023.98px) {
  .hvn-sx__dock {
    --dock-h: clamp(21rem, 19rem + 6vw, 24rem);
    --card-w: clamp(8.75rem, 7.5rem + 6vw, 10.5rem);
    --card-h: calc(var(--card-w) * 1.2);
    --truck-x: calc(44% - var(--truck-w) * .99);
  }
  .hvn-sx__dock .hvn-sx__lane::before { display: none; }
}

@media (max-width: 767.98px) {
  .hvn-sx__dock { --truck-x: calc(44% - var(--truck-w) * .99); --card-gap: .7rem; margin-bottom: var(--hvn-s6); }
  .hvn-sx__hint .hvn-sx__hint-long { display: none; }
  .hvn-sx__hint .hvn-sx__hint-short { display: inline; }
  .hvn-sx__dockbar { justify-content: flex-end; }
  .hvn-sx__dock .hvn-sx__railnav { display: none; }
  .hvn-sx__dock .hvn-sx__rail { padding-right: 1rem; }
  .hvn-sx__dock .hvn-sx__tabtext { padding: .5rem .6rem .55rem; }
}

/* Narrow phones: with the real Montserrat webfont the longest English name
   ("Event & exhibition transport") needs three lines below ~380px. Every card
   reserves three lines there, so the shared geometry holds (verified on the
   Lab, 2026-09-17). */
@media (max-width: 379.98px) {
  .hvn-sx__dock .hvn-sx__name { -webkit-line-clamp: 3; min-height: calc(3 * 1.25em); }
}

/* Narrow phones: a slightly smaller card, so the next one always peeks out. */
@media (max-width: 359.98px) {
  .hvn-sx__dock { --truck-x: calc(40% - var(--truck-w) * .99); --card-w: 8.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hvn-sx__dock .hvn-sx__rail > li { transform: none; filter: none; }
  .hvn-sx__dock .hvn-sx__rail > li > .hvn-sx__tab { transition: none; }
  .hvn-sx__dock.is-arriving .hvn-sx__rail > li > .hvn-sx__tab { animation: none; }
}