/* ==========================================================================
   YALE LANDING — 2500 Yale Blvd SE, Albuquerque NM
   Palette and type taken from the logo: deep navy wordmark on an off-white
   banner, set in heavy geometric caps. Archivo for display, Inter for text.
   Note: intentionally avoids the Zia sun symbol (sacred to Zia Pueblo).
   ========================================================================== */

:root {
  --black:      #0B1B33;  /* logo navy */
  --ink:        #05101F;  /* deepest navy */
  --white:      #FFFFFF;
  --tan:        #EDE8E4;  /* banner off-white */
  --tan-dk:     #E0D9D3;
  --peach:      #F6F3F0;
  --butter:     #F4F0EA;
  --terracotta: #C4162A;  /* accent, used sparingly */
  --clay:       #9C1020;
  --turquoise:  #1B6B58;
  --brass:      #B4903A;
  --gray:       #5A6478;
  --gray-lt:    #8B94A6;
  --line:       #DFDAD5;
  --line-dk:    rgba(255,255,255,.26);

  --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo", "Inter", "Helvetica Neue", sans-serif;
  --serif: var(--display);   /* legacy alias — no serif in the system now */

  --wrap: 1280px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -.005em;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  margin: 0 0 .55em; line-height: 1.04; font-weight: 800;
}
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.8rem);
  text-transform: uppercase;
  letter-spacing: -.022em;
}
h2 {
  font-size: clamp(1.75rem, 3.8vw, 2.9rem);
  text-transform: uppercase;
  letter-spacing: -.02em;
}
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.012em; }
h4 { font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

/* ---------- Utilities ---------- */
.wrap { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }
.wrap-narrow { width: min(820px, 100% - (var(--gut) * 2)); margin-inline: auto; }
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.band-tan { background: var(--tan); }
.band-peach { background: var(--peach); }
.band-butter { background: var(--butter); }
.band-dark { background: var(--black); color: var(--white); }
.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--black); color: #fff; padding: .8rem 1.3rem;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* Small italic serif kicker, e.g. "Offers" */
.kicker {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta); margin: 0 0 .7rem;
}
.band-dark .kicker { color: #FF7A88; }

/* Uppercase micro-label */
.label {
  font-size: .68rem; font-weight: 500; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gray); margin: 0 0 .8rem;
}
.band-dark .label { color: rgba(255,255,255,.55); }

.lede { font-size: clamp(1rem, 1.5vw, 1.14rem); color: var(--gray); max-width: 64ch; }
.band-dark .lede { color: rgba(255,255,255,.72); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 2.75rem;
}
.section-head h2 { margin-bottom: 0; }
.see-all {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; white-space: nowrap;
}

/* ---------- Buttons: square, outlined, letterspaced ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 1.05rem 2rem; border: 1.5px solid var(--black); border-radius: 0;
  text-decoration: none; background: var(--white); color: var(--black);
  box-shadow: 0 1px 2px rgba(11,27,51,.10);
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--black); color: var(--white); border-color: var(--black);
  box-shadow: 0 6px 18px rgba(11,27,51,.22); transform: translateY(-1px);
}
.btn--solid { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--solid:hover { background: var(--terracotta); border-color: var(--terracotta); }
/* On photography and dark bands — solid white, fills navy on hover. */
.btn--light { background: var(--white); color: var(--black); border-color: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.btn--light:hover { background: var(--black); color: var(--white); border-color: var(--black); }
.btn--sm { padding: .7rem 1.3rem; font-size: .7rem; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; max-width: 100vw; overflow-x: clip;
  background: var(--white); border-bottom: 1px solid var(--line);
}
.header-top {
  width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1.25rem; padding: 1rem 0 .85rem; align-items: start;
  transition: padding .25s ease;
}
.header-hours {
  display: flex; align-items: center; gap: .5rem; padding-top: .3rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--black);
}
.header-hours svg { flex: none; }
.header-hours a { color: var(--gray); text-decoration: none; }
.header-hours a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.header-hours small { display: block; font-size: .68rem; color: var(--gray); letter-spacing: .1em; }

