/* ==========================================================================
   EAGLE VENTURES LAB — Design System  v2.0
   Image-led, full-bleed, cinematic. Research | Innovate | Transform
   ========================================================================== */

:root {
  --navy:      #07121C;
  --ivory:     #F2F0EA;
  --graphite:  #20262C;
  --steel:     #536A7A;
  --electric:  #2F80ED;
  --titanium:  #B8BDC2;
  --gold:      #C9A45C;

  --navy-900:  #05131D;   /* deepest surface — sampled from the reference */
  --navy-800:  #0A1B27;
  --navy-700:  #12293A;

  --line:      rgba(184, 189, 194, 0.15);
  --line-soft: rgba(184, 189, 194, 0.08);

  /* Semantic tokens. Dark is the default; .sec-ivory re-points them so every
     component re-themes itself on a light surface without duplicate rules. */
  --fg:         var(--ivory);
  --fg-lead:    rgba(242, 240, 234, 0.76);
  --fg-muted:   rgba(242, 240, 234, 0.60);
  --fg-faint:   rgba(242, 240, 234, 0.32);
  --kicker-fg:  var(--titanium);
  --curtain:    var(--navy-900);
  /* Mission Gold reads well on navy but only hits 2.1:1 on ivory, so light
     surfaces use a deepened bronze from the same family. */
  --accent:     var(--gold);

  --font-head: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease2: cubic-bezier(0.65, 0, 0.35, 1);
  --header-h: 80px;
}
@media (min-width: 768px) { :root { --header-h: 96px; } }

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-head {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}

/* Preflight is disabled, so a bare <button> still carries the UA's grey
   background. Every .btn except the form submit is an <a>, which is why this
   only shows up on the enquiry form. */
button, [type="button"], [type="submit"], [type="reset"] {
  background-color: transparent;
  background-image: none;
}

p { margin: 0; text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--electric); color: #fff; }
:focus-visible { outline: 2px solid var(--electric); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 22px;
}
@media (min-width: 768px)  { .wrap { padding-inline: 40px; } }
@media (min-width: 1280px) { .wrap { padding-inline: 64px; } }

/* Sections ---------------------------------------------------------------- */
.sec { position: relative; padding-block: 92px; }
@media (min-width: 768px)  { .sec { padding-block: 132px; } }
@media (min-width: 1280px) { .sec { padding-block: 168px; } }
.sec-sm { padding-block: 72px; }

.sec-navy     { background: var(--navy); }
.sec-deep     { background: var(--navy-900); }
.sec-graphite { background: var(--graphite); }
.sec-ivory {
  background: var(--ivory);
  color: var(--navy);
  --fg:        var(--navy);
  --fg-lead:   rgba(16, 26, 36, 0.82);
  --fg-muted:  rgba(16, 26, 36, 0.66);
  --fg-faint:  rgba(16, 26, 36, 0.42);
  --line:      rgba(7, 18, 28, 0.14);
  --line-soft: rgba(7, 18, 28, 0.08);
  --kicker-fg: #5A6873;
  --accent:    #7A5D24;
  --curtain:   var(--ivory);
}
/* A second light tone, for strips that sit directly against another light block */
.sec-bone { background: #EAE9E4; }

/* ==========================================================================
   TYPE
   ========================================================================== */

.d1 { font-size: clamp(2.9rem, 7.4vw, 6.6rem); line-height: 0.95; letter-spacing: -0.042em; }
.d2 { font-size: clamp(2.2rem, 5.2vw, 4.4rem); line-height: 1.0;  letter-spacing: -0.036em; }
.d3 { font-size: clamp(1.6rem, 2.9vw, 2.5rem); line-height: 1.1;  letter-spacing: -0.026em; }
.d4 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.22; letter-spacing: -0.016em; }

.lead {
  font-size: clamp(1.08rem, 1.45vw, 1.32rem);
  line-height: 1.58;
  color: var(--fg-lead);
  font-weight: 300;
}

.muted, .body-copy { color: var(--fg-muted); }

/* Kicker ------------------------------------------------------------------ */
.kicker {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 13px;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--kicker-fg);
}
.kicker::before {
  content: "";
  width: 34px; height: 1px;
  background: currentColor;
  opacity: 0.8;
  flex: none;
}
.kicker-bare { gap: 0; }
.kicker-bare::before { display: none; }

.tracked { font-family: var(--font-head); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; }
/* Micro-label that re-themes with its surface — use instead of inline colours */
.label { color: var(--kicker-fg); }
.tracked-sm { font-family: var(--font-head); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; }

.idx {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 17px 34px;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color .5s var(--ease), border-color .5s var(--ease);
}
.btn .ico { width: 15px; height: 15px; flex: none; transition: transform .5s var(--ease); }
.btn:hover .ico { transform: translateX(6px); }
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .5s var(--ease);
}
.btn:hover::after { transform: scaleX(1); }

.btn-light { background: var(--ivory); color: var(--navy); }
.btn-light:hover { color: var(--ivory); }
.btn-light::after { background: var(--navy); }

.btn-ghost { border-color: rgba(242, 240, 234, 0.32); color: var(--ivory); }
.btn-ghost::after { background: var(--ivory); }
.btn-ghost:hover { color: var(--navy); border-color: var(--ivory); }

.btn-dark { border-color: rgba(7, 18, 28, 0.3); color: var(--navy); }
.btn-dark::after { background: var(--navy); }
.btn-dark:hover { color: var(--ivory); border-color: var(--navy); }

