/* ============================================
   LEED CONSTRUCTION — DESIGN SYSTEM
   ============================================ */

:root {
  /* Palette */
  --color-forest-900: #0a1f15;
  --color-forest-800: #0f2e1f;
  --color-forest-700: #163d2a;
  --color-forest-600: #1b5e3f;
  --color-forest-500: #2d7a55;
  --color-forest-400: #4d9b75;
  --color-moss: #8aa896;

  --color-cream-50: #fbf9f3;
  --color-cream-100: #f5f1e8;
  --color-cream-200: #ebe5d4;
  --color-bone: #e8e2d0;

  --color-ink-900: #0c0c0a;
  --color-ink-700: #2a2a26;
  --color-ink-500: #5a5a52;
  --color-ink-300: #9a9a90;
  --color-ink-100: #d8d8d0;

  --color-gold: #b89b5e;

  /* Type */
  --font-display: 'Instrument Serif', 'Cormorant Garamond', 'Georgia', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  /* Layout */
  --container: 1440px;
  --container-narrow: 1100px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 250ms;
  --dur-base: 500ms;
  --dur-slow: 900ms;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-ink-900);
  background: var(--color-cream-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }

/* Keyboard users can jump past the nav; hidden until focused. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--color-cream-50);
  color: var(--color-forest-800);
  font-size: 0.875rem;
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus { transform: none; }
main:focus { outline: none; }

::selection { background: var(--color-forest-800); color: var(--color-cream-50); }

/* ============================================
   TYPOGRAPHY
   ============================================ */
.display-xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 9vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.display-lg {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}
.display-md {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.display-sm {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.italic { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-600);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.eyebrow.on-dark { color: var(--color-moss); }

.lede {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  line-height: 1.55;
  color: var(--color-ink-700);
  font-weight: 300;
  max-width: 60ch;
}

/* ============================================
   LAYOUT
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.25rem;
  transition: background-color var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out),
              padding var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  color: var(--color-cream-50);
}
.nav.is-scrolled {
  background: rgba(10, 31, 21, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding-block: 0.875rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.nav.is-light { color: var(--color-ink-900); }
.nav.is-light.is-scrolled {
  background: rgba(251, 249, 243, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--color-ink-900);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0;
  font-weight: 500;
}
.brand-name { font-style: italic; }
.brand-sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-top: 2px;
  font-style: normal;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  font-size: 0.875rem;
  font-weight: 400;
}
.nav-links a,
.nav-dropdown-trigger {
  position: relative;
  padding-block: 0.5rem;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.nav-links a:hover,
.nav-dropdown-trigger:hover { opacity: 1; }
.nav-links a::after,
.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-links a:hover::after,
.nav-links a.is-active::after,
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger[aria-expanded="true"]::after,
.nav-dropdown-wrap.is-active .nav-dropdown-trigger::after { transform: scaleX(1); }
.nav-links a.is-active,
.nav-dropdown-wrap.is-active .nav-dropdown-trigger { opacity: 1; }

/* Dropdown */
.nav-dropdown-wrap {
  position: relative;
}
.nav-dropdown-trigger {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.nav-dropdown-trigger .nav-caret {
  transition: transform var(--dur-fast) var(--ease-out);
}
.nav-dropdown-trigger[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.625rem);
  right: 0;
  min-width: 220px;
  background: rgba(10, 31, 21, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.5rem;
  z-index: 110;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility var(--dur-fast);
}
.nav-dropdown-wrap:hover .nav-dropdown,
.nav-dropdown-wrap:focus-within .nav-dropdown,
.nav-dropdown-trigger[aria-expanded="true"] + .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-cream-50);
  opacity: 0.85;
  border-radius: 4px;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.06);
}
.nav-dropdown a.is-active {
  opacity: 1;
  background: rgba(45, 122, 85, 0.25);
}
.nav.is-light .nav-dropdown {
  background: rgba(251, 249, 243, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
}
.nav.is-light .nav-dropdown a {
  color: var(--color-ink-900);
}
.nav.is-light .nav-dropdown a:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* Services dropdown: anchor to the left of its trigger + section divider */
.nav-dropdown-left { right: auto; left: 0; }
.nav-dropdown-sep {
  height: 1px;
  align-self: stretch;
  margin: 0.375rem 0.5rem;
  background: rgba(255, 255, 255, 0.1);
}
.nav.is-light .nav-dropdown-sep { background: rgba(0, 0, 0, 0.1); }
/* Rotate the caret on hover/focus, not just on click-expanded */
.nav-dropdown-wrap:hover .nav-caret,
.nav-dropdown-wrap:focus-within .nav-caret { transform: rotate(180deg); }
/* Keep the fixed nav from covering a section heading on in-page jumps */
.section[id] { scroll-margin-top: 100px; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  z-index: 110;
}
.nav-toggle span {
  position: absolute;
  left: 10px; right: 10px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 26px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    /* The menu is taller than a small phone once the Services group is
       expanded, so it scrolls from the top rather than centring and
       overflowing off both ends. Centred only when there is room to spare. */
    justify-content: flex-start;
    align-items: center;
    padding: 6rem var(--gutter) 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--color-forest-900);
    color: var(--color-cream-50);
    gap: 1.5rem;
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 400;
    transform: translateY(-100%);
    /* Closed, the panel must not paint at all: without this its overflow
       spilled below the translated panel and printed menu text over the hero. */
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-in-out),
                visibility var(--dur-base);
  }
  .nav-links.is-open {
    transform: translateY(0);
    visibility: visible;
  }
  /* Tall enough to breathe: centre the menu when the viewport allows it.
     "safe" is load-bearing — plain `center` on a scrollable flex container
     pushes the first item above the scrollport where it cannot be reached,
     which is the bug this block is here to avoid. A browser that does not
     understand `safe center` drops the declaration and keeps flex-start. */
  @media (min-height: 720px) {
    .nav-links { justify-content: safe center; padding-block: 4rem; }
  }
  /* Mobile dropdown — flatten into the menu */
  .nav-dropdown-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .nav-dropdown-trigger .nav-caret { display: none; }
  .nav-dropdown {
    position: static;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    align-items: center;
  }
  .nav-dropdown a {
    font-family: var(--font-display);
    font-size: 1.25rem;
    opacity: 0.7;
    padding: 0.25rem 0.75rem;
  }
  .nav-dropdown a:hover { background: transparent; opacity: 1; }
  .nav-dropdown-sep { display: none; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: var(--color-forest-800);
  color: var(--color-cream-50);
}
.btn-primary:hover { background: var(--color-forest-700); }
.btn-ghost {
  border: 1px solid currentColor;
  color: inherit;
}
.btn-ghost:hover {
  background: var(--color-forest-800);
  color: var(--color-cream-50);
  border-color: var(--color-forest-800);
}
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-block: 0.5rem;
  position: relative;
}
.btn-link .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn-link:hover .arrow { transform: translateX(0.5rem); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-cream-50);
  overflow: hidden;
  padding-block: 8rem 3rem;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero-bg-video,
