/* ═══════════════════════════════════════════════════════════════════════════
   V2 CIVIL DIAGNOSTICS - BOOTSTRAP OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════
   
   PURPOSE: Bootstrap-specific overrides and customizations
   
   This file loads AFTER global.css and contains:
   - Bootstrap class overrides
   - Component-specific styling (navbar, buttons, etc.)
   - Logo sizing (SINGLE SOURCE OF TRUTH - avoid duplicating in global.css)
   - Header/navbar transparency fixes
   
   LOAD ORDER: variables.css → reset.css → global.css → bootstrap-overrides.css
   
   ═══════════════════════════════════════════════════════════════════════════ */

/* CRITICAL: Remove white background from page so transparent header shows hero image */
html, body {
  background-color: transparent !important;
  background: transparent !important;
}

/* Force all navbars to be transparent (Bootstrap override) */
.navbar {
  background-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
}

/* Override Bootstrap's default navbar-light and navbar-dark backgrounds */
.navbar-light {
  background-color: transparent !important;
  background: transparent !important;
}

.navbar-dark {
  background-color: transparent !important;
  background: transparent !important;
}

/* Override any bg-* Bootstrap utility classes on header/navbar */
.header.bg-light,
.navbar.bg-light,
.navbar.bg-white,
.navbar.bg-light-subtle {
  background-color: transparent !important;
  background: transparent !important;
}

/* Place the NABL logo above the cards and enlarge it on tablet.
   Use a centered 4-column grid for the metric cards so the logo
   sits directly above them without separating from the section. */
@media (min-width: 768px) {
  .trust-bar__wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
  }

  .trust-bar__nabl-section {
    flex: 0 0 auto !important;
    min-width: auto !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .trust-bar__nabl-logo {
    max-height: 160px !important;
    width: auto !important;
    display: inline-block !important;
  }

  .trust-bar__items {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
  }

  .trust-bar__items > * {
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}

@media (min-width: 1024px) {
  /* Slightly increase logo on desktop */
  .trust-bar__nabl-logo { max-height: 180px !important; }
}

/* Preserve font stack from variables */
body {
  font-family: var(--font-body);
}

/* Keep site container width consistent with existing layout */
.container {
  max-width: var(--content-width);
}

/* Brand primary/secondary colors for Bootstrap components */
.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}

.btn-primary:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

/* **NUCLEAR OVERRIDE** - Remove ALL backgrounds from transparent header */
.header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

.header * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* EXCEPT dropdown menus - they need white background */
.header .dropdown-menu,
.header .dropdown-menu * {
  background: var(--color-white) !important;
  background-color: var(--color-white) !important;
}

.header .dropdown-item {
  background: transparent !important;
  background-color: transparent !important;
}

.header .dropdown-item:hover {
  background: linear-gradient(90deg, rgba(46, 139, 139, 0.2) 0%, rgba(46, 139, 139, 0.05) 100%) !important;
}

