/* =========================================================================
   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: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* --- TYPOGRAPHY --------------------------------------------------------- */
.br-eyebrow,
.eyebrow {
  font-family: 'JetBrains 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: 'Space Grotesk', 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,
.calibration__headline,
.services-statement__line {
  font-family: 'Space Grotesk', 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: 'Space Grotesk', 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: 'Inter', 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: 'JetBrains 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: 'JetBrains 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: 'JetBrains 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: 'JetBrains 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: 'JetBrains 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: 'Space Grotesk', 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: 'JetBrains 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;
}

/* --- CALIBRATION SECTION (refit for brutalism) -------------------------- */
.calibration {
  max-width: none;
}
.calibration__principle {
  font-family: 'Space Grotesk', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 56px) !important;
  line-height: 1.0 !important;
  letter-spacing: -0.03em !important;
  color: var(--br-ink) !important;
  margin: 0 0 var(--br-s6) !important;
  max-width: 1100px !important;
  padding-bottom: var(--br-s4);
  border-bottom: var(--br-border) solid var(--br-rule);
}
.calibration__manifest {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: var(--br-s7) !important;
}
.calibration__manifest-item {
  padding: var(--br-s4) var(--br-s4) var(--br-s4) 0 !important;
  border-right: var(--br-border) solid var(--br-rule);
  display: flex;
  flex-direction: column;
  gap: var(--br-s2);
}
.calibration__manifest-item:last-child {
  border-right: none;
  padding-right: 0;
}
.calibration__manifest-item:not(:first-child) {
  padding-left: var(--br-s4) !important;
}
.calibration__manifest .hero-editorial__meta-label {
  font-family: 'JetBrains 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;
  font-weight: 500 !important;
}
.calibration__manifest .hero-editorial__meta-value {
  font-family: 'Space Grotesk', sans-serif !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: var(--br-ink) !important;
  font-weight: 500 !important;
}
.calibration__intro {
  margin-bottom: var(--br-s6) !important;
  max-width: 900px !important;
}
.calibration__lede {
  color: var(--br-ink-soft) !important;
  font-size: var(--br-body-lg) !important;
}
.calibration__list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  border-top: var(--br-border) solid var(--br-rule);
  border-left: var(--br-border) solid var(--br-rule);
}
.calibration__item {
  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;
  grid-template-columns: 56px 1fr !important;
}
.calibration__num {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: var(--br-ink) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.calibration__title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  color: var(--br-ink) !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
}
.calibration__desc {
  color: var(--br-ink-soft) !important;
  font-size: 15px !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: 'Space Grotesk', 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: 'Inter', 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: 'JetBrains 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: 'Space Grotesk', 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: 'JetBrains 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: 'Space Grotesk', 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: 'Inter', 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: 'JetBrains 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: 'Space Grotesk', 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: 'JetBrains 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: 'JetBrains 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); }
  .calibration__list,
  .services-shapes,
  .work-mini-grid {
    grid-template-columns: 1fr !important;
  }
  .calibration__manifest { grid-template-columns: 1fr !important; }
  .calibration__manifest-item {
    border-right: none !important;
    border-bottom: var(--br-border) solid var(--br-rule);
    padding: var(--br-s3) 0 !important;
  }
  .calibration__manifest-item:last-child { border-bottom: none; }
  .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: 'JetBrains 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: 'Space Grotesk', 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: 'JetBrains 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: 'JetBrains 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: 'JetBrains 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: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 600;
}
.video-panel__caption {
  font-family: 'Space Grotesk', 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: 'Inter', 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: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--br-ink);
  text-align: left;
}
.currency-menu .currency-code {
  font-family: 'JetBrains 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: 'Inter', 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,
.calibration, .calibration__principle, .calibration__manifest,
.calibration__manifest-item, .calibration__list, .calibration__item,
.calibration__intro, .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: 'Space Grotesk', 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
   ============================================================ */

/* --- Task 1 — eyebrows: Space Grotesk Bold, uppercase, tracked. One treatment
   across every section (hero + section-headers). span.dot stays the accent. --- */
.br-eyebrow, .eyebrow, .hero-editorial__eyebrow {
  font-family: 'Space Grotesk', sans-serif !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; }