:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6rem;
  --container: 76rem;
  --measure: 68ch;
  --shadow-sm: 0 0.25rem 1rem rgb(0 0 0 / 0.08);
  --shadow-lg: 0 1rem 3rem rgb(0 0 0 / 0.16);
  --transition: 180ms ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-width: 20rem;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}
button,
input,
select,
textarea {
  font: inherit;
}
a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 0.14em;
}
:focus-visible {
  outline: 0.2rem solid var(--color-accent);
  outline-offset: 0.2rem;
}
::selection {
  background: var(--color-accent);
  color: var(--color-background);
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  letter-spacing: var(--letter-display);
  line-height: 1.08;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 8vw, 6.5rem);
}
h2 {
  font-size: clamp(2rem, 5vw, 4rem);
}
h3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
}
p {
  margin: 0 0 var(--space-4);
}
ul,
ol {
  padding-inline-start: 1.25rem;
}

.skip-link {
  position: fixed;
  inset: var(--space-3) auto auto var(--space-3);
  z-index: 1000;
  transform: translateY(-200%);
  padding: var(--space-3) var(--space-4);
  background: var(--color-text);
  color: var(--color-background);
  border-radius: var(--radius);
}
.skip-link:focus {
  transform: none;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}
.measure {
  max-width: var(--measure);
}
.section {
  padding-block: var(--section-space);
}
.section[data-tone='muted'] {
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-background));
}
.section[data-tone='accent'] {
  background: var(--color-primary);
  color: var(--color-background);
}
.section[data-tone='dark'] {
  background: #111111;
  color: #ffffff;
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-3));
  align-items: center;
}
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-5));
}
.auto-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lead {
  max-width: var(--measure);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}



[data-theme='editorial-dark'] {
  --hero-min: 80svh;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
}
[data-theme='warm-studio'] {
  --hero-min: 66svh;
  --card-border: 0;
}
[data-theme='clean-professional'] {
  --hero-min: 60svh;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}
[data-theme='industrial'] {
  --hero-min: 72svh;
  --card-border: 2px solid var(--color-text);
}
[data-theme='athletic'] {
  --hero-min: 68svh;
  --card-border: 1px solid color-mix(in srgb, var(--color-text) 18%, transparent);
}

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

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  background: color-mix(in srgb, var(--color-background) 92%, transparent);
  backdrop-filter: blur(0.7rem);
}
.header-inner {
  display: flex;
  min-height: 4.75rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
}
.primary-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.primary-nav a {
  font-weight: 700;
  text-decoration: none;
}

.action {
  display: inline-flex;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7rem 1.1rem;
  border: 0.12rem solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition);
}
.action:hover {
  transform: translateY(-0.08rem);
  text-decoration: none;
}
.action--primary {
  background: var(--color-primary);
  color: var(--color-background);
  box-shadow: var(--shadow-sm);
}
.action--secondary {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}


.card {
  overflow: clip;
  border: var(--card-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}


.card__body {
  padding: var(--space-5);
}
.card__body > :last-child {
  margin-bottom: 0;
}
.card__link {
  text-decoration: none;
}


















.media {
  overflow: hidden;
  background: color-mix(in srgb, var(--color-surface) 75%, var(--color-primary));
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, center);
}

.site-footer {
  padding-block: var(--space-7);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}


.footer-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
  font-size: 0.9rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.breadcrumbs li + li::before {
  content: '/';
  margin-inline-end: var(--space-2);
  opacity: 0.6;
}










.form {
  display: grid;
  gap: var(--space-4);
  max-width: 48rem;
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label,
.field legend {
  font-weight: 800;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.8rem;
  border: 0.12rem solid color-mix(in srgb, var(--color-text) 35%, transparent);
  border-radius: var(--radius);
  background: var(--color-background);
  color: var(--color-text);
}

.field__hint {
  margin: 0;
  color: var(--color-muted-text);
  font-size: 0.9rem;
}
.checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.checkbox input {
  width: 1.2rem;
  height: 1.2rem;
  margin-top: 0.2rem;
}



.notice {
  padding: var(--space-4);
  border-left: 0.3rem solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

@media (max-width: 52rem) {
  .primary-nav {
    display: none;
  }
  
  
  
}

@media (max-width: 38rem) {
  
  
  .cluster .action {
    width: 100%;
  }
}


.narrow {
  width: min(100%, 52rem);
}



.listing-grid {
  margin-top: var(--space-6);
}










/* Legacy Phase-2 layer, expanded and re-tokenised in v41. Every selector here is still used on at least one route;
   colour literals were replaced with theme tokens. Later layers override most of these declarations. */
:root {
  --bps-grid:color-mix(in srgb,var(--color-secondary) 14%,transparent);
  --bps-line:color-mix(in srgb,var(--color-text) 14%,transparent);
}
html {
  background:#080908
}
.site-header {
  position:sticky;
  top:0;
  background:color-mix(in srgb, var(--color-background) 94%, transparent);
  border-color:var(--warm-line)
}
.header-inner {
  min-height:4.4rem
}
.bps-brand {
  display:inline-flex;
  align-items:center;
  gap:.65rem
}
.brand-mark {
  display:grid;
  place-items:center;
  width:2.5rem;
  height:2.5rem;
  border:1px solid var(--warm-line);
  border-top-color:var(--color-secondary);
  font:800 .9rem/1 var(--font-mono);
  letter-spacing:.08em
}
.brand-name {
  font-size:.94rem;
  letter-spacing:.015em
}
.primary-nav ul {
  gap:1.15rem
}
.primary-nav a {
  font-size:.88rem;
  color:var(--color-muted-text)
}
.primary-nav a[aria-current=page] {
  color:var(--color-secondary)
}
.action--primary {
  background:var(--color-secondary);
  color:#080908
}
.action--inverse {
  background:#080908;
  color:#fff
}
.action--secondary {
  border-color:var(--warm-line)
}
.text-link {
  font-weight:800;
  color:var(--color-secondary)
}
.proof-grid,.content-split,.ask-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(20rem,1.1fr);
  gap:clamp(2rem,6vw,7rem);
  align-items:start
}
.demo-badge,.work-status,.result-kicker {
  display:inline-flex;
  width:max-content;
  padding:.35rem .6rem;
  border:1px solid var(--warm-line);
  border-radius:99px;
  color:var(--color-secondary);
  font:700 .72rem/1.2 var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase
}
.guide-grid select,.guide-grid input[type=text],.assistant-entry input {
  width:100%;
  border:1px solid var(--warm-line);
  background:var(--color-background);
  color:#fff;
  padding:.8rem;
  border-radius:.3rem
}
.option {
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  margin:.65rem 0
}
.option input {
  margin-top:.3rem;
  accent-color:var(--color-secondary)
}
.result-costs {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--warm-line);
  border:1px solid var(--warm-line);
  margin-block:2rem
}
.result-costs>div {
  background:#151715;
  padding:1.25rem;
  display:grid;
  gap:.45rem
}
.result-costs span {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#b9b5ab
}
.result-costs strong {
  font-size:1.25rem
}
.result-costs small {
  color:#b9b5ab
}
.lab-controls {
  display:grid;
  gap:1.4rem;
  align-content:start
}
.lab-controls>label,.lab-controls fieldset {
  display:grid;
  gap:.6rem;
  border:0;
  margin:0;
  padding:0
}
.lab-controls select {
  padding:.8rem;
  background:#151715;
  color:#fff;
  border:1px solid var(--warm-line)
}
.segmented {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem
}
.segmented label,.segmented button {
  border:1px solid var(--warm-line);
  background:#151715;
  color:#fff;
  padding:.55rem .7rem;
  border-radius:.3rem
}
.segmented input {
  position:absolute;
  opacity:0
}
.segmented label:has(input:checked),.segmented button[aria-selected=true] {
  border-color:var(--color-secondary);
  color:var(--color-secondary)
}
.device-stage {
  background:#080908;
  border:1px solid var(--warm-line);
  border-radius:.75rem;
  overflow:hidden;
  min-height:40rem;
  transition:max-width .2s ease;
  width:100%;
  margin:auto
}
.device-stage[data-device=tablet] {
  max-width:48rem
}
.device-stage[data-device=mobile] {
  max-width:24rem
}
.lab-preview {
  padding:clamp(1rem,3vw,2.2rem);
  color:#151715;
  min-height:37.6rem
}
.lab-demo-notice {
  font:700 .7rem var(--font-mono);
  color:color-mix(in srgb, var(--ink) 72%, var(--ivory));
  text-transform:uppercase;
  letter-spacing:.08em
}
.lab-preview header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:1.5rem;
  border-bottom:1px solid rgb(17 18 15 / 0.2)
}
.lab-preview button {
  padding:.55rem .8rem
}
.lab-hero {
  padding-block:clamp(2rem,6vw,5rem)
}
.lab-hero h3 {
  font-size:clamp(2rem,5vw,4rem);
  max-width:12ch
}
.lab-module-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:.8rem
}
.lab-module-grid article {
  border:1px solid rgb(17 18 15 / 0.2);
  padding:1rem
}
.lab-module-grid span {
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:color-mix(in srgb, var(--ink) 72%, var(--ivory))
}
.lab-module-grid strong {
  display:block;
  margin:.4rem 0
}
.phone-frame {
  width:min(100%,22rem);
  margin:auto;
  padding:.75rem;
  background:#080908;
  border:1px solid #9d742d;
  border-radius:2.5rem;
  box-shadow:0 2rem 5rem rgb(0 0 0/.3)
}
.phone-speaker {
  width:5rem;
  height:.35rem;
  background:var(--color-accent);
  border-radius:99px;
  margin:.35rem auto .75rem
}
.phone-screen {
  min-height:38rem;
  padding:1.25rem;
  border-radius:1.8rem;
  background:linear-gradient(160deg,#151715,#080908);
  overflow:hidden
}
.mini-brand {
  font:800 .7rem var(--font-mono);
  color:var(--color-secondary);
  letter-spacing:.12em
}
.phone-screen nav {
  display:flex;
  gap:.8rem;
  font-size:.75rem;
  margin-block:1.5rem
}
.mini-card {
  display:grid;
  gap:.5rem;
  border:1px solid #9d742d;
  padding:1rem;
  margin-top:3rem
}
.mini-card button {
  padding:.6rem
}
.phone-caption {
  margin-top:7rem;
  font-size:.76rem;
  color:#b9b5ab
}
.companion-tabs button {
  cursor:pointer
}
.ask-bps {
  background:var(--color-background)
}
.assistant-panel {
  border:1px solid var(--warm-line);
  background:#151715;
  padding:1.25rem
}
.assistant-entry {
  display:flex;
  gap:.6rem
}
.assistant-answer {
  min-height:10rem;
  margin-top:1rem;
  padding:1rem;
  background:var(--color-background);
  border-left:3px solid var(--color-secondary)
}
.question-chips button {
  background:transparent;
  color:#fff;
  border:1px solid #9d742d;
  padding:.55rem .7rem
}
.portal-steps span,.section-index {
  font:700 .75rem var(--font-mono);
  color:var(--color-secondary);
  letter-spacing:.1em
}
.preview-shell {
  border:1px solid var(--warm-line);
  background:#151715
}
.preview-banner {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 1rem;
  background:#f0cb74;
  color:#151008
}
.preview-body {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:2rem;
  padding:clamp(1.25rem,5vw,3rem);
  align-items:center
}
.preview-body img {
  border:1px solid var(--warm-line)
}
.preview-shell footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border-top:1px solid var(--warm-line);
  color:#b9b5ab;
  font-size:.8rem
}
.page-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 18rem;
  gap:3rem;
  align-items:end
}
.flagship-page-hero {
  border-bottom:1px solid var(--warm-line);
  background-image:linear-gradient(var(--bps-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bps-grid) 1px,transparent 1px);
  background-size:48px 48px
}
.flagship-page-hero h1 {
  font-size:clamp(3rem,7vw,6.4rem);
  max-width:15ch
}
.check-list {
  display:grid;
  gap:.8rem;
  padding:0;
  list-style:none
}
.check-list li {
  position:relative;
  padding-left:1.7rem
}
.check-list li:before {
  content:'↳';
  position:absolute;
  left:0;
  color:var(--color-secondary)
}
.closing-cta {
  background:var(--color-secondary);
  color:#080908
}
.footer-top {
  display:grid;
  grid-template-columns:1.4fr repeat(3,minmax(10rem,.6fr));
  gap:2.5rem
}
.footer-top ul {
  list-style:none;
  padding:0
}
.footer-top h2 {
  font-size:clamp(1.8rem,3vw,3rem)
}
.field__hint {
  font-size:.8rem;
  color:#b9b5ab
}
.notice {
  border:1px solid var(--warm-line);
  padding:1rem;
  background:#151715
}
.form[data-preview-safe=true] button[type=submit]::after {
  content:' · preview only';
  font-weight:500
}
.offline-page {
  min-height:60vh
}

