/* =================================================================
   DISTINCT DESIGNS CONSTRUCTION — DESIGN SYSTEM STYLESHEET
   Shared foundation for custom-home-build, remodel & ADU pages.
   Organization: Variables → Reset → Typography → Layout Primitives →
   Components → Sections → Media Queries (mobile-first)
   ================================================================= */

/* -----------------------------------------------------------------
   1. CSS VARIABLES — DESIGN TOKENS
   ----------------------------------------------------------------- */
:root {
  /* Color: brand palette taken from distinctdesignsconstruction.com
     (Astra/Elementor globals + rendered usage). Navy + near-black + gold.
       #070614 near-black  — dominant dark surface
       #0F172A navy        — headings on light, secondary dark surface, footer
       #C8AB72 gold        — brand accent (Astra color-4 / Elementor accent)
       #364151 slate       — body copy
       #D1DAE5 light steel — light neutral surface / muted on dark
       #FFFFFF white       — light surface, text on dark                     */
  --color-bg: #ffffff;
  --color-bg-sand: #d1dae5;
  --color-charcoal: #0f172a;
  --color-charcoal-soft: #070614; /* deeper than --color-charcoal, not lighter */
  --color-text: #0f172a;
  --color-text-muted: #364151; /* AA: 10.3:1 on --color-bg, 7.3:1 on --color-bg-sand */
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #d1dae5;
  --color-clay: #c8ab72;       /* true brand gold — use on dark, or as a surface/border */
  --color-clay-dark: #a98a50;  /* darker gold, hover on gold surfaces */
  --color-clay-text: #8f7239;  /* gold as TEXT on light: brand gold is only 2.2:1 on
                                  white, this shade keeps the hue and passes AA (4.5:1) */
  --color-on-accent: #0f172a;  /* text on a gold surface (8.1:1) — matches the navy-on-gold
                                  they use for their own FAQ; white on gold is 2.2:1 */
  --color-hairline: #d1dae5;
  --color-hairline-on-dark: rgba(255, 255, 255, 0.16);

  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.35rem, 4.4vw + 0.75rem, 4.25rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.25rem);
  --fs-h3: clamp(1.25rem, 1vw + 1rem, 1.65rem);
  --fs-h4: 1.1rem;
  --fs-body-lg: 1.2rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-eyebrow: 0.8rem;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;
  --space-3xl: 10rem;

  /* Layout */
  --content-max: 1360px;
  --content-narrow: 760px;
  --nav-h: 71px; /* actual sticky-nav height — the logo now sets it, so it
                    is the same at every breakpoint (no override needed) */
  --radius: 2px;
  --border-w: 1px;

  /* Motion */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.6s;
  --dur-slow: 0.9s;
}

/* -----------------------------------------------------------------
   2. RESET / BASE
   ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; height: auto; }

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

ul { list-style: none; margin: 0; padding: 0; }
ol { margin: 0; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-charcoal);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0;
}

p { margin: 0 0 var(--space-sm); }
p:last-child { margin-bottom: 0; }

button {
  font-family: inherit;
  cursor: pointer;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-charcoal);
  color: var(--color-text-on-dark);
  padding: var(--space-2xs) var(--space-sm);
  z-index: 999;
}
.skip-link:focus { left: var(--space-sm); top: var(--space-sm); }

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

/* -----------------------------------------------------------------
   3. TYPOGRAPHY UTILITIES
   ----------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-clay-text);
  font-weight: 600;
  margin: 0 0 var(--space-md);
}

h1 { font-size: var(--fs-hero); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 500; }
h4 {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0;
}

.subhead {
  font-size: var(--fs-body-lg);
  color: var(--color-text-muted);
  max-width: 42ch;
  margin-top: var(--space-md);
}

.pull-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--color-charcoal);
  border-left: 2px solid var(--color-clay);
  padding-left: var(--space-md);
  margin-top: var(--space-lg);
  line-height: 1.4;
}

/* -----------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   ----------------------------------------------------------------- */
.section {
  padding: var(--space-2xl) var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
}

/* Keep anchor-linked headings clear of the sticky nav */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--space-md)); }

/* Narrow = a capped reading measure, still locked to the page's left edge.
   (Capping the section itself would centre the block and make the left
   edge zig-zag against the full-width sections.) */
.section--narrow > * { max-width: var(--content-narrow); }

.section--tinted { background: var(--color-bg-sand); }
/* section--tinted stretches full width; re-wrap inner content */
.section--tinted.section { max-width: none; padding-left: 0; padding-right: 0; }
.section--tinted > * { max-width: var(--content-max); margin-left: auto; margin-right: auto; padding-left: var(--space-md); padding-right: var(--space-md); }

.section__header { margin-bottom: var(--space-xl); }
.section__header p { color: var(--color-text-muted); max-width: 55ch; margin-top: var(--space-2xs); }

.section--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.image-break {
  margin: 0;
  width: 100%;
  overflow: hidden;
}
.image-break img { width: 100%; object-fit: cover; max-height: 640px; }

/* -----------------------------------------------------------------
   5. SCROLL REVEAL (Intersection Observer driven)
   Progressive enhancement: content is VISIBLE by default. The hidden
   start-state is only applied once JS confirms it can reveal it again
   (html.js-reveal), so a JS failure can never leave the page blank.
   ----------------------------------------------------------------- */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-editorial),
              transform var(--dur-slow) var(--ease-editorial);
}
.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* -----------------------------------------------------------------
   6. IMAGE GRADING (cohesive desert placeholder treatment)
   ----------------------------------------------------------------- */
