/* ============================================================
   Concept C v2 — Light Editorial
   -------------------------------------------------------------
   Leading idea: a 1930 building modernized for light-led boutique
   tenants — and the site is paced like an editorial spread that
   shows the building's transition from "old-world exterior" to
   "modern interior" (brief §3) one image at a time.

   Asset budget (per asset-inventory.md): 5 unique images, used
   ONCE each. Five slots, five images. No exposure invention.

   Layout discipline: each section uses a DIFFERENT composition
   so the page reads as varied editorial, not a templated grid.
     - Hero:    asymmetric 2-column (text left / image right)
     - Building: editorial 3-act (centered intro → asymmetric
                 image-text pair → asymmetric text-image pair)
     - Suites:  horizontal split (title block left half-page,
                 two stacked image cards right half-page)

   Accent: ONE color (--accent #c79962) fixed across sections.
   No scroll drift.
   ============================================================ */

:root {
  /* Paper system — single warm-paper ground, no dark section. */
  --paper:        #f5f1e8;
  --paper-shade:  #ecdfca;
  --paper-edge:   rgba(120, 96, 60, 0.16);
  --paper-edge-soft: rgba(120, 96, 60, 0.08);
  --ink:          #1a1814;
  --ink-soft:     #524a3c;
  --ink-faint:    #8a8170;

  /* ONE accent color, fixed across the page. */
  --accent:       #c79962;
  --accent-deep:  #a07736;

  /* Type */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  /* "--font-mono" is the token every eyebrow / section index / tag
     on the site reads from. Pointed at the sans family (with
     tabular-nums) per the Aman direction — uppercase Inter reads
     less technical than JetBrains Mono and gives the site one
     unified tag voice. */
  --font-mono:    'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --type-hero:    clamp(6.4rem, 7.6vw, 11.2rem);
  --type-h2:      clamp(4.4rem, 5.2vw, 7.2rem);
  --type-h3:      clamp(2.4rem, 2.2vw, 3rem);
  --type-quote:   clamp(3.2rem, 3.6vw, 5rem);

  /* Body text scales with its section's heading level (global rule):
     an h1/hero section carries the largest body text, an h2 section
     smaller, an h3-level block (slider cards) smaller still. */
  --type-body-h1: 1.9rem;
  --type-body-h2: 1.6rem;
  --type-body-h3: 1.5rem;
  --type-body:    var(--type-body-h2);  /* default = h2 level */
  --type-small:   1.25rem;
  --type-mono:    1.1rem;

  /* Layout */
  --container-pad: 6rem;
  --container-max: 156rem;
  --gutter:        3.2rem;
}

@media (max-width: 1023px) {
  :root { --container-pad: 3rem; --gutter: 1.8rem; }
}

html { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.5;
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 1.1s cubic-bezier(.2,.65,.2,1), transform 1.1s cubic-bezier(.2,.65,.2,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }
.reveal.delay-4 { transition-delay: 320ms; }
.reveal.delay-5 { transition-delay: 400ms; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---------- Nav ----------
   Floating card. The outer .nav fixes to the top and supplies the space
   above the card (top padding); .nav__card is the visible card itself.
   Pointer-events trick lets clicks pass through the empty outer band so
   anchors below the card on a tall viewport remain clickable. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 0.8rem 0 0;
  background: transparent;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(.2,.65,.2,1);
}
.nav.nav--hidden { transform: translate3d(0, -140%, 0); }
.nav__card {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4rem;
  padding: 1rem 2.4rem;
  /* Solid surface a notch lighter than --paper, using the same color-mix
     language the map embed uses (mirrored "lighter" instead of "cooler").
     Opaque on purpose — no backdrop-filter, no translucency. Card differs
     from paper sections via the lift in tone + the hairline border. */
  background: color-mix(in srgb, var(--paper) 84%, white 16%);
  border: 1px solid var(--paper-edge);
  /* Sharp corners — site shape register is hairline-rectangle (design-system.md
     § Shape register). No border-radius, no box-shadow anywhere. */
  transition: border-color .4s ease;
}
.nav__mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'opsz' 36;
  font-size: 2.6rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
  justify-self: center;
}
.nav__mark-sep {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0;
  transform: translateY(-0.3rem);
}
.nav__links {
  display: flex;
  gap: 3.2rem;
  list-style: none;
  justify-self: start;
  align-items: center;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  transition: color .25s ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

/* Contact CTA: variant of the secondary CTA Aman text-link pattern
   (design-system.md § Buttons > Secondary CTA + § Links > In-nav CTA).
   Inherits color/stroke/hover from .cta--secondary verbatim — only the
   size narrows to mono 1.1rem with no padding-x. Always-visible ink
   underline at rest; hover shifts to accent-deep + accent border. */
.nav__cta {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0;
  transition: color .25s ease;
}
.nav__cta::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transition: background .25s ease;
}
.nav__cta:hover { color: var(--accent-deep); }
.nav__cta:hover::after { background: var(--accent); }

/* Nav responsive: shrink gap at tablet, hide link cluster on mobile.
   With links hidden the 1fr|auto|1fr grid still centers the wordmark and
   keeps the CTA at the right edge — no extra rules needed for the layout. */
@media (max-width: 1023px) {
  .nav__card { gap: 2.4rem; padding: 0.9rem 2rem; }
  .nav__links { gap: 2.4rem; }
  .nav__mark { font-size: 2.2rem; }
}
@media (max-width: 767px) {
  .nav__links { display: none; }
  .nav__mark { font-size: 2rem; }
  .nav__card { padding: 0.8rem 1.6rem; }
}