.btn-sm { padding: 12px 24px; font-size: 0.66rem; letter-spacing: 0.17em; }
.btn-block { width: 100%; }

.alink {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 5px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size .5s var(--ease);
}
.alink:hover { background-size: 100% 1px; }
.alink svg { width: 14px; height: 14px; transition: transform .5s var(--ease); }
.alink:hover svg { transform: translateX(5px); }

/* ==========================================================================
   HEADER — transparent over imagery, solid once scrolled
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  display: block;            /* stacks the utility bar above the main row */
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Positioned so the logo and wordmark paint above the header's gradient
   ::before — unpositioned, they sat underneath it and read dimmed. */
.header-main {
  position: relative;
  z-index: 1;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: height .5s var(--ease);
}

.site-header::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 11, 18, 0.88) 0%, rgba(4, 11, 18, 0.45) 55%, transparent 100%);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.site-header.is-stuck .header-main { height: 72px; }
@media (min-width: 768px) { .site-header.is-stuck .header-main { height: 80px; } }
.site-header.is-stuck {
  background: rgba(4, 11, 18, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}
.site-header.is-stuck::before { opacity: 0; }

.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The real mark is a circular seal carrying its own wordmark and tagline as
   curved micro-type, so it needs a little more room than a bare glyph — and it
   must not spin on hover, which would turn that type upside down. */
.brand img { width: 48px; height: 48px; flex: none; transition: opacity .4s var(--ease), width .5s var(--ease), height .5s var(--ease); }
@media (min-width: 768px) { .site-header .brand img { width: 60px; height: 60px; } }
/* The seal settles back a little once the header shrinks on scroll */
@media (min-width: 768px) { .site-header.is-stuck .brand img { width: 52px; height: 52px; } }
.site-header .brand { gap: 14px; }
.brand:hover img { opacity: .82; }
.site-footer .brand img { width: 54px; height: 54px; }
.brand-name {
  display: block;
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.1;
}
.brand-tag {
  display: block;
  font-family: var(--font-head);
  font-size: 0.48rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--titanium);
  opacity: 0.7;
  margin-top: 3px;
}
@media (max-width: 599px) { .site-header .brand-tag { display: none; } }
/* Seven top-level items leave no room for the tagline until the widest layout,
   and neither the wordmark nor the CTA may wrap. */
.site-header .brand { flex: none; }
.site-header .brand-name { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1439px) { .site-header .brand-tag { display: none; } }

.nav { display: none; align-items: center; gap: 22px; }
@media (min-width: 1200px) { .nav { display: flex; } }
@media (min-width: 1440px) { .nav { gap: 26px; } }
.nav a {
  position: relative;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(242, 240, 234, 0.78);
  padding-block: 8px;
  transition: color .35s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .45s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav a.is-active { color: #fff; }
.nav a.is-active::after { transform: scaleX(1); }
@media (min-width: 1440px) { .nav a { font-size: 0.72rem; letter-spacing: 0.15em; } }

.header-cta { display: none; flex: none; white-space: nowrap; }
@media (min-width: 1200px) { .header-cta { display: inline-flex; } }

.burger {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px; height: 46px;
  padding: 0 11px;
  background: rgba(4, 11, 18, 0.3);
  border: 1px solid rgba(242, 240, 234, 0.22);
  cursor: pointer;
}
@media (min-width: 1200px) { .burger { display: none; } }
.burger span {
  display: block; height: 1.5px; width: 100%;
  background: var(--ivory);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Drawer ------------------------------------------------------------------ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--navy-900);
  padding: calc(var(--header-h) + 32px) 22px 44px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease), visibility .4s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer-link {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  transform: translateY(14px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.drawer.is-open .drawer-link { transform: none; opacity: 1; }
.drawer.is-open .drawer-link:nth-child(1) { transition-delay: .06s; }
.drawer.is-open .drawer-link:nth-child(2) { transition-delay: .11s; }
.drawer.is-open .drawer-link:nth-child(3) { transition-delay: .16s; }
.drawer.is-open .drawer-link:nth-child(4) { transition-delay: .21s; }
.drawer.is-open .drawer-link:nth-child(5) { transition-delay: .26s; }
.drawer.is-open .drawer-link:nth-child(6) { transition-delay: .31s; }
.drawer-link .idx { font-size: 0.62rem; }
body.nav-locked { overflow: hidden; }

/* ==========================================================================
   MEDIA PRIMITIVES — the core of the image-led layout
   ========================================================================== */

.media { position: absolute; inset: 0; overflow: hidden; }
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* Gradient scrims keep type legible over any photograph */
/* Weighted at the top as well as the bottom: the header sits over this, and
   some photographs (a lit assembly hall, a desert horizon) are bright up there. */
.scrim-b::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(4,11,18,0.72) 0%,
      rgba(4,11,18,0.34) 18%,
      rgba(4,11,18,0.30) 42%,
      rgba(4,11,18,0.68) 78%,
      rgba(4,11,18,0.94) 100%);
  pointer-events: none;
}
.scrim-l::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(4,11,18,0.93) 0%, rgba(4,11,18,0.72) 38%, rgba(4,11,18,0.26) 72%, rgba(4,11,18,0.46) 100%);
  pointer-events: none;
}
/* The home hero carries its headline over a photograph whose left side is not
   uniformly dark, so it gets a left-weighted scrim on top of the usual
   top/bottom one. Adjust here rather than baking shading into the image. */
