/* =========================================================
   Prostep Staircases & Lintels
   Brand-aligned editorial design system
   Concrete · Green #1A8040 · Barlow Condensed · Space Mono
   ========================================================= */

:root {
  /* Concrete palette */
  --concrete-dark:  #1C1C1B;
  --concrete-mid:   #3A3835;
  --concrete-warm:  #6B6560;
  --concrete-light: #B8B2AA;
  --concrete-pale:  #E8E3DD;
  --concrete-white: #F5F2EE;
  --black:          #0D0D0C;
  --white:          #FFFFFF;

  /* Accent — deep operational green */
  --accent:         #1A8040;
  --accent-light:   #25A853;

  /* Rules and inks */
  --line:           rgba(255, 255, 255, 0.06);
  --line-strong:    rgba(255, 255, 255, 0.12);
  --line-dark:      rgba(0, 0, 0, 0.08);

  /* Typography */
  --ff-display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --ff-body:    'Barlow', system-ui, -apple-system, sans-serif;
  --ff-mono:    'Space Mono', ui-monospace, monospace;

  /* Layout */
  --wrap-max: 1440px;
  --wrap-pad: clamp(24px, 5vw, 80px);
  --nav-h: 64px;

  /* Corner-rounding scale — sized to the element so content clears the arc.
     Small controls take a small radius; only large surfaces take the big one. */
  --r-xs:   4px;   /* checkboxes, tiny toggles */
  --r-sm:   10px;  /* inputs, image thumbs, compact chips */
  --r-md:   14px;  /* cards, forms, media frames */
  --r-lg:   20px;  /* large surfaces: tiles, panels, default box */
  --r-pill: 999px; /* pill buttons & badges */
  --r-round: 50%;  /* circular controls & dots */

  /* Motion — Emil-style, slow & confident.
     Weighted to sit with the Lenis smooth scroll: interactions carry a little
     more mass so nothing snaps while the page itself glides. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);   /* deep settle, for entrances */
  --dur-fast: 220ms;
  --dur: 380ms;
  --dur-slow: 720ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* iOS momentum scroll + prevent horizontal rubber-banding on small screens */
  -webkit-overflow-scrolling: touch;
}
body {
  overflow-x: clip;
}

/* Generic IntersectionObserver-driven reveal (used as a fallback when GSAP
   isn't ready yet — keeps the entrance feel consistent and never jumpy). */
[data-reveal-soft] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 900ms var(--ease-lux),
    transform 1050ms var(--ease-lux);
  will-change: opacity, transform;
}
[data-reveal-soft].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-soft] { opacity: 1; transform: none; transition: none; }
}

/* Keyboard accessibility — every interactive element keeps a visible focus
   ring when tabbing in. Mouse users keep the existing clean hover-only treatment. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Lenis drives scrolling itself — native smooth-scroll would fight it. */
html.has-lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--ff-body);
  background: var(--concrete-dark);
  color: var(--concrete-pale);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden — this rule overrides the deliberate `overflow-x: clip`
     set above. `hidden` makes body a scroll container and propagates to the
     viewport, which fights position:sticky and ScrollTrigger's pin-spacer. */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--white); }

/* ============ LAYOUT ============ */
.wrap {
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding-left: var(--wrap-pad);
  padding-right: var(--wrap-pad);
}

.section { position: relative; padding: clamp(80px, 10vw, 160px) 0; }
.section-tight { padding: clamp(60px, 7vw, 100px) 0; }
.section-dark { background: var(--concrete-dark); }
.section-black { background: var(--black); }
.section-stone { background: var(--concrete-light); color: var(--concrete-dark); }
.section-offwhite { background: var(--concrete-white); color: var(--concrete-dark); }
.section-pale { background: var(--concrete-pale); color: var(--concrete-dark); }
.section-white { background: var(--white); color: var(--concrete-dark); }

.divider {
  height: 1px;
  background: var(--line);
  width: 100%;
}

/* ============ TYPOGRAPHY ============ */
.display-1, .display-2, .display-3, .display-4 {
  font-family: var(--ff-display);
  text-transform: uppercase;
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.display-1 { font-size: clamp(56px, 9vw, 144px); }
.display-2 { font-size: clamp(48px, 7vw, 104px); }
.display-3 { font-size: clamp(36px, 5vw, 72px); }
.display-4 { font-size: clamp(28px, 3.5vw, 48px); font-weight: 700; }

.subhead {
  font-family: var(--ff-display);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--concrete-light);
}

.body-lg {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--concrete-light);
}
.body-md {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--concrete-warm);
}
.body-sm {
  font-family: var(--ff-body);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--concrete-warm);
}

.label {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.label::before {
  display: none;
}
.label--no-line::before { display: none; }
.label--dark { color: var(--accent); }

.kicker {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}

.green { color: var(--accent-light); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .green { color: var(--accent); }

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: calc(var(--nav-h) + 5px);
  padding-top: 5px;
  /* Starts fully transparent — premium-feel transition kicks in once .is-scrolled lands */
  background: transparent;
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 0 rgba(13, 13, 12, 0);
  display: flex;
  align-items: center;
  /* Deliberately NOT transitioning backdrop-filter: animating a blur radius
     re-runs a full-viewport backdrop blur every frame for the whole 550ms, and
     it fires exactly as the user starts scrolling. The alpha cross-fade reads
     the same. `height` was also listed but never changes between states. */
  transition:
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-bottom-color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Scrolled state — white frosted glass header */
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-bottom-color: rgba(28, 28, 27, 0.08);
  box-shadow: 0 8px 32px -16px rgba(28, 28, 27, 0.14);
}
/* Scrolled state text — dark on white frosted bar */
.nav.is-scrolled .nav__name { color: var(--concrete-dark); }
.nav.is-scrolled .nav__tag { color: var(--concrete-mid); }
.nav.is-scrolled .nav__menu a { color: var(--concrete-mid); }
.nav.is-scrolled .nav__menu a:hover,
.nav.is-scrolled .nav__menu a.is-active { color: var(--accent); }
.nav.is-scrolled .nav__menu a::after { background: var(--accent); }
.nav.is-scrolled .nav__cta { color: var(--accent); border-color: var(--accent); }
.nav.is-scrolled .nav__cta:hover { color: var(--white); }
.nav.is-scrolled .nav__toggle { color: var(--concrete-dark); }
.nav.is-scrolled .nav__burger path { stroke: var(--concrete-dark); }

/* Light hero theme — when first section is light, nav text starts dark */
.nav[data-theme="light"]:not(.is-scrolled) .nav__name { color: var(--concrete-dark); }
.nav[data-theme="light"]:not(.is-scrolled) .nav__tag { color: var(--concrete-mid); }
.nav[data-theme="light"]:not(.is-scrolled) .nav__menu a { color: var(--concrete-mid); }
.nav[data-theme="light"]:not(.is-scrolled) .nav__cta { color: var(--accent); border-color: var(--accent); }
.nav[data-theme="light"]:not(.is-scrolled) .nav__toggle { color: var(--concrete-dark); }
.nav[data-theme="light"]:not(.is-scrolled) .nav__burger path { stroke: var(--concrete-dark); }

/* Dark hero theme — when first section is a photo/dark page-head, nav text & burger stay light */
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__name { color: var(--white); }
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__tag { color: var(--concrete-light); }
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__menu a { color: var(--concrete-light); }
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__cta { color: var(--accent-light); border-color: var(--accent-light); }
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__toggle { color: var(--white); }
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__burger path { stroke: var(--white); }
/* When the menu is open the panel is light — force burger back to dark for contrast */
.menu-open .nav__burger path { stroke: var(--concrete-dark); }
.nav__inner {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  justify-self: start;
}
.nav__inner > .nav__toggle { justify-self: center; }
.nav__inner > .nav__cta    { justify-self: end; }
.nav__mark {
  width: 40px;
  height: 40px;
  display: block;
  object-fit: contain;
  background: transparent;
}
@media (max-width: 600px) { .nav__mark { width: 41px; height: 41px; } }
.nav__brand-text { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.nav__name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--concrete-pale);
  line-height: 1;
}
.nav__tag {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--concrete-warm);
  line-height: 1;
}
@media (max-width: 600px) {
  .nav__name { font-size: 17px; }
  .nav__tag { display: none; }
}

.nav__menu {
  display: flex;
  gap: 36px;
}
.nav__menu a {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
  padding: 8px 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--accent-light);
  transition: width var(--dur) var(--ease-out);
}
.nav__menu a:hover,
.nav__menu a.is-active {
  color: var(--concrete-pale);
}
.nav__menu a:hover::after,
.nav__menu a.is-active::after { width: 100%; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 20px;
  border: 1.5px solid var(--accent);
  color: var(--accent-light);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* Note: no `overflow: hidden` here — the quote-count badge sits outside
     the button bounds, so clipping would cut it off. The slide-up hover fill
     uses scaleY on ::before instead, which stays inside the element naturally. */
  position: relative;
  isolation: isolate;
  transition:
    color 460ms cubic-bezier(.65,.05,.36,1),
    background-color 460ms cubic-bezier(.65,.05,.36,1),
    border-color 460ms cubic-bezier(.65,.05,.36,1),
    transform 360ms cubic-bezier(.2,.7,.2,1),
    box-shadow 460ms cubic-bezier(.65,.05,.36,1);
}
.nav__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;   /* match the button's rounded shape (pseudo-els aren't hit by the global rule) */
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 520ms cubic-bezier(.76,0,.24,1);
  z-index: -1;
}
.nav__cta:hover {
  color: var(--white);
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(26, 128, 64, 0.5);
}
.nav__cta:hover::before { transform: scaleY(1); }

.nav__toggle {
  display: flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}
/* legacy single-span toggle rules removed — new toggle uses .nav__toggle-box */

@media (max-width: 900px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__inner { grid-template-columns: 1fr auto; gap: 16px; }
  .nav__inner > .nav__toggle { justify-self: end; }
}

.nav__mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--black);
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 32px) 32px 32px;
  transform: translateY(-100%);
  transition: transform var(--dur-slow) var(--ease-in-out);
}
.nav__mobile.is-open { transform: translateY(0); }
.nav__mobile a {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--concrete-pale);
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

/* ============ BUTTONS ============ */
.btn {
  --btn-fill: var(--accent);
  --btn-shadow: 0 14px 34px -14px rgba(26, 128, 64, 0.55), 0 2px 0 rgba(0,0,0,0.04);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 28px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    color   460ms cubic-bezier(.65,.05,.36,1),
    background-color 460ms cubic-bezier(.65,.05,.36,1),
    border-color 460ms cubic-bezier(.65,.05,.36,1),
    transform 360ms cubic-bezier(.2,.7,.2,1),
    box-shadow 460ms cubic-bezier(.65,.05,.36,1);
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;   /* match the button's rounded shape (pseudo-els aren't hit by the global rule) */
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform 520ms cubic-bezier(.76,0,.24,1);
  z-index: -1;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--btn-shadow); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: translateY(0); transition-duration: 120ms; }
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.btn--green {
  color: var(--accent-light);
  border-color: var(--accent);
  --btn-fill: var(--accent);
}
.btn--green:hover {
  color: var(--white);
  border-color: var(--accent);
}
.btn--solid {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  --btn-fill: var(--accent-light);
  --btn-shadow: 0 16px 36px -14px rgba(26, 128, 64, 0.6), 0 2px 0 rgba(0,0,0,0.04);
}
.btn--solid::before { transform: translateY(101%); }
.btn--solid:hover { color: var(--white); border-color: var(--accent-light); }
.btn--pale {
  color: var(--concrete-pale);
  border-color: var(--concrete-warm);
  --btn-fill: var(--concrete-pale);
  --btn-shadow: 0 14px 30px -12px rgba(0,0,0,0.35);
}
.btn--pale:hover { color: var(--ink); border-color: var(--concrete-pale); }
.btn--dark {
  color: var(--concrete-dark);
  border-color: var(--concrete-dark);
  --btn-fill: var(--concrete-dark);
  --btn-shadow: 0 14px 30px -14px rgba(0,0,0,0.4);
}
.btn--dark:hover { color: var(--concrete-white); border-color: var(--concrete-dark); }

.btn__arrow {
  width: 8px; height: 8px;
  border-right: 1.2px solid currentColor;
  border-top: 1.2px solid currentColor;
  border-radius: 0;   /* keep chevron tips sharp — the global rounding would soften them */
  transform: rotate(45deg);
  transition: transform 460ms cubic-bezier(.2,.7,.2,1);
}
.btn:hover .btn__arrow { transform: rotate(45deg) translate(4px, -4px); }

/* ============ HERO (homepage) ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding-top: calc(var(--nav-h) + 60px);
  background: var(--black);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 60px; }
}
.hero__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
  position: relative;
  z-index: 2;
  border-left: 3px solid var(--accent);
}
@media (max-width: 900px) {
  .hero__left { padding: 60px var(--wrap-pad) 40px; border-left: 0; border-top: 3px solid var(--accent); }
}
.hero__right {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
}
@media (max-width: 900px) {
  .hero__right { min-height: 70vw; }
}
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1) saturate(0.7);
  transition: transform 12s linear;
}
.hero:hover .hero__photo { transform: scale(1.05); }
.hero__right::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--black) 0%, transparent 35%, transparent 100%);
  pointer-events: none;
}
.hero__eyebrow {
  margin-bottom: 28px;
}
.hero__mark {
  height: 70px;
  width: auto;
  margin-bottom: 36px;
  /* Lift the concrete tones so the mark reads on black */
  filter: brightness(1.45) contrast(1.05) drop-shadow(0 0 24px rgba(37, 168, 83, 0.18));
}
@media (max-width: 900px) { .hero__mark { height: 52px; } }
.hero__title {
  font-family: var(--ff-display);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 32px;
}
.hero__title .green { color: var(--accent-light); }
.hero__sub {
  font-family: var(--ff-display);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--concrete-light);
  margin-bottom: 28px;
  max-width: 36ch;
}
.hero__rule {
  width: 64px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 28px;
}
.hero__lede {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--concrete-warm);
  max-width: 42ch;
  margin-bottom: 40px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.hero__meta {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.hero__meta-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__meta-k {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}
.hero__meta-v {
  font-family: var(--ff-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--concrete-pale);
}

/* ============ EDITORIAL HEADER (sub-pages) ============ */
.page-head {
  background: var(--black);
  padding: calc(var(--nav-h) + 80px) 0 80px;
  border-top: 3px solid var(--accent);
  position: relative;
  overflow: hidden;
}
.page-head__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: end;
}
@media (max-width: 900px) {
  .page-head__grid { grid-template-columns: 1fr; gap: 40px; }
}
.page-head__chapnum {
  font-family: var(--ff-display);
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.05);
  text-transform: uppercase;
}
.page-head__title {
  font-family: var(--ff-display);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--white);
}
.page-head__lede {
  font-family: var(--ff-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--concrete-warm);
  max-width: 44ch;
  margin-top: 28px;
}

/* ============ MARQUEE STRIP (intro statement) ============ */
.marquee-statement {
  background: var(--black);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(60px, 8vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.marquee-statement p {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3.6vw, 56px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--concrete-light);
  max-width: 28ch;
}
.marquee-statement p .green { color: var(--accent-light); font-weight: 700; }
.marquee-statement p strong { color: var(--concrete-pale); font-weight: 700; }

/* ============ CAPABILITY GRID ============ */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) { .cap-grid { grid-template-columns: 1fr; } }
.cap {
  padding: 56px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background var(--dur) var(--ease-out);
}
.cap:hover { background: rgba(255, 255, 255, 0.02); }
.cap:nth-child(3n) { border-right: 0; }
@media (max-width: 900px) {
  .cap { border-right: 0; }
}
.cap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.cap:hover::before { width: 100%; }
.cap__num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 32px;
}
.cap__title {
  font-family: var(--ff-display);
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--concrete-pale);
  margin-bottom: 20px;
}
.cap__body {
  font-family: var(--ff-body);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--concrete-warm);
}

/* ============ PROJECT GALLERY ============ */
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 4px;
}
@media (max-width: 1000px) {
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 240px 240px; }
  .gallery > a:first-child { grid-column: span 2; }
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: 1fr; grid-template-rows: 60vw 60vw 60vw 60vw; }
  .gallery > a:first-child { grid-column: span 1; }
}
.gallery > a {
  position: relative;
  overflow: hidden;
  background: var(--concrete-mid);
  cursor: pointer;
  display: block;
}
.gallery > a.span-col { grid-row: span 2; }
.gallery > a.span-row { grid-column: span 2; }
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.72) contrast(1.1) saturate(0.7);
  transition: transform 1s var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.gallery > a:hover img {
  transform: scale(1.04);
  filter: brightness(0.85) contrast(1.1) saturate(0.85);
}
.gallery__tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(13, 13, 12, 0.7);
  backdrop-filter: blur(8px);
  padding: 8px 12px;
  border-left: 2px solid var(--accent-light);
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery > a:hover .gallery__tag {
  opacity: 1;
  transform: translateY(0);
}