.brand {
  text-align: center; text-decoration: none; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
/* Logo sits on top; the city and street address share one centred line below,
   separated by an em dash. */
.brand-meta {
  display: flex; align-items: center; justify-content: center;
  gap: .55rem; margin-top: .3rem; white-space: nowrap;
}
.brand-kicker {
  font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gray); margin: 0;
}
.brand-dash { color: var(--gray-lt); font-size: .6rem; line-height: 1; }
/* The wordmark is the logo artwork — a P-51 towing the Yale Landing banner.
   Kept between the ALBUQUERQUE kicker and the street address. */
.brand-word { display: block; line-height: 0; }
.brand-word img {
  width: min(400px, 68vw); height: auto; display: block;
  transition: width .28s ease;
}
.brand-word--text {
  font-family: var(--display); font-size: 1.9rem; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--black);
}
.brand-rule {
  font-family: var(--display); font-weight: 600; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gray-lt); margin: 0;
}

/* Compact state — set by site.js once the page scrolls. Keeps the big
   lockup at rest but stops the sticky bar eating a quarter of the screen. */
.site-header.is-compact .header-top { padding: .5rem 0 .45rem; align-items: center; }
.site-header.is-compact .brand-word img { width: 118px; }
.site-header.is-compact .brand-meta { margin-top: .3rem; }
.site-header.is-compact .brand-kicker,
.site-header.is-compact .brand-rule { font-size: .55rem; letter-spacing: .22em; }
.site-header.is-compact .header-hours { opacity: 0; pointer-events: none; }
.header-hours { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .header-top, .brand-word img, .header-hours, .btn { transition: none; }
  .btn:hover { transform: none; }
}

.header-actions { justify-self: end; display: flex; align-items: center; gap: .75rem; padding-top: .1rem; }

