/**
 * HAVEN Child — the service-aware calculator and the quote-page mode switch.
 *
 * Loaded on the quote page, and on service pages for the shared parking
 * notice. Builds on haven-forms.css. No new colour beyond the approved navy,
 * charcoal, warm ramp, tan/gold and the restricted red.
 *
 * Design intent (2026-09-15): a configurator, not a contact form. Service tiles
 * that carry their starting price, size cards that carry theirs, an add-on
 * board of tactile cards, switches and steppers, a photo drop with previews,
 * a job-ticket summary with the live estimate, and a mobile action bar that
 * keeps the estimate under the thumb.
 */

/* =========================================================================
   1. MODE SWITCH — calculator / short enquiry
   ========================================================================= */

.hvn-qswitch__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.hvn-qswitch__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  max-width: 44rem;
  margin: 0 auto var(--hvn-s7);
  padding: .45rem;
  border: 1px solid var(--hvn-warm-line);
  border-radius: 22px;
  background: #FFFFFF;
  box-shadow: var(--hvn-shadow-1);
}

.hvn-qswitch__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .8rem;
  align-items: center;
  padding: .8rem 1rem;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color 260ms var(--hvn-ease), box-shadow 260ms var(--hvn-ease), transform 220ms var(--hvn-f-spring);
}

.hvn-qswitch__tab:hover { background: var(--hvn-warm); }
.hvn-qswitch__tab:active { transform: scale(.985); }

.hvn-qswitch__ico {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 11px;
  background: rgba(34, 58, 87, .07);
  color: var(--hvn-navy);
  transition: background-color 260ms var(--hvn-ease), color 260ms var(--hvn-ease);
}

.hvn-qswitch__t { font-weight: 600; color: var(--hvn-text); line-height: 1.25; }
.hvn-qswitch__d { font-size: .75rem; color: var(--hvn-text-secondary); line-height: 1.35; }

#hvn-qmode-calc:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-calc"],
#hvn-qmode-quick:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-quick"] {
  background: var(--hvn-navy);
  box-shadow: 0 10px 22px rgba(34, 58, 87, .26);
}

#hvn-qmode-calc:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-calc"] .hvn-qswitch__t,
#hvn-qmode-quick:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-quick"] .hvn-qswitch__t { color: #FFFFFF; }

#hvn-qmode-calc:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-calc"] .hvn-qswitch__d,
#hvn-qmode-quick:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-quick"] .hvn-qswitch__d { color: rgba(255, 255, 255, .76); }

#hvn-qmode-calc:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-calc"] .hvn-qswitch__ico,
#hvn-qmode-quick:checked ~ .hvn-qswitch__tabs label[for="hvn-qmode-quick"] .hvn-qswitch__ico {
  background: var(--hvn-gold);
  color: var(--hvn-charcoal);
}

#hvn-qmode-calc:focus-visible ~ .hvn-qswitch__tabs label[for="hvn-qmode-calc"],
#hvn-qmode-quick:focus-visible ~ .hvn-qswitch__tabs label[for="hvn-qmode-quick"] {
  outline: 3px solid var(--hvn-gold);
  outline-offset: 2px;
}

#hvn-qmode-calc:checked ~ .hvn-qswitch__panel--quick,
#hvn-qmode-quick:checked ~ .hvn-qswitch__panel--calc { display: none; }

@media (max-width: 459.98px) {
  .hvn-qswitch__tab { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: .7rem .5rem; }
  .hvn-qswitch__ico { grid-row: auto; }
  .hvn-qswitch__d { display: none; }
}

/* =========================================================================
   2. CALCULATOR FRAME
   ========================================================================= */

.hvn-calc__head { max-width: 46rem; margin: 0 0 var(--hvn-s7); }
.hvn-calc__head .hvn-eyebrow { color: var(--hvn-gold-deep); }
.hvn-calc__head h2 { margin: var(--hvn-s2) 0 var(--hvn-s3); }
.hvn-calc__lede { margin: 0; max-width: 58ch; font-size: var(--hvn-fs-lede); color: var(--hvn-text-secondary); }

.hvn-calc > .hvn-note { max-width: 46rem; }

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

@media (min-width: 1024px) {
  .hvn-calc__shell { grid-template-columns: minmax(0, 1fr) 21.5rem; gap: var(--hvn-s7); }
  .hvn-calc__summary { position: sticky; top: calc(var(--hvn-nav-h) + var(--hvn-s4)); }
}

/* `clip`, not `hidden`: the card must still clip the glint, but a `hidden`
   ancestor would turn the sticky mobile action bar inside it into a no-op. */
.hvn-calc__card { overflow: clip; }

.hvn-calc__step { min-width: 0; margin: 0; padding: 0; border: 0; scroll-margin-top: calc(var(--hvn-nav-h) + 1rem); }
.hvn-calc__step[hidden] { display: none; }
.hvn-calc [data-svc][hidden],
.hvn-calc [data-svc-empty][hidden] { display: none !important; }

/* Without the script: every step and every service's question on one page. */
.hvn-calc:not(.is-enhanced) .hvn-calc__step + .hvn-calc__step {
  margin-top: var(--hvn-s7);
  padding-top: var(--hvn-s6);
  border-top: 1px solid var(--hvn-warm-line);
}

.hvn-calc:not(.is-enhanced) .hvn-review,
.hvn-calc:not(.is-enhanced) .hvn-review__edit,
.hvn-calc:not(.is-enhanced) [data-svc-empty] { display: none; }
.hvn-calc:not(.is-enhanced) .hvn-alt::before { content: ' / '; }

.is-enhanced .hvn-calc__step.is-entering { animation: hvnStepIn 440ms var(--hvn-ease) both; }
.is-enhanced .hvn-calc__step.is-entering[data-dir="back"] { animation-name: hvnStepBack; }

@keyframes hvnStepIn   { from { opacity: 0; transform: translate3d(22px, 0, 0); }  to { opacity: 1; transform: none; } }
@keyframes hvnStepBack { from { opacity: 0; transform: translate3d(-22px, 0, 0); } to { opacity: 1; transform: none; } }

.hvn-calc__legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 var(--hvn-s5);
  padding: 0;
  font-size: var(--hvn-fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--hvn-text);
  outline: none;
}

/* Every following element clears the floated legend — not only the next one.
   The next sibling is often hidden by service (e.g. the empty-state line, or
   the property question for office moves), and a hidden element clears
   nothing: the visible content then flowed beside the full-width float and
   was squeezed into a sliver at the right edge. */
