/* ============================================================
   B_R Design System  ·  v1.0
   Beyond Rational · Aisti
   ------------------------------------------------------------
   Architectural-monograph register. Single family (Archivo +
   Archivo Black) at five weights, warm cream surface, charred
   oak as brand carrier, 2 px heavy rules, no eyebrows.
   Namespace: .bra-
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@100;300;500;700;900&family=Archivo+Black&display=swap");

/* ---------- Page transitions ---------- */
/* Cross-document nav wipes like a curtain drawn open, not a hard cut. Progressive enhancement:
   no-ops in browsers without support, and only fires between two pages that both load this file. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: bra-curtain-wipe 550ms cubic-bezier(.65,0,.35,1) both;
}
::view-transition-new(root) {
  animation: bra-curtain-reveal 550ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes bra-curtain-wipe { to { clip-path: inset(0 0 0 100%); } }
@keyframes bra-curtain-reveal { from { transform: scale(1.03); filter: brightness(.9); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------- Tokens ---------- */
:root {
  /* Surface — warm cream retained from v0.1 palette */
  --bra-paper:     #F4F2ED;
  --bra-stone:     #E8E5DC;
  --bra-shadow:    #C8C2B4;

  /* Ink */
  --bra-ink:       oklch(0.160 0.005 240);
  --bra-ink-2:     oklch(0.420 0.005 240);
  --bra-ink-mute:  oklch(0.620 0.004 240);

  /* Brand carrier — charred oak, references the wood fibre */
  --bra-oak:       oklch(0.300 0.040 55);
  --bra-oak-deep:  oklch(0.200 0.035 50);
  --bra-oak-warm:  oklch(0.550 0.070 60);
  --bra-on-oak:    oklch(0.960 0.010 60);

  /* Type — single family commitment */
  --bra-font:         "Archivo", system-ui, sans-serif;
  --bra-font-display: "Archivo Black", "Archivo", sans-serif;

  /* Scale — big jumps */
  --bra-fs-micro:  11px;
  --bra-fs-small:  13px;
  --bra-fs-body:   16px;
  --bra-fs-lede:   clamp(17px, 1.3vw, 21px);
  --bra-fs-h3:     clamp(20px, 1.6vw, 26px);
  --bra-fs-h2:     clamp(30px, 3.2vw, 52px);
  --bra-fs-h1:     clamp(44px, 5.5vw, 80px);
  --bra-fs-mega:   clamp(60px, 9vw, 128px);

  /* Space */
  --bra-s-1: 8px;
  --bra-s-2: 14px;
  --bra-s-3: 26px;
  --bra-s-4: 44px;
  --bra-s-5: 72px;
  --bra-s-6: 116px;
  --bra-s-7: 176px;

  /* Container */
  --bra-pad-x: clamp(24px, 5vw, 80px);
  --bra-max:   1600px;

  /* Motion */
  --bra-ease:        cubic-bezier(0.16, 1, 0.30, 1);
  --bra-ease-quart:  cubic-bezier(0.25, 1, 0.50, 1);
  --bra-dur-base:    520ms;
  --bra-dur-slow:    1100ms;

  /* Z layers */
  --bra-z-sticky: 10;
  --bra-z-modal:  100;
}

/* ---------- Reset (scoped) ---------- */
.bra,
.bra *,
.bra *::before,
.bra *::after { box-sizing: border-box; }
.bra * { margin: 0; padding: 0; }

.bra {
  background: var(--bra-paper);
  color: var(--bra-ink);
  font-family: var(--bra-font);
  font-weight: 400;
  font-size: var(--bra-fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.bra img, .bra svg { display: block; max-width: 100%; }
.bra a { color: inherit; text-decoration: none; }
.bra h1, .bra h2, .bra h3, .bra h4 { font-family: var(--bra-font); font-weight: 500; letter-spacing: -0.015em; }

/* ---------- Container ---------- */
.bra-container {
  padding-left: var(--bra-pad-x);
  padding-right: var(--bra-pad-x);
  max-width: var(--bra-max);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Surfaces ---------- */
.bra-surface-oak  { background: var(--bra-oak);   color: var(--bra-on-oak); }
.bra-surface-oak h1, .bra-surface-oak h2, .bra-surface-oak h3 { color: var(--bra-on-oak); }
.bra-surface-stone { background: var(--bra-stone); }
.bra-surface-ink   { background: var(--bra-ink);  color: var(--bra-on-oak); }

/* ---------- Typography ---------- */
.bra-mega {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: var(--bra-fs-mega);
  line-height: 0.98;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.bra-h1 {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: var(--bra-fs-h1);
  line-height: 1.04;
  letter-spacing: -0.020em;
  text-wrap: balance;
}
.bra-h2 {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: var(--bra-fs-h2);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.bra-h3 {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: var(--bra-fs-h3);
  line-height: 1.20;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.bra-lede {
  font-weight: 400;
  font-size: var(--bra-fs-lede);
  line-height: 1.40;
  max-width: 38ch;
  text-wrap: pretty;
}
.bra-body {
  font-size: var(--bra-fs-body);
  line-height: 1.55;
  max-width: 65ch;
  text-wrap: pretty;
}
.bra-caption {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: var(--bra-fs-small);
  letter-spacing: 0.04em;
  color: var(--bra-ink-2);
}
.bra-micro {
  font-weight: 500;
  font-size: var(--bra-fs-micro);
  letter-spacing: 0.06em;
  color: var(--bra-ink-mute);
}
.bra-thin {
  font-family: var(--bra-font);
  font-weight: 100;
  letter-spacing: -0.030em;
  line-height: 0.95;
}

/* On-oak typography overrides */
.bra-surface-oak .bra-caption,
.bra-surface-ink .bra-caption { color: color-mix(in oklch, var(--bra-on-oak) 65%, transparent); }
.bra-surface-oak .bra-micro,
.bra-surface-ink .bra-micro   { color: color-mix(in oklch, var(--bra-on-oak) 60%, transparent); }
.bra-surface-oak .bra-lede,
.bra-surface-ink .bra-lede    { color: color-mix(in oklch, var(--bra-on-oak) 85%, transparent); }

/* ---------- CTA (line-button) ---------- */
.bra-cta {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: var(--bra-fs-body);
  letter-spacing: -0.005em;
  padding-bottom: 5px;
  cursor: pointer;
}
/* Underline draws in from the left on hover (no arrow) */
.bra-cta::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bra-dur-base) var(--bra-ease);
}
.bra-cta:hover::after { transform: scaleX(1); }

/* ---------- Spec sheet (heavy weights, no hairlines) ---------- */
.bra-spec {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
}
/* Compact 2-up variant (e.g. a short fact list) — a plain inline
   grid-template-columns would beat the mobile media query below (inline
   specificity always wins), permanently stranding it in 2 columns on
   phones. This class-based version lets the media query win as intended. */
.bra-spec--tight { grid-template-columns: 1fr 1fr; gap: 0 var(--bra-s-2); }
.bra-spec-row { display: contents; }
.bra-spec-key,
.bra-spec-val {
  padding: var(--bra-s-3) 0;
  border-bottom: 2px solid var(--bra-ink);
}
.bra-spec-key {
  font-weight: 700;
  font-size: var(--bra-fs-body);
}
.bra-spec-val {
  font-family: var(--bra-font);
  font-weight: 300;
  font-size: var(--bra-fs-h3);
  letter-spacing: -0.012em;
  text-align: right;
  line-height: 1.1;
}
.bra-spec-row:last-child .bra-spec-key,
.bra-spec-row:last-child .bra-spec-val { border-bottom-width: 4px; }

/* On dark tiles (gallery-data--ink/--oak, surface-oak) the default ink
   border is invisible — use a light hairline instead */
.bra-gallery-data--ink .bra-spec-key,
.bra-gallery-data--ink .bra-spec-val,
.bra-gallery-data--oak .bra-spec-key,
.bra-gallery-data--oak .bra-spec-val,
.bra-surface-oak .bra-spec-key,
.bra-surface-oak .bra-spec-val { border-bottom-color: rgba(244,242,237,0.25); }

/* ---------- Material scene (CSS-art panel) ---------- */
.bra-material {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 25% 18%, oklch(0.60 0.05 55) 0%, transparent 60%),
    linear-gradient(138deg,
      oklch(0.42 0.035 55) 0%,
      oklch(0.30 0.030 52) 45%,
      oklch(0.18 0.025 48) 100%);
}
/* Wood-fibre grain */
.bra-material::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(89deg,
      transparent 0,
      transparent 11px,
      rgba(0,0,0,0.08) 11px,
      rgba(0,0,0,0.08) 12px);
  mix-blend-mode: overlay;
  opacity: 0.55;
}
/* Deep corner shadow */
.bra-material::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 70% at 88% 95%,
    oklch(0.08 0.02 45) 0%, transparent 60%);
  opacity: 0.85;
}

/* Architectural light scene for hero — top-lit vault */
.bra-vault {
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%,
      oklch(0.42 0.05 55) 0%, transparent 70%),
    linear-gradient(180deg,
      var(--bra-oak) 0%,
      var(--bra-oak-deep) 100%);
}

/* ---------- Hero ---------- */
.bra-hero {
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: var(--bra-s-4);
  padding-bottom: var(--bra-s-4);
  color: var(--bra-on-oak);
}
.bra-hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.bra-hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

/* ---------- Index ---------- */
.bra-index {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--bra-s-5);
}
.bra-index-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--bra-s-3) 0;
  border-bottom: 2px solid var(--bra-ink);
}
.bra-index-letter {
  font-family: var(--bra-font);
  font-weight: 100;
  font-size: 36px;
  letter-spacing: -0.020em;
  color: var(--bra-ink-2);
}

/* ---------- Layout helpers ---------- */
.bra-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bra-s-5);
  align-items: start;
}
.bra-stack > * + * { margin-top: var(--bra-s-3); }
.bra-stack-tight > * + * { margin-top: var(--bra-s-2); }
.bra-stack-wide > * + * { margin-top: var(--bra-s-4); }

.bra-section { padding-top: var(--bra-s-6); padding-bottom: var(--bra-s-6); }
.bra-section--tight { padding-top: var(--bra-s-5); padding-bottom: var(--bra-s-5); }

/* ---------- Color band ---------- */
.bra-band {
  padding: var(--bra-s-5) var(--bra-pad-x);
}
.bra-band--tall { padding-top: var(--bra-s-7); padding-bottom: var(--bra-s-7); }
.bra-band-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bra-s-3);
}

/* ---------- Motion ---------- */
@keyframes bra-rise {
  from { transform: translateY(0.5em); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes bra-track-in {
  from { letter-spacing: -0.015em; opacity: 0; }
  to   { letter-spacing: -0.045em; opacity: 1; }
}
.bra-rise   { animation: bra-rise 1.1s var(--bra-ease) both; }
.bra-rise-2 { animation-delay: 90ms; }
.bra-rise-3 { animation-delay: 180ms; }
.bra-rise-4 { animation-delay: 270ms; }
.bra-track-in { animation: bra-track-in 1.4s var(--bra-ease) both; }

@media (prefers-reduced-motion: reduce) {
  .bra-rise, .bra-rise-2, .bra-rise-3, .bra-rise-4, .bra-track-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: -0.045em;
  }
}

/* ---------- Micro-interactions (v0.3 carry-over, tuned for monograph) ---------- */

/* Custom cursor — small dot with lag, restrained for monograph */
.bra { cursor: none; }
.bra button, .bra input, .bra a { cursor: none; }
.bra-cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--bra-ink);
  border-radius: 999px;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  transition: width var(--bra-dur-base) var(--bra-ease),
              height var(--bra-dur-base) var(--bra-ease);
}
.bra-cursor.is-large { width: 56px; height: 56px; background: var(--bra-oak); }
.bra-cursor.is-on-dark { background: var(--bra-on-oak); }
.bra-cursor.is-on-dark.is-large { background: var(--bra-on-oak); mix-blend-mode: difference; }
@media (pointer: coarse), (max-width: 720px) {
  .bra { cursor: auto; }
  .bra button, .bra input, .bra a { cursor: pointer; }
  .bra-cursor { display: none; }
}

/* Magnetic primary button — drenched oak, heavy weight */
.bra-btn-mag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border: 2px solid var(--bra-oak);
  background: transparent;
  color: var(--bra-oak);
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--bra-dur-base) var(--bra-ease);
}
.bra-btn-mag::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bra-oak);
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--bra-dur-base) var(--bra-ease);
}
.bra-btn-mag:hover { color: var(--bra-on-oak); }
.bra-btn-mag:hover::before { transform: translateY(0); }
.bra-btn-mag__arrow { transition: transform var(--bra-dur-base) var(--bra-ease); }
.bra-btn-mag:hover .bra-btn-mag__arrow { transform: translateX(5px); }

