:root {
  --navy: #00051b;
  --stone: #d8d3d3;
  --stone-2: #dddddd;
  --blue: #0e2454;
  --accent: #69def5;
  --off-white: #f9ffff;
  --muted: rgba(238, 238, 238, 0.6);
  --muted-navy: rgba(0, 5, 27, 0.55);

  --header-fg: var(--off-white);
  --header-panel-bg: var(--navy);
  --footer-bg: var(--navy);

  --font-word: 'Zen Dots', sans-serif;
  --font-body: 'Space Mono', monospace;
  --font-code: 'Space Grotesk', sans serif;

  --arrow-weight: 2px;
  --arrow-size: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --content-width: 1300px;
  --content-gutter: max(24px, calc((100vw - var(--content-width)) / 2));
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--stone);
  color: var(--navy);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

.eyebrow {
  font-family: var(--font-word);
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--off-white);
}

.arrow { display: inline-block; transition: transform 0.3s var(--ease); }
a:hover .arrow { transform: translate(2px, -2px); }

/* Generic scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --- TOP NAVIGATION --- */
.article-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--content-gutter);
  background: transparent;
  z-index: 100;
}

.nav-left, .nav-right { display: flex; align-items: center; flex: 1; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; gap: 32px; }

.logo-link { display: flex; align-items: center; text-decoration: none; }

.logo-word-small {
  font-family: var(--font-word);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  padding-left: 8px;
}

.logo-divider { width: 1px; height: 20px; background-color: var(--navy); }
.logo-mark { width: 60px; height: 50px; }

.article-nav.nav-center {
  display: flex;
  font-size: 0.8rem;
  justify-content: center;
  gap: 48px;
  flex: 2;
}

.article-nav a,
.nav-right .nav-link {
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
}

.article-nav a:hover,
.nav-right .nav-link:hover { opacity: 0.6; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
  position: relative;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(320px, 84vw);
  height: 100%;
  background: var(--header-panel-bg);
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 100px 32px 40px;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}

.nav-panel.is-open { transform: translateX(0); }
.nav-panel-links { display: flex; flex-direction: column; gap: 28px; }

.nav-panel-links a {
  font-family: var(--font-word);
  color: var(--header-fg);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-panel-section { display: flex; flex-direction: column; gap: 18px; }

.nav-panel-title {
  font-family: var(--font-body);
  color: var(--accent);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-panel-links a:hover { color: var(--accent); }

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 5, 27, 0.55);
  z-index: 180;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* lock page scroll while the nav panel is open */
html.nav-locked,
html.nav-locked body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.nav-panel { overscroll-behavior: contain; }

/* close button: sits above the first item ("Company"), icon flush with the left content edge */
.nav-panel-close {
  position: absolute;
  top: 31px;        /* icon top at 40px, leaving ~34px of space above the 100px content start */
  left: 23px;       /* 32px content edge - 9px (button is 44px, icon is 26px) */
  right: auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  color: var(--header-fg);
  cursor: pointer;
  z-index: 1;
}
.nav-panel-close svg { width: 26px; height: 26px; }
.nav-panel-close:hover { color: var(--accent); }

/* --- HERO --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--stone);
  overflow: hidden;
  padding: 140px var(--content-gutter) 60px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.hero-title {
  font-family: var(--font-word);
  color: var(--navy);
  font-size: clamp(2rem, 4.4vw, 2.2rem);
  line-height: 1.15;
  font-weight: 400;
}

.hero-title span { display: block; }

.hero-model {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.hero-model iframe {
  width: 300%;
  height: 600px;
  border: none;
  display: block;
  background: transparent;
  margin-left: -75%;        /* shift left; increase for more */
}

/* --- MISSION / CTA --- */
.mission {
  background: var(--stone-2);
  padding: 100px var(--content-gutter) 90px;
}

.mission-head.engine-title{
  padding-bottom: 20px;
}
.mission-text {
  font-family: var(--font-body);
  color: var(--blue);
  max-width: 400px;
  line-height: 1.7;
  font-size: 0.94rem;
}

.mission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 36px;
}

.mission-btn {
  --edge: rgba(14, 36, 84, 0.55);
  --tick: 10px;    /* length of each vertical tick */
  --arm: 10px;     /* length of the horizontal arm on hover */
  --out: -4px;     /* how far the ticks sit outside the button box */

  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-family: var(--font-body);
  font-size: 0.90rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  transition: color 0.35s var(--ease);
}

