/* SEC — page-specific sections */

/* ====== Home flow: continuous dark surface ====== */
.home-flow { background: var(--color-surface-base); }

/* ====== HERO with crossfade slideshow ====== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + var(--space-7)) 0 var(--space-9);
  overflow: hidden;
  color: var(--color-text-primary);
  isolation: isolate;
  background: var(--color-surface-base);
}
.hero__media {
  position: absolute; inset: 0;
  z-index: -2;
}
/* All slides crossfade with linear opacity for true perceptual smoothness
   (eased opacity creates a dark "valley" in the middle that reads as a flicker). */
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 3000ms linear;
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

/* Ken Burns runs on EVERY slide continuously — never restarts on activation,
   so the new image is already in motion when it crossfades in. No snap. */
.hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroKenBurns 18s ease-in-out infinite alternate;
  will-change: transform;
  transform-origin: center center;
}
@keyframes heroKenBurns {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-2%, -1.4%, 0); }
}
/* Offset each slide's KB phase + alternate direction so the eye sees different motion per image */
.hero__slide:nth-child(1) img { animation-delay: 0s;    transform-origin: 30% 40%; }
.hero__slide:nth-child(2) img { animation-delay: -3s;   transform-origin: 70% 50%; animation-direction: alternate-reverse; }
.hero__slide:nth-child(3) img { animation-delay: -6s;   transform-origin: 50% 70%; }
.hero__slide:nth-child(4) img { animation-delay: -9s;   transform-origin: 60% 30%; animation-direction: alternate-reverse; }
.hero__slide:nth-child(5) img { animation-delay: -12s;  transform-origin: 40% 60%; }
.hero__slide:nth-child(6) img { animation-delay: -2s;   transform-origin: 65% 45%; animation-direction: alternate-reverse; }
.hero__slide:nth-child(7) img { animation-delay: -5s;   transform-origin: 35% 55%; }
.hero__slide:nth-child(8) img { animation-delay: -8s;   transform-origin: 55% 35%; animation-direction: alternate-reverse; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide img { animation: none; transform: scale(1.05); }
}
/* Sits above the slides so the overlay isn't covered when a slide is active */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 30%, rgba(0,0,0,.65) 70%, #000 100%),
    linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 55%);
}
/* Extra soft fade at the very bottom for a seamless hand-off into the next section */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 18vh;
  background: linear-gradient(180deg, transparent 0%, var(--color-surface-base) 90%);
  pointer-events: none;
  z-index: 3;
}
/* Brand-style intersecting line through the hero */
.hero__line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.hero__line::before,
.hero__line::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,0.18);
}
.hero__line::before {
  top: 0; left: 38%; width: 1px; height: 100%;
  transform: skewX(-22deg);
  transform-origin: top center;
}
.hero__line::after {
  top: 28%; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22) 40%, var(--color-surface-strong) 60%, transparent);
}

.hero__inner {
  position: relative;
  z-index: 4;
  display: grid;
  gap: var(--space-5);
  max-width: 980px;
}
.hero__meta, .hero__dots { z-index: 4; }
.hero h1 {
  font-size: clamp(3rem, 9vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin: 0;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 640ms var(--ease-decelerate);
}
.hero h1 .line span.in { transform: none; }
.hero__sub {
  max-width: 560px;
  font-size: var(--fs-lg);
  color: var(--color-text-inverse);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 560ms var(--ease-decelerate) 420ms,
              transform 560ms var(--ease-decelerate) 420ms;
}
.hero.is-loaded .hero__sub { opacity: 1; transform: none; }
.hero__ctas {
  display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3);
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity 560ms var(--ease-decelerate) 560ms,
              transform 560ms var(--ease-decelerate) 560ms;
}
.hero.is-loaded .hero__ctas { opacity: 1; transform: none; }
.hero__meta {
  position: absolute;
  left: var(--container-pad);
  bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-text-inverse);
}
.hero__meta::before {
  content: "";
  width: 40px; height: 1px;
  background: var(--color-surface-strong);
}
/* Slide indicators */
.hero__dots {
  position: absolute;
  right: var(--container-pad);
  bottom: var(--space-5);
  display: flex; gap: 8px;
  z-index: 2;
}
.hero__dots button {
  width: 28px; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.3);
  transition: background var(--motion-fast), width var(--motion-fast);
}
.hero__dots button.is-active { background: var(--color-surface-strong); width: 44px; }
.hero__dots button:hover { background: rgba(255,255,255,0.6); }

/* ====== Section separator — soft horizontal gradient that blends with the bg ====== */
.flow-sep {
  position: relative;
  height: 80px;
  background: transparent;
  border: 0;
  margin: 0;
  overflow: hidden;
}
.flow-sep::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.05) 20%,
    rgba(255,111,32,0.45) 50%,
    rgba(255,255,255,0.05) 80%,
    transparent 100%);
  opacity: 0.9;
}
.flow-sep::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: var(--color-surface-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px rgba(255,111,32,0.55);
}

/* ====== Featured bento (asymmetric) ====== */
.featured {
  padding: var(--space-9) 0 var(--space-10);
  background: var(--color-surface-base);
}
.featured__head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}
.featured__head h2 { margin: 0; max-width: 720px; }

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 220px;
  gap: var(--space-3);
}
@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: 240px; }
}

.bento-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #111;
  isolation: isolate;
  border: 1px solid var(--color-border-muted);
}
.bento-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out), filter var(--motion-normal) var(--ease-out);
  filter: brightness(.78) saturate(0.95);
  animation: bentoDrift 30s var(--ease-in-out) infinite alternate;
  will-change: transform;
}
@keyframes bentoDrift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-0.8%, -0.5%, 0); }
}
/* Each tile drifts in the same rhythm but offset in time — no sync, no chaos */
.bento-tile:nth-child(2) img { animation-delay: -5s;  animation-direction: alternate-reverse; }
.bento-tile:nth-child(3) img { animation-delay: -10s; }
.bento-tile:nth-child(4) img { animation-delay: -15s; animation-direction: alternate-reverse; }
.bento-tile:nth-child(5) img { animation-delay: -20s; }
.bento-tile:nth-child(6) img { animation-delay: -25s; animation-direction: alternate-reverse; }