/* Label roll — current text rolls up, a clone rolls in from below */
.bra-swap { position: relative; display: inline-block; overflow: hidden; line-height: 1.1; vertical-align: bottom; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.bra-swap > span { display: block; transition: transform 480ms var(--bra-ease); }
.bra-swap__b { position: absolute; left: 0; top: 0; transform: translateY(115%); }
.bra-btn-mag:hover .bra-swap__a { transform: translateY(-115%); }
.bra-btn-mag:hover .bra-swap__b { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .bra-swap > span { transition: none; }
  .bra-swap__b { display: none; }
}

/* Inverted — for use on oak / dark surfaces */
.bra-btn-mag--inv {
  border-color: var(--bra-on-oak);
  color: var(--bra-on-oak);
}
.bra-btn-mag--inv::before { background: var(--bra-on-oak); }
.bra-btn-mag--inv:hover { color: var(--bra-ink); }

/* Slide-fill button — ink rises from bottom, text inverts */
.bra-btn-fill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border: 2px solid var(--bra-ink);
  background: transparent;
  color: var(--bra-ink);
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--bra-dur-base) var(--bra-ease);
}
.bra-btn-fill::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bra-ink);
  z-index: -1;
  transform: translateY(101%);
  transition: transform var(--bra-dur-base) var(--bra-ease);
}
.bra-btn-fill:hover { color: var(--bra-paper); }
.bra-btn-fill:hover::before { transform: translateY(0); }

/* Character reveal — word-level wrap, char-level animate */
.bra-reveal-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Descender-safe clip: give g/y/j/p/q room so overflow:hidden never
     cuts them, while the negative margin keeps line spacing unchanged. */
  padding-bottom: 0.18em;
  margin-bottom: -0.18em;
  /* Hidden from first paint, not just once br.js gets around to it — without
     this, the raw un-split text renders normally for a frame (defer scripts
     run after parsing, not before first paint), then vanishes when JS builds
     the char spans, then reveals again once the observer fires: a visible
     flash-then-hide "flick" ahead of the real animation. No transition here
     on purpose — this is a hard show/hide gate, not part of the animation;
     br.js flips it the instant the char spans exist (or immediately for
     prefers-reduced-motion, which skips the char-split entirely). */
  opacity: 0;
}
.bra-reveal-line.is-in { opacity: 1; }
.bra-reveal-word {
  display: inline-block;
  white-space: nowrap;
}
.bra-reveal-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 900ms var(--bra-ease),
              opacity 900ms var(--bra-ease);
}
.bra-reveal-line.is-in .bra-reveal-char {
  transform: translateY(0);
  opacity: 1;
}

/* Number ticker — uses spec-style heavy + tabular */
.bra-ticker {
  font-family: var(--bra-font);
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
.bra-ticker__unit {
  font-family: var(--bra-font);
  font-size: 0.32em;
  font-weight: 500;
  vertical-align: super;
  letter-spacing: 0;
  margin-left: 4px;
}

/* Parallax wrapper — for material panel + image cards */
.bra-parallax-stage {
  position: relative;
  overflow: hidden;
  perspective: 800px;
}
.bra-parallax-stage__inner {
  position: absolute;
  inset: -8%;
  display: grid;
  place-items: center;
  transition: transform var(--bra-dur-base) var(--bra-ease);
  will-change: transform;
}

/* ---------- Form tabs (multi-form switcher) ---------- */
.bra-form-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--bra-s-4);
  padding-bottom: var(--bra-s-3);
  border-bottom: 2px solid var(--bra-ink);
}
.bra-form-tab {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  padding: 10px 18px;
  border: 2px solid var(--bra-ink);
  background: transparent;
  color: var(--bra-ink);
  transition: background var(--bra-dur-fast) var(--bra-ease),
              color var(--bra-dur-fast) var(--bra-ease);
}
.bra-form-tab:hover { background: rgba(28,28,26,0.06); }
.bra-form-tab.is-active { background: var(--bra-ink); color: var(--bra-on-oak); }

form[data-form] { display: none; }
form[data-form].is-active { display: flex; flex-direction: column; gap: 0; }

/* ---------- Absorption chart (SVG line chart) ---------- */
.bra-chart {
  --c-2020:  #D4A02C;
  --c-20200: #9E3B65;
  --c-4040:  #8B3A1F;
  --c-40200: #D08AA0;
  background: var(--bra-stone);
  padding: clamp(28px, 4vw, 56px);
  border: 2px solid var(--bra-ink);
}
.bra-chart__head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--bra-s-3);
  flex-wrap: wrap;
  margin-bottom: var(--bra-s-4);
}
.bra-chart__title {
  font-family: var(--bra-font);
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.10;
  letter-spacing: -0.015em;
  max-width: 18ch;
}
.bra-chart__title em { font-style: normal; font-weight: 500; }
.bra-chart__legend {
  display: flex;
  gap: var(--bra-s-3);
  flex-wrap: wrap;
  align-items: center;
}
.bra-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--bra-ink-2);
  font-variant-numeric: tabular-nums;
}
.bra-chart__legend-dot {
  width: 14px; height: 2px;
  background: var(--dot, var(--bra-ink));
  border-radius: 1px;
}
.bra-chart__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Grid, axes */
.bra-chart-grid line {
  stroke: rgba(28,28,26,0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.bra-chart-grid line.is-baseline { stroke: rgba(28,28,26,0.40); }
.bra-chart-axis-text {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--bra-ink-2);
}

/* Lines */
.bra-chart-line {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1500ms cubic-bezier(0.16, 1, 0.30, 1);
}
.bra-chart.is-in .bra-chart-line { stroke-dashoffset: 0; }
.bra-chart-line--a { stroke: var(--c-2020);  transition-delay: 0ms; }
.bra-chart-line--b { stroke: var(--c-20200); transition-delay: 120ms; }
.bra-chart-line--c { stroke: var(--c-4040);  transition-delay: 240ms; }
.bra-chart-line--d { stroke: var(--c-40200); transition-delay: 360ms; }

/* Markers */
.bra-chart-marker {
  r: 4;
  stroke-width: 2;
  fill: var(--bra-stone);
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.30, 1);
}
.bra-chart.is-in .bra-chart-marker { opacity: 1; }
.bra-chart-marker--a { stroke: var(--c-2020); }
.bra-chart-marker--b { stroke: var(--c-20200); }
.bra-chart-marker--c { stroke: var(--c-4040); }
.bra-chart-marker--d { stroke: var(--c-40200); }