@media(max-width:64rem) {
  .primary-nav {
  display:none
}
.proof-grid,.content-split,.ask-grid,.page-hero-grid {
  grid-template-columns:1fr
}
.result-costs,.portal-steps {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.footer-top {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media(max-width:48rem) {
  .preview-status .container,.section-heading-row,.preview-banner,.preview-shell footer {
  align-items:flex-start;
  flex-direction:column
}
.guide-grid,.lab-layout,.work-grid,.preview-body {
  grid-template-columns:1fr
}
.result-costs,.portal-steps,.footer-top {
  grid-template-columns:1fr
}
.assistant-entry {
  flex-direction:column
}
.device-stage {
  min-height:32rem
}
.lab-preview {
  min-height:29.6rem
}
.brand-name {
  display:none
}
}

@media(prefers-reduced-motion:reduce){.device-stage{transition:none}}
@media print{.site-header,.mobile-nav,.project-guide,.capability-lab,.ask-bps,.final-cta,.preview-status{display:none}body{background:#fff;color:#111}.section{padding-block:1.5rem}.card,.work-card,.preview-shell{box-shadow:none;border:1px solid #777}}
/* Phase 2.4 responsive containment repairs validated against the required viewport matrix. */


.work-status, .demo-badge, .result-kicker { width: fit-content; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 42rem; }
.page-hero-grid > *, .flagship-page-hero h1, .flagship-page-hero .lead { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media(max-width:64rem){.page-hero-grid{grid-template-columns:minmax(0,1fr)}}

.result-costs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.result-notice,
.result-verified {
  margin-block: 1.5rem;
  padding: 1rem;
  border: 1px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, #151715);
}



.result-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
  margin-block: 1.5rem;
}

.result-detail {
  padding: 1rem;
  border: 1px solid var(--warm-line);
  background: #151715;
}



.result-detail :last-child {
  margin-bottom: 0;
}

.closing-cta .eyebrow {
  color: var(--color-background);
}

:root {
  --bps-ink: #162520;
  --bps-paper: #f1efe8;
  --bps-signal: #f0cb74;
  --bps-muted: #59645f;
  --bps-hairline: color-mix(in srgb, var(--bps-ink) 18%, transparent);
  --bps-soft-shadow: 0 1.5rem 4rem rgb(22 37 32 / 0.13);
}

html {
  max-width: 100%;
  overflow-x: clip;
}

body {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
  color: var(--bps-ink);
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.045em;
}

.eyebrow {
  color: var(--bps-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.text-link {
  font-weight: 800;
}

.action {
  border-radius: 0;
  min-height: 3.35rem;
  padding-inline: 1.35rem;
}

.action--primary {
  box-shadow: none;
}

.action--primary:hover {
  background: var(--bps-ink);
}

.action--secondary {
  border-color: var(--bps-ink);
  color: var(--bps-ink);
}

.action--inverse {
  background: var(--bps-ink);
}







.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-color: var(--bps-hairline);
  color: var(--bps-ink);
  backdrop-filter: blur(1rem);
}

.header-inner {
  min-height: 5.25rem;
  gap: 1.1rem;
}

.bps-brand {
  flex: 0 0 auto;
  color: var(--bps-ink);
}

.brand-mark {
  width: 2.55rem;
  height: 2.55rem;
  border: 1px solid var(--bps-ink);
  background: var(--bps-signal);
  color: var(--bps-ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.brand-name {
  display: inline;
  color: var(--bps-ink);
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.02em;
}

.primary-nav {
  margin-left: auto;
}

.primary-nav > ul {
  flex-wrap: nowrap;
  gap: 1.25rem;
}

.primary-nav a,
.nav-dropdown summary {
  color: var(--bps-ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.primary-nav > ul > li > a:not(.header-cta) {
  padding-block: 1rem;
}

.primary-nav a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: var(--bps-signal);
  text-decoration-thickness: 0.28rem;
  text-underline-offset: 0.35rem;
}



























.header-cta {
  display: inline-flex;
  min-height: 2.65rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
}

.portal-utility {
  display: grid;
  flex: 0 0 auto;
  gap: 0.05rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bps-hairline);
  color: var(--bps-ink);
  line-height: 1.1;
  text-decoration: none;
}

.portal-utility span {
  color: var(--bps-muted);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portal-utility strong {
  font-size: 0.76rem;
}



































































































































.work-status {
  padding: 0;
  border: 0;
  color: var(--bps-muted);
  font-family: var(--font-body);
  font-size: 0.62rem;
}

.notice {
  border-color: var(--bps-hairline);
  background: var(--bps-paper);
  color: var(--bps-ink);
}

.notice h2,
.notice h3,
.notice strong,
.notice p {
  color: var(--bps-ink);
}

.field__hint {
  color: var(--bps-muted);
}

































.flagship-page-hero {
  border-bottom: 1px solid var(--bps-hairline);
  background-image: none;
  color: var(--bps-ink);
}

.page-hero-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  align-items: end;
}

.flagship-page-hero h1 {
  max-width: 13ch;
  color: var(--bps-ink);
  font-size: clamp(3.3rem, 7vw, 6.8rem);
  line-height: 0.94;
}

.flagship-page-hero .lead {
  color: var(--bps-muted);
}

.breadcrumbs {
  color: var(--bps-muted);
}

.ownership-promise {
  padding: 1.4rem;
  border-top: 0.5rem solid var(--bps-signal);
}

.ownership-promise > span {
  display: block;
  color: var(--bps-signal);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ownership-promise > strong {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1.08;
}

.ownership-promise > p {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
}

.page-section-list > .section:nth-child(even),
.section[data-tone='muted'] {
  background: var(--bps-paper);
}

.page-section-list h2 {
  color: var(--bps-ink);
}

.section-index {
  color: var(--bps-muted);
  font-family: var(--font-body);
}

.check-list li::before {
  content: '—';
}

.closing-cta {
  background: var(--bps-signal) ;
  color: var(--bps-ink) ;
}

[data-tone='dark'] .eyebrow,
[data-tone='dark'] .section-index {
  color: var(--bps-signal);
}

.project-guide .eyebrow,
.project-guide .demo-badge,
.ask-bps .eyebrow {
  color: var(--bps-signal);
}

.guide-grid select,
.guide-grid input[type='text'],
.assistant-entry input {
  background: var(--bps-ink);
}

.phone-screen .demo-badge,
.preview-shell .eyebrow {
  border-color: var(--bps-signal);
  color: var(--bps-signal);
}

.preview-banner,
.preview-banner strong,
.preview-banner span {
  color: var(--bps-ink);
}

.site-footer {
  border: 0;
}

.site-footer .brand-mark {
  color: var(--bps-ink);
}

.site-footer .footer-top {
  grid-template-columns: minmax(18rem, 1.4fr) repeat(3, minmax(10rem, 0.65fr));
}

.site-footer .footer-top h2 {
  margin-top: 2rem;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
}

.site-footer .footer-top h3 {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-footer .footer-top ul {
  display: grid;
  gap: 0.55rem;
}

.site-footer .footer-top a:not(.action) {
  font-size: 0.86rem;
}

.site-footer .action--primary {
  margin-top: 1rem;
  background: var(--bps-signal);
  color: var(--bps-ink);
}

.site-footer .footer-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer .footer-meta p {
  margin: 0;
}

@media (max-width: 74rem) {
  .primary-nav,
  .portal-utility {
    display: none;
  }


  .bps-home-hero__grid,
  .page-hero-grid,
  .portal-clarity__grid,
  .home-final-cta__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  

  

  

  

  

  

  

  

  

  .site-footer .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  

  

  

  

  

  

  

  

  

  .outcome-grid,
  .audience-grid,
  .work-grid,
  .process-grid,
  .site-footer .footer-top {
    grid-template-columns: minmax(0, 1fr);
  }

  

  

  

  

  

  

  .site-footer .footer-meta {
    flex-direction: column;
  }
}

@media (max-width: 23.5rem) {
  .container {
    width: min(100% - 1.25rem, var(--container));
  }

  .brand-name {
    display: none;
  }

  
}

/* Phase 3.1 V2: cinematic flagship and public portal-tour presentation. */
:root {
  --v2-night: #07120f;
  --v2-deep: #102b24;
  --v2-green: #183c32;
  
  --v2-cream: #fbf9f2;
  --v2-paper: #f1efe8;
  --v2-line-dark: rgb(251 249 242 / 0.22);
  --v2-line-light: rgb(22 37 32 / 0.18);
  --v2-shadow: 0 2.5rem 7rem rgb(0 0 0 / 0.34);
}

.action,
.v2-product-board a,
.v2-solution-stories a,
.portal-app button,
.portal-boundary a,
.portal-boundary button,
.portal-access-card button {
  min-height: 2.75rem;
}

.action--glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.35rem;
  border: 1px solid rgb(251 249 242 / 0.62);
  color: var(--v2-cream);
  font-weight: 800;
  text-decoration: none;
  backdrop-filter: blur(0.8rem);
  background: rgb(7 18 15 / 0.3);
}

.action--glass:hover,
.action--glass:focus-visible {
  border-color: var(--color-primary);
  background: rgb(7 18 15 / 0.72);
}

























































































































































































































































/* Public portal tour */
.portal-public-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 10vw, 9rem);
  background:
    radial-gradient(circle at 78% 24%, rgb(211 171 88 / 0.12), transparent 28%),
    linear-gradient(135deg, var(--v2-night), var(--v2-green));
  color: var(--v2-cream);
}

.portal-public-hero::after {
  content: '';
  position: absolute;
  right: -12rem;
  bottom: -18rem;
  width: 43rem;
  height: 43rem;
  border: 1px solid rgb(211 171 88 / 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 7rem rgb(211 171 88 / 0.025),
    0 0 0 14rem rgb(211 171 88 / 0.018);
}

.portal-public-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(21rem, 0.75fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.portal-public-hero .eyebrow {
  color: var(--color-primary);
}

.portal-public-hero h1 {
  max-width: 11ch;
  margin-block: 0.8rem 1.5rem;
  color: var(--v2-cream);
  font-size: clamp(3.8rem, 7.5vw, 7.6rem);
  line-height: 0.88;
}

.portal-public-hero .lead {
  max-width: 48rem;
  color: rgb(251 249 242 / 0.76);
}

.portal-public-hero .cluster {
  margin-top: 2rem;
}

.portal-public-hero .action--primary {
  background: var(--color-primary);
  color: var(--v2-night);
}

.portal-access-card {
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border: 1px solid var(--v2-line-dark);
  border-top: 0.45rem solid var(--color-primary);
  background: rgb(7 18 15 / 0.62);
  box-shadow: var(--v2-shadow);
  backdrop-filter: blur(1rem);
}

.portal-access-card > span {
  color: var(--color-primary);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.portal-access-card h2 {
  margin-top: 1rem;
  color: var(--v2-cream);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1;
}

.portal-access-card p {
  color: rgb(251 249 242 / 0.68);
}

.portal-access-card button,
.portal-boundary button {
  width: 100%;
  margin-top: 1rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgb(251 249 242 / 0.32);
  background: rgb(251 249 242 / 0.08);
  color: rgb(251 249 242 / 0.72);
  opacity: 1;
}



































.portal-project-heading,
.portal-panel-heading,
.portal-progress > div:first-child {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.portal-project-heading {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--v2-line-light);
}

.portal-project-heading p,
.portal-panel-heading span {
  margin: 0;
  color: var(--bps-muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.portal-project-heading h3 {
  margin-top: 0.25rem;
  color: var(--v2-night);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.portal-project-heading > span,
.portal-panel-heading > b {
  padding: 0.4rem 0.55rem;
  background: #dce4d9;
  color: var(--gold);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[data-portal-panel] {
  padding-top: 1.4rem;
}

[data-portal-panel][hidden] {
  display: none;
}

































































































@keyframes v2-hero-breathe {
  to {
    transform: scale(1.055);
  }
}

@keyframes v2-board-drift {
  to {
    transform: translateY(-0.55rem);
  }
}

@keyframes v2-mini-drift {
  to {
    transform: rotate(0deg) translateY(-0.4rem);
  }
}

@media (max-width: 64rem) {
  .v2-hero__inner,
  .portal-public-hero__grid,
  .v2-portal-teaser__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  

  

  

  

  

  

  

  

  
}

@media (max-width: 25rem) {
  .v2-hero__actions,
  .portal-public-hero .cluster,
  .v2-portal-teaser .cluster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .v2-hero__actions .action,
  .portal-public-hero .action,
  .v2-portal-teaser .action {
    width: 100%;
  }

  .v2-product-board__top,
  .v2-product-board__footer,
  .portal-app__topbar,
  .portal-project-heading,
  .portal-panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  
}

/* Phase 3.1 functional-reality iteration: public journeys, proof taxonomy, and safe tools. */















.result-context {
  color: var(--bps-muted);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.result-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.25rem;
  border: 1px solid rgb(22 37 32 / 0.24);
  background: var(--color-surface);
}

.result-next span,
.start-result__heading span,
.start-result__grid article > span,
.start-review-gate span {
  color: var(--gold);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.result-next h4,
.result-next p {
  margin: 0.2rem 0 0;
}

.lab-demo-notice {
  display: inline-flex;
  margin: 1rem;
  padding: 0.35rem 0.55rem;
  background: var(--lab-accent, var(--color-primary));
  color: var(--v2-night);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.device-stage[data-vertical='appointment-personal-care'] {
  --lab-accent: #f3b8a9;
  --lab-surface: #fff7f1;
  --lab-ink: #412b2a;
}

.device-stage[data-vertical='home-trade-services'] {
  --lab-accent: #f1bd4f;
  --lab-surface: #13241e;
  --lab-ink: #fbf9f2;
}

.device-stage[data-vertical='professional-local-services'] {
  --lab-accent: #b9d4d0;
  --lab-surface: #eff5f3;
  --lab-ink: #102b24;
}

.device-stage[data-vertical='retail-food-product-brands'] {
  --lab-accent: #ff6b48;
  --lab-surface: #fff0d5;
  --lab-ink: #421c12;
}

.device-stage[data-vertical='health-fitness-membership'] {
  --lab-accent: #9dff6d;
  --lab-surface: #111a16;
  --lab-ink: #f8fff4;
}

.device-stage[data-vertical='creative-media-experience'] {
  --lab-accent: #d3b4ff;
  --lab-surface: #17121f;
  --lab-ink: #fff8ef;
}

.device-stage .lab-preview {
  background: var(--lab-surface, var(--v2-cream));
  color: var(--lab-ink, var(--v2-night));
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.lab-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-block: 1px solid currentColor;
}

.lab-preview > header > div {
  display: grid;
  gap: 0.15rem;
}

.lab-preview > header small {
  opacity: 0.7;
}

.lab-preview button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid currentColor;
  background: var(--lab-accent, var(--color-primary));
  color: #07120f;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  cursor: pointer;
}

.lab-preview .lab-hero {
  min-height: 17rem;
  display: grid;
  align-content: end;
  gap: 0.75rem;
  padding: clamp(2rem, 7vw, 5rem) clamp(1rem, 5vw, 3rem);
  background: linear-gradient(
    135deg,
    transparent,
    color-mix(in srgb, var(--lab-accent) 24%, transparent)
  );
}

.lab-preview .lab-hero h3 {
  max-width: 18ch;
  margin: 0;
  color: inherit;
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 0.98;
}

.lab-module-grid article button {
  width: 100%;
  margin-top: auto;
  background: transparent;
  color: inherit;
}

.lab-action-detail {
  display: grid;
  gap: 0.35rem;
  margin: 1rem;
  padding: 1rem;
  border: 1px solid currentColor;
  background: color-mix(in srgb, var(--lab-accent) 16%, transparent);
}

.lab-action-detail span {
  font-size: 0.65rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.start-hero {
  background: var(--v2-night);
  color: var(--v2-cream);
}

.start-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.start-hero h1 {
  max-width: 13ch;
  color: var(--v2-cream);
  font-size: clamp(3.6rem, 7vw, 7rem);
  line-height: 0.9;
}

.start-hero .eyebrow {
  color: var(--color-primary);
}

.start-hero .lead {
  color: rgb(251 249 242 / 0.75);
}




















.start-result__heading,
.start-review-gate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, auto);
  gap: 2rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--v2-line-light);
}

.start-result__heading > strong {
  padding: 0.65rem 0.8rem;
  background: var(--color-primary);
  color: var(--v2-night);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.start-result__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 1rem;
  border: solid var(--v2-line-light);
  border-width: 1px 0 0 1px;
}

.start-result__grid article {
  min-width: 0;
  padding: 1.5rem;
  border: solid var(--v2-line-light);
  border-width: 0 1px 1px 0;
}

.start-review-gate {
  margin-bottom: 1rem;
}

.start-review-gate ol {
  margin: 0;
}

.work-index-hero {
  background: var(--v2-night);
  color: var(--v2-cream);
}

.work-index-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: end;
}

.work-index-hero h1 {
  min-width: 0;
  max-width: 17ch;
  color: var(--v2-cream);
  font-size: clamp(3.25rem, 6vw, 6.6rem);
  line-height: 0.94;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.listing-grid .card {
  min-width: 0;
}

.listing-grid .card__body {
  min-width: 0;
}

.listing-grid .card h2 {
  max-width: 100%;
  font-size: clamp(1.75rem, 2.25vw, 2.65rem);
  line-height: 1.05;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.page-hero-grid > *,
.flagship-page-hero h1,
.flagship-page-hero .lead {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.work-index-hero .eyebrow,
.work-ledger--demos .eyebrow {
  color: var(--color-primary);
}

.work-index-hero .lead {
  color: rgb(251 249 242 / 0.72);
}













.work-ledger__heading {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 58rem;
  margin-bottom: 2rem;
}

.work-ledger__heading > span {
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}













.work-ledger--demos {
  background: var(--v2-night);
  color: var(--v2-cream);
}

.work-ledger--demos h2,
.work-ledger--demos h3 {
  color: var(--v2-cream);
}

.work-ledger--demos .work-ledger__heading > span,
.work-ledger--demos a {
  color: var(--color-primary);
}



.verified-external {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-block: 2rem;
  padding: 1rem;
  border: 1px solid var(--v2-line-light);
  background: var(--color-surface);
}

.verified-external > div {
  display: grid;
  gap: 0.25rem;
}

.verified-external span {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.portal-lifecycle {
  display: grid;
  gap: 1rem;
  margin-block: 1.25rem 1.5rem;
  padding: 1rem;
  border: 1px solid var(--v2-line-light);
  background: var(--color-surface);
}

.portal-lifecycle__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
}

.portal-lifecycle__summary > div {
  display: grid;
  gap: 0.35rem;
}

.portal-lifecycle__summary span,
.portal-lifecycle__evidence small {
  color: var(--gold);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-lifecycle__summary h4,
.portal-lifecycle__summary p {
  margin: 0;
}



.portal-lifecycle__summary button,
.portal-lifecycle__action {
  min-height: 2.75rem;
  border: 1px solid var(--v2-green);
  background: var(--v2-green);
  color: var(--v2-cream);
  font-weight: 850;
}

.portal-lifecycle__evidence {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.portal-lifecycle__evidence li {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid var(--v2-line-light);
}

.portal-lifecycle__evidence li[data-state='evidence-recorded'] {
  border-color: var(--gold);
}

.portal-lifecycle__evidence li[aria-current='step'] {
  box-shadow: inset 0 0 0 2px var(--color-primary);
}

.portal-lifecycle__evidence span {
  font-size: 0.68rem;
  font-weight: 900;
}

.portal-lifecycle__evidence strong {
  overflow-wrap: anywhere;
}

.portal-lifecycle__action {
  margin-top: 1rem;
  padding-inline: 1rem;
}

.portal-lifecycle__action:disabled,
[data-portal-demo-action]:disabled {
  border-color: var(--v2-line-light);
  color: var(--v2-muted);
  cursor: not-allowed;
  background: var(--color-surface);
}

@media (max-width: 64rem) {
  

  

  

  

  

  .start-hero__grid,
  .start-application__grid,
  .work-index-hero__grid,
  .flagship-case__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-ledger__grid,
  .start-result__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  .work-index-hero h1 {
    font-size: clamp(2.15rem, 10.5vw, 4.2rem);
    line-height: 0.98;
  }

  .portal-lifecycle__summary,
  .portal-lifecycle__evidence {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-public-hero {
    padding-block: 2.5rem 3rem;
  }

  .portal-public-hero h1 {
    margin-block: 0.55rem 1rem;
    font-size: clamp(2.7rem, 13vw, 4rem);
    line-height: 0.92;
  }

  .portal-public-hero .lead {
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .portal-public-hero .cluster {
    margin-top: 1.25rem;
  }

  

  

  

  .guide-scenarios,
  .result-next,
  .start-result__heading,
  .start-review-gate {
    grid-template-columns: minmax(0, 1fr);
  }

  .start-form,
  .work-ledger__grid,
  .start-result__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  

  .work-ledger__heading {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  

  .verified-external {
    align-items: stretch;
    flex-direction: column;
  background: var(--color-surface);
}
}

@media (prefers-reduced-motion: reduce) {
  .device-stage .lab-preview {
    transition: none;
  }
}

/* Phase 3.1 marketability pass: page-specific composition without changing product logic. */

/* Home: keep the photographic opening, then vary the editorial rhythm and proof hierarchy. */
































/* Websites: a dedicated sales composition instead of the generic interior-page template. */
.marketing-hero--websites {
  position: relative;
  min-height: 46rem;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 88% 12%, rgb(211 171 88 / 0.14), transparent 22rem),
    linear-gradient(135deg, #06100d 0%, #151715 100%);
  color: var(--v2-cream);
}

.marketing-hero--websites::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.45;
  background-image:
    linear-gradient(rgb(251 249 242 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(251 249 242 / 0.055) 1px, transparent 1px);
  background-size: 5.5rem 5.5rem;
  mask-image: linear-gradient(90deg, transparent 30%, #000);
  pointer-events: none;
}

.marketing-hero--websites .page-hero-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1.02fr) minmax(28rem, 0.98fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.marketing-hero--websites h1,
.marketing-hero--websites .breadcrumbs,
.marketing-hero--websites .breadcrumbs a {
  color: var(--v2-cream);
}

.marketing-hero--websites h1 {
  max-width: 11ch;
  font-size: clamp(4rem, 6.3vw, 7.2rem);
}

.marketing-hero--websites .eyebrow {
  color: var(--color-primary);
}

.marketing-hero--websites .lead {
  max-width: 42rem;
  color: rgb(251 249 242 / 0.76);
  font-size: clamp(1.05rem, 1.45vw, 1.28rem);
}

.websites-hero-scene {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(251 249 242 / 0.45);
  color: var(--v2-night);
  box-shadow: 0 3rem 8rem rgb(0 0 0 / 0.42);
  transform: rotate(1.15deg);
}

.websites-hero-scene::after {
  content: 'BPS / SYNTHETIC DIRECTION';
  position: absolute;
  right: -3.5rem;
  bottom: 5rem;
  color: rgb(7 18 15 / 0.1);
  font: 900 2rem/1 var(--font-body);
  letter-spacing: 0.08em;
  transform: rotate(-90deg);
}





















.websites-outcome-strip {
  border-bottom: 1px solid var(--warm-line);
}

.websites-outcome-strip .container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: 0;
}

.websites-outcome-strip article {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  border-right: 1px solid rgb(7 18 15 / 0.22);
}

.websites-outcome-strip article:first-child {
  border-left: 1px solid rgb(7 18 15 / 0.22);
}

.websites-outcome-strip article > span {
  font: 900 0.68rem/1 var(--font-body);
}

.websites-outcome-strip strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
}

.websites-outcome-strip p {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
}

.page-section-list--websites .marketing-section {
  position: relative;
  overflow: hidden;
}

.page-section-list--websites .content-split {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(3rem, 9vw, 9rem);
  align-items: start;
}

.page-section-list--websites h2 {
  max-width: 11ch;
  font-size: clamp(3rem, 5.5vw, 6.2rem);
  line-height: 0.92;
}

.page-section-list--websites .lead {
  max-width: 43rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

.page-section-list--websites .check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid currentColor;
}

.page-section-list--websites .check-list li {
  min-height: 6rem;
  display: flex;
  align-items: center;
  padding: 1rem 1rem 1rem 1.75rem;
  border-bottom: 1px solid currentColor;
}

.page-section-list--websites .check-list li:nth-child(odd) {
  border-right: 1px solid currentColor;
}

.page-section-list--websites .marketing-section--2 {
  background-color: var(--v2-green) ;
  background-image: radial-gradient(
    circle at 8% 90%,
    rgb(211 171 88 / 0.12),
    transparent 24rem
  ) ;
  color: var(--v2-cream);
}

.page-section-list--websites .marketing-section--2 h2,
.page-section-list--websites .marketing-section--2 .lead {
  color: var(--v2-cream);
}

.page-section-list--websites .marketing-section--2 .content-split > div:first-child {
  grid-column: 2;
}

.page-section-list--websites .marketing-section--2 .content-split > div:last-child {
  grid-column: 1;
  grid-row: 1;
}

.page-section-list--websites .marketing-section--2 .section-index,
.page-section-list--websites .marketing-section--2 .check-list li::before {
  color: var(--color-primary);
}

.page-section-list--websites .marketing-section--3::after {
  content: 'CLICK';
  position: absolute;
  right: -0.06em;
  bottom: -0.2em;
  color: rgb(211 171 88 / 0.045);
  font: 900 clamp(8rem, 22vw, 22rem) / 0.8 var(--font-body);
  letter-spacing: -0.08em;
  pointer-events: none;
}

.page-section-list--websites .marketing-section--3 .container {
  position: relative;
  z-index: 1;
}

/* Work: use editorial proof bands and deliberate feature hierarchy. */
.work-index-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 15%, rgb(211 171 88 / 0.13), transparent 23rem), #06100d;
}

.work-index-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(16.666% - 1px),
    rgb(251 249 242 / 0.07) calc(16.666% - 1px),
    rgb(251 249 242 / 0.07) 16.666%
  );
  pointer-events: none;
}

.work-index-hero__grid {
  position: relative;
  z-index: 1;
}

.work-index-hero__proof {
  display: grid;
  gap: 2rem;
}













.work-ledger__heading {
  margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.work-ledger__heading h2 {
  max-width: 17ch;
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  line-height: 0.92;
}

.work-ledger--public {
  background: var(--v2-green);
  color: var(--v2-cream);
}

.work-ledger--public h2,
.work-ledger--public h3,
.work-ledger--public p {
  color: var(--v2-cream);
}

.work-ledger--public .eyebrow,
.work-ledger--public .work-ledger__heading > span,
.work-ledger--public a {
  color: var(--color-primary);
}















.work-ledger--systems {
  background: #e9e6dc ;
}





























/* Capability Lab: a guided studio with the customer outcome inside the preview. */
.marketing-hero[data-page='capabilities'] {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 35%, rgb(211 171 88 / 0.14), transparent 16rem);
}

.marketing-hero[data-page='capabilities']::before {
  content: '';
  position: absolute;
  right: -10rem;
  bottom: -14rem;
  width: 42rem;
  height: 42rem;
  border: 1px solid rgb(211 171 88 / 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 6rem rgb(211 171 88 / 0.035),
    0 0 0 12rem rgb(211 171 88 / 0.025);
}

.marketing-hero[data-page='capabilities'] .container {
  position: relative;
}

.capability-lab {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 10%, rgb(211 171 88 / 0.14), transparent 28rem),
    linear-gradient(150deg, #06100d, #12342b 68%, #07120f);
  color: var(--v2-cream);
}

.capability-lab::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.26;
  background-image: linear-gradient(rgb(251 249 242 / 0.07) 1px, transparent 1px);
  background-size: 100% 5.5rem;
  pointer-events: none;
}

.capability-lab > .container {
  position: relative;
}



.capability-lab h2,
.capability-lab .lead {
  color: var(--v2-cream);
}

.capability-lab h2 {
  max-width: 14ch;
  font-size: clamp(3.3rem, 6.4vw, 7rem);
  line-height: 0.9;
}

.capability-lab .eyebrow,
.capability-lab .demo-badge {
  color: var(--color-primary);
}













.capability-lab .lab-controls {
  padding: 1.35rem;
  border: 1px solid var(--v2-line-dark);
  border-top: 0.4rem solid var(--color-primary);
  background: rgb(251 249 242 / 0.065);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
}







.capability-lab .lab-controls > label,
.capability-lab .lab-controls fieldset {
  padding-top: 1.2rem;
  border-top: 1px solid var(--v2-line-dark);
}

.capability-lab .lab-controls > label:first-of-type {
  border-top: 0;
}

.capability-lab .lab-controls select,
.capability-lab .segmented label {
  border-color: rgb(251 249 242 / 0.35);
  background: #07120f;
}



.capability-lab .option {
  min-height: 2.5rem;
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgb(251 249 242 / 0.12);
}





.capability-lab .device-stage {
  max-width: 100%;
  border: 0.55rem solid #020706;
  border-radius: 0.9rem;
  box-shadow: 0 3rem 8rem rgb(0 0 0 / 0.38);
}



.lab-preview .lab-hero {
  min-height: 24rem;
  align-content: center;
}

.lab-preview .lab-hero h3 {
  max-width: 14ch;
  font-size: clamp(3rem, 6.4vw, 6.8rem);
  line-height: 0.9;
}

.lab-hero__kicker {
  color: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}





.capability-lab .lab-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 1rem;
  border: solid currentColor;
  border-width: 1px 0 0 1px;
}

.capability-lab .lab-module-grid article {
  min-height: 14rem;
  display: grid;
  align-content: start;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  background: transparent;
}

.capability-lab .lab-module-grid article:nth-child(3n + 1) {
  background: color-mix(in srgb, var(--lab-accent) 15%, transparent);
}

.capability-lab .lab-module-grid strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  line-height: 1;
}

.capability-lab .lab-action-detail {
  margin-top: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.capability-lab > .container > .field__hint {
  margin: 1.2rem 0 0;
  color: rgb(251 249 242 / 0.62);
}

.page-section-list[data-page='capabilities'] .marketing-section {
  padding-block: clamp(4rem, 7vw, 7rem);
}

.page-section-list[data-page='capabilities'] .marketing-section h2 {
  max-width: 12ch;
  font-size: clamp(3rem, 5.2vw, 5.5rem);
  line-height: 0.94;
}

.capability-evidence {
  border-top: 0.45rem solid var(--color-primary);
  background: var(--color-surface);
}

.capability-evidence h2 {
  max-width: 13ch;
  font-size: clamp(3rem, 5.3vw, 5.8rem);
  line-height: 0.92;
}

.capability-evidence > .container > .lead {
  max-width: 46rem;
}

.capability-details {
  margin-top: 2rem;
  border-block: 1px solid var(--v2-line-light);
}

.capability-details summary {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-weight: 900;
}

.capability-details summary::after {
  content: '+';
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid var(--v2-green);
  border-radius: 50%;
  font-size: 1.2rem;
}

.capability-details[open] summary::after {
  content: '−';
}

.capability-details .table-wrap {
  margin-bottom: 2rem;
}

@media (max-width: 64rem) {
  .marketing-hero--websites {
    min-height: auto;
  }

  .marketing-hero--websites .page-hero-grid,
  .page-section-list--websites .content-split,
  .capability-lab .lab-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .websites-hero-scene {
    width: min(100%, 44rem);
  }

  .page-section-list--websites .marketing-section--2 .content-split > div:first-child,
  .page-section-list--websites .marketing-section--2 .content-split > div:last-child {
    grid-column: auto;
    grid-row: auto;
  }

  .work-index-hero__proof {
    max-width: 42rem;
  }

  

  

  

  
}

@media (max-width: 48rem) {
  

  

  

  .marketing-hero--websites {
    padding-block: 3.5rem;
  }

  .marketing-hero--websites h1 {
    font-size: clamp(3.15rem, 15vw, 5rem);
  }

  .websites-hero-scene {
    transform: none;
  }

  

  .websites-outcome-strip .container,
  .lab-journey,
  .work-index-proof-counts,
  .work-ledger--demos .work-ledger__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .websites-outcome-strip article,
  .websites-outcome-strip article:first-child {
    border-left: 1px solid rgb(7 18 15 / 0.22);
    border-bottom: 0;
  }

  .page-section-list--websites h2,
  .work-ledger__heading h2,
  .page-section-list[data-page='capabilities'] .marketing-section h2 {
    font-size: clamp(2.6rem, 12vw, 4.4rem);
  }

  .page-section-list--websites .check-list,
  .capability-lab .lab-module-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-section-list--websites .check-list li:nth-child(odd) {
    border-right: 0;
  }

  

  

  .capability-lab h2 {
    font-size: clamp(3rem, 14vw, 5rem);
  }

  

  .capability-lab .device-stage[data-device='desktop'],
  .capability-lab .device-stage[data-device='tablet'],
  .capability-lab .device-stage[data-device='mobile'] {
    max-width: 100%;
  }

  .lab-preview > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .lab-preview .lab-hero {
    min-height: 20rem;
  }

  .lab-preview .lab-hero h3 {
    font-size: clamp(2.7rem, 12vw, 4.4rem);
  }
}

@media (max-width: 25rem) {
  .work-ledger__heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-ledger__heading h2 {
    font-size: clamp(2.25rem, 11vw, 3.4rem);
  }

  
}

@media (prefers-reduced-motion: reduce) {
  .v2-outcome-list li,
  .websites-hero-scene {
    transition: none;
    transform: none;
  }
}

/* Phase 3.1 inviting studio pass.
   This layer deliberately softens the public sales surfaces without changing product logic. */

:root {
  --studio-line: rgb(16 38 31 / 0.14);
  --studio-shadow: 0 1.8rem 5rem rgb(28 48 40 / 0.15);
  --studio-radius: clamp(1.5rem, 3vw, 3.25rem);
}

.v2-hero .action,
.marketing-hero--websites .action,
.work-index-hero .action,
.capability-lab .action {
  border-radius: 999px;
}

/* Home: warm editorial opening with an arched photograph and a quiet project note. */






















































































































/* Selected work on the homepage: fewer hard frames, more image-led rhythm. */


















/* Process: a human planning moment beside a quiet three-step narrative. */


































/* Websites: replace the browser mockup with a human first-impression story. */
.marketing-hero--websites {
  min-height: 47rem;
}

.marketing-hero--websites::after {
  display: none;
}

.marketing-hero--websites .page-hero-grid {
  grid-template-columns: minmax(0, 0.92fr) minmax(27rem, 0.78fr);
  gap: clamp(3rem, 7vw, 7rem);
}

.marketing-hero--websites .lead {
  color: rgb(16 38 31 / 0.72);
}

.websites-hero-scene {
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 14rem 14rem 2.5rem 2.5rem;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.websites-hero-scene::after {
  display: none;
}

.websites-hero-scene .media {
  overflow: hidden;
  border-radius: inherit;
  box-shadow: var(--studio-shadow);
}

.websites-hero-scene .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}

.websites-hero-scene__story {
  position: absolute;
  right: -1rem;
  bottom: 2rem;
  width: min(22rem, 72%);
  padding: 1.4rem 1.5rem;
  border-radius: 1.5rem 1.5rem 1.5rem 0.35rem;
  background: rgb(251 248 240 / 0.94);
  box-shadow: 0 1.2rem 3rem rgb(16 38 31 / 0.2);
  backdrop-filter: blur(0.8rem);
}

.websites-hero-scene__story span {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.websites-hero-scene__story strong {
  display: block;
  margin-top: 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.4rem);
  line-height: 1;
}

.websites-hero-scene__story p {
  margin: 0.65rem 0 0;
  color: rgb(16 38 31 / 0.66);
  font-size: 0.78rem;
}

.websites-outcome-strip {
  border: 0;
}

.websites-outcome-strip .container {
  gap: clamp(1rem, 4vw, 4rem);
  padding-block: 1rem;
}

.websites-outcome-strip article,
.websites-outcome-strip article:first-child {
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: rgb(251 248 240 / 0.52);
}

.websites-outcome-strip article > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
}

.page-section-list--websites .marketing-section {
  overflow: hidden;
}

.page-section-list--websites .marketing-section--3::after {
  display: none;
}

.page-section-list--websites .content-split {
  grid-template-columns: minmax(18rem, 0.72fr) minmax(0, 1.08fr);
}

.page-section-list--websites .check-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  border: 0;
}

.page-section-list--websites .check-list li,
.page-section-list--websites .check-list li:nth-child(odd) {
  min-height: auto;
  padding: 0.85rem 1rem 0.85rem 3rem;
  border: 0;
  border-radius: 999px;
  background: rgb(211 171 88 / 0.06);
}

.page-section-list--websites .check-list li::before {
  left: 1rem;
}

.page-section-list--websites .marketing-section--2 .check-list li {
  background: rgb(251 248 240 / 0.08);
}

.work-index-hero::after {
  display: none;
}

.work-index-hero__grid {
  grid-template-columns: minmax(0, 0.82fr) minmax(25rem, 0.78fr);
  align-items: center;
}

.work-index-hero h1 {
  max-width: 10ch;
  font-size: clamp(4.1rem, 7.4vw, 7.4rem);
  line-height: 0.88;
}

.work-index-hero__proof {
  gap: 1.5rem;
}

























.work-ledger__heading {
  gap: clamp(1rem, 3vw, 2.5rem);
}

.work-ledger__heading > span {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border-radius: 50%;
}

.marketing-hero[data-page='capabilities']::before {
  border-color: rgb(211 171 88 / 0.12);
  box-shadow:
    0 0 0 5rem rgb(211 171 88 / 0.025),
    0 0 0 10rem rgb(211 171 88 / 0.018);
}

.marketing-hero[data-page='capabilities'] .ownership-promise {
  border: 0;
  border-radius: 2rem 2rem 2rem 0.45rem;
  box-shadow: var(--studio-shadow);
}

.page-section-list[data-page='capabilities'] .check-list {
  border: 0;
}

.page-section-list[data-page='capabilities'] .check-list li {
  border-bottom-color: var(--studio-line);
}

.capability-lab::before {
  display: none;
}

.capability-lab .lead {
  max-width: 45rem;
}

.capability-lab .demo-badge {
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: rgb(211 171 88 / 0.08);
}











.capability-lab .lab-controls {
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 0;
  border-radius: 2.5rem 2.5rem 2.5rem 0.5rem;
  background: rgb(251 248 240 / 0.88);
  box-shadow: 0 1.5rem 4rem rgb(16 38 31 / 0.11);
}





.capability-lab .lab-controls > label,
.capability-lab .lab-controls fieldset {
  border-top-color: var(--studio-line);
}

.capability-lab .lab-controls select,
.capability-lab .segmented label {
  border-color: var(--studio-line);
  border-radius: 999px;
}

.capability-lab .option {
  border-bottom-color: var(--studio-line);
}



.capability-lab .device-stage {
  border-radius: 2.5rem;
  box-shadow: var(--studio-shadow);
}



.capability-lab .lab-module-grid {
  gap: 1rem;
  margin: 1rem;
  border: 0;
}

.capability-lab .lab-module-grid article,
.capability-lab .lab-module-grid article:nth-child(3n + 1) {
  min-height: 13rem;
  border: 0;
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--lab-accent) 9%, white);
}

.capability-lab .lab-action-detail {
  border-radius: 1.25rem;
}

.capability-lab > .container > .field__hint {
  color: rgb(16 38 31 / 0.62);
}

.capability-evidence {
  border: 0;
  background: var(--color-surface);
}

.capability-details {
  border-color: var(--studio-line);
}

@media (max-width: 64rem) {
  

  

  

  

  

  .marketing-hero--websites .page-hero-grid,
  .page-section-list--websites .content-split,
  .work-index-hero__grid,
  .capability-lab .lab-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .websites-hero-scene {
    width: min(90%, 43rem);
    margin-inline: auto;
  }

  
}

@media (max-width: 48rem) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .marketing-hero--websites {
    padding-block: 3.5rem 5rem;
  }

  .websites-hero-scene {
    width: 92%;
    margin-top: 1rem;
    border-radius: 8rem 8rem 1.5rem 1.5rem;
  }

  .websites-hero-scene__story {
    right: -4%;
    bottom: -2.5rem;
    width: 82%;
  }

  .websites-outcome-strip .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
    padding-block: 2rem;
  }

  .websites-outcome-strip article,
  .websites-outcome-strip article:first-child {
    border: 0;
  }

  .page-section-list--websites .check-list li,
  .page-section-list--websites .check-list li:nth-child(odd) {
    border: 0;
  }

  .work-index-hero h1 {
    font-size: clamp(3.3rem, 15vw, 5rem);
  }

  

  

  

  

  

  

  .capability-lab .lab-controls {
    border-radius: 2rem 2rem 2rem 0.4rem;
  }

  .capability-lab .device-stage {
    border-width: 0.45rem;
    border-radius: 1.5rem;
  }
}

@media (max-width: 25rem) {
  

  

  

  

  

  .v2-hero h1,
  .work-index-hero h1,
  .marketing-hero--websites h1,
  .capability-lab h2 {
    font-size: clamp(2.9rem, 15vw, 4rem);
  }

  .websites-hero-scene__story {
    right: 0;
    width: 92%;
  }

  
}

/* Phase 3.1 clean editorial pass.
   Composition, scale, whitespace, and proof establish the visual system; chrome does not. */

:root {
  --editorial-ink: #10261f;
  --editorial-forest: #173f34;
  --editorial-cream: #fbf8f0;
  --editorial-paper: #f0ece3;
  --editorial-line: rgb(16 38 31 / 0.2);
}

/* Shared public language: square actions, quiet labels, and no decorative pill system. */
.v2-hero .action,
.marketing-hero--websites .action,
.work-index-hero .action,
.capability-lab .action,
.websites-outcome-strip article,
.page-section-list--websites .check-list li,
.v2-outcome-list > li > strong,
.work-index-proof-counts div,
.capability-lab .demo-badge,
.capability-lab .lab-controls select,
.capability-lab .segmented label {
  border-radius: 0;
}

.v2-outcome-list__number,
.v2-audience-list article > span,
.v2-process li > span,
.work-ledger__heading > span,
.lab-journey li > span,
.websites-outcome-strip article > span {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
}

/* Home hero: one proposition and one dominant image, with almost no interface chrome. */


































/* A full-width image break, followed immediately by actual work. */
















/* Early work: an asymmetric visual field instead of cards. */


























/* Customer outcomes and audiences become simple editorial indexes. */
























/* Three offer stories use image scale and offset, not frames. */




















/* Process: one documentary image beside a restrained timeline. */
















/* Websites: immersive image, compact signals, and open editorial sections. */
.marketing-hero--websites {
  min-height: clamp(44rem, 82vh, 57rem);
  padding-block: 0;
}

.marketing-hero--websites .page-hero-grid {
  grid-template-columns: minmax(0, 0.8fr) minmax(28rem, 1.2fr);
  min-height: inherit;
  align-items: center;
}

.websites-hero-scene {
  position: absolute;
  inset: 0 0 0 auto;
  width: 52%;
  margin: 0;
  border-radius: 0;
}

.websites-hero-scene .media {
  height: 100%;
  aspect-ratio: auto ;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.websites-hero-scene__story {
  right: clamp(1.5rem, 4vw, 4rem);
  bottom: clamp(2rem, 6vw, 6rem);
  width: min(25rem, 72%);
  padding: 1.2rem 0 0 1.2rem;
  border-left: 0.22rem solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: white;
  text-shadow: 0 0.1rem 1rem rgb(0 0 0 / 0.52);
  backdrop-filter: none;
}

.websites-hero-scene__story span,
.websites-hero-scene__story p {
  color: white;
}


.websites-outcome-strip .container {
  gap: 0;
  padding-block: 0;
  border-top: 1px solid var(--editorial-line);
  border-bottom: 1px solid var(--editorial-line);
}

.websites-outcome-strip article,
.websites-outcome-strip article:first-child {
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border-right: 1px solid var(--editorial-line);
  background: transparent;
}

.websites-outcome-strip article:last-child {
  border-right: 0;
}

.websites-outcome-strip article > span {
  color: var(--editorial-forest);
}

.page-section-list--websites .marketing-section {
  padding-block: clamp(6rem, 11vw, 11rem);
}

.page-section-list--websites .content-split {
  grid-template-columns: minmax(18rem, 0.65fr) minmax(0, 1fr);
  gap: clamp(3rem, 11vw, 11rem);
}

.page-section-list--websites .check-list {
  gap: 0;
  border-top: 1px solid currentColor;
}

.page-section-list--websites .check-list li,
.page-section-list--websites .check-list li:nth-child(odd) {
  padding: 1rem 0 1rem 1.8rem;
  border-bottom: 1px solid currentColor;
  border-radius: 0 ;
  background: transparent;
  box-shadow: none;
  clip-path: none;
}

.page-section-list--websites .check-list li::before {
  left: 0;
}

/* Work: proof-led chapters with image fields, not cards. */
.work-index-hero {
  min-height: clamp(43rem, 82vh, 55rem);
  padding-block: 0;
}

.work-index-hero__grid {
  grid-template-columns: minmax(0, 0.75fr) minmax(28rem, 1.25fr);
  min-height: inherit;
  gap: clamp(3rem, 8vw, 8rem);
}































/* Capability Lab: one studio canvas, with controls as a column—not a card. */
.marketing-hero[data-page='capabilities'] .ownership-promise {
  padding: 0 0 0 1.5rem;
  border: 0;
  border-left: 0.22rem solid var(--color-primary);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--editorial-ink);
}

.marketing-hero[data-page='capabilities'] .ownership-promise strong,
.marketing-hero[data-page='capabilities'] .ownership-promise p {
  color: var(--editorial-ink);
}

.page-section-list[data-page='capabilities'] .marketing-section {
  padding-block: clamp(6rem, 10vw, 10rem);
}

.capability-lab {
  padding-block: clamp(7rem, 11vw, 11rem);
  background: var(--color-surface);
}











.lab-journey p,
.lab-preview-column__heading,
.capability-lab > .container > .field__hint {
  color: #40534a;
}



.capability-lab .lab-controls {
  position: sticky;
  top: 6rem;
  padding: 0 clamp(2rem, 4vw, 4rem) 0 0;
  border: 0;
  border-right: 1px solid var(--editorial-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.capability-lab .lab-controls select {
  border: 0;
  border-bottom: 1px solid var(--editorial-ink);
  background: transparent;
}

.capability-lab .segmented {
  gap: 0;
  border-bottom: 1px solid var(--editorial-line);
}

.capability-lab .segmented label,
.capability-lab .segmented label:has(input:checked) {
  padding-inline: 0;
  border: 0;
  background: transparent;
  color: var(--editorial-ink);
}

.capability-lab .segmented label:has(input:checked) {
  border-bottom: 0.2rem solid var(--editorial-forest);
}

.capability-lab .option {
  min-height: 0;
  padding-block: 0.6rem;
}

.capability-lab .device-stage {
  border-width: 0.4rem;
  border-radius: 0;
  box-shadow: 1rem 1rem 0 rgb(16 38 31 / 0.1);
}

.capability-lab .lab-module-grid {
  gap: 0;
  border-top: 1px solid currentColor;
}

.capability-lab .lab-module-grid article,
.capability-lab .lab-module-grid article:nth-child(3n + 1) {
  min-height: 12rem;
  border-radius: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: transparent;
}

.capability-lab .lab-action-detail {
  border-radius: 0;
}

@media (max-width: 64rem) {
  

  

  

  .work-showcase .work-grid,
  .v2-process > .container,
  .marketing-hero--websites .page-hero-grid,
  .work-index-hero__grid,
  .capability-lab .lab-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-section-list--websites .content-split {
    grid-template-columns: minmax(0, 1fr);
  }

  

  

  

  

  .capability-lab .lab-controls {
    position: static;
    padding-right: 0;
    padding-bottom: 2rem;
    border-right: 0;
    border-bottom: 1px solid var(--editorial-line);
  }
}

@media (max-width: 48rem) {
  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .marketing-hero--websites {
    min-height: auto;
    padding-block: 3.5rem 0;
  }

  .marketing-hero--websites .page-hero-grid {
    display: block;
  }

  .websites-hero-scene {
    position: relative;
    inset: auto;
    width: 100vw;
    margin: 3rem 0 0 50%;
    transform: translateX(-50%);
  }

  .websites-hero-scene .media {
    height: 30rem;
    min-height: 30rem;
    aspect-ratio: auto ;
    clip-path: none;
  }

  .websites-hero-scene__story {
    position: static;
    width: 100%;
    padding: 1.35rem 1rem;
    border-left: 0;
    background: var(--editorial-forest);
    color: var(--editorial-cream);
    text-shadow: none;
  }

  .websites-hero-scene__story span,
  .websites-hero-scene__story p {
    color: var(--editorial-cream);
  }

  .websites-outcome-strip .container {
    display: block;
  }

  .websites-outcome-strip article,
  .websites-outcome-strip article:first-child {
    padding-inline: 0;
    border-right: 0;
    border-bottom: 1px solid var(--editorial-line);
  }

  .page-section-list--websites .marketing-section {
    padding-block: 5.5rem;
  }

  .page-section-list--websites .content-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .work-index-hero {
    min-height: auto;
    padding-block: 4rem;
  }

  

  

  

  

  

  .capability-lab .device-stage {
    box-shadow: 0.5rem 0.5rem 0 rgb(16 38 31 / 0.1);
  }
}

@media (max-width: 25rem) {
  

  

  .websites-hero-scene .media {
    min-height: 24rem;
  }

  .work-index-hero h1 {
    font-size: clamp(3rem, 15vw, 4.3rem);
  }
}

/* Phase 3.1 black-and-gold refinement.
   Gold is used as a precise signal and rule, never as ornamental chrome. */

:root {
  --gold: #d3ab58;
  --gold-bright: #e2c27d;
  --gold-deep: #765511;
  --black: #080908;
  --black-soft: #12110f;
  --ivory: #080908;
  --ivory-deep: #151715;
  --bps-ink: #f5f0e6;
  --bps-paper: var(--ivory-deep);
  --bps-signal: var(--gold);
  --bps-muted: #b9b5ab;
  --bps-hairline: rgb(21 19 15 / 0.18);
  --bps-soft-shadow: 0 1.5rem 4rem rgb(9 9 9 / 0.14);
  --v2-night: var(--black);
  --v2-deep: var(--black-soft);
  --v2-green: #151715;
  --v2-cream: var(--ivory);
  --v2-paper: var(--ivory-deep);
  --v2-line-dark: rgb(212 175 99 / 0.34);
  --v2-line-light: rgb(21 19 15 / 0.18);
  --v2-shadow: 0 2.5rem 7rem rgb(0 0 0 / 0.38);
  --editorial-ink: #f5f0e6;
  --editorial-forest: #1d1a15;
  --editorial-cream: var(--ivory);
  --editorial-paper: var(--ivory-deep);
  --editorial-line: rgb(82 61 22 / 0.24);
  --studio-line: rgb(82 61 22 / 0.2);
  --studio-shadow: 0 1.8rem 5rem rgb(9 9 9 / 0.16);
}

html,
body {
  color: var(--bps-ink);
}

::selection {
  background: var(--gold);
  color: var(--black);
}

.site-header {
  border-color: rgb(212 175 99 / 0.28);
  background: rgb(9 9 9 / 0.96);
  color: var(--ivory);
}

.site-header .bps-brand,
.site-header .brand-name,
.site-header .primary-nav a,
.site-header .nav-dropdown summary,
.site-header .portal-utility,
.site-header .portal-utility strong {
  color: var(--ivory);
}

.site-header .brand-mark {
  border-color: var(--gold);
  background: transparent;
  color: var(--gold);
}

.site-header .primary-nav a[aria-current='page'],
.site-header .nav-dropdown summary::after,
.site-header .portal-utility span {
  color: var(--gold-bright);
}

.site-header .header-cta {
  background: var(--gold);
  color: var(--black) ;
}

.site-header .header-cta:hover,
.site-header .header-cta:focus-visible {
  background: var(--gold-bright);
}

.site-header .portal-utility {
  border-color: rgb(212 175 99 / 0.34);
}

.site-header .nav-dropdown__panel {
  border-color: var(--gold);
  background: var(--black-soft);
  color: var(--ivory);
}

.site-header .nav-dropdown__panel a,
.site-header .nav-dropdown__panel strong {
  color: var(--ivory);
}





.action--primary,
.closing-cta .action--primary,
.site-footer .action--primary {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--black);
}

.action--primary:hover,
.action--primary:focus-visible,
.site-footer .action--primary:hover,
.site-footer .action--primary:focus-visible {
  border-color: var(--gold-bright);
  background: var(--gold-bright);
  color: var(--black);
}

.eyebrow,
.text-link,
a:not(.action) {
  text-decoration-color: color-mix(in srgb, var(--gold) 62%, transparent);
}

/* The dominant opening surface becomes unmistakably black and gold. */
















.v2-panorama__figure figcaption b,
.v2-outcome-list__number,
.v2-audience-list article > span,
.v2-process li > span,
.work-ledger__heading > span,
.lab-journey li > span,
.websites-outcome-strip article > span {
  color: var(--gold);
}

.v2-audiences,
.v2-process,
.work-ledger--demos,
.site-footer {
  background: var(--black);
}

.v2-audiences .eyebrow,
.v2-process .eyebrow,
.work-ledger--demos .eyebrow,
.site-footer h3 {
  color: var(--gold-bright);
}

.v2-audiences h2,
.v2-audiences h3,
.v2-audiences p,
.v2-process h2,
.v2-process h3,
.v2-process p,
.v2-process li > span,
.site-footer,
.site-footer .bps-brand,
.site-footer .brand-name,
.site-footer h2,
.site-footer a {
  color: var(--ivory);
}





.v2-audience-list,
.v2-audience-list article,
.v2-process ol,
.v2-process li,
.site-footer .footer-meta {
  border-color: rgb(212 175 99 / 0.3);
}

.v2-solution-stories__copy > span,
.v2-solution-stories__copy > a,
.work-card__link,
.work-showcase .text-link,
.work-status,
.demo-proof-card a,
.proof-card a {
  color: var(--gold);
}

.v2-ui-scene,
.v2-mini-dashboard,
.device-stage,
.portal-app,
.guide-result {
  border-color: rgb(212 175 99 / 0.42);
}

.v2-mini-dashboard__bar i,

/* Compact public-safe project ledger. It reads like an editorial index, not a card row. */


























/* Work and marketing pages inherit the palette without gaining extra chrome. */
.work-index-hero,
.marketing-hero--websites,
.portal-public-hero,
.start-hero {
  background-color: var(--black);
  color: var(--ivory);
}

.work-index-hero h1,
.work-index-hero .lead,
.marketing-hero--websites h1,
.marketing-hero--websites .lead,
.portal-public-hero h1,
.portal-public-hero .lead,
.start-hero h1,
.start-hero .lead {
  color: var(--ivory);
}

.work-index-hero .eyebrow,
.marketing-hero--websites .eyebrow,
.portal-public-hero .eyebrow,
.start-hero .eyebrow {
  color: var(--gold-bright);
}

.work-index-proof-counts,
.work-index-proof-counts div,
.websites-outcome-strip article,
.flagship-case__facts,
.flagship-case__facts div {
  border-color: rgb(118 85 17 / 0.32);
}

.work-index-proof-counts dt,
.flagship-case__facts dt,
.websites-outcome-strip article > span {
  color: var(--gold);
}

.marketing-hero--websites .breadcrumbs a,
.marketing-hero--websites .breadcrumbs span,
.work-index-hero figcaption,
.work-index-proof-counts dd {
  color: var(--ivory);
}



.closing-cta {
  background: var(--gold) ;
  color: var(--black) ;
}

.closing-cta .eyebrow,
.closing-cta h2,
.closing-cta p {
  color: var(--black) ;
}

/* Phase 3.1 owner direction: a concise, welcoming front door and clearer next steps. */

.work-ledger--projects {
  padding-block: clamp(4rem, 7vw, 6rem);
}

.work-projects__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
  border-top: 1px solid rgb(118 85 17 / 0.35);
}

.work-projects__list article {
  padding: 2rem 2rem 2rem 0;
  border-bottom: 1px solid rgb(118 85 17 / 0.3);
}

.work-projects__list article + article {
  padding-inline: 2rem 0;
  border-left: 1px solid rgb(118 85 17 / 0.3);
}

.work-projects__list h3 {
  margin: 0.5rem 0;
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.work-projects__list article > p:last-child {
  max-width: 38rem;
  margin-bottom: 0;
}

.pricing-welcome {
  padding-block: clamp(5rem, 9vw, 8rem) 3rem;
  background: var(--black);
  color: var(--ivory);
}

.pricing-welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 0.85fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: end;
}

.pricing-welcome h1 {
  max-width: 10ch;
  margin: 0;
  color: var(--ivory);
  font-size: clamp(3.2rem, 8vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}

.pricing-welcome .eyebrow {
  color: var(--gold-bright);
}

.pricing-welcome__intro .lead {
  color: var(--ivory);
}

.pricing-welcome__intro > p:last-child {
  color: #cfc4b1;
}

































.result-costs--simple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.result-costs--simple > div {
  min-height: 13rem;
  background: var(--black);
  color: var(--ivory);
}

.result-costs--simple span,
.result-costs--simple small {
  color: #cfc4b1;
}

.result-costs--simple strong {
  color: var(--gold-bright);
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.result-cost-details {
  margin-block: 1.5rem;
  border-block: 1px solid rgb(118 85 17 / 0.3);
}

.result-cost-details summary {
  padding-block: 1rem;
  color: var(--gold);
  font-weight: 850;
  cursor: pointer;
}

.result-cost-details[open] {
  padding-bottom: 1.25rem;
}







@media (max-width: 64rem) {
  .welcome-mission__grid,
  .welcome-principles__grid,
  .pricing-welcome__grid,
  .pricing-market-note {
    grid-template-columns: minmax(0, 1fr);
  }

  

  
}

@media (max-width: 48rem) {
  

  

  

  

  

  

  

  

  

  .work-projects__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-projects__list article,
  .work-projects__list article + article {
    padding-inline: 0;
    border-left: 0;
  }

  .result-costs--simple {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Founder story */
.founder-page {
  --founder-paper: var(--color-background);
  --founder-paper-deep: var(--color-surface);
  --founder-ink: var(--color-text);
  --founder-muted: var(--color-muted-text);
  --founder-gold: #d3ab58;
  background: var(--founder-paper);
  color: var(--founder-ink);
}

.founder-page .founder-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 8rem);
  border-bottom: 1px solid var(--warm-line-strong);
  background:
    radial-gradient(circle at 82% 16%, rgb(211 171 88 / 0.17), transparent 26rem),
    linear-gradient(rgb(211 171 88 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 171 88 / 0.055) 1px, transparent 1px),
    #050505;
  background-size: auto, 4rem 4rem, 4rem 4rem, auto;
  color: var(--ivory);
}

.founder-hero::after {
  content: 'BPS';
  position: absolute;
  right: -0.04em;
  bottom: -0.22em;
  color: rgb(211 171 88 / 0.045);
  font: 800 clamp(13rem, 32vw, 36rem) / 0.8 var(--sans);
  letter-spacing: -0.09em;
  pointer-events: none;
}

.founder-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.38fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
}

.founder-hero__copy h1 {
  max-width: 9ch;
  margin-block: 1rem 0.8rem;
  color: var(--ivory);
  font-size: clamp(4rem, 9vw, 8.5rem);
  line-height: 0.82;
}

.founder-hero__copy .eyebrow {
  margin-top: clamp(3rem, 8vw, 7rem);
  color: var(--gold-bright);
}

.founder-role {
  color: var(--gold-bright);
  font: 700 0.75rem / 1.35 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.founder-hero__copy .lead {
  max-width: 30rem;
  margin-top: 2rem;
  color: #e3ddd2;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.35rem);
  line-height: 1.25;
}

.founder-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(2.5rem, 6vw, 5rem) 0 0;
  border-block: 1px solid var(--warm-line);
}

.founder-facts div {
  min-width: 0;
  padding: 1rem 0.8rem 1rem 0;
  border-right: 1px solid var(--warm-line);
}

.founder-facts div + div { padding-left: 0.8rem; }
.founder-facts div:last-child { border-right: 0; }
.founder-facts dt { color: #918d84; font: 600 0.58rem / 1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; }
.founder-facts dd { margin: 0.5rem 0 0; color: var(--ivory); font-weight: 750; }

.founder-portrait {
  width: min(100%, 18rem);
  margin: 0;
  justify-self: end;
}

.founder-portrait__frame {
  position: relative;
  padding: clamp(0.65rem, 1.5vw, 1rem);
  border: 1px solid var(--warm-line-strong);
  background: #0d0e0c;
  box-shadow: 1.5rem 1.5rem 0 rgb(211 171 88 / 0.1), 0 2.5rem 7rem rgb(0 0 0 / 0.58);
}

.founder-portrait__frame::before,
.founder-portrait__frame::after {
  content: '';
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  pointer-events: none;
}

.founder-portrait__frame::before { top: -0.55rem; left: -0.55rem; border-top: 1px solid var(--gold-bright); border-left: 1px solid var(--gold-bright); }
.founder-portrait__frame::after { right: -0.55rem; bottom: -0.55rem; border-right: 1px solid var(--gold-bright); border-bottom: 1px solid var(--gold-bright); }

.founder-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.9) contrast(1.04);
}

.founder-portrait figcaption {
  margin-top: 1.25rem;
  color: var(--ivory);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
}

.founder-portrait figcaption span { color: #9d9991; font: 600 0.56rem / 1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }

.founder-page .founder-opening {
  border-bottom: 1px solid var(--warm-line);
  background: var(--founder-paper-deep);
}

.founder-opening__grid {
  display: grid;
  grid-template-columns: minmax(17rem, 0.65fr) minmax(0, 1.15fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: start;
}

.founder-opening blockquote {
  position: sticky;
  top: 7.5rem;
  margin: 0;
  padding: 0 0 0 2rem;
  border-left: 1px solid #8a641f;
}

.founder-opening blockquote p {
  color: var(--founder-ink);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 3.25rem);
  line-height: 1.08;
}

.founder-opening blockquote cite { color: var(--gold); font: 700 0.66rem / 1.4 var(--mono); font-style: normal; letter-spacing: 0.09em; text-transform: uppercase; }

.founder-story { background: var(--founder-paper); }
.founder-chapter { border-bottom: 1px solid var(--warm-line); }
.founder-chapter:nth-child(even) { background: var(--color-surface); }

.founder-chapter__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.6fr) minmax(0, 1.25fr);
  gap: clamp(3rem, 9vw, 10rem);
  align-items: start;
}

.founder-chapter header {
  position: sticky;
  top: 7.5rem;
  padding-left: 2rem;
  border-left: 1px solid #8a641f;
}

.founder-chapter header span { color: var(--gold); font: 700 0.65rem / 1 var(--mono); letter-spacing: 0.1em; }
.founder-chapter h2 { max-width: 13ch; margin-top: 1.25rem; color: var(--founder-ink); font-size: clamp(2.7rem, 5vw, 5.2rem); line-height: 0.94; }

.founder-prose {
  max-width: 66ch;
  color: var(--founder-muted);
  font-size: clamp(1.03rem, 1.35vw, 1.16rem);
  line-height: 1.82;
}

.founder-prose > * + * { margin-top: 1.35rem; }
.founder-prose p { margin-bottom: 0; }
.founder-page .founder-prose > p:not(.founder-principle, .founder-pull, .founder-statement) { color: var(--founder-muted); }

.founder-principle,
.founder-pull {
  margin-block: clamp(2.5rem, 5vw, 4.5rem) ;
  padding-block: 1.2rem;
  border-block: 1px solid rgb(108 75 12 / 0.35);
  color: var(--founder-ink);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3vw, 2.8rem);
  line-height: 1.2;
}

.founder-statement {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
}

.founder-cadence {
  margin-block: clamp(2rem, 5vw, 4rem) ;
  padding-left: 1.5rem;
  border-left: 1px solid rgb(108 75 12 / 0.42);
}

.founder-cadence p { color: var(--founder-ink); font-weight: 700; }
.founder-cadence p + p { margin-top: 0.6rem; }
.founder-cadence--questions p { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.35; }
.founder-cadence--products p { color: var(--gold); font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; }

.founder-chapter--dark {
  background:
    radial-gradient(circle at 12% 14%, rgb(211 171 88 / 0.12), transparent 28rem),
    #090a09 ;
  color: var(--ivory);
}

.founder-chapter--dark header { border-left-color: var(--gold-bright); }
.founder-chapter--dark header span { color: var(--gold-bright); }
.founder-chapter--dark h2,
.founder-chapter--dark .founder-prose,
.founder-chapter--dark .founder-cadence p,
.founder-chapter--dark .founder-pull { color: var(--ivory); }
.founder-chapter--dark .founder-prose > p:not(.founder-pull, .founder-statement) { color: #c9c4ba; }
.founder-chapter--dark .founder-cadence { border-left-color: var(--warm-line-strong); }
.founder-chapter--dark .founder-pull { border-color: var(--warm-line-strong); }
.founder-chapter--dark .founder-statement { color: var(--gold-bright); }

.founder-cta .cluster { gap: 1.25rem 2rem; }
.founder-cta .text-link { color: var(--founder-ink); }

@media (max-width: 64rem) {
  .founder-hero__grid,
  .founder-opening__grid,
  .founder-chapter__grid { grid-template-columns: minmax(0, 1fr); }
  .founder-hero__grid { gap: 4rem; }
  .founder-hero__copy h1 { max-width: 12ch; }
  .founder-portrait { width: min(100%, 18rem); justify-self: start; }
  .founder-opening blockquote,
  .founder-chapter header { position: static; }
  .founder-chapter h2 { max-width: 17ch; }
}

@media (max-width: 48rem) {
  .founder-hero { padding-block: 4rem; }
  .founder-hero__copy .eyebrow { margin-top: 3rem; }
  .founder-hero__copy h1 { font-size: clamp(3.7rem, 17vw, 5.5rem); }
  .founder-facts { grid-template-columns: 1fr; }
  .founder-facts div,
  .founder-facts div + div { padding: 0.9rem 0; border-right: 0; border-bottom: 1px solid var(--warm-line); }
  .founder-facts div:last-child { border-bottom: 0; }
  .founder-hero__grid { gap: 2.75rem; }
  .founder-portrait { width: min(70vw, 14rem); margin-inline: auto; justify-self: center; }
  .founder-portrait figcaption { text-align: center; }
  .founder-portrait__frame { box-shadow: 0.8rem 0.8rem 0 rgb(211 171 88 / 0.1), 0 2rem 5rem rgb(0 0 0 / 0.5); }
  .founder-opening blockquote,
  .founder-chapter header { padding-left: 1.25rem; }
  .founder-chapter h2 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .founder-prose { font-size: 1rem; line-height: 1.75; }
}

/* Work proof should show the work itself, not a generic interface drawing. */

.content-split img[src$="bps-site-live.png"],
.content-split img[src$="da-skull-wings-product.jpg"] {
  width: 100%;
  height: auto;
  border: 1px solid var(--warm-line-strong);
}

.preview-body--list {
  grid-template-columns: 1fr;
}

/* Restored layout from v37 production-overrides.css — 2026-09-02 (v40 repair)
   Source: public/production-overrides.css as last committed at a6e50c3 (the parent of v37 dc21520, where the
   file was deleted without its layout being folded into this stylesheet). Every rule below was reduced to
   structure: grid/flex, spacing, position, size, typographic scale, hairlines, and motion. Colour goes
   through the unified theme tokens only (no literal palette values); the only appearance declarations kept
   are the approved logo assets, translucent panels that must occlude the hero backdrop, and alpha-only
   decorative overlays. Section-heading sizes carry the body[data-theme] prefix so they outrank the theme's
   generic h2/h3 scale, which is emitted after this block. */

/* Shared frame ------------------------------------------------------------ */
.container { width: min(100% - clamp(2rem, 5vw, 6rem), 88rem); }
.site-header,
.header-inner { min-height: 5.25rem; }
.header-inner { gap: 1rem; }
.brand-mark,
.site-header .brand-mark {
  width: 3rem;
  height: 3rem;
  overflow: hidden;
  border: 0;
  background: url('/assets/bps-logo-monogram.3c247d06.webp') center / contain no-repeat;
  color: transparent;
  font-size: 0;
  white-space: nowrap;
  box-shadow: none;
}
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: '';
  position: absolute;
  top: -17rem;
  right: -12rem;
  width: 38rem;
  height: 38rem;
  border: 1px solid var(--warm-line);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgb(211 171 88 / 0.03), 0 0 0 10rem rgb(211 171 88 / 0.02);
  pointer-events: none;
}
.site-footer .footer-top {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(16rem, 1.35fr) repeat(4, minmax(8rem, 0.6fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.footer-services { min-width: 0; }
.site-footer .footer-top h3 {
  font: 700 0.62rem/1.2 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.site-footer .bps-brand { align-items: flex-start; width: fit-content; }
.site-footer .brand-mark {
  width: clamp(7.5rem, 10vw, 9rem);
  height: clamp(7.5rem, 10vw, 9rem);
  background-image: url('/assets/bps-logo-gold.d4667f91.webp');
}
.site-footer .brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
main.legal-page,
main.support-page,
main.start-page,
main.estimate-page { display: block; min-height: 60vh; }

/* Signature homepage hero --------------------------------------------------- */
.bps-hero {
  position: relative;
  min-height: min(60rem, calc(100svh - 1rem));
  overflow: hidden;
  border-bottom: 1px solid var(--warm-line);
  isolation: isolate;
}
.bps-hero__media,
.bps-hero__atmosphere { position: absolute; inset: 0; }
.bps-hero__media { z-index: -3; }
.bps-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.025);
  animation: hero-breathe 14s ease-in-out infinite alternate;
}
.bps-hero__atmosphere { z-index: -2; }
.bps-hero__atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background:
    linear-gradient(rgb(240 203 116 / 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgb(240 203 116 / 0.09) 1px, transparent 1px);
  background-size: clamp(3rem, 5vw, 5.5rem) clamp(3rem, 5vw, 5.5rem);
  mask-image: linear-gradient(90deg, transparent 12%, black 56%, transparent 96%);
}
.bps-hero__layout {
  min-height: clamp(45rem, 82svh, 56rem);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(25rem, 0.72fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: center;
  padding-block: clamp(6rem, 10vw, 9rem) 4rem;
}
.bps-hero__copy { max-width: 48rem; }
.bps-kicker {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 43rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--warm-line);
  color: var(--color-muted-text);
  font: 600 0.6rem/1.2 var(--font-mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.bps-hero h1 {
  max-width: 10ch;
  margin: 0.55rem 0 1.8rem;
  line-height: 0.88;
  letter-spacing: -0.064em;
}
.bps-hero h1 em { display: inline-block; color: var(--gold-pale); font-weight: 400; }
.bps-hero .lead {
  max-width: 39rem;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem);
  line-height: 1.55;
}
.bps-hero__actions { margin-top: 2rem; }

.system-node {
  position: absolute;
  width: 8.7rem;
  min-height: 5.6rem;
  display: grid;
  align-content: center;
  padding: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--color-text) 20%, transparent);
  background: var(--color-surface);
  box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-background) 72%, transparent);
}
.system-node i {
  position: absolute;
  top: 0.42rem;
  right: 0.52rem;
  color: var(--color-muted-text);
  font: 500 0.52rem/1 var(--font-mono);
}
.system-node strong { color: var(--color-text); font-size: 0.78rem; }
.system-node span { color: var(--color-muted-text); font: 500 0.58rem/1.35 var(--font-mono); }
.system-node--input { top: 2rem; left: 1.3rem; }
.system-node--core { top: 9.3rem; left: 50%; border-color: var(--gold-bright); transform: translateX(-50%); }
.system-node--web { top: 2.2rem; right: 1.25rem; }
.system-node--tools { right: 1.25rem; bottom: 1.65rem; }
.system-line {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  transform-origin: left;
  animation: system-pulse 3.6s ease-in-out infinite;
}
.system-line--a { top: 8.4rem; left: 7rem; width: 48%; transform: rotate(22deg); }
.system-line--b { top: 8.4rem; left: 52%; width: 34%; transform: rotate(-22deg); animation-delay: 0.7s; }
.system-line--c { top: 14.7rem; left: 54%; width: 33%; transform: rotate(25deg); animation-delay: 1.3s; }
.bps-hero__rail {
  min-height: 4.2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  border-top: 1px solid var(--warm-line);
  color: var(--color-muted-text);
  font: 600 0.6rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bps-hero__rail span:nth-child(2) { text-align: center; }
.bps-hero__rail span:last-child { text-align: right; }

/* Proof presented as an editorial ledger ----------------------------------- */
.proof-rail { position: relative; border-bottom: 1px solid var(--warm-line); }
.proof-rail__layout {
  min-height: 26rem;
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 0.85fr 0.85fr;
}
.proof-rail__layout > * {
  min-width: 0;
  padding: clamp(2rem, 4vw, 4rem) clamp(1.35rem, 3vw, 3rem);
  border-right: 1px solid var(--warm-line);
}
.proof-rail__layout > :first-child { padding-left: 0; }
.proof-rail__layout > :last-child { border-right: 0; padding-right: 0; }
.proof-rail__heading { align-self: end; }
.proof-record {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.proof-record::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--gold-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 240ms ease;
}
.proof-record:hover::before { transform: scaleX(1); transform-origin: left; }
.proof-record:hover { background: rgb(211 171 88 / 0.045); color: var(--color-text); }
.proof-record > span {
  color: var(--gold-bright);
  font: 600 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.proof-record strong {
  max-width: 13ch;
  color: var(--color-text);
  font: 500 clamp(1.55rem, 2.4vw, 2.7rem)/1.03 var(--font-display);
  letter-spacing: -0.04em;
}
.proof-record small { color: var(--color-muted-text); font: 700 0.82rem/1.3 var(--font-body); letter-spacing: 0; }
.proof-record--lead { background: linear-gradient(160deg, rgb(211 171 88 / 0.12), transparent 60%); }

/* Capability chapters: one connected system, three disciplines ------------- */
.systems-section { position: relative; overflow: clip; }
.systems-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 0.5px);
  width: 1px;
  background: linear-gradient(transparent, var(--warm-line-strong), transparent);
}
.systems-section__layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.75fr) minmax(0, 1.5fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: start;
}
.systems-section__intro { position: sticky; top: 8rem; }
.systems-section__intro > p:not(.eyebrow) { max-width: 37rem; }
.system-chapters { display: grid; }
.system-chapter {
  min-height: 35rem;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(12rem, 0.7fr);
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--warm-line);
}
.system-chapter:first-child { border-top: 0; padding-top: 0; }
.system-chapter--web { --chapter-accent: var(--gold-bright); }
.system-chapter--apps { --chapter-accent: var(--gold); }
.system-chapter--ops { --chapter-accent: var(--gold-deep); }
.system-chapter__index { align-self: start; color: var(--color-muted-text); font: 600 0.64rem/1 var(--font-mono); }
.system-chapter > div:nth-child(2) > p:not(.eyebrow) { max-width: 42rem; }
.system-chapter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}
.system-chapter li { position: relative; padding-left: 0.9rem; color: var(--color-text); font-size: 0.78rem; font-weight: 600; }
.system-chapter li::before { content: ''; position: absolute; top: 0.72em; left: 0; width: 0.34rem; height: 1px; background: var(--gold); }
.system-chapter a { color: var(--gold-bright); font-size: 0.8rem; font-weight: 800; }
.system-chapter__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 18rem;
  justify-self: end;
  border: 1px solid var(--chapter-accent, var(--warm-line));
  background:
    linear-gradient(rgb(211 171 88 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 171 88 / 0.08) 1px, transparent 1px),
    radial-gradient(circle at center, rgb(211 171 88 / 0.17), transparent 55%);
  background-size: 2.3rem 2.3rem, 2.3rem 2.3rem, auto;
  transform: rotate(-3deg);
}
.system-chapter__visual span {
  position: absolute;
  border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--color-background) 78%, transparent);
}
.system-chapter__visual span:nth-child(1) { inset: 16% 45% 55% 13%; }
.system-chapter__visual span:nth-child(2) { inset: 34% 13% 29% 34%; }
.system-chapter__visual span:nth-child(3) { inset: 68% 55% 10% 18%; }
.system-chapter__visual i {
  position: absolute;
  right: 0.7rem;
  bottom: 0.55rem;
  color: var(--chapter-accent, var(--gold-bright));
  font: 600 0.56rem/1 var(--font-mono);
  letter-spacing: 0.08em;
}
body[data-theme='cinematic-dark'] .system-chapter__visual--device { border-radius: 2.2rem; transform: rotate(3deg); }
.system-chapter__visual--device::before {
  content: '';
  position: absolute;
  top: 0.65rem;
  left: 50%;
  width: 3rem;
  height: 0.22rem;
  border-radius: 2rem;
  background: var(--chapter-accent, var(--gold));
  transform: translateX(-50%);
}
body[data-theme='cinematic-dark'] .system-chapter__visual--flow span { width: 3.8rem; height: 3.8rem; border-radius: 50%; }
.system-chapter__visual--flow span:nth-child(1) { top: 15%; left: 14%; }
.system-chapter__visual--flow span:nth-child(2) { top: 38%; left: 57%; }
.system-chapter__visual--flow span:nth-child(3) { top: 68%; left: 24%; }

