/* Borrmann Motors — shared stylesheet
   Dark charcoal, Cormorant Garamond headlines, gold accent. No JavaScript.
   Mobile-first; layout widens at 640 / 860 / 920px. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@600&display=swap');

:root {
  --bg: #16140f;
  --bg-alt: #16140f;   /* one ground colour throughout — sections are separated by spacing, not tone */
  --bg-deep: #16140f;
  --ink: #f4f0e6;
  --ink-soft: #d9d2c0;
  --ink-muted: #b5ac97;
  --ink-faint: #9a8f77;
  --ink-dim: #8a816c;
  --ink-dimmer: #6b6350;
  --rule: #262218;
  --rule-soft: #3a352a;
  --accent: #b98a4e;
  --accent-hover: #d4a86a;
  --pad-x: clamp(16px, 2vw, 24px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; margin: 0; line-height: 1.18; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg); }

.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--bg); padding: 10px 16px; z-index: 999; font-size: 13px; }
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- type helpers ---------- */
.eyebrow { display: block; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); font-weight: 400; }
.lede { font-size: 16px; font-weight: 300; line-height: 1.9; color: var(--ink-muted); max-width: 56ch; }
.mono { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.plate { display: inline-block; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--rule-soft); padding: 6px 12px; }
.placeholder { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent); }

/* ---------- wordmark ---------- */
.wordmark { font-family: 'Jost', 'Archivo', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); line-height: 1; white-space: nowrap; }
.wordmark:hover { color: #ffffff; }
.brand-mark { display: inline-block; font-family: 'Jost', 'Archivo', sans-serif; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); line-height: 1; }
.brand-mark-hero { font-size: clamp(30px, 4.2vw, 52px); line-height: 1.08; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 26px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400;
  border: 1px solid rgba(244, 240, 230, 0.4); color: var(--ink);
  transition: border-color .3s, color .3s, background .3s;
}
.btn:hover { border-color: var(--ink); color: #ffffff; }
.btn.solid { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.solid:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }
.btn-text, .text-link {
  display: inline-block; padding: 17px 0 13px;
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400;
  color: var(--ink); border-bottom: 1px solid rgba(244, 240, 230, 0.5); line-height: 1.2;
}
.btn-text:hover, .text-link:hover { color: #ffffff; border-color: #ffffff; }
.text-link.gold, .btn-text.gold { color: var(--accent); border-color: var(--accent); }
.text-link.gold:hover, .btn-text.gold:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* ---------- header / nav (CSS-only mobile menu) ---------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--pad-x);
  background: linear-gradient(to bottom, rgba(22, 20, 15, 0.9), rgba(22, 20, 15, 0));
}
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* header: the icon on the left, one word on the right, nothing else */
.menu-btn {
  position: relative; z-index: 320;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 44px; margin-left: -12px; cursor: pointer; color: var(--ink); user-select: none;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.45));
}
.menu-btn .bars { display: flex; flex-direction: column; gap: 5px; }
.menu-btn .bars i { width: 24px; height: 2px; background: currentColor; display: block; }
.menu-btn .x { display: none; font-size: 22px; line-height: 1; }
.nav-toggle:checked ~ .menu-btn .bars { display: none; }
.nav-toggle:checked ~ .menu-btn .x { display: block; }
.nav-toggle:focus-visible ~ .menu-btn { outline: 2px solid var(--accent); outline-offset: 3px; }
/* wordmark beside the icon — everywhere except the landing page, where the
   hero already carries it. margin-right:auto keeps it left of the free space. */
