/* =========================================================================
   simplr.work — BRUTALIST SYSTEM OVERLAY
   Loaded AFTER styles.css. Re-skins the whole site with one disciplined
   token system. Borders: 2px solid. Corners: 0. Type: massive + mono.
   ========================================================================= */

/* --- TOKENS ------------------------------------------------------------- */
:root {
  /* Palette — stark binary + one accent kept for moments of warmth */
  --br-bg:        #FFFFFF;
  --br-bg-alt:    #F4F4F4;
  --br-ink:       #000000;
  --br-ink-soft:  #1A1A1A;
  --br-ink-mute:  #595959;
  --br-rule:      #000000;
  --br-accent:    #FFBF00;
  --br-invert:    #FFFFFF;
  /* neutral, theme-conditional lines — staircase connectors + blog rings */
  --stair-connector: rgba(17, 17, 17, 0.28);

  /* Border weights — brutalist relies on visible structure */
  --br-border:     2px;
  --br-border-hi:  3px;
  --br-corner:     0px;     /* never round */

  /* Spacing scale — 8px base, brutalist leans large */
  --br-s0:  4px;
  --br-s1:  8px;
  --br-s2:  16px;
  --br-s3:  24px;
  --br-s4:  32px;
  --br-s5:  48px;
  --br-s6:  64px;
  --br-s7:  96px;
  --br-s8:  128px;
  --br-s9:  192px;

  /* Type scale — display sizes are deliberately huge */
  --br-display-1: clamp(4rem, 14vw, 14rem);   /* hero H1 */
  --br-display-2: clamp(3rem, 9vw,  8rem);    /* section H2 */
  --br-display-3: clamp(2rem, 5vw,  4rem);    /* section H3 */
  --br-body-lg:   clamp(18px, 1.6vw, 22px);
  --br-body:      16px;
  --br-body-sm:   14px;
  --br-mono:      11px;

  /* Motion — M3 emphasized easing, but FAST (brutalist = snap, not drift) */
  --br-ease:      cubic-bezier(0.3, 0, 0.1, 1);
  --br-ease-out:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --br-snap:      120ms;
  --br-quick:     200ms;
}

/* Dark mode = pure inversion. No grey middle ground. */
:root[data-theme="dark"],
.theme-dark {
  --br-bg:        #000000;
  --br-bg-alt:    #0A0A0A;
  --br-ink:       #FFFFFF;
  --br-ink-soft:  #F0F0F0;
  --br-ink-mute:  #999999;
  --br-rule:      #FFFFFF;
  --br-invert:    #000000;
  --stair-connector: rgba(255, 255, 255, 0.30);
}

/* --- RESET LAYER -------------------------------------------------------- */
html, body {
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* {
  border-radius: var(--br-corner) !important;
}

/* --- TYPOGRAPHY --------------------------------------------------------- */
.br-eyebrow,
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: var(--br-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--br-ink-mute);
  font-weight: 500;
  margin: 0;
  line-height: 1.6;
}
.br-eyebrow .dot,
.eyebrow .dot {
  /* Just a small round accent dot — no filled box, centered with the text. */
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--br-accent);
  color: transparent;            /* hide the ● glyph; the shape is the dot */
  font-size: 0;
  line-height: 0;
  margin-right: 9px;
  vertical-align: middle;
  position: relative;
  top: -0.08em;                  /* optical centering with uppercase mono text */
  border-radius: 50% !important; /* override the global square-corner reset */
}

.br-display,
.hero-editorial__title--lg,
.hero-editorial__title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: var(--br-display-1);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: var(--br-ink);
  margin: 0;
}

.br-h2,
.display-lg,
.services-statement__line {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--br-display-2) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  color: var(--br-ink) !important;
  margin: 0;
}

.br-h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: var(--br-display-3);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--br-ink);
}

.br-body, .br-lede {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: var(--br-body-lg);
  line-height: 1.45;
  color: var(--br-ink-soft);
  font-weight: 400;
  max-width: 72ch;
}

.br-mono {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: var(--br-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--br-ink-mute);
}

/* --- GRID / SECTIONS ---------------------------------------------------- */
.br-section {
  border-top: var(--br-border) solid var(--br-rule);
  padding: var(--br-s7) 0;
}

.br-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--br-s5);
}

.br-container--bleed {
  max-width: none;
  padding: 0;
}

/* Visible grid: 12 columns, 2px gutters as physical rules */
.br-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  border-left: var(--br-border) solid var(--br-rule);
}
.br-grid > * {
  border-right: var(--br-border) solid var(--br-rule);
  border-bottom: var(--br-border) solid var(--br-rule);
  padding: var(--br-s4);
}

/* --- BUTTONS ------------------------------------------------------------ */
.btn,
.btn-ghost,
.br-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 36px !important;
  min-height: 64px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border: var(--br-border) solid var(--br-ink) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background var(--br-snap) var(--br-ease),
              color var(--br-snap) var(--br-ease) !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none !important;
}

.btn {
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
}
.btn:hover, .btn:focus {
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
}

.btn-ghost {
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
}
.btn-ghost:hover, .btn-ghost:focus {
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
}

/* Tertiary text link — keep as-is */
.hero-editorial__textlink {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--br-ink) !important;
  font-weight: 500 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
  padding: 0 var(--br-s2);
}
.hero-editorial__textlink:hover {
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
}

/* --- NAV ---------------------------------------------------------------- */
.site-nav, header.site-nav, .nav, nav.primary {
  background: var(--br-bg) !important;
  border-bottom: var(--br-border) solid var(--br-rule) !important;
  padding: 0 var(--br-s5) !important;
}
.site-nav a, nav a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: var(--br-ink) !important;
}

/* --- BRUTALIST HERO ----------------------------------------------------- */
.hero-editorial,
.br-hero {
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
  border-bottom: var(--br-border-hi) solid var(--br-rule) !important;
  padding: var(--br-s7) 0 var(--br-s7) !important;
  position: relative;
  overflow: hidden;
}

.hero-editorial__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--br-s5) !important;
}

.hero-editorial__top {
  /* divider removed (Bug 2) — see consolidated FIX 2 block */
  padding-bottom: var(--br-s3);
  margin-bottom: var(--br-s6);
}

.hero-editorial__eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: var(--br-mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--br-ink) !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.hero-editorial__title,
.hero-editorial__title--lg {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: var(--br-display-1) !important;
  line-height: 0.86 !important;
  letter-spacing: -0.045em !important;
  color: var(--br-ink) !important;
  text-transform: none;
}
.hero-editorial__title span {
  display: block;
}
.hero-editorial__title .hero-editorial__kicker,
.hero-editorial__title span:last-child {
  margin-top: 0.1em;
}
.hero-editorial__title em,
.hero-editorial__kicker em {
  font-family: 'Instrument Serif', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.52em !important;
  color: var(--br-ink) !important;
  letter-spacing: -0.01em;
  display: inline-block;
  margin-top: 0.06em;
}

