@import url('fonts.css');

/* ============================================================
   SCCI — "The Hidden Lens"
   Covert-surveillance identity: midnight navy, tactical amber,
   viewfinder framing, classified-document monospace labels.
   ============================================================ */

:root {
  /* Palette */
  --ink:      #080b12;   /* page base, deep night */
  --ink-2:    #0d1220;   /* elevated surface */
  --ink-3:    #121a2b;   /* cards */
  --steel:    #1c2740;   /* borders / hairlines */
  --steel-2:  #2a3a5c;
  --haze:     #8a99b7;   /* muted blue-grey text */
  --haze-dim: #5d6b88;
  --paper:    #eef2f9;   /* primary light text */
  --amber:    #f0a82c;   /* signature accent — reticle / IR glow */
  --amber-dim:#b47d1f;
  --signal:   #d21f3c;   /* patriotic red — primary CTA / live */
  --signal-lo:#a3182f;
  --flag-blue:#2f5fa8;

  /* Type */
  --f-display: 'Saira', system-ui, sans-serif;
  --f-cond:    'Saira Condensed', 'Saira', system-ui, sans-serif;
  --f-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --shell: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--paper);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Ambient grid + vignette on the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--steel) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .12;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 100%);
}
body > * { position: relative; z-index: 1; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--amber); color: #1a1206; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Typography helpers ---------- */
.h-display {
  font-family: var(--f-cond);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.eyebrow {
  font-family: var(--f-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px; background: var(--amber);
  opacity: .8;
}

.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: clamp(64px, 9vw, 128px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 {
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.005em;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  margin-top: .5rem;
}
.section-head p { color: var(--haze); margin-top: 1.1rem; font-size: 1.06rem; max-width: 62ch; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--amber);
  --fg: #14100a;
  display: inline-flex; align-items: center; gap: .6em;
  font-family: var(--f-mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .95em 1.5em;
  background: var(--bg); color: var(--fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  position: relative;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px var(--amber); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--signal { --bg: var(--signal); --fg: #fff; }
.btn--signal:hover { box-shadow: 0 10px 30px -10px var(--signal); }
.btn--ghost {
  --bg: transparent; --fg: var(--paper);
  border-color: var(--steel-2);
}
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); box-shadow: none; }
.btn .arw { transition: transform .25s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--steel);
  transition: background .3s;
}
.nav__inner {
  max-width: 1360px; margin-inline: auto;
  padding: .55rem clamp(16px, 3vw, 34px);
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand__chip {
  background: linear-gradient(180deg,#fff,#e9edf5);
  border-radius: 6px;
  padding: 7px 10px;
  display: flex; align-items: center;
  box-shadow: 0 2px 12px -4px rgba(0,0,0,.6);
}
.brand__chip img { height: 30px; width: auto; }
.brand__meta { display: flex; flex-direction: column; line-height: 1; }
.brand__meta b { font-family: var(--f-cond); font-weight: 700; letter-spacing: .04em; font-size: .98rem; text-transform: uppercase; }
.brand__meta span { font-family: var(--f-mono); font-size: .58rem; letter-spacing: .22em; color: var(--haze-dim); text-transform: uppercase; margin-top: 3px; }

.nav__links {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  flex: 1; list-style: none;
}
.nav__links a {
  font-family: var(--f-mono);
  font-size: .69rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--haze);
  padding: .5rem .5rem; border-radius: 3px;
  border-bottom: 2px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
  white-space: nowrap;
}
.nav__links a:hover { color: var(--paper); }
.nav__links a.is-active { color: var(--amber); border-bottom-color: var(--amber); }
.nav__cta { margin-left: .5rem; padding: .7rem 1rem; font-size: .68rem; flex-shrink: 0; }
.nav__cta-mobile { display: none; }

.nav__toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--steel-2); border-radius: 4px;
  width: 44px; height: 40px; cursor: pointer; color: var(--paper);
  align-items: center; justify-content: center;
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 1180px) {
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    height: 100vh; height: 100dvh; width: min(340px, 86vw);
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .1rem;
    background: var(--ink-2); border-left: 1px solid var(--steel);
    padding: 84px 22px 40px; margin: 0;
    transform: translateX(100%); transition: transform .4s var(--ease);
    overflow-y: auto;
  }
  .nav__links.open { transform: none; }
  .nav__cta-mobile { display: block; }
  .nav__cta-mobile a { border-bottom: 0 !important; }
  .nav__links a { padding: .85rem .6rem; font-size: .82rem; border-bottom: 1px solid var(--steel); border-radius: 0; }
  .nav__links a.is-active { border-bottom-color: var(--steel); border-left: 2px solid var(--amber); padding-left: .8rem; }
  .nav__backdrop {
    position: fixed; inset: 0; background: rgba(4,6,10,.6);
    opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 99;
  }
  .nav__backdrop.show { opacity: 1; pointer-events: auto; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: min(92vh, 860px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  border-bottom: 1px solid var(--steel);
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video, .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.3) contrast(1.05) brightness(.55);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 100% at 80% 0%, transparent 30%, var(--ink) 100%),
    linear-gradient(180deg, rgba(8,11,18,.35) 0%, rgba(8,11,18,.55) 40%, var(--ink) 100%);
}
/* faint scan-grid overlay in the viewfinder */
.hero__grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image:
    linear-gradient(rgba(240,168,44,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,168,44,.14) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(80% 70% at 50% 60%, #000, transparent 75%);
  opacity: .5;
}
.hero__content {
  position: relative; z-index: 4;
  max-width: var(--shell); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) clamp(48px, 8vw, 96px);
}
.hero h1 {
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
  line-height: .9; letter-spacing: -.01em;
  font-size: clamp(2.9rem, 9vw, 6.6rem);
  margin: 1.1rem 0 0;
  max-width: 16ch;
  text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.hero h1 em { font-style: normal; color: var(--amber); }
.hero__sub {
  margin-top: 1.4rem; max-width: 54ch;
  color: var(--haze); font-size: clamp(1.02rem, 1.6vw, 1.22rem);
}
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* Viewfinder brackets */
.viewfinder { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.viewfinder span {
  position: absolute; width: 42px; height: 42px;
  border: 2px solid rgba(240,168,44,.75);
}
.viewfinder span:nth-child(1) { top: 84px; left: 26px; border-right: 0; border-bottom: 0; }
.viewfinder span:nth-child(2) { top: 84px; right: 26px; border-left: 0; border-bottom: 0; }
.viewfinder span:nth-child(3) { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.viewfinder span:nth-child(4) { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }
.rec {
  position: absolute; top: 92px; right: 78px; z-index: 4;
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .2em;
  color: var(--paper); text-transform: uppercase;
}
.rec b { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: .18; } }
@media (max-width: 640px) { .rec { right: 22px; top: 78px; } .viewfinder span { width: 30px; height: 30px; } }

/* Hero readout strip */
.readout {
  border-top: 1px solid var(--steel);
  background: var(--ink-2);
}
.readout__inner {
  max-width: var(--shell); margin-inline: auto; padding: 1rem var(--gutter);
  display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; align-items: center;
  font-family: var(--f-mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--haze-dim); text-transform: uppercase;
}
.readout__inner b { color: var(--amber); font-weight: 500; }
.readout__inner span { display: inline-flex; gap: .6em; align-items: center; }

/* ============================================================
   FEATURE ROWS / TEXT BLOCKS
   ============================================================ */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.prose p { color: var(--haze); font-size: 1.08rem; }
.prose p + p { margin-top: 1.1rem; }
.prose .lead { color: var(--paper); font-size: 1.25rem; font-weight: 500; }

.framed {
  position: relative; border: 1px solid var(--steel);
  background: var(--ink-3); border-radius: var(--radius);
  overflow: hidden;
}
.framed video, .framed img { width: 100%; display: block; }
.framed__tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber);
  background: rgba(8,11,18,.7); padding: .35em .6em; border-radius: 3px;
  border: 1px solid var(--steel-2);
}

/* Capability tiles */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 1px; background: var(--steel); border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; }
.cap { background: var(--ink-2); padding: 1.7rem 1.5rem; transition: background .3s; }
.cap:hover { background: var(--ink-3); }
.cap__n { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .2em; color: var(--haze-dim); }
.cap h3 { font-family: var(--f-cond); text-transform: uppercase; font-weight: 700; font-size: 1.32rem; margin: .8rem 0 .5rem; letter-spacing: .01em; }
.cap p { color: var(--haze); font-size: .96rem; }

/* ============================================================
   PRODUCT / MEDIA GRID + reticle hover
   ============================================================ */
.grid-cards {
  display: grid; gap: clamp(14px, 1.6vw, 22px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr));
}
.card {
  position: relative; display: block;
  background: var(--ink-3); border: 1px solid var(--steel);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover { border-color: var(--amber); transform: translateY(-3px); }
.card__img { aspect-ratio: 4/3; overflow: hidden; background: #05070c; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease), filter .4s; filter: saturate(.92); }
.card:hover .card__img img { transform: scale(1.06); filter: saturate(1.05); }
.card__body { padding: .95rem 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.card__name { font-family: var(--f-cond); text-transform: uppercase; font-weight: 600; font-size: 1.04rem; letter-spacing: .01em; line-height: 1.1; }
.card__idx { font-family: var(--f-mono); font-size: .64rem; color: var(--haze-dim); letter-spacing: .12em; }
/* reticle corners on hover */
.card__reticle { position: absolute; inset: 10px; pointer-events: none; opacity: 0; transition: opacity .3s; }
.card:hover .card__reticle { opacity: 1; }
.card__reticle::before, .card__reticle::after {
  content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid var(--amber);
}
.card__reticle::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.card__reticle::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.card__scan {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: 0; box-shadow: 0 0 12px var(--amber);
}
.card:hover .card__scan { animation: scan 1.6s var(--ease) infinite; }
@keyframes scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ============================================================
   PARTNER WALL
   ============================================================ */
.logos {
  display: grid; gap: 1px; background: var(--steel);
  border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fill, minmax(min(100%,190px),1fr));
}
.logos__cell {
  background: var(--ink-2); aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  padding: 1.6rem; transition: background .3s;
}
.logos__cell:hover { background: var(--ink-3); }
.logos__cell img {
  max-height: 62px; max-width: 78%; width: auto; object-fit: contain;
  filter: brightness(0) invert(1) opacity(.62);
  transition: filter .3s, transform .3s;
}
.logos__cell:hover img { filter: none; transform: scale(1.04); }
/* logos on opaque backgrounds (JPGs): show on a light chip, no monochrome invert */
.logos__cell--light img {
  filter: none; background: #f3f5f9; border-radius: 4px;
  padding: 10px 14px; max-height: 74px; opacity: .92;
}
.logos__cell--light:hover img { opacity: 1; }

/* ============================================================
   TEAM
   ============================================================ */
.team { display: grid; gap: clamp(18px, 2.4vw, 28px); grid-template-columns: repeat(auto-fill, minmax(min(100%,300px),1fr)); }
.member {
  background: var(--ink-2); border: 1px solid var(--steel);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.member__photo { aspect-ratio: 3/3.4; overflow: hidden; background: #05070c; position: relative; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.03); transition: filter .5s, transform .6s var(--ease); }
.member:hover .member__photo img { filter: none; transform: scale(1.04); }
.member__photo::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 55%, rgba(8,11,18,.85)); }
.member__id {
  position: absolute; bottom: 12px; left: 14px; right: 14px; z-index: 2;
}
.member__role { font-family: var(--f-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.member__name { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin-top: .3rem; }
.member__bio { padding: 1.1rem 1.2rem 1.3rem; color: var(--haze); font-size: .92rem; }
.member__bio .clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.member__bio .clamp.open { -webkit-line-clamp: unset; display: block; }
.bio-toggle { margin-top: .7rem; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.bio-toggle::after { content: " +"; }
.bio-toggle[aria-expanded="true"]::after { content: " −"; }

/* ============================================================
   SPECS (equipment datasheets)
   ============================================================ */
.spec-group { border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.1rem; background: var(--ink-2); }
.spec-group__head { display: flex; align-items: center; gap: 1.2rem; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--steel); }
.spec-group__logo { height: 40px; width: 150px; display: flex; align-items: center; }
.spec-group__logo img { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; filter: brightness(0) invert(1) opacity(.9); }
.spec-group__head b { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; letter-spacing: .02em; }
.spec-sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr)); }
.spec-sheet {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.5rem;
  border-top: 1px solid var(--steel); border-left: 1px solid var(--steel);
  color: var(--haze); transition: background .25s, color .25s;
  font-family: var(--f-mono); font-size: .82rem; letter-spacing: .04em;
}
.spec-sheet:hover { background: var(--ink-3); color: var(--paper); }
.spec-sheet svg { width: 18px; height: 18px; color: var(--amber); flex-shrink: 0; }
.spec-sheet b { font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }
.spec-sheet small { display: block; color: var(--haze-dim); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }

/* ============================================================
   EVENTS timeline
   ============================================================ */
.timeline { border-left: 2px solid var(--steel); margin-left: 8px; }
.event { position: relative; padding: 0 0 clamp(28px,4vw,48px) clamp(22px, 4vw, 40px); }
.event::before {
  content: ""; position: absolute; left: -8px; top: 6px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--ink); border: 2px solid var(--amber);
}
.event:last-child { padding-bottom: 0; }
.event__date { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.event__card {
  margin-top: .8rem; display: grid; grid-template-columns: 220px 1fr; gap: 0;
  border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; background: var(--ink-2);
}
@media (max-width: 680px) { .event__card { grid-template-columns: 1fr; } }
.event__img { background: #05070c; overflow: hidden; }
.event__img img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.event__body { padding: 1.3rem 1.5rem; }
.event__body h3 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.event__meta { font-family: var(--f-mono); font-size: .72rem; color: var(--haze-dim); margin-top: .5rem; letter-spacing: .06em; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.event__body p { color: var(--haze); margin-top: .8rem; font-size: .96rem; }

/* ============================================================
   VIDEOS
   ============================================================ */
.vgroup + .vgroup { margin-top: clamp(40px, 6vw, 72px); }
.vgroup__title { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem,3.5vw,2.2rem); letter-spacing: .01em; margin-bottom: 1.4rem; display: flex; align-items: center; gap: .8rem; }
.vgroup__title::before { content:""; width: 10px; height: 10px; background: var(--amber); transform: rotate(45deg); }
.vgrid { display: grid; gap: clamp(16px,2vw,24px); grid-template-columns: repeat(auto-fill, minmax(min(100%,340px),1fr)); }
.vcard { border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.vcard video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.vcard__label { padding: .85rem 1.1rem; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .06em; color: var(--haze); border-top: 1px solid var(--steel); }
.vcard__label b { color: var(--paper); }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgba(4,6,10,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb.open { display: flex; }
.lb__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border: 1px solid var(--steel-2); box-shadow: 0 30px 80px -20px #000; }
.lb__cap { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-family: var(--f-mono); font-size: .8rem; letter-spacing: .1em; color: var(--haze); text-transform: uppercase; }
.lb__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; border: 1px solid var(--steel-2); background: rgba(13,18,32,.8);
  color: var(--paper); cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, background .2s;
}
.lb__btn:hover { border-color: var(--amber); color: var(--amber); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__prev { left: 3vw; } .lb__next { right: 3vw; }
.lb__close { top: 3vh; right: 3vw; transform: none; }
.lb__count { position: absolute; top: 3vh; left: 3vw; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .16em; color: var(--amber); }
@media (max-width: 640px) { .lb__prev { left: 8px; } .lb__next { right: 8px; } .lb__btn { width: 44px; height: 44px; } }

/* Catalog/reader grid (portrait pages) */
.pages-grid { display: grid; gap: clamp(12px,1.6vw,20px); grid-template-columns: repeat(auto-fill, minmax(min(100%,220px),1fr)); }
.page-thumb { position: relative; border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #fff; transition: border-color .3s, transform .3s; }
.page-thumb:hover { border-color: var(--amber); transform: translateY(-3px); }
.page-thumb img { width: 100%; display: block; }
.page-thumb__n { position: absolute; top: 8px; left: 8px; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; background: rgba(8,11,18,.8); color: var(--amber); padding: .25em .5em; border-radius: 3px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px),1fr)); gap: clamp(14px,2vw,22px); }
.ccard { border: 1px solid var(--steel); background: var(--ink-2); border-radius: var(--radius); padding: 1.6rem 1.6rem; transition: border-color .3s; }
.ccard:hover { border-color: var(--amber); }
.ccard__role { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.ccard__name { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1; margin: .5rem 0 1rem; }
.ccard a { display: flex; align-items: center; gap: .6rem; color: var(--haze); font-size: .95rem; padding: .3rem 0; transition: color .2s; }
.ccard a:hover { color: var(--amber); }
.ccard svg { width: 16px; height: 16px; color: var(--haze-dim); flex-shrink: 0; }

/* CTA band */
.cta-band { border: 1px solid var(--steel); border-radius: var(--radius); background:
    radial-gradient(120% 160% at 100% 0%, rgba(240,168,44,.10), transparent 55%), var(--ink-2);
  padding: clamp(36px,6vw,72px); text-align: center; position: relative; overflow: hidden; }
.cta-band h2 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem,5vw,3.4rem); line-height: .98; }
.cta-band p { color: var(--haze); max-width: 52ch; margin: 1rem auto 2rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--steel); background: var(--ink-2); padding-block: clamp(44px,6vw,72px) 2rem; margin-top: 0; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px,4vw,48px); }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; } }
.footer__brand { display:flex; align-items:center; gap:.7rem; margin-bottom: 1rem; }
.footer p { color: var(--haze); font-size: .92rem; max-width: 42ch; }
.footer h4 { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--haze-dim); margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer ul a { color: var(--haze); font-size: .92rem; transition: color .2s; }
.footer ul a:hover { color: var(--amber); }
.footer__bar { border-top: 1px solid var(--steel); margin-top: clamp(32px,5vw,52px); padding-top: 1.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; color: var(--haze-dim); text-transform: uppercase; }