/* Process, tools, ownership, and final conversion --------------------------- */
.build-sequence {
  position: relative;
  border-block: 1px solid var(--warm-line);
  background: radial-gradient(circle at 80% 20%, rgb(211 171 88 / 0.09), transparent 30rem);
}
.build-sequence__heading {
  display: grid;
  grid-template-columns: 0.5fr 1.5fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}
.build-sequence__track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--warm-line-strong);
  list-style: none;
}
.build-sequence__track li {
  position: relative;
  min-height: 15rem;
  padding: 2.25rem clamp(1rem, 2vw, 1.7rem) 1.25rem;
  border-right: 1px solid var(--warm-line);
}
.build-sequence__track li:last-child { border-right: 0; }
.build-sequence__track li::before {
  content: '';
  position: absolute;
  top: -0.34rem;
  left: 1.3rem;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 1rem rgb(211 171 88 / 0.75);
}
.build-sequence__track span { color: var(--color-muted-text); font: 600 0.62rem/1 var(--font-mono); }
.build-sequence__track strong { display: block; margin: 2rem 0 0.65rem; color: var(--color-text); font-size: 1rem; }
.build-sequence__track p { font-size: 0.8rem; }

.working-tools { background: color-mix(in srgb, var(--color-surface) 60%, var(--color-background)); }
.working-tools__heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 4rem;
}
.working-tools__heading > p { max-width: 35rem; }
.working-tools__list { border-top: 1px solid var(--warm-line-strong); }
.working-tools__list > a {
  min-height: 10.5rem;
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--warm-line);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 180ms ease;
}
.working-tools__list > a:hover { background: linear-gradient(90deg, rgb(211 171 88 / 0.1), transparent); color: var(--color-text); }
.working-tools__list > a > span { color: var(--gold-bright); font: 600 0.65rem/1 var(--font-mono); }
.working-tools__list small {
  color: var(--color-muted-text);
  font: 600 0.62rem/1 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.working-tools__list h3 { margin: 0.45rem 0; }
.working-tools__list p { margin: 0; }
.working-tools__list > a > strong {
  color: var(--gold-bright);
  font-size: 2.4rem;
  font-weight: 300;
  text-align: right;
  transition: transform 180ms ease;
}
.working-tools__list > a:hover > strong { transform: translate(0.25rem, -0.25rem); }

.ownership-statement { position: relative; overflow: hidden; }
.ownership-statement::after {
  content: 'BPS';
  position: absolute;
  right: -0.04em;
  bottom: -0.34em;
  color: rgb(17 18 15 / 0.07);
  font: 800 clamp(13rem, 32vw, 36rem)/0.8 var(--font-body);
  letter-spacing: -0.09em;
  pointer-events: none;
}
.ownership-statement__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.4fr 1.25fr 0.65fr;
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
}
.ownership-statement .eyebrow { align-self: start; }
.ownership-statement h2 { margin: 0; }
.ownership-statement h2 em { font-weight: 400; }
.ownership-statement p { font-weight: 600; }

