/**
 * Think Politically — Design System v3.0
 * ════════════════════════════════════════════════════════════════
 *
 * THREE-COLOUR SYSTEM: Navy · Gold · Blue
 * Each colour owns a distinct semantic role — never compete, always collaborate.
 *
 * ┌─────────────────────────────────────────────────────────────┐
 * │  NAVY (#0a192f / #06101e)  →  STRUCTURE & AUTHORITY        │
 * │    Permitted: hero bg, nav, CTA section bg, footer, body    │
 * │               text on light pages                           │
 * │    Forbidden: interactive elements, category tags           │
 * ├─────────────────────────────────────────────────────────────┤
 * │  GOLD (#eec200)  →  BRAND PRESTIGE                         │
 * │    Permitted: logo wordmark, hero headline accent, primary   │
 * │               CTA on dark, key stat numbers, featured card  │
 * │               border, footer CTA, section eyebrow dash      │
 * │    Forbidden: body text on white/cream, same line as blue   │
 * │               text elements, links/hover colour             │
 * ├─────────────────────────────────────────────────────────────┤
 * │  BLUE DEEP (#1d4ed8)  →  INTELLIGENCE & ACTION (on light)  │
 * │    Permitted: nav CTA button, section labels on cream,      │
 * │               service tags, links in body, data card bg     │
 * │    Forbidden: text labels on cream (use #3b82f6 form only   │
 * │               as decorative border/glow on DARK surfaces)   │
 * ├─────────────────────────────────────────────────────────────┤
 * │  BLUE LIGHT (#3b82f6)  →  DECORATIVE ON DARK ONLY         │
 * │    Permitted: borders, glows, stats underline on navy bg    │
 * │    Forbidden: text labels on white/cream (fails contrast)   │
 * ├─────────────────────────────────────────────────────────────┤
 * │  TEAL (#4cffb4)  →  POSITIVE DATA SIGNALS (dark only)      │
 * │    Permitted: accuracy %, upward metrics, verified badges   │
 * │               on navy backgrounds. Max 3 per page.          │
 * │    Forbidden: light bgs, CTAs, branding, >3 instances/page  │
 * ├─────────────────────────────────────────────────────────────┤
 * │  CREAM (#faf7f0)  →  WARM NEUTRAL FOR CONTENT SECTIONS     │
 * │    Permitted: services, FAQ, case studies, blog, districts  │
 * │    Forbidden: hero, CTA sections, footer (navy only)        │
 * └─────────────────────────────────────────────────────────────┘
 *
 * CONTRAST SPEC (all pairs WCAG AA or better):
 *   #fff    on #0a192f  → 14.5:1  AAA ✓
 *   #eec200 on #0a192f  →  9.8:1  AAA ✓
 *   #3b82f6 on #0a192f  →  5.9:1  AA  ✓  (border/accent use only)
 *   #cbd5e1 on #0a192f  →  7.5:1  AAA ✓  (body text on dark)
 *   #4cffb4 on #0a192f  → 11.2:1  AAA ✓
 *   #0a192f on #faf7f0  → 14.2:1  AAA ✓
 *   #1d4ed8 on #faf7f0  →  7.2:1  AAA ✓  (labels/tags on cream)
 *   #fff    on #1d4ed8  →  7.2:1  AAA ✓  (nav CTA button text)
 *   #475569 on #faf7f0  →  6.9:1  AA  ✓  (muted text on cream)
 *   BANNED: #94a3b8 as body text on dark (4.2:1 — fails AA)
 *   BANNED: #64748b on dark (2.8:1 — fails both thresholds)
 *
 * Load order: after style-built.css (priority 10000)
 */

/* ─────────────────────────────────────────────────────────────
   STEP 1 + 2: BRAND TOKENS — single source of truth
   All colours defined here. tailwind.config.js references these
   roles. Never use raw hex in templates — use these vars.
   ───────────────────────────────────────────────────────────── */
