/* ============================================================================
   214 Proximity — homepage compositions (page-level, not reusable components)
   Everything references tokens from design-system/tokens.css. Reusable pieces
   that prove themselves here should graduate into system.css + the manifest.
   ============================================================================ */

/* ---- Hero readability: the text band is opaque enough that NO photo crop
   can defeat it — worst-case bright foliage behind the headline still yields
   ~7.5:1 for bone text. The fade happens above the content, not behind it. */
.hero__overlay {
  background: linear-gradient(0deg,
    rgba(17, 17, 15, 0.92) 0%,
    rgba(17, 17, 15, 0.86) 58%,
    rgba(17, 17, 15, 0.42) 82%,
    transparent 100%);
  padding-top: var(--space-128);
}
.hero__overlay .display-xl { text-shadow: 0 2px 28px rgba(17, 17, 15, 0.45); }
.hero__eyebrow { color: var(--214-bone); text-shadow: 0 1px 10px rgba(17, 17, 15, 0.6); }
@media (max-width: 700px) {
  .hero__media { min-height: 72vh; }
  .hero__overlay { padding-top: var(--space-32); }
}

/* ---- Acts / section rhythm ------------------------------------------------ */
.act { padding-block: var(--section-y); }
.act--tight { padding-block: var(--section-y-tight); }
.act--paper { background: var(--214-bone); }

/* ---- The turn ------------------------------------------------------------- */
.turn { border-top: 1px solid var(--color-line); }
.turn .display { max-width: 22ch; }

/* ---- Park chapters --------------------------------------------------------- */
.chapter { padding-block: var(--section-y-tight); }
.chapter__eyebrow { color: var(--color-accent); }

/* Park fact rail: one composed unit; 2x2 on mobile */
.park-facts {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24) var(--space-32);
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-24);
}
@media (max-width: 700px) {
  .park-facts { grid-template-columns: repeat(2, 1fr); }
}

/* Full-bleed image moments: gentle settle-in scale (reduced-motion safe) */
.bleed-image { overflow: hidden; }
html.js .bleed-image .img {
  transform: scale(var(--img-scale-max));
  transition: transform 1200ms var(--ease-out);
}
html.js .bleed-image.is-visible .img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .bleed-image .img { transform: none !important; }
}

