/* ============================================================
   NATURE'S CALL — HOMEPAGE STYLES
   Depends on tokens.css (must be loaded before this file).
   ============================================================ */

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

html { scroll-behavior: smooth; }

/* Skip-to-content link — first focusable element on the page. Off-screen
   until focused, then slides into the top-left so keyboard/screen-reader
   users can bypass the nav (WCAG 2.4.1 Bypass Blocks). */
.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
  transform: translateY(-120%);
  background: var(--nc-deep-slate);
  color: var(--nc-text-inverse);
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  padding: .75rem 1.25rem;
  text-decoration: none;
  border-bottom-right-radius: 4px;
  transition: transform var(--nc-duration-base) var(--nc-ease);
}
.skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--nc-gold-light);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion: neutralize scroll-reveal, smooth-scroll,
   and long transitions/animations for users who ask for less motion
   (vestibular sensitivity). Video autoplay is paused in base.njk JS. */
@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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}
body {
  font-family: var(--nc-font-body);
  background: var(--nc-off-white);
  color: var(--nc-text-primary);
  font-weight: var(--nc-weight-light);
  overflow-x: hidden;
}

/* ── SECTION LABEL SYSTEM ── */
.section-label {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(45,122,58,0.92);
  color: var(--nc-text-inverse);
  font-family: var(--nc-font-body);
  font-size: 10px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--nc-radius-sm);
  z-index: 50;
}

/* ── CONTAINER ── */
.container {
  width: 100%;
  max-width: var(--nc-container-max);
  margin-inline: auto;
  padding-inline: var(--nc-container-pad);
}

/* ── EYEBROW ──
   Default is the dark gold so eyebrows on light/linen backgrounds pass
   WCAG AA contrast (4.5:1) by default. Dark-bg sections override to
   --nc-gold-light. The mid-tone --nc-text-gold (#C8A45A) doesn't have
   enough contrast on either light or dark, so we don't use it for text. */
.eyebrow {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  display: block;
  margin-bottom: .75rem;
}

/* ── GOLD LINE ── */
.gold-line {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--nc-gold);
  margin-bottom: 1.25rem;
}

/* ═══════════════════════════════
   1. NAV
═══════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--nc-z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.5rem, 5vw, 4rem);
  background: transparent;
  transition: background var(--nc-duration-slow) var(--nc-ease),
              padding var(--nc-duration-slow) var(--nc-ease);
}
/* Top-of-page scrim: a soft dark gradient behind the nav so the
   white logo and links stay legible over photo heroes. Fades down
   so the photo still reads as edge-to-edge. Hidden once the nav
   gains its solid background on scroll. */
nav::before {
  content: '';
  position: absolute;
  inset: -1rem 0 -3rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--nc-duration-slow) var(--nc-ease);
}
nav.scrolled::before { opacity: 0; }
nav.scrolled {
  background: rgba(26,26,22,.95);
  backdrop-filter: blur(12px);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.nav-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--nc-text-inverse);
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: text-shadow var(--nc-duration-base) var(--nc-ease);
}
nav.scrolled .nav-logo { text-shadow: none; }
.footer-brand .nav-logo { align-items: flex-start; }
.nav-logo-img {
  display: block;
  height: 56px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
  transition: height var(--nc-duration-slow) var(--nc-ease),
              filter var(--nc-duration-base) var(--nc-ease);
}
nav.scrolled .nav-logo-img { height: 44px; filter: none; }
.nav-logo-tagline {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--nc-gold-light);
  white-space: nowrap;
  transition: font-size var(--nc-duration-slow) var(--nc-ease),
              color var(--nc-duration-base) var(--nc-ease);
}
nav.scrolled .nav-logo-tagline { font-size: 10px; }
.footer-brand .nav-logo-img { height: 72px; }
.footer-brand .nav-logo-tagline {
  font-size: 12px;
  color: var(--nc-gold-light);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
/* Right-side nav cluster. Desktop: inline flex row with menu links,
   phone number, and Contact CTA. Mobile (max-width: 1064px): this whole
   block transforms into the hamburger dropdown panel. The dropdown role
   used to live on .nav-links; consolidating it on .nav-right lets the
   phone + Contact CTA also drop into the mobile menu. */
.nav-right {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
}
.nav-links a {
  font-family: var(--nc-font-body);
  font-size: 13px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-text-inverse);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  transition: color var(--nc-duration-base) var(--nc-ease),
              text-shadow var(--nc-duration-base) var(--nc-ease);
}
.nav-links a:hover { color: var(--nc-gold-light); }
nav.scrolled .nav-links a { text-shadow: none; }

/* Services dropdown (desktop) — CSS-only hover/focus reveal. The parent
   "Services" link stays clickable to the /services/ hub; the submenu gives
   one-click access to each service page from anywhere (UX + sitewide internal
   links to the money pages for SEO). Mobile is overridden in the ≤1064px block
   to render the submenu always-expanded inside the hamburger panel. */
.nav-has-submenu { position: relative; }
.nav-has-submenu > a::after {
  content: "";
  display: inline-block;
  margin-left: .45em;
  width: .38em; height: .38em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .65;
  transition: transform var(--nc-duration-base) var(--nc-ease), opacity var(--nc-duration-base) var(--nc-ease);
}
.nav-has-submenu:hover > a::after,
.nav-has-submenu:focus-within > a::after { transform: rotate(-135deg) translateY(0); opacity: 1; }
.nav-submenu {
  list-style: none;
  margin: 0;
  padding: .4rem 0;
  position: absolute;
  top: 100%;
  left: -.5rem;
  min-width: 230px;
  background: rgba(26,26,22,.97);
  backdrop-filter: blur(12px);
  border: .5px solid var(--nc-border-dark);
  border-radius: var(--nc-radius-sm);
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--nc-duration-base) var(--nc-ease),
              transform var(--nc-duration-base) var(--nc-ease),
              visibility 0s linear var(--nc-duration-base);
  z-index: 200;
}
.nav-has-submenu:hover .nav-submenu,
.nav-has-submenu:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--nc-duration-base) var(--nc-ease),
              transform var(--nc-duration-base) var(--nc-ease),
              visibility 0s;
}
.nav-submenu li { width: 100%; }
.nav-submenu a {
  display: block;
  padding: .6rem 1.3rem;
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: rgba(250,250,247,.82);
  text-shadow: none;
}
.nav-submenu a:hover { color: var(--nc-gold-light); }

/* Phone number in the nav (desktop). Same color + over-photo shadow
   treatment as nav links, but kept as readable digits — phone numbers
   are not uppercase. */
/* Phone number — utility action, same lower-contrast register as Pay Invoice
   but kept at a slightly larger 12px (digits aren't uppercase, so they need
   a touch more room than the 11px Pay Invoice label to read cleanly). */
.nav-phone {
  font-family: var(--nc-font-body);
  font-size: 12px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .02em;
  color: rgba(250,250,247,.7);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  white-space: nowrap;
  transition: color var(--nc-duration-base) var(--nc-ease),
              text-shadow var(--nc-duration-base) var(--nc-ease);
}
.nav-phone:hover { color: var(--nc-gold-light); }
nav.scrolled .nav-phone { text-shadow: none; }

/* Pay Invoice — utility link, visually subordinate to the main nav links.
   Same family as .nav-links a but a step smaller (11px vs 13px) and lower
   contrast, so it reads as a secondary destination rather than peer content. */
.nav-pay {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,250,247,.7);
  text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,.35);
  white-space: nowrap;
  transition: color var(--nc-duration-base) var(--nc-ease),
              text-shadow var(--nc-duration-base) var(--nc-ease);
}
.nav-pay:hover { color: var(--nc-gold-light); }
nav.scrolled .nav-pay { text-shadow: none; }

/* Contact CTA — small green pill in the .btn-primary family at a
   tighter scale so it sits inline with the nav links without dominating.
   Always visible; reads as the conversion endpoint on every page. */
.nav-cta {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-text-inverse);
  background: var(--nc-green);
  border: none;
  padding: .55rem 1.25rem;
  border-radius: var(--nc-radius-sm);
  text-decoration: none;
  transition: background var(--nc-duration-base) var(--nc-ease);
  display: inline-block;
  line-height: 1.4;
}
.nav-cta:hover { background: var(--nc-green-hover); }

/* Mobile-only tap-to-call icon. Hidden on desktop where .nav-phone
   text covers the same job. Shown on mobile in the left 44px grid slot. */
.nav-phone-mobile { display: none; }

/* Hamburger toggle — hidden on desktop, shown on mobile */
.nav-menu-toggle {
  display: none;
  background: transparent;
  border: .5px solid rgba(250,250,247,.35);
  border-radius: var(--nc-radius-sm);
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--nc-duration-base) var(--nc-ease);
}
.nav-menu-toggle:hover { border-color: rgba(250,250,247,.7); }
.nav-menu-bars,
.nav-menu-bars::before,
.nav-menu-bars::after {
  display: block;
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: var(--nc-text-inverse);
  left: 50%;
  transition: transform var(--nc-duration-base) var(--nc-ease),
              top var(--nc-duration-base) var(--nc-ease),
              background var(--nc-duration-base) var(--nc-ease);
}
.nav-menu-bars {
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-menu-bars::before { content: ''; top: -6px; transform: translateX(-50%); }
.nav-menu-bars::after  { content: ''; top:  6px; transform: translateX(-50%); }
nav.menu-open .nav-menu-bars { background: transparent; }
nav.menu-open .nav-menu-bars::before { top: 0; transform: translateX(-50%) rotate(45deg); }
nav.menu-open .nav-menu-bars::after  { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* ═══════════════════════════════
   2. HERO
═══════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh; /* respects mobile browser chrome; 100vh is the fallback */
  min-height: 680px;
  background: var(--nc-deep-slate);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(26,26,22,.5) 0%,
      rgba(26,26,22,.2) 80px,
      transparent 160px
    ),
    linear-gradient(
      to top,
      rgba(26,26,22,.55) 0%,
      rgba(26,26,22,.2) 28%,
      transparent 55%
    );
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 3;
  padding: 0 clamp(1.5rem, 5vw, 4rem) 9rem;
  max-width: 900px;
}
.hero-headline {
  font-family: var(--nc-font-display);
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--nc-text-inverse);
  margin-bottom: 1.5rem;
}
.hero-headline em {
  font-style: italic;
  color: var(--nc-gold-light);
}
.hero-sub {
  display: none; /* Off by default — mobile homepage opts back in via @media. */
  font-family: var(--nc-font-body);
  font-size: 1.1875rem;
  font-weight: var(--nc-weight-regular);
  color: rgba(250,250,247,.88);
  max-width: 700px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}
.hero-btns {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-primary {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-text-inverse);
  background: var(--nc-green);
  border: none;
  padding: .85rem 2rem;
  border-radius: var(--nc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--nc-duration-base) var(--nc-ease);
  display: inline-block;
}
.btn-primary:hover { background: var(--nc-green-hover); }
.btn-primary--slate { background: var(--nc-deep-slate); }
.btn-primary--slate:hover { background: var(--nc-charcoal); }
/* Mobile-only homepage CTA — hidden on desktop (where .hero-btns provides
   the two-button row); shown only inside the mobile linen brand band. */
.btn-primary.hero-cta-mobile { display: none; }
.btn-ghost {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(250,250,247,.8);
  background: transparent;
  border: .5px solid rgba(250,250,247,.35);
  padding: .85rem 2rem;
  border-radius: var(--nc-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--nc-duration-base) var(--nc-ease),
              color var(--nc-duration-base) var(--nc-ease);
  display: inline-block;
}
.btn-ghost:hover {
  border-color: rgba(250,250,247,.7);
  color: var(--nc-text-inverse);
}

/* Cinema variant — hero shape matches the source video's aspect ratio so the
   frame plays uncropped at every viewport. No dark overlay; the video is shown
   as captured. Used on /services/ and /our-work/. */
.hero--cinema {
  height: 100dvh;
  min-height: 680px;
}
/* Cinema variant uses a soft bottom-only scrim instead of the full top+bottom
   .hero-overlay gradient — just enough darkness behind the headline and
   buttons to keep them legible without darkening the video frame above. */