/* Stagger marker fade-in along the curve */
.bra-chart.is-in .bra-chart-marker--a { transition-delay: calc(800ms + var(--i, 0) * 80ms); }
.bra-chart.is-in .bra-chart-marker--b { transition-delay: calc(920ms + var(--i, 0) * 80ms); }
.bra-chart.is-in .bra-chart-marker--c { transition-delay: calc(1040ms + var(--i, 0) * 80ms); }
.bra-chart.is-in .bra-chart-marker--d { transition-delay: calc(1160ms + var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  .bra-chart-line, .bra-chart-marker { transition: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
}

/* Hover hit-zones: invisible thick strokes that catch the cursor near each line */
.bra-chart { position: relative; }
.bra-chart-hitzone {
  fill: none;
  stroke: transparent;
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
  cursor: crosshair;
}

/* Active states while hovering */
.bra-chart-line.is-active { stroke-width: 3.5; }
.bra-chart-line.is-dim { opacity: 0.18; }
.bra-chart-marker.is-active { r: 6; fill: var(--bra-ink, #1c1c1a); }
.bra-chart-marker.is-dim { opacity: 0.18; }
.bra-chart-line, .bra-chart-marker {
  transition: opacity 200ms ease, stroke-width 200ms ease, r 160ms ease;
}

/* Vertical guide line that snaps to the nearest frequency */
.bra-chart-guide {
  stroke: var(--bra-ink, #1c1c1a);
  stroke-width: 1;
  stroke-dasharray: 2 4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.bra-chart-guide.is-visible { opacity: 0.35; }

/* Tooltip */
.bra-chart__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--bra-ink, #1c1c1a);
  color: var(--bra-stone, #f5f1ea);
  padding: 8px 12px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 160ms ease;
  z-index: 5;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.bra-chart__tooltip.is-visible { opacity: 1; }
.bra-chart__tooltip--below { transform: translate(-50%, 0); }
.bra-chart__tooltip-variant {
  display: block;
  font-weight: 500;
}
.bra-chart__tooltip-meta {
  display: block;
  opacity: 0.7;
  margin-top: 2px;
}
.bra-chart__tooltip-swatch {
  display: inline-block;
  width: 10px;
  height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 1px;
}

/* Hint above chart */
.bra-chart__hint {
  margin: 0 0 var(--bra-s-3);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(28,28,26,0.72);
}

/* Per-point value tags — persistent readout under the chart, since hover
   tooltips have no touch equivalent. Updates with the active line. */
.bra-chart__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--bra-s-3);
}
.bra-chart__value-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(28,28,26,0.14);
  border-radius: 999px;
  font-family: var(--bra-font);
  font-variant-numeric: tabular-nums;
}
.bra-chart__value-tag::before {
  content: "";
  align-self: center;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--tag-color, var(--bra-ink));
}
.bra-chart__value-freq {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
}
.bra-chart__value-alpha {
  font-size: 12px;
  font-weight: 500;
}
@media (max-width: 600px) {
  .bra-chart__value-tag { padding: 5px 9px; }
  .bra-chart__value-freq { font-size: 9px; }
  .bra-chart__value-alpha { font-size: 11px; }
}
.bra-chart__hint-action {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(28,28,26,0.48);
}

/* Polish: tooltip scale-from-trigger with custom easing */
.bra-chart__tooltip {
  transform-origin: bottom center;
  transform: translate(-50%, -100%) scale(0.95);
  transition:
    opacity 180ms var(--bra-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    transform 180ms var(--bra-ease, cubic-bezier(0.23, 1, 0.32, 1)),
    top 220ms cubic-bezier(0.32, 0.72, 0, 1),
    left 220ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bra-chart__tooltip.is-visible {
  transform: translate(-50%, -100%) scale(1);
}
.bra-chart__tooltip--below {
  transform-origin: top center;
  transform: translate(-50%, 0) scale(0.95);
}
.bra-chart__tooltip--below.is-visible {
  transform: translate(-50%, 0) scale(1);
}
/* Scrub mode — skip transitions when cursor is moving fast along a line */
.bra-chart__tooltip--scrub,
.bra-chart__tooltip--scrub.is-visible,
.bra-chart__tooltip--scrub.bra-chart__tooltip--below,
.bra-chart__tooltip--scrub.bra-chart__tooltip--below.is-visible {
  transition: none;
}

/* Polish: marker hover with subtle bounce (only the active marker pops) */
.bra-chart-marker.is-active {
  r: 6;
  fill: var(--bra-ink, #1c1c1a);
  transition:
    r 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
    fill 160ms ease-out;
}

/* Legend items as buttons */
.bra-chart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(28,28,26,0.12);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  color: inherit;
  transition:
    background 180ms var(--bra-ease),
    border-color 180ms var(--bra-ease),
    transform 120ms ease-out;
}
.bra-chart__legend-item:hover {
  background: rgba(28,28,26,0.04);
  border-color: rgba(28,28,26,0.32);
}
.bra-chart__legend-item:active {
  transform: scale(0.97);
}
.bra-chart__legend-item[aria-pressed="true"] {
  background: var(--bra-ink, #1c1c1a);
  color: var(--bra-stone, #f5f1ea);
  border-color: var(--bra-ink, #1c1c1a);
}

/* Interactive data cells — hover highlights chart, click locks */
.bra-gallery-data--interactive {
  appearance: none;
  border: 0;
  text-align: inherit;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  position: relative;
  transition: transform 160ms ease-out;
}
.bra-gallery-data--interactive:active {
  transform: scale(0.985);
}
.bra-gallery-data--interactive:focus-visible {
  outline: 2px solid var(--bra-ink, #1c1c1a);
  outline-offset: -2px;
}
.bra-gallery-data--interactive[aria-pressed="true"]::after {
  content: "Locked";
  position: absolute;
  top: 10px; right: 12px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--bra-ink, #1c1c1a);
  color: var(--bra-stone, #f5f1ea);
  opacity: 0.9;
}
/* Ink/oak variants invert the lock badge for contrast */
.bra-gallery-data--ink.bra-gallery-data--interactive[aria-pressed="true"]::after,
.bra-gallery-data--oak.bra-gallery-data--interactive[aria-pressed="true"]::after {
  background: var(--bra-stone, #f5f1ea);
  color: var(--bra-ink, #1c1c1a);
}

/* Configurator button polish */
.bra-config-opt {
  transition:
    background 180ms var(--bra-ease),
    color 180ms var(--bra-ease),
    border-color 180ms var(--bra-ease),
    transform 120ms ease-out;
}
.bra-config-opt:active {
  transform: scale(0.97);
}

/* Reduced motion: keep meaning, drop movement */
@media (prefers-reduced-motion: reduce) {
  .bra-chart__tooltip,
  .bra-chart__tooltip.is-visible,
  .bra-chart__tooltip--below,
  .bra-chart__tooltip--below.is-visible {
    transform: translate(-50%, -100%) scale(1);
    transition: opacity 120ms linear;
  }
  .bra-chart__tooltip--below,
  .bra-chart__tooltip--below.is-visible {
    transform: translate(-50%, 0) scale(1);
  }
  .bra-chart-marker.is-active { transition: none; }
  .bra-chart__legend-item,
  .bra-gallery-data--interactive,
  .bra-config-opt {
    transition: none;
  }
  .bra-chart__legend-item:active,
  .bra-gallery-data--interactive:active,
  .bra-config-opt:active {
    transform: none;
  }
}

/* ---------- Galleries (asymmetric multi-cell grid) ---------- */

/* Base grid — 12-col, rows scaled, heavy 2px rules between cells */
.bra-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 2px;
  background: var(--bra-ink); /* gap shows as 2px ink rules */
}
/* Image galleries use fixed row height so cells tessellate evenly and
   images cover cleanly (data galleries keep auto height for their text). */
.bra-gallery--img { grid-auto-rows: clamp(150px, 19vw, 260px); }
.bra-gallery-cell {
  position: relative;
  background: var(--bra-paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Image cell — full-bleed image with hover overlay */
.bra-gallery-img {
  padding: 0;
}
.bra-gallery-img__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--bra-ease);
}
.bra-gallery-img:hover .bra-gallery-img__img { transform: scale(1.05); }

.bra-gallery-img__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--bra-s-3);
  background: linear-gradient(180deg, transparent 0%, rgba(28,28,26,0.85) 70%);
  color: var(--bra-on-oak);
  transform: translateY(101%);
  transition: transform var(--bra-dur-base) var(--bra-ease);
}
.bra-gallery-img:hover .bra-gallery-img__overlay { transform: translateY(0); }
.bra-gallery-img__title {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -0.012em;
  line-height: 1.20;
}
.bra-gallery-img__meta {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244,242,237,0.7);
  margin-top: 6px;
}

/* Data cell — content tile */
.bra-gallery-data {
  padding: var(--bra-s-3);
  background: var(--bra-paper);
  color: var(--bra-ink);
}
.bra-gallery-data--ink   { background: var(--bra-ink);  color: var(--bra-on-oak); }
.bra-gallery-data--oak   { background: var(--bra-oak);  color: var(--bra-on-oak); }
.bra-gallery-data--stone { background: var(--bra-stone); }

.bra-gallery-data__label {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.65;
}
.bra-gallery-data__big {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
.bra-gallery-data__note {
  font-family: var(--bra-font);
  font-size: 13px;
  color: inherit;
  opacity: 0.75;
}

/* Optional visible image inside a data cell — bleeds to the cell's own
   edges (negative margin cancels the cell's padding). Omit the <img> (or
   leave its src empty) for a text-only cell; both sit fine in the same grid. */
.bra-gallery-data__img {
  width: calc(100% + 2 * var(--bra-s-3));
  margin: calc(var(--bra-s-3) * -1) calc(var(--bra-s-3) * -1) var(--bra-s-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.bra-gallery-data__img:not([src]), .bra-gallery-data__img[src=""] { display: none; }

/* Whole cell as a clickable card (cases, case studies, etc.) */
.bra-gallery-data--link { text-decoration: none; color: inherit; transition: opacity var(--bra-dur-base) var(--bra-ease); }
.bra-gallery-data--link:hover { opacity: 0.82; }
.bra-gallery-data__cta {
  margin-top: auto;
  padding-top: var(--bra-s-3);
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 13px;
}

/* Auto variant — divides evenly into however many cells are given, no
   per-cell grid-column bookkeeping needed. Tones cycle paper/stone/ink. */
.bra-gallery--auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
/* nth-of-type (not nth-child) — a <template> tag sits as an inert sibling
   among the rendered cells, which would otherwise throw off the count.
   :not(...) lets an explicit --ink/--oak/--stone modifier on a cell always
   win over the auto-cycle (otherwise the cycle's higher specificity silently
   overrides a deliberately-set tone, e.g. a 2-card gallery's 2nd cell). */
.bra-gallery--auto .bra-gallery-cell:nth-of-type(3n+2):not(.bra-gallery-data--ink):not(.bra-gallery-data--oak):not(.bra-gallery-data--stone) { background: var(--bra-stone); }
.bra-gallery--auto .bra-gallery-cell:nth-of-type(3n+3):not(.bra-gallery-data--ink):not(.bra-gallery-data--oak):not(.bra-gallery-data--stone) { background: var(--bra-ink); color: var(--bra-on-oak); }
@media (max-width: 900px) { .bra-gallery--auto { grid-auto-flow: row; } }

/* Ratio bar (horizontal) */
.bra-ratio-bar {
  width: 100%;
  height: 16px;
  background: rgba(28,28,26,0.10);
  position: relative;
  overflow: hidden;
}
.bra-gallery-data--ink .bra-ratio-bar,
.bra-gallery-data--oak .bra-ratio-bar { background: rgba(244,242,237,0.15); }
.bra-ratio-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--bra-oak);
  width: 0;
  transition: width 1.6s var(--bra-ease);
}
.bra-gallery-data--ink .bra-ratio-bar__fill,
.bra-gallery-data--oak .bra-ratio-bar__fill { background: var(--bra-on-oak); }
.bra-ratio-bar.is-in .bra-ratio-bar__fill { width: var(--ratio, 60%); }

/* Vertical bar set (small histogram) */
.bra-vbars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 80px;
}
.bra-vbar {
  flex: 1;
  background: var(--bra-ink);
  height: 0;
  transition: height 1.2s var(--bra-ease);
  transform-origin: bottom;
}
.bra-vbars.is-in .bra-vbar { height: var(--h, 50%); }
.bra-gallery-data--ink .bra-vbar,
.bra-gallery-data--oak .bra-vbar { background: var(--bra-on-oak); }

/* Asymmetric image-gallery cells — explicit placement so the 6 cells
   tessellate a 12-col × 4-row block with no empty (black) slots. */
.bra-cell-a { grid-column: 1 / 8;  grid-row: span 2; }  /* big top-left */
.bra-cell-b { grid-column: 8 / 13; grid-row: span 1; }
.bra-cell-c { grid-column: 8 / 13; grid-row: span 1; }
.bra-cell-d { grid-column: 1 / 6;  grid-row: span 2; }  /* tall bottom-left */
.bra-cell-e { grid-column: 6 / 13; grid-row: span 1; }
.bra-cell-f { grid-column: 6 / 13; grid-row: span 1; }
.bra-cell-g { grid-column: span 6; grid-row: span 1; }
.bra-cell-h { grid-column: span 6; grid-row: span 1; }

@media (max-width: 900px) {
  .bra-cell-a, .bra-cell-b, .bra-cell-c, .bra-cell-d,
  .bra-cell-e, .bra-cell-f, .bra-cell-g, .bra-cell-h {
    grid-column: span 12;
    grid-row: span 1;
  }
}

/* ---------- Marquee (monograph) ---------- */
.bra-marquee {
  overflow: hidden;
  border-top: 2px solid var(--bra-ink);
  border-bottom: 2px solid var(--bra-ink);
  padding: var(--bra-s-3) 0;
  --speed: 38s;
}
.bra-marquee__track {
  display: inline-flex;
  gap: var(--bra-s-4);
  white-space: nowrap;
  animation: bra-marq var(--speed) linear infinite;
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.012em;
  line-height: 1;
}
.bra-marquee__group {
  display: inline-flex;
  gap: var(--bra-s-4);
}
.bra-marquee__track .bra-marquee__item::after {
  content: "·";
  margin-left: var(--bra-s-4);
  color: var(--bra-oak);
}
.bra-marquee:hover { --speed: 10s; }
@keyframes bra-marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Scroll progress bar ---------- */
.bra-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--bra-oak);
  width: 0;
  z-index: 200;
  pointer-events: none;
  transition: width 80ms linear;
}

/* ---------- Card reveal stagger (siblings entering viewport) ---------- */
.bra-stagger > .bra-stagger-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms var(--bra-ease),
              transform 720ms var(--bra-ease);
}
.bra-stagger.is-in > .bra-stagger-item { opacity: 1; transform: none; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(2) { transition-delay: 60ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(3) { transition-delay: 120ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(4) { transition-delay: 180ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(5) { transition-delay: 240ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(6) { transition-delay: 300ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(7) { transition-delay: 360ms; }
.bra-stagger.is-in > .bra-stagger-item:nth-child(8) { transition-delay: 420ms; }

/* ---------- Page loader (CLOU-style curtain) ---------- */
body.is-loading { overflow: hidden; }

/* Set synchronously (inline script, before first paint) on repeat
   navigations within a session. Without this, the loader sits fully
   visible in the DOM until the deferred br.js runs sessionStorage's
   removal — late enough that a cross-document view-transition's "new
   page" snapshot can capture it mid-visible, reading as a second loader
   flashing in right after the curtain-wipe transition. */
html.br-loader-skip .br-loader { display: none; }

.br-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bra-ink);
  color: var(--bra-on-oak);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--bra-s-3) var(--bra-pad-x);
  transition: transform 1100ms cubic-bezier(0.86, 0, 0.07, 1);
  will-change: transform;
}
.br-loader.is-done {
  transform: translateY(-101%);
  pointer-events: none;
}

.br-loader__top,
.br-loader__bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bra-s-3);
}
.br-loader__top-l,
.br-loader__top-r,
.br-loader__bottom-l {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(244,242,237,0.65);
}

.br-loader__middle {
  display: grid;
  place-items: center;
  padding: var(--bra-s-3) 0;
}
.br-loader__counter {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(120px, 22vw, 320px);
  letter-spacing: -0.030em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.br-loader__counter::after {
  content: "%";
  font-size: 0.32em;
  vertical-align: super;
  margin-left: 0.18em;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0;
}

.br-loader__bar {
  flex: 1;
  height: 1px;
  background: rgba(244,242,237,0.18);
  position: relative;
  overflow: hidden;
  max-width: 420px;
  margin-left: var(--bra-s-3);
}
.br-loader__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bra-on-oak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.30, 1);
}
.br-loader.is-loading .br-loader__bar::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .br-loader { transition: opacity 200ms linear; }
  .br-loader.is-done { transform: none; opacity: 0; }
  .br-loader__bar::after { transition: none; transform: scaleX(1); }
}

/* ---------- Logo hero (cinematic, stroke-draw) ---------- */
.br-logo-hero {
  position: relative;
  min-height: 100vh;
  background: var(--bra-ink);
  color: var(--bra-on-oak);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-top: 80px;
  padding-bottom: var(--bra-s-4);
  overflow: hidden;
}
.br-logo-hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.30) 38%, rgba(0,0,0,0.72) 100%),
    url('https://beyond-rational.odoo.com/web/image/2915-5474c372/MDLC_Aisti_highres_026.jpg') center/cover no-repeat,
    radial-gradient(ellipse at 50% 0%, var(--bra-oak) 0%, var(--bra-oak-deep) 80%);
  z-index: 0;
  transform: scale(1.12);
  animation: br-logo-hero-pan 16s cubic-bezier(0.16, 1, 0.30, 1) forwards;
}
@keyframes br-logo-hero-pan {
  to { transform: scale(1.00); }
}
.br-logo-hero__grain {
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.br-logo-hero > .bra-container { position: relative; z-index: 2; }

.br-logo-hero__top  { display: flex; justify-content: space-between; align-items: baseline; }
.br-logo-hero__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--bra-s-3); flex-wrap: wrap; }
.br-logo-hero__top .bra-caption,
.br-logo-hero__foot .bra-micro,
.br-logo-hero__foot .bra-caption { color: rgba(244,242,237,0.62); }

.br-logo-hero__center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--bra-s-4);
  text-align: center;
  will-change: transform;
}
.br-logo {
  width: min(82vw, 940px);
  height: auto;
  display: block;
  color: var(--bra-on-oak);
  filter: drop-shadow(0 4px 24px rgba(0,0,0,0.30));
}
.br-logo path {
  fill: transparent;
  stroke: currentColor;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
  /* Pre-hide so there's no flash before JS measures and animates */
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: fill 500ms var(--bra-ease);
}
.br-logo.is-drawn path { fill: currentColor; }

.br-logo-hero__sub {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,242,237,0.62);
  opacity: 0;
  transform: translateY(8px);
  animation: br-logo-hero-sub 600ms cubic-bezier(0.16, 1, 0.30, 1) 1.0s forwards;
}
@keyframes br-logo-hero-sub {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .br-logo-hero__bg { animation: none; transform: none; }
  .br-logo path { fill: currentColor; transition: none; }
  .br-logo-hero__sub { opacity: 1; transform: none; animation: none; }
}

