/* ==========================================================================
   Aspen Applied Technologies — light theme (off-white)
   Built on the EPIC Design Kit v1.1 palette & typography
   (Figma: EPIC Design System 1.0 › style sheet, node 4025:2992)
   Primary accent: EPIC Blue. No dark mode.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,500;0,700;1,500;1,700&family=Rajdhani:wght@500;600;700&family=Roboto+Condensed:wght@400;500;600;700&family=Roboto+Mono:ital,wght@0,400;0,500;0,700&display=swap');

:root{
  /* ---- EPIC brand palette ---- */
  --epic-red:#b60000; --epic-red-crimson:#800000; --epic-red-faded:#de7070;
  --epic-orange:#ffbf00; --epic-yellow:#ffff00; --epic-green:#17ab00;
  --epic-blue:#1433cb; --epic-blue-dark:#1b308f; --epic-blue-muted:#4863ee;
  --epic-white-pure:#ffffff; --epic-white-paper:#e9e9e9; --epic-black:#000000;
  --grey-100:#cccccc; --grey-200:#b7b7b7; --grey-300:#838383; --grey-400:#707070;
  --grey-500:#666666; --grey-600:#565656; --grey-700:#434343; --grey-900:#323232;

  /* ---- EPIC fonts ---- */
  --font-condensed:"Roboto Condensed",system-ui,sans-serif;
  --font-mono:"Roboto Mono",ui-monospace,monospace;
  --font-serif:"Crimson Pro",Georgia,serif;

  /* ---- Light theme (off-white paper, blue ink-on-paper) ---- */
  --bg:#f6f5f1;            /* off-white page background */
  --bg2:#ffffff;           /* panel / card surface */
  --bg3:#eef0f4;           /* tinted raised panel */
  --ink:#1f2733;           /* primary text (near-navy charcoal) */
  --mut:#5b6470;           /* secondary text */
  --blue:var(--epic-blue);             /* #1433cb core accent */
  --blue-dark:var(--epic-blue-dark);   /* #1b308f hover / deep */
  --blue-tint:#eaeefc;     /* pale blue fill */
  --amber:var(--epic-orange);          /* #ffbf00 secondary accent */
  --red:var(--epic-red);
  --green:var(--epic-green);

  --line:#e2e0d9;          /* hairline border on paper */
  --line2:#ecebe5;         /* lighter divider */

  /* ---- back-compat aliases (used by inline styles / older rules) ---- */
  --accent:var(--blue); --accent-d:var(--blue-dark); --gold:var(--amber);

  --radius:4px;            /* EPIC hard-edged 4px corners */
  --maxw:1120px;
  --tracking:0.15px;
  --shadow:0 10px 28px rgba(31,39,51,.10);
  --shadow-sm:0 2px 8px rgba(31,39,51,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-condensed); letter-spacing:var(--tracking);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue); color:#fff}
a{color:var(--blue); text-decoration:none; transition:.2s}
a:hover{color:var(--blue-dark)}
img{max-width:100%; display:block}

/* ---------- typography (EPIC) ---------- */
h1,h2,h3,h4{
  font-family:var(--font-condensed); font-weight:600;
  line-height:1.1; margin:0 0 .5em; letter-spacing:var(--tracking);
  text-transform:uppercase; color:var(--ink);
}
h1{font-size:clamp(2rem,6vw,3.4rem); font-weight:700; letter-spacing:.5px}
h2{font-size:clamp(1.4rem,4.5vw,2.1rem)}
h3{font-size:1.2rem; text-transform:none}
p{margin:0 0 1rem}

.kicker,.eyebrow,.tag,.badge,.nav-links a,.btn,.stat span,.person .role,
.disclaimer,.prog .amt,.prog .yr,.info-list li b,.foot-grid h4{
  font-family:var(--font-mono);
}

.kicker{display:inline-flex; align-items:center; gap:.55rem; color:var(--blue);
  font-weight:500; font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:.7rem}
.muted{color:var(--mut)}
.gold{color:var(--blue)}                 /* product names lead in blue now */
.center{text-align:center}
.lede{max-width:62ch}

/* Anchor offset for sticky header */
[id]{scroll-margin-top:80px}
/* ---------- header / nav ---------- */
.site-head{position:sticky; top:0; z-index:50;
  background:rgba(246,245,241,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; height:62px}
.brand{display:flex; align-items:center; gap:.6rem; font-family:var(--font-condensed);
  font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--ink)}