.hero--cinema .hero-overlay {
  background: linear-gradient(
    to top,
    rgba(26, 26, 22, .58) 0%,
    rgba(26, 26, 22, .28) 30%,
    transparent 60%
  );
}
.hero--cinema .hero-headline {
  font-size: clamp(2.25rem, 4.2vw, 3.5rem);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.hero--cinema .hero-content {
  padding-bottom: 3.5rem;
}
.hero--cinema .btn-ghost {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* Image-as-cinema variant — used on /about. Lets a still image ride the
   same .hero--video.hero--cinema chassis as the /services and /our-work
   videos so all three pages match height on desktop and mobile. The
   bottom-cropped modifier biases the cover crop to the lower half of the
   photo so foreground hardscape/plantings stay in frame instead of sky. */
.hero-media picture,
.hero-media picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero--bottom-cropped .hero-media picture img {
  object-position: center bottom;
}
/* Image cinema hero (/about): the truck still is already a tight frame, so
   side-cropping it reads as "zoomed in." Cap the hero height at the image's
   own 16:9 ratio (56.25vw) so the full frame always shows: identical to
   100dvh on 16:9 screens, shorter (never side-cropped) on 16:10/narrower
   windows. Video cinema heroes keep the plain 100dvh crop-to-fill. Mobile
   (<=768px) rules below override this with the stacked 16:9 pattern. */
@media (min-width: 769px) {
  .hero--cinema.hero--cinema-img {
    height: min(100dvh, 56.25vw);
    min-height: 0;
  }
}
.hero--bottom-cropped .eyebrow { color: var(--nc-gold-light); }
.hero--bottom-cropped .gold-line { background: var(--nc-gold-light); }

/* Trust strip */
.hero-trust {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 3;
  border-top: .5px solid var(--nc-border-dark);
  background: rgba(26,26,22,.72);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom); /* clears home indicator on iOS */
}
.trust-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  border-right: .5px solid var(--nc-border-dark);
  border-top: 1px solid rgba(200,164,90,.25);
}
.trust-item:last-child { border-right: none; }
.trust-num {
  font-family: var(--nc-font-display);
  font-size: clamp(2.35rem, 3.2vw, 2.85rem);
  font-weight: var(--nc-weight-light);
  color: var(--nc-gold-light);
  line-height: 1;
}
.trust-lbl {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .14em;
  text-transform: uppercase;
  /* Solid muted color — semi-transparent white over a translucent backdrop
     trips axe-core because it can't reliably resolve the effective ratio. */
  color: var(--nc-stone-light);
  margin-top: .4rem;
}

/* Logo variant of the trust strip — 4 recognition badges in place of
   numeric stats. Same chrome (translucent dark band, gold hairline top)
   but no internal dividers between cells, since 4 logos plus dividers
   reads as crowded press-strip. Whitespace does the spacing work. */
.hero-trust--logos .trust-item {
  border-right: none;
  padding: 1.4rem 1rem;
}
.trust-logo-img {
  display: block;
  height: 72px;
  width: auto;
  max-width: 100%;
}
/* Linked trust logos (currently just Google → GBP reviews). Subtle
   opacity bump on hover signals interactivity without breaking the
   visual unity of the strip. Keyboard focus gets a gold outline. */
.trust-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--nc-duration-base) var(--nc-ease);
}
.trust-logo-link:hover,
.trust-logo-link:focus-visible { opacity: .72; }
.trust-logo-link:focus-visible {
  outline: 2px solid var(--nc-gold-light);
  outline-offset: 4px;
}

/* Homepage hero (.hero--video without .hero--cinema) — desktop layout.
   Stacked pattern: full-width 16:9 video frame at the top, linen brand
   band beneath, trust strip immediately below. Section sizes to its
   content (no 100dvh constraint), so the trust strip lands right under
   the brand band — predictable and always reachable with a short scroll.
   The video plays uncropped (full 16:9 frame, no object-fit crop) so
   every part of each shot is visible. Reverted 2026-06-08 from the
   2026-06-03 crop-to-fill pattern per Kevin Cleaver — he found the
   desktop crop showed only a slice of each shot. Mobile keeps its
   existing rules in the max-width: 768px media query at the bottom of
   this file. */
@media (min-width: 769px) {
  .hero--video:not(.hero--cinema) {
    height: auto;
    min-height: 0;
    background: var(--nc-deep-slate);
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
  }
  .hero--video:not(.hero--cinema) .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 9;
    border-bottom: 2px solid var(--nc-gold-dark);
  }
  /* Top-only scrim so the transparent nav stays legible over the first
     ~120px of the video (matches the cinema-hero pattern on /services
     and /our-work). The brand panel sits in its own linen band below, so
     no bottom scrim is needed. */
  .hero--video:not(.hero--cinema) .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(26, 26, 22, .55) 0%,
      rgba(26, 26, 22, .2) 80px,
      transparent 160px
    );
  }
  .hero--video:not(.hero--cinema) .hero-content {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2.5rem clamp(1.5rem, 5vw, 4rem) 2.75rem;
    text-align: center;
    max-width: 100%;
    background: var(--nc-warm-linen);
  }
  .hero--video:not(.hero--cinema) .hero-content .eyebrow {
    display: block;
    color: var(--nc-gold-dark);
    margin-bottom: .75rem;
  }
  .hero--video:not(.hero--cinema) .hero-headline {
    font-size: clamp(2.25rem, 4.2vw, 3.5rem);
    color: var(--nc-text-primary);
    margin-bottom: 0;
  }
  .hero--video:not(.hero--cinema) .hero-headline em {
    color: var(--nc-gold-dark);
  }
  .hero--video:not(.hero--cinema) .hero-sub {
    display: block;
    font-size: 1.0625rem;
    font-weight: var(--nc-weight-light);
    color: var(--nc-text-secondary);
    line-height: 1.55;
    max-width: 38rem;
    margin: 1rem auto 0;
  }
  .hero--video:not(.hero--cinema) .hero-btns {
    margin-top: 1.5rem;
    justify-content: center;
  }
  /* Ghost button on linen needs dark border/text — the default
     white-on-transparent is invisible on a light background. */
  .hero--video:not(.hero--cinema) .hero-btns .btn-ghost {
    color: var(--nc-text-secondary);
    border-color: var(--nc-stone-light);
  }
  .hero--video:not(.hero--cinema) .hero-btns .btn-ghost:hover {
    color: var(--nc-text-primary);
    border-color: var(--nc-text-primary);
  }
  /* Trust strip on desktop — show the overlay variant inside the video
     frame (anchored at the bottom of .hero-media via the existing
     position:absolute on .hero-trust); hide the section-level variant
     used by mobile so it doesn't double-stack below the brand band. */
  .hero--video:not(.hero--cinema) .hero-trust--overlay { display: flex; }
  .hero--video:not(.hero--cinema) .hero-trust--section { display: none; }

  /* Compact trust strip when overlaid on the video frame — keeps the
     numbers prominent (no font-size change) and tightens vertical
     padding so the dark band hugs the text. */
  .hero-trust--overlay .trust-item { padding: .4rem 1.5rem; }
  .hero-trust--overlay .trust-num { font-size: clamp(1.75rem, 2.4vw, 2.15rem); }
  .hero-trust--overlay .trust-lbl { margin-top: .15rem; }
}

/* Default state for the two trust-strip variants on the homepage hero —
   show the section-level one (mobile pattern, sticks to viewport bottom)
   and hide the video overlay. Desktop @media above flips them.
   Specificity note: written as .hero-trust.hero-trust--overlay so the
   later mobile rule `.hero-trust { display: grid }` (max-width: 720px)
   doesn't unhide this variant — same-specificity, later-source-order
   would otherwise win. */
.hero-trust.hero-trust--overlay { display: none; }

/* ═══════════════════════════════
   3. SERVICES
═══════════════════════════════ */
.services {
  background: var(--nc-off-white);
  padding: 6rem 0;
  position: relative;
}
.section-header { margin-bottom: 3.5rem; }
.section-header--centered {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.section-header--centered .gold-line { margin-inline: auto; }
.section-heading {
  font-family: var(--nc-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--nc-text-primary);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--nc-linen-mid);
  border: 1px solid var(--nc-linen-mid);
  margin-top: 3rem;
}
.service-card {
  background: var(--nc-off-white);
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
  transition:
    background var(--nc-duration-base) var(--nc-ease),
    transform var(--nc-duration-slow) var(--nc-ease),
    box-shadow var(--nc-duration-slow) var(--nc-ease);
}
.service-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nc-warm-linen);
}
.service-card-media--portrait :is(picture, img) {
  object-position: center 60%;
}
.service-card-media--portrait-bottom :is(picture, img) {
  object-position: center bottom;
}
.service-card-media :is(picture, img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--nc-duration-slower) var(--nc-ease);
}
.service-card:hover .service-card-media img {
  transform: scale(1.04);
}
.service-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26, 26, 22, .10));
  pointer-events: none;
}
.service-card-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex: 1;
  position: relative;
}
.service-card-eyebrow {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone-dark);
}
.service-card-eyebrow--gold {
  color: var(--nc-gold-dark);
}
.service-card-name {
  font-family: var(--nc-font-display);
  font-size: 1.5rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--nc-text-primary);
  margin: 0;
}
.service-card-name em {
  font-style: italic;
  color: var(--nc-gold-dark);
}
.service-card-desc {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.6;
  color: var(--nc-text-secondary);
  margin: 0;
  flex: 1;
}
.service-card-link {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-green);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  transition: gap var(--nc-duration-base) var(--nc-ease);
}
.service-card:hover .service-card-link {
  gap: .75rem;
}
.service-card--featured {
  position: relative;
  background: linear-gradient(180deg, var(--nc-off-white) 0%, #FBF6EC 100%);
}
.service-card--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nc-gold-dark);
  z-index: 2;
}
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nc-green);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--nc-duration-slow) var(--nc-ease);
  z-index: 3;
}
.service-card:hover {
  background: #FBF8F1;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(26, 26, 22, .08);
}
.service-card:hover::after {
  transform: scaleX(1);
}
.services-footer {
  margin-top: 2.5rem;
  text-align: center;
}
.link-plain {
  font-family: var(--nc-font-body);
  font-size: 12px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nc-stone-dark);
  text-decoration: none;
  border-bottom: .5px solid var(--nc-stone-light);
  padding-bottom: 2px;
  transition: color var(--nc-duration-base) var(--nc-ease),
              border-color var(--nc-duration-base) var(--nc-ease);
}
.link-plain:hover {
  color: var(--nc-text-primary);
  border-color: var(--nc-text-primary);
}

/* ═══════════════════════════════
   4. FEATURED PROJECTS
═══════════════════════════════ */
.projects {
  background: var(--nc-deep-slate);
  padding: 6rem 0;
  position: relative;
}
.projects .section-heading { color: var(--nc-text-inverse); }
.projects-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 2rem;
  margin-top: 3rem;
}
/* Editorial card: image on top, caption below. No overlay or gradient
   on the image so the photo carries the card. Hover is restrained —
   subtle image scale, name shifts to gold. */
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.project-card.large {
  grid-row: span 2;
}
.project-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nc-charcoal-mid);
  border-radius: 2px;
}
.project-card.large .project-card__media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 100%;
}
.project-card__media picture,
.project-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--nc-duration-slower) var(--nc-ease);
}
.project-card:hover .project-card__media img {
  transform: scale(1.04);
}
.project-card__caption {
  padding: 1.25rem 0 0;
}
.project-name {
  display: block;
  font-family: var(--nc-font-display);
  font-size: 1.25rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1.25;
  margin: 0 0 .35rem;
  transition: color var(--nc-duration-base) var(--nc-ease);
}
.project-card.large .project-name {
  font-size: 1.625rem;
}
.project-location {
  display: block;
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-light);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250, 250, 247, .55);
}
.project-card:hover .project-name {
  color: var(--nc-gold-light);
}
@media (max-width: 720px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .project-card.large {
    grid-row: auto;
  }
  .project-card.large .project-card__media {
    aspect-ratio: 4 / 3;
    flex: initial;
    min-height: 0;
  }
}
.projects-footer {
  margin-top: 5rem;
  text-align: center;
}
.projects-footer .link-plain { color: var(--nc-stone); border-color: var(--nc-charcoal-light); }
.projects-footer .link-plain:hover { color: var(--nc-text-inverse); border-color: var(--nc-stone); }

/* ═══════════════════════════════
   5. ABOUT
═══════════════════════════════ */
.about {
  background: var(--nc-warm-linen);
  padding: 6rem 0;
  position: relative;
}
.about-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: 4.5rem;
  align-items: center;
}
.about-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.about-img {
  position: relative;
  aspect-ratio: 4/5;
  width: 100%;
  max-width: 420px;
  background: var(--nc-linen-mid);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Focus the crop on the lower-mid of the frame (the family) rather than the
     sky, so the shorter mobile 3/2 crop doesn't cut them off the bottom. */
  object-position: center 75%;
  display: block;
}
.about-copy-head h2 {
  font-family: var(--nc-font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--nc-text-primary);
  margin-bottom: 0;
}
.about-copy-head h2 em {
  font-style: italic;
  color: var(--nc-stone-dark);
}
.about-copy-body p {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.75;
  color: var(--nc-text-secondary);
  margin-bottom: 1rem;
}
.about-copy-body p:last-of-type { margin-bottom: 2rem; }

/* ═══════════════════════════════
   6. PROCESS
═══════════════════════════════ */
.process {
  background: var(--nc-off-white);
  padding: 6rem 0;
  position: relative;
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 3.5rem;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 2.2rem;
  left: 12.5%;
  right: 12.5%;
  height: .5px;
  background: var(--nc-gold);
  opacity: .4;
  z-index: 0;
}
.process-step {
  padding: 0 2rem;
  text-align: center;
  position: relative;
  z-index: 1;
}
.process-step:first-child { padding-left: 0; }
.process-step:last-child { padding-right: 0; }
.step-dot {
  width: 44px; height: 44px;
  border: .5px solid var(--nc-gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  background: var(--nc-off-white);
  font-family: var(--nc-font-display);
  font-size: 1.1rem;
  font-weight: var(--nc-weight-regular);
  color: var(--nc-gold);
}
.step-title {
  font-family: var(--nc-font-display);
  font-size: 1.35rem;
  font-weight: var(--nc-weight-regular);
  color: var(--nc-text-primary);
  margin-bottom: .75rem;
  line-height: 1.2;
}
.step-desc {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-muted);
  line-height: 1.65;
}