.hero-bg-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}
.hero-bg-poster {
  animation: kenBurns 28s ease-in-out infinite alternate;
  will-change: transform;
}
/* Same contract as the interior page headers: a visitor who has asked for
   reduced motion gets the still poster, not a looping background video. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-video { display: none; }
  .hero-bg-poster { will-change: auto; }
}
@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.08) translate(-1.2%, -0.8%); }
}
.hero-bg-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 70% 30%, rgba(45, 122, 85, 0.55), transparent 60%),
    radial-gradient(900px 600px at 20% 80%, rgba(184, 155, 94, 0.22), transparent 65%),
    linear-gradient(180deg, rgba(6, 23, 18, 0.55) 0%, rgba(10, 35, 23, 0.78) 40%, rgba(13, 42, 28, 0.92) 100%);
  pointer-events: none;
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.06;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
/* Particle / dust overlay — slow drifting specks */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 15% 22%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 14%, rgba(255,255,255,0.15), transparent 50%),
    radial-gradient(2px 2px at 42% 88%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(1px 1px at 88% 68%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(2px 2px at 8% 65%, rgba(255,255,255,0.12), transparent 50%),
    radial-gradient(1.5px 1.5px at 62% 38%, rgba(255,255,255,0.16), transparent 50%);
  animation: particleDrift 24s linear infinite;
  opacity: 0.6;
}
@keyframes particleDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(-40px); }
}
.hero-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 100%;
}
.hero-title { max-width: 18ch; }
.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 2rem;
  margin-top: 3rem;
}
.hero-meta-item .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  font-weight: 400;
  color: var(--color-cream-50);
  display: block;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.hero-meta-item .num em {
  font-style: italic;
  color: var(--color-forest-400);
}
.hero-meta-item .num.counting { opacity: 0.92; }

/* ============================================
   CLIENT MARQUEE
   ============================================ */
.marquee {
  background: var(--color-forest-900);
  color: var(--color-cream-100);
  padding: 1.5rem 0;
  overflow: hidden;
  position: relative;
  border-block: 1px solid rgba(255, 255, 255, 0.06);
}
.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12vw;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-forest-900), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-forest-900), transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.875rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--color-cream-50);
  opacity: 0.85;
}
.marquee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-forest-400);
  display: inline-block;
  flex-shrink: 0;
}
.hero-meta-item .lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-moss);
}

.hero-scroll {
  position: absolute;
  bottom: 2rem;
  right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-moss);
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hero-scroll::after {
  content: '';
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, var(--color-moss), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* ============================================
   PAGE HEADER (interior pages)
   ============================================ */
.page-header {
  background: var(--color-forest-900);
  color: var(--color-cream-50);
  padding: clamp(8rem, 11vw, 9.5rem) 0 clamp(3.5rem, 5vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 600px at 75% 40%, rgba(45, 122, 85, 0.28), transparent 60%);
  pointer-events: none;
}
.page-header-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: end;
}
@media (max-width: 880px) {
  .page-header-inner { grid-template-columns: 1fr; }
}
.page-header h1 { max-width: 12ch; }
.page-header .lede { color: var(--color-ink-100); }

/* Page-header background image (used on residential.html). The image is
   layered under the existing radial tint and darkened so the headline stays
   readable on top. */
.page-header { isolation: isolate; }
.page-header-img,
.page-header-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.4;
}
/* Video sits above the still poster — once playback starts it fades in,
   so if the file is missing the static image just keeps showing. */
.page-header-video {
  opacity: 0;
  transition: opacity 800ms var(--ease-out);
}
.page-header-video.is-playing { opacity: 0.45; }
/* Once the footage is on screen, fade the still out so the two don't show
   through each other; it stays visible as the fallback until then. */
.page-header-img { transition: opacity 800ms var(--ease-out); }
.page-header.has-video-playing .page-header-img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .page-header-video { display: none; }
}
.page-header.has-image::before,
.page-header.has-video-playing::before {
  background:
    linear-gradient(180deg, rgba(10, 31, 21, 0.55) 0%, rgba(10, 31, 21, 0.78) 100%),
    radial-gradient(900px 600px at 75% 40%, rgba(45, 122, 85, 0.18), transparent 60%);
}

/* Section-level imagery used on the Residential page. */
.section-image {
  position: relative;
  margin: 3rem 0 0;
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.section-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.6s var(--ease-out);
}
.section-image:hover img { transform: scale(1.02); }
.section-image figcaption {

  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  color: var(--color-cream-50);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.45rem 0.75rem;
  background: rgba(10, 31, 21, 0.55);
  backdrop-filter: blur(8px);
  border-radius: 3px;
}

.image-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}
.image-duo .section-image { margin: 0; aspect-ratio: 4 / 5; }
@media (max-width: 720px) {
  .image-duo { grid-template-columns: 1fr; }
}
/* Before / after pairing. The source photographs are 4:3 landscape, so the
   portrait crop the default duo uses would cut the roofline off exactly where
   the restoration work is. Same aspect for both frames keeps the two states of
   one elevation directly comparable, which is the whole point of the pair. */
.image-duo-wide .section-image { aspect-ratio: 4 / 3; }
.image-duo-wide .section-image img { object-position: center 40%; }

.image-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}
.image-strip .section-image { margin: 0; aspect-ratio: 3 / 4; }
@media (max-width: 880px) {
  .image-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Stat band — big animated figures on a dark section (Water / Historic pages) */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2.5rem;
  margin-top: 3.5rem;
}
.stat-band .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-cream-50);
  display: block;
}
.stat-band .stat-num em {
  font-style: italic;
  color: var(--color-forest-400);
}
.stat-band .stat-label {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-100);
  line-height: 1.5;
}

.crumb {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-moss);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.75rem;
}
.crumb span { opacity: 0.6; }

/* ============================================
   SECTIONS
   ============================================ */