.bps-final__layout {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(3rem, 9vw, 10rem);
  align-items: end;
}
.bps-final__layout > div:last-child { display: grid; gap: 1rem; justify-items: start; }
.bps-final__layout > div:last-child > a:not(.action) { color: var(--gold-bright); font-size: 0.78rem; font-weight: 700; }

/* Homepage heading scale (outranks the theme's generic h2/h3 sizes) --------- */
body[data-theme='cinematic-dark'] .proof-rail__heading h2 { margin: 0; font-size: clamp(2.5rem, 4.5vw, 4.7rem); line-height: 0.96; }
body[data-theme='cinematic-dark'] .systems-section__intro h2 { font-size: clamp(3rem, 5vw, 5.4rem); line-height: 0.95; }
body[data-theme='cinematic-dark'] .system-chapter h3 { max-width: 15ch; font-size: clamp(2.45rem, 4vw, 4.35rem); line-height: 0.96; }
body[data-theme='cinematic-dark'] .build-sequence__heading h2 { max-width: 18ch; font-size: clamp(3rem, 5.8vw, 6rem); line-height: 0.94; }
body[data-theme='cinematic-dark'] .working-tools__heading h2 { max-width: 14ch; font-size: clamp(3rem, 6vw, 6rem); line-height: 0.94; }
body[data-theme='cinematic-dark'] .working-tools__list h3 { font-size: clamp(2rem, 4vw, 3.8rem); }
body[data-theme='cinematic-dark'] .ownership-statement h2 { font-size: clamp(4rem, 7.5vw, 8rem); line-height: 0.82; }
body[data-theme='cinematic-dark'] .bps-final h2 { max-width: 14ch; font-size: clamp(3.5rem, 7vw, 7rem); line-height: 0.9; }
body[data-theme='cinematic-dark'] .site-footer .footer-top h2 { max-width: 14ch; font-size: clamp(2.3rem, 4.5vw, 4.6rem); line-height: 0.94; }
body[data-theme='cinematic-dark'] .site-footer .footer-top h3 { font-size: 0.62rem; }
body[data-theme='cinematic-dark'] .start-hero__aside h2 { font-size: clamp(1.7rem, 3vw, 2.8rem); }
body[data-theme='cinematic-dark'] .process-steps strong { font-size: 1rem; }