/* ---------- Site chrome (nav + footer) ---------- */
.bra-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 14px var(--bra-pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--bra-s-3);
  background: color-mix(in oklch, var(--bra-paper) 84%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(28,28,26,0.10);
  transition: background var(--bra-dur-base) var(--bra-ease),
              color var(--bra-dur-base) var(--bra-ease),
              border-color var(--bra-dur-base) var(--bra-ease);
}
.bra-nav.is-dark {
  background: color-mix(in oklch, var(--bra-ink) 64%, transparent);
  color: var(--bra-on-oak);
  border-bottom-color: rgba(244,242,237,0.14);
}
.bra-nav__brand {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.010em;
  white-space: nowrap;
  display: block;
}
.bra-nav__brand-logo {
  display: block;
  height: 40px;
  width: auto;
  /* Logo art is solid black — invert to white over the dark nav state
     instead of needing a second logo file. */
  filter: invert(0);
  transition: filter var(--bra-dur-base) var(--bra-ease);
}
.bra-nav.is-dark .bra-nav__brand-logo { filter: invert(1); }
.bra-nav__links {
  display: flex;
  gap: var(--bra-s-3);
  align-items: center;
}
.bra-nav__link {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  position: relative;
  padding: 6px 2px;
}
.bra-nav__link::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 2px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform var(--bra-dur-base) var(--bra-ease);
}
.bra-nav__link:hover::after,
.bra-nav__link[aria-current="page"]::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* Language toggle — sits among the nav links (desktop + mobile menu alike),
   styled as a small pill rather than a link so it reads as a control. */
.bra-nav__lang {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: opacity var(--bra-dur-base) var(--bra-ease);
}
.bra-nav__lang:hover { opacity: 0.65; }

/* Hamburger toggle — injected by br.js, hidden on desktop */
.bra-nav__toggle {
  display: none;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 2;
  color: inherit;
}
.bra-nav__toggle span {
  position: absolute;
  left: 5px; right: 5px;
  height: 2px;
  background: currentColor;
  transition: transform var(--bra-dur-base) var(--bra-ease),
              opacity var(--bra-dur-fast) var(--bra-ease);
}
.bra-nav__toggle span:nth-child(1) { top: 11px; }
.bra-nav__toggle span:nth-child(2) { bottom: 11px; }
.bra-nav.is-open .bra-nav__toggle { color: var(--bra-on-oak); }
.bra-nav.is-open .bra-nav__toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.bra-nav.is-open .bra-nav__toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 720px) {
  .bra-nav { padding: 12px var(--bra-pad-x); }
  .bra-nav__toggle { display: block; }
  .bra-nav__links {
    position: fixed;
    top: 0; right: 0;
    width: min(78vw, 320px);
    height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--bra-s-3);
    padding: var(--bra-s-5) var(--bra-pad-x);
    background: var(--bra-ink);
    color: var(--bra-on-oak);
    transform: translateX(100%);
    transition: transform var(--bra-dur-base) var(--bra-ease-quart);
    box-shadow: -40px 0 80px rgba(0,0,0,0.25);
  }
  .bra-nav.is-open .bra-nav__links { transform: translateX(0); }
  .bra-nav__link {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.015em;
    padding: 8px 0;
  }
  .bra-nav__link::after { display: none; }
  .bra-nav__lang { margin-top: var(--bra-s-2); font-size: 13px; padding: 8px 16px; }
  /* Dim the page behind the open menu — lives on <body>, not inside
     .bra-nav (see br.js), so its own is-open class drives visibility
     rather than an ancestor selector. */
  .bra-nav__scrim {
    position: fixed;
    inset: 0;
    background: rgba(28,28,26,0.40);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bra-dur-base) var(--bra-ease);
    z-index: 45;
  }
  .bra-nav__scrim.is-open { opacity: 1; pointer-events: auto; }
}
body.bra-nav-locked { overflow: hidden; }

/* Bottom footer (shared across pages) */
.bra-footer {
  background: var(--bra-paper);
  border-top: 2px solid var(--bra-ink);
  padding: var(--bra-s-5) var(--bra-pad-x) var(--bra-s-3);
}
.bra-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--bra-s-4);
  max-width: var(--bra-max);
  margin: 0 auto;
}
.bra-footer__brand-line {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.bra-footer__brand-logo {
  display: block;
  height: clamp(32px, 3.4vw, 44px);
  width: auto;
}
.bra-footer h4 {
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
  margin-bottom: var(--bra-s-2);
}
.bra-footer ul { list-style: none; }
.bra-footer li { padding: 5px 0; }
.bra-footer li a {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 15px;
}
.bra-footer__base {
  max-width: var(--bra-max);
  margin: var(--bra-s-4) auto 0;
  padding-top: var(--bra-s-3);
  border-top: 1px solid rgba(28,28,26,0.10);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bra-s-2);
}
@media (max-width: 720px) {
  .bra-footer__grid { grid-template-columns: 1fr 1fr; }
  .bra-footer__brand { grid-column: span 2; }
  /* Product has 4 links vs. Office's 1 and Contact's 2 — pairing it next
     to either left a tall gap beside the shorter column. Give it the full
     row alone so Office + Contact (similar heights) share the next row. */
  .bra-footer__grid > div:nth-child(2) { grid-column: span 2; }
}

/* Page top spacer to clear sticky nav */
.bra-nav-spacer { height: 64px; }

/* ---------- Responsive: collapse data/image grids that use inline spans ----------
   Gallery cells carry inline grid-column: span N. Reducing the grid's own track
   count clamps every span, so cells reflow regardless of their inline value. */
@media (max-width: 900px) {
  /* Transparent bg + per-cell hairline avoids the ink gap showing as a black
     block in the empty slot when a grid has an odd cell count. */
  .bra-gallery {
    grid-template-columns: 1fr 1fr !important;
    background: transparent !important;
    gap: 2px;
  }
  .bra-gallery > * {
    grid-column: auto !important;
    grid-row: auto !important;
    box-shadow: 0 0 0 1px rgba(28,28,26,0.12);
  }
  /* The desktop row height (clamp(150px,19vw,260px)) reads fine against
     the wide desktop columns it was tuned for, but at 2 narrower columns
     the same short row crops each photo down to a thin strip. Fix the
     row height instead so each cell keeps a sane, legible aspect ratio. */
  .bra-gallery--img { grid-auto-rows: 260px; }
}
@media (max-width: 600px) {
  .bra-gallery { grid-template-columns: 1fr !important; }
  .bra-gallery--img { grid-auto-rows: 320px; }
}

@media (max-width: 720px) {
  /* Off-canvas menu sits off-screen right; clip horizontal overflow it creates */
  html, body.bra { overflow-x: clip; }
  /* Tile hint references a cursor that doesn't exist on touch */
  .bra-tile-stage__hint { display: none; }
  /* Reduce section breathing room — 160px is too much on a small viewport */
  .bra-section { padding-top: var(--bra-s-5); padding-bottom: var(--bra-s-5); }
  .bra-section--tight { padding-top: var(--bra-s-4); padding-bottom: var(--bra-s-4); }
}

@media (max-width: 600px) {
  .bra-section { padding-top: var(--bra-s-4); padding-bottom: var(--bra-s-4); }
  .bra-section--tight { padding-top: var(--bra-s-3); padding-bottom: var(--bra-s-3); }
}

/* ---------- Configurator (3D tile + controls) ---------- */

/* @property registers CSS vars so they can transition smoothly */
@property --tile-w     { syntax: "<length>"; inherits: true; initial-value: 240px; }
@property --tile-h     { syntax: "<length>"; inherits: true; initial-value: 240px; }
@property --tile-d     { syntax: "<length>"; inherits: true; initial-value: 10px;  }
@property --tile-color { syntax: "<color>";  inherits: true; initial-value: #A8855E; }

.bra-configurator {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--bra-s-5);
  align-items: stretch;
}
@media (max-width: 900px) {
  .bra-configurator { grid-template-columns: 1fr; }
}

.bra-tile-stage {
  background: var(--bra-stone);
  border: 2px solid var(--bra-ink);
  height: clamp(440px, 56vh, 640px);
  display: grid;
  place-items: center;
  perspective: 1400px;
  perspective-origin: 50% 35%;
  position: relative;
  overflow: hidden;
}
/* Soft ground shadow under tile */
.bra-tile-stage::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 22% at 50% 78%,
    rgba(28,28,26,0.22) 0%, transparent 60%);
  pointer-events: none;
}
.bra-tile-stage__hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
  opacity: 0.55;
  pointer-events: none;
}

.bra-tile-3d {
  --tile-w: 240px;
  --tile-h: 240px;
  --tile-d: 10px;
  --tile-color: #E8DCC4;
  width: var(--tile-w);
  height: var(--tile-h);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(24deg);
  transition:
    --tile-w 700ms var(--bra-ease),
    --tile-h 700ms var(--bra-ease),
    --tile-d 700ms var(--bra-ease),
    --tile-color 500ms var(--bra-ease);
  will-change: transform;
}

.bra-tile-face {
  position: absolute;
  left: 50%; top: 50%;
  backface-visibility: hidden;
}
.bra-tile-face--front {
  width: var(--tile-w); height: var(--tile-h);
  background: var(--tile-color);
  transform: translate(-50%, -50%) translateZ(calc(var(--tile-d) / 2));
}
.bra-tile-face--back {
  width: var(--tile-w); height: var(--tile-h);
  background: color-mix(in srgb, var(--tile-color), black 22%);
  transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--tile-d) / 2));
}
.bra-tile-face--top {
  width: var(--tile-w); height: var(--tile-d);
  background: color-mix(in srgb, var(--tile-color), white 10%);
  transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--tile-h) / 2));
}
.bra-tile-face--bottom {
  width: var(--tile-w); height: var(--tile-d);
  background: color-mix(in srgb, var(--tile-color), black 28%);
  transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--tile-h) / 2));
}
.bra-tile-face--left {
  width: var(--tile-d); height: var(--tile-h);
  background: color-mix(in srgb, var(--tile-color), black 14%);
  transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--tile-w) / 2));
}
.bra-tile-face--right {
  width: var(--tile-d); height: var(--tile-h);
  background: color-mix(in srgb, var(--tile-color), black 14%);
  transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--tile-w) / 2));
}

/* T-grid ceiling context — a 5×5 suspended grid behind the tile, sharing
   its rotation. Centre cell is empty so the real tile sits lay-in. The
   plane is large and clipped by the stage, reading as an endless ceiling. */
.bra-tile-grid {
  position: absolute;
  left: 50%; top: 50%;
  display: none;
  grid-template-columns: repeat(5, var(--tile-w));
  grid-template-rows: repeat(5, var(--tile-h));
  gap: 5px;
  padding: 5px;
  background: #8c877c;                 /* rail metal */
  transform: translate(-50%, -50%) translateZ(calc(var(--tile-d) / 2 - 0.5px));
  backface-visibility: hidden;
  transition: --tile-w 700ms var(--bra-ease), --tile-h 700ms var(--bra-ease);
}
.bra-tile-3d.show-grid .bra-tile-grid { display: grid; }
.bra-tile-grid > i {
  display: block;
  background-color: #c8c3b8;           /* ceiling panel */
  background-image: radial-gradient(circle at 38% 28%, rgba(255,255,255,0.30), transparent 62%);
}
.bra-tile-grid > i:nth-child(13) {     /* centre of 5×5 = the live tile */
  background: transparent;
  background-image: none;
}

/* Config panel */
.bra-config-panel {
  display: flex;
  flex-direction: column;
  gap: var(--bra-s-3);
}
.bra-config-section {
  border-top: 2px solid var(--bra-ink);
  padding-top: var(--bra-s-3);
}
.bra-config-section--first {
  border-top: none;
  padding-top: 0;
}
.bra-config-section__label {
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
  margin-bottom: var(--bra-s-2);
}
.bra-config-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.bra-config-opt {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 11px 18px;
  border: 2px solid var(--bra-ink);
  background: transparent;
  color: var(--bra-ink);
  transition: background var(--bra-dur-fast) var(--bra-ease),
              color var(--bra-dur-fast) var(--bra-ease);
}
.bra-config-opt:hover { background: rgba(28,28,26,0.06); }
.bra-config-opt.is-active {
  background: var(--bra-ink);
  color: var(--bra-on-oak);
}

.bra-color-swatch {
  width: 40px; height: 40px;
  border: 2px solid var(--bra-ink);
  background: var(--swatch);
  padding: 0;
  position: relative;
  transition: transform var(--bra-dur-fast) var(--bra-ease);
}
.bra-color-swatch:hover { transform: scale(1.08); }
.bra-color-swatch.is-active::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid var(--bra-ink);
  pointer-events: none;
}

