/* ==========================================================================
   EDGESOURCE — site redesign
   Brand palette (from official brand sheet):
     Edgesource Red   #a01c37   (threat / the edge — use sparingly, with intent)
     Refined Azure    #388abe   (trust / advantage — highlights & interaction; toned from vivid #18b6ea)
   Motif: red meets blue at the edge — the contested intersection.
   ========================================================================== */

:root {
  --red: #a01c37;
  --red-bright: #c92a4b;
  --azure: #388abe;
  --azure-soft: rgba(56, 138, 190, 0.14);

  --bg: #05070d;
  --bg-2: #080d17;
  --panel: #0b111e;
  --panel-2: #0d1524;
  --line: rgba(148, 170, 200, 0.13);
  --azure-deep: #1e4e86;   /* brand "dark azure" — for fills, borders, recessive blue */

  --text: #e9eef6;
  --muted: #97a3b8;
  --faint: #6b7890;

  /* Lato for headlines/emphasis (brand spec); Inter for body */
  --font: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-head: "Lato", "Segoe UI", system-ui, sans-serif;
  --radius: 10px;
  --maxw: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  /* one continuous "contested edge" atmosphere behind the whole page so the
     vibe holds top-to-bottom: near-black with a faint red field top-right and
     a recessive deep-azure wash bottom-left (mostly dark, low blue) */
  background:
    radial-gradient(1300px 820px at 100% 0%, rgba(160, 28, 55, 0.13), transparent 58%),
    radial-gradient(1100px 900px at 0% 100%, rgba(30, 78, 134, 0.10), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* 100vw full-bleed elements must not cause sideways scroll */
}

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

a { color: var(--azure); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- type ---------- */

h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; letter-spacing: 0; }

.h-display {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 800;
}

.h-section {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 750;
  margin-bottom: 0.5em;
}

.accent-azure { color: var(--azure); }

/* AdvantEDGE — echoes the platform brand: bold EDGE, azure, wide tracking */
.adv-edge {
  font-weight: 800;
  color: var(--azure);
  letter-spacing: 0.05em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 18px;
}
/* red dash prefix, straight from the deck's "— MISSION AREA" treatment */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  background: var(--red-bright);
  margin-right: 10px;
  vertical-align: 3px;
}

.lede {
  font-size: 1.15rem;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- header / nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 10, 19, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  padding-bottom: 22px;
  /* full-bleed header: the brand hugs the left edge and the nav the right,
     instead of sitting inside the centered 1180px content column */
  max-width: none;
  padding-left: clamp(24px, 3vw, 48px);
  padding-right: clamp(24px, 3vw, 48px);
}

.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; }
.brand:hover { text-decoration: none; }

/* official Edgesource lockup (reverse/white for dark backgrounds) */
.brand-logo { height: 36px; width: auto; display: block; }
.brand-logo.sm { height: 30px; }

/* tagline sits directly under the wordmark, title case, light humanist weight */
.brand-tag {
  margin-top: 4px;
  font-size: 0.66rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.brand-tag .t-red { color: var(--red-bright); }

.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; }

.nav-links a {
  color: var(--text);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--azure); }
.nav-links a.active { border-bottom-color: var(--red); }

.nav-cta {
  background: var(--red);
  color: #fff !important;
  padding: 11px 22px !important;
  border-radius: 6px;
  border-bottom: none !important;
}
.nav-cta:hover { background: var(--red-bright); color: #fff; }

/* social icon buttons in the nav */
.nav-social { display: flex; align-items: center; gap: 8px; }
.nav-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.nav-social a:hover { color: var(--text); border-color: var(--azure); background: var(--azure-soft); }
.nav-social a[aria-label*="LinkedIn"]:hover { color: #4aa3e0; border-color: #4aa3e0; }
.nav-social a[aria-label*="YouTube"]:hover { color: #ff4a4a; border-color: #ff4a4a; }

.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); font-size: 1.3rem; padding: 4px 12px; border-radius: 6px; cursor: pointer; }

/* hover dropdown under What We Do */
.nav-links .has-dropdown { position: relative; }
.has-dropdown > a::after { content: " ▾"; font-size: 0.72em; color: var(--muted); }
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -12px;
  min-width: 265px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 9px 14px;
  border-bottom: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
}
.dropdown a:hover { background: rgba(56, 138, 190, 0.1); color: var(--azure); text-decoration: none; }

/* partner logo wall */
.logo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.logo-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 12px 18px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
a.logo-tile:hover {
  text-decoration: none;
  border-color: var(--azure);
  background: var(--panel-2);
  transform: translateY(-3px);
}
a.logo-tile:hover span { color: var(--text); }
.logo-tile img { height: 64px; width: auto; }
.logo-tile .text-seal {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  color: var(--azure);
}
.logo-tile span { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }

/* footer social */
.footer-right { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.social-links { display: flex; gap: 16px; }
.social-links a { color: var(--muted); }
.social-links a:hover { color: var(--azure); }

/* small LinkedIn link on leader cards */
.li-link { display: inline-block; margin-top: 10px; font-size: 0.82rem; font-weight: 700; }

/* "go deeper" link on capability blocks */
.deep-link { display: inline-block; margin-top: 12px; font-size: 0.85rem; font-weight: 700; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 110px 0 55px;
  /* transparent so the page-wide contested-edge atmosphere shows through;
     a faint red field is the only added tint (blue stays minimal) */
  background:
    radial-gradient(820px 460px at 92% -10%, rgba(160, 28, 55, 0.16), transparent 62%),
    transparent;
}

/* per-page hero artwork — home uses the cleaned "Sense the Environment" slide art,
   the rest are generated in the same visual language (see gen_backgrounds.py) */
.hero-art {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(6, 10, 19, 0.88) 0%, rgba(6, 10, 19, 0.68) 30%, rgba(6, 10, 19, 0.06) 66%, rgba(6, 10, 19, 0.18) 100%),
    linear-gradient(180deg, rgba(6, 10, 19, 0.08) 0%, transparent 40%, var(--bg) 99%),
    var(--hero-img);
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
.hero-art.dim { opacity: 0.85; }

/* scroll cue: a soft bouncing chevron at the base of every hero, so visitors
   see that the page continues below the first screen and are invited to scroll */
body.screens .hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: 15px;
  height: 15px;
  margin-left: -8px;
  border-right: 2px solid var(--azure);
  border-bottom: 2px solid var(--azure);
  transform: rotate(45deg);
  opacity: 0.55;
  z-index: 3;
  pointer-events: none;
  animation: heroScrollCue 1.7s ease-in-out infinite;
}
@keyframes heroScrollCue {
  0%, 100% { bottom: 24px; opacity: 0.3; }
  50% { bottom: 13px; opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; opacity: 0.5; }
}
@media (max-width: 860px) {
  .hero::after { display: none; }
}

/* photorealistic per-page scenes (user-generated, real AI images) */
.bg-home    { --hero-img: url("../assets/brand/bg-home.jpg"); }     /* globe + satellites */
.bg-wave    { --hero-img: url("../assets/brand/bg-wave.jpg"); }     /* data wave */
.bg-drone   { --hero-img: url("../assets/brand/bg-drone.jpg"); }    /* wireframe drone */
.bg-reticle { --hero-img: url("../assets/brand/bg-reticle.jpg"); }  /* HUD reticle rings */
.bg-sats    { --hero-img: url("../assets/brand/bg-sats.jpg"); }     /* globe + satellites v2 */
.bg-connect { --hero-img: url("../assets/brand/bg-connect.jpg"); }  /* connected world */
.bg-serve   { --hero-img: url("../assets/brand/bg-serve.jpg"); }    /* globe + reticles */
.bg-rim     { --hero-img: url("../assets/brand/bg-rim.jpg"); }      /* elegant earth rim */
.bg-streams { --hero-img: url("../assets/brand/bg-streams.jpg"); }  /* particle streams */
.bg-plexus  { --hero-img: url("../assets/brand/bg-plexus.jpg"); }   /* sparse plexus */
.bg-stars   { --hero-img: url("../assets/brand/bg-stars.jpg"); }    /* dark starfield */
.bg-what    { --hero-img: url("../assets/brand/bg-what.jpg"); }
.bg-who     { --hero-img: url("../assets/brand/bg-who.jpg"); }
.bg-careers { --hero-img: url("../assets/brand/bg-careers.jpg"); }
.bg-team    { --hero-img: url("../assets/brand/bg-team.jpg"); }
.bg-blog    { --hero-img: url("../assets/brand/bg-blog.jpg"); }
.bg-contact { --hero-img: url("../assets/brand/bg-contact.jpg"); }

.hero-inner { position: relative; max-width: 720px; }

.hero .lede { margin: 22px 0 34px; }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* pipe-separated domain row under the hero lede, exactly like the deck's
   "Space | ISR | RF | UAS detection | Signals | Data fusion" line */
.hero-tags { display: flex; flex-wrap: wrap; row-gap: 6px; margin: -10px 0 32px; }
.hero-tags span {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  padding: 0 14px;
  border-right: 1px solid rgba(148, 170, 200, 0.35);
}
.hero-tags span:first-child { padding-left: 0; }
.hero-tags span:last-child { border-right: none; }

/* red-frame callout, like the deck's "THE CONTESTED EDGE" box */
.callout-frame {
  border-left: 3px solid var(--red);
  background: linear-gradient(90deg, rgba(160, 28, 55, 0.15), rgba(160, 28, 55, 0.02) 70%, transparent);
  padding: 12px 20px 13px;
  margin: 0 0 30px;
  max-width: 560px;
}
.callout-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 3px;
}
.callout-frame p { color: var(--muted); font-size: 0.95rem; }