.grade {
  filter: sepia(0.16) saturate(1.12) brightness(0.97) contrast(1.04) hue-rotate(-4deg);
}

/* -----------------------------------------------------------------
   7. BUTTONS
   ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  transition: background var(--dur-fast) var(--ease-editorial),
              color var(--dur-fast) var(--ease-editorial),
              border-color var(--dur-fast) var(--ease-editorial),
              transform var(--dur-fast) var(--ease-editorial);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-clay);
  color: var(--color-on-accent);
  border-color: var(--color-clay);
}
.btn--primary:hover { background: var(--color-clay-dark); border-color: var(--color-clay-dark); }
.btn--primary:focus-visible {
  outline: 2px solid var(--color-charcoal);
  outline-offset: 3px;
}

/* Free-guide CTA. Same gold fill as the header consultation button, with
   roomier padding so it reads against the tinted section. */
.guide-cta { margin-top: var(--space-sm); }
.guide-cta .btn { padding: 1rem 1.5rem; }
.guide-cta .btn::after {
  content: "→";
  margin-left: 0.6em;
}

/* Real guide cover, shown as a book. The tilt and shadow are ours.
   The cover art is the published flipbook page, not a redraw. */
.book {
  margin: 0 auto;
  width: min(100%, 240px);
}
.book img {
  width: 100%;
  height: auto;
  border-radius: 2px 5px 5px 2px;
  transform: rotate(-2.5deg);
  box-shadow:
    -8px 0 0 #241c14,
    16px 22px 36px rgba(15, 23, 42, 0.22);
}
@media (prefers-reduced-motion: reduce) {
  .book img { transform: none; }
}

.guide-layout {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
.guide-layout__copy { order: 1; min-width: 0; }
.guide-layout .book { order: 2; }
.guide-layout__form { order: 3; min-width: 0; }

@media (min-width: 800px) {
  .guide-layout--form {
    grid-template-columns: 240px minmax(0, 1fr);
    align-items: center;
  }
  .guide-layout--form .book { order: 1; }
  .guide-layout--form .guide-layout__copy,
  .guide-layout--form .guide-layout__form { order: 2; }
}

@media (min-width: 1100px) {
  .guide-layout:not(.guide-layout--form) {
    grid-template-columns: 260px minmax(200px, 1fr) minmax(280px, 380px);
    gap: var(--space-md) var(--space-lg);
  }
  .guide-layout:not(.guide-layout--form) .book { order: 1; }
  .guide-layout:not(.guide-layout--form) .guide-layout__copy { order: 2; }
  .guide-layout:not(.guide-layout--form) .guide-layout__form { order: 3; }
}

.btn--secondary {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255, 255, 255, 0.5);
}
.btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-text-on-dark); }

/* Nav-sized buttons. --nav is the outlined one (the phone), --nav-primary the
   gold one (the consultation CTA). Same padding so they read as a pair. */
.btn--nav,
.btn--nav-primary {
  padding: var(--space-2xs) var(--space-sm);
}
.btn--nav {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.btn--nav:hover { background: var(--color-charcoal); color: var(--color-text-on-dark); }

.btn--nav-primary {
  background: var(--color-clay);
  color: var(--color-on-accent);
  border-color: var(--color-clay);
}
.btn--nav-primary:hover { background: var(--color-clay-dark); border-color: var(--color-clay-dark); }

.btn--sticky {
  background: var(--color-clay);
  color: var(--color-on-accent);
  padding: var(--space-2xs) var(--space-sm);
}
.btn--sticky:hover { background: var(--color-clay-dark); }

.btn--full { width: 100%; white-space: normal; }

/* -----------------------------------------------------------------
   8. SITE NAVIGATION
   ----------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: var(--border-w) solid transparent;
  transition: border-color var(--dur-fast) var(--ease-editorial),
              box-shadow var(--dur-fast) var(--ease-editorial);
}
.site-nav.is-scrolled {
  border-bottom-color: var(--color-hairline);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.site-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  /* Tighter vertically than the old text wordmark needed, so the larger logo
     does not push the bar past the 80px nav-height cap. */
  padding: var(--space-xs) var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-nav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Height drives the size; width follows the 350x128 aspect ratio. The lockup
   stacks three lines, so below ~46px the "CONSTRUCTION" line stops being
   legible. The 350x128 source still covers 2x at this height. */
.site-nav__logo img {
  height: 46px;
  width: auto;
}

.site-nav__links {
  display: none;
  gap: var(--space-md);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Never let flex squeeze a link until its label wraps: that makes the whole bar
   taller and breaks --nav-h, which the hero height is calculated from. */
.site-nav__links a { flex-shrink: 0; }
.site-nav__links a { color: var(--color-text-muted); transition: color var(--dur-fast) var(--ease-editorial); }
.site-nav__links a:hover { color: var(--color-clay-text); }

/* Phone and consultation CTA sit together as a pair at the right of the bar. */
.site-nav__actions {
  display: none;
  align-items: center;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

/* Compact tap-to-call, phones only. From 760px the existing number button
   in .site-nav__actions takes over, so this one is hidden there. */
.site-nav__call {
  /* Equal auto margins center it in the gap between the logo and the menu. */
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.06em;
}
.site-nav__call-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.site-nav__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-charcoal);
}
.site-nav__toggle-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 100%;
}
.site-nav__toggle-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-editorial), opacity var(--dur-fast) var(--ease-editorial);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-nav__toggle-label { display: none; }

