/* ============================================================
   FOODSAFE LABS — PREMIUM CORPORATE DESIGN SYSTEM
   Bootstrap 5 + WOW.js + Animate.css + Owl Carousel
   ============================================================ */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* ---------- CSS Custom Properties ---------- */
:root {
  --navy:        #0b1f3a;
  --navy-deep:   #071429;
  --navy-mid:    #153155;
  --navy-light:  #1e4272;
  --accent:      #1a3aab;        /* logo blue - Asian Enviro Labs */
  --accent-dark: #142e8e;
  --gold:        #d4a843;
  --white:       #ffffff;
  --off-white:   #f7f9fc;
  --light-gray:  #eef1f6;
  --mid-gray:    #c8d0de;
  --text-dark:   #0b1f3a;
  --text-body:   #3d4f68;
  --text-muted:  #6b7e99;
  --border:      #dde3ed;
  --shadow-sm:   0 2px 12px rgba(11,31,58,.06);
  --shadow-md:   0 8px 32px rgba(11,31,58,.11);
  --shadow-lg:   0 18px 56px rgba(11,31,58,.16);
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --transition:  0.3s ease;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Open Sans', sans-serif;
  color: var(--text-body);
  background: var(--white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-dark); }
ul { list-style: none; padding: 0; margin: 0; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6 {
  font-family: 'Lora', serif;
  color: var(--navy);
  line-height: 1.2;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.15rem; }
p  { margin-bottom: 1rem; font-size: .95rem; line-height: 1.8; }
.lead { font-size: 1.05rem; color: var(--text-muted); line-height: 1.9; }

/* ---------- Section helpers ---------- */
section { padding: 96px 0; }
.section-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .6rem;
}
.section-heading { margin-bottom: .9rem; }
.section-rule {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  border-radius: 2px;
  margin: .9rem 0 2rem;
}
.text-center .section-rule { margin-left: auto; margin-right: auto; }
.section-sub {
  font-size: .975rem;
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.85;
}
.text-center .section-sub { margin: 0 auto; }

/* bg helpers */
.bg-off-white { background: var(--off-white); }
.bg-navy      { background: var(--navy); }
.bg-navy-deep { background: var(--navy-deep); }
.text-white   { color: var(--white) !important; }
.text-accent  { color: var(--accent) !important; }
.text-gold    { color: var(--gold) !important; }
.text-muted-c { color: var(--text-muted) !important; }

/* ============================================================
   PAGE LOADER
   ============================================================ */
#pageLoader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s ease;
}
#pageLoader.loaded { opacity: 0; visibility: hidden; }
.loader-ring {
  width: 52px; height: 52px;
  border: 3px solid var(--light-gray);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   NAVBAR
   ============================================================ */
#mainNav {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1050;
  background: rgba(255,255,255,.98);
  transition: padding var(--transition), box-shadow var(--transition);
  backdrop-filter: blur(10px);
}
#mainNav.scrolled { box-shadow: 0 4px 32px rgba(11,31,58,.1); }

.nav-container {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  transition: padding var(--transition);
}
#mainNav.scrolled .nav-container { padding: 0.65rem 0; }

/* Brand */
.nav-brand {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; flex-shrink: 0;
}
.nav-brand-icon {
  width: 44px; height: 44px;
  background: var(--navy);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Lora', serif; font-size: 1.2rem;
  color: var(--accent); font-weight: 700;
}
.nav-brand-text strong {
  display: block; font-family: 'Lora', serif;
  font-size: 1.12rem; color: var(--navy); line-height: 1.1;
}
.nav-brand-text span {
  font-size: .65rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}

/* Menu */
.nav-menu {
  display: flex; align-items: center; gap: .2rem;
}
.nav-menu a {
  position: relative;
  font-size: .84rem; font-weight: 600;
  color: var(--navy);
  padding: .5rem .78rem;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}
.nav-menu a::after {
  content: '';
  position: absolute; bottom: 1px;
  left: .78rem; right: .78rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--accent); background: rgba(26,58,171,.07); }
.nav-menu a:hover::after,
.nav-menu a.active::after { transform: scaleX(1); }

.nav-cta-wrap { margin-left: .9rem; }

/* Hamburger */
.nav-hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; background: none; border: none; padding: 6px;
}
.nav-hamburger span {
  display: block; width: 26px; height: 2px;
  background: var(--navy); border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
  display: none;
  flex-direction: column;
  padding: 1rem 0 1.5rem;
  border-top: 1px solid var(--border);
  animation: drawerIn .3s ease;
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-drawer a {
  font-size: .9rem; font-weight: 600; color: var(--navy);
  padding: .65rem 1rem; border-radius: 8px; display: block;
  transition: color var(--transition), background var(--transition);
}
.nav-drawer a:hover, .nav-drawer a.active { color: var(--accent); background: rgba(26,58,171,.07); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary-fs {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent); color: var(--navy) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  padding: .78rem 2rem; border-radius: 50px;
  border: 2px solid var(--accent);
  transition: all var(--transition); cursor: pointer;
  letter-spacing: .02em; white-space: nowrap;
}
.btn-primary-fs:hover {
  background: var(--accent-dark); border-color: var(--accent-dark);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(26,58,171,.35);
}

.btn-outline-fs {
  display: inline-flex; align-items: center; gap: .45rem;
  background: transparent; color: var(--accent) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  padding: .76rem 2rem; border-radius: 50px;
  border: 2px solid var(--accent);
  transition: all var(--transition); cursor: pointer;
}
.btn-outline-fs:hover {
  background: var(--accent); color: var(--navy) !important;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(26,58,171,.25);
}

.btn-white-fs {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--white); color: var(--navy) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  padding: .78rem 2rem; border-radius: 50px;
  border: 2px solid var(--white);
  transition: all var(--transition); cursor: pointer;
}
.btn-white-fs:hover {
  background: transparent; color: var(--white) !important;
  transform: translateY(-3px);
}

.btn-navy-fs {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--navy); color: var(--white) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: .88rem; font-weight: 700;
  padding: .78rem 2rem; border-radius: 50px;
  border: 2px solid var(--navy);
  transition: all var(--transition); cursor: pointer;
}
.btn-navy-fs:hover {
  background: var(--navy-mid); border-color: var(--navy-mid);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11,31,58,.25);
}

/* Read More arrow link */
.read-more {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .875rem; font-weight: 700; color: var(--accent);
  transition: gap var(--transition), color var(--transition);
}
.read-more i { font-size: .8rem; transition: transform var(--transition); }
.read-more:hover { gap: .6rem; color: var(--accent-dark); }
.read-more:hover i { transform: translateX(4px); }

/* ============================================================
   HERO
   ============================================================ */
.hero-section {
  position: relative;
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  min-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--navy-deep);
  /* Real photo background — set via inline style in HTML */
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

/* Dark overlay — navy tint over photo for legibility */
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(7,20,41,.75) 0%,
    rgba(11,31,58,.68) 40%,
    rgba(11,31,58,.45) 70%,
    rgba(11,31,58,.20) 100%
  );
  z-index: 1;
}

/* Subtle accent glow on left */
.hero-bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 65%, rgba(26,58,171,.10) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 20%, rgba(212,168,67,.06) 0%, transparent 40%);
}

