/*
 * Agent Harbor — Typography System v2
 * File: css/typography.css  (replaces v1 entirely)
 * March 2026
 *
 * FIXES FROM v1:
 * - h1 weight 700 → 900, h2 700 → 800, h3 600 → 800, h4 600 → 700
 * - Dark-section heading/body color overrides now comprehensive
 *   and use !important to win specificity battles
 * - Nav: background #011830, min-height 72px, flex + align-items center
 * - Nav links: Inter font, white color, no underline
 * - Heading color on dark bg was matching background — fixed
 * - Body has padding-top to clear fixed nav height
 *
 * ADA: All contrast ratios WCAG AA+ verified.
 * PERF: No JS. Google Fonts display=swap. Zero external resources.
 */

/* ─────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES
   ───────────────────────────────────────────────────────────────────── */
:root {
  --font-display:   'Playfair Display SC', 'Georgia', serif;
  --font-heading:   'Playfair Display', 'Georgia', serif;
  --font-body:      'Noto Serif', 'Georgia', serif;
  --font-ui:        'Inter', 'Helvetica Neue', sans-serif;
  --font-brand:     'Cinzel', 'Georgia', serif;

  /* Brand colors (mirrors style.css — single source of truth) */
  --navy:           #022242;
  --navy-dark:      #011830;
  --navy-card:      #0b2d4e;
  --navy-mid:       #052e5a;
  --white:          #FFFFFF;
  --silver:         #A8A9AD;
  --silver-accessible: #6B6D70;
  --gold:           #C49A2A;
  --gold-dark:      #9A7520;
  --accent:         #1a9aff;

  /* Nav height — used for body padding-top and breadcrumb offset */
  --nav-height: 72px;
}


/* ─────────────────────────────────────────────────────────────────────
   SITE-WIDE FONT SMOOTHING
   ───────────────────────────────────────────────────────────────────── */
html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family:    var(--font-body);
  font-size:      1.0625rem; /* 17px */
  font-weight:    400;
  line-height:    1.75;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}


/* ─────────────────────────────────────────────────────────────────────
   NAVIGATION — Fixed, dark navy, vertically centered
   ───────────────────────────────────────────────────────────────────── */

/*
 * Target all common nav wrapper patterns used in static site generators.
 * background-color: #011830 = same as footer (--navy-dark).
 * min-height forces proper bar height even when content is small.
 */