.hero-editorial__cta-row {
  margin-top: var(--br-s6) !important;
  padding-top: var(--br-s4) !important;
  border-top: var(--br-border) solid var(--br-rule) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--br-s2) !important;
}
.hero-editorial__actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--br-s2) !important;
  align-items: center;
}
.hero-editorial__guarantee {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--br-ink) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding-top: var(--br-s1);
}

/* Hide hero video background — brutalism is solid, not atmospheric */
.hero-editorial__media,
.hero-editorial video,
.hero-bg-video,
.hero-editorial__bg {
  display: none !important;
}

/* --- SERVICES / FOUR SHAPES --------------------------------------------- */
.services-shapes {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border-top: var(--br-border) solid var(--br-rule);
  border-left: var(--br-border) solid var(--br-rule);
  margin-top: var(--br-s5) !important;
}
.services-shape {
  padding: var(--br-s4) !important;
  border-right: var(--br-border) solid var(--br-rule) !important;
  border-bottom: var(--br-border) solid var(--br-rule) !important;
  background: var(--br-bg);
  transition: background var(--br-snap) var(--br-ease);
}
/* services-shape hover handled in consolidated FIX 3 block (kept readable) */
.services-shape__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  color: var(--br-ink) !important;
  margin: 0 0 var(--br-s2) !important;
  transition: color var(--br-snap) var(--br-ease);
}
.services-shape__body {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--br-ink-soft) !important;
  margin: 0 !important;
  transition: color var(--br-snap) var(--br-ease);
}

/* --- WORK CARDS (brutalist tiles) --------------------------------------- */
.work-cat {
  margin-bottom: 0 !important;
  border-top: var(--br-border-hi) solid var(--br-rule) !important;
  padding-top: var(--br-s5) !important;
  padding-bottom: var(--br-s5) !important;
}
.work-cat-header {
  display: flex !important;
  align-items: baseline;
  gap: var(--br-s3) !important;
  margin-bottom: var(--br-s4) !important;
}
.work-cat-header .cat-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--br-ink) !important;
  letter-spacing: 0 !important;
}
.work-cat-header h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  line-height: 1.0 !important;
  letter-spacing: -0.025em !important;
  color: var(--br-ink) !important;
  margin: 0 !important;
}
.work-cat-header .cat-meta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: var(--br-mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--br-ink-mute) !important;
  margin-left: auto !important;
}

.work-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0 !important;
  border-top: var(--br-border) solid var(--br-rule);
  border-left: var(--br-border) solid var(--br-rule);
}
.work-mini-card {
  display: block !important;
  padding: var(--br-s4) !important;
  border-right: var(--br-border) solid var(--br-rule) !important;
  border-bottom: var(--br-border) solid var(--br-rule) !important;
  background: var(--br-bg);
  text-decoration: none !important;
  color: var(--br-ink) !important;
  transition: background var(--br-snap) var(--br-ease);
  position: relative;
}
/* work-mini-card hover handled in consolidated FIX 3 block (kept readable) */
.work-mini-card h4 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  color: var(--br-ink) !important;
  margin: 0 0 var(--br-s2) !important;
}
.work-mini-card p {
  font-family: 'IBM Plex Sans', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--br-ink-soft) !important;
  margin: 0 0 var(--br-s2) !important;
}
.work-mini-card .chip,
.work-mini-card .work-chip {
  display: inline-block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: var(--br-border) solid var(--br-ink) !important;
  color: var(--br-ink) !important;
  padding: 4px 8px !important;
  border-radius: 0 !important;
  margin-right: 6px !important;
  margin-bottom: 4px;
}

/* --- ABOUT PORTRAIT (brutalist) ----------------------------------------- */
.about-portrait {
  border: var(--br-border) solid var(--br-rule);
  padding: var(--br-s5) !important;
  gap: var(--br-s5) !important;
}
.about-portrait__photo img {
  border: var(--br-border) solid var(--br-rule);
  border-radius: 0 !important;
  filter: grayscale(0.85) contrast(1.1) !important;
}
.about-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  list-style: none !important;
  border-top: var(--br-border) solid var(--br-rule) !important;
  border-left: var(--br-border) solid var(--br-rule) !important;
  padding: 0 !important;
  margin: var(--br-s6) 0 !important;
}
.about-stats li {
  padding: var(--br-s4) !important;
  border-right: var(--br-border) solid var(--br-rule) !important;
  border-bottom: var(--br-border) solid var(--br-rule) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--br-s2);
}
.about-stat__value {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.03em !important;
  color: var(--br-ink) !important;
}
.about-stat__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: var(--br-mono) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--br-ink-mute) !important;
}

/* --- FOOTER ------------------------------------------------------------- */
.footer, footer, .site-footer {
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
  border-top: var(--br-border-hi) solid var(--br-rule) !important;
  padding: var(--br-s6) var(--br-s5) !important;
}
.footer h4, .site-footer h4 {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--br-bg) !important;
  font-weight: 500 !important;
  margin-bottom: var(--br-s3) !important;
}
.footer a, .site-footer a {
  color: var(--br-bg) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  border-bottom: 1px solid transparent;
  transition: border-color var(--br-snap) var(--br-ease);
}
.footer a:hover {
  border-bottom-color: var(--br-bg);
}

/* --- SECTION DIVIDERS (universal) --------------------------------------- */
.section, section.section {
  border-top: var(--br-border) solid var(--border);
  padding: var(--br-s7) 0 !important;
}
.section + .section {
  margin-top: 0;
}

/* Container override — full bleed, generous padding */
.container, .section.container {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: var(--br-s5) !important;
  padding-right: var(--br-s5) !important;
}