/* ============================================================
   SECTION 1 · HERO
   Layout: asymmetric 2-column.
   Left column: eyebrow + headline + sub + CTAs (ALL above fold)
   Right column: full-height facade image (cuts the page)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 64rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding-top: 0;
  overflow: hidden;
}
.hero__lead {
  padding: 12rem 2rem 6rem var(--container-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
  max-width: 96rem;
  align-self: stretch;
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.hero__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(4.2rem, 7vw, 7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: none;
  white-space: nowrap;
}
/* The full stop after "Boutique Floors." is the page's light
   source — starts ink-colored like the other stops, then lights
   up to accent over 1s after the page loads (the sun rises). */
.hero__title em {
  font-style: normal;
  color: var(--ink);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  transition: color 1s ease;
}
.hero__title.is-lit em { color: var(--accent); }
.hero__sub {
  font-family: var(--font-sans);
  font-size: var(--type-body-h1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  font-weight: 400;
}
.hero__ctas {
  display: flex;
  gap: 4rem;
  flex-wrap: wrap;
  align-items: baseline;
}
/* Aman-vocabulary CTAs — one button system used site-wide.
   Primary: ink stroke outlined button, WHITE fill on hover
   (ink text stays ink — the surface brightens, button doesn't flip).
   Secondary: bare text with an always-visible 1px ink bottom
   border (Aman's text-link CTA style); hover lifts to accent. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 1.2rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.cta--primary {
  padding: 1.4rem 3.6rem;
  min-height: 4.8rem;
  border: 1px solid var(--ink);
}
.cta--primary:hover {
  background: #ffffff;
}
.cta--secondary {
  padding: 1.4rem 0.2rem;
  border: 0;
  border-bottom: 1px solid var(--ink);
}
.cta--secondary:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.hero__image-wrap {
  position: relative;
  overflow: hidden;
  background: var(--paper-shade);
  align-self: stretch;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(1.04);
}
/* ============================================================
   SECTION 2 · BUILDING
   Layout: editorial 3-act, centered intro + asymmetric pairs.
   - Act I:  centered eyebrow + centered headline (no left-tag)
   - Act II: image LEFT (lobby) / text RIGHT, baseline-aligned
   - Act III: text LEFT / image RIGHT (open-floor), offset down
   Reads like a magazine spread, not a tag/title/body row.
   ============================================================ */
/* Anchor-jump clearance — every section with an in-page link target
   needs to land below the opaque nav band, not under it. */
.broker-resources,
.building,
.stacking,
.suites,
.map-embed,
.gallery,
.site-footer { scroll-margin-top: 8rem; }

.building {
  padding: 22rem 0 14rem;
  position: relative;
  /* Very subtle warm hairline where the sun rays get cropped — gives
     the eye a clean edge without competing with the bloom. */
  border-top: 1px solid var(--paper-edge-soft);
}

/* Sun — a soft white-light gradient bloom + faint conic rays, both with
   their focal point at the section's top edge so the light is cut
   off there and streams straight DOWN onto The Building intro.
   Opacity is bound to scroll progress (--sun-progress, set in JS):
   at rest = 0, fully revealed when the section's top crosses ~30%
   of the viewport. */
.building__sun {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 57rem;
  z-index: 0;
  pointer-events: none;
  opacity: var(--sun-progress, 0);
  /* gradient bg — white-light bloom (lighter than the paper), focal
     at the top edge (cut off there) */
  background: radial-gradient(ellipse 75% 82% at 50% 0%,
              rgba(255, 251, 242, 0.95), transparent 72%);
}
/* conic rays layer, masked so the burst is cut off at the top edge */
.building__sun::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(
    from 90deg at 50% 0%,
    rgba(255, 251, 242, 0.82) 0deg 4.5deg,
    transparent 4.5deg 13deg
  );
  -webkit-mask-image: radial-gradient(ellipse 75% 96% at 50% 0%, #000 0%, #000 14%, transparent 76%);
  mask-image: radial-gradient(ellipse 75% 96% at 50% 0%, #000 0%, #000 14%, transparent 76%);
}

/* Act I — centered statement */
.building__intro {
  position: relative;
  z-index: 1;
  max-width: 88rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  padding-bottom: 4rem;
}
.building__index {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.building__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.building__title em {
  font-style: normal;
  color: var(--accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.building__lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h2);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- Building slider (replaces Acts II/III) ----------
   Centered, full-width slider with inactive slides scaled down
   and faded so the active slide reads as nearest to the viewer.
   Texts live INSIDE each slide so they travel + transition
   elegantly with the image change (Or 2026-05-19). */
.building__slider {
  position: relative;
  width: 100%;
  padding: 2rem 0 6rem;
}
.building__controls,
.building__swiper {
  position: relative;
  z-index: 1;
}
.building__swiper {
  width: 100%;
  padding: 3rem 0 4rem;
  overflow: visible;
  perspective: 1600px;
}
.building__swiper .swiper-wrapper {
  align-items: stretch;
}
/* No manual scale here — Swiper coverflowEffect drives the 3D
   transform (translateZ + scale). transform transitions on the
   slide so the per-slide 3D change animates smoothly.
   Opacity is NOT here: Swiper sets transition-duration inline on
   the slide (and 0ms at snap moments), which would couple opacity
   to Swiper's timing and snap it. Opacity lives on the inner
   .building-slide instead — see below. */
.building__swiper .swiper-slide {
  width: 62%;
  max-width: 96rem;
  height: auto;
  z-index: 1;
  transition: transform 1.4s cubic-bezier(.2,.65,.2,1);
  will-change: transform;
}
.building__swiper .swiper-slide-prev,
.building__swiper .swiper-slide-next { z-index: 2; }
.building__swiper .swiper-slide-active { z-index: 5; }

/* Opacity transition lives here — Swiper never touches this inner
   element, so the fade is fully governed by this CSS transition. */
.building-slide {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin: 0;
  opacity: 0.18;
  transition: opacity 1.4s cubic-bezier(.2,.65,.2,1);
  will-change: opacity;
}
.swiper-slide-prev .building-slide,
.swiper-slide-next .building-slide { opacity: 0.45; }
.swiper-slide-active .building-slide { opacity: 1; }
.building-slide__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-shade);
}
.building-slide__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.building-slide__caption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3.2rem 5rem;
  align-items: baseline;
  padding: 0 0.6rem;
}
.building-slide__lead {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Staggered text in — tight delays that finish within the slide
   transition (1s) so the text doesn't keep animating after the
   slide has settled (which read as a "jump"). */
.building-slide__mark,
.building-slide__head,
.building-slide__body {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.2,.65,.2,1),
    transform .55s cubic-bezier(.2,.65,.2,1);
}
.swiper-slide-active .building-slide__mark {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.10s;
}
.swiper-slide-active .building-slide__head {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}
.swiper-slide-active .building-slide__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.34s;
}