/* ============ FEATURE SPLIT (lr-block) ============ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split--center { align-items: center; }
.split--media-left { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 900px) { .split--media-left { grid-template-columns: 1fr; } }

.split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--concrete-mid);
}
.split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.08) saturate(0.7);
  transition: transform 1.4s var(--ease-out);
}
.split:hover .split__media img { transform: scale(1.03); }
.split__media::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  z-index: 2;
}

/* ============ FOUNDERS GALLERY (two-image composition) ============ */
.founders-gallery {
  position: relative;
  width: 80%;
  aspect-ratio: 4 / 5;
  background: var(--concrete-mid);
}
.founders-gallery__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.founders-gallery__bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
}
.founders-gallery__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0) 35%, rgba(13,13,12,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}
.founders-gallery__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.08) saturate(0.65);
  transition: transform 1.4s var(--ease-out);
}
.founders-gallery:hover .founders-gallery__bg img { transform: scale(1.04); }

.founders-gallery__portrait {
  position: absolute;
  left: 6%;
  bottom: -8%;
  width: 46%;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  z-index: 3;
  box-shadow:
    0 30px 60px -10px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.06);
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.founders-gallery__portrait::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-light);
  z-index: 2;
}
.founders-gallery__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.founders-gallery:hover .founders-gallery__portrait { transform: translateY(-6px); }
.founders-gallery:hover .founders-gallery__portrait img { transform: scale(1.05); }

.founders-gallery__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-pale);
  background: linear-gradient(180deg, rgba(13,13,12,0), rgba(13,13,12,0.78));
  z-index: 3;
}

@media (max-width: 900px) {
  .founders-gallery { margin-bottom: 64px; }
  .founders-gallery__portrait { width: 58%; bottom: -6%; left: 5%; }
}
@media (max-width: 540px) {
  .founders-gallery__portrait { width: 62%; }
  .founders-gallery__caption { font-size: 9px; padding: 12px 12px 10px; }
}

/* ============ STATS STRIP ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 700px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  padding: 48px 30px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: background-color 360ms cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.stat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.stat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top, rgba(37,168,83,0.18), transparent 70%);
  opacity: 0;
  transition: opacity 360ms ease;
  pointer-events: none;
}
.stat:hover { background-color: rgba(37, 168, 83, 0.08); }
.stat:hover::before { transform: scaleX(1); }
.stat:hover::after { opacity: 1; }
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(48px, 5vw, 80px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--concrete-pale);
  margin-bottom: 12px;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1), color 360ms ease;
  position: relative;
  z-index: 1;
}
.stat__num .green {
  color: var(--accent-light);
  transition: color 360ms ease, text-shadow 360ms ease;
}
.stat:hover .stat__num {
  transform: translateY(-4px);
  color: var(--accent);
  font-weight: 900;
}
.stat:hover .stat__num .green {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(37, 168, 83, 0.4);
}
.stat__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
  transition: color 360ms ease, letter-spacing 420ms cubic-bezier(.2,.7,.2,1);
  position: relative;
  z-index: 1;
}
.stat:hover .stat__label {
  color: var(--accent-light);
  letter-spacing: 0.24em;
}

/* ============ CLIENT MARQUEE ============ */
.clients {
  background: var(--black);
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.clients::before, .clients::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 12vw;
  z-index: 2;
  pointer-events: none;
}
.clients::before { left: 0; background: linear-gradient(90deg, var(--black), transparent); }
.clients::after { right: 0; background: linear-gradient(-90deg, var(--black), transparent); }

.clients__track {
  display: flex;
  gap: 80px;
  animation: marquee 40s linear infinite;
  width: max-content;
  align-items: center;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
.clients__item {
  flex: 0 0 auto;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.06em;
  color: var(--concrete-warm);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out);
}
.clients__item:hover { color: var(--concrete-pale); }

/* ============ TAGLINE BLOCK ============ */
.tagline-block {
  background: var(--black);
  padding: clamp(80px, 12vw, 180px) 0;
  border-top: 3px solid var(--accent);
  text-align: center;
}
.tagline-block__eyebrow {
  margin-bottom: 32px;
}
.tagline-block__big {
  font-family: var(--ff-display);
  font-size: clamp(48px, 8vw, 128px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 28px;
}
.tagline-block__big .green { color: var(--accent-light); }
.tagline-block__end {
  font-family: var(--ff-display);
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--concrete-warm);
  margin-bottom: 48px;
}

/* ============ PRODUCT NAVIGATOR (homepage strip) ============ */
.products-nav {
  background: var(--black);
  padding: clamp(80px, 10vw, 140px) 0;
  position: relative;
  overflow: hidden;
}
.products-nav__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.products-nav__bg.is-active { opacity: 1; }
.products-nav__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.45) contrast(1.1) saturate(0.55);
}
.products-nav__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--black) 30%, rgba(13,13,12,0.55) 100%);
}
.products-nav__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 900px) { .products-nav__inner { grid-template-columns: 1fr; } }

.products-nav__list { display: flex; flex-direction: column; gap: 4px; }
.products-nav__item {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4.5vw, 64px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--concrete-warm);
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: color var(--dur) var(--ease-out), padding-left var(--dur-slow) var(--ease-out);
  padding-left: 0;
}
.products-nav__item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-light);
  transition: width var(--dur-slow) var(--ease-out);
}
.products-nav__item:hover,
.products-nav__item.is-active {
  color: var(--white);
  padding-left: 80px;
}
.products-nav__item:hover::before,
.products-nav__item.is-active::before { width: 60px; }

.products-nav__side {
  border-left: 1px solid var(--line);
  padding-left: 40px;
}
@media (max-width: 900px) { .products-nav__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 32px; } }

/* ============ PRODUCT TILES ============ */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 900px) { .tile-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tile-grid { grid-template-columns: 1fr; } }

/* ============ CATALOGUE GRID — unified product database ============ */
.catalogue__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.catalogue__head h2 { margin-bottom: 0; }
.catalogue__intro {
  max-width: 56ch;
  align-self: end;
  padding-bottom: 6px;
}
@media (max-width: 900px) {
  .catalogue__head { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .catalogue__intro { padding-bottom: 0; }
}

.catalogue-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.catalogue-grid > li { display: block; }
/* `display: block` above beats the bare [hidden] default, so filtered-out
   tiles stayed visible — force them off when the filter hides the <li>. */
.catalogue-grid > li[hidden] { display: none; }
.catalogue-grid .tile { aspect-ratio: 4 / 5; }
@media (max-width: 1200px) { .catalogue-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .catalogue-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .catalogue-grid { grid-template-columns: 1fr; } }

/* Filter pills — mono caps, accent on active, snap stagger between siblings */
.catalogue__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.filter-pill {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition:
    background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.filter-pill:hover { color: var(--ink); border-color: var(--accent); transform: translateY(-1px); }
.filter-pill.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.filter-pill__count {
  font-size: 10px;
  letter-spacing: 0.15em;
  opacity: 0.7;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
}
.filter-pill.is-active .filter-pill__count { background: rgba(255, 255, 255, 0.22); opacity: 1; }

/* Tile filter entrance — when a tile re-enters via filter change, it slides up + fades in */
.catalogue-grid > li { transition: opacity 0.28s ease; }
.catalogue-grid .tile.is-tile-entering { animation: tile-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tile-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* Simple action row — a clear product label sits beside the single "+" button */
.tile__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.tile__add-label {
  flex: 1 1 auto;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
  line-height: 1.3;
  display: inline-block;
  transition: color 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Circular + button — visual twin of .menu-nav__expand in the slide-out menu */
.tile__plus {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile__plus svg { width: 15px; height: 15px; display: block; }
.tile__plus svg .v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile__plus:hover {
  background: var(--accent);
  color: var(--white);
  transform: scale(1.08);
}

/* Added state — tile gets a green hairline; + becomes − (matches the menu's open pattern) */
.tile.is-in-quote { box-shadow: inset 0 0 0 2px var(--accent); }
.tile.is-in-quote .tile__add-label { color: var(--accent); }
.tile.is-in-quote .tile__plus { background: var(--accent); color: var(--white); }
.tile.is-in-quote .tile__plus svg .v { transform: scaleY(0); }

/* Quote count badge on the nav CTA — appears when at least one product is queued */
.nav__cta { position: relative; }
.nav__cta[data-quote-count]::after {
  content: attr(data-quote-count);
  position: absolute;
  top: -9px; right: -9px;
  min-width: 22px; height: 22px;
  padding: 0 7px;
  background: var(--accent);
  color: var(--white);
  border: 2px solid var(--bg-page);    /* halo against the nav background so it pops */
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: scale(1);
  z-index: 2;                          /* over the slide-up fill */
  pointer-events: none;
  box-shadow: 0 4px 14px -4px rgba(26, 128, 64, 0.55);
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav__cta[data-quote-count="0"]::after { display: none; }
.nav__cta.is-bumped::after { transform: scale(1.25); }

/* Quote-step prefill banner — appears at the top of Step 3 when items were
   carried over from the catalogue's Add-to-Quote queue. */
.quote__prefill-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  margin: 0 0 24px;
  background: rgba(37, 168, 83, 0.08);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.quote__prefill-note strong { color: var(--accent); }
.quote__prefill-clear {
  appearance: none;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.quote__prefill-clear:hover { background: var(--accent); color: var(--white); }

.tile {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--concrete-mid);
  display: block;
  transition: transform var(--dur) var(--ease-out);
}
.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--accent);
  z-index: 3;
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.65) contrast(1.1) saturate(0.65);
  transition: transform 1s var(--ease-out), filter var(--dur-slow) var(--ease-out);
}
.tile:hover img {
  transform: scale(1.05);
  filter: brightness(0.8) contrast(1.12) saturate(0.85);
}
.tile__copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px;
  z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(13,13,12,0.92) 70%);
}
.tile__num {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 8px;
}
.tile__title {
  font-family: var(--ff-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 8px;
}
.tile__sub {
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--concrete-light);
  margin-bottom: 12px;
}
.tile__more {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============ SPEC LIST (about / products) ============ */
.spec-list {
  border-top: 1px solid var(--line);
}
.spec-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--concrete-light);
  line-height: 1.5;
  position: relative;
  cursor: default;
  transition:
    padding-left 360ms cubic-bezier(.2,.7,.2,1),
    background-color 320ms ease,
    border-bottom-color 320ms ease,
    color 320ms ease;
}
.spec-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent-light);
  transform: translateY(-50%);
  transition: width 420ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.spec-list li:hover {
  padding-left: 20px;
  background-color: rgba(37, 168, 83, 0.10);
  border-bottom-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.spec-list li:hover::before { width: 14px; }
.spec-list li > span {
  transition: transform 360ms cubic-bezier(.2,.7,.2,1), color 320ms ease, font-weight 320ms ease, text-shadow 320ms ease;
}
.spec-list li > span:first-child {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent-light);
  text-transform: uppercase;
}
.spec-list li:hover > span:first-child {
  transform: translateX(6px);
  color: var(--accent);
  text-shadow: 0 0 18px rgba(37, 168, 83, 0.35);
}
.spec-list li:hover > span:last-child {
  color: var(--accent);
  font-weight: 700;
}

/* ============ CONTACT ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============ WIDE PAGE HEAD VARIANT ============ */
.page-head--wide .page-head__title,
.page-head__title--wide {
  font-size: clamp(56px, 13vw, 200px);
  line-height: 0.88;
  max-width: none;
}
@media (max-width: 600px) {
  .page-head--wide .page-head__title,
  .page-head__title--wide { font-size: clamp(48px, 14vw, 64px); }
}
.page-head--wide .page-head__lede,
.page-head__lede--wide {
  font-size: clamp(16px, 1.25vw, 20px);
  max-width: 60ch;
  margin-top: 36px;
}

/* ============ STANDALONE CONTACT FORM ============ */
.form-standalone {
  max-width: 900px;
  margin: 0 auto;
}
.form-standalone__head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}
.form-standalone__head .label { display: inline-flex; }
.form-standalone__lede {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--concrete-mid);
  max-width: 56ch;
  margin: 20px auto 0;
}
.form-standalone__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.form-standalone__submit .form__hint { margin: 0; max-width: 36ch; }
.form--wide { gap: 24px; }

/* ============ DIRECT LINES (4 inline cards) ============ */
.contact-lines__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
@media (max-width: 900px) {
  .contact-lines__head { grid-template-columns: 1fr; gap: 24px; }
}
.contact-lines__note {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--concrete-warm);
  max-width: 32ch;
}
.contact-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .contact-lines { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .contact-lines { grid-template-columns: 1fr; } }
.contact-lines .contact-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.contact-lines .contact-card__name {
  font-size: 20px;
  line-height: 1.1;
  margin-bottom: auto;
  padding-bottom: 16px;
}
.contact-card__hours {
  font-family: var(--ff-mono);
  font-size: 12px;
  line-height: 1.8;
  color: var(--concrete-light);
  padding: 6px 0;
}

/* ============ MAP META BUTTONS ROW ============ */
.map-meta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.map-meta__buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.contact-card {
  border-top: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.025);
  padding: 28px 28px 32px;
  margin-bottom: 16px;
  transition: background var(--dur) var(--ease-out);
}
.contact-card:hover { background: rgba(255, 255, 255, 0.05); }
.contact-card__role {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 6px;
}
.contact-card__name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--concrete-pale);
  margin-bottom: 16px;
}
.contact-card a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--concrete-pale);
  padding: 10px 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.contact-card a:hover { color: var(--accent-light); }

/* ============ FORM ============ */
.form {
  display: grid;
  gap: 20px;
}
.form__field { display: flex; flex-direction: column; gap: 10px; }
.form__field label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}
.form__field input,
.form__field textarea,
.form__field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  color: var(--concrete-pale);
  font-family: var(--ff-body);
  font-size: 16px; /* >= 16px prevents iOS focus-zoom */
  transition: border-color var(--dur-fast) var(--ease-out);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus {
  outline: none;
  border-color: var(--accent-light);
}
.form__field textarea { resize: vertical; min-height: 120px; }
.form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%23B8B2AA' stroke-width='1.4' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
  cursor: pointer;
}
.form__field select option { background: var(--concrete-dark); color: var(--concrete-pale); }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

/* ============ MAP ============ */
.map-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-top: 2px solid var(--accent);
  background: var(--concrete-mid);
}
.map-wrap iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.6) contrast(0.95);
}

/* ============ FOOTER ============ */
.footer {
  position: relative;
  z-index: 5;              /* layered above the fixed hero (z:0) and .flow (z:1) */
  display: flex;
  flex-direction: column-reverse;   /* swap row order: PROSTEP wordmark on top, CTA + menu below */
  min-height: 100vh;
  background: var(--black);
  border-top: 1px solid var(--line);
}

/* TOP ROW — 3-column menu, 50vh */
.footer__row { position: relative; }
.footer__row--top {
  flex: 0 0 auto;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;     /* CTA at top of this row, horizontal nav at the bottom */
  padding: clamp(48px, 7vh, 88px) clamp(24px, 6vw, 96px) 0;
  /* With .footer column-reverse, this row sits BELOW --bottom visually.
     border-top draws the divider between the two rows. */
  border-top: 1px solid var(--line);
}
@media (max-width: 700px) {
  .footer__row--top { padding: 48px 24px 0; }
}

/* Contact CTA — 2-column: left contact info, right live map. Full row width. */
.footer__col--cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  flex: 1 1 auto;
  justify-content: center;
  max-width: none;
  padding-bottom: clamp(24px, 3vh, 40px);
}
.footer__cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
  align-items: stretch;
}
@media (max-width: 900px) {
  .footer__cta-grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer__cta-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 56ch;
}
.footer__cta-title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-transform: none;
  white-space: nowrap;
  max-width: 100%;
}
@media (max-width: 900px) {
  .footer__cta-title { white-space: normal; font-size: clamp(28px, 6vw, 44px); }
}
.footer__cta-sub {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: clamp(15px, 1.2vw, 20px);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--accent);
  margin: 6px 0 0;
}
.footer__cta-body {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 4px 0 0;
  max-width: 62ch;
}
.footer__col--cta .btn { margin-top: 12px; }

/* Direct lines list — neat 2-col row, lower case keys on the left, mono values right */
.footer__cta-lines {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  display: grid;
  gap: 0;
  width: 100%;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.footer__cta-lines li {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 44px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
/* :not(.btn) raises specificity above `.footer__col a:not(.btn){display:inline-block}`
   so the number link stays a flex box and vertically centres its text — otherwise
   the text pins to the top of its 44px tap target and sits above the label. */
.footer__cta-lines li > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__cta-lines li:first-child { border-top: 1px solid var(--line); }
.footer__cta-lines li > span {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.footer__cta-lines li > a {
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color var(--dur-fast) var(--ease-out), letter-spacing 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__cta-lines li > a:hover {
  color: var(--accent);
  letter-spacing: 0.08em;
}

/* Right column — live map + address */
.footer__cta-map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 100%;
}
.footer__map-address {
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.footer__map-label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.footer__map-link {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  min-height: 44px;
  padding: 6px 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__map-link:hover { color: var(--accent); transform: translateX(4px); }

/* — Footer map: contact-page (.ymap) frame styling wrapped around the live
   Google embed. Keeps the working iframe, adopts the clean brand frame. — */
.footer__map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-top: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--concrete-pale);
  box-shadow: 0 14px 38px -18px rgba(13, 13, 12, 0.22);
}
.footer__map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* neutral grey basemap to match the contact map treatment */
  filter: grayscale(1) contrast(1.04) brightness(1.01);
}
.footer__map-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border, var(--line-dark));
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
}
.footer__map-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-round);
  background: var(--accent-light);
}