/* --- REVEAL ANIMATIONS — snap, not drift -------------------------------- */
/* hide reveal targets ONLY when JS is present (html.js-anim), so with JS
   disabled the content stays visible (no invisible-page fallback) */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--br-quick) var(--br-ease-out),
              transform var(--br-quick) var(--br-ease-out);
}
.reveal.in,
.reveal.shown,
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- BRUTAL MOBILE BREAKPOINTS ----------------------------------------- */
@media (max-width: 920px) {
  .br-grid { grid-template-columns: repeat(6, 1fr); }
  .services-shapes,
  .work-mini-grid {
    grid-template-columns: 1fr !important;
  }
  .about-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .about-portrait {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  :root {
    --br-s7: 64px;
    --br-s6: 48px;
    --br-s5: 24px;
  }
  .container, .section.container,
  .hero-editorial__inner {
    padding-left: var(--br-s4) !important;
    padding-right: var(--br-s4) !important;
  }
  .work-cat-header { flex-wrap: wrap; }
  .work-cat-header .cat-meta { margin-left: 0 !important; width: 100%; }
  .about-stats { grid-template-columns: 1fr !important; }
  .btn, .btn-ghost {
    width: 100%;
  }
  .hero-editorial__actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* --- KILL DECORATIVE LEFTOVERS ----------------------------------------- */
.hero-editorial__bridge,
.hero-editorial__reassure,
.hero-editorial__side,
.hero-editorial__principle,
.hero-editorial__meta-grid,
.hero-editorial__footer {
  display: none !important;
}

/* All shadows out — brutalism is flat */
* {
  box-shadow: none !important;
}

/* Selected images get crisp 2px frame */
img:not([class*="brand"]):not([class*="logo"]):not([class*="ico"]) {
  border-radius: 0 !important;
}

/* --- NAV CTA (compact brutalist) --------------------------------------- */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
  border: var(--br-border) solid var(--br-ink) !important;
  border-radius: 0 !important;
  padding: 12px 18px !important;
  text-decoration: none !important;
  transition: background var(--br-snap) var(--br-ease),
              color var(--br-snap) var(--br-ease);
  white-space: nowrap;
}
.nav-cta:hover {
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
}

/* --- LOGO / WORDMARK --------------------------------------------------- */
.brand, .site-brand, a[aria-label="simplr — home"] {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  color: var(--br-ink) !important;
  text-decoration: none !important;
}

/* --- THEME TOGGLE / CURRENCY SELECTOR (compact, square) ---------------- */
.theme-toggle, .currency-switcher button, .currency-toggle {
  border-radius: 0 !important;
  border: var(--br-border) solid var(--br-rule) !important;
  background: var(--br-bg) !important;
  color: var(--br-ink) !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  height: 40px !important;
}
.theme-toggle:hover, .currency-toggle:hover {
  background: var(--br-ink) !important;
  color: var(--br-bg) !important;
}

/* --- NAV LINKS --------------------------------------------------------- */
.nav, nav.primary {
  height: 64px !important;
  display: flex;
  align-items: center;
}
.nav ul, nav.primary ul {
  display: flex;
  gap: var(--br-s4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav ul a, nav.primary ul a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--br-ink) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 8px 0;
  position: relative;
}
.nav ul a[aria-current="page"]::after,
.nav ul a.is-active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--br-ink);
}

/* --- LIGHT-MODE VIDEO HERO BACKDROP REPLACEMENT ------------------------ */
/* Replace the missing background with a solid block — brutalism = solid */
.hero-editorial::before {
  display: none !important;
}

/* --- HERO STRUCTURAL INDEX MARK (left rail) ---------------------------- */
.hero-editorial__inner::before {
  content: "00 — HOMEPAGE / SIMPLR.WORK";
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--br-ink-mute);
  margin-bottom: var(--br-s5);
  padding-bottom: var(--br-s2);
  border-bottom: 1px dotted var(--border);
}

/* --- KILL ANY MARQUEE / VIDEO MOTION IN HERO --------------------------- */
.hero-editorial video {
  display: none !important;
}

/* --- SECTION HEADERS (consistent brutalist treatment) ------------------ */
.section-header {
  margin-bottom: var(--br-s5) !important;
  padding-bottom: var(--br-s3) !important;
  border-bottom: 1px solid var(--border);   /* unified rule token */
  display: flex !important;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--br-s4);
  flex-wrap: wrap;
}

/* =========================================================================
   PHASE 2 PATCH — M3 spacing alignment, video panel, landscape portrait
   ========================================================================= */

/* --- M3 hero spacing — CONSOLIDATED into the FIX 4 block at the end of this
   file (single source of truth). The competing values that used to live here
   fought the end-of-file patch in the cascade; they have been removed so only
   one coherent set of hero spacing rules remains. --- */

/* M3 button minimum touch target — compact buttons pair with the tightened hero */
.btn, .btn-ghost, .br-btn {
  min-height: 56px !important;
  padding: 18px 32px !important;
}

/* --- VIDEO PANEL base (label/caption typography; geometry set in FIX 6) -- */
/* .video-panel / __inner / __media geometry lives in the FIX 6 block (end of
   file). Only the label/caption typography remains here. */
.video-panel__label {
  position: absolute;
  top: var(--br-s4);
  left: var(--br-s5);
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--br-s1);
  pointer-events: none;
  mix-blend-mode: difference;
  color: #FFFFFF;
}
.video-panel__index {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 600;
}
.video-panel__caption {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.1;
  max-width: 20ch;
}

/* (mobile video-panel sizing handled in the FIX 6 media query at end of file) */

/* --- ABOUT PORTRAIT (landscape variant) -------------------------------- */
.about-portrait--landscape {
  display: block !important;
  border: var(--br-border) solid var(--br-rule);
  padding: 0 !important;
}
.about-portrait--landscape .about-portrait__photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: var(--br-border) solid var(--br-rule);
  background: var(--br-bg-alt);
  margin: 0;
}
.about-portrait--landscape .about-portrait__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;   /* keep face high in the crop */
  filter: grayscale(0.85) contrast(1.1);
  display: block;
  border: none !important;
}
.about-portrait--landscape .about-portrait__intro {
  /* No 48px inset — content sits flush-left with the photo above it (item 10) */
  padding: var(--br-s4) 0 0 0;
  text-align: left;
}

@media (max-width: 920px) {
  .about-portrait--landscape .about-portrait__photo { aspect-ratio: 4 / 3; }
  .about-portrait--landscape .about-portrait__intro { padding: var(--br-s3) 0 0 0; }
}

/* --- CURRENCY DROPDOWN ALIGNMENT --------------------------------------- */
/* Make sure the symbol column doesn't squeeze the code column */
.currency-menu {
  border: var(--br-border) solid var(--br-ink) !important;
  border-radius: 0 !important;
  background: var(--br-bg) !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top: var(--br-s1);
}
.currency-menu li {
  display: grid !important;
  grid-template-columns: 36px 56px 1fr auto !important;
  gap: var(--br-s2);
  align-items: center;
  padding: 10px var(--br-s2) !important;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  color: var(--br-ink);
  transition: background var(--br-snap) var(--br-ease);
}
.currency-menu li:last-child { border-bottom: none; }
.currency-menu li:hover,
.currency-menu li[aria-selected="true"] {
  background: var(--br-accent) !important;
  color: var(--br-ink) !important;
}
.currency-menu .currency-symbol {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--br-ink);
  text-align: left;
}
.currency-menu .currency-code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--br-ink);
  text-transform: uppercase;
}
.currency-menu .currency-name {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  color: var(--br-ink-mute);
}
.currency-menu .currency-check {
  width: 14px;
  height: 14px;
  opacity: 0;
  color: var(--br-ink);
  transition: opacity var(--br-snap) var(--br-ease);
}
.currency-menu li[aria-selected="true"] .currency-check {
  opacity: 1;
}

/* ============================================================
   FINAL OVERRIDE BLOCK — simplr.work
   These rules use !important to defeat any prior cascade conflict.
   Appended at the end of brutalist.css so they win the cascade.
   ============================================================ */

