@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 {
  /* Header height, used by the mobile blast-door panel to work out how much
     of the viewport is left below it. Keep in step with .nav__inner padding
     and the brand chip, which together set the real height (~62px). */
  --nav-h: 63px;
  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; }

/* Mobile header mark. The nav swaps to the white eagle head below 1180px — the
   same width at which the header itself goes to its mobile (hamburger) form —
   via a <picture> source, so only one of the two files is ever downloaded.
   The chip's white gradient has to come off with it: the eagle is white
   artwork on transparent and would be invisible on a white chip.
   Scoped to .nav deliberately — portal/login.php uses .brand__chip too, with
   the DARK logo, and stripping its background there would hide that logo. */
@media (max-width: 1180px) {
  .nav .brand__chip { background: none; box-shadow: none; padding: 0; border-radius: 0; }
  .nav .brand__chip img { height: 34px; }
}

.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; }

/* Hamburger: three bars that fold into an X while the panel is open. The
   state comes off aria-expanded, which main.js already maintains, so the
   button needs no class of its own and the two can never disagree. */
.nav__toggle {
  display: none; margin-left: auto;
  background: rgba(13,18,32,.6); border: 1px solid var(--steel-2); border-radius: 4px;
  width: 44px; height: 40px; cursor: pointer; color: var(--paper);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.nav__toggle:hover { border-color: var(--amber-dim); }
.nav__toggle span {
  width: 20px; height: 2px; background: var(--haze);
  transition: transform .3s ease, opacity .2s ease, background .2s ease, box-shadow .2s ease;
}
/* 2px bars with a 5px gap put the outer bars 7px from the middle one, so a
   7px nudge lands all three on the same centre line before they rotate. */
.nav__toggle[aria-expanded="true"] {
  border-color: var(--amber);
  box-shadow: 0 0 14px rgba(240,168,44,.45), inset 0 0 8px rgba(240,168,44,.18);
}
.nav__toggle[aria-expanded="true"] span { background: var(--amber); box-shadow: 0 0 6px rgba(240,168,44,.85); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
  .nav__cta { display: none; }
  .nav__toggle { display: inline-flex; }

  /* Blast door. The panel is a full-width slab under the header, clipped to a
     hairline at its own midline; opening animates the clip outward so the two
     halves part together from the seam. clip-path is compositor-driven, so
     this stays smooth on a phone in a way an animated height never is.
     It replaced a right-hand drawer that slid in on translateX. */
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .1rem;
    width: auto; height: auto;
    /* The slab hangs below a sticky header, so the room left for it is the
       viewport minus that header. Long menus (the portal has ten entries plus
       two buttons) scroll inside rather than running off the screen. */
    max-height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    margin: 0; padding: .55rem clamp(16px, 3vw, 34px) 1.3rem;
    background: color-mix(in srgb, var(--ink-2) 96%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid var(--steel-2);
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    clip-path: inset(50% 0 50% 0);
    pointer-events: none;
    transition: clip-path .5s cubic-bezier(.65,0,.35,1);
    z-index: 99;
  }
  .nav__links.open { clip-path: inset(0 0 0 0); pointer-events: auto; }

  /* The seam: a lit hairline across the shut door, faded out on a delay so it
     reads as the light between the halves rather than a line on the panel. */
  .nav__links::before {
    content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
    background: var(--amber);
    box-shadow: 0 0 10px rgba(240,168,44,.9);
    opacity: 1; transition: opacity .25s ease .15s;
    z-index: 2; pointer-events: none;
  }
  .nav__links.open::before { opacity: 0; }

  .nav__cta-mobile { display: block; }
  .nav__cta-mobile a { border-bottom: 0 !important; }
  .nav__links a { display: block; 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; }
}

/* Reduced motion: the door still opens and shuts, it just does not travel. */
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .nav__links, .nav__links::before, .nav__toggle span, .nav__toggle { transition: none; }
}

/* ============================================================
   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; } }

/* ============================================================
   EDGECONTROL TEASER — portal home page
   Ported from scci-overhaul secure-home.html (.edgecontrol-teaser).
   The overhaul's .btn-steel, .eyebrow-blue and .hud-chip.blue were dropped in
   favour of the live .btn / .eyebrow / .hud-chip, which already resolve amber;
   porting them would have hard-coded the overhaul's blue.
   ============================================================ */
.ec-x .ec-teaser{
  display:flex; align-items:stretch; justify-content:space-between;
  gap:clamp(16px, 2vw, 26px);
  padding:clamp(16px, 2vw, 26px);
  background-color:var(--panel);
  /* the site's established faint grid, as used on .price-table-wrap */
  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 var(--border-bright);
  box-shadow:0 0 0 1px rgba(240,168,44,0.08), 0 0 30px rgba(240,168,44,0.08);
}

/* Each half is its own card. The viewfinder corners are the overhaul's .frame
   motif — 22px brackets that grow to 30px and brighten on hover — but bound to
   .ec-teaser-panel rather than a general .ec-x .frame, because portal/edgecontrol.php
   already carries `frame` markup inside the same scope and a broader selector
   would switch corners on there too. */
.ec-x .ec-teaser-panel{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--border);
  padding:clamp(22px, 2.4vw, 30px) clamp(20px, 2.4vw, 32px);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ec-x .ec-teaser-panel:hover{
  border-color:var(--blue-bright);
  box-shadow:0 0 18px rgba(240,168,44,0.22), inset 0 0 14px rgba(240,168,44,0.05);
  transform:translateY(-2px);
}
.ec-x .ec-teaser-panel::before,
.ec-x .ec-teaser-panel::after,
.ec-x .ec-teaser-panel .fb1,
.ec-x .ec-teaser-panel .fb2{
  content:''; position:absolute;
  width:22px; height:22px;
  border:2px solid var(--blue);
  opacity:.85; pointer-events:none;
  transition:width .3s ease, height .3s ease, border-color .3s ease;
}
.ec-x .ec-teaser-panel::before{ top:-1px; left:-1px;  border-right:none; border-bottom:none; }
.ec-x .ec-teaser-panel::after { bottom:-1px; right:-1px; border-left:none;  border-top:none; }
.ec-x .ec-teaser-panel .fb1   { top:-1px; right:-1px; border-left:none;  border-bottom:none; }
.ec-x .ec-teaser-panel .fb2   { bottom:-1px; left:-1px; border-right:none; border-top:none; }
.ec-x .ec-teaser-panel:hover::before,
.ec-x .ec-teaser-panel:hover::after,
.ec-x .ec-teaser-panel:hover .fb1,
.ec-x .ec-teaser-panel:hover .fb2{
  width:30px; height:30px;
  border-color:var(--blue-bright);
}