.site-nav {
  border-top: 1px solid var(--line);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 2.4rem;
  padding: .8rem var(--gut);
}
.site-nav a {
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none; color: var(--black); padding: .2rem 0; position: relative;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--black); transition: right .22s ease;
}
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { right: 0; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); color: var(--black);
  width: 42px; height: 42px; cursor: pointer; align-items: center; justify-content: center; padding: 0;
}
.nav-toggle span { display: block; width: 17px; height: 1px; background: currentColor; position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1px; background: currentColor;
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

@media (max-width: 900px) {
  .header-top { grid-template-columns: auto minmax(0, 1fr) auto; padding: .8rem 0; }
  .brand { min-width: 0; }
  .brand-word { max-width: 100%; }
  .brand-word img { max-width: 100%; }
  .header-hours { display: none; }
  .header-actions { gap: .45rem; padding-top: 0; }
  .header-top { align-items: center; }
  .nav-toggle { display: inline-flex; }
  .brand { justify-self: center; }
  .brand-kicker { letter-spacing: .3em; }
  .site-nav {
    flex-direction: column; align-items: center; gap: 0;
    max-height: 0; overflow: hidden; padding: 0 var(--gut); transition: max-height .3s ease;
    border-top: 0;
  }
  .site-nav.is-open { max-height: 480px; padding: .5rem var(--gut) 1.2rem; border-top: 1px solid var(--line); }
  .site-nav a { width: 100%; text-align: center; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
  .btn { padding: .75rem 1.1rem; font-size: .68rem; letter-spacing: .13em; }
}
@media (max-width: 400px) {
  .brand-rule { display: none; }
}

/* ---------- Hero (full bleed) ----------
   Source photos are 480x640 phone shots, so a full-bleed hero upscales them ~3x.
   `.is-soft` applies a light blur — just enough to take the hard edge off the
   upscaling while the building stays clearly readable. When a proper wide shot
   arrives, delete `is-soft` from the markup and the hero goes fully sharp. */
/* The image is an absolutely-positioned backdrop; the content sits in normal flow.
   That way the hero grows to fit whatever it contains instead of clipping it. */
.hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media.is-soft img {
  filter: blur(9px) saturate(1.06) brightness(.95);
  transform: scale(1.09);          /* hides the soft edge the blur creates */
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(20,16,15,.78) 0%, rgba(20,16,15,.48) 48%, rgba(20,16,15,.34) 100%);
}
.hero__inner {
  position: relative; z-index: 2; display: flex; align-items: center;
  min-height: clamp(420px, 62vh, 620px);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}
.hero__content { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; max-width: 100%; }
.hero__copy > * { max-width: 30ch; }
.hero h1 { color: var(--white); margin-bottom: .45em; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.hero__lede { color: rgba(255,255,255,.88); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; max-width: none; }
/* Small honest credit — the hero is a rendering, not a photograph */
.page-hero__credit {
  position: absolute; right: .7rem; bottom: .55rem; z-index: 2; margin: 0;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.hero__credit {
  position: absolute; right: 1rem; bottom: .75rem; z-index: 3; margin: 0;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}

/* Slim stat strip under the hero */
.stat-strip { background: var(--black); color: var(--white); border-top: 1px solid rgba(255,255,255,.14); }
.stat-strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat {
  padding: 1.6rem 1.25rem; border-right: 1px solid rgba(255,255,255,.14);
}
.stat:last-child { border-right: 0; }
.stat dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .35rem; }
.stat dd { margin: 0; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 620px) {
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 1.1rem 0; }
  .stat:last-child { border-bottom: 0; }
}

/* ---------- Tenant wordmark strip ---------- */
.logo-strip { border-bottom: 1px solid var(--line); padding: 2.75rem 0; }
.logo-strip__inner {
  display: flex; align-items: stretch; justify-content: center;
  flex-wrap: wrap; gap: 1.25rem;
}
/* Each mark sits on its own white tile. Perico's artwork has a white background
   baked in, so a white tile lets it sit flush with the transparent ones. */
.logo-mark {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 2px 12px -8px rgba(35,31,32,.35);
  padding: 1.15rem 1.6rem; min-width: 180px; min-height: 104px;
  text-decoration: none; text-align: center;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gray);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
a.logo-mark:hover {
  transform: translateY(-3px); border-color: rgba(35,31,32,.22);
  box-shadow: 0 12px 26px -14px rgba(35,31,32,.4); color: var(--black);
}
.logo-mark img {
  height: 54px; width: auto; max-width: 210px; object-fit: contain;
  transition: transform .25s ease;
}
a.logo-mark:hover img { transform: scale(1.04); }
/* The FMV lockup is a wide horizontal mark — give it more width, less height */
.logo-mark img.is-wide { height: 38px; max-width: 240px; }
.logo-mark--text {
  font-family: var(--display); font-size: 1.3rem;
  letter-spacing: 0; text-transform: none; color: var(--gray-lt);
}
@media (max-width: 560px) {
  .logo-strip__inner { gap: .75rem; }
  .logo-mark { min-width: 140px; min-height: 84px; padding: .9rem 1.1rem; }
  .logo-mark img { height: 42px; max-width: 150px; }
  .logo-mark img.is-wide { height: 28px; max-width: 165px; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: box-shadow .22s ease, transform .22s ease;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(35,31,32,.55); }
/* Matted card image — the white inset keeps the photo well under its native 480px
   width so it downscales, and frames it as a print rather than a stretched fill. */
.card__media {
  position: relative; padding: 11px; background: var(--white);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.card__media img,
.card__media .ph {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover;
  display: block; transition: transform .55s ease;
}
.card__media .ph { min-height: 0; }
a.card:hover .card__media img { transform: scale(1.03); }
.card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.card__cat {
  font-size: .66rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .7rem;
}
.card__body h3 { margin-bottom: .6rem; }
.card__body p { font-size: .93rem; color: var(--gray); margin-bottom: 1.1rem; }
.card__hours {
  font-size: .8rem !important; color: var(--black) !important; letter-spacing: .04em;
  padding-top: .85rem; border-top: 1px solid var(--line); margin-bottom: 1.1rem !important;
}
.card__link {
  margin-top: auto; font-size: .74rem; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px;
}

.badge {
  position: absolute; top: 11px; left: 11px; z-index: 2;
  background: var(--white); color: var(--black);
  font-size: .62rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  padding: .45rem .85rem;
}
.badge--open { background: var(--turquoise); color: #fff; }
.badge--soft { background: var(--butter); color: var(--black); }
.badge--soon { background: var(--black); color: #fff; }

/* ---------- Image placeholder (styled to the theme) ---------- */
.ph {
  width: 100%; height: 100%; min-height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; text-align: center; padding: 1.5rem;
  background: var(--tan);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 14px, rgba(35,31,32,.05) 14px, rgba(35,31,32,.05) 28px);
  border: 1px dashed rgba(35,31,32,.3); color: var(--black);
}
.ph strong {
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.ph span { font-size: .82rem; line-height: 1.5; max-width: 32ch; color: var(--gray); }
.ph--dark { background: #2E2A28; border-color: rgba(255,255,255,.3); color: #fff;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 14px, rgba(255,255,255,.05) 14px, rgba(255,255,255,.05) 28px); }
.ph--dark span { color: rgba(255,255,255,.7); }

/* ---------- Feature row ---------- */
.feature { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: center; }
.feature__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--tan); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
/* Panoramic source — a 5:4 box would crop most of the building out */
.feature__media--wide { aspect-ratio: 16 / 10; }
.feature--flip .feature__media { order: 2; }
@media (max-width: 840px) {
  .feature { grid-template-columns: 1fr; }
  .feature--flip .feature__media { order: 0; }
}

/* ---------- Framed photo ----------
   Used by the leasing aerial. Tiles are capped well under the native width of the
   source images so they downscale rather than upscale, and the white mat frames
   them as prints rather than fills. */
.photo-row {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 260px));
  justify-content: center;
}
.frame {
  background: var(--white); padding: 11px 11px 13px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px -18px rgba(35,31,32,.5);
  margin: 0; transition: transform .25s ease, box-shadow .25s ease;
}
.frame:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -20px rgba(35,31,32,.55); }
.frame__img { position: relative; overflow: hidden; background: var(--tan); aspect-ratio: 3 / 4; }
.frame__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame__img .ph { min-height: 0; height: 100%; border: 0; }
.frame figcaption {
  font-size: .6rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--gray); margin-top: .75rem; text-align: center; line-height: 1.5;
}
.band-tan .frame, .band-peach .frame { border-color: rgba(35,31,32,.14); }
@media (max-width: 560px) {
  .photo-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
  .frame { padding: 8px 8px 10px; }
}

/* ---------- Info blocks / hours ---------- */
.info-grid { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 2rem; }
.info-block h4 {
  font-size: .66rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .5rem; font-weight: 500;
}
.info-block p { font-size: .97rem; margin-bottom: .35rem; }
.info-block a { color: var(--black); text-decoration: underline; text-underline-offset: 4px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.hours-table th, .hours-table td { padding: .55rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.hours-table th { color: var(--black); width: 52%; }
.hours-table td { text-align: right; color: var(--gray); font-variant-numeric: tabular-nums; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table .is-closed td { color: var(--terracotta); }

/* ---------- Split layout w/ sidebar ---------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.4fr .6fr; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.sidecard { background: var(--tan); padding: 2rem 1.75rem; position: sticky; top: 130px; }
@media (max-width: 900px) { .sidecard { position: static; } }
.sidecard h3 { margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem; }
.sidecard .btn { margin-top: .5rem; }

/* ---------- Page hero (interior pages) ---------- */
/* Same pattern as the homepage hero — backdrop is absolute, content is in flow,
   so the block grows with its content rather than cropping the breadcrumb and buttons. */
.page-hero { position: relative; background: var(--black); color: var(--white); overflow: hidden; }
.page-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.page-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__media.is-soft img {
  filter: blur(8px) saturate(1.06) brightness(.95);
  transform: scale(1.09);
}
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,16,15,.85) 0%, rgba(20,16,15,.5) 60%, rgba(20,16,15,.35) 100%);
}
.page-hero__inner {
  position: relative; z-index: 2; display: flex; align-items: center;
  min-height: clamp(340px, 44vh, 440px);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.page-hero__content { width: min(var(--wrap), 100% - (var(--gut) * 2)); margin-inline: auto; }
.page-hero h1 {
  color: #fff; max-width: 18ch; font-size: clamp(1.8rem, 4.2vw, 3.2rem);
  text-shadow: 0 2px 24px rgba(0,0,0,.45); margin-bottom: .5em;
}
.page-hero__lede { color: rgba(255,255,255,.85); max-width: 50ch; }
.page-hero .hero__actions { margin-top: 2rem; }

.breadcrumbs { font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 1.5rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.breadcrumbs span { margin: 0 .55rem; }

.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.5rem; }
.tag {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem .8rem; border: 1px solid rgba(255,255,255,.45); color: rgba(255,255,255,.9);
}
.tag--accent { background: var(--turquoise); border-color: var(--turquoise); color: #fff; }
.tag--gold { background: var(--butter); border-color: var(--butter); color: var(--black); }

/* ---------- Gallery ---------- */
/* Capped at 240px so the 480px source downscales. Matted like the photo row. */
.gallery {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
}
.gallery figure {
  margin: 0; background: var(--white); padding: 10px 10px 12px;
  border: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(35,31,32,.5);
}
.gallery figure > div, .gallery figure > img { aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .ph { min-height: 0; height: 100%; border: 0; }
@media (max-width: 560px) {
  .gallery { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
}

/* ---------- Menu ---------- */
.menu-section { margin-top: 2.5rem; }
.menu-section > h3 {
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  padding-bottom: .7rem; border-bottom: 1px solid var(--black); margin-bottom: .3rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.menu-section > h3 small {
  font-size: .68rem; letter-spacing: .1em; text-transform: none;
  color: var(--gray); font-weight: 400;
}
.menu-note { font-size: .84rem; color: var(--gray); font-style: italic; margin: .7rem 0 0; }

.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.menu-list li:last-child { border-bottom: 0; }
.menu-row { display: flex; align-items: baseline; gap: .6rem; }
.menu-row:not(:has(.price)) .name { font-weight: 550; }
.menu-row .name { font-weight: 500; font-size: .97rem; }
.menu-row .dots { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-.25em); min-width: 1.5rem; }
.menu-row .price { font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
.menu-list .desc { display: block; font-size: .86rem; color: var(--gray); margin-top: .2rem; max-width: 60ch; }
.menu-cols { columns: 2; column-gap: 3rem; }
.menu-cols .menu-section { break-inside: avoid; margin-top: 0; margin-bottom: 2.25rem; }
@media (max-width: 700px) { .menu-cols { columns: 1; } }

/* ---------- Callout ---------- */
.callout { background: var(--peach); padding: 1.4rem 1.6rem; margin: 2.25rem 0; }
.callout p { margin: 0; font-size: .95rem; }
.callout a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Leasing panel ---------- */
.lease-panel { display: grid; grid-template-columns: 1fr 1fr; background: var(--black); color: #fff; }
.lease-panel__body { padding: clamp(2.25rem, 5vw, 4rem); align-self: center; }
/* Framed rather than full-bleed: the panel is ~640px wide but the source photo is
   480px, so filling it upscaled and went soft. Capping the frame at 300px keeps it
   well under native and sharp. */
.lease-panel__media {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: #1C1917;
  background-image: repeating-linear-gradient(135deg, transparent, transparent 18px, rgba(255,255,255,.022) 18px, rgba(255,255,255,.022) 36px);
}
.lease-panel__media .frame { width: min(300px, 100%); }
.lease-panel h2 { color: #fff; }
.lease-points { list-style: none; padding: 0; margin: 1.6rem 0 2rem; display: grid; gap: .65rem; }
.lease-points li { padding-left: 1.4rem; position: relative; font-size: .94rem; color: rgba(255,255,255,.78); }
.lease-points li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--peach); }
.lease-contact { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .88rem; color: rgba(255,255,255,.65); }
.lease-contact strong { display: block; color: #fff; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .25rem; }
@media (max-width: 900px) {
  .lease-panel { grid-template-columns: 1fr; }
  .lease-panel__media { order: -1; padding: 2.25rem; }
  .lease-panel__media .frame { width: min(260px, 100%); }
}

/* ---------- Available spaces ---------- */
.space-grid {
  display: grid; gap: 1.5rem; margin: 2.75rem 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.space-card {
  border: 1px solid rgba(255,255,255,.22); display: flex; flex-direction: column;
  background: rgba(255,255,255,.03);
}
.space-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: #2E2A28; }
.space-card__media img { width: 100%; height: 100%; object-fit: cover; }
.space-card__media .ph { min-height: 0; height: 100%; border: 0; }
.space-card__body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.space-card__label {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--peach); margin-bottom: .5rem;
}
.space-card h3 {
  font-size: 1.5rem; color: #fff; margin-bottom: .2rem;
  font-family: var(--display); font-weight: 600; letter-spacing: 0;
}
.space-card__size {
  font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 1.1rem;
}
.space-card p { font-size: .92rem; color: rgba(255,255,255,.75); margin-bottom: 1.2rem; }
.space-specs { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .45rem; }
.space-specs li {
  font-size: .84rem; color: rgba(255,255,255,.7); padding-left: 1.2rem; position: relative;
}
.space-specs li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--peach);
}
.space-card__uses {
  margin-top: auto; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.16);
  font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.6;
}
.space-card__uses strong {
  display: block; color: rgba(255,255,255,.8); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; margin-bottom: .35rem; font-weight: 500;
}

/* ---------- Leasing aerial ---------- */
/* Source is only 692px wide, so cap the display width rather than stretch it */
.lease-aerial {
  margin: 2.75rem auto 0; max-width: 690px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); padding: 10px;
}
.lease-aerial img { width: 100%; display: block; }
.lease-aerial figcaption {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); text-align: center; margin-top: .8rem; line-height: 1.6;
}

/* ---------- Concept renderings ---------- */
.concepts { margin-top: 3.5rem; }
.concept-grid {
  display: grid; gap: 1.25rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.concept { margin: 0; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.18); }
.concept img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .5s ease; }
.concept:hover img { transform: scale(1.04); }
.concept figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1rem .85rem;
  background: linear-gradient(to top, rgba(20,16,15,.92), transparent);
  color: #fff; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.concept figcaption small {
  display: block; font-size: .6rem; letter-spacing: .1em; text-transform: none;
  color: rgba(255,255,255,.6); margin-top: .25rem; font-style: italic;
}
.disclaimer {
  font-size: .76rem; line-height: 1.6; color: rgba(255,255,255,.45);
  max-width: 74ch; margin-top: 1.5rem;
}
.site-footer .disclaimer { color: rgba(255,255,255,.38); margin: 1.5rem 0 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.faq summary {
  cursor: pointer; list-style: none; font-size: 1rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; font-weight: 300; flex: none; color: var(--terracotta); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: .9rem; color: var(--gray); font-size: .94rem; max-width: 68ch; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: rgba(255,255,255,.68); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .89rem; }
.footer-grid {
  display: grid; gap: 2.5rem; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.16);
}
@media (max-width: 840px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.1rem; font-weight: 500; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-brand .brand { align-items: flex-start; text-align: left; }
.footer-brand .brand-meta { justify-content: flex-start; }
.footer-brand .brand-kicker { color: rgba(255,255,255,.5); }
.footer-note {
  border-top: 1px solid var(--line-dk); margin-top: 1.6rem; padding-top: 1.1rem;
  font-size: .74rem; line-height: 1.6; color: rgba(255,255,255,.62); max-width: 78ch;
}
.footer-bottom {
  padding-top: 1.6rem; display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; font-size: .78rem; letter-spacing: .06em; color: rgba(255,255,255,.42);
}

/* ---------- Editor note — delete before launch ---------- */
.todo {
  background: var(--butter); border-left: 3px solid var(--terracotta);
  padding: .95rem 1.2rem; font-size: .85rem; margin: 1.5rem 0; color: #5A3B14; line-height: 1.6;
}
/* An editor note sitting directly under a hero needs its own breathing room */
.page-hero + .wrap > .todo, .hero + .wrap > .todo { margin-top: 2.5rem; }
.todo strong { display: block; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .3rem; color: var(--clay); }
.todo code { background: rgba(0,0,0,.07); padding: .1rem .35rem; font-size: .92em; }

/* ── Leasing site plan ── */
.lease-plan {
  margin: 0 0 2.4rem;
  max-width: 980px;
}
.lease-plan img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  background: #fff;
  padding: 14px;
}
.lease-plan figcaption {
  margin-top: .85rem;
  font-size: .8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
}
@media (max-width: 700px) {
  .lease-plan img { padding: 8px; }
}

