/* ==========================================================================
   BSL - BAE Systems Strategic Aerospace Services
   High-Fidelity Design System & Stylesheet
   ========================================================================== */
/* =========================================================
   TOKENS
========================================================== */
:root {
  --maroon: #6e1b3f;
  --maroon-dark: #501530;
  --maroon-light: #9a2f5c;
  --navy: #1c3a5e;
  --navy-dark: #142a44;
  --cream: #f7f4f2;
  --ink: #221d1f;
  --gray-text: #6b6b6f;
  --line: #e7e1de;
  --radius: 14px;
  --font-display: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;
}

/* Smooth scrolling is handled by Lenis in JS; keep native smooth as a fallback only when JS/Lenis is unavailable. */
html:not(.lenis) {
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

/* Every page gets the horizontal-overflow guard and the Outfit stack for the
   shared header/footer. Everything else in this reset is scoped to
   `body.nh-home` so it cannot fight the 1rem = 10px scaling model that
   style.css / pages.css use for the sixteen content pages. */
body {
  overflow-x: hidden;
}

:where(body.nh-home) * {
  box-sizing: border-box;
}

/* NOT :where() -- this must outrank the Bootstrap reboot rule
   `body{font-family:...}`, which has specificity (0,0,1). Wrapping it in
   :where() drops it to zero and the whole page silently falls back to
   system-ui. The resets below are the opposite case: they DO want zero
   specificity, so that component styles win over them. */
body.nh-home {
  font-family: "Outfit", sans-serif;
  color: var(--ink);
  background: #fff;
}

:where(body.nh-home) h1,
:where(body.nh-home) h2,
:where(body.nh-home) h3,
:where(body.nh-home) h4 {
  margin: 0;
}

:where(body.nh-home) p {
  margin: 0;
}

:where(body.nh-home) a {
  text-decoration: none;
}

.text-maroon {
  color: var(--maroon);
}

.text-dark-heading {
  color: var(--ink);
}

/* Scoped to the home page: this file loads AFTER pages.css on all sixteen
   inner pages, so unscoped .section-* rules here were overriding the inner
   page styles -- .section-title in particular squashed the suppliers /
   services / hr-outsourcing headings from 5.6rem down to 2.4rem. */
:where(body.nh-home) .section-eyebrow {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 600;
  color: var(--maroon);
  margin-bottom: .5rem;
}

:where(body.nh-home) .section-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}

:where(body.nh-home) .section-subtext {
  color: var(--gray-text);
  font-size: 1rem;
  max-width: 420px;
  margin-left: auto;
}

:root {
  /* Color Palette Tokens */
  --color-burgundy-900: #2b0412;
  --color-burgundy-800: #4a0921;
  --color-burgundy-700: #821445;
  /* Primary Brand Standard Crimson (#821445) */
  --color-brand-primary: #821445;
  --color-burgundy-600: #961851;
  --color-crimson-500: #821445;
  /* Enforce #821445 standard across crimson tokens */
  --color-magenta-accent: #d12c71;
  --color-magenta-light: #fbebf2;

  --color-navy-900: #0c1424;
  --color-navy-800: #15233d;
  --color-navy-700: #1d335a;
  --color-navy-accent: #26467c;

  --color-slate-900: #111116;
  --color-slate-800: #1f1f26;
  --color-slate-600: #4a4b57;
  --color-slate-400: #888996;
  --color-slate-200: #e2e3e9;
  --color-slate-100: #f4f5f8;
  --color-white: #ffffff;

  /* Gradients */
  --gradient-wine-hero: linear-gradient(135deg, rgba(43, 4, 18, 0.82) 0%, rgba(99, 12, 52, 0.45) 60%, rgba(21, 35, 61, 0.7) 100%);
  --gradient-wine-radial: radial-gradient(circle at 80% 20%, #851246 0%, #52092a 50%, #2f0416 100%);
  --gradient-stats-bg: linear-gradient(160deg, #600c31 0%, #3a061c 100%);

  /* Typography */
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;

  /* Shadows & Glass */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(99, 12, 52, 0.15);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.25);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: 1px solid rgba(255, 255, 255, 0.3);
  --glass-blur: backdrop-filter: blur(16px);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-full: 0px;
  /* Strictly NO rounded corners */
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
/* Scoped to the new-home body and to the shared header/footer, so the
   sixteen legacy pages keep their own heading/link/list rules. */
:where(body.nh-home) h1,
:where(body.nh-home) h2,
:where(body.nh-home) h3,
:where(body.nh-home) h4,
:where(body.nh-home) h5,
:where(body.nh-home) h6 {
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-slate-900);
}

:where(body.nh-home) a,
:where(.header) a,
:where(.footer-wrapper) a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-fast);
}

:where(body.nh-home) ul,
:where(body.nh-home) ol,
:where(.header) ul,
:where(.footer-wrapper) ul {
  list-style: none;
}

:where(body.nh-home) img,
:where(.header) img,
:where(.footer-wrapper) img {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(body.nh-home) button,
:where(body.nh-home) input,
:where(.header) button,
:where(.footer-wrapper) button,
:where(.footer-wrapper) input,
:where(.footer-wrapper) select {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

:where(body.nh-home) button,
:where(.header) button,
:where(.footer-wrapper) button {
  cursor: pointer;
  background: transparent;
}

/* ==========================================================================
   Utility Classes & Design Tokens
   ========================================================================== */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 4vw;
}

.text-burgundy {
  color: var(--color-burgundy-700) !important;
}

.text-magenta {
  color: var(--color-magenta-accent) !important;
}

.text-navy {
  color: var(--color-navy-800) !important;
}

.text-white {
  color: var(--color-white) !important;
}

.text-muted {
  color: var(--color-slate-600);
}

.bg-burgundy {
  background-color: var(--color-burgundy-700);
}

.bg-light {
  background-color: var(--color-slate-100);
}

.bg-white {
  background-color: var(--color-white);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f4;
}

::-webkit-scrollbar-thumb {
  background: var(--color-burgundy-700);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-crimson-500);
}

/* Button Component Styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-weight: 600;

  padding: 0.85rem 2rem;
  border-radius: 0px !important;
  /* Strictly NO ROUNDED CORNER */
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-white {
  background-color: var(--color-white);
  color: var(--color-burgundy-700);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.btn-white:hover {
  background-color: var(--color-burgundy-700);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(99, 12, 52, 0.4);
}

.btn-white:hover .icon-circle {
  background-color: var(--color-white);
  color: var(--color-burgundy-700);
}

.btn-outline-white {
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  padding: 0.75rem 1.75rem;
}

.btn-outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-burgundy-700);
  border-color: var(--color-white);
  transform: translateY(-2px);
}

.btn-careers {
  background-color: var(--color-white);
  color: var(--color-slate-900);
  padding: 0.5em 0.5em 0.5em 1.5em;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--shadow-md);
}

.btn-careers .icon-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-burgundy-700);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  transition: var(--transition-bounce);
}

.btn-careers:hover .icon-circle {
  transform: translateX(4px) scale(1.08);
  background-color: var(--color-magenta-accent);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: var(--transition-smooth);
  padding: 1.25em 0;
}

.header.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-sm);
  padding: 0.75em 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.logo-icon {
  width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  transition: var(--transition-fast);
}

.header.scrolled .logo-icon {
  filter: none;
}

.header.scrolled .logo-icon path {
  fill: var(--color-burgundy-700);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2em;
  margin-left: auto;
  margin-right: 2.5em;
}