.section-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4rem;
}
.section-header .copy { max-width: 50ch; }
.section-header .lede { margin-top: 1.5rem; }
@media (max-width: 880px) {
  .section-header { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ============================================
   CAPABILITIES (Services)
   ============================================ */
.capabilities {
  background: var(--color-cream-50);
  position: relative;
}
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: clamp(1.5rem, 2.6vw, 2.5rem);
  row-gap: 1rem;
}
@media (max-width: 1180px) {
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .capabilities-grid { grid-template-columns: 1fr; row-gap: 0; }
}
.capability {
  padding: 3rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 700px) {
  .capability { padding: 2.5rem 0; }
}
.capability-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-forest-600);
  letter-spacing: 0.18em;
  margin-bottom: 2rem;
  display: block;
}
.capability h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}
.capability h3 em {
  font-style: italic;
  color: var(--color-forest-700);
}
.capability p {
  color: var(--color-ink-500);
  font-size: 0.975rem;
  max-width: 38ch;
  margin-bottom: 0;
}
.capability-link { margin-top: 1.25rem; }
.capability-tags {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.capability-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--color-ink-100);
  border-radius: 999px;
  color: var(--color-ink-500);
}

/* ============================================
   FEATURED WORK
   ============================================ */
.work-feature {
  background: var(--color-cream-100);
  position: relative;
}
.work-list {
  display: flex;
  flex-direction: column;
}
.work-row {
  display: grid;
  grid-template-columns: 0.5fr 2fr 1fr 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--color-ink-100);
  position: relative;
  transition: padding var(--dur-base) var(--ease-out);
}
.work-row:last-child { border-bottom: 1px solid var(--color-ink-100); }
.work-row:hover { padding-left: 1.25rem; padding-right: 1.25rem; }
.work-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-cream-50);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.work-row:hover::after { opacity: 1; }
@media (max-width: 880px) {
  .work-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
}
.work-row .idx {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-500);
  letter-spacing: 0.1em;
}
.work-row .title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.work-row .meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-500);
}
.work-row .arrow {
  font-size: 1.5rem;
  color: var(--color-forest-700);
  transition: transform var(--dur-base) var(--ease-out);
}
.work-row:hover .arrow { transform: translateX(0.5rem); }

/* ============================================
   APPROACH / EDITORIAL
   ============================================ */
.approach {
  background: var(--color-forest-900);
  color: var(--color-cream-50);
  position: relative;
  overflow: hidden;
  /* clip, not hidden, where supported: it trims the glow below without
     making the section a scroll container, which would stop the sticky
     statement column from sticking. */
  overflow: clip;
}
.approach::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 80%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(45, 122, 85, 0.18), transparent 70%);
  pointer-events: none;
}
.approach-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  position: relative;
}
/* The statement holds its place while the five principles scroll past it. */
@media (min-width: 881px) {
  .approach-inner > :first-child { position: sticky; top: 8rem; }
}
@media (max-width: 880px) {
  .approach-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}
.approach .lede { color: var(--color-ink-100); }
.principles { display: grid; gap: 0; }
.principle {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.principle:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.principle-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-forest-400);
  letter-spacing: 0.15em;
  padding-top: 0.45rem;
}
.principle h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.015em;
}
.principle p {
  color: var(--color-ink-100);
  font-size: 0.95rem;
  max-width: 42ch;
}

/* ============================================
   CTA
   ============================================ */
.cta {
  background: var(--color-cream-100);
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  text-align: center;
}
.cta h2 {
  max-width: 18ch;
  margin: 0 auto 2rem;
}
.cta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--color-forest-900);
  color: var(--color-ink-100);
  padding: 5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 4rem;
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
/* Phone footer: the brand blurb takes the full row, and the two link columns
   below it may shrink, so the long estimating email wraps instead of pushing
   the page 10px past the viewport. */
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
.footer-grid a, .footer-grid li { overflow-wrap: anywhere; }
.footer h5 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-moss);
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.footer ul { display: flex; flex-direction: column; gap: 0.625rem; }
.footer a { font-size: 0.95rem; opacity: 0.8; transition: opacity var(--dur-fast); }
.footer a:hover { opacity: 1; color: var(--color-cream-50); }
.footer-brand { font-family: var(--font-display); font-size: 2.25rem; font-weight: 400; letter-spacing: -0.02em; color: var(--color-cream-50); margin-bottom: 1rem; line-height: 1; }
.footer-brand em { font-style: italic; }
.footer-tag { font-size: 0.95rem; max-width: 38ch; opacity: 0.7; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-300);
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================
   PROJECT CARDS (Projects page)
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-ink-100);
}
.filter-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-500);
  margin-right: 1rem;
}
.filter-btn {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.625rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--color-ink-100);
  color: var(--color-ink-700);
  transition: all var(--dur-fast) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-btn:hover { border-color: var(--color-forest-700); color: var(--color-forest-800); }
.filter-btn.is-active {
  background: var(--color-forest-800);
  color: var(--color-cream-50);
  border-color: var(--color-forest-800);
}
.filter-btn .count {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  opacity: 0.7;
}
.filter-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 2rem;
}
@media (max-width: 1180px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}
.project-card {
  display: block;
  position: relative;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.project-card.is-hidden {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.project-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 1.5rem;
  background: var(--color-forest-900);
}
.project-art {
  position: absolute;
  inset: 0;
  transition: transform 1200ms var(--ease-out);
}
.project-card:hover .project-art { transform: scale(1.04); }
/* The card photo sits under the art panel; the panel is only a stand-in for a
   photograph that has not loaded, so over a real one it is not painted at all
   — same contract as .modal-hero and .gallery-tile. */
.project-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-thumb > .project-art { display: none; }
.project-thumb .project-art::before,
.project-thumb .project-art::after { content: none; }
.project-thumb.media-missing .project-art::before,
.project-thumb.media-missing .project-art::after { content: ''; }
/* ---- Footage behind a card cover -----------------------------------------
   The still photograph is the cover; the clip sits over it and only fades in
   once it is genuinely playing, so a card whose video is missing, blocked or
   still downloading simply stays a photograph. */
.thumb-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.thumb-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .thumb-video { display: none; }
}
/* Tells a visitor there is something to hover for. */
.project-video-cue {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-cream-50);
  background: rgba(10, 31, 21, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.project-card:hover .project-video-cue {
  color: var(--color-forest-900);
  background: var(--color-cream-50);
}
/* A cover whose clip failed keeps the photograph and drops the promise. */
.project-thumb.video-missing .project-video-cue { display: none; }
.project-thumb.video-missing > .thumb-video { display: none; }
.project-cat {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-cream-50);
  background: rgba(10, 31, 21, 0.75);
  backdrop-filter: blur(8px);
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
}
.project-info {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
}
.project-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0.25rem;
}
.project-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-500);
}
.project-year {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-ink-500);
  letter-spacing: 0.05em;
}
.project-desc {
  margin-top: 1rem;
  color: var(--color-ink-500);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 56ch;
}

