/* Olga Kovtun — shared static styles.
   Legal/result styles retain the mockup-04 baseline; the landing shell follows the
   signed-off mockup 05. Reuse the :root tokens — no hex literals.

   Accessibility baseline (approved 2026-09-01): the original palette
   failed WCAG 2.1 AA, which requirements.md lists as a Technical Requirement
   — 9 of 14 text/background pairs were under 4.5:1, the worst at 2.42:1. The hues are
   preserved; the text tokens are darkened until they pass, and gold is split into a
   decorative value and a readable text value. See docs/decisions/005-contrast-and-type-scale.md. */

/* ─── Design Tokens ─── */
:root {
  --ivory:      #F8F5EF;
  --cream:      #EDE9DF;
  --warm-white: #FDFBF7;
  --charcoal:   #1A1916;
  --ink:        #101820;
  --on-dark:    #EDEAE2;
  --on-dark-dim:#B7B2A8;
  /* Decorative gold: rules, marks, the tagline border. Never used for text or for a
     focus indicator — at 2.42:1 on ivory it fails both AA text (4.5) and the 3:1 that
     WCAG 1.4.11 asks of non-text UI. */
  --gold:       #C4993A;
  --gold-light: #D9B96A;
  /* Readable gold: every gold *text* colour, and every focus ring. 4.51:1 on ivory. */
  --gold-text:  #8B6C29;
  --gold-text-hover: #6E551F;   /* 6.47:1 — hover darkens; the old #D9B96A was 1.74:1 */
  --warm-gray:  #5F5C57;        /* 6.12:1 — secondary text: form labels, legal-updated */
  /* Approved-mockup footer rule tint (--on-dark at 15% opacity). */
  --on-dark-border: rgba(237,234,226,0.15);
  --border:     rgba(196,153,58,0.25);
  --text-muted: #75706B;        /* 4.50:1 — tertiary: form notes, placeholders */
  /* Readable gold on the cream `.alt` surfaces: --gold-text is only 4.05:1 on --cream,
     below the 4.5 AA minimum (round-2 review). Same value as --gold-text-hover, but a
     distinct surface contract so cream text never silently follows hover changes. */
  --gold-text-on-cream: #6E551F;  /* 5.81:1 on --cream */
  --error:      #B94A4A;        /* 4.66:1 on --ivory — AA for form error messages */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  /* Manrope is the one body face everywhere per ADR-008: the only self-hosted face whose
     subsets cover the Ukrainian/Russian baseline text every page now renders. DM Mono
     stays for small labels/navigation/accents; Manrope supplies its Cyrillic glyphs. */
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Manrope', monospace;
}

/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* Flex column pins every page's footer to the viewport bottom: the fixed nav is out of
   flow on every page; wrapper padding clears it. */
body {
  background: var(--ivory);
  color: var(--charcoal);
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
}

/* ─── Split Screen Layout ─── */
.container {
  display: flex;
  min-height: 100vh;
}
/* ─── Left: Photo ─── */
.photo-side {
  flex: 0 0 45%;
  position: relative;
  background: var(--charcoal);
  overflow: hidden;
}
.photo-side picture {
  display: block;
  width: 100%;
  height: 100%;
}
.photo-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(26,25,22,0.1) 0%,
    rgba(26,25,22,0.3) 100%
  );
  pointer-events: none;
}
/* ─── Right: Content Card ─── */
.content-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 5vw;
  max-width: 720px;
}

/* ─── Skip link ───
   First focusable element on every page; visually hidden until focused. */
.skip-link {
  background: var(--ivory);
  border: 1px solid var(--charcoal);
  color: var(--charcoal);
  left: 1rem;
  padding: 0.6rem 1.2rem;
  position: absolute;
  text-decoration: none;
  top: 0.75rem;
  transform: translateY(-200%);
  z-index: 200;
}
.skip-link:focus { transform: none; }

/* ─── Keyboard focus ─── */
.btn-submit:focus-visible {
  outline: 1px solid var(--gold-text);
  outline-offset: 3px;
}

/* ─── Header ─── */
.header {
  margin-bottom: 2.5rem;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.eyebrow span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.name {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 0.6rem;
}
.title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--warm-gray);
  line-height: 1.5;
}
.title em {
  font-style: italic;
  color: var(--charcoal);
}

/* ─── Tagline ─── */
.tagline {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  color: var(--charcoal);
  margin-bottom: 2rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gold);
}

/* ─── Services ─── */
.services {
  margin-bottom: 2.5rem;
}
.services-heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1rem;
}
.services-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.service-item {
  font-size: 0.92rem;
  color: var(--warm-gray);
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.service-item::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--gold);
  opacity: 0.4;
  flex-shrink: 0;
}