.scrim-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(4, 11, 18, 0.86) 0%,
      rgba(4, 11, 18, 0.62) 28%,
      rgba(4, 11, 18, 0.20) 56%,
      rgba(4, 11, 18, 0.10) 78%,
      rgba(4, 11, 18, 0.34) 100%),
    linear-gradient(180deg,
      rgba(4, 11, 18, 0.66) 0%,
      rgba(4, 11, 18, 0.10) 20%,
      rgba(4, 11, 18, 0.10) 58%,
      rgba(4, 11, 18, 0.72) 100%);
  pointer-events: none;
}

.scrim-full::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(4, 11, 18, 0.64);
  pointer-events: none;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: 68px;
  overflow: hidden;
  background: var(--navy-900);
}
.hero .media img { animation: kenburns 28s var(--ease) infinite alternate; }
/* Kept shallow on purpose: the hero image is composed with the planet to one
   side and clear space for the headline, and a deep zoom eats that space. */
@keyframes kenburns {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to   { transform: scale(1.075) translate3d(-1.1%, -0.8%, 0); }
}
.hero-inner { position: relative; z-index: 3; width: 100%; }

.hero-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(242, 240, 234, 0.85), rgba(242, 240, 234, 0));
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.5s var(--ease) .55s;
}
.is-ready .hero-rule { transform: scaleX(1); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 52px;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 860px) { .hero-meta { grid-template-columns: repeat(4, 1fr); } }
.hero-meta > div { padding: 22px 24px 4px 0; }

.scroll-hint {
  position: absolute;
  right: 64px; bottom: 68px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 14px;
  color: rgba(242, 240, 234, 0.5);
  writing-mode: vertical-rl;
}
@media (min-width: 1280px) { .scroll-hint { display: flex; } }
.scroll-hint i {
  display: block; width: 1px; height: 60px;
  background: linear-gradient(var(--titanium), transparent);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 62svh;
  padding-top: calc(var(--header-h) + 80px);
  padding-bottom: 66px;
  overflow: hidden;
  background: var(--navy-900);
}
@media (min-width: 768px) { .page-hero { min-height: 74svh; padding-bottom: 84px; } }
.page-hero .media img { transform: scale(1.04); filter: brightness(0.88) contrast(1.04); }
.page-hero-inner { position: relative; z-index: 3; width: 100%; }

/* About hero — the headquarters render is very wide with the seal on the right.
   Desktop keeps the seal in frame beside the headline; on a narrow portrait crop
   the seal would sit half-cut behind the text, so phones frame the entrance. */
.hero-hq .media img { object-position: 72% center; }
@media (max-width: 767px) { .hero-hq .media img { object-position: 42% center; } }

.crumb {
  display: flex; align-items: center; gap: 12px;
  color: rgba(242, 240, 234, 0.55);
  margin-bottom: 24px;
}
.crumb a:hover { color: var(--ivory); }
.crumb .sep { opacity: .45; }

/* ==========================================================================
   FULL-BLEED BAND
   ========================================================================== */

.band {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 76svh;
  padding-block: 96px;
  overflow: hidden;
  background: var(--navy-900);
  /* Crisp edge for the case where a band follows another dark section. */
  border-top: 1px solid var(--line);
}
@media (min-width: 1024px) { .band { min-height: 88svh; } }
.band-inner { position: relative; z-index: 3; width: 100%; }
.band .media img { transform: scale(1.14); }

/* ==========================================================================
   CAPABILITY SHOWCASE
   ========================================================================== */

.showcase { display: grid; gap: 46px; align-items: start; }
@media (min-width: 1024px) { .showcase { grid-template-columns: 1.05fr 1fr; gap: 68px; } }

.sc-list { border-top: 1px solid var(--line); }
.sc-item { border-bottom: 1px solid var(--line); }

.sc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 4px;
  background: none;
  border: 0;
  color: var(--fg-muted);
  font-family: var(--font-head);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  text-align: left;
  cursor: pointer;
  transition: color .4s var(--ease);
}
.sc-title { flex: 1; }
.sc-arrow {
  flex: none;
  width: 17px; height: 17px;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.sc-arrow svg { width: 100%; height: 100%; }
.sc-btn:hover { color: var(--fg); }
.sc-item.is-on .sc-btn { color: var(--fg); }
.sc-item.is-on .sc-arrow { opacity: 1; transform: none; }

/* The selected entry opens in place, so the copy sits with its own heading
   instead of in a separate block under the photograph. */
.sc-detail { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.sc-detail-inner { padding: 0 4px 26px 42px; max-width: 54ch; }
.sc-detail-inner p { color: var(--fg-muted); font-size: 0.97rem; }

.sc-stage { position: relative; }
/* Stacked, the photo goes above the list — otherwise tapping an entry changes
   an image that has already scrolled off the bottom of the screen. */
@media (max-width: 1023px) { .sc-stage { order: -1; } }
@media (min-width: 1024px) { .sc-stage { position: sticky; top: 108px; } }
.sc-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-800);
}
@media (min-width: 1024px) { .sc-figure { aspect-ratio: 1 / 1; } }
.sc-figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,11,18,0) 55%, rgba(4,11,18,0.45) 100%);
  pointer-events: none;
}
.sc-figure img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity .85s var(--ease), transform 1.7s var(--ease);
}
.sc-figure img.is-live { opacity: 1; transform: scale(1); }

/* ==========================================================================
   IMAGE TILES
   ========================================================================== */

/* ── Carousel ─────────────────────────────────────────────────────────────
   A native scroll-snap track rather than a JS slider: touch swipe, trackpad
   and keyboard scrolling all come free, and the arrows just drive scrollTo.  */
