/* ==========================================================================
   EURAMEC USA, INC. — euramecusa.com
   Shared stylesheet. Edit this ONE file to restyle every page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Page surfaces — white primary, navy reserved for emphasis bands */
  --page:       #FFFFFF;
  --page-2:     #F4F6F9;
  --surface:    #FFFFFF;
  --surface-2:  #F4F6F9;
  --surface-hv: #EEF2F7;

  /* Navy — separators, emphasis bands, footer */
  --ink:        #060C16;
  --navy:       #0A1628;
  --navy-2:     #0E1D33;
  --steel:      #14243E;

  --hairline:   rgba(10,22,40,.13);
  --hairline-2: rgba(10,22,40,.24);

  /* Brand */
  --red:        #B22234;
  --red-hot:    #C4162B;
  --red-glow:   rgba(178,34,52,.08);

  /* Light surfaces (legacy names kept so nothing breaks) */
  --paper:      #F4F6F9;
  --paper-2:    #E6EAF1;

  /* Text on light */
  --t-hi:       #0A1628;
  --t-mid:      #3F4D63;
  --t-low:      #5C6B82;
  --t-faint:    #8996A9;
  --t-dark-hi:  #0A1628;
  --t-dark-mid: #45536B;

  /* Type */
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --stack:   clamp(4.5rem, 9vw, 7.5rem);
  --maxw:    1240px;
  --radius:  2px;
}

/* --------------------------------------------------------------------------
   DARK SCOPE — any element carrying .on-dark (or a dark band, the hero, or
   the footer) re-points the same tokens at their inverted values, so every
   component inside simply works without a second set of rules.
   -------------------------------------------------------------------------- */
.on-dark,.band--deep,.hero,.foot,.callout{
  --page:       var(--navy);
  --page-2:     var(--navy-2);
  --surface:    #0E1D33;
  --surface-2:  #14243E;
  --surface-hv: #172C49;
  --hairline:   rgba(255,255,255,.09);
  --hairline-2: rgba(255,255,255,.17);
  --red-hot:    #E24457;
  --red-glow:   rgba(226,68,87,.14);
  --t-hi:       #FFFFFF;
  --t-mid:      rgba(255,255,255,.70);
  --t-low:      rgba(255,255,255,.50);
  --t-faint:    rgba(255,255,255,.32);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}

body{
  font-family:var(--body);
  background:var(--page);
  color:var(--t-mid);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{max-width:100%;display:block}
a{color:inherit}

::selection{background:var(--red);color:#fff}

/* Accessibility: visible keyboard focus */
:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--red);color:#fff;padding:12px 20px;
  font:600 13px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   2. TYPE SCALE
   -------------------------------------------------------------------------- */
.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  color:var(--t-hi);
  letter-spacing:-.005em;
  line-height:.94;
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.75rem,7.4vw,6rem);line-height:.9}
.h-lg{font-size:clamp(2rem,4.4vw,3.6rem)}
.h-md{font-size:clamp(1.5rem,2.6vw,2.25rem);line-height:1}
.h-sm{font-size:clamp(1.125rem,1.6vw,1.375rem);line-height:1.1;font-weight:700;letter-spacing:.02em}

.h-xl .accent,.h-lg .accent,.h-md .accent{color:var(--red-hot);font-style:normal}

/* Monospace utility label — the "placard" voice used for data + eyebrows */
.tag{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red-hot);
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:1.1rem;
}
.tag::before{content:"";width:22px;height:1px;background:var(--red-hot);flex:none}
.tag--plain{color:var(--t-faint)}
.tag--plain::before{background:var(--t-faint)}
.tag--none::before{display:none}

.lede{
  font-size:clamp(1rem,1.25vw,1.125rem);
  font-weight:300;
  color:var(--t-mid);
  line-height:1.75;
  max-width:56ch;
}
.body-copy{font-size:.9375rem;font-weight:300;color:var(--t-mid);line-height:1.75;max-width:64ch}
.body-copy + .body-copy{margin-top:1rem}
.small{font-size:.8125rem;color:var(--t-low);line-height:1.6}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--wide{max-width:1480px}
.band{padding-block:var(--stack)}
.band--navy{background:var(--page)}
.band--steel{background:var(--page-2)}
.band--deep{background:var(--navy);color:var(--t-mid)}
/* Navy bands get a red rule top and bottom so they read as deliberate
   separators rather than an accidental change of surface. */
.band--deep{box-shadow:inset 0 3px 0 var(--red),inset 0 -3px 0 var(--red)}
.band--tight{padding-block:clamp(3rem,5vw,4.5rem)}
.band--navy + .band--navy,.band--steel + .band--steel{border-top:1px solid var(--hairline)}

.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--center{align-items:center}

.head{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);margin-bottom:clamp(2.5rem,4vw,3.75rem)}
.head--row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,4vw,4rem);align-items:end}

