:root {
  --ink: #11100d;
  --muted: #6d675f;
  --paper: #f7f4ed;
  --line: #d8d0c2;
  --soft: #ebe5da;
  --accent: #8f6d3f;
  --white: #fffdfa;
}

/* Reversible retained estate wordmark treatment. */
.topbar--estate-retained .brand {
  overflow: visible;
}

.topbar--estate-retained .brand-word {
  animation: none !important;
  flex-shrink: 0;
  max-width: 320px;
  opacity: 1;
  order: 1;
  overflow: hidden;
  transition:
    max-width 700ms cubic-bezier(0.4, 0, 0.2, 1) 380ms,
    margin-right 700ms cubic-bezier(0.4, 0, 0.2, 1) 380ms,
    opacity 360ms ease 420ms;
}

/* Settled state: the wordmark collapses away and the logo alone carries the
   mark. Toggled from script.js — 45s on first load, then 5s after each scroll. */
.topbar--estate-retained.is-wordmark-compact .brand-word {
  margin-right: 0;
  max-width: 0;
  opacity: 0;
  transition:
    max-width 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms,
    margin-right 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms,
    opacity 320ms ease;
}

/* The logo is the settled state only. It stays fully collapsed while the
   wordmark is showing, and each fade waits for the other mark to clear, so the
   two are never on screen together. */
.topbar--estate-retained .brand-logo {
  --mark-size: 28px;
  animation: none !important;
  flex: 0 0 0;
  height: var(--mark-size);
  margin-left: 0;
  opacity: 0;
  order: 2;
  width: 0;
  transition:
    flex-basis 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms,
    width 700ms cubic-bezier(0.4, 0, 0.2, 1) 120ms,
    opacity 320ms ease;
}

.topbar--estate-retained.is-wordmark-compact .brand-logo {
  flex-basis: var(--mark-size);
  opacity: 1;
  width: var(--mark-size);
  transition:
    flex-basis 700ms cubic-bezier(0.4, 0, 0.2, 1) 380ms,
    width 700ms cubic-bezier(0.4, 0, 0.2, 1) 380ms,
    opacity 360ms ease 420ms;
}