/* ═══════════════════════════════
   7. REVIEWS
═══════════════════════════════ */
.reviews {
  background: var(--nc-deep-slate);
  padding: 6rem 0;
  position: relative;
}
.reviews .section-heading { color: var(--nc-text-inverse); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--nc-charcoal-light);
  margin-top: 3rem;
}
.review-card {
  background: var(--nc-charcoal);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-stars {
  color: var(--nc-gold);
  font-size: 13px;
  letter-spacing: .1em;
}
.review-text {
  font-family: var(--nc-font-display);
  font-size: 1.05rem;
  font-weight: var(--nc-weight-light);
  font-style: italic;
  color: rgba(250,250,247,.85);
  line-height: 1.7;
  flex: 1;
}
.review-author {
  border-top: .5px solid var(--nc-charcoal-light);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.review-name {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-medium);
  color: var(--nc-text-inverse);
  letter-spacing: .04em;
}
.review-project {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-stone);
  letter-spacing: .04em;
}
.reviews-footer {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reviews-footer .link-plain { color: var(--nc-stone); border-color: var(--nc-charcoal-light); }
.reviews-footer .link-plain:hover { color: var(--nc-text-inverse); border-color: var(--nc-stone); }
.reviews-aggregate {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.agg-num {
  font-family: var(--nc-font-display);
  font-size: 2.5rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1;
}
.agg-detail {
  display: flex; flex-direction: column; gap: .2rem;
}
.agg-stars { color: var(--nc-gold); font-size: 14px; letter-spacing: .08em; }
.agg-count {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  color: var(--nc-stone);
  letter-spacing: .06em;
}

/* ═══════════════════════════════
   8. SERVICE AREA
═══════════════════════════════ */
.service-area {
  background: var(--nc-warm-linen);
  padding: 6rem 0;
}
.area-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5rem;
  align-items: start;
}
.area-copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.area-arealink {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .04em;
  color: var(--nc-gold-dark);
  text-decoration: none;
  white-space: nowrap;
}
/* Sits inline at the end of the town-tag row (after "Chadds Ford, PA"),
   wrapping with the tags rather than crowding the Start Your Project button. */
.area-tags .area-arealink { align-self: center; margin-left: .35rem; }
.area-arealink:hover { color: var(--nc-green); }
/* Map container — portrait card. Base map (geographic) and overlay
   (town markers) stack via absolute positioning; both share the same
   viewBox so coordinates align. */
.area-map {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 3/4;
  margin-inline: auto;
  position: relative;
}
.map-base,
.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-base { object-fit: contain; }
.map-overlay { pointer-events: none; }

/* Town hierarchy — three tiers via dot color, dot style, AND font.
   Sizes are in viewBox units (300×400); rendered scale is ~1.6×. */

/* PRIMARY — North Wilmington, Garnet Valley PA */
.map-overlay .map-town--primary circle { fill: var(--nc-green); }
.map-overlay .map-town--primary text {
  font-family: var(--nc-font-body);
  font-size: 8.5px;
  font-weight: var(--nc-weight-medium);
  fill: var(--nc-text-primary);
}

/* SECONDARY — Greenville, Centreville, Chadds Ford PA */
.map-overlay .map-town--secondary circle { fill: var(--nc-gold-dark); }
.map-overlay .map-town--secondary text {
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: 10px;
  font-weight: var(--nc-weight-regular);
  fill: var(--nc-text-primary);
}

/* TERTIARY — Hockessin, Pike Creek, Westover Hills */
.map-overlay .map-town--tertiary circle {
  fill: none;
  stroke: var(--nc-gold-dark);
  stroke-width: 0.6;
}
.map-overlay .map-town--tertiary text {
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: 8px;
  font-weight: var(--nc-weight-regular);
  fill: var(--nc-stone-dark);
}
.area-copy-head h2 {
  font-family: var(--nc-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--nc-text-primary);
  margin-bottom: 0;
}
.area-copy-head h2 em {
  font-style: italic;
  color: var(--nc-stone-dark);
}
.area-copy-body p {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.75;
  margin-bottom: 2rem;
}
.area-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.area-tag {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .06em;
  color: var(--nc-stone-dark);
  border: .5px solid var(--nc-linen-mid);
  padding: .5rem 1.05rem;
  border-radius: var(--nc-radius-sm);
  background: var(--nc-off-white);
}
.area-tag.primary {
  background: var(--nc-deep-slate);
  color: var(--nc-text-inverse);
  border-color: var(--nc-deep-slate);
}

/* ═══════════════════════════════
   9. CONTACT / CTA
═══════════════════════════════ */
.contact {
  background: var(--nc-off-white);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.contact-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  position: relative;
  z-index: 1;
}
.contact-copy h2 {
  font-family: var(--nc-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.15;
  color: var(--nc-text-primary);
  margin-bottom: 1.5rem;
}
.contact-copy p {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.75;
  margin-bottom: 2.5rem;
  max-width: 380px;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.contact-detail {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.contact-detail-icon {
  width: 32px; height: 32px;
  border: .5px solid var(--nc-linen-mid);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  color: var(--nc-gold-dark);
  border-radius: var(--nc-radius-sm);
  flex-shrink: 0;
}
.contact-detail-text {
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
}
.contact-form {
  background: var(--nc-off-white);
  padding: 2.75rem;
  border: .5px solid var(--nc-linen-mid);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(26,26,22,.05), 0 30px 60px -28px rgba(26,26,22,.28);
}
/* In-card header — eyebrow + Cormorant title + sub, set off from the
   first field by a hairline rule so the form reads as a contained moment. */
.form-card-head {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: .5px solid var(--nc-linen-mid);
  text-align: center;
}
.form-card-title {
  font-family: var(--nc-font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--nc-text-primary);
  margin-bottom: .6rem;
}
.form-card-title em {
  font-style: italic;
  color: var(--nc-gold-dark);
}
.form-card-sub {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.55;
  margin: 0;
}
.form-heading {
  font-family: var(--nc-font-display);
  font-size: 1.4rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  margin-bottom: .5rem;
}
.form-sub {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}
.form-group { margin-bottom: 1.35rem; }
.form-label {
  display: block;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nc-stone-dark);
  margin-bottom: .4rem;
}
.form-input {
  width: 100%;
  background: var(--nc-off-white);
  border: .5px solid var(--nc-linen-mid);
  color: var(--nc-text-primary);
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  padding: .75rem 1rem;
  border-radius: 6px;
  outline: none;
  transition: border-color var(--nc-duration-base) var(--nc-ease);
}
.form-input:focus { border-color: var(--nc-gold-dark); }
.form-input::placeholder { color: var(--nc-stone-light); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-select {
  width: 100%;
  background: var(--nc-off-white);
  border: .5px solid var(--nc-linen-mid);
  color: var(--nc-text-secondary);
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  padding: .75rem 1rem;
  border-radius: 6px;
  outline: none;
  appearance: none;
  cursor: pointer;
}
.form-textarea {
  width: 100%;
  background: var(--nc-off-white);
  border: .5px solid var(--nc-linen-mid);
  color: var(--nc-text-primary);
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  padding: .75rem 1rem;
  border-radius: 6px;
  outline: none;
  resize: vertical;
  min-height: 140px;
  transition: border-color var(--nc-duration-base) var(--nc-ease);
}
.form-textarea::placeholder { color: var(--nc-stone-light); }
.form-textarea:focus { border-color: var(--nc-gold-dark); }
.form-submit {
  width: 100%;
  background: var(--nc-green);
  color: var(--nc-text-inverse);
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: none;
  padding: 1.05rem;
  border-radius: 6px;
  cursor: pointer;
  margin-top: .75rem;
  box-shadow: 0 6px 18px -8px rgba(36,95,48,.45);
  transition: background var(--nc-duration-base) var(--nc-ease);
}
.form-submit:hover { background: var(--nc-green-hover); }
.form-optional-label {
  font-family: var(--nc-font-body);
  font-size: 10px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone);
  margin: 1.75rem 0 1.1rem;
  padding-top: 1.35rem;
  border-top: .5px solid var(--nc-linen-mid);
}
.form-hint {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-stone);
  line-height: 1.45;
  margin: .4rem 0 0;
}
.form-reassure {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-stone);
  line-height: 1.55;
  text-align: center;
  margin: 1rem 0 0;
}
.form-consent {
  font-family: var(--nc-font-body);
  font-size: .6875rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-stone-light);
  line-height: 1.55;
  text-align: center;
  max-width: 30rem;
  margin: 1.25rem auto 0;
}

/* ═══════════════════════════════
   HOMEPAGE CTA BLOCK (Section 8)
═══════════════════════════════ */
.cta-block {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.cta-block .gold-line { margin-inline: auto; }
.cta-block .section-heading { margin-bottom: 1.25rem; }
.cta-block-sub {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  color: var(--nc-text-secondary);
  line-height: 1.7;
  max-width: 460px;
  margin: 0 auto 2rem;
}
.cta-nap {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  margin-bottom: 2.5rem;
}
.cta-nap .contact-detail { justify-content: center; }
.cta-nap .contact-detail-text a {
  color: var(--nc-text-secondary);
  text-decoration: none;
}
.cta-nap .contact-detail-text a:hover { color: var(--nc-gold-dark); }

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
footer {
  background: var(--nc-charcoal);
  padding: 3rem 0 2rem;
  border-top: .5px solid rgba(250,250,247,.12);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 3rem;
  margin-bottom: 2.5rem;
}
.footer-brand .nav-logo { color: var(--nc-text-inverse); }
.footer-brand p {
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  color: rgba(250,250,247,.7);
  line-height: 1.7;
  margin-top: 1rem;
  max-width: 280px;
}
.footer-social {
  display: flex;
  gap: .75rem;
  margin-top: 1.25rem;
  align-items: center;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: .5px solid rgba(250,250,247,.2);
  border-radius: var(--nc-radius-sm);
  color: rgba(250,250,247,.6);
  text-decoration: none;
  transition: color var(--nc-duration-base) var(--nc-ease),
              border-color var(--nc-duration-base) var(--nc-ease);
}
.footer-social-link:hover {
  color: var(--nc-text-inverse);
  border-color: rgba(250,250,247,.5);
}
.footer-col h2 {
  font-family: var(--nc-font-body);
  font-size: 10px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-light);
  margin-bottom: 1rem;
}
.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-col ul li a {
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  color: rgba(250,250,247,.65);
  text-decoration: none;
  transition: color var(--nc-duration-base) var(--nc-ease);
}
.footer-col ul li a:hover { color: var(--nc-text-inverse); }
.footer-contact-addr {
  font-family: var(--nc-font-body);
  font-size: .875rem;
  font-weight: var(--nc-weight-light);
  color: rgba(250,250,247,.65);
  line-height: 1.6;
}
.footer-bottom {
  border-top: .5px solid rgba(250,250,247,.15);
  padding-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copy {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-light);
  color: rgba(250,250,247,.6);
}
.footer-credit-link {
  color: rgba(250,250,247,.6);
  text-decoration: none;
  transition: color var(--nc-duration-base) var(--nc-ease);
}
.footer-credit-link:hover { color: var(--nc-text-inverse); }

/* ═══════════════════════════════
   INNER PAGE HERO
═══════════════════════════════ */
.page-hero {
  background: var(--nc-deep-slate);
  padding: 9rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--nc-gold-light); }
.page-hero .gold-line { background: var(--nc-gold-light); }
.page-hero .section-heading,
.page-hero h1 {
  font-family: var(--nc-font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--nc-text-inverse);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.page-hero em { color: var(--nc-gold-light); font-style: italic; }
/* Kicker-below-headline pattern: H1 first, then either an .eyebrow
   (uppercase-tracked label) or a .page-hero-tagline (editorial sentence).
   Gold is reserved for the H1 italic so the kicker reads neutral white.
   Text shadow matches the nav legibility treatment. */
.page-hero--img h1 + .eyebrow,
.page-hero h1 + .page-hero-tagline {
  margin-top: .85rem;
  margin-bottom: 0;
  color: rgba(250,250,247,.85);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.page-hero-tagline {
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  font-weight: var(--nc-weight-regular);
  line-height: 1.4;
  max-width: 780px;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-hero-bg picture,
.page-hero-bg picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
/* Light bottom-only scrim — kept tight so the photo reads cleanly above the
   stats strip. H1/tagline rely on their own text-shadow for legibility. */
.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,26,22,.42) 0%,
    rgba(26,26,22,.18) 22%,
    transparent 45%
  );
}
/* Taller hero for project pages with background photo */
.page-hero--img {
  padding: 5rem 0 4.5rem;
  min-height: min(85vh, 800px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* When the hero has the absolute stats overlay, reserve room above it */
.page-hero--with-stats { padding-bottom: 9rem; }

/* Project hero stats — dark glass strip overlaid at the bottom of the
   hero, mirroring the homepage .hero-trust treatment. */
.project-hero-stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  background: rgba(26,26,22,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: .5px solid var(--nc-border-dark);
  padding-bottom: env(safe-area-inset-bottom);
}
.project-hero-stats-grid {
  display: flex;
  align-items: stretch;
}
.project-hero-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 1rem;
  border-right: .5px solid var(--nc-border-dark);
  border-top: 1px solid rgba(200,164,90,.22);
  text-align: center;
}
.project-hero-stat:last-child { border-right: none; }
.project-hero-stat-value {
  font-family: var(--nc-font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1.15;
  /* Lining + tabular figures so numeric values like "2026" sit at cap
     height instead of Cormorant's default oldstyle numerals (which look
     visually smaller next to letter-based values). */
  font-feature-settings: "lnum" 1, "tnum" 1;
}
.project-hero-stat-label {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-regular);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250,250,247,.62);
  margin-bottom: .45rem;
}

