/*
 * site.css — ophthaconsulting.com unified design system
 * Single source of truth for ALL pages (49 routes)
 * Version: 2026-04-03
 *
 * Contents:
 *  1. Root variables
 *  2. Reset & base
 *  3. Typography
 *  4. Layout utilities
 *  5. Header / nav (desktop)
 *  6. Pure-CSS hamburger + mobile menu
 *  7. Footer
 *  8. Scroll-reveal animations
 *  9. Hero / banner
 * 10. Cards & grids
 * 11. Buttons & CTAs
 * 12. Blog / article layout
 * 13. Forms & contact
 * 14. Page-specific helpers
 * 15. Responsive overrides
 */

/* ════════════════════════════════════════════
   1. ROOT VARIABLES
   ════════════════════════════════════════════ */
:root {
  /* Palette */
  --ink:       #0d1117;
  --ink-2:     #161b22;
  --ink-3:     #1c2333;
  --surface:   #21262d;
  --glass:     rgba(255,255,255,0.04);
  --glass-b:   rgba(255,255,255,0.08);

  /* Brand gold */
  --gold:      #c9a84c;
  --gold-l:    #e0c97a;
  --gold-dim:  #a8893d;
  --gold-glow: rgba(201,168,76,0.18);
  --gold-g:    linear-gradient(135deg,#c9a84c,#e0c97a);

  /* Accent teal */
  --teal:      #0D7377;
  --teal-l:    #14A3A8;

  /* Navy */
  --navy:      #1A1F3D;
  --navy-2:    #0F1228;

  /* 3-phase palette */
  --p1:  #D4913B; --p1-l: #E8B76A; --p1-g: rgba(212,145,59,.15);
  --p2:  #0D7377; --p2-l: #14A3A8; --p2-g: rgba(13,115,119,.15);
  --p3:  #C8A951; --p3-l: #E8D48B; --p3-g: rgba(200,169,81,.15);

  /* Text */
  --text-1:   #e6edf3;
  --text-2:   #8b949e;
  --text-3:   #656d76;

  /* Borders */
  --border:    rgba(255,255,255,0.08);
  --border-hi: rgba(201,168,76,0.30);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.45);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.55);

  /* Radii */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;

  /* Typography */
  --font:   'Inter', system-ui, -apple-system, sans-serif;
  --ff-serif: Georgia, 'Times New Roman', serif;
  --transition: 0.22s ease;

  /* Nav */
  --nav-bg:  var(--ink);
  --nav-h:   64px;
}

/* ════════════════════════════════════════════
   2. RESET & BASE
   ════════════════════════════════════════════ */
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--ink);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
ul, ol     { list-style: none; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: #fff; }

/* ════════════════════════════════════════════
   3. TYPOGRAPHY
   ════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-1);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3vw, 1.6rem); }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: .95rem; }

p { margin-bottom: 1.1rem; color: var(--text-2); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--text-1); }
em        { color: var(--gold); font-style: normal; }

.lead {
  font-size: 1.15rem;
  color: var(--text-2);
  line-height: 1.8;
}

/* ════════════════════════════════════════════
   4. LAYOUT UTILITIES
   ════════════════════════════════════════════ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container--narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
}
.section--sm {
  padding: 3rem 0;
}

.text-center { text-align: center; }
.text-gold   { color: var(--gold); }
.text-muted  { color: var(--text-2); }

.divider {
  width: 60px;
  height: 3px;
  background: var(--gold-g);
  border-radius: 2px;
  margin: 1rem 0 2rem;
}
.divider--center { margin: 1rem auto 2rem; }

/* ════════════════════════════════════════════
   5. SKIP LINK
   ════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--gold);
  color: #000;
  padding: .4rem .9rem;
  border-radius: 0 0 6px 6px;
  font-size: .85rem;
  font-weight: 700;
  z-index: 9999;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* ════════════════════════════════════════════
   6. SITE HEADER — desktop nav
   ════════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --nav-h:      68px;
  --nav-bg:     rgba(13,17,23,0.96);
  --nav-border: rgba(201,168,76,0.18);
  --drawer-w:   300px;
}

/* ── Header bar ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: box-shadow .25s;
}
.site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,.6);
}

.nav-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo:hover .nav-logo-name { color: #fff; }

.nav-logo-mark {
  width: 38px;
  height: 38px;
  background: var(--gold-g);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 900;
  color: #0d1117;
  letter-spacing: .03em;
  flex-shrink: 0;
}
.nav-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-logo-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .01em;
  line-height: 1.1;
  transition: color .2s;
}
.nav-logo-sub {
  font-size: .62rem;
  color: rgba(255,255,255,.45);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
}

/* ── Desktop nav links ── */
.nav-desktop {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-link {
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-decoration: none;
  padding: .4rem .8rem;
  border-radius: 7px;
  white-space: nowrap;
  transition: color .2s, background .2s;
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: .8rem;
  right: .8rem;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .22s ease;
}
.nav-link:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active {
  color: var(--gold);
  background: rgba(201,168,76,.10);
}
.nav-link.active::after { transform: scaleX(1); }

/* ── Desktop CTA button ── */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--gold-g);
  color: #0d1117 !important;
  font-size: .84rem;
  font-weight: 700;
  padding: .45rem 1.15rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  margin-left: .5rem;
  transition: opacity .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(201,168,76,.25);
}
.nav-cta-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201,168,76,.4);
}
.nav-cta-btn i { font-size: .8rem; }

/* ════════════════════════════════════════════
   7. HAMBURGER BUTTON (tablet / mobile)
   ════════════════════════════════════════════ */
.nav-hamburger {
  display: none;          /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  cursor: pointer;
  padding: 4px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.nav-hamburger:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
}

.bar {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity   .28s cubic-bezier(.4,0,.2,1),
              width     .28s cubic-bezier(.4,0,.2,1);
}

/* Animated to X when open */
.nav-hamburger[aria-expanded="true"] .bar-1 { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] .bar-2 { opacity: 0; width: 0; }
.nav-hamburger[aria-expanded="true"] .bar-3 { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════
   8. SLIDE-IN DRAWER (mobile / tablet)
   ════════════════════════════════════════════ */
.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: var(--drawer-w);
  max-width: 100vw;
  height: 100%;
  background: #0d1117;
  border-left: 1px solid rgba(201,168,76,.15);
  z-index: 1200;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}
.nav-drawer.open {
  transform: translateX(0);
}

/* Backdrop */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.nav-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* Inner drawer layout */
.nav-drawer-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 0 0 2rem;
}

/* Drawer top row: logo + close btn */
.nav-drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  min-height: var(--nav-h);
}
.nav-drawer-logo .nav-logo-mark { width: 32px; height: 32px; font-size: .72rem; }
.nav-drawer-logo .nav-logo-name { font-size: .95rem; }

.nav-drawer-close {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.nav-drawer-close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Drawer nav links */
.nav-drawer nav {
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  gap: 2px;
}
.nav-drawer-link {
  display: flex;
  align-items: center;
  font-size: .97rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  padding: .8rem 1rem;
  border-radius: 9px;
  min-height: 50px;
  transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-drawer-link:hover,
.nav-drawer-link:active {
  color: #fff;
  background: rgba(255,255,255,.07);
}
.nav-drawer-link.active {
  color: var(--gold);
  background: rgba(201,168,76,.1);
  border-left: 3px solid var(--gold);
  padding-left: calc(1rem - 3px);
}

/* Drawer CTA */
.nav-drawer-cta {
  padding: 1.25rem 1.25rem .5rem;
  margin-top: auto;
}
.nav-drawer-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--gold-g);
  color: #0d1117 !important;
  font-weight: 700;
  font-size: .95rem;
  padding: .9rem 1.5rem;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  width: 100%;
  box-shadow: 0 4px 20px rgba(201,168,76,.3);
  transition: opacity .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.nav-drawer-cta-btn:hover { opacity: .9; }
.nav-drawer-cta-btn i { font-size: .9rem; }
.nav-drawer-cta-note {
  font-size: .76rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin: .6rem 0 0;
}

/* Drawer contact row */
.nav-drawer-contact {
  padding: .75rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.nav-drawer-contact-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  padding: .35rem 0;
  transition: color .2s;
}
.nav-drawer-contact-link i { color: var(--gold); width: 14px; text-align: center; }
.nav-drawer-contact-link:hover { color: rgba(255,255,255,.9); }

/* ════════════════════════════════════════════
   8b. FOOTER
   ════════════════════════════════════════════ */
.footer {
  background: #060a12;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 3.5rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
}
.footer-subtitle {
  font-size: .82rem;
  font-weight: 700;
  color: rgba(255,255,255,.72);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0 0 .85rem;
}
.footer-text {
  font-size: .86rem;
  color: rgba(255,255,255,.68);
  line-height: 1.72;
  margin: 0 0 1rem;
}
.footer-contact p {
  font-size: .84rem;
  color: rgba(255,255,255,.72);
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-contact i { color: var(--gold); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .38rem; }
.footer-link {
  font-size: .84rem;
  color: rgba(255,255,255,.68);
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
}
.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: rgba(255,255,255,.62);
}
.footer-certifications { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-certifications span { color: rgba(255,255,255,.62); }

/* ════════════════════════════════════════════
   NAV RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════ */

/* ── Tablet (≤1024px): hide desktop nav text if tight, keep hamburger hidden ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-link { font-size: .8rem; padding: .38rem .65rem; }
  .nav-cta-btn { font-size: .8rem; padding: .42rem .95rem; }
  .nav-logo-sub { display: none; }
}

/* ── Tablet + Mobile (≤900px): switch to hamburger drawer ── */
@media (max-width: 900px) {
  .nav-desktop  { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-sub { display: none; }
}

/* ── Small mobile ── */
@media (max-width: 480px) {
  .nav-container { padding: 0 1rem; }
  .nav-logo-mark { width: 34px; height: 34px; }
  .nav-logo-name { font-size: .95rem; }
  .nav-drawer { width: 100vw; border-left: none; }
  .nav-drawer-link { font-size: .93rem; min-height: 52px; }
}

/* ════════════════════════════════════════════
   9. SCROLL-REVEAL ANIMATIONS
   ════════════════════════════════════════════ */
.sr {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
}
.sr.visible {
  opacity: 1;
  transform: none;
}
.sr-img {
  opacity: 0;
  transform: scale(.96);
  transition: opacity .7s ease, transform .7s ease;
}
.sr-img.visible {
  opacity: 1;
  transform: scale(1);
}

/* ════════════════════════════════════════════
   10. HERO / BANNER
   ════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 5rem 0 4rem;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border-bottom: 1px solid var(--border);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.25);
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}
.hero h1 { color: var(--text-1); margin-bottom: 1.25rem; }
.hero .hero-lead {
  font-size: 1.1rem;
  color: var(--text-2);
  max-width: 620px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* Page header banner (used on /services etc) */
.services-header, .page-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 5rem 0 3rem;
  overflow: hidden;
}
.services-header::before, .page-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,17,23,.85) 0%, rgba(13,17,23,.7) 100%);
}
.services-header .container, .page-banner .container {
  position: relative;
  z-index: 1;
}
.svc-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold);
  background: rgba(201,168,76,.12);
  border: 1px solid rgba(201,168,76,.25);
  padding: .35rem .9rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

/* ════════════════════════════════════════════
   10b. PAGE HERO — unified hero for all pages
   ════════════════════════════════════════════ */

/*
  Usage:
    <section class="page-hero" style="--hero-bg:url('/images/foo.webp')">
      <div class="page-hero-inner">
        <p  class="page-hero-eyebrow">...</p>
        <h1 class="page-hero-title">...</h1>
        <p  class="page-hero-lead">...</p>
        [optional] <div class="page-hero-stats">...</div>
        [optional] <a class="cta-button">...</a>
      </div>
    </section>

  With bg image  → full-bleed parallax photo + dark overlay
  Without bg img → deep navy gradient (blog, about)
*/

.page-hero {
  position: relative;
  background-image: var(--hero-bg, linear-gradient(160deg, var(--ink-2) 0%, #07090f 100%));
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 4rem 2rem;
}

/* Dark overlay — matches original services-header look */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,18,40,.82) 0%, rgba(15,18,40,.60) 50%, rgba(15,18,40,.88) 100%);
  z-index: 1;
}

/* Plain variant (no bg photo): gold radial glow on dark gradient */
.page-hero.page-hero--plain {
  background-image: none;
  background: linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border-bottom: 1px solid var(--border);
  min-height: 0;
  padding: 72px 2rem 56px;
  background-attachment: scroll;
}
.page-hero.page-hero--plain::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201,168,76,.08) 0%, transparent 70%);
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Eyebrow pill */
.page-hero-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .20em;
  color: var(--gold);
  margin-bottom: 1rem;
}

/* H1 */
.page-hero-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.12;
  margin: 0 0 1.25rem;
  max-width: 800px;
}
/* em/italic inside any hero title = gold accent */
.page-hero-title em { color: var(--gold); font-style: normal; }

/* Plain variant h1 uses text color */
.page-hero.page-hero--plain .page-hero-title {
  color: var(--text-1);
  font-size: clamp(2rem, 5vw, 3.2rem);
}
.page-hero.page-hero--plain .page-hero-title em { color: var(--gold); font-style: normal; }

/* Lead paragraph */
.page-hero-lead {
  font-size: 1.1rem;
  color: rgba(255,255,255,.78);
  line-height: 1.85;
  max-width: 700px;
  margin: 0 auto 3rem;
}

/* Plain variant lead uses muted text */
.page-hero.page-hero--plain .page-hero-lead {
  color: var(--text-2);
  font-size: 1.1rem;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}

/* Stats row */
.page-hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: .5rem;
}
.page-hero-stat { text-align: center; }
.page-hero-stat strong {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: -.04em;
  line-height: 1;
}
.page-hero-stat span {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.60);
  text-transform: uppercase;
  letter-spacing: .10em;
  margin-top: .35rem;
}

/* CTA button inside hero */
.page-hero .cta-button { display: inline-block; margin-top: 1rem; }

/* ── Responsive ── */
@media (max-width: 968px) {
  .page-hero { background-attachment: scroll; }
}
@media (max-width: 600px) {
  .page-hero { padding: 3rem 1.5rem; min-height: 60vh; }
  .page-hero.page-hero--plain { padding: 48px 1.5rem 36px; min-height: 0; }
  .page-hero-stats { gap: 1.5rem; }
  .page-hero-stat strong { font-size: 1.9rem; }
}

/* ════════════════════════════════════════════
   11. CARDS & GRIDS
   ════════════════════════════════════════════ */
.card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-icon {
  width: 52px;
  height: 52px;
  background: var(--gold-glow);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  color: var(--gold);
}
.card h3 { font-size: 1.1rem; color: var(--text-1); margin-bottom: .5rem; }
.card p  { font-size: .9rem; color: var(--text-2); margin: 0; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Stat / metric chips */
.stat-chip {
  background: var(--gold-glow);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: var(--r-sm);
  padding: .5rem 1rem;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold);
}
.stat-label {
  font-size: .78rem;
  color: var(--text-2);
}

/* ════════════════════════════════════════════
   12. BUTTONS & CTAS
   ════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  touch-action: manipulation;
}
.btn:hover  { opacity: .88; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--gold {
  background: var(--gold-g);
  color: #0d1117;
}
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
}
.btn--outline:hover { background: var(--gold-glow); color: #fff; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1.05rem; }
.btn--sm { padding: .5rem 1.1rem; font-size: .84rem; }

/* CTA section */
.cta-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 3.5rem 2.5rem;
  text-align: center;
}

/* ════════════════════════════════════════════
   13. BLOG / ARTICLE LAYOUT
   ════════════════════════════════════════════ */

/* Blog index */
/* Category pills */
.category-pills {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 3rem;
}
.category-pill {
  padding: .42rem 1.1rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--glass);
  transition: all .2s;
  -webkit-tap-highlight-color: transparent;
}
.category-pill:hover,
.category-pill.active { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

/* Article cards */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
  padding-bottom: 4rem;
}
.article-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .2s;
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  border-color: var(--border-hi);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.article-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.article-category {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: .6rem;
}
.article-card h3 {
  font-size: 1.05rem;
  color: var(--text-1);
  margin-bottom: .65rem;
  line-height: 1.4;
}
.article-card p { font-size: .88rem; color: var(--text-2); margin: 0 0 1.25rem; flex: 1; }
.article-meta {
  font-size: .78rem;
  color: var(--text-3);
  display: flex;
  gap: 1rem;
  align-items: center;
}
.article-meta i { color: var(--gold); }

/* Article layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.article-main {}
.article-aside {
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
  height: fit-content;
}

/* Article head / meta */
.article-head { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--border); }
.article-head .category-tag {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  background: var(--gold-glow);
  border: 1px solid rgba(201,168,76,.25);
  padding: .3rem .8rem;
  border-radius: var(--r-sm);
  margin-bottom: 1rem;
}
.article-head h1 {
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  color: var(--text-1);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.article-byline {
  font-size: .85rem;
  color: var(--text-3);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}
.article-byline i { color: var(--gold); margin-right: .3rem; }

/* Article body content */
.article-body h2 {
  font-size: 1.5rem;
  color: var(--text-1);
  margin: 2.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.article-body h3 {
  font-size: 1.2rem;
  color: var(--text-1);
  margin: 2rem 0 .75rem;
}
.article-body p   { color: var(--text-2); line-height: 1.8; margin-bottom: 1.25rem; }
.article-body ul,
.article-body ol  { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.article-body li  { color: var(--text-2); margin-bottom: .5rem; line-height: 1.7; }
.article-body ul li { list-style: disc; }
.article-body ol li { list-style: decimal; }
.article-body strong { color: var(--text-1); }
.article-body a { color: var(--gold); }
.article-body a:hover { color: #fff; }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--glass);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-1);
  font-style: italic;
}

/* Insight / callout boxes */
.insight-box, .callout {
  background: linear-gradient(135deg, var(--gold-glow), rgba(13,115,119,.1));
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin: 2rem 0;
}
.insight-box h4, .callout h4 {
  color: var(--gold);
  font-size: 1rem;
  margin-bottom: .5rem;
}
.insight-box p, .callout p { color: var(--text-2); font-size: .95rem; margin: 0; }

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.5rem;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  margin: 2rem 0;
}
.stats-bar .stat { text-align: center; }
.stats-bar .stat-number { display: block; font-size: 1.8rem; font-weight: 800; color: var(--gold); }
.stats-bar .stat-label  { font-size: .8rem; color: var(--text-2); }

/* Sidebar widget */
.sidebar-widget {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.sidebar-widget h4 {
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold);
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.sidebar-cta {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-md);
  padding: 1.75rem;
  text-align: center;
}
.sidebar-cta h4 { font-size: 1rem; color: var(--text-1); margin-bottom: .75rem; }
.sidebar-cta p  { font-size: .88rem; color: var(--text-2); margin-bottom: 1.25rem; }

/* Breadcrumb */
.breadcrumb {
  font-size: .8rem;
  color: var(--text-3);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-3); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep { opacity: .4; }

/* ════════════════════════════════════════════
   14. FORMS & CONTACT
   ════════════════════════════════════════════ */
.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: .45rem;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  color: var(--text-1);
  font-family: var(--font);
  font-size: .95rem;
  transition: border-color .2s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}
.form-group textarea { min-height: 120px; resize: vertical; }

/* ════════════════════════════════════════════
   15. PAGE-SPECIFIC HELPERS
   ════════════════════════════════════════════ */

/* Case study cards */
.case-card {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2rem;
  margin-bottom: 2rem;
}
.case-card h3 { color: var(--gold); font-size: 1.25rem; margin-bottom: .75rem; }

/* Process steps */
.process-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
.step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--gold-glow);
  border: 1px solid rgba(201,168,76,.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--gold);
}

/* Tags */
.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .65rem;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.tag--gold { background: var(--gold-glow); border-color: rgba(201,168,76,.25); color: var(--gold); }
.tag--teal { background: var(--p2-g); border-color: rgba(13,115,119,.25); color: var(--teal-l); }

/* Service area map stub */
.service-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.service-city {
  background: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .75rem 1rem;
  font-size: .88rem;
  color: var(--text-2);
  transition: all .2s;
}
.service-city:hover { border-color: var(--border-hi); color: var(--gold); }

