:root {
  color-scheme: light;
  --paper: #f4f6f5;
  --paper-deep: #e9edec;
  --ink: #151a1b;
  --ink-soft: #444d50;
  --muted: #657174;
  --line: #cdd4d4;
  --line-soft: rgba(75, 91, 94, 0.14);
  --cyan: #4baf96;
  --cyan-dark: #225a50;
  --cyan-wash: rgba(75, 175, 150, 0.08);
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --max: 1440px;
  --header-surface: rgba(244, 246, 245, 0.92);
  --header-surface-scrolled: rgba(244, 246, 245, 0.965);
  --card-surface: rgba(244, 246, 245, .76);
  --action-surface: rgba(244, 246, 245, .72);
  --grid-line: rgba(80, 95, 98, 0.032);
  --shadow: rgba(24, 54, 58, .08);
}

:root[data-theme="light"] {
  color-scheme: only light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0b1113;
  --paper-deep: #111a1d;
  --ink: #edf4f3;
  --ink-soft: #b8c5c6;
  --muted: #8f9fa2;
  --line: #344347;
  --line-soft: rgba(167, 190, 194, .16);
  --cyan: #74c6ae;
  --cyan-dark: #74c6ae;
  --cyan-wash: rgba(116, 198, 174, .12);
  --header-surface: rgba(11, 17, 19, .9);
  --header-surface-scrolled: rgba(11, 17, 19, .97);
  --card-surface: rgba(17, 26, 29, .82);
  --action-surface: rgba(17, 26, 29, .8);
  --grid-line: rgba(173, 198, 201, .045);
  --shadow: rgba(0, 0, 0, .32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #0b1113;
    --paper-deep: #111a1d;
    --ink: #edf4f3;
    --ink-soft: #b8c5c6;
    --muted: #8f9fa2;
    --line: #344347;
    --line-soft: rgba(167, 190, 194, .16);
    --cyan: #74c6ae;
    --cyan-dark: #74c6ae;
    --cyan-wash: rgba(116, 198, 174, .12);
    --header-surface: rgba(11, 17, 19, .9);
    --header-surface-scrolled: rgba(11, 17, 19, .97);
    --card-surface: rgba(17, 26, 29, .82);
    --action-surface: rgba(17, 26, 29, .8);
    --grid-line: rgba(173, 198, 201, .045);
    --shadow: rgba(0, 0, 0, .32);
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
}
html.is-jumping { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a { color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--cyan-dark);
  outline-offset: 5px;
}

[tabindex="-1"]:focus { outline: none; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 24px));
  transition: opacity 160ms ease, transform 160ms ease;
}

.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

.mono, .eyebrow, .overline { font-family: var(--mono); }

.site-shell {
  width: min(calc(100% - 32px), var(--max));
  margin: 16px auto;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--paper);
  background-size: 64px 64px;
}

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 84px;
  padding: 0 clamp(24px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: var(--header-surface);
  backdrop-filter: blur(16px);
}

.wordmark {
  justify-self: start;
  display: block;
  text-decoration: none;
}

.brand-lockup-frame {
  display: block;
  width: clamp(132px, 11vw, 152px);
  aspect-ratio: 604 / 316;
}

.brand-lockup-frame img {
  width: 100%;
  height: auto;
}

:root[data-theme="dark"] .brand-lockup-frame img,
:root[data-theme="dark"] .brand-mark-frame img,
:root[data-theme="dark"] .hero-brand-frame img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .brand-lockup-frame img,
  :root:not([data-theme]) .brand-mark-frame img,
  :root:not([data-theme]) .hero-brand-frame img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }
}

.brand-mark-frame {
  display: block;
  width: clamp(24px, 2.1vw, 30px);
  aspect-ratio: 555 / 706;
}

.brand-mark-frame img,
.hero-brand-frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.site-nav { display: flex; gap: 36px; }

.site-nav a {
  position: relative;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--cyan-dark);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.is-active::after { transform: scaleX(1); }

.site-nav a.is-active { color: var(--ink); }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
}

.language-switch {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 4px;
  color: var(--line);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
}

.language-switch button {
  min-width: 25px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color 180ms ease;
}

.language-switch button:hover,
.language-switch button:focus-visible,
.language-switch button[aria-pressed="true"] { color: var(--ink); }

.language-switch button[aria-pressed="true"] {
  text-decoration: underline;
  text-decoration-color: var(--cyan-dark);
  text-underline-offset: 6px;
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 5px;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle-track {
  position: relative;
  display: block;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-deep);
  transition: border-color 180ms ease, background-color 180ms ease;
}

.theme-toggle-thumb {
  position: absolute;
  z-index: 2;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cyan-dark);
  box-shadow: 0 0 0 3px var(--cyan-wash);
  transition: transform 220ms var(--ease-out), background-color 180ms ease, box-shadow 180ms ease;
}

.theme-toggle-sun,
.theme-toggle-moon {
  position: absolute;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: .48;
}

.theme-toggle-sun { left: 7px; border: 1px solid var(--ink-soft); }
.theme-toggle-moon { right: 7px; border: 1px solid var(--ink-soft); }
.theme-toggle-moon::after { position: absolute; top: -2px; left: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--paper-deep); content: ""; }
.theme-toggle-status { font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.theme-toggle:hover { color: var(--ink); }
.theme-toggle:hover .theme-toggle-track { border-color: var(--cyan-dark); }
:root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(18px); }
.no-js .theme-toggle { display: none; }