/* ==========================================================================
   RESTAURANT-FIRST LAYER
   Added when the site was refocused on customers rather than leasing.
   ========================================================================== */

/* ---------- Header: leasing demoted to a quiet outline link ---------- */
.btn--quiet {
  font-size: .68rem; padding: .6rem 1.05rem; letter-spacing: .15em;
  border-color: var(--line); color: var(--gray);
}
.btn--quiet:hover { background: var(--black); border-color: var(--black); color: #fff; }

/* Directions — the customer action, so it outranks the quiet leasing link. */
.btn--pin { gap: .45rem; padding: .6rem 1.05rem; font-size: .68rem; letter-spacing: .1em; }
.btn--pin svg { flex: none; }
/* The header is a 3-column grid: hours | logo | actions. As the viewport
   narrows, the LOGO gives up space so both buttons keep their labels — the
   buttons never disappear and never get pushed off-screen.
   `minmax(0, ...)` matters: a bare `1fr` keeps min-width:auto, so the centre
   column refuses to shrink below the logo and overflows the page instead. */
@media (max-width: 1080px) {
  .brand-word img { width: min(340px, 40vw); }
}
@media (max-width: 900px) {
  .brand-word img { width: min(290px, 34vw); }
  .btn--pin { padding: .6rem .95rem; letter-spacing: .06em; }
  .btn--quiet { padding: .6rem .9rem; }
}

/* ---------- Big restaurant cards ---------- */
.eat-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.eat-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: transform .25s ease, box-shadow .25s ease;
}
.eat-card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(35,31,32,.55); }
.eat-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tan); }
.eat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.eat-card:hover .eat-card__media img { transform: scale(1.05); }
.eat-card__status {
  position: absolute; top: 0; left: 0; z-index: 2;
  font-size: .6rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: .45rem .85rem; background: var(--turquoise); color: #fff;
}
.eat-card__status.is-soon { background: var(--black); }
.eat-card__logo {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  background: #fff; padding: 8px 12px; display: flex; align-items: center;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
}
.eat-card__logo img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }
.eat-card__body { padding: 1.6rem 1.6rem 1.85rem; display: flex; flex-direction: column; flex: 1; }
.eat-card__kind {
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--terracotta); margin-bottom: .6rem;
}
.eat-card h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.eat-card p { font-size: .94rem; color: var(--gray); margin-bottom: 1.15rem; }
.eat-card__order {
  font-size: .84rem; color: var(--black); padding: .85rem 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 1.1rem;
}
.eat-card__order strong { font-weight: 600; }
.eat-card__foot {
  margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
}
.eat-card__hours { font-size: .78rem; color: var(--gray); letter-spacing: .03em; }
.eat-card__go {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; white-space: nowrap;
}