/* Hover: gentle lift, brighten */
.bento-tile:hover img, .bento-tile:focus-visible img {
  transform: scale(1.04);
  filter: brightness(.95) saturate(1);
  animation-play-state: paused;
}

/* Shine sweep on hover — restored, softened to a single diagonal pass */
.bento-tile__shine {
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
  transform: skewX(-18deg);
  transition: left 900ms var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
.bento-tile:hover .bento-tile__shine,
.bento-tile:focus-visible .bento-tile__shine { left: 125%; }

@media (prefers-reduced-motion: reduce) {
  .bento-tile img { animation: none !important; transform: scale(1.03); }
  .bento-tile__shine { display: none; }
}
.bento-tile__overlay {
  position: absolute; inset: 0;
  padding: var(--space-5);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.82) 100%);
  z-index: 2;
}
.bento-tile__cat {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  margin-bottom: var(--space-3);
  font-weight: 600;
}
.bento-tile__title {
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.05;
}
.bento-tile__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  margin: 0;
}
.bento-tile__cta {
  margin-top: var(--space-3);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-primary);
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--motion-fast), transform var(--motion-fast), max-height var(--motion-fast);
  overflow: hidden;
}
.bento-tile:hover .bento-tile__cta,
.bento-tile:focus-visible .bento-tile__cta {
  max-height: 30px;
  opacity: 1;
  transform: none;
}
.bento-tile::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 100%;
  background: var(--color-surface-strong);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: width var(--motion-normal) var(--ease-out), opacity var(--motion-fast);
  pointer-events: none;
  z-index: 1;
}
.bento-tile:hover::after,
.bento-tile:focus-visible::after { width: 8px; opacity: 0.9; }

/* Asymmetric grid placement: 6 tiles */
.bento-tile.t-hero  { grid-column: span 7; grid-row: span 2; }
.bento-tile.t-tall  { grid-column: span 5; grid-row: span 2; }
.bento-tile.t-wide  { grid-column: span 5; grid-row: span 1; }
.bento-tile.t-mid   { grid-column: span 4; grid-row: span 1; }
.bento-tile.t-mid-l { grid-column: span 3; grid-row: span 1; }

@media (max-width: 1024px) {
  .bento-tile.t-hero  { grid-column: span 6; grid-row: span 2; }
  .bento-tile.t-tall  { grid-column: span 6; grid-row: span 2; }
  .bento-tile.t-wide  { grid-column: span 3; grid-row: span 1; }
  .bento-tile.t-mid   { grid-column: span 3; grid-row: span 1; }
  .bento-tile.t-mid-l { grid-column: span 3; grid-row: span 1; }
}
@media (max-width: 640px) {
  .bento-tile.t-hero, .bento-tile.t-tall,
  .bento-tile.t-wide, .bento-tile.t-mid, .bento-tile.t-mid-l {
    grid-column: 1; grid-row: span 1;
  }
}

/* ====== Stats band — sits inside .home-flow seamlessly ====== */
.stats-band {
  padding: var(--space-9) 0 var(--space-10);
  position: relative;
  overflow: hidden;
}
.stats-band__intro {
  max-width: 600px;
  margin-bottom: var(--space-7);
  color: var(--color-text-inverse);
}
.stats-band::before {
  content: "";
  position: absolute;
  left: -5%; top: 30%;
  width: 30vw; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-surface-strong));
  opacity: 0.5;
}

/* ====== Turnkey (orange band, the strong moment) ====== */
.turnkey {
  position: relative;
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
  padding: var(--space-10) 0;
  overflow: hidden;
}
/* SEC framing lines — never cross content */
.turnkey .sec-marks {
  position: absolute; inset: 0; pointer-events: none;
}
/* Edge-to-edge horizontal line — sits below all content (text + steps) */
.turnkey .sec-marks::before {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: var(--space-5);
  height: 1px;
  background: rgba(255,255,255,0.35);
}
/* Short diagonal accent contained in the bottom-right corner only */
.turnkey .sec-marks::after {
  content: ""; position: absolute;
  right: var(--space-5); bottom: var(--space-5);
  width: 220px; height: 1px;
  background: rgba(255,255,255,0.45);
  transform: rotate(-22deg);
  transform-origin: right center;
}

.turnkey__lead {
  position: relative;
  max-width: 940px;
  margin-bottom: var(--space-8);
}
.turnkey__quote {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-5);
}
.turnkey__quote::before { content: "\201C"; opacity: 0.5; margin-right: 0.1em; }
.turnkey__quote::after { content: "\201D"; opacity: 0.5; margin-left: 0.05em; }
.turnkey__sub {
  max-width: 620px;
  font-size: var(--fs-lg);
  opacity: 0.95;
}
.turnkey__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .turnkey__steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .turnkey__steps { grid-template-columns: 1fr; } }
.turnkey__step {
  border-top: 1px solid rgba(255,255,255,.45);
  padding-top: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.turnkey__step .num {
  font-size: var(--fs-sm); letter-spacing: 0.2em; font-weight: 600;
}
.turnkey__step h3 { font-size: var(--fs-xl); margin: 0; }
.turnkey__step p { font-size: var(--fs-sm); opacity: 0.92; margin: 0; }

/* ====== Mission + Vision — SEC framing geometry (lines contain content) ====== */
.mv2 {
  position: relative;
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  padding: var(--space-10) 0;
  overflow: hidden;
}
/* Branding marks — a full-width horizontal rule + a slanted line, both in brand orange.
   Replaces the former angular trapezoid "shape" per client note.
   Geometry is anchored to the LAYOUT in fixed pixels (not stretched with the viewport),
   so the lines are guaranteed to stay clear of the two text columns at every resolution:
   - the horizontal sits in the section's top padding band, always above the eyebrows
     (min text top = section pad 128px + inner pad 48px = 176px);
   - the diagonal is confined to the centre gutter between the columns. Each block keeps a
     64px inner padding (var(--space-8)), so a 112px band centred on the seam (±56px) can
     never reach the text — regardless of width or how the copy wraps. */
.mv2__marks {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mv2__mark-h {
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  height: 1px;
  background: var(--color-surface-strong);
}
.mv2__mark-d {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;                 /* the column seam is dead-centre — the container is centred */
  width: 112px;              /* ≤ the 128px text-free gutter (±64px block padding) */
  height: 100%;
  transform: translateX(-50%);
  display: block;
}
.mv2__mark-d line {
  stroke: var(--color-surface-strong);
  stroke-width: 1;
}
/* On mobile the columns stack, so the centre-gutter geometry no longer applies — hide it. */
@media (max-width: 900px) {
  .mv2__marks--d { display: none; }
}

.mv2__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 520px;
  padding: var(--space-7) 0;
}
@media (max-width: 900px) {
  .mv2__inner { grid-template-columns: 1fr; }
}

.mv2__block {
  position: relative;
  padding: var(--space-9) var(--space-8);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-3);
  min-height: 460px;
  isolation: isolate;
}