/* ---- Lite video embed (poster + explicit play; iframe only on click) ------ */
.video-lite {
  position: relative; display: block; width: 100%; max-width: 56rem;
  aspect-ratio: 16 / 9; padding: 0; cursor: pointer;
  border: 1px solid var(--color-line); background: var(--214-ink);
}
.video-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
.video-lite:hover img, .video-lite:focus-visible img { opacity: 0.92; }
.video-lite__play {
  position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-12);
  color: var(--214-bone);
}
.video-lite__ring {
  width: 72px; height: 72px; border-radius: 999px; margin-inline: auto;
  border: 2px solid var(--214-bone); display: grid; place-content: center;
  background: rgba(17, 17, 15, 0.45);
  transition: transform var(--dur-micro) var(--ease-standard);
}
.video-lite:hover .video-lite__ring { transform: scale(1.06); }
.video-lite__ring::after {
  content: ""; display: block; margin-left: 4px;
  border-left: 18px solid var(--214-bone);
  border-block: 11px solid transparent;
}
.video-lite__label {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact);
}
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Location diagrams ------------------------------------------------------ */
.map-diagram { width: 100%; height: auto; display: block; }
.map-diagram text { font-family: var(--font-body); fill: var(--color-text); }
.map-diagram .lbl { font-size: 24px; font-weight: 600; }
.map-diagram .lbl-time { font-size: 21px; font-weight: 500; fill: var(--214-olive); }
.map-diagram .lbl-street { font-size: 19px; font-weight: 500; fill: var(--214-stone); letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 700px) {
  .map-diagram .lbl { font-size: 30px; }
  .map-diagram .lbl-time { font-size: 27px; }
  .map-diagram .lbl-street { font-size: 24px; }
}
.map-diagram .street { stroke: var(--214-concrete); stroke-width: 10; fill: none; stroke-linecap: round; }
.map-diagram .river { stroke: #9DB4A5; stroke-width: 26; fill: none; stroke-linecap: round; opacity: 0.55; }
.map-diagram .park-shape { fill: #8FA383; opacity: 0.9; }
.map-diagram .park-shape--future { fill: #8FA383; opacity: 0.55; stroke: #6B7D60; stroke-width: 2; stroke-dasharray: 8 6; }
.map-diagram .home-dot { fill: var(--color-accent); }
.map-diagram .poi-dot { fill: var(--214-ink); }
.map-diagram .route {
  fill: none; stroke: var(--214-ink); stroke-width: 3.5;
  stroke-dasharray: 10 8; stroke-linecap: round;
}
.map-diagram .route--drive { stroke: var(--color-accent); }
/* draw-on: total dash length animated via dashoffset over the pattern */
html.js .reveal.is-visible .route { animation: route-dash 1400ms var(--ease-out); }
@keyframes route-dash { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal.is-visible .route { animation: none; }
}
.on-dark .map-diagram text, .map-diagram--dark text { fill: var(--214-bone); }

/* ---- A day here ------------------------------------------------------------- */
.day-list { border-top: 1px solid var(--color-line); }
.day {
  display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: var(--space-16) var(--space-32);
  padding-block: var(--space-20);
  border-bottom: 1px solid var(--color-line);
}
.day__when {
  font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.1;
}
.day__what { color: var(--color-text-muted); max-width: var(--measure-lg); align-self: center; }
@media (max-width: 560px) {
  .day { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- Mid-page CTA ------------------------------------------------------------ */
.midcta {
  border-block: 1px solid var(--color-line);
  padding-block: var(--space-48);
}
.midcta .h1 { max-width: 16ch; }

/* ---- Downtown headline triplet ------------------------------------------------ */
.triplet { display: grid; gap: var(--space-4); }

/* ---- Small helpers ------------------------------------------------------------ */
.measure { max-width: var(--measure); }
.measure-lg { max-width: var(--measure-lg); }
.caption-rail { color: var(--214-stone); }

/* ---- Hero mosaic: door shot + two interior tiles (desktop) ----------------- */
.hero-mosaic { display: grid; gap: 2px; background: var(--color-bg); }
@media (min-width: 821px) {
  .hero-mosaic { grid-template-columns: 1.55fr 1fr; }
  .hero-mosaic__side { display: grid; grid-template-rows: 1fr 1fr; gap: 2px; }
  .hero-mosaic__side figure { margin: 0; position: relative; overflow: hidden; }
  .hero-mosaic__side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 820px) {
  .hero-mosaic__side { display: none; }
}

/* ---- Interactive home tiles ------------------------------------------------- */
.home-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
@media (max-width: 820px) { .home-tiles { grid-template-columns: repeat(2, 1fr); } }
.home-tile { display: block; text-decoration: none; color: inherit; }
.home-tile figure { margin: 0; overflow: hidden; }
.home-tile img { transition: transform var(--dur-ui) var(--ease-out); }
.home-tile:hover img, .home-tile:focus-visible img { transform: scale(var(--img-scale-max)); }
.home-tile__label {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-8);
  padding-block: var(--space-8); border-bottom: 1px solid var(--color-line);
}
.home-tile__name { font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.1; }
.home-tile__go {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--color-accent); white-space: nowrap;
}
.home-tile:hover .home-tile__go, .home-tile:focus-visible .home-tile__go { color: var(--color-accent-hover); }

/* ---- Wordmark: 214 leads, PROXIMITY supports ------------------------------------
   The serif numerals are the mark; the word becomes a tracked descriptor.
   Variant A (default): horizontal. Variant B: html.brand-stacked = stacked. */
.address-mark { gap: 10px; align-items: baseline; }
.address-mark__num { font-size: 1.65rem; letter-spacing: -0.01em; }
.address-mark__word {
  font-family: var(--font-body); font-weight: 400; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.85;
  transform: translateY(-1px);
}
.address-mark { flex-direction: column; align-items: flex-start; gap: 1px; }
.address-mark .address-mark__num { line-height: 0.9; }
.address-mark .address-mark__word { font-size: 0.56rem; letter-spacing: 0.3em; transform: none; }
/* revert switch: html.brand-horizontal restores the side-by-side lockup */
html.brand-horizontal .address-mark { flex-direction: row; align-items: baseline; gap: 10px; }
html.brand-horizontal .address-mark__word { font-size: 0.72rem; letter-spacing: 0.18em; transform: translateY(-1px); }

/* ---- Presented-by: brand stack + note-from-Mark section ------------------------ */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.brand-stack { display: grid; gap: 3px; }
.site-header .address-mark__num { font-size: 1.45rem; }
@media (min-width: 821px) { .site-header .nav { min-height: 84px; padding-block: 12px; align-items: center; } }
/* anchor targets land clear of the sticky header */
[id] { scroll-margin-top: 104px; }
a.presented { text-decoration: none; }
.presented {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em;
  color: var(--214-olive); white-space: nowrap;
}
.presented__name { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--dur-micro) linear; }
.presented__arrow { display: inline-block; transition: transform var(--dur-micro) var(--ease-standard); }
a.presented:hover .presented__name, a.presented:focus-visible .presented__name { text-decoration-color: currentColor; color: var(--color-accent); }
a.presented:hover .presented__arrow, a.presented:focus-visible .presented__arrow { transform: translate(2px, 2px); }
a.presented:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

.mark-note {
  display: grid; gap: var(--space-32); align-items: center;
  border-block: 1px solid var(--color-line); padding-block: var(--space-48);
}
@media (min-width: 700px) { .mark-note { grid-template-columns: minmax(200px, 280px) 1fr; gap: var(--space-64); } }
.mark-note__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--radius-sm); border: 1px solid var(--color-line);
}
@media (max-width: 699px) { .mark-note__photo { max-width: 240px; } }
.mark-note__sig { font-family: var(--font-display); font-size: var(--step-h3); margin-top: var(--space-24); }
.mark-note__cred { color: var(--214-olive); font-size: var(--step-caption); margin-top: var(--space-4); }
.mark-note__ext { align-self: center; color: var(--color-text-muted); font-size: var(--step-nav); }
.mark-note__ext:hover { color: var(--color-accent); }