/* --------------------------------------------------------------------------
   4. NAVIGATION
   -------------------------------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:200;
  height:76px;display:flex;align-items:center;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
  transition:background .3s ease,box-shadow .3s ease;
}
.nav.is-stuck{background:rgba(255,255,255,.98);box-shadow:0 1px 18px rgba(10,22,40,.10)}
.nav__inner{
  width:100%;max-width:1480px;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:88px;
}
.nav__brand{display:flex;align-items:center;gap:.85rem;text-decoration:none;flex:none}
.nav__brand img{height:62px;width:auto}
.nav__brand-fallback{
  font-family:var(--display);font-size:1.375rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--t-hi);line-height:1;
}
.nav__brand-fallback span{color:var(--red)}

.nav__menu{display:flex;align-items:center;gap:2rem;list-style:none}
.nav__menu a{
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-low);text-decoration:none;padding-block:.5rem;
  position:relative;transition:color .2s;white-space:nowrap;
}
.nav__menu a:hover{color:var(--t-hi)}
.nav__menu a[aria-current="page"]{color:var(--t-hi)}
.nav__menu a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red-hot);
}
.nav__cta{display:flex;align-items:center;gap:1rem;flex:none}

.nav__burger{
  display:none;width:44px;height:44px;background:none;border:1px solid var(--hairline-2);
  border-radius:var(--radius);cursor:pointer;align-items:center;justify-content:center;flex:none;
}
.nav__burger span{display:block;width:18px;height:1.5px;background:var(--t-hi);position:relative;transition:.25s}
.nav__burger span::before,.nav__burger span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--t-hi);transition:.25s;
}
.nav__burger span::before{top:-6px}
.nav__burger span::after{top:6px}
.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.nav__drawer{
  position:fixed;inset:76px 0 0 0;z-index:190;
  background:var(--page);padding:2rem var(--gutter) 3rem;
  display:none;flex-direction:column;gap:.25rem;overflow-y:auto;
}
.nav__drawer.is-open{display:flex}
.nav__drawer a{
  font-family:var(--display);font-size:1.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--t-hi);text-decoration:none;
  padding:1rem 0;border-bottom:1px solid var(--hairline);
}
.nav__drawer .btn{margin-top:2rem;justify-content:center}
body.nav-locked{overflow:hidden}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  padding:14px 26px;border-radius:var(--radius);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .12s;
  line-height:1;white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--red);color:#fff}
.btn--solid:hover{background:var(--red-hot)}
.btn--ghost{background:transparent;color:var(--t-hi);border-color:var(--hairline-2)}
.btn--ghost:hover{border-color:var(--t-hi);background:var(--surface-hv)}
.on-dark .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--light{background:#fff;color:var(--navy)}
.btn--light:hover{background:#E6EAF1}
.btn--sm{padding:11px 18px;font-size:11px}
.btn::after{content:"→";font-size:1.05em;line-height:1;transition:transform .2s}
.btn:hover::after{transform:translateX(3px)}
.btn--noarrow::after{display:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--t-hi);text-decoration:none;transition:gap .2s;
}
.link-arrow::after{content:"→";color:var(--red-hot)}
.link-arrow:hover{gap:.85rem}

/* --------------------------------------------------------------------------
   6. HERO
   -------------------------------------------------------------------------- */
.hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--ink)}
.hero--full{min-height:min(100svh,860px)}
.hero--page{min-height:min(64svh,560px);padding-top:76px}

.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(6,12,22,.97) 4%,rgba(6,12,22,.72) 42%,rgba(6,12,22,.42) 100%),
    linear-gradient(100deg,rgba(6,12,22,.86) 0%,rgba(6,12,22,.2) 62%,rgba(178,34,52,.10) 100%);
}
/* Fallback pattern if the image/video never loads */
.hero__media{
  background:
    radial-gradient(1100px 620px at 76% 8%,rgba(178,34,52,.20),transparent 62%),
    linear-gradient(150deg,var(--steel),var(--ink) 62%);
}

.hero__inner{
  position:relative;z-index:2;width:100%;max-width:1480px;
  margin-inline:auto;padding:clamp(7rem,14vw,10rem) var(--gutter) clamp(3rem,6vw,5rem);
}
.hero__title{max-width:22ch}
.hero__sub{margin-top:1.6rem;max-width:52ch;color:var(--t-mid)}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.4rem}

.hero__foot{
  position:relative;z-index:2;border-top:1px solid var(--hairline);
  background:rgba(6,12,22,.55);backdrop-filter:blur(6px);
}

/* --------------------------------------------------------------------------
   7. SIGNATURE: SENSOR-OVERLAY FRAME
   The visual language of an EO/IR turret feed — corner brackets, reticle,
   and monospace telemetry. Used on hero + key product imagery only.
   -------------------------------------------------------------------------- */
.reticle{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.55}
.reticle__bracket{position:absolute;width:34px;height:34px;border:1.5px solid rgba(255,255,255,.5)}
.reticle__bracket--tl{top:26px;left:26px;border-right:0;border-bottom:0}
.reticle__bracket--tr{top:26px;right:26px;border-left:0;border-bottom:0}
.reticle__bracket--bl{bottom:26px;left:26px;border-right:0;border-top:0}
.reticle__bracket--br{bottom:26px;right:26px;border-left:0;border-top:0}
.reticle__cross{
  position:absolute;top:50%;left:50%;width:70px;height:70px;
  transform:translate(-50%,-50%);
}
.reticle__cross::before,.reticle__cross::after{
  content:"";position:absolute;background:rgba(217,48,63,.75);
}
.reticle__cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.reticle__cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.reticle__readout{
  position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:rgba(255,255,255,.55);text-transform:uppercase;
}
.reticle__readout--tl{top:30px;left:74px}
.reticle__readout--br{bottom:30px;right:74px;text-align:right}