/* Flat panels — the angular trapezoid shape removed per client note */
.mv2__block--mission {
  background: transparent;
}
.mv2__block--vision {
  background: transparent;
}
/* Former central divider removed — see .mv2__marks for the branding lines */
.mv2__divider { display: none; }
@media (max-width: 900px) {
  .mv2__block--mission, .mv2__block--vision {
    clip-path: none;
    padding: var(--space-7) var(--space-6);
  }
  .mv2__divider {
    top: auto; bottom: auto;
    left: 0; right: 0;
    height: 0; width: 100%;
    border-left: 0;
    border-top: 1px solid var(--color-surface-strong);
    transform: none;
    /* place at the boundary between the two blocks */
    grid-column: 1 / -1;
    position: relative;
  }
}

.mv2__block .eyebrow {
  color: var(--color-surface-strong);
  margin-bottom: var(--space-5);
}
.mv2__block h3 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 var(--space-6);
  color: var(--color-text-primary);
  max-width: 16ch;
}
.mv2__quote {
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.65;
  color: var(--color-text-inverse);
  max-width: 40ch;
  font-weight: 300;
  margin: 0;
  letter-spacing: 0.005em;
}
.mv2__quote::before {
  content: "\201C";
  color: var(--color-surface-strong);
  font-size: 1.6em;
  line-height: 0;
  margin-right: 0.08em;
  vertical-align: -0.25em;
}
.mv2__quote::after {
  content: "\201D";
  color: var(--color-surface-strong);
  font-size: 1.6em;
  line-height: 0;
  margin-left: 0.06em;
  vertical-align: -0.25em;
}

/* ====== CTA — top of a continuous vertical gradient that flows into the footer ====== */
.cta {
  position: relative;
  background: linear-gradient(180deg,
    var(--color-surface-base) 0%,
    #14110f 30%,
    var(--color-surface-muted) 100%);
  padding: var(--space-10) 0 var(--space-9);
  overflow: hidden;
}
/* Hairline orange accent above the CTA */
.cta::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,111,32,0.55) 50%, transparent);
  pointer-events: none;
}
.cta__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-7);
  align-items: end;
}
@media (max-width: 800px) { .cta__inner { grid-template-columns: 1fr; } }
.cta h2 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  margin: 0;
  max-width: 800px;
}
/* Full-width supporting line under the CTA headline — smaller than the h2 */
.cta__lead {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.5;
  color: var(--color-text-inverse);
  max-width: 800px; /* match the .cta h2 headline width */
}

/* ========== Inner-page hero (Projects / What We Do / Who We Are / Contact / Careers) ==========
   The gradient starts at a warm dark tone (matching the translucent header backdrop) and fades
   smoothly down into the surface-base so the header has no visible seam against the next section. */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + var(--space-10)) 0 var(--space-9);
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255,111,32,0.07) 0%, transparent 55%),
    linear-gradient(180deg,
      #14110f 0%,
      #0d0b0a 60%,
      var(--color-surface-base) 100%);
  overflow: hidden;
}
/* Fade the last 14vh of the hero into pure black so the next section starts without a seam */
.page-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14vh;
  background: linear-gradient(180deg, transparent 0%, var(--color-surface-base) 95%);
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: var(--space-5); }

/* SEC brand-mark decoration: two crossing lines + 3-sided cream triangle in bottom-right */
.page-hero--marks {
  position: relative;
  /* Floor raised so the brand horizontal rule + wedge (viewBox y=624 = 78% of hero)
     always sit BELOW the hero copy, even on short viewports — keeps the wedge top
     aligned to the rule (like projects) without the rule crossing text. */
  min-height: clamp(820px, 72vh, 920px);
  padding-bottom: var(--space-9);
  overflow: hidden;
}
/* Careers hero carries a full-width stat-card row (marks only show >1700px), so it
   needs extra height for the 78% rule to clear the cards. */
@media (min-width: 1700px) {
  .page-hero--cards { min-height: 980px; }
}
.page-hero--marks::before { display: none; }
/* Container uses standard centered layout — title/copy contained within max-width */
.page-hero--marks .container { position: relative; z-index: 2; }
/* Cap copy width so title/body stay clear of the diagonal's path */
.page-hero--marks .container > .eyebrow,
.page-hero--marks .container > h1,
.page-hero--marks .container > p {
  max-width: min(640px, 60%);
}
/* SVG fills the entire section. With preserveAspectRatio="none" the viewBox stretches
   to fit any width/height — both lines always reach the section edges, cream stays in the corner. */
.marks-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
  opacity: 0.5;   /* recede behind copy so lines never appear to cut through text */
}
/* Tablet and below: design fights content — hide it, let copy breathe */
/* The careers hero carries a full-width stat-card row. Below ~1700px the cards fill the
   width and the diagonal would clip the last card's top corner, so hide the marks there;
   they return on wide desktops where the diagonal sweeps clear of the cards. */