/* Horizontal inline menu — full row width so the link strip spans the same
   width as the PROSTEP H1 in the bottom row. Links spread edge-to-edge. */
.footer__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  padding: 14px 0;
  margin-top: clamp(20px, 3vh, 40px);
}
.footer__menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 12px clamp(16px, 2.2vw, 28px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition:
    color 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__menu a:first-child { padding-left: 0; }
.footer__menu a:last-child  { padding-right: 0; }
.footer__menu a + a::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 1px; height: 12px;
  background: var(--line);
  transform: translateY(-50%);
  opacity: 0.7;
}
.footer__menu a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .footer__menu { gap: 4px 0; }
  .footer__menu a { padding: 10px 14px; font-size: 10px; letter-spacing: 0.16em; }
}

/* BOTTOM ROW — large PROSTEP wordmark fills 90% of section, copyright pinned below */
.footer__row--bottom {
  flex: 1 1 50vh;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  /* Same horizontal padding as the top row so both rows share a common
     left/right edge and the H1 lines up with the CTA + menu above. */
  padding: 0 clamp(24px, 6vw, 96px);
  overflow: hidden;
}
.footer__bigmark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;        /* left-align: H1 starts at the row's left padding edge */
  justify-content: center;
  gap: clamp(8px, 1.4vh, 18px);
  width: 100%;
  height: 90%;             /* fills 90% of bottom-row height */
  text-decoration: none;
  color: inherit;
  text-align: left;
  padding: 0;
}
.footer__bigmark-name {
  display: block;
  width: 100%;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(72px, 26vw, 460px);
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}
.footer__bigmark-tag {
  font-family: var(--ff-mono);
  font-size: clamp(12px, 1.2vw, 18px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__col h4 {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 24px;
}
.footer__col ul li {
  margin-bottom: 12px;
  /* contain the lift so siblings don't shift */
  transform-origin: left center;
}
.footer__col a:not(.btn) {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--concrete-light);
  transform-origin: left center;
  transition:
    color var(--dur-fast) var(--ease-out),
    font-weight var(--dur-fast) var(--ease-out),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer__col a:not(.btn):hover {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.01em;
  transform: translate3d(4px, -2px, 0) scale(1.04);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px clamp(24px, 6vw, 96px);
  border-top: 1px solid var(--line);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}

/* ============ HELPERS ============ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.gap-2 { gap: 8px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; } .mb-10 { margin-bottom: 40px; } .mb-12 { margin-bottom: 48px; }
.mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; }
.mt-12 { margin-top: 48px; }
.text-center { text-align: center; }

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

/* ============ FADE-IN ON SCROLL ============ */
/* Tempo matches the GSAP entrances (≈1s, deep settle) so the gallery doesn't
   snap in next to the slower masked reveals elsewhere. */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1000ms var(--ease-lux), transform 1150ms var(--ease-lux);
}
/* Neighbours crossing the threshold in the same frame fan out instead of
   popping as one block. */
.reveal:nth-child(2)  { transition-delay: 70ms; }
.reveal:nth-child(3)  { transition-delay: 140ms; }
.reveal:nth-child(4)  { transition-delay: 45ms; }
.reveal:nth-child(5)  { transition-delay: 115ms; }
.reveal:nth-child(6)  { transition-delay: 60ms; }
.reveal:nth-child(7)  { transition-delay: 130ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; transition-delay: 0s !important; }
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ DISPLAY HOOKS FOR LIGHT SECTIONS ============ */
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .label::before { background: var(--accent); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .label { color: var(--accent); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .kicker { color: var(--concrete-mid); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) :is(.display-1, .display-2, .display-3, .display-4) { color: var(--concrete-dark); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .body-lg { color: var(--concrete-mid); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .body-md { color: var(--concrete-warm); }

/* =========================================================
   LIGHT THEME — final colour pass.
   Structure / type / spacing / motion unchanged.
   ========================================================= */
:root {
  --bg-page: var(--concrete-white);   /* #F5F2EE */
  --bg-elev: var(--concrete-pale);    /* #E8E3DD */
  --ink:       var(--concrete-dark);  /* #1C1C1B */
  --ink-soft:  var(--concrete-mid);   /* #3A3835 */
  --ink-mute:  var(--concrete-warm);  /* #6B6560 */
  --line:        rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
}

body { background: var(--bg-page); color: var(--ink); }
::selection { background: var(--accent); color: var(--white); }

/* ── NAV ── light-theme background applies only once scrolled */
.nav.is-scrolled {
  background: rgba(245, 242, 238, 0.92);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 32px -18px rgba(28, 28, 27, 0.18);
}
.nav__name { color: var(--ink); }
.nav__menu a { color: var(--ink-mute); }
.nav__menu a:hover,
.nav__menu a.is-active { color: var(--ink); }
.nav__cta { color: var(--accent); border-color: var(--accent); }
.nav__cta:hover { color: var(--white); }
.nav__burger { color: var(--ink); }
.nav__mark { filter: none; background: transparent; }

.nav__mobile { background: var(--bg-page); }
.nav__mobile a { color: var(--ink); border-bottom-color: var(--line); }

/* ── HERO ── */
.hero { background: var(--bg-page); }
.hero__left { border-left-color: var(--accent); }
.hero__title { color: var(--ink); }
.hero__title .green { color: var(--accent); }
.hero__sub { color: var(--ink-soft); }
.hero__rule { background: var(--accent); }
.hero__lede { color: var(--ink-mute); }
.hero__meta { border-top-color: var(--line); }
.hero__meta-k { color: var(--ink-mute); }
.hero__meta-v { color: var(--ink); }
.hero__right::after {
  background: linear-gradient(90deg, var(--bg-page) 0%, transparent 35%, transparent 100%);
}

/* ── PAGE HEAD ── */
.page-head {
  background: var(--bg-page);
  border-top-color: var(--accent);
}
.page-head__chapnum { color: rgba(0, 0, 0, 0.06); }
.page-head__title { color: var(--ink); }
.page-head__lede { color: var(--ink-mute); }

/* ── SECTION BACKGROUNDS ── */
.section-dark, .section-black { background: var(--bg-page); }

/* ── MARQUEE STATEMENT ── */
.marquee-statement {
  background: var(--bg-elev);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.marquee-statement p { color: var(--ink-soft); }
.marquee-statement p strong { color: var(--ink); }
.marquee-statement p .green { color: var(--accent); }

/* ── DISPLAY / BODY / LABELS ── */
.display-1, .display-2, .display-3, .display-4 { color: var(--ink); }
.body-lg { color: var(--ink-soft); }
.body-md, .body-sm { color: var(--ink-mute); }
.subhead { color: var(--ink-soft); }
.kicker { color: var(--ink-mute); }
.label { color: var(--accent); }
.green { color: var(--accent); }

/* ── CAPABILITY GRID ── */
.cap-grid { border-top-color: var(--line); }
.cap { border-right-color: var(--line); border-bottom-color: var(--line); }
.cap:hover { background: rgba(0, 0, 0, 0.025); }
.cap__title { color: var(--ink); }
.cap__body { color: var(--ink-mute); }
.cap__num { color: var(--accent); }
.cap::before { background: var(--accent); }

/* ── STATS ── */
.stat { border-color: var(--line-strong); }
.stat__num { color: var(--ink); }
.stat__num .green { color: var(--accent); }
.stat__label { color: var(--ink-mute); }

/* ── CLIENTS MARQUEE ── */
.clients {
  background: var(--bg-elev);
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.clients::before { background: linear-gradient(90deg, var(--bg-elev), transparent); }
.clients::after { background: linear-gradient(-90deg, var(--bg-elev), transparent); }
.clients__item { color: var(--ink-mute); }
.clients__item:hover { color: var(--ink); }

/* ── TAGLINE BLOCK ── */
.tagline-block {
  background: var(--bg-elev);
  border-top-color: var(--accent);
}
.tagline-block__big { color: var(--ink); }
.tagline-block__big .green { color: var(--accent); }
.tagline-block__end { color: var(--ink-mute); }

/* ── PRODUCTS NAV ── */
.products-nav { background: var(--bg-page); }
.products-nav__bg img { filter: brightness(0.55) contrast(1.1) saturate(0.55); }
.products-nav__bg::after {
  background: linear-gradient(90deg, var(--bg-page) 25%, rgba(245, 242, 238, 0.55) 100%);
}
.products-nav__item { color: var(--ink-mute); }
.products-nav__item:hover,
.products-nav__item.is-active { color: var(--ink); }
.products-nav__side { border-left-color: var(--line); }
@media (max-width: 900px) {
  .products-nav__side { border-top-color: var(--line); }
}

/* ── PHOTOS — softer editorial filter on light bg ── */
.hero__photo {
  filter: brightness(1) contrast(1.05) saturate(0.85);
}
.split__media img {
  filter: brightness(0.95) contrast(1.05) saturate(0.8);
}
.gallery img {
  filter: brightness(0.92) contrast(1.05) saturate(0.8);
}
.gallery > a:hover img {
  filter: brightness(1) contrast(1.08) saturate(0.95);
}
.tile img {
  filter: brightness(0.78) contrast(1.05) saturate(0.75);
}
.tile:hover img {
  filter: brightness(0.88) contrast(1.08) saturate(0.85);
}

/* ── SPEC LIST ── */
.spec-list { border-top-color: var(--line); }
.spec-list li {
  border-bottom-color: var(--line);
  color: var(--ink-soft);
}
.spec-list li > span:first-child { color: var(--accent); }

/* ── CONTACT ── */
.contact-card {
  background: rgba(0, 0, 0, 0.035);
  border-top-color: var(--accent);
}
.contact-card:hover { background: rgba(0, 0, 0, 0.06); }
.contact-card__role { color: var(--accent); }
.contact-card__name { color: var(--ink); }
.contact-card a { color: var(--ink); }
.contact-card a:hover { color: var(--accent); }
.contact-card p { color: var(--ink) !important; }

/* ── FORM ── */
.form__field label { color: var(--ink-mute); }
.form__field input,
.form__field textarea,
.form__field select {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}
.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus { border-color: var(--accent); }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--ink-mute); opacity: 0.6; }
.form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%231C1C1B' stroke-width='1.4' fill='none'/></svg>");
}
.form__field select option { background: var(--bg-page); color: var(--ink); }

/* ── MAP — un-invert filter for light theme ── */
.map-wrap {
  border-top-color: var(--accent);
  background: var(--bg-elev);
}
.map-wrap iframe { filter: saturate(0.75) contrast(0.95); }

/* ── FOOTER ── */
.footer {
  background: var(--bg-elev);
  border-top-color: var(--line);
}
.footer__grid { border-bottom-color: var(--line); }
.footer__brand p { color: var(--ink-mute); }
.footer__col h4 { color: var(--accent); }
.footer__col a:not(.btn) { color: var(--ink-soft); }
/* hover styling (color/weight/lift) defined once in the base .footer__col a:hover rule */
.footer__bottom { color: var(--ink-mute); border-top-color: var(--line); }

/* ── BUTTONS — pale becomes dark-on-light ── */
.btn--pale {
  color: var(--ink);
  border-color: var(--ink-mute);
  --btn-fill: var(--ink);
  --btn-shadow: 0 14px 30px -14px rgba(13,13,12,0.35);
}
.btn--pale:hover { color: var(--white); border-color: var(--ink); }
.btn--green {
  color: var(--accent);
  border-color: var(--accent);
}
.btn--green:hover { color: var(--white); border-color: var(--accent); }

/* ── HOLD OVER TILE/GALLERY OVERLAYS (still over darkened photos) ── */
.tile__title { color: var(--white); }
.tile__sub { color: var(--concrete-light); }
.tile__num { color: var(--accent-light); }
.tile__more { color: var(--accent-light); }
.gallery__tag {
  color: var(--white);
  background: rgba(13, 13, 12, 0.7);
  border-left-color: var(--accent-light);
}

/* ── DIVIDER ── */
.divider { background: var(--line); }


/* =========================================================
   BASE-STRUCTURES-STYLE HOMEPAGE COMPONENTS
   Light theme · green accent (#1A8040)
   ========================================================= */

/* ── 01. HERO INTRO (animated SVG lines + body copy) ── */
/* Permanent fixed backdrop — the hero stays at the viewport behind .flow */
.hi {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-page);
  display: flex;
  align-items: center;
  padding: var(--nav-h) 0 0;
  overflow: hidden;
  z-index: 0;
}

.hi__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  min-width: 150vw;
}
@media (min-width: 1024px) { .hi__svg { min-width: 100%; } }

.hi__svg path {
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: hi-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}
.hi__svg path[data-line-2] { animation-delay: 0.65s; }
@keyframes hi-draw { to { stroke-dashoffset: 0; } }

.hi__dot {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: hi-dot 0.8s var(--ease-out) 2.4s forwards, hi-pulse 2.6s ease-in-out 3.2s infinite;
}
@keyframes hi-dot { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hi-pulse { 50% { transform: scale(1.25); } }

.hi__copy {
  position: relative;
  z-index: 2;
  max-width: 80vw;
}
@media (min-width: 1024px) { .hi__copy { max-width: 56rem; } }

.hi__h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 26px;
  text-transform: uppercase;
}
.hi__h1 strong { color: var(--accent); font-weight: 800; }
.hi__copy p {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 44rem;
}
.hi__copy p strong,
.hi__copy p b { color: var(--ink); font-weight: 700; }
.hi__copy p .hl {
  color: var(--accent);
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(37, 168, 83, 0.18) 62%, rgba(37, 168, 83, 0.18) 95%, transparent 95%);
  padding: 0 2px;
}


/* ── 02. SHOWREEL (video / image hover with overlay heading) ── */
.sr {
  position: relative;
  background: var(--bg-elev);
  cursor: pointer;
  overflow: hidden;
  min-height: 100vh;
}
.sr__gradient {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.sr__inner {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(20px, 3.4vh, 36px);
  width: min(640px, calc(100% - 48px));
}

.sr__media {
  position: absolute;
  top: 12vh;
  right: 11.5%;
  bottom: 12vh;
  left: 11.5%;
  overflow: hidden;
  background: var(--ink);
  will-change: top, right, bottom, left, box-shadow;
  box-shadow:
    0 0 0 1px rgba(37, 168, 83, 0.18),
    0 0 32px -4px rgba(37, 168, 83, 0.18);
  transition: box-shadow 0.6s var(--ease-out);
}
.sr:hover .sr__media {
  box-shadow:
    0 0 0 1px rgba(37, 168, 83, 0.55),
    0 0 60px -6px rgba(37, 168, 83, 0.45),
    0 0 120px -20px rgba(37, 168, 83, 0.35);
}
@media (max-width: 700px) {
  .sr__media { top: 8vh; right: 5%; bottom: 8vh; left: 5%; }
}

.sr__media img,
.sr__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.75) contrast(1.05) saturate(0.7);
}

.sr__heading {
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sr__heading h2 {
  display: flex;
  gap: clamp(0.25em, 1vw, 0.6em);
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(32px, 6vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}
.sr__heading h2 span {
  display: inline-block;          /* visible by default; GSAP animates in on scroll */
}

/* About-us copy: anchored to the section, stays fixed while the media grows */
.sr__media { isolation: isolate; }
.sr__media::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(
    to top,
    rgba(13,13,12,0.78) 0%,
    rgba(13,13,12,0.5)  35%,
    rgba(13,13,12,0)    100%
  );
  pointer-events: none;
  z-index: 1;
}
/* Phase 2 — black wash fades over the full-bleed image */
.sr__overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}
.sr__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.sr__extra {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sr__copy .sr__cta { align-self: center; }
.sr__eyebrow {
  display: inline-block;
  font-family: var(--ff-mono, var(--ff-body));
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 14px;
}
.sr__h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(20px, 1.9vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--white);
  margin: 0 0 14px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.sr__p {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 22px;
  max-width: 36rem;
}
.sr__cta { align-self: flex-start; }
@media (max-width: 700px) {
  .sr__copy { max-width: none; }
  .sr__h3 { font-size: 19px; }
}


/* ── 03. PROJECT CAROUSEL ── */
.pc {
  background: var(--bg-page);
  overflow: hidden;
  position: relative;
}
.pc__title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-align: center;
  margin-bottom: 40px;
}

.pc__track {
  display: flex;
  gap: 28px;
  padding: 60px 0;            /* transform-based endless loop — no h-padding */
  width: max-content;          /* let the track grow with its cards */
  will-change: transform;
  perspective: 1800px;
  touch-action: pan-y;         /* allow vertical page scroll, capture horizontal drag */
  user-select: none;
}
.pc__track::-webkit-scrollbar { display: none; }