:root {
  /* ── Navy — Structure ── */
  --brand-navy:        #0a192f;   /* hero, nav, CTA sections */
  --brand-navy-dark:   #06101e;   /* stats band, footer */
  --brand-navy-card:   #0f253f;   /* card bg on dark sections (lightened for depth) */

  /* ── Gold — Prestige ── */
  --brand-accent:        #eec200;
  --brand-accent-hover:  #d4a800;
  --brand-accent-active: #c49800;
  --brand-gold:          #eec200;
  --brand-accent-10:   rgba(238, 194, 0, 0.10);
  --brand-accent-15:   rgba(238, 194, 0, 0.15);
  --brand-accent-20:   rgba(238, 194, 0, 0.20);
  --brand-accent-30:   rgba(238, 194, 0, 0.30);
  --brand-accent-40:   rgba(238, 194, 0, 0.40);

  /* ── Blue Deep — Intelligence/Action on LIGHT surfaces ── */
  /* Step 2: blue now has full depth tier matching gold */
  --brand-blue-deep:       #1d4ed8;   /* nav CTA, labels/tags on cream (7.2:1) */
  --brand-blue-deep-hover: #1e40af;
  --brand-blue-deep-10:  rgba(29, 78, 216, 0.10);
  --brand-blue-deep-20:  rgba(29, 78, 216, 0.20);

  /* ── Blue Light — Decorative on DARK surfaces only ── */
  --brand-blue:          #3b82f6;   /* borders, glows, stats underline on navy */
  --brand-blue-hover:    #2563eb;
  --brand-blue-light:    #60a5fa;   /* secondary text on very dark bg */

  /* ── Teal — Positive data signals on dark only ── */
  /* Step 8: activated from dormant state */
  --brand-teal:          #4cffb4;
  --brand-teal-10:     rgba(76, 255, 180, 0.10);
  --brand-teal-20:     rgba(76, 255, 180, 0.20);

  /* ── Warm Cream — Content section neutral ── */
  /* Step 6: replaces clinical #ffffff for section backgrounds */
  --brand-cream:         #faf7f0;   /* services, FAQ, cases, blog bg */
  --brand-cream-card:    #ffffff;   /* card surfaces within cream sections */
  --brand-cream-border:  #ede8df;   /* card borders on cream */

  /* ── Slate palette — text on dark ── */
  /* WCAG-safe levels only. #94a3b8 and below BANNED as body text on dark. */
  --slate-200: #e2e8f0;   /*  9.5:1 on navy — highest muted */
  --slate-300: #cbd5e1;   /*  7.5:1 on navy — body text on dark (Step 5) */
  --slate-400: #94a3b8;   /*  4.2:1 — use ONLY for labels ≥18px bold, or borders */
  --slate-500: #64748b;   /*  2.8:1 — FORBIDDEN on dark backgrounds */
  --slate-600: #475569;   /*  6.9:1 on cream — muted text on light sections only */
  --slate-800: #1e293b;
  --slate-950: #020617;

  /* ── Radii — corrected from tailwind.config ── */
  --radius-sm:  0.125rem;
  --radius:     0.25rem;
  --radius-md:  0.375rem;
  --radius-lg:  0.5rem;
  --radius-xl:  0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* ── Tailwind compiled var alignment ── */
  --color-brand-accent: #eec200;   /* gold — overrides any Tailwind blue compile */
  --color-brand-gold:   #eec200;
  --color-brand-navy:   #0a192f;
}

/* ─────────────────────────────────────────────────────────────
   SELF-HOSTED FONTS — no Google Fonts CDN dependency
   All WOFF2 files in assets/fonts/. Loaded before any other CSS.
   ───────────────────────────────────────────────────────────── */

