/* icepack.ai — POC rebrand stylesheet
   Palette: obsidian ground, glacier type, instrument amber accent.
   Type: Instrument Serif (display), Archivo (wide nameplates + body), IBM Plex Mono (spec sheets). */

:root {
  --obsidian: #0b0d11;
  --graphite: #141820;
  --graphite-2: #1a1f28;
  --seam: #262b34;
  --seam-soft: #1e232b;
  --glacier: #eceff3;
  --frost: #98a1ad;
  --frost-dim: #6b7380;
  --dial: #d4a75a;
  --dial-dim: #8c6f3c;
  --dial-glow: rgba(212, 167, 90, 0.18);

  --head: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--head); /* headings moved from Instrument Serif to Manrope; alias kept so old rules follow */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1280px;
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--glacier);
  font-family: var(--sans);
  font-variation-settings: "wdth" 100;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "kern" 1;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--glacier); }
:focus-visible { outline: 2px solid var(--dial); outline-offset: 3px; }

img, svg, canvas { display: block; max-width: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
small { font-size: 0.8125rem; }
strong { font-weight: 500; color: var(--glacier); }
em { font-style: italic; }

/* ---------- type scale (Manrope headings, no italic accent words) ---------- */
.display {
  font-family: var(--head);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  text-wrap: balance;
}
.display i, .h2 i, .h3 i { font-style: normal; }
.h2 {
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--head);
  font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.65rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.lede {
  font-size: clamp(1.125rem, 1.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--frost);
  max-width: var(--measure);
}
.lede strong { color: var(--glacier); font-weight: 400; }

.eyebrow, .nameplate, .btn, .nav a, .tag {
  font-family: var(--sans);
  font-variation-settings: "wdth" 125;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
}
.eyebrow {
  font-size: 0.6875rem;
  color: var(--dial);
  margin-bottom: 1.25rem;
  display: block;
}
.eyebrow.quiet { color: var(--frost-dim); }

.nameplate {
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--glacier);
  line-height: 1;
}

.mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--frost);
}

/* provenance tags: the claim-register label rendered on the number */
.tag {
  display: inline-block;
  font-family: var(--mono);
  font-variation-settings: normal;
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  font-weight: 500;
  padding: 0.2em 0.5em 0.15em;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  color: var(--frost);
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}
.tag.rd { color: var(--dial); border-color: var(--dial-dim); }
.tag.y21 { color: var(--frost); border-style: dashed; }
.tag.sr { color: var(--dial); border-color: var(--dial-dim); border-style: double; }
.tag.todo { color: var(--obsidian); background: var(--dial); border-color: var(--dial); }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 10vw, 150px) 0; border-top: 1px solid var(--seam-soft); }
.section.flush { border-top: 0; }
.section.tight { padding: clamp(40px, 6vw, 80px) 0; }
.section.models { padding-top: 0; padding-bottom: clamp(16px, 2vw, 32px); }
.section.lead-in { padding-bottom: 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .lede { margin-top: 1.25rem; }
.grid { display: grid; gap: clamp(24px, 3vw, 48px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.split.rev { grid-template-columns: 7fr 5fr; }
@media (max-width: 960px) {
  .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.rev { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

/* about page: people */
.people { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.person .role { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); display: block; margin: 6px 0 12px; }
.person p { color: var(--frost); font-size: 0.95rem; }
.placeholder { color: var(--frost-dim); border-left: 2px dashed var(--seam); padding-left: 14px; }
@media (max-width: 880px) { .people { grid-template-columns: 1fr; } }

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--obsidian) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--seam-soft);
}
.masthead .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 24px;
}
.brand img { height: 17px; width: auto; }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand .wordmark-sub {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--frost-dim); text-transform: uppercase; padding-left: 14px; border-left: 1px solid var(--seam);
}
.nav { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 26px); }
.nav a { font-size: 0.625rem; letter-spacing: 0.16em; color: var(--frost); font-weight: 500; transition: color 160ms; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--glacier); }
.nav a.ext::after { content: " \2197"; color: var(--frost-dim); }
.nav .btn { padding: 0.65em 1.1em; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--seam); color: var(--glacier);
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em; padding: 0.6em 0.9em; border-radius: var(--radius);
}
@media (max-width: 880px) {
  .nav-toggle { display: inline-block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch;
         background: var(--obsidian); border-bottom: 1px solid var(--seam); padding: 12px var(--gutter) 20px; gap: 0; }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--seam-soft); font-size: 0.75rem; }
  .nav .btn { margin-top: 14px; text-align: center; }
  .brand .wordmark-sub { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  padding: 1em 1.6em 0.95em;
  border: 1px solid var(--glacier);
  color: var(--glacier);
  border-radius: var(--radius);
  transition: background 180ms, color 180ms, border-color 180ms;
  cursor: pointer;
  background: none;
  font-family: var(--sans);
}
.btn:hover { background: var(--glacier); color: var(--obsidian); }
.btn.primary { background: var(--dial); border-color: var(--dial); color: var(--obsidian); }
.btn.primary:hover { background: #e4b86a; border-color: #e4b86a; }
.btn.ghost { border-color: var(--seam); color: var(--frost); }
.btn.ghost:hover { border-color: var(--glacier); color: var(--glacier); background: none; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 2.25rem; }
.textlink {
  font-family: var(--sans); font-variation-settings: "wdth" 125; text-transform: uppercase; letter-spacing: 0.18em;
  font-size: 0.625rem; font-weight: 500; color: var(--dial); border-bottom: 1px solid var(--dial-dim); padding-bottom: 3px;
}
.textlink:hover { color: var(--glacier); border-color: var(--glacier); }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 6vw, 80px); overflow: hidden; position: relative; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero .display { margin-bottom: 1.75rem; }
.hero-art-col { max-width: 560px; width: 100%; justify-self: end; }
.hero-art { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.hero-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms ease; }
.hero-art canvas.active { opacity: 1; }
.scene-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 10px; }
.scene-caption { font-family: var(--mono); font-size: 0.6875rem; line-height: 1.6; color: var(--frost-dim); margin: 0; min-height: 2.6em; }
.scene-caption span { display: none; }
.scene-caption span.active { display: inline; }
.scene-caption b { font-weight: 500; color: var(--frost); }
.scene-dots { display: flex; gap: 8px; padding-top: 6px; flex: none; }
.scene-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 1px solid var(--frost-dim); background: none; cursor: pointer; transition: background 200ms, border-color 200ms; }
.scene-dots button[aria-pressed="true"] { background: var(--dial); border-color: var(--dial); }
.scene-dots button:hover { border-color: var(--glacier); }
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art-col { max-width: 440px; justify-self: start; margin-top: 8px; }
}