.brand .logo{height:38px; width:auto; flex:0 0 auto}
.brand small{display:block; font-family:var(--font-mono); font-size:.58rem; font-weight:500;
  color:var(--blue); letter-spacing:.16em; text-transform:uppercase; margin-top:-2px}
.brand small.division{color:var(--mut); text-transform:none; letter-spacing:.04em; font-weight:400}
.brand span{font-size:.92rem; line-height:1.06}
.site-head .brand span{font-size:1.4rem; font-family:"Rajdhani",var(--font-condensed),sans-serif}
.site-head .brand,
.site-head .brand small,
.site-head .nav-links a{font-family:"Rajdhani",var(--font-condensed),sans-serif}
.site-head .brand small{font-size:.72rem}
.site-head .nav-links a{font-size:1rem}
.site-foot .brand span{font-size:1.2rem; font-family:"Rajdhani",var(--font-condensed),sans-serif}
.site-foot .brand small{font-size:.72rem; font-family:"Rajdhani",var(--font-condensed),sans-serif}
@media(max-width:400px){
  .brand{gap:.45rem; letter-spacing:.3px}
  .brand span{font-size:.8rem}
  .site-head .brand span{font-size:1rem}
  .brand small{font-size:.52rem}
}

.nav-toggle{display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; padding:10px; cursor:pointer}
.nav-toggle span{width:24px; height:2px; background:var(--blue); border-radius:0; transition:.25s}
.nav-links{position:absolute; left:0; right:0; top:62px; display:none; flex-direction:column;
  background:var(--bg2); border-bottom:1px solid var(--line); padding:.4rem 1.1rem .9rem;
  box-shadow:var(--shadow-sm)}
.nav-links.open{display:flex}
.nav-links a{color:var(--ink); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  padding:.75rem .2rem; border-bottom:1px solid var(--line2)}
.nav-links a:last-child{border-bottom:0}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-cta{display:none}

@media(min-width:860px){
  .nav-toggle{display:none}
  .nav-links{position:static; display:flex; flex-direction:row; align-items:center; gap:.2rem;
    background:none; border:0; padding:0; box-shadow:none}
  .nav-links a{border:0; padding:.5rem .7rem; font-size:.78rem}
  .nav-links a:hover{background:var(--blue-tint)}
  .nav-links a.active{background:var(--blue-tint); box-shadow:inset 0 0 0 1px var(--line)}
  .nav-cta{display:inline-block; margin-left:.4rem}
}