/* Interior page heroes: consistent structure and the same backdrop --------- */
.flagship-page-hero,
.marketing-hero,
.work-index-hero,
.portal-public-hero,
.start-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--warm-line);
  background:
    linear-gradient(90deg, var(--color-background), color-mix(in srgb, var(--color-background) 90%, transparent) 56%, color-mix(in srgb, var(--color-background) 50%, transparent)),
    url('/assets/bps-binary-metropolis-1672.aec6bf79.webp') 68% center / cover;
}
.flagship-page-hero::after,
.work-index-hero::after,
.portal-public-hero::after,
.start-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(211 171 88 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 171 88 / 0.06) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: linear-gradient(90deg, transparent 26%, black, transparent);
}
.page-hero-grid,
.portal-public-hero__grid,
.start-hero__grid,
.work-index-hero__grid {
  position: relative;
  z-index: 1;
  min-height: clamp(33rem, 64svh, 47rem);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 0.55fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}
.flagship-page-hero h1,
.portal-public-hero h1,
.start-hero h1,
.work-index-hero h1 { max-width: 13ch; line-height: 0.9; }
.marketing-section--1 { padding-top: calc(var(--section-space) * 0.75); }
.page-section-list .marketing-section { border-bottom: 1px solid var(--warm-line); }

/* Start page ---------------------------------------------------------------- */
.start-hero__aside {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--warm-line-strong);
  background: color-mix(in srgb, var(--color-background) 82%, transparent);
  box-shadow: var(--cinematic-shadow);
  backdrop-filter: blur(0.6rem);
}
.start-hero__aside > span,
.start-assurance span {
  color: var(--gold-bright);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.start-assurance {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.25rem;
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--warm-line-strong);
}