/* ---------- instrument strip (proof numbers) ---------- */
.instruments {
  border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam);
  background: linear-gradient(180deg, var(--graphite) 0%, var(--obsidian) 100%);
}
.instruments .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.instrument { padding: clamp(24px, 3vw, 40px) clamp(14px, 2vw, 28px); border-left: 1px solid var(--seam); }
.instrument:first-child { border-left: 0; padding-left: 0; }
.instrument .value {
  font-family: var(--sans); font-variation-settings: "wdth" 112; font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1; color: var(--dial); letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1;
}
.instrument .value sup { font-size: 0.4em; vertical-align: top; top: 0.4em; position: relative; color: var(--dial-dim); }
.instrument .value .of { font-size: 0.4em; color: var(--dial-dim); margin-left: 0.1em; }
.instrument .value .unit { font-size: 0.4em; color: var(--dial-dim); }
.instrument .label { margin-top: 0.8rem; font-size: 0.875rem; color: var(--glacier); line-height: 1.35; }
.instrument .tag { margin-top: 0.7rem; }
.instruments .wrap.instruments-foot { display: block; padding-top: 12px; padding-bottom: 14px; }
.instruments-foot .mono { color: var(--frost-dim); }
@media (max-width: 880px) {
  .instruments .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .instrument:nth-child(3) { border-left: 0; padding-left: 0; }
  .instrument:nth-child(n+3) { border-top: 1px solid var(--seam); }
}

/* ---------- cards ---------- */
.card {
  border: 1px solid var(--seam); border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 34px);
  background: linear-gradient(180deg, var(--graphite) 0%, rgba(20, 24, 32, 0) 140%);
  display: flex; flex-direction: column; gap: 0.75rem;
  transition: border-color 200ms, transform 200ms;
}
.card:hover { border-color: var(--dial-dim); }
.card .eyebrow { margin-bottom: 0.25rem; }
.card .h3 { font-size: 1.45rem; }
.card p { color: var(--frost); font-size: 0.9625rem; }
.card .foot { margin-top: auto; padding-top: 0.5rem; }
.card.link { cursor: pointer; }
a.card { color: inherit; }

/* ---------- spec sheets ---------- */
.spec { border-top: 1px solid var(--seam); margin-top: 1rem; }
.spec-row {
  display: grid; grid-template-columns: minmax(120px, 2fr) 5fr; gap: 16px;
  padding: 0.7rem 0; border-bottom: 1px solid var(--seam-soft); align-items: baseline;
}
.spec-row dt { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); }
.spec-row dd { margin: 0; font-size: 0.9375rem; color: var(--glacier); }
.spec-row dd .tag { margin-left: 8px; }
.spec-row dd.num { font-variation-settings: "wdth" 112; font-feature-settings: "tnum" 1; }

/* model listing (the models page) */
.model {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px);
  padding: clamp(40px, 5vw, 72px) 0; border-top: 1px solid var(--seam);
}
.model:first-of-type { border-top: 0; }
.model .nameplate { margin-bottom: 0.9rem; }
.model .series { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--frost-dim); text-transform: uppercase; display: block; margin-bottom: 1.4rem; }
.model .h3 { margin-bottom: 0.75rem; }
.model .lede { font-size: 1.0625rem; }
@media (max-width: 880px) { .model { grid-template-columns: 1fr; } }

