/* Generated by DesignForge from DESIGN-SPEC.json (revision 1).
   All visual properties reference semantic CSS custom properties. */
:root {
  --surface-bg: #ffffff;
  --surface-elevated: #f6f6f3;
  --surface-code: #0a0a0a;
  --text-primary: #0a0a0a;
  --text-muted: #676767;
  --text-on-code: #ffffff;
  --accent-primary: #3b5bd9;
  --accent-on-primary: #ffffff;
  --border-subtle: #DDDDDD;
  --border-strong: #949494;
  --status-ok: #1A7F37;
  --status-warn: #9A6700;
  --status-err: #CF222E;
  --glow-a: #C8D1F4;
  --glow-b: #DCE0EF;
  --font-display: 'Inter Tight Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Inter Tight Variable', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'DM Mono', 'Cascadia Mono', ui-monospace, monospace;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1.02rem;
  --text-lg: clamp(1.08rem, 1.3vw, 1.3rem);
  --text-xl: 1.42rem;
  --text-2xl: clamp(2rem, 4.4vw, 3.6rem);
  --text-display: clamp(2.9rem, 8.2vw, 7.6rem);
  --measure: 64ch;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1.25rem;
  --space-5: 2rem;
  --space-6: 4.5rem;
  --grid-gutter: 1.5rem;
  --max-width: 74rem;
  --radius-sm: 4px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-reveal: 900ms;
  --stagger-step: 90ms;
  --focus-ring: 2px solid #BE4118;
  --focus-offset: 2px;
}

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

html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-primary);
  background-color: var(--surface-bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--surface-bg);
  color: var(--text-primary);
  overflow-x: hidden;
  overflow-wrap: break-word;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-3);
  background: var(--accent-primary);
  color: var(--accent-on-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  z-index: 100;
}
.skip-link:focus {
  top: var(--space-2);
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Header & Navigation */
.site-header {
  border-bottom: 1px solid var(--border-subtle);
  background-color: var(--surface-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}
.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.brand-index-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
}
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--easing-standard);
}
.nav-links a:hover {
  background-color: var(--surface-elevated);
}

/* Buttons & Controls */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.65rem;
  padding: 0.55rem 1.05rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
}
.btn-primary {
  background-color: var(--accent-primary);
  color: var(--accent-on-primary);
}
.btn-secondary {
  background-color: var(--surface-elevated);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Sections & Typography */
.section {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--space-2) 0;
}
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-3) 0;
  max-width: 22ch;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3) 0;
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.25;
  margin: 0 0 var(--space-2) 0;
}
.prose, p {
  max-width: var(--measure);
  margin: 0 0 var(--space-3) 0;
}
.muted {
  color: var(--text-muted);
}

/* Layout archetypes */
.hero-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-5);
  align-items: start;
}
.hero-mechanism-stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mechanism-pipeline-card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.mechanism-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.mechanism-stage-box {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  background-color: var(--surface-bg);
}
.mechanism-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-5);
  align-items: start;
}
.mechanism-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}
.mechanism-step-item {
  border-left: 2px solid var(--border-strong);
  padding-left: var(--space-3);
}
.hero-bento-showcase {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-4);
  align-items: stretch;
}
.bento-grid {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
}
.bento-cell {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.bento-cell-featured {
  border-color: var(--accent-primary);
}
.hero-manifesto-split {
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: var(--space-5);
  align-items: start;
}
.manifesto-thesis-card {
  border-left: 4px solid var(--accent-primary);
  background-color: var(--surface-elevated);
  padding: var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.hero-fieldnotes-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-5);
  align-items: start;
}
.datasheet-card {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.datasheet-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}
.datasheet-card dt {
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.datasheet-card dd {
  margin: 0;
  font-weight: 600;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Terminal replay & interactive widgets */
.terminal-box {
  background-color: var(--surface-code);
  color: var(--text-on-code);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  overflow-x: auto;
}
.terminal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.mode-toggle {
  display: inline-flex;
  gap: var(--space-1);
}
.mode-btn {
  background: transparent;
  color: var(--text-on-code);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
}
.mode-btn[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--accent-on-primary);
  border-color: var(--accent-primary);
}

/* Numbered rail & specification table */
.rail-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}
.rail-item {
  border-top: 2px solid var(--border-strong);
  padding-top: var(--space-3);
}
.rail-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--accent-primary);
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-1);
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec-table th, .spec-table td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.spec-table th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Operate mode console */
.console-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.hero-split > *,
.hero-mechanism-stage > *,
.mechanism-split > *,
.hero-bento-showcase > *,
.hero-manifesto-split > *,
.hero-fieldnotes-grid > *,
.console-layout > *,
.handbook-layout > * {
  min-width: 0;
  max-width: 100%;
}
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.kpi-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.kpi-val {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}

/* Read mode handbook */
.handbook-layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.doc-tree {
  position: sticky;
  top: 4.5rem;
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-3);
}
.doc-tree ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}
.doc-tree a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  display: inline-block;
  padding: 0.25rem 0.4rem;
  border-radius: var(--radius-sm);
}
.doc-tree a:hover {
  background-color: var(--surface-elevated);
}

