/* BRO ARMOR — public site design system
   Night-valet palette taken from the concept photography: near-black ground,
   machined-aluminium text, warm lobby light as the only accent. */

:root {
  --ink:        #07080a;
  --ink-2:      #0d0f13;
  --ink-3:      #14171c;
  --line:       #23272e;
  --line-soft:  #1a1d23;
  --alum:       #c8cdd4;
  --alum-dim:   #8b9199;
  --alum-faint: #5d636b;
  --white:      #f4f6f8;
  --gold:       #e0bd88;
  --gold-dim:   #a98a5c;
  --glass:      #9fd4e8;
  --ok:         #62c08a;
  --warn:       #e2b356;
  --bad:        #e0705f;

  --gut: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --narrow: 780px;

  --t-display: 300 clamp(2.6rem, 6.4vw, 5.2rem)/1.02 'Inter', system-ui, sans-serif;
  --t-h2:      300 clamp(1.9rem, 3.4vw, 3rem)/1.1 'Inter', system-ui, sans-serif;
  --t-h3:      500 clamp(1.05rem, 1.5vw, 1.25rem)/1.3 'Inter', system-ui, sans-serif;
  --track:     0.34em;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--alum);
  font: 400 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }
.narrow { max-width: var(--narrow); }

/* ----------------------------------------------------------- typography */
h1, h2, h3, h4 { color: var(--white); font-weight: 300; margin: 0 0 .6em; }
h1 { font: var(--t-display); letter-spacing: -0.015em; }
h2 { font: var(--t-h2); letter-spacing: -0.01em; }
h3 { font: var(--t-h3); letter-spacing: 0; }
p { margin: 0 0 1.1em; max-width: 68ch; }
strong { color: var(--white); font-weight: 500; }

.wordmark {
  font-weight: 300;
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--white);
}
.eyebrow {
  font-size: .688rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.2em;
  font-weight: 500;
}
.eyebrow.muted { color: var(--alum-faint); }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--alum); max-width: 62ch; }
.fine { font-size: .8rem; color: var(--alum-faint); line-height: 1.6; }
.mono { font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; font-size: .85em; }

/* --------------------------------------------------------------- header */
/* No backdrop-filter. A blur filter on a sticky header promotes the whole
   scrolling area to a composited layer, and on several GPUs the text beneath
   it is then rasterised at the wrong scale and renders soft. A near-opaque
   background looks the same and costs nothing. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,8,10,.94);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .bar {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  height: 68px; display: flex; align-items: center; gap: 28px;
}
.site-head a { text-decoration: none; }
.brand { font-size: 1.02rem; letter-spacing: .3em; white-space: nowrap; }
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
/* :not(.btn) matters. `.nav a` is specificity (0,1,1) and `.btn` is (0,1,0),
   so without it the nav rule wins and paints the solid white Reserve button's
   label --alum-dim on --white: about 2.6:1, unreadable. `.btn.ghost` is
   (0,2,0) and survives, which is why Sign In looked right and Reserve did
   not — the two buttons disagreeing was the tell. */
.nav a:not(.btn) {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--alum-dim); padding: 6px 0; border-bottom: 1px solid transparent;
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current] {
  color: var(--white); border-bottom-color: var(--gold);
}
.nav-tools { display: flex; gap: 14px; align-items: center; margin-left: 8px; }
#navtoggle { display: none; }
.burger { display: none; }

@media (max-width: 900px) {
  .nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 24px; align-items: stretch;
    max-height: calc(100dvh - 68px); overflow-y: auto;
    transform: translateY(-120%); transition: transform .28s ease; margin-left: 0;
  }
  #navtoggle:checked ~ .nav { transform: translateY(0); }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line-soft); font-size: .84rem; }
  .nav-tools .btn { flex: 1; justify-content: center; }
  .nav-tools { margin: 14px 0 0; }
  .burger {
    display: block; margin-left: auto; width: 44px; height: 44px; cursor: pointer;
    position: relative; border: 1px solid var(--line); border-radius: 2px;
  }
  .burger i, .burger::before, .burger::after {
    content: ''; position: absolute; left: 12px; right: 12px; height: 1px;
    background: var(--alum); transition: .25s;
  }
  .burger::before { top: 16px; } .burger i { top: 21px; } .burger::after { top: 26px; }
  #navtoggle:checked ~ .burger::before { top: 21px; transform: rotate(45deg); }
  #navtoggle:checked ~ .burger::after  { top: 21px; transform: rotate(-45deg); }
  #navtoggle:checked ~ .burger i { opacity: 0; }
}

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border: 1px solid var(--white); background: var(--white);
  color: var(--ink); font: 500 .78rem/1 'Inter', sans-serif;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: .2s; border-radius: 1px;
}
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--white); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.btn.sm { padding: 9px 16px; font-size: .7rem; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 2rem 0 0; }

