/* ============================================================
   Enotale — contact pages (contact*.html, inquiry*.html)
   Loads after corporate.css and reuses its chrome: topbar, footer,
   buttons, the dark register and the theme switch. This file adds
   the two form layouts and one field system shared by both.

   Every colour, space and type value references a token. Shadows are
   mixed from --color-ink / the accents with color-mix(), never raw
   rgba. Documented exceptions, as in corporate.css: the 1px hairline,
   pixel breakpoints, and two layout constants marked inline.

   STATIC BUILD — the forms do not send. contact.js stops the submit,
   shows the field errors and then a notice that points to the e-mail.
   ============================================================ */

:root {
  /* Field ground: one step off the card it sits on, so the field reads
     as a well cut into the paper, not as a white box on a white card. */
  --field-bg: var(--color-surface-alt);
  --field-bg-focus: var(--color-surface-raised);
  --field-border: var(--color-border-default);
  --field-radius: var(--radius-lg);
  --field-height: var(--spacing-14);
  --field-error: var(--color-status-error);

  --contact-shadow:
    0 var(--hairline) var(--spacing-1) color-mix(in srgb, var(--color-ink) 5%, transparent),
    0 var(--spacing-6) var(--spacing-16) calc(var(--spacing-4) * -1) color-mix(in srgb, var(--color-ink) 22%, transparent),
    0 var(--spacing-2) var(--spacing-6) calc(var(--spacing-2) * -1) color-mix(in srgb, var(--color-wine-burgundy) 10%, transparent);
  --field-shadow-inset: inset 0 var(--hairline) var(--spacing-1) color-mix(in srgb, var(--color-ink) 6%, transparent);
  --field-shadow-focus:
    0 0 0 var(--spacing-1) color-mix(in srgb, var(--accent-ink) 16%, transparent),
    0 var(--spacing-3) var(--spacing-6) calc(var(--spacing-3) * -1) color-mix(in srgb, var(--accent-ink) 45%, transparent);
}

[data-theme="dark"] {
  --field-bg: var(--color-surface-sunk);
  --field-bg-focus: color-mix(in srgb, var(--color-surface-sunk) 70%, var(--color-surface-raised));
  /* Blood oak is ~1.9:1 on the dark card; the error role takes the
     lighter rose there (≈4.9:1). The message text, the icon and the
     border all change together, so the state never rests on hue alone. */
  --field-error: var(--color-accent-link);
  --contact-shadow:
    0 0 0 var(--hairline) color-mix(in srgb, var(--color-accent-gold) 10%, transparent),
    0 var(--spacing-6) var(--spacing-16) calc(var(--spacing-4) * -1) color-mix(in srgb, var(--color-black, var(--color-ink)) 80%, transparent),
    0 var(--spacing-2) var(--spacing-10) calc(var(--spacing-4) * -1) color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
  --field-shadow-inset: inset 0 var(--hairline) var(--spacing-1) color-mix(in srgb, var(--color-ink) 60%, transparent);
}

/* The current page in the header menu. */
.topbar__nav a[aria-current="page"] { color: var(--color-text-primary); }
.topbar__nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Kicker over a heading — same voice as .band__label. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-3);
  margin: 0 0 var(--spacing-4);
  color: var(--accent-ink);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}
.kicker::before {
  content: "";
  width: var(--spacing-8);
  height: var(--hairline);
  background: currentColor;
}

/* ============================================================
   FIELD SYSTEM — floating label, icon, glow on focus
   Markup:
     <div class="field [field--area] [field--noicon]">
       <svg class="field__icon">…</svg>
       <input class="field__control" placeholder=" " …>
       <label class="field__label">…</label>
       <p class="field__error">…</p>
     </div>
   The label follows the control so the placeholder-shown sibling rule
   works without :has(); the visible order is set by position.
   ============================================================ */

.field { position: relative; }

.field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--field-height);
  margin: 0;
  padding: var(--spacing-6) var(--spacing-4) var(--spacing-2) var(--spacing-12);
  background: var(--field-bg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow-inset);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-regular);
  line-height: var(--line-height-body);
  appearance: none;
  transition:
    border-color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard);
}
.field--noicon .field__control { padding-inline-start: var(--spacing-4); }

