/* ==========================================================================
   Provision Homes — chrome shared by the project and gallery pages.
   Loads after base.css, before the page stylesheet.

   Masthead, title band, closing CTA band, footer, mobile menu and sticky
   CTA. The homepage and about page use the lighter components.css instead;
   these two pages carry the heavier dark chrome.
   ========================================================================== */

:root {
  --pad: clamp(24px, 5vw, 110px);   /* page gutter */
  --overlap: clamp(56px, 11vw, 150px); /* how far the hero photo rides up */
  --bone: var(--cream);  /* LINEN */
}

body { background: var(--cream); color: var(--ink); }

/* ---------- Mark sizes specific to this page ---------- */
.mark--masthead { width: clamp(22px, 5vw, 32px); height: clamp(19px, 4.4vw, 28px); stroke-width: 2.2; }
.mark--badge    { width: 16px; height: 14px; stroke-width: 3; }
.mark--bullet   { width: 14px; height: 12px; stroke-width: 3; color: var(--gold); flex: none; }
.mark--rule     { width: 16px; height: 14px; stroke-width: 3.2; color: var(--ink); }

/* ---------- Buttons ---------- */
.btn-outline-light,
.btn-outline-wine,
.btn-solid {
  display: inline-block;
  font-family: var(--sans);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.btn-outline-light {
  border: 1px solid rgba(255, 255, 255, .55);
  padding: 9px 18px;
  font-size: 10px;
  letter-spacing: .24em;
  color: #fff;
}
.btn-outline-light--lg {
  border-color: rgba(255, 255, 255, .7);
  padding: 14px 24px;
  font-size: 11px;
  letter-spacing: .2em;
}
.btn-outline-light:hover { background: var(--wine); border-color: var(--wine); color: #fff; }

.btn-outline-wine {
  border: 1px solid var(--wine);
  color: var(--wine);
  padding: 16px 32px;
  font-size: 11px;
  letter-spacing: .2em;
}
.btn-outline-wine:hover { background: var(--wine); color: #fff; }

.btn-solid {
  border: 1px solid var(--wine);
  background: var(--wine);
  color: #fff;
  padding: 18px 38px;
  font-size: 11px;
  letter-spacing: .2em;
}
.btn-solid:hover { background: #8a3c38; border-color: #8a3c38; color: #fff; }
.btn-solid--block { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 15px 30px; }

/* ---------- Nav shared by the masthead and the sticky header ---------- */
.nav-list { display: flex; align-items: center; gap: inherit; }
.nav-list a {
  white-space: nowrap;
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  color: rgba(255, 255, 255, .9);
  transition: color 200ms ease, border-color 200ms ease;
}
.nav-list a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.hamburger {
  display: none;
  width: 44px; height: 44px;
  flex: none;
  background: none; border: 0; padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}
.hamburger span { display: block; width: 18px; height: 1px; background: #fff; }

/* ---------- Sticky header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: var(--ink);
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.site-header.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px var(--pad);
  color: #fff;
}
.site-header__brand { display: flex; align-items: center; gap: 12px; color: #fff; }
.site-header__brand:hover { color: #fff; }
.site-header__wordmark {
  font-family: var(--serif);
  font-size: clamp(11px, 3vw, 15px);
  line-height: 1;
  letter-spacing: .26em;
  white-space: nowrap;
}
.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 30px);
  font-size: 10px;
  letter-spacing: .24em;
}

/* ---------- Masthead ---------- */
.masthead {
  background: var(--ink);
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(10px, 2.5vw, 24px);
  color: #fff;
}
.masthead__brand { display: flex; align-items: center; gap: clamp(9px, 2.4vw, 16px); color: #fff; min-width: 0; }
.masthead__brand:hover { color: #fff; }
.masthead__wordmark {
  font-family: var(--serif);
  font-size: clamp(11px, 3.1vw, 17px);
  line-height: 1;
  letter-spacing: .26em;
  white-space: nowrap;
}
.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 30px);
  padding-top: 5px;
  font-size: 11px;
  letter-spacing: .2em;
}

/* ---------- Project title block ---------- */
.title-block {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  padding: 30px var(--pad) calc(var(--overlap) + 40px);
}
.title-block__ghost-mark {
  position: absolute;
  right: -60px;
  top: 14px;
  width: 420px;
  height: 368px;
  color: rgba(var(--gold-rgb), .28);
  pointer-events: none;
}
.title-block__ghost-mark path { animation: houseDraw 2600ms cubic-bezier(.5, 0, .3, 1) 300ms both; }

.title-block__back {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--cream-rgb), .6);
  transition: color 200ms ease;
}
.title-block__back:hover { color: var(--gold); }

.title-block__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: end;
  margin-top: clamp(30px, 4vw, 52px);
}
.title-block__badge {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: var(--wine);
  padding: 13px 20px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--bone);
  animation: riseIn 760ms cubic-bezier(.22, .7, .25, 1) 140ms both;
}
.title-block__title {
  margin-top: 24px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 6vw, 76px);
  line-height: 1.06;
  letter-spacing: .005em;
  color: var(--bone);
  animation: riseIn 900ms cubic-bezier(.22, .7, .25, 1) 280ms both;
}
.title-block__rule {
  display: block;
  width: 144px;
  max-width: 60%;
  height: 3px;
  margin-top: 30px;
  background: var(--bone);
  transform-origin: left center;
  animation: ruleIn 700ms cubic-bezier(.65, 0, .35, 1) 620ms both;
}
.title-block__lede {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(var(--cream-rgb), .8);
  text-wrap: pretty;
  animation: riseIn 760ms cubic-bezier(.22, .7, .25, 1) 460ms both;
}

