/* ============================================================
   LYONS & LYONS PROPERTIES — Global Stylesheet
   Color system extracted directly from the Lyons & Lyons logo:
   steel blue (#2976B8), light blue (#7AA2C5), deep blue (#1A5A96),
   silver/gray text, institutional white.
   ============================================================ */

/* -------- Design tokens -------- */
:root {
  /* Brand palette — extracted from logo */
  --blue-primary: #2976B8;   /* Main brand blue */
  --blue-light:   #7AA2C5;   /* Steel blue accent */
  --blue-deep:    #1A5A96;   /* Deep blue for hero / footer */
  --blue-darker:  #0D2E54;   /* Used only in overlays */

  --silver:       #9D9D9B;   /* Silver / metallic gray */
  --silver-light: #C4C8CC;   /* Light borders */
  --silver-dark:  #6B6B69;   /* Secondary body text */

  /* Sampled straight out of lyons-obrien-logo.png */
  --logo-blue:    #186EB5;   /* The blue of the mark and wordmark */
  --logo-silver:  #A2A2A2;   /* The grey of the mark, rules and "R.E." */
  /* A wash of the logo silver, for full-width background bands. The logo
     silver itself is a mid-tone: as a large background it leaves both white
     and the logo blue below readable contrast, so bands use this tint and
     carry dark text. */
  --silver-band:  #DEDEDE;
  /* The logo silver darkened just enough to hold up as text on white
     (3.4:1 at the bold sizes it is used on; #A2A2A2 itself is 2.5:1). */
  --logo-silver-text: #8A8A8A;

  --white:        #FFFFFF;
  --off-white:    #F4F6F8;   /* Cool-toned section bg */
  --dark:         #1C2B3A;   /* Headlines / body on light */

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, #1A5A96 0%, #2976B8 50%, #7AA2C5 100%);
  --gradient-card: linear-gradient(180deg, #2976B8 0%, #1A5A96 100%);
  --overlay-dark: rgba(26, 90, 150, 0.75);
  --overlay-hero: rgba(13, 35, 60, 0.65);

  /* Spacing — 8px scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container: 1320px;
  --gutter: 32px;
  --nav-h: 168px;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* The nav is fixed, so an anchor jump would otherwise land the target's
     heading underneath it. Applies to every #id link on the site. */
  scroll-padding-top: calc(var(--nav-h) + var(--s2));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.8;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 16px; }

/* -------- Typography -------- */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dark);
}
h1 { font-size: clamp(48px, 7vw, 80px); letter-spacing: -0.02em; }
h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 400; }
h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; }

.label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-primary);
  display: inline-block;
  margin-bottom: var(--s3);
}
.label--light { color: var(--blue-light); }
.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.subline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--silver-dark);
  margin-top: var(--s2);
}
.gold-rule {            /* Kept class name for HTML compat — now blue */
  display: block;
  width: 64px;
  height: 1px;
  background: var(--blue-light);
  margin: var(--s4) 0;
}
.gold-rule--center { margin: var(--s4) auto; }

/* Visually hidden, still read by screen readers and indexed. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------- Layout helpers -------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { position: relative; }
.section-pad { padding: var(--s8) 0; }
.section-pad-sm { padding: var(--s7) 0; }
.text-center { text-align: center; }

/* Section themes */
.bg-navy { background: var(--blue-primary); color: var(--white); }
.bg-navy-deep { background: var(--blue-deep); color: var(--white); }
.bg-off-white { background: var(--off-white); color: var(--dark); }
.bg-silver { background: var(--silver-band); color: var(--dark); }
.bg-white { background: var(--white); color: var(--dark); }
.bg-navy h1, .bg-navy h2, .bg-navy h3,
.bg-navy-deep h1, .bg-navy-deep h2, .bg-navy-deep h3 { color: var(--white); }
/* …except inside the white park cards. */
.bg-navy-deep .pf-card__name { color: var(--dark); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  background: transparent;
  transition: background 400ms ease, backdrop-filter 400ms ease, height 400ms ease,
              box-shadow 400ms ease;
}
.nav__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Floor on the space between the logo and the links, so they can never end
     up touching if either side grows. */
  gap: var(--s5);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--white);
  transition: color 400ms ease;
}
.nav__logo-mark {
  /* Sized for the square mark. The old logo was 1.82:1, so 104px tall read as
     a wide, restrained lockup; the same height on a square makes a much
     heavier block. 84px brings the visual weight back to where it was. */
  height: 84px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 300ms var(--ease), opacity 300ms ease;
}
.nav__logo:hover .nav__logo-mark { transform: translateY(-1px); opacity: 0.85; }
.nav__logo-mark img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  image-rendering: -webkit-optimize-contrast;
}

.nav__logo-text { display: none; }
.nav__logo-text-unused {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.nav__logo-text small {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s5);
  list-style: none;
}
.nav__links a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding: 4px 0;
  transition: color 250ms ease;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--blue-light);
  transition: width 300ms var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { width: 100%; }
.nav__links a:hover { color: rgba(255,255,255,0.85); }
.nav__links a.is-active { color: var(--blue-light); }

.nav__phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--white);
  transition: color 250ms ease;
}
.nav__phone:hover { color: var(--blue-light); }
.nav__phone svg { width: 14px; height: 14px; }

/* Scrolled state */
.nav.is-scrolled {
  background: rgba(26, 90, 150, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(122, 162, 197, 0.2);
}
.nav.is-solid {
  background: rgba(26, 90, 150, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Mobile burger */
.nav__burger {
  display: none;
  width: 32px; height: 32px;
  position: relative;
  z-index: 110;
}
.nav__burger span {
  position: absolute;
  left: 4px;
  width: 24px; height: 1px;
  background: var(--white);
  transition: transform 300ms var(--ease), top 300ms var(--ease), opacity 200ms ease;
}
.nav__burger span:nth-child(1) { top: 10px; }
.nav__burger span:nth-child(2) { top: 16px; }
.nav__burger span:nth-child(3) { top: 22px; }
.nav.is-open .nav__burger span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

/* Six nav links need roughly 640px. Below about 900px that plus the logo no
   longer fits the container, and the links ran into the logo's wordmark —
   "HOME" sat directly on top of it around 800px. The burger has to take over
   here rather than at 768px, which was tuned when the logo was narrower. */
@media (max-width: 900px) {
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: block; }
}

/* Links pulled in off the right edge. The mark is now a narrow square, so
   space-between alone left a wide hole in the middle and the bar read as two
   clumps pinned to opposite ends. Auto margins on both sides of the list
   centre it in whatever space the logo leaves, closing the gap from the right.
   The logo itself stays on the container edge, where it lines up with the hero
   headline and every section heading down the page. */
@media (min-width: 901px) {
  .nav__inner > nav { margin-left: auto; margin-right: auto; }
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--blue-deep);
  z-index: 105;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--white);
  padding: 12px 24px;
  letter-spacing: 0.02em;
  transition: color 250ms ease;
}
.mobile-menu a:hover { color: var(--blue-light); }
.mobile-menu__phone {
  margin-top: var(--s5);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
}

/* ============================================================
   BUTTONS — sharp corners, no border radius
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 350ms var(--ease), color 350ms var(--ease),
              border-color 350ms var(--ease), transform 300ms var(--ease);
  text-align: center;
}
/* Primary button (kept legacy class name btn--gold for HTML compat) */
.btn--gold {
  background: var(--blue-primary);
  color: var(--white);
  border-color: var(--blue-primary);
}
.btn--gold:hover {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
  transform: translateY(-2px);
}
/* Secondary ghost on dark */
.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.55);
}
.btn--ghost:hover {
  background: var(--white);
  color: var(--blue-primary);
  border-color: var(--white);
  transform: translateY(-2px);
}
/* Filled primary blue (use on light sections) */
.btn--dark {
  background: var(--blue-primary);
  color: var(--white);
  border-color: var(--blue-primary);
}
.btn--dark:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  transform: translateY(-2px);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-primary);
  position: relative;
  padding-bottom: 4px;
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--blue-primary);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 400ms var(--ease);
}
.link-arrow:hover::after { transform: scaleX(0.4); }
.link-arrow:hover { color: var(--blue-deep); }
.bg-navy .link-arrow,
.bg-navy-deep .link-arrow { color: var(--white); }
.bg-navy .link-arrow::after,
.bg-navy-deep .link-arrow::after { background: var(--white); }
.bg-navy .link-arrow:hover,
.bg-navy-deep .link-arrow:hover { color: var(--blue-light); }
.bg-navy .link-arrow:hover::after,
.bg-navy-deep .link-arrow:hover::after { background: var(--blue-light); }
/* "Explore the Full Portfolio" takes the steel blue of the "Owned & Managed"
   label above it rather than white, so the section opens and closes on the
   same colour. Hover swaps to white, since blue is now the resting state. */
#portfolio .link-arrow { color: var(--blue-light); }
#portfolio .link-arrow::after { background: var(--blue-light); }
#portfolio .link-arrow:hover { color: var(--white); }
#portfolio .link-arrow:hover::after { background: var(--white); }

/* ============================================================
   HERO — Cinematic system:
   image crossfade w/ Ken Burns → staggered reveal
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: var(--s7);
  color: var(--white);
}

/* -------- Background image slides -------- */
.hero-backgrounds {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1500ms ease-in-out;
  will-change: opacity, transform;
}
.hero-bg.active {
  opacity: 1;
  animation: kenBurns 8000ms ease-out forwards;
}
.hero-bg.exit { opacity: 0; }
@keyframes kenBurns {
  from { transform: scale(1.08); }
  to   { transform: scale(1.0);  }
}

/* -------- Dark overlay -------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(13, 35, 60, 0.42) 0%,
    rgba(13, 35, 60, 0.28) 38%,
    rgba(13, 35, 60, 0.86) 100%
  );
  pointer-events: none;
}

/* -------- Hero content -------- */
.hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  /* Same box as .container, so the headline lines up with the page content
     below it rather than floating at an arbitrary inset. */
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  opacity: 0;
  transition: opacity 500ms ease 200ms;
}
.hero-content.revealed { opacity: 1; }

/* Staggered reveal items inside the hero */
.hero .reveal-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  will-change: opacity, transform;
}
.hero .reveal-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(32px, 4.1vw, 56px);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--white);
  margin: 0 0 16px;
}

.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 0.9vw, 15px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.06em;
  margin: 0 0 30px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* -------- Hero slide arrows -------- */
.hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 250ms var(--ease), border-color 250ms var(--ease);
}
.hero-nav:hover,
.hero-nav:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--white);
}
.hero-nav svg { width: 22px; height: 22px; }
.hero-nav--prev { left: var(--gutter); }
.hero-nav--next { right: var(--gutter); }

/* -------- Hero-scoped buttons -------- */
.hero .btn,
.btn-primary,
.btn-secondary {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 36px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 350ms var(--ease), color 350ms var(--ease),
              border-color 350ms var(--ease), transform 300ms var(--ease);
  display: inline-block;
}
.hero .btn,
.hero .btn-primary,
.hero .btn-secondary {
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 13px 28px;
}
.btn-primary {
  background: var(--blue-primary);
  color: var(--white);
  border-color: var(--blue-primary);
}
.btn-primary:hover {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
  transform: translateY(-2px);
}
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.6);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
  transform: translateY(-2px);
}