.hvn-calc__legend ~ * { clear: both; }
.hvn-seg__legend ~ * { clear: both; }

/* The legend receives focus when a step opens; the indicator moves onto the
   step number instead of framing the whole heading. */
.hvn-calc .hvn-calc__legend:focus-visible { outline: none !important; }

.hvn-calc .hvn-calc__legend:focus-visible .hvn-calc__sn {
  background: var(--hvn-navy);
  border-color: var(--hvn-navy);
  color: var(--hvn-gold-lift);
  box-shadow: 0 0 0 3px rgba(192, 137, 83, .5);
}

.hvn-calc__sn {
  flex: none;
  padding: .22rem .6rem;
  border: 1px solid rgba(192, 137, 83, .5);
  border-radius: 999px;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--hvn-gold-deep);
}

.hvn-calc__sub { margin: 0 0 var(--hvn-s5); max-width: 62ch; color: var(--hvn-text-secondary); }
.hvn-calc__fine { margin: var(--hvn-s3) 0 0; font-size: var(--hvn-fs-small); line-height: 1.6; color: var(--hvn-text-secondary); }

.hvn-calc__grid2 { display: grid; grid-template-columns: 1fr; gap: 0 var(--hvn-s4); }

@media (min-width: 620px) {
  .hvn-calc__grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hvn-calc__grid2 .hvn-field--wide { grid-column: 1 / -1; }
}

.hvn-calc__access { display: grid; gap: 0 var(--hvn-s5); }

@media (min-width: 900px) {
  .hvn-calc__access { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hvn-calc__access .hvn-seg__row { flex-direction: column; align-items: stretch; }
  .hvn-calc__access .hvn-seg__opt span { width: 100%; }
}

.hvn-calc__flex { display: grid; align-content: start; gap: .6rem; margin-bottom: var(--hvn-s4); }
.hvn-calc__flex .hvn-check--pill { justify-self: start; margin: 0; }

.hvn-calc__weekend {
  margin: 0;
  padding: .6rem .8rem;
  border-left: 3px solid var(--hvn-gold);
  border-radius: 0 10px 10px 0;
  background: #F6F1E9;
  font-size: var(--hvn-fs-small);
  line-height: 1.5;
  color: #4A3720;
}

.hvn-calc__privacy {
  margin: var(--hvn-s4) 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--hvn-text-secondary);
}

/* =========================================================================
   3. PROGRESS RAIL
   ========================================================================= */

.hvn-calc__progress {
  position: relative;
  margin: calc(var(--hvn-card-pad) * -1) calc(var(--hvn-card-pad) * -1) var(--hvn-s6);
  padding: calc(var(--hvn-s5) + 4px) var(--hvn-card-pad) var(--hvn-s4);
  background: linear-gradient(180deg, var(--hvn-warm) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--hvn-warm-line);
}

.hvn-calc__progress[hidden] { display: none; }

.hvn-calc__count { margin: 0 0 .85rem; font-size: var(--hvn-fs-small); font-weight: 600; color: var(--hvn-navy-80); }

.hvn-calc__progress ol {
  --hvn-prog: 0;
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvn-calc__progress ol::before,
.hvn-calc__progress ol::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: calc(1rem - 1px);
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  border-radius: 2px;
  transform-origin: left center;
}

.hvn-calc__progress ol::before { background: rgba(34, 58, 87, .14); }

.hvn-calc__progress ol::after {
  background: linear-gradient(90deg, var(--hvn-gold) 0%, var(--hvn-navy) 100%);
  transform: scaleX(var(--hvn-prog));
  transition: transform 560ms var(--hvn-ease);
}

.hvn-calc__pstep {
  -webkit-appearance: none;
          appearance: none;
  display: grid;
  justify-items: center;
  gap: .4rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.hvn-calc__pstep:disabled { cursor: default; }

.hvn-calc__pnum {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1.5px solid rgba(34, 58, 87, .24);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hvn-navy-80);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color 300ms var(--hvn-ease), border-color 300ms var(--hvn-ease), color 300ms var(--hvn-ease), box-shadow 300ms var(--hvn-ease), transform 360ms var(--hvn-f-spring);
}

.hvn-calc__plab {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--hvn-navy-80);
  text-align: center;
}

.hvn-calc__pstep:disabled .hvn-calc__pnum,
.hvn-calc__pstep:disabled .hvn-calc__plab { opacity: .5; }

.hvn-calc__pstep:not(:disabled):hover .hvn-calc__pnum { border-color: var(--hvn-navy); }

.hvn-calc__pstep.is-done .hvn-calc__pnum { background: var(--hvn-gold); border-color: var(--hvn-gold); color: var(--hvn-charcoal); }

.hvn-calc__pstep.is-current .hvn-calc__pnum {
  background: var(--hvn-navy);
  border-color: var(--hvn-navy);
  color: var(--hvn-gold-lift);
  box-shadow: 0 0 0 4px rgba(192, 137, 83, .28);
  transform: scale(1.1);
}

.hvn-calc__pstep.is-current .hvn-calc__plab { color: var(--hvn-navy); }
.hvn-calc__pstep:focus-visible .hvn-calc__pnum { outline: 3px solid var(--hvn-gold); outline-offset: 3px; }

@media (max-width: 699.98px) {
  .hvn-calc__plab {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .hvn-calc__pnum { width: 1.75rem; height: 1.75rem; font-size: .75rem; }
  .hvn-calc__progress ol::before,
  .hvn-calc__progress ol::after { top: calc(.875rem - 1px); }
}

/* =========================================================================
   4. OPTION CARDS — tactile tiles
   ========================================================================= */

.hvn-optset { min-width: 0; margin: 0 0 var(--hvn-s5); padding: 0; border: 0; }

.hvn-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: .75rem;
  margin: 0 0 var(--hvn-s4);
}

.hvn-opts--prop { margin-bottom: .35rem; }
.hvn-opts--vol  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.hvn-opts--svc  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }
.hvn-opts--size { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .65rem; }