/* ═══════════════════════════════
   CONTACT PAGE
═══════════════════════════════ */
.contact-hero {
  background: linear-gradient(168deg, var(--nc-deep-slate) 0%, var(--nc-deep-slate) 52%, #2a2820 100%);
  padding: 8.5rem 0 3rem;
}
.contact-hero .eyebrow { color: var(--nc-gold-light); }
.contact-hero .gold-line { background: var(--nc-gold-light); }
.contact-hero h1 {
  font-family: var(--nc-font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.contact-hero h1 em { font-style: italic; }
.contact-hero-sub {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  color: rgba(250,250,247,.78);
  line-height: 1.7;
  max-width: 760px;
  margin-bottom: 0;
}
.contact-trust-strip {
  display: flex;
  border-top: .5px solid var(--nc-border-dark);
}
.contact-trust-item {
  flex: 1;
  padding: 1.5rem 0;
  border-right: .5px solid var(--nc-border-dark);
  text-align: center;
}
.contact-trust-item:last-child { border-right: none; }
.contact-trust-num {
  display: block;
  font-family: var(--nc-font-display);
  font-size: 2rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-inverse);
  line-height: 1;
}
.contact-trust-lbl {
  display: block;
  font-family: var(--nc-font-body);
  font-size: 10px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--nc-stone);
  margin-top: .4rem;
}
.contact-body {
  background: var(--nc-warm-linen);
  padding: 3rem 0 6rem;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 4rem;
  align-items: start;
}
.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.contact-steps-eyebrow {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  margin-bottom: 1.25rem;
}
.contact-step {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
}
.contact-step + .contact-step { margin-top: 1.125rem; }
.contact-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: .5px solid var(--nc-gold-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nc-font-body);
  font-size: 10px;
  color: var(--nc-gold-dark);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-step-title {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  font-weight: var(--nc-weight-medium);
  color: var(--nc-text-primary);
  line-height: 1.4;
}
.contact-step-desc {
  font-family: var(--nc-font-body);
  font-size: .875rem;
  color: var(--nc-text-secondary);
  line-height: 1.65;
  margin-top: .25rem;
}
/* Dark card — the preferred backup path for anyone who would rather not fill
   out the form. It leads the sidebar, so it sits just below the deep-slate
   page hero; using charcoal (a step lighter than the hero) plus the linen gap,
   rounded corners, and shadow keeps it reading as a separate card rather than
   bleeding into the hero. Header is centered; the contact rows are left-aligned. */
.contact-reach {
  background: var(--nc-charcoal);
  border-radius: 12px;
  padding: 1.85rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(26,26,22,.05), 0 24px 50px -30px rgba(26,26,22,.45);
}
/* Header stays centered (text-align above); the contact rows read left-aligned. */
.contact-reach .contact-details { text-align: left; }
.contact-reach-eyebrow {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-light);
  margin-bottom: 1.15rem;
}
/* Inner detail rows recolored for the dark card */
.contact-reach .contact-detail-icon {
  border-color: rgba(250,250,247,.16);
  color: var(--nc-gold-light);
}
.contact-reach .contact-detail-text { color: rgba(250,250,247,.86); }
.contact-reach a.contact-detail-text { transition: color var(--nc-duration-base) var(--nc-ease); }
.contact-reach a.contact-detail-text:hover { color: var(--nc-gold-light); }
.contact-reach-area {
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  color: rgba(250,250,247,.86);
  line-height: 1.6;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: .5px solid rgba(250,250,247,.12);
  font-style: italic;
  text-align: left;
}
.contact-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
}
.contact-quote {
  border-left: 2px solid var(--nc-gold-dark);
  padding-left: 1.25rem;
}
.contact-quote-text {
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--nc-text-secondary);
  line-height: 1.65;
  margin-bottom: .5rem;
}
.contact-quote-attr {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--nc-stone);
}
.form-label-opt {
  font-weight: var(--nc-weight-light);
  color: var(--nc-stone);
  font-size: .8em;
}
.form-label-req {
  color: var(--nc-gold-dark);
  margin-left: .1em;
  font-weight: var(--nc-weight-medium);
}

/* ── MOBILE STICKY CTA BAR ── */
.mobile-cta-bar {
  display: none; /* desktop: hidden */
}

/* ── SCROLL ANIMATION SETUP ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--nc-ease), transform .7s var(--nc-ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ═══════════════════════════════
   PROJECT DETAIL PAGE
═══════════════════════════════ */
.project-stats-bar {
  background: var(--nc-off-white);
  border-bottom: .5px solid var(--nc-linen-mid);
}
.project-stats {
  display: flex;
  flex-wrap: wrap;
}
.project-stat {
  flex: 1;
  min-width: 140px;
  padding: 1.5rem 2rem;
  border-right: .5px solid var(--nc-linen-mid);
}
.project-stat:last-child { border-right: none; }
.project-stat-label {
  display: block;
  font-family: var(--nc-font-body);
  font-size: 10px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone);
  margin-bottom: .5rem;
}
.project-stat-value {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-medium);
  color: var(--nc-text-primary);
}

.project-intro-section {
  background: var(--nc-off-white);
  padding: 6rem 0 6.5rem;
}
.project-intro-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 5rem;
  align-items: start;
}
.project-intro-text .eyebrow {
  color: var(--nc-gold-dark);
  margin-bottom: 1rem;
}
.project-intro-text .eyebrow::after {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--nc-gold-dark);
  margin-top: 1rem;
}
.project-intro-text h2 {
  font-family: var(--nc-font-display);
  font-size: clamp(2rem, 3.4vw, 2.85rem);
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 2rem;
}
.project-intro-text h2 em {
  font-style: italic;
  color: var(--nc-gold-dark);
}
.project-intro-text p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.85;
  margin-bottom: 1.5rem;
}
.project-intro-text p:last-child { margin-bottom: 0; }
/* Case-study sub-sections inside the intro narrative — small uppercase
   tracked label sits above each paragraph. Matches the .eyebrow voice but
   semantic h3 so it scans as proper sub-structure. */
.project-intro-text h3 {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  margin: 2.25rem 0 .9rem;
}
.project-intro-text h3:first-of-type { margin-top: 0; }

/* Right-column wrapper: stacks scope card + CTA card so they share the
   column and balance the longer left-column text on desktop. */
.project-intro-aside {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Solo variant — used when a project page intentionally omits the
   narrative column (e.g. private-client request, image-led close).
   Renders scope + CTA inside a single unified "Project Notes" panel
   instead of two floating cards, so the section reads as one intentional
   close rather than a sparse stack. The panel chrome (gold-dark top
   accent, white card, subtle shadow) is on the outer wrapper; inner
   .project-scope-card / .project-cta-card lose their own chrome and
   become content blocks separated by a vertical hairline divider.
   Scope list runs in two internal columns so it sits wider but not as
   tall, balancing the CTA's natural height. Stacks below 860px.  */
.project-notes-panel {
  background: #fff;
  border: .5px solid var(--nc-linen-mid);
  border-top: 3px solid var(--nc-gold-dark);
  padding: 3rem 3rem 3.25rem;
  box-shadow: 0 1px 3px rgba(26,26,22,.04);
  max-width: 1040px;
  margin: 0 auto;
}
.project-notes-panel-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: start;
}
/* Strip the inner cards' chrome — the outer panel provides it. */
.project-notes-panel .project-scope-card,
.project-notes-panel .project-cta-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
/* Vertical hairline divider between scope and CTA */
.project-notes-panel .project-cta-card {
  padding-left: 3rem;
  border-left: .5px solid var(--nc-linen-mid);
}
/* Two-column scope list inside the panel. CSS multi-column flow keeps
   counters intact and balances ~12 items across two columns. */
.project-notes-panel .project-scope-list {
  display: block;
  columns: 2;
  column-gap: 2.5rem;
}
.project-notes-panel .project-scope-list li {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.project-notes-panel .project-scope-list li:last-child {
  margin-bottom: 0;
}
@media (max-width: 860px) {
  /* Contact form: collapse the two-column grid into a single stacked column.
     The two columns (1fr 1.5fr) crowd the form below ~860px — at 721px the
     form was being clipped. Stacks form-first via order: -1. */
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-main { order: -1; }

  .project-notes-panel {
    padding: 2.25rem 1.75rem 2.5rem;
    max-width: 520px;
  }
  .project-notes-panel-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .project-notes-panel .project-cta-card {
    padding-left: 0;
    border-left: none;
    border-top: .5px solid var(--nc-linen-mid);
    padding-top: 2rem;
  }
  .project-notes-panel .project-scope-list {
    columns: 1;
  }
}

/* Scope card: white-on-cream "card on a card" with gold top accent and
   numbered items. */
.project-scope-card {
  background: #fff;
  border: .5px solid var(--nc-linen-mid);
  border-top: 3px solid var(--nc-gold-dark);
  padding: 2.5rem 2.25rem 2.75rem;
  box-shadow: 0 1px 3px rgba(26,26,22,.04);
}
.project-scope-eyebrow {
  display: block;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  position: relative;
  padding-bottom: 1.15rem;
  margin-bottom: 1.6rem;
}
.project-scope-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 32px;
  height: 1px;
  background: var(--nc-gold-dark);
}
.project-scope-list {
  list-style: none;
  counter-reset: scope;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-scope-list li {
  counter-increment: scope;
  display: flex;
  gap: 1.15rem;
  align-items: baseline;
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.45;
  padding-left: 0;
  position: static;
}
.project-scope-list li::before {
  content: counter(scope, decimal-leading-zero);
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: 1.0625rem;
  font-weight: var(--nc-weight-regular);
  color: var(--nc-gold-dark);
  flex: 0 0 1.75em;
  background: none;
  border-radius: 0;
  width: auto;
  height: auto;
  position: static;
  top: auto;
  letter-spacing: .02em;
}

.project-feature-section {
  background: var(--nc-warm-linen);
  line-height: 0;
  border-top: 2px solid var(--nc-gold-dark);
}
.project-feature-section figure {
  margin: 0;
}
.project-feature-section picture,
.project-feature-section img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  display: block;
}
.project-feature-section figcaption {
  line-height: 1.5;
  text-align: center;
  font-family: var(--font-body, "Jost", sans-serif);
  font-weight: 300;
  font-size: 0.8125rem;
  color: var(--nc-text-secondary);
  padding: 1rem 1.25rem 1.25rem;
  letter-spacing: 0.02em;
}

/* Featured film section — mirrors the .featured-transformation editorial
   pattern from /our-work/. Eyebrow + gold-line + italic Cormorant H2 +
   meta line, followed by a contained-width video card. Sits on warm-linen
   so the seam to the gallery below disappears, while the section header
   creates clean separation from the dark hero above. */
.project-film-section {
  background: var(--nc-warm-linen);
  padding: 5rem 0;
}
.project-film-section .section-header--centered { margin-bottom: 2.5rem; }
.project-film-section .eyebrow { color: var(--nc-gold-dark); }
.project-film-section .gold-line { background: var(--nc-gold-dark); }
.project-film-section .section-heading { color: var(--nc-text-primary); }
.project-film-section .section-heading em {
  color: var(--nc-gold-dark);
  font-style: italic;
}
.project-film-meta {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone-dark);
}
.project-film {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nc-deep-slate);
  box-shadow: 0 12px 32px rgba(26, 26, 22, 0.18);
}
.project-film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--nc-deep-slate);
}
.project-film-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(26, 26, 22, 0.72);
  border: 2px solid var(--nc-gold-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  padding: 0;
}
.project-film-play:hover,
.project-film-play:focus-visible {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(26, 26, 22, 0.85);
  border-color: var(--nc-gold);
  outline: none;
}
.project-film-play svg {
  width: 38px;
  height: 38px;
  fill: var(--nc-gold-light);
  margin-left: 4px;
}
.project-film-play[hidden] {
  display: none;
}

/* Unmute pill — sits in the lower-right of the video frame while the
   film plays muted-on-scroll. Visible whenever the video is muted; hides
   the moment the user unmutes (either via this pill or the native controls). */