.bra-config-readout {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 13px;
  color: var(--bra-ink-2);
}

.bra-config-summary {
  margin-top: var(--bra-s-2);
  padding: var(--bra-s-3) 0;
  border-top: 4px solid var(--bra-ink);
  border-bottom: 4px solid var(--bra-ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bra-s-2);
  flex-wrap: wrap;
}
.bra-config-summary__label {
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
}
.bra-config-summary__value {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: -0.010em;
  text-align: right;
}

/* ---------- Cards (4 distinct types) ---------- */
.bra-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--bra-ink);
}
@media (max-width: 900px) { .bra-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bra-card-grid { grid-template-columns: 1fr; } }

.bra-card {
  background: var(--bra-paper);
  padding: var(--bra-s-3);
  display: flex;
  flex-direction: column;
  min-height: 460px;
}
.bra-card--ink   { background: var(--bra-ink);  color: var(--bra-on-oak); }
.bra-card--oak   { background: var(--bra-oak);  color: var(--bra-on-oak); }
.bra-card--stone { background: var(--bra-stone); }
/* When the card itself is an <a> (e.g. a blog index card), the shared
   `.bra a { color: inherit }` rule outranks the two rules above (equal
   specificity, later source order) and pulls the parent's dark ink
   colour back in instead. Target the title directly with enough
   specificity to win regardless. */
.bra-card--ink .bra-card__title,
.bra-card--oak .bra-card__title { color: var(--bra-on-oak); }

.bra-card__eyebrow {
  font-family: var(--bra-font);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bra-ink-2);
}
.bra-card--ink .bra-card__eyebrow,
.bra-card--oak .bra-card__eyebrow { color: rgba(244,242,237,0.62); }

.bra-card__title {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.bra-card__meta {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 13px;
  color: var(--bra-ink-2);
}
.bra-card--ink .bra-card__meta,
.bra-card--oak .bra-card__meta { color: rgba(244,242,237,0.75); }

.bra-card__img {
  width: calc(100% + 2 * var(--bra-s-3));
  margin: calc(var(--bra-s-3) * -1) calc(var(--bra-s-3) * -1) var(--bra-s-3);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Quote card variant */
.bra-card-quote { padding: var(--bra-s-4) var(--bra-s-3); }
.bra-card-quote__mark {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.5;
  color: rgba(244,242,237,0.40);
  margin-bottom: var(--bra-s-2);
}
.bra-card-quote__text {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.45;
  text-wrap: pretty;
}
.bra-card-quote__attr {
  margin-top: auto;
  padding-top: var(--bra-s-3);
  border-top: 1px solid rgba(244,242,237,0.18);
}

/* ---------- Video showcase (custom player, monograph chrome) ---------- */
.bra-video {
  position: relative;
  border: 2px solid var(--bra-ink);
  background: var(--bra-ink);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
}
.bra-video__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--bra-ink);
}
/* Poster sits over the video until first play */
.bra-video__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: opacity var(--bra-dur-slow) var(--bra-ease);
}
.bra-video.is-started .bra-video__poster { opacity: 0; pointer-events: none; }
/* Soft ink veil so overlay type stays legible */
.bra-video__veil {
  position: absolute; inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(28,28,26,0.28) 0%, transparent 32%, transparent 58%, rgba(28,28,26,0.72) 100%);
  transition: opacity var(--bra-dur-base) var(--bra-ease);
}
.bra-video.is-playing .bra-video__veil { opacity: 0; }

/* Top meta (eyebrow + duration) over the poster */
.bra-video__meta {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 4;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--bra-s-3);
  padding: var(--bra-s-3) var(--bra-s-3) 0;
  color: var(--bra-on-oak);
  transition: opacity var(--bra-dur-base) var(--bra-ease);
}
.bra-video__eyebrow {
  font-family: var(--bra-font);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244,242,237,0.8);
}
.bra-video.is-playing .bra-video__meta { opacity: 0; }

/* Centre play button — circular, ink, cream triangle */
.bra-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  border-radius: 999px;
  border: 0;
  background: var(--bra-on-oak);
  color: var(--bra-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--bra-dur-base) var(--bra-ease),
              background var(--bra-dur-fast) var(--bra-ease),
              opacity var(--bra-dur-base) var(--bra-ease);
}
.bra-video__play::before {
  content: "";
  width: 0; height: 0;
  margin-left: 4px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent currentColor;
}
.bra-video__play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--bra-oak-warm); color: var(--bra-on-oak); }
.bra-video.is-playing .bra-video__play { opacity: 0; pointer-events: none; }

/* Bottom control bar */
.bra-video__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex; align-items: center;
  gap: var(--bra-s-3);
  padding: var(--bra-s-3);
  color: var(--bra-on-oak);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--bra-dur-base) var(--bra-ease),
              transform var(--bra-dur-base) var(--bra-ease);
}
.bra-video.is-started:hover .bra-video__bar,
.bra-video.is-started.is-paused .bra-video__bar { opacity: 1; transform: none; }
@media (pointer: coarse) { .bra-video.is-started .bra-video__bar { opacity: 1; transform: none; } }

.bra-video__ctrl {
  flex: none;
  width: 34px; height: 34px;
  border: 0;
  background: transparent;
  color: currentColor;
  cursor: pointer;
  display: grid; place-items: center;
  font-family: var(--bra-font);
  font-size: 15px;
  line-height: 1;
  opacity: 0.85;
  transition: opacity var(--bra-dur-fast) var(--bra-ease);
}
.bra-video__ctrl:hover { opacity: 1; }

/* Scrubber — thin 2px track, cream fill (matches loader bar) */
.bra-video__track {
  flex: 1;
  position: relative;
  height: 2px;
  background: rgba(244,242,237,0.30);
  cursor: pointer;
}
.bra-video__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--bra-on-oak);
}
.bra-video__track::after {            /* enlarge hit area */
  content: ""; position: absolute; inset: -12px 0;
}
.bra-video__time {
  flex: none;
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(244,242,237,0.85);
  font-variant-numeric: tabular-nums;
  min-width: 84px;
  text-align: right;
}

/* Caption strip below the frame (optional) */
.bra-video-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bra-s-3);
  flex-wrap: wrap;
  padding-top: var(--bra-s-2);
}

@media (max-width: 600px) {
  .bra-video__time { min-width: 0; }
  .bra-video__bar { gap: var(--bra-s-2); padding: var(--bra-s-2); }
}

/* Magnetic specifier (for buttons) reduces motion gracefully */
@media (prefers-reduced-motion: reduce) {
  .bra { cursor: auto; }
  .bra button, .bra input, .bra a { cursor: auto; }
  .bra-cursor { display: none; }
  .bra-btn-mag, .bra-btn-fill, .bra-btn-mag__arrow,
  .bra-btn-fill::before, .bra-reveal-char,
  .bra-parallax-stage__inner,
  .bra-gallery-img__img, .bra-gallery-img__overlay,
  .bra-ratio-bar__fill, .bra-vbar,
  .bra-stagger > .bra-stagger-item,
  .bra-marquee__track {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .bra-gallery-img__overlay { opacity: 0.95 !important; }
  .bra-ratio-bar__fill { width: var(--ratio, 60%) !important; }
  .bra-vbar { height: var(--h, 50%) !important; }
}

/* ---------- Video embed (YouTube iframe, chip-switchable) ---------- */
.bra-video-embed {
  position: relative;
  border: 2px solid var(--bra-ink);
  background: var(--bra-ink);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.bra-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .bra-grid-2 { grid-template-columns: 1fr; gap: var(--bra-s-4); }
  .bra-index  { grid-template-columns: 1fr; column-gap: 0; }
}
@media (max-width: 600px) {
  .bra-spec { grid-template-columns: 1fr; }
  /* Key and value must share the same padding-top so their text lines up
     at the top of their shared row — otherwise the key (small text, big
     top padding) reads visually lower than its own value (big text, no
     top padding), making each key look paired with the row ABOVE it. The
     gap between one pair and the next lives entirely in padding-bottom. */
  .bra-spec-key { padding: var(--bra-s-3) 0 4px; border-bottom: none; font-weight: 500; color: var(--bra-ink-2); }
  .bra-spec-val { text-align: left; padding: 0 0 var(--bra-s-3); font-size: var(--bra-fs-h3); }
  .bra-spec-row:first-child .bra-spec-key { padding-top: 0; }
}

/* ============================================================
   Shared photo gallery (CMS-dynamic, wuud-style 3-col grid)
   Use with: <div class="brg" data-content-each="gallery">…template…</div>
   ============================================================ */
.brg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: var(--bra-s-4);
}
.brg__cell {
  position: relative; margin: 0; overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--bra-ink);
  background: var(--bra-stone);
}
.brg__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.brg__cell:hover .brg__img { transform: scale(1.04); }
.brg__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; color: #f4f2ed;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.brg__cell:hover .brg__cap { opacity: 1; transform: none; }
.brg__title { font-family: var(--bra-font); font-weight: 600; font-size: 14px; letter-spacing: 0.01em; }
.brg__meta  { font-family: var(--bra-font); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244,242,237,0.7); }
.brg:empty { display: none; }
@media (max-width: 900px) { .brg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .brg { grid-template-columns: 1fr; } }

/* Aisti gallery — hover-reveal caption kept only on the first/leftmost image */
body[data-page="product-aisti"] .brg__cell:not(:first-child):hover .brg__cap { opacity: 0; transform: translateY(8px); }
body[data-page="product-aisti"] .brg__cell:not(:first-child):hover .brg__img { transform: none; }

/* ============================================================
   Shared cinematic hero (full-bleed image) — used on every page
   ============================================================ */
.home-hero { position: relative; overflow: hidden; isolation: isolate; color: var(--bra-on-oak); }
.home-hero__bg { position: absolute; inset: 0; z-index: -2; }
.home-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.08); animation: home-hero-pan 18s var(--bra-ease) forwards;
}
@keyframes home-hero-pan { to { transform: scale(1); } }
.home-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,16,14,0.58) 0%, rgba(18,16,14,0.20) 40%, rgba(18,16,14,0.84) 100%);
}
.home-hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.home-hero__inner {
  position: relative; z-index: 1; min-height: 100vh;
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--bra-s-4);
  padding-top: 104px; padding-bottom: var(--bra-s-4);
}
.home-hero--sub .home-hero__inner { min-height: 100vh; }
/* Breathing room for the first content section directly under a hero
   (plain container sections that otherwise butt against the hero).
   Coloured-surface sections and the deck already carry their own padding. */
.home-hero + section:not([class*="bra-surface"]):not(.deck) { padding-top: var(--bra-s-6); }
.home-hero .bra-caption, .home-hero .bra-micro { color: rgba(244,242,237,0.66); }
.home-hero__back { text-decoration: none; transition: color var(--bra-dur-base) var(--bra-ease); }
.home-hero__back:hover { color: var(--bra-on-oak); }
.home-hero__center { align-self: end; }
.home-hero__title {
  font-family: var(--bra-font); font-weight: 300;
  font-size: clamp(46px, 7.4vw, 116px); line-height: 1.00;
  letter-spacing: -0.026em; max-width: 17ch; text-wrap: balance;
}
.home-hero__title em { font-style: normal; font-weight: 500; }
.home-hero__sub {
  margin-top: var(--bra-s-3); max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(244,242,237,0.84);
}
.home-hero__top, .home-hero__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--bra-s-3); flex-wrap: wrap;
}
.home-hero__foot { align-items: center; }

/* ============================================================
   Design-system additions v1.1
   tag · chips · steps · stats · logos · callout · ghost button
   · accordion · pager · lightbox
   ============================================================ */

/* ---------- Tag / badge ---------- */
.bra-tag {
  display: inline-block; font-family: var(--bra-font); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bra-ink-2); border: 1.5px solid rgba(28,28,26,0.28); padding: 5px 12px;
}
.bra-tag--solid { background: var(--bra-ink); color: var(--bra-on-oak); border-color: var(--bra-ink); }
.bra-tag--oak   { color: var(--bra-oak-warm); border-color: var(--bra-oak-warm); }
.bra-surface-oak .bra-tag, .bra-surface-ink .bra-tag { color: rgba(244,242,237,0.72); border-color: rgba(244,242,237,0.30); }

/* ---------- Filter chips ---------- */
.bra-chips { display: flex; flex-wrap: wrap; gap: var(--bra-s-2); }
.bra-chip {
  font-family: var(--bra-font); font-weight: 500; font-size: 13px; letter-spacing: -0.005em;
  padding: 8px 16px; border: 1.5px solid rgba(28,28,26,0.24); background: transparent; color: var(--bra-ink);
  cursor: pointer; border-radius: 999px;
  transition: background var(--bra-dur-base) var(--bra-ease), color var(--bra-dur-base) var(--bra-ease), border-color var(--bra-dur-base) var(--bra-ease);
}
.bra-chip:hover { border-color: var(--bra-ink); }
.bra-chip.is-active { background: var(--bra-ink); color: var(--bra-on-oak); border-color: var(--bra-ink); }