.nav-item {
  font-size: 0.9em;
  font-weight: 500;
  color: var(--color-white);
  position: relative;
  transition: var(--transition-fast);
}

.header.scrolled .nav-item {
  color: var(--color-slate-800);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-magenta-accent);
  transition: var(--transition-smooth);
}

.nav-item:hover {
  color: var(--color-magenta-accent) !important;
}

.nav-item:hover::after {
  width: 100%;
}

.mobile-menu-btn {
  display: none;
  color: var(--color-white);
  font-size: 1.5em;
}

.header.scrolled .mobile-menu-btn {
  color: var(--color-slate-900);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
  background-color: var(--color-navy-900);
  overflow: hidden;
}

.hero-bg,
.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(115deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.05) 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero-description {
  color: var(--color-white) !important;
}

.hero-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1050px;
}

.hero-main-title {
  font-size: clamp(3rem, 6.2vw, 6.25rem);
  font-weight: 600;
  color: var(--color-white) !important;
  letter-spacing: -1.8px;
  line-height: 1.06;
  margin-bottom: 2.75rem;
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
}

.hero-actions-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Explicitly Enforce Zero Rounded Corners & Prominent Sizing on Hero Buttons */
.hero .btn,
.hero-actions-left .btn,
.hero-sub-card .btn {
  border-radius: 0px !important;
}

.hero-actions-left .btn {
  padding: 1.25rem 2.8rem;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-actions-left .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .hero-main-title {
    font-size: clamp(2.3rem, 7.5vw, 3.4rem);
    letter-spacing: -1px;
    margin-bottom: 1.75rem;
    line-height: 1.12;
  }

  .hero-actions-left {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 1rem;
  }

  .hero-actions-left .btn {
    width: 100%;
    text-align: center;
    padding: 1.1rem 1.8rem;
    font-size: 1.3rem;
  }
}

.hero-sub-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.hero-description {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 480px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.badge-jv {
  margin-top: 0;
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-white) !important;
  font-size: 0.95rem;
  font-weight: 500;
  transition: var(--transition-fast);
  align-self: flex-start;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.badge-jv:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

.badge-jv i {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1.1rem;
}



/* =========================================================
   NAVBAR
========================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.brand-mark {

  font-weight: 700;
  /* Outfit ships no 800; 800 would be faux-bolded */
  letter-spacing: .05em;
  color: var(--maroon);
  font-size: 1.4rem;
}

.navbar .nav-link {
  color: var(--ink);
  font-weight: 500;
  font-size: .92rem;
}

.navbar .nav-link:hover {
  color: var(--maroon);
}

.btn-nav-cta {
  background: var(--maroon);
  color: #fff !important;
  padding: .5rem 1.2rem;
  border-radius: 30px;
  font-size: .85rem;
  font-weight: 600;
}

.btn-nav-cta:hover {
  background: var(--maroon-dark);
  color: #fff;
}

/* =========================================================
   1. HERO — recreated exactly from reference banner
========================================================== */
.banner-section {
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #FDECF3 0%, #FFFFFF 100%);
}

.outer-banner {
  position: relative;
}

.banner-card {
  position: relative;
  background-color: #821445;
  color: #ffffff;
  padding: 60px 40px 70px;
  margin: 0 40px;
  clip-path: polygon(0 0%, 75% 0, 79% 0%, 100% 100%, 0% 100%, 0 80%);
  margin-right: 0;
  padding-right: 149px;
  min-height: 531px;
  display: grid;
  align-items: center;
}

.shape-bottom-right {
  position: absolute;
  /* bottom: 0; */
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  z-index: 1;
  height: 100%;
  width: 27%;
  background-color: #620F34;
  clip-path: polygon(38% 0%, 100% 0%, 100% 72%);
}

/* Subtitle top */
.banner-subtitle {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 25px;
  line-height: normal;
}

/* Main Headline */
.banner-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.8px;
  max-width: 950px;
  margin: 0 auto;
  text-transform: capitalize;
  line-height: normal;
  color: #000;
}

/* Bottom Right Tagline */
.banner-footer-text {
  color: #821445;
  font-weight: 500;
  letter-spacing: 1.5px;
  font-size: 20px;
  margin-top: 20px;
}

.banner-footer-text span.grey-text {
  color: #676767;
}

/* Decorative Shapes */
.shape-bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 250px solid #9C1D56;
  border-right: 280px solid transparent;
  z-index: 1;

}

.shape-top-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 250px solid #4a0924;
  border-left: 200px solid transparent;
  z-index: 1;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .banner-card {
    clip-path: none;
    margin: 0;
    padding: 40px 20px;
  }

  .banner-title {
    font-size: 2.6rem;
  }

  .shape-bottom-left,
  .shape-top-right {
    display: none;
  }
}

/**************************************/

/* Section Container Styles */
.services-section {
  color: #111111;
  padding: 5rem 1.5rem;
  position: relative;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

/* Abstract Background Geometry */
.services-section::before,
.services-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
}



.services-section::after {
  width: 100%;
  top: 0;
  height: 100%;
  background-image: url(../images/nh/bg-services.png);
  filter: grayscale(100%);
  opacity: 0.1;
  right: 0;
  background-position: right;
  background-repeat: no-repeat;
}

/* Outer Wrapper */
.services-section__container {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header Block */
.services-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}

.services-section__sub-title {
  font-size: 29px;
  color: #979797;
  font-weight: 400;
  margin-bottom: 0.75rem;
  line-height: normal;
}

.services-section__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0;
}

.services-section__title-highlight {
  color: #821445;
  font-weight: 400;
}

.services-section__explore-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: #111111;
  font-weight: 500;
  font-size: 18px;
  font-style: italic;
  border-bottom: 1.5px solid #111111;
  padding-bottom: 4px;
  transition: opacity 0.3s ease;
}

.services-section__explore-link:hover {
  opacity: 0.7;
}

/* Cards Grid
       minmax(0, 1fr) rather than plain 1fr: the default `auto` minimum refuses
       to shrink below the logo images intrinsic width, which pushed the last
       cards past the viewport and caused a page-wide horizontal scroll. */
.services-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Base Card Item */
.services-section__card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.25rem 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

/* Default Dark Gradient Overlay */
.services-section__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 37, 66, 0.1) 0%, rgba(16, 37, 66, 0.85) 75%, rgba(16, 37, 66, 0.95) 100%);
  transition: opacity 0.4s ease;
  z-index: 1;
  background: linear-gradient(180deg, #00426b00 0%, #2b467d 100%);
}

/* Blue Overlay on Hover */
.services-section__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 72, 128, 0.92) 0%, rgba(30, 60, 110, 0.97) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.services-section__card:hover::after {
  opacity: 1;
}

/* Background Images */
.services-section__card--hr {
  background-image: url('../images/discussing-busines-report-1-1.jpg');
}

.services-section__card--training {
  background-image: url('../images/discussing-busines-report-1-2.jpg');
}

.services-section__card--procurement {
  background-image: url('../images/discussing-busines-report-1-3.jpg');
}

/* Inner Card Content Wrapper */
.services-section__card-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.services-section__badge {
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

.services-section__card-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0.5rem;
  transition: margin 0.3s ease;
  color: #ffffff;
}

/* Hover Revealed Elements */
.services-section__feature-icon {
  width: 80px;
  /* height: 48px; */
  margin-bottom: 1.5rem;
  /* border: 1.5px dashed rgba(255, 255, 255, 0.6); */
  /* border-radius: 50%; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 8px; */
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
  transition: all 0.4s ease;
}

