/* ChakaTech — chakatech.com
   Direction: a dark, cinematic field lit only by the brand's signal blue, the way a rack room looks with
   the lights off. Wide Archivo for display, Archivo for reading, Martian Mono for engineering labels.
   Zero JavaScript: motion is CSS (incl. scroll-driven animations) and SMIL inside the inline SVGs. */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("/assets/fonts/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap; }

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --ink-0: #030609;
  --ink-1: #060b12;
  --ink-2: #0a131e;
  --ink-3: #0f1c2b;
  --line: rgba(150, 196, 240, 0.12);
  --line-2: rgba(150, 196, 240, 0.22);
  --text: #eef4fa;
  --text-2: #b3c3d3;
  --text-3: #7d91a6;
  --text-4: #687e93;     /* 4.8:1 on --ink-0, the floor for small labels */
  --brand: #4995d1;      /* official logo blue */
  --signal: #36a9ff;     /* interactive light */
  --signal-2: #8fd3ff;
  --ice: #dff3ff;
  --ok: #3ddc97;
  --amber: #ffb547;
  --danger: #ff6b5e;
  --display: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1320px;
  --pad: max(22px, 4vw);
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; background: var(--ink-0); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--ink-0) url("/assets/img/noise.png");
  color: var(--text-2); font: 380 1.0625rem/1.65 var(--display); font-kerning: normal;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--signal-2); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--ice); }
:focus-visible { outline: 2px solid var(--signal-2); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(54, 169, 255, .35); color: #fff; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3 { color: var(--text); text-wrap: balance; }
p { text-wrap: pretty; }
address { font-style: normal; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 100; background: var(--text); color: var(--ink-0); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 12px; }

/* ---------------------------------------------------------------- type */
.display { font-family: var(--display); font-weight: 250; font-stretch: 116%; letter-spacing: -.028em; line-height: .98; color: var(--text); }
h1.display { font-size: clamp(2.75rem, 1.35rem + 4.3vw, 5.35rem); }
.display em, .title em { font-style: normal; color: var(--signal-2); background: linear-gradient(100deg, #ffffff 0%, var(--signal-2) 42%, var(--signal) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.title { font-family: var(--display); font-weight: 270; font-stretch: 112%; font-size: clamp(2.05rem, 1.25rem + 3vw, 3.9rem); letter-spacing: -.022em; line-height: 1.03; }
.title.sm { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
h3 { font-size: 1.3rem; font-weight: 500; font-stretch: 104%; letter-spacing: -.01em; line-height: 1.25; }
.eyebrow { display: inline-flex; align-items: center; gap: .7em; font-family: var(--mono); font-size: .7rem; font-weight: 400; font-stretch: 92%; letter-spacing: .24em; text-transform: uppercase; color: var(--signal-2); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, transparent, var(--signal-2)); }
.lede { font-size: clamp(1.08rem, .98rem + .35vw, 1.28rem); line-height: 1.6; font-weight: 340; color: var(--text-2); max-width: 54ch; }
.mono { font-family: var(--mono); font-stretch: 92%; }
.muted { color: var(--text-3); }

/* ---------------------------------------------------------------- progress + header */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 60; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(54, 169, 255, 0), var(--signal) 40%, var(--ice)); pointer-events: none; }
/* The glass lives on ::before, not the header itself: a backdrop-filter on the header would make it the
   containing block for the fixed mobile-menu panel and trap the panel inside the 76px bar. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; isolation: isolate; view-transition-name: site-header; padding-top: env(safe-area-inset-top, 0px); }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(3, 6, 9, .74); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--line);
}
.brand, .mnav summary { position: relative; z-index: 2; }
.bar { display: flex; align-items: center; gap: 28px; min-height: 76px; }
.brand { display: block; width: 224px; flex: none; line-height: 0; }
.brand .logo { width: 100%; height: auto; }
.logo-word { fill: #fff; }
.logo-tag { fill: var(--brand); }
.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; padding: 0; }
.nav a { display: block; padding: 10px 14px; color: var(--text-2); text-decoration: none; font-size: .9rem; font-weight: 450; font-stretch: 106%; letter-spacing: .01em; border-radius: 999px; transition: color .25s, background .25s; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); background: rgba(143, 211, 255, .07); }
.has-menu { position: relative; }
.has-menu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .7; }
.menu { position: absolute; top: calc(100% + 10px); left: 50%; width: 560px; translate: -50% 6px; padding: 10px; border-radius: 20px; border: 1px solid var(--line-2); background: rgba(6, 12, 20, .94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transition: opacity .25s, translate .25s var(--ease), visibility .25s; }
.menu::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.has-menu:hover .menu, .has-menu:focus-within .menu { opacity: 1; visibility: visible; translate: -50% 0; }
.menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; list-style: none; padding: 0; }
.menu a { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; }
.menu a span { color: var(--text); font-weight: 520; }
.menu a small { color: var(--text-3); font-size: .78rem; font-weight: 380; }
.menu a:hover { background: rgba(143, 211, 255, .07); }
.header-cta { flex: none; }
.mnav { display: none; }
@media (max-width: 1020px) {
  .bar .nav, .bar .header-cta { display: none; }
  .mnav { display: block; margin-left: auto; }
  .brand { width: 196px; }
  .mnav summary { list-style: none; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-content: center; gap: 6px; position: relative; z-index: 2; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav summary span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform .3s var(--ease); }
  .mnav[open] summary span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .mnav[open] summary span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .mnav-panel { position: fixed; inset: 0; z-index: 1; overflow-y: auto; padding: calc(110px + env(safe-area-inset-top, 0px)) max(var(--pad), env(safe-area-inset-right, 0px)) calc(40px + env(safe-area-inset-bottom, 0px)) max(var(--pad), env(safe-area-inset-left, 0px)); background: radial-gradient(80% 50% at 80% 0%, rgba(30, 128, 232, .16), transparent 70%), var(--ink-0); display: grid; align-content: start; gap: 36px; }
  .mnav-panel ul { list-style: none; padding: 0; display: grid; gap: 4px; }
  .mnav-panel a { display: block; padding: 10px 0; color: var(--text); text-decoration: none; font-weight: 260; font-stretch: 114%; font-size: clamp(1.9rem, 6vw, 2.6rem); letter-spacing: -.02em; line-height: 1.1; }
  .mnav-panel a[aria-current="page"] { color: var(--signal-2); }
  .mnav-contact { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 24px; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; }
  .mnav-contact a { font-family: var(--mono); font-size: .95rem; font-stretch: 92%; letter-spacing: .04em; padding: 2px 0; color: var(--text-2); }
  html:has(.mnav[open]) { overflow: hidden; }
  /* the open panel covers the page: take what it covers out of the tab order too, so focus can't wander behind it
     (the logo and the close button sit above the panel and stay reachable) */
  body:has(.mnav[open]) > :is(main, footer, .skip), body:has(.mnav[open]) .site-header :is(.nav, .header-cta) { visibility: hidden; }
}

/* ---------------------------------------------------------------- buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .65em; min-height: 52px; padding: 0 1.55rem; border-radius: 999px; font: 520 .95rem/1 var(--display); font-stretch: 108%; letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s, background-color .3s, border-color .3s, color .3s; }
.btn.small { min-height: 42px; padding: 0 1.15rem; font-size: .86rem; }
.btn.primary { color: #021120; background: linear-gradient(180deg, #67c2ff 0%, #2b98f2 100%); box-shadow: inset 0 0 0 1px rgba(200, 235, 255, .45), 0 12px 40px -12px rgba(54, 169, 255, .7); }
.btn.primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease); }
.btn.primary:hover { color: #021120; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(220, 245, 255, .6), 0 18px 54px -12px rgba(54, 169, 255, .95); }
.btn.primary:hover::after { transform: translateX(130%); }
.btn.ghost { color: var(--text); background: rgba(255, 255, 255, .025); border: 1px solid var(--line-2); }
.btn.ghost:hover { color: var(--text); border-color: rgba(143, 211, 255, .55); background: rgba(143, 211, 255, .07); }
.btn svg, .more svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); }
.btn:hover svg, a:hover .more svg { transform: translateX(3px); }
.more { display: inline-flex; align-items: center; gap: .55em; font-size: .82rem; font-weight: 560; font-stretch: 108%; letter-spacing: .04em; color: var(--signal-2); }

/* ---------------------------------------------------------------- sections */
.section { position: relative; padding-block: clamp(76px, 9vw, 136px); }
.section.tight { padding-block: clamp(56px, 6.5vw, 96px); }
.section.rule { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 20px; max-width: 780px; margin-bottom: clamp(44px, 5.5vw, 80px); }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head p { max-width: 60ch; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.split > * { min-width: 0; }
.stack { display: grid; gap: 22px; align-content: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; isolation: isolate; overflow: clip; padding-block: calc(132px + env(safe-area-inset-top, 0px)) clamp(56px, 8vw, 104px); }
.hero::before, .page-hero::before, .cta::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(48% 56% at 74% 46%, rgba(30, 128, 232, .30), transparent 72%), radial-gradient(36% 40% at 8% 4%, rgba(73, 149, 209, .14), transparent 70%), radial-gradient(60% 40% at 50% 112%, rgba(54, 169, 255, .12), transparent 70%); }
.hero::after, .page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(140, 190, 240, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 190, 240, .055) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 72% at 62% 40%, #000 25%, transparent 78%); mask-image: radial-gradient(70% 72% at 62% 40%, #000 25%, transparent 78%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 3vw, 56px); align-items: center; }
.hero-copy { display: grid; gap: 26px; align-content: start; position: relative; z-index: 1; }
.hero-copy .lede { max-width: 46ch; }
.hero-art { position: relative; margin-right: calc(-1 * clamp(0px, 4vw, 80px)); }
.hero-art figcaption { margin-top: 6px; padding-right: clamp(0px, 4vw, 80px); text-align: right; text-wrap: balance; font-family: var(--mono); font-stretch: 92%; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; color: var(--text-4); text-decoration: none; font-family: var(--mono); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue::after { content: ""; width: 1px; height: 38px; background: linear-gradient(var(--signal-2), transparent); transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@media (max-width: 1279px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { width: 100%; max-width: 900px; margin: 8px auto 0; }
  .hero-art figcaption { text-align: left; padding-right: 0; }
  .scroll-cue { display: none; }
}

/* ---------------------------------------------------------------- inner page hero */
.page-hero { position: relative; isolation: isolate; overflow: clip; padding-block: calc(140px + env(safe-area-inset-top, 0px)) clamp(56px, 8vw, 104px); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* narrow the content, not the .wrap, so these pages keep the same left edge as the logo and every section */
.page-hero-grid.solo { grid-template-columns: minmax(0, 1fr); } .page-hero-grid.solo > * { max-width: 980px; }
.page-hero .stack { gap: 26px; }
.page-hero h1.display { font-size: clamp(2.6rem, 1.4rem + 4.3vw, 5.4rem); }
.crumbs { font-family: var(--mono); font-stretch: 92%; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-4); }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.art-frame { position: relative; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(80% 80% at 50% 40%, rgba(36, 112, 196, .18), transparent 70%), linear-gradient(180deg, rgba(12, 24, 38, .7), rgba(4, 9, 15, .85)); padding: clamp(10px, 2vw, 22px); box-shadow: 0 50px 140px -50px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04); }
/* below 1280 px a half-width frame would shrink the art's labels under 10 CSS px: stack instead */
@media (max-width: 1279px) { .page-hero-grid { grid-template-columns: 1fr; } .page-hero-grid > .art-frame { max-width: 760px; } }

/* ---------------------------------------------------------------- manifesto */
.manifesto { padding-block: clamp(56px, 7vw, 112px); }
.manifesto p { font-family: var(--display); font-weight: 270; font-stretch: 112%; font-size: clamp(1.35rem, .9rem + 1.6vw, 2.4rem); line-height: 1.2; letter-spacing: -.022em; color: var(--text); max-width: 36ch; }
.manifesto .sig { display: flex; align-items: center; gap: 14px; margin-top: 26px; font-family: var(--mono); font-stretch: 92%; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.manifesto .sig .signal { width: 26px; height: 26px; fill: var(--brand); }

/* ---------------------------------------------------------------- discipline cards */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.bento .card { grid-column: span 2; }
.bento .card:nth-child(1), .bento .card:nth-child(2) { grid-column: span 3; }
.card { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 28, 44, .72), rgba(5, 10, 17, .92)); color: inherit; text-decoration: none; transition: transform .6s var(--ease), border-color .4s, box-shadow .6s; }
.card::before { content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--a), transparent 0 60%, rgba(143, 211, 255, .95) 76%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .45s; }
.card:hover { color: inherit; transform: translateY(-5px); box-shadow: 0 50px 120px -50px rgba(30, 128, 232, .55); }
.card:hover::before { opacity: 1; animation: orbit 4.5s linear infinite; }
.card-art { position: relative; padding: 20px 20px 0; background: radial-gradient(80% 75% at 50% 42%, rgba(36, 112, 196, .2), transparent 72%); }
.card-art .art { aspect-ratio: 640 / 440; }
/* Cards are thumbnails of the art on each service page: at card size its labels would render at 3–9 px, so the
   cards show the motion without any text (the card body says what it is). */