/* info panels anchored on the hero artwork — content on the image, like the slides */
.hero-panels {
  position: absolute;
  right: max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 300px;
  z-index: 1;
}
.hero-panels .hud-panel:nth-child(2) { transform: translateX(-30px); }

.hud-panel {
  position: relative;
  background: rgba(9, 16, 30, 0.68);
  border: 1px solid rgba(56, 138, 190, 0.26);
  border-radius: 8px;
  padding: 13px 16px 14px;
  backdrop-filter: blur(5px);
}
/* contested-edge corner: red meets blue */
.hud-panel::before {
  content: "";
  position: absolute; top: -1px; left: -1px;
  width: 20px; height: 20px;
  border-top: 2px solid var(--red-bright);
  border-left: 2px solid var(--azure);
  border-top-left-radius: 8px;
}
.hud-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 4px;
}
.hud-panel p { font-size: 0.82rem; color: var(--muted); line-height: 1.45; }

@media (max-width: 1180px) {
  .hero-panels {
    position: static;
    transform: none;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    margin: 26px 28px 0;
  }
  .hero-panels .hud-panel { flex: 1 1 220px; transform: none !important; }
}

.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-bright); }

.btn-ghost { border: 1px solid var(--line); color: var(--text); background: rgba(255,255,255,0.03); }
.btn-ghost:hover { border-color: var(--azure); color: var(--azure); }

/* ---------- sections ---------- */

.section { padding: 60px 0; }
/* translucent wash so the page-wide atmosphere shows through and sections blend */
.section-alt {
  background: linear-gradient(180deg, rgba(9, 14, 24, 0) 0%, rgba(9, 14, 24, 0.72) 22%, rgba(9, 14, 24, 0.72) 78%, rgba(9, 14, 24, 0) 100%);
}

.section-head { max-width: 760px; margin-bottom: 34px; }

/* ---------- framework (the "Accelerate" slide, reworked) ---------- */

/* numbered mission band, like the deck's "01 SENSE | 02 SECURE | ..." strip */
.framework {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pillar {
  position: relative;
  padding: 28px 22px 26px;
  border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: none; }

.pillar .num {
  position: absolute;
  top: 26px;
  right: 20px;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red-bright);
}
.pillar .icon { color: var(--azure); margin-bottom: 14px; }
.pillar h3 { font-size: 1.06rem; font-weight: 750; margin-bottom: 2px; }
.pillar h3 span { color: var(--azure); }
.pillar p { font-size: 0.9rem; color: var(--muted); }

.pipes { display: flex; flex-wrap: wrap; row-gap: 4px; margin: 6px 0 10px; }
.pipes span {
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0 9px;
  border-right: 1px solid rgba(148, 170, 200, 0.3);
}
.pipes span:first-child { padding-left: 0; }
.pipes span:last-child { border-right: none; }

.powered { margin-top: 10px; color: var(--muted); font-size: 0.92rem; }
/* one-line AdvantEDGE definition under the ramp */
.edge-def { max-width: 70ch; margin: 8px auto 0; text-align: center; color: var(--text); font-size: 1.06rem; line-height: 1.55; }
.edge-def strong { font-weight: 800; }

/* the ramp — a full slide-style scene: heading in the panel, disciplines
   riding a luminous swoosh to the crest (art: bg-ramp.jpg, stretched to fit
   so the curve lines up with the node positions) */
.ramp {
  position: relative;
  height: 600px;
  /* sits outside .container, so it spans the full page width naturally
     (no 100vw math = no scrollbar-width misalignment) */
  overflow: hidden;
  background: #060a13 url("../assets/brand/bg-ramp.jpg") center / 100% 100% no-repeat;
}
/* melt the scene into the page above and below */
.ramp::before, .ramp::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
}
.ramp::before { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.ramp::after { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }

.ramp-head {
  position: absolute;
  top: 44px;
  left: max(44px, calc((100vw - var(--maxw)) / 2 + 28px)); /* aligns with the content grid */
  max-width: 470px;
  z-index: 2;
}
.ramp-head .eyebrow { margin-bottom: 14px; }
/* electric-thin heading echoing the earth rim: light weight, azure glow,
   and a thin glowing gradient rule beneath (like the line under "Environment.") */
.ramp-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #eaf6fd;
  margin-bottom: 20px;
  text-shadow: 0 0 18px rgba(56, 138, 190, 0.55), 0 0 42px rgba(56, 138, 190, 0.3);
}
.ramp-head h2 .accent-azure { font-weight: 400; color: var(--azure); }
.ramp-head h2::after {
  content: "";
  display: block;
  width: min(480px, 96%);
  height: 2px;
  margin-top: 18px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(56, 138, 190, 0) 0%, var(--azure) 65%, #7fb8dd 100%);
  box-shadow: 0 0 12px rgba(56, 138, 190, 0.9), 0 0 26px rgba(56, 138, 190, 0.5);
}
.ramp-head p { color: var(--muted); font-size: 0.95rem; max-width: 46ch; }