/* ---------- Steps / how it works ---------- */
.bra-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.bra-step { padding-top: var(--bra-s-3); border-top: 2px solid currentColor; }
.bra-step__num { font-family: var(--bra-font); font-weight: 500; font-size: 13px; letter-spacing: 0.10em;
  color: var(--bra-ink-2); font-variant-numeric: tabular-nums; }
.bra-step__title { font-family: var(--bra-font); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.012em; line-height: 1.1; margin-top: var(--bra-s-2); }
.bra-step__body { font-size: 16px; line-height: 1.55; color: var(--bra-ink-2); margin-top: var(--bra-s-2); max-width: 40ch; }
.bra-surface-oak .bra-step__body, .bra-surface-ink .bra-step__body { color: rgba(244,242,237,0.78); }
.bra-surface-oak .bra-step__num, .bra-surface-ink .bra-step__num { color: rgba(244,242,237,0.6); }
@media (max-width: 720px) { .bra-steps { grid-template-columns: 1fr; } }

/* ---------- Stats / metrics band ---------- */
.bra-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid currentColor; }
.bra-stats__cell { padding: var(--bra-s-3); border-right: 1px solid rgba(28,28,26,0.14); }
.bra-stats__cell:first-child { padding-left: 0; }
.bra-stats__cell:last-child { border-right: none; }
.bra-stats__num { font-family: var(--bra-font); font-weight: 300; font-size: clamp(40px, 5vw, 72px);
  line-height: 1; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.bra-stats__label { font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--bra-ink-2); margin-top: var(--bra-s-2); }
.bra-surface-oak .bra-stats__cell, .bra-surface-ink .bra-stats__cell { border-right-color: rgba(244,242,237,0.20); }
.bra-surface-oak .bra-stats__label, .bra-surface-ink .bra-stats__label { color: rgba(244,242,237,0.65); }
@media (max-width: 720px) {
  .bra-stats { grid-template-columns: 1fr; }
  .bra-stats__cell { border-right: none; border-bottom: 1px solid rgba(28,28,26,0.14); padding-left: 0; }
  .bra-stats__cell:last-child { border-bottom: none; }
}

/* ---------- Logo / partner wall ---------- */
.bra-logos { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 64px); }
.bra-logos__item { font-family: var(--bra-font); font-weight: 600; font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.01em; color: var(--bra-ink); opacity: 0.55; text-decoration: none;
  transition: opacity var(--bra-dur-base) var(--bra-ease); }
.bra-logos__item:hover { opacity: 1; }
.bra-logos__item img { height: clamp(22px, 2vw, 30px); width: auto; display: block; }
.bra-surface-oak .bra-logos__item, .bra-surface-ink .bra-logos__item { color: var(--bra-on-oak); opacity: 0.6; }
.bra-surface-oak .bra-logos__item:hover, .bra-surface-ink .bra-logos__item:hover { opacity: 1; }

/* ---------- Callout / notice ---------- */
.bra-callout { border-left: 3px solid var(--bra-oak); background: var(--bra-stone); padding: var(--bra-s-3) var(--bra-s-4); }
.bra-callout__label { display: block; font-family: var(--bra-font); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bra-oak-warm); margin-bottom: var(--bra-s-2); }
.bra-callout__body { font-size: 16px; line-height: 1.55; color: var(--bra-ink); max-width: 60ch; }
.bra-callout--oak { background: var(--bra-oak); border-left-color: var(--bra-oak-warm); }
.bra-callout--oak .bra-callout__body { color: var(--bra-on-oak); }

/* ---------- Ghost / secondary button + shared button states ---------- */
.bra-btn-ghost {
  display: inline-flex; align-items: center; gap: var(--bra-s-2);
  font-family: var(--bra-font); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 14px 28px; border: 2px solid rgba(28,28,26,0.30); background: transparent; color: var(--bra-ink); cursor: pointer;
  transition: border-color var(--bra-dur-base) var(--bra-ease), background var(--bra-dur-base) var(--bra-ease), transform 120ms var(--bra-ease);
}
.bra-btn-ghost:hover { border-color: var(--bra-ink); background: rgba(28,28,26,0.04); }
.bra-btn-ghost:active { transform: translateY(1px); }
.bra-surface-oak .bra-btn-ghost, .bra-surface-ink .bra-btn-ghost { color: var(--bra-on-oak); border-color: rgba(244,242,237,0.40); }
.bra-surface-oak .bra-btn-ghost:hover, .bra-surface-ink .bra-btn-ghost:hover { border-color: var(--bra-on-oak); background: rgba(244,242,237,0.06); }
.bra-btn-mag[disabled], .bra-btn-fill[disabled], .bra-btn-ghost[disabled],
.bra-btn-mag.is-loading, .bra-btn-fill.is-loading { opacity: 0.45; pointer-events: none; }

/* ---------- Accordion / FAQ ---------- */
.bra-accordion { border-bottom: 1px solid rgba(28,28,26,0.16); }
.bra-accordion__item { border-top: 1px solid rgba(28,28,26,0.16); }
.bra-accordion__trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--bra-s-3);
  background: none; border: none; cursor: pointer; text-align: left; padding: var(--bra-s-3) 0; color: var(--bra-ink);
  font-family: var(--bra-font); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.012em;
}
.bra-accordion__icon { position: relative; width: 16px; height: 16px; flex: none; }
.bra-accordion__icon::before, .bra-accordion__icon::after { content: ""; position: absolute; background: var(--bra-ink);
  transition: transform var(--bra-dur-base) var(--bra-ease); }
.bra-accordion__icon::before { top: 7px; left: 0; width: 16px; height: 2px; }
.bra-accordion__icon::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.bra-accordion__item.is-open .bra-accordion__icon::after { transform: scaleY(0); }
.bra-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--bra-dur-base) var(--bra-ease); }
.bra-accordion__item.is-open .bra-accordion__panel { grid-template-rows: 1fr; }
.bra-accordion__inner { overflow: hidden; }
.bra-accordion__body { padding-bottom: var(--bra-s-3); color: var(--bra-ink-2); font-size: 16px; line-height: 1.6; max-width: 68ch; }
.bra-surface-oak .bra-accordion, .bra-surface-oak .bra-accordion__item { border-color: rgba(244,242,237,0.18); }
.bra-surface-oak .bra-accordion__trigger { color: var(--bra-on-oak); }
.bra-surface-oak .bra-accordion__body { color: rgba(244,242,237,0.78); }
.bra-surface-oak .bra-accordion__icon::before, .bra-surface-oak .bra-accordion__icon::after { background: var(--bra-on-oak); }
@media (prefers-reduced-motion: reduce) { .bra-accordion__panel { transition: none; } }

/* ---------- Prev / next pager ---------- */
.bra-pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 2px solid var(--bra-ink); }
.bra-pager__link { display: flex; flex-direction: column; gap: 6px; padding: var(--bra-s-3) 0; text-decoration: none;
  color: var(--bra-ink); transition: opacity var(--bra-dur-base) var(--bra-ease); }
.bra-pager__link--next { text-align: right; align-items: flex-end; border-left: 1px solid rgba(28,28,26,0.16); padding-left: var(--bra-s-3); }
.bra-pager__link--prev { padding-right: var(--bra-s-3); }
.bra-pager__dir { font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--bra-ink-2); }
.bra-pager__title { font-family: var(--bra-font); font-weight: 500; font-size: clamp(20px, 2vw, 30px); letter-spacing: -0.016em; }
.bra-pager__link:hover .bra-pager__title { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .bra-pager { grid-template-columns: 1fr; }
  .bra-pager__link--next { border-left: none; border-top: 1px solid rgba(28,28,26,0.16); text-align: left; align-items: flex-start; padding-left: 0; }
}

/* ---------- Image lightbox ---------- */
.brg__img, .bra-gallery-img__img, [data-lightbox] img { cursor: zoom-in; }
.bra-lightbox {
  position: fixed; inset: 0; z-index: var(--bra-z-modal);
  display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vw, 88px);
  background: rgba(18,16,14,0.93); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity 320ms var(--bra-ease), visibility 320ms;
}
.bra-lightbox.is-open { opacity: 1; visibility: visible; }
.bra-lightbox__stage { position: relative; max-width: min(1100px, 100%); }
.bra-lightbox__img { max-width: 100%; max-height: 82vh; display: block; margin: 0 auto; object-fit: contain;
  transform: scale(0.98); transition: transform 320ms var(--bra-ease); }
.bra-lightbox.is-open .bra-lightbox__img { transform: scale(1); }
.bra-lightbox__cap { display: flex; justify-content: space-between; gap: var(--bra-s-3); margin-top: var(--bra-s-2);
  color: rgba(244,242,237,0.82); font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; }
.bra-lightbox__close, .bra-lightbox__nav {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(244,242,237,0.55); background: rgba(18,16,14,0.55); color: var(--bra-on-oak);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; border-radius: 999px; transition: background var(--bra-dur-base) var(--bra-ease), border-color var(--bra-dur-base) var(--bra-ease); font-size: 20px; line-height: 1;
}
.bra-lightbox__close:hover, .bra-lightbox__nav:hover { background: rgba(18,16,14,0.8); border-color: rgba(244,242,237,0.85); }
.bra-lightbox__close { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); width: 44px; height: 44px; }
.bra-lightbox__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.bra-lightbox__nav--prev { left: clamp(12px, 2vw, 28px); }
.bra-lightbox__nav--next { right: clamp(12px, 2vw, 28px); }
@media (prefers-reduced-motion: reduce) { .bra-lightbox, .bra-lightbox__img { transition: opacity 200ms linear; transform: none; } }

/* ============================================================
   Design-system additions v1.2
   downloads · form states · comparison table · testimonial
   · sub-nav · feature grid · back-to-top · cookie · newsletter
   ============================================================ */

/* ---------- Downloads / document list ---------- */
.bra-downloads { border-top: 1px solid rgba(28,28,26,0.16); }
.bra-download { display: flex; align-items: center; gap: var(--bra-s-3); padding: var(--bra-s-3) 0;
  border-bottom: 1px solid rgba(28,28,26,0.16); text-decoration: none; color: var(--bra-ink);
  transition: padding-left var(--bra-dur-base) var(--bra-ease); }
.bra-download:hover { padding-left: var(--bra-s-2); }
.bra-download__icon { flex: none; width: 22px; height: 22px; color: var(--bra-oak-warm); }
.bra-download__icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bra-download__main { flex: 1; min-width: 0; }
.bra-download__title { font-family: var(--bra-font); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); letter-spacing: -0.01em; }
.bra-download__meta { font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bra-ink-2); margin-top: 2px; }
.bra-download__dl { flex: none; color: var(--bra-ink-2); font-size: 18px; transition: transform var(--bra-dur-base) var(--bra-ease); }
.bra-download:hover .bra-download__dl { transform: translateY(3px); }
.bra-surface-oak .bra-download { color: var(--bra-on-oak); border-color: rgba(244,242,237,0.18); }
.bra-surface-oak .bra-downloads { border-color: rgba(244,242,237,0.18); }