.services-section__feature-icon svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 1.5;
}

.services-section__card-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  font-weight: 400;
  margin-bottom: 0;
  transition: all 0.4s ease;
}

.services-section__card-action {
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Reveal Hover States */
.services-section__card:hover .services-section__feature-icon {

  opacity: 1;
  margin-bottom: 1.5rem;
  max-height: 83px;
}

.services-section__card:hover .services-section__card-desc {
  max-height: 150px;
  opacity: 0.85;
  margin-bottom: 1.5rem;
}

.services-section__card:hover .services-section__card-action {
  max-height: 30px;
  opacity: 0.9;
}

/* Action Icon Buttons */
.services-section__icon-btn {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #821445;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: transform 0.3s ease, background-color 0.4s ease;
  padding: 14px;
}

.services-section__card:hover .services-section__icon-btn img {
  filter: invert(1);
}

.services-section__icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
  stroke-width: 2;
  fill: none;
  transition: stroke 0.4s ease;
}

/* Switch Top Right Button to Light Theme on Hover */
.services-section__card:hover .services-section__icon-btn {
  background-color: #ffffff;
  transform: scale(1.1);
}

.services-section__card:hover .services-section__icon-btn svg {
  stroke: #234880;
}

@media (max-width: 900px) {
  .services-section__grid {
    grid-template-columns: 1fr;
  }

  .services-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .services-section__title {
    font-size: 2.8rem !important;
  }

  .services-section__sub-title {
    font-size: 2rem !important;
  }

  .services-section__card {
    height: 420px;
  }
}

/*******************************************/

.accreditations-section {
  color: #111111;
  padding: 80px 0px;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #F9F9F9 0%, #E3E3E3 100%);
}

.accreditations-section__container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* Section Header */
.accreditations-section__header {
  text-align: center;
  margin-bottom: 48px;
}

.accreditations-section__title {
  font-size: 36px;
  font-weight: 400;
  color: #979797;
  margin: 0;
  letter-spacing: -0.5px;
}

.accreditations-section__title-bold {
  font-weight: 700;
  color: #821445;
}


/* Cards Grid / Slider Container */
.accreditations-section__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: auto;
  scroll-snap-type: none;
    touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 0 20px 0;
  border-radius: 4px;
}

.accreditations-section__grid::-webkit-scrollbar {
  display: none;
}

/* Logo Card Item */
.accreditations-section__card {
  background-color: #ffffff;
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  flex: 0 0 calc(20% - 1.2rem);
  width: calc(20% - 1.2rem);
  min-width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.accreditations-section__card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.accreditations-section__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Retain original accent colors for specific logos if desired */
.accreditations-section__logo--colored {
  filter: none;
  opacity: 1;
}

.accreditations-section__card:hover .accreditations-section__logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Responsive Layout */
@media (max-width: 1024px) {
  .accreditations-section__card {
    flex: 0 0 calc(33.333% - 1rem);
    width: calc(33.333% - 1rem);
    min-width: 170px;
  }
}

@media (max-width: 768px) {
  .accreditations-section__title {
    font-size: 2.6rem !important;
  }

  .accreditations-section__grid {
    gap: 0;
    padding: 15px 0 25px 0;
  }

  .accreditations-section__card {
    flex: 0 0 calc(100% - 30px);
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    margin: 0 15px;
  }
}

@media (max-width: 600px) {
  .accreditations-section__title {
    font-size: 2.2rem !important;
  }

  .accreditations-section__card {
    flex: 0 0 calc(100% - 30px);
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    margin: 0 15px;
  }
}



/****************************************************************/

/* ==========================================================================
   OUR CLIENTS & PARTNERS SLIDER SECTION
   ========================================================================== */
.clients-section {
  background-color: #ffffff;
  padding: 80px 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}

.clients-section__container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.clients-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.clients-section__subtitle {
  font-size: 0.95rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #821445;
  margin-bottom: 8px;
}

.clients-section__title {
  font-size: 42px;
  font-weight: 700;
  color: #111111;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.clients-section__title span {
  color: #821445;
}

/* Slider Grid Track */
.clients-section__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: auto;
  scroll-snap-type: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 15px 5px 25px 5px;
}

.clients-section__grid::-webkit-scrollbar {
  display: none;
}

/* Client Logo Card Box */
.clients-section__card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  flex: 0 0 calc(20% - 1.2rem);
  width: calc(20% - 1.2rem);
  min-width: 190px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.clients-section__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(130, 20, 69, 0.12);
  border-color: #821445;
}

.clients-section__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* filter: grayscale(100%); */
  opacity: 0.8;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.clients-section__card:hover .clients-section__logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.05);
}

/* Responsive Breakdown */
@media (max-width: 768px) {
  .clients-section__title {
    font-size: 2.7rem;
  }
  .banner-title{color: #000;}

  .clients-section__grid {
    gap: 10px;
    padding: 15px 15px 25px 15px;
  }

  .clients-section__card {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    min-width: calc(50% - 5px);
    margin: 0;
    height: 100px;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .clients-section__grid {
    gap: 8px;
    padding: 15px 12px 25px 12px;
  }

  .clients-section__card {
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    min-width: calc(50% - 4px);
    margin: 0;
    height: 90px;
    padding: 0.75rem;
  }
}



/****************************************************************/

/* Section Styles */
.credentials-section {

  background-color: #821445;
  color: #ffffff;
  padding: 80px 0px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background-image: url(../images/nh/cleint-bg.png);
  background-size: cover;
}

/* Abstract background geo shapes */


.credentials-section::after {
  bottom: -10%;
  right: -5%;
  width: 40%;
  height: 100%;
  background: linear-gradient(225deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 80%);
}

.credentials-section__container {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header Layout */
.credentials-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}

.credentials-section__sub-title {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.9);

}

.credentials-section__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.15;
  text-align: right;
  color: #ffffff;
  margin: 0;
}

.credentials-section__title span {
  display: block;
  font-weight: 300;
}

/* Cards Grid */
.credentials-section__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
}

/* Card Item Base State */
.credentials-section__card {
  position: relative;
  background-color: #ffffff;
  color: #111111;
  border-radius: 4px;
  padding: 2.5rem 2rem 2rem 2rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease, border-color 0.4s ease;
  border: 1px solid #951a51;
}

/* Watermark Big Text */
.credentials-section__watermark {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 4.5rem;
  font-weight: 700;
  /* Outfit ships no 800; 800 would be faux-bolded */
  color: rgba(0, 0, 0, 0.03);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  transition: color 0.4s ease;
}