.site-nav__mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0 var(--space-md);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-editorial), padding var(--dur-med) var(--ease-editorial);
}
.site-nav__mobile.is-open {
  max-height: 480px;
  padding: 0 var(--space-md) var(--space-md);
}
.site-nav__mobile a { font-size: var(--fs-body-lg); color: var(--color-text); padding: var(--space-2xs) 0; }
.site-nav__mobile .btn { margin-top: var(--space-2xs); align-self: flex-start; }

/* Sticky slim CTA bar */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: var(--color-charcoal);
  color: var(--color-text-on-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  transform: translateY(100%);
  transition: transform var(--dur-med) var(--ease-editorial);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  display: none;
}

/* -----------------------------------------------------------------
   9. HERO
   ----------------------------------------------------------------- */
.hero {
  position: relative;
  /* The sticky nav consumes layout flow above the hero, so subtract it —
     otherwise hero + nav exceeds one viewport and the CTAs fall below the fold. */
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin: 0;
}
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor the crop to the bottom: the house, terrace and desert ridgeline all
     sit in the lower half of the frame, while the top is empty sky. Cropping
     from the top keeps the subject and the sunset band in view. */
  object-position: center bottom;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  /* Two stacked layers. The hero photograph is bright (pale travertine and
     sky), so white type needs a real base, not a light wash:
       1. horizontal — anchors the left column where the copy sits
       2. vertical   — grounds the base and keeps the top airy
     Falling away to the right leaves the colonnade, pool and palms visible. */
  background:
    linear-gradient(90deg,
      rgba(7, 6, 20, 0.90) 0%,
      rgba(7, 6, 20, 0.80) 25%,
      rgba(7, 6, 20, 0.56) 58%,
      rgba(7, 6, 20, 0.22) 80%,
      rgba(7, 6, 20, 0.02) 100%),
    linear-gradient(0deg,
      rgba(7, 6, 20, 0.58) 0%,
      rgba(7, 6, 20, 0.22) 55%,
      rgba(7, 6, 20, 0.34) 100%);
}
.hero__content {
  position: relative;
  z-index: 1;
  /* Mobile-first: compact so the CTAs stay above the fold on a phone */
  padding: var(--space-lg) var(--space-md);
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}
.hero__content .eyebrow {
  color: var(--color-text-on-dark-muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-sm);
}
/* No measure cap on mobile: the narrow column would force extra lines
   and push the CTAs below the fold. Capped again at desktop. */
.hero__content h1 { color: var(--color-text-on-dark); }
.hero__content .subhead {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
  margin-top: var(--space-sm);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}
.hero-cta a { width: 100%; }

/* -----------------------------------------------------------------
   9.b HERO VARIANT: LEAD FORM IN THE HERO
   Used by the *-hero-form pages. Unused rules on the standard pages,
   kept here so all six stylesheets stay byte-identical.
   ----------------------------------------------------------------- */
.hero--form { align-items: center; }

.hero--form .hero__inner > * { min-width: 0; }

.hero--form .hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
}

/* the inner grid owns the padding now, so the copy block drops its own */
.hero--form .hero__content { padding: 0; max-width: none; }

.hero__form-card {
  /* 90% so the photograph reads through the card. Deliberately rgba on the
     background, not opacity on the element: opacity would fade the labels,
     fields and button too and drop their contrast with them.
     Value is --color-charcoal (#0f172a). */
  background: rgba(15, 23, 42, 0.9);
  border: var(--border-w) solid var(--color-hairline-on-dark);
  border-radius: var(--radius);
  padding: var(--space-sm);
  color: var(--color-text-on-dark);
}
.hero__form-title {
  font-size: 1.7rem;
  color: var(--color-text-on-dark);
}
.hero__form-note {
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-small);
  margin: var(--space-2xs) 0 var(--space-md);
}
/* the form is already styled for a dark surface, so it needs no overrides */
.hero__form-card .lead-form { max-width: none; }

@media (min-width: 1024px) {
  .hero--form .hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-2xl);
    padding: var(--space-xl) var(--space-md);
  }
  /* The copy column is about 560px here, so the full-width hero size would set
     this headline in four lines. Measured: 3.25rem brings every page's headline
     to three, and the grid column already caps the measure without a max-width. */
  .hero__form-card { padding: var(--space-md); }

  /* Between 1024 and 1200 the hero is already split, so the card is only
     ~390-460px wide and two columns would leave ~147px inputs. One column
     until the card can carry two comfortably. */
  .hero__form-card .lead-form { grid-template-columns: 1fr; }
  .hero--form .hero__content h1 { font-size: 3.25rem; max-width: none; }
  .hero--form .hero__content .subhead { max-width: 40ch; }
}

/* -----------------------------------------------------------------
   10. PROCESS STEPS
   ----------------------------------------------------------------- */
.section--split__subhead { margin-top: var(--space-lg); margin-bottom: var(--space-md); }

