/* ============================================
   JORDAN GALL — SIGNAL & SHIELD v3
   Clean blue-collar design system
   ============================================ */
:root {
  /* Core palette */
  --navy: #0B1F3A;
  --white: #FFFFFF;
  --off-white: #F8F9FA;
  --light-grey: #E9ECEF;
  --mid-grey: #ADB5BD;
  --ink: #212529;
  --muted: #6C757D;
  /* Accent - steel blue */
  --steel: #1B4F85;
  --steel-light: #E8F0FE;
  --coral: #FF6B4A;
  --coral-soft: #FF8A74;
  --lilac: #6B52A5;
  --cyan: #0982B9;
  --space-4xl: 96px;
  --e8-dark: #0A2E2A;
  --e8-accent: #16B39A;
  --e8-accent-dark: #0E8C7F;
  --e8-gold: #F4B740;
  --e8-soft: #E8F7F3;
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', ui-monospace, Consolas, monospace;
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.08);
}
/* ============================================ RESET & BASE ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; color: var(--ink); background: var(--white); }
img, svg { max-width: 100%; display: block; }
a { color: var(--steel); text-decoration: none; }
a:hover { text-decoration: underline; color: #0D3B6F; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 700; color: var(--navy); text-align: center; }
p { text-align: center; }
/* ============================================ LAYOUT UTILITIES ============================================ */
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-lg); }
.section-md { padding: var(--space-3xl) 0; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.mt-sm { margin-top: var(--space-md); }
.mt-md { margin-top: var(--space-xl); }
.mt-lg { margin-top: var(--space-2xl); }
.mt-xl { margin-top: var(--space-2xl); }
.mb-sm { margin-bottom: var(--space-md); }
.mb-md { margin-bottom: var(--space-xl); }
/* Section heading block — centred by default */
.section-head { text-align: center; max-width: 760px; margin: 0 auto var(--space-2xl); }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; }
.section-head p { color: var(--muted); font-size: 17px; max-width: 620px; margin: var(--space-sm) auto 0; text-align: center; }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel); display: block; margin-bottom: var(--space-sm); text-align: center; }
/* ============================================ NAVIGATION ============================================ */
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--white); border-bottom: 1px solid var(--light-grey); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg); max-width: 1200px; margin: 0 auto; }
.brand { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { font-weight: 800; letter-spacing: .05em; color: var(--navy); font-size: 17px; text-transform: uppercase; }
.brand-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--steel); letter-spacing: .6px; opacity: .85; }
.nav-links { display: flex; align-items: center; gap: 24px; list-style: none; padding: 0; margin: 0; z-index: 101; }
.nav-links a { color: var(--navy); font-weight: 600; font-size: 14.5px; padding: 8px 0; border-bottom: 2px solid transparent; transition: all .15s ease; }
.nav-links a:hover, .nav-links a.active { color: var(--steel); border-bottom-color: var(--steel); text-decoration: none; }
.nav-links .btn-primary, .nav-links a.btn-primary { color: var(--white) !important; border-bottom: none; }
/* Mobile nav toggle (burger) */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: all .2s ease; }
@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
    background: var(--white); flex-direction: column; align-items: flex-start;
    padding: 80px 32px 32px; gap: 20px; box-shadow: -4px 0 16px rgba(0,0,0,.1);
    transition: right .3s ease; z-index: 101;
  }
  .nav-links.open { right: 0; }
}
/* ============================================ BUTTONS ============================================ */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; font-weight: 600; font-size: 15px; border-radius: 4px; border: none; cursor: pointer; transition: all .15s ease; text-decoration: none; }
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: #08162B; transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; color: var(--white); }
.btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid rgba(0,0,0,.2); }
.btn-ghost:hover { border-color: var(--steel); color: var(--steel); text-decoration: none; }
.btn-lg { padding: 16px 32px; font-size: 16px; }
/* ============================================ HERO ============================================ */
.hero { background: var(--navy); color: var(--white); }
.hero-inner { padding: var(--space-4xl) 0; text-align: center; }
.hero-inner h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--white); line-height: 1.12; margin-bottom: var(--space-md); }
.hero-inner h1 span { display: block; font-size: .6em; font-weight: 400; color: rgba(255,255,255,.75); margin-top: var(--space-md); }
.hero-inner p { font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto var(--space-xl); text-align: center; }
.hero-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.hero .btn-primary, .cta-panel .btn-primary { background: var(--white); color: var(--navy); }
.hero .btn-primary:hover, .cta-panel .btn-primary:hover { background: var(--off-white); color: var(--navy); box-shadow: var(--shadow-md); }
/* ============================================ STATS ============================================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); padding-top: var(--space-lg); }
.stat-card { background: rgba(255,255,255,.06); border-left: 3px solid var(--white); padding: var(--space-xl) var(--space-lg); text-align: left; }
.stat-coral { border-left-color: #FF8A74; }
.stat-card h2 { font-size: 2.5rem; color: var(--white); margin-bottom: var(--space-xs); font-weight: 800; text-align: left; }
.stat-coral h2 { color: #FF8A74; }
.stat-card p { color: rgba(255,255,255,.7); font-size: .9rem; text-align: left; }
.source-note { color: rgba(255,255,255,.4) !important; font-size: .8rem !important; padding-top: var(--space-lg); text-align: center; }
@media (max-width: 600px) { .stats-grid { grid-template-columns: 1fr; } }
/* ============================================ SERVICE CARDS ============================================ */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.service-card { background: var(--off-white); border: 1.5px solid var(--light-grey); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); transition: all .2s ease; text-align: left; }
.service-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.service-card--primary { border-color: var(--navy); background: var(--off-white); }
.service-icon { width: 40px; height: 40px; background-color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.service-icon svg { width: 24px; height: 24px; fill: var(--white); }
.service-card h3 { font-size: 20px; text-align: left; }
.pitch { color: var(--muted); font-style: italic; line-height: 1.5; text-align: left; }
.service-card ul { text-align: left; }
.service-card li { padding: 6px 0 6px 22px; position: relative; text-align: left; }
.service-card li::before { content: '—'; position: absolute; left: 0; color: var(--navy); font-weight: 700; }
.link-arrow { color: var(--steel); font-weight: 600; margin-top: auto; padding-top: var(--space-md); display: inline-block; }
.link-arrow:hover { color: #0D3B6F; }
/* ============================================ WHY ME / VALUES ============================================ */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.why-tile { background: var(--white); border-left: 3px solid var(--navy); padding: var(--space-xl); text-align: left; }
.why-tile h3 { text-align: left; font-size: 18px; margin-bottom: var(--space-xs); }
.why-tile p { text-align: left; color: var(--muted); }
.why-cyan { border-left-color: var(--cyan); }
.why-lilac { border-left-color: var(--lilac); }
.why-coral { border-left-color: var(--coral); }
/* ============================================ CTA PANEL ============================================ */
.cta-panel { background: var(--navy); color: var(--white); padding: var(--space-3xl) var(--space-2xl); text-align: center; border-radius: 4px; }
.cta-panel h2 { color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: .08em; margin-bottom: var(--space-xs); text-transform: uppercase; }
.cta-panel h3 { color: var(--white); font-size: 26px; margin-bottom: var(--space-sm); }
.cta-panel p { color: rgba(255,255,255,.8); font-size: 1rem; margin: 0 auto var(--space-lg); max-width: 560px; }
.cta-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
/* ============================================ POST LIST / LATEST ============================================ */
.post-list { display: flex; flex-direction: column; gap: var(--space-md); }
.post-card { background: var(--white); padding: var(--space-lg) var(--space-xl); border: 1.5px solid var(--light-grey); display: flex; align-items: center; gap: var(--space-md); transition: all .2s ease; text-align: left; }
.post-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.post-card h3 { text-align: left; margin: 0; }
.post-card h3 a { color: var(--navy); font-size: 17px; }
.post-card h3 a:hover { color: var(--steel); text-decoration: none; }
.post-date { margin-left: auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }
@media (max-width: 600px) { .post-card { flex-direction: column; align-items: flex-start; } .post-date { margin-left: 0; margin-top: var(--space-xs); } }
/* ============================================ PRICING / COMPARISON ============================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--space-lg); align-items: stretch; }
.price-card { background: var(--white); border: 1.5px solid var(--light-grey); padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); position: relative; transition: all .2s ease; text-align: left; }
.price-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.price-card--featured { border-color: var(--navy); background: var(--off-white); }
.price-badge { position: absolute; top: -12px; left: var(--space-xl); background: var(--navy); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: .05em; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; }
.price-card h3 { font-size: 22px; text-align: left; }
.price-card .price { font-size: 2rem; font-weight: 800; color: var(--navy); text-align: left; }
.price-card .price small { display: block; font-size: .8rem; font-weight: 500; color: var(--muted); }
.price-card .pitch { text-align: left; }
.price-card ul { list-style: none; padding-left: 0; margin: 0; text-align: left; flex: 1; }
.price-card li { padding: 8px 0 8px 22px; position: relative; }
.price-card li::before { content: "\2014"; position: absolute; left: 0; color: var(--navy); font-weight: 700; }
.price-card .btn { margin-top: auto; }
.table-scroll { overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; margin-top: var(--space-2xl); font-size: .95rem; }
.compare-table th, .compare-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--light-grey); }
.compare-table thead th { background: var(--navy); color: var(--white); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.compare-table tbody tr:nth-child(even) { background: var(--off-white); }
.compare-table td:first-child, .compare-table th:first-child { font-weight: 600; color: var(--navy); }
@media (max-width: 600px) { .compare-table { font-size: .82rem; } }
/* ============================================ ESSENTIAL EIGHT ============================================ */
.e8-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--space-md); }
.e8-card { background: var(--white); border-left: 3px solid var(--navy); padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); transition: all .2s ease; text-align: left; }
.e8-card:hover { box-shadow: var(--shadow-sm); }
.e8-card h3 { font-size: 17px; text-align: left; margin: 0; }
.e8-card p { color: var(--muted); font-size: .92rem; text-align: left; margin: 0; }
.e8-num { font-family: var(--font-mono); font-size: 12px; color: var(--steel); font-weight: 600; letter-spacing: .05em; text-align: left; }
.maturity-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-lg); }
.maturity-card { background: var(--white); border-left: 3px solid var(--navy); padding: var(--space-xl); text-align: left; }
.maturity-card.ml-0 { border-left-color: var(--coral); }
.maturity-card.ml-1 { border-left-color: var(--steel); }
.maturity-card.ml-2 { border-left-color: var(--lilac); }
.maturity-card.ml-3 { border-left-color: var(--navy); }
.maturity-card h3 { text-align: left; }
.maturity-card p { color: var(--muted); text-align: left; }
.callout { background: var(--steel-light); border-left: 3px solid var(--steel); padding: var(--space-lg) var(--space-xl); border-radius: 4px; text-align: left; }
.callout h3 { text-align: left; color: var(--navy); }
.callout p { color: var(--ink); text-align: left; margin-top: var(--space-xs); margin-bottom: var(--space-md); }
.callout--alert { background: #FFF5F1; border-left-color: var(--coral); }
.callout--e8 { background: var(--e8-soft); border-left-color: var(--e8-accent); }
.callout--e8 h3 { color: var(--e8-dark); }
/* Essential Eight theme */
.theme-e8 .hero { background: var(--e8-dark); }
.theme-e8 .site-footer { background: var(--e8-dark); }
.theme-e8 .cta-panel { background: var(--e8-dark); }
.theme-e8 .hero .btn-primary, .theme-e8 .cta-panel .btn-primary { background: var(--e8-gold); color: var(--e8-dark); }
.theme-e8 .hero .btn-primary:hover, .theme-e8 .cta-panel .btn-primary:hover { background: #ffca5a; color: var(--e8-dark); }
.theme-e8 .e8-card { border-left-color: var(--e8-accent); }
.theme-e8 .e8-num { color: var(--e8-accent-dark); }
.theme-e8 .why-cyan { border-left-color: var(--e8-accent); }
.theme-e8 .why-lilac { border-left-color: var(--e8-accent-dark); }
.theme-e8 .why-coral { border-left-color: var(--e8-gold); }
.theme-e8 .ml-1 { border-left-color: var(--e8-accent); }
.theme-e8 .ml-2 { border-left-color: var(--e8-accent-dark); }
.theme-e8 .ml-3 { border-left-color: var(--e8-dark); }
.theme-e8 .section-head h2 { color: var(--e8-dark); }
/* ============================================ HOW IT WORKS / FLOW ============================================ */
.flow { display: flex; align-items: flex-start; justify-content: center; gap: 0; flex-wrap: nowrap; margin-top: var(--space-2xl); }
.flow-step { flex: 1; text-align: center; padding: 0 var(--space-md); position: relative; max-width: 240px; }
.flow-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto var(--space-md); }
.flow-step h3 { font-size: 16px; margin-bottom: var(--space-xs); }
.flow-step p { color: var(--muted); font-size: .9rem; }
.flow-step:not(:last-child)::after { content: "\2192"; position: absolute; top: 20px; right: -10px; font-size: 26px; color: var(--mid-grey); line-height: 1; }
@media (max-width: 768px) { .flow { flex-direction: column; align-items: center; gap: var(--space-xl); } .flow-step { max-width: 320px; } .flow-step:not(:last-child)::after { content: "\2193"; top: auto; bottom: -28px; right: auto; left: 50%; transform: translateX(-50%); } }
/* ============================================ SCENARIO CARDS ============================================ */
.scenario-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-xl); }
.scenario-card { background: var(--white); border: 1.5px solid var(--light-grey); border-radius: 8px; padding: var(--space-xl); transition: all .2s ease; text-align: left; }
.scenario-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.scenario-title { font-size: 1.3rem; color: var(--navy); margin-bottom: var(--space-xs); line-height: 1.3; text-align: left; }
.scenario-tagline { color: var(--muted); font-size: 0.95rem; font-style: italic; margin-bottom: var(--space-md); text-align: left; }
.scenario-content h4 { font-size: 0.95rem; color: var(--navy); font-weight: 600; margin-bottom: var(--space-xs); margin-top: var(--space-md); text-align: left; }
.scenario-content ul { list-style: disc; padding-left: 20px; margin-bottom: var(--space-md); text-align: left; }
.scenario-content li { margin-bottom: 6px; color: var(--ink); text-align: left; }
@media (max-width: 768px) { .scenario-grid { grid-template-columns: 1fr; } }
/* ============================================ ABOUT PAGE ============================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-3xl); align-items: start; }
.about-portrait { aspect-ratio: 4/5; background: #E9ECEF center/cover no-repeat; border-radius: 0; }
.about-copy, .about-copy h2, .about-copy h3, .about-copy p { text-align: left; }
.about-copy h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: var(--space-md); }
.about-copy p { color: var(--ink); margin-bottom: var(--space-md); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-lg); margin-top: var(--space-xl); }
.value-card { background: var(--white); padding: var(--space-xl); border: 1.5px solid var(--light-grey); text-align: left; }
.value-card h3, .value-card p { text-align: left; }
.value-card .eyebrow { text-align: left; }
@media (max-width: 768px) { .about-grid { grid-template-columns: 1fr; } }
/* Contact form */
.contact-form { max-width: 620px; margin: 0 auto; }
.form-group { margin-bottom: var(--space-lg); text-align: left; }
.form-group label { display: block; font-weight: 600; margin-bottom: var(--space-xs); color: var(--navy); text-align: left; }
.form-group input, .form-group textarea { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(0,0,0,.15); border-radius: 4px; font-family: var(--font-sans); font-size: 15px; transition: border-color .15s ease; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--steel); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-status { margin-top: var(--space-md); font-weight: 600; }
/* ============================================ QUIZ / RISK CHECK ============================================ */
.quiz-container { max-width: 680px; margin: 0 auto; }
.quiz-progress { height: 3px; background: var(--light-grey); margin-bottom: var(--space-xl); }
.quiz-bar { height: 100%; background: var(--navy); transition: width .4s ease; }
.quiz-question { font-size: 20px; margin-bottom: var(--space-lg); color: var(--navy); text-align: center; }
.quiz-hint { color: var(--muted); font-size: .9rem; font-style: italic; margin-bottom: var(--space-xl); text-align: center; }
.quiz-actions { display: flex; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.result-score { background: var(--navy); color: var(--white); padding: 10px 18px; font-weight: 600; margin-bottom: var(--space-lg); display: inline-block; }
.answer-summary { text-align: left; }
.subscribe-form { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }
.subscribe-form input { flex: 1; min-width: 220px; padding: 12px 14px; border: 1.5px solid rgba(0,0,0,.15); border-radius: 4px; font-size: 15px; }
/* ============================================ BLOG / ARTICLE ============================================ */
.blog-grid { display: grid; gap: var(--space-lg); }
.blog-grid a.card-link { text-decoration: none; color: inherit; display: block; }
.blog-card { background: var(--white); padding: var(--space-lg) var(--space-xl); border: 1.5px solid var(--light-grey); transition: all .2s ease; text-align: left; }
.blog-card:hover { border-color: var(--steel); box-shadow: var(--shadow-sm); }
.blog-card h2 { text-align: left; font-size: 20px; margin-bottom: var(--space-xs); }
.blog-card p { text-align: left; color: var(--muted); }
.blog-card .article-meta { text-align: left; }
.article-pill { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: var(--space-sm); }
@media (max-width: 600px) { .blog-card { padding: var(--space-md); } .blog-card h2 { font-size: 18px; } }
.article { max-width: 760px; margin: 0 auto; }
.article-hero { background: var(--navy); color: var(--white); }
.article-hero h1 { color: var(--white); text-align: left; }
.article-hero .article-meta { color: rgba(255,255,255,.7); }
.article-cat { display: inline-block; background: rgba(255,255,255,.12); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; margin-bottom: var(--space-md); }
.article-meta { color: var(--muted); font-size: .9rem; margin-bottom: var(--space-lg); text-align: left; }
.article-body { text-align: left; }
.article-body h2, .article-body h3 { text-align: left; margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.article-body p { margin-bottom: var(--space-md); text-align: left; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: var(--space-md); text-align: left; }
.article-body ul { list-style: disc; } .article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 6px; text-align: left; }
.article-body img { border-radius: 8px; margin: var(--space-lg) 0; width: 100%; height: auto; }
.article-body blockquote { border-left: 3px solid var(--steel); padding-left: var(--space-md); color: var(--muted); font-style: italic; margin: var(--space-md) 0; text-align: left; }
.article-body code { background: var(--light-grey); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono); font-size: .9em; }
.back-link { display: inline-block; margin-bottom: var(--space-lg); color: var(--steel); font-weight: 600; }
.article-hero-img { width: 100%; max-height: 360px; object-fit: cover; border-radius: 8px; margin-top: var(--space-lg); }
/* ============================================ FOOTER ============================================ */
.site-footer { background: var(--navy); color: rgba(255,255,255,.7); padding-top: var(--space-3xl); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-3xl); margin-bottom: var(--space-2xl); }
.footer-brand .brand-mark { color: var(--white); }
.footer-brand p { font-size: .9rem; line-height: 1.6; margin-top: var(--space-md); text-align: left; }
.site-footer h3 { color: rgba(255,255,255,.4); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-lg); font-weight: 600; text-align: left; }
.site-footer ul li { margin-bottom: var(--space-sm); }
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: var(--white); text-decoration: none; }
.site-footer address { font-style: normal; line-height: 1.8; font-size: .9rem; text-align: left; }
.copyright { border-top: 1px solid rgba(255,255,255,.08); padding: var(--space-lg) 0; text-align: center; font-size: .8rem; color: rgba(255,255,255,.35); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-xl); } }
/* ============================================ ACCESSIBILITY & MOTION ============================================ */
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ============================================================
CENTRING & SPACING CONSISTENCY PATCH — 2026-07-20
Safe to append to the end of assets/styles.css.
============================================================ */
/* Section intros: keep the heading + intro text truly centred.
(The intro <p> had a max-width but no auto margins, so it
was hugging the left edge — this centres the block itself.) */
.section-head { text-align: center; }
.section-head p {
margin-left: auto;
margin-right: auto;
}
/* Consistent vertical rhythm between major sections */
.section-md { padding: var(--space-3xl) 0; }
/* Contact form: centre the form on the page.
Field labels stay left-aligned for readability/usability. */
.contact-form {
margin-left: auto;
margin-right: auto;
}
/* Hero copy stays centred and constrained for balance */
.hero-copy { margin-left: auto; margin-right: auto; }
.hero-copy p { margin-left: auto; margin-right: auto; }

/* ============================================================
   HERO HEADINGS — force white on the navy hero (all pages)
   ============================================================ */
.hero h1,
.hero-copy h1 {
  color: var(--white);
}
/* Keep the smaller sub-line (the <span>) a soft white, as designed */
.hero h1 span,
.hero-copy h1 span {
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   HERO PADDING — match the Blog's generous vertical spacing
   (applies to Home + all .hero-grid pages)
   ============================================================ */
.hero .hero-grid {
  padding-top: var(--space-4xl);    /* 96px — pushes heading clear of the nav */
  padding-bottom: var(--space-3xl); /* 64px — breathing room before the stats */
}

/* ============================================================
   HERO TEXT HIERARCHY — Title  >  Tag  >  Paragraph
   ============================================================ */

/* 1. Main title (largest) */
.hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
}

/* 2. Tag line — the <span> inside the h1 (medium, lighter) */
.hero h1 span {
  display: block;
  font-size: 0.5em;            /* ~half the title = clear step down */
  font-weight: 500;            /* subtitle weight, not heading-bold */
  line-height: 1.35;
  margin-top: var(--space-sm);
  color: rgba(255, 255, 255, 0.8);
}

/* 3. Supporting paragraph (smallest) */
.hero p {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}