/* accent fill: grows from the left on hover */
.mission-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
  z-index: -1;
}

/* corner ticks: 4 vertical segments + 4 horizontal arms (arms start at 0 width) */
.mission-btn::after {
  content: '';
  position: absolute;
  inset: var(--out);
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--edge), var(--edge)), linear-gradient(var(--edge), var(--edge)),
    linear-gradient(var(--edge), var(--edge)), linear-gradient(var(--edge), var(--edge)),
    linear-gradient(var(--edge), var(--edge)), linear-gradient(var(--edge), var(--edge)),
    linear-gradient(var(--edge), var(--edge)), linear-gradient(var(--edge), var(--edge));
  background-position:
    left top, right top, left bottom, right bottom,   /* vertical ticks */
    left top, right top, left bottom, right bottom;   /* horizontal arms */
  background-size:
    1px var(--tick), 1px var(--tick), 1px var(--tick), 1px var(--tick),
    0 1px, 0 1px, 0 1px, 0 1px;
  transition: background-size 0.35s var(--ease);
}

.mission-btn:hover { color: var(--navy); }
.mission-btn:hover::before { transform: scaleX(1); }

.mission-btn:hover::after {
  background-size:
    1px var(--tick), 1px var(--tick), 1px var(--tick), 1px var(--tick),
    var(--arm) 1px, var(--arm) 1px, var(--arm) 1px, var(--arm) 1px;
}

/* --- STACK --- */
.stack {
  background: var(--navy);
  padding: 60px var(--content-gutter) 100px;
}

.stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 60px;
}

.stack-head .eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.075rem;
  text-transform: uppercase;
}
.stack-link {
  font-family: var(--font-body);
  color: var(--off-white);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}

.stack-link:hover { color: var(--off-white); }

.stack-subtext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 36px 0 44px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--off-white);
}

.stack-subtext .right { text-align: right; }
.stack-subtext .center { text-align: center; line-height: 1.5; }

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
}

.typewriter.is-visible {
  width: 100%;
  animation: typewriter 1s steps(var(--chars, 20), end) forwards;
}

@keyframes typewriter { from { width: 0; } to { width: 100%; } }

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}

/* Base Tile Styling */
.tech-tile { 
  position: relative; 
  width: 100%; 
  border-radius: 8px;
  overflow: hidden; 
}

/* NsuGuard: Spans full width at the top */
.tech-tile--wide { 
  grid-column: 1 / -1; 
  height: 450px; 
}

/* 3 Columns under NsuGuard (Aluka, Nucleus OS, URISA) */
.tech-tile--col {
  height: 440px;
}

/* Media container to fill the full tile height */
.tech-tile-media {
  position: relative;
  width: 100%;
  height: 100%; 
  overflow: hidden;

}

.tech-tile[href*="product=vitapulse"] .tech-tile-media img {
  object-fit: cover; /* Ensures the image fills the container */
  object-position: center 30%; /* Adjust the percentage to move the image up/down */
}

/* 3. Force image to cover the full container without distorting */
.tech-tile-media img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease); 
}

.tech-tile-media video { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease); 
}

.tech-tile.is-hovered .tech-tile-media img,
html:not(.hover-js) .tech-tile:hover .tech-tile-media img { transform: scale(1.06); }

.tech-tile-media::after {
  content: '';
  position: absolute; 
  inset: 0;
  background: linear-gradient(to top, rgba(5,7,12,0.52) 0%, rgba(5,7,12,0.15) 55%, transparent 75%);
}

.tech-tile-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 30px;
  z-index: 1;
}

.tile-label {
  font-family: var(--font-word);
  color: var(--off-white);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  margin-bottom: 0px;
  transform: translateY(18px); /* Positioned lower initially */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin-bottom 0.4s ease;
}

.tech-tile.is-hovered .tile-label,
html:not(.hover-js) .tech-tile:hover .tile-label {
  transform: translateY(0); /* Rises up on hover */
  margin-bottom: 8px;
}

/* 2. Description Typewriter animation */
.tile-desc {
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.55;
  max-width: 460px;
  margin-bottom: 0;
  
  /* Initial hidden state */
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  opacity: 0;
  border-right: 2px solid transparent; /* Typewriter cursor */
}