/* Framed media block with the same overlay language */
.scope{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--radius);background:var(--surface-2)}
.scope > img{width:100%;height:auto;display:block}
.scope--wide,.scope--sq{aspect-ratio:auto}
.scope.is-missing{min-height:220px}
.scope__label{
  position:absolute;left:0;bottom:0;right:0;padding:.85rem 1rem;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);background:linear-gradient(to top,rgba(6,12,22,.94),transparent);
}
/* If a photo fails to load, hide the broken <img> and let the empty state show */
.scope.is-missing > img,.hero__media.is-missing > img{display:none}
.scope.is-missing{display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg,rgba(178,34,52,.07),transparent 58%),
    repeating-linear-gradient(45deg,rgba(10,22,40,.035) 0 12px,transparent 12px 24px),
    var(--surface-2);}
.scope.is-missing::before{
  content:attr(data-slot);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-faint);text-align:center;padding:1.5rem;}

/* Empty-state so a missing photo still looks intentional, never broken */
.scope--empty{
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg,rgba(178,34,52,.07),transparent 58%),
    repeating-linear-gradient(45deg,rgba(10,22,40,.035) 0 12px,transparent 12px 24px),
    var(--surface-2);
}
.scope--empty::before{
  content:attr(data-slot);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-faint);text-align:center;padding:1.5rem;
}

/* --------------------------------------------------------------------------
   8. STAT / SPEC BAR
   -------------------------------------------------------------------------- */
.specbar{display:grid;grid-template-columns:repeat(4,1fr);max-width:1480px;margin-inline:auto}
.specbar{background:var(--navy)}
.specbar__cell{padding:1.9rem var(--gutter);border-right:1px solid rgba(255,255,255,.09)}
.specbar__cell:last-child{border-right:0}
.specbar__val{
  font-family:var(--display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;
  color:#fff;line-height:1;display:block;margin-bottom:.4rem;
}
.specbar__val .accent{color:var(--red-hot)}
.specbar__key{
  font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--t-low);line-height:1.5;display:block;
}

/* --------------------------------------------------------------------------
   9. CARD GRIDS
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--gap{gap:1.25rem;background:none;border:0;border-radius:0;overflow:visible}

.cell{background:var(--surface);padding:clamp(1.5rem,2.4vw,2.15rem);transition:background .22s}
.cell:hover{background:var(--surface-hv)}
.band--steel .cell{background:var(--surface)}
.band--deep .cell{background:var(--surface)}
.cell__no{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.2em;
  color:var(--red-hot);display:block;margin-bottom:1.1rem;
}
.cell h3,.cell h4{
  font-family:var(--display);font-size:1.1875rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;color:var(--t-hi);margin-bottom:.55rem;line-height:1.15;
}
.cell p{font-size:.875rem;font-weight:300;color:var(--t-mid);line-height:1.7}
.cell__icon{width:26px;height:26px;color:var(--t-low);margin-bottom:1rem}
.cell__icon svg{width:100%;height:100%;stroke-width:1.6}

/* Pillar card — the three lines of business */
.pillar{
  background:var(--surface);padding:clamp(1.75rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;gap:.9rem;
  text-decoration:none;transition:background .22s;position:relative;
}
.pillar:hover{background:var(--surface-hv)}
.pillar__rule{width:34px;height:2px;background:var(--red-hot)}
.pillar h3{font-family:var(--display);font-size:clamp(1.375rem,2vw,1.75rem);font-weight:800;text-transform:uppercase;color:var(--t-hi);line-height:1;letter-spacing:.02em}
.pillar p{font-size:.875rem;font-weight:300;color:var(--t-mid);line-height:1.7;flex:1}
.pillar .link-arrow{margin-top:.35rem}

/* --------------------------------------------------------------------------
   10. CHIP / SPEC LISTS
   -------------------------------------------------------------------------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.chips li{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--t-low);
  border:1px solid var(--hairline-2);background:var(--surface-2);
  padding:5px 11px;border-radius:var(--radius);
}
.chips--dark li{color:var(--t-dark-mid);border-color:rgba(10,22,40,.16);background:rgba(10,22,40,.04)}

.ticks{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.ticks li{
  display:block;position:relative;padding-left:1.5rem;
  font-size:.9375rem;font-weight:300;color:var(--t-mid);line-height:1.6;
}
.ticks li::before{content:"→";position:absolute;left:0;top:0;color:var(--red-hot);font-weight:600}

/* Platform table — aircraft the shop builds */
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.roster__row{padding:1.2rem 1.35rem;display:flex;flex-direction:column;gap:.25rem;transition:background .2s;box-shadow:inset -1px -1px 0 var(--hairline)}
.roster__row:hover{background:var(--surface-hv)}
.band--steel .roster{background:var(--surface)}
.roster__oem{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red-hot)}
.roster__type{font-family:var(--display);font-size:1.375rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t-hi);line-height:1.15}
.roster__note{font-size:.9375rem;font-weight:300;color:var(--t-mid);line-height:1.55}