.hvn-opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.hvn-opt input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.hvn-opt__body {
  position: relative;
  display: grid;
  align-content: start;
  gap: .55rem;
  height: 100%;
  min-height: 6.5rem;
  padding: 1rem 2.6rem 1.05rem 1rem;
  border: 1.5px solid rgba(34, 58, 87, .22);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(20, 26, 34, .05), 0 3px 0 rgba(34, 58, 87, .06);
  transition:
    border-color 220ms var(--hvn-ease),
    background-color 220ms var(--hvn-ease),
    box-shadow 260ms var(--hvn-ease),
    transform 300ms var(--hvn-f-spring);
}

@media (hover: hover) {
  .hvn-opt:hover .hvn-opt__body {
    border-color: rgba(34, 58, 87, .5);
    box-shadow: 0 12px 24px rgba(20, 26, 34, .10), 0 3px 0 rgba(34, 58, 87, .08);
    transform: translateY(-2px);
  }
}

.hvn-opt:active .hvn-opt__body {
  transform: translateY(2px) scale(.985);
  box-shadow: 0 1px 3px rgba(20, 26, 34, .1), 0 0 0 rgba(34, 58, 87, 0);
  transition-duration: 90ms;
}

.hvn-opt__ico {
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 12px;
  background: rgba(34, 58, 87, .08);
  color: var(--hvn-navy);
  transition: background-color 260ms var(--hvn-ease), color 260ms var(--hvn-ease), transform 360ms var(--hvn-f-spring);
}

/* hyphenate-limit-chars: long German compounds still break, ordinary English
   words stay whole (the Human Owner saw "vehi-cle"). See haven-sprint.css. */
.hvn-opt__title { min-width: 0; font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--hvn-text); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 8 4 4; }
.hvn-opt__desc { font-size: var(--hvn-fs-small); line-height: 1.45; color: var(--hvn-text-secondary); }

.hvn-opt__from,
.hvn-opt__price {
  justify-self: start;
  padding: .14rem .55rem;
  border-radius: 999px;
  background: rgba(34, 58, 87, .07);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hvn-navy);
  transition: background-color 240ms var(--hvn-ease), color 240ms var(--hvn-ease);
}

.hvn-opt__check {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid rgba(34, 58, 87, .28);
  border-radius: 999px;
  background: #FFFFFF center / .72rem no-repeat;
  transition: background-color 220ms var(--hvn-ease), border-color 220ms var(--hvn-ease), transform 360ms var(--hvn-f-spring);
}

/* Selected: the tile turns navy — unmistakable, and never colour alone: the
   check mark appears too. */
.hvn-opt input:checked + .hvn-opt__body {
  border-color: var(--hvn-navy);
  background: linear-gradient(160deg, var(--hvn-navy) 0%, var(--hvn-navy-deep) 100%);
  box-shadow: 0 14px 28px rgba(34, 58, 87, .28), 0 3px 0 var(--hvn-charcoal);
}

.hvn-opt input:checked + .hvn-opt__body .hvn-opt__title { color: #FFFFFF; }
.hvn-opt input:checked + .hvn-opt__body .hvn-opt__desc { color: rgba(255, 255, 255, .78); }

.hvn-opt input:checked + .hvn-opt__body .hvn-opt__ico {
  background: var(--hvn-gold);
  color: var(--hvn-charcoal);
  transform: rotate(-5deg) scale(1.05);
}

.hvn-opt input:checked + .hvn-opt__body .hvn-opt__from,
.hvn-opt input:checked + .hvn-opt__body .hvn-opt__price { background: rgba(255, 255, 255, .12); color: var(--hvn-gold-lift); }

.hvn-opt input:checked + .hvn-opt__body .hvn-opt__check {
  border-color: var(--hvn-gold);
  background-color: var(--hvn-gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A22' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
  transform: scale(1.08);
}

.hvn-opt input:checked + .hvn-opt__body .hvn-stud__txt strong { color: #FFFFFF; }

.hvn-opt input:focus-visible + .hvn-opt__body { outline: 3px solid var(--hvn-gold); outline-offset: 3px; }

.hvn-opts.is-invalid .hvn-opt__body,
.hvn-optset.is-invalid .hvn-opt__body,
.hvn-sizes.is-invalid .hvn-opt__body { border-color: var(--hvn-f-err); }

/* The student tile carries its seal in the corner area. */
.hvn-opt--student .hvn-opt__body { padding-bottom: .9rem; }
.hvn-opt--student .hvn-stud { margin-top: .1rem; }

/* Compact variant: icon beside the title. */
.hvn-opt--sm .hvn-opt__body {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 3.9rem;
  padding: .7rem 2rem .7rem .7rem;
}

.hvn-opt--sm .hvn-opt__ico { width: 2.3rem; height: 2.3rem; }
.hvn-opt--sm .hvn-opt__check { top: .5rem; right: .5rem; width: 1.15rem; height: 1.15rem; background-size: .62rem; }
.hvn-opt--route .hvn-opt__body { grid-template-columns: minmax(0, 1fr); gap: .2rem; }

/* Size cards: label on top, price below. */
.hvn-opt--size .hvn-opt__body { min-height: 5.25rem; gap: .45rem; padding: .85rem 2.3rem .9rem .95rem; }
.hvn-opt--size .hvn-opt__check { top: .7rem; right: .7rem; }

/* Volume: a three-bar meter instead of an icon. */
.hvn-opt__meter { display: flex; align-items: flex-end; gap: 4px; height: 1.75rem; }
.hvn-opt__meter i { width: .6rem; border-radius: 3px; background: rgba(34, 58, 87, .14); transition: background-color 260ms var(--hvn-ease); }
.hvn-opt__meter i:nth-child(1) { height: 40%; }
.hvn-opt__meter i:nth-child(2) { height: 70%; }
.hvn-opt__meter i:nth-child(3) { height: 100%; }

.hvn-opt__meter[data-vol="klein"]  i:nth-child(-n+1),
.hvn-opt__meter[data-vol="mittel"] i:nth-child(-n+2),
.hvn-opt__meter[data-vol="gross"]  i:nth-child(-n+3) { background: var(--hvn-navy); }

.hvn-opt__meter[data-vol="unklar"] i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(34, 58, 87, .3); }

.hvn-opt input:checked + .hvn-opt__body .hvn-opt__meter i { background: rgba(255, 255, 255, .2); }
.hvn-opt input:checked + .hvn-opt__body .hvn-opt__meter[data-vol="klein"]  i:nth-child(-n+1),
.hvn-opt input:checked + .hvn-opt__body .hvn-opt__meter[data-vol="mittel"] i:nth-child(-n+2),
.hvn-opt input:checked + .hvn-opt__body .hvn-opt__meter[data-vol="gross"]  i:nth-child(-n+3) { background: var(--hvn-gold); }

.hvn-sizes { margin: 0 0 var(--hvn-s5); }
.hvn-sizeset { margin-bottom: 0; }
.hvn-sizeset .hvn-seg__legend { align-items: center; }
.hvn-volset { margin: 0 0 var(--hvn-s5); }

/* Area chips — the student comparison. */
.hvn-compare {
  padding: 1rem 1.05rem 1.1rem;
  border: 1.5px dashed rgba(183, 35, 44, .35);
  border-radius: 16px;
  background: #FFF9F8;
}

.hvn-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.hvn-chip { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hvn-chip input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.hvn-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .45rem .95rem;
  border: 1.5px solid rgba(34, 58, 87, .24);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: .875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hvn-navy);
  transition: background-color 200ms var(--hvn-ease), border-color 200ms var(--hvn-ease), color 200ms var(--hvn-ease), transform 220ms var(--hvn-f-spring);
}

.hvn-chip:active span { transform: scale(.95); }
.hvn-chip input:checked + span { background: var(--hvn-navy); border-color: var(--hvn-navy); color: #FFFFFF; }
.hvn-chip input:checked + span::before { content: '✓'; margin-right: .4rem; color: var(--hvn-gold-lift); }
.hvn-chip input:focus-visible + span { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }

/* =========================================================================
   5. SEGMENTS AND CHECKBOXES
   ========================================================================= */

.hvn-seg,
.hvn-checks { min-width: 0; margin: 0 0 var(--hvn-s5); padding: 0; border: 0; }

.hvn-seg__legend {
  float: left;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .6rem;
  padding: 0;
}

.hvn-seg__legend + * { clear: both; }
.hvn-seg__legend > span:first-child { font-size: .9375rem; font-weight: 600; line-height: 1.35; color: var(--hvn-text); }

.hvn-seg__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.hvn-seg .hvn-field__err { margin-top: .5rem; }

.hvn-seg__opt { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hvn-seg__opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.hvn-seg__opt span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: .55rem 1.1rem;
  border: 1.5px solid rgba(34, 58, 87, .26);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hvn-navy);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 2px 0 rgba(34, 58, 87, .06);
  transition: background-color 220ms var(--hvn-ease), border-color 220ms var(--hvn-ease), color 220ms var(--hvn-ease), box-shadow 240ms var(--hvn-ease), transform 260ms var(--hvn-f-spring);
}

@media (hover: hover) {
  .hvn-seg__opt:hover span { border-color: rgba(34, 58, 87, .55); }
}

.hvn-seg__opt:active span { transform: translateY(1px) scale(.97); }

.hvn-seg__opt input:checked + span {
  background: var(--hvn-navy);
  border-color: var(--hvn-navy);
  color: #FFFFFF;
  box-shadow: 0 6px 14px rgba(34, 58, 87, .24);
}

.hvn-seg__opt input:checked + span::before {
  content: '';
  width: .45rem;
  height: .45rem;
  margin-right: .5rem;
  border-radius: 999px;
  background: var(--hvn-gold-lift);
}

.hvn-seg__opt input:focus-visible + span { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }
.hvn-seg.is-invalid .hvn-seg__opt span { border-color: var(--hvn-f-err); }

.hvn-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  min-height: 2.75rem;
  margin: 0 0 .5rem;
  padding: .7rem .9rem;
  border: 1.5px solid rgba(34, 58, 87, .2);
  border-radius: 12px;
  background: #FFFFFF;
  cursor: pointer;
  line-height: 1.45;
  color: var(--hvn-text);
  transition: border-color 220ms var(--hvn-ease), background-color 220ms var(--hvn-ease);
}

