/* ==========================================================================
   INITIO REALTY GROUP
   initiorealtygroup.com — design system
   Property, considered completely.

   Palette is defined once, here. Nothing in this file uses a colour that is
   not one of the five approved values. No blue. No gold. No gradient.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */

:root {
  /* Approved palette — the only colours in the system */
  --bone:      #F3F0E9;
  --ink:       #161616;
  --limestone: #D5CFC4;
  --umber:     #7B6654;
  --white:     #FFFFFF;

  /* Derived, strictly as transparencies of the five — never new hues */
  --ink-70:    rgba(22, 22, 22, 0.70);
  --ink-52:    rgba(22, 22, 22, 0.52);
  --ink-30:    rgba(22, 22, 22, 0.30);
  --ink-12:    rgba(22, 22, 22, 0.12);
  --ink-07:    rgba(22, 22, 22, 0.07);
  --bone-70:   rgba(243, 240, 233, 0.70);
  --bone-40:   rgba(243, 240, 233, 0.40);
  --bone-14:   rgba(243, 240, 233, 0.14);

  /* Type */
  --serif: "Cormorant Garamond", "Libre Baskerville", "Iowan Old Style",
           "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale. Editorial: large statements, quiet supporting text. */
  --t-display:  clamp(2.75rem, 7.2vw, 7rem);      /* screen statements      */
  --t-title:    clamp(2rem, 4.4vw, 3.9rem);       /* section headlines      */
  --t-heading:  clamp(1.5rem, 2.4vw, 2.2rem);     /* sub headlines          */
  --t-sub:      clamp(1.15rem, 1.5vw, 1.45rem);   /* stand-first copy       */
  --t-body:     clamp(1rem, 1.02vw, 1.075rem);    /* running copy           */
  --t-small:    0.875rem;
  --t-label:    0.6875rem;                        /* eyebrow / meta         */

  /* Spatial rhythm. The site is asked to breathe; this is how. */
  --gutter:  clamp(1.5rem, 5vw, 5.5rem);
  --section: clamp(5.5rem, 11vw, 11rem);
  --rule:    1px solid var(--ink-12);

  --measure: 34rem;      /* comfortable reading width for running copy */
  --max:     84rem;      /* outer page width                          */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- 2. RESET ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--umber);
  outline-offset: 3px;
}

::selection { background: var(--limestone); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--ink);
  color: var(--bone);
  padding: 0.9rem 1.4rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* --- 3. LAYOUT PRIMITIVES ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 58rem; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--white { background: var(--white); }
.section--limestone { background: var(--limestone); }

.section--ink .lede,
.section--ink .copy { color: var(--bone-70); }
.section--ink .label { color: var(--bone-40); }
.section--ink hr,
.section--ink .rule { border-color: var(--bone-14); }

hr, .rule {
  height: 0;
  border: 0;
  border-top: var(--rule);
  margin: 0;
}

.stack > * + * { margin-top: 1.35rem; }
.stack-lg > * + * { margin-top: clamp(2.5rem, 5vw, 4.5rem); }

/* --- 4. TYPOGRAPHY ------------------------------------------------------- */

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-52);
  display: block;
}

.display,
.title,
.heading {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.display {
  font-size: var(--t-display);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.008em;
}

.title {
  font-size: var(--t-title);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}

.heading {
  font-size: var(--t-heading);
  line-height: 1.2;
  font-weight: 400;
}

.lede {
  font-family: var(--serif);
  font-size: var(--t-sub);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-70);
  max-width: 40rem;
}

.copy {
  max-width: var(--measure);
  color: var(--ink-70);
}
.copy > * + * { margin-top: 1.15rem; }
.copy strong { font-weight: 600; color: var(--ink); }

/* A "terms list" — the spec's repeated single-word cadences:
   Value. Risk. Opportunity. Timing. Return.
   Set as its own quiet register, not as body copy. */
.terms {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.6rem);
  line-height: 1.62;
  font-weight: 300;
  color: var(--ink);
  max-width: 30rem;
}
.terms li { padding-block: 0.06em; }
.section--ink .terms { color: var(--bone); }