.building-slide__mark {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.building-slide__head {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.8rem, 2.6vw, 3.6rem);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.014em;
  color: var(--ink);
  max-width: 18ch;
}
.building-slide__body {
  font-family: var(--font-sans);
  font-size: var(--type-body-h3);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* Slider controls — Aman-minimal: bare chevrons, no chrome, no dots,
   no autoplay progress bar. Just the arrow glyph in ink. */
.building__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5.2rem;
}
.building__nav-btn {
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .35s ease, transform .35s cubic-bezier(.2,.65,.2,1);
}
.building__nav-btn svg {
  width: 2rem;
  height: 2rem;
  display: block;
}
.building__nav-btn:hover {
  color: var(--accent);
}
.building__nav-btn--prev:hover { transform: translateX(-3px); }
.building__nav-btn--next:hover { transform: translateX(3px); }
.building__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
@media (max-width: 1023px) {
  .building__swiper .swiper-slide { width: 86%; }
  .building-slide__caption { grid-template-columns: 1fr; gap: 1.6rem; }
  .building__controls { gap: 3.6rem; }
}

/* ============================================================
   SECTION 3 · PRE-BUILT SUITES
   Layout: horizontal half-page split.
   Left half: title block + lede + section meta (sticky-feel,
              but anchored to top, not sticky to avoid overshoot)
   Right half: two image cards stacked vertically with their
               one-line caption strips. We have ONE staged
               finished suite + ONE raw floor — both honest.
   ============================================================ */
.suites {
  position: relative;
  border-top: 1px solid var(--paper-edge);
}

/* Full-bleed image section. ALL text sits ON the image over a
   scrim — no floating text band above the photo. */
.suites__hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 72rem;
  margin: 0;
  overflow: hidden;
  background: var(--paper-shade);
  isolation: isolate;
}
/* Sunbeam — additive scroll-driven highlight that sweeps an angled
   soft-white band from top-right toward bottom-left. Sits between
   the image and the scrim, so the scrim's heavy bottom-left fade
   naturally masks the beam over the text column (legibility wins).
   Driven by --beam-pos written by mountLightBeam in main.js. */
.suites__sunbeam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    38deg,
    transparent 36%,
    rgba(255, 250, 240, 0.18) 44%,
    rgba(255, 250, 240, 0.42) 50%,
    rgba(255, 250, 240, 0.18) 56%,
    transparent 64%
  );
  background-repeat: no-repeat;
  background-size: 220% 100%;
  background-position-x: var(--beam-pos, 110%);
  mix-blend-mode: screen;
  will-change: background-position;
}
.suites__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 50%;
  transform: translate3d(0, var(--img-y, 0px), 0) scale(1.04);
  transition: transform 0.5s linear;
}
/* Diagonal scrim — weight concentrated in the bottom-left corner
   where the text sits, fading clear toward the top-right so the
   photo still reads. */
.suites__scrim {
  position: absolute;
  inset: 0;
  /* Tighter — heavy weight only sits behind the text column in the
     bottom-left, then clears fast so most of the image reads clean. */
  background: linear-gradient(
    to top right,
    rgba(34, 21, 9, 0.92) 0%,
    rgba(34, 21, 9, 0.74) 12%,
    rgba(34, 21, 9, 0.40) 28%,
    rgba(34, 21, 9, 0.12) 46%,
    transparent 62%
  );
  pointer-events: none;
}
.suites__overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 3rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad) 7rem;
}
.suites__title,
.suites__lede {
  max-width: 48ch;
}
.suites__index {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.suites__title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--paper);
}
.suites__lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h2);
  line-height: 1.58;
  color: rgba(245, 241, 232, 0.82);
  max-width: 48ch;
}
.suites__caption {
  position: absolute;
  bottom: 3rem;
  right: 3rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.6);
}
@media (max-width: 1023px) {
  .suites__hero { height: auto; min-height: 100vh; }
  .suites__overlay { padding: 0 var(--container-pad) 4rem; max-width: 100%; gap: 2.4rem; }
  .suites__scrim {
    background: linear-gradient(
      15deg,
      rgba(34, 21, 9, 0.88) 0%,
      rgba(34, 21, 9, 0.58) 42%,
      rgba(34, 21, 9, 0.26) 100%
    );
  }
  .suites__caption { bottom: 1.6rem; right: 1.6rem; }
}