/* Remove grid lines — clean with photo */
.hero-grid-lines { display: none; }
.hero-content { position: relative; z-index: 2; max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 1rem 0 1rem; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(26,58,171,.12);
  border: 1px solid rgba(26,58,171,.3);
  color: var(--accent); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .4rem 1.1rem; border-radius: 50px; margin-bottom: 1.3rem;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: var(--white); line-height: 1.15; margin-bottom: 1.3rem;
}
.hero-title .accent-word { color: var(--accent); }

.hero-desc {
  font-size: 0.95rem; color: rgba(255,255,255,.72);
  line-height: 1.9; max-width: 540px; margin-bottom: 2.2rem;
}
.hero-cta-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; margin-bottom: 3.5rem;
}
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.hero-stat strong {
  display: block;
  font-family: 'Lora', serif; font-size: 2.2rem;
  color: var(--white); line-height: 1;
}
.hero-stat span {
  font-size: 0.75rem; color: rgba(255,255,255,.55);
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}

/* Right panel */
.hero-panel {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-xl); padding: 2.5rem;
  backdrop-filter: blur(14px);
}
.hero-panel-title {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 1.3rem;
}
.hero-feature {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.82); font-size: .88rem; font-weight: 500;
}
.hero-feature:last-child { border-bottom: none; }
.hero-feature-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  background: rgba(26,58,171,.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: .95rem;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: .4rem;
  color: rgba(255,255,255,.4); font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}
.scroll-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
}
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}

/* ============================================================
   ABOUT / TWO-COLUMN
   ============================================================ */
.about-img-wrap {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
}
.about-img-wrap img,
.about-img-bg {
  width: 100%; height: 480px; object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform .65s ease;
}
.about-img-wrap:hover img { transform: scale(1.04); }

.about-badge {
  position: absolute; bottom: 1.8rem; left: 1.8rem;
  background: var(--white); border-radius: var(--radius);
  padding: 1rem 1.4rem; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: .75rem;
}
.about-badge-icon {
  width: 44px; height: 44px; background: var(--accent);
  border-radius: 9px; display: flex; align-items: center;
  justify-content: center; color: var(--navy); font-size: 1.2rem; flex-shrink: 0;
}
.about-badge strong { display: block; font-size: 1.5rem; color: var(--navy); line-height: 1; }
.about-badge span   { font-size: .74rem; color: var(--text-muted); font-weight: 600; }

.check-list { margin: 1.5rem 0; }
.check-item {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: 1rem; font-size: .9rem; color: var(--text-body);
}
.check-icon {
  width: 22px; height: 22px; background: rgba(26,58,171,.15);
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: var(--accent); font-size: .7rem;
  flex-shrink: 0; margin-top: .15rem;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.service-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.2rem 1.8rem;
  height: 100%; position: relative; overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.service-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card:hover::before { transform: scaleX(1); }

.service-icon {
  width: 62px; height: 62px;
  background: rgba(26,58,171,.1);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; color: var(--accent);
  margin-bottom: 1.4rem;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.service-card:hover .service-icon {
  background: var(--accent); color: var(--navy); transform: scale(1.08);
}
.service-card h4 { font-size: 1.1rem; margin-bottom: .6rem; }
.service-card p  { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.2rem; }

/* ============================================================
   SECTOR CARDS  (image + overlay)
   ============================================================ */
.sector-card {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden; height: 280px; cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.sector-img-bg {
  width: 100%; height: 100%;
  background-size: cover; background-position: center;
  transition: transform .6s ease;
}
.sector-card-link { display: block; text-decoration: none; color: inherit; }
.sector-card-link:hover { color: inherit; }

.sector-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,20,41,.85) 0%, rgba(7,20,41,.3) 60%, transparent 100%);
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1.8rem;
  transition: background .35s ease;
}
.sector-card:hover .sector-overlay {
  background: linear-gradient(to top, rgba(7,20,41,.9) 30%, rgba(7,20,41,.5) 100%);
}

.sector-tag {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: .5rem;
}
.sector-overlay h4 { color: var(--white); font-size: 1.05rem; margin-bottom: .4rem; }
.sector-overlay p  {
  font-size: .82rem; color: rgba(255,255,255,.65); margin: 0;
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease, opacity .4s ease;
  opacity: 0;
}
.sector-card:hover .sector-overlay p { max-height: 80px; opacity: 1; }

/* ============================================================
   CERTIFICATION CARDS
   ============================================================ */
.cert-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.5rem;
  text-align: center; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cert-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-md);
}
.cert-icon {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(11,31,58,.05);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem; font-size: 2.2rem; color: var(--navy);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.cert-card:hover .cert-icon {
  background: var(--navy); color: var(--accent); transform: scale(1.1) rotate(-4deg);
}
.cert-card h6 { font-size: .95rem; color: var(--navy); margin-bottom: .3rem; }
.cert-card p  { font-size: .8rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   SUCCESS STORY / CASE STUDY CARDS
   ============================================================ */
.case-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.case-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.case-img {
  position: relative; height: 220px; overflow: hidden;
}
.case-img-bg {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  transition: transform .55s ease;
}
.case-card:hover .case-img-bg { transform: scale(1.06); }

.case-label {
  position: absolute; top: .9rem; left: .9rem;
  background: var(--accent); color: var(--navy);
  font-size: .68rem; font-weight: 700; padding: .28rem .75rem;
  border-radius: 50px; letter-spacing: .06em; text-transform: uppercase;
}
.case-body { padding: 1.6rem; }
.case-body h5 { font-size: 1rem; color: var(--navy); margin-bottom: .6rem; line-height: 1.4; }
.case-body p  { font-size: .875rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.case-metric {
  background: var(--off-white); border-radius: 8px;
  padding: .8rem 1rem;
  display: flex; align-items: center; gap: .6rem;
  font-size: .84rem; color: var(--navy); font-weight: 600;
}
.case-metric i { color: var(--accent); }

/* ============================================================
   NEWS / BLOG CARDS
   ============================================================ */
.news-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.news-img {
  position: relative; height: 210px; overflow: hidden;
}
.news-img-bg {
  width: 100%; height: 100%;
  transition: transform .55s ease;
  display: flex; align-items: center; justify-content: center;
}
.news-card:hover .news-img-bg { transform: scale(1.06); }

.news-cat {
  position: absolute; top: .9rem; left: .9rem;
  background: var(--gold); color: var(--navy);
  font-size: .65rem; font-weight: 700; padding: .25rem .7rem;
  border-radius: 50px; letter-spacing: .06em; text-transform: uppercase;
}
.news-body { padding: 1.5rem; }
.news-meta {
  display: flex; gap: 1rem; font-size: .77rem;
  color: var(--text-muted); margin-bottom: .75rem;
}
.news-meta span { display: flex; align-items: center; gap: .3rem; }
.news-body h5 { font-size: .98rem; color: var(--navy); margin-bottom: .6rem; line-height: 1.45; }
.news-body h5 a { color: var(--navy); transition: color var(--transition); }
.news-body h5 a:hover { color: var(--accent); }
.news-body p  { font-size: .86rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   TESTIMONIALS (Owl Carousel)
   ============================================================ */
.testimonial-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2.2rem;
  position: relative; height: 100%;
  box-shadow: var(--shadow-sm);
}
.testimonial-quote {
  font-family: Georgia, serif; font-size: 3.5rem;
  color: var(--accent); opacity: .15; line-height: 1;
  position: absolute; top: 1rem; right: 1.5rem;
}
.testimonial-stars { color: var(--gold); font-size: .9rem; margin-bottom: .9rem; }
.testimonial-text {
  font-size: .92rem; color: var(--text-body);
  font-style: italic; line-height: 1.85; margin-bottom: 1.5rem;
}
.testimonial-author { display: flex; align-items: center; gap: .9rem; }
.author-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-weight: 700; font-size: 1rem; flex-shrink: 0;
}
.author-name  { font-size: .9rem; font-weight: 700; color: var(--navy); }
.author-title { font-size: .78rem; color: var(--text-muted); }

/* Owl Custom Dots */
.owl-dots { text-align: center; margin-top: 2rem !important; }
.owl-dots .owl-dot span {
  width: 8px; height: 8px; background: var(--mid-gray) !important;
  border-radius: 50%; margin: 0 4px;
  transition: all .3s ease;
}
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span {
  width: 24px; border-radius: 4px;
  background: var(--accent) !important;
}
.owl-nav button {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50% !important;
  background: var(--white) !important; border: 1.5px solid var(--border) !important;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem !important; color: var(--navy) !important;
  transition: all .3s ease;
}
.owl-nav button:hover {
  background: var(--accent) !important; border-color: var(--accent) !important;
  color: var(--navy) !important;
}
.owl-nav .owl-prev { left: -22px; }
.owl-nav .owl-next { right: -22px; }

/* ============================================================
   STATISTICS / COUNTER
   ============================================================ */
.stats-section {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid));
  padding: 80px 0; position: relative; overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 25% 50%, rgba(26,58,171,.12), transparent 55%),
              radial-gradient(ellipse at 75% 50%, rgba(212,168,67,.08), transparent 55%);
}
.stat-box { text-align: center; position: relative; z-index: 1; padding: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.stat-icon {
  font-size: 2rem; color: var(--white); margin-bottom: .75rem; opacity: .85;
  height: 2.5rem; display: flex; align-items: center; justify-content: center;
}
.stat-number {
  font-family: 'Lora', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white); font-weight: 700; line-height: 1; margin-bottom: .4rem;
  display: block;
}
.stat-suffix { color: var(--white); }
.stat-label {
  font-size: .78rem; color: rgba(255,255,255,.55);
  font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}

