/* Motzkin Park Terrace: lead landing page.
   Direction: "The place carries it" (design-taste-frontend, seed 1690689891).
   Palette: dealt proportions (dark ground, bone ink, ochre and olive fields) with the
   tobacco brown replaced by the brochure's own deep green. */

:root {
  --bg: #0c3226;
  --surface: #134034;
  --ink: #e6ebe3;
  --muted: #b9c4ab;
  --accent: #c79a3e;
  --accent-ink: #1d1406;
  --f1: #c79a3e;
  --f1-ink: #1d1406;
  --f2: #4f5a1a;
  --f2-ink: #e6ebe3;
  --paper: #e9e9e1;
  --paper-ink: #17241b;
  --paper-soft: #46563f;
  --earth: #7a5c32;

  --display: "Imbue", "Times New Roman", serif;
  --text: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step-small: 1rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem);
  --step-display: clamp(3.4rem, 2rem + 5.6vw, 7.5rem);
  --step-sub: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);

  --m: clamp(16px, 2.2vw, 32px);
  --gap: clamp(72px, 9vw, 144px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --t: 220ms;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.55 var(--text);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sr { position: absolute; width: 2px; height: 2px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 100; padding: 12px 16px; background: var(--accent); color: var(--accent-ink); }
.skip:focus { top: 12px; }

main h2 { font: 400 var(--step-head)/0.92 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.d { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.9; }
.small { font-size: var(--step-small); }

/* buttons: one shape, square corners */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  background: var(--accent); color: var(--accent-ink);
  border: 0; border-radius: 0; text-decoration: none; font-weight: 500;
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease);
}
.btn--ghost { background: var(--surface); color: var(--ink); }
.link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- top bar ---------- */
.top {
  position: absolute; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 32px;
  padding: 20px var(--m);
}
.mark { text-decoration: none; display: flex; align-items: center; gap: 14px; line-height: 1; }
.mark b { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/0.9 var(--display); text-transform: uppercase; }
/* The Motzkin mark has dark lettering, so it sits on a paper plate and is never recoloured. */
.plate { display: inline-flex; align-items: center; background: var(--paper); padding: 6px 10px; flex: none; }
.plate img { display: block; height: 36px; width: auto; }
.plate--lg { padding: 12px 18px; }
.plate--lg img { height: 56px; }
.nav { display: none; margin-left: auto; gap: 28px; }
.nav a { text-decoration: none; padding: 10px 0; }
.top .btn { margin-left: auto; min-height: 44px; padding: 0 18px; }
@media (min-width: 900px) { .nav { display: flex; } .top .btn { margin-left: 0; padding: 0 28px; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 640px; height: 100svh; overflow: hidden; background: #000; }
.hero__pics, .hero__pics img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__pics img { object-fit: cover; opacity: 0; transition: opacity 1.6s ease-in-out; }
.hero__pics img.on { opacity: 1; }
.hero::after { /* neutral scrim under the text columns only */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 20%), linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.42) 38%, rgba(0,0,0,0) 62%); /* taste-skill-ignore: neutral scrim */
}
.hero__copy {
  position: absolute; z-index: 5; left: var(--m); top: 50%; transform: translateY(-54%);
  width: min(52vw, 740px);
}
.hero h1 { font-size: var(--step-display); line-height: 0.92; }
.hero h1 span { display: block; }
.hero__sub { margin-top: 24px; max-width: 40ch; font-size: var(--step-lead); line-height: 1.4; }
.hero__rera { margin-top: 18px; color: var(--ink); font-size: var(--step-small); max-width: 46ch; }
.hero__links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.hero__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.ico { width: 18px; height: 18px; flex: none; }
.hero__cards { position: absolute; z-index: 5; right: var(--m); bottom: var(--m); display: flex; gap: 16px; }
.card {
  display: block; width: clamp(180px, 15vw, 230px); text-decoration: none; background: var(--paper); color: var(--paper-ink);
  transition: transform var(--t) var(--ease);
}
.card img { aspect-ratio: 3/2; width: 100%; object-fit: cover; }
.card span { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 12px; font-weight: 500; font-size: var(--step-small); }
.card svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 899px) {
  .hero::after { background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.6) 40%, rgba(0,0,0,.5) 100%); /* taste-skill-ignore: neutral scrim */ }
  .hero__copy { width: auto; right: var(--m); top: 17svh; transform: none; }
  .hero__sub { font-size: 1.0625rem; margin-top: 16px; }
  .hero__rera { display: none; }
  .hero__cards { left: var(--m); right: var(--m); gap: 12px; }
  .card { width: auto; flex: 1; }
  .card span { min-height: 64px; }
}