.nav-mark {
  position: relative; z-index: 320; margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0;
  font-size: 16px; color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
.nav-mark.current { display: none; }
.nav-toggle:checked ~ .nav-mark { visibility: hidden; }
.nav-inquire {
  position: relative; z-index: 320;
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0 8px 6px;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 400;
  color: var(--ink); text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.nav-inquire:hover { color: #ffffff; }
/* on the contact page itself the link has nowhere to go */
.nav-inquire.current { display: none; }
@media (max-width: 639px) { .nav-toggle:checked ~ .nav-inquire { visibility: hidden; } }

/* the menu: a narrow, translucent panel from the left — the page shows through, blurred */
.nav-scrim {
  position: fixed; inset: 0; z-index: 290; background: rgba(0, 0, 0, 0.25);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; cursor: pointer;
}
.nav-toggle:checked ~ .nav-scrim { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.nav-links {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
  width: min(100%, 420px);
  background: rgba(30, 27, 20, 0.58);
  backdrop-filter: blur(22px) saturate(120%); -webkit-backdrop-filter: blur(22px) saturate(120%);
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 110px clamp(28px, 6vw, 56px) 40px;
  transform: translateX(-100%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s .45s;
  overflow-y: auto;
}
@supports not (backdrop-filter: blur(1px)) { .nav-links { background: rgba(22, 20, 15, 0.94); } }
.nav-toggle:checked ~ .nav-links { transform: translateX(0); visibility: visible; transition: transform .45s var(--ease); }
.nav-list { width: 100%; }
.nav-links a {
  display: flex; align-items: center;
  font-family: 'Archivo', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-soft); padding: 14px 0; min-height: 44px;
}
.nav-links a:hover, .nav-links a.current { color: var(--ink); }
.nav-links a.current { color: var(--accent); }
.nav-links a .n { display: none; }
.nav-links a.lang { margin-top: 22px; font-size: 12px; color: var(--ink-faint); }
.nav-links a.lang:hover { color: var(--ink); }
.nav-links .nav-foot { margin-top: auto; padding-top: 32px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dimmer); }
/* ---------- layout ---------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-narrow { max-width: 860px; }
section, .section { padding: clamp(80px, 11vw, 150px) 0; }
.section-alt, .section-dark { background: var(--bg-alt); }
.section-green { background: var(--bg-deep); }
.section-tight { padding-top: 0; }
.stack > * + * { margin-top: 20px; }
.center { text-align: center; }
.center .lede, .center h1, .center h2 { margin-left: auto; margin-right: auto; }
.center .eyebrow { margin-bottom: 20px; }

.split { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.split > * { min-width: 0; }
.split-copy { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.split-copy h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.2; max-width: 18ch; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); } }

/* ---------- home hero (banner) ---------- */
.hero { position: relative; height: clamp(360px, 32vw, 580px); overflow: hidden; background: var(--bg); }
/* 48% keeps the whole car in frame while leaving the left third of the box as
   plain hall — the wordmark lives there and must never reach the bonnet. */
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% center; animation: heroFade 2.4s ease both; }
.hero .shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(22,20,15,0.88) 0%, rgba(22,20,15,0.55) 35%, rgba(22,20,15,0) 65%),
    linear-gradient(180deg, rgba(22,20,15,0.55) 0%, rgba(22,20,15,0) 30%, rgba(22,20,15,0.6) 100%);
}
.hero-copy {
  position: absolute; z-index: 2; left: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px; padding-top: 30px;
}
.hero-tagline { font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--ink-soft); }
/* Below 1125px the box is height-capped at 360px and gets squarer as the
   viewport narrows, so the 4:1 banner is zoomed in and the car's tail leaves
   the frame; there is also no room to overlay the wordmark beside the bonnet.
   The image therefore gets a wide box of its own and the copy moves
   underneath. From 1125px up, height is 32vw, the box ratio is constant and
   the whole car fits with the wordmark clear of it. Scoped to the copy hero —
   the plain banners keep their own rules below. */
@media (max-width: 1124px) {
  /* the fixed header is 80px tall; start the image below it so the car is
     never under the menu icon, the Inquire link or the header's gradient */
  .hero:not(.plain) { height: auto; min-height: 0; display: block; padding-top: 80px; }
  .hero:not(.plain) img.bg {
    position: static; width: 100%; height: auto;
    aspect-ratio: 2 / 1; object-fit: cover; object-position: 79% center;
  }
  .hero:not(.plain) .shade { display: none; }
  .hero-copy {
    position: static; transform: none; padding: 40px 24px 4px;
    align-items: center; text-align: center; gap: 18px;
  }
  .brand-mark-hero { font-size: clamp(32px, 8vw, 48px); }
}
@keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
/* plain banner: image only, no copy, just enough shade at the top for the nav */
.hero.plain { height: clamp(300px, 40vw, 640px); }
.hero.plain img.bg { object-position: center 55%; }
.hero.plain .shade { background: linear-gradient(180deg, rgba(22,20,15,0.6) 0%, rgba(22,20,15,0) 32%); }
@media (max-width: 639px) {
  .hero.plain { height: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .hero.plain img.bg { object-position: 62% center; }
}
.page-header.after-hero { padding-top: clamp(56px, 7vw, 88px); }

/* ---------- page header (inner pages) ---------- */
.page-header { padding: clamp(130px, 18vw, 180px) 0 clamp(56px, 7vw, 80px); background: var(--bg); }
.page-header.green { background: var(--bg-deep); }
.page-header h1 { font-size: clamp(34px, 5vw, 60px); max-width: 20ch; margin-top: 16px; }
.page-header .lede { margin-top: 20px; }

/* ---------- home sections ---------- */
.philosophy h1 { font-size: clamp(34px, 4.6vw, 62px); max-width: 21ch; }
.gap-sm { gap: 16px; } .gap-md { gap: 28px; } .gap-lg { gap: 44px; }
.center.flex { display: flex; flex-direction: column; align-items: center; }

.grid { display: grid; gap: clamp(20px, 3vw, 48px); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.figure { margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption { font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-faint); }

.stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(40px, 8vw, 110px); }
.stat { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.stat .num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(44px, 5vw, 68px); font-weight: 500; line-height: 1; }
.stat .label, .stat .eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- photo helpers ---------- */
.gallery { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } .gallery.two { grid-template-columns: repeat(2, 1fr); } }
.photo-caption { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin-top: 12px; }
.feature-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.portrait-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- feature rows (car page) ----------
   Two equal columns, square image, page-title-sized heading with the copy
   beneath it, vertically centred against the image. `.reverse` puts the image
   on the left. Rows stack one column wide below 860px, copy first.
   Desktop columns have a 40px gap (so images in alternating rows are 40px
   apart); the copy is additionally inset 40px on both sides so it is not
   flush with the image edge of the neighbouring rows. */