.hvn-check:hover { border-color: rgba(34, 58, 87, .45); }
.hvn-check input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.hvn-check__box {
  flex: 0 0 1.3rem;
  height: 1.3rem;
  margin-top: .05rem;
  border: 1.5px solid rgba(34, 58, 87, .4);
  border-radius: 6px;
  background: #FFFFFF center / .8rem no-repeat;
  transition: background-color 200ms var(--hvn-ease), border-color 200ms var(--hvn-ease), transform 300ms var(--hvn-f-spring);
}

.hvn-check input:checked + .hvn-check__box {
  border-color: var(--hvn-navy);
  background-color: var(--hvn-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E");
  transform: scale(1.06);
}

.hvn-check:has(input:checked) { border-color: var(--hvn-navy); background: #FBFAF7; }
.hvn-check input:focus-visible + .hvn-check__box { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }
.hvn-check--pill { display: inline-flex; border-radius: 999px; padding-inline: .75rem 1.1rem; }

/* =========================================================================
   6. ROUTE STRIP — abstract on purpose: no map, no kilometres
   ========================================================================= */

.hvn-route {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "pa line pb" "ta ta tb";
  gap: .5rem .75rem;
  align-items: center;
  margin: var(--hvn-s2) 0 var(--hvn-s5);
  padding: 1rem 1.1rem 1.05rem;
  border-radius: 16px;
  background: var(--hvn-charcoal);
  color: #FFFFFF;
}

.hvn-route__pin { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; font-size: .8125rem; font-weight: 700; }
.hvn-route__pin--a { grid-area: pa; background: var(--hvn-gold); color: var(--hvn-charcoal); }
.hvn-route__pin--b { grid-area: pb; border: 2px solid var(--hvn-gold-lift); color: var(--hvn-gold-lift); }
.hvn-route__line { grid-area: line; width: 100%; height: 2.5rem; overflow: visible; }

.hvn-route__line path {
  fill: none;
  stroke: rgba(255, 255, 255, .26);
  stroke-width: 2;
  stroke-dasharray: 6 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 400ms var(--hvn-ease);
}

.hvn-route.is-complete .hvn-route__line path { stroke: var(--hvn-gold-lift); animation: hvnRouteDash 1400ms var(--hvn-ease) 1; }

@keyframes hvnRouteDash { from { stroke-dashoffset: 168; } to { stroke-dashoffset: 0; } }

.hvn-route__text { min-width: 0; font-size: var(--hvn-fs-small); line-height: 1.45; color: rgba(255, 255, 255, .78); overflow-wrap: anywhere; }
.hvn-route__text--a { grid-area: ta; }
.hvn-route__text--b { grid-area: tb; text-align: right; }

@media (max-width: 519.98px) {
  .hvn-route { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "pa ta" "line line" "pb tb"; }
  .hvn-route__text--b { text-align: left; }
  .hvn-route__line { height: 1.75rem; }
}

.hvn-opts.hvn-opts--route { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .7rem; }

/* =========================================================================
   7. ADD-ON CONFIGURATOR
   ========================================================================= */

.hvn-addons { display: grid; gap: 1.25rem; margin: 0 0 var(--hvn-s6); }

.hvn-addons__group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: .75rem;
}

.hvn-addons__head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem .6rem;
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--hvn-text-secondary);
}
.hvn-addons__head strong { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hvn-navy); }