/* ============================================
   PROJECT CARDS (compact, modal trigger)
   ============================================ */
.project-trigger {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}
.project-trigger:focus-visible {
  outline: 2px solid var(--color-forest-700);
  outline-offset: 6px;
  border-radius: 6px;
}
.project-card .project-title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.project-trigger:hover .project-title {
  color: var(--color-forest-700);
}
.project-cue {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-cream-50);
  background: rgba(10, 31, 21, 0.78);
  backdrop-filter: blur(8px);
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.project-cue .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.project-trigger:hover .project-cue,
.project-trigger:focus-visible .project-cue {
  opacity: 1;
  transform: translateY(0);
}
.project-trigger:hover .project-cue .arrow {
  transform: translateX(0.25rem);
}

/* ============================================
   MODAL
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal.is-open {
  visibility: visible;
  opacity: 1;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 22, 16, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
}
.modal-panel {
  position: relative;
  width: min(1080px, 100%);
  margin: auto;
  background: var(--color-cream-50);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
  transform: translateY(28px) scale(0.985);
  opacity: 0;
  transition: transform 600ms var(--ease-out), opacity 500ms var(--ease-out);
  transition-delay: 80ms;
}
.modal.is-open .modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(251, 249, 243, 0.92);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  color: var(--color-ink-900);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.modal-close:hover {
  background: var(--color-forest-800);
  color: var(--color-cream-50);
  transform: rotate(90deg);
}
.modal-content { display: block; }
.modal-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-forest-900);
  overflow: hidden;
}
.modal-hero > div,
.modal-hero > img,
.modal-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal-hero > img,
.modal-hero > video {
  z-index: 1;
}
.modal-hero > .project-art {
  z-index: 2;
  display: none;
}
/* Suppress the decorative pattern overlays on .project-art in the frames that
   carry photography; they belong to the standalone placeholder panels. */
.modal-hero .project-art::before,
.modal-hero .project-art::after,
.gallery-tile .project-art::before,
.gallery-tile .project-art::after { content: none; }

/* No photo behind the art (file not added yet, or a 404): the frame would be an
   empty dark panel, so drop the broken image, paint the branded panel and put
   its texture back. Marked by JS on the image's error event. */
.media-missing > img,
.media-missing > video { display: none; }
.media-missing .gallery-play { display: none; }
/* A section figure whose photograph has not been fetched yet keeps an on-brand
   panel instead of collapsing to an empty frame. */
.section-image.media-missing {
  background: linear-gradient(150deg, #0d2a1c 0%, #1c3d2e 100%);
}
/* Qualified with each frame class on purpose: the per-frame rules
   (.gallery-tile > .project-art and friends) carry the same specificity and are
   declared later, so an unqualified selector here loses the tie and the panel
   stays hidden over nothing. */
.project-thumb.media-missing > .project-art,
.modal-hero.media-missing > .project-art,
.gallery-tile.media-missing > .project-art,
.section-image.media-missing > .project-art {
  display: block;
  mix-blend-mode: normal;
  opacity: 1;
}
.modal-hero.media-missing .project-art::before,
.modal-hero.media-missing .project-art::after,
.gallery-tile.media-missing .project-art::before,
.gallery-tile.media-missing .project-art::after { content: ''; }
/* ---- A project whose lead asset is footage --------------------------------
   The hero plays the clip over the finished still. It is also the way into
   the full-size version, so it takes a cursor and a focus ring. */
.modal-hero.has-video.is-zoomable { cursor: zoom-in; }
.modal-hero.has-video.is-zoomable:focus-visible {
  outline: 2px solid var(--color-forest-500);
  outline-offset: -4px;
}
.modal-hero .gallery-play {
  z-index: 3;
  width: 72px;
  height: 72px;
}
.modal-hero.has-video.is-zoomable:hover .gallery-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-cream-50);
}
.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-forest-600);
  margin: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem) 0;
}
.modal-title {
  margin: 1rem clamp(2rem, 5vw, 4rem) 0;
  max-width: 24ch;
}
.modal-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin: 2.5rem clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--color-ink-100);
}
.modal-meta > div {
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-bottom: 1px solid var(--color-ink-100);
}
.modal-meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-600);
  margin-bottom: 0.4rem;
}
.modal-meta dd {
  font-size: 0.975rem;
  color: var(--color-ink-900);
  line-height: 1.4;
}
.modal-desc {
  margin: 2rem clamp(2rem, 5vw, 4rem) 0;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.7;
  color: var(--color-ink-700);
  max-width: 65ch;
}

/* When the modal has no hero, push the eyebrow down so it clears the close button */
.modal-content:not(:has(.modal-hero)) > .modal-eyebrow:first-child {
  margin-top: clamp(4rem, 6vw, 5rem);
}

.modal-section {
  margin: 2.5rem clamp(2rem, 5vw, 4rem) 0;
  max-width: 72ch;
}
.modal-section h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-forest-600);
  font-weight: 600;
  margin-bottom: 1.25rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-ink-100);
}
.modal-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.875rem;
}
.modal-list li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-ink-700);
  font-size: 1rem;
  line-height: 1.6;
}
.modal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.875rem;
  height: 1px;
  background: var(--color-forest-600);
}
.modal-list strong {
  color: var(--color-forest-800);
  font-weight: 600;
}
.modal-gallery-note {
  margin: 1rem clamp(2rem, 5vw, 4rem) 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
.modal-footnote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-ink-100);
}
.modal-footnote p {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-500);
  line-height: 1.6;
  max-width: 60ch;
}
.modal-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 2.5rem clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
  padding-top: 1rem;
}
.modal-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 2.5rem clamp(2rem, 5vw, 4rem) clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 700px) {
  .modal-gallery { grid-template-columns: 1fr; }
}
.gallery-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-forest-900);
  border-radius: 4px;
  overflow: hidden;
}
.gallery-tile > div,
.gallery-tile > img,
.gallery-tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-tile > img,
.gallery-tile > video {
  z-index: 1;
  transition: transform 1.2s var(--ease-out);
}
.gallery-tile:hover > img,
.gallery-tile:hover > video {
  transform: scale(1.04);
}
.gallery-tile > .project-art {
  z-index: 2;
  display: none;
}
/* Drone footage over the finished still in the ECSU modal hero. Same contract
   as the other background videos: invisible until it is genuinely playing. */