/* Work, preview, companion demo ---------------------------------------------- */
.work-ledger { position: relative; border-bottom: 1px solid var(--warm-line); }
.preview-demo { background: var(--color-surface); }
.companion-demo { position: relative; overflow: clip; }
.demo-static-label {
  display: inline-block;
  color: var(--gold-bright);
  font: 600 0.62rem/1.3 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Client workspace walkthrough steps (/portal) ------------------------------ */
.process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 2rem 0;
  padding: 0;
  border: 1px solid var(--warm-line);
  background: var(--warm-line);
  list-style: none;
}
.process-steps li {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  min-height: 9rem;
  padding: 1.35rem;
  background: var(--color-background);
}
.process-steps strong { color: var(--color-text); }
.process-steps span { color: var(--color-muted-text); font-size: 0.86rem; }

/* Legal and support pages --------------------------------------------------- */
.legal-grid,
.support-guidance-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.legal-aside {
  position: sticky;
  top: 7rem;
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--warm-line-strong);
}
.legal-aside strong { font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.22; }
.legal-article { display: grid; gap: 1rem; }
.legal-article h2 { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--warm-line); }
.legal-article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-article ul,
.legal-article ol { display: grid; gap: 0.7rem; }

/* Motion -------------------------------------------------------------------- */
@keyframes hero-breathe {
  from { transform: scale(1.025) translate3d(0, 0, 0); }
  to { transform: scale(1.055) translate3d(-0.35%, -0.2%, 0); }
}
@keyframes system-pulse {
  0%, 100% { opacity: 0.22; filter: brightness(0.75); }
  50% { opacity: 0.9; filter: brightness(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .bps-hero__media img,
  .system-line { animation: none; }
}

/* Responsive collapse ------------------------------------------------------- */
@media (max-width: 72rem) {
  .bps-hero__layout { grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.7fr); gap: 3rem; }
  .proof-rail__layout { grid-template-columns: 1fr 1fr; }
  .proof-rail__layout > * { border-bottom: 1px solid var(--warm-line); }
  .proof-rail__layout > :nth-child(2n) { border-right: 0; }
  .proof-rail__layout > :first-child { padding-left: clamp(1.35rem, 3vw, 3rem); }
  .proof-rail__layout > :last-child { padding-right: clamp(1.35rem, 3vw, 3rem); }
  .systems-section::before { display: none; }
  .systems-section__layout { grid-template-columns: 1fr; }
  .systems-section__intro { position: static; max-width: 55rem; }
  .system-chapter:first-child { border-top: 1px solid var(--warm-line); padding-top: clamp(4rem, 8vw, 7rem); }
  .build-sequence__track { grid-template-columns: repeat(3, 1fr); }
  .build-sequence__track li { border-bottom: 1px solid var(--warm-line); }
  .site-footer .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .footer-top > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .container { width: min(100% - 2rem, 88rem); }
  .site-header,
  .header-inner { min-height: 4.6rem; }
  .bps-hero { min-height: auto; }
  .bps-hero__media img { object-position: 69% center; }
  .bps-hero__layout { min-height: auto; grid-template-columns: 1fr; gap: 3.5rem; padding-block: 6rem 2rem; }
  .bps-kicker { margin-bottom: 4rem; }
  .bps-kicker span:last-child { display: none; }
  .bps-hero h1 { max-width: 9ch; }
  .bps-hero .lead { max-width: 31rem; font-size: 1rem; }
  .bps-hero__actions { align-items: stretch; }
  .bps-hero__actions .action { width: 100%; }
  .system-node { width: 7.4rem; padding: 0.7rem; }
  .bps-hero__rail { min-height: 6rem; grid-template-columns: 1fr; gap: 0.4rem; padding-block: 1rem; }
  .bps-hero__rail span:nth-child(n) { text-align: left; }
  .proof-rail__layout { grid-template-columns: 1fr; }
  .proof-rail__layout > * { min-height: 16rem; border-right: 0; padding: 2rem 0; }
  .proof-rail__heading { min-height: auto; }
  .system-chapter { min-height: auto; grid-template-columns: 2rem 1fr; padding-block: 4.5rem; }
  .system-chapter__visual { grid-column: 2; width: min(100%, 17rem); justify-self: start; margin-top: 1rem; }
  .build-sequence__heading,
  .working-tools__heading,
  .ownership-statement__layout,
  .bps-final__layout { grid-template-columns: 1fr; }
  .build-sequence__track { grid-template-columns: 1fr; }
  .build-sequence__track li { min-height: auto; border-right: 0; }
  .working-tools__list > a { grid-template-columns: 2rem 1fr 2rem; }
  .ownership-statement__layout { gap: 2rem; }
  body[data-theme='cinematic-dark'] .ownership-statement h2 { font-size: clamp(3.8rem, 18vw, 6rem); }
  .ownership-statement::after { right: -0.08em; bottom: -0.1em; }
  .page-hero-grid,
  .portal-public-hero__grid,
  .start-hero__grid,
  .work-index-hero__grid { min-height: auto; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 6rem 4rem; }
  .process-steps { grid-template-columns: 1fr; }
  .process-steps li { min-height: auto; }
  .legal-grid,
  .support-guidance-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .site-footer .footer-top { grid-template-columns: 1fr; }
  .site-footer .footer-top > :first-child { grid-column: auto; }
}

@media (max-width: 26.875rem) {
  .system-node--input { left: 0.7rem; }
  .system-node--web,
  .system-node--tools { right: 0.7rem; }
  .system-node--core { top: 8.5rem; }
  .system-line--a { left: 5rem; }
  .working-tools__list > a { padding-inline: 0; }
}

/* v41 homepage restructure — 2026-09-02. New sections (price block, portfolio grid, founder block, also-from strip)
   and the service-overview rename. Layout only; colour goes through the theme tokens. */

.service-overview {
  align-self: end;
  margin-bottom: 2rem;
  border: 1px solid var(--warm-line-strong);
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  box-shadow: var(--cinematic-shadow);
  backdrop-filter: blur(0.75rem);
}
.service-overview__top,
.service-overview__footer {
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--warm-line);
  color: var(--color-muted-text);
  font: 600 0.58rem/1.2 var(--font-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.service-overview__state { color: var(--gold-bright); }
.service-overview__diagram {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  background:
    linear-gradient(rgb(211 171 88 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 171 88 / 0.08) 1px, transparent 1px),
    radial-gradient(circle at center, rgb(211 171 88 / 0.1), transparent 60%);
  background-size: 2.6rem 2.6rem, 2.6rem 2.6rem, auto;
}
.service-overview__footer { border-top: 1px solid var(--warm-line); border-bottom: 0; }
.service-overview__footer i {
  width: 0.5rem;
  height: 0.5rem;
  display: inline-block;
  margin-right: 0.4rem;
  background: var(--gold-bright);
  box-shadow: 0 0 0.7rem var(--gold);
}
body[data-theme='cinematic-dark'] .service-overview__footer i { border-radius: 50%; }

/* Price and terms ----------------------------------------------------------- */
.price-block { border-bottom: 1px solid var(--warm-line); }
.price-block__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
  gap: 1px;
  border: 1px solid var(--warm-line-strong);
  background: var(--warm-line-strong);
}
.price-block__anchor,
.price-block__founding {
  display: grid;
  align-content: start;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-background);
}
.price-block__anchor > p:not(.eyebrow) { max-width: 38rem; }
.price-block__founding { background: var(--color-surface); }
.price-block__founding-figure {
  margin: 0;
  color: var(--gold-pale);
  font: 500 clamp(3rem, 6vw, 5.5rem)/0.9 var(--font-display);
  letter-spacing: -0.04em;
}
.price-block__counter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--warm-line);
}
.price-block__counter strong { color: var(--color-text); }
.founding-slots { display: inline-flex; gap: 0.35rem; }
.founding-slots i {
  width: 1.4rem;
  height: 0.5rem;
  border: 1px solid var(--gold);
  background: transparent;
}
.founding-slots i[data-filled] { background: var(--gold-bright); border-color: var(--gold-bright); }
.price-block__terms {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--warm-line-strong);
}
.price-block__terms li {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  background: var(--color-background);
}
.price-block__terms strong { color: var(--gold-bright); font-size: 0.95rem; }
.price-block__terms span { color: var(--color-muted-text); font-size: 0.9rem; }
body[data-theme='cinematic-dark'] .price-block h2 { max-width: 16ch; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 0.95; }
.price-anchor,
.price-founding { color: var(--gold-pale); font-variant-numeric: tabular-nums; }
.price-claimed { color: var(--color-text); }
.price-total { color: var(--color-text); font-weight: 700; }