/* ─── Contact Form ─── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.form-group label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.form-group input,
.form-group textarea {
  background: var(--warm-white);
  border: 1px solid var(--border);
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  border-radius: 0;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group textarea:focus { border-color: var(--gold-text); }
.form-group textarea { resize: vertical; min-height: 90px; }

/* Honeypot: hidden from humans and assistive tech, visible to bots */
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-footer {
  /* The reply-time note is gone (Olga's decision); the lone submit button keeps the
     mockup's right-aligned position. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: var(--charcoal);
  border: none;
  padding: 0.9rem 1.8rem;
  /* The 11px type floor made "SEND MESSAGE" wrap inside the button; the label is two
     short words and should stay on one line at every breakpoint. */
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-submit:hover { background: var(--gold-text); }
.btn-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* Loading spinner: hidden unless the button carries .is-loading (set by form.js
   while the fetch is in flight — see the "brief delay, no feedback" fix). */
.btn-spinner {
  display: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(253,251,247,0.4);
  border-top-color: var(--warm-white);
  border-radius: 50%;
  animation: btn-spinner-rotate 0.6s linear infinite;
}
.btn-submit.is-loading .btn-spinner { display: inline-block; }
@keyframes btn-spinner-rotate {
  to { transform: rotate(360deg); }
}

.form-success {
  display: none;
  padding: 1.25rem 1.5rem;
  background: var(--warm-white);
  border-left: 2px solid var(--gold);
}
.form-success p {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--charcoal);
}
.form-error {
  display: none;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--error);
}
.form-error-contact {
  display: none;
  margin-top: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--warm-gray);
}
.form-error-contact a {
  color: var(--gold-text);
  text-decoration: underline;
}
.form-error-contact a:hover { color: var(--gold-text-hover); }
.form-error-contact a:focus-visible {
  outline: 1px solid var(--gold-text);
  outline-offset: 2px;
}

/* ─── Standalone Pages (form result, legal, 404) ─── */
/* body is the flex column (see above); these wrappers fill it below the shared nav
   so the footer stays pinned. */
.standalone-page {
  display: flex;
  align-items: center;
  justify-content: center;
}
.standalone-content {
  max-width: 560px;
  text-align: center;
}
.standalone-content .eyebrow {
  justify-content: center;
}
.standalone-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--charcoal);
  margin: 1rem 0;
}
.standalone-text {
  font-size: 1rem;
  color: var(--warm-gray);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.standalone-link,
.standalone-text a {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-decoration: none;
}
.standalone-link:hover,
.standalone-text a:hover { color: var(--gold-text-hover); }
.standalone-link:focus-visible,
.standalone-text a:focus-visible {
  outline: 1px solid var(--gold-text);
  outline-offset: 3px;
}

/* ─── Legal Pages (impressum, privacy) ─── */
/* Long-form documents: left-aligned and measure-limited for reading, unlike the
   centred .standalone-page used for short result/404 messages. */
.legal-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 46rem;
  margin: 0 auto;
  padding: 8rem 1.5rem 3rem;
}
.legal-content {
  flex: 1;
}
.legal-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 400;
  color: var(--charcoal);
  margin: 1rem 0 0.5rem;
}
.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
}
.legal-section {
  margin-bottom: 2rem;
}
.legal-section h2 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.6rem;
}
.legal-section p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--warm-gray);
}
.legal-address {
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.9;
  color: var(--charcoal);
  padding-left: 1.25rem;
  border-left: 1px solid var(--border);
}
.legal-address a {
  color: var(--gold-text);
  text-decoration: none;
}
.legal-address a:hover { color: var(--gold-text-hover); }
.legal-address a:focus-visible {
  outline: 1px solid var(--gold-text);
  outline-offset: 2px;
}
.legal-page .standalone-link {
  display: inline-block;
  margin-top: 1rem;
}

/* Standalone pages (form result, 404) centre their message between nav and footer. */
.standalone-page-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 46rem;
  margin: 0 auto;
  padding: 5rem 1.5rem 3rem;
  width: 100%;
}
.standalone-page-wrap .standalone-page {
  flex: 1;
  min-height: 0;
  padding: 4rem 0;
}