/* ════════════════════════════════════════════
   16. RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .article-layout {
    grid-template-columns: 1fr;
  }
  .article-aside { position: static; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .article-grid { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
  .cta-section { padding: 2.5rem 1.5rem; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-bottom-content { flex-direction: column; text-align: center; }
  .footer-certifications { justify-content: center; gap: 1rem; }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}


/* ════════════════════════════════════════════
   HOMEPAGE — full design system
   ════════════════════════════════════════════ */

        /* CSS Variables - Standardized */
        

        /* Smooth Scrolling - REMOVED for page navigation */
        html {
            scroll-behavior: auto;
        }
        
        /* Modern Full-Page Navigation System */
        .page-container {
            min-height: 100vh;
            position: relative;
        }
        
        .page {
            display: none;
            min-height: 100vh;
            opacity: 0;
            transition: opacity 0.55s ease;
            padding-top: 20px;
        }
        
        .page.active {
            display: block;
            opacity: 1;
        }

        /* Reset & Base Styles - Georgia Only */
        

        body {
            font-family: var(--font-family);
            font-weight: var(--font-weight-normal);
            line-height: 1.7;
            color: var(--text-dark);
            background-color: var(--bg-cream);
            font-size: 16px;
        }

        /* Typography - All Georgia */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-family);
            font-weight: var(--font-weight-bold);
            line-height: 1.2;
            color: var(--text-dark);
            margin-bottom: 1rem;
            letter-spacing: -0.025em;
        }

        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }  
        h3 { font-size: 1.5rem; }
        h4 { font-size: 1.25rem; }
        h5 { font-size: 1.1rem; }
        h6 { font-size: 1rem; }

        p, div, span, a, li, td, th, label, input, textarea, button {
            font-family: var(--font-family);
        }

        /* Container */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        /* Utility Classes */
        .lead-text {
            font-size: 1.125rem;
            font-weight: var(--font-weight-normal);
            color: var(--text-medium);
            margin-bottom: 1.5rem;
            font-family: var(--font-family);
        }

        h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 700;
            text-align: center;
            border-bottom: 3px double var(--primary-color);
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        h2 {
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            border-bottom: 2px solid var(--border-dark);
            padding-bottom: 0.3rem;
            margin-bottom: 1.2rem;
        }

        h3 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: 0.8rem;
        }

        /* Newspaper Text Styles */
        .lead-text {
            font-size: 1.2rem;
            line-height: 1.6;
            color: var(--text-medium);
            margin-bottom: 1.5rem;
            font-style: italic;
        }

        /* Newspaper Text Styles - Georgia Only */
        .byline {
            font-family: var(--font-family);
            font-size: 0.9rem;
            color: var(--text-light);
            font-style: italic;
            margin-bottom: 1rem;
            border-left: 3px solid var(--accent-color);
            padding-left: 1rem;
        }

        /* Newspaper Buttons */
        .btn {
            display: inline-block;
            font-family: var(--font-display);
            padding: 0.8rem 2rem;
            border: 2px solid var(--primary-color);
            background-color: transparent;
            color: var(--primary-color);
            text-decoration: none;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.25s ease;
            cursor: pointer;
            font-size: 0.9rem;
            border-radius: 999px;
        }
        .btn:focus-visible {
            outline: 3px solid var(--accent-color);
            outline-offset: 3px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-1px);
            box-shadow: var(--shadow-medium);
        }

        .btn-accent {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        .btn-accent:hover {
            background-color: var(--accent-color);
            color: white;
        }

        /* Newspaper Hero Section */
        .hero {
            background: linear-gradient(135deg, var(--bg-cream) 0%, #f8f6f3 100%);
            padding: 4rem 0 3rem;
            position: relative;
            overflow: hidden;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 50%, rgba(139, 69, 19, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 140, 0, 0.02) 0%, transparent 50%);
            pointer-events: none;
        }

        .hero-header {
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

        .hero-headline {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            color: var(--text-dark);
            line-height: 1.05;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
        }
        


        /* Newspaper Columns Layout */
        .news-section {
            padding: 3rem 0;
            border-bottom: 1px solid var(--border-color);
        }

        .section-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
        }

        .news-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            column-gap: 3rem;
        }

        /* Service Tiles - Simple Flexbox */
        .article-card {
            background-color: white;
            border: 1px solid var(--border-color);
            padding: 2rem;
            box-shadow: var(--shadow-light);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .article-card:hover {
            box-shadow: var(--shadow-medium);
            transform: translateY(-2px);
        }

        /* Header with Category and Title */
        .article-header {
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 1rem;
            margin-bottom: 1rem;
        }

        .article-category {
            font-family: var(--font-family);
            font-size: 0.75rem;
            font-weight: var(--font-weight-bold);
            color: var(--accent-color);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.5rem;
        }

        .article-title {
            font-family: var(--font-family);
            font-size: 1.25rem;
            font-weight: var(--font-weight-bold);
            color: var(--text-dark);
            line-height: 1.3;
            margin: 0;
        }

        /* Description */
        .article-excerpt {
            font-family: var(--font-family);
            font-size: 1rem;
            font-weight: var(--font-weight-normal);
            color: var(--text-medium);
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        /* Feature List */
        .article-features {
            list-style: none;
            padding: 0;
            margin: 0 0 1.5rem 0;
        }

        .article-feature {
            font-family: var(--font-family);
            font-size: 0.9rem;
            font-weight: var(--font-weight-normal);
            color: var(--text-dark);
            line-height: 1.5;
            margin-bottom: 0.5rem;
            padding-left: 1rem;
            position: relative;
        }

        .article-feature:before {
            content: "▪";
            color: var(--accent-color);
            font-weight: var(--font-weight-bold);
            position: absolute;
            left: 0;
        }

        .article-feature:last-child {
            margin-bottom: 0;
        }

        /* Button at bottom */
        .article-card .btn {
            font-family: var(--font-family);
            font-size: 0.9rem;
            font-weight: var(--font-weight-bold);
            margin-top: auto;
        }

        .article-excerpt {
            color: var(--text-medium);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .article-features {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .article-feature {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: var(--text-medium);
        }

        .article-feature::before {
            content: "▪";
            color: var(--accent-color);
            font-weight: bold;
        }

        /* Statistics Box - Newspaper Style */
        .stats-box {
            background-color: var(--bg-light);
            border: 2px solid var(--primary-color);
            padding: 2rem;
            margin: 2rem 0;
            text-align: center;
        }

        .stats-header {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .stat-item {
            border-right: 1px solid var(--border-color);
            padding: 1rem;
        }

        .stat-item:last-child {
            border-right: none;
        }

        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--accent-color);
            display: block;
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.2;
        }

        /* Process Timeline - Newspaper Style */
        .process-timeline {
            padding: 3rem 0;
            background-color: var(--bg-light);
        }

        .timeline-item {
            display: flex;
            gap: 2rem;
            margin-bottom: 2.5rem;
            padding: 2rem;
            background-color: white;
            border-left: 4px solid var(--accent-color);
            box-shadow: var(--shadow-light);
        }

        .timeline-number {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            font-weight: 700;
            border-radius: 50%;
        }

        .timeline-content h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .timeline-content p {
            color: var(--text-medium);
            line-height: 1.6;
        }

        
        /* Enhanced Results Section */
        .results-showcase {
            padding: 3rem 0 5rem;
            background: 
                linear-gradient(180deg, #ffffff 0%, var(--bg-cream) 100%);
            position: relative;
        }
        
        .results-showcase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 10% 20%, rgba(139, 69, 19, 0.02) 0%, transparent 70%),
                radial-gradient(circle at 90% 80%, rgba(255, 140, 0, 0.02) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .results-showcase .section-header {
            margin-bottom: 4rem;
            padding-bottom: 1.5rem;
            position: relative;
        }
        
        .results-showcase .section-header h2 {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
            letter-spacing: -0.01em;
        }
        
        .results-showcase .section-header .lead-text {
            font-size: clamp(1rem, 2vw, 1.3rem);
            color: var(--text-medium);
            font-style: italic;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.4;
        }
        
        /* Enhanced Result Cards */
        .results-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
            margin-top: 4rem;
            position: relative;
            z-index: 1;
        }
        
        .result-card {
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 16px;
            padding: 3rem 2.5rem;
            text-align: left;
            transition: all 0.4s ease;
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.08),
                0 1px 8px rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden;
        }
        
        .result-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
        }
        
        .result-card:hover {
            transform: translateY(-8px);
            box-shadow: 
                0 20px 40px rgba(0,0,0,0.15),
                0 5px 15px rgba(0,0,0,0.08);
            border-color: var(--primary-color);
        }
        
        .result-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 2rem;
            letter-spacing: -0.01em;
        }
        

        
        .result-card p {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-dark);
            margin: 0;
        }
        
        .result-card p strong {
            color: var(--primary-color);
            font-weight: 700;
        }
        
        /* Enhanced Section Footer */
        .section-footer {
            margin-top: 4rem;
            text-align: center;
            padding: 2rem;
            background: rgba(139, 69, 19, 0.05);
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }
        
        .section-footer p {
            font-size: 0.95rem;
            color: var(--text-medium);
            margin: 0;
            font-style: italic;
            line-height: 1.6;
        }
        
        /* Enhanced Responsive Design */
        @media (min-width: 768px) {
            .results-grid {
                grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
                gap: 2.5rem;
            }
        }
        
        @media (min-width: 1024px) {
            .results-grid {
                grid-template-columns: repeat(3, 1fr);
            }
            

        }
        
        /* Enhanced Typography Scale */
        @media (max-width: 767px) {
            .hero {
                padding: 3rem 0 4rem;
            }
            
            .results-showcase {
                padding: 4rem 0;
            }
            
            .result-card {
                padding: 2rem 1.5rem;
            }
            
            .results-showcase .section-header {
                margin-bottom: 3rem;
            }
            

        }
        .crisis-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .stat-item {
            text-align: center;
            padding: 1rem;
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
        }

        .stat-number {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            line-height: 1;
        }

        .stat-label {
            display: block;
            font-size: 0.875rem;
            color: var(--text-medium);
            margin-top: 0.5rem;
        }

        .patient-quote {
            background: var(--bg-cream);
            border-left: 4px solid var(--accent-color);
            padding: 1.5rem;
            margin: 1.5rem 0;
            font-style: italic;
            color: var(--text-dark);
            border-radius: 0 8px 8px 0;
        }

        .patient-quote::before {
            content: '"';
            font-size: 2rem;
            color: var(--accent-color);
            line-height: 1;
        }

        .patient-quote::after {
            content: '"';
            font-size: 2rem;
            color: var(--accent-color);
            line-height: 1;
        }



        .evidence-base {
            background: var(--bg-light);
            padding: 2rem;
            border-radius: 8px;
            margin-top: 1.5rem;
        }

        .evidence-base h4 {
            color: var(--primary-color);
            margin-bottom: 1rem;
        }

        .evidence-base p {
            color: var(--text-medium);
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════════════
           About Page – A1–A13 Full Rebuild CSS
        ═══════════════════════════════════════════════════ */

        .about-page-section {
            background: var(--bg-cream);
        }

        /* A1 Hero */
        .about-hero-banner {
            position: relative;
            min-height: 60vh;
            background-size: cover;
            background-position: center top;
            background-attachment: fixed;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .about-hero-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(10,20,40,0.72) 0%, rgba(20,14,58,0.55) 100%);
        }
        .about-hero-overlay {
            position: relative;
            z-index: 2;
            padding: 4rem 2rem;
            max-width: 800px;
        }
        .about-hero-title {
            color: #fff;
            font-size: clamp(2rem, 5vw, 3.5rem);
            margin-bottom: 0.5rem;
            line-height: 1.2;
        }
        .about-hero-subtitle {
            color: #C8A951;
            font-size: clamp(1.2rem, 3vw, 2rem);
            margin-bottom: 0.75rem;
            font-weight: 600;
        }
        .about-hero-tagline {
            color: rgba(255,255,255,0.88);
            font-style: italic;
            font-size: 1.15rem;
            margin: 0;
        }

        /* A3 Divider */
        .about-divider {
            width: 100%;
            overflow: hidden;
            line-height: 0;
            margin: 0;
        }
        .about-divider img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* A2 Texture wrapper */
        .about-textured-bg {
            background-size: 400px 400px;
            background-repeat: repeat;
        }

        /* Split layout wrapper */
        .about-split-wrap {
            padding: 5rem 2rem;
        }
        .about-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: center;
        }
        /* Reverse: text left, img right */
        .about-split-reverse {
            direction: ltr;
        }
        .about-split-reverse .about-split-text { order: 1; }
        .about-split-reverse .about-split-img  { order: 2; }

        .about-split-img img {
            width: 100%;
            height: 380px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.18);
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .about-split-img img:hover {
            transform: scale(1.02);
            box-shadow: 0 24px 64px rgba(0,0,0,0.24);
        }

        .about-split-heading {
            color: var(--primary-color);
            font-size: clamp(1.4rem, 2.5vw, 1.9rem);
            margin: 0 0 1.25rem;
            line-height: 1.25;
        }
        .about-split-text p {
            font-size: 1.05rem;
            line-height: 1.75;
            color: var(--text-medium);
            margin-bottom: 1rem;
        }

        /* A10 Quote cinematic */
        .about-quote-section {
            position: relative;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 7rem 2rem;
            text-align: center;
        }
        .about-quote-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(8,12,30,0.72);
        }
        .about-quote-overlay {
            position: relative;
            z-index: 2;
            max-width: 860px;
            margin: 0 auto;
        }
        .about-quote-text {
            color: #fff;
            font-size: clamp(1.2rem, 2.5vw, 1.8rem);
            font-style: italic;
            line-height: 1.6;
            margin: 0 0 1.5rem;
            quotes: '\\201C' '\\201D';
        }
        .about-quote-text::before { content: open-quote; }
        .about-quote-text::after  { content: close-quote; }
        .about-quote-cite {
            color: #C8A951;
            font-weight: 700;
            font-style: normal;
            font-size: 1rem;
            letter-spacing: 0.04em;
        }

        /* A11 Foundation */
        .about-foundation-wrap {
            background: var(--bg-cream);
            padding: 5rem 2rem;
        }
        .about-foundation-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .about-foundation-img img {
            width: 100%;
            height: 420px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 12px 40px rgba(0,0,0,0.14);
        }
        .about-section-title {
            color: var(--primary-color);
            font-size: 1.6rem;
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            padding-bottom: 0.75rem;
            border-bottom: 3px solid var(--accent-color);
        }
        .foundation-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: white;
            border: 1px solid var(--border-color);
            padding: 1.25rem 1.5rem;
            margin-bottom: 0.85rem;
            border-radius: 8px;
            transition: box-shadow 0.25s, transform 0.25s;
        }
        .foundation-card:hover {
            box-shadow: 0 6px 24px rgba(0,0,0,0.1);
            transform: translateX(4px);
        }
        .foundation-card-icon {
            width: 42px;
            height: 42px;
            background: var(--primary-color);
            color: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .foundation-card-title {
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.25rem;
        }
        .foundation-card-desc {
            font-size: 0.875rem;
            color: var(--text-medium);
        }

        /* A12 Journey Timeline */
        .about-journey-wrap {
            background: #0a0f1a;
            padding: 5rem 2rem;
        }
        .about-journey-inner {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            max-width: 1200px;
            margin: 0 auto;
            align-items: start;
        }
        .about-journey-img img {
            width: 100%;
            height: 480px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.4);
        }
        .about-journey-timeline .about-section-title {
            color: #C8A951;
            border-bottom-color: #C8A951;
        }
        .journey-item {
            display: flex;
            align-items: flex-start;
            gap: 1.25rem;
            margin-bottom: 2rem;
            padding-left: 0.25rem;
        }
        .journey-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent-color);
            flex-shrink: 0;
            margin-top: 0.35rem;
            position: relative;
        }
        .journey-dot::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 14px;
            transform: translateX(-50%);
            width: 2px;
            height: calc(100% + 22px);
            background: rgba(200,169,81,0.3);
        }
        .journey-item:last-child .journey-dot::after { display: none; }
        .journey-dot-current {
            background: #fff;
            box-shadow: 0 0 0 3px #C8A951;
        }
        .journey-year {
            font-weight: 700;
            color: #C8A951;
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.35rem;
        }
        .journey-desc {
            color: rgba(255,255,255,0.82);
            font-size: 0.975rem;
            line-height: 1.6;
        }
        .journey-content { flex: 1; }

        /* A13 Looking Forward closing */
        .about-closing-section {
            position: relative;
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            padding: 7rem 2rem;
        }
        .about-closing-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(200,169,81,0.55) 0%, rgba(10,20,40,0.80) 60%);
        }
        .about-closing-overlay {
            position: relative;
            z-index: 2;
            max-width: 820px;
            margin: 0 auto;
            text-align: center;
        }
        .about-closing-title {
            color: #fff;
            font-size: clamp(1.8rem, 4vw, 2.8rem);
            margin-bottom: 1.5rem;
        }
        .about-closing-text {
            color: rgba(255,255,255,0.9);
            font-size: 1.05rem;
            line-height: 1.75;
            margin-bottom: 1.25rem;
        }
        .about-closing-cta {
            display: inline-block;
            margin-top: 1.5rem;
            padding: 1rem 2.5rem;
            background: #C8A951;
            color: #fff;
            font-weight: 700;
            font-size: 1rem;
            border-radius: 50px;
            text-decoration: none;
            letter-spacing: 0.04em;
            transition: background 0.2s, transform 0.2s;
            cursor: pointer;
        }
        .about-closing-cta:hover {
            background: #b8952f;
            transform: translateY(-2px);
        }

        /* ── Scroll reveal animations ── */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease, transform 0.7s ease;
        }
        .scroll-reveal.revealed {
            opacity: 1;
            transform: translateY(0);
        }
        .scroll-reveal-image {
            opacity: 0;
            transform: scale(0.96);
            transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
        }
        .scroll-reveal-image.revealed {
            opacity: 1;
            transform: scale(1);
        }

        /* ── Responsive about page ── */
        @media (max-width: 900px) {
            .about-split, .about-foundation-inner, .about-journey-inner {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            .about-split-reverse .about-split-text,
            .about-split-reverse .about-split-img  { order: unset; }
            .about-split-img img { height: 260px; }
            .about-foundation-img img,
            .about-journey-img img { height: 220px; }
            .about-split-wrap { padding: 3rem 1.25rem; }
            .about-hero-banner { background-attachment: scroll; }
            .about-quote-section { background-attachment: scroll; }
            .about-closing-section { background-attachment: scroll; }
        }
        @media (max-width: 480px) {
            .about-divider img { height: 70px; }
            .about-hero-title { font-size: 1.7rem; }
            .about-hero-tagline { font-size: 0.95rem; }
        }

        /* About Section - Editorial Style */
        .editorial-section {
            padding: 3rem 0;
            background-color: var(--bg-cream);
        }

        .editorial-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        .editorial-text {
            font-size: 1.1rem;
            line-height: 1.7;
            color: var(--text-medium);
            margin-bottom: 1.5rem;
        }

        .credential-box {
            background-color: white;
            border: 1px solid var(--border-color);
            padding: 1.5rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .credential-icon {
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3px;
        }

        /* Contact Classified Style */
        .classified-section {
            padding: 3rem 0;
            background-color: var(--bg-cream);
        }

        .classified-box {
            background-color: white;
            border: 2px dashed var(--border-dark);
            padding: 2rem;
            max-width: 600px;
            margin: 0 auto;
            text-align: center;
        }

        .classified-header {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 1rem;
            text-transform: uppercase;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .contact-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            padding: 1rem;
            border: 1px solid var(--border-color);
            background-color: var(--bg-cream);
        }

        .contact-item i {
            color: var(--accent-color);
        }

        /* Service Details Styling */
        .service-details {
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: var(--bg-light);
            border: 2px solid var(--primary-color);
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .details-content h4 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-size: 1.3rem;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
        }
        
        .details-content h5 {
            color: var(--text-dark);
            margin: 1.5rem 0 0.75rem;
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .details-content p {
            margin-bottom: 1.5rem;
            line-height: 1.6;
            color: var(--text-medium);
        }
        
        .details-content ul {
            margin-bottom: 1.5rem;
            padding-left: 0;
            list-style: none;
        }
        
        .details-content li {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            padding-left: 1.5rem;
        }
        
        .details-content li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--accent-color);
            font-weight: bold;
        }
        
        .details-content li:last-child {
            border-bottom: none;
        }
        
        .btn-secondary {
            background: var(--text-medium);
            color: white;
            margin-top: 1rem;
        }
        
        .btn-secondary:hover {
            background: var(--text-dark);
        }
        
        @media (max-width: 767px) {
            .service-details {
                padding: 1rem;
                margin-top: 1rem;
            }
            
            .details-content h4 {
                font-size: 1.1rem;
            }
        }
        .process-overview {
            margin: 3rem 0;
        }
        
        .overview-card {
            background: var(--bg-light);
            border: 2px solid var(--primary-color);
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
        }
        
        .overview-card h3 {
            color: var(--primary-color);
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
        
        .timeline-duration {
            background: var(--accent-color);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: inline-block;
            margin-bottom: 1rem;
        }
        
        .process-details {
            display: grid;
            gap: 1.5rem;
            margin: 1.5rem 0;
            padding: 1.5rem;
            background: var(--bg-light);
            border-radius: 8px;
        }
        
        @media (min-width: 768px) {
            .process-details {
                grid-template-columns: 1fr 1fr;
            }
        }
        
        .detail-section h4 {
            color: var(--primary-color);
            font-size: 1rem;
            margin-bottom: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .detail-section ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .detail-section li {
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-color);
            position: relative;
            padding-left: 1.5rem;
        }
        
        .detail-section li:before {
            content: "→";
            position: absolute;
            left: 0;
            color: var(--accent-color);
            font-weight: bold;
        }
        
        .detail-section li:last-child {
            border-bottom: none;
        }
        
        .deliverable {
            background: white;
            border: 2px solid var(--accent-color);
            border-radius: 8px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            font-weight: 500;
        }
        
        .deliverable strong {
            color: var(--accent-color);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.9rem;
        }
        
        @media (max-width: 767px) {
            .process-details {
                grid-template-columns: 1fr;
            }
        }
        
        /* Results Showcase Styling */
        .results-showcase {
            padding: 3rem 0;
            background-color: var(--bg-cream);
        }
        
        .results-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
            margin-top: 3rem;
        }
        
        @media (min-width: 768px) {
            .results-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        
        .result-card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2rem;
            text-align: left;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-light);
        }
        
        .result-card:hover {
            box-shadow: var(--shadow-medium);
            transform: translateY(-2px);
        }
        
        .result-content h3 {
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            font-size: 1.3rem;
            font-weight: 700;
            border-bottom: 2px solid var(--border-dark);
            padding-bottom: 0.5rem;
        }
        

        
        .metric {
            padding: 1rem;
            background: var(--bg-light);
            border-left: 3px solid var(--accent-color);
            text-align: center;
        }
        
        .metric-number {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
            font-family: var(--font-family);
        }
        
        .metric-label {
            font-size: 0.9rem;
            color: var(--text-medium);
            line-height: 1.3;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .result-content p {
            color: var(--text-medium);
            line-height: 1.6;
            font-size: 1rem;
        }

        @media (max-width: 767px) {
            .result-card {
                padding: 1.5rem;
            }
            
            .metric-number {
                font-size: 1.5rem;
            }
        }

        .section-footer {
            margin-top: 3rem;
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
        }

        .section-footer p {
            color: var(--text-medium);
            font-size: 0.9rem;
            line-height: 1.4;
            margin: 0;
        }

        .quote-box {
            background: var(--bg-light);
            padding: 1.5rem;
            margin: 1.5rem 0;
            border-left: 4px solid var(--accent-color);
        }

        .quote-box p {
            margin: 0;
            font-style: italic;
            color: var(--text-medium);
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .metric-card {
            text-align: center;
            padding: 1rem;
            background: var(--bg-light);
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }

        .metric-number {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--accent-color);
        }

        .metric-label {
            font-size: 0.9rem;
            color: var(--text-medium);
        }

        /* Enhanced Services Page Visual Elements */
        .services-intro {
            background: var(--bg-cream);
            border-bottom: 2px solid var(--border-dark);
            text-align: center;
            padding: 3rem 0;
        }

        .services-intro .editorial-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .service-section {
            margin-bottom: 4rem;
            position: relative;
        }

        .service-section::after {
            content: '';
            position: absolute;
            bottom: -2rem;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: var(--accent-color);
        }

        .service-section:last-of-type::after {
            display: none;
        }

        .enhanced-article-card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 3rem;
            box-shadow: var(--shadow-light);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .enhanced-article-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
        }

        .enhanced-article-card:hover {
            box-shadow: var(--shadow-medium);
            transform: translateY(-4px);
        }

        .service-header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border-color);
        }

        .service-category-badge {
            display: inline-block;
            background: var(--accent-color);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1rem;
        }

        .service-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 0;
            line-height: 1.2;
        }

        .enhanced-quote-box {
            background: var(--bg-cream);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 2rem;
            margin: 2.5rem 0;
            position: relative;
            box-shadow: var(--shadow-light);
        }

        .enhanced-quote-box::before {
            content: '"';
            position: absolute;
            top: -0.5rem;
            left: 1rem;
            font-size: 4rem;
            color: var(--accent-color);
            font-weight: 700;
            background: var(--bg-cream);
            padding: 0 0.5rem;
        }

        .enhanced-quote-box p {
            margin: 0;
            font-style: italic;
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--text-dark);
        }

        .quote-attribution {
            font-weight: 700;
            color: var(--primary-color);
        }

        .content-section {
            margin: 2.5rem 0;
        }

        .section-heading {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--accent-color);
            position: relative;
        }

        .section-heading::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary-color);
        }

        .content-text {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--text-dark);
            margin-bottom: 1.5rem;
        }

        .enhanced-metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .enhanced-metric-card {
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 12px;
            padding: 2rem 1rem;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .enhanced-metric-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--accent-color);
        }

        .enhanced-metric-card:hover {
            border-color: var(--accent-color);
            box-shadow: var(--shadow-medium);
            transform: translateY(-3px);
        }

        .enhanced-metric-number {
            font-size: 2.2rem;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
            display: block;
        }

        .enhanced-metric-label {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-medium);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }



        .enhanced-btn {
            background: var(--primary-color);
            color: white;
            border: 2px solid var(--primary-color);
            padding: 1rem 2rem;
            border-radius: 999px;
            font-family: var(--font-display);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            transition: all 0.25s ease;
            cursor: pointer;
            width: 100%;
            margin-top: 2rem;
        }
        .enhanced-btn:focus-visible {
            outline: 3px solid var(--accent-color);
            outline-offset: 3px;
        }

        .enhanced-btn:hover {
            background: white;
            color: var(--primary-color);
            box-shadow: var(--shadow-medium);
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .enhanced-article-card {
                padding: 2rem;
            }
            
            .service-title {
                font-size: 1.5rem;
            }
            
            .enhanced-metrics-grid {
                grid-template-columns: 1fr;
            }
            

        }
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 700;
            color: var(--text-dark);
            font-family: var(--font-family);
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.05em;
        }

        .form-input {
            width: 100%;
            padding: 0.8rem;
            border: 2px solid var(--border-dark);
            background-color: white;
            font-family: var(--font-family);
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .form-textarea {
            resize: vertical;
            min-height: 100px;
            font-family: var(--font-family);
        }

        /* Mobile-First Responsive Design */
        
        /* Base Mobile Styles (320px+) */
        img, video, iframe {
            max-width: 100%;
            height: auto;
        }
        
        /* ══════════════════════════════════════════
           MOBILE STYLES - Complete rewrite
           Fixes: nav overlap, hamburger position,
           typography, grids, forms, landscape mode
           ══════════════════════════════════════════ */

        /* ── All mobile (≤767px) ── */
        @media (max-width: 767px) {

            /* Typography */
            h1 {
                font-size: clamp(1.5rem, 5vw, 2rem);
                line-height: 1.25;
            }
            h2 {
                font-size: clamp(1.3rem, 4vw, 1.7rem);
                line-height: 1.3;
            }
            h3 {
                font-size: 1.1rem;
            }

            /* Containers */
            .container {
                padding: 0 1rem;
            }
            .page-container {
                padding: 1rem;
            }

            /* Hero */
            .hero {
                padding: 1.5rem 0 2rem;
            }
            .hero-buttons {
                flex-direction: column;
                width: 100%;
                gap: 0.8rem;
            }
            .hero-buttons .btn {
                width: 100%;
                text-align: center;
            }

            /* Buttons */
            .btn {
                padding: 0.8rem 1.2rem;
                font-size: 0.9rem;
                min-height: 44px;
            }
            .timeline-item {
                flex-direction: column;
                text-align: center;
            }

            /* Result cards */
            .result-card {
                padding: 1.5rem 1rem;
                margin-bottom: 1.5rem;
            }


            /* Forms */
            .form-row {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
            .checkbox-group {
                flex-direction: column;
                gap: 0.8rem;
            }
            .form-input,
            .form-textarea,
            select {
                font-size: 16px; /* Prevents iOS zoom */
                min-height: 44px;
            }

            /* Modals */
            .modal-content {
                margin: 0.5rem;
                padding: 1rem;
                max-height: 88vh;
                max-width: 95vw;
                overflow-y: auto;
            }
        }

        /* ── Small phones only (≤480px) ── */
        

        /* ── Landscape phones ── */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero {
                padding: 0.75rem 0 1rem;
            }
            h1 { font-size: 1.2rem; }
            h2 { font-size: 1rem; }
            h3 { font-size: 0.95rem; }
            .hero-buttons {
                flex-direction: row;
                gap: 0.5rem;
            }
            .hero-buttons .btn {
                width: auto;
                flex: 1;
                padding: 0.5rem 0.8rem;
                font-size: 0.8rem;
            }
            .service-columns,
            .news-grid,
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Tablet Design */
        @media (min-width: 768px) {
            .news-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .stats-grid {
                grid-template-columns: repeat(4, 1fr);
            }
            
            .timeline-item {
                align-items: center;
            }
            
            .editorial-content {
                grid-template-columns: 2fr 1fr;
                gap: 4rem;
            }
            
            .about-columns {
                grid-template-columns: 2fr 1fr;
                gap: 3rem;
            }
            
            .service-columns {
                grid-template-columns: repeat(2, 1fr);
                gap: 3rem;
            }
            
            .process-columns {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .contact-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .news-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Contact Form Styles */
        .contact-form {
            max-width: 800px;
            margin: 0 auto;
        }

        .form-section {
            margin-bottom: 2.5rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid var(--border-light);
            border-radius: 8px;
        }

        .form-section-title {
            font-family: var(--font-family);
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--primary-color);
            margin-bottom: 1.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .form-row:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 768px) {
            .form-row {
                grid-template-columns: 1fr 1fr;
            }
            
            .form-row .form-group-full {
                grid-column: 1 / -1;
            }
        }

        .form-group {
            margin-bottom: 0;
        }

        .form-group label {
            display: block;
            font-family: var(--font-family);
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            min-height: 20px;
            line-height: 1.2;
        }

        /* Ensure consistent spacing between form elements */
        .form-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
            align-items: start;
        }

        .form-row:last-child {
            margin-bottom: 0;
        }

        @media (min-width: 768px) {
            .form-row {
                grid-template-columns: 1fr 1fr;
                align-items: end; /* Align form elements to bottom for consistent baseline */
            }
            
            .form-row .form-group-full {
                grid-column: 1 / -1;
            }
        }

        /* Ensure all form groups have consistent structure */
        .form-group {
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            height: 48px; /* Fixed height for inputs and selects */
            padding: 0.75rem 1rem;
            border: 2px solid var(--border-color);
            background-color: white;
            font-family: var(--font-family);
            font-size: 1rem;
            color: var(--text-dark);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            box-sizing: border-box;
            border-radius: 4px;
        }

        .form-group textarea {
            height: auto; /* Reset height for textarea */
            min-height: 120px;
            resize: vertical;
        }

        .form-group select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 0.75rem center;
            background-repeat: no-repeat;
            background-size: 16px 16px;
            padding-right: 3rem;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
        }

        /* Checkbox Styles - Fixed Alignment */
        .checkbox-group {
            display: block;
            padding: 1rem;
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 4px;
        }

        .checkbox-label {
            display: flex;
            align-items: flex-start;
            cursor: pointer;
            font-family: var(--font-family);
            font-size: 0.95rem;
            color: var(--text-dark);
            padding: 0.75rem;
            border: 1px solid var(--border-light);
            border-radius: 4px;
            transition: all 0.3s ease;
            background: white;
            margin-bottom: 0.75rem;
        }
        
        @media (max-width: 767px) {
            .checkbox-label {
                padding: 1rem;
                margin-bottom: 1rem;
                min-height: 48px;
                align-items: center;
            }
        }

        .checkbox-label:last-child {
            margin-bottom: 0;
        }

        .checkbox-label:hover {
            background-color: var(--bg-light);
            border-color: var(--primary-color);
        }

        .checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            margin-right: 12px;
            margin-top: 2px;
            flex-shrink: 0;
            cursor: pointer;
        }

        .checkbox-label span {
            flex: 1;
            line-height: 1.4;
        }

        .checkbox-label input[type="checkbox"]:checked ~ span {
            font-weight: 600;
        }

        .form-submit-btn {
            width: 100%;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            font-weight: 600;
            margin: 2rem 0 1rem 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .form-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }

        .form-privacy-note {
            font-size: 0.85rem;
            color: var(--text-light);
            text-align: center;
            margin-top: 1rem;
            font-style: italic;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }

        .form-privacy-note i {
            color: var(--accent-color);
        }

        /* Modal System - Proper Working CSS */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 1rem;
        }

        .modal-overlay.active {
            display: flex;
        }

        .modal-content {
            background: var(--bg-cream);
            border: 3px double var(--primary-color);
            border-radius: 8px;
            padding: 2rem;
            max-width: 800px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }

        .modal-close {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-medium);
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10001;
        }

        .modal-close:hover {
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .modal-content {
                margin: 1rem;
                padding: 1.5rem;
                max-height: 85vh;
                max-width: 95vw;
            }
        }

        /* ─── Trust Bar (Fix 8) ───────────────────────────────────────── */
        .trust-bar {
            background: var(--primary-color);
            padding: 14px 0;
            border-bottom: 2px solid rgba(255,255,255,0.12);
        }
        .trust-bar-inner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0;
            flex-wrap: wrap;
        }
        .trust-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 24px;
            color: white;
        }
        .trust-stars {
            color: #f6d860;
            font-size: 0.85rem;
            letter-spacing: 1px;
        }
        .trust-icon {
            color: #f6d860;
            font-size: 0.8rem;
        }
        .trust-text {
            font-family: var(--font-display);
            font-size: 0.82rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: rgba(255,255,255,0.92);
            white-space: nowrap;
        }
        .trust-divider {
            width: 1px;
            height: 20px;
            background: rgba(255,255,255,0.25);
            flex-shrink: 0;
        }
        @media (max-width: 768px) {
            .trust-bar-inner { gap: 0; justify-content: flex-start; overflow-x: auto; }
            .trust-divider { display: none; }
            .trust-item { padding: 4px 16px; }
            .trust-text { font-size: 0.78rem; }
        }

        /* ─── Scroll Fade-in Animations (Fix 3) ──────────────────────── */
        .fade-in-up {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity 0.55s ease, transform 0.55s ease;
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        /* Stagger delay for grid children */
        .fade-in-up:nth-child(2) { transition-delay: 0.1s; }
        .fade-in-up:nth-child(3) { transition-delay: 0.2s; }
        .fade-in-up:nth-child(4) { transition-delay: 0.3s; }

        /* ─── Dark Mode (Fix 6) ───────────────────────────────────────── */
        @media (prefers-color-scheme: dark) {
            
            body { background-color: var(--bg-cream); color: var(--text-dark); }
            .enhanced-article-card,
            .result-card,
            .overview-card,
            .article-card { background: var(--bg-light); border-color: var(--border-color); }
            .trust-bar { background: #0f1623; }
            input, textarea, select {
                background: var(--bg-light);
                color: var(--text-dark);
                border-color: var(--border-dark);
            }
        }

        /* ─── prefers-reduced-motion (Fix 7) ─────────────────────────── */
        @media (prefers-reduced-motion: reduce) {
            
            .fade-in-up {
                opacity: 1;
                transform: none;
                transition: none;
            }
            .page {
                transition: none;
            }
            html { scroll-behavior: auto; }
        }

        /* ─── Enhanced btn focus states ──────────────────────────────── */
        .enhanced-btn {
            border-radius: 999px;
            font-family: var(--font-display);
            font-weight: 700;
        }

        /* ─── Major section spacing upgrade (Fix 10) ─────────────────── */
        #results, #services, #about, #contact {
            scroll-margin-top: 80px;
        }
        @media (min-width: 769px) {
            .results-showcase { padding: 96px 0 !important; }
            .news-section { padding-top: 96px !important; padding-bottom: 96px !important; }
            .editorial-section { padding: 96px 0 !important; }
            .classified-section { padding: 96px 0 !important; }
            #practice-insights { padding-top: 96px !important; padding-bottom: 96px !important; }
        }

        /* ============================================
           OPHTHACONSULTING — GLOBAL IMAGE SYSTEM
           Brand Colors: Teal #0D7377 | Navy #1A1F3D | Gold #C8A951
           ============================================ */

        /* Full-width section background images */
        .oc-bg-image {
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
        }
        .oc-bg-image::before {
          content: '';
          position: absolute;
          top: 0; left: 0; right: 0; bottom: 0;
          background: linear-gradient(
            180deg,
            rgba(26, 31, 61, 0.75) 0%,
            rgba(26, 31, 61, 0.60) 50%,
            rgba(26, 31, 61, 0.80) 100%
          );
          z-index: 1;
        }
        .oc-bg-image > * { position: relative; z-index: 2; }

        /* Inline content images */
        .oc-content-image {
          width: 100%;
          height: auto;
          border-radius: 12px;
          box-shadow: 0 20px 60px rgba(13, 115, 119, 0.15), 0 4px 16px rgba(0,0,0,0.1);
          transition: transform 0.4s ease, box-shadow 0.4s ease;
          display: block;
        }
        .oc-content-image:hover {
          transform: translateY(-4px);
          box-shadow: 0 28px 80px rgba(13, 115, 119, 0.20), 0 8px 24px rgba(0,0,0,0.15);
        }

        /* Split image+text layout */
        .oc-split-section {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
          align-items: center;
          padding: 60px 0;
        }
        @media (max-width: 768px) {
          .oc-split-section { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
        }

        /* Blog featured image */
        .oc-blog-hero {
          width: 100%;
          aspect-ratio: 16/9;
          object-fit: cover;
          border-radius: 16px;
          margin: 32px 0 48px;
          box-shadow: 0 16px 48px rgba(0,0,0,0.12);
          border: 1px solid rgba(13,115,119,0.1);
        }

        /* Parallax */
        .oc-parallax { background-attachment: fixed; }
        @media (max-width: 768px) { .oc-parallax { background-attachment: scroll; } }

        /* Lazy load fade */
        img[loading="lazy"] { opacity: 0; transition: opacity 0.5s ease; }
        img[loading="lazy"].loaded { opacity: 1; }

        /* Stats result cards with background images */
        .result-card.has-bg-img {
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          position: relative;
          overflow: hidden;
          color: #fff;
        }
        .result-card.has-bg-img::after {
          content: '';
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, rgba(26,31,61,0.80) 0%, rgba(26,31,61,0.70) 100%);
          z-index: 0;
        }
        .result-card.has-bg-img .result-content {
          position: relative;
          z-index: 1;
        }
        .result-card.has-bg-img h3,
        .result-card.has-bg-img .metric-number,
        .result-card.has-bg-img p { color: #fff !important; }
        .result-card.has-bg-img .metric-label { color: rgba(255,255,255,0.85) !important; }

        /* Phase images sidebar */
        .phase-with-img {
          display: grid;
          grid-template-columns: 260px 1fr;
          gap: 40px;
          align-items: start;
          margin-bottom: 48px;
        }
        .phase-with-img img { border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
        @media (max-width: 900px) {
          .phase-with-img { grid-template-columns: 1fr; }
        }

        /* Diana quote style */
        .diana-quote-block {
          background: linear-gradient(135deg, rgba(26,31,61,0.03) 0%, rgba(200,169,81,0.08) 100%);
          border-left: 4px solid #C8A951;
          padding: 2rem 2.5rem;
          margin: 2rem 0;
          border-radius: 0 12px 12px 0;
        }
        .diana-quote-block blockquote {
          font-style: italic;
          font-size: 1.2rem;
          color: rgba(255,255,255,.88);
          margin: 0 0 0.75rem 0;
          line-height: 1.7;
        }
        .diana-quote-block cite { color: #C8A951; font-weight: 700; font-style: normal; }
    
/* ═══════════════════════════════════════════════════════
   HOMEPAGE 2025 — matching services page design DNA
   ═══════════════════════════════════════════════════════ */

/* ── HERO ── */
.hp-hero{position:relative;min-height:85vh;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;}
.hp-hero::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,18,40,.70) 0%,rgba(15,18,40,.55) 40%,rgba(13,115,119,.25) 70%,rgba(15,18,40,.80) 100%);}
.hp-hero>*{position:relative;z-index:2;}
.hp-hero-h1{font-size:clamp(2.2rem,5.5vw,4rem);color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1.15;text-align:center;max-width:900px;margin:0 auto 20px;}
.hp-hero-sub{font-size:clamp(1rem,2vw,1.25rem);color:rgba(255,255,255,.75);text-align:center;max-width:700px;line-height:1.8;margin:0 auto 40px;}
.hp-hero-cta{display:inline-block;padding:16px 44px;background:linear-gradient(135deg,#0D7377,#14A3A8);color:#fff;text-decoration:none;border-radius:50px;font-size:1.05rem;font-weight:600;letter-spacing:.04em;box-shadow:0 8px 32px rgba(13,115,119,.45);transition:all .3s ease;}
.hp-hero-cta:hover{transform:translateY(-3px);box-shadow:0 14px 44px rgba(13,115,119,.6);}

/* ── STATS BLOCKS ── */
.hp-stats-block{position:relative;padding:100px 0;background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;}
.hp-stats-block::before{content:'';position:absolute;inset:0;z-index:1;}
.hp-stats-block>*{position:relative;z-index:2;}
.hp-transform::before{background:linear-gradient(135deg,rgba(15,18,40,.85) 0%,rgba(212,145,59,.18) 100%);}
.hp-staff::before{background:linear-gradient(135deg,rgba(15,18,40,.85) 0%,rgba(13,115,119,.20) 100%);}
.hp-competitive::before{background:linear-gradient(135deg,rgba(15,18,40,.85) 0%,rgba(200,169,81,.18) 100%);}
.hp-stats-inner{max-width:1200px;margin:0 auto;padding:0 24px;text-align:center;}
.hp-stats-block h2{font-size:clamp(1.8rem,3.5vw,2.5rem);color:#fff;font-weight:700;margin-bottom:16px;}
.hp-block-desc{font-size:1.05rem;color:rgba(255,255,255,.70);max-width:720px;margin:0 auto 56px;line-height:1.85;}
.hp-stats-row{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;}
.hp-stat-card{text-align:center;background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 40px;min-width:190px;transition:all .4s ease;}
.hp-stat-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);box-shadow:0 20px 50px rgba(0,0,0,.25);}
.hp-num{display:block;font-size:clamp(2rem,4.5vw,3.2rem);font-weight:800;line-height:1.1;}
.hp-transform .hp-num{background:linear-gradient(135deg,#D4913B,#E8B76A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hp-staff .hp-num{background:linear-gradient(135deg,#0D7377,#14A3A8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hp-competitive .hp-num{background:linear-gradient(135deg,#C8A951,#E8D48B);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hp-lbl{display:block;margin-top:10px;font-size:.82rem;color:rgba(255,255,255,.75);letter-spacing:.08em;text-transform:uppercase;}

/* ── 786 REVIEWS INTRO ── */
.hp-reviews-intro{padding:100px 0;background:linear-gradient(180deg,#0F1228,#1A1F3D);}
.hp-reviews-inner{max-width:1100px;margin:0 auto;padding:0 24px;text-align:center;}
.hp-reviews-inner img{width:100%;max-width:960px;height:auto;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.35);margin:0 auto 56px;display:block;}
.hp-reviews-text{max-width:800px;margin:0 auto;text-align:left;}
.hp-reviews-text p{font-size:1.1rem;line-height:1.9;color:rgba(255,255,255,.78);}
.hp-reviews-text strong{color:#C8A951;}
.hp-reviews-text em{color:#14A3A8;}

/* ── SERVICE MODULES ── */
.hp-svc-module{padding:100px 0;}
.hp-mod-grid{max-width:1200px;margin:0 auto;padding:0 40px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.hp-mod-grid.hp-mod-reverse{direction:rtl;}
.hp-mod-grid.hp-mod-reverse>*{direction:ltr;}
.hp-mod-grid img{width:100%;height:auto;border-radius:24px;box-shadow:0 24px 64px rgba(13,115,119,.18);transition:all .4s ease;}
.hp-mod-grid img:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 32px 80px rgba(13,115,119,.25);}
.hp-accent{width:48px;height:3px;border-radius:2px;margin-bottom:20px;}
.hp-accent.amber{background:linear-gradient(90deg,#D4913B,#E8B76A);}
.hp-accent.teal{background:linear-gradient(90deg,#0D7377,#14A3A8);}
.hp-accent.gold{background:linear-gradient(90deg,#C8A951,#E8D48B);}
.hp-mod-text h3{font-size:clamp(1.4rem,3vw,1.9rem);color:#fff;font-weight:600;margin-bottom:16px;}
.hp-bq{font-size:.98rem;font-style:italic;color:rgba(255,255,255,.76);border-left:3px solid rgba(200,169,81,.3);padding-left:20px;margin:0 0 24px;line-height:1.7;}
.hp-mod-text p{font-size:1.02rem;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px;}
.hp-mini-stats{display:flex;gap:28px;margin-top:32px;flex-wrap:wrap;}
.hp-mini{text-align:center;}
.hp-mini-num{display:block;font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,#0D7377,#C8A951);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hp-mini-lbl{font-size:.72rem;color:rgba(255,255,255,.73);text-transform:uppercase;letter-spacing:.1em;}
.hp-rel-links{margin-top:32px;}
.hp-rel-links a{display:block;padding:8px 0;color:#14A3A8;text-decoration:none;font-size:.93rem;transition:color .3s;border-bottom:1px solid rgba(13,115,119,.12);}
.hp-rel-links a:hover{color:#C8A951;}

/* ── DIVIDER ── */
.hp-divider{display:flex;align-items:center;justify-content:center;padding:0;gap:20px;background:#0F1228;}
.hp-divider span{flex:1;max-width:200px;height:1px;background:linear-gradient(90deg,transparent,rgba(13,115,119,.3),transparent);}
.hp-divider img{width:100%;max-width:100%;height:60px;object-fit:cover;opacity:.25;}

/* ── 3-PHASE PROCESS ── */
.hp-process{padding:100px 0;background:linear-gradient(180deg,#1A1F3D,#0F1228);text-align:center;}
.hp-process-inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.hp-process h2{font-size:clamp(1.8rem,3.5vw,2.5rem);color:#fff;font-weight:700;margin-bottom:48px;}
.hp-process-img{width:100%;max-width:1000px;height:auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);margin:0 auto 64px;display:block;}
.hp-phase-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left;}
.hp-phase-card{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:40px 28px;transition:all .4s ease;position:relative;overflow:hidden;}
.hp-phase-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .5s ease;}
.hp-phase-card:hover::before{transform:scaleX(1);}
.hp-phase-card:nth-child(1)::before{background:linear-gradient(90deg,#D4913B,#E8B76A);}
.hp-phase-card:nth-child(2)::before{background:linear-gradient(90deg,#0D7377,#14A3A8);}
.hp-phase-card:nth-child(3)::before{background:linear-gradient(90deg,#C8A951,#E8D48B);}
.hp-phase-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(0,0,0,.2);}
.hp-p-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;font-size:1.3rem;font-weight:800;margin-bottom:20px;}
.hp-p1{background:linear-gradient(135deg,#D4913B,#E8B76A);color:#1A1F3D;}
.hp-p2{background:linear-gradient(135deg,#0D7377,#14A3A8);color:#fff;}
.hp-p3{background:linear-gradient(135deg,#C8A951,#E8D48B);color:#1A1F3D;}
.hp-phase-card h3{font-size:1.1rem;color:#fff;font-weight:600;margin-bottom:12px;}
.hp-phase-card p{font-size:.93rem;color:rgba(255,255,255,.80);line-height:1.75;}
.hp-phase-card ul{list-style:none;padding:0;margin:14px 0 0;}
.hp-phase-card li{font-size:.85rem;color:rgba(255,255,255,.75);padding:5px 0 5px 16px;position:relative;border-bottom:1px solid rgba(255,255,255,.04);}
.hp-phase-card li::before{content:'→';position:absolute;left:0;color:#0D7377;font-size:.78rem;}

/* ── CTA ── */
.hp-cta-section{position:relative;min-height:52vh;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;background-attachment:fixed;overflow:hidden;}
.hp-cta-section::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,18,40,.78) 0%,rgba(13,115,119,.22) 50%,rgba(15,18,40,.82) 100%);}
.hp-cta-section>*{position:relative;z-index:2;}
.hp-cta-inner{max-width:700px;padding:80px 32px;text-align:center;}
.hp-cta-section h3{font-size:clamp(1.8rem,3vw,2.5rem);color:#fff;margin-bottom:16px;}
.hp-cta-section p{color:rgba(255,255,255,.78);max-width:600px;margin:0 auto 32px;font-size:1.05rem;line-height:1.8;}
.hp-cta-note{margin-top:16px!important;font-size:.82rem!important;color:rgba(255,255,255,.70)!important;}

/* ── SCROLL REVEAL ── */
.hp-sr{opacity:0;transform:translateY(36px);transition:opacity .75s ease,transform .75s ease;}
.hp-sr.hp-visible{opacity:1;transform:translateY(0);}
.hp-sri{opacity:0;transform:scale(.96);transition:opacity .85s ease .1s,transform .85s ease .1s;}
.hp-sri.hp-visible{opacity:1;transform:scale(1);}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .hp-hero{min-height:70vh;background-attachment:scroll;}
  .hp-stats-block{padding:70px 24px;background-attachment:scroll;}
  .hp-mod-grid{grid-template-columns:1fr;gap:40px;padding:0 24px;}
  .hp-mod-grid.hp-mod-reverse{direction:ltr;}
  .hp-phase-cards{grid-template-columns:1fr;}
  .hp-stats-row{gap:16px;}
  .hp-stat-card{min-width:140px;padding:24px 20px;}
  .hp-cta-section{background-attachment:scroll;}
  .hp-reviews-inner img{margin-bottom:36px;}
}

/* Homepage stagger-reveal entrance states */
.hp-stat-card{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease;}
.hp-stat-card.hp-visible{opacity:1;transform:translateY(0);}
.hp-stat-card:hover{transform:translateY(-6px)!important;background:rgba(255,255,255,.09);box-shadow:0 20px 50px rgba(0,0,0,.25);}
.hp-phase-card{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.hp-phase-card.hp-visible{opacity:1;transform:translateY(0);}
.hp-phase-card:hover{transform:translateY(-6px)!important;background:rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(0,0,0,.2);}

/* ═══ SERVICES DESIGN SYSTEM (shared with /services page) ═══ */
/* ════════════════════════════════════════
     SERVICES SECTION — 3-PHASE SYSTEM
     Amber (Phase 1) → Teal (Phase 2) → Gold (Phase 3)
  ════════════════════════════════════════ */

  /* 1. HEADER BANNER */


  /* 2. PHASE QUOTE CINEMATIC */
  .phase-quote{
    position:relative;min-height:38vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .phase-quote::before{content:'';position:absolute;inset:0;z-index:1}
  .phase-quote.phase-1::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(212,145,59,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-2::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(13,115,119,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-3::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(200,169,81,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote .qcontent{position:relative;z-index:2;max-width:800px;padding:5rem 2rem;text-align:center}
  .quote-mark{font-size:5rem;font-family:Georgia,serif;line-height:.5;margin-bottom:1rem;opacity:.32}
  .phase-1 .quote-mark{color:var(--p1)}
  .phase-2 .quote-mark{color:var(--p2l)}
  .phase-3 .quote-mark{color:var(--p3)}
  .phase-quote blockquote{font-size:clamp(1.1rem,2.2vw,1.45rem);font-style:italic;color:#fff;line-height:1.8;font-weight:300;border:none;padding:0;margin:0}
  .phase-quote .qsource{margin-top:1.25rem;font-size:.82rem;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.15em}

  /* 3. PHASE CONTENT WRAPPER */
  .phase-content{
    padding:90px 0;position:relative;
    background-size:400px 400px;background-repeat:repeat;
  }
  .phase-content::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
  .phase-1.phase-content{background-color:var(--navy2)}
  .phase-1.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(15,18,40,.9))}
  .phase-2.phase-content{background-color:var(--navy)}
  .phase-2.phase-content::after{background:linear-gradient(180deg,rgba(26,31,61,.94),rgba(15,18,40,.9))}
  .phase-3.phase-content{background-color:var(--navy2)}
  .phase-3.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(26,31,61,.9))}
  .phase-content>*{position:relative;z-index:1}

  /* 4. HERO SPLIT — img/text 50/50 */
  .phase-hero-split{
    max-width:1200px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  }
  .phase-number-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:18px;
    font-size:1.7rem;font-weight:800;margin-bottom:1.25rem;
  }
  .phase-1 .phase-number-badge{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 8px 28px var(--p1g)}
  .phase-2 .phase-number-badge{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 8px 28px var(--p2g)}
  .phase-3 .phase-number-badge{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 8px 28px var(--p3g)}
  .phase-accent-line{width:44px;height:3px;border-radius:2px;margin-bottom:1.1rem}
  .phase-1 .phase-accent-line{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-2 .phase-accent-line{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-3 .phase-accent-line{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-hero-split h2{font-size:clamp(1.4rem,3vw,2rem);color:#fff;font-weight:700;margin-bottom:1rem}
  .phase-hero-split .problem-text{font-size:1.02rem;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px}
  .phase-hero-split .hero-img{width:100%;height:360px;object-fit:cover;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.35);transition:transform .4s,box-shadow .4s}
  .phase-hero-split .hero-img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 32px 80px rgba(0,0,0,.45)}

  /* 5. SUBSECTION CARDS — glassmorphism 3-col */
  .subsection-cards{
    max-width:1200px;margin:56px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  }
  .subsection-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-radius:18px;padding:32px 26px;
    transition:all .35s;position:relative;overflow:hidden;
  }
  .subsection-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .45s ease;transform-origin:left}
  .subsection-card:hover::before{transform:scaleX(1)}
  .phase-1 .subsection-card{border:1px solid rgba(212,145,59,.14)}
  .phase-1 .subsection-card::before{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-1 .subsection-card:hover{background:rgba(212,145,59,.06);border-color:rgba(212,145,59,.28);box-shadow:0 16px 48px var(--p1g)}
  .phase-2 .subsection-card{border:1px solid rgba(13,115,119,.14)}
  .phase-2 .subsection-card::before{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-2 .subsection-card:hover{background:rgba(13,115,119,.06);border-color:rgba(13,115,119,.28);box-shadow:0 16px 48px var(--p2g)}
  .phase-3 .subsection-card{border:1px solid rgba(200,169,81,.14)}
  .phase-3 .subsection-card::before{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-3 .subsection-card:hover{background:rgba(200,169,81,.06);border-color:rgba(200,169,81,.28);box-shadow:0 16px 48px var(--p3g)}
  .subsection-card h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:1.1rem;line-height:1.3}
  .subsection-card ul{list-style:none;padding:0;margin:0}
  .subsection-card li{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.80);padding:7px 0 7px 18px;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
  .subsection-card li:last-child{border-bottom:none}
  .subsection-card li::before{content:'→';position:absolute;left:0;font-size:.78rem}
  .phase-1 .subsection-card li::before{color:var(--p1)}
  .phase-2 .subsection-card li::before{color:var(--p2l)}
  .phase-3 .subsection-card li::before{color:var(--p3)}

  /* 6. DELIVERABLE SPLIT */
  .deliverable-section{
    max-width:1200px;margin:72px auto 0;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  }
  .deliverable-section .deliv-img{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 56px rgba(0,0,0,.28);transition:transform .4s,box-shadow .4s}
  .deliverable-section .deliv-img:hover{transform:translateY(-4px);box-shadow:0 28px 72px rgba(0,0,0,.38)}
  .deliverable-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem}
  .phase-1 .deliverable-label{color:var(--p1)}
  .phase-2 .deliverable-label{color:var(--p2l)}
  .phase-3 .deliverable-label{color:var(--p3)}
  .deliverable-section h3{font-size:1.5rem;color:#fff;font-weight:700;margin-bottom:1rem}
  .deliverable-section p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.68)}
  .deliv-cta{display:inline-block;margin-top:1.5rem;padding:.85rem 2rem;border-radius:50px;font-size:.92rem;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .25s}
  .phase-1 .deliv-cta{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 6px 24px var(--p1g)}
  .phase-1 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p1g)}
  .phase-2 .deliv-cta{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 6px 24px var(--p2g)}
  .phase-2 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p2g)}
  .phase-3 .deliv-cta{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 6px 24px var(--p3g)}
  .phase-3 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p3g)}

  /* 7. PHASE TRANSITIONS */
  .phase-transition{background:var(--navy2);line-height:0;overflow:hidden}
  .phase-transition img{width:100%;height:90px;object-fit:cover;opacity:.65;transition:opacity .4s;display:block}
  .phase-transition:hover img{opacity:1}

  /* 8. RELATED INSIGHTS — per phase */
  .phase-insights{max-width:1200px;margin:56px auto 0;padding:0 24px 80px}
  .phase-insights-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem}
  .phase-1 .phase-insights-label{color:var(--p1)}
  .phase-2 .phase-insights-label{color:var(--p2l)}
  .phase-3 .phase-insights-label{color:var(--p3)}
  .phase-insights ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
  .phase-insights li a{display:inline-block;padding:.45rem 1rem;border-radius:50px;font-size:.85rem;text-decoration:none;font-weight:600;transition:all .25s;border:1px solid}
  .phase-1 .phase-insights li a{color:var(--p1);border-color:rgba(212,145,59,.3);background:rgba(212,145,59,.06)}
  .phase-1 .phase-insights li a:hover{background:rgba(212,145,59,.18);border-color:var(--p1)}
  .phase-2 .phase-insights li a{color:var(--p2l);border-color:rgba(13,115,119,.3);background:rgba(13,115,119,.06)}
  .phase-2 .phase-insights li a:hover{background:rgba(13,115,119,.18);border-color:var(--p2l)}
  .phase-3 .phase-insights li a{color:var(--p3);border-color:rgba(200,169,81,.3);background:rgba(200,169,81,.06)}
  .phase-3 .phase-insights li a:hover{background:rgba(200,169,81,.18);border-color:var(--p3)}

  /* 9. CTA SECTION */
  .services-cta{
    position:relative;min-height:52vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .services-cta::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,18,40,.78) 0%,rgba(13,115,119,.22) 50%,rgba(15,18,40,.82) 100%);
    z-index:1;
  }
  .services-cta>*{position:relative;z-index:2}
  .cta-inner{max-width:680px;padding:5rem 2rem;text-align:center}
  .services-cta h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:1rem}
  .services-cta p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.85;margin-bottom:2.5rem;max-width:580px;margin-left:auto;margin-right:auto}
  .cta-button{
    display:inline-block;padding:1.1rem 3rem;
    background:linear-gradient(135deg,var(--p2),var(--p2l));
    color:#fff;text-decoration:none;border-radius:50px;
    font-size:1.05rem;font-weight:700;letter-spacing:.05em;
    box-shadow:0 8px 32px rgba(13,115,119,.4);
    transition:all .3s;
  }
  .cta-button:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(13,115,119,.55)}
  .cta-sub{display:block;margin-top:1.25rem;font-size:.85rem;color:rgba(255,255,255,.70);letter-spacing:.03em}

  /* 10. FROM THE BLOG */
  .blog-intel{background:var(--navy2);padding:5rem 0;border-top:1px solid rgba(255,255,255,.06)}
  .blog-intel-header{text-align:center;margin-bottom:3rem}
  .blog-intel-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--p3);margin-bottom:.75rem}
  .blog-intel-header h2{font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin-bottom:.75rem}
  .blog-intel-header p{color:rgba(255,255,255,.80);max-width:540px;margin:0 auto;font-size:.95rem}
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
  .blog-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1.75rem;transition:all .3s}
  .blog-card:hover{background:rgba(255,255,255,.07);border-color:rgba(200,169,81,.2);transform:translateY(-3px)}
  .blog-card-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--p3);margin-bottom:.75rem}
  .blog-card h3{font-size:1.05rem;color:#fff;margin-bottom:1rem;line-height:1.3}
  .blog-card ul{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.45rem}
  .blog-card ul li a{font-size:.875rem;color:rgba(255,255,255,.80);text-decoration:none;line-height:1.4;transition:color .2s}
  .blog-card ul li a:hover{color:var(--p3)}
  .blog-card-all{font-size:.82rem;font-weight:700;color:var(--p3);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
  .blog-card-all:hover{text-decoration:underline}
  .blog-view-all{text-align:center;margin-top:2.5rem}
  .blog-view-all a{display:inline-block;padding:.85rem 2.5rem;border:2px solid rgba(200,169,81,.4);color:var(--p3);border-radius:50px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.05em;transition:all .3s}
  .blog-view-all a:hover{background:rgba(200,169,81,.12);border-color:var(--p3)}

  /* 12. SCROLL REVEAL */
  .sr{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s ease}
  .sr.visible{opacity:1;transform:translateY(0)}
  .sr-img{opacity:0;transform:scale(.96);transition:opacity .8s ease .1s,transform .8s ease .1s}
  .sr-img.visible{opacity:1;transform:scale(1)}

  /* 13. RESPONSIVE */
  @media(max-width:968px){
    .phase-hero-split,.deliverable-section{grid-template-columns:1fr;gap:36px}
    .subsection-cards{grid-template-columns:1fr}
    .phase-hero-split .hero-img{height:220px}
    .phase-content{padding:60px 0}
    .services-header{background-attachment:scroll}
    .phase-quote{background-attachment:scroll}
    .services-cta{background-attachment:scroll}
  }
  @media(max-width:768px){
    .blog-grid{grid-template-columns:1fr}
  }
  @media(max-width:480px){
    .phase-hero-split{padding:0 1rem}
    .subsection-cards{padding:0 1rem}
    .deliverable-section{padding:0 1rem}
  }
  @media(prefers-reduced-motion:reduce){}
  
/* ═══ DARK THEME OVERRIDES — match services page visual language ═══ */
body {
  background: #0a0f1a !important;
  color: rgba(255,255,255,.82) !important;
}
.page-container { background: #0a0f1a !important; }

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — Design System Integration CSS
   Uses same phase-content / phase-quote / subsection-card
   design language as Services & Home pages
═══════════════════════════════════════════════════════════ */

/* Override old about-page background */
.about-page-section { background: #0a0f1a !important; }

/* About Hero — uses services-header structure */
.about-hero-banner.services-header { min-height: 70vh; }
.about-hero-title { color: #fff; font-size: clamp(2rem,5vw,3.5rem); font-family: var(--font-family); font-weight: 700; margin-bottom: .75rem; line-height: 1.15; }
.about-hero-tagline { color: rgba(255,255,255,0.88); font-size: clamp(1rem,2vw,1.25rem); font-style: italic; margin: 0; }

/* Phase background variants for About page */
.about-phase-bg-1 { background: #0d1220 !important; }
.about-phase-bg-2 { background: #0a0f1a !important; }
.about-phase-dark  { background: #080d18 !important; }

/* About page phase-content sections need the inner wrapper */
.about-phase-bg-1 .phase-content-inner,
.about-phase-bg-2 .phase-content-inner,
.about-phase-dark .phase-content-inner { max-width: 1200px; margin: 0 auto; padding: 5rem 2rem; }

/* split-heading & split-body — shared classes, ensure dark-theme styling */
.split-heading { color: #fff; font-size: clamp(1.5rem,3vw,2.2rem); font-family: var(--font-family); font-weight: 700; margin: 1rem 0 1.25rem; line-height: 1.2; }
.split-body { color: rgba(255,255,255,.82); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1rem; }

/* About badge variants */
.about-badge-1 { background: rgba(200,169,81,.15); color: #C8A951; border: 1px solid rgba(200,169,81,.3); }
.about-badge-2 { background: rgba(56,178,172,.15); color: #38b2ac; border: 1px solid rgba(56,178,172,.3); }
.about-badge-3 { background: rgba(236,201,75,.15); color: #ecc94b; border: 1px solid rgba(236,201,75,.3); }
.about-accent-1 { background: linear-gradient(90deg,#C8A951,transparent); }
.about-accent-2 { background: linear-gradient(90deg,#38b2ac,transparent); }
.about-accent-3 { background: linear-gradient(90deg,#ecc94b,transparent); }

/* Phase-hero-split reverse (text left, image right) */
.phase-hero-split-rev { direction: rtl; }
.phase-hero-split-rev > * { direction: ltr; }

/* About Quote Parallax — uses phase-quote structure */
.about-quote-parallax { background-attachment: fixed; background-size: cover; background-position: center; }
.about-main-quote     { background-attachment: fixed; background-size: cover; background-position: center; }

/* Subsection header for About cards section */
.subsection-header { text-align: center; margin-bottom: 2.5rem; }
.subsection-title { color: #fff; font-size: clamp(1.6rem,3vw,2.2rem); font-family: var(--font-family); font-weight: 700; margin-top: .5rem; }

/* About cards — uses same subsection-card but with amber accent */
.about-card { border-top-color: rgba(200,169,81,.85) !important; }
.about-card .subsection-card-icon { color: #C8A951 !important; }
.about-card .subsection-card-title { color: #C8A951 !important; }

/* Language badges */
.about-lang-badges { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.about-lang-badge { display: inline-block; padding: .35rem .9rem; background: rgba(200,169,81,.12); border: 1px solid rgba(200,169,81,.35); border-radius: 20px; color: #C8A951; font-size: .875rem; font-weight: 600; letter-spacing: .04em; }

/* Credential list */
.about-credential-list { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.about-credential-item { display: flex; align-items: center; gap: 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(200,169,81,.18); border-radius: 10px; padding: 1rem 1.25rem; transition: background .25s, border-color .25s; }
.about-credential-item:hover { background: rgba(200,169,81,.08); border-color: rgba(200,169,81,.35); }
.about-cred-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(200,169,81,.15); border-radius: 8px; color: #C8A951; font-size: 1rem; flex-shrink: 0; }
.about-cred-title { font-weight: 700; color: #fff; font-size: .95rem; margin-bottom: .15rem; }
.about-cred-desc { font-size: .83rem; color: rgba(255,255,255,.65); }

/* Timeline list */
.about-timeline-list { display: flex; flex-direction: column; gap: .25rem; margin-top: 1.5rem; position: relative; }
.about-timeline-item { display: flex; align-items: flex-start; gap: 1.1rem; padding: .6rem 0; position: relative; }
.about-tl-dot { width: 13px; height: 13px; border-radius: 50%; background: #C8A951; flex-shrink: 0; margin-top: .35rem; position: relative; z-index: 1; }
.about-tl-dot::after { content:''; position: absolute; left: 50%; top: 13px; transform: translateX(-50%); width: 2px; height: calc(100% + 16px); background: rgba(200,169,81,.25); }
.about-timeline-item:last-child .about-tl-dot::after { display: none; }
.about-tl-dot-current { background: #0a0f1a; box-shadow: 0 0 0 3px #C8A951; }
.about-tl-content { flex: 1; }
.about-tl-year { font-weight: 700; color: #C8A951; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: .3rem; }
.about-tl-desc { color: rgba(255,255,255,.8); font-size: .95rem; line-height: 1.55; }

/* Closing CTA — uses services-cta structure, override for about */
.about-closing-section.services-cta { background-attachment: fixed; }

/* Responsive */
@media (max-width: 768px) {
  .phase-hero-split-rev { direction: ltr; }
  .about-phase-bg-1 .phase-content-inner,
  .about-phase-bg-2 .phase-content-inner,
  .about-phase-dark .phase-content-inner { padding: 3rem 1.25rem; }
  .about-lang-badges { gap: .5rem; }
  .about-credential-item { padding: .75rem 1rem; }
  .about-quote-parallax,
  .about-main-quote,
  .about-closing-section.services-cta { background-attachment: scroll; }
}


/* ═══════════════════════════════════════════════════════════
   SHARED DESIGN SYSTEM — Services/Home/About common classes
   (extracted from services page CSS, added to SPA stylesheet)
═══════════════════════════════════════════════════════════ */

/* Phase-content wrapper */
.phase-content{
  padding:90px 0;position:relative;
  background-size:400px 400px;background-repeat:repeat;
}
.phase-content::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
.phase-content-inner{max-width:1200px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* Phase-hero-split: 2-col 50/50 layout */
.phase-hero-split{
  max-width:1200px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
}
.hero-split-media img{width:100%;border-radius:18px;object-fit:cover;display:block}
.hero-split-media{border-radius:18px;overflow:hidden}
.hero-split-text{display:flex;flex-direction:column;justify-content:center}

/* Phase number badge */
.phase-number-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:18px;
  font-size:1.7rem;font-weight:800;margin-bottom:1.25rem;
}

/* Phase accent line */
.phase-accent-line{height:3px;width:64px;border-radius:2px;margin-bottom:1.5rem}

/* Svc eyebrow */
.svc-eyebrow{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:#C8A951;margin-bottom:1rem;display:block}

/* Phase-quote cinematic banner */
.phase-quote{
  position:relative;min-height:38vh;
  display:flex;align-items:center;justify-content:center;
  background-size:cover;background-position:center;background-attachment:fixed;
  overflow:hidden;
}
.phase-quote::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(200,169,81,.15) 50%,rgba(15,18,40,.88) 100%)}
.phase-quote .qcontent{position:relative;z-index:2;max-width:800px;padding:5rem 2rem;text-align:center}
.phase-quote blockquote{font-size:clamp(1.1rem,2.2vw,1.45rem);font-style:italic;color:#fff;line-height:1.8;font-weight:300;border:none;padding:0;margin:0 0 1rem}
.about-cite{color:#C8A951;font-weight:700;font-style:normal;font-size:.9rem;letter-spacing:.05em}

/* Services-header shared */
.services-header::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(15,18,40,.6) 50%,rgba(15,18,40,.88) 100%);
  z-index:1;
}
.services-header>*{position:relative;z-index:2}

/* Services-cta shared */
.services-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,18,40,.78) 0%,rgba(200,169,81,.18) 50%,rgba(15,18,40,.82) 100%);
  z-index:1;
}
.services-cta>*{position:relative;z-index:2}
.cta-inner{max-width:680px;padding:5rem 2rem;text-align:center}
.services-cta h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:1rem}
.services-cta p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.85;margin-bottom:1.25rem;max-width:580px;margin-left:auto;margin-right:auto}
.cta-button{
  display:inline-block;padding:.9rem 2.4rem;
  background:linear-gradient(135deg,#C8A951,#d4a843);
  color:#0a0f1a;font-weight:700;font-size:1rem;
  border-radius:8px;text-decoration:none;letter-spacing:.04em;
  transition:all .3s;
}
.cta-button:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(200,169,81,.4);color:#0a0f1a}

/* Subsection cards container */
.subsection-cards{
  max-width:1200px;margin:56px auto 0;padding:0 24px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.subsection-card{
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-radius:18px;padding:32px 26px;
  transition:all .35s;position:relative;overflow:hidden;
  border:1px solid rgba(200,169,81,.14);
}
.subsection-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .45s ease;transform-origin:left;background:linear-gradient(90deg,#C8A951,#d4b86a)}
.subsection-card:hover::before{transform:scaleX(1)}
.subsection-card:hover{background:rgba(200,169,81,.06);border-color:rgba(200,169,81,.28);box-shadow:0 16px 48px rgba(200,169,81,.12)}
.subsection-card-icon{font-size:1.6rem;margin-bottom:1rem;color:#C8A951}
.subsection-card h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:.65rem}
.subsection-card p{font-size:.93rem;color:rgba(255,255,255,.72);line-height:1.65}

/* Subsection header block */
.subsection-header{text-align:center;margin-bottom:2.5rem;padding:0 24px}
.subsection-header .svc-eyebrow{margin-bottom:.5rem}
.subsection-title{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;margin-top:.5rem}

/* Shared split heading/body (for About/Home split sections) */
.split-heading{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);font-family:var(--font-family);font-weight:700;margin:1rem 0 1.25rem;line-height:1.2}
.split-body{color:rgba(255,255,255,.82);font-size:1.02rem;line-height:1.75;margin-bottom:1rem}

/* sr scroll-reveal (services page uses .sr / .sr.revealed) */
.sr{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.sr.visible{opacity:1;transform:translateY(0)}
.sr-img{opacity:0;transform:scale(.97);transition:opacity .85s ease .1s,transform .85s ease .1s}
.sr-img.visible{opacity:1;transform:scale(1)}

/* Responsive shared */
@media(max-width:968px){
  .phase-hero-split{grid-template-columns:1fr;gap:40px;padding:0 1.25rem}
  .subsection-cards{grid-template-columns:1fr;padding:0 1.25rem;margin-top:32px}
  .phase-quote{background-attachment:scroll}
  .services-cta{background-attachment:scroll}
  .cta-inner{padding:4rem 1.5rem}
}
@media(max-width:640px){
  .phase-content{padding:60px 0}
  .subsection-card{padding:24px 20px}
}


/* ═══════════════════════════════════════════════════════════
   PROCESS PAGE — Dark design system CSS
═══════════════════════════════════════════════════════════ */

/* Evidence overview 2-col grid */
.proc-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Stat trio column */
.proc-stat-trio {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.proc-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,169,81,.2);
  border-radius: 14px;
  transition: background .3s, border-color .3s;
}
.proc-stat-card:hover {
  background: rgba(200,169,81,.07);
  border-color: rgba(200,169,81,.4);
}
.proc-stat-num {
  font-size: clamp(2.2rem,4vw,3rem);
  font-weight: 800;
  color: #C8A951;
  line-height: 1;
  margin-bottom: .4rem;
  font-family: var(--font-family);
}
.proc-stat-label {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* 3-col detail cards grid */
.proc-details-grid {
  max-width: 1200px;
  margin: 56px auto 0;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}
.proc-detail-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212,145,59,.14);
  border-radius: 18px;
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.proc-detail-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--p1), var(--p1l));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s ease;
}
.proc-detail-card:hover::before { transform: scaleX(1); }
.proc-detail-card:hover {
  background: rgba(212,145,59,.06);
  border-color: rgba(212,145,59,.28);
  box-shadow: 0 16px 48px rgba(212,145,59,.1);
}
.phase-2-card { border-color: rgba(13,115,119,.14); }
.phase-2-card::before { background: linear-gradient(90deg, var(--p2), var(--p2l)); }
.phase-2-card:hover { background: rgba(13,115,119,.06); border-color: rgba(13,115,119,.28); box-shadow: 0 16px 48px rgba(13,115,119,.1); }
.phase-3-card { border-color: rgba(200,169,81,.14); }
.phase-3-card::before { background: linear-gradient(90deg, var(--p3), var(--p3l)); }
.phase-3-card:hover { background: rgba(200,169,81,.06); border-color: rgba(200,169,81,.28); box-shadow: 0 16px 48px rgba(200,169,81,.1); }

.proc-detail-icon {
  font-size: 1.5rem;
  margin-bottom: .9rem;
  color: var(--p1);
}
.phase-2-card .proc-detail-icon { color: var(--p2l); }
.phase-3-card .proc-detail-icon { color: var(--p3); }

.proc-detail-title {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .9rem;
  line-height: 1.3;
}

.proc-detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.proc-detail-list li {
  padding: .45rem 0 .45rem 1.4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  position: relative;
}
.proc-detail-list li:last-child { border-bottom: none; }
.proc-detail-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--p1);
  font-weight: 700;
}
.phase-2-card .proc-detail-list li::before { color: var(--p2l); }
.phase-3-card .proc-detail-list li::before { color: var(--p3); }

/* Deliverable banner */
.proc-deliverable {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: rgba(212,145,59,.1);
  border: 1px solid rgba(212,145,59,.35);
  border-radius: 14px;
  padding: 1.5rem 2rem;
}
.phase-2-deliv {
  background: rgba(13,115,119,.1);
  border-color: rgba(13,115,119,.35);
}
.phase-3-deliv {
  background: rgba(200,169,81,.1);
  border-color: rgba(200,169,81,.35);
}
.proc-deliv-icon {
  font-size: 1.8rem;
  color: var(--p1);
  flex-shrink: 0;
}
.phase-2-deliv .proc-deliv-icon { color: var(--p2l); }
.phase-3-deliv .proc-deliv-icon { color: var(--p3); }
.proc-deliv-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--p1);
  margin-bottom: .35rem;
}
.phase-2-deliv .proc-deliv-label { color: var(--p2l); }
.phase-3-deliv .proc-deliv-label { color: var(--p3); }
.proc-deliv-text {
  font-size: .97rem;
  color: rgba(255,255,255,.85);
  line-height: 1.65;
}

/* phase-hero-split inner hero-img */
.phase-hero-split .hero-img {
  width: 100%;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 20px 56px rgba(0,0,0,.32);
  transition: transform .4s, box-shadow .4s;
  display: block;
}
.phase-hero-split .hero-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 72px rgba(0,0,0,.42);
}

/* Extend observers to process page */

/* Responsive */
@media(max-width:968px) {
  .proc-overview-grid { grid-template-columns: 1fr; gap: 40px; }
  .proc-stat-trio { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .proc-stat-card { flex: 1 1 140px; }
  .proc-details-grid { grid-template-columns: 1fr; padding: 0 1.25rem; margin-top: 32px; }
  .proc-deliverable { flex-direction: column; text-align: center; padding: 1.25rem; margin: 24px 1.25rem 0; }
}
@media(max-width:640px) {
  .proc-stat-trio { gap: .65rem; }
  .proc-stat-card { padding: 1rem .75rem; }
  .proc-detail-card { padding: 22px 18px; }
}


/* ── Process page supplemental CSS ── */

/* Hero modifier — no extra overrides needed, services-header handles it */
.proc-hero .svc-eyebrow { color: rgba(200,169,81,.9); }
.proc-hero h1 { font-size: clamp(2rem,5vw,3.4rem); }

/* Evidence overview left column */
.proc-overview-text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.proc-overview-text .svc-eyebrow {
  color: var(--p1);
  margin-bottom: .5rem;
}
.proc-overview-text .split-heading {
  color: #fff;
  margin-top: 0;
}

/* Phase-hero-split bottom padding after last element in phase-content */
.phase-content .proc-deliverable:last-child {
  margin-bottom: 0;
  padding-bottom: 56px;
}

/* Responsive fix for proc-overview-text */
@media(max-width:768px) {
  .proc-overview-text { order: 1; }
  .proc-stat-trio { order: 2; }
}

/* ── SPA Services page supplemental CSS ── */

/* Intro evidence band — 2-col grid matching proc-overview-grid pattern */
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.svc-intro-text {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.svc-intro-text .svc-eyebrow { color: var(--p1); margin-bottom: .5rem; }
.svc-intro-text .split-heading { color: #fff; margin-top: 0; }
.svc-intro-stats {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* subsection-card-body — body text inside service cards */
.subsection-card-body {
  font-size: .92rem;
  color: rgba(255,255,255,.75);
  line-height: 1.65;
  margin: 0;
}

/* Insight links strip below each service */
.svc-insight-links {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 24px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 20px;
}
.svc-insight-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}
.svc-insight-links a {
  font-size: .88rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .25s;
  font-family: var(--font-family);
}
.phase-1 .svc-insight-links a:hover { color: var(--p1l); }
.phase-2 .svc-insight-links a:hover { color: var(--p2l); }
.phase-3 .svc-insight-links a:hover { color: var(--p3l); }

/* Responsive */
@media(max-width:968px) {
  .svc-intro-grid { grid-template-columns: 1fr; gap: 40px; }
  .svc-intro-stats { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .svc-intro-stats .proc-stat-card { flex: 1 1 140px; }
  .svc-insight-links { flex-direction: column; gap: .4rem; }
}

/* ── P3 Additional Mobile Fixes (homepage) ── */
@media (max-width: 768px) {
  /* iOS Safari fixed backgrounds */
  .hp-hero, .hp-stats-block, .hp-cta-section,
  .oc-parallax, .about-quote-parallax, .about-main-quote { 
    background-attachment: scroll !important;
  }
  /* Grid collapse */
  .hp-hero-split, .svc-split-layout, .about-split, .about-split-reverse { 
    grid-template-columns: 1fr !important; 
    direction: ltr !important;
  }
  /* Stats reflow */
  .hp-hero-stats, .blog-hero-stats { 
    flex-direction: column !important; 
    align-items: center !important;
    gap: 1rem !important;
  }
  /* Prevent horizontal scroll */
  .container { overflow-x: hidden; }
  /* Images */
  .hero-img, .deliv-img, .about-credentials img, .about-timeline img { 
    max-width: 100% !important; width: 100% !important; 
  }
  /* CTA touch target */
  .cta-button, .nav-cta-btn { 
    min-height: 44px !important; 
    display: inline-flex !important; 
    align-items: center !important; 
  }
}
@media (max-width: 480px) {
  html, body { overflow-x: hidden !important; }
  /* Phase cards single col */
  .hp-phases-grid, .sa-region-grid { 
    grid-template-columns: 1fr !important; 
  }
  .proc-stat-trio { 
    flex-direction: column !important; 
    align-items: center !important;
  }
}


/* ════════════════════════════════════════════
   SERVICE AREA PAGE
   ════════════════════════════════════════════ */

  /* ── Reset & tokens ── */
  
  
  html{scroll-behavior:smooth}
  body{font-family:var(--font);line-height:1.7;color:var(--text-dark);background:#0a0f1a;font-size:16px}
  h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.2;font-weight:700;letter-spacing:-.02em}
  img{display:block;max-width:100%}
  .container{max-width:1200px;margin:0 auto;padding:0 1.5rem}/* ════════════════════════════════════════
     SERVICES SECTION — 3-PHASE SYSTEM
     Amber (Phase 1) → Teal (Phase 2) → Gold (Phase 3)
  ════════════════════════════════════════ */

  /* 1. HEADER BANNER */
  .services-header{
    position:relative;
    background-size:cover;background-position:center;background-attachment:fixed;
    min-height:70vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;overflow:hidden;padding:4rem 2rem;
  }
  .services-header::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(15,18,40,.6) 50%,rgba(15,18,40,.88) 100%);
    z-index:1;
  }
  .services-header>*{position:relative;z-index:2}

  .services-header h1{font-size:clamp(2rem,5vw,3.5rem);color:#fff;font-weight:800;margin-bottom:1.25rem;max-width:800px}
  .services-header .lead{font-size:1.1rem;color:rgba(255,255,255,.78);max-width:700px;line-height:1.85;margin:0 auto 3rem}


  /* 2. PHASE QUOTE CINEMATIC */
  .phase-quote{
    position:relative;min-height:38vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .phase-quote::before{content:'';position:absolute;inset:0;z-index:1}
  .phase-quote.phase-1::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(212,145,59,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-2::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(13,115,119,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-3::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(200,169,81,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote .qcontent{position:relative;z-index:2;max-width:800px;padding:5rem 2rem;text-align:center}
  .quote-mark{font-size:5rem;font-family:Georgia,serif;line-height:.5;margin-bottom:1rem;opacity:.32}
  .phase-1 .quote-mark{color:var(--p1)}
  .phase-2 .quote-mark{color:var(--p2l)}
  .phase-3 .quote-mark{color:var(--p3)}
  .phase-quote blockquote{font-size:clamp(1.1rem,2.2vw,1.45rem);font-style:italic;color:#fff;line-height:1.8;font-weight:300;border:none;padding:0;margin:0}
  .phase-quote .qsource{margin-top:1.25rem;font-size:.82rem;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.15em}

  /* 3. PHASE CONTENT WRAPPER */
  .phase-content{
    padding:90px 0;position:relative;
    background-size:400px 400px;background-repeat:repeat;
  }
  .phase-content::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
  .phase-1.phase-content{background-color:var(--navy2)}
  .phase-1.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(15,18,40,.9))}
  .phase-2.phase-content{background-color:var(--navy)}
  .phase-2.phase-content::after{background:linear-gradient(180deg,rgba(26,31,61,.94),rgba(15,18,40,.9))}
  .phase-3.phase-content{background-color:var(--navy2)}
  .phase-3.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(26,31,61,.9))}
  .phase-content>*{position:relative;z-index:1}

  /* 4. HERO SPLIT — img/text 50/50 */
  .phase-hero-split{
    max-width:1200px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  }
  .phase-number-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:18px;
    font-size:1.7rem;font-weight:800;margin-bottom:1.25rem;
  }
  .phase-1 .phase-number-badge{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 8px 28px var(--p1g)}
  .phase-2 .phase-number-badge{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 8px 28px var(--p2g)}
  .phase-3 .phase-number-badge{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 8px 28px var(--p3g)}
  .phase-accent-line{width:44px;height:3px;border-radius:2px;margin-bottom:1.1rem}
  .phase-1 .phase-accent-line{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-2 .phase-accent-line{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-3 .phase-accent-line{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-hero-split h2{font-size:clamp(1.4rem,3vw,2rem);color:#fff;font-weight:700;margin-bottom:1rem}
  .phase-hero-split .problem-text{font-size:1.02rem;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px}
  .phase-hero-split .hero-img{width:100%;height:360px;object-fit:cover;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.35);transition:transform .4s,box-shadow .4s}
  .phase-hero-split .hero-img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 32px 80px rgba(0,0,0,.45)}

  /* 5. SUBSECTION CARDS — glassmorphism 3-col */
  .subsection-cards{
    max-width:1200px;margin:56px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  }
  .subsection-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-radius:18px;padding:32px 26px;
    transition:all .35s;position:relative;overflow:hidden;
  }
  .subsection-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .45s ease;transform-origin:left}
  .subsection-card:hover::before{transform:scaleX(1)}
  .phase-1 .subsection-card{border:1px solid rgba(212,145,59,.14)}
  .phase-1 .subsection-card::before{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-1 .subsection-card:hover{background:rgba(212,145,59,.06);border-color:rgba(212,145,59,.28);box-shadow:0 16px 48px var(--p1g)}
  .phase-2 .subsection-card{border:1px solid rgba(13,115,119,.14)}
  .phase-2 .subsection-card::before{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-2 .subsection-card:hover{background:rgba(13,115,119,.06);border-color:rgba(13,115,119,.28);box-shadow:0 16px 48px var(--p2g)}
  .phase-3 .subsection-card{border:1px solid rgba(200,169,81,.14)}
  .phase-3 .subsection-card::before{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-3 .subsection-card:hover{background:rgba(200,169,81,.06);border-color:rgba(200,169,81,.28);box-shadow:0 16px 48px var(--p3g)}
  .subsection-card h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:1.1rem;line-height:1.3}
  .subsection-card ul{list-style:none;padding:0;margin:0}
  .subsection-card li{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.80);padding:7px 0 7px 18px;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
  .subsection-card li:last-child{border-bottom:none}
  .subsection-card li::before{content:'→';position:absolute;left:0;font-size:.78rem}
  .phase-1 .subsection-card li::before{color:var(--p1)}
  .phase-2 .subsection-card li::before{color:var(--p2l)}
  .phase-3 .subsection-card li::before{color:var(--p3)}

  /* 6. DELIVERABLE SPLIT */
  .deliverable-section{
    max-width:1200px;margin:72px auto 0;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  }
  .deliverable-section .deliv-img{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 56px rgba(0,0,0,.28);transition:transform .4s,box-shadow .4s}
  .deliverable-section .deliv-img:hover{transform:translateY(-4px);box-shadow:0 28px 72px rgba(0,0,0,.38)}
  .deliverable-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem}
  .phase-1 .deliverable-label{color:var(--p1)}
  .phase-2 .deliverable-label{color:var(--p2l)}
  .phase-3 .deliverable-label{color:var(--p3)}
  .deliverable-section h3{font-size:1.5rem;color:#fff;font-weight:700;margin-bottom:1rem}
  .deliverable-section p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.68)}
  .deliv-cta{display:inline-block;margin-top:1.5rem;padding:.85rem 2rem;border-radius:50px;font-size:.92rem;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .25s}
  .phase-1 .deliv-cta{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 6px 24px var(--p1g)}
  .phase-1 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p1g)}
  .phase-2 .deliv-cta{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 6px 24px var(--p2g)}
  .phase-2 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p2g)}
  .phase-3 .deliv-cta{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 6px 24px var(--p3g)}
  .phase-3 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p3g)}

  /* 7. PHASE TRANSITIONS */
  .phase-transition{background:var(--navy2);line-height:0;overflow:hidden}
  .phase-transition img{width:100%;height:90px;object-fit:cover;opacity:.65;transition:opacity .4s;display:block}
  .phase-transition:hover img{opacity:1}

  /* 8. RELATED INSIGHTS — per phase */
  .phase-insights{max-width:1200px;margin:56px auto 0;padding:0 24px 80px}
  .phase-insights-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem}
  .phase-1 .phase-insights-label{color:var(--p1)}
  .phase-2 .phase-insights-label{color:var(--p2l)}
  .phase-3 .phase-insights-label{color:var(--p3)}
  .phase-insights ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
  .phase-insights li a{display:inline-block;padding:.45rem 1rem;border-radius:50px;font-size:.85rem;text-decoration:none;font-weight:600;transition:all .25s;border:1px solid}
  .phase-1 .phase-insights li a{color:var(--p1);border-color:rgba(212,145,59,.3);background:rgba(212,145,59,.06)}
  .phase-1 .phase-insights li a:hover{background:rgba(212,145,59,.18);border-color:var(--p1)}
  .phase-2 .phase-insights li a{color:var(--p2l);border-color:rgba(13,115,119,.3);background:rgba(13,115,119,.06)}
  .phase-2 .phase-insights li a:hover{background:rgba(13,115,119,.18);border-color:var(--p2l)}
  .phase-3 .phase-insights li a{color:var(--p3);border-color:rgba(200,169,81,.3);background:rgba(200,169,81,.06)}
  .phase-3 .phase-insights li a:hover{background:rgba(200,169,81,.18);border-color:var(--p3)}

  /* 9. CTA SECTION */
  .services-cta{
    position:relative;min-height:52vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .services-cta::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,18,40,.78) 0%,rgba(13,115,119,.22) 50%,rgba(15,18,40,.82) 100%);
    z-index:1;
  }
  .services-cta>*{position:relative;z-index:2}
  .cta-inner{max-width:680px;padding:5rem 2rem;text-align:center}
  .services-cta h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:1rem}
  .services-cta p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.85;margin-bottom:2.5rem;max-width:580px;margin-left:auto;margin-right:auto}
  .cta-button{
    display:inline-block;padding:1.1rem 3rem;
    background:linear-gradient(135deg,var(--p2),var(--p2l));
    color:#fff;text-decoration:none;border-radius:50px;
    font-size:1.05rem;font-weight:700;letter-spacing:.05em;
    box-shadow:0 8px 32px rgba(13,115,119,.4);
    transition:all .3s;
  }
  .cta-button:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(13,115,119,.55)}
  .cta-sub{display:block;margin-top:1.25rem;font-size:.85rem;color:rgba(255,255,255,.70);letter-spacing:.03em}

  /* 10. FROM THE BLOG */
  .blog-intel{background:var(--navy2);padding:5rem 0;border-top:1px solid rgba(255,255,255,.06)}
  .blog-intel-header{text-align:center;margin-bottom:3rem}
  .blog-intel-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--p3);margin-bottom:.75rem}
  .blog-intel-header h2{font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin-bottom:.75rem}
  .blog-intel-header p{color:rgba(255,255,255,.80);max-width:540px;margin:0 auto;font-size:.95rem}
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
  .blog-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1.75rem;transition:all .3s}
  .blog-card:hover{background:rgba(255,255,255,.07);border-color:rgba(200,169,81,.2);transform:translateY(-3px)}
  .blog-card-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--p3);margin-bottom:.75rem}
  .blog-card h3{font-size:1.05rem;color:#fff;margin-bottom:1rem;line-height:1.3}
  .blog-card ul{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.45rem}
  .blog-card ul li a{font-size:.875rem;color:rgba(255,255,255,.80);text-decoration:none;line-height:1.4;transition:color .2s}
  .blog-card ul li a:hover{color:var(--p3)}
  .blog-card-all{font-size:.82rem;font-weight:700;color:var(--p3);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
  .blog-card-all:hover{text-decoration:underline}
  .blog-view-all{text-align:center;margin-top:2.5rem}
  .blog-view-all a{display:inline-block;padding:.85rem 2.5rem;border:2px solid rgba(200,169,81,.4);color:var(--p3);border-radius:50px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.05em;transition:all .3s}
  .blog-view-all a:hover{background:rgba(200,169,81,.12);border-color:var(--p3)}/* 12. SCROLL REVEAL */
  .sr{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s ease}
  .sr.visible{opacity:1;transform:translateY(0)}
  .sr-img{opacity:0;transform:scale(.96);transition:opacity .8s ease .1s,transform .8s ease .1s}
  .sr-img.visible{opacity:1;transform:scale(1)}

  /* 13. RESPONSIVE */
  @media(max-width:968px){
    .phase-hero-split,.deliverable-section{grid-template-columns:1fr;gap:36px}
    .subsection-cards{grid-template-columns:1fr}
    .phase-hero-split .hero-img{height:220px}
    .phase-content{padding:60px 0}
    .services-header{background-attachment:scroll}
    .phase-quote{background-attachment:scroll}
    .services-cta{background-attachment:scroll}
  }
  @media(max-width:768px){
    .blog-grid{grid-template-columns:1fr}
  }
  @media(max-width:480px){
    .phase-hero-split{padding:0 1rem}
    .subsection-cards{padding:0 1rem}
    .deliverable-section{padding:0 1rem}
  }
  @media(prefers-reduced-motion:reduce){}
  
  /* ════════════════════════════════════════
     SERVICE AREA — SPECIFIC COMPONENTS
  ════════════════════════════════════════ */

  /* City Cards */
  .sa-city-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:18px 20px;
    transition:all .3s;
  }
  .sa-city-card:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(212,145,59,.25);
    transform:translateY(-3px);
  }
  .sa-city-name{font-size:.97rem;font-weight:700;color:#fff;margin-bottom:.25rem}
  .sa-city-sub{font-size:.82rem;color:rgba(255,255,255,.73);line-height:1.4}

  /* Phase 2 / 3 hover accent colors */
  .phase-2 .sa-city-card:hover{border-color:rgba(13,115,119,.3)}
  .phase-3 .sa-city-card:hover{border-color:rgba(200,169,81,.3)}

  /* Region grid — 3 columns within phase panels */
  .sa-region-grid{
    max-width:1200px;margin:48px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }

  /* Ventura + IE 2-col layout */
  .sa-vc-ie-cols{
    max-width:1200px;margin:48px auto 0;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:40px;
  }
  .sa-city-col{display:flex;flex-direction:column;gap:12px}
  .sa-region-label{
    font-size:.8rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;margin-bottom:1rem;
    font-family:'Inter',Georgia,sans-serif;
  }
  .sa-label-p3{color:var(--p3)}
  .sa-label-p2{color:var(--p2l)}
  .sa-label-p1{color:var(--p1)}

  /* Insight link strip */
  .sa-insight-box{
    max-width:1200px;margin:40px auto 0;padding:0 24px;
  }
  .sa-insight-inner{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,145,59,.12);
    border-radius:12px;padding:20px 28px;
    font-size:.9rem;line-height:1.75;
    color:rgba(255,255,255,.80);
  }
  .sa-insight-inner a{color:var(--p1l);text-decoration:none}
  .sa-insight-inner a:hover{text-decoration:underline}
  .phase-2 .sa-insight-inner a{color:var(--p2l)}
  .phase-3 .sa-insight-inner a{color:var(--p3l)}

  /* Nationwide 50/50 split */
  .sa-national-split{
    max-width:1200px;margin:0 auto;padding:5rem 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  }
  .sa-remote-stats{display:flex;flex-direction:column;gap:16px}

  /* Local Guides section */
  .sa-guides-section{padding-bottom:80px}
  .sa-guides-header{text-align:center;margin-bottom:48px}
  .sa-guides-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    max-width:1200px;margin:0 auto;padding:0 24px;
  }
  .sa-guide-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;padding:32px 26px;
    transition:all .35s;position:relative;overflow:hidden;
  }
  .sa-guide-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--p3),var(--p3l));
    transform:scaleX(0);transition:transform .45s ease;transform-origin:left;
  }
  .sa-guide-card:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(200,169,81,.18);
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,.3);
  }
  .sa-guide-card:hover::before{transform:scaleX(1)}
  .sa-guide-region{
    font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;color:var(--p3);margin-bottom:.75rem;
  }
  .sa-guide-title{
    font-size:1.05rem;font-weight:700;color:#fff;
    margin-bottom:1.1rem;line-height:1.35;
  }
  .sa-guide-links{
    list-style:none;padding:0;margin:0 0 1.25rem;
    display:flex;flex-direction:column;gap:.5rem;
  }
  .sa-guide-links li a{
    font-size:.875rem;color:rgba(255,255,255,.78);
    text-decoration:none;line-height:1.45;transition:color .2s;
    display:block;padding-left:.9rem;position:relative;
  }
  .sa-guide-links li a::before{
    content:'→';position:absolute;left:0;color:var(--p3);
    font-size:.75rem;top:.12em;transition:transform .2s;
  }
  .sa-guide-links li a:hover{color:var(--p3l)}
  .sa-guide-links li a:hover::before{transform:translateX(3px)}
  .sa-all-link{
    font-size:.82rem;font-weight:700;color:var(--p3);
    text-decoration:none;text-transform:uppercase;letter-spacing:.07em;
    display:inline-flex;align-items:center;gap:.35rem;
  }
  .sa-all-link:hover{text-decoration:underline}

  /* Responsive: service area grids */
  @media(max-width:968px){
    .sa-region-grid{grid-template-columns:repeat(2,1fr)}
    .sa-vc-ie-cols,.sa-national-split{grid-template-columns:1fr;gap:36px}
    .sa-guides-grid{grid-template-columns:1fr}
    .sa-national-split{padding:3rem 24px}
  }
  @media(max-width:640px){
    .sa-region-grid{grid-template-columns:1fr}
  }

  

  /* ── Missing text classes — split layout & stats ── */
  .split-heading {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1rem;
  }
  .split-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(255,255,255,.80);
    margin: 0 0 1.1rem;
    max-width: 560px;
  }
  .split-body:last-child { margin-bottom: 0; }
  .about-phase-dark {
    background: rgba(255,255,255,.03);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 2.5rem 0;
    margin: 2rem 0;
  }
  .phase-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .proc-stat-trio {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    text-align: center;
  }
  .proc-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
  }
  .proc-stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--p3, #C8A951);
    line-height: 1;
    letter-spacing: -.02em;
  }
  .proc-stat-label {
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
  }
  

    /* ── Service Area extras ── */
    .sa-region-grid {
      max-width: 1200px; margin: 48px auto 0; padding: 0 24px;
      display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 18px;
    }
    .sa-city-card {
      background: rgba(255,255,255,.04); backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px); border-radius: 14px;
      padding: 1.25rem 1.5rem; border: 1px solid rgba(212,145,59,.14); transition: all .3s;
    }
    .sa-city-card:hover {
      background: rgba(212,145,59,.07); border-color: rgba(212,145,59,.35);
      transform: translateY(-3px); box-shadow: 0 12px 32px rgba(212,145,59,.1);
    }
    .phase-2 .sa-city-card { border-color: rgba(13,115,119,.18); }
    .phase-2 .sa-city-card:hover { background: rgba(13,115,119,.07); border-color: rgba(13,115,119,.38); box-shadow: 0 12px 32px rgba(13,115,119,.1); }
    .phase-3 .sa-city-card { border-color: rgba(200,169,81,.18); }
    .phase-3 .sa-city-card:hover { background: rgba(200,169,81,.07); border-color: rgba(200,169,81,.38); box-shadow: 0 12px 32px rgba(200,169,81,.1); }
    .sa-city-name { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .3rem; font-family: 'Inter',Georgia,sans-serif; }
    .sa-city-sub { font-size: .82rem; color: rgba(255,255,255,.78); }
    .sa-insight-box { max-width: 1200px; margin: 32px auto 0; padding: 0 24px 56px; }
    .sa-insight-inner {
      background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px; padding: 1.25rem 1.75rem;
    }
    .sa-insight-inner p { font-size: .9rem; color: rgba(255,255,255,.65); margin: 0; line-height: 1.7; }
    .sa-insight-inner a { color: var(--p1l); text-decoration: none; transition: color .2s; }
    .phase-2 .sa-insight-inner a { color: var(--p2l); }
    .phase-3 .sa-insight-inner a { color: var(--p3l); }
    .sa-insight-inner a:hover { text-decoration: underline; }
    .sa-guides-grid {
      max-width: 1200px; margin: 0 auto; padding: 0 24px 80px;
      display: grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap: 22px;
    }
    .sa-guide-card {
      background: rgba(255,255,255,.04); backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(200,169,81,.15);
      border-radius: 18px; padding: 28px 26px; transition: all .35s;
    }
    .sa-guide-card:hover {
      background: rgba(200,169,81,.06); border-color: rgba(200,169,81,.35);
      transform: translateY(-4px); box-shadow: 0 16px 48px rgba(200,169,81,.1);
    }
    .sa-guide-region { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--p3); margin-bottom: .65rem; }
    .sa-guide-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 1rem; font-family: 'Inter',Georgia,sans-serif; line-height: 1.3; }
    .sa-guide-links { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
    .sa-guide-links li a { font-size: .88rem; color: rgba(255,255,255,.7); text-decoration: none; line-height: 1.4; transition: color .2s; }
    .sa-guide-links li a:hover { color: var(--p3l); }
    .sa-all-link { font-size: .82rem; font-weight: 700; color: var(--p3); text-decoration: none; text-transform: uppercase; letter-spacing: .07em; transition: color .2s; }
    .sa-all-link:hover { color: var(--p3l); }
    @media(max-width:900px) {
      .sa-region-grid { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); padding: 0 1.25rem; }
      .sa-insight-box { padding: 0 1.25rem 40px; }
      .sa-guides-grid { grid-template-columns: 1fr; padding: 0 1.25rem 60px; }
    }
    @media(max-width:700px) {
      .sa-national-cols { grid-template-columns: 1fr !important; gap: 32px !important; }
      .sa-vc-ie-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
    }
    @media(max-width:600px) {
      .sa-region-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    }
  
  /* ════════════════════════════════════════
     SERVICE AREA — SPECIFIC COMPONENTS
  ════════════════════════════════════════ */

  /* City Cards */
  .sa-city-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;padding:18px 20px;
    transition:all .3s;
  }
  .sa-city-card:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(212,145,59,.25);
    transform:translateY(-3px);
  }
  .sa-city-name{font-size:.97rem;font-weight:700;color:#fff;margin-bottom:.25rem}
  .sa-city-sub{font-size:.82rem;color:rgba(255,255,255,.73);line-height:1.4}

  /* Phase 2 / 3 hover accent colors */
  .phase-2 .sa-city-card:hover{border-color:rgba(13,115,119,.3)}
  .phase-3 .sa-city-card:hover{border-color:rgba(200,169,81,.3)}

  /* Region grid — 3 columns within phase panels */
  .sa-region-grid{
    max-width:1200px;margin:48px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  }

  /* Ventura + IE 2-col layout */
  .sa-vc-ie-cols{
    max-width:1200px;margin:48px auto 0;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:40px;
  }
  .sa-city-col{display:flex;flex-direction:column;gap:12px}
  .sa-region-label{
    font-size:.8rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;margin-bottom:1rem;
    font-family:'Inter',Georgia,sans-serif;
  }
  .sa-label-p3{color:var(--p3)}
  .sa-label-p2{color:var(--p2l)}
  .sa-label-p1{color:var(--p1)}

  /* Insight link strip */
  .sa-insight-box{
    max-width:1200px;margin:40px auto 0;padding:0 24px;
  }
  .sa-insight-inner{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,145,59,.12);
    border-radius:12px;padding:20px 28px;
    font-size:.9rem;line-height:1.75;
    color:rgba(255,255,255,.80);
  }
  .sa-insight-inner a{color:var(--p1l);text-decoration:none}
  .sa-insight-inner a:hover{text-decoration:underline}
  .phase-2 .sa-insight-inner a{color:var(--p2l)}
  .phase-3 .sa-insight-inner a{color:var(--p3l)}

  /* Nationwide 50/50 split */
  .sa-national-split{
    max-width:1200px;margin:0 auto;padding:5rem 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  }
  .sa-remote-stats{display:flex;flex-direction:column;gap:16px}

  /* Local Guides section */
  .sa-guides-section{padding-bottom:80px}
  .sa-guides-header{text-align:center;margin-bottom:48px}
  .sa-guides-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    max-width:1200px;margin:0 auto;padding:0 24px;
  }
  .sa-guide-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.07);
    border-radius:18px;padding:32px 26px;
    transition:all .35s;position:relative;overflow:hidden;
  }
  .sa-guide-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--p3),var(--p3l));
    transform:scaleX(0);transition:transform .45s ease;transform-origin:left;
  }
  .sa-guide-card:hover{
    background:rgba(255,255,255,.07);
    border-color:rgba(200,169,81,.18);
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(0,0,0,.3);
  }
  .sa-guide-card:hover::before{transform:scaleX(1)}
  .sa-guide-region{
    font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;color:var(--p3);margin-bottom:.75rem;
  }
  .sa-guide-title{
    font-size:1.05rem;font-weight:700;color:#fff;
    margin-bottom:1.1rem;line-height:1.35;
  }
  .sa-guide-links{
    list-style:none;padding:0;margin:0 0 1.25rem;
    display:flex;flex-direction:column;gap:.5rem;
  }
  .sa-guide-links li a{
    font-size:.875rem;color:rgba(255,255,255,.78);
    text-decoration:none;line-height:1.45;transition:color .2s;
    display:block;padding-left:.9rem;position:relative;
  }
  .sa-guide-links li a::before{
    content:'→';position:absolute;left:0;color:var(--p3);
    font-size:.75rem;top:.12em;transition:transform .2s;
  }
  .sa-guide-links li a:hover{color:var(--p3l)}
  .sa-guide-links li a:hover::before{transform:translateX(3px)}
  .sa-all-link{
    font-size:.82rem;font-weight:700;color:var(--p3);
    text-decoration:none;text-transform:uppercase;letter-spacing:.07em;
    display:inline-flex;align-items:center;gap:.35rem;
  }
  .sa-all-link:hover{text-decoration:underline}

  /* Responsive: service area grids */
  @media(max-width:968px){
    .sa-region-grid{grid-template-columns:repeat(2,1fr)}
    .sa-vc-ie-cols,.sa-national-split{grid-template-columns:1fr;gap:36px}
    .sa-guides-grid{grid-template-columns:1fr}
    .sa-national-split{padding:3rem 24px}
  }
  @media(max-width:640px){
    .sa-region-grid{grid-template-columns:1fr}
  }

  