/* Same breathing grid the EdgeControl page puts on .device-grid — see that rule
   for how the two layers work. It goes on a span here rather than on the panel's
   pseudo-elements, because ::before and ::after are already spent on the corner
   brackets above. The span carries the static grid and its own ::before carries
   the brighter breathing copy.
     The panel has no overflow:hidden (the brackets sit at -1px and would be
   clipped), so the layer is inset 1px to stay inside the border rather than
   painting over it. */
.ec-x .ec-teaser-grid{
  position: absolute; inset: 1px; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126,150,190,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,150,190,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.ec-x .ec-teaser-grid::before{
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(142,172,214,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,172,214,.085) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
  animation: ecGridBreathe 11s ease-in-out infinite;
}
/* the two panels are different widths, so offsetting one keeps them from
   pulsing in lockstep and reading as a single flashing block */
.ec-x .ec-teaser-right .ec-teaser-grid::before{ animation-delay: -4.5s; }
@media (prefers-reduced-motion: reduce){
  .ec-x .ec-teaser-grid::before{ animation: none; opacity: .5; }
}
/* The panel's content sits above the grid layer. .fb1/.fb2 are excluded by name:
   they are the absolutely positioned corner brackets, and this selector matches
   their rule's specificity exactly while coming later in the file, so a bare
   :not(.ec-teaser-grid) would win and turn them into relative-positioned spans
   sitting in the flow. */
.ec-x .ec-teaser-panel > *:not(.ec-teaser-grid):not(.fb1):not(.fb2){
  position: relative;
  z-index: 1;
}

.ec-x .ec-teaser-left{flex:1 1 auto; min-width:0; max-width:640px;}
.ec-x .ec-teaser-left h3{font-family:var(--f-cond); font-size:24px; color:#fff; margin:8px 0 10px;}
.ec-x .ec-teaser-left p{font-size:14.5px; color:var(--text-dim); margin:0;}
.ec-x .ec-teaser-left p strong{color:var(--steel-bright); font-weight:600;}
.ec-x .ec-teaser-right{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:16px;
}
.ec-x .ec-teaser-chips{display:flex; flex-direction:column; gap:8px;}

/* Dark button with a gold glowing outline, echoing the panel cards rather than
   the site's default solid-amber .btn. Scoped by context so no other button
   changes. .btn drives its fill and text off --bg/--fg, so overriding those two
   is enough; the specificity here (0,3,0) clears .btn's own declarations, and
   the :hover rule clears .btn:hover's drop shadow. */
.ec-x .ec-teaser-right .btn{
  --bg: rgba(8,11,18,0.72);
  --fg: var(--blue-bright);
  border-color:var(--blue-bright);
  box-shadow:0 0 0 1px rgba(240,168,44,0.18), 0 0 16px rgba(240,168,44,0.20);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), color .25s var(--ease);
}
.ec-x .ec-teaser-right .btn:hover{
  background:rgba(240,168,44,0.12);
  color:#fff;
  box-shadow:0 0 0 1px rgba(240,168,44,0.35), 0 0 26px rgba(240,168,44,0.45),
             inset 0 0 14px rgba(240,168,44,0.08);
  transform:translateY(-2px);
}
.ec-x .ec-teaser-right .btn:focus-visible{
  outline:2px solid var(--blue-bright); outline-offset:3px;
}

@media(max-width:860px){
  .ec-x .ec-teaser{flex-direction:column;}
  .ec-x .ec-teaser-left{max-width:none;}
  .ec-x .ec-teaser-right{align-items:stretch;}
  .ec-x .ec-teaser-right .btn{justify-content:center;}
}
@media(prefers-reduced-motion: reduce){
  .ec-x .ec-teaser-panel,
  .ec-x .ec-teaser-panel::before,
  .ec-x .ec-teaser-panel::after,
  .ec-x .ec-teaser-panel .fb1,
  .ec-x .ec-teaser-panel .fb2,
  .ec-x .ec-teaser-right .btn{transition:none;}
  .ec-x .ec-teaser-panel:hover,
  .ec-x .ec-teaser-right .btn:hover{transform:none;}
}

/* ============================================================
   RAPTOR 2.0 ENTRY ANIMATION
   A scan line travels top-to-bottom; the logo is clipped to whatever the scan
   has already passed, so the mark is drawn on by the sweep rather than simply
   fading in. It then holds lit for a beat before the whole overlay fades out.
   Driven by classes added from portal/raptor-2.php, same shape as the public
   index boot screen. Deliberately uses the GLOBAL tokens (--ink, --amber), not
   the .rp-x scope, so it does not depend on sitting inside the page wrapper.
   ============================================================ */
.raptor-intro{
  position:fixed; inset:0;
  z-index:5000;
  background:
    radial-gradient(circle at 50% 45%, rgba(240,168,44,.07) 0%, transparent 55%),
    var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
/* faint CRT scanline texture, matching the boot screen */
.raptor-intro::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;
}
.raptor-intro.intro-hide{ opacity:0; visibility:hidden; pointer-events:none; }

.raptor-intro-stage{
  position:relative;
  overflow:visible;
  /* The stage box must stay tight to the logo — the scan sweeps top:0 -> 100% of
     THIS box while the logo is clipped by the same fraction, so any padding here
     would desync the beam from the edge it is supposed to be revealing. Room for
     the glow comes from making the whole stage bigger and letting the halo spill
     outside it, not from padding.
     The third term caps by height (aspect is ~1.12:1) so a short viewport scales
     the logo down instead of running it off the screen — max-height on the stage
     would have squashed the box away from the logo and desynced it the same way. */
  width:min(58vw, 440px, 69vh);
}
.raptor-intro-logo{
  display:block; width:100%; height:auto;
  /* hidden until the sweep uncovers it */
  clip-path:inset(0 0 100% 0);
  opacity:.92;
  filter:drop-shadow(0 0 10px rgba(240,168,44,.22));
  transition:opacity .35s ease, filter .45s ease;
}
.raptor-intro-scan{
  /* Reaches well past the logo on both sides so the beam does not appear to stop
     short against the raptor's wingspan, and the halo has room to fall off. */
  position:absolute; left:-24%; right:-24%; top:0;
  height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(240,168,44,.18) 14%,
    var(--amber) 50%,
    rgba(240,168,44,.18) 86%,
    transparent 100%);
  box-shadow:
    0 0 16px 3px rgba(240,168,44,.38),
    0 0 38px 9px rgba(240,168,44,.14);
  opacity:0;
  pointer-events:none;
}
.raptor-intro.intro-run .raptor-intro-logo{
  animation:raptorIntroReveal 1.5s cubic-bezier(.35,0,.15,1) forwards;
}
.raptor-intro.intro-run .raptor-intro-scan{
  animation:raptorIntroScan 1.5s cubic-bezier(.35,0,.15,1) forwards;
}
@keyframes raptorIntroReveal{
  from{ clip-path:inset(0 0 100% 0); }
  to  { clip-path:inset(0 0 0 0); }
}
@keyframes raptorIntroScan{
  0%  { top:0;    opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100%{ top:100%; opacity:0; }
}
/* The beat where the finished mark pulses once before the fade.
   clip-path MUST be cleared here. Filters are applied and then clipped, so the
   inset(0 0 0 0) left behind by the reveal was cutting the drop-shadow off dead
   at the image box — which is why the glow behind the logo looked chopped. The
   driver also removes .intro-run at this point: the reveal animation is
   fill:forwards, and a forwards fill outranks a plain declaration, so
   clip-path:none only takes effect once that animation is off the element. */
.raptor-intro.intro-lit .raptor-intro-logo{
  clip-path:none;
  opacity:1;
  animation:raptorIntroPulse .85s ease-out forwards;
}
@keyframes raptorIntroPulse{
  0%  { filter:drop-shadow(0 0 8px  rgba(240,168,44,.20)); transform:scale(1); }
  45% { filter:drop-shadow(0 0 20px rgba(240,168,44,.42)); transform:scale(1.025); }
  100%{ filter:drop-shadow(0 0 11px rgba(240,168,44,.24)); transform:scale(1); }
}

@media(max-width:600px){
  /* keep the height term, or a short landscape phone runs the mark off-screen */
  .raptor-intro-stage{width:min(78vw, 340px, 66vh);}
}
@media(prefers-reduced-motion: reduce){
  /* no sweep: show the finished mark and let the driver shorten the timings */
  .raptor-intro-logo{clip-path:none; opacity:1; transition:none;}
  .raptor-intro-scan{display:none;}
  .raptor-intro.intro-run .raptor-intro-logo,
  .raptor-intro.intro-lit .raptor-intro-logo{animation:none; transform:none;}
}

/* ============================================================
   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); }
/* Social row — the LinkedIn mark is monochrome light rather than the blue bug,
   which is what LinkedIn's own guidance asks for on a dark background. */
.footer__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.footer .social {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--steel); border-radius: var(--radius);
  background: var(--ink-3); color: var(--haze);
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.footer .social svg { width: 19px; height: 19px; display: block; }
.footer .social:hover { color: var(--paper); border-color: var(--amber); background: var(--ink); transform: translateY(-2px); }
.footer .social:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .footer .social { transition: none; } }
.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);
}
/* Mobile: the status line is a single nowrap string of up to 30 chars, so at
   12px/.22em it is ~290px wide and clips on a small phone. Scale the ring, logo
   and type down together, and give the screen padding so nothing touches the
   edge. At 10.5px/.16em the longest string is ~240px and fits to 280px wide. */