/* Unpriced requests: visibly a different kind of card — dashed, no gold. */
.hvn-addons__group--context { padding: 1rem; border: 1.5px dashed rgba(34, 58, 87, .24); border-radius: 18px; background: rgba(34, 58, 87, .025); }
.hvn-addons__group--context .hvn-addon__card { background: #FFFFFF; }

.hvn-addon { position: relative; display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.hvn-addon[hidden] { display: none !important; }

.hvn-addon__card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  height: 100%;
  padding: .9rem .95rem;
  border: 1.5px solid rgba(34, 58, 87, .2);
  border-radius: 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 3px 0 rgba(34, 58, 87, .05);
  transition: border-color 220ms var(--hvn-ease), background-color 220ms var(--hvn-ease), box-shadow 260ms var(--hvn-ease), transform 300ms var(--hvn-f-spring);
}

.hvn-addon--toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; }

@media (hover: hover) {
  .hvn-addon--toggle:hover .hvn-addon__card { border-color: rgba(34, 58, 87, .48); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(20, 26, 34, .09); }
}

.hvn-addon--toggle:active .hvn-addon__card { transform: translateY(1px) scale(.99); transition-duration: 90ms; }

.hvn-addon__input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.hvn-addon__ico {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 13px;
  background: rgba(34, 58, 87, .08);
  color: var(--hvn-navy);
  transition: background-color 240ms var(--hvn-ease), color 240ms var(--hvn-ease), transform 360ms var(--hvn-f-spring);
}

.hvn-addon__text { display: grid; gap: .2rem; min-width: 0; }
.hvn-addon__title { font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--hvn-text); }
.hvn-addon__desc { font-size: .8125rem; line-height: 1.45; color: var(--hvn-text-secondary); }

.hvn-addon__price {
  justify-self: start;
  margin-top: .2rem;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: rgba(192, 137, 83, .14);
  font-size: .8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hvn-gold-deep);
}

.hvn-addon__price.is-ctx { background: transparent; border: 1.5px dashed rgba(34, 58, 87, .35); border-radius: 8px; color: var(--hvn-navy-80); font-weight: 500; font-variant-numeric: normal; line-height: 1.35; }
.hvn-addons__group--context .hvn-addon__card { align-items: start; }
.hvn-addons__group--context .hvn-addon__switch { align-self: center; }
.hvn-addon__price.is-tbd { background: transparent; border: 1.5px dashed rgba(34, 58, 87, .35); color: var(--hvn-navy-80); }

/* The switch. */
.hvn-addon__switch {
  position: relative;
  width: 2.9rem;
  height: 1.7rem;
  border-radius: 999px;
  background: rgba(34, 58, 87, .18);
  box-shadow: inset 0 1px 3px rgba(20, 26, 34, .18);
  transition: background-color 240ms var(--hvn-ease);
}

.hvn-addon__switch i {
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(20, 26, 34, .25);
  transition: transform 340ms var(--hvn-f-spring);
}

.hvn-addon__input:checked + .hvn-addon__card .hvn-addon__switch { background: var(--hvn-navy); }
.hvn-addon__input:checked + .hvn-addon__card .hvn-addon__switch i { transform: translateX(1.2rem); background: var(--hvn-gold-lift); }
.hvn-addon__input:focus-visible + .hvn-addon__card { outline: 3px solid var(--hvn-gold); outline-offset: 3px; }

/* Active state for every kind of add-on. */
.hvn-addon.is-on .hvn-addon__card {
  border-color: var(--hvn-navy);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F0EA 100%);
  box-shadow: inset 0 0 0 1px var(--hvn-navy), 0 12px 24px rgba(34, 58, 87, .14);
}

.hvn-addon.is-on .hvn-addon__ico { background: var(--hvn-navy); color: var(--hvn-gold-lift); transform: rotate(-6deg); }

.hvn-addon.is-on .hvn-addon__card::after {
  content: '';
  position: absolute;
  top: -.45rem;
  left: -.45rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--hvn-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A22' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / .7rem no-repeat;
  box-shadow: 0 3px 8px rgba(192, 137, 83, .45);
  animation: hvnFieldOk 380ms var(--hvn-f-spring) both;
}

/* Level (assembly): three pills under the text. */
.hvn-addon--level .hvn-addon__card { grid-template-columns: auto minmax(0, 1fr); }
.hvn-addon__levels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; }
.hvn-addon__lvl { position: relative; cursor: pointer; }
.hvn-addon__lvl input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; }

.hvn-addon__lvl span {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  min-height: 2.6rem;
  padding: .5rem .8rem;
  border: 1.5px solid rgba(34, 58, 87, .22);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hvn-navy);
  transition: background-color 200ms var(--hvn-ease), border-color 200ms var(--hvn-ease), color 200ms var(--hvn-ease), transform 220ms var(--hvn-f-spring);
}

.hvn-addon__lvl span em { font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--hvn-gold-deep); }
.hvn-addon__lvl:active span { transform: scale(.96); }
.hvn-addon__lvl input:checked + span { background: var(--hvn-navy); border-color: var(--hvn-navy); color: #FFFFFF; }
.hvn-addon__lvl input:checked + span em { color: var(--hvn-gold-lift); }
.hvn-addon__lvl input:focus-visible + span { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }

/* Quantity stepper. */
.hvn-step { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem; border-radius: 999px; background: rgba(34, 58, 87, .07); }

.hvn-step__btn {
  -webkit-appearance: none;
          appearance: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--hvn-navy);
  font: 600 1.25rem/1 var(--hvn-font);
  box-shadow: 0 2px 4px rgba(20, 26, 34, .12);
  cursor: pointer;
  transition: transform 180ms var(--hvn-f-spring), background-color 180ms var(--hvn-ease);
}