/* ─── Mobile ─── */
@media (max-width: 900px) {
  .container {
    flex-direction: column;
  }
  .photo-side {
    flex: none;
    height: 45vh;
    min-height: 300px;
  }
  .photo-side img {
    object-position: center 20%;
  }
  .content-side {
    padding: 2.5rem 1.5rem;
    max-width: 100%;
  }
  .name {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
  .tagline {
    font-size: 1.15rem;
    padding-left: 1rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .btn-submit {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .legal-page {
    padding: 6.5rem 1.25rem 2.5rem;
  }
  .legal-section p,
  .legal-address {
    font-size: 0.9rem;
  }
}

/* ─── Long-form landing shell (Mockup 05 / Group 2) ─── */
.landing-page { background: var(--ivory); }
body.menu-open { overflow: hidden; }
.landing-page img { display: block; max-width: 100%; }
.landing-page main { display: block; }
.editorial-prefix {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Navigation */
.main-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 4vw;
  transition: background 0.35s, box-shadow 0.35s;
}
.main-nav:is(.scrolled, .on-light) {
  background: rgba(248,245,239,0.97);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border);
}
/* Subpages (legal, result, 404) sit on ivory: their nav is the landing nav, fixed and
   permanently in its solid ("scrolled") state; content clears it via wrapper padding. */
.main-nav.on-light { background: var(--ivory); box-shadow: 0 1px 0 var(--border); }
.nav-logo {
  color: var(--on-dark);
  display: block;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.02;
  text-decoration: none;
  white-space: nowrap;
}
.nav-logo b {
  color: var(--gold-light);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}
.main-nav:is(.scrolled, .on-light) .nav-logo,
.landing-page.menu-open .main-nav .nav-logo { color: var(--charcoal); }
.landing-page.menu-open .main-nav {
  /* The drawer is a dropdown panel now — without an ivory nav bar the dark menu-open
     text sat on the dark hero at the top of the page (review round 3). */
  background: var(--ivory);
  box-shadow: 0 1px 0 var(--border);
}
.main-nav:is(.scrolled, .on-light) .nav-logo b,
.landing-page.menu-open .main-nav .nav-logo b { color: var(--gold-text); }
.nav-links {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.main-nav:is(.scrolled, .on-light) .nav-links a { color: var(--warm-gray); }
.nav-links a:hover,
.nav-links a:focus-visible { color: var(--gold-light); }
.main-nav:is(.scrolled, .on-light) .nav-links a:hover,
.main-nav:is(.scrolled, .on-light) .nav-links a:focus-visible { color: var(--gold-text); }
.nav-right {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 1rem;
}

/* Selector */
.lang-selector {
  align-items: center;
  display: flex;
  gap: 0.35rem;
}
.lang-option {
  background: none;
  border: 0;
  color: var(--on-dark-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.45rem;
  position: relative;
}
.lang-option + .lang-option::before {
  background: var(--gold);
  content: '';
  height: 0.6875rem;
  left: -0.12rem;
  opacity: 0.6;
  position: absolute;
  top: 0.52rem;
  width: 1px;
}
.lang-option:hover,
.lang-option:focus-visible,
.lang-option[aria-pressed="true"] { color: var(--gold-light); }
.lang-option[aria-pressed="true"]::after {
  background: var(--gold);
  bottom: 0;
  content: '';
  height: 1px;
  left: 0.45rem;
  position: absolute;
  right: 0.45rem;
}
.main-nav:is(.scrolled, .on-light) .lang-option,
.landing-page.menu-open .main-nav .lang-option { color: var(--warm-gray); }
.main-nav:is(.scrolled, .on-light) .lang-option:hover,
.main-nav:is(.scrolled, .on-light) .lang-option:focus-visible,
.main-nav:is(.scrolled, .on-light) .lang-option[aria-pressed="true"],
.landing-page.menu-open .main-nav .lang-option:hover,
.landing-page.menu-open .main-nav .lang-option:focus-visible,
.landing-page.menu-open .main-nav .lang-option[aria-pressed="true"] { color: var(--gold-text); }

.btn {
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.25s, transform 0.2s;
  white-space: nowrap;
}
.btn-gold { background: var(--gold-text); color: var(--warm-white); }
.btn-gold:hover { background: var(--gold-text-hover); transform: translateY(-1px); }
.btn:focus-visible,
.lang-option:focus-visible,
.nav-links a:focus-visible,
.nav-logo:focus-visible,
.nav-hamburger:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 3px;
}
.main-nav:is(.scrolled, .on-light) .btn:focus-visible,
.main-nav:is(.scrolled, .on-light) .lang-option:focus-visible,
.main-nav:is(.scrolled, .on-light) .nav-links a:focus-visible,
.main-nav:is(.scrolled, .on-light) .nav-logo:focus-visible,
.main-nav:is(.scrolled, .on-light) .nav-hamburger:focus-visible,
.landing-page.menu-open .main-nav .btn:focus-visible,
.landing-page.menu-open .main-nav .lang-option:focus-visible,
.landing-page.menu-open .main-nav .nav-logo:focus-visible,
.landing-page.menu-open .main-nav .nav-hamburger:focus-visible {
  outline-color: var(--gold-text);
}

.nav-hamburger {
  background: none;
  border: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.35rem;
}
.nav-hamburger span {
  background: var(--on-dark);
  height: 2px;
  transition: 0.25s;
  width: 22px;
}
.main-nav:is(.scrolled, .on-light) .nav-hamburger span,
.landing-page.menu-open .main-nav .nav-hamburger span { background: var(--charcoal); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  /* A compact dropdown panel glued to the nav's bottom edge (auto height) — not the
     full-screen overlay with a viewport-pinned footer Olga rejected (review round 3).
     The dialog mechanics (focus trap, Escape, scroll lock) are unchanged. */
  background: var(--ivory);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px -18px rgba(26,25,22,0.25);
  display: none;
  flex-direction: column;
  gap: 0.65rem;
  left: 0;
  padding: 1.5rem 8vw;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 99;
}
.mobile-menu.open { display: flex; }
.mobile-menu > a {
  border-bottom: 1px solid var(--border);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 4vw, 1.35rem);
  padding-bottom: 0.45rem;
  text-decoration: none;
}
.mobile-menu > a:hover { color: var(--gold-text); }
.mobile-menu > a:focus-visible,
.mobile-menu .lang-option:focus-visible {
  outline: 1px solid var(--gold-text);
  outline-offset: 3px;
}
.mobile-menu .lang-option { color: var(--warm-gray); font-size: 0.8rem; }
.mobile-menu .lang-option:hover,
.mobile-menu .lang-option:focus-visible,
.mobile-menu .lang-option[aria-pressed="true"] { color: var(--gold-text); }
.mobile-menu .lang-option + .lang-option::before { display: none; }
.mobile-lang-selector { gap: 0.75rem; margin-top: 0.85rem; }
/* Olga's review: the CTA that left the nav bar lives at the panel's bottom, with the
   language selector beside it (wrapping below on very narrow screens). */
.drawer-footer {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  justify-content: space-between;
  margin-top: 0.9rem;
  padding-top: 1.1rem;
}
.drawer-footer .mobile-lang-selector { margin-top: 0; }
/* On very narrow screens the footer stays one row: the CTA label wraps inside the
   button instead of pushing the selector to a second row — Olga asked for the
   selector beside the button. */
@media (max-width: 480px) {
  .drawer-footer { flex-wrap: nowrap; }
  .drawer-cta {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.8rem 1rem;
    text-align: left;
    white-space: normal;
  }
  .drawer-footer .mobile-lang-selector { flex: 0 0 auto; gap: 0.5rem; }
}

/* Hero */
.hero {
  background: var(--ink);
  color: var(--on-dark);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  min-height: 100vh;
  min-height: 100svh;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  /* `safe center` falls back to start-align when the copy is taller than the hero
     (long German headline on short laptops) — nothing clips invisibly at the top. */
  justify-content: center;
  justify-content: safe center;
  /* Olga's review: 9rem/5rem padding pushed the hero past one viewport on common
     16:9 laptops; tightened so positioning, headline, and CTA fit the first screen. */
  padding: 6.5rem 5vw 3.5rem 8vw;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  align-items: center;
  color: var(--gold-light);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  gap: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
}
.hero-eyebrow::before {
  background: var(--gold);
  content: '';
  flex-shrink: 0;
  height: 1px;
  width: 40px;
}
.hero-title {
  color: var(--warm-white);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 4rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: 1.1rem;
  max-width: 18ch;
}
.hero-sub {
  color: var(--on-dark-dim);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 48ch;
}
.hero-tagline {
  border-left: 2px solid var(--gold);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  margin: 1.3rem 0;
  /* 40ch wraps the German tagline to two lines (Olga's review) — the shorter
     UA/EN versions are unaffected. */
  max-width: 40ch;
  padding-left: 1.3rem;
}
/* Olga's review: the long German headline at full display size reads aggressive.
   html[lang] follows the language switch, so only the German version steps down. */
html[lang="de"] .hero-title { font-size: clamp(2.1rem, 3.5vw, 3.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-meta {
  border-top: 1px solid rgba(237,234,226,0.14);
  color: var(--on-dark-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  text-transform: uppercase;
}
.hero-figure {
  background: var(--ink);
  margin: 0;
  overflow: hidden;
  position: relative;
}
/* Absolutely positioned: the portrait must never drive the hero's height with its
   own aspect (a 0.95fr column at 1920px wanted 1368px of row height — the hero
   overflowed common laptops). The pane sizes with the grid; the image fills it. */
.hero-figure picture {
  display: block;
  inset: 0;
  position: absolute;
}
.hero-figure img {
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  width: 100%;
}
.hero-figure::after {
  background: linear-gradient(to right, rgba(16,24,32,0.55), rgba(16,24,32,0) 40%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* On unusually wide viewports, preserve the full portrait against its uniform dark
   background rather than progressively cropping it out of the shallow image pane.
   The threshold sits ABOVE 16:9: exactly-16:9 laptops (1920×1080, 1366×768) are the
   common case and get the cover crop — the letterboxed fallback there read as dead
   dark space beside the portrait (Olga's review). */
@media (min-aspect-ratio: 1.85) {
  .hero-figure img { object-fit: contain; }
}

/* Short laptop screens: tighten the hero's vertical rhythm further so even the long
   German headline, sub, tagline, CTA, and location line fit one viewport (Olga's
   review — the hero must not overflow the display). Desktop widths only; the
   message-first mobile rules below own their own spacing. */
@media (min-width: 1021px) and (max-height: 800px) {
  .hero-copy { padding: 5rem 5vw 2.5rem 8vw; }
  .hero-eyebrow { margin-bottom: 0.9rem; }
  .hero-title { font-size: clamp(2.5rem, 3.6vw, 3.5rem); }
  .hero-tagline { margin: 0.9rem 0; }
  .hero-meta { margin-top: 1.1rem; padding-top: 0.9rem; }
}

/* ─── Long-form sections (Mockup 05 / Group 3): Coaching, Consulting, the
       explainer, Ways to Work ─── */
/* Anchor jumps must land a section flush against the nav's bottom edge — a sliver of
   the previous section showed with the old 5rem padding (Olga's review). The values
   are the measured nav heights: 74.875px desktop, 59.1875px at ≤760px (floored). If
   the nav's content changes, re-measure and update both. */
html { scroll-padding-top: 74px; }
.wrap { margin: 0 auto; max-width: 1180px; }
.section { padding: 6.5rem 8vw; }
.alt { background: var(--cream); }

.section-label {
  align-items: center;
  display: flex;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.section-label::before {
  background: var(--gold);
  content: '';
  flex-shrink: 0;
  height: 1px;
  width: 34px;
}
.section-label span,
.section-label .section-label-text {
  color: var(--gold-text);
  font-family: var(--font-mono);
  /* Review feedback (group 3): 0.6875rem labels read too small; 12px stays well above
     the ADR-005 11px floor. */
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-label .section-label-text {
  /* Round-2 review: sections without a real h2 (ways, foundation, philosophy) use this
     class on the semantic heading replacing the span — the UA heading reset (margin,
     weight) keeps the rendering byte-identical to the span it replaced. */
  font-weight: inherit;
  margin: 0;
}
.alt .section-label span,
.alt .section-label .section-label-text {
  color: var(--gold-text-on-cream);
}
.section-heading {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.12;
}
.divider-gold {
  background: var(--gold);
  height: 2px;
  margin: 1.6rem 0;
  width: 56px;
}
.body-copy p {
  color: var(--warm-gray);
  max-width: 65ch;
}
.body-copy p + p { margin-top: 1.1rem; }
.section-note {
  color: var(--warm-gray);
  margin-bottom: 2.2rem;
  max-width: 52ch;
}
/* Review feedback (group 3): both topic-list labels sat too tight under the intro
   paragraphs. 2.4rem mirrors the mockup's own second-label spacing. */
.topics-label { margin-top: 2.4rem; }
.topics-note { margin-top: 1.6rem; }

/* Topic lists: "Term — description" is one master paragraph per item; the term is
   pulled onto its own line, the decorative dash inside the value is hidden. */
.topic-list {
  background: var(--border);
  border: 1px solid var(--border);
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin-top: 2rem;
}
.topic {
  align-items: flex-start;
  background: var(--warm-white);
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  transition: background 0.25s;
}
.topic:hover { background: var(--cream); }
.topic-num {
  color: var(--gold-text);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.2;
  min-width: 1.6rem;
}
.topic p {
  color: var(--warm-gray);
  font-size: 0.92rem;
  line-height: 1.55;
}
.topic strong {
  color: var(--charcoal);
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.topic-sep { display: none; }
.topic-rest {
  background: var(--ivory);
  font-style: italic;
  grid-column: 1 / -1;
}
.topic-rest p { color: var(--charcoal); }

/* Business-consulting system chain: gold accent on the body face. The mockup's mono
   family only ever rendered for Latin, so the approved RU/UA review appearance was the
   body face throughout (ADR-008 fallback); DE/EN exposed real DM Mono and read like
   code — review feedback (group 3) unified it to the body face in every language.
   Specificity note: this must out-rank `.body-copy p`'s warm-gray or the gold never
   paints — the first review round shipped exactly that bug. */
.body-copy .consulting-system {
  color: var(--gold-text);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* Dark explainer section */
.dark { background: var(--charcoal); color: var(--on-dark); }
.dark .section-heading { color: var(--warm-white); }
.dark .section-label span,
.dark .section-label .section-label-text { color: var(--gold-light); }
/* Olga's review (round 5): the explainer heading spans the full width like every
   other section heading — the mockup's narrow 18ch left-anchored cap is dropped
   (intended deviation from mockup 05). */
.vs-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2.6rem;
}
.vs-card {
  background: rgba(253,251,247,0.03);
  border: 1px solid rgba(237,234,226,0.12);
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.7rem;
  transition: border-color 0.25s, transform 0.25s;
}
/* Mockup 05 hovers with decorative --gold here; on this dark surface the approved
   dark-surface gold token is --gold-light (ADR-005 gold split). */
.vs-card:hover { border-color: var(--gold-light); transform: translateY(-3px); }
.vs-card h3 {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 0.8rem;
}
/* Review fix (group 4): mockup 05 dimmed the third title to --on-dark via an
   :nth-child(3) override, but the shift is too subtle to read as intent — it read
   as a bug in review. All three explainer card titles render gold-light. Deviation
   from the signed-off mockup; Olga to confirm at the pre-release review
   (questions.md). */
.vs-card p {
  color: var(--on-dark-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Ways to Work */
.ways-grid {
  align-items: start;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-inline: auto;
  margin-top: 2.6rem;
  max-width: 860px;
}
/* The two service cards stack in the grid's left column so the desktop columns
   align without stretching either card (approved mockup, 2026-09-17). */
.ways-stack { display: grid; gap: 1.5rem; }
.ways-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 2rem 1.8rem;
  transition: transform 0.25s, box-shadow 0.25s;
}
.ways-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(26,25,22,0.25); }
.ways-card h3 {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 400;
  margin-bottom: 0.7rem;
}
.ways-card > p {
  color: var(--warm-gray);
  font-size: 0.94rem;
  line-height: 1.6;
}
.ways-sub {
  border-top: 1px solid var(--border);
  list-style: none;
  margin-top: 1.2rem;
  padding-top: 1.2rem;
}
.ways-sub li {
  color: var(--warm-gray);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 0.4rem 0;
}
.ways-sub strong { color: var(--charcoal); font-weight: 500; }
.ways-speaking { background: var(--charcoal); border-color: var(--charcoal); }
.ways-speaking h3 { color: var(--gold-light); }
.ways-speaking > p { color: var(--on-dark-dim); }
.ways-photo { background: var(--ink); margin: 1.4rem 0 0; overflow: hidden; }
.ways-photo img {
  display: block;
  height: 170px;
  object-fit: cover;
  object-position: center 25%;
  width: 100%;
}
.ways-photo-full { aspect-ratio: 8 / 9; overflow: hidden; }
.ways-photo-full img {
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* About: the narrative opening (blocks 2+3). The figure's offset frame uses the
   section surface colour, as in the signed-off mockup. */
.about-grid {
  align-items: center;
  display: grid;
  gap: 5rem;
  grid-template-columns: 0.9fr 1.1fr;
}
.about-figure { position: relative; }
.about-figure img {
  box-shadow: 24px 24px 0 0 var(--cream);
  display: block;
  height: auto;
  width: 100%;
}
.about-pull {
  border-left: 2px solid var(--gold);
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  margin: 2rem 0;
  padding-left: 1.4rem;
}
/* Review spacing mirrors the mockup's own second-label and sub-heading gaps. */
.about-path-label { margin-top: 2.4rem; }
.about-path-copy { margin-top: 1.2rem; }
.section-sub {
  color: var(--charcoal);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  font-style: italic;
  font-weight: 400;
  margin-top: 0.6rem;
}

/* Approach: the dark mid-page accent (blocks 9+10) with the B&W portrait. */
.approach { background: var(--ink); color: var(--on-dark); }
.approach .section-heading { color: var(--warm-white); }
.approach .section-label span,
.approach .section-label .section-label-text { color: var(--gold-light); }
.approach-grid {
  align-items: start;
  display: grid;
  gap: 5rem;
  grid-template-columns: 1.1fr 0.9fr;
}
.approach-figure { position: sticky; top: 7rem; }
.approach-figure img {
  border: 1px solid rgba(237, 234, 226, 0.1);
  display: block;
  filter: grayscale(100%) contrast(1.02);
  height: auto;
  width: 100%;
}
.approach .body-copy p { color: var(--on-dark-dim); }
/* Specificity note: this must out-rank `.approach .body-copy p` or the lede never
   brightens — the same cascade trap the consulting system chain hit in group 3. */
.approach .body-copy .lede { color: var(--on-dark); }
.approach-work-label { margin-top: 2.6rem; }
.q-list { list-style: none; margin: 2.2rem 0; }
.q-list li {
  border-bottom: 1px solid rgba(237, 234, 226, 0.12);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.22rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  padding: 1.05rem 0 1.05rem 1.6rem;
  position: relative;
}
.q-list li::before {
  color: var(--gold-light);
  content: '?';
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  left: 0.2rem;
  position: absolute;
  top: 1.05rem;
}

/* Foundation: the credential strip (block 12). Each item is one whole
   "Term — description" master paragraph; the shared topic markup hides the dash. */
.cred-list {
  display: grid;
  gap: 1.8rem 2.5rem;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  margin-top: 2.4rem;
}
.cred { align-items: flex-start; display: flex; gap: 1rem; }
.cred-num {
  color: var(--gold-text);
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.2;
}
/* The credential strip sits on the cream .alt surface — the ivory-safe --gold-text is
   only 4.05:1 there (round-2 review). */
.alt .cred-num { color: var(--gold-text-on-cream); }
.cred p { color: var(--warm-gray); font-size: 0.88rem; line-height: 1.5; }
.cred strong { color: var(--charcoal); display: block; font-weight: 500; }

/* Philosophy: the dark closing statement (block 13). */
.philosophy { text-align: center; }
.philosophy .section-label { justify-content: center; }
.philosophy .section-label::before { display: none; }
.philosophy-statement {
  color: var(--warm-white);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.25;
  margin: 0 auto 2.4rem;
  max-width: 22ch;
}
.philosophy .body-copy { margin: 0 auto; max-width: 60ch; }
/* Olga's review: the paragraphs inherited .body-copy p's --warm-gray, which sits
   near 2.9:1 on --charcoal — unreadable. The brighter --on-dark restores AA. */
.philosophy .body-copy p { color: var(--on-dark); }

/* ─── Initial conversation (master block 14 + contact form, mockup 05) ───
   Placed before the responsive collapses below: the one-column override at
   1020px must win over the two-column base rule (source order). */
.contact-grid {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
}
.closing-points-label {
  /* Same colour as the body copy it leads into — the mockup's inline charcoal
     emphasis read as a different font (Olga's review). Deviation from mockup 05. */
  color: var(--warm-gray);
  margin: 1.4rem 0 0;
}
.closing-points {
  list-style: none;
  margin: 0.7rem 0 1.8rem;
}
.closing-points li {
  color: var(--warm-gray);
  padding: 0.3rem 0 0.3rem 1.7rem;
  position: relative;
}
.closing-points li::before {
  content: '—';
  color: var(--gold-text);
  left: 0.2rem;
  position: absolute;
}
/* Olga's review: the mockup's mono-uppercase gold tag read as lost and cryptic.
   The line now sits under the form's submit button as a quiet body-face sentence
   explaining how the sessions happen. Deviation from the signed-off mockup. */
/* Olga's review: lives in the form footer, on the button's line (round 5) — no
   margin of its own, the footer's gap spaces it. Hides with the form on success. */
.location-line {
  color: var(--warm-gray);
  font-size: 0.9rem;
}

@media (max-width: 1020px) {
  .topic-list, .vs-grid, .ways-grid, .contact-grid { grid-template-columns: 1fr; }
  .cred-list { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .approach-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact-grid { gap: 3rem; }
  /* requirements.md: the About copy must separate the hero portrait from the About
     portrait on narrow screens — the figure drops below the copy (mockup 05 review). */
  .about-figure { margin-top: 0.5rem; order: 2; }
  .about-figure img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 45%;
  }
  .approach-figure { max-width: 420px; position: static; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 59px; }
  .section { padding: 4.5rem 6vw; }
  .cred-list { grid-template-columns: 1fr; }
}

/* ─── Site footer (every page) ─── */
.site-footer {
  align-items: flex-start;
  background: var(--charcoal);
  color: var(--on-dark-dim);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(13rem, 1fr) auto auto;
  padding: 3.25rem clamp(1.5rem, 7vw, 7rem) 2.25rem;
}
.footer-name {
  color: var(--warm-white);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: normal;
}
.footer-role {
  color: var(--gold-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  margin-top: 0.5rem;
  max-width: 31rem;
}
/* Footer Connect group (approved 2026-09-17): social profiles and legal links form
   two distinct utility groups beside the identity facts. Inline decorative SVG marks,
   visible platform names, 44px targets, --on-dark/--gold-light on --charcoal (pairs
   proven in tests/test_contrast.py). */
.footer-connect,
.footer-legal { min-width: 9.5rem; }
.footer-connect-heading,
.footer-legal-heading {
  color: var(--gold-light);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: normal;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}
.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  list-style: none;
}
.footer-social-link {
  align-items: center;
  color: var(--on-dark);
  display: inline-flex;
  font-size: 0.9rem;
  gap: 0.65rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.2rem;
  text-decoration: none;
  transition: color 0.2s;
  width: max-content;
}
.footer-social-link svg { fill: currentColor; flex: 0 0 auto; height: 1.05rem; width: 1.05rem; }
.footer-social-link .instagram-mark {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.footer-social-link:hover { color: var(--gold-light); }
.footer-social-link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}
/* On wide footers the 44px target centres its label below the compact heading.
   This approved lift keeps the visible link row immediately beneath Connect. */
@media (min-width: 761px) {
  .footer-social-links { margin-top: -0.75rem; }
}
.footer-legal .footer-links {
  display: grid;
  gap: 0.55rem;
  list-style: none;
}
.footer-legal .footer-links li { line-height: normal; }
.footer-legal .footer-links a {
  color: var(--on-dark-dim);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  line-height: normal;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.footer-legal .footer-links a:hover { color: var(--gold-light); }
.footer-legal .footer-links a:focus-visible {
  outline: 1px solid var(--gold-light);
  outline-offset: 3px;
}
.footer-bottom {
  border-top: 1px solid var(--on-dark-border);
  display: flex;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  gap: 1rem;
  grid-column: 1 / -1;
  justify-content: space-between;
  letter-spacing: 0.08em;
  line-height: normal;
  padding-top: 1.4rem;
  width: 100%;
}
.footer-bottom span:last-child { color: var(--on-dark-dim); }

/* The translated positioning line, five section labels, selector, and CTA need more
   than 1440px at the 11px type floor; use the signed-off drawer before they collide. */
@media (max-width: 1600px) {
  .js .nav-links { display: none; }
  .js .nav-hamburger { display: flex; }

  /* Progressive enhancement: before/without JS, keep real anchors visible instead
     of replacing them with an inert hamburger. */
  html:not(.js) .main-nav {
    background: var(--ivory);
    box-shadow: 0 1px 0 var(--border);
    flex-wrap: wrap;
    position: relative;
  }
  html:not(.js) .main-nav .nav-logo,
  html:not(.js) .main-nav .nav-links a { color: var(--charcoal); }
  html:not(.js) .main-nav .nav-logo b,
  html:not(.js) .main-nav .nav-links a:hover,
  html:not(.js) .main-nav .nav-links a:focus-visible { color: var(--gold-text); }
  html:not(.js) .main-nav .nav-logo:focus-visible,
  html:not(.js) .main-nav .nav-links a:focus-visible,
  html:not(.js) .main-nav .btn:focus-visible { outline-color: var(--gold-text); }
  html:not(.js) .main-nav > .nav-right > .lang-selector { display: none; }
  html:not(.js) .nav-links {
    display: flex;
    flex-basis: 100%;
    order: 3;
    overflow-x: auto;
    padding: 0.75rem 0 0.25rem;
  }
}

@media (max-width: 1020px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  /* Message first: copy precedes the portrait in both DOM and visual order. */
  .hero-copy { padding: 8rem 8vw 3.5rem; }
  .hero-figure { height: 44vh; min-height: 300px; }
  .hero-figure::after {
    background: linear-gradient(to bottom, rgba(16,24,32,0.45), rgba(16,24,32,0) 35%);
  }
}

@media (max-width: 760px) {
  .main-nav { gap: 0.75rem; padding: 1rem 5vw; }
  .nav-logo { font-size: 1.25rem; }
  .nav-logo b { display: none; }
  .main-nav > .nav-right > .lang-selector { display: none; }
  .hero-copy { padding: 7.5rem 6vw 3.25rem; }
  .hero-title { font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .site-footer {
    gap: 2rem;
    grid-template-columns: 1fr;
    padding: 2.5rem 1.5rem 1.75rem;
  }
  .footer-connect,
  .footer-legal { min-width: 0; }
  /* Mockup's narrow Connect treatment: the links stay one wrapping row, just
     smaller and tighter (its grid/width rules were dead on the flex list). */
  .footer-social-links { gap: 0.25rem 0.6rem; }
  .footer-social-link { font-size: 0.82rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 0.55rem; }
}

@media (max-width: 480px) {
  .hero-figure { height: 42vh; min-height: 280px; }
}

/* ─── Reduced motion ───
   The rotation of the submit spinner stops (it stays visible — the fetch feedback
   must not disappear), hover lifts flatten, and smooth scrolling becomes instant. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-gold:hover, .vs-card:hover, .ways-card:hover { transform: none; }
  .btn, .btn-submit, .form-group input, .form-group textarea, .footer-links a,
  .footer-social-link, .main-nav, .nav-hamburger span, .topic, .vs-card,
  .ways-card { transition: none; }
  .btn-spinner { animation: none; }
}