/* --- FIX 1 — currency dropdown closed by default --- */
.currency-menu {
  display: none !important;
}
.currency-switcher.open .currency-menu {
  display: block !important;
}

/* --- FIX 2 — strip all structural section/grid borders --- */
.hero-editorial, .hero-editorial__top, .video-panel, section, .section,
.services-shapes, .services-shape,
.work-cat, .work-mini-grid, .work-mini-card,
.work__intro, .process__intro, .testimonials__intro,
.section-header, .about-portrait, .about-portrait--landscape,
.about-portrait__photo, .about-portrait__intro,
.about-stats, .about-stats li, .work-cat-header {
  border: none !important;
}
/* Nav and footer keep a single hairline separator (functional, not decorative) */
.site-nav, header.site-nav, .nav, nav.primary {
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.footer, footer, .site-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

/* --- FIX 3 — hover stays readable: card bg shifts subtly, title → accent
   amber, body copy stays legible. Tokenised so light + dark both work with no
   per-theme duplication (--br-bg-alt and --br-ink-soft invert with the theme).
   The work-card rules need #work specificity to outrank styles.css
   `#work .work-mini-card`, otherwise the base bg wins on hover. --- */
.services-shape:hover { background: var(--br-bg-alt) !important; }
.services-shape:hover .services-shape__title { color: var(--br-accent) !important; }
.services-shape:hover .services-shape__body { color: var(--br-ink-soft) !important; }
#work .work-mini-card:hover { background: var(--br-bg-alt) !important; }
#work .work-mini-card:hover h4 { color: var(--br-accent) !important; }
#work .work-mini-card:hover p { color: var(--br-ink-soft) !important; }

/* --- FIX 4 — hero compressed so CTAs are above the fold (<600px tall) --- */
/* Root cause of the prior failed patches: styles.css forces
   `.hero-editorial__inner { min-height:100svh }` on a 3-row grid (auto 1fr auto),
   so the 1fr track stretched the eyebrow row to fill the viewport (hero ~948px).
   Neutralising the inner min-height + tightening the grid gap is what actually
   lands the fix. The hero is also de-bleeded (no 100vw) so its inner shares the
   exact 1440 grid origin as the video panel + work grid. */
.hero-editorial {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  min-height: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  left: auto !important;
}
.hero-editorial__inner {
  padding: 0 24px !important;
  min-height: 0 !important;
  gap: 16px !important;
}
.hero-editorial__inner::before {
  margin-bottom: 12px !important;
  padding-bottom: 4px !important;
}
.hero-editorial__top {
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}
/* Item 1 — match the section-title type system (.display-lg): same family,
   weight 700, letter-spacing and line-height. Sized as the largest title so
   the hero reads as primary, not smaller than the section headings. */
.hero-editorial__title,
.hero-editorial__title--lg {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: clamp(3rem, 9vw, 8rem) !important;  /* same scale as .display-lg section titles */
  line-height: 0.95 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}
.hero-editorial__title em,
.hero-editorial__kicker em {
  font-size: 0.5em !important;
}
.hero-editorial__cta-row {
  margin-top: 20px !important;
  padding-top: 0 !important;
  border: none !important;
}
.hero-editorial__guarantee {
  display: none !important;
}
@media (max-width: 920px) {
  .hero-editorial {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .hero-editorial__title,
  .hero-editorial__title--lg {
    font-size: clamp(1.75rem, 9vw, 3.5rem) !important;
  }
}

/* --- FIX 5 — Selected Work aligned to hero grid (centred, 1440 max) --- */
#work {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}
.work__intro {
  max-width: 1440px !important;
  margin: 0 auto 64px !important;
  padding: 0 !important;
}
/* #work specificity required: styles.css sets `#work .work-mini-grid { 1fr }`
   for the full-bleed banner layout, which outranks a plain .work-mini-grid. */
#work .work-mini-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  padding: 0 !important;
}
/* Undo styles.css 100vw full-bleed breakout (width:100vw + negative margins)
   and its compensating header re-indent, so the whole category sits inside the
   centred #work container. */
#work .work-cat {
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 80px !important;
}
#work .work-cat-header {
  max-width: none !important;
  margin: 0 0 32px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* styles.css (#work .work-mini-card) turns every card into a full-width 100vw
   photo banner. Override with matching #work specificity back to the same
   image-card the /work/ archive uses: photo (16:10) → chips → tag → title → copy.
   (Round-2 item 7: cards must show images + open the case-study drawer.) */
#work .work-mini-card {
  position: relative !important;
  display: block !important;
  width: auto !important;
  aspect-ratio: auto !important;
  background: var(--br-bg) !important;
  padding: var(--br-s4) !important;
  overflow: visible !important;
}
#work .work-mini-card .thumb {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  margin: 0 0 var(--br-s3) !important;
  overflow: hidden !important;
  background: var(--br-bg-alt) !important;
  z-index: auto !important;
}
#work .work-mini-card .thumb img,
#work .work-mini-card .thumb-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
#work .work-mini-card .chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--br-s2) !important;
}
#work .work-mini-card .tag { display: inline-block !important; }
#work .work-mini-card h4 {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  max-width: none !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  color: var(--br-ink) !important;
  margin: 0 0 var(--br-s2) !important;
}
#work .work-mini-card p {
  display: block !important;
  color: var(--br-ink-soft) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