.process-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.process-steps__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-w) solid var(--color-hairline);
}
.process-steps__item:last-child { border-bottom: none; padding-bottom: 0; }
.process-steps__index {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-clay-text);
  font-weight: 500;
}
.process-steps__item h4 { margin-bottom: var(--space-3xs); }
.process-steps__item p { color: var(--color-text-muted); margin-bottom: 0; }

.section--split__media img { width: 100%; border-radius: var(--radius); }

/* -----------------------------------------------------------------
   11. PROJECTS GRID (asymmetric bento)
   ----------------------------------------------------------------- */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.project-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  /* Tiles are <button> elements (they open a lightbox), so the UA button
     styling has to be cleared before the tile look applies. */
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: zoom-in;
}
.project-tile--tall { aspect-ratio: 3 / 4; }
.project-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-editorial);
}
.project-tile:hover img { transform: scale(1.045); }
.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Scrim guarantees WCAG-safe contrast for the label over any photo.
     Stops are in PIXELS, not percentages: the label is a fixed size, so the
     protection band must be too. With percentages a short tile (the wide
     Alturas cell is only 310px) got far less absolute darkening than a tall
     one, and the label failed AA over bright photography. The label occupies
     the bottom ~80px, which this keeps at >=0.78 alpha on every tile. */
  background: linear-gradient(0deg,
    rgba(7, 6, 20, 0.82) 0px,
    rgba(7, 6, 20, 0.74) 70px,
    rgba(7, 6, 20, 0.26) 130px,
    rgba(7, 6, 20, 0) 200px);
}
.project-tile__label {
  position: absolute;
  left: var(--space-sm);
  bottom: var(--space-sm);
  right: var(--space-sm);
  z-index: 2;
  color: var(--color-text-on-dark);
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
}
.project-tile__label em { font-style: italic; color: var(--color-text-on-dark-muted); font-size: 0.9rem; display: block; }
/* --progress is still clickable (it opens the lightbox), so it keeps the
   zoom cursor inherited from .project-tile. */

/* -----------------------------------------------------------------
   11.b PROJECT LIGHTBOX
   Native <dialog> + showModal(): focus trapping, Esc-to-close and inert
   background come from the platform rather than hand-rolled JS.
   ----------------------------------------------------------------- */
.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  overflow: visible;
  color: var(--color-text-on-dark);
}
.lightbox::backdrop {
  background: rgba(7, 6, 20, 0.9);
}

.lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.lightbox__img {
  max-width: 100%;
  /* Leave room for the caption beneath so tall photos still fit the viewport */
  max-height: 82vh;
  width: auto;
  margin: 0 auto;
  border-radius: var(--radius);
}
.lightbox__caption {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-align: center;
  color: var(--color-text-on-dark);
}
.lightbox__caption em {
  font-style: italic;
  color: var(--color-text-on-dark-muted);
  font-size: 0.9rem;
}

.lightbox__close {
  position: absolute;
  top: calc(-1 * var(--space-md));
  right: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--color-text-on-dark);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-editorial);
}
.lightbox__close:hover { color: var(--color-clay); }

@media (max-width: 640px) {
  .lightbox { max-width: 94vw; }
  .lightbox__close { top: calc(-1 * var(--space-lg)); right: 50%; transform: translateX(50%); }
}

/* -----------------------------------------------------------------
   12. WHY US GRID
   ----------------------------------------------------------------- */
.why-us-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}
.why-us-card h3 { margin-bottom: var(--space-2xs); }
.why-us-card p { color: var(--color-text-muted); }

/* -----------------------------------------------------------------
   13. TESTIMONIALS (editorial pull-quotes)
   ----------------------------------------------------------------- */
.testimonial-stack {
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
.testimonial-stack blockquote {
  margin: 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-clay);
}
.testimonial-stack p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  line-height: 1.45;
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}
.testimonial-stack cite {
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* -----------------------------------------------------------------
   14. FAQ ACCORDION
   ----------------------------------------------------------------- */
.accordion { margin-top: var(--space-xl); }
.accordion__item { border-bottom: var(--border-w) solid var(--color-hairline); }
.accordion__item h3 { font-size: inherit; margin: 0; }

.accordion__trigger {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: var(--space-md) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.accordion__trigger::after {
  content: "+";
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-clay-text);
  transition: transform var(--dur-fast) var(--ease-editorial);
  flex-shrink: 0;
}
.accordion__trigger[aria-expanded="true"]::after { transform: rotate(135deg); }

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-editorial);
}
.accordion__panel p {
  color: var(--color-text-muted);
  padding-bottom: var(--space-md);
  max-width: 60ch;
}

/* -----------------------------------------------------------------
   15. AREAS SERVED
   ----------------------------------------------------------------- */
.areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.areas-grid h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}
.areas-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--fs-body-lg);
  font-family: var(--font-display);
}

/* -----------------------------------------------------------------
   16. LEAD FORM / FOOTER CTA
   ----------------------------------------------------------------- */
