@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/v3/PlusJakartaSans-latin-vietnamese.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --display: "Bodoni Moda", Georgia, serif;
  --base: #693e27;
  --header: #301c12;
  --ink: #fff8ed;
  --muted: #f9ead8;
  --quiet: #f2e2cb;
  --gold: #ffe2b8;
  --gold-mid: #ddb25c;
  --line: rgb(254 208 148 / 0.22);
  --gutter: clamp(1.25rem, 4.7vw, 5rem);
  --frame: min(calc(100% - var(--gutter) - var(--gutter)), 98rem);
  --header-height: 72px;
  --chapter-space: clamp(5rem, 9.5vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--base);
  scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
  isolation: isolate;
  margin: 0;
  color: var(--ink);
  font: 400 1rem/1.67 var(--sans);
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(49 22 11 / .26), rgb(49 22 11 / .59)),
    url("v4/nen-vang-du-an.webp") center / cover no-repeat,
    linear-gradient(115deg, #743b20, #ac7443);
}

main, section, article, figure { min-width: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { color: var(--ink); }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
img { width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
::selection { color: #191611; background: var(--gold); }

.skip-link {
  position: fixed;
  z-index: 40;
  inset: .75rem auto auto .75rem;
  padding: .65rem 1rem;
  transform: translateY(-180%);
  color: #191611;
  background: var(--gold);
}
.skip-link:focus { transform: translateY(0); }

.section-frame { width: var(--frame); margin-inline: auto; }
.chapter { padding-block-start: var(--chapter-space); }
.anchor-alias { position: absolute; pointer-events: none; }

h2 {
  font-size: clamp(2.65rem, 5.4vw, 6rem);
  font-weight: 640;
  letter-spacing: -.035em;
  line-height: 1.075;
  text-wrap: balance;
}

.section-lead {
  max-width: 60ch;
  margin-block-start: 1.15rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.23vw, 1.19rem);
  line-height: 1.7;
}

.section-intro { margin-block-end: clamp(1.8rem, 4vw, 3.75rem); }
figcaption, .caption { color: var(--quiet); font-size: .875rem; line-height: 1.5; }
figcaption { margin-block-start: .75rem; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: .66rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 99rem;
  font-size: .875rem;
  font-weight: 680;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.button-gold {
  color: #201812;
  background: linear-gradient(117deg, var(--gold), #e7bb76);
}
.button-gold:hover { background: var(--gold); }

.button-outline {
  color: var(--gold);
  border-color: rgb(254 208 148 / .64);
  background: rgb(25 23 18 / .14);
}
.button-outline:hover { color: #201812; background: var(--gold); border-color: var(--gold); }

.text-link {
  color: var(--gold);
  font-size: .875rem;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: .27em;
}
.text-link:hover { color: var(--ink); }

.site-header {
  position: fixed;
  z-index: 20;
  inset: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition: background-color .28s ease, border-color .28s ease;
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: var(--frame);
  min-height: var(--header-height);
  gap: clamp(1rem, 2vw, 2.5rem);
  margin-inline: auto;
}

.site-header.is-scrolled, .menu-open .site-header {
  background: rgb(48 28 18 / .96);
  border-bottom-color: var(--line);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header.is-scrolled, .menu-open .site-header {
    background: rgb(48 28 18 / .88);
    backdrop-filter: blur(16px);
  }
}

.brand { display: inline-flex; width: clamp(8.6rem, 11vw, 10.35rem); flex: 0 0 auto; }
.brand img { aspect-ratio: 962 / 297; }
.site-nav, .header-actions { display: flex; align-items: center; }
.site-nav { gap: clamp(.95rem, 1.55vw, 1.65rem); }
.header-actions { gap: .65rem; flex: 0 0 auto; }

.site-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 620;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover, .site-nav a[aria-current="location"] { color: var(--gold); }
.header-cta { min-height: 42px; }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-content: center;
  justify-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgb(48 28 18 / .42);
}

.menu-toggle span {
  display: block;
  width: 17px;
  height: 1px;
  background: var(--ink);
  transition: transform .2s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: end;
  min-height: 100svh;
  padding-block: calc(var(--header-height) + 1rem) clamp(3.75rem, 8svh, 7rem);
}

.hero-media {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: clip;
  mask-image: linear-gradient(#000 67%, transparent);
}
.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 48%;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero-media img.is-active { opacity: 1; }

.hero-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgb(38 21 12 / .66), transparent 26%),
    linear-gradient(90deg, rgb(38 21 12 / .68), rgb(38 21 12 / .34) 40%, transparent 72%);
  pointer-events: none;
}

.hero-kicker {
  margin-block-end: 1.05rem;
  color: var(--gold);
  font-size: .875rem;
  font-weight: 720;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1 {
  font-size: clamp(4.15rem, 8.7vw, 9.4rem);
  font-weight: 690;
  letter-spacing: -.04em;
  line-height: .99;
}

.hero h1 span { color: #ffdcac; }
.hero-subtitle { max-width: 32rem; margin-block: 1.15rem 1.55rem; font-size: clamp(1rem, 1.35vw, 1.25rem); }

.overview { padding-block-start: clamp(3.8rem, 6.5vw, 7rem); }
.overview-layout { display: grid; grid-template-columns: minmax(0, .83fr) minmax(0, 1.62fr); gap: clamp(1.5rem, 5vw, 5.5rem); align-items: center; }
.overview-copy h2 { font-size: clamp(3.1rem, 6.15vw, 7.25rem); }
.overview-developer { margin-block-start: 1.65rem; color: var(--quiet); font-size: .9rem; }
.overview-developer strong { display: block; color: var(--gold); font-size: 1.05rem; }
.overview-media img { aspect-ratio: 16 / 10; object-fit: cover; }

.overview-facts {
  display: grid;
  grid-template-columns: 1.16fr repeat(4, 1fr);
  gap: 1.25rem;
  margin-block-start: clamp(2.25rem, 4.4vw, 4rem);
  padding-block-start: 1.3rem;
  border-top: 1px solid var(--line);
}

.overview-facts > div { display: flex; min-width: 0; flex-direction: column-reverse; justify-content: flex-end; }
.overview-facts dt { margin-block-start: .5rem; color: var(--muted); font-size: .92rem; }
.overview-facts dd {
  color: var(--gold);
  font-size: clamp(2rem, 4vw, 4.65rem);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
  white-space: nowrap;
}
.overview-facts dd span { font-size: .38em; letter-spacing: 0; }

.location { margin-block-start: var(--chapter-space); }
.location-scene { display: grid; align-items: center; isolation: isolate; }
.location-media, .location-copy { grid-area: 1 / 1; }
.location-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  mask-image: linear-gradient(180deg, transparent, #000 3%, #000 94%, transparent);
}
.location-media img, .location-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.auto-scene { opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.auto-scene.is-playing { opacity: 1; }

.location-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgb(77 37 19 / .88), rgb(78 40 22 / .73) 27%, transparent 51%);
  pointer-events: none;
}

.location-copy {
  z-index: 1;
  width: clamp(16.8rem, 31vw, 29rem);
  margin-inline-start: max(var(--gutter), calc((100% - 98rem) / 2));
  padding-block: clamp(1.5rem, 3vw, 3rem);
}

.location-copy h2 { font-size: clamp(2.5rem, 4.5vw, 5.6rem); }
.location-lead { margin-block: .8rem 1.15rem; font-size: clamp(.88rem, 1.08vw, 1.04rem); line-height: 1.54; }
.location-times { display: grid; gap: clamp(.55rem, 1.15vw, 1.1rem); }
.location-times > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem;
}
.location-times dt { grid-column: 2; grid-row: 1; font-size: clamp(.875rem, 1.1vw, 1.02rem); line-height: 1.42; }
.location-times dd {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  width: clamp(2.7rem, 4.6vw, 4.25rem);
  aspect-ratio: 1;
  border: 1px solid #fbe0b5;
  border-radius: 50%;
  color: #673717;
  background: #ffe9c6;
  font: 650 clamp(1.4rem, 2.6vw, 2.3rem)/.98 var(--display);
  font-variant-numeric: tabular-nums;
}
.location-times dd span { margin-top: .2rem; font: 650 .66rem/1 var(--sans); }
.location-note { margin-block-start: .9rem; font-size: .78rem; }

.regional-legend {
  display: grid;
  grid-template-columns: minmax(0, 2.8fr) minmax(11rem, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block-start: 1.65rem;
}
.regional-legend h3, .masterplan-legend h4 { margin: 0 0 .65rem; font-size: 1rem; font-weight: 680; }
.regional-industry .map-markers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.regional-industry .map-marker { color: #d5f3ff; border-color: #a1d5ec; }
.regional-bridges .map-marker { color: #ffded5; border-color: #f8b1a2; }
.map-markers, .plan-symbols { display: grid; gap: .38rem .85rem; margin: 0; padding: 0; list-style: none; }
.map-markers li, .plan-symbols li { display: flex; align-items: flex-start; gap: .5rem; font-size: .86rem; line-height: 1.48; }
.map-marker {
  display: inline-grid;
  flex: 0 0 1.42rem;
  place-items: center;
  min-height: 1.42rem;
  border: 1px solid rgb(255 226 184 / .64);
  border-radius: 50%;
  color: var(--gold);
  font-size: .69rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.district-list { display: grid; gap: clamp(3rem, 5.2vw, 5.8rem); margin-block-start: clamp(1.1rem, 2.5vw, 2rem); }
.district { display: grid; grid-template-columns: minmax(0, 1.74fr) minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4.2vw, 4.75rem); }
.district-wide { display: block; }
.district + .district { padding-block-start: clamp(2.25rem, 4.2vw, 4.8rem); border-top: 1px solid var(--line); }
.district-media img { aspect-ratio: 16 / 10; object-fit: cover; }

.masterplan { position: relative; max-width: 120rem; margin-inline: auto; }
.masterplan-heading { margin-block-end: 1rem; }
.masterplan-heading h3 { font-size: clamp(1.75rem, 3.45vw, 3.7rem); font-weight: 620; letter-spacing: -.03em; }
.masterplan-image img { width: 100%; height: auto; }
.masterplan-legend {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.5rem);
  width: var(--frame);
  margin: .2rem auto 0;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: .7rem;
  background: linear-gradient(145deg, rgb(125 73 37 / .8), rgb(80 38 18 / .84));
}
.masterplan-legend .map-markers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-swatch {
  flex: 0 0 1.85rem;
  height: 1rem;
  margin-block-start: .1rem;
  overflow: hidden;
}
.district-wide .district-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
  column-gap: clamp(1.4rem, 4vw, 4rem);
  margin-block-start: 1.5rem;
}
.district-wide .district-copy > p { grid-column: 1; }
.district-wide .district-facts { grid-column: 1; }
.district-wide .district-details { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

@media (min-width: 1440px) {
  .masterplan { display: grid; grid-template-columns: minmax(0, 1fr) 21%; align-items: center; }
  .masterplan-image { grid-area: 1 / 1 / 2 / 3; align-self: start; }
  .masterplan-legend {
    z-index: 1;
    grid-area: 1 / 2;
    width: auto;
    grid-template-columns: 1fr;
    gap: .7rem;
    margin: .5rem 1rem .5rem 0;
    padding: .9rem;
    background: linear-gradient(145deg, rgb(125 73 37 / .96), rgb(80 38 18 / .94));
  }
  .masterplan-legend h4 { margin-block-end: .48rem; font-size: .94rem; line-height: 1.3; }
  .masterplan-legend .map-markers { grid-template-columns: 1fr; }
  .masterplan-legend .map-markers, .masterplan-legend .plan-symbols { row-gap: .24rem; }
  .masterplan-legend .map-markers li, .masterplan-legend .plan-symbols li { font-size: .8rem; line-height: 1.36; }
  .masterplan-legend .map-marker { flex-basis: 1.2rem; min-height: 1.2rem; }
}

.district-copy h3 {
  font-size: clamp(1.95rem, 3.15vw, 3.65rem);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.district-copy > p { margin-block-start: .7rem; color: var(--muted); }
.district-facts { display: grid; grid-template-columns: 1fr .92fr 1.15fr; gap: .7rem; margin-block: 1.35rem 1.6rem; }
.district-facts > div { display: flex; flex-direction: column-reverse; align-self: flex-start; min-width: 0; }
.district-facts dt { margin-block-start: .3rem; color: var(--quiet); font-size: .75rem; line-height: 1.4; }
.district-facts dd { color: var(--gold); font-size: clamp(1.24rem, 2.13vw, 2.33rem); font-weight: 600; line-height: 1.1; letter-spacing: -.06em; white-space: nowrap; }
.district-details { display: grid; gap: .62rem; padding-block-start: .9rem; border-top: 1px solid var(--line); font-size: .875rem; }
.district-details > div { display: grid; grid-template-columns: 1fr 1.35fr; gap: .9rem; }
.district-details dt { color: var(--quiet); }
.district-details dd { color: var(--ink); font-weight: 550; }

.collection-intro { margin-block-end: clamp(1.5rem, 2.8vw, 2.5rem); }
.collection-stage { position: relative; }
.collection-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(11rem, .96fr) minmax(0, 3.35fr) minmax(12rem, 1fr);
  grid-template-areas: "copy media specs";
  align-items: center;
  width: var(--frame);
  min-height: clamp(25rem, 46vw, 43rem);
  gap: clamp(1.15rem, 2.05vw, 2.5rem);
  margin-inline: auto;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--line);
}

.collection-copy { grid-area: copy; min-width: 0; }
.collection-media { grid-area: media; min-width: 0; overflow: clip; }
.collection-specs { grid-area: specs; min-width: 0; }
.collection-media img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.collection-panel[data-index="3"] .collection-media img { aspect-ratio: 1600 / 1066; object-fit: contain; }

.collection-number { margin-block-end: .85rem; color: var(--gold); font-size: .88rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.collection-number span { color: var(--quiet); font-weight: 500; }
.collection-copy h3 {
  font-family: var(--display);
  font-size: clamp(2.45rem, 3.95vw, 4.65rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.02em;
}
.collection-copy h3 span { display: block; }
.collection-panel[data-index="3"] .collection-copy h3 { font-size: clamp(2.15rem, 3.3vw, 4rem); }
.collection-type { margin-block-start: .78rem; color: var(--gold); font-size: .97rem; font-weight: 630; }
.collection-headline { max-width: 24ch; margin-block: .4rem 1.1rem; color: var(--muted); font-size: .96rem; line-height: 1.52; }
.collection-specs > p { color: var(--muted); font-size: .95rem; line-height: 1.58; }
.collection-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem .7rem; margin-block-start: 1.1rem; }
.collection-facts > div { padding-block-start: .54rem; border-top: 1px solid var(--line); }
.collection-facts dt { color: var(--quiet); font-size: .75rem; line-height: 1.35; }
.collection-facts dd { margin-block-start: .23rem; color: var(--ink); font-size: .86rem; font-weight: 680; line-height: 1.4; }
.collections-enhanced .collection-stage {
  height: calc(100svh - var(--collection-header, var(--header-height)));
  isolation: isolate;
}

.collections-enhanced .collection-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: radial-gradient(ellipse at 53% 51%, var(--collection-glow, rgb(254 208 148 / .11)), transparent 73%);
  pointer-events: none;
}

.collections-enhanced .collection-panel {
  position: absolute;
  inset: 0;
  min-height: 0;
  padding-block: 0;
  border-bottom: 0;
  pointer-events: none;
}
.collections-enhanced .collection-panel.is-active { pointer-events: auto; }

.collections-enhanced .collection-media img {
  max-height: calc(100svh - var(--collection-header, var(--header-height)) - 2.5rem);
  object-fit: contain;
}

.sample-views, .floorplan-grid, .amenity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.4rem); }
.sample-views img { aspect-ratio: 3 / 2; object-fit: cover; }
.floorplan-grid { margin-block-start: clamp(2.1rem, 4.5vw, 4rem); row-gap: clamp(1.75rem, 3.1vw, 3.25rem); }
.floorplan img { height: auto; background: #fff; }
.floorplan figcaption { color: var(--ink); font-size: .94rem; font-weight: 630; }

.amenity-photo img { aspect-ratio: 16 / 9; object-fit: cover; }
.amenity-lead .amenity-photo img { aspect-ratio: 2.08; object-position: 50% 57%; }
.amenity-photo figcaption { display: flex; justify-content: space-between; gap: 1rem; }
.amenity-photo h3 { font-size: clamp(1.03rem, 1.65vw, 1.7rem); font-weight: 630; line-height: 1.28; letter-spacing: -.034em; }
.amenity-photo figcaption p { max-width: 57ch; margin-block-start: .36rem; color: var(--muted); }
.amenity-photo figcaption span { flex-shrink: 0; line-height: 1.8; }
.amenity-grid { margin-block-start: clamp(1.65rem, 3.75vw, 4rem); row-gap: clamp(1.95rem, 4.4vw, 4.7rem); }

.policy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 74rem;
  gap: clamp(1rem, 3vw, 2.8rem);
  margin-block-start: 1rem;
}
.policy-item img { width: 100%; height: auto; }
.policy-note { max-width: 75ch; color: var(--muted); font-size: .94rem; }

.progress-grid { display: grid; grid-template-columns: 1.3fr repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); }
.progress-photo img { height: auto; object-fit: contain; }

.consult {
  padding-block-end: var(--chapter-space);
}

.consult-stage {
  --door-motif: url("v3/hoa-tiet-thuong-hieu-salekit.webp");
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(31rem, 60%) minmax(0, 1fr);
  align-items: stretch;
}
.consult-stage::before, .consult-stage::after {
  grid-row: 1;
  content: "";
  background:
    linear-gradient(rgb(255 245 228 / .43), rgb(255 245 228 / .43)),
    var(--door-motif) center / 24rem auto repeat;
}
.consult-stage::before {
  grid-column: 1;
  mask-image: linear-gradient(90deg, transparent, #000 47%);
}
.consult-stage::after {
  grid-column: 3;
  mask-image: linear-gradient(270deg, transparent, #000 47%);
}
.consult-room {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: clip;
  padding: clamp(1.35rem, 4.5vw, 3rem);
  border: 1px solid #d5a76d;
  color: #392417;
  color-scheme: light;
  background: linear-gradient(160deg, #fffaf0, #f8e9d4);
}
.consult-copy { margin-block-end: 1.65rem; text-align: center; }
.consult-kicker {
  margin-block-end: .65rem;
  color: #75411f;
  font-size: .75rem;
  font-weight: 690;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.consult-copy h2 { color: #693a21; font-size: clamp(2rem, 4.1vw, 3.9rem); font-weight: 560; }
.consult-copy .section-lead { margin: .75rem auto 0; color: #624735; font-size: .92rem; }

#consult-form { min-width: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-block-end: 1rem; }
#consult-form label { display: block; margin-block-end: .2rem; color: #392417; font-size: .86rem; font-weight: 650; }
#consult-form input, #consult-form select, #consult-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: .32rem .1rem .48rem;
  border: 0;
  border-bottom: 1px solid #996b4e;
  border-radius: 0;
  color: #392417;
  background: transparent;
}
#consult-form :focus-visible { outline-color: #945831; }
#consult-form option { color: #392417; background: #fff7e9; }
#consult-form textarea { resize: vertical; }
#consult-intent, #product-context { margin-block-end: 1rem; }
#preview-request { display: flex; width: fit-content; margin: 1.2rem auto 0; }
.consult-room .caption, .optional { color: #624735; }
.optional { font-weight: 400; }
.form-note { margin-block-start: .75rem; }
.form-feedback { margin-block-start: .9rem; padding: .75rem 1rem; border-inline-start: 2px solid #a06736; }
.form-feedback h4 { margin: 0 0 .5rem; }
.form-feedback dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: .24rem .7rem; }
.form-feedback dt, .form-feedback p { color: #624735; }
.form-feedback p { margin-block-start: .45rem; }

.consult-doors {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: none;
  perspective: 1050px;
  pointer-events: none;
}
.doors-ready .consult-doors { display: block; }
.consult-door {
  position: absolute;
  inset-block: 0;
  width: 50%;
  border: 1px solid #965c31;
  background:
    linear-gradient(155deg, rgb(255 229 182 / .35), rgb(112 59 28 / .6)),
    var(--door-motif) center / 20rem auto repeat;
  backface-visibility: hidden;
  transition: transform 1.04s cubic-bezier(.24, .68, .23, 1);
}
.door-left { left: 0; transform-origin: left center; }
.door-right { right: 0; transform-origin: right center; }
.consult-door::before {
  position: absolute;
  inset: clamp(.45rem, 1.25vw, 1rem);
  content: "";
  border: 1px solid rgb(255 243 215 / .72);
  box-shadow: 0 0 0 1px rgb(113 60 29 / .4);
}
.consult-door::after {
  position: absolute;
  top: min(42%, 17rem);
  width: 6px;
  height: 2.45rem;
  content: "";
  border: 1px solid #825229;
  border-radius: 5px;
  background: linear-gradient(90deg, #c88a50, #ffdfa4, #9a6334);
  box-shadow: 0 2px 4px rgb(79 42 20 / .5);
}
.door-left::after { right: .85rem; }
.door-right::after { left: .85rem; }
.doors-open .door-left { transform: rotateY(-103deg); }
.doors-open .door-right { transform: rotateY(103deg); }
.doors-ready:focus-within .consult-doors { display: none; }

.site-footer { border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.6rem; padding-block: 2.1rem; }
.footer-inner > a:last-child { flex-shrink: 0; }

@media (max-width: 1119px) {
  .collection-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
    grid-template-areas: "media media" "copy specs";
    align-items: start;
    padding-block: 1.8rem 2.8rem;
  }
  .collection-copy h3, .collection-panel[data-index="3"] .collection-copy h3 { font-size: clamp(2.85rem, 5.4vw, 4.9rem); }
  .collection-copy h3 span { display: inline; }
  .collection-specs { padding-block-start: .3rem; }
  .collections-enhanced .collection-panel {
    grid-template-columns: minmax(8.5rem, 1fr) minmax(0, 2.8fr) minmax(10.5rem, 1.2fr);
    grid-template-areas: "copy media specs";
    align-items: center;
    gap: clamp(.9rem, 1.7vw, 1.25rem);
  }
  .collections-enhanced .collection-copy h3,
  .collections-enhanced .collection-panel[data-index="3"] .collection-copy h3 {
    font-size: clamp(1.95rem, 3.3vw, 2.65rem);
  }
  .collections-enhanced .collection-copy h3 span { display: block; }
}

@media (max-width: 1023px) {
  :root { --header-height: 64px; }
  .site-header { position: sticky; background: var(--header); }
  .header-inner { flex-wrap: wrap; gap: 0 1rem; }
  .site-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 0 1.15rem; }
  body.menu-open { overflow: hidden; }
  html.menu-ready .site-header { position: fixed; background-color: transparent; }
  html.menu-ready .site-header.is-scrolled, html.menu-ready .menu-open .site-header { background-color: rgb(48 28 18 / .94); }
  html.menu-ready .menu-toggle { display: grid; }
  html.menu-ready .site-nav {
    position: fixed;
    inset: var(--header-height) 0 auto;
    width: auto;
    max-height: calc(100dvh - var(--header-height));
    display: grid;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .45rem var(--gutter) 1.25rem;
    gap: 0;
    border-bottom: 1px solid var(--line);
    background: var(--header);
  }
  html.menu-ready .site-nav a { min-height: 49px; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .district { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 1.65rem; }
  .district-facts dd { font-size: 1.35rem; }
  .regional-industry .map-markers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .location-scene { display: block; }
  .location-media::after { background: none; }
  .location-copy {
    width: var(--frame);
    margin: 1.3rem auto 0;
    padding-block: 0;
  }
  .location-copy h2 br { display: none; }
  .location-lead { max-width: 55ch; font-size: 1rem; }
  .location-times { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.4rem; }
}

@media (max-width: 767px) {
  h2 { letter-spacing: -.03em; }
  .hero { padding-block-end: clamp(3.2rem, 8svh, 5.15rem); }
  .hero-media img { object-position: 57% 49%; }
  .hero-media::after {
    background: linear-gradient(180deg, rgb(38 21 12 / .73), transparent 26%, transparent 36%, rgb(38 21 12 / .76) 76%);
  }
  .hero h1 { font-size: clamp(3.55rem, 12.75vw, 6.3rem); }
  .hero-subtitle { max-width: 22rem; }
  .overview-layout { grid-template-columns: 1fr; }
  .overview-copy h2 br { display: none; }
  .overview-copy h2 { font-size: clamp(2.9rem, 9vw, 4.55rem); }
  .overview-media img { aspect-ratio: 16 / 9; }
  .overview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.45rem; }
  .overview-facts > div:first-child { grid-column: span 2; }
  .overview-facts dd { font-size: clamp(2.15rem, 7.8vw, 3.8rem); }
  .overview-facts dt { font-size: .86rem; }
  .location-copy h2 { font-size: clamp(2.65rem, 8.1vw, 4.3rem); }
  .regional-legend { grid-template-columns: 1fr; }
  .district { grid-template-columns: 1fr; gap: 1.1rem; }
  .district-media img { aspect-ratio: 16 / 9; }
  .masterplan-legend, .district-wide .district-copy { grid-template-columns: 1fr; }
  .district-wide .district-details { grid-column: 1; grid-row: auto; }
  .district-copy h3 { font-size: clamp(2.05rem, 7.5vw, 3.25rem); }
  .district-facts dd { font-size: clamp(1.55rem, 6vw, 2.35rem); }
  .district-details { font-size: .88rem; }
  .collection-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "copy" "specs";
    gap: .85rem;
    padding-block: 1rem 1.95rem;
  }
  .collection-panel + .collection-panel { padding-block-start: 2rem; }
  .collection-copy h3, .collection-panel[data-index="3"] .collection-copy h3 { font-size: clamp(2.45rem, 9vw, 4rem); }
  .collection-number { margin-block-end: .46rem; }
  .collection-type { margin-block-start: .42rem; }
  .collection-specs > p { font-size: 1rem; }
  .collection-facts dt { font-size: .81rem; }
  .collection-facts dd { font-size: .94rem; }
  .sample-views, .floorplan-grid, .amenity-grid { grid-template-columns: 1fr; }
  .amenity-lead .amenity-photo img { aspect-ratio: 16 / 9; }
  .amenity-photo figcaption { align-items: baseline; gap: .65rem; }
  .amenity-photo h3 { font-size: 1.13rem; }
  .amenity-photo figcaption span { font-size: .77rem; }
  .policy-grid, .progress-grid { grid-template-columns: 1fr; }
  .consult-stage { grid-template-columns: .65rem minmax(0, 1fr) .65rem; }
  .policy-grid { gap: .3rem; }
  .progress-grid { gap: 1.5rem; }
  .footer-inner { flex-wrap: wrap; align-items: flex-start; gap: .95rem 1.3rem; }
}

@media (max-width: 390px) {
  .brand { width: 8.1rem; }
  .header-actions { gap: .42rem; }
  .header-cta { padding-inline: .8rem; }
  .form-row { grid-template-columns: 1fr; }
  .location-times { grid-template-columns: 1fr; }
  .regional-industry .map-markers, .masterplan-legend .map-markers { grid-template-columns: 1fr; }
  .district-details > div { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .auto-scene { display: none; }
  .doors-ready .consult-doors { display: none; }
}