/* Inline enumerations that stay in the sans register */
.terms--inline {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.9;
  color: var(--ink-70);
  max-width: var(--measure);
}

/* Question cadences — set in serif italic to separate them from statements */
.questions {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.4vw, 1.375rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.68;
  color: var(--ink-70);
  max-width: 36rem;
}
.section--ink .questions { color: var(--bone-70); }

/* Bulleted list, restrained */
.list-marked {
  max-width: var(--measure);
  color: var(--ink-70);
}
.list-marked li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: 0.28rem;
}
.list-marked li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.5rem;
  height: 1px;
  background: var(--umber);
}
.section--ink .list-marked { color: var(--bone-70); }

/* --- 5. BUTTONS ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 1.15rem 2rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease);
}
.btn:hover { background: var(--ink); color: var(--bone); }

.btn--solid { background: var(--ink); color: var(--bone); }
.btn--solid:hover { background: var(--umber); border-color: var(--umber); color: var(--white); }

.btn--light { border-color: var(--bone-40); color: var(--bone); }
.btn--light:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Text link with a rule that draws on hover */
.link {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ink-30);
  transition: border-color 0.4s var(--ease);
}
.link:hover { border-color: var(--ink); }
.section--ink .link { border-color: var(--bone-40); }
.section--ink .link:hover { border-color: var(--bone); }

/* --- 6. HEADER + NAVIGATION ---------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5.5rem;
}

/* Solid state — applied on scroll, and always on interior pages */
.masthead.is-solid,
.masthead.is-open {
  background: var(--bone);
  border-bottom-color: var(--ink-12);
}

.wordmark { display: block; line-height: 1; }
.wordmark__initio {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.wordmark__realty {
  display: block;
  font-family: var(--sans);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ink-52);
  margin-top: 0.42rem;
}

/* Over a dark hero the wordmark and nav invert */
.masthead.is-over-dark:not(.is-solid) { color: var(--bone); }
.masthead.is-over-dark:not(.is-solid) .wordmark__realty { color: var(--bone-40); }
.masthead.is-over-dark:not(.is-solid) .nav__link::after { background: var(--bone); }
.masthead.is-over-dark:not(.is-solid) .burger__bar { background: var(--bone); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.1rem); }

.nav__link {
  position: relative;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-block: 0.5rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta { margin-left: 0.6rem; padding: 0.9rem 1.4rem; }

/* Burger */
.burger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  z-index: 110;
}
.burger__bar {
  position: absolute;
  left: 0.4rem;
  width: 1.7rem;
  height: 1px;
  background: var(--ink);
  transition: transform 0.42s var(--ease), opacity 0.25s var(--ease);
}
.burger__bar:nth-child(1) { top: 0.95rem; }
.burger__bar:nth-child(2) { top: 1.5rem; }
.masthead.is-open .burger__bar:nth-child(1) { transform: translateY(0.275rem) rotate(45deg); }
.masthead.is-open .burger__bar:nth-child(2) { transform: translateY(-0.275rem) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  background: var(--bone);
  padding: 8rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              visibility 0.45s;
  z-index: 105;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }

.drawer__link {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 7vw, 2.6rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.32;
  padding-block: 0.28rem;
}
.drawer__foot {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: var(--rule);
}
.drawer__phone {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 300;
  display: block;
}

@media (max-width: 62rem) {
  .nav { display: none; }
  .burger { display: block; }
}

/* --- 7. HERO ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 9rem 4.5rem;
  background: var(--bone);
  overflow: hidden;
}
.hero--interior {
  min-height: 66svh;
  align-items: flex-end;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero .display { max-width: 18ch; }
.hero__label { margin-bottom: clamp(2rem, 6vw, 4rem); }
.hero__lede { margin-top: 2rem; }
.hero__actions { margin-top: 2.75rem; }

/* Photographic hero — the image carries the interest, per the brief */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--limestone) center/cover no-repeat;
}
.hero--dark { color: var(--bone); background: var(--ink); }
.hero--dark .label { color: var(--bone-40); }
.hero--dark .lede { color: var(--bone-70); }
.hero--dark .hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,22,22,0.82) 0%,
                                      rgba(22,22,22,0.45) 45%,
                                      rgba(22,22,22,0.28) 100%);
}