/* ============================================================
   SECTION · BROKER RESOURCES (§2)
   Layout: asymmetric 2-column, ~50/50 on desktop.
   Left: eyebrow + headline + lede.
   Right: four-line mono manifest (literal folder index) + CTA.
   Background: paper-shade — one notch deeper than body paper,
   reads as a "tucked drawer" between Hero and Building.
   Vertical rhythm: a TIGHT band (~13rem padding) between two
   BIG sections (Hero 100vh, Building 18rem top + sun). The
   variation IS the design — quiet, asymmetric, paper-shade.
   Top + bottom hairlines so it reads as a chapter.
   ============================================================ */
.broker-resources {
  position: relative;
  background: var(--paper-shade);
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  padding: 13rem 0;
}
.broker-resources__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}
.broker-resources__lead {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  max-width: 56rem;
}
.broker-resources__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.broker-resources__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.broker-resources__lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h2);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
}
/* Right column — manifest stacked above CTA, baselined toward
   the headline on desktop. */
.broker-resources__index {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  align-items: flex-start;
  padding-top: 0.6rem;
}
/* Manifest — literal index of folder contents. Mono font for
   tabular/index register, but SENTENCE case (not uppercase)
   because these read as filenames, not section meta. Each line
   prefixed by a 1.4rem accent rule (echoes .suites__list li). */
.broker-resources__manifest {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 0;
  margin: 0;
}
.broker-resources__manifest li {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  font-weight: 400;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
}
.broker-resources__manifest li::before {
  content: '';
  width: 1.4rem;
  height: 1px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-0.4rem);
}
.broker-resources__cta-wrap {
  display: flex;
}

/* ============================================================
   SECTION 4 · STACKING PLAN / AVAILABILITIES
   Layout: asymmetric split — left 42% rect-based 17-floor SVG
   elevation placeholder / right 58% floor-by-floor table.
   Heading: left-aligned (eyebrow + headline stacked left in a
   narrow column; mono "04" section index sits at the right of
   the heading row — no body copy under the headline).
   Background: paper (same as body). Top + bottom hairlines act
   as chapter strokes — sits between centered Building (sun /
   paper) above and full-bleed Suites (dark scrim) below.
   Color register: accent-heavy (status pills, active-row tint,
   SVG slice fills, hover sync) — this is the page's most data-
   dense surface and accent here earns its keep.
   Motif: numbered floor index. Mono floor labels echo the
   Building slider's "I — Modernization underway" Roman-numeral
   cousin — same editorial-marker thread, Arabic this time.

   The .stacking selector also REMAPS the shared component's
   expected token names onto the carried concept's token names
   (--bg-base ← --paper, --accent-bright ← --accent, etc.) so
   the shared CSS reads correctly without changing the site's
   token system.
   ============================================================ */
.stacking {
  /* Token remapping — shared component → site palette */
  --bg-base:        var(--paper);
  --bg-2:           var(--paper-shade);
  --ink:            var(--ink);
  --ink-soft:       var(--ink-soft);
  --accent-bright:  var(--accent);           /* hover / brighter accent */
  --accent-muted:   color-mix(in srgb, var(--accent) 35%, transparent);

  /* Shared component reads these too */
  --type-eyebrow: var(--type-mono);
  --type-h1:      var(--type-h2);            /* shared expects h1; site uses h2 */
  --type-meta:    1.1rem;
  --type-body:    var(--type-body-h2);
  --ls-caps:      0.24em;
  --ls-display:   -0.022em;
  --lh-snug:      1.04;
  --lh-body:      1.55;
  --container-pad: 6rem;
  --container-max: 156rem;
  --space-section: 14rem;
  --space-section-mobile: 8rem;
  --duration-fast: 0.3s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-overlay: 10;

  /* Local knobs — quieter slice fill at rest than the 0.45
     default, so the paper still reads cleanly. */
  --slice-idle: 0.32;
  --slice-hover: 0.72;
  --slice-stroke-hover: 0.95;
  --row-hot-bg: color-mix(in srgb, var(--accent) 8%, transparent);

  /* Section paper + chapter strokes. Override shared padding. */
  background: var(--paper);
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  padding: 14rem 0;
}

.stacking .stacking-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: 8rem;
  align-items: start;
}

/* ---------- Section header: left-aligned, mono "04" on the right ---------- */
.stacking .stacking-header {
  grid-column: 1 / -1;
  margin-bottom: 6.4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4rem;
  align-items: end;
}
/* Heading composition variety vs §6 Map + §7 Gallery (which use
   eyebrow-above-title). Stacking puts the eyebrow inline AFTER
   the title at the title's baseline — a small tag riding the
   right edge of the headline. Mobile collapses back to column. */
.stacking-header__lead {
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3.6rem;
  flex-wrap: wrap;
  max-width: 80rem;
}
.stacking .stacking-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0;
}
.stacking .stacking-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
/* ---------- SVG column ---------- */
.stacking .stacking-wrap {
  width: 100%;
  max-width: 32rem;
  margin: 0 auto;
  position: relative;
}
.stacking-outline {
  stroke: var(--accent);
  stroke-opacity: 0.35;
  stroke-width: 1;
}
.stacking .stacking-svg .slice {
  stroke-width: 1;
}
/* Leased slices: shared default is fill-opacity 0 (invisible), which
   leaves the elevation looking empty. Show them as a faint ink ghost
   so the building reads as a full stack with the available floors
   glowing against the leased mass. */