/* -------- Stats bar at bottom of hero -------- */
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  background: rgba(13, 35, 60, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(122, 162, 197, 0.25);
}
.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 16px;
  gap: 6px;
  text-align: center;
}
.stat-value {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.stat-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 400;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-plus {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  color: var(--blue-light);
  line-height: 1;
}
.stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}
.stat-divider {
  width: 1px;
  background: rgba(122, 162, 197, 0.2);
  align-self: stretch;
  margin: 14px 0;
}

/* -------- Scroll indicator -------- */
.scroll-indicator {
  position: absolute;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  animation: scrollPulse 2400ms ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}
.scroll-text {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================================
   PAGE HEROES (interior pages)
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 50vh;
  padding: calc(var(--nav-h) + var(--s7)) 0 var(--s7);
  background:
    radial-gradient(ellipse at 70% 30%, rgba(122, 162, 197, 0.25) 0%, transparent 55%),
    var(--gradient-hero);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(255,255,255,0.03) 50%, transparent 50.05%),
    linear-gradient(180deg, transparent 49.95%, rgba(255,255,255,0.03) 50%, transparent 50.05%);
  background-size: 100px 100px;
  z-index: -1;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,35,60,0.35) 0%, rgba(26,90,150,0.0) 100%);
  z-index: -1;
}
/* Portfolio page hero — photo background */
.page-hero--photo {
  background:
    linear-gradient(180deg, rgba(13,35,60,0.68) 0%, rgba(13,35,60,0.80) 100%),
    url("portfolio-hero.jpg") center / cover no-repeat;
}
.page-hero--photo::before,
.page-hero--photo::after { display: none; }

/* Portfolio page hero — no photo. A band of silver at the top, with the logo's
   building shape rising out of the bottom of the section in solid blue. */
.page-hero--silver {
  display: block;
  background: var(--silver-band);
  min-height: 0;
  padding: calc(var(--nav-h) + var(--s4)) 0 0;
}
.page-hero--silver::before,
.page-hero--silver::after { display: none; }
/* The mark's skyline, cut out of the block. Like the logo, the buildings have
   slanted tops rising to a vertical ridge at centre, vertical sides, and thin
   slots down to the horizon between them — not flat steps. Everything below
   the 68px skyline zone is solid, and the padding sets the heading equidistant
   from the horizon line and the bottom of the block. */
.hero-skyline {
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
  padding: calc(68px + var(--s5)) 0 var(--s5);
  clip-path: polygon(
    0 68px,
    6% 68px, 6% 56px, 12% 50px, 12% 68px,
    15% 68px, 15% 41px, 28% 30px, 28% 68px,
    31% 68px, 31% 24px, 52% 0, 52% 68px,
    55% 68px, 55% 12px, 73% 29px, 73% 68px,
    76% 68px, 76% 35px, 87% 42px, 87% 68px,
    100% 68px,
    100% 100%, 0 100%
  );
}
/* The heading is sr-only here, so the subline is the only visible line and
   carries a little more size. Centred copy needs the box centred, not just
   the text — the shared .subline is a block. */
.hero-skyline .subline {
  font-size: clamp(19px, 2vw, 26px);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.hero-skyline .gold-rule { margin-top: 0; }

/* Available page hero — no photo, no half-viewport minimum: a heading and one
   line on the listings' own ground. The shared .page-hero paints white type
   for photo heroes, so the colours are set back to the light-ground palette. */
.page-hero--plain {
  display: block;
  min-height: 0;
  background: var(--off-white);
  color: var(--dark);
  /* No bottom padding: the listings sit on the same ground directly below, and
     the grid brings its own top margin. */
  padding: calc(var(--nav-h) + var(--s6)) 0 0;
}
.page-hero--plain::before,
.page-hero--plain::after { display: none; }
/* Doubled class: `.page-hero h1` and `.page-hero .subline` paint white further
   down the file, and would otherwise win on source order at equal specificity. */
.page-hero.page-hero--plain h1 {
  color: var(--dark);
  /* Section scale, not display scale — it sits in the same register as the
     property names below it. */
  font-size: clamp(32px, 3.4vw, 46px);
}
.page-hero.page-hero--plain .subline {
  color: var(--silver-dark);
  font-size: clamp(18px, 1.8vw, 22px);
  max-width: 720px;
}

/* Available page hero — photo background */
.page-hero--available {
  background:
    linear-gradient(180deg, rgba(13,35,60,0.68) 0%, rgba(13,35,60,0.82) 100%),
    url("available-hero.jpg") center / cover no-repeat;
}

/* =================== PARK DETAIL PAGES =================== */

.park-hero-gallery {
  position: relative;
  /* The frame is a fixed 3/2 and never resizes between photos. Photos fill it
     edge to edge (object-fit: cover), so there are no bands top or bottom;
     off-ratio shots give up a little from the edges. */
  height: min(
    calc((var(--container) - var(--gutter) * 2) / 1.5),
    calc(100vh - var(--nav-h) - 88px)
  );
  min-height: 260px;
  aspect-ratio: 3 / 2;
  width: auto;
  max-width: calc(100% - var(--gutter) * 2);
  /* Clears the fixed nav so the top of the photo isn't hidden behind it. */
  margin: calc(var(--nav-h) + 32px) auto 0;
  overflow: hidden;
  border-radius: 4px;
  background: #111;
}
.park-hero-gallery__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.park-hero-gallery__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
.park-hero-gallery__stage img.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(13,35,60,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.gallery-arrow:hover { background: var(--gold); border-color: var(--gold); }
.gallery-arrow--prev { left: 24px; }
.gallery-arrow--next { right: 24px; }
.gallery-badge {
  position: absolute;
  bottom: 20px;
  right: 24px;
  z-index: 10;
  background: rgba(13,35,60,0.65);
  color: rgba(255,255,255,0.85);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.park-detail {
  padding: 72px 0 80px;
}
.park-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
/* Single content column. Nothing sits beside anything at the top of the page,
   so there is no short element leaving a hole next to a tall one — the map
   that used to cause that now runs full width at the foot of the page. Capped
   well inside the container: the facts and the spec columns want the width,
   but a 1200px measure would be unreadable. */
.park-detail__body {
  /* Full container width, so the hero gallery above, this content, and the
     location strip below all share one pair of edges. Only the running prose
     is capped (see .park-detail__desc) — the facts grid and the spec columns
     want the width and stay readable at it. */
  width: 100%;
}
.park-detail__name {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 6px;
}
.park-detail__location {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 32px;
  display: block;
}
.park-detail__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  margin-bottom: 36px;
  overflow: hidden;
}
.park-detail__spec {
  padding: 16px 20px;
  border-right: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.park-detail__spec:nth-child(even) { border-right: none; }
.park-detail__spec:nth-last-child(-n+2) { border-bottom: none; }
.park-detail__spec dt {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.park-detail__spec dd {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
}
.park-detail__desc {
  font-size: 15px;
  line-height: 1.8;
  color: var(--silver-dark);
  margin-bottom: 32px;
  max-width: 760px;
}
.park-detail__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
/* Closing the content column rather than interrupting it. The ask sits after
   the spec sheet, where a reader who has just checked clear height, power and
   loading is at the decision point — and the intro above reads as one
   uninterrupted block without it. */
.park-detail__actions--end { margin-top: 52px; }
@media (max-width: 860px) {
  .park-detail__actions--end { margin-top: 36px; }
}
/* ------------------------------------------------------------------
   LOCATION STRIP — the map, run the full width of the page at the foot.
   As a boxed panel beside the text it was the shortest thing in a tall
   row and left a dead area under itself on every park page. Wide and
   last, it reads as a deliberate closing element and a map is one of the
   few things that genuinely improves at that width.
   ------------------------------------------------------------------ */
.park-location {
  padding-bottom: 88px;
}
.park-location__head {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: var(--s2);
}
.park-location__frame {
  height: 420px;
  border: 1px solid var(--silver-light);
  overflow: hidden;
  border-radius: 3px;
}
.park-location__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.1) contrast(0.95);
}
@media (max-width: 860px) {
  .park-location { padding-bottom: 56px; }
  .park-location__frame { height: 300px; }
}

.park-detail__map {
  aspect-ratio: 16/10;
  align-self: start;
  border: 1px solid var(--silver-light);
  overflow: hidden;
  border-radius: 3px;
}
.park-detail__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.1) contrast(0.95);
}

@media (max-width: 900px) {
  /* Narrow screens: width is the constraint, so let the ratio drive height. */
  .park-hero-gallery {
    height: auto;
    width: calc(100% - var(--gutter) * 2);
    max-width: none;
  }
}

/* ------------------------------------------------------------------
   OVERVIEW META — the eight headline facts, folded into the top block.
   These were a bordered grid of their own sitting under the intro, which
   put two table-looking grids on the page: this one and the spec sheet
   below it. Stripped of its box and rules and set right under the address,
   the same information reads as part of the overview rather than as a
   second table, leaving the spec sheet as the page's only grid.
   ------------------------------------------------------------------ */
.park-detail__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 32px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin: 0 0 36px;
}
.park-detail__meta .park-detail__spec {
  padding: 0;
  border: 0;
}
@media (max-width: 900px) {
  .park-detail__meta { grid-template-columns: 1fr 1fr; gap: 22px 28px; }
}
@media (max-width: 560px) {
  .park-detail__meta { grid-template-columns: 1fr; gap: 18px; }
}

/* ------------------------------------------------------------------
   SPEC SHEET — the owner's per-park highlights, joined to the block above.
   These used to sit in their own off-white band below the detail section,
   which read as a separate page module rather than as more of the same
   property. Keeping them inside .park-detail on the same ground, divided
   only by a hairline rule, makes the stat block, the description and the
   full spec read as one continuous document. A page can carry more than
   one (Torrance has the park plus 387-389 Maple), so each sheet draws its
   own rule and they stack.
   ------------------------------------------------------------------ */
.park-detail__sheet {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(0,0,0,0.12);
}
.park-detail__sheet-title {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 300;
  color: var(--navy);
  margin-bottom: 6px;
}
.park-detail__sheet-note {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--silver-dark);
  max-width: 760px;
  margin-bottom: 28px;
}
/* Title with no note under it still needs the gap before the columns. */
.park-detail__sheet-title:last-of-type { margin-bottom: 28px; }
.park-detail__sheet-note + .spec-columns { margin-top: 0; }
/* The 36px the stat block carries is spacing between it and the description;
   inside a sheet the dl is the last thing in its column, so it would just
   hang off the bottom. */
.park-detail__sheet .park-detail__specs { margin-bottom: 0; }

/* Site plan drawing under the spec sheet. Shown whole (never cropped) in a
   white frame because the engineer's sheets are black linework on white. */
