/* ==========================================================================
   ASD Installations — Base Stylesheet
   Hand-authored CSS against tokens.css. No Tailwind: the design-token system
   we already built gives tighter control over the scroll/video sections than
   a utility framework would, and this is a small enough page surface that
   the tradeoff is worth it.
   ========================================================================== */

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
}

button,
input {
  font: inherit;
  color: inherit;
}

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

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

/* ---- Type scale ---- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.3rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.8rem);
  font-weight: 500;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 600;
}

p {
  text-wrap: pretty;
}

p.lede {
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  color: var(--ink-muted);
  max-width: 62ch;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* ---- Layout ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(56px, 9vw, 120px);
  position: relative;
  z-index: var(--z-content);
}

/* True white, distinct from the page's own --bg (a slightly warm off-white)
   — for a section that specifically needs to read as plain white, not the
   sitewide base tone. */
.section--white {
  background: var(--surface);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: clamp(32px, 5vw, 56px);
  max-width: 70ch;
}

.section-head--split {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--dur-ui) var(--ease-out-expo), background var(--dur-ui) var(--ease-in-out);
}

.btn--primary,
.site-header__cta {
  background: linear-gradient(180deg, #d84d35 0%, #bb3925 100%);
  color: #fff;
  border: 1px solid rgba(155, 34, 19, 0.7);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(180, 58, 34, 0.28);
}

.btn--primary:hover,
.site-header__cta:hover,
.btn--primary:focus-visible,
.site-header__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(180, 58, 34, 0.33);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}

.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--on-dark {
  background: var(--red-300);
  color: var(--n-950);
}

.btn--on-dark:hover {
  transform: translateY(-2px);
}

.btn--ghost-on-dark {
  background: transparent;
  color: var(--n-50);
  border-color: rgba(253, 249, 248, 0.3);
}

.btn--ghost-on-dark:hover {
  border-color: var(--n-50);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.site-header {
  position: fixed;
  top: 20px;
  left: 50%;
  /* Contained, not edge-to-edge — a floating inset bar rather than a full-
     width strip, per feedback. Width is capped well inside --container so
     it visibly doesn't reach either edge at any viewport ≥ ~500px. */
  width: min(1240px, calc(100% - 40px));
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(24, 27, 31, 0.08);
  box-shadow: 0 10px 30px rgba(11, 14, 18, 0.08);
  /* Light grey, a shade up from #939295, at ~78% alpha so the page scrolling
     underneath stays faintly visible through the bar — plus a light blur so
     that see-through content doesn't turn into illegible noise behind the
     nav links themselves. */
  background: rgba(253, 249, 247, 0.9);
  /* background: var(--bg); */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
  transition: opacity 320ms var(--ease-in-out), transform 320ms var(--ease-in-out);
}

/* Hidden until the hero video has finished scrubbing AND its hold has
   played out — shown by hero-scrub.js once the last clip has held on its
   final frame for a beat, so the hold reads as a genuine pause rather than
   nav popping in the instant the clip ends. No text lives inside the hero
   any more; the nav appearing IS the hero's own end state. */
.site-header.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.site-header__logo img {
  height: 44px;
  width: auto;
}

@media (max-width: 480px) {
  .site-header__logo img {
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: opacity 150ms ease;
    transform: translateX(-50%);
  }
}

.site-header__nav {
  display: none;
}

.site-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1;
  letter-spacing: 0.1em;
  font-weight: 600;
  /* Warm mid-grey (~7:1 on the cream bg): present, but softer than pure ink. */
  color: var(--ink-muted);
  cursor: pointer;
  transition: color 200ms var(--ease-in-out);
}

/* Underline indicator, grown from the centre. Ink on hover, brand red on
   the current page so "where am I" reads at a glance. */
.site-header__nav > a::before,
.nav-dropdown__trigger::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 250ms var(--ease-in-out), background-color 200ms var(--ease-in-out);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.nav-dropdown:hover .nav-dropdown__trigger,
.site-header__nav a[aria-current="page"] {
  color: var(--ink);
}

.site-header__nav > a:hover::before,
.nav-dropdown:hover .nav-dropdown__trigger::before,
.site-header__nav > a[aria-current="page"]::before,
.nav-dropdown__trigger[aria-current="page"]::before {
  transform: scaleX(1);
}

.site-header__nav > a[aria-current="page"]::before,
.nav-dropdown__trigger[aria-current="page"]::before {
  background: var(--accent);
}

.site-header__nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.site-header__nav .nav-dropdown__menu a {
  display: block;
  min-height: 0;
  padding: 10px 14px;
  letter-spacing: 0.01em;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav > a::before,
  .nav-dropdown__trigger::before {
    transition: none;
  }
}

@media (min-width: 1150px) {
  .site-header__nav {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.site-header__cta {
  flex-shrink: 0;
  padding: 12px 22px;
  font-size: 0.84rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Projects dropdown ---- */
.nav-dropdown {
  position: relative;
}

/* Bridges the gap between the trigger and .nav-dropdown__menu (which sits
   8px below it — see its own `top` rule). Without this, the mouse crosses
   a strip that belongs to neither element on its way from trigger to menu,
   :hover on .nav-dropdown drops for that instant, and the menu closes
   before you can reach it. Always present (not gated on :hover) and
   invisible — an empty, hoverable descendant filling exactly that strip
   keeps .nav-dropdown:hover continuous the whole way down. Sized to the
   menu's own min-width/centring so it covers a straight-down path
   regardless of how much wider the menu is than the trigger text. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max(100%, 160px);
  height: 8px;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-dropdown__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.7;
}

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 160px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(9, 7, 6, 0.14);
  padding: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-in-out), transform var(--dur-ui) var(--ease-in-out);
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown__menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible {
  background: rgba(11, 14, 18, 0.05);
  color: var(--n-950);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dropdown__menu {
    transition: opacity 150ms ease;
  }
}

/* ==========================================================================
   Hero — scroll-scrubbed video
   Sticky-pinned within a TALL container, not fixed-to-viewport — this is
   what lets it release naturally into the rest of the page instead of
   staying pinned over everything below it (see build notes on scroll-world).
   ========================================================================== */
.hero {
  position: relative;
  /* height set by JS to N * 100vh scroll-lengths once clip count is known;
     safe fallback below keeps the page usable before JS runs / with no JS */
  min-height: 250vh;
}

.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--n-950);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-sticky-video);
}

.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.hero__media video {
  opacity: 0;
  transition: opacity 260ms var(--ease-in-out);
}

.hero__media video.is-ready {
  opacity: 1;
}

/* Starts fully transparent — the opening frame is a clean white plate, no
   darkening needed while .hero__intro's dark-on-white text is on screen.
   Opacity is driven straight to 1 by hero-scrub.js in lockstep with the
   intro fading out, so it's back to full strength for the rest of the
   scrub — no text sits over the footage any more, but the scrim still
   keeps the clips reading as one graded sequence rather than a flash of
   raw, ungraded footage the instant the intro clears. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: linear-gradient(180deg, rgba(9, 7, 6, 0.55) 0%, rgba(9, 7, 6, 0.15) 32%, rgba(9, 7, 6, 0.05) 55%, rgba(9, 7, 6, 0.55) 100%);
  opacity: 0;
  pointer-events: none;
}

.hero-video-overlay-end {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 500ms var(--ease-out-quint), transform 500ms var(--ease-out-quint);
}

.hero-video-overlay-end.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero-video-overlay-end__inner {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(3rem, 8vh, 6rem);
}

.hero-video-overlay-end__content {
  max-width: min(32rem, 80vw);
  padding: 0.95rem 1.15rem 0.8rem;
  border-radius: 0.8rem;
  background: rgba(11, 12, 13, 0.18);
  backdrop-filter: blur(1px);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

.hero-video-overlay-end__headline {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42), 0 0 20px rgba(0, 0, 0, 0.18);
}

/* ---- Intro beat (white opening frame: logo + first headline) ---- */
.hero__intro {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start + padding-top, not justify-content:center — raises the
     logo/headline block up into the top third of the frame rather than
     dead-centre. Kept off the element's own `transform` deliberately:
     hero-scrub.js's reveal() drives that inline for the fade/slide-out,
     so vertical position has to live in layout (padding), not transform,
     or the JS write would silently clobber it every scroll frame. */
  justify-content: flex-start;
  padding-top: clamp(56px, 14vh, 170px);
  gap: 24px;
  text-align: center;
  padding-inline: var(--gutter);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 240ms var(--ease-in-out), transform 240ms var(--ease-in-out);
}

.hero__intro-logo {
  height: 64px;
  padding-right: 32px;
  width: auto;
}

.hero__intro-headline {
  color: var(--n-800);
  max-width: 24ch;
  font-weight: bold;
  font-size: clamp(2.4rem, 4.6vw, 5.4rem);
}

.hero__intro-subline {
  color: var(--red-700);
  max-width: 36ch;
  font-weight: normal;
  font-size: clamp(1.5rem, 2.6vw, 4.4rem);
}

.hero__light_glow {
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #B43A2200 10%, #B43A22 40%, var(--red-300) 50%, #B43A22 60%, #FFDED500 90%);
  margin: 0 auto;
}

@media (max-width: 480px) {
  .hero__intro-logo {
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__intro {
    transition: opacity 150ms ease;
    transform: none;
  }
}

/* Reused by the final CTA section too — not hero-specific despite the name. */
.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: var(--z-overlay-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-800);
  opacity: 1;
  transition: opacity var(--dur-ui) var(--ease-in-out);
}

.hero__scroll-hint i {
  width: 20px;
  height: 32px;
  border-radius: 12px;
  border: 1.5px solid rgba(27, 27, 27, 0.8);
  position: relative;
}

.hero__scroll-hint i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--red-600);
  transform: translateX(-50%);
  animation: hero-wheel 1.7s ease-in-out infinite;
}

.hero__scroll-hint-white {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: var(--z-overlay-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-100);
  opacity: 1;
  transition: opacity var(--dur-ui) var(--ease-in-out);
}

.hero__scroll-hint-white i {
  width: 20px;
  height: 32px;
  border-radius: 12px;
  border: 1.5px solid rgba(207, 207, 207, 0.8);
  position: relative;
}

.hero__scroll-hint-white i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--red-300);
  transform: translateX(-50%);
  animation: hero-wheel 1.7s ease-in-out infinite;
}


@keyframes hero-wheel {
  0% {
    opacity: 0;
    top: 6px;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    top: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    min-height: 100vh;
  }

  .hero__pin {
    position: relative;
    height: 100vh;
  }

  .hero__scroll-hint {
    display: none;
  }
}

/* ==========================================================================
   About hero — plain page background, no image. Centred eyebrow/h1/lede,
   modelled on modusprojects.nl/over-ons's own hero (big centred statement
   on a bare light ground, nothing else competing with it). Reuses the same
   centred-statement idea as .statement below, just sized as a real page
   hero (bigger type, generous top padding to clear the floating nav, since
   unlike .statement this IS the first thing on the page). These pages
   render `.site-header.is-visible` straight in the markup instead of via
   hero-scrub.js — there's no hero-gated reveal to wait on here.
   ========================================================================== */
