/* ============================================================
   LAPT Design System — sitewide override
   Loaded AFTER Themeholy style.css.
   Source of truth: design/index.html + design/lapt-design-system/
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..700;1,8..60,400..600&family=Public+Sans:ital,wght@0,400..800;1,400..600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Navy */
  --navy-950:#08152b; --navy-900:#0b1d39; --navy-800:#112744;
  --navy-700:#163257; --navy-600:#1f4374; --navy-500:#2c578f;
  --navy-400:#5b80ad; --navy-300:#93accb; --navy-200:#c4d3e4;
  --navy-100:#e4ebf4; --navy-50:#f2f6fb;
  /* Gold */
  --gold-700:#8a6a22; --gold-600:#a8852f; --gold-500:#c8a24a;
  --gold-400:#d8b86c; --gold-300:#e7d09a; --gold-100:#faf3e1;
  /* Green */
  --green-600:#1a7d52; --green-100:#e2f3ea;
  /* Slate */
  --slate-900:#0e1726; --slate-800:#1d2838; --slate-700:#36465b;
  --slate-600:#51647d; --slate-500:#6f8197; --slate-400:#9aa8ba;
  --slate-300:#c3cdd9; --slate-200:#dde4ec; --slate-150:#e8edf3;
  --slate-100:#f1f4f8; --slate-50:#f8fafc;
  /* Fonts */
  --font-display:"Source Serif 4",Georgia,"Times New Roman",serif;
  --font-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  /* Radii */
  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;
  --radius-xl:20px; --radius-2xl:28px; --radius-pill:999px;
  /* Shadows (navy-tinted, never black) */
  --shadow-sm:0 1px 3px rgba(11,29,57,.08),0 1px 2px rgba(11,29,57,.05);
  --shadow-md:0 6px 16px rgba(11,29,57,.08),0 2px 5px rgba(11,29,57,.05);
  --shadow-lg:0 18px 40px rgba(11,29,57,.12),0 6px 14px rgba(11,29,57,.06);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Themeholy theme token overrides */
  --theme-color:#112744 !important;
  --theme-color2:#c8a24a !important;
  --title-color:#0e1726 !important;
  --body-color:#36465b !important;
  --black-color2:#08152b !important;
  --yellow-color:#c8a24a !important;
  --smoke-color2:#e4ebf4 !important;
  --smoke-color3:#f2f6fb !important;
  --title-font:"Source Serif 4",Georgia,serif !important;
  --body-font:"Public Sans",system-ui,sans-serif !important;
}

/* ── Typography ────────────────────────────────────────────── */
body { font-family:var(--font-sans) !important; color:var(--slate-700); }
h1,h2,h3,h4,h5 { font-family:var(--font-display) !important; color:var(--slate-900); letter-spacing:-.01em; }