/* each step's icon center lands exactly on the curve (positions computed
   from the bezier in the SVG) */
/* icon centers sit exactly on the light trail; labels hang below-right,
   into the empty space under the rising curve */
.ramp-step {
  position: absolute;
  width: 200px;
  transform: translate(-27px, -27px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  z-index: 2;
}
.rs1 { left: 19.5%; top: 73.5%; }
.rs2 { left: 42.7%; top: 64.9%; }
.rs3 { left: 65.1%; top: 49.5%; }
.rs4 { left: 84.0%; top: 29.8%; }

/* final: label beside the crest ring (above the curve), ring on the burst */
.ramp-final {
  left: 96.7%;
  top: 12%;
  width: 320px;
  transform: translate(calc(-100% + 33px), -50%);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: center;
  text-align: right;
}
.ramp-final .ramp-icon { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.ramp-final h3 { grid-column: 1; grid-row: 1; align-self: end; }
.ramp-final p { grid-column: 1; grid-row: 2; align-self: start; }

.ramp-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(56, 138, 190, 0.75);
  background: rgba(9, 16, 30, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azure);
  box-shadow: 0 0 22px rgba(56, 138, 190, 0.5), inset 0 0 10px rgba(56, 138, 190, 0.15);
  margin-bottom: 12px;
}
.ramp-step h3 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 4px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}
.ramp-step p { font-size: 0.78rem; color: #b6c1d2; line-height: 1.4; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); }

.ramp-final .ramp-icon {
  width: 66px;
  height: 66px;
  border-width: 2px;
  box-shadow: 0 0 38px rgba(56, 138, 190, 0.7), inset 0 0 14px rgba(56, 138, 190, 0.2);
}
.ramp-final h3 { font-size: 0.95rem; color: var(--text); }
.ramp-final p { font-size: 0.8rem; }

@media (max-width: 980px) {
  .ramp {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 26px 24px;
    margin: 0 20px;
  }
  .ramp-head { position: static; max-width: none; margin-bottom: 6px; }
  .ramp-step, .ramp-final {
    position: static;
    transform: none;
    width: auto;
    align-items: flex-start;
    text-align: left;
    padding-left: 16px;
    border-left: 2px solid rgba(56, 138, 190, 0.35);
  }
  .ramp-final {
    border-left-color: var(--azure);
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .ramp-final .ramp-icon { margin: 0 0 12px; }
  .ramp-final h3, .ramp-final p { align-self: flex-start; }
}

.framework-result {
  margin-top: 26px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  background: linear-gradient(90deg, rgba(160,28,55,0.16), rgba(56,138,190,0.12));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 30px;
}

.framework-result .equals {
  font-size: 2rem;
  font-weight: 300;
  color: var(--muted);
}

.framework-result .result-main { font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; }

.framework-result .arrow { color: var(--red-bright); font-size: 1.5rem; }

.framework-result .result-final { font-size: 1.05rem; font-weight: 700; }
.framework-result .result-final small { display: block; font-weight: 400; color: var(--muted); font-size: 0.85rem; }

/* ---------- capability areas ---------- */

/* capability band, like the deck's bottom icon rows */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.cap-card {
  padding: 30px 24px;
  border-left: 1px solid var(--line);
}
.cap-card:first-child { border-left: none; }

/* three-facet grid for the AdvantEDGE definition */
.edge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 8px; }
.edge-grid .cap-card { border-left: 1px solid var(--line); padding: 30px 24px; }
.edge-grid .cap-card:first-child { border-left: none; }
@media (max-width: 860px) {
  .edge-grid { grid-template-columns: 1fr; }
  .edge-grid .cap-card { border-left: none; border-top: 1px solid var(--line); }
  .edge-grid .cap-card:first-child { border-top: none; }
}
.cap-card .icon { color: var(--azure); margin-bottom: 14px; }
.cap-card h3 {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azure);
  margin-bottom: 8px;
}
.cap-card p { font-size: 0.9rem; color: var(--muted); }
.cap-card a { display: inline-block; margin-top: 12px; font-size: 0.85rem; font-weight: 700; }

/* ---------- proof / stats band ---------- */

.proof-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; text-align: center; }