/* Experience mode gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
}
.work-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--surface-elevated);
}

/* Forms */
.signup-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-start;
  max-width: 34rem;
}
.input-field {
  flex: 1 1 14rem;
  min-height: 2.65rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--surface-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.form-feedback {
  width: 100%;
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.form-feedback[data-state="error"] {
  color: var(--status-err);
}
.form-feedback[data-state="success"] {
  color: var(--status-ok);
}

.site-footer {
  padding-block: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .nav-inner {
    padding-block: var(--space-2);
    gap: var(--space-2);
  }
  .nav-links {
    gap: 0.3rem 0.45rem;
  }
  .nav-links a {
    font-size: var(--text-xs);
    padding: 0.2rem 0.4rem;
  }
  .site-header .btn {
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    font-size: var(--text-xs);
  }
  .hero-split,
  .mechanism-split,
  .hero-bento-showcase,
  .hero-manifesto-split,
  .hero-fieldnotes-grid,
  .console-layout,
  .handbook-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-tree {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: var(--space-3);
  }
}

@media (max-width: 420px) {
  .signup-form {
    flex-direction: column;
    align-items: stretch;
  }
  .signup-form .btn,
  .signup-form .input-field {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* Guidance: transitions.dev 05-menu-dropdown / 06-modal / 12-error-state-shake. */
@keyframes df-menu-enter { from { opacity:0; transform:translateY(-5px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes df-dialog-enter { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes df-invalid { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-6px); } 45% { transform:translateX(4px); } 70% { transform:translateX(-2px); } }
#quick-menu-list:not([hidden]) { transform-origin:top right; animation:df-menu-enter var(--duration-base) var(--easing-standard) both; }
#spec-dialog[open] { animation:df-dialog-enter var(--duration-base) var(--easing-standard) both; }
#spec-dialog::backdrop { background:rgb(0 0 0 / .55); }
#cta-email[aria-invalid=true] { border-color:var(--status-err); animation:df-invalid 280ms ease-out; }
#cta-feedback[data-state=error] { color:var(--status-err); }
@media (prefers-reduced-motion:reduce) { #quick-menu-list:not([hidden]),#spec-dialog[open],#cta-email[aria-invalid=true] { animation:none; } }


/* ---------- Brand story (software · Product theme) ---------- */
@font-face { font-family: 'Inter Tight Variable'; src: url('./assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Tight Variable'; src: url('./assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('./assets/fonts/dm-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --ease-out: var(--easing-emphasis, cubic-bezier(0.16, 1, 0.3, 1));
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal: var(--duration-reveal, 900ms);
  --step: var(--stagger-step, 90ms);
  --gutter: clamp(1rem, 4vw, 3rem);
  --section-y: clamp(5rem, 12vw, 10rem);
  --tshadow: 0 1px 2px color-mix(in oklab, var(--surface-bg) 70%, transparent);
  color-scheme: light;
  --sun: color-mix(in oklab, var(--surface-bg) 85%, #fff);
}
html { overflow-x: hidden; overflow-x: clip; scroll-padding-top: 5.5rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { overflow-x: hidden; overflow-x: clip; font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem); line-height: 1.6; }
body { opacity: 1; }
html.bs-js body { opacity: 0; transition: opacity 700ms var(--ease-out); }
html.bs-js.bs-ready body { opacity: 1; }
.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; }
.bs-container { width: 100%; max-width: 78rem; margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.bs-mono, .bs-eyebrow, .bs-kicker, .bs-card-n, .bs-index-n, .bs-step-n, .bs-form-label { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem; }
.bs-eyebrow { color: var(--text-muted); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: 0.6rem; }
.bs-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.6; }
.bs-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-2xl); line-height: 1.04; letter-spacing: -0.025em; margin: 0; max-width: 18ch; text-wrap: balance; }
.bs-lead { font-size: var(--text-lg); line-height: 1.55; max-width: 44ch; margin: 1.4rem 0 0; text-wrap: pretty; }
.muted { color: var(--text-muted); }
::selection { background: var(--accent-primary); color: var(--accent-on-primary); }
a { color: inherit; }

/* Environment: one fixed living layer behind everything (60s+ cycles, transform only) */
.bs-env { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bs-glow { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(80px); opacity: 0.55; will-change: transform; }
.bs-glow-a { background: var(--glow-a); top: -28vmax; left: -18vmax; animation: bsDriftA 72s var(--ease-io) infinite alternate; animation-delay: -18s; }
.bs-glow-b { background: var(--glow-b); bottom: -30vmax; right: -20vmax; animation: bsDriftB 88s var(--ease-io) infinite alternate; animation-delay: -31s; }
.bs-grain { position: absolute; inset: -50%; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes bsDriftA { to { transform: translate3d(22vw, 18vh, 0) scale(1.15); } }
@keyframes bsDriftB { to { transform: translate3d(-18vw, -22vh, 0) scale(0.9); } }
.bs-meter { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.bs-meter span { display: block; height: 100%; background: var(--accent-primary); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }

/* Header */
.bs-header { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; background: transparent; transition: background-color 500ms var(--ease-out), border-color 500ms var(--ease-out), transform 500ms var(--ease-out); }
.bs-header.is-scrolled { background: color-mix(in oklab, var(--surface-bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--border-subtle); }
.bs-header .nav-inner { flex-wrap: nowrap; padding-block: 0.9rem; }
.bs-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; gap: 0.65rem; white-space: nowrap; }
.bs-mark { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--border-strong); font-size: 1rem; transition: transform 600ms var(--ease-out), background-color 300ms; }
.bs-wordmark:hover .bs-mark { transform: rotate(-12deg) scale(1.06); background: var(--surface-elevated); }
.bs-nav { gap: clamp(0.6rem, 2vw, 1.8rem); flex-wrap: nowrap; }
.bs-link { position: relative; text-decoration: none; color: var(--text-primary); font-weight: 500; font-size: 0.95rem; padding-block: 0.35rem; }
.bs-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 450ms var(--ease-out); }
.bs-link:hover::after, .bs-link:focus-visible::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Buttons: fill wipe, magnetic label, arrow slide */
.bs-btn { --mx: 0px; --my: 0px; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; border-radius: var(--radius-pill, 999px); padding: 0.95rem 1.5rem; font-weight: 600; font-size: 0.98rem; letter-spacing: 0.005em; text-decoration: none; border: 1px solid transparent; transform: translate3d(var(--mx), var(--my), 0); transition: transform 500ms var(--ease-out), color 400ms var(--ease-out), border-color 400ms, box-shadow 500ms var(--ease-out), background-color 400ms; text-shadow: none; }
.bs-btn--sm { padding: 0.6rem 1.05rem; font-size: 0.88rem; }
.bs-nav .bs-btn { border-radius: var(--radius-pill, 999px); padding: 0.6rem 1.05rem; min-height: 0; }
.bs-nav .bs-btn--primary, .bs-nav .bs-btn--primary:visited { color: var(--accent-on-primary); }
.bs-nav .bs-btn--primary:hover, .bs-nav .bs-btn--primary:focus-visible { color: var(--surface-bg); }
.bs-btn--primary { background: var(--accent-primary); color: var(--accent-on-primary); box-shadow: 0 10px 30px -14px color-mix(in oklab, var(--accent-primary) 80%, transparent); }
.bs-btn--primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--text-primary); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 600ms var(--ease-out); }
.bs-btn--primary:hover::before, .bs-btn--primary:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
.bs-btn--primary:hover, .bs-btn--primary:focus-visible { color: var(--surface-bg); box-shadow: 0 18px 40px -18px color-mix(in oklab, var(--text-primary) 70%, transparent); }
.bs-btn--ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.bs-btn--ghost:hover, .bs-btn--ghost:focus-visible { border-color: var(--text-primary); background: color-mix(in oklab, var(--surface-elevated) 70%, transparent); }
.bs-btn-arrow { display: inline-block; transition: transform 500ms var(--ease-out); }
.bs-btn:hover .bs-btn-arrow, .bs-btn:focus-visible .bs-btn-arrow { transform: translateX(4px); }
.bs-btn:active { transform: translate3d(var(--mx), var(--my), 0) scale(0.97); }
@media (pointer: coarse) { .bs-btn { min-height: 44px; } }

/* Hero */
.bs-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 7rem; padding-bottom: 6.5rem; overflow: hidden; --px: 0; --py: 0; }
.bs-kicker { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 1.6rem; color: var(--text-muted); }
.bs-kicker-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent-primary); position: relative; }
.bs-kicker-dot::after { content: ""; position: absolute; inset: -0.4rem; border-radius: 50%; border: 1px solid var(--accent-primary); opacity: 0; animation: bsPing 4.2s var(--ease-out) infinite; animation-delay: -1.2s; }
@keyframes bsPing { 0% { transform: scale(0.4); opacity: 0.8; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
.bs-h1 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-display); line-height: 0.96; letter-spacing: -0.035em; margin: 0; max-width: 12ch; text-wrap: balance; }
.bs-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; padding-right: 0.04em; }
.bs-word-in { display: inline-block; }
html.bs-js .bs-word-in { transform: translate3d(0, 108%, 0) rotate(4deg); animation: bsRise 1.2s var(--ease-out) forwards; animation-delay: calc(var(--i) * 80ms + 220ms); }
@keyframes bsRise { to { transform: translate3d(0, 0, 0) rotate(0); } }
.bs-hero .bs-lead { margin-top: 2.1rem; }
.bs-cta-row { margin-top: 2.2rem; gap: 0.8rem; display: flex; flex-wrap: wrap; }
.bs-chip { display: inline-flex; align-items: baseline; gap: 0.6rem; margin-top: 2.4rem; padding: 0.55rem 1rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: color-mix(in oklab, var(--surface-elevated) 60%, transparent); backdrop-filter: blur(10px); font-size: 0.9rem; }
.bs-chip-num { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.bs-chip-sep { width: 1px; height: 0.9rem; background: var(--border-strong); align-self: center; }
.bs-hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.bs-hero-art { margin: 0; justify-self: end; width: min(100%, 30rem); transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0); transition: transform 0s; }
.bs-hero-center { text-align: center; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.bs-hero-center .bs-h1 { max-width: 14ch; margin-inline: auto; }
.bs-hero-center .bs-lead { margin-inline: auto; }
.bs-hero-center .bs-cta-row { justify-content: center; }
.bs-horizon-art { position: absolute; left: 50%; bottom: -34%; width: min(70rem, 120vw); transform: translate3d(calc(-50% + var(--px) * -18px), calc(var(--py) * -10px), 0); opacity: 0.24; z-index: 0; -webkit-mask-image: radial-gradient(closest-side at 50% 26%, transparent 78%, #000 100%); mask-image: radial-gradient(closest-side at 50% 26%, transparent 78%, #000 100%); } /* stays behind the copy without drawing through it */
.bs-horizon-art .bs-motif { width: 100%; height: auto; }
.bs-hero-index { display: grid; grid-template-rows: auto 1fr; gap: clamp(1rem, 3vh, 3rem); min-height: calc(100svh - 13rem); }
.bs-hero-index-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.bs-hero-index-top .bs-hero-art { width: min(40%, 17rem); }
.bs-hero-index-main { align-self: end; }
.bs-hero-index-main .bs-h1 { max-width: 13ch; font-size: clamp(3rem, min(10vw, 12.5vh), 9.4rem); } /* the hero fits the first viewport */
.bs-hero-index-top .bs-hero-art { max-height: 30vh; }
.bs-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.bs-index a { display: inline-flex; gap: 0.9rem; align-items: baseline; text-decoration: none; padding-block: 0.25rem; font-weight: 500; transition: transform 450ms var(--ease-out), color 300ms; }
.bs-index a:hover, .bs-index a:focus-visible { transform: translateX(6px); }
.bs-index-n { color: var(--text-muted); }

/* Motifs */
.bs-motif { display: block; width: 100%; height: auto; overflow: visible; }
.bs-motif .lay { transform: translate3d(calc(var(--px, 0) * var(--d) * 10px), calc(var(--py, 0) * var(--d) * 10px), 0); }
.bs-motif .draw { fill: none; stroke: var(--text-primary); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
html.bs-js .bs-motif .draw { stroke-dashoffset: 1; animation: bsDraw 2.4s var(--ease-out) forwards; animation-delay: calc(var(--dl, 0s) + 0.5s); }
@keyframes bsDraw { to { stroke-dashoffset: 0; } }
.bs-motif .m-accent { stroke: var(--accent-primary); stroke-width: 2; }
.bs-motif .m-faint .draw { opacity: 0.35; }
.m-fill-a { fill: var(--glow-a); opacity: 0.75; }
.m-hill { fill: color-mix(in oklab, var(--text-primary) 30%, var(--glow-a)); opacity: 0.9; }
.m-hill-2 { fill: color-mix(in oklab, var(--text-primary) 55%, var(--glow-a)); }
.m-fill-b { fill: var(--glow-b); opacity: 0.85; }
.m-dot { fill: var(--accent-primary); }
.m-sun { animation: bsFloat 9s var(--ease-io) infinite alternate; animation-delay: -3s; transform-box: fill-box; transform-origin: center; }
.m-spin { animation: bsSpin 60s linear infinite; transform-box: view-box; transform-origin: 210px 260px; }
.m-breathe { animation: bsBreathe 8s var(--ease-io) infinite alternate; transform-box: view-box; transform-origin: 210px 260px; animation-delay: -2s; }
.m-steam .draw { animation-name: bsDraw, bsSteam; animation-duration: 2.4s, 6s; animation-iteration-count: 1, infinite; animation-direction: normal, alternate; animation-fill-mode: forwards, none; }
.m-bar { transform-box: fill-box; transform-origin: 0 50%; animation: bsBar 1.4s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms + 300ms); }
@keyframes bsFloat { to { transform: translateY(-14px); } }
@keyframes bsSpin { to { transform: rotate(360deg); } }
@keyframes bsBreathe { to { transform: scale(1.06) rotate(8deg); } }
@keyframes bsSteam { to { transform: translateY(-10px); opacity: 0.55; } }
@keyframes bsBar { from { transform: scaleX(0.2); opacity: 0; } }

/* Ribbon (the hero's one living element) */
.bs-ribbon { position: absolute; left: 0; right: 0; bottom: 1.4rem; overflow: hidden; border-block: 1px solid var(--border-subtle); padding-block: 0.8rem; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bs-ribbon-track { display: flex; width: max-content; gap: 2rem; align-items: center; font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.35rem); white-space: nowrap; animation: bsMarquee 48s linear infinite; animation-delay: -7s; animation-play-state: paused; }
.bs-ribbon.is-live .bs-ribbon-track { animation-play-state: running; }
.bs-ribbon-dot { color: var(--accent-primary); font-size: 0.8em; }
@keyframes bsMarquee { to { transform: translateX(-50%); } }

/* Sections */
.bs-section { position: relative; padding-block: var(--section-y); }
.bs-section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.bs-section-head--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }

/* Reveal choreography: start/end states are container-prefixed; delays retire after entrance */
html.bs-js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--reveal) var(--ease-out), transform var(--reveal) var(--ease-out); transition-delay: calc(var(--r, 0) * var(--step)); }
html.bs-js [data-reveal].in { opacity: 1; transform: none; }
html.bs-js [data-reveal].in.settled { transition-delay: 0s; }

/* Statement: words light up with scroll progress (--p written by the runtime) */
.bs-statement-text { font-family: var(--font-display); font-size: clamp(1.9rem, 4.6vw, 4rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 24ch; text-wrap: pretty; --p: 1; }
.bs-statement-text .w { display: inline; opacity: calc(0.22 + 0.78 * clamp(0, (var(--p) - var(--t)) * 5, 1)); transition: opacity 200ms linear; }

/* Pillars: spotlight + bounded tilt */
.bs-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2vw, 1.6rem); perspective: 1200px; }
.bs-card { --sx: 50%; --sy: 0%; --rx: 0deg; --ry: 0deg; position: relative; border-radius: var(--radius-md); }
@media (min-width: 900px) { .bs-card-grid > .bs-card:nth-child(3n + 2) { margin-top: 3.5rem; } .bs-card-grid > .bs-card:nth-child(3n + 3) { margin-top: 1.5rem; } }
.bs-card-inner { position: relative; height: 100%; padding: clamp(1.5rem, 3vw, 2.2rem); border-radius: inherit; border: 1px solid var(--border-subtle); background: color-mix(in oklab, var(--surface-elevated) 72%, transparent); overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform 700ms var(--ease-out), border-color 400ms, box-shadow 600ms var(--ease-out); }
.bs-card-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--sx) var(--sy), color-mix(in oklab, var(--glow-b) 55%, transparent), transparent 60%); opacity: 0; transition: opacity 500ms var(--ease-out); pointer-events: none; }
.bs-card:hover .bs-card-inner { border-color: var(--border-strong); box-shadow: 0 30px 60px -38px color-mix(in oklab, var(--text-primary) 55%, transparent); }
.bs-card:hover .bs-card-inner::before { opacity: 1; }
.bs-card.is-tilting .bs-card-inner { transition: transform 120ms linear, border-color 400ms, box-shadow 600ms var(--ease-out); }
.bs-card-n { color: var(--text-muted); position: relative; }
.bs-card-glyph { position: absolute; top: 1.4rem; right: 1.4rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border-strong); transition: transform 700ms var(--ease-out), background-color 400ms; }
.bs-card-glyph::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: var(--accent-primary); transform: scale(0.4); transition: transform 600ms var(--ease-out); }
.bs-card:hover .bs-card-glyph { transform: rotate(90deg); }
.bs-card:hover .bs-card-glyph::after { transform: scale(1); }
.bs-card-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -0.015em; margin: 3.2rem 0 0.7rem; position: relative; }
.bs-card-body { margin: 0; position: relative; max-width: 34ch; }