.project-video {
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
}
.project-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .project-video { display: none; }
}
/* Before / after marker on a project photograph. */
.ba-tag {
  position: absolute;
  top: 0.875rem;
  left: 0.875rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-900);
  background: var(--color-cream-50);
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}
.ba-after {
  color: var(--color-cream-50);
  background: var(--color-forest-700);
}
.gallery-tile figcaption {
  position: absolute;
  left: 0.875rem;
  bottom: 0.875rem;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream-50);
  background: rgba(10, 22, 16, 0.7);
  backdrop-filter: blur(6px);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
}

/* ---- A drone clip sitting in the gallery grid ------------------------------
   Runs the full width of the three-column grid at 16/9, so the before/after
   photographs below keep their column pairing. The still poster carries the
   tile until the pointer lands on it; the clip itself only loads on hover or
   when the frame is opened in the lightbox. */
.gallery-tile-wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) {
  .gallery-tile-wide { aspect-ratio: 4 / 3; }
}
.gallery-tile-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.gallery-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding-left: 3px;
  border-radius: 999px;
  color: var(--color-forest-900);
  background: rgba(251, 249, 243, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.gallery-tile-video:hover .gallery-play,
.gallery-tile-video:focus-visible .gallery-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-cream-50);
}
.gallery-tile-video.is-previewing .gallery-play {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}
.ba-video {
  color: var(--color-cream-50);
  background: var(--color-forest-900);
}

/* ---- Enlargeable frames ---------------------------------------------------
   .is-zoomable is set by JS once a frame's media has actually loaded, so the
   placeholder gradients left by a missing photograph never advertise a
   larger version that does not exist. */
.gallery-tile.is-zoomable { cursor: zoom-in; }
.gallery-tile.is-zoomable:focus-visible {
  outline: 2px solid var(--color-forest-500);
  outline-offset: 3px;
}
.gallery-zoom {
  position: absolute;
  z-index: 3;
  top: 0.875rem;
  right: 0.875rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--color-forest-900);
  background: rgba(251, 249, 243, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.gallery-tile.is-zoomable:hover .gallery-zoom,
.gallery-tile.is-zoomable:focus-visible .gallery-zoom {
  opacity: 1;
  transform: scale(1);
}

/* ============================================
   LIGHTBOX
   ============================================
   Sits above the project modal (z-index 200) so a frame opened from inside a
   modal stacks over it and ESC unwinds one layer at a time. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 2.5vw, 2.5rem);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out),
              visibility var(--dur-base);
}
.lightbox.is-open {
  visibility: visible;
  opacity: 1;
}
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 14, 10, 0.94);
  cursor: zoom-out;
}
.lightbox-panel {
  position: relative;
  width: min(1500px, 100%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lightbox-stage {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transform: scale(0.97);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.lightbox.is-open .lightbox-stage {
  transform: scale(1);
  opacity: 1;
}
/* Leave room for the caption bar and the nav buttons on narrow screens. */
.lightbox-stage > img,
.lightbox-stage > video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - clamp(9rem, 18vh, 12rem));
  object-fit: contain;
  border-radius: 4px;
  background: var(--color-forest-900);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  pointer-events: auto;
  color: var(--color-cream-50);
  background: rgba(251, 249, 243, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.lightbox-close:hover,
.lightbox-nav:hover {
  background: var(--color-cream-50);
  color: var(--color-forest-900);
}
.lightbox-close { top: 0; right: 0; }
.lightbox-close:hover { transform: rotate(90deg); }
.lightbox-nav { top: 50%; margin-top: -24px; }
.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }
/* A single-frame gallery has nothing to page through. */
.lightbox.is-single .lightbox-nav { display: none; }
.lightbox-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0 4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-cream-50);
}
.lightbox-caption { opacity: 0.92; }
.lightbox-count { color: var(--color-moss); }
@media (max-width: 700px) {
  .lightbox-nav { width: 42px; height: 42px; margin-top: -21px; }
  .lightbox-bar { padding: 0 1rem; font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-stage { transition: none; }
}

body.is-locked { overflow: hidden; }

/* ============================================
   SERVICES PAGE
   ============================================ */
.service-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
@media (max-width: 880px) {
  .service-row { grid-template-columns: 1fr; gap: 2.5rem; }
}
.service-row-head { position: sticky; top: 7rem; }
@media (max-width: 880px) {
  .service-row-head { position: static; }
}
.service-row-body p {
  color: var(--color-ink-700);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin-bottom: 1.25rem;
  max-width: 60ch;
}
.service-row-body h3 {
  margin-bottom: 1.5rem;
  letter-spacing: -0.015em;
}
.service-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-600);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
.service-num::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  display: inline-block;
}
.service-num.on-dark { color: var(--color-moss); }

/* CM cards */
.cm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
}
@media (max-width: 880px) {
  .cm-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.cm-card {
  background: var(--color-cream-50);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 2px solid var(--color-forest-700);
}
.cm-card-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-ink-900);
  font-weight: 600;
  margin-bottom: 2rem;
}

/* ----- Point list: short labelled items, all visible at once -----
   Replaces the tab sets on the Services page, where most of the content sat
   behind tabs a skimming visitor never opened. */
.point-list-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-600);
  margin: 2.5rem 0 0.25rem;
}
.point-list { margin: 0; }
.point {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0.5rem 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-ink-100);
}
.point:last-child { border-bottom: 1px solid var(--color-ink-100); }
.point dt {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-ink-900);
}
.point dd {
  margin: 0;
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--color-ink-700);
}
.point-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-forest-600);
  margin-bottom: 0.35rem;
}
/* Inside the narrower cards, stack the label over its text. */
.cm-card .point { grid-template-columns: 1fr; gap: 0.35rem; }
.cm-card .point:first-child { border-top: 0; padding-top: 0; }
.cm-card .point:last-child { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 700px) {
  .point { grid-template-columns: 1fr; gap: 0.35rem; }
}

/* Services list (Project Management) */
.services-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-moss);
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .services-list { grid-template-columns: 1fr; }
}
.services-list li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-cream-50);
  font-size: 0.975rem;
  font-weight: 400;
}
.services-list li:nth-child(even) {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 700px) {
  .services-list li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}
.service-list-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-forest-400);
  letter-spacing: 0.1em;
}