@media(max-width:560px){
  .boot-screen{ padding:24px; }
  .boot-content{ gap:22px; max-width:100%; }
  /* The <svg> carries width/height="160" attributes; with position:absolute
     inset:0 is over-constrained and the attributes win, so it would overflow the
     smaller wrap and collide with the status text. Pin it to the wrap. */
  .boot-ring-wrap{ width:120px; height:120px; }
  .boot-ring{ width:100%; height:100%; }
  .boot-logo{ width:62px; height:62px; }
  .boot-status-text{ font-size:10.5px; letter-spacing:.16em; max-width:100%; }
}

@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,
.ct-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;
}

/* The download panel is a flex column stretched to the viewer's height, and the
   buttons carried margin-top:auto — which pinned them to the bottom and let the
   whole slack pool open up between the list and them. Auto margins on BOTH sides
   split that slack evenly instead, so the buttons sit centred in the gap.
     The two gaps only match if their fixed parts match too: .download-note keeps
   its 18px top margin, so the list's bottom margin is brought from 30px to the
   same 18px. Each gap is then 18px + half the slack, and they stay equal even
   when the panel is short enough to have no slack at all (stacked mobile).
   Applies to the catalog download panel and to the EdgeControl hardware-guide
   panel, which is the same component stretched against a different neighbour. */