.project-film-unmute {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(26, 26, 22, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: .5px solid rgba(250, 250, 247, 0.28);
  color: var(--nc-text-inverse);
  font-family: var(--nc-font-body);
  font-size: 12px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem .95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.project-film-unmute svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.project-film-unmute:hover,
.project-film-unmute:focus-visible {
  background: rgba(26, 26, 22, 0.92);
  border-color: var(--nc-gold-light);
  outline: none;
}
.project-film-unmute[hidden] {
  display: none;
}

.project-gallery-section {
  background: var(--nc-warm-linen);
  padding: 5rem 0 6rem;
}
.project-gallery-section .section-heading { color: var(--nc-text-primary); }

/* /gallery/ page sections */
.gallery-section { padding: 5rem 0 6rem; scroll-margin-top: 20px; }

/* On the full /gallery/ page, use a denser 4-col grid (matches the
   live naturescalllandscaping.com/portfolio/ layout). Scoped to
   .gallery-section so the curated /our-work/{slug}/ project galleries
   keep their 3-col treatment. Mobile rule below the desktop block still
   applies (2 cols at <=720px). */
.gallery-section .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
}
@media (max-width: 720px) {
  .gallery-section .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
}

.gallery-section--hardscape { background: var(--nc-off-white); }
.gallery-section--landscape { background: var(--nc-warm-linen); }
/* Neutral off-white variant for galleries embedded on service pages, where
   the surrounding sections are linen and need contrast. */
.gallery-section--offwhite { background: var(--nc-off-white); }
.gallery-section-seam {
  height: 2px;
  background: var(--nc-gold-dark);
  width: 100%;
}
@media (max-width: 720px) {
  .gallery-section { padding: 3rem 0; }
}

/* /gallery/ tile overlay — appears on hover (desktop), persistent chip (mobile) */
.gallery-item { position: relative; }

.gallery-tile__overlay {
  pointer-events: none; /* label is informational only; clicks fall through to the lightbox tile */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .75rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--nc-text-inverse);
  background: linear-gradient(to top, rgba(26,26,22,.85) 0%, rgba(26,26,22,.45) 70%, rgba(26,26,22,0) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 2;
}
.gallery-item:hover .gallery-tile__overlay,
.gallery-item:focus-within .gallery-tile__overlay {
  opacity: 1;
}
.gallery-tile__arrow { font-size: 1rem; }

/* Mobile: hide the project-link overlay entirely. The persistent chip
   was distracting on a gallery where many tiles come from the same
   project, and the lightbox is the primary mobile interaction anyway.
   Click-through to project pages is preserved on desktop hover. */
@media (max-width: 720px) {
  .gallery-tile__overlay { display: none; }
}

/* /gallery/ section header intro paragraph — sits below the gold
   divider, gives each section a brand-voice opener before the grid. */
.gallery-section-intro {
  max-width: 72ch;
  margin: 1.5rem auto 0;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--nc-text-secondary);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 6px;
  grid-auto-flow: dense;
  margin-top: 3rem;
}
.gallery-item {
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
  background: var(--nc-linen-mid);
  transition: transform .35s var(--nc-ease), box-shadow .35s var(--nc-ease);
}
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item.feature { grid-column: span 2; grid-row: span 2; }
.gallery-item picture { display: block; width: 100%; height: 100%; }
.gallery-item picture img,
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: hover) {
  .gallery-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26,26,22,.18);
    z-index: 2;
  }
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,10,8,.94);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 3rem 5rem;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: 100%;
  max-height: 88vh;
  object-fit: contain;
  display: block;
}
.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.75rem;
  background: none;
  border: none;
  color: rgba(250,250,247,.7);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s;
  font-weight: 300;
}
.lightbox-close:hover { color: var(--nc-off-white); }
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: .5px solid rgba(250,250,247,.25);
  color: rgba(250,250,247,.7);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.25rem;
  transition: color .2s, border-color .2s;
}
.lightbox-nav:hover { color: var(--nc-off-white); border-color: rgba(250,250,247,.6); }
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }
.lightbox-counter {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--nc-font-body);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(250,250,247,.45);
}

/* CTA card — sibling to .project-scope-card. Sits in the right column
   below the scope card to balance the longer left-column case study text.
   Mirrors scope card chrome so they read as a paired stack. */
.project-cta-card {
  background: #fff;
  border: .5px solid var(--nc-linen-mid);
  border-top: 3px solid var(--nc-gold-dark);
  padding: 2.25rem 2.25rem 2.5rem;
  box-shadow: 0 1px 3px rgba(26,26,22,.04);
}
.project-cta-eyebrow {
  display: block;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  position: relative;
  padding-bottom: 1.15rem;
  margin-bottom: 1.4rem;
}
.project-cta-eyebrow::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 32px;
  height: 1px;
  background: var(--nc-gold-dark);
}
.project-cta-card h3 {
  font-family: var(--nc-font-display);
  font-size: 1.5rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0 0 1.1rem;
}
.project-cta-card h3 em {
  font-style: italic;
  color: var(--nc-gold-dark);
}
.project-cta-card p {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  line-height: 1.65;
  margin: 0 0 1.6rem;
}

/* ═══════════════════════════════
   BEFORE/AFTER SLIDER
   Used on /our-work/ landing and on the Hockessin project page.
   Markup driven by [data-ba-slider]; JS toggles --ba-position
   on the .ba-slider__viewer element.
═══════════════════════════════ */
.ba-slider {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.ba-slider__viewer {
  position: relative;
  aspect-ratio: 4/3;
  border: 1px solid var(--nc-charcoal);
  border-radius: 4px;
  overflow: hidden;
  user-select: none;
  touch-action: pan-y;
  --ba-position: 50%;
}
.ba-slider__before,
.ba-slider__after {
  position: absolute;
  inset: 0;
}
.ba-slider__before picture,
.ba-slider__after picture,
.ba-slider__before img,
.ba-slider__after img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba-slider__after {
  clip-path: inset(0 0 0 var(--ba-position));
}
.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-position);
  width: 44px;
  margin-left: -22px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: ew-resize;
  touch-action: none;
  z-index: 2;
}
.ba-slider__handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--nc-gold-light);
  box-shadow: 0 0 6px rgba(0,0,0,.35);
}
.ba-slider__handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--nc-gold-light);
  color: var(--nc-charcoal);
  font-family: var(--nc-font-body);
  font-weight: var(--nc-weight-medium);
  font-size: 1.1rem;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.ba-slider__handle:focus-visible {
  outline: none;
}
.ba-slider__handle:focus-visible .ba-slider__handle-knob {
  outline: 2px solid var(--nc-gold-dark);
  outline-offset: 3px;
}
.ba-slider__label {
  position: absolute;
  bottom: 1rem;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-text-inverse);
  background: rgba(26,26,22,.6);
  padding: .25rem .55rem;
  border-radius: 2px;
  pointer-events: none;
  z-index: 1;
}
.ba-slider__label--before { left: 1rem; }
.ba-slider__label--after { right: 1rem; }
.ba-slider__caption {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
}

/* Project page Before & After section wrapper (uses .ba-slider component) */
.project-before-after-section {
  background: var(--nc-warm-linen);
  padding: 5rem 0;
}
.project-before-after-section .section-header--centered { margin-bottom: 2.5rem; }
.project-before-after-section .section-heading { color: var(--nc-text-primary); }
.project-before-after-section .section-heading em { color: var(--nc-gold-dark); font-style: italic; }
.project-before-after-section .eyebrow { color: var(--nc-gold-dark); }
.project-before-after-section .gold-line { background: var(--nc-gold-dark); }

/* ═══════════════════════════════
   /OUR-WORK/ LANDING — SECTIONS
   Intro, featured transformation, final CTA (with stat tiles).
   Project grid (.projects / .projects-grid / .project-card) is unchanged.
═══════════════════════════════ */

/* Lead paragraph block directly below the video hero. */
.our-work-intro {
  background: var(--nc-off-white);
  padding: 4.5rem 0 4rem;
}
.our-work-intro .container {
  max-width: 760px;
}
.our-work-intro .section-header--centered {
  margin-bottom: 2rem;
}
.our-work-intro p {
  font-family: var(--nc-font-body);
  font-weight: var(--nc-weight-light);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--nc-text-secondary);
  margin: 0;
}

/* Featured transformation (slider) */
.featured-transformation {
  background: var(--nc-warm-linen);
  padding: 5rem 0;
}
.featured-transformation .section-header--centered { margin-bottom: 2.5rem; }
.featured-transformation .eyebrow { color: var(--nc-gold-dark); }
.featured-transformation .gold-line { background: var(--nc-gold-dark); }
.featured-transformation .section-heading { color: var(--nc-text-primary); }
.featured-transformation .section-heading em {
  color: var(--nc-gold-dark);
  font-style: italic;
}
.featured-transformation-meta {
  display: block;
  text-align: center;
  margin-top: .75rem;
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone-dark);
}
.featured-transformation-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* Force the project grid section background even if .projects has no
   declared bg in the homepage context. The grid sits inside the dark
   slot of the landing-page alternation pattern. */
.our-work-projects {
  background: var(--nc-deep-slate);
}
.our-work-projects .section-header--centered .section-heading {
  color: var(--nc-text-inverse);
}
.our-work-projects .section-header--centered .eyebrow {
  color: var(--nc-gold-light);
}
.our-work-projects .section-header--centered .gold-line {
  background: var(--nc-gold-light);
}
.our-work-projects .section-header--centered .section-heading em {
  color: var(--nc-gold-light);
  font-style: italic;
}
/* 3-column grid sized for the full 6-card portfolio.
   Greenville (the .large card) spans 2 cols × 2 rows = 4 slots;
   the remaining 5 cards each take 1 slot, filling a perfect 3×3 grid. */
.our-work-projects .projects-grid {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  margin-top: 2.5rem;
}
.our-work-projects .project-card.large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Final CTA — light background, deliberately separate from charcoal footer */
.our-work-cta {
  background: var(--nc-off-white);
  padding: 6rem 0;
  text-align: center;
}
.our-work-cta .eyebrow { color: var(--nc-gold-dark); }
.our-work-cta .gold-line { background: var(--nc-gold-dark); margin-inline: auto; }
.our-work-cta h2 {
  font-family: var(--nc-font-display, 'Cormorant Garamond', serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  margin-bottom: 1.25rem;
}
.our-work-cta h2 em { color: var(--nc-gold-dark); font-style: italic; }
.our-work-cta p {
  max-width: 560px;
  margin: 0 auto 2rem;
  font-family: var(--nc-font-body);
  font-weight: var(--nc-weight-light);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nc-text-secondary);
}

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 720px) {
  /* Services: stack to single column on phone-size viewports.
     Drop the desktop hairline-grid (1px gap on linen bg) and give each card
     its own boundary + breathing room so they read as separate cards. */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    background: transparent;
    border: none;
  }
  .service-card {
    border: 1px solid var(--nc-linen-mid);
    border-radius: var(--nc-radius-sm);
  }
  .service-card--featured {
    border-color: var(--nc-gold-dark);
  }
}

/* Nav switches to mobile (hamburger) at a wider breakpoint than the rest
   of the page content. Reason: the desktop nav row now carries logo +
   4 menu items + Pay Invoice utility link + phone number + Contact CTA
   button — that's a lot to pack into a row. Bumped 860 → 920 on
   2026-05-23 after the phone + Contact button additions, then 920 → 1020
   on 2026-05-28 after adding Pay Invoice (980 and 1000 both still felt
   tight; nowrap on the utility items also added), then 1020 → 1064 on
   2026-06-17 — at 1021–1064 the logo's "Landscape · Hardscape · Drainage"
   tagline crowded the Services menu item; the row only breathes at ~1065.
   The rest of the page-content collapse logic still happens at 720px (next
   block); Hockessin's Project Notes panel stack point is at 860px (separate
   concern). */