.park-siteplan__link { display: block; border: 1px solid rgba(0,0,0,0.12); background: #fff; cursor: zoom-in; }
.park-siteplan__link img { display: block; width: 100%; height: auto; }
.park-siteplan__hint { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--silver-dark); margin: 10px 0 0; }

@media (max-width: 860px) {
  .park-detail__sheet { margin-top: 40px; padding-top: 32px; }
  .park-detail__grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery-arrow { width: 38px; height: 38px; font-size: 15px; }
  .gallery-arrow--prev { left: 12px; }
  .gallery-arrow--next { right: 12px; }
}

/* =================== END PARK DETAIL PAGES =================== */

/* =================== PARK SECTIONS =================== */
.park-section {
  padding: 80px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Opening section of a page with no hero: clears the fixed nav on its own. */
.park-section--first { padding-top: calc(var(--nav-h) + var(--s5)); }
/* Offset block behind each gallery photo, thrown outwards toward the page edge
   the photo sits against. Direction and colour both follow the row's layout:
   gallery on the right takes a blue block offset right, and the flipped rows —
   gallery on the left — take a silver one offset left. Since the rows alternate
   down the page, so do the blocks. Drawn as a hard shadow: the stage clips its
   own overflow, so a pseudo-element would be cut off. Scoped to .park-section,
   because property cards reuse .park-gallery__stage for their photo galleries. */
.park-section .park-gallery__stage {
  box-shadow: 24px 24px 0 var(--blue-deep);
}
.park-section .park-section__inner--flip .park-gallery__stage {
  box-shadow: -24px 24px 0 var(--silver-light);
}
.park-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.park-section__info .label {
  display: block;
  margin-bottom: 12px;
}
.park-section__info h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: 16px;
  color: var(--navy);
}
.park-section__info p {
  color: var(--silver-dark);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 400px;
}
.park-section__address {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--silver-dark);
  margin-top: -8px;
  margin-bottom: 20px;
}

/* Gallery */
.park-gallery {
  position: relative;
}
.park-gallery__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  background: #e8e4dc;
}
.park-gallery__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}
.park-gallery__stage img.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.park-gallery__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #999;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.park-gallery__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  justify-content: center;
}
.gallery-btn {
  background: rgba(13,35,60,0.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  backdrop-filter: blur(4px);
}
.gallery-btn:hover { background: var(--blue-primary); border-color: var(--blue-primary); }
.gallery-prev,
.gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }
/* Arrows stay out of the photograph until the mouse is over the gallery.
   Gated on hover capability: a touch device has no hover state, so there the
   arrows stay visible and tappable. Kept in the tab order and revealed on
   keyboard focus rather than removed with visibility/display. */
@media (hover: hover) and (pointer: fine) {
  .park-gallery__stage .gallery-btn {
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms var(--ease), background 0.2s;
  }
  .park-gallery__stage:hover .gallery-btn,
  .park-gallery__stage .gallery-btn:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
}
.gallery-counter {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--silver-dark);
  min-width: 40px;
  text-align: center;
}
.gallery-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (max-width: 768px) {
  /* The offset blocks pull in off the narrower page gutter. */
  .park-section .park-gallery__stage {
    box-shadow: 14px 14px 0 var(--blue-deep);
  }
  .park-section .park-section__inner--flip .park-gallery__stage {
    box-shadow: -14px 14px 0 var(--silver-light);
  }
  .park-section__inner,
  .park-section__inner--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* =================== END PARK SECTIONS =================== */

.page-hero__breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--s4);
}
.page-hero__breadcrumb a:hover { color: var(--blue-light); }
.page-hero h1 {
  font-size: clamp(42px, 6vw, 76px);
  max-width: 1000px;
  color: var(--white);
}
.page-hero .subline { color: rgba(255,255,255,0.75); }

/* ============================================================
   ABOUT STRIP (homepage section 2) — now showcases the logo
   ============================================================ */
.about-strip {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: var(--s7);
  align-items: center;
}
.about-strip__copy h2 { margin-bottom: var(--s3); }
.about-strip__copy p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--dark);
  margin-bottom: var(--s4);
  max-width: 580px;
}

/* Asymmetric 4-tile photo gallery (about strip right column) */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 40px 200px 40px 200px 40px;
  gap: 14px;
  width: 100%;
}
.gallery-grid__tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(13, 46, 84, 0.16);
}
.gallery-grid__tile:nth-child(1) { grid-column: 2 / 3; grid-row: 1 / 3; }
.gallery-grid__tile:nth-child(2) { grid-column: 1 / 2; grid-row: 2 / 4; }
.gallery-grid__tile:nth-child(3) { grid-column: 1 / 2; grid-row: 4 / 6; }
.gallery-grid__tile:nth-child(4) { grid-column: 2 / 3; grid-row: 3 / 5; }
.gallery-grid__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 800ms var(--ease);
}
.gallery-grid__tile:hover img { transform: scale(1.05); }

/* Single photo, shown whole at its own ratio — no crop, no fixed rows. */
.gallery-grid--single { display: block; }
.gallery-grid--single .gallery-grid__tile { grid-area: auto; }
.gallery-grid--single .gallery-grid__tile img { height: auto; }

/* Stagger reveal delays (overrides default .stagger delays for 4 tiles) */
.gallery-grid.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.gallery-grid.stagger > .reveal:nth-child(2) { transition-delay: 200ms; }
.gallery-grid.stagger > .reveal:nth-child(3) { transition-delay: 400ms; }
.gallery-grid.stagger > .reveal:nth-child(4) { transition-delay: 600ms; }

/* Brand card replaces the giant "45" — features the actual logo */
.brand-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--silver-light);
  padding: var(--s6) var(--s5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 12px 40px rgba(13, 46, 84, 0.08);
  overflow: hidden;
}
.brand-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gradient-card);
}
.brand-card__logo {
  width: 280px;
  max-width: 80%;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s4);
}
.brand-card__logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.brand-card__rule {
  width: 60px;
  height: 1px;
  background: var(--blue-light);
  margin: var(--s2) auto var(--s3);
}
.brand-card__years {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(56px, 6vw, 80px);
  font-weight: 300;
  color: var(--blue-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.brand-card__years-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-top: 10px;
}
.brand-card__tag {
  margin-top: var(--s4);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 18px;
  color: var(--silver-dark);
  max-width: 280px;
  line-height: 1.5;
}

/* ============================================================
   SERVICES (homepage section 3)
   ============================================================ */
.services-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: var(--s6);
  gap: var(--s5);
  flex-wrap: wrap;
}
.services-header h2 { max-width: 680px; }
.services-header--stacked {
  display: block;
  max-width: 780px;
}
.services-header__sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin-top: var(--s3);
  max-width: 620px;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}

/* Hover-slider: service names left, clip-path image reveal right */
.hover-slider {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: center;
}
.hover-slider__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hover-slider__row {
  display: flex;
  flex-direction: column;
}
.hover-slider__desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 450ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 350ms ease;
}
.hover-slider__desc > p {
  overflow: hidden;
  min-height: 0;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 500px;
  padding-top: 8px;
}
.hover-slider__row.is-active .hover-slider__desc {
  grid-template-rows: 1fr;
  opacity: 1;
}
.hover-slider__row.is-active .hover-slider__desc > p {
  padding-bottom: 14px;
}
.hover-slider__item {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.008em;
  color: var(--white);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  text-align: left;
  display: inline-flex;
  flex-wrap: wrap;
  position: relative;
}
.hover-slider__char {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.05;
}
.hover-slider__char--space { width: 0.28em; }
.hover-slider__char-top,
.hover-slider__char-bot {
  display: inline-block;
  transition: transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: calc(var(--i, 0) * 25ms);
  will-change: transform;
}
.hover-slider__char-top { opacity: 0.35; }
.hover-slider__char-bot {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transform: translateY(110%);
  color: var(--white);
}
.hover-slider__item.is-active .hover-slider__char-top { transform: translateY(-110%); }
.hover-slider__item.is-active .hover-slider__char-bot { transform: translateY(0); }

.hover-slider__images {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 480px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.hover-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  transition: clip-path 800ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: clip-path;
}
.hover-slider__img.is-active {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.service-card {
  position: relative;
  padding: var(--s5) var(--s3);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 400ms var(--ease), border-color 400ms var(--ease);
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 48px;
  height: 2px;
  background: var(--blue-light);
  transition: width 500ms var(--ease);
}
.service-card:hover::before { width: 100%; }
.service-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(122, 162, 197, 0.4);
}
.service-card__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  color: var(--blue-light);
  margin-bottom: var(--s4);
  display: block;
  font-weight: 400;
}
.service-card h3 {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s3);
  line-height: 1.4;
}
.service-card p {
  color: rgba(255,255,255,0.75);
  font-size: 15px;
  line-height: 1.75;
}

/* ============================================================
   PROPERTY CARDS
   ============================================================ */
.properties-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.properties-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.property-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--silver-light);
  box-shadow: 0 2px 16px rgba(13, 46, 84, 0.06);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.property-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--blue-light);
  transition: width 500ms var(--ease);
  z-index: 2;
}
.property-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(13, 46, 84, 0.16);
  border-color: rgba(41, 118, 184, 0.4);
}
.property-card:hover::before { width: 100%; }
/* Offset block in logo blue, thrown down-left — the opposite way to the park
   cards above it on the homepage, so the two rows mirror each other down the
   page. Both grids carry it: the homepage teaser row and the full listings on
   available.html are the same card, and a visitor clicking through from one to
   the other should not meet a different component. 14px of the var(--s4) gap
   on either grid, so blocks never reach the next card. */
.properties-grid .property-card,
.listings-grid .property-card {
  box-shadow: -14px 14px 0 var(--logo-blue), 0 2px 16px rgba(13, 46, 84, 0.06);
}
.properties-grid .property-card:hover,
.listings-grid .property-card:hover {
  box-shadow: -14px 14px 0 var(--logo-blue), 0 20px 50px rgba(13, 46, 84, 0.16);
}
.property-card__image {
  position: relative;
  /* Matches the listing photography (2000x1297) so a photo card shows the whole
     building with no crop. Applied to every card, photo or gradient placeholder,
     so banners stay the same height across a row. */
  aspect-ratio: 2000 / 1297;
  background:
    linear-gradient(135deg, rgba(26, 90, 150, 0.7) 0%, rgba(41, 118, 184, 0.85) 100%),
    linear-gradient(45deg, #1A5A96 0%, #2976B8 50%, #7AA2C5 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: var(--s3);
}
.property-card__image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 60%, rgba(13, 35, 60, 0.5) 100%),
    repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(255,255,255,0.05) 60px, rgba(255,255,255,0.05) 61px),
    repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(255,255,255,0.05) 60px, rgba(255,255,255,0.05) 61px);
}
.property-card__badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* Photo variant of the card banner — the gradient placeholder gives way to a
   gallery, keeping only the bottom scrim so the badge stays legible. */