/* ---------- Hours at a glance ---------- */
.hours-board { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.hours-board__row {
  display: grid; grid-template-columns: 1.3fr 2fr auto; gap: 1.5rem;
  background: var(--white); padding: 1.15rem 1.5rem; align-items: center;
}
.hours-board__row strong { font-size: .98rem; font-weight: 600; }
.hours-board__row span { font-size: .88rem; color: var(--gray); font-variant-numeric: tabular-nums; }
.hours-board__row a { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; white-space: nowrap; }
@media (max-width: 640px) {
  .hours-board__row { grid-template-columns: 1fr; gap: .4rem; }
}

/* ---------- Nearby / landing-page hub ---------- */
.near-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem; }
.near-tile {
  background: var(--white); padding: 1.5rem 1.6rem; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: .35rem; transition: background .2s ease;
}
.near-tile:hover { background: var(--sand); }
.near-tile strong { font-size: 1rem; font-weight: 600; }
.near-tile span { font-size: .82rem; color: var(--gray); }
.near-tile em {
  font-style: normal; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta); margin-top: .3rem;
}
@media (min-width: 680px)  { .near-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .near-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Quiet leasing strip ---------- */
.lease-strip { background: var(--black); color: rgba(255,255,255,.72); }
.lease-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 2.5rem 0;
}
.lease-strip p { margin: 0; font-size: .95rem; max-width: 58ch; }
.lease-strip strong { color: #fff; display: block; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: .4rem; }

/* ---------- PDF viewer ---------- */
.pdf-frame {
  width: 100%; height: min(88vh, 1100px); border: 1px solid var(--line);
  background: var(--sand); display: block;
}
.pdf-fallback { margin-top: 1.25rem; font-size: .9rem; color: var(--gray); }

/* ---------- Landing-page intro ---------- */
.landing-facts {
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.landing-facts div { background: var(--white); padding: 1.35rem 1.4rem; }
.landing-facts dt {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .4rem;
}
.landing-facts dd { margin: 0; font-size: 1.05rem; font-weight: 500; }

/* ---------- Logo lockup ---------- */
/* A 3px red rule under the header picks up the pennant on the banner. */
.site-header { border-bottom: 2px solid var(--black); }
.footer-brand .brand { align-items: flex-start; text-align: left; }
.footer-brand .brand-meta { justify-content: flex-start; }
.footer-brand .brand-kicker { color: rgba(255,255,255,.5); }
.footer-brand .brand-rule   { color: rgba(255,255,255,.4); }
.footer-brand .brand-word img { width: 260px; height: auto; }
@media (max-width: 900px) { .footer-brand .brand-word img { width: 190px; } }

@media (max-width: 620px) {
  .header-top {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: .7rem;
    padding: .85rem 0 .7rem;
  }
  .header-actions { justify-self: center; padding-top: 0; gap: .5rem; }
  .brand { justify-self: center; }
  .brand-word img { width: min(300px, 66vw); }
  .btn--pin, .btn--quiet { padding: .62rem 1rem; font-size: .66rem; }

  .site-header.is-compact .header-top { row-gap: .5rem; padding: .55rem 0 .5rem; }
  .site-header.is-compact .brand-word img { width: 104px; }
}

/* iPhone SE class. Only ~6px of slack remained at 320px, which is inside the
   margin of error for font rendering, so tighten the buttons a little more. */
@media (max-width: 380px) {
  .header-actions { gap: .35rem; }
  .btn--pin, .btn--quiet { padding: .58rem .72rem; font-size: .62rem; letter-spacing: .04em; }
  .btn--pin { gap: .32rem; }
}

@media (max-width: 420px) {
  .brand-meta { gap: .35rem; }
  .brand-kicker, .brand-rule { font-size: .48rem; letter-spacing: .22em; }
}

/* Credit line for the renderings used in feature blocks */
.feature__media { margin: 0; position: relative; }
.feature__credit {
  position: absolute; right: .6rem; bottom: .45rem;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.75); text-shadow: 0 1px 4px rgba(0,0,0,.6);
}


/* ---------- Legal pages: terms, privacy, disclaimer ---------- */
.legal-head { border-bottom: 1px solid var(--line); }
.legal-head h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .4rem; }
.legal-updated {
  font-family: var(--display); font-size: .7rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gray); margin: 0;
}
.legal { font-size: 1rem; line-height: 1.75; }
.legal h2 {
  font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -.01em;
  margin: 2.6rem 0 .8rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 1rem; }