.carousel { position: relative; }

.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-track:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; }

@media (min-width: 640px)  { .carousel-track { grid-auto-columns: calc((100% - 12px) / 2); } }
@media (min-width: 1000px) { .carousel-track { grid-auto-columns: calc((100% - 24px) / 3); } }
@media (min-width: 1280px) { .carousel-track { grid-auto-columns: calc((100% - 36px) / 4); } }

/* Controls */
.carousel-nav { display: flex; align-items: center; gap: 10px; }
.car-btn {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  color: var(--fg);
  background: none;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), opacity .35s var(--ease);
}
.car-btn svg { width: 17px; height: 17px; }
.car-btn:hover:not(:disabled) { background: var(--fg); color: var(--ivory); border-color: var(--fg); }
.sec-ivory .car-btn:hover:not(:disabled) { color: var(--ivory); }
.car-btn:disabled { opacity: .28; cursor: default; }

/* Scroll position indicator */
.carousel-bar {
  position: relative;
  height: 2px;
  margin-top: 26px;
  background: var(--line);
  overflow: hidden;
}
.carousel-bar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 25%;
  background: var(--fg);
  transition: transform .25s var(--ease), width .3s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .carousel-bar i { transition: none; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  padding: 26px;
  overflow: hidden;
  background: var(--navy-800);
  isolation: isolate;
  /* A tile is always a dark photo card, even on a light section, so it pins the
     theme tokens back to their dark values rather than inheriting the surface. */
  color: var(--ivory);
  --fg:       var(--ivory);
  --fg-lead:  rgba(242, 240, 234, 0.80);
  --fg-muted: rgba(242, 240, 234, 0.74);
  --line:     rgba(184, 189, 194, 0.15);
  --accent:   var(--gold);
}
@media (min-width: 1280px) { .tile { min-height: 420px; } }
.tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.5s var(--ease);
}
.tile::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(4,11,18,0.20) 0%, rgba(4,11,18,0.54) 52%, rgba(4,11,18,0.94) 100%);
  transition: background .6s var(--ease);
}
.tile:hover img, .tile:focus-within img { transform: scale(1.11); }
.tile:hover::before, .tile:focus-within::before {
  background: linear-gradient(180deg, rgba(4,11,18,0.30) 0%, rgba(7,18,28,0.68) 48%, rgba(4,11,18,0.96) 100%);
}
.tile h3 { font-size: 1.18rem; margin-top: 10px; line-height: 1.18; }
.tile p {
  font-size: 0.88rem;
  color: rgba(242, 240, 234, 0.74);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .75s var(--ease), opacity .5s var(--ease), margin-top .75s var(--ease);
}
.tile:hover p, .tile:focus-within p { max-height: 230px; opacity: 1; margin-top: 13px; }
.tile .tile-rule {
  height: 2px; width: 40px;
  background: var(--ivory);
  margin-top: 16px;
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform .65s var(--ease);
}
.tile:hover .tile-rule, .tile:focus-within .tile-rule { transform: scaleX(1); }
@media (hover: none) {
  .tile p { max-height: 230px; opacity: 1; margin-top: 13px; }
  .tile .tile-rule { transform: scaleX(1); }
}

/* ==========================================================================
   SPLIT — half photograph, half copy
   ========================================================================== */

.split { display: grid; align-items: stretch; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }
.split-media { position: relative; min-height: 400px; overflow: hidden; }
@media (min-width: 960px) { .split-media { min-height: 660px; } }
.split-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-copy { display: flex; flex-direction: column; justify-content: center; padding: 56px 0; }
@media (min-width: 960px) { .split-copy { padding: 80px 0 80px 68px; } }
@media (min-width: 1280px) { .split-copy { padding-left: 100px; } }

/* Full-bleed variant (homepage "Who we are"): no outer .wrap, so the photo runs to
   the viewport edge and meets the sections above and below with no gap. The copy
   column keeps inner padding so text never touches the screen edge. */
.split-bleed .split-copy { padding: 56px 22px; }
@media (min-width: 768px)  { .split-bleed .split-copy { padding: 72px 40px; } }
@media (min-width: 960px)  { .split-bleed .split-copy { padding: 80px 64px 80px 68px; } }
@media (min-width: 1280px) { .split-bleed .split-copy { padding-left: 100px; } }
.split-bleed .split-copy > * { max-width: 620px; }

/* ==========================================================================
   PROCESS
   ========================================================================== */