/* contract vehicles table (team page) */
.vehicle-table { width: 100%; border-collapse: collapse; }
.vehicle-table th {
  text-align: left;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--azure);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.vehicle-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.vehicle-table td.vnum {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.88rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.vehicle-table tr:hover td { background: rgba(56, 138, 190, 0.05); }

/* blog post cards */
.post-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.post-card:hover { border-color: var(--azure); transform: translateY(-3px); }
.post-card .photo-ph { border: none; border-radius: 0; aspect-ratio: 16 / 9; }
.post-card .info { padding: 18px 20px 22px; }
.post-date {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azure);
}
.post-card h3 { font-size: 1.05rem; margin: 6px 0 8px; }
.post-card p { font-size: 0.88rem; color: var(--muted); }
.post-card a { display: inline-block; margin-top: 12px; font-size: 0.85rem; font-weight: 700; }

.proof-item { padding: 10px 6px; }
.proof-item .big { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; color: var(--azure); }
.proof-item .label { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- people band ---------- */

.people-band { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }

.photo-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.photo-ph {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px dashed rgba(148, 170, 200, 0.35);
  background: linear-gradient(135deg, var(--panel) 0%, var(--panel-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
  padding: 12px;
}
.photo-ph svg { opacity: 0.55; }
.photo-ph.wide { grid-column: span 2; aspect-ratio: 21 / 9; }

.photo-real { aspect-ratio: 4 / 3; border-radius: var(--radius); object-fit: cover; width: 100%; }

/* ---------- values ---------- */

.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }

.value-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.value-card h3 { font-size: 1.18rem; font-weight: 800; color: var(--azure); margin-bottom: 8px; letter-spacing: 0.01em; }
.value-card p { font-size: 0.92rem; color: #c5cee0; line-height: 1.55; }

/* ---------- leadership ---------- */

.leader-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.leader-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.leader-photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, var(--panel-2), var(--bg-2));
  display: flex; align-items: center; justify-content: center;
  color: var(--faint);
  overflow: hidden;
}
.leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.leader-card .info { padding: 18px 20px 22px; }
.leader-card h3 { font-size: 1.02rem; }
.leader-card .role { color: var(--azure); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin: 4px 0 10px; }
.leader-card p { font-size: 0.87rem; color: var(--muted); }

/* ---------- gallery ---------- */

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* real event photos with caption overlay */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.event-card {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}
/* bias the crop toward the upper third so faces are kept when portrait photos
   are covered into the landscape card */
.event-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 25%; display: block; filter: grayscale(0.45) brightness(0.8) contrast(1.03); transition: filter 0.4s ease; }
/* on-theme tint so the photos sit in the dark / azure palette instead of popping */
.event-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(30, 78, 134, 0.24), rgba(6, 10, 19, 0.42));
  transition: opacity 0.4s ease;
}
/* full color, tint off on hover so the photos still feel alive */
.event-card:hover img { filter: none; }
.event-card:hover::after { opacity: 0; }
/* captions are hidden until you hover the photo */
.event-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 16px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 19, 0.9));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.event-card:hover figcaption { opacity: 1; transform: none; }

/* story-band photo */
.story-photo {
  width: 100%;
  border-radius: var(--radius);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ---------- capability detail (what we do) ---------- */

.detail-block {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  position: relative;
  padding: 32px 34px 32px 38px;
  margin-bottom: 18px;
  background: linear-gradient(180deg, rgba(13, 21, 36, 0.55), rgba(9, 14, 24, 0.3));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.detail-block::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, var(--red) 0%, var(--red) 30%, var(--azure) 100%);
}
.detail-block:hover { border-color: rgba(56, 138, 190, 0.4); transform: translateY(-2px); }

.detail-block h3 { font-size: 1.5rem; margin-bottom: 8px; }
.detail-block .kicker { color: var(--azure); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
.detail-block .quote { color: var(--muted); font-style: italic; margin-top: 10px; font-size: 0.95rem; }

.detail-body p { color: var(--muted); margin-bottom: 14px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.chip {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  background: var(--azure-soft);
  border: 1px solid rgba(56, 138, 190, 0.3);
  padding: 5px 13px;
  border-radius: 999px;
}
/* chips that link somewhere (e.g. agency -> prefilled contact) */
a.chip {
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
a.chip:hover {
  background: var(--azure);
  border-color: var(--azure);
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- benefits (careers) ---------- */

.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.benefit-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.benefit-card .icon { color: var(--azure); margin-bottom: 14px; }
.benefit-card h3 { font-size: 1.02rem; margin-bottom: 6px; }
.benefit-card p { font-size: 0.88rem; color: var(--muted); }

/* ---------- CTA band ---------- */

.cta-band {
  text-align: center;
  padding: 96px 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(10, 17, 32, 0.55) 34%, rgba(6, 10, 19, 0.85) 100%),
    url("../assets/brand/bg-home.jpg") center 40% / cover no-repeat;
}
.cta-band h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 14px; }
.cta-band p { color: var(--muted); max-width: 54ch; margin: 0 auto 30px; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; }

.contact-info h3 { font-size: 1.05rem; font-weight: 800; margin: 26px 0 6px; color: var(--azure); }
.contact-info p { color: var(--muted); }

.contact-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.contact-form label { display: block; font-size: 0.85rem; font-weight: 600; margin: 16px 0 6px; }
.contact-form label:first-child { margin-top: 0; }
.contact-form input, .contact-form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.95rem;
  padding: 11px 14px;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--azure); }