/* models strip on home */
.models-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--seam); border-left: 1px solid var(--seam); }
.models-strip a {
  border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); padding: 26px 20px 28px;
  display: flex; flex-direction: column; gap: 10px; transition: background 200ms;
}
.models-strip a:hover { background: var(--graphite); }
.models-strip .nameplate { font-size: 1.25rem; }
.models-strip .series { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); }
.models-strip p { font-size: 0.875rem; color: var(--frost); margin: 4px 0 0; }
@media (max-width: 960px) { .models-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .models-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- figures / data tables ---------- */
.figure { margin: 0; }
.figure figcaption { font-family: var(--mono); font-size: 0.6875rem; color: var(--frost-dim); letter-spacing: 0.06em; margin-top: 12px; line-height: 1.6; }
.table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table th, .table td { text-align: left; padding: 0.8rem 0.6rem 0.75rem 0; border-bottom: 1px solid var(--seam-soft); vertical-align: top; }
.table th { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); font-weight: 500; border-bottom-color: var(--seam); }
.table td.num { font-variation-settings: "wdth" 112; font-feature-settings: "tnum" 1; color: var(--glacier); white-space: nowrap; }
.table td { color: var(--frost); }
.table td:first-child { color: var(--glacier); }
.table td.tnum { font-feature-settings: "tnum" 1; color: var(--glacier); min-width: 14ch; }
.table-wrap { overflow-x: auto; }

/* distribution bars */
.dist { display: grid; gap: 18px; }
.dist-row { display: grid; grid-template-columns: 110px 1fr 70px; grid-template-areas: "k bar v" ". note note"; column-gap: 14px; row-gap: 6px; align-items: center; }
.dist-row .k { grid-area: k; } .dist-row .bar { grid-area: bar; } .dist-row .v { grid-area: v; }
.dist-row .note { grid-area: note; font-size: 0.8125rem; line-height: 1.4; color: var(--frost-dim); }
.dist-row .k { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--frost-dim); text-transform: uppercase; }
.dist-row .bar { height: 10px; background: var(--seam-soft); border-radius: 1px; overflow: hidden; }
.dist-row .bar i { display: block; height: 100%; background: var(--dial); width: var(--w); transform-origin: left; animation: grow 900ms cubic-bezier(.2,.7,.2,1) both; }
.dist-row .v { font-variation-settings: "wdth" 112; font-feature-settings: "tnum" 1; color: var(--glacier); text-align: right; }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* quote / statement */
.statement { font-family: var(--head); font-weight: 500; letter-spacing: -0.015em; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.25; max-width: 30ch; text-wrap: balance; }
.statement i { color: var(--dial); font-style: normal; }

/* numbered only where order carries information (the engagement path) */
.path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--seam); }
.path div { padding: 24px 24px 24px 0; border-right: 1px solid var(--seam-soft); margin-right: 24px; }
.path div:last-child { border-right: 0; }
.path .k { font-family: var(--mono); font-size: 0.6875rem; color: var(--dial); letter-spacing: 0.14em; display: block; margin-bottom: 10px; }
.path .h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.path p { font-size: 0.9rem; color: var(--frost); }
@media (max-width: 880px) { .path { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .path { grid-template-columns: 1fr; } .path div { border-right: 0; border-bottom: 1px solid var(--seam-soft); } }

/* partner block */
.partners { border: 1px solid var(--seam); border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); background: var(--graphite); }
.partners ul { list-style: none; padding: 0; margin: 0; }
.partners li { padding: 12px 0; border-bottom: 1px solid var(--seam-soft); display: flex; justify-content: space-between; gap: 16px; font-size: 0.95rem; }
.partners li span:last-child { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); white-space: nowrap; }
@media (max-width: 800px) { .partners { grid-template-columns: 1fr; } }