.steps { display: grid; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding: 32px 26px 32px 0; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .step { min-height: 250px; } }
.step::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  height: 1px; width: 0;
  background: var(--fg);
  transition: width 1.1s var(--ease);
}
.step.is-in::before { width: 100%; }
.step h3 { font-size: 1.1rem; margin-top: 16px; }
.step p { font-size: 0.92rem; margin-top: 12px; color: var(--fg-muted); }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px 22px; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
.stat-num {
  font-family: var(--font-head);
  font-size: clamp(2.8rem, 5.4vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-num sup { font-size: 0.38em; color: var(--gold); top: -1.2em; margin-left: 3px; }
.stat-rule { height: 1px; background: var(--line); margin-top: 20px; }
.stat-lab { margin-top: 18px; color: var(--fg-muted); font-size: 0.88rem; line-height: 1.5; max-width: 26ch; }

/* ==========================================================================
   DETAIL ROWS
   ========================================================================== */

.row {
  display: grid;
  gap: 34px;
  padding-block: 64px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
@media (min-width: 1024px) { .row { grid-template-columns: 0.8fr 1.2fr; gap: 72px; padding-block: 88px; } }
.row-list li {
  display: flex;
  gap: 15px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.97rem;
  color: var(--fg-lead);
}
.row-list li svg { width: 14px; height: 14px; flex: none; margin-top: 6px; color: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--line);
  color: var(--fg-muted);
}

/* ==========================================================================
   QUOTE
   ========================================================================== */

.quote {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 3.1rem);
  line-height: 1.18;
  letter-spacing: -0.032em;
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 27px 0;
  background: none;
  border: 0;
  color: inherit;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  text-align: left;
  cursor: pointer;
  transition: color .35s var(--ease);
}
.acc-btn:hover, .acc-btn[aria-expanded="true"] { color: var(--electric); }
.acc-btn .plus { position: relative; width: 14px; height: 14px; flex: none; }
.acc-btn .plus::before, .acc-btn .plus::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .45s var(--ease), opacity .35s var(--ease);
}
.acc-btn .plus::before { left: 0; top: 6.5px; width: 14px; height: 1.5px; }
.acc-btn .plus::after  { top: 0; left: 6.5px; height: 14px; width: 1.5px; }
.acc-btn[aria-expanded="true"] .plus::after { transform: rotate(90deg); opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.acc-panel-inner { padding-bottom: 30px; max-width: 74ch; }

/* ==========================================================================
   FORMS
   ========================================================================== */

.field { display: block; margin-bottom: 26px; }
.field .lbl {
  display: block;
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.input {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.02rem;
  transition: border-color .35s var(--ease);
}
.input::placeholder { color: var(--fg-faint); }
.input:focus { outline: none; border-bottom-color: var(--electric); }
select.input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A45C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 15px 15px;
}
select.input option { background: var(--graphite); color: var(--ivory); }
/* the inline chevron is baked into a data URI, so it needs a light-surface twin */
.sec-ivory select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364727E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.sec-ivory select.input option, .sec-ivory select.input optgroup { background: var(--ivory); color: var(--navy); }
textarea.input { resize: vertical; min-height: 130px; }
.input.has-error { border-bottom-color: #E2574C; }
.err { display: none; margin-top: 8px; font-size: 0.8rem; color: #E2574C; }
.err.is-visible { display: block; }
.form-status {
  display: none;
  margin-top: 26px;
  padding: 18px 20px;
  border-left: 2px solid var(--fg-muted);
  background: rgba(128, 140, 150, 0.10);
  font-size: 0.94rem;
}
.form-status.is-visible { display: block; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { position: relative; background: var(--navy-900); }
.footer-grid { display: grid; gap: 46px; padding-block: 86px; }
@media (min-width: 760px)  { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: 1.8fr 1fr 1fr 1.1fr; gap: 60px; } }
.footer-h {
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--titanium);
  margin-bottom: 22px;
}
.footer-list { display: grid; gap: 13px; }
.footer-list a { color: rgba(242, 240, 234, 0.6); font-size: 0.94rem; transition: color .35s var(--ease), padding-left .35s var(--ease); }
.footer-list a:hover { color: var(--ivory); padding-left: 6px; }
.footer-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-block: 28px;
  border-top: 1px solid var(--line-soft);
  color: rgba(242, 240, 234, 0.42);
}
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  color: var(--fg-muted);     /* follows the surface — ivory icons vanish on ivory */
  transition: color .4s var(--ease), border-color .4s var(--ease), background-color .4s var(--ease);
}
.social:hover { color: var(--navy); background: var(--fg); border-color: var(--fg); }
.social svg { width: 16px; height: 16px; }
/* icon shown before its profile exists: same look, but not a link, so no hover state */
span.social.is-pending { cursor: default; }
span.social.is-pending:hover { color: var(--fg-muted); background: none; border-color: var(--line); }

.brand-rule {
  display: flex; align-items: center; gap: 22px;
  padding-block: 24px;
  border-top: 1px solid var(--line-soft);
  color: rgba(242, 240, 234, 0.48);
}
.brand-rule hr { flex: 1; height: 1px; border: 0; background: var(--line-soft); margin: 0; }

/* ==========================================================================
   MOTION
   ========================================================================== */

.rv { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv[data-d="1"] { transition-delay: .09s; }
.rv[data-d="2"] { transition-delay: .18s; }
.rv[data-d="3"] { transition-delay: .27s; }
.rv[data-d="4"] { transition-delay: .36s; }
.rv[data-d="5"] { transition-delay: .45s; }
.rv[data-d="6"] { transition-delay: .54s; }

/* Photograph reveal — a curtain wipes off the image, which settles out of a
   slow push-in. The curtain is a pseudo-element rather than a clip-path on the
   container: an element clipped to zero height is not reported as intersecting,
   so IntersectionObserver would never fire and the photo would stay hidden. */
.rv-img { position: relative; overflow: hidden; }
.rv-img::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background: var(--curtain);
  transform: scaleY(1);
  transform-origin: bottom center;
  transition: transform 1.25s var(--ease2);
}
.rv-img.is-in::after { transform: scaleY(0); }
.rv-img img { transform: scale(1.2); transition: transform 1.9s var(--ease); }
.rv-img.is-in img { transform: scale(1); }