/* ════════════════════════════════════════════
   SERVICES PAGE
   ════════════════════════════════════════════ */

  /* ── Reset & tokens ── */
  
  
  html{scroll-behavior:smooth}
  body{font-family:var(--font);line-height:1.7;color:var(--text-dark);background:#0a0f1a;font-size:16px}
  h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.2;font-weight:700;letter-spacing:-.02em}
  img{display:block;max-width:100%}
  .container{max-width:1200px;margin:0 auto;padding:0 1.5rem}/* ════════════════════════════════════════
     SERVICES SECTION — 3-PHASE SYSTEM
     Amber (Phase 1) → Teal (Phase 2) → Gold (Phase 3)
  ════════════════════════════════════════ */

  /* 1. HEADER BANNER */
  .services-header{
    position:relative;
    background-size:cover;background-position:center;background-attachment:fixed;
    min-height:70vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;overflow:hidden;padding:4rem 2rem;
  }
  .services-header::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(15,18,40,.6) 50%,rgba(15,18,40,.88) 100%);
    z-index:1;
  }
  .services-header>*{position:relative;z-index:2}
  .svc-eyebrow{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--p3);margin-bottom:1rem}
  .services-header h1{font-size:clamp(2rem,5vw,3.5rem);color:#fff;font-weight:800;margin-bottom:1.25rem;max-width:800px}
  .services-header .lead{font-size:1.1rem;color:rgba(255,255,255,.78);max-width:700px;line-height:1.85;margin:0 auto 3rem}


  /* 2. PHASE QUOTE CINEMATIC */
  .phase-quote{
    position:relative;min-height:38vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .phase-quote::before{content:'';position:absolute;inset:0;z-index:1}
  .phase-quote.phase-1::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(212,145,59,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-2::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(13,115,119,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote.phase-3::before{background:linear-gradient(180deg,rgba(15,18,40,.82) 0%,rgba(200,169,81,.18) 50%,rgba(15,18,40,.88) 100%)}
  .phase-quote .qcontent{position:relative;z-index:2;max-width:800px;padding:5rem 2rem;text-align:center}
  .quote-mark{font-size:5rem;font-family:Georgia,serif;line-height:.5;margin-bottom:1rem;opacity:.32}
  .phase-1 .quote-mark{color:var(--p1)}
  .phase-2 .quote-mark{color:var(--p2l)}
  .phase-3 .quote-mark{color:var(--p3)}
  .phase-quote blockquote{font-size:clamp(1.1rem,2.2vw,1.45rem);font-style:italic;color:#fff;line-height:1.8;font-weight:300;border:none;padding:0;margin:0}
  .phase-quote .qsource{margin-top:1.25rem;font-size:.82rem;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.15em}

  /* 3. PHASE CONTENT WRAPPER */
  .phase-content{
    padding:90px 0;position:relative;
    background-size:400px 400px;background-repeat:repeat;
  }
  .phase-content::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none}
  .phase-1.phase-content{background-color:var(--navy2)}
  .phase-1.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(15,18,40,.9))}
  .phase-2.phase-content{background-color:var(--navy)}
  .phase-2.phase-content::after{background:linear-gradient(180deg,rgba(26,31,61,.94),rgba(15,18,40,.9))}
  .phase-3.phase-content{background-color:var(--navy2)}
  .phase-3.phase-content::after{background:linear-gradient(180deg,rgba(15,18,40,.94),rgba(26,31,61,.9))}
  .phase-content>*{position:relative;z-index:1}

  /* 4. HERO SPLIT — img/text 50/50 */
  .phase-hero-split{
    max-width:1200px;margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;
  }
  .phase-number-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:60px;height:60px;border-radius:18px;
    font-size:1.7rem;font-weight:800;margin-bottom:1.25rem;
  }
  .phase-1 .phase-number-badge{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 8px 28px var(--p1g)}
  .phase-2 .phase-number-badge{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 8px 28px var(--p2g)}
  .phase-3 .phase-number-badge{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 8px 28px var(--p3g)}
  .phase-accent-line{width:44px;height:3px;border-radius:2px;margin-bottom:1.1rem}
  .phase-1 .phase-accent-line{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-2 .phase-accent-line{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-3 .phase-accent-line{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-hero-split h2{font-size:clamp(1.4rem,3vw,2rem);color:#fff;font-weight:700;margin-bottom:1rem}
  .phase-hero-split .problem-text{font-size:1.02rem;line-height:1.85;color:rgba(255,255,255,.72);max-width:520px}
  .phase-hero-split .hero-img{width:100%;height:360px;object-fit:cover;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.35);transition:transform .4s,box-shadow .4s}
  .phase-hero-split .hero-img:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 32px 80px rgba(0,0,0,.45)}

  /* 5. SUBSECTION CARDS — glassmorphism 3-col */
  .subsection-cards{
    max-width:1200px;margin:56px auto 0;padding:0 24px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  }
  .subsection-card{
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-radius:18px;padding:32px 26px;
    transition:all .35s;position:relative;overflow:hidden;
  }
  .subsection-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transition:transform .45s ease;transform-origin:left}
  .subsection-card:hover::before{transform:scaleX(1)}
  .phase-1 .subsection-card{border:1px solid rgba(212,145,59,.14)}
  .phase-1 .subsection-card::before{background:linear-gradient(90deg,var(--p1),var(--p1l))}
  .phase-1 .subsection-card:hover{background:rgba(212,145,59,.06);border-color:rgba(212,145,59,.28);box-shadow:0 16px 48px var(--p1g)}
  .phase-2 .subsection-card{border:1px solid rgba(13,115,119,.14)}
  .phase-2 .subsection-card::before{background:linear-gradient(90deg,var(--p2),var(--p2l))}
  .phase-2 .subsection-card:hover{background:rgba(13,115,119,.06);border-color:rgba(13,115,119,.28);box-shadow:0 16px 48px var(--p2g)}
  .phase-3 .subsection-card{border:1px solid rgba(200,169,81,.14)}
  .phase-3 .subsection-card::before{background:linear-gradient(90deg,var(--p3),var(--p3l))}
  .phase-3 .subsection-card:hover{background:rgba(200,169,81,.06);border-color:rgba(200,169,81,.28);box-shadow:0 16px 48px var(--p3g)}
  .subsection-card h4{font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:1.1rem;line-height:1.3}
  .subsection-card ul{list-style:none;padding:0;margin:0}
  .subsection-card li{font-size:.9rem;line-height:1.7;color:rgba(255,255,255,.80);padding:7px 0 7px 18px;position:relative;border-bottom:1px solid rgba(255,255,255,.05)}
  .subsection-card li:last-child{border-bottom:none}
  .subsection-card li::before{content:'→';position:absolute;left:0;font-size:.78rem}
  .phase-1 .subsection-card li::before{color:var(--p1)}
  .phase-2 .subsection-card li::before{color:var(--p2l)}
  .phase-3 .subsection-card li::before{color:var(--p3)}

  /* 6. DELIVERABLE SPLIT */
  .deliverable-section{
    max-width:1200px;margin:72px auto 0;padding:0 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  }
  .deliverable-section .deliv-img{width:100%;height:auto;border-radius:16px;box-shadow:0 20px 56px rgba(0,0,0,.28);transition:transform .4s,box-shadow .4s}
  .deliverable-section .deliv-img:hover{transform:translateY(-4px);box-shadow:0 28px 72px rgba(0,0,0,.38)}
  .deliverable-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.2em;margin-bottom:.75rem}
  .phase-1 .deliverable-label{color:var(--p1)}
  .phase-2 .deliverable-label{color:var(--p2l)}
  .phase-3 .deliverable-label{color:var(--p3)}
  .deliverable-section h3{font-size:1.5rem;color:#fff;font-weight:700;margin-bottom:1rem}
  .deliverable-section p{font-size:1rem;line-height:1.85;color:rgba(255,255,255,.68)}
  .deliv-cta{display:inline-block;margin-top:1.5rem;padding:.85rem 2rem;border-radius:50px;font-size:.92rem;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .25s}
  .phase-1 .deliv-cta{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2);box-shadow:0 6px 24px var(--p1g)}
  .phase-1 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p1g)}
  .phase-2 .deliv-cta{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff;box-shadow:0 6px 24px var(--p2g)}
  .phase-2 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p2g)}
  .phase-3 .deliv-cta{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2);box-shadow:0 6px 24px var(--p3g)}
  .phase-3 .deliv-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px var(--p3g)}

  /* 7. PHASE TRANSITIONS */
  .phase-transition{background:var(--navy2);line-height:0;overflow:hidden}
  .phase-transition img{width:100%;height:90px;object-fit:cover;opacity:.65;transition:opacity .4s;display:block}
  .phase-transition:hover img{opacity:1}

  /* 8. RELATED INSIGHTS — per phase */
  .phase-insights{max-width:1200px;margin:56px auto 0;padding:0 24px 80px}
  .phase-insights-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:.75rem}
  .phase-1 .phase-insights-label{color:var(--p1)}
  .phase-2 .phase-insights-label{color:var(--p2l)}
  .phase-3 .phase-insights-label{color:var(--p3)}
  .phase-insights ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
  .phase-insights li a{display:inline-block;padding:.45rem 1rem;border-radius:50px;font-size:.85rem;text-decoration:none;font-weight:600;transition:all .25s;border:1px solid}
  .phase-1 .phase-insights li a{color:var(--p1);border-color:rgba(212,145,59,.3);background:rgba(212,145,59,.06)}
  .phase-1 .phase-insights li a:hover{background:rgba(212,145,59,.18);border-color:var(--p1)}
  .phase-2 .phase-insights li a{color:var(--p2l);border-color:rgba(13,115,119,.3);background:rgba(13,115,119,.06)}
  .phase-2 .phase-insights li a:hover{background:rgba(13,115,119,.18);border-color:var(--p2l)}
  .phase-3 .phase-insights li a{color:var(--p3);border-color:rgba(200,169,81,.3);background:rgba(200,169,81,.06)}
  .phase-3 .phase-insights li a:hover{background:rgba(200,169,81,.18);border-color:var(--p3)}

  /* 9. CTA SECTION */
  .services-cta{
    position:relative;min-height:52vh;
    display:flex;align-items:center;justify-content:center;
    background-size:cover;background-position:center;background-attachment:fixed;
    overflow:hidden;
  }
  .services-cta::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(15,18,40,.78) 0%,rgba(13,115,119,.22) 50%,rgba(15,18,40,.82) 100%);
    z-index:1;
  }
  .services-cta>*{position:relative;z-index:2}
  .cta-inner{max-width:680px;padding:5rem 2rem;text-align:center}
  .services-cta h2{font-size:clamp(1.8rem,3.5vw,2.6rem);color:#fff;margin-bottom:1rem}
  .services-cta p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.85;margin-bottom:2.5rem;max-width:580px;margin-left:auto;margin-right:auto}
  .cta-button{
    display:inline-block;padding:1.1rem 3rem;
    background:linear-gradient(135deg,var(--p2),var(--p2l));
    color:#fff;text-decoration:none;border-radius:50px;
    font-size:1.05rem;font-weight:700;letter-spacing:.05em;
    box-shadow:0 8px 32px rgba(13,115,119,.4);
    transition:all .3s;
  }
  .cta-button:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(13,115,119,.55)}
  .cta-sub{display:block;margin-top:1.25rem;font-size:.85rem;color:rgba(255,255,255,.70);letter-spacing:.03em}

  /* 10. FROM THE BLOG */
  .blog-intel{background:var(--navy2);padding:5rem 0;border-top:1px solid rgba(255,255,255,.06)}
  .blog-intel-header{text-align:center;margin-bottom:3rem}
  .blog-intel-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--p3);margin-bottom:.75rem}
  .blog-intel-header h2{font-size:clamp(1.6rem,3vw,2.2rem);color:#fff;margin-bottom:.75rem}
  .blog-intel-header p{color:rgba(255,255,255,.80);max-width:540px;margin:0 auto;font-size:.95rem}
  .blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
  .blog-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:1.75rem;transition:all .3s}
  .blog-card:hover{background:rgba(255,255,255,.07);border-color:rgba(200,169,81,.2);transform:translateY(-3px)}
  .blog-card-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--p3);margin-bottom:.75rem}
  .blog-card h3{font-size:1.05rem;color:#fff;margin-bottom:1rem;line-height:1.3}
  .blog-card ul{list-style:none;padding:0;margin:0 0 1.25rem;display:flex;flex-direction:column;gap:.45rem}
  .blog-card ul li a{font-size:.875rem;color:rgba(255,255,255,.80);text-decoration:none;line-height:1.4;transition:color .2s}
  .blog-card ul li a:hover{color:var(--p3)}
  .blog-card-all{font-size:.82rem;font-weight:700;color:var(--p3);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
  .blog-card-all:hover{text-decoration:underline}
  .blog-view-all{text-align:center;margin-top:2.5rem}
  .blog-view-all a{display:inline-block;padding:.85rem 2.5rem;border:2px solid rgba(200,169,81,.4);color:var(--p3);border-radius:50px;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.05em;transition:all .3s}
  .blog-view-all a:hover{background:rgba(200,169,81,.12);border-color:var(--p3)}/* 12. SCROLL REVEAL */
  .sr{opacity:0;transform:translateY(38px);transition:opacity .7s ease,transform .7s ease}
  .sr.visible{opacity:1;transform:translateY(0)}
  .sr-img{opacity:0;transform:scale(.96);transition:opacity .8s ease .1s,transform .8s ease .1s}
  .sr-img.visible{opacity:1;transform:scale(1)}

  /* 13. RESPONSIVE */
  @media(max-width:968px){
    .phase-hero-split,.deliverable-section{grid-template-columns:1fr;gap:36px}
    .subsection-cards{grid-template-columns:1fr}
    .phase-hero-split .hero-img{height:220px}
    .phase-content{padding:60px 0}
    .services-header{background-attachment:scroll}
    .phase-quote{background-attachment:scroll}
    .services-cta{background-attachment:scroll}
  }
  @media(max-width:768px){
    .blog-grid{grid-template-columns:1fr}
  }
  @media(max-width:480px){
    .phase-hero-split{padding:0 1rem}
    .subsection-cards{padding:0 1rem}
    .deliverable-section{padding:0 1rem}
  }
  @media(prefers-reduced-motion:reduce){}
  

  /* ── Missing text classes — split layout & stats ── */
  .split-heading {
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1rem;
  }
  .split-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: rgba(255,255,255,.80);
    margin: 0 0 1.1rem;
    max-width: 560px;
  }
  .split-body:last-child { margin-bottom: 0; }
  .about-phase-dark {
    background: rgba(255,255,255,.03);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 2.5rem 0;
    margin: 2rem 0;
  }
  .phase-content-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
  .proc-stat-trio {
    display: flex;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    text-align: center;
  }
  .proc-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
  }
  .proc-stat-num {
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--p3, #C8A951);
    line-height: 1;
    letter-spacing: -.02em;
  }
  .proc-stat-label {
    font-size: .82rem;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
  }
  