.header-index {
  justify-self: end;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.menu-toggle { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  min-height: clamp(680px, 75vw, 880px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 44%, rgba(75, 175, 150, 0.065), transparent 32%);
  content: "";
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 80px clamp(28px, 6vw, 92px);
}

.hero-brand-frame {
  display: block;
  width: clamp(210px, 29vw, 390px);
  aspect-ratio: 604 / 316;
  margin: 0 0 clamp(32px, 4vw, 54px);
}

.eyebrow {
  display: flex;
  gap: 28px;
  margin: 0 0 38px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.eyebrow span:first-child { color: var(--cyan-dark); }

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 780px;
  margin-bottom: 34px;
  font-size: clamp(56px, 6.8vw, 106px);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.94;
}

h1 { color: var(--ink-soft); }
h1 span { color: var(--ink); }

.hero-intro {
  max-width: 540px;
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(19px, 1.75vw, 25px);
  font-weight: 350;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.radar-field {
  --radar-angle: 18deg;
  position: relative;
  align-self: center;
  aspect-ratio: 1;
  width: min(92%, 620px);
  justify-self: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.radar-field.is-tracking {
  border-color: rgba(34, 90, 80, 0.34);
  box-shadow: 0 0 48px rgba(75, 175, 150, 0.06);
}

.radar-orbit, .radar-axis, .radar-sweep, .radar-center, .radar-point { position: absolute; }

.radar-orbit { inset: 12%; border: 1px solid var(--line); border-radius: 50%; }
.orbit-b { inset: 29%; }
.orbit-c { inset: 45%; }
.radar-axis { background: var(--line-soft); }
.axis-x { top: 50%; right: 0; left: 0; height: 1px; }
.axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }

.radar-sweep {
  inset: 0 50% 50% 0;
  border-right: 1px solid rgba(34, 90, 80, 0.4);
  background: linear-gradient(45deg, transparent 46%, rgba(75, 175, 150, 0.12));
  transform: rotate(var(--radar-angle));
  transform-origin: 100% 100%;
  transition: transform 140ms ease-out;
}

.radar-center {
  top: calc(50% - 4px);
  left: calc(50% - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan-dark);
  box-shadow: 0 0 0 7px var(--cyan-wash);
}

.radar-point { display: flex; align-items: center; gap: 8px; }
.radar-point i { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px var(--cyan-wash); }
.radar-point b { color: var(--cyan-dark); font-family: var(--mono); font-size: 9px; font-weight: 400; }
.point-a { top: 25%; left: 64%; }
.point-b { top: 68%; left: 29%; }
.point-c { top: 52%; left: 81%; }
.point-d { top: 33%; left: 33%; }
.radar-coordinate { position: absolute; color: var(--muted); font-size: 9px; letter-spacing: 0.08em; }
.coord-a { top: 8%; left: 52%; }
.coord-b { right: 7%; bottom: 20%; }

.hero-meta {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-meta span { padding: 16px clamp(28px, 4vw, 64px); border-right: 1px solid var(--line); }
.hero-meta span:last-child { border-right: 0; }

.section-grid {
  display: grid;
  grid-template-columns: minmax(130px, 0.23fr) minmax(0, 0.77fr);
  padding: clamp(88px, 11vw, 160px) clamp(28px, 6vw, 92px);
  border-bottom: 1px solid var(--line);
}

.section-marker {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-marker span { display: block; margin-bottom: 10px; color: var(--cyan-dark); }
.section-marker b { font-weight: inherit; }

.manifesto-copy { max-width: 1020px; }

.manifesto h2 {
  margin-bottom: 42px;
  font-size: clamp(42px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.manifesto h2 span { color: var(--cyan-dark); }

.manifesto-copy > p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.45;
}

.signal-plot { position: relative; grid-column: 2; margin-top: 90px; }
.signal-plot svg { display: block; width: 100%; overflow: visible; }
.plot-line { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.plot-muted { stroke: var(--line); }
.plot-active { stroke: var(--cyan-dark); stroke-dasharray: 160 1000; stroke-dashoffset: 0; }
.plot-label { position: absolute; right: 0; bottom: -26px; color: var(--muted); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }

.section-heading { max-width: 780px; }
.overline { margin-bottom: 24px; color: var(--cyan-dark); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase; }
.section-heading h2, .principles-intro h2 {
  margin-bottom: 0;
  font-size: clamp(42px, 4.4vw, 68px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1.08;
}

.products { position: relative; overflow: hidden; }
.products-heading > p:last-child { max-width: 650px; margin: 34px 0 0; color: var(--ink-soft); font-size: 18px; }
.product-list { display: grid; grid-column: 2; gap: 22px; margin-top: 78px; }
.product-card {
  --product-accent: var(--cyan-dark);
  --product-accent-soft: var(--cyan-wash);
  --product-status: var(--product-accent);
  --product-status-soft: var(--product-accent-soft);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-surface);
}
.product-party { --product-accent: #6559c7; --product-accent-soft: rgba(101, 89, 199, .08); --product-status: #7665e8; --product-status-soft: rgba(118, 101, 232, .17); }
.product-gig { --product-accent: #a45a2b; --product-accent-soft: rgba(164, 90, 43, .08); --product-status: #ce6b2d; --product-status-soft: rgba(206, 107, 45, .17); }
:root[data-theme="dark"] .product-party { --product-accent: #b4aaff; --product-accent-soft: rgba(180, 170, 255, .13); --product-status: #c2b9ff; --product-status-soft: rgba(194, 185, 255, .2); }
:root[data-theme="dark"] .product-gig { --product-accent: #f0a36f; --product-accent-soft: rgba(240, 163, 111, .13); --product-status: #ffad73; --product-status-soft: rgba(255, 173, 115, .2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .product-party { --product-accent: #b4aaff; --product-accent-soft: rgba(180, 170, 255, .13); --product-status: #c2b9ff; --product-status-soft: rgba(194, 185, 255, .2); }
  :root:not([data-theme]) .product-gig { --product-accent: #f0a36f; --product-accent-soft: rgba(240, 163, 111, .13); --product-status: #ffad73; --product-status-soft: rgba(255, 173, 115, .2); }
}
.product-copy { position: relative; z-index: 2; padding: clamp(38px, 5vw, 66px); }
.product-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 68px; color: var(--product-accent); font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.product-state { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-align: right; }
.product-state i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--product-status); box-shadow: 0 0 0 5px var(--product-status-soft); }
.product-card h3 { margin-bottom: 20px; font-size: clamp(48px, 5vw, 72px); font-weight: 400; letter-spacing: -.06em; line-height: .96; }
.product-lede { max-width: 500px; margin-bottom: 24px; color: var(--ink); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; line-height: 1.35; }
.product-detail { max-width: 560px; margin-bottom: 34px; color: var(--ink-soft); font-size: 16px; line-height: 1.65; }
.product-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 320px; margin: 0; padding: 0; list-style: none; }
.product-tags li { display: flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.product-visual { position: relative; min-width: 0; overflow: hidden; border-left: 1px solid var(--line); background: linear-gradient(145deg, var(--product-accent-soft), transparent 68%); }
.visual-label { position: absolute; right: 22px; bottom: 24px; color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.product-foot { position: relative; z-index: 2; display: flex; grid-column: 1 / -1; justify-content: space-between; gap: 24px; padding: 14px clamp(38px, 5vw, 66px); border-top: 1px solid var(--line); color: var(--muted); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.product-foot span:last-child { color: var(--product-accent); text-align: right; }

.party-signal::before, .party-signal::after { position: absolute; border: 1px solid color-mix(in srgb, var(--product-accent) 25%, transparent); border-radius: 50%; content: ""; }
.party-signal::before { width: 104%; aspect-ratio: 1; top: -2%; left: -18%; }
.party-signal::after { width: 52%; aspect-ratio: 1; top: 24%; left: 8%; }
.party-orbit { position: absolute; border: 1px solid color-mix(in srgb, var(--product-accent) 18%, transparent); border-radius: 50%; }
.party-orbit-a { width: 74%; aspect-ratio: 1; top: 13%; left: -3%; }
.party-orbit-b { width: 28%; aspect-ratio: 1; top: 36%; left: 20%; background: var(--product-accent-soft); }
.party-core { position: absolute; width: 10px; height: 10px; top: 49%; left: 34%; border-radius: 50%; background: var(--product-accent); box-shadow: 0 0 0 12px var(--product-accent-soft); }
.party-beat { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--product-accent); box-shadow: 0 0 0 6px var(--product-accent-soft); }
.beat-a { top: 22%; right: 20%; }
.beat-b { right: 10%; bottom: 32%; }
.beat-c { top: 67%; left: 15%; }

.gig-signal { background: linear-gradient(155deg, transparent 32%, var(--product-accent-soft)); }
.gig-signal::before { position: absolute; inset: 0; background: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px); background-size: 48px 48px; content: ""; opacity: .58; }
.venue-line { position: absolute; height: 1px; background: color-mix(in srgb, var(--product-accent) 42%, transparent); transform-origin: left; }
.line-a { width: 62%; top: 34%; left: 13%; transform: rotate(24deg); }
.line-b { width: 56%; top: 61%; left: 33%; transform: rotate(-21deg); }
.venue-node { position: absolute; width: 9px; height: 9px; border: 2px solid var(--product-accent); border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 7px var(--product-accent-soft); }
.venue-a { top: 31%; left: 13%; }
.venue-b { top: 47%; left: 45%; }
.venue-c { top: 61%; right: 20%; }
.venue-d { right: 10%; bottom: 22%; }
.venue-sweep { position: absolute; width: 1px; top: 12%; bottom: 12%; left: 28%; background: linear-gradient(transparent, var(--product-accent), transparent); opacity: .55; }

.approach-list { grid-column: 2; margin-top: 86px; border-top: 1px solid var(--line); }
.approach-item {
  display: grid;
  grid-template-columns: 80px 1fr 128px;
  align-items: center;
  min-height: 240px;
  padding: 38px 0;
  border-bottom: 1px solid var(--line);
}

.item-number { align-self: start; padding-top: 8px; color: var(--muted); font-size: 10px; }
.approach-item h3 { margin-bottom: 10px; font-size: clamp(30px, 3vw, 45px); font-weight: 400; letter-spacing: -0.04em; }
.approach-item p { max-width: 760px; margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.item-glyph { position: relative; width: 100px; height: 100px; justify-self: end; }
.item-glyph i { position: absolute; display: block; border-radius: 50%; }
.glyph-discovery i { inset: 12px; border: 1px solid var(--line); }
.glyph-discovery i:nth-child(2) { inset: 30px; }
.glyph-discovery i:nth-child(3) { inset: 45px; border: 0; background: var(--cyan); box-shadow: 0 0 0 7px var(--cyan-wash); }
.glyph-connection i { top: 46px; width: 9px; height: 9px; background: var(--cyan-dark); }
.glyph-connection i:first-child { left: 4px; }
.glyph-connection i:nth-child(2) { left: 46px; }
.glyph-connection i:nth-child(3) { right: 4px; }
.glyph-connection::before { position: absolute; top: 50px; left: 10px; width: 80px; height: 1px; background: var(--line); content: ""; }
.glyph-delivery i { top: 23px; right: 22px; bottom: 23px; left: 22px; border: 1px solid var(--line); }
.glyph-delivery i:nth-child(2) { inset: 37px; border-color: var(--cyan-dark); }
.glyph-delivery i:nth-child(3) { inset: 47px; border: 0; background: var(--cyan); }

.principles { position: relative; grid-template-rows: auto 1fr; min-height: 800px; overflow: hidden; }
.principles-intro { grid-column: 2; max-width: 700px; }
.principles-intro > p:last-child { max-width: 580px; margin: 38px 0 0; color: var(--ink-soft); font-size: 18px; }
.principle-map { position: relative; grid-column: 2; width: min(100%, 790px); aspect-ratio: 2/1; margin-top: 90px; }
.map-ring { position: absolute; top: 50%; left: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%, -50%); }
.ring-1 { width: 18%; aspect-ratio: 1; border-color: var(--cyan-dark); background: var(--cyan-wash); }
.ring-2 { width: 48%; aspect-ratio: 1; }
.ring-3 { width: 82%; aspect-ratio: 1; }
.map-node, .map-core { position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; }
.map-node::before { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px var(--cyan-wash); content: ""; vertical-align: 1px; }
.node-design { top: 48%; left: 7%; }
.node-function { top: 9%; left: 56%; }
.node-intelligence { right: 1%; bottom: 14%; }
.map-core { top: 50%; left: 50%; color: var(--cyan-dark); transform: translate(-50%, -50%); }

.closing {
  position: relative;
  display: flex;
  min-height: 720px;
  padding: clamp(90px, 12vw, 170px) clamp(28px, 6vw, 92px);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.closing-grid {
  position: absolute;
  top: 50%; left: 50%;
  width: min(68vw, 900px);
  aspect-ratio: 1;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 120px rgba(75, 175, 150, 0.018), 0 0 0 240px rgba(75, 175, 150, 0.012);
  transform: translate(-50%, -50%);
}

.closing .overline, .closing h2, .internal-action { position: relative; z-index: 1; }
.closing h2 { max-width: 980px; margin-bottom: 56px; font-size: clamp(42px, 5.5vw, 82px); font-weight: 400; letter-spacing: -0.06em; line-height: 1.06; }
.closing h2 span { color: var(--cyan-dark); }
.internal-action { display: inline-flex; align-items: center; gap: 13px; padding: 13px 16px; border: 1px solid var(--line); background: var(--action-surface); color: var(--ink-soft); font-size: 13px; text-decoration: none; transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease; }
.internal-action:hover { border-color: var(--cyan-dark); background: var(--cyan-wash); color: var(--ink); }
.internal-action .mono { margin-left: 7px; padding-left: 20px; border-left: 1px solid var(--line); color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-dark); box-shadow: 0 0 0 5px var(--cyan-wash); }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; min-height: 130px; padding: 24px clamp(28px, 6vw, 92px); border-top: 1px solid var(--line); }
.site-footer p { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.site-footer p:last-child { font-size: 9px; letter-spacing: .08em; text-align: right; text-transform: uppercase; }

[data-reveal] { opacity: 1; transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 620ms ease, transform 620ms ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .site-shell { width: calc(100% - 20px); margin: 10px auto; }
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; padding: 0 22px; }
  .header-index { display: none; }
  .theme-toggle-status { display: none; }
  .header-actions { gap: 11px; }
  .js .menu-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 10px 0; border: 0; background: transparent; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
  .menu-lines { position: relative; width: 17px; height: 8px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
  .site-nav { position: absolute; top: 71px; right: -1px; left: -1px; display: none; padding: 26px 22px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 18px 34px var(--shadow); }
  .site-nav.is-open { display: flex; }
  .no-js .site-header { grid-template-columns: 1fr; gap: 18px; padding-top: 20px; padding-bottom: 20px; }
  .no-js .site-nav { position: static; display: flex; flex-wrap: wrap; width: 100%; padding: 0; border: 0; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 52px; }
  .hero-copy { padding: 82px 28px 48px; }
  h1 { font-size: clamp(52px, 14vw, 78px); }
  .radar-field { width: min(88vw, 540px); margin: 0 auto 44px; }
  .hero-meta { position: static; }
  .section-grid { grid-template-columns: 1fr; }
  .section-marker { margin-bottom: 54px; }
  .signal-plot, .product-list, .approach-list, .principles-intro, .principle-map { grid-column: 1; }
  .product-card { grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr); }
  .site-footer { grid-template-columns: 1fr; gap: 18px; padding-top: 36px; padding-bottom: 36px; text-align: center; }
  .site-footer .wordmark, .site-footer p:last-child { justify-self: center; text-align: center; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 88px; }
  .site-shell { width: 100%; margin: 0; border-width: 0; }
  .site-header { position: sticky; top: 0; min-height: 64px; padding-right: 12px; padding-left: 12px; }
  .site-nav { top: 71px; }
  .site-nav.is-open { flex-direction: column; gap: 28px; }
  .hero-copy { padding-top: 54px; }
  .hero-brand-frame { width: min(78vw, 300px); margin-bottom: 34px; }
  .eyebrow { flex-direction: column; gap: 8px; margin-bottom: 30px; }
  h1 { font-size: clamp(47px, 14vw, 67px); }
  .hero-intro { font-size: 18px; }
  .radar-field { width: 86vw; }
  .hero-meta span { padding: 13px 8px; text-align: center; }
  .section-grid { padding: 82px 24px; }
  .manifesto h2, .section-heading h2, .principles-intro h2 { font-size: 40px; }
  .manifesto-copy > p { font-size: 19px; }
  .signal-plot { margin-top: 62px; }
  .product-list { gap: 16px; margin-top: 58px; }
  .product-card { grid-template-columns: 1fr; }
  .product-copy { padding: 34px 24px 38px; }
  .product-kicker { align-items: flex-start; margin-bottom: 48px; }
  .product-card h3 { font-size: 50px; }
  .product-lede { font-size: 20px; }
  .product-detail { font-size: 15px; }
  .product-visual { min-height: 330px; border-top: 1px solid var(--line); border-left: 0; }
  .product-foot { flex-direction: column; gap: 8px; padding: 16px 24px; }
  .product-foot span:last-child { text-align: left; }
  .approach-list { margin-top: 60px; }
  .approach-item { grid-template-columns: 38px 1fr; min-height: 0; padding: 34px 0; }
  .item-number { padding-top: 7px; }
  .approach-item h3 { font-size: 31px; }
  .approach-item p { font-size: 15px; }
  .item-glyph { display: none; }
  .principles { min-height: 700px; }
  .principle-map { width: 100%; margin-left: 0; margin-top: 70px; }
  .node-design { left: 1%; }
  .node-function { left: 53%; }
  .node-intelligence { right: 0; }
  .closing { min-height: 620px; padding-right: 24px; padding-left: 24px; }
  .closing h2 { font-size: 42px; }
  .internal-action { flex-wrap: wrap; justify-content: center; max-width: 250px; }
  .internal-action .mono { width: 100%; margin: 4px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .header-actions { gap: 4px; }
  .language-switch { gap: 2px; }
  .language-switch button { min-width: 23px; }
  .theme-toggle { padding-right: 1px; padding-left: 1px; }
  .theme-toggle-track { width: 38px; }
  :root[data-theme="dark"] .theme-toggle-thumb { transform: translateX(14px); }
  .js .menu-toggle { gap: 6px; font-size: 9px; }
  .utility-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .utility-control { width: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Bart 14822 — motion, timing and signal refinements */
.motion-toggle {
  width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center;
}
.motion-toggle:hover, .motion-toggle:focus-visible { border-color: var(--cyan-dark); color: var(--cyan-dark); }
.motion-icon { grid-area: 1 / 1; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-icon-static { opacity: 0; }
.motion-toggle[aria-pressed="true"] .motion-icon-live { opacity: 0; }
.motion-toggle[aria-pressed="true"] .motion-icon-static { opacity: 1; }
.no-js .motion-toggle { display: none; }

:root[data-motion="static"] *, :root[data-motion="static"] *::before, :root[data-motion="static"] *::after {
  animation-play-state: paused !important; scroll-behavior: auto !important;
}
:root[data-motion="static"] [data-reveal] { transition: none !important; }

.brand-lockup-frame { overflow: visible; }
.brand-lockup-frame img { display: block; object-fit: contain; overflow: visible; }

h1 { max-width: min(920px, 100%); }
h1 .hero-resonate, .closing .resonate-word {
  color: transparent;
  background: linear-gradient(90deg,
    var(--ink) 0%, var(--cyan-dark) 12%, var(--cyan) 20%, var(--ink) 31%,
    var(--ink) 38%, var(--cyan-dark) 49%, var(--cyan) 57%, var(--ink) 68%,
    var(--ink) 75%, var(--cyan-dark) 86%, var(--cyan) 93%, var(--ink) 100%);
  background-clip: text; -webkit-background-clip: text;
}
.closing .noise-word { position: relative; color: var(--ink-soft); }
.closing .noise-word::after {
  position: absolute; inset: 10% -2%; content: ""; pointer-events: none; opacity: .12; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.78' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: tv-noise .24s steps(2) infinite;
}

.hero-meta { grid-template-columns: repeat(4, 1fr); }
.hero-meta a { display: flex; gap: 10px; padding: 15px clamp(12px, 2.4vw, 34px); border-right: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.hero-meta a:last-child { border-right: 0; }
.hero-meta a:hover, .hero-meta a:focus-visible { color: var(--cyan-dark); background: var(--cyan-wash); }
.hero-meta b { color: var(--cyan-dark); font-weight: 400; }
.hero-meta span { padding: 0; border: 0; }

.radar-field { transform: none !important; transition: none; }
.radar-glow { transform: none !important; }
.radar-sweep { animation: none !important; transition: none; background: conic-gradient(from 270deg at 100% 100%, rgba(75, 175, 150,.16), transparent 42deg); }
.radar-point i::after { opacity: 0; animation: none !important; }
.radar-point.is-hit i::after { animation: radar-contact 3.2s ease-out 1 !important; }
.radar-echo { display: none; }

.plot-pulse { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); opacity: 0; }
.signal-plot.is-visible .plot-pulse { animation: signal-ball 5.8s linear infinite; offset-path: path("M0 88 C58 88 48 30 92 30 S130 126 174 126 209 66 252 66 290 97 330 97 368 42 408 42 448 117 488 117 527 73 566 73 605 91 642 91 675 55 720 55"); offset-rotate: 0deg; }

.party-signal { aspect-ratio: 1.35; min-height: 0; background: radial-gradient(circle at 50% 50%, var(--product-accent-soft), transparent 65%); }
.party-signal::before, .party-signal::after, .party-orbit, .party-beat { display: none; }
.party-ring { position: absolute; top: 50%; left: 50%; border: 1px solid color-mix(in srgb, var(--product-accent) 30%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.party-ring-a { width: 72%; aspect-ratio: 1; }.party-ring-b { width: 38%; aspect-ratio: 1; }
.party-axis { position: absolute; background: color-mix(in srgb, var(--product-accent) 18%, transparent); }
.party-axis-x { top: 50%; left: 10%; width: 80%; height: 1px; }.party-axis-y { top: 10%; left: 50%; width: 1px; height: 80%; }
.party-source { position: absolute; top: var(--y); left: var(--x); display: grid; justify-items: center; gap: 6px; transform: translate(-50%, -50%); color: var(--muted); font: 8px var(--mono); white-space: nowrap; }
.party-source i { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--product-accent) 54%, transparent); border-radius: 50%; color: var(--product-accent); font-style: normal; background: var(--card-surface); }
.party-source b { font-weight: 400; }.party-source { animation: source-light 12s ease-in-out infinite; }
.source-soundcloud { animation-delay: -3s; }.source-ra { animation-delay: -6s; }.source-discogs { animation-delay: -9s; }
.party-core { top: calc(50% - 5px); left: calc(50% - 5px); }

.venue-sweep { left: var(--gig-scan, 6%); animation: none !important; }
.venue-node { animation: none !important; transition: transform .25s ease, box-shadow .7s ease; }
.venue-node.is-hit { transform: scale(1.35); box-shadow: 0 0 0 15px var(--product-accent-soft); }


.principle-map:hover .planet-orbit { border-color: var(--line); transform: translate(-50%, -50%) rotate(var(--orbit-angle)); }
.principle-map.is-motion-active .planet-orbit { animation: orbit-prograde var(--orbit-duration) linear infinite; }

@keyframes radar-contact { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(5); } }
@keyframes signal-ball { 0% { offset-distance: 0%; opacity: 0; } 5%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes source-light { 0%, 18%, 100% { filter: none; } 7% { filter: drop-shadow(0 0 13px var(--product-accent)); color: var(--ink); } }
@keyframes orbit-prograde { to { transform: translate(-50%, -50%) rotate(calc(var(--orbit-angle) + 360deg)); } }
@keyframes tv-noise { to { background-position: 11px -7px; } }

@media (max-width: 900px) { .header-index { display: none; }.hero-meta a { justify-content: center; }.party-signal { aspect-ratio: 1.55; } }
@media (max-width: 560px) { h1 { font-size: clamp(42px, 12.2vw, 58px); overflow-wrap: anywhere; }.hero-meta a { gap: 4px; padding: 12px 3px; font-size: 7px; }.hero-meta b { display: none; }.motion-toggle { width: 31px; height: 31px; } }
@media (prefers-reduced-motion: reduce) { .radar-sweep { transform: rotate(18deg) !important; }.plot-pulse { display: none; } }

@media (prefers-contrast: more) {
  :root { --muted: #4d5759; --line: #8b9799; --cyan-dark: #184c43; }
}

/* Motion and interaction layer */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-smooth: cubic-bezier(.65, 0, .35, 1);
  --pointer-shift-x: 0px;
  --pointer-shift-y: 0px;
  --scroll-progress: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; max-width: 100%; overflow-x: hidden; }
img, video, svg, canvas { display: block; max-width: 100%; height: auto; }

.site-shell { position: relative; z-index: 1; }
.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  height: 2px;
  background: color-mix(in srgb, var(--line) 44%, transparent);
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cyan-dark);
  box-shadow: 0 0 14px rgba(75, 175, 150, .45);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.utility-dock {
  position: fixed;
  z-index: 45;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--header-surface);
  box-shadow: 0 12px 34px var(--shadow);
  backdrop-filter: blur(16px);
}

.utility-control {
  display: grid;
  width: 42px;
  height: 42px;
  padding: 0;
  place-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 180ms ease, background-color 180ms ease;
}

.utility-control:last-child { border-bottom: 0; }
.utility-control:hover, .utility-control:focus-visible { background: var(--cyan-wash); color: var(--ink); }
.utility-control:disabled { color: var(--line); cursor: default; }
.utility-control:disabled:hover { background: transparent; }
.utility-control svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
.no-js .language-switch, .no-js .utility-dock { display: none; }

.ambient-field { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-orbit { position: absolute; width: min(68vw, 900px); aspect-ratio: 1; border: 1px solid rgba(34, 90, 80, .06); border-radius: 50%; will-change: transform; }
.ambient-orbit-a { top: -32vw; right: -22vw; transform: translate(calc(var(--pointer-shift-x) * -1), calc(var(--pointer-shift-y) * -1)); }
.ambient-orbit-b { bottom: -38vw; left: -30vw; transform: translate(var(--pointer-shift-x), var(--pointer-shift-y)); }
.ambient-grain { position: absolute; inset: 0; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }

.site-header { transition: min-height 300ms var(--ease-out), box-shadow 300ms ease, background-color 300ms ease; }
.site-header.is-scrolled { background: var(--header-surface-scrolled); box-shadow: 0 12px 40px var(--shadow); }
.brand-lockup-frame { transition: opacity 180ms ease, transform 240ms var(--ease-out); }
.wordmark:hover .brand-lockup-frame, .wordmark:focus-visible .brand-lockup-frame { opacity: .82; transform: translateY(-1px); }
.site-nav a { transition: color 180ms ease; }
.site-nav a.is-active::before { position: absolute; top: 50%; left: -13px; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan-dark); content: ""; transform: translateY(-50%); }

.hero::before { transform: translate3d(var(--pointer-shift-x), var(--pointer-shift-y), 0) scale(1.04); transition: transform 700ms var(--ease-out); }
.hero::after { position: absolute; inset: auto -10% -42% 42%; aspect-ratio: 1; border: 1px solid rgba(34, 90, 80, .08); border-radius: 50%; content: ""; pointer-events: none; transform: scale(calc(.88 + var(--scroll-progress) * .22)); }

.radar-field { transform: translate3d(var(--radar-x, 0px), var(--radar-y, 0px), 0); will-change: transform; }
.radar-glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgba(75, 175, 150, .12), rgba(75, 175, 150, .018) 36%, transparent 69%); transform: translate3d(var(--radar-x, 0px), var(--radar-y, 0px), 0); }
.radar-ticks { position: absolute; inset: -1px; border-radius: 50%; background: repeating-conic-gradient(from -1deg, rgba(34,90,80,.34) 0deg .28deg, transparent .28deg 9deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); opacity: .52; }
.radar-sweep { animation: radar-scan 7s linear infinite; will-change: transform; }
.radar-field.is-tracking .radar-sweep { animation-play-state: paused; }
.radar-center { animation: center-breathe 2.8s ease-in-out infinite; }
.radar-point i { position: relative; }
.radar-point i::after { position: absolute; inset: 0; border: 1px solid var(--cyan-dark); border-radius: 50%; content: ""; animation: target-ping 3.6s ease-out infinite; }
.point-b i::after { animation-delay: 1.2s; }
.point-c i::after { animation-delay: 2.4s; }
.point-d i::after { animation-delay: 3.6s; }
.radar-echo { position: absolute; border: 1px solid rgba(75, 175, 150, .25); border-radius: 50%; opacity: 0; animation: echo 5.4s ease-out infinite; }
.echo-a { top: 23%; left: 62%; width: 24px; height: 24px; }
.echo-b { top: 66%; left: 27%; width: 18px; height: 18px; animation-delay: 2.7s; }
.radar-status { position: absolute; bottom: 7%; left: 50%; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; transform: translateX(-50%); }
.radar-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan-dark); animation: status-blink 1.8s ease-in-out infinite; }

.plot-active { stroke-dasharray: 1120; stroke-dashoffset: 1120; }
.signal-plot.is-visible .plot-active { animation: draw-signal 2.2s .3s var(--ease-out) forwards; }
.approach-item { position: relative; transition: padding 350ms var(--ease-out), background-color 300ms ease, border-color 300ms ease; }
.approach-item::before { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan-wash), transparent 68%); content: ""; opacity: 0; transform: scaleX(.82); transform-origin: left; transition: opacity 300ms ease, transform 450ms var(--ease-out); }
.approach-item > * { position: relative; z-index: 1; }
.item-glyph { transition: transform 500ms var(--ease-out); }
.approach-item > div:nth-child(2) { transition: transform 350ms var(--ease-out); }
.approach-item:hover, .approach-item:focus-within { border-color: rgba(34, 90, 80, .35); }
.approach-item:hover::before, .approach-item:focus-within::before { opacity: 1; transform: scaleX(1); }
.approach-item:hover > div:nth-child(2), .approach-item:focus-within > div:nth-child(2) { transform: translateX(10px); }
.approach-item:hover .item-glyph, .approach-item:focus-within .item-glyph { transform: rotate(8deg) scale(1.06); }
.approach-item h3 { transition: color 240ms ease; }
.approach-item:hover h3 { color: var(--cyan-dark); }
.product-card { transition: border-color 300ms ease, box-shadow 400ms ease, transform 450ms var(--ease-out); }
.product-card:hover { border-color: color-mix(in srgb, var(--product-accent) 40%, var(--line)); box-shadow: 0 20px 54px var(--shadow); transform: translateY(-3px); }
.party-signal::before { animation: product-pulse 7s ease-in-out infinite; }
.party-signal::after { animation: product-pulse 7s 1.2s ease-in-out infinite; }
.party-beat { animation: target-ping 4.8s ease-out infinite; }
.beat-b { animation-delay: 1.6s; }
.beat-c { animation-delay: 3.2s; }
.venue-sweep { animation: venue-scan 6s var(--ease-smooth) infinite; }
.venue-node { animation: venue-node 4.5s ease-in-out infinite; }
.venue-b { animation-delay: .8s; }
.venue-c { animation-delay: 1.6s; }
.venue-d { animation-delay: 2.4s; }

.principle-map.is-visible .ring-1 { animation: map-breathe 4s ease-in-out infinite; }
.principle-map.is-visible .ring-2 { animation: map-breathe 4s 1.1s ease-in-out infinite; }
.principle-map.is-visible .ring-3 { animation: map-breathe 4s 2.2s ease-in-out infinite; }
.map-node { transition: color 240ms ease, transform 400ms var(--ease-out); }
.principle-map:hover .map-node { color: var(--cyan-dark); }
.principle-map:hover .node-design { transform: translateX(-5px); }
.principle-map:hover .node-function { transform: translateY(-5px); }
.principle-map:hover .node-intelligence { transform: translate(5px, 3px); }
.closing-grid { animation: closing-resonance 9s ease-in-out infinite; }
.internal-action { transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, transform 300ms var(--ease-out), box-shadow 300ms ease; }
.internal-action:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--shadow); }

.js [data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--reveal-order, 0) * 55ms); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@keyframes radar-scan { to { transform: rotate(calc(var(--radar-angle) + 360deg)); } }
@keyframes center-breathe { 50% { box-shadow: 0 0 0 12px rgba(75, 175, 150, .045), 0 0 24px rgba(75, 175, 150, .16); } }
@keyframes target-ping { 0% { opacity: .7; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(5); } }
@keyframes echo { 0%, 58% { opacity: 0; transform: scale(.4); } 62% { opacity: .7; } 100% { opacity: 0; transform: scale(4); } }
@keyframes status-blink { 50% { opacity: .25; transform: scale(.75); } }
@keyframes draw-signal { to { stroke-dashoffset: 0; } }
@keyframes product-pulse { 50% { opacity: .45; transform: scale(1.035); } }
@keyframes venue-scan { 0%, 100% { left: 18%; opacity: .18; } 50% { left: 82%; opacity: .7; } }
@keyframes venue-node { 50% { box-shadow: 0 0 0 11px var(--product-accent-soft); transform: scale(.82); } }
@keyframes map-breathe { 50% { border-color: rgba(34, 90, 80, .28); transform: translate(-50%, -50%) scale(1.025); } }
@keyframes closing-resonance { 50% { box-shadow: 0 0 0 145px rgba(75, 175, 150, .02), 0 0 0 280px rgba(75, 175, 150, .014); transform: translate(-50%, -50%) scale(1.025); } }
.is-paused *, .is-paused *::before, .is-paused *::after { animation-play-state: paused !important; }

@media (hover: none), (pointer: coarse) {
  .approach-item:hover::before { opacity: 0; }
  .approach-item:hover > div:nth-child(2) { transform: none; }
  .product-card:hover { box-shadow: none; transform: none; }
  .internal-action:hover { transform: none; box-shadow: none; }
}

@media (max-width: 560px) {
  .radar-status { bottom: 5%; }
  .ambient-orbit { width: 130vw; }
  .section-grid, .closing { padding-right: 64px; }
  .utility-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .utility-control { width: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep { transform: rotate(var(--radar-angle)); }
  .plot-active { stroke-dashoffset: 0; }
  .venue-sweep { left: 50%; }
  .ambient-orbit, .hero::before, .radar-field, .radar-glow { transform: none; }
}

/* 2026-07-17 interaction refinement */
.footer-wordmark .brand-lockup-frame { width: clamp(152px, 14vw, 190px); }

h1 { max-width: 820px; color: var(--ink-soft); font-size: clamp(52px, 6.2vw, 96px); line-height: .98; }
h1 .hero-word { color: var(--cyan-dark); }
h1 .hero-resonate {
  background: radial-gradient(circle at 50% 55%, var(--ink) 0 20%, var(--cyan-dark) 53%, var(--ink-soft) 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.radar-field {
  overflow: hidden;
  contain: paint;
  transform: none;
  translate: var(--grid-snap-x, 0px) var(--grid-snap-y, 0px);
  will-change: auto;
}
.radar-field.is-motion-active { will-change: transform; }
.radar-field.is-tracking { transform: none; }
.radar-glow { transform: none; }
.radar-axis { z-index: 2; }
.radar-sweep {
  z-index: 1;
  inset: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(from -8deg, rgba(75, 175, 150, .22), rgba(75, 175, 150, .055) 17deg, transparent 58deg 360deg);
  opacity: .78;
  transform: rotate(var(--radar-angle));
  transform-origin: 50% 50%;
}
.radar-orbit, .radar-center, .radar-point, .radar-echo, .radar-coordinate, .radar-status { z-index: 3; }

[data-motion]:not(.is-motion-active),
[data-motion]:not(.is-motion-active)::before,
[data-motion]:not(.is-motion-active)::after,
[data-motion]:not(.is-motion-active) *,
[data-motion]:not(.is-motion-active) *::before,
[data-motion]:not(.is-motion-active) *::after,
.is-motion-static,
.is-motion-static::before,
.is-motion-static::after,
.is-motion-static *,
.is-motion-static *::before,
.is-motion-static *::after { animation-play-state: paused !important; }

.party-signal { contain: paint; }
.party-signal::before,
.party-signal::after,
.party-orbit { top: auto; right: auto; bottom: auto; left: auto; width: auto; aspect-ratio: auto; }
.party-signal::before { inset: 8%; }
.party-signal::after { inset: 27%; }
.party-orbit-a {
  inset: 8%;
  border-color: transparent;
  background: conic-gradient(from 0deg, transparent 0 310deg, color-mix(in srgb, var(--product-accent) 52%, transparent) 345deg, var(--product-accent) 360deg);
  clip-path: circle(50%);
  opacity: .34;
  animation: party-sweep 9.6s linear infinite;
}
.party-orbit-b { inset: 43%; background: var(--product-accent-soft); }
.party-core { top: calc(50% - 5px); left: calc(50% - 5px); }
.beat-a { top: 25%; right: 28%; }
.beat-b { right: 18%; bottom: 36%; }
.beat-c { top: 69%; left: 28%; }
.party-beat { animation: party-blip 4.8s ease-out infinite; }

.gig-signal::before { opacity: .4; }
.venue-sweep {
  top: 3%;
  bottom: 3%;
  left: 6%;
  background: linear-gradient(transparent, var(--product-accent) 7% 93%, transparent);
  opacity: .62;
  animation: venue-scan-refined 8s var(--ease-smooth) infinite;
}
.venue-a { top: 25%; left: 18%; }
.venue-b { top: 48%; left: 38%; }
.venue-c { top: 66%; right: auto; left: 66%; }
.venue-d { right: auto; bottom: 20%; left: 83%; }
.venue-node { animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite; }
.venue-a { animation-name: venue-pulse-a; }
.venue-b { animation-name: venue-pulse-b; }
.venue-c { animation-name: venue-pulse-c; }
.venue-d { animation-name: venue-pulse-d; }

.glyph-discovery b {
  position: absolute;
  top: 12px;
  left: calc(50% - .5px);
  width: 1px;
  height: 38px;
  background: linear-gradient(var(--cyan-dark), transparent);
  transform-origin: 50% 38px;
}
.approach-item:hover .glyph-discovery b,
.approach-item:focus-within .glyph-discovery b {
  animation: discovery-to-twelve 1.8s var(--ease-smooth) 1 both !important;
}
@keyframes discovery-to-twelve {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.glyph-connection::before { content: none; }
.glyph-connection svg,
.glyph-delivery svg { width: 100%; height: 100%; overflow: visible; }
.glyph-connection svg { transform: perspective(220px) rotateX(40deg) rotateZ(-7deg) scale(.94); transform-style: preserve-3d; }
.glyph-points { fill: var(--cyan-dark); }
.glyph-links { fill: none; stroke: var(--cyan-dark); stroke-width: 1; }
.glyph-links path { stroke-dasharray: 0 1; stroke-dashoffset: .5; transition: stroke-dasharray 700ms var(--ease-out), stroke-dashoffset 700ms var(--ease-out); }
.approach-item:hover .glyph-links path,
.approach-item:focus-within .glyph-links path { stroke-dasharray: .5 0 .5 0; stroke-dashoffset: 0; }

.glyph-delivery svg { transform: perspective(220px) rotateX(40deg) rotateZ(-5deg) scale(.96); transform-style: preserve-3d; }
.pyramid-face { stroke: none; }
.face-a { fill: color-mix(in srgb, var(--cyan) 16%, transparent); }
.face-b { fill: color-mix(in srgb, var(--cyan-dark) 24%, transparent); }
.face-c { fill: color-mix(in srgb, var(--cyan) 10%, transparent); }
.pyramid-line { fill: none; stroke: var(--cyan-dark); stroke-width: 1; }
.principle-map { aspect-ratio: 2/1; }
.planet-orbit {
  --orbit-angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-angle));
  transition: border-color 320ms ease, transform 650ms var(--ease-out);
}
.orbit-relevance { --orbit-angle: 36deg; --orbit-duration: 63s; width: 64%; }
.orbit-concepts { --orbit-angle: 168deg; --orbit-duration: 47s; width: 54%; }
.orbit-resonance { --orbit-angle: 282deg; --orbit-duration: 31s; width: 37%; }
.orbit-principles { --orbit-angle: 310deg; --orbit-duration: 19s; width: 23%; }
.planet-orbit .map-node {
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--orbit-angle) * -1));
  transition: color 300ms ease;
}
.planet-orbit .map-node::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  margin: 0;
  transform: translate(-50%, -50%);
}
.planet-orbit .map-node b {
  position: absolute;
  top: 0;
  left: 13px;
  font-weight: 400;
  transform: translateY(-50%);
  white-space: nowrap;
}
.orbit-relevance .map-node::before { width: 9px; height: 9px; }
.orbit-principles .map-node::before { width: 5px; height: 5px; }
.principle-map:hover .planet-orbit { border-color: var(--line); transform: translate(-50%, -50%) rotate(var(--orbit-angle)); }
.principle-map:hover .map-node,
.principle-map:hover .map-core { color: var(--cyan-dark); }
.principle-map:hover .map-node { transform: rotate(calc(var(--orbit-angle) * -1)); }
.map-core {
  z-index: 3;
  display: grid;
  width: 76px;
  aspect-ratio: 1;
  padding: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan-dark) 46%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 39% 34%,
      color-mix(in srgb, var(--cyan) 22%, var(--paper)) 0 7%,
      var(--paper) 45%,
      color-mix(in srgb, var(--cyan-wash) 82%, var(--paper)) 76%,
      var(--paper) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent);
  transition: color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.principle-map:hover .map-core {
  border-color: color-mix(in srgb, var(--cyan-dark) 58%, var(--line));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--cyan) 28%, transparent);
}

.internal-action { position: relative; overflow: visible; border-radius: 0; font: inherit; cursor: pointer; }
.internal-action::after {
  position: absolute;
  inset: 50%;
  border: 1px solid var(--cyan-dark);
  content: "";
  opacity: 0;
  pointer-events: none;
}
.internal-action.is-pulsing::after { animation: signal-action-pulse 720ms var(--ease-out); }

.ambient-grain { display: none; }
.ambient-orbit { will-change: auto; }

@keyframes party-sweep { to { transform: rotate(360deg); } }
@keyframes party-blip { 0%, 76%, 100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); } 84% { box-shadow: 0 0 0 8px var(--product-accent-soft); transform: scale(1.18); } }
@keyframes venue-scan-refined { 0%, 100% { left: 6%; } 50% { left: 94%; } }
@keyframes venue-pulse-a { 0%, 4%, 10%, 90%, 96%, 100% { transform: scale(1); box-shadow: 0 0 0 7px var(--product-accent-soft); } 7%, 93% { transform: scale(1.35); box-shadow: 0 0 0 14px var(--product-accent-soft); } }
@keyframes venue-pulse-b { 0%, 15%, 22%, 78%, 85%, 100% { transform: scale(1); box-shadow: 0 0 0 7px var(--product-accent-soft); } 18.5%, 81.5% { transform: scale(1.35); box-shadow: 0 0 0 14px var(--product-accent-soft); } }
@keyframes venue-pulse-c { 0%, 31%, 38%, 62%, 69%, 100% { transform: scale(1); box-shadow: 0 0 0 7px var(--product-accent-soft); } 34.5%, 65.5% { transform: scale(1.35); box-shadow: 0 0 0 14px var(--product-accent-soft); } }
@keyframes venue-pulse-d { 0%, 40%, 47%, 53%, 60%, 100% { transform: scale(1); box-shadow: 0 0 0 7px var(--product-accent-soft); } 43.5%, 56.5% { transform: scale(1.35); box-shadow: 0 0 0 14px var(--product-accent-soft); } }
@keyframes signal-action-pulse { 0% { inset: 50%; opacity: .75; } 100% { inset: -18px; opacity: 0; } }

@media (max-width: 560px) {
  h1 { font-size: clamp(44px, 13.2vw, 62px); }
  .site-header .brand-mark-frame { width: 22px; }
  .principle-map { width: 94%; margin-right: auto; margin-left: auto; }
  .planet-orbit .map-node { font-size: 7px; letter-spacing: .06em; }
}

@media (max-width: 380px) {
  .site-header { padding-right: 9px; padding-left: 9px; }
  .header-actions { gap: 2px; }
  .language-switch button { min-width: 21px; }
  .theme-toggle { min-width: 40px; }
  .motion-toggle { width: 29px; height: 29px; }
  .js .menu-toggle { gap: 4px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-sweep { transform: rotate(18deg); }
  .party-orbit-a { transform: rotate(26deg); }
  .venue-sweep { left: 50%; }
  .glyph-delivery svg { transform: perspective(220px) rotateX(40deg) rotateZ(-5deg) scale(.96); }
}

/* Bart 14822 final corrections — keep these last to win the cascade. */
h1 .hero-resonate,
.closing .resonate-word {
  color: transparent;
  background: linear-gradient(90deg,
    var(--ink) 0%, var(--cyan-dark) 8%, var(--cyan) 16%, var(--cyan-dark) 25%, var(--ink) 33%,
    var(--cyan-dark) 41%, var(--cyan) 50%, var(--cyan-dark) 59%, var(--ink) 67%,
    var(--cyan-dark) 75%, var(--cyan) 84%, var(--cyan-dark) 92%, var(--ink) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Keep the final glyph inside the gradient paint box without changing wrapping. */
h1 .hero-resonate {
  padding-inline-end: .075em;
  margin-inline-end: -.075em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.radar-sweep {
  background: conic-gradient(from -58deg,
    transparent 0deg,
    rgba(75, 175, 150, .025) 14deg,
    rgba(75, 175, 150, .1) 42deg,
    rgba(75, 175, 150, .22) 57deg,
    transparent 58deg 360deg);
}
.radar-sweep::after {
  position: absolute;
  top: 0;
  left: calc(50% - .5px);
  width: 1px;
  height: 50%;
  background: linear-gradient(to top, rgba(34, 90, 80, .72), rgba(75, 175, 150, .18));
  content: "";
}

.signal-plot.is-visible .plot-pulse {
  offset-path: path("M0 88 C58 88 48 30 92 30 S130 126 174 126 209 66 252 66 290 97 330 97 368 42 408 42 448 117 488 117 527 73 566 73 605 91 642 91 675 55 720 55");
}
.plot-active { stroke-dasharray: 94 100; stroke-dashoffset: 94; }
.signal-plot.is-visible .plot-active { animation: draw-signal 2.2s .3s var(--ease-out) forwards; }
@keyframes signal-ball {
  0% { offset-distance: 0%; opacity: 0; }
  5%, 88% { opacity: 1; }
  100% { offset-distance: 94%; opacity: 0; }
}

:root[data-motion="static"] .radar-point.is-hit i::after {
  animation-play-state: paused !important;
}

@media (max-width: 380px) {
  .point-c { left: 72%; }
  .coord-b { right: 18%; }
}

/* Bart 14999/15000 — measured motion relationships and compact lockup B. */
.signal-plot.is-visible .plot-pulse { animation: signal-ball-refined 9s linear infinite; }
@keyframes signal-ball-refined {
  0% { offset-distance: 0%; opacity: 0; }
  3% { opacity: 1; }
  93.7% { offset-distance: 94%; opacity: 1; }
  94%, 100% { offset-distance: 94%; opacity: 0; }
}

.venue-sweep { left: var(--gig-scan, 6%); animation: none !important; }
.venue-node { animation: none !important; }

.glyph-discovery b { transform: rotate(0deg); animation: none !important; }

.glyph-connection svg,
.glyph-delivery svg { transform: none; }
.glyph-links path,
.pyramid-links path {
  fill: none;
  stroke: var(--cyan-dark);
  stroke-width: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.glyph-connection .glyph-links path {
  stroke-dashoffset: 1;
  opacity: .18;
  animation: none;
}
.approach-item:hover .glyph-connection .glyph-links path,
.approach-item:focus-within .glyph-connection .glyph-links path {
  animation: connection-link-once 4.8s var(--ease-out) 1 both;
}
.glyph-connection .glyph-links path:nth-child(2) { animation-delay: .35s !important; }
.glyph-connection .glyph-links path:nth-child(3) { animation-delay: .7s !important; }
.glyph-connection .glyph-links path:nth-child(4) { animation-delay: 1.05s !important; }
.glyph-connection .glyph-links path:nth-child(5) { animation-delay: 1.4s !important; }
@keyframes connection-link-once {
  0%, 10% { stroke-dashoffset: 1; opacity: .18; }
  24%, 62% { stroke-dashoffset: 0; opacity: 1; }
  82%, 100% { stroke-dashoffset: 1; opacity: .18; }
}
.glyph-points circle { opacity: 1; animation: none; }

.principle-map.is-motion-active .planet-orbit .map-node {
  animation: orbit-counter var(--orbit-duration) linear infinite;
}
@keyframes orbit-counter {
  from { transform: rotate(calc(var(--orbit-angle) * -1)); }
  to { transform: rotate(calc((var(--orbit-angle) + 360deg) * -1)); }
}

h1 .hero-resonate,
.closing .resonate-word {
  background: linear-gradient(90deg,
    var(--ink-soft) 0%, var(--cyan-dark) 18%, var(--ink-soft) 36%,
    var(--cyan-dark) 56%, var(--ink-soft) 74%, var(--cyan-dark) 90%, var(--ink-soft) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.closing .noise-word::after {
  inset: 2% -4%;
  opacity: .23;
  background-size: 54px 21px;
  animation-duration: .16s;
}

@media (prefers-reduced-motion: reduce) {
  .glyph-discovery b { transform: rotate(0deg) !important; }
  .glyph-links path, .pyramid-links path { stroke-dashoffset: 0; }
  .planet-orbit .map-node { animation: none !important; }
}

/* Bart 15144 — restore visible motion from Gig Alert through the closing section. */
.venue-node {
  overflow: visible;
  transform: none;
  box-shadow: 0 0 0 7px var(--product-accent-soft);
  transition: none;
}
.venue-node::after {
  position: absolute;
  inset: -2px;
  border: 1px solid var(--product-accent);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}
.venue-node.is-hit {
  transform: none;
  box-shadow: 0 0 0 7px var(--product-accent-soft);
}
.venue-node.is-hit::after {
  animation: radar-contact 3.2s ease-out 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .venue-node::after,
  .glyph-discovery b,
  .glyph-links path,
  .pyramid-links path,
  .glyph-points circle,
  .pyramid-face { animation: none !important; }
  .glyph-links path,
  .pyramid-links path { stroke-dashoffset: 0; opacity: 1; }
  .glyph-points circle { opacity: 1; filter: none; }
}

/* Bart 15186/15187 — selected hero composition on the canonical review site. */
.hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
}
.hero-copy {
  align-self: start;
  padding-top: clamp(48px, 5vw, 72px);
}
.hero-brand-frame {
  width: min(100%, 640px);
  margin-bottom: clamp(60px, 6vw, 86px);
}
.radar-stack {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: center;
  width: min(92%, 620px);
  margin-top: clamp(72px, 8vw, 118px);
}
.radar-stack .radar-field {
  width: 100%;
}
.radar-caption {
  justify-content: space-between;
  width: calc(100% - 40px);
  margin: 24px auto 0;
}
@media (min-width: 901px) {
  .radar-caption { width: calc(100% - 88px); }
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-brand-frame { width: min(86vw, 560px); margin-bottom: 64px; }
  .radar-stack { width: min(88vw, 540px); margin: 72px auto 44px; }
  .radar-stack .radar-field { width: 100%; margin: 0; }
}

@media (max-width: 560px) {
  .hero-brand-frame { width: min(84vw, 330px); margin-bottom: 54px; }
  .radar-stack { width: 86vw; margin-top: 80px; }
  .radar-caption { flex-direction: row; gap: 18px; margin-top: 20px; }
}

/* Bart 15200 — zoom the complete opening composition out one measured step. */
.hero {
  min-height: clamp(660px, 69vw, 820px);
}
.hero-brand-frame {
  width: min(100%, 520px);
  margin-bottom: clamp(50px, 5vw, 70px);
}
.hero h1 {
  max-width: 680px;
  margin-bottom: 28px;
  font-size: clamp(46px, 5.2vw, 80px);
}
.hero-intro {
  max-width: 490px;
  font-size: clamp(17px, 1.45vw, 21px);
}
.radar-stack {
  width: min(84%, 520px);
  margin-top: clamp(68px, 7vw, 98px);
}
.radar-caption {
  font-size: 9px;
}

@media (max-width: 900px) {
  .hero-brand-frame { width: min(80vw, 470px); margin-bottom: 56px; }
  .hero h1 { font-size: clamp(44px, 11.5vw, 68px); }
  .radar-stack { width: min(80vw, 480px); margin-top: 68px; }
}

@media (max-width: 560px) {
  .hero-brand-frame { width: min(73vw, 285px); margin-bottom: 48px; }
  .hero h1 { font-size: clamp(40px, 11.5vw, 52px); }
  .hero-intro { font-size: 17px; }
  .radar-stack { width: 76vw; margin-top: 68px; }
  .radar-caption { font-size: 8px; }
}

/* Bart 15203/15215 — fade from the green/grey handoff while continuing to the endpoint. */
.plot-active {
  stroke: url("#signal-resolved-gradient");
  stroke-dasharray: none;
  stroke-dashoffset: 0;
}
.signal-plot.is-visible .plot-active {
  animation: none;
}
.signal-plot.is-visible .plot-pulse {
  animation: signal-ball-resolved-fade 11s linear infinite;
}
@keyframes signal-ball-resolved-fade {
  0% {
    offset-distance: 0%;
    opacity: 0;
    fill: var(--cyan);
    filter: drop-shadow(0 0 6px var(--cyan));
  }
  2.5% {
    opacity: 1;
  }
  63.64% {
    offset-distance: 71.43%;
    opacity: 1;
    fill: var(--cyan);
    filter: drop-shadow(0 0 6px var(--cyan));
  }
  72.73% {
    offset-distance: 78.57%;
    opacity: .92;
    fill: color-mix(in srgb, var(--cyan) 72%, var(--muted));
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cyan) 72%, var(--muted)));
  }
  81.82% {
    offset-distance: 85.72%;
    opacity: .78;
    fill: color-mix(in srgb, var(--cyan) 42%, var(--muted));
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cyan) 42%, var(--muted)));
  }
  90.91% {
    offset-distance: 92.86%;
    opacity: .48;
    fill: var(--muted);
    filter: drop-shadow(0 0 2px var(--muted));
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
    fill: var(--muted);
    filter: drop-shadow(0 0 0 transparent);
  }
}

/* Bart 15217 — give the party ping radar breathing room above it. */
.party-radar-system {
  position: absolute;
  inset: 0;
  display: block;
  transform: translateY(6%);
}
@media (max-width: 560px) {
  .party-signal { aspect-ratio: 1.24; }
}

/* Bart 15207/15211 — final hierarchy, colour, method and orbital behaviour. */
:root {
  --cyan: #54b99f;
  --cyan-dark: #2f8f78;
  --cyan-wash: rgba(84, 185, 159, .11);
}
:root[data-theme="dark"] {
  --cyan: #69c4aa;
  --cyan-dark: #5ab298;
  --cyan-wash: rgba(105, 196, 170, .13);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cyan: #69c4aa;
    --cyan-dark: #5ab298;
    --cyan-wash: rgba(105, 196, 170, .13);
  }
}

.hero h1 {
  max-width: 630px;
  font-size: clamp(42px, 4.55vw, 70px);
  font-weight: 300;
  letter-spacing: -.055em;
}
.hero h1 .hero-word { color: color-mix(in srgb, var(--cyan) 76%, var(--cyan-dark)); }
h1 .hero-resonate,
.closing .resonate-word {
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--cyan-dark) 68%, var(--ink-soft)) 0%,
    color-mix(in srgb, var(--cyan) 62%, var(--cyan-dark)) 24%,
    color-mix(in srgb, var(--cyan-dark) 72%, var(--ink-soft)) 48%,
    color-mix(in srgb, var(--cyan) 58%, var(--cyan-dark)) 72%,
    color-mix(in srgb, var(--cyan-dark) 68%, var(--ink-soft)) 100%);
  background-size: 190% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: resonate-soft-pulse 6.8s ease-in-out infinite;
}
@keyframes resonate-soft-pulse {
  0%, 100% { background-position: 0% 50%; filter: brightness(.96); }
  50% { background-position: 100% 50%; filter: brightness(1.03); }
}

.section-grid {
  grid-template-columns: minmax(90px, .16fr) minmax(0, .84fr);
}

.motion-icon-live {
  fill: currentColor;
  stroke: none;
}

.hero-meta a {
  animation: foundation-scan 8s ease-in-out infinite;
}
.hero-meta a:nth-child(2) { animation-delay: 2s; }
.hero-meta a:nth-child(3) { animation-delay: 4s; }
.hero-meta a:nth-child(4) { animation-delay: 6s; }
@keyframes foundation-scan {
  0%, 18%, 100% { color: var(--muted); background: transparent; box-shadow: inset 0 0 0 transparent; }
  7%, 11% { color: var(--cyan-dark); background: var(--cyan-wash); box-shadow: inset 0 0 24px var(--cyan-wash); }
}

.closing .noise-word {
  position: relative;
  color: transparent;
  background-color: var(--ink-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='36' viewBox='0 0 96 36'%3E%3Cfilter id='static' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.48 1.08' numOctaves='1' seed='19' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer in='n'%3E%3CfeFuncR type='discrete' tableValues='.04 .12 .22 .72 .96'/%3E%3CfeFuncG type='discrete' tableValues='.06 .18 .38 .68 .94'/%3E%3CfeFuncB type='discrete' tableValues='.05 .14 .25 .54 .88'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='96' height='36' filter='url(%23static)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 86px 32px;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: noise-static .32s steps(1, end) infinite;
}
.closing .noise-word::after { content: none; }
.closing .noise-phrase {
  display: inline-block;
  white-space: nowrap;
}
@keyframes noise-static {
  0% { background-position: 0 0; }
  24% { background-position: -17px 7px; }
  49% { background-position: 31px -11px; }
  74% { background-position: -43px -4px; }
  100% { background-position: 13px 9px; }
}

/* Connection keeps its points visible while its links build one by one. */
.glyph-connection .glyph-points circle { opacity: 1; animation: none !important; }

/* Delivery keeps its network visible while the three planes resonate in sequence. */
.glyph-delivery svg,
.glyph-delivery .pyramid-links path,
.glyph-delivery .glyph-points circle {
  animation: none !important;
}
.glyph-delivery .pyramid-links path {
  stroke-dashoffset: 0;
  opacity: 1;
}
.glyph-delivery .glyph-points circle {
  opacity: 1;
  filter: drop-shadow(0 0 3px var(--cyan-wash));
}
.glyph-delivery .pyramid-face {
  opacity: .12;
  animation: none;
}
.glyph-delivery.is-motion-active .pyramid-face {
  animation: delivery-face-sequence 7.2s ease-in-out infinite !important;
}
.glyph-delivery.is-motion-active .face-a { animation-delay: 0s !important; }
.glyph-delivery.is-motion-active .face-b { animation-delay: 2.4s !important; }
.glyph-delivery.is-motion-active .face-c { animation-delay: 4.8s !important; }
@keyframes delivery-face-sequence {
  0%, 7%, 38%, 100% { opacity: .12; filter: none; }
  18%, 27% { opacity: .58; filter: drop-shadow(0 0 5px var(--cyan)); }
}

/* A contained, mouse-independent solar system. */
.principle-map {
  grid-column: 2;
  width: min(100%, 720px);
  aspect-ratio: 1.55;
  margin: 74px auto 0;
  pointer-events: none;
}
.principle-map:hover .planet-orbit {
  border-color: var(--line);
  transform: translate(-50%, -50%) rotate(var(--orbit-angle));
}
.principle-map:hover .map-node {
  color: var(--ink-soft);
  transform: rotate(calc(var(--orbit-angle) * -1));
}
.principle-map:hover .map-core {
  color: var(--ink);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cyan) 18%, transparent),
    0 0 24px color-mix(in srgb, var(--cyan) 28%, transparent);
}