@media (max-width: 1700px) {
  .page-hero--cards .marks-svg { display: none; }
}
@media (max-width: 1024px) {
  .marks-svg { display: none; }
  .page-hero--marks {
    min-height: auto;
    padding-bottom: var(--space-8);
  }
  .page-hero--marks .container > .eyebrow,
  .page-hero--marks .container > h1,
  .page-hero--marks .container > p {
    max-width: none;
  }
}
.page-hero h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  margin: 0 0 var(--space-4);
}
.page-hero p {
  max-width: 640px;
  color: var(--color-text-inverse);
  font-size: var(--fs-lg);
}

.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-7);
  background: var(--color-surface-base);
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  border-bottom: 1px solid var(--color-border-muted);
}
.filter-chip {
  padding: 10px 18px;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-inverse);
  border: 1px solid var(--color-border-muted);
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.filter-chip:hover { color: var(--color-surface-strong); border-color: var(--color-surface-strong); }
.filter-chip.is-active {
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
  border-color: var(--color-surface-strong);
}
.filter-count {
  margin-left: auto; align-self: center;
  font-size: var(--fs-xs); letter-spacing: 0.2em;
  color: var(--color-text-tertiary); text-transform: uppercase;
}

.masonry {
  columns: 3 320px;
  column-gap: var(--space-4);
  padding-top: var(--space-6);
}
.tile {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #111;
  cursor: pointer;
}
.tile[hidden] { display: none !important; }
.tile img {
  width: 100%; height: auto; display: block;
  transition: transform 900ms var(--ease-out), filter var(--motion-fast) var(--ease-out);
  filter: brightness(.85);
}
.tile:hover img, .tile:focus-visible img {
  transform: scale(1.05);
  filter: brightness(1);
}
.tile__overlay {
  position: absolute; inset: 0;
  padding: var(--space-5);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.85) 100%);
  color: var(--color-text-primary);
}
.tile__cat {
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-surface-strong); margin-bottom: var(--space-2); font-weight: 600;
}
.tile__title {
  font-size: var(--fs-xl); font-weight: 600;
  letter-spacing: -0.01em; margin: 0 0 4px;
}
.tile__meta { font-size: var(--fs-sm); color: var(--color-text-inverse); }
.tile__cta {
  margin-top: var(--space-3);
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-strong);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.tile:hover .tile__cta, .tile:focus-visible .tile__cta {
  opacity: 1; transform: none;
}

/* Two action buttons inside the tile overlay (View Details + Gallery) */
.tile__actions {
  display: flex; gap: var(--space-2);
  margin-top: var(--space-3);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.tile:hover .tile__actions,
.tile:focus-within .tile__actions {
  opacity: 1; transform: none;
}
.tile__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
  white-space: nowrap;
}
.tile__btn--primary {
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
  border: 0;
}
.tile__btn--primary:hover { background: #ff8240; color: var(--color-text-on-strong); transform: translateY(-1px); }
.tile__btn--ghost {
  background: rgba(255,255,255,0.08);
  color: var(--color-text-primary);
  border: 1px solid rgba(255,255,255,0.22);
}
.tile__btn--ghost:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); }

/* ========== What We Do ========== */
.services-hub { padding: var(--space-10) 0; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 800px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
  position: relative;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  overflow: hidden;
  transition: transform var(--motion-fast), border-color var(--motion-fast);
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.service-card::after {
  content: "";
  position: absolute;
  right: -30%; bottom: -30%;
  width: 70%; height: 70%;
  background: var(--color-surface-strong);
  clip-path: polygon(0 30%, 100% 0, 100% 100%);
  opacity: 0;
  transition: opacity var(--motion-normal) var(--ease-out);
}
.service-card:hover { transform: translateY(-6px); border-color: var(--color-surface-strong); }
.service-card:hover::after { opacity: 0.16; }
.service-card .badge {
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-surface-strong); margin-bottom: var(--space-4);
}
.service-card h3 { font-size: var(--fs-2xl); letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.service-card p { color: var(--color-text-inverse); margin: 0 0 var(--space-5); }
.service-card .scope {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.service-card .scope li {
  font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
}

/* Our Scope — six discipline cards (what-we-do; wwd- prefix avoids the
   project-detail .scope-grid/.scope-card component defined further down) */
.wwd-scope-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1; }
.wwd-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (max-width: 900px) { .wwd-scope-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wwd-scope-grid { grid-template-columns: 1fr; } }
.wwd-scope-card {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}
.wwd-scope-card:hover { transform: translateY(-6px); border-color: var(--color-surface-strong); }
.wwd-scope-card__icon { width: 40px; height: 40px; color: var(--color-surface-strong); margin-bottom: var(--space-2); }
.wwd-scope-card h3 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
.wwd-scope-card p { color: var(--color-text-inverse); margin: 0; font-size: var(--fs-md); line-height: 1.55; }
.wwd-scope-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.wwd-scope-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.wwd-scope-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.wwd-scope-grid .reveal:nth-child(5) { transition-delay: 240ms; }
.wwd-scope-grid .reveal:nth-child(6) { transition-delay: 300ms; }

.sectors {
  background: var(--color-surface-muted);
  padding: var(--space-10) 0;
  border-top: 1px solid var(--color-border-muted);
}
.sectors-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-7);
}
@media (max-width: 900px) { .sectors-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .sectors-grid { grid-template-columns: repeat(2, 1fr); } }
.sector {
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  gap: var(--space-3);
  background: var(--color-surface-base);
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.sector:hover { border-color: var(--color-surface-strong); color: var(--color-surface-strong); }
.sector svg { width: 36px; height: 36px; color: var(--color-surface-strong); }
.sector span { font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; }

/* ========== Who We Are ========== */
.story {
  padding: var(--space-10) 0;
  /* Seam from the page-hero (ends in #000) into the story's surface-muted bg */
  background: linear-gradient(180deg,
    var(--color-surface-base) 0%,
    var(--color-surface-muted) 10%,
    var(--color-surface-muted) 100%);
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}
.story__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 900px) { .story__grid { grid-template-columns: 1fr; } }
.story h2 { color: var(--color-text-primary); }
.story p { color: var(--color-text-inverse); font-size: var(--fs-lg); line-height: 1.55; }