@media (max-width: 1064px) {
  /* Nav: 3-col grid — phone tap-to-call icon on the left (replaces the
     old empty placeholder), centered logo, hamburger flush right.
     On mobile the nav is a solid band sitewide (not floating-over-hero
     like desktop) — mobile heroes don't have room to share with chrome. */
  nav {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding: 1rem clamp(1rem, 4vw, 2rem);
    background: rgba(26,26,22,.95);
    backdrop-filter: blur(12px);
  }
  nav::before { display: none; }
  /* Logo + links don't need over-photo shadow tricks on a solid bg */
  .nav-logo { text-shadow: none; }
  .nav-logo-img { filter: none; }
  .nav-links a { text-shadow: none; }
  .nav-phone { text-shadow: none; }
  .nav-logo {
    grid-column: 2;
    justify-self: center;
    align-items: center;
  }
  .nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 3;
    justify-self: end;
  }

  /* Tap-to-call phone icon in the left 44px grid slot. One-tap access
     to call from anywhere on the site (mobile users' highest-intent
     contact path). */
  .nav-phone-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    justify-self: start;
    width: 44px;
    height: 44px;
    color: var(--nc-text-inverse);
    text-decoration: none;
    border-radius: var(--nc-radius-sm);
    transition: background var(--nc-duration-base) var(--nc-ease);
  }
  .nav-phone-mobile:hover,
  .nav-phone-mobile:focus-visible {
    background: rgba(250,250,247,.08);
  }
  .nav-phone-mobile:focus-visible {
    outline: 2px solid var(--nc-gold-light);
    outline-offset: 2px;
  }

  /* Dropdown panel — fades in below the nav when menu-open is set.
     This role used to live on .nav-links; moved up to .nav-right so the
     dropdown contains the menu links AND the phone + Contact CTA, giving
     mobile users every contact path inside the menu. */
  .nav-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(26,26,22,.98);
    backdrop-filter: blur(12px);
    padding: .5rem 0 1rem;
    border-top: .5px solid var(--nc-border-dark);
    opacity: 0;
    visibility: hidden;
    /* iOS Safari keeps a backdrop-filter element hittable even when
       visibility:hidden, so the closed panel was intercepting taps on the
       content beneath it (landing on whichever nav link sat there). Explicitly
       disabling pointer-events on the closed panel stops the ghost taps. */
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--nc-duration-base) var(--nc-ease),
                transform var(--nc-duration-base) var(--nc-ease),
                visibility 0s linear var(--nc-duration-base);
  }
  nav.menu-open .nav-right {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--nc-duration-base) var(--nc-ease),
                transform var(--nc-duration-base) var(--nc-ease),
                visibility 0s;
  }

  /* Vertical link list inside the dropdown */
  .nav-right .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav-right .nav-links li { width: 100%; }
  .nav-right .nav-links a {
    display: block;
    padding: .9rem clamp(1.5rem, 5vw, 2rem);
    font-size: 13px;
    color: rgba(250,250,247,.85);
    border-bottom: .5px solid var(--nc-border-dark);
  }

  /* Services submenu — inside the hamburger panel it's always expanded and
     indented under "Services" (no hover dropdown on touch). The desktop
     absolute-positioned dropdown rules are reset here. */
  .nav-has-submenu { position: static; }
  .nav-has-submenu > a::after { display: none; }
  .nav-submenu {
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    z-index: auto;
  }
  /* .nav-right qualifier needed so this beats `.nav-right .nav-links a` (same
     specificity, later source order) — otherwise the indentation is cancelled. */
  .nav-right .nav-submenu a {
    padding: .8rem clamp(1.5rem, 5vw, 2rem) .8rem clamp(2.75rem, 9vw, 3.5rem);
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(250,250,247,.62);
    border-bottom: .5px solid var(--nc-border-dark);
  }
  .nav-right .nav-submenu a:hover { color: var(--nc-gold-light); }

  /* Pay Invoice in dropdown — block link, same chrome as the menu items
     but a step quieter so it reads as utility, not primary navigation. */
  .nav-right .nav-pay {
    display: block;
    padding: .9rem clamp(1.5rem, 5vw, 2rem);
    font-size: 12px;
    letter-spacing: .12em;
    color: rgba(250,250,247,.7);
    border-bottom: .5px solid var(--nc-border-dark);
    text-shadow: none;
  }

  /* Phone in dropdown — readable digits, same block-link treatment as
     the menu items above it. */
  .nav-right .nav-phone {
    display: block;
    padding: .9rem clamp(1.5rem, 5vw, 2rem);
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(250,250,247,.85);
    border-bottom: .5px solid var(--nc-border-dark);
  }

  /* Contact CTA at the bottom of the dropdown — full-width green button,
     larger tap target than the inline desktop pill so it reads as the
     menu's primary action. */
  .nav-right .nav-cta {
    display: block;
    margin: 1rem clamp(1.5rem, 5vw, 2rem) .25rem;
    padding: .85rem 1.5rem;
    text-align: center;
    font-size: 12px;
    letter-spacing: .1em;
    line-height: 1.4;
  }

  /* Force solid nav background while menu is open so the dropdown
     reads as one continuous panel even at top-of-page transparent state */
  nav.menu-open {
    background: rgba(26,26,22,.96);
    backdrop-filter: blur(12px);
  }

  /* Logo: trim slightly on small screens so the nav doesn't feel cramped */
  .nav-logo-img { height: 44px; }
  nav.scrolled .nav-logo-img { height: 36px; }
  .nav-logo-tagline { font-size: 9px; letter-spacing: .22em; }
  nav.scrolled .nav-logo-tagline { font-size: 8px; }
  .footer-brand .nav-logo-img { height: 56px; }
  .footer-brand .nav-logo-tagline { font-size: 10px; }
}

@media (max-width: 720px) {

  /* Trust strip: 3-column single row (numeric stats variant) */
  .hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .trust-item {
    border-right: .5px solid var(--nc-border-dark);
    border-bottom: none;
    text-align: center;
    padding: 1.35rem .5rem;
  }
  .trust-item:last-child { border-right: none; }
  .trust-num { font-size: 1.9rem; }
  .trust-lbl {
    font-size: 10px;
    text-align: center;
    line-height: 1.4;
  }

  /* Trust strip — logo variant: 4 columns, no dividers, smaller logos */
  .hero-trust.hero-trust--logos {
    grid-template-columns: repeat(4, 1fr);
  }
  .hero-trust--logos .trust-item {
    border-right: none;
    padding: 1.1rem .4rem;
  }
  .hero-trust--logos .trust-logo-img {
    height: 40px;
  }

  /* Hero: strip back to centered headline only — image/video needs to breathe */
  .hero-content {
    padding-bottom: 11rem;
    text-align: center;
    max-width: 100%;
    padding-inline: clamp(1.5rem, 6vw, 3rem);
  }
  .hero-content .eyebrow { display: none; }
  .hero-sub { display: none; }
  .hero-btns { display: none; }

  /* Nav-mobile rules live in the @media (max-width: 1064px) block above so
     the hamburger pattern kicks in earlier than page-content collapse. */

  /* Projects: single column */
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .project-card.large {
    grid-row: span 1;
    min-height: 280px;
  }
  .project-card {
    min-height: 240px;
  }
  .project-card.large .project-name { font-size: 1.5rem; }

  /* /our-work/ portfolio grid collapses to single column too — match
     the homepage mobile behavior with specificity that beats the
     desktop .our-work-projects override above. */
  .our-work-projects .projects-grid {
    grid-template-columns: 1fr;
  }
  .our-work-projects .project-card.large {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* About: heading → image → body. Flatten the .about-copy wrapper via
     display: contents so its children participate in the parent grid
     directly and the order rules below interleave them around the image. */
  .about-inner {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .about-copy { display: contents; }
  .about-copy-head { order: 1; }
  .about-img {
    order: 2;
    aspect-ratio: 3/2;
    max-width: none;
  }
  .about-copy-body { order: 3; }

  /* Process: stack vertically */
  .process-steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    max-width: 400px;
    margin-inline: auto;
  }
  .process-steps::before {
    display: none;
  }
  .process-step {
    padding: 0;
  }

  /* Reviews: single column */
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .reviews-footer {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }

  /* Service Area: heading → map → body. Flatten the .area-copy wrapper via
     display: contents so its children participate in the parent grid
     directly and the order rules below interleave them around the map. */
  .area-inner {
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .area-copy { display: contents; }
  .area-copy-head { order: 1; }
  .area-map       { order: 2; }
  .area-copy-body { order: 3; }

  /* Contact section (homepage CTA layout) */
  .contact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact-form {
    padding: 2rem 1.25rem;
  }
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Inner page hero */
  .page-hero { padding: 7rem 0 3rem; }
  .page-hero--img { min-height: min(75vh, 560px); padding: 4rem 0 2rem; }
  .page-hero--with-stats { padding-bottom: 5.5rem; }
  .page-hero--img .page-hero-tagline {
    font-size: 1rem;
    line-height: 1.45;
  }
  .project-hero-stat { padding: .85rem .5rem; }
  .project-hero-stat-value { font-size: .95rem; }
  .project-hero-stat-label {
    font-size: 9px;
    letter-spacing: .12em;
    margin-bottom: .35rem;
  }

  /* Contact page */
  .contact-hero { padding: 8rem 0 3rem; }
  .contact-trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); }
  .contact-body { padding: 2rem 0 4rem; }

  /* Mobile sticky CTA bar */
  .mobile-cta-bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: calc(var(--nc-z-nav) - 1);
    background: rgba(26,26,22,.96);
    backdrop-filter: blur(12px);
    padding: 1rem clamp(1.25rem, 5vw, 2rem);
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    border-top: .5px solid var(--nc-border-dark);
    transform: translateY(100%);
    transition: transform .35s var(--nc-ease);
  }
  .mobile-cta-bar.visible {
    transform: translateY(0);
  }
  .mobile-cta-bar .btn-primary {
    flex: 1;
    text-align: center;
    padding: .8rem 1rem;
  }
  .mobile-cta-secondary {
    font-family: var(--nc-font-body);
    font-size: 11px;
    font-weight: var(--nc-weight-medium);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(250,250,247,.65);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--nc-duration-base) var(--nc-ease);
  }
  .mobile-cta-secondary:hover { color: var(--nc-text-inverse); }

  /* Project detail page */
  .project-feature-section { padding: 4rem 0 3.5rem; }
  .project-film-section { padding: 3.5rem 0; }
  .project-film-section .section-header--centered { margin-bottom: 1.75rem; }
  .project-film-play { width: 64px; height: 64px; }
  .project-film-play svg { width: 28px; height: 28px; margin-left: 3px; }
  .project-intro-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .project-stats {
    flex-wrap: wrap;
  }
  .project-stat {
    min-width: 0;
    flex: 1 1 calc(50% - 1px);
    padding: 1.125rem 1.25rem;
  }
  .project-stat:nth-child(2n) { border-right: none; }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
    gap: 4px;
  }
  .lightbox { padding: 4rem 1rem 3rem; }
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }

  /* Footer: brand full-width centered, columns side by side */
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-col--contact {
    grid-column: 1 / -1;
  }
  .footer-col--contact ul {
    align-items: center;
  }
  .footer-brand .nav-logo {
    align-items: center;
    margin-inline: auto;
  }
  .footer-brand p {
    margin-inline: auto;
  }
  .footer-col ul {
    align-items: center;
  }
  .footer-social {
    justify-content: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: .75rem;
    text-align: center;
  }

  /* Before/after slider: expand to full width, larger touch target */
  .ba-slider { max-width: 100%; }
  /* Bigger touch target on the knob only — the handle must keep
     stretching top-to-bottom so the knob stays vertically centered. */
  .ba-slider__handle { width: 52px; margin-left: -26px; }
  .ba-slider__handle-knob { width: 52px; height: 52px; }
  .project-before-after-section { padding: 3.5rem 0; }
  .project-before-after-section .section-header--centered { margin-bottom: 1.75rem; }
  .our-work-intro { padding: 3rem 0 2.5rem; }
  .featured-transformation { padding: 3.5rem 0; }
  .our-work-cta { padding: 4.5rem 0; }
}

/* ============================================================
   PAY NOW PAGE
   ============================================================ */

.pay-body {
  background: var(--nc-off-white);
  padding: 5rem 0 7rem;
}

.pay-wrap {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.pay-intro {
  text-align: center;
}

.pay-intro p {
  font-size: 1rem;
  color: var(--nc-text-secondary);
  line-height: 1.7;
  margin-bottom: .75rem;
}

.pay-intro p:last-child { margin-bottom: 0; }

.pay-intro-note {
  font-size: .9375rem;
}

.pay-intro-note a {
  color: var(--nc-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pay-intro-note a:hover {
  color: var(--nc-green);
}

/* Surcharge breakdown */
.pay-breakdown {
  background: var(--nc-warm-linen);
  border: 1px solid var(--nc-linen-mid);
  border-radius: var(--nc-radius-sm);
  padding: 1rem 1.25rem;
  display: none;
  flex-direction: column;
  gap: .5rem;
  margin-top: .25rem;
}

.pay-breakdown--active {
  display: flex;
}

.pay-breakdown-row {
  display: flex;
  justify-content: space-between;
  font-size: .9375rem;
  color: var(--nc-text-secondary);
}

.pay-breakdown-total {
  border-top: 1px solid var(--nc-linen-mid);
  padding-top: .5rem;
  margin-top: .25rem;
  font-weight: var(--nc-weight-medium);
  color: var(--nc-text-primary);
  font-size: 1rem;
}

/* Security note */
.pay-security-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--nc-stone);
  line-height: 1.5;
  margin-top: .5rem;
}

.pay-security-note svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Mobile */
@media (max-width: 640px) {
  .pay-body {
    padding: 3.5rem 0 5rem;
  }
}

/* ============================================================
   THANK YOU PAGE
   ============================================================ */

.thankyou-body {
  background: var(--nc-off-white);
  padding: 5rem 0 8rem;
}

.thankyou-wrap {
  max-width: 580px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.thankyou-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--nc-warm-linen);
  border: 1px solid var(--nc-linen-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nc-green);
}

.thankyou-lead {
  font-size: 1.125rem;
  color: var(--nc-text-secondary);
  line-height: 1.75;
}

.thankyou-sub {
  font-size: 1rem;
  color: var(--nc-stone);
  line-height: 1.65;
}

.thankyou-contact {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
}

.thankyou-contact-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  color: var(--nc-text-primary);
  text-decoration: none;
  transition: color var(--nc-duration-base) var(--nc-ease);
}

.thankyou-contact-item:hover { color: var(--nc-green); }

.thankyou-home {
  margin-top: .5rem;
}

@media (max-width: 640px) {
  .thankyou-body {
    padding: 3.5rem 0 6rem;
  }

  .thankyou-lead {
    font-size: 1rem;
  }
}