/* Headline lines rise into place */
.rv-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.rv-line > span { display: block; transform: translateY(108%); transition: transform 1.15s var(--ease); }
.is-ready .rv-line > span, .rv-line.is-in > span { transform: none; }
.rv-line:nth-of-type(2) > span { transition-delay: .1s; }
.rv-line:nth-of-type(3) > span { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .rv, .rv-img, .rv-line > span {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
  .rv-img::after { display: none !important; }
  .hero .media img { animation: none !important; transform: scale(1.02) !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Marquee ----------------------------------------------------------------- */
.ticker { overflow: hidden; border-block: 1px solid var(--line-soft); padding-block: 19px; background: var(--navy-900); }
.ticker-track { display: flex; width: max-content; animation: ticker 52s linear infinite; }
.ticker-track > div { display: flex; align-items: center; }
.ticker span { padding-inline: 32px; color: rgba(242, 240, 234, 0.45); white-space: nowrap; }
.ticker i { width: 4px; height: 4px; background: var(--titanium); opacity: .55; transform: rotate(45deg); flex: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* Utility ----------------------------------------------------------------- */
.prose { max-width: 66ch; }
.rule { height: 1px; border: 0; background: var(--line); margin: 0; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 13px 22px; background: var(--electric); color: #fff;
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
}
.skip:focus { left: 14px; top: 14px; }

/* ==========================================================================
   STAT STRIP — the light band of figures directly beneath the hero
   ========================================================================== */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--line);
}
@media (min-width: 860px) { .stat-strip { grid-template-columns: repeat(4, 1fr); } }
.stat-cell {
  padding: 34px 28px 36px;
  border-right: 1px solid var(--line);
  transition: background-color .45s var(--ease);
}
/* two-up on small screens: rule between the rows */
@media (max-width: 859px) { .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.stat-cell:hover { background: rgba(7, 18, 28, 0.035); }
.strip-num {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 3.4vw, 2.9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.strip-num sup { font-size: 0.42em; color: var(--accent); top: -0.95em; margin-left: 2px; }
.strip-lab { margin-top: 12px; font-size: 0.9rem; line-height: 1.45; color: var(--fg-muted); max-width: 22ch; }

/* ==========================================================================
   MEGA MENU — full-bleed panel under the header, desktop only
   ========================================================================== */

/* A full-width panel needs the header as its positioning context; a compact
   dropdown needs the nav item itself. */
.nav-item { position: static; display: inline-flex; }
.nav-item.has-drop { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 8px; }
.nav-caret {
  width: 9px; height: 9px; flex: none;
  transition: transform .4s var(--ease);
  opacity: .7;
}
.nav-item.is-open > a .nav-caret { transform: rotate(180deg); }

.mega {
  position: absolute;
  top: 100%; left: 0; right: 0;
  z-index: 95;
  display: none;
  background: var(--navy-900);
  border-top: 1px solid var(--line);
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
@media (min-width: 1200px) { .mega { display: block; } }
.mega.is-open { opacity: 1; transform: none; }
.mega[hidden] { display: none; }

/* Every panel shares one shape: an intro column, a grid of link columns and an
   optional photo feature. The intro and feature drop out on narrower desktops
   so the links keep their room. */
.mega-inner {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 48px;
  align-items: start;
  padding-block: 40px 46px;
}
@media (min-width: 1200px) { .mega-inner { grid-template-columns: minmax(210px, 0.8fr) 3fr; } }
@media (min-width: 1360px) { .mega-inner.has-feature { grid-template-columns: minmax(210px, 0.8fr) 2.3fr 0.95fr; } }

.mega-intro {
  display: none;
  align-self: stretch;
  padding-right: 40px;
  border-right: 1px solid var(--line);
}
@media (min-width: 1200px) { .mega-intro { display: block; } }
.mega-intro .mega-cat { padding-bottom: 0; border-bottom: 0; }
.mega-title {
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ivory);
}
.mega-blurb { margin-top: 10px; font-size: 0.88rem; line-height: 1.55; color: var(--fg-muted); }
.mega-intro .alink { margin-top: 22px; white-space: nowrap; }

.mega-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); column-gap: 40px; }
.mega-col { display: flex; flex-direction: column; min-width: 0; }
.mega-col .mega-cat { margin-bottom: 4px; }

/* A tall panel must never run off a short laptop screen */
.mega { max-height: calc(100svh - var(--header-h)); overflow-y: auto; }

/* Capabilities: two rows of five, each capability heading its own services */
.mega-services { padding-block: 34px 0; }
.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 30px;
}
.svc-col { min-width: 0; }
.svc-head {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 3.5rem;              /* room for a two-line title, so every rule lines up */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ivory);
  transition: border-color .35s var(--ease);
}
.svc-head:hover { border-bottom-color: var(--ivory); }
.svc-list { margin-top: 8px; }
.svc-list a {
  display: block;
  padding: 4px 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--fg-muted);
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.svc-list a:hover { color: var(--ivory); transform: translateX(4px); }

.mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 30px;
  padding-block: 20px 24px;
  border-top: 1px solid var(--line);
}
.mega-foot p { font-size: 0.88rem; color: var(--fg-muted); }
.mega-foot .alink { flex: none; white-space: nowrap; }

/* Industries: twenty names, no descriptions */
.mega-grid.is-compact .mega-link { padding: 10px 0; }
.mega-grid.is-compact .mega-link b { font-size: 0.88rem; font-weight: 500; }

.mega-cat {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--kicker-fg);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.mega-link {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: padding-left .35s var(--ease);
}
.mega-link:last-child { border-bottom: 0; }
.mega-link b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ivory);
}
.mega-link b svg {
  width: 13px; height: 13px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mega-link span {
  display: block;
  margin-top: 4px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--fg-muted);
}
.mega-link:hover { padding-left: 8px; }
.mega-link:hover b svg, .mega-link:focus-visible b svg { opacity: 1; transform: none; }

