/* ==========================================================================
   Riverstone Custom Homes — Global Stylesheet
   Palette is derived from the logo (warm charcoal + tan flourish)
   ========================================================================== */

:root {
  /* Colors */
  --color-bg: #f8f5ef;
  --color-bg-alt: #efeae0;
  --color-surface: #ffffff;
  --color-dark: #1d1d1b;
  --color-dark-soft: #2a2a27;
  --color-text: #2a2a27;
  --color-text-muted: #5a5856;
  --color-line: #d9d2c4;
  --color-accent: #b9a581;       /* warm tan / sand — lifted from flourish */
  --color-accent-dark: #8a7a5c;
  --color-green: #86a37d;        /* calm sage green — brighter per Tweak 6 feedback */
  --color-teal: #86a37d;         /* legacy alias — resolves to the same sage */
  --color-gray: #3e3a33;         /* warm theme gray — used by section--dark CTA (Tweak 6) */

  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container: 1280px;
  --container-wide: 1520px;
  --radius: 2px;
  --nav-h: 84px;
  --nav-h-mobile: 68px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 200ms;
  --t-med: 420ms;
  --t-slow: 800ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--color-accent-dark); }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
hr { border: 0; border-top: 1px solid var(--color-line); margin: 0; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: .01em;
  margin: 0 0 .45em;
  line-height: 1.12;
  color: var(--color-dark);
}
h1 { font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 400; }
h3 { font-size: clamp(1.35rem, 2.1vw, 1.9rem); }
h4 { font-size: 1.15rem; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 1rem;
}
.display {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.05;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: .005em;
}
p { margin: 0 0 1rem; }
.lead { font-size: 1.125rem; color: var(--color-text-muted); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(64px, 9vw, 140px) 0; }
.section-tight { padding: clamp(40px, 6vw, 90px) 0; }
.section--dark { background: var(--color-gray); color: #ece7dc; }
.section--dark h1,.section--dark h2,.section--dark h3 { color: #fff; }
.section--alt { background: var(--color-bg-alt); }

.grid { display: grid; gap: 24px; }
.two-col { display: grid; gap: clamp(32px, 5vw, 80px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex; align-items: center;
  background: rgba(255,255,255,0);
  transition: background var(--t-med) var(--ease), height var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.nav--inner { background: rgba(255,255,255,.98); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.nav.scrolled { background: rgba(255,255,255,.98); box-shadow: 0 1px 0 rgba(0,0,0,.06); height: 68px; }

.nav__row {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav__logo { display: flex; align-items: center; height: 100%; }
/* Tweak 16b: logo fills the bar with consistent breathing room — never overflows.
   84px bar -> 64px logo (~10px each side). 68px bar -> 52px logo (~8px each side). */
.nav__logo img { height: 64px; width: auto; display: block; transition: filter var(--t-med) var(--ease), height var(--t-med) var(--ease); }
.nav.scrolled .nav__logo img, .nav--inner .nav__logo img { height: 52px; }
@media (max-width: 720px) {
  .nav__logo img { height: 52px; }
  .nav.scrolled .nav__logo img { height: 48px; }
}

/* Hero-overlay nav shows white logo; scrolled or inner-page nav shows dark */
.nav .logo-light { display: block; }
.nav .logo-dark  { display: none; }
.nav.scrolled .logo-light, .nav--inner .logo-light { display: none; }
.nav.scrolled .logo-dark,  .nav--inner .logo-dark  { display: block; }

.nav__menu {
  display: flex; gap: 36px; align-items: center;
  font-size: .88rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.nav__menu a { color: #fff; position: relative; padding: 6px 0; }
.nav.scrolled .nav__menu a, .nav--inner .nav__menu a { color: var(--color-dark); }
.nav__menu a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav__menu a:hover::after, .nav__menu a.is-active::after { transform: scaleX(1); }
.nav__menu a.is-active { color: var(--color-accent-dark) !important; }

.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid currentColor; border-radius: var(--radius);
  font-size: .78rem; letter-spacing: .22em;
}

/* Hamburger */
.nav__toggle {
  display: none; width: 44px; height: 44px;
  align-items: center; justify-content: center; color: #fff;
}
.nav.scrolled .nav__toggle, .nav--inner .nav__toggle { color: var(--color-dark); }
.nav__toggle .bar { width: 26px; height: 1.5px; background: currentColor; position: relative; transition: all var(--t-fast) var(--ease); }
.nav__toggle .bar::before, .nav__toggle .bar::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: all var(--t-fast) var(--ease);
}
.nav__toggle .bar::before { top: -8px; }
.nav__toggle .bar::after { top: 8px; }
.nav[open] .nav__toggle .bar { background: transparent; }
.nav[open] .nav__toggle .bar::before { transform: translateY(8px) rotate(45deg); }
.nav[open] .nav__toggle .bar::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed; inset: 0;
    background: rgba(20,20,18,.98); color: #fff;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 28px; font-size: 1.2rem; padding: 0 24px;
    opacity: 0; visibility: hidden;
    transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
  }
  .nav__menu a, .nav.scrolled .nav__menu a, .nav--inner .nav__menu a { color: #fff; }
  .nav[open] .nav__menu { opacity: 1; visibility: visible; }
  .nav__cta { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: .82rem; letter-spacing: .24em; text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: transparent; color: var(--color-dark);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--color-dark); color: #fff; transform: translateY(-1px); }
.btn--light { color: #fff; border-color: rgba(255,255,255,.85); }
.btn--light:hover { background: #fff; color: var(--color-dark); }
.btn--white { background: #fff; color: var(--color-dark); border-color: #fff; }
.btn--white:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); }
.btn--accent { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }
.btn--accent:hover { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.btn .arrow { font-size: 1.1em; line-height: 1; transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  overflow: hidden;
  text-align: center;
  padding: var(--nav-h) 24px 48px;
}
.hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.6) 100%);
  z-index: 2;
}
.hero__media img, .hero__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
/* Hero slideshow — fades between images */
.hero__slides { position: absolute; inset: 0; z-index: 1; }
.hero__slides .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2000ms var(--ease);
  will-change: opacity;
}
.hero__slides .slide.is-active { opacity: 1; }
.hero__slides .slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero__content {
  position: relative; z-index: 3;
  max-width: 980px;
}
.hero__eyebrow {
  display: inline-block;
  font-size: .78rem; letter-spacing: .36em; text-transform: uppercase;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.45);
  color: rgba(255,255,255,.85);
}
.hero__title {
  font-family: var(--font-serif); font-weight: 300;
  font-size: clamp(2.6rem, 6.5vw, 5.8rem);
  line-height: 1.05; letter-spacing: .01em;
  color: #fff; margin-bottom: 20px;
}
.hero__title em { font-style: italic; color: var(--color-accent); font-weight: 300; }
.hero__sub { color: rgba(255,255,255,.85); font-size: 1.1rem; max-width: 620px; margin: 0 auto 36px; }

/* Hero: single cover photo variant — robust full-viewport frame that works on every device.
   The source photo (home-middle.jpg) is portrait, so we don't force a landscape aspect
   ratio — we just fill the viewport and let object-fit + object-position handle cropping. */
.hero--cover {
  min-height: 100vh;
  min-height: 100svh;        /* iOS Safari: excludes dynamic browser chrome */
  min-height: 100dvh;        /* Modern browsers: dynamic viewport unit */
  max-height: none;
  aspect-ratio: auto;        /* override any previous aspect lock */
  background: #2e261b;       /* fallback matching dark stone edges of the photo */
  padding: var(--nav-h) 24px 48px;
  overflow: hidden;
}
.hero--cover .hero__media { background: #2e261b; }
.hero--cover .hero__media::after {
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.6) 100%);
  opacity: var(--overlay-opacity, 0); /* Tweak 11: scroll-driven reveal — starts bright, darkens as user scrolls */
  transition: opacity 120ms linear;
}
/* Hero content fades + drifts up into place as the overlay arrives */
.hero--cover .hero__content {
  opacity: var(--content-opacity, 0);
  transform: translateY(var(--content-translate, 18px));
  transition: opacity 120ms linear, transform 120ms linear;
}
/* Reduced motion: skip the scroll choreography, show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero__media::after { opacity: 1 !important; transition: none !important; }
  .hero--cover .hero__content { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* No-JS fallback: render at full reveal so headline + overlay are visible without scroll */
.no-js .hero--cover .hero__media::after { opacity: 1; }
.no-js .hero--cover .hero__content { opacity: 1; transform: none; }
.hero--cover .hero__media img {
  object-fit: cover;
  object-position: center 38%;  /* keep arch + upper stonework in view on any ratio */
  transform: none;
}
/* Legacy alias */
.hero__media--contain img { object-fit: cover; }

/* ---------- Tweak 14: portrait -> landscape pinned hero ----------
   The user lands on the original uncropped portrait photo, fitted to the
   viewport height so white only shows on the LEFT and RIGHT sides.
   As the user scrolls, the framed portrait photo zooms in until it fills
   the viewport (cover) — landing in the same dressed end state the hero
   used to ship in: dark overlay + headline visible.

   Scroll progress (p, 0->1) drives:
     --hero-scale        : 1.00 -> coverFactor  (portrait -> cover; coverFactor set per viewport in JS)
     --overlay-opacity   : 0    -> 1            (dark gradient fades in, scoped to the frame so white sides stay clean)
     --content-opacity   : 0    -> 1            (headline + CTA fade in)
     --content-translate : 18px -> 0            (headline drifts up into place)
     --scroll-color      : #1d1d1b -> #ffffff   (scroll icon contrast tracks bg) */
.hero-stage {
  position: relative;
  /* 1.75 viewports of scroll runway — hero stays pinned for ~75% of one extra screen */
  height: 175vh;
  height: 175svh;
  height: 175dvh;
}
.hero-stage .hero--cover {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
}
/* Dark fade under the nav so the white logo + links stay readable when the
   hero behind them is mostly white (start of the scroll runway). */
.hero-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(var(--nav-h) + 32px);
  background: linear-gradient(180deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,.18) 60%, rgba(0,0,0,0) 100%);
  z-index: 4;                 /* above the photo + overlay, below nav */
  pointer-events: none;
}
/* Media surround = white side bars; flex centers the framed photo */
.hero-stage .hero__media {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Disable the legacy parent-level overlay — overlay moves to the frame so
   it scales with the photo and never darkens the white frame. */
.hero-stage .hero__media::after { display: none !important; }
/* Frame matches the source photo aspect (1040x1542 portrait).
   - On landscape viewports it fills viewport height (white bars on sides).
   - On portrait viewports narrower than the photo it fills viewport width. */
.hero__media-frame {
  position: relative;
  aspect-ratio: 1040 / 1542;
  flex-shrink: 0;
  overflow: hidden;
  transform: scale(var(--hero-scale, 1));
  transform-origin: center 38%;     /* keep arch focal point pinned through the zoom */
  transition: transform 80ms linear;
  will-change: transform;
}
@media (min-aspect-ratio: 1040/1542) {
  .hero__media-frame { height: 100%; width: auto; }
}
@media (max-aspect-ratio: 1040/1542) {
  .hero__media-frame { width: 100%; height: auto; }
}
.hero__media-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
  transform: none !important;
  transition: none !important;
  /* Tweak 21: subtle vibrance so the photo pops without looking processed */
  filter: saturate(1.15) contrast(1.04) blur(var(--hero-blur, 0px));
}
.hero__media-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.6) 100%);
  opacity: var(--overlay-opacity, 0);
  transition: opacity 120ms linear;
  pointer-events: none;
  z-index: 2;
}
/* Scroll indicator — visible the whole runway. Color tracks --scroll-color
   so it stays readable on white start and dark end. */