.contact-form button { margin-top: 22px; border: none; cursor: pointer; width: 100%; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 36px;
  background: var(--bg);
}

.footer-grid { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; align-items: flex-start; }

.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 24px; list-style: none; }
.footer-links a { color: var(--muted); font-size: 0.88rem; }
.footer-links a:hover { color: var(--azure); }

.footer-meta { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-meta p { font-size: 0.8rem; color: var(--faint); }

/* ---------- reveal animation ---------- */

.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

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

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .framework, .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar, .cap-card { border-left: none; border-top: 1px solid var(--line); }
  .pillar:nth-child(-n+2), .cap-card:nth-child(-n+2) { border-top: none; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .leader-grid, .benefit-grid, .gallery-grid, .event-grid { grid-template-columns: repeat(2, 1fr); }
  .proof-band { grid-template-columns: repeat(3, 1fr); }
  .people-band, .contact-grid { grid-template-columns: 1fr; }
  .detail-block { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 1200px) {
  .dropdown {
    position: static;
    display: block;
    border: none;
    background: none;
    box-shadow: none;
    padding: 0 0 4px 16px;
    min-width: 0;
  }
  .has-dropdown > a::after { content: ""; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    padding: 16px 28px 20px;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
}

@media (max-width: 680px) {
  .brand-logo { height: 22px; }
  .brand-tag { font-size: 0.58rem; letter-spacing: 0.02em; }
  .footer-grid { flex-direction: column; }
  .footer-right { align-items: flex-start; }
  .footer-links { justify-content: flex-start; }
  .framework, .cap-grid, .values-grid, .leader-grid, .benefit-grid, .gallery-grid, .event-grid { grid-template-columns: 1fr; }
  .pillar:nth-child(2), .cap-card:nth-child(2) { border-top: 1px solid var(--line); }
  .proof-band { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 70px 0 60px; }
  .section { padding: 60px 0; }
}


/* ---------- capability pages: engaging enhancements ---------- */
.detail-block .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--azure);
  background: var(--azure-soft);
  border: 1px solid rgba(56, 138, 190, 0.5);
  box-shadow: 0 0 18px rgba(56, 138, 190, 0.25);
  margin-bottom: 16px;
}

/* full-bleed featured image band (reuses the page's brand image) */
.feature-band {
  position: relative;
  margin: 10px 0;
  border-radius: 14px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  background: #05070d;
  border: 1px solid var(--line);
}
.feature-band .fb-img {
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.feature-band .fb-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(5,7,13,0.92) 0%, rgba(5,7,13,0.6) 48%, rgba(5,7,13,0.15) 100%);
}
.feature-band .fb-content { position: relative; padding: 60px 52px; max-width: 700px; }
.feature-band .fb-quote {
  font-family: var(--font-head);
  font-weight: 300;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.2;
  color: #eaf6fd;
  text-shadow: 0 0 18px rgba(56, 138, 190, 0.4);
}
.feature-band .fb-quote .accent-azure { font-weight: 400; }
.feature-band .fb-sub { margin-top: 16px; color: var(--muted); font-size: 0.98rem; letter-spacing: 0.02em; }
@media (max-width: 680px) { .feature-band .fb-content { padding: 40px 26px; } }
.cap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap-stat {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  overflow: hidden;
}
.cap-stat::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 35%, var(--azure) 100%);
}
.cap-stat .v { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; color: var(--azure); margin-bottom: 4px; letter-spacing: 0.01em; }
.cap-stat .l { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 680px) { .cap-stats { grid-template-columns: 1fr; } }

/* ============ discipline signature layouts (v2 only) ============ */