/* ============================================================
   CTA SECTIONS
   ============================================================ */
.cta-section {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid));
  padding: 96px 0; position: relative; overflow: hidden;
  text-align: center;
}
.cta-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 30%, rgba(212,168,67,.1), transparent 55%);
}
.cta-inner { position: relative; z-index: 1; }

.cta-wrap {
  background: linear-gradient(140deg, var(--navy-deep), var(--navy-mid));
  border-radius: var(--radius-xl); padding: 4rem;
  position: relative; overflow: hidden; text-align: center;
}
.cta-wrap::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 30%, rgba(212,168,67,.1), transparent 55%);
}

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.feature-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.5rem;
  text-align: center; height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-icon-wrap {
  width: 68px; height: 68px; border-radius: 16px; margin: 0 auto 1.3rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--navy);
  box-shadow: 0 8px 24px rgba(26,58,171,.28);
  transition: transform .3s ease;
}
.feature-card:hover .feature-icon-wrap { transform: scale(1.08) rotate(-4deg); }
.feature-card h5 { font-size: 1.02rem; margin-bottom: .55rem; }
.feature-card p  { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   INNER PAGE HERO
   ============================================================ */
.page-hero {
  background: linear-gradient(140deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  padding: 9rem 0 5rem; position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(26,58,171,.15), transparent 55%);
}
.page-hero-content { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); margin-bottom: .75rem; }
.page-hero p  { color: rgba(255,255,255,.68); font-size: 1.02rem; max-width: 560px; }

.breadcrumb-fs {
  display: flex; align-items: center; gap: .5rem;
  font-size: .83rem; color: rgba(255,255,255,.5); margin-bottom: .9rem;
}
.breadcrumb-fs a { color: rgba(255,255,255,.5); }
.breadcrumb-fs a:hover { color: var(--white); }
.breadcrumb-fs .sep { color: rgba(255,255,255,.25); }
.breadcrumb-fs .cur { color: var(--gold); }

/* ============================================================
   CONTACT
   ============================================================ */
.form-label-fs {
  display: block; font-size: .85rem; font-weight: 600;
  color: var(--navy); margin-bottom: .45rem;
}
.form-input-fs {
  width: 100%; background: var(--off-white);
  border: 1.5px solid var(--border); border-radius: 9px;
  padding: .78rem 1.05rem; font-size: .9rem;
  font-family: 'Open Sans', sans-serif; color: var(--text-body); outline: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form-input-fs:focus {
  border-color: var(--accent); background: var(--white);
  box-shadow: 0 0 0 3px rgba(26,58,171,.12);
}
.form-input-fs::placeholder { color: var(--mid-gray); }
textarea.form-input-fs { resize: vertical; min-height: 130px; }

.contact-info-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.8rem;
  display: flex; align-items: flex-start; gap: 1rem;
  transition: transform .3s ease, box-shadow .3s ease;
  margin-bottom: 1rem;
}
.contact-info-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-info-icon {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  background: rgba(26,58,171,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.2rem;
}
.contact-info-text strong { display: block; font-size: .9rem; color: var(--navy); margin-bottom: .2rem; }
.contact-info-text span   { font-size: .875rem; color: var(--text-muted); }

/* Map placeholder */
.map-block {
  background: var(--light-gray); border: 1px solid var(--border);
  border-radius: var(--radius-lg); height: 340px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem; color: var(--text-muted);
}
.map-block i { font-size: 3rem; color: var(--accent); opacity: .5; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: #f4f5f7; padding: 80px 0 0; }

.footer-brand-desc {
  font-size: .875rem; color: rgba(255,255,255,.5);
  line-height: 1.85; margin: 1rem 0 1.5rem; max-width: 280px;
}
.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: .85rem;
  transition: background .3s ease, color .3s ease;
}
.footer-social a:hover { background: var(--accent); color: var(--navy); border-color: var(--accent); }

.footer-heading {
  font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
  color: rgba(255,255,255,.5); font-size: .875rem;
  transition: color .3s ease, padding-left .3s ease; display: inline-block;
}
.footer-links a:hover { color: var(--white); padding-left: 4px; }

.footer-contact-row {
  display: flex; align-items: flex-start; gap: .75rem;
  margin-bottom: .9rem; color: rgba(255,255,255,.5); font-size: .875rem;
}
.footer-contact-icon {
  width: 34px; height: 34px; background: rgba(255,255,255,.07);
  border-radius: 7px; display: flex; align-items: center;
  justify-content: center; color: var(--accent); font-size: .85rem; flex-shrink: 0;
}

.newsletter-row { display: flex; gap: .5rem; margin-top: .75rem; }
.newsletter-input {
  flex: 1; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12); border-radius: 50px;
  padding: .62rem 1.1rem; color: var(--white); font-size: .875rem;
  font-family: 'Open Sans', sans-serif; outline: none;
  transition: border-color .3s ease;
}
.newsletter-input::placeholder { color: rgba(255,255,255,.3); }
.newsletter-input:focus { border-color: var(--accent); }
.newsletter-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); border: none; color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer; flex-shrink: 0;
  transition: background .3s ease, transform .3s ease;
}
.newsletter-btn:hover { background: var(--accent-dark); transform: scale(1.1); }