/* ============================================
   TABS
   ============================================ */
.tabs { margin-top: 2.5rem; }
.tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--color-ink-100);
  margin-bottom: 2rem;
  list-style: none;
}
.tab {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 500;
  color: var(--color-ink-500);
  padding: 0.875rem 1.25rem 1rem;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--color-forest-700); }
.tab.is-active {
  color: var(--color-forest-800);
  border-bottom-color: var(--color-forest-700);
}
.tab:focus-visible {
  outline: 2px solid var(--color-forest-700);
  outline-offset: 2px;
}
.tab-panels { position: relative; }
.tab-panel { display: none; }
.tab-panel.is-active {
  display: block;
  animation: tabFade 380ms var(--ease-out);
}
.tab-panel p {
  color: var(--color-ink-700);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 62ch;
}
.tab-panel strong {
  display: inline;
  color: var(--color-forest-800);
  font-weight: 500;
}
@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Vertical-style tab list (Lean section) */
.tabs-vertical .tab-list {
  flex-direction: column;
  border-bottom: 0;
  margin-bottom: 1.5rem;
}
.tabs-vertical .tab {
  padding: 0.875rem 1rem;
  border-bottom: 0;
  border-left: 2px solid var(--color-ink-100);
  margin-bottom: 0;
  text-align: left;
  width: 100%;
}
.tabs-vertical .tab:first-child { padding-left: 1rem; }
.tabs-vertical .tab.is-active {
  border-left-color: var(--color-forest-700);
  background: var(--color-cream-100);
}
.tabs-vertical .tab-panel p {
  background: var(--color-cream-100);
  padding: 1.5rem 1.75rem;
  border-left: 2px solid var(--color-forest-700);
}

/* Project art variants — abstract architectural compositions */
.art-water {
  background:
    radial-gradient(circle at var(--art-ax, 30%) var(--art-ay, 40%), rgba(74, 162, 200, 0.35), transparent 50%),
    radial-gradient(circle at var(--art-bx, 70%) var(--art-by, 70%), rgba(45, 122, 85, 0.4), transparent 55%),
    linear-gradient(var(--art-angle, 135deg), #0d2a1c 0%, #133d2e 50%, #1c5a40 100%);
}
.art-water::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 18px, rgba(255,255,255,0.04) 18px, rgba(255,255,255,0.04) 19px);
}
.art-historic {
  background:
    radial-gradient(circle at var(--art-ax, 60%) var(--art-ay, 50%), rgba(184, 155, 94, 0.35), transparent 55%),
    linear-gradient(var(--art-angle, 160deg), #1a1410 0%, #2a2018 40%, #3a2c1e 100%);
}
.art-historic::before {
  content: '';
  position: absolute;
  inset: 12% 25%;
  background:
    linear-gradient(180deg, rgba(184, 155, 94, 0.18) 0%, transparent 80%);
  border-top: 1px solid rgba(184, 155, 94, 0.25);
  border-left: 1px solid rgba(184, 155, 94, 0.25);
  border-right: 1px solid rgba(184, 155, 94, 0.25);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.art-historic::after {
  background:
    linear-gradient(180deg, transparent 60%, rgba(10, 16, 12, 0.7) 100%) !important;
}
.art-general {
  background:
    radial-gradient(circle at var(--art-ax, 50%) var(--art-ay, 40%), rgba(45, 122, 85, 0.30), transparent 60%),
    linear-gradient(var(--art-angle, 135deg), #0a2317 0%, #133d2e 100%);
}
.art-general::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(138, 168, 150, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(138, 168, 150, 0.18) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(135deg, black 30%, transparent 90%);
  -webkit-mask-image: linear-gradient(135deg, black 30%, transparent 90%);
}
.art-residential {
  background:
    radial-gradient(circle at var(--art-ax, 30%) var(--art-ay, 65%), rgba(212, 184, 132, 0.28), transparent 55%),
    linear-gradient(var(--art-angle, 160deg), #1a1410 0%, #241b14 45%, #2f241a 100%);
}
.art-residential::before {
  content: '';
  position: absolute;
  inset: 30% 22% 8% 22%;
  background:
    linear-gradient(180deg, rgba(212, 184, 132, 0.14) 0%, transparent 90%);
  border-top: 1px solid rgba(212, 184, 132, 0.32);
  border-left: 1px solid rgba(212, 184, 132, 0.24);
  border-right: 1px solid rgba(212, 184, 132, 0.24);
}
.art-residential::after {
  background:
    linear-gradient(180deg, transparent 55%, rgba(10, 16, 12, 0.72) 100%) !important;
}

.empty-state {
  text-align: center;
  padding: 6rem 0;
  color: var(--color-ink-500);
}
.empty-state .display-sm { color: var(--color-ink-700); margin-bottom: 1rem; }

/* ============================================
   CAREERS
   ============================================ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 1rem;
}
@media (max-width: 880px) { .values-grid { grid-template-columns: 1fr; row-gap: 0; } }
.value {
  padding: 2.5rem 0;
}
@media (max-width: 880px) {
  .value { padding: 2rem 0; }
}

/* Tech grid (Services page) */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  row-gap: 1rem;
  margin-top: 3rem;
}
.tech-grid-2col { grid-template-columns: repeat(2, 1fr); }
.tech-grid-4col { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) {
  .tech-grid-4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .tech-grid,
  .tech-grid-2col { grid-template-columns: 1fr; row-gap: 0; }
}
.tech-card {
  padding: 2.5rem 0;
}
@media (max-width: 880px) {
  .tech-card { padding: 2rem 0; }
}
.tech-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 1.5rem;
  color: var(--color-forest-700);
}
.tech-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 1rem;
}
.tech-card p {
  font-size: 0.975rem;
  line-height: 1.65;
  color: var(--color-ink-500);
  max-width: 38ch;
}
.value-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1.5rem;
  color: var(--color-forest-700);
}
.value h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.015em;
}
.value p { color: var(--color-ink-500); max-width: 42ch; }

