/* ────────────────────────────────────────────────────────────────
   Auto Affection Detailing co-brand layer
   Loaded ONLY by /work/auto-affection-detailing/index.html

   Same approach as rm-theme.css: override the channel tokens declared
   in site.css (--gold-rgb, --navy-rgb, --soft-rgb …) so the whole page
   re-themes without touching component CSS. Nothing here leaks to any
   other page.

   Brand reference, sampled from autoaffectiondetailing.com.au:
     accent  #df2424   surface #1d1a18   deep #030202
     display font  Michroma        body font  IBM Plex Sans
   ──────────────────────────────────────────────────────────────── */

:root {
  --gold-rgb:   223,36,36;    /* #df2424 brand red   */
  --gold-h-rgb: 232,80,80;    /* hover, lifted       */
  --gold-d-rgb: 178,28,28;    /* pressed / gradient  */
  --navy-rgb:   29,26,24;     /* #1d1a18 warm surface from their site */
  --soft-rgb:   232,121,109;  /* small-text accent — see contrast note below */
}

/* ── Contrast ──
   The brand red sits at 4.16:1 on the #0a0a0a page background, well under
   the 8.66:1 the Laurent Horizon gold enjoys. That is fine for headings and
   borders but too low for the small uppercase accents. --soft-rgb (#e8796d)
   lifts those to 6.96:1, matching the ~7:1 target rm-theme.css uses. */
.sec-label span,
.port-tag,
.info-label,
.ct-lbl,
.ft-col h4,
.ps-num,
.breadcrumbs [aria-current],
.stat-label,
.work-client,
.work-link,
.case-stat .stat-label {
  color: rgb(var(--soft-rgb));
}
.port-tag { border-color: rgba(var(--soft-rgb), 0.32); }

/* ── Typography ──
   Michroma is a wide display face with a single 400 weight, and IBM Plex Sans
   replaces Inter for body copy. */
body,
.prose p,
.page-lead,
.check-list li,
.work-desc {
  font-family: 'IBM Plex Sans', 'Inter', sans-serif;
}

/* Michroma carries the big display type only. Site chrome — nav, buttons,
   footer — deliberately stays in the Laurent Horizon face: it is our header,
   not the client's, and Michroma is wide enough to re-break the nav fit. */
.heading,
.page-h1,
.prose h2,
.proof-h,
.work-title,
.cta-h,
.case-stat .stat-num {
  font-family: 'Michroma', 'Barlow Condensed', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* Label-sized headings use the body face, as they do on their own site. */
.prose h3,
.side-card h3 {
  font-family: 'IBM Plex Sans', 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Michroma runs roughly twice the width of Barlow Condensed at the same
   size, so every display size has to come down or the headings overrun. */
.page-h1      { font-size: clamp(1.35rem, 3.1vw, 2.5rem); line-height: 1.25; letter-spacing: -0.01em; }
.prose h2     { font-size: clamp(1rem, 1.9vw, 1.4rem);    line-height: 1.4; }
.prose h3     { font-size: 0.98rem; line-height: 1.45; }
.proof-h      { font-size: clamp(1.1rem, 2.4vw, 1.9rem) !important; line-height: 1.3; }
.cta-h        { font-size: clamp(1.2rem, 2.8vw, 2.3rem);  line-height: 1.3; }

/* Buttons: black on brand red is only 4.3:1, which fails AA at button text
   size. White clears it at 4.88:1. */
.btn-g { color: #fff; }

/* The CTA banner paints the accent full-bleed and assumes dark text on a
   light gold. On red that inverts — everything in there goes white. */
#cta .sec-label span { color: rgba(255,255,255,0.72) !important; }
.cta-h   { color: #fff; }
.cta-sub { color: rgba(255,255,255,0.85); }
.btn-odk { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-odk:hover { background: rgba(255,255,255,0.12); }

@media (max-width: 600px) {
  .page-h1 { font-size: 1.15rem; line-height: 1.35; }
  .cta-h   { font-size: 1.1rem; }
  .proof-h { font-size: 1rem !important; }
}