.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.scroll-cue__line {
  display: block;
  width: 3.5rem;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  animation: cue 2.8s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleX(0.35); opacity: 0.4; }
  50%      { transform: scaleX(1);    opacity: 1; }
}

/* --- 8. THE SCROLLING STATEMENT SCREENS (homepage 02–05) ----------------- */

.statement {
  min-height: 82svh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 8rem);
  border-top: var(--rule);
}
.statement__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  width: 100%;
}
@media (min-width: 56rem) {
  .statement__grid { grid-template-columns: 1.05fr 1fr; }
}
.statement .title { margin-bottom: 0; }

/* --- 9. GRIDS ------------------------------------------------------------ */

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--halves { grid-template-columns: 1fr; }
@media (min-width: 56rem) { .grid--halves { grid-template-columns: 1fr 1fr; } }

/* Editorial split: heading left, copy right */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 56rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--lead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* --- 10. PRACTICE PANELS ------------------------------------------------- */

.practice {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}
@media (min-width: 52rem) {
  .practice { grid-template-columns: 1fr 1fr; }
}
.practice__panel {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3.5vw, 3.5rem);
  border-bottom: var(--rule);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: background 0.55s var(--ease);
}
.practice__panel:hover { background: var(--white); }
@media (min-width: 52rem) {
  .practice__panel:nth-child(odd) { border-right: var(--rule); }
}
.practice__index {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  color: var(--umber);
}
.practice__panel .heading { text-transform: uppercase; letter-spacing: 0.06em; }
.practice__panel .link { margin-top: auto; align-self: flex-start; }

/* --- 11. NUMBERED PROCESS ------------------------------------------------ */

.process { border-top: var(--rule); }
.process__step {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: var(--rule);
}
@media (min-width: 52rem) {
  .process__step { grid-template-columns: 7rem minmax(0, 15rem) minmax(0, 1fr); }
}
.process__num {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--umber);
  padding-top: 0.55rem;
}
.process__name {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.process__body { color: var(--ink-70); max-width: var(--measure); }
.process__body > * + * { margin-top: 0.9rem; }
.section--ink .process__body { color: var(--bone-70); }
.section--ink .process__step { border-color: var(--bone-14); }
.section--ink .process { border-color: var(--bone-14); }

/* --- 12. THE RECORD — quiet statistics ----------------------------------- */

.stats {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: var(--rule);
}
.stat {
  padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem);
  border-bottom: var(--rule);
  border-right: var(--rule);
}
.stat:last-child { border-right: 0; }
.stat__figure {
  font-family: var(--serif);
  font-size: clamp(3.25rem, 6.5vw, 5.25rem);
  font-weight: 300;
  line-height: 0.94;
  letter-spacing: -0.01em;
  display: block;
}
.stat__note {
  margin-top: 1.1rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 15rem;
}
.section--ink .stat { border-color: var(--bone-14); }
.section--ink .stat__note { color: var(--bone-70); }

.datestamp {
  font-size: var(--t-small);
  color: var(--ink-52);
  font-style: italic;
}
.section--ink .datestamp { color: var(--bone-40); }

/* --- 13. PROPERTY CARDS -------------------------------------------------- */

.properties {
  display: grid;
  gap: clamp(1.75rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
}

.property {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--rule);
  transition: transform 0.55s var(--ease), border-color 0.55s var(--ease);
}
.property:hover { transform: translateY(-4px); border-color: var(--ink-30); }

.property__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--limestone) center/cover no-repeat;
  overflow: hidden;
}
/* Placeholder treatment until real photography is supplied */
.property__media--empty {
  display: grid;
  place-items: center;
}
.property__media--empty::after {
  content: attr(data-placeholder);
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--umber);
  text-align: center;
  padding: 1rem;
}

.property__status {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
}
.property__status--contract { background: var(--umber); color: var(--white); }
.property__status--sold,
.property__status--rented { background: var(--ink); color: var(--bone); }