.hero-stage .hero__scroll {
  opacity: 1;
  color: var(--scroll-color, #1d1d1b);
  text-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: color 120ms linear;
}
/* Reduced motion: skip the pin + zoom; show dressed final state. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage { height: auto; }
  .hero-stage::before { display: none; }
  .hero-stage .hero--cover {
    position: relative;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }
  .hero-stage .hero__media { background: transparent; display: block; }
  .hero__media-frame {
    position: absolute; inset: 0;
    aspect-ratio: auto;
    width: 100%; height: 100%;
    transform: none !important; transition: none !important;
  }
  .hero__media-frame::after { opacity: 1 !important; }
}
/* Ultra-wide desktops: cap the hero so the photo doesn't look stretched-tall */
@media (min-aspect-ratio: 16 / 9) and (min-width: 1200px) {
  .hero--cover { min-height: min(100vh, 56.25vw); } /* cap at 16:9 */
}
/* Short landscape (e.g. iPad in split view, small laptops): make sure content fits */
@media (max-height: 640px) and (min-width: 721px) {
  .hero--cover { min-height: 520px; }
}
/* Phones: tighten padding so the CTA doesn't collide with on-screen keyboard / chrome */
@media (max-width: 720px) {
  .hero--cover { padding: calc(var(--nav-h) + 8px) 16px 40px; }
}
.hero__cta { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero__phone {
  display: inline-flex; align-items: center; gap: 10px;
  color: #fff; font-size: .95rem; letter-spacing: .1em;
  padding: 16px 26px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.hero__phone:hover { background: rgba(255,255,255,.14); }

.hero__scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  z-index: 3; color: #fff; opacity: .7;
  font-size: .75rem; letter-spacing: .28em; text-transform: uppercase;
  animation: bob 2.4s var(--ease) infinite;
}
.hero__scroll::after { content: ""; display: block; width: 1px; height: 40px; background: currentColor; margin: 14px auto 0; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* Page banner (non-home pages) */
.banner {
  position: relative;
  min-height: 52vh;
  display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center;
  padding: calc(var(--nav-h) + 40px) 24px 60px;
  overflow: hidden;
}
.banner__media { position: absolute; inset: 0; z-index: 0; }
.banner__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55));
}
.banner__media img { width: 100%; height: 100%; object-fit: cover; }
.banner__content { position: relative; z-index: 2; max-width: 800px; }
.banner h1 { color: #fff; font-weight: 300; }

/* ---------- Featured projects preview (home page) ---------- */
.featured {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1000px; margin: 0 auto;
}
@media (min-width: 900px) { .featured { grid-template-columns: repeat(4, 1fr); } }
.featured__card {
  position: relative; overflow: hidden; aspect-ratio: 3/2; border-radius: 2px;
  background: #222;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.featured__card:hover { box-shadow: 0 16px 40px rgba(0,0,0,.16); }
.featured__card img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; transition: transform 1.2s var(--ease), filter .4s var(--ease); }
.featured__card:hover img { transform: scale(1.06); }
.featured__card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7));
}
.featured__caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 18px 20px; color: #fff;
}
.featured__caption .eyebrow { color: var(--color-accent); font-size: .68rem; }
.featured__caption h3 { color: #fff; margin: 2px 0 0; font-size: 1.15rem; line-height: 1.2; }

/* ---------- Parallax image / image-text strip ---------- */
.imgstrip { position: relative; height: 52vh; min-height: 380px; overflow: hidden; }
.imgstrip img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Logo banner (inner-page hero with logo as top image) ---------- */
.logo-banner {
  /* Tweak 6: crop top so the mark sits near the top (below nav) — not pushed way down */
  padding: calc(var(--nav-h) + clamp(16px, 2.5vw, 32px)) 0 clamp(40px, 6vw, 80px);
  background: var(--color-bg-alt);
  text-align: center;
  border-bottom: 1px solid var(--color-line);
}
.logo-banner__mark img {
  display: block;
  margin: 0 auto clamp(24px, 3vw, 40px);
  max-width: 360px;
  width: 58%;
  height: auto;
  opacity: 1;      /* Tweak 5: guarantee no fade on builders page */
  filter: none;
}
.logo-banner__text h1 {
  margin: 10px 0 0;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
}
.logo-banner__text .eyebrow { display: inline-block; margin-bottom: 4px; }
@media (max-width: 620px) {
  .logo-banner__mark img { max-width: 220px; width: 65%; }
}

/* ---------- Logo buffer (home page spacer) ---------- */
.logo-buffer {
  padding: clamp(60px, 9vw, 120px) 0;
  background: var(--color-bg);
  text-align: center;
}
.logo-buffer > .container > img,
.logo-buffer > img {
  max-width: 360px;
  width: 65%;
  height: auto;
  margin: 0 auto;
  opacity: .9;
}
@media (max-width: 620px) {
  .logo-buffer > .container > img,
  .logo-buffer > img { max-width: 260px; width: 70%; }
}

/* Variant: logo buffer with slideshow behind + transparent logo centered on top */
.logo-buffer--slides {
  position: relative;
  padding: 0;
  min-height: clamp(720px, 92vh, 1080px); /* Tweak 9: taller frame — landscape photos show fully */
  overflow: hidden;
  background: #1a1713;
  margin-top: 0;  /* Current Builds now sits directly above — no extra gap */
  margin-bottom: clamp(60px, 9vh, 120px); /* space above the overview section */
}
.logo-buffer__slides { position: absolute; inset: 0; z-index: 1; }
.logo-buffer__slides .slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 2000ms var(--ease);
  will-change: opacity;
}
.logo-buffer__slides .slide.is-active { opacity: 1; }
.logo-buffer__slides .slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.logo-buffer--slides::after {
  /* subtle darken so the logo stays legible over any slide */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.logo-buffer__mark {
  position: relative; z-index: 3;
  display: flex;
  align-items: flex-end;          /* keep logo in the lower third */
  justify-content: center;
  width: 100%; height: 100%;
  min-height: clamp(720px, 92vh, 1080px); /* Tweak 9: match taller slideshow */
  padding-bottom: clamp(80px, 13vh, 150px); /* Tweak 11: lift slightly for better balance */
}
.logo-buffer__mark img,
.logo-buffer__mark .logo-tint {
  max-width: 560px;          /* Tweak 11: ~+22% — stronger first impression */
  width: 70%;
  height: auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.45));
  opacity: 1;
}
@media (max-width: 620px) {
  .logo-buffer__mark img,
  .logo-buffer__mark .logo-tint { max-width: 360px; width: 84%; } /* Tweak 11: +20% on mobile */
}