.features { display: grid; gap: clamp(84px, 9vw, 150px); }
.feature { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.feature.align-top { align-items: start; }
.feature > * { min-width: 0; }
.feature-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.feature-copy .checklist { max-width: 56ch; }
.feature-h { font-size: clamp(34px, 5vw, 60px); line-height: 1.1; max-width: 16ch; }
.feature-h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; font-weight: 500; }
.feature-text p + p { margin-top: 14px; }
.feature-text a { color: var(--accent); border-bottom: 1px solid rgba(185, 138, 78, 0.45); }
.feature-text a:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
.feature-pic { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.feature-pic-wrap .feature-pic { display: block; }
.photo-credit { margin-top: 8px; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-faint); text-align: right; }
.photo-credit a { color: inherit; border-bottom: 1px solid rgba(244, 240, 230, 0.35); }
.photo-credit a:hover { color: var(--accent); border-bottom-color: currentColor; }
/* centred title above a run of feature rows */
.feature-title {
  font-size: clamp(34px, 5vw, 60px); line-height: 1.1; text-align: center; max-width: 16ch;
  margin: 0 auto clamp(56px, 7vw, 96px);
}
@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; gap: 40px; }
  .feature-copy { padding: 0 40px; }
  .feature.reverse .feature-copy { order: 2; }
  .feature.reverse .feature-pic, .feature.reverse .feature-pic-wrap { order: 1; }
}

/* ---------- spec list ---------- */
.spec-list { border-top: 1px solid var(--rule-soft); margin-top: 28px; }
.spec-row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.spec-row .k { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); }
.spec-row .v { font-size: 15px; color: var(--ink-soft); }
@media (min-width: 640px) { .spec-row { grid-template-columns: 180px 1fr; gap: 20px; align-items: baseline; } }

/* ---------- craft rows / journey ---------- */
.craft-row { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 30px 0; border-top: 1px solid var(--rule-soft); }
.craft-row:last-child { border-bottom: 1px solid var(--rule-soft); }
.craft-row .idx { font-size: 11px; letter-spacing: 0.24em; color: var(--accent); padding-top: 6px; }
.craft-row h3 { font-size: 26px; margin-bottom: 8px; }
.craft-row p { max-width: 62ch; color: var(--ink-muted); }
@media (min-width: 640px) { .craft-row { grid-template-columns: 80px 1fr; gap: 26px; } }

.journey { margin-top: 20px; }
.journey-step { display: grid; grid-template-columns: 1fr; gap: 6px; position: relative; padding: 0 0 44px 28px; border-left: 1px solid var(--rule-soft); }
.journey-step:last-child { padding-bottom: 0; }
.journey-step::before { content: ''; position: absolute; left: -5px; top: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.journey-step .stage { font-size: 11px; letter-spacing: 0.24em; color: var(--ink-faint); }
.journey-step h3 { font-size: 24px; }
.journey-step p { color: var(--ink-muted); max-width: 56ch; font-size: 15px; margin-top: 4px; }
@media (min-width: 640px) {
  .journey-step { grid-template-columns: 120px 1fr; gap: 6px 30px; padding-left: 36px; }
  .journey-step .stage { grid-row: 1 / span 3; text-align: right; padding-top: 6px; }
}

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 48px; }
.person .portrait {
  aspect-ratio: 3 / 4; margin-bottom: 14px;
  background: repeating-linear-gradient(45deg, #221e16, #221e16 12px, #282318 12px, #282318 24px);
  display: flex; align-items: center; justify-content: center;
}
.person .portrait span { font-family: ui-monospace, monospace; font-size: 11px; color: var(--ink-faint); }
.person h3 { font-size: 24px; }
.person .role { color: var(--accent); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; margin: 6px 0 8px; }
.person p { font-size: 14px; color: var(--ink-muted); }
@media (min-width: 640px) { .people { grid-template-columns: repeat(3, 1fr); } }

/* ---------- cells (ownership) ---------- */
.cells { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); margin-top: 32px; }
.cell { background: var(--bg); padding: 32px 26px; }
.cell h3 { font-size: 24px; margin: 14px 0 10px; }
.cell p { font-size: 14px; color: var(--ink-muted); }
@media (min-width: 860px) { .cells { grid-template-columns: repeat(3, 1fr); } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 70px; } }
.contact-block { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.checklist li { position: relative; padding-left: 22px; margin-top: 12px; color: var(--ink-muted); }
.checklist li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--accent); }
.quiet-note { font-size: 12px; color: var(--ink-faint); margin-top: 24px; line-height: 1.8; }
.contact-block a { color: var(--accent); display: inline-flex; align-items: center; min-height: 44px; }
.contact-block a:hover { color: var(--accent-hover); }
.contact-block .text-link { margin-top: 6px; }