/* --------------------------------------------------------------------------
   11. FEATURE PANEL (product detail blocks)
   -------------------------------------------------------------------------- */
.panel{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-left:3px solid var(--red);border-radius:var(--radius);
  padding:clamp(1.25rem,2vw,1.75rem);
}
.panel__key{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--t-faint);margin-bottom:.75rem;
}
.panel h4{font-family:var(--display);font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-hi);margin-bottom:.3rem}
.panel p{font-size:.8125rem;color:var(--t-low);line-height:1.6}

/* Software / config matrix */
.matrix{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.matrix__col{background:var(--surface);padding:1.5rem}
.band--steel .matrix__col{background:var(--surface)}
.matrix__head{
  font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--red-hot);padding-bottom:.8rem;margin-bottom:1rem;border-bottom:1px solid var(--hairline);
}
.matrix__list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.matrix__list li{font-size:.875rem;font-weight:300;color:var(--t-mid);line-height:1.5}
.matrix__list li strong{color:var(--t-hi);font-weight:600}

/* --------------------------------------------------------------------------
   12. TIMELINE
   -------------------------------------------------------------------------- */
.timeline{display:flex;flex-direction:column;border-left:1px solid var(--hairline-2);padding-left:1.75rem}
.timeline__item{position:relative;padding-block:1.15rem;border-bottom:1px solid var(--hairline)}
.timeline__item:last-child{border-bottom:0}
.timeline__item::before{
  content:"";position:absolute;left:-1.875rem;top:1.55rem;
  width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 3px var(--page);
}
.timeline__item--future::before{background:var(--page);border:2px solid var(--red)}
.timeline__yr{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;color:var(--red-hot);margin-bottom:.3rem}
.timeline__txt{font-size:.875rem;font-weight:300;color:var(--t-mid);line-height:1.65}

/* --------------------------------------------------------------------------
   13. PEOPLE
   -------------------------------------------------------------------------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.person{padding:1.9rem 1.5rem;display:flex;flex-direction:column;gap:1.1rem;box-shadow:inset -1px -1px 0 var(--hairline)}
.band--steel .people{background:var(--surface)}
.person__ph{
  width:128px;height:128px;border-radius:50%;object-fit:cover;
  border:2px solid var(--red);background:var(--surface-2);
  font-family:var(--display);font-size:1.75rem;font-weight:800;color:var(--t-low);
  overflow:hidden;flex:none;
}
.person__name{font-family:var(--display);font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--t-hi);line-height:1.1}
.person__role{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--t-low);margin-top:.2rem}

/* --------------------------------------------------------------------------
   14. CALLOUT BANDS
   -------------------------------------------------------------------------- */
.callout{background:var(--red);padding:clamp(3rem,6vw,4.5rem) 0}
.callout__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,4vw,4rem);align-items:center}
.callout h2{font-family:var(--display);font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:800;text-transform:uppercase;color:#fff;line-height:1;margin-bottom:.75rem}
.callout p{font-size:.9375rem;font-weight:300;color:rgba(255,255,255,.86);max-width:56ch;line-height:1.7}
.callout .chips li{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.14);color:rgba(255,255,255,.94)}
.callout__cta{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.callout__note{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}

.endcap{background:var(--page-2);border-top:3px solid var(--red);padding:clamp(3.5rem,6vw,5rem) var(--gutter);text-align:center}
.endcap h2{font-family:var(--display);font-size:clamp(2rem,4vw,3.25rem);font-weight:800;text-transform:uppercase;color:var(--t-hi);line-height:1;margin-bottom:.9rem}
.endcap p{font-size:.9375rem;font-weight:300;color:var(--t-mid);max-width:54ch;margin:0 auto 2rem}
.endcap__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem}

/* Trust / credential strip */
.creds{display:flex;flex-wrap:wrap;gap:.75rem 2.25rem;align-items:center}
.creds__item{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--t-low)}
.creds__item svg{width:16px;height:16px;color:var(--red-hot);flex:none;stroke-width:2}

.notice{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--red-glow);border:1px solid rgba(178,34,52,.22);
  border-left:3px solid var(--red);border-radius:var(--radius);
  padding:1.25rem 1.4rem;
}
.notice svg{width:26px;height:26px;color:var(--red-hot);flex:none;stroke-width:1.7;margin-top:2px}
.notice h4{font-family:var(--display);font-size:.9375rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t-hi);margin-bottom:.2rem}
.notice p{font-size:.8125rem;color:var(--t-low);line-height:1.6}

/* --------------------------------------------------------------------------
   15. NEWS
   -------------------------------------------------------------------------- */