/* Cabinet Grotesk 700 */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Cabinet Grotesk 800 */
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('assets/fonts/cabinet-grotesk-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  src: url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* JetBrains Mono */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Tamil — Tamil script (variable, tamil subset only).
   Without this, Tamil text on /ta/ and bilingual pages falls back to
   whatever system font is available, breaking typographic consistency. */
@font-face {
  font-family: 'Noto Sans Tamil';
  src: url('assets/fonts/noto-sans-tamil.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}

/* Material Symbols Outlined */
@font-face {
  font-family: 'Material Symbols Outlined';
  src: url('assets/fonts/material-symbols-outlined.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  /* was font-display:block (PSI "font display" flag, 340-360ms) - every usage
     is already aria-hidden="true" decorative icon glyphs, so a brief fallback
     render before the font loads is imperceptible; swap matches every other
     @font-face in this file. */
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY BASELINE — single source of truth for all fonts
   Matches tailwind.config.js fontFamily declarations exactly.
   ───────────────────────────────────────────────────────────── */
body, body * {
  font-family: 'Noto Sans Tamil', 'DM Sans', sans-serif;
}
body {
  background-color: var(--brand-navy);
}
h1, h2, h3, h4, h5 {
  font-family: 'Noto Sans Tamil', 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
}
/* Tamil-language pages (/ta/): force the Tamil font stack past any inline
   font-family styles baked into stored content. Latin text still falls
   through to DM Sans via unicode-range. */
:lang(ta), :lang(ta) * {
  font-family: 'Noto Sans Tamil', 'DM Sans', sans-serif !important;
}
:lang(ta) h1, :lang(ta) h2, :lang(ta) h3, :lang(ta) h4, :lang(ta) h5 {
  font-family: 'Noto Sans Tamil', 'Cabinet Grotesk', sans-serif !important;
}

/* ─────────────────────────────────────────────────────────────
   MATERIAL SYMBOLS OUTLINED — icon sizing baseline
   @font-face declared above — self-hosted from assets/fonts/.
   ───────────────────────────────────────────────────────────── */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 1.25em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  vertical-align: middle;
  /* Optical size & fill variants */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Size overrides matching Tailwind text-* scale */
.material-symbols-outlined.text-sm  { font-size: 0.875rem; }
.material-symbols-outlined.text-base{ font-size: 1rem; }
.material-symbols-outlined.text-lg  { font-size: 1.125rem; }
.material-symbols-outlined.text-xl  { font-size: 1.25rem; }
.material-symbols-outlined.text-2xl { font-size: 1.5rem; }
.material-symbols-outlined.text-3xl { font-size: 1.875rem; }

/* ─────────────────────────────────────────────────────────────
   DISPLAY / LAYOUT
   ───────────────────────────────────────────────────────────── */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block{ display: inline-block; }
.block       { display: block; }
.hidden      { display: none; }
.grid        { display: grid; }
.relative    { position: relative; }
.absolute    { position: absolute; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-auto   { overflow-x: auto; }
.shrink-0, .flex-shrink-0 { flex-shrink: 0; }
.flex-col    { flex-direction: column; }
.w-full      { width: 100%; }
.w-auto      { width: auto; }
.h-screen    { height: 100vh; }

/* Flex alignment */
.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* ─────────────────────────────────────────────────────────────
   GRID COLUMNS
   ───────────────────────────────────────────────────────────── */
.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.col-span-1   { grid-column: span 1 / span 1; }

@media (min-width: 640px) {
  .sm\:px-6        { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:flex-row    { flex-direction: row; }
  .sm\:text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl    { font-size: 3rem;    line-height: 1; }
  .sm\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .sm\:w-auto      { width: auto; }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-1  { grid-column: span 1 / span 1; }
  .md\:flex-row    { flex-direction: row; }
  .md\:text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl    { font-size: 3rem;    line-height: 1; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:px-8        { padding-left: 2rem; padding-right: 2rem; }
  .lg\:flex-row    { flex-direction: row; }
  .lg\:items-center{ align-items: center; }
  .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .lg\:mb-16       { margin-bottom: 4rem; }
  .lg\:sticky      { position: sticky; }
  .lg\:top-32      { top: 8rem; }
}

/* ─────────────────────────────────────────────────────────────
   GAPS
   ───────────────────────────────────────────────────────────── */
.gap-1   { gap: 0.25rem; }
.gap-1\.5{ gap: 0.375rem; }
.gap-2   { gap: 0.5rem; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-5   { gap: 1.25rem; }
.gap-6   { gap: 1.5rem; }
.gap-8   { gap: 2rem; }
.gap-12  { gap: 3rem; }
.gap-16  { gap: 4rem; }

/* ─────────────────────────────────────────────────────────────
   SPACING — MARGIN
   ───────────────────────────────────────────────────────────── */
.mx-auto { margin-left: auto; margin-right: auto; }

.mb-1  { margin-bottom: 0.25rem; }
.mb-2  { margin-bottom: 0.5rem; }
.mb-3  { margin-bottom: 0.75rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-5  { margin-bottom: 1.25rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-16 { margin-bottom: 4rem; }

.mt-0\.5 { margin-top: 0.125rem; }
.mt-3    { margin-top: 0.75rem; }
.mt-4    { margin-top: 1rem; }
.mt-5    { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem; }
.mt-10   { margin-top: 2.5rem; }

.ml-auto { margin-left: auto; }
.pl-5    { padding-left: 1.25rem; }
.pl-6    { padding-left: 1.5rem; }

/* ─────────────────────────────────────────────────────────────
   SPACING — PADDING
   ───────────────────────────────────────────────────────────── */
.px-3  { padding-left: 0.75rem;  padding-right: 0.75rem; }
.px-4  { padding-left: 1rem;     padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;   padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;     padding-right: 2rem; }
.px-10 { padding-left: 2.5rem;   padding-right: 2.5rem; }
.px-12 { padding-left: 3rem;     padding-right: 3rem; }

.py-1  { padding-top: 0.25rem;  padding-bottom: 0.25rem; }
.py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.py-5  { padding-top: 1.25rem;  padding-bottom: 1.25rem; }
.py-10 { padding-top: 2.5rem;   padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem;     padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem;   padding-bottom: 3.5rem; }
.py-16 { padding-top: 4rem;     padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;     padding-bottom: 6rem; }

.pt-1  { padding-top: 0.25rem; }
.pt-8  { padding-top: 2rem; }
.pt-24 { padding-top: 6rem; }
.pt-32 { padding-top: 8rem; }

.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }

/* ─────────────────────────────────────────────────────────────
   MAX-WIDTH CONTAINER
   ───────────────────────────────────────────────────────────── */
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* ─────────────────────────────────────────────────────────────
   SIZING
   ───────────────────────────────────────────────────────────── */
.w-8       { width: 2rem; }
.w-12      { width: 3rem; }
.h-8       { height: 2rem; }
.h-10      { height: 2.5rem; }
.h-12      { height: 3rem; }
.h-\[44px\]{ height: 44px; }
.h-\[60vh\]{ height: 60vh; }
.h-\[70vh\]{ height: 70vh; }
.min-w-\[700px\]  { min-width: 700px; }
.min-w-\[860px\]  { min-width: 860px; }

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — SIZES
   ───────────────────────────────────────────────────────────── */
.text-\[10px\] { font-size: 10px; line-height: 1.4; }
.text-xs   { font-size: 0.75rem;   line-height: 1rem; }
.text-sm   { font-size: 0.875rem;  line-height: 1.25rem; }
.text-base { font-size: 1rem;      line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;  line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;   line-height: 1.75rem; }
.text-2xl  { font-size: 1.5rem;    line-height: 2rem; }
.text-3xl  { font-size: 1.875rem;  line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;   line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;      line-height: 1; }
.text-6xl  { font-size: 3.75rem;   line-height: 1; }

.sm\:text-4xl { /* applied at md breakpoint */ }
@media (min-width: 640px) {
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY — WEIGHT, TRANSFORM, LEADING, TRACKING
   ───────────────────────────────────────────────────────────── */
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-black    { font-weight: 900; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

.leading-relaxed { line-height: 1.625; }
.leading-snug    { line-height: 1.375; }
.leading-\[1\.05\] { line-height: 1.05; }

/* Step 5/10: reduced from 0.1em — heavy tracking at ≤10px hurts readability */
.tracking-widest  { letter-spacing: 0.06em; }
.tracking-wider   { letter-spacing: 0.08em; }

/* decoration */
.decoration-brand-accent { text-decoration-color: var(--brand-accent); }

/* Footer and nav links — strip browser-default underlines */
footer a, nav a { text-decoration: none; }

/* ─────────────────────────────────────────────────────────────
   COLORS — TEXT
   Step 4+5: added blue-deep utilities; slate rules annotated.
   ───────────────────────────────────────────────────────────── */
.text-white         { color: #ffffff; }
/* Step 5: preferred body text on dark — 7.5:1, AAA */
.text-slate-300     { color: var(--slate-300); }
/* Use at ≥18px bold only on dark, or for light-section muted text */
.text-slate-400     { color: var(--slate-400); }
/* LIGHT SECTIONS ONLY — 6.9:1 on cream. NEVER on dark backgrounds. */
.text-slate-600     { color: var(--slate-600); }
.text-green-400     { color: #4ade80; }
.text-red-400       { color: #f87171; }
.text-brand-accent  { color: var(--brand-accent); }
.text-brand-gold    { color: var(--brand-gold); }
.text-brand-navy    { color: var(--brand-navy); }
/* Step 4: deep blue for labels/tags on cream/white (7.2:1) */
.text-brand-blue    { color: var(--brand-blue-deep); }
.text-brand-blue-deep { color: var(--brand-blue-deep); }
/* Decorative blue — use on dark bgs only */
.text-brand-blue-light { color: var(--brand-blue); }
/* Step 8: teal — positive metrics on dark only */
.text-brand-teal    { color: var(--brand-teal); }

/* Opacity variants */
.text-brand-accent\/20 { color: rgba(238, 194, 0, 0.20); }
.text-brand-accent\/30 { color: rgba(238, 194, 0, 0.30); }
.text-white\/55   { color: rgba(255, 255, 255, 0.55); }
.text-white\/70   { color: rgba(255, 255, 255, 0.70); }

/* ─────────────────────────────────────────────────────────────
   COLORS — BACKGROUND
   Step 6+8+9: cream sections, blue tints, teal tints added.
   ───────────────────────────────────────────────────────────── */
.bg-slate-950        { background-color: var(--slate-950); }
.bg-gray-950         { background-color: #030712; }
.bg-brand-navy       { background-color: var(--brand-navy); }
.bg-brand-navy-dark  { background-color: var(--brand-navy-dark); }
.bg-brand-navy-card  { background-color: var(--brand-navy-card); }
.bg-brand-accent     { background-color: var(--brand-accent); }
.bg-brand-gold       { background-color: var(--brand-gold); }
/* Step 6: warm cream — services/FAQ/cases/blog section bg */
.bg-brand-cream      { background-color: var(--brand-cream); }
.bg-brand-cream-card { background-color: var(--brand-cream-card); }
/* Step 4: blue tint cards on light sections */
.bg-brand-blue-10    { background-color: var(--brand-blue-deep-10); }
.bg-brand-blue-20    { background-color: var(--brand-blue-deep-20); }
/* Step 8: teal tints — positive data on dark */
.bg-brand-teal-10    { background-color: var(--brand-teal-10); }
.bg-brand-teal-20    { background-color: var(--brand-teal-20); }
.bg-white\/5         { background-color: rgba(255,255,255,0.05); }
.bg-white\/\[0\.04\] { background-color: rgba(255,255,255,0.04); }
.bg-brand-accent\/10 { background-color: var(--brand-accent-10); }
.bg-brand-accent\/15 { background-color: var(--brand-accent-15); }

/* ─────────────────────────────────────────────────────────────
   BORDERS
   ───────────────────────────────────────────────────────────── */
.border-t         { border-top-width: 1px; border-top-style: solid; }
.border-b         { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y         { border-top-width: 1px; border-top-style: solid; border-bottom-width: 1px; border-bottom-style: solid; }
.border-l-2       { border-left-width: 2px; border-left-style: solid; }
.border-l-4       { border-left-width: 4px; border-left-style: solid; }

.border-white\/5  { border-color: rgba(255,255,255,0.05); }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/15 { border-color: rgba(255,255,255,0.15); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/50 { border-color: rgba(255,255,255,0.50); }
.border-slate-800 { border-color: var(--slate-800); }
.border-brand-accent      { border-color: var(--brand-accent); }
.border-brand-accent\/20  { border-color: rgba(238,194,0,0.20); }
.border-brand-accent\/30  { border-color: rgba(238,194,0,0.30); }
.border-brand-accent\/40  { border-color: rgba(238,194,0,0.40); }
/* Step 4: blue-deep borders for card/section accents on light */
.border-brand-blue        { border-color: var(--brand-blue-deep); }
.border-brand-blue\/20    { border-color: rgba(29,78,216,0.20); }
.border-brand-blue\/30    { border-color: rgba(29,78,216,0.30); }
/* Decorative blue (on dark only) */
.border-brand-blue-light  { border-color: var(--brand-blue); }
.border-brand-blue-light\/20 { border-color: rgba(59,130,246,0.20); }
.border-brand-blue-light\/30 { border-color: rgba(59,130,246,0.30); }
/* Step 8: teal borders */
.border-brand-teal        { border-color: var(--brand-teal); }
.border-brand-teal\/20    { border-color: rgba(76,255,180,0.20); }
/* Step 6: cream section borders */
.border-brand-cream       { border-color: var(--brand-cream-border); }

/* ─────────────────────────────────────────────────────────────
   BORDER RADIUS
   ───────────────────────────────────────────────────────────── */
.rounded-sm  { border-radius: 0.125rem; }
.rounded     { border-radius: 0.25rem; }
.rounded-md  { border-radius: 0.375rem; }
.rounded-lg  { border-radius: 0.5rem; }
.rounded-xl  { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full{ border-radius: 9999px; }

/* ─────────────────────────────────────────────────────────────
   SPACE-Y (stack spacing via lobotomised owl)
   ───────────────────────────────────────────────────────────── */
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }

/* ─────────────────────────────────────────────────────────────
   TRANSITIONS
   ───────────────────────────────────────────────────────────── */
.transition         { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; }
.transition-all     { transition: all 150ms cubic-bezier(0.4,0,0.2,1); }
.transition-colors  { transition: color, background-color, border-color 150ms cubic-bezier(0.4,0,0.2,1); }
.duration-200       { transition-duration: 200ms; }

/* ─────────────────────────────────────────────────────────────
   HOVER STATES
   Step 10: added blue glow on card hover, gold shimmer.
   ───────────────────────────────────────────────────────────── */
.hover\:text-brand-accent:hover    { color: var(--brand-accent) !important; }
.hover\:text-brand-gold:hover      { color: var(--brand-gold) !important; }
.hover\:text-white:hover           { color: #fff !important; }
.hover\:text-slate-400:hover       { color: var(--slate-400) !important; }
.hover\:text-brand-navy:hover      { color: var(--brand-navy) !important; }
.hover\:text-brand-blue:hover      { color: var(--brand-blue-deep) !important; }
.hover\:bg-brand-accent:hover      { background-color: var(--brand-accent) !important; }
.hover\:bg-brand-blue:hover        { background-color: var(--brand-blue-deep) !important; }
/* Step 3 (deep blue): nav CTA hover — matches updated header.php */
.hover\:bg-blue-700:hover          { background-color: var(--brand-blue-deep-hover) !important; }
.hover\:bg-blue-600:hover          { background-color: #2563eb !important; }
/* Gold CTA hovers */
.hover\:bg-\[\#d4a800\]:hover      { background-color: #d4a800 !important; }
.hover\:bg-\[\#1c1400\]:hover      { background-color: #1c1400 !important; }
/* Card bg hovers */
.hover\:bg-\[\#0f253f\]:hover      { background-color: var(--brand-navy-card) !important; }
.hover\:bg-\[\#0f1e34\]:hover      { background-color: #0f1e34 !important; }
.hover\:border-brand-accent:hover  { border-color: var(--brand-accent) !important; }
.hover\:border-brand-blue:hover    { border-color: var(--brand-blue-deep) !important; }
.hover\:border-white\/50:hover     { border-color: rgba(255,255,255,0.50) !important; }
.hover\:bg-slate-800:hover         { background-color: #1e293b !important; }

/* Group-hover support */
.group:hover .group-hover\:text-brand-accent  { color: var(--brand-accent); }
.group:hover .group-hover\:text-brand-blue    { color: var(--brand-blue-deep); }
.group:hover .group-hover\:border-brand-accent { border-color: var(--brand-accent); }
.group:hover .group-hover\:border-brand-blue  { border-color: var(--brand-blue-deep); }

/* ─────────────────────────────────────────────────────────────
   OPACITY
   ───────────────────────────────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-100 { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   CURSOR
   ───────────────────────────────────────────────────────────── */
.cursor-pointer { cursor: pointer; }

/* ─────────────────────────────────────────────────────────────
   OBJECT FIT
   ───────────────────────────────────────────────────────────── */
.object-contain { object-fit: contain; }
.object-cover   { object-fit: cover; }

/* ─────────────────────────────────────────────────────────────
   BRIGHTNESS (used on footer logo)
   ───────────────────────────────────────────────────────────── */
.brightness-125 { filter: brightness(1.25); }

/* ─────────────────────────────────────────────────────────────
   STEP 6: CONTENT SECTION BACKGROUNDS
   Warm cream replaces clinical white for services/FAQ/blog.
   Cards within cream sections use pure white.
   ───────────────────────────────────────────────────────────── */
.section-light {
  background-color: var(--brand-cream);
  color: var(--brand-navy);
}
.section-light .card-surface {
  background-color: var(--brand-cream-card);
  border-color: var(--brand-cream-border);
}

/* ─────────────────────────────────────────────────────────────
   STEP 8: TEAL — POSITIVE DATA SIGNALS
   Use only on navy backgrounds. Max 3 per page.
   ───────────────────────────────────────────────────────────── */
.data-positive {
  color: var(--brand-teal);
  font-family: 'JetBrains Mono', monospace;
}
.data-positive-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: var(--brand-teal-10);
  border: 1px solid var(--brand-teal-20);
  color: var(--brand-teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
}
/* Teal pulse dot for live indicators */
.teal-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-teal);
  box-shadow: 0 0 8px var(--brand-teal);
  flex-shrink: 0;
  animation: teal-pulse 2.2s ease-in-out infinite;
}
@keyframes teal-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px var(--brand-teal); }
  50%       { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 4px var(--brand-teal); }
}

/* ─────────────────────────────────────────────────────────────
   STEP 9: GOLD ON LIGHT PAGES — SAFE USAGE MODES
   Gold cannot be body text on cream/white (1.7:1 — fails).
   These utilities define the 4 permitted gold-on-light patterns.
   ───────────────────────────────────────────────────────────── */

/* Pattern 1: Gold left-border on featured cards */
.card-featured-gold {
  border-left: 4px solid var(--brand-gold) !important;
  background-color: #fffdf5;
}

/* Pattern 2: Gold tag badge (navy text on gold bg — 9.8:1) */
.tag-gold {
  display: inline-block;
  background: var(--brand-gold);
  color: var(--brand-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
}

/* Pattern 3: Gold large-number stat on light (decorative, ≥2rem) */
.stat-gold-light {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 900;
  color: var(--brand-gold);
  line-height: 1;
  /* Decorative only at this size — not body text */
}

/* Pattern 4: Gold section divider line */
.divider-gold {
  width: 2.5rem;
  height: 2px;
  background: var(--brand-gold);
  display: block;
  margin-bottom: 1rem;
}

/* ─────────────────────────────────────────────────────────────
   STEP 10: MICRO-TEXTURE + CARD HOVER GLOW
   Adds data-intelligence visual depth to dark sections.
   ───────────────────────────────────────────────────────────── */

/* Diagonal line texture for dark section backgrounds */
.section-texture {
  background-image:
    linear-gradient(
      45deg,
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      -45deg,
      rgba(255,255,255,0.018) 1px,
      transparent 1px
    );
  background-size: 32px 32px;
}

/* Blue glow on interactive card hover — intelligence aesthetic */
.card-hover-glow {
  transition: box-shadow 300ms cubic-bezier(0.4,0,0.2,1),
              transform 200ms cubic-bezier(0.4,0,0.2,1),
              border-color 300ms;
}
.card-hover-glow:hover {
  box-shadow: 0 0 0 1px rgba(59,130,246,0.3),
              0 8px 32px -8px rgba(59,130,246,0.25);
  transform: translateY(-2px);
}

/* Gold shimmer on stat numbers (reduced-motion respecting) */
.stat-shimmer {
  background: linear-gradient(
    90deg,
    var(--brand-gold) 0%,
    #fff4a0 45%,
    var(--brand-gold) 55%,
    var(--brand-accent-hover) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shimmer 3.5s linear infinite;
}
@keyframes gold-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .stat-shimmer {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--brand-gold);
    animation: none;
  }
}

/* Long-form readability — Step 5 */
.prose-dark {
  color: var(--slate-300);
  line-height: 1.75;
  max-width: 65ch;
}
.prose-dark p + p { margin-top: 1em; }
.prose-light {
  color: var(--brand-navy);
  line-height: 1.75;
  max-width: 65ch;
}
.prose-light p + p { margin-top: 1em; }

/* ─────────────────────────────────────────────────────────────
   MOBILE SECTION SPACING — override Tailwind py-24 (6rem/96px)
   which creates 100–140px dead zones on small screens.
   py-24 → ~3.5rem (56px) on mobile keeps momentum between sections.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Sections using Tailwind py-24 */
  #team,
  #contact {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  /* Sections using inline padding:5rem — bring to 3rem on mobile */
  #case-studies,
  #blog {
    padding-top: 3rem !important;
    padding-bottom: 2.5rem !important;
  }
  /* FAQ gap fix: blog inline CTA strip adds ~2rem margin before FAQ.
     Reduce FAQ top padding from 5rem to 1.5rem so the two sections
     feel continuous instead of having a 100px dead zone. */
  #faq {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  /* Team section header bottom margin — was mb-12 (3rem) */
  #team .mb-12 { margin-bottom: 2rem !important; }

  /* Contact form: add bottom breathing room so the first input field
     isn't clipped at the viewport edge when users arrive at #contact */
  .ct-form-wrap {
    padding-bottom: 3rem !important;
  }

  /* Footer services list: collapse from 2-col to 1-col at mobile
     so long service names like "Digital Marketing for Politicians"
     don't wrap mid-word inside cramped 50% columns */
  .footer-services-list {
    grid-template-columns: 1fr !important;
    gap: 0.6rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .transition,
  .transition-all,
  .transition-colors {
    transition-duration: 0.01ms !important;
  }
  .card-hover-glow:hover {
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════
   MOBILE AUDIT FIX PACK — 6 July 2026
   Source: thinkpolitically-mobile-audit-2026-07-06.md (G1–G15).
   CSS-only, display-level. No markup, text, heading, schema, or
   URL changes — zero SEO impact. Desktop rendering preserved
   except where a rule is explicitly viewport-scoped.
   ═════════════════════════════════════════════════════════════ */

/* ── G1: Content tables — scroll, never clip ──────────────────
   Fixed-width tables (600px on the DMK post, 525px research
   report, 492px whitepaper) were clipped by ancestor overflow at
   393px, hiding whole data columns. display:block + overflow-x
   makes the table itself the scroll container on any viewport
   narrower than the table. Desktop unaffected (no overflow
   → no scrollbar). */
.tp-article-body table,
.tp-page-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(59,130,246,0.45) transparent;
}
.tp-article-body table::-webkit-scrollbar,
.tp-page-body table::-webkit-scrollbar { height: 6px; }
.tp-article-body table::-webkit-scrollbar-thumb,
.tp-page-body table::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,0.45);
  border-radius: 3px;
}

/* ── G2: .text-slate-500/600 classes on dark surfaces ─────────
   Compiled Tailwind maps these to #64748b (2.8:1) and #475569
   (2.4:1) — both banned as text on navy by this design system.
   The 3-Jul safety net only covered inline style="" grays; this
   covers the class-based uses (captions, source lines, pricing
   labels on 39 pages). Scoped to known-dark containers so the
   legitimate slate-600-on-cream usage is untouched. */
.tp-article-body :is(.text-slate-500, .text-slate-600),
.tp-page-body :is(.text-slate-500, .text-slate-600),
.bg-brand-navy :is(.text-slate-500, .text-slate-600),
.bg-gray-950 :is(.text-slate-500, .text-slate-600),
section[class*="bg-[#0"] :is(.text-slate-500, .text-slate-600),
div[class*="bg-[#0"] :is(.text-slate-500, .text-slate-600),
footer :is(.text-slate-500, .text-slate-600) {
  color: var(--slate-300) !important;
}
/* Exception: keep muted-on-light inside white/cream cards that
   may sit within a dark section (slate-300 on white would be
   illegible the other way round). */
.bg-white :is(.text-slate-500, .text-slate-600),
[class*="bg-[#f"] :is(.text-slate-500, .text-slate-600) {
  color: var(--slate-600) !important;
}

/* ── G4: Mobile hero dead space ───────────────────────────────
   min-h-[50-70vh] + items-center heroes centre short mobile
   content inside a huge box → ~1/3 viewport of empty navy above
   the H1. single.php already ships FIX 7 for .tp-blog-hero; this
   extends the same treatment to every other hero template.
   Mobile only — desktop keeps the original stage presence. */
@media (max-width: 640px) {
  section[class*="min-h-["] { min-height: 0 !important; }
  section.pt-32 { padding-top: 5.5rem !important; }
  section.pt-24 { padding-top: 5rem !important; }      /* district hero */
  main.pt-24 { padding-top: 4.5rem !important; }        /* page.php shell */
  main.pt-24 > .py-12 { padding-top: 1.5rem !important; } /* page.php inner */
}

/* ── G5: Sticky bottom CTA bars — reveal after the hero ───────
   .tp-sticky-cta (district + TN-hub templates) rendered from page
   load, stacking a 4th CTA into viewport 1. Mirror the blog bar's
   behaviour: hidden until the user scrolls past ~80% of the first
   viewport (JS in footer.php adds .is-visible). If JS fails, the
   bar simply stays hidden — the hero CTAs remain. */
@media (max-width: 767px) {
  .tp-sticky-cta {
    transform: translateY(120%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .tp-sticky-cta.is-visible { transform: translateY(0); }
}

/* ── G5: WhatsApp demoted to outline in district hero (mobile) ─
   Viewport 1 held two competing solid full-width CTAs (gold +
   green). Gold stays primary; WhatsApp becomes a ghost button.
   District hero only (.tp-hero-ctas) — service heroes keep the
   solid WA button because it is their sole primary action. */
@media (max-width: 640px) {
  .tp-hero-ctas a[href*="wa.me"] {
    background: transparent !important;
    border: 1.5px solid #25d366 !important;
    color: #2fe873 !important;   /* 7.9:1 on #0a192f */
    box-shadow: none !important;
  }
  .tp-hero-ctas a[href*="wa.me"] svg { stroke: #2fe873; }
}

/* ── G6: Header scrim — stop text bleeding around the nav pill ─
   The floating pill leaves transparent gutters where article text
   scrolls through at full contrast. A soft scrim behind the header
   zone keeps the pill readable without boxing it in. */
.tp-header-scrim {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 5.5rem;
  pointer-events: none;
  z-index: 640; /* just beneath the header pill */
  background: linear-gradient(to bottom,
    rgba(10,25,47,0.94) 0%,
    rgba(10,25,47,0.82) 55%,
    rgba(10,25,47,0) 100%);
}

/* ── G7: Legibility floor for micro-type ──────────────────────
   9–10px arbitrary utilities (ticker labels, eyebrows, badges)
   fall below any sensible mobile floor. Lift to 11px; layouts
   with single-line pills tolerate +1–2px without wrapping. */
.text-\[9px\], .text-\[10px\] { font-size: 0.6875rem !important; }

/* ── G8: One breadcrumb grammar everywhere ────────────────────
   Central version of the rule the district template carries
   inline, so page-level templates (e.g. 2026 results) can't fall
   back to the global deep-blue anchor colour on navy. */
.tp-breadcrumb, .tp-breadcrumb span { color: var(--slate-300); }
.tp-breadcrumb a { color: var(--slate-300); text-decoration: none; }
.tp-breadcrumb a:hover { color: #ffffff; }

/* G14 (blog filter fade): already handled by home.php's own
   .tp-filter-bar::after rule — no duplicate here. */

/* ── G15: No underlines inside solid CTA buttons ──────────────
   Case-studies hero CTA rendered underlined (fix previously
   applied per-template; this is the global version). */
a.bg-brand-accent,
a[class*="bg-brand-accent"],
.tp-hero-ctas a,
a.tp-sticky-cta-btn,
.tp-sticky-cta a {
  text-decoration: none !important;
}

/* ── G12 (reviewed, deliberately unchanged) ───────────────────
   body, body * { font-family: … } above is a bulldozer, but it is
   what keeps legacy inline font-family values in stored content
   (Public Sans, Georgia, Geist remnants) from resurfacing. All
   brand exceptions (JetBrains Mono, Material Symbols, Tamil) win
   via class specificity or !important. Do NOT narrow it without
   auditing stored content for inline font-family first. */