.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,.07); margin: 2.5rem 0 0; }
.footer-bottom {
  padding: 1.3rem 0;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
}
.footer-bottom p { color: rgba(255,255,255,.3); font-size: .8rem; margin: 0; }
.footer-bottom-links { display: flex; gap: 1.3rem; }
.footer-bottom-links a {
  color: rgba(255,255,255,.3); font-size: .8rem;
  transition: color .3s ease;
}
.footer-bottom-links a:hover { color: var(--white); }

/* ============================================================
   SCROLL-TO-TOP
   ============================================================ */
#scrollTopBtn {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 900;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--white); border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; cursor: pointer;
  box-shadow: 0 6px 20px rgba(26,58,171,.4);
  opacity: 0; transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
#scrollTopBtn.visible { opacity: 1; transform: translateY(0); }
#scrollTopBtn:hover   { background: var(--accent-dark); transform: translateY(-3px); }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; text-align: center;
  height: 100%;
  transition: transform .3s ease, box-shadow .3s ease;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.team-img-wrap {
  height: 240px; overflow: hidden;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease;
}
.team-card:hover .team-img-wrap { background: linear-gradient(135deg, var(--navy-mid), var(--navy-light)); }
.team-card-body { padding: 1.5rem; }
.team-card-body h5 { font-size: .98rem; color: var(--navy); margin-bottom: .2rem; }
.team-card-body .role { font-size: .8rem; color: var(--accent); font-weight: 600; letter-spacing: .05em; }
.team-card-body p { font-size: .84rem; color: var(--text-muted); margin: .65rem 0 .9rem; }
.team-social { display: flex; justify-content: center; gap: .45rem; }
.team-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--off-white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .8rem;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.team-social a:hover { background: var(--accent); color: var(--navy); border-color: var(--accent); }

/* ============================================================
   RESOURCE CARDS
   ============================================================ */
.resource-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.8rem;
  height: 100%; display: flex; flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease;
}
.resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.resource-icon {
  width: 56px; height: 56px; border-radius: 12px;
  background: rgba(26,58,171,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: var(--accent);
  margin-bottom: 1.2rem; flex-shrink: 0;
  transition: background .3s ease, color .3s ease;
}
.resource-card:hover .resource-icon { background: var(--accent); color: var(--navy); }
.resource-card h6 { font-size: .95rem; color: var(--navy); margin-bottom: .45rem; }
.resource-card p  { font-size: .86rem; color: var(--text-muted); flex: 1; margin-bottom: .9rem; }

/* ============================================================
   JOB LISTING
   ============================================================ */
.job-row {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.6rem 1.8rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  margin-bottom: .9rem;
}
.job-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.job-title { font-size: 1.02rem; color: var(--navy); font-weight: 700; margin-bottom: .4rem; }
.job-meta  { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; color: var(--text-muted); }
.job-meta span { display: flex; align-items: center; gap: .3rem; }
.job-badge {
  font-size: .7rem; font-weight: 700; padding: .25rem .7rem;
  border-radius: 50px; letter-spacing: .05em;
}
.job-badge.new    { background: rgba(26,58,171,.12); color: var(--accent); }
.job-badge.urgent { background: rgba(220,53,69,.1);  color: #dc3545; }
.job-badge.hot    { background: rgba(212,168,67,.15); color: var(--gold); }

/* ============================================================
   FILTER / CATEGORY BAR
   ============================================================ */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.filter-btn {
  background: var(--white); border: 1.5px solid var(--border);
  color: var(--text-muted); padding: .45rem 1.1rem; border-radius: 50px;
  font-size: .82rem; font-weight: 600; cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  transition: all .25s ease;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--accent); border-color: var(--accent); color: var(--navy);
}

/* ============================================================
   MODAL
   ============================================================ */
.fs-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center;
}
.fs-modal.show .fs-modal-box { transform: scale(1); opacity: 1; }
.fs-modal-overlay {
  position: absolute; inset: 0;
  background: rgba(7,20,41,.7); backdrop-filter: blur(4px);
}
.fs-modal-box {
  background: var(--white); border-radius: var(--radius-xl);
  padding: 2.5rem; max-width: 560px; width: 92%; position: relative; z-index: 1;
  transform: scale(.94); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  max-height: 90vh; overflow-y: auto;
}
.fs-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--off-white); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-muted); font-size: .9rem;
  transition: background .3s, color .3s;
}
.fs-modal-close:hover { background: var(--accent); color: var(--navy); border-color: var(--accent); }

/* ============================================================
   WOW INITIAL STATE
   ============================================================ */
.wow { visibility: hidden; }

/* ============================================================
   UTILITIES
   ============================================================ */
