/* =========================================================================
   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-rule-soft: #D9D9D9;
  --br-accent:    #FFBF00;
  --br-invert:    #FFFFFF;

  /* 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-rule-soft: #2A2A2A;
  --br-invert:    #000000;
}

/* --- 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: 700 !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: 700 !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: 700 !important;
  color: var(--br-ink) !important;
  letter-spacing: 0 !important;
}
.work-cat-header h3 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !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: 700 !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(--br-rule);
  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 -------------------------------- */
.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.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(--br-rule-soft);
}

/* --- 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: var(--br-border) solid var(--br-rule);
  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: 700;
  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(--br-rule-soft);
  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: 700 !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: 700 !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 .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(--br-rule-soft); }
.problem-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--br-rule-soft);
}
.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: 700;
  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(--br-rule-soft);
}
.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(--br-rule-soft) !important;
  transition: background 150ms var(--ease-spec), color 150ms var(--ease-spec);
  font: inherit;
}
.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:hover, .wk-card:focus-visible { background: var(--br-ink); color: var(--br-bg); }
.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; } }

/* ---- 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(--br-rule-soft);
}
.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(--br-rule-soft); 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(--br-rule-soft); }
.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-rows { margin-top: 48px; border-top: 1px solid var(--br-rule-soft); }
.hww-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 32px;
  padding: 22px 0; border-bottom: 1px solid var(--br-rule-soft); 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(--br-rule-soft); }
.cred-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--br-rule-soft);
}
.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); }

/* ================= MARQUEE (08 -> 09) ================= */
.marquee {
  overflow: hidden; border-top: 1px solid var(--br-rule-soft);
  border-bottom: 1px solid var(--br-rule-soft); padding: 18px 0; margin: 0;
}
.marquee__track { display: flex; gap: 48px; width: max-content; animation: marquee-scroll 26s linear infinite; }
.marquee__item {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(18px, 2vw, 26px); color: var(--br-ink-mute); white-space: nowrap;
}
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================= 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) {
  .marquee__track { animation: none !important; }
  .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); }
}

/* marquee: the string carries its own trailing separator, so no track gap
   and preserve the trailing space for a seamless loop */
.marquee__track { gap: 0 !important; }
.marquee__item { white-space: pre !important; }

/* 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,
.marquee__item, .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: 16 / 10; overflow: hidden;
  background: var(--br-bg-alt); display: block;
}
.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); }
.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(--br-rule-soft);
}
.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; }