.openings {
  background: var(--color-cream-100);
}
.opening {
  display: block;
  border-top: 1px solid var(--color-ink-100);
}
.opening:last-child { border-bottom: 1px solid var(--color-ink-100); }
.opening-trigger {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 2rem;
  align-items: center;
  width: 100%;
  padding: 2rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: padding var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.opening-trigger:hover {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background: var(--color-cream-50);
}
.opening-trigger:focus-visible {
  outline: 2px solid var(--color-forest-700);
  outline-offset: 4px;
}
.opening-trigger .arrow {
  transition: transform var(--dur-base) var(--ease-out);
  display: inline-block;
}
.opening-trigger:hover .arrow { transform: translateX(0.5rem); }
@media (max-width: 880px) {
  .opening-trigger {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.5rem 0;
  }
}
.opening-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  letter-spacing: -0.015em;
}
.opening-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-500);
}

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
}
@media (max-width: 880px) {
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
}
.contact-side h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.contact-side p, .contact-side a {
  color: var(--color-ink-500);
  font-size: 0.95rem;
  line-height: 1.6;
}
.contact-side a:hover { color: var(--color-forest-700); }
.contact-block {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-ink-100);
}
.contact-block:first-child { border-top: 1px solid var(--color-ink-100); }
.contact-block .label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-forest-600);
  margin-bottom: 0.75rem;
  display: block;
}

.form {
  display: grid;
  gap: 1.75rem;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-500);
}
.field input,
.field textarea,
.field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-ink-100);
  padding: 0.625rem 0;
  font-size: 1rem;
  color: var(--color-ink-900);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast) var(--ease-out);
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--color-forest-700);
}
/* Currency-prefixed input (contact form, Estimated Capital Value). The mark is
   decorative; the input keeps the underline so it matches every other field. */
.field-prefixed {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.4rem;
  border-bottom: 1px solid var(--color-ink-100);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field-prefixed:focus-within { border-bottom-color: var(--color-forest-700); }
.field-prefixed .field-prefix {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--color-ink-500);
}
.field-prefixed input {
  border-bottom: 0;
  padding-left: 0;
  min-width: 0;
}
.field-prefixed input::placeholder {
  color: var(--color-ink-300);
  font-size: 0.95rem;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.form-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-ink-500);
  letter-spacing: 0.05em;
}

/* Data sharing + SMS messaging terms under the contact form (carrier
   compliance copy). Kept quiet so it reads as fine print, not content. */
.form-policy {
  border-top: 1px solid var(--color-ink-100);
  padding-top: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-ink-500);
}
.form-policy-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-700);
  margin: 0 0 0.75rem;
}
.form-policy ul,
.form-policy ol {
  margin: 0 0 1.5rem;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.5rem;
}
.form-policy ul { list-style: disc; }
.form-policy ol { list-style: decimal; margin-bottom: 0; }
.form-policy a { color: var(--color-forest-600); text-decoration: underline; }
/* Folded behind a one-line toggle so the form ends at its button. */
.form-policy > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-ink-700);
}
.form-policy > summary::-webkit-details-marker { display: none; }
.form-policy > summary::after {
  content: '+';
  font-size: 0.95rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.form-policy[open] > summary { margin-bottom: 1.25rem; }
.form-policy[open] > summary::after { transform: rotate(45deg); }
.form-policy > summary:hover { color: var(--color-forest-600); }

/* ============================================
   FORM BLOCKS (Timesheets / Daily Reports)
   ============================================ */
.form-block {
  padding-block: 2.5rem;
  border-top: 1px solid var(--color-ink-100);
}
.form-block:first-child { border-top: 0; padding-top: 0; }
.form-block-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-forest-600);
  font-weight: 600;
  margin-bottom: 1.75rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-ink-100);
}
.form-block-note {
  font-size: 0.9rem;
  color: var(--color-ink-500);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 1.75rem;
}
.field-grid:last-child { margin-bottom: 0; }
.field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) {
  .field-grid,
  .field-grid.cols-3,
  .field-grid.cols-4 {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  cursor: pointer;
  padding: 0.75rem 0;
}
.checkbox-field input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 18px;
  height: 18px;
  accent-color: var(--color-forest-700);
}
.checkbox-field span {
  font-size: 0.925rem;
  line-height: 1.5;
  color: var(--color-ink-700);
}

.checkbox-field a { color: var(--color-forest-600); text-decoration: underline; }
.sms-consent span { font-size: 0.85rem; color: var(--color-ink-500); }

/* Privacy Policy / Terms pages */
.legal { max-width: 72ch; color: var(--color-ink-700); line-height: 1.7; }
.legal h2 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-ink-900);
  margin: 2.5rem 0 0.75rem;
}
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { margin: 0 0 1rem; padding-left: 1.25rem; display: grid; gap: 0.4rem; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal a { color: var(--color-forest-600); text-decoration: underline; }
.legal-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-500);
}
.legal-callout {
  border-left: 3px solid var(--color-forest-600);
  padding: 0.75rem 1rem;
  background: var(--color-cream-100);
}
.footer-bottom a { color: inherit; font-size: inherit; opacity: 1; }
.footer-bottom a:hover { text-decoration: underline; }

/* ============================================
   TIMESHEET GRID
   ============================================ */
.ts-grid {
  display: grid;
  gap: 0;
  margin-top: 0.75rem;
}
.ts-row {
  display: grid;
  grid-template-columns: 60px 140px 1.4fr 90px 90px 1.4fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-ink-100);
}
.ts-head {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-ink-500);
  font-weight: 500;
  padding-bottom: 0.875rem;
  border-bottom: 1.5px solid var(--color-ink-300);
}
.ts-day {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-ink-900);
}
.ts-row input[type="number"],
.ts-row input[type="date"],
.ts-row input[type="text"],
.ts-row select {
  width: 100%;
  background: var(--color-cream-100);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.55rem 0.7rem;
  font-size: 0.875rem;
  color: var(--color-ink-900);
  font-family: var(--font-sans);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.ts-row input:focus,
.ts-row select:focus {
  outline: none;
  border-color: var(--color-forest-700);
  background: #fff;
}
.ts-totals {
  background: var(--color-cream-100);
  margin-top: 0.5rem;
  padding: 0.875rem 0.625rem;
  border-bottom: 0;
  border-radius: 6px;
}
.ts-totals .ts-day,
.ts-totals [data-ts-total] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-900);
}
@media (max-width: 800px) {
  .ts-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1.25rem 0;
  }
  .ts-head { display: none; }
  .ts-day { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-forest-600); }
  .ts-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 1rem; }
  .ts-totals .ts-day { grid-column: 1 / -1; }
}

/* ============================================
   FILE DROP (Daily Reports)
   ============================================ */