.about-hero {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.about-hero__content {
  position: relative;
  z-index: 5;
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(100px, 16vh, 160px) clamp(48px, 7vw, 80px);
  padding-inline: clamp(1rem, 3vw, 2rem);
  background: rgba(6, 9, 12, 0.12);
  /* border-color: solid rgba(255, 255, 255, 0.2); */
  border-style: solid;
  border-width: 1px 0px 1px 0px;
  border-color: rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition: opacity 500ms var(--ease-out-quint), transform 500ms var(--ease-out-quint), filter 500ms var(--ease-out-quint);
}

.about-hero__content h1 {
  margin-top: 14px;
  color: var(--n-50);
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.about-hero__content .eyebrow {
  color: rgba(255, 255, 255, 0.82);
}

.about-hero__content p.lede {
  margin: 20px auto 0;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   Scroll reel — single-clip version of the homepage hero's scroll-scrub,
   but repurposed here as the visual background behind the About hero.
   The reel fills the viewport width, sits behind the text overlay, and fades
   the copy out gently during the final hold so the next content section can
   take over as the page continues to scroll.
   ========================================================================== */
.scroll-reel {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: 100vh;
  /* JS overrides to N * scroll length once mounted */
  background: #0b0d10;
  overflow: clip;
  isolation: isolate;
}

.about-hero-scroll {
  z-index: 0;
}

.scroll-reel__pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 10, 12, 0.25) 0%, rgba(8, 10, 12, 0.55) 100%);
}

.scroll-reel__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 15, 0.3) 0%, rgba(10, 12, 15, 0.5) 32%, rgba(10, 12, 15, 0.72) 100%);
  z-index: 1;
}

.scroll-reel__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.scroll-reel__media img,
.scroll-reel__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}

.scroll-reel__media video {
  opacity: 0;
  transition: opacity 260ms var(--ease-in-out);
}

.scroll-reel__media video.is-ready {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reel {
    min-height: auto;
    padding-block: clamp(24px, 4vw, 48px);
  }

  .scroll-reel__pin {
    position: relative;
    top: 0;
    height: 72vh;
  }
}

/* ==========================================================================
   Three pillars — "No Delays / No Hidden Costs / No Passing the Buck".
   Three contiguous full-bleed colour blocks (ink / warm neutral / brand
   red — the existing token scale's own three darkest registers, not new
   hand-picked colours) rather than three white cards, so the row reads as
   one solid claim rather than three separate testimonials. Rises into view
   on scroll — a taller, more deliberate lift than the generic .reveal
   fade-up (translateY(42px)) elsewhere on the site, because these are
   meant to read as load-bearing, not as another incidental section.
   ========================================================================== */
.pillars__row {
  display: grid;
  grid-template-columns: 1fr;
}

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

.pillar {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 42vw, 520px);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
}

/* Soft bleed-off circle, low-opacity white on every variant — reads as
   quiet depth on ink, neutral, and red alike without per-variant tuning. */
.pillar::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -42%;
  width: 140%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(253, 249, 248, 0.05);
  transform: translateX(-50%);
  pointer-events: none;
}

.pillar__num {
  position: relative;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}

.pillar h3 {
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--n-50);
}

.pillar p {
  position: relative;
  font-size: 1rem;
  max-width: 46ch;
}

.pillar--ink {
  background: var(--n-900);
}

.pillar--ink .pillar__num {
  color: var(--red-300);
}

.pillar--ink p {
  color: var(--n-400);
}

.pillar--neutral {
  background: var(--n-600);
}

.pillar--neutral .pillar__num {
  color: var(--n-950);
}

.pillar--neutral p {
  color: rgba(253, 249, 248, 0.8);
}

.pillar--red {
  background: var(--red-800);
}

.pillar--red .pillar__num {
  color: var(--red-200);
}

.pillar--red p {
  color: rgba(253, 249, 248, 0.82);
}

/* Overrides the generic .reveal fade-up (both apply — reveal.js adds the
   plain .reveal class to every .reveal-group child) with a taller rise and
   a longer hold, per the "pillars rising into place" brief. Two-class
   selector wins over the single-class generic rule on specificity, same
   technique as .fleet-static__frame.reveal above. */
.pillars__row.reveal-group .pillar.reveal {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 900ms var(--ease-out-quint), transform 900ms var(--ease-out-quint);
}

.pillars__row.reveal-group .pillar.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pillars__row.reveal-group .pillar.reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Partner strip — dark, restrained, logos in reserve (matches the palette
   doc's "near-black doing most of the work" rule)
   ========================================================================== */

.intro-statement {
  border-top: 5px solid var(--accent-strong);
}

.partners {
  /* background: var(--ink-surface); */
  background: linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 45%, var(--red-800) 100%);

  color: var(--ink-surface-ink);
  padding-block: clamp(40px, 6vw, 64px);
}

.partners__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-surface-muted);
  text-align: center;
  margin-bottom: 32px;
}

/* Full-bleed on purpose (sits outside .container) — a marquee needs to run
   edge to edge, not stop at the page's text margins. Edge-fade mask keeps
   the loop from reading as an abrupt clip at either side. */
.partners__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.partners__track-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  padding-inline: 32px;
  animation: partners-marquee 32s linear infinite;
}

/* Two identical sets back to back — translating exactly -50% of the
   doubled row's width always lands on the same pixel the row started at,
   so the loop point is invisible regardless of how many logos there are. */
@keyframes partners-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.partners__track:hover .partners__track-inner {
  animation-play-state: paused;
}

.partners__logo {
  max-height: 58px;
  width: auto;
  flex: none;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.68;
  transition: opacity var(--dur-ui) var(--ease-in-out);
}

.partners__logo:hover {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .partners__track-inner {
    animation: none;
  }

  .partners__logo[aria-hidden] {
    display: none;
  }

  /* collapses back to one clean static row of 8 */
}

/* ---- Light variant — About page: plain white section, each logo in its
   own bordered card (dark outline, white fill) rather than floating loose
   in the track — modelled on modusprojects.nl/diensten's own brand-logo
   row. Full-colour logos (same files as the dark homepage strip; only the
   CSS filter differs, so there's no separate colour asset set to source).

   Two of the eight source files (Durkan, Bugler) are white wordmarks with
   a transparent background — invisible inside a white card regardless of
   the section's own background, since the problem is inside the logo
   file itself. --dark on just those two cards swaps the card fill to ink
   instead of trying to solve it with a section-wide colour change. ---- */
.partners--light {
  background: var(--surface);
  color: var(--ink);
}

.partners--light .partners__label {
  color: var(--ink-muted);
}

.partners--light .partners__track-inner {
  gap: 20px;
}

.partners__logo-box {
  flex: none;
  width: 200px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

.partners__logo-box--dark {
  background: var(--ink);
}

.partners--light .partners__logo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  filter: none;
  opacity: 1;
}

/* ==========================================================================
   Fleet — static image, wipe reveal. White section (--bg, the page default —
   no special background needed, this is back to being a normal section).
   .fleet-static__frame carries .reveal purely to get itself observed by
   reveal.js's existing IntersectionObserver; the override two rules down
   cancels that class's own fade-up so the wipe is the only motion.
   ========================================================================== */
.fleet-static__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 2304 / 1856;
  /* the source photo's own ratio — shown whole, not cropped */
}

.fleet-static__frame.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.fleet-static__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fleet-static__wipe {
  position: absolute;
  inset: 0;
  background: var(--surface);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out-quint);
}

/* reveal.js adds .is-visible to any .reveal element once it scrolls into
   view — the panel's right edge retreats toward its left-anchored origin,
   uncovering the image starting at the right, finishing at the left. */
.fleet-static__frame.is-visible .fleet-static__wipe {
  transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
  .fleet-static__wipe {
    transition: none;
  }
}


/* ==========================================================================
   Card grids — Built for Every Scale / Services
   ========================================================================== */
.grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

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

.grid-2 {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card .eyebrow {
  color: var(--ink-faint);
}

.card h3 {
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.card p {
  color: var(--ink-muted);
  font-size: 1.08rem;
  flex-grow: 1;
}

.card__link {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  align-items: center;
}

.card__link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Intro statement — first thing after the hero releases. Centred and on
   plain white on purpose: a deliberate change of register from the hero's
   full-bleed video and from every left-aligned .section-head below it, so
   it reads as a single held breath rather than another content section.
   ========================================================================== */
.statement {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

.statement h2 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.4vw, 3.6rem);
}

.statement p.lede {
  margin: 28px auto 0;
  max-width: 640px;
}

/* ==========================================================================
   Services showcase — "This is what we do best." Intro column + a divided
   list of image/label/plus rows, on the same dark ink-surface band already
   used for the partner strip / CTA / footer (not a new colour, reused on
   purpose). The "+" keeps the single-accent rule: red only on that one
   circle, nowhere else in the row.
   ========================================================================== */
/* Two-tone black-to-red, not flat ink-surface black — the one section on
   the page that gets the brand red as a real background presence rather
   than a sparing accent, per feedback. Still holds to the darkest rung of
   the red scale (red-800), not the bright red-500/600 anchor, so it reads
   as a deep, moody wash rather than breaking the "red held in reserve"
   rule everywhere else. */
.services-showcase {
  background: linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 45%, var(--red-800) 100%);
  color: var(--ink-surface-ink);
}

.services-showcase__grid {
  display: grid;
  gap: 48px;
}

@media (min-width: 900px) {
  .services-showcase__grid {
    grid-template-columns: minmax(240px, 340px) 1fr;
    gap: 64px;
    align-items: start;
  }
}