/* ----------------------------------------------------------------- hero */
.hero { position: relative; min-height: min(90vh, 820px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(7,8,10,.94) 0%, rgba(7,8,10,.72) 42%, rgba(7,8,10,.15) 78%),
    linear-gradient(to top, rgba(7,8,10,.96) 0%, rgba(7,8,10,0) 46%);
}
.hero-body { position: relative; padding: 130px 0 62px; width: 100%; }
.hero h1 { margin-bottom: .35em; }
.hero h1 .wordmark { display: block; font-size: clamp(1.5rem,3vw,2.1rem); letter-spacing: .4em; margin-bottom: .5rem; color: var(--gold); }
.hero .lede { margin-bottom: 0; }
.hero-price { margin-top: 2.4rem; font-size: .8rem; letter-spacing: .1em; color: var(--alum-dim); }
.hero-price b { color: var(--white); font-weight: 500; }

.modes-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-soft); border-block: 1px solid var(--line-soft);
}
.modes-strip a {
  background: var(--ink); padding: 26px var(--gut); text-decoration: none;
  display: block; transition: background .25s;
}
.modes-strip a:hover { background: var(--ink-2); }
.modes-strip b { display: block; color: var(--white); letter-spacing: .2em; font-size: .8rem; font-weight: 500; }
.modes-strip span { font-size: .78rem; color: var(--alum-faint); }
@media (max-width: 760px) { .modes-strip { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- section */
.section { padding: clamp(64px, 9vw, 130px) 0; border-top: 1px solid var(--line-soft); }
.section.tight { padding-block: clamp(44px, 6vw, 80px); }
.section.alt { background: var(--ink-2); }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 4vw, 56px); }

.grid { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* Every card states its own colours. A card that inherits them from the band
   it sits in turns invisible the first time the band changes. */
.card {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  color: var(--alum); padding: clamp(20px, 2.6vw, 30px); border-radius: 2px;
}
.section.alt .card { background: var(--ink-3); }
.card h3 { color: var(--white); margin-bottom: .5em; }
.card p:last-child { margin-bottom: 0; }
.card .num { font-size: .7rem; letter-spacing: .2em; color: var(--gold); display: block; margin-bottom: 1.2em; }

.figure { border: 1px solid var(--line-soft); background: var(--ink-2); border-radius: 2px; overflow: hidden; }
.figure img { width: 100%; }
.figure figcaption { padding: 14px 18px; font-size: .78rem; color: var(--alum-faint); border-top: 1px solid var(--line-soft); }

/* --------------------------------------------------------- spec tables */
.spec { width: 100%; border-collapse: collapse; font-size: .9rem; }
.spec th, .spec td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.spec th { color: var(--alum-dim); font-weight: 400; width: 42%; }
.spec td { color: var(--white); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .88rem; }
.kv dt { color: var(--alum-faint); }
.kv dd { margin: 0; color: var(--white); }

/* --------------------------------------------------------------- pills */
.pill {
  display: inline-block; padding: 4px 11px; border: 1px solid var(--line);
  border-radius: 100px; font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--alum-dim); background: var(--ink-3);
}
.pill.ok   { color: var(--ok);   border-color: rgba(98,192,138,.35); }
.pill.warn { color: var(--warn); border-color: rgba(226,179,86,.35); }
.pill.bad  { color: var(--bad);  border-color: rgba(224,112,95,.35); }
.pill.gold { color: var(--gold); border-color: var(--gold-dim); }

/* -------------------------------------------------------- deploy scrub */
.deploy { display: grid; grid-template-columns: 300px 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .deploy { grid-template-columns: 1fr; } }
.deploy-steps { list-style: none; margin: 0; padding: 0; }
.deploy-steps li { border-left: 1px solid var(--line); }
.deploy-steps button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  border-left: 2px solid transparent; margin-left: -1px; cursor: pointer;
  padding: 14px 0 14px 20px; color: var(--alum-dim); font: inherit; transition: .2s;
}
.deploy-steps button:hover { color: var(--white); }
.deploy-steps button[aria-selected="true"] { border-left-color: var(--gold); color: var(--white); }
.deploy-steps b { display: block; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.deploy-steps span { font-size: .8rem; color: var(--alum-faint); }
.deploy-steps button[aria-selected="true"] span { color: var(--alum-dim); }
.deploy-stage { background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: 2px; padding: clamp(14px,2vw,24px); }
.deploy-cap { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-top: 16px; font-size: .82rem; color: var(--alum-faint); flex-wrap: wrap; }
.deploy-bar { height: 2px; background: var(--line); margin-top: 14px; }
.deploy-bar i { display: block; height: 100%; background: var(--gold); width: 20%; transition: width .45s ease; }

/* ------------------------------------------------------------- filmstrip */
.strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, 1fr); } }
.strip figure { margin: 0; border: 1px solid var(--line-soft); background: var(--ink-2); }
.strip figcaption { padding: 9px 11px; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--alum-faint); }