/* ---------- Form states (pairs with .bra-field) ---------- */
.bra-field.is-error .bra-field__input,
.bra-field.is-error .bra-field__textarea,
.bra-field.is-error .bra-field__select { border-bottom-color: #a5382c; }
.bra-field__error { display: none; font-family: var(--bra-font); font-weight: 500; font-size: 12px; color: #a5382c; margin-top: 4px; }
.bra-field.is-error .bra-field__error { display: block; }
.bra-form-note { padding: var(--bra-s-3) var(--bra-s-4); border-left: 3px solid; font-family: var(--bra-font);
  font-size: 15px; line-height: 1.5; margin-bottom: var(--bra-s-3); }
.bra-form-note--success { border-left-color: #3d6b4f; background: rgba(61,107,79,0.08); color: var(--bra-ink); }
.bra-form-note--error   { border-left-color: #a5382c; background: rgba(165,56,44,0.08); color: var(--bra-ink); }

/* ---------- Comparison table ---------- */
.bra-compare-wrap { overflow-x: auto; }
.bra-compare { width: 100%; border-collapse: collapse; font-family: var(--bra-font); min-width: 480px; }
.bra-compare th, .bra-compare td { text-align: left; padding: var(--bra-s-3) var(--bra-s-3) var(--bra-s-3) 0;
  border-bottom: 1px solid rgba(28,28,26,0.16); vertical-align: top; }
.bra-compare thead th { font-weight: 600; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--bra-ink-2); border-bottom: 2px solid var(--bra-ink); }
.bra-compare thead th.bra-compare__hi { color: var(--bra-ink); }
.bra-compare th[scope="row"] { font-weight: 500; font-size: 15px; color: var(--bra-ink-2); }
.bra-compare td { font-weight: 500; font-size: clamp(15px, 1.2vw, 17px); color: var(--bra-ink); }
.bra-compare tbody tr:hover { background: rgba(28,28,26,0.03); }

/* ---------- Testimonial (attributed quote) ---------- */
.bra-testimonial { max-width: 46ch; }
.bra-testimonial__quote { font-family: var(--bra-font); font-weight: 300; font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.3; letter-spacing: -0.014em; }
.bra-testimonial__quote em { font-style: normal; font-weight: 500; }
.bra-testimonial__attr { display: flex; align-items: center; gap: var(--bra-s-2); margin-top: var(--bra-s-3); }
.bra-testimonial__avatar { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; }
.bra-testimonial__name { font-family: var(--bra-font); font-weight: 500; font-size: 15px; }
.bra-testimonial__role { font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bra-ink-2); }
.bra-surface-oak .bra-testimonial__role, .bra-surface-ink .bra-testimonial__role { color: rgba(244,242,237,0.65); }

/* ---------- Sticky anchor sub-nav ---------- */
.bra-subnav { position: sticky; top: 0; z-index: 9; display: flex; gap: var(--bra-s-3); flex-wrap: wrap;
  padding: 14px var(--bra-pad-x);
  background: color-mix(in oklch, var(--bra-paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(28,28,26,0.10); }
.bra-subnav a { font-family: var(--bra-font); font-weight: 500; font-size: 13px; letter-spacing: -0.005em;
  color: var(--bra-ink-2); text-decoration: none; transition: color var(--bra-dur-base) var(--bra-ease); }
.bra-subnav a:hover, .bra-subnav a.is-active { color: var(--bra-ink); }

/* ---------- Feature grid (icon + title + body) ---------- */
.bra-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 56px); }
.bra-feature__icon { width: 32px; height: 32px; color: var(--bra-oak-warm); margin-bottom: var(--bra-s-2); }
.bra-feature__icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bra-feature__title { font-family: var(--bra-font); font-weight: 500; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.012em; }
.bra-feature__body { font-size: 16px; line-height: 1.55; color: var(--bra-ink-2); margin-top: var(--bra-s-2); max-width: 38ch; }
.bra-surface-oak .bra-feature__body, .bra-surface-ink .bra-feature__body { color: rgba(244,242,237,0.78); }
@media (max-width: 720px) { .bra-features { grid-template-columns: 1fr; } }

/* ---------- Back-to-top ---------- */
.bra-totop { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 40;
  width: 48px; height: 48px; border-radius: 999px; border: 1.5px solid var(--bra-ink); background: var(--bra-paper);
  color: var(--bra-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity var(--bra-dur-base) var(--bra-ease), transform var(--bra-dur-base) var(--bra-ease), background var(--bra-dur-base) var(--bra-ease); }
.bra-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.bra-totop:hover { background: var(--bra-ink); color: var(--bra-on-oak); }

/* ---------- Cookie / consent banner ---------- */
.bra-cookie { position: fixed; left: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: 60; max-width: 520px; background: var(--bra-ink); color: var(--bra-on-oak);
  padding: var(--bra-s-3) var(--bra-s-4); display: flex; gap: var(--bra-s-3); align-items: center; flex-wrap: wrap;
  transform: translateY(160%); transition: transform var(--bra-dur-slow) var(--bra-ease); }
.bra-cookie.is-in { transform: none; }
.bra-cookie__text { flex: 1; min-width: 200px; font-family: var(--bra-font); font-size: 13px; line-height: 1.5; color: rgba(244,242,237,0.82); }
.bra-cookie__text a { color: var(--bra-on-oak); }
.bra-cookie__actions { display: flex; gap: var(--bra-s-2); }
.bra-cookie__btn { font-family: var(--bra-font); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 10px 16px; cursor: pointer; border: 1.5px solid rgba(244,242,237,0.4); background: none; color: var(--bra-on-oak); }
.bra-cookie__btn--accept { background: var(--bra-on-oak); color: var(--bra-ink); border-color: var(--bra-on-oak); }

/* ---------- Newsletter (inline email capture) ---------- */
.bra-newsletter { display: flex; gap: var(--bra-s-2); align-items: stretch; max-width: 440px; border-bottom: 2px solid currentColor; }
.bra-newsletter input { flex: 1; background: none; border: 0; padding: 12px 0; font-family: var(--bra-font);
  font-weight: 500; font-size: 16px; color: inherit; }
.bra-newsletter input::placeholder { color: var(--bra-ink-mute); }
.bra-newsletter input:focus { outline: none; }
.bra-newsletter button { background: none; border: 0; cursor: pointer; font-family: var(--bra-font); font-weight: 700;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; padding: 0 4px; white-space: nowrap; }

/* ---------- Form submit result (br-forms.js) ---------- */
.bra-form-result { margin-top: var(--bra-s-2); font-family: var(--bra-font); font-size: 14px; color: var(--bra-ink); }
.bra-form-result.is-error { color: #9E3B65; }

/* ============================================================
   Design-system additions v1.3 — Comparison & proof
   CO2 savings calculator · versus card · proof matrix
   ============================================================ */

/* ---------- CO2 savings calculator ---------- */
.bra-co2calc { display: grid; gap: var(--bra-s-4); }
.bra-co2calc__control { display: grid; gap: var(--bra-s-2); }
.bra-co2calc__ctrl-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bra-s-3); }
.bra-co2calc__label { font-family: var(--bra-font); font-weight: 600; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bra-ink-2); }
.bra-co2calc__area { font-family: var(--bra-font); font-weight: 300; font-size: clamp(28px, 3vw, 44px);
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* The draggable hit area is the full element box, not just the visible
   line — at height:2px (the old value) that box was a 2px-tall target,
   effectively unusable to grab with a mouse and worse on touch (WCAG
   2.5.5 wants 24px minimum). Track height stays 2px visually via the
   ::-webkit-slider-runnable-track / ::-moz-range-track pseudo-elements;
   the input itself is now a generous 32px tall, transparent, with the
   thumb re-centered on the thin track inside that taller box. */
.bra-co2calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; background: transparent;
  outline: none; cursor: pointer; display: block; }
.bra-co2calc__range::-webkit-slider-runnable-track { height: 2px; background: rgba(28,28,26,0.2); }
.bra-co2calc__range::-moz-range-track { height: 2px; background: rgba(28,28,26,0.2); }
.bra-co2calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
  border-radius: 999px; background: var(--bra-ink); cursor: pointer; border: 3px solid var(--bra-paper);
  margin-top: -9px; /* center the 20px thumb on the 2px track: (2 - 20) / 2 */ }
.bra-co2calc__range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 999px; background: var(--bra-ink);
  cursor: pointer; border: 3px solid var(--bra-paper); }

.bra-co2calc__rows { display: grid; gap: var(--bra-s-3); }
.bra-co2calc__row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 3fr minmax(90px, auto);
  gap: var(--bra-s-3); align-items: center; }
.bra-co2calc__name { font-family: var(--bra-font); font-weight: 500; font-size: 15px; letter-spacing: -0.005em; }
.bra-co2calc__row[data-ours] .bra-co2calc__name { font-weight: 600; }
.bra-co2calc__note { display: block; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--bra-ink-2); margin-top: 2px; }
.bra-co2calc__bar { position: relative; height: 14px; background: rgba(28,28,26,0.06); }
.bra-co2calc__bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(28,28,26,0.35); }
.bra-co2calc__fill { position: absolute; top: 0; bottom: 0; width: 0;
  transition: left var(--bra-dur-base) var(--bra-ease), width var(--bra-dur-base) var(--bra-ease); }
.bra-co2calc__row[data-ours] .bra-co2calc__fill { background: var(--bra-oak-warm); }
.bra-co2calc__row:not([data-ours]) .bra-co2calc__fill { background: #a5382c; }
.bra-co2calc__val { font-family: var(--bra-font); font-weight: 500; font-size: 15px; text-align: right;
  font-variant-numeric: tabular-nums; }

.bra-co2calc__result { border-top: 2px solid var(--bra-ink); padding-top: var(--bra-s-3);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bra-s-3); flex-wrap: wrap; }
.bra-co2calc__save-num { font-family: var(--bra-font); font-weight: 300; font-size: clamp(40px, 5.5vw, 76px);
  line-height: 1; letter-spacing: -0.026em; font-variant-numeric: tabular-nums; }
.bra-co2calc__save-lbl { font-family: var(--bra-font); font-weight: 500; font-size: 12px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--bra-ink-2); margin-top: var(--bra-s-2); }
.bra-co2calc__equiv { font-family: var(--bra-font); font-weight: 400; font-size: 16px; line-height: 1.5;
  color: var(--bra-ink-2); max-width: 30ch; text-align: right; }
.bra-co2calc__foot { font-family: var(--bra-font); font-weight: 500; font-size: 11px; letter-spacing: 0.04em;
  color: var(--bra-ink-mute); }
.bra-surface-oak .bra-co2calc__range::-webkit-slider-runnable-track { background: rgba(244,242,237,0.25); }
.bra-surface-oak .bra-co2calc__range::-moz-range-track { background: rgba(244,242,237,0.25); }
.bra-surface-oak .bra-co2calc__bar { background: rgba(244,242,237,0.10); }
.bra-surface-oak .bra-co2calc__result { border-top-color: rgba(244,242,237,0.3); }
.bra-surface-oak .bra-co2calc__label, .bra-surface-oak .bra-co2calc__note,
.bra-surface-oak .bra-co2calc__save-lbl, .bra-surface-oak .bra-co2calc__equiv { color: rgba(244,242,237,0.7); }
@media (max-width: 600px) {
  .bra-co2calc__row { grid-template-columns: 1fr auto; }
  .bra-co2calc__bar { grid-column: 1 / -1; order: 3; }
}

/* ---------- Versus / head-to-head ---------- */
.bra-versus { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: stretch; border: 2px solid var(--bra-ink); }
.bra-versus__side { padding: var(--bra-s-4); }
.bra-versus__side--ours { background: var(--bra-oak); color: var(--bra-on-oak); }
.bra-versus__vs { display: flex; align-items: center; justify-content: center; font-family: var(--bra-font);
  font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bra-ink-2);
  border-left: 2px solid var(--bra-ink); border-right: 2px solid var(--bra-ink); }
.bra-versus__name { font-family: var(--bra-font); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.014em; }
.bra-versus__side--ours .bra-versus__name { color: var(--bra-on-oak); }
.bra-versus__tag { display: inline-block; margin-top: var(--bra-s-2); font-family: var(--bra-font); font-weight: 600;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bra-ink-2); }
.bra-versus__side--ours .bra-versus__tag { color: var(--bra-oak-warm); }
.bra-versus__list { list-style: none; margin: var(--bra-s-3) 0 0; padding: 0; }
.bra-versus__list li { padding: 10px 0; font-family: var(--bra-font); font-weight: 500; font-size: 15px; line-height: 1.4;
  border-top: 1px solid rgba(28,28,26,0.14); }
.bra-versus__side--ours .bra-versus__list li { border-top-color: rgba(244,242,237,0.18); }
@media (max-width: 640px) {
  .bra-versus { grid-template-columns: 1fr; }
  .bra-versus__vs { border: none; border-top: 2px solid var(--bra-ink); border-bottom: 2px solid var(--bra-ink); padding: 10px; }
}

/* ---------- Proof matrix (checks vs crosses) ---------- */
.bra-matrix { width: 100%; border-collapse: collapse; font-family: var(--bra-font); min-width: 520px; }
.bra-matrix th, .bra-matrix td { padding: var(--bra-s-3) var(--bra-s-2); border-bottom: 1px solid rgba(28,28,26,0.14);
  text-align: center; }