.property-card__image--photos { background: none; }
.property-card__image--photos::before {
  background: linear-gradient(180deg, transparent 55%, rgba(13, 35, 60, 0.6) 100%);
  z-index: 4;
  pointer-events: none;
}
.property-card__image--photos .park-gallery__stage {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: 0;
}
.property-card__image--photos .property-card__badge { z-index: 6; }
.property-card__counter {
  position: absolute;
  right: var(--s3);
  bottom: var(--s3);
  z-index: 6;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 6px rgba(13, 35, 60, 0.8);
}
/* All availability badges read as one family — the steel blue accent on white.
   The class names stay distinct so a single status can be restyled later. */
.badge--immediate,
.badge--ready,
.badge--future { background: var(--blue-light); color: var(--white); }
.property-card__body {
  padding: var(--s4) var(--s3);
  flex: 1;
  display: flex;
  flex-direction: column;
}
.property-card__city {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 8px;
}
.property-card__addr {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: var(--s3);
  line-height: 1.2;
}
.property-card__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--silver-light);
  border-bottom: 1px solid var(--silver-light);
  margin-bottom: var(--s3);
}
.property-card__meta dt {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: 4px;
}
.property-card__meta dd {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-primary);
  line-height: 1.2;
}
.property-card__notes {
  font-size: 13px;
  color: var(--silver-dark);
  margin-bottom: var(--s3);
  line-height: 1.6;
}
.property-card__features {
  list-style: none;
  margin-bottom: var(--s4);
}
.property-card__features li {
  font-size: 13px;
  color: var(--dark);
  padding-left: 18px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.5;
}
.property-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 1px;
  background: var(--blue-light);
}
/* Secondary lease scenario (e.g. a post-renovation alternate rate) — set apart
   from the feature list so it reads as an option, not another spec. */
.property-card__note {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--silver-dark);
  border-left: 2px solid var(--blue-light);
  padding-left: 12px;
  margin-bottom: var(--s4);
}
.property-card__note strong { color: var(--blue-primary); font-weight: 600; }
.property-card__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: var(--s2);
}
.property-card__actions .btn { width: 100%; padding: 14px 20px; font-size: 11px; }
.property-card__actions .link-arrow { font-size: 11px; align-self: flex-start; }

/* ============================================================
   PORTFOLIO SHOWCASE (homepage section 3)
   Five park cards on navy, linking through to each park page.
   ============================================================ */
.pf-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: var(--s6);
}
.pf-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--white);
  /* The logo silver, same as the rules and borders used across the site —
     on the navy ground it outlines each card so the three read as separate
     buildings rather than one white block. */
  border: 1px solid var(--logo-silver);
  border-radius: 4px;
  overflow: hidden;
  /* Each park gets its own silver block set behind it, offset down-right —
     the About page's offset-block move, one per card. Drawn as a hard-edged
     shadow rather than a pseudo-element, which the card's `overflow: hidden`
     would clip. 14px of the 28px gap, so the blocks never touch. Uses the
     border silver, matching the blocks on the Why Lyons photo and the park
     galleries; the band silver read as near-white against the navy. */
  box-shadow: 14px 14px 0 var(--silver-light);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.pf-card:hover {
  transform: translateY(-4px);
  /* Offset block stays; the drop shadow layers under it on the lift. */
  box-shadow: 14px 14px 0 var(--silver-light), 0 18px 40px rgba(6, 24, 44, 0.35);
}
.pf-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(13, 35, 60, 0.6);
}
.pf-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 800ms var(--ease);
}
.pf-card:hover .pf-card__media img { transform: scale(1.05); }
/* Empty slot for a park whose photo hasn't been chosen yet. */
.pf-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(122, 162, 197, 0.22);
}
.pf-card__media--empty span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.pf-card__body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.pf-card__city {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.pf-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.2;
}
.pf-card__note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--blue-deep);
}
.pf-card__cue {
  margin-top: auto;
  padding-top: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.pf-card:hover .pf-card__cue { color: var(--logo-blue); }

/* ============================================================
   PROOF BAND (homepage section 6) — reuses the .stat type scale
   ============================================================ */
.proof-band {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--silver-light);
  border-bottom: 1px solid var(--silver-light);
}
.proof-band .stat { padding: 34px 16px; }
.proof-band .stat-number { color: var(--blue-deep); }
.proof-band .stat-plus { color: var(--blue-primary); }
.proof-band .stat-label { color: var(--silver-dark); }
.proof-band .stat-divider { background: var(--silver-light); margin: 22px 0; }

@media (max-width: 980px) {
  .pf-showcase { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 768px) {
  .pf-showcase { grid-template-columns: 1fr; }
  .proof-band { flex-wrap: wrap; }
  .proof-band .stat { flex: 1 1 50%; padding: 24px 12px; }
  .proof-band .stat-divider { display: none; }
}

/* ============================================================
   PULL QUOTE / WHY US (homepage section 5)
   ============================================================ */
/* Split ground: white behind the photo on the left, the section's navy kept
   on the right behind the title and quote. The columns are var(--s7) apart,
   so the 50% line falls in the gutter between them. The section keeps
   .bg-navy-deep for its white type; only the background is overridden. */
.why-band {
  background: linear-gradient(
    to right,
    var(--white) 0 50%,
    var(--blue-deep) 50% 100%
  );
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
}
.why-image {
  position: relative;
  width: 100%;
  /* The photo's own 3:2, so it shows whole. */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
  margin: 0;
  /* Silver block behind the photo, thrown down-left to match the Currently
     Available cards. Deeper than the 14px used on navy and stepped down to the
     border silver — the band silver is too close to white to read here. The
     old drop shadow was tuned for a navy ground; on the white half it is
     dialled back so it reads as depth, not a smudge. */
  box-shadow: -28px 28px 0 var(--silver-light), 0 24px 60px rgba(13, 46, 84, 0.18);
}
.why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.why-content { max-width: 560px; }
.why-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 0 0 var(--s4);
}
.why-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.45;
  color: var(--white);
  position: relative;
  margin: 0;
  padding: 0;
}
.why-quote__text { display: inline; }
.why-quote__text::before {
  content: '\201C';
  color: var(--blue-light);
  font-size: 1.15em;
  font-style: normal;
  margin-right: 0.04em;
  vertical-align: -0.05em;
}
.why-quote__text::after {
  content: '\201D';
  color: var(--blue-light);
  font-size: 1.15em;
  font-style: normal;
  margin-left: 0.04em;
  vertical-align: -0.18em;
}
.why-quote__attr {
  display: block;
  margin-top: var(--s4);
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.why-list { list-style: none; }
.why-list li {
  padding: var(--s3) 0 var(--s3) var(--s3);
  border-left: 2px solid var(--blue-light);
  color: rgba(255,255,255,0.9);
  font-size: 16px;
  line-height: 1.6;
  position: relative;
}

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s3);
}
.team-card {
  position: relative;
  overflow: hidden;
  text-align: left;
}
.team-card__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(160deg, rgba(26, 90, 150, 0.3) 0%, rgba(13, 46, 84, 0.9) 100%),
    linear-gradient(45deg, #7AA2C5 0%, #1A5A96 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.team-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,0.12) 0%, transparent 50%),
    linear-gradient(180deg, transparent 50%, rgba(13,35,60,0.45) 100%);
}
/* Real headshot in place of the gradient placeholder. The gradients above are
   the empty state, so a card that has a photo drops them rather than tinting
   the face. object-position sits above centre: the portraits are framed with
   the head in the upper third, so a centred crop would cut the forehead. */
.team-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}
.team-card__photo:has(img) { background: var(--off-white); }
.team-card__photo:has(img)::before { display: none; }
.team-card__photo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease);
}
.team-card:hover .team-card__photo::after { transform: scaleX(1); }
.team-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 35, 60, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 350ms var(--ease), transform 350ms var(--ease);
  z-index: 2;
}
.team-card:hover .team-card__overlay {
  opacity: 1;
  transform: translateY(0);
}
.team-card__overlay a {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-light);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--blue-light);
}
.team-card__body { padding: var(--s3) 0 0; }
.team-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 6px;
  line-height: 1.2;
}
.team-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-primary);
}
.bg-navy .team-card__name,
.bg-navy-deep .team-card__name { color: var(--white); }
.bg-navy .team-card__title,
.bg-navy-deep .team-card__title { color: var(--blue-light); }

.team-grid--large {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
/* Portrait, not square: the headshots are shot 2:3, and a square frame would
   cut a third of the height out of them. 4/5 keeps the grid tidy while asking
   much less of the crop. */
.team-grid--large .team-card__photo { aspect-ratio: 4 / 5; }
.team-grid--large .team-card__name { font-size: 28px; margin-bottom: 8px; }
/* The bios started as one-line blurbs, where light italic Cormorant read as a
   caption. They are now real multi-sentence paragraphs, and the italic at 300
   weight is hard work across several lines. Cormorant stays — it is what makes
   the card feel like the rest of the site — but upright, a step heavier, and
   larger: the face has a small x-height, so it needs more size than the sans
   would at the same apparent scale. */
.team-grid--large .team-card__bio {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  color: var(--dark);
  margin: var(--s2) 0;
  line-height: 1.65;
}
.team-grid--large .team-card__contact {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--blue-primary);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--silver-light);
}
.team-card__contact a { color: inherit; text-decoration: none; }
.team-card__contact a:hover { text-decoration: underline; }

/* ============================================================
   CTA STRIP
   ============================================================ */
.cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  flex-wrap: wrap;
}
.cta-strip h2 {
  font-size: clamp(32px, 4vw, 52px);
  max-width: 720px;
  line-height: 1.2;
}

/* ============================================================
   ALTERNATING FEATURE ROWS (About page)
   Copy on one side, photo on the other, with a soft blue block set
   behind the photo that bleeds off the page edge. `feature--reverse`
   flips the photo to the left; the parent needs `.feature-band` so the
   bleeding block is clipped instead of causing a horizontal scrollbar.
   ============================================================ */
.feature-band { overflow: hidden; }
.section-pad--tight { padding: var(--s6) 0; }
/* A feature row whose photo sits directly above a coloured band: the offset
   block behind the photo overhangs var(--s5) past the photo's bottom, so the
   row needs that much again below it or the block lands on the band's edge.
   Declared after --tight so it wins. */
.section-pad--clear-block { padding-bottom: calc(var(--s6) + var(--s5)); }
/* Runs straight on from the block above it on the same ground — the spacing is
   left to whatever that block ends with. Declared after --tight so it wins.
   flow-root keeps the first child's top margin inside the section: with no top
   padding it would otherwise collapse through and open a strip of white body
   background between this section and the one above. */
.section-pad--flush-top {
  padding-top: 0;
  display: flow-root;
}
/* Opening section of a page: clears the fixed nav on its own. */
.section-pad--first { padding-top: calc(var(--nav-h) + var(--s6)); }
/* The block below brings its own top padding, so this one ends at zero.
   Declared after --first so the two compose: --first sets the top, this the
   bottom. Order matters — anything that also sets padding-top after this
   point would override the nav clearance and slide the heading under the nav. */
.section-pad--flush-bottom { padding-bottom: 0; }

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  align-items: center;
}
.feature__body h2 { margin-bottom: var(--s3); }
/* Company Overview heading — dialled back from the global h2 size so it sits
   with the rest of the page rather than shouting over it. */