#work .work-mini-card::before,
#work .work-mini-card::after { content: none !important; display: none !important; }
/* Show ALL projects (override the 2/3-per-category caps + hide the See-more row) */
#work .work-cat .work-mini-grid > .work-mini-card:nth-child(n+3),
#work .work-cat .work-mini-grid > .work-mini-card:nth-child(n+4) { display: block !important; }
#work .work-mini-cta-row, .work-mini-cta-row { display: none !important; }
@media (max-width: 920px) {
  #work {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #work .work-mini-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* --- FIX 6 — video panel aligned to hero grid (not full-bleed) --- */
.video-panel {
  background: transparent !important;
  padding: 48px 0 !important;
  border: none !important;
}
.video-panel__inner {
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.video-panel__media {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
.video-panel__label {
  position: absolute;
  top: 24px;
  left: 48px;
}
@media (max-width: 920px) {
  .video-panel__inner {
    padding: 0 16px !important;
    aspect-ratio: 4 / 3;
  }
  .video-panel__label {
    top: 16px;
    left: 32px;
  }
}

/* ============================================================
   END FINAL OVERRIDE BLOCK
   ============================================================ */

/* ============================================================
   ROUND 2 CORRECTIONS — simplr.work
   Author-confirmed change list (logo handled separately once
   assets/logo-light.png + assets/logo-dark.png are added).
   ============================================================ */

/* --- Item 5a — primary nav must never wrap or overlap.
   The desktop nav (logo + 8 links + theme + currency + big CTA) cramps and
   wraps "How it works" onto multiple lines between ~900–1300px. Keep links on
   one line, and collapse to the menu button before the row can overflow. --- */
.nav ul a, nav.primary ul a, .nav-links a {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.nav ul, .nav-links {
  flex-wrap: nowrap !important;
  gap: var(--br-s3) !important;     /* 24px — was 40px, tightens the row */
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 1200px) {
  .nav-links { display: none !important; }
  .nav-cta   { display: none !important; }
  .mobile-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* --- Item 5b — nav link hover must stay legible in BOTH themes.
   A stray `.nav-links a:hover { color:#fff }` made the link vanish (white on
   the white nav) in light mode. Force the brand amber on hover/active — it
   reads on both the white and black nav backgrounds. --- */
.nav ul a:hover, .nav-links a:hover {
  color: var(--br-accent) !important;
}

/* ============================================================
   PHASE 1 (spec doc) — simplr.work
   Tasks: 1 eyebrows · 2 spacing · 5 sticky header · 7 logo swap
   ============================================================ */

/* --- Eyebrows: IBM Plex Mono (labels/eyebrows are mono). One treatment
   across every section (hero + section-headers). span.dot stays the accent. --- */
.br-eyebrow, .eyebrow, .hero-editorial__eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--br-ink) !important;
  line-height: 1.5 !important;
}
/* hero editorial kicker stays Instrument Serif, recoloured to brand gold (#FFBF00) */
.hero-editorial__kicker em {
  font-family: 'Instrument Serif', 'Times New Roman', serif !important;
  font-style: italic !important;
  color: var(--br-accent) !important;
}

/* --- Task 2 — uniform section rhythm: 96/48 top-bottom, 48 side both breakpoints,
   consistent eyebrow→title→body gaps (replaces scattered inline margins). --- */
section.section, .section {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}
.container, .section.container, #work,
.hero-editorial__inner, .video-panel__inner, .work__intro {
  padding-left: 48px !important;
  padding-right: 48px !important;
}
@media (max-width: 760px) {
  section.section, .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .container, .section.container, #work,
  .hero-editorial__inner, .video-panel__inner, .work__intro {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}
.section-header { gap: var(--br-s3) !important; }                 /* 24 */
.section-header h2, .section-header .display-lg { margin-top: 12px !important; }
.section-header > div > p:not(.eyebrow) { margin-top: 16px !important; }

/* --- Task 5 — sticky header (theme-adaptive solid bg) + back-to-top button --- */
.site-header, header.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--br-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
section[id], [id]:target { scroll-margin-top: 84px; }
/* the 140px hero offset existed to clear the OLD fixed header; the sticky header
   is now in-flow, so trim that redundant top gap on blog/case-study heroes */
.post-hero, .project-hero { padding-top: var(--br-s5) !important; }
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--br-ink);
  color: var(--br-bg);
  border: var(--br-border) solid var(--br-ink);
  cursor: pointer;
  z-index: 900;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--br-quick) var(--br-ease),
              transform var(--br-quick) var(--br-ease);
}
.back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover { background: var(--br-bg); color: var(--br-ink); }
.back-to-top svg { width: 20px; height: 20px; display: block; }
.back-to-top .bt-dot {
  position: absolute; top: 6px; right: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--br-accent);
}

/* --- Task 7 — logo: swap the text wordmark for the SVG, keyed to data-theme.
   Header sits on the page bg (light→black logo); footer bg is inverted
   (light theme = black footer → white logo), so the footer logic flips. --- */
.nav-logo {
  display: inline-block;
  width: 80px;
  height: 24px;
  font-size: 0 !important;
  line-height: 0 !important;
  background: url('../assets/logo-light.svg') left center / contain no-repeat;
}
:root[data-theme="dark"] .nav-logo { background-image: url('../assets/logo-dark.svg'); }
.footer-logo {
  display: inline-block;
  width: 80px;
  height: 24px;
  font-size: 0 !important;
  line-height: 0 !important;
  background: url('../assets/logo-dark.svg') left center / contain no-repeat !important;
}
:root[data-theme="dark"] .footer-logo { background-image: url('../assets/logo-light.svg') !important; }

/* ============================================================
   REBUILD — index section stack 01-09 (spec)
   Type: Barlow Condensed 800 display · IBM Plex Sans body · IBM Plex Mono labels
   Motion easing: cubic-bezier(0.2, 0, 0, 1), all reduced-motion gated
   ============================================================ */
:root { --ease-spec: cubic-bezier(0.2, 0, 0, 1); --hdr-h: 66px; }

/* --- display/headline scale (do not exceed 7rem) --- */
.display-lg, .br-h2, h1.hero-v2__title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.5rem, 8vw, 7rem) !important;
  line-height: 0.98 !important;
  color: var(--br-ink) !important;
  margin: 0;
}
body, .sec-lede, p { font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.sec-lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--br-ink-soft);
  max-width: 62ch;
  margin: 24px 0 0;
}

/* ================= 01 · HERO ================= */
.hero-v2 {
  position: relative;
  min-height: calc(100svh - var(--hdr-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 48px 0;
  background: #000;
  width: auto !important;
  margin-left: 0 !important;
  left: auto !important;
}
.hero-v2__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(var(--hero-scale, 1));
  transform-origin: center;
  will-change: transform;
}
.hero-v2__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 1; }
.hero-v2__inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1440px;
  margin: 0 auto; padding: 0 48px;
  text-align: left;
}
.hero-v2__eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff !important; margin: 0 0 20px;
}
.hero-v2__title { color: #fff !important; max-width: 18ch; }
.hero-v2__sub {
  color: rgba(255,255,255,.86) !important;
  font-size: clamp(17px, 1.6vw, 21px);
  margin: 20px 0 0; max-width: 46ch;
}
.hero-v2__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-v2__experience {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.06em; line-height: 1.6;
  color: rgba(255,255,255,.72); margin: 24px 0 0; max-width: 52ch;
}
.hero-v2 .btn { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.hero-v2 .btn:hover { background: transparent !important; color: #fff !important; }
.hero-v2 .btn-ghost { background: transparent !important; color: #fff !important; border-color: #fff !important; }
.hero-v2 .btn-ghost:hover { background: #fff !important; color: #000 !important; }

/* ================= 02 · PROBLEM ================= */
.problem-rows { margin-top: 56px; border-top: 1px solid var(--border); }
.problem-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.problem-row__l { font-weight: 700; color: var(--br-ink); font-size: clamp(17px,1.5vw,20px); }
.problem-row__r { color: var(--br-ink-mute); font-size: clamp(17px,1.5vw,20px); }
.problem-turn {
  margin-top: 40px; font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.02em; color: var(--br-ink);
}

/* ================= 03 · OFFER ================= */
.offer-card { margin-top: 48px; padding: 40px; background: var(--br-bg-alt); max-width: 900px; }
.offer-card__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--br-ink-mute); margin: 0 0 12px;
}
.offer-card__title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  letter-spacing: -0.02em; font-size: clamp(28px, 3.4vw, 44px);
  margin: 0 0 16px; color: var(--br-ink);
}
.offer-card__copy { color: var(--br-ink-soft); font-size: 17px; line-height: 1.6; margin: 0; max-width: 62ch; }

/* ================= 04 · PROMISE ================= */
.promise-eyebrow { margin-bottom: 40px !important; }
.promise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.promise-block__title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  letter-spacing: -0.02em; font-size: clamp(24px, 2.6vw, 34px);
  color: var(--br-accent) !important; margin: 0 0 16px;
}
.promise-block__copy { color: var(--br-ink-soft); font-size: 17px; line-height: 1.6; margin: 0; }
@media (max-width: 860px) { .promise-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ================= 05 · PROCESS ================= */
.process-v2 { position: relative; margin-top: 56px; padding-left: 40px; }
.process-v2__rule {
  position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--border);
}
.process-v2__fill {
  display: block; width: 100%; height: 0%;
  background: var(--br-accent); transition: height 120ms linear;
}
.process-v2__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.process-v2__item { display: grid; grid-template-columns: 92px 1fr; gap: 24px; align-items: start; }
.process-v2__idx {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1;
  letter-spacing: -0.02em; color: var(--br-accent);
}
.process-v2__title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(19px, 2vw, 26px); margin: 0 0 8px; color: var(--br-ink);
}
.process-v2__copy { color: var(--br-ink-soft); font-size: 16px; line-height: 1.6; margin: 0; max-width: 60ch; }
.process-v2__closer { margin-top: 48px; font-weight: 600; color: var(--br-ink); font-size: clamp(17px,1.6vw,20px); }
@media (max-width: 640px) {
  .process-v2 { padding-left: 28px; }
  .process-v2__item { grid-template-columns: 60px 1fr; gap: 16px; }
}

/* ================= 06 · SELECTED WORK ================= */
.work-grid {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1440px;
}
.wk-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 260px; padding: 28px; text-align: left; cursor: pointer;
  background: var(--br-bg); color: var(--br-ink);
  border: 1px solid var(--border) !important;
  transition: background 150ms var(--ease-spec), color 150ms var(--ease-spec);
  font: inherit; text-decoration: none;
}
.wk-card__name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.15;
}
.wk-card__more {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: .7;
}
.wk-card__year {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--br-ink-mute); white-space: nowrap;
}
.wk-card:hover, .wk-card:focus-visible { background: var(--br-ink); color: var(--br-bg); }
/* archive/static cards are not links: no pointer, no invert-on-hover */
.wk-card--static { cursor: default; }
.wk-card--static:hover, .wk-card--static:focus-visible { background: var(--br-bg); color: var(--br-ink); }
.work-all { margin-top: 32px; }
.work-all__link {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--br-ink); text-decoration: underline; text-underline-offset: 5px;
}
@media (max-width: 900px) { .work-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---- filtered work: intro, filter chips, groups, empty states ---- */
.work-intro {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.5; color: var(--br-ink-mute);
  margin: 16px 0 0; max-width: 60ch;
}
.work-group { margin-top: 40px; }
.work-group__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--br-ink-mute); margin: 0 0 20px;
}
/* attribution note for the archive bands — mono label token, muted, matches label spacing */
.work-band__note {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--br-ink-mute); margin: 0 0 24px; max-width: 68ch; line-height: 1.5;
}
/* hidden-state utility — beats the flex/grid display on cards + groups */
.wk-card[hidden], .work-group[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- work side-drawer ---- */
.wd-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  opacity: 0; pointer-events: none; z-index: 1200;
  transition: opacity 220ms var(--ease-spec);
}
.wd-backdrop.is-open { opacity: 1; pointer-events: auto; }
.wd-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw); background: var(--br-bg); color: var(--br-ink);
  z-index: 1300; transform: translateX(100%);
  transition: transform 260ms var(--ease-spec);
  overflow-y: auto; padding: 32px; border-left: 1px solid var(--border);
}
.wd-drawer.is-open { transform: translateX(0); }
.wd-drawer__close {
  position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border); color: var(--br-ink); cursor: pointer;
}
.wd-drawer__title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(24px, 3vw, 34px); margin: 8px 56px 28px 0; line-height: 1.1;
}
.wd-field { padding: 18px 0; border-top: 1px solid var(--border); }
.wd-field__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--br-ink-mute); margin: 0 0 8px;
}
.wd-field__value { font-size: 16px; line-height: 1.6; color: var(--br-ink-soft); margin: 0; }
.wd-field__value a { color: var(--br-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ================= 07 · HOW WE WORK ================= */
.hww-lede {
  margin: 20px 0 0; max-width: 68ch; color: var(--br-ink-soft);
  font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55;
}
.hww-rows { margin-top: 40px; border-top: 1px solid var(--border); }
.hww-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.hww-row__label {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--br-ink);
}
.hww-row__text { margin: 0; color: var(--br-ink-soft); font-size: clamp(16px,1.5vw,19px); line-height: 1.55; }
@media (max-width: 720px) { .hww-row { grid-template-columns: 1fr; gap: 10px; } }

/* ================= 08 · CREDENTIALS ================= */
.cred-rows { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--border); }
.cred-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--border);
}
.cred-row__idx {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.16em; color: var(--br-ink-mute);
}
.cred-row__text { font-weight: 700; color: var(--br-ink); font-size: clamp(17px,1.6vw,21px); }

/* ================= MOTION ================= */
[data-word-stagger] .w {
  display: inline-block;
  opacity: 0; transform: translateY(24px);
  transition: opacity 520ms var(--ease-spec), transform 520ms var(--ease-spec);
}
[data-word-stagger].is-in .w { opacity: 1; transform: none; }
[data-process-item] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 480ms var(--ease-spec), transform 480ms var(--ease-spec);
}
[data-process-item].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-v2__video { transform: none !important; }
  [data-word-stagger] .w,
  [data-process-item] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .process-v2__fill { transition: none !important; }
  .wk-card, .wd-drawer, .wd-backdrop { transition: none !important; }
}

/* problem rows stack on small screens (2 narrow columns are unreadable at 375px) */
@media (max-width: 640px) {
  .problem-row { grid-template-columns: 1fr; gap: 4px; }
  .problem-row__r { color: var(--br-ink-mute); }
}

