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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Host Grotesk", -apple-system, sans-serif;
  background: #f3efe6;
  color: #1c1a17;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

::selection {
  background: #c19a4f;
  color: #1c1a17;
}

:root {
  --announce-h: 42px;
  --nav-h: 78px;
  --gold: #c19a4f;
  --ink: #1c1a17;
  --cream: #f3efe6;
}

/* The leasing bar is optional. Zero its height when it isn't on the page so
   the nav and the hero still land flush with the viewport. */
body:not(:has(#announce)) {
  --announce-h: 0px;
}

section[id] {
  scroll-margin-top: calc(var(--nav-h) + var(--announce-h) + 10px);
}

.page {
  min-height: 100vh;
  background: #f3efe6;
}

/* ========== ANNOUNCE ========== */
.announce {
  position: sticky;
  top: 0;
  z-index: 110;
  height: var(--announce-h);
  background: var(--gold);
  color: var(--ink);
  overflow: hidden;
  border-bottom: 1px solid #9a7434;
}

.announce__viewport {
  height: 100%;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.announce__track {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  min-height: var(--announce-h);
}

.announce.is-ready .announce__track {
  width: max-content;
  justify-content: flex-start;
  animation: announce-rotate linear infinite;
}

/* Pause in place while the pointer is over the bar, and while a link is
   reached from the keyboard. A click focuses the link too, but that must
   not pin the bar after the pointer leaves. */
@media (hover: hover) and (pointer: fine) {
  .announce:hover .announce__track {
    animation-play-state: paused;
  }
}

.announce:has(a:focus-visible) .announce__track {
  animation-play-state: paused;
}

.announce__seq,
.announce__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.announce__item {
  padding: 0 2.4rem;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.045em;
  white-space: nowrap;
  line-height: 1;
}

.announce__item a {
  display: inline-flex;
  align-items: center;
  min-height: var(--announce-h);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.announce__item a:hover {
  color: #3a2c14;
}

.announce__item a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.announce__sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ink);
  opacity: 0.4;
  flex-shrink: 0;
}

@keyframes announce-rotate {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========== NAV ========== */
.nav {
  position: sticky;
  top: var(--announce-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 4vw, 56px);
  height: var(--nav-h);
  background: rgba(243, 239, 230, 0.86);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid #e0d8c7;
  transition: background 320ms ease, border-color 320ms ease;
}

.nav__logo {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  cursor: pointer;
}

.nav__logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: opacity 320ms ease;
}

/* Both marks are stacked so the swap crossfades with the bar's tint. */
.nav__logo-img--light {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
}

/* Frosted glass takes the tone of what it sits over: cream on the light
   sections, dark over the hero video and the dark bands. A cream tint over
   those dark sections would only ever blend down to a muddy grey. */
.nav.is-ramping {
  transition: none;
}

/* Over the hero the glass thickens as you scroll (see --nav-* in main.js), so
   the video reads cleanly at rest and the copy still passes behind frost. */
.nav.is-dark {
  background: rgba(18, 16, 13, var(--nav-tint, 0.55));
  backdrop-filter: blur(var(--nav-blur, 18px)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--nav-blur, 18px)) saturate(1.2);
  border-bottom-color: rgba(243, 239, 230, var(--nav-rule, 0.14));
}

.nav.is-dark .nav__logo-img--dark {
  opacity: 0;
}

.nav.is-dark .nav__logo-img--light {
  opacity: 1;
}

.nav.is-dark .nav__link {
  color: rgba(243, 239, 230, 0.88);
}

.nav.is-dark .nav__link:hover {
  color: #dcb771;
}

.nav.is-dark .nav__cta {
  background: #f3efe6;
  color: #1c1a17;
}

.nav.is-dark .nav__cta:hover {
  background: #c19a4f;
}

.nav.is-dark .nav__burger {
  border-color: rgba(243, 239, 230, 0.55);
  color: #f3efe6;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 38px);
}

.nav__link {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #3b362c;
  cursor: pointer;
  transition: color 320ms ease;
}

.nav__link:hover {
  color: #c19a4f;
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1c1a17;
  color: #f3efe6;
  padding: 11px 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 320ms ease, color 320ms ease;
}