.header .navbar,
.header .navbar-collapse,
.header .navbar-nav,
.header .nav,
.header .container,
.header .container-fluid {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Override .navbar-collapse specifically (Bootstrap class) */
.header .collapse.navbar-collapse {
  background-color: transparent !important;
}

/* Nav links: white by default on transparent header, orange on hover.
   When scrolled, links become orange with darker orange on hover.
   Use the existing ::after underline but force the underline color and
   provide smooth transitions to override Bootstrap defaults. */
.header .navbar .nav-link {
  color: var(--color-white) !important;
  transition: color 0.3s ease !important;
}
.header .navbar .nav-link::after {
  background: var(--color-primary) !important;
  transition: transform 0.3s ease !important;
}
.header .navbar .nav-link:hover,
.header .navbar .nav-link.active,
.header .navbar .nav-link.nav__link--active {
  color: var(--color-primary) !important;
}
.header .navbar .nav-link:hover::after,
.header .navbar .nav-link.active::after,
.header .navbar .nav-link.nav__link--active::after {
  transform: scaleX(1) !important;
}

/* Blog pages: always show blue nav links (gradient hero is too light for white text) */
.blog-page .header .navbar .nav-link {
  color: var(--color-primary) !important;
}
.blog-page .header .navbar .nav-link:hover,
.blog-page .header .navbar .nav-link.active,
.blog-page .header .navbar .nav-link.nav__link--active {
  color: var(--color-primary-dark) !important;
}
.blog-page .header .navbar .dropdown-toggle {
  color: var(--color-primary) !important;
}
.blog-page .header .navbar .dropdown-toggle:hover {
  color: var(--color-primary-dark) !important;
}

/* Scrolled state: blue links on white background */
.header.scrolled .navbar .nav-link {
  color: var(--color-primary) !important;
}
.header.scrolled .navbar .nav-link:hover,
.header.scrolled .navbar .nav-link.active,
.header.scrolled .navbar .nav-link.nav__link--active {
  color: var(--color-primary-dark) !important;
}

/* Dropdown toggle also inherits blue color when scrolled */
.header.scrolled .navbar .dropdown-toggle {
  color: var(--color-primary) !important;
}
.header.scrolled .navbar .dropdown-toggle:hover {
  color: var(--color-primary-dark) !important;
}

/* On desktop, keep collapse transparent so hero shows through. */
@media (min-width: 992px) {
  .header .navbar-collapse {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  /* But dropdown menus should have solid white background */
  .header .navbar-collapse .dropdown-menu {
    background: var(--color-white) !important;
    background-color: var(--color-white) !important;
  }
}

/* Mobile collapsed menu: absolutely positioned below header as dropdown overlay */
@media (max-width: 991.98px) {
  .header .navbar {
    flex-wrap: nowrap !important;
  }

  .header .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999 !important;
  }

  .header .navbar-collapse.show,
  .header .navbar-collapse.collapsing {
    background: rgba(0, 0, 0, 0.95) !important;
    padding: 1rem 1.5rem !important;
  }

  .header .navbar-collapse.show .navbar-nav,
  .header .navbar-collapse.collapsing .navbar-nav {
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.25rem;
  }

  .header .navbar-collapse.show .nav-link,
  .header .navbar-collapse.collapsing .nav-link {
    padding: 0.6rem 1rem !important;
    font-size: 15px;
    color: #ffffff !important;
  }
  
  /* Mobile dropdown menus have white background */
  .header .navbar-collapse.show .dropdown-menu,
  .header .navbar-collapse.collapsing .dropdown-menu {
    background: var(--color-white) !important;
    background-color: var(--color-white) !important;
  }
  
  /* Mobile dropdown items use blue text on white background */
  .header .navbar-collapse.show .dropdown-item,
  .header .navbar-collapse.collapsing .dropdown-item {
    color: var(--color-primary) !important;
  }
  
  .header .navbar-collapse.show .dropdown-item:hover,
  .header .navbar-collapse.collapsing .dropdown-item:hover {
    color: var(--color-primary-dark) !important;
  }
}

/* Ensure toggler bars are visible over the hero. */
.header .navbar-toggler-icon::before,
.header .navbar-toggler-icon::after {
  background: #ffffff !important;
}

/* Make CTA button text visible and match link hover color on hover. */
.header .navbar .btn.btn-primary {
  color: var(--color-white) !important;
  transition: color 0.3s ease !important;
}
.header .navbar .btn.btn-primary:hover {
  color: var(--color-primary) !important;
}

/* Header position is set in global.css (absolute, z-index: 1000) */

/* Toggler icon color fix to use white bars on transparent header, blue when scrolled */
.navbar-toggler {
  border-color: rgba(255,255,255,0.15);
  transition: border-color 0.3s ease;
}
.header.scrolled .navbar-toggler {
  border-color: rgba(46, 139, 139, 0.15);
}
.header .navbar-toggler-icon {
  background-image: none !important;
  background-color: transparent !important;
  width: 28px;
  height: 18px;
  position: relative;
}
.header .navbar-toggler-icon::before,
.header .navbar-toggler-icon::after {
  content: '';
  display: block;
  height: 2px;
  background: #ffffff !important;
  position: absolute;
  left: 0;
  right: 0;
  transition: background 0.3s ease;
}
.header .navbar-toggler-icon::before {
  top: 0;
  box-shadow: 0 8px 0 #ffffff; /* Creates the middle bar */
  transition: box-shadow 0.3s ease;
}
.header .navbar-toggler-icon::after { bottom: 0; }

/* Orange toggler bars when scrolled */
.header.scrolled .navbar-toggler-icon::before,
.header.scrolled .navbar-toggler-icon::after {
  background: var(--color-secondary) !important;
}
.header.scrolled .navbar-toggler-icon::before {
  box-shadow: 0 8px 0 var(--color-secondary);
}

/* Navbar link colors: white default, orange on hover site-wide */
.navbar .nav-link {
  color: var(--color-white) !important;
  font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--color-secondary) !important; }