/* Moment */
.bs-moment { --hp: 0; background: var(--surface-elevated); border-block: 1px solid var(--border-subtle); }
.bs-moment-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.bs-moment-lines { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 0.4rem; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.bs-moment-lines li { opacity: calc(0.3 + 0.7 * clamp(0, (var(--hp) - var(--t)) * 4, 1)); transform: translate3d(calc((1 - clamp(0, (var(--hp) - var(--t)) * 4, 1)) * 10px), 0, 0); max-width: calc(100% - 12px); } /* rests inside the column, never past its edge */
.bs-hold { --hp: inherit; display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.5rem 1.4rem 0.5rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-bg); color: var(--text-primary); font: 600 1rem var(--font-body); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform 400ms var(--ease-out), border-color 300ms, box-shadow 500ms var(--ease-out); }
.bs-hold:hover { border-color: var(--text-primary); }
.bs-moment[data-state="holding"] .bs-hold { transform: scale(0.97); box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent-primary) 18%, transparent); }
.bs-moment[data-state="complete"] .bs-hold { border-color: var(--accent-primary); }
.bs-hold-ring { width: 2.8rem; height: 2.8rem; transform: rotate(-90deg); }
.bs-hold-ring circle { fill: none; stroke-width: 3; }
.bs-hold-ring .track { stroke: var(--border-subtle); }
.bs-hold-ring .prog { stroke: var(--accent-primary); stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: calc(126 * (1 - var(--hp))); }
.bs-moment-status { margin: 1rem 0 0; font-size: 0.92rem; }
.bs-stage { position: relative; aspect-ratio: 4 / 5; border-radius: calc(var(--radius-md) * 1.4); overflow: hidden; background: var(--surface-bg); border: 1px solid var(--border-subtle); }
.scene { position: absolute; inset: 0; }
/* shutters */
.scene-shutters .sky { position: absolute; inset: 8%; border-radius: 999px 999px 12px 12px; overflow: hidden; background: linear-gradient(to bottom, var(--glow-a), var(--glow-b)); }
.scene-shutters .sun { position: absolute; left: 50%; top: 58%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); opacity: 0.85; transform: translate3d(-50%, calc((1 - var(--hp)) * 60%), 0); }
.scene-shutters .hill { position: absolute; left: -10%; right: -10%; height: 40%; border-radius: 50% 50% 0 0; background: color-mix(in oklab, var(--text-primary) 22%, var(--glow-a)); }
.scene-shutters .h1 { bottom: -12%; } .scene-shutters .h2 { bottom: -22%; left: 30%; background: color-mix(in oklab, var(--text-primary) 38%, var(--glow-a)); }
.scene-shutters .shutter { position: absolute; top: 8%; bottom: 8%; width: 42%; background: repeating-linear-gradient(to bottom, var(--surface-elevated) 0 14px, color-mix(in oklab, var(--text-primary) 14%, var(--surface-elevated)) 14px 16px); border: 1px solid var(--border-strong); }
.scene-shutters .shutter.l { left: 8%; border-radius: 999px 0 0 12px; transform-origin: 0 50%; transform: perspective(700px) rotateY(calc(var(--hp) * -82deg)); }
.scene-shutters .shutter.r { right: 8%; border-radius: 0 999px 12px 0; transform-origin: 100% 50%; transform: perspective(700px) rotateY(calc(var(--hp) * 82deg)); }
.scene-shutters .frame { position: absolute; inset: 8%; border-radius: 999px 999px 12px 12px; border: 2px solid var(--text-primary); opacity: 0.4; }
/* pour */
.scene-pour .cup { position: absolute; left: 26%; right: 26%; top: 42%; height: 34%; border: 2px solid var(--text-primary); border-top: 0; border-radius: 0 0 46% 46% / 0 0 60% 60%; overflow: hidden; }
.scene-pour .liquid { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in oklab, var(--text-primary) 70%, var(--glow-a)), var(--glow-a)); transform-origin: 50% 100%; transform: scaleY(var(--hp)); }
.scene-pour .handle { position: absolute; right: 16%; top: 48%; width: 12%; height: 16%; border: 2px solid var(--text-primary); border-left: 0; border-radius: 0 50% 50% 0; }
.scene-pour .saucer { position: absolute; left: 16%; right: 16%; top: 78%; height: 4%; border-radius: 50%; background: var(--glow-b); }
.scene-pour .steam { position: absolute; bottom: 60%; width: 2px; height: 18%; background: var(--text-primary); border-radius: 2px; opacity: calc(var(--hp) * 0.5); transform: translate3d(0, calc((1 - var(--hp)) * 20px), 0); }
.scene-pour .st1 { left: 42%; } .scene-pour .st2 { left: 50%; height: 24%; } .scene-pour .st3 { left: 58%; }
/* breathe */
.scene-breathe { display: grid; place-items: center; }
.scene-breathe .ring, .scene-breathe .core { position: absolute; border-radius: 50%; left: 50%; top: 50%; translate: -50% -50%; }
.scene-breathe .core { width: 30%; aspect-ratio: 1; background: var(--accent-primary); opacity: 0.75; transform: scale(calc(0.7 + var(--hp) * 0.9)); }
.scene-breathe .ring { border: 1px solid var(--text-primary); aspect-ratio: 1; }
.scene-breathe .r1 { width: 46%; transform: scale(calc(0.8 + var(--hp) * 0.5)); opacity: 0.5; }
.scene-breathe .r2 { width: 64%; transform: scale(calc(0.85 + var(--hp) * 0.35)); opacity: 0.35; background: color-mix(in oklab, var(--glow-a) 40%, transparent); }
.scene-breathe .r3 { width: 86%; transform: scale(calc(0.9 + var(--hp) * 0.2)); opacity: 0.25; background: color-mix(in oklab, var(--glow-b) 35%, transparent); }
/* untangle */
.scene-untangle { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--glow-a) 60%, transparent), transparent 70%); }
.scene-untangle svg { width: 86%; overflow: visible; }
.scene-untangle path { fill: none; stroke-linecap: round; }
.scene-untangle .tangle { stroke: var(--text-primary); stroke-width: 2; opacity: calc(1 - var(--hp)); }
.scene-untangle .straight { stroke: var(--accent-primary); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hp)); }
.scene-untangle .end { fill: var(--accent-primary); opacity: var(--hp); }
/* develop */
.scene-develop .dev { position: absolute; inset: 0; background: linear-gradient(160deg, var(--glow-a), var(--glow-b)); }
.scene-develop .dev span { position: absolute; border-radius: 50%; background: var(--text-primary); }
.scene-develop .b1 { width: 46%; aspect-ratio: 1; left: 12%; top: 18%; opacity: 0.85; }
.scene-develop .b2 { width: 30%; aspect-ratio: 1; right: 10%; bottom: 20%; background: var(--accent-primary) !important; }
.scene-develop .b3 { width: 70%; height: 2px; left: 15%; bottom: 12%; border-radius: 2px !important; }
.scene-develop .dev-soft { filter: blur(14px) saturate(0.6); opacity: calc(1 - var(--hp)); }
.scene-develop .dev-sharp { opacity: var(--hp); }
/* bloom */
.scene-bloom { display: grid; place-items: center; }
.scene-bloom .dot { position: absolute; left: 50%; top: 50%; width: 14%; aspect-ratio: 1; margin: -7% 0 0 -7%; border-radius: 50%; background: var(--glow-b); --k: clamp(0, (var(--hp) - var(--i) / 12) * 4, 1); opacity: calc(0.2 + var(--k) * 0.8); transform: rotate(calc(var(--i) * 40deg)) translateY(calc(-100% - var(--k) * 90%)) scale(calc(0.6 + var(--k) * 0.5)); box-shadow: 0 0 0 1px var(--border-strong); }
.scene-bloom .heart { position: absolute; left: 50%; top: 50%; width: 18%; aspect-ratio: 1; margin: -9% 0 0 -9%; border-radius: 50%; background: var(--accent-primary); transform: scale(calc(0.6 + var(--hp) * 0.5)); }

/* Process: a line that draws itself with scroll, steps light in sequence */
.bs-steps-wrap { position: relative; --dp: 1; }
.bs-steps-line { position: absolute; left: 0; right: 0; top: 1.15rem; width: 100%; height: 40px; overflow: visible; }
.bs-steps-line path { fill: none; vector-effect: non-scaling-stroke; }
.bs-steps-line .base { stroke: var(--border-subtle); stroke-width: 1; }
.bs-steps-line .lit { stroke: var(--accent-primary); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--dp)); }
.bs-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); position: relative; }
.bs-step-n { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-bg); position: relative; z-index: 1; transition: background-color 500ms var(--ease-out), color 500ms, border-color 500ms, transform 600ms var(--ease-out); }
.bs-step.is-lit .bs-step-n { background: var(--text-primary); color: var(--surface-bg); border-color: var(--text-primary); transform: scale(1.08); }
.bs-step-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 1.6rem 0 0.5rem; letter-spacing: -0.01em; }
.bs-step p { margin: 0; max-width: 30ch; }