/* ---------- buttons ---------- */
.btn{display:inline-block; font-weight:500; font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.8rem 1.4rem; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; transition:.2s}
.btn-primary{background:var(--blue); color:#fff; border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.nav-cta.btn-primary{color:#fff}
.btn-ghost{border-color:var(--blue); color:var(--blue); background:transparent}
.btn-ghost:hover{background:var(--blue-tint); color:var(--blue-dark)}
.btn-row{display:flex; flex-wrap:wrap; gap:.7rem}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden;
  background:linear-gradient(180deg,#eef1f8,var(--bg) 70%)}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent); opacity:.6}
.hero-inner{padding:3.2rem 0 3rem}
.hero .eyebrow{color:var(--blue); font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  font-size:.72rem; margin-bottom:1rem}
.hero p.lead{font-size:clamp(1.05rem,3.2vw,1.3rem); color:var(--ink); max-width:46ch}
.spectrum{position:relative; height:148px; margin:1.6rem 0 0; border-radius:6px;
  background:#0a0e16; border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 20px rgba(0,0,0,.55), var(--shadow-sm); overflow:hidden}
/* animation renders in this top block; the empty strip below is the game dock */
.spectrum-screen{height:126px}
.spectrum-screen canvas{display:block; width:100%; height:100%}
/* game aiming reticle: small circle with single 1px horizontal + vertical lines */
.spectrum-screen canvas.soi-aim{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g fill="none" stroke="%23e6efff" stroke-width="1"><circle cx="10" cy="10" r="3.5"/><line x1="10" y1="0" x2="10" y2="20"/><line x1="0" y1="10" x2="20" y2="10"/></g></svg>') 10 10, crosshair}
/* subtle instrument header in the top whitespace (traces were dropped 15px to
   clear room). pointer-events:none so it never blocks clicks on the target bars.
   text-indent offsets the trailing letter-spacing so the text stays truly centered. */
.spectrum-title{position:absolute; top:4px; left:0; right:0; z-index:2; text-align:center;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.34em; text-indent:.34em; color:rgba(70,255,150,.95);
  text-shadow:0 0 10px rgba(60,255,140,.55); pointer-events:none}
/* game mode: the title mirrors the watchlist — header line over the target list */
.spectrum-title.game{top:2px; letter-spacing:.18em; text-indent:.18em; line-height:1.4}
.spectrum-title.game b{font-weight:800; letter-spacing:.2em}
.spectrum-title.game.allowed{color:rgba(70,255,150,.95); text-shadow:0 0 9px rgba(60,255,140,.5)}
.spectrum-title.game.restricted{color:rgba(255,138,138,.95); text-shadow:0 0 9px rgba(255,90,90,.5)}
/* attention blink: flashes off twice, then settles, each time a new list appears */
.spectrum-title.game.blink{animation:sg-watch-blink .55s steps(1,end)}
@keyframes sg-watch-blink{
  0%{opacity:1} 20%{opacity:0} 40%{opacity:1} 60%{opacity:0} 80%,100%{opacity:1}}
.values-strip{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.chip{border:1px solid var(--line); background:var(--bg2); color:var(--ink);
  padding:.5rem .9rem; border-radius:var(--radius); font-family:var(--font-mono);
  font-weight:500; font-size:.82rem; letter-spacing:.06em}
.chip b{color:var(--blue)}

/* spectrum "signal of interest" 80s-arcade sound game — docked in the scope's
   bottom strip (overlay), so no game elements sit outside the animation frame.
   The gradient keeps the control area reliably dark for legibility. */
.spectrum-hud{position:absolute; left:0; right:0; bottom:0; height:22px; z-index:2;
  display:flex; align-items:center; justify-content:flex-end; gap:1.4rem; padding:0 1.2rem;
  border-top:1px solid rgba(255,255,255,.08); font-family:var(--font-mono)}
/* Easter egg: reads as a faint bit of dock text, not a button. No border, no glow,
   no blink — it only wakes up (neon phosphor green) for the curious who hover it. */
.spectrum-game-btn{padding:.1rem .35rem; font-size:.68rem; font-weight:600; letter-spacing:.2em;
  border-radius:0; color:rgba(130,150,140,.42); background:transparent; border:none;
  text-shadow:none; box-shadow:none;
  transition:color .2s ease, text-shadow .2s ease}
.spectrum-game-btn:hover{color:#39ff14; background:transparent;
  text-shadow:0 0 6px rgba(57,255,20,.6)}
/* locked out while the GAME OVER card lingers — dimmer than idle, no hover glow, un-clickable */
.spectrum-game-btn:disabled{color:rgba(130,150,140,.2); cursor:default; pointer-events:none;
  text-shadow:none}
/* once it's running, a quiet phosphor red — you clicked it on purpose, so it can show */
.spectrum-game-btn[aria-pressed="true"]{color:rgba(255,90,90,.85);
  text-shadow:0 0 5px rgba(255,90,90,.45)}
.spectrum-game-btn[aria-pressed="true"]:hover{color:#ff5a5a;
  text-shadow:0 0 7px rgba(255,90,90,.7)}
/* light-on-dark score readout — sits directly on the dark scope, no panel.
   Centered in the frame; the button stays right-aligned in the dock. */
.spectrum-game-score{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; gap:1.3rem; font-size:.78rem; font-weight:700;
  letter-spacing:.16em; color:#ffd27a; text-shadow:0 0 8px rgba(255,176,0,.55)}
.spectrum-game-score[hidden]{display:none}
.spectrum-game-score b{color:#8dff9c; text-shadow:0 0 9px rgba(57,255,20,.6);
  font-variant-numeric:tabular-nums; margin-left:.3em}
/* rules-of-engagement watchlist — bottom-left of the dock, left-justified.
   Green when ALLOWED (click these), red when RESTRICTED (avoid these). */
.spectrum-game-watch{position:absolute; left:1.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.13em;
  white-space:nowrap; color:rgba(141,255,156,.9); text-shadow:0 0 7px rgba(57,255,20,.4)}
.spectrum-game-watch.restricted{color:rgba(255,138,138,.95); text-shadow:0 0 7px rgba(255,90,90,.45)}
.spectrum-game-watch b{font-weight:800; letter-spacing:.18em}
.spectrum-game-watch[hidden]{display:none}
/* round countdown clock — bottom-left of the dock (where the watchlist used to sit) */
.spectrum-game-timer{position:absolute; left:1.2rem; top:50%; transform:translateY(-50%);
  font-family:var(--font-mono); font-size:.76rem; font-weight:700; letter-spacing:.14em;
  font-variant-numeric:tabular-nums; color:#ffd27a; text-shadow:0 0 7px rgba(255,176,0,.5)}
.spectrum-game-timer[hidden]{display:none}
.spectrum-game-timer.urgent{color:#ff5a5a; text-shadow:0 0 8px rgba(255,80,80,.7);
  animation:sg-timer-pulse 1s steps(1) infinite}
@keyframes sg-timer-pulse{0%,49.99%{opacity:1} 50%,100%{opacity:.4}}
/* end-of-round score card: big neon numbers, pops in with an 80s arcade bounce,
   holds, then fades — JS removes it after 5s */
.sg-gameover{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:5; text-align:center; pointer-events:none; font-family:var(--font-mono);
  animation:sg-gameover-anim 4s ease-out forwards}
.sg-gameover-score{font-weight:800; letter-spacing:.1em; line-height:1.1;
  font-size:clamp(1.2rem,5vw,2.6rem); color:#7df9ff;
  text-shadow:0 0 8px rgba(80,220,255,.7), 0 0 18px rgba(80,220,255,.35)}
.sg-gameover-score b{color:#fff06a; font-variant-numeric:tabular-nums;
  text-shadow:0 0 10px rgba(255,220,40,.9), 0 0 24px rgba(255,180,0,.5)}
.sg-gameover-label{margin-top:.3em; font-weight:800; letter-spacing:.34em;
  font-size:clamp(1rem,3.6vw,1.7rem); color:#ff4d6d;
  text-shadow:0 0 8px rgba(255,60,100,.85), 0 0 18px rgba(255,40,90,.45);
  animation:sg-go-blink .5s steps(1) infinite}
@keyframes sg-go-blink{0%,49.99%{opacity:1} 50%,100%{opacity:.2}}
@keyframes sg-gameover-anim{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.3)}
  8%{opacity:1; transform:translate(-50%,-50%) scale(1.15)}
  14%{transform:translate(-50%,-50%) scale(1)}
  86%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.04)}}
/* "YOU ARE ON FIRE" streak banner: flashes, briefly swells larger, then quickly
   fades out left-to-right via a sweeping mask. Fiery orange/red neon. */
.sg-onfire{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:7; text-align:center; pointer-events:none; white-space:nowrap;
  font-family:var(--font-mono); font-weight:800; letter-spacing:.12em; line-height:1;
  font-size:clamp(1.4rem,6.5vw,3rem); color:rgba(255,210,74,.5);
  text-shadow:0 0 10px rgba(255,140,0,.5), 0 0 26px rgba(255,80,0,.35), 0 0 46px rgba(255,40,0,.22);
  -webkit-mask-image:linear-gradient(90deg, transparent 0 25%, #000 60% 100%);
  mask-image:linear-gradient(90deg, transparent 0 25%, #000 60% 100%);
  -webkit-mask-size:300% 100%; mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  animation:sg-onfire-anim .85s ease-out forwards}
@keyframes sg-onfire-anim{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.55);
     -webkit-mask-position:100% 0; mask-position:100% 0}
  9%{opacity:1; transform:translate(-50%,-50%) scale(1.12)}
  18%{opacity:.15}
  27%{opacity:1}
  36%{opacity:.15}
  45%{opacity:1; transform:translate(-50%,-50%) scale(1);
      -webkit-mask-position:100% 0; mask-position:100% 0}
  62%{opacity:1; transform:translate(-50%,-50%) scale(1.6);
      -webkit-mask-position:100% 0; mask-position:100% 0}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1.85);
       -webkit-mask-position:0% 0; mask-position:0% 0}}
/* "READY PLAYER ONE" pre-round splash: dims the scope frame 50%, title fades in,
   then the rules 500ms later. Sized to sit within the frame's 148px height. */
.sg-intro{position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.25em; text-align:center; padding:.4rem 1rem; background:rgba(0,0,0,.5);
  font-family:var(--font-mono); transition:opacity .4s ease}
.sg-intro.fade-out{opacity:0}
.sg-intro-title{opacity:0; transition:opacity .45s ease;
  font-weight:800; letter-spacing:.1em; line-height:1.05;
  font-size:clamp(1.1rem,4.4vw,2rem); color:#7df9ff;
  text-shadow:0 0 8px rgba(80,220,255,.7), 0 0 18px rgba(80,220,255,.4)}
.sg-intro.show-title .sg-intro-title{opacity:1}
.sg-intro-rules{opacity:0; transition:opacity .45s ease;
  max-width:44rem; font-weight:700; letter-spacing:.04em; line-height:1.3;
  font-size:clamp(.66rem,1.7vw,.92rem); color:#ffe9a8;
  text-shadow:0 0 8px rgba(255,180,0,.4)}
.sg-intro.show-rules .sg-intro-rules{opacity:1}
@media (prefers-reduced-motion: reduce){ .spectrum-game-btn{animation:none} }
/* floating score popup that rises and fades over the scope: green "+100" on a good
   click, red "-100" on a bad one */
.sg-pop{position:absolute; top:44%; transform:translate(-50%,-50%);
  font-family:var(--font-mono); font-weight:700; font-size:1rem; letter-spacing:.1em;
  color:#8dff9c; text-shadow:0 0 9px rgba(57,255,20,.85); pointer-events:none; z-index:2;
  animation:sg-pop-rise 1s ease-out forwards}
.sg-pop-bad{color:#ff6b6b; text-shadow:0 0 9px rgba(255,60,60,.9)}
@keyframes sg-pop-rise{
  0%{opacity:0; transform:translate(-50%,-30%) scale(.7)}
  18%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-190%) scale(1.15)}}