/* Tinted logo — mask the mark and paint it with a theme color
   (renders the Riverstone logo in our warm tan accent on any background) */
.logo-tint {
  display: block;
  aspect-ratio: 1305 / 659;                /* preserves logo proportions */
  background-color: var(--color-accent);   /* warm tan — theme color */
  -webkit-mask: url(../img/logo-white.png) center / contain no-repeat;
          mask: url(../img/logo-white.png) center / contain no-repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}
.logo-tint--dark { background-color: var(--color-accent-dark); }

/* Builders page: apply the tan tint to the large logo there too */
.logo-banner__mark .logo-tint {
  margin: 0 auto clamp(24px, 3vw, 40px);
  max-width: 360px;
  width: 58%;
}
@media (max-width: 620px) {
  .logo-banner__mark .logo-tint { max-width: 240px; width: 68%; }
}

/* Centered prose variant (for the overview section when the companion image is removed) */
.section--center { text-align: center; }
.prose--center { max-width: 780px; margin: 0 auto; text-align: center; }
.prose--center .eyebrow { display: inline-block; }
.prose--center .btn { margin-top: 8px; }

/* ---------- Portfolio card: contain (show full image, no crop) ---------- */
.pf-card[data-contain="true"] .pf-card__media {
  background: #0f0f0e;
  aspect-ratio: 16/10;
}
.pf-card[data-contain="true"] .pf-card__media img {
  object-fit: contain !important;
}