.field--area .field__control {
  min-height: calc(var(--spacing-32) + var(--spacing-8));
  padding-top: var(--spacing-8);
  resize: vertical;
}

/* Number fields: no spinner — the count is typed, not stepped. */
.field__control[type="number"]::-webkit-inner-spin-button,
.field__control[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }
.field__control[type="number"] { -moz-appearance: textfield; }

/* The placeholder is a single space so :placeholder-shown can drive the
   label; the hint, where there is one, only shows once the label lifts. */
.field__control::placeholder { color: transparent; }
.field__control:focus::placeholder { color: var(--color-text-subtle); }

.field__control:hover { border-color: var(--color-border-strong); }

.field__control:focus,
.field__control:focus-visible {
  outline: none;
  background: var(--field-bg-focus);
  border-color: var(--accent-ink);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow-focus);
}

.field__label {
  position: absolute;
  top: calc(var(--field-height) / 2);
  left: var(--spacing-12);
  right: var(--spacing-4);
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-light);
  /* Not 1: with overflow hidden for the ellipsis, a line-height of 1
     clipped the Cyrillic descenders (д, ц, щ, р, у). */
  line-height: var(--line-height-compact);
  padding-block: var(--hairline);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: left center;
  transition:
    top var(--duration-base) var(--easing-standard),
    font-size var(--duration-base) var(--easing-standard),
    color var(--duration-base) var(--easing-standard),
    letter-spacing var(--duration-base) var(--easing-standard);
}
.field--noicon .field__label { left: var(--spacing-4); }
.field--area .field__label { top: calc(var(--spacing-5) + var(--spacing-1)); }

.field__control:focus ~ .field__label,
.field__control:not(:placeholder-shown) ~ .field__label {
  top: var(--spacing-4);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}
.field__control:focus ~ .field__label { color: var(--accent-ink); }

.field__req { color: var(--accent-ink); }

.field__icon {
  position: absolute;
  top: calc(var(--field-height) / 2);
  left: var(--spacing-4);
  width: var(--spacing-5);
  height: var(--spacing-5);
  color: var(--color-text-subtle);
  pointer-events: none;
  transform: translateY(-50%);
  transition: color var(--duration-base) var(--easing-standard);
}
.field--area .field__icon { top: calc(var(--spacing-5) + var(--spacing-1)); }
.field:focus-within .field__icon { color: var(--accent-ink); }

/* A gold thread draws out from the centre along the bottom edge. */
.field::after {
  content: "";
  position: absolute;
  left: var(--spacing-4);
  right: var(--spacing-4);
  top: calc(var(--field-height) - var(--hairline) * 2);
  height: calc(var(--hairline) * 2);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-accent-gold), transparent);
  opacity: 0;
  transform: scaleX(0.2);
  pointer-events: none;
  transition:
    transform var(--duration-moderate) var(--easing-decelerate),
    opacity var(--duration-moderate) var(--easing-decelerate);
}
.field--area::after { top: auto; bottom: 0; }
.field:focus-within::after { opacity: 1; transform: scaleX(1); }

/* Errors show after a submit attempt, or once the visitor has touched
   the field and left it wrong (:user-invalid) — never on first paint. */
.field__error {
  display: none;
  align-items: center;
  gap: var(--spacing-2);
  margin: var(--spacing-2) 0 0;
  color: var(--field-error);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
}
.field__error::before {
  content: "!";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--spacing-4);
  height: var(--spacing-4);
  border-radius: var(--radius-full);
  background: var(--field-error);
  color: var(--color-surface-raised);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  line-height: 1;
}

.is-submitted .field__control:invalid,
.field__control:user-invalid {
  border-color: var(--field-error);
}
.is-submitted .field__control:invalid ~ .field__label,
.field__control:user-invalid ~ .field__label { color: var(--field-error); }
/* The icon sits before the control, so it is reached from the field. */
.is-submitted .field:has(.field__control:invalid) .field__icon,
.field:has(.field__control:user-invalid) .field__icon { color: var(--field-error); }
.is-submitted .field__control:invalid ~ .field__error,
.field__control:user-invalid ~ .field__error { display: flex; }