.feature__body h2 { font-size: clamp(32px, 3.2vw, 44px); }
/* Service rows only: blue heading, and a type scale that steps down
   heading -> lede -> body. */
.feature--service .feature__body h2 {
  color: var(--blue-primary);
  font-size: clamp(24px, 2.2vw, 32px);
}
.feature__body p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--dark);
  margin-bottom: var(--s3);
}
.feature__body p:last-child { margin-bottom: 0; }
/* Scoped past `.feature__body p`, which would otherwise win on specificity. */
.feature__body .feature__lede {
  font-weight: 600;
  font-size: 17px;
  color: var(--logo-silver-text);
}
.feature--service .feature__body p {
  font-size: 15px;
  line-height: 1.8;
}
.feature--service .feature__body .feature__lede { font-size: 17px; }

/* "Our History of Value Creation" — the row that opens the About page. The
   copy half sits on white, the photo half keeps the silver band; the split
   lands in the gutter between the two columns. Logo blue heading, black body,
   and the heading is sized as the page's hero rather than a section title. */
.history-band {
  background: linear-gradient(
    to right,
    var(--white) 0 50%,
    var(--silver-band) 50% 100%
  );
}
.history-band .feature__body h2 {
  color: var(--logo-blue);
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.08;
  margin-bottom: var(--s4);
}
.history-band .feature__body p { color: #000; }

.feature__media {
  position: relative;
  isolation: isolate;
}
/* Photos are never cropped: width and height both float, capped by the
   column width and a shared max height, so mixed portrait/landscape stock
   keeps its own aspect ratio without any row running away. Each photo hugs
   the outer edge of its column so the offset block reads as behind it. */
.feature__media img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  margin-left: auto;
  margin-right: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 40px rgba(13, 35, 60, 0.18);
}
.feature--reverse .feature__media img {
  margin-left: 0;
  margin-right: auto;
}
/* The offset block. `right: -100vw` guarantees it reaches the viewport
   edge at any width; .feature-band clips the overflow. */
.feature__media::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--s5);
  bottom: calc(var(--s5) * -1);
  left: 28%;
  right: -100vw;
  background: var(--logo-blue);
}
.feature--reverse .feature__media { order: -1; }
.feature--reverse .feature__media::before {
  left: -100vw;
  right: 28%;
}

@media (max-width: 900px) {
  .feature {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  /* Columns stack, so the left/right split has nothing to line up with —
     the whole band goes white and the copy keeps its ground. */
  .history-band { background: var(--white); }
  /* Photo always below the copy on narrow screens, both orientations. */
  .feature--reverse .feature__media { order: 0; }
  .feature__media::before,
  .feature--reverse .feature__media::before {
    top: var(--s3);
    bottom: calc(var(--s3) * -1);
    left: 20%;
    right: -100vw;
  }
}

/* ============================================================
   STATS ROW (about page)
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-row__item {
  text-align: center;
  padding: var(--s5) var(--s2);
  position: relative;
}
.stats-row__item + .stats-row__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(122, 162, 197, 0.35);
}
.stats-row__num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 400;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stats-row__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-top: var(--s2);
}

/* ============================================================
   SERVICES LIST (about page, 2 columns of bullets)
   ============================================================ */
.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s5);
}
.services-list__item {
  padding: var(--s3) 0 var(--s3) var(--s3);
  border-left: 2px solid var(--blue-light);
  border-bottom: 1px solid var(--silver-light);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--dark);
  letter-spacing: 0.005em;
  transition: padding-left 350ms var(--ease), border-color 350ms var(--ease), color 350ms var(--ease);
}
.services-list__item:hover {
  padding-left: calc(var(--s3) + 8px);
  border-left-color: var(--blue-primary);
  color: var(--blue-primary);
}

/* ============================================================
   PORTFOLIO MARQUEE — infinite auto-scrolling image slider
   ============================================================ */
.portfolio-marquee {
  width: 100%;
  background: var(--off-white);
  padding: var(--s7) 0;
  overflow: hidden;
}
.portfolio-marquee__track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: portfolio-scroll 45s linear infinite;
}
.portfolio-marquee:hover .portfolio-marquee__track {
  animation-play-state: paused;
}
@keyframes portfolio-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 12px)); }
}
.portfolio-marquee__item {
  flex-shrink: 0;
  width: 320px;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 32px rgba(28,43,58,0.16);
  transition: transform 300ms ease, filter 300ms ease;
}
.portfolio-marquee__item:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}
.portfolio-marquee__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 768px) {
  .portfolio-marquee__item {
    width: 200px;
    height: 200px;
  }
}

/* ============================================================
   VALUES (about page)
   ============================================================ */
/* Mission & Values, in two bands. The statement takes a deep blue ground with
   white type — the one full-strength colour on a page that is otherwise white
   rows — and the three value cards and the mission paragraph carry on below it
   on silver. Padded generously enough to read as a band rather than a stripe. */
.values-statement {
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
  padding: var(--s7) 0;
}
.values-statement .label { color: var(--blue-light); }
.values-statement h2 {
  color: var(--white);
  margin: 0 auto;
}
/* Silver picks up at the cards. Its top padding is lighter than a standalone
   section's would be, since the blue band above brings its own. */
.values-band {
  background: var(--silver-band);
  text-align: center;
  padding-top: var(--s7);
}
/* No heading above the grid any more — that lives in the blue band. */
.values-band .values-grid { margin-top: 0; }
.values-band__head {
  max-width: 900px;
  margin: 0 auto;
}
/* The head block now lives only inside the blue statement band, so both lines
   are white on it. (These rules sit after .values-statement and carry the same
   specificity, so they are the ones that decide the colour.) */
.values-band__head .label { color: var(--white); }
.values-band__head h2 {
  margin: 0 auto;
  color: var(--white);
}
.values-band__rule {
  border: 0;
  height: 1px;
  background: rgba(28, 43, 58, 0.22);
  margin: var(--s5) 0 0;
}
.values-band__mission {
  max-width: 900px;
  margin: var(--s6) auto 0;
  font-size: 17px;
  line-height: 1.9;
  color: var(--blue-deep);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
  margin-top: var(--s6);
}
.value-card { padding-top: var(--s3); }
.value-card h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--logo-blue);
  margin-bottom: var(--s2);
}
.value-card p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--blue-deep);
}

/* ============================================================
   VALUES BOARD (homepage section — hoverable image-reveal cards)
   ============================================================ */
.values-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--s6);
}
.values-header .label { margin-bottom: var(--s3); }
.values-header h2 { margin: 0 auto; }
.values-header__sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--silver-dark);
  margin-top: var(--s3);
}

.values-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.values-board__card {
  position: relative;
  overflow: hidden;
  background: var(--blue-darker);
  border-top: 3px solid var(--blue-light);
  padding: var(--s5) var(--s4);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 500ms var(--ease), box-shadow 500ms ease, border-top-color 400ms ease;
  cursor: pointer;
}
.values-board__card:hover { border-top-color: var(--white); }
.values-board__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--value-img);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 900ms var(--ease);
  z-index: 0;
}
.values-board__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 46, 84, 0.05) 0%, rgba(13, 46, 84, 0.45) 45%, rgba(13, 46, 84, 0.92) 100%);
  transition: background 500ms ease;
  z-index: 0;
}
.values-board__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(13, 46, 84, 0.35);
}
.values-board__card:hover::before {
  transform: scale(1.06);
}
.values-board__card:hover::after {
  background: linear-gradient(180deg, rgba(13, 46, 84, 0.35) 0%, rgba(13, 46, 84, 0.78) 45%, rgba(13, 46, 84, 0.96) 100%);
}

.values-board__card > * {
  position: relative;
  z-index: 1;
  transition: color 400ms ease;
}
.values-board__card .values-board__card__title,
.values-board__card .values-board__card__desc {
  transition: color 400ms ease;
}
.values-board__card__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.values-board__card__desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--ease), opacity 400ms ease, margin-top 500ms var(--ease);
  opacity: 0;
}
.values-board__card__desc > span {
  overflow: hidden;
  min-height: 0;
  display: block;
}
.values-board__card:hover .values-board__card__desc {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--s2);
}

/* ============================================================
   NEWS & PRESS — reskinned to match the Recent section directly
   above it: flat photos (no shadow/border/rotate), a left-aligned
   header instead of centered, and neutral dark/gray type in place
   of the old section's brand-blue accents.
   ============================================================ */
.news-header__sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--silver-dark);
  max-width: 640px;
  margin: 0 0 var(--s6);
}

.news-cover {
  position: relative;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.news-cover--floating {
  margin-top: var(--s4);
  max-width: 88%;
}
.news-cover img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--off-white);
  transition: transform 500ms var(--ease);
}
.news-cover:hover img { transform: scale(1.04); }
.news-cover figcaption {
  padding-top: var(--s2);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-dark);
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s6);
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
.news-col {
  display: flex;
  flex-direction: column;
}
.news-col > .news-cover { margin-bottom: var(--s4); }
.news-col > .news-subhead { margin-top: 0; }
.news-subhead {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 400;
  letter-spacing: -0.005em;
  margin: 0 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--silver-light);
}
.news-list,
.news-press ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-list li {
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--silver-light);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.news-list li:last-child { border-bottom: 0; }
.news-list li strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  color: var(--dark);
  line-height: 1.2;
}
.news-list li span {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--silver-dark);
}

.news-press__year {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 300;
  color: var(--dark);
  margin: var(--s4) 0 var(--s2);
  letter-spacing: 0.02em;
}
.news-press__year:first-child { margin-top: 0; }
.news-press ul {
  margin: 0 0 var(--s2);
}
.news-press li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--dark);
  border-bottom: 1px solid var(--silver-light);
}
.news-press li:last-child { border-bottom: 0; }
.news-press li strong {
  color: var(--dark);
  font-weight: 500;
  transition: color 250ms ease;
}
.news-press li a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 12px 0;
  transition: color 250ms ease, padding-left 280ms var(--ease);
  position: relative;
}
.news-press li a::after {
  content: '↗';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--silver-dark);
  opacity: 0;
  transition: opacity 250ms ease, transform 280ms var(--ease);
}
.news-press li a:hover { padding-left: 8px; }
.news-press li a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

/* ============================================================
   AVAILABLE PAGE — Filter bar
   ============================================================ */
.filter-bar {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr auto;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--white);
  border: 1px solid var(--silver-light);
  align-items: end;
}
.filter-field { display: flex; flex-direction: column; gap: 8px; }
.filter-field label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dark);
}
.filter-field select,
.filter-field input {
  padding: 12px 14px;
  border: 1px solid var(--silver-light);
  background: var(--white);
  color: var(--dark);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-color 250ms ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1L6 6L11 1' stroke='%232976B8' stroke-width='1.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.filter-field input { background-image: none; padding-right: 14px; }
.filter-field select:focus,
.filter-field input:focus { outline: none; border-color: var(--blue-primary); }
.filter-bar__clear {
  padding: 12px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dark);
  border: 1px solid var(--silver-light);
  background: transparent;
  transition: color 250ms ease, border-color 250ms ease;
}
.filter-bar__clear:hover { color: var(--blue-primary); border-color: var(--blue-primary); }