.bra-matrix th:first-child, .bra-matrix td:first-child { text-align: left; }
.bra-matrix thead th { font-weight: 600; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--bra-ink-2); }
.bra-matrix thead th.bra-matrix__ours { color: var(--bra-ink); border-bottom: 2px solid var(--bra-oak); }
.bra-matrix th[scope="row"] { font-weight: 500; font-size: 15px; color: var(--bra-ink); text-align: left; }
.bra-matrix__ours-col { background: color-mix(in oklch, var(--bra-oak) 7%, transparent); }
.bra-matrix__yes, .bra-matrix__no { font-size: 18px; line-height: 1; }
.bra-matrix__yes { color: #3d6b4f; }
.bra-matrix__no  { color: var(--bra-ink-mute); }
.bra-matrix td small { display: block; font-size: 12px; color: var(--bra-ink-2); font-weight: 500; margin-top: 2px; }

/* ============================================================
   Icons — Phosphor Light sprite (see br.js). Use:
   <svg class="bra-ic" aria-hidden="true"><use href="#ph-play"></use></svg>
   ============================================================ */
.bra-ic { display: inline-block; width: 1em; height: 1em; fill: currentColor;
  vertical-align: -0.15em; flex: none; pointer-events: none; }
.bra-ic--lg { width: 1.4em; height: 1.4em; }
/* Sized icons inside control chrome */
.bra-video__ctrl .bra-ic { width: 20px; height: 20px; vertical-align: middle; }
.bra-lightbox__close .bra-ic, .bra-lightbox__nav .bra-ic { width: 22px; height: 22px; }
.bra-totop .bra-ic { width: 20px; height: 20px; }
.bra-download__dl .bra-ic { width: 20px; height: 20px; }
.bra-feature__icon .bra-ic { width: 100%; height: 100%; }

/* ============================================================
   Editorial pair — shared alternating image/text flow.
   Promoted from index.html's page-local styles once a second
   page (studio.html) needed the same component.
   ============================================================ */
/* Section header: hairline + eyebrow + meta tag */
.home-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--bra-s-3);
  flex-wrap: wrap;
  padding-top: var(--bra-s-2);
  border-top: 1px solid rgba(28,28,26,0.16);
  margin-bottom: var(--bra-s-5);
}
.bra-surface-oak .home-head { border-top-color: rgba(244,242,237,0.22); }
.home-head__meta {
  font-family: var(--bra-font);
  font-weight: 500; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--bra-ink-2);
  font-variant-numeric: tabular-nums;
}
.bra-surface-oak .home-head__meta { color: rgba(244,242,237,0.62); }

/* Image + text pair, vertically bonded */
.home-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 64px);
  align-items: center;
}
.home-pair--media {
  grid-template-columns: 0.92fr 1.08fr;
  align-items: stretch;
}
.home-pair--media .home-pair__media { height: clamp(440px, 58vh, 640px); }
.home-pair--media .home-pair__text { align-self: center; }
.home-pair--media > .home-pair__text:first-child { margin-left: auto; }

.home-pair__media { opacity: 0; transition: opacity 900ms var(--bra-ease); display: flex; flex-direction: column; }
.home-pair__media.is-in { opacity: 1; }
.home-pair__fig { overflow: hidden; flex: 1; min-height: 0; }
.home-pair__fig img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1500ms var(--bra-ease);
}
.home-pair__media.is-in .home-pair__fig img { transform: scale(1); }
.home-pair__fig--wide { flex: none; }
.home-pair__fig--wide img { aspect-ratio: 16 / 10; height: auto; }
.home-pair__cap {
  display: flex; justify-content: space-between; gap: var(--bra-s-3);
  margin-top: var(--bra-s-2); padding-top: var(--bra-s-2);
  border-top: 1px solid rgba(28,28,26,0.16);
}
.bra-surface-oak .home-pair__cap { border-top-color: rgba(244,242,237,0.22); }

/* Text block reveals as ONE calm unit (no flying apart) */
.home-reveal { opacity: 0; transform: translateY(14px); transition: opacity 820ms var(--bra-ease), transform 820ms var(--bra-ease); }
.home-reveal.is-in { opacity: 1; transform: none; }
.home-pair__text { max-width: 44ch; }

/* Hero subtitle follows the title's char-reveal with a short delay */
.home-hero__sub.home-reveal { transition-delay: 260ms; }

/* Stretch variant — image grows to match a tall text column */
.home-pair--stretch { align-items: stretch; }
.home-pair--stretch .home-pair__media { height: auto; }
.home-pair--stretch .home-pair__fig { flex: 1; min-height: 360px; }

@media (max-width: 820px) {
  .home-pair, .home-pair--media { grid-template-columns: 1fr; gap: var(--bra-s-4); }
  .home-pair--media .home-pair__media { height: auto; }
  .home-pair--media > .home-pair__text:first-child { margin-left: 0; }
  .home-pair__fig img { aspect-ratio: 4 / 5; }
  .home-pair__media { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .home-pair__media, .home-reveal { opacity: 1; transform: none; }
  .home-pair__fig img { transform: none; }
}

/* ---------- Columns — reusable image + text pair (4 variants) ---------- */
/* Base: media left, text vertically centered. Font-size is column-safe —
   scaled by vw but capped low enough that an unbreakable compound word
   (e.g. "Foam-formed,") can never overflow past the media column. */
.bra-columns {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.bra-columns__media, .bra-columns__text { min-width: 0; }
.bra-columns__media {
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--bra-ink);
  aspect-ratio: 4 / 3;
}
.bra-columns__media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bra-columns__eyebrow { margin-bottom: var(--bra-s-2); }
.bra-columns__title {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(28px, 3vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin-bottom: var(--bra-s-4);
}

/* 02 — media right (mirror) */
.bra-columns--reverse .bra-columns__media { order: 2; }

/* 03 — stacked: media full-width on top, text in a narrower column below a rule */
.bra-columns--stacked { grid-template-columns: 1fr; }
.bra-columns--stacked .bra-columns__media { aspect-ratio: 21 / 9; }
.bra-columns--stacked .bra-columns__text {
  max-width: 56ch;
  padding-top: var(--bra-s-4);
  border-top: 2px solid var(--bra-ink);
}

/* 04 — ruled: equal split, top-aligned, portrait media, vertical divider */
.bra-columns--ruled { grid-template-columns: 1fr 1fr; align-items: start; }
.bra-columns--ruled .bra-columns__media { aspect-ratio: 3 / 4; }
.bra-columns--ruled .bra-columns__text {
  padding-left: var(--bra-s-5);
  border-left: 2px solid var(--bra-ink);
}

@media (max-width: 820px) {
  .bra-columns, .bra-columns--reverse, .bra-columns--stacked, .bra-columns--ruled {
    grid-template-columns: 1fr; gap: var(--bra-s-4);
  }
  .bra-columns__media { order: -1; aspect-ratio: 4 / 5; }
  .bra-columns--reverse .bra-columns__media { order: -1; }
  .bra-columns--stacked .bra-columns__media { aspect-ratio: 4 / 5; }
  .bra-columns--ruled .bra-columns__text {
    padding-left: 0; border-left: none;
    padding-top: var(--bra-s-4); border-top: 2px solid var(--bra-ink);
  }
}

/* ---------- Card layouts — reusable grid, 4 variants ---------- */
/* Base: vertical, image on top, 3-up grid. Title size is column-safe
   (small vw range) so it can never overflow at any grid width. */
.bra-cardset {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bra-s-4);
}
.bra-cardset__card { display: flex; flex-direction: column; min-width: 0; }
.bra-cardset__media {
  margin: 0 0 var(--bra-s-3);
  overflow: hidden;
  border: 2px solid var(--bra-ink);
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
}
.bra-cardset__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bra-cardset__content { min-width: 0; }
.bra-cardset__eyebrow { margin-bottom: 6px; }
.bra-cardset__title {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: 6px;
}
.bra-cardset__body {
  font-family: var(--bra-font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bra-ink-2);
}

/* 02 — row: horizontal list, image left, content right */
.bra-cardset--row { grid-template-columns: 1fr; gap: var(--bra-s-3); }
.bra-cardset--row .bra-cardset__card { flex-direction: row; align-items: stretch; gap: var(--bra-s-4); }
.bra-cardset--row .bra-cardset__media { flex: 0 0 clamp(140px, 26%, 260px); margin: 0; }
.bra-cardset--row .bra-cardset__content { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* 03 — overlay: image fills the card, text sits on a scrim at the bottom */
.bra-cardset--overlay .bra-cardset__card {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  border: 2px solid var(--bra-ink);
}
.bra-cardset--overlay .bra-cardset__media { position: absolute; inset: 0; margin: 0; border: none; aspect-ratio: auto; }
.bra-cardset--overlay .bra-cardset__content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--bra-s-3);
  background: linear-gradient(to top, rgba(28,28,26,0.6), rgba(28,28,26,0));
}
.bra-cardset--overlay .bra-cardset__eyebrow { color: rgba(244,242,237,0.75); }
.bra-cardset--overlay .bra-cardset__title,
.bra-cardset--overlay .bra-cardset__body { color: var(--bra-on-oak); }

/* Aisti edge-type photos are square (690x690) — the shared 3:4 overlay
   ratio cropped their top/bottom via object-fit: cover. */
body[data-page="product-aisti"] .bra-cardset--overlay .bra-cardset__card { aspect-ratio: 1 / 1; }

/* 04 — frame: minimal, no image, bordered text-only */
.bra-cardset--frame .bra-cardset__card { border: 2px solid var(--bra-ink); padding: var(--bra-s-4); }
.bra-cardset--frame .bra-cardset__media { display: none; }

/* 4-up — a single clean row of exactly 4 (e.g. a fixed product range), rather
   than the base 3-column grid's 3+1 wrap. Only above the 2-up breakpoint. */
@media (min-width: 901px) {
  .bra-cardset.bra-cardset--4up { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
  .bra-cardset, .bra-cardset--overlay, .bra-cardset--frame { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .bra-cardset, .bra-cardset--overlay, .bra-cardset--frame { grid-template-columns: 1fr; }
  .bra-cardset--row .bra-cardset__card { flex-direction: column; }
  .bra-cardset--row .bra-cardset__media { flex: none; width: 100%; aspect-ratio: 4 / 3; }
}

/* Three-cell stat band (used on studio story + homepage) */
.studio-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.studio-stats__cell {
  padding: var(--bra-s-3);
  border-right: 1px solid rgba(244,242,237,0.20);
}
.studio-stats__cell:last-child { border-right: none; }
.studio-stats__num {
  font-family: var(--bra-font);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
}
.studio-stats__label {
  font-family: var(--bra-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(244,242,237,0.65);
  margin-top: var(--bra-s-2);
}
@media (max-width: 720px) {
  .studio-stats { grid-template-columns: 1fr; }
  .studio-stats__cell { border-right: none; border-bottom: 1px solid rgba(244,242,237,0.20); }
}

/* Asymmetric split (5fr/7fr) — CTA layouts */
.split-tight {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}
@media (max-width: 720px) { .split-tight { grid-template-columns: 1fr; } }

/* Numbered link row — case/project index list (projects.html + homepage teaser) */
.project-row {
  display: grid;
  grid-template-columns: 60px 1.5fr 1fr 100px 40px;
  align-items: baseline;
  gap: var(--bra-s-3);
  padding: var(--bra-s-3) 0;
  border-bottom: 1px solid rgba(28,28,26,0.20);
  transition: padding var(--bra-dur-base) var(--bra-ease);
  text-decoration: none; color: inherit;
}
.project-row:hover { padding-left: var(--bra-s-3); }
.project-row__num {
  font-family: var(--bra-font);
  font-weight: 500; font-size: 13px;
  color: var(--bra-ink-2);
  font-variant-numeric: tabular-nums;
}
.project-row__title {
  font-family: var(--bra-font); font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.012em;
  line-height: 1.05;
}
.project-row__meta {
  font-family: var(--bra-font);
  font-weight: 500; font-size: 14px;
  color: var(--bra-ink-2);
}
.project-row__year {
  font-family: var(--bra-font);
  font-weight: 500; font-size: 14px;
  color: var(--bra-ink-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.project-row__arrow {
  text-align: right;
  transition: transform var(--bra-dur-base) var(--bra-ease);
  font-size: 18px;
}
.project-row:hover .project-row__arrow { transform: translate(4px, -4px); }
@media (max-width: 720px) {
  .project-row { grid-template-columns: 50px 1fr 40px; }
  .project-row__meta, .project-row__year { display: none; }
}
.bra-matrix__yes .bra-ic, .bra-matrix__no .bra-ic { width: 20px; height: 20px; vertical-align: middle; }

/* ============================================================
   Product "idea" section — three-point layout on ink surface.
   Shared by all product pages' "the idea" section.
   ============================================================ */
.prod-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 72px); margin-top: var(--bra-s-5); }
.prod-point__num {
  font-family: var(--bra-font); font-weight: 100; font-size: 40px; letter-spacing: -0.02em;
  color: color-mix(in oklch, var(--bra-on-oak) 45%, transparent); padding-bottom: var(--bra-s-2);
  border-bottom: 2px solid color-mix(in oklch, var(--bra-on-oak) 25%, transparent); margin-bottom: var(--bra-s-3);
}
.prod-point__title { font-family: var(--bra-font); font-weight: 500; font-size: clamp(20px, 2vw, 26px); line-height: 1.05; color: var(--bra-on-oak); margin-bottom: var(--bra-s-2); }
.prod-point__body { font-size: 15px; line-height: 1.55; color: color-mix(in oklch, var(--bra-on-oak) 78%, transparent); max-width: 34ch; }

@media (max-width: 720px) {
  .prod-points { grid-template-columns: 1fr; gap: var(--bra-s-4); }
}