.nav__cta:hover {
  background: #c19a4f;
  color: #1c1a17;
}

.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: transparent;
  border: 1px solid #c8bfa9;
  color: #1c1a17;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  transition: border-color 320ms ease, color 320ms ease;
}

/* Fixed so opening the menu never shifts the hero out from under the nav. */
.mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--nav-h) + var(--announce-h));
  left: 0;
  right: 0;
  z-index: 99;
  max-height: calc(100svh - var(--nav-h) - var(--announce-h));
  overflow-y: auto;
  background: #f3efe6;
  border-bottom: 1px solid #e0d8c7;
  padding: 20px clamp(20px, 4vw, 56px) 26px;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.is-open {
  display: flex;
}

/* The open menu sits on a dim page that no longer scrolls. */
body.is-menu-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.is-menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 18, 15, 0.45);
}

.mobile-menu__link {
  font-size: 17px;
  font-weight: 500;
  color: #1c1a17;
  padding: 14px 0;
  border-bottom: 1px solid #e0d8c7;
  cursor: pointer;
}

.mobile-menu__cta {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c1a17;
  color: #f3efe6;
  padding: 16px 22px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

/* ========== HERO ========== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #14120f;
  /* Slide up under the sticky nav so the video runs edge to edge. */
  margin-top: calc(var(--nav-h) * -1);
  /* Vertical rhythm keys off viewport height so the stats bar stays above the
     fold on short laptop screens as well as tall desktops. The leasing bar
     sits above this section, so the hero is one viewport minus that bar —
     otherwise the metric labels fall past the fold. */
  padding: calc(var(--nav-h) + clamp(24px, 6vh, 80px)) clamp(20px, 4vw, 56px) clamp(20px, 3vh, 52px);
  min-height: calc(100vh - var(--announce-h));
  min-height: calc(100svh - var(--announce-h));
  display: flex;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__poster,
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* The poster carries the hero until the video is actually painting frames,
   and stays put if the video is skipped or fails. */
.hero__video {
  opacity: 0;
  transition: opacity 900ms ease;
}

.hero__video.is-playing {
  opacity: 1;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(18, 16, 13, 0.68) 0%, rgba(18, 16, 13, 0.34) 38%, rgba(18, 16, 13, 0.82) 100%),
    radial-gradient(ellipse 120% 85% at 28% 42%, rgba(18, 16, 13, 0.1) 0%, rgba(18, 16, 13, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(24px, 4vh, 64px);
}

.hero__copy {
  min-width: 0;
  max-width: 900px;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.eyebrow {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c19a4f;
}

.hero__eyebrow {
  margin-bottom: clamp(16px, 2.6vh, 28px);
  color: #dcb771;
}

.hero__title {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(36px, min(5.2vw, 8vh), 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(18px, 2.6vh, 26px);
  color: #f7f4ec;
  text-shadow: 0 1px 30px rgba(18, 16, 13, 0.45);
  text-wrap: balance;
  width: 100%;
  max-width: 100%;
}

.hero__title em {
  font-style: italic;
  color: #dcb771;
}

.hero__body {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(243, 239, 230, 0.84);
  max-width: 560px;
  margin: 0 0 clamp(20px, 3.4vh, 32px);
}

.audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #1c1a17;
  color: #f3efe6;
  padding: 16px 30px;
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
}

.audio-btn:hover {
  background: #c19a4f;
  color: #1c1a17;
}

.hero .audio-btn {
  background: rgba(243, 239, 230, 0.12);
  border: 1px solid rgba(243, 239, 230, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #f3efe6;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.hero .audio-btn:hover {
  background: #c19a4f;
  border-color: #c19a4f;
  color: #1c1a17;
}

.audio-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #c19a4f;
  color: #1c1a17;
  flex-shrink: 0;
  transition: background 220ms ease, color 220ms ease;
}

/* Hover fills the button with the same gold as the badge, so invert the badge
   to keep the circle from disappearing into it. */
.audio-btn:hover .audio-btn__badge {
  background: #1c1a17;
  color: #c19a4f;
}

/* Drawn rather than typed: ▶ and ❚❚ get substituted with colour emoji on iOS. */
.audio-btn__icon {
  width: 11px;
  height: 11px;
  display: block;
}

/* A triangle reads as off-centre when its bounding box is centred. */
.audio-btn__icon--play {
  margin-left: 1px;
}

.audio-btn__icon--pause {
  display: none;
}

.audio-btn.is-playing .audio-btn__icon--play {
  display: none;
}

.audio-btn.is-playing .audio-btn__icon--pause {
  display: block;
}

.audio-btn__label {
  font-size: 16px;
}

/* ========== STATS ========== */
.stats {
  align-self: end;
  border-top: 1px solid rgba(243, 239, 230, 0.22);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.stats__cell {
  padding: clamp(14px, 2vh, 26px) 28px;
  border-right: 1px solid rgba(243, 239, 230, 0.22);
}

.stats__cell:first-child {
  padding-left: 0;
}

.stats__cell:last-child {
  border-right: none;
}

.stats__value {
  font-family: "Host Grotesk", sans-serif;
  font-size: clamp(28px, min(3.4vw, 5.6vh), 50px);
  line-height: 1;
  color: #f7f4ec;
}

.stats__value span {
  color: #dcb771;
}

.stats__label {
  font-family: "Host Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 239, 230, 0.62);
  margin-top: 10px;
}

/* ========== ETHOS ========== */
.ethos {
  padding: clamp(72px, 9vw, 140px) clamp(20px, 4vw, 56px);
  background: #1c1a17;
  color: #f3efe6;
}

.ethos__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.ethos__eyebrow {
  margin-bottom: 34px;
}

.ethos__lead {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.8vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 48px;
  text-wrap: balance;
}

.ethos__lead em {
  font-style: italic;
  color: #c19a4f;
}

.ethos__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  border-top: 1px solid #3a352b;
  padding-top: 44px;
}

.ethos__grid p {
  font-size: 17px;
  line-height: 1.7;
  color: #bdb4a2;
  margin: 0;
}

/* ========== DIVISIONS INTRO ========== */
.divisions-intro {
  padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 56px) clamp(24px, 3vw, 40px);
}

.divisions-intro__inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* Two columns on the same rhythm as the divisions below, so the paragraph
   sits over their column of copy instead of drifting off to the right. */
.divisions-intro__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
}

.divisions-intro__eyebrow {
  margin-bottom: 22px;
}

.divisions-intro__title {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  color: #1c1a17;
}

.divisions-intro__body {
  font-size: 17px;
  line-height: 1.7;
  color: #5e584d;
  max-width: 520px;
  margin: 0;
}

/* ========== DIVISION BLOCK ========== */
.division {
  padding: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 56px);
}