/* DESKTOP: grab affordance — interaction is drag-only (wheel/trackpad
   horizontal native scroll is blocked in JS; vertical wheel scrolls the page). */
@media (hover: hover) and (pointer: fine) {
  .pc__track { cursor: grab; }
  .pc__track.is-dragging { cursor: grabbing; }
}

.pc__card {
  position: relative;
  flex: 0 0 clamp(260px, 36vw, 440px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--concrete-mid);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-out), filter 0.7s var(--ease-out);
}
.pc__card:nth-child(odd)  { transform: translateY(28px) rotateY(-3deg); }
.pc__card:nth-child(even) { transform: translateY(-28px) rotateY(3deg); }
.pc__card:hover { transform: translateY(0) scale(1.03) rotateY(0); z-index: 2; }

.pc__card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.78) contrast(1.05) saturate(0.7);
  transition: transform 1s var(--ease-out), filter 0.6s var(--ease-out);
}
.pc__card:hover img {
  transform: scale(1.06);
  filter: brightness(0.92) contrast(1.08) saturate(0.85);
}

.pc__label {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 22px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  border-left: 2px solid var(--accent-light);
  white-space: nowrap;
  z-index: 2;
}

.pc__cta { display: flex; justify-content: center; margin-top: 32px; padding-bottom: 24px; }


/* ── 04. SIMPLE LR TEXT ── */
.lr {
  background: var(--bg-page);
  padding: clamp(48px, 6vw, 96px) 0;
}
.lr__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
}
.lr__copy {
  grid-column: 7 / span 6;
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.1vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}
.lr__copy a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.lr__copy a:hover { color: var(--accent-light); }
.lr__copy p { margin: 0; }
.lr__eyebrow {
  display: inline-block;
  font-family: var(--ff-mono, var(--ff-body));
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.lr__subheading {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(24px, 2.4vw, 36px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 22px;
  max-width: 28ch;
}

/* Large Prostep mark to the left of the copy — flat, with a soft brand glow */
.lr__mark {
  grid-column: 1 / span 5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px) 0;
}
.lr__mark { overflow: visible; }
.lr__mark img {
  position: relative;
  width: clamp(240px, 34vw, 440px);
  max-width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block;
  background: transparent;
  filter: none;
  animation: lrMarkFloat 7s ease-in-out infinite;
  will-change: translate;
  z-index: 1;
}
.lr__mark-glow {
  display: none;
  position: absolute;
  width: clamp(326px, 46vw, 671px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: transparent;
  filter: none;
  z-index: 0;
  pointer-events: none;
  animation: lrMarkGlowPulse 7s ease-in-out infinite;
}
@keyframes lrMarkFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes lrMarkGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .lr__mark img,
  .lr__mark-glow { animation: none; }
}
@media (max-width: 900px) {
  .lr__mark { grid-column: span 12; order: -1; padding: 8px 0 16px; }
  .lr__copy { grid-column: span 12; }
  .lr__mark img { transform: rotateX(8deg) rotateY(-16deg) rotateZ(-1deg); }
}


/* ── 05. SPOTLIGHT (tension gradient + big heading) ── */
/* Sticky stage wraps .sp + .pi so .sp pins until .pi has scrolled fully over it */
.sp-stage { position: relative; }
.sp {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg-page);
  overflow: hidden;
}
.sp__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sp__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.96) contrast(1.05) saturate(0.85);
}
.sp__overlay {
  position: absolute;
  inset: 0;
  background: rgba(232, 227, 221, 0.62);
  mix-blend-mode: normal;
}
/* .pi sits above .sp visually so it covers the sticky bg as it scrolls up */
.sp-stage .pi { position: relative; z-index: 2; }
.sp__dot {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 1;
  top: 50%;
  left: 26%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 6px rgba(26, 128, 64, 0.18);
  animation: sp-dot-pulse 2.4s ease-in-out infinite;
}
@media (min-width: 768px) { .sp__dot { width: 18px; height: 18px; } }
@keyframes sp-dot-pulse {
  50% { box-shadow: 0 0 0 12px rgba(26, 128, 64, 0.08); }
}

.sp__inner {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 8vw, 120px) 80px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 600px) { .sp__inner { padding-left: 24px; padding-right: 24px; } }
.sp__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(56px, 10vw, 144px);
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.sp__title span {
  display: block;
  overflow: hidden;
}
.sp__title span > b {
  display: block;
  font-weight: inherit;           /* visible by default; GSAP animates in on scroll */
}

.sp__body {
  margin-top: clamp(20px, 2.6vw, 40px);
  margin-left: auto;
  max-width: 50ch;
}
.sp__body p {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--ink-mute);
}
.sp__body p .hl { color: var(--accent); font-weight: 700; }
.sp__body p strong { color: var(--ink); font-weight: 700; }


/* ── FEATURED PRODUCT · Structural Lintels (full-bleed image hero) ── */
.fpr {
  position: relative;
  min-height: clamp(520px, 80vh, 820px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.fpr__media { position: absolute; inset: 0; z-index: 0; }
.fpr__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.92) contrast(1.02) saturate(0.9);
}
.fpr__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13,13,12,0.88) 0%, rgba(13,13,12,0.64) 40%, rgba(13,13,12,0.14) 76%, rgba(13,13,12,0) 100%),
    linear-gradient(0deg, rgba(13,13,12,0.55) 0%, rgba(13,13,12,0) 42%);
}
.fpr__inner { position: relative; z-index: 1; width: 100%; }
.fpr__copy { max-width: 40rem; padding: clamp(64px, 9vh, 120px) 0; }
.fpr__eyebrow { color: var(--accent-light); margin-bottom: 18px; }
.fpr__title {
  font-family: var(--ff-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(52px, 8.5vw, 128px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--white);
  margin: 0 0 20px;
}
.fpr__title span { color: var(--accent-light); display: block; }
.fpr__lede {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 26px;
  max-width: 34rem;
}
.fpr__lede strong { color: var(--white); font-weight: 700; }
.fpr__specs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 34px;
  padding: 0;
}
.fpr__specs li {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 8px 14px;
}
.fpr__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
/* Secondary "Add to quote" button — light outline for the dark hero */
.fpr__quote {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
  --btn-fill: #ffffff;
}
.fpr__quote:hover { color: var(--ink); border-color: #ffffff; }
.fpr__quote.is-in-quote {
  color: #ffffff;
  border-color: var(--accent-light);
  background: rgba(37, 168, 83, 0.20);
  --btn-fill: var(--accent-light);
}
@media (max-width: 640px) {
  .fpr__scrim {
    background: linear-gradient(0deg, rgba(13,13,12,0.92) 6%, rgba(13,13,12,0.55) 56%, rgba(13,13,12,0.34) 100%);
  }
  .fpr__copy { max-width: none; }
  .fpr__actions { gap: 12px; }
}


/* ── 06. PRODUCTS INTRO (full-bleed with bg swap) ── */
.pi {
  position: relative;
  background: var(--bg-page);
  overflow: hidden;
  min-height: clamp(540px, 80vh, 800px);
  display: flex;
  align-items: center;
}

.pi__backgrounds {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.pi__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.pi__bg.is-visible { opacity: 1; }
.pi__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.05) saturate(0.65);
}
.pi__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(245,242,238,0.92) 0%, rgba(245,242,238,0.55) 55%, rgba(245,242,238,0.18) 100%);
}

.pi__inner {
  position: relative;
  z-index: 2;
  padding: clamp(48px, 6vw, 96px) 0;
}

.pi__list { display: flex; flex-direction: column; gap: 6px; }
.pi__name {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(21px, 3.4vw, 48px);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--ink-mute);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
  position: relative;
  transition: color var(--dur) var(--ease-out), padding-left var(--dur-slow) var(--ease-out);
}
.pi__name::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.pi__name.is-active,
.pi__name:hover {
  color: var(--ink);
  padding-left: 80px;
}
.pi__name.is-active::before,
.pi__name:hover::before { width: 60px; }


/* ── 07. INSIGHTS (blog cards 3-up) ── */
.in {
  background: var(--bg-page);
  padding: clamp(60px, 8vw, 120px) 0;
}
.in__head { text-align: center; margin-bottom: 48px; }
.in__head h2 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(22px, 2vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.in__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 16px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .in__grid { grid-template-columns: 1fr; gap: 32px; } }

.in__card {
  display: block;
  border: 2px solid transparent;
  background: transparent;
  border-radius: var(--r-lg);
  overflow: hidden;              /* clip media + copy to one clean card shape */
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
/* Inner zones inherit the card's clip — no independent arc that would notch
   the seam between the image and the copy below it. */
.in__card-media,
.in__card-copy { border-radius: 0; }
.in__card:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.in__card:hover .in__card-copy h3,
.in__card:hover .in__card-copy p,
.in__card--intro:hover h3,
.in__card--intro:hover p,
.in__card--intro:hover .in__card-eyebrow { color: var(--white); }

/* intro card variant — sits in the grid in place of a media card */
.in__card--intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.4vw, 34px);
  background: var(--concrete-pale);
  border-color: var(--concrete-mid);
}
.in__card-eyebrow {
  font-family: var(--ff-mono, var(--ff-body));
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
  transition: color var(--dur) var(--ease-out);
}
.in__card--intro h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 14px;
  transition: color var(--dur) var(--ease-out);
}
.in__card--intro p {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 22px;
  transition: color var(--dur) var(--ease-out);
}
.in__card-cta { align-self: flex-start; }
.in__card--intro:hover .in__card-cta { background: var(--white); color: var(--accent); border-color: var(--white); }
.in__card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--concrete-mid);
}
.in__card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.05) saturate(0.85);
  transition: transform 0.7s var(--ease-out);
}
.in__card:hover .in__card-media img { transform: scale(1.07); }
.in__card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.in__card:hover .in__card-media::after { opacity: 1; }

.in__card-copy { padding: 22px 22px 28px; display: flex; flex-direction: column; }
.in__card-copy .in__card-eyebrow {
  display: inline-block;
  font-family: var(--ff-mono, var(--ff-body));
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
  transition: color var(--dur) var(--ease-out);
}
.in__card-copy h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 12px;
  transition: color var(--dur) var(--ease-out);
}
.in__card-copy p {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 16px;
  transition: color var(--dur) var(--ease-out);
}
.in__card-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line, rgba(0,0,0,0.12));
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--dur) var(--ease-out);
}
.in__card-list li {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mute);
  padding-left: 18px;
  position: relative;
  transition: color var(--dur) var(--ease-out);
}
.in__card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1px;
  background: var(--accent);
  transition: background var(--dur) var(--ease-out);
}
.in__card-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  font-family: var(--ff-mono, var(--ff-body));
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  transition: color var(--dur) var(--ease-out), gap var(--dur) var(--ease-out);
}
.in__card:hover .in__card-more { gap: 16px; }

/* unify hover state across all in-card text */
.in__card:hover .in__card-copy h3,
.in__card:hover .in__card-copy p,
.in__card:hover .in__card-copy .in__card-eyebrow,
.in__card:hover .in__card-list li,
.in__card:hover .in__card-more { color: var(--white); }
.in__card:hover .in__card-list { border-color: rgba(255,255,255,0.35); }
.in__card:hover .in__card-list li::before { background: var(--white); }
.in__cta { display: flex; justify-content: center; }


/* ── 08. COOKIE BANNER ── */
.cookie {
  position: fixed;
  right: 12px; bottom: 12px;
  z-index: 200;
  width: calc(100vw - 24px);
  max-width: 460px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 28px 28px 22px;
  font-family: var(--ff-body);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.18);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.cookie.is-hidden { transform: translateY(120%); opacity: 0; pointer-events: none; }
.cookie__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}
.cookie__top .label { color: var(--accent); }
.cookie__close {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  line-height: 0;
  transition: color var(--dur-fast) var(--ease-out);
}
.cookie__close:hover { color: var(--ink); }
.cookie p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.cookie p a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
}
.cookie__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.cookie__btn {
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid currentColor;
  cursor: pointer;
  background: transparent;
  /* shares the button family's smooth colour + lift interaction */
  transition:
    color 460ms cubic-bezier(.65,.05,.36,1),
    background-color 460ms cubic-bezier(.65,.05,.36,1),
    border-color 460ms cubic-bezier(.65,.05,.36,1),
    transform 360ms cubic-bezier(.2,.7,.2,1),
    box-shadow 460ms cubic-bezier(.65,.05,.36,1);
}
.cookie__btn:hover { transform: translateY(-2px); }
.cookie__btn:active { transform: translateY(0); transition-duration: 120ms; }
.cookie__btn--accept {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.cookie__btn--accept:hover {
  background: var(--accent-light);
  border-color: var(--accent-light);
  box-shadow: 0 14px 34px -14px rgba(26, 128, 64, 0.55);
}
.cookie__btn--decline { color: var(--ink-mute); }
.cookie__btn--decline:hover { color: var(--ink); border-color: var(--ink); }


/* ── 09. SECTION RHYTHM ── */
/* .flow sits above the fixed hero. Margin-top reserves scroll runway for the
   hero's fade phase, then the .flow content scrolls up over the (fixed) hero. */
.flow {
  position: relative;
  z-index: 1;
  background: var(--bg-page);
  margin-top: 200vh;
}
.flow > * + * { margin-top: clamp(48px, 7vw, 128px); }
.flow-tight > * + * { margin-top: clamp(32px, 4vw, 72px); }

/* Spotlight / products stage butts directly against the showreel so the black
   phase-2 overlay transitions cleanly into the spotlight bg with no gap. The
   bottom padding mirrors the project carousel below for vertical rhythm. */
/* Inside the sticky stage the sections pin and get covered in turn:
   spotlight pins → Featured Product pins full-height over it → the product
   list scrolls up over the Featured Product. */
.flow > .sp-stage { margin-top: 0; padding-bottom: clamp(48px, 6vw, 96px); }
.sp-stage .fpr {
  position: sticky;
  top: 0;
  min-height: 100vh;
  z-index: 2;
}

/* ── 10. "WHAT WE DO" SECTION PADDING (products navigator) ── */
.pi .wrap {
  padding-left: 100px;
  padding-right: 100px;
}
@media (max-width: 768px) {
  .pi .wrap { padding-left: 24px; padding-right: 24px; }
}

/* ── 11. HERO / PAGE-HEAD BACKGROUND IMAGES ── */
/* Scroll-driven hero shrink + blur — JS already smooths via rAF lerp, so no CSS transition needed (would fight the lerp). */
.page-head > .wrap {
  transform: scale(var(--head-scale, 1)) translateZ(0);
  transform-origin: top center;
  filter: blur(var(--head-blur, 0px));
  opacity: var(--head-opacity, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .page-head > .wrap { transform: none !important; filter: none !important; opacity: 1 !important; }
  .page-head__bg img { transform: none !important; }
}
.page-head__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-head__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.42) contrast(1.08) saturate(0.55) grayscale(0.12);
  transform: scale(var(--bg-zoom, 1)) translateZ(0);
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}
.page-head__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13,13,12,0.55) 0%, rgba(13,13,12,0.4) 45%, rgba(13,13,12,0.8) 100%),
    linear-gradient(90deg, rgba(13,13,12,0.65) 0%, rgba(13,13,12,0.25) 60%, rgba(13,13,12,0.1) 100%);
}
.page-head > .wrap { position: relative; z-index: 2; }
/* over a photo, restore LIGHT text (light-theme had made these dark) */
.page-head:has(.page-head__bg) .page-head__chapnum { color: rgba(255,255,255,0.10); }
.page-head:has(.page-head__bg) .page-head__title { color: var(--white); }
.page-head:has(.page-head__bg) .page-head__lede { color: var(--concrete-light); }
.page-head:has(.page-head__bg) .label { color: var(--accent-light); }
.page-head:has(.page-head__bg) .label::before { background: var(--accent-light); }

/* homepage hero — concrete photo backdrop */
.hi__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hi__bg img,
.hi__bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: brightness(0.92) contrast(1.05) saturate(0.7) grayscale(0.15);
}
/* light wash so display copy stays legible — real div so GSAP can tween it */
.hi__wash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(245,242,238,0.78) 0%, rgba(245,242,238,0.55) 45%, rgba(245,242,238,0.32) 100%),
    linear-gradient(180deg, rgba(245,242,238,0.5) 0%, rgba(245,242,238,0.18) 35%, rgba(245,242,238,0.45) 100%);
  will-change: opacity;
}
/* hero SVG removed visually */
.hi__svg { display: none; }
/* lift content above the backdrop */
.hi .wrap, .hi__cue { position: relative; z-index: 1; }


/* =========================================================
   SIGNATURE INTERACTIONS
   Full-screen menu · drag cursor · scroll reveals
   ========================================================= */

/* ── Always-visible menu toggle (BS-style) ── */
.nav__toggle {
  display: flex;                 /* now shown on ALL screen sizes */
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 320;
}
@media (max-width: 900px) { .nav__toggle { display: flex; } }