/* ════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════ */

  
  
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{font-family:var(--font);line-height:1.75;color:var(--text-1);background:#0a0f1a;font-size:16px}
  h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.2;font-weight:700;letter-spacing:-.02em}
  img{display:block;max-width:100%}
  a{color:var(--gold);text-decoration:none;transition:color .2s}
  a:hover{color:#fff}
  .container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

  /* ── Scroll reveal ── */
  .sr{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
  .sr.visible{opacity:1;transform:translateY(0)}

  /* ── Breadcrumb ── */
  .breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:rgba(255,255,255,.45);padding:1rem 0;flex-wrap:wrap}
  .breadcrumb a{color:var(--gold);text-decoration:none}.breadcrumb a:hover{color:#fff}
  .breadcrumb span[aria-hidden]{color:rgba(255,255,255,.25)}

  /* ── HERO ── */
  /* ── BIO SECTION ── */
  .bio-section{padding:90px 0;background:var(--navy2)}
  .bio-grid{display:grid;grid-template-columns:380px 1fr;gap:60px;align-items:start;
    max-width:1100px;margin:0 auto;padding:0 24px}
  @media(max-width:900px){.bio-grid{grid-template-columns:1fr;gap:36px}}
  .bio-img-wrap{position:relative}
  .bio-img{width:100%;border-radius:16px;object-fit:cover;
    border:1px solid var(--border-hi);box-shadow:0 12px 40px rgba(0,0,0,.5)}
  .bio-img-badge{
    position:absolute;bottom:-1rem;right:-1rem;
    background:linear-gradient(135deg,var(--p3),var(--p3l));
    color:#0a0f1a;font-size:.78rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.1em;padding:.6rem 1.1rem;border-radius:8px;
    box-shadow:0 6px 20px var(--p1g)
  }
  .bio-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
    color:var(--p3);margin-bottom:.85rem}
  .bio-content h2{font-size:clamp(1.7rem,3vw,2.2rem);color:#fff;margin-bottom:1.5rem}
  .bio-content p{font-size:.97rem;color:rgba(255,255,255,.78);line-height:1.85;margin-bottom:1.1rem}
  .bio-content strong{color:#fff}
  .cred-list{list-style:none;padding:0;margin:1.5rem 0}
  .cred-list li{
    display:flex;align-items:flex-start;gap:.75rem;
    padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.06);
    font-size:.93rem;color:rgba(255,255,255,.75);line-height:1.5
  }
  .cred-list li:last-child{border-bottom:none}
  .cred-list li i{color:var(--p3);font-size:.9rem;margin-top:.15rem;flex-shrink:0}

  /* ── STATS BAR ── */
  .stats-band{
    padding:56px 0;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
    border-top:1px solid rgba(200,169,81,.15);border-bottom:1px solid rgba(200,169,81,.15)
  }
  .stats-row{display:flex;flex-wrap:wrap;justify-content:center;gap:0}
  .stat-cell{
    flex:1;min-width:160px;max-width:220px;text-align:center;
    padding:1.5rem 1rem;border-right:1px solid rgba(255,255,255,.07)
  }
  .stat-cell:last-child{border-right:none}
  .stat-big{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--p3);
    letter-spacing:-.04em;line-height:1;display:block}
  .stat-lbl{font-size:.72rem;color:rgba(255,255,255,.55);text-transform:uppercase;
    letter-spacing:.1em;margin-top:.45rem;display:block}

  /* ── 3-PHASE METHODOLOGY ── */
  .method-section{padding:90px 0;background:#0a0f1a}
  .section-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.2em;color:var(--p3);margin-bottom:.85rem;text-align:center}
  .section-title{font-size:clamp(1.7rem,3.5vw,2.4rem);color:#fff;font-weight:800;
    text-align:center;margin-bottom:1rem}
  .section-lead{font-size:1rem;color:rgba(255,255,255,.65);text-align:center;
    max-width:640px;margin:0 auto 3rem;line-height:1.85}
  .method-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:3rem}
  @media(max-width:780px){.method-phases{grid-template-columns:1fr}}
  .mphase{
    padding:2.5rem 2rem;position:relative;overflow:hidden;
    transition:transform .25s
  }
  .mphase:hover{transform:translateY(-4px)}
  .mphase-1{background:linear-gradient(180deg,rgba(212,145,59,.12) 0%,rgba(15,18,40,.95) 100%);
    border-top:3px solid var(--p1)}
  .mphase-2{background:linear-gradient(180deg,rgba(13,115,119,.12) 0%,rgba(15,18,40,.95) 100%);
    border-top:3px solid var(--p2)}
  .mphase-3{background:linear-gradient(180deg,rgba(200,169,81,.12) 0%,rgba(15,18,40,.95) 100%);
    border-top:3px solid var(--p3)}
  .mphase-badge{
    display:inline-flex;align-items:center;justify-content:center;
    width:48px;height:48px;border-radius:14px;font-size:1.3rem;
    font-weight:800;margin-bottom:1.1rem
  }
  .mphase-1 .mphase-badge{background:linear-gradient(135deg,var(--p1),var(--p1l));color:var(--navy2)}
  .mphase-2 .mphase-badge{background:linear-gradient(135deg,var(--p2),var(--p2l));color:#fff}
  .mphase-3 .mphase-badge{background:linear-gradient(135deg,var(--p3),var(--p3l));color:var(--navy2)}
  .mphase-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
    margin-bottom:.6rem}
  .mphase-1 .mphase-label{color:var(--p1)}
  .mphase-2 .mphase-label{color:var(--p2l)}
  .mphase-3 .mphase-label{color:var(--p3)}
  .mphase h3{font-size:1.1rem;color:#fff;font-weight:700;margin-bottom:.75rem}
  .mphase p{font-size:.9rem;color:rgba(255,255,255,.7);line-height:1.75}

  /* ── EXPERTISE GRID ── */
  .expertise-section{padding:90px 0;background:var(--navy2)}
  .exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
  @media(max-width:900px){.exp-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.exp-grid{grid-template-columns:1fr}}
  .exp-card{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);padding:1.75rem;
    transition:border-color .2s,transform .25s
  }
  .exp-card:hover{border-color:var(--border-hi);transform:translateY(-4px)}
  .exp-icon{
    width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
    justify-content:center;font-size:1.15rem;margin-bottom:1.1rem
  }
  .exp-icon-amber{background:rgba(212,145,59,.15);color:var(--p1)}
  .exp-icon-teal{background:rgba(13,115,119,.15);color:var(--p2l)}
  .exp-icon-gold{background:rgba(200,169,81,.15);color:var(--p3)}
  .exp-card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:.6rem}
  .exp-card p{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.7}

  /* ── FAQ ── */
  .faq-section{padding:90px 0;background:#0a0f1a}
  .faq-inner{max-width:780px;margin:0 auto}
  details.faq-item{
    border:1px solid rgba(255,255,255,.08);border-radius:10px;
    margin-bottom:.75rem;background:rgba(255,255,255,.03);overflow:hidden
  }
  details.faq-item[open]{border-color:var(--border-hi)}
  details.faq-item summary{
    padding:1.1rem 1.4rem;font-size:.97rem;font-weight:600;color:#fff;
    cursor:pointer;list-style:none;display:flex;align-items:center;
    justify-content:space-between;gap:1rem
  }
  details.faq-item summary::-webkit-details-marker{display:none}
  details.faq-item summary::after{
    content:"+";color:var(--p3);font-size:1.4rem;font-weight:300;
    flex-shrink:0;transition:transform .2s
  }
  details.faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-body{padding:.25rem 1.4rem 1.25rem;font-size:.93rem;
    color:rgba(255,255,255,.72);line-height:1.8}

  /* ── PAGE CTA ── */
  .page-cta{
    position:relative;padding:90px 0;text-align:center;overflow:hidden;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%)
  }
  .page-cta::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(200,169,81,.08),transparent 70%);
    pointer-events:none
  }
  .page-cta>*{position:relative;z-index:1}
  .page-cta h2{font-size:clamp(1.6rem,3.5vw,2.4rem);color:#fff;font-weight:800;margin-bottom:1rem}
  .page-cta p{font-size:1.02rem;color:rgba(255,255,255,.75);max-width:600px;
    margin:0 auto 2.5rem;line-height:1.85}
  .cta-btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
  .btn-primary{
    display:inline-flex;align-items:center;gap:.5rem;
    background:linear-gradient(135deg,var(--p3),var(--p3l));
    color:#0a0f1a;font-weight:700;font-size:.97rem;
    padding:.9rem 2.2rem;border-radius:50px;text-decoration:none;
    box-shadow:0 8px 28px var(--p3g);transition:opacity .2s,transform .2s
  }
  .btn-primary:hover{opacity:.9;transform:translateY(-2px);color:#0a0f1a}
  .btn-ghost{
    display:inline-flex;align-items:center;gap:.5rem;
    border:2px solid rgba(200,169,81,.4);color:var(--p3);
    font-weight:600;font-size:.97rem;padding:.85rem 2rem;
    border-radius:50px;text-decoration:none;transition:all .2s
  }
  .btn-ghost:hover{border-color:var(--p3);background:rgba(200,169,81,.08);color:var(--p3)}

  /* ── RELATED LINKS ── */
  .related-section{padding:70px 0;background:var(--navy2)}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
  @media(max-width:780px){.related-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.related-grid{grid-template-columns:1fr}}
  .rel-card{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
    border-radius:10px;padding:1.1rem 1.25rem;
    transition:border-color .2s
  }
  .rel-card:hover{border-color:var(--border-hi)}
  .rel-card a{font-size:.88rem;color:rgba(255,255,255,.8);line-height:1.4;
    text-decoration:none;font-weight:500}
  .rel-card a:hover{color:var(--p3)}

  /* ── FOOTER STYLES ── */
  .footer{background:#0a0f1a;border-top:1px solid rgba(200,169,81,.12);padding:60px 0 0}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
    padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.06)}
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:1.5rem}}
  .footer-logo{display:block;font-size:1.1rem;font-weight:800;color:var(--p3);
    text-decoration:none;margin-bottom:.5rem}
  .footer-tagline,.footer-nap{font-size:.82rem;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:.5rem}
  .footer-nap a{color:rgba(255,255,255,.55)}.footer-nap a:hover{color:var(--p3)}
  .footer-links-col h3{font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;color:rgba(255,255,255,.4);margin-bottom:.85rem}
  .footer-links-col a{display:block;font-size:.84rem;color:rgba(255,255,255,.55);
    text-decoration:none;margin-bottom:.4rem;transition:color .2s}
  .footer-links-col a:hover{color:var(--p3)}
  .footer-bottom{padding:1.25rem 0}
  .footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.28)}

  /* ── RESPONSIVE ── */
  @media(max-width:968px){
    .bio-section,.method-section,.expertise-section,.faq-section,.page-cta,.related-section{padding:60px 0}
  }
  @media(max-width:600px){
    .stats-row{flex-direction:column;gap:0}
    .stat-cell{border-right:none;border-bottom:1px solid rgba(255,255,255,.07)}
    .stat-cell:last-child{border-bottom:none}
  }
  