.timeline { position: relative; padding: var(--space-10) 0 var(--space-9); background: var(--color-surface-base); }

/* Vertical timeline — central rail with alternating milestones (matches SEC Group) */
.timeline__items {
  position: relative;
  max-width: 900px;
  margin: var(--space-9) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.timeline__rail {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-50%);
}
.timeline__rail-fill {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: 0%;
  background: var(--color-surface-strong);
  will-change: height;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  grid-template-rows: auto auto auto;
  align-items: start;
  column-gap: var(--space-6);
  row-gap: 6px;
  padding-block: var(--space-4);
}
.timeline__item .timeline__content { display: contents; }
.timeline__item .timeline__year      { grid-row: 1; }
.timeline__item .timeline__milestone { grid-row: 2; }
.timeline__item .timeline__detail    { grid-row: 3; }
.timeline__item:nth-child(odd) .timeline__year,
.timeline__item:nth-child(odd) .timeline__milestone,
.timeline__item:nth-child(odd) .timeline__detail {
  grid-column: 1;
  text-align: right;
}
.timeline__item:nth-child(even) .timeline__year,
.timeline__item:nth-child(even) .timeline__milestone,
.timeline__item:nth-child(even) .timeline__detail {
  grid-column: 3;
}
/* Entrance cascade as the rail reaches each item */
.timeline__item .timeline__year,
.timeline__item .timeline__milestone,
.timeline__item .timeline__detail {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}
.timeline__item.is-visible .timeline__year      { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.timeline__item.is-visible .timeline__milestone { opacity: 1; transform: translateY(0); transition-delay: 220ms; }
.timeline__item.is-visible .timeline__detail    { opacity: 1; transform: translateY(0); transition-delay: 360ms; }

.timeline__year {
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-surface-strong);
  line-height: 1;
  letter-spacing: -0.02em;
}
.timeline__milestone {
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 8px 0 6px;
  line-height: 1.2;
}
.timeline__detail {
  font-size: var(--fs-md);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: 1.6;
}
/* Node dot sits on the rail */
.timeline__node {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 14px; height: 14px;
  background: var(--color-surface-base);
  border: 2px solid var(--color-surface-strong);
  border-radius: 50%;
  margin-inline: auto;
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: scale(0.4);
  transition: background var(--motion-normal) var(--ease-out), transform 600ms var(--ease-out),
              box-shadow var(--motion-normal) var(--ease-out), opacity var(--motion-normal) var(--ease-out);
}
.timeline__item.is-visible .timeline__node {
  background: var(--color-surface-strong);
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 0 6px rgba(255, 111, 32, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .timeline__item .timeline__year,
  .timeline__item .timeline__milestone,
  .timeline__item .timeline__detail { opacity: 1; transform: none; transition: none; }
  .timeline__node { opacity: 1; transform: scale(1); transition: none; }
}
@media (max-width: 768px) {
  .timeline__rail { left: 20px; transform: none; }
  .timeline__item { grid-template-columns: 40px 1fr; column-gap: var(--space-4); }
  .timeline__item:nth-child(odd) .timeline__year,
  .timeline__item:nth-child(odd) .timeline__milestone,
  .timeline__item:nth-child(odd) .timeline__detail,
  .timeline__item:nth-child(even) .timeline__year,
  .timeline__item:nth-child(even) .timeline__milestone,
  .timeline__item:nth-child(even) .timeline__detail {
    grid-column: 2;
    text-align: left;
  }
  .timeline__node { grid-column: 1; }
  .timeline__year { font-size: var(--fs-2xl); }
}

.values {
  padding: var(--space-10) 0;
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); margin-top: var(--space-7);
}
@media (max-width: 800px) { .values-grid { grid-template-columns: 1fr; } }
.value { padding: var(--space-6); border-top: 2px solid var(--color-surface-strong); }
.value h3 { color: var(--color-surface-strong); font-size: var(--fs-xl); margin-bottom: var(--space-3); }
.value p { margin: 0; color: var(--color-text-primary); }

.leadership { padding: var(--space-10) 0; background: var(--color-surface-base); }
.leadership-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5); margin-top: var(--space-7);
}
@media (max-width: 800px) { .leadership-grid { grid-template-columns: 1fr; } }
.leader {
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
}
.leader__photo {
  aspect-ratio: 4/5;
  background:
    linear-gradient(180deg, rgba(255,111,32,.05), rgba(255,111,32,.18)),
    #2b2522;
  display: grid; place-items: center;
  color: var(--color-text-primary);
  font-size: 64px; font-weight: 700; letter-spacing: -0.02em;
  opacity: 0.55;
}
.leader__body { padding: var(--space-5); }
.leader__body h3 { font-size: var(--fs-xl); margin-bottom: 4px; }
.leader__body p { color: var(--color-text-inverse); margin: 0; font-size: var(--fs-sm); }
.leader__role { color: var(--color-surface-strong) !important; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--fs-xs) !important; margin-bottom: var(--space-2) !important; font-weight: 600; }

.subsidiaries {
  padding: var(--space-10) 0;
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border-muted);
}
.subs-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4); margin-top: var(--space-6);
}
@media (max-width: 900px) { .subs-grid { grid-template-columns: 1fr 1fr; } }
.sub {
  padding: var(--space-6);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: var(--space-3);
  background: var(--color-surface-base);
  transition: border-color var(--motion-fast);
}
.sub:hover { border-color: var(--color-surface-strong); }
.sub__mark {
  font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: -0.02em; color: var(--color-surface-strong);
}
.sub__mark .i { color: #8a3a1a; font-style: italic; font-weight: 600; }
.sub h4 { font-size: var(--fs-md); margin: 0; }
.sub p { font-size: var(--fs-sm); color: var(--color-text-inverse); margin: 0; }

.logo-wall { padding: var(--space-9) 0; background: var(--color-surface-base); }
.logo-wall__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-border-muted);
  border-left: 1px solid var(--color-border-muted);
}
.logo-wall__strip > div {
  border-right: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
  padding: var(--space-5);
  display: grid; place-items: center;
  text-align: center;
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  min-height: 110px;
  transition: color var(--motion-fast), background var(--motion-fast);
}
.logo-wall__strip > div:hover {
  color: var(--color-surface-strong);
  background: var(--color-surface-muted);
}