/* Feature column */
.mega-feature {
  display: none;
  padding-left: 40px;
  border-left: 1px solid var(--line);
}
@media (min-width: 1360px) { .mega-feature { display: block; } }
.mega-feature-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--navy-800);
}
.mega-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mega-feature:hover .mega-feature-img img { transform: scale(1.06); }
/* a paragraph, not a heading: it sits in the header before each page's h1 */
.mega-feature-h {
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.mega-feature .alink { white-space: nowrap; }
.mega-feature p { font-size: 0.86rem; margin-top: 8px; color: var(--fg-muted); }

/* Header goes solid while the panel is open, so the two read as one surface. */
.site-header.is-menu-open {
  background: var(--navy-900);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header.is-menu-open::before { opacity: 0; }

/* ==========================================================================
   DRAWER — expandable capabilities group (mobile)
   ========================================================================== */

.drawer-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-row .drawer-link { flex: 1; border-bottom: 0; }
.drawer-toggle {
  flex: none;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  color: var(--titanium);
  cursor: pointer;
}
.drawer-toggle .plus { position: relative; width: 14px; height: 14px; display: block; }
.drawer-toggle .plus::before, .drawer-toggle .plus::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.drawer-toggle .plus::before { left: 0; top: 6.5px; width: 14px; height: 1.5px; }
.drawer-toggle .plus::after  { top: 0; left: 6.5px; height: 14px; width: 1.5px; }
.drawer-toggle[aria-expanded="true"] .plus::after { transform: rotate(90deg); opacity: 0; }

.drawer-sub { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.drawer-sub-inner { padding: 6px 0 16px 34px; }
.drawer-sub a {
  display: block;
  padding: 11px 0;
  font-size: 0.95rem;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--line-soft);
}
.drawer-sub a:last-child { border-bottom: 0; }
.drawer-sub a:hover { color: var(--ivory); }

/* ==========================================================================
   TEAM
   ========================================================================== */

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

.person {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 30px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.35);
  transition: border-color .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);
}
.sec-navy .person, .sec-deep .person { background: rgba(184, 189, 194, 0.04); }
.person:hover { transform: translateY(-4px); border-color: var(--fg-muted); }

/* Portrait slot. Ships as a monogram; drop an <img> in its place and it takes
   the same square without any other change. */
.person-face {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--navy);
  margin-bottom: 22px;
}
.person-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-face .monogram {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ivory);
  opacity: .92;
}
.person-face .seal {
  position: absolute;
  width: 128%;
  opacity: .07;
  pointer-events: none;
}

.person-name { font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.014em; }
.person-role {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kicker-fg);
  margin-top: 7px;
}
.person-note { font-size: 0.89rem; line-height: 1.55; color: var(--fg-muted); margin-top: 14px; }
.person-link {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.person-link svg { width: 12px; height: 12px; transition: transform .4s var(--ease); }
.person:hover .person-link svg { transform: translateX(4px); }

/* A seat that has not been filled yet — same card, quieter. */
.person-tba .person-name { color: var(--fg-muted); font-weight: 500; }
.person-tba .person-face { opacity: .82; }


/* ==========================================================================
   DROPDOWN — compact header menu (Insights)
   ========================================================================== */

.dropdown {
  position: absolute;
  top: 100%;
  left: -24px;
  z-index: 95;
  display: none;
  min-width: 310px;
  padding: 10px;
  background: var(--navy-900);
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
@media (min-width: 1200px) { .dropdown { display: block; } }
.dropdown.is-open { opacity: 1; transform: none; }
.dropdown[hidden] { display: none; }

/* The panel lives inside .nav, so it inherits the tracked uppercase treatment
   meant for the nav items themselves — undo it here. */
.nav .drop-link {
  display: block;
  padding: 15px 16px;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  transition: background-color .3s var(--ease);
}
.nav .drop-link::after { display: none; }
.nav .drop-link:hover { color: inherit; }
.drop-link:hover { background: rgba(184, 189, 194, 0.06); }
.drop-link b {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ivory);
}
.drop-link b svg {
  width: 13px; height: 13px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.drop-link:hover b svg, .drop-link:focus-visible b svg { opacity: 1; transform: none; }
.drop-link span {
  display: block;
  margin-top: 4px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ==========================================================================
   INSIGHTS — paper list and post grid
   ========================================================================== */

.paper-list { border-top: 1px solid var(--line); }
.paper {
  display: grid;
  gap: 6px 30px;
  padding: 30px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
@media (min-width: 900px) { .paper { grid-template-columns: 150px 1fr 190px; align-items: start; } }
.paper:hover { padding-left: 12px; }
.paper-cat {
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kicker-fg);
  padding-top: 5px;
}
.paper-title { font-family: var(--font-head); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.22; }
.paper-sum { font-size: 0.93rem; color: var(--fg-muted); margin-top: 9px; max-width: 62ch; }
.paper-meta { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .paper-meta { align-items: flex-end; text-align: right; } }
.paper-stat { font-size: 0.8rem; color: var(--fg-muted); }
.paper-get {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}
.paper-get svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }
.paper:hover .paper-get svg { transform: translateX(4px); }

/* Post grid ---------------------------------------------------------------- */
.post-grid { display: grid; gap: 14px; }
@media (min-width: 700px)  { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

.post { display: flex; flex-direction: column; }
.post-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.post-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.post:hover .post-img img { transform: scale(1.06); }
.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kicker-fg);
}
.post-meta i { width: 3px; height: 3px; background: currentColor; transform: rotate(45deg); flex: none; }
.post h3, .post h2 { font-size: 1.16rem; margin-top: 12px; line-height: 1.24; }
.post p { font-size: 0.92rem; color: var(--fg-muted); margin-top: 10px; }
.post-more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.post-more svg { width: 13px; height: 13px; transition: transform .4s var(--ease); }
.post:hover .post-more svg { transform: translateX(4px); }

/* Featured post ------------------------------------------------------------ */
.post-feature { display: grid; gap: 34px; align-items: center; }
@media (min-width: 960px) { .post-feature { grid-template-columns: 1.15fr 1fr; gap: 56px; } }
.post-feature .post-img { aspect-ratio: 16 / 10; }
.post-feature h3, .post-feature h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); letter-spacing: -0.026em; }
.post-feature p { font-size: 1.02rem; }