/* Rapid Prototyping — horizontal loop stepper */
.flow-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 6px; }
.flow-steps::before { content: ""; position: absolute; top: 36px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, rgba(56,138,190,0.25), var(--azure) 50%, rgba(56,138,190,0.25)); }
.flow-step { position: relative; text-align: center; z-index: 1; }
.flow-node { width: 74px; height: 74px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; color: var(--azure);
  background: #0b111e; border: 2px solid rgba(56,138,190,0.65); box-shadow: 0 0 26px rgba(56,138,190,0.35); }
.flow-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.flow-step p { font-size: 0.88rem; color: var(--muted); }
.flow-loop { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; color: var(--azure);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; }
@media (max-width: 760px) { .flow-steps { grid-template-columns: 1fr; gap: 26px; } .flow-steps::before { display: none; } }

/* Mission Engineering — alternating engineered rows */
.eng-rows { border-top: 1px solid var(--line); }
.eng-row { display: grid; grid-template-columns: 110px 1fr; gap: 36px; align-items: start; padding: 34px 4px; border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.eng-row:hover { background: rgba(56, 138, 190, 0.04); }
.eng-num { font-family: var(--font-head); font-size: 3.6rem; font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(56,138,190,0.55); }
.eng-body h3 { font-size: 1.4rem; margin-bottom: 6px; }
.eng-body .quote { color: var(--azure); font-style: italic; margin-bottom: 12px; font-size: 1rem; }
.eng-body p { color: var(--muted); margin-bottom: 14px; }
.eng-body .chip-row { margin: 0; }
@media (max-width: 680px) { .eng-row { grid-template-columns: 1fr; gap: 10px; padding: 26px 0; } .eng-num { font-size: 2.6rem; } }

/* certified band (mission) */
.cert-band { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; padding: 26px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(9,14,24,0.4); }
.cert-band span { font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; letter-spacing: 0.06em; color: #cdd6e4; }
.cert-band span::before { content: "◆ "; color: var(--azure); }

/* Integrated Data Platforms — data stack */
.data-stack { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.stack-top { text-align: center; margin-bottom: 4px; }
.stack-top .pill { display: inline-block; padding: 13px 28px; border-radius: 999px; font-family: var(--font-head); font-weight: 800;
  color: #eaf6fd; background: linear-gradient(90deg, rgba(160,28,55,0.32), rgba(56,138,190,0.38)); border: 1px solid rgba(56,138,190,0.5); }
.stack-arrow { text-align: center; color: var(--azure); font-size: 1.05rem; line-height: 0.5; }
.stack-layer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(56,138,190,0.14), rgba(13,21,36,0.5)); border: 1px solid var(--line); border-left: 3px solid var(--azure); }
.stack-layer .sl-name { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }
.stack-layer .sl-desc { color: var(--muted); font-size: 0.88rem; text-align: right; }
@media (max-width: 600px) { .stack-layer { flex-direction: column; align-items: flex-start; gap: 6px; } .stack-layer .sl-desc { text-align: left; } }

/* Convergence diagram — four disciplines into Operational AdvantEDGE (What We Do) */
.converge-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.conv-card { display: block; background: linear-gradient(180deg, rgba(13,21,36,0.6), rgba(9,14,24,0.35)); border: 1px solid var(--line); border-radius: 12px; padding: 26px 22px; text-align: center; text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
a.conv-card:hover { border-color: rgba(56,138,190,0.45); transform: translateY(-3px); text-decoration: none; }
.conv-card .icon { color: var(--azure); margin-bottom: 14px; display: flex; justify-content: center; }
.conv-card h3 { font-size: 1.02rem; margin-bottom: 6px; color: var(--text); }
.conv-card p { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 820px) { .converge-in { grid-template-columns: repeat(2, 1fr); } }
.conv-arrows { text-align: center; color: var(--azure); font-size: 1.3rem; letter-spacing: 1.4rem; margin: 14px 0 10px; padding-left: 1.4rem; }
.conv-hub { max-width: 580px; margin: 0 auto; text-align: center; padding: 40px 30px; border-radius: 16px;
  background: radial-gradient(620px 260px at 50% 0%, rgba(56,138,190,0.16), transparent 70%), rgba(9,14,24,0.5); border: 1px solid rgba(56,138,190,0.35); }
.conv-hub .hub-ring { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid var(--azure);
  display: flex; align-items: center; justify-content: center; color: var(--azure); box-shadow: 0 0 34px rgba(56,138,190,0.4), inset 0 0 20px rgba(56,138,190,0.15); }
.conv-hub h3 { font-size: 1.5rem; margin-bottom: 10px; }
.conv-hub p { color: var(--muted); max-width: 46ch; margin: 0 auto; }
@media (max-width: 480px) { .converge-in { grid-template-columns: 1fr; } }

/* Decision Support — HUD dashboard bento grid */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.bento .cell {
  position: relative;
  background: linear-gradient(180deg, rgba(13,21,36,0.6), rgba(9,14,24,0.35));
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 24px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.bento .cell:hover { border-color: rgba(56,138,190,0.4); transform: translateY(-2px); }
.bento .cell::before {
  content: ""; position: absolute; top: 0; left: 0; width: 26px; height: 26px;
  border-top: 2px solid var(--red-bright); border-left: 2px solid var(--azure); border-top-left-radius: 12px;
}
.bento .cell .icon { color: var(--azure); margin-bottom: 12px; display: flex; }
.bento .cell h3 { font-size: 1.05rem; margin-bottom: 6px; }
.bento .cell p { font-size: 0.88rem; color: var(--muted); }
.bento .feature {
  grid-column: span 2; grid-row: span 2;
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(520px 260px at 20% 0%, rgba(56,138,190,0.16), transparent 70%),
    linear-gradient(180deg, rgba(13,21,36,0.7), rgba(9,14,24,0.4));
}
.bento .feature .hub-ring { width: 72px; height: 72px; margin-bottom: 18px; border-radius: 50%; border: 2px solid var(--azure);
  display: flex; align-items: center; justify-content: center; color: var(--azure); box-shadow: 0 0 28px rgba(56,138,190,0.35); }
.bento .feature h3 { font-size: 1.9rem; }
.bento .feature p { font-size: 0.98rem; max-width: 42ch; }
@media (max-width: 820px) { .bento { grid-template-columns: repeat(2, 1fr); } .bento .feature { grid-column: span 2; grid-row: span 1; } }
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento .feature { grid-column: span 1; } }

/* ---------- section flow (desktop) ----------
   Each section fills the viewport so the page reads one screen at a time — but
   there is NO scroll-snap, so the reader's scroll is never hijacked or pulled
   toward snap points on the way down. Short bands opt out of the full-height
   rule so they don't reserve an empty screen. */
@media (min-width: 861px) {
  html { scroll-padding-top: 100px; }
  /* Full-screen sections apply ONLY to pages that opt in via <body class="screens">
     (the homepage). Content pages flow to their natural height, so they never
     leave big empty gaps. */
  body.screens main > section {
    /* near-full-screen: fills the view, but leaves a ~10vh sliver of the next
       section peeking above the fold — a deliberate cue that there's more to
       scroll to. Also trims the dead space a hard 100vh left in short sections. */
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body.screens main > section > .container { width: 100%; }
  /* the full-bleed ramp manages its own height */
  body.screens main > section:has(> .ramp) { min-height: auto; }
  /* short bands shouldn't reserve a near-full screen of empty space */
  body.screens main > section:has(.proof-band) { min-height: auto; padding-top: 64px; padding-bottom: 64px; }
  body.screens main > section.cta-band { min-height: auto; }
  body.screens main > section:last-of-type { min-height: auto; }
}

/* ---------- blog post (prose) ---------- */
.post-meta { color: var(--faint); font-size: 0.95rem; letter-spacing: 0.02em; }
.post-body { max-width: 72ch; color: var(--muted); font-size: 1.06rem; line-height: 1.78; }
.post-body > * + * { margin-top: 1em; }
.post-body h2 { font-family: var(--font-head); color: var(--text); font-size: 1.55rem; font-weight: 750; margin-top: 1.6em; margin-bottom: 0.4em; }
.post-body h3 { font-family: var(--font-head); color: var(--text); font-size: 1.2rem; font-weight: 700; margin-top: 1.4em; margin-bottom: 0.3em; }
.post-body a { color: var(--azure); }
.post-body ul, .post-body ol { margin-left: 1.2em; }
.post-body li { margin-bottom: 0.4em; }
.post-body strong { color: var(--text); font-weight: 700; }
.post-body blockquote { border-left: 3px solid var(--azure); padding-left: 16px; color: var(--text); font-style: italic; }

/* ---------- live jobs (Ashby) ---------- */
.jobs-list { display: flex; flex-direction: column; gap: 12px; }
.jobs-status { color: var(--muted); }
.job-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease; }
.job-row:hover { text-decoration: none; border-color: var(--azure); background: var(--panel-2); transform: translateY(-2px); }
.job-row .job-main h3 { font-size: 1.1rem; color: var(--text); margin-bottom: 2px; }
.job-row .job-main p { font-size: 0.9rem; color: var(--muted); }
.job-apply { color: var(--azure); font-weight: 800; white-space: nowrap; font-size: 0.9rem; }
@media (max-width: 560px) { .job-row { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- form status message ---------- */
.form-status { margin-top: 14px; font-size: 0.95rem; padding: 12px 16px; border-radius: 8px; }
.form-status.ok { color: #bfe6c8; background: rgba(56, 138, 190, 0.10); border: 1px solid rgba(120, 200, 150, 0.4); }
.form-status.err { color: #f0c0c9; background: rgba(160, 28, 55, 0.14); border: 1px solid rgba(201, 42, 75, 0.5); }

/* ---------- live-jobs filters ---------- */
.jobs-filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 22px; }
.jobs-filters select {
  appearance: none; -webkit-appearance: none;
  background-color: var(--panel);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23388abe' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 34px 10px 14px; font-family: var(--font); font-size: 0.92rem; cursor: pointer; min-width: 190px;
}
.jobs-filters select:hover { border-color: var(--azure); }
.jobs-filters select:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 2px var(--azure-soft); }
.jobs-count { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin-left: auto; }
@media (max-width: 560px) { .jobs-filters select { min-width: 0; flex: 1 1 45%; } .jobs-count { margin-left: 0; width: 100%; } }