.legal h3 {
  font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase; color: var(--gray); margin: 1.6rem 0 .5rem;
}
.legal p { margin: 0 0 1.1em; }
.legal ul { margin: 0 0 1.3em; padding-left: 1.15rem; }
.legal li { margin-bottom: .6em; padding-left: .2rem; }
.legal li::marker { color: var(--terracotta); }
.legal strong { font-weight: 600; }
.legal code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .88em; background: var(--peach); padding: .1em .35em; border-radius: 3px;
}
.legal a { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--terracotta); }
.legal .lede { margin-bottom: 2rem; }
.legal-cross {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 2px solid var(--black);
  font-size: .9rem; color: var(--gray);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .5rem; }
.footer-legal a {
  font-size: .74rem; color: rgba(255,255,255,.62);
  text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22);
}
.footer-legal a:hover { color: #fff; border-bottom-color: #fff; }


/* ---------- Lease page: property facts + FAQ ---------- */
.facts-table {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 2.5rem; margin-top: 2rem;
}
.facts-table > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line);
}
.facts-table span {
  font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gray);
  flex: none;
}
.facts-table strong { font-weight: 500; text-align: right; font-size: .95rem; }
.facts-note { margin-top: 1.6rem; font-size: .8rem; color: var(--gray); }
.facts-note a { color: var(--gray); }

.faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .2rem; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; font-weight: 400; color: var(--terracotta); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--terracotta); }
.faq details p { margin: 0 0 1.3rem; color: var(--gray); font-size: .95rem; max-width: 62ch; }
@media (max-width: 560px) {
  .facts-table > div { flex-direction: column; gap: .2rem; }
  .facts-table strong { text-align: left; }
}


/* ---------- Lease page: real frontage banner ---------- */
.lease-banner { margin: 0 0 2.5rem; }
.lease-banner img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255,255,255,.16);
}
.lease-banner figcaption {
  margin-top: .7rem; font-family: var(--display); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6);
}