.catalog-x .whats-inside,
.ec-x .guide-download .whats-inside{ margin-bottom: 18px; }
.catalog-x .download-actions,
.ec-x .guide-download .download-actions{
  margin-top: auto;
  margin-bottom: 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 DEVICE PANEL — BREATHING GRID =====
   .device-grid.frame carries .fb1/.fb2 spans, but nothing styles corner brackets
   on this panel, so both pseudo-elements are free and this needs no markup.
     ::before lays a static grey-blue grid over the panel; ::after repeats it a
   shade brighter behind a soft radial mask and breathes its opacity, so the light
   swells out of the middle of the panel and settles again rather than the whole
   grid simply blinking. Both are position:absolute, so neither becomes a grid
   item in this grid container.
     The two real children have to be lifted: a positioned pseudo-element paints
   above the in-flow text of .device-copy, which would put the grid over the
   paragraph.
     Deliberately dim — the lines peak at .085 alpha against the #0d1220 panel,
   which is a little over a tenth of the body text's contrast, so it reads as
   texture on the panel rather than as content. */
.ec-x .device-grid{ position: relative; }
.ec-x .device-copy,
.ec-x .device-visual{ position: relative; z-index: 1; }
.ec-x .device-grid::before,
.ec-x .device-grid::after{
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126,150,190,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,150,190,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
/* the breathing layer: same lines, brighter, confined to a soft centre bloom */
.ec-x .device-grid::after{
  background-image:
    linear-gradient(rgba(142,172,214,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,172,214,.085) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
  animation: ecGridBreathe 11s ease-in-out infinite;
}
@keyframes ecGridBreathe{
  0%, 100%{ opacity: .12; }
  50%     { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .ec-x .device-grid::after{ animation: none; opacity: .5; }
}

/* The hardware-guide download panel gets the same breathing grid as the device
   box above it. .guide-download carries `frame` markup too, but — like
   .device-grid — nothing styles corner brackets on it, so both pseudo-elements
   are free and this needs no markup change.
     The panel is a flex column; absolute positioning keeps the pseudos out of
   the flex flow so they claim no line of their own. Scoped to .ec-x because
   .catalog-download shares this rule block and is not part of this change. */
.ec-x .guide-download{ position: relative; }
.ec-x .guide-download > *:not(.fb1):not(.fb2){ position: relative; z-index: 1; }
.ec-x .guide-download::before,
.ec-x .guide-download::after{
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126,150,190,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,150,190,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.ec-x .guide-download::after{
  background-image:
    linear-gradient(rgba(142,172,214,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,172,214,.085) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
  animation: ecGridBreathe 11s ease-in-out infinite;
  /* offset from the device box so the two panels do not pulse together */
  animation-delay: -6s;
}
@media (prefers-reduced-motion: reduce){
  .ec-x .guide-download::after{ animation: none; opacity: .5; }
}

/* ===== EDGECONTROL DOCUMENTS STRIP =====
   A slim bar spanning both columns of .guide-grid, so it reads as the shelf under
   the viewer and the download panel rather than a third card beside them. Same
   panel skin as .guide-download (#0d1220 on a --border-bright hairline) and the
   same head-row idiom as .viewer-top, so the three panels read as one system.
     Height is governed by the thumbnail (78px) — everything else is set in ems or
   sits on the centre line, so the bar stays slim no matter how long the labels get. */
.ec-x .ec-docs{
  grid-column: 1 / -1;
  background: linear-gradient(160deg,#0d1220 0%, #0d1220 100%);
  border: 1px solid var(--border-bright);
}

.ec-x .ec-docs-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 13px 22px 11px;
  border-bottom: 1px solid #1c2740;
}

/* The title row stays bare panel — the grid is carried by .ec-docs-body, not by
   .ec-docs, so it starts under the head's hairline and fills only the thumbnail /
   button area. Anchoring it on the whole panel instead would run the lines up
   behind the title. Third member of the breathing-grid family, with its own delay
   so the device box, the download panel and this bar never pulse in lockstep. */
.ec-x .ec-docs-body{
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  padding: 16px 22px;
}
.ec-x .ec-docs-body > *{ position: relative; z-index: 1; }
.ec-x .ec-docs-body::before,
.ec-x .ec-docs-body::after{
  content: '';
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126,150,190,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,150,190,.055) 1px, transparent 1px);
  background-size: 46px 46px;
}
.ec-x .ec-docs-body::after{
  background-image:
    linear-gradient(rgba(142,172,214,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142,172,214,.085) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
          mask-image: radial-gradient(58% 68% at 50% 50%, #000 0%, rgba(0,0,0,.45) 45%, transparent 75%);
  animation: ecGridBreathe 11s ease-in-out infinite;
  animation-delay: -2.5s;
}
@media (prefers-reduced-motion: reduce){
  .ec-x .ec-docs-body::after{ animation: none; opacity: .5; }
}
.ec-x .ec-docs-items{
  display: flex; align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

/* Each document is a button so the thumbnail is reachable by keyboard and reads as
   a control; the shared lightbox picks it up by its [data-full]. */
.ec-x .ec-doc{
  display: flex; align-items: center; gap: 13px;
  padding: 8px 14px 8px 8px;
  background: rgba(8,11,18,0.5);
  border: 1px solid #1c2740;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .22s var(--ease), background .22s, transform .22s var(--ease);
}
.ec-x .ec-doc:hover{
  border-color: var(--blue-bright);
  background: rgba(8,11,18,0.85);
  transform: translateY(-2px);
}
.ec-x .ec-doc:focus-visible{
  outline: none;
  border-color: var(--blue-bright);
  box-shadow: 0 0 0 2px rgba(240,168,44,0.35);
}
.ec-x .ec-doc-thumb{
  display: block;
  border: 1px solid #24314d;
  background: #080b12;
  flex-shrink: 0;
  transition: border-color .22s var(--ease);
}
.ec-x .ec-doc:hover .ec-doc-thumb{ border-color: rgba(240,168,44,0.55); }
.ec-x .ec-doc-thumb img{
  display: block;
  height: 78px; width: auto;
}
.ec-x .ec-doc-meta{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ec-x .ec-doc-name{
  font-family: var(--f-cond); font-size: 17px; color: #fff; line-height: 1.15;
}
.ec-x .ec-doc-sub{
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.09em;
  color: var(--text-mute); text-transform: uppercase;
}

/* The two view buttons. They sit at the bar's right edge and share a width, so the
   labels stack as a block rather than stepping in and out with their text length. */
.ec-x .ec-docs-actions{
  display: flex; flex-direction: column; align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
}
.ec-x .ec-docs-actions .btn{
  justify-content: center;
  padding: .7em 1.3em;
  font-size: .72rem;
  white-space: nowrap;
}

@media (max-width: 760px){
  .ec-x .ec-docs-body{ flex-direction: column; align-items: stretch; gap: 18px; }
  .ec-x .ec-docs-items{ flex-direction: column; align-items: stretch; }
  .ec-x .ec-docs-actions{ flex-direction: row; }
  .ec-x .ec-docs-actions .btn{ flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce){
  .ec-x .ec-doc{ transition: none; }
  .ec-x .ec-doc:hover{ transform: 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; }

/* Lineup sizing: fit a whole number of cards across the frame so a row never
   ends on a sliced card. The count is the variable and the width follows from
   it, which keeps the five breakpoints to one line each. Replaced a fixed
   230px card, which fitted four across and left a ragged fifth. */
.pr-x .carousel-track{ --cards: 5; }
.pr-x .product-card{
  width: calc((100% - (var(--cards) - 1) * 20px) / var(--cards));
  min-width: 0;
}
@media (max-width: 1180px){ .pr-x .carousel-track{ --cards: 4; } }
@media (max-width: 900px) { .pr-x .carousel-track{ --cards: 3; } }
@media (max-width: 700px) { .pr-x .carousel-track{ --cards: 2; } }
@media (max-width: 460px) { .pr-x .carousel-track{ --cards: 1; } }

/* Two-line caption: catalog section above the product name. Fixed height so
   cards in a row line up whether the name wraps to one line or three. */
.pr-x .product-card-name{
  min-height: 78px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.pr-x .pcat{
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-mute);
}
.pr-x .product-card-name .pname{ font-size: 13px; line-height: 1.25; }

/* ============================================================
   PRODUCT DETAIL PANEL
   One dialog, rewritten per card. Inside .pr-x, so it uses the scope's token
   names -- note --steel is remapped to a light grey there and must NOT be used
   for borders; --border / --border-bright are the hairline colours.
   ============================================================ */
.pdp{ position: fixed; inset: 0; z-index: 200; display: none; }
.pdp.open{ display: block; }
.pdp__scrim{
  position: absolute; inset: 0;
  background: rgba(4,6,10,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pdp__dialog{
  position: relative; z-index: 1;
  width: min(1020px, calc(100vw - 32px));
  margin: 4vh auto 0;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "media body" "nav nav";
  /* A definite height, not just a max: object-fit:contain needs a box to fit
     into, and with an auto row a tall photo (Top-Cam is 429x973) sizes the row
     to its own natural height and gets clipped by the overflow below. */
  height: min(78dvh, 660px);
  background: var(--panel);
  border: 1px solid var(--border-bright);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  overflow: hidden;
}
.pdp__media{
  grid-area: media;
  min-height: 0;
  background: #05070c;
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
}
/* contain, not cover: the lineup includes tall products (Top-Cam, Fiber
   Marker, Exit Sign) that a cover fit decapitates. The card thumbnails still
   use cover -- there a tight crop is what you want. */
.pdp__media img{ width: 100%; height: 100%; object-fit: contain; display: block; padding: 18px; }
.pdp__body{
  grid-area: body;
  padding: 30px 32px 26px;
  overflow-y: auto;
  min-height: 0;
}
.pdp__eyebrow{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  /* clear the close button, which floats over this row */
  padding-right: 44px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-bright);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.pdp__page{ color: var(--text-mute); white-space: nowrap; }
.pdp__name{
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: clamp(20px, 2.4vw, 27px);
  color: var(--text); margin: 14px 0 12px;
}
.pdp__desc{ color: var(--text-dim); font-size: 15px; line-height: 1.72; }
.pdp__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.pdp__close{
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 38px; height: 38px; cursor: pointer;
  background: rgba(8,11,18,.72); border: 1px solid var(--border-bright);
  color: var(--text); display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, box-shadow .2s;
}
.pdp__close:hover{ border-color: var(--blue-bright); box-shadow: 0 0 14px rgba(240,168,44,.45); }
.pdp__close svg{ width: 17px; height: 17px; }
.pdp__nav{
  grid-area: nav;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px; border-top: 1px solid var(--border);
  background: rgba(8,11,18,.5);
}
.pdp__step{
  width: 38px; height: 34px; cursor: pointer;
  background: none; border: 1px solid var(--border-bright); color: var(--blue-bright);
  font-family: var(--f-mono); font-size: 18px; line-height: 1;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.pdp__step:hover{ border-color: var(--blue-bright); background: rgba(240,168,44,.1); box-shadow: 0 0 12px rgba(240,168,44,.4); }
.pdp__count{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--text-mute); min-width: 74px; text-align: center;
}

/* Below the two-column breakpoint the photo becomes a banner and the whole
   dialog scrolls as one column, so the description is never squeezed into a
   sliver next to a portrait photo. */
@media (max-width: 780px){
  .pdp__dialog{
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body" "nav";
    grid-template-rows: auto minmax(0, 1fr) auto;
    margin: 2vh auto 0;
    height: auto;
    max-height: calc(100dvh - 4vh);
  }
  .pdp__media{ border-right: 0; border-bottom: 1px solid var(--border); max-height: 38dvh; }
  .pdp__body{ padding: 22px 20px 20px; }
}

@media (prefers-reduced-motion: reduce){
  .pdp__close, .pdp__step{ transition: none; }
}

/* 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;
  }
}

/* ===== CATALOG TITLE BLOCK — BREATHING NEON GRID =====
   The shared .phero::after already paints a faint 52px amber grid. This lights
   those same lines up: two layers repeating the identical gradients and
   background-size, so the neon lands exactly on the existing rules rather than
   beside them — .cat-hero-fx is inset:0 of .phero, the same box ::after uses, so
   the two patterns share an origin.
     .cat-hero-line  crisp neon on the lines
     .cat-hero-bloom the same pattern blurred underneath, for the tube glow
   A wide soft band sweeps across via mask-position (the "wave"), the wrapper's
   ellipse mask keeps the light off the section edges, and a slower opacity
   breathe on an unrelated period keeps the pulse from feeling metronomic. */
/* The stock .phero grid is masked to a corner wash anchored top-LEFT, so it has
   already faded out by mid-hero — neon riding on it past that point would be
   lighting lines that aren't there. On this page both the base grid and the neon
   take the SAME centred ellipse instead, so they coincide everywhere and fade
   together at the sides and the bottom. One mask each, so no mask-composite. */
.cat-hero::after{
  -webkit-mask-image: radial-gradient(82% 118% at 50% 12%, #000 0%, #000 42%, transparent 88%);
          mask-image: radial-gradient(82% 118% at 50% 12%, #000 0%, #000 42%, transparent 88%);
}
.cat-hero-fx{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  -webkit-mask-image: radial-gradient(82% 118% at 50% 12%, #000 0%, #000 42%, transparent 88%);
          mask-image: radial-gradient(82% 118% at 50% 12%, #000 0%, #000 42%, transparent 88%);
  animation: catGridBreathe 9s ease-in-out infinite;
}
.cat-hero-fx span{
  position: absolute; inset: 0;
  display: block;
  background-image:
    linear-gradient(rgba(240,168,44,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,168,44,.55) 1px, transparent 1px);
  background-size: 52px 52px;
  /* the travelling band; 240% wide so the lit stretch is broad and soft */
  -webkit-mask-image: linear-gradient(102deg, transparent 26%, rgba(0,0,0,.55) 40%, #000 50%, rgba(0,0,0,.55) 60%, transparent 74%);
          mask-image: linear-gradient(102deg, transparent 26%, rgba(0,0,0,.55) 40%, #000 50%, rgba(0,0,0,.55) 60%, transparent 74%);
  -webkit-mask-size: 240% 100%;
          mask-size: 240% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: catGridWave 14s linear infinite;
}
.cat-hero-bloom{
  filter: blur(4px);
  opacity: .8;
}
.cat-hero-line{
  opacity: .95;
}
@keyframes catGridWave{
  from{ -webkit-mask-position: 140% 0; mask-position: 140% 0; }
  to  { -webkit-mask-position: -40% 0; mask-position: -40% 0; }
}
@keyframes catGridBreathe{
  0%, 100%{ opacity: .34; }
  50%     { opacity: .9; }
}

/* Coarse pointers get a tighter side fade (the copy runs edge to edge) and a
   softer bloom, which is the expensive layer on a phone GPU. */
@media (max-width: 720px){
  .cat-hero::after,
  .cat-hero-fx{
    -webkit-mask-image: radial-gradient(120% 108% at 50% 10%, #000 0%, #000 48%, transparent 92%);
            mask-image: radial-gradient(120% 108% at 50% 10%, #000 0%, #000 48%, transparent 92%);
  }
  .cat-hero-bloom{ filter: blur(3px); opacity: .55; }
}
@media (prefers-reduced-motion: reduce){
  .cat-hero-fx{ animation: none; opacity: .5; }
  .cat-hero-fx span{
    animation: none;
    -webkit-mask-position: 50% 0; mask-position: 50% 0;
  }
}

/* ===== PRODUCTS TITLE BLOCK — BLURRED COLLAGE + NEON TRACES =====
   A grid of small pre-blurred product tiles sits behind the Products heading,
   held well back by a veil gradient so the copy keeps its contrast, with three
   angular neon traces gliding across it. Everything is decorative and
   pointer-events:none; .phero is already position:relative/overflow:hidden and
   .phero .shell already carries z-index:2, so the layers slot in underneath. */
.pr-hero-bg{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* The shared .phero amber grid sits at z-index:-1, which would bury it under the
   collage; on this page it reads better ON TOP, so it is lifted over the veil. */
.pr-hero::after{ z-index: 1; }
.pr-hero-tiles{
  position: absolute; inset: -6%;          /* overscan hides the blur's soft edge */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(96px, 11vw, 170px), 1fr));
  grid-auto-rows: clamp(96px, 11vw, 170px);
  gap: 2px;
  filter: blur(7px) saturate(.5) brightness(.62);
  opacity: .3;
}
.pr-hero-tiles i{
  display: block;
  background-size: cover;
  background-position: center;
}
/* Legibility veil: heaviest at the left, where the heading and paragraph sit,
   and along the bottom edge so the collage does not fight the section border. */
.pr-hero-veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(8,11,18,.93) 26%, rgba(8,11,18,.66) 58%, rgba(8,11,18,.5) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(8,11,18,.2) 42%, transparent 100%);
}
.pr-hero-trace{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: none;
  overflow: visible;
  /* Nudge the whole trace layer down so the top line clears the sticky header
     (.nav is 63px and sits at z-index:100 over the first strip of the hero).
     A translate rather than an inset or a smaller box on purpose: the box keeps
     its size, so the slice crop and therefore every trace's scale and spacing
     stay exactly as authored — the artwork only moves. The tail that runs past
     the bottom is clipped by .pr-hero-bg's overflow:hidden. */
  transform: translateY(40px);
}
.pr-hero-trace use{ stroke-linecap: round; stroke-linejoin: round; }
.pr-trace-base use{
  stroke: rgba(240,168,44,.16);
  stroke-width: 1;
}
/* pathLength is not set on the paths, so the dash pattern is expressed in user
   units and the offset runs past the longest trace; each <use> gets its own
   duration inline for staggered, non-repeating passes.
     Two things have to hold for the restart to be invisible.
   (1) The dash pattern repeats every 130 + 2400 = 2530 units, so the loop MUST
   travel exactly that distance: what is on screen depends on the offset modulo
   the period, and a cycle covering any other distance leaves the last frame in a
   different state from the first. Ending at -130 (a 2660 unit run) overshot by a
   full dash, which read as the line jerking backwards on re-entry. Keep the
   keyframe distance equal to the dasharray total.
   (2) Because the pattern wraps, the dash does not slide in from nowhere — it
   GROWS out of the path's start point, from zero length to 130, and shrinks the
   same way at the end point. That is the pop. The cure is geometric, not in the
   timing: each path now begins at x=-260 and ends at x=1460, so both the growing
   and the shrinking happen in the 260 units of lead-in and run-out that sit
   outside the 0-1200 viewBox, and the line is always full length by the time it
   is on screen. Any lead-in shorter than the dash puts the growth back in view. */
.pr-trace-glide use{
  stroke: var(--amber);
  stroke-width: 1.6;
  stroke-dasharray: 130 2400;
  stroke-dashoffset: 2530;
  filter: drop-shadow(0 0 6px rgba(240,168,44,.85)) drop-shadow(0 0 16px rgba(240,168,44,.35));
  animation: prTraceGlide 20s linear infinite;
}
@keyframes prTraceGlide{
  from{ stroke-dashoffset: 2530; }
  to  { stroke-dashoffset: 0; }
}
.pr-trace-nodes circle{
  fill: rgba(240,168,44,.5);
  filter: drop-shadow(0 0 5px rgba(240,168,44,.6));
  animation: prTraceNode 4.5s ease-in-out infinite;
}
.pr-trace-nodes circle:nth-child(even){ animation-delay: -2.2s; }
@keyframes prTraceNode{ 0%,100%{ opacity:.75; } 50%{ opacity:.25; } }

/* Narrow screens: less blur radius against the smaller tiles, and the veil goes
   top-to-bottom because the copy spans the full width. */
@media (max-width: 720px){
  .pr-hero-tiles{ filter: blur(5px) saturate(.5) brightness(.6); opacity: .24; }
  .pr-hero-veil{
    background:
      linear-gradient(180deg, rgba(8,11,18,.9) 0%, rgba(8,11,18,.72) 45%, var(--ink) 100%);
  }
}
@media (prefers-reduced-motion: reduce){
  .pr-trace-glide use{ animation: none; stroke-dashoffset: 1200; }
  .pr-trace-nodes circle{ animation: none; }
}

/* 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;
  }
  /* Below 800px this used to be an overflow-x:auto wrapper around a table with
     min-width:760px. Two problems came out of that. The table had to be dragged
     sideways to read a row, and — less obviously — overflow-x:auto makes the
     wrapper a SCROLL CONTAINER, so the sticky header stuck to the top of the
     wrapper rather than the viewport. The wrapper scrolls away with the page, so
     the header went with it: sticky on desktop, not on mobile. Making the table
     fit the screen fixes both at once. */
  @media(max-width:800px){
    .price-table-wrap{overflow-x:visible;}
    table.price-table{table-layout:fixed; min-width:0; width:100%;}
    .price-table th{top:65px;}
    .price-table th, .price-table td{padding:10px 10px; font-size:12px; white-space:normal;}
    .price-row .product-name{white-space:normal; word-break:break-word;}
    /* the line above is (0,1,1) and outranks .price-add's own nowrap (0,1,0),
       which is what put the cart button on a line below the +/- stepper */
    /* .price-table td{overflow:hidden;text-overflow:ellipsis} is what drew the
       two dots beside the + button when the control overflowed. The cell holds
       controls, not text, so it should never ellipsise. */
    .price-table td.price-add{white-space:nowrap; overflow:visible; text-overflow:clip;}
    .price-msrp, .price-tier{font-size:11.5px;}
    /* MSRP is the struck-through list price; the two contract tiers are what a
       buyer actually needs. Dropping it is what buys room for the rest to fit
       without sideways scrolling. It is still there on desktop. */
    .price-table th:nth-child(2), .price-table td.price-msrp{display:none;}
    .price-table th:nth-child(1){width:36%;}
    .price-table th:nth-child(3), .price-table th:nth-child(4){width:20%;}
    .price-table th:nth-child(5){width:24%;}
  }
  @media(max-width:700px){
    .price-table th, .price-table td{padding:8px 4px; font-size:10.5px;}
    .price-msrp, .price-tier{font-size:10px;}
    /* Fixed px, not percentages: the prices carry white-space:nowrap on a
       table-layout:fixed table, so a column a few px short does not wrap them,
       it ellipsises them — and half a price is worse than no table at all.
       These widths hold "$1,167.69" and the full stepper down to a 320px
       screen; the product name takes whatever is left and wraps. */
    .price-table th:nth-child(1){width:auto;}
    .price-table th:nth-child(3), .price-table th:nth-child(4){width:66px;}
    .price-table th:nth-child(5){width:92px;}
    .price-table tbody tr.price-cat-row td{padding:8px 10px; 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);}
  }

  /* Compact add controls on phones. This block sits AFTER the base .qty-btn /
     .qty-input / .btn-add-cart rules deliberately: those are plain class
     selectors of the same specificity, so the same overrides placed earlier in
     the file lost on source order and silently did nothing — the stepper stayed
     full width, overflowed its cell, and the clipped remainder showed up as the
     ellipsis next to the + button. Keep these below the definitions.
     Budget at 92px column, 4px padding => 84px of content:
       stepper 1+16+2+20+2+16+1 = 58   cart button 20 + 3 margin = 23   total 81 */
  @media(max-width:700px){
    .qty-btn{width:16px; height:22px; font-size:12px;}
    .qty-input{width:20px; font-size:11px;}
    .btn-add-cart{width:20px; height:20px; margin-left:3px;}
  }

  /* ===== 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:700px){
    /* Start the drawer BELOW the site header rather than at the top of the
       viewport. The header is position:sticky, so it is always sitting at y=0
       on top of whatever the drawer put there — which was the close button.
       --nav-h on .nav documents the header as 63px; it is not inherited here,
       so the number is repeated rather than referenced. Keep the two in step. */
    .cart-sidebar{top:63px;}
    /* The close control was a 32px low-contrast square tucked beside the title —
       under the 44px touch target guideline and easy to miss. Make it an
       unmistakable X in the corner, and pin the header so it stays on screen
       however far down the estimate is scrolled. */
    .cart-sidebar-head{
      position:sticky; top:0; z-index:3;
      background:var(--panel);
      padding:18px 16px 14px;
      align-items:center;
    }
    .cart-sidebar-close{
      width:44px; height:44px; font-size:19px; line-height:1;
      color:var(--blue-bright);
      border-color:var(--blue-bright);
      background:rgba(240,168,44,0.12);
    }
    .cart-sidebar-close:active{background:rgba(240,168,44,0.28);}
  }
  @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;
    /* Top padding clears the sticky header (--nav-h is 63px on .nav, and is not
       inherited here). Without it a tall form centres into the header's band and
       its first fields sit underneath — and .nav carries backdrop-filter, which
       WebKit composites over later content whatever the z-index says, so a higher
       z-index on the overlay does not rescue it. Keep in step with .nav. */
    padding:79px 24px 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 - 103px);   /* 79 top padding + 24 bottom */
    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);
  }


  /* Mobile sizing for the inquiry modal. Placed AFTER every base .pricing-modal
     rule above on purpose — these are plain class selectors of equal
     specificity, so an override earlier in the file loses on source order.

     Two things cut the top of the form off on a phone:
       1. The overlay is a scrolling box with align-items:center. When the modal
          is taller than the overlay, centring pushes the overflow BOTH ways, and
          nothing above the scroll container's start edge can ever be scrolled
          to — so the header and close button sat off-screen for good.
       2. max-height:calc(100vh - 48px) over-measures on mobile: 100vh counts the
          area behind the browser's toolbars, so the modal was allowed to be
          taller than the screen actually showing it, which is what triggered 1.
     Anchoring to the top and letting the overlay do the scrolling fixes both. */
  @media(max-width:700px){
    /* Top padding clears the sticky header. Anchoring to flex-start (above) put
       the form's top inside the header's 63px band, and .nav carries
       backdrop-filter, which WebKit composites over later content regardless of
       z-index — so a higher z-index on the overlay does not save it. Starting
       below the header is deterministic and needs no stacking tricks.
       63px is .nav's documented --nav-h; keep the two in step. */
    .pricing-modal-overlay{align-items:flex-start; padding:73px 12px 12px;}
    .pricing-modal{max-height:none; margin:0 auto; padding:26px 18px;}
    .pricing-modal-close{top:10px; right:10px; width:40px; height:40px;}
    .pricing-modal-head{padding-right:46px; margin-bottom:20px;}
  }
  /* Desktop keeps the centred, capped modal, but on browsers that support it
     use the dynamic viewport height so the cap tracks the visible area.
     Bounded to >=701px: @supports adds no specificity and sits after the mobile
     block, so unscoped it would re-cap the height the mobile rule just freed. */
  @supports (height:100dvh){
    @media(min-width:701px){
      .pricing-modal{max-height:calc(100dvh - 103px);}
    }
  }

/* ===== 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;
}

/* ===== INLINE PRICING / CONTACT INQUIRY FORM =====
   The same form as the DIR-pricing modal (.pricing-form and friends above), but
   rendered permanently in the page flow on portal/contact.php instead of inside
   the .pricing-modal-overlay. Only the shell differs; every field rule is reused.
   Lives inside a .ct-x scope div so the overhaul token names resolve. */
.pricing-inline{
  background:var(--ink-2);
  border:1px solid var(--steel);
  border-radius:var(--radius);
  padding:clamp(24px,3.4vw,40px) clamp(20px,3vw,36px);
  margin-bottom:clamp(28px,4vw,48px);
  max-width:880px;
  transition:border-color .3s;
}
.pricing-inline:hover{border-color:var(--steel-2);}
.pricing-inline-head{margin-bottom:26px;}
.pricing-inline-head h2{
  font-family:var(--f-cond); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.05;
  color:var(--paper); margin:.6rem 0 .7rem;
}
.pricing-inline-head p{color:var(--haze); font-size:1rem; max-width:62ch;}
.pricing-inline .pricing-field input,
.pricing-inline .pricing-field select,
.pricing-inline .pricing-field textarea{
  font-family:var(--f-body);
  border-radius:var(--radius);
}
.pricing-inline .pricing-form-submit{width:auto; align-self:flex-start; min-width:240px;}
.pricing-inline .pricing-form-note{text-align:left;}
.pricing-inline .pricing-form-success{align-items:flex-start; text-align:left;}
.pricing-inline .pricing-form-success p{color:var(--haze);}
.pricing-inline .pricing-success-icon{
  border-color:var(--amber); color:var(--amber);
  background:rgba(240,168,44,0.08);
}
@media(max-width:640px){
  .pricing-inline .pricing-form-submit{width:100%; min-width:0;}
}

/* Contact-form honeypot: off-screen rather than display:none, since bots skip
   hidden fields but happily fill one that is merely positioned away. */
.pricing-hp{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.pricing-form-error{
  font-size:13px; color:var(--signal);
  border-left:2px solid var(--signal);
  background:rgba(214,40,57,0.07);
  padding:10px 14px;
  margin-top:-4px;
}
.pricing-form-error[hidden]{display:none;}
.pricing-form-submit[disabled]{opacity:.6; cursor:default; transform:none; box-shadow:none;}

/* ===== EVENT IMAGE: EXPAND TO FULL =====
   Both event banners crop to 21:8 with object-fit:cover, which suits a wide show
   graphic but clips a tall one. The Expand button opens the image uncropped.
   On the inline card the button only appears once the card is expanded — at the
   collapsed 110px thumb there is no room for it. */
.ev-x .event-thumb{position:relative;}
.ev-x .event-modal-thumb{position:relative;}
.ev-x .event-thumb-expand{
  position:absolute; right:10px; bottom:10px;
  z-index:3;
  display:none; align-items:center; gap:7px;
  padding:7px 11px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text); background:rgba(6,8,11,0.78);
  border:1px solid var(--border-bright);
  backdrop-filter:blur(4px);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.ev-x .event-row.expanded .event-thumb .event-thumb-expand,
.ev-x .event-modal-thumb .event-thumb-expand{display:inline-flex;}
.ev-x .event-thumb-expand:hover{
  color:var(--blue-bright); border-color:var(--blue-bright);
  background:rgba(6,8,11,0.92);
}
.ev-x .event-thumb-expand svg{flex:none;}

.event-image-viewer{
  position:fixed; inset:0;
  z-index:1300;                 /* above .event-modal-overlay (1100) and .calendar-confirm-overlay (1200) */
  display:none;
  align-items:center; justify-content:center;
  padding:40px 24px;
  background:rgba(4,6,10,0.95);
  backdrop-filter:blur(8px);
}
.event-image-viewer.open{display:flex;}
.event-image-viewer img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border:1px solid var(--border-bright);
  box-shadow:0 0 60px rgba(0,0,0,0.7);
}
.event-image-viewer-close{
  position:absolute; top:20px; right:20px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer;
  color:var(--text-dim); background:var(--panel-2);
  border:1px solid var(--border-bright);
  transition:border-color .2s, color .2s;
}
.event-image-viewer-close:hover{color:var(--blue-bright); border-color:var(--blue-bright);}
@media(max-width:560px){
  .event-image-viewer{padding:64px 12px 24px;}
  .ev-x .event-thumb-expand{right:8px; bottom:8px; padding:6px 9px;}
}