.property__body {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.property__address {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.22;
}
.property__place {
  font-size: var(--t-small);
  color: var(--ink-52);
  letter-spacing: 0.02em;
}
.property__price {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 400;
  margin-top: auto;
  padding-top: 0.9rem;
}
.property__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  padding-top: 0.9rem;
  border-top: var(--rule);
  font-size: var(--t-small);
  color: var(--ink-70);
}
.property__facts li { white-space: nowrap; }
.property__role {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--umber);
}

/* Filter bar */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-bottom: 2.25rem;
  margin-bottom: 2.75rem;
  border-bottom: var(--rule);
}
.filter {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--ink-12);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease),
              color 0.4s var(--ease);
}
.filter:hover { border-color: var(--ink-30); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--bone); }

.is-filtered-out { display: none !important; }

.filter-empty {
  padding: 3rem 0;
  color: var(--ink-52);
  font-style: italic;
}

/* Transaction record — a list, not cards */
.ledger { border-top: var(--rule); }
.ledger__year {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 1.25rem;
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem 2rem;
  padding-block: 1.5rem;
  border-bottom: var(--rule);
  align-items: baseline;
}
@media (min-width: 52rem) {
  .ledger__row {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
  }
}
.ledger__address {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 400;
  line-height: 1.25;
}
.ledger__place { color: var(--ink-52); font-size: var(--t-small); }
.ledger__spec { font-size: var(--t-small); color: var(--ink-70); }
.ledger__price { font-size: var(--t-small); color: var(--ink-70); }
.ledger__date {
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  white-space: nowrap;
}

/* --- 14. COMMUNITY CARDS ------------------------------------------------- */

.community {
  display: block;
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem);
  border: var(--rule);
  background: var(--white);
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
}
.community:hover { background: var(--bone); border-color: var(--ink-30); }
.community__name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.15;
}
.community__note { font-size: var(--t-small); color: var(--ink-70); }

/* --- 15. STANDARD (principle) BLOCKS ------------------------------------- */

.principles { border-top: var(--rule); }
.principle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem clamp(2rem, 5vw, 4rem);
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: var(--rule);
}
@media (min-width: 52rem) {
  .principle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.principle__name {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  line-height: 1.22;
}
.principle__body { color: var(--ink-70); max-width: var(--measure); }
.principle__body > * + * { margin-top: 0.75rem; }

/* --- 16. PORTRAIT / FEATURE BLOCK ---------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .feature { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .feature--reverse .feature__media { order: 2; }
}
.feature__media {
  aspect-ratio: 4 / 5;
  background: var(--limestone) center/cover no-repeat;
  display: grid;
  place-items: center;
}
.feature__media[data-placeholder]::after {
  content: attr(data-placeholder);
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--umber);
  text-align: center;
  padding: 1.5rem;
  max-width: 20rem;
  line-height: 1.9;
}
.feature__media--wide { aspect-ratio: 3 / 2; }

/* BUG FIX 2026-10-06 — horizontal scroll on phones.
   `min-height: 18rem` fought `aspect-ratio: 21/9`: the ratio resolved width
   from the floor height, 288px x 21/9 = 672px, so every photography band was
   672px wide inside a 375px viewport and the whole page scrolled sideways.
   Pre-existing since the photographs went in; found while measuring the
   broker-name sizing. The ratio alone governs height now, and narrow screens
   get a taller crop so the band does not become a sliver. */
.band {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: var(--limestone) center/cover no-repeat;
  display: grid;
  place-items: center;
}
/* A 21:9 sliver is pointless on a phone; give narrow screens a taller crop. */
@media (max-width: 52rem) {
  .band { aspect-ratio: 3 / 2; }
}

.band[data-placeholder]::after {
  content: attr(data-placeholder);
  font-family: var(--sans);
  font-size: var(--t-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--umber);
  text-align: center;
  padding: 1.5rem;
  line-height: 1.9;
}

/* Signature */
.signature {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 300;
  color: var(--ink-70);
  margin-top: 2rem;
}

/* Pull quote */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  font-weight: 300;
  line-height: 1.32;
  max-width: 26ch;
  text-wrap: balance;
}

/* --- 17. CONTACT PATHS + FORM -------------------------------------------- */

