/*
Theme Name: BST - Best Services & Technologies
Theme URI: https://bstechsa.com
Author: BST - Best Services & Technologies
Author URI: https://bstechsa.com
Description: Thème WordPress sur mesure pour BST (Best Services & Technologies), entreprise camerounaise d'intégration de solutions IT, télécoms et énergie. Site vitrine bilingue FR/EN.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: bst
*/

/* ==========================================================================
   1. VARIABLES & RESET
   ========================================================================== */
:root{
  --bst-blue: #1487c9;
  --bst-blue-dark: #0d5f92;
  --bst-blue-darker: #0a4a72;
  --bst-navy: #0e2438;
  --bst-navy-2: #122f4a;
  --bst-gray: #58595b;
  --bst-gray-light: #8a9099;
  --bst-ink: #1b2733;
  --bst-bg: #ffffff;
  --bst-bg-alt: #f4f7fa;
  --bst-bg-soft: #eef3f7;
  --bst-border: #e2e8ee;
  --bst-orange: #f2994a;
  --bst-success: #2fae6c;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(14,36,56,0.06);
  --shadow-md: 0 8px 30px rgba(14,36,56,0.10);
  --shadow-lg: 0 20px 60px rgba(14,36,56,0.16);
  --container: 1200px;
  --font-head: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--bst-ink);
  background: var(--bst-bg);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color: var(--bst-blue-dark); text-decoration:none; transition: color var(--transition); }