/* CTA band */
.cta-band { background: var(--graphite); border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
.cta-band .wrap { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; padding-top: clamp(56px, 8vw, 110px); padding-bottom: clamp(56px, 8vw, 110px); }
.cta-band .actions { margin-top: 0; justify-content: flex-end; }
@media (max-width: 880px) { .cta-band .wrap { grid-template-columns: 1fr; } .cta-band .actions { justify-content: flex-start; } }

/* page header (inner pages) */
.page-head { padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 72px); }
.page-head .display { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: 1.5rem; }
.glyph-row { --glyph-gap: clamp(16px, 3vw, 40px); display: grid; grid-template-columns: repeat(6, 108px); justify-content: start; column-gap: var(--glyph-gap); row-gap: 24px; margin-top: clamp(32px, 4vw, 56px); }
.lead-spec { max-width: calc(6 * 108px + 5 * clamp(16px, 3vw, 40px)); border-top: 0; }
.page-head .glyph-row { margin-top: clamp(36px, 5vw, 64px); }
.model { scroll-margin-top: 88px; }
.glyph-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--frost-dim); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; transition: color 160ms; }
.glyph-cell .model-glyph { margin-top: 0; width: 108px; height: 108px; padding: 16px; transition: border-color 160ms, background 160ms; }
.glyph-cell:hover { color: var(--glacier); }
.glyph-cell:hover .model-glyph { border-color: var(--dial-dim); background: var(--graphite); }
@media (max-width: 880px) { .glyph-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.page-head .lede { font-size: clamp(1.1rem, 1.4vw, 1.25rem); }

/* prose */
.prose { max-width: var(--measure); color: var(--frost); }
.prose h2 { font-family: var(--head); font-weight: 500; font-size: 1.7rem; color: var(--glacier); margin: 2.4rem 0 0.8rem; line-height: 1.15; letter-spacing: -0.015em; }
.prose h3 { font-family: var(--head); font-weight: 500; font-size: 1.25rem; color: var(--glacier); margin: 1.8rem 0 0.5rem; }
.prose p strong { color: var(--glacier); }
.prose a { color: var(--glacier); border-bottom: 1px solid var(--seam); }
.prose a:hover { border-color: var(--dial); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }

/* legal page */
.legal { max-width: 72ch; color: var(--frost); font-size: 0.95rem; }
.legal h2, .legal .h2 { font-family: var(--head); font-weight: 500; font-size: 1.4rem; color: var(--glacier); margin: 2.2rem 0 0.6rem; }
.legal p { margin-bottom: 0.8em; }

/* forms */
.form { display: grid; gap: 18px; max-width: 520px; }
.field label { display: block; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--frost-dim); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; background: var(--graphite); border: 1px solid var(--seam); color: var(--glacier);
  font-family: var(--sans); font-size: 1rem; padding: 0.8em 0.9em; border-radius: var(--radius);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--dial); outline-offset: 0; border-color: var(--dial); }
.field .hint { font-size: 0.8125rem; color: var(--frost-dim); margin-top: 6px; }

/* calculator */
.calc { border: 1px solid var(--seam); border-radius: var(--radius); background: var(--graphite); padding: clamp(24px, 3vw, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.calc output { display: block; }
.calc .readout { font-family: var(--sans); font-variation-settings: "wdth" 112; font-weight: 300; font-size: clamp(2.4rem, 4.6vw, 4rem); line-height: 1; color: var(--dial); font-feature-settings: "tnum" 1; }
.calc .readout small { font-size: 0.3em; color: var(--frost); letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--mono); display: block; margin-top: 10px; }
.calc input[type=range] { width: 100%; accent-color: var(--dial); margin: 14px 0; }
.calc .vehicles { font-variation-settings: "wdth" 112; font-size: 2rem; color: var(--glacier); font-feature-settings: "tnum" 1; }
.currency { display: inline-flex; border: 1px solid var(--seam); border-radius: var(--radius); overflow: hidden; }
.currency button { background: none; border: 0; color: var(--frost); font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.12em; padding: 0.6em 0.9em; cursor: pointer; }
.currency button[aria-pressed="true"] { background: var(--glacier); color: var(--obsidian); }
.notice { border-left: 2px solid var(--dial); padding: 10px 16px; background: var(--dial-glow); color: var(--glacier); font-size: 0.9rem; margin: 20px 0; }
@media (max-width: 800px) { .calc { grid-template-columns: 1fr; } }

/* reveal on scroll (quiet) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms ease, transform 700ms ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--seam); padding: clamp(48px, 6vw, 80px) 0 40px; color: var(--frost); font-size: 0.875rem; }
.foot .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 48px; }
.foot h4 { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost-dim); margin-bottom: 14px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 8px; }
.foot a:hover { color: var(--glacier); }
.foot .legal-line { border-top: 1px solid var(--seam-soft); padding-top: 24px; font-size: 0.75rem; color: var(--frost-dim); line-height: 1.7; }
.foot .brand img { height: 14px; margin-bottom: 16px; }
.foot .tagline { max-width: 36ch; }
@media (max-width: 800px) { .foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot .cols { grid-template-columns: 1fr; } }

/* ---------- cookie consent (only on the page when GA_MEASUREMENT_ID is set in tools/build-site.py) ---------- */
.consent {
  position: fixed; left: var(--gutter); bottom: 24px; z-index: 60;
  width: min(440px, calc(100vw - 2 * var(--gutter)));
  padding: 22px 24px 24px;
  background: var(--graphite); border: 1px solid var(--seam); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.consent[hidden] { display: none; }
.consent .eyebrow { display: block; margin-bottom: 10px; }
.consent p { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--frost); }
.consent p a { color: var(--glacier); border-bottom: 1px solid var(--seam); white-space: nowrap; }
.consent p a:hover { border-color: var(--glacier); }
.consent-actions { display: flex; gap: 12px; margin-top: 18px; }
.consent-actions .btn { flex: 1; text-align: center; }
.foot-button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.foot-button:hover { color: var(--glacier); }
@media (max-width: 480px) { .consent { bottom: 12px; padding: 18px 18px 20px; } }
@media print { .consent { display: none !important; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--frost); }
.dim { color: var(--frost-dim); }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }

/* inner pages: the first section sits close under the page head */
.page-head + .section { padding-top: 0; border-top: 0; }
.page-head + .instruments { margin-top: 8px; }