/* Each division opens on a rule so 01 and 02 read as two separate things.
   Inset to the content, not bled to the window, to line up with the rules
   inside the sections. */
.division::before {
  content: "";
  display: block;
  max-width: 1320px;
  margin: 0 auto clamp(36px, 4.5vw, 60px);
  border-top: 1px solid #ddd5c2;
}

.division__grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}

/* The photo takes its height from the column of copy beside it rather than
   from a fixed shape, so neither side is left with a stretch of nothing. */
.division__media {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background: #e7e0d0;
}

.division__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.division__label {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c19a4f;
  margin-bottom: 18px;
}

.division__title {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  color: #1c1a17;
}

.division__body {
  font-size: 17px;
  line-height: 1.7;
  color: #5e584d;
  margin: 0 0 26px;
  max-width: 520px;
}

.division__body p {
  margin: 0 0 16px;
}

.division__body p:last-child {
  margin-bottom: 0;
}

.division__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  border-top: 1px solid #ddd5c2;
  padding-top: 24px;
}

.division__feature-title {
  font-family: "Host Grotesk", sans-serif;
  font-size: 18px;
  color: #1c1a17;
  margin-bottom: 5px;
}

.division__feature-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: #5e584d;
}

/* ========== COMMUNITIES DIRECTORY ========== */
/* A sold-out archive is too long to swipe through one card at a time, so the
   communities sit in a grid, grouped by the kind of development. */