/* Enhanced navbar styling: spacing, uppercase, underline indicator */
.navbar {
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* LOGO SIZING - SINGLE SOURCE OF TRUTH
   All logo size definitions are here to avoid conflicts and duplication.
   Mobile: 70px | Tablet (768px+): 98px | Desktop (1024px+): 112px */
.navbar-brand img {
  max-height: 70px;
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

@media (min-width: 768px) {
  .navbar-brand img { max-height: 98px; }
}

@media (min-width: 1024px) {
  .navbar-brand img { max-height: 112px; }
}

.navbar-nav {
  gap: 0.5rem;
}

/* Force final alignment: this file is loaded after `global.css`, so
   apply high-specificity/!important rules here to ensure nav sits
   to the right of the logo on all viewports. */
/* Desktop: push the nav to the right */
@media (min-width: 992px) {
  .header .navbar-nav {
    margin-left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
  }
}

/* When collapse is shown on mobile, stack and align items to the right */
.header .navbar-collapse.show .navbar-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  width: 100% !important;
}

/* Ensure nav-links align visually away from logo */
.header .navbar-nav .nav-link {
  text-align: right !important;
  padding-right: var(--side-padding-mobile) !important;
}

/* Extra safeguard for Bootstrap utility class `ms-auto` being absent */
.header .navbar-nav.ms-auto {
  margin-left: auto !important;
}

/* Extra final safeguard: ensure brand stays left and nav collapses/expands to the right */
.header .navbar {
  display: flex !important;
  align-items: center !important;
}

.header .navbar .navbar-brand {
  order: 0 !important;
}

.header .navbar .navbar-toggler {
  order: 1 !important;
}

.header .navbar .navbar-collapse {
  order: 2 !important;
}

@media (min-width: 992px) {
  .header .navbar .navbar-collapse {
    order: 2 !important;
    display: flex !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    width: auto !important;
  }
}

@media (min-width: 992px) {
  .header .navbar .navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    margin-left: 0 !important;
  }
}

/* On mobile when collapse becomes vertical, keep items right-aligned */
.header .navbar-collapse.show .navbar-nav {
  flex-direction: column !important;
  align-items: flex-end !important;
}

/* Ensure navbar fills the container and brand sits left while nav sits right */
.header .navbar {
  width: 100% !important;
  box-sizing: border-box !important;
}

.header .navbar-brand {
  margin-right: auto !important;
}

/* If any global rule forces the brand centered, force it left */
.header .navbar .navbar-brand {
  text-align: left !important;
}

.navbar .nav-link {
  padding: 0.5rem 0.9rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 14px;
  position: relative;
  transition: color 0.18s ease;
}

.navbar .nav-link::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -6px;
  height: 3px;
  background: #FF6B00;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
  border-radius: 2px;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after,
.navbar .nav-link.nav__link--active::after {
  transform: scaleX(1);
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link.nav__link--active {
  color: #FF6B00 !important;
}

/* Desktop collapsed menu: transparent to match header */
@media (min-width: 992px) {
  .navbar-collapse {
    background: transparent !important;
  }
}

.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: none; }

/* Keep hero text readable over video/background */
.hero__content h1,
.hero__content .hero__subheadline {
  color: var(--color-white);
}

/* Reduce hero heading size compared to previous wide style and make
   it responsive. The screenshot shows a large but not overwhelming
   headline; use clamp so it scales smoothly across viewports. */
.hero .hero__content h1,
.hero .hero__content .hero__headline {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  max-width: 1100px;
  letter-spacing: -0.8px;
  color: #ffffff;
  text-shadow: 0 3px 25px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.4);
}

.hero .hero__content .hero__subheadline {
  font-size: clamp(16px, 2vw, 22px);
  margin-bottom: 2rem;
  opacity: 0.95;
  font-weight: 400;
  line-height: 1.7;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Style the CTA button — modern rounded style matching design */
.hero .hero__content .btn.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  border-radius: 8px;
  padding: 16px 40px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 139, 139, 0.2);
}

.hero .hero__content .btn.btn-primary:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 114, 42, 0.3);
}

/* Homepage-specific hero background removed - using video background instead */
.hero.hero--home {
  /* Video background is used instead of static image */
  /* Fallback gradient is set in global.css */
}