.tech-tile.is-hovered .tile-desc,
html:not(.hover-js) .tech-tile:hover .tile-desc {
  opacity: 1;
  animation: 
    typewriter 0.7s steps(30, end) 0.1s forwards,
    blinkCursor 0.6s step-end infinite;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

/* @keyframes blinkCursor {
  from, to { border-color: transparent; }
  50% { border-color: var(--teal); }
} */

/* 3. Inclined Arrow with adjustable weight */
.tile-arrow {
  position: absolute;
  right: 30px;
  bottom: 30px;
  width: var(--arrow-size);
  height: var(--arrow-size);
  
  /* SVG Stroke styling */
  stroke: var(--off-white);
  stroke-width: var(--arrow-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
  
  /* Hidden & shifted slightly down-left initially */
  transform: translate(-6px, 6px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Hover Slide-In */
.tech-tile.is-hovered .tile-arrow,
html:not(.hover-js) .tech-tile:hover .tile-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.tech-interaction-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 600px;
  padding: 0;
}

/* --- ENGINES: WORKBENCH / URISA --- */
.engines {
  background: var(--stone-2);
}

.engine-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch; /* Matches height of text area to the media image */
  gap: 40px;
  padding: 56px var(--content-gutter);
  overflow: hidden;
}

.engine-divider {
  display: block;
  border-bottom: 1px solid var(--muted-navy);
  margin-left: var(--content-gutter);
  margin-right: var(--content-gutter);
}

.engine-divider.sub {
  margin-top: 0;
}

.engine-row::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--navy);
  transition: height 0.6s var(--ease);
  z-index: 0;
}

.engine-row.is-hovered::before,
html:not(.hover-js) .engine-row:hover::before { height: 100%; }

.engine-text, .engine-media { position: relative; z-index: 1; }

/* Forces title to top and info group to bottom of the grid row */
.engine-text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.engine-title {
  font-family: var(--font-word);
  color: var(--navy);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 0;
  transition: color 0.4s var(--ease);
}

/* Container for description + hidden CTA link */
.engine-info-group {
  position: relative;
}

.engine-desc {
  font-family: var(--font-body);
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 360px;
  text-transform: uppercase;
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

/* On hover, text shifts up and changes color */
.engine-row.is-hovered .engine-title,
.engine-row.is-hovered .engine-desc,
html:not(.hover-js) .engine-row:hover .engine-title,
html:not(.hover-js) .engine-row:hover .engine-desc { 
  color: var(--off-white); 
}

/* On hover, nudge the description up just enough to create space */
.engine-row.is-hovered .engine-desc,
html:not(.hover-js) .engine-row:hover .engine-desc {
  color: var(--off-white);
  transform: translateY(-16px); 
}

/* Link + arrow revealed under the description on hover */
.engine-cta {
  position: absolute;
  top: 100%;
  margin-top: 6px;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transform: translateY(12px);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
  pointer-events: none; /* Prevents accidental clicks while hidden */
}

.engine-cta svg {
  width: var(--arrow-size);
  height: var(--arrow-size);
  stroke: currentColor;
  stroke-width: var(--arrow-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.engine-row.is-hovered .engine-cta,
html:not(.hover-js) .engine-row:hover .engine-cta {
  opacity: 1;
  transform: translateY(0);
}

.engine-media { 
  width: 650px;
  height: 230px; 
  overflow: hidden; 
  display: flex;
  align-items: center;
}

.engine-media img { 
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease); 
}

.engine-row.is-hovered .engine-media img,
html:not(.hover-js) .engine-row:hover .engine-media img { 
  transform: scale(1.04); 
}

/* --- SYSTEMS --- */
.systems {
  background: var(--navy);
  padding: 60px var(--content-gutter) 100px;
  border-top: 1px solid rgba(249, 255, 255, 0.12);
}

.systems-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 60px;
}

.systems-head .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.075rem;
  text-transform: uppercase;
}

.systems-link {
  font-family: var(--font-body);
  color: var(--off-white);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}

.systems-link:hover { color: var(--off-white); }

.systems-subtext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  padding: 36px 0 44px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--off-white);
}

.systems-subtext .right { text-align: right; }
.systems-subtext .center { text-align: center; line-height: 1.5; }