/* ════════════════════════════════════════════
   CASE STUDIES PAGE
   ════════════════════════════════════════════ */

  
  
  html{scroll-behavior:smooth;overflow-x:hidden}
  body{font-family:var(--font);line-height:1.75;color:var(--text-1);background:#0a0f1a;font-size:16px}
  h1,h2,h3,h4,h5,h6{font-family:var(--font);line-height:1.2;font-weight:700;letter-spacing:-.02em}
  img{display:block;max-width:100%}
  a{color:var(--gold);text-decoration:none;transition:color .2s}
  a:hover{color:#fff}
  .container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

  /* ── Scroll reveal ── */
  .sr{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
  .sr.visible{opacity:1;transform:translateY(0)}

  /* ── Breadcrumb ── */
  .breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8rem;
    color:rgba(255,255,255,.45);padding:1rem 0;flex-wrap:wrap}
  .breadcrumb a{color:var(--gold)}.breadcrumb a:hover{color:#fff}
  .breadcrumb span[aria-hidden]{color:rgba(255,255,255,.25)}

  /* ── CS HERO ── */
  /* ── Trust bar ── */
  .trust-bar{background:var(--navy2);padding:28px 0;
    border-bottom:1px solid rgba(255,255,255,.06)}
  .trust-items{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
  .trust-item{display:flex;align-items:center;gap:.6rem;
    font-size:.85rem;color:rgba(255,255,255,.6)}
  .trust-item i{color:var(--p3);font-size:.9rem}

  /* ── Section helpers ── */
  .section-eyebrow{font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.2em;color:var(--p3);margin-bottom:.85rem;text-align:center}
  .section-title{font-size:clamp(1.7rem,3.5vw,2.4rem);color:#fff;font-weight:800;
    text-align:center;margin-bottom:1rem}
  .section-lead{font-size:1rem;color:rgba(255,255,255,.65);text-align:center;
    max-width:640px;margin:0 auto 3rem;line-height:1.85}

  /* ── Case study cards ── */
  .cs-section{padding:80px 0}
  .cs-section:nth-child(odd){background:#0a0f1a}
  .cs-section:nth-child(even){background:var(--navy2)}
  .cs-card{
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
    border-radius:18px;overflow:hidden;
    box-shadow:0 8px 40px rgba(0,0,0,.4)
  }
  .cs-card-top{
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);
    padding:2rem 2.5rem;border-bottom:1px solid rgba(200,169,81,.15)
  }
  .cs-num-badge{
    display:inline-block;font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;background:rgba(200,169,81,.12);
    border:1px solid rgba(200,169,81,.28);color:var(--p3);
    padding:.25rem .85rem;border-radius:4px;margin-bottom:.85rem
  }
  .cs-card-top h2{font-size:clamp(1.2rem,2.5vw,1.55rem);color:#fff;
    font-weight:800;margin-bottom:.4rem}
  .cs-card-top .cs-meta{font-size:.84rem;color:rgba(255,255,255,.5)}
  .cs-body{padding:2rem 2.5rem}
  .cs-split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
  @media(max-width:760px){.cs-split{grid-template-columns:1fr}}
  .cs-col-label{font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.12em;margin-bottom:.85rem;display:flex;align-items:center;gap:.5rem}
  .cs-problem .cs-col-label{color:#ef4444}
  .cs-solution .cs-col-label{color:#22c55e}
  .cs-col-label i{font-size:.85rem}
  .cs-body p{font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.8}

  /* ── Results strip ── */
  .cs-results{
    background:linear-gradient(135deg,rgba(200,169,81,.07),rgba(200,169,81,.02));
    border-top:1px solid rgba(200,169,81,.15);
    padding:1.75rem 2.5rem
  }
  .results-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.15em;color:var(--p3);margin-bottom:1.25rem;
    display:flex;align-items:center;gap:.5rem}
  .metrics-row{display:flex;flex-wrap:wrap;gap:2rem}
  .metric{min-width:130px}
  .metric-before{font-size:.72rem;color:rgba(239,68,68,.8);margin-bottom:.15rem}
  .metric-arrow{font-size:1.4rem;color:var(--p3);line-height:1;margin-bottom:.15rem}
  .metric-after{font-size:1.5rem;font-weight:800;color:#22c55e;
    letter-spacing:-.03em;margin-bottom:.15rem}
  .metric-label{font-size:.72rem;color:rgba(255,255,255,.5)}

  /* ── Process timeline ── */
  .process-section{padding:90px 0;background:var(--navy2)}
  .timeline{position:relative;max-width:760px;margin:3rem auto 0;padding-left:2rem}
  .timeline::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:linear-gradient(180deg,var(--p3),rgba(200,169,81,.1))}
  .t-step{position:relative;margin-bottom:2.5rem;padding-left:1.75rem}
  .t-step::before{content:'';position:absolute;left:-2.4rem;top:.45rem;
    width:14px;height:14px;background:var(--p3);border-radius:50%;
    border:2px solid #0a0f1a;box-shadow:0 0 0 3px rgba(200,169,81,.2)}
  .t-week{font-size:.7rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.15em;color:var(--p3);margin-bottom:.3rem}
  .t-title{font-size:1.02rem;font-weight:700;color:#fff;margin-bottom:.4rem}
  .t-desc{font-size:.9rem;color:rgba(255,255,255,.68);line-height:1.75}

  /* ── FAQ ── */
  .faq-section{padding:90px 0;background:#0a0f1a}
  .faq-inner{max-width:780px}
  details.faq-item{border:1px solid rgba(255,255,255,.08);border-radius:10px;
    margin-bottom:.75rem;background:rgba(255,255,255,.03);overflow:hidden}
  details.faq-item[open]{border-color:var(--border-hi)}
  details.faq-item summary{padding:1.1rem 1.4rem;font-size:.97rem;font-weight:600;
    color:#fff;cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:1rem}
  details.faq-item summary::-webkit-details-marker{display:none}
  details.faq-item summary::after{content:"+";color:var(--p3);font-size:1.4rem;
    font-weight:300;flex-shrink:0;transition:transform .2s}
  details.faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-body{padding:.25rem 1.4rem 1.25rem;font-size:.93rem;
    color:rgba(255,255,255,.72);line-height:1.8}

  /* ── CTA ── */
  .page-cta{position:relative;padding:90px 0;text-align:center;overflow:hidden;
    background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%)}
  .page-cta::before{content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(200,169,81,.08),transparent 70%);
    pointer-events:none}
  .page-cta>*{position:relative;z-index:1}
  .page-cta h2{font-size:clamp(1.6rem,3.5vw,2.4rem);color:#fff;font-weight:800;margin-bottom:1rem}
  .page-cta p{font-size:1.02rem;color:rgba(255,255,255,.75);
    max-width:600px;margin:0 auto 2.5rem;line-height:1.85}
  .cta-btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
  .btn-primary{display:inline-flex;align-items:center;gap:.5rem;
    background:linear-gradient(135deg,var(--p3),var(--p3l));
    color:#0a0f1a;font-weight:700;font-size:.97rem;
    padding:.9rem 2.2rem;border-radius:50px;text-decoration:none;
    box-shadow:0 8px 28px var(--p3g);transition:opacity .2s,transform .2s}
  .btn-primary:hover{opacity:.9;transform:translateY(-2px);color:#0a0f1a}
  .btn-ghost{display:inline-flex;align-items:center;gap:.5rem;
    border:2px solid rgba(200,169,81,.4);color:var(--p3);
    font-weight:600;font-size:.97rem;padding:.85rem 2rem;
    border-radius:50px;text-decoration:none;transition:all .2s}
  .btn-ghost:hover{border-color:var(--p3);background:rgba(200,169,81,.08);color:var(--p3)}

  /* ── Footer ── */
  .footer{background:#0a0f1a;border-top:1px solid rgba(200,169,81,.12);padding:60px 0 0}
  .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;
    padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.06)}
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.footer-grid{grid-template-columns:1fr;gap:1.5rem}}
  .footer-logo{display:block;font-size:1.1rem;font-weight:800;color:var(--p3);
    text-decoration:none;margin-bottom:.5rem}
  .footer-tagline,.footer-nap{font-size:.82rem;color:rgba(255,255,255,.45);
    line-height:1.7;margin-bottom:.5rem}
  .footer-nap a{color:rgba(255,255,255,.55)}.footer-nap a:hover{color:var(--p3)}
  .footer-links-col h3{font-size:.72rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.14em;color:rgba(255,255,255,.4);margin-bottom:.85rem}
  .footer-links-col a{display:block;font-size:.84rem;color:rgba(255,255,255,.55);
    text-decoration:none;margin-bottom:.4rem;transition:color .2s}
  .footer-links-col a:hover{color:var(--p3)}
  .footer-bottom{padding:1.25rem 0}
  .footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.28)}

  /* ── Responsive ── */
  @media(max-width:968px){
    .cs-section,.process-section,.faq-section,.page-cta{padding:56px 0}
  }
  @media(max-width:600px){
    .cs-card-top,.cs-body,.cs-results{padding:1.5rem}
    .metrics-row{gap:1.25rem}
  }
  

/* ════════════════════════════════════════════
   BLOG TEMPLATE
   ════════════════════════════════════════════ */
/* ================================================================
   blog-template.css — Universal dark blog design system
   ophthaconsulting.com — All blog, category and article pages
   Version: 2026-04-01
   ================================================================ */
/* ═══════════════════════════════════════════════════════
   BLOG SHARED DARK DESIGN SYSTEM — ophthaconsulting.com
   Matches home/services/service-area dark aesthetic
   ═══════════════════════════════════════════════════════ */

/* ── Root Variables ── */


/* ── Base Reset ── */

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  color:var(--text-1);
  font-family:var(--ff-sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--text-1)}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.25;font-weight:700}/* ── Container ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.container--narrow{max-width:820px;margin:0 auto;padding:0 24px}
/* ── Category Filter Bar ── */
.cat-filter{
  background:var(--ink-2);
  border-bottom:1px solid var(--border);
  padding:14px 0;
  position:sticky;top:64px;z-index:90;
}
.cat-filter-inner{
  display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:center;
}
.cat-filter-label{
  font-size:0.72rem;color:var(--text-3);
  text-transform:uppercase;letter-spacing:0.1em;
  margin-right:4px;
}
.cat-btn{
  font-size:0.78rem;font-weight:600;
  padding:5px 14px;border-radius:20px;
  border:1px solid var(--border);
  color:var(--text-2);background:transparent;
  cursor:pointer;text-decoration:none;
  transition:all var(--transition);display:inline-block;
}
.cat-btn:hover{border-color:var(--gold);color:var(--gold);background:var(--gold-glow)}
.cat-btn.active,.cat-btn--active{
  border-color:var(--gold);color:var(--ink);
  background:var(--gold);font-weight:700;
}
.cat-btn.active:hover{color:var(--ink)}

/* ── Blog Grid ── */
.blog-grid-section{padding:56px 0 72px}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:24px;
}

/* ── Blog Card ── */
.blog-card{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transition),border-color var(--transition),box-shadow var(--transition);
}
.blog-card:hover{
  transform:translateY(-4px);
  border-color:var(--border-hi);
  box-shadow:var(--shadow-lg);
}
.blog-card-body{flex:1;padding:24px 24px 16px}
.blog-card-category{
  font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--gold);margin-bottom:10px;
}
.blog-card-title{
  display:block;font-size:1rem;font-weight:700;
  color:var(--text-1);line-height:1.4;
  margin-bottom:10px;
  transition:color var(--transition);
}
.blog-card-title:hover{color:var(--gold)}
.blog-card-excerpt{
  font-size:0.875rem;color:var(--text-2);
  line-height:1.6;margin-bottom:14px;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-meta{
  display:flex;gap:16px;flex-wrap:wrap;
  font-size:0.78rem;color:var(--text-3);
  align-items:center;
}
.blog-card-meta i{color:var(--gold);margin-right:4px}
.blog-card-footer{
  padding:14px 24px 20px;
  border-top:1px solid var(--border);
}
.blog-card-link{
  display:block;width:100%;text-align:center;
  background:var(--glass);border:1px solid var(--border);
  color:var(--text-1);font-size:0.85rem;font-weight:600;
  padding:9px 16px;border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.blog-card-link:hover{
  background:var(--gold);color:var(--ink);
  border-color:var(--gold);
}

/* ── Article: Post Header ── */
.post-header{
  background:linear-gradient(160deg, var(--ink-2) 0%, var(--ink-3) 100%);
  border-bottom:1px solid var(--border);
  padding:64px 0 48px;
  position:relative;overflow:hidden;
}
.post-header::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,168,76,0.07) 0%, transparent 70%);
  pointer-events:none;
}
.post-header > *{position:relative;z-index:1}
.post-category-badge{
  display:inline-block;
  font-size:0.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--gold);background:var(--gold-glow);
  border:1px solid var(--border-hi);
  padding:4px 12px;border-radius:20px;margin-bottom:16px;
}
.post-title{
  font-size:clamp(1.6rem,4vw,2.6rem);
  color:var(--text-1);margin-bottom:16px;
  line-height:1.2;letter-spacing:-0.02em;
}
.post-meta{
  font-size:0.85rem;color:var(--text-3);
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.post-meta i{color:var(--gold)}
.post-meta .sep{color:var(--border);margin:0 2px}
.post-lead{
  font-size:1.05rem;color:var(--text-2);
  line-height:1.75;margin-top:16px;
  padding-top:16px;border-top:1px solid var(--border);
}

/* ── Article Layout ── */
.article-layout{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:40px;
  max-width:1100px;
  margin:0 auto;
  padding:56px 24px 72px;
  align-items:start;
}
.article-main{}
.article-sidebar{
  position:sticky;top:88px;
}

/* ── TOC Box ── */
.toc-box{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:20px 22px;margin-bottom:24px;
}
.toc-box-title{
  font-size:0.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--gold);margin-bottom:12px;
}
.toc-list{list-style:none;padding:0}
.toc-list li{
  padding:5px 0;
  border-bottom:1px solid var(--border);
  font-size:0.82rem;
}
.toc-list li:last-child{border-bottom:none}
.toc-list a{color:var(--text-2);transition:color var(--transition)}
.toc-list a:hover{color:var(--gold)}