/* ---- Typographic roles: serif owns titles; sans owns utility -------------------
   XL = hero only. L = .display (chapter openings). M = .h1 (section titles).
   .title-m = compact serif title beside imagery (replaces stray sans headings). */
.title-m {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---- Home gateway: one image, one menu, one action ----------------------------- */
.gateway { display: grid; gap: var(--space-32); align-items: center; }
@media (min-width: 821px) { .gateway { grid-template-columns: 1.6fr 1fr; gap: var(--space-48); } }
.gateway__menu { list-style: none; margin-top: var(--space-24); }
.gateway__menu a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: var(--space-12); text-decoration: none; color: inherit;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-display); font-size: var(--step-h3);
}
.gateway__menu li:last-child a { border-bottom: 1px solid var(--color-line); }
.gateway__menu .k {
  font: 600 var(--step-fact) / 1 var(--font-body); text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--214-olive);
}
.gateway__menu a:hover, .gateway__menu a:focus-visible { color: var(--color-accent); }

/* ---- Venue feature: photograph leads, rail supports ----------------------------- */
.feature { display: grid; gap: var(--space-32); }
@media (min-width: 821px) { .feature { grid-template-columns: 1.55fr 1fr; gap: var(--space-48); } }
.vrail { align-self: center; }
.vrow { display: grid; gap: 2px; padding-block: var(--space-12); border-top: 1px solid var(--color-line); }
.vrail .vrow:last-child { border-bottom: 1px solid var(--color-line); }
.vrow__name { font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.15; }
.vrow__why { color: var(--color-text-muted); font-size: var(--step-caption); max-width: 44ch; }

/* ---- Offset solo detail (breaks the grid on purpose) --------------------------- */
.solo-offset { max-width: 62%; margin-left: auto; }
@media (max-width: 820px) { .solo-offset { max-width: 88%; } }