/* BS-style burger — 3 SVG cubic paths morphed via JS to form an X */
.nav__burger {
  width: 26px;
  height: 18px;
  display: block;
  color: var(--ink);
  overflow: visible;
}
.menu-open .nav__burger { color: var(--ink); }
.nav__burger path { transition: stroke 220ms var(--ease-out); }

/* ── Curtain overlay (animated SVG) ── */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 290;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.menu-overlay__path { fill: var(--white); }

/* ── Full-screen menu panel ── */
.menu-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) clamp(24px, 6vw, 96px) 48px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.menu-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.menu-panel__inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: var(--wrap-max);
  margin: 0 auto;
}
@media (max-width: 900px) {
  .menu-panel__inner { grid-template-columns: 1fr; gap: 40px; }
}

.menu-nav { display: flex; flex-direction: column; }
.menu-nav__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: clamp(8px, 1.4vw, 18px) 0;
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(34px, 5.6vw, 78px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--concrete-mid);
  overflow: hidden;
}
.menu-nav__item .menu-nav__text {
  display: inline-block;
  transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.menu-nav__item:hover .menu-nav__text { color: var(--accent); transform: translateX(16px); }
.menu-nav__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}

.menu-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 48px;
}
@media (max-width: 900px) {
  .menu-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(0, 0, 0, 0.08); padding-top: 32px; }
}
.menu-aside__group {}
.menu-aside__label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.menu-aside__group a,
.menu-aside__group p {
  display: block;
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.7;
  color: var(--concrete-mid);
  transition: color var(--dur-fast) var(--ease-out);
}
.menu-aside__group a:hover { color: var(--accent); }

/* lock scroll when menu open */
body.menu-open { overflow: hidden; }

/* keep the burger above the curtain & let the dark curtain show through the nav */
body.menu-open .nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  z-index: 310;
}

/* =========================================================
   MENU v2 — Base-Structures-style overlay + Products dropdown
   ========================================================= */

/* header right group (CTA + burger) */
.nav__right { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
@media (max-width: 600px) { .nav .nav__cta { display: none; } }

/* panel scrolls if the open dropdown makes it tall; safe-center avoids top clip */
.menu-panel { overflow-y: auto; justify-content: safe center; }
.menu-panel__inner { align-items: start; }
@media (min-width: 901px) { .menu-panel__inner { align-items: center; } }

/* row wraps a primary link (+ optional dropdown) */
.menu-nav__row {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.menu-nav__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }

.menu-nav__head {
  display: flex;
  align-items: center;
  gap: 18px;
}
/* link keeps overflow-hidden for the text slide; button is a sibling */
.menu-nav__row .menu-nav__item { flex: 1 1 auto; }

/* expand (+) button — visible on touch/small screens */
.menu-nav__expand {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.menu-nav__expand svg { width: 15px; height: 15px; display: block; }
.menu-nav__expand svg .v { transform-box: fill-box; transform-origin: center; transition: transform var(--dur) var(--ease-out); }
.menu-nav__row.is-open .menu-nav__expand {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.menu-nav__row.is-open .menu-nav__expand svg .v { transform: scaleY(0); }  /* + becomes − */

/* the dropdown / submenu (accordion) */
.menu-sub {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding-left: clamp(34px, 5vw, 88px);
  transition:
    max-height 1300ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity    1000ms cubic-bezier(0.22, 1, 0.36, 1) 140ms,
    margin     1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.menu-nav__row.is-open .menu-sub {
  max-height: 420px;
  opacity: 1;
  margin: 6px 0 22px;
}
.menu-sub__link {
  display: block;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  letter-spacing: 0.005em;
  color: var(--concrete-mid);
  padding: 10px 0;
  transition: color var(--dur-fast) var(--ease-out), padding var(--dur) var(--ease-out);
}
.menu-sub__link::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--accent);
  opacity: 0.7;
  transition: width var(--dur) var(--ease-out);
}
.menu-sub__link:hover { color: var(--accent); padding-left: 8px; }
.menu-sub__link:hover::before { width: 30px; opacity: 1; }

/* Click-only dropdown — the + button is always visible; row opens on click.
   Smooth open uses the .menu-sub transitions defined above (max-height/opacity
   cubic-bezier(0.22, 1, 0.36, 1) — premium ease-out feel). */

/* active primary link */
.menu-nav__item.is-active .menu-nav__text { color: var(--accent); }

/* ── Rotating DRAG cursor follower ── */
.drag-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  mix-blend-mode: difference;
  will-change: transform;
}
.drag-cursor.is-visible { opacity: 1; transform: scale(1); }
.drag-cursor__ring {
  width: 100%; height: 100%;
  animation: drag-spin 8s linear infinite;
}
.drag-cursor__ring text { fill: #fff; font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.32em; text-transform: uppercase; }
.drag-cursor__arrows {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
@keyframes drag-spin { to { transform: rotate(360deg); } }

@media (hover: none) { .drag-cursor { display: none; } }

/* ── Site-wide green dot cursor follower (JS-injected) ── */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(37, 168, 83, 0.45);
  pointer-events: none;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform: scale(0.6);
}
.cursor-dot.is-visible { opacity: 1; transform: scale(1); }
.cursor-dot.is-active  { transform: scale(1.6); opacity: 1; }
@media (hover: none), (max-width: 900px) { .cursor-dot { display: none !important; } }
/* Hide the OS cursor everywhere so only the custom green dot shows.
   Scoped to exactly the conditions where the dot renders (see above), so
   touch / small screens never end up with no cursor at all. */
@media (hover: hover) and (min-width: 901px) {
  html.cursor-hidden,
  html.cursor-hidden * { cursor: none !important; }
}

/* ── Our-clients cursor-trail gallery (JS-injected, attached to .lr__mark)
   Gallery is absolutely positioned inside .lr__mark so the thumbs are
   clipped to the left column — they never spill into the copy on the right. ── */
.lr__mark { overflow: hidden; cursor: none; }
.lr__gallery {
  position: absolute;
  inset: 0;
  z-index: 5;                /* above the logo image */
  pointer-events: none;
}
/* Scoped via the gallery class for specificity (0,2,0) so it beats the
   .lr__mark img logo rule (0,1,1) — otherwise the thumb inherits the
   logo's width/height/animation. */
.lr__gallery .lr__gallery-thumb {
  position: absolute;
  display: block;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;          /* centre the 100×100 box on its (left, top) */
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--concrete-mid);
  box-shadow:
    0 14px 32px -10px rgba(13, 13, 12, 0.32),
    0 0 0 1px rgba(37, 168, 83, 0.18);
  opacity: 0;
  transform: scale(0.6) rotate(0deg);
  transform-origin: 50% 50%;
  /* Smoother, deeper ease for the appear/dismiss cycle */
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  filter: saturate(0.95);
  animation: none;                  /* override the .lr__mark img float animation */
  max-width: none;
  z-index: 2;
}
.lr__gallery .lr__gallery-thumb.is-visible {
  opacity: 1;
  transform: scale(1) rotate(var(--r, 0deg));
}
@media (hover: none), (max-width: 700px) {
  .lr__gallery { display: none; }
  .lr__mark { overflow: visible; cursor: default; }
}

.pc.is-grabbing { cursor: grabbing; }
.pc__track.is-dragging { scroll-snap-type: none; }
.pc__track.is-dragging .pc__card { pointer-events: none; }

/* ── Scroll reveal base states (GSAP-driven; CSS fallback) ── */
[data-reveal] { will-change: transform, opacity; }
.no-gsap [data-reveal] { opacity: 1 !important; transform: none !important; }

/* hero scroll cue */
.hi__cue {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hi__cue-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--accent), transparent);
  position: relative;
  overflow: hidden;
}
.hi__cue-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: var(--accent);
  will-change: transform;
  animation: cue-fall 1.8s var(--ease-in-out) infinite;
}
/* transform, not top: this loops forever while the hero sits at the top of the
   page, so it runs through the visitor's very first scroll. Animating `top`
   forced a layout on every frame of it. */
@keyframes cue-fall {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}
@media (max-width: 900px) { .hi__cue { display: none; } }

/* hero becomes full height */
.hi {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

/* =========================================================
   CONTACT / QUOTE — page-specific components
   ========================================================= */

/* Inline accent links inside lede text */
.link-accent {
  color: var(--accent-light);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}
.link-accent:hover { color: var(--white); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .link-accent { color: var(--accent); }
:is(.section-pale, .section-white, .section-offwhite, .section-stone) .link-accent:hover { color: var(--accent-light); }

/* Contact form hint line */
.form__hint {
  font-family: var(--ff-body);
  font-size: 13px;
  color: var(--concrete-light);
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* Map page section — header + meta + larger map */
.map-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
@media (max-width: 900px) { .map-head { grid-template-columns: 1fr; } }
.map-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.map-meta__note {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 36ch;
}
.map-wrap--lg { aspect-ratio: 21 / 9; }

/* =========================================================
   QUOTE FORM
   ========================================================= */
.quote {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  justify-items: center;
}
@media (max-width: 900px) {
  .quote { grid-template-columns: 1fr; gap: 32px; }
}

/* Step nav removed — form sits centred on its own */
.quote__form { width: 100%; max-width: 760px; margin-inline: auto; }

/* — sticky step nav (hidden) — */
.quote__nav {
  display: none;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
  padding-right: 8px;
}
.quote__nav-label {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--concrete-warm);
  margin-bottom: 16px;
}
.quote__nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quote__nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 12px 14px;
  border-left: 2px solid transparent;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete-light);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.quote__nav-link:hover { color: var(--white); }
.quote__nav-link.is-active {
  color: var(--accent-light);
  border-left-color: var(--accent);
  background: rgba(26, 128, 64, 0.08);
}
.quote__nav-num {
  font-weight: 700;
  color: var(--concrete-warm);
}
.quote__nav-link.is-active .quote__nav-num { color: var(--accent-light); }
.quote__nav-progress {
  margin-top: 22px;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.quote__nav-progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 320ms var(--ease-out);
}

/* — form steps — */
.quote__form {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 28px);
}
.quote__step {
  padding-bottom: clamp(18px, 2.4vw, 32px);
  border-bottom: 1px solid var(--line-strong);
}
.quote__step:last-of-type { border-bottom: 0; }
.quote__step-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  margin-bottom: 32px;
  align-items: start;
}
.quote__step-num {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent-light);
  border: 1.5px solid var(--accent);
  padding: 6px 12px;
  border-radius: 4px;
  display: inline-block;
  align-self: start;
}
.quote__step-title {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--concrete-pale);
  margin: 0 0 10px;
}
.quote__step-lede {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  color: var(--concrete-light);
  margin: 0;
  max-width: 56ch;
}
.form__field label em {
  color: var(--accent-light);
  font-style: normal;
  margin-left: 2px;
}

/* — chip radio group (project type) — */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-light);
  transition: color 240ms cubic-bezier(.2,.7,.2,1), background-color 240ms cubic-bezier(.2,.7,.2,1), border-color 240ms cubic-bezier(.2,.7,.2,1);
  user-select: none;
}
.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip:hover { color: var(--concrete-pale); border-color: var(--concrete-warm); }
.chip:has(input:checked),
.chip:focus-within {
  color: var(--white);
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 10px 24px -12px rgba(26, 128, 64, 0.55);
}

/* — product picker (accordion) — */
.product-pick {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-pick__item {
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  transition: border-color 280ms var(--ease-out), background 280ms var(--ease-out);
}
.product-pick__item.is-open {
  border-color: var(--accent);
  background: rgba(26, 128, 64, 0.06);
}
.product-pick__head {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(15px, 1.2vw, 18px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--concrete-pale);
  transition: color 220ms var(--ease-out);
}
.product-pick__head:hover { color: var(--white); }
.product-pick__head input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--concrete-warm);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.product-pick__head input[type="checkbox"]::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--accent-light);
  border-radius: 2px;
  transform: scale(0);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.product-pick__head input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: rgba(26, 128, 64, 0.12);
}
.product-pick__head input[type="checkbox"]:checked::after { transform: scale(1); }
.product-pick__name { font-weight: 700; }
.product-pick__hint {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--concrete-warm);
  justify-self: end;
}
.product-pick__arrow {
  width: 9px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;   /* keep chevron tips sharp — the global rounding would soften them */
  transform: rotate(45deg);
  margin-right: 4px;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  color: var(--concrete-warm);
}
.product-pick__item.is-open .product-pick__arrow {
  transform: rotate(-135deg);
  color: var(--accent-light);
}
.product-pick__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 380ms cubic-bezier(.2,.7,.2,1);
}
.product-pick__detail > * {
  overflow: hidden;
  min-height: 0;
}
.product-pick__detail-inner,
.product-pick__detail > .form,
.product-pick__detail > div {
  padding: 0 22px;
}
.product-pick__item.is-open .product-pick__detail {
  grid-template-rows: 1fr;
}
.product-pick__detail .form,
.product-pick__detail > div:not(.form) {
  padding: 4px 22px 22px;
  display: grid;
  gap: 16px;
}
@media (max-width: 700px) {
  .product-pick__hint { display: none; }
  .product-pick__head { grid-template-columns: 28px 1fr auto; }
}

/* — file upload — */
.upload { display: flex; flex-direction: column; gap: 16px; }
.upload__input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
.upload__zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: clamp(36px, 5vw, 64px) 24px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  text-align: center;
  transition: border-color 240ms var(--ease-out), background 240ms var(--ease-out), color 240ms var(--ease-out);
}
.upload__zone:hover,
.upload__zone:focus-within,
.upload.is-dragging .upload__zone {
  border-color: var(--accent);
  background: rgba(26, 128, 64, 0.08);
  color: var(--accent-light);
}
.upload__icon { color: var(--concrete-warm); transition: color 240ms var(--ease-out); }
.upload__zone:hover .upload__icon,
.upload.is-dragging .upload__icon { color: var(--accent-light); }
.upload__text {
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--concrete-light);
}
.upload__text strong { color: var(--concrete-pale); font-weight: 600; }
.upload__hint {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}
.upload__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.upload__file {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}
.upload__file-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: rgba(26, 128, 64, 0.15);
  color: var(--accent-light);
  border-radius: 4px;
  font-family: var(--ff-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.upload__file-name {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--concrete-pale);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload__file-size {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--concrete-warm);
}
.upload__file-remove {
  background: none;
  border: 0;
  color: var(--concrete-warm);
  width: 28px; height: 28px;
  border-radius: 4px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.upload__file-remove:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); }

/* — consent checkbox — */
.checkbox {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
  cursor: pointer;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--concrete-light);
}
.checkbox input[type="checkbox"] {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--concrete-warm);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  margin-top: 2px;
  transition: background-color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.checkbox input[type="checkbox"]::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--accent-light);
  border-radius: 2px;
  transform: scale(0);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.checkbox input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: rgba(26, 128, 64, 0.12);
}
.checkbox input[type="checkbox"]:checked::after { transform: scale(1); }

/* — submit & success — */
.quote__submit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 8px;
}
/* `display: flex` above beats the bare [hidden] default — force it off so the
   Sending button + caveat fully disappear once the success state shows. */
.quote__submit[hidden] { display: none !important; }
.quote__caveat {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--concrete-warm);
}
.quote__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: clamp(40px, 6vw, 80px) 24px;
  background: rgba(26, 128, 64, 0.1);
  border: 1.5px solid var(--accent);
  border-radius: 8px;
}
.quote__success-icon { color: var(--accent-light); }
.quote__success h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--white);
}
.quote__success p {
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.65;
  color: var(--concrete-light);
  max-width: 48ch;
  margin: 0 0 12px;
}
.quote__success[hidden] { display: none; }

/* Contact page: hide the duplicate contact + map block in the footer */
.page-contact .footer__col--cta { display: none; }
.page-contact .footer__row--top { min-height: 0; padding-top: clamp(40px, 6vh, 64px); }

/* =========================================================
   QUOTE FORM — LIGHT REDESIGN
   White page, dark sidebar with green text,
   concrete-grey → white gradient glass card.
   ========================================================= */

/* Section: subtle ambient on the white bg */
.quote-section { position: relative; isolation: isolate; }
.quote-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(37,168,83,0.08), transparent 55%),
    radial-gradient(50% 60% at 92% 96%, rgba(26,128,64,0.05), transparent 60%);
}
.quote-section > .wrap { position: relative; z-index: 1; }