a:hover{ color: var(--bst-blue); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color: var(--bst-navy);
  line-height:1.2;
  margin: 0 0 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
p{ margin:0 0 16px; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--bst-navy); color:#fff;
  padding:12px 20px; z-index:10000; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   2. LAYOUT HELPERS
   ========================================================================== */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.section{ padding: 96px 0; position: relative; }
.section--sm{ padding: 64px 0; }
.section--alt{ background: var(--bst-bg-alt); }
.section--navy{ background: linear-gradient(135deg, var(--bst-navy) 0%, var(--bst-navy-2) 100%); color: #cfe1ee; }
.section--navy h2, .section--navy h3{ color:#fff; }
.grid{ display:grid; gap: 32px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-6{ grid-template-columns: repeat(6, 1fr); }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-16{ gap:16px; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  text-transform: uppercase; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--bst-blue); margin-bottom: 14px;
}
.eyebrow::before{ content:""; width:24px; height:2px; background: var(--bst-orange); display:inline-block; }
.section-head{ max-width: 720px; margin: 0 0 56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.section-head p{ color: var(--bst-gray); font-size: 1.08rem; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  border: 2px solid transparent; transition: all var(--transition); white-space: nowrap;
}
.btn-primary{ background: var(--bst-blue); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover{ background: var(--bst-blue-dark); color:#fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-outline{ border-color: rgba(255,255,255,0.5); color:#fff; }
.btn-outline:hover{ border-color:#fff; background: rgba(255,255,255,0.1); color:#fff; }
.btn-ghost{ border-color: var(--bst-border); color: var(--bst-navy); }
.btn-ghost:hover{ border-color: var(--bst-blue); color: var(--bst-blue); }
.btn-sm{ padding: 10px 20px; font-size: 0.88rem; }
.btn svg{ width:18px; height:18px; }

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.site-header{
  position: sticky; top:0; z-index: 999;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--bst-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:84px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:44px; width:auto; }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand .brand-text strong{ font-family: var(--font-head); font-weight:700; color:var(--bst-navy); font-size:1.05rem; letter-spacing:0.02em;}
.brand .brand-text span{ font-size:0.68rem; color:var(--bst-gray); text-transform:uppercase; letter-spacing:0.08em; }

.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav a{
  color: var(--bst-navy); font-weight:500; font-size:0.95rem; padding: 10px 16px;
  border-radius: 999px; transition: all var(--transition); position:relative;
}
.main-nav a:hover, .main-nav a.is-active{ background: var(--bst-bg-soft); color: var(--bst-blue-dark); }

.header-actions{ display:flex; align-items:center; gap:14px; }
.lang-switch{ display:flex; align-items:center; gap:2px; background: var(--bst-bg-soft); border-radius:999px; padding:3px; }
.lang-switch a{ padding:6px 12px; font-size:0.78rem; font-weight:700; border-radius:999px; color: var(--bst-gray); letter-spacing:0.03em;}
.lang-switch a.is-active{ background: var(--bst-navy); color:#fff; }

.nav-toggle{ display:none; background:none; border:none; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--bst-navy); margin:5px 0; transition: all var(--transition); }

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(1100px 500px at 85% -10%, rgba(20,135,201,0.35), transparent 60%), linear-gradient(160deg, var(--bst-navy) 0%, #0a1c2c 55%, #081521 100%);
  color:#e7eef4; padding: 120px 0 140px;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 75%);
  pointer-events:none;
}
.hero .hero-shape{
  position:absolute; right:-10%; top:10%; width:620px; height:620px; border-radius:50%;
  background: conic-gradient(from 180deg, rgba(20,135,201,0.35), transparent 60%);
  filter: blur(40px); pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; max-width: 760px; }
.hero .eyebrow{ color:#7fc3ec; }
.hero h1{
  color:#fff; font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight:700; letter-spacing:-0.02em;
  margin-bottom:22px;
}
.hero h1 em{ color: var(--bst-blue); font-style:normal; }
.hero p.lead{ font-size: 1.18rem; color:#b9cade; max-width:620px; margin-bottom:36px; }
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 64px; }

.hero-stats{ position:relative; z-index:1; display:grid; grid-template-columns: repeat(4,1fr); gap:0; border-top:1px solid rgba(255,255,255,0.12); padding-top:36px; }
.hero-stats .stat{ padding-right:24px; }
.hero-stats .stat strong{ display:block; font-family:var(--font-head); font-size: clamp(1.5rem,3vw,2.1rem); color:#fff; font-weight:700; }
.hero-stats .stat span{ font-size:0.85rem; color:#8fa4b8; }

/* Page (interior) hero — smaller banner for sub-pages */
.page-hero{
  background: linear-gradient(150deg, var(--bst-navy) 0%, #0a1c2c 100%);
  color:#fff; padding: 76px 0 64px; position:relative; overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; right:-6%; top:-30%; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(20,135,201,0.4), transparent 65%);
}
.page-hero .breadcrumb{ font-size:0.85rem; color:#8fa4b8; margin-bottom:14px; position:relative; z-index:1; }
.page-hero .breadcrumb a{ color:#8fa4b8; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero h1{ color:#fff; font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-bottom:14px; position:relative; z-index:1; }
.page-hero p{ color:#b9cade; max-width:640px; font-size:1.05rem; position:relative; z-index:1; margin-bottom:0; }

/* ==========================================================================
   6. CARDS — métiers / domaines / valeurs
   ========================================================================== */
.card{
  background:#fff; border:1px solid var(--bst-border); border-radius: var(--radius-md);
  padding: 36px 30px; transition: all var(--transition); height:100%;
}
.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: transparent; }
.card .icon{
  width:56px; height:56px; border-radius: 14px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--bst-blue), var(--bst-blue-dark)); margin-bottom:22px;
}
.card .icon svg{ width:28px; height:28px; stroke:#fff; }
.card h3{ font-size:1.2rem; margin-bottom:10px; }
.card p{ color:var(--bst-gray); font-size:0.96rem; margin-bottom:14px; }
.card ul.check-list{ margin-top:12px; }
.card .index{ font-family:var(--font-head); font-size:0.8rem; font-weight:700; color: var(--bst-blue); letter-spacing:0.08em; margin-bottom:10px; display:block; }

.check-list li{
  position:relative; padding-left:26px; margin-bottom:10px; font-size:0.94rem; color: var(--bst-ink);
}
.check-list li::before{
  content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%;
  background: var(--bst-bg-soft); border:1px solid var(--bst-blue);
}
.check-list li::after{
  content:""; position:absolute; left:5px; top:8px; width:6px; height:9px;
  border-right:2px solid var(--bst-blue); border-bottom:2px solid var(--bst-blue); transform: rotate(40deg);
}

.metier-card{ position:relative; }
.metier-card .num{
  position:absolute; top:24px; right:28px; font-family:var(--font-head); font-weight:700;
  font-size:2.2rem; color: var(--bst-bg-soft); z-index:0;
}

/* Domaine cards (grid of 6) */
.domaine-card{
  background:#fff; border:1px solid var(--bst-border); border-radius: var(--radius-md);
  padding:32px 28px; transition: all var(--transition);
}
.domaine-card:hover{ box-shadow: var(--shadow-md); border-color:transparent; transform: translateY(-4px); }
.domaine-card .icon{
  width:52px; height:52px; border-radius:12px; background: var(--bst-bg-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.domaine-card .icon svg{ width:26px; height:26px; stroke: var(--bst-blue-dark); }
.domaine-card h3{ font-size:1.12rem; margin-bottom:12px; }
.domaine-card ul{ margin:0; }
.domaine-card ul li{
  font-size:0.9rem; color:var(--bst-gray); padding:6px 0; border-top:1px solid var(--bst-bg-soft);
}
.domaine-card ul li:first-child{ border-top:none; }

/* ==========================================================================
   7. STATS / COUNTERS (mid page)
   ========================================================================== */
.stats-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.stats-strip .stat-box{
  text-align:center; padding: 32px 20px; border-radius: var(--radius-md); background: var(--bst-bg-alt);
}
.stats-strip .stat-box strong{ display:block; font-family:var(--font-head); font-size:2.2rem; font-weight:700; color:var(--bst-blue-dark); }
.stats-strip .stat-box span{ color:var(--bst-gray); font-size:0.9rem; }

/* ==========================================================================
   8. LOGO / CLIENT / PARTNER STRIPS
   ========================================================================== */
.badge-row{ display:flex; flex-wrap:wrap; gap:12px; }
.badge{
  display:inline-flex; align-items:center; padding:10px 18px; border-radius:999px;
  background:#fff; border:1px solid var(--bst-border); font-weight:600; font-size:0.88rem; color:var(--bst-navy);
  transition: all var(--transition);
}
.badge:hover{ border-color: var(--bst-blue); color: var(--bst-blue-dark); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.sector-group{ margin-bottom: 30px; }
.sector-group h4{ font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--bst-blue); margin-bottom:14px; }

.partner-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.partner-grid .partner-tile{
  background:#fff; border:1px solid var(--bst-border); border-radius: var(--radius-sm);
  display:flex; align-items:center; justify-content:center; padding:18px 10px; text-align:center;
  font-family:var(--font-head); font-weight:700; color: var(--bst-navy); font-size:0.92rem; letter-spacing:0.01em;
  transition: all var(--transition); height:76px;
}
.partner-grid .partner-tile:hover{ border-color: var(--bst-blue); color: var(--bst-blue-dark); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   9. TESTIMONIAL
   ========================================================================== */
.testimonial{
  background: linear-gradient(135deg, var(--bst-navy), var(--bst-navy-2));
  border-radius: var(--radius-lg); padding: 56px; color:#fff; position:relative; overflow:hidden;
}
.testimonial::before{
  content:"\201C"; position:absolute; top:-10px; left:36px; font-family:Georgia,serif; font-size:9rem;
  color: rgba(255,255,255,0.08); line-height:1;
}
.testimonial p.quote{ font-size:1.35rem; line-height:1.5; max-width:760px; position:relative; z-index:1; color:#e7eef4; font-family:var(--font-head); font-weight:500; }
.testimonial .author{ display:flex; align-items:center; gap:14px; margin-top:28px; }
.testimonial .avatar{
  width:48px; height:48px; border-radius:50%; background: var(--bst-blue); display:flex; align-items:center;
  justify-content:center; font-family:var(--font-head); font-weight:700; color:#fff;
}
.testimonial .author strong{ display:block; color:#fff; font-size:0.98rem; }
.testimonial .author span{ color:#8fa4b8; font-size:0.85rem; }

/* ==========================================================================
   10. TIMELINE (about page)
   ========================================================================== */
.timeline{ position:relative; padding-left:40px; border-left:2px solid var(--bst-border); }
.timeline .t-item{ position:relative; padding-bottom:36px; }
.timeline .t-item:last-child{ padding-bottom:0; }
.timeline .t-item::before{
  content:""; position:absolute; left:-49px; top:2px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--bst-blue);
}
.timeline h4{ font-size:1rem; color:var(--bst-blue-dark); margin-bottom:6px; }

/* ==========================================================================
   11. CONTACT
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:48px; align-items:start; }
.contact-card{
  background:#fff; border:1px solid var(--bst-border); border-radius: var(--radius-md); padding:26px 24px;
  display:flex; gap:16px; margin-bottom:16px;
}
.contact-card .icon{
  width:46px; height:46px; border-radius:12px; background: var(--bst-bg-soft); display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.contact-card .icon svg{ width:22px; height:22px; stroke: var(--bst-blue-dark); }
.contact-card h4{ font-size:0.98rem; margin-bottom:4px; }
.contact-card p{ color:var(--bst-gray); font-size:0.92rem; margin-bottom:0; }
.contact-card a{ color: var(--bst-ink); }
.contact-card a:hover{ color: var(--bst-blue); }

.map-embed{ border-radius: var(--radius-md); overflow:hidden; border:1px solid var(--bst-border); height:260px; margin-top:8px; }
.map-embed iframe{ width:100%; height:100%; border:0; display:block; }

.form-card{ background:#fff; border:1px solid var(--bst-border); border-radius: var(--radius-lg); padding:40px; box-shadow: var(--shadow-sm); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-size:0.86rem; font-weight:600; color:var(--bst-navy); margin-bottom:8px; }
.form-group input, .form-group textarea, .form-group select{
  width:100%; padding:13px 16px; border:1.5px solid var(--bst-border); border-radius: var(--radius-sm);
  color:var(--bst-ink); transition: border-color var(--transition); background:#fbfcfd;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  outline:none; border-color: var(--bst-blue); background:#fff;
}
.form-note{ font-size:0.82rem; color:var(--bst-gray-light); margin-top:14px; }
.form-success{ background:#e9f8f0; border:1px solid #bde8cf; color:#1d7a45; padding:16px 20px; border-radius: var(--radius-sm); margin-bottom:24px; font-size:0.92rem; }
.form-error{ background:#fdeeee; border:1px solid #f3c6c6; color:#a12626; padding:16px 20px; border-radius: var(--radius-sm); margin-bottom:24px; font-size:0.92rem; }

/* ==========================================================================
   12. CTA BANNER
   ========================================================================== */
.cta-banner{
  background: linear-gradient(120deg, var(--bst-blue-dark), var(--bst-blue));
  border-radius: var(--radius-lg); padding:56px; display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; color:#fff;
}
.cta-banner h3{ color:#fff; font-size:1.5rem; margin-bottom:8px; }
.cta-banner p{ color:rgba(255,255,255,0.85); margin-bottom:0; }

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{ background: var(--bst-navy); color:#a9bccd; padding: 76px 0 0; }
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand img{ height:42px; width:auto; margin-bottom:18px; }
.footer-col h4{ color:#fff; font-size:0.88rem; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col a{ color:#a9bccd; font-size:0.94rem; }
.footer-col a:hover{ color:#fff; }
.footer-col p{ color:#8fa4b8; font-size:0.92rem; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,0.18); display:flex;
  align-items:center; justify-content:center; transition: all var(--transition);
}
.footer-social a:hover{ background: var(--bst-blue); border-color: var(--bst-blue); }
.footer-social svg{ width:17px; height:17px; stroke:#fff; }
.footer-bottom{ padding:26px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p{ margin:0; font-size:0.85rem; color:#7891a5; }
.footer-bottom .legal-links{ display:flex; gap:20px; }
.footer-bottom .legal-links a{ color:#7891a5; font-size:0.85rem; }
.footer-bottom .legal-links a:hover{ color:#fff; }

/* ==========================================================================
   14. MISC PAGE ELEMENTS (policy page, 404)
   ========================================================================== */
.prose{ max-width: 820px; }
.prose h2{ font-size:1.4rem; margin-top:44px; }
.prose h2:first-child{ margin-top:0; }
.prose p, .prose li{ color: var(--bst-gray); }
.prose ul{ margin: 0 0 20px; padding-left:0; }
.prose ul li{ position:relative; padding-left:22px; margin-bottom:8px; }
.prose ul li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--bst-blue); }
.prose .updated{ font-size:0.85rem; color:var(--bst-gray-light); margin-bottom:40px; }

.error-404{ text-align:center; padding: 140px 0; }
.error-404 h1{ font-size: 6rem; color: var(--bst-blue); margin-bottom:0; }
.error-404 p{ font-size:1.1rem; color:var(--bst-gray); margin-bottom:32px; }

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-6{ grid-template-columns: repeat(3,1fr); }
  .partner-grid{ grid-template-columns: repeat(3,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); row-gap:24px; }
}
@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .stats-strip{ grid-template-columns: repeat(2,1fr); }
  .cta-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .testimonial{ padding:36px 28px; }
  .form-row{ grid-template-columns:1fr; }
  .form-card{ padding:28px 22px; }
}
@media (max-width: 480px){
  .header-actions .btn-primary{ display:none; }
  .brand .brand-text span{ display:none; }
}
@media (max-width: 640px){
  .section{ padding:64px 0; }
  .grid-4, .grid-6{ grid-template-columns: repeat(2,1fr); }
  .partner-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr; gap:32px; }
  .hero{ padding:96px 0 100px; }
  .hero-stats{ grid-template-columns: repeat(2,1fr); }
}

/* Mobile nav panel */
.mobile-nav{
  position:fixed; inset:0 0 0 auto; width:min(320px,86vw); height:100vh; background:#fff; z-index:1100;
  box-shadow: -20px 0 60px rgba(0,0,0,0.2); transform: translateX(100%); transition: transform .35s ease;
  padding: 28px 24px; overflow-y:auto;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav .close-btn{ background:none; border:none; margin-bottom:24px; }
.mobile-nav a{ display:block; padding:14px 4px; font-weight:600; color:var(--bst-navy); border-bottom:1px solid var(--bst-border); }
.nav-overlay{
  position:fixed; inset:0; background:rgba(10,20,30,0.5); z-index:1050; opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }