/* ===================================================================
   shared/theme.css — single source of truth for 3dB site DCs
   Shared by: Sceptre Homepage v2.dc.html, EMSO v2.dc.html
   Contains: box/body reset, all cc-* keyframes, marquee/logo/mission/
   news/hero-glow animation + hover helper classes, nav overrides,
   and the shared responsive media queries.
   Primary design tokens (--navy-0, --accent-blue, --font-sans, …) come
   from the design-system bundle, not here. Page-specific CSS stays inline
   in each DC's own <style> after this file is linked.
   =================================================================== */
  :root {
    /* AA-safe dark blue stop for SMALL text on the light bands (#fff / #F1F1F1).
       --accent-blue (~4.01:1) and --accent-blue-deep (~4.36:1) both fail the
       4.5:1 floor at these sizes, so this darker stop is required. Do not
       hardcode the hex — reference var(--accent-blue-ink). */
    --accent-blue-ink: #1d4ed8;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--navy-0, #060d18); font-family: var(--font-sans); }
  @keyframes cc-pulse { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scale(2.8); opacity: 0; } }
  /* ── Horizontal section rule that draws in, left to right. The counterpart to
     .cap-header-divider's vertical dividerDraw; picked up by the shared `divider`
     handler, which adds .draw. Use between stacked rows inside one band. ── */
  @keyframes cc-drawh { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .ps-hrule { height: 1px; background: rgba(255,255,255,0.14); clip-path: inset(0 100% 0 0); }
  .ps-hrule--light { background: rgba(0,0,0,0.14); }
  .ps-hrule.draw { animation: cc-drawh 0.9s cubic-bezier(0.4,0,0.2,1) 0.1s forwards; }
  @media (prefers-reduced-motion: reduce) { .ps-hrule { clip-path: inset(0 0 0 0); } .ps-hrule.draw { animation: none; } }
  @keyframes cc-dash { to { stroke-dashoffset: -1000; } }
  @keyframes cc-eq { 0%,100% { transform: scaleY(0.16); } 50% { transform: scaleY(1); } }
  @keyframes cc-sweep { 0% { left: -2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 102%; opacity: 0; } }
  @keyframes cc-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
  @keyframes cc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .cc-marquee-track { animation: cc-marquee 64s linear infinite; }
  .cc-marquee-track:hover { animation-play-state: paused; }
  .cc-logo-img { filter: grayscale(1); opacity: 0.55; transition: opacity 0.22s ease, filter 0.22s ease; }
  .cc-logo-cell:hover .cc-logo-img { opacity: 1; filter: grayscale(0); }
  @media (prefers-reduced-motion: reduce) { .cc-marquee-track { animation: none; } }
  @keyframes cc-vup { from { transform: translateY(0); } to { transform: translateY(-50%); } }
  @keyframes cc-vdown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
  .cc-vcol-up { animation: cc-vup 26s linear infinite; }
  .cc-vcol-down { animation: cc-vdown 26s linear infinite; }
  .cc-int-tag:hover { border-color: rgba(47,111,237,0.7) !important; color: #fff !important; box-shadow: 0 0 18px rgba(47,111,237,0.22); }
  @media (max-width: 760px) { .cc-int-grid { grid-template-columns: 1fr !important; gap: 30px !important; } }
  .cc-door { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.35s ease, box-shadow 0.35s ease; }
  .cc-door::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; z-index: -1; pointer-events: none; background: radial-gradient(120% 100% at 50% 100%, rgba(47,111,237,0.12) 0%, rgba(47,111,237,0) 70%); opacity: 0; transition: opacity 0.35s ease; }
  .cc-door:hover { transform: translateY(-6px); border-color: rgba(47,111,237,0.55); box-shadow: 0 22px 48px -26px rgba(10,22,40,0.45); }
  .cc-door:hover::before { opacity: 1; }
  .cc-door.lit { background: linear-gradient(180deg, rgba(47,111,237,0.10) 0%, rgba(47,111,237,0.05) 100%) !important; border-color: rgba(47,111,237,0.4); }
  .cc-door.lit::before { opacity: 0.7; }
  .cc-door-arrow { display: inline-flex; align-items: center; vertical-align: middle; transition: transform 0.35s ease; }
  .cc-door:hover .cc-door-arrow { transform: translateX(5px); }
  @media (max-width: 860px) { .cc-doors { grid-template-columns: 1fr !important; gap: 14px !important; } .cc-mission-head { grid-template-columns: 1fr !important; gap: 16px !important; } }
  .cc-ruler { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.4,0,0.2,1); }
  .cc-ruler.drawn { clip-path: inset(0 0 0 0) !important; }
  @media (prefers-reduced-motion: reduce) { .cc-ruler { clip-path: inset(0 0 0 0) !important; transition: none; } }
  .cc-ro-line { clip-path: inset(0 0 100% 0); transition: clip-path 0.55s cubic-bezier(0.4,0,0.2,1); }
  .cc-ro-txt { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1); }
  .cc-wwa-readouts.drawn .cc-ro-line { clip-path: inset(0 0 0 0); }
  .cc-wwa-readouts.drawn .cc-ro-txt { opacity: 1; transform: none; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(1) .cc-ro-line { transition-delay: 0.05s; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(2) .cc-ro-line { transition-delay: 0.18s; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(3) .cc-ro-line { transition-delay: 0.31s; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(1) .cc-ro-txt { transition-delay: 0.34s; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(2) .cc-ro-txt { transition-delay: 0.47s; }
  .cc-wwa-readouts.drawn .cc-ro:nth-child(3) .cc-ro-txt { transition-delay: 0.60s; }
  @media (prefers-reduced-motion: reduce) { .cc-ro-line { clip-path: inset(0 0 0 0) !important; } .cc-ro-txt { opacity: 1 !important; transform: none !important; } }
  .cc-missionrow .m-num, .cc-missionrow .m-cta { transition: color 0.25s ease; }
  .cc-missionrow .m-inner { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
  .cc-missionrow:hover { border-color: var(--tint-blue-border) !important; box-shadow: inset 4px 0 0 var(--accent-blue-bright); background-image: linear-gradient(90deg, rgba(47,111,237,0.07), rgba(47,111,237,0) 46%) !important; }
  .cc-missionrow:hover .m-num { color: var(--accent-blue) !important; }
  .cc-missionrow:hover .m-inner { transform: translateX(8px); }
  .cc-missionrow:hover .m-cta { color: var(--accent-blue) !important; }
  .cc-missionrow:hover .m-arrow { animation: cc-conveyor 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
  @keyframes cc-conveyor { 0% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(28px); opacity: 0; } 41% { transform: translateX(-28px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }
  .cc-cfg:hover { background: rgba(47,111,237,0.06) !important; border-color: var(--tint-blue-border) !important; }
  /* ── Hero CTA buttons (shared across EMSO / TSSC / interior heroes) ── */
  .emh-fill { display: inline-flex; align-items: center; height: 44px; padding: 0 28px; border-radius: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; overflow: hidden; text-decoration: none; background: #ffffff; color: #0a0a0a; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .emh-ghost { display: inline-flex; align-items: center; height: 44px; padding: 0 28px; border-radius: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; text-decoration: none; border: 1px solid rgba(255,255,255,0.45); color: rgba(255,255,255,0.7); background: transparent; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .emh-ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.90); color: #fff; }
  .emh-inner { display: inline-flex; align-items: center; gap: 10px; }
  .emh-arrow { width: 18px; height: 10px; flex-shrink: 0; overflow: visible; }
  .emh-fill:hover .emh-arrow { animation: cc-conveyor 0.35s cubic-bezier(0.4,0,0.2,1) forwards; }
  .cf-submit { display: inline-flex; align-items: center; justify-content: center; height: 44px; width: 100%; margin-top: 32px; border-radius: 2px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.5); color: #fff; transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease; }
  .cf-submit:hover { background: #fff; border-color: #fff; color: #0a0a0a; }
  /* ── Sceptre stamp (Venera caps + corner brackets) ──
     Lifted from EMSO v2 so every page shares one copy. .stamp-text starts
     hidden and is revealed by the typewriter handler in shared/interactions.js
     (class-driven off .sceptre-stamp); the :not(.animate) delayed-reveal rule below
     is the safety net so a page whose handler never runs still shows the label. */
  .sceptre-stamp { position: relative; display: inline-flex; align-items: center; padding: 16px 18px 16px 20px; font-family: var(--font-display), sans-serif; word-spacing: 0.2em; font-stretch: expanded; font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; white-space: nowrap; }
  @media (max-width: 420px) { .sceptre-stamp { font-size: min(4.9vw, 18px); padding: 13px 14px 13px 15px; } }
  .sceptre-stamp::before { content: ''; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-top: 1px solid #4479ee; border-left: 1px solid #4479ee; transition: width 0.9s ease, height 0.9s ease; }
  .sceptre-stamp::after { content: ''; position: absolute; bottom: 0; right: 0; width: 14px; height: 14px; border-bottom: 1px solid #4479ee; border-right: 1px solid #4479ee; transition: width 0.9s ease, height 0.9s ease; }
  .sceptre-stamp--no-brackets::before, .sceptre-stamp--no-brackets::after { display: none; }
  .stamp-text { display: inline-block; visibility: hidden; }
  @keyframes cc-stamp-reveal { to { visibility: visible; } }
  .sceptre-stamp:not(.animate) .stamp-text { animation: cc-stamp-reveal 0.01s linear 1.5s forwards; }
  /* ── Homepage "What's new" Nomad callout (Option B — bracketed dispatch frame) ── */
  @media (max-width: 860px) { .cc-nomad { grid-template-columns: 1fr !important; gap: 34px !important; } }
  /* What's New rotation: exactly one [data-wn-slot] visible per page load.
     !important because the slots carry an inline display:grid; the whatsnew
     handler in shared/interactions.js only moves .wn-on between them. */
  .cc-nomad[data-wn-slot] { display: none !important; }
  .cc-nomad[data-wn-slot].wn-on { display: grid !important; }
  .cc-nomad-ping { animation: cc-pulse 2.4s ease-out infinite; }
  @media (prefers-reduced-motion: reduce) { .cc-nomad-ping { animation: none; } }
  /* Below ~560px the tab sits inside the frame rather than notched over it. */
  @media (max-width: 560px) {
    .cc-nomad-frame { padding: 30px 22px 34px !important; }
    .cc-nomad-tab { position: static !important; transform: none !important; margin-bottom: 26px; width: max-content; }
  }
  /* ── Latest news row (Option B · light/paper telemetry register) ── */
  .cc-newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-light-faint, rgba(0,0,0,0.08)); }
  .cc-newscol { background: var(--paper-0, #fff); padding: 0 44px; display: flex; flex-direction: column; }
  .cc-newscol:first-child { padding-left: 0; }
  @media (max-width: 1000px) { .cc-newsgrid { grid-template-columns: repeat(2, 1fr); } .cc-newscol { padding: 30px 40px; } .cc-newscol:first-child { padding-left: 40px; } .cc-newsread { margin-top: 16px; } }
  @media (max-width: 680px) { .cc-newsgrid { grid-template-columns: 1fr; } .cc-newscol, .cc-newscol:first-child { padding: 30px 0 34px; } .cc-newsread { margin-top: 16px; } }
  .cc-newshead { font-family: var(--font-sans); font-weight: 400; font-size: 19px; line-height: 1.32; letter-spacing: -0.01em; color: var(--text-light-88); text-decoration: none; margin: 15px 0 12px; transition: color 0.18s ease; }
  .cc-newshead:hover { color: var(--accent-blue-deep, #3469de); }
  .cc-newshead:focus-visible { outline: 2px solid var(--accent-blue, #2F6FED); outline-offset: 3px; border-radius: 2px; }
  .cc-newsread { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-blue-deep, #3469de); text-decoration: none; margin-top: auto; }
  .cc-newsread .a, .cc-newsall .a { display: inline-block; transition: transform 0.18s ease; }
  .cc-newsread:hover .a { transform: translateX(4px); }
  .cc-newsall:hover .a { transform: translate(3px, -3px); }
  .cc-newsread:focus-visible, .cc-newsall:focus-visible { outline: 2px solid var(--accent-blue, #2F6FED); outline-offset: 3px; border-radius: 2px; }
  .cc-newsall { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light-55); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.18s ease; }
  .cc-newsall:hover { color: var(--accent-blue-deep, #3469de); }
  @media (prefers-reduced-motion: reduce) { .cc-newshead, .cc-newsread .a, .cc-newsall .a, .cc-newsall { transition: none; } }
  .cc-newspill { transition: background 0.18s ease, border-color 0.18s ease; }
  .cc-newspill:hover { background: rgba(47,111,237,0.14) !important; border-color: rgba(47,111,237,0.55) !important; }
  .cc-newspill:hover .cc-newsarrow { transform: translateX(3px); }
  .cc-modal-x { position: absolute; top: 24px; right: 28px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .cc-modal-x:hover { background: #fff; border-color: #fff; color: #05080f; }
  .sc-host-x nav img { height: 44px !important; }
  .sc-host-x section img[alt="3dB Labs"] { height: 44px !important; }
  .sc-host-x nav > div:nth-child(2) > div,
  .sc-host-x nav > div:nth-child(2) > div span { font-family: var(--font-sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 12.5px !important; font-weight: 400 !important; }
  .sc-host-x nav > div:nth-child(2) > div span:empty { width: 6px !important; height: 6px !important; border-width: 0 1.25px 1.25px 0 !important; }
  .cc-newspill:focus-visible { outline: 2px solid var(--accent-blue-bright); outline-offset: 3px; }

  /* ── Nav responsive: the DS NavBar is a fixed 64px row and its 7 links cannot
     fit below ~1000px. The links row used to be hidden entirely in favour of a
     JS-injected hamburger — that injector unmounted whole pages (see
     shared/site-nav.js) and is gone, so the row must stay reachable WITHOUT any
     DOM mutation. It now scrolls horizontally instead of disappearing. ── */
  @media (max-width: 1000px) {
    .sc-host-x nav > div:nth-child(2) {
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      /* The DS centres this row. A centred flex container overflows equally at
         BOTH ends and scrollLeft cannot go negative, so the left-hand overflow —
         the first link — becomes permanently unreachable. Must be flex-start. */
      justify-content: flex-start !important;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      max-width: 100% !important;
      padding-inline: 2px !important;
    }
    .sc-host-x nav > div:nth-child(2)::-webkit-scrollbar { display: none; }
    .sc-host-x nav > div:nth-child(2) > div { flex: 0 0 auto !important; white-space: nowrap !important; }
    .sc-host-x nav { justify-content: flex-start !important; column-gap: 12px !important; padding-left: 18px !important; padding-right: 18px !important; }
    .sc-host-x nav > div:nth-child(3) { margin-left: auto !important; }
    .sc-host-x nav img { height: 36px !important; }
  }
  /* ── Footer responsive: the DS SiteFooter's inner grid is an inline
     `280px 1fr 220px`, so below ~900px the two fixed columns exceed the
     container and the middle one collapses — that 500px floor was the page's
     horizontal overflow (the footer mounts OUTSIDE the page wrapper's
     overflow-x: clip, so nothing else contained it). Selector matches the
     component's inline style because SiteFooter exposes no class hook. ── */
  @media (max-width: 900px) {
    .sc-host-x div[style*="280px 1fr 220px"] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 40px 32px !important;
      padding-top: 52px !important;
    }
  }
  @media (max-width: 560px) {
    .sc-host-x div[style*="280px 1fr 220px"] {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 34px !important;
      padding-bottom: 44px !important;
    }
  }
  /* Hero H1: the <h1> renders TWO children the template owns —
     .cc-h1-fallback (the real authored headline, visible until JS runs) and
     .cc-h1-slot, an UNCONTROLLED empty span whose contents the scramble handler
     owns. The handler only sets display on the fallback (a style write on a
     template node is fine); it never touches either element's child list.
     Never give .cc-h1-slot children in the template.
     Earlier this used `content: attr(data-anim-text)` on :empty — which flashed
     the literal text "undefined" before the runtime resolved the attribute. */
  /* ── Multi-button CTA rows: stack full-width below 768px ──────────────────
     Every row of 2+ CTAs on the site. The DS Button is white-space:nowrap and
     cannot shrink, so two side by side overflow a phone's content box; and the
     Button lays out label + arrow as a row, which reads hard-left once the
     button is full-width — hence the centred justify-content.
     Rows are tagged .cc-btnrow; .cc-hero-btns/.su-cta-row/.ps-cta-row are the
     pre-existing named rows that do the same job. ── */
  @media (max-width: 768px) {
    .cc-btnrow, .su-cta-row, .ps-cta-row, .in-res-actions {
      flex-direction: column !important;
      align-items: stretch !important;
      flex-wrap: wrap !important;
    }
    .cc-btnrow > *, .su-cta-row > *, .ps-cta-row > *, .in-res-actions > * { width: 100% !important; }
    .cc-btnrow button, .cc-btnrow a,
    .su-cta-row button, .su-cta-row a,
    .ps-cta-row button, .ps-cta-row a,
    .in-res-actions button, .in-res-actions a { width: 100% !important; justify-content: center !important; }
  }
  /* ── Mobile safety net for unbreakable display type ───────────────────────
     Uppercase expanded Venera produces very wide single words ("INTEROPERABILITY"
     is ~403px at 30px). A grid child defaults to min-width:auto, so it can never
     be narrower than its longest word — the column inflates past the viewport and
     the root's overflow-x:clip cuts the text with NO scrollbar to reveal it. That
     silence is why three pages shipped clipped.
     Making words breakable also collapses their min-content width, so this single
     rule both prevents the cut and lets pinned grid columns shrink. `anywhere`,
     not `break-word`: only `anywhere` reduces intrinsic min-content sizing, which
     is the half that unpins the column. Both break only when a word genuinely
     cannot fit, so this changes nothing where text already fits. ── */
  @media (max-width: 760px) { body { overflow-wrap: anywhere; } }
  .cc-hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .cc-hero-copy { width: 100%; text-align: left; }
  .cc-hero-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 48px; align-items: start; }
  .cc-hero-btns > * { flex-shrink: 0; }
  .cc-hero-btns, .cc-hero-btns * { white-space: nowrap !important; }
  @media (max-width: 860px) { .cc-hero-cols { grid-template-columns: 1fr; gap: 22px; } }
  .cc-hero-frame { --exp: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-top: 84px; position: relative; clip-path: inset(0 max(0px, calc((100vw - 1152px) * (1 - var(--exp)) / 2)) round 8px 8px 0 0); will-change: clip-path; }
  .cc-hero-frame::before { content: ""; position: absolute; left: -10%; top: -8%; right: -10%; bottom: -8%; z-index: 0; pointer-events: none; filter: blur(72px); background:
      radial-gradient(38% 42% at 26% 30%, rgba(68,121,238,0.72), transparent 62%),
      radial-gradient(30% 50% at 82% 68%, rgba(47,111,237,0.6), transparent 60%),
      radial-gradient(46% 30% at 62% 92%, rgba(31,79,208,0.5), transparent 66%); }
  .cc-hero-frame::after { content: ""; position: absolute; left: -10%; top: -8%; right: -10%; bottom: -8%; z-index: 0; pointer-events: none; filter: blur(96px); background:
      radial-gradient(34% 40% at 70% 18%, rgba(68,121,238,0.5), transparent 64%),
      radial-gradient(40% 44% at 14% 78%, rgba(47,111,237,0.42), transparent 62%); }
  @media (prefers-reduced-motion: no-preference) {
    .cc-hero-frame::before { animation: cc-glowdrift-a 17s ease-in-out infinite; }
    .cc-hero-frame::after { animation: cc-glowdrift-b 23s ease-in-out infinite; }
  }
  @keyframes cc-glowdrift-a { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.9; } 33% { transform: translate(3%, -2.5%) scale(1.07); opacity: 1; } 66% { transform: translate(-2.5%, 2%) scale(0.96); opacity: 0.82; } }
  @keyframes cc-glowdrift-b { 0%,100% { transform: translate(0,0) scale(1.04); opacity: 0.8; } 40% { transform: translate(-3.5%, 2.5%) scale(0.94); opacity: 0.95; } 70% { transform: translate(2.5%, -2%) scale(1.08); opacity: 0.7; } }
  @media (prefers-reduced-motion: no-preference) { .cc-hero-frame::before { animation: cc-glowpulse 6s ease-in-out infinite; } }
  @keyframes cc-glowpulse { 0%,100% { opacity: 0.8; } 50% { opacity: 1; } }
  @keyframes cc-heroglow-a { 0%,100% { transform: translate(-50%,0) scale(1); opacity: 0.92; } 50% { transform: translate(-50%,-2%) scale(1.06); opacity: 1; } }
  @keyframes cc-heroglow-b { 0%,100% { transform: translate(-50%,0) scale(1.04); opacity: 0.78; } 50% { transform: translate(-50%,2%) scale(0.96); opacity: 0.95; } }
  @media (prefers-reduced-motion: no-preference) {
    .cc-hero-glow { animation: cc-heroglow-a 18s ease-in-out infinite; }
    .cc-hero-glow-b { animation: cc-heroglow-b 24s ease-in-out infinite; }
  }
  @media (max-width: 720px) { .cc-hero-frame { margin-top: 36px; } }
  @keyframes cc-rowin { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
  .mission-in .cc-missionrow.cc-reveal { animation: cc-rowin 0.55s cubic-bezier(0.4,0,0.2,1) both; }
  .mission-in .cc-missionrow.cc-reveal:nth-of-type(2) { animation-delay: 0.14s; }
  .mission-in .cc-missionrow.cc-reveal:nth-of-type(3) { animation-delay: 0.28s; }
  .cc-prodlink { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; cursor: pointer; margin-bottom: 14px; }
  .cc-prodlink h3 { transition: color 0.2s ease; }
  .cc-prodarrow { transition: transform 0.2s ease; }
  .cc-prodlink:hover h3 { color: var(--accent-blue-bright); }
  .cc-prodlink:hover .cc-prodarrow { transform: translate(3px, -3px); }
  .cc-hbr { display: none; }
  .cc-typecursor { font-family: var(--font-mono); font-size: 0.52em; color: var(--accent-blue-bright); margin-left: 4px; vertical-align: 0.12em; animation: cc-blink 1s step-end infinite; }
  .cc-reticle { transition: width 0.3s cubic-bezier(0.4,0,0.2,1), height 0.3s cubic-bezier(0.4,0,0.2,1); }
  .cc-reticle:hover { width: 116px !important; height: 116px !important; }
  .cc-prodcard { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease; cursor: pointer; }
  .cc-prodcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(10,22,40,0.4); }
  .cc-prod-sub { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease; }
  .cc-prod-sub > p { overflow: hidden; min-height: 0; margin: 0 !important; padding-top: 10px; }
  .cc-prod-scrim { opacity: 0; transition: opacity 0.3s ease; }
  .cc-prodcard:hover .cc-prod-scrim { opacity: 1; }
  .cc-prodcard:hover .cc-prod-sub { grid-template-rows: 1fr; opacity: 1; }

  /* ──────────── RESPONSIVE / MOBILE ──────────── */
  @media (max-width: 1024px) {
    [data-screen-label="Mission-Specific"] > div { grid-template-columns: 1fr !important; gap: 36px !important; }
    [data-screen-label="Integration"] > div { height: auto !important; }
  }
  @media (max-width: 768px) {
    /* hero */
    .cc-hero-grid { padding: 48px 18px 0 !important; }
    .cc-hero-cols h1 { font-size: 34px !important; }
    /* Hero CTAs: the two buttons need ~369px side by side and the row's children
       are white-space:nowrap, so they cannot shrink — they overflowed the 342px
       content box. Stack them full-width, label centred (the DS Button lays out
       label + arrow in a row, which would otherwise sit hard left). */
    .cc-hero-btns { flex-direction: column !important; align-items: stretch !important; flex-wrap: wrap !important; }
    .cc-hero-btns > * { width: 100% !important; }
    .cc-hero-btns button, .cc-hero-btns a { width: 100% !important; justify-content: center !important; }
    .cc-hero-cols > div:last-child { align-items: stretch !important; margin-top: 6px; }
    .cc-hero-cols > div:last-child > div { justify-content: flex-start !important; }
    .cc-hero-frame { margin-top: 30px !important; }
    .cc-hero-frame div[aria-hidden="true"] { display: none !important; }
    .cc-ui-caption { position: static !important; max-width: none !important; padding: 18px 20px !important; margin-top: 0 !important; background: #070b16 !important; border-top: 1px solid rgba(47,111,237,0.25) !important; }
    /* who we are → stack head + photos */
    [data-screen-label="Who We Are"] { padding: 64px 22px !important; }
    .cc-wwa-head { grid-template-columns: 1fr !important; gap: 24px !important; }
    .cc-wwa-photos { grid-template-columns: 1fr 1fr !important; grid-auto-rows: 180px; height: auto !important; }
    .cc-wwa-photos > div:first-child { grid-column: span 2; }
    .cc-wwa-readouts { flex-direction: column !important; gap: 22px !important; }
    /* hardware → single-column bento, group headers stack, reveal sub (no hover on touch) */
    [data-screen-label="Hardware Systems"] > div { padding: 64px 22px !important; }
    [data-screen-label="Hardware Systems"] h2 { font-size: 30px !important; }
    .cc-hbr { display: inline; }
    .cc-prodlink { display: flex !important; justify-content: space-between; width: 100%; }
    [data-screen-label="Hardware Systems"] [style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }
    .cc-bento { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
    .cc-bento .cc-prodcard { grid-column: auto !important; grid-row: auto !important; min-height: 300px; }
    .cc-prod-sub { grid-template-rows: 1fr !important; opacity: 1 !important; }
    .cc-prod-scrim { opacity: 1 !important; }
    /* integration → text over marquee */
    [data-screen-label="Integration"] > div { grid-template-columns: 1fr !important; gap: 0 !important; height: auto !important; }
    [data-screen-label="Integration"] > div > div:first-child { padding: 64px 0 8px !important; }
    [data-screen-label="Integration"] > div > div:last-child { height: 420px !important; margin-bottom: 56px; }
    [data-screen-label="Integration"] h2 { font-size: 30px !important; }
    /* mission */
    [data-screen-label="Mission-Specific"] > div { padding: 64px 22px !important; }
    .cc-missionrow { padding: 26px 24px !important; }
    /* tame big vertical paddings */
    [data-screen-label="Video"] > div { padding: 84px 22px !important; }
    [data-screen-label="Video"] h2 { font-size: 34px !important; }
    [data-screen-label="Demo CTA"] > div { padding: 96px 22px 104px !important; }
    [data-screen-label="News"] > div { padding: 64px 22px !important; }
  }

/* ── Sceptre Software section (UI showcase) — moved inline from the former child DC ── */
.cc-cap:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
@media (max-width: 820px) {
  .cc-sw-caps { grid-template-columns: 1fr 1fr !important; }
  .cc-sw-display { aspect-ratio: 16/9 !important; }
}
@media (max-width: 480px) {
  .cc-sw-caps { grid-template-columns: 1fr !important; }
}