/* ---------- Builder cards ---------- */
.builders {
  display: grid; gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .builders { grid-template-columns: 1fr 1fr; } }
.builder {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.builder:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(0,0,0,.08); }
.builder__img { aspect-ratio: 4/5; overflow: hidden; background: #1a1a18; }
.builder__img img { width: 100%; height: 100%; object-fit: cover; }
.builder__body { padding: 32px 32px 40px; }
.builder__title { font-size: .8rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-accent-dark); font-weight: 500; margin-bottom: 6px; }
.builder__name { margin: 0 0 14px; }
.builder__bio { color: var(--color-text-muted); margin-bottom: 22px; }
.builder__contact {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 18px; border-top: 1px solid var(--color-line);
  font-size: .92rem;
}
.builder__contact a { color: var(--color-dark); border-bottom: 1px solid transparent; padding-bottom: 1px; }
.builder__contact a:hover { border-bottom-color: currentColor; }

/* ---------- Portfolio ---------- */
.pf-tabs {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--color-line);
}
.pf-tab {
  padding: 16px 28px; font-size: .82rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--color-text-muted);
  position: relative; border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  background: none; cursor: pointer;
}
.pf-tab:hover { color: var(--color-dark); }
.pf-tab.is-active { color: var(--color-dark); border-bottom-color: var(--color-accent-dark); }
.pf-tab__count { opacity: .6; margin-left: 4px; font-size: .9em; }