.lead-section {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-charcoal);
  color: var(--color-text-on-dark);
}
.lead-section__media { position: relative; min-height: 280px; }
.lead-section__media img { width: 100%; height: 100%; object-fit: cover; }
.lead-section__media--book {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-md);
  background:
    radial-gradient(ellipse at center, rgba(200, 171, 114, 0.18), transparent 68%),
    var(--color-charcoal);
}
.lead-section__media--book .book { width: min(240px, 70%); }
.lead-section__media--book .book img {
  width: 100%;
  height: auto;
  object-fit: contain;
  box-shadow:
    -8px 0 0 #120e0a,
    0 22px 40px rgba(0, 0, 0, 0.45);
}

.lead-section__content {
  padding: var(--space-2xl) var(--space-md);
}
.lead-section h2 { color: var(--color-text-on-dark); }
.lead-section__content p {
  color: var(--color-text-on-dark-muted);
  max-width: 52ch;
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xl);
}

.lead-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  max-width: 640px;
}
/* min-width: 0 so a 1fr track can shrink past the row's min-content. Without it
   the inputs' intrinsic width (size/cols defaults) floors each track at ~257px,
   and in the narrow hero card the two columns overflow their container. */
.lead-form__row { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; }
.lead-form__row--full { grid-column: 1 / -1; }

.lead-form label {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-on-dark-muted);
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  /* fill the row rather than carrying their own intrinsic width */
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text-on-dark);
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-w) solid var(--color-hairline-on-dark);
  border-radius: var(--radius);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color var(--dur-fast) var(--ease-editorial), background var(--dur-fast) var(--ease-editorial);
}
.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--color-text-on-dark-muted); }
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none;
  border-color: var(--color-clay);
  background: rgba(255, 255, 255, 0.1);
}
.lead-form textarea { resize: vertical; min-height: 100px; }

.lead-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d1dae5' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-lg);
}
/* The native option list renders on the OS/browser popup (usually white), so
   the light text inherited from the dark field is unreadable there. Force a
   dark-on-light scheme for the options; the placeholder stays muted. */
.lead-form select option {
  color: var(--color-charcoal);
  background-color: #ffffff;
}
.lead-form select option[disabled] { color: var(--color-text-muted); }

.lead-form__note {
  margin-top: var(--space-sm);
  font-size: var(--fs-small);
  color: var(--color-clay);
  min-height: 1.2em;
}

/* -----------------------------------------------------------------
   17. SITE FOOTER
   ----------------------------------------------------------------- */
.site-footer {
  background: var(--color-charcoal-soft);
  color: var(--color-text-on-dark-muted);
  padding: var(--space-xl) var(--space-md) var(--space-md);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-w) solid var(--color-hairline-on-dark);
}
.site-footer__brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-2xs);
}
.site-footer p { margin: 0 0 var(--space-3xs); font-size: var(--fs-small); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--fs-small); }
.site-footer nav a:hover { color: var(--color-text-on-dark); }
.site-footer__legal {
  max-width: var(--content-max);
  margin: var(--space-md) auto 0;
  font-size: 0.8rem;
}

/* -----------------------------------------------------------------
   18. MEDIA QUERIES (mobile-first progressive enhancement)
   ----------------------------------------------------------------- */

/* Tablet / small desktop */
@media (min-width: 768px) {
  .hero__content { padding: var(--space-xl) var(--space-md) var(--space-2xl); }
  /* Capped so the eyebrow sets as two lines instead of one long run across
     the hero. In em, so it tracks the font size. Measured: every page's
     eyebrow breaks to exactly two lines anywhere from 40em to ~59em, so 48em
     sits mid-range and small copy edits will not tip it to one or three. */
  .hero__content .eyebrow {
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.16em;
    margin-bottom: var(--space-md);
    max-width: 48em;
  }
  .hero__content .subhead { font-size: var(--fs-body-lg); margin-top: var(--space-md); }

  .hero-cta { flex-direction: row; gap: var(--space-sm); margin-top: var(--space-lg); }
  .hero-cta a { width: auto; }

  .why-us-grid { grid-template-columns: repeat(2, 1fr); }

  /* Explicit row heights take over from the mobile aspect-ratio sizing */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 250px;
  }
  .project-tile,
  .project-tile--tall { aspect-ratio: auto; height: 100%; }

  .areas-grid { grid-template-columns: repeat(2, 1fr); }

  .lead-form { grid-template-columns: 1fr 1fr; }

  .site-footer__inner { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

/* Desktop: asymmetric 4-cell bento — exactly 4 projects, no empty cells.
   Placement is by position so the other landing pages reuse it as-is. */
@media (min-width: 900px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
  }
  .projects-grid > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .projects-grid > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .projects-grid > :nth-child(3) { grid-column: 3; grid-row: 1; }
  .projects-grid > :nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
}

/* Desktop */
/* Phone + CTA pair appears well before the link list does, so the number stays
   visible on tablets while the hamburger still carries the links. */
@media (max-width: 759px) {
  .site-nav__inner {
    gap: 0.625rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  /* Bigger bars plus a MENU label. The whole control is one tap target. */
  .site-nav__toggle {
    width: auto;
    min-width: 44px;
    min-height: 44px;
    height: auto;
    gap: 3px;
  }
  .site-nav__toggle-icon {
    width: 32px;
    height: 21px;
    gap: 6px;
  }
  .site-nav__toggle-icon span { height: 3px; }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] .site-nav__toggle-icon span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  .site-nav__toggle-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    color: currentColor;
  }
}

@media (min-width: 760px) {
  .site-nav__actions { display: flex; }
  .site-nav__call { display: none; }
}