.systems-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 1280px;
  margin: 0 auto;
}

.systems-grid .tech-tile {
  height: 460px;
}

/* --- DISPATCHES --- */
/* ==========================================================
   Dispatches: a numbered ledger. Rows are built in script.js
   from news/index_news.json (title, link, image, alt; optional
   category + date are shown as metadata when present).
   ========================================================== */

.dispatches {
  background: var(--navy);
  padding: 60px var(--content-gutter) 100px;
}

/* ---------- Header ---------- */

.dispatches-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 60px;
}

.dispatches-head .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.075rem;
  text-transform: uppercase;
}

.dispatches-link {
  font-family: var(--font-body);
  color: var(--off-white);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.dispatches-link:hover { color: var(--accent); }

/* ---------- Ledger ---------- */

#dispatchesList {
  --rule: rgba(249, 255, 255, 0.18);
  border-top: 1px solid var(--rule);
}

.dispatch-row {
  --thumb: 260px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) var(--thumb);
  column-gap: 32px;
  align-items: start;
  padding: 24px;
  border-bottom: 1px solid var(--rule);
}

/* off-white fill rising from the bottom (same move as the engine rows) */
.dispatch-row::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--off-white);
  transition: height 0.6s var(--ease);
  z-index: -1;
}

.dispatch-num {
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  transition: color 0.4s var(--ease);
}

.dispatch-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;     /* title/meta sit at the top, arrow at the bottom, level with the image */
  max-width: 560px;
}

.dispatch-title {
  font-family: var(--font-body);
  color: var(--off-white);
  text-transform: uppercase;
  font-size: 0.94rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  transition: color 0.4s var(--ease);
}

.dispatch-meta {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}

/* CTA label (Watch Here / Read More) + arrow: hidden until the row is active */
.dispatch-cta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: transform 0.4s var(--ease), opacity 0.3s ease;
}

.dispatch-arrow {
  width: var(--arrow-size);
  height: var(--arrow-size);
  stroke: currentColor;
  stroke-width: var(--arrow-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dispatch-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dispatch-media img {
  transition: transform 0.8s var(--ease);
}

/* ---------- Active state (.is-hovered is set by script.js; :hover is the no-JS fallback) ---------- */

.dispatch-row.is-hovered::before,
html:not(.hover-js) .dispatch-row:hover::before { height: 100%; }

.dispatch-row.is-hovered .dispatch-num,
.dispatch-row.is-hovered .dispatch-title,
html:not(.hover-js) .dispatch-row:hover .dispatch-num,
html:not(.hover-js) .dispatch-row:hover .dispatch-title { color: var(--blue); }

.dispatch-row.is-hovered .dispatch-meta,
html:not(.hover-js) .dispatch-row:hover .dispatch-meta { color: var(--muted-navy); }

.dispatch-row.is-hovered .dispatch-cta,
html:not(.hover-js) .dispatch-row:hover .dispatch-cta {
  opacity: 1;
  transform: translate(0, 0);
}

.dispatch-row.is-hovered .dispatch-media img,
html:not(.hover-js) .dispatch-row:hover .dispatch-media img { transform: scale(1.05); }

/* Responsive rules for the dispatch ledger live in the unified breakpoints below */

/* --- LEADERSHIP (kept for leadership.html) --- */
.leadership {
  background: var(--stone);
  padding: 220px var(--content-gutter) 150px;
  text-align: center;
}

.leader-card a { text-decoration: none; color: inherit; }

.leadership .eyebrow {
  color: var(--navy);
  margin-bottom: 46px;
  padding-bottom: 20px;
  font-size: 2.2rem;
  text-align: left;
}

.leadership-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  text-align: left;
}

.leader-photo { aspect-ratio: 3/4; overflow: hidden; margin-bottom: 18px; z-index: 1; }

.leader-photo img {
  filter: grayscale(0.25);
  transition: filter 0.5s var(--ease), transform 0.6s var(--ease);
}

.leader-card:hover .leader-photo img { filter: grayscale(0); transform: scale(1.04); }

.leader-name {
  font-family: var(--font-word);
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 6px;
}

.leader-role {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--navy);
}

/* --- FOOTER --- */
.site-footer {
  position: relative;
  background: var(--footer-bg);
  padding: 90px var(--content-gutter) 0;
  overflow: hidden;
  font-family: var(--font-word);
}