.container-fs { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.d-flex   { display: flex; }
.flex-wrap{ flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.gap-1  { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.mt-2  { margin-top: 1rem;   } .mt-3 { margin-top: 1.5rem; }
.mt-4  { margin-top: 2rem;   } .mt-5 { margin-top: 3rem;   }
.mb-2  { margin-bottom: 1rem;} .mb-3 { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem;} .mb-5 { margin-bottom: 3rem;   }
.w-100 { width: 100%; }

/* Image placeholders */
.img-ph {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.2); font-size: 3rem;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
  section { padding: 70px 0; }
  .hero-content { max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 1rem 0 1rem; }
  .hero-panel   { margin-top: 3rem; }
  .stats-section { padding: 60px 0; }
}

@media (max-width: 767.98px) {
  section { padding: 56px 0; }
  .nav-hamburger { display: flex; }
  .nav-menu, .nav-cta-wrap { display: none; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }
  .hero-content { max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 1rem 0 1rem; }
  .hero-stats   { gap: 1.5rem; }
  .cta-wrap     { padding: 2.5rem 1.5rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .about-img-bg, .about-img-wrap img { height: 320px; }
  .owl-nav .owl-prev { left: 0; }
  .owl-nav .owl-next { right: 0; }
}

@media (max-width: 575.98px) {
  .container-fs { padding: 0 16px; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; }
  .btn-primary-fs, .btn-outline-fs, .btn-white-fs { width: 100%; justify-content: center; }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(26,58,171,.2); color: var(--navy); }

@media print {
  #mainNav, #scrollTopBtn, #pageLoader { display: none !important; }
  body { font-size: 12pt; }
}

/* ============================================================
   SERVICES DROPDOWN — NAVBAR
   ============================================================ */

/* Wrapper that holds the trigger link + dropdown panel */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* The "Services" trigger link — same style as other nav links */
.nav-dropdown-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
  padding: .5rem .78rem;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  user-select: none;
}

.nav-dropdown-trigger .dd-arrow {
  font-size: .65rem;
  transition: transform .28s ease;
  margin-left: .1rem;
  color: var(--text-muted);
}

.nav-dropdown-trigger::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: .78rem; right: .78rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown-trigger.active {
  color: var(--accent);
  background: rgba(26,58,171,.07);
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown-trigger.active::after { transform: scaleX(1); }

.nav-dropdown:hover .dd-arrow { transform: rotate(180deg); }

/* Dropdown panel */
.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .6rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 2000;
}

.nav-dropdown:hover .nav-dropdown-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Each item in dropdown */
.nav-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .72rem 1.2rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
  border-radius: 0;
  gap: .5rem;
}

.nav-dd-item:hover {
  background: rgba(26,58,171,.07);
  color: var(--accent);
  padding-left: 1.5rem;
}

.nav-dd-item i {
  font-size: .72rem;
  color: var(--mid-gray);
  flex-shrink: 0;
  transition: color .2s ease, transform .2s ease;
}

.nav-dd-item:hover i {
  color: var(--accent);
  transform: translateX(3px);
}

.nav-dd-divider {
  height: 1px;
  background: var(--border);
  margin: .4rem .8rem;
}

.nav-dd-header {
  padding: .45rem 1.2rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* "View All Services" footer link */
.nav-dd-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .65rem 1.2rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-top: 1px solid var(--border);
  margin-top: .4rem;
  transition: background .2s ease, color .2s ease;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.nav-dd-footer:hover { background: rgba(26,58,171,.07); color: var(--accent-dark); }

/* ── Mobile drawer service sub-items ── */
.drawer-service-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  padding: .65rem 1rem;
  border-radius: 8px;
  font-family: 'Open Sans', sans-serif;
  transition: color var(--transition), background var(--transition);
  text-align: left;
}
.drawer-service-toggle:hover { color: var(--accent); background: rgba(26,58,171,.07); }
.drawer-service-toggle .dsb-arrow {
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform .28s ease;
  flex-shrink: 0;
}
.drawer-service-toggle.open .dsb-arrow { transform: rotate(180deg); }

.drawer-sub-menu {
  display: none;
  flex-direction: column;
  padding-left: 1.2rem;
  margin-bottom: .3rem;
}
.drawer-sub-menu a {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: .5rem .8rem;
  border-radius: 6px;
  display: block;
  transition: color var(--transition), background var(--transition);
}
.drawer-sub-menu a:hover { color: var(--accent); background: rgba(26,58,171,.07); }

/* Service sub-page hero accent */
.service-sub-hero {
  background: linear-gradient(140deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
  padding: 9rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.service-sub-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(16,27,58,.55) 0%, rgba(23,59,143,.45) 100%);
  z-index: 0;
}
.service-sub-hero-content { position: relative; z-index: 1; }
.service-sub-hero h1 { color: var(--white); margin-bottom: .75rem; }
.service-sub-hero .hero-desc { max-width: 600px; }

/* Back-to-services link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .83rem;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  margin-bottom: 1rem;
  transition: color .25s;
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }
.back-link i { font-size: .75rem; }

/* Related services sidebar */
.service-sidebar {
  position: sticky;
  top: 100px;
}
.service-sidebar-title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.service-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--white);
  margin-bottom: .5rem;
  transition: background .25s, color .25s, border-color .25s, padding-left .25s;
}
.service-sidebar-link:hover,
.service-sidebar-link.active {
  background: rgba(26,58,171,.07);
  color: var(--accent);
  border-color: rgba(26,58,171,.3);
  padding-left: 1.3rem;
}
.service-sidebar-link.active { font-weight: 700; }
.service-sidebar-link i { font-size: .72rem; color: var(--mid-gray); transition: color .25s, transform .25s; }
.service-sidebar-link:hover i,
.service-sidebar-link.active i { color: var(--accent); transform: translateX(3px); }

/* Step cards for process sections */
.step-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.5rem;
  text-align: center;
  height: 100%;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1rem;
  border: 3px solid rgba(26,58,171,.25);
}
.step-card h6 { font-size: .94rem; color: var(--navy); margin-bottom: .45rem; }
.step-card p  { font-size: .84rem; color: var(--text-muted); margin: 0; }

/* Highlight box */
.highlight-box {
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  color: rgba(255,255,255,.8);
  position: relative;
  overflow: hidden;
}
.highlight-box::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(26,58,171,.12), transparent 55%);
}
.highlight-box h4 { color: var(--white); margin-bottom: 1rem; position: relative; z-index: 1; }
.highlight-box p  { font-size: .9rem; line-height: 1.8; margin-bottom: 1.2rem; position: relative; z-index: 1; }
.highlight-box ul { position: relative; z-index: 1; }
.highlight-box .check-item { color: rgba(255,255,255,.8); margin-bottom: .7rem; }
.highlight-box .check-icon { background: rgba(26,58,171,.2); }

/* ============================================================
   MEGA FLYOUT MENU  — two-level services navigation
   ============================================================ */

/* Override the old single panel into a mega layout */
.nav-dropdown-panel {
  min-width: 240px;
  padding: .5rem 0;
  border-radius: var(--radius-lg);
}

/* ── Level-1 item that HAS a flyout sub-panel ── */
.nav-dd-parent {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .72rem 1.2rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-body);
  text-decoration: none;
  gap: .5rem;
  cursor: default;
  transition: background .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav-dd-parent:hover {
  background: var(--navy);
  color: var(--white);
}
.nav-dd-parent > i {
  font-size: .72rem;
  color: var(--mid-gray);
  flex-shrink: 0;
  transition: color .2s ease, transform .2s ease;
}
.nav-dd-parent:hover > i { color: var(--accent); }

/* ── Level-2 flyout sub-panel ── */
.nav-dd-sub {
  position: absolute;
  top: -6px;
  left: 100%;
  min-width: 240px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: .5rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 2100;
  pointer-events: none;
}

/* Show sub-panel when parent is hovered */
.nav-dd-parent:hover .nav-dd-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* Keep sub-panel open when mouse moves onto it */
.nav-dd-sub:hover,
.nav-dd-parent:hover .nav-dd-sub:hover {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

/* ── Sub-panel items ── */
.nav-dd-sub-item {
  display: block;
  padding: .66rem 1.2rem;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-body);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.nav-dd-sub-item:hover {
  background: rgba(26,58,171,.07);
  color: var(--accent);
  padding-left: 1.5rem;
}

/* Active state for current page */
.nav-dd-parent.active,
.nav-dd-sub-item.active {
  background: var(--navy);
  color: var(--white) !important;
}
.nav-dd-parent.active > i { color: var(--accent); }

/* ── Keep panel open when mousing between trigger and panel ── */
.nav-dropdown-panel:hover { opacity: 1; visibility: visible; transform: translateY(0); }

/* ── Gap bridge so mouse can travel to panel without closing it ── */
.nav-dropdown-panel::before {
  content: '';
  position: absolute;
  top: -10px; left: 0; right: 0;
  height: 10px;
}

/* ── Mobile drawer — nested service groups ── */
.drawer-service-group {
  margin-bottom: .25rem;
}

.drawer-svc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: .5rem .8rem .5rem 1.5rem;
  border-radius: 6px;
  font-family: 'Open Sans', sans-serif;
  transition: color .25s, background .25s;
  text-align: left;
}
.drawer-svc-btn:hover { color: var(--accent); background: rgba(26,58,171,.07); }
.drawer-svc-btn .dsb2-arrow {
  font-size: .65rem; color: var(--text-muted);
  transition: transform .25s; flex-shrink: 0;
}
.drawer-svc-btn.open .dsb2-arrow { transform: rotate(180deg); }