@media (min-width: 1024px) {
  .sticky-cta p { display: block; }

  .section--split {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-2xl);
  }

  .lead-section { grid-template-columns: 0.85fr 1.15fr; }
  .lead-section__media { min-height: 100%; }

  .hero__content h1 { max-width: 24ch; }
  .hero__content .subhead { max-width: 50ch; }
}

@media (min-width: 1200px) {
  .hero__form-card .lead-form { grid-template-columns: 1fr 1fr; }
}

/* Large desktop */
@media (min-width: 1400px) {
  .projects-grid { grid-auto-rows: 310px; }
}

/* Measured: logo + Services + Service Areas + three links + the button pair
   need about 1240px, so the link list waits until 1280 rather than wrapping. */
@media (min-width: 1280px) {
  .site-nav__toggle { display: none; }
  .site-nav__links { display: flex; gap: var(--space-sm); }
  .site-nav__mobile { display: none; }
}

/* -----------------------------------------------------------------
   19. FULL WEBSITE — pages beyond the ad landing pages
   ----------------------------------------------------------------- */
.site-nav__links a[aria-current="page"] { color: var(--color-clay-text); }

/* Services dropdown. Desktop opens on hover and on keyboard focus.
   The panel is taken out of flow so it cannot grow the sticky bar. */
.nav-dropdown { position: relative; flex-shrink: 0; }
.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown__toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle[aria-current="true"],
.nav-dropdown.is-open .nav-dropdown__toggle { color: var(--color-clay-text); }
.nav-dropdown__panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 0;
  z-index: 30;
  min-width: 16.5rem;
  padding: 0.35rem 0;
  background: rgba(255, 255, 255, 0.98);
  border: var(--border-w) solid var(--color-hairline);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.nav-dropdown__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.85rem;
  height: 0.85rem;
}
.nav-dropdown__panel a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible,
.nav-dropdown__panel a[aria-current="page"] { color: var(--color-clay-text); }

@media (min-width: 1280px) {
  .site-nav__links .nav-dropdown:hover .nav-dropdown__panel,
  .site-nav__links .nav-dropdown:focus-within .nav-dropdown__panel,
  .site-nav__links .nav-dropdown.is-open .nav-dropdown__panel { display: block; }
}

.site-nav__mobile .nav-dropdown { display: block; }
.site-nav__mobile .nav-dropdown__toggle {
  font-size: var(--fs-body-lg);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-text);
  padding: var(--space-2xs) 0;
}
.site-nav__mobile .nav-dropdown__panel {
  position: static;
  min-width: 0;
  padding: 0 0 0 var(--space-sm);
  border: none;
  box-shadow: none;
  background: transparent;
}
.site-nav__mobile .nav-dropdown__panel::before { display: none; }
.site-nav__mobile .nav-dropdown.is-open .nav-dropdown__panel {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.site-nav__mobile .nav-dropdown__panel a {
  font-size: var(--fs-body);
  font-weight: 500;
  padding: var(--space-2xs) 0;
}

.site-nav__mobile.is-open {
  max-height: min(92vh, 900px);
  overflow: auto;
}

a.city-link {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}
.site-footer a.city-link:hover,
.hero a.city-link:hover { color: var(--color-text-on-dark); }

.hero--area .hero__content h1 { max-width: 28ch; }

.hero--page { min-height: 52vh; }
.hero--page .hero__content h1 { max-width: 18ch; }

/* The crew photo is 4:3 and the people stand in the upper two thirds.
   Other heroes stay anchored to the bottom (sky above the house). This one
   starts at the top, and on a wide screen it grows with the width so the
   crop still includes faces and bodies, not just the floor. */
.hero--team .hero__image { object-position: center top; }
@media (min-width: 1100px) {
  .hero--team { min-height: min(50vw, 85vh); }
}

/* Phones only. The photograph stays full-screen. Copy stays at the top
   (same 40px inset as before). The button group drops to the bottom of
   the hero, about 40px above the edge, with the photo between them.
   A short screen grows the hero instead of letting the buttons cover
   the copy. Tablet and desktop stay bottom-anchored. */
@media (max-width: 767px) {
  .hero,
  .hero--page {
    min-height: calc(100svh - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
  }
  .hero__content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    /* Top inset is unchanged. Bottom inset is the offset under the buttons. */
    padding: 2.5rem var(--space-md) 2.5rem;
  }
  .hero__content .hero-cta {
    margin-top: auto;
    /* When there is no spare height, this keeps the buttons off the paragraph. */
    padding-top: var(--space-md);
  }
  .hero__scrim {
    background: linear-gradient(
      180deg,
      rgba(7, 6, 20, 0.88) 0%,
      rgba(7, 6, 20, 0.70) 30%,
      rgba(7, 6, 20, 0.12) 50%,
      rgba(7, 6, 20, 0.38) 72%,
      rgba(7, 6, 20, 0.58) 86%,
      rgba(7, 6, 20, 0.62) 100%
    );
  }
  /* Homepage: the first section's 7.5rem top padding, plus the pull
     quote's own top margin, was the white band under the hero. The
     sticky call bar is position:fixed and does not add to it. */
  .hero + .section:has(> .pull-line:first-child) { padding-top: 2.5rem; }
  .hero + .section > .pull-line:first-child { margin-top: 0; }
}

.page-intro { color: var(--color-text-muted); max-width: 62ch; }

.prose { max-width: 68ch; }
.prose p,
.prose li { color: var(--color-text-muted); }
.prose h2 { margin: var(--space-xl) 0 var(--space-sm); }
.prose h3 { margin: var(--space-lg) 0 var(--space-xs); }
.prose ul,
.prose ol { margin: 0 0 var(--space-sm); padding-left: 1.2rem; }
.prose li { margin-bottom: var(--space-2xs); }
.prose a { color: var(--color-clay-text); text-decoration: underline; text-underline-offset: 0.15em; }
.prose blockquote {
  margin: var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-clay);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--color-charcoal);
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.service-grid,
.team-grid,
.card-grid,
.price-grid,
.stat-row {
  display: grid;
  gap: var(--space-md);
}
.service-card,
.info-card,
.price-card,
.stat-card {
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-hairline);
  border-radius: var(--radius);
  padding: var(--space-md);
}
.service-card img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: var(--space-sm);
}
.service-card h3,
.info-card h3,
.price-card h3 { margin-bottom: var(--space-2xs); }
.service-card p,
.info-card p,
.price-card p { color: var(--color-text-muted); }
.service-card__more {
  display: inline-block;
  margin-top: var(--space-sm);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-clay-text);
}
.price-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-charcoal);
  margin-top: var(--space-2xs);
}
.stat-card span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-charcoal);
}
.stat-card small {
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
}