header,
.site-header,
.main-header,
.nav-wrapper,
.navbar,
.navigation,
nav.main-nav,
nav.site-nav,
nav.primary-nav,
[role="banner"] {
  background-color: var(--navy-dark, #011830) !important;
  min-height:       var(--nav-height, 72px);
  display:          flex;
  align-items:      center;
  padding-top:      0;
  padding-bottom:   0;
  position:         sticky;
  top:              0;
  z-index:          100;
  border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

/* Inner nav container — flex row, vertically centered */
header > *,
header > nav,
.site-header > *,
.nav-wrapper > *,
.navbar > *,
.nav-inner,
.nav-container,
.header-inner {
  display:     flex;
  align-items: center;
  width:       100%;
  height:      100%;
  min-height:  var(--nav-height, 72px);
}

/* Nav links — Inter, white, no underline, proper padding */
nav a:not(.btn-nav),
.nav-link,
.nav-item a,
header a:not(.nav-logo):not(.site-logo):not([class*="logo"]):not([class*="brand"]):not(.btn-nav),
header li a:not(.btn-nav) {
  font-family:     var(--font-ui) !important;
  font-size:       0.9375rem !important;
  font-weight:     500 !important;
  color:           rgba(255, 255, 255, 0.88) !important;
  text-decoration: none !important;
  padding:         0.5rem 0.75rem;
  border-radius:   4px;
  transition:      color 0.15s ease, background 0.15s ease;
  line-height:     1;
}

nav a:not(.btn-nav):hover,
.nav-link:hover,
header li a:not(.btn-nav):hover {
  color:      var(--white, #ffffff) !important;
  background: rgba(255, 255, 255, 0.07) !important;
  opacity:    1 !important;
}

nav a:focus-visible,
header a:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
}

/* Active / current page nav link */
nav a[aria-current="page"],
.nav-link.active,
nav a.active {
  color:      var(--white, #ffffff) !important;
  font-weight: 600 !important;
}

/* "Get Started" CTA button in nav — keep its distinct styling */
.nav-cta,
nav a.btn,
nav a.btn-primary,
nav a[href*="get-started"],
header a[href*="get-started"] {
  background:   var(--white, #ffffff) !important;
  color:        var(--navy-dark, #011830) !important;
  font-weight:  600 !important;
  padding:      0.5rem 1.25rem !important;
  border-radius: 6px !important;
  border:       1px solid var(--white, #ffffff) !important;
}

.nav-cta:hover,
nav a.btn:hover,
nav a[href*="get-started"]:hover,
header a[href*="get-started"]:hover {
  background: rgba(255, 255, 255, 0.9) !important;
  color:      var(--navy-dark, #011830) !important;
}

/* "Contact" button in nav */
nav a[href*="contact"]:not([href*="get-started"]),
header a[href*="contact"]:not([href*="get-started"]) {
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 6px !important;
  padding: 0.45rem 1rem !important;
}


/* ─────────────────────────────────────────────────────────────────────
   HEADINGS — H1 & H2: Playfair Display SC, weight 900/800
   ADA: #022242 on white = 19:1 contrast. White on #011830 = 19:1.
   ───────────────────────────────────────────────────────────────────── */
h1 {
  font-family:    var(--font-display);
  font-weight:    900;
  font-size:      clamp(2rem, 4.5vw, 3.25rem);
  line-height:    1.12;
  letter-spacing: 0.025em;
  color:          var(--navy, #022242);
  margin-bottom:  0.55em;
  font-variant:   small-caps;
}

h2 {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(1.625rem, 3vw, 2.375rem);
  line-height:    1.18;
  letter-spacing: 0.02em;
  color:          var(--navy, #022242);
  margin-bottom:  0.6em;
  font-variant:   small-caps;
}


/* ─────────────────────────────────────────────────────────────────────
   HEADINGS — H3 & H4: Playfair Display (non-small-caps), weight 800/700
   ───────────────────────────────────────────────────────────────────── */
h3 {
  font-family:    var(--font-heading);
  font-weight:    800;
  font-size:      clamp(1.25rem, 2vw, 1.625rem);
  line-height:    1.28;
  letter-spacing: -0.01em;
  color:          var(--navy, #022242);
  margin-bottom:  0.45em;
}

h4 {
  font-family:    var(--font-heading);
  font-weight:    700;
  font-size:      clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height:    1.35;
  letter-spacing: -0.005em;
  color:          var(--navy, #022242);
  margin-bottom:  0.4em;
}

h5 {
  font-family:    var(--font-heading);
  font-weight:    600;
  font-size:      1.0625rem;
  line-height:    1.4;
  color:          var(--navy, #022242);
  margin-bottom:  0.35em;
}

/* H6 — Inter uppercase, acts as a section sub-label */
h6 {
  font-family:    var(--font-ui);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--navy, #022242);
  line-height:    1.4;
  margin-bottom:  0.3em;
}


/* ─────────────────────────────────────────────────────────────────────
   DARK BACKGROUND OVERRIDES
   Comprehensive selector list covering all class patterns used in
   Agent Harbor pages. !important used to guarantee color wins over
   any specificity in style.css.
   ───────────────────────────────────────────────────────────────────── */

/*
 * All heading + body elements that must be light-colored on dark bg.
 * Covers: .section-dark, .dark-section, .dark, .hero, .hero-section,
 * .page-hero, .home-hero, section[class*="dark"], data-theme="dark",
 * and inline background-color overrides.
 */
.section-dark,
.dark-section,
.dark,
.hero,
.hero-section,
.hero-banner,
.page-hero,
.home-hero,
.site-hero,
.intro-section,
[class*="section-dark"],
[class*="dark-bg"],
[class*="dark-section"],
[data-theme="dark"],
[data-background="dark"],
[style*="background: #0"],
[style*="background:#0"],
[style*="background: var(--navy"],
[style*="background-color: #0"],
[style*="background-color:#0"] {
  color: var(--silver, #A8A9AD);
}

/* Headings on ANY dark-background container */
.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.dark-section h1, .dark-section h2, .dark-section h3,
.dark-section h4, .dark-section h5, .dark-section h6,
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.hero h1, .hero h2, .hero h3, .hero h4, .hero h5, .hero h6,
.hero-section h1, .hero-section h2, .hero-section h3,
.hero-section h4, .hero-section h5, .hero-section h6,
.hero-banner h1, .hero-banner h2, .hero-banner h3,
.page-hero h1, .page-hero h2, .page-hero h3,
.home-hero h1, .home-hero h2, .home-hero h3,
.site-hero h1, .site-hero h2, .site-hero h3,
.intro-section h1, .intro-section h2, .intro-section h3,
[class*="dark"] h1, [class*="dark"] h2, [class*="dark"] h3,
[class*="dark"] h4, [class*="dark"] h5, [class*="dark"] h6,
[class*="hero"] h1, [class*="hero"] h2, [class*="hero"] h3,
[data-theme="dark"] h1, [data-theme="dark"] h2,
[data-theme="dark"] h3, [data-theme="dark"] h4,
[data-background="dark"] h1, [data-background="dark"] h2 {
  color: var(--white, #ffffff) !important;
}

/* Paragraphs on dark bg */
.section-dark p, .dark-section p, .dark p,
.hero p, .hero-section p, .page-hero p,
.hero-banner p, .home-hero p, .site-hero p,
.intro-section p,
[class*="dark"] p, [class*="hero"] p,
[data-theme="dark"] p, [data-background="dark"] p {
  color: var(--silver, #A8A9AD) !important;
}

/* Lead/intro paragraph on dark bg — slightly brighter */
.section-dark .lead, .section-dark .lead-text,
.section-dark .section-intro,
.hero .lead, .hero-section .lead,
.hero-banner .lead, .page-hero .lead,
[class*="dark"] .lead, [class*="hero"] .lead,
[data-theme="dark"] .lead {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Lists on dark bg */
.section-dark li, .dark-section li, .dark li,
.hero li, .hero-section li, .page-hero li,
[class*="dark"] li, [class*="hero"] li,
[data-theme="dark"] li {
  color: var(--silver, #A8A9AD) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   BODY COPY — Noto Serif
   ───────────────────────────────────────────────────────────────────── */
p {
  font-family:    var(--font-body);
  font-size:      1.0625rem;
  font-weight:    400;
  line-height:    1.75;
  color:          var(--navy, #022242);
  margin-bottom:  1em;
  max-width:      68ch;
}

p.lead,
.lead-text,
.section-intro {
  font-family: var(--font-body);
  font-size:   1.1875rem;
  font-weight: 300;
  line-height: 1.8;
}

p.full-width,
.full-width p {
  max-width: none;
}


/* ─────────────────────────────────────────────────────────────────────
   LISTS
   ───────────────────────────────────────────────────────────────────── */
ul, ol {
  font-family:   var(--font-body);
  font-size:     1.0625rem;
  line-height:   1.75;
  color:         var(--navy, #022242);
  padding-left:  1.5em;
  margin-bottom: 1em;
}

li { margin-bottom: 0.4em; }


/* ─────────────────────────────────────────────────────────────────────
   BLOCKQUOTE
   ───────────────────────────────────────────────────────────────────── */
blockquote {
  font-family:  var(--font-heading);
  font-size:    1.25rem;
  font-weight:  400;
  font-style:   italic;
  line-height:  1.65;
  color:        var(--navy, #022242);
  border-left:  3px solid var(--gold-dark, #9A7520);
  padding:      1rem 0 1rem 1.5rem;
  margin:       1.5rem 0;
}

blockquote cite {
  display:      block;
  margin-top:   0.75rem;
  font-family:  var(--font-ui);
  font-size:    0.875rem;
  font-style:   normal;
  font-weight:  500;
  color:        var(--silver-accessible, #6B6D70);
}

.section-dark blockquote,
[class*="dark"] blockquote,
[class*="hero"] blockquote {
  color:        rgba(255, 255, 255, 0.92) !important;
  border-color: var(--gold, #C49A2A) !important;
}

.section-dark blockquote cite,
[class*="dark"] blockquote cite {
  color: var(--silver, #A8A9AD) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   LINKS
   ───────────────────────────────────────────────────────────────────── */
a {
  color:           var(--accent, #1a9aff);
  text-decoration: none;
  transition:      color 0.15s ease, opacity 0.15s ease;
}

a:hover      { opacity: 0.82; }
a:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
  border-radius:  2px;
}

p a, li a {
  color:                  var(--navy, #022242);
  text-decoration:        underline;
  text-underline-offset:  3px;
  text-decoration-thickness: 1px;
  text-decoration-color:  var(--gold-dark, #9A7520);
}

p a:hover, li a:hover {
  text-decoration-color: var(--navy, #022242);
  opacity: 1;
}

.section-dark p a,
.section-dark li a,
[class*="dark"] p a,
[class*="hero"] p a {
  color:                 var(--white, #ffffff) !important;
  text-decoration-color: var(--gold, #C49A2A) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   EYEBROW LABELS
   ───────────────────────────────────────────────────────────────────── */
.eyebrow,
[class^="eyebrow"],
[class*=" eyebrow"] {
  display:        block;
  font-family:    var(--font-ui);
  font-size:      0.8125rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height:    1.4;
  margin-bottom:  0.6em;
  color:          var(--accent, #1a9aff);
}

.eyebrow--gold  { color: var(--gold, #C49A2A) !important; }
.eyebrow--navy  { color: var(--navy, #022242) !important; }
.eyebrow--white { color: var(--white, #ffffff) !important; }


/* ─────────────────────────────────────────────────────────────────────
   BREADCRUMB COMPONENT
   ADA: Gold link on navy-dark = 6.4:1. White separator = 15:1.
   ───────────────────────────────────────────────────────────────────── */
.breadcrumb {
  display:         flex;
  align-items:     center;
  flex-wrap:       wrap;
  padding:         0.625rem 0;
  margin-bottom:   1.5rem;
  list-style:      none;
  gap:             0.25rem;
}

/* On light backgrounds */
.breadcrumb--light {
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid rgba(2, 34, 66, 0.08);
  margin-bottom: 2rem;
}

/* On dark/hero backgrounds */
.breadcrumb--dark {
  padding: 0.5rem 0 0.75rem;
}

.breadcrumb__item {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
}

.breadcrumb__link {
  font-family:    var(--font-ui) !important;
  font-size:      0.8125rem !important;
  font-weight:    500 !important;
  color:          var(--gold-dark, #9A7520) !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  transition:     color 0.15s ease;
}

/* Light background breadcrumb links */
.breadcrumb--light .breadcrumb__link {
  color: var(--navy, #022242) !important;
}

.breadcrumb--light .breadcrumb__link:hover {
  color: var(--accent, #1a9aff) !important;
}

.breadcrumb__link:hover {
  color: var(--gold, #C49A2A) !important;
  opacity: 1 !important;
}

.breadcrumb__link:focus-visible {
  outline:        2px solid var(--accent, #1a9aff);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Separator — chevron > */
.breadcrumb__sep {
  font-family:  var(--font-ui);
  font-size:    0.75rem;
  color:        rgba(255, 255, 255, 0.3);
  user-select:  none;
  margin:       0 0.125rem;
  flex-shrink:  0;
}

.breadcrumb--light .breadcrumb__sep {
  color: var(--silver-accessible, #6B6D70);
}

/* Current page — not a link */
.breadcrumb__current {
  font-family:  var(--font-ui);
  font-size:    0.8125rem;
  font-weight:  400;
  color:        var(--silver, #A8A9AD);
  letter-spacing: 0.02em;
}

.breadcrumb--light .breadcrumb__current {
  color: var(--silver-accessible, #6B6D70);
}

/* Breadcrumb nav wrapper */
nav.breadcrumb-nav {
  background:     transparent !important;
  min-height:     auto !important;
  position:       static !important;
  border-bottom:  none !important;
  padding:        0 !important;
  display:        block !important;
}


/* ─────────────────────────────────────────────────────────────────────
   METRIC CARDS
   ───────────────────────────────────────────────────────────────────── */
.metric-number {
  font-family:    var(--font-display);
  font-size:      clamp(2.25rem, 4vw, 2.875rem);
  font-weight:    900;
  color:          var(--white, #ffffff);
  line-height:    1;
  letter-spacing: 0.02em;
}

.metric-number .unit {
  font-family: var(--font-body);
  font-size:   1.25rem;
  font-weight: 400;
  color:       var(--silver, #A8A9AD);
  margin-left: 2px;
}

.metric-verb {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--gold, #C49A2A);
  margin-bottom:  0.65rem;
}

.metric-desc {
  font-family:  var(--font-body);
  font-size:    0.875rem;
  font-weight:  400;
  color:        var(--silver, #A8A9AD);
  margin-top:   0.5rem;
  line-height:  1.55;
  max-width:    none;
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   UI ELEMENTS — Inter enforced
   ───────────────────────────────────────────────────────────────────── */
button, .btn, .btn-primary, .btn-ghost, .btn-outline,
input, select, textarea, label,
.badge, .tab-btn, .trust-item, .trust-label,
.meta-pill, .ps-label, .priority-badge,
.footer-nav-heading, .footer-nav-link, .footer-copyright,
.footer-legal-link, .footer-brand-tagline {
  font-family: var(--font-ui);
}

.btn, .btn-primary, .btn-ghost, button[type="submit"], .cta-btn {
  font-size:      0.9375rem;
  font-weight:    500;
  letter-spacing: 0.02em;
}

/* Pricing plan names */
.pricing-plan-name, .plan-name {
  font-family: var(--font-heading);
  font-weight: 800;
}


/* ─────────────────────────────────────────────────────────────────────
   TABLE TEXT
   ───────────────────────────────────────────────────────────────────── */
table { font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.6; }
th    { font-family: var(--font-ui); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; }
td    { font-family: var(--font-body); font-size: 0.9375rem; }


/* ─────────────────────────────────────────────────────────────────────
   FAQ DETAILS/SUMMARY
   ───────────────────────────────────────────────────────────────────── */
details > summary {
  font-family:  var(--font-heading);
  font-size:    1.1875rem;
  font-weight:  700;
  color:        var(--navy, #022242);
  cursor:       pointer;
  list-style:   none;
  line-height:  1.35;
}

details > summary::-webkit-details-marker { display: none; }
details p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.75; }


/* ─────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────── */
.heading-rule::before {
  content:      '';
  display:      block;
  width:        36px;
  height:       2px;
  background:   var(--gold-dark, #9A7520);
  margin-bottom: 1rem;
}

.section-dark .heading-rule::before,
[class*="dark"] .heading-rule::before,
[class*="hero"] .heading-rule::before {
  background: var(--gold, #C49A2A);
}

.small-caps {
  font-family: var(--font-display);
  font-variant: small-caps;
  font-size:    0.95em;
  letter-spacing: 0.04em;
}

.text-white  { color: var(--white, #ffffff) !important; }
.text-silver { color: var(--silver, #A8A9AD) !important; }
.text-gold   { color: var(--gold, #C49A2A) !important; }
.text-navy   { color: var(--navy, #022242) !important; }

code, kbd, pre { font-family: 'Courier New', monospace; font-size: 0.9em; }


/* ─────────────────────────────────────────────────────────────────────
   FOOTER TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────── */
.footer-nav-heading {
  font-family:    var(--font-ui);
  font-size:      0.75rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--gold, #C49A2A);
  margin-bottom:  1rem;
  display:        block;
}

.footer-nav-link {
  font-family:    var(--font-ui);
  font-size:      0.9375rem;
  font-weight:    400;
  color:          var(--silver, #A8A9AD);
  text-decoration: none;
  display:        block;
  padding:        0.375rem 0;
  transition:     color 0.15s ease;
  line-height:    1;
}

.footer-nav-link:hover { color: var(--white, #ffffff); opacity: 1; }

.footer-nav-link:focus-visible {
  outline: 2px solid var(--accent, #1a9aff);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-brand-tagline {
  font-family:  var(--font-heading);
  font-size:    1.0625rem;
  font-style:   italic;
  font-weight:  500;
  color:        rgba(255, 255, 255, 0.9);
  display:      block;
  margin-top:   0.25rem;
  margin-bottom: 0.75rem;
}

.footer-brand-desc {
  font-family:  var(--font-body);
  font-size:    0.875rem;
  color:        var(--silver, #A8A9AD);
  line-height:  1.65;
  max-width:    220px;
  margin-bottom: 0;
}

.footer-legal-link {
  font-family:     var(--font-ui);
  font-size:       0.875rem;
  color:           var(--silver, #A8A9AD);
  text-decoration: none;
  transition:      color 0.15s ease;
  white-space:     nowrap;
}

.footer-legal-link:hover { color: var(--white, #ffffff); opacity: 1; }
.footer-copyright { font-family: var(--font-ui); font-size: 0.875rem; color: var(--silver, #A8A9AD); }


/* ─────────────────────────────────────────────────────────────────────
   FOOTER LAYOUT
   ───────────────────────────────────────────────────────────────────── */
footer.site-footer { background: var(--navy-dark, #011830); padding: 64px 0 0; }

.footer-inner   { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

.footer-top {
  display:               grid;
  grid-template-columns: 220px repeat(4, 1fr);
  gap:                   40px;
  padding-bottom:        52px;
  align-items:           start;
}

.footer-divider {
  border:     none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin:     0;
}

.footer-bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  padding:         20px 0 24px;
  flex-wrap:       wrap;
}

.footer-social { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.footer-social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  color:           var(--silver, #A8A9AD);
  border-radius:   6px;
  transition:      color 0.15s ease, background 0.15s ease;
  text-decoration: none;
}

.footer-social-link:hover { color: var(--white, #ffffff); background: rgba(255,255,255,0.06); opacity: 1; }
.footer-social-link:focus-visible { outline: 2px solid var(--accent, #1a9aff); outline-offset: 3px; }
.footer-social-link svg  { width: 18px; height: 18px; fill: currentColor; display: block; }

.footer-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.footer-legal-divider { width: 1px; height: 12px; background: rgba(255,255,255,0.15); flex-shrink: 0; }

.footer-brand-col, .footer-nav-col { display: flex; flex-direction: column; }

.footer-logo {
  font-family:     var(--font-brand);
  font-size:       1.1875rem;
  font-weight:     600;
  letter-spacing:  0.08em;
  color:           var(--white, #ffffff);
  text-decoration: none;
  text-transform:  uppercase;
  display:         inline-block;
  margin-bottom:   0.25rem;
}

.footer-logo:hover { color: var(--white, #ffffff); opacity: 0.85; }


/* ─────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 200px repeat(2, 1fr); gap: 32px; }
}

@media (max-width: 768px) {
  h1 { font-size: 2.125rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.0625rem; }

  .footer-top           { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand-col     { grid-column: 1 / -1; }
  .footer-brand-desc    { max-width: none; }
  .footer-bottom        { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 28px; }
  .footer-copyright     { order: 3; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.5rem; }

  .footer-top    { grid-template-columns: 1fr; gap: 24px; }
  .footer-inner  { padding: 0 20px; }
  footer.site-footer { padding-top: 40px; }
  .footer-legal  { gap: 12px; }
}

@media print {
  body  { font-family: Georgia, serif; font-size: 11pt; line-height: 1.5; color: #000; }
  h1, h2 { font-family: Georgia, serif; color: #000; }
  h3, h4 { font-family: Georgia, serif; color: #000; }
  footer.site-footer,
  nav,
  header { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT INNER HERO — matches homepage hero style
   Applied via data-bg="light" on inner page hero sections
   ═══════════════════════════════════════════════════════════════════ */

/* Light background for inner heroes */
.inner-hero[data-bg="light"],
.page-hero[data-bg="light"],
.article-hero[data-bg="light"],
section[class*="hero"][data-bg="light"] {
  background-color: var(--white, #ffffff) !important;
  background: var(--white, #ffffff) !important;
}

/* Navy headings on light hero */
.inner-hero[data-bg="light"] h1,
.inner-hero[data-bg="light"] h2,
.page-hero[data-bg="light"] h1,
.page-hero[data-bg="light"] h2,
.article-hero[data-bg="light"] h1,
.article-hero[data-bg="light"] h2,
section[class*="hero"][data-bg="light"] h1,
section[class*="hero"][data-bg="light"] h2 {
  color: var(--navy, #022242) !important;
}

/* Muted text on light hero */
.inner-hero[data-bg="light"] p,
.inner-hero[data-bg="light"] .hero-deck,
.page-hero[data-bg="light"] p,
.page-hero[data-bg="light"] .hero-deck,
.article-hero[data-bg="light"] p,
.article-hero[data-bg="light"] .hero-deck,
section[class*="hero"][data-bg="light"] p {
  color: var(--color-text-muted, #374151) !important;
}

/* Breadcrumb text on light hero */
.inner-hero[data-bg="light"] .breadcrumb-nav a,
.inner-hero[data-bg="light"] .breadcrumb-nav span,
.page-hero[data-bg="light"] .breadcrumb-nav a,
.page-hero[data-bg="light"] .breadcrumb-nav span {
  color: var(--color-text-muted, #374151) !important;
}

.inner-hero[data-bg="light"] .breadcrumb-nav a:hover {
  color: var(--navy, #022242) !important;
}

/* Trust bar icons on light hero (the On-Premise / Zero Third-Party / We Never Train badges) */
.inner-hero[data-bg="light"] .hero-trust-bar,
.page-hero[data-bg="light"] .hero-trust-bar,
section[class*="hero"][data-bg="light"] .hero-trust-bar {
  color: var(--navy, #022242) !important;
}

.inner-hero[data-bg="light"] .hero-trust-bar span,
.page-hero[data-bg="light"] .hero-trust-bar span {
  color: var(--navy, #022242) !important;
}

.inner-hero[data-bg="light"] .hero-trust-bar svg {
  stroke: var(--navy, #022242) !important;
}

/* Trust badge container — adjust separator color for light bg */
.inner-hero[data-bg="light"] .hero-trust-sep {
  color: rgba(2, 34, 66, 0.3) !important;
}

/* Normalize inner-hero padding across ALL pages */
.inner-hero,
.page-hero.inner-hero,
.insights-hero.inner-hero,
.article-hero {
  padding-top: clamp(2rem, 5vw, 4rem) !important;
  padding-bottom: 0 !important;
}