/* Gallery plates (designed slots for real photography) */
.bs-plate-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.4rem); }
.bs-plate { margin: 0; }
.bs-plate-1 { grid-column: 1 / span 7; } .bs-plate-2 { grid-column: 8 / span 5; margin-top: 4rem; }
.bs-plate-3 { grid-column: 1 / span 5; } .bs-plate-4 { grid-column: 6 / span 7; margin-top: 2.5rem; }
.bs-plate-grid { align-items: start; row-gap: clamp(1.5rem, 4vw, 3rem); }
.bs-plate-frame { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; border: 1px solid var(--border-subtle); }
.bs-plate-2 .bs-plate-frame, .bs-plate-3 .bs-plate-frame { aspect-ratio: 4 / 5; }
.bs-plate-art { position: absolute; inset: -10% 0; display: grid; place-items: center; transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1.02); transition: transform 1200ms var(--ease-out); background: radial-gradient(60% 50% at 30% 30%, var(--glow-b), transparent 70%), radial-gradient(70% 60% at 80% 80%, var(--glow-a), transparent 70%), var(--surface-elevated); }
.bs-plate-2 .bs-plate-art { background: radial-gradient(80% 60% at 50% 20%, var(--glow-a), transparent 70%), linear-gradient(to top, color-mix(in oklab, var(--text-primary) 30%, var(--surface-elevated)), var(--surface-elevated)); }
.bs-plate-4 .bs-plate-art { background: linear-gradient(120deg, var(--glow-a), var(--glow-b)); }
.bs-plate:hover .bs-plate-art { transform: translate3d(0, calc(var(--py, 0) * 1px), 0) scale(1.07); }
.bs-plate-motif { width: 62%; height: auto; overflow: visible; }
.bs-plate-motif .draw { fill: none; stroke: var(--text-primary); stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: 0.55; }
.bs-plate-sun { width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); opacity: 0.8; animation: bsFloat 11s var(--ease-io) infinite alternate; animation-delay: -4s; }
.bs-plate-band { position: absolute; left: 0; right: 0; bottom: 18%; height: 22%; background: color-mix(in oklab, var(--text-primary) 18%, transparent); }
.bs-plate figcaption { display: flex; gap: 0.7rem; align-items: baseline; margin-top: 0.8rem; font-size: 0.95rem; }

/* CTA */
.bs-cta { text-align: left; }
.bs-cta-inner { padding: clamp(2rem, 6vw, 5rem); border-radius: calc(var(--radius-md) * 1.6); background: var(--surface-code); color: var(--text-on-code); overflow: hidden; position: relative; }
.bs-cta-inner::after { content: ""; position: absolute; width: 40rem; height: 40rem; right: -14rem; top: -18rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--glow-b) 50%, transparent), transparent 65%); pointer-events: none; animation: bsFloat 14s var(--ease-io) infinite alternate; animation-delay: -6s; }
.bs-cta-inner .bs-eyebrow, .bs-cta-inner .muted { color: color-mix(in oklab, var(--text-on-code) 78%, var(--surface-code)); }
.bs-cta-title { font-size: clamp(2.3rem, 6vw, 5rem); max-width: 16ch; position: relative; z-index: 1; }
.bs-form { margin-top: 2.4rem; max-width: 36rem; position: relative; z-index: 1; display: block; }
.bs-form-label { display: block; margin-bottom: 0.6rem; color: color-mix(in oklab, var(--text-on-code) 78%, var(--surface-code)); }
.bs-form-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.bs-input { flex: 1 1 15rem; min-height: 3.2rem; padding: 0.8rem 1.2rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--text-on-code) 45%, transparent); background: color-mix(in oklab, var(--surface-code) 85%, var(--text-on-code)); color: var(--text-on-code); font: inherit; transition: border-color 300ms, box-shadow 400ms var(--ease-out); }
.bs-input::placeholder { color: color-mix(in oklab, var(--text-on-code) 62%, var(--surface-code)); }
.bs-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-primary) 30%, transparent); }
.bs-input[aria-invalid="true"] { border-color: var(--status-err); animation: bsShake 380ms var(--ease-out); }
@keyframes bsShake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.bs-cta-inner .bs-btn--primary:hover, .bs-cta-inner .bs-btn--primary:focus-visible { color: var(--surface-code); }
.bs-cta-inner .bs-btn--primary::before { background: var(--text-on-code); }
.bs-feedback { margin: 0.9rem 0 0; min-height: 1.5em; font-size: 0.92rem; }
.bs-feedback[data-state="error"] { color: color-mix(in oklab, var(--status-err) 40%, var(--text-on-code)); }
.bs-feedback[data-state="success"] { color: var(--text-on-code); }

/* Footer */
.bs-footer { border-top: 1px solid var(--border-subtle); padding-top: 3rem; background: transparent; overflow: hidden; }
.bs-footer-row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.bs-footer-nav { gap: 1.4rem; }
.bs-giant { font-family: var(--font-display); font-size: clamp(3.5rem, 15vw, 15rem); line-height: 0.85; letter-spacing: -0.05em; margin: 2.5rem 0 -0.08em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px var(--border-strong); background: linear-gradient(to top, var(--glow-a), transparent 75%); -webkit-background-clip: text; background-clip: text; }

/* Pause living elements off-screen and on hidden tabs */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* Responsive */
@media (max-width: 960px) {
  .bs-hero { min-height: auto; padding-bottom: 2rem; }
  .bs-ribbon { position: relative; bottom: auto; margin-top: 3rem; }
  .bs-horizon-art { bottom: auto; top: 55%; }
  .bs-hero-split, .bs-moment-grid { grid-template-columns: minmax(0, 1fr); }
  .bs-hero-art { justify-self: start; width: min(78%, 22rem); }
  .bs-steps { grid-template-columns: minmax(0, 1fr); }
  .bs-steps-line { display: none; }
  .bs-plate-grid > .bs-plate { grid-column: 1 / -1; margin-top: 0; }
  .bs-hero-index-top { flex-direction: column-reverse; }
}
@media (max-width: 720px) {
  .bs-nav-opt { display: none; }
  .bs-hero { padding-top: 6.5rem; }
  .bs-hero-art { width: min(70%, 16rem); }
  .bs-hero-index-top .bs-hero-art { width: min(52%, 12rem); }
  .bs-wordmark > span:last-child { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-height: 560px) { .bs-ribbon { display: none; } }

/* Reduced motion: every choreographed element shows its finished state */
@media (prefers-reduced-motion: reduce) {
  html.bs-js body { opacity: 1; transition: none; }
  html.bs-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.bs-js .bs-word-in { transform: none; animation: none; }
  html.bs-js .bs-motif .draw { stroke-dashoffset: 0; animation: none; }
  .bs-glow, .bs-ribbon-track, .m-sun, .m-spin, .m-breathe, .m-bar, .bs-plate-sun, .bs-cta-inner::after, .bs-kicker-dot::after { animation: none !important; }
  .bs-statement-text { --p: 1 !important; }
  .bs-statement-text .w { opacity: 1; }
  .bs-steps-wrap { --dp: 1 !important; }
  .bs-card-inner, .bs-hero-art, .bs-horizon-art, .bs-plate-art, .bs-motif .lay { transform: none !important; }
  .bs-horizon-art { transform: translateX(-50%) !important; }
}

/* ---------- Scroll-scrubbed hero (supplied footage) ---------- */
.bs-hero--scrub { --hero-ink: var(--surface-bg); --hero-scrim: var(--text-primary); --tshadow-hero: 0 1px 2px color-mix(in oklab, var(--hero-scrim) 95%, transparent), 0 3px 12px color-mix(in oklab, var(--hero-scrim) 78%, transparent), 0 10px 44px color-mix(in oklab, var(--hero-scrim) 80%, transparent); display: block; min-height: 0; padding: 0; overflow: visible; --ld: 126; }
.bs-scrub-track { position: relative; height: var(--scrub-vh, 400vh); }
.bs-scrub-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; color: var(--hero-ink); background: color-mix(in oklab, var(--hero-scrim) 94%, var(--glow-a)); }
.bs-visual { position: absolute; inset: 0; z-index: 0; }
.bs-poster, .bs-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.bs-video { opacity: 0; transition: opacity 700ms var(--ease-out); will-change: transform; transform: translateZ(0); }
.bs-hero--scrub.video-ready .bs-video { opacity: 1; }
.bs-hero--scrub.video-failed .bs-video { display: none; }
.bs-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 45%, transparent 35%, color-mix(in oklab, var(--hero-scrim) 62%, transparent) 100%); }
.bs-band { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; opacity: var(--bo, 1); transform: translate3d(0, calc((1 - var(--k, 1)) * 28px), 0); pointer-events: none; text-shadow: var(--tshadow-hero); }
.bs-band.is-on { pointer-events: auto; }
.bs-band::before { content: ""; position: absolute; inset: -4%; z-index: -1; pointer-events: none; opacity: calc(0.25 + 0.75 * var(--k, 1)); background: radial-gradient(ellipse 74% 62% at 30% 50%, color-mix(in oklab, var(--hero-scrim) 70%, transparent) 0%, color-mix(in oklab, var(--hero-scrim) 46%, transparent) 46%, transparent 76%); }
.bs-band .btn, .bs-band .bs-btn { text-shadow: none; }
.bs-band-inner { max-width: 44rem; }
.bs-hero--scrub .bs-kicker, .bs-hero--scrub .bs-eyebrow, .bs-hero--scrub .bs-lead { color: color-mix(in oklab, var(--hero-ink) 86%, transparent); }
.bs-hero--scrub .bs-h1 { max-width: 12ch; }
.bs-hero--scrub .bs-btn--ghost { color: var(--hero-ink); border-color: color-mix(in oklab, var(--hero-ink) 55%, transparent); background: color-mix(in oklab, var(--hero-scrim) 35%, transparent); }
.bs-hero--scrub .bs-btn--ghost:hover, .bs-hero--scrub .bs-btn--ghost:focus-visible { border-color: var(--hero-ink); background: color-mix(in oklab, var(--hero-scrim) 55%, transparent); }
.bs-hero--scrub .bs-chip { color: var(--hero-ink); border-color: color-mix(in oklab, var(--hero-ink) 40%, transparent); background: color-mix(in oklab, var(--hero-scrim) 55%, transparent); }
.bs-band-statement { font-family: var(--font-display); font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; max-width: 24ch; text-wrap: pretty; }
.bs-settle-line { font-family: var(--font-display); font-size: clamp(1.4rem, 2.8vw, 2.4rem); margin: 0 0 0.5rem; letter-spacing: -0.01em; max-width: 26ch; }
.bs-ring { position: absolute; z-index: 3; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); width: 2.4rem; height: 2.4rem; transform: rotate(-90deg); transition: opacity 500ms var(--ease-out); pointer-events: none; }
.bs-ring circle { fill: none; stroke-width: 3; }
.bs-ring .track { stroke: color-mix(in oklab, var(--hero-ink) 28%, transparent); }
.bs-ring .prog { stroke: var(--hero-ink); stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: var(--ld, 126); }
.bs-hero--scrub.video-ready .bs-ring, .bs-hero--scrub.video-failed .bs-ring { opacity: 0; }
.bs-hero--scrub .bs-ribbon { position: relative; bottom: auto; }
@media (max-height: 560px) { .bs-hero--scrub .bs-ribbon { display: initial; } }
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
.bs-hero--scrub .bs-scrub-track { height: auto; }
.bs-hero--scrub .bs-scrub-stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 6vw, 3.5rem); padding: 7rem 0 4rem; }
.bs-hero--scrub .bs-visual { background-image: var(--still, none); background-size: cover; background-position: center; }
.bs-hero--scrub .bs-poster, .bs-hero--scrub .bs-video, .bs-hero--scrub .bs-ring { display: none; }
.bs-hero--scrub .bs-band { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.bs-hero--scrub .bs-band::before { opacity: 1 !important; }
.bs-hero--scrub .bs-band-inner { max-width: 42rem; }
}
.bs-hero--scrub.is-static .bs-scrub-track { height: auto; }
.bs-hero--scrub.is-static .bs-scrub-stage { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, 6vw, 3.5rem); padding: 7rem 0 4rem; }
.bs-hero--scrub.is-static .bs-visual { background-image: var(--still, none); background-size: cover; background-position: center; }
.bs-hero--scrub.is-static .bs-poster, .bs-hero--scrub.is-static .bs-video, .bs-hero--scrub.is-static .bs-ring { display: none; }
.bs-hero--scrub.is-static .bs-band { position: relative; inset: auto; opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
.bs-hero--scrub.is-static .bs-band::before { opacity: 1 !important; }
.bs-hero--scrub.is-static .bs-band-inner { max-width: 42rem; }



/* ---------- Paper Grid (supplied portfolio) ---------- */
html[data-concept="brand-paper"] {
  --pp-ink: var(--text-primary);
  --pp-paper: var(--surface-bg);
  --pp-muted: var(--text-muted);
  --pp-line: color-mix(in oklab, var(--text-primary) 14%, transparent);
  --pp-line-2: color-mix(in oklab, var(--text-primary) 6%, transparent);
  --pp-navy: #1c2541; --pp-blue: #3b5bd9; --pp-yellow: #f5c518; --pp-red: #c93a1e; --pp-neon: #d8ff00;
  --pp-cell: 14px;
  --pp-g: clamp(20px, 4.4vw, 56px);
  --pp-max: 1176px;
  --pp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --pp-cut: polygon(8px 0, calc(100% - 8px) 0, calc(100% - 8px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 3px) calc(100% - 8px), calc(100% - 3px) calc(100% - 3px), calc(100% - 8px) calc(100% - 3px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 8px), 0 calc(100% - 8px), 0 8px, 3px 8px, 3px 3px, 8px 3px);
  scroll-padding-top: 4rem;
}
html[data-concept="brand-paper"] body { background: var(--pp-paper); color: var(--pp-ink); font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.5; font-feature-settings: "ss01" 0, "cv11" 1; opacity: 1; }
html[data-concept="brand-paper"] .pp-grid-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--pp-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--pp-line-2) 1px, transparent 1px); background-size: var(--pp-cell) var(--pp-cell); }
html[data-concept="brand-paper"] .pp-meter { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; pointer-events: none; }
html[data-concept="brand-paper"] .pp-meter span { display: block; height: 100%; background: var(--pp-blue); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
html[data-concept="brand-paper"] .pp-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; line-height: 1.5; }
html[data-concept="brand-paper"] .pp-wrap { width: 100%; max-width: var(--pp-max); margin-inline: auto; }
html[data-concept="brand-paper"] .pp-main { position: relative; z-index: 1; }
html[data-concept="brand-paper"] ::selection { background: var(--pp-ink); color: var(--pp-paper); }
html[data-concept="brand-paper"] a { color: inherit; }
html[data-concept="brand-paper"] :focus-visible { outline: 2px solid var(--pp-blue); outline-offset: 3px; }