/* — Card: concrete grey → white smooth gradient with frosted blur — */
.quote-section .quote__form {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(28, 28, 27, 0.08);
  border-radius: 14px;
  background:
    linear-gradient(160deg,
      rgba(184, 178, 170, 0.55) 0%,
      rgba(232, 227, 221, 0.7) 35%,
      rgba(245, 242, 238, 0.85) 70%,
      rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  box-shadow:
    0 40px 90px -30px rgba(28, 28, 27, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.quote-section .quote__form::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 40% at 0% 0%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(120% 40% at 100% 100%, rgba(184, 178, 170, 0.18), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.quote-section .quote__form > * { position: relative; z-index: 1; }

/* Step dividers dark on light */
.quote-section .quote__step { border-bottom-color: rgba(28, 28, 27, 0.10); }

/* Step header */
.quote-section .quote__step-num {
  background: rgba(26, 128, 64, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.quote-section .quote__step-title { color: var(--concrete-dark); }
.quote-section .quote__step-lede  { color: var(--concrete-mid); }

/* Labels: dark, strong */
.quote-section .form__field label {
  color: var(--concrete-dark);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
}
.quote-section .form__field label em { color: var(--accent); }

/* Inputs: light frosted fill, dark text */
.quote-section .form__field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quote-section .form__field textarea,
.quote-section .form__field select {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(28, 28, 27, 0.14);
  border-radius: 8px;
  padding: 14px 16px;
  color: var(--concrete-dark);
  font-family: var(--ff-body);
  font-size: 16px; /* >= 16px prevents iOS focus-zoom */
  line-height: 1.4;
  transition:
    border-color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    box-shadow 220ms var(--ease-out);
}
.quote-section .form__field input::placeholder,
.quote-section .form__field textarea::placeholder { color: var(--concrete-warm); }
.quote-section .form__field input:hover,
.quote-section .form__field textarea:hover,
.quote-section .form__field select:hover {
  border-color: rgba(28, 28, 27, 0.28);
  background: rgba(255, 255, 255, 0.9);
}
.quote-section .form__field input:focus,
.quote-section .form__field textarea:focus,
.quote-section .form__field select:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 3px rgba(37, 168, 83, 0.18);
}
.quote-section .form__field textarea { min-height: 120px; }

/* Custom select arrow (dark) */
.quote-section .form__field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%231C1C1B' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.quote-section .form__field select option {
  background: var(--concrete-white);
  color: var(--concrete-dark);
}

/* Chips */
.quote-section .chip {
  border-color: rgba(28, 28, 27, 0.18);
  background: rgba(255, 255, 255, 0.6);
  color: var(--concrete-dark);
}
.quote-section .chip:hover {
  border-color: rgba(28, 28, 27, 0.4);
  background: rgba(255, 255, 255, 0.9);
}
.quote-section .chip:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}

/* Product picker */
.quote-section .product-pick__item {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(28, 28, 27, 0.12);
}
.quote-section .product-pick__item:hover { border-color: rgba(28, 28, 27, 0.24); }
.quote-section .product-pick__item.is-open {
  background: rgba(26, 128, 64, 0.06);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(37, 168, 83, 0.18);
}
.quote-section .product-pick__head { color: var(--concrete-dark); }
.quote-section .product-pick__head:hover { color: var(--accent); }
.quote-section .product-pick__hint { color: var(--concrete-mid); }
.quote-section .product-pick__name { color: var(--concrete-dark); }
.quote-section .product-pick__arrow { color: var(--concrete-warm); }
.quote-section .product-pick__item.is-open .product-pick__arrow { color: var(--accent); }
.quote-section .product-pick__head input[type="checkbox"] {
  border-color: rgba(28, 28, 27, 0.32);
  background: rgba(255, 255, 255, 0.8);
}
.quote-section .product-pick__head input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.quote-section .product-pick__head input[type="checkbox"]::after { background: var(--white); }

/* Upload zone */
.quote-section .upload__zone {
  background: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed rgba(28, 28, 27, 0.22);
  color: var(--concrete-dark);
}
.quote-section .upload__zone:hover,
.quote-section .upload__zone:focus-within,
.quote-section .upload.is-dragging .upload__zone {
  background: rgba(26, 128, 64, 0.08);
  border-color: var(--accent);
  color: var(--accent);
}
.quote-section .upload__icon { color: var(--concrete-warm); }
.quote-section .upload__zone:hover .upload__icon,
.quote-section .upload.is-dragging .upload__icon { color: var(--accent); }
.quote-section .upload__text { color: var(--concrete-dark); }
.quote-section .upload__text strong { color: var(--concrete-dark); }
.quote-section .upload__hint { color: var(--concrete-mid); }
.quote-section .upload__file {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(28, 28, 27, 0.12);
}
.quote-section .upload__file-name { color: var(--concrete-dark); }
.quote-section .upload__file-size { color: var(--concrete-mid); }
.quote-section .upload__file-remove { color: var(--concrete-warm); }
.quote-section .upload__file-remove:hover { color: var(--concrete-dark); background: rgba(28, 28, 27, 0.08); }

/* Consent checkbox */
.quote-section .checkbox { color: var(--concrete-dark); }
.quote-section .checkbox input[type="checkbox"] {
  border-color: rgba(28, 28, 27, 0.32);
  background: rgba(255, 255, 255, 0.8);
}
.quote-section .checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.quote-section .checkbox input[type="checkbox"]::after { background: var(--white); }

/* Submit & success on light */
.quote-section .quote__caveat { color: var(--concrete-mid); }
.quote-section .quote__success {
  background: rgba(26, 128, 64, 0.08);
  border-color: var(--accent);
}
.quote-section .quote__success h3 { color: var(--concrete-dark); }
.quote-section .quote__success p  { color: var(--concrete-mid); }

/* — Sticky steps sidebar: BLACK CARD with green text — */
.quote-section .quote__nav {
  padding: 24px 18px;
  background: var(--black);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
}
.quote-section .quote__nav-label {
  color: var(--accent-light);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.quote-section .quote__nav-link {
  color: var(--accent-light);
  border-left: 2px solid transparent;
}
.quote-section .quote__nav-link:hover {
  color: var(--white);
  background: rgba(37, 168, 83, 0.10);
}
.quote-section .quote__nav-link.is-active {
  color: var(--white);
  background: rgba(37, 168, 83, 0.18);
  border-left-color: var(--accent-light);
}
.quote-section .quote__nav-num { color: var(--accent); }
.quote-section .quote__nav-link.is-active .quote__nav-num,
.quote-section .quote__nav-link:hover .quote__nav-num { color: var(--accent-light); }
.quote-section .quote__nav-progress { background: rgba(255, 255, 255, 0.08); }
.quote-section .quote__nav-progress-bar { background: var(--accent-light); }

@media (max-width: 900px) {
  .quote-section .quote__nav { padding: 18px; }
}
@media (max-width: 700px) {
  .quote-section .quote__form { padding: 22px; border-radius: 10px; }
  .quote-section .form__field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  .quote-section .form__field textarea,
  .quote-section .form__field select { padding: 14px; font-size: 16px; }
}

/* =========================================================
   WHITE THEME OVERRIDE
   #ffffff surfaces · blurred white cards · dark + green ink
   ========================================================= */
:root {
  --ink:          #1C1C1B;
  --ink-soft:     #3A3835;
  --ink-mute:     #6B6560;
  --glass-bg:     rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(26, 128, 64, 0.14);
  --glass-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 40px -18px rgba(26,128,64,0.18), 0 1px 2px rgba(0,0,0,0.04);
  --line:         rgba(26, 128, 64, 0.12);
  --line-strong:  rgba(26, 128, 64, 0.22);
}

/* Base surface */
html, body { background: #ffffff; }
body { color: var(--ink); }

/* Section backgrounds — flip all dark variants to white */
.section-dark,
.section-black,
.section-stone,
.section-offwhite,
.section-pale,
.section-white { background: #ffffff; color: var(--ink); }

/* Soft tonal sections get a very faint green wash to keep rhythm */
.section-stone,
.section-pale { background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%); }

/* Strong, headings, and brand emphasis lean green */
h1, h2, h3, .hero__title, .section__title, .footer__cta-title,
.tile__title, .stat__num { color: var(--ink); }
h1 em, h2 em, h3 em,
strong, b,
.hero__title em, .section__title em,
.stat__num .green,
.tile__num, .tile__more { color: var(--accent); }

/* Paragraph text — comfortable dark, links green */
p, li, dd, .footer__cta-body, .footer__cta-sub,
.tile__sub { color: var(--ink-soft); }
a { color: var(--accent); }
a:hover { color: var(--accent-light); }

/* ---------- HEADER / NAV ---------- */
.nav {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--glass-border);
}
.nav.is-scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 0 rgba(26,128,64,0.08), 0 10px 30px -20px rgba(0,0,0,0.18);
}
.nav .nav__name,
.nav.is-scrolled .nav__name,
.nav[data-theme="light"]:not(.is-scrolled) .nav__name,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__name { color: var(--ink); }

.nav .nav__tag,
.nav.is-scrolled .nav__tag,
.nav[data-theme="light"]:not(.is-scrolled) .nav__tag,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__tag { color: var(--accent); }

.nav .nav__menu a,
.nav.is-scrolled .nav__menu a,
.nav[data-theme="light"]:not(.is-scrolled) .nav__menu a,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__menu a { color: var(--ink-soft); }
.nav .nav__menu a:hover,
.nav .nav__menu a.is-active { color: var(--accent); }
.nav .nav__menu a::after { background: var(--accent); }

.nav .nav__cta,
.nav.is-scrolled .nav__cta,
.nav[data-theme="light"]:not(.is-scrolled) .nav__cta,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__cta {
  color: var(--accent);
  border-color: var(--accent);
}
/* text flips to white as the ::before green fill sweeps up — no opaque
   background swap here, which would hide the animated fill. Hover variants
   mirror each resting-state selector so white wins on hover in EVERY nav
   state (transparent light/dark, and scrolled) — otherwise the higher-
   specificity resting colour would keep the text green at the top of page. */
.nav .nav__cta:hover,
.nav.is-scrolled .nav__cta:hover,
.nav[data-theme="light"]:not(.is-scrolled) .nav__cta:hover,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__cta:hover {
  color: #fff !important;
}

.nav .nav__toggle,
.nav.is-scrolled .nav__toggle,
.nav[data-theme="light"]:not(.is-scrolled) .nav__toggle,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__toggle { color: var(--ink); }
.nav .nav__burger path,
.nav.is-scrolled .nav__burger path,
.nav[data-theme="light"]:not(.is-scrolled) .nav__burger path,
body:not(.menu-open) .nav[data-theme="dark"]:not(.is-scrolled) .nav__burger path { stroke: var(--ink); }

/* Mobile menu panel */
.nav__mobile { background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.nav__mobile a { color: var(--ink); }
.nav__mobile a:hover { color: var(--accent); }

/* ---------- HERO ---------- */
.hero { background: #ffffff; }
.hero, .hero__left, .hero__right { color: var(--ink); }
.hero__title { color: var(--ink); }

/* ---------- BLURRED WHITE CARDS ---------- */
.tile,
.cap,
.stat,
.product-card,
.value-card,
.feature-card,
.spec-card,
.team-card,
.info-card,
[data-card] {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  color: var(--ink);
}
.tile { color: var(--ink); }
.tile img { filter: none; }
.tile:hover img { filter: brightness(1.02) contrast(1.04) saturate(1.05); }
.tile__copy {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.96) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--glass-border);
}
.tile__title { color: var(--ink); }
.tile__sub   { color: var(--ink-soft); }
.tile__num,
.tile__more  { color: var(--accent); }
.cap:hover { background: rgba(26,128,64,0.05); }

/* Stats row */
.stat { color: var(--ink); border-color: var(--line-strong); }
.stat__label { color: var(--ink-mute); }
.stat__num   { color: var(--ink); }
.stat__num .green { color: var(--accent); }
.stat:hover { background-color: rgba(26,128,64,0.05); }
.stat:hover .stat__num { color: var(--accent); }
.stat:hover .stat__label { color: var(--ink); }

/* Marquee / banner strips */
.marquee-statement,
.marquee-statement p,
.marquee-statement p strong { background: #ffffff; color: var(--ink); }
.marquee-statement p strong { color: var(--accent); }

/* Products nav (sidebar image switcher) */
.products-nav { background: #ffffff; color: var(--ink); }
.products-nav__bg::after { background: linear-gradient(90deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0.92) 100%); }

/* Buttons */
.btn--solid { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn--solid:hover { background: var(--accent-light); border-color: var(--accent-light); color: #fff; }
.btn--pale { color: var(--ink); border-color: var(--ink); --btn-fill: var(--ink); }
.btn--pale:hover { color: #fff; border-color: var(--ink); }
.btn--dark { color: var(--ink); border-color: var(--ink); --btn-fill: var(--ink); }
.btn--dark:hover { color: #fff; }

/* ---------- FOOTER ---------- */
.footer {
  background: #ffffff;
  color: var(--ink);
  border-top: 1px solid var(--glass-border);
}
.footer__row--top,
.footer__row--bottom { border-top: 1px solid var(--glass-border); }
.footer__cta-title { color: var(--ink); }
.footer__cta-sub   { color: var(--accent); }
.footer__cta-body  { color: var(--ink-soft); }
.footer__cta-lines li { border-bottom: 1px solid var(--glass-border); }
.footer__cta-lines li:first-child { border-top: 1px solid var(--glass-border); }
.footer__cta-lines li > span { color: var(--ink-mute); }
.footer__cta-lines li > a { color: var(--ink); }
.footer__cta-lines li > a:hover { color: var(--accent); }

/* Quote-section dark surfaces — invert to white glass */
.quote-section,
.quote-section .quote__form,
.quote-section .quote__nav {
  background: var(--glass-bg-strong);
  color: var(--ink);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.quote-section .quote__nav-progress { background: rgba(26,128,64,0.12); }

/* Selection */
::selection { background: rgba(26,128,64,0.18); color: var(--ink); }

/* Rules / dividers */
hr, .hr, [role="separator"] { border-color: var(--glass-border); background: var(--glass-border); }

/* ---------- PAGE-HEAD (inner page heroes with image bg) ---------- */
.page-head { background: #ffffff; border-top: 3px solid var(--accent); }
.page-head__bg img {
  filter: brightness(1.15) contrast(0.92) saturate(0.75) grayscale(0.4);
  opacity: 0.18;
}
.page-head__bg::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.78) 60%, rgba(255,255,255,0.95) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0.3) 100%);
}
.page-head:has(.page-head__bg) .page-head__chapnum,
.page-head__chapnum { color: rgba(26,128,64,0.10); }
.page-head:has(.page-head__bg) .page-head__title,
.page-head__title { color: var(--ink); }
.page-head:has(.page-head__bg) .page-head__title em,
.page-head:has(.page-head__bg) .page-head__title strong,
.page-head__title em,
.page-head__title strong { color: var(--accent); }
.page-head:has(.page-head__bg) .page-head__lede,
.page-head__lede { color: var(--ink-soft); }

/* ---------- SR / SHOWREEL SECTION ---------- */
.sr { background: #ffffff; }
.sr__media::after {
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.35) 40%,
    rgba(255,255,255,0) 100%
  );
}
.sr__media img { filter: brightness(1.05) contrast(0.95) saturate(0.85); opacity: 1; }
.sr__heading h2 { color: var(--ink); text-shadow: 0 2px 24px rgba(255,255,255,0.6); }
.sr__h3 { color: var(--ink); text-shadow: none; }
.sr__p  { color: var(--ink-soft); }
.sr__eyebrow { color: var(--accent); }
.sr__overlay { background: #ffffff; }

/* ---------- GALLERY / SPLIT images — lighter editorial filter ---------- */
.gallery img { filter: brightness(1) contrast(1) saturate(0.95); }
.gallery > a:hover img { filter: brightness(1.04) contrast(1.06) saturate(1.05); }
.split__media img { filter: brightness(1) contrast(1) saturate(0.95); }
.split__media::before { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 100%); }
.gallery__tag { background: var(--glass-bg-strong); color: var(--ink); border: 1px solid var(--glass-border); }

/* ---------- MENU PANEL (full-screen overlay menu) ---------- */
.menu-panel, .menu-aside { background: rgba(255,255,255,0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--ink); }
.menu-aside__label { color: var(--accent); }
.menu-aside p { color: var(--ink-soft); }

/* ---------- CONTACT CARDS ---------- */
.contact-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid var(--glass-border);
  border-top: 2px solid var(--accent);
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
}
.contact-card:hover { background: var(--glass-bg-strong); }
.contact-card__role { color: var(--accent); }
.contact-card__name,
.contact-card a,
.contact-card p { color: var(--ink) !important; }
.contact-card a:hover { color: var(--accent) !important; }

/* ---------- FORMS ---------- */
.form__field input,
.form__field textarea,
.form__field select { color: var(--ink); background: transparent; border-bottom-color: var(--line-strong); }
.form__field label { color: var(--accent); }
.form__field input::placeholder,
.form__field textarea::placeholder { color: var(--ink-mute); }

/* ---------- TAGLINE BLOCK ---------- */
.tagline-block { background: linear-gradient(180deg, #ffffff 0%, #f6faf7 100%); border-top-color: var(--accent); }
.tagline-block__big { color: var(--ink); }
.tagline-block__big .green { color: var(--accent); }
.tagline-block__end { color: var(--ink-soft); }

/* ---------- HOME HERO (.hi) text ---------- */
.hi { background: #ffffff; }
.hi__h1 { color: var(--ink); }
.hi__h1 strong { color: var(--accent); }
.hi p { color: var(--ink-soft); }
.hi .hl { color: var(--accent); }

/* ---------- COOKIE BANNER ---------- */
.cookie, .cookie-banner, [data-cookie-banner] {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  color: var(--ink);
}

/* ---------- MOBILE NAV CTA (Request Quote / cart) ----------
   Default styles hide .nav__cta below 900px. On mobile we want it
   visible, centered, and compact — with the quote-count badge intact. */
@media (max-width: 900px) {
  .nav .nav__cta { display: inline-flex; }
  .nav__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
  }
  .nav__inner > .nav__brand  { justify-self: start; }
  .nav__inner > .nav__cta    { justify-self: center; order: 0; }
  .nav__inner > .nav__toggle { justify-self: end;   order: 1; }
  .nav .nav__cta {
    padding: 9px 16px;
    font-size: 11px;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }
}
@media (max-width: 600px) {
  .nav .nav__cta { display: inline-flex; }
  /* Brand collapses to logo only so the CTA has room to breathe */
  .nav__brand-text { display: none; }
  .nav .nav__cta { padding: 8px 14px; font-size: 10.5px; }
}
@media (max-width: 380px) {
  .nav__inner { gap: 8px; }
  .nav .nav__cta { padding: 7px 12px; font-size: 10px; letter-spacing: 0.1em; }
}


/* =========================================================
   FEATURED PROJECT
   Portrait scroll gallery (.fp) + landing-page teaser (.fpt).
   Both live on the white theme and lean on --accent for ink.
   ========================================================= */

/* ── Inline portrait scroll gallery ───────────────────────── */
.fp {
  position: relative;
  padding: clamp(80px, 10vw, 150px) 0 clamp(64px, 8vw, 110px);
  overflow: hidden;
}
.fp__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.fp__title { margin: 0; }
.fp__lede { margin: 0; }
.fp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.fp__meta div { display: flex; flex-direction: column; gap: 3px; }
.fp__meta dt {
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.fp__meta dd { margin: 0; font-family: var(--ff-display); font-weight: 600; font-size: 17px; color: var(--ink); }

/* the rail itself */
.fp__rail { position: relative; }
.fp__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
}
.fp__scroller::-webkit-scrollbar { display: none; }
.fp__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2.2vw, 34px);
  width: max-content;
  padding: clamp(28px, 4vw, 64px) var(--wrap-pad) 4px;
}

.fp__item {
  flex: 0 0 auto;
  width: clamp(206px, 23vw, 328px);
  scroll-snap-align: center;
}
/* editorial rhythm — every second frame drops, so the rail reads as a
   composed spread rather than a filmstrip */
.fp__item:nth-child(even) { margin-top: clamp(26px, 4.4vw, 78px); }
.fp__item--tall { width: clamp(250px, 28vw, 400px); }

.fp__figure {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-elev);
  border-radius: var(--r-md);
  box-shadow: 0 24px 60px -34px rgba(28, 28, 27, 0.5);
}
.fp__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1.15s var(--ease-out), filter 0.6s var(--ease-out);
  will-change: transform;
}
.fp__item:hover .fp__figure img,
.fp__item:focus-within .fp__figure img { transform: scale(1); }

.fp__figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0) 45%, rgba(13,13,12,0.55) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.fp__item:hover .fp__figure::after,
.fp__item:focus-within .fp__figure::after { opacity: 1; }

.fp__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #fff;
  background: rgba(13, 13, 12, 0.55);
  backdrop-filter: blur(6px);
  padding: 4px 8px;
}
.fp__cap {
  margin-top: 14px;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 30ch;
}
.fp__cap b {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 3px;
}

/* progress + count */
.fp__foot {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  margin-top: clamp(26px, 3.4vw, 42px);
}
.fp__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--line-strong);
}
.fp__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.12s linear;
}
.fp__count {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.fp__count b { color: var(--accent); font-weight: 400; }

/* drag affordance — real cursor hidden only where we draw our own */
@media (hover: hover) and (pointer: fine) {
  .fp__scroller { cursor: none; }
}
.fp__scroller.is-dragging { scroll-snap-type: none; }
.fp__scroller.is-dragging .fp__item { pointer-events: none; }

/* our own rotating drag cursor, one per gallery */
.fp-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  width: 96px; height: 96px;
  margin: -48px 0 0 -48px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.28s var(--ease-out), transform 0.38s var(--ease-out);
  color: #fff;
}
.fp-cursor.is-visible { opacity: 1; transform: scale(1); }
.fp-cursor::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 10px 30px -10px rgba(26, 128, 64, 0.75);
}
.fp-cursor__ring { position: absolute; inset: 0; animation: fpSpin 9s linear infinite; }
.fp-cursor__ring text {
  fill: var(--accent);
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
@keyframes fpSpin { to { transform: rotate(360deg); } }
.fp-cursor__arrows {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
}
@media (hover: none), (pointer: coarse) { .fp-cursor { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fp-cursor__ring { animation: none; }
  .fp__figure img { transition: none; }
}

@media (max-width: 860px) {
  .fp__head { grid-template-columns: 1fr; align-items: start; }
  .fp__item:nth-child(even) { margin-top: 26px; }
  .fp__cap { font-size: 12px; }
}

/* ── Landing-page teaser ──────────────────────────────────── */
.fpt {
  position: relative;
  min-height: 120vh;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  overflow: hidden;
}
.fpt__inner {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: clamp(420px, 58vh, 620px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(72px, 9vw, 130px) var(--wrap-pad);
}
/* Client marquee living inside the featured project — blends into the white */
.fpt__clients {
  background: transparent;
  border-top: 1px solid var(--line-dark);
  border-bottom: none;
  padding: 34px 0;
  flex: 0 0 auto;
}
.fpt__clients::before { background: linear-gradient(90deg, #ffffff, transparent); }
.fpt__clients::after  { background: linear-gradient(-90deg, #ffffff, transparent); }
.fpt__field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .fpt__inner { cursor: none; }
}
.fpt__thumb {
  position: absolute;
  display: block;
  width: clamp(110px, 12vw, 168px);
  aspect-ratio: 3 / 4;
  margin: 0;
  translate: -50% -50%;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--bg-elev);
  box-shadow: 0 22px 50px -22px rgba(28, 28, 27, 0.5), 0 0 0 1px rgba(26, 128, 64, 0.14);
  opacity: 0;
  transform: scale(0.62) rotate(0deg);
  transform-origin: 50% 50%;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: none;
}
.fpt__thumb.is-visible { opacity: 1; transform: scale(1) rotate(var(--r, 0deg)); }

.fpt__copy { position: relative; z-index: 2; pointer-events: none; max-width: 62ch; }
.fpt__copy > * { pointer-events: auto; }
.fpt__title { margin: 0 0 18px; }
/* Masked title lines for the scroll entrance (JS wraps each line) */
.fpt__line { display: block; overflow: hidden; }
.fpt__line > span { display: block; }
.fpt__lede { margin: 0 auto 30px; max-width: 48ch; }
.fpt__hint {
  display: block;
  margin-top: 22px;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@media (hover: none), (max-width: 700px) {
  .fpt__field { display: none; }
  .fpt__inner { cursor: default; }
  .fpt__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fpt__thumb { transition: opacity 0.2s linear; }
}

/* =========================================================
   PROJECTS — portfolio index, project blocks, lightbox
   ========================================================= */

/* Jump-nav chips */
.proj-index {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(48px, 7vw, 96px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line-strong);
}
.proj-index__chip {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete-light);
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.proj-index__chip:hover {
  color: var(--white);
  border-color: var(--accent-light);
  background: var(--accent);
}

/* Project blocks */
.projects { display: flex; flex-direction: column; }
.project {
  padding-top: clamp(56px, 8vw, 112px);
  padding-bottom: clamp(8px, 2vw, 24px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.project:first-child { border-top: 0; padding-top: 0; }

.project__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.project__intro { max-width: 62ch; }
.project__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-light);
  margin-bottom: 14px;
}
.project__count { color: var(--concrete-warm); }
.project__title {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-size: clamp(32px, 5vw, 58px);
  color: var(--white);
  margin-bottom: 10px;
}
.project__loc {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete-light);
  margin-bottom: 20px;
}
.project__lede {
  font-family: var(--ff-body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--concrete-pale);
  margin-bottom: 26px;
}
.project__specs { max-width: 460px; }
.project__badge {
  justify-self: end;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete-light);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 8px 14px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .project__head { grid-template-columns: 1fr; }
  .project__badge { justify-self: start; }
}

/* Photo grid */
/* Masonry scroll gallery — natural aspect ratios, columns fill top-down */
.project__grid {
  column-count: 3;
  column-gap: clamp(8px, 1vw, 16px);
}
@media (max-width: 900px) { .project__grid { column-count: 2; } }
@media (max-width: 560px) { .project__grid { column-count: 1; } }

.project__cell {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-strong);
  margin: 0 0 clamp(8px, 1vw, 16px);
  background: var(--black);
  overflow: hidden;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  cursor: pointer;
  outline-offset: 3px;
}
.project__cell--wide { /* natural ratio inside its column — no span in multicol */ }

.project__cell img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease-out);
}
.project__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,0) 55%, rgba(13,13,12,0.35) 100%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.project__cell::before {
  content: "View";
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  pointer-events: none;
}
.project__cell:hover img { transform: scale(1.05); }
.project__cell:hover::after,
.project__cell:hover::before { opacity: 1; }
.project__cell:hover::before { transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 8, 7, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out), visibility 0.3s var(--ease-out);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__stage {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.38s var(--ease-out), transform 0.42s var(--ease-out);
}
.lightbox.is-open .lightbox__img { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .lightbox__img { transform: none; transition: opacity 0.2s linear; }
}
.lightbox__cap {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete-light);
}
.lightbox__count { color: var(--concrete-warm); }

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--accent); border-color: var(--accent-light); }
.lightbox__close {
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px;
  height: 46px;
  font-size: 26px;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}
.lightbox__nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__nav svg { width: 22px; height: 22px; }
.lightbox__nav--prev { left: clamp(10px, 2.5vw, 34px); }
.lightbox__nav--next { right: clamp(10px, 2.5vw, 34px); }
@media (max-width: 560px) {
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
}

/* =========================================================
   PROJECTS · PREMIUM PARALLAX GALLERY + VIEW CURSOR
   ========================================================= */
.pgal-head { max-width: 720px; margin-bottom: clamp(48px, 8vw, 104px); }
.pgal-head__note {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--concrete-light);
  margin-top: 18px;
  max-width: 46ch;
}

/* Two images side by side, second column offset down for parallax rhythm */
.pgal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 34px);
  align-items: start;
}
.pgal__col {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 34px);
}
.pgal__col--offset { margin-top: clamp(48px, 9vw, 116px); }
@media (max-width: 640px) {
  .pgal { grid-template-columns: 1fr; max-width: 460px; gap: clamp(24px, 6vw, 40px); }
  .pgal__col { gap: clamp(24px, 6vw, 40px); }
  .pgal__col--offset { margin-top: clamp(24px, 6vw, 40px); }
}

.pgal__item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
body.viewcursor-ready .pgal__item { cursor: none; }

.pgal__frame {
  position: relative;
  display: block;
  overflow: hidden;
  height: 35vh;
  background: var(--black);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.pgal__img {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  object-fit: cover;
  will-change: transform;
  opacity: 0;
  transition: opacity 1s var(--ease-out), filter 0.7s var(--ease-out);
  filter: saturate(0.94);
}
.pgal__item.is-visible .pgal__img { opacity: 1; }
.pgal__item:hover .pgal__img { filter: saturate(1.04); }

/* Overlay */
.pgal__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: clamp(20px, 3vw, 40px);
  background: linear-gradient(180deg, rgba(13,13,12,0) 38%, rgba(13,13,12,0.30) 62%, rgba(13,13,12,0.88) 100%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.pgal__item:hover .pgal__overlay,
.pgal__item:focus-visible .pgal__overlay { opacity: 1; }

.pgal__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--concrete-light);
}
.pgal__num { color: var(--accent-light); }
.pgal__loc { position: relative; padding-left: 16px; }
.pgal__loc::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 8px; height: 1px; background: var(--concrete-warm); transform: translateY(-50%);
}
.pgal__title {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 3vw, 40px);
  color: var(--white);
}
.pgal__scope {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--concrete-pale);
}
.pgal__view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.pgal__view-arrow { font-size: 14px; }

/* Staggered slide-up of overlay content on hover */
.pgal__meta, .pgal__title, .pgal__scope, .pgal__view {
  transform: translateY(16px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.pgal__item:hover .pgal__meta,
.pgal__item:hover .pgal__title,
.pgal__item:hover .pgal__scope,
.pgal__item:hover .pgal__view,
.pgal__item:focus-visible .pgal__meta,
.pgal__item:focus-visible .pgal__title,
.pgal__item:focus-visible .pgal__scope,
.pgal__item:focus-visible .pgal__view {
  transform: translateY(0);
  opacity: 1;
}
.pgal__item:hover .pgal__title { transition-delay: 0.05s; }
.pgal__item:hover .pgal__scope { transition-delay: 0.10s; }
.pgal__item:hover .pgal__view  { transition-delay: 0.15s; }

/* Touch / no-hover: keep details legible without hover */
@media (hover: none) {
  .pgal__overlay { opacity: 1; background: linear-gradient(180deg, rgba(13,13,12,0) 45%, rgba(13,13,12,0.82) 100%); }
  .pgal__meta, .pgal__title, .pgal__scope, .pgal__view { transform: none; opacity: 1; }
  .pgal__view { display: none; }
}

/* View cursor (desktop) */
.viewcursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 190;
  pointer-events: none;
  will-change: transform;
}
.viewcursor__disc {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  transition: transform 0.35s var(--ease-out), background 0.2s var(--ease-out);
}
.viewcursor.is-active .viewcursor__disc { transform: translate(-50%, -50%) scale(1); }
body.has-viewcursor .cursor-dot { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .pgal__img { transition: opacity 0.3s linear; }
  .pgal__meta, .pgal__title, .pgal__scope, .pgal__view { transition: opacity 0.3s linear; transform: none; }
}

/* =========================================================
   PROJECT MODAL — two-column (scrolling images | detail)
   ========================================================= */
.projmodal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 3vw, 48px);
  background: rgba(8, 8, 7, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s var(--ease-out);
}
.projmodal.is-open { opacity: 1; visibility: visible; }

.projmodal__panel {
  position: relative;
  width: min(1180px, 100%);
  height: min(88vh, 920px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--concrete-dark);
  overflow: hidden;
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6);
  transform: scale(0.955);
  transition: transform 0.4s var(--ease-out);
}
.projmodal.is-open .projmodal__panel { transform: none; }

/* Left — scrolling image stack */
.projmodal__media {
  grid-area: 1 / 1;
  height: 100%;
  overflow-y: auto;
  background: var(--black);
  padding: clamp(10px, 1.4vw, 18px);
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* Scroll cue — pinned over the image column so a gallery that shows one
   photo at a time still reads as "there's more below". Fades on scroll. */
.projmodal__scrollcue {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: center;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(8, 8, 7, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.35s var(--ease-out);
}
.projmodal__scrollcue svg { animation: pm-cue-bob 1.6s var(--ease-out) infinite; }
@keyframes pm-cue-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(2px); }
}
.projmodal__scrollcue.is-faded { opacity: 0; }
.projmodal__scrollcue.is-faded svg { animation: none; } /* don't tick while invisible */
.projmodal__scrollcue[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .projmodal__scrollcue svg { animation: none; }
}
.projmodal__shot { margin: 0; }
.projmodal__shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line-strong);
}

/* Right — project detail, fitted to the 50% column */
.projmodal__info {
  grid-area: 1 / 2;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(28px, 3.6vw, 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.projmodal__badge {
  align-self: flex-start;
  font-family: var(--ff-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--concrete-light);
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  padding: 8px 14px;
  margin-bottom: 6px;
}
.projmodal__num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent-light);
}
.projmodal__num span { color: var(--concrete-warm); }
.projmodal__title {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.01em;
  font-size: clamp(30px, 3.4vw, 52px);
  color: var(--white);
}
.projmodal__loc {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--concrete-light);
}
.projmodal__lede {
  font-family: var(--ff-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--concrete-pale);
  margin: 6px 0 4px;
}
.projmodal__info .spec-list { margin-bottom: 10px; }
.projmodal__cta { align-self: flex-start; }

/* Close */
.projmodal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--white);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 100px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.projmodal__close:hover { background: var(--accent); border-color: var(--accent-light); }

/* Thin scrollbar for the media column */
.projmodal__media::-webkit-scrollbar,
.projmodal__info::-webkit-scrollbar { width: 8px; }
.projmodal__media::-webkit-scrollbar-thumb,
.projmodal__info::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 100px;
}

/* Mobile — single column, whole panel scrolls (detail first, then images) */
@media (max-width: 820px) {
  .projmodal__panel {
    grid-template-columns: 1fr;
    height: min(90vh, 100%);
    overflow-y: auto;
  }
  .projmodal__info {
    grid-area: auto;
    height: auto;
    overflow: visible;
    justify-content: flex-start;
    order: -1;
    border-bottom: 1px solid var(--line);
  }
  .projmodal__media { grid-area: auto; height: auto; overflow: visible; }
  .projmodal__scrollcue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .projmodal__panel { transition: none; transform: none; }
  .projmodal__media { scroll-behavior: auto; }
}

/* Featured project image — rounded corners (scoped, matches gallery) */
.split__media--round { border-radius: 10px; }

/* Featured image — parallax drift (oversized so translate never reveals edges) */
.split__media--parallax img {
  position: absolute;
  top: -14%;
  left: 0;
  width: 100%;
  height: 128%;
  transition: none;
  will-change: transform;
}
.split:hover .split__media--parallax img { transform: none; }

/* Stat cards — 10px rounding to match gallery + featured image */
.stat { border-radius: 10px; }

/* ============================================================
   PRODUCTS PAGE — staircase headline image rounding
   ============================================================ */
#stairs .split__media { border-radius: 20px; }

/* ============================================================
   CATALOGUE TILES — two-section cards
   Top: clean product image on white (contained, no crop/overflow)
   Bottom: glass panel carrying the existing copy + actions
   ============================================================ */
.catalogue-grid .tile {
  aspect-ratio: auto;              /* let content size the card height */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  /* Products are true PNG/WebP cutouts, so the card keeps the site's own glass
     surface — nothing to colour-match against any more. */
  background: var(--glass-bg);
  /* Manual card lift */
  box-shadow: 0 1px 2px rgba(13,13,12,0.06), 0 18px 40px -22px rgba(13,13,12,0.30);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.catalogue-grid .tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(13,13,12,0.08), 0 28px 56px -22px rgba(13,13,12,0.38);
}

/* Top — transparent product cutout floating on the card. Because the alpha is
   real, drop-shadow traces the product's actual silhouette, not a photo box. */
.catalogue-grid .tile > img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: transparent;
  mix-blend-mode: normal;
  padding: 26px 26px 10px;
  filter: drop-shadow(0 14px 18px rgba(13,13,12,0.22));
  transition: transform 0.6s var(--ease-out), filter var(--dur-slow) var(--ease-out);
  z-index: 1;
}
.catalogue-grid .tile:hover > img {
  transform: translateY(-3px) scale(1.03);
  filter: drop-shadow(0 20px 26px rgba(13,13,12,0.28));
}

/* Bottom — glass info panel, static flow instead of absolute overlay */
.catalogue-grid .tile .tile__copy {
  position: static;
  inset: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-top: none;
}
.catalogue-grid .tile .tile__actions { margin-top: auto; padding-top: 14px; }

/* Keep the accent hairline riding the rounded top corners */
.catalogue-grid .tile::before {
  border-radius: 20px 20px 0 0;
}

/* ============================================================
   QUOTE — multi-step wizard + product blocks with 40x40 image
   ============================================================ */

/* Only the active step is shown (wizard) */
.quote__step[hidden] { display: none !important; }

/* Product family row → block with a 40x40 product thumbnail */
.product-pick__head { grid-template-columns: 22px 40px 1fr auto auto; }
@media (max-width: 700px) {
  .product-pick__head { grid-template-columns: 22px 40px 1fr auto; }
}
.product-pick__thumb {
  width: 40px;
  height: 40px;
  object-fit: contain;        /* transparent cutout — sits on the card as-is */
  background: transparent;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(13,13,12,0.22));
}
/* Staircases has no studio cutout — crop that one as a small photo chip */
.product-pick__thumb--photo {
  object-fit: cover;
  border-radius: 8px;
  filter: none;
}

/* Wizard controls (Back / Next) */
.quote__controls {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
}
.quote__controls[hidden] { display: none; }
.quote__controls .quote__next { margin-left: auto; }
/* Left-pointing chevron = the right chevron (rotate 45deg) mirrored to 225deg.
   rotate(180deg) only turns the corner into an "L"; 225deg makes a clean "‹". */
.btn__arrow--back { transform: rotate(225deg); }
/* On hover the back arrow slides LEFT (mirror of the forward arrow) — this rule
   matches the generic `.btn:hover .btn__arrow` specificity and wins by order,
   so the back arrow keeps its direction instead of flipping to a right chevron. */
.btn:hover .btn__arrow--back { transform: rotate(225deg) translate(4px, -4px); }
.quote-section .quote__back {
  color: var(--concrete-mid);
  border-color: rgba(28, 28, 27, 0.18);
}
.quote-section .quote__back:hover {
  color: var(--concrete-dark);
  border-color: var(--concrete-dark);
}

/* Prefill note reads as a small block above the picker */
.quote__prefill-note { border-radius: 8px; }

/* =========================================================
   GLOBAL CORNER ROUNDING — soft by default, right-sized per element
   Unstyled boxes fall back to the large radius, but any component
   that declares its own radius (pill buttons, circular controls,
   compact inputs, image frames) keeps that intended value — so a
   40px "+" stays a circle and a chip stays a pill instead of being
   forced into an oversized 20px squircle with content jammed into
   the corner. The square-edge exceptions below keep full-width
   sections and full-bleed media reading edge-to-edge.
   ========================================================= */
* { border-radius: var(--r-lg); }

/* Keep these square-edged (higher specificity beats the universal rule).
   Structural containers only — sections, layout wrappers, section inner/
   overlay/gradient layers, footer rows, and the transform carousel track —
   so rounding is left to buttons, cards, galleries, media frames and inputs. */
html, body, main, .flow, section, .sp-stage, .pin-spacer,
.wrap, .pc__track,
nav, .nav, .nav__mark, .menu-panel, .menu-overlay, [data-menu-overlay], footer,
.footer__row, .footer__row--top, .footer__row--bottom, .footer__bottom,
.projmodal,
.quote-section__bg,
.hi, .hi__bg, .hi__bg img, .hi__video, .hi__svg, .hi__wash,
.fpr__media, .fpr__media img, .fpr__scrim, .fpr__inner,
.sr__media, .sr__media img, .sr__overlay, .sr__inner, .sr__gradient,
.sp__bg, .sp__bg-img, .sp__inner, .sp__overlay,
.pi__backgrounds, .pi__bg, .pi__bg img, .pi__inner,
.fpt__field, .fpt__inner, .clients, .clients__track, .marquee__track {
  border-radius: 0 !important;
}

/* ============================================================
   QUOTE / CONTACT — photographic background with dark overlay
   The form card stays solid white so the fields keep their
   contrast against the darkened photo behind them.
   ============================================================ */
.quote-section {
  position: relative;
  isolation: isolate;
  /* Base tone: the section still reads as a deliberate dark panel even
     before the photo decodes (or if it fails to load). */
  background: #14170f;
}
.quote-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* dark overlay — sits above the photo in the same stack */
    linear-gradient(180deg, rgba(10, 12, 8, 0.52) 0%, rgba(10, 12, 8, 0.42) 45%, rgba(10, 12, 8, 0.60) 100%),
    url('assets/images/web/quote-bg.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: fixed, fixed;
}
/* Contact page: its own photo behind the same dark overlay */
.quote-section--contact .quote-section__bg {
  background-image:
    linear-gradient(180deg, rgba(10, 12, 8, 0.66) 0%, rgba(10, 12, 8, 0.56) 45%, rgba(10, 12, 8, 0.74) 100%),
    url('assets/images/web/contact-bg.jpg');
}
/* Head copy sits on the photo (nested in .form-standalone__head, so the
   generic > .wrap flip misses it) — lift it to light for contrast. */
.quote-section--contact .form-standalone__head .label { color: var(--accent-light); }
.quote-section--contact .form-standalone__head .display-3 { color: #fff; }
.quote-section--contact .form-standalone__head .form-standalone__lede { color: rgba(255, 255, 255, 0.86); }

/* Green ambience over the photo, keeping it in the brand family */
.quote-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 12% 8%,  rgba(37, 168, 83, 0.16), transparent 58%),
    radial-gradient(55% 60% at 92% 96%, rgba(26, 128, 64, 0.12), transparent 62%);
}
.quote-section > .wrap { position: relative; z-index: 1; }

/* — Card: solid white, lifted off the darkened photo — */
.quote-section .quote__form {
  position: relative;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 20px;
  background: #ffffff;          /* opaque — no dark bleed through the fields */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    0 50px 110px -35px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.quote-section .quote__form::before { display: none; }  /* gradient sheen not needed on solid white */

/* Sticky steps card reads as glass on the photo */
.quote-section .quote__nav {
  background: rgba(12, 14, 10, 0.62);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
}

/* Any copy sitting directly on the photo (outside the card) flips to light */
.quote-section > .wrap > .label,
.quote-section > .wrap > h2,
.quote-section > .wrap > p { color: var(--concrete-pale); }

/* Compact rhythm on the contact page so the whole card fits a screen
   without feeling cramped (quote page keeps its roomier defaults).
   NOTE: must sit AFTER the .quote-section .quote__form base above — the
   selectors tie on specificity, so source order decides the winner. */
.quote-section--contact { padding: clamp(40px, 4vw, 60px) 0; }
.quote-section--contact .form-standalone__head { margin-bottom: clamp(16px, 2.2vw, 26px); }
.quote-section--contact .form--wide { gap: 16px; }
.quote-section--contact .form__row { gap: 18px; }
.quote-section--contact .form__field { gap: 6px; }
.quote-section--contact .form__field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.quote-section--contact .form__field textarea,
.quote-section--contact .form__field select { padding: 11px 14px; }
.quote-section--contact .form__field textarea { min-height: 84px; }
.quote-section--contact .quote__form { padding: clamp(22px, 3vw, 40px); }
.quote-section--contact .form-standalone__submit { margin-top: 14px; }

/* =========================================================
   LOCMAP — expandable yard map card (footer)
   Vanilla port of the "expand-map" motion component: 3D pointer
   tilt, click-to-expand, streets that draw themselves in.
   ========================================================= */
.locmap {
  position: relative;
  display: block;
  width: 100%;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}

/* Full-bleed toggle. Sits below .locmap__body in the stack so the Google Earth
   actions can take clicks of their own once the card is open. */
.locmap__toggle {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.locmap__card {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px solid var(--glass-border, var(--line-dark));
  border-radius: var(--r-md);
  background: var(--black); /* matches the tiles while the embed loads */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition:
    height 0.62s var(--ease-lux),
    transform 0.5s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
.locmap:hover .locmap__card { box-shadow: 0 14px 38px -16px rgba(13, 13, 12, 0.18); }
.locmap__toggle:focus-visible { outline: none; }
.locmap:has(.locmap__toggle:focus-visible) .locmap__card { outline: 2px solid var(--accent); outline-offset: 3px; }
.locmap.is-open .locmap__card { height: 380px; }

/* Live embedded map fills the card, sitting behind the toggle + info panel */
.locmap__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Collapsed, the full-card toggle takes the click to expand. Open, it
   shrinks to the top strip — click there to collapse — so the real map
   below stays pannable and zoomable. */
.locmap.is-open .locmap__toggle { inset: 0 0 auto 0; height: 56px; }

/* --- Content layer --- */
.locmap__body {
  position: relative;
  z-index: 2;
  pointer-events: none;   /* clicks fall through to .locmap__toggle */
  /* Scrims keep the chip and the label legible over the satellite tiles */
  background:
    linear-gradient(to bottom, rgba(8, 8, 7, 0.55), rgba(8, 8, 7, 0) 26%),
    linear-gradient(to top, rgba(8, 8, 7, 0.82), rgba(8, 8, 7, 0) 46%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 18px 20px;
}
.locmap__top { display: flex; align-items: flex-start; justify-content: space-between; }
.locmap__icon {
  color: var(--accent-light);
  transition: opacity 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}
.locmap:hover .locmap__icon { filter: drop-shadow(0 0 8px rgba(26, 128, 64, 0.45)); }
.locmap.is-open .locmap__icon { opacity: 0; }
.locmap__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(8, 8, 7, 0.45);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.locmap:hover .locmap__live { transform: scale(1.05); background: rgba(8, 8, 7, 0.6); }
.locmap__live i {
  width: 6px;
  height: 6px;
  border-radius: var(--r-round);
  background: var(--accent-light);
  animation: locmapPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes locmapPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.locmap__foot { position: relative; }
.locmap__place {
  font-family: var(--ff-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  transition: transform 0.42s var(--ease-out);
}
.locmap:hover .locmap__place { transform: translateX(4px); }
.locmap__coords {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.72);
  transition: max-height 0.3s var(--ease-out), opacity 0.3s var(--ease-out), margin-top 0.3s var(--ease-out);
}
.locmap.is-open .locmap__coords { max-height: 20px; opacity: 1; margin-top: 4px; }
.locmap__rule {
  display: block;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(to right, rgba(26, 128, 64, 0.5), rgba(37, 168, 83, 0.28), transparent);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}
.locmap:hover .locmap__rule,
.locmap.is-open .locmap__rule { transform: scaleX(1); }

/* --- Google Earth / KMZ actions — revealed with the expanded card --- */
.locmap__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 0.4s var(--ease-out),
    opacity 0.3s var(--ease-out),
    margin-top 0.4s var(--ease-out);
}
.locmap.is-open .locmap__actions {
  max-height: 56px;
  margin-top: 14px;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0.14s;
}
.footer__col a.locmap__btn,
.locmap__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  background: var(--accent);
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform 0.32s var(--ease-out);
}
.footer__col a.locmap__btn:hover,
.locmap__btn:hover { background: var(--accent-light); border-color: var(--accent-light); transform: translateY(-1px); }
.locmap__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.locmap__btn svg { flex: none; }

.locmap__hint {
  margin-top: 8px;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute, var(--concrete-warm));
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.locmap:hover .locmap__hint,
.locmap:has(.locmap__toggle:focus-visible) .locmap__hint { opacity: 1; transform: translateY(0); }
.locmap.is-open .locmap__hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .locmap__card, .locmap__place, .locmap__rule,
  .locmap__actions, .locmap__btn { transition: none; }
  .locmap__live i { animation: none; }
}


/* =========================================================
   YMAP — Leaflet yard map (contact page), green duotone
   CARTO Positron basemap recoloured toward brand green, with
   a green pulsing pin. Matches the reference map style.
   ========================================================= */
.ymap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  border-top: 2px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--concrete-pale);
}
.ymap__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Live Google embed variant of the yard map — fills the .ymap frame,
   greyed to match the muted basemap treatment. */
.ymap__embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(1.01);
}

/* Neutral grey basemap — strip any residual tile colour, keep labels
   and roads legible with a touch of contrast. */
.ymap .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.04) brightness(1.01);
}

/* Marker — green dot with an expanding ring, echoing the reference pins */
.ymap-pin { position: relative; }
.ymap-pin__dot,
.ymap-pin__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: var(--r-round);
  transform: translate(-50%, -50%);
}
.ymap-pin__dot {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(13, 13, 12, 0.35);
  z-index: 2;
}
.ymap-pin__ring {
  width: 14px;
  height: 14px;
  background: var(--accent-light);
  opacity: 0.55;
  z-index: 1;
  animation: ymapPulse 1.8s ease-out infinite;
}
@keyframes ymapPulse {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(3.4); opacity: 0; }
}
.ymap--still .ymap-pin__ring { animation: none; opacity: 0; }

/* Badge — glass chip over the map, brand green */
.ymap__badge {
  position: absolute;
  left: clamp(12px, 2.5vw, 22px);
  bottom: clamp(12px, 2.5vw, 22px);
  z-index: 500;                 /* above Leaflet panes */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--glass-border, var(--line-dark));
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
}
.ymap__badge .ymap__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-round);
  background: var(--accent-light);
}

/* Leaflet chrome tuned to the brand */
.ymap .leaflet-control-zoom a {
  color: var(--ink);
  border-radius: 0;
}
.ymap .leaflet-control-zoom a:hover { color: var(--accent); }
.ymap .leaflet-bar { border-radius: var(--r-sm); overflow: hidden; box-shadow: 0 6px 20px -10px rgba(13,13,12,0.4); }
.ymap .leaflet-popup-content-wrapper {
  border-radius: var(--r-sm);
  font-family: var(--ff-body);
}
.ymap .leaflet-popup-content { font-size: 13px; line-height: 1.5; }
.ymap .leaflet-popup-content a { color: var(--accent); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.ymap .leaflet-container { background: var(--concrete-pale); font-family: var(--ff-body); }
.ymap .leaflet-control-attribution { font-size: 10px; }

/* =====================================================================
   REDUCED MOTION — perpetual animations
   The per-component blocks above cover the entrance and scroll motion.
   These are the ones that never stop on their own: they keep running for
   as long as the page is open, which is both a WCAG 2.2.2 (Pause, Stop,
   Hide) failure and a constant compositing cost.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .clients__track,
  .hi__cue-line::after,
  .sp__dot,
  .lr__mark,
  .lr__mark-glow,
  .drag-cursor__ring,
  .fp-cursor__ring,
  .projmodal__scrollcue svg,
  .ymap-pin__ring,
  .tile.is-tile-entering {
    animation: none !important;
  }
  /* The map's expanding ring is pure movement; without its animation it would
     otherwise sit frozen at full opacity over the pin. */
  .ymap-pin__ring { opacity: 0; }
  /* The marquee is transform-driven, so neutralise the offset it was
     mid-way through rather than leaving the track parked off-screen. */
  .clients__track { transform: none !important; }
}