/* ═══ BURRARD PHARMA — GLOBAL DESIGN SYSTEM ═══
   Shared across ALL pages for consistent theming
   Palette: Grok-recommended (softer corporate blue + cyan-teal)
   Updated: 2025 · v13 Catalent-inspired redesign
   ═══════════════════════════════════════════════ */

/* ═══ COLOR VARIABLES ═══ */
:root{
--navy:#1E40AF;--navy-light:#2563EB;--navy-dark:#1E3A8A;
--accent:#0EA5E9;--accent-dark:#0284C7;--accent-light:#38BDF8;--accent-glow:rgba(14,165,233,.12);
--teal:#0EA5E9;--teal-dark:#0284C7;--teal-light:#38BDF8;--teal-glow:rgba(14,165,233,.12);
--black:#000;--white:#fff;--off-white:#F8FAFC;--bg-light:#F8FAFC;
--text-dark:#0F172A;
--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;
--font-heading:'Sora',sans-serif;--font-body:'DM Sans',sans-serif;
--shadow:0 4px 12px rgba(0,0,0,.06);--shadow-lg:0 12px 40px rgba(0,0,0,.1);
--radius:10px;--radius-lg:16px;--radius-xl:24px;
--bg-primary:var(--white);--bg-secondary:var(--off-white);
--text-primary:var(--gray-700);--text-secondary:var(--gray-500);
--border-color:var(--gray-200);--card-bg:var(--white);
}

/* ═══ BASE STYLES ═══ */
body{font-family:var(--font-body);color:var(--text-dark);background:#F8FAFC;line-height:1.7;font-size:1.05rem;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--navy);line-height:1.3;font-weight:700;letter-spacing:-.02em}
a{color:#3B82F6;text-decoration:none;transition:all .25s}
a:hover{color:#2563EB}
/* Links on dark backgrounds */
.hero a,.cta-section a,.footer a,[data-theme="dark"] a{color:#93C5FD!important;text-decoration:underline;text-underline-offset:3px}
.hero a:hover,.cta-section a:hover{color:#BFDBFE!important}

/* ═══ NAV ═══ */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--gray-200);transition:all .3s}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-logo img{height:40px}
.nav-links a{font-family:var(--font-heading);font-size:.82rem;font-weight:500;color:var(--text-dark);padding:8px 16px;border-radius:var(--radius);transition:all .25s}
.nav-links a:hover{background:var(--gray-50);color:var(--accent)}
.nav-cta{background:var(--accent)!important;color:var(--white)!important;padding:10px 24px!important;font-weight:600!important;border-radius:var(--radius)!important}
.nav-cta:hover{background:var(--accent-dark)!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(14,165,233,.3)}

/* ═══ BUTTONS ═══ */
.btn-primary,.form-submit{background:var(--accent);color:var(--white);border:none;border-radius:var(--radius);font-family:var(--font-heading);font-weight:600;cursor:pointer;transition:all .3s}



/* ═══ HERO-SM (sub-page heroes) – lighter overlays per Grok ═══ */
.hero-sm h1{text-shadow:0 2px 8px rgba(0,0,0,.6),0 4px 24px rgba(0,0,0,.3)}
.hero-sm p{text-shadow:0 1px 6px rgba(0,0,0,.5);color:white!important}
.btn-primary:hover,.form-submit:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn-outline{background:transparent;border:1.5px solid var(--accent);color:var(--accent);border-radius:var(--radius);font-family:var(--font-heading);font-weight:600;transition:all .3s}
.btn-outline:hover{background:var(--accent);color:var(--white)}

--white:#0f172a;--off-white:#0f172a;--bg-light:#0f172a;
--gray-50:#1e293b;--gray-100:#334155;--gray-200:#475569;--gray-300:#64748b;
--navy:#F1F5F9;--navy-light:#f1f5f9;--navy-dark:#f8fafc;
--text-dark:#E2E8F0;--text-primary:#CBD5E1;--text-secondary:#94A3B8;
--bg-primary:#0f172a;--bg-secondary:#1e293b;
--border-color:#334155;--card-bg:#1e293b;
--accent:#38BDF8;--accent-dark:#0EA5E9;
}
/* CATCH-ALL: every heading on page — no exceptions */
/* CATCH-ALL: every paragraph/text — no exceptions */
/* Nav */
/* Sections get dark backgrounds */
/* Tables */
/* Forms */
/* Cookie bar */
/* Hero-sm sub-page heroes */
/* Footer */

/* ═══ MOBILE GLOBAL ═══ */
@media(max-width:768px){
body{font-size:1.02rem}
.nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:var(--white);flex-direction:column;padding:16px 32px;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow)}
.nav-links.open{display:flex}
.nav-links a{min-height:48px;display:flex;align-items:center;font-size:.9rem}
.hamburger{display:flex}
button,a.btn,.nav-cta,.btn-primary,.form-submit{min-height:48px;padding:12px 24px;font-size:1rem}
input,textarea,select{min-height:48px;font-size:.95rem;padding:12px 14px}
h1{font-size:2.25rem;line-height:1.2}
h2{font-size:1.5rem}
h3{font-size:1.2rem}
}

/* Dark mode mobile font boost */
@media(max-width:768px){
}

/* ═══ CARD HOVER → DARK NAVY ═══ */
.service-card:hover,.info-card:hover,.sidebar-link:hover,.post:hover,.product-card:hover,.related-card:hover,.partnership-card:hover{
  background:#1E3A8A!important;border-color:#1E3A8A!important;
}
.service-card:hover h3,.service-card:hover p,.service-card:hover .card-cta,
.info-card:hover h4,.info-card:hover p,
.sidebar-link:hover strong,.sidebar-link:hover span,
.post:hover h3,.post:hover h3 a,.post:hover p,.post:hover .post-date,.post:hover .post-tag,
.product-card:hover h3,.product-card:hover p,.product-card:hover span,
.related-card:hover h3,.related-card:hover p,.related-card:hover span,
.partnership-card:hover h3,.partnership-card:hover p{
  color:#fff!important;
}
.service-card:hover .card-icon,.product-card:hover [class*="badge"]{background:rgba(255,255,255,.15)!important}
.service-card:hover .card-cta-arrow{stroke:#fff!important}

/* ═══ IMAGE FIX (Grok #2,6,7,9) ═══ */
.post-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 500px;
  background: #f8fafc;
}
.about-img img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #f8fafc;
  border-radius: 12px;
}
.contact-image {
  width: 100%;
  max-width: 400px;
  object-fit: cover;
  border-radius: 12px;
}
@media (min-width: 768px) {
  .contact-wrapper { display: flex; gap: 48px; align-items: flex-start; }
  .contact-image { margin: 0; }
}
.hero-sm h1, .hero h1 { text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
.hero-sm p, .hero p { text-shadow: 0 1px 6px rgba(0,0,0,0.5); color: white !important; }