.services-showcase__intro h2 {
  color: var(--ink-surface-ink);
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.services-showcase__intro .lede {
  margin-top: 16px;
  color: var(--ink-surface-muted);
  max-width: 40ch;
}

.services-showcase__list {
  display: flex;
  flex-direction: column;
}

.services-showcase__item {
  --svc-thumb: clamp(120px, 17vw, 220px);
  --svc-gap: 28px;
  padding-block: 28px;
  border-bottom: 1px solid rgba(253, 249, 248, 0.14);
}

.services-showcase__item:first-child {
  padding-top: 0;
}

.services-showcase__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Whole row is the button (thumb + label + plus), not just the 44px
   circle — a bigger, more forgiving target, especially on touch. */
.services-showcase__toggle {
  display: flex;
  align-items: center;
  gap: var(--svc-gap);
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.services-showcase__toggle:focus-visible {
  outline: 2px solid var(--ink-surface-accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}

.services-showcase__thumb {
  display: block;
  flex: none;
  width: var(--svc-thumb);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  /* Placeholder fill until real photography lands — swap for an <img
     class="..."> inside .services-showcase__thumb (object-fit: cover,
     100%/100%) and this background becomes irrelevant. */
  background: linear-gradient(135deg, var(--red-900), var(--n-800));
}

.services-showcase__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.services-showcase__thumb-tag {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(253, 249, 248, 0.6);
  line-height: 1.4;
}

.services-showcase__label {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.15;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  color: var(--ink-surface-ink);
}

.services-showcase__plus {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(253, 249, 248, 0.3);
  position: relative;
  transition: border-color var(--dur-ui) var(--ease-in-out), background-color var(--dur-ui) var(--ease-in-out), transform 320ms var(--ease-out-expo);
}

.services-showcase__plus::before,
.services-showcase__plus::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 1.5px;
  background: var(--ink-surface-accent);
  border-radius: 1px;
}

.services-showcase__plus::after {
  transform: rotate(90deg);
}

.services-showcase__toggle:hover .services-showcase__plus {
  border-color: var(--ink-surface-accent);
}

.services-showcase__toggle[aria-expanded="true"] .services-showcase__plus {
  transform: rotate(45deg);
  border-color: var(--ink-surface-accent);
  background: rgba(239, 155, 137, 0.1);
}

/* Expanding panel. grid-template-rows 0fr → 1fr animates to the content's
   real height without measuring it in JS. Collapsed state is only applied
   once services-accordion.js marks the list ready, so with JS off every
   description simply shows. Indented to line up under the label. */
.services-showcase__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 420ms var(--ease-out-expo), opacity 300ms var(--ease-in-out), visibility 0s;
}

.services-showcase__panel-inner {
  overflow: hidden;
  min-height: 0;
  padding-left: calc(var(--svc-thumb) + var(--svc-gap));
  padding-right: calc(44px + var(--svc-gap));
}

.services-showcase__panel-inner p {
  padding-top: 20px;
  color: var(--ink-surface-muted);
  line-height: 1.65;
  max-width: 60ch;
}

.services-showcase__link {
  display: inline-block;
  margin-top: 14px;
  padding-block: 6px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-surface-accent);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-in-out);
}

.services-showcase__link:hover {
  color: var(--ink-surface-ink);
}

[data-services-accordion].is-ready .services-showcase__panel:not(.is-open) {
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition: grid-template-rows 420ms var(--ease-out-expo), opacity 200ms var(--ease-in-out), visibility 0s 420ms;
}

[data-services-accordion].is-init .services-showcase__panel {
  transition: none !important;
}

/* Phones: the thumb is ~120px there, so indenting under the label would
   squeeze the copy into a narrow column — run it full width instead. */
@media (max-width: 599px) {
  .services-showcase__item {
    --svc-gap: 18px;
    --svc-thumb: 96px;
  }

  .services-showcase__panel-inner {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .services-showcase__panel,
  [data-services-accordion].is-ready .services-showcase__panel:not(.is-open),
  .services-showcase__plus {
    transition: none;
  }
}

/* ==========================================================================
   ASD Servicing cross-promo — deliberately the loudest thing on the page.
   Near-black + a sharp full-bleed red top edge, not the restrained "red in
   reserve" rule the rest of the site holds to: this strip's whole job is
   to read as a different company, not blend in as another section.
   ========================================================================== */
.asd-servicing {
  /* background: var(--n-950); */
  background: linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 45%, var(--red-800) 100%);
  /* border-top: 5px solid var(--accent-strong); */
}

.asd-servicing__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-block: clamp(36px, 5vw, 56px);
}

/* 72px, bigger than the header logo (44–52px) — this strip is meant to
   announce a second brand, not sit quietly. The source PNG has since been
   trimmed of ~27% baked-in transparent padding it shipped with, which was
   the other half of why it read small at any height. */
.asd-servicing__logo {
  height: 72px;
  width: auto;
  flex: 1;
}

.asd-servicing__copy {
  flex: 1 1 380px;
  min-width: 0;
}

.asd-servicing__copy .eyebrow {
  color: var(--red-300);
}

/* h2/lede: no size override — inherit the SAME clamp() every other h2 and
   p.lede on the page uses (global rules). The previous version shrank both
   below that shared scale for no real reason; this strip needs to be
   louder than the rest of the page, not smaller. */
.asd-servicing__copy h2 {
  margin-top: 8px;
  color: var(--n-50);
}

.asd-servicing__copy .lede {
  margin-top: 10px;
  color: var(--n-300);
  max-width: 56ch;
}

.asd-servicing__cta {
  flex: none;
}

@media (max-width: 640px) {
  .asd-servicing__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .asd-servicing__cta {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   Why ASD — callout band
   ========================================================================== */
.callout {
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px);
}

.callout h2 {
  color: var(--ink);
}

.callout p.lede {
  margin-top: 16px;
  color: var(--ink-muted);
}

.callout__cta {
  margin-top: 24px;
}

/* ==========================================================================
   How It Works — real sequence, numbering is earned here
   ========================================================================== */
.steps {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 780px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.step__num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  padding-bottom: 10px;
  width: fit-content;
}

/* font-size removed — it was hard-set to 1.1rem, below the documented
   global h3 floor of 1.25rem (line 38). Same class of bug as the ASD
   Servicing strip: inherits the shared scale now instead of a one-off
   smaller value. text-transform/letter-spacing/weight are legitimate
   stylistic choices, not scale violations, so those stay. */
.step h3 {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
}

.step p {
  color: var(--ink-muted);
  font-size: 1.08rem;
}

/* matches .card p — same role, same size */

/* ==========================================================================
   Accreditations / Brand partners — full colour, unlike the developer
   partner strip. A trust badge's recognition depends on its real colour
   (FENSA's maroon, CHAS's purple) — greyscaling it defeats the point.
   ========================================================================== */
.badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 640px) {
  .badge-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.badge-grid--2col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 560px;
}

.badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Scroll reveal — fade-up on entering the viewport. Marketing content gets
   more room than a UI micro-interaction: longer duration, ease-out (the
   correct curve for anything entering the screen).
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 750ms var(--ease-out-quint), transform 750ms var(--ease-out-quint);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Projects / Case studies — data-driven card row (projects-cs.js renders
   the cards from PROJECTS_DATA; this is purely presentation).
   ========================================================================== */
.projects-cs {
  /* background: var(--ink-surface); */
  background: linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 65%, var(--red-800) 100%);
  color: var(--ink-surface-ink);
}

.projects-cs .section-head .eyebrow {
  color: var(--ink-surface-accent);
}

.projects-cs .section-head h2 {
  color: var(--ink-surface-ink);
}

/* Full-bleed on purpose (sits outside .container, like the partner
   marquee) — a carousel needs to scroll past the page's text margins.
   Scrollbar hidden: the prev/next buttons are the intended control;
   native drag/swipe still works underneath. */
.pcs-viewport {
  margin-top: clamp(32px, 5vw, 56px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pcs-viewport::-webkit-scrollbar {
  display: none;
}

.pcs-row {
  display: flex;
  gap: 16px;
  width: max-content;
  height: clamp(420px, 46vw, 620px);
  padding-inline: var(--gutter);
  /* keeps the first card's left edge aligned with .container above it */
}

.pcs-card {
  position: relative;
  height: 100%;
  flex: 0 0 240px;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  outline-offset: 4px;
  transition: flex-basis 420ms var(--ease-out-quint);
}

.pcs-card.is-active {
  flex-basis: clamp(480px, 46vw, 640px);
}

.pcs-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out-quint);
}

.pcs-card:hover .pcs-card__img,
.pcs-card.is-active .pcs-card__img {
  transform: scale(1.04);
}

.pcs-card__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 7, 6, 0) 40%, rgba(9, 7, 6, 0.85) 100%);
}

/* Collapsed state: just the name, understated — the image stays the focus. */
.pcs-card__label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: var(--n-50);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 200ms var(--ease-in-out);
}

.pcs-card.is-active .pcs-card__label {
  opacity: 0;
}

/* Expanded state: full meta block, revealed not just faded — a slight
   rise on entry (matches the site's other reveal motion vocabulary). */
.pcs-card__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(20px, 3vw, 32px);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 320ms var(--ease-out-quint) 80ms, transform 320ms var(--ease-out-quint) 80ms;
}

.pcs-card.is-active .pcs-card__meta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pcs-card__meta-overlay {
  position: absolute;

  width: 100%;
  height: 100%;
  inset: 0;
  z-index: -1;
  background: linear-gradient(261deg, rgba(0, 0, 0, 0.20) 15.21%, rgba(0, 0, 0, 0.70) 92.19%);
  filter: blur(36px);
  /* background-color: linear-gradient(180deg, rgba(9, 7, 6, 0) 40%, rgba(9, 7, 6, 0.85) 100%); */
  /* background-color: red; */
}

.pcs-card__cat {
  color: var(--red-300);
}

.pcs-card__name {
  margin-top: 8px;
  color: var(--n-50);
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

.pcs-card__loc {
  display: block;
  margin-top: 4px;
  color: var(--n-300);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pcs-card__summary {
  margin-top: 12px;
  color: var(--n-300);
  font-size: 0.95rem;
  max-width: 42ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pcs-card__link {
  display: inline-flex;
  margin-top: 16px;
  color: var(--red-300);
  font-weight: 600;
  font-size: 0.92rem;
}

.pcs-card__link:hover {
  text-decoration: underline;
}

.pcs-card:focus-visible {
  outline: 2px solid var(--accent);
}

.pcs-nav {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.pcs-nav__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(253, 249, 248, 0.3);
  background: transparent;
  color: var(--n-50);
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-in-out), background var(--dur-ui) var(--ease-in-out);
}

.pcs-nav__btn:hover {
  border-color: var(--accent-strong);
  background: rgba(139, 32, 9, 0.18);
}

.pcs-nav__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 899px) {

  /* No width-expand on mobile — there's no room. "Expand" becomes a
     content reveal instead: the meta block (name/location/summary/link)
     fades in over the same-size card rather than the card growing. */
  .pcs-card,
  .pcs-card.is-active {
    flex-basis: 82vw;
  }

  .pcs-row {
    height: clamp(380px, 108vw, 480px);
  }
}

@media (prefers-reduced-motion: reduce) {

  .pcs-card,
  .pcs-card__img,
  .pcs-card__label,
  .pcs-card__meta {
    transition: none;
  }
}

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.final-cta p.lede {
  text-align: center;
}

.final-cta .hero__actions {
  justify-content: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--n-950);
  color: var(--n-400);
  padding-block: clamp(48px, 6vw, 72px) 28px;
  border-top: 5px solid var(--accent-strong);
  font-size: 0.9rem;
}

.site-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(253, 249, 248, 0.1);
}

@media (min-width: 700px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer__brand img {
  height: 32px;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.site-footer__tag {
  margin-top: 14px;
  max-width: 32ch;
  color: var(--n-500);
}

.site-footer__heading {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--n-500);
  margin-bottom: 14px;
}

.site-footer__links,
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__links a,
.site-footer__contact a {
  color: var(--n-300);
  transition: color var(--dur-ui) var(--ease-in-out);
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
  color: var(--n-50);
}

.site-footer__bottom {
  padding-top: 24px;
  font-size: 0.8rem;
  color: var(--n-500);
}

/* ==========================================================================
   Mobile nav (burger + full-screen panel)
   Below 900px .site-header__nav (the desktop link row) is display:none with
   nothing standing in for it — logo and CTA only, no way to reach About/
   Services/Projects at all. This is what fixes that.

   The panel is a SIBLING of .site-header in the markup, not nested inside
   it — .site-header carries its own opacity/transform for the homepage's
   hero-gated reveal (hidden until hero-scrub.js adds .is-visible), and
   nesting the panel inside would inherit that same hidden state, making
   the burger button itself unreachable during the hero scrub. Only the
   burger BUTTON lives inside the header (so it hides/reveals in lockstep
   with the rest of the nav, same as every other nav item); the panel it
   opens sits independently.
   ========================================================================== */
.site-header__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

@media (max-width: 1149px) {
  .site-header__burger {
    display: inline-flex;
  }
}

.site-header__burger-bar {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--n-900);
  border-radius: 2px;
  transition: transform var(--dur-ui) var(--ease-in-out), opacity var(--dur-ui) var(--ease-in-out);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(2) {
  opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* The floating header bar is inset from the viewport edge and sized to its
   content (no fixed width) — logo + CTA + burger together get tight on the
   smallest phones. The CTA moves into the panel itself (as the first,
   most prominent item) below this width instead of fighting for space in
   the bar. */
@media (max-width: 639px) {
  .site-header__cta {
    display: none;
  }
}

.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) - 1);
  overflow-y: auto;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: 100px 28px 40px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur-ui) var(--ease-in-out), transform var(--dur-ui) var(--ease-in-out);
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav .btn {
  justify-content: center;
  margin-bottom: 28px;
}

.mobile-nav__link {
  display: block;
  padding: 16px 2px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}

.mobile-nav__sub {
  display: flex;
  flex-direction: column;
  padding-left: 12px;
}

.mobile-nav__sub a {
  padding: 12px 2px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border);
}

.mobile-nav__link[aria-current="page"],
.mobile-nav__sub a[aria-current="page"] {
  color: var(--accent-strong);
}

@media (min-width: 1150px) {
  .mobile-nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .site-header__burger-bar,
  .mobile-nav {
    transition: none;
  }
}

/* Locks the background from scrolling underneath the open full-screen
   panel — toggled by nav-toggle.js alongside .mobile-nav.is-open. */
body.nav-open {
  overflow: hidden;
}

/* ==========================================================================
   Projects index (projects.html) — full card grid, static (no expand/hover
   interaction like the homepage's .pcs-row teaser). Rendered by
   projects-grid.js from the same PROJECTS_DATA array the homepage/About
   teaser and each case-study page's nav dropdown already read — add or
   remove a project in that one file and this page updates with it.

   Cover photos are 1856×2304 portrait; cards crop them to 4:5 with
   object-fit: cover, and the featured card to a landscape crop. */
/* ---- Static page hero (projects.html) ---- */
/* Six nav items: slightly tighter links until there's room */
@media (min-width: 1150px) and (max-width: 1320px) {
  .site-header__nav a { padding: 0 11px; letter-spacing: 0.06em; font-size: 0.8rem; }
  .site-header__nav > a::before, .nav-dropdown__trigger::before { left: 11px; right: 11px; }
}

.project-card__client { font-size: 0.85rem; color: var(--ink-muted); }
.project-card__client strong { color: var(--ink); font-weight: 600; }

/* Waiting-on-data projects: visible, clearly not clickable */
.project-card--soon { cursor: default; background: var(--bg); }
.project-card--soon:hover { box-shadow: none; border-color: var(--border); }
.project-card--soon:hover .project-card__img { transform: none; }
.project-card--soon .project-card__img { filter: grayscale(0.5); opacity: 0.85; }
.project-card--soon .project-card__tag { background: var(--ink); color: var(--n-50); }
.project-card__soon-note { margin-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--ink-muted); }

.page-hero {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.page-hero__content {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
  padding-block: clamp(140px, 20vh, 200px) clamp(48px, 7vw, 80px);
}

.page-hero__content h1 { margin-top: 14px; color: var(--ink); }
.page-hero__content .eyebrow { color: var(--accent-strong); }
.page-hero__content p.lede { margin: 20px auto 0; max-width: 60ch; color: var(--ink-muted); }

/* Grid: 1 col → 2 (≥640) → 3 (≥1000). The featured project spans two
   columns; its image stretches to the row height so it reads as a wide
   landscape crop beside the portrait cards. */
.projects-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .project-card--featured { grid-column: span 2; }
  .project-card--featured .project-card__img-wrap { aspect-ratio: 16 / 9; }
}

/* Desktop: the featured project is a full-width horizontal card (photo
   left, details right) so the remaining projects fill whole rows of 3. */
@media (min-width: 1000px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .projects-grid .project-card--featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
  .projects-grid .project-card--featured .project-card__img-wrap { aspect-ratio: auto; min-height: 420px; }
  .projects-grid .project-card--featured .project-card__body {
    justify-content: center;
    gap: 12px;
    padding: clamp(28px, 4vw, 56px);
  }
}

.project-card[hidden] { display: none; }

.project-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease-in-out), box-shadow var(--dur-ui) var(--ease-in-out);
}

/* Hover = shadow + border + image zoom, no layout-shifting lift */
.project-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px rgba(9, 7, 6, 0.1);
}

.project-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.project-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-sunk);
}

.project-card__img-wrap picture { display: contents; }

.project-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out-quint);
}

.project-card:hover .project-card__img { transform: scale(1.04); }

/* Category tag on the image — solid surface so it stays readable over
   any photo */
.project-card__tag {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.94);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 0;
}

.project-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 2.2vw, 1.75rem);
  line-height: 1.1;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.005em;
  margin: 0;
}

.project-card--featured .project-card__name { font-size: clamp(1.7rem, 3vw, 2.25rem); }

.project-card__loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.project-card__loc svg { flex-shrink: 0; color: var(--accent); }

.project-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.project-card__chips li {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent-strong);
}

.project-card__link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.project-card:hover .project-card__link svg { transform: translateX(4px); }

/* ---- Stats row under the hero ---- */
.projects-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 40px;
  margin-top: 28px;
}

.projects-stats[hidden] { display: none; }

.projects-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.projects-stats__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--accent-strong);
}

.projects-stats__label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- Sector filter chips (same language as the quote modal's tabs) ---- */
.projects-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.projects-filter[hidden] { display: none; }

.projects-filter__chip {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-in-out), border-color var(--dur-micro) var(--ease-in-out), color var(--dur-micro) var(--ease-in-out);
}

.projects-filter__chip:hover { border-color: var(--n-400); }

.projects-filter__chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--n-50);
}

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

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .project-card__img,
  .project-card__link svg { transition: none; }
  .project-card:hover .project-card__img,
  .project-card:hover .project-card__link svg { transform: none; }
}


/* ==========================================================================
   Accessibility: focus states
   ========================================================================== */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent-strong);
  color: #fff;
  padding: 12px 20px;
}

.skip-link:focus {
  left: var(--gutter);
  top: 16px;
}

/* ==========================================================================
   About — Supply & Install. Intro left, a numbered three-item list right
   (stacks on phones). Same divided-list rhythm as the homepage services
   showcase, but on the light page ground.
   ========================================================================== */
.supply {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

@media (min-width: 900px) {
  .supply {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 72px;
    align-items: start;
  }
}

.supply__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.supply__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-strong);
}

.supply__item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding-block: 24px;
  border-bottom: 1px solid var(--border);
}

.supply__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  padding-top: 6px;
}

.supply__item h3 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.supply__item p {
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 1.05rem;
  max-width: 52ch;
}

/* ==========================================================================
   About — Quality Assurance. Dark band: the client wants this to read as a
   headline commitment. Three checks + the handover they gate, joined by a
   rule so it reads as one sequence, not four separate cards.
   ========================================================================== */
.qa {
  background: linear-gradient(160deg, var(--n-950) 0%, var(--n-900) 60%, var(--red-900) 140%);
  color: var(--ink-surface-ink);
}

.qa .section-head h2 {
  color: var(--ink-surface-ink);
}

.qa .section-head .eyebrow {
  color: var(--ink-surface-accent);
}

.qa .section-head p.lede {
  color: var(--ink-surface-muted);
}

.qa__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
}

@media (min-width: 900px) {
  .qa__steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.qa__step {
  position: relative;
  padding: 28px 0 28px 28px;
  border-left: 1px solid rgba(253, 249, 248, 0.18);
}

/* Node on the line: hollow for each check, solid red for the handover. */
.qa__step::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 34px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--n-900);
  border: 1.5px solid var(--ink-surface-accent);
}

@media (min-width: 900px) {
  .qa__step {
    padding: 36px 28px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(253, 249, 248, 0.18);
  }

  .qa__step::before {
    left: 0;
    top: -6px;
  }
}

.qa__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-surface-accent);
}

.qa__step h3 {
  margin-top: 10px;
  color: var(--ink-surface-ink);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.qa__step p {
  margin-top: 10px;
  color: var(--ink-surface-muted);
  font-size: 1.02rem;
  max-width: 34ch;
}

.qa__step--handover::before {
  background: var(--red-500);
  border-color: var(--red-500);
  box-shadow: 0 0 0 5px rgba(180, 58, 34, 0.25);
}

.qa__step--handover p {
  color: var(--n-200);
}

/* ==========================================================================
   About — Founder's story. Portrait (4:5) left, story right; photo stacks
   on top on phones. Signature set in Mrs Saint Delafield (loaded on the
   About page only) until the real one is supplied.
   ========================================================================== */
.founder {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

@media (min-width: 900px) {
  .founder {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
    gap: 80px;
    align-items: center;
  }
}

.founder__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  /* Placeholder until assets/img/team/sam-dalti.jpg lands. */
  background: linear-gradient(160deg, var(--n-800), var(--n-950) 70%, var(--red-900));
}

@media (max-width: 899px) {
  .founder__photo {
    max-width: 520px;
  }
}

.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}

.founder__facts {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.founder__facts span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(23, 19, 17, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  color: var(--n-300);
  font-size: 0.85rem;
}

.founder__facts strong {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--n-50);
}

.founder__story {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.founder__story h2 {
  margin-bottom: 6px;
}

.founder__story p {
  color: var(--ink-muted);
  font-size: 1.08rem;
  line-height: 1.7;
  max-width: 60ch;
}

.founder__signoff {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.founder__signature {
  font-family: "Mrs Saint Delafield", "Brush Script MT", cursive;
  font-size: clamp(3rem, 6vw, 4.2rem);
  line-height: 1;
  color: var(--n-900);
  transform: rotate(-3deg);
  transform-origin: left center;
  margin-bottom: 8px;
}

.founder__name {
  font-weight: 600;
  color: var(--ink);
}

.founder__title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}
/* ==========================================================================
   What We Do / Our Partners / Contact pages
   ========================================================================== */
.wwd-grid,
.wwd-sizes,
.wwd-sectors,
.partners-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .wwd-grid, .wwd-sizes, .wwd-sectors { grid-template-columns: repeat(3, 1fr); }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .partners-grid { grid-template-columns: repeat(4, 1fr); }
}

.wwd-card,
.wwd-size,
.wwd-sectors li,
.partner-card,
.contact-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.wwd-card img { width: 100%; height: 180px; object-fit: contain; margin-bottom: 16px; }
.wwd-card h3, .wwd-size h3, .wwd-sectors h3, .partner-card__name, .contact-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

.wwd-card p, .wwd-size p, .wwd-sectors p { margin: 0; color: var(--ink-muted); }

.wwd-size__tag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wwd-sectors { list-style: none; margin: 0; padding: 0; }
.wwd-more { margin: 28px 0 0; text-align: center; }

/* Partners */
.partner-card { display: flex; flex-direction: column; gap: 12px; }
.partner-card__logo {
  height: 96px;
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 8px;
  background: var(--bg);
}
.partner-card__logo img { max-height: 64px; max-width: 80%; object-fit: contain; }
.partner-card__name { font-size: 1.35rem; margin: 4px 0 0; }
.partner-card__projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.partner-card__projects a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-weight: 600;
  color: var(--accent-strong);
}
.partner-card__projects a:hover { text-decoration: underline; text-underline-offset: 3px; }
.partner-card__soon, .partner-card__none { font-size: 0.82rem; color: var(--ink-muted); margin: 0; }

/* Contact */
.contact-layout {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 960px) {
  .contact-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
  .contact-card { position: sticky; top: 112px; }
}

.contact-card__list { margin: 12px 0 0; display: grid; gap: 16px; }
.contact-card__list div { display: grid; gap: 2px; }
.contact-card__list dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.contact-card__list dd { margin: 0; font-weight: 600; }
.contact-card__list a { color: var(--accent-strong); }
.contact-form { scroll-margin-top: 110px; }

/* ---- UI/UX audit fixes ---- */
/* Footer links: 44px tap targets */
.site-footer__links a,
.site-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }

/* Partner logos made for dark backgrounds */
.partner-card__logo.is-dark { background: var(--ink); }
.partner-card__projects a { display: inline-block; min-height: 0; padding-block: 10px; }

/* Phones: filter chips on one swipeable row */
@media (max-width: 599px) {
  .projects-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .projects-filter::-webkit-scrollbar { display: none; }
  .projects-filter__chip { flex-shrink: 0; }
}

/* What We Do: image fills the top of the card */
.wwd-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.wwd-card img { height: 220px; object-fit: cover; margin: 0; border-bottom: 1px solid var(--border); }
.wwd-card h3, .wwd-card p { padding-inline: 24px; }
.wwd-card h3 { padding-top: 20px; }
.wwd-card p { padding-bottom: 24px; }

/* ==========================================================================
   Why Work With Us — sticky scroll values (about.html, values.js)
   Dark gradient band (same language as the homepage dark sections). In
   sticky mode the section is (count + 1) viewports tall and the stage pins
   while scrolling; scroll progress opens one value at a time.
   ========================================================================== */
.values {
  position: relative;
  color: var(--n-50);
  background:
    radial-gradient(120% 80% at 100% 100%, rgba(171, 52, 29, 0.45) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 50%, var(--red-900) 100%);
}

.values.is-sticky { height: calc((var(--values-count, 3) + 1) * 100vh); }

.values__stage {
  padding-block: clamp(72px, 10vw, 120px);
}

.values.is-sticky .values__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 112px 40px; /* clears the fixed header */
  overflow: hidden;
}

.values__inner {
  width: 100%;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  .values__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    gap: clamp(48px, 7vw, 112px);
    align-items: center;
  }
}

.values__intro .eyebrow { color: var(--red-300); }
.values__intro h2 { color: var(--n-50); margin-top: 12px; max-width: 16ch; }

/* Vertical progress rail (desktop) */
.values__progress {
  display: none;
  position: relative;
  width: 2px;
  height: 120px;
  margin-top: 32px;
  background: rgba(253, 249, 248, 0.16);
  border-radius: 2px;
  overflow: hidden;
}

.values__progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--red-300), var(--accent));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 120ms linear;
}

.values__hint {
  display: none;
  margin: 14px 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(253, 249, 248, 0.55);
}

@media (min-width: 960px) {
  .values.is-sticky .values__progress,
  .values.is-sticky .values__hint { display: block; }
}

/* ---- List ---- */
.values__list { list-style: none; margin: 0; padding: 0; }

.values__item { border-top: 1px solid rgba(253, 249, 248, 0.14); }
.values__item:last-child { border-bottom: 1px solid rgba(253, 249, 248, 0.14); }

.values__heading { margin: 0; font: inherit; text-transform: none; letter-spacing: 0; }

.values__trigger {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 28px;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.values__trigger:focus-visible { outline: 2px solid var(--red-300); outline-offset: 4px; border-radius: 4px; }

.values__num {
  min-width: 24px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: rgba(253, 249, 248, 0.45);
  transition: color 300ms var(--ease-in-out);
}

.values__text { display: grid; gap: 2px; }

.values__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  color: rgba(253, 249, 248, 0.5);
  transition: color 300ms var(--ease-in-out);
}

.values__tagline {
  font-size: 0.88rem;
  color: rgba(253, 249, 248, 0.5);
  transition: color 300ms var(--ease-in-out);
}

.values__trigger:hover .values__title { color: rgba(253, 249, 248, 0.8); }

.values__item.is-active .values__num { color: var(--red-300); }
.values__item.is-active .values__title { color: var(--n-50); }
.values__item.is-active .values__tagline { color: var(--red-300); }

/* plus → minus */
.values__icon { position: relative; width: 20px; height: 20px; justify-self: end; }
.values__icon::before,
.values__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.7;
  transition: transform 350ms var(--ease-out-quint), opacity 300ms;
}
.values__icon::after { transform: rotate(90deg); }
.values__item.is-active .values__icon::after { transform: rotate(0deg); opacity: 0; }

/* ---- Panel: 0fr → 1fr height animation, content fades/lifts in ---- */
.values__panel {
  display: grid;
  grid-template-rows: 1fr; /* no-JS: all open */
}

.values.is-enhanced .values__panel {
  grid-template-rows: 0fr;
  transition: grid-template-rows 500ms var(--ease-out-quint);
}

.values.is-enhanced .values__item.is-active .values__panel { grid-template-rows: 1fr; }

.values__panel-inner { overflow: hidden; }

.values__panel-inner p {
  margin: 0;
  padding: 0 0 26px 44px; /* = .values__num width (24px) + gap (20px): aligns with the title */
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(253, 249, 248, 0.78);
}

.values.is-enhanced .values__panel-inner p {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 350ms var(--ease-in-out), transform 450ms var(--ease-out-quint);
}

.values.is-enhanced .values__item.is-active .values__panel-inner p {
  opacity: 1;
  transform: none;
  transition-delay: 120ms;
}

@media (max-width: 599px) {
  .values__trigger { gap: 14px; padding: 16px 0; }
  .values__panel-inner p { padding-left: 0; font-size: 0.95rem; }
  .values.is-sticky .values__stage { padding-top: 104px; }
  .values__inner { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .values.is-enhanced .values__panel,
  .values.is-enhanced .values__panel-inner p,
  .values__icon::before, .values__icon::after { transition: none; }
}

/* ==========================================================================
   Who We Work With — v2 audience split (index.html #who-we-work-with)
   Light homeowner panel + dark gradient trade panel, equal height.
   ========================================================================== */
.audience__head { max-width: 760px; }
.audience__head .lede { margin-top: 16px; color: var(--ink-muted); }

.audience__grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .audience__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.audience__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
}

/* Faint window-grid motif in the corner (decorative) */
.audience__panel::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 220px;
  height: 220px;
  z-index: -1;
  border: 2px solid currentColor;
  border-radius: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.audience__panel--home {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
}

.audience__panel--trade {
  color: var(--n-50);
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(171, 52, 29, 0.5) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(140deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}

.audience__tag {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 8px;
  line-height: 1.4;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.audience__panel--trade .audience__tag { background: rgba(239, 155, 137, 0.16); color: var(--red-300); }

.audience__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  max-width: 20ch;
}

.audience__copy { margin: 0; line-height: 1.65; color: var(--ink-muted); max-width: 52ch; }
.audience__panel--trade .audience__copy { color: rgba(253, 249, 248, 0.78); }

.audience__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.audience__list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.audience__list svg {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.audience__stats {
  margin: 4px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(253, 249, 248, 0.14);
}

.audience__stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  padding: 18px 20px;
  background: rgba(9, 7, 6, 0.35);
}

.audience__stats dt { font-size: 0.78rem; line-height: 1.4; color: rgba(253, 249, 248, 0.7); }
.audience__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--red-300);
}

.audience__trust { margin: 0; font-size: 0.9rem; color: rgba(253, 249, 248, 0.7); }

.audience__actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.audience__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-strong);
}

.audience__link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.audience__link:hover svg { transform: translateX(4px); }
.audience__panel--trade .audience__link { color: var(--n-50); }

@media (prefers-reduced-motion: reduce) {
  .audience__link svg { transition: none; }
  .audience__link:hover svg { transform: none; }
}

/* ==========================================================================
   Home v2 redesigns: Fleet & Coverage (.fleet2), Why ASD (.why2),
   How It Works (.process2)
   ========================================================================== */

/* ---- Fleet & Coverage ---- */
.fleet2__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 960px) {
  .fleet2__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.fleet2__media {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunk);
}

.fleet2__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fleet2__badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(9, 7, 6, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--n-50);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.fleet2__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #3fbf6b;
  box-shadow: 0 0 0 4px rgba(63, 191, 107, 0.25);
}

.fleet2__body h2 { margin-top: 12px; }
.fleet2__body .lede { margin: 16px 0 0; color: var(--ink-muted); }

.fleet2__points { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 18px; }
.fleet2__points li { display: flex; gap: 16px; align-items: flex-start; }
.fleet2__points h3 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.fleet2__points p { margin: 0; color: var(--ink-muted); line-height: 1.55; }

.fleet2__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-strong);
}

.fleet2__regions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.fleet2__regions-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.fleet2__regions ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.fleet2__regions li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 0.84rem; font-weight: 500; }

/* ---- Why ASD (dark band) ---- */
.why2 {
  padding-block: clamp(80px, 11vw, 140px);
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(171, 52, 29, 0.42) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}

.why2__grid { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .why2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.why2__intro .eyebrow { color: var(--red-300); }
.why2__intro h2 { color: var(--n-50); margin-top: 12px; }
.why2__intro .lede { margin: 18px 0 28px; color: rgba(253, 249, 248, 0.78); }
.why2__intro .btn svg { margin-left: 2px; }

.why2__compare {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 16px;
  background: rgba(253, 249, 248, 0.05);
  border: 1px solid rgba(253, 249, 248, 0.12);
}

.why2__end { display: grid; gap: 6px; }
.why2__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(253, 249, 248, 0.6); }
.why2__value { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.1; }

.why2__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.1);
  overflow: hidden;
}

.why2__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 50%);
  min-width: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--red-300), var(--accent));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1100ms var(--ease-out-quint) 200ms;
}

/* bars grow when the group reveals */
.why2__end.is-visible .why2__bar::after { transform: scaleX(1); }

.why2__same {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(253, 249, 248, 0.12);
}

.why2__same li { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.why2__same svg { color: var(--red-300); }

/* ---- How It Works (timeline) ---- */
.process2__head { max-width: 720px; }
.process2__head .lede { margin-top: 16px; color: var(--ink-muted); }

.process2__steps {
  --dot: 52px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}

/* connecting line: vertical on phones, horizontal on desktop */
.process2__steps::before {
  content: "";
  position: absolute;
  left: calc(var(--dot) / 2 - 1px);
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), var(--border));
}

.process2__step {
  position: relative;
  display: grid;
  grid-template-columns: var(--dot) 1fr;
  column-gap: 20px;
  align-items: start;
  align-content: start; /* equal-height steps must not spread their rows */
}

.process2__num {
  grid-row: span 2;
  width: var(--dot);
  height: var(--dot);
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.process2__step:last-child .process2__num { background: var(--accent); color: #fff; }

.process2__step h3 { margin: 12px 0 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.process2__step p { margin: 0; color: var(--ink-muted); line-height: 1.6; }

@media (min-width: 900px) {
  .process2__steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .process2__steps::before {
    left: calc(var(--dot) / 2);
    right: calc(25% - var(--dot) / 2);
    top: calc(var(--dot) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--border));
  }
  .process2__step { grid-template-columns: 1fr; }
  .process2__num { grid-row: auto; }
  .process2__step h3 { margin-top: 20px; }
}

.process2__cta {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.process2__note { color: var(--ink-muted); }
.process2__note a { color: var(--accent-strong); font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  .why2__bar::after { transition: none; transform: scaleX(1); }
}

/* ==========================================================================
   Nationwide Residential Glazing — v2 editorial opener (index.html #intro)
   ========================================================================== */
.intro2 { position: relative; }

.intro2__top { max-width: 1040px; }

.intro2__statement {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

.intro2__statement em {
  font-style: italic;
  color: var(--accent-strong);
}

.intro2__body {
  display: grid;
  gap: 24px;
  margin-top: clamp(28px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 960px) {
  .intro2__body { grid-template-columns: minmax(0, 1.4fr) auto; gap: 64px; }
}

.intro2__body .lede { margin: 0; max-width: 62ch; color: var(--ink-muted); }

.intro2__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.intro2__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-strong);
}

.intro2__link span { transition: transform var(--dur-ui) var(--ease-out-quint); }
.intro2__link:hover span { transform: translateX(4px); }

/* Proof row: hairline-divided figures */
.intro2__proof {
  margin: clamp(40px, 6vw, 72px) 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--border);
}

@media (min-width: 900px) {
  .intro2__proof { grid-template-columns: repeat(4, 1fr); }
}

.intro2__proof > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding: 24px 20px 4px 0;
}

@media (min-width: 900px) {
  .intro2__proof > div + div { padding-left: 24px; border-left: 1px solid var(--border); }
}

@media (max-width: 899px) {
  .intro2__proof > div:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--border); }
  .intro2__proof > div:nth-child(n+3) { border-top: 1px solid var(--border); }
}

.intro2__proof dt {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.intro2__proof dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  color: var(--accent-strong);
}

.intro2__proof dd.intro2__accred {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .intro2__link span { transition: none; }
  .intro2__link:hover span { transform: none; }
}
.intro2__proof dd.intro2__word { font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.15; }

/* ==========================================================================
   Hero end overlay — v2 ("A better view"), index.html .hero-end2
   Visibility is still driven by .hero-video-overlay-end.is-visible
   (hero-scrub.js). Dark glass card with the brand gradient edge.
   ========================================================================== */
.hero-end2__inner {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 120px clamp(40px, 9vh, 96px);
}

.hero-end2__card {
  position: relative;
  max-width: 560px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 18px;
  color: var(--n-50);
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(171, 52, 29, 0.38) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(150deg, rgba(9, 7, 6, 0.82) 0%, rgba(23, 19, 17, 0.72) 100%);
  border: 1px solid rgba(253, 249, 248, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* thin brand-red accent along the top edge */
.hero-end2__card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red-300), var(--accent), transparent);
}

.hero-end2__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-300);
}

.hero-end2__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: #fff;
}

.hero-end2__title em { font-style: italic; color: var(--red-200); }

.hero-end2__copy {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(253, 249, 248, 0.82);
}

.hero-end2__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.hero-end2__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.08);
  border: 1px solid rgba(253, 249, 248, 0.16);
  font-size: 0.84rem;
  font-weight: 600;
}

.hero-end2__benefits svg { color: var(--red-300); flex-shrink: 0; }

.hero-end2__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 26px;
}

.hero-end2__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: #fff;
}

.hero-end2__link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.hero-end2__link:hover svg { transform: translateX(4px); }

/* The overlay wrapper is pointer-events:none; buttons work once it's shown */
.hero-video-overlay-end.is-visible .hero-end2__card { pointer-events: auto; }

@media (max-width: 599px) {
  .hero-end2__inner { padding-bottom: 28px; }
  .hero-end2__copy { font-size: 0.95rem; }
  .hero-end2__benefits li { font-size: 0.8rem; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-end2__link svg { transition: none; }
  .hero-end2__link:hover svg { transform: none; }
}
/* v2 overlay sits inside the sticky .hero__pin: fill the frame, card at bottom-left */
.hero__pin > .hero-end2 { inset: 0; }
.hero-end2__inner { min-height: 100%; height: 100%; }
@media (max-height: 760px) {
  .hero-end2__copy { display: none; }
}
/* The faded-out intro stays in the pin; don't let it swallow clicks */
.hero__intro:not(.is-active) { pointer-events: none; }
.hero__pin > .hero-end2 { z-index: calc(var(--z-overlay-text) + 1); }

/* ==========================================================================
   What We Do v2 (what-we-do.html) — .wwd2-*
   ========================================================================== */
.wwd2-head { max-width: 760px; }
.wwd2-head .lede { margin-top: 16px; color: var(--ink-muted); }

.wwd2-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-strong);
}
.wwd2-link--light { color: var(--n-50); }
.wwd2-link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.wwd2-link:hover svg { transform: translateX(4px); }

/* ---- Hero (dark gradient band) ---- */
.wwd2-hero {
  color: var(--n-50);
  padding-block: clamp(150px, 22vh, 220px) clamp(72px, 10vw, 120px);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(171, 52, 29, 0.5) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}

.wwd2-hero h1 { max-width: 18ch; }
.wwd2-hero .eyebrow { color: var(--red-300); }
.wwd2-hero h1 {
  margin-top: 14px;
  color: #fff;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.wwd2-hero h1 em { font-style: italic; color: var(--red-200); }
.wwd2-hero .lede { margin: 22px 0 0; max-width: 62ch; color: rgba(253, 249, 248, 0.8); }

.wwd2-hero__benefits { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 26px 0 0; padding: 0; }
.wwd2-hero__benefits li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.08);
  border: 1px solid rgba(253, 249, 248, 0.16);
  font-size: 0.88rem;
  font-weight: 600;
}
.wwd2-hero__benefits svg { color: var(--red-300); }
.wwd2-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }

/* ---- Products ---- */
.wwd2-products { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .wwd2-products { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .wwd2-products { grid-template-columns: repeat(4, 1fr); } }

.wwd2-product {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur-ui) var(--ease-in-out), box-shadow var(--dur-ui) var(--ease-in-out);
}
.wwd2-product:hover { border-color: var(--border-strong); box-shadow: 0 18px 40px rgba(9, 7, 6, 0.1); }

.wwd2-product__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-sunk); }
.wwd2-product__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out-quint); }
.wwd2-product:hover .wwd2-product__media img { transform: scale(1.04); }
.wwd2-product__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.94);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.wwd2-product__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.wwd2-product__body h3 { margin: 0; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.wwd2-product__body p { margin: 0; color: var(--ink-muted); line-height: 1.6; }
.wwd2-product__link {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-strong);
}
.wwd2-product__link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.wwd2-product__link:hover svg { transform: translateX(4px); }

/* ---- Double vs triple ---- */
.wwd2-glazing { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .wwd2-glazing { grid-template-columns: 1fr 1fr; } }

.wwd2-glass {
  padding: clamp(24px, 3.6vw, 40px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.wwd2-glass--triple {
  color: var(--n-50);
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(171, 52, 29, 0.45) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(140deg, var(--n-950) 0%, var(--n-900) 60%, var(--red-900) 100%);
}

/* Pane diagram: 2 or 3 sheets of glass */
.wwd2-glass__panes { display: flex; gap: 8px; height: 56px; margin-bottom: 20px; }
.wwd2-glass__panes i {
  width: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(171, 52, 29, 0.25), rgba(171, 52, 29, 0.55));
  border: 1px solid rgba(171, 52, 29, 0.45);
}
.wwd2-glass--triple .wwd2-glass__panes i { background: linear-gradient(180deg, rgba(239, 155, 137, 0.35), rgba(239, 155, 137, 0.75)); border-color: rgba(239, 155, 137, 0.6); }

.wwd2-glass h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 600; text-transform: none; letter-spacing: 0; }
.wwd2-glass--triple h3 { color: #fff; }
.wwd2-glass__lead { margin: 6px 0 18px; font-weight: 600; color: var(--accent-strong); }
.wwd2-glass--triple .wwd2-glass__lead { color: var(--red-300); }
.wwd2-glass ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wwd2-glass li { display: flex; gap: 10px; align-items: flex-start; }
.wwd2-glass li svg { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.wwd2-glass--triple li { color: rgba(253, 249, 248, 0.88); }
.wwd2-glass--triple li svg { color: var(--red-300); }

.wwd2-note { margin: 24px 0 0; color: var(--ink-muted); }
.wwd2-note a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Job sizes: a growing scale ---- */
.wwd2-scale { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .wwd2-scale { grid-template-columns: repeat(3, 1fr); } }

.wwd2-scale__item {
  position: relative;
  padding: 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg);
}
@media (min-width: 900px) {
  .wwd2-scale__item:nth-child(1) { min-height: 240px; }
  .wwd2-scale__item:nth-child(2) { min-height: 280px; }
  .wwd2-scale__item:nth-child(3) { min-height: 320px; border-color: transparent; background: var(--accent-tint); }
}
.wwd2-scale__size {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.wwd2-scale__item h3 { margin: 16px 0 8px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.wwd2-scale__item p { margin: 0; color: var(--ink-muted); line-height: 1.6; }

/* ---- Sectors (dark band) ---- */
.wwd2-sectors {
  padding-block: clamp(72px, 10vw, 120px);
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(171, 52, 29, 0.42) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}
.wwd2-sectors .eyebrow { color: var(--red-300); }
.wwd2-sectors h2 { color: #fff; }

.wwd2-sectors__grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .wwd2-sectors__grid { grid-template-columns: repeat(3, 1fr); } }

.wwd2-sector {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border-radius: 14px;
  border: 1px solid rgba(253, 249, 248, 0.14);
  background: rgba(253, 249, 248, 0.04);
  color: var(--n-50);
  transition: background var(--dur-ui) var(--ease-in-out), border-color var(--dur-ui) var(--ease-in-out);
}
.wwd2-sector:hover { background: rgba(253, 249, 248, 0.08); border-color: rgba(253, 249, 248, 0.3); }
.wwd2-sector:focus-visible { outline: 2px solid var(--red-300); outline-offset: 3px; }
.wwd2-sector__num { font-family: var(--font-mono); font-size: 0.85rem; color: var(--red-300); }
.wwd2-sector h3 { margin: 0; font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; }
.wwd2-sector p { margin: 0; color: rgba(253, 249, 248, 0.75); line-height: 1.6; }
.wwd2-sector__go { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--red-200); }
.wwd2-sector__go svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.wwd2-sector:hover .wwd2-sector__go svg { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .wwd2-product, .wwd2-product__media img, .wwd2-sector, .wwd2-link svg, .wwd2-product__link svg, .wwd2-sector__go svg { transition: none; }
  .wwd2-product:hover .wwd2-product__media img, .wwd2-link:hover svg, .wwd2-product__link:hover svg, .wwd2-sector:hover .wwd2-sector__go svg { transform: none; }
}

/* ==========================================================================
   v2 design system — shared page pieces (Projects, Partners, Contact, About)
   ========================================================================== */

/* ---- Dark page hero (same band as What We Do) ---- */
.page-hero--dark {
  border-bottom: 0;
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(171, 52, 29, 0.5) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}
.page-hero--dark .page-hero__content { max-width: 960px; }
.page-hero--dark .eyebrow { color: var(--red-300); }
.page-hero--dark h1 {
  color: #fff;
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.page-hero--dark h1 em { font-style: italic; color: var(--red-200); }
.page-hero--dark p.lede { color: rgba(253, 249, 248, 0.8); }
.page-hero--compact .page-hero__content { padding-bottom: clamp(48px, 6vw, 72px); }

/* stats row on the dark hero */
.page-hero--dark .projects-stats__num { color: var(--red-200); }
.page-hero--dark .projects-stats__label { color: rgba(253, 249, 248, 0.7); }

/* ---- Dark closing CTA band ---- */
.cta-band {
  padding-block: clamp(72px, 10vw, 120px);
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(171, 52, 29, 0.45) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}
.cta-band__inner {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 900px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1.5fr) auto; gap: 64px; }
}
.cta-band .eyebrow { color: var(--red-300); }
.cta-band h2 { color: #fff; margin-top: 12px; max-width: 20ch; }
.cta-band .lede { margin: 16px 0 0; max-width: 56ch; color: rgba(253, 249, 248, 0.78); }
.cta-band__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cta-band__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--n-50);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(253, 249, 248, 0.35);
}
.cta-band__phone:hover { text-decoration-color: currentColor; }

/* ---- Partners: why partners come back ---- */
.partners-why__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .partners-why__grid { grid-template-columns: repeat(3, 1fr); } }
.partners-why__item {
  padding: 28px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.partners-why__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.partners-why__item h3 { margin: 18px 0 8px; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.partners-why__item p { margin: 0; color: var(--ink-muted); line-height: 1.6; }

/* ---- Contact: dark details card + next steps ---- */
.contact-card--dark {
  color: var(--n-50);
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(171, 52, 29, 0.45) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(150deg, var(--n-950) 0%, var(--n-900) 60%, var(--red-900) 100%);
  padding: 28px;
}
.contact-card--dark .contact-card__title { color: #fff; }
.contact-card--dark .contact-card__list dt { color: rgba(253, 249, 248, 0.6); }
.contact-card--dark .contact-card__list dd { color: #fff; }
.contact-card--dark .contact-card__list a { color: var(--red-200); }

.contact-next { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(253, 249, 248, 0.14); }
.contact-next__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-300); }
.contact-next ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.contact-next li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; color: rgba(253, 249, 248, 0.85); }
.contact-next li span {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--red-300);
  color: var(--red-300);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
/* two dark bands in a row (About: Selected Work → CTA): hairline between */
.projects-cs + .cta-band { border-top: 1px solid rgba(253, 249, 248, 0.08); }
.cta-band h2 { max-width: 24ch; }

/* ==========================================================================
   Closing CTA (light, centred) — shared by every page before the footer
   ========================================================================== */
.final-cta-section { border-top: 1px solid var(--border); }
.final-cta h2 { max-width: 22ch; text-wrap: balance; }
.final-cta p.lede { max-width: 58ch; margin: 0; color: var(--ink-muted); }
.final-cta__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(171, 52, 29, 0.35);
}
.final-cta__phone:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   Dark page heroes: left-aligned, same rhythm as What We Do (.wwd2-hero)
   ========================================================================== */
.page-hero--dark .page-hero__content {
  max-width: var(--container);
  text-align: left;
  padding-block: clamp(150px, 22vh, 220px) clamp(72px, 10vw, 120px);
}
.page-hero--dark h1 { max-width: 18ch; }
.page-hero--dark p.lede { margin: 22px 0 0; max-width: 62ch; }
.page-hero--dark .projects-stats { justify-content: flex-start; }
.page-hero--dark .projects-stats__item { align-items: flex-start; }
.page-hero--compact .page-hero__content { padding-bottom: clamp(56px, 7vw, 88px); }

/* Contact details card — light version (contact.html) */
.contact-card--light { padding: 28px; }
.contact-card--light .contact-card__list a { color: var(--accent-strong); }
.contact-card--light .contact-next { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.contact-card--light .contact-next__label { color: var(--accent-strong); }
.contact-card--light .contact-next li { color: var(--ink-muted); }
.contact-card--light .contact-next li span { border-color: var(--accent); color: var(--accent-strong); }

/* ==========================================================================
   Our Partners v3 — cards (light) + Why Partners Come Back (dark band)
   ========================================================================== */
.partners-head { max-width: 760px; }
.partners-head .lede { margin-top: 16px; color: var(--ink-muted); }

/* ---- Cards ---- */
.partners-grid { gap: 20px; align-items: start; }
@media (min-width: 760px) { .partners-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .partners-grid { grid-template-columns: repeat(3, 1fr); } }

.partner-card {
  padding: 0;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color var(--dur-ui) var(--ease-in-out), box-shadow var(--dur-ui) var(--ease-in-out);
}
.partner-card:hover { border-color: var(--border-strong); box-shadow: 0 18px 40px rgba(9, 7, 6, 0.08); }

.partner-card__logo {
  height: auto;
  aspect-ratio: 16 / 7;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 20px 32px;
}
.partner-card__logo img { max-height: 56px; max-width: 70%; }

.partner-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 0;
}
.partner-card__name { margin: 0; font-size: 1.45rem; }

.partner-card__badge {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.partner-card__badge.is-quiet { background: var(--surface-sunk); color: var(--ink-muted); }

.partner-card__projects { display: grid; gap: 8px; padding: 16px 16px 18px; }
.partner-card__projects a.partner-card__project { display: grid; min-height: 0; color: inherit; padding: 8px; }
.partner-card__projects a:hover { text-decoration: none; }

.partner-card__project {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: border-color var(--dur-micro) var(--ease-in-out), background var(--dur-micro) var(--ease-in-out);
}
a.partner-card__project:hover { border-color: var(--accent); background: var(--surface); }
a.partner-card__project:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.partner-card__project.is-soon { grid-template-columns: 52px minmax(0, 1fr); opacity: 0.75; }

.partner-card__thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: var(--surface-sunk); }
.partner-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-card__pinfo { display: grid; gap: 2px; min-width: 0; }
.partner-card__pname { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-card__ploc { font-size: 0.8rem; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.partner-card__go { color: var(--accent-strong); transition: transform var(--dur-ui) var(--ease-out-quint); }
a.partner-card__project:hover .partner-card__go { transform: translateX(3px); }

.partner-card__none { margin: 0; padding: 10px 22px 22px; font-size: 0.88rem; color: var(--ink-muted); }

/* ---- Why Partners Come Back (dark band) ---- */
.pwhy {
  padding-block: clamp(80px, 11vw, 136px);
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 0% 100%, rgba(171, 52, 29, 0.46) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}
.pwhy__grid { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .pwhy__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }

.pwhy__intro .eyebrow { color: var(--red-300); }
.pwhy__intro h2 { color: #fff; margin-top: 12px; text-wrap: balance; }
.pwhy__intro h2 em { font-style: italic; color: var(--red-200); }
.pwhy__intro .lede { margin: 18px 0 0; max-width: 52ch; color: rgba(253, 249, 248, 0.78); }

.pwhy__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin: 32px 0 0;
  max-width: 460px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(253, 249, 248, 0.14);
}
.pwhy__stats div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 20px; background: rgba(9, 7, 6, 0.35); }
.pwhy__stats dt { font-size: 0.78rem; color: rgba(253, 249, 248, 0.7); }
.pwhy__stats dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1; color: var(--red-300); }

.pwhy__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.pwhy__item {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px;
  border-radius: 14px;
  border: 1px solid rgba(253, 249, 248, 0.12);
  background: rgba(253, 249, 248, 0.05);
  transition: background var(--dur-ui) var(--ease-in-out), border-color var(--dur-ui) var(--ease-in-out);
}
.pwhy__item:hover { background: rgba(253, 249, 248, 0.08); border-color: rgba(253, 249, 248, 0.24); }
.pwhy__num { padding-top: 14px; font-family: var(--font-mono); font-size: 0.85rem; color: var(--red-300); }
.pwhy__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(239, 155, 137, 0.14); color: var(--red-300); }
.pwhy__item h3 { margin: 4px 0 6px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; }
.pwhy__item p { margin: 0; line-height: 1.6; color: rgba(253, 249, 248, 0.75); }