/* ---- form furniture ------------------------------------------------ */

.form-grid {
  display: grid;
  gap: var(--spacing-5);
}

.form-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  line-height: var(--line-height-editorial);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-4) var(--spacing-6);
  margin-top: var(--spacing-2);
}

/* The send button: the store button's size, an arrow that travels, and
   a soft wine-coloured glow under it. */
.btn--send {
  position: relative;
  overflow: hidden;
  box-shadow: 0 var(--spacing-3) var(--spacing-6) calc(var(--spacing-3) * -1) color-mix(in srgb, var(--color-accent-primary) 70%, transparent);
  transition:
    background var(--button-transition-duration) var(--button-transition-easing),
    border-color var(--button-transition-duration) var(--button-transition-easing),
    box-shadow var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
}
.btn--send svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
  transition: transform var(--duration-base) var(--easing-standard);
}
.btn--send::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--color-accent-gold) 35%, transparent) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform var(--duration-slow) var(--easing-standard);
}
.btn--send:hover {
  transform: translateY(calc(var(--hairline) * -2));
  box-shadow: 0 var(--spacing-4) var(--spacing-8) calc(var(--spacing-3) * -1) color-mix(in srgb, var(--color-accent-primary) 85%, transparent);
}
.btn--send:hover::before { transform: translateX(100%); }
.btn--send:hover svg { transform: translateX(var(--spacing-1)); }
.btn--send:active { transform: translateY(0); }
.btn--send > * { position: relative; }

/* The static-build notice that replaces a real send. */
/* Bot trap: a field people never see or reach (form.php ignores posts that fill it). */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-5);
  background: color-mix(in srgb, var(--color-accent-gold) 14%, var(--color-surface-raised));
  border: var(--hairline) solid color-mix(in srgb, var(--color-accent-gold) 55%, transparent);
  border-radius: var(--field-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-editorial);
}
.form-status svg {
  flex: none;
  width: var(--spacing-5);
  height: var(--spacing-5);
  margin-top: var(--hairline);
  color: var(--color-accent-gold-hover);
}
[data-theme="dark"] .form-status svg { color: var(--color-accent-gold); }
.form-status a { color: var(--accent-ink); }

.form-status:not([hidden]) {
  animation: status-in var(--duration-moderate) var(--easing-decelerate);
}
@keyframes status-in {
  from { opacity: 0; transform: translateY(var(--spacing-2)); }
  to   { opacity: 1; transform: none; }
}

/* "Пример" tag for copy that is still waiting for real data. */
.sample-tag {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border: var(--hairline) dashed currentColor;
  border-radius: var(--radius-xs);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}

/* ============================================================
   PAGE 1 — CONTACT
   One card, two halves: the cellar photograph with the contact
   details set over it, and the short form.
   ============================================================ */

.contact { padding-block: var(--spacing-10) var(--section-pad); }

.contact__card {
  display: grid;
  overflow: hidden;
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--contact-shadow);
}

/* ---- the dark half ------------------------------------------------- */

.contact__aside {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  overflow: hidden;
  padding: var(--spacing-10) var(--spacing-6);
  color: var(--color-parchment);
  background: var(--color-ink);
}

.contact__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% center;
  transform: scale(1.04);
  transition: transform calc(var(--duration-slow) * 6) var(--easing-decelerate);
}
.contact__card:hover .contact__photo { transform: scale(1); }

/* Scrim: heaviest under the text. The worst case for contrast is the
   lightest barrel stave at the top of the frame; at 78% ink the
   parchment text holds ≥ 9:1 and the gold labels ≥ 4.6:1. */
.contact__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--color-wine-burgundy) 45%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 84%, transparent) 45%,
      color-mix(in srgb, var(--color-ink) 94%, transparent) 100%);
}

.contact__aside .kicker { color: var(--color-accent-gold); }

.contact__title {
  margin: 0 0 var(--spacing-4);
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  white-space: nowrap;
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-parchment);
  text-wrap: balance;
}

.contact__intro {
  margin: 0;
  max-width: 40ch;
  color: var(--color-paper-edge);
  line-height: var(--line-height-editorial);
}

.contact__list {
  display: grid;
  gap: var(--spacing-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-4);
  align-items: center;
}