/* Card Icon */
.credentials-section__icon {
  width: 66px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.credentials-section__icon img,
.credentials-section__icon svg {
  width: 100%;
  height: auto;
  object-fit: contain;
  color: #111111;
  transition: filter 0.4s ease;
}

/* Card Data */
.credentials-section__data {
  position: relative;
  z-index: 2;
  text-align: right;
}

.credentials-section__number {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}

.credentials-section__label {
  font-size: 19px;
  font-weight: 400;
  color: #676767;
  transition: color 0.4s ease;
}

/* Hover Effect State (Design matches 1st Card in prompt) */
.credentials-section__card:hover {
  color: #ffffff;
  transform: translateY(-4px);
  background: linear-gradient(180deg, #37373700 0%, #ffffff4d 100%);
}

.credentials-section__card:hover .credentials-section__watermark {
  color: rgba(0, 0, 0, 0.35);
  background: linear-gradient(91deg, #6e2d5500 0%, #a44c7899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.credentials-section__card:hover .credentials-section__icon img {
  /* filter: invert(1); */
  color: #8d9398;
  filter: brightness(0) invert(1);
}

.credentials-section__card:hover .credentials-section__icon svg {
  stroke: #ffffff;
}

.credentials-section__card:hover .credentials-section__label {
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile Adaptability */
@media (max-width: 900px) {
  .credentials-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .credentials-section__header {
    flex-direction: column;
    gap: 1.5rem;
  }

  .credentials-section__title {
    text-align: left;
    font-size: 2.8rem !important;
  }

  .credentials-section__sub-title {
    font-size: 2rem !important;
  }
}

@media (max-width: 550px) {
  .credentials-section__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .credentials-section__icon img, .credentials-section__icon svg{
        max-width: 33px;
  }
  .credentials-section__number { font-size: 24px;}
  .credentials-section__label { font-size: 14px;}
  .credentials-section__card{padding: 10px;min-height: 140px;}
  .credentials-section__watermark{    font-size: 2.5rem;}

  .credentials-section__title {
    font-size: 2.4rem !important;
  }
}

/**********************************/

/* Section Styles */
.icv-section {

  background-color: #ffffff;
  color: #333333;
  padding: 80px 0px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.icv-section__container {
  max-width: 1140px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;

}

/* Left Column (Heading + Arrow) */
.icv-section__left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: 1;
}

.icv-section__title {
  font-size: 56px;
  line-height: 1.1;
  font-weight: 400;
  color: #555555;
  margin: 0;
  white-space: nowrap;
}

.icv-section__title-bold {
  font-weight: 600;
  color: #821445;
  display: block;
}

.icv-section__arrow {
  width: 60px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icv-section__arrow svg {
  width: 100%;
  height: 100%;
  stroke: #cccccc;
  stroke-width: 1.5;
  fill: none;
}

/* Right Column (Text Content) */
.icv-section__right {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.icv-section__desc {
  font-size: 17px;
  line-height: 1.6;
  color: #777777;
  margin: 0;
  font-weight: 400;
}

.icv-section__highlight {
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: #821445;
  margin: 0;
}

.icv-section__sub-desc {
  font-size: 17px;
  line-height: 1.6;
  color: #777777;
  margin: 0;
  font-weight: 400;
}

/* Background Watermark Illustration */
.icv-section__watermark {
  position: absolute;
  right: 16px;
  top: 16px;
  /* transform: translateY(-50%); */
  width: 280px;
  height: 280px;
  /* opacity: 0.06; */
  pointer-events: none;
  z-index: 0;
}

.icv-section__watermark svg {
  width: 100%;
  height: 100%;
  stroke: #111111;
  fill: none;
  stroke-width: 1.2;
}

/* Responsive Layout */
@media (max-width: 900px) {
  .icv-section__container {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .icv-section__left {
    width: 100%;
    justify-content: space-between;
  }

  .icv-section__title {
    font-size: 2.25rem;
  }

  .icv-section__watermark {
    width: 200px;
    height: 200px;
    right: -1rem;
  }
}

@media (max-width: 550px) {
  .icv-section__left {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .icv-section__arrow {
    transform: rotate(90deg);
    margin-top: 0.5rem;
  }
}

/**************************************/

/* Section Styles */
.global-presence {
  background-color: #ffffff;
  padding: 80px 0px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 0;
}

.global-presence__container {
  max-width: 1140px;
  margin: 0 auto;
}

/* Header Styles */
.global-presence__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
  border-top: 1px solid #D7CACA;
  padding-top: 47px;
}

.global-presence__title {
  margin: 0;
  font-size: 56px;
  font-weight: 600;
  color: #111111;
  line-height: 1.1;
  letter-spacing: -1px;
}

.global-presence__title span {
  display: block;
  font-size: 28px;
  font-weight: 400;
  color: #888888;
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}

.global-presence__subtitle {
  margin: 0;
  font-size: 2.4rem;
  font-weight: 400;
  color: #666666;
  text-align: right;
  line-height: 1.3;
  max-width: 300px;
}

/* Cards Grid Container */
.global-presence__grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  /* Seamless side-by-side cards */
  height: 480px;
  /* Base height for card area */
}

/* Card Item Base State */
.global-presence__card {
  position: relative;
  flex: 1;
  height: 500px;
  /* Normal default card height */
  overflow: hidden;
  cursor: pointer;
  margin-top: 120px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  /* Smooth transition for hover effect scaling/height expansion */
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s ease,
    z-index 0s 0.4s;
  z-index: 1;
}

/* Background Image Holder */
.global-presence__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
}

/* Gradient Overlay */
.global-presence__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
  transition: background 0.4s ease;
}

/* Vertical Country Label */
.global-presence__country {
  position: absolute;
  top: 2rem;
  right: 1.5rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s ease;
}

/* HOVER EFFECT (Matches 2nd card in design image) */
.global-presence__card:hover {
  height: 560px;
  /* Increased height on hover */
  z-index: 10;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.4s ease,
    z-index 0s 0s;
  transform: translate(0px, -40px) !important;
}

.global-presence__card:hover .global-presence__overlay {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(130, 20, 69, 0.2) 35%, rgba(130, 20, 69, 0.9) 75%, rgba(130, 20, 69, 0.98) 100%);
}

.global-presence__card:hover .global-presence__bg {
  transform: scale(1.08);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .global-presence__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .global-presence__title {
    font-size: 2.8rem !important;
  }

  .global-presence__title span {
    font-size: 1.6rem !important;
  }

  .global-presence__subtitle {
    text-align: left;
    font-size: 1.6rem !important;
  }

  .global-presence__grid {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 940px !important;
    gap: 1.5rem !important;
  }

  .global-presence__card {
    width: 100% !important;
    height: 220px !important;
    flex: 0 0 220px !important;
    margin-top: 0 !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .global-presence__card:hover {
    height: 220px !important;
    transform: none !important;
  }

  .global-presence__country {
    writing-mode: horizontal-tb;
    transform: none;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.8rem !important;
  }
}

/*******************************/

.core-values {
  background-color: #ffffff;
  color: #111111;
  /* The preceding section already ends on 80px of padding, so a further
       80px here read as a ~160px void above "Our Core". The rule below sits
       on the header, so this only needs enough room to breathe. */
  padding: 24px 0px 80px;
  width: 100%;
  box-sizing: border-box;
}

.core-values__container {
  max-width: 1200px;
  margin: 0 auto;
}

.vision-mission__container.container {
  padding: 0px 20px;
}

/* Section Header
       Divider + inset match .global-presence__header directly above, so the
       two sections read as one system rather than one having a rule and the
       other running straight into the cards. */
.core-values__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4vw;
  margin-bottom: 4rem;
  padding-top: 47px;
  border-top: 1px solid #D7CACA;
}

.core-values__title {
  font-size: 56px;
  font-weight: 600;
  color: #111111;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1px;
}

.core-values__title span {
  display: block;
  font-size: 28px;
  font-weight: 400;
  color: #888888;
  margin-bottom: 0.25rem;
  letter-spacing: 0;
}

.core-values__subtitle {
  font-size: 24px;
  font-weight: 400;
  color: #787878;
  margin: 0;
  text-align: right;
  line-height: 1.25;
  max-width: 300px;
}

/* Cards Grid */
/* The heading and its rule sit on the container inset; the card row runs
       wider, close to the page edge, the way the Figma frame has it. Negative
       margins pull it back out of the container padding. */
.core-values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-inline: calc(-1 * clamp(20px, 5vw, 72px) + 20px);
}

/* Card Base */
.core-values__card {
  background-color: #1919190F;
  color: #333333;
  padding: 30px 30px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

.core-values__card .stage {
  position: absolute;
  top: 20px;
  right: 0;
  transform: unset;
  opacity: 0;
  left: unset;
}

.core-values__card:hover .stage {
  opacity: 1;
}

/* Hover State (Simulates the highlighted 2nd card style dynamically) */
.core-values__card:hover,
.core-values__card--featured {
  background-color: #821445;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(125, 21, 56, 0.2);
}

/* Card Icon */
.core-values__icon {
  width: 68px;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
  min-height: 80px;
}

.core-values__card:hover h3.core-values__card-title {
  color: #fff;
}

.core-values__icon img,
.core-values__icon svg {
  width: 100%;
  height: auto;
  object-fit: contain;
  color: #111111;
  transition: filter 0.4s ease;
}


.core-values__card:hover .core-values__icon img,
.core-values__card--featured .core-values__icon img,
.core-values__card:hover .core-values__icon svg,
.core-values__card--featured .core-values__icon svg {
  filter: brightness(0) invert(1);
}

/* Card Content */
.core-values__card-title {
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 1rem 0;
  position: relative;
  z-index: 2;
}

/* Was a flat 20px, which pinned this section's content 52px further out than
   .global-presence directly above it. Matches the shared .container inset so
   the heading, rule and cards line up with the rest of the page. */
.core-values__container.container {
  padding: 0 clamp(20px, 5vw, 72px);
}

.core-values__card-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  margin: 0;
  position: relative;
  z-index: 2;
  transition: color 0.4s ease;
  font-weight: 400;
}

.core-values__card:hover .core-values__card-desc,
.core-values__card--featured .core-values__card-desc {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive Breakdown */
@media (max-width: 1024px) {
  .core-values__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 650px) {
  .core-values__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }

  .core-values__subtitle {
    text-align: left;
  }

  .core-values__grid {
    grid-template-columns: 1fr;
  }

  .core-values__title {
    font-size: 2.6rem !important;
  }

  .core-values__title span {
    font-size: 1.6rem !important;
  }
}

/**************************/
.vision-mission {

  padding: 0;
  width: 100%;
  background-color: #ffffff;
  box-sizing: border-box;
}

.vision-mission__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* Base Block Styling */
.vision-mission__block {
  position: relative;
  padding: 4.5rem 3.5rem;
  border-radius: 2px;
  color: #ffffff;
  min-height: 323px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  box-sizing: border-box;
  overflow: hidden;
}

/* Vision Block Background */
.vision-mission__block--vision {
  background-color: #821445;
}

/* Mission Block Background */
.vision-mission__block--mission {
  background-color: #1D427B;
}

/* Typography */
.vision-mission__title {
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 21px;
  letter-spacing: -0.5px;
  position: relative;
  z-index: 2;
  color: #fff;
}

.vision-mission__text {
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  max-width: 480px;
  position: relative;
  z-index: 2;
}

/* Geometric Overlay Graphics */
.vision-mission__block--vision::before,
.vision-mission__block--vision::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 1;
}

.vision-mission__block--vision::before {
  bottom: 20%;
  right: 10%;
  width: 0;
  height: 0;
  border-top: 140px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 210px solid rgb(0 0 0 / 19%);
  border-left: 0px solid #00000000;

  animation: arrow-move 2.4s ease-in-out infinite;
  animation-delay: 0.4s;
  opacity: 0;
}

.vision-mission__block--vision::after {
  bottom: 12%;
  right: 6%;
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 140px solid rgb(0 0 0 / 19%);
  border-left: 0px solid transparent;
  animation: arrow-move 2.4s ease-in-out infinite;
  opacity: 0;
}

.vision-mission__block--mission::before,
.vision-mission__block--mission::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.vision-mission__block--mission::before {
  top: 12%;
  right: 10%;
  width: 0;
  height: 0;
  border-bottom: 111px solid transparent;
  border-top: 0px solid transparent;
  border-right: 122px solid rgba(255, 255, 255, 0.06);
  border-left: 0px solid transparent;
  animation: arrow-move 2.4s ease-in-out infinite;
  animation-delay: 0.4s;
  opacity: 0;
}

.vision-mission__block--mission::after {
  top: 18%;
  right: 14%;
  width: 0;
  height: 0;
  border-bottom: 164px solid transparent;
  border-top: 0px solid transparent;
  border-right: 176px solid rgba(255, 255, 255, 0.1);
  border-left: 0px solid transparent;
  animation: arrow-move 2.4s ease-in-out infinite;

  opacity: 0;
}

/* Responsive Design */
@media (max-width: 900px) {
  .vision-mission__container {
    grid-template-columns: 1fr;
  }

  .vision-mission__block {
    padding: 2.5rem 1.5rem;
    min-height: auto;
  }

  .vision-mission__title {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }

  .vision-mission__text {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
}

/*******************/

.sectors-section {

  background-color: #ffffff;
  color: #111111;
  padding: 80px 0px;
  width: 100%;
  box-sizing: border-box;
}

.sectors-section__container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header Layout */
.sectors-section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.sectors-section__title {
  font-size: 56px;
  font-weight: 600;
  color: #111111;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1px;
}

.sectors-section__subtitle {
  font-size: 28px;
  font-weight: 400;
  color: #787878;
  margin: 0;
  text-align: right;
  line-height: 1.25;
}

.sectors-section__subtitle span {
  display: block;
  font-weight: 700;
  color: #555555;
}

/* List Layout */
.sectors-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Row Item Styling (Default State) */
.sectors-section__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 2.5rem;
  background-color: #F8F9FA;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  color: #222222;
  transition: all 0.35s ease;
  cursor: pointer;
}

.sectors-section__left {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

/* Icon Container */
.sectors-section__icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sectors-section__icon svg {
  width: 100%;
  height: 100%;
  fill: #444444;
  transition: fill 0.35s ease, stroke 0.35s ease;
}

/* Sector Title */
.sectors-section__name {
  font-size: 23px;
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.3px;
}

/* Right Indicator (Number Pill or Arrow) */
.sectors-section__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.sectors-section__number {
  font-size: 1.2rem;
  font-weight: 400;
  color: #bbbbbb;
  transition: opacity 0.35s ease;
}

.sectors-section__arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: transparent;
  border: 1.5px solid #1D427B;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.35s ease;
}

.sectors-section__arrow svg {
  width: 16px;
  height: 16px;
  stroke: #1D427B;
  fill: none;
  stroke-width: 2;
}

/* Active / Hover State Styling (Matches the 'Defence' item in image) */
.sectors-section__item:hover,
.sectors-section__item--active {
  border-color: #2E5188;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(46, 81, 136, 0.15);
  background: linear-gradient(90deg, #203E7C 0%, #FFFFFF 100%);
}

.sectors-section__item:hover .sectors-section__name {
  color: #fff;
}

.sectors-section__item:hover .sectors-section__icon img {
  filter: brightness(0) invert(1);
}

.sectors-section__item:hover .sectors-section__icon svg,
.sectors-section__item--active .sectors-section__icon svg {
  fill: #ffffff;
}

.sectors-section__item:hover .sectors-section__number,
.sectors-section__item--active .sectors-section__number {
  display: none;
}

.sectors-section__item:hover .sectors-section__arrow,
.sectors-section__item--active .sectors-section__arrow {
  opacity: 1;
  transform: scale(1);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .sectors-section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .sectors-section__subtitle {
    text-align: left;
    font-size: 1.25rem;
  }

  .sectors-section__title {
    font-size: 2.75rem;
  }

  .sectors-section__item {
    padding: 1rem 1.25rem;
  }

  .sectors-section__left {
    gap: 1.25rem;
  }

  .sectors-section__name {
    font-size: 1.5rem;
  }
}

/***********************************/

/* Section Setup */
.journey-section {

  background-color: #ffffff;
  padding: 5rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.journey-section__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Title */
.journey-section__title {
  font-size: 56px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 3rem 0;
  letter-spacing: -1px;
  line-height: 1.1;
}

.journey-section__title span {
  color: #821445;
  font-weight: 400;
}

/* Cards Grid Container — Horizontal Auto Slider */
.journey-section__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Hide scrollbars */
  padding: 10px 0 20px 0;
  border-radius: 4px;
}

.journey-section__grid::-webkit-scrollbar {
  display: none;
}

/* Card Item Base — 4 cards fill desktop view initially */
.journey-section__card {
  position: relative;
  flex: 0 0 calc(25% - 9px);
  width: calc(25% - 9px);
  min-width: 280px;
  height: 520px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  transition: all 0.4s ease;
}

/* Background Images (High quality placeholder architecture matching design) */
.journey-section__card:nth-child(1) {
  background-image: url('../images/rectangle-3801.jpg');
}

.journey-section__card:nth-child(2) {
  background-image: url('../images/rectangle-3801-1.jpg');
}

.journey-section__card:nth-child(3) {
  background-image: url('../images/rectangle-3801-2.jpg');
}

.journey-section__card:nth-child(4) {
  background-image: url('../images/a-male-electrician-works-in-a-switchboard-wi.jpg');
}

/* Dark Overlay for inactive states */
.journey-section__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 25, 30, 0.65);
  transition: all 0.4s ease;
  z-index: 1;
}