.file-drop {
  display: block;
  cursor: pointer;
  position: relative;
}
.file-drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.75rem;
  padding: 2.75rem 1.5rem;
  border: 1.5px dashed var(--color-ink-100);
  border-radius: 8px;
  background: var(--color-cream-50);
  color: var(--color-ink-500);
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.file-drop:hover .file-drop-inner,
.file-drop input:focus + .file-drop-inner {
  border-color: var(--color-forest-700);
  color: var(--color-forest-800);
  background: var(--color-cream-100);
}
.file-drop-label {
  font-size: 1rem;
  color: var(--color-ink-700);
}
.file-drop-label strong {
  color: var(--color-forest-700);
  font-weight: 500;
}
.file-drop-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}

/* ============================================
   EMBED FRAME (iframe wrapper)
   ============================================ */
.embed-frame {
  width: 100%;
  min-height: 80vh;
  background: var(--color-cream-100);
  border: 1px solid var(--color-ink-100);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.embed-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  border: 0;
}
.embed-frame:empty::before,
.embed-frame iframe[src=""] + ::before { content: ''; }
.embed-frame iframe[src=""] {
  background:
    repeating-linear-gradient(
      45deg,
      var(--color-cream-100),
      var(--color-cream-100) 12px,
      var(--color-cream-50) 12px,
      var(--color-cream-50) 24px
    );
}

/* ============================================
   ANIMATIONS — Scroll Reveal
   ============================================ */
/* Hidden only once the inline head script has confirmed JS runs (html.js),
   so a blocked or failed main.js never leaves the page blank. */
.reveal {
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }

/* ----- Headline word reveal -----
   main.js wraps each word of a .split heading in a clipping mask; the words
   rise into place one after another when the heading scrolls into view. The
   padding/negative-margin pair keeps descenders and italic overhangs from
   being clipped by the mask. */
.split .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.08em 0.14em 0;
  margin: 0 -0.08em -0.14em 0;
}
.split .w-i {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(60ms + var(--i, 0) * 45ms);
}
.split.is-visible .w-i { transform: none; }

/* ----- Image curtain reveal -----
   Photographs inside a revealing card or figure wipe up from the bottom and
   settle from a slight zoom, rather than fading in with the text. */
.project-thumb,
.section-image {
  transition: clip-path 1000ms var(--ease-out);
}
.project-thumb > img {
  transition: transform 1600ms var(--ease-out);
}
.js .reveal:not(.is-visible) .project-thumb,
.js .section-image.reveal:not(.is-visible) {
  clip-path: inset(100% 0 0 0);
}
.js .reveal:not(.is-visible) .project-thumb > img,
.js .section-image.reveal:not(.is-visible) img {
  transform: scale(1.14);
}
.project-card:hover .project-thumb > img { transform: scale(1.04); }

/* ----- Brand intro -----
   First page view of a visit only (the head script sets html.intro). A forest
   curtain carries the wordmark while a hairline draws beneath it, then lifts
   away. Pure CSS, so it finishes on its own even if main.js never runs. */
.intro body::before,
.intro body::after {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
}
.intro body::before {
  content: '';
  inset: 0;
  background: var(--color-forest-900);
  animation: introCurtain 1000ms var(--ease-in-out) 1000ms both;
}
.intro body::after {
  content: 'Leed';
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding-bottom: 0.35rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-cream-50);
  background: linear-gradient(var(--color-forest-400), var(--color-forest-400)) left bottom / 0% 1px no-repeat;
  animation:
    introMark 700ms var(--ease-out) both,
    introRule 800ms var(--ease-in-out) 250ms both,
    introMarkOut 500ms var(--ease-in-out) 1000ms forwards;
}
@keyframes introCurtain {
  to { transform: translateY(-100%); }
}
@keyframes introMark {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes introRule {
  to { background-size: 100% 1px; }
}
@keyframes introMarkOut {
  to { opacity: 0; transform: translateY(-24px); }
}

/* ----- Scroll progress hairline along the bottom of the nav ----- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .nav::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background: var(--color-forest-400);
      transform-origin: 0 50%;
      transform: scaleX(0);
      animation: navProgress linear both;
      animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}
@keyframes navProgress {
  to { transform: scaleX(1); }
}

/* ----- Page-to-page transitions -----
   Same-site navigations cross-fade with a slight rise in browsers that
   support cross-document view transitions; others navigate as normal. The
   nav is its own layer so it stays put while the page beneath changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav { view-transition-name: site-nav; }
  ::view-transition-old(root) {
    animation: vtOut 320ms var(--ease-in-out) both;
  }
  ::view-transition-new(root) {
    animation: vtIn 620ms var(--ease-out) 80ms both;
  }
}
@keyframes vtOut {
  to { opacity: 0; transform: translateY(-12px); }
}
@keyframes vtIn {
  from { opacity: 0; transform: translateY(18px); }
}

/* ----- Selected Work: photograph follows the cursor -----
   Desktop pointers only; built by main.js from each row's data-preview. */
.work-preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: clamp(16rem, 24vw, 22rem);
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  background: var(--color-forest-900);
  box-shadow: 0 30px 60px -20px rgba(10, 31, 21, 0.45);
  opacity: 0;
  scale: 0.85;
  transition: opacity 400ms var(--ease-out), scale 600ms var(--ease-out);
}
.work-preview.is-active { opacity: 1; scale: 1; }
.work-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 450ms var(--ease-out), transform 1200ms var(--ease-out);
}
.work-preview img.is-current { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .split .w-i { transform: none; }
  .js .reveal:not(.is-visible) .project-thumb,
  .js .section-image.reveal:not(.is-visible) { clip-path: none; }
  .js .reveal:not(.is-visible) .project-thumb > img,
  .js .section-image.reveal:not(.is-visible) img { transform: none; }
}

/* ============================================
   UTILITIES
   ============================================ */
.text-forest { color: var(--color-forest-800); }
.italic-em { font-style: italic; }
.divider {
  height: 1px;
  background: var(--color-ink-100);
  border: 0;
  margin-block: 4rem;
}

/* ----- Safety record band (home, #safety) ----- */
.safety-record {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--color-forest-900);
  color: var(--color-cream-100);
  border-radius: 6px;
  padding: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 880px) {
  .safety-record { grid-template-columns: 1fr; }
}
.safety-record .eyebrow { color: var(--color-forest-400); }
.safety-record-lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-cream-100);
}
.safety-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 560px) {
  .safety-stats { grid-template-columns: 1fr; }
}
.safety-stat {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1.25rem;
}
.safety-stat .num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-cream-50);
  margin-bottom: 0.75rem;
}
.safety-stat .num em { font-style: italic; color: var(--color-forest-400); }
.safety-stat .lbl {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.6;
  color: var(--color-moss);
}