.certs-strip {
  padding: var(--space-8) 0;
  background: var(--color-surface-muted);
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
}
.certs-strip__row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-7);
}
.cert {
  width: 96px; height: 96px;
  object-fit: contain;
  display: block;
}

/* ========== Contact ========== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
  padding: var(--space-9) 0 var(--space-10);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-info h2 { font-size: clamp(2.5rem, 6vw, 4rem); }
.contact-block h4 {
  font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-surface-strong); margin-bottom: var(--space-2);
}
.contact-block p, .contact-block a { font-size: var(--fs-md); color: var(--color-text-inverse); }
.contact-block a:hover { color: var(--color-surface-strong); }

.contact-form {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  display: grid; gap: var(--space-4);
}
.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-tertiary); font-weight: 600;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 14px 16px;
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  transition: border-color var(--motion-fast);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--color-surface-strong);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.contact-form .btn { justify-self: start; }

.map-wrap {
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-muted);
  filter: grayscale(.4) contrast(1.05);
}
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ========== Careers page ========== */

/* ---- Stats strip (hero) ---- */
.careers-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
@media (max-width: 800px) { .careers-summary { grid-template-columns: 1fr 1fr; } }
.careers-stat {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-5) var(--space-4);
  position: relative;
  overflow: hidden;
  transition: border-color var(--motion-fast);
}
.careers-stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--color-surface-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-normal) var(--ease-out);
}
.careers-stat:hover { border-color: var(--color-surface-strong); }
.careers-stat:hover::before { transform: scaleX(1); }
.careers-stat__num {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-surface-strong);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.careers-stat__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
}

/* ---- Why SEC strip ---- */
.why-sec {
  /* Seam from the page-hero (ends in #000) into surface-muted bg */
  background: linear-gradient(180deg,
    var(--color-surface-base) 0%,
    var(--color-surface-muted) 12%,
    var(--color-surface-muted) 100%);
  border-bottom: 1px solid var(--color-border-muted);
  padding: var(--space-9) 0;
}
.why-sec__head { max-width: 720px; margin-bottom: var(--space-6); }
.why-sec__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .why-sec__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .why-sec__grid { grid-template-columns: 1fr; } }
.why-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: border-color var(--motion-fast), transform var(--motion-fast);
}
.why-card:hover { border-color: var(--color-surface-strong); transform: translateY(-3px); }
.why-card__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--color-surface-strong);
}
.why-card__icon svg { width: 28px; height: 28px; }
.why-card h3 {
  font-size: var(--fs-md);
  margin: 0;
  letter-spacing: -0.01em;
}
.why-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: 1.55;
}

/* ---- Search + toolbar ---- */
.careers-toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 10;
  background: var(--color-surface-base);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  align-items: center; justify-content: space-between;
}
.careers-search {
  flex: 1 1 320px;
  min-width: 240px;
  display: flex; align-items: center; gap: var(--space-2);
  padding: 10px 16px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  transition: border-color var(--motion-fast);
}
.careers-search:focus-within {
  border-color: var(--color-surface-strong);
}
.careers-search svg {
  width: 18px; height: 18px;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}
.careers-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  color: var(--color-text-primary);
  font-size: var(--fs-md);
}
.careers-search input::placeholder {
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.careers-toolbar__hint {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ---- Listings ---- */
.careers-root {
  padding: var(--space-7) 0 var(--space-10);
  display: grid;
  gap: var(--space-9);
}

.career-cat__head {
  margin-bottom: var(--space-4);
}
.career-cat__eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  margin: 0 0 var(--space-2);
  font-weight: 600;
}
.career-cat__title {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
}

/* ---- Job row (single-line layout) ---- */
.job-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.job-row { background: transparent; }
.job-row[hidden] { display: none !important; }
.job-row__btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  min-height: 72px;
  text-align: left;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--motion-fast), background var(--motion-fast), transform var(--motion-fast);
  overflow: hidden;
}
.job-row__btn:hover, .job-row__btn:focus-visible {
  border-color: var(--color-surface-strong);
  background: rgba(255,111,32,0.05);
  transform: translateX(2px);
}
.job-row__bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 3px;
  background: var(--color-surface-strong);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--motion-normal) var(--ease-out);
}
.job-row__btn:hover .job-row__bar,
.job-row__btn:focus-visible .job-row__bar { transform: scaleY(1); }

.job-row__main {
  flex: 1 1 auto;
  min-width: 0;
}
.job-row__title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--motion-fast);
}
.job-row__btn:hover .job-row__title,
.job-row__btn:focus-visible .job-row__title { color: var(--color-surface-strong); }
/* Summary is shown only in the modal — keep the row a single tight line */
.job-row__summary { display: none; }

.job-row__pills {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.6;
}
.pill svg { width: 12px; height: 12px; }
.pill--ghost {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--color-border-muted);
  color: var(--color-text-inverse);
}
.pill--new {
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.job-row__cta {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-surface-strong);
  white-space: nowrap;
}
.job-row__cta svg {
  width: 14px; height: 14px;
  transition: transform var(--motion-fast);
}
.job-row__btn:hover .job-row__cta svg,
.job-row__btn:focus-visible .job-row__cta svg { transform: translateX(4px); }

/* Drop the experience pill before pills get cramped, then drop type, keeping location + NEW */
@media (max-width: 1180px) {
  .job-row__pills .pill:nth-child(3) { display: none; } /* experience */
}
@media (max-width: 980px) {
  .job-row__pills .pill:nth-child(2) { display: none; } /* type */
}