/* Magenta Gradient Overlay for Active/Hover state */
.journey-section__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(125, 21, 56, 0.4) 0%, rgba(125, 21, 56, 0.95) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

/* Year Label Styling */
.journey-section__year {
  font-size: 1.75rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  white-space: nowrap;
  transition: all 0.4s ease;
}

/* List Content inside active state */
.journey-section__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 3;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.journey-section__list li {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  position: relative;
  padding-left: 1rem;
}

.journey-section__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #ffffff;
}

.journey-section__list li:last-child {
  margin-bottom: 0;
}

/* --- HOVER STATE STYLES --- */
.journey-section__card:hover::after {
  opacity: 1;
}

.journey-section__card:hover::before {
  opacity: 0;
}

.journey-section__card:hover .journey-section__year {
  top: 52%;
  transform: translate(-50%, 0);
}

.journey-section__card:hover .journey-section__list {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Breakdown */
@media (max-width: 992px) {
  .journey-section__card {
    flex: 0 0 82%;
    min-width: 270px;
    max-width: 320px;
    height: 440px;
  }

  .journey-section__title {
    font-size: 2.6rem !important;
  }
}

/**************************/

/* Section Setup */
.certificates-section {

  background-color: #ffffff;
  padding: 5rem 1.5rem;
  width: 100%;
  box-sizing: border-box;
}

.certificates-section__container {
  max-width: 1300px;
  margin: 0 auto;
  margin-bottom: 80px !important;
}

/* Section Title */
.certificates-section__title {
  font-size: 56px;
  font-weight: 600;
  color: #111111;
  margin: 0 0 3.5rem 0;
  letter-spacing: -1px;
  line-height: 1.1;
}

.certificates-section__title span {
  color: #821445;
  font-weight: 400;
}

/* Certificates Grid Layout */
.certificates-section__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

/* Certificate Card Styling */
.certificates-section__card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #821445;
  border-radius: 2px;
  padding: 1rem;
  aspect-ratio: 1 / 1.38;
  /* Standard document aspect ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.certificates-section__image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.certificates-section__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover Overlay Icon / Action */
.certificates-section__overlay {
  position: absolute;
  inset: 0;
  background: rgba(125, 21, 56, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.certificates-section__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(15px);
  transition: transform 0.4s ease;
}

.certificates-section__icon svg {
  width: 20px;
  height: 20px;
  stroke: #821445;
  fill: none;
  stroke-width: 2;
}

.certificates-section__text {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transform: translateY(15px);
  transition: transform 0.4s ease;
}

/* --- HOVER EFFECTS --- */
.certificates-section__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(125, 21, 56, 0.2);
  border-color: #821445;
}

.certificates-section__card:hover .certificates-section__img {
  transform: scale(1.08);
}

.certificates-section__card:hover .certificates-section__overlay {
  opacity: 1;
}

.certificates-section__card:hover .certificates-section__icon,
.certificates-section__card:hover .certificates-section__text {
  transform: translateY(0);
}

/* Responsive Breakdown */
@media (max-width: 1100px) {
  .certificates-section__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .certificates-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .certificates-section__title {
    font-size: 2.75rem;
  }
}

@media (max-width: 480px) {
  .certificates-section__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/*****************************/

/* Outer Wrapper */
.footer-wrapper {
  position: relative;
  width: 100%;
  background-color: #0d0d0d;
  padding-top: 12em;
  overflow: visible;
  margin-top: 90px;
}

/* Container
       The side inset was a flat `4.5rem` (72px) at every width, which on a
       360px phone spent 144px -- 40% of the screen -- on empty margin and
       crushed the header logo. clamp() keeps the 72px inset on desktop and
       eases it down to 20px on small screens. */
.container {
  margin: 0 auto;
  /* px, not rem. style.css pins the root to ~8-10px on the sixteen content
         pages while the home page runs at 16px, so a rem inset here resolved
         to 72px on the home page and 45px everywhere else -- the header logo
         visibly shifted between index.html and the inner pages. */
  padding: 0 clamp(20px, 5vw, 72px);
  max-width: 1600px;
}

/* CTA Callout Banner */
.cta-banner {
  background-color: #821445;
  border-radius: 2px;
  padding: 40px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
  margin-top: -308px;
  background-image: url(../images/nh/bg-footer.png);
}

/* Geometric Accent on Banner */
.cta-banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0.25) 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none;
}