.card-art .art text, .card-art .art .pill { display: none; }
.card-body { display: grid; gap: 12px; align-content: start; padding: 24px 30px 32px; }
.card-body .kicker { font-family: var(--mono); font-stretch: 92%; font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--signal-2); }
.card-body h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); font-weight: 400; font-stretch: 110%; letter-spacing: -.015em; }
.card-body p { color: var(--text-3); font-size: .98rem; max-width: 52ch; }
.card-body .more { margin-top: 6px; }
@media (max-width: 1020px) { .bento .card:nth-child(n) { grid-column: span 3; } .bento .card:nth-child(5) { grid-column: 2 / span 4; } }
@media (max-width: 760px) { .bento { grid-template-columns: 1fr; } .bento .card:nth-child(n) { grid-column: auto; } }

/* ---------------------------------------------------------------- segmentation */
.wide-frame { margin-top: clamp(40px, 5vw, 72px); border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(10, 20, 33, .6), rgba(4, 8, 14, .8)); padding: clamp(14px, 2.4vw, 34px); }
/* each wide diagram is drawn twice: wide, and stacked for screens where the wide one's labels would drop under
   10 CSS px (gen-art.mjs sizes the stacked one for a 288 px phone frame and up to the 480 px cap here) */
.wide-frame .art.port { display: none; }
@media (max-width: 1023px) { .wide-frame .art.land { display: none; } .wide-frame .art.port { display: block; max-width: 480px; margin-inline: auto; } }
@media (max-width: 359px) { .wide-frame { margin-inline: calc(10px - var(--pad)); padding-inline: 6px; } .wide-frame .frame-cap { padding-inline: 8px; } }
.points { list-style: none; padding: 0; display: grid; gap: 14px; }
.points li { position: relative; padding-left: 26px; color: var(--text-2); }
.points li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px 2px rgba(54, 169, 255, .5); }
.points strong { color: var(--text); font-weight: 520; }

/* ---------------------------------------------------------------- method */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; }
.steps::before, .steps::after { content: ""; position: absolute; left: 28px; right: 8%; top: 28px; height: 1px; }
.steps::before { background: var(--line-2); }
.steps::after { background: linear-gradient(90deg, var(--signal), var(--ice)); transform-origin: 0 50%; box-shadow: 0 0 12px rgba(54, 169, 255, .8); }
.step { position: relative; display: grid; gap: 14px; align-content: start; }
.step .node { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line-2); box-shadow: 0 0 0 8px var(--ink-0); }
.step .node svg { width: 24px; height: 24px; fill: none; stroke: var(--signal-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.step .num { font-family: var(--mono); font-stretch: 92%; font-size: .66rem; letter-spacing: .24em; color: var(--signal-2); }
.step h3 { font-size: 1.22rem; font-weight: 460; font-stretch: 108%; }
.step p { font-size: .95rem; color: var(--text-3); }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .steps::before, .steps::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; }
  .steps::after { transform-origin: 50% 0; }
  .step { grid-template-columns: 56px 1fr; column-gap: 22px; row-gap: 6px; }
  .step .node { grid-row: span 3; }
}

.stack.measure { max-width: 780px; }

/* ---------------------------------------------------------------- discretion ledger */
.ledger { border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(12, 24, 38, .66), rgba(4, 9, 15, .92)); font-family: var(--mono); font-stretch: 92%; overflow: hidden; box-shadow: 0 50px 140px -60px rgba(0, 0, 0, .95); }
.ledger-head { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid var(--line); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.ledger ol { list-style: none; padding: 0; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 6px 18px; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.ledger li:last-child { border-bottom: 0; }
.redact { display: block; height: 13px; border-radius: 3px; background: linear-gradient(90deg, #172435 0%, #24394f 50%, #172435 100%); background-size: 220% 100%; animation: redact 4.2s ease-in-out infinite; }
.redact.w1 { width: 88%; } .redact.w2 { width: 64%; } .redact.w3 { width: 76%; } .redact.w4 { width: 54%; } .redact.w5 { width: 70%; } .redact.w6 { width: 82%; } .redact.w7 { width: 60%; } .redact.w8 { width: 74%; }
.ledger li:nth-child(2n) .redact { animation-delay: -1.4s; } .ledger li:nth-child(3n) .redact { animation-delay: -2.8s; }
.ledger .place { color: var(--text-2); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.ledger .scope { grid-column: 1 / -1; color: var(--text-4); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; }
/* where we work: the map card reuses the ledger frame. A dot-matrix country with the served states lit, light arcs
   from the LA hub carrying packets, a scan sweeping east, and a beacon on every state. Reduced motion: a still frame. */
.where { position: relative; }
.where-map { padding: 10px 10px 18px; background: radial-gradient(60% 70% at 30% 55%, rgba(54, 169, 255, .14), transparent 70%); }
.usmap { display: block; width: 100%; height: auto; overflow: visible; }
.usmap .land { fill: url(#um-dots); stroke: rgba(130, 190, 250, .16); stroke-width: .7; stroke-linejoin: round; }
.usmap .lit { fill: url(#um-dots-on); stroke: rgba(150, 215, 255, .85); stroke-width: 1.1; stroke-linejoin: round; }
.usmap .lit-glow { fill: rgba(54, 169, 255, .2); stroke: rgba(54, 169, 255, .55); stroke-width: 6; stroke-linejoin: round; opacity: .55; animation: um-breathe 4s ease-in-out infinite; }
.usmap .sweep { animation: um-sweep 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.usmap .inset { fill: none; stroke: rgba(130, 190, 250, .14); stroke-width: 1; stroke-dasharray: 2 6; }
.usmap .arc { fill: none; stroke: rgba(110, 195, 255, .22); stroke-width: 1.2; }
.usmap .arc-run { fill: none; stroke: #8fd3ff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: .16 .84; animation: um-run 3.2s linear infinite; filter: drop-shadow(0 0 4px rgba(54, 169, 255, .95)); }
.usmap .arc-run.a1 { animation-delay: -.8s; } .usmap .arc-run.a2 { animation-delay: -1.6s; } .usmap .arc-run.a3 { animation-delay: -2.4s; }
.usmap .pk { fill: #fff; filter: drop-shadow(0 0 5px #36a9ff); }
.usmap .halo { fill: rgba(54, 169, 255, .18); animation: um-breathe 2.6s ease-in-out infinite; }
.usmap .beam { fill: url(#um-beam); opacity: .7; animation: um-flicker 3.4s ease-in-out infinite; }
.usmap .core { fill: #eaf6ff; filter: drop-shadow(0 0 7px rgba(54, 169, 255, 1)); }
.usmap .ring { fill: none; stroke: #5bbcff; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: um-ping 3s ease-out infinite; }
.usmap .ring.r2 { animation-delay: -1s; } .usmap .ring.r3 { animation-delay: -2s; }
.usmap .pin:nth-child(2n) .ring, .usmap .pin:nth-child(2n) .beam { animation-duration: 3.6s; }
.usmap .pin.hub .halo { fill: rgba(54, 169, 255, .3); }
.usmap .pin.hub .ring { stroke: #9fdcff; stroke-width: 2; }
@keyframes um-ping { from { transform: scale(1); opacity: .95; } to { transform: scale(4.2); opacity: 0; } }
@keyframes um-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes um-sweep { from { transform: translateX(0); } to { transform: translateX(1200px); } }
@keyframes um-breathe { 50% { opacity: .9; } }
@keyframes um-flicker { 0%, 100% { opacity: .75; } 45% { opacity: .35; } 55% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .usmap .ring, .usmap .arc-run, .usmap .sweep, .usmap .lit-glow, .usmap .halo, .usmap .beam { animation: none; }
  .usmap .ring.r2, .usmap .ring.r3, .usmap .pks, .usmap .sweep { display: none; }
  .usmap .arc-run { stroke-dasharray: none; opacity: .5; }
}

/* ---------------------------------------------------------------- equipment marquee */
.marquee { overflow: hidden; padding-block: 8px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; gap: clamp(44px, 5vw, 88px); padding: 0 clamp(44px, 5vw, 88px) 0 0; list-style: none; }
/* vendor marks: every logo flattened to one white silhouette, sized by area (width × height attributes) so wide
   wordmarks and stacked marks carry the same visual weight; scaled down as a set on narrow screens */
.marquee ul { align-items: center; }
.marquee li { display: flex; align-items: center; flex: none; }
.marquee img { display: block; filter: brightness(0) invert(1); opacity: .5; transition: opacity .3s; }
.marquee li:hover img { opacity: 1; }
@media (max-width: 1023px) { .marquee-track { zoom: .8; } }
@media (max-width: 600px) { .marquee-track { zoom: .62; } }

/* ---------------------------------------------------------------- final call to action */
.cta { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-block: clamp(110px, 15vw, 210px); border-top: 1px solid var(--line); }
.cta::before { background: radial-gradient(46% 60% at 50% 108%, rgba(54, 169, 255, .34), transparent 72%), radial-gradient(30% 30% at 50% 0%, rgba(73, 149, 209, .08), transparent 70%); }
.cta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, var(--signal), var(--ice), var(--signal), transparent); box-shadow: 0 0 24px 2px rgba(54, 169, 255, .6); animation: horizon 6s ease-in-out infinite; }
.cta .stack { justify-items: center; gap: 24px; }
.cta .lede { margin-inline: auto; text-align: center; }
.phone-link { display: inline-block; margin-top: 8px; font-weight: 220; font-stretch: 122%; font-size: clamp(2.5rem, 1.2rem + 6.2vw, 6.6rem); line-height: 1; letter-spacing: -.035em; color: var(--text); text-decoration: none; transition: color .3s, text-shadow .4s; font-variant-numeric: tabular-nums; }
.phone-link:hover { color: #fff; text-shadow: 0 0 40px rgba(54, 169, 255, .55); }
.cta-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; font-family: var(--mono); font-stretch: 92%; font-size: .74rem; letter-spacing: .1em; color: var(--text-3); }
.cta-meta a { color: var(--text-2); text-decoration: none; }
.cta-meta a:hover { color: var(--text); }

/* ---------------------------------------------------------------- service pages */
.caps { list-style: none; padding: 0; counter-reset: cap; border-top: 1px solid var(--line); overflow-x: clip; }
.cap { counter-increment: cap; position: relative; display: grid; grid-template-columns: 48px minmax(0, 5fr) minmax(0, 6fr); gap: 6px clamp(20px, 3vw, 48px); align-items: baseline; padding: 22px 0 24px; border-bottom: 1px solid var(--line); /* the static rule; ::after draws the lit one over it */
  background: linear-gradient(90deg, rgba(54, 169, 255, .09), rgba(54, 169, 255, 0) 70%) no-repeat 0 0 / 0 100%; transition: background-size .7s var(--ease); }
.cap::before { content: counter(cap, decimal-leading-zero); font-family: var(--mono); font-stretch: 92%; font-size: .74rem; letter-spacing: .18em; color: var(--signal); transition: color .4s, text-shadow .4s; }
/* the row rule: a bright head that fades into the plain line, drawn in as the row arrives */
.cap::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--signal), var(--line) 28%); transform-origin: left; }
.cap h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 400; letter-spacing: -.01em; transition: translate .6s var(--ease), color .4s; }
.cap p { font-size: .98rem; line-height: 1.55; color: var(--text-3); max-width: 52ch; transition: color .4s; }
.cap:hover { background-size: 100% 100%; }
.cap:hover::before { color: var(--text); text-shadow: 0 0 14px rgba(54, 169, 255, .9); }
.cap:hover h3 { translate: 10px 0; color: #fff; }
.cap:hover p { color: var(--text-2); }
@media (max-width: 760px) { .cap { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; } .cap p { grid-column: 2; } }
.specs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; }
.specs li { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(143, 211, 255, .03); font-family: var(--mono); font-stretch: 92%; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.feature + .feature { margin-top: clamp(72px, 9vw, 140px); }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; } }
.related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; }
.related a { display: grid; gap: 8px; height: 100%; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: rgba(10, 20, 32, .6); text-decoration: none; color: inherit; transition: border-color .35s, background .35s, transform .45s var(--ease); }
.related a:hover { border-color: rgba(143, 211, 255, .45); background: rgba(14, 28, 44, .8); transform: translateY(-3px); color: inherit; }
.related b { color: var(--text); font-weight: 520; font-size: 1.05rem; }
.related span { color: var(--text-3); font-size: .9rem; }
@media (max-width: 900px) { .related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .related { grid-template-columns: 1fr; } }

/* high availability: redundancy layers + FAQ */
.frame-cap { margin-top: 14px; font-family: var(--mono); font-stretch: 92%; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); }
.layers { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.layers li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 28px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--line); transition: background .35s; }
.layers li:hover { background: linear-gradient(90deg, rgba(54, 169, 255, .06), transparent 60%); }
.layer-tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-stretch: 92%; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--signal-2); }
.layer-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 12px 2px rgba(54, 169, 255, .55); }
.layers h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem); font-weight: 420; font-stretch: 108%; margin-bottom: 8px; }
.layers p { color: var(--text-3); max-width: 64ch; }
@media (max-width: 700px) { .layers li { grid-template-columns: 1fr; gap: 10px; } }
.faq-split { align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; color: var(--text); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 460; font-stretch: 104%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; background: linear-gradient(var(--signal-2), var(--signal-2)) center / 12px 1.5px no-repeat, linear-gradient(var(--signal-2), var(--signal-2)) center / 1.5px 12px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ice); }
.faq details p { padding: 0 40px 26px 0; color: var(--text-2); max-width: 62ch; }

/* cameras: AI search demo */
/* phones: the whole 32-character query must fit the bar (it types out to exactly 32ch), so tighten the padding and
   let the type shrink with the screen, never below 11 px */
  background: radial-gradient(30% 40% at 30% 30%, rgba(207, 238, 255, .25), transparent 70%), linear-gradient(180deg, #06111d 0 48%, #0b2135 48% 100%); }
.r-meta { display: grid; gap: 2px; font-family: var(--mono); font-stretch: 92%; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.r-meta b { color: var(--text); font-weight: 500; letter-spacing: .14em; }
.stage-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.stage-head .stack { gap: 24px; }
.stage { position: relative; }
.stage::before { content: ""; position: absolute; inset: 8% 4% -6%; z-index: -1; border-radius: 40px; background: radial-gradient(50% 50% at 50% 50%, rgba(30, 128, 232, .35), transparent 70%); filter: blur(30px); }
.stage-screen { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; border-radius: clamp(14px, 2vw, 28px); border: 1px solid var(--line-2); background: #02060b; box-shadow: 0 70px 160px -60px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05); }
.stage-screen .art { width: 100%; height: 100%; }
@media (max-width: 760px) { .stage-screen.square { aspect-ratio: 1; } } /* phones: crop to the scene's centre instead of shrinking it */
.stage-screen::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 4px); }
.stage-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, .55) 100%); }
.cam-rain { position: absolute; left: 0; right: 0; top: -220px; bottom: 0; z-index: 1; pointer-events: none; background: url("/assets/img/rain.svg") 0 0 / 220px 220px; opacity: .45; animation: rain .6s linear infinite; }
.cam-sweep { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent, rgba(143, 211, 255, .14) 70%, rgba(190, 230, 255, .55) 96%, transparent); animation: cf-sweep 16s ease-in-out infinite; }
.stage figcaption { margin-top: 14px; font-family: var(--mono); font-stretch: 92%; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-4); }
.stage-specs { margin-top: 26px; }
@media (max-width: 900px) { .stage-head { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- company */
.quote { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 88px); border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(70% 90% at 0% 0%, rgba(36, 112, 196, .2), transparent 60%), linear-gradient(180deg, rgba(12, 24, 38, .7), rgba(4, 9, 15, .9)); }
.quote::before { content: "\201C"; position: absolute; top: -.18em; right: .12em; font-weight: 200; font-stretch: 120%; font-size: clamp(10rem, 22vw, 20rem); line-height: 1; color: rgba(143, 211, 255, .07); }
.quote blockquote { position: relative; font-weight: 280; font-stretch: 106%; font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem); line-height: 1.3; letter-spacing: -.012em; color: var(--text); max-width: 34ch; }
.quote figcaption { position: relative; margin-top: 34px; display: grid; gap: 4px; font-family: var(--mono); font-stretch: 92%; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.8; color: var(--text-3); }
.quote figcaption b { color: var(--text-2); font-weight: 500; }
/* home: a smaller quote beside the Disciplines heading */
.services-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(44px, 5.5vw, 80px); }
.services-head .section-head { margin-bottom: 0; }
.quote.compact { padding: clamp(26px, 3vw, 44px); border-radius: 24px; }
.quote.compact::before { font-size: clamp(7rem, 12vw, 11rem); }
.quote.compact blockquote { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); line-height: 1.45; max-width: none; }
.quote.compact figcaption { margin-top: 22px; }
@media (max-width: 980px) { .services-head { grid-template-columns: 1fr; } }
/* the statement and the Disciplines section read as one movement, so close the gap between them */
.manifesto + .section { padding-top: clamp(16px, 2vw, 32px); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; }
.tiles li { display: grid; gap: 12px; align-content: start; padding: 30px 26px 32px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(14, 28, 44, .55), rgba(5, 10, 17, .85)); }
.tiles h3 { font-size: 1.15rem; font-weight: 500; }
.tiles p { color: var(--text-3); font-size: .95rem; }
@media (max-width: 980px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; list-style: none; padding: 0; background: var(--line); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.contact-grid li { display: grid; gap: 10px; align-content: start; padding: 34px 30px 36px; background: var(--ink-1); }
.contact-grid .label { font-family: var(--mono); font-stretch: 92%; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); }
.contact-grid .value { font-weight: 280; font-stretch: 112%; font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em; color: var(--text); overflow-wrap: anywhere; }
.contact-grid .value a { color: inherit; text-decoration: none; }
.contact-grid .value a:hover { color: var(--signal-2); }
.contact-grid small { color: var(--text-3); font-size: .9rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; padding: 0; counter-reset: next; }
.next li { display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line-2); counter-increment: next; }
.next li::before { content: "0" counter(next); font-family: var(--mono); font-stretch: 92%; font-size: .68rem; letter-spacing: .24em; color: var(--signal-2); }
.next h3 { font-size: 1.15rem; font-weight: 500; }
.next p { color: var(--text-3); font-size: .95rem; }
@media (max-width: 800px) { .next { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- 404 */
.lost { display: grid; justify-items: start; gap: 26px; }
.lost .signal { width: 120px; height: 120px; fill: var(--brand); }
.lost .signal path { animation: lost 3s ease-in-out infinite; }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink-0), #02040a); padding-bottom: env(safe-area-inset-bottom, 0px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 72px 56px; }
.foot-brand { display: grid; gap: 22px; align-content: start; max-width: 360px; }
.foot-brand .logo { width: 190px; height: auto; }
.foot-brand p { color: var(--text-3); font-size: .95rem; }
.foot-col h2 { margin-bottom: 18px; font-family: var(--mono); font-stretch: 92%; font-size: .64rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--text-4); }
.foot-col ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--text-2); text-decoration: none; font-size: .95rem; }
.foot-col a:hover { color: var(--text); }
.foot-col address { display: grid; gap: 8px; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 22px 32px; border-top: 1px solid var(--line); font-family: var(--mono); font-stretch: 92%; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }

/* ================================================================ illustrations */
.art { display: block; width: 100%; height: auto; overflow: visible; }
/* Off screen, an illustration's animations still cost main-thread time every frame. Each frame that holds one is a
   view timeline (on the frame, not the svg: stages and cards clip, which would make the svg its own scroller). Two
   animations on that timeline set --gate to 0 only while the frame is more than a quarter-screen above or below the
   viewport, and then the svg's children are display:none (the svg keeps its box, so layout never moves). It can
   only ever switch art off: without scroll-driven animations, or if the timeline can't resolve, --gate keeps its
   initial 1 and the illustration runs as normal. */
@property --gate { syntax: "<integer>"; inherits: false; initial-value: 1; }
@keyframes art-off { from, to { --gate: 0; } }
@supports (animation-timeline: view()) {
  .stage-screen, .card, .art-frame, .wide-frame, .hero-art, .search-frame { view-timeline: --art block; }
  :is(.stage-screen, .card, .art-frame, .wide-frame, .hero-art, .search-frame) .art { animation: art-off linear, art-off linear; animation-timeline: --art, --art; animation-range: cover -10000% cover -25%, cover 125% cover 10000%; }
}
@container style(--gate: 0) { .art > * { display: none; } }
.art text { font-family: var(--mono); font-stretch: 92%; }
.pkt-glow { fill: var(--signal); opacity: .28; }
.pkt-core { fill: var(--ice); }
.pkt.rev .pkt-core { fill: var(--signal-2); }