/* mobile: 48px side padding is too tight at 375px -> 24px */
@media (max-width: 640px) {
  .container, .section.container, #work,
  .hero-v2__inner, .work__intro {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* ============================================================
   RE-SKIN — Barlow Condensed display · IBM Plex Sans body
              IBM Plex Mono labels · Instrument Serif lede
   ============================================================ */

/* --- A1 · display: every H1/H2/display selector, sentence case --- */
h1, h2,
.display-xl, .display-lg, .display-md, .br-display, .br-h2, .br-h3,
.hero-v2__title, .promise-poster__line, .promise-second__title,
.promise-block__title, .offer-card__title, .process-v2__title,
.process-v2__idx, .wk-card__name, .problem-turn, .wd-drawer__title,
.cred-row__text, .work-card__name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  line-height: 0.92 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}
h1.hero-v2__title            { font-size: clamp(3rem, 9vw, 8.5rem) !important; }
h2.display-lg, .display-lg,
.br-h2, #problem h2, #offer h2,
#process h2, #work h2, #how-we-work h2,
#credentials h2              { font-size: clamp(2.2rem, 5.5vw, 4.5rem) !important; }

/* --- A2 · body --- */
body, p, li, td, th, input, textarea, select, .sec-lede, .btn, .btn-ghost {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* --- A3 · labels/eyebrows — the only caps on the site --- */
.br-eyebrow, .eyebrow, .hero-v2__eyebrow, .offer-card__label,
.wk-card__more, .hww-row__label, .cred-row__idx, .wd-field__label,
.work-all__link, .video-panel__index, .promise-eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
}

/* --- A4 · serif lede --- */
.lede-serif {
  font-family: 'Instrument Serif', 'Times New Roman', serif !important;
  font-size: clamp(1.25rem, 1.9vw, 1.45rem);
  line-height: 1.5;
  color: var(--br-ink-soft);
  max-width: 62ch;
  text-align: left;
  margin: 0;
}
@media (min-width: 900px) {
  .lede-serif { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}

/* ================= B · HERO ================= */
.hero-v2 { place-items: end start !important; padding: 0 !important; }
.hero-v2__inner { padding: 0 64px 64px !important; }
@media (max-width: 900px) { .hero-v2__inner { padding: 0 24px 40px !important; } }
/* B1 — beat the display rule's ink colour (specificity, not order) */
.hero-v2 h1.hero-v2__title { color: #fff !important; }
.hero-v2 .hero-v2__eyebrow { color: #fff !important; }
.hero-v2 .hero-v2__sub     { color: rgba(255,255,255,.92) !important; }
/* B3 — bottom gradient; top ~60% of the video stays clean */
.hero-v2__overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 62%) !important;
}

/* ================= C · PROMISE POSTER ================= */
#promise { padding-top: 140px !important; padding-bottom: 140px !important; }
@media (max-width: 760px) { #promise { padding-top: 72px !important; padding-bottom: 72px !important; } }
.promise-poster__line {
  font-size: clamp(3rem, 8vw, 7.5rem) !important;
  line-height: 0.95 !important;
  margin: 28px 0 32px;
  max-width: 22ch;
  color: var(--br-ink) !important;
}
.promise-second { margin-top: 104px; }
.promise-second__title {
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 700 !important;
  margin: 0 0 20px;
  color: var(--br-ink) !important;
}

/* ================= D · WORK CARDS ================= */
.wk-card { padding: 0 !important; gap: 0 !important; min-height: 0 !important; overflow: hidden; }
.wk-card__media {
  width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  background: var(--br-bg-alt); display: block; position: relative;
}
/* day-count badge — the strongest evidence for the three-day claim */
.wk-card__days {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #000; background: var(--br-accent); padding: 6px 10px;
}
.wk-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(.3);
  transition: filter 150ms var(--ease-spec), transform 400ms var(--ease-spec);
}
.wk-card:hover .wk-card__media img,
.wk-card:focus-visible .wk-card__media img { filter: grayscale(0); }
/* archive cards sit heavily desaturated at rest, clearing on hover (base rule untouched) */
.wk-card--archive .wk-card__media img { filter: grayscale(0.9); }
.wk-card--archive:hover .wk-card__media img,
.wk-card--archive:focus-visible .wk-card__media img { filter: grayscale(0); }
.wk-card__body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px 22px;
}
.wk-card__name { font-size: clamp(18px, 1.7vw, 23px) !important; }
/* drawer CTA row */
.wd-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border);
}
.wd-actions .btn, .wd-actions .btn-ghost { min-height: 48px !important; padding: 14px 22px !important; }

/* animatable rule for problem rows (CSS border stays as the base hairline) */
.problem-row { position: relative; }
.problem-row__rule {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--br-ink); transform: scaleX(0); transform-origin: left center;
}
@media (prefers-reduced-motion: reduce) { .problem-row__rule { transform: scaleX(1); } }

/* --- B4 · contrast fix, verified from the 375px screenshot.
   The H1 occupies roughly 34-57% up from the hero bottom, exactly where the
   first gradient decayed to .28 -> 0, so white type sat over the lit tentacle
   and parchment. Strengthen the mid band; the top stays essentially clean. --- */
.hero-v2__overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,.80) 0%,
    rgba(0,0,0,.56) 30%,
    rgba(0,0,0,.26) 52%,
    rgba(0,0,0,0)   68%) !important;
}
@media (max-width: 900px) {
  /* mobile H1 wraps to 4 lines and reaches higher -> darker still */
  .hero-v2__overlay {
    background: linear-gradient(to top,
      rgba(0,0,0,.88) 0%,
      rgba(0,0,0,.70) 34%,
      rgba(0,0,0,.40) 58%,
      rgba(0,0,0,0)   78%) !important;
  }
}

/* reinstated testimonials still used the old 2-column section-header, so its
   H2 started at x=404 while every other H2 starts at the 48px container edge */
#reviews .section-header { display: block !important; }
#reviews .section-header > div { max-width: none; }
#reviews .section-header h2 { margin-top: 12px; }

/* ============================================================
   A · MULTI-COLOR TITLE SYSTEM (global)
   Default display segment inherits ink (inverts with theme);
   .t-accent = brand amber; .t-mute = theme-stable 50% gray.
   .accent-text is kept as an alias so the ~33 legacy pages match.
   ============================================================ */
.display-xl, .display-lg, .display-md, .br-h2,
h1, h2, .hero-v2__title, .promise-poster__line { color: var(--br-ink); }
.t-accent, .accent-text { color: var(--br-accent) !important; }
.t-mute { color: #808080 !important; }
/* hero sits on video: default segment is white, accents keep their hue */
.hero-v2 h1.hero-v2__title { color: #fff !important; }
.hero-v2 h1.hero-v2__title .t-accent { color: var(--br-accent) !important; }
.hero-v2 h1.hero-v2__title .t-mute  { color: rgba(255,255,255,.62) !important; }

/* ============================================================
   B · HERO TITLE TO TOP
   ============================================================ */
.hero-v2 { place-items: start start !important; }
.hero-v2__inner { padding: 96px 64px 0 !important; }
@media (max-width: 900px) { .hero-v2__inner { padding: 72px 24px 0 !important; } }
/* gradient flips: dark at top, lower ~60% of the video clean */
.hero-v2__overlay {
  background: linear-gradient(to bottom,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.24) 34%,
    rgba(0,0,0,0)   58%) !important;
}
@media (max-width: 900px) {
  .hero-v2__overlay {
    background: linear-gradient(to bottom,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.38) 40%,
      rgba(0,0,0,0)   66%) !important;
  }
}