/* ---------- inquiry form (posts to mailto, no JavaScript) ---------- */
.inquiry { margin-top: 44px; display: flex; flex-direction: column; gap: 26px; max-width: 560px; }
.inquiry .field { display: flex; flex-direction: column; gap: 8px; }
.inquiry .field > span, .inquiry legend { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint); padding: 0; }
.inquiry input[type="text"], .inquiry input[type="email"], .inquiry textarea {
  width: 100%; min-height: 48px; padding: 12px 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--ink); font-family: 'Archivo', sans-serif; font-size: 16px; font-weight: 300; border-radius: 0; -webkit-appearance: none;
  transition: border-color .3s;
}
.inquiry textarea { resize: vertical; line-height: 1.6; }
.inquiry input:focus, .inquiry textarea:focus { outline: none; border-bottom-color: var(--accent); }
.inquiry .choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 26px; }
.inquiry .choice legend { margin-bottom: 12px; }
.inquiry .choice label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; color: var(--ink-soft); }
.inquiry .choice input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; border: 1px solid var(--ink-faint); border-radius: 50%; display: inline-block; position: relative; flex-shrink: 0; }
.inquiry .choice input:checked { border-color: var(--accent); }
.inquiry .choice input:checked::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.inquiry .choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.inquiry .choice label:hover span { color: var(--ink); }
.inquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* error notices are hidden until the Worker redirects back to #form-error / #send-error */
.form-error { display: none; margin: 0; padding: 14px 16px; border: 1px solid var(--accent); color: var(--ink); font-size: 14px; line-height: 1.6; }
.form-error:target { display: block; }
.form-error a { color: var(--accent); }
.form-note { font-size: 13px; line-height: 1.7; color: var(--ink-faint); margin: -10px 0 0; }
.form-note a { color: var(--accent); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 6px; }
.form-actions .btn { border: 0; cursor: pointer; font-family: 'Archivo', sans-serif; }
.reply { font-size: 13px; color: var(--ink-muted); }

/* ---------- legal pages (Impressum, privacy) ---------- */
.legal { font-size: 15px; line-height: 1.85; color: var(--ink-muted); }
.legal h2 { font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); margin: 44px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 16px; max-width: 72ch; }
.legal p.lede { color: var(--ink-soft); margin-bottom: 28px; }
.legal a { color: var(--accent); }
.legal a:hover { color: var(--accent-hover); }
.legal .placeholder { font-family: ui-monospace, monospace; font-size: 14px; }
.legal-note {
  border-left: 2px solid var(--rule-soft); padding: 4px 0 4px 18px;
  font-size: 13px; color: var(--ink-faint); margin-bottom: 36px !important;
}

/* ---------- footer ---------- */
footer { background: var(--bg-deep); color: var(--ink-soft); padding: clamp(64px, 8vw, 100px) 0 40px; }
.disclaimer {
  font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-dimmer);
  max-width: none; margin: 0 0 clamp(44px, 6vw, 72px);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 40px; } }
/* wordmark sits on its own line above the columns */
.footer-mark { display: inline-flex; align-items: center; min-height: 44px; font-size: 26px; margin-bottom: clamp(28px, 4vw, 44px); }
.footer-grid h4 { color: var(--ink-dimmer); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; margin: 0 0 16px; }
.footer-grid a, .footer-grid .line { display: block; padding: 9px 0; color: var(--ink-soft); font-size: 16px; font-weight: 300; }
.footer-grid a:hover { color: #ffffff; }
.footer-grid .line.placeholder { font-family: ui-monospace, monospace; font-size: 14px; color: var(--accent); }
.subfoot { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dimmer); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}