/* ---------- model glyphs (artwork: docs/model-glyphs-preview.html) ---------- */
.model-glyph { display: block; width: 84px; height: 84px; padding: 12px; border: 1px solid var(--seam); background: var(--obsidian); border-radius: 2px; overflow: visible; margin-top: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .model-glyph * { animation: none !important; } }
/* --- 1. IVR7: Dots only -> Draw white tour -> Mid-shift insert & detour --- */
.ivr7-seg-1 {
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: ivr7Seg1 5.2s ease-in-out infinite;
}
.ivr7-seg-2 {
    stroke-dasharray: 18;
    stroke-dashoffset: 18;
    animation: ivr7Seg2 5.2s ease-in-out infinite;
}
.ivr7-seg-3 {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: ivr7Seg3 5.2s ease-in-out infinite;
}
.ivr7-detour {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: ivr7Detour 5.2s ease-in-out infinite;
}
.ivr7-insert-node {
    transform-origin: 28px 23px;
    animation: ivr7InsertNode 5.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.ivr7-ring {
    transform-origin: 28px 23px;
    animation: ivr7PulseRing 5.2s ease-out infinite;
}
@keyframes ivr7Seg1 {
    0%, 10% { stroke-dashoffset: 36; opacity: 0; }
    12% { opacity: 1; }
    22%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ivr7Seg2 {
    0%, 21% { stroke-dashoffset: 18; opacity: 0; }
    23% { opacity: 1; }
    29%, 46% { stroke-dashoffset: 0; opacity: 1; }
    52%, 88% { stroke-dashoffset: 0; opacity: 0.16; }
    96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ivr7Seg3 {
    0%, 28% { stroke-dashoffset: 42; opacity: 0; }
    30% { opacity: 1; }
    40%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ivr7InsertNode {
    0%, 44% { transform: scale(0); opacity: 0; }
    52%, 88% { transform: scale(1); opacity: 1; }
    96%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes ivr7PulseRing {
    0%, 45% { transform: scale(0.5); opacity: 0; }
    50% { opacity: 0.85; }
    72%, 100% { transform: scale(2.4); opacity: 0; }
}
@keyframes ivr7Detour {
    0%, 49% { stroke-dashoffset: 32; opacity: 0; }
    52% { opacity: 1; }
    62%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 32; opacity: 0; }
}

/* --- 2. IVR8: Multi-compartment load + cross-tour dependency --- */
.ivr8-comp-1 { animation: ivr8Comp 4.8s ease-in-out infinite 0s; }
.ivr8-comp-2 { animation: ivr8Comp 4.8s ease-in-out infinite 0.35s; }
.ivr8-comp-3 { animation: ivr8Comp 4.8s ease-in-out infinite 0.7s; }
.ivr8-comp-4 { animation: ivr8Comp 4.8s ease-in-out infinite 1.05s; }
.ivr8-loop-left {
    stroke-dasharray: 68;
    animation: ivr8LoopL 4.8s ease-in-out infinite;
}
.ivr8-dep-arc {
    stroke-dashoffset: 24;
    animation: ivr8DepArc 4.8s linear infinite;
}
.ivr8-loop-right {
    stroke-dasharray: 68;
    animation: ivr8LoopR 4.8s ease-in-out infinite;
}
.ivr8-dep-node {
    animation: ivr8DepNode 4.8s ease-in-out infinite;
}
@keyframes ivr8Comp {
    0%, 15% { opacity: 0.15; }
    28%, 80% { opacity: 0.9; }
    92%, 100% { opacity: 0.15; }
}
@keyframes ivr8LoopL {
    0%, 10% { stroke-dashoffset: 68; stroke: #6b7380; }
    35%, 85% { stroke-dashoffset: 0; stroke: #eceff3; }
    95%, 100% { stroke-dashoffset: 0; stroke: #6b7380; }
}
@keyframes ivr8DepArc {
    0%, 32% { opacity: 0.2; stroke-dashoffset: 24; }
    40%, 82% { opacity: 1; stroke-dashoffset: 0; }
    95%, 100% { opacity: 0.2; stroke-dashoffset: 0; }
}
@keyframes ivr8DepNode {
    0%, 42% { fill: #0b0d11; }
    48%, 82% { fill: #d4a75a; }
    92%, 100% { fill: #0b0d11; }
}
@keyframes ivr8LoopR {
    0%, 45% { stroke-dashoffset: 68; stroke: #6b7380; }
    72%, 85% { stroke-dashoffset: 0; stroke: #d4a75a; }
    95%, 100% { stroke-dashoffset: 0; stroke: #6b7380; }
}

/* --- 3. NDD: Day-of-week selection + daily route projection --- */
.ndd-day-node {
    transform-box: fill-box;
    transform-origin: center;
    animation: nddDaySelect 4.5s ease-in-out infinite;
}
.ndd-drop {
    stroke-dashoffset: 16;
    animation: nddDrop 4.5s linear infinite;
}
.ndd-tour {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: nddTour 4.5s ease-in-out infinite;
}
@keyframes nddDaySelect {
    0%, 12% { transform: scale(0.4); opacity: 0.25; }
    25%, 82% { transform: scale(1); opacity: 1; }
    94%, 100% { transform: scale(0.4); opacity: 0.25; }
}
@keyframes nddDrop {
    0%, 24% { opacity: 0; stroke-dashoffset: 16; }
    42%, 82% { opacity: 1; stroke-dashoffset: 0; }
    94%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes nddTour {
    0%, 38% { stroke-dashoffset: 56; opacity: 0.3; }
    62%, 84% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 56; opacity: 0.3; }
}

/* --- 4. NVD: Dots first -> Draw partition lines -> Rotate/balance --- */
.nvd-seams {
    transform-origin: 24px 24px;
    animation: nvdRotate 5.6s ease-in-out infinite;
}
.nvd-seam-line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: nvdDrawSeams 5.6s ease-in-out infinite;
}
.nvd-hub-dot {
    transform-origin: 24px 24px;
    animation: nvdHubDot 5.6s ease-in-out infinite;
}
.nvd-c1 { animation: nvdCentroid1 5.6s ease-in-out infinite; }
.nvd-c2 { animation: nvdCentroid2 5.6s ease-in-out infinite; }
.nvd-c3 { animation: nvdCentroid3 5.6s ease-in-out infinite; }
@keyframes nvdDrawSeams {
    0%, 18% { stroke-dashoffset: 20; opacity: 0; }
    22% { opacity: 1; }
    42%, 86% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 20; opacity: 0; }
}
@keyframes nvdHubDot {
    0%, 16% { transform: scale(0); opacity: 0; }
    24%, 86% { transform: scale(1); opacity: 1; }
    95%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes nvdRotate {
    0%, 42% { transform: rotate(-14deg); }
    64% { transform: rotate(6deg); }
    78%, 88% { transform: rotate(0deg); }
    96%, 100% { transform: rotate(-14deg); }
}
@keyframes nvdCentroid1 {
    0%, 40% { transform: translate(-2px, 2px); }
    64% { transform: translate(1px, -1px); }
    78%, 90% { transform: translate(0, 0); }
    100% { transform: translate(-2px, 2px); }
}
@keyframes nvdCentroid2 {
    0%, 40% { transform: translate(2px, 1.5px); }
    64% { transform: translate(-1px, -1px); }
    78%, 90% { transform: translate(0, 0); }
    100% { transform: translate(2px, 1.5px); }
}
@keyframes nvdCentroid3 {
    0%, 40% { transform: translate(1.5px, -2px); }
    64% { transform: translate(-1px, 1px); }
    78%, 90% { transform: translate(0, 0); }
    100% { transform: translate(1.5px, -2px); }
}

/* --- 5. ISR: Continuous orthogonal street-segment sweep --- */
.isr-sweep {
    stroke-dasharray: 148;
    stroke-dashoffset: 148;
    animation: isrSweep 4.6s ease-in-out infinite;
}
@keyframes isrSweep {
    0%, 8% { stroke-dashoffset: 148; }
    76%, 88% { stroke-dashoffset: 0; }
    98%, 100% { stroke-dashoffset: -148; }
}

/* --- 6. NS3: 3-tier network flow (Production -> Hub -> Consumption) --- */
.ns3-flow {
    stroke-dasharray: 6 5;
    animation: ns3Flow 1.8s linear infinite;
}
.ns3-hub {
    transform-origin: 24px 14px;
    animation: ns3HubPulse 2.4s ease-in-out infinite;
}
@keyframes ns3Flow {
    from { stroke-dashoffset: 22; }
    to { stroke-dashoffset: 0; }
}
@keyframes ns3HubPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.16); }
}

/* =========================================================
   NVD EXPLORER — 5 ADDITIONAL ANIMATED CONCEPTS
   ========================================================= */
/* Option A: 3 Organic Territory Cluster Hulls (Dots -> Hulls wrap -> Contested stop swaps) */
.nvda-hull-1 {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: nvdaHull 5.2s ease-in-out infinite;
}
.nvda-hull-2 {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: nvdaHull 5.2s ease-in-out infinite 0.25s;
}
.nvda-hull-3 {
    stroke-dasharray: 52;
    stroke-dashoffset: 52;
    animation: nvdaHull 5.2s ease-in-out infinite 0.5s;
}
@keyframes nvdaHull {
    0%, 15% { stroke-dashoffset: 52; opacity: 0; }
    20% { opacity: 1; }
    45%, 85% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 52; opacity: 0; }
}

/* Option B: Radial Starburst Territory Assignment (Reps claim nearby stops) */
.nvdb-spoke {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: nvdbSpoke 4.8s ease-in-out infinite;
}
.nvdb-swap-dot {
    animation: nvdbSwapDot 4.8s ease-in-out infinite;
}
@keyframes nvdbSpoke {
    0%, 18% { stroke-dashoffset: 14; opacity: 0; }
    24% { opacity: 1; }
    46%, 85% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 14; opacity: 0; }
}
@keyframes nvdbSwapDot {
    0%, 48% { fill: #6b7380; r: 1.6px; }
    56%, 85% { fill: #d4a75a; r: 2.3px; }
    95%, 100% { fill: #6b7380; r: 1.6px; }
}

/* Option C: Pareto Frontier Curve (Cost vs. Balance Knee Selection) */
.nvdc-curve {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: nvdcCurve 5s ease-in-out infinite;
}
.nvdc-knee {
    transform-origin: 21px 27px;
    animation: nvdcKnee 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.nvdc-ring {
    transform-origin: 21px 27px;
    animation: nvdcRing 5s ease-out infinite;
}
@keyframes nvdcCurve {
    0%, 12% { stroke-dashoffset: 48; opacity: 0.2; }
    38%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 48; opacity: 0.2; }
}
@keyframes nvdcKnee {
    0%, 40% { transform: scale(0); opacity: 0; }
    50%, 88% { transform: scale(1); opacity: 1; }
    96%, 100% { transform: scale(0); opacity: 0; }
}
@keyframes nvdcRing {
    0%, 42% { transform: scale(0.5); opacity: 0; }
    48% { opacity: 0.85; }
    72%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Option D: Multi-Day Petal / Daisy Loops from Rep Base (Mon/Tue/Wed petals) */
.nvdd-petal-1 {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: nvddPetal1 5.2s ease-in-out infinite;
}
.nvdd-petal-2 {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: nvddPetal2 5.2s ease-in-out infinite;
}
.nvdd-petal-3 {
    stroke-dasharray: 42;
    stroke-dashoffset: 42;
    animation: nvddPetal3 5.2s ease-in-out infinite;
}
@keyframes nvddPetal1 {
    0%, 10% { stroke-dashoffset: 42; opacity: 0; }
    14% { opacity: 1; }
    32%, 86% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 42; opacity: 0; }
}
@keyframes nvddPetal2 {
    0%, 28% { stroke-dashoffset: 42; opacity: 0; }
    32% { opacity: 1; }
    50%, 86% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 42; opacity: 0; }
}
@keyframes nvddPetal3 {
    0%, 46% { stroke-dashoffset: 42; opacity: 0; }
    50% { opacity: 1; }
    68%, 86% { stroke-dashoffset: 0; opacity: 1; }
    95%, 100% { stroke-dashoffset: 42; opacity: 0; }
}

/* Option E: Shifting Territory Boundary (Contested stop re-balanced across border) */
.nvde-border {
    animation: nvdeBorder 4.8s ease-in-out infinite;
}
.nvde-border-Stop {
    animation: nvdeStopColor 4.8s ease-in-out infinite;
}
.nvde-link-old {
    animation: nvdeLinkOld 4.8s ease-in-out infinite;
}
.nvde-link-new {
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
    animation: nvdeLinkNew 4.8s ease-in-out infinite;
}
@keyframes nvdeBorder {
    0%, 35% { transform: translateX(3px); }
    55%, 86% { transform: translateX(-3px); }
    96%, 100% { transform: translateX(3px); }
}
@keyframes nvdeStopColor {
    0%, 40% { stroke: #eceff3; fill: #0b0d11; }
    52%, 86% { stroke: #d4a75a; fill: #d4a75a; }
    96%, 100% { stroke: #eceff3; fill: #0b0d11; }
}
@keyframes nvdeLinkOld {
    0%, 38% { opacity: 0.9; }
    48%, 88% { opacity: 0; }
    96%, 100% { opacity: 0.9; }
}
@keyframes nvdeLinkNew {
    0%, 45% { stroke-dashoffset: 16; opacity: 0; }
    50% { opacity: 1; }
    65%, 86% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 16; opacity: 0; }
}

/* =========================================================
   NDD ISOMETRIC EXPLORER — 6 VARIATIONS OF ROUTES ON EACH LAYER
   ========================================================= */
/* Iso 1: Sequential Cascade (Route draws on Layer 1 -> Layer 2 Amber -> Layer 3) */
.iso1-r1 {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: iso1R1 5.4s ease-in-out infinite;
}
.iso1-r2 {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: iso1R2 5.4s ease-in-out infinite;
}
.iso1-r3 {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: iso1R3 5.4s ease-in-out infinite;
}
@keyframes iso1R1 {
    0%, 8% { stroke-dashoffset: 44; opacity: 0.15; }
    12% { opacity: 1; }
    28%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 44; opacity: 0.15; }
}
@keyframes iso1R2 {
    0%, 26% { stroke-dashoffset: 44; opacity: 0.15; }
    30% { opacity: 1; }
    48%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 44; opacity: 0.15; }
}
@keyframes iso1R3 {
    0%, 46% { stroke-dashoffset: 44; opacity: 0.15; }
    50% { opacity: 1; }
    68%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 44; opacity: 0.15; }
}

/* Iso 2: Orders drop to nominated layer -> All 3 layers draw their route simultaneously */
.iso2-drop {
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: iso2Drop 5.2s ease-in-out infinite;
}
.iso2-loop {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: iso2Loop 5.2s ease-in-out infinite;
}
@keyframes iso2Drop {
    0%, 10% { stroke-dashoffset: 14; opacity: 0; }
    15%, 42% { stroke-dashoffset: 0; opacity: 0.9; }
    55%, 88% { stroke-dashoffset: 0; opacity: 0.25; }
    96%, 100% { stroke-dashoffset: 14; opacity: 0; }
}
@keyframes iso2Loop {
    0%, 34% { stroke-dashoffset: 44; opacity: 0; }
    38% { opacity: 1; }
    62%, 88% { stroke-dashoffset: 0; opacity: 1; }
    96%, 100% { stroke-dashoffset: 44; opacity: 0; }
}

/* Iso 3: Frameless 3D Route Stack (No heavy plane boxes—the 3 isometric route loops ARE the layers) */
.iso3-l1 {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: iso1R1 5.2s ease-in-out infinite;
}
.iso3-l2 {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: iso1R2 5.2s ease-in-out infinite;
}
.iso3-l3 {
    stroke-dasharray: 56;
    stroke-dashoffset: 56;
    animation: iso1R3 5.2s ease-in-out infinite;
}

/* Iso 4: Continuous Synchronized Pulse Around All 3 Layer Loops */
.iso4-flow {
    stroke-dasharray: 10 8;
    animation: iso4Flow 2.2s linear infinite;
}
@keyframes iso4Flow {
    from { stroke-dashoffset: 36; }
    to { stroke-dashoffset: 0; }
}

/* Iso 5: Vertical Elevator Scan Across the 3 Route Layers */
.iso5-layer-1 { animation: iso5Highlight1 4.8s ease-in-out infinite; }
.iso5-layer-2 { animation: iso5Highlight2 4.8s ease-in-out infinite; }
.iso5-layer-3 { animation: iso5Highlight3 4.8s ease-in-out infinite; }
@keyframes iso5Highlight1 {
    0%, 28% { stroke: #d4a75a; stroke-width: 1.85; opacity: 1; }
    33%, 100% { stroke: #98a1ad; stroke-width: 1.35; opacity: 0.55; }
}
@keyframes iso5Highlight2 {
    0%, 30% { stroke: #98a1ad; stroke-width: 1.35; opacity: 0.55; }
    33%, 62% { stroke: #d4a75a; stroke-width: 1.85; opacity: 1; }
    67%, 100% { stroke: #98a1ad; stroke-width: 1.35; opacity: 0.55; }
}
@keyframes iso5Highlight3 {
    0%, 64% { stroke: #98a1ad; stroke-width: 1.35; opacity: 0.55; }
    67%, 95% { stroke: #d4a75a; stroke-width: 1.85; opacity: 1; }
    100% { stroke: #98a1ad; stroke-width: 1.35; opacity: 0.55; }
}

/* Glyphs rest on their finished frame and play only while hovered. The negative delays park each
   animation at about 80% of its cycle (paused); site.js restarts them on mouseenter/mouseleave. */
.model-glyph * { animation-play-state: paused !important; }
.model-glyph .ivr7-seg-1, .model-glyph .ivr7-seg-2, .model-glyph .ivr7-seg-3, .model-glyph .ivr7-detour, .model-glyph .ivr7-insert-node, .model-glyph .ivr7-ring { animation-delay: -4.2s; }
.model-glyph .ivr8-comp-1, .model-glyph .ivr8-comp-2, .model-glyph .ivr8-comp-3, .model-glyph .ivr8-comp-4, .model-glyph .ivr8-loop-left, .model-glyph .ivr8-dep-arc, .model-glyph .ivr8-loop-right, .model-glyph .ivr8-dep-node { animation-delay: -3.7s; }
.model-glyph .ndd-day-node, .model-glyph .ndd-drop, .model-glyph .ndd-tour { animation-delay: -3.5s; }
.model-glyph .iso1-r1, .model-glyph .iso1-r2, .model-glyph .iso1-r3 { animation-delay: -4.3s; }
.model-glyph .nvd-seams, .model-glyph .nvd-seam-line, .model-glyph .nvd-hub-dot, .model-glyph .nvd-c1, .model-glyph .nvd-c2, .model-glyph .nvd-c3 { animation-delay: -4.6s; }
.model-glyph .nvde-border, .model-glyph .nvde-border-Stop, .model-glyph .nvde-link-old, .model-glyph .nvde-link-new { animation-delay: -3.75s; }
.model-glyph .isr-sweep { animation-delay: -3.8s; }
.model-glyph .ns3-flow { animation-delay: -1s; }
.model-glyph .ns3-hub { animation-delay: 0s; }
.model-glyph.glyph-playing * { animation-play-state: running !important; animation-delay: 0s; }
.model-glyph.glyph-playing .ivr8-comp-2 { animation-delay: 0.35s; }
.model-glyph.glyph-playing .ivr8-comp-3 { animation-delay: 0.7s; }
.model-glyph.glyph-playing .ivr8-comp-4 { animation-delay: 1.05s; }