/* Mobile: stack title above pills/CTA but each band stays single-line */
@media (max-width: 720px) {
  .job-row__btn {
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-4);
    row-gap: var(--space-3);
  }
  .job-row__main { flex: 1 1 100%; }
  .job-row__pills { order: 2; flex: 1 1 auto; }
  .job-row__cta { order: 3; margin-left: auto; }
  .job-row__pills .pill:nth-child(2),
  .job-row__pills .pill:nth-child(3) { display: inline-flex; } /* restore on mobile since they wrap */
}

/* Empty state */
.careers-empty {
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-border-muted);
  border-radius: var(--radius-md);
  color: var(--color-text-inverse);
}
.careers-empty p { margin: 0; }

/* ---- Job modal ---- */
.job-modal {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid; place-items: center;
  padding: var(--space-4);
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-out);
}
.job-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.job-modal__panel {
  width: min(820px, 100%);
  max-height: calc(100vh - var(--space-7));
  overflow: auto;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-lg);
  position: relative;
  padding: var(--space-8) var(--space-7) var(--space-6);
  transform: translate3d(0, 16px, 0) scale(0.985);
  transform-origin: 50% 30%;
  transition: transform var(--motion-normal) var(--ease-decelerate);
}
.job-modal__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--color-surface-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.job-modal.is-open .job-modal__panel { transform: none; }
.job-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06);
  color: var(--color-text-primary);
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
}
.job-modal__close:hover { background: var(--color-surface-strong); color: var(--color-text-on-strong); transform: rotate(90deg); }
.job-modal__close svg { width: 16px; height: 16px; }

.job-modal__head { margin-bottom: var(--space-6); padding-right: var(--space-7); }
.job-modal__chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,111,32,0.15);
  color: var(--color-surface-strong);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.job-modal__head h2 {
  margin: 0 0 var(--space-4);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.job-modal__meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
}
.job-modal__meta li {
  display: inline-flex; align-items: center; gap: 6px;
}
.job-modal__meta svg {
  width: 14px; height: 14px;
  color: var(--color-surface-strong);
}
.job-modal__section {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-muted);
}
.job-modal__section:first-of-type { padding-top: 0; border-top: 0; }
.job-modal__section h3 {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  margin: 0 0 var(--space-3);
  font-weight: 700;
}
.job-modal__section p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fs-md);
  line-height: 1.6;
}
.job-modal__section ul {
  margin: 0; padding-left: 1.2rem;
  display: grid; gap: 8px;
  color: var(--color-text-primary);
}
.job-modal__section li {
  line-height: 1.55;
  padding-left: 4px;
}
.job-modal__section li::marker { color: var(--color-surface-strong); }
.job-modal__foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-3);
}

/* ========== Header pull-down search ========== */
.header-search {
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 48;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border-muted);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--motion-normal) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.header-search.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.header-search__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--container-pad) var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.header-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 20px;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-pill);
  transition: border-color var(--motion-fast);
}
.header-search__field:focus-within { border-color: var(--color-surface-strong); }
.header-search__field > svg:first-child {
  width: 20px; height: 20px;
  color: var(--color-surface-strong);
  flex-shrink: 0;
}
.header-search__field input {
  flex: 1;
  background: transparent;
  border: 0; outline: none;
  color: var(--color-text-primary);
  font-size: var(--fs-lg);
  font-family: inherit;
}
.header-search__field input::placeholder {
  color: var(--color-text-tertiary);
}
.header-search__close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
  background: rgba(255,255,255,0.04);
  transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast);
  flex-shrink: 0;
}
.header-search__close:hover {
  background: var(--color-surface-strong);
  color: var(--color-text-on-strong);
  transform: rotate(90deg);
}
.header-search__close svg { width: 14px; height: 14px; }

.header-search__hint {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) 4px;
}
.header-search__hint .eyebrow {
  margin: 0; padding-right: var(--space-3);
}
.header-search__hint button {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-muted);
  background: transparent;
  color: var(--color-text-inverse);
  font-family: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--motion-fast), color var(--motion-fast);
}
.header-search__hint button:hover {
  border-color: var(--color-surface-strong);
  color: var(--color-surface-strong);
}

.header-search__results ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2px;
  border-top: 1px solid var(--color-border-muted);
  padding-top: var(--space-3);
}
.header-search__results li a {
  display: grid;
  grid-template-columns: 90px 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.header-search__results li a:hover,
.header-search__results li a:focus-visible {
  background: rgba(255,111,32,0.08);
  color: var(--color-text-primary);
}
.header-search__results li a .kind {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  font-weight: 700;
}
.header-search__results li a .t {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.header-search__results li a .s {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.header-search__results li a .arr {
  color: var(--color-surface-strong);
  transition: transform var(--motion-fast);
}
.header-search__results li a:hover .arr { transform: translateX(4px); }

.header-search__empty {
  margin: 0; padding: var(--space-4) 4px 0;
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
}
.header-search__empty a {
  color: var(--color-surface-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.search-open { overflow: hidden; }

@media (max-width: 720px) {
  .header-search__results li a {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .header-search__results li a .arr { display: none; }
}

/* =========================================================================
   PROJECT DETAIL PAGE — sections synthesized from leading construction sites
   ========================================================================= */

/* ---- HERO ---- */
.pd-hero {
  position: relative;
  min-height: 78vh;
  padding: calc(var(--header-h) + var(--space-9)) 0 var(--space-9);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  background: var(--color-surface-base);
}
.pd-hero__media {
  position: absolute; inset: 0;
  z-index: -1;
}
.pd-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55) saturate(0.95);
  animation: pdHeroDrift 22s ease-in-out infinite alternate;
}
.pd-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.85) 100%);
}
@keyframes pdHeroDrift {
  from { transform: scale(1.04) translate3d(0,0,0); }
  to   { transform: scale(1.10) translate3d(-1%, -0.5%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pd-hero__media img { animation: none; transform: scale(1.04); }
}
.pd-hero__inner {
  position: relative;
  z-index: 1;
}
.pd-hero__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  margin-bottom: var(--space-6);
  transition: color var(--motion-fast), gap var(--motion-fast);
}
.pd-hero__back svg { width: 14px; height: 14px; }
.pd-hero__back:hover { color: var(--color-surface-strong); gap: 10px; }
.pd-hero h1 {
  font-size: clamp(2.8rem, 7vw, 6rem);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.pd-hero__sub {
  max-width: 64ch;
  font-size: var(--fs-lg);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-6);
}
.pd-hero__meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);
}
.pd-hero__meta li {
  display: inline-flex; align-items: center; gap: 8px;
}
.pd-hero__meta svg {
  width: 16px; height: 16px;
  color: var(--color-surface-strong);
}