.listings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin-top: var(--s5);
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
/* Contact page: two panels side by side, each running full-bleed to its own
   page edge and clearing the fixed nav itself — there is no page hero. The
   blue panel carries the heading and every way to reach the office; the white
   one carries the form. Content is unchanged from the old two-column layout;
   only the container and the colours on the blue side are new. */
.contact-split {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: stretch;
}
.contact-split__panel {
  background: var(--blue-deep);
  color: var(--white);
  padding: calc(var(--nav-h) + var(--s6)) clamp(24px, 4vw, 64px) var(--s7) clamp(24px, 6vw, 96px);
}
.contact-split__form {
  background: var(--white);
  padding: calc(var(--nav-h) + var(--s6)) clamp(24px, 6vw, 96px) var(--s7) clamp(24px, 4vw, 64px);
  /* The office panel beside it is the taller of the two, so the form centres in
     whatever height that sets rather than stacking all the slack under the
     button. Panels still stretch to equal height. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-split__inner { max-width: 520px; }
.contact-split__form .contact-split__inner { max-width: 660px; }
.contact-split h1 {
  color: var(--white);
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.15;
  margin: 0;
}
.contact-split__rule {
  display: block;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
  margin: var(--s4) 0 var(--s5);
}
/* The blocks keep their structure; only their colours change for the blue. */
.contact-split .contact-block__label { color: var(--blue-light); }
.contact-split .contact-block p,
.contact-split .contact-block a { color: rgba(255, 255, 255, 0.85); }
.contact-split .contact-block a:hover { color: var(--white); }
.contact-split .contact-block strong { color: var(--white); }
.contact-split .contact-social a {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.4);
}
.contact-split .contact-social a:hover {
  background: var(--white);
  color: var(--blue-deep);
  border-color: var(--white);
}
/* Shallower than the default 16/10: the map is what makes this panel the taller
   of the two, and every pixel of its height is dead white space opposite. */
.contact-split .contact-map {
  border-color: rgba(255, 255, 255, 0.25);
  aspect-ratio: 16 / 9;
}
/* The remaining difference is spent on the form rather than left at the end:
   wider row gaps and a taller message box. */
.contact-split .form__row {
  gap: var(--s4);
  margin-bottom: var(--s4);
}
.contact-split .form__group textarea { min-height: 190px; }

/* Form intro — sits above the fields on the white panel. */
.form__intro { margin-bottom: var(--s5); }
.form__intro h2 {
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  margin-bottom: var(--s2);
}
.form__intro p {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--silver-dark);
}
.form__required {
  margin-top: var(--s2);
  font-size: 12px;
  font-style: italic;
}
/* Name field: one label over a First / Last pair, each captioned underneath. */
.form__group-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.form__group-label .req { color: var(--blue-primary); }
.form__name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
}
.form__name-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form__sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: none;
  color: var(--silver-dark);
}
/* The form sits directly on the white panel — it is no longer a card on a
   tinted section, so the frame comes off. */
.contact-split .form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
  .contact-split__panel {
    padding: calc(var(--nav-h) + var(--s5)) var(--gutter) var(--s6);
  }
  .contact-split__form { padding: var(--s6) var(--gutter); }
  .contact-split__inner,
  .contact-split__form .contact-split__inner { max-width: none; }
}

.contact-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: var(--s7);
}
.contact-info h2 { margin-bottom: var(--s3); }
.contact-block { margin-bottom: var(--s4); }
.contact-block__label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 8px;
}
.contact-block p, .contact-block a {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark);
}
.contact-block a:hover { color: var(--blue-primary); }
.contact-block strong { font-weight: 500; color: var(--blue-deep); }
.contact-social {
  display: flex;
  gap: var(--s3);
  margin-top: var(--s2);
}
.contact-social a {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-primary);
  border: 1px solid var(--blue-light);
  transition: color 250ms ease, border-color 250ms ease, background 250ms ease;
}
.contact-social a:hover {
  color: var(--white);
  background: var(--blue-primary);
  border-color: var(--blue-primary);
}
.contact-social svg { width: 15px; height: 15px; }
.contact-map {
  margin-top: var(--s4);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--silver-light);
  overflow: hidden;
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.1) contrast(0.95); }

/* Form */
.form {
  background: var(--white);
  padding: var(--s5);
  border: 1px solid var(--silver-light);
  box-shadow: 0 4px 20px rgba(13, 46, 84, 0.05);
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.form__group { display: flex; flex-direction: column; gap: 8px; }
.form__group--full { grid-column: 1 / -1; }
.form__group label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.form__group label .req { color: var(--blue-primary); }
.form__group input,
.form__group select,
.form__group textarea {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--silver-light);
  color: var(--dark);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: border-color 250ms ease, box-shadow 250ms ease;
}
.form__group input::placeholder,
.form__group textarea::placeholder {
  color: var(--silver);
  font-weight: 300;
  font-style: italic;
}
.form__group input:focus,
.form__group select:focus,
.form__group textarea:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: inset 0 -1px 0 var(--blue-primary);
}
.form__group textarea {
  min-height: 160px;
  resize: vertical;
}
.form__submit {
  width: 100%;
  padding: 20px;
  margin-top: var(--s2);
  background: var(--blue-primary);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--blue-primary);
  cursor: pointer;
  transition: background 350ms var(--ease), transform 250ms var(--ease), border-color 350ms var(--ease);
}
.form__submit:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  transform: translateY(-2px);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--blue-deep);
  color: var(--white);
  padding: var(--s7) 0 var(--s3);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid rgba(122, 162, 197, 0.3);
}
.footer__col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-bottom: var(--s3);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--s3);
}
.footer__brand-mark {
  height: 150px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.footer__brand-mark img {
  height: 100%;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.footer__brand-text { display: none; }
.footer__brand-text-unused {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
}
.footer__brand-text small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--blue-light);
  margin-top: 4px;
}
.footer__tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: rgba(255,255,255,0.8);
  max-width: 320px;
  line-height: 1.5;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 10px; }
.footer__col a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  transition: color 250ms ease;
}
.footer__col a:hover { color: var(--blue-light); }
.footer__col p {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}
.footer__bottom {
  padding-top: var(--s3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.footer__bottom p {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
}
.footer__bottom a:hover { color: var(--blue-light); }
.footer__social {
  display: flex;
  gap: var(--s3);
}
.footer__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.8);
  transition: color 250ms ease, border-color 250ms ease, background 250ms ease;
}
.footer__social a:hover {
  color: var(--white);
  background: var(--blue-primary);
  border-color: var(--blue-primary);
}
.footer__social svg { width: 14px; height: 14px; }

/* ============================================================
   MEDIA PAGE — park walkthroughs, testimonials, podcast
   ============================================================ */
/* .section-pad--first already exists site-wide (defined near .section-pad
   utilities) and clears the fixed nav for a page's opening section — reused
   as-is here, not redefined. */

/* -------- Recent (Gatopardo-style news feed) -------- */
.recent-hr {
  border: 0;
  height: 1px;
  background: var(--silver-light);
  margin: 0 0 var(--s6);
}
.recent-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: var(--s2);
}
.recent-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s6);
  align-items: stretch;
  padding-bottom: var(--s6);
  margin-bottom: var(--s6);
  border-bottom: 1px solid var(--silver-light);
}
.recent-featured__media {
  overflow: hidden;
  background: var(--off-white);
}
.recent-featured__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.recent-featured__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recent-featured__title {
  font-size: clamp(32px, 3.6vw, 46px);
  font-weight: 500;
  margin-bottom: var(--s3);
}
.recent-featured__rule {
  display: block;
  width: 40px;
  height: 3px;
  background: var(--dark);
  margin-bottom: var(--s3);
}
.recent-featured__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.75;
  color: var(--silver-dark);
  max-width: 46ch;
  margin-bottom: var(--s3);
}
.recent-featured__byline {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dark);
}
.recent-nav {
  display: flex;
  gap: var(--s2);
  justify-content: flex-end;
  margin-top: var(--s4);
}
.recent-nav button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--silver-light);
  border-radius: 50%;
  color: var(--dark);
  transition: border-color 250ms ease, color 250ms ease;
}
.recent-nav button:hover { border-color: var(--dark); }
.recent-nav svg { width: 16px; height: 16px; }
.recent-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
}
.recent-card { display: block; }
.recent-card__media {
  overflow: hidden;
  margin-bottom: var(--s3);
  background: var(--off-white);
}
.recent-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 500ms var(--ease);
}
.recent-card:hover .recent-card__media img { transform: scale(1.04); }
.recent-card__title {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: var(--s2);
}
.recent-card__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--silver-dark);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 900px) {
  .recent-featured { grid-template-columns: 1fr; }
  .recent-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .recent-grid { grid-template-columns: 1fr; }
}

/* Pinterest-style photo/video wall — CSS multi-column masonry. Each tile's
   own height comes from its content (a photo or video's natural aspect
   ratio, or a placeholder's modifier height), so the wall packs tightly with
   a mixed rhythm instead of forcing one fixed tile shape. */
.our-parks-masonry {
  columns: 4;
  column-gap: 6px;
  width: 100%;
  margin-inline: auto;
}
.our-parks-tile {
  position: relative;
  display: block;
  break-inside: avoid;
  margin-bottom: 6px;
  overflow: hidden;
  background: #10233a;
  /* Keeps each tile's box fixed while a video inside it plays, so the
     column balancer never re-flows the wall on hover. */
  contain: layout paint;
  -webkit-column-break-inside: avoid;
}
video.our-parks-tile__media {
  /* Reserve the 9:16 frame up front; the file's real size never changes it. */
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #10233a;
}
.our-parks-tile__media,
.our-parks-tile img {
  display: block;
  width: 100%;
  height: auto;
}
.our-parks-tile__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
}
.our-parks-tile__placeholder svg { width: 30px; height: 30px; }
/* Varied heights so placeholder tiles (no natural image height yet) still
   contribute to the masonry's mixed rhythm rather than reading as a grid. */
.our-parks-tile--sm .our-parks-tile__placeholder { height: 220px; }
.our-parks-tile--md .our-parks-tile__placeholder { height: 300px; }
.our-parks-tile--lg .our-parks-tile__placeholder { height: 380px; }
.our-parks-tile__hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  padding: var(--s3);
  background: linear-gradient(180deg, rgba(13, 35, 60, 0.75) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.our-parks-tile__hover span {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--white);
}
@media (hover: hover) and (pointer: fine) {
  .our-parks-tile:hover .our-parks-tile__hover,
  .our-parks-tile:focus-within .our-parks-tile__hover { opacity: 1; }
}
@media (hover: none) {
  .our-parks-tile__hover {
    opacity: 1;
    background: linear-gradient(180deg, rgba(13, 35, 60, 0.65) 0%, transparent 55%);
  }
}
.media-section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s5);
}