/* ── Sidebar CTA ── */
.sidebar-cta{
  background:linear-gradient(160deg, var(--ink-3) 0%, rgba(201,168,76,0.06) 100%);
  border:1px solid var(--border-hi);
  border-radius:var(--radius-md);
  padding:22px;text-align:center;
}
.sidebar-cta h4{
  color:var(--text-1);font-size:0.95rem;
  margin-bottom:8px;
}
.sidebar-cta p{
  color:var(--text-2);font-size:0.82rem;
  line-height:1.55;margin-bottom:16px;
}
.sidebar-cta-btn{
  display:block;width:100%;
  background:var(--gold);color:var(--ink);
  font-weight:700;font-size:0.85rem;
  padding:10px;border-radius:var(--radius-sm);
  transition:all var(--transition);
}
.sidebar-cta-btn:hover{background:#e0b94d;color:var(--ink);transform:translateY(-1px)}

/* ── Post Body Typography ── */
.post-body{
  color:var(--text-1);
  font-size:1.02rem;line-height:1.8;
}
.post-body h2{
  font-size:1.5rem;color:var(--text-1);
  margin:2rem 0 0.8rem;padding-top:1.5rem;
  border-top:1px solid var(--border);
}
.post-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.post-body h3{
  font-size:1.15rem;color:var(--gold);
  margin:1.6rem 0 0.6rem;
}
.post-body p{margin-bottom:1.2rem}
.post-body ul,.post-body ol{
  margin:0 0 1.2rem 1.4rem;
}
.post-body ul{list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin-bottom:0.4rem}
.post-body strong{color:var(--text-1);font-weight:700}
.post-body em{color:var(--gold);font-style:italic}
.post-body blockquote{
  border-left:3px solid var(--gold);
  background:var(--glass);
  padding:14px 20px;
  margin:1.5rem 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--text-2);font-style:italic;
}
.post-body a{color:var(--sky);border-bottom:1px solid rgba(88,166,255,0.3)}
.post-body a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* ── Key Takeaways ── */
.key-takeaways{
  background:var(--ink-2);
  border:1px solid var(--border-hi);
  border-radius:var(--radius-md);
  padding:24px 28px;margin:0 0 2rem;
}
.key-takeaways h4{
  color:var(--gold);font-size:0.85rem;
  text-transform:uppercase;letter-spacing:0.1em;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.key-takeaways h4::before{
  content:'';display:inline-block;
  width:18px;height:18px;border-radius:3px;
  background:var(--gold);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink:0;
}
.key-takeaways ul{list-style:none;padding:0}
.key-takeaways li{
  color:var(--text-2);font-size:0.9rem;line-height:1.6;
  padding:6px 0 6px 20px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.key-takeaways li:last-child{border-bottom:none}
.key-takeaways li::before{
  content:'→';position:absolute;left:0;
  color:var(--gold);font-weight:700;
}

/* ── Stats Box ── */
.stats-box{
  background:var(--ink-2);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px 28px;margin:1.5rem 0;
}
.stats-box-header{
  font-size:0.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--text-3);margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--border);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:16px;
}
.stat-item{text-align:center}
.stat-number{
  font-size:1.8rem;font-weight:800;
  color:var(--gold);line-height:1.1;
  display:block;
}
.stat-label{
  font-size:0.78rem;color:var(--text-3);
  line-height:1.4;margin-top:4px;
  display:block;
}