/* ═══════════════════════════════
   SERVICES INDEX PAGE
═══════════════════════════════ */

/* Section 2 — positioning intro (off-white) */
.services-intro {
  background: var(--nc-off-white);
  padding: 6rem 0;
}
.services-intro-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
}
.services-intro-head h2 { margin: 0; }
.services-intro-body p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.7;
  color: var(--nc-text-secondary);
  margin: 0 0 1.25rem;
}
.services-intro-body p:last-child { margin-bottom: 0; }

/* Section 3 — service disciplines (deep-slate) */
.services-disciplines {
  background: var(--nc-deep-slate);
  padding: 6rem 0;
  position: relative;
}
.services-disciplines .section-heading { color: var(--nc-text-inverse); }
.services-disciplines .section-heading em { color: var(--nc-gold-light); }
.services-disciplines .eyebrow { color: var(--nc-gold-light); }
.services-disciplines .gold-line { background: var(--nc-gold-light); }

.service-feature {
  display: block;
  background: var(--nc-charcoal);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--nc-duration-base) var(--nc-ease),
              box-shadow var(--nc-duration-base) var(--nc-ease);
  border-bottom: 2px solid transparent;
}
.service-feature:hover { border-bottom-color: var(--nc-gold-light); }
.service-feature:hover .service-feature-img picture img,
.service-feature:hover .service-feature-img img { transform: scale(1.04); }
.service-feature:hover .service-feature-link { color: var(--nc-gold-light); }

.service-feature-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--nc-deep-slate);
}
.service-feature-img picture,
.service-feature-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform var(--nc-duration-slower) var(--nc-ease);
}

.service-feature-body {
  padding: 2rem 2rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.service-feature-body .eyebrow { color: var(--nc-gold-light); margin-bottom: -.25rem; }
.service-feature-name {
  font-family: var(--nc-font-display);
  font-size: 1.625rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--nc-text-inverse);
  margin: 0;
}
.service-feature-desc {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.65;
  color: var(--nc-stone);
  margin: 0;
}
.service-feature-link {
  font-family: var(--nc-font-body);
  font-size: 11px;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-light);
  margin-top: auto;
  transition: color var(--nc-duration-base) var(--nc-ease);
}

/* Lead service (Hardscaping): full-width, image-left/body-right on desktop */
.service-feature--lead {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin-top: 3rem;
  margin-bottom: 1px;
  background: var(--nc-charcoal);
}
.service-feature--lead .service-feature-img {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}
.service-feature--lead .service-feature-body {
  padding: 3rem 3rem 3rem;
  justify-content: center;
}
.service-feature--lead .service-feature-name {
  font-size: 2.25rem;
  margin-top: .25rem;
}
.service-feature--lead .service-feature-desc {
  font-size: 1rem;
  max-width: 44ch;
}

/* Grid for the four supporting services */
.service-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--nc-charcoal-light);
}

/* Section 4 — drainage differentiator (warm-linen). Photo-left,
   copy-right callout that elevates drainage above the four sub-cards
   in Section 3 — the differentiator deserves its own moment on the
   page. Mirror flips on mobile via the media query below. */
.services-drainage {
  background: var(--nc-warm-linen);
  padding: 6rem 0;
}
.services-drainage-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  column-gap: 4.5rem;
  align-items: center;
}
.services-drainage-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--nc-deep-slate);
}
.services-drainage-img picture,
.services-drainage-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.services-drainage-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.services-drainage-body h2 {
  font-family: var(--nc-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--nc-text-primary);
  margin: 0;
}
.services-drainage-body h2 em {
  font-style: italic;
  color: var(--nc-stone-dark);
}
.services-drainage-body p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.7;
  color: var(--nc-text-secondary);
  margin: 0;
}
.services-drainage-body .btn-primary {
  margin-top: .5rem;
  align-self: flex-start;
}

/* Service overview bands — one per service on /services. Image + heading +
   text + link, alternating sides (--reverse) and backgrounds (--linen/--light).
   Generalized from the original .services-drainage band; whole band is a link. */
.service-band { display: block; padding: 5.5rem 0; text-decoration: none; }
.service-band--linen { background: var(--nc-warm-linen); }
.service-band--light { background: var(--nc-off-white); }
.service-band-inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  column-gap: 4.5rem;
  align-items: center;
}
.service-band--reverse .service-band-img { order: 2; }
.service-band-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  background: var(--nc-deep-slate);
}
.service-band-img picture,
.service-band-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.service-band:hover .service-band-img img { transform: scale(1.04); }
.service-band-body { display: flex; flex-direction: column; gap: 1.1rem; }
.service-band-body .eyebrow { color: var(--nc-gold-dark); }
.service-band-name {
  font-family: var(--nc-font-display);
  font-size: clamp(1.85rem, 3.6vw, 2.75rem);
  font-weight: var(--nc-weight-light);
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--nc-text-primary);
  margin: 0;
}
.service-band-name em { font-style: italic; color: var(--nc-stone-dark); }
.service-band-desc {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.7;
  color: var(--nc-text-secondary);
  margin: 0;
}
.service-band-link {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-dark);
  margin-top: .35rem;
  transition: color .2s ease;
}
.service-band:hover .service-band-link { color: var(--nc-green); }
@media (max-width: 980px) {
  .service-band { padding: 4rem 0; }
  .service-band-inner { grid-template-columns: 1fr; row-gap: 1.75rem; }
  .service-band-img { order: -1; aspect-ratio: 16 / 10; }
}

/* Section 5 — why us (off-white) */
.services-why {
  background: var(--nc-off-white);
  padding: 6rem 0;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  margin-top: 1rem;
}
.why-item {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nc-linen-mid);
}
.why-num {
  font-family: var(--nc-font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--nc-gold-dark);
  letter-spacing: .02em;
}
.why-title {
  font-family: var(--nc-font-display);
  font-size: 1.375rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.25;
  color: var(--nc-text-primary);
  margin: 0;
}
.why-desc {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-weight: var(--nc-weight-light);
  line-height: 1.65;
  color: var(--nc-text-secondary);
  margin: 0;
}

/* Section 6 — services CTA (warm-linen) */
.services-cta {
  background: var(--nc-warm-linen);
  padding: 6rem 0;
}

/* Responsive */
@media (max-width: 980px) {
  .services-intro-inner { grid-template-columns: 1fr; gap: 2rem; }
  .service-feature--lead { grid-template-columns: 1fr; }
  .service-feature--lead .service-feature-img { min-height: 0; aspect-ratio: 16 / 10; }
  .service-feature--lead .service-feature-body { padding: 2.25rem 2rem 2.5rem; }
  .service-feature--lead .service-feature-name { font-size: 1.875rem; }
  .services-drainage-inner { grid-template-columns: 1fr; row-gap: 2rem; }
  .why-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 720px) {
  .services-intro,
  .services-disciplines,
  .services-drainage,
  .services-why,
  .services-cta { padding: 4rem 0; }
  .service-feature-grid { grid-template-columns: 1fr; }
  .service-feature-body { padding: 1.75rem 1.5rem 2rem; }
  .service-feature--lead .service-feature-body { padding: 2rem 1.5rem 2.25rem; }
  .why-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .why-item { text-align: center; align-items: center; }
}

/* Hero rules sit in a wider 768px media query so the iPad-portrait /
   small-tablet range (721–768) gets the same mobile layout as phones.
   Without this, those widths fall through to the base full-bleed
   .hero rules and the video gets aggressively side-cropped by
   object-fit:cover on tall-narrow viewports. */
@media (max-width: 768px) {
  /* Services hero — full-width 4:5 video at the top on mobile,
     headline + sticky CTA below on dark slate.
     padding-top clears the now-solid mobile nav (~6rem tall). */
  .hero--video {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding: 6rem 0 3rem;
    overflow: visible;
  }
  .hero--video .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0 0 2rem;
    aspect-ratio: 4 / 5;
    overflow: hidden;
  }
  .hero--video.hero--cinema .hero-media { aspect-ratio: 16 / 9; }
  /* Cinema mobile: drop the desktop aspect-ratio + max-height constraints,
     trim the inherited 11rem hero-content padding-bottom (sized for the old
     full-viewport hero), and tighten the H1 so the video has the weight. */
  .hero--cinema { aspect-ratio: auto; max-height: none; height: auto; min-height: 0; }
  .hero--video.hero--cinema { padding: 6rem 0 1.5rem; }
  .hero--video.hero--cinema .hero-media { margin-bottom: 1.25rem; }
  .hero--cinema .hero-content { padding-bottom: 0; }
  .hero--cinema .hero-headline { font-size: 1.75rem; margin-bottom: 0; }
  .hero--video .hero-overlay { display: none; }
  .hero--video .hero-content {
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    max-width: 100%;
    text-align: center;
  }
  /* Homepage video hero (no cinema) — magazine "presentation" layout on
     mobile: 16:9 video frame (no crop, every shot lands as filmed), then
     a linen brand band with eyebrow + headline, then the trust strip.
     Hierarchy: motion → brand → proof. Different from desktop on purpose
     so wide-aerial source shots don't get destroyed by portrait cropping. */
  .hero--video:not(.hero--cinema) {
    height: auto;
    min-height: 100dvh; /* fill viewport so trust strip lands at the bottom */
    justify-content: flex-start;
    padding: 6rem 0 0;
    overflow: visible;
  }
  .hero--video:not(.hero--cinema) .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    margin: 0;
    aspect-ratio: 16 / 9; /* match source — uncropped on every shot */
    border-top: 1px solid var(--nc-gold-dark);
    border-bottom: 2px solid var(--nc-gold-dark);
  }
  .hero--video:not(.hero--cinema) .hero-overlay { display: none; }
  /* Brand band: linen card under the video, eyebrow + H1 + sub centered
     vertically in the band. flex:1 grows the band to fill the space
     between the video block and the absolute-positioned trust strip
     (since the section is min-height: 100dvh). Bottom padding clears
     the trust strip overlap. */
  .hero--video:not(.hero--cinema) .hero-content {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem clamp(1.5rem, 6vw, 3rem) 8rem;
    text-align: center;
    max-width: 100%;
    background: var(--nc-warm-linen);
  }
  /* Re-enable the eyebrow on mobile for the homepage (it was display:none
     for the full-bleed pattern; here it's part of the brand stack). */
  .hero--video:not(.hero--cinema) .hero-content .eyebrow {
    display: block;
    color: var(--nc-gold-dark);
    margin-bottom: 1rem;
  }
  .hero--video:not(.hero--cinema) .hero-headline {
    font-size: clamp(1.875rem, 7vw, 2.5rem);
    color: var(--nc-text-primary);
    margin-bottom: 0;
  }
  .hero--video:not(.hero--cinema) .hero-headline em {
    color: var(--nc-gold-dark);
  }
  /* Bridge sentence between H1 and trust strip — connects identity →
     statement → why-them → proof. Kevin's voice, light Jost on linen. */
  .hero--video:not(.hero--cinema) .hero-sub {
    display: block;
    font-size: .9375rem;
    font-weight: var(--nc-weight-light);
    color: var(--nc-text-secondary);
    line-height: 1.55;
    max-width: 22rem;
    margin: 1.25rem auto 0;
  }
  /* Hide the desktop two-button row in the linen brand band — at this
     width the single slate "Speak with Kevin" CTA below is the entire
     hero call-to-action (the green "Start Your Project" lives in the
     sticky .mobile-cta-bar). Without this, 721–768 shows both. */
  .hero--video:not(.hero--cinema) .hero-btns { display: none; }

  /* Mobile-only "Speak with Kevin" CTA — restrained slate button on the
     linen brand band, sits between the sub-paragraph and the trust strip.
     Distinct framing from the sticky CTA bar so it doesn't feel duplicate. */
  .hero--video:not(.hero--cinema) .hero-cta-mobile {
    display: inline-block;
    align-self: center;
    margin-top: 1.75rem;
  }
}

/* ═══════════════════════════════
   ABOUT PAGE (inner)
═══════════════════════════════ */
.about-section { padding: 5rem 0; }
.about-section--linen { background: var(--nc-warm-linen); }
.about-section--light { background: var(--nc-off-white); }
.about-section--dark {
  background: var(--nc-deep-slate);
  color: var(--nc-text-inverse);
}
.about-section--dark .eyebrow { color: var(--nc-gold-light); }
.about-section--dark .gold-line { background: var(--nc-gold-light); }

/* Centered editorial column for the about page — header, prose, and
   pullquotes share the same axis. Section backgrounds still go full
   viewport width; this just centers the content within the container. */
.about-section .section-header {
  margin: 0 auto 2.25rem;
  max-width: 760px;
  text-align: center;
}
.about-section .section-header .gold-line { margin-inline: auto; }

.about-prose {
  max-width: 760px;
  margin: 0 auto;
}

/* Section 1 split layout — prose left, photo right on desktop; stacks on mobile.
   Header above stays centered; this grid sits below it. Photo sized smaller
   than text column so the section doesn't lean photo-heavy. */
.about-origin-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}
.about-origin-grid .about-prose {
  max-width: none;
  margin: 0;
}
.about-origin-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(26,26,22,.18);
}
@media (max-width: 768px) {
  .about-origin-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 560px;
  }
}
.about-prose p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 0 0 1.25rem;
}
.about-prose p:last-child { margin-bottom: 0; }
.about-prose p strong { font-weight: var(--nc-weight-medium); color: var(--nc-text-primary); }