/* The problem: ledger records that are statements, not links --------------- */
.problem-rail .proof-record p { margin: 0; color: var(--color-muted-text); font: 400 0.92rem/1.55 var(--font-body); letter-spacing: 0; }

/* What you get: deliverable rows -------------------------------------------- */
.working-tools__list > div {
  min-height: 9rem;
  display: grid;
  grid-template-columns: 4rem 1fr 4rem;
  gap: 1rem;
  align-items: center;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--warm-line);
}
.working-tools__list > div > span { color: var(--gold-bright); font: 600 0.65rem/1 var(--font-mono); }
.working-tools__list > div > strong { color: var(--gold-bright); font-size: 1.6rem; font-weight: 300; text-align: right; }

/* Portfolio grid ------------------------------------------------------------ */
.portfolio { position: relative; border-top: 1px solid var(--warm-line); }
.portfolio__heading {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}
.portfolio__heading > p { max-width: 34rem; }
body[data-theme='cinematic-dark'] .portfolio__heading h2 { max-width: 14ch; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 0.95; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}
.portfolio-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  border: 1px solid var(--warm-line-strong);
  background: var(--color-background);
}
.portfolio-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-bottom: 1px solid var(--warm-line);
  background: var(--color-surface);
}
.portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 240ms ease;
}
.portfolio-card__media:hover img { transform: scale(1.02); }
.portfolio-card__media--empty {
  display: grid;
  place-items: center;
  color: var(--color-muted-text);
  font: 600 0.65rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background:
    linear-gradient(rgb(211 171 88 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(211 171 88 / 0.08) 1px, transparent 1px);
  background-size: 2.3rem 2.3rem;
}
.portfolio-card__body { display: grid; gap: 0.6rem; align-content: start; padding: 1.35rem clamp(1.2rem, 2.5vw, 1.75rem) 1.6rem; }
.portfolio-card__body .work-status { width: fit-content; }
body[data-theme='cinematic-dark'] .portfolio-card h3 { font-size: 1.45rem; line-height: 1.1; }
.portfolio-card__title { color: var(--color-text); text-decoration: none; }
.portfolio-card__title:hover { color: var(--gold-bright); }
.portfolio-card__body p { margin: 0; font-size: 0.92rem; }
.portfolio-grid[data-placeholders='hidden'] .portfolio-card--placeholder { display: none; }

/* Founder block ------------------------------------------------------------- */
.founder-block__layout {
  display: grid;
  grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 1.45fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.founder-block__portrait {
  width: min(100%, 22rem);
  margin: 0;
  padding: clamp(0.65rem, 1.5vw, 1rem);
  border: 1px solid var(--warm-line-strong);
  background: var(--color-background);
}
.founder-block__portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.founder-block__copy { display: grid; gap: 1rem; max-width: 40rem; }
.founder-block__copy .lead { color: var(--color-text); }
body[data-theme='cinematic-dark'] .founder-block h2 { font-size: clamp(2.4rem, 4.5vw, 4.2rem); line-height: 0.95; }

/* Compact process row ------------------------------------------------------- */
.build-sequence--compact .build-sequence__heading {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
body[data-theme='cinematic-dark'] .build-sequence--compact .build-sequence__heading h2 { max-width: 24ch; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.build-sequence--compact .build-sequence__track li { min-height: 11rem; padding-top: 1.75rem; }
.build-sequence--compact .build-sequence__track strong { margin-top: 1.25rem; }

/* Also from BPS strip -------------------------------------------------------- */
.also-from { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--warm-line); }
.also-from__layout { display: grid; gap: 1.25rem; }
.also-from__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--warm-line);
  background: var(--warm-line);
  list-style: none;
}
.also-from__list a {
  display: grid;
  gap: 0.3rem;
  min-height: 5.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-background);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color 180ms ease;
}
.also-from__list a:hover { background: var(--color-surface); color: var(--color-text); }
.also-from__list strong { font-size: 0.95rem; }
.also-from__list span { color: var(--color-muted-text); font-size: 0.84rem; }