/* Top-right chip (nav) */
html[data-concept="brand-paper"] .pp-chip { position: fixed; top: 0; right: 0; z-index: 60; background: var(--pp-paper); border-bottom: 1px solid var(--pp-line); border-left: 1px solid var(--pp-line); transition: box-shadow 0.3s; }
html[data-concept="brand-paper"] .pp-chip.is-scrolled { box-shadow: 0 10px 30px -22px rgba(10,10,10,0.5); }
html[data-concept="brand-paper"] .pp-chip-list { display: flex; margin: 0; padding: 0; list-style: none; }
html[data-concept="brand-paper"] .pp-chip-link { display: block; padding: 14px 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s steps(3), color 0.2s steps(3); }
html[data-concept="brand-paper"] .pp-chip-link:hover, html[data-concept="brand-paper"] .pp-chip-link[aria-current="true"] { background: var(--pp-ink); color: var(--pp-paper); }

/* Hero */
html[data-concept="brand-paper"] .pp-hero { position: relative; min-height: max(100svh, 640px); padding-top: 50px; display: flex; flex-direction: column; }
html[data-concept="brand-paper"] .pp-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
html[data-concept="brand-paper"] .pp-mast { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 0.62fr) minmax(0, 0.9fr); gap: 28px; padding: 22px var(--pp-g) 0; align-items: start; }
html[data-concept="brand-paper"] .pp-h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4.5vw, 70px); line-height: 0.98; letter-spacing: -0.035em; text-transform: uppercase; }
html[data-concept="brand-paper"] .pp-ln { display: block; padding-bottom: 0.06em; margin-bottom: -0.06em; }
html[data-concept="brand-paper"] .pp-ln > span { display: block; }
html[data-concept="brand-paper"] .pp-tag { margin: 0.5em 0 0; font-size: 13px; line-height: 1.45; letter-spacing: 0.04em; text-transform: uppercase; text-align: justify; text-align-last: justify; }
html[data-concept="brand-paper"] .pp-mast-r { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-top: 0.4em; }
html[data-concept="brand-paper"] .pp-logo { display: block; }
html[data-concept="brand-paper"] .pp-intro-s { margin: 0; font-size: 13px; line-height: 1.5; max-width: 34ch; text-wrap: balance; }
html[data-concept="brand-paper"] .pp-status { position: absolute; left: var(--pp-g); bottom: 28px; z-index: 3; margin: 0; max-width: min(76ch, calc(100% - 140px)); color: var(--pp-muted); background: color-mix(in oklab, var(--pp-paper) 86%, transparent); padding: 6px 10px; border: 1px solid var(--pp-line); }
html[data-concept="brand-paper"] .pp-status b { font-weight: 400; color: var(--pp-ink); }
html[data-concept="brand-paper"] .pp-prompt { color: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-status.is-typing .pp-status-t::after { content: ""; display: inline-block; width: 0.6em; height: 1em; margin-left: 3px; vertical-align: -0.15em; background: var(--pp-ink); animation: ppBlink 0.8s steps(2) infinite; }
@keyframes ppBlink { 50% { opacity: 0; } }
html[data-concept="brand-paper"] .pp-cue { position: absolute; right: var(--pp-g); bottom: 28px; z-index: 3; display: flex; align-items: center; gap: 10px; text-decoration: none; }
html[data-concept="brand-paper"] .pp-cue i { width: 10px; height: 10px; background: var(--pp-ink); animation: ppCue 1.4s steps(4) infinite; }
@keyframes ppCue { 0% { transform: translateY(-4px); } 100% { transform: translateY(6px); } }

/* Statement */
html[data-concept="brand-paper"] .pp-intro { position: relative; z-index: 2; padding: calc(var(--pp-cell) * 8) var(--pp-g) 0; }
html[data-concept="brand-paper"] .pp-lead { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.6vw, 50px); line-height: 1.08; letter-spacing: -0.025em; max-width: 24ch; text-wrap: pretty; }
html[data-concept="brand-paper"] .pp-lead { max-width: 30ch; }
html[data-concept="brand-paper"] .pp-lead em { font-style: normal; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-by { margin: 22px 0 0; color: var(--pp-muted); }
html.pp-js[data-concept="brand-paper"] .pp-w { display: inline-block; opacity: 0; transform: translateY(0.5em); }
html.pp-js[data-concept="brand-paper"] .pp-lead.in .pp-w { opacity: 1; transform: none; transition: opacity 0.5s steps(5) calc(var(--i, 0) * 28ms), transform 0.5s steps(5) calc(var(--i, 0) * 28ms); }

/* Reveal */
html.pp-js[data-concept="brand-paper"] .pp-r { opacity: 0; transform: translateY(18px); }
html.pp-js[data-concept="brand-paper"] .pp-r.in { opacity: 1; transform: none; transition: opacity 0.7s steps(6) calc(var(--r, 0) * 110ms), transform 0.7s steps(6) calc(var(--r, 0) * 110ms); }

/* Headings */
html[data-concept="brand-paper"] .pp-h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; max-width: 16ch; text-wrap: balance; }
html[data-concept="brand-paper"] .pp-kick { color: var(--pp-muted); margin: 14px 0 0; }
html[data-concept="brand-paper"] .pp-pd { margin: 0; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; max-width: 46ch; color: color-mix(in oklab, var(--pp-ink) 82%, var(--pp-paper)); text-wrap: pretty; }

/* Pixel-cut buttons */
html[data-concept="brand-paper"] .pp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 34px; text-decoration: none; font-family: var(--font-body); font-weight: 500; font-size: clamp(15px, 1.2vw, 18px); letter-spacing: -0.01em; color: var(--pp-paper); background: linear-gradient(var(--pp-blue), var(--pp-blue)) left / 0% 100% no-repeat, var(--pp-ink); clip-path: var(--pp-cut); transition: background-size 0.4s steps(7), transform 0.25s var(--pp-ease); }
html[data-concept="brand-paper"] .pp-btn:hover, html[data-concept="brand-paper"] .pp-btn:focus-visible { background-size: 100% 100%; transform: translateY(-2px); }
html[data-concept="brand-paper"] .pp-btn-a { transition: transform 0.3s steps(4); }
html[data-concept="brand-paper"] .pp-btn:hover .pp-btn-a { transform: translate(3px, -3px); }
html[data-concept="brand-paper"] .pp-ph .pp-btn { margin-top: 6px; }