.hvn-step__btn[hidden] { display: none; }
.hvn-step__btn:active { transform: scale(.9); background: var(--hvn-warm); }
.hvn-step__btn:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }

.hvn-step__input {
  width: 3.2rem;
  min-height: 2.5rem;
  padding: 0 .2rem;
  border: 0;
  background: transparent;
  font: 600 1rem/1 var(--hvn-font);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--hvn-text);
  -moz-appearance: textfield;
}

.hvn-step__input::-webkit-outer-spin-button,
.hvn-step__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hvn-step.is-enhanced .hvn-step__input { width: 2.9rem; }

/* The base theme styles input[type=number] (padding + border) with a higher
   specificity than one class — on the real site that clipped the digits.
   Scoped to the stepper so nothing else changes. */
.hvn-step input.hvn-step__input[type="number"] {
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  line-height: 2.5rem;
}
.hvn-step input.hvn-step__input[type="number"]:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 1px; }

/* Quantity cards: the stepper takes its own row, so it never sits on the text. */
.hvn-addon--qty .hvn-addon__card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.hvn-addon--qty .hvn-step { grid-column: 2 / -1; justify-self: start; margin-top: .15rem; }

/* =========================================================================
   8. PHOTO UPLOAD
   ========================================================================= */

.hvn-upload { margin: 0 0 var(--hvn-s4); }
.hvn-upload__legend { float: none; }

.hvn-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.hvn-upload__drop {
  display: grid;
  justify-items: center;
  gap: .4rem;
  margin: .2rem 0 .5rem;
  padding: 1.5rem 1rem;
  border: 2px dashed rgba(34, 58, 87, .4);
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 50% 0%, rgba(192, 137, 83, .09) 0%, rgba(192, 137, 83, 0) 70%),
    #FBFAF7;
  text-align: center;
  cursor: pointer;
  transition: border-color 220ms var(--hvn-ease), background-color 220ms var(--hvn-ease), transform 260ms var(--hvn-f-spring);
}

@media (hover: hover) {
  .hvn-upload__drop:hover { border-color: var(--hvn-navy); }
}

.hvn-upload__drop:active { transform: scale(.99); }
.hvn-upload.is-drag .hvn-upload__drop { border-color: var(--hvn-gold); background: #F6F1E9; transform: scale(1.01); }
.hvn-upload__input:focus-visible + .hvn-upload__drop { outline: 3px solid var(--hvn-gold); outline-offset: 3px; border-color: var(--hvn-navy); }

.hvn-upload__ico {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: var(--hvn-navy);
  color: var(--hvn-gold-lift);
  box-shadow: 0 8px 18px rgba(34, 58, 87, .26);
}

.hvn-upload__cta { font-weight: 600; color: var(--hvn-text); }
.hvn-upload__or { font-size: .8125rem; color: var(--hvn-text-secondary); }
.hvn-upload__count { margin: .6rem 0 .4rem; font-size: .8125rem; font-weight: 600; color: var(--hvn-navy-80); }
.hvn-upload.is-invalid .hvn-upload__drop { border-color: var(--hvn-f-err); }

.hvn-upload__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hvn-upload__item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: center;
  padding: .4rem;
  border: 1.5px solid rgba(34, 58, 87, .2);
  border-radius: 14px;
  background: #FFFFFF;
  animation: hvnFieldOk 320ms var(--hvn-f-spring) both;
}

.hvn-upload__thumb { display: block; width: 3.25rem; height: 3.25rem; overflow: hidden; border-radius: 10px; background: var(--hvn-warm-2); }
.hvn-upload__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hvn-upload__meta { display: grid; min-width: 0; }
.hvn-upload__name { overflow: hidden; font-size: .8125rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; color: var(--hvn-text); }
.hvn-upload__size { font-size: .75rem; color: var(--hvn-text-secondary); }

.hvn-upload__rm {
  -webkit-appearance: none;
          appearance: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(183, 35, 44, .08);
  color: var(--hvn-f-err);
  cursor: pointer;
}

.hvn-upload__rm:hover { background: rgba(183, 35, 44, .16); }
.hvn-upload__rm:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; }

/* =========================================================================
   9. PARKING NOTICE AND TOKEN
   ========================================================================= */

.hvn-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  margin: var(--hvn-s4) 0 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--hvn-warm-line);
  border-left: 3px solid var(--hvn-navy);
  border-radius: 14px;
  background: #F4F1EB;
}

.hvn-notice__ico {
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 9px;
  background: var(--hvn-navy);
  color: #FFFFFF;
  font-family: var(--hvn-font);
  font-size: 1.1rem;
  font-weight: 700;
}

.hvn-notice__title { display: flex; flex-wrap: wrap; align-items: center; row-gap: .3rem; margin: 0 0 .3rem; font-weight: 600; color: var(--hvn-text); }
.hvn-notice p { margin: 0; font-size: var(--hvn-fs-small); line-height: 1.6; color: var(--hvn-text-secondary); }
.hvn-notice__more p { margin-top: .55rem; }

.hvn-notice__more summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  margin-top: .15rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--hvn-fs-small);
  font-weight: 600;
  color: var(--hvn-navy);
}

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

.hvn-notice__more summary::after {
  content: '';
  width: .45rem;
  height: .45rem;
  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-notice__more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.hvn-notice__more summary:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; border-radius: 4px; }
.hvn-notice__more[open] > * { animation: hvnReveal 320ms var(--hvn-ease) both; }