.stacking .stacking-svg .slice[data-status="leased"] {
  fill: var(--ink);
  fill-opacity: 0.08;
}

/* ---------- Tooltip — paper, accent border, mono register ---------- */
.stacking .stack-tooltip {
  background: var(--paper);
  border: 1px solid var(--accent);
  padding: 1.2rem 1.6rem 1.4rem;
}
.stacking .stack-tooltip-floor {
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1.1;
}
.stacking .stack-tooltip-line {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  text-transform: none;
}
.stacking .stack-tooltip-line.is-prebuilt {
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Table ----------
 * Redesigned 2026-05-31: status pill killed (every visible row is by
 * definition available), per-row toggle + details panel killed (notes
 * render inline; resolves both the "hover only on clickable" canon and
 * the prior open-state hover-disconnect bug), accent-promotion split on
 * the condition column killed (Pre-built / White box / Built-to-suit
 * read as siblings), floor cell elevated to Fraunces editorial anchor
 * with the suite identifier rendered beneath as a mono caption.
 */
.stacking .stacking-table {
  border-top: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
}

/* Column header row — rendered once at the top of the table region by the
 * CMS renderer. Mono caps in --ink-faint (Tier-1 eyebrow register at a
 * quieter color so it reads as a column label, not a banner). aria-hidden
 * in the markup; row cell content is read by AT in document order anyway. */
.stacking .stacking-row-header {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  column-gap: 3.2rem;
  padding: 1.6rem 0.4rem;
  border-bottom: 1px solid var(--paper-edge);
}
.stacking .stacking-row-header > span {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
}
.stacking .stacking-row-header > span:last-child {
  text-align: right;
}

/* Data row — 2-row CSS grid.
 *   Top row:    floor cell | condition | RSF
 *   Bottom row: suite cap  | notes     | (empty)
 *   Bottom+1:   (empty)    | links     | (empty)
 * Cells emit only when their data exists; auto-row sizing collapses the
 * missing ones. Hover covers the entire row (notes + links included)
 * because everything lives in one grid container. */
.stacking .stacking-row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  column-gap: 3.2rem;
  row-gap: 0.8rem;
  padding: 2.8rem 0.4rem;
  border-bottom: 1px solid var(--paper-edge);
  transition: background 0.35s cubic-bezier(.2,.65,.2,1);
}
.stacking .stacking-row:hover,
.stacking .stacking-row.is-hover {
  background: var(--row-hot-bg);
}
.stacking .stacking-row[data-status="leased"] {
  opacity: 0.45;
  cursor: default;
}

.stacking .stacking-row-floor {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(2.6rem, 2.4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.014em;
  line-height: 1;
  color: var(--ink);
}

.stacking .stacking-row-suite-cap {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-faint);
}

.stacking .stacking-row-condition {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.stacking .stacking-row-rsf {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

.stacking .stacking-row-notes {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0;
}

.stacking .stacking-row-links {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: 0.4rem;
}
.stacking .stacking-row-link {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-deep);
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.stacking .stacking-row-link:hover,
.stacking .stacking-row-link:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* ============================================================
   SECTION 6 · LOCATION / MAP
   Layout: stacked composition — heading band on top, full-width
   Trophy Maps iframe below. The iframe internally handles the
   list-left / map-right split + filter buttons (per the map SOP);
   this section ONLY provides the heading band + iframe wrapper.

   Heading: LEFT-aligned in a narrow column (eyebrow + h2 + lede
   stacked). No static callouts, no walk-time strips, no transit
   glyphs, no POI list — the embed carries every bit of that
   interactively (map SOP § "Default layout and section copy").

   Background: COOLER PAPER — one notch toward neutral from
   --paper. The embed itself reads cooler (pin + transit-line
   tints), so the section ground pulls a step that way so the
   embed reads as belonging, not pasted on.

   Top + bottom hairlines act as chapter strokes, mirroring §4
   Stacking Plan. Sits between full-bleed Suites above and the
   upcoming paper-led Gallery below — variety in the scroll.

   The .map-embed selector REMAPS the shared component's expected
   token names onto the carried concept's tokens, and overrides
   the shared CSS where it would clash with the Light Editorial
   register (loud accent border, accent-colored eyebrow, default
   header gap). All other defaults inherit.
   ============================================================ */
.map-embed {
  /* Token remapping — shared component → site palette.
     --bg-base is the cooler-paper wash. The body paper is
     #f5f1e8 (warm); mixing 88% paper + 12% white lifts it
     toward a quieter, cleaner cream so the embed (with cooler
     pin + transit-line tints) doesn't clash with a too-warm
     ground. The shared CSS reads this var for the section bg
     AND the loading-state bg, keeping both consistent. */
  --bg-base:        color-mix(in srgb, var(--paper) 88%, white 12%);
  --bg-2:           var(--paper-shade);
  --accent-bright:  var(--accent);
  --accent-muted:   color-mix(in srgb, var(--accent) 35%, transparent);

  /* Shared component reads these too — mirror the §4 mapping */
  --type-eyebrow:   var(--type-mono);
  --type-h1:        var(--type-h2);          /* shared expects h1; site uses h2 */
  --type-meta:      1.1rem;
  --ls-caps:        0.24em;
  --ls-display:     -0.022em;
  --lh-snug:        0.98;
  --lh-body:        1.55;
  --container-pad:  6rem;
  --container-max:  156rem;
  --space-section:  14rem;
  --space-section-mobile: 8rem;
  --duration-fast:  0.3s;
  --ease:           cubic-bezier(0.22, 1, 0.36, 1);

  /* Section bg comes from --bg-base (set above to cooler-paper).
     Add the chapter-stroke hairlines + the section padding
     override — the shared CSS sets padding from these tokens,
     but explicit padding here keeps the rhythm tied to §4. */
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  padding: 14rem 0;
}

.map-embed .map-embed-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

/* ---------- Heading band: narrow left-aligned column ---------- */
.map-embed .map-embed-header {
  max-width: 64rem;
  margin-bottom: 6rem;          /* ~6rem gap to the iframe top edge */
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.map-embed .map-embed-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0;
}

/* Headline — Fraunces medium at --type-h2 (matches §4 Stacking
   header + §2 Building intro). Override the shared margin reset
   inside our gap-based flow. */
.map-embed .map-embed-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}

/* Lede — Inter body-h2, ink-soft. Override shared 1.6rem top
   margin since the flex gap already supplies spacing. */
.map-embed .map-embed-lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h2);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0;
}