.drawer-svc-sub {
  display: none;
  flex-direction: column;
  padding-left: 2rem;
}
.drawer-svc-sub.open { display: flex; }
.drawer-svc-sub a {
  font-size: .83rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: .4rem .7rem;
  border-radius: 5px;
  display: block;
  text-decoration: none;
  transition: color .2s, background .2s;
}
.drawer-svc-sub a:hover { color: var(--accent); background: rgba(26,58,171,.07); }

/* ── Responsive: panel opens to the right only if space exists ── */
@media (max-width: 1280px) {
  .nav-dd-sub {
    left: auto;
    right: 100%;
    transform: translateX(-6px);
  }
  .nav-dd-parent:hover .nav-dd-sub {
    transform: translateX(0);
  }
}

/* ============================================================
   HERO — PHOTO BACKGROUND REFINEMENTS
   ============================================================ */

/* Heading style matching reference — large, bold, left-aligned */
.hero-title {
  font-size: clamp(2.6rem, 5.5vw, 4.4rem);
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 1.3rem;
  font-weight: 700;
}

.hero-title .accent-word {
  color: var(--accent);
  display: inline;
}

/* Hero content sits above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 1rem 0 1rem;
}

/* Stats bar */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
}

.hero-stat strong {
  display: block;
  font-family: 'Lora', serif;
  font-size: 2.2rem;
  color: var(--white);
  line-height: 1;
  font-weight: 700;
}

.hero-stat span {
  font-size: 0.75rem;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Feature rows inside capability panel */
.hero-feature {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.4;
}

.hero-feature:last-child { border-bottom: none; }

.hero-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: .95rem;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  color: rgba(255,255,255,.4);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(7px); }
}

/* Hero eyebrow badge */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: rgba(26,58,171,.14);
  border: 1px solid rgba(26,58,171,.35);
  color: var(--accent);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .4rem 1.1rem;
  border-radius: 50px;
  margin-bottom: 1.4rem;
}

/* Hero paragraph */
.hero-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,.72);
  line-height: 1.85;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* CTA row */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* ── Responsive ── */
@media (max-width: 767.98px) {
  .hero-title { font-size: 2.3rem; line-height: 1.15; }
  .hero-content { max-width: 900px;
  margin: 0 auto;
  text-align: left;
  padding: 1rem 0 1rem; }
  .hero-stats { gap: 1.5rem; }
}

/* ============================================================
   NAVBAR — DROPDOWN FIX (prevent overflow / line-break)
   ============================================================ */

/* Allow the nav-menu to shrink items */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}

.nav-menu > a,
.nav-menu > .nav-dropdown {
  flex-shrink: 0;
}

/* Slightly reduce padding on nav links to fit everything */
.nav-menu a,
.nav-dropdown-trigger {
  padding: .5rem .55rem !important;
  font-size: .80rem !important;
}

/* Dropdown panel stays below trigger */
.nav-dropdown-panel {
  top: calc(100% + 6px);
  min-width: 220px;
}

/* Sub-panel opens to right (or left if near edge) */
.nav-dd-sub {
  min-width: 230px;
}

/* Hide CTA button on smaller screens to save space */
@media (max-width: 1199px) {
  .nav-cta-wrap { display: none !important; }
  .nav-menu a, .nav-dropdown-trigger { font-size: .78rem !important; padding: .5rem .45rem !important; }
}

@media (max-width: 991px) {
  .nav-menu, .nav-cta-wrap { display: none !important; }
  .nav-hamburger { display: flex !important; }
}

/* Services trigger is now a <span> — keep same look & feel */
span.nav-dropdown-trigger {
  cursor: default;
  user-select: none;
}
span.nav-dropdown-trigger::after { display: none; }

/* ============================================================
   NAVBAR — LOGO IMAGE
   ============================================================ */
.nav-logo-img {
  height: 64px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  display: block;
  transition: opacity .3s ease;
}
.nav-logo-img:hover { opacity: .85; }

/* Slightly smaller when navbar is scrolled */
#mainNav.scrolled .nav-logo-img { height: 40px; }

/* Footer variant — slightly smaller */
.nav-logo-footer { height: 44px; }

@media (max-width: 767.98px) {
  .nav-logo-img { height: 50px; }
}

/* ============================================================
   FOOTER — WHITE BACKGROUND OVERRIDES
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
}

/* Brand description text */
.site-footer .footer-brand-desc {
  color: var(--text-body) !important;
}

/* Section headings */
.site-footer .footer-heading {
  color: var(--navy) !important;
}

/* Footer links */
.site-footer .footer-links a {
  color: var(--text-body) !important;
}
.site-footer .footer-links a:hover {
  color: var(--accent) !important;
  padding-left: 4px;
}

/* Contact rows */
.site-footer .footer-contact-row {
  color: var(--text-body) !important;
}

/* Footer contact icon */
.site-footer .footer-contact-icon {
  background: rgba(23,59,143,.08) !important;
  color: var(--accent) !important;
}

/* Social icons */
.site-footer .footer-social a {
  background: var(--light-gray) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.site-footer .footer-social a:hover {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}

/* Newsletter input */
.site-footer .newsletter-input {
  background: var(--white) !important;
  border-color: var(--border) !important;
  color: var(--text-body) !important;
}
.site-footer .newsletter-input::placeholder {
  color: var(--text-muted) !important;
}

/* Divider */
.site-footer .footer-divider {
  border-color: var(--border) !important;
}

/* Bottom bar */
.site-footer .footer-bottom p,
.site-footer .footer-bottom-links a {
  color: var(--text-muted) !important;
}
.site-footer .footer-bottom-links a:hover {
  color: var(--accent) !important;
}

/* Brand name in footer */
.site-footer .nav-brand strong {
  color: var(--navy) !important;
}
.site-footer .nav-brand span {
  color: var(--text-muted) !important;
}

/* Nav logo in footer */
.site-footer .nav-logo-footer {
  filter: none !important;
}

/* Banner fits viewport — hide scroll indicator */
.scroll-indicator { display: none; }

/* Ensure hero stats don't push content out of view */
@media (max-height: 700px) {
  .hero-stats { display: none; }
}

/* Hero Title Responsive Sizing */
@media (max-width: 1199.98px) {
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.25;
  }
}
@media (max-width: 991.98px) {
  .hero-title {
    font-size: 1.75rem !important;
  }
  .hero-desc {
    font-size: 1rem !important;
  }
}
@media (max-width: 767.98px) {
  .hero-title {
    font-size: 1.5rem !important;
  }
  .hero-desc {
    font-size: 0.95rem !important;
  }
  .hero-stat strong {
    font-size: 1.8rem !important;
  }
  .hero-stat span {
    font-size: 0.7rem !important;
  }
}

/* Hero Content Better Readability */
.hero-desc {
  max-width: 600px;
  line-height: 1.7;
  opacity: 0.95;
}

/* Hero Eyebrow Adjustment */
.hero-eyebrow {
  font-size: 0.75rem;
  padding: 0.6rem 1.2rem;
}

/* Hero Text Color Overrides for Better Contrast */
.hero-title {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.hero-title .accent-word {
  color: #5b8fff !important; /* Brighter blue for visibility on dark overlay */
  text-shadow: 0 2px 12px rgba(91,143,255,.4);
}

.hero-desc {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.1);
}

.hero-eyebrow {
  background: rgba(91,143,255,.15) !important;
  color: #ffffff !important;
  border: 1px solid rgba(91,143,255,.3);
}