@media (max-width: 599px) {
  .pwhy__item { grid-template-columns: 44px minmax(0, 1fr); }
  .pwhy__num { display: none; }
  .pwhy__icon { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .partner-card, .partner-card__project, .partner-card__go, .pwhy__item { transition: none; }
  a.partner-card__project:hover .partner-card__go { transform: none; }
}

.partners-grid { align-items: stretch; }
.partner-card { height: 100%; }

/* ==========================================================================
   About hero v2 — glass card + toggleable brand gradient (about.html)

   GRADIENT ON / OFF
   - On:  <section class="scroll-reel about-hero-scroll about-hero--gradient">
   - Off: remove "about-hero--gradient" → the original neutral scrim returns.
   - Strength: change --about-hero-gradient-strength (0 = none, 1 = full).
   ========================================================================== */
.about-hero--gradient {
  --about-hero-gradient-strength: 1;
}

.about-hero--gradient .scroll-reel__pin::after {
  background:
    radial-gradient(110% 90% at 100% 100%, rgba(171, 52, 29, calc(0.55 * var(--about-hero-gradient-strength))) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg,
      rgba(9, 7, 6, calc(0.82 * var(--about-hero-gradient-strength))) 0%,
      rgba(23, 19, 17, calc(0.55 * var(--about-hero-gradient-strength))) 55%,
      rgba(76, 8, 0, calc(0.6 * var(--about-hero-gradient-strength))) 100%);
}

/* ---- Layout: card bottom-left, like the home end-of-reel card ---- */
.about-hero--v2 { place-items: end stretch; }

.about-hero--v2 .about-hero__content {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  text-align: left;
  padding: 0 var(--gutter) clamp(40px, 9vh, 96px);
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.about-hero__card {
  position: relative;
  max-width: 600px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 18px;
  color: var(--n-50);
  background:
    radial-gradient(120% 100% at 100% 100%, rgba(171, 52, 29, 0.38) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(150deg, rgba(9, 7, 6, 0.8) 0%, rgba(23, 19, 17, 0.68) 100%);
  border: 1px solid rgba(253, 249, 248, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

.about-hero__card::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--red-300), var(--accent), transparent);
}

.about-hero__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red-300);
}

.about-hero--v2 .about-hero__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: none;
  text-wrap: balance;
}
.about-hero__title em { font-style: italic; color: var(--red-200); }

.about-hero__copy { margin: 16px 0 0; line-height: 1.6; color: rgba(253, 249, 248, 0.82); }

.about-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.about-hero__facts li {
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(253, 249, 248, 0.08);
  border: 1px solid rgba(253, 249, 248, 0.16);
  font-size: 0.84rem;
  font-weight: 600;
}
.about-hero__facts strong { color: var(--red-200); font-weight: 700; }

.about-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.about-hero__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: #fff; }
.about-hero__link svg { transition: transform var(--dur-ui) var(--ease-out-quint); }
.about-hero__link:hover svg { transform: translateX(4px); }

@media (max-width: 599px) {
  .about-hero--v2 .about-hero__content { padding-bottom: 72px; } /* clears the scroll hint */
  .about-hero__copy { font-size: 0.95rem; }
}
@media (max-height: 760px) {
  .about-hero__copy { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero__link svg { transition: none; }
  .about-hero__link:hover svg { transform: none; }
}
/* keep the card clear of the "Scroll" hint at the bottom of the frame */
.about-hero--v2 .about-hero__content { padding-bottom: clamp(110px, 15vh, 150px); }
@media (max-width: 599px) { .about-hero--v2 .about-hero__content { padding-bottom: 112px; } }

/* ==========================================================================
   Home hero intro v2 (on the video's white opening frame)
   The wrapper's own opacity/transform is driven by hero-scrub.js, so the
   load-in animation lives on the children only.
   ========================================================================== */
.hero__intro--v2 { gap: 22px; padding-top: clamp(96px, 18vh, 200px); }

.hero-intro2__tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(171, 52, 29, 0.28);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.hero-intro2__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}

.hero-intro2__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 7.4vw, 7rem);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--n-900);
}

.hero-intro2__sub {
  font-style: italic;
  font-weight: 500;
  font-size: 0.52em;
  letter-spacing: -0.01em;
  color: var(--accent-strong);
}

.hero__intro--v2 .hero__light_glow { width: min(420px, 60%); }

/* staggered load-in */
@keyframes heroIntroIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.hero__intro--v2 > * { animation: heroIntroIn 900ms var(--ease-out-quint) both; }
.hero__intro--v2 > :nth-child(1) { animation-delay: 100ms; }
.hero__intro--v2 > :nth-child(2) { animation-delay: 250ms; }
.hero__intro--v2 > :nth-child(3) { animation-delay: 380ms; }
.hero__intro--v2 > :nth-child(4) { animation-delay: 560ms; }

@media (max-width: 480px) {
  .hero-intro2__tag { font-size: 0.66rem; letter-spacing: 0.1em; padding: 7px 12px; }
  .hero-intro2__sub { font-size: 0.6em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__intro--v2 > * { animation: none; }
}
.hero__intro--v2 .hero__intro-logo { padding-right: 0; }

/* Intro v2.1: no pill. Product line sits quietly under the glow line. */
.hero-intro2__line {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--n-600);
}
@media (max-width: 480px) {
  .hero-intro2__line { font-size: 0.68rem; letter-spacing: 0.16em; max-width: 26ch; line-height: 1.7; }
}

/* ==========================================================================
   Logo cards — one system for Manufacturer Partners + Accreditations
   .logo-card: logo tile → badge → name → one line on what it means.
   ========================================================================== */
.logo-section__head {
  display: grid;
  gap: 16px 64px;
  grid-template-columns: 1fr;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}
@media (min-width: 960px) {
  .logo-section__head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}
.logo-section__head h2 { margin-top: 12px; text-wrap: balance; }
.logo-section__head .lede { margin: 0; color: var(--ink-muted); max-width: 56ch; }

.logo-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .logo-grid--4 { grid-template-columns: repeat(2, 1fr); } .logo-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .logo-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.logo-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-ui) var(--ease-in-out), box-shadow var(--dur-ui) var(--ease-in-out);
}
.logo-card:hover { border-color: var(--border-strong); box-shadow: 0 18px 40px rgba(9, 7, 6, 0.08); }

.logo-card__logo {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 24px 32px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.logo-card__logo img {
  max-width: 78%;
  max-height: 72px;
  object-fit: contain;
  filter: grayscale(0.15);
  transition: filter var(--dur-ui) var(--ease-in-out), transform var(--dur-ui) var(--ease-out-quint);
}
.logo-card:hover .logo-card__logo img { filter: none; transform: scale(1.03); }

.logo-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 24px; }
.logo-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.logo-card__badge svg { width: 14px; height: 14px; }
.logo-card__title { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.logo-card__text { margin: 0; color: var(--ink-muted); line-height: 1.6; }

/* Larger variant (manufacturers): logo left, text right on wide screens */
@media (min-width: 900px) {
  .logo-card--lg { flex-direction: row; }
  .logo-card--lg .logo-card__logo { flex: 0 0 44%; aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--border); }
  .logo-card--lg .logo-card__body { justify-content: center; padding: 28px 32px; }
  .logo-card--lg .logo-card__title { font-size: 1.8rem; }
}

/* ==========================================================================
   Our Sister Company — dark band (index.html #sister-company)
   ========================================================================== */
.sister {
  padding-block: clamp(80px, 11vw, 136px);
  color: var(--n-50);
  background:
    radial-gradient(90% 120% at 100% 100%, rgba(171, 52, 29, 0.5) 0%, rgba(171, 52, 29, 0) 60%),
    linear-gradient(135deg, var(--n-950) 0%, var(--n-900) 55%, var(--red-900) 100%);
}
.sister__grid { display: grid; gap: clamp(36px, 6vw, 96px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .sister__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.sister .eyebrow { color: var(--red-300); }
.sister h2 { color: #fff; margin-top: 12px; text-wrap: balance; }
.sister h2 em { font-style: italic; color: var(--red-200); }
.sister .lede { margin: 18px 0 0; max-width: 56ch; color: rgba(253, 249, 248, 0.78); }

.sister__panel {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 3.6vw, 36px);
  border-radius: 16px;
  background: rgba(253, 249, 248, 0.05);
  border: 1px solid rgba(253, 249, 248, 0.12);
}
.sister__logo { height: 48px; width: auto; }
.sister__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sister__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.sister__list svg { color: var(--red-300); flex-shrink: 0; }
.sister__cta { justify-self: start; gap: 8px; }

/* ==========================================================================
   Ghost buttons: pill-shaped, like the primary button (site-wide)
   ========================================================================== */
.btn--ghost,
.btn--ghost-on-dark { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .logo-card, .logo-card__logo img { transition: none; }
  .logo-card:hover .logo-card__logo img { transform: none; }
}
.sister__logo { height: 64px; }

/* Mobile nav: show only "Our Projects", not the per-project list.
   Delete this rule to bring the project links back. */
.mobile-nav__sub { display: none; }

/* Footer bottom bar: copyright · legal links · Vlam Media credit */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}
.site-footer__legal { display: flex; gap: 20px; margin-right: auto; }
.site-footer__legal a,
.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--n-400);
  transition: color var(--dur-micro) var(--ease-in-out);
}
.site-footer__legal a:hover,
.site-footer__credit:hover { color: var(--n-50); }
.site-footer__credit img { width: 20px; height: 20px; object-fit: contain; opacity: 0.85; }
.site-footer__credit strong { font-weight: 600; color: var(--n-200); }
@media (max-width: 599px) {
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Legal pages (privacy-policy.html): sticky contents + readable body
   ========================================================================== */
.legal { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: 72px; } }

.legal__toc {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
}
@media (min-width: 960px) { .legal__toc { position: sticky; top: 120px; } }
.legal__toc-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); }
.legal__toc ol { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.legal__toc a { display: inline-block; padding: 4px 0; color: var(--ink-muted); font-size: 0.92rem; }
.legal__toc a:hover { color: var(--accent-strong); }

.legal__body { max-width: 70ch; }
.legal__updated { margin: 0 0 8px; font-size: 0.85rem; color: var(--ink-muted); }
.legal__body h2 {
  margin: 40px 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  scroll-margin-top: 120px;
}
.legal__body h2:first-of-type { margin-top: 16px; }
.legal__body p, .legal__body li, .legal__body dd { line-height: 1.7; color: var(--ink-muted); }
.legal__body ul { padding-left: 20px; display: grid; gap: 6px; }
.legal__body a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.legal__body strong { color: var(--ink); }
.legal__services { margin: 16px 0; display: grid; gap: 12px; }
.legal__services div { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.legal__services dt { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.legal__services dd { margin: 0; }
.legal__contact { list-style: none; padding-left: 0 !important; }
.partner-card__note { margin: -6px 22px 20px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px dashed var(--border-strong); font-size: 0.85rem; color: var(--ink-muted); }

/* ==========================================================================
   404 page
   ========================================================================== */
.notfound .page-hero__content { min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 520px) {
  .notfound__actions .btn { flex: 1 1 100%; justify-content: center; }
}