@keyframes riseIn   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ruleIn   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes houseDraw{ from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes drawX    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drawY    { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- Closing CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  min-height: 480px;
  background: var(--ink);
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 8vw, 160px);
  color: #fff;
}
.cta-band__border {
  position: absolute;
  left: 40px; right: 40px; top: 34px; bottom: 34px;
  pointer-events: none;
}
.cta-band__border span { position: absolute; background: rgba(255, 255, 255, .85); }
.cta-band__t { top: 0;    left: 0;  height: 1px; width: 100%; transform-origin: left center;   transform: scaleX(0); }
.cta-band__r { top: 0;    right: 0; width: 1px;  height: 100%; transform-origin: center top;   transform: scaleY(0); }
.cta-band__b { bottom: 0; right: 0; height: 1px; width: 100%; transform-origin: right center;  transform: scaleX(0); }
.cta-band__l { bottom: 0; left: 0;  width: 1px;  height: 100%; transform-origin: center bottom; transform: scaleY(0); }
.cta-band.is-visible .cta-band__t { animation: drawX 900ms cubic-bezier(.65,0,.35,1) 0ms    both; }
.cta-band.is-visible .cta-band__r { animation: drawY 900ms cubic-bezier(.65,0,.35,1) 700ms  both; }
.cta-band.is-visible .cta-band__b { animation: drawX 900ms cubic-bezier(.65,0,.35,1) 1400ms both; }
.cta-band.is-visible .cta-band__l { animation: drawY 900ms cubic-bezier(.65,0,.35,1) 2100ms both; }

.cta-band__inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.cta-band__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.16;
  text-wrap: balance;
}
.cta-band__aside p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}
.cta-band__aside .btn-solid { margin-top: 28px; }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: rgba(255, 255, 255, .85);
  padding: 44px var(--pad) 26px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.site-footer__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
}
.site-footer__brand { display: flex; align-items: center; gap: clamp(9px, 2.4vw, 16px); color: #fff; min-width: 0; }
.site-footer__brand:hover { color: #fff; }
.site-footer__wordmark { font-family: var(--serif); font-size: clamp(11px, 3vw, 16px); line-height: 1; letter-spacing: .26em; }
.site-footer__social { display: flex; gap: 14px; align-items: center; }
.site-footer__social a {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  color: rgba(255, 255, 255, .85);
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.site-footer__social a:hover { background: var(--wine); border-color: var(--wine); color: #fff; }

.site-footer__info {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding: 44px 0 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  text-align: center;
}
.site-footer__col { display: flex; flex-direction: column; gap: 26px; align-items: center; }
.site-footer__heading {
  display: inline-block;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .24em;
  color: rgba(255, 255, 255, .9);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.site-footer__col p { font-size: 16px; font-weight: 300; line-height: 2; color: rgba(255, 255, 255, .85); }
.site-footer__muted { color: rgba(255, 255, 255, .6); }
.site-footer__email { word-break: break-word; }

.site-footer__bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.6vw, 36px);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
}
.site-footer__nav a { transition: color 200ms ease; }
.site-footer__copy { font-size: 10px; letter-spacing: .16em; color: rgba(255, 255, 255, .55); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 55;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding: 12px 20px;
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  color: #fff;
}
.menu[hidden] { display: none; }
.menu__close {
  position: absolute;
  top: 22px; right: 22px;
  background: none;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  padding: 10px 14px;
  font-size: 10px;
  letter-spacing: .2em;
  cursor: pointer;
}
.menu__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.menu__brand-line1 { font-family: var(--serif); font-size: 17px; letter-spacing: .30em; }
.menu__brand-line2 { font-family: var(--serif); font-size: 12px; letter-spacing: .42em; color: rgba(255,255,255,.8); }
.menu__nav { display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 11px; letter-spacing: .24em; }
.menu__nav a { color: #fff; }
.menu__nav a:hover { color: var(--gold); }
.menu__cta {
  margin-top: 10px;
  background: var(--wine);
  padding: 16px 40px;
  transition: background 200ms ease;
}
.menu__cta:hover { background: #8a3c38; color: #fff; }

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

@media (max-width: 820px) {
  body { padding-bottom: 70px; }
  .sticky-cta { display: block; }
  .hamburger { display: flex; }
  .site-header__nav .nav-list,
  .site-header__nav .btn-outline-light,
  .masthead__nav .nav-list,
  .masthead__nav .btn-outline-light { display: none; }
  .masthead__nav { padding-top: 0; }
  .title-block__ghost-mark { width: 260px; height: 228px; right: -70px; }
}

@media (max-width: 700px) {
  .title-block__inner { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cta-band { padding: 64px clamp(24px, 6vw, 40px); }
  .cta-band__inner { grid-template-columns: minmax(0, 1fr); }
  .cta-band__border { left: 16px; right: 16px; top: 20px; bottom: 20px; }
  .site-footer__info { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .site-footer__top,
  .site-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer__nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-band__border span { transform: none !important; }
  .title-block__ghost-mark path { stroke-dashoffset: 0; }
}