/* Hero buttons — ensure they pop */
.btn-primary-fs, .hero-cta-row .btn-primary-fs {
  background: #5b8fff !important;
  border-color: #5b8fff !important;
  color: white !important;
}
.btn-primary-fs:hover {
  background: #4a7ae8 !important;
  border-color: #4a7ae8 !important;
}

/* Tighter Hero Layout to Fit Viewport */
.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  padding: 2rem 0 0.5rem !important;
}

.hero-title {
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
}

.hero-desc {
  margin-bottom: 1.5rem !important;
}

.hero-cta-row {
  margin-bottom: 1.5rem !important;
}

.hero-stats {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem !important;
}

.hero-eyebrow {
  margin-bottom: 1rem !important;
}

/* Hide scroll indicator when content fits exactly */
.scroll-indicator {
  display: none !important;
}

/* Hero title final size override */
.hero-title { font-size: 1.9rem !important; line-height: 1.25 !important; }
@media (max-width: 991.98px) { .hero-title { font-size: 1.6rem !important; } }
@media (max-width: 767.98px) { .hero-title { font-size: 1.4rem !important; } }

/* Hero — vertically center all content */
.hero-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.hero-content {
  padding: 0 !important;
  width: 100%;
}
.hero-section .container-fs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

/* Hero — proper center alignment */
.hero-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
.hero-section .container-fs {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-title {
  font-size: 1.9rem !important;
  line-height: 1.3 !important;
}
.hero-stats {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 2rem !important;
}
.hero-stat {
  text-align: center;
}
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ── HERO FINAL CLEAN LAYOUT ─────────────────────────── */
.hero-section {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
.hero-section .container-fs {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.hero-title {
  font-size: 2rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}
.hero-desc {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  max-width: 480px;
}
.hero-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  font-size: .78rem !important;
  padding: .45rem 1rem !important;
}
.hero-stat strong { font-size: 1.6rem !important; display:block; }
.hero-stat span   { font-size: .7rem !important; }

@media (max-width: 767.98px) {
  .hero-title { font-size: 1.6rem !important; }
  .hero-section .col-lg-6 { padding: 1.5rem 0; }
}


/* 2026 Indexed Specimen redesign */
:root{--paper:#F7F8F4;--cobalt:#173B8F;--mint:#BBD7D0;--amber:#E2A93B;--ink:#101B3A;--line:#D7DDCE;--soft:#526078;--white:#fff;--off-white:#F7F8F4;--navy:#101B3A;--navy-deep:#101B3A;--navy-mid:#173B8F;--navy-light:#3158ac;--accent:#173B8F;--accent-dark:#102f78;--gold:#E2A93B;--text-dark:#101B3A;--text-body:#526078;--text-muted:#69748a;--border:#D7DDCE;--light-gray:#edf0e9;--mid-gray:#D7DDCE;--radius:4px;--radius-lg:6px;--radius-xl:8px;--shadow-sm:0 1px 0 rgba(16,27,58,.08);--shadow-md:0 10px 30px rgba(16,27,58,.08);--shadow-lg:0 20px 55px rgba(16,27,58,.12)}
html{font-size:16px}body{font-family:'Manrope',sans-serif;background:var(--paper);color:var(--soft);line-height:1.7;letter-spacing:0}h1,h2,h3,h4,h5,h6{font-family:'Sora',sans-serif;color:var(--ink);font-weight:600;letter-spacing:0;line-height:1.15}p{font-size:.95rem}.container-fs{max-width:1280px;padding-left:2rem;padding-right:2rem}section{padding:80px 0}.bg-off-white{background:color-mix(in srgb,var(--mint) 22%,var(--paper))}.section-eyebrow{font-size:.68rem;letter-spacing:.22em;color:var(--amber);font-weight:700}.section-rule{height:1px;width:72px;background:var(--amber);border-radius:0}.section-sub{max-width:700px}
#pageLoader{display:none!important}#mainNav{position:sticky;top:0;background:rgba(247,248,244,.97);border-bottom:1px solid var(--line);box-shadow:none;backdrop-filter:blur(14px)}.nav-container{min-height:72px;padding:.7rem 0}.nav-logo-img{max-width:210px;max-height:64px;object-fit:contain}.nav-menu{gap:.15rem;flex-wrap:nowrap;align-items:center}.nav-menu a,.nav-dropdown-trigger{font-family:'Manrope',sans-serif;font-size:.77rem!important;font-weight:600!important;color:var(--ink)!important;border-radius:3px!important;padding:.55rem .65rem!important}.nav-menu a:after{display:none}.nav-menu a:hover,.nav-menu a.active,.nav-dropdown-trigger:hover{color:var(--cobalt)!important;background:color-mix(in srgb,var(--mint) 32%,transparent)!important}.nav-dropdown-panel,.nav-dd-sub{border:1px solid var(--line)!important;border-radius:4px!important;box-shadow:var(--shadow-md)!important;background:var(--paper)!important}.nav-dd-item,.nav-dd-parent,.nav-dd-sub-item{font-family:'Manrope',sans-serif!important;font-size:.86rem!important;font-weight:600!important;padding:.72rem 1.2rem!important;}
.hero-section{height:auto;min-height:690px;max-height:none;background-image:url('../images/lab-bench-hero.jpg')!important;background-position:right center!important;background-size:42% auto!important;background-color:var(--paper)!important;padding:105px 0 130px!important}.hero-bg-overlay{background:linear-gradient(90deg,var(--paper) 0 54%,rgba(247,248,244,.15) 76%,rgba(247,248,244,0) 100%)!important}.hero-section .col-lg-6{width:58%!important}.hero-eyebrow{background:transparent!important;border:0!important;padding:0!important;color:var(--amber)!important;font-size:.7rem!important;letter-spacing:.22em!important}.hero-title{color:var(--ink)!important;font-size:clamp(3rem,5.2vw,5rem)!important;line-height:1.02!important;max-width:780px}.hero-title .accent-word{color:var(--cobalt)!important}.hero-desc{color:var(--soft)!important;max-width:610px!important;font-size:1.05rem!important}.hero-section>div:last-child{background:var(--cobalt)!important;backdrop-filter:none!important}.hero-stat strong{font-family:'Sora';color:var(--paper)!important}.hero-stat span{color:var(--mint)!important}
.btn-primary-fs,.btn-navy-fs,.newsletter-btn{background:var(--cobalt)!important;border-color:var(--cobalt)!important;color:var(--paper)!important;border-radius:3px!important;box-shadow:none!important;padding:.75rem 1.35rem!important}.btn-outline-fs{border:1px solid color-mix(in srgb,var(--cobalt) 40%,transparent)!important;color:var(--cobalt)!important;border-radius:3px!important;padding:.78rem 1.35rem!important}.btn-white-fs{border:1px solid var(--line)!important;color:var(--cobalt)!important;border-radius:3px!important;padding:.78rem 1.35rem!important}.btn-primary-fs:hover,.btn-outline-fs:hover,.btn-white-fs:hover{transform:translateY(-1px)!important}
.page-hero,.service-sub-hero{background-color:var(--cobalt)!important;min-height:180px!important;padding:55px 0 35px!important;position:relative;overflow:hidden}.page-hero:after,.service-sub-hero:after{content:'SPECIMEN / VERIFIED';position:absolute;right:3vw;bottom:-.2em;color:rgba(247,248,244,.07);font-family:'Sora';font-size:clamp(3rem,8vw,8rem);font-weight:700;white-space:nowrap}.page-hero h1,.service-sub-hero h1{color:var(--paper)!important;max-width:850px}.page-hero p,.service-sub-hero p{color:color-mix(in srgb,var(--mint) 82%,var(--paper))!important;max-width:760px}.breadcrumb-fs a,.breadcrumb-fs .cur,.back-link{color:var(--mint)!important}
.service-card,.feature-card,.step-card,.resource-card,.cert-card,.sector-card,.news-card,.value-card,.team-card,.story-card{border:1px solid var(--line)!important;border-radius:4px!important;box-shadow:none!important;background:var(--paper)!important;padding:1.7rem!important}.service-card:hover,.feature-card:hover,.resource-card:hover{transform:translateY(-2px)!important;border-color:var(--cobalt)!important;box-shadow:none!important}.service-icon,.feature-icon-wrap{background:color-mix(in srgb,var(--mint) 38%,var(--paper))!important;color:var(--cobalt)!important;border-radius:3px!important}.step-num{background:var(--navy)!important;color:#fff!important}.service-sidebar{border:1px solid var(--line)!important;border-radius:4px!important;box-shadow:none!important;background:var(--paper)!important;position:sticky;top:110px}.service-sidebar-title{background:var(--cobalt)!important;color:var(--paper)!important}.service-sidebar-link{border-color:var(--line)!important}.service-sidebar-link:hover{background:color-mix(in srgb,var(--mint) 25%,var(--paper))!important;color:var(--cobalt)!important}.cta-wrap{background:var(--cobalt)!important;border-radius:5px!important;box-shadow:none!important}.cta-wrap:before,.cta-wrap:after{display:none!important}.site-footer{background:#f4f5f7!important;border-top:4px solid var(--amber)}.footer-heading{color:var(--navy)!important;letter-spacing:.18em!important}.footer-links a,.footer-brand-desc,.footer-contact-row,.footer-bottom{color:var(--text-body)!important}.footer-links a:hover{color:var(--accent)!important}.footer-divider{border-color:rgba(247,248,244,.15)!important}.newsletter-input{border-radius:3px 0 0 3px!important}
.about-img-bg{background:url('../images/lab-scientist-report.jpg') center/cover!important;border-radius:4px!important}.about-img-bg i{display:none}.about-badge{border-radius:4px!important;background:var(--cobalt)!important}.about-badge-icon{background:var(--amber)!important;color:var(--ink)!important}.owl-carousel img,.blog-img,.news-img{border-radius:4px!important}.contact-form,.contact-info-card{border-radius:4px!important;box-shadow:none!important;border:1px solid var(--line)!important}
@keyframes labRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.wow{animation-duration:.65s!important}
@media(max-width:991px){.nav-hamburger{display:flex!important}.nav-menu{display:none!important}.container-fs{padding-left:1.25rem;padding-right:1.25rem}.hero-section{min-height:auto!important;padding:92px 0 300px!important;background-size:100% 280px!important;background-position:center bottom!important}.hero-bg-overlay{background:linear-gradient(180deg,var(--paper) 0 62%,rgba(247,248,244,.1) 85%)!important}.hero-section .col-lg-6{width:100%!important}.hero-section>div:last-child{position:absolute!important}.service-sidebar{position:static}.page-hero,.service-sub-hero{padding:90px 0 55px!important;min-height:300px!important}section{padding:64px 0}}
@media(max-width:575px){.container-fs{padding-left:1rem;padding-right:1rem}.hero-title{font-size:2.55rem!important}.hero-section{padding-top:70px!important}.hero-stat{width:calc(50% - 1rem)}section{padding:52px 0}.nav-logo-img{max-width:140px}.page-hero h1,.service-sub-hero h1{font-size:2.2rem!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media(max-width:991px){
  .nav-container{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;width:100%!important}
  .nav-brand{min-width:0!important}
  .nav-hamburger{display:flex!important;flex-direction:column!important;gap:5px!important;width:40px!important;height:40px!important;align-items:center!important;justify-content:center!important;background:transparent!important;border:0!important;grid-column:2!important}
  .nav-drawer{display:none!important}
  .nav-drawer[style*="flex"]{display:flex!important}

  .nav-menu{display:none!important;position:absolute!important;left:0!important;right:0!important;top:100%!important;background:var(--paper)!important;border-top:1px solid var(--line)!important;padding:1rem!important;max-height:calc(100vh - 72px)!important;overflow:auto!important;flex-direction:column!important;align-items:stretch!important}
  .nav-menu.mobile-open{display:flex!important}
  .nav-menu>a,.nav-menu>.nav-dropdown{width:100%!important;flex:0 0 auto!important}
  .nav-dropdown-trigger{display:block!important;width:100%!important}
  .nav-dropdown-panel,.nav-dd-sub{display:none!important}
  .hero-title{overflow-wrap:anywhere!important}
  body{overflow-x:hidden!important}
}

.sector-card-link:hover .sector-img-bg { transform: scale(1.08); }

/* ============================================================
   WORKING PROCESS
   ============================================================ */
.process-step { padding: 1rem; }
.process-icon-wrap {
  position: relative;
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 2px dashed #D7DDCE;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(16,27,58,.06);
}
.process-icon-wrap i {
  font-size: 2.2rem;
  color: #173B8F !important;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.process-badge {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 26px; height: 26px;
  background: var(--accent);
  color: var(--white);
  border-radius: 50%;
  font-size: .68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
  line-height: 1;
  z-index: 2;
}
.process-step h5 { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.process-step p  { font-size: .875rem; color: var(--text-muted); margin: 0; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
.why-card {
  padding: 2rem 1rem;
  color: var(--white);
}
.why-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 2rem;
  color: var(--white);
  transition: background .3s ease;
}
.why-card:hover .why-icon { background: rgba(255,255,255,.15); }
.why-card h5 { font-size: 1rem; color: var(--white); margin: 0; }

/* ============================================================
   WHO NEEDS THIS — Icon Grid
   ============================================================ */
.who-needs-item {
  padding: 1.5rem 1rem;
}
.who-needs-icon {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 2px solid rgba(23,59,143,.2);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  font-size: 2rem;
  color: #173B8F;
  background: #ffffff;
  transition: background .3s ease, color .3s ease;
}
.who-needs-item:hover .who-needs-icon {
  background: #173B8F;
  color: #ffffff;
}
.who-needs-item p {
  font-size: .9rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.4;
}

/* ============================================================
   FLOATING ACTION BUTTONS
   ============================================================ */
.floating-actions {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.floating-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
}
.floating-btn:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.28);
  color: #fff;
}
.floating-btn.whatsapp { background: #25D366; }
.floating-btn.call     { background: #173B8F; }
.floating-btn.map      { background: #EA4335; }

/* Tooltip label */
.floating-btn::before {
  content: attr(data-label);
  position: absolute;
  right: 58px;
  background: rgba(16,27,58,.85);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: .3rem .7rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.floating-btn:hover::before { opacity: 1; }

@media (max-width: 575px) {
  .floating-actions { bottom: 4.5rem; right: 1rem; }
  .floating-btn { width: 44px; height: 44px; font-size: 1.1rem; }
}