@media (max-width: 900px) {
  .section-grid { grid-template-columns: 1fr; }
  .principle-map { grid-column: 1; width: min(94%, 650px); }
}
@media (max-width: 560px) {
  .hero h1 { font-size: clamp(36px, 10.5vw, 47px); font-weight: 300; }
  .section-marker { margin-bottom: 38px; }
  .principle-map { width: 100%; aspect-ratio: 1.35; margin-top: 56px; }
  .orbit-relevance { width: 66%; }
  .orbit-concepts { width: 55%; }
  .orbit-resonance { width: 37%; }
  .orbit-principles { width: 23%; }
  .map-core { width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  h1 .hero-resonate,
  .closing .resonate-word,
  .closing .noise-word,
  .hero-meta a { animation: none !important; }
}

/* Bart 15337 — information selection, source context and verified motion. */
.plot-candidate,
.plot-track {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.plot-candidate {
  stroke-width: .82;
  opacity: .5;
}
.candidate-a { stroke: color-mix(in srgb, var(--line) 80%, var(--muted)); }
.candidate-b { stroke: color-mix(in srgb, var(--cyan) 18%, var(--line)); opacity: .42; }
.candidate-c { stroke: color-mix(in srgb, var(--cyan-dark) 24%, var(--line)); opacity: .36; }
.plot-track { stroke: var(--line); stroke-width: 1.05; }
.plot-active { stroke-width: 1.35; }

.party-radar-system {
  inset: 0;
  transform: none;
}

.venue-node { z-index: 2; }
.venue-node b {
  position: absolute;
  top: 50%;
  left: 17px;
  color: color-mix(in srgb, var(--muted) 84%, transparent);
  font: 400 clamp(7px, .62vw, 9px)/1.25 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(-50%);
}
.venue-c b,
.venue-d b {
  right: 17px;
  left: auto;
  text-align: right;
}

.approach-item.is-approach-activated .glyph-discovery b,
.approach-item:hover .glyph-discovery b,
.approach-item:focus-within .glyph-discovery b {
  animation: discovery-scan-cycle 4.8s var(--ease-smooth) infinite !important;
}
@keyframes discovery-scan-cycle {
  0% { opacity: 1; transform: rotate(0deg); }
  60%, 86% { opacity: 1; transform: rotate(356deg); }
  94%, 100% { opacity: 0; transform: rotate(356deg); }
}

/* Delivery morphs as one object, then reveals the canonical S. */
.glyph-delivery.is-motion-active .face-a {
  animation:
    delivery-face-a-upright 9s var(--ease-smooth) 0s infinite,
    delivery-face-glow 9s ease-in-out 0s infinite !important;
}
.glyph-delivery.is-motion-active .face-b {
  animation:
    delivery-face-b-upright 9s var(--ease-smooth) 0s infinite,
    delivery-face-glow 9s ease-in-out 1.5s infinite !important;
}
.glyph-delivery.is-motion-active .face-c {
  animation:
    delivery-face-c-upright 9s var(--ease-smooth) 0s infinite,
    delivery-face-glow 9s ease-in-out 3s infinite !important;
}
.glyph-delivery.is-motion-active .edge-a { animation: delivery-edge-a-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .edge-b { animation: delivery-edge-b-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .edge-c { animation: delivery-edge-c-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .edge-d { animation: delivery-edge-d-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .edge-e { animation: delivery-edge-e-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .vertex-apex { animation: delivery-apex-upright 9s var(--ease-smooth) infinite !important; }
.glyph-delivery.is-motion-active .vertex-low-right,
.glyph-delivery.is-motion-active .vertex-low-left { animation: delivery-low-upright 9s var(--ease-smooth) infinite !important; }
.delivery-mark {
  opacity: 0;
  pointer-events: none;
}
.glyph-delivery.is-motion-active .delivery-mark {
  animation: delivery-mark-reveal 9s ease-in-out infinite;
}
@keyframes delivery-face-a-upright {
  0%, 12%, 100% { d: path("M50 43 L18 54 L30 87 Z"); }
  38%, 72% { d: path("M50 30 L18 54 L30 73 Z"); }
}
@keyframes delivery-face-b-upright {
  0%, 12%, 100% { d: path("M50 43 L78 43 L72 84 Z"); }
  38%, 72% { d: path("M50 30 L78 43 L72 70 Z"); }
}
@keyframes delivery-face-c-upright {
  0%, 12%, 100% { d: path("M18 54 L50 43 L78 43 L72 84 L30 87 Z"); }
  38%, 72% { d: path("M18 54 L50 30 L78 43 L72 70 L30 73 Z"); }
}
@keyframes delivery-edge-a-upright {
  0%, 12%, 100% { d: path("M50 43 L18 54"); }
  38%, 72% { d: path("M50 30 L18 54"); }
}
@keyframes delivery-edge-b-upright {
  0%, 12%, 100% { d: path("M50 43 L78 43"); }
  38%, 72% { d: path("M50 30 L78 43"); }
}
@keyframes delivery-edge-c-upright {
  0%, 12%, 100% { d: path("M50 43 L72 84"); }
  38%, 72% { d: path("M50 30 L72 70"); }
}
@keyframes delivery-edge-d-upright {
  0%, 12%, 100% { d: path("M50 43 L30 87"); }
  38%, 72% { d: path("M50 30 L30 73"); }
}
@keyframes delivery-edge-e-upright {
  0%, 12%, 100% { d: path("M18 54 L78 43 L72 84 L30 87 L18 54"); }
  38%, 72% { d: path("M18 54 L78 43 L72 70 L30 73 L18 54"); }
}
@keyframes delivery-apex-upright {
  0%, 12%, 100% { transform: translateY(0); }
  38%, 72% { transform: translateY(-13px); }
}
@keyframes delivery-low-upright {
  0%, 12%, 100% { transform: translateY(0); }
  38%, 72% { transform: translateY(-14px); }
}
@keyframes delivery-face-glow {
  0%, 9%, 30%, 100% { opacity: .12; filter: none; }
  17%, 24% { opacity: .58; filter: drop-shadow(0 0 5px var(--cyan)); }
}
@keyframes delivery-mark-reveal {
  0%, 47%, 88%, 100% { opacity: 0; }
  58%, 78% { opacity: .5; }
}

/* Orbit numbering is confirmed from the sun outwards. */
.planet-orbit {
  --orbit-x: 0px;
  left: calc(50% + var(--orbit-x));
}
.orbit-principles { --orbit-x: clamp(-15px, -1.2vw, -9px); width: 35.5%; }
.orbit-resonance { width: 49.5%; }
.orbit-concepts { --orbit-x: clamp(18px, 2.35vw, 34px); width: 66.5%; }
.orbit-relevance { width: 77.7%; }

.map-core {
  isolation: isolate;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.map-core::before {
  position: absolute;
  z-index: -1;
  inset: -36px;
  border-radius: 50%;
  background: radial-gradient(circle,
    transparent 0 50%,
    color-mix(in srgb, var(--cyan) 44%, transparent) 54%,
    color-mix(in srgb, var(--cyan) 18%, transparent) 66%,
    transparent 100%);
  content: "";
  pointer-events: none;
}
.principle-map:hover .map-core {
  color: var(--cyan-dark);
  border-color: transparent;
  box-shadow: none;
}

/* Preserve terminal glyph antialiasing around animated text fills. */
h1 .hero-resonate,
.closing .resonate-word,
.closing .noise-word {
  display: inline-block;
  margin-inline: -.012em -.05em;
  padding-inline: .012em .05em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.foundation-dock {
  position: fixed;
  z-index: 19;
  top: var(--foundation-top, 0);
  right: auto;
  bottom: auto;
  left: var(--foundation-left, 16px);
  width: var(--foundation-width, calc(100% - 32px));
  margin: 0;
  border: 1px solid var(--line);
  background: var(--header-surface-scrolled);
  box-shadow: 0 14px 34px var(--shadow);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 180ms ease, transform 260ms var(--ease-out);
  backdrop-filter: blur(16px);
}
.foundation-dock.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.foundation-dock a { animation: none !important; }
.foundation-dock a.is-active {
  color: var(--cyan-dark);
  background: var(--cyan-wash);
  box-shadow: inset 0 0 24px var(--cyan-wash);
}

.status-light {
  position: relative;
  isolation: isolate;
}
.status-light::after {
  position: absolute;
  z-index: -1;
  inset: -1px;
  border: 1px solid var(--cyan-dark);
  border-radius: 50%;
  content: "";
  opacity: 0;
  pointer-events: none;
}
.internal-action:hover .status-light::after,
.internal-action:focus-visible .status-light::after {
  animation: radar-contact 1.8s ease-out infinite;
}

@media (max-width: 900px) {
  .foundation-dock a { min-height: 44px; }
}
@media (max-width: 560px) {
  .venue-node b { font-size: 6px; }
  .venue-a b,
  .venue-b b { left: 13px; }
  .venue-c b,
  .venue-d b { right: 13px; }
  .orbit-principles { width: 37%; }
  .orbit-resonance { width: 52%; }
  .orbit-concepts { width: 68%; }
  .orbit-relevance { width: 79%; }
  .map-core::before { inset: -28px; }
}
@media (prefers-reduced-motion: reduce) {
  .glyph-delivery .pyramid-face,
  .glyph-delivery .pyramid-links path,
  .glyph-delivery .glyph-points circle,
  .delivery-mark,
  .status-light::after { animation: none !important; }
  .delivery-mark { opacity: .5; }
  .foundation-dock { transition: none; }
}

/* Bart 15378 — slower connection, matched discovery points and orbital air. */
.glyph-discovery b {
  z-index: 2;
  top: 5px;
  height: 45px;
  transform-origin: 50% 45px;
}
.discovery-points {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--cyan-dark);
}
.discovery-points circle {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 3px var(--cyan-wash));
}
.approach-item.is-approach-activated .discovery-points circle,
.approach-item:hover .discovery-points circle,
.approach-item:focus-within .discovery-points circle {
  animation-duration: 4.8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.discovery-points .point-apex { animation-name: discovery-hit-apex; }
.discovery-points .point-right { animation-name: discovery-hit-right; }
.discovery-points .point-low-right { animation-name: discovery-hit-low-right; }
.discovery-points .point-low-left { animation-name: discovery-hit-low-left; }
.discovery-points .point-left { animation-name: discovery-hit-left; }
@keyframes discovery-hit-apex {
  0% { opacity: 0; transform: scale(.5); }
  2%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes discovery-hit-right {
  0%, 14% { opacity: 0; transform: scale(.5); }
  17%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes discovery-hit-low-right {
  0%, 27% { opacity: 0; transform: scale(.5); }
  30%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes discovery-hit-low-left {
  0%, 40% { opacity: 0; transform: scale(.5); }
  43%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}
@keyframes discovery-hit-left {
  0%, 51% { opacity: 0; transform: scale(.5); }
  54%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.5); }
}

.approach-item.is-approach-activated .glyph-connection .glyph-links path,
.approach-item:hover .glyph-connection .glyph-links path,
.approach-item:focus-within .glyph-connection .glyph-links path {
  animation-delay: 0s !important;
  animation-duration: 8s;
  animation-timing-function: var(--ease-smooth);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.glyph-connection .glyph-links path:nth-child(1) { animation-name: connection-link-1 !important; }
.glyph-connection .glyph-links path:nth-child(2) { animation-name: connection-link-2 !important; }
.glyph-connection .glyph-links path:nth-child(3) { animation-name: connection-link-3 !important; }
.glyph-connection .glyph-links path:nth-child(4) { animation-name: connection-link-4 !important; }
.glyph-connection .glyph-links path:nth-child(5) { animation-name: connection-link-5 !important; }
@keyframes connection-link-1 {
  0%, 4% { stroke-dashoffset: 1; opacity: .18; }
  14%, 66% { stroke-dashoffset: 0; opacity: 1; }
  72%, 100% { stroke-dashoffset: 1; opacity: .18; }
}
@keyframes connection-link-2 {
  0%, 14% { stroke-dashoffset: 1; opacity: .18; }
  24%, 72% { stroke-dashoffset: 0; opacity: 1; }
  78%, 100% { stroke-dashoffset: 1; opacity: .18; }
}
@keyframes connection-link-3 {
  0%, 24% { stroke-dashoffset: 1; opacity: .18; }
  34%, 78% { stroke-dashoffset: 0; opacity: 1; }
  84%, 100% { stroke-dashoffset: 1; opacity: .18; }
}
@keyframes connection-link-4 {
  0%, 34% { stroke-dashoffset: 1; opacity: .18; }
  44%, 84% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 1; opacity: .18; }
}
@keyframes connection-link-5 {
  0%, 44% { stroke-dashoffset: 1; opacity: .18; }
  54%, 90% { stroke-dashoffset: 0; opacity: 1; }
  96%, 100% { stroke-dashoffset: 1; opacity: .18; }
}

.glyph-delivery.is-motion-active .vertex-anchor-left {
  animation: delivery-anchor-left-down 9s var(--ease-smooth) infinite !important;
}
.glyph-delivery.is-motion-active .vertex-anchor-right {
  animation: delivery-anchor-right-down 9s var(--ease-smooth) infinite !important;
}
@keyframes delivery-face-a-upright {
  0%, 12%, 100% { d: path("M50 43 L18 54 L30 87 Z"); }
  38%, 72% { d: path("M50 30 L18 68 L30 73 Z"); }
}
@keyframes delivery-face-b-upright {
  0%, 12%, 100% { d: path("M50 43 L78 43 L72 84 Z"); }
  38%, 72% { d: path("M50 30 L78 65 L72 70 Z"); }
}
@keyframes delivery-face-c-upright {
  0%, 12%, 100% { d: path("M18 54 L50 43 L78 43 L72 84 L30 87 Z"); }
  38%, 72% { d: path("M18 68 L50 30 L78 65 L72 70 L30 73 Z"); }
}
@keyframes delivery-edge-a-upright {
  0%, 12%, 100% { d: path("M50 43 L18 54"); }
  38%, 72% { d: path("M50 30 L18 68"); }
}
@keyframes delivery-edge-b-upright {
  0%, 12%, 100% { d: path("M50 43 L78 43"); }
  38%, 72% { d: path("M50 30 L78 65"); }
}
@keyframes delivery-edge-c-upright {
  0%, 12%, 100% { d: path("M50 43 L72 84"); }
  38%, 72% { d: path("M50 30 L72 70"); }
}
@keyframes delivery-edge-d-upright {
  0%, 12%, 100% { d: path("M50 43 L30 87"); }
  38%, 72% { d: path("M50 30 L30 73"); }
}
@keyframes delivery-edge-e-upright {
  0%, 12%, 100% { d: path("M18 54 L78 43 L72 84 L30 87 L18 54"); }
  38%, 72% { d: path("M18 68 L78 65 L72 70 L30 73 L18 68"); }
}
@keyframes delivery-anchor-left-down {
  0%, 12%, 100% { transform: translateY(0); }
  38%, 72% { transform: translateY(14px); }
}
@keyframes delivery-anchor-right-down {
  0%, 12%, 100% { transform: translateY(0); }
  38%, 72% { transform: translateY(22px); }
}

.principle-map {
  width: min(100%, 760px);
  aspect-ratio: 1.05;
}
.planet-orbit {
  --orbit-y: 0px;
  top: calc(50% + var(--orbit-y));
  z-index: 1;
}
.orbit-principles {
  --orbit-x: clamp(-15px, -1.2vw, -9px);
  --orbit-y: 4px;
  width: 38%;
}
.orbit-resonance {
  --orbit-x: 3px;
  --orbit-y: -3px;
  width: 57%;
}
.orbit-concepts {
  --orbit-x: clamp(18px, 2.35vw, 34px);
  --orbit-y: 5px;
  width: 77%;
}
.orbit-relevance {
  --orbit-x: -7px;
  --orbit-y: -2px;
  width: 96%;
}

.map-core::before {
  inset: -38px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--cyan) 50%, transparent) 0%,
    color-mix(in srgb, var(--cyan) 38%, transparent) 28%,
    color-mix(in srgb, var(--cyan) 22%, transparent) 56%,
    color-mix(in srgb, var(--cyan) 9%, transparent) 78%,
    transparent 100%);
}

.planet-orbit.orbit-label-path {
  z-index: 2;
  border: 0 !important;
}
.orbit-label-path .map-node b {
  z-index: 1;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

@media (max-width: 560px) {
  .principle-map { aspect-ratio: 1; }
  .orbit-principles { width: 39%; }
  .orbit-resonance { width: 58%; }
  .orbit-concepts { width: 78%; }
  .orbit-relevance { width: 96%; }
  .map-core::before { inset: -14px; }
  h1 .hero-resonate {
    animation-name: resonate-mobile-pulse;
    animation-duration: 5.8s;
  }
}
@keyframes resonate-mobile-pulse {
  0%, 100% { background-position: 0% 50%; filter: brightness(.9); }
  50% { background-position: 100% 50%; filter: brightness(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .discovery-points circle { opacity: 1; animation: none !important; }
  .glyph-delivery.is-motion-active .vertex-anchor-left,
  .glyph-delivery.is-motion-active .vertex-anchor-right {
    animation: none !important;
  }
}

/* Bart 15387 — quieter automatic guidance, explicit night mark and roomier CTA. */
.hero-meta a {
  animation-name: foundation-scan-subtle;
}
.hero-meta a:hover,
.hero-meta a:focus-visible,
.hero-meta a.is-active {
  animation: none;
  color: var(--cyan-dark);
  background: var(--cyan-wash);
  box-shadow: inset 0 0 24px var(--cyan-wash);
}
@keyframes foundation-scan-subtle {
  0%, 18%, 100% {
    color: var(--muted);
    background: transparent;
    box-shadow: inset 0 0 0 transparent;
  }
  7%, 11% {
    color: color-mix(in srgb, var(--cyan-dark) 38%, var(--muted));
    background: color-mix(in srgb, var(--cyan-wash) 24%, transparent);
    box-shadow: inset 0 0 10px color-mix(in srgb, var(--cyan-wash) 22%, transparent);
  }
}

:root[data-theme="dark"] .delivery-mark {
  filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .delivery-mark {
    filter: invert(1) hue-rotate(180deg);
  }
}

.internal-action {
  min-width: 166px;
  gap: 26px;
  justify-content: flex-start;
  padding: 14px 26px 14px 24px;
}
.status-light { flex: 0 0 auto; }
.closing .overline { margin: 24px 0 0; }

@media (max-width: 560px) {
  .internal-action {
    min-width: 166px;
    flex-wrap: nowrap;
  }
}

/* Bart 15632 — tighter mobile hero handoff and compact, tappable navigation. */
@media (max-width: 900px) {
  .site-nav {
    padding: 6px 12px;
  }
  .site-nav.is-open {
    gap: 0;
  }
  .site-nav a {
    display: flex;
    min-height: 40px;
    align-items: center;
    padding: 0 8px;
  }
  .site-nav a::after {
    right: 8px;
    bottom: 5px;
    left: 8px;
  }
}

@media (max-width: 560px) {
  .site-nav {
    top: 63px;
  }
  .hero-copy {
    padding-bottom: 18px;
  }
  .radar-stack {
    margin-top: -12px;
  }
}

/* Bart 15675 — mobile rhythm, continuous foundation dock and closing polish. */
@media (max-width: 900px) {
  .hero {
    padding-bottom: 0;
    border-bottom: 0;
  }
  .hero > .hero-meta {
    border-bottom: 1px solid var(--line);
  }
}

.foundation-dock {
  transition: none;
}

@media (max-width: 560px) {
  .hero-copy {
    padding-bottom: 0;
  }
  .radar-stack {
    margin-top: 24px;
  }
  .radar-field {
    translate: var(--grid-snap-x, 0px) 0;
  }

  .js [data-reveal] {
    transform: translateY(24px);
    transition:
      opacity 980ms cubic-bezier(.22, .61, .36, 1),
      transform 980ms cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--reveal-order, 0) * 70ms);
  }

  .approach-item {
    grid-template-columns: 25px minmax(0, 1fr) 78px;
    gap: 10px;
    padding: 38px 0;
  }
  .item-number {
    padding-top: 5px;
    font-size: 8px;
  }
  .approach-item h3 {
    margin-bottom: 8px;
    font-size: 27px;
  }
  .approach-item p {
    font-size: 14px;
    line-height: 1.58;
  }
  .item-glyph {
    display: block;
    width: 100px;
    height: 100px;
    justify-self: center;
    transform: scale(.72);
    transform-origin: center;
  }
  /* Bart 15690 pt4 — delivery 0303: freeze the upright morph on mobile so the
     stroked edges stay locked to the vertices (animated <path> d and the dot
     transforms diverge mid-morph); the static tilted pyramid reads clean. */
  .glyph-delivery.is-motion-active .pyramid-face,
  .glyph-delivery.is-motion-active .delivery-edge,
  .glyph-delivery.is-motion-active .delivery-vertex,
  .glyph-delivery.is-motion-active .delivery-mark {
    animation: none !important;
  }

  .principles-intro > p:last-child {
    max-width: 34ch;
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.62;
  }
  .principles-intro > p:last-child span {
    display: block;
  }
  .principles-intro > p:last-child span + span {
    margin-top: 12px;
  }

  .closing {
    min-height: 650px;
    padding: 92px 24px 86px;
    justify-content: center;
  }
  .closing-grid {
    top: 52%;
    width: min(96vw, 400px);
    border-color: color-mix(in srgb, var(--cyan-dark) 18%, var(--line-soft));
    background: radial-gradient(circle,
      color-mix(in srgb, var(--cyan-wash) 58%, transparent) 0 24%,
      transparent 58%);
    box-shadow:
      0 0 0 54px color-mix(in srgb, var(--cyan-wash) 18%, transparent),
      0 0 0 108px color-mix(in srgb, var(--cyan-wash) 9%, transparent);
    opacity: .82;
  }
  .closing .overline {
    max-width: 28ch;
    margin: 26px 0 0;
    color: var(--cyan-dark);
    font-size: 8px;
    line-height: 1.5;
  }
  .closing h2 {
    max-width: 9.2em;
    margin-bottom: 38px;
    font-size: clamp(37px, 10.7vw, 44px);
    line-height: 1.02;
  }
  .closing-noise-break { display: none; }
  .closing .internal-action {
    min-width: 154px;
    justify-content: center;
    gap: 18px;
    padding: 14px 22px;
    border-color: color-mix(in srgb, var(--cyan-dark) 34%, var(--line));
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    box-shadow: 0 12px 30px var(--shadow);
  }
}

/* Bart 15816 — keep the header stable while resizing.
   The primary navigation stays visible through tablet widths, and compact
   controls are never allowed to flex-shrink into distorted intermediate sizes. */
.language-switch,
.theme-toggle,
.motion-toggle,
.header-index,
.menu-toggle {
  flex-shrink: 0;
}

.motion-toggle {
  flex-basis: 34px;
  width: 34px;
  height: 34px;
}

@media (min-width: 641px) and (max-width: 1240px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: clamp(16px, 2.4vw, 30px);
    padding-right: clamp(18px, 3vw, 40px);
    padding-left: clamp(18px, 3vw, 40px);
  }

  .header-index {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    position: static;
    display: flex;
    justify-self: center;
    gap: clamp(14px, 2.2vw, 28px);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav a {
    min-height: auto;
    padding: 0;
    font-size: clamp(9px, 1vw, 11px);
  }

  .site-nav a::after {
    right: 0;
    bottom: -7px;
    left: 0;
  }

  .header-actions {
    gap: clamp(7px, 1.3vw, 16px);
  }

  .js .menu-toggle {
    display: none;
  }
}

@media (min-width: 901px) and (max-width: 1240px) {
  .site-header {
    grid-template-columns: 1fr auto 1fr;
  }
}

@media (max-width: 380px) {
  .motion-toggle {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
  }
}