.footer-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 60px;
  align-items: flex-start;
}

.footer-brand { display: flex; align-items: center; gap: 18px; color: var(--off-white); }
.footer-divider{ width: 1px; height: 60px; background-color: var(--off-white); margin-left: -15px; }
.footer-brand .logo-mark { width: 90px; height: 80px; }

.footer-built {
  font-family: var(--font-word);
  color: var(--off-white);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.3;
}

.footer-columns { display: flex; gap: 80px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; }

.footer-col-title {
  font-family: var(--font-word);
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.footer-col a {
  color: var(--off-white);
  font-family: var(--font-body);
  font-size: 0.85rem;
  opacity: 0.85;
  transition: opacity 0.3s;
}

.footer-col a:hover { opacity: 1; color: var(--accent); }

.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(238,238,238,0.3);
  border-radius: 50%;
  opacity: 1;
}
.footer-social a:hover { border-color: var(--accent); }
.footer-social svg { width: 14px; height: 14px; stroke: var(--off-white); fill: none; }

.footer-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 24px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
}

.footer-bottom a { color: var(--muted); transition: color 0.3s; }
.footer-bottom a:hover { color: var(--off-white); }

.footer-wordmark {
  position: relative;
  z-index: 1;
  font-family: var(--font-word);
  color: var(--off-white);
  font-size: clamp(2.75rem, 22vw, 25.563rem);
  line-height: 0.85;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-align: center;
  margin: 10px -0.05em -0.14em 0; /* negative bottom margin pushes the letters under the footer's edge */
}

/* --- RESPONSIVE --- */
/* One breakpoint for tablet + mobile layout, one for mobile-only sizing fixes */
@media (max-width: 900px) {
  :root { --content-gutter: 20px; }

  .nav-right { display: none; }
  .nav-toggle { display: flex; }
  .article-nav.nav-center { display: none; }

  .hero { padding: 120px 20px 50px; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  .hero-model { aspect-ratio: 4 / 3; }

  .mission{ padding: 60px var(--content-gutter) 40px; }
  .mission-text{font-size: 0.80rem; line-height: 1.5; max-width: 100%; }
  .mission-btn{font-size: 0.65rem; letter-spacing: 0.06em; padding: 4px 6px; }
  .mission-actions { gap: 36px; }

  /* Subtext columns keep their left/right spread, just tighter vertical padding */
  .stack-subtext, .systems-subtext { padding: 24px 0 32px; }

  .tech-grid {gap: 8px;}
  .tech-tile{border-radius: 0;}
  .tech-grid, .systems-grid { grid-template-columns: 1fr; }
  .tech-tile--wide { height: 320px; }
  .tech-tile--col { height: 320px; }
  .tech-tile-body { padding: 0 15px 30px; }
  .tile-arrow { right: 15px; bottom: 35px; }
  .systems-grid .tech-tile { height: 320px; }

  /* Stack/systems cards: show what hover used to reveal, skip the tap-replay of the animation */
  .tile-label { transform: translateY(0); margin-bottom: 8px; }
  .tile-desc { white-space: normal; width: auto; opacity: 1; border-right: none; }
  .tile-arrow { opacity: 1; transform: none; }
  .tech-tile.is-hovered .tile-desc,
  html:not(.hover-js) .tech-tile:hover .tile-desc { animation: none; }
  .tech-tile.is-hovered .tech-tile-media img,
  html:not(.hover-js) .tech-tile:hover .tech-tile-media img { transform: none; }

  .engine-row { grid-template-columns: 1fr; gap: 20px; padding: 40px 20px; }
  .engine-media { order: -1; width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .engine-text { justify-content: flex-start; gap: 16px; }
  .engine-cta { display: none; }

  .dispatch-row { grid-template-columns: 1fr; row-gap: 14px; padding: 20px; }
  .dispatch-media { order: -1; aspect-ratio: 16 / 10; }
  .dispatch-num { margin-top: 0; }
  .dispatch-cta { display: none; }

  .leadership { padding: 140px 20px 100px; }
  .leadership-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-top { flex-direction: column; gap: 32px; padding-bottom: 40px; }
  .footer-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-wordmark { margin-right: 0; }
}

@media (max-width: 647px) {
  .leadership-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
}