.directory {
  max-width: 1320px;
  margin: clamp(40px, 5vw, 64px) auto 0;
}

.directory__eyebrow {
  margin: 0 0 28px;
}

.directory__group {
  scroll-margin-top: calc(var(--nav-h) + var(--announce-h) + 16px);
}

.directory__group + .directory__group {
  margin-top: clamp(36px, 4vw, 52px);
}

.directory__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ddd5c2;
}

.directory__label {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1c1a17;
  margin: 0;
}

.directory__count {
  font-family: "Host Grotesk", sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #8a7f6a;
}

.directory__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.directory__grid.is-collapsed .community--extra {
  display: none;
}

.directory__more {
  margin-top: 16px;
  background: transparent;
  color: #1c1a17;
  border: 1px solid #1c1a17;
  padding: 11px 18px;
  font-family: "Host Grotesk", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.directory__more:hover {
  background: #1c1a17;
  color: #f3efe6;
}

.community {
  display: flex;
  flex-direction: column;
  min-height: 148px;
  padding: 16px 16px 15px;
  background: #fbf9f3;
  border: 1px solid #e6dfcf;
}

.community__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

.community__type,
.community__chip {
  font-family: "Host Grotesk", sans-serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  padding: 5px 8px;
}

.community__type {
  background: #1c1a17;
  color: #f3efe6;
}

.community__chip {
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}

a.community__chip {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a.community__chip:hover {
  color: #3a2c14;
}

.community__name {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: #1c1a17;
}

.community__place {
  margin-top: auto;
  padding-top: 12px;
  font-family: "Host Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7f6a;
}

/* ========== WHAT ELSE GOT BUILT ========== */
/* Closes each division: a rule, a label, and the roll of everything that
   didn't get a card of its own. */
.past {
  max-width: 1320px;
  margin: clamp(34px, 4vw, 52px) auto 0;
  padding-top: 22px;
  border-top: 1px solid #ddd5c2;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px clamp(32px, 5vw, 72px);
}

.past__label {
  padding-top: 2px;
}

.past__text {
  font-size: 15px;
  line-height: 1.75;
  color: #6b6459;
  margin: 0;
}

/* ========== CONTACT ========== */
.contact {
  padding: clamp(72px, 9vw, 120px) clamp(20px, 4vw, 56px);
  background: #1c1a17;
  color: #f3efe6;
}

.contact__inner {
  max-width: 1320px;
  margin: 0 auto;
}

.contact__eyebrow {
  margin-bottom: 26px;
}

.contact__title {
  font-family: "Host Grotesk", sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 48px;
  text-wrap: balance;
  position: relative;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(36px, 5vw, 72px);
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__form.is-hidden,
.contact__success.is-hidden {
  display: none;
}

.contact__success {
  border: 1px solid #c19a4f;
  background: #252017;
  padding: 44px 36px;
}

/* Focused only to move the reader to it after a send; the border is the cue. */
.contact__success:focus {
  outline: none;
}

.contact__success-title {
  font-family: "Host Grotesk", sans-serif;
  font-size: 28px;
  color: #f3efe6;
  margin-bottom: 12px;
}

.contact__success p {
  font-size: 16px;
  line-height: 1.6;
  color: #bdb4a2;
  margin: 0;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field span {
  font-family: "Host Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7f6a;
}

.field input,
.field textarea {
  font-family: "Host Grotesk", sans-serif;
  font-size: 16px;
  padding: 13px 14px;
  border: 1px solid #3a352b;
  background: #211d17;
  color: #f3efe6;
  outline: none;
}

.field textarea {
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: #c19a4f;
}

.field--invalid input,
.field--invalid textarea {
  border-color: #c96f5b;
}

/* Overrides the mono uppercase treatment the labels share. */
.field .field__error {
  font-family: "Host Grotesk", sans-serif;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: #d59182;
}

.field .field__error:empty {
  display: none;
}

/* Off screen rather than display:none, which a bot can spot and skip. */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact__captcha {
  align-items: flex-start;
}

.contact__error {
  border: 1px solid #c96f5b;
  background: #2a1d19;
  padding: 18px 20px;
}

.contact__error.is-hidden {
  display: none;
}

.contact__error-title {
  font-family: "Host Grotesk", sans-serif;
  font-size: 18px;
  color: #f3efe6;
  margin-bottom: 6px;
}

.contact__error p {
  font-size: 15px;
  line-height: 1.55;
  color: #c7b7a9;
  margin: 0;
}

.contact__submit {
  align-self: flex-start;
  background: #c19a4f;
  color: #1c1a17;
  padding: 16px 34px;
  font-family: "Host Grotesk", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: none;
  cursor: pointer;
}

.contact__submit:hover {
  background: #f3efe6;
}

.contact__submit:disabled {
  background: #6f5c33;
  color: #2a251d;
  cursor: default;
}

.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.contact__photo {
  position: relative;
  aspect-ratio: 16 / 11;
  width: min(600px, 100%);
  max-height: 357px;
  overflow: hidden;
  background: #211d17;
}

.contact__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact__info {
  border-top: 1px solid #2b2620;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}

.contact__info-label {
  font-family: "Host Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7f6a;
  margin-bottom: 12px;
}

.contact__info-value {
  font-size: 16px;
  line-height: 1.6;
  color: #bdb4a2;
}

.contact__phones {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  font-size: 16px;
  line-height: 1.6;
  color: #bdb4a2;
}

.contact__phones a:hover {
  color: #f3efe6;
}

.contact__phones a:focus-visible {
  outline: 2px solid #c19a4f;
  outline-offset: 3px;
}

/* ========== FOOTER ========== */
.footer {
  background: #14120f;
  color: #bdb4a2;
  padding: clamp(56px, 7vw, 90px) clamp(20px, 4vw, 56px) 40px;
}

.footer__inner {
  max-width: 1320px;
  margin: 0 auto;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1fr;
  gap: clamp(28px, 3.4vw, 52px);
  padding-bottom: 48px;
  border-bottom: 1px solid #2b2620;
  align-items: start;
}

.footer__brand {
  max-width: 320px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 22px;
}

.footer__logo img {
  height: 44px;
  width: auto;
  display: block;
}

.footer__brand p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: #9a9180;
}

.footer__award {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid #2b2620;
}

.footer__award img {
  width: 76px;
  height: auto;
  flex-shrink: 0;
  display: block;
}

.footer__award-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer__award-title {
  font-size: 13px;
  line-height: 1.4;
  color: #bdb4a2;
}

.footer__award-meta {
  font-family: "Host Grotesk", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c19a4f;
}

.footer__heading {
  font-family: "Host Grotesk", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c19a4f;
  margin-bottom: 18px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  align-items: flex-start;
}

.footer__links a {
  cursor: pointer;
  white-space: nowrap;
}

.footer__links a:hover {
  color: #f3efe6;
}

.footer__office {
  font-size: 15px;
  line-height: 1.7;
  color: #9a9180;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 28px;
}

.footer__copy {
  font-size: 13px;
  color: #6f685c;
}

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

.footer__eho-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #3a352b;
  font-family: "Host Grotesk", sans-serif;
  font-size: 13px;
  color: #9a9180;
}

.footer__eho-text {
  font-size: 12px;
  color: #6f685c;
  letter-spacing: 0.04em;
}

/* Short laptops: the sticky bar stays put, so a jump to a section only has
   the rest of the window to land in. Width-based padding keeps these blocks
   as tall as a desktop, and the form or the feature row gets sliced off.
   Height-based spacing brings the landing back onto the screen. The community
   lists below a division stay long on purpose. */
@media (max-height: 1000px) and (min-width: 861px) {
  .contact {
    padding: clamp(28px, 4svh, 56px) clamp(20px, 4vw, 56px) clamp(20px, 3svh, 40px);
  }

  .contact__eyebrow {
    margin-bottom: 12px;
  }

  .contact__title {
    font-size: clamp(36px, 6svh, 56px);
    margin-bottom: clamp(16px, 2.2svh, 28px);
  }

  .contact__form,
  .contact__aside {
    gap: 12px;
  }

  .contact .field input,
  .contact .field textarea {
    padding-block: 10px;
  }

  .contact .field textarea {
    height: clamp(72px, 10svh, 100px);
  }

  .contact__photo {
    max-height: min(240px, 28svh);
  }

  .contact__info {
    padding-top: 16px;
    gap: 16px;
  }

  .contact__submit {
    padding-block: 12px;
  }

  .division {
    padding-top: 16px;
    padding-bottom: 28px;
  }

  .division::before {
    margin-bottom: 14px;
  }

  .division__label {
    margin-bottom: 8px;
  }

  .division__title {
    font-size: clamp(26px, 3.4svh, 36px);
    margin-bottom: 10px;
  }

  .division__body {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .division__body p {
    margin-bottom: 8px;
  }

  .division__features {
    gap: 10px 20px;
    padding-top: 12px;
  }

  .division__feature-title {
    font-size: 16px;
    margin-bottom: 2px;
  }

  .division__feature-body {
    font-size: 13px;
    line-height: 1.4;
  }

  .division__media {
    min-height: 240px;
  }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 860px) {
  .nav__links {
    display: none;
  }

  .nav__burger {
    display: inline-flex;
  }

  .announce__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  }

  .directory__more {
    min-height: 44px;
  }

  /* The lease labels are links. Stretching the badge itself made it twice as
     tall as the labels beside it, so the extra tap area hangs off the badge. */
  a.community__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  a.community__chip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }

  .contact__captcha {
    max-width: 100%;
    overflow: hidden;
  }

  .hero {
    padding-top: calc(var(--nav-h) + 28px);
    padding-bottom: 20px;
  }

  .hero__inner {
    gap: 24px;
  }

  .hero__eyebrow {
    margin-bottom: 18px;
  }

  .hero__title {
    font-size: clamp(30px, 7.6vw, 44px);
    margin-bottom: 18px;
  }

  .hero__body {
    font-size: 16.5px;
    margin-bottom: 24px;
  }

  /* One tight row on phones — a stacked bar would push the stats off screen. */
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats__cell {
    padding: 14px 12px;
  }

  .stats__cell:first-child {
    padding-left: 0;
  }

  .stats__cell:last-child {
    padding-right: 0;
  }

  .stats__value {
    font-size: clamp(22px, 6.4vw, 30px);
  }

  .stats__label {
    font-size: 9.5px;
    letter-spacing: 0.06em;
    line-height: 1.25;
    margin-top: 7px;
    text-wrap: balance;
  }

  .division__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Stacked there is no column to match, so the photo goes back to a shape. */
  .division__media {
    aspect-ratio: 5 / 4;
    min-height: 0;
  }

  .past {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .division__features {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ethos__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .contact__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
  }

  .contact__info {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .contact__phones {
    align-items: center;
  }

  .contact__phones a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .contact__submit {
    align-self: stretch;
    width: 100%;
  }

  .footer__links {
    gap: 4px;
  }

  .footer__links a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .divisions-intro__row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 860px) and (min-width: 561px) {
  .footer__grid {
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
    gap: 28px;
  }

  .footer__grid > div:first-child {
    max-width: 240px;
  }
}

@media (max-width: 1100px) {
  .directory__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .directory__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

@media (max-width: 520px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Short landscape phones: shrink the hero to its content rather than forcing a
   full viewport it can't fill comfortably. */
@media (max-height: 560px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding-top: calc(var(--nav-h) + 14px);
  }

  .hero__inner {
    gap: 14px;
  }

  .hero__eyebrow {
    margin-bottom: 12px;
  }

  .hero__title {
    font-size: clamp(24px, 4vw, 36px);
    margin-bottom: 12px;
  }

  .hero__body {
    font-size: 15.5px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .hero .audio-btn {
    padding: 12px 24px;
  }

  .stats__cell {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hero__video {
    display: none;
  }

  .announce__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .announce.is-ready .announce__track {
    animation: none;
    width: 100%;
    justify-content: center;
  }

  .announce__item {
    white-space: normal;
    text-align: center;
    padding: 0 16px;
  }
}