/* Full-width heading — the cluster below needs the whole section to alternate
   sides in, so the intro no longer shares a column with the cards. */
.testimonial-intro { max-width: 480px; margin-bottom: var(--s6); }
.testimonial-intro p {
  margin-top: var(--s3);
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.75;
}

.testimonial-cluster {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* Video-testimonial card — white card on the navy section, split into a text
   half (quote, name/title, watch link) and a media half (tinted photo stand-in
   with a play button). */
.testimonial-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--off-white);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.testimonial-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 20px 50px rgba(13, 35, 60, 0.35);
}
/* Left / right / left cluster — cards sit on alternating sides of the full
   section width and overlap slightly in the middle, reading as a scattered
   group instead of a stacked list. Scoped to where the card's own internal
   two-column layout is active; below that the 768px breakpoint stacks
   text/media and a tilted, overlapping card would just look broken on a
   phone-width column. */
@media (min-width: 769px) {
  .testimonial-card:nth-child(1) {
    align-self: flex-start;
    width: 64%;
    transform: rotate(-1deg);
    z-index: 1;
  }
  .testimonial-card:nth-child(2) {
    align-self: flex-end;
    width: 64%;
    margin-top: -56px;
    grid-template-columns: 1fr 1.15fr;
    transform: rotate(1.2deg);
    z-index: 2;
  }
  .testimonial-card:nth-child(2) .testimonial-card__media { order: -1; }
  .testimonial-card:nth-child(3) {
    align-self: flex-start;
    width: 58%;
    margin-top: -40px;
    margin-left: 6%;
    transform: rotate(-0.8deg);
    z-index: 3;
  }
  .testimonial-card:hover { transform: translateY(-4px) rotate(0deg) scale(1.02); z-index: 10; }
}
.testimonial-card__text {
  padding: var(--s5) var(--s4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s3);
}
.testimonial-card__mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: var(--blue-light);
}
.testimonial-card__quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.3;
  color: var(--dark);
}
.testimonial-card__attr { display: flex; flex-direction: column; gap: 3px; }
.testimonial-card__name {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark);
}
.testimonial-card__role {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--silver-dark);
}
.testimonial-card__watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-primary);
  transition: color 250ms ease, gap 250ms ease;
}
.testimonial-card__watch:hover { color: var(--blue-deep); gap: 12px; }
.testimonial-card__media {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial-card:nth-child(1) .testimonial-card__media { background: linear-gradient(160deg, #2976B8 0%, #1A5A96 100%); }
.testimonial-card:nth-child(2) .testimonial-card__media { background: linear-gradient(200deg, #7AA2C5 0%, #2976B8 100%); }
.testimonial-card:nth-child(3) .testimonial-card__media { background: linear-gradient(160deg, #1A5A96 0%, #0D2E54 100%); }
.testimonial-card__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--blue-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(13, 35, 60, 0.3);
  transition: transform 250ms ease, background 250ms ease;
}
.testimonial-card__play svg { width: 20px; height: 20px; margin-left: 2px; }
.testimonial-card:hover .testimonial-card__play { transform: scale(1.08); background: var(--white); }

.podcast-intro {
  max-width: 640px;
  margin-top: var(--s3);
  color: var(--silver-dark);
}

/* -------- Podcast slider — horizontal scroll-snap row, one card per
   episode, arrow buttons either side and dot pagination underneath. -------- */
.podcast-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
.podcast-slider__track {
  display: flex;
  gap: var(--s4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 8px;
}
.podcast-slider__track::-webkit-scrollbar { display: none; }
.podcast-card {
  flex: 0 0 clamp(240px, 28vw, 340px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--silver-light);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 2px 16px rgba(13, 46, 84, 0.06);
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}
.podcast-card:hover { box-shadow: 0 20px 40px rgba(13, 46, 84, 0.14); transform: translateY(-2px); }
.podcast-card__art {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--gradient-card);
  display: flex;
  align-items: center;
  justify-content: center;
}
.podcast-card__art svg { width: 40px; height: 40px; color: rgba(255, 255, 255, 0.65); }
.podcast-card__body { padding: var(--s3); }
.podcast-card__body h3 { font-size: 21px; line-height: 1.3; margin-bottom: var(--s2); }
.podcast-card__meta { display: flex; flex-direction: column; gap: 4px; }
.podcast-card__ep {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--silver-dark);
}
.podcast-card__source {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--blue-primary);
}
.podcast-slider__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s4);
}
.podcast-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--silver-light);
  padding: 0;
  transition: background 250ms ease, transform 250ms ease;
}
.podcast-slider__dot.is-active { background: var(--blue-primary); transform: scale(1.25); }

/* ============================================================
   SCROLL REVEAL ANIMATION
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger > .reveal:nth-child(6) { transition-delay: 400ms; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1199px) {
  :root { --gutter: 28px; --s8: 96px; --s7: 72px; }
  .our-parks-masonry { columns: 3; }
  .services-grid,
  .properties-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid--large { grid-template-columns: repeat(2, 1fr); }
  .values-board { grid-template-columns: repeat(2, 1fr); }
  .news-grid { max-width: 100%; }
  .listings-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar__clear { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .about-strip,
  .contact-grid,
  .why-grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
  .testimonial-intro { max-width: none; }
  /* Stacked: the title and quote now run the full width, so the white half
     would sit under white type. Back to full navy. */
  .why-band { background: var(--blue-deep); }
  .brand-card { padding: var(--s5) var(--s4); }
  .gallery-grid:not(.gallery-grid--single) {
    grid-template-rows: 30px 160px 30px 160px 30px;
    gap: 12px;
  }
  .hover-slider {
    grid-template-columns: 1fr;
    gap: var(--s4);
  }
  .hover-slider__images { aspect-ratio: 16 / 10; }
  .services-list,
  .values-grid,
  .values-board,
  .news-grid,
  .form__row { grid-template-columns: 1fr; }
  /* Narrow screens: the gutter drops to 28px, so pull the block in off the
     page edge. */
  .why-image {
    box-shadow: -16px 16px 0 var(--silver-light), 0 24px 60px rgba(13, 46, 84, 0.18);
  }
  .news-cover img { aspect-ratio: 4 / 3; }
  .news-cover--floating { transform: none; max-width: 100%; }
  .news-covers .news-cover:nth-child(1),
  .news-covers .news-cover:nth-child(2),
  .news-cover--floating {
    transform: none;
    max-width: 100%;
    margin-top: 0;
  }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --nav-h: 96px; --gutter: 20px; --s8: 72px; --s7: 56px; --s6: 48px; }
  .our-parks-masonry { columns: 2; }
  /* Shallower skyline on a narrow screen, so the shape does not eat the page. */
  .hero-skyline {
    padding: calc(46px + var(--s4)) 0 var(--s4);
    clip-path: polygon(
      0 46px,
      6% 46px, 6% 38px, 12% 34px, 12% 46px,
      15% 46px, 15% 28px, 28% 20px, 28% 46px,
      31% 46px, 31% 16px, 52% 0, 52% 46px,
      55% 46px, 55% 8px, 73% 20px, 73% 46px,
      76% 46px, 76% 24px, 87% 28px, 87% 46px,
      100% 46px,
      100% 100%, 0 100%
    );
  }
  /* Link hiding now happens at 900px (see the nav block above); these stay so
     the rule holds if that block is ever edited. */
  .nav__links, .nav__phone { display: none; }
  .nav__burger { display: block; }
  /* 56px was tuned for the old wide logo, which carried its wordmark across
     the full width. The current mark stacks buildings over "LYONS & O'BRIEN
     / R.E." in a square, so the same height renders the wordmark at a few
     pixels tall. 60px keeps it legible inside the 96px nav. */
  .nav__logo-mark { height: 60px; }

  .hero { min-height: 600px; height: 100vh; padding-bottom: var(--s5); }
  /* The headline carries a hard <br>, which puts "Commercial Real Estate
     Partner" on one unbreakable line wider than a phone. .hero-content is a
     flex item, so its default min-width:auto refused to shrink below that
     line — stretching the whole block past the viewport, cutting off the
     headline and dragging the CTAs and the burger off-screen with it. Let the
     line wrap, and stop the item growing past its container. */
  .hero-headline br { display: none; }
  .hero-content { min-width: 0; max-width: 100%; }
  .hero-nav { width: 44px; height: 44px; }
  .hero-nav svg { width: 16px; height: 16px; }
  .hero-headline { font-size: clamp(27px, 7vw, 36px); }
  .hero-sub { font-size: 13px; margin-bottom: 24px; }
  .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero .btn,
  .btn-primary,
  .btn-secondary { width: 100%; padding: 15px 24px; }
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .stat-divider { display: none; }
  .stat { padding: 14px 10px; gap: 4px; }
  .stat-number { font-size: 24px; }
  .stat-plus { font-size: 18px; }
  .stat-label { font-size: 8px; letter-spacing: 0.18em; }
  .scroll-indicator { display: none; }

  .services-grid,
  .properties-grid,
  .team-grid,
  .team-grid--large,
  .stats-row,
  .listings-grid { grid-template-columns: 1fr; }
  .testimonial-card { grid-template-columns: 1fr; }
  .testimonial-card__media { min-height: 180px; order: -1; }

  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .stats-row__item:nth-child(2)::before { display: none; }
  .stats-row__item:nth-child(3)::before { display: none; }

  .services-header,
  .properties-header,
  .cta-strip { flex-direction: column; align-items: flex-start; }

  .footer__grid { grid-template-columns: 1fr; gap: var(--s4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  .filter-bar { grid-template-columns: 1fr; }
}

/* ============================================================
   SPEC ROWS — one-column variant of .park-detail__specs
   The base component is a 2-up grid sized for short values ("Class A
   Industrial"). Building specs run long — a reinforced slab spec names its
   thickness, its rebar size and its spacing — and get squeezed into a
   half-width cell, so this variant gives each spec its own row with the label
   left and the value right. Used by the Why page's construction and
   tenant-tenure lists.
   ============================================================ */
.park-detail__specs--rows { grid-template-columns: 1fr; }
/* Puts back the borders the 2-up base drops: nth-child(even) has no right
   border and nth-last-child(-n+2) has no bottom one. In a single column every
   row needs its bottom rule back and none of them need a right rule. Equal
   specificity to those rules, so these win on source order. */
.park-detail__specs--rows .park-detail__spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  border-right: none;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
.park-detail__specs--rows .park-detail__spec:last-child { border-bottom: none; }
.park-detail__specs--rows dt { margin-bottom: 0; flex: 0 0 auto; }
.park-detail__specs--rows dd { text-align: right; }

/* Two columns of specs side by side (1986 build vs. 1999–2011 build). Falls to
   one column on the same 900px step the rest of the site's two-ups use. */
.spec-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s5);
  align-items: start;
}
.spec-columns__head {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: var(--s2);
}

/* The five-city list is navigation, so it is a real <ul>. .services-list was
   written for a div and never zeroes the marker. */
.services-list { list-style: none; padding: 0; margin: 0; }