/* Page-specific hero backgrounds. Place matching SVG/PNG files in /static.
   Filenames used below (drop into app/static/):
   - hero-about.svg
   - hero-blog.svg
   - hero-careers.svg
   - hero-certifications.svg
   - hero-projects.svg (deprecated - now using gradient)
   - hero-contact.svg
   - hero-services.svg
   - hero-service.svg  (used for individual service pages)
   - hero-team.svg
*/
.hero.hero--about { background: url('/static/hero-about.svg'); }
.hero.hero--blog { 
  background: linear-gradient(135deg, 
    #4a148c 0%, 
    #5e1ba6 15%, 
    #7228c0 35%, 
    #8635da 55%, 
    #9a42f4 75%, 
    #ae4fff 100%
  );
  position: relative;
  overflow: hidden;
}
.hero.hero--careers { background: url('/static/hero-careers.svg'); }
.hero.hero--certifications { 
  background: linear-gradient(135deg, 
    #0d5f47 0%, 
    #0e7256 15%, 
    #108565 35%, 
    #129874 55%, 
    #14ab83 75%, 
    #16be92 100%
  );
  position: relative;
  overflow: hidden;
}
.hero.hero--projects { 
  background: linear-gradient(135deg, 
    #003d5c 0%, 
    #00506e 15%, 
    #006680 35%, 
    #007a91 55%, 
    #008ea3 75%, 
    #00a2b5 100%
  );
  position: relative;
  overflow: hidden;
}
.hero.hero--contact { background: url('/static/hero-contact.svg'); }
.hero.hero--services { background: url('/static/hero-services.svg'); }
.hero.hero--service { background: url('/static/hero-service.svg'); }
.hero.hero--team { background: url('/static/hero-team.svg'); }
.hero.hero--about,
.hero.hero--blog,
.hero.hero--careers,
.hero.hero--certifications,
.hero.hero--projects,
.hero.hero--contact,
.hero.hero--services,
.hero.hero--service,
.hero.hero--team {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Extend ALL hero sections behind transparent header (not just homepage) */
.hero.hero--home,
.hero.hero--about,
.hero.hero--blog,
.hero.hero--careers,
.hero.hero--certifications,
.hero.hero--projects,
.hero.hero--contact,
.hero.hero--services,
.hero.hero--service,
.hero.hero--team {
  margin-top: calc(-1 * var(--header-height-mobile));
  padding-top: calc(80px + var(--header-height-mobile));
}

@media (min-width: 768px) {
  .hero.hero--home,
  .hero.hero--about,
  .hero.hero--blog,
  .hero.hero--careers,
  .hero.hero--certifications,
  .hero.hero--projects,
  .hero.hero--contact,
  .hero.hero--services,
  .hero.hero--service,
  .hero.hero--team {
    padding-top: calc(100px + var(--header-height-mobile));
  }
}

@media (min-width: 1024px) {
  .hero.hero--home,
  .hero.hero--about,
  .hero.hero--blog,
  .hero.hero--careers,
  .hero.hero--certifications,
  .hero.hero--projects,
  .hero.hero--contact,
  .hero.hero--services,
  .hero.hero--service,
  .hero.hero--team {
    margin-top: calc(-1 * var(--header-height-desktop));
    padding-top: calc(120px + var(--header-height-desktop));
  }
}

/* ── PROJECTS HERO CUSTOM STYLES ── */

/* Sophisticated gradient overlay for depth */
.hero.hero--projects .hero__overlay,
.hero.hero--certifications .hero__overlay,
.hero.hero--blog .hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero.hero--projects .hero__overlay {
  background: 
    radial-gradient(circle at 20% 50%, rgba(0, 122, 145, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 162, 181, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, rgba(0, 61, 92, 0.95) 0%, rgba(0, 102, 128, 0.85) 100%);
}

.hero.hero--certifications .hero__overlay {
  background: 
    radial-gradient(circle at 20% 50%, rgba(18, 152, 116, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(22, 190, 146, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, rgba(13, 95, 71, 0.95) 0%, rgba(16, 133, 101, 0.85) 100%);
}

.hero.hero--blog .hero__overlay {
  background: 
    radial-gradient(circle at 20% 50%, rgba(134, 53, 218, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(174, 79, 255, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, rgba(74, 20, 140, 0.95) 0%, rgba(114, 40, 192, 0.85) 100%);
}

/* Animated decorative circles for visual interest */
.hero__decorative-elements {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.hero__circle {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  animation: float 20s ease-in-out infinite;
}

.hero__circle--1 {
  width: 300px;
  height: 300px;
  top: -150px;
  right: -100px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  animation-delay: 0s;
}

.hero__circle--2 {
  width: 200px;
  height: 200px;
  bottom: -100px;
  left: -50px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
  animation-delay: 7s;
}

.hero__circle--3 {
  width: 150px;
  height: 150px;
  top: 50%;
  left: 15%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  animation-delay: 14s;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* Premium badge at top */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  padding: 10px 24px;
  margin-bottom: var(--space-lg);
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.hero__badge svg {
  width: 20px;
  height: 20px;
  color: #ffd700;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* Trust indicators below headline */
.hero__trust-indicators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.trust-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  opacity: 0.95;
}

.trust-indicator__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  margin-bottom: var(--space-xs);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.trust-indicator:hover .trust-indicator__icon {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.trust-indicator__icon svg {
  width: 24px;
  height: 24px;
  color: #ffffff;
}

/* Responsive adjustments for projects hero */
@media (min-width: 768px) {
  .hero__badge {
    font-size: 15px;
    padding: 12px 28px;
  }
  
  .hero__badge svg {
    width: 22px;
    height: 22px;
  }
  
  .hero__circle--1 {
    width: 400px;
    height: 400px;
    top: -200px;
    right: -150px;
  }
  
  .hero__circle--2 {
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: -80px;
  }
  
  .hero__circle--3 {
    width: 220px;
    height: 220px;
  }
  
  .trust-indicator {
    font-size: 15px;
  }
  
  .trust-indicator__icon {
    width: 56px;
    height: 56px;
  }
  
  .trust-indicator__icon svg {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1024px) {
  .hero__badge {
    font-size: 16px;
    padding: 14px 32px;
  }
  
  .hero__badge svg {
    width: 24px;
    height: 24px;
  }
  
  .hero__circle--1 {
    width: 500px;
    height: 500px;
    top: -250px;
    right: -200px;
  }
  
  .hero__circle--2 {
    width: 350px;
    height: 350px;
    bottom: -175px;
    left: -100px;
  }
  
  .hero__circle--3 {
    width: 280px;
    height: 280px;
  }
  
  .trust-indicator {
    font-size: 16px;
  }
  
  .trust-indicator__icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }
  
  .trust-indicator__icon svg {
    width: 32px;
    height: 32px;
  }
}

/* Small utility tweaks used during migration */
.text-uppercase { text-transform: uppercase !important; }

/* Use existing variables for form controls where needed */
.form-control:focus {
  box-shadow: none;
  border-color: var(--color-secondary);
}

/* When existing custom grid class names are used together with Bootstrap's
   `.row`, prefer the Bootstrap flex layout to avoid CSS display conflicts. */
.row.services-grid,
.row.projects-grid,
.row.blog-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.5rem; /* roughly matches previous spacing */
}

/* Ensure bootstrap columns behave correctly inside these rows */
.row.services-grid > [class*="col-"],
.row.projects-grid > [class*="col-"],
.row.blog-grid > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Force columns to be 50% width on xs and 25% on md+ so four-per-row */
.row.services-grid > [class*="col-"],
.row.projects-grid > [class*="col-"],
.row.blog-grid > [class*="col-"] {
  flex: 0 0 50%;
  max-width: 50%;
}

@media (min-width: 768px) {
  .row.services-grid > [class*="col-"],
  .row.projects-grid > [class*="col-"],
  .row.blog-grid > [class*="col-"] {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Neutralise legacy grid classes that conflict with Bootstrap rows/cols.
   Templates have been migrated to use `.row` + `col-*` — ensure any
   remaining legacy selectors don't force a different layout. */
.services-grid,
.overview-grid,
.service-cards {
  display: block !important;
  gap: 0 !important;
}

/* When `.service-cards` is used together with Bootstrap `.row`, prefer
   a flex-based layout and provide safe column widths so four-per-row
   layouts remain consistent across templates. */
.service-cards.row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.service-cards.row > .service-card {
  display: flex;
  flex-direction: column;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .service-cards.row > .service-card {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 1024px) {
  .service-cards.row > .service-card {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Also ensure overview grid children behave predictably when not fully
   migrated to `.row`/`.col-*`. */
.overview-grid > * {
  width: 100% !important;
}

/* Neutralise other legacy grid selectors from `global.css` so Bootstrap
   rows/cols behave predictably. Keep these overrides minimal and layout-only. */
.grid {
  display: block !important;
  gap: 0 !important;
}

.grid--2 > *,
.grid--3 > *,
.grid--4 > * {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 768px) {
  .grid--2 > *,
  .grid--3 > *,
  .grid--4 > * {
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1024px) {
  .grid--3 > * {
    width: 33.3333% !important;
    max-width: 33.3333% !important;
  }
  .grid--4 > * {
    width: 25% !important;
    max-width: 25% !important;
  }
}

/* Services intro specific grid — neutralise to avoid duplicate grid rules */
.services-intro .services-grid {
  display: block !important;
  gap: 0 !important;
}

/* Ensure any remaining `.service-card` layout is compatible with Bootstrap columns */
.service-card {
  box-sizing: border-box;
}

/* Neutralise trust-bar and footer grid/flex layouts so Bootstrap's
   grid system remains authoritative during migration. These rules
   only change layout display, not visual styling. */
.trust-bar__wrapper,
.trust-bar__items,
.trust-bar__nabl-section {
  display: block !important;
  gap: 0 !important;
}

.trust-bar__items > * {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 768px) {
  .trust-bar__items > * {
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1024px) {
  .trust-bar__items > * {
    width: 25% !important;
    max-width: 25% !important;
  }
}

/* Footer grid layout using flexbox */
.footer__grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.footer__grid > * {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .footer__grid > * { flex: 1 1 calc(50% - 8px); }
}

@media (min-width: 1024px) {
  .footer__grid > * { flex: 1 1 calc(25% - 12px); }
}

/* Neutralise any remaining explicit grid-template-columns on page-level grids */
.section .grid,
.section .grid--2,
.section .grid--3,
.section .grid--4 {
  display: block !important;
}

/* Restore trust-bar flex layout at tablet+ so logo and cards align horizontally
   while keeping neutralised rules for mobile stacking during migration. */
@media (min-width: 768px) {
  .trust-bar__wrapper {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .trust-bar__nabl-section {
    flex: 0 0 auto !important;
    min-width: 200px;
  }

  .trust-bar__items {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    width: 100%;
  }

  .trust-bar__items > * {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1024px) {
  .trust-bar__items > * {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* Restore trust-bar side-by-side layout at larger breakpoints.
   Earlier neutralisation made the wrapper block-level which stacked
   the NABL logo and the metric cards; on md+ we want the original
   side-by-side arrangement with flexible card columns. */
@media (min-width: 768px) {
  .trust-bar__wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 40px !important;
  }

  .trust-bar__nabl-section {
    flex: 0 0 auto !important;
    min-width: 200px !important;
  }

  .trust-bar__items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
    flex: 1 1 auto !important;
  }

  .trust-bar__items > * {
    width: 50% !important;
    max-width: 50% !important;
  }
}

@media (min-width: 1024px) {
  /* Make room for four cards beside the logo by accounting for gaps
     and the NABL column. Use calc to avoid wrapping due to rounding. */
  .trust-bar__nabl-section {
    flex: 0 0 180px !important;
  }

  .trust-bar__items {
    gap: 20px !important;
  }

  .trust-bar__items > * {
    box-sizing: border-box !important;
    flex: 0 0 calc((100% - 180px - 60px) / 4) !important; /* 60px ~= total gaps */
    max-width: calc((100% - 180px - 60px) / 4) !important;
  }
}

/* FINAL OVERRIDE: ensure NABL logo is centered above the metric cards.
   This override comes last so it wins over earlier row-based rules. */
@media (min-width: 768px) {
  .trust-bar__wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 28px !important;
  }

  .trust-bar__nabl-section {
    flex: 0 0 auto !important;
    text-align: center !important;
    margin: 0 !important;
  }

  .trust-bar__nabl-logo {
    max-height: 180px !important;
    width: auto !important;
    display: inline-block !important;
  }

  .trust-bar__items {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 0 12px !important;
  }

  .trust-bar__items > * {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
  }
}

@media (min-width: 1024px) {
  .trust-bar__nabl-logo { max-height: 200px !important; }
}

/* For the homepage: transparent header that overlays the hero image */
.header {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* On homepage, remove white background from trust-bar section
   so the transparent header doesn't appear white when scrolling */
.hero--home + .trust-bar {
  background-color: transparent !important;
}

/* Target every single child element */
.header > * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.header > * > * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.header > * > * > * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Specific elements */
.header .navbar,
.header .navbar-collapse,
.header .navbar-nav,
.header .nav-link,
.header .container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Override Bootstrap's navbar defaults */
.navbar,
.navbar-light,
.navbar-dark,
.navbar-expand-lg {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}