/* ==========================================================================
   Provision Homes — project page. Loads after base.css and chrome.css.

   Page-specific layout only; the masthead, title band, CTA band and footer
   live in chrome.css, shared with the gallery.
   ========================================================================== */

[id] { scroll-margin-top: 80px; }

/* Diagonal lattice used on the dark bands */
.title-block__grid-texture,
.cta-band__texture,
.site-footer__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(45deg,  rgba(255,255,255,.1) 0 1px, transparent 1px 100%),
    linear-gradient(-45deg, rgba(255,255,255,.1) 0 1px, transparent 1px 100%);
  background-size: 56px 56px;
}
.title-block__grid-texture, .cta-band__texture { opacity: .4; }
.site-footer__texture { opacity: .5; }

/* ---------- Hero photo ---------- */
.hero-shot {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad);
  margin-top: calc(var(--overlap) * -1);
}
.hero-shot__frame {
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: clamp(3px, .5vw, 6px) solid var(--wine);
  outline: 1px solid var(--gold);
  outline-offset: 10px;
  height: clamp(240px, 42vw, 620px);
  overflow: hidden;
  cursor: zoom-in;
}
.hero-shot__frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Fact strip ---------- */
.factstrip {
  padding: 0 var(--pad);
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-mid);
  border-bottom: 1px solid var(--rule-mid);
}
.factstrip__item { padding: 24px 26px; border-right: 1px solid rgba(var(--rule-rgb), .14); }
.factstrip__item:first-child { padding-left: 0; }
.factstrip__item:last-child  { padding-right: 0; border-right: 0; }
.factstrip dt {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.factstrip dd {
  margin-top: 11px;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
}

/* ---------- Body layout ---------- */
.layout {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  align-items: start;
}

.facts {
  padding: 48px 40px 48px var(--pad);
  border-right: 1px solid var(--rule-dark);
  position: sticky;
  top: 54px;
}
.facts__heading {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--rule-rgb), .55);
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(var(--rule-rgb), .35);
}
.facts__row { padding: 18px 0; border-bottom: 1px solid rgba(var(--rule-rgb), .14); }
.facts__row:last-child { border-bottom: 0; }
.facts__row dt {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.facts__row dd {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.2;
}

.content {
  padding: 48px var(--pad) 0 44px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

/* ---------- Content blocks ---------- */
.kicker {
  font-size: 13px;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(var(--rule-rgb), .7);
}
.kicker--center { color: var(--ink); letter-spacing: .24em; }

.block__display {
  margin: 22px 0 24px;
  max-width: 34ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.42;
}
.block__h2 {
  margin-top: 20px;
  max-width: 26ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}
.prose {
  max-width: 74ch;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body-ink);
  text-wrap: pretty;
}

.block--ruled {
  border-top: 1px solid rgba(var(--rule-rgb), .45);
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.block--ruled .block__h2 { margin-top: 0; }
.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.block__count {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--rule-rgb), .5);
}
.block__action { text-align: center; margin-top: 14px; }

/* ---------- Photo frames ---------- */
.shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  cursor: zoom-in;
  outline: 1px solid var(--rule-soft);
  outline-offset: 6px;
  transition: outline-color 180ms ease;
  height: clamp(220px, 26vw, 380px);
}
.shot:hover { outline-color: var(--gold); }
.shot:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot--wide { height: clamp(240px, 34vw, 480px); }
.shot--sm   { height: clamp(150px, 18vw, 250px); }

.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 48px;
  margin-top: 30px;
}
.features__item { padding: 22px 0; border-top: 1px solid var(--rule-dark); }
.features__item h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
}
.features__item p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--body-ink);
  text-wrap: pretty;
}

/* ---------- Floor plan ---------- */
.floorplan {
  margin-top: 20px;
  height: clamp(260px, 34vw, 480px);
  background: var(--sand);
  outline: 1px solid var(--rule-soft);
  outline-offset: 6px;
  overflow: hidden;
}
.floorplan img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Owners' testimonial ---------- */
.owners {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  padding: 80px var(--pad);
  background: var(--sand);
}
.owners__texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(135deg, transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%),
    linear-gradient(45deg,  transparent 47%, rgba(var(--rule-rgb), .035) 47%, rgba(var(--rule-rgb), .035) 53%, transparent 53%);
  background-size: 60px 60px;
}
.owners__inner { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
.rule-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}
.rule-mark__line { width: 34px; height: 1px; background: rgba(var(--rule-rgb), .35); }
.owners__title {
  margin: 22px 0 34px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.18;
  text-wrap: balance;
}
.owners__quote {
  clip-path: polygon(50% 0, 100% 118px, 100% 100%, 0 100%, 0 118px);
  background: var(--rule-mid);
  padding: 1px;
}
.owners__quote-inner {
  clip-path: polygon(50% 0, 100% 117px, 100% 100%, 0 100%, 0 117px);
  background: #fff;
  padding: 132px clamp(24px, 5vw, 60px) 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.owners__quote p {
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.owners__quote footer {
  font-size: 10px;
  letter-spacing: .24em;
  color: rgba(var(--rule-rgb), .65);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .facts {
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--rule-dark);
    padding: 40px var(--pad);
  }
  .facts__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 32px; }
  .content { padding: 40px var(--pad) 0; }
}

@media (max-width: 700px) {
  .factstrip { grid-template-columns: minmax(0, 1fr); }
  .factstrip__item {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--rule-rgb), .14);
  }
  .factstrip__item:last-child { border-bottom: 0; }
  .pair,
  .trio { grid-template-columns: minmax(0, 1fr); }
  .features { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .owners { padding: 56px var(--pad); }
  .owners__quote,
  .owners__quote-inner { clip-path: none; }
  .owners__quote-inner { padding: 40px clamp(24px, 5vw, 60px); }
}

/* Grouping label inside the feature list (e.g. "Main House"). */
.features__group {
  margin-top: 26px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.features__group + .features { margin-top: 12px; }

/* Testimonial awaiting a real quote. Replace the div with a <blockquote> and
   this styling stops applying. */
.owners__quote--empty .owners__quote-inner {
  justify-content: center;
  min-height: 220px;
}
.owners__quote--empty p {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(var(--ink-rgb), .45);
}

/* Trailing note under the feature grid. */
.features__note { margin-top: 22px; }