.news{background:var(--surface);padding:1.85rem;text-decoration:none;display:flex;flex-direction:column;transition:background .22s}
.news:hover{background:var(--surface-hv)}
.news__meta{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;flex-wrap:wrap}
.news__kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--red-hot);border:1px solid rgba(178,34,52,.36);padding:3px 8px;border-radius:var(--radius)}
.news__date{font-family:var(--mono);font-size:10px;color:var(--t-faint);letter-spacing:.08em}
.news h3{font-family:var(--display);font-size:1.1875rem;font-weight:700;text-transform:uppercase;color:var(--t-hi);line-height:1.18;letter-spacing:.02em;margin-bottom:.7rem}
.news p{font-size:.8125rem;font-weight:300;color:var(--t-low);line-height:1.65;margin-bottom:1.3rem;flex:1}

/* --------------------------------------------------------------------------
   16. FORMS
   -------------------------------------------------------------------------- */
.form{background:var(--surface-2);border:1px solid var(--hairline);border-top:3px solid var(--red);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.4rem)}
.form__title{font-family:var(--display);font-size:1.375rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--t-hi);padding-bottom:1rem;margin-bottom:1.5rem;border-bottom:1px solid var(--hairline)}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.05rem}
.field label{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--t-low)}
.field label .req{color:var(--red-hot)}
.field input,.field select,.field textarea{
  background:var(--page);border:1px solid var(--hairline-2);
  border-radius:var(--radius);padding:12px 14px;
  font-family:var(--body);font-size:.9375rem;color:var(--t-hi);
  outline:none;transition:border-color .2s,background .2s;-webkit-appearance:none;appearance:none;width:100%;
}
.field select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1628' stroke-opacity='.55' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px;
}
.field select option{background:#fff;color:var(--t-hi)}
.field input::placeholder,.field textarea::placeholder{color:var(--t-faint)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px var(--red-glow)}
.field textarea{resize:vertical;min-height:118px;line-height:1.6}
.field--hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form__consent{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1.35rem}
.form__consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:var(--red)}
.form__consent span{font-size:11.5px;color:var(--t-low);line-height:1.55}
.form__msg{display:none;padding:.9rem 1.1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem}
.form__msg.is-ok{display:block;background:rgba(23,124,74,.10);border:1px solid rgba(23,124,74,.35);color:#12603A}
.form__msg.is-err{display:block;background:var(--red-glow);border:1px solid rgba(178,34,52,.35);color:#8E1424}

/* Contact info blocks */
.office{border-bottom:1px solid var(--hairline);padding-bottom:1.65rem;margin-bottom:1.65rem}
.office:last-of-type{border-bottom:0}
.office__name{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--red-hot);margin-bottom:.85rem}
.office__line{display:flex;gap:.9rem;font-size:.9375rem;font-weight:300;color:var(--t-mid);margin-bottom:.4rem;line-height:1.55}
.office__line dt{color:var(--t-hi);font-weight:500;min-width:62px;flex:none;font-size:.8125rem;padding-top:2px}
.office__line dd{margin:0}
.office__line a{color:var(--t-mid);text-decoration:none;transition:color .2s}
.office__line a:hover{color:var(--red)}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.foot{background:var(--navy);border-top:3px solid var(--red);padding:clamp(2.5rem,5vw,3.5rem) 0 2rem}
.foot__inner{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem;margin-bottom:2.75rem}
.foot__logo{height:34px;width:auto;margin-bottom:1rem}
.foot__tag{font-family:var(--display);font-size:1.125rem;font-weight:700;color:var(--t-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.9rem}
.foot__blurb{font-size:.8125rem;color:var(--t-low);line-height:1.65;max-width:34ch}
.foot h4{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--t-faint);margin-bottom:1rem}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.foot ul a{font-size:.8125rem;font-weight:300;color:var(--t-low);text-decoration:none;transition:color .2s}
.foot ul a:hover{color:var(--t-hi)}
.foot__office{margin-bottom:1.1rem}
.foot__region{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--red-hot);margin-bottom:.3rem}
.foot__addr{font-size:.75rem;font-weight:300;color:var(--t-low);line-height:1.6}
.foot__addr a{color:var(--t-low);text-decoration:none}
.foot__addr a:hover{color:var(--t-hi)}
.foot__bar{
  max-width:var(--maxw);margin-inline:auto;padding:1.6rem var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--t-faint);
}
.foot__bar a{color:var(--t-faint);text-decoration:none}
.foot__bar a:hover{color:var(--t-low)}