/* ── FAQ Section ── */
.faq-section{margin:2rem 0}
.faq-section h2{
  font-size:1.4rem;color:var(--text-1);
  margin-bottom:1.2rem;
}
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:12px;overflow:hidden;
}
.faq-question{
  width:100%;text-align:left;
  background:var(--ink-2);
  color:var(--text-1);font-size:0.95rem;font-weight:600;
  padding:16px 20px;cursor:pointer;
  border:none;display:flex;align-items:center;
  justify-content:space-between;gap:12px;
  transition:background var(--transition);
}
.faq-question:hover{background:var(--ink-3)}
.faq-question::after{
  content:'＋';color:var(--gold);font-size:1.1rem;
  flex-shrink:0;transition:transform 0.25s;
}
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{
  background:var(--ink-3);
  color:var(--text-2);font-size:0.9rem;
  line-height:1.7;padding:0 20px;
  max-height:0;overflow:hidden;
  transition:max-height 0.35s ease, padding 0.25s;
}
.faq-item.open .faq-answer{max-height:400px;padding:16px 20px}

/* ── Article CTA ── */
.article-cta{
  background:linear-gradient(135deg, var(--ink-3) 0%, rgba(201,168,76,0.06) 100%);
  border:1px solid var(--border-hi);
  border-radius:var(--radius-lg);
  padding:36px 32px;margin:2.5rem 0;
  text-align:center;
}
.article-cta h3{
  color:var(--text-1);font-size:1.35rem;
  margin-bottom:10px;
}
.article-cta p{color:var(--text-2);margin-bottom:20px;font-size:0.95rem}
.article-cta-btn{
  display:inline-block;
  background:var(--gold);color:var(--ink);
  font-weight:700;font-size:0.95rem;
  padding:12px 28px;border-radius:24px;
  transition:all var(--transition);
}
.article-cta-btn:hover{background:#e0b94d;color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 20px rgba(201,168,76,0.35)}

/* ── Post Tags ── */
.post-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;margin:2rem 0 1rem;
}
.post-tags-label{
  font-size:0.72rem;color:var(--text-3);
  text-transform:uppercase;letter-spacing:0.1em;
}
.tag{
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--text-3);
  font-size:0.75rem;padding:4px 10px;
  border-radius:12px;
  transition:all var(--transition);
}
.tag:hover{border-color:var(--gold);color:var(--gold)}