/* ---------- Iframe frame ---------- */
/* Override the shared component's hard 1px solid var(--accent)
   border — too loud for the Light Editorial register. A quiet
   paper-edge hairline reads as "framed map" without competing
   with the embed's own pin + filter accents. */
.map-embed .map-embed-frame {
  position: relative;
  width: 100%;
  background: var(--paper-shade);
  border: 1px solid var(--paper-edge);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.map-embed .map-embed-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Loading state — quiet mono register, ink-faint not accent-muted
   (accent-muted reads too colored against the cooler paper). */
.map-embed .map-embed-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-shade);
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  z-index: 1;
  transition: opacity var(--duration-fast) var(--ease);
}
.map-embed .map-embed-frame.is-loaded .map-embed-loading {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Neighborhood sub-story (h3 inside §6 Location) ----------
   Sits below the map iframe in the same .map-embed-inner column,
   carrying the narrative side of the location story. Echoes the
   gallery's sub-story divider treatment (mono caps label with a
   leading accent rule) so the two sub-section markers read as one
   site-wide vocabulary. Three-up grid: a 2-up row of commuter
   nodes on top, then a full-width park frame below.
   Image edge: same hairline paper-edge as .map-embed-frame and
   .gallery__frame — one site-wide image edge per the global
   vocabulary rule. */
.map-embed .neighborhood {
  margin-top: 10rem;
}
.map-embed .neighborhood__header {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 5rem;
  max-width: 60rem;
}
.map-embed .neighborhood__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
}
.map-embed .neighborhood__divider {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 2.2rem;
}
.map-embed .neighborhood__divider::before {
  content: '';
  width: 6rem;
  height: 2px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
  transform: translateY(-0.4rem);
}
.map-embed .neighborhood__lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h3, 1.7rem);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

.map-embed .neighborhood__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.6rem;
}
.map-embed .neighborhood__frame {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
/* Frame holding the image — hairline paper-edge, paper-shade
   placeholder while loading, fixed aspect. */
.map-embed .neighborhood__frame > .neighborhood__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--paper-shade);
  border: 1px solid var(--paper-edge);
}
/* Wide row — Bryant Park spans the full grid; lower-profile
   16:7 crop reads as a cinematic strip of green to seal the
   "park around the corner" beat. */
.map-embed .neighborhood__frame--wide {
  grid-column: 1 / -1;
}
.map-embed .neighborhood__frame--wide > .neighborhood__img {
  aspect-ratio: 16 / 7;
}