/* ---- Walk-the-home: floating anchor + immersive walkthrough -------------------- */
.walk-fab {
  position: fixed; left: var(--space-16); bottom: var(--space-16); z-index: var(--z-sticky);
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-20); cursor: pointer;
  background: var(--214-ink); color: var(--214-bone);
  border: 1px solid rgba(243, 239, 232, 0.25); border-radius: var(--radius-pill);
  font: 600 var(--step-nav) / 1 var(--font-body); letter-spacing: var(--tracking-nav);
  box-shadow: var(--shadow-pop);
}
.walk-fab::before { content: "◉"; color: var(--color-accent-on-dark); }
.walk-fab:hover { background: var(--214-ink-2); }
@media (max-width: 820px) { .walk-fab { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

.walk {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--214-ink); color: var(--214-bone);
  display: grid; grid-template-rows: auto 1fr auto;
}
.walk__top { display: flex; justify-content: space-between; align-items: center; padding: var(--space-16) var(--gutter); }
.walk__brand { font-size: var(--step-fact); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-fact); color: var(--214-concrete); }
.walk__close { background: none; border: 1px solid rgba(243,239,232,0.4); color: var(--214-bone); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-16); cursor: pointer; font: inherit; }
.walk__close:hover { border-color: var(--214-bone); }
.walk__stage { position: relative; overflow: hidden; }
.walk__stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
html.js .walk__stage img.drift { animation: walk-drift 7s var(--ease-in-out) infinite alternate; }
@keyframes walk-drift { from { transform: scale(1); } to { transform: scale(1.055); } }
@media (prefers-reduced-motion: reduce) { html.js .walk__stage img.drift { animation: none; } }
.walk__bottom { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8) var(--space-24); align-items: end; padding: var(--space-16) var(--gutter) calc(var(--space-16) + env(safe-area-inset-bottom, 0px)); }
.walk__room { font-family: var(--font-display); font-size: var(--step-h2); line-height: 1.05; }
.walk__cap { color: var(--214-concrete); max-width: 60ch; margin-top: var(--space-4); }
.walk__count { font-size: var(--step-fact); font-weight: 600; letter-spacing: var(--tracking-fact); color: var(--214-stone); }
.walk__nav { display: flex; gap: var(--space-8); }
.walk__btn {
  width: 52px; height: 52px; display: grid; place-content: center; cursor: pointer;
  background: none; border: 1px solid rgba(243,239,232,0.4); color: var(--214-bone);
  border-radius: 999px; font-size: 1.25rem;
}
.walk__btn:hover { border-color: var(--214-bone); background: var(--214-ink-2); }
@media (max-width: 700px) { .walk__room { font-size: var(--step-h3); } }

/* ---- Cinema hero: wall-to-wall video ------------------------------------------- */
.hero__media--cinema { aspect-ratio: 16 / 9; max-height: 88vh; }

/* ---- Brand leads: header spans the full viewport at any width ------------------ */
.site-header .nav { max-width: none; }
.site-header .address-mark { font-size: 1.375rem; }
.site-header .address-mark .address-mark__num { font-size: 1.5em; }

/* Ultra-wide: let the content column breathe instead of floating in margin */
@media (min-width: 1800px) {
  .container-wide { max-width: var(--container-wide); }
}

/* ---- Photo viewer: every editorial photo loads big on click ------------------- */
.zoomable { cursor: zoom-in; }
.zoomable:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.lb {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(17, 17, 15, 0.95);
  display: grid; place-content: center; gap: var(--space-12);
  padding: var(--gutter);
}
.lb img {
  max-width: min(94vw, 1400px); max-height: 82vh;
  width: auto; height: auto; display: block;
  background: var(--214-ink-2);
}
.lb__cap { color: var(--214-concrete); font-size: var(--step-caption); max-width: min(94vw, 70ch); }
.lb__close {
  position: fixed; top: var(--space-16); right: var(--space-16);
  padding: var(--space-8) var(--space-16); cursor: pointer;
  background: none; border: 1px solid rgba(243, 239, 232, 0.5); color: var(--214-bone);
  border-radius: var(--radius-sm); font: inherit;
}
.lb__close:hover { border-color: var(--214-bone); }

/* ---- Address brand line ------------------------------------------------------- */
.brandline { border-block: 1px solid var(--color-line); padding-block: var(--space-64); }
.brandline .display-xl { max-width: 18ch; }
.brandline__kicker {
  margin-top: var(--space-24);
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--color-accent);
}

/* ---- Arrival location signals -------------------------------------------------- */
.signals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-24) var(--space-32);
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-24); margin-top: var(--space-24);
}
.signal__k {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--color-accent);
}
.signal__v { display: block; margin-top: var(--space-4); color: var(--color-text-muted); }
@media (max-width: 700px) { .signals { grid-template-columns: 1fr; gap: var(--space-12); } }

/* ---- Downtown photo essay ------------------------------------------------------ */
.venue-feature { display: grid; gap: var(--space-8); }
.venue-feature figcaption { display: grid; gap: 2px; padding-block: var(--space-8); border-bottom: 1px solid var(--color-line); }
.venue__name { font-family: var(--font-display); font-size: var(--step-h3); line-height: 1.15; }
.venue__time {
  font-size: var(--step-fact); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-fact); color: var(--color-accent);
}
.venue__why { color: var(--color-text-muted); font-size: var(--step-body); max-width: 46ch; }