/* ---------- section scaffolding ---------- */
.sec { padding: var(--gap) var(--m); position: relative; }
.sec h2 { font: 400 var(--step-head)/0.92 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(12px, 1.6vw, 24px); }

/* ---------- figure on the photograph's edge ---------- */
.figure { background: var(--bg); padding: 0 0 var(--gap); }
.figure__pic { position: relative; height: 88svh; min-height: 520px; overflow: hidden; }
.figure__pic > img { width: 100%; height: 100%; object-fit: cover; }
.figure__pic::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,0)); /* taste-skill-ignore: neutral scrim */ }
.figure__pic h2 { position: absolute; z-index: 2; left: var(--m); top: 24px; font-size: var(--step-lead); line-height: 1.1; }
.figure__pic .scrim-top { position: absolute; inset: 0 0 auto 0; height: 22%; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); /* taste-skill-ignore: neutral scrim */ pointer-events: none; }
.figure__num { position: absolute; z-index: 2; left: var(--m); bottom: 20px; font: 400 clamp(8rem, 5rem + 17vw, 17.5rem)/0.78 var(--display); letter-spacing: -0.02em; }
.figure__sentence { position: absolute; z-index: 2; right: var(--m); bottom: 32px; max-width: 26ch; text-align: right; font-size: var(--step-lead); line-height: 1.3; }
.figure__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 24px var(--m); padding: 40px var(--m) 0; }
.figure__facts div { display: flex; flex-direction: column; gap: 10px; }
.figure__facts b { font: 400 var(--step-sub)/0.95 var(--display); text-transform: uppercase; color: var(--accent); }
.figure__facts span { max-width: 36ch; color: var(--ink); }
@media (max-width: 899px) {
  .figure__pic { height: 80svh; }
  .figure__num { font-size: 36vw; bottom: 150px; }
  .figure__sentence { left: var(--m); right: var(--m); text-align: left; bottom: 24px; max-width: none; font-size: 1.125rem; }
  .figure__facts { grid-template-columns: 1fr; padding-top: 32px; }
}

/* ---------- cards crossing a held photograph ---------- */
.held { position: relative; background: var(--bg); }
.held__stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; }
.held__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); }
.held h2 { position: absolute; z-index: 3; left: var(--m); top: clamp(28px, 6svh, 64px); font-size: var(--step-head); }
.held__note { position: absolute; z-index: 3; left: var(--m); bottom: 20px; color: var(--ink); font-size: var(--step-small); }
.held__track { position: absolute; z-index: 2; top: 50%; left: 0; display: flex; gap: 40px; will-change: transform; transform: translate3d(45vw, -46%, 0); }
.slab { flex: none; width: clamp(480px, 50vw, 720px); aspect-ratio: 9/7; display: flex; flex-direction: column; background: var(--paper); }
.slab > img { height: 68%; width: 100%; object-fit: cover; }
.slab__panel { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: end; padding: 24px 28px; }
.slab__panel h3 { font: 400 var(--step-sub)/0.95 var(--display); text-transform: uppercase; }
.slab__panel p { text-align: right; font-size: var(--step-small); line-height: 1.4; }
.slab--olive .slab__panel { background: var(--f2); color: var(--f2-ink); }
.slab--gold .slab__panel { background: var(--f1); color: var(--f1-ink); }
.slab--green .slab__panel { background: #1f4d3d; color: var(--ink); }
.slab--earth .slab__panel { background: var(--earth); color: var(--ink); }
@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .held__stage { height: auto; min-height: 0; padding: 0 0 var(--gap); }
  .held__bg { position: relative; height: 56vw; filter: none; }
  .held h2 { position: static; padding: 32px var(--m) 24px; }
  .held__note { position: static; padding: 0 var(--m) 24px; display: block; }
  .held__track { position: static; transform: none !important; flex-direction: column; gap: 24px; padding: 0 var(--m); }
  .slab { width: 100%; aspect-ratio: auto; }
  .slab > img { height: auto; aspect-ratio: 4/3; }
  .slab__panel { grid-template-columns: 1fr; padding: 20px; gap: 8px; min-height: 140px; }
  .slab__panel p { text-align: left; }
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .held__wrap { height: 240svh; }
  .held__stage { position: sticky; top: 0; }
}