.contact__icon {
  display: grid;
  place-items: center;
  width: var(--spacing-12);
  height: var(--spacing-12);
  border: var(--hairline) solid color-mix(in srgb, var(--color-accent-gold) 55%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-accent-gold) 10%, transparent);
  box-shadow: inset 0 0 var(--spacing-4) color-mix(in srgb, var(--color-accent-gold) 12%, transparent);
  color: var(--color-accent-gold);
  backdrop-filter: blur(var(--spacing-1));
  transition: background var(--duration-base) var(--easing-standard),
              color var(--duration-base) var(--easing-standard);
}
.contact__icon svg { width: var(--spacing-5); height: var(--spacing-5); }
.contact__item:hover .contact__icon {
  background: var(--color-accent-gold);
  color: var(--color-ink);
}

.contact__label {
  display: block;
  margin-bottom: var(--spacing-1);
  color: var(--color-accent-gold);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-semibold);
  letter-spacing: var(--letter-spacing-allcaps);
  text-transform: uppercase;
}

.contact__value {
  color: var(--color-parchment);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-ui-regular);
  line-height: var(--line-height-compact);
  text-decoration: none;
}
a.contact__value {
  background: linear-gradient(var(--color-accent-gold), var(--color-accent-gold)) no-repeat left bottom / 0 var(--hairline);
  transition: background-size var(--duration-base) var(--easing-standard);
}
a.contact__value:hover { background-size: 100% var(--hairline); }

.contact__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-4);
  margin-top: auto;
  padding-top: var(--spacing-6);
  border-top: var(--hairline) solid color-mix(in srgb, var(--color-paper-edge) 25%, transparent);
}
.contact__foot .sample-tag { color: var(--color-paper-edge); }

.contact__social { display: flex; gap: var(--spacing-3); margin: 0; padding: 0; list-style: none; }
.contact__social a {
  display: inline-grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border: var(--hairline) solid color-mix(in srgb, var(--color-paper-edge) 35%, transparent);
  border-radius: var(--radius-full);
  color: var(--color-paper-edge);
  transition: color var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}
.contact__social a:hover { color: var(--color-accent-gold); border-color: var(--color-accent-gold); }
.contact__social svg { width: var(--spacing-5); height: var(--spacing-5); }

/* ---- the form half ------------------------------------------------- */

.contact__main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding: var(--spacing-10) var(--spacing-6);
}

.contact__formtitle {
  margin: 0 0 var(--spacing-2);
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
}
.contact__formlead {
  margin: 0;
  max-width: 52ch;
  color: var(--color-text-muted);
  line-height: var(--line-height-editorial);
}

.contact__crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2) var(--spacing-4);
  margin-top: var(--spacing-2);
  padding-top: var(--spacing-5);
  border-top: var(--hairline) solid var(--rule-color);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}
.contact__crosslink p { margin: 0; }

/* ============================================================
   PAGE 2 — INQUIRY
   A dark band carries the heading; the form card rises out of it
   and runs as three numbered steps.
   ============================================================ */

.inq-hero {
  padding-block: var(--spacing-16) calc(var(--spacing-24) + var(--spacing-10));
  color: var(--color-parchment);
}
.inq-hero .kicker { color: var(--color-accent-gold); }

/* Same photograph, scrim and hover settle as .contact__aside. The band
   is wide and shallow, so the frame is cropped to the pour. */
.inq-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.04);
  transition: transform calc(var(--duration-slow) * 6) var(--easing-decelerate);
}
.inq-hero:hover .inq-hero__photo { transform: scale(1); }

/* Scrim values match .contact__aside::before, where the contrast was
   checked: parchment ≥ 9:1, gold ≥ 4.6:1 at the lightest point. */
.inq-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--color-wine-burgundy) 45%, transparent) 0%, transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-ink) 78%, transparent) 0%,
      color-mix(in srgb, var(--color-ink) 84%, transparent) 45%,
      color-mix(in srgb, var(--color-ink) 94%, transparent) 100%);
}

.inq-hero__grid { display: grid; gap: var(--spacing-6); }

.inq-hero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-display-light);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-parchment);
  text-wrap: balance;
}