.paths {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  border-top: var(--rule);
  border-left: var(--rule);
}
.path {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-right: var(--rule);
  border-bottom: var(--rule);
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.25;
  transition: background 0.45s var(--ease), color 0.45s var(--ease);
  min-height: 8.5rem;
  display: flex;
  align-items: flex-end;
}
.path:hover { background: var(--white); }
.path.is-selected { background: var(--ink); color: var(--bone); }

.form { max-width: 46rem; }
.form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
@media (min-width: 44rem) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-52);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-30);
  padding: 0.65rem 0 0.75rem;
  border-radius: 0;
  transition: border-color 0.4s var(--ease);
  width: 100%;
}
.field select { appearance: none; cursor: pointer; padding-right: 1.75rem; }
.field--select { position: relative; }
.field--select::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  bottom: 1.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid var(--ink-52);
  border-bottom: 1px solid var(--ink-52);
  transform: rotate(45deg);
  pointer-events: none;
}
.field textarea { resize: vertical; min-height: 7rem; line-height: 1.65; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--umber); }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-30); }

.form__actions {
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
}
.form__aside { font-size: var(--t-small); color: var(--ink-52); }

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- 18. CALLOUT / NOTE -------------------------------------------------- */

.note {
  border-left: 2px solid var(--umber);
  padding: 0.4rem 0 0.4rem 1.5rem;
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink-70);
  max-width: var(--measure);
}

/* Build-time notice — visible so nothing unverified ships silently */
.buildnote {
  background: var(--limestone);
  border: 1px dashed var(--umber);
  padding: 1.25rem 1.5rem;
  font-family: var(--sans);
  font-size: var(--t-small);
  line-height: 1.7;
  color: var(--ink);
}
.buildnote strong {
  display: block;
  font-size: var(--t-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 0.5rem;
}

/* --- 19. FOOTER ---------------------------------------------------------- */

.footer {
  background: var(--ink);
  color: var(--bone);
  padding-block: clamp(4rem, 8vw, 7rem) 2.5rem;
}
.footer a:hover { color: var(--white); }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--bone-14);
}
@media (min-width: 56rem) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}
.footer .wordmark__initio { font-size: 1.75rem; color: var(--bone); }
.footer .wordmark__realty { color: var(--bone-40); }
.footer__lines {
  margin-top: 1.75rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--bone-70);
}
.footer__heading {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-40);
  margin-bottom: 1.35rem;
}
.footer__nav li { padding-block: 0.32rem; }
.footer__nav a {
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-70);
  transition: color 0.35s var(--ease);
}
.footer__contact { color: var(--bone-70); font-size: var(--t-small); line-height: 2; }
.footer__contact a { transition: color 0.35s var(--ease); }
.footer__phone {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--bone);
  display: block;
  margin-bottom: 0.5rem;
}

.compliance {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--bone-14);
  font-size: 0.75rem;
  line-height: 1.85;
  color: var(--bone-40);
}
.compliance__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 1.5rem;
}
.compliance__grid a {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--t-label);
  transition: color 0.35s var(--ease);
}
.compliance__pending {
  border: 1px dashed var(--umber);
  padding: 1.1rem 1.35rem;
  color: var(--bone-70);
  margin-bottom: 1.5rem;
}
.compliance__pending b {
  display: block;
  color: var(--bone);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: var(--t-label);
  margin-bottom: 0.5rem;
}

/* --- 19b. TREC BROKERAGE IDENTIFICATION + REQUIRED NOTICES ---------------
   Added 2026-10-06 at the broker's instruction.

   SIZING RULE — do not change these values without re-measuring.
   The broker's name must render at no less than HALF the size of the largest
   Initio/agent contact text on the same page. The largest such element is the
   footer wordmark at 1.75rem / 28px, which sets a floor of 14px. .brokerline
   is set to 16px, leaving deliberate headroom. If any Initio brand or contact
   text is ever enlarged past 32px, this value must rise with it.

   These are compliance text, not decoration. They are full-opacity on
   purpose: "clearly visible, not muted gray fine print."
   ------------------------------------------------------------------------ */