/* ── Related Posts ── */
.related-posts{
  background:var(--ink-2);
  border-top:1px solid var(--border);
  padding:56px 0;
}
.related-posts-header{
  font-size:0.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.12em;
  color:var(--text-3);margin-bottom:24px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

/* ── Category Page: Hero ── */
.cat-page-hero{
  background:var(--ink-2);
  border-bottom:1px solid var(--border);
  padding:56px 0 44px;
  text-align:center;
}
.cat-page-hero h1{
  font-size:clamp(1.8rem,4vw,2.6rem);
  color:var(--text-1);margin-bottom:8px;
}
.cat-page-hero h1 em{color:var(--gold);font-style:normal}
.cat-page-hero p{color:var(--text-2);font-size:1rem;max-width:540px;margin:0 auto}/* ── Scroll Reveal ── */
.sr,.sr-img{
  opacity:0;transform:translateY(22px);
  transition:opacity 0.55s ease,transform 0.55s ease;
}
.sr.visible,.sr-img.visible{opacity:1;transform:none}
.blog-card{
  opacity:0;transform:translateY(18px);
  transition:opacity 0.5s ease,transform 0.5s ease,
             border-color var(--transition),box-shadow var(--transition);
}
.blog-card.visible{opacity:1;transform:translateY(0)}
.blog-card.visible:hover{transform:translateY(-4px)}

/* ── Responsive ── */
@media(max-width:1024px){
  .article-layout{grid-template-columns:1fr;gap:0}
  .article-sidebar{display:none}
}
@media(max-width:768px){
  .article-layout{padding:36px 20px 56px}
  .post-header{padding:44px 0 32px}
  .post-title{font-size:1.5rem}
}
@media(max-width:480px){
  .blog-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* ── Additional Mobile Responsiveness (P3) ── */
/* Disable fixed background on iOS Safari (parallax performance fix) */
@supports (-webkit-overflow-scrolling: touch) {
  body { -webkit-overflow-scrolling: touch; }
  .blog-hero, .post-header, .article-layout {
    background-attachment: scroll !important;
  }
}
@media (max-width: 768px) {
  /* iOS Safari fixed attachment workaround */
  * { background-attachment: scroll !important; }
  
  /* Touch targets >= 44px */
  .nav-link, .nav-drawer-link, .footer-link,
  .faq-question, .article-cta-btn, .sidebar-cta-btn,
  .blog-card-link, .cat-filter-btn, .tag {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Blog grid single column */
  .blog-grid { grid-template-columns: 1fr !important; }
  .related-grid { grid-template-columns: 1fr !important; }
  
  /* Article layout full width */
  .article-layout {
    grid-template-columns: 1fr !important;
    padding: 28px 16px 48px !important;
    gap: 0 !important;
  }
  .article-sidebar { display: none !important; }
  
  /* Post header adjustments */
  .post-header { padding: 36px 0 24px !important; }
  .post-title { font-size: 1.4rem !important; line-height: 1.3 !important; }
  .post-lead { font-size: 0.95rem !important; }
  
  /* Stats grid 2-col on mobile */
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .stat-number { font-size: 1.4rem !important; }
  
  /* Prevent horizontal overflow */
  .container, .container--narrow {
    padding: 0 16px !important;
    overflow-x: hidden;
  }
  
  /* Key takeaways readable */
  .key-takeaways { padding: 16px !important; }
  .key-takeaways li { font-size: 0.9rem !important; }
  
  /* FAQ touch-friendly */
  .faq-question {
    padding: 14px 16px !important;
    font-size: 0.9rem !important;
    min-height: 44px;
  }
  
  /* Typography scaling */
  
  /* Images max-width */
  img { max-width: 100% !important; }
  
  /* Article CTA */
  .article-cta { padding: 24px 16px !important; }
  .article-cta h3 { font-size: 1.1rem !important; }
  .article-cta-btn {
    display: block !important;
    text-align: center !important;
    padding: 14px 20px !important;
  }
  
  /* Related posts header */
  .related-posts { padding: 36px 0 !important; }
}

@media (max-width: 480px) {
  .post-title { font-size: 1.2rem !important; }
  .stats-grid { grid-template-columns: 1fr !important; }
  .container--narrow { padding: 0 14px !important; }
  
  /* Prevent body horizontal scroll */
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  
  /* Touch target sizes */
  .faq-question { min-height: 48px !important; }
  .article-cta-btn { min-height: 48px !important; font-size: 1rem !important; }
}

/* ── Print styles ── */

/* ── Site Footer (shared across all pages) ── */
.footer {
  background: #0d1117;
  border-top: 1px solid rgba(201,168,76,.15);
  padding: 60px 0 0;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.footer-brand .footer-logo {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 800;
  color: #c9a84c;
  text-decoration: none;
  margin-bottom: .6rem;
}
.footer-brand .footer-tagline {
  font-size: .82rem;
  color: #656d76;
  line-height: 1.6;
  margin-bottom: .75rem;
}
.footer-brand .footer-nap {
  font-size: .82rem;
  color: #8b949e;
  line-height: 1.8;
}
.footer-brand .footer-nap a {
  color: #58a6ff;
  text-decoration: none;
}
.footer-brand .footer-nap a:hover { text-decoration: underline; }
.footer-title {
  font-size: 1rem;
  font-weight: 700;
  color: #c9a84c;
  margin-bottom: .6rem;
}
.footer-text {
  font-size: .84rem;
  color: #8b949e;
  line-height: 1.7;
  margin-bottom: 1rem;
}
.footer-contact p {
  font-size: .82rem;
  color: #8b949e;
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.footer-contact i { color: #c9a84c; }
.footer-subtitle,
.footer-links-col h3 {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #8b949e;
  margin-bottom: .75rem;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: .35rem; }
.footer-links-col a,
.footer-links .footer-link {
  font-size: .84rem;
  color: #656d76;
  text-decoration: none;
  transition: color .2s;
  display: block;
  margin-bottom: .35rem;
}
.footer-links-col a:hover,
.footer-links .footer-link:hover { color: #c9a84c; text-decoration: none; }
.footer-bottom {
  padding: 1.25rem 0;
}
.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.footer-bottom p,
.footer-bottom-content p {
  font-size: .8rem;
  color: #444d56;
}
.footer-certifications {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-certifications span {
  font-size: .75rem;
  color: #444d56;
  background: rgba(255,255,255,.04);
  padding: .2rem .6rem;
  border-radius: 4px;
}

@media print {
  .header, .article-sidebar, .related-posts, .footer, 
  .article-cta, .mobile-menu { display: none !important; }
  body { background: white !important; color: black !important; }
  .article-main { max-width: 100% !important; }
}

/* ── LUXE Responsive Hero Images ────────────────────────────────────
   Desktop override: swap mobile portrait to landscape LUXE image
   when viewport ≥ 769px (--hero-bg-desktop variable)
──────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
  .page-hero[style*="--hero-bg-desktop"] {
    background-image: var(--hero-bg-desktop) !important;
  }
}

/* ── LUXE Section Images ─────────────────────────────────────────── */
.luxe-section-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.luxe-section-img img,
.luxe-section-img picture img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* Phase quote sections with LUXE backgrounds */
.phase-quote[data-bg-desktop] {
  background-size: cover;
  background-position: center;
}

@media (min-width: 769px) {
  /* Switch phase-quote bg to desktop version via JS-free approach */
  /* These are handled via data-bg-desktop attribute via site.js */
}

/* Blog featured images */
.post-header figure img {
  border-radius: 12px;
}