/* "Изпратете запитване" runs long at h1 and wraps; the Bulgarian title
   drops to the h2 size so it holds one line, as on the contact page. */
.inq-hero__title:lang(bg) {
  max-width: none;
  font-size: var(--font-size-h2);
  white-space: nowrap;
}

.inq-hero__lead {
  margin: 0;
  max-width: 48ch;
  color: var(--color-paper-edge);
  font-size: var(--font-size-body);
  line-height: var(--line-height-editorial);
}

.inq-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2) var(--spacing-6);
  margin: var(--spacing-2) 0 0;
  padding: 0;
  list-style: none;
  color: var(--color-paper-edge);
  font-size: var(--font-size-small);
}
.inq-hero__meta li { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.inq-hero__meta svg { width: var(--spacing-4); height: var(--spacing-4); color: var(--color-accent-gold); }

.inq { padding-bottom: var(--section-pad); }
.inq + .section { border-top: 0; }

.inq-card {
  position: relative;
  max-width: 1040px;                       /* layout constant — two field columns at a readable width */
  margin: calc((var(--spacing-24) + var(--spacing-2)) * -1) auto 0;
  padding: var(--spacing-8) var(--spacing-5);
  background: var(--color-surface-raised);
  border: var(--hairline) solid var(--rule-color);
  border-radius: var(--radius-modal);
  box-shadow: var(--contact-shadow);
}
/* Gold seam along the top edge of the card. */
.inq-card::before {
  content: "";
  position: absolute;
  top: calc(var(--hairline) * -1);
  left: 10%;
  right: 10%;
  height: calc(var(--hairline) * 2);
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, transparent, var(--color-accent-gold), transparent);
}

.inq-step {
  display: grid;
  gap: var(--spacing-5);
  padding-bottom: var(--spacing-8);
}
.inq-step + .inq-step {
  padding-top: var(--spacing-8);
  border-top: var(--hairline) solid var(--rule-color);
}

.inq-step__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--spacing-1) var(--spacing-4);
  align-items: baseline;
}
.inq-step__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-display-light);
  line-height: 1;
  color: var(--accent-ink);
}
.inq-step__title,
.inq-step__hint { margin: 0; }
.inq-step__title {
  font-family: var(--font-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-display-medium);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}
.inq-step__hint {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}

/* ---- choice tiles (sales channels) --------------------------------- */

.choices {
  display: grid;
  gap: var(--spacing-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.choices__legend {
  margin-bottom: var(--spacing-3);
  padding: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-ui-medium);
}
.choices__grid { display: grid; gap: var(--spacing-3); }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  min-height: var(--field-height);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--field-bg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow-inset);
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
  cursor: pointer;
  transition:
    border-color var(--duration-base) var(--easing-standard),
    background-color var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
}
.choice:hover {
  border-color: var(--color-border-strong);
  transform: translateY(calc(var(--hairline) * -1));
}

/* The native box stays in the tree and in the tab order; it is only
   drawn over by the custom mark. */
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.choice__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--spacing-5);
  height: var(--spacing-5);
  border: var(--hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  color: var(--color-text-on-accent);
  transition: background var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}
.choice__mark svg {
  width: var(--spacing-4);
  height: var(--spacing-4);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--duration-base) var(--easing-decelerate);
}

.choice:has(input:checked) {
  background: color-mix(in srgb, var(--color-accent-primary) 7%, var(--field-bg));
  border-color: var(--accent-ink);
  box-shadow: 0 var(--spacing-2) var(--spacing-5) calc(var(--spacing-3) * -1) color-mix(in srgb, var(--accent-ink) 50%, transparent);
}
.choice:has(input:checked) .choice__mark {
  background: var(--color-accent-primary);
  border-color: var(--color-accent-primary);
}
.choice:has(input:checked) .choice__mark svg { stroke-dashoffset: 0; }
.choice:has(input:focus-visible) { box-shadow: var(--shadow-focus-ring); }

/* ---- switch tile (e-label) ----------------------------------------- */

.switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-height: var(--field-height);
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--field-bg);
  border: var(--hairline) solid var(--field-border);
  border-radius: var(--field-radius);
  box-shadow: var(--field-shadow-inset);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--easing-standard),
              background-color var(--duration-base) var(--easing-standard);
}
.switch:hover { border-color: var(--color-border-strong); }
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__text { display: grid; gap: var(--spacing-1); flex: 1; }
.switch__title {
  color: var(--color-text-muted);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
}
.switch__desc {
  color: var(--color-text-primary);
  font-size: var(--font-size-small);
  line-height: var(--line-height-compact);
}
.switch__track {
  position: relative;
  flex: none;
  width: var(--spacing-12);
  height: var(--spacing-6);
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  box-shadow: var(--field-shadow-inset);
  transition: background var(--duration-base) var(--easing-standard);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: calc(var(--spacing-1) - var(--hairline));
  left: calc(var(--spacing-1) - var(--hairline));
  width: calc(var(--spacing-4) + var(--hairline) * 2);
  height: calc(var(--spacing-4) + var(--hairline) * 2);
  border-radius: var(--radius-full);
  background: var(--color-pure-paper);
  box-shadow: 0 var(--hairline) var(--spacing-1) color-mix(in srgb, var(--color-ink) 35%, transparent);
  transition: transform var(--duration-base) var(--easing-standard);
}
.switch:has(input:checked) {
  border-color: var(--accent-ink);
  background: color-mix(in srgb, var(--color-accent-primary) 7%, var(--field-bg));
}
.switch:has(input:checked) .switch__track { background: var(--color-accent-primary); }
.switch:has(input:checked) .switch__track::after { transform: translateX(var(--spacing-6)); }
.switch:has(input:focus-visible) { box-shadow: var(--shadow-focus-ring); }

.inq-submit {
  display: grid;
  gap: var(--spacing-5);
  padding-top: var(--spacing-8);
  border-top: var(--hairline) solid var(--rule-color);
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (min-width: 641px) {
  .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-5) var(--spacing-5); }
  .form-grid .span-2 { grid-column: 1 / -1; }
  .choices__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact__aside,
  .contact__main { padding: var(--spacing-12) var(--spacing-10); }
  .inq-card { padding: var(--spacing-10); }
}

@media (min-width: 1025px) {
  .contact { padding-top: var(--spacing-12); }
  .contact__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .contact__aside { padding: var(--spacing-14) var(--spacing-12); min-height: 640px; } /* layout constant — the photograph needs height */
  .contact__main { padding: var(--spacing-14) var(--spacing-12); justify-content: center; }

  .inq-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-12);
    align-items: end;
  }
  .inq-card { padding: var(--spacing-12) var(--spacing-14); }
  /* On a wide card the step head sits in its own column, left of the
     fields, so the numerals run down the card like a margin. */
  .inq-step {
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
    gap: var(--spacing-10);
    align-items: start;
  }
  .inq-step__head { grid-template-columns: minmax(0, 1fr); }
  .inq-step__num { grid-row: auto; margin-bottom: var(--spacing-2); }
  .inq-submit { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: var(--spacing-10); }
  .inq-submit > * { grid-column: 2; }
}

@media (max-width: 640px) {
  .form-actions .btn { width: 100%; }
  .contact { padding-top: var(--spacing-6); }
  .contact__card { margin-inline: calc(var(--spacing-1) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .field__control,
  .field__label,
  .field::after,
  .btn--send,
  .btn--send::before,
  .btn--send svg,
  .choice,
  .choice__mark svg,
  .switch__track::after,
  .contact__photo,
  .inq-hero__photo { transition: none; }
  .contact__photo,
  .inq-hero__photo { transform: none; }
  .form-status:not([hidden]) { animation: none; }
}

/* Privacy link inside the form note: the note colour, underlined (marketing, 06.10.2026). */
.form-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Select (country, 12.10): the label always sits lifted, because a select
   has no placeholder to drive it; a chevron replaces the native arrow. */
.field--select .field__label {
  top: var(--spacing-4);
  font-size: var(--font-size-micro);
  font-weight: var(--font-weight-ui-medium);
  letter-spacing: var(--letter-spacing-wide);
}
.field--select .field__control {
  padding-inline-end: var(--spacing-10);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a5a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-4) center;
  background-size: var(--spacing-5);
}