/**
 * HAVEN Child — Homepage completion sections.
 *
 * Every value resolves to an existing HAVEN token. No new colour, font, radius
 * or shadow is introduced; the cinematic Hero sets the language and these
 * sections continue it as the page becomes progressively more informational.
 */

/* ------------------------------------------------------- shared additions */

.hvn-display--sm { font-size: var(--hvn-fs-h2); max-width: 24ch; }

.hvn-facts--light dt { color: var(--hvn-text-secondary); }
.hvn-facts--light dd { color: var(--hvn-text); }

/* ----------------------------------------------------------- quick enquiry */

/*
 * Sits directly under the Hero so a visitor can start without hunting. The
 * form panel is the page's only elevated surface — everything else stays flat,
 * which is what keeps one card from turning into a wall of cards.
 */
.hvn-quick { background: var(--hvn-surface-alt); }

.hvn-quick__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}

.hvn-quick__lead p { max-width: 44ch; }

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

.hvn-quick__channels li {
  display: grid;
  gap: var(--hvn-s1);
  padding-top: var(--hvn-s4);
  border-top: 1px solid var(--hvn-border);
}

.hvn-quick__kind {
  font-size: var(--hvn-fs-label);
  letter-spacing: var(--hvn-tr-label);
  text-transform: uppercase;
  color: var(--hvn-text-secondary);
}