/* Carousel */
html[data-concept="brand-paper"] .pp-caro { position: relative; z-index: 2; padding: calc(var(--pp-cell) * 9) 0 calc(var(--pp-cell) * 5); }
html[data-concept="brand-paper"] .pp-ch { max-width: var(--pp-max); margin: 0 auto calc(var(--pp-cell) * 2.4); padding: 0 var(--pp-g); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
html[data-concept="brand-paper"] .pp-ctrl { display: flex; align-items: center; gap: 8px; }
html[data-concept="brand-paper"] .pp-count { color: var(--pp-muted); margin-right: 10px; }
html[data-concept="brand-paper"] .pp-arrow { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: var(--pp-ink); color: var(--pp-paper); cursor: pointer; font-size: 18px; font-family: var(--font-body); clip-path: var(--pp-cut); transition: background 0.2s steps(3); }
html[data-concept="brand-paper"] .pp-arrow:hover { background: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-track { display: flex; gap: clamp(16px, 2.2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px max(var(--pp-g), calc((100vw - var(--pp-max)) / 2 + var(--pp-g))) 14px; scroll-padding-inline: max(var(--pp-g), calc((100vw - var(--pp-max)) / 2 + var(--pp-g))); cursor: grab; }
html[data-concept="brand-paper"] .pp-track::-webkit-scrollbar { display: none; }
html[data-concept="brand-paper"] .pp-track.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
html[data-concept="brand-paper"] .pp-slide { flex: 0 0 auto; width: min(80vw, 400px); scroll-snap-align: start; display: flex; flex-direction: column; text-align: center; }
html[data-concept="brand-paper"] .pp-pv { position: relative; aspect-ratio: 5 / 4; overflow: hidden; background: #f1f1ec; border: 1px solid var(--pp-line); }
html[data-concept="brand-paper"] .pp-pv canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
html[data-concept="brand-paper"] .pp-pv-id { position: absolute; left: 12px; top: 10px; z-index: 2; background: var(--pp-paper); padding: 4px 8px; color: var(--pp-ink); }
html[data-concept="brand-paper"] .pp-pv-bars { position: absolute; inset: 0; z-index: 1; pointer-events: none; transform: translateY(100%); background: linear-gradient(to top, rgba(10,10,10,0.8) 0, rgba(10,10,10,0.8) 14px, rgba(10,10,10,0.52) 14px, rgba(10,10,10,0.52) 28px, rgba(10,10,10,0.28) 28px, rgba(10,10,10,0.28) 42px, rgba(10,10,10,0.1) 42px, rgba(10,10,10,0.1) 56px, rgba(10,10,10,0) 56px); transition: transform 0.45s steps(5); }
html[data-concept="brand-paper"] .pp-slide:hover .pp-pv-bars, html[data-concept="brand-paper"] .pp-slide:focus-within .pp-pv-bars { transform: translateY(0); }
html[data-concept="brand-paper"] .pp-sl-cap { padding: 20px 6px 10px; display: flex; flex-direction: column; align-items: center; }
html[data-concept="brand-paper"] .pp-sl-t { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2vw, 28px); line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
html[data-concept="brand-paper"] .pp-sl-link { text-decoration: none; background: repeating-linear-gradient(90deg, var(--pp-ink) 0 4px, transparent 4px 7px) left bottom / 0% 3px no-repeat; transition: background-size 0.45s var(--pp-ease); padding-bottom: 2px; }
html[data-concept="brand-paper"] .pp-sl-link:hover { background-size: 100% 3px; }
html[data-concept="brand-paper"] .pp-sl-d { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; max-width: 34ch; color: color-mix(in oklab, var(--pp-ink) 82%, var(--pp-paper)); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
html[data-concept="brand-paper"] .pp-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
html[data-concept="brand-paper"] .pp-tags li { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1; padding: 7px 12px; background: var(--c, var(--pp-navy)); color: var(--tc, #fff); clip-path: polygon(5px 0, calc(100% - 5px) 0, calc(100% - 5px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 2px) calc(100% - 5px), calc(100% - 2px) calc(100% - 2px), calc(100% - 5px) calc(100% - 2px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 5px), 0 calc(100% - 5px), 0 5px, 2px 5px, 2px 2px, 5px 2px); }
html[data-concept="brand-paper"] .pp-tags .t0 { --c: var(--pp-navy); }
html[data-concept="brand-paper"] .pp-tags .t1 { --c: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-tags .t2 { --c: var(--pp-ink); --tc: var(--pp-paper); }
html[data-concept="brand-paper"] .pp-tags .t3 { --c: var(--pp-neon); --tc: #0a0a0a; }
html[data-concept="brand-paper"] .pp-tags .t4 { --c: var(--pp-yellow); --tc: #0a0a0a; }
html[data-concept="brand-paper"] .pp-tags .t5 { --c: var(--pp-red); }
html[data-concept="brand-paper"] .pp-sl-m { margin: 12px 0 0; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-hint { max-width: var(--pp-max); margin: 8px auto 0; padding: 0 var(--pp-g); color: var(--pp-muted); }

/* Editorial rows */
html[data-concept="brand-paper"] .pp-ed { position: relative; z-index: 2; padding: calc(var(--pp-cell) * 6) var(--pp-g); }
html[data-concept="brand-paper"] .pp-ed-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; column-gap: calc(var(--pp-cell) * 6); align-items: start; }
html[data-concept="brand-paper"] .pp-head { position: sticky; top: 72px; }
html[data-concept="brand-paper"] .pp-body > p { margin: 0 0 1.05em; max-width: 48ch; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.62; color: color-mix(in oklab, var(--pp-ink) 84%, var(--pp-paper)); text-wrap: pretty; }
html[data-concept="brand-paper"] .pp-body > p.pp-s { color: var(--pp-muted); font-size: 14.5px; }
html[data-concept="brand-paper"] .pp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pp-cell) * 3) calc(var(--pp-cell) * 2); margin-top: calc(var(--pp-cell) * 1); }
html[data-concept="brand-paper"] .pp-col { border-top: 1px solid var(--pp-line); padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
html[data-concept="brand-paper"] .pp-ico { color: var(--pp-ink); height: 40px; display: flex; align-items: center; transition: transform 0.4s steps(4); }
html[data-concept="brand-paper"] .pp-col:hover .pp-ico { transform: translateY(-4px); color: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-col-l { color: var(--pp-muted); margin: 0; }
html[data-concept="brand-paper"] .pp-col-list { list-style: none; margin: 4px 0 0; padding: 0; }
html[data-concept="brand-paper"] .pp-col-list li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--pp-line-2); font-size: 14.5px; line-height: 1.45; color: color-mix(in oklab, var(--pp-ink) 86%, var(--pp-paper)); }
html[data-concept="brand-paper"] .pp-col-list li .pp-mono { color: var(--pp-muted); font-size: 10px; padding-top: 3px; }

/* Process */
html[data-concept="brand-paper"] .pp-proc { position: relative; z-index: 2; padding: calc(var(--pp-cell) * 6) var(--pp-g); }
html[data-concept="brand-paper"] .pp-ph { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: calc(var(--pp-cell) * 2); }
html[data-concept="brand-paper"] .pp-ph .pp-kick { margin: -6px 0 0; }
html[data-concept="brand-paper"] .pp-flow { width: 100%; aspect-ratio: 3.4 / 1; margin-bottom: clamp(16px, 3vh, 30px); }
html[data-concept="brand-paper"] .pp-flow canvas { width: 100%; height: 100%; display: block; }
html[data-concept="brand-paper"] .pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
html[data-concept="brand-paper"] .pp-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html[data-concept="brand-paper"] .pp-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-concept="brand-paper"] .pp-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding-bottom: 22px; transition: opacity 0.3s; }
html[data-concept="brand-paper"] .pp-steps:hover .pp-step { opacity: 0.5; }
html[data-concept="brand-paper"] .pp-steps .pp-step:hover { opacity: 1; }
html[data-concept="brand-paper"] .pp-dl { display: flex; align-items: center; gap: 10px; margin: 0; }
html[data-concept="brand-paper"] .pp-dn { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none; background: var(--pp-navy); color: #fff; font-size: 9px; letter-spacing: 0.04em; clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px), 0 6px, 3px 6px, 3px 3px, 6px 3px); }
html[data-concept="brand-paper"] .pp-dt { font-weight: 500; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.01em; text-transform: none; }
html[data-concept="brand-paper"] .pp-step-tag { margin: 0; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-dd { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--pp-ink) 84%, var(--pp-paper)); }
html[data-concept="brand-paper"] .pp-dd.pp-dim { color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-dk { color: var(--pp-ink); margin-right: 6px; font-size: 10px; }
html[data-concept="brand-paper"] .pp-dd .pp-dk { display: block; margin-bottom: 2px; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-items { margin: 0; padding: 0; list-style: none; }
html[data-concept="brand-paper"] .pp-items li { position: relative; padding: 7px 0 7px 16px; font-size: 14px; line-height: 1.5; border-top: 1px solid var(--pp-line-2); color: color-mix(in oklab, var(--pp-ink) 86%, var(--pp-paper)); }
html[data-concept="brand-paper"] .pp-items li::before { content: ""; position: absolute; left: 0; top: 14px; width: 6px; height: 6px; background: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-pxline { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; opacity: 0; transition: opacity 0.25s steps(3); pointer-events: none; }
html[data-concept="brand-paper"] .pp-pxline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--pp-line) 0 8px, transparent 8px 9px); }
html[data-concept="brand-paper"] .pp-pxline i { position: absolute; top: 0; left: 0; width: 62px; height: 8px; background: repeating-linear-gradient(90deg, var(--pp-ink) 0 8px, transparent 8px 9px); transform: translateX(var(--lx, 0px)); }
html[data-concept="brand-paper"] .pp-step:hover .pp-pxline { opacity: 1; }
html[data-concept="brand-paper"] .pp-note { margin-top: calc(var(--pp-cell) * 3); border: 1px solid var(--pp-line); background: color-mix(in oklab, var(--pp-paper) 90%, transparent); padding: 18px 20px; max-width: 70ch; position: relative; overflow: hidden; }
html[data-concept="brand-paper"] .pp-note::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--pp-blue); animation: ppScan 4s linear infinite; opacity: 0; }
@keyframes ppScan { 0% { top: -10%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
html[data-concept="brand-paper"] .pp-note-l { margin: 0 0 6px; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-note-l b { font-weight: 400; color: var(--pp-ink); }
html[data-concept="brand-paper"] .pp-note-t { margin: 0; font-size: 14px; line-height: 1.55; color: color-mix(in oklab, var(--pp-ink) 84%, var(--pp-paper)); }

/* Levels */
html[data-concept="brand-paper"] .pp-lv-intro { margin-top: 18px; }
html[data-concept="brand-paper"] .pp-rows { list-style: none; margin: 0; padding: 0; }
html[data-concept="brand-paper"] .pp-row { padding: 26px 0 30px; border-top: 1px solid var(--pp-line); display: flex; flex-direction: column; gap: 10px; }
html[data-concept="brand-paper"] .pp-row:last-child { border-bottom: 1px solid var(--pp-line); }
html[data-concept="brand-paper"] .pp-row-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
html[data-concept="brand-paper"] .pp-code { color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-verify { text-decoration: none; margin-left: 8px; color: var(--pp-ink); }
html[data-concept="brand-paper"] .pp-status-chip { background: var(--pp-ink); color: var(--pp-paper); padding: 5px 10px; font-size: 10px; }
html[data-concept="brand-paper"] .pp-row-t { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.025em; }
html[data-concept="brand-paper"] .pp-row-m { margin: 0; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-prog { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
html[data-concept="brand-paper"] .pp-cells { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; flex: 1; max-width: 360px; }
html[data-concept="brand-paper"] .pp-cells i { height: 12px; background: var(--pp-line); }
html[data-concept="brand-paper"] .pp-cells i.on { background: var(--pp-blue); }
html[data-concept="brand-paper"] .pp-row[data-tone="1"] .pp-cells i.on { background: var(--pp-navy); }
html[data-concept="brand-paper"] .pp-row[data-tone="2"] .pp-cells i.on { background: var(--pp-red); }
html.pp-js[data-concept="brand-paper"] .pp-cells i.on { opacity: 0.12; }
html.pp-js[data-concept="brand-paper"] .pp-row.in .pp-cells i.on { opacity: 1; transition: opacity 0.2s steps(2) calc(var(--k) * 45ms + 300ms); }
html[data-concept="brand-paper"] .pp-pct { font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 38px); letter-spacing: -0.03em; line-height: 1; }
html[data-concept="brand-paper"] .pp-detail { margin-top: 6px; }
html[data-concept="brand-paper"] .pp-detail .pp-dk { color: var(--pp-muted); margin: 0 0 2px; }
html[data-concept="brand-paper"] .pp-detail p:last-child { margin: 0; font-size: 14.5px; line-height: 1.55; max-width: 52ch; color: color-mix(in oklab, var(--pp-ink) 86%, var(--pp-paper)); }

/* Contact */
html[data-concept="brand-paper"] .pp-cta { position: relative; z-index: 2; padding: calc(var(--pp-cell) * 9) var(--pp-g) calc(var(--pp-cell) * 6); }
html[data-concept="brand-paper"] .pp-cta .pp-wrap { text-align: center; }
html[data-concept="brand-paper"] .pp-cta-h { margin: 14px 0 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 10.5vw, 150px); line-height: 0.92; letter-spacing: -0.045em; }
html[data-concept="brand-paper"] .pp-meta { margin: 30px auto 0; max-width: 46ch; font-size: clamp(15px, 1.25vw, 19px); line-height: 1.6; color: var(--pp-muted); text-wrap: balance; }
html[data-concept="brand-paper"] .pp-links { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
html[data-concept="brand-paper"] .pp-upd { margin: 30px auto 0; color: var(--pp-muted); }
html[data-concept="brand-paper"] .pp-cta .pp-kick { margin-inline: auto; }

/* Footer */
html[data-concept="brand-paper"] .pp-foot { position: relative; z-index: 2; border-top: 1px solid var(--pp-line); background: color-mix(in oklab, var(--pp-paper) 92%, transparent); }
html[data-concept="brand-paper"] .pp-tetris { display: block; width: 100%; height: clamp(190px, 26vw, 280px); }
html[data-concept="brand-paper"] .pp-foot-in { padding: 36px var(--pp-g) 40px; display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: start; border-top: 1px solid var(--pp-line); }
html[data-concept="brand-paper"] .pp-foot-wm { margin: 0; font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1; text-transform: uppercase; }
html[data-concept="brand-paper"] .pp-foot-note { margin: 10px 0 0; color: var(--pp-muted); font-size: 14px; max-width: 40ch; }
html[data-concept="brand-paper"] .pp-foot-nav { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; justify-content: flex-end; max-width: 60ch; }
html[data-concept="brand-paper"] .pp-foot-nav a { text-decoration: none; color: var(--pp-muted); transition: color 0.2s steps(3); }
html[data-concept="brand-paper"] .pp-foot-nav a:hover { color: var(--pp-ink); }
html[data-concept="brand-paper"] .pp-legal { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--pp-line-2); display: flex; justify-content: space-between; gap: 12px; color: var(--pp-muted); font-size: 10px; }

@media (max-width: 880px) {
  html[data-concept="brand-paper"] .pp-mast { grid-template-columns: 1fr; gap: 16px; }
  html[data-concept="brand-paper"] .pp-mast-r { align-items: flex-start; text-align: left; flex-direction: row; gap: 14px; }
  html[data-concept="brand-paper"] .pp-tag { text-align: left; text-align-last: left; }
  html[data-concept="brand-paper"] .pp-ln > span { white-space: normal; }
  html[data-concept="brand-paper"] .pp-ed-grid { grid-template-columns: 1fr; row-gap: 26px; }
  html[data-concept="brand-paper"] .pp-head { position: static; }
  html[data-concept="brand-paper"] .pp-steps--3, html[data-concept="brand-paper"] .pp-steps--4 { grid-template-columns: 1fr 1fr; }
  html[data-concept="brand-paper"] .pp-chip-link { padding: 14px 10px; }
  html[data-concept="brand-paper"] .pp-chip-list li:not(:last-child) { display: none; }
  html[data-concept="brand-paper"] .pp-foot-in { grid-template-columns: 1fr; }
  html[data-concept="brand-paper"] .pp-foot-nav { justify-content: flex-start; }
  html[data-concept="brand-paper"] .pp-status { right: var(--pp-g); max-width: none; bottom: 64px; }
  html[data-concept="brand-paper"] .pp-cue { bottom: 24px; }
}
@media (max-width: 560px) {
  html[data-concept="brand-paper"] .pp-cols { grid-template-columns: 1fr; }
  html[data-concept="brand-paper"] .pp-steps--3, html[data-concept="brand-paper"] .pp-steps--4 { grid-template-columns: 1fr; }
  html[data-concept="brand-paper"] .pp-ch { flex-direction: column; align-items: flex-start; }
  html[data-concept="brand-paper"] .pp-flow { aspect-ratio: 2 / 1; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-concept="brand-paper"] *, html[data-concept="brand-paper"] *::before, html[data-concept="brand-paper"] *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html.pp-js[data-concept="brand-paper"] .pp-r, html.pp-js[data-concept="brand-paper"] .pp-w { opacity: 1 !important; transform: none !important; }
  html.pp-js[data-concept="brand-paper"] .pp-cells i.on { opacity: 1 !important; }
}



/* ---------- Style genome ---------- */
.bs-hero { isolation: isolate; }
.gx-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0.55; -webkit-mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 60%, #000 30%, transparent 85%); }
.ps-floor[data-backdrop]:not([data-backdrop="grid-floor"]) { top: 0; height: 100%; }

/* Shape: one radius language across buttons, cards, plates and panels */
[data-g-shape="sharp"] { --radius-md: 3px; --radius-pill: 4px; }
[data-g-shape="round"] { --radius-md: 26px; }
[data-g-shape="sharp"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face, .ps-card, .bs-stage, .bs-cta-inner, .ps-swarm-box, .bs-input, .bs-hold, .bs-chip) { border-radius: 3px; }
[data-g-shape="round"] :is(.ps-card, .bs-stage, .bs-cta-inner, .ps-swarm-box) { border-radius: 36px; }

/* Surface: how cards and panels are built */
[data-g-surface="glass"] :is(.bs-card-inner, .ps-card, .bs-stage) { background: color-mix(in oklab, var(--surface-elevated) 55%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
[data-g-surface="outline"] :is(.bs-card-inner, .ps-card, .bs-stage) { background: transparent; border-color: var(--border-strong); box-shadow: none; }
[data-g-surface="outline"] .ps-card { background: color-mix(in oklab, var(--surface-bg) 80%, transparent); } /* text over a live backdrop keeps a calm ground */
[data-g-surface="solid"] :is(.bs-card-inner, .ps-card, .bs-stage) { background: var(--surface-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-g-surface="gradient"] :is(.bs-card-inner, .ps-card, .bs-stage) { background: linear-gradient(155deg, color-mix(in oklab, var(--accent-primary) 16%, var(--surface-elevated)), var(--surface-elevated) 60%); }

/* Giant wordmarks: hero word and footer word */
[data-g-word="outline"] :is(.ps-word, .bs-giant) { background: none; color: transparent; -webkit-text-stroke: 2px var(--accent-primary); filter: none; }
[data-g-word="duotone"] .ps-word { background: linear-gradient(90deg, var(--accent-primary) 0 50%, var(--text-primary) 50% 100%); -webkit-background-clip: text; background-clip: text; }
[data-g-word="duotone"] .bs-giant { color: var(--accent-primary); -webkit-text-stroke: 0; }
[data-g-word="glow"] .ps-word { background: none; color: color-mix(in oklab, var(--accent-primary) 30%, var(--surface-bg)); text-shadow: 0 0 40px color-mix(in oklab, var(--accent-primary) 70%, transparent), 0 0 120px var(--accent-primary); filter: none; }
[data-g-word="glow"] .bs-giant { color: transparent; -webkit-text-stroke: 1px var(--accent-primary); text-shadow: 0 0 60px color-mix(in oklab, var(--accent-primary) 50%, transparent); }

/* Hero alignment (split and poster heroes; the centred and indexed heroes keep their own geometry) */
@media (min-width: 961px) {
  [data-g-align="end"] .bs-hero-split > .bs-hero-copy, [data-g-align="end"] .ps-hero-grid > .ps-hero-copy { order: 2; }
  [data-g-align="end"] .bs-hero-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  [data-g-align="end"] .bs-hero-split > .bs-hero-art { justify-self: start; }
  [data-g-align="end"] .ps-hero-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  [data-g-align="end"] .ps-hero-copy { text-align: right; justify-self: end; }
  [data-g-align="end"] .ps-hero-copy :is(.bs-cta-row, .bs-kicker) { justify-content: flex-end; }
  [data-g-align="end"] .ps-hero-copy :is(.ps-h1, .ps-lead) { margin-left: auto; }
  [data-g-align="center"] .ps-hero-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  [data-g-align="center"] .ps-hero-copy :is(.ps-h1, .ps-lead) { margin-inline: auto; }
  [data-g-align="center"] .ps-hero-copy .bs-cta-row { justify-content: center; }
  [data-g-align="center"] .ps-hero-grid > .ps-card { display: none; }
  [data-g-align="center"] .bs-hero-split { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  [data-g-align="center"] .bs-hero-split .bs-cta-row { justify-content: center; }
  [data-g-align="center"] .bs-hero-split :is(.bs-h1, .bs-lead) { margin-inline: auto; }
  [data-g-align="center"] .bs-hero-split > .bs-hero-art { position: absolute; inset: 10% auto auto 50%; width: min(60vw, 40rem); opacity: 0.22; translate: -50% 0; z-index: -1; justify-self: auto; }
}

/* Headline entrances */
html.bs-js [data-g-headline="blur"] .bs-hero .bs-word-in { transform: translate3d(0, 30%, 0); filter: blur(14px); opacity: 0; animation: gxBlur 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 90ms + 200ms); }
@keyframes gxBlur { to { transform: none; filter: blur(0); opacity: 1; } }
html.bs-js [data-g-headline="wipe"] .bs-hero .bs-word-in { transform: none; clip-path: inset(0 100% 0 0); animation: gxWipe 0.9s var(--ease-io) forwards; animation-delay: calc(var(--i) * 110ms + 200ms); }
@keyframes gxWipe { to { clip-path: inset(0 -2% 0 0); } }
html.bs-js [data-g-headline="skew"] .bs-hero .bs-word-in { transform: translate3d(0, 115%, 0) skewY(14deg); transform-origin: 0 100%; animation: gxSkew 1.15s var(--ease-out) forwards; animation-delay: calc(var(--i) * 85ms + 200ms); }
@keyframes gxSkew { to { transform: none; } }
html.bs-js [data-g-headline="scramble"] .bs-hero .bs-word-in { transform: none; animation: gxFade 0.4s linear forwards; animation-delay: calc(var(--i) * 60ms + 150ms); opacity: 0; }
@keyframes gxFade { to { opacity: 1; } }

/* Section reveals (the default fade-up lives in the base stylesheet) */
html.bs-js [data-g-reveal="clip-up"] [data-reveal] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path var(--reveal) var(--ease-io); transition-delay: calc(var(--r, 0) * var(--step)); }
html.bs-js [data-g-reveal="clip-up"] [data-reveal].in { clip-path: inset(-10% -10% -10% -10%); }
html.bs-js [data-g-reveal="scale-in"] [data-reveal] { transform: scale(0.94); transform-origin: 50% 80%; }
html.bs-js [data-g-reveal="blur-in"] [data-reveal] { transform: none; filter: blur(12px); transition: opacity var(--reveal) var(--ease-out), filter var(--reveal) var(--ease-out); transition-delay: calc(var(--r, 0) * var(--step)); }
html.bs-js [data-g-reveal="blur-in"] [data-reveal].in { filter: none; }
html.bs-js [data-g-reveal="slide-side"] [data-reveal] { transform: translate3d(-42px, 0, 0); }
html.bs-js [data-g-reveal] [data-reveal].in { transform: none; }

/* Card hovers: pillars, plates and type plates */
[data-g-hover]:not([data-g-hover="spotlight"]) .bs-card-inner::before { display: none; }
[data-g-hover] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face) { position: relative; }
[data-g-hover="border-trace"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--accent-primary), var(--accent-primary)) 0 0 / 0 2px no-repeat, linear-gradient(var(--accent-primary), var(--accent-primary)) 100% 0 / 2px 0 no-repeat,
    linear-gradient(var(--accent-primary), var(--accent-primary)) 100% 100% / 0 2px no-repeat, linear-gradient(var(--accent-primary), var(--accent-primary)) 0 100% / 2px 0 no-repeat;
  transition: background-size 700ms var(--ease-out); }
[data-g-hover="border-trace"] :is(.bs-card, .bs-plate, .ps-plate):hover :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }
[data-g-hover="lift-glow"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face) { transition: transform 600ms var(--ease-out), box-shadow 600ms var(--ease-out), border-color 400ms; }
[data-g-hover="lift-glow"] :is(.bs-card, .bs-plate, .ps-plate):hover :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face) { translate: 0 -10px; box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--accent-primary) 70%, transparent), 0 0 0 1px color-mix(in oklab, var(--accent-primary) 45%, transparent); }
[data-g-hover="fill-sweep"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face) { overflow: hidden; }
[data-g-hover="fill-sweep"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(120deg, color-mix(in oklab, var(--accent-primary) 22%, transparent), color-mix(in oklab, var(--glow-b) 18%, transparent)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease-out); }
[data-g-hover="fill-sweep"] :is(.bs-card, .bs-plate, .ps-plate):hover :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { transform: scaleX(1); }
[data-g-hover="shine"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face) { overflow: hidden; }
[data-g-hover="shine"] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { content: ""; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in oklab, var(--text-primary) 18%, transparent), transparent); transform: skewX(-18deg); }
[data-g-hover="shine"] :is(.bs-card, .bs-plate, .ps-plate):hover :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after { animation: gxShine 900ms var(--ease-out) forwards; }
@keyframes gxShine { to { left: 130%; } }

/* Primary buttons */
[data-g-button="glow-pulse"] .bs-btn--primary::before { display: none; }
[data-g-button="glow-pulse"] .bs-btn--primary:hover, [data-g-button="glow-pulse"] .bs-btn--primary:focus-visible { color: var(--accent-on-primary); animation: gxPulse 1.6s var(--ease-io) infinite; }
@keyframes gxPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent-primary) 55%, transparent), 0 12px 30px -12px var(--accent-primary); } 50% { box-shadow: 0 0 0 10px color-mix(in oklab, var(--accent-primary) 0%, transparent), 0 18px 44px -10px var(--accent-primary); } }
[data-g-button="ring"] .bs-btn--primary::before { display: none; }
[data-g-button="ring"] .bs-btn--primary:hover, [data-g-button="ring"] .bs-btn--primary:focus-visible { color: var(--accent-on-primary); box-shadow: 0 0 0 3px var(--surface-bg), 0 0 0 5px var(--accent-primary); }
[data-g-button="arrow-shift"] .bs-btn--primary::before { display: none; }
[data-g-button="arrow-shift"] .bs-btn--primary:hover, [data-g-button="arrow-shift"] .bs-btn--primary:focus-visible { color: var(--accent-on-primary); }
[data-g-button="arrow-shift"] .bs-btn .bs-btn-label { transition: transform 500ms var(--ease-out), letter-spacing 500ms var(--ease-out); }
[data-g-button="arrow-shift"] .bs-btn:hover .bs-btn-label { transform: translateX(-3px); letter-spacing: 0.03em; }
[data-g-button="arrow-shift"] .bs-btn:hover .bs-btn-arrow { transform: translateX(6px) rotate(-45deg); }

/* Marquees (the poster's tilted accent band keeps its own style) */
[data-g-marquee="tilted-band"] .bs-ribbon:not(.ps-band) { background: var(--accent-primary); color: var(--accent-on-primary); border: 0; transform: rotate(-1.2deg); mask-image: none; }
[data-g-marquee="tilted-band"] .bs-ribbon:not(.ps-band) .bs-ribbon-dot { color: var(--accent-on-primary); }
[data-g-marquee="outline"] .bs-ribbon:not(.ps-band) .bs-ribbon-track { color: transparent; -webkit-text-stroke: 1px var(--text-primary); font-size: clamp(1.6rem, 3vw, 2.6rem); text-transform: uppercase; }
[data-g-marquee="outline"] .bs-ribbon:not(.ps-band) .bs-ribbon-dot { -webkit-text-stroke: 0; color: var(--accent-primary); }
[data-g-marquee="giant"] .bs-ribbon:not(.ps-band) .bs-ribbon-track { font-size: clamp(2rem, 5vw, 4.4rem); letter-spacing: -0.02em; animation-duration: 70s; }

/* 3D depth */
[data-g-depth="tilt-cards"] .bs-card-inner, [data-g-depth="tilt-cards"] .ps-plate-face { transform-style: preserve-3d; }
[data-g-depth="tilt-cards"] .bs-card-title, [data-g-depth="tilt-cards"] .ps-plate-word { transform: translateZ(28px); }
[data-g-depth="scroll-rotate"] .bs-section { --enter: 1; perspective: 1400px; }
[data-g-depth="scroll-rotate"] .bs-section > .bs-container { transform: rotateX(calc((1 - var(--enter)) * 16deg)) translate3d(0, calc((1 - var(--enter)) * 50px), 0); transform-origin: 50% 0%; }
[data-g-depth="parallax-layers"] .bs-hero { --hy: 0; }
[data-g-depth="parallax-layers"] .bs-hero .bs-kicker { translate: 0 calc(var(--hy) * -0.12px); }
[data-g-depth="parallax-layers"] .bs-hero .bs-h1 { translate: 0 calc(var(--hy) * -0.28px); }
[data-g-depth="parallax-layers"] .bs-hero :is(.bs-lead, .bs-cta-row) { translate: 0 calc(var(--hy) * -0.18px); }
[data-g-depth="parallax-layers"] .bs-hero :is(.bs-hero-art, .bs-horizon-art, .ps-word, .ps-card) { translate: 0 calc(var(--hy) * 0.16px); }
[data-g-depth="hero-perspective"] .bs-hero { perspective: 1100px; }
[data-g-depth="hero-perspective"] .bs-hero :is(.bs-hero-copy, .bs-hero-center, .bs-hero-index-main, .ps-hero-copy, .bs-band-inner) { transform: rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -5deg)); transform-style: preserve-3d; transition: transform 0s; }
[data-g-depth="hero-perspective"] .bs-hero .bs-h1 { transform: translateZ(40px); }

/* Cursors: decorative, fine pointers only */
.gx-cursor { position: fixed; left: 0; top: 0; z-index: 46; pointer-events: none; opacity: 0; transition: opacity 300ms, width 300ms var(--ease-out), height 300ms var(--ease-out), margin 300ms var(--ease-out), background-color 300ms; }
.gx-cursor.is-on { opacity: 1; }
.gx-cursor--trail-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 1.5px solid var(--accent-primary); mix-blend-mode: normal; }
.gx-cursor--trail-ring.is-hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: color-mix(in oklab, var(--accent-primary) 16%, transparent); }
.gx-cursor--follow-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--accent-primary); box-shadow: 0 0 18px var(--accent-primary); }
.gx-cursor--follow-dot.is-hot { width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0.6; }
.gx-cursor--spotlight { width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; z-index: -1; position: fixed; background: radial-gradient(circle, color-mix(in oklab, var(--accent-primary) 16%, transparent), transparent 62%); }
@media (hover: none), (pointer: coarse) { .gx-cursor { display: none; } }

/* Agent cursors (any composition) */
.ps-agents { position: fixed; inset: 0; z-index: 45; pointer-events: none; overflow: hidden; }
.ps-agent { position: absolute; left: 0; top: 0; display: none; align-items: flex-start; gap: 1px; will-change: transform; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)); }
.ps-agents.is-on .ps-agent { display: flex; }
.ps-agent span { margin-top: 14px; padding: 2px 6px; border-radius: 3px; font: 600 10px/1.3 var(--font-mono); letter-spacing: 0.04em; color: #120606; background: var(--ac); white-space: nowrap; }
.ps-select { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 1.5px solid var(--sel, #7fd8ff); opacity: 0; transition: opacity 250ms; }
.ps-select::before, .ps-select::after { content: ""; position: absolute; width: 7px; height: 7px; background: var(--sel, #7fd8ff); }
.ps-select::before { left: -4px; top: -4px; }
.ps-select::after { right: -4px; bottom: -4px; }
.ps-select span { position: absolute; left: -2px; top: -1.6rem; padding: 3px 6px; border-radius: 3px; font: 600 10px/1.2 var(--font-mono); color: #120606; background: var(--sel, #7fd8ff); white-space: nowrap; }
.ps-select.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.bs-js [data-g-headline] .bs-hero .bs-word-in { animation: none !important; transform: none !important; filter: none !important; clip-path: none !important; opacity: 1 !important; }
  html.bs-js [data-g-reveal] [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  [data-g-depth] .bs-section > .bs-container, [data-g-depth] .bs-hero :is(.bs-hero-copy, .bs-hero-center, .bs-hero-index-main, .ps-hero-copy, .bs-band-inner, .bs-h1, .bs-kicker, .bs-lead, .bs-cta-row, .bs-hero-art, .bs-horizon-art, .ps-word, .ps-card) { transform: none !important; translate: none !important; }
  [data-g-hover] :is(.bs-card-inner, .bs-plate-frame, .ps-plate-face)::after, [data-g-button] .bs-btn--primary { animation: none !important; transition: none !important; }
  .gx-cursor, .ps-agents { display: none !important; }
}