.team-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
}
.team-card h3 { margin-bottom: var(--space-3xs); }
.team-card p { color: var(--color-text-muted); margin: 0; font-size: var(--fs-small); }

.portrait-row {
  display: grid;
  gap: var(--space-sm);
}
.portrait-row img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.gallery-item {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
}
.gallery-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-editorial);
}
.gallery-item:hover img { transform: scale(1.03); }

.project-tile--link { cursor: pointer; }

/* GoHighLevel sets an inline pixel height via form_embed.js. The custom
   property is the fallback when that script cannot resize: tall enough to
   show Submit, and replaced once the script writes its own height.
   min-height only stops the 150px browser default during the first paint. */
.form-embed iframe {
  display: block;
  width: 100%;
  height: var(--form-fallback, 36rem);
  min-height: 16rem;
  border: 0;
  overflow: hidden;
  background: #fff;
  border-radius: var(--radius);
}
.form-embed--guide { --form-fallback: 32rem; }
.form-embed--contact { --form-fallback: 80rem; }
.form-embed--referral { --form-fallback: 150rem; }
.lead-section .form-embed iframe { background: transparent; }

/* Guide headline and the short form share one row, top-aligned, so the
   form card is only as tall as the fields. */
#guide .two-col,
.guide-split { align-items: start; }

.site-footer__cols {
  display: grid;
  gap: var(--space-lg);
}
.site-footer h2 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  margin-bottom: var(--space-sm);
}
.site-footer a { color: var(--color-text-on-dark-muted); }
.site-footer a:hover { color: var(--color-text-on-dark); }
.site-footer nav { flex-direction: column; gap: var(--space-2xs); align-items: flex-start; }
.site-footer__logo { height: 48px; width: auto; margin-bottom: var(--space-sm); }

.embed-frame {
  width: 100%;
  min-height: 70vh;
  border: 0;
  background: #fff;
  border-radius: var(--radius);
}
.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.check-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.check-list li {
  padding-left: 1.2rem;
  position: relative;
  color: var(--color-text-muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--color-clay);
}