.hvn-notice__examples { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 0; padding: 0; list-style: none; }
.hvn-notice__examples li { padding: .22rem .6rem; border: 1px solid var(--hvn-warm-line); border-radius: 999px; background: #FFFFFF; font-size: .75rem; color: var(--hvn-text); }

.hvn-notice--full { margin-top: var(--hvn-s4); background: #FFFFFF; box-shadow: 0 6px 18px rgba(20, 26, 34, .05); }

/* The "1 h included" token — information, not a warning: navy, never red. */
.hvn-token {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-left: .55rem;
  padding: .12rem .55rem .12rem .4rem;
  border-radius: 999px;
  background: var(--hvn-navy);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  vertical-align: .1em;
  white-space: nowrap;
}

.hvn-token svg { flex: none; }

/* =========================================================================
   10. REVIEW AND ESTIMATE
   ========================================================================= */

.hvn-review { margin: 0 0 var(--hvn-s5); overflow: hidden; border: 1px solid var(--hvn-warm-line); border-radius: 14px; background: #FFFFFF; }

.hvn-review__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  gap: .25rem 1rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--hvn-warm-line);
}

.hvn-review__row:last-child { border-bottom: 0; }
.hvn-review dt { font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: var(--hvn-tr-label); text-transform: uppercase; color: var(--hvn-navy-80); }
.hvn-review dd { margin: 0; font-weight: 500; color: var(--hvn-text); overflow-wrap: anywhere; }
.hvn-review dd.is-empty { color: var(--hvn-navy-60); }

.hvn-linkbtn {
  -webkit-appearance: none;
          appearance: none;
  min-height: 2.75rem;
  padding: .3rem .25rem;
  border: 0;
  background: none;
  color: var(--hvn-gold-deep);
  font: 600 var(--hvn-fs-small) var(--hvn-font);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

.hvn-linkbtn:hover { color: var(--hvn-navy); }
.hvn-linkbtn:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 519.98px) {
  .hvn-review__row { grid-template-columns: minmax(0, 1fr) auto; }
  .hvn-review__row dt { grid-column: 1 / -1; }
}

.hvn-estimate {
  position: relative;
  overflow: hidden;
  margin: 0 0 var(--hvn-s2);
  padding: 1.35rem 1.4rem;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--hvn-navy) 0%, var(--hvn-charcoal) 100%);
  color: #FFFFFF;
  box-shadow: 0 18px 40px rgba(20, 26, 34, .22);
}

.hvn-estimate::after {
  content: '';
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  border: 1px solid rgba(217, 164, 115, .22);
  box-shadow: 0 0 0 1.5rem rgba(217, 164, 115, .05);
  pointer-events: none;
}

.hvn-estimate > * { position: relative; z-index: 1; }
.hvn-estimate__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

.hvn-estimate__label {
  margin: 0 0 .25rem;
  font-size: var(--hvn-fs-label);
  font-weight: 600;
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-gold-lift);
}

.hvn-estimate__value {
  margin: 0 0 .45rem;
  font-size: var(--hvn-fs-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  transform-origin: left center;
}

.hvn-estimate[data-state="estimate"] .hvn-estimate__value { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem); color: #FFFFFF; }
.hvn-estimate[data-state="incomplete"] .hvn-estimate__value { color: rgba(255, 255, 255, .72); }
.hvn-estimate__text { margin: 0; max-width: 60ch; font-size: var(--hvn-fs-small); line-height: 1.6; color: rgba(255, 255, 255, .8); }

.hvn-estimate__compare { display: grid; gap: .15rem; margin: 0 0 .6rem; font-size: .875rem; font-variant-numeric: tabular-nums; }
.hvn-estimate__was { color: rgba(255, 255, 255, .62); text-decoration: line-through; text-decoration-color: rgba(236, 199, 158, .7); }
.hvn-estimate__now { font-weight: 600; color: var(--hvn-gold-lift); }

.hvn-estimate__lines {
  display: grid;
  gap: 0;
  margin: 1rem 0 0;
  padding: .35rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
  list-style: none;
}

.hvn-estimate__lines li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, .1);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .88);
}

.hvn-estimate__lines li:last-child { border-bottom: 0; }
.hvn-estimate__amt { flex: none; font-variant-numeric: tabular-nums; color: #FFFFFF; }
.hvn-estimate__lines li.is-tbd { color: var(--hvn-gold-lift); }

.hvn-estimate__notes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }

.hvn-estimate__notes li {
  padding: .25rem .65rem;
  border: 1px dashed rgba(217, 164, 115, .55);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--hvn-gold-lift);
}

.hvn-estimate__how { margin-top: .6rem; }

.hvn-estimate__how summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  list-style: none;
  cursor: pointer;
  font-size: var(--hvn-fs-small);
  font-weight: 600;
  color: var(--hvn-gold-lift);
}

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

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

.hvn-estimate__how[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.hvn-estimate__how summary:focus-visible { outline: 3px solid var(--hvn-gold); outline-offset: 2px; border-radius: 4px; }
.hvn-estimate__how p { margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .78); }

.hvn-estimate.is-updated .hvn-estimate__value { animation: hvnEstSettle 520ms cubic-bezier(.2, .8, .2, 1) both; }

@keyframes hvnEstSettle {
  0%   { opacity: .35; transform: translateY(6px); }
  100% { opacity: 1;   transform: none; }
}

/* =========================================================================
   11. STEP NAVIGATION AND THE MOBILE ESTIMATE PILL
   ========================================================================= */

.hvn-calc__nav {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: var(--hvn-s6) calc(var(--hvn-card-pad) * -1) calc(var(--hvn-card-pad) * -1);
  padding: var(--hvn-s4) var(--hvn-card-pad);
  border-top: 1px solid var(--hvn-warm-line);
  background: linear-gradient(180deg, rgba(247, 245, 241, 0) 0%, var(--hvn-warm) 40%);
}

.hvn-calc__nav [hidden] { display: none !important; }
.hvn-calc__prev { gap: .45rem; }
.hvn-calc__next,
.hvn-calc__submit { margin-left: auto; gap: .6rem; }

.hvn-calc__pill {
  display: none;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  line-height: 1.15;
}

.hvn-calc__pill-k { font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hvn-navy-80); }
.hvn-calc__pill-v { overflow: hidden; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-overflow: ellipsis; color: var(--hvn-text); }

@media (max-width: 1023.98px) {
  .hvn-calc__pill:not([hidden]) { display: flex; }
}

@media (max-width: 767.98px) {
  .hvn-calc__nav {
    position: sticky;
    bottom: 0;
    z-index: 5;
    gap: .5rem;
    padding: .7rem var(--hvn-card-pad) calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(247, 245, 241, .97);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    box-shadow: 0 -10px 22px rgba(20, 26, 34, .08);
  }

  .hvn-calc__prev { padding-inline: .8rem; }
  /* Room for a four-digit range ("€ 1.250 – 2.140") beside the actions at 360–390px. */
  .hvn-calc__pill-v { font-size: .875rem; letter-spacing: -.01em; }
  .hvn-calc__next { padding-inline: 1.1rem .9rem; }
  .hvn-calc__prev span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hvn-calc__pill { flex: 1 1 auto; }
  .hvn-calc__next,
  .hvn-calc__submit { flex: 0 1 auto; margin-left: 0; }
  .hvn-calc__pill[hidden] + .hvn-calc__next,
  .hvn-calc__pill[hidden] ~ .hvn-calc__submit { flex: 1 1 auto; }
}