.venue-row { display: grid; gap: var(--space-32) var(--grid-gap); }
@media (min-width: 821px) { .venue-row--3 { grid-template-columns: repeat(3, 1fr); } .venue-row--2 { grid-template-columns: repeat(2, 1fr); } }

/* text-only venue entry (no licensed photo yet) — deliberate, not a card */
.venue-line { padding-block: var(--space-16); border-bottom: 1px solid var(--color-line); }
.venue-line .venue__why { max-width: var(--measure-lg); }

/* photo attribution: quiet, present */
.attr { font-size: 0.6875rem; color: var(--214-stone); letter-spacing: 0.02em; }
.attr a { color: inherit; }

/* ---- Travel rail ---------------------------------------------------------------- */
.travel-rail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24) var(--space-32);
  border-block: 1px solid var(--color-line); padding-block: var(--space-24);
}
@media (max-width: 900px) { .travel-rail { grid-template-columns: repeat(2, 1fr); } }

/* ---- Fast showing form ----------------------------------------------------------- */
.form--fast { max-width: 760px; }
.form--fast input[type="text"], .form--fast input[type="email"], .form--fast input[type="tel"] {
  padding: 10px 12px; min-height: 44px;
}
.seg-field { border: 0; padding: 0; margin: 0; }
.seg-field legend { font-weight: 600; font-size: var(--step-caption); margin-bottom: var(--space-8); }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.seg__opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 18px; cursor: pointer;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm);
  font-size: var(--step-nav); background: var(--color-bg);
  transition: border-color var(--dur-micro) linear, background var(--dur-micro) linear;
}
.seg__opt:hover span { border-color: var(--color-accent); }
.seg__opt input:checked + span {
  border-color: var(--color-accent); background: color-mix(in srgb, var(--214-gold) 12%, var(--color-bg));
  box-shadow: inset 0 0 0 1px var(--color-accent); font-weight: 600;
}
.seg__opt input:focus-visible + span { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.field__err { color: #8C3B2E; font-size: var(--step-caption); margin-top: var(--space-4); }
.form--fast .field { margin-bottom: var(--space-16); }
.form-success { border-top: 1px solid var(--color-line); padding-top: var(--space-24); }
@media (max-width: 700px) {
  .seg { width: 100%; }
  .seg__opt { flex: 1 1 auto; }
  .seg__opt span { width: 100%; }
  .form--fast .btn[data-submit] { width: 100%; }
}

.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Gallery ------------------------------------------------------------------- */
.gal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-24);
}
.gal__item { margin: 0; position: relative; }
.gal__item .img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.gal__item .caption { margin-top: var(--space-4); }
.gal__item--ai::before {
  content: "AI visualization";
  position: absolute; top: var(--space-8); left: var(--space-8);
  background: color-mix(in srgb, var(--214-ink) 78%, transparent);
  color: var(--color-paper, #FAF8F4);
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; pointer-events: none;
}
@media (max-width: 820px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Mobile chrome: compact header, integrated conversion bar ------------------
   Root causes fixed here: 91px mobile header (desktop paddings applied), nav panel
   hardcoded to top:64px, fab/bar 2px collision, 74px desktop-flex bottom bar. */
.mobile-only { display: none; }
@media (max-width: 820px) {
  .mobile-only { display: inline; }
  /* header: ~64px, safe-area aware, lockup + attribution intact */
  .site-header .nav {
    min-height: 0;
    padding-block: 7px;
    padding-top: calc(7px + env(safe-area-inset-top, 0px));
  }
  .site-header .address-mark__num { font-size: 1.2rem; }
  .site-header .address-mark__word { font-size: 0.5rem; letter-spacing: 0.26em; }
  .site-header .presented { font-size: 0.625rem; }
  .brand-stack { gap: 2px; }
  /* menu panel opens flush under the real header height */
  .nav__panel { inset: calc(76px + env(safe-area-inset-top, 0px)) 0 auto 0; }
  /* tour control lives in the conversion bar; the floating pill retires */
  .walk-fab { display: none; }
  /* conversion bar: one compact grid row */
  .sticky-cta {
    display: grid !important;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta__price { font-size: 1.05rem; line-height: 1.1; }
  .sticky-cta__price small { display: block; font-size: 0.6875rem; }
  .sticky-cta .btn { padding: 11px 14px; font-size: 0.8125rem; min-height: 44px; }
  /* content stays reachable above the fixed bar */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  /* anchor arrivals clear the shorter header */
  [id] { scroll-margin-top: 80px; }
}