/* --------------------------------------------------------------------------
   18. MOTION
   -------------------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}
.rise.is-in{opacity:1;transform:none}
.rise[data-delay="1"]{transition-delay:.08s}
.rise[data-delay="2"]{transition-delay:.16s}
.rise[data-delay="3"]{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .specbar{grid-template-columns:repeat(2,1fr)}
  .specbar__cell{border-bottom:1px solid var(--hairline)}
  .specbar__cell:nth-child(2n){border-right:0}
  .foot__inner{grid-template-columns:1fr 1fr}
}

@media (max-width:960px){
  .nav__menu{display:none}
  .nav__cta .btn{display:none}
  .nav__burger{display:flex}
  .split,.split--even,.head--row{grid-template-columns:1fr;gap:2.5rem}
  .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .callout__inner{grid-template-columns:1fr}
}

@media (max-width:640px){
  body{font-size:15px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .specbar__cell{padding-block:1.4rem}
  .specbar__val{font-size:1.5rem}
  .foot__inner{grid-template-columns:1fr;gap:2rem}
  .form__row{grid-template-columns:1fr;gap:0}
  .hero--full{min-height:auto}
  .hero__inner{padding-top:8rem;padding-bottom:3rem}
  .reticle{display:none}
  .foot__bar{justify-content:flex-start}
  .btn{width:100%;justify-content:center}
  .hero__actions .btn,.endcap__actions .btn,.callout__cta .btn{width:100%}
  .nav__brand img{height:44px}
}

/* --------------------------------------------------------------------------
   20. PRINT — capability statements get printed a lot in this industry
   -------------------------------------------------------------------------- */