/* ── Gold eyebrow labels (used above section headings) ─────── */
/* Design system: eyebrow text is gold-600, uppercase, tracked */
.hp-sec-eyebrow,
.hub-section-eyebrow,
.sub-title,
.sec-subtitle,
.sec-sub-title,
.slide-label,
.sec-title + *,
[class*="eyebrow"],
[class*="sub-title"] {
  color: var(--gold-600) !important;
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

/* ── Gold rule — 54×3px bar under section h2s ─────────────── */
/* Matches design/index.html .rule */
.hp-sec-header::after,
.hub-section-head::after {
  content: '';
  display: block;
  width: 54px; height: 3px;
  background: var(--gold-500);
  border-radius: 2px;
  margin: 18px auto 0;
}

/* ── Stat numbers → gold on navy backgrounds ───────────────── */
/* Matches design/index.html: stat b { color:var(--gold-400) } */
.counter-number,
.count-number,
.th-counter .counter-number,
.counters-area .counter-number,
.hub-stat-num,
.counter-item .counter-number {
  color: var(--gold-400) !important;
  font-family: var(--font-display) !important;
}

/* ── Process step numbers — navy circle with gold number ───── */
.process-card .box-number,
.process-step .step-num,
.process-num {
  background: var(--navy-800) !important;
  color: var(--gold-400) !important;
  font-family: var(--font-display) !important;
}

/* ── Primary buttons → navy, hover darkens ─────────────────── */
.th-btn,
.th-btn.style3,
.slide-btn,
.btn.style1 {
  background: var(--navy-800) !important;
  color: #fff !important;
  border-color: var(--navy-800) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
}
.th-btn:hover,
.slide-btn:hover {
  background: var(--navy-700) !important;
  border-color: var(--navy-700) !important;
}

/* ── Accent (gold) buttons ─────────────────────────────────── */
.th-btn.style2,
.btn-accent,
.btn-warn {
  background: var(--gold-500) !important;
  color: var(--navy-900) !important;
  border-color: var(--gold-500) !important;
}
.th-btn.style2:hover,
.btn-accent:hover { background: var(--gold-600) !important; }

/* ── Header top bar → navy-900 ─────────────────────────────── */
.header-top { background: var(--navy-900) !important; }
.header-top a, .header-links li, .header-links a,
.header-social a, .social-title { color: var(--navy-200) !important; }
.header-social a:hover { color: var(--gold-400) !important; }

/* ── Nav bar → white, nav links navy ──────────────────────── */
.menu-area { background: #fff !important; border-bottom: 1px solid var(--slate-200) !important; }
.main-menu > ul > li > a {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--slate-800) !important;
}
.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a { color: var(--navy-800) !important; }
/* Gold underline on active/hover nav item */
.main-menu > ul > li.active > a::after,
.main-menu > ul > li:hover > a::after {
  background: var(--gold-500) !important;
}

/* ── Submenu → white cards ─────────────────────────────────── */
.main-menu .sub-menu { border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; border: 1px solid var(--slate-200) !important; }
.main-menu .sub-menu li a { font-family: var(--font-sans) !important; font-weight: 500 !important; color: var(--slate-700) !important; }
.main-menu .sub-menu li a:hover { color: var(--navy-800) !important; background: var(--navy-50) !important; }

/* ── Hero section ──────────────────────────────────────────── */
.hero-section, .lapt-hero-slider .swiper-slide, .hero-4 .swiper-slide { background: var(--navy-800) !important; }
.slide-label { color: var(--gold-400) !important; font-family: var(--font-sans) !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; }
.slide-title, .slide-title .lapt-name { font-family: var(--font-display) !important; color: #fff !important; }
.slide-subtitle { color: var(--navy-200) !important; }

/* ── Trust/counter band → navy-800 bg, gold numbers ───────── */
.counter-area, .th-counter-area, .counters-area { background: var(--navy-800) !important; }
.counter-title, .counter-text { color: var(--navy-200) !important; }
.th-icon-box.style3 .icon-btn, .icon-btn.style3 { background: var(--navy-700) !important; color: var(--gold-400) !important; }

/* ── Card shadows → navy-tinted ────────────────────────────── */
.th-team.team-grid, .project-grid, .service-card, .blog-card,
.course-card, .process-card {
  box-shadow: var(--shadow-sm) !important;
  border-radius: var(--radius-lg) !important;
}
.th-team.team-grid:hover, .project-grid:hover, .service-card:hover, .blog-card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-3px) !important;
}

/* ── FAQ accordion → gold + icon ──────────────────────────── */
.faq-icon-first i { background: var(--navy-800) !important; }
.faq-icon-second i { background: var(--navy-950) !important; }
.accordion-button:not(.collapsed) { color: var(--gold-600) !important; background: var(--navy-50) !important; }
.accordion-button::after { filter: none !important; }

/* ── Section backgrounds — alternating white / slate-50 ───── */
.hp-industries:nth-child(odd) { background: var(--slate-50) !important; }
.hp-industries:nth-child(even) { background: #fff !important; }

/* ── Partner CTA section → navy-900 ────────────────────────── */
.cta-area, .th-cta-area, .partner-section { background: var(--navy-900) !important; }
.cta-area h2, .cta-area .sec-title, .partner-section h2 { color: #fff !important; font-family: var(--font-display) !important; }
.cta-area p, .partner-section p { color: var(--navy-200) !important; }

/* ── Footer → navy-950 ─────────────────────────────────────── */
.th-footer-area, footer { background: var(--navy-950) !important; color: var(--navy-300) !important; }
.footer-widget .footer-title, .th-footer-area h4 { color: #fff !important; font-family: var(--font-sans) !important; font-size: 13px !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.footer-widget a, .th-footer-area a { color: var(--navy-300) !important; }
.footer-widget a:hover, .th-footer-area a:hover { color: var(--gold-400) !important; }
.copyright-wrap, .th-copyright { background: var(--navy-950) !important; border-top: 1px solid var(--navy-800) !important; color: var(--navy-400) !important; }

/* ── Blog section ──────────────────────────────────────────── */
.hp-blog-strip { background: var(--slate-50) !important; }
.hp-blog-eyebrow, [class*="blog"] .eyebrow { color: var(--gold-600) !important; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcumb-wrapper { background-color: var(--navy-800) !important; }
.breadcumb-title { font-family: var(--font-display) !important; color: #fff !important; }
.breadcumb-menu li, .breadcumb-menu a { color: var(--navy-200) !important; }
.breadcumb-menu li.active, .breadcumb-menu a:hover { color: var(--gold-400) !important; }

/* ── Floating "Become Centre" button → navy+gold ───────────── */
#laptFloatBtn { background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%) !important; }
#laptFloatBtn:hover { background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%) !important; }

/* ── Radius cleanup (Themeholy uses 70px — too large) ──────── */
.top-left-radius    { border-top-left-radius:   var(--radius-xl) !important; }
.bottom-right-radius{ border-bottom-right-radius:var(--radius-xl) !important; }
.top-right-radius   { border-top-right-radius:  var(--radius-xl) !important; }
.bottom-left-radius { border-bottom-left-radius: var(--radius-xl) !important; }