.about-pullquote {
  max-width: 760px;
  margin: 2.75rem auto;
  padding: 0 0 0 1.5rem;
  border-left: 3px solid var(--nc-gold-dark);
}
.about-pullquote p {
  font-family: var(--nc-font-display);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-style: italic;
  font-weight: var(--nc-weight-light);
  line-height: 1.4;
  color: var(--nc-text-primary);
  margin: 0;
}
.about-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-medium);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone);
}
/* Longer-form pull-quote (multi-sentence story). Smaller font so a
   60-word quote reads like an editorial blockquote, not a slogan. */
.about-pullquote--long p {
  font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
  line-height: 1.55;
}

/* Dark section quote card (Section 3) */
.about-quote-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.about-quote-card blockquote {
  margin: 0 0 1.5rem;
}
.about-quote-card blockquote p {
  font-family: var(--nc-font-display);
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-style: italic;
  font-weight: var(--nc-weight-light);
  line-height: 1.45;
  color: var(--nc-text-inverse);
  margin: 0;
}
.about-quote-card cite {
  display: block;
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-medium);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-gold-light);
  margin: 1rem 0 1.5rem;
}
.about-quote-rating {
  font-family: var(--nc-font-body);
  font-size: .75rem;
  font-weight: var(--nc-weight-light);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(250,250,247,.55);
}
.about-quote-rating .stars {
  color: var(--nc-gold-light);
  letter-spacing: .15em;
  margin-right: .5em;
}

/* Section 5 — close CTA */
.about-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.about-cta .gold-line { margin-inline: auto; }
.about-cta p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 1.25rem 0 2rem;
}

@media (max-width: 768px) {
  .about-section { padding: 3.5rem 0; }
  .about-pullquote { margin: 2rem 0; padding-left: 1rem; }
}

/* ═══════════════════════════════
   /OUR-WORK/ FEATURE SECTIONS
   Long-scroll layout where each project gets its own section.
   Variants: default magazine spread, --reverse mirrors it,
   --cinematic for full-bleed, --strip for photo-row layouts,
   --compact for a smaller spread (used for the last/smallest project).
═══════════════════════════════ */
.work-feature {
  padding: 5rem 0;
}
.work-feature--linen { background: var(--nc-warm-linen); }
.work-feature--light { background: var(--nc-off-white); }

.work-feature-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.work-feature__media picture,
.work-feature__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(26,26,22,.18);
}

.work-feature__copy .gold-line { margin-left: 0; }
.work-feature__copy .section-heading {
  margin: 1rem 0 .5rem;
}
.work-feature__meta {
  display: block;
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone);
  margin: 0 0 1.25rem;
}
.work-feature__copy p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 0 0 1.75rem;
}

/* Mirrored magazine spread (photo right, copy left on desktop) */
@media (min-width: 901px) {
  .work-feature--reverse .work-feature__media { order: 2; }
  .work-feature--reverse .work-feature__copy { order: 1; }
}

@media (max-width: 900px) {
  .work-feature {
    padding: 3.5rem 0;
  }
  .work-feature-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Cinematic full-bleed (Garnet Valley) — photo fills the section as
   background, copy block sits over a dark scrim at the bottom. */
.work-feature--cinematic {
  position: relative;
  padding: 0;
  min-height: min(75vh, 680px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.work-feature--cinematic .work-feature__bg-media {
  position: absolute;
  inset: 0;
}
.work-feature--cinematic .work-feature__bg-media picture,
.work-feature--cinematic .work-feature__bg-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.work-feature--cinematic .work-feature__bg-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,26,22,.82) 0%,
    rgba(26,26,22,.5) 35%,
    transparent 70%
  );
}
.work-feature--cinematic .container {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.work-feature--cinematic .work-feature__copy {
  max-width: 720px;
}
.work-feature--cinematic .work-feature__copy .eyebrow {
  color: var(--nc-gold-light);
}
.work-feature--cinematic .work-feature__copy .gold-line {
  background: var(--nc-gold-light);
}
.work-feature--cinematic .work-feature__copy .section-heading {
  color: var(--nc-text-inverse);
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.work-feature--cinematic .work-feature__copy .section-heading em {
  color: var(--nc-gold-light);
}
.work-feature--cinematic .work-feature__copy .work-feature__meta {
  color: rgba(250,250,247,.78);
}
.work-feature--cinematic .work-feature__copy p {
  color: rgba(250,250,247,.88);
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Photo strip variant (Chadds Ford) — three photos in a row, copy above */
.work-feature--strip .work-feature__strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin: 2.75rem auto 0;
  max-width: 1200px;
}
.work-feature--strip .work-feature__strip picture,
.work-feature--strip .work-feature__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 2px;
}
.work-feature--strip .work-feature__copy {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.work-feature--strip .work-feature__copy .gold-line {
  margin-inline: auto;
}

@media (max-width: 700px) {
  .work-feature--strip .work-feature__strip {
    grid-template-columns: 1fr;
    gap: .75rem;
  }
}

/* Compact spread variant (Wilmington) — smaller, lighter, signals
   "this is a smaller-scope project but built to the same standard." */
.work-feature--compact {
  padding: 4rem 0;
}
.work-feature--compact .work-feature-grid {
  max-width: 1000px;
  gap: 3rem;
}
.work-feature--compact .work-feature__copy .section-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.work-feature--compact .work-feature__copy p {
  font-size: 1rem;
}

/* ═══════════════════════════════
   /SERVICES/{slug}/ pages
   Six-section canonical structure used by all five service pages.
═══════════════════════════════ */
.svc-section { padding: 5rem 0; }
.svc-section--linen { background: var(--nc-warm-linen); }
.svc-section--light { background: var(--nc-off-white); }
.svc-section--dark {
  background: var(--nc-deep-slate);
  color: var(--nc-text-inverse);
}
.svc-section--dark .eyebrow { color: var(--nc-gold-light); }
.svc-section--dark .gold-line { background: var(--nc-gold-light); }
.svc-section--dark .section-heading { color: var(--nc-text-inverse); }

.svc-section .section-header {
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 760px;
}
.svc-section .section-header .gold-line { margin-inline: auto; }

.svc-prose {
  max-width: 760px;
  margin: 0 auto;
}
.svc-prose p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 0 0 1.25rem;
}
.svc-prose p:last-child { margin-bottom: 0; }
.svc-section--dark .svc-prose p { color: rgba(250, 250, 247, .82); }

/* Service-page split — prose beside a photo, alternating direction via
   --reverse. Header above stays centered; this grid sits below it. Mirrors
   the .about-origin-grid pattern. Stacks photo-above-text on mobile. */
.svc-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3.5rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.svc-split .svc-prose { max-width: none; margin: 0; }
.svc-split__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(26, 26, 22, .18);
  /* Cap tall (portrait) photos so a split row doesn't tower over its text;
     landscape/square photos fall under this and show in full. */
  max-height: 600px;
  object-fit: cover;
}
.svc-split--reverse .svc-split__media { order: -1; }
@media (max-width: 768px) {
  .svc-split { grid-template-columns: 1fr; gap: 1.75rem; max-width: 600px; }
  .svc-split__media { order: -1; }
  .svc-split__media img { max-height: 70vh; }
}

/* Project cross-link grid (2-3 cards per row, uses .project-card) */
.svc-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  max-width: 1160px;
  margin: 3rem auto 0;
}

/* What's included scope list */
.svc-scope-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem 2.5rem;
  max-width: 760px;
  margin: 1rem auto 0;
  padding: 0;
}
.svc-scope-list li {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  line-height: 1.5;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  padding-left: 1.25rem;
  position: relative;
}
.svc-scope-list li::before {
  content: '';
  position: absolute;
  left: 0; top: .55em;
  width: 5px; height: 5px;
  background: var(--nc-gold-dark);
  border-radius: 50%;
}

/* "How we solve it" symptom → solution matrix (drainage page).
   Card grid so these read as a deliberate reference set, visually distinct
   from the FAQ Q&A lower on the page. */
.svc-solutions {
  max-width: 920px;
  margin: 2.5rem auto 0;
}
.svc-solutions-intro {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  font-style: italic;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  text-align: center;
  margin: 0 0 1.75rem;
}
.svc-solutions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.svc-solution-card {
  background: #fff;
  border: .5px solid var(--nc-linen-mid);
  border-top: 3px solid var(--nc-gold-dark);
  padding: 1.5rem 1.625rem 1.625rem;
}
.svc-solution-card h3 {
  font-family: var(--nc-font-body);
  font-size: 1rem;
  font-weight: var(--nc-weight-medium);
  line-height: 1.3;
  color: var(--nc-text-primary);
  margin: 0 0 .5rem;
}
.svc-solution-card p {
  font-family: var(--nc-font-body);
  font-size: .9375rem;
  line-height: 1.6;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 0;
}

/* Client quote section (single review pull, centered) */
.svc-quote {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.svc-quote blockquote {
  margin: 0 0 1.5rem;
}
.svc-quote blockquote p {
  font-family: var(--nc-font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-style: italic;
  line-height: 1.55;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-primary);
  margin: 0;
}
.svc-quote cite {
  display: block;
  font-family: var(--nc-font-body);
  font-size: .8125rem;
  font-weight: var(--nc-weight-medium);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nc-stone);
}

/* Close CTA */
.svc-cta {
  text-align: center;
  max-width: 640px;
  margin: 3.5rem auto 0;
}
.svc-cta p {
  font-family: var(--nc-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: var(--nc-weight-light);
  color: var(--nc-text-secondary);
  margin: 0 0 1.75rem;
}

@media (max-width: 768px) {
  .svc-section { padding: 3.5rem 0; }
  .svc-solutions-grid { grid-template-columns: 1fr; }
}

/* ── Contact form: Resend wiring states ───────────────────────── */
.form-turnstile {
  margin: 0 0 1.25rem;
  display: flex;
  justify-content: center;
}

.form-error {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  border-left: 3px solid #b4452f;
  background: rgba(180, 69, 47, .08);
  color: #7a2a1c;
  font-family: "Jost", sans-serif;
  font-size: .875rem;
  font-weight: 400;
}

.contact-success {
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: var(--nc-off-white);
  border: .5px solid var(--nc-linen-mid);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(26,26,22,.05), 0 30px 60px -28px rgba(26,26,22,.28);
}
.contact-success-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--nc-green);
  color: #fff;
  font-size: 1.75rem;
  line-height: 56px;
}
.contact-success-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--nc-text-primary);
  margin: 0 0 .5rem;
}
.contact-success-text {
  font-family: "Jost", sans-serif;
  font-size: .9375rem;
  color: var(--nc-text-secondary);
  margin: 0;
}
.contact-success-text a {
  color: var(--nc-gold-dark);
  text-decoration: underline;
}



/* ══════════════════════════════════════
   LEGAL PAGES (Privacy, Terms)
══════════════════════════════════════ */
.legal-section {
  background: var(--nc-off-white);
  padding: 4rem 0 6rem;
}
.legal-content {
  max-width: 720px;
  font-family: var(--nc-font-body);
  font-weight: 300;
  font-size: var(--nc-text-base);
  line-height: var(--nc-leading-loose);
  color: var(--nc-text-secondary);
}
.legal-content p { margin: 0 0 1.25rem; }
.legal-content a {
  color: var(--nc-gold-dark);
  text-decoration: underline;
}
.legal-updated {
  font-family: var(--nc-font-body);
  font-size: var(--nc-text-sm);
  color: var(--nc-text-muted);
  margin-bottom: 2.5rem !important;
}
.legal-content h2 {
  font-family: var(--nc-font-display);
  font-weight: 400;
  font-size: var(--nc-text-2xl);
  color: var(--nc-text-primary);
  margin: 2.75rem 0 1rem;
}
.legal-content h3 {
  font-family: var(--nc-font-body);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--nc-text-primary);
  margin: 1.75rem 0 .5rem;
}
.legal-content ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.legal-content li { margin: 0 0 .5rem; }
.legal-contact {
  line-height: 1.9;
  margin-top: 1.25rem;
}

/* Service Area standalone page — 2-column layout via explicit grid areas.
   Reuses the .area-map card + .legal-content typography. .area-page-copy is
   display:contents so .area-page-head / .area-page-body are direct grid items
   placed by name. Desktop: copy (head over body) in the left column, map in
   the right. Mobile: a single column ordered head -> map -> body. Placement is
   explicit (grid-template-areas), so it does NOT depend on source order or the
   global `.area-map { order: 2 }` rule, and there is no sticky/overlap. */
.area-page-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  grid-template-areas:
    "head map"
    "body map";
  column-gap: 4rem;
  row-gap: 1.5rem;
  align-items: start;
}
.area-page-copy { display: contents; }
.area-page-head { grid-area: head; }
.area-page-body { grid-area: body; }
.area-page-grid .area-map {
  grid-area: map;
  align-self: start;
  margin-inline: 0;
}
@media (max-width: 768px) {
  .area-page-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "map"
      "body";
    row-gap: 2rem;
  }
  .area-page-grid .area-map { margin-inline: auto; }
}