.pf-grid {
  display: grid; gap: 40px 28px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.pf-card {
  background: var(--color-surface);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 0 rgba(0,0,0,.03);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(0,0,0,.1); }
.pf-card__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: #1a1a18;
}
.pf-card__media .slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 900ms var(--ease);
}
.pf-card__media .slide.is-active { opacity: 1; }
.pf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pf-card__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
/* Portfolio card title uses accent color (tan) per Tweak 1 */
.pf-card__title { color: var(--color-accent-dark); }
/* Spacing between the home-page Current Projects button and View Full Portfolio button */
.home-cta-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pf-card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  padding: 6px 12px; background: rgba(255,255,255,.9); color: var(--color-dark);
  border-radius: var(--radius);
}
.pf-card__tag--soon { background: var(--color-accent-dark); color: #fff; }
.pf-card__body { padding: 26px 28px 32px; }
.pf-card__title { font-size: 1.4rem; margin-bottom: 6px; }
.pf-card__desc { color: var(--color-text-muted); font-size: .95rem; margin: 0; }

.pf-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.pf-dots span {
  width: 6px; height: 6px; background: rgba(255,255,255,.5); border-radius: 50%;
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.pf-dots span.is-active { background: #fff; width: 16px; border-radius: 3px; }

/* Tweak 11: cards with no media (e.g. 411 Campbell pre-sale) — text-only layout
   The Coming Soon tag moves inline to the top of the body. */
.pf-card--no-media .pf-card__body {
  padding: 32px 30px 36px;
}
.pf-card__tag--inline {
  position: static;
  display: inline-block;
  margin-bottom: 14px;
}

/* ---------- Contact ---------- */
.contact {
  display: grid; gap: 60px;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .contact { grid-template-columns: 1.1fr 1fr; }
}
.form {
  display: grid; gap: 20px;
  background: var(--color-surface); padding: 40px;
  border: 1px solid var(--color-line);
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field textarea {
  font-family: var(--font-sans); font-size: 1rem; color: var(--color-dark);
  background: transparent;
  padding: 14px 4px; border: 0; border-bottom: 1px solid var(--color-line);
  transition: border-color var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--color-accent-dark);
}
.field textarea { min-height: 120px; resize: vertical; }
.form__note { font-size: .8rem; color: var(--color-text-muted); }
.form__submit { margin-top: 6px; justify-self: start; }

.contact-card {
  background: var(--color-bg-alt); padding: 40px;
  display: flex; flex-direction: column; gap: 26px;
}
.contact-row { display: flex; flex-direction: column; gap: 4px; }
.contact-row strong { font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 500; }
.contact-row a { color: var(--color-dark); }

/* ---------- Footer ---------- */
.footer {
  background: var(--color-green); color: #e3ebe0;
  padding: 80px 0 32px;
}
.footer a { color: #e6dfce; }
.footer__grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}
.footer h4 { color: #fff; font-family: var(--font-serif); font-weight: 500; margin: 0 0 18px; font-size: 1.1rem; letter-spacing: .04em; }
.footer__logo { display: flex; align-items: center; height: 100%; }
.footer__logo img { height: 140px; max-width: 100%; object-fit: contain; }
@media (max-width: 820px) { .footer__logo img { height: 96px; } }
.footer__brandcopy { color: #a5a094; font-size: .95rem; max-width: 280px; }
.footer__links { display: grid; gap: 10px; font-size: .92rem; }
.footer__social { display: flex; gap: 12px; margin-top: 10px; }
.footer__social a {
  width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__social a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.footer__bottom {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .82rem; color: #a9c5c4;
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: transform, opacity;
}
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.in-view > *:nth-child(7) { transition-delay: 540ms; }
.reveal-stagger.in-view > *:nth-child(8) { transition-delay: 630ms; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .hero__scroll, .featured__card img { transition: none !important; animation: none !important; }
}

/* ---------- Accessibility utilities ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Per-page tweaks ---------- */
.page-body { padding-top: var(--nav-h); }
@media (max-width: 900px) { .page-body { padding-top: var(--nav-h-mobile); } }

/* Section intro */
.section-head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 6vw, 70px); }
.section-head p { color: var(--color-text-muted); font-size: 1.08rem; }

.divider-flourish {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin: 12px 0 20px;
  color: var(--color-accent-dark);
}
.divider-flourish::before, .divider-flourish::after {
  content: ""; flex: 0 0 60px; height: 1px; background: currentColor; opacity: .5;
}
.divider-flourish span { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; letter-spacing: .08em; }

/* Thank-you banner (contact success) */
.notice {
  padding: 16px 22px; border-left: 3px solid var(--color-accent-dark);
  background: #efeadf; margin-bottom: 28px; color: var(--color-text);
}

/* Content prose for About/etc. */
.prose p { font-size: 1.06rem; color: var(--color-text-muted); }
.prose p + p { margin-top: 1.1rem; }

/* Stat row */
.stats {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 30px;
}
.stat { text-align: center; padding: 20px; border: 1px solid var(--color-line); background: var(--color-surface); }
.stat__num { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--color-dark); line-height: 1; margin-bottom: 6px; }
.stat__label { font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color-text-muted); }

/* Tweak 16: contact page now shows direct contacts only — center the solo card */
.contact--solo {
  grid-template-columns: 1fr !important;
  max-width: 640px;
  margin: 0 auto;
}

/* Tweak 23: home logo-buffer slideshow — better mobile fit
   Shorter slideshow container brings the aspect closer to the landscape
   source photos (1.5:1) so far less of each photo is cropped horizontally.
   Houses stay centered + framed instead of running off the edges. */
@media (max-width: 720px) {
  .logo-buffer--slides { min-height: clamp(440px, 58vh, 620px); }
  .logo-buffer__mark { min-height: clamp(440px, 58vh, 620px); padding-bottom: clamp(28px, 7vh, 70px); }
  .logo-buffer__slides .slide img { object-position: center 45%; }
}
@media (max-width: 520px) {
  .logo-buffer--slides { min-height: clamp(380px, 52vh, 540px); }
  .logo-buffer__mark { min-height: clamp(380px, 52vh, 540px); }
}


/* Tweak 21: home Current Builds section
   Two-column layout: photo carousel on the left (with address in gold below
   the photo), title + copy + CTA on the right. Stacks on small screens. */
.current-builds {
  padding-top: clamp(90px, 11vw, 150px);
  padding-bottom: clamp(70px, 9vw, 120px);
}
.current-builds__grid {
  display: grid; gap: clamp(28px, 4vw, 60px);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .current-builds__grid { grid-template-columns: 1.05fr 1fr; }
}
.current-builds__media { position: relative; }
.cb__slides {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #1a1a18;
  border-radius: 2px;
}
.cb__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.cb__slide.is-active { opacity: 1; }
.cb__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }
.cb__captions { position: relative; }
.cb__caption {
  position: absolute; left: 0; right: 0; top: 0;
  text-align: center;
  color: var(--color-accent-dark);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  /* Tweak 22: bigger address line */
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: .015em;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.cb__captions { min-height: 2.4em; margin-top: 18px; }
.cb__caption.is-active { opacity: 1; }
.current-builds__copy .eyebrow { color: var(--color-accent); }
.current-builds__copy h2 { margin-bottom: 14px; }
.current-builds__copy p { color: var(--color-text-muted); margin-bottom: 24px; max-width: 420px; }

/* Tweak 26: portfolio card floor-plan download link --------------------
   "Download floorplan here" — italic "here" + download icon are both
   wrapped in a single <a download> so they look like one clickable unit
   and the browser handles native download on phone + desktop. */
.pf-card__floorplan {
  margin-top: 14px;
  font-size: .95rem;
  color: var(--color-text-muted);
}
.pf-floorplan {
  color: var(--color-accent-dark);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.pf-floorplan em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05em;
}
.pf-floorplan__icon {
  flex-shrink: 0;
  transform: translateY(2px);
  transition: transform var(--t-fast) var(--ease);
}
.pf-floorplan:hover { opacity: .8; }
.pf-floorplan:hover .pf-floorplan__icon { transform: translate(0, 4px); }
.pf-floorplan:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Tweak 30: portfolio still-cover cards + lightbox gallery ----------------- */
.pf-card__cover { width: 100%; height: 100%; object-fit: contain; background: #1a1a18; display: block;
  transition: transform 1.1s var(--ease); }
/* hover scale removed — contain bars look odd when scaled */

/* "n photos" hover hint on the cover */
.pf-card__viewhint {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--radius);
  background: rgba(20,20,18,.62); color: #fff;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  backdrop-filter: blur(3px);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  pointer-events: none;
}
.pf-card__media:hover .pf-card__viewhint,
.pf-card__media:focus-visible .pf-card__viewhint { opacity: 1; transform: translateY(0); }
.pf-card__media:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }

/* "View gallery" link in the card body */
.pf-card__gallery {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 0;
  background: none; border: none; cursor: pointer;
  color: var(--color-accent-dark);
  font-family: var(--font-sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: gap var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.pf-card__gallery:hover { gap: 12px; opacity: .8; }
.pf-card__gallery:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 3px; }

/* ---- Lightbox ---- */
.pf-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,15,13,.94);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-med) var(--ease), visibility var(--t-med) var(--ease);
  padding: clamp(16px, 4vw, 56px);
}
.pf-lb[aria-hidden="false"] { opacity: 1; visibility: visible; }
.pf-lb__stage {
  margin: 0; max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.pf-lb__img {
  max-width: min(1100px, 92vw); max-height: 80vh;
  width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  border-radius: 2px;
}
.pf-lb__caption {
  color: rgba(255,255,255,.92);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: .015em;
  text-align: center;
}
.pf-lb__counter {
  position: absolute; bottom: clamp(18px, 4vh, 38px); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  font-size: .8rem; letter-spacing: .22em;
}
.pf-lb__close {
  position: absolute; top: clamp(16px, 3vh, 32px); right: clamp(16px, 3vw, 36px);
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.28); cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.pf-lb__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); }
.pf-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.28); cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pf-lb__nav:hover { background: rgba(255,255,255,.2); border-color: var(--color-accent); }
.pf-lb__prev { left: clamp(10px, 3vw, 40px); }
.pf-lb__next { right: clamp(10px, 3vw, 40px); }
.pf-lb__close:focus-visible, .pf-lb__nav:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}
@media (max-width: 620px) {
  .pf-lb__nav { width: 44px; height: 44px; }
  .pf-lb__img { max-height: 70vh; }
}