/* ---------- sections ---------- */
section{padding:2.6rem 0}
.section-tight{padding:1.6rem 0}
.band{background:var(--bg3); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---------- announcement / "On the road" banners ---------- */
.announce strong{color:var(--blue)}                                 /* event names → blue bold */
.announce a{text-decoration:underline; text-underline-offset:2px}   /* real banner links → underlined */

/* ---------- layout & cards ---------- */
.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 1.1rem}
.grid{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:680px){.grid.cols-2{grid-template-columns:repeat(2,1fr)}}
/* an image pair that stays side-by-side even on mobile (e.g. the aerospace UAV squares) */
.grid.img-pair{grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr)}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
  .grid.cols-2{grid-template-columns:repeat(2,1fr)}
}
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; position:relative; transition:.2s; box-shadow:var(--shadow-sm)}
.card:hover{transform:translateY(-3px); border-color:var(--blue); box-shadow:var(--shadow)}
.card .tag{color:var(--blue); font-weight:500; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase}
.card h3{margin-top:.35rem; color:var(--ink)}
.card .icon{width:40px; height:40px; border-radius:var(--radius);
  background:var(--blue-tint); border:1px solid var(--line);
  display:grid; place-items:center; margin-bottom:.7rem; color:var(--blue)}
.card.accent-top{border-top:2px solid var(--blue)}
ul.ticks{list-style:none; padding:0; margin:.4rem 0 0}
ul.ticks li{position:relative; padding:.28rem 0 .28rem 1.5rem; color:var(--ink); font-size:.95rem}
ul.ticks li::before{content:"▸"; position:absolute; left:0; top:.2rem; color:var(--blue); font-size:.8rem}