/* shared tags: every bubble in the art is a measured pill (tools/gen-art.mjs pill()) */
.art .pill text { font-weight: 600; letter-spacing: .12em; fill: #021120; }
.art .pill rect { fill: var(--signal); }
.art .pill circle { fill: #021120; }
.art .pill.ok rect { fill: var(--ok); } .art .pill.ok text, .art .pill.ok circle { fill: #02170e; }
.art .pill.warn rect { fill: var(--amber); } .art .pill.warn text, .art .pill.warn circle { fill: #1d1100; }
.art .pill.danger rect { fill: var(--danger); } .art .pill.danger text, .art .pill.danger circle { fill: #1a0503; }
.art .pill.ghost rect { fill: rgba(3, 9, 16, .88); stroke: rgba(143, 211, 255, .42); stroke-width: 1; }
.art .pill.ghost text { fill: var(--signal-2); font-weight: 500; } .art .pill.ghost circle { fill: var(--signal-2); }
.art .pill.ghost.ok rect { stroke: rgba(61, 220, 151, .55); } .art .pill.ghost.ok text, .art .pill.ghost.ok circle { fill: var(--ok); }

/* estate */
.estate .grid { fill: none; stroke: rgba(120, 175, 235, .08); stroke-width: 1; }
.estate .plot { fill: rgba(40, 110, 190, .035); stroke: rgba(130, 190, 250, .34); stroke-width: 1.1; stroke-dasharray: 6 7; }
.estate .drive { fill: none; stroke: rgba(120, 170, 230, .075); stroke-width: 26; stroke-linecap: round; }
.estate .drive-line { fill: none; stroke: rgba(150, 200, 250, .22); stroke-width: 1; stroke-dasharray: 4 9; }
.estate .terrace { fill: rgba(120, 170, 230, .055); stroke: rgba(140, 190, 240, .18); stroke-width: 1; }
.estate .pool { fill: url(#est-water); stroke: rgba(170, 222, 255, .7); stroke-width: 1.2; }
.estate .shimmer { fill: none; stroke: rgba(225, 246, 255, .6); stroke-width: 1.1; stroke-linecap: round; stroke-dasharray: 8 46; animation: shimmer 5s linear infinite; }
.estate .cov { fill: url(#est-cov); mix-blend-mode: screen; transform-box: fill-box; transform-origin: center; opacity: 0; animation: fade 1.6s ease 1.9s forwards, breathe 7s ease-in-out 3.5s infinite; }
.estate .cov.c2 { animation-delay: 2.1s, 2.2s; } .estate .cov.c3 { animation-delay: 2.3s, 4.6s; } .estate .cov.c4 { animation-delay: 2.5s, 5.8s; }
.estate .shadows ellipse { fill: rgba(0, 0, 0, .38); }
.estate .trench { fill: none; stroke: rgba(130, 195, 255, .42); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.65, 0, .35, 1) 1.5s forwards; }
.estate .fiber { fill: none; stroke: rgba(91, 184, 255, .55); stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(54, 169, 255, .9)); opacity: 0; animation: fade 1s ease 2.4s forwards; }
.estate .face.top { fill: #0d2137; } .estate .face.south { fill: #091a2c; } .estate .face.east { fill: #06111e; }
.estate .glass { fill: rgba(110, 192, 255, .14); }
.estate .lit { fill: rgba(200, 232, 255, .48); filter: drop-shadow(0 0 3px rgba(143, 211, 255, .7)); }
.estate .mullion { fill: none; stroke: rgba(150, 205, 255, .28); stroke-width: .8; }
.estate .parapet { fill: none; stroke: rgba(140, 200, 255, .22); stroke-width: .8; }
.estate .edge { fill: none; stroke: #6cc3ff; stroke-width: 1.3; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.7s cubic-bezier(.65, 0, .35, 1) forwards; }
.estate .bldg .face, .estate .bldg .glass, .estate .bldg .mullion, .estate .bldg .parapet { opacity: 0; animation: fade 1.1s ease forwards; }
.estate .d1 .edge { animation-delay: .15s; } .estate .d1 .face, .estate .d1 .glass, .estate .d1 .mullion, .estate .d1 .parapet { animation-delay: 1.05s; }
.estate .d2 .edge { animation-delay: .4s; } .estate .d2 .face, .estate .d2 .glass, .estate .d2 .mullion, .estate .d2 .parapet { animation-delay: 1.3s; }
.estate .d3 .edge { animation-delay: .55s; } .estate .d3 .face, .estate .d3 .glass, .estate .d3 .mullion, .estate .d3 .parapet { animation-delay: 1.45s; }
.estate .d4 .edge { animation-delay: .7s; } .estate .d4 .face, .estate .d4 .glass, .estate .d4 .mullion, .estate .d4 .parapet { animation-delay: 1.6s; }
.estate .d5 .edge { animation-delay: .85s; } .estate .d5 .face, .estate .d5 .glass, .estate .d5 .mullion, .estate .d5 .parapet { animation-delay: 1.75s; }
.estate .tree { opacity: 0; animation: fade 1.4s ease 1.2s forwards; }
.estate .canopy { fill: url(#est-canopy); stroke: rgba(140, 200, 255, .26); stroke-width: .8; }
.estate .canopy.k1 { stroke: rgba(160, 215, 255, .3); }
.estate .canopy.k2 { stroke: rgba(190, 230, 255, .4); }
.estate .trunk { stroke: rgba(140, 200, 255, .26); stroke-width: 1; }
.estate .core { opacity: 0; animation: fade .8s ease 2s forwards; }
.estate .beam { stroke: url(#est-beam); stroke-width: 2; }
.estate .core-node { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(143, 211, 255, 1)); }
.estate .core-ring { fill: none; stroke: var(--signal-2); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out 2.4s infinite; }
.estate .aps { opacity: 0; animation: fade 1s ease 2.2s forwards; }
.estate .ap { fill: var(--ice); filter: drop-shadow(0 0 4px rgba(54, 169, 255, 1)); }
.estate .ap-ping { fill: none; stroke: var(--signal-2); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: ping 3.2s ease-out infinite; }
.estate .ap-ping.p2 { animation-delay: -1.1s; } .estate .ap-ping.p3 { animation-delay: -2.2s; }
.estate .pole { stroke: rgba(150, 205, 255, .45); stroke-width: 1.2; }
.estate .fiber-lbl { fill: var(--signal-2); font-size: 10.5px; letter-spacing: .24em; opacity: 0; animation: fade 1s ease 2.8s forwards; }
.estate .lbl { opacity: 0; animation: rise .9s var(--ease) forwards; }
.estate .lbl.l1 { animation-delay: 2.6s; } .estate .lbl.l2 { animation-delay: 2.75s; } .estate .lbl.l3 { animation-delay: 2.9s; } .estate .lbl.l4 { animation-delay: 3.05s; } .estate .lbl.l5 { animation-delay: 3.2s; }
.estate .leader { fill: none; stroke: rgba(150, 205, 255, .5); stroke-width: 1; stroke-dasharray: 2 3; }
.estate .tick { fill: var(--signal-2); }
.estate .lbl-sub { fill: var(--text-2); font-size: 10.5px; letter-spacing: .12em; paint-order: stroke; stroke: rgba(3, 6, 9, .85); stroke-width: 3px; }
.estate .north { opacity: 0; animation: fade 1.2s ease 1s forwards; }
.estate .north path { fill: none; stroke: var(--text-3); stroke-width: 1.2; }
.estate .north text { fill: var(--text-3); font-size: 11px; letter-spacing: .1em; }
/* callouts scale around their anchors (--lk) so they render at 10 CSS px or more; gen-art.mjs keeps them inside the
   drawing up to --lk 1.8. Too small to read on phones and in the Wireless page's half-width frame, so hidden there. */
.estate .lbl-in { transform: scale(var(--lk, 1)); }
.hero-art .estate { --lk: 1.8; }
@media (max-width: 1279px) { .hero-art .estate { --lk: 1.25; } }
@media (max-width: 1023px) { .hero-art .estate { --lk: 1.55; } }
.art-frame .estate .lbl, .art-frame .estate .fiber-lbl, .art-frame .estate .north { display: none; }
@media (max-width: 760px) { .estate .lbl, .estate .fiber-lbl, .estate .north { display: none; } }

/* rack */
.rack .rack-bg { fill: #04090f; stroke: var(--line); }
.rack .rail { fill: #0b1520; stroke: rgba(150, 196, 240, .14); }
.rack .hole { fill: #010307; }
.rack .panel { fill: #0c1723; stroke: rgba(150, 196, 240, .17); stroke-width: 1; }
.rack .gloss { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.rack .screw { fill: #18242f; stroke: rgba(255, 255, 255, .14); }
.rack .label { fill: rgba(226, 236, 246, .78); }
.rack .jack, .rack .port { fill: #02060b; stroke: rgba(150, 196, 240, .22); stroke-width: .8; }
.rack .brush { fill: url(#rk-brush); stroke: rgba(150, 196, 240, .12); }
.rack .bristle { stroke: rgba(150, 196, 240, .2); stroke-width: .8; }
.rack .led.g { fill: var(--ok); } .rack .led.a { fill: var(--amber); } .rack .led.off { fill: #142231; }
.rack .led.r1 { animation: act 1.9s steps(1) infinite; } .rack .led.r2 { animation: act 2.6s steps(1) -.7s infinite; } .rack .led.r3 { animation: act 1.3s steps(1) -.3s infinite; }
.rack .led.r4 { animation: act 3.4s steps(1) -1.9s infinite; } .rack .led.r5 { animation: act 0.9s steps(1) -.2s infinite; } .rack .led.r6 { animation: act 2.2s steps(1) -1.1s infinite; }
.rack .sfp { fill: #040a11; stroke: rgba(150, 196, 240, .28); }
.rack .fiber-tip { fill: var(--signal); filter: drop-shadow(0 0 4px rgba(54, 169, 255, 1)); animation: glow 2.6s ease-in-out infinite; }
.rack .fiber-tip.f2 { animation-delay: -.8s; } .rack .fiber-tip.f3 { animation-delay: -1.6s; } .rack .fiber-tip.f4 { animation-delay: -2.1s; }
.rack .cables-under path { fill: none; stroke: #000; stroke-width: 6.5; stroke-linecap: round; opacity: .55; }
.rack .cable { fill: none; stroke-width: 3.4; stroke-linecap: round; }
.rack .cable.c1 { stroke: #2f74b0; } .rack .cable.c2 { stroke: #c9d7e4; } .rack .cable.c3 { stroke: #1d3d5e; }
.rack .mark { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; }
.rack .poe { fill: rgba(54, 169, 255, .1); stroke: rgba(54, 169, 255, .42); }
.rack .tag { fill: var(--signal-2); font-size: 12.5px; letter-spacing: .12em; }
.rack .tag.dim { fill: var(--text-3); }
.rack .screen { fill: #03101c; stroke: rgba(54, 169, 255, .36); }
.rack .lcd { fill: var(--signal-2); font-size: 12.5px; letter-spacing: .04em; }
.rack .lcd.dim { fill: rgba(143, 211, 255, .62); }
.rack .shieldmark { fill: rgba(54, 169, 255, .1); stroke: var(--signal); stroke-width: 1.6; }
.rack .cell { fill: var(--ok); opacity: .85; }
.rack .cell.b5 { animation: charge 2.4s ease-in-out infinite; }
.rack .vent { fill: #02060b; }
.rack .display { fill: #020b14; stroke: rgba(54, 169, 255, .4); }
.rack .disp-text { fill: var(--signal-2); font-size: 12.5px; letter-spacing: .1em; }
.rack .bundle .cable { stroke-width: 2.4; }
.rack .fiber-cable { fill: none; stroke: #2ec4c9; stroke-width: 2.6; stroke-linecap: round; opacity: .85; }
.rack .fiber-pulse .pkt-glow { fill: #6ff3f7; } .rack .fiber-pulse .pkt-core { fill: #eaffff; }

/* wifi: roaming through a real floor plan */
.wifi .site { fill: #040a11; stroke: var(--line); }
.wifi .terrace { fill: rgba(140, 190, 240, .045); stroke: rgba(160, 205, 250, .28); stroke-dasharray: 5 6; }
.wifi .pool { fill: url(#wf-pool); stroke: rgba(170, 222, 255, .55); }
.wifi .heatfield { mix-blend-mode: screen; }
.wifi .heat { fill: url(#wf-heat); transform-box: fill-box; transform-origin: center; animation: breathe 9s ease-in-out infinite; }
.wifi .heat.h2 { animation-delay: -3s; } .wifi .heat.h3 { animation-delay: -6s; }
.wifi .spill { fill: url(#wf-spill); mix-blend-mode: screen; }
.wifi .iso { fill: none; stroke: rgba(207, 238, 255, .22); stroke-width: .8; stroke-dasharray: 2 4; }
.wifi .furniture { fill: none; stroke: rgba(200, 225, 250, .16); stroke-width: 1; stroke-linejoin: round; }
.wifi .walls { fill: none; stroke: rgba(226, 239, 252, .78); stroke-width: 3.2; stroke-linecap: square; }
.wifi .walls.ext { stroke: rgba(236, 245, 255, .95); stroke-width: 5.5; }
.wifi .windows { fill: none; stroke: #6cc3ff; stroke-width: 2; stroke-linecap: butt; }
.wifi .doors { fill: none; stroke: rgba(200, 225, 250, .45); stroke-width: 1; }
.wifi .room { fill: rgba(228, 240, 252, .66); font-size: 12.5px; letter-spacing: .14em; paint-order: stroke; stroke: rgba(4, 10, 17, .9); stroke-width: 3px; stroke-linejoin: round; }
.wifi .room.out { fill: rgba(228, 240, 252, .45); }
.wifi .link { stroke: var(--ice); stroke-width: 1.6; stroke-dasharray: 3 4; animation: dash 1s linear infinite; filter: drop-shadow(0 0 3px rgba(143, 211, 255, .9)); }
.wifi .trail { fill: var(--signal-2); }
.wifi .trail.t1 { opacity: .55; } .wifi .trail.t2 { opacity: .45; } .wifi .trail.t3 { opacity: .35; } .wifi .trail.t4 { opacity: .25; } .wifi .trail.t5 { opacity: .17; } .wifi .trail.t6 { opacity: .1; }
.wifi .ap-disc { fill: #eaf6ff; stroke: rgba(143, 211, 255, .6); stroke-width: 1.5; }
.wifi .ap-led { fill: var(--signal); }
.wifi .ap-ring { fill: none; stroke: var(--ice); stroke-width: 2; filter: drop-shadow(0 0 5px rgba(143, 211, 255, 1)); }
.wifi .ap-ping { fill: none; stroke: var(--ok); stroke-width: 2; }
.wifi .c-halo { fill: rgba(143, 211, 255, .2); animation: blink 2.4s ease-in-out infinite; }
.wifi .c-phone { fill: #071626; stroke: var(--ice); stroke-width: 1.6; }
.wifi .c-screen { fill: var(--signal); opacity: .85; }

/* security operations: the estate under a geodesic shield */
.secops .so-grid { fill: none; stroke: rgba(120, 175, 235, .055); }
.secops .so-lot { fill: rgba(40, 110, 190, .03); stroke: rgba(130, 190, 250, .26); stroke-dasharray: 6 7; }
.secops .so-foot { fill: url(#so-footg); }
.secops .so-radar path { fill: var(--signal-2); }
.secops .so-radar .r-edge { fill: none; stroke: rgba(207, 238, 255, .32); stroke-width: 1.1; }
.secops .so-zone { fill: none; stroke: rgba(143, 211, 255, .2); stroke-dasharray: 3 5; }
.secops .so-zone-hot { fill: rgba(255, 107, 94, .08); stroke: rgba(255, 107, 94, .6); stroke-dasharray: 3 5; }
.secops .drive { fill: none; stroke: rgba(120, 170, 230, .07); stroke-width: 24; stroke-linecap: round; }
.secops .terrace { fill: rgba(120, 170, 230, .05); stroke: rgba(140, 190, 240, .16); }
.secops .pool { fill: url(#so-water); stroke: rgba(170, 222, 255, .65); stroke-width: 1.1; }
.secops .shimmer { fill: none; stroke: rgba(225, 246, 255, .55); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 8 46; animation: shimmer 5s linear infinite; }
.secops .shade ellipse { fill: rgba(0, 0, 0, .36); }
.secops .fiber { fill: none; stroke: rgba(91, 184, 255, .5); stroke-width: 1.8; }
.secops .so-b .f-t { fill: #0d2137; } .secops .so-b .f-s { fill: #091a2c; } .secops .so-b .f-e { fill: #06111e; }
.secops .so-b .lit { fill: rgba(200, 232, 255, .44); }
.secops .so-b .mull { fill: none; stroke: rgba(150, 205, 255, .26); stroke-width: .8; }
.secops .so-b .para { fill: none; stroke: rgba(140, 200, 255, .2); stroke-width: .8; }
.secops .so-b .edge { fill: none; stroke: #6cc3ff; stroke-width: 1.2; stroke-linejoin: round; }
.secops .so-tree ellipse { fill: url(#so-canopy); stroke: rgba(140, 200, 255, .24); stroke-width: .8; }
.secops .so-tree .k2 { stroke: rgba(190, 230, 255, .36); }
.secops .so-tree .trunk { stroke: rgba(140, 200, 255, .24); }
.secops .so-core .beam { stroke: url(#so-beam); stroke-width: 2; }
.secops .so-core .core-node { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(143, 211, 255, 1)); }
.secops .so-core .core-ring { fill: none; stroke: var(--signal-2); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; }
.secops .so-dev path { fill: #08182a; stroke: var(--ice); stroke-width: 1.3; stroke-linejoin: round; }
.secops .so-dev .scr { fill: rgba(143, 211, 255, .38); stroke: none; }
.secops .so-dev .pole { fill: none; stroke: rgba(150, 205, 255, .5); stroke-width: 1.2; }
.secops .tv-hot { fill: var(--danger); } .secops .tv-q { fill: var(--amber); }
.secops .so-target { fill: rgba(255, 107, 94, .08); stroke: var(--danger); stroke-width: 1.4; stroke-dasharray: 4 4; animation: dash 1s linear infinite; }
/* the shield */
.secops .cell-back { fill: none; stroke: #8fd3ff; stroke-width: .7; }
.secops .so-back-rim { fill: none; stroke: rgba(143, 211, 255, .2); stroke-dasharray: 4 6; }
.secops .so-glass { fill: url(#so-glassg); }
.secops .cell { fill: #8fd3ff; stroke: #cdeeff; stroke-width: .8; stroke-linejoin: round; }
.secops .so-spec { fill: url(#so-specg); }
.secops .so-scan .r-front { fill: none; stroke: rgba(223, 243, 255, .7); stroke-width: 1.5; }
.secops .so-scan .r-back { fill: none; stroke: rgba(143, 211, 255, .28); stroke-width: 1.1; }
.secops .so-flare .r-front { fill: none; stroke: #f4fbff; stroke-width: 2.6; }
.secops .so-flare .r-back { fill: none; stroke: rgba(207, 238, 255, .5); stroke-width: 1.6; }
.secops .so-rim-glow { fill: none; stroke: rgba(54, 169, 255, .16); stroke-width: 9; }
.secops .so-rim { fill: none; stroke: var(--signal-2); stroke-width: 1.8; animation: rimglow 5s ease-in-out infinite; }
.secops .so-wave path { fill: none; stroke: #cdeeff; }
.secops .so-wave .w-wide { stroke-width: 90; stroke-opacity: .16; } .secops .so-wave .w-core { stroke-width: 34; stroke-opacity: .42; }
.secops .so-wave.calm .w-wide { stroke-opacity: .07; } .secops .so-wave.calm .w-core { stroke-opacity: .2; }
.secops .so-hit .h-glow { fill: url(#so-hotg); }
.secops .so-hit .h-ring { fill: none; stroke: #ffd2cc; stroke-width: 5; }
.secops .so-hit.pass .h-glow { fill: url(#so-passg); }
.secops .so-hit.pass .h-ring { stroke: #ffe3b0; }
.secops .so-burst .b-core { fill: #fff3f0; }
.secops .so-burst .b-rays { fill: none; stroke: #ffb4aa; stroke-width: 1.6; stroke-linecap: round; }
/* attacks */
.secops .c-tail { fill: none; stroke: rgba(255, 107, 94, .3); stroke-width: 5; stroke-linecap: round; }
.secops .c-core { fill: none; stroke: #ff9c90; stroke-width: 2.2; stroke-linecap: round; }
.secops .so-comet.fast .c-tail { stroke-width: 3.4; } .secops .so-comet.fast .c-core { stroke-width: 1.6; }
.secops .c-glow { fill: url(#so-cglow); } .secops .c-head { fill: #fff1ee; }
.secops .so-ret path { fill: none; stroke: var(--danger); stroke-width: 1.6; }
.secops .so-host circle, .secops .so-host ellipse, .secops .so-host path { fill: none; stroke: rgba(255, 140, 128, .8); stroke-width: 1.4; }
.secops .h-ping { fill: none; stroke: var(--danger); stroke-width: 1.5; }
.secops .k-bow { fill: none; stroke: var(--amber); stroke-width: 2.6; filter: drop-shadow(0 0 6px rgba(255, 181, 71, .9)); }
.secops .k-shaft { fill: none; stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; }
.secops .so-frag { stroke: var(--amber); stroke-width: 2.6; stroke-linecap: round; }
.secops .so-push { fill: none; stroke: var(--signal-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.secops .so-pulse circle { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(143, 211, 255, 1)); }
.secops .m-body { fill: #050d17; stroke: rgba(143, 211, 255, .55); stroke-width: 1.6; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .6)); }
.secops .m-notch { fill: #11263b; }
.secops .m-kicker { fill: var(--signal-2); font-size: 11.5px; letter-spacing: .22em; }
.secops .m-title { fill: var(--text); font-family: var(--display); font-stretch: 106%; font-size: 15px; font-weight: 500; }
.secops .m-meta { fill: var(--text-3); font-size: 11px; letter-spacing: .06em; }
.secops .m-tap { fill: none; stroke: var(--danger); stroke-width: 2; }
.secops .so-wall { fill: url(#so-wallg); stroke: var(--signal-2); stroke-width: 1.3; stroke-linejoin: round; }
.secops .so-wall-hot { fill: rgba(255, 107, 94, .45); stroke: var(--danger); stroke-width: 1.8; }
.secops .so-lat { fill: none; stroke: var(--danger); stroke-width: 2.2; stroke-linecap: round; }
.secops .so-x { stroke: var(--danger); stroke-width: 3.2; stroke-linecap: round; }
/* HUD */
.secops .so-title { fill: var(--text); font-size: 15px; letter-spacing: .2em; }
.secops .panel { fill: rgba(3, 9, 16, .86); stroke: rgba(143, 211, 255, .36); stroke-width: 1.4; }
.secops .l-live { fill: var(--danger); animation: blink 1.4s ease-in-out infinite; }
.secops .l-head { fill: var(--text); font-size: 11.5px; letter-spacing: .18em; }
.secops .l-div { fill: none; stroke: rgba(143, 211, 255, .16); }
.secops .e-empty { fill: var(--text-3); font-family: var(--display); font-size: 13.5px; }
.secops .e-time { fill: var(--text-3); font-size: 11.5px; letter-spacing: .1em; }
.secops .e-flash { fill: rgba(61, 220, 151, .1); }
.secops .e-txt { fill: var(--text); font-family: var(--display); font-stretch: 104%; font-size: 13.5px; }
.secops .e-sub { fill: var(--text-3); font-family: var(--display); font-size: 12.5px; }
.secops .e-arrow { fill: none; stroke: var(--text-3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.secops .f-lbl { fill: var(--text-3); font-size: 11px; letter-spacing: .12em; }
.secops .f-num { fill: var(--ice); }
.secops .ly-head { fill: var(--text-3); font-size: 11px; letter-spacing: .24em; }
.secops .cap-t { fill: var(--text); font-family: var(--display); font-weight: 440; font-stretch: 104%; font-size: 24px; paint-order: stroke; stroke: rgba(2, 6, 11, .85); stroke-width: 6px; stroke-linejoin: round; }
.secops .so-cap, .secops .so-cap-still, .secops .so-roll-still { display: none; }
/* home-page card: just the estate, the shield and the attacks */
.card .secops { transform: scale(1.3); transform-origin: 50% 70%; } /* the HUD is hidden here, so frame the shield */
.card .secops .so-log, .card .secops .so-mfa, .card .secops .so-push, .card .secops .so-pulse, .card .secops .so-title, .card .secops .so-ai, .card .secops .so-st,
.card .secops .so-layers, .card .secops .so-host, .card .secops .pill, .card .secops .so-count, .card .secops .so-cap, .card .secops .so-cap-still { display: none; }
/* Below 1280 px the HUD's labels would render under 10 px, so one large caption on the same clock tells the story
   (gen-art.mjs checks each line fits the square phone crop at the largest scale here, 1.35). */
@media (max-width: 1279px) {
  .secops .so-log, .secops .so-layers, .secops .so-title, .secops .so-ai, .secops .so-st, .secops .so-mfa, .secops .so-push, .secops .so-pulse,
  .secops .so-sum, .secops .so-tag, .secops .so-count, .secops .so-kp, .secops .so-hostp, .secops .so-ret .pill { display: none; }
  .secops .so-cap { display: inline; }
  .secops .so-cap, .secops .so-cap-still { transform-origin: 640px 40px; transform: scale(1.15); }
}
@media (max-width: 760px) { .secops .so-cap, .secops .so-cap-still { transform: scale(1.05); } }
@media (max-width: 480px) { .secops .so-cap, .secops .so-cap-still { transform: scale(1.35); } }
@media (max-width: 389px) { .secops .so-cap, .secops .so-cap-still { transform: scale(1.45); } }
@media (max-width: 359px) { .secops .so-cap, .secops .so-cap-still { transform: scale(1.65); } }

/* monitoring board: incident story */
.telemetry .board { fill: rgba(5, 12, 21, .94); stroke: var(--line-2); }
.telemetry .live-dot { fill: var(--ok); filter: drop-shadow(0 0 4px rgba(61, 220, 151, .9)); animation: blink 2s ease-in-out infinite; }
.telemetry .hdr { fill: var(--text-2); font-size: 12.5px; letter-spacing: .14em; }
.telemetry .bar { fill: var(--ok); opacity: .7; transform-box: fill-box; transform-origin: 50% 100%; animation: eq 1.3s ease-in-out infinite alternate; }
.telemetry .bar.b2 { animation-delay: -.3s; } .telemetry .bar.b3 { animation-delay: -.7s; } .telemetry .bar.b4 { animation-delay: -1s; } .telemetry .bar.b5 { animation-delay: -.5s; }
.telemetry .hr, .telemetry .gridline, .telemetry .r-rule { fill: none; stroke: var(--line); stroke-width: 1; }
.telemetry .threshold { fill: none; stroke: rgba(255, 181, 71, .45); stroke-width: 1; stroke-dasharray: 4 5; }
.telemetry .chart-lbl { fill: var(--text-3); font-size: 12.5px; letter-spacing: .16em; }
.telemetry .chart-val { fill: var(--text); font-size: 12.5px; letter-spacing: .1em; }
.telemetry .series { animation: scroll-x 16s linear infinite; }
.telemetry .line { fill: none; stroke: var(--signal-2); stroke-width: 2; filter: drop-shadow(0 0 4px rgba(54, 169, 255, .8)); }
.telemetry .area { fill: url(#tm-area); }
.telemetry .ok-dot { fill: var(--ok); } .telemetry .warn-dot { fill: var(--amber); filter: drop-shadow(0 0 4px rgba(255, 181, 71, .9)); }
.telemetry .r-alert { fill: rgba(255, 181, 71, .1); stroke: rgba(255, 181, 71, .45); }
.telemetry .r-name { fill: var(--text); font-family: var(--display); font-stretch: 104%; font-size: 13px; }
.telemetry .r-detail { fill: var(--text-3); font-size: 12.5px; letter-spacing: .08em; }
.telemetry .r-val { fill: var(--text-2); font-size: 12.5px; letter-spacing: .06em; }
.telemetry .cap-t { fill: var(--text); font-family: var(--display); font-weight: 440; font-stretch: 104%; font-size: 24px; }
.telemetry .tm-cap { display: none; }
/* Below 590 px the board's small print would render under 10 CSS px. The rows keep their names, enlarged, and one
   sentence on the same clock tells the story where the chart's label was; the rack and floor plan drop their text. */
@media (max-width: 589px) {
  .art-frame .telemetry .hdr, .art-frame .telemetry .bars, .art-frame .telemetry .chart-lbl, .art-frame .telemetry .chart-val,
  .art-frame .telemetry .r-detail, .art-frame .telemetry .r-val, .art-frame .telemetry .fd, .art-frame .telemetry .fd-idle { display: none; }
  .art-frame .telemetry .tm-cap { display: inline; }
  .art-frame .telemetry .r-name { font-size: 22px; }
  .art-frame .telemetry .st { transform-origin: 600px 47px; transform: scale(1.6); }
  .art-frame .rack text, .art-frame .wifi text, .art-frame .wifi .pill { display: none; }
}
@media (max-width: 389px) { .art-frame .telemetry .st { transform: scale(1.7); } }
@media (max-width: 359px) { .art-frame .telemetry .st { transform: scale(2); } .art-frame .telemetry .cap-t { font-size: 26px; } .art-frame .telemetry .r-name { font-size: 25px; } }
.telemetry .r-detail.warn, .telemetry .r-val.warn { fill: var(--amber); }

/* high-availability failover diagram */
.ha .links path { fill: none; stroke: rgba(150, 205, 255, .7); stroke-width: 1.6; }
.ha .links.a path { stroke: var(--signal-2); filter: drop-shadow(0 0 4px rgba(54, 169, 255, .7)); }
.ha .cut-line { fill: none; stroke: var(--danger); stroke-width: 2.2; stroke-dasharray: 6 6; }
.ha .cut-x { fill: none; stroke: var(--danger); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 107, 94, .9)); }
.ha .cut-lbl { fill: var(--danger); font-size: 14px; letter-spacing: .16em; }
.ha .sync { fill: none; stroke: rgba(143, 211, 255, .45); stroke-width: 1.4; stroke-dasharray: 3 5; }
.ha .beat circle { fill: var(--ok); filter: drop-shadow(0 0 4px rgba(61, 220, 151, .9)); }
.ha .stack { fill: none; stroke: rgba(143, 211, 255, .6); stroke-width: 2; }
.ha .tag { fill: var(--text-3); font-size: 14px; letter-spacing: .12em; }
.ha .node { fill: rgba(9, 24, 41, .96); stroke: rgba(143, 211, 255, .55); stroke-width: 1.4; }
.ha .node.fw { stroke: var(--signal-2); filter: drop-shadow(0 0 14px rgba(54, 169, 255, .35)); }
.ha .n-name { fill: var(--text); font-size: 14px; letter-spacing: .16em; }
.ha .n-sub { fill: var(--text-3); font-size: 14px; letter-spacing: .1em; }
.ha .role { fill: var(--text-3); font-size: 14px; letter-spacing: .16em; }
.ha .role.on { fill: var(--ok); }
.ha .isp circle, .ha .isp ellipse, .ha .isp path { fill: none; stroke: var(--text-2); stroke-width: 1.4; }

/* camera feed: a 12 s story, every element on the same clock */
.camfeed { --cf: 16s; } /* the story clock; gen-art.mjs times the log and captions to the same 16 s */
.camfeed .moon { fill: #e8f5ff; filter: drop-shadow(0 0 10px rgba(191, 227, 255, .9)); }
.camfeed .star { fill: #dff3ff; animation: twinkle 3.4s ease-in-out infinite; }
.camfeed .star.s2 { animation-delay: -1.1s; } .camfeed .star.s3 { animation-delay: -2.3s; }
.camfeed .hills { fill: #071628; }
.camfeed .trees circle { fill: #04101c; }
.camfeed .pole { fill: none; stroke: rgba(150, 205, 255, .45); stroke-width: 3; }
.camfeed .lamp, .camfeed .lantern rect, .camfeed .sconce rect { fill: #f1faff; filter: drop-shadow(0 0 6px rgba(223, 243, 255, 1)); }
.camfeed .lantern circle { animation: flicker 6s ease-in-out infinite; }
.camfeed .curb { stroke: rgba(150, 205, 255, .25); stroke-width: 1.5; }
.camfeed .passby { opacity: 0; animation: cf-passby var(--cf) linear infinite; }
.camfeed .joints { fill: none; stroke: rgba(150, 205, 255, .07); stroke-width: 1; }
.camfeed .coping { stroke: rgba(170, 220, 255, .35); stroke-width: 6; }
/* the gate's swing: 25 perspective frames in a strip, stepped on the feed's clock (gen-art.mjs checks these numbers).
   Plain class names, because the frames are <use> copies and Chrome won't match a .camfeed ancestor inside one. */
.camfeed .gate-strip { animation: cf-gate-swing var(--cf) steps(24) infinite; }
.gf-bars { fill: none; stroke: rgba(180, 225, 255, .62); stroke-width: 2.2; }
.gf-rail { fill: none; stroke: rgba(190, 230, 255, .75); stroke-width: 3; stroke-linejoin: round; }
.gf-fin { fill: rgba(200, 235, 255, .8); }
.camfeed .pillar { fill: #0d2236; stroke: rgba(170, 220, 255, .45); stroke-width: 1.4; }
.camfeed .cap { stroke: rgba(190, 230, 255, .6); stroke-width: 6; }
.camfeed .pavers { fill: none; stroke: rgba(150, 205, 255, .13); stroke-width: 1.2; }
.camfeed .pavers.scan { stroke: var(--signal-2); stroke-width: 1.6; opacity: 0; filter: drop-shadow(0 0 4px rgba(54, 169, 255, .9)); animation: cf-gridscan var(--cf) ease-out infinite; }
.camfeed .refl { opacity: .8; }
.camfeed .hedge { fill: #061a2c; stroke: rgba(150, 205, 255, .22); stroke-width: 1.2; }
.camfeed .t-pot { fill: #0c2033; stroke: rgba(150, 205, 255, .35); }
.camfeed .t-shadow { fill: rgba(0, 0, 0, .45); }
.camfeed .topiary circle { stroke: rgba(170, 220, 255, .35); stroke-width: 1.2; }
/* the SUV (shared by both depth layers) */
.camfeed .c-shadow { fill: rgba(0, 0, 0, .55); }
.camfeed .c-wheel { fill: #01040a; }
.camfeed .c-cabin { fill: #0b1d2f; stroke: rgba(190, 228, 255, .45); stroke-width: 1.4; }
.camfeed .c-glass { fill: url(#cf-glass); }
.camfeed .c-glint { fill: rgba(255, 255, 255, .14); }
.camfeed .c-rail { stroke: rgba(190, 228, 255, .6); stroke-width: 3; stroke-linecap: round; }
.camfeed .c-mirror { fill: #0e2338; stroke: rgba(190, 228, 255, .4); }
.camfeed .c-body { fill: url(#cf-body); stroke: rgba(200, 235, 255, .6); stroke-width: 1.6; }
.camfeed .c-crease { stroke: rgba(200, 235, 255, .18); }
.camfeed .c-grille { fill: #050f1a; stroke: rgba(190, 228, 255, .4); }
.camfeed .c-slats { stroke: rgba(190, 228, 255, .3); }
.camfeed .c-plate { fill: #dfe9f3; }
.camfeed .c-led { stroke: #ffffff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 18px rgba(143, 211, 255, .9)); }
.camfeed .c-drl { stroke: #dff3ff; stroke-width: 2.4; stroke-linecap: round; opacity: .85; }
.camfeed .c-intake { stroke: rgba(190, 228, 255, .3); stroke-width: 6; stroke-linecap: round; }
.camfeed .beam { fill: url(#cf-beam); opacity: .5; }
.camfeed .car-out, .camfeed .car-in, .camfeed .walker { transform-box: view-box; transform-origin: 0 0; }
.camfeed .car-out { opacity: 0; animation: cf-out var(--cf) infinite; }
.camfeed .car-in { opacity: 0; animation: cf-in var(--cf) infinite; }
.camfeed .flare { opacity: 0; mix-blend-mode: screen; animation: cf-flare var(--cf) ease-in-out infinite; }
/* detection overlays */
.camfeed .lock { opacity: 0; transform-box: fill-box; transform-origin: center; }
.camfeed .lock.out { animation: cf-lock var(--cf) cubic-bezier(.2, .8, .2, 1) infinite; }
.camfeed .lock.in { animation: cf-lock-in var(--cf) infinite; }
.camfeed .bracket { fill: none; stroke: var(--signal-2); stroke-width: 3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(54, 169, 255, .95)); }
.camfeed .roll text { font-weight: 600; letter-spacing: .12em; fill: #021120; }
.camfeed .roll.d9 { animation: cf-d9 var(--cf) cubic-bezier(.2, .8, .2, 1) infinite; }
.camfeed .roll.d7 { animation: cf-d7 var(--cf) cubic-bezier(.2, .8, .2, 1) infinite; }
.camfeed .person-lock { animation: cf-plock var(--cf) cubic-bezier(.2, .8, .2, 1) infinite; }
.camfeed .person-lock .bracket { stroke: var(--amber); filter: drop-shadow(0 0 6px rgba(255, 181, 71, .9)); }
.camfeed .walker { opacity: 0; animation: cf-walk var(--cf) linear infinite; }
.camfeed .head, .camfeed .coat { fill: #0f2c47; stroke: rgba(200, 235, 255, .75); stroke-width: 1.6; }
.camfeed .leg, .camfeed .arm { stroke: rgba(200, 235, 255, .75); stroke-width: 7; stroke-linecap: round; transform-box: view-box; }
.camfeed .leg { transform-origin: 0 -58px; } .camfeed .arm { transform-origin: 0 -104px; stroke-width: 5; }
.camfeed .l1, .camfeed .a2 { animation: cf-stride .9s ease-in-out infinite; }
.camfeed .l2, .camfeed .a1 { animation: cf-stride .9s ease-in-out -.45s infinite; }
.camfeed .trail { fill: none; stroke: var(--amber); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .6; }
.camfeed .toast { opacity: 0; animation: cf-toast var(--cf) ease infinite; }
/* plate read picture-in-picture */
.camfeed .pip, .camfeed .leader { opacity: 0; animation: cf-pip var(--cf) ease infinite; }
.camfeed .pip { transform-box: fill-box; transform-origin: 100% 0; }
.camfeed .panel { fill: rgba(3, 9, 16, .82); stroke: rgba(143, 211, 255, .4); stroke-width: 1.4; }
.camfeed .p-head { fill: var(--text); font-size: 14px; letter-spacing: .14em; } .camfeed .l-head { fill: var(--text); font-size: 14px; letter-spacing: .18em; }
.camfeed .p-zoom { fill: var(--text-3); font-size: 14px; letter-spacing: .14em; }
.camfeed .p-view { fill: #071626; stroke: rgba(143, 211, 255, .2); }
.camfeed .plate { fill: #e3ecf5; stroke: #ffffff; stroke-width: 2; filter: drop-shadow(0 0 12px rgba(223, 243, 255, .5)); }
.camfeed .pc { fill: #0a1a2a; font-size: 28px; font-weight: 700; opacity: 0; animation: cf-pc var(--cf) infinite; }
.camfeed .pc2 { animation-delay: .1s; } .camfeed .pc3 { animation-delay: .2s; } .camfeed .pc4 { animation-delay: .3s; } .camfeed .pc5 { animation-delay: .4s; } .camfeed .pc6 { animation-delay: .5s; } .camfeed .pc7 { animation-delay: .6s; }
.camfeed .p-scan { stroke: var(--signal); stroke-width: 2; opacity: 0; filter: drop-shadow(0 0 6px rgba(54, 169, 255, 1)); animation: cf-pscan var(--cf) linear infinite; }
.camfeed .p-dot { fill: var(--ok); } .camfeed .p-ok { fill: var(--ok); font-size: 14px; letter-spacing: .12em; }
.camfeed .p-dot, .camfeed .p-ok { opacity: 0; animation: cf-ok var(--cf) infinite; }
.camfeed .leader { fill: none; stroke: var(--signal-2); stroke-width: 1.5; stroke-dasharray: 4 6; }
/* AI event log */
.camfeed .l-live { fill: var(--ok); animation: blink 1.6s ease-in-out infinite; }
.camfeed .e-time { fill: var(--text-3); font-size: 14px; letter-spacing: .08em; }
.camfeed .e-txt { fill: var(--text); font-family: var(--display); font-stretch: 104%; font-size: 15px; }
.camfeed .e-dot.blue { fill: var(--signal); } .camfeed .e-dot.ok { fill: var(--ok); } .camfeed .e-dot.warn { fill: var(--amber); }
.camfeed .ev { opacity: 0; }
.camfeed .ev1 { animation: cf-ev1 var(--cf) ease infinite; } .camfeed .ev2 { animation: cf-ev2 var(--cf) ease infinite; } .camfeed .ev3 { animation: cf-ev3 var(--cf) ease infinite; }
.camfeed .ev4 { animation: cf-ev4 var(--cf) ease infinite; } .camfeed .ev5 { animation: cf-ev5 var(--cf) ease infinite; }
/* HUD */
.camfeed .corners { fill: none; stroke: rgba(223, 243, 255, .55); stroke-width: 2.4; }
.camfeed .hud { fill: var(--text); font-size: 16px; letter-spacing: .2em; }
.camfeed .hud.dim { fill: var(--text-3); font-size: 14px; }
.camfeed .roll.sec text { fill: var(--text); font-size: 16px; font-weight: 400; letter-spacing: .2em; }
.camfeed .roll.sec { animation: cf-sec var(--cf) steps(16) infinite; }
.camfeed .rec { fill: var(--danger); animation: blink 1.2s steps(1) infinite; }
.camfeed .track { stroke: rgba(150, 205, 255, .25); stroke-width: 3; stroke-linecap: round; }
.camfeed .mk { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.camfeed .mk.blue rect { fill: var(--signal-2); } .camfeed .mk.ok rect { fill: var(--ok); } .camfeed .mk.warn rect { fill: var(--amber); }
.camfeed .mk1 { animation: cf-mk1 var(--cf) ease infinite; } .camfeed .mk2 { animation: cf-mk2 var(--cf) ease infinite; } .camfeed .mk3 { animation: cf-mk3 var(--cf) ease infinite; } .camfeed .mk4 { animation: cf-mk4 var(--cf) ease infinite; }
.camfeed .playhead { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(223, 243, 255, .9)); transform-box: view-box; animation: cf-play var(--cf) linear infinite; }
/* in a home-page card the feed is cropped to the scene: no HUD, no panels */
.card .camfeed .hud, .card .camfeed .ai-pill, .card .camfeed .rec, .card .camfeed .roll.sec, .card .camfeed .track, .card .camfeed .mk, .card .camfeed .playhead,
.card .camfeed .log, .card .camfeed .pip, .card .camfeed .leader, .card .camfeed .corners { display: none; }
.card .camfeed .cf-cap { display: none; }
/* captions: below 1024 px the feed's small print would render under 10 CSS px, so one large caption on the same
   clock tells the story (acts and timings mirror the camfeed captions in gen-art.mjs) */
.camfeed .cf-cap, .camfeed .cf-cap-still, .camfeed .roll-still { display: none; }
.camfeed .cap-t { fill: var(--text); font-family: var(--display); font-weight: 440; font-stretch: 104%; font-size: 24px; paint-order: stroke; stroke: rgba(2, 6, 11, .85); stroke-width: 6px; stroke-linejoin: round; }
.camfeed .cf-cap > g { opacity: 0; }
.camfeed .cf-cap .c1 { animation: cf-c1 var(--cf) infinite; } .camfeed .cf-cap .c2 { animation: cf-c2 var(--cf) infinite; }
.camfeed .cf-cap .c3 { animation: cf-c3 var(--cf) infinite; } .camfeed .cf-cap .c4 { animation: cf-c4 var(--cf) infinite; }
@media (max-width: 1024px) {
  .camfeed .log, .camfeed .pip, .camfeed .leader, .camfeed .hud, .camfeed .rec, .camfeed .roll.sec, .camfeed .ai-pill, .camfeed .track, .camfeed .mk,
  .camfeed .playhead, .camfeed .toast, .camfeed .lock .pill { display: none; }
  .camfeed .cf-cap { display: inline; }
  .camfeed .cf-cap, .camfeed .cf-cap-still { transform-origin: 640px 40px; transform: scale(1.15); }
}
@media (max-width: 760px) {
  .camfeed .cf-cap, .camfeed .cf-cap-still { transform: scale(1.05); }
  .camfeed .walker { animation-name: cf-walk-m; } /* the square crop ends at x 1000: walk the near edge of the lawn instead */
  .camfeed .moon { display: none; } /* it would sit cut in half at the crop's edge; its glow stays */
}
@media (max-width: 480px) { .camfeed .cf-cap, .camfeed .cf-cap-still { transform: scale(1.35); } }
@media (max-width: 389px) { .camfeed .cf-cap, .camfeed .cf-cap-still { transform: scale(1.45); } }
@media (max-width: 359px) { .camfeed .cf-cap, .camfeed .cf-cap-still { transform: scale(1.65); } }

/* camera coverage plan (isometric story) */
.camplan .grid { fill: none; stroke: rgba(120, 175, 235, .07); stroke-width: 1; }
.camplan .lot { fill: rgba(40, 110, 190, .03); stroke: rgba(130, 190, 250, .32); stroke-width: 1.1; stroke-dasharray: 6 7; }
.camplan .road { fill: none; stroke: rgba(120, 170, 230, .08); stroke-width: 24; stroke-linecap: round; }
.camplan .pool { fill: rgba(63, 180, 255, .28); stroke: rgba(170, 222, 255, .6); stroke-width: 1.2; }
.camplan .bl .f-t { fill: #0e2338; stroke: rgba(130, 200, 255, .65); stroke-width: 1.1; }
.camplan .bl .f-s { fill: #0a1b2d; stroke: rgba(130, 200, 255, .4); stroke-width: 1; }
.camplan .bl .f-e { fill: #07121f; stroke: rgba(130, 200, 255, .4); stroke-width: 1; }
.camplan .fov { stroke: rgba(143, 211, 255, .35); stroke-width: 1; }
.camplan.land .fov { fill: url(#cp-fov-land); } .camplan.port .fov { fill: url(#cp-fov-port); }
.camplan .fov.lpr { stroke: rgba(255, 181, 71, .55); }
.camplan.land .fov.lpr { fill: url(#cp-lpr-land); } .camplan.port .fov.lpr { fill: url(#cp-lpr-port); }
/* no filter here: WebKit paints a filtered userSpaceOnUse gradient black */
.camplan .fov-hi { stroke: var(--ice); stroke-width: 2; }
.camplan.land .fov-hi { fill: url(#cp-hi-land); } .camplan.port .fov-hi { fill: url(#cp-hi-port); }
.camplan .fov-hi.lpr { stroke: var(--amber); }
.camplan .beam { fill: none; stroke: rgba(143, 211, 255, .3); stroke-width: 1; stroke-dasharray: 2 4; }
.camplan .mount { stroke: rgba(150, 205, 255, .45); stroke-width: 1.2; }
.camplan .halo { fill: rgba(54, 169, 255, .18); }
.camplan .lens { fill: var(--ice); filter: drop-shadow(0 0 5px rgba(143, 211, 255, 1)); }
.camplan .node.lpr .lens { fill: #ffe3b3; filter: drop-shadow(0 0 5px rgba(255, 181, 71, 1)); }
.camplan .node.added .lens { fill: #c6ffe6; filter: drop-shadow(0 0 6px rgba(61, 220, 151, 1)); }
.camplan .node.added .halo { fill: rgba(61, 220, 151, .22); }
.camplan .cid { fill: var(--text); font-size: 14px; letter-spacing: .14em; }
.camplan .ripple { fill: none; stroke: var(--ok); stroke-width: 2; }
.camplan.land .b-fill, .camplan.land .lg-blind { fill: url(#cp-hatch-land); } .camplan.port .b-fill, .camplan.port .lg-blind { fill: url(#cp-hatch-port); }
.camplan .b-edge { fill: rgba(255, 107, 94, .08); stroke: var(--danger); stroke-width: 2; stroke-dasharray: 5 4; }
.camplan .c-fill { fill: rgba(61, 220, 151, .18); stroke: var(--ok); stroke-width: 2; }
.camplan .s-glow { fill: rgba(143, 211, 255, .25); }
.camplan .s-dot { fill: var(--ice); filter: drop-shadow(0 0 6px rgba(223, 243, 255, 1)); }
.camplan .s-box { fill: none; stroke: var(--signal-2); stroke-width: 1.8; }
.camplan .s-lbl { fill: var(--text-2); font-size: 14px; letter-spacing: .14em; }
.camplan .st-head { fill: var(--signal-2); font-size: 14px; letter-spacing: .2em; }
.camplan .st-lbl { fill: var(--text-3); font-size: 14px; letter-spacing: .14em; }
.camplan .st-val { fill: var(--text); font-family: var(--display); font-weight: 250; font-stretch: 118%; font-size: 30px; letter-spacing: -.02em; }
.camplan .st-val.warn { fill: var(--danger); } .camplan .st-val.ok { fill: var(--ok); }
.camplan .r-id { fill: var(--signal-2); font-size: 14px; letter-spacing: .14em; } .camplan .r-id.lpr { fill: var(--amber); }
.camplan .row.added .r-id { fill: var(--ok); }
.camplan .r-name { fill: var(--text-2); font-family: var(--display); font-stretch: 104%; font-size: 14px; }
.camplan .still { display: none; }
.camplan .legend text { fill: var(--text-3); font-size: 14px; letter-spacing: .14em; }
.camplan .lg-lens { fill: var(--ice); } .camplan .lg-fov { fill: rgba(92, 192, 255, .55); } .camplan .lg-lpr { fill: rgba(255, 181, 71, .6); }
.camplan .lg-blind { stroke: var(--danger); }

/* segmentation lanes */
.lanes .lane { fill: none; stroke: rgba(130, 190, 250, .36); stroke-width: 1.4; }
.lanes .wall { fill: none; stroke: rgba(130, 190, 250, .16); stroke-width: 1; stroke-dasharray: 2 6; }
.lanes .trunk { fill: none; stroke: rgba(160, 215, 255, .62); stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(54, 169, 255, .7)); }
.lanes .ln-name { fill: var(--text); font-size: 14.5px; letter-spacing: .14em; }
.lanes .ln-sub { fill: var(--text-3); font-size: 14px; letter-spacing: .08em; }
.lanes .icon { fill: none; stroke: var(--signal-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lanes .fw rect { fill: rgba(9, 27, 47, .94); stroke: var(--signal-2); stroke-width: 1.6; filter: drop-shadow(0 0 16px rgba(54, 169, 255, .4)); }
.lanes .fw .shieldmark { fill: rgba(54, 169, 255, .16); stroke: var(--signal-2); stroke-width: 1.6; }
.lanes .fw text { fill: var(--text); font-size: 14px; letter-spacing: .14em; }
.lanes .globe circle, .lanes .globe ellipse, .lanes .globe path { fill: none; stroke: var(--text-2); stroke-width: 1.4; }
.lanes .x-lbl { opacity: 0; animation: x-flash 5s infinite; }
.lanes .attempt { fill: none; stroke: var(--danger); stroke-width: 2; stroke-dasharray: 34; stroke-dashoffset: 34; animation: attempt 5s ease-in infinite; }
.lanes .attempt-dot { fill: var(--danger); animation: attempt-dot 5s ease-in infinite; filter: drop-shadow(0 0 4px rgba(255, 107, 94, .9)); }
.lanes .x { fill: none; stroke: var(--danger); stroke-width: 2.6; stroke-linecap: round; opacity: 0; animation: x-flash 5s infinite; }

/* ================================================================ keyframes */
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(.94); opacity: .82; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes ping { from { transform: scale(1); opacity: .85; } to { transform: scale(4.2); opacity: 0; } }
@keyframes orbit { to { --a: 360deg; } }
@keyframes act { 0%, 100% { opacity: 1; } 9% { opacity: .25; } 14% { opacity: 1; } 41% { opacity: .2; } 47% { opacity: 1; } 72% { opacity: .3; } 76% { opacity: 1; } }
@keyframes glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes charge { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
@keyframes shimmer { to { stroke-dashoffset: -54; } }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
@keyframes scroll-x { to { transform: translateX(-560px); } }
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes attempt { 0%, 8% { stroke-dashoffset: 34; } 32% { stroke-dashoffset: 0; } 60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes attempt-dot { 0%, 8% { transform: translateY(0); opacity: 1; } 32% { transform: translateY(-34px); opacity: 1; } 40%, 100% { transform: translateY(-34px); opacity: 0; } }
@keyframes x-flash { 0%, 30% { opacity: 0; } 33%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes redact { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes horizon { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes lost { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 45% { opacity: .85; } 50% { opacity: .95; } 52% { opacity: .8; } }
@keyframes rain { to { transform: translateY(220px); } }
@keyframes cf-sweep { 0% { transform: translateY(-100%); opacity: 0; } 1% { opacity: 1; } 9% { transform: translateY(460%); opacity: 1; } 10%, 100% { transform: translateY(460%); opacity: 0; } }
@keyframes cf-gridscan { 0%, 1% { opacity: 0; } 4% { opacity: .85; } 10%, 100% { opacity: 0; } }
@keyframes cf-out {
  0%, 3% { transform: translate(640px, 334px) scale(.16); opacity: 0; animation-timing-function: cubic-bezier(.15, .6, .25, 1); }
  6% { opacity: 1; }
  28%, 60% { transform: translate(640px, 370px) scale(.9); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .9, .5); }
  62% { transform: translate(640px, 388px) scale(1.06); opacity: 1; }
  62.1%, 100% { transform: translate(640px, 388px) scale(1.06); opacity: 0; } }
@keyframes cf-in {
  0%, 61.9% { transform: translate(640px, 388px) scale(1.06); opacity: 0; }
  62% { transform: translate(640px, 388px) scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .95, .55); }
  78% { transform: translate(640px, 1020px) scale(3.9); opacity: 1; }
  78.1%, 100% { transform: translate(640px, 1020px) scale(3.9); opacity: 0; } }
@keyframes cf-flare { 0%, 18% { opacity: 0; } 28%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes cf-lock { 0%, 29% { opacity: 0; transform: scale(1.35); } 31% { opacity: 1; transform: scale(1); } 32% { opacity: .6; } 33%, 52% { opacity: 1; transform: scale(1); } 54.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cf-lock-in { 0%, 62% { opacity: 0; } 63%, 68% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes cf-d9 { 0%, 30% { transform: translateY(0); } 35%, 100% { transform: translateY(-162px); } }
@keyframes cf-d7 { 0%, 30% { transform: translateY(0); } 34%, 100% { transform: translateY(-126px); } }
@keyframes cf-gate-swing { 0%, 52% { transform: translateY(0); } 60%, 74% { transform: translateY(-4800px); } 82%, 100% { transform: translateY(0); } }
@keyframes cf-toast { 0%, 52% { opacity: 0; transform: translateY(8px); } 54%, 74% { opacity: 1; transform: none; } 77%, 100% { opacity: 0; transform: none; } }
@keyframes cf-pip { 0%, 33% { opacity: 0; transform: translateY(12px) scale(.97); } 36%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; transform: none; } }
@keyframes cf-pc { 0%, 36% { opacity: 0; } 37%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes cf-pscan { 0%, 34% { opacity: 0; transform: translateY(0); } 35% { opacity: 1; } 41% { opacity: 1; transform: translateY(58px); } 42%, 100% { opacity: 0; transform: translateY(58px); } }
@keyframes cf-ok { 0%, 41% { opacity: 0; } 43%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes cf-ev1 { 0%, 2% { opacity: 1; transform: none; } 3%, 29.5% { opacity: 0; transform: translateX(-14px); } 31.5%, 100% { opacity: 1; transform: none; } }
@keyframes cf-ev2 { 0%, 2% { opacity: 1; transform: none; } 3%, 40.5% { opacity: 0; transform: translateX(-14px); } 42.5%, 100% { opacity: 1; transform: none; } }
@keyframes cf-ev3 { 0%, 2% { opacity: 1; transform: none; } 3%, 45.5% { opacity: 0; transform: translateX(-14px); } 47.5%, 100% { opacity: 1; transform: none; } }
@keyframes cf-ev4 { 0%, 2% { opacity: 1; transform: none; } 3%, 52.5% { opacity: 0; transform: translateX(-14px); } 54.5%, 100% { opacity: 1; transform: none; } }
@keyframes cf-ev5 { 0%, 2% { opacity: 1; transform: none; } 3%, 80.5% { opacity: 0; transform: translateX(-14px); } 82.5%, 100% { opacity: 1; transform: none; } }
@keyframes cf-mk1 { 0%, 29.5% { opacity: 0; transform: scaleY(0); } 31%, 96% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cf-mk2 { 0%, 40.5% { opacity: 0; transform: scaleY(0); } 42%, 96% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cf-mk3 { 0%, 51.5% { opacity: 0; transform: scaleY(0); } 53%, 96% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cf-mk4 { 0%, 80.5% { opacity: 0; transform: scaleY(0); } 82%, 96% { opacity: 1; transform: scaleY(1); } 98%, 100% { opacity: 0; transform: scaleY(1); } }
@keyframes cf-play { from { transform: translateX(0); } to { transform: translateX(1184px); } }
@keyframes cf-sec { from { transform: translateY(0); } to { transform: translateY(-384px); } }
@keyframes cf-walk-m { 0%, 66% { transform: translate(992px, 520px) scale(.72); opacity: 0; } 68% { opacity: 1; } 98.5% { transform: translate(930px, 520px) scale(.72); opacity: 1; } 100% { transform: translate(928px, 520px) scale(.72); opacity: 0; } }
@keyframes cf-c1 { 0%, 28.5% { opacity: 1; } 29.5%, 99.4% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cf-c2 { 0%, 28.5% { opacity: 0; } 29.5%, 51.5% { opacity: 1; } 52.5%, 100% { opacity: 0; } }
@keyframes cf-c3 { 0%, 51.5% { opacity: 0; } 52.5%, 78.5% { opacity: 1; } 79.5%, 100% { opacity: 0; } }
@keyframes cf-c4 { 0%, 78.5% { opacity: 0; } 79.5%, 99.4% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cf-walk { 0%, 66% { transform: translate(1290px, 604px); opacity: 0; } 68% { opacity: 1; } 98.5% { transform: translate(1060px, 604px); opacity: 1; } 100% { transform: translate(1056px, 604px); opacity: 0; } }
@keyframes cf-stride { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes cf-plock { 0%, 78% { opacity: 0; transform: scale(1.3); } 80%, 97% { opacity: 1; transform: scale(1); } 99%, 100% { opacity: 0; transform: scale(1); } }
@keyframes cf-passby { 0%, 85% { transform: translateX(-140px); opacity: 0; } 87% { opacity: 1; } 94% { transform: translateX(330px); opacity: 1; } 95%, 100% { transform: translateX(330px); opacity: 0; } }
@keyframes rimglow { 0%, 100% { stroke-opacity: .75; } 50% { stroke-opacity: 1; } }
@keyframes live { 0%, 100% { opacity: 1; box-shadow: 0 0 10px 2px rgba(54, 169, 255, .6); } 50% { opacity: .45; box-shadow: 0 0 2px 0 rgba(54, 169, 255, .2); } }

/* ================================================================ scroll-driven motion (progressive) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progress { animation: progress linear both; animation-timeline: scroll(root); }
    @keyframes progress { to { transform: scaleX(1); } }
    .site-header::before { animation: glass linear both; animation-timeline: scroll(root); animation-range: 0 140px; }
    @keyframes glass { from { background: rgba(3, 6, 9, 0); border-bottom-color: transparent; -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } }
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    @keyframes reveal { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
    .lit .w { color: var(--text-4); animation: lit linear both; animation-timeline: view(); animation-range: cover 22% cover 44%; }
    @keyframes lit { to { color: var(--text); } }
    .steps::after { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    @keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    /* capability rows: each row slides in on its own as it scrolls up, number first, then title from the left
       and description from the right, while its rule draws across */
    .cap { view-timeline: --cap; animation: cap-in linear both; animation-timeline: --cap; animation-range: entry 0% entry 90%; }
    .cap::before { animation: cap-num linear both; animation-timeline: --cap; animation-range: entry 20% cover 20%; }
    .cap h3 { animation: cap-l linear both; animation-timeline: --cap; animation-range: entry 40% cover 28%; }
    .cap p { animation: cap-r linear both; animation-timeline: --cap; animation-range: entry 70% cover 36%; }
    .cap::after { animation: grow-x linear both; animation-timeline: --cap; animation-range: entry 50% cover 45%; }
    @keyframes cap-in { from { opacity: 0; } }
    @keyframes cap-num { from { opacity: 0; transform: translateY(14px); } }
    @keyframes cap-l { from { opacity: 0; transform: translateX(-96px); } }
    @keyframes cap-r { from { opacity: 0; transform: translateX(80px); } }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (max-width: 980px) {
    .steps::after { animation-name: grow-y; }
    @keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
@supports not (animation-timeline: scroll()) { .steps::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
}

/* ================================================================ page transitions */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out .3s ease both; }
  ::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* camera AI search (tools/gen-art.mjs camsearch(): a 16 s SMIL story; colors live here) */
.search-frame { position: relative; filter: drop-shadow(0 50px 90px rgba(0, 0, 0, .7)); }
/* small phones: run the panel edge to edge so its 26-unit labels stay at 10 CSS px or more */
@media (max-width: 420px) { .search-frame { margin-inline: calc(-1 * var(--pad)); } }
.camsearch .panel { fill: rgba(5, 11, 19, .94); stroke: rgba(143, 211, 255, .2); stroke-width: 2; }
.camsearch .bar { fill: #040a11; stroke: rgba(143, 211, 255, .38); stroke-width: 2; }
.camsearch .bar-flash { fill: none; stroke: var(--signal-2); stroke-width: 4; filter: drop-shadow(0 0 12px rgba(54, 169, 255, .9)); }
.camsearch .mag circle, .camsearch .mag path { fill: none; stroke: var(--signal-2); stroke-width: 3.5; stroke-linecap: round; }
.camsearch .q { fill: var(--text); font-weight: 400; }
.camsearch .cover { fill: #040a11; }
.camsearch .caret { fill: var(--signal-2); }
.camsearch .s-txt { font-weight: 400; letter-spacing: .12em; fill: var(--signal-2); }
.camsearch .s-txt.ok { fill: var(--ok); } .camsearch .s-txt.ghost { fill: var(--text-3); }
.camsearch .s-dot { fill: var(--signal); filter: drop-shadow(0 0 6px rgba(54, 169, 255, .9)); }
.camsearch .s-dot.ok { fill: var(--ok); filter: drop-shadow(0 0 6px rgba(61, 220, 151, .9)); } .camsearch .s-dot.ghost { fill: var(--text-4); filter: none; }
.camsearch .p-track { fill: rgba(143, 211, 255, .14); }
.camsearch .p-fill { fill: var(--signal); }
.camsearch .star { fill: #dff3ff; opacity: .7; }
.camsearch .hill { fill: #06121f; }
.camsearch .tree { fill: #040f1a; }
.camsearch .trunk { stroke: #040f1a; stroke-width: 10; }
.camsearch .wall { fill: #0d2236; }
.camsearch .pillar { fill: #12304a; stroke: rgba(190, 228, 255, .25); stroke-width: 2; }
.camsearch .bars { fill: none; stroke: rgba(170, 215, 250, .45); stroke-width: 3; }
.camsearch .drive { fill: url(#cs-drive); }
.camsearch .pavers { fill: none; stroke: rgba(150, 200, 250, .13); stroke-width: 2; }
.camsearch .hedge { fill: #051424; }
.camsearch .glow { fill: url(#cs-glowg); }
.camsearch .beam { fill: url(#cs-beamcone); }
.camsearch .bloom { fill: url(#cs-bloomg); }
.camsearch .c-shadow { fill: rgba(0, 0, 0, .55); }
.camsearch .c-wheel { fill: #01040a; }
.camsearch .c-cabin { fill: #c5d8e8; stroke: rgba(255, 255, 255, .7); stroke-width: 1.4; }
.camsearch .c-glass { fill: url(#cs-glass); }
.camsearch .c-glint { fill: rgba(255, 255, 255, .22); }
.camsearch .c-rail { stroke: #ffffff; stroke-width: 3; stroke-linecap: round; }
.camsearch .c-mirror { fill: #d3e3f0; stroke: rgba(255, 255, 255, .6); }
.camsearch .c-body { fill: url(#cs-body); stroke: #ffffff; stroke-width: 1.6; }
.camsearch .c-crease { stroke: rgba(40, 70, 100, .35); }
.camsearch .c-grille { fill: #0a1a2a; stroke: rgba(40, 70, 100, .6); }
.camsearch .c-slats { stroke: rgba(190, 228, 255, .3); }
.camsearch .c-plate { fill: #f4f8fb; stroke: #6d8aa3; }
.camsearch .c-led { stroke: #ffffff; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 0 8px #ffffff) drop-shadow(0 0 16px rgba(143, 211, 255, .9)); }
.camsearch .c-drl { stroke: #dff3ff; stroke-width: 2.4; stroke-linecap: round; }
.camsearch .v-body { fill: #1a2633; stroke: rgba(190, 228, 255, .3); stroke-width: 2; }
.camsearch .v-glass { fill: #0b1a29; }
.camsearch .v-lamp { stroke: #9fb5c8; stroke-width: 6; stroke-linecap: round; }
.camsearch .pool { fill: url(#cs-poolg); stroke: rgba(143, 211, 255, .5); stroke-width: 3; }
.camsearch .ripples { fill: none; stroke: rgba(190, 235, 255, .32); stroke-width: 2; }
.camsearch .lounger { fill: #0e2236; stroke: rgba(190, 228, 255, .25); stroke-width: 2; }
.camsearch .lamp { stroke: #1d3a55; stroke-width: 6; }
.camsearch .pergola { fill: none; stroke: #1a3550; stroke-width: 12; }
.camsearch .string { fill: none; stroke: rgba(190, 228, 255, .3); stroke-width: 2; }
.camsearch .bulb { fill: #fff1cf; filter: drop-shadow(0 0 6px #ffd98a); }
.camsearch .table { fill: #13304a; stroke: #13304a; stroke-width: 8; }
.camsearch .facade { fill: #0b1d2f; stroke: rgba(190, 228, 255, .22); stroke-width: 2; }
.camsearch .roof { fill: #081626; stroke: rgba(190, 228, 255, .22); stroke-width: 2; }
.camsearch .win { fill: #06111c; stroke: rgba(190, 228, 255, .2); stroke-width: 2; }
.camsearch .win.lit { fill: #ffd98a; fill-opacity: .7; filter: drop-shadow(0 0 10px rgba(255, 200, 120, .6)); }
.camsearch .door { fill: #05101b; stroke: rgba(190, 228, 255, .25); stroke-width: 2; }
.camsearch .gravel { fill: #0c2032; }
.camsearch .lawnline { fill: none; stroke: rgba(120, 190, 150, .12); stroke-width: 2; }
.camsearch .stone { fill: #10283e; }
.camsearch .gdoor { fill: #0e2338; stroke: rgba(190, 228, 255, .3); stroke-width: 2; }
.camsearch .gpanel { fill: none; stroke: rgba(190, 228, 255, .15); stroke-width: 2; }
.camsearch .apron { fill: #0a1c2d; }
.camsearch .t-lbl rect { fill: rgba(2, 6, 11, .8); }
.camsearch .t-lbl text { font-weight: 600; letter-spacing: .06em; fill: var(--text); }
.camsearch .dim { fill: rgba(2, 5, 10, .74); }
.camsearch .tick { fill: none; stroke: rgba(143, 211, 255, .9); stroke-width: 3; stroke-linecap: round; }
.camsearch .beam-edge { fill: #bfe6ff; filter: drop-shadow(0 0 10px #36a9ff); }
.camsearch .lock { fill: none; stroke: var(--signal-2); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 8px rgba(54, 169, 255, .9)); }
.camsearch .lock.best { stroke: var(--ok); filter: drop-shadow(0 0 10px rgba(61, 220, 151, .85)); }
.camsearch .hud-shade { fill: rgba(2, 6, 11, .6); }
.camsearch .rec { fill: #ff4d4d; filter: drop-shadow(0 0 6px #ff4d4d); }
.camsearch .hud { fill: var(--text); font-weight: 400; letter-spacing: .12em; }
.camsearch .tl-panel { fill: rgba(2, 6, 11, .78); stroke: rgba(143, 211, 255, .2); stroke-width: 2; }
.camsearch .tl-track { stroke: rgba(143, 211, 255, .35); stroke-width: 4; stroke-linecap: round; }
.camsearch .tl-lbl { fill: var(--text-3); letter-spacing: .12em; }
.camsearch .mark { fill: var(--signal-2); } .camsearch .mark.best { fill: var(--ok); }
.camsearch .playhead { fill: #ffffff; filter: drop-shadow(0 0 8px #36a9ff); }
.camsearch .cs-still { display: none; }

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .camsearch .cs-anim { display: none; } .camsearch .cs-still { display: inline; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pkt, .ha .beat, .ha .cut, .ha .s2, .ha .s3 { display: none; }
  .ha .s1, .ha .act-a, .ha .stb-b, .ha .links.a { opacity: 1 !important; }
  .ha .act-b, .ha .stb-a { opacity: 0 !important; }
  .ha .links.b { opacity: .38 !important; }
  .cam-rain, .cam-sweep, .camfeed .car-in, .camfeed .walker, .camfeed .toast, .camfeed .p-scan, .camfeed .pavers.scan, .camfeed .passby { display: none; }
  .camfeed .car-out { animation: none !important; opacity: 1; transform: translate(640px, 370px) scale(.9); }
  .camfeed .lock.out, .camfeed .flare, .camfeed .pip, .camfeed .leader, .camfeed .pc, .camfeed .p-dot, .camfeed .p-ok, .camfeed .ev1, .camfeed .ev2, .camfeed .ev3, .camfeed .mk1, .camfeed .mk2 { animation: none !important; opacity: 1; transform: none; }
  .camfeed .roll.d9 { animation: none !important; transform: translateY(-162px); }
  .camfeed .roll.d7 { animation: none !important; transform: translateY(-126px); }
  .camfeed .cf-cap, .camfeed .roll.sec { display: none; }
  .camfeed .gate-strip { animation: none !important; transform: none; }
  .camfeed .roll-still { display: inline; }
  .camplan .anim, .camplan .subjects, .camplan .blind, .camplan .covered { display: none; }
  .camplan .still { display: inline; }
  .camplan .row.added, .camplan .st-val.ok { opacity: 1 !important; }
  .camplan .st-val:not(.ok) { opacity: 0 !important; }
  .secops .so-comet, .secops .so-key, .secops .so-frag, .secops .so-hit, .secops .so-burst, .secops .h-ping, .secops .so-ret, .secops .so-push, .secops .so-pulse,
  .secops .so-mfa, .secops .so-wallg, .secops .so-lat, .secops .so-lhead, .secops .so-x, .secops .so-tag, .secops .so-scan, .secops .so-flare, .secops .so-wave,
  .secops .so-count, .secops .so-target, .secops .so-zone-hot, .secops .tv-hot, .secops .tv-q, .secops .so-radar, .secops .e-empty, .secops .st0, .secops .st1, .secops .st2,
  .secops .e-flash, .secops .so-roll, .secops .so-cap { display: none; }
  .secops .so-roll-still { display: inline; }
  .secops .so-ev, .secops .so-sum, .secops .so-lact, .secops .st3 { opacity: 1 !important; }
  .wifi .client, .wifi .trail, .wifi .link, .wifi .hud-live, .wifi .ap-ring, .wifi .ap-ping, .wifi .roam { display: none; }
  .rack .disp-text { opacity: 0 !important; } .rack .disp-text:first-of-type, .estate .lit { opacity: 1 !important; }
  .telemetry .st1, .telemetry .st2, .telemetry .st3, .telemetry .fd, .telemetry .r-alert, .telemetry .warn-dot, .telemetry .r-detail.warn, .telemetry .r-val.warn { display: none; }
  .telemetry .st0, .telemetry .fd-idle, .telemetry .pw-ok, .telemetry .tm-cap .c0 { opacity: 1 !important; }
  .telemetry .tm-cap .c1, .telemetry .tm-cap .c2, .telemetry .tm-cap .c3 { display: none; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee ul[aria-hidden] { display: none; }
  .marquee ul { flex-wrap: wrap; row-gap: 12px; }
  .scroll-cue::after { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1279px) { .secops .so-cap-still { display: inline; } }
@media (prefers-reduced-motion: reduce) and (max-width: 1024px) { .camfeed .cf-cap-still { display: inline; } .camfeed .roll-still { display: none; } }

/* keep a hyphenated email local part on one line; the <wbr> before @ is the break point */
.nobr { white-space: nowrap; }