.two-col {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 700px) {
  .service-grid,
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-row { grid-template-columns: repeat(4, 1fr); }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .portrait-row { grid-template-columns: 1fr 1fr; }
  .site-footer__cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .two-col { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
  .price-grid { grid-template-columns: repeat(5, 1fr); }
}

/* -----------------------------------------------------------------
   20. V2 (Oct 2026 change brief)
   ----------------------------------------------------------------- */

/* Header: every top-level item (links and the dropdown toggle) shares one
   class, so font, size, weight, color and spacing always match. */
.site-nav__links .nav-item {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: var(--color-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav__links .nav-item:hover,
.site-nav__links .nav-item[aria-current="page"],
.site-nav__links .nav-item[aria-current="true"],
.site-nav__links .nav-dropdown.is-open .nav-item { color: var(--color-clay-text); }
.site-nav__links .nav-subitem { font-family: var(--font-body); }
.site-nav__mobile .nav-item {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--color-text);
  padding: var(--space-2xs) 0;
}
.site-nav__mobile .nav-subitem { font-family: var(--font-body); color: var(--color-text-muted); }

/* Mobile sticky bar: Call + Start Your Journey side by side. */
.sticky-cta__actions { display: flex; gap: var(--space-2xs); align-items: center; }
.btn--sticky-call {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: rgba(255, 255, 255, 0.5);
  padding: var(--space-2xs) var(--space-sm);
}
.btn--sticky-call:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-text-on-dark); }
@media (max-width: 1023px) {
  .sticky-cta { padding: var(--space-xs) var(--space-sm); }
  .sticky-cta__actions { flex: 1; }
  .sticky-cta__actions .btn { flex: 1; justify-content: center; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Placeholder photos. One rule: a tiny low-contrast "PH" tag in the corner of
   any element with data-placeholder-photo (the attribute value says what the
   final photo should be). Delete this rule, or the attributes, to turn it off. */
[data-placeholder-photo]::before {
  content: "PH";
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  font: 600 9px/1 var(--font-body);
  letter-spacing: 0.08em;
  padding: 3px 4px;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.35);
  border-radius: 2px;
  pointer-events: none;
}
.gallery-grid,
.team-card__photo { position: relative; }

/* Project tile counts (the bento above is built for exactly four). */
@media (min-width: 700px) {
  .projects-grid.projects-grid--two { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 320px; }
  .projects-grid.projects-grid--three { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 320px; }
  .projects-grid.projects-grid--one { grid-template-columns: 1fr; grid-auto-rows: 420px; max-width: 900px; }
  .projects-grid.projects-grid--one > *,
  .projects-grid.projects-grid--two > *,
  .projects-grid.projects-grid--three > * { grid-column: auto; grid-row: auto; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .projects-grid.projects-grid--three { grid-template-columns: 1fr; }
}

.service-grid.service-grid--three { grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .service-grid.service-grid--three { grid-template-columns: repeat(3, 1fr); }
}

/* "Where we build" town links */
.town-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-top: var(--space-md);
  padding: 0;
  list-style: none;
}
.town-links li {
  border: var(--border-w) solid var(--color-hairline);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.town-links a { color: var(--color-clay-text); text-decoration: none; }
.town-links a:hover { text-decoration: underline; }

.google-badge { margin-top: var(--space-md); font-weight: 600; font-size: var(--fs-small); }
.google-badge a { color: var(--color-text); text-decoration: none; }
.google-badge a:hover { text-decoration: underline; }
.google-badge__stars { color: var(--color-clay); letter-spacing: 0.1em; margin-right: 0.35rem; }

.hero__guide-link { margin-top: var(--space-sm); margin-bottom: 0; font-size: var(--fs-small); font-weight: 600; }
.hero__guide-link a { color: var(--color-text-on-dark); text-decoration: underline; text-underline-offset: 3px; }

.lead-section__content .lead-section__note { margin-top: var(--space-md); margin-bottom: var(--space-sm); font-size: var(--fs-small); }
.form-note { margin-top: var(--space-xs); font-size: var(--fs-small); color: var(--color-text-muted); }
.check-list--muted li::before { background: var(--color-hairline); }

/* About: leadership row with placeholder headshots */
.team-subhead { margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.team-card__photo {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  background: linear-gradient(135deg, var(--color-bg-sand), #eef2f6);
}
@media (min-width: 700px) {
  .team-grid.team-grid--leadership { grid-template-columns: repeat(3, 1fr); max-width: 960px; }
}
.journey-layout h3 { margin-top: var(--space-sm); margin-bottom: 0.15rem; font-size: 1rem; }
.journey-layout p { margin-bottom: 0; }
.lightbox__img { height: auto; }
/* Mobile: the Homes group starts open; keep its label the same color as the other items. */
.site-nav__mobile .nav-dropdown.is-open .nav-item { color: var(--color-text); }
.site-nav__mobile .btn { padding: var(--space-2xs) var(--space-sm); font-size: var(--fs-small); }
/* Tinted sections center each direct child at --content-max; keep prose
   left-aligned with the heading and limit the line length inside it. */
.section--tinted > .prose { max-width: var(--content-max); }
.section--tinted > .prose > * { max-width: 68ch; }

/* Nick Oct 6: town pills on tinted sections match the Custom Homes page */
.section--tinted > .town-links { padding-left: var(--space-md); padding-right: var(--space-md); }
.section--tinted .town-links li { background: var(--color-bg, #fff); border-color: var(--color-hairline); }
.section--tinted > .town-links + .page-intro { max-width: var(--content-max); }

/* v3: Juan's native contact form (ported from main) */
/* Contact page: the same lead form on a light section */
.lead-form--light { grid-template-columns: 1fr 1fr; margin-top: var(--space-sm); }
.lead-form--light label,
.lead-form--light legend { color: var(--color-text); }
.lead-form--light input,
.lead-form--light textarea {
  color: var(--color-text);
  background: #fff;
  border-color: var(--color-hairline);
}
.lead-form--light input:focus,
.lead-form--light textarea:focus { background: #fff; border-color: var(--color-clay-text); }
.lead-form--light .lead-form__note { color: var(--color-clay-text); }
.lead-form__checks { border: 0; padding: 0; margin: 0; gap: var(--space-2xs); }
.lead-form__checks legend {
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2xs);
}
.lead-form .lead-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-weight: 400;
  letter-spacing: 0;
  color: inherit;
}
.lead-form .lead-form__check input { width: auto; flex: none; margin-top: 0.3em; accent-color: var(--color-clay-dark); }
.lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 600px) { .lead-form--light { grid-template-columns: 1fr; } }

.lead-form__checks legend { color: inherit; }
.lead-section .lead-form__checks legend, .lead-section .lead-form .lead-form__check { color: var(--color-text-on-dark); }
.lead-form button[type="submit"] { justify-self: start; }
/* v3: keep the Hilltop sunset horizon in frame on the short page hero and the tile */
img[src$="process-break-patio.webp"] { object-position: 50% 30%; }