/* ----------------------------------------------------------------- forms */
.form { display: grid; gap: 18px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form .row2 { grid-template-columns: 1fr; } }
label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--alum-dim); margin-bottom: 8px; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=password], input[type=search], select, textarea {
  width: 100%; padding: 12px 14px; background: var(--ink-3); color: var(--white);
  border: 1px solid var(--line); border-radius: 2px; font: inherit; font-size: .94rem;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--alum-dim) 50%), linear-gradient(135deg, var(--alum-dim) 50%, transparent 50%); background-position: right 18px center, right 13px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; }
.check input { margin-top: 4px; accent-color: var(--gold); width: 16px; height: 16px; flex: none; }
.check label { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--alum); margin: 0; }
.field-err { color: var(--bad); font-size: .78rem; margin-top: 6px; }

.notice { border: 1px solid var(--line); border-left: 2px solid var(--gold); background: var(--ink-2); padding: 16px 20px; border-radius: 2px; color: var(--alum); }
.notice.ok  { border-left-color: var(--ok); }
.notice.bad { border-left-color: var(--bad); }
.notice p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--line-soft); padding: clamp(48px,6vw,72px) 0 40px; background: var(--ink-2); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h4 { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--alum-faint); font-weight: 500; }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-foot a { color: var(--alum-dim); text-decoration: none; font-size: .86rem; }
.site-foot a:hover { color: var(--gold); }
.foot-legal { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; }

/* ------------------------------------------------------------- utilities */
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
.stack > * + * { margin-top: 1.1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: 10px; z-index: 100; background: var(--white); color: var(--ink); padding: 10px 16px; }

/* Opacity only. Animating transform on a block full of text keeps it on a
   GPU layer for the duration and leaves sub-pixel text rendering disabled,
   which reads as permanently slightly-blurry copy. */
.reveal { opacity: 0; transition: opacity .55s ease; }
.reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .deploy-bar i { transition: none; }
}