/* ---- AT A GLANCE / FACTS ---- */
.pd-facts {
  padding: var(--space-10) 0;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border-muted);
}
.pd-facts h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 var(--space-7);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 1024px) { .facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .facts-grid { grid-template-columns: 1fr; } }
.fact {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-5);
  background: var(--color-surface-base);
}
.fact__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  font-weight: 600;
}
.fact__value {
  font-size: var(--fs-lg);
  color: var(--color-text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- OVERVIEW ---- */
.pd-overview { padding: var(--space-10) 0; background: var(--color-surface-base); }
.pd-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 900px) { .pd-overview__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.pd-overview h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  letter-spacing: -0.02em;
  margin: 0;
}
.pd-overview__body p {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--color-text-inverse);
  margin: 0 0 var(--space-5);
}
.pd-overview__body p:last-child { margin-bottom: 0; }

/* ---- Generic section head used across PD sections ---- */
.pd-section-head { max-width: 720px; margin-bottom: var(--space-7); }
.pd-section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ---- SCOPE OF WORKS ---- */
.pd-scope {
  padding: var(--space-10) 0;
  background: var(--color-surface-muted);
}
.scope-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) { .scope-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .scope-grid { grid-template-columns: 1fr; } }
.scope-card {
  padding: var(--space-6);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}
.scope-card:hover { transform: translateY(-3px); border-color: var(--color-surface-strong); }
.scope-card__badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  background: rgba(255,111,32,0.12);
  border-radius: var(--radius-pill);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.scope-card h3 {
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}
.scope-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: 1.55;
}

/* ---- HIGHLIGHTS / STATS BAND ---- */
.pd-highlights {
  padding: var(--space-9) 0;
  background: var(--color-surface-base);
  border-top: 1px solid var(--color-border-muted);
  border-bottom: 1px solid var(--color-border-muted);
}
.pd-highlights .eyebrow { margin-bottom: var(--space-6); }
.highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-7);
}
@media (max-width: 800px) { .highlights-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
.highlight {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-surface-strong);
  padding-top: var(--space-4);
}
.highlight__num {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-surface-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.highlight__label {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  letter-spacing: 0.04em;
}

/* ---- GALLERY ---- */
.pd-gallery {
  padding: var(--space-10) 0;
  background: var(--color-surface-base);
}
.pd-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: var(--space-3);
}
@media (max-width: 1024px) {
  .pd-gallery__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
}
@media (max-width: 700px) {
  .pd-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}
@media (max-width: 480px) {
  .pd-gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
}
.pd-gallery__tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: #111;
}
.pd-gallery__tile--lg { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .pd-gallery__tile--lg { grid-row: span 1; } }
.pd-gallery__more { margin-block-start: var(--space-6); text-align: center; }
.pd-gallery__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92);
  transition: transform 700ms var(--ease-out), filter var(--motion-fast);
}
.pd-gallery__tile:hover img,
.pd-gallery__tile:focus-visible img { transform: scale(1.06); filter: brightness(1); }

/* Video tile — play badge over the poster */
.pd-gallery__tile--video img { filter: brightness(0.74); }
.pd-gallery__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(0,0,0,0.42);
  border: 2px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: transform var(--motion-fast), background var(--motion-fast);
}
.pd-gallery__play::after {
  content: "";
  position: absolute;
  top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 19px;
  border-color: transparent transparent transparent #fff;
}
.pd-gallery__tile--video:hover .pd-gallery__play,
.pd-gallery__tile--video:focus-visible .pd-gallery__play { transform: scale(1.08); background: rgba(0,0,0,0.55); }
@media (prefers-reduced-motion: reduce) {
  .pd-gallery__play { transition: none; }
}

/* ---- TEAM / STAKEHOLDERS ---- */
.pd-team {
  padding: var(--space-10) 0;
  background: var(--color-surface-muted);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
@media (max-width: 1024px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: var(--space-6);
  background: var(--color-surface-base);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  display: flex; flex-direction: column;
  gap: var(--space-2);
}
.team-card__role {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  font-weight: 600;
}
.team-card__name {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  font-weight: 700;
}
.team-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-inverse);
  margin: 0;
  line-height: 1.55;
}

/* ---- RELATED PROJECTS ---- */
.pd-related {
  padding: var(--space-10) 0;
  background: var(--color-surface-base);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .related-grid { grid-template-columns: 1fr; } }
.related-card {
  display: block;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-muted);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--motion-fast), border-color var(--motion-fast);
}
.related-card:hover { transform: translateY(-4px); border-color: var(--color-surface-strong); color: var(--color-text-primary); }
.related-card__img { aspect-ratio: 16/10; overflow: hidden; }
.related-card__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.related-card:hover .related-card__img img { transform: scale(1.06); }
.related-card__body { padding: var(--space-5); }
.related-card__cat {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-surface-strong);
  font-weight: 600;
}
.related-card__title {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  margin: var(--space-2) 0 0;
  color: var(--color-text-primary);
}

/* Footer "Crafted by DATA" credit */
.footer-credit {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--motion-fast) var(--ease-out);
}
.footer-credit:hover,
.footer-credit:focus-visible {
  color: var(--color-surface-strong);
  text-decoration: none;
}

/* Subsidiary logo — top-right of each What We Do service card */
.service-card__logo {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  height: 26px;
  width: auto;
  max-width: 132px;
  object-fit: contain;
  object-position: right center;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 800px) {
  .service-card__logo { height: 22px; max-width: 108px; }
}