.map-embed .neighborhood__caption {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Place name + walk time — mono caps in ink (not accent),
   so the section's small-text register stays consistent
   with the eyebrow vocabulary. Slightly stronger than the
   eyebrow color since this IS the label, not just a tag. */
.map-embed .neighborhood__name {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
.map-embed .neighborhood__note {
  font-family: var(--font-sans);
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* ============================================================
   SECTION 7 · GALLERY
   Layout: two-row editorial spread on paper.
   - Header: left-aligned, narrow column in the left half of the
     container (eyebrow + h2 + lede stacked); right half held as
     negative space so the section opens quiet before the photos.
   - Row 1 (Building): asymmetric 60/40 grid — large portrait-
     cropped facade on the left, smaller landscape lobby render
     on the right.
   - Row 2 (Suites): hierarchical 2-column grid — feature image
     spans BOTH rows on the left (~58%); two stacked medium 16:11
     landscape frames on the right (~42%).
   Background: --paper (returns to body register after the cooler-
   paper Map above; sits before the heavier Footer below).
   Color register: accent-trace — accent appears only on the
   eyebrow rule and the two sub-story divider rules. The photos
   carry the section; the design recedes.
   Motif: sub-story dividers as small mono labels with a 1.4rem
   accent rule — same editorial-marker treatment as the suites
   list and broker-resources manifest, scaled up to section sub-
   headings.
   Top hairline acts as the chapter break from the Map.
   ============================================================ */
.gallery {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--paper-edge);
  padding: 16rem 0 16rem;
}

/* ---------- Header (centered) ---------- */
.gallery__header {
  max-width: 64rem;
  margin: 0 auto 8rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  text-align: center;
  align-items: center;
}
.gallery__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.gallery__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0;
}
.gallery__lede {
  font-family: var(--font-sans);
  font-size: var(--type-body-h2);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 50ch;
  margin: 0;
}

/* ---------- Aman-minimal 2-column grid ----------
   Six uniform 4:5 portrait frames, paired in three rows.
   object-fit: cover crops the mixed-orientation sources to
   the same aspect so the grid reads as one editorial layout.
   Generous gutter; design recedes, photography leads. */
.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem 4rem;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.gallery__item {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
}
.gallery__frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin: 0;
  background: var(--paper-shade);
}
.gallery__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery__label {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ============================================================
   SECTION · FOOTER (§8) — Direction A: The Cropped Mark
   The page's dark close. Wordmark bleeds off the left edge at
   ~2x scale (leading "3" partially cropped) and dictates the
   composition; contact + nav sit as a tight asymmetric block
   inside its negative space. A full-width sub-footer strip is
   pinned to the bottom edge, separated by a hairline rule.
   Background: warm near-black derived from --ink. Never pure
   black per design-universal "Never pure black or white".
   Atmospherics: subtle vertical gradient deepening toward the
   strip + accent hairline at the strip seam. No radial bloom.
   ============================================================ */
.site-footer {
  position: relative;
  background:
    linear-gradient(to bottom,
      #161310 0%,
      #161310 55%,
      #100d0a 100%),
    #161310;
  color: var(--paper);
  padding: 14rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  overflow: hidden;
}

.site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  grid-template-areas:
    "wordmark wordmark"
    "left     right";
  column-gap: 6rem;
  row-gap: 6rem;
  align-items: end;
  padding-bottom: 9rem;
}

/* Wordmark — bleeds off the left edge so the leading "3" is
   cropped by the viewport. The negative left margin equals the
   container's own left padding plus ~10vw of extra bleed; the
   parent .site-footer's overflow:hidden does the clipping. The
   wordmark scales to ~2x the previous footer size so the crop
   reads as intent, not overflow. */
.site-footer__wordmark {
  grid-area: wordmark;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  font-size: clamp(14rem, 20vw, 26rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--paper);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-left: calc(var(--container-pad) * -1 - 6rem);
  white-space: nowrap;
  transition: color .35s ease;
}
.site-footer__wordmark.reveal {
  transform: translate3d(0, 36px, 0);
}
.site-footer__wordmark.reveal.in-view {
  transform: none;
}
.site-footer__wordmark:hover { color: #ffffff; }
.site-footer__wordmark-num {
  display: inline-block;
}
.site-footer__wordmark-sep {
  font-family: var(--font-mono);
  font-weight: 400;
  font-variation-settings: normal;
  font-size: clamp(3rem, 4vw, 5rem);
  letter-spacing: 0;
  color: var(--accent);
  transform: translateY(-2.6rem);
  white-space: nowrap;
}

/* ---------- Left meta block (under the wordmark) ---------- */
.site-footer__left {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 36ch;
}

.site-footer__owner {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 75%, var(--ink) 25%);
  line-height: 1.6;
  margin: 0;
}

.site-footer__about {
  margin: 0;
}
.site-footer__about-link {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  transition: color .25s ease;
}
.site-footer__about-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.site-footer__about-link:hover { color: #ffffff; }
.site-footer__about-link:hover::after { transform: scaleX(1); }

/* ---------- Right block: Ben's contact + nav (tight asymmetric) ---------- */
.site-footer__right {
  grid-area: right;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 6rem;
  align-items: start;
  justify-self: end;
}

.site-footer__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 1.4rem;
}

/* ---------- Leasing block ---------- */
.site-footer__leasing {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 26rem;
}
.site-footer__contact-name {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(2.2rem, 2.2vw, 2.8rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--paper);
  margin: 0;
}
.site-footer__contact-role {
  font-family: var(--font-sans);
  font-size: var(--type-body-h3);
  color: color-mix(in srgb, var(--paper) 68%, var(--ink) 32%);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.site-footer__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer__contact-link {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--paper);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  transition: color .25s ease;
}
.site-footer__contact-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.site-footer__contact-link--primary::after { transform: scaleX(1); }
.site-footer__contact-link:hover { color: #ffffff; }
.site-footer__contact-link:hover::after { transform: scaleX(1); }

/* ---------- Nav block ---------- */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  min-width: 16rem;
}
.site-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-footer__nav-link {
  font-family: var(--font-mono);
  font-size: var(--type-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 78%, var(--ink) 22%);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 0.2rem 0;
  transition: color .25s ease;
}
.site-footer__nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.site-footer__nav-link:hover { color: var(--paper); }
.site-footer__nav-link:hover::after { transform: scaleX(1); }

/* ---------- Small-print strip — pinned bottom-edge full-width ---------- */
.site-footer__strip {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.8rem 0;
}
.site-footer__strip::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 12rem;
  height: 1px;
  background: var(--accent);
  opacity: 0.5;
  transition: width 1.6s cubic-bezier(.2, .65, .2, 1);
}
.site-footer__strip.is-revealed::before { width: 100%; }
.site-footer__strip-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 3rem;
}
.site-footer__fineprint {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 42%, var(--ink) 58%);
  line-height: 1.6;
  margin: 0;
  text-decoration: none;
}
.site-footer__fineprint--copy {
  justify-self: start;
}
.site-footer__fineprint--address {
  justify-self: center;
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
  transition: color .25s ease;
}
.site-footer__fineprint--address::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .4s cubic-bezier(.2,.65,.2,1);
}
.site-footer__fineprint--address:hover {
  color: color-mix(in srgb, var(--paper) 80%, var(--ink) 20%);
}
.site-footer__fineprint--address:hover::after { width: 100%; }
.site-footer__fineprint--trophy {
  justify-self: end;
}
.site-footer__attribution-link {
  color: color-mix(in srgb, var(--paper) 75%, var(--ink) 25%);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.2rem;
  transition: color .25s ease;
}
.site-footer__attribution-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.65,.2,1);
}
.site-footer__attribution-link:hover { color: #ffffff; }
.site-footer__attribution-link:hover::after { transform: scaleX(1); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    padding-top: 0;
  }
  .hero__lead { padding: 9rem var(--container-pad) 3.6rem; max-width: 100%; gap: 2.4rem; }
  /* The desktop title uses white-space: nowrap so "Boutique Floors" doesn't
     awkwardly break, but at 375px that overflows the column. Allow normal
     wrap on mobile and bring the floor of the clamp down so the three
     headline lines (incl. eyebrow + sub) fit above the fold at 375x667. */
  .hero__title { white-space: normal; font-size: clamp(3.4rem, 9vw, 5rem); }
  .hero__sub { font-size: var(--type-body-h2); }
  .hero__image-wrap { aspect-ratio: 4 / 5; }
  .building { padding: 10rem 0 8rem; }
  .building__intro { padding-bottom: 3rem; gap: 3rem; }
  .building__sun { height: 39rem; }
  .broker-resources { padding: 7rem 0; }
  .broker-resources__inner { grid-template-columns: 1fr; gap: 4rem; }
  .broker-resources__lead { max-width: 100%; gap: 2rem; }
  .broker-resources__index { gap: 2.8rem; }

  /* Stacking — stacks SVG above table on mobile. SVG centers in
     a constrained width; table becomes the primary interactive
     surface (shared CSS disables slice clicks <768px). */
  .stacking { padding: 8rem 0 5rem; }
  .stacking .stacking-inner {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
  .stacking .stacking-header {
    margin-bottom: 4rem;
    grid-template-columns: 1fr auto;
    gap: 2rem;
  }
  .stacking-header__lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
  }
  .stacking .stacking-wrap {
    max-width: 24rem;
  }
  /* Mobile collapse: floor cell becomes the row's primary line at full width,
     condition + RSF share row 2, suite cap / notes / links flow beneath. */
  .stacking .stacking-row,
  .stacking .stacking-row-header {
    grid-template-columns: 1fr auto;
    column-gap: 1.6rem;
    row-gap: 0.6rem;
    padding: 2rem 0.4rem;
  }
  .stacking .stacking-row-floor {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 2.8rem;
  }
  .stacking .stacking-row-suite-cap {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .stacking .stacking-row-condition {
    grid-column: 1;
    grid-row: 3;
  }
  .stacking .stacking-row-rsf {
    grid-column: 2;
    grid-row: 3;
  }
  .stacking .stacking-row-notes {
    grid-column: 1 / -1;
    grid-row: 4;
  }
  .stacking .stacking-row-links {
    grid-column: 1 / -1;
    grid-row: 5;
  }
  /* Column header collapses to "Floor / Size" — condition rides under each
     row's condition cell at mobile; the header column is dropped. */
  .stacking .stacking-row-header > span:nth-child(2) {
    display: none;
  }

  /* Map embed — match section rhythm to §4 Stacking on mobile.
     Aspect shifts to 4 / 5 so the embed gets enough vertical
     real estate to show the list + filters + map (the iframe's
     own internal layout stacks on its own breakpoint). */
  .map-embed { padding: 8rem var(--container-pad); }
  .map-embed .map-embed-header { margin-bottom: 4rem; gap: 2rem; }
  .map-embed .map-embed-frame { aspect-ratio: 4 / 5; }

  /* Neighborhood sub-story — single column on mobile, every
     frame full-width. Wide Bryant Park keeps its lower-profile
     crop. */
  .map-embed .neighborhood { margin-top: 6rem; }
  .map-embed .neighborhood__header { margin-bottom: 3.6rem; gap: 1.6rem; }
  .map-embed .neighborhood__grid {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }
  .map-embed .neighborhood__frame > .neighborhood__img { aspect-ratio: 4 / 3; }
  .map-embed .neighborhood__frame--wide > .neighborhood__img { aspect-ratio: 16 / 9; }

  /* Gallery — mobile rhythm. Collapse to one column so each
     image gets full width; tighten the vertical gap so the
     six items don't stretch the page out. */
  .gallery { padding: 10rem 0 10rem; }
  .gallery__header { margin-bottom: 6rem; gap: 1.8rem; }
  .gallery__grid {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  /* Footer (§8) — Direction A mobile spec.
     Mobile DOM-order independent from desktop: wordmark → Ben →
     nav → strip. The cropped-mark bleed softens at this width —
     the leading "3" is pulled by half a character instead of
     a full character, so the crop still reads as intent without
     looking like a layout bug at 390px. */
  .site-footer {
    padding: 8rem 0 0;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "wordmark"
      "right"
      "left";
    column-gap: 0;
    row-gap: 4.4rem;
    padding-bottom: 5.6rem;
    align-items: start;
  }
  .site-footer__wordmark {
    font-size: clamp(8rem, 22vw, 14rem);
    margin-left: calc(var(--container-pad) * -1 - 4vw);
    line-height: 0.85;
  }
  .site-footer__wordmark-sep { transform: translateY(-1.2rem); }
  .site-footer__right {
    grid-template-columns: 1fr;
    row-gap: 4rem;
    justify-self: stretch;
  }
  .site-footer__left { max-width: 100%; }

  /* Strip becomes a visibly-demoted strip: center-aligned, items
     stacked, with clear top margin from the rule. */
  .site-footer__strip {
    padding: 2rem 0;
    text-align: center;
  }
  .site-footer__strip-inner {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    justify-items: center;
  }
  .site-footer__fineprint--copy,
  .site-footer__fineprint--address,
  .site-footer__fineprint--trophy {
    justify-self: center;
  }
}