/* ============================================================
   PAGE HERO (interior pages)
   ============================================================ */
.phero { padding: clamp(56px,10vw,120px) 0 clamp(30px,5vw,52px); border-bottom: 1px solid var(--steel); position: relative; overflow: hidden; }
.phero::after {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image: linear-gradient(rgba(240,168,44,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(240,168,44,.10) 1px, transparent 1px);
  background-size: 52px 52px; mask-image: radial-gradient(70% 120% at 0% 0%, #000, transparent 70%);
}
.phero h1 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; font-size: clamp(2.6rem, 7vw, 5rem); margin-top: .8rem; }
.phero p { color: var(--haze); max-width: 62ch; margin-top: 1.1rem; font-size: 1.08rem; }

/* Notes / callout */
.note { border: 1px solid var(--steel); border-left: 3px solid var(--amber); background: var(--ink-2); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.note ul { margin: 0; padding-left: 1.1rem; color: var(--haze); }
.note li + li { margin-top: .4rem; }
.note__title { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: .7rem; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .card__scan, .rec b { animation: none !important; }
  .hero__media video { display: none; }
}

/* Utility */
.mt-2 { margin-top: 2rem; } .mt-1 { margin-top: 1rem; }
.center { text-align: center; }
.divider { height: 1px; background: var(--steel); border: 0; margin: 0; }

/* ============================================================
   RAPTOR — features, chips, systems (consolidated content)
   ============================================================ */
.modalities { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.modalities li { position: relative; padding-left: 1.3rem; color: var(--haze); font-size: .95rem; }
.modalities li::before { content: "▹"; position: absolute; left: 0; color: var(--amber); }

.features { display: grid; gap: clamp(20px, 3vw, 40px); }
.feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 3.5vw, 56px); align-items: center; }
.feature--rev .feature__media { order: 2; }
@media (max-width: 820px) { .feature, .feature--rev { grid-template-columns: 1fr; } .feature--rev .feature__media { order: 0; } }
.feature__media { position: relative; border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; background: #05070c; aspect-ratio: 16/10; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.03); transition: transform .6s var(--ease); }
.feature:hover .feature__media img { transform: scale(1.04); }
.feature__body h3 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; margin: .5rem 0 .8rem; }
.feature__body p { color: var(--haze); font-size: 1.02rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.chip { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
  border: 1px solid var(--steel-2); border-radius: 999px; padding: .35em .9em; background: color-mix(in srgb, var(--amber) 6%, transparent); }

.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: clamp(16px,2vw,24px); }
.sys-card { border: 1px solid var(--steel); border-radius: var(--radius); overflow: hidden; background: var(--ink-2); transition: border-color .3s, transform .3s; }
.sys-card:hover { border-color: var(--amber); transform: translateY(-3px); }
.sys-card__img { aspect-ratio: 16/11; display: flex; align-items: center; justify-content: center; padding: 1.6rem; background: radial-gradient(120% 120% at 50% 20%, #16203a, #080b12); }
.sys-card__img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)); }
.sys-card__body { padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--steel); }
.sys-card__body h3 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; margin-top: .4rem; letter-spacing: .01em; }

/* ============================================================
   PUBLIC SITE — landing, TX-DIR, pricing table, RAD
   ============================================================ */
.pub-hero { position: relative; min-height: min(90vh, 820px); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--steel); }
.pub-hero__media { position: absolute; inset: 0; z-index: 0; }
.pub-hero__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) contrast(1.05) brightness(.5); }
.pub-hero__scrim { position: absolute; inset: 0; z-index: 1; background:
    radial-gradient(120% 100% at 20% 0%, transparent 20%, var(--ink) 100%),
    linear-gradient(180deg, rgba(8,11,18,.45), rgba(8,11,18,.6) 45%, var(--ink)); }
.pub-hero__grid { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(rgba(240,168,44,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(240,168,44,.12) 1px, transparent 1px);
  background-size: 52px 52px; mask-image: radial-gradient(75% 70% at 50% 50%, #000, transparent 78%); opacity: .5; }
.pub-hero__content { position: relative; z-index: 4; max-width: var(--shell); margin-inline: auto; width: 100%; padding: 0 var(--gutter); }
.pub-hero h1 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; line-height: .9; letter-spacing: -.01em;
  font-size: clamp(3rem, 9vw, 7rem); margin: 1.1rem 0 0; max-width: 15ch; text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.pub-hero h1 em { font-style: normal; color: var(--amber); }
.pub-hero__sub { margin-top: 1.4rem; max-width: 56ch; color: var(--haze); font-size: clamp(1.02rem, 1.6vw, 1.24rem); }
.pub-hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* Access split cards on landing */
.access { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: clamp(16px,2vw,24px); }
.access-card { position: relative; border: 1px solid var(--steel); border-radius: var(--radius); background: var(--ink-2); padding: 2rem 1.9rem; overflow: hidden; transition: border-color .3s, transform .3s; display: flex; flex-direction: column; }
.access-card:hover { border-color: var(--amber); transform: translateY(-3px); }
.access-card__tag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); }
.access-card h3 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: 1.7rem; line-height: 1; margin: .7rem 0 .7rem; }
.access-card p { color: var(--haze); font-size: .96rem; flex: 1; }
.access-card .btn { margin-top: 1.4rem; align-self: flex-start; }
.access-card--secure { background: radial-gradient(130% 130% at 100% 0%, rgba(210,31,60,.12), transparent 55%), var(--ink-2); }

/* Pricing table */
.pricing-wrap { overflow-x: auto; border: 1px solid var(--steel); border-radius: var(--radius); }
table.pricing { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .92rem; }
table.pricing thead th { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--haze-dim);
  text-align: left; padding: .9rem 1.1rem; background: var(--ink-3); border-bottom: 1px solid var(--steel); white-space: nowrap; }
table.pricing td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--steel); color: var(--paper); vertical-align: top; }
table.pricing tbody tr:hover { background: var(--ink-2); }
table.pricing .p-name { font-weight: 600; }
table.pricing .p-list { color: var(--haze); }
table.pricing .p-dir { color: var(--amber); font-family: var(--f-mono); white-space: nowrap; }
.tier-note { font-family: var(--f-mono); font-size: .6rem; color: var(--haze-dim); letter-spacing: .06em; }

/* Public nav wordmark: keep same nav styles. Simple public nav variant */
.pubnav .nav__links a { font-size: .74rem; }

/* ============================================================
   SECURE PORTAL LOGIN
   ============================================================ */
.login { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 2rem 1.2rem; overflow: hidden; }
.login__media { position: absolute; inset: 0; z-index: 0; }
.login__media video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05) brightness(.42); }
.login__scrim { position: absolute; inset: 0; z-index: 1; background:
    radial-gradient(90% 90% at 50% 40%, rgba(8,11,18,.55), var(--ink) 100%),
    linear-gradient(180deg, rgba(8,11,18,.6), rgba(8,11,18,.75)); }