/* While the calculator is on screen its own action bar replaces the site-wide
   conversion bar, so two fixed bars never stack over the fields. */
body.hvn-calc-active .hvn-mbar { display: none !important; }
body.hvn-calc-active.hvn-has-mbar { padding-bottom: 0; }

/* =========================================================================
   12. SUMMARY — the job ticket
   ========================================================================= */

.hvn-calc__summary { overflow: hidden; border-radius: 20px; background: var(--hvn-charcoal); color: #FFFFFF; box-shadow: 0 22px 52px rgba(20, 26, 34, .22); }
.hvn-calc__photo { position: relative; margin: 0; aspect-ratio: 576 / 415; background: var(--hvn-charcoal-2); }
.hvn-calc__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hvn-calc__photo figcaption {
  position: absolute;
  left: .75rem;
  bottom: .75rem;
  padding: .32rem .7rem;
  border-radius: 999px;
  background: rgba(20, 26, 34, .74);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hvn-gold-lift);
}

.hvn-calc__sumbody { padding: 1.25rem 1.35rem 1.4rem; }

.hvn-calc__sumest {
  margin: 0 0 .9rem;
  padding: .85rem .95rem;
  border: 1px solid rgba(217, 164, 115, .3);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34, 58, 87, .9) 0%, rgba(20, 26, 34, .9) 100%);
}

.hvn-calc__sumest .hvn-stud { margin-top: .5rem; }
.hvn-calc__sumtitle { margin: 0 0 .3rem; font-size: var(--hvn-fs-label); font-weight: 600; letter-spacing: var(--hvn-tr-label); text-transform: uppercase; color: var(--hvn-gold-lift); }
.hvn-calc__sumvalue { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #FFFFFF; }
.hvn-calc__sumvalue.is-empty { font-size: 1rem; color: rgba(255, 255, 255, .45); }

.hvn-sum { display: grid; margin: 0; }
.hvn-sum > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem; padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.hvn-sum dt { font-size: .75rem; color: rgba(255, 255, 255, .62); }
.hvn-sum dd { margin: 0; font-size: .875rem; font-weight: 500; overflow-wrap: anywhere; transition: color 300ms var(--hvn-ease); }
.hvn-sum dd.is-empty { color: rgba(255, 255, 255, .38); }

.hvn-calc__status { display: flex; align-items: center; gap: .55rem; margin: 1rem 0 .9rem; padding: .6rem .8rem; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: .8125rem; font-weight: 600; }
.hvn-calc__statusdot { flex: none; width: .55rem; height: .55rem; border-radius: 999px; background: var(--hvn-gold); box-shadow: 0 0 0 3px rgba(192, 137, 83, .25); }

.hvn-calc__incl { display: grid; gap: .45rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.hvn-calc__incl li { position: relative; padding-left: 1.45rem; font-size: .8125rem; line-height: 1.45; color: rgba(255, 255, 255, .82); }

.hvn-calc__incl li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .12rem;
  width: .95rem;
  height: .95rem;
  border-radius: 999px;
  background: var(--hvn-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141A22' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / .6rem no-repeat;
}

.hvn-calc__incl--park::before { background: var(--hvn-navy-80) !important; }
.hvn-calc__incl--park::after { content: 'P'; position: absolute; left: 0; top: .12rem; width: .95rem; height: .95rem; display: grid; place-items: center; font-size: .6rem; font-weight: 700; color: #FFFFFF; }
.hvn-calc__incl--park .hvn-token { margin-left: .35rem; padding-block: .05rem; background: rgba(255, 255, 255, .14); }

.hvn-calc__alt { margin: 0; font-size: .8125rem; color: rgba(255, 255, 255, .7); }
.hvn-calc__alt a { color: #FFFFFF; font-weight: 600; text-underline-offset: .18em; }
.hvn-calc__alt a:hover { color: var(--hvn-gold-lift); }

@media (max-width: 1023.98px) {
  .hvn-calc__summary { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 620px) and (max-width: 1023.98px) {
  .hvn-calc__summary { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hvn-calc__photo { aspect-ratio: auto; min-height: 100%; }
}

/* =========================================================================
   13. REDUCED MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .is-enhanced .hvn-calc__step.is-entering,
  .hvn-route.is-complete .hvn-route__line path,
  .hvn-estimate.is-updated .hvn-estimate__value,
  .hvn-notice__more[open] > *,
  .hvn-addon.is-on .hvn-addon__card::after,
  .hvn-upload__item { animation: none; }

  .hvn-estimate__how summary::after,
  .hvn-qswitch__tab,
  .hvn-calc__pnum,
  .hvn-calc__progress ol::after,
  .hvn-opt__body,
  .hvn-opt__ico,
  .hvn-opt__check,
  .hvn-seg__opt span,
  .hvn-check__box,
  .hvn-chip span,
  .hvn-addon__card,
  .hvn-addon__ico,
  .hvn-addon__switch,
  .hvn-addon__switch i,
  .hvn-addon__lvl span,
  .hvn-step__btn,
  .hvn-upload__drop { transition: none; }

  .hvn-opt:hover .hvn-opt__body,
  .hvn-opt:active .hvn-opt__body,
  .hvn-opt input:checked + .hvn-opt__body .hvn-opt__ico,
  .hvn-opt input:checked + .hvn-opt__body .hvn-opt__check,
  .hvn-seg__opt:active span,
  .hvn-chip:active span,
  .hvn-qswitch__tab:active,
  .hvn-check input:checked + .hvn-check__box,
  .hvn-calc__pstep.is-current .hvn-calc__pnum,
  .hvn-addon--toggle:hover .hvn-addon__card,
  .hvn-addon--toggle:active .hvn-addon__card,
  .hvn-addon.is-on .hvn-addon__ico,
  .hvn-step__btn:active,
  .hvn-upload__drop:active,
  .hvn-upload.is-drag .hvn-upload__drop { transform: none; }
}

/* =========================================================================
   14. QUOTE HERO CLEARANCE UNDER THE OVERLAY HEADER
   ========================================================================= */

body.hvn-overlay .hvn-qhero__inner {
  padding-top: calc(var(--hvn-hdr-clear, calc(var(--hvn-nav-h) + 3.5rem)) + var(--hvn-s6));
}