/* ==========================================================================
   CASE STUDIES — one study per row: photograph beside problem / approach / outcome
   ========================================================================== */

.case-list { border-top: 1px solid var(--line); }
.case {
  display: grid;
  gap: 30px;
  padding-block: 56px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) {
  .case { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; padding-block: 72px; }
}
.case-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-800); }
.case-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-title { margin-top: 16px; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -0.026em; line-height: 1.12; }
.case-sum { margin-top: 16px; font-size: 1.02rem; color: var(--fg-lead); max-width: 62ch; }
.case-cols {
  display: grid;
  gap: 22px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 640px) { .case-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }
.case-cols p:not(.label) { font-size: 0.92rem; line-height: 1.6; color: var(--fg-muted); }
.case .proj-tech { margin-top: 26px; }
/* sector and capabilities can be long; let the meta line wrap on narrow screens */
.case .post-meta { flex-wrap: wrap; row-gap: 6px; }

/* ==========================================================================
   PROJECTS
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font-family: var(--font-head);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 15px;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  background: none;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.filter:hover { color: var(--fg); border-color: var(--fg-muted); }
.filter[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--ivory); }
.sec-ivory .filter[aria-pressed="true"] { color: var(--ivory); }

/* List view: one project per full-width row, image beside the copy. */
.proj-list { border-top: 1px solid var(--line); }
.proj-list > [hidden] { display: none; }

.proj {
  display: grid;
  gap: 22px;
  padding: 30px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
@media (min-width: 760px)  { .proj { grid-template-columns: 300px 1fr; gap: 40px; align-items: start; } }
@media (min-width: 1180px) { .proj { grid-template-columns: 60px 340px 1fr; gap: 44px; } }
.proj:hover { padding-left: 12px; }

.proj-num {
  display: none;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}
@media (min-width: 1180px) { .proj-num { display: block; } }

.proj-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-800); }
.proj-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.proj:hover .proj-img img { transform: scale(1.06); }

.proj-body { display: flex; flex-direction: column; }
.proj-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: var(--font-head);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kicker-fg);
}
.proj h3 { font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-top: 11px; line-height: 1.2; }
.proj p { font-size: 0.94rem; color: var(--fg-muted); margin-top: 12px; max-width: 68ch; }
.proj-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.proj-tech span {
  font-family: var(--font-head);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line);
  color: var(--fg-muted);
}
.filter-empty { display: none; padding: 60px 0; color: var(--fg-muted); }
.filter-empty.is-visible { display: block; }

/* ==========================================================================
   MILESTONES
   ========================================================================== */

.timeline { border-top: 1px solid var(--line); }
.tl {
  display: grid;
  gap: 6px 34px;
  padding: 26px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
@media (min-width: 820px) { .tl { grid-template-columns: 120px 1fr; align-items: baseline; } }
@media (min-width: 1180px) { .tl { grid-template-columns: 120px 340px 1fr; gap: 6px 44px; } }
.tl:hover { padding-left: 12px; }
.tl-year {
  font-family: var(--font-head);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.tl-title { font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; letter-spacing: -0.014em; }
.tl-note { font-size: 0.92rem; color: var(--fg-muted); max-width: 62ch; }

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 880px) { .trust { grid-template-columns: repeat(6, 1fr); } }
.trust-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  background: var(--ivory);
  transition: background-color .4s var(--ease);
}
.sec-bone .trust-cell { background: #EAE9E4; }
.trust-cell img {
  /* the marks are pre-tinted to a single navy in tools/logo.js, so no filter here */
  height: 58px;
  width: auto;
  object-fit: contain;
  opacity: .78;
  transition: opacity .4s var(--ease);
}
.trust-cell:hover img { opacity: 1; }

/* Team portraits replace the monogram treatment */
.person-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   LINK LIST — numbered rows (homepage Training section)
   ========================================================================== */

.tlist { border-top: 1px solid var(--line); }
.tlist-link {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease);
}
.tlist-link:hover { padding-left: 12px; }
.tlist-link b {
  display: block;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.016em;
  line-height: 1.25;
  color: var(--fg);
}
.tlist-link em { display: block; margin-top: 3px; font-style: normal; font-size: 0.9rem; color: var(--fg-muted); }
.tlist-link svg { width: 15px; height: 15px; align-self: center; opacity: .5; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.tlist-link:hover svg { opacity: 1; transform: translateX(4px); }

/* In-page anchors clear the fixed header */
.anchor { scroll-margin-top: 100px; }