@media (max-width: 72rem) {
  .also-from__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
  .service-overview { width: min(100%, 25rem); margin: 0 auto 1.5rem; }
  .service-overview__diagram { min-height: 22rem; }
  .price-block__layout { grid-template-columns: 1fr; }
  .price-block__terms { grid-template-columns: 1fr; }
  .portfolio__heading,
  .founder-block__layout { grid-template-columns: 1fr; }
  .founder-block__portrait { width: min(100%, 18rem); }
  .working-tools__list > div { grid-template-columns: 2rem 1fr 2rem; }
  .also-from__list { grid-template-columns: 1fr; }
}

/* BPS unified dark theme */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-latin.1b5ebfb3.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/geist-latin-ext.f7604a53.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --color-primary: #f0cb74;
  --color-secondary: #d3ab58;
  --color-accent: #9d742d;
  --color-background: #080908;
  --color-surface: #151715;
  --color-text: #f5f0e6;
  --color-muted-text: #b9b5ab;
  --gold: #d3ab58;
  --gold-bright: #f0cb74;
  --gold-deep: #9d742d;
  --black: #080908;
  --ivory: #f5f0e6;
  --ivory-muted: #b9b5ab;
  --ink: #080908;
  --canvas-black: #080908;
  --warm-line-strong: rgb(211 171 88 / 0.32);
  --font-display: Georgia, serif;
  --sans: 'Geist', system-ui, sans-serif;
  --display: var(--font-display);
  --font-body: var(--sans);
  --font-mono: monospace;
  --mono: var(--font-mono);
  --cinema-black: #050505;
  --graphite: #0e100f;
  --gold-pale: #f8dda0;
  --warm-line: rgb(211 171 88 / 0.24);
  --cinematic-shadow: 0 2rem 7rem rgb(0 0 0 / 0.55);
  --stack-space: var(--space-4);
  --cluster-gap: var(--space-3);
  --grid-gap: var(--space-5);
  --v2-muted: var(--color-muted-text);
  --media-position: center;
  --bps-price-anchor: "$4,500";
  --bps-price-founding: "$2,500";
  --bps-founding-total: 5;
  --bps-founding-claimed: 2;
  --letter-display: -0.035em;
  --radius: 4px;
  --radius-pill: 999px;
  --section-space: clamp(4rem, 8vw, 7rem);
  --bps-grid: rgb(211 171 88 / 0.12);
  --bps-line: rgb(245 240 230 / 0.16);
}
html { background: #050505; color-scheme: dark; }
body { background: var(--color-background); color: var(--color-text); font-family: var(--sans); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgb(211 171 88 / 0.02) 1px, transparent 1px), linear-gradient(90deg, rgb(211 171 88 / 0.02) 1px, transparent 1px); background-size: 4rem 4rem; }
h1, h2, h3, h4 { color: var(--color-text); font-family: var(--font-display); font-weight: 500; }
body[data-theme='cinematic-dark'] h1,
body[data-theme='cinematic-dark'] .hero h1,
body[data-theme='cinematic-dark'] .flagship-page-hero h1,
body[data-theme='cinematic-dark'] .bps-hero h1,
body[data-theme='cinematic-dark'] .bps-home-hero h1,
body[data-theme='cinematic-dark'] .portal-public-hero h1 { font-size: clamp(3rem, 6.5vw, 6.5rem); }
body[data-theme='cinematic-dark'] h2,
body[data-theme='cinematic-dark'] .section-heading h2,
body[data-theme='cinematic-dark'] .section-heading-row h2 { font-size: clamp(2rem, 4vw, 3rem); }
body[data-theme='cinematic-dark'] h3 { font-size: 1.5rem; }
p, li, dd { color: var(--color-muted-text); }
a { color: var(--color-text); }
a:hover { color: var(--color-primary); }
:focus-visible { outline: 3px solid #f2c96f; outline-offset: 2px; box-shadow: 0 0 0 5px #080908; }
.action:focus-visible, .action--primary:focus-visible, .action--secondary:focus-visible, .action--glass:focus-visible { outline: 3px solid #f2c96f; outline-offset: 2px; box-shadow: 0 0 0 5px #080908; transition: none; }
.site-header { position: sticky; top: 0; background: rgb(5 5 5 / 0.94); border-color: rgb(211 171 88 / 0.24); }
.brand-mark { border-color: var(--color-accent); border-top-color: var(--color-primary); font-family: var(--font-mono); }
.primary-nav ul { gap: 1rem; }
.primary-nav a, .primary-nav summary { color: var(--color-muted-text); font-size: 0.88rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.primary-nav a:hover, .primary-nav summary:hover { color: var(--color-primary); }
.nav-services { position: relative; }
.nav-services > details > summary { list-style: none; }
.nav-services > details > summary::-webkit-details-marker { display: none; }
.nav-services > details > ul { position: absolute; top: calc(100% + 0.75rem); left: 50%; min-width: 12rem; transform: translateX(-50%); display: grid; gap: 0.25rem; margin: 0; padding: 0.6rem; border: 1px solid rgb(211 171 88 / 0.32); border-radius: var(--radius); background: var(--color-surface); box-shadow: 0 1rem 2rem rgb(0 0 0 / 0.35); }
.nav-services > details > ul a { display: block; padding: 0.55rem 0.65rem; }
.portal-utility { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.35rem 0.8rem; border: 1px solid color-mix(in srgb, var(--color-text) 22%, transparent); color: var(--color-primary); text-decoration: none; }
:where(main, .site-footer) :where(a:not(.action)) { display: inline-block; min-height: 24px; }
.section, .hero, .flagship-page-hero, .marketing-section, .bps-home > section { background-color: transparent; color: var(--color-text); }
.section[data-tone='muted'], .section[data-tone='dark'], .project-guide, .ask-bps, .app-catalog-section { background: var(--color-surface); }
.section[data-tone='accent'], .closing-cta { background: var(--color-primary); color: #11120f; }
.section[data-tone='accent'] :where(h2, h3, p, li, a), .closing-cta :where(h2, h3, p, li, a) { color: #11120f; }
.card, .notice, .preview-shell, .work-card, .guide-grid fieldset, .guide-result, .assistant-panel, .result-detail { background: var(--color-surface); border-color: rgb(211 171 88 / 0.32); }
body[data-theme='cinematic-dark'] * { border-radius: var(--radius); }
body[data-theme='cinematic-dark'] .device-chrome span { border-radius: 50%; }
body[data-theme='cinematic-dark'] .pill,
body[data-theme='cinematic-dark'] [class*='badge'],
body[data-theme='cinematic-dark'] .demo-badge,
body[data-theme='cinematic-dark'] .work-status,
body[data-theme='cinematic-dark'] .result-kicker,
body[data-theme='cinematic-dark'] .phone-speaker { border-radius: var(--radius-pill); }
.action--primary { background: var(--color-primary); color: #11120f; border-color: var(--color-primary); }
.action--primary:hover { background: var(--color-text); color: #11120f; }
.site-header .primary-nav a.header-cta { border-color: var(--color-primary); background: var(--color-primary); color: #11120f; }
.site-header .primary-nav a.header-cta:hover, .site-header .primary-nav a.header-cta:focus-visible { border-color: var(--color-text); background: var(--color-text); color: #11120f; }
.action--primary:focus-visible, .site-header .primary-nav a.header-cta:focus-visible, .skip-link:focus-visible, .section[data-tone='accent'] :is(a, button):focus-visible, .closing-cta :is(a, button):focus-visible { outline-color: var(--canvas-black); box-shadow: 0 0 0 5px #f2c96f; }
.preview-banner, .preview-banner strong, .preview-banner span { color: #11120f; }
.action--secondary, .action--glass { border-color: rgb(245 240 230 / 0.4); color: var(--color-text); background: transparent; }
.action--secondary:hover, .action--glass:hover { border-color: var(--color-primary); background: rgb(211 171 88 / 0.12); }
.eyebrow, .section-index, .work-status, .result-kicker, .demo-badge, .text-link, .synthetic-label { color: var(--color-primary); }
.check-list li::before { color: var(--color-primary); }
.phone-frame, .device-stage { background: var(--color-background); border-color: var(--color-accent); }
.phone-screen { background: linear-gradient(160deg, #0e100f, #080908); }
.mini-brand { color: var(--color-primary); }
.mini-card { border-color: var(--color-accent); }
.question-chips button { border-color: var(--color-accent); color: var(--color-text); }
.question-chips button:hover { background: var(--color-surface); border-color: var(--color-primary); }
.lab-preview { background: var(--color-surface); color: var(--color-text); }
.lab-preview header { border-color: rgb(245 240 230 / 0.2); }
/* v43 P1: header row and mobile menu. The only place that sizes or positions either. */
.header-inner { display: flex; flex-wrap: nowrap; align-items: center; }
.header-inner > * { min-width: 0; }
.bps-brand { flex: 0 0 auto; }
.portal-utility { flex: 0 0 auto; }
/* The menu stays in the header row in both states: only the panel is positioned, never the control.
   The old [open] rule moved the whole element to top: 4rem, dropping the button 66px the moment it
   was tapped and painting a second bordered box behind it. The panel below carries that chrome. */
.mobile-nav { display: none; position: relative; flex: 0 0 auto; }
.mobile-nav > summary { padding: 0.65rem 0.8rem; border: 1px solid var(--color-text); color: var(--color-text); cursor: pointer; font-size: 0.8rem; font-weight: 800; list-style: none; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav > nav { position: absolute; top: calc(100% + 0.8rem); right: 0; z-index: 30; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 7rem); overflow-y: auto; padding: 1.2rem; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--black-soft); color: var(--ivory); box-shadow: var(--bps-soft-shadow); }
.mobile-nav ul, .mobile-nav__primary { position: static; width: auto; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; list-style: none; }
.mobile-nav li + li { margin-top: 0.25rem; }
.mobile-nav a { display: inline-block; min-height: 44px; padding: 0.65rem 0.4rem; color: var(--ivory); font-weight: 700; }
.mobile-nav__heading { color: var(--ivory); }
.mobile-nav__primary { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--color-text); }
@media (max-width: 74rem) { .primary-nav { display: none; } .mobile-nav { display: block; } }
@media (max-width: 30rem) { .portal-utility { display: none; } .brand-name { display: none; } }

/* v43 P5: sequenced reveal. The idle state is set only by script, so the steps are visible with
   JavaScript off. Only opacity and transform animate, so the reveal cannot shift layout; the stagger
   is what makes the sequence read as a sequence. The force hook and reduced motion both jump to the end. */
[data-reveal-group] > * { --reveal-index: 0; }
[data-reveal-group] > [data-reveal='idle'] { opacity: 0; transform: translateY(0.75rem); }
[data-reveal-group] > [data-reveal='in'] { opacity: 1; transform: none; transition: opacity 460ms ease-out, transform 460ms ease-out; transition-delay: calc(var(--reveal-index, 0) * 90ms); }
@media (prefers-reduced-motion: reduce) { [data-reveal-group] > [data-reveal] { opacity: 1; transform: none; transition: none; } }
[data-reveal-force='on'] [data-reveal-group] > [data-reveal] { opacity: 1; transform: none; transition: none; }
.text-link, .footer-top a, .app-directory a, .support-app-list a { display: inline-block; min-height: 24px; padding-block: 0.25rem; }
.support-app-list li { background: var(--color-background); }
.support-app-list span { color: var(--color-primary); }
.card, .notice, .action, input, select, textarea, button { border-radius: var(--radius); }
.pill, [class*='badge'], .demo-badge, .work-status, .result-kicker { border-radius: var(--radius-pill); }
.legal-aside { background: var(--color-surface); border-color: rgb(211 171 88 / 0.42); }
.legal-article h2 { border-color: rgb(211 171 88 / 0.3); }
.site-footer { border-color: rgb(211 171 88 / 0.24); }
.bps-hero__media img { filter: saturate(0.85) contrast(1.15) brightness(0.62); opacity: 0.85; }
.bps-hero__atmosphere { background: linear-gradient(100deg, var(--color-background) 0% 38%, color-mix(in srgb, var(--color-background) 55%, transparent) 68%, transparent 100%); }
@media (max-width: 48rem) { .footer-top { grid-template-columns: 1fr; } }