@media print{
  .nav,.nav__drawer,.hero__media,.reticle,.form,.endcap{display:none!important}
  body{background:#fff;color:#000}
  .h-xl,.h-lg,.h-md,.h-sm,.cell h3,.roster__type{color:#000}
  .band{padding-block:1.5rem;border:0}
  a{text-decoration:underline}
}

/* --------------------------------------------------------------------------
   21. COURSE CATALOG (sensor academy courses)
   -------------------------------------------------------------------------- */
.courses{border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden}
.course-group + .course-group{border-top:1px solid var(--hairline)}
.course-group__head{
  display:flex;align-items:center;gap:.85rem;
  padding:.9rem clamp(1rem,2vw,1.5rem);
  background:var(--surface-2);border-bottom:1px solid var(--hairline);
}
.band--navy .course-group__head{background:var(--surface-2)}
.course-group__badge{
  width:34px;height:34px;flex:none;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:var(--navy);
}
.course-group__badge svg{width:19px;height:19px;stroke-width:1.8}
.course-group__badge--eoir{background:#1c72b8}
.course-group__badge--isr{background:#2f8f4e}
.course-group__badge--acoustic{background:#c8621e}
.course-group__badge--ew{background:#8a3ffb}
.course-group__badge--radar{background:#1c72b8}
.course-group__badge--gen{background:#3a7bd5}
.course-group__title{
  font-family:var(--display);font-size:1.0625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--t-hi);
}
.course{
  display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;
  padding:.85rem clamp(1rem,2vw,1.5rem);
  border-bottom:1px solid var(--hairline);transition:background .18s;
}
.course:last-child{border-bottom:0}
.course:hover{background:var(--surface-hv)}
.course__name{font-size:.9375rem;font-weight:300;color:var(--t-mid);line-height:1.45}
.course__dur{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--t-hi);border:1px solid var(--hairline-2);background:var(--surface-2);
  padding:4px 11px;border-radius:var(--radius);white-space:nowrap;flex:none;
}
@media (max-width:520px){
  .course{grid-template-columns:1fr;gap:.4rem}
  .course__dur{justify-self:start}
}


/* ==========================================================================
   14. MEDIA CARDS — hover-zoom, lightbox, video facade   (added in v6)
   ========================================================================== */

/* ---- A cell that leads with an image ---------------------------------- */
.cell--media{padding:0;display:flex;flex-direction:column}
.cell--media .cell__body{padding:clamp(1.35rem,2.3vw,2rem)}
.cell--media .cell__body--tight{padding:.95rem 1.15rem}
.cell--media:hover{background:var(--navy)}

/* ---- Hover-zoom frame -------------------------------------------------- */
.zoom{
  position:relative;display:block;overflow:hidden;
  background:var(--surface-2);border-bottom:1px solid var(--hairline);
}
.zoom--sq{border:1px solid var(--hairline);border-radius:var(--radius)}
/* True proportions: full width, height follows the file. Never cropped,
   never distorted, never scaled on hover. */
.zoom > img{width:100%;height:auto;display:block}

.zoom__hint{display:none;
  position:absolute;right:.65rem;bottom:.65rem;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:rgba(6,12,22,.78);border:1px solid var(--hairline-2);
  border-radius:var(--radius);padding:.4rem .6rem;pointer-events:none;
  opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s;
}
.zoom:hover .zoom__hint,.zoom:focus-visible .zoom__hint{opacity:1;transform:none}

/* Photo not supplied yet — show the slot label instead of a broken image */
.zoom.is-missing{min-height:200px;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(135deg,rgba(178,34,52,.07),transparent 58%),
    repeating-linear-gradient(45deg,rgba(10,22,40,.035) 0 12px,transparent 12px 24px),
    var(--surface-2);}
.zoom.is-missing > img,.zoom.is-missing .zoom__hint{display:none}
.zoom.is-missing::before{
  content:attr(data-slot);
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-faint);text-align:center;padding:1.25rem;}

/* ---- Lightbox ---------------------------------------------------------- */
.lb{
  position:fixed;inset:0;z-index:300;display:none;
  align-items:center;justify-content:center;padding:clamp(1rem,5vw,3.5rem);
  background:rgba(6,12,22,.95);
}
.lb.is-open{display:flex}
.lb__img{max-width:100%;max-height:84vh;object-fit:contain;
  border:1px solid var(--hairline-2);border-radius:var(--radius)}
.lb__cap{
  position:absolute;left:0;right:0;bottom:clamp(.85rem,2.5vw,1.75rem);
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t-low);padding-inline:1rem}
.lb__x{
  position:absolute;top:clamp(.85rem,2.5vw,1.75rem);right:clamp(.85rem,2.5vw,1.75rem);
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--hairline-2);border-radius:var(--radius);
  color:#fff;font-size:22px;line-height:1;cursor:pointer;font-family:var(--body)}
.lb__x:hover{background:rgba(255,255,255,.08);border-color:#fff}
body.lb-locked{overflow:hidden}

/* ---- YouTube facade — no Google scripts load until play is pressed ----- */
.vid{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--hairline);border-radius:var(--radius);background:var(--steel);
}
.vid__poster{width:100%;height:100%;object-fit:cover;display:block}
.vid__play{
  position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(178,34,52,.94);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .22s,background .22s;
}
.vid__play svg{width:30px;height:30px;fill:currentColor;margin-left:3px}
.vid:hover .vid__play{transform:scale(1.09);background:var(--red-hot)}
.vid__play:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vid__label{
  position:absolute;left:0;right:0;bottom:0;padding:.85rem 1rem;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.7);background:linear-gradient(to top,rgba(6,12,22,.94),transparent);
}
.vid iframe{width:100%;height:100%;border:0;display:block}
.vid.is-playing .vid__play,
.vid.is-playing .vid__label,
.vid.is-playing .vid__poster{display:none}
.vid.is-missing .vid__poster{display:none}
.vid.is-missing{background:
  linear-gradient(135deg,rgba(178,34,52,.08),transparent 58%),
  repeating-linear-gradient(45deg,rgba(10,22,40,.035) 0 12px,transparent 12px 24px),
  var(--surface-2);}

/* ---- Team headshots: fall back to initials if a photo is missing ------- */
img.person__ph{object-fit:cover}
img.person__ph.is-missing{display:none}
.person__ph--fallback{display:flex;align-items:center;justify-content:center}

/* ---- Gated download page ---------------------------------------------- */
.gate{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.gate{grid-template-columns:1fr}}
.gate__list{list-style:none;display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem}
.gate__list li{position:relative;padding-left:1.5rem;font-size:.9375rem;font-weight:300;
  color:var(--t-mid);line-height:1.6}
.gate__list li::before{content:"\2192";position:absolute;left:0;top:0;color:var(--red-hot);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .zoom > img{transition:none}
  .zoom:hover > img,.zoom:focus-visible > img{transform:none}
  .vid:hover .vid__play{transform:none}
}


/* ==========================================================================
   22. LIGHT-THEME HELPERS  (v7)
   ========================================================================== */

/* Replaces the old inline style="color:#fff" lead-ins inside tick lists */
.hi{color:var(--t-hi);font-weight:600}

/* The spec bar sits directly under the hero and stays navy on purpose */
.specbar{--t-hi:#fff;--t-mid:rgba(255,255,255,.70);--t-low:rgba(255,255,255,.50);
         --t-faint:rgba(255,255,255,.32);--red-hot:#E24457}
.specbar__val{color:#fff}
.specbar__key{color:rgba(255,255,255,.5)}

/* Every framed photo keeps its own aspect ratio — see .zoom / .scope above */

/* Hairline separators read as too faint on white without a little weight */
.grid,.matrix,.roster,.people,.courses{background:var(--hairline-2)}
.zoom{border-bottom:1px solid var(--hairline-2)}

/* Red section rules — the main separator device on a white page */
.rule-red{height:3px;background:var(--red);border:0;margin-block:0}

@media print{
  .band--deep{box-shadow:none;background:#fff!important;color:#000!important}
  .foot{background:#fff!important;border-top:2px solid #000}
}

/* ==========================================================================
   23. AUTO-GALLERY + SENSOR FEED  (v8)
   ========================================================================== */

/* ---- Carousel controls, injected only when extra photos are found ------- */
.gal__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.30);border-radius:var(--radius);
  background:rgba(6,12,22,.62);color:#fff;cursor:pointer;
  font-size:22px;line-height:1;font-family:var(--body);
  transition:background .2s,border-color .2s,opacity .2s;
  opacity:.55;
}
.gal:hover .gal__nav,.gal:focus-within .gal__nav{opacity:1}
.gal__nav:hover{background:var(--red);border-color:var(--red)}
.gal__prev{left:.55rem}
.gal__next{right:.55rem}

.gal__count{
  position:absolute;top:.6rem;left:.6rem;z-index:3;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  color:#fff;background:rgba(6,12,22,.68);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:.3rem .5rem;pointer-events:none;
}
.gal__dots{
  position:absolute;left:0;right:0;bottom:.6rem;z-index:3;
  display:flex;justify-content:center;gap:5px;pointer-events:none;
}
.gal__dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.45);transition:.2s}
.gal__dot.is-on{width:17px;border-radius:3px;background:var(--red-hot)}

/* The hint chip would collide with the arrows */
.gal .zoom__hint{display:none}

@media (max-width:520px){
  .gal__nav{width:34px;height:34px;opacity:1}
  .gal .zoom__hint{display:none}
}

/* ---- EO / IR sensor feed ------------------------------------------------ */
.feed{border:1px solid var(--hairline-2);border-radius:var(--radius);overflow:hidden;background:var(--navy)}
.feed__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.7rem .9rem;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.10);
}
.feed__title{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.feed__switch{display:flex;gap:0;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);overflow:hidden}
.feed__btn{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  padding:.42rem .95rem;background:transparent;color:rgba(255,255,255,.62);
  border:0;cursor:pointer;transition:background .2s,color .2s;
}
.feed__btn + .feed__btn{border-left:1px solid rgba(255,255,255,.22)}
.feed__btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.feed__btn.is-on{background:var(--red);color:#fff}
.feed__stage{position:relative;aspect-ratio:16/9;background:#000}
.feed__vid{width:100%;height:100%;object-fit:cover;display:block}
.feed__vid[hidden]{display:none}
.feed__note{
  padding:.7rem .9rem;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.42);
  border-top:1px solid rgba(255,255,255,.10);
}

/* Per-shot caption in a named gallery (v11) */
.gal__label{
  position:absolute;top:.6rem;right:.6rem;z-index:3;max-width:60%;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:rgba(6,12,22,.72);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:.3rem .5rem;pointer-events:none;text-align:right;
}
@media (max-width:520px){.gal__label{display:none}}

/* Logo in the nav (v12) */
.nav__logo{height:62px;width:auto;display:block}
@media (max-width:860px){.nav__logo{height:44px}}


/* Headshots scale down gracefully on small screens (v13) */
@media (max-width:520px){
  .person__ph{width:104px;height:104px;font-size:1.4rem}
  .person{padding:1.5rem 1.25rem}
}

/* ==========================================================================
   24. LARGE MEDIA VIEWER — sensors and HCUs  (v14)
   ========================================================================== */

.viewer{
  border:1px solid var(--hairline-2);border-radius:var(--radius);
  overflow:hidden;background:var(--surface);
}

/* Row one — which system you are looking at */
.viewer__tabs{
  display:flex;flex-wrap:wrap;
  background:var(--surface-2);border-bottom:1px solid var(--hairline-2);
}
.viewer__tab{
  font-family:var(--display);font-size:.9375rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;line-height:1;
  padding:.9rem 1.2rem;background:transparent;border:0;
  border-right:1px solid var(--hairline);color:var(--t-low);
  cursor:pointer;transition:background .2s,color .2s;
}
.viewer__tab:hover{color:var(--t-hi);background:var(--surface-hv)}
.viewer__tab.is-on{background:var(--navy);color:#fff}
.viewer__tab:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* The image itself — large, letterboxed on black like a real sensor feed */
.viewer__stage{
  position:relative;aspect-ratio:16/9;background:#05090F;
  display:flex;align-items:center;justify-content:center;
}
.viewer__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;
}
.viewer__stage.is-missing::after{
  content:attr(data-slot);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.32);text-align:center;padding:1.5rem;
}
.viewer__stage.is-missing .viewer__img{display:none}

.viewer__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);
  background:rgba(6,12,22,.55);color:#fff;font-size:26px;line-height:1;
  font-family:var(--body);cursor:pointer;opacity:.6;
  transition:background .2s,border-color .2s,opacity .2s;
}
.viewer:hover .viewer__nav,.viewer:focus-within .viewer__nav{opacity:1}
.viewer__nav:hover{background:var(--red);border-color:var(--red)}
.viewer__prev{left:.75rem}
.viewer__next{right:.75rem}