.brokerline {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;              /* 16px — floor is 14px. Do not reduce. */
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Header — its own row beneath the masthead, full width.
   Kept OUT of the wordmark deliberately: inside it, the extra width wrapped
   the nav onto two lines from 1040px up. */
.masthead__broker {
  border-top: 1px solid var(--ink-12);
  padding-block: 0.45rem 0.55rem;
  /* Always light, so the brokerage's black-on-transparent mark reads even
     where the masthead itself is transparent over a dark hero photograph. */
  background: var(--bone);
}
.masthead__broker .wrap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}

/* SIZE FLOOR — see the note in layout.mjs before changing this.
   46px tall puts the "WILLIAM DAVIS" lettering at ~14.5px, clearing the 14px
   half-size requirement. Reducing the height breaks compliance, not just
   appearance. */
.brokermark {
  height: 46px;
  width: auto;
  display: block;
}
.brokermark__fallback { display: none; }

/* Under 360px the logo at its required width would overflow, so the name
   reverts to text — equally compliant, and it always fits. */
@media (max-width: 22.5rem) {
  .brokermark { display: none; }
  .brokermark__fallback { display: inline; }
}
.brokerline--header {
  color: var(--ink);
  white-space: nowrap;
}
.masthead.is-over-dark:not(.is-solid) .brokerline--header { color: var(--bone); }
.masthead.is-over-dark:not(.is-solid) .masthead__broker {
  border-top-color: var(--bone-14);
}

/* Nav labels must never break mid-item. */
.nav__link { white-space: nowrap; }

/* Footer */
.brokerline--footer {
  color: var(--bone);
  margin: 0.35rem 0 1.1rem;
}

.footer__capacity {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--bone-70);
  margin-bottom: 0.15rem;
}

/* Required notices. At least 10-point (>= 13px); set to 15px.
   Underlined so they read as links without relying on hover. */
.compliance__notices {
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;         /* 15px — floor is 13px. Do not reduce. */
  line-height: 1.95;
  color: var(--bone);
}
.compliance__notices li { padding-block: 0.12rem; }
.compliance__notices a {
  color: var(--bone);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.35s var(--ease);
}
.compliance__notices a:hover { color: var(--white); }
.compliance__eho { color: var(--bone); }

/* --- 20. THANK YOU / MINIMAL PAGES --------------------------------------- */

.centered {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--gutter) 5rem;
  gap: 2rem;
}
.centered .copy { margin-inline: auto; text-align: center; }
.centered .btn-row { justify-content: center; }

/* --- 21. LEGAL / PROSE PAGES --------------------------------------------- */

.prose { max-width: 42rem; }
.prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-70); margin-bottom: 1.1rem; }
.prose ul { margin-bottom: 1.1rem; }
.prose li {
  position: relative;
  padding-left: 1.4rem;
  padding-block: 0.22rem;
  color: var(--ink-70);
}
.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 0.5rem;
  height: 1px;
  background: var(--umber);
}

/* --- 22. MOTION ---------------------------------------------------------- */

/* Slow, architectural. Reveal only — nothing bounces, nothing spins. */
[data-reveal] {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* If JS never runs, content must still be visible. */
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --- 23. PRINT ----------------------------------------------------------- */

@media print {
  .masthead, .drawer, .scroll-cue, .filters, .footer__nav { display: none; }
  body { background: var(--white); }
  .section { padding-block: 1.5rem; }
}

/* --- THE PORTRAIT SLOT — NEVER CROPS ---------------------------------------
   .feature__media is a fixed 4:5 box filled with background-size:cover, which
   means any photograph that is not 4:5 gets its edges cut off. Cindy's portrait
   is 0.69:1 - considerably taller - so cover was slicing through the top of the
   frame. Anchoring to the top only moved the cut; it did not remove it.

   The fix is to stop forcing the picture into a box. The container drops its
   fixed ratio and holds a real <img>, which scales to its own proportions and
   shows the whole photograph. Nothing is cropped at any screen width, and it
   stays true if the portrait is ever replaced with one of a different shape.

   A real <img> is also better than a background: it carries alt text, it can be
   lazy-loaded, and width/height reserve its space so the page does not jump.
   --------------------------------------------------------------------------- */
.feature__media--portrait {
  aspect-ratio: auto;
  background: none;
  display: block;
  align-self: start;
}
.feature__media--portrait img {
  display: block;
  width: 100%;
  height: auto;
}