/* ============================================================
   D · DRAWER SPACING
   ============================================================ */
.wd-drawer { padding: 40px !important; }
@media (max-width: 760px) { .wd-drawer { padding: 24px !important; } }
.wd-field { padding: 28px 0 0 !important; margin-top: 28px; border-top: 1px solid var(--border); }
.wd-field:first-child { margin-top: 8px; }
.wd-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 40px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.wd-actions .btn, .wd-actions .btn-ghost { width: 100% !important; text-align: center; }

/* ============================================================
   MOTIONSITES TRANSLATIONS (layout only, our materials)
   --br-paper aliases the theme page colour so it inverts.
   ============================================================ */
:root { --br-paper: var(--br-bg); }

/* --- HOW-IT-WORKS rising staircase (PrecisionSection layout only) --- */
/* tighten the empty field around the diagram (was 96px pad + 48px margin) */
.stair-section { padding-top: 64px; padding-bottom: 64px; }
.stair {
  --stair-rise: 62px;    /* single source of truth: equal step between boxes */
  --stair-top:  196px;   /* top offset of the lowest box (00); box 03 = top - 3·rise */
  position: relative;
  height: 372px;
  margin-top: 20px;
}
/* box-to-box connectors: exactly 3 <path>s, geometry set by section-motion.js
   from the measured chip edges. Sits behind the boxes, never through them. */
.stair__connectors {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; overflow: visible;
}
.stair__connectors path {
  fill: none; stroke: var(--stair-connector);
  stroke-width: 1.5; stroke-dasharray: 6 6; stroke-linecap: round;
}
.stair__pillar {
  position: absolute;
  left: var(--l);
  top: calc(var(--stair-top) - var(--i) * var(--stair-rise));  /* equal rise */
  width: 21%;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 1;
}
.stair__chip {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--br-ink);
  background: var(--br-paper);
  border: 1px solid var(--br-ink);
  border-radius: 0;
  padding: 10px 14px;
  align-self: flex-start;
  white-space: nowrap;
}
.stair__col { display: grid; grid-template-columns: 1px 1fr; gap: 16px; align-items: stretch; }
.stair__line {
  display: block; width: 1px; height: 100%; align-self: stretch;  /* spans full list */
  background: var(--br-accent);
  transform: scaleY(1); transform-origin: top center;
  position: relative; overflow: hidden;
}
/* slow highlight travelling down each amber line (~6s) */
.stair__line::after {
  content: ''; position: absolute; left: 0; width: 100%; height: 42%;
  top: -42%;
  background: linear-gradient(to bottom, transparent, var(--br-accent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .stair__connectors path { animation: stairConnectorDrift 32s linear infinite; }
  .stair__line::after { animation: stairLineTravel 6s ease-in-out infinite; }
}
@keyframes stairConnectorDrift { to { stroke-dashoffset: -120; } }
@keyframes stairLineTravel { 0% { top: -42%; } 100% { top: 100%; } }
.stair__items { list-style: none; margin: 0; padding: 2px 0 0; display: grid; gap: 8px; }
.stair__items li {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.35; color: var(--br-ink-mute);
}
@media (max-width: 760px) {
  .stair { height: auto; display: flex; flex-direction: column; gap: 40px; }
  .stair__connectors { display: none; }   /* connectors are meaningless when stacked */
  .stair__pillar { position: static; left: auto; top: auto; width: 100%; }
  .stair__pillar:nth-child(even) { align-items: flex-end; text-align: right; }
  .stair__pillar:nth-child(even) .stair__col { direction: rtl; }
  .stair__pillar:nth-child(even) .stair__items { direction: ltr; text-align: right; }
}

/* === CTA repair round: email copy badge + WhatsApp channel link === */
.cta-copied {
  position: absolute; z-index: 9999; pointer-events: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em; line-height: 1;
  color: var(--br-accent);
  opacity: 0; transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
}
.cta-copied.is-visible { opacity: 1; transform: translateY(0); }
.cta-whatsapp { display: inline-flex; align-items: center; }
.cta-whatsapp svg { width: 14px; height: 14px; margin-right: 6px; flex: 0 0 auto; }

/* === CTA repair round: secondary-CTA affordance ===
 * WhatsApp + email + text-link CTAs read as tappable links: persistent
 * underline, trailing arrow (WhatsApp/email), 44px touch target, amber hover.
 * The primary "Book a 30-min call" buttons are deliberately excluded. */
.cta-whatsapp,
.hero-editorial__textlink,
a[href^="mailto:letstalk"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 8px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color .16s ease, text-decoration-thickness .16s ease;
}
.cta-whatsapp:hover,
.cta-whatsapp:focus-visible,
.hero-editorial__textlink:hover,
.hero-editorial__textlink:focus-visible,
a[href^="mailto:letstalk"]:hover,
a[href^="mailto:letstalk"]:focus-visible {
  color: var(--br-accent);
  text-decoration-thickness: 2px;
}
/* trailing arrow on WhatsApp + email (text-link CTAs already carry a → glyph) */
.cta-whatsapp::after,
a[href^="mailto:letstalk"]::after {
  content: '\2192';
  margin-left: 6px;
}

/* footer secondary CTAs: the footer forces color:var(--br-bg)!important and
 * text-decoration:none on links, so re-assert the affordance in-context.
 * .site-footer .cta-whatsapp (0,2,0) beats .site-footer a (0,1,1); hover
 * colour needs !important to override the forced footer link colour. */
.site-footer .cta-whatsapp,
.footer .cta-whatsapp,
.site-footer a[href^="mailto:letstalk"],
.footer a[href^="mailto:letstalk"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: 0;
}
.site-footer .cta-whatsapp:hover,
.site-footer .cta-whatsapp:focus-visible,
.footer .cta-whatsapp:hover,
.site-footer a[href^="mailto:letstalk"]:hover,
.site-footer a[href^="mailto:letstalk"]:focus-visible,
.footer a[href^="mailto:letstalk"]:hover {
  color: var(--br-accent) !important;
  text-decoration-thickness: 2px;
}

/* === FIGURE POSTERS === */
.fig-poster { display: block; width: 100%; aspect-ratio: 16 / 10; background: #000; }
.fig-poster__mono {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 900px; letter-spacing: -30px;
  fill: #fff; fill-opacity: 0.08;
}
.fig-poster__idx {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 40px; letter-spacing: 4px;
  fill: #fff; fill-opacity: 0.55;
}
.fig-poster__name {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 40px; letter-spacing: 3px;
  fill: #fff; fill-opacity: 0.9;
}
.fig-poster__rule { fill: var(--accent); }
.fig-poster__sector {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500;
  font-size: 34px; letter-spacing: 3px;
  fill: #fff; fill-opacity: 0.4;
}
@media (max-width: 720px) {
  .fig-poster__mono { font-size: 680px; transform: translateY(-70px); }
  .fig-poster__sector { display: none; }
}