.login__grid { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(rgba(240,168,44,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(240,168,44,.14) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(60% 55% at 50% 45%, #000, transparent 80%); opacity: .55; }
.login .viewfinder span { border-color: rgba(240,168,44,.55); }

.login__card { position: relative; z-index: 4; width: min(460px, 100%);
  background: color-mix(in srgb, var(--ink-2) 86%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid var(--steel-2); border-radius: 8px; padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 40px 100px -30px #000; text-align: center; }
.login__card .brand__chip img { height: 40px; }
.login__card h1 { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(2.2rem, 6vw, 3rem); line-height: .95; margin: .8rem 0 0; letter-spacing: -.005em; }
.login__lead { color: var(--haze); font-size: .96rem; margin: 1rem 0 1.6rem; }

.login__error { border: 1px solid var(--signal); background: color-mix(in srgb, var(--signal) 12%, transparent);
  color: #ffd7dd; font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; }
.login__note--ok { border: 1px solid var(--steel-2); background: var(--ink-3); color: var(--haze);
  font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; padding: .7rem 1rem; border-radius: 4px; margin-bottom: 1rem; }

.login__form { text-align: left; }
.login__label { display: block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin-bottom: .55rem; }
.login__field { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--steel-2); border-radius: 5px; overflow: hidden; background: var(--ink); transition: border-color .2s; }
.login__field:focus-within { border-color: var(--amber); }
.login__field input { flex: 1; background: transparent; border: 0; color: var(--paper); font-family: var(--f-body); font-size: 1.05rem; padding: .9rem 1rem; outline: none; letter-spacing: .12em; }
.login__field input::placeholder { color: var(--haze-dim); letter-spacing: 0; }
.login__field button { background: var(--amber); color: #14100a; border: 0; padding: 0 1.1rem; cursor: pointer; display: flex; align-items: center; transition: background .2s, transform .2s; }
.login__field button:hover { background: #ffbf4d; }
.login__field button:active { transform: scale(.96); }

.login__help { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--steel);
  color: var(--haze); font-size: .88rem; text-align: left; }
.login__help svg { color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.login__help a { color: var(--amber); font-weight: 600; }
.login__help a:hover { text-decoration: underline; }
.login__back { display: inline-block; margin-top: 1.2rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--haze-dim); }
.login__back:hover { color: var(--paper); }

/* ===== BOOT / LOADING SCREEN =====
   Ported from scci-overhaul index.html, re-tokenised to the Hidden Lens palette
   (amber/ink instead of blue/steel) and IBM Plex Mono instead of JetBrains Mono. */
.boot-screen{
  position:fixed; inset:0;
  z-index:5000;
  background:
    radial-gradient(circle at 50% 42%, rgba(240,168,44,.07) 0%, transparent 55%),
    var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
.boot-screen::before{
  content:'';
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0px, transparent 1px, transparent 3px);
  pointer-events:none;
}
.boot-screen.boot-hide{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:30px;
  opacity:0; transform:scale(.92);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.boot-screen.boot-in .boot-content{ opacity:1; transform:scale(1); }
.boot-ring-wrap{
  position:relative; width:160px; height:160px;
  display:flex; align-items:center; justify-content:center;
}
.boot-ring{ position:absolute; inset:0; }
.boot-ring-track{ fill:none; stroke:rgba(240,168,44,.15); stroke-width:2; }
.boot-ring-dash{
  fill:none; stroke:rgba(240,168,44,.4); stroke-width:1;
  stroke-dasharray:5 9;
  transform-origin:80px 80px;
  animation:bootDashSpin 6s linear infinite reverse;
}
.boot-ring-progress{
  fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:100 340;
  transform-origin:80px 80px;
  filter:drop-shadow(0 0 6px rgba(240,168,44,.85));
  animation:bootRingSpin 1.3s linear infinite;
}
@keyframes bootRingSpin{ to{ transform:rotate(360deg); } }
@keyframes bootDashSpin{ to{ transform:rotate(360deg); } }
.boot-logo{
  width:82px; height:82px; object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(240,168,44,.55)) drop-shadow(0 0 3px rgba(255,255,255,.4));
  animation:bootLogoPulse 2.4s ease-in-out infinite;
}
@keyframes bootLogoPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}
.boot-status-text{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--amber);
  text-shadow:0 0 10px rgba(240,168,44,.6);
  transition:color .3s ease, text-shadow .3s ease;
  white-space:nowrap;
}
.boot-status-text.boot-granted{
  color:var(--paper);
  text-shadow:0 0 12px rgba(240,168,44,.85), 0 0 24px rgba(240,168,44,.45);
}
@media(prefers-reduced-motion: reduce){
  .boot-ring-progress, .boot-ring-dash, .boot-logo{ animation:none; }
}

/* ===== LOCK UNLOCK ANIMATION =====
   Ported from scci-overhaul index.html access gate. The original drove this from a
   client-side password check; here it plays only AFTER login.php has already
   authenticated server-side and set the cookie. Presentation only. */
.lock-anim{
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
  padding:2rem 0;
}
.lock-anim.active{ display:flex; }
.lock-anim-svg{ overflow:visible; }
.lock-ring{ fill:none; stroke:rgba(240,168,44,.22); stroke-width:1; }
.lock-ring-2{
  fill:none;
  stroke:rgba(240,168,44,.55); stroke-width:1;
  stroke-dasharray:6 10;
  transform-origin:100px 120px;
  animation:lockRingSpin 6s linear infinite;
}
@keyframes lockRingSpin{ to{ transform:rotate(360deg); } }
.lock-body{
  fill:rgba(13,18,32,.92);
  stroke:var(--amber);
  stroke-width:3;
  filter:url(#lockGlow);
}
.lock-shackle{ transform-origin:65px 100px; transform:rotate(0deg); }
.lock-shackle path{
  fill:none;
  stroke:var(--amber);
  stroke-width:9;
  stroke-linecap:round;
  filter:url(#lockGlow);
}
.lock-anim.unlocking .lock-shackle{
  animation:lockShackleOpen 1s cubic-bezier(.34,1.56,.64,1) forwards .25s;
}
@keyframes lockShackleOpen{
  0%{ transform:rotate(0deg) translate(0,0); }
  100%{ transform:rotate(-40deg) translate(-8px,-5px); }
}
.lock-anim.unlocking .lock-body{ animation:lockBodyFlash 1.4s ease .2s; }
@keyframes lockBodyFlash{
  0%,100%{ stroke:var(--amber); }
  45%{ stroke:var(--paper); }
}
.lock-keyhole-c, .lock-keyhole-t{ fill:var(--ink); }
.lock-scan{ stroke:rgba(240,168,44,.9); stroke-width:1.5; opacity:0; }
.lock-anim.unlocking .lock-scan{ animation:lockScanSweep 1.4s ease .25s; }
@keyframes lockScanSweep{
  0%{ opacity:0; transform:translateY(-70px); }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateY(70px); }
}
.lock-anim-status{
  font-family:var(--f-mono); font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--amber);
  text-shadow:0 0 10px rgba(240,168,44,.6);
  min-height:16px;
}
.lock-anim-bar{
  width:220px; height:2px;
  background:var(--steel);
  position:relative; overflow:hidden;
}
.lock-anim-bar::after{
  content:'';
  position:absolute; inset:0;
  background:var(--amber);
  box-shadow:0 0 8px rgba(240,168,44,.85);
  transform:translateX(-100%);
}
.lock-anim.unlocking .lock-anim-bar::after{ animation:lockBarFill 1.6s ease forwards .2s; }
@keyframes lockBarFill{ to{ transform:translateX(0); } }

/* fade to black before handing off to the portal */
.login__blackout{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  opacity:0; pointer-events:none;
  transition:opacity .7s ease;
}
.login__blackout.visible{ opacity:1; }

@media(prefers-reduced-motion: reduce){
  .lock-ring-2{ animation:none; }
  .lock-anim.unlocking .lock-shackle{ animation-duration:.01s; animation-delay:0s; }
  .lock-anim.unlocking .lock-scan,
  .lock-anim.unlocking .lock-body{ animation:none; }
  .lock-anim.unlocking .lock-anim-bar::after{ animation-duration:.2s; }
}


/* ===== COVERT CATALOG =====
   Ported from scci-overhaul catalog.html (search, page viewer, zoom/pan lightbox,
   download panel). The overhaul's own token names are redefined on .catalog-x below
   so these rules resolve through the Hidden Lens palette without rewriting each rule.
   Green status LEDs are kept deliberately — they read as equipment indicators. */
.catalog-x,
.ec-x,
.rp-x,
.ev-x,
.pr-x,
.dp-x,
.rad-x{
  --bg:            var(--ink);
  --panel:         var(--ink-2);
  --panel-2:       var(--ink-3);
  --border:        var(--steel);
  --border-bright: var(--steel-2);
  --blue:          var(--amber-dim);
  --blue-bright:   var(--amber);
  --steel:         var(--haze);
  --steel-bright:  var(--amber);
  --text:          var(--paper);
  --text-dim:      var(--haze);
  --text-mute:     var(--haze-dim);
}
  /* ===== CATALOG SEARCH ===== */
  .catalog-search-section{padding:34px 0 0;}
  .catalog-search-bar{
    position:relative;
    display:flex; align-items:center; gap:14px;
    background:var(--panel);
    border:1px solid rgba(240,168,44,0.4);
    box-shadow:0 0 0 1px rgba(240,168,44,0.08), 0 0 24px rgba(240,168,44,0.08);
    padding:16px 22px;
  }
  .catalog-search-bar svg{flex:none;}
  .catalog-search-input{
    flex:1; min-width:0;
    background:none; border:none; outline:none;
    font-family:var(--f-mono); font-size:14px; letter-spacing:0.02em;
    color:var(--text);
  }
  .catalog-search-input::placeholder{color:var(--text-mute);}
  .catalog-search-hint{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em;
    color:var(--text-mute); white-space:nowrap; text-transform:uppercase;
  }
  .catalog-search-results{
    position:relative;
    margin-top:-1px;
    background:var(--panel-2);
    border:1px solid rgba(240,168,44,0.4);
    border-top:none;
    max-height:360px;
    overflow-y:auto;
    display:none;
  }
  .catalog-search-results.visible{display:block;}
  .catalog-search-result{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:13px 22px;
    border-bottom:1px solid var(--border);
    cursor:pointer;
    transition:background .15s ease;
  }
  .catalog-search-result:last-child{border-bottom:none;}
  .catalog-search-result:hover, .catalog-search-result.active-result{background:rgba(240,168,44,0.08);}
  .catalog-search-result-name{font-size:13.5px; color:var(--text);}
  .catalog-search-result-name b{color:var(--blue-bright); font-weight:600;}
  .catalog-search-result-page{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.06em;
    color:var(--blue-bright); white-space:nowrap; flex:none;
  }
  .catalog-search-empty{
    padding:16px 22px; font-size:13px; color:var(--text-mute);
    font-family:var(--f-mono);
  }
  .catalog-search-results{
    scrollbar-width:thin;
    scrollbar-color:var(--blue-bright) rgba(8,11,18,0.6);
  }
  .catalog-search-results::-webkit-scrollbar{
    width:9px;
  }
  .catalog-search-results::-webkit-scrollbar-track{
    background:rgba(8,11,18,0.6);
  }
  .catalog-search-results::-webkit-scrollbar-thumb{
    background-color:rgba(240,168,44,0.15);
    background-image:repeating-linear-gradient(to bottom,
      var(--blue-bright) 0px, var(--blue-bright) 3px,
      transparent 3px, transparent 7px);
    box-shadow:0 0 6px rgba(240,168,44,0.7);
    border-radius:0;
  }
  .catalog-search-results::-webkit-scrollbar-thumb:hover{
    background-image:repeating-linear-gradient(to bottom,
      #fff 0px, #fff 3px,
      transparent 3px, transparent 7px);
    box-shadow:0 0 10px rgba(240,168,44,0.9);
  }

  /* ===== CATALOG SPLIT ===== */
  .catalog-split{background:var(--bg); padding-top:0;}
  .catalog-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:36px;
    align-items:stretch;
  }

  /* ---- Preview / Viewer : CYBERPUNK-INDUSTRIAL ---- */
  .catalog-viewer{
    position:relative;
    background:
      linear-gradient(180deg, rgba(240,168,44,0.04) 0%, transparent 12%),
      #0d1220;
    border:1px solid #2a3a5c;
    box-shadow:
      inset 0 0 0 1px rgba(0,0,0,0.6),
      inset 0 1px 0 rgba(255,255,255,0.03);
    padding:0;
    display:flex;
    flex-direction:column;
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
  /* hazard stripe bar */
  .viewer-hazard{
    height:8px;
    background:repeating-linear-gradient(135deg, #0d1220 0 14px, #f0a82c 14px 28px);
    opacity:0.9;
  }
  /* rivets */
  .viewer-rivets span{
    position:absolute; width:6px; height:6px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #5d6b88, #121a2b 70%);
    box-shadow:0 0 0 1px rgba(0,0,0,0.6);
  }
  .viewer-rivets span:nth-child(1){top:18px; left:10px;}
  .viewer-rivets span:nth-child(2){top:18px; right:10px;}
  .viewer-rivets span:nth-child(3){bottom:10px; left:10px;}
  .viewer-rivets span:nth-child(4){bottom:10px; right:10px;}

  .viewer-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px 14px;
    border-bottom:1px solid #1c2740;
  }
  .viewer-sys{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em;
    color:#5d6b88; text-transform:uppercase; display:flex; align-items:center; gap:8px;
  }
  .viewer-sys .led{
    width:7px; height:7px; border-radius:50%; background:#3ee66b;
    box-shadow:0 0 6px 1px #3ee66b;
    animation:ledPulse 1.6s ease-in-out infinite;
  }
  @keyframes ledPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
  .viewer-chip{
    font-family:var(--f-mono); font-size:10.5px; color:var(--blue-bright);
    background:rgba(8,11,18,0.75); border:1px solid rgba(240,168,44,0.4);
    padding:4px 9px; letter-spacing:0.06em;
  }
  .viewer-chip.live{color:#8fdc8f; border-color:rgba(143,220,143,0.4);}
  .viewer-count{
    font-family:var(--f-mono); font-size:13px; color:var(--blue-bright);
    letter-spacing:0.08em; font-variant-numeric:tabular-nums;
    text-shadow:0 0 8px rgba(240,168,44,0.5);
  }

  .viewer-stage-outer{ position:relative; padding:22px; padding-top:18px; }
  .viewer-enlarge-row{ padding:0 22px 14px; }
  .enlarge-btn{
    width:100%;
    display:flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--blue-bright);
    background:rgba(240,168,44,0.06);
    border:1px solid rgba(240,168,44,0.35);
    padding:11px 16px;
    cursor:pointer;
    transition:background .2s, border-color .2s, color .2s;
  }
  .enlarge-btn:hover{ background:rgba(240,168,44,0.14); border-color:var(--blue-bright); }
  .enlarge-btn svg{ flex:none; }
  .viewer-stage{
    position:relative;
    background:#080b12;
    border:1px solid #121a2b;
    aspect-ratio:8.5/11;
    max-height:520px;
    margin:0 auto;
    width:100%;
    overflow:hidden;
    cursor:default;
  }
  /* scanlines + grid texture */
  .viewer-stage::before{
    content:'';
    position:absolute; inset:0; z-index:5; pointer-events:none;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, transparent 1px, transparent 3px);
    mix-blend-mode:overlay;
  }
  .viewer-stage::after{
    content:'';
    position:absolute; inset:0; z-index:4; pointer-events:none;
    background-image:
      repeating-linear-gradient(0deg, rgba(240,168,44,0.05) 0px, transparent 1px, transparent 34px),
      repeating-linear-gradient(90deg, rgba(240,168,44,0.05) 0px, transparent 1px, transparent 34px);
  }
  .catalog-page{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transform:translateX(0);
    transition:transform .42s cubic-bezier(.65,0,.35,1);
  }
  .catalog-page.active{opacity:1; visibility:visible; z-index:2;}
  .catalog-page img{width:100%; height:100%; object-fit:contain; display:block; background:#080b12;}
  .catalog-page .page-tag{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em;
    color:var(--blue-bright); text-transform:uppercase; margin-bottom:18px;
  }
  .catalog-page .page-tag::before{content:'> ';}
  .catalog-page h3{
    font-size:clamp(20px,3vw,30px); color:#fff; margin-bottom:14px;
    text-shadow:1px 0 0 rgba(255,60,120,0.35), -1px 0 0 rgba(240,168,44,0.35);
  }
  .catalog-page p{font-size:13.5px; color:var(--text-dim); max-width:320px;}
  .catalog-page .page-watermark{
    position:absolute; bottom:16px; right:20px;
    font-family:var(--f-mono); font-size:9.5px;
    letter-spacing:0.1em; color:var(--text-mute); text-transform:uppercase;
  }
  .catalog-page .page-stamp{
    position:absolute; top:20px; left:20px;
    font-family:var(--f-mono); font-size:9px; letter-spacing:0.14em;
    color:rgba(232,138,111,0.7); border:1px solid rgba(232,138,111,0.4);
    padding:3px 7px; transform:rotate(-4deg); text-transform:uppercase;
  }

  /* page turns now use a slide transform — see .catalog-page transitions above */

  /* hover zones for click-to-turn */
  .viewer-hover-zone{
    position:absolute; top:0; bottom:0; width:38%;
    z-index:10; cursor:pointer;
    display:flex; align-items:center;
    opacity:0; transition:opacity .2s ease, background .2s ease;
  }
  .viewer-hover-zone.left{ left:0; justify-content:flex-start; background:linear-gradient(90deg, rgba(240,168,44,0.14), transparent); }
  .viewer-hover-zone.right{ right:0; justify-content:flex-end; background:linear-gradient(270deg, rgba(240,168,44,0.14), transparent); }
  .viewer-hover-zone:hover{opacity:1;}
  .viewer-hover-zone .zone-chevron{
    font-family:var(--f-mono); font-size:26px; color:var(--blue-bright);
    text-shadow:0 0 14px rgba(240,168,44,0.85);
    padding:0 14px;
  }

  .viewer-bottom{
    display:flex; flex-direction:column; gap:9px;
    padding:14px 22px 20px;
  }
  .track-label-row{
    display:flex; align-items:center; justify-content:space-between;
  }
  .track-readout{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.1em;
    color:var(--blue-bright); text-shadow:0 0 6px rgba(240,168,44,0.5);
    font-variant-numeric:tabular-nums;
  }
  /* retro-futuristic segmented loading line */
  .page-track{
    display:flex;
    align-items:flex-end;
    gap:2px;
    height:28px;
    padding:5px 6px;
    background:#080b12;
    border:1px solid #121a2b;
    box-shadow:inset 0 0 8px rgba(0,0,0,0.6);
  }
  .track-tick{
    flex:1 1 0;
    height:30%;
    align-self:flex-end;
    background:#1c2740;
    cursor:pointer;
    transition:height .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .track-tick:hover{height:65%; background:#2a3a5c;}
  .track-tick.filled{
    height:100%;
    background:linear-gradient(180deg, var(--blue-bright), var(--steel));
    box-shadow:0 0 5px rgba(240,168,44,0.55);
  }
  .track-tick.current{
    height:100%;
    background:#fff;
    box-shadow:0 0 12px 2px rgba(240,168,44,0.95);
    animation:tickPulse 1.1s ease-in-out infinite;
  }
  @keyframes tickPulse{0%,100%{opacity:1;} 50%{opacity:0.55;}}
  .viewer-label-mute{
    font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em;
    color:var(--text-mute); text-transform:uppercase;
  }

  @media(max-width:900px){
    .viewer-hover-zone{width:26%;}
  }

  /* ---- Download panel ---- */
  .catalog-download,
  .guide-download{
    background:linear-gradient(160deg,#0d1220 0%, #0d1220 100%);
    border:1px solid var(--border-bright);
    padding:38px 34px;
    display:flex;
    flex-direction:column;
  }
  .download-icon{
    width:56px; height:56px;
    border:1px solid var(--blue);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
  }
  .catalog-download h3,
  .guide-download h3{font-size:24px; color:#fff; margin-bottom:8px;}
  .catalog-download .meta-row,
  .guide-download .meta-row{
    display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px;
  }
  .catalog-download p.desc,
  .guide-download p.desc{font-size:14px; color:var(--text-dim); margin-bottom:26px;}
  .whats-inside{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:30px;}
  .whats-inside li{
    display:flex; align-items:baseline; gap:10px;
    font-size:13.5px; color:var(--text);
    font-family:var(--f-mono);
  }
  .whats-inside li::before{content:'›'; color:var(--blue); font-weight:700;}
  .download-actions{display:flex; flex-direction:column; gap:12px; margin-top:auto;}
  .download-note{
    margin-top:18px; font-family:var(--f-mono); font-size:11px;
    color:var(--text-mute); text-align:center;
  }

  @media(max-width:900px){
    .catalog-grid{grid-template-columns:1fr;}
    .viewer-stage{max-height:460px;}
  }

  /* ===== LIGHTBOX / ZOOM OVERLAY ===== */
  .lightbox{
    position:fixed; inset:0; z-index:1000;
    background:rgba(3,5,8,0.94);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    display:flex; align-items:center; justify-content:center;
    padding:40px;
    opacity:0; visibility:hidden;
    transition:opacity .25s ease;
  }
  .lightbox.open{opacity:1; visibility:visible;}
  .lightbox-frame{
    position:relative;
    width:min(92vw, 900px);
    height:min(88vh, 1160px);
    background:#080b12;
    border:1px solid #2a3a5c;
    box-shadow:0 0 0 1px rgba(0,0,0,0.6), 0 20px 60px rgba(0,0,0,0.6);
    display:flex; flex-direction:column;
    clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  }
  .lightbox-frame:fullscreen{
    width:100vw;
    height:100vh;
  }
  .lightbox-top-actions{display:flex; align-items:center; gap:10px;}
  .lightbox-fullscreen{
    width:32px; height:32px;
    border:1px solid var(--border-bright);
    background:var(--panel-2);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .lightbox-fullscreen:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
  .lightbox-search-wrap{position:relative; flex:none;}
  .lightbox-search-bar{
    display:flex; align-items:center; gap:10px;
    padding:12px 20px;
    border-bottom:1px solid #1c2740;
    background:rgba(8,11,18,0.4);
  }
  .lightbox-search-bar svg{flex:none;}
  .lightbox-search-input{
    flex:1; min-width:0;
    background:none; border:none; outline:none;
    font-family:var(--f-mono); font-size:13px; letter-spacing:0.02em;
    color:var(--text);
  }
  .lightbox-search-input::placeholder{color:var(--text-mute);}
  .lightbox-search-wrap .catalog-search-results{
    position:absolute; top:100%; left:0; right:0;
    margin-top:0;
    border-top:1px solid rgba(240,168,44,0.4);
    box-shadow:0 12px 30px rgba(0,0,0,0.5);
    z-index:20;
  }
  .lightbox-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px;
    border-bottom:1px solid #1c2740;
    flex:none;
  }
  .lightbox-top .lb-sys{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em;
    color:var(--blue-bright); text-transform:uppercase;
  }
  .lightbox-close{
    width:32px; height:32px;
    border:1px solid var(--border-bright);
    background:var(--panel-2);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; line-height:1;
    cursor:pointer;
    transition:border-color .2s, color .2s;
  }
  .lightbox-close:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
  .lightbox-zoom-wrap{
    touch-action:none;   /* we handle pan/pinch ourselves */
    position:relative;
    flex:1;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:zoom-in;
  }
  .lightbox-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    transform:translate(0px, 0px) scale(1);
    transform-origin:0 0;
    transition:transform .25s ease;
    user-select:none;
    -webkit-user-drag:none;
  }
  .lightbox-zoom-wrap.dragging{cursor:grabbing;}
  .lightbox-hover-zone{
    position:absolute; top:0; bottom:0; width:34%;
    z-index:10; cursor:pointer;
    display:flex; align-items:center;
    opacity:0; transition:opacity .2s ease, background .2s ease;
  }
  .lightbox-hover-zone.left{ left:0; justify-content:flex-start; background:linear-gradient(90deg, rgba(240,168,44,0.14), transparent); }
  .lightbox-hover-zone.right{ right:0; justify-content:flex-end; background:linear-gradient(270deg, rgba(240,168,44,0.14), transparent); }
  .lightbox-hover-zone:hover{opacity:1;}
  .lightbox-hover-zone .zone-chevron{
    font-family:var(--f-mono); font-size:26px; color:var(--blue-bright);
    text-shadow:0 0 14px rgba(240,168,44,0.85);
    padding:0 14px;
  }
  .lightbox-bottom{
    flex:none; padding:10px 20px;
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px solid #1c2740;
  }
  .lightbox-bottom span{
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em;
    color:var(--text-mute); text-transform:uppercase;
  }
  @media(max-width:700px){
    .lightbox{padding:14px;}
    .lightbox-hover-zone{width:26%;}
  }


/* Download panel — buttons centered only; all text stays left-aligned as before. */
/* Download buttons: the container shrinks to its widest child and centres itself,
   while the buttons stretch to fill it — so both buttons end up the same width
   instead of each sizing to its own label. */
.catalog-x .download-actions,
.ec-x .download-actions{
  align-items: stretch;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

/* Page track — the tick immediately after the current page sits slightly raised
   as a "next up" hint. Deliberately no box-shadow, so the glow stays unique to
   the current page and the filled run behind it. */
.catalog-x .track-tick.current + .track-tick,
.ec-x .track-tick.current + .track-tick{
  height: 58%;
  background: #2a3a5c;
  box-shadow: none;
  animation: none;
}
/* keep hover feedback on it — the rule above outranks the base :hover */
.catalog-x .track-tick.current + .track-tick:hover,
.ec-x .track-tick.current + .track-tick:hover{
  height: 72%;
  background: #3a4a6c;
}

/* Search bar spans the full container width (across both the viewer and the
   download box) so the placeholder text isn't clipped. */
.catalog-x .catalog-search-section{
  padding-top: clamp(40px, 5vw, 68px);   /* clear of the title section above */
  padding-bottom: 18px;                  /* small lift above the preview box */
}


/* ===== EDGECONTROL =====
   Ported from scci-overhaul edgecontrol.html. The guide viewer, lightbox and
   download panel deliberately reuse the catalog's classes (the source calls it
   "matches Catalog page preview"), so only EdgeControl-specific rules are added
   here — .guide-page replaces .catalog-page, everything else is already defined. */
  /* ===== HUD chips (shared) ===== */
  .hud-chip{
    font-family:var(--f-mono); font-size:10.5px; color:var(--blue-bright);
    background:rgba(8,11,18,0.75); border:1px solid rgba(240,168,44,0.4);
    padding:4px 9px; letter-spacing:0.06em;
    display:inline-block;
  }

  /* ===== EDGECONTROL HERO ===== */
  .ec-hero{
    position:relative;
    min-height:44vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#080b12;
  }
  .ec-hero-grid-bg{
    position:absolute; inset:-60px;
    z-index:0;
    background-image:
      linear-gradient(180deg, #080b12 0%, #0d1220 55%, #080b12 100%);
    overflow:hidden;
  }
  .ec-hero-grid-bg::before{
    content:'';
    position:absolute;
    left:-50%; right:-50%; top:38%; bottom:-120%;
    background-image:
      repeating-linear-gradient(0deg, rgba(240,168,44,0.5) 0px, rgba(240,168,44,0.5) 1.5px, transparent 1.5px, transparent 46px),
      repeating-linear-gradient(90deg, rgba(240,168,44,0.5) 0px, rgba(240,168,44,0.5) 1.5px, transparent 1.5px, transparent 46px);
    transform:perspective(420px) rotateX(62deg);
    transform-origin:center top;
    filter:blur(2.5px);
    opacity:0.55;
    mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 55%, transparent 92%);
  }
  .ec-hero-grid-bg::after{
    content:'';
    position:absolute; left:0; right:0; top:38%; height:2px;
    background:linear-gradient(90deg, transparent, rgba(240,168,44,0.9) 20%, rgba(240,168,44,0.9) 80%, transparent);
    box-shadow:0 0 18px 2px rgba(240,168,44,0.6), 0 0 40px 6px rgba(240,168,44,0.25);
    filter:blur(1px);
  }
  .ec-hero::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(8,11,18,0.5) 0%, rgba(8,11,18,0.32) 45%, rgba(8,11,18,0.96) 96%);
    pointer-events:none;
  }
  .ec-hero::after{
    content:'';
    position:absolute; inset:0; z-index:1;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 3px);
    pointer-events:none;
  }
  .ec-hero-inner{
    position:relative; z-index:2;
    max-width:1240px; margin:0 auto; padding:0 32px 60px;
    width:100%;
  }
  .ec-hero h1{font-size:clamp(32px,5vw,54px); color:#fff; margin:16px 0 16px;}
  .ec-hero h1 span{color:var(--steel-bright);}
  .ec-hero p{font-size:16px; color:var(--text-dim); max-width:560px;}

  /* ===== HERO INTRO ANIMATION — subtle scanline sweep with a fading glow trail ===== */
  .hero-intro{
    position:absolute; inset:0;
    z-index:3; pointer-events:none;
    overflow:hidden;
  }
  .hero-intro-scan{
    position:absolute; top:0; bottom:0; width:34%;
    left:-40%;
    background:linear-gradient(90deg,
      transparent 0%,
      rgba(240,168,44,0.03) 45%,
      rgba(240,168,44,0.10) 75%,
      rgba(240,168,44,0.22) 90%,
      rgba(240,168,44,0.4) 100%
    );
    transform:skewX(-16deg);
    opacity:0;
    animation:heroScanSweep 2.6s ease-in-out 0.3s both;
  }
  @keyframes heroScanSweep{
    0%{ opacity:0; left:-40%; }
    8%{ opacity:1; }
    55%{ opacity:1; left:106%; }
    80%{ opacity:0; left:106%; }
    100%{ opacity:0; left:106%; }
  }
  @media (prefers-reduced-motion: reduce){
    .hero-intro{display:none;}
  }

  /* ===== FREE CALLOUT ===== */
  .free-section{padding-top:70px; padding-bottom:50px;}
  .free-callout{text-align:center; max-width:760px; margin:0 auto;}
  .free-chip{
    display:inline-block;
    font-family:var(--f-mono);
    font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--blue-bright);
    border:1px solid rgba(240,168,44,0.45);
    background:rgba(240,168,44,0.08);
    padding:6px 14px;
    margin-bottom:22px;
  }
  .free-callout h2{font-size:clamp(24px,3.2vw,36px); color:#fff; margin-bottom:18px;}
  .free-callout p{color:var(--text-dim); font-size:15.5px;}

  /* ===== DEVICE SPLIT ===== */
  .device-section{padding-top:0;}
  .device-grid{
    background:var(--panel);
    border:1px solid var(--border-bright);
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
  }
  .device-copy{padding:48px;}
  .device-copy .eyebrow{margin-bottom:16px;}
  .device-copy h3{font-size:24px; color:#fff; margin-bottom:16px;}
  .device-copy p{color:var(--text-dim); font-size:14.5px;}
  .device-visual{
    position:relative;
    padding:26px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:16px;
    background:
      radial-gradient(circle at 50% 40%, rgba(240,168,44,0.08), transparent 65%),
      repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 26px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 26px);
  }
  .device-img-wrap{
    position:relative;
    width:210px; height:210px;
    flex:none;
  }
  .device-img-wrap img{width:100%; height:100%; object-fit:contain; display:block;}
  .device-spec-row{
    display:flex; align-items:flex-start; gap:16px;
  }
  .spec-item{ display:flex; flex-direction:column; align-items:center; gap:5px; }
  .spec-value{
    font-family:var(--f-cond); font-weight:600; font-size:22px; color:var(--blue-bright);
    text-shadow:0 0 8px rgba(240,168,44,0.55);
    line-height:1;
  }
  .spec-label{
    font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--text-mute);
  }
  .spec-x{
    font-family:var(--f-cond); font-size:22px; color:var(--border-bright);
    margin-top:1px;
  }

  @media(max-width:900px){
    .device-grid{grid-template-columns:1fr;}
    .device-visual{order:-1;}
  }

  .guide-section{background:var(--bg); padding-top:0;}
  .guide-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:36px;
    align-items:stretch;
  }
  .guide-page{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transform:translateX(0);
    transition:transform .42s cubic-bezier(.65,0,.35,1);
  }
  .guide-page.active{opacity:1; visibility:visible; z-index:2;}
  .guide-page img{width:100%; height:100%; object-fit:contain; display:block; background:#080b12;}
  @media(max-width:900px){ .guide-grid{grid-template-columns:1fr;} }
  /* ===== KEY CAPABILITIES ===== */
  .capabilities-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .capability-card{
    background:var(--panel);
    border:1px solid var(--border);
    padding:26px 28px;
    transition:border-color .2s, transform .2s;
  }
  .capability-card:hover{border-color:var(--steel-bright); transform:translateY(-2px);}
  .capability-card h4{
    font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--blue-bright); margin-bottom:10px;
  }
  .capability-card p{font-size:13.5px; color:var(--text-dim);}
  @media(max-width:750px){
    .capabilities-grid{grid-template-columns:1fr;}
  }

  /* ===== ORDERING NOTE ===== */
  .ordering-box{
    margin-top:36px;
    background:var(--panel);
    border-left:2px solid var(--blue);
    border-top:1px solid var(--border);
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:28px 30px;
  }
  .ordering-box ul{list-style:none; margin-top:16px; display:flex; flex-direction:column; gap:10px;}
  .ordering-box li{font-size:14px; color:var(--text-dim); padding-left:18px; position:relative;}
  .ordering-box li::before{
    content:''; position:absolute; left:0; top:9px;
    width:5px; height:5px; border-radius:50%; background:var(--blue);
  }


/* Download buttons — centre the label inside the button on both pages. */
.catalog-x .download-actions .btn,
.ec-x .download-actions .btn{
  justify-content: center;
  text-align: center;
}

/* EdgeControl hero heading — match the .phero h1 treatment used at the top of
   every other page (Saira Condensed, uppercase, same clamp scale) so "SCCI
   EdgeControl" reads identically to the page titles elsewhere on the site. */
.ec-x .ec-hero h1,
.rp-x .raptor-hero h1{
  font-family: var(--f-cond);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: -.01em;
  font-size: clamp(2.6rem, 7vw, 5rem);
  color: var(--paper);
  margin: .8rem 0 1rem;
}
.ec-x .ec-hero h1 span,
.rp-x .raptor-hero h1 span{ color: inherit; text-shadow: none; }

/* EdgeControl section rhythm.
   The overhaul relied on a global `section{padding:100px 0}` that isn't part of
   this stylesheet, so these sections butted straight into each other and into the
   footer. Uses the site's own .section--tight scale so the spacing matches the
   rest of the site and scales down on narrow screens. */
.ec-x .device-section{     padding-bottom: clamp(48px, 6vw, 88px); }
.ec-x .guide-section{      padding-bottom: clamp(48px, 6vw, 88px); }
.ec-x .capabilities{       padding-block:  clamp(48px, 6vw, 88px); }
/* catalog: .catalog-split is the last section, so it butts into the footer */
.catalog-x .catalog-split{ padding-bottom: clamp(48px, 6vw, 88px); }
/* products: .carousel-section is the last section, so it butts into the footer */
.pr-x .carousel-section{ padding-bottom: clamp(48px, 6vw, 88px); }
/* events: hero -> list, and list -> footer */
.ev-x .events-section{
  padding-top:    clamp(36px, 4vw, 60px);   /* air below the divider */
  padding-bottom: clamp(48px, 6vw, 88px);   /* clear of the footer */
}


/* ===== RAPTOR 2.0 =====
   Ported from scci-overhaul raptor.html. Lives alongside the original RAPTOR
   page rather than replacing it; both are reachable from the nav dropdown. */
  /* ===== RAPTOR HERO ===== */
  .raptor-hero{
    position:relative;
    min-height:56vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#080b12;
  }
  .raptor-hero-bg{
    position:absolute; inset:-20px;
    background-image:
      repeating-linear-gradient(115deg, rgba(240,168,44,0.05) 0px, transparent 2px, transparent 60px),
      linear-gradient(135deg, #0D1420 0%, #080b12 65%);
  }
  .raptor-hero::after{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:radial-gradient(ellipse at 50% 0%, rgba(240,168,44,0.08), transparent 60%);
    pointer-events:none;
  }
  .raptor-hero-inner{
    position:relative; z-index:2;
    max-width:1240px; margin:0 auto; padding:70px 32px;
    width:100%;
    text-align:center;
  }
  .coming-soon-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--blue-bright);
    border:1px solid rgba(240,168,44,0.5);
    background:rgba(240,168,44,0.08);
    padding:8px 16px;
    margin-bottom:24px;
    box-shadow:0 0 16px rgba(240,168,44,0.25);
  }
  .coming-soon-badge .led{
    width:7px; height:7px; border-radius:50%; background:#3ee66b;
    box-shadow:0 0 6px 1px #3ee66b;
    animation:ledPulse 1.6s ease-in-out infinite;
  }
  @keyframes ledPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
  .raptor-hero h1{
    font-size:clamp(38px,7vw,80px);
    color:#fff;
    margin-bottom:6px;
  }
  .raptor-hero h1 span{color:var(--blue-bright); text-shadow:0 0 30px rgba(240,168,44,0.5);}
  .raptor-hero .subhead{
    font-family:var(--f-cond); font-weight:500; text-transform:uppercase;
    letter-spacing:0.04em; font-size:clamp(16px,2.2vw,22px);
    color:var(--steel-bright); margin-bottom:20px;
  }
  .raptor-hero p{
    color:var(--text-dim); font-size:15.5px; max-width:580px; margin:0 auto 32px;
  }
  .raptor-hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

  /* ===== BADGES ROW ===== */
  .badges-section{padding-top:70px; padding-bottom:70px;}
  .badges-panel{
    background:var(--panel);
    border:1px solid var(--border-bright);
    box-shadow:0 0 0 1px rgba(240,168,44,0.08), 0 0 24px rgba(240,168,44,0.1);
    padding:34px 30px;
    text-align:center;
  }
  .badges-panel .eyebrow{ justify-content:center; margin-bottom:22px; }
  .badges-row{
    display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  }
  .badge-pill{
    font-family:var(--f-cond); font-weight:500; text-transform:uppercase; letter-spacing:0.04em;
    font-size:15px; color:#fff;
    border:1px solid rgba(240,168,44,0.4);
    background:var(--panel-2);
    padding:14px 30px;
    box-shadow:0 0 14px rgba(240,168,44,0.15);
    transition:border-color .2s, box-shadow .2s, transform .2s;
  }
  .badge-pill:hover{border-color:var(--blue-bright); box-shadow:0 0 20px rgba(240,168,44,0.4); transform:translateY(-2px);}

  /* ===== DASHBOARD PREVIEW ===== */
  .dashboard-section{padding-top:20px;}
  .dashboard-frame{
    position:relative;
    background:var(--panel);
    border:1px solid rgba(240,168,44,0.5);
    box-shadow:0 0 0 1px rgba(240,168,44,0.12), 0 0 30px rgba(240,168,44,0.2), inset 0 0 30px rgba(240,168,44,0.04);
    padding:0;
  }
  .dashboard-frame-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px;
    border-bottom:1px solid rgba(240,168,44,0.25);
  }
  .dash-sys{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em;
    color:var(--blue-bright); text-transform:uppercase; display:flex; align-items:center; gap:8px;
  }
  .dash-sys .led{width:7px;height:7px;border-radius:50%;background:#3ee66b;box-shadow:0 0 6px 1px #3ee66b;animation:ledPulse 1.6s ease-in-out infinite;}
  .dashboard-frame img{width:100%; display:block;}
  .dashboard-caption{
    text-align:center; margin-top:18px;
    font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.08em;
    color:var(--text-mute); text-transform:uppercase;
  }

  /* ===== SMART POLE CALLOUT ===== */
  .smart-callout-section{padding:70px 0;}
  .smart-callout{
    text-align:center;
    background:linear-gradient(135deg, rgba(240,168,44,0.08), rgba(240,168,44,0.03));
    border:1px solid rgba(240,168,44,0.3);
    box-shadow:0 0 0 1px rgba(240,168,44,0.06), 0 0 30px rgba(240,168,44,0.12);
    padding:60px 40px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .smart-callout-icon{
    width:60px; height:60px;
    border:1px solid var(--blue-bright);
    background:rgba(240,168,44,0.06);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 20px rgba(240,168,44,0.3);
    margin-bottom:24px;
  }
  .smart-callout h3{
    font-family:var(--f-cond); font-weight:500; text-transform:uppercase; letter-spacing:0.02em;
    font-size:clamp(20px,3vw,30px); color:#fff;
    max-width:640px;
    margin-bottom:16px;
  }
  .smart-callout h3 span{color:var(--blue-bright); text-shadow:0 0 16px rgba(240,168,44,0.5);}
  .smart-callout p{
    font-size:15px; color:var(--text-dim);
    max-width:560px;
    margin-bottom:28px;
  }
  .smart-callout-cta{display:flex; gap:14px; flex-wrap:wrap; justify-content:center;}

  /* ===== KEY CAPABILITIES ===== */
  .capabilities-section{padding:70px 0;}
  .capabilities-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
  }
  .capability-item{
    display:flex; align-items:center; gap:14px;
    background:var(--panel);
    border:1px solid var(--border);
    padding:18px 20px;
    transition:border-color .2s, background .2s, transform .2s;
  }
  .capability-item:hover{border-color:var(--blue-bright); background:var(--panel-2); transform:translateX(4px);}
  .capability-arrow{
    flex:none; width:26px; height:26px;
    border:1px solid var(--blue-bright);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue-bright); font-size:13px;
  }
  .capability-item span{font-family:var(--f-cond); font-weight:500; font-size:15px; color:var(--text); text-transform:uppercase; letter-spacing:0.01em;}
  @media(max-width:750px){
    .capabilities-grid{grid-template-columns:1fr;}
  }

  /* ===== HOW IT WORKS FLOW ===== */
  .flow-section{ position:relative; overflow:hidden; padding:70px 0; margin-top:60px; }
  .flow-orbit-bg{
    position:absolute; inset:0;
    z-index:0;
    pointer-events:none;
    opacity:0.6;
  }
  .flow-orbit-bg svg{ display:block; width:100%; height:100%; }
  .flow-section .wrap{ position:relative; z-index:2; }
  .flow-row{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
    gap:0;
  }
  .flow-step{
    font-family:var(--f-mono); font-size:13px; letter-spacing:0.06em;
    color:var(--text); text-transform:uppercase;
    background:var(--panel);
    border:1px solid rgba(240,168,44,0.4);
    padding:14px 20px;
    box-shadow:0 0 10px rgba(240,168,44,0.15);
  }
  .flow-arrow{
    color:var(--blue-bright); font-size:18px;
    padding:0 14px;
    text-shadow:0 0 8px rgba(240,168,44,0.6);
  }
  @media(max-width:900px){
    .flow-row{flex-direction:column;}
    .flow-arrow{transform:rotate(90deg); padding:6px 0;}
  }

  /* ===== QR / WEBSITE CALLOUT ===== */
  .qr-section{padding:70px 0;}
  .qr-callout{
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
    background:var(--panel);
    border:1px solid var(--border-bright);
    padding:32px 36px;
  }
  .qr-callout-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
  .qr-img{
    flex:none; width:96px; height:96px;
    border:1px solid rgba(240,168,44,0.4);
    border-radius:8px;
    padding:6px;
    background:transparent;
    box-shadow:0 0 14px rgba(240,168,44,0.15);
  }
  .qr-img img{width:100%; height:100%; object-fit:contain;}
  .qr-callout h3{font-size:18px; color:#fff; margin-bottom:6px;}
  .qr-callout p{font-size:13.5px; color:var(--text-dim);}
  .qr-callout .site-url{
    color:var(--blue-bright); font-family:var(--f-mono); font-size:14px; letter-spacing:0.04em;
  }
  .powered-by{
    display:flex; align-items:center; gap:10px;
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
    color:var(--text-mute); text-transform:uppercase;
  }
  .powered-by img{height:34px; width:auto; object-fit:contain;}

/* ===== NAV DROPDOWN (RAPTOR) =====
   Desktop: absolutely-positioned submenu on hover or keyboard focus.
   Mobile (<=1180px, where .nav__links becomes a side panel): the submenu is
   always visible and indented, since there is no hover on touch. */
.nav__has-sub{ position: relative; }
/* The parent link stays a plain inline element, exactly like every other nav
   link — inline-flex would make padding/border count toward its box height and
   sit it higher than its siblings. The chevron aligns via vertical-align. */
.nav__chev{
  width: 10px; height: 10px;
  vertical-align: middle;
  margin-left: .3rem;
  transition: transform .18s ease;
}
.nav__has-sub:hover > a .nav__chev,
.nav__has-sub:focus-within > a .nav__chev{ transform: rotate(180deg); }

.nav__sub{
  position: absolute; top: 100%; left: 0;
  min-width: 190px;
  margin: 0; padding: .35rem 0;
  list-style: none;
  background: var(--ink-2);
  border: 1px solid var(--steel);
  border-radius: 3px;
  box-shadow: 0 14px 34px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index: 60;
}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub{
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a{ display: block; padding: .5rem .9rem; white-space: nowrap; }
.nav__sub a:hover{ color: var(--paper); background: var(--ink-3); }

@media (max-width: 1180px){
  .nav__sub{
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: none; border: none; box-shadow: none;
    padding: 0 0 .2rem .9rem;
    border-left: 1px solid var(--steel);
    margin: .1rem 0 .3rem .5rem;
  }
  .nav__has-sub > a .nav__chev{ display: none; }
  /* side panel is a column: the li must stack its link above the submenu */
  .nav__has-sub{ display: block; }
}

/* RAPTOR 2.0 — fixed sizing.
   The .wrap container was undefined (so sections ran full-bleed) and the hero
   used vw-scaled type that grew very large on wide monitors. Container is now
   capped at the site's --shell width, and the three viewport-scaled sizes are
   fixed, with a single small-screen step-down so nothing overflows on a phone. */
.rp-x .raptor-hero{ min-height: 460px; }
.rp-x .raptor-hero .subhead{ font-size: 18px; }
.rp-x .smart-callout h3{ font-size: 24px; }

@media (max-width: 700px){
  .rp-x .raptor-hero{ min-height: 360px; }
  .rp-x .raptor-hero .subhead{ font-size: 16px; }
  .rp-x .smart-callout h3{ font-size: 20px; }
}

/* Shared container for all three ported pages — one rule so the catalog,
   EdgeControl and RAPTOR 2.0 stay the same width and can't drift apart.
   Matches the site's .shell convention used on every other page. */
.catalog-x .wrap,
.ec-x .wrap,
.rp-x .wrap,
.pr-x .wrap{
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== EVENTS =====
   Ported from scci-overhaul events.html: calendar view, list/calendar toggle,
   pagination, inline row expand, event modal and add-to-calendar. */
  /* ===== EVENTS HERO ===== */
  .events-hero{
    position:relative;
    min-height:40vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:#080b12;
  }
  .events-hero-grid{
    position:absolute; inset:-40px;
    background-image:
      repeating-linear-gradient(0deg, rgba(240,168,44,0.16) 0px, rgba(240,168,44,0.16) 1px, transparent 1px, transparent 84px),
      repeating-linear-gradient(90deg, rgba(240,168,44,0.16) 0px, rgba(240,168,44,0.16) 1px, transparent 1px, transparent 84px);
    filter:blur(3.5px);
    opacity:0.85;
    z-index:0;
  }
  .events-hero::before{
    content:'';
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(180deg, rgba(8,11,18,0.55) 0%, rgba(8,11,18,0.42) 45%, rgba(8,11,18,0.98) 96%),
      linear-gradient(135deg, rgba(13,20,32,0.4) 0%, rgba(8,11,18,0.25) 60%);
  }
  .events-hero::after{
    content:'';
    position:absolute; inset:0; z-index:1;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, transparent 1px, transparent 3px);
    pointer-events:none;
  }
  .calendar-numbers{
    position:absolute; inset:0; z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  .cal-num{
    position:absolute;
    font-family:var(--f-mono);
    font-weight:500;
    color:rgba(240,168,44,0.55);
    text-shadow:0 0 10px rgba(240,168,44,0.5);
    opacity:0;
    filter:blur(0.4px);
    animation-name:calFade;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in-out;
  }
  @keyframes calFade{
    0%, 100%{opacity:0;}
    50%{opacity:1;}
  }
  .events-hero-inner{
    position:relative; z-index:2;
    max-width:1240px; margin:0 auto; padding:0 32px 56px;
    width:100%;
  }
  .events-hero h1{font-size:clamp(32px,5vw,54px); color:#fff; margin:16px 0 16px;}
  .events-hero p{font-size:16px; color:var(--text-dim); max-width:560px;}

  /* ===== EVENT BADGES (shared: timeline preview + modal) ===== */
  .event-date-badge{
    align-self:flex-start;
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
    color:var(--blue-bright); text-transform:uppercase;
    border:1px solid rgba(240,168,44,0.4);
    padding:4px 10px;
    display:inline-block;
  }
  .event-location{
    font-family:var(--f-mono); font-size:12px; color:var(--steel-bright);
    letter-spacing:0.02em;
  }
  .event-desc{font-size:13.5px; color:var(--text-dim); max-width:640px;}

  /* ===== TIMELINE + EVENTS LIST — SIDE BY SIDE ===== */
  .events-layout{
    display:flex;
    align-items:flex-start;
    gap:40px;
  }
  .events-layout-timeline{flex:1 1 0; min-width:0;}
  .events-layout-list{flex:1 1 0; min-width:0;}
  @media(max-width:1000px){
    .events-layout{flex-direction:column;}
    .events-layout-timeline, .events-layout-list{width:100%;}
  }

  /* ===== TOGGLE SWITCH ===== */
  .events-toggle-wrap{display:flex; justify-content:center; margin:0 0 32px;}
  .events-toggle{
    position:relative;
    display:inline-flex;
    background:var(--panel);
    border:1px solid var(--border-bright);
    padding:5px;
    gap:4px;
  }
  .toggle-btn{
    position:relative;
    font-family:var(--f-mono);
    font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-dim);
    background:transparent;
    border:none;
    padding:12px 26px;
    cursor:pointer;
    transition:color .25s ease;
    z-index:2;
  }
  .toggle-btn.active{color:var(--bg);}
  .toggle-indicator{
    position:absolute;
    top:5px; bottom:5px; left:5px;
    width:calc(50% - 6px);
    background:linear-gradient(135deg, var(--blue-bright), var(--steel));
    box-shadow:0 0 16px rgba(240,168,44,0.5);
    transition:transform .35s cubic-bezier(.65,0,.35,1);
    z-index:1;
  }
  .events-toggle[data-active="past"] .toggle-indicator{
    transform:translateX(100%);
  }

  /* ===== EVENT LIST / ROWS ===== */
  .events-list{display:flex; flex-direction:column; gap:22px;}
  .events-list.hidden{display:none;}

  /* ===== PAGINATION ===== */
  .events-pagination{
    display:flex; justify-content:center; align-items:center;
    gap:10px; margin-top:28px; flex-wrap:wrap;
  }
  .events-pagination.hidden{display:none;}
  .page-btn{
    appearance:none; -webkit-appearance:none;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:1px solid var(--blue-bright);
    color:var(--blue-bright);
    font-family:var(--f-mono); font-size:13px;
    letter-spacing:0.02em;
    cursor:pointer;
    text-shadow:0 0 6px rgba(240,168,44,0.45);
    transition:background .2s ease, box-shadow .2s ease, text-shadow .2s ease, color .2s ease, transform .2s ease;
  }
  .page-btn:hover, .page-btn:focus-visible{
    background:rgba(240,168,44,0.08);
    box-shadow:0 0 14px rgba(240,168,44,0.45);
    text-shadow:0 0 8px rgba(240,168,44,0.9), 0 0 18px rgba(240,168,44,0.55);
    transform:translateY(-1px);
    outline:none;
  }
  .page-btn.active{
    background:var(--blue-bright);
    color:var(--bg);
    text-shadow:none;
    box-shadow:0 0 16px rgba(240,168,44,0.75), 0 0 32px rgba(240,168,44,0.4);
    cursor:default;
    transform:none;
  }

  .event-row{
    display:flex;
    align-items:stretch;
    gap:24px;
    background:var(--panel);
    border:1px solid var(--border-bright);
    padding:18px;
    transition:transform .3s cubic-bezier(.34,1.4,.64,1), box-shadow .3s ease, border-color .3s ease;
    transform-origin:center;
    position:relative;
    cursor:pointer;
  }
  .event-row:hover{
    transform:scale(1.035);
    border-color:var(--blue-bright);
    box-shadow:0 8px 30px rgba(0,0,0,0.4), 0 0 26px rgba(240,168,44,0.3);
    z-index:5;
  }
  .event-thumb{
    flex:none;
    width:110px;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--border);
    position:relative;
    transition:width .35s cubic-bezier(.65,0,.35,1), aspect-ratio .35s cubic-bezier(.65,0,.35,1);
  }
  .event-thumb img{
    width:100%; height:100%; object-fit:cover;
    filter:brightness(0.85) saturate(0.95);
    transition:filter .3s ease, transform .4s ease;
  }
  .event-row:hover .event-thumb img{
    filter:brightness(1) saturate(1.05);
    transform:scale(1.06);
  }
  /* Expanded: small preview grows into a modern banner header above the details. */
  .event-row.expanded .event-thumb{
    border-color:var(--blue-bright);
    border-bottom:2px solid var(--blue-bright);
    box-shadow:0 6px 24px rgba(240,168,44,0.25);
  }
  .event-row.expanded .event-thumb::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 45%, rgba(6,8,11,0.88) 100%);
    pointer-events:none;
  }
  .event-info{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    min-width:0;
  }
  .event-info h3{font-size:20px; color:#fff;}
  /* Collapsed rows are a summary only — location/description reveal on expand. */
  .event-row .event-location, .event-row .event-desc{display:none;}
  .event-row.expanded .event-location, .event-row.expanded .event-desc{display:block;}
  .event-row-hint{
    display:block;
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-mute);
  }
  .event-row.expanded .event-row-hint{display:none;}
  .event-status{
    flex:none;
    display:flex; align-items:center;
    padding-left:16px;
    border-left:1px solid var(--border);
  }

  /* ===== EXPANDED EVENT CARD (inline row expand) ===== */
  .events-backdrop{
    position:fixed; inset:0;
    background:rgba(4,6,9,0.78);
    backdrop-filter:blur(3px);
    z-index:40;
    opacity:0; visibility:hidden;
    transition:opacity .3s ease, visibility .3s ease;
  }
  .events-backdrop.show{opacity:1; visibility:visible;}

  .event-row.expanded{
    position:relative;
    z-index:50;
    flex-direction:column;
    align-items:stretch;
    cursor:default;
    transform:none !important;
    border-color:var(--blue-bright);
    box-shadow:0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(240,168,44,0.35);
  }
  .event-row.expanded .event-thumb{
    width:100%;
    aspect-ratio:21/8;
  }
  .event-row.expanded .event-status{
    border-left:none; border-top:1px solid var(--border);
    padding-left:0; padding-top:14px;
    width:100%;
  }
  .event-expanded-details{
    display:none;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid var(--border);
  }
  .event-row.expanded .event-expanded-details{display:block;}
  .event-expanded-details .eyebrow{margin-bottom:10px;}
  .event-expanded-details p{font-size:13.5px; color:var(--text-dim); margin-bottom:10px;}
  .event-close-hint{
    margin-top:16px;
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em;
    color:var(--text-mute); text-transform:uppercase;
  }

  @media(max-width:420px){
    .event-row{flex-direction:column;}
    .event-thumb{width:100%; aspect-ratio:16/9;}
    .event-status{border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:14px; width:100%;}
    .event-row:hover{transform:scale(1.015);}
  }
  @media(max-width:750px){
    .event-row.expanded .event-thumb{aspect-ratio:16/9;}
  }

  /* The list sits in a narrower column once side-by-side with the timeline — stack the collapsed
     row's small thumb + text there too if that column ever gets genuinely tight. */
  .events-layout-list{container-type:inline-size;}
  @container (max-width:380px){
    .events-layout-list .event-row:not(.expanded){flex-direction:column;}
    .events-layout-list .event-row:not(.expanded) .event-thumb{width:100%; aspect-ratio:16/9;}
    .events-layout-list .event-row:not(.expanded) .event-status{border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:14px; width:100%;}
  }

  /* ===== INTERACTIVE CALENDAR ===== */
  .calendar-wrap{
    background:var(--panel);
    border:1px solid var(--border-bright);
    padding:26px;
    position:relative;
    container-type:inline-size;
  }
  .calendar-header{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:20px;
  }
  .calendar-month-label{
    font-family:var(--f-cond); font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
    font-size:19px; color:#fff;
  }
  .cal-nav-btn{
    appearance:none; -webkit-appearance:none;
    flex:none;
    width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    background:transparent;
    border:1px solid var(--blue-bright);
    color:var(--blue-bright);
    font-family:var(--f-mono); font-size:16px;
    cursor:pointer;
    text-shadow:0 0 6px rgba(240,168,44,0.45);
    transition:background .2s ease, box-shadow .2s ease, text-shadow .2s ease, transform .2s ease;
  }
  .cal-nav-btn:hover, .cal-nav-btn:focus-visible{
    background:rgba(240,168,44,0.08);
    box-shadow:0 0 14px rgba(240,168,44,0.45);
    text-shadow:0 0 8px rgba(240,168,44,0.9), 0 0 18px rgba(240,168,44,0.55);
    transform:translateY(-1px);
    outline:none;
  }

  .calendar-weekdays{
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:1px; margin-bottom:1px;
  }
  .calendar-weekdays span{
    text-align:center;
    font-family:var(--f-mono); font-size:10px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-mute);
    padding:6px 0;
  }
  .calendar-grid{
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:1px;
    background:var(--border);
  }
  .cal-day{
    background:var(--bg);
    min-height:92px;
    min-width:0;
    padding:6px;
    display:flex; flex-direction:column; gap:3px;
    position:relative;
  }
  .cal-day.outside{ background:rgba(8,11,18,0.45); }
  .cal-day.outside .cal-day-num{ opacity:0.4; }
  .cal-day-num{
    font-family:var(--f-mono); font-size:11px; color:var(--text-dim);
  }
  .cal-day.today{
    box-shadow:inset 0 0 0 1px var(--blue-bright), 0 0 12px rgba(240,168,44,0.3);
    z-index:1;
  }
  .cal-day.today .cal-day-num{
    color:var(--blue-bright);
    text-shadow:0 0 6px rgba(240,168,44,0.7);
    font-weight:600;
  }

  .cal-event{
    appearance:none; -webkit-appearance:none;
    display:block; width:100%; min-width:0;
    text-align:left;
    background:rgba(240,168,44,0.1);
    border:1px solid rgba(240,168,44,0.4);
    border-left:3px solid var(--blue-bright);
    color:var(--blue-bright);
    font-family:var(--f-mono); font-size:10px; letter-spacing:0.01em;
    line-height:1.3;
    padding:2px 6px;
    cursor:pointer;
    white-space:normal; word-break:break-word; overflow-wrap:anywhere;
    transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .cal-event:hover, .cal-event:focus-visible{
    background:rgba(240,168,44,0.2);
    box-shadow:0 0 10px rgba(240,168,44,0.4);
    transform:translateX(1px);
    outline:none;
  }
  .cal-event.past{
    border-left-color:var(--steel-bright);
    border-color:rgba(74,127,181,0.4);
    color:var(--steel-bright);
    background:rgba(74,127,181,0.1);
  }
  .cal-event.past:hover, .cal-event.past:focus-visible{ background:rgba(74,127,181,0.2); box-shadow:0 0 10px rgba(74,127,181,0.4); }
  .cal-event.live{
    border-left-color:#8fdc8f;
    border-color:rgba(143,220,143,0.4);
    color:#8fdc8f;
    background:rgba(143,220,143,0.1);
  }
  .cal-event.live:hover, .cal-event.live:focus-visible{ background:rgba(143,220,143,0.2); box-shadow:0 0 10px rgba(143,220,143,0.4); }

  .calendar-tbd{ margin-top:20px; padding-top:18px; border-top:1px solid var(--border); }
  .calendar-tbd.hidden{ display:none; }
  .calendar-tbd-label{
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--text-mute); margin-bottom:10px;
  }
  .calendar-tbd-list{ display:flex; flex-direction:column; gap:8px; }
  .calendar-tbd-list .cal-event{ font-size:12px; padding:8px 12px; }

  @container (max-width:420px){
    .cal-day{min-height:58px; padding:4px; gap:2px;}
    .cal-day-num{font-size:9.5px;}
    .cal-event{font-size:8.5px; padding:1px 4px;}
    .calendar-month-label{font-size:15px;}
    .cal-nav-btn{width:30px; height:30px; font-size:14px;}
  }

  /* ===== EVENT MODAL (focused event popup) ===== */
  .event-modal-overlay{
    position:fixed; inset:0;
    z-index:1100;
    background:rgba(5,7,10,0.92);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    overflow-y:auto;
  }
  .event-modal-overlay.visible{display:flex;}
  .event-modal{
    position:relative;
    background:var(--panel);
    border:1px solid var(--blue-bright);
    box-shadow:0 0 0 1px rgba(240,168,44,0.12), 0 0 50px rgba(240,168,44,0.22);
    max-width:640px; width:100%;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    margin:auto;
  }
  .event-modal-thumb{
    width:100%; aspect-ratio:21/8; overflow:hidden;
    border-bottom:1px solid var(--border);
  }
  .event-modal-thumb img{width:100%; height:100%; object-fit:cover;}
  .event-modal-body{padding:28px 32px 32px;}
  .event-modal-top{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
  .event-modal-body h3{font-size:clamp(22px,3vw,28px); color:#fff; margin-bottom:8px;}
  .event-modal-body .event-location{margin-bottom:14px; display:block;}
  .event-modal-body .event-desc{max-width:none; margin-bottom:0;}
  .event-modal-details{margin-top:20px; padding-top:20px; border-top:1px solid var(--border);}
  .event-modal-details .eyebrow{margin-bottom:10px;}
  .event-modal-details p{font-size:13.5px; color:var(--text-dim); margin-bottom:10px;}
  .event-modal-close{
    position:absolute; top:16px; right:16px;
    width:36px; height:36px;
    background:var(--panel-2); border:1px solid var(--border-bright); color:var(--text-dim);
    font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, color .2s;
    z-index:2;
  }
  .event-modal-close:hover{border-color:var(--blue-bright); color:var(--blue-bright);}

  @media(max-width:750px){
    .event-modal-thumb{aspect-ratio:16/9;}
    .event-modal-body{padding:24px 20px 26px;}
  }

  /* ===== ADD-TO-CALENDAR BUTTON + CONFIRM POPUP ===== */
  .chip-calendar{
    appearance:none; -webkit-appearance:none;
    font:inherit; letter-spacing:inherit;
    margin:0;
    cursor:pointer;
    background:transparent;
    border-color:var(--blue-bright);
    color:var(--blue-bright);
    transition:background .25s ease, box-shadow .25s ease, text-shadow .25s ease, transform .2s ease;
  }
  .chip-calendar svg{vertical-align:-1.5px; margin-right:5px;}
  .chip-calendar:hover, .chip-calendar:focus-visible{
    background:rgba(240,168,44,0.08);
    text-shadow:0 0 8px rgba(240,168,44,0.85), 0 0 20px rgba(240,168,44,0.5);
    box-shadow:0 0 16px rgba(240,168,44,0.5), inset 0 0 12px rgba(240,168,44,0.15);
    transform:translateY(-1px);
    outline:none;
  }

  .calendar-confirm-overlay{
    position:fixed; inset:0;
    z-index:1200;
    background:rgba(5,7,10,0.92);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
  }
  .calendar-confirm-overlay.visible{display:flex;}
  .calendar-confirm-panel{
    position:relative;
    background:var(--panel);
    border:1px solid var(--blue-bright);
    box-shadow:0 0 0 1px rgba(240,168,44,0.12), 0 0 50px rgba(240,168,44,0.22);
    max-width:420px; width:100%;
    padding:32px;
  }
  .calendar-confirm-panel .eyebrow{margin-bottom:12px;}
  .calendar-confirm-panel h3{font-size:clamp(19px,2.6vw,23px); color:#fff; margin-bottom:10px;}
  .calendar-confirm-panel p{font-size:13.5px; color:var(--text-dim); margin-bottom:24px;}
  .calendar-confirm-actions{display:flex; gap:12px; flex-wrap:wrap;}
  .calendar-confirm-actions .btn{flex:1; text-align:center;}

/* Events: placeholder thumbnail.
   Events with no real photography fall back to the white SCCI eagle mark. It's a
   logo, not a photo, so it needs `contain` + padding rather than the `cover` crop
   used for real event imagery, and a panel background so the transparent PNG
   reads as a deliberate placeholder. The brightness filter is dropped so the
   white mark stays crisp. */
.ev-x .event-thumb img[src$="eagle-logo.png"],
.ev-x .event-modal-thumb img[src$="eagle-logo.png"]{
  object-fit: contain;
  padding: 14%;
  background: var(--ink-2);
  filter: none;
  opacity: .85;
}
.ev-x .event-row:hover .event-thumb img[src$="eagle-logo.png"]{
  filter: none;
  transform: none;
  opacity: 1;
}

/* Events runs wider than the other ported pages — the calendar and event list sit
   side by side and benefit from the extra room — but it is still capped so it
   doesn't span the full window on a large monitor. */
.ev-x .wrap{
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ===== PRODUCTS =====
   Ported from scci-overhaul products.html: contact callout, neon product
   carousel and drag-scrub bar. The carousel holds the real product photography
   from the previous products page rather than the source's outline icons. */

  /* ===== CONTACT CALLOUT ===== */
  .contact-callout-section{padding-top:56px; padding-bottom:0;}
  .contact-callout{
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
    background:linear-gradient(135deg, rgba(240,168,44,0.06), rgba(240,168,44,0.04));
    border:1px solid rgba(240,168,44,0.35);
    padding:28px 34px;
  }
  .contact-callout-text{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .contact-callout-icon{
    flex:none;
    width:44px; height:44px;
    border:1px solid var(--blue-bright);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 12px rgba(240,168,44,0.35);
  }
  .contact-callout h3{font-size:17px; color:#fff; margin-bottom:4px;}
  .contact-callout p{font-size:13.5px; color:var(--text-dim);}
  .contact-callout-actions{display:flex; gap:12px; flex-wrap:wrap;}

  /* ===== NEON PRODUCT CAROUSEL ===== */
  .carousel-section{padding-top:70px;}
  .neon-frame{
    position:relative;
    background:var(--panel);
    border:1px solid rgba(240,168,44,0.5);
    box-shadow:
      0 0 0 1px rgba(240,168,44,0.12),
      0 0 24px rgba(240,168,44,0.18),
      inset 0 0 30px rgba(240,168,44,0.05);
    padding:0;
  }
  .neon-frame-top{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    border-bottom:1px solid rgba(240,168,44,0.25);
  }
  .neon-sys{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.14em;
    color:var(--blue-bright); text-transform:uppercase; display:flex; align-items:center; gap:8px;
  }
  .neon-sys .led{
    width:7px; height:7px; border-radius:50%; background:#3ee66b;
    box-shadow:0 0 6px 1px #3ee66b;
    animation:ledPulse 1.6s ease-in-out infinite;
  }
  @keyframes ledPulse{0%,100%{opacity:1;}50%{opacity:0.35;}}
  .neon-count{
    font-family:var(--f-mono); font-size:11.5px; color:var(--text-mute);
    letter-spacing:0.08em;
  }

  .carousel-body{position:relative; padding:28px 60px;}

  /* ===== NEON DRAG SCRUB BAR ===== */
  .scroll-progress-wrap{padding:0 60px 24px;}
  .scroll-progress-track{
    position:relative;
    height:10px;
    background:#080b12;
    border:1px solid rgba(240,168,44,0.3);
    box-shadow:inset 0 0 8px rgba(0,0,0,0.6);
    cursor:pointer;
    touch-action:none;
    user-select:none;
  }
  .scroll-progress-fill{
    position:absolute; top:0; left:0; bottom:0;
    width:0%;
    background:linear-gradient(90deg, rgba(240,168,44,0.12), rgba(240,168,44,0.9));
    box-shadow:0 0 12px rgba(240,168,44,0.75), inset 0 0 6px rgba(240,168,44,0.5);
  }
  .scroll-progress-fill.dragging{transition:none;}
  .scroll-progress-fill:not(.dragging){transition:width .12s ease;}
  .scroll-progress-thumb{
    position:absolute; top:50%; left:0%;
    width:16px; height:16px;
    background:#fff;
    border:2px solid var(--blue-bright);
    border-radius:50%;
    box-shadow:0 0 10px rgba(240,168,44,0.9), 0 0 22px rgba(240,168,44,0.5);
    transform:translate(-50%,-50%) scale(1);
    transition:left .12s ease, transform .15s ease, box-shadow .15s ease;
    pointer-events:none;
  }
  .scroll-progress-thumb.dragging{
    transition:transform .15s ease, box-shadow .15s ease;
    transform:translate(-50%,-50%) scale(1.35);
    box-shadow:0 0 16px rgba(240,168,44,1), 0 0 32px rgba(240,168,44,0.7);
  }
  @media(max-width:750px){
    .scroll-progress-wrap{padding:0 44px 20px;}
  }
  .carousel-track{
    display:flex;
    gap:20px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:16px 6px 10px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .carousel-track::-webkit-scrollbar{display:none;}

  .product-card{
    flex:0 0 auto;
    scroll-snap-align:start;
    width:230px;
    background:var(--panel-2);
    border:1px solid var(--border-bright);
    padding:14px;
    transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .product-card:hover{
    border-color:var(--blue-bright);
    box-shadow:0 0 22px rgba(240,168,44,0.45), 0 0 0 1px rgba(240,168,44,0.3);
    transform:translateY(-4px);
  }
  .product-card-img{
    position:relative;
    aspect-ratio:1/1;
    border:1px solid var(--border);
    overflow:hidden;
    margin-bottom:12px;
    transition:border-color .25s ease;
  }
  .product-card:hover .product-card-img{border-color:rgba(240,168,44,0.6);}
  .product-card-name{
    text-align:center;
    padding:10px 6px;
    border:1px solid var(--border);
    background:rgba(8,11,18,0.5);
    transition:border-color .25s ease, background .25s ease;
  }
  .product-card:hover .product-card-name{
    border-color:rgba(240,168,44,0.5);
    background:rgba(240,168,44,0.06);
  }
  .product-card-name .pname{
    display:block;
    font-family:var(--f-cond); font-weight:600; letter-spacing:0.02em;
    font-size:14.5px; color:#fff; text-transform:uppercase;
  }

  .carousel-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px;
    border:1px solid rgba(240,168,44,0.4);
    background:rgba(8,11,18,0.75);
    color:var(--blue-bright);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--f-mono); font-size:20px;
    cursor:pointer;
    z-index:5;
    transition:border-color .2s, box-shadow .2s, background .2s;
  }
  .carousel-arrow:hover{border-color:var(--blue-bright); box-shadow:0 0 14px rgba(240,168,44,0.5); background:rgba(240,168,44,0.1);}
  .carousel-arrow.left{ left:8px; }
  .carousel-arrow.right{ right:8px; }

  .neon-frame-bottom{
    padding:12px 24px 20px;
    text-align:center;
  }
  .neon-frame-bottom span{
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.1em;
    color:var(--text-mute); text-transform:uppercase;
  }

  @media(max-width:750px){
    .carousel-body{padding:24px 44px;}
    .carousel-arrow{width:36px; height:36px; font-size:16px;}
    .product-card{width:180px;}
  }

/* Products carousel holds real product photography (the source used outline
   icons). The card's image area is a 1:1 box, so photos are cropped to fill it
   and brighten on hover, matching how cards behaved on the previous page. */
.pr-x .product-card-img img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.88) saturate(.95);
  transition: filter .3s ease, transform .4s ease;
}
.pr-x .product-card:hover .product-card-img img{
  filter: brightness(1) saturate(1.05);
  transform: scale(1.05);
}
.pr-x .product-card{ cursor: pointer; }

/* Contact callout: keep the text and the buttons on a single row and vertically
   centred against each other. The source allowed wrapping, which at the page's
   capped width pushed the buttons onto their own line. The text block shrinks
   instead; below 860px it still stacks, where one row genuinely won't fit. */
@media (min-width: 861px){
  .pr-x .contact-callout{
    flex-wrap: nowrap;
    align-items: center;
  }
  .pr-x .contact-callout-text{
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
  }
  .pr-x .contact-callout-actions{
    flex: 0 0 auto;
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* Events title block keeps the floating calendar numbers from the original hero.
   .phero is position:relative/overflow:hidden so the absolute spans work; they
   need to sit behind the heading, hence the z-index pairing. */
.phero .calendar-numbers{ z-index: 0; }
.phero .shell{ position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce){
  .phero .cal-num{ animation: none; opacity: .45; }
}

/* ===== DIR PRICING TABLE + ESTIMATOR =====
   Ported from scci-overhaul txdir/pricing.html. Replaces the original 3-column
   table with a categorised 5-column table plus per-row add-to-estimate controls
   and a cart-style estimator sidebar. The original table is archived at
   /home/scci/site-archive/removed-pages/dir-pricing-table-original.html */
  /* ===== PRICING TABLE ===== */
  .price-intro{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px;}
  .price-table-wrap{
    position:relative;
    background-color:var(--panel);
    background-image:
      repeating-linear-gradient(0deg, rgba(240,168,44,0.03) 0px, transparent 1px, transparent 44px),
      repeating-linear-gradient(90deg, rgba(240,168,44,0.03) 0px, transparent 1px, transparent 44px);
    border:1px solid rgba(240,168,44,0.4);
    box-shadow:0 0 0 1px rgba(240,168,44,0.1), 0 0 30px rgba(240,168,44,0.1);
  }
  table.price-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
  }
  .price-table th:nth-child(1), .price-table td:nth-child(1){width:30%;}
  .price-table th:nth-child(2), .price-table td:nth-child(2),
  .price-table th:nth-child(3), .price-table td:nth-child(3),
  .price-table th:nth-child(4), .price-table td:nth-child(4){width:16%;}
  .price-table th:nth-child(5), .price-table td:nth-child(5){width:22%;}
  .price-table thead tr{
    background:var(--panel-2);
    border-bottom:1px solid rgba(240,168,44,0.3);
  }
  .price-table th{
    padding:16px 20px;
    text-align:left;
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--blue-bright);
    position:sticky;
    top:75px;
    z-index:5;
    background:var(--panel-2);
    box-shadow:0 1px 0 rgba(240,168,44,0.3);
  }
  .price-table th.num, .price-table td.num{text-align:right;}
  .price-table tbody tr.price-cat-row{
    background-color:var(--panel);
    background-image:linear-gradient(rgba(240,168,44,0.05), rgba(240,168,44,0.05));
  }
  .price-table tbody tr.price-cat-row td{
    padding:10px 20px;
    font-family:var(--f-mono);
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue-bright);
    border-top:1px solid rgba(240,168,44,0.2);
    border-bottom:1px solid rgba(240,168,44,0.15);
  }
  .price-table tbody tr.price-row{
    border-bottom:1px solid var(--border);
    transition:background-color .18s ease, box-shadow .18s ease;
    box-shadow:inset 3px 0 0 transparent;
  }
  .price-table tbody tr.price-row:nth-child(even){background:rgba(255,255,255,0.012);}
  .price-table tbody tr.price-row:hover{
    background:rgba(240,168,44,0.08);
    box-shadow:inset 3px 0 0 var(--blue-bright);
  }
  .price-table td{
    padding:15px 20px;
    font-size:13.5px;
    color:var(--text);
    vertical-align:middle;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .price-row .product-name{font-weight:500; color:#fff; white-space:normal; word-break:break-word;}
  .price-row:hover .product-name{color:var(--blue-bright); text-shadow:0 0 8px rgba(240,168,44,0.35);}
  .price-msrp{
    font-family:var(--f-mono);
    font-size:12.5px;
    color:var(--text-mute);
    text-decoration:line-through;
    text-decoration-color:rgba(92,102,114,0.6);
    white-space:nowrap;
  }
  .price-tier{
    font-family:var(--f-mono);
    font-weight:500;
    font-size:13.5px;
    white-space:nowrap;
  }
  .price-tier.tier-1{color:var(--steel-bright);}
  .price-tier.tier-2{color:var(--blue-bright);}
  .price-row:hover .price-tier.tier-2{text-shadow:0 0 10px rgba(240,168,44,0.5);}
  .price-footnote{
    color:var(--text-mute);
    font-size:13px;
    margin-top:24px;
    max-width:820px;
    line-height:1.7;
  }
  @media(max-width:800px){
    .price-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
    table.price-table{table-layout:auto; min-width:760px;}
    .price-table th{top:65px;}
    .price-table th, .price-table td{padding:10px 12px; font-size:12px; white-space:nowrap;}
    .price-row .product-name{white-space:nowrap;}
    .price-msrp, .price-tier{font-size:11.5px;}
  }
  @media(max-width:560px){
    .price-table th, .price-table td{padding:8px 8px; font-size:10.5px;}
    .price-msrp, .price-tier{font-size:10px;}
  }

  /* ===== PER-ROW ADD-TO-ESTIMATE CONTROLS ===== */
  .price-add{text-align:right; white-space:nowrap;}
  .qty-stepper{
    display:inline-flex; align-items:center; gap:2px;
    border:1px solid var(--border-bright);
    background:rgba(8,11,18,0.5);
    vertical-align:middle;
  }
  .qty-btn{
    width:22px; height:24px; flex:none;
    background:transparent; border:none; color:var(--text-dim);
    font-family:var(--f-mono); font-size:13px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:color .2s ease, background .2s ease;
  }
  .qty-btn:hover{color:var(--blue-bright); background:rgba(240,168,44,0.1);}
  .qty-input{
    width:32px; text-align:center;
    background:transparent; border:none;
    border-left:1px solid var(--border); border-right:1px solid var(--border);
    color:var(--text);
    font-family:var(--f-mono); font-size:12px;
    outline:none;
  }
  .qty-input:focus{color:var(--blue-bright);}
  .btn-add-cart{
    width:26px; height:26px; margin-left:6px;
    background:rgba(240,168,44,0.1); border:1px solid var(--blue-bright); color:var(--blue-bright);
    display:inline-flex; align-items:center; justify-content:center;
    vertical-align:middle; cursor:pointer;
    transition:background .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .btn-add-cart:hover{background:rgba(240,168,44,0.24); box-shadow:0 0 12px rgba(240,168,44,0.5);}
  .btn-add-cart.added{animation:cartPop .4s ease;}
  @keyframes cartPop{
    0%{transform:scale(1);}
    40%{transform:scale(1.28); background:rgba(240,168,44,0.45); box-shadow:0 0 16px rgba(240,168,44,0.8);}
    100%{transform:scale(1);}
  }

  /* ===== ESTIMATOR TOGGLE (slide-switch tab) ===== */
  .cart-toggle{
    position:fixed; top:50%; right:0;
    transform:translateY(-50%);
    z-index:900;
    width:56px;
    padding:16px 9px 14px;
    background:rgba(18,23,31,0.94);
    backdrop-filter:blur(8px);
    border:1px solid var(--blue-bright);
    border-right:none;
    border-radius:10px 0 0 10px;
    box-shadow:0 0 24px rgba(240,168,44,0.22), inset 0 0 12px rgba(240,168,44,0.06);
    display:flex; flex-direction:column; align-items:center; gap:12px;
    cursor:pointer;
    font:inherit;
    transition:right .45s cubic-bezier(.65,0,.35,1), box-shadow .3s ease;
  }
  .cart-toggle:hover{box-shadow:0 0 32px rgba(240,168,44,0.4), inset 0 0 12px rgba(240,168,44,0.1);}
  .cart-toggle.open{right:380px;}
  .cart-toggle-icon{position:relative; color:var(--blue-bright); display:flex;}
  .cart-toggle-icon svg{display:block; filter:drop-shadow(0 0 6px rgba(240,168,44,0.6)); transition:filter .3s ease;}
  .cart-toggle.open .cart-toggle-icon svg{filter:drop-shadow(0 0 10px rgba(240,168,44,0.95));}
  .cart-toggle-count{
    position:absolute; top:-9px; right:-11px;
    min-width:16px; height:16px; padding:0 4px;
    background:#D42E42; color:#fff;
    font-family:var(--f-mono); font-size:10px; font-weight:600;
    border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 8px rgba(212,46,66,0.7);
    opacity:0; transform:scale(.6);
    transition:opacity .2s ease, transform .2s ease;
  }
  .cart-toggle-count.visible{opacity:1; transform:scale(1);}
  .cart-toggle-label{
    writing-mode:vertical-rl; text-orientation:mixed;
    font-family:var(--f-mono); font-size:10px; letter-spacing:0.14em;
    color:var(--text-dim); text-transform:uppercase;
  }
  .cart-switch{
    width:34px; height:18px; flex:none;
    background:rgba(8,11,18,0.85);
    border:1px solid var(--border-bright);
    border-radius:999px;
    position:relative;
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  .cart-switch::after{
    content:'';
    position:absolute; top:2px; left:2px;
    width:12px; height:12px;
    background:var(--text-mute);
    border-radius:50%;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s ease, box-shadow .3s ease;
  }
  .cart-toggle.open .cart-switch{
    border-color:var(--blue-bright);
    box-shadow:0 0 12px rgba(240,168,44,0.5), inset 0 0 6px rgba(240,168,44,0.2);
  }
  .cart-toggle.open .cart-switch::after{
    transform:translateX(16px);
    background:var(--blue-bright);
    box-shadow:0 0 10px rgba(240,168,44,0.9), 0 0 3px #fff;
  }
  @media(max-width:480px){
    .cart-toggle.open{right:100%;}
  }

  /* ===== ESTIMATOR SIDEBAR (cart) ===== */
  .cart-sidebar{
    position:fixed; top:0; right:0; bottom:0;
    width:380px; max-width:92vw;
    background:var(--panel);
    border-left:1px solid var(--blue-bright);
    box-shadow:-10px 0 40px rgba(0,0,0,0.5), 0 0 40px rgba(240,168,44,0.08);
    z-index:950;
    display:flex; flex-direction:column;
    transform:translateX(100%);
    transition:transform .45s cubic-bezier(.65,0,.35,1);
  }
  .cart-sidebar.open{transform:translateX(0);}
  .cart-sidebar-scan{
    position:absolute; inset:0; pointer-events:none;
    background-image:repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 3px);
  }
  .cart-sidebar-head{
    position:relative; z-index:1; flex:none;
    padding:26px 24px 18px;
    border-bottom:1px solid rgba(240,168,44,0.25);
    display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  }
  .cart-sidebar-head h3{font-size:19px; color:#fff; margin-top:6px;}
  .cart-sidebar-close{
    width:32px; height:32px; flex:none;
    background:var(--panel-2); border:1px solid var(--border-bright); color:var(--text-dim);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
  }
  .cart-sidebar-close:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
  .cart-sidebar-body{
    position:relative; z-index:1;
    flex:1; overflow-y:auto; padding:6px 24px;
  }
  .cart-empty{
    color:var(--text-mute); font-size:13px; text-align:center;
    padding:40px 6px; line-height:1.6;
  }
  .cart-empty b{color:var(--blue-bright); font-weight:500;}
  .cart-item{padding:16px 0; border-bottom:1px solid var(--border);}
  .cart-item-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:10px;}
  .cart-item-name{font-size:13.5px; color:#fff; font-weight:500; line-height:1.4;}
  .cart-item-remove{
    flex:none;
    background:none; border:none; color:var(--text-mute); cursor:pointer; font-size:13px; line-height:1;
    padding:2px; transition:color .2s ease;
  }
  .cart-item-remove:hover{color:#ff6b7a;}
  .cart-item-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .cart-item-price{
    font-family:var(--f-mono); font-size:13px; color:var(--blue-bright);
    text-align:right; line-height:1.4;
  }
  .cart-item-tier{
    display:block; color:var(--text-mute); text-transform:uppercase;
    font-size:9.5px; letter-spacing:0.06em; margin-top:2px;
  }
  .cart-sidebar-foot{
    position:relative; z-index:1; flex:none;
    padding:20px 24px 26px;
    border-top:1px solid rgba(240,168,44,0.3);
    background:var(--panel-2);
  }
  .cart-total-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px;}
  .cart-total-label{
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.12em;
    color:var(--text-mute); text-transform:uppercase;
  }
  .cart-total-value{
    font-family:var(--f-mono); font-size:22px; color:var(--blue-bright);
    text-shadow:0 0 10px rgba(240,168,44,0.5);
  }
  .cart-total-note{font-size:11px; color:var(--text-mute); margin-bottom:16px; line-height:1.5;}
  .cart-foot-actions{display:flex; gap:10px;}
  .cart-clear-btn{flex:1;}
  .cart-quote-btn{flex:1.6; display:flex; align-items:center; justify-content:center; gap:7px;}

  .cart-sidebar-body{
    scrollbar-width:thin;
    scrollbar-color:var(--blue-bright) rgba(8,11,18,0.6);
  }
  .cart-sidebar-body::-webkit-scrollbar{width:8px;}
  .cart-sidebar-body::-webkit-scrollbar-track{background:rgba(8,11,18,0.6);}
  .cart-sidebar-body::-webkit-scrollbar-thumb{background:var(--blue-bright); box-shadow:0 0 6px rgba(240,168,44,0.7);}
  .cart-sidebar-body::-webkit-scrollbar-thumb:hover{background:#fff; box-shadow:0 0 10px rgba(240,168,44,0.9);}

  @media(max-width:480px){
    .cart-sidebar{width:100%; max-width:100%;}
  }



/* ===== PRICING INQUIRY MODAL =====
   Ported from scci-overhaul txdir/pricing.html. Opened by the estimator's
   "Request Formal Quote" button via window.openPricingModalWithMessage(), which
   prefills the message field with the selected products and totals. */
  /* ===== PRICING INQUIRY MODAL ===== */
  .pricing-modal-overlay{
    position:fixed; inset:0;
    z-index:1100;
    background:rgba(5,7,10,0.92);
    backdrop-filter:blur(8px);
    display:none;
    align-items:center; justify-content:center;
    padding:24px;
    overflow-y:auto;
    overflow-x:hidden;
  }
  .pricing-modal-overlay.visible{display:flex;}
  .pricing-modal{
    position:relative;
    background:var(--panel);
    border:1px solid var(--blue-bright);
    box-shadow:0 0 0 1px rgba(240,168,44,0.12), 0 0 50px rgba(240,168,44,0.22);
    max-width:560px; width:100%;
    max-height:calc(100vh - 48px);
    overflow-y:auto;
    overflow-x:hidden;
    padding:40px 36px;
    margin:auto;
  }
  .pricing-modal-close{
    position:absolute; top:16px; right:16px;
    width:36px; height:36px;
    background:var(--panel-2); border:1px solid var(--border-bright); color:var(--text-dim);
    font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s, color .2s;
  }
  .pricing-modal-close:hover{border-color:var(--blue-bright); color:var(--blue-bright);}
  .pricing-modal-head{margin-bottom:26px; padding-right:32px;}
  .pricing-modal-head h3{font-size:clamp(22px,3vw,27px); color:#fff; margin:14px 0 10px;}
  .pricing-modal-head p{color:var(--text-dim); font-size:14px;}

  .pricing-form{display:flex; flex-direction:column; gap:16px;}
  .pricing-form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .pricing-field{display:flex; flex-direction:column; gap:8px;}
  .pricing-field > span{
    font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--text-mute);
  }
  .pricing-field > span b{color:var(--blue-bright); font-weight:400;}
  .pricing-field input, .pricing-field select, .pricing-field textarea{
    background:rgba(8,11,18,0.6);
    border:1px solid var(--border-bright);
    color:var(--text);
    font-family:'Inter',sans-serif; font-size:14px;
    padding:11px 13px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .pricing-field textarea{resize:vertical; min-height:88px;}
  .pricing-field select{
    cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f0a82c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 13px center;
    padding-right:34px;
  }
  .pricing-field input:focus, .pricing-field select:focus, .pricing-field textarea:focus{
    border-color:var(--blue-bright);
    box-shadow:0 0 0 1px rgba(240,168,44,0.25), 0 0 16px rgba(240,168,44,0.18);
  }
  .pricing-field input::placeholder, .pricing-field textarea::placeholder{color:var(--text-mute);}

  .pricing-form-submit{
    margin-top:4px; width:100%; padding:14px; font-size:12.5px;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .pricing-form-note{font-size:11.5px; color:var(--text-mute); text-align:center; margin-top:-4px;}

  .pricing-form-success{
    display:none;
    flex-direction:column; align-items:center; text-align:center;
    padding:20px 0 6px;
  }
  .pricing-form-success.visible{display:flex;}
  .pricing-success-icon{
    width:60px; height:60px; margin-bottom:20px;
    border:1px solid var(--blue-bright);
    background:rgba(240,168,44,0.08);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 0 24px rgba(240,168,44,0.3);
  }
  .pricing-form-success h3{font-size:clamp(20px,2.8vw,24px); color:#fff; margin-bottom:12px;}
  .pricing-form-success p{color:var(--text-dim); font-size:14px; max-width:380px;}

  @media(max-width:560px){
    .pricing-form-row{grid-template-columns:1fr;}
    .pricing-modal{padding:30px 22px;}
  }

  .pricing-modal, .pricing-modal-overlay, .pricing-field textarea{
    scrollbar-width:thin;
    scrollbar-color:var(--blue-bright) rgba(8,11,18,0.6);
  }
  .pricing-modal::-webkit-scrollbar, .pricing-modal-overlay::-webkit-scrollbar, .pricing-field textarea::-webkit-scrollbar{
    width:8px;
  }
  .pricing-modal::-webkit-scrollbar-track, .pricing-modal-overlay::-webkit-scrollbar-track, .pricing-field textarea::-webkit-scrollbar-track{
    background:rgba(8,11,18,0.6);
  }
  .pricing-modal::-webkit-scrollbar-thumb, .pricing-modal-overlay::-webkit-scrollbar-thumb, .pricing-field textarea::-webkit-scrollbar-thumb{
    background:var(--blue-bright);
    box-shadow:0 0 6px rgba(240,168,44,0.7);
  }
  .pricing-modal::-webkit-scrollbar-thumb:hover, .pricing-modal-overlay::-webkit-scrollbar-thumb:hover, .pricing-field textarea::-webkit-scrollbar-thumb:hover{
    background:#fff;
    box-shadow:0 0 10px rgba(240,168,44,0.9);
  }


/* ===== RAD PLATFORM VIEWER =====
   Ported from scci-overhaul rad.html (.rad-gallery stage + thumbnail row).
   Only the preview box moved across — the page's own title, overview, ordering
   note and CTA band are the live site's and stay untouched. Colours translated
   from the overhaul's cyan to the Hidden Lens amber. */
.rad-x{
  --red: var(--signal);   /* active-thumbnail LED; the bridge above has no red */
}

.rad-x .rad-viewer{
  background:var(--panel);
  border:1px solid var(--border-bright);
  padding:28px;
  position:relative;
}
/* viewfinder corner motif (the overhaul's .frame) */
.rad-x .rad-viewer::before,
.rad-x .rad-viewer::after,
.rad-x .rad-viewer .fb1,
.rad-x .rad-viewer .fb2{
  content:'';
  position:absolute;
  width:22px; height:22px;
  border:2px solid var(--blue);
  opacity:.85;
  transition:all .3s ease;
  pointer-events:none;
}
.rad-x .rad-viewer::before{ top:-1px; left:-1px;  border-right:none; border-bottom:none; }
.rad-x .rad-viewer::after { bottom:-1px; right:-1px; border-left:none;  border-top:none; }
.rad-x .rad-viewer .fb1   { top:-1px; right:-1px; border-left:none;  border-bottom:none; }
.rad-x .rad-viewer .fb2   { bottom:-1px; left:-1px; border-right:none; border-top:none; }
.rad-x .rad-viewer:hover::before,
.rad-x .rad-viewer:hover::after,
.rad-x .rad-viewer:hover .fb1,
.rad-x .rad-viewer:hover .fb2{
  width:30px; height:30px;
  border-color:var(--blue-bright);
}

.rad-x .stage-row{
  display:flex;
  align-items:center;
  gap:18px;
}
.rad-x .stage-arrow{
  flex:none;
  width:44px; height:44px;
  border:1px solid var(--border-bright);
  background:rgba(13,18,32,.6);
  color:var(--text-dim);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.rad-x .stage-arrow:hover{
  border-color:var(--blue);
  color:var(--blue-bright);
  background:rgba(240,168,44,.08);
}
.rad-x .stage-arrow:focus-visible{
  outline:2px solid var(--blue-bright);
  outline-offset:2px;
}

.rad-x .rad-stage{
  position:relative;
  flex:1;
  min-width:0;
  aspect-ratio:16/9;
  background:var(--ink);
  border:1px solid var(--border);
  overflow:hidden;
}
.rad-x .stage-icon-wrap{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg,  rgba(240,168,44,.06) 0px, transparent 1px, transparent 26px),
    repeating-linear-gradient(90deg, rgba(240,168,44,.06) 0px, transparent 1px, transparent 26px),
    radial-gradient(circle at 50% 45%, rgba(240,168,44,.1), transparent 65%),
    var(--ink);
  color:var(--blue-bright);
  transition:opacity .25s ease;
}
.rad-x .stage-icon-wrap.switching{ opacity:0; }
.rad-x .stage-icon{ width:100%; height:100%; }
.rad-x .stage-photo{
  width:100%; height:100%;
  object-fit:cover; display:block;
  animation:radStagePan 18s ease-in-out infinite alternate;
}
@keyframes radStagePan{
  0%  { object-position:50% 0%; }
  100%{ object-position:50% 100%; }
}

.rad-x .hud-corner{
  position:absolute;
  border:1.5px solid rgba(240,168,44,.5);
  transition:border-color .2s ease;
  pointer-events:none;
}
.rad-x .stage-icon-wrap .hud-corner{ width:18px; height:18px; }
.rad-x .stage-icon-wrap .hud-corner.tl{ top:10px; left:10px;  border-right:none; border-bottom:none; }
.rad-x .stage-icon-wrap .hud-corner.tr{ top:10px; right:10px; border-left:none;  border-bottom:none; }
.rad-x .stage-icon-wrap .hud-corner.bl{ bottom:10px; left:10px;  border-right:none; border-top:none; }
.rad-x .stage-icon-wrap .hud-corner.br{ bottom:10px; right:10px; border-left:none;  border-top:none; }

.rad-x .stage-scan{
  position:absolute; left:0; right:0; height:40%;
  top:-45%;
  background:linear-gradient(180deg, transparent, rgba(240,168,44,.35), transparent);
  opacity:0;
  pointer-events:none;
}
.rad-x .stage-scan.flashing{ animation:radStageScan .55s ease; }
@keyframes radStageScan{
  0%  { top:-45%; opacity:0; }
  12% { opacity:1; }
  88% { opacity:1; }
  100%{ top:105%; opacity:0; }
}

.rad-x .stage-info{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 28px;
  background:linear-gradient(0deg, rgba(8,11,18,.92) 0%, rgba(8,11,18,.5) 60%, transparent 100%);
}
.rad-x .stage-tag{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.16em;
  color:var(--blue-bright); text-transform:uppercase;
  display:block; margin-bottom:8px;
}
/* three of the five platforms have no tag/description yet — collapse rather
   than leave an empty line under the name */
.rad-x .stage-tag:empty,
.rad-x .stage-info p:empty{ display:none; }
.rad-x .stage-info h3{
  font-family:var(--f-cond);
  font-size:clamp(20px,2.6vw,30px);
  color:var(--paper);
  margin:0 0 8px;
  letter-spacing:.01em;
}
.rad-x .stage-info p{
  font-size:13.5px; color:var(--text-dim);
  max-width:520px; margin:0;
}

/* thumbnail row */
.rad-x .thumb-row{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:14px;
  margin-top:20px;
}
.rad-x .thumb-card{
  background:var(--panel-2);
  border:1px solid var(--border);
  cursor:pointer;
  overflow:hidden;
  padding:0;
  text-align:left;
  font:inherit;
  color:inherit;
  transition:border-color .2s, transform .2s;
  position:relative;
}
.rad-x .thumb-card:hover{ border-color:var(--steel-bright); transform:translateY(-3px); }
.rad-x .thumb-card:focus-visible{ outline:2px solid var(--blue-bright); outline-offset:2px; }
.rad-x .thumb-card.active{ border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset; }
.rad-x .thumb-card.active::after{
  content:''; position:absolute; top:16px; right:16px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 8px 2px rgba(210,31,60,.9);
}
.rad-x .thumb-img{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg,  rgba(240,168,44,.05) 0px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(240,168,44,.05) 0px, transparent 1px, transparent 18px),
    var(--ink);
}
.rad-x .thumb-photo{
  width:100%; height:100%;
  object-fit:cover; display:block;
  filter:brightness(.85);
  transition:filter .2s ease, transform .3s ease;
}
.rad-x .thumb-card:hover .thumb-photo,
.rad-x .thumb-card.active .thumb-photo{
  filter:brightness(1) drop-shadow(0 0 8px rgba(240,168,44,.75));
  transform:scale(1.06);
}
.rad-x .thumb-img .hud-corner{ width:9px; height:9px; }
.rad-x .thumb-img .hud-corner.tl{ top:6px; left:6px;  border-right:none; border-bottom:none; }
.rad-x .thumb-img .hud-corner.tr{ top:6px; right:6px; border-left:none;  border-bottom:none; }
.rad-x .thumb-img .hud-corner.bl{ bottom:6px; left:6px;  border-right:none; border-top:none; }
.rad-x .thumb-img .hud-corner.br{ bottom:6px; right:6px; border-left:none;  border-top:none; }
.rad-x .thumb-card:hover .hud-corner,
.rad-x .thumb-card.active .hud-corner{ border-color:var(--blue-bright); }
.rad-x .thumb-scan{
  position:absolute; left:0; right:0; height:32%;
  top:-40%;
  background:linear-gradient(180deg, transparent, rgba(240,168,44,.55), transparent);
  opacity:0;
  pointer-events:none;
}
.rad-x .thumb-card:hover:not(.active) .thumb-scan{
  opacity:1;
  animation:radThumbScan 1.3s linear infinite;
}
@keyframes radThumbScan{
  0%  { top:-40%; }
  100%{ top:100%; }
}
.rad-x .thumb-label{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-dim);
  padding:9px 10px;
  transition:color .2s ease;
}
.rad-x .thumb-card.active .thumb-label{ color:var(--blue-bright); }

.rad-x .rad-viewer-hint{
  color:var(--haze);
  margin:.9rem 0 1.6rem;
  max-width:62ch;
}

@media(max-width:900px){
  .rad-x .thumb-row{ grid-template-columns:repeat(3, 1fr); }
  .rad-x .stage-arrow{ width:36px; height:36px; font-size:16px; }
  .rad-x .stage-info{ padding:18px 20px; }
}
@media(max-width:560px){
  .rad-x .thumb-row{ grid-template-columns:repeat(2, 1fr); }
  .rad-x .rad-viewer{ padding:16px; }
}
@media (prefers-reduced-motion: reduce){
  .rad-x .stage-photo{ animation:none; }
  .rad-x .thumb-card:hover:not(.active) .thumb-scan{ animation:none; opacity:0; }
  .rad-x .stage-scan.flashing{ animation:none; }
}
.rad-x .sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}