/* Bulleted copy on a light ground — the counterpart to .why-list, which only
   works on navy. Same border-left rule the rest of the site uses to mark a
   list, so these read as bullets without introducing a disc marker that
   appears nowhere else. */
.body-list { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.body-list li {
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-left: 2px solid var(--blue-light);
  color: var(--dark);
  font-size: 16px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .spec-columns { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Label over value: at this width the right-aligned column has nowhere left
     to go, and a long spec would wrap to two ragged lines against the gutter. */
  .park-detail__specs--rows .park-detail__spec { display: block; }
  .park-detail__specs--rows dt { margin-bottom: 4px; }
  .park-detail__specs--rows dd { text-align: left; }
}


/* ============================================================
   HISTORY TIMELINE (homepage) — horizontal, scrolls left to right
   ============================================================ */
.timeline { --tl-w: 170px; padding: var(--s5) 0 var(--s4); overflow-x: clip; }
.timeline__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
  margin-left: calc(50% - 50vw);
  padding-left: clamp(24px, 4vw, 64px);
}
.timeline__head h2 { font-size: clamp(32px, 4vw, 44px); }
.timeline__head .label { margin-bottom: var(--s2); }
.timeline__viewport { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); }
.timeline__track {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Room for the photo shadows, which overflow clips otherwise */
  padding: 16px 24px 28px clamp(24px, 4vw, 64px);
  margin: -16px 0 -20px 0;
  scroll-padding-left: clamp(24px, 4vw, 64px);
    outline-offset: 6px;
}
.timeline__track::-webkit-scrollbar { display: none; }
.timeline__list {
  list-style: none;
  /* One shared set of rows: the line sits at the same height for every event,
     and the section is only as tall as the tallest event above + below it. */
  display: grid;
  grid-template-rows: auto 15px auto;
  grid-auto-flow: column;
  grid-auto-columns: var(--tl-w);
  column-gap: var(--s3);
  width: max-content;
  position: relative;
}
.timeline__item {
  position: relative;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  scroll-snap-align: start;
}
.timeline__dot {
  grid-row: 2;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--blue-primary);
  position: relative;
  z-index: 1;
  transition: background 300ms var(--ease);
}
/* The line, drawn per event so it runs unbroken through the whole row */
.timeline__dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 15px;
  width: calc(var(--tl-w) + var(--s3) - 15px);
  height: 1px;
  margin-top: -1px;
  background: var(--silver-light);
  z-index: -1;
}
.timeline__item:last-child .timeline__dot::after { width: 100px; }
.timeline__item:hover .timeline__dot { background: var(--blue-primary); }
.timeline__body { position: relative; }
.timeline__item--up .timeline__body { grid-row: 1; align-self: end; padding-bottom: var(--s3); }
.timeline__item--down .timeline__body { grid-row: 3; align-self: start; padding-top: var(--s3); }
/* Stem joining the event to its dot */
.timeline__body::after {
  content: "";
  position: absolute;
  left: 7px;
  width: 1px;
  height: var(--s3);
  background: var(--blue-light);
}
.timeline__item--up .timeline__body::after { bottom: 0; }
.timeline__item--down .timeline__body::after { top: 0; }
.timeline__date {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--blue-primary);
  margin-bottom: var(--s1);
}
.timeline__title {
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: var(--s1);
  overflow-wrap: anywhere;
}
.timeline__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--silver-dark);
  margin-bottom: var(--s1);
}
/* Shown whole at their own ratio — never cropped or letterboxed. */
.timeline__photo {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(13, 46, 84, 0.18);
}
.timeline__photo--logo {
  width: 60px;
  border-radius: 0;
  box-shadow: none;
}
/* Lyons & Lyons Properties wordmark — wide, so it gets more width than the marks. */
.timeline__photo--lyons {
  width: 96px;
  margin-bottom: var(--s1);
}
/* Near-square mark, so a width that keeps its height in line with the other logos. */
.timeline__photo--rebrand {
  width: 80px;
  margin-bottom: var(--s1);
}
/* The Fu-Lyons logo is a photo of the sign on white; multiply drops the white. */
.timeline__photo--fu {
  width: 40px;
  mix-blend-mode: multiply;
  margin-bottom: var(--s1);
}

@media (max-width: 900px) {
  .timeline__head { margin-bottom: var(--s4); flex-wrap: wrap; align-items: flex-start; gap: var(--s2); }
  .timeline { --tl-w: 160px; padding-top: var(--s4); }
}

/* ============================================================
   COLIN'S CORNER (media page): gallery / podcast / missives
   ============================================================ */
.corner-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s4);
  margin: var(--s6) 0 var(--s5);
}
.corner-intro:first-child, .properties-header + .corner-intro { margin-top: var(--s5); }
.corner-intro__num {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 200;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1px var(--corner-num, var(--blue-darker));
  opacity: 0.5;
  flex: 0 0 100%;   /* number sits above the title so the title lines up with the content's left edge */
  margin-bottom: var(--s2);
}
.corner-intro__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 300; margin: 0 0 6px; }
.corner-intro__text { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; max-width: 480px; margin: 0; opacity: 0.75; }
.corner-intro .corner-pending { margin: 0 0 6px 0; }
.bg-navy-deep .corner-intro { color: #fff; --corner-num: #fff; }
.corner-pending {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.7;
}
.corner-podcast .corner-intro, .corner-missives .corner-intro { margin-top: 0; color: var(--blue-darker); }

/* Podcast: one big featured episode beside a numbered episode list */
.corner-podcast__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s5); align-items: stretch; }
.corner-podcast__feature { background: var(--white); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 16px rgba(13,46,84,0.08); display: flex; flex-direction: column; }
.corner-podcast__art { position: relative; flex: 1; min-height: 260px; background: var(--gradient-card); display: flex; align-items: center; justify-content: center; }
.corner-podcast__art svg { width: 72px; height: 72px; color: rgba(255,255,255,0.8); }
.corner-podcast__badge { position: absolute; top: 16px; left: 16px; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,0.6); padding: 5px 10px; border-radius: 999px; }
.corner-podcast__body { padding: var(--s3) var(--s4) var(--s4); }
.corner-podcast__ep { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--blue-primary); font-weight: 500; }
.corner-podcast__body h4 { font-size: 26px; font-weight: 300; margin: 6px 0; color: var(--blue-darker); }
.corner-podcast__body p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--silver-dark); margin: 0; }
.corner-podcast__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; }
.corner-podcast__row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid rgba(13,46,84,0.15); transition: padding-left 300ms var(--ease); }
.corner-podcast__row:last-child { border-bottom: 1px solid rgba(13,46,84,0.15); }
.corner-podcast__row:hover { padding-left: 12px; }
.corner-podcast__n { font-size: 2rem; font-weight: 200; color: var(--blue-primary); min-width: 2.4ch; }
.corner-podcast__row div { flex: 1; }
.corner-podcast__row h4 { font-size: 19px; font-weight: 300; margin: 0 0 2px; color: var(--blue-darker); }
.corner-podcast__row span { font-family: 'Inter', sans-serif; font-size: 12px; color: var(--silver-dark); }
.corner-podcast__row svg { width: 28px; height: 28px; color: var(--blue-primary); flex: none; }

/* Missives: a narrow, centered reading column */
.corner-intro--center { justify-content: flex-start; text-align: left; }
.corner-intro--center .corner-pending { margin-left: 0; }
.missive, .missive-archive { max-width: 680px; margin-left: 0; margin-right: auto; }
.missive { padding: var(--s5) 0; border-top: 1px solid rgba(13,46,84,0.15); }
.missive__date, .missive-archive__item time { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver-dark); }
.missive__title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 300; margin: 8px 0 var(--s3); color: var(--blue-darker); }
.missive p { font-size: 1.08rem; line-height: 1.8; margin: 0 0 var(--s2); }
.missive__sign { font-style: italic; color: var(--silver-dark); }
.missive-archive__head { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver-dark); font-weight: 500; margin: 0 0 var(--s2); }
.missive-archive__item { border-top: 1px solid rgba(13,46,84,0.15); }
.missive-archive__item:last-child { border-bottom: 1px solid rgba(13,46,84,0.15); }
.missive-archive__item summary { display: flex; gap: var(--s3); align-items: baseline; padding: var(--s3) 0; cursor: pointer; list-style: none; }
.missive-archive__item summary::-webkit-details-marker { display: none; }
.missive-archive__item summary span { font-size: 1.15rem; font-weight: 300; color: var(--blue-darker); }
.missive-archive__item p { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--silver-dark); margin: 0 0 var(--s3); }

@media (max-width: 860px) {
  .corner-podcast__grid { grid-template-columns: 1fr; }
  .corner-intro { flex-wrap: wrap; gap: var(--s2); align-items: flex-start; }
  .corner-intro .corner-pending { margin-left: 0; }
}

/* Sound toggle on the gallery video tiles */
.our-parks-tile__sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(13, 35, 60, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms var(--ease), opacity 300ms var(--ease);
}
.our-parks-tile__sound:hover { background: var(--blue-primary); }
.our-parks-tile__sound svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .our-parks-tile__sound { opacity: 0; }
  .our-parks-tile:hover .our-parks-tile__sound,
  .our-parks-tile:focus-within .our-parks-tile__sound { opacity: 1; }
}

/* link-arrow on the blue closing band: white text and underline */
.values-statement .link-arrow { color: var(--white); }
.values-statement .link-arrow::after { background: var(--white); }
.values-statement .link-arrow:hover { color: var(--blue-light); }
.values-statement .link-arrow:hover::after { background: var(--blue-light); }


/* ==========================================================
   CloudCannon Visual Editor only.
   CloudCannon adds .cms-editor-active to <body> ONLY inside its
   editor, so none of these rules ever apply on the live site.
   They lay every gallery photo out in a grid while editing so
   each one can be clicked and swapped.
   ========================================================== */
.cms-editor-active .park-gallery__stage,
.cms-editor-active .park-hero-gallery__stage {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 12px !important;
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible !important;
}
.cms-editor-active .park-hero-gallery {
  height: auto !important;
}
.cms-editor-active .park-gallery__stage img,
.cms-editor-active .park-hero-gallery__stage img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.cms-editor-active .park-gallery__stage .gallery-btn,
.cms-editor-active .park-hero-gallery .gallery-arrow,
.cms-editor-active .park-hero-gallery .gallery-badge,
.cms-editor-active .gallery-counter {
  display: none !important;
}

/* Editor only: let clicks pass through the Media page tile overlay
   to the photo underneath, while the overlay label stays editable. */
.cms-editor-active .our-parks-tile__hover { pointer-events: none !important; }
.cms-editor-active .our-parks-tile__hover > * { pointer-events: auto !important; }

/* Editor only: Available page property cards crop their photo box to a
   fixed shape. Let it grow so the full photo grid shows while editing. */
.cms-editor-active .property-card__image--photos {
  aspect-ratio: auto !important;
  overflow: visible !important;
}
.cms-editor-active .property-card__image--photos .park-gallery__stage {
  position: relative !important;
  inset: auto !important;
}
.cms-editor-active .property-card__image--photos::before {
  display: none !important;
}