.cta-banner__content {
  max-width: 500px;
  z-index: 2;
}

.cta-banner__title {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.75em;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.cta-banner__subtitle {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
}

.cta-banner__action {
  display: flex;
  align-items: center;
  gap: 1.5em;
  z-index: 2;
}

/* Custom Dropdown Input */
.cta-dropdown {
  position: relative;
  width: 260px;
}

.cta-dropdown select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  padding: 0.75em 1.5em 0.75em 0;

  font-size: 0.95em;
  font-weight: 300;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.cta-dropdown select:focus {
  border-bottom-color: #ffffff;
}

.cta-dropdown select option {
  background-color: #821445;
  color: #ffffff;
}

.cta-dropdown::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  pointer-events: none;
}

.cta-button {
  display: inline-block;
  padding: 0.85em 2em;
  border: 1px solid #ffffff;
  border-radius: 50px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.cta-button:hover {
  background-color: #ffffff;
  color: #821445;
}

/* Footer Navigation Section */
.footer-nav {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1.5fr;
  gap: 3em;
  padding-bottom: 1em;
  padding-top: 78px;
}

/* Company Identity Column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-brand img {
  width: 200px;
}

.footer-logo {
  width: 130px;
  height: auto;
}

.footer-brand__text {
  font-size: 1.25em;
  line-height: 1.45;
  font-weight: 400;
  color: #ffffff;
  max-width: 380px;
  margin-top: 20px;
}

/* Link Columns */
.footer-col__title {
  font-size: 0.9em;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 1.75em;
  text-transform: uppercase;
}

.footer-col__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 0;
}