.hvn-quick__channels a {
  font-size: var(--hvn-fs-h3);
  font-weight: 500;
  color: var(--hvn-text);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.hvn-quick__channels a:hover,
.hvn-quick__channels a:focus-visible { text-decoration: underline; }

.hvn-quick__panel {
  background: var(--hvn-surface);
  border: 1px solid var(--hvn-border);
  border-radius: var(--hvn-radius-lg);
  padding: clamp(1.25rem, .75rem + 2vw, 2rem);
}

@media (min-width: 900px) {
  .hvn-quick__grid { grid-template-columns: 1fr 1.15fr; }
}

/* ------------------------------------------------------------------ forms */

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

@media (min-width: 560px) {
  .hvn-form__row { grid-template-columns: 1fr 1fr; }
}

.hvn-field { margin: 0 0 var(--hvn-s4); display: grid; gap: var(--hvn-s2); }

.hvn-field label {
  font-size: var(--hvn-fs-small);
  font-weight: 500;
  color: var(--hvn-text);
}

.hvn-field input,
.hvn-field select,
.hvn-field textarea {
  font: inherit;
  font-size: var(--hvn-fs-body);
  color: var(--hvn-text);
  background: var(--hvn-surface);
  border: 1px solid var(--hvn-border-strong);
  border-radius: var(--hvn-radius);
  padding: .7rem .8rem;
  min-height: var(--hvn-tap);
  width: 100%;
}

.hvn-field textarea { min-height: 7rem; resize: vertical; }

.hvn-field input:focus-visible,
.hvn-field select:focus-visible,
.hvn-field textarea:focus-visible {
  outline: 2px solid var(--hvn-focus-ring);
  outline-offset: 1px;
  border-color: var(--hvn-focus-ring);
}

/* The browser's own required-field styling only after the visitor has tried,
   so an untouched form is never shown as an error state. */
.hvn-field input:user-invalid,
.hvn-field textarea:user-invalid { border-color: var(--hvn-danger); }

.hvn-form__note {
  margin: var(--hvn-s4) 0 0;
  font-size: var(--hvn-fs-small);
  color: var(--hvn-text-secondary);
}

/* Honeypot: hidden from people but still submitted, and still not display:none
   (which many bots detect and skip). The earlier `left:-9999px` version pushed
   the document's scrollable canvas 35px wider than the viewport at 390px —
   the standard clip-based visually-hidden pattern does not. */
.hvn-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hvn-note {
  margin: 0 0 var(--hvn-s5);
  padding: var(--hvn-s4);
  border-radius: var(--hvn-radius);
  font-size: var(--hvn-fs-body);
}

.hvn-note--ok  { background: var(--hvn-navy-10); border-left: 3px solid var(--hvn-accent); }
.hvn-note--err { background: var(--hvn-navy-10); border-left: 3px solid var(--hvn-danger); }

/* -------------------------------------------------- estate clearance feature */

.hvn-clear__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-clear .hvn-display--sm { color: var(--hvn-text-invert); }
.hvn-clear .hvn-lede { color: var(--hvn-text-invert-soft); max-width: 46ch; }

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

.hvn-clear__steps li {
  padding-top: var(--hvn-s4);
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.hvn-clear__num {
  display: block;
  font-size: var(--hvn-fs-small);
  font-variant-numeric: tabular-nums;
  /* A11Y (R-19, 2026-09-18): the plain tan on HAVEN Navy is 3.83:1 and this is
     14px text. The lifted gold is 5.2:1 on the same ground. */
  color: var(--hvn-gold-lift, #D9A473);
  margin-bottom: var(--hvn-s2);
}

.hvn-clear__steps h3 {
  font-size: var(--hvn-fs-h3);
  font-weight: 600;
  margin: 0 0 var(--hvn-s2);
  color: var(--hvn-text-invert);
}

.hvn-clear__steps p { margin: 0; color: var(--hvn-text-invert-soft); max-width: 48ch; }

.hvn-clear__fig { margin: 0; }

.hvn-clear__fig img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--hvn-radius-lg);
}

/* The copy column is much taller than a 16:9 still, so a centred auto-height
   image floats in the middle of a tall dark panel. Letting it fill the column
   makes the two halves read as one composition. */
@media (min-width: 960px) {
  .hvn-clear__grid { align-items: stretch; }
  .hvn-clear__fig { display: flex; }
  .hvn-clear__fig img { height: 100%; object-fit: cover; min-height: 26rem; }
}

@media (min-width: 960px) {
  .hvn-clear__grid { grid-template-columns: 1.05fr .95fr; }
  .hvn-clear__steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- assurance */

.hvn-assure {
  background: var(--hvn-primary);
  color: var(--hvn-text-invert);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.hvn-assure__grid {
  display: grid;
  gap: var(--hvn-s6);
  grid-template-columns: 1fr;
  align-items: start;
}

.hvn-assure h2 {
  color: var(--hvn-text-invert);
  font-size: var(--hvn-fs-h2);
  line-height: var(--hvn-lh-heading);
  font-weight: 600;
  margin: 0;
  max-width: 20ch;
}

.hvn-assure .hvn-eyebrow { color: var(--hvn-tan); }

.hvn-assure__body p {
  color: var(--hvn-text-invert-soft);
  margin: 0 0 var(--hvn-s4);
  max-width: 54ch;
}

@media (min-width: 860px) {
  .hvn-assure__grid { grid-template-columns: 1fr 1.15fr; gap: var(--hvn-s8); }
}

/* --------------------------------------------------------------- service area */

.hvn-area__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}

.hvn-area p { max-width: 48ch; }

/* Three facts, three columns — inheriting the load-space four left them at
   118px, too narrow for "Wien und Umgebung". */
.hvn-area .hvn-facts--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 720px) {
  .hvn-area .hvn-facts--tight { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.hvn-area .hvn-facts--tight { margin-top: var(--hvn-s6); }

.hvn-area__fig { margin: 0; }

.hvn-area__svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--hvn-primary);
}

@media (min-width: 900px) {
  .hvn-area__grid { grid-template-columns: 1.05fr .95fr; }
}

/* ------------------------------------------------------------------ motion */

/*
 * Below the Hero, motion is a single restrained reveal — nothing scroll-jacks,
 * nothing animates twice, and nothing depends on hover to be usable.
 */
@media (prefers-reduced-motion: no-preference) {
  .hvn-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms ease, transform 520ms ease;
  }
  .hvn-reveal.is-in { opacity: 1; transform: none; }
}