/* =================================================== deployment drawing */
.bx { width: 100%; background: transparent; }
.bx text { font: 400 10px 'Inter', sans-serif; letter-spacing: .14em; fill: var(--alum-faint); text-transform: uppercase; }
.bx-label { letter-spacing: .24em; fill: var(--alum-dim); }
.bx-ground { stroke: var(--line); stroke-width: 1; }
.bx-divider { stroke: var(--line-soft); stroke-width: 1; }
.bx-car { fill: #1b1f25; stroke: #3a4048; stroke-width: 1.2; }
/* the side elevation's vehicle is the canonical one; do not re-fill it */
.bx-tyre { fill: #0b0d10; stroke: #2c3138; stroke-width: 1; }
.bx-cass-l rect, .bx-cass-r rect { fill: #454b53; stroke: #6a717a; stroke-width: 1; }
.bx-joint { fill: #878e97; stroke: none; }
.bx-arch rect:first-child { stroke: #7b828b; stroke-width: 1; }
.bx-panel path { stroke: #9fd4e8; stroke-width: .9; stroke-opacity: .55; }
.bx-seg { stroke: #9fd4e8; stroke-width: .6; stroke-opacity: .34; }
.bx-panelf { fill: url(#bxGlass); stroke: none; }
.bx-archf-line { fill: none; stroke: #767d86; stroke-width: 4; stroke-linecap: round; }
.bx-spine { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 5 4; }
.bx-lock { fill: var(--gold); }
.bx-dim line { stroke: var(--gold-dim); stroke-width: .8; }
.bx-dim text { fill: var(--gold); letter-spacing: .08em; }
.bx-leader { stroke-dasharray: 2 3; }
.bx-dim-sub { fill: var(--alum-faint) !important; letter-spacing: .1em; }
.bx-air path { fill: none; stroke: var(--glass); stroke-width: 1.2; stroke-dasharray: 3 5; stroke-linecap: round; }
.bx-air text { fill: var(--glass); letter-spacing: .12em; }
.bx-seal line { stroke: var(--ok); stroke-width: 2; }
.bx-seal text { fill: var(--ok); }

/* Animated parts. Origin is the cassette face, so everything grows out of
   the module it is stowed in rather than floating into place. */
.bx-arch, .bx-panel, .bx-archf, .bx-cass-l, .bx-cass-r {
  transform-box: fill-box; transform-origin: bottom;
  transition: transform .85s cubic-bezier(.33,.02,.2,1) var(--d, 0ms), opacity .5s ease var(--d, 0ms);
}
.bx-cass-l, .bx-cass-r { transform-origin: center; }
.bx-spine, .bx-lock, .bx-seal, .bx-air, .bx-dim {
  transition: opacity .6s ease .2s; opacity: 0;
}

/* stage 1 — retracted: modules flush, nothing standing */
.bx[data-stage="1"] .bx-arch,
.bx[data-stage="2"] .bx-arch { transform: scaleY(.035); }
.bx[data-stage="1"] .bx-archf,
.bx[data-stage="2"] .bx-archf { transform: scaleY(.05); opacity: .35; }
.bx[data-stage="1"] .bx-panel,
.bx[data-stage="2"] .bx-panel,
.bx[data-stage="3"] .bx-panel { transform: scaleY(0); opacity: 0; }

/* stage 2 — the modules translate outward for mirror and body clearance */
.bx[data-stage="1"] .bx-cass-l { transform: translateX(0); }
.bx[data-stage="1"] .bx-cass-r { transform: translateX(0); }
.bx[data-stage="2"] .bx-cass-l, .bx[data-stage="3"] .bx-cass-l,
.bx[data-stage="4"] .bx-cass-l, .bx[data-stage="5"] .bx-cass-l { transform: translateX(-28px); }
.bx[data-stage="2"] .bx-cass-r, .bx[data-stage="3"] .bx-cass-r,
.bx[data-stage="4"] .bx-cass-r, .bx[data-stage="5"] .bx-cass-r { transform: translateX(28px); }

/* stage 3 — arches telescope up and lock into the spine */
.bx[data-stage="3"] .bx-spine, .bx[data-stage="4"] .bx-spine, .bx[data-stage="5"] .bx-spine { opacity: 1; }
.bx[data-stage="3"] .bx-dim, .bx[data-stage="4"] .bx-dim, .bx[data-stage="5"] .bx-dim { opacity: 1; }

/* stage 4 — clear segments deploy between the arches */
.bx[data-stage="4"] .bx-lock, .bx[data-stage="5"] .bx-lock { opacity: 1; }

/* stage 5 — seals close, locks hold, climate runs */
.bx[data-stage="5"] .bx-seal, .bx[data-stage="5"] .bx-air { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bx-arch, .bx-panel, .bx-archf, .bx-cass-l, .bx-cass-r { transition: none; }
}

/* ================================================== security zone rings */
.bz { width: 100%; }
.bz-ring { fill: none; stroke-width: 1; }
.bz-1 { stroke: rgba(224,112,95,.55); stroke-dasharray: 2 4; }
.bz-2 { stroke: rgba(226,179,86,.45); stroke-dasharray: 3 6; }
.bz-3 { stroke: rgba(159,212,232,.35); stroke-dasharray: 4 8; }
.bz-car { fill: #1b1f25; stroke: #3a4048; stroke-width: 1.2; }
.bz-tyre { fill: #0b0d10; stroke: #2c3138; }
.bz-node circle { fill: var(--glass); }
.bz-ping { fill: none; stroke: var(--glass); transform-box: fill-box; transform-origin: center; animation: bzping 3.4s ease-out infinite; }
@keyframes bzping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(5); opacity: 0; } }
.bz-t { font: 400 9px 'Inter', sans-serif; letter-spacing: .24em; fill: var(--alum-faint); text-anchor: middle; }
.bz-t-in { fill: var(--bad); }
@media (prefers-reduced-motion: reduce) { .bz-ping { animation: none; opacity: 0; } }

/* ==================================================== platform envelopes */
.bp { width: 100%; }
.bp-name { font: 500 11px 'Inter', sans-serif; letter-spacing: .18em; fill: var(--white); }
.bp-dim  { font: 400 10px 'Inter', sans-serif; letter-spacing: .1em; fill: var(--alum-faint); }
.bp-env { fill: rgba(159,212,232,.08); stroke: rgba(159,212,232,.35); stroke-width: 1; }
.bp-min { fill: rgba(224,189,136,.14); stroke: var(--gold-dim); stroke-width: 1; }

/* ============================================ the arrival film (hero) ===
   One 17s clock. Every group animates against the same duration so the
   sequence stays in step. The stagger is baked into the keyframe percentages
   rather than animation-delay — a delay shifts an element's whole loop and
   the groups drift apart after a few cycles. */
.ar { width: 100%; display: block; }
/* superseded: fill now comes from the inline gradient in geometry.js */
.ar-glass  { stroke: #6d757f; stroke-width: 1; opacity: .95; }
.ar-crease { fill: none; stroke: #aab2bc; stroke-width: 1; opacity: .38; }
.ar-shadow { fill: #000; opacity: .5; }
.ar-headlight { fill: #fdf3dc; }
.ar-tail   { fill: #e0705f; }
.ar-cass rect { fill: #454b53; stroke: #767d86; stroke-width: 1; }
.ar-rail rect { fill: #3a4047; stroke: #6d757f; }
.ar-foot { fill: #8d959f !important; stroke: #b6bdc6 !important; }
.ar-pv     { fill: #1d2b3a !important; stroke: #2f4256 !important; }
.ar-joint  { fill: #8c939c; stroke: none !important; }
/* The near-side arch legs stand BETWEEN the viewer and the car, so they are
   drawn translucent — solid legs read as if the structure passes through the
   bodywork rather than in front of it. */
.ar-arch rect:first-child { fill: #23272d; fill-opacity: .55; stroke: #8b939d; stroke-width: 1; }
.ar-panel path { stroke: #9fd4e8; stroke-width: .9; stroke-opacity: .5; }
.ar-seg    { stroke: #9fd4e8; stroke-width: .6; stroke-opacity: .3; }
.ar-spine  { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 6 5; }
.ar-lock   { fill: var(--gold); }
.ar-seal line { stroke: var(--ok); stroke-width: 2.4; }
.ar-cap text { font: 500 13px 'Inter', sans-serif; letter-spacing: .42em; fill: var(--gold); text-anchor: middle; opacity: 0; }

.ar-car, .ar-sys-back, .ar-sys-front, .ar-cass-near, .ar-arch, .ar-panel, .ar-spine, .ar-lock,
.ar-seal, .ar-spin, .ar-headlight, .ar-tail, .ar-cap text {
  animation-duration: 17s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.ar-arch, .ar-panel { transform-box: fill-box; transform-origin: bottom; }
.ar-cass-near { transform-box: fill-box; transform-origin: center; }

.ar-car        { animation-name: ar-drive; }
.ar-rail       { animation-name: ar-railout; animation-duration: 17s; animation-iteration-count: infinite; animation-timing-function: linear; transform-box: fill-box; transform-origin: center; }
.ar-sys-back, .ar-sys-front { animation-name: ar-drive; }
.ar-spin       { animation-name: ar-spin; }
.ar-headlight  { animation-name: ar-head; }
.ar-tail       { animation-name: ar-brake; }
.ar-cass-near  { animation-name: ar-cass; }
.ar-a          { animation-name: ar-arch-a; }
.ar-b          { animation-name: ar-arch-b; }
.ar-c          { animation-name: ar-arch-c; }
.ar-p1         { animation-name: ar-panel-1; }
.ar-p2         { animation-name: ar-panel-2; }
.ar-spine, .ar-lock { animation-name: ar-lockin; }
.ar-seal       { animation-name: ar-sealin; }

/* Nose points left, so leftward travel is FORWARD in both directions — it
   arrives forward and it leaves forward, never reversing. The per-keyframe
   easing is what stops it reading as a robot: it coasts in and settles, then
   pulls away rather than teleporting at a constant rate. */
@keyframes ar-drive {
  0%   { transform: translateX(820px); animation-timing-function: cubic-bezier(.16,.74,.3,1); }
  7%   { transform: translateX(4px);   animation-timing-function: cubic-bezier(.3,0,.5,1); }
  9%   { transform: translateX(0); }
  89%  { transform: translateX(0);     animation-timing-function: cubic-bezier(.6,0,.85,.4); }
  98%  { transform: translateX(-880px); }
  100% { transform: translateX(-880px); }
}
/* Rolling left is counter-clockwise, i.e. negative in SVG. Matched to the
   eased drive curve so the wheels stop turning exactly when the car stops. */
@keyframes ar-spin {
  0%   { transform: rotate(0deg); animation-timing-function: cubic-bezier(.16,.74,.3,1); }
  7%   { transform: rotate(-940deg); }
  9%   { transform: rotate(-950deg); }
  89%  { transform: rotate(-950deg); animation-timing-function: cubic-bezier(.6,0,.85,.4); }
  98%  { transform: rotate(-1900deg); }
  100% { transform: rotate(-1900deg); }
}
@keyframes ar-head {
  0%, 7% { opacity: 1; }
  11%    { opacity: .18; }
  88%    { opacity: .18; }
  91%    { opacity: 1; }
  100%   { opacity: 1; }
}
@keyframes ar-brake {
  0%    { opacity: .35; }
  4%    { opacity: 1; }
  9%    { opacity: 1; }
  12%   { opacity: .25; }
  88%   { opacity: .25; }
  92%   { opacity: 1; }
  100%  { opacity: .6; }
}

/* modules translate outward for clearance, and back in at the end */
@keyframes ar-cass {
  0%, 11%   { transform: translateY(0) scaleX(1); }
  17%       { transform: translateY(6px) scaleX(1.06); }
  86%       { transform: translateY(6px) scaleX(1.06); }
  90%, 100% { transform: translateY(0) scaleX(1); }
}

/* three arch groups, rising outer-first */
@keyframes ar-arch-a {
  0%, 18%   { transform: scaleY(.03); }
  32%       { transform: scaleY(1); }
  80%       { transform: scaleY(1); }
  86%, 100% { transform: scaleY(.03); }
}
@keyframes ar-arch-b {
  0%, 20%   { transform: scaleY(.03); }
  34%       { transform: scaleY(1); }
  79%       { transform: scaleY(1); }
  85%, 100% { transform: scaleY(.03); }
}
@keyframes ar-arch-c {
  0%, 22%   { transform: scaleY(.03); }
  36%       { transform: scaleY(1); }
  78%       { transform: scaleY(1); }
  84%, 100% { transform: scaleY(.03); }
}

/* panels close after the structure is locked */
@keyframes ar-panel-1 {
  0%, 37%   { transform: scaleY(0); opacity: 0; }
  40%       { opacity: 1; }
  51%       { transform: scaleY(1); opacity: 1; }
  73%       { transform: scaleY(1); opacity: 1; }
  78%       { transform: scaleY(0); opacity: 0; }
  100%      { transform: scaleY(0); opacity: 0; }
}
@keyframes ar-panel-2 {
  0%, 40%   { transform: scaleY(0); opacity: 0; }
  43%       { opacity: 1; }
  54%       { transform: scaleY(1); opacity: 1; }
  72%       { transform: scaleY(1); opacity: 1; }
  77%       { transform: scaleY(0); opacity: 0; }
  100%      { transform: scaleY(0); opacity: 0; }
}
@keyframes ar-lockin {
  0%, 30%   { opacity: 0; }
  36%       { opacity: 1; }
  80%       { opacity: 1; }
  84%, 100% { opacity: 0; }
}
@keyframes ar-sealin {
  0%, 55%   { opacity: 0; }
  59%       { opacity: 1; }
  72%       { opacity: 1; }
  75%, 100% { opacity: 0; }
}

/* captions ride the same clock */
.ar-cap-1 { animation-name: ar-cap-1; }
.ar-cap-2 { animation-name: ar-cap-2; }
.ar-cap-3 { animation-name: ar-cap-3; }
.ar-cap-4 { animation-name: ar-cap-4; }
.ar-cap-5 { animation-name: ar-cap-5; }
.ar-cap-6 { animation-name: ar-cap-6; }
@keyframes ar-cap-1 { 0%,1%{opacity:0} 4%{opacity:1} 9%{opacity:1} 12%,100%{opacity:0} }
@keyframes ar-cap-2 { 0%,12%{opacity:0} 15%{opacity:1} 18%{opacity:1} 21%,100%{opacity:0} }
@keyframes ar-cap-3 { 0%,21%{opacity:0} 24%{opacity:1} 33%{opacity:1} 36%,100%{opacity:0} }
@keyframes ar-cap-4 { 0%,36%{opacity:0} 39%{opacity:1} 51%{opacity:1} 55%,100%{opacity:0} }
@keyframes ar-cap-5 { 0%,55%{opacity:0} 59%{opacity:1} 71%{opacity:1} 74%,100%{opacity:0} }
@keyframes ar-cap-6 { 0%,74%{opacity:0} 78%{opacity:1} 87%{opacity:1} 90%,100%{opacity:0} }

/* Reduced motion: hold the finished state rather than animating to it. */
@media (prefers-reduced-motion: reduce) {
  .ar-car, .ar-sys-back, .ar-sys-front, .ar-cass-near, .ar-arch, .ar-panel, .ar-spine, .ar-lock,
  .ar-seal, .ar-spin, .ar-headlight, .ar-tail, .ar-cap text { animation: none; }
  .ar-cap text { opacity: 0; }
  .ar-cap-5 { opacity: 1; }
  .ar-seal, .ar-spine, .ar-lock { opacity: 1; }
}

.ar-stage {
  position: relative; background: var(--ink-2);
  border-block: 1px solid var(--line-soft); overflow: hidden;
}
.ar-stage .ar { max-width: 1500px; margin: 0 auto; }

/* ------------------------------------------- arrival legend + ownership */
.ar-legend {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; margin-top: -8px;
}
.ar-legend h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
@media (max-width: 760px) { .ar-legend { align-items: flex-start; } }

.card-featured { border-color: var(--gold-dim); position: relative; }
.card-featured::before {
  content: ''; position: absolute; inset: -1px; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--gold-dim), 0 24px 60px -30px rgba(224,189,136,.55);
  pointer-events: none;
}
.ticks { list-style: none; margin: 1.4em 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li {
  position: relative; padding-left: 22px; font-size: .88rem; color: var(--alum);
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold); transform: rotate(-45deg);
}

@keyframes ar-railout {
  0%, 11%   { transform: scaleX(.12); opacity: 0; }
  13%       { opacity: 1; }
  18%       { transform: scaleX(1); opacity: 1; }
  87%       { transform: scaleX(1); opacity: 1; }
  91%       { transform: scaleX(.12); opacity: 0; }
  100%      { transform: scaleX(.12); opacity: 0; }
}
/* ============================ arrival film — material detail ========== */
.ar-body     { stroke: #848c96; stroke-width: 1.1; }
.ar-glass    { stroke: #7d858f; stroke-width: 1; }
.ar-glasshl  { fill: #aebecb; opacity: .13; }
.ar-sheen    { fill: none; stroke: #e8edf2; stroke-width: 2; opacity: .5; }
.ar-sheen2   { fill: none; stroke: #aab3bd; stroke-width: 1.2; opacity: .3; }
.ar-intake   { fill: #0c0f13; stroke: #6f7883; stroke-width: 1; }
.ar-shut     { fill: none; stroke: #9aa3ad; stroke-width: .9; opacity: .5; }
.ar-mirror   { fill: #3c434b; stroke: #8b939d; stroke-width: 1; }
.ar-arch-trim{ fill: none; stroke: #0b0d10; stroke-width: 5; opacity: .85; }
.ar-reflect  { opacity: .5; }
.ar-collar   { fill: #9aa2ac; stroke: none !important; }
.ar-led      { fill: #e0bd88 !important; stroke: none !important; opacity: .75; }
.ar-spec     { fill: #ffffff; opacity: .07; }
.ar-lock circle:first-child { fill: var(--gold); }

.ar-call line   { stroke: var(--gold-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.ar-call circle { fill: var(--gold); }
.ar-call text   { font: 500 12px 'Inter', sans-serif; letter-spacing: .2em; fill: var(--gold); }
.ar-call-sub    { font: 400 11px 'Inter', sans-serif !important; letter-spacing: .06em !important; fill: var(--alum-dim) !important; }
.ar-call { opacity: 0; animation-duration: 17s; animation-iteration-count: infinite; animation-timing-function: linear; }
.ar-c-extend  { animation-name: ar-cap-2; }
.ar-c-rise    { animation-name: ar-cap-3; }
.ar-c-enclose { animation-name: ar-cap-4; }
.ar-c-secure  { animation-name: ar-cap-5; }
@media (prefers-reduced-motion: reduce) {
  .ar-call { animation: none; }
  .ar-c-secure { opacity: 1; }
}

/* ================================ security perimeter, rebuilt ========= */
.bz { width: 100%; }
.bz-cone   { fill: url(#bzCone); }
.bz-ring   { fill: none; stroke-width: 1.2; }
.bz-1      { stroke: rgba(224,112,95,.65); stroke-dasharray: 3 4; }
.bz-2      { stroke: rgba(226,179,86,.5);  stroke-dasharray: 4 6; }
.bz-3      { stroke: rgba(159,212,232,.4); stroke-dasharray: 5 8; }
.bz-car    { fill: #1c2027; stroke: #59616b; stroke-width: 1.4; }
.bz-screen { fill: #0b0e12; stroke: #4a525b; stroke-width: 1; }
.bz-mod    { fill: #6b737d; stroke: #949ca6; stroke-width: 1; }
.bz-node rect { fill: #454d56; stroke: #99a1ab; stroke-width: 1; }
.bz-ping   { fill: none; stroke: var(--glass); stroke-width: 1.2;
             transform-box: fill-box; transform-origin: center;
             animation: bzping 3.6s ease-out infinite; }
@keyframes bzping { 0% { transform: scale(.5); opacity: .8; } 75%, 100% { transform: scale(4.2); opacity: 0; } }
.bz-person      { fill: var(--bad); }
.bz-person-halo { fill: none; stroke: var(--bad); stroke-width: 1.2;
                  transform-box: fill-box; transform-origin: center;
                  animation: bzping 2.4s ease-out infinite; }
.bz-walk { animation: bzwalk 11s cubic-bezier(.4,0,.5,1) infinite; }
@keyframes bzwalk {
  0%   { transform: translate(742px, 452px); }
  26%  { transform: translate(618px, 376px); }
  52%  { transform: translate(540px, 318px); }
  76%  { transform: translate(506px, 286px); }
  88%  { transform: translate(506px, 286px); }
  100% { transform: translate(742px, 452px); }
}
.bz-label line { stroke: var(--line); stroke-width: 1; }`n.bz-label circle { fill: var(--alum-faint); }
.bz-t    { font: 500 11px 'Inter', sans-serif; letter-spacing: .24em; fill: var(--alum); }
.bz-t-in { fill: var(--bad); }
.bz-sub  { font: 400 10.5px 'Inter', sans-serif; letter-spacing: .05em; fill: var(--alum-faint); }
.bz-foot { font: 400 10.5px 'Inter', sans-serif; letter-spacing: .12em; fill: var(--alum-faint); }
@media (prefers-reduced-motion: reduce) {
  .bz-ping, .bz-person-halo { animation: none; opacity: 0; }
  .bz-walk { animation: none; transform: translate(540px, 318px); }
}

/* ---------------- side elevation: shared geometry, shared materials ---- */
.bx-collar  { fill: #9aa2ac; stroke: none; }
.bx-railx   { fill: #3a4047; stroke: #6d757f; stroke-width: 1.2; }
.bx-seal-t  { font: 400 10px 'Inter', sans-serif; letter-spacing: .14em;
              fill: var(--ok); text-transform: uppercase; }
.bx-lock circle:first-child { fill: var(--gold); }
.bx-spine   { stroke-width: 2.2; }
/* The side elevation renders the canonical car, so it inherits the ar-* paint
   treatment. Only the wheels must not spin here — this drawing is stationary. */
.bx .ar-spin { animation: none; }
.bx .ar-shadow { opacity: .35; }

/* The shell's leading edge. Two jobs: make the top of the glass legible so
   the enclosure visibly reaches over the roof, and give the deployed state a
   hard line to read against the car behind it. */
.ar-lip, .bx-lip {
  fill: none; stroke: #d7eefb; stroke-width: 2.2; stroke-linecap: round;
  stroke-opacity: .85;
}
.bx-lip { stroke-width: 3; }
.ar-panel path:first-child, .bx-panel path:first-child { stroke: none; }

/* ------------------------------------------------ the owner and the app */
.ar-p-head   { fill: #3c444e; stroke: #98a1ac; stroke-width: 1.5; }
.ar-p-body   { fill: #2b323a; stroke: #98a1ac; stroke-width: 1.5; }
.ar-p-arm    { fill: none; stroke: #8b949f; stroke-width: 6; stroke-linecap: round; }
.ar-phone rect:first-child { fill: #14181d; stroke: #8b939d; stroke-width: 1.2; }
.ar-phone-screen { fill: #e0bd88 !important; stroke: none !important; }
.ar-tap circle { fill: none; stroke: var(--gold); stroke-width: 1.1; }

.ar-person, .ar-tap {
  animation-duration: 17s; animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.ar-person { animation-name: ar-arrive-person; opacity: 0; }
.ar-tap    { animation-name: ar-tap-ping; opacity: 0;
             transform-box: fill-box; transform-origin: center; }

/* Out of the car just after it settles, clear of the deployment area before
   anything moves, and gone again before the car pulls away. */
@keyframes ar-arrive-person {
  0%, 8%    { opacity: 0; transform: translateX(28px); }
  12%       { opacity: 1; transform: translateX(0); }
  74%       { opacity: 1; transform: translateX(0); }
  80%       { opacity: 1; transform: translateX(0); }
  86%       { opacity: 0; transform: translateX(24px); }
  100%      { opacity: 0; transform: translateX(24px); }
}
@keyframes ar-tap-ping {
  0%, 11%   { opacity: 0; transform: scale(.4); }
  13%       { opacity: .9; transform: scale(.7); }
  16%       { opacity: 0; transform: scale(1.5); }
  100%      { opacity: 0; transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .ar-person { animation: none; opacity: 1; }
  .ar-tap { animation: none; opacity: 0; }
}