.footer-col__list a {
  color: #a0a0a0;
  text-decoration: none;
  font-size: 1em;
  font-weight: 400;
  transition: color 0.3s ease;
}

.footer-col__list a:hover {
  color: #ffffff;
}

/* Socials & Back To Top Row */
.footer-middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 2em;
}

.social-group {
  display: flex;
  align-items: center;
  gap: 2.5em;
}

.social-item {
  display: flex;
  align-items: center;
  gap: 1em;
}

.social-label {
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 1em;
}

.social-icon {
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover,
.social-icon:focus-visible {
  color: var(--maroon-light);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Back To Top Button */
.back-to-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  cursor: pointer;
}

.back-to-top__btn {
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.back-to-top:hover .back-to-top__btn {
  transform: translateY(-3px);
}

.back-to-top__btn svg {
  width: 18px;
  height: 18px;
  stroke: #821445;
  fill: none;
  stroke-width: 2.5;
}

.back-to-top__label {
  font-size: 0.65em;
  color: #666666;
  font-weight: 500;
}

/* Divider */
.footer-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 1.5em;
}

/* Bottom Sub-footer */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2.5em;
  font-size: 1em;
  color: #979797;
}

.footer-bottom__locations {
  color: #888888;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5em;
    padding: 3em 2.5em;
  }

  .cta-banner__action {
    width: 100%;
    flex-wrap: wrap;
  }

  .footer-nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5em;
  }
}

@media (max-width: 640px) {
  .footer-nav {
    grid-template-columns: 1fr;
  }

  .cta-dropdown {
    width: 100%;
  }

  .cta-button {
    width: 100%;
    text-align: center;
  }

  .social-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5em;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 1em;
  }
}

.arrow {
  position: absolute;
  top: 0;
  right: 10%;
  width: 0;
  height: 0;
  border-bottom: 110px solid #00000000;
  border-top: 0px solid transparent;
  border-right: 110px solid rgb(0 0 0 / 18%);
  border-left: 0px solid #00000000;
  opacity: 0;
  animation: arrow-move 2.4s ease-in-out infinite;
}

.arrow--2 {
  top: 20px;
  right: 46px;
  border-bottom: 150px solid transparent;
  border-right: 150px solid rgb(0 0 0 / 18%);
  animation-delay: 0.4s;
}

@keyframes arrow-move {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }

  35% {
    opacity: 1;
    transform: translateX(0);
  }

  65% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(30px);
  }
}

.stage {
  position: absolute;
  left: 38px;
  z-index: 9999;
  width: 268px;
  height: 272px;
  transform: scaleX(-1);
  top: 46px;
}

/* ==========================================================================
   Shared header/footer additions (added when the new-home header and footer
   were rolled out across every page)
   ========================================================================== */

/* --- Solid header variant -------------------------------------------------
   The header floats transparent over the hero and only turns opaque on
   scroll -- on the home page and, since every inner page opens with a
   full-bleed .page-hero carrying the same dark top gradient, on those too.
   `.header--solid` pins it to the "scrolled" appearance and stays available
   for any future page that opens with no image behind the nav. */
.header--solid {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  padding: 0.75em 0;
}

.header--solid .logo-icon {
  filter: none;
}

.header--solid .nav-item {
  color: var(--color-slate-800);
}

.header--solid .mobile-menu-btn {
  color: var(--color-slate-900);
}

.header--solid .btn-careers {
  color: var(--color-burgundy-700);
  border-color: var(--color-burgundy-700);
}

/* Inner pages start below the fixed header instead of under it.
   Exception: `.nh-inner--overlay` pages open with a full-bleed .page-hero and
   let the transparent header float over it, the way the home page floats over
   its hero video -- so they must NOT reserve that space. */
body.nh-inner {
  padding-top: 92px;
}

body.nh-inner--overlay {
  padding-top: 0;
}

@media (max-width: 1100px) {
  body.nh-inner {
    padding-top: 76px;
  }

  body.nh-inner--overlay {
    padding-top: 0;
  }
}

/* --- Dropdown menus -------------------------------------------------------
   The site nav has three sections with children (About Us, Services,
   Insights). Hover on pointer devices, tap-to-open on touch via .is-open. */
.nav-dropdown {
  position: relative;
}

/* Invisible bridge: the panel sits below a visual gap, so extend the
   dropdown's hover area down over that gap. Without it the pointer leaves
   .nav-dropdown on the way to the panel and the menu closes mid-travel. */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  height: 1.6em;
  display: none;
}

.nav-dropdown:hover::after,
.nav-dropdown:focus-within::after,
.nav-dropdown.is-open::after {
  display: block;
}

.nav-dropdown__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 230px;
  padding: 0.5em 0;
  margin-top: 0.9em;
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: var(--transition-smooth);
  z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel,
.nav-dropdown.is-open .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown__panel a {
  display: block;
  padding: 0.7em 1.4em;
  font-size: 0.88em;
  font-weight: 500;
  color: var(--color-slate-800);
  white-space: nowrap;
  transition: var(--transition-fast);
}

.nav-dropdown__panel a:hover,
.nav-dropdown__panel a:focus-visible {
  background: var(--color-magenta-light);
  color: var(--color-burgundy-700);
}

.nav-item__caret {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: var(--transition-fast);
}

.nav-dropdown:hover .nav-item__caret,
.nav-dropdown.is-open .nav-item__caret {
  transform: translateY(0.05em) rotate(225deg);
}

/* Mark the page you are currently on. The magenta was picked against the
   white scrolled bar; over a dark hero photo it is the hardest link to read,
   so the transparent state keeps the label white and lets the magenta
   underline carry the "you are here" signal instead. */
.nav-item.is-current {
  color: var(--color-magenta-accent) !important;
}

.nav-item.is-current::after {
  width: 100%;
}

.header:not(.scrolled) .nav-item.is-current {
  color: var(--color-white) !important;
}

/* --- Mobile drawer --------------------------------------------------------
   The burger button existed in the new-home markup but opened nothing. */
.mobile-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(86vw, 360px);
  background: var(--color-white);
  box-shadow: var(--shadow-xl);
  padding: 1.5em 1.75em 2.5em;
  transform: translateX(100%);
  transition: transform var(--transition-smooth);
  z-index: 1200;
  overflow-y: auto;
  visibility: hidden;
}

.mobile-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.mobile-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75em;
}

.mobile-drawer__head img {
  width: 132px;
}

.mobile-drawer__close {
  font-size: 2em;
  line-height: 1;
  color: var(--color-slate-600);
  padding: 0 0.25em;
}

.mobile-drawer__link {
  display: block;
  padding: 0.85em 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--color-slate-900);
  border-bottom: 1px solid var(--color-slate-200);
}

.mobile-drawer__group {
  border-bottom: 1px solid var(--color-slate-200);
}