.viewer__count{
  position:absolute;top:.75rem;left:.75rem;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#fff;
  background:rgba(6,12,22,.65);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:.35rem .55rem;pointer-events:none;
}
.viewer__caption{
  position:absolute;top:.75rem;right:.75rem;z-index:3;max-width:55%;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(6,12,22,.65);border:1px solid rgba(255,255,255,.20);
  border-radius:var(--radius);padding:.35rem .55rem;pointer-events:none;text-align:right;
}

/* Row two — which mode of the selected system */
.viewer__modes{
  display:flex;flex-wrap:wrap;gap:.45rem;padding:.85rem 1rem;
  background:var(--surface-2);border-top:1px solid var(--hairline-2);
}
.viewer__mode{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:.48rem .85rem;border:1px solid var(--hairline-2);border-radius:var(--radius);
  background:transparent;color:var(--t-low);cursor:pointer;transition:.18s;
}
.viewer__mode:hover{color:var(--t-hi);border-color:var(--t-hi)}
.viewer__mode.is-on{background:var(--red);border-color:var(--red);color:#fff}
.viewer__modes:empty{display:none}

@media (max-width:700px){
  .viewer__tab{font-size:.8125rem;padding:.7rem .85rem}
  .viewer__nav{width:38px;height:38px;opacity:1}
  .viewer__caption{display:none}
}