/* ---------- on site ---------- */
.site { background: var(--surface); }
.site__text { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 24px; }
.site__text p { max-width: 38ch; }
.site__text .portrait { margin-top: 16px; aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.site__big { grid-column: 5 / span 8; display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 24px); }
.site__big img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.rera { background: var(--f2); color: var(--f2-ink); padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.rera span { overflow-wrap: anywhere; }
.rera b { font: 400 var(--step-sub)/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .site__text, .site__big { grid-column: 1 / -1; }
  .site__big { margin-top: 32px; }
}

/* ---------- drag row ---------- */
.rowsec { background: var(--bg); padding: var(--gap) 0; }
.rowsec__head { display: flex; align-items: baseline; flex-wrap: wrap; padding: 0 var(--m) 32px; gap: 8px 32px; }
.rowsec__row {
  --h: 68svh; --g: 12px;
  display: flex; gap: var(--g); height: var(--h); min-height: 380px; overflow-x: auto; scroll-snap-type: x proximity;
  padding-left: 6vw; scrollbar-width: none; cursor: grab;
}
.rowsec__row::-webkit-scrollbar { display: none; }
.rowsec__row.drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (pointer: fine) { .rowsec__row { scroll-snap-type: none; } }
.mod { flex: none; height: 100%; scroll-snap-align: start; overflow: hidden; }
.mod img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.mod--tall { aspect-ratio: 3/4; }
.mod--wide { aspect-ratio: 16/10; }
.mod--pair { display: flex; flex-direction: column; gap: var(--g); aspect-ratio: 8/3; height: 100%; width: calc((var(--h) - var(--g)) / 2 * 1.3333); overflow: visible; }
.mod--pair > div { flex: 1; overflow: hidden; min-height: 0; }
.mod--pair::after { content: none; }
.rowsec__row::after { content: ""; flex: none; width: 6vw; }
.rowsec__note { padding: 24px var(--m) 0; max-width: 56ch; color: var(--ink); font-size: var(--step-small); }
@media (max-width: 899px) {
  .rowsec__row { --h: 62svh; --g: 8px; padding-left: 20px; }
  .mod--tall { width: 72vw; aspect-ratio: auto; }
  .mod--wide { width: 88vw; aspect-ratio: auto; height: 62%; align-self: center; }
  .mod--pair { width: 64vw; aspect-ratio: auto; }
}

/* ---------- printed sheet ---------- */
.sheetsec { position: relative; padding: var(--gap) var(--m); overflow: hidden; background: #000; }
.sheetsec > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5); }
.sheet {
  position: relative; width: min(640px, 100%); margin: 0 auto; padding: 72px clamp(28px, 4vw, 64px);
  background: var(--paper); color: var(--paper-ink); text-align: center;
  -webkit-mask: radial-gradient(circle at 12px 0, #0000 9px, #000 9.5px) top left / 24px 51% repeat-x, radial-gradient(circle at 12px 100%, #0000 9px, #000 9.5px) bottom left / 24px 51% repeat-x; /* taste-skill-ignore: scalloped edge mask */
          mask: radial-gradient(circle at 12px 0, #0000 9px, #000 9.5px) top left / 24px 51% repeat-x, radial-gradient(circle at 12px 100%, #0000 9px, #000 9.5px) bottom left / 24px 51% repeat-x; /* taste-skill-ignore: scalloped edge mask */
}
.sheet h2 { font-size: var(--step-sub); }
.sheet__note { margin-top: 12px; color: var(--paper-soft); font-size: var(--step-small); }
.sheet__group { margin-top: 56px; }
.sheet__group h3 { font: 400 var(--step-lead)/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.sheet__group ul { margin-top: 20px; display: grid; gap: 16px; text-align: left; }
.sheet__group li { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: baseline; font-size: var(--step-body); }
.sheet__group li small { grid-column: 1 / -1; color: var(--paper-soft); font-size: var(--step-small); margin-top: 2px; }
.sheet__group li em { font-style: normal; color: var(--paper-soft); font-size: var(--step-small); text-align: right; max-width: 22ch; }
.sheet__end { margin-top: 56px; font-size: var(--step-small); color: var(--paper-soft); }
.sheet__end a { color: var(--paper-ink); font-weight: 500; }
@media (max-width: 899px) {
  .sheetsec { padding-inline: 10px; }
  .sheet { padding: 56px 28px; }
  .sheet__group li { grid-template-columns: 1fr; row-gap: 2px; }
  .sheet__group li em { text-align: left; max-width: none; }
}

/* ---------- at a glance ---------- */
.glance { background: var(--surface); }
.glance__lead { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.glance__lead p { max-width: 46ch; font-size: var(--step-lead); line-height: 1.4; }
.glance__table { grid-column: 7 / span 6; width: 100%; border-collapse: collapse; font-size: var(--step-body); }
.glance__table th, .glance__table td { text-align: left; vertical-align: top; padding: 14px 0; }
.glance__table th { width: 34%; padding-right: 24px; font-weight: 500; color: var(--accent); }
.glance__table a { text-underline-offset: 5px; overflow-wrap: anywhere; }
@media (max-width: 899px) {
  .glance__lead, .glance__table { grid-column: 1 / -1; }
  .glance__table { margin-top: 32px; }
  .glance__table th { width: 38%; padding-right: 16px; }
}

/* ---------- distances ---------- */
.where { background: var(--bg); }
.where__art { grid-column: 1 / span 6; align-self: center; }
.where__art svg { width: 100%; height: auto; max-width: 620px; }
.where__text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 24px; align-self: center; }
.where table { width: 100%; border-collapse: collapse; font-size: var(--step-lead); }
.where td { padding: 12px 0; }
.where td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 500; }
.find { grid-column: 1 / -1; margin-top: clamp(48px, 6vw, 96px); background: var(--f2); color: var(--f2-ink); padding: clamp(28px, 4vw, 64px); display: grid; grid-template-columns: 7fr 5fr; gap: 32px clamp(24px, 3vw, 48px); align-items: center; }
.find h3 { font: 400 var(--step-head)/0.92 var(--display); text-transform: uppercase; }
.find p { margin-top: 16px; max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.find__acts { display: flex; flex-direction: column; gap: 12px; }
.btn--wide { width: 100%; min-height: 60px; justify-content: space-between; font-size: var(--step-body); }
.btn--paper { background: var(--paper); color: var(--paper-ink); }
.where__addr { color: var(--ink); max-width: 38ch; }
@media (max-width: 899px) {
  .where__art { display: none; }
  .where__text { grid-column: 1 / -1; }
  .find { grid-template-columns: 1fr; margin-top: 40px; }
}

/* ---------- visit planner / form ---------- */
.visit { background: var(--f1); color: var(--f1-ink); }
.visit__text { grid-column: 1 / span 6; padding-right: clamp(0px, 3vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.visit__text h2 { font-size: var(--step-display); line-height: 0.88; }
.visit__text .pic-in img { aspect-ratio: 16/10; width: 100%; object-fit: cover; }
.visit__text p { max-width: 36ch; font-size: var(--step-lead); line-height: 1.35; }
.visit__text a { color: var(--f1-ink); font-weight: 500; }
.form { grid-column: 7 / span 6; background: var(--bg); color: var(--ink); padding: clamp(24px, 3vw, 48px); display: grid; gap: 28px; }
.form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 12px; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 6px 18px;
  background: var(--surface); color: var(--ink); cursor: pointer; text-align: center; line-height: 1.2;
  transition: background-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.chip span small { color: var(--muted); font-size: var(--step-small); }
.chip input:checked + span { background: var(--accent); color: var(--accent-ink); }
.chip input:checked + span small { color: var(--accent-ink); }
.chip input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.chip input:active + span { transform: scale(0.97); }
.field { display: grid; gap: 8px; }
.field > label { font-weight: 500; }
.field input[type="text"], .field input[type="tel"], .field input[type="date"], .field select {
  width: 100%; height: 52px; padding: 0 16px; background: var(--surface); border: 2px solid transparent; border-radius: 0; font-size: 1rem;
}
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field[data-bad] input, .field[data-bad] select { border-color: #f0a190; }
.err { color: #f6b7a8; font-size: var(--step-small); min-height: 0; }
.phone { display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
.consent { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: var(--step-small); line-height: 1.45; color: var(--ink); }
.consent input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--accent); }
.form .btn { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.form .btn[disabled] { opacity: 0.6; cursor: progress; transform: none; }
.status { min-height: 1.4em; font-size: var(--step-small); }
.hp { position: absolute; left: -9999px; width: 2px; height: 2px; overflow: hidden; }
[hidden] { display: none !important; }
@media (max-width: 899px) {
  .visit__text, .form { grid-column: 1 / -1; }
  .form { margin-top: 32px; }
  .visit__text h2 { font-size: 16vw; }
}

/* ---------- faq ---------- */
.faq { background: var(--surface); padding: var(--gap) var(--m); }
.faq__left { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 32px; }

.faq__facts { display: grid; gap: 8px; font-size: var(--step-lead); line-height: 1.35; }
.faq__facts a { text-decoration: none; }
.faq details { padding: 14px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; font-size: var(--step-lead); line-height: 1.25; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform var(--t) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { margin-top: 10px; max-width: 52ch; color: var(--muted); }
.faq__acts { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.faq__right { grid-column: 7 / span 6; position: relative; margin-top: calc(var(--gap) * -1); margin-bottom: -40px; }
.faq__right .tall { aspect-ratio: 3/4; width: 100%; object-fit: cover; }
.faq__right .sq { position: absolute; left: -40px; bottom: 40px; width: 36%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) {
  .faq .grid { display: flex; flex-direction: column; }
  .faq__right { order: -1; margin: calc(var(--gap) * -1) calc(var(--m) * -1) 56px; }
  .faq__right .tall { aspect-ratio: 4/5; }
  .faq__right .sq { left: auto; right: var(--m); bottom: -24px; width: 38%; }
  .faq__left { grid-column: auto; }
}

/* ---------- footer ---------- */
.foot { background: var(--f2); color: var(--f2-ink); min-height: 70svh; padding: 40px var(--m) 28px; display: flex; flex-direction: column; }
.foot__top { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px var(--m); font-size: var(--step-small); line-height: 1.5; }
.foot__top p { grid-column: span 4; }
.foot__top a { grid-column: 12; justify-self: end; }
.foot__brand { margin-top: 36px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.foot__brand p { font-size: var(--step-small); max-width: 30ch; }
.foot__legal { margin-top: 28px; max-width: 58ch; font-size: var(--step-small); line-height: 1.5; opacity: 1; }
.foot__call { margin-top: auto; padding-top: 72px; display: block; font: 400 clamp(3.4rem, 17.2vw, 20rem)/0.9 var(--display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; color: var(--f2-ink); }
.foot__meta { margin-top: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--step-small); }
.foot__meta nav { display: flex; gap: 20px; }
@media (max-width: 899px) {
  .foot__top p, .foot__top a { grid-column: 1 / -1; justify-self: start; }
  .foot__call { font-size: 19vw; }
  .foot__meta { flex-direction: column; }
}

/* ---------- mobile dock ---------- */
.dock {
  position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
  padding: 8px var(--m) calc(8px + env(safe-area-inset-bottom)); background: var(--bg);
  transform: translateY(110%); visibility: hidden; transition: transform 180ms var(--ease), visibility 0s linear 180ms;
}
.dock.on:not(.hide) { transform: none; visibility: visible; transition: transform 280ms var(--ease), visibility 0s; }
.dock .btn { min-height: 48px; padding: 0 8px; }
@media (min-width: 900px) { .dock { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 0; } .foot { padding-bottom: 96px; } }

/* ---------- interaction states (hover only where a pointer can hover) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #d8ab4c; transform: translateY(-2px); }
  .btn--ghost:hover { background: #1b4d3f; }
  .link:hover, .nav a:hover, .foot__call:hover { color: var(--accent); }
  .card:hover { transform: translateY(-4px); }
  .chip:hover span { background: #1b4d3f; }
  .btn--paper:hover { background: #fff; }
}
.btn:active { transform: scale(0.97); }
.card:active { transform: scale(0.98); }
.link:active, .nav a:active, .foot__call:active, .faq summary:active { opacity: 0.7; }
.link, .nav a, .foot__call, .faq summary { transition: color 150ms ease, opacity 120ms ease; }
.field input, .field select { transition: border-color 150ms ease; }
.btn .lbl { display: inline-block; transition: opacity 160ms ease, filter 160ms ease; }
.btn.swap .lbl { opacity: 0.6; filter: blur(2px); }

/* day and time collapse when the visitor only wants a brochure or a call */
.collapse { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 220ms var(--ease), opacity 180ms ease; }
.collapse[data-closed] { grid-template-rows: 0fr; opacity: 0; }
.collapse__in { overflow: hidden; min-height: 0; }

/* FAQ answers ease open where the browser supports it; elsewhere they simply open */
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size 220ms var(--ease), opacity 180ms ease, content-visibility 220ms allow-discrete; }
.faq details[open]::details-content { block-size: auto; opacity: 1; }

/* no script, no form: it would fall back to a GET that puts the visitor's details in the address bar */
html:not(.js) #lead > :not(noscript) { display: none; }
.nojs { font-size: var(--step-lead); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
.js .hero__copy .rv { transition-duration: 700ms; }
.pic-in { overflow: hidden; }
.js .pic-in img { transform: scale(1.06); transition: transform 1600ms var(--ease); }
.js .pic-in.in img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js .pic-in img { opacity: 1; transform: none; transition: none; }
  .hero__pics img { transition: none; }
  .btn, .card, .chip span { transition-property: background-color, color, opacity; }
  .dock, .collapse { transition-duration: 0.01ms; }
  .faq details::details-content { transition-duration: 0.01ms; }
}

/* ---------- sub pages ---------- */
.doc { max-width: 720px; margin: 0 auto; padding: 120px var(--m) 96px; }
.doc h1 { font: 400 var(--step-head)/0.92 var(--display); text-transform: uppercase; margin-bottom: 32px; }
.doc h2 { font: 400 var(--step-lead)/1.2 var(--text); font-weight: 500; margin: 32px 0 8px; }
.doc p, .doc li { margin-bottom: 12px; }
.doc ul { padding-left: 20px; list-style: disc; }

/* ---------- thank-you page ---------- */
.ty { min-height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); }
.ty__pic { grid-column: 7 / -1; position: relative; }
.ty__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ty__text { grid-column: 1 / span 6; padding: 120px var(--m) 64px; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.ty h1 { font: 400 var(--step-display)/0.88 var(--display); text-transform: uppercase; }
.ty p { max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.ty__acts { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
@media (max-width: 899px) {
  .ty__text, .ty__pic { grid-column: 1 / -1; }
  .ty__pic { order: -1; height: 42svh; }
  .ty__text { padding-top: 40px; }
}