.mobile-drawer__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-slate-200);
}

.mobile-drawer__group .mobile-drawer__parent {
  border-bottom: none;
}

.mobile-drawer__parent .mobile-drawer__link {
  flex: 1;
  border-bottom: none;
}

.mobile-drawer__toggle {
  background: none;
  border: none;
  padding: 0.85em 1em;
  cursor: pointer;
  color: var(--color-slate-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.mobile-drawer__toggle:hover {
  color: var(--color-magenta-accent);
}

.mobile-drawer__caret {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.mobile-drawer__group.is-open .mobile-drawer__caret {
  transform: rotate(-135deg);
}

.mobile-drawer__sub {
  display: none;
  flex-direction: column;
  padding: 0.25em 0 0.75em 1.2em;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid var(--color-slate-100);
}

.mobile-drawer__group.is-open .mobile-drawer__sub {
  display: flex;
}

.mobile-drawer__sub a {
  padding: 0.5em 0;
  font-size: 0.9em;
  color: var(--color-slate-600);
}

.mobile-drawer__sub a:hover,
.mobile-drawer__link:hover {
  color: var(--color-magenta-accent);
}

/* The drawer carries both calls to action, because the header's CAREERS
   button is hidden below 600px and Careers is a different intent from a
   general enquiry -- one cannot stand in for the other. */
.mobile-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin-top: 1.75em;
}

.mobile-drawer__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  padding: 0.9em 1.5em;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-burgundy-700);
  transition: var(--transition-fast);
}

.mobile-drawer__cta:hover {
  background: var(--color-burgundy-800);
  color: var(--color-white);
}

/* Careers is the secondary of the two, so it reads as an outline button. */
.mobile-drawer__cta--ghost {
  color: var(--color-burgundy-700);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--color-burgundy-700);
}

.mobile-drawer__cta--ghost:hover {
  color: var(--color-white);
  background: var(--color-burgundy-700);
}

.mobile-drawer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 20, 36, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-smooth);
  z-index: 1150;
}

.mobile-drawer__backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

/* 1100px, not 991px: the seven nav items plus the logo and the CAREERS
   button stop fitting at about 1080px, where the nav starts touching the
   logo. Hand over to the burger before that collision, not after it. */

@media (max-width: 1100px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: inline-flex;
  }
}

@media (min-width: 1101px) {

  .mobile-drawer,
  .mobile-drawer__backdrop {
    display: none;
  }
}

@media (max-width: 991px) {
  .sectors-section{
    padding-bottom: 0;
  }
  .core-values__card-title{
        font-size: 24px;
  }
  .services-section__card-title { font-size: 23px;}
  .hero-grid{align-items: center; text-align: center;}
}

/* --- Root font-size immunity ----------------------------------------------
   style.css pins the root to `clamp(7.2px, 100vw/180, 10px)` so that 1rem
   equals one design pixel for the sixteen Figma-derived content pages. The
   header and footer are authored against a normal 16px root, so on those
   pages every rem in them shrank by ~half.

   Re-establishing 16px on the chrome containers makes their own rem values
   resolve correctly regardless of what the host page does to :root. The home
   page already runs at a 16px root, so this is a no-op there.
   -------------------------------------------------------------------------- */
.header,
.mobile-drawer,
.mobile-drawer__backdrop,
.footer-wrapper {
  font-size: 16px;
}



/* --- Back-to-top: undo the legacy rule ------------------------------------
   style.css also defines .back-to-top, for the old footer, as
   `position:absolute; right:0; bottom:10.5rem` anchored to
   .site-footer__bottom. That old footer is gone, but the class name collides
   and the absolute positioning pulled the control outside the new footer
   container, so its label was clipped at the viewport edge. Return it to
   normal flow -- .footer-middle is a flex row that already places it. */
.footer-middle .back-to-top {
  position: static;
  right: auto;
  bottom: auto;
  align-items: center;
  flex: 0 0 auto;
}

.footer-middle .back-to-top__label {
  white-space: nowrap;
}

/* Bootstrap's reboot puts a border and background on bare <button>; the
   drawer close control should read as a plain glyph. */
.mobile-drawer__close {
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.mobile-drawer__close:hover {
  color: var(--color-magenta-accent);
}

/* --- Mobile header layout -------------------------------------------------
   `.nav-actions` had no rule of its own, so the CAREERS button and the burger
   were laid out by the parent flex row and wrapped onto a second line below
   ~430px, pushing the header to 119px tall and over the hero. The logo, at a
   fixed 180px, was then squeezed by flex until it was 46px wide at 320px.
   -------------------------------------------------------------------------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1em;
  flex: 0 0 auto;
  /* never shrink -- the logo has the flexible space */
  flex-wrap: nowrap;
}

.brand-logo {
  flex: 0 1 auto;
  min-width: 0;
}

/* Below the desktop-nav breakpoint the row is just logo + burger, so give the
   logo a sensible fixed size instead of letting flex crush it. */
@media (max-width: 1100px) {
  .nav-container {
    gap: 1em;
  }

  .logo-icon {
    width: 140px;
  }
}

@media (max-width: 600px) {

  /* CAREERS duplicates the drawer's "Get In Touch" call to action and is what
     forced the wrap; the drawer carries it from here down. */
  .btn-careers {
    display: none;
  }

  .logo-icon {
    width: 124px;
  }

  .header {
    padding: 0.85em 0;
  }
}

@media (max-width: 360px) {
  .logo-icon {
    width: 104px;
  }
}

/* --- Footer social row -----------------------------------------------------
   The "|" between the Qatar and UK social groups only makes sense while they
   sit side by side. Once .social-group stacks into a column it becomes an
   orphaned pipe on its own line, so hide it there. */
.social-divider {
  color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 650px) {
  .social-divider {
    display: none;
  }

  /* Stacked, the two groups need less vertical space than the 1.5em the
     column layout gives them. */
  .footer-middle .social-group {
    gap: 1em;
  }
}

/* ==========================================================================
   CERTIFICATE LIGHTBOX POPUP
   ========================================================================== */
.cert-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cert-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.cert-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: scale(0.95);
}

.cert-modal.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.cert-modal__content {
  position: relative;
  max-width: 90vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 2rem 2.5rem 2rem 2.5rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.cert-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border: none;
  background: #821445;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.cert-modal__close:hover {
  background: #620f34;
  transform: scale(1.08);
}

.cert-modal__header {
  margin-bottom: 1.2rem;
  text-align: center;
  width: 100%;
}

.cert-modal__title {
  font-size: 22px;
  font-weight: 600;
  color: #111111;
  margin: 0;
}

.cert-modal__body {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 78vh;
  width: 100%;
}

.cert-modal__img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
  .cert-modal__content {
    padding: 1.5rem 1rem 1rem 1rem;
    max-width: 95vw;
  }

  .cert-modal__title {
    font-size: 18px;
  }

  .cert-modal__img {
    max-height: 70vh;
  }
  .banner-card .stage{z-index: 1;}
  .shape-bottom-right{z-index: 0;}
  .banner-card{z-index: 5;}
  .services-section__feature-icon {width: 40px;}
}

/* ==========================================================================
   SUBTLE TEXT-REVEAL ANIMATION (Minimal & Professional)
   ========================================================================== */
@keyframes subtleTextReveal {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-main-title {
  animation: subtleTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

.hero-actions-left {
  animation: subtleTextReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.bslm__title {
  animation: subtleTextReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}