/* ══════════════════════════════════════════════════════════════
   Legacy page bridge
   Loaded AFTER shared/redesign.css on pages whose bodies have not
   been rewritten into the new components yet (about, pricing, blog,
   service landing pages, portfolio + blog detail pages).

   It does two jobs:
   1. Re-points the OLD custom properties at the NEW palette, so the
      page-specific inline <style> blocks — which reference
      var(--muted), var(--border), var(--bg2) and friends ~800 times
      across the site — inherit the redesign without content edits.
   2. Restyles the old shared component classes to match.

   Deleting this file is the finish line: once a page's body is
   rewritten in the new components, drop the bridge <link> from it.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — old names, new values */
  --bg:          #FCFBF8;   /* was #FAFAFA */
  --bg2:         #F3F0E9;   /* was #F3F4F7 */
  --bg3:         #EFEBE3;   /* was #E8EAF0 */
  --border:      rgba(18,17,15,.08);
  --border2:     rgba(18,17,15,.14);

  /* Accent keeps its hex; the tints move to the warm palette */
  --accent:      #2E5CE6;
  --accent-lt:   #EDF1FE;
  --accent-dim:  #1B3FB8;
  --accent-glow: rgba(46,92,230,.22);

  --green:       #0F7A54;   /* was #059669 */
  --green-lt:    #E7F4EE;
  --green-dim:   #0B5C3F;

  /* Text */
  --text:        #12110F;
  --text2:       #2A2822;
  --muted:       #5C574E;
  --muted2:      #8A8377;

  /* Type — see note below on why --font-head is NOT the serif */
  --font-head:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius:      9px;
  --radius-lg:   16px;
  --radius-xl:   18px;
  --max:         1180px;

  --shadow-sm:   0 1px 3px rgba(18,17,15,.05), 0 6px 18px rgba(18,17,15,.05);
  --shadow-md:   0 12px 30px rgba(18,17,15,.09);
  --shadow-lg:   0 20px 50px rgba(18,17,15,.14);
}

/* Instrument Serif ships a single 400 weight. Legacy markup sets
   font-weight: 800 on --font-head in ~100 places, which would render as
   smeared synthetic bold. So --font-head stays sans, and the serif is
   applied deliberately to real headings only. */
h1, h2, h3,
.section-title, .hero-title, .page-title, .post-title, .pricing-title {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.022em;
  line-height: 1.06;
  color: var(--ink);
}
h1, .hero-title, .page-title { line-height: 1; letter-spacing: -.025em; }
h4, h5, h6 { font-family: var(--sans); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

/* ── Old shared components, restyled ─────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }
section { padding: var(--pad-y) 0; }

.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.section-label::before { content: none; }   /* the old accent dash is gone */

.section-title { font-size: clamp(34px, 4.4vw, 58px); margin-bottom: 18px; }
.section-sub { font-size: 17px; line-height: 1.68; color: var(--text-body); max-width: 560px; }

.card {
  background: var(--paper); border: 1px solid var(--line-card);
  border-radius: 16px; padding: var(--card-pad); box-shadow: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { border-color: var(--line-card); transform: translateY(-6px); box-shadow: var(--sh-card); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 9px; border: 1.4px solid var(--accent);
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-accent); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 9px;
  background: transparent; color: var(--ink); border: 1.4px solid var(--line-btn);
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: all .25s var(--ease);
}
.btn-ghost:hover { background: var(--paper-2); border-color: rgba(18,17,15,.34); color: var(--ink); transform: translateY(-2px); }

/* Legacy chips / tags pick up the warm chip tone */
.platform-chip, .work-tag {
  background: var(--chip); border: 0; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-muted); padding: 5px 11px;
}

/* Legacy work + platform + value blocks */
.work-card { border-radius: 16px; border: 1px solid var(--line-card); background: var(--paper); }
.work-card:hover { transform: translateY(-6px); box-shadow: var(--sh-card); border-color: var(--line-card); }
.work-thumb, .work-thumb-fallback { background: var(--slot); color: var(--text-fainter); }
.work-name { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -.015em; }
.work-cat { color: var(--accent); letter-spacing: .12em; }
.work-filter, .platform-tab {
  border-radius: 99px; border: 1px solid rgba(18,17,15,.14);
  background: var(--paper); color: var(--text-muted);
  font-family: var(--sans); font-weight: 600; transition: all .22s var(--ease);
}
.work-filter:hover, .platform-tab:hover { border-color: rgba(18,17,15,.34); color: var(--ink); }
.work-filter[aria-pressed="true"], .platform-tab[aria-selected="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none;
}
.platform-visual { background: var(--paper-3); border: 0; border-radius: 16px; box-shadow: none; }
.value-icon { background: var(--chip); border-radius: 12px; }
.value-icon svg { stroke: var(--accent); }

/* Legacy marquee sits on the new paper ground */
.logo-marquee { background: var(--paper); border-color: var(--line); }
.logo-marquee::before { background: linear-gradient(90deg, var(--paper), transparent); }
.logo-marquee::after  { background: linear-gradient(270deg, var(--paper), transparent); }
.marquee-item { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 23px; color: var(--text-faint); opacity: 1; }

/* The old reveal class — the new observer only drives [data-reveal],
   so legacy .reveal elements must not start invisible. */
.reveal { opacity: 1; transform: none; }

/* Old fixed-nav offsets are dead weight now that the header is sticky. */
[style*="padding-top: 68px"], [style*="padding-top:68px"] { padding-top: 0 !important; }

/* ── Display numerals ────────────────────────────────────
   Legacy pages render stats and prices as heavy sans numerals. The redesign
   sets every display numeral in Instrument Serif at 400, so map the numeral
   classes used across the old pages onto it. Listed explicitly rather than
   matched by pattern, so a stray text element never gets serif-ed. */
.stat-num, .f-stat-val, .cro-num, .fix-num, .include-num, .pt-num, .step-num,
.popular-num, .result-stat, .price, .price-amount, .pricing-price, .pm-price,
.addon-price, .case-metric-val, .meta-val, .year {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.02em;
  line-height: 1;
}
/* Green was the old stat colour; keep it for metrics but in the new tone. */
.stat-num, .f-stat-val, .cro-num, .fix-num, .result-stat, .case-metric-val { color: var(--green); }

/* Old sans-bold section eyebrows inside cards stay sans. */
.stat-label, .f-stat-label, .case-metric-label, .svc-price-label {
  font-family: var(--sans) !important; font-weight: 600;
}