@keyframes estate-logo-soft-in {
  from {
    opacity: 0;
    transform: translateY(2px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar--estate-retained .brand-word,
  .topbar--estate-retained .brand-logo {
    transition: none;
  }
}

@media (max-width: 820px) {
  .topbar--estate-retained .brand-logo {
    --mark-size: 26px;
  }
}

/* The retained wordmark plus both stand references exceed narrow viewports
   (387px of content at 375px). Let the mark wrap and the wordmark shrink so
   the header never forces horizontal page scroll. */
@media (max-width: 420px) {
  .estate-mark {
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }

  .topbar--estate-retained .brand-word {
    font-size: 0.94rem;
  }

  .estate-references {
    margin-top: 0;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 68px;
  padding: 0 clamp(20px, 4vw, 56px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  align-items: center;
  display: inline-flex;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
}

.brand-word {
  display: inline-block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.brand-logo {
  flex: none;
  height: 32px;
  object-fit: contain;
  opacity: 0;
  width: 0;
}

/* After arrival, the wordmark collapses away and the estate mark takes its place. */
@media (prefers-reduced-motion: no-preference) {
  .brand-word {
    animation: brand-word-out 1100ms cubic-bezier(0.4, 0, 0.2, 1) 1600ms forwards;
  }

  .brand-logo {
    animation: brand-logo-in 1100ms cubic-bezier(0.4, 0, 0.2, 1) 1600ms forwards;
  }
}

@keyframes brand-word-out {
  0% { max-width: 320px; opacity: 1; }
  55% { opacity: 0; }
  100% { margin-right: 0; max-width: 0; opacity: 0; }
}

@keyframes brand-logo-in {
  0% { opacity: 0; width: 0; }
  45% { opacity: 0; width: 32px; }
  100% { opacity: 1; width: 32px; }
}

.estate-mark {
  align-items: center;
  display: flex;
  gap: 14px;
}

.estate-references {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-top: 2px;
}

/* Property references: "STAND" sits above the number and stays visible,
   matching the Stand 765 header treatment. */
.estate-reference {
  align-items: center;
  display: inline-flex;
  flex-direction: column;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  gap: 2px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.estate-reference__label {
  animation: none !important;
  display: block;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.48rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  margin: 0 !important;
  max-width: none !important;
  opacity: 0.72 !important;
  overflow: visible;
}

.topbar.is-settled .estate-reference__label,
.topbar.is-settled:hover .estate-reference__label,
.topbar.is-settled:focus-within .estate-reference__label {
  margin: 0;
  max-width: none;
  opacity: 0.72;
}

.estate-reference--active {
  color: var(--ink);
}

.estate-reference--future {
  color: var(--muted);
}

.estate-reference--active:hover,
.estate-reference--active:focus-visible {
  color: var(--accent);
}

nav {
  display: flex;
  gap: clamp(14px, 2vw, 28px);
}

.topbar__right {
  align-items: center;
  display: flex;
  gap: clamp(16px, 2vw, 28px);
}

nav a {
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.unit-switch {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.unit-switch button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.7rem;
  min-height: 34px;
  padding: 0 10px;
  text-transform: uppercase;
}

.unit-switch button + button {
  border-left: 1px solid var(--ink);
}

.unit-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.unit--imperial {
  display: none;
}

html[data-units="imperial"] .unit--metric {
  display: none;
}

html[data-units="imperial"] .unit--imperial {
  display: inline;
}

.hero {
  display: grid;
  gap: clamp(32px, 7vw, 88px);
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.78fr);
  min-height: calc(100vh - 68px);
  padding: clamp(32px, 3.4vw, 48px) clamp(20px, 5vw, 72px) 44px;
}

.hero__copy {
  align-self: center;
  max-width: 850px;
}

.kicker {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.offer-type {
  color: #8a342e;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  line-height: 1.02;
}

h1 {
  font-size: clamp(3.2rem, 7.1vw, 7rem);
  max-width: 900px;
}

h2 {
  font-size: clamp(2.15rem, 4.6vw, 5rem);
}

h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  font-weight: 400;
  line-height: 1.06;
}

.lede {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  max-width: 680px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 38px;
}

.button {
  align-items: center;
  border: 1px solid var(--ink);
  display: inline-flex;
  font-size: 0.82rem;
  justify-content: center;
  min-height: 46px;
  min-width: 158px;
  padding: 0 18px;
  text-decoration: none;
  text-transform: uppercase;
}

.button--dark {
  background: var(--ink);
  color: var(--white);
}

.button--line {
  background: transparent;
}

.plot-card {
  align-self: center;
  margin: 0;
  position: relative;
  transform-origin: bottom right;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.plot-card svg {
  background: var(--white);
  border: 1px solid var(--ink);
  display: block;
  height: min(72vh, 720px);
  width: 100%;
}

.grid path {
  fill: none;
  stroke: color-mix(in srgb, var(--line) 55%, transparent);
  stroke-width: 1;
}

.plot,
.road,
.north {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plot {
  stroke-width: 3;
}

.road {
  stroke-dasharray: 8 9;
  stroke-width: 2;
}

.north {
  stroke-width: 2;
}

/* Stand 837 hero: broad five-sided parcel with frontage onto an internal road */
.plot-fill {
  fill: color-mix(in srgb, var(--accent) 6%, var(--white));
  stroke: none;
}

.hero-road-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 52%, transparent);
  stroke-linecap: round;
  stroke-width: 1.6;
}

.hero-road-centre {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: 11 9;
  stroke-linecap: round;
  stroke-width: 1;
}

.hero-road-label {
  fill: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
}

.hero-north path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.hero-north text {
  fill: var(--muted);
  font-size: 16px;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="enabled"] .plot-card--static .plot-fill,
  html[data-motion="enabled"] .plot-card--static .hero-frontage,
  html[data-motion="enabled"] .plot-card--static .hero-beacons circle,
  html[data-motion="enabled"] .plot-card--static .hero-north {
    opacity: 0;
    animation: hero-fade-in 900ms ease forwards;
  }

  html[data-motion="enabled"] .plot-card--static .plot-fill {
    animation-delay: 480ms;
  }

  html[data-motion="enabled"] .plot-card--static .hero-frontage {
    animation-delay: 780ms;
  }

  html[data-motion="enabled"] .plot-card--static .hero-beacons circle {
    animation-delay: 1040ms;
  }

  html[data-motion="enabled"] .plot-card--static .hero-north {
    animation-delay: 1240ms;
  }

  @keyframes hero-fade-in {
    to {
      opacity: 1;
    }
  }
}

.hero-road-context {
  opacity: 0;
  transition: opacity 260ms ease;
}

.hero-map {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-service-road,
.hero-access-road,
.hero-access-centre,
.hero-carriageway,
.hero-lane-marking,
.hero-median,
.hero-turn-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-service-road {
  stroke-width: 2;
}

.hero-access-road {
  fill: color-mix(in srgb, var(--accent) 8%, var(--paper));
  stroke: var(--ink);
  stroke-width: 1.5;
}

.hero-access-centre {
  stroke-dasharray: 4 5;
  stroke-width: 1;
}

.hero-carriageway {
  stroke: var(--ink);
  stroke-width: 2;
}

.hero-lane-marking {
  stroke-dasharray: 12 9;
  stroke-width: 1;
}

.hero-median {
  stroke: var(--accent);
  stroke-width: 3;
}

.hero-turn-arrow {
  stroke-width: 1.4;
}

.hero-secondary-route {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 42%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hero-road-context text {
  fill: var(--accent);
  font-size: 13px;
}

.hero-car rect,
.hero-car circle {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1;
}

.hero-car {
  opacity: 0;
}

.plot-card:is(:hover, :focus) .hero-road-context {
  opacity: 1;
}

.plot-card:is(:hover, :focus) .hero-map {
  transform: translate(22px, -32px) scale(0.78);
}

.plot-card:is(:hover, :focus) {
  transform: scale(1.035);
  z-index: 2;
}

svg text {
  fill: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 18px;
}

svg circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

figcaption {
  border: 1px solid var(--ink);
  border-top: 0;
  display: flex;
  justify-content: space-between;
  padding: 16px 18px;
  text-transform: uppercase;
}

figcaption span {
  color: var(--muted);
  font-size: 0.8rem;
}

.section {
  border-top: 1px solid var(--line);
  padding: clamp(68px, 9vw, 132px) clamp(20px, 5vw, 72px);
}

.section--summary {
  display: grid;
  gap: clamp(40px, 7vw, 112px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
}

.summary__editorial {
  min-width: 0;
}

.property-studies {
  aspect-ratio: 4 / 3;
  contain: paint;
  isolation: isolate;
  margin: clamp(34px, 5vw, 64px) 0 0;
  max-width: 640px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.property-studies__image {
  height: 100%;
  inset: 0;
  mix-blend-mode: multiply;
  object-fit: contain;
  opacity: 1;
  position: absolute;
  width: 100%;
}

.facts {
  display: grid;
  gap: 1px;
  margin: 0;
}

.facts div {
  align-items: center;
  background: var(--soft);
  border-left: 2px solid transparent;
  display: grid;
  grid-template-columns: 0.6fr 1fr;
  padding: 20px 22px;
}

.facts div:nth-child(2),
.facts div:nth-child(4),
.facts div:nth-child(8) {
  border-left-color: var(--accent);
}

dt {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

dd {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.25;
  margin: 0;
}

.facts dd strong {
  display: block;
  font-size: 1.1em;
  font-weight: 650;
}

.facts dd > span {
  color: var(--muted);
  display: block;
  font-size: 0.78em;
  margin-top: 4px;
}

.split {
  display: grid;
  gap: clamp(44px, 8vw, 128px);
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
}

.copy-stack {
  color: var(--muted);
  font-size: 1.08rem;
}

.capacity {
  background: var(--ink);
  color: var(--white);
}

.capacity .kicker {
  color: #d7b16d;
}

.potential__intro {
  align-items: end;
  display: grid;
  gap: clamp(32px, 6vw, 110px);
  grid-template-columns: minmax(0, 0.95fr) minmax(250px, 0.55fr);
  max-width: none;
}

.capacity__lede {
  color: color-mix(in srgb, var(--white) 72%, transparent);
  font-size: 1.1rem;
  max-width: 700px;
}

.potential__copy {
  max-width: 850px;
}

.capacity-signal {
  align-self: end;
  border-bottom: 1px solid color-mix(in srgb, var(--white) 30%, transparent);
  margin: 0;
  max-width: 360px;
  padding: 0 0 14px;
}

.capacity-signal svg {
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.capacity-signal path,
.capacity-signal rect,
.capacity-signal circle {
  fill: none;
  stroke: color-mix(in srgb, var(--white) 62%, transparent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.capacity-signal rect,
.capacity-signal circle {
  stroke-width: 1.25;
}

.capacity-signal text,
.capacity-signal figcaption {
  fill: color-mix(in srgb, var(--white) 52%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.capacity-signal figcaption {
  color: color-mix(in srgb, var(--white) 48%, transparent);
  display: block;
  font-size: 0.66rem;
  margin-top: 4px;
  text-transform: uppercase;
}

.capacity-signal__route {
  stroke: #d7b16d !important;
}

.capacity-signal__guide {
  stroke: color-mix(in srgb, var(--white) 24%, transparent) !important;
  stroke-dasharray: 2 6;
}

html[data-motion="enabled"] .capacity-signal__route {
  animation: signal-route 7.2s linear infinite;
  stroke-dasharray: 12 168;
  stroke-dashoffset: 180;
}

html[data-motion="enabled"] .capacity-signal__stage {
  animation: signal-stage 7.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

html[data-motion="enabled"] .capacity-signal__stage--operations {
  animation-delay: 2.4s;
}

html[data-motion="enabled"] .capacity-signal__stage--expansion {
  animation-delay: 4.8s;
}

@keyframes signal-route {
  to { stroke-dashoffset: 0; }
}

@keyframes signal-stage {
  0%, 22%, 100% { opacity: 0.34; transform: translateY(0); }
  7%, 15% { opacity: 1; transform: translateY(-3px); }
}

.capacity__grid {
  border-top: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 6vw, 84px);
}

.capacity-card {
  border-right: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
  display: flex;
  flex-direction: column;
  min-height: 475px;
  padding: clamp(24px, 3vw, 44px);
}

.capacity-card:last-child {
  border-right: 0;
}

.capacity-card__number {
  color: #d7b16d;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
}

.capacity-card__type {
  border-bottom: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  margin: 22px 0 28px;
  padding-bottom: 12px;
  text-transform: uppercase;
}

.capacity-card h3 {
  font-size: clamp(1.75rem, 2.5vw, 2.65rem);
  margin-bottom: 20px;
}

.capacity-card > p:not(.capacity-card__type) {
  color: color-mix(in srgb, var(--white) 72%, transparent);
  margin-bottom: 28px;
}

.capacity-card dl {
  border-top: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
  display: grid;
  gap: 0;
  margin: auto 0 0;
}

.capacity-card dl div {
  border-bottom: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
  display: grid;
  gap: 6px;
  padding: 12px 0;
}

.capacity-card dt {
  color: color-mix(in srgb, var(--white) 58%, transparent);
}

.capacity-card dd {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.capacity__note {
  color: color-mix(in srgb, var(--white) 54%, transparent);
  font-size: 0.8rem;
  margin: 18px 0 0;
  max-width: 700px;
}

.sector {
  display: grid;
  gap: clamp(44px, 8vw, 128px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.75fr);
}

.sector__content {
  color: var(--muted);
  font-size: 1.08rem;
}

.source-link {
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  display: inline-block;
  font-size: 0.76rem;
  margin-top: 18px;
  padding-bottom: 4px;
  text-decoration: none;
  text-transform: uppercase;
}

.studio {
  display: grid;
  gap: clamp(44px, 8vw, 112px);
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1fr);
}

.studio__lede {
  color: var(--muted);
  font-size: 1.08rem;
  max-width: 620px;
}

.studio__tool {
  display: grid;
  gap: 18px;
}

.studio__tool input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.studio__controls {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.studio__controls label {
  cursor: pointer;
  font-size: 0.76rem;
  min-height: 48px;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  transition: background 180ms ease, color 180ms ease;
}

.studio__controls label + label {
  border-left: 1px solid var(--ink);
}

#mode-warehouse:checked ~ .studio__controls label[for="mode-warehouse"],
#mode-trade:checked ~ .studio__controls label[for="mode-trade"],
#mode-hq:checked ~ .studio__controls label[for="mode-hq"] {
  background: var(--ink);
  color: var(--white);
}

.studio__canvas {
  border: 1px solid var(--ink);
  display: grid;
  min-height: 0;
  place-items: center;
  padding: clamp(14px, 2vw, 24px);
}

.studio__canvas svg {
  display: block;
  height: min(72vh, 650px);
  max-width: 100%;
  min-height: 0;
  width: 100%;
}

.studio__boundary,
.studio__road,
.studio__plan rect,
.studio__plan path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio__boundary {
  stroke-width: 2.5;
}

.studio__road {
  stroke-width: 1.7;
}

.studio__plan {
  opacity: 0;
  transition: opacity 180ms ease;
}

.studio__plan rect {
  fill: color-mix(in srgb, var(--accent) 10%, transparent);
  stroke-width: 1.7;
}

.studio__plan path {
  stroke: var(--accent);
  stroke-dasharray: 6 7;
}

.studio__canvas text {
  fill: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

#mode-warehouse:checked ~ .studio__canvas .studio__plan--warehouse,
#mode-trade:checked ~ .studio__canvas .studio__plan--trade,
#mode-hq:checked ~ .studio__canvas .studio__plan--hq {
  opacity: 1;
}

.studio__notes {
  border-top: 1px solid var(--line);
}

.studio__note {
  display: none;
  gap: 18px;
  grid-template-columns: 42px 1fr;
  margin: 0;
  padding-top: 18px;
}

.studio__note span {
  border: 1px solid var(--ink);
  display: grid;
  font-size: 0.9rem;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 38px;
  place-items: center;
  width: 38px;
}

.studio__note h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  grid-column: 2;
  margin-bottom: 8px;
}

.studio__note p {
  color: var(--muted);
  grid-column: 2;
  margin-bottom: 0;
  max-width: 620px;
}

#mode-warehouse:checked ~ .studio__notes .studio__note--warehouse,
#mode-trade:checked ~ .studio__notes .studio__note--trade,
#mode-hq:checked ~ .studio__notes .studio__note--hq {
  display: grid;
}

.site-plan {
  align-self: start;
  margin: 0;
}

.site-plan__sheet {
  border: 1px solid var(--ink);
  display: grid;
  min-height: 0;
  padding: clamp(14px, 2vw, 24px);
  place-items: center;
}

.site-plan svg {
  display: block;
  height: min(78vh, 690px);
  max-width: 100%;
  width: 100%;
}

.site-plan__boundary,
.site-plan__road,
.site-plan__dimensions path,
.site-plan__north path,
.site-plan__scale path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-plan__boundary {
  stroke-width: 2.5;
}

.site-plan__road {
  stroke-width: 1.6;
}

.site-plan__access,
.site-plan__mutare,
.site-plan__mutare-centre {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-plan__access {
  stroke: var(--accent);
  stroke-dasharray: 5 6;
  stroke-width: 1.2;
}

.site-plan__mutare {
  stroke: var(--ink);
  stroke-width: 2;
}

.site-plan__mutare-centre {
  stroke: var(--accent);
  stroke-dasharray: 6 7;
  stroke-width: 1;
}

.site-plan__context text {
  fill: var(--accent);
  font-size: 11px;
}

.site-plan__dimensions path {
  stroke: var(--accent);
  stroke-dasharray: 5 7;
  stroke-width: 1.1;
}

.site-plan__beacons circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 1.5;
}

.site-plan text {
  fill: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.035em;
}

.site-plan__beacons text {
  fill: var(--ink);
  font-size: 13px;
}

.site-plan__dimensions text {
  font-size: 11px;
}

.site-plan__north text,
.site-plan__scale text {
  font-size: 11px;
}

.site-plan figcaption {
  border-color: var(--ink);
}

.inquiry {
  background: var(--white);
  min-height: 420px;
}

.inquiry p {
  color: var(--muted);
  max-width: 650px;
}

.inquiry__rate {
  color: var(--ink) !important;
  font-size: 1rem;
  margin-bottom: 14px;
}

.inquiry__rate strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.3em;
  font-weight: 400;
}

@media (prefers-reduced-motion: no-preference) {
  html[data-motion="enabled"] .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 650ms ease, transform 650ms ease;
  }

  html[data-motion="enabled"] .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  html[data-motion="enabled"] .reveal--delay-1 {
    transition-delay: 120ms;
  }

  html[data-motion="enabled"] .plot {
    animation: plot-trace 1.2s ease both;
    stroke-dasharray: 1200;
  }

  @keyframes plot-trace {
    from {
      stroke-dashoffset: 1200;
    }

    to {
      stroke-dashoffset: 0;
    }
  }
}

@media (hover: hover) {
  .button,
  .unit-switch button,
  .studio__controls label {
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
  }

  .button:hover {
    transform: translateY(-2px);
  }

  .button--line:hover {
    background: var(--ink);
    color: var(--white);
  }

}

@media (prefers-reduced-motion: no-preference) {
  .plot-card:is(:hover, :focus) .hero-car {
    animation-duration: 5.8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
  }

  .plot-card:is(:hover, :focus) .hero-car--one,
  .plot-card:is(:hover, :focus) .hero-car--two {
    animation-name: hero-car-east;
  }

  .plot-card:is(:hover, :focus) .hero-car--three {
    animation-name: hero-car-west;
  }

  .plot-card:is(:hover, :focus) .hero-car--two {
    animation-delay: -2.1s;
  }

  .plot-card:is(:hover, :focus) .hero-car--three {
    animation-delay: -1.4s;
  }

  @keyframes hero-car-east {
    from { transform: translate(-86px, -32px) rotate(21deg); }
    to { transform: translate(330px, 124px) rotate(21deg); }
  }

  @keyframes hero-car-west {
    from { transform: translate(90px, 34px) rotate(21deg); }
    to { transform: translate(-320px, -122px) rotate(21deg); }
  }
}

@media (max-width: 820px) {
  .plot-card:is(:hover, :focus) {
    transform: none;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 14px;
    padding-top: 14px;
    position: static;
  }

  .estate-mark {
    align-self: flex-start;
  }

  nav {
    flex-wrap: wrap;
  }

  .topbar__right {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
  }

  .hero,
  .section--summary,
  .split,
  .studio,
  .sector,
  .potential__intro {
    grid-template-columns: 1fr;
  }

  .property-studies {
    margin-left: auto;
    margin-right: auto;
    max-width: 640px;
  }

  .capacity-signal {
    margin-top: 8px;
    max-width: 320px;
  }

  .capacity__grid {
    grid-template-columns: 1fr;
  }

  .capacity-card {
    border-bottom: 1px solid color-mix(in srgb, var(--white) 28%, transparent);
    border-right: 0;
    min-height: auto;
  }

  .hero {
    min-height: auto;
  }

  .plot-card {
    align-self: stretch;
  }

  .plot-card svg {
    height: auto;
  }

  .facts div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .studio__controls {
    grid-template-columns: 1fr;
  }

  .studio__controls label + label {
    border-left: 0;
    border-top: 1px solid var(--ink);
  }

  .studio__canvas {
    min-height: 0;
  }

  .studio__canvas svg {
    height: min(125vw, 560px);
  }

  .site-plan svg {
    height: min(132vw, 580px);
  }
}

.plot-card.plot-card--static:is(:hover, :focus),
.plot-card.plot-card--static:is(:hover, :focus) .hero-map {
  transform: none;
}


/* BEGIN STAND 765 AERIAL WINDOW TRANSPLANT */
.plot-card {
  align-self: center;
  margin: 0;
  position: relative;
  transform-origin: bottom right;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.plot-card {
  --par-x: 0px;
  --par-y: 0px;
}

/* Multi-state raster hero: layered PNG stages cross-fade with zoom + parallax */
.hero-stage {
  aspect-ratio: 1 / 1;
  background: radial-gradient(ellipse 66% 60% at 54% 46%, var(--white) 0%, color-mix(in srgb, var(--paper) 60%, var(--white)) 100%);
  border: 1px solid var(--ink);
  cursor: pointer;
  max-height: min(80vh, 780px);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hero-stage__inner {
  backface-visibility: hidden;
  height: 100%;
  inset: 0;
  position: absolute;
  transform: translate3d(0, 5%, 0) scale(1.92) rotate(-19.21deg);
  transform-origin: center;
  transition: transform 3200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
  will-change: transform;
}

.hero-stage__parallax {
  backface-visibility: hidden;
  height: 100%;
  inset: 0;
  position: absolute;
  transform: translate3d(var(--par-x), var(--par-y), 0);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
  will-change: transform;
}

.hero-stage__drift {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
  will-change: transform;
}

/* The drift and pointer parallax live on separate layers, so hovering remains
   quietly alive even when the pointer itself is still. */
@media (prefers-reduced-motion: no-preference) {
  .plot-card:not(:hover):not(:focus-within) .hero-stage__drift {
    animation: hero-idle-float 7000ms ease-in-out infinite;
  }

  .plot-card:is(:hover, :focus-within) .hero-stage__drift {
    animation: hero-hover-float 8200ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
}

@keyframes hero-idle-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -7px, 0); }
}

@keyframes hero-hover-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  28% { transform: translate3d(3px, -5px, 0); }
  62% { transform: translate3d(-4px, 3px, 0); }
  82% { transform: translate3d(2px, 2px, 0); }
}

.hero-layer {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  user-select: none;
  width: 100%;
}

/* Red focus overlays share the exact canvas of their matching map states. */
.hero-highlight {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  user-select: none;
  width: 100%;
  z-index: 2;
}

.hero-layer--rest {
  opacity: 1;
}

.plot-card.is-preparing .hero-layer--rest {
  opacity: 0;
}

/* Arrival: the page opens on the near-empty grid (start), then the property
   populates in as start fades out and rest fades in. Driven once by the
   .is-arriving class (present in markup, removed by script.js after the
   animations finish). Every arrival animation ENDS on the resting default
   (start 0, rest 1, inner scale 1.75), so removing the class is seamless
   and it can never restart on hover. */
.hero-layer--start {
  opacity: 0;
}

.hero-loader {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 8;
}

.plot-card.is-preparing .hero-loader {
  opacity: 1;
}

.plot-card.is-preparing .hero-stage {
  cursor: wait;
}

.hero-loader__brand {
  aspect-ratio: 1;
  position: relative;
  width: clamp(122px, 18vw, 190px);
}

.hero-loader__mark {
  height: auto;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hero-loader__mark--base {
  opacity: 0.16;
}

.hero-loader__mark--reveal {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .plot-card.is-preparing .hero-loader__brand {
    animation: hero-brand-breathe 2400ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  .plot-card.is-preparing .hero-loader__mark--reveal {
    animation: hero-brand-reveal 2400ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plot-card.is-preparing .hero-loader__mark--base {
    opacity: 1;
  }
}

@keyframes hero-brand-breathe {
  0%, 100% { transform: scale(0.975); }
  50% { transform: scale(1); }
}

@keyframes hero-brand-reveal {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; }
  12% { opacity: 1; }
  48%, 68% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); opacity: 0; }
}

.plot-card.is-preparing .hero-layer--start {
  opacity: 1;
}

.plot-card.is-preparing .hero-stage__inner {
  transform: scale(2.02) rotate(0deg);
}

.plot-card.is-arriving .hero-layer--mid,
.plot-card.is-arriving .hero-layer--full,
.plot-card.is-arriving .hero-layer--c1,
.plot-card.is-arriving .hero-layer--c2,
.plot-card.is-arriving .hero-layer--c2-load {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .plot-card.is-arriving .hero-layer--start {
    animation: hero-start-out 1000ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
  }

  .plot-card.is-arriving .hero-layer--rest {
    animation: hero-rest-in 1000ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
  }

  .plot-card.is-arriving .hero-stage__inner {
    animation: hero-arrive-zoom 1000ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
  }
}

/* One continuous dissolve makes the property appear as the camera opens out,
   rather than presenting distinct fade stages. */
@keyframes hero-start-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes hero-rest-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes hero-arrive-zoom {
  0% { transform: scale(2.02) rotate(0deg); }
  100% { transform: translate3d(0, 5%, 0) scale(1.92) rotate(-19.21deg); }
}

/* Drifting clouds: the source overlays share the map canvas exactly. Their
   own alpha is preserved; CSS only governs when they quietly arrive and go. */
.hero-cloud {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  user-select: none;
  width: 100%;
  will-change: opacity, transform;
  z-index: 1;
}

.hero-traffic-overlay {
  height: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 760ms cubic-bezier(0.22, 0.61, 0.36, 1);
  width: 100%;
  z-index: 1;
}

.hero-traffic__extra {
  opacity: 0;
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 2100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-vehicle__body,
.hero-vehicle__trailer,
.hero-vehicle__cab {
  fill: color-mix(in srgb, var(--muted) 45%, var(--paper));
}

.hero-vehicle__glass {
  fill: color-mix(in srgb, var(--paper) 92%, var(--muted));
}

.hero-vehicle--turning {
  transition: opacity 180ms ease;
}

.plot-card[data-focus="1"] .hero-vehicle--turning {
  opacity: 0 !important;
}

/* In the full map state, one vehicle keeps the corridor alive. Hover adds
   two staggered vehicles on the separate opposite and same-direction lanes. */
.plot-card.full-context .hero-traffic-overlay,
.plot-card.is-mobile-context .hero-traffic-overlay {
  opacity: 0.72;
}

@media (hover: hover) {
  .plot-card.full-context:is(:hover, :focus-within) .hero-traffic__extra {
    opacity: 1;
    transition-delay: 700ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-traffic-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within) .hero-cloud--1 {
    animation: hero-cloud-1 32000ms cubic-bezier(0.45, 0, 0.55, 1) 4200ms infinite;
  }
}

@keyframes hero-cloud-1 {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  13% { opacity: 0.32; }
  28% { opacity: 0.32; transform: translate3d(14px, -8px, 0); }
  39% { opacity: 0; transform: translate3d(20px, -11px, 0); }
  100% { opacity: 0; transform: translate3d(28px, -15px, 0); }
}

/* A single camera move stays oversized at every point, keeping the raster beyond the frame. */
.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not(.interacted) .hero-stage__inner {
  transform: scale(1.2) rotate(0deg);
  transition-duration: 3300ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not(.interacted) .hero-layer--rest {
  animation: hero-rest-reveal 3300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not(.interacted) .hero-layer--mid {
  animation: hero-mid-reveal 3300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not(.interacted) .hero-layer--c2-load {
  animation: hero-c2-reveal 3300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not(.interacted) .hero-layer--full {
  animation: hero-full-reveal 3300ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes hero-rest-reveal {
  0% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes hero-mid-reveal {
  0%, 12% { opacity: 0; }
  40%, 55% { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@keyframes hero-c2-reveal {
  0%, 40% { opacity: 0; }
  68%, 79% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@keyframes hero-full-reveal {
  0%, 68% { opacity: 0; }
  100% { opacity: 1; }
}

/* Steady-state fallback (post-intro, or once .interacted skips it):
   plain, fast, always current with live parallax. */
.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within) .hero-layer--rest {
  opacity: 0;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within) .hero-layer--full {
  opacity: 1;
}

.plot-card.interacted .hero-layer--full {
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.plot-card.interacted:is(:hover, :focus-within):not([data-focus]) .hero-stage__inner {
  transform: scale(1.2) rotate(0deg);
  transition-duration: 1200ms;
}

/* Click stage 1 */
.plot-card[data-focus="1"] .hero-layer--full {
  opacity: 0;
}

.plot-card[data-focus="1"] .hero-layer--c1 {
  opacity: 1;
}

.plot-card[data-focus="1"] .hero-highlight--c1 {
  animation: hero-focus-pulse 2200ms cubic-bezier(0.45, 0, 0.55, 1) 500ms 1 both;
}

/* Click stage 2 */
.plot-card[data-focus="2"] .hero-layer--full,
.plot-card[data-focus="2"] .hero-layer--c1 {
  opacity: 0;
}

.plot-card[data-focus="2"] .hero-layer--c2 {
  opacity: 1;
}

.plot-card[data-focus="2"] .hero-highlight--c2 {
  animation: hero-focus-pulse 2200ms cubic-bezier(0.45, 0, 0.55, 1) 500ms 1 both;
}

@keyframes hero-focus-pulse {
  0%, 100% { opacity: 0; }
  42% { opacity: 0.5; }
}

/* Gentle progressive push-in on the click stages, with calmer parallax */
.plot-card[data-focus="1"] .hero-stage__inner {
  transform: scale(1.46) rotate(0deg);
  transition-duration: 1250ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.plot-card[data-focus="2"] .hero-stage__inner {
  transform: scale(1.34) rotate(0deg);
  transition-duration: 1250ms;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero-context-overlays {
  inset: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.is-hover-queued):is(:hover, :focus-within):not([data-focus]) .hero-context-overlays {
  opacity: 1;
  transition-delay: 2200ms;
}

.plot-card[data-focus] .hero-context-overlays {
  opacity: 0;
  transition-delay: 0ms;
}

.hero-north {
  height: 20px;
  overflow: hidden;
  position: absolute;
  right: 6%;
  top: 6%;
  width: 20px;
}

.hero-north img {
  left: -59px;
  position: absolute;
  top: -33px;
  width: 188px;
}

.hero-facts {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 500ms ease;
}

.plot-card.show-facts .hero-facts {
  opacity: 1;
  z-index: 3;
}

.hero-fact {
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.62rem, 0.72vw, 0.78rem);
  font-weight: 700;
  left: 8%;
  letter-spacing: 0.08em;
  line-height: 1.35;
  max-width: min(48%, 290px);
  opacity: 0;
  position: absolute;
  text-transform: uppercase;
  top: 12%;
  transform: translateY(8px);
  transition: opacity 480ms ease, transform 480ms ease;
}

.hero-fact.is-active {
  opacity: 1;
  transform: translateY(0);
}

.plot-card[data-focus] .hero-facts {
  opacity: 0;
}

.hero-callouts {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 4;
}

.hero-interaction-hint {
  background: color-mix(in srgb, var(--white) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  bottom: 4.5%;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.48rem, 0.58vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  margin: 0;
  opacity: 0;
  padding: 7px 10px;
  pointer-events: none;
  position: absolute;
  right: 5%;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: opacity 450ms ease, transform 450ms ease;
  white-space: nowrap;
  z-index: 5;
}

.hero-interaction-hint b {
  color: var(--accent);
  font-weight: 700;
}

.hero-interaction-hint__mobile {
  display: none;
}

.hero-interaction-hint__desktop--active {
  display: none;
}

.plot-card:not(.is-preparing):not(.is-arriving):not(.interacted):not(.is-mobile-context) .hero-interaction-hint {
  opacity: 1;
  transform: translateY(0);
}

.plot-card.interacted .hero-interaction-hint,
.plot-card.is-mobile-context .hero-interaction-hint {
  opacity: 0;
  transform: translateY(6px);
}

@media (hover: hover) {
  .plot-card:is(:hover, :focus-within):not(.interacted) .hero-interaction-hint__desktop--idle {
    display: none;
  }

  .plot-card:is(:hover, :focus-within):not(.interacted) .hero-interaction-hint__desktop--active {
    display: inline;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-interaction-hint__desktop {
    display: none;
  }

  .hero-interaction-hint__mobile {
    display: inline;
  }

  .plot-card.is-mobile-context .hero-stage__inner {
    transform: scale(1.2) rotate(0deg);
    transition-duration: 1900ms;
    transition-timing-function: cubic-bezier(0.22, 0.65, 0.4, 0.95);
  }

  .plot-card.is-mobile-context .hero-layer--rest {
    opacity: 0;
  }

  .plot-card.is-mobile-context .hero-layer--full {
    opacity: 1;
  }

  .plot-card.is-mobile-context .hero-context-overlays {
    opacity: 1;
    transition-delay: 900ms;
  }

  .plot-card.is-mobile-context:not(.interacted) .hero-interaction-hint {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-callout {
  background: color-mix(in srgb, var(--white) 95%, transparent);
  color: var(--ink);
  left: 8%;
  max-width: none;
  opacity: 0;
  padding: 3px 5px;
  position: absolute;
  top: 10%;
  transform: translateY(8px);
  transition: opacity 460ms ease, transform 460ms ease;
}

.hero-callout h3,
.hero-callout p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.hero-callout h3 {
  font-size: clamp(0.66rem, 0.78vw, 0.84rem);
  margin-bottom: 8px;
}

.hero-callout p {
  font-size: clamp(0.55rem, 0.65vw, 0.7rem);
  line-height: 1.45;
  min-height: 1.45em;
  position: relative;
  white-space: nowrap;
}

.hero-callout p span {
  inset: 0 auto auto 0;
  opacity: 0;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 480ms ease, transform 480ms ease;
}

.hero-callout p span.is-active {
  opacity: 1;
  transform: translateY(0);
}

.plot-card[data-focus="1"] .hero-callout--road,
.plot-card[data-focus="2"] .hero-callout--services {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-callout h3 {
    opacity: 0;
    transform: translateY(5px);
  }

  .plot-card[data-focus="1"] .hero-callout--road h3,
  .plot-card[data-focus="2"] .hero-callout--services h3 {
    animation: hero-callout-line 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  }
}

@keyframes hero-callout-line {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage__inner,
  .hero-layer--rest,
  .hero-layer--mid,
  .hero-layer--c2,
  .hero-layer--c2-load,
  .hero-layer--full {
    animation: none;
  }

  .hero-stage__inner {
    transform: translate3d(0, 5%, 0) scale(1.92) rotate(-19.21deg);
    transition: none;
  }

  .hero-stage__parallax,
  .site-plan__parallax {
    transition: none;
  }

  .plot-card:is(:hover, :focus-within) .hero-stage__inner {
    transform: scale(1.2) rotate(0deg);
  }

  .hero-layer {
    transition: none;
  }

  .hero-facts {
    display: none;
  }

}


.plot-card:is(:hover, :focus) {
  transform: none;
}

.plot-card .hero-traffic-overlay {
  background: transparent;
  border: 0;
  height: 100%;
  width: 100%;
}
/* END STAND 765 AERIAL WINDOW TRANSPLANT */

/* Stand 837 click views bring the active road connection gently into frame. */
@media (prefers-reduced-motion: no-preference) {
  .plot-card[data-focus="1"] .hero-stage__inner {
    animation: hero-837-mutare-focus 2200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .plot-card[data-focus="2"] .hero-stage__inner {
    animation: hero-837-access-focus 2200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes hero-837-mutare-focus {
  0% { transform: translate3d(0, 0, 0) scale(1.2) rotate(0deg); }
  52% { transform: translate3d(4.8%, -5%, 0) scale(1.27) rotate(0deg); }
  100% { transform: translate3d(3.6%, -3.8%, 0) scale(1.3) rotate(0deg); }
}

@keyframes hero-837-access-focus {
  0% { transform: translate3d(0, 0, 0) scale(1.2) rotate(0deg); }
  52% { transform: translate3d(4.2%, -4.5%, 0) scale(1.27) rotate(0deg); }
  100% { transform: translate3d(3.1%, -3.4%, 0) scale(1.3) rotate(0deg); }
}

/* Stand 837 illustrative plan viewer mirrors the proven Stand 765 workflow. */
@media (hover: hover) and (pointer: fine) {
  body::after {
    background: color-mix(in srgb, var(--paper) 64%, transparent);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 38;
  }

  .plot-card {
    transition: box-shadow 680ms cubic-bezier(0.22, 0.61, 0.36, 1), z-index 0s linear 680ms;
  }

  body.ac-attention-active::after {
    opacity: 0.72;
  }

  body.ac-attention-active .plot-card {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bronze) 44%, transparent), 0 22px 70px rgba(26, 22, 17, 0.12);
    position: relative;
    transition-delay: 0s;
    z-index: 39;
  }
}

.concept-switch {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 34px;
}

.concept-switch button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  min-height: 46px;
  padding: 0 10px;
  text-transform: uppercase;
}

.concept-switch button + button {
  border-left: 1px solid var(--ink);
}

.concept-switch button[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}

.concept-summaries {
  display: grid;
}

.concept-summary {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  opacity: 0;
  padding-top: 20px;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
  grid-area: 1 / 1;
}

.concept-summary.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.concept-summary__label {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.concept-summary h3 {
  font-size: clamp(1.55rem, 2.35vw, 2.25rem);
  margin-bottom: 22px;
}

.concept-summary dl {
  border-top: 1px solid var(--line);
  margin: 0 0 22px;
}

.concept-summary dl div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 9px 0;
}

.concept-summary dt,
.concept-summary dd {
  margin: 0;
}

.concept-summary dt {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.concept-summary dd {
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

.concept-summary__fit {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0;
  max-width: 620px;
}

.site-plan__sheet {
  position: relative;
}

.site-plan__north-marker {
  --north-angle: 0deg;
  height: clamp(24px, 3vw, 34px);
  opacity: 0.78;
  pointer-events: none;
  position: absolute;
  right: clamp(16px, 3vw, 28px);
  top: clamp(16px, 3vw, 28px);
  width: clamp(20px, 2.5vw, 32px);
  z-index: 6;
}

.site-plan__north-marker--765 {
  --north-angle: 19.21deg;
}

.site-plan__north-marker--837 {
  --north-angle: -119.21deg;
}

.property-media {
  border-top: 1px solid var(--line);
  display: grid;
  gap: clamp(2rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}

.property-media__intro h2 {
  margin: 0.5rem 0 1.2rem;
  max-width: 12ch;
}

.property-media__intro > p:last-child {
  color: var(--muted);
  max-width: 30rem;
}

.property-media__layout {
  background: var(--line);
  border: 1px solid var(--line);
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.gallery-placeholder,
.area-map {
  background: var(--paper);
}

/* Property gallery. The frames cross-fade on a slow cycle rather than offering
   thumbnails: a dissolve suits the page better than a control strip. The aerial
   clip stays click-to-play so its weight is never spent unasked. */
.gallery {
  display: grid;
  grid-template-rows: auto auto;
  background: var(--paper);
}

.gallery__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--soft);
  cursor: pointer;
}

/* While the clip is showing, the stage belongs to the video's own controls. */
.gallery.is-playing .gallery__stage {
  cursor: default;
}

.gallery__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gallery__step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  transition: border-color 220ms ease, background 220ms ease;
}

.gallery__step:hover {
  border-color: var(--ink);
  background: var(--white);
}

.gallery-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1400ms ease;
  user-select: none;
}

.gallery-frame.is-active {
  opacity: 1;
}

.gallery__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

.gallery__video[hidden] {
  display: none;
}

.gallery__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px clamp(14px, 2vw, 20px);
}

.gallery__count {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gallery__count b {
  color: var(--ink);
  font-weight: 700;
}

.gallery__play {
  border: 1px solid var(--line);
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: border-color 220ms ease, background 220ms ease;
}

.gallery__play:hover {
  border-color: var(--ink);
  background: var(--white);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-frame {
    transition: none;
  }
}

.gallery-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(320px, 34vw, 480px);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.gallery-placeholder__index {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.gallery-placeholder > div {
  display: grid;
  gap: 0.35rem;
}

.gallery-placeholder strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 400;
}

.gallery-placeholder span {
  color: var(--muted);
}

.area-map {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.area-map__heading {
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 0.72rem;
  gap: 1rem;
  justify-content: space-between;
  letter-spacing: 0.08em;
  padding: 1rem 1.2rem;
  text-transform: uppercase;
}

.area-map__heading span {
  color: var(--muted);
}

.area-map__frame {
  min-height: clamp(320px, 34vw, 480px);
  overflow: hidden;
  position: relative;
}

.area-map iframe {
  border: 0;
  filter: grayscale(1) contrast(0.92) sepia(0.08);
  height: 100%;
  min-height: inherit;
  width: 100%;
}

.area-map__north {
  --north-angle: 0deg;
  height: 30px;
  pointer-events: none;
  position: absolute;
  right: 18px;
  top: 18px;
  width: 26px;
  z-index: 1;
}

@media (max-width: 900px) {
  .property-media,
  .property-media__layout {
    grid-template-columns: 1fr;
  }

  .gallery-placeholder {
    min-height: 220px;
  }

  .area-map__frame {
    min-height: 320px;
  }
}

.hero-callout {
  background: color-mix(in srgb, var(--white) 95%, transparent);
  color: var(--ink);
  left: 8%;
  max-width: none;
  opacity: 0;
  padding: 3px 5px;
  position: absolute;
  top: 10%;
  transform: translateY(8px);
  transition: opacity 460ms ease, transform 460ms ease;
}

.hero-callout h3,
.hero-callout p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

.hero-callout h3 {
  animation: none !important;
  color: var(--ink);
  font-size: clamp(0.66rem, 0.78vw, 0.84rem);
  margin-bottom: 8px;
  opacity: 1;
  transform: none;
  transition: none;
}

.hero-callout p {
  font-size: clamp(0.55rem, 0.65vw, 0.7rem);
  line-height: 1.45;
  min-height: 1.45em;
  position: relative;
  white-space: nowrap;
}

.hero-callout p span {
  inset: 0 auto auto 0;
  opacity: 0;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 480ms ease, transform 480ms ease;
}

.hero-callout p span.is-active {
  opacity: 1;
  transform: translateY(0);
}

.plot-card[data-focus="1"] .hero-callout--road,
.plot-card[data-focus="2"] .hero-callout--services {
  opacity: 1;
  transform: translateY(0);
}



@media (prefers-reduced-motion: reduce) {
  .hero-stage__inner,
  .hero-layer--rest,
  .hero-layer--mid,
  .hero-layer--c2,
  .hero-layer--c2-load,
  .hero-layer--full {
    animation: none;
  }

  .hero-stage__inner {
    transform: translate3d(0, 5%, 0) scale(1.92) rotate(-19.21deg);
    transition: none;
  }

  .hero-stage__parallax,
  .site-plan__parallax {
    transition: none;
  }

  .plot-card:is(:hover, :focus-within) .hero-stage__inner {
    transform: scale(1.2) rotate(0deg);
  }

  .hero-layer {
    transition: none;
  }

  .hero-facts {
    display: none;
  }

}


.plot-card:is(:hover, :focus) {
  transform: none;
}

.plot-card .hero-traffic-overlay {
  background: transparent;
  border: 0;
  height: 100%;
  width: 100%;
}
/* END STAND 765 AERIAL WINDOW TRANSPLANT */
/* Stand 837 illustrative plan viewer mirrors the proven Stand 765 workflow. */
@media (hover: hover) and (pointer: fine) {
  body::after {
    background: color-mix(in srgb, var(--paper) 64%, transparent);
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity 680ms cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: 38;
  }

  .plot-card {
    transition: box-shadow 680ms cubic-bezier(0.22, 0.61, 0.36, 1), z-index 0s linear 680ms;
  }

  body.ac-attention-active::after {
    opacity: 0.72;
  }

  body.ac-attention-active .plot-card {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bronze) 44%, transparent), 0 22px 70px rgba(26, 22, 17, 0.12);
    position: relative;
    transition-delay: 0s;
    z-index: 39;
  }
}

.concept-switch {
  border: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 34px;
}

.concept-switch button {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  min-height: 46px;
  padding: 0 10px;
  text-transform: uppercase;
}

.concept-switch button + button {
  border-left: 1px solid var(--ink);
}

.concept-switch button[aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}

.concept-summaries {
  display: grid;
}

.concept-summary {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  opacity: 0;
  padding-top: 20px;
  transform: translateY(10px);
  transition: opacity 650ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
  grid-area: 1 / 1;
}

.concept-summary.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.concept-summary__label {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.concept-summary h3 {
  font-size: clamp(1.55rem, 2.35vw, 2.25rem);
  margin-bottom: 22px;
}

.concept-summary dl {
  border-top: 1px solid var(--line);
  margin: 0 0 22px;
}

.concept-summary dl div {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 9px 0;
}

.concept-summary dt,
.concept-summary dd {
  margin: 0;
}

.concept-summary dt {
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
}

.concept-summary dd {
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

.concept-summary__fit {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0;
  max-width: 620px;
}

.site-plan {
  align-self: start;
  cursor: pointer;
  margin: 0;
  touch-action: manipulation;
}

.site-plan__sheet {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--ink);
  display: grid;
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  place-items: initial;
  position: relative;
  contain: layout paint;
}

.site-plan__drift,
.site-plan__art,
.site-plan__parallax {
  inset: 0;
  position: absolute;
}

.site-plan__drift {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

.site-plan__art {
  backface-visibility: hidden;
  transform: scale(1);
  transition: transform 2100ms cubic-bezier(0.22, 0.65, 0.4, 0.95);
  will-change: transform;
}

.site-plan__parallax {
  backface-visibility: hidden;
  transform: translate3d(var(--plan-x, 0px), var(--plan-y, 0px), 0) rotate(-90deg);
  transform-origin: 50% 50%;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.site-plan__sheet.is-switching .site-plan__drift {
  animation-play-state: paused;
}

.site-plan__sheet.is-populated .site-plan__art {
  transform: scale(1.55);
}

@media (prefers-reduced-motion: no-preference) {
  .site-plan__sheet.is-populated .site-plan__drift {
    animation: site-plan-float-837 10800ms cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }

  @keyframes site-plan-float-837 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    24% { transform: translate3d(5px, -11px, 0); }
    54% { transform: translate3d(-7px, -17px, 0); }
    78% { transform: translate3d(4px, 4px, 0); }
  }
}

@media (hover: hover) {
  .site-plan:hover .site-plan__sheet.is-populated .site-plan__art {
    transform: scale(1.72);
  }
}

.site-plan__image {
  backface-visibility: hidden;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  position: absolute;
  transition: opacity 960ms cubic-bezier(0.22, 0.65, 0.4, 0.95), transform 2100ms cubic-bezier(0.22, 0.65, 0.4, 0.95);
  width: 100%;
}

.site-plan__sheet.is-populated .site-plan__image {
  transform: translate3d(0, 3%, 0);
}

.site-plan__image.is-active {
  opacity: 1;
}

.site-plan__sheet.is-revealing .site-plan__image.is-active {
  transition-duration: 1650ms, 2100ms;
}

.site-plan__traffic {
  --traffic-offset-y: 12.99375%;
  backface-visibility: hidden;
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translate3d(0, var(--traffic-offset-y), 0) rotate(-19.21deg);
  transform-origin: 50% 50%;
  transition: opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 2100ms cubic-bezier(0.22, 0.65, 0.4, 0.95);
  width: 100%;
  will-change: opacity, transform;
  z-index: 1;
}

.site-plan__vehicle-body,
.site-plan__vehicle-trailer,
.site-plan__vehicle-cab {
  fill: color-mix(in srgb, var(--muted) 45%, var(--paper));
}

.site-plan__vehicle-glass {
  fill: color-mix(in srgb, var(--paper) 92%, var(--muted));
}

.site-plan__traffic .hero-traffic__extra {
  opacity: 1;
  transform: none;
  transition: none;
}

.site-plan__sheet.is-populated:not([data-plan-viewer="blank"]) .site-plan__traffic {
  opacity: 0.56;
}

@media (hover: hover) {
  .site-plan:hover .site-plan__sheet.is-populated:not([data-plan-viewer="blank"]) .site-plan__traffic {
    opacity: 0.68;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-plan__traffic {
    display: none;
  }
}

.site-plan__key {
  background: color-mix(in srgb, var(--white) 93%, transparent);
  color: var(--ink);
  left: 5%;
  max-width: min(72%, 330px);
  padding: 10px 11px;
  position: absolute;
  top: 5%;
  transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 2;
}

.site-plan__key p,
.site-plan__facet {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.48rem, 0.6vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.45;
  margin: 0;
  text-transform: uppercase;
}

.site-plan__key p {
  color: var(--accent);
  margin-bottom: 10px;
}

.site-plan__facets {
  min-height: 1.45em;
  position: relative;
}

.site-plan__facet {
  inset: 0 auto auto 0;
  opacity: 0;
  position: absolute;
  transform: translateY(5px);
  transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
}

.site-plan__facet.is-active {
  opacity: 1;
  transform: translateY(0);
}

.site-plan__key--two {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.site-plan__sheet[data-plan-viewer="blank"] .site-plan__key,
.site-plan__sheet[data-plan-viewer="empty"] .site-plan__key {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.site-plan__sheet[data-plan-viewer="2"] .site-plan__key--one {
  opacity: 0;
  transform: translateY(6px);
}

.site-plan__sheet[data-plan-viewer="2"] .site-plan__key--two {
  opacity: 1;
  transform: translateY(0);
}

.site-plan__interaction-hint {
  background: color-mix(in srgb, var(--white) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  bottom: 5%;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.46rem, 0.54vw, 0.6rem);
  font-weight: 700;
  letter-spacing: 0.075em;
  opacity: 0;
  padding: 7px 10px;
  pointer-events: none;
  position: absolute;
  right: 5%;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: opacity 520ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
  z-index: 3;
}

.site-plan__sheet.is-populated:not([data-plan-viewer="blank"]):not([data-plan-viewer="empty"]) .site-plan__interaction-hint {
  opacity: 1;
  transform: translateY(0);
}

.site-plan:focus-visible .site-plan__sheet {
  outline: 2px solid var(--accent);
  outline-offset: 7px;
}

@media (max-width: 820px) {
  .concept-summary dl div {
    align-items: flex-start;
  }

  .site-plan__key {
    max-width: 82%;
  }

  .site-plan__facet {
    white-space: normal;
  }
}

@media (hover: none), (pointer: coarse) {
  .site-plan__sheet.is-populated .site-plan__drift {
    animation: none;
  }

  .site-plan__parallax {
    transform: translate3d(0, 0, 0);
    transition: none;
    will-change: auto;
  }

  .site-plan__art {
    transition-duration: 1900ms;
  }

  .site-plan__image {
    transition-duration: 850ms, 1900ms;
  }
}

/* RFD and market intelligence */
.corridor-intelligence {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
  border-top: 1px solid var(--line);
}

.corridor-intelligence__intro h2 {
  margin: 0;
  max-width: 720px;
}

.corridor-intelligence__body {
  display: grid;
  gap: 18px;
}

.intel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.intel-card {
  min-height: 190px;
  padding: clamp(22px, 3vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.42);
}

/* Lead statistic spans the full grid so the five cards read as a balanced
   1 + 2x2 block rather than a 2-column grid with a hole in the last row. */
.intel-card--lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  column-gap: clamp(24px, 5vw, 72px);
  align-items: start;
  min-height: 0;
}
.intel-card--lead > span {
  grid-area: 1 / 1;
}
.intel-card--lead > strong {
  grid-area: 2 / 1;
  margin: 12px 0 10px;
  font-size: clamp(2rem, 4.6vw, 3.2rem);
}
.intel-card--lead > p {
  grid-area: 3 / 1;
}
.intel-card__steps {
  grid-area: 1 / 2 / 4 / 3;
  display: grid;
  align-self: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.intel-card__steps li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  line-height: 1;
}
.intel-card__steps li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.intel-card__steps em {
  color: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 680px) {
  .intel-card--lead {
    display: block;
  }
  .intel-card__steps {
    margin-top: 20px;
  }
}

.intel-card span,
.rfd-form label span,
.agent-panel article span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.intel-card strong {
  display: block;
  margin: 14px 0 12px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1;
}

.intel-card p,
.intel-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.intel-note {
  max-width: 760px;
  font-size: 0.85rem;
}

.inquiry--form {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.inquiry--form p {
  max-width: none;
}

.inquiry__intro {
  max-width: 640px;
}

.rfd-form {
  display: grid;
  gap: 22px;
  padding-top: 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.rfd-form label {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.form-field--wide {
  grid-column: 1 / -1;
}

.rfd-form input,
.rfd-form select,
.rfd-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(17, 16, 13, 0.35);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 8px 0 10px;
  outline: none;
}

.rfd-form textarea {
  min-height: 104px;
  resize: vertical;
}

.rfd-form input:focus,
.rfd-form select:focus,
.rfd-form textarea:focus {
  border-bottom-color: var(--ink);
}

.rfd-form__actions {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.rfd-form__actions p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: right;
}

.agent-panel {
  border: 1px solid var(--line);
  padding: clamp(22px, 3vw, 32px);
  background: var(--paper);
}

.agent-panel[hidden] {
  display: none;
}

/* The RFD block transforms in place: the fields fade out, the form eases to the
   agent panel height, and the panel fades up into the space they occupied. */
.rfd-form {
  transition: height 520ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rfd-form__input {
  transition:
    opacity 300ms ease,
    transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

.rfd-form__input[hidden] {
  display: none;
}

/* Spam trap: kept out of the layout and out of the accessibility tree. */
.rfd-form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.rfd-form__error {
  margin: 0;
  border: 1px solid rgba(143, 109, 63, 0.55);
  padding: 14px 18px;
  background: rgba(143, 109, 63, 0.08);
  color: var(--ink);
  font-size: 0.92rem;
}

.rfd-form__error[hidden] {
  display: none;
}

.rfd-form.is-exiting .rfd-form__input {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
}

.rfd-form .agent-panel {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms ease 60ms,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}

.rfd-form.is-submitted .agent-panel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rfd-form,
  .rfd-form__input,
  .rfd-form .agent-panel {
    transition: none;
  }

  .rfd-form .agent-panel {
    opacity: 1;
    transform: none;
  }
}

.agent-panel h3 {
  margin: 10px 0 22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  font-weight: 400;
  line-height: 1.05;
}

.agent-panel__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.agent-panel article {
  display: grid;
  gap: 8px;
  background: var(--white);
  padding: 18px;
}

.agent-panel article strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.agent-panel a {
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 980px) {
  .corridor-intelligence,
  .inquiry--form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .intel-grid,
  .form-grid,
  .agent-panel__cards {
    grid-template-columns: 1fr;
  }

  .rfd-form__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .rfd-form__actions p {
    text-align: left;
  }
}



/* 837 birdseye context sequence */
.hero-birdseye {
  position: absolute;
  inset: 0;
  z-index: 9;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(3);
  transform-origin: 50% 50%;
  /* Leaving the bird's-eye has no animation to carry it, so the city used to
     cut straight back to the site view. Dissolve it out instead, and hold the
     camera where it finished until that dissolve has covered the reset to the
     opening scale. Animations override transitions, so entering a stage is
     unaffected. */
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0ms linear 900ms;
}

.hero-birdseye__layer,
.hero-birdseye__pin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-layer--full,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-layer--c1,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-layer--c2-load,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-layer--c2,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-highlight,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-traffic-overlay,
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-cloud {
  opacity: 0;
}

/* The bird's-eye view is a separate camera from the site plan. Neutralise the
   inherited site-plan transform (scale 1.2 and its 3200ms transition) so the
   city map is not multiplied to ~1.26x, is not rotated, and is not driven by
   two competing transforms at once -- which is what made the move judder. */
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-stage__inner {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* The drift layer keeps its ambient float so the city view stays quietly
   alive when the pointer is still or away, matching the earlier stages. Like
   the parallax layer it only translates, so it cannot reintroduce the scale
   conflict that caused the judder. */
@media (prefers-reduced-motion: no-preference) {
  .plot-card:is([data-focus="3"], [data-focus="4"]) .hero-stage__drift {
    animation: hero-hover-float 8200ms cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plot-card:is([data-focus="3"], [data-focus="4"]) .hero-stage__drift {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* The parallax layer keeps following the pointer so the city map drifts with
   the mouse like the earlier stages. It only carries a translation, so it
   cannot re-introduce the scale conflict that caused the judder. */
.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-stage__parallax {
  animation: none !important;
  transform: translate3d(var(--par-x), var(--par-y), 0) !important;
}

/* White flash that covers the cut from the site view into the city view. */
.hero-birdseye-flash {
  background: var(--white);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 10;
}

.plot-card[data-focus="3"] .hero-birdseye-flash {
  animation: hero-birdseye-flash 4200ms ease both;
}

.plot-card[data-focus="3"] .hero-birdseye {
  opacity: 1;
  /* linear, because the easing lives in the keyframe spacing itself: a
     per-keyframe bezier re-eases between every stop, which is what read as
     notchy rather than as one continuous pull-back. */
  animation: hero-birdseye-camera 4200ms linear both;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Every layer shares the single camera transform on .hero-birdseye, so the
   pin stays exactly scaled and aligned to the maps beneath it throughout. */
.plot-card[data-focus="3"] .hero-birdseye__layer--roads {
  animation: hero-birdseye-roads 4200ms ease both;
}

.plot-card[data-focus="3"] .hero-birdseye__layer--terrain {
  animation: hero-birdseye-terrain 4200ms ease both;
}

.plot-card[data-focus="3"] .hero-birdseye__layer--labels,
.plot-card[data-focus="3"] .hero-birdseye__pin {
  animation: hero-birdseye-labels 4200ms ease both;
}

.plot-card:is([data-focus="3"], [data-focus="4"]) .hero-callout--birdseye {
  opacity: 1;
  transform: translateY(0);
}

/* Fade to white over the site view, then hold briefly so the city view is
   revealed out of the white rather than cutting between two busy images. */
@keyframes hero-birdseye-flash {
  0% { opacity: 0; }
  7% { opacity: 1; }
  15% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}

/* One continuous camera move: starts tight on the roads and decelerates out
   to a gentle resting zoom (this element owns the camera outright, so the
   final value is the on-screen scale), leaving headroom so the closing float
   and pointer parallax never clip the artwork. Densely sampled so the timing
   function has nothing to re-ease between; the deceleration is carried by the
   spacing of the stops. */
@keyframes hero-birdseye-camera {
  0%   { opacity: 0; transform: scale(3.00); }
  8%   { opacity: 0; transform: scale(2.92); }
  14%  { opacity: 1; transform: scale(2.80); }
  20%  { opacity: 1; transform: scale(2.62); }
  28%  { opacity: 1; transform: scale(2.36); }
  36%  { opacity: 1; transform: scale(2.11); }
  44%  { opacity: 1; transform: scale(1.88); }
  52%  { opacity: 1; transform: scale(1.68); }
  60%  { opacity: 1; transform: scale(1.52); }
  68%  { opacity: 1; transform: scale(1.38); }
  76%  { opacity: 1; transform: scale(1.26); }
  84%  { opacity: 1; transform: scale(1.18); }
  92%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* Roads first, out of the white. */
@keyframes hero-birdseye-roads {
  0%, 10% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

/* Green and water settle over the roads. */
@keyframes hero-birdseye-terrain {
  0%, 34% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

/* Names, icons and the pin arrive last, as the camera reaches its 5% rest. */
@keyframes hero-birdseye-labels {
  0%, 68% { opacity: 0; }
  88%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plot-card[data-focus="3"] .hero-birdseye {
    animation: none;
    opacity: 1;
    transform: scale(1.08);
  }

  .plot-card[data-focus="3"] .hero-birdseye__layer--roads,
  .plot-card[data-focus="3"] .hero-birdseye__layer--terrain,
  .plot-card[data-focus="3"] .hero-birdseye__layer--labels,
  .plot-card[data-focus="3"] .hero-birdseye__pin {
    animation: none;
    opacity: 1;
  }
}


/* ------------------------------------------------------------------ *
 * Stage 4 — commercial landmarks
 *
 * The same city frame as stage 3, pushed 30% closer while the name tags
 * dissolve into the landmark tags. The zoom and the crossfade share one
 * duration and one curve so they read as a single move rather than a
 * fade that happens to coincide with a push-in.
 * ------------------------------------------------------------------ */

.plot-card[data-focus="4"] .hero-birdseye-flash {
  /* No flash here: this is a continuation of the same shot, not a cut. */
  animation: none;
  opacity: 0;
}

.plot-card[data-focus="4"] .hero-birdseye {
  opacity: 1;
  /* Picks up exactly where the stage 3 camera came to rest (1.08). */
  animation: hero-birdseye-closer 2800ms linear both;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* The base map stays put underneath; only the tag layers change. */
.plot-card[data-focus="4"] .hero-birdseye__layer--roads,
.plot-card[data-focus="4"] .hero-birdseye__layer--terrain {
  opacity: 1;
}

/* The landmark layer carries its own marker for the stand, so the separate
   pin would sit on top of it as a duplicate. It fades out with the name tags. */
.plot-card[data-focus="4"] .hero-birdseye__pin {
  animation: hero-birdseye-tags-out 2800ms ease both;
}

.plot-card[data-focus="4"] .hero-birdseye__layer--labels {
  animation: hero-birdseye-tags-out 2800ms ease both;
}

.plot-card[data-focus="4"] .hero-birdseye__layer--landmarks {
  animation: hero-birdseye-tags-in 2800ms ease both;
}

/* Densely sampled on linear for the same reason as the stage 3 camera: a
   per-keyframe bezier re-eases between every stop and reads as notchy. The
   ease-in-out is carried by the spacing of the stops. */
@keyframes hero-birdseye-closer {
  0%     { transform: scale(1.080); }
  12.5%  { transform: scale(1.100); }
  25%    { transform: scale(1.153); }
  37.5%  { transform: scale(1.227); }
  50%    { transform: scale(1.312); }
  62.5%  { transform: scale(1.397); }
  75%    { transform: scale(1.471); }
  87.5%  { transform: scale(1.524); }
  100%   { transform: scale(1.544); }
}

/* The name tags clear before the landmark tags resolve, so the two label
   sets never sit on top of each other as unreadable double text. */
@keyframes hero-birdseye-tags-out {
  0% { opacity: 1; }
  45%, 100% { opacity: 0; }
}

@keyframes hero-birdseye-tags-in {
  0%, 35% { opacity: 0; }
  80%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .plot-card[data-focus="4"] .hero-birdseye {
    animation: none;
    opacity: 1;
    transform: scale(1.544);
  }

  .plot-card[data-focus="4"] .hero-birdseye__layer--labels,
  .plot-card[data-focus="4"] .hero-birdseye__pin {
    animation: none;
    opacity: 0;
  }

  .plot-card[data-focus="4"] .hero-birdseye__layer--landmarks {
    animation: none;
    opacity: 1;
  }
}