/* ---------- imagery placeholders ---------- */
figure.shot{margin:0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--bg2); overflow:hidden; box-shadow:var(--shadow-sm)}
figure.shot img{width:100%; height:auto; display:block}
figure.shot .ph{aspect-ratio:16/10; display:grid; place-items:center; text-align:center;
  background:
    repeating-linear-gradient(45deg,var(--bg3) 0 10px,#e7eaf1 10px 20px);
  color:var(--mut); font-family:var(--font-mono); font-size:.78rem; letter-spacing:.08em;
  padding:1rem}
figure.shot figcaption{font-family:var(--font-mono); font-size:.74rem; color:var(--mut);
  padding:.6rem .8rem; border-top:1px solid var(--line); letter-spacing:.04em}
/* Products page: show product imagery 25% smaller (75% width), centered */
.page-products figure.shot{max-width:75%; margin-left:auto; margin-right:auto; border-color:var(--blue); align-self:center}
/* Home page: blue border on images, 2x2 grid on mobile */
.page-home figure.shot{border-color:var(--blue)}
@media(max-width:899px){.page-home .grid.cols-4{grid-template-columns:repeat(2,1fr)}}
/* Capabilities page: blue border on images */
.page-capabilities figure.shot{border-color:var(--blue); align-self:start}
/* Aerospace page: blue border and prevent gap below JetZero image */
.page-aerospace figure.shot{border-color:var(--blue); align-self:start}
.page-aerospace figure.shot figcaption{border-top:none}

/* ---------- stats ---------- */
.stats{display:grid; gap:1rem; grid-template-columns:1fr}
@media(min-width:600px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem; text-align:center; border-top:2px solid var(--blue); box-shadow:var(--shadow-sm)}
.stat b{display:block; font-family:var(--font-mono); font-size:clamp(1.4rem,4vw,1.9rem);
  color:var(--blue); font-weight:700; line-height:1.05}
.stat span{display:block; color:var(--mut); font-size:.74rem; margin-top:.45rem; letter-spacing:.04em}

/* ---------- panels ---------- */
.panel{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-sm)}

/* ---------- program / readout rows ---------- */
.prog{display:grid; gap:.9rem}
.prog .row{display:flex; flex-wrap:wrap; gap:.4rem 1rem; align-items:baseline;
  border-left:3px solid var(--blue); background:var(--bg2); border-radius:0 var(--radius) var(--radius) 0;
  padding:.9rem 1.1rem; border-top:1px solid var(--line2); box-shadow:var(--shadow-sm)}
.prog .row .yr{color:var(--amber); font-weight:500; font-size:.82rem}
.prog .row .amt{margin-left:auto; color:var(--blue); font-weight:700}
.prog .row .badge{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:var(--radius); padding:.15rem .6rem; color:var(--blue)}

/* ---------- people ---------- */
.person{display:flex; gap:1rem; align-items:center}
.avatar{width:64px; height:64px; flex:0 0 auto; border-radius:var(--radius);
  background:var(--blue); display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:700; color:#fff; font-size:1.2rem}
.person .role{color:var(--blue); font-weight:500; font-size:.82rem; letter-spacing:.05em}

/* ---------- cta ---------- */
.cta{position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--blue-tint),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.3rem; text-align:center;
  box-shadow:var(--shadow-sm)}

/* ---------- contact info ---------- */
.info-list{list-style:none; padding:0; margin:0}
.info-list li{padding:.55rem 0; border-bottom:1px solid var(--line2); display:flex; gap:.6rem}
.info-list li b{color:var(--blue); min-width:120px; font-weight:500; font-size:.78rem;
  letter-spacing:.06em; text-transform:uppercase}

/* ---------- blockquotes (Crimson Pro italic per EPIC) ---------- */
blockquote{font-family:var(--font-serif); font-style:italic; color:var(--ink)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); background:var(--bg3); padding:2rem 0 2.4rem; margin-top:1.5rem}
.foot-grid{display:grid; gap:1.4rem; grid-template-columns:1fr}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1.2fr}}
.foot-grid>div:first-child{display:flex; flex-direction:column}
.foot-badge{flex:1; display:flex; align-items:center; justify-content:center}
.anniversary-btn{background:none; border:none; padding:0; margin:0; cursor:pointer; line-height:0}
.anniversary-btn:hover .anniversary-badge{filter:brightness(1.08)}
.anniversary-badge{height:144px; width:auto}
.foot-grid h4{color:var(--blue); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; margin:0 0 .6rem}
.foot-grid a{display:block; color:var(--ink); padding:.2rem 0; font-size:.92rem; font-weight:600}
.foot-grid a:hover{color:var(--blue)}
.site-foot .brand .logo{height:34px; width:auto}
.cert-badges{margin:.2rem 0 .8rem}
.cert-badges img{max-width:75%; height:auto; border-radius:var(--radius); border:1px solid var(--blue)}
.cert-badges.cert-empty img{display:none}
.cert-badges.cert-empty::before{content:"[ certification badges ]"; display:grid; place-items:center;
  min-height:64px; border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--mut); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em}
.cert-badges figcaption{font-family:var(--font-mono); font-size:.72rem; color:var(--mut);
  margin-top:.4rem; letter-spacing:.04em}
.foot-bottom{margin-top:1.6rem; padding-top:1rem; border-top:1px solid var(--line);
  color:var(--mut); font-size:.95rem; font-family:"Rajdhani",var(--font-condensed),sans-serif;
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:space-between}
.disclaimer{color:var(--grey-500); font-size:.7rem; max-width:74ch; margin-top:.6rem}

/* ---------- respect reduced-motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
}