/* ============================================================
   FONT FACES  — locally loaded
   ============================================================ */

/* Roboto Flex */
@font-face {
  font-family: 'Roboto Flex';
  src: url('../fonts/roboto-flex.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Google Sans */
@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Google Sans';
  src: url('../fonts/GoogleSans-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* DM Sans */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

/* ---- CSS Variables ---- */
:root {
  --light-theme-red: #AD0417;
  --purple-vivid: #DF0019;
  --purple-btn: #DF0019;
  --primary-purple: #DF0019;
  --white: #FFFFFF;
  --text-muted: #BDBDBD;
  --bg-dark: #0D0D0D;
  --bg-nav: rgba(13, 13, 13, 0.92);
  --bg-dropdown: #DF0019;
  --bg-dropdown-border: rgba(223, 0, 25, 0.18);
  --bg-sidebar: #DF0019;
  --bg-sidebar-active: rgba(223, 0, 25, 0.12);
  --border-subtle: rgba(223, 0, 25, 0.12);
  --font-roboto-flex: 'Roboto Flex', sans-serif;
  --font-heading: 'Roboto Flex', sans-serif;
  --font-subheading: 'Roboto Flex', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --navbar-h: 68px;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  /* Fluid side margin: 16px on mobile → 160px at 1920px */
  --section-px: clamp(16px, 8.33vw, 80px);
  /* Total horizontal margin (both sides) used by .container */
  --container-margin: calc(var(--section-px) * 2);

  /* ── Type scale (max values are at 1920px / 16px base) ──
     H1  70px | H2  52px | H3  38px | H4  28px | H5  22px | H6  18px | body  17px */
  --fs-h1: clamp(2.2rem, 3vw, 4.475rem);
  /* 32 → 70px  */
  --fs-h2: clamp(1.8rem, 2.8vw, 3.9rem);
  /* 24 → 52px  */
  --fs-h3: clamp(1.65rem, 2.7vw, 3.75rem);
  /* 20 → 38px  */
  --fs-h4: clamp(1.1rem, 1.4vw, 1.75rem);
  /* 17.6 → 28px */
  --fs-h5: clamp(0.95rem, 1.15vw, 1.375rem);
  /* 15.2 → 22px */
  --fs-h6: clamp(0.875rem, 0.94vw, 1.125rem);
  /* 14 → 18px  */
  --fs-body: clamp(1.20rem, 0.9vw, 1.350rem);
  /* 14.4 → 17px */
  --fs-sm: clamp(0.8rem, 0.73vw, 0.875rem);
  /* 12.8 → 14px */
  --fs-nav: clamp(1rem, 1.5vw, 1.58rem);
  /* 16 → 18px — desktop nav links */
}

/* ---- Container (consistent section width across all pages) ---- */
.container {
  width: calc(100% - var(--container-margin));
  max-width: 1920px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--bg-dark);
  color: var(--white);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===================== PRELOADER ===================== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-dark);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-ring {
  position: absolute;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid rgba(223, 0, 25, 0.18);
  border-top-color: var(--purple-vivid);
  animation: preloaderSpin 0.9s linear infinite;
}

.preloader-logo {
  position: relative;
  max-height: 36px;
  width: auto;
  object-fit: contain;
  animation: preloaderPulse 1.4s ease-in-out infinite;
}

@keyframes preloaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes preloaderPulse {

  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@media (max-width: 560px) {
  .preloader-ring {
    width: 72px;
    height: 72px;
  }

  .preloader-logo {
    max-height: 28px;
  }
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-roboto-flex);
}

/* ============================================================
   GLOBAL TYPOGRAPHY SCALE
   h1–h3  → Roboto Flex
   h4–h6  → Google Sans
   p       → DM Sans
   ============================================================ */

h1,
h2,
h3 {
  font-family: var(--font-roboto-flex);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 1rem;
}

h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--white);
  margin-bottom: 0.75rem;
}

p {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* ── Fluid type scale — all values driven by CSS vars in :root ── */
h1 {
  font-size: var(--fs-h1);
  margin-bottom: 1em;
  line-height: 1.1;
}

h2 {
  font-size: var(--fs-h2);
  margin-bottom: 0.75em;
  line-height: 1.15;
}

h3 {
  font-size: var(--fs-h3);
  margin-bottom: 0.65em;
  line-height: 1.2;
}

h4 {
  font-size: var(--fs-h4);
  margin-bottom: 0.6em;
  line-height: 1.25;
}

h5 {
  font-size: var(--fs-h5);
  margin-bottom: 0.5em;
  line-height: 1.3;
}

h6 {
  font-size: var(--fs-h6);
  margin-bottom: 0.5em;
  line-height: 1.35;
}

p {
  font-size: var(--fs-body);
  line-height: 1.75;
}

img,
svg {
  display: block;
}

/* ============================================================
   NAVBAR WRAPPER
   ============================================================ */
.navbar-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  background: transparent;
  transition: transform 0.3s ease, background 0.4s ease;
}

.navbar-wrapper.is-scrolled {
  background: #000000;
}

.navbar-wrapper.is-scrolled .navbar {
  margin-top: 0;
}

.navbar-wrapper.nav-hidden {
  transform: translateY(-100%);
}

.navbar {
  width: calc(100% - 10%);
  max-width: 1920px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 40px 0;
  margin-top: 6px;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  gap: 0;
  box-shadow: none;
}

/* ---- Logo ---- */
.navbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 48px;
  height: var(--navbar-h);
  padding: 10px 0;
  outline: none;
}

.logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}


/* ---- Nav Links ---- */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
  position: relative;
}

.nav-link {
  font-family: var(--font-roboto-flex);
  font-size: 21px;
  font-weight: 500;
  color: #FFFFFF;
  padding: 8px 13px;
  border-radius: 50px;
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-weight: bold;
  outline: none;
}

.nav-link-btn {
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
}

@media(max-width: 1499px) {

  .nav-link,
  .cta-btn {
    font-size: 17px !important;
  }
}

@media(max-width: 1200px) {

  .nav-link,
  .cta-btn {
    font-size: 15px !important;
  }
}

.nav-link.active {
  color: var(--white);
  background: rgba(223, 0, 25, 0.1);
}

.has-dropdown.open .nav-link-btn {
  color: #DF0019;
}

.chevron {
  transition: transform var(--transition);
  flex-shrink: 0;
}

.has-dropdown.open .chevron {
  transform: rotate(180deg);
}

/* ---- Navbar Right ---- */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: 12px;
}

@media (min-width: 1101px) {
  .navbar-right {
    padding-left: 24px;
  }
}

/* CTA Button */
.cta-btn {
  position: relative;
  font-family: var(--font-roboto-flex);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  padding: 14px 20px;
  white-space: nowrap;
  border-radius: 25px;
  border: 2px solid transparent;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(var(--bg-dark), var(--bg-dark)),
    linear-gradient(90deg, var(--light-theme-red), var(--purple-vivid), #ff5d74, var(--purple-vivid), var(--light-theme-red));
  background-size: 100% 100%, 300% 100%;
  background-position: 0 0, 0% 0;
  transition: transform var(--transition), box-shadow var(--transition), animation-duration var(--transition);
  animation: cta-border-flow 3s linear infinite;
}

@keyframes cta-border-flow {
  to {
    background-position: 0 0, -300% 0;
  }
}

.cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(223, 0, 25, 0.45);
  animation-duration: 1.1s;
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  width: 38px;
  height: 38px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid rgba(223, 0, 25, 0.2);
  flex-shrink: 0;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MEGA DROPDOWN (Our Expertise)
   ============================================================ */
.has-dropdown {
  position: relative;
}

.mega-dropdown,
.simple-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 500;
}

.has-dropdown.open .mega-dropdown,
.has-dropdown.open .simple-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(0);
}

/* Mega dropdown — anchored to navbar center */
.mega-dropdown {
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  /* Wide enough that the longest service description
     ("Insights-driven business intelligence") fits on one line
     at the current .service-desc max font-size (1.2rem), without
     touching the fixed .mega-sidebar (160px) / .mega-promo (220px) widths —
     all the extra width flows into the center 1fr column. */
  width: clamp(1220px, 60vw, 1380px);
  max-width: 92vw;
  background: var(--bg-dropdown);
  /* border: 1px solid var(--bg-dropdown-border); */
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(223, 0, 25, 0.08) inset;
}

.has-dropdown.open .mega-dropdown {
  transform: translateX(-50%) translateY(0);
}

/* expertiseItem uses static so mega-dropdown centers against .nav-links */
#expertiseItem {
  position: static;
}

#expertiseDropdown {
  left: 50%;
  transform: translateX(-50%) translateY(8px);
}

.has-dropdown#expertiseItem.open #expertiseDropdown {
  transform: translateX(-50%) translateY(0);
}

.mega-inner {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 250px;
  min-height: 220px;
}



/* Left sidebar */
.mega-sidebar {
  background: #101010;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid rgba(223, 0, 25, 0.1);
}

.sidebar-tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: 0;
  text-align: left;
  gap: 4px;
  border-left: 3px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}

.sidebar-tab:hover,
.sidebar-tab.active {
  background: var(--bg-sidebar-active);
  border-left-color: var(--purple-vivid);
}

.tab-title {
  font-family: var(--font-subheading);
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--white);
}

.sidebar-tab:not(.active) .tab-title {
  color: var(--text-muted);
}

.tab-sub {
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 0.81vw, 0.95rem);
  color: white;
}

/* Center grid */
.mega-grid {
  padding: 20px 0px 24px;
  background-color: #101010;
}

.mega-grid.hidden {
  display: none;
}

.grid-label {
  font-family: var(--font-subheading);
  font-size: clamp(0.75rem, 0.73vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.8px;
  color: #BDBDBD;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

/* Service item with gradient hover */
.service-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px;
  border-radius: 8px;
  transition: background var(--transition), border-color var(--transition);
  position: relative;
  cursor: pointer;
  /* border-left: 2px solid transparent; */
  min-width: 0;
}

/* Deep purple gradient bg — matches the image */
.service-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at left center,
      rgba(223, 0, 25, 0.29) 0%,
      rgba(223, 0, 25, 0.18) 35%,
      rgba(223, 0, 25, 0.08) 65%,
      transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.service-item:hover::before,
.service-item.active::before {
  opacity: 1;
}

.service-item:hover,
.service-item.active {
  background: transparent;
}

.service-name {
  font-family: var(--font-subheading);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--white);
  transition: color var(--transition);
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-item.active .service-name,
.service-item:hover .service-name {
  color: var(--white);
}

.service-desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  z-index: 1;
  transition: color var(--transition);
  white-space: normal;
  line-height: 1.3;
}

.service-item:hover .service-desc,
.service-item.active .service-desc {
  color: rgba(255, 255, 255, 1);
}

/* Right promo panel */
.mega-promo {
  background: #101010;
  border-left: 1px solid rgba(223, 0, 25, 0.1);
  padding: 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.promo-image {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: #101010;
  border: 1px solid rgba(223, 0, 25, 0.15);
  position: relative;
  flex-shrink: 0;
}

.promo-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.promo-glow {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
}

.promo-icon {
  position: relative;
  z-index: 1;
}

.promo-label {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--font-subheading);
  font-size: clamp(0.62rem, 0.6vw, 0.72rem);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  border: 1px solid rgba(223, 0, 25, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
}

.promo-service-title {
  font-family: var(--font-subheading);
  font-size: clamp(0.95rem, 0.92vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.3px;
}

.promo-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1vw, 1.2rem);
  color: #BDBDBD;
  line-height: 1.55;
}

.promo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subheading);
  font-size: clamp(0.82rem, 0.77vw, 0.92rem);
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(135deg, var(--purple-vivid), var(--purple-btn));
  padding: 10px 12px;
  border-radius: 10px;
  transition: opacity var(--transition), transform var(--transition);
  align-self: flex-start;
  box-shadow: 0 4px 16px rgba(223, 0, 25, 0.3);
}

.promo-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Narrower desktop widths (1100–1500px): fall back to the original,
   more compact mega menu sizing so the dropdown doesn't crowd the viewport. */
@media (min-width: 1100px) and (max-width: 1499px) {
  .mega-dropdown {
    width: 940px
  }

  .mega-inner {
    grid-template-columns: 150px minmax(0, 1fr) 220px;
    min-height: 200px;
  }

  .sidebar-tab {
    padding: 12px;
  }

  .tab-sub {
    font-size: 11px;
  }

  .service-item {
    padding: 7px 9px;
  }

  .service-name {
    font-size: 15px;
  }

  .service-desc {
    font-size: 14px;
  }

  .promo-text {
    font-size: 14px;
  }


}

/* Promo panel fade transition */
.mega-promo {
  transition: opacity 0.2s ease;
}

/* .mega-promo.fading {
  opacity: 0;
} */

/* ============================================================
   SIMPLE DROPDOWN (Our Company / Insights)
   ============================================================ */
.simple-dropdown {
  min-width: 240px;
  background: #101010;
  /* border: 1px solid var(--bg-dropdown-border); */
  border-radius: 10px;
  /* padding: 8px 0px; */
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(223, 0, 25, 0.06) inset;
  overflow: hidden;

}

#companyItem {
  position: relative;
}

#companyDropdown {
  left: 0;
}

#insightsItem {
  position: relative;
}

#insightsDropdown {
  left: 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 0px;
  transition: background var(--transition), border-color var(--transition);
  position: relative;
  cursor: pointer;
  border-left: 2px solid transparent;
}

.dropdown-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 0;
  background: radial-gradient(circle at left center, rgba(223, 0, 25, 0.29) 0%, rgba(223, 0, 25, 0.18) 35%, rgba(223, 0, 25, 0.08) 65%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
}

.dropdown-item:first-child,
.dropdown-item:first-child::before {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.dropdown-item:last-child,
.dropdown-item:last-child::before {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.dropdown-item:hover::before {
  opacity: 1;
}

.dropdown-item:hover {
  background: transparent;
}

/* Ensure icon and text sit above the ::before layer */
.di-icon,
.di-text {
  position: relative;
  z-index: 1;
}

.di-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(223, 0, 25, 0.1);
  color: #DF0019;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dropdown-item:hover .di-icon {
  background: #101010;
  color: #DDA6FF;
  border: 1px solid rgba(223, 0, 25, 0.25);
  box-shadow: 0 0 12px rgba(223, 0, 25, 0.2);
}

.di-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.di-title {
  font-family: var(--font-subheading);
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
}

.di-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: #BDBDBD;
}

/* ============================================================
   MOBILE MENU — 50% width offcanvas from right
   ============================================================ */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  min-width: 280px;
  max-width: 400px;
  z-index: 2000;
  background: #101010;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  border-left: 1px solid rgba(223, 0, 25, 0.15);
}

.mobile-menu:not([hidden]) {
  display: block;
}

.mobile-menu.open {
  transform: translateX(0);
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1999;
  backdrop-filter: blur(3px);
}

.mobile-overlay.show {
  display: block;
}

.mobile-menu-inner {
  padding: 16px 18px 24px;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(223, 0, 25, 0.12);
}

.mob-logo {
  height: 36px;
  padding: 0;
  margin: 0;
}

.mob-logo .logo-img {
  max-height: 32px;
}

.mobile-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(223, 0, 25, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(223, 0, 25, 0.15);
  flex-shrink: 0;
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mob-link {
  font-family: var(--font-subheading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 12px 8px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
  border-bottom: 1px solid rgba(223, 0, 25, 0.07);
}

.mob-link:hover,
.mob-link.active {
  color: var(--white);
  background: rgba(223, 0, 25, 0.06);
}

.mob-accordion {
  border-bottom: 1px solid rgba(223, 0, 25, 0.07);
}

.mob-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 8px;
  font-family: var(--font-roboto-flex);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}

.mob-acc-trigger:hover,
.mob-acc-trigger[aria-expanded="true"] {
  color: var(--white);
  background: rgba(223, 0, 25, 0.06);
}

.mob-acc-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.mob-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  opacity: 0;
  padding: 0 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mob-acc-panel.open {
  max-height: 1400px;
  opacity: 1;
  padding-bottom: 10px;
}

.mob-section-label {
  font-family: var(--font-subheading);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--primary-purple);
  opacity: 0.8;
  padding: 8px 8px 4px;
}

.mob-sub-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: 8px;
  transition: color var(--transition), background var(--transition);
}

.mob-sub-link:hover {
  color: var(--white);
  background: rgba(223, 0, 25, 0.08);
}

.mob-cta {
  display: block;
  text-align: center;
  font-family: var(--font-roboto-flex);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--white);
  background: linear-gradient(135deg, var(--purple-vivid), var(--purple-btn));
  padding: 13px 20px;
  border-radius: 10px;
  margin-top: 16px;
  box-shadow: 0 4px 20px rgba(223, 0, 25, 0.35);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  background-color: #000;
  overflow: hidden;
}

/* Full-bleed background image via <img> tag */
.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  pointer-events: none;
  user-select: none;
}

.hero-container {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;

}

.hero-content {
  max-width: 60%;
  min-width: 0;
  animation: heroFadeUp 0.75s ease forwards;
  margin-top: 50px;
}

@media (max-width: 992px) {
  .hero-content {
    max-width: 70%;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  color: var(--white);
  font-weight: 600;
  margin-bottom: 24px;
  letter-spacing: 0.1rem;
}

.hero-desc {
  font-family: var(--font-body);
  font-size: 19px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 85%;
}

@media(min-width: 1300px) {
  .hero-desc {
    font-size: 19px !important;
  }
}

@media(min-width: 1600px) {
  .hero-desc {
    font-size: 24px !important;
  }
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h6);
  font-weight: 500;
  color: var(--white);
  background-color: var(--primary-purple);
  padding: 13px 26px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition);
}

.hero-btn-primary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--white);
}

.hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h6);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  padding: 13px 26px;
  border-radius: 2px;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.hero-btn-secondary:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   CLIENTS MARQUEE SECTION
   ============================================================ */
.clients-section {
  background: white;
  /* padding: 12px 0; */
  overflow: hidden;
  position: relative;
}



.clients-section::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-dark) 0%, transparent 100%);
}

.clients-section::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-dark) 0%, transparent 100%);
}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 34s linear infinite;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-set {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 0 30px;
  flex-shrink: 0;
}

.client-logo {
  height: 90px;
  width: auto;
  object-fit: contain;
  /* opacity: 0.75; */
  flex-shrink: 0;
  transition: opacity var(--transition);
}

/* .client-logo:hover {
  opacity: 1;
} */

@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

h1,
h2 {
  font-family: var(--font-roboto-flex);
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .nav-links {
    display: none !important;
  }

  .hamburger {
    display: flex;
  }

  /* Hamburger at the far right end */
  .navbar-right {
    margin-left: auto;
    gap: 10px;
  }

  .cta-btn {
    display: none;
  }

  /* .navbar {
    padding: 0 14px 0 16px;
  } */

  /* Mobile menu — 50% width */
  .mobile-menu {
    width: 50%;
    min-width: 280px;
    max-width: 400px;
  }
}

/* Hero — mobile: drop the bg image, use solid black instead */
@media (max-width: 768px) {
  .hero-bg-img {
    display: none;
  }

  .hero {
    background-color: #000000;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-actions {
    justify-content: center;
  }
}

/* Hero — tablet */
@media (max-width: 860px) {
  .hero-bg-img {
    object-position: 75% center;
  }

  .hero-container {
    padding: calc(var(--navbar-h) + 24px) 32px 56px;
  }


}

/* Hero + mobile menu — small phones */
@media (max-width: 600px) {
  .hero-bg-img {
    object-position: 80% center;
  }

  .hero-container {
    padding: calc(var(--navbar-h) + 12px) 24px 16px;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-desc {
    max-width: 100%;
  }

  .hero-actions {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .mobile-menu {
    width: 80%;
    min-width: 260px;
  }
}

/* ============================================================
   COMPANY OVERVIEW SECTION
   ============================================================ */
.overview-section {
  background-color: white;
  padding: 60px 0;
}

.overview-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* Center column — centered label / heading / para / buttons */
.overview-top {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.overview-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  position: relative;
}

.overview-label::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 3px;
  background: var(--purple-vivid);
  border-radius: 2px;
}

.overview-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}


.overview-section .overview-label {
  color: black;
}

.overview-desc {
  font-size: 16.5px;
  color: #262626;
  line-height: 1.78;
  margin-bottom: 36px;
  margin-left: auto;
  margin-right: auto;
  max-width: 80%;
}

.overview-section .overview-desc {
  text-align: justify;
}

.overview-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.overview-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h6);
  font-weight: 500;
  color: white;
  background: var(--purple-btn);
  padding: 13px 16px;
  border-radius: 2px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background var(--transition), opacity var(--transition);
}

.overview-btn-primary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--purple-vivid);
  color: var(--purple-vivid);
}

.overview-btn-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h6);
  font-weight: 500;
  color: gray;
  border: 1.5px solid gray;
  padding: 13px 16px;
  white-space: nowrap;
  border-radius: 2px;
  transition: border-color var(--transition), background var(--transition);
}

.overview-btn-secondary:hover {
  border-color: var(--purple-vivid);
  color: var(--purple-vivid);
}

/* 3-column grid */
.overview-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Left / right stat card columns */
.overview-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stat-card {
  background: #FCF1F1;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 28px 24px;
  flex: 1;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.stat-card:hover {
  border-color: rgba(223, 0, 25, 0.32);
  box-shadow: 0 8px 28px rgba(223, 0, 25, 0.13);
  transform: translateY(-5px);
}

.stat-icon {
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  margin-bottom: 18px;
}

.stat-line {
  font-size: var(--fs-h6);
  font-weight: 400;
  color: black;
  line-height: 1.55;
}

.stat-line strong {
  font-weight: 700;
  color: black;
}

@media(min-width:1500px) {
  .stat-line {
    font-size: 20px;
  }
}

/* ============================================================
   OVERVIEW — ENTRANCE ANIMATIONS
   ============================================================ */

/* Hidden states before section enters view */
.overview-section .overview-top {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.72s ease, transform 0.72s ease;
}

/* Grow the label underline from 0 */
.overview-section .overview-label::after {
  width: 0;
  transition: width 0.55s ease 0.42s;
}

/* Left stat column — slides from left */
.overview-section .overview-grid>div:nth-child(1) {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity 0.65s ease 0.22s, transform 0.65s ease 0.22s;
}

/* Right stat column — slides from right */
.overview-section .overview-grid>div:nth-child(3) {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity 0.65s ease 0.22s, transform 0.65s ease 0.22s;
}

/* ---- Visible state (added by IntersectionObserver) ---- */
.overview-section.is-visible .overview-top {
  opacity: 1;
  transform: translateY(0);
}

.overview-section.is-visible .overview-label::after {
  width: 34px;
}

.overview-section.is-visible .overview-grid>div:nth-child(1),
.overview-section.is-visible .overview-grid>div:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
}

/* Icon pulse — glow follows the icon's own shape, starts after cards land */
@keyframes statIconGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 0 rgba(223, 0, 25, 0.55));
  }

  55% {
    filter: drop-shadow(0 0 7px rgba(223, 0, 25, 0.85));
  }
}

.overview-section.is-visible .stat-icon {
  animation: statIconGlow 2.6s ease-in-out 1s infinite;
}

/* ---- Overview responsive ---- */


@media (max-width: 1024px) {
  .overview-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .overview-top {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 40px;
  }
}

@media (max-width: 640px) {
  .overview-section {
    padding: 64px 0;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .overview-top {
    grid-column: auto;
    margin-bottom: 32px;
  }

  .overview-actions {
    flex-direction: column;
    gap: 20px;
  }

  .overview-btn-primary,
  .overview-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}



/* ============================================================
   AI INNOVATION SECTION
   ============================================================ */
.ai-section {
  position: relative;
  background-color: #FCF1F1;
  padding: 60px 0;
}

.ai-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

/* ── Left: sticky text column — stays pinned in view while the
   full card list scrolls past it on the right. ── */
.ai-content {
  flex: 0 0 60%;
  position: sticky;
  top: 80px;
  align-self: flex-start;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-section.is-visible .ai-content {
  opacity: 1;
  transform: translateX(0);
}

/* Left-align + recolor the reused overview classes for the white background */
.ai-content .overview-label {
  text-align: left;
  color: black;
}

.ai-content .overview-label::after {
  left: 0;
  transform: none;
}

.ai-content .overview-title {
  text-align: left;
  color: #0b0b10;
  font-family: var(--font-roboto-flex);
  font-weight: 600;
  font-size: var(--fs-h2) !important;
}

.ai-content .overview-desc {
  margin: 0 0 32px;
  max-width: 100%;
  text-align: left;
  font-size: 16px;
  color: black;
}

.ai-actions {
  justify-content: flex-start;
}

.ai-content .overview-btn-primary {
  background: var(--light-theme-red);
  border-color: var(--light-theme-red);
  color: #ffffff;
}

.ai-content .overview-btn-primary:hover {
  background: #b0000f;
  border-color: #b0000f;
  color: #ffffff;
}

/* ── Right: capability cards — all rendered at once. The page scrolls
   normally; .ai-content (above) stays sticky while these scroll past. ── */
.ai-cards-viewport {
  --ai-card-h: 190px;
  --ai-card-gap: 20px;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.75s 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

.ai-section.is-visible .ai-cards-viewport {
  opacity: 1;
  transform: translateX(0);
}

.ai-cards-track {
  display: flex;
  flex-direction: column;
  gap: var(--ai-card-gap);
}

.ai-card {
  position: relative;
  height: var(--ai-card-h);
  overflow: hidden;
  background: transparent;
  border-radius: 6px;
  padding: 46px 26px 22px;
  transition: background 0.35s ease;
}

/* Inset rounded accent bar — sits inside the card, not flush on its edge */
.ai-card::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 3px;
  background: rgba(11, 11, 16, 0.15);
  transition: background 0.35s ease;
}

.ai-card:hover::before {
  background: #ffffff;
}

.ai-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.ai-card-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--light-theme-red);
  transition: color 0.3s ease;
}

.ai-card-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-subheading);
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b0b10;
  margin: 0;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-card-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: black;
  margin: 0;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

@media(min-width:1500px) {
  .ai-card-desc {
    font-size: 22px;
  }
}

.ai-card-arrow {
  display: block;
  width: fit-content;
  margin: 16px 0 0 auto;
  font-size: 0.9rem;
  color: rgba(11, 11, 16, 0.35);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* ── Hover: dark-at-the-bottom red gradient with white text ── */
.ai-card:hover {
  background: linear-gradient(180deg, var(--purple-vivid) 0%, #4a0009 100%);
}

.ai-card:hover .ai-card-title,
.ai-card:hover .ai-card-desc {
  color: #ffffff;
}

.ai-card:hover .ai-card-arrow {
  color: #ffffff;
  transform: translateX(3px);
}

.ai-card:hover .ai-card-icon {
  color: #ffffff;
}

/* ══ 1024px: stack column so cards sit below the static text ═══ */
@media (max-width: 1024px) {
  .ai-inner {
    flex-direction: column;
    padding: 0;
    gap: 40px;
  }

  .ai-content {
    flex: none;
    width: 100%;
    max-width: 100%;
    position: static;
  }

  .ai-cards-viewport {
    width: 100%;
  }
}

/* ══ 650px ═══════════ */
@media (max-width: 650px) {
  .ai-section {
    padding: 64px 0;
  }

  .ai-inner {
    gap: 28px;
  }

  .ai-card {
    padding: 42px 22px 20px;
  }

  .ai-card::before {
    left: 22px;
    right: 22px;
  }

  .ai-cards-viewport {
    --ai-card-h: 184px;
  }
}

/* ══ 450px ═══════════ */
@media (max-width: 450px) {
  .ai-card-title {
    font-size: 0.95rem;
  }
}



/* ============================================================
   AI CAPABILITIES — dark variant for services / industries pages
   Namespaced under .aic-* (distinct from .ai-* on the homepage)
   so the two designs never collide in the shared stylesheet.
   ============================================================ */
.aic-section {
  position: relative;
  background-color: #05070d;
  background-image: linear-gradient(180deg, rgba(2, 3, 8, 0.72) 0%, rgba(2, 3, 8, 0.55) 45%, rgba(2, 3, 8, 0.82) 100%), url('../images/banner/ai-capabilities-services.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 90px 0;
}

.aic-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 64px;
}

/* ── Left: sticky text column — stays pinned in view while the
   full card list scrolls past it on the right. ── */
.aic-content {
  flex: 0 0 60%;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.aic-section.is-visible .aic-content {
  opacity: 1;
  transform: translateX(0);
}

.aic-content .overview-label {
  text-align: left;
}

.aic-content .overview-label::after {
  left: 0;
  transform: none;
}

.aic-content .overview-title {
  text-align: left;
  color: white;
}

.aic-content .overview-desc {
  margin: 0 0 32px;
  max-width: 100%;
  text-align: left;
  font-size: 16px;
  color: white;
}

.aic-content .overview-btn-primary {
  background-color: var(--purple-vivid);
  color: white;
}

.aic-content .overview-btn-primary:hover {
  background-color: transparent;
}

.aic-actions {
  justify-content: flex-start;
}

/* ── Right: capability cards — all rendered at once. The page scrolls
   normally; .aic-content (above) stays sticky while these scroll past. ── */
.aic-cards-viewport {
  --aic-card-h: 160px;
  --aic-card-gap: 20px;
  flex: 1;
  min-width: 0;
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.75s 0.14s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.75s 0.14s cubic-bezier(0.22, 1, 0.36, 1);
}

.aic-section.is-visible .aic-cards-viewport {
  opacity: 1;
  transform: translateX(0);
}

.aic-cards-track {
  display: flex;
  flex-direction: column;
  gap: var(--aic-card-gap);
}

.aic-card {
  position: relative;
  height: var(--aic-card-h);
  overflow: hidden;
  background: transparent;
  border-radius: 6px;
  padding: 46px 26px 22px;
}

/* Inset rounded accent bar — gray by default, red on hover */
.aic-card::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.35s ease;
}

.aic-card:hover::before {
  background: var(--purple-vivid);
}

.aic-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.aic-card-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}

.aic-card-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-subheading);
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.aic-card-desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  /* -webkit-line-clamp: 2;
  line-clamp: 2; */
  overflow: hidden;
}

@media(min-width:1500px) {
  .aic-card-desc {
    font-size: 16px;
  }
}

/* .aic-card-arrow {
  display: block;
  width: fit-content;
  margin: 16px 0 0 auto;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease, transform 0.3s ease;
}

.aic-card:hover .aic-card-arrow {
  color: var(--purple-vivid);
  transform: translateX(3px);
} */

/* ══ 1024px: stack column so cards sit below the static text ═══ */
@media (max-width: 1024px) {
  .aic-inner {
    flex-direction: column;
    gap: 40px;
  }

  .aic-content {
    flex: none;
    width: 100%;
    max-width: 100%;
    position: static;
  }

  .aic-cards-viewport {
    width: 100%;
  }
}

/* ══ 650px ═══════════ */
@media (max-width: 650px) {
  .aic-section {
    padding: 64px 0;
  }

  .aic-inner {
    gap: 28px;
  }

  .aic-card {
    padding: 42px 22px 20px;
  }

  .aic-card::before {
    left: 22px;
    right: 22px;
  }

  .aic-cards-viewport {
    --aic-card-h: 184px;
  }
}

/* ══ 450px ═══════════ */
@media (max-width: 450px) {
  .aic-card-title {
    font-size: 0.95rem;
  }
}

/* ── Section wrapper ── */
.fs-section {
  background-color: #100F0F;
  padding: 90px 0;
  overflow: hidden;
}

/* ── Entrance animation — toggled by IntersectionObserver ── */
.fs-section .fs-header,
.fs-section .fs-slider-outer {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fs-section .fs-slider-outer {
  transition-delay: 0.12s;
}

.fs-section.is-visible .fs-header,
.fs-section.is-visible .fs-slider-outer {
  opacity: 1;
  transform: translateY(0);
}

/* ── Inner container ── */
.fs-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ============================================================
   SECTION HEADER
============================================================ */
.fs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}

.fs-header-left {
  /* max-width: 800px; */
}

/* Dedicated label (not .overview-label) — underline starts at the left edge */
.fs-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: white;
  letter-spacing: 0.3px;
  margin-bottom: 20px;
  position: relative;
}

.fs-label::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--light-theme-red);
  border-radius: 2px;
}

/* Heading — Roboto Flex, left-aligned large */
.fs-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: white;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  margin-top: 0;
}

.fs-title-accent {
  color: var(--purple-vivid);
}

/* ── Header-right: slider nav ── */
.fs-header-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* ── Custom slider nav buttons ── */
.fs-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.fs-btn {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: none;
  background: #ece7e7;
  color: #0b0b10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.25s ease, color 0.25s ease;
}

.fs-btn--fill {
  background: var(--purple-btn);
  color: #ffffff;
}

.fs-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Slider outer ── */
.fs-slider-outer {
  padding: 0;
}

.fs-slider-outer .slick-list {
  overflow: visible;
}

.fs-slider-outer .slick-track {
  display: flex;
  align-items: stretch;
}

.fs-slider-outer .slick-slide {
  height: auto !important;
  display: flex !important;
}

.fs-slider-outer .slick-slide>div {
  display: flex;
  width: 100%;
}

.fs-slide {
  display: flex;
  flex: 1;
  padding: 0 8px;
}

.fs-card {
  background: #171717;
  border: 1px solid rgba(11, 11, 16, 0.1);
  border-radius: 14px;
  padding: 26px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover / active — card fills solid red */
.fs-card:hover {
  background: var(--purple-btn);
  border-color: var(--purple-vivid);
  box-shadow: 0 8px 32px rgba(223, 0, 25, 0.24);
}

/* ── Card header: icon + title ── */
.fs-card-header {
  /* display: flex;
  align-items: center;
  gap: 12px; */
}

/* Icon box — red by default, inverts to white on hover */
.fs-icon-box {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--purple-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.fs-card:hover .fs-icon-box {
  background-color: #ffffff;
}

/* Inline SVG icon — color flips via currentColor */
.fs-icon-svg {
  width: 22px;
  height: 22px;
  color: #ffffff;
  transition: color var(--transition);
}

.fs-card:hover .fs-icon-svg {
  color: var(--light-theme-red);
}

/* Hover arrow next to card title */
.fs-card-arrow {
  font-size: 0.78em;
  margin-left: 6px;
  color: var(--white);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.fs-card:hover .fs-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Card title — Google Sans (h3 → font-heading per global rule) */
.fs-card-title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  color: #d3d3d3;
  line-height: 1.35;
  margin: 0;
  /* Reserve 2 lines so the icon/heading/list stay aligned across cards
     even when a title wraps at narrower breakpoints. */
  min-height: 2.7em;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

.fs-card:hover .fs-card-title {
  color: #ffffff;
}

/* ── Checklist ── */
.fs-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.fs-list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 450;
  color: #d3d3d3;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
  transition: color var(--transition);
}

@media(min-width:1500px) {
  .fs-list li {
    font-size: 20px;
  }
}

/* Chevron bullet — replaces the old checkmark */
.fs-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--purple-vivid);
  border-right: 2px solid var(--purple-vivid);
  transform: rotate(45deg);
  transition: border-color var(--transition);
}

.fs-card:hover .fs-list li {
  color: white;
}

.fs-card:hover .fs-list li::before {
  border-color: #ffffff;
}

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 800px) {
  .fs-section {
    padding: 64px 0;
  }

  .fs-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 40px;
  }

  .fs-header-left {
    max-width: 100%;
  }
}

@media (max-width: 520px) {
  .fs-section {
    padding: 56px 0 64px;
  }

  .fs-card {
    padding: 22px 18px 24px;
  }
}

/* ============================================================
   INSIGHTS SECTION
   ============================================================ */
.insights-section {
  background-color: #FCF1F1;
  padding: 60px 0;
  overflow: hidden;
}

.insights-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ── Header ── */
.insights-header {
  text-align: center;
  margin-bottom: 56px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.insights-section.is-visible .insights-header {
  opacity: 1;
  transform: translateY(0);
}

/* Label on the light background */
.insights-header .overview-label {
  color: black;
}

.insights-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #0b0b10;
  line-height: 1.15;
  margin-bottom: 20px;
}

.insights-desc {
  font-size: 16px;
  color: #262626;
  line-height: 1.75;
  max-width: 60%;
  margin: 0 auto;
  text-align: justify;
}

@media(min-width:1500px) {
  .insights-desc {
    font-size: 22px;

  }
}

/* ── Card grid ── */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Card ── */
.insights-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.insights-section.is-visible .insights-card:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

.insights-section.is-visible .insights-card:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}

.insights-section.is-visible .insights-card:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.32s;
}

.insights-section.is-visible .insights-card:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.42s;
}

/* Image fills card, zooms on hover */
.insights-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.insights-card:hover .insights-card-img {
  transform: scale(1.07);
}

/* Gradient overlay — darkens bottom so text is readable */
.insights-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.42) 45%,
      rgba(0, 0, 0, 0.84) 100%);
  transition: background 0.35s ease;
}

.insights-card:hover .insights-card-overlay {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.22) 0%,
      rgba(0, 0, 0, 0.55) 45%,
      rgba(0, 0, 0, 0.92) 100%);
}

/* Text content sits above overlay */
.insights-card-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

/* Pill tag (top-left) */
.insights-card-tag {
  display: inline-block;
  font-family: var(--font-subheading);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 50px;
  width: fit-content;
}

.insights-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insights-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
}

/* "Learn More" link — slides up on hover */
.insights-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subheading);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease;
}

.insights-card:hover .insights-card-link {
  opacity: 1;
  transform: translateY(0);
}

.insights-card-link .fa-arrow-right {
  font-size: 0.72em;
  transition: transform 0.2s ease;
}

.insights-card-link:hover .fa-arrow-right {
  transform: translateX(3px);
}

/* ══ 1024px ════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .insights-section {
    padding: 72px 0 80px;
  }

  .insights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .insights-card {
    aspect-ratio: 4 / 3;
  }
}

/* ══ 640px ═════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .insights-section {
    padding: 56px 0 64px;
  }

  .insights-header {
    margin-bottom: 36px;
  }

  .insights-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .insights-card {
    aspect-ratio: 16 / 9;
  }

  .insights-card-content {
    padding: 14px;
  }

  .insights-card-tag {
    font-size: 0.6rem;
    padding: 3px 9px;
  }

  .insights-card-link {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   FOCUS / ACCESSIBILITY — matches existing pattern
============================================================ */
.fs-card:focus-visible {
  outline: 2px solid var(--purple-vivid);
  outline-offset: 2px;
}






/* ============================================================
   TESTIMONIALS SECTION
   ============================================================ */
.tm-section {
  background: #100F0F;
  padding: 50px 0;
  overflow: hidden;
}

/* Constrained-width wrapper */
.tm-container {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* Header */
.tm-header {
  text-align: center;
  margin-bottom: 56px;
}


.tm-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
  margin-top: 8px;
}

.tm-desc {
  font-size: 16px;
  color: var(--white);
  max-width: 60%;
  text-align: justify;
  margin: 0 auto;
  line-height: 1.75;
}

/* ---- Full-bleed slider ---- */
.tm-slider-wrap {
  width: 100%;
  overflow: hidden;
  padding: 40px 20px 0;
}

/* Allow icon to overflow upward out of the slick-list */
.tm-slider .slick-list {
  overflow: visible;
}

/* Equal-height cards via flex on slick track */
.tm-slider .slick-track {
  display: flex;
  align-items: stretch;
}

.tm-slider .slick-slide {
  height: auto;
  display: flex !important;
}

.tm-slider .slick-slide>div {
  display: flex;
  width: 100%;
}

/* Individual slide wrapper */
.tm-slide {
  padding: 0 10px;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

/* ---- Card ---- */
.tm-card {
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 46px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  position: relative;
  transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.tm-card:hover {
  border-color: rgba(223, 0, 25, 0.4);
  box-shadow: 0 12px 40px rgba(223, 0, 25, 0.18);
  transform: translateY(-6px);
}

/* Quote icon — half outside top-left of card */
.tm-quote-icon {
  position: absolute;
  top: -26px;
  left: 26px;
  width: 52px;
  height: 52px;
  background: #DF0019;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(223, 0, 25, 0.5);
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-card:hover .tm-quote-icon {
  transform: translateY(-4px) rotate(-8deg) scale(1.1);
  box-shadow: 0 10px 28px rgba(223, 0, 25, 0.65);
}

/* Stars */
.tm-stars {
  display: flex;
  gap: 2px;
  font-size: 1.1rem;
  color: #FFC107;
  letter-spacing: 2px;
  line-height: 1;
}

.tm-stars span {
  font-family: inherit;
  color: #FFC107;
}

/* Quote text */
.tm-text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: #FFFFFF;
  line-height: 1.75;
  flex: 1;
  text-align: justify;
}

/* Author footer */
.tm-author {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tm-name {
  font-family: var(--font-subheading);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  display: block;
}

.tm-role {
  font-family: var(--font-subheading);
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
}

/* ---- Nav Controls ---- */
.tm-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 44px;
  padding: 0 20px;
}

.tm-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.tm-btn--prev {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  color: var(--white);
}

.tm-btn--prev:hover {
  border-color: rgba(255, 255, 255, 0.75);
  transform: translateX(-2px);
}

.tm-btn--next {
  background: #DF0019;
  border: none;
  color: var(--white);
  box-shadow: 0 4px 20px rgba(223, 0, 25, 0.45);
}

.tm-btn--next:hover {
  background: var(--purple-btn);
  box-shadow: 0 6px 28px rgba(223, 0, 25, 0.6);
  transform: translateX(2px);
}

/* ============================================================
   TESTIMONIALS — ENTRANCE ANIMATIONS
   ============================================================ */

/* Hidden initial states */
.tm-section .tm-label {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.tm-section .tm-label::after {
  width: 0;
  transition: width 0.5s ease 0.5s;
}

.tm-section .tm-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.62s ease 0.12s, transform 0.62s ease 0.12s;
}

.tm-section .tm-desc {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.62s ease 0.22s, transform 0.62s ease 0.22s;
}

.tm-section .tm-slider-wrap {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.72s ease 0.3s, transform 0.72s ease 0.3s;
}

.tm-section .tm-controls {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease 0.5s, transform 0.55s ease 0.5s;
}

/* ---- Visible state (added by IntersectionObserver) ---- */
.tm-section.is-visible .tm-label,
.tm-section.is-visible .tm-title,
.tm-section.is-visible .tm-desc {
  opacity: 1;
  transform: translateY(0);
}

.tm-section.is-visible .tm-label::after {
  width: 32px;
}

.tm-section.is-visible .tm-slider-wrap {
  opacity: 1;
  transform: translateY(0);
}

.tm-section.is-visible .tm-controls {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Slide-change pop-fade for active cards ---- */
@keyframes tmCardPop {
  0% {
    opacity: 0.4;
    transform: translateY(14px);
  }

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

.tm-card--pop {
  animation: tmCardPop 0.44s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .tm-section {
    padding: 72px 0 60px;
  }

  .tm-header {
    margin-bottom: 40px;
  }

  .tm-slider-wrap {
    padding-top: 30px;
  }
}

@media (max-width: 768px) {
  .tm-section {
    padding: 60px 0 52px;
  }

  .tm-desc {
    font-size: 0.88rem;
  }

  .tm-slider-wrap {
    padding: 28px 12px 0;
  }

  .tm-slide {
    padding: 0 8px;
  }

  .tm-controls {
    margin-top: 32px;
  }
}

@media (max-width: 480px) {
  .tm-section {
    padding: 48px 0 44px;
  }

  .tm-header {
    margin-bottom: 28px;
  }

  .tm-slider-wrap {
    padding: 26px 8px 0;
  }

  .tm-slide {
    padding: 0 6px;
  }

  .tm-card {
    padding: 42px 20px 24px;
  }

  .tm-quote-icon {
    width: 44px;
    height: 44px;
    top: -22px;
    left: 20px;
  }

  .tm-controls {
    margin-top: 28px;
  }

  .tm-btn {
    width: 40px;
    height: 40px;
  }
}

@media(min-width: 1600px) {

  .overview-desc,
  .tm-desc {
    font-size: 22px !important;
  }
}

/* ============================================================
   FOCUS / ACCESSIBILITY
   ============================================================ */
/* .nav-link:focus-visible, */
.nav-link-btn:focus-visible,
.cta-btn:focus-visible,
.hamburger:focus-visible,
.sidebar-tab:focus-visible,
.service-item:focus-visible,
.dropdown-item:focus-visible,
.promo-btn:focus-visible {
  outline: 2px solid var(--purple-vivid);
  outline-offset: 2px;
}



/* ================================================================
   CALL TO ACTION WITH IMAGE
================================================================ */
/* .cta-with-img {
  padding: 38px 0;
}

.cta-with-img-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: #000000;
}

.cta-with-img-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-position: right center;
  display: block;
  pointer-events: none;
  user-select: none;
}

.cta-with-img-content {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 56px 52px;
}

.cta-with-img-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);
  font-weight: 600;
  color: #0D0D0D;
  line-height: 1.1;
  margin: 0 0 20px;
}

.cta-with-img-accent {
  color: var(--purple-vivid);
}

.cta-with-img-desc {
  font-size: 16.5px;
  font-weight: 480;
  color: black;
  line-height: 1.7;
  margin: 0 0 28px;
}

.cta-with-img-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-with-img-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-roboto-flex);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}

.cta-with-img-btn--primary {
  background: var(--purple-vivid);
  color: #ffffff;
}

.cta-with-img-btn--primary:hover {
  background: #5500cc;
}

.cta-with-img-btn--dark {
  background: #0D0D0D;
  color: #ffffff;
}

.cta-with-img-btn--dark:hover {
  background: #262626;
}

@media (max-width: 900px) {
  .cta-with-img-content {
    max-width: 100%;
    padding: 40px 32px;
  }
}

@media (max-width: 640px) {
  .cta-with-img-inner {
    min-height: 0;
    justify-content: flex-start;
    border-radius: 14px;
  }

  .cta-with-img-content {
    padding: 32px 20px;
  }

  .cta-with-img-actions {
    flex-direction: column;
  }

  .cta-with-img-btn {
    justify-content: center;
  }
} */

/* ================================================================
   CTA — INDEX PAGE (Why Global Businesses Choose KGS)
   Full-bleed light section, subtle grid-pattern background image,
   centered label + heading + description + two actions.
================================================================ */
.cta-index-section {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  padding: 60px 0;
}

.cta-index-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.cta-index-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.cta-index-inner .overview-label {
  color: #0b0b10;
}

.cta-index-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 700;
  color: #0b0b10;
  line-height: 1.15;
  margin: 14px 0 20px;
}

.cta-index-accent {
  color: var(--purple-vivid);
}

.cta-index-desc {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(11, 11, 16, 0.68);
  margin: 0 auto 32px;
  max-width: 620px;
  text-align: justify;
}

.cta-index-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cta-index-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-roboto-flex);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition);
}

.cta-index-btn--primary {
  background: var(--purple-vivid);
  color: #ffffff;
}

.cta-index-btn--primary:hover {
  background: #b0000f;
}

.cta-index-btn--dark {
  background: #0D0D0D;
  color: #ffffff;
}

.cta-index-btn--dark:hover {
  background: #262626;
}

@media (max-width: 640px) {
  .cta-index-section {
    padding: 64px 0;
  }

  .cta-index-actions {
    flex-direction: column;
  }

  .cta-index-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ================================================================
   FOOTER
================================================================ */
.site-footer {
  background: #0C0C0C;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 52px 0 0px;
}

.footer-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  background: #0C0C0C;
  border-radius: 20px;
}

/* ── 4-column grid ── */
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 48px 40px;
  margin-bottom: 30px;
  /* Scroll-reveal */
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.footer-grid.footer--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Brand column ── */
.footer-logo {
  display: inline-block;
  margin-bottom: 22px;
}

.footer-logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Address + contact details */
.footer-address {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.98vw, 1.3rem);
  color: rgba(255, 255, 255, 1);
  line-height: 1.65;
  margin: 0 0 20px;
  max-width: 300px;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-contact-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  color: var(--purple-vivid);
  font-size: 1rem;
}

.footer-contact-value {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 0.98vw, 1.3rem);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transition);
}

.footer-contact-value:hover {
  color: var(--purple-vivid);
}

.footer-contact-ext {
  font-size: 0.65em;
  color: rgba(255, 255, 255, 0.5);
}

.footer-stay {
  font-family: var(--font-heading);
  /* Google Sans */
  font-size: clamp(0.98rem, 0.9vw, 1.1rem);
  font-weight: 700;
  color: var(--white);
  margin: 0 0 8px;
}

.footer-stay-desc {
  font-family: var(--font-body);
  font-size: clamp(0.83rem, 0.76vw, 0.93rem);
  color: #FFFFFF;
  line-height: 1.65;
  margin: 0 0 18px;
}

/* Newsletter form */
.footer-form {
  display: flex;
  gap: 0;
  margin-bottom: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color var(--transition);
}

.footer-form:focus-within {
  border-color: rgba(223, 0, 25, 0.5);
  box-shadow: 0 0 0 2px rgba(223, 0, 25, 0.12);
}

.footer-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: none;
  outline: none;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--white);
  min-width: 0;
}

.footer-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.footer-submit {
  background: var(--white);
  border: none;
  padding: 10px 16px;
  font-family: var(--font-roboto-flex);
  font-size: 0.8rem;
  font-weight: 500;
  color: #0D0D0D;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.footer-submit:hover {
  background: #DF0019;
  color: var(--white);
}

.footer-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.footer-form-msg {
  font-size: 0.82rem;
  margin: 8px 0 0;
  min-height: 1.2em;
}

.footer-form-msg--ok {
  color: #4ade80;
}

.footer-form-msg--err {
  color: #f87171;
}

/* Socials */
.footer-col--brand .footer-socials {
  margin-top: 22px;
}

.footer-socials-label {
  font-family: var(--font-body);
  font-size: clamp(0.83rem, 0.76vw, 0.93rem);
  color: #FFFFFF;
  margin: 0 0 10px;
}

.footer-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  text-decoration: none;
  transition:
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    transform var(--transition);
}

.footer-social:hover {
  background: rgba(223, 0, 25, 0.2);
  border-color: rgba(223, 0, 25, 0.5);
  color: var(--white);
  transform: translateY(-3px);
}

/* ── Nav columns ── */
.footer-col-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 20px;
  letter-spacing: 0.2px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── FOOTER LINK ANIMATION ──────────────────────────────────────
   Technique: underline slides in from left on hover using
   a ::after pseudo-element that grows from width:0 → 100%.
   On mouse-out it shrinks right-to-left (background-position trick).
──────────────────────────────────────────────────────────────── */
.footer-link {
  font-family: var(--font-body);
  /* DM Sans */
  font-size: 0.9rem;
  color: #FFFFFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding-bottom: 2px;
  /* Color transition */
  transition: color 0.25s ease;
  /* Underline via background-image gradient trick — slides left→right in, right→left out */
  background-image: linear-gradient(90deg,
      var(--primary-purple),
      var(--purple-vivid));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: left bottom;
  /* Underline transition */
  transition:
    color 0.25s ease,
    background-size 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

@media(min-width: 1600px) {
  .footer-link {
    font-size: 1.2rem;
  }

  .footer-socials-label {
    font-size: 1.2rem;
  }

  .footer-social {
    width: 35px;
    height: 35px;
  }
}

.footer-link:hover {
  color: var(--white);
  background-size: 100% 1.5px;
  /* underline grows L→R */
}

/* Arrow that slides in on hover */
.footer-link::after {
  content: '→';
  font-size: 0.7rem;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  display: inline-block;
}

.footer-link:hover::after {
  opacity: 0.7;
  transform: translateX(0);
}

/* Stagger each link's appear on scroll */
.footer-links li {
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.footer--visible .footer-links li {
  opacity: 1;
  transform: translateX(0);
}

/* nth-child stagger delays */
.footer--visible .footer-links li:nth-child(1) {
  transition-delay: 0.05s;
}

.footer--visible .footer-links li:nth-child(2) {
  transition-delay: 0.10s;
}

.footer--visible .footer-links li:nth-child(3) {
  transition-delay: 0.15s;
}

.footer--visible .footer-links li:nth-child(4) {
  transition-delay: 0.20s;
}

.footer--visible .footer-links li:nth-child(5) {
  transition-delay: 0.25s;
}

.footer--visible .footer-links li:nth-child(6) {
  transition-delay: 0.30s;
}

.footer--visible .footer-links li:nth-child(7) {
  transition-delay: 0.35s;
}

.footer--visible .footer-links li:nth-child(8) {
  transition-delay: 0.40s;
}

.footer--visible .footer-links li:nth-child(9) {
  transition-delay: 0.45s;
}

.footer--visible .footer-links li:nth-child(10) {
  transition-delay: 0.50s;
}

.footer--visible .footer-links li:nth-child(11) {
  transition-delay: 0.55s;
}

.footer--visible .footer-links li:nth-child(12) {
  transition-delay: 0.60s;
}

/* ── Badges row — certification + review-platform logos ── */
.footer-badges {
  display: flex;
  align-items: center;

  padding: 18px 0;
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  /* Scroll-reveal */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.footer-badges.footer--visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-badges-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 48px);
  width: 100%;
}

.footer-badge-img {
  height: clamp(38px, 3vw, 52px);
  width: auto;
  object-fit: contain;
}

/* ── Bottom bar ── */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 20px 0;
  /* Stagger after grid */
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s;
}

/* .footer--visible~* .footer-bottom,
.footer-inner .footer-bottom {
 
} */

/* Applied by JS alongside footer-grid */
.footer-bottom.footer--visible {
  opacity: 1;
  transform: translateY(0);
}

.footer-copy {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #FFFFFF;
  margin: 0;
  max-width: 640px;
}

.footer-legal {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.footer-legal-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: #FFFFFF;
  text-decoration: none;
  transition: color var(--transition);
  /* Same underline animation as nav links */
  background-image: linear-gradient(90deg, var(--primary-purple), var(--purple-vivid));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left bottom;
  padding-bottom: 1px;
  transition: color 0.22s ease, background-size 0.28s ease;
}

.footer-legal-link:hover {
  color: rgba(255, 255, 255, 0.75);
  background-size: 100% 1px;
}

.footer-legal-sep {
  color: rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  user-select: none;
}

/* Below ~860px there's no room for copy + legal side by side —
   stack them instead, copy on top, legal links at the end. */
@media (max-width: 860px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-copy {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Footer responsive ── */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }

  .footer-col--brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .site-footer {
    padding: 36px 0 0px;
  }

  .footer-inner {
    padding: 32px 24px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-col--brand {
    grid-column: auto;
  }

  .footer-badges-group {
    width: 100%;
    gap: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-legal {
    gap: 8px;
  }
}

/* ============================================================
   LOGISTICS — SERVICE OVERVIEW SPLIT
   ============================================================ */
/* ==========================================================
   SERVICE OVERVIEW
========================================================== */

.svc-overview {
  background: var(--bg-dark);
}

.svc-overview-container {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 56px;
}

/* LEFT IMAGE */
.svc-ov-img {
  flex: 1;
  overflow: hidden;
  /* max-height: 530px; */
  align-self: center;
}

.svc-ov-img img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* RIGHT CONTENT */
.svc-ov-content {
  flex: 1;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Heading */
.svc-ov-title {
  font-size: var(--fs-h2);
  line-height: 1.05;
  font-weight: 500;
  color: #fff;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}

.svc-ov-desc {
  /* max-width: 600px; */
  color: rgba(255, 255, 255, .65);
  margin-bottom: 42px;
  font-size: 16.5px;
  text-align: justify;
}

.svc-ov-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Left-align the underline and drive the grow animation */
.svc-ov-content .overview-label::after {
  left: 0;
  transform: none;
  width: 0;
  transition: width 0.52s ease 0.72s;
}

.svc-overview.is-visible .svc-ov-content .overview-label::after {
  width: 34px;
}

/* ---- Entrance animations — service overview ---- */
.svc-overview .svc-ov-img {
  opacity: 0;
  transform: translateX(-56px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-overview .overview-label {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease 0.38s, transform 0.5s ease 0.38s;
}

.svc-overview .svc-ov-title {
  font-weight: 600;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.52s,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.52s;
}

.svc-overview .svc-ov-desc {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.58s ease 0.68s, transform 0.58s ease 0.68s;
}

.svc-overview .svc-ov-actions {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.52s ease 0.82s, transform 0.52s ease 0.82s;
}

.svc-overview.is-visible .svc-ov-img {
  opacity: 1;
  transform: translateX(0);
}

.svc-overview.is-visible .overview-label {
  opacity: 1;
  transform: translateY(0);
}

.svc-overview.is-visible .svc-ov-title {
  opacity: 1;
  transform: translateY(0);
}

.svc-overview.is-visible .svc-ov-desc {
  opacity: 1;
  transform: translateY(0);
}

.svc-overview.is-visible .svc-ov-actions {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .svc-overview-container {
    flex-direction: column;
  }

  .svc-ov-img {
    height: 400px;
  }

  .svc-ov-content {
    padding: 60px 40px;
  }
}

@media (max-width: 576px) {

  .svc-ov-img {
    height: 300px;
  }

  .svc-ov-content {
    padding: 40px 24px;
  }

  .svc-ov-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   LOGISTICS — OUR SERVICES GRID
   ============================================================ */
.svc-services {
  background: #FCF1F1;
  padding: 60px 0;
}

.svc-services-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.svc-services-header {
  max-width: 60%;
  margin: 0 auto 30px;
  text-align: center;
}

.svc-services-header .overview-label::after {
  width: 0;
  transition: width 0.5s ease 0.5s;
}

.svc-services-header .overview-label {
  color: black;
}

.svc-services.is-visible .svc-services-header .overview-label::after {
  width: 34px;
}

.svc-services-title {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.svc-services-desc {
  color: #262626;
  margin: 0 auto;
  max-width: 100%;
  font-size: 16px;
}

/* ---- Entrance animations — our services ---- */
.svc-services .svc-services-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-services.is-visible .svc-services-header {
  opacity: 1;
  transform: translateY(0);
}

@keyframes svcCardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.svc-services .svc-card {
  opacity: 0;
}

.svc-services.is-visible .svc-card {
  animation: svcCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.svc-services.is-visible .svc-card:nth-child(1) {
  animation-delay: 0.15s;
}

.svc-services.is-visible .svc-card:nth-child(2) {
  animation-delay: 0.22s;
}

.svc-services.is-visible .svc-card:nth-child(3) {
  animation-delay: 0.29s;
}

.svc-services.is-visible .svc-card:nth-child(4) {
  animation-delay: 0.36s;
}

.svc-services.is-visible .svc-card:nth-child(5) {
  animation-delay: 0.43s;
}

.svc-services.is-visible .svc-card:nth-child(6) {
  animation-delay: 0.50s;
}

.svc-services.is-visible .svc-card:nth-child(7) {
  animation-delay: 0.57s;
}

.svc-services.is-visible .svc-card:nth-child(8) {
  animation-delay: 0.64s;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.svc-card {
  background: #ffffff;
  border: 1px solid rgba(11, 11, 16, 0.07);
  padding: 28px 24px 30px;
  box-shadow: 0 4px 20px rgba(11, 11, 16, 0.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  border-radius: 16px;
}

.svc-card:hover {
  border-color: rgba(223, 0, 25, 0.25);
  box-shadow: 0 12px 32px rgba(223, 0, 25, 0.14);
  transform: translateY(-4px);
}

.svc-card--active {
  border-color: rgba(223, 0, 25, 0.4);
}

/* Icon badge — light-red circle with a red SVG icon matching the card's topic */
.svc-card-icon-box {
  width: 47px;
  height: 47px;
  border-radius: 10%;
  background: var(--light-theme-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.svc-card-icon {
  width: 30px;
  height: 30px;
  color: var(--white);
}

.svc-card-title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--light-theme-red);
  line-height: 1.3;
  margin-bottom: 12px;
}

/* Accent bar overhangs into the card's padding gutter, flush with the
   card's own edge — not inset to match the icon box above it. */
.svc-card-title::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--purple-vivid);
  border-radius: 2px;
}

.svc-card-desc {
  font-size: 16px;
  color: #262626;
  line-height: 1.65;
  margin-bottom: 0;
  text-align: justify;
}


@media (max-width: 1100px) {

  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:992px) {

  .svc-services-header,
  .svc-services-desc {
    max-width: 100%;
  }

}

@media (max-width: 768px) {
  .svc-services {
    padding: 60px 0;
  }

  .svc-grid {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .svc-services {
    padding: 52px 0;
  }

  .svc-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 1400px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(min-width:1500px) {
  .svc-card-icon-box {
    width: 60px;
    height: 60px;
  }

  .svc-card-icon {
    width: 40px;
    height: 40px;
  }
}

/* ============================================================
   LOGISTICS — HOW WE WORK
   ============================================================ */
.hww-section {
  background: #0a0a0a;
  padding: 40px 0;
}

.hww-inner {
  background-color: #0a0a0a;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ── Header ── */
.hww-header {
  text-align: center;
  margin-bottom: 64px;
}

.hww-heading {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 16px 0 18px;
}

.hww-header p {
  max-width: 1000px;
  margin: 0 auto;

}

/* ── Desktop 3-col grid (≥1240px) ── */
.hww-grid {
  display: grid;
  grid-template-columns: 220px 2fr 1fr;
  gap: 40px;
  align-items: stretch;
}

/* ── LEFT: step list ── */
.hww-steps {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  overflow: hidden;
}

.hww-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
  transition: background 0.25s ease;
}

.hww-step:last-child {
  border-bottom: none;
}

/* Bottom-bar indicator — same pseudo works in all layouts */
.hww-step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--purple-vivid);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.hww-step.is-active::after {
  transform: scaleX(1);
}

.hww-step.is-active,
.hww-step:hover {
  background: rgba(255, 255, 255, 0.03);
}

.hww-step-num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.32);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.hww-step-name {
  display: block;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h6);
  font-weight: 500;
  color: var(--white);
  transition: color 0.25s ease;
}

.hww-step.is-active .hww-step-name,
.hww-step:hover .hww-step-name {
  color: var(--white);
}

/* ── MIDDLE: image — stretches to match the steps panel height ── */
.hww-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 260px;
  max-height: 420px;
}

.hww-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.32s ease;
}

.hww-img.is-fading {
  opacity: 0;
}

/* ── RIGHT: detail ── */
.hww-detail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}

.hww-detail-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 14px;
  transition: opacity 0.25s ease;
}

.hww-detail-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  text-align: justify;
  line-height: 1.75;
  margin-bottom: 36px;
  transition: opacity 0.25s ease;
}

.hww-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hww-meta-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hww-meta-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.04em;
}

.hww-meta-val {
  font-family: var(--font-roboto-flex);
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  transition: opacity 0.25s ease;
}

/* Fade class toggled by JS during content swap */
.hww-detail-title.is-fading,
.hww-detail-desc.is-fading,
.hww-meta-val.is-fading {
  opacity: 0;
}

/* ── Scroll entrance ── */
.hww-section .hww-header {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hww-section .hww-steps {
  opacity: 0;
  border-color: rgba(255, 255, 255, 0.38);
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.hww-section .hww-img-wrap {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}

.hww-section .hww-detail {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease 0.5s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.hww-section.is-visible .hww-header,
.hww-section.is-visible .hww-steps,
.hww-section.is-visible .hww-img-wrap,
.hww-section.is-visible .hww-detail {
  opacity: 1;
  transform: translate(0);
}

/* ────────────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────────────── */

/* ≤1239px — horizontal tabs on top, image + detail below (2-col) */
@media (max-width: 1239px) {
  .hww-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 28px;
  }

  /* Steps span full width as a 4-tab horizontal strip */
  .hww-steps {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: 10px;
  }

  .hww-step {
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 18px 16px;
    text-align: center;
  }

  .hww-step:last-child {
    border-right: none;
  }

  /* In 2-col mode: stretch to match detail column height */
  .hww-img-wrap {
    align-self: stretch;
    min-height: 240px;
    max-height: none;
  }

  /* ::after bottom-bar already works — no overrides needed */
}

/* ≤860px — image stacks above detail (single column content) */
@media (max-width: 860px) {
  .hww-section {
    padding: 70px 0;
  }

  .hww-grid {
    grid-template-columns: 1fr;
  }

  .hww-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: unset;
    max-height: 380px;
  }
}

/* ≤560px — single column, steps go 2×2 */
@media (max-width: 560px) {
  .hww-section {
    padding: 46px 0;
  }

  .hww-header {
    margin-bottom: 36px;
  }

  .hww-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Top row of 2×2 gets a bottom divider */
  .hww-step:nth-child(1),
  .hww-step:nth-child(2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  /* Right column of each row keeps a right divider */
  .hww-step:nth-child(even) {
    border-right: none;
  }

  .hww-step:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
  }
}

/* ================================================================
   TECHNOLOGY STACK SECTION
   ================================================================ */
.ts-section {
  background: #FCF1F1;
  padding: 60px 0 60px;
}

.ts-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.ts-header {
  text-align: center;
  max-width: 1300px;
  margin: 0 auto 44px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}



.ts-section.is-visible .ts-header {
  opacity: 1;
  transform: translateY(0);
}

.ts-header .overview-label {
  color: black;
}

.ts-header .overview-label::after {
  width: 0;
  background: var(--light-theme-red);
  transition: width 0.5s ease 0.4s;
}

.ts-section.is-visible .ts-header .overview-label::after {
  width: 34px;
}

.ts-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  margin-bottom: 20px;
  font-weight: 600;
  color: #0b0b10;
  line-height: 1.15;
}

.ts-title-accent {
  color: var(--light-theme-red);
}

.ts-header p {
  color: #262626;
  font-size: 16px;
  line-height: 1.7;
  max-width: 70%;
  margin: 0 auto;
  text-align: justify;
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 32px;
  text-align: left;
}

.ts-card {
  background: transparent;
  border-right: 1px solid #D9D9D9;
  padding-right: 24px;
  text-align: center;
}

.ts-card:last-child {
  border-right: none;
}

.ts-card-cat {
  position: relative;
  font-family: var(--font-subheading);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: #262626;
  margin: 0 0 18px;
  padding-bottom: 12px;
}

.ts-card-cat::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--light-theme-red);
}

.ts-card-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ts-card-items li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: px;
  font-family: var(--font-body);
  font-size: 16px;
  color: rgba(11, 11, 16, 0.62);
  line-height: 1.4;
}

.ts-tech-logo {
  flex-shrink: 0;
  height: 46px;
  width: auto;
  max-width: 92px;
  object-fit: contain;
}

@keyframes tsCardReveal {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ts-section.is-visible .ts-card {
  animation: tsCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ts-section.is-visible .ts-card:nth-child(1) {
  animation-delay: 0.15s;
}

.ts-section.is-visible .ts-card:nth-child(2) {
  animation-delay: 0.26s;
}

.ts-section.is-visible .ts-card:nth-child(3) {
  animation-delay: 0.37s;
}

.ts-section.is-visible .ts-card:nth-child(4) {
  animation-delay: 0.48s;
}

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

  /* 2-column grid: only the left column card keeps its divider */
  .ts-card:nth-child(2n) {
    border-right: none;
  }

  .ts-card:nth-child(2n+1) {
    border-right: 1px solid rgba(11, 11, 16, 0.12);
  }
}

@media (max-width: 768px) {
  .ts-section {
    padding: 70px 0;
  }

  .ts-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .ts-section {
    padding: 50px 0;
  }

  .ts-header {
    margin-bottom: 40px;
  }

  .ts-grid {
    grid-template-columns: 1fr;
  }

  .ts-card {
    border-right: none;
    padding-right: 0;
  }
}

/* ── Tech logo grid (gray → white on hover) ── */
.ts-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 44px;
}

.ts-logo-item img {
  height: 50px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  /* filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity 0.25s ease, filter 0.25s ease; */
}

/* .ts-logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
} */

@media (max-width: 768px) {
  .ts-logo-grid {
    gap: 24px 32px;
  }

  .ts-logo-item img {
    height: 28px;
  }
}

@media (max-width: 480px) {
  .ts-logo-grid {
    gap: 20px 24px;
  }

  .ts-logo-item img {
    height: 24px;
  }
}

/* ================================================================
   TECH PARTNER MARQUEE (second marquee — reverse direction)
   ================================================================ */
.tp-section {
  background: #FCF1F1;
  padding: 30px 0 60px;
  overflow: hidden;
  position: relative;
}



.tp-section::after {
  right: 0;
  background: linear-gradient(to left, #000 0%, transparent 100%);
}

.tp-wrapper {
  overflow: hidden;
  width: 100%;
}

.tp-track {
  display: flex;
  width: max-content;
  animation: tpScroll 30s linear infinite;
}

.tp-track:hover {
  animation-play-state: paused;
}

.tp-set {
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 0 30px;
  flex-shrink: 0;
}

.tp-logo {
  width: auto;
  object-fit: contain;
  opacity: 1;
  flex-shrink: 0;

}


@keyframes tpScroll {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* ================================================================
   WHY CHOOSE US SECTION
   ================================================================ */
.wcu-section {
  background: #0a0a0a;
  padding: 60px 0 60px;
  overflow: hidden;
}

/* ── Header row ── */
.wcu-header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--section-px) 20px;
}

.wcu-header-left .overview-label::after {
  left: 0;
  transform: none;
  width: 0;
  transition: width 0.5s ease 0.4s;
}

.wcu-section.is-visible .wcu-header-left .overview-label::after {
  width: 34px;
}

.wcu-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--white);
  line-height: 1.1;
  max-width: 800px;
}

.wcu-header-left p {
  margin-top: 10px;
}

/* ── Custom nav buttons ── */
.wcu-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.wcu-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.wcu-btn:hover {
  background: var(--purple-vivid);
  border-color: var(--purple-vivid);
}

.wcu-btn--fill {
  background: var(--purple-vivid);
  border-color: var(--purple-vivid);
}

/* ── Slider outer — left-padded, right-peeked, bleeds edge ── */
.wcu-slider-outer {
  padding-left: var(--section-px);
  /* Right padding narrows the slider so the next card peeks beyond */
  padding-right: calc(var(--section-px) + 2%);
}

.wcu-slider-outer .slick-list {
  /* Allow slides to extend beyond the container into the right padding area */
  overflow: visible;
}

.wcu-slider-outer .slick-track {
  display: flex;
  align-items: stretch;
}

/* Slick wraps each slide in an extra div — stretch that too */
.wcu-slider-outer .slick-slide {
  height: auto !important;
  display: flex !important;
}

.wcu-slider-outer .slick-slide>div {
  display: flex;
  width: 100%;
}

/* ── Individual slide ── */
.wcu-slide {
  display: flex;
  flex: 1;
  padding-right: 20px;
  box-sizing: border-box;
}

.wcu-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px 36px;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.wcu-card:hover {
  border-color: rgba(223, 0, 25, 0.35);
  transform: translateY(-4px);
}

.wcu-card-num {
  font-family: var(--font-roboto-flex);
  font-size: 1.45rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.22);
  display: block;
  margin-bottom: 28px;
}

.wcu-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 14px;
}

.wcu-card-desc {
  font-size: 15px;
  color: var(--white);
  line-height: 1.65;
  margin: 0;
}

/* ── Scroll entrance ── */
.wcu-section .wcu-header-wrap {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wcu-section.is-visible .wcu-header-wrap {
  opacity: 1;
  transform: translateY(0);
}

.wcu-section .wcu-slider-outer {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease 0.25s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.wcu-section.is-visible .wcu-slider-outer {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .wcu-header-wrap {
    padding-bottom: 36px;
  }
}

@media (max-width: 768px) {
  .wcu-section {
    padding: 70px 0 60px;
  }
}

@media (max-width: 480px) {
  .wcu-section {
    padding: 52px 0 48px;
  }

  .wcu-header-wrap {
    flex-wrap: wrap;
    gap: 20px;
  }

}

/* ================================================================
   CASE STUDIES DISPLAY
   ================================================================ */
.csd-section {
  background: #FCF1F1;
  padding: 60px 0px 0px;
}

.csd-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.csd-header {
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 30px;
}

.csd-section.is-visible .csd-header {
  opacity: 1;
  transform: translateY(0);
}

.csd-header .overview-label {
  color: black;
}

.csd-header .overview-label::after {
  width: 0;
  background: var(--light-theme-red);
  transition: width 0.5s ease 0.4s;
}

.csd-section.is-visible .csd-header .overview-label::after {
  width: 34px;
}

.csd-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #0b0b10;
  line-height: 1.1;
  margin-bottom: 10px;
}

.csd-title-accent {
  color: var(--light-theme-red);
}

.csd-header p {
  font-size: 16px;
  margin: 0 auto;
  max-width: 70%;
  color: #262626;
}

/* ── Grid: 23 equal tracks so each row can have a different split ── */
/*    Row 1 → 13:10  (≈ 1.3fr : 1fr)                                 */
/*    Row 2 → 10:13  (≈ 1fr : 1.3fr)                                 */
.csd-grid {
  display: grid;
  grid-template-columns: repeat(23, 1fr);
}

/* Row 1 */
.csd-card:nth-child(1) {
  grid-column: 1 / 13;
}

.csd-card:nth-child(2) {
  grid-column: 13 / 24;
}

/* Row 2 */
.csd-card:nth-child(3) {
  grid-column: 1 / 12;
}

.csd-card:nth-child(4) {
  grid-column: 12 / 24;
}

/* ── Shared card base ── */
.csd-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.csd-section.is-visible .csd-card {
  opacity: 1;
  transform: translateY(0);
}

.csd-section.is-visible .csd-card:nth-child(1) {
  transition-delay: 0.08s;
}

.csd-section.is-visible .csd-card:nth-child(2) {
  transition-delay: 0.2s;
}

.csd-section.is-visible .csd-card:nth-child(3) {
  transition-delay: 0.08s;
}

.csd-section.is-visible .csd-card:nth-child(4) {
  transition-delay: 0.2s;
}

/* ── Split card: image left | dark panel right ── */
.csd-card--split {
  display: flex;
}

.csd-img-panel {
  flex: 0 0 44%;
  position: relative;
  overflow: hidden;
}

.csd-img-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.csd-card--split:hover .csd-img-panel img {
  transform: scale(1.06);
}

.csd-text-panel {
  flex: 1;
  background: #FCF1F1;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* ── Overlay card: image fills card, left dark gradient ── */
.csd-card--overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.55) 48%,
      rgba(0, 0, 0, 0.04) 100%);
  z-index: 1;
}

.csd-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.csd-card--overlay:hover .csd-bg-img {
  transform: scale(1.06);
}

.csd-overlay-content {
  position: relative;
  z-index: 2;
  width: 56%;
  min-height: 310px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.csd-overlay-content .csd-card-title,
.csd-overlay-content .csd-card-desc {
  color: white;
}

/* ── Typography ── */
.csd-card-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: black;
  line-height: 1.35;
  margin: 0 0 14px;
}

.csd-card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: #262626;
  line-height: 1.65;
  margin: 0 0 26px;
}

/* ── Button ── */
.csd-btn {
  display: inline-block;
  background: var(--light-theme-red);
  color: white;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 11px 26px;
  text-decoration: none;
  align-self: flex-start;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
  border-radius: 5px;
}

.csd-btn:hover {
  background: var(--purple-vivid);
  color: var(--white);
}

/* ≤1200px: tighten inner padding */
@media (max-width: 1200px) {

  .csd-text-panel,
  .csd-overlay-content {
    padding: 32px 28px;
  }
}

/* ≤992px: single column, split cards stack vertically */
@media (max-width: 992px) {
  .csd-section {
    padding: 70px 0 0;
  }

  .csd-header {
    margin-bottom: 40px;
  }

  .csd-grid {
    grid-template-columns: 1fr;
    /* gap: 20px; */
  }

  /* Reset per-card column positions — all span full width */
  .csd-card:nth-child(1),
  .csd-card:nth-child(2),
  .csd-card:nth-child(3),
  .csd-card:nth-child(4) {
    grid-column: 1 / -1;
  }

  /* Reorder: card1, card2, card4, card3 */
  .csd-card:nth-child(1) {
    order: 1;
  }

  .csd-card:nth-child(2) {
    order: 2;
  }

  .csd-card:nth-child(3) {
    order: 4;
  }

  .csd-card:nth-child(4) {
    order: 3;
  }

  .csd-card--split {
    flex-direction: column;
  }

  .csd-img-panel {
    flex: 0 0 220px;
    height: 220px;
    width: 100%;
  }

  .csd-text-panel {
    padding: 28px 28px;
  }

  .csd-overlay-content {
    width: 78%;
    min-height: 260px;
    padding: 28px 28px;
  }

}

/* ≤768px */
@media (max-width: 768px) {

  .csd-text-panel,
  .csd-overlay-content {
    padding: 24px 22px;
  }

  .csd-card-desc {
    font-size: 0.84rem;
  }
}

/* ≤560px */
@media (max-width: 560px) {
  .csd-section {
    padding: 50px 0 0;
  }

  .csd-img-panel {
    flex: 0 0 190px;
    height: 190px;
  }

  .csd-text-panel,
  .csd-overlay-content {
    padding: 20px 16px;
  }

  .csd-overlay-content {
    width: 100%;
    min-height: unset;
  }

  .csd-card-desc {
    font-size: 0.82rem;
    margin-bottom: 18px;
  }

  .csd-btn {
    padding: 9px 20px;
    font-size: 0.82rem;
  }
}

/* ================================================================
   FAQ SECTION
   ================================================================ */
.faq-section {
  background: #FCF1F1;
  padding: 20px 0 40px;
}

.faq-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: stretch;
}

/* ── Left panel (now a full-width heading strip) ── */
.faq-left {
  flex: 0 0 auto;
  position: static;
  width: 100%;
}

.faq-left-header .overview-label {
  color: black;
}

.faq-left-header .overview-label::after {
  left: 0;
  transform: none;
  width: 0;
  transition: width 0.5s ease 0.4s;

}

.faq-section.is-visible .faq-left-header .overview-label::after {
  width: 34px;
}

.faq-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: black;
  line-height: 1.1;
  margin: 12px 0 0;
}

/* ── Right panel: accordion ── */
.faq-right {
  flex: 1;
  min-width: 0;
}

.faq-list {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.faq-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-col>.faq-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 20px 0;
  cursor: pointer;
  text-align: left;
  color: black;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  transition: color 0.2s ease;
}

.faq-q:hover {
  color: var(--light-theme-red);
}

.faq-q-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: black;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.32s ease;
}

.faq-item.is-open .faq-q-icon {
  background: var(--light-theme-red);
  border-color: var(--light-theme-red);
  color: white;
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-a p {
  font-family: var(--font-body);
  font-size: 16px;
  color: black;
  line-height: 1.75;
  padding-bottom: 22px;
  margin: 0;
}

/* ── Entrance animations ── */
.faq-section .faq-left-header {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-section .faq-anim {
  opacity: 0;
  transition: opacity 0.7s ease 0.3s;
}

.faq-section .faq-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s ease 0.15s, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.faq-section.is-visible .faq-left-header,
.faq-section.is-visible .faq-anim,
.faq-section.is-visible .faq-right {
  opacity: 1;
  transform: translateX(0);
}

/* ── Responsive ── */
@media (max-width: 992px) {
  .faq-section {
    padding: 70px 0;
  }

  .faq-inner {
    flex-direction: column;
    gap: 44px;
  }

  .faq-left {
    flex: 0 0 auto;
    position: static;
    width: 100%;
  }

  .faq-anim {
    height: 200px;
    margin-top: 32px;
  }

  .faq-float--3,
  .faq-float--4 {
    display: none;
  }
}

@media (max-width: 768px) {
  .faq-inner {
    gap: 36px;
  }

  .faq-anim {
    height: 160px;
  }

  .faq-anim-qmark {
    font-size: 72px;
  }

  .faq-ring--3 {
    display: none;
  }

  .faq-q {
    padding: 18px 0;
  }

  .faq-list {
    flex-direction: column;
    gap: 0;
  }

  .faq-col>.faq-item:first-child {
    border-top: none;
  }

  .faq-col:first-child>.faq-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

@media (max-width: 560px) {
  .faq-section {
    padding: 50px 0;
  }

  .faq-inner {
    gap: 28px;
  }

  .faq-anim {
    height: 130px;
  }

  .faq-anim-qmark {
    font-size: 56px;
  }

  .faq-ring--2,
  .faq-ring--3 {
    display: none;
  }

  .faq-float--1 {
    font-size: 16px;
  }

  .faq-float--2 {
    font-size: 16px;
  }

}


/* ================================================================
   REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {

  .footer-grid,
  .footer-bottom,
  .footer-links li,
  .footer-link,
  .footer-legal-link,
  .footer-social {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   INDUSTRIES INTRO SECTION
   ============================================================ */
.ind-intro-section {
  background: var(--bg-dark);
  padding: 40px 0px;
}

.ind-intro-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.ind-intro-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.ind-intro-body {
  display: flex;
  flex-direction: column;
}

.ind-intro-body p {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 10px;
  text-align: justify;

}



/* Entrance animations */
.ind-intro-section .ind-intro-title,
.ind-intro-section .ind-intro-body {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.ind-intro-section .ind-intro-body {
  transition-delay: 0.14s;
}

.ind-intro-section.is-visible .ind-intro-title,
.ind-intro-section.is-visible .ind-intro-body {
  opacity: 1;
  transform: translateY(0);
}

/* ≤768px */
@media (max-width: 768px) {
  .ind-intro-section {
    padding: 64px 0 56px;
  }

  .ind-intro-inner {
    gap: 28px;
  }

}

/* ≤480px */
@media (max-width: 480px) {
  .ind-intro-section {
    padding: 48px 0 44px;
  }

  .ind-intro-desc {
    font-size: 19px;
  }
}

/* ============================================================
   INDUSTRIES DISPLAY SECTION (index.html — pill-tabs + panel)
   ============================================================ */
.wid-section {
  background: white;
  padding: 40px 0px;
}

.wid-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ── Header ── */
.wid-header {
  text-align: center;
  margin-bottom: 52px;
}

.wid-header .overview-label {
  color: black;
}

.wid-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.wid-lead {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 auto;
  max-width: 1300px;
}

/* ── Desktop layout: list (left) + image panel (right) ── */
.wid-desktop {
  display: flex;
  align-items: stretch;
  gap: 56px;
  --wid-duration: 2000ms;
}

/* ── Industry list ── */
.wid-list {
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  max-width: 280px;
  background: #FCF1F1;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 6px 28px;
  box-sizing: border-box;
}

.wid-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: transparent;
  border: none;
  border-bottom: 1px solid #ACACAC;
  padding: 16px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.wid-list-name {
  font-family: var(--font-roboto-flex);
  font-size: 17px;
  font-weight: 500;
  color: #4b4b4b;
  transition: color 0.25s ease;
}

.wid-list-item:hover .wid-list-name {
  color: black;
}

.wid-list-item.is-active .wid-list-name {
  color: black;
  font-weight: 600;
}

/* The item's own border-bottom acts as the progress track; the fill
   sits directly on top of it and animates left to right. */
.wid-progress-fill {
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--purple-vivid);
  transform: scaleX(0);
  transform-origin: left center;
}

.wid-list-item.is-active .wid-progress-fill {
  animation: widProgressFill var(--wid-duration) linear forwards;
}

.wid-desktop.is-paused .wid-list-item.is-active .wid-progress-fill {
  animation-play-state: paused;
}

@keyframes widProgressFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wid-list-item.is-active .wid-progress-fill {
    animation: none;
    transform: scaleX(1);
  }
}

/* ── Desktop panel ── */
/* Panels are absolutely layered inside the stack so swapping industries
   never changes the section's height. The stack itself has no intrinsic
   height (its children are all position:absolute), so .wid-desktop's
   `align-items: stretch` makes it match .wid-list's natural height. */
.wid-panel-stack {
  position: relative;
  flex: 1;
}

.wid-panel {
  background: #111111;
  border-radius: 16px;
  overflow: hidden;
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

/* Shown when its matching list item is active */
.wid-panel.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wid-panel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  transition: transform 0.5s ease;
}

.wid-panel:hover .wid-panel-img {
  transform: scale(1.04);
}

.wid-panel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0) 70%);
  pointer-events: none;
}

.wid-panel-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 40px;
}

.wid-panel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wid-panel-title {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.wid-panel-desc {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  /* Clamp so description-length differences between industries can
     never change the panel's height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;

  overflow: hidden;
}

@media(min-width:1500px) {

  .wid-list {
    display: flex;
    flex-direction: column;
    flex: 0 0 400px;
    max-width: 400px;
  }

  .wid-list-name {
    font-size: 24px;
  }

  .wid-panel-desc {
    font-size: 22px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
}

.wid-panel-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  flex-shrink: 0;
  background: var(--purple-vivid);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: 25px;
  transition: background 0.22s ease, transform 0.2s ease;
}

.wid-panel-link:hover {
  background: #b0000f;
  transform: translateX(3px);
}

/* ── Hide accordion on desktop ── */
.wid-acc {
  display: none;
}

/* ── Entrance animations ── */
.wid-section .wid-header,
.wid-section .wid-desktop,
.wid-section .wid-acc-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.wid-section .wid-desktop {
  transition-delay: 0.12s;
}

.wid-section .wid-acc-item:nth-child(1) {
  transition-delay: 0.05s;
}

.wid-section .wid-acc-item:nth-child(2) {
  transition-delay: 0.10s;
}

.wid-section .wid-acc-item:nth-child(3) {
  transition-delay: 0.15s;
}

.wid-section .wid-acc-item:nth-child(4) {
  transition-delay: 0.20s;
}

.wid-section .wid-acc-item:nth-child(5) {
  transition-delay: 0.25s;
}

.wid-section .wid-acc-item:nth-child(6) {
  transition-delay: 0.30s;
}

.wid-section .wid-acc-item:nth-child(7) {
  transition-delay: 0.35s;
}

.wid-section .wid-acc-item:nth-child(8) {
  transition-delay: 0.40s;
}

.wid-section .wid-acc-item:nth-child(9) {
  transition-delay: 0.45s;
}

.wid-section .wid-acc-item:nth-child(10) {
  transition-delay: 0.50s;
}

.wid-section.is-visible .wid-header,
.wid-section.is-visible .wid-desktop,
.wid-section.is-visible .wid-acc-item {
  opacity: 1;
  transform: translateY(0);
}

/* ── ≤992px: Switch to accordion ── */
@media (max-width: 992px) {
  .wid-section {
    padding: 70px 0 80px;
  }

  .wid-desktop {
    display: none;
  }

  .wid-panel-link {
    padding: 8px 10px;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
  }

  .wid-acc {
    display: block;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .wid-header {
    margin-bottom: 40px;
  }

  /* Accordion item */
  .wid-acc-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .wid-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    padding: 20px 0;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
  }

  .wid-acc-btn:hover,
  .wid-acc-item.is-open .wid-acc-btn {
    color: #ffffff;
  }

  .wid-acc-icon {
    font-size: 0.8rem;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease, color 0.2s ease;
  }

  .wid-acc-item.is-open .wid-acc-icon {
    transform: rotate(180deg);
    color: var(--purple-vivid);
  }

  .wid-acc-item.is-open .wid-acc-btn {
    color: #ffffff;
  }

  /* Collapsible panel */
  .wid-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  /* Card inside panel */
  .wid-acc-card {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 24px;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .wid-acc-img-wrap {
    overflow: hidden;
  }

  .wid-acc-img {
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
    display: block;
  }

  .wid-acc-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 28px 28px 28px 0;
  }

  .wid-acc-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
  }

  .wid-acc-desc {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
  }
}

/* ≤600px — stack image above content in accordion card */
@media (max-width: 600px) {
  .wid-section {
    padding: 52px 0 60px;
  }

  .wid-title-br {
    display: none;
  }

  .wid-acc-card {
    grid-template-columns: 1fr;
  }

  .wid-acc-img {
    min-height: 180px;
    max-height: 220px;
  }

  .wid-acc-content {
    padding: 20px;
  }
}

/* ============================================================
   INDUSTRIES SERVICES SECTION
   ============================================================ */
.ind-svc-section {
  background: #ffffff;
  padding: 60px 0px;
}

.ind-svc-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ── Section header ── */
.ind-svc-header {
  max-width: 75%;
  margin: 0 auto 40px;
  text-align: center;
}

.ind-svc-header .overview-label {
  color: black;
}

.ind-svc-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: #0b0b10;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 16px 0 18px;
}

.ind-svc-lead {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.75;
  color: #262626;
  margin: 0;
}

/* ── Cards grid — 2 columns ── */
.ind-svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── Individual card ── */
.ind-svc-card {
  background: #FCF1F1;
  border: 1px solid rgba(223, 0, 25, 0.08);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.ind-svc-card:hover {
  border-color: var(--light-theme-red);
  box-shadow: 0 0 0 1px var(--light-theme-red), 0 12px 28px rgba(223, 0, 25, 0.14);
}



/* ── Card top row: icon + title ── */
.ind-svc-card-top {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Icon wrapper */
.ind-svc-icon-wrap {

  display: flex;
  align-items: center;
  justify-content: center;
  animation: indIconFloat 4s ease-in-out infinite;
}

.ind-svc-card:nth-child(2) .ind-svc-icon-wrap {
  animation-delay: 0.5s;
}

.ind-svc-card:nth-child(3) .ind-svc-icon-wrap {
  animation-delay: 1s;
}

.ind-svc-card:nth-child(4) .ind-svc-icon-wrap {
  animation-delay: 1.5s;
}

.ind-svc-card:nth-child(5) .ind-svc-icon-wrap {
  animation-delay: 2s;
}

.ind-svc-card:nth-child(6) .ind-svc-icon-wrap {
  animation-delay: 2.5s;
}

@keyframes indIconFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  30% {
    transform: translateY(-5px) rotate(-3deg);
  }

  65% {
    transform: translateY(-3px) rotate(2deg);
  }
}

.ind-svc-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.ind-svc-card:hover .ind-svc-icon {
  transform: scale(1.1);
}

/* ── Card title ── */
.ind-svc-card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 0.95rem + 0.417vw, 1.65rem);
  font-weight: 600;
  color: #0b0b10;
  margin: 0;
  line-height: 1.3;
}

/* ── Card description ── */
.ind-svc-card-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: #262626;
  margin: 0;
  flex: 1;
}


/* ── Chip tags ── */
.ind-svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.ind-chip {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: black;
  background: transparent;
  border: 1px solid rgba(223, 0, 25, 0.15);
  border-radius: 100px;
  padding: 5px 13px;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  cursor: default;
}

.ind-chip:hover {
  background: var(--light-theme-red);
  border-color: var(--light-theme-red);
  color: #ffffff;
}


/* ── Scroll entrance animations ── */
.ind-svc-section .ind-svc-header,
.ind-svc-section .ind-svc-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.ind-svc-section .ind-svc-card:nth-child(1) {
  transition-delay: 0.05s;
}

.ind-svc-section .ind-svc-card:nth-child(2) {
  transition-delay: 0.12s;
}

.ind-svc-section .ind-svc-card:nth-child(3) {
  transition-delay: 0.19s;
}

.ind-svc-section .ind-svc-card:nth-child(4) {
  transition-delay: 0.26s;
}

.ind-svc-section .ind-svc-card:nth-child(5) {
  transition-delay: 0.33s;
}

.ind-svc-section .ind-svc-card:nth-child(6) {
  transition-delay: 0.40s;
}

.ind-svc-section.is-visible .ind-svc-header,
.ind-svc-section.is-visible .ind-svc-card {
  opacity: 1;
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ind-svc-section {
    padding: 70px 0 80px;
  }

  .ind-svc-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ind-svc-header {
    margin-bottom: 40px;
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  .ind-svc-section {
    padding: 52px 0 60px;
  }

  .ind-svc-card {
    padding: 24px 20px;
  }

  .ind-svc-icon {
    width: 40px;
    height: 40px;
  }

  .ind-svc-icon-wrap {
    width: 44px;
    height: 44px;
  }

  .ind-chip {
    font-size: 0.72rem;
    padding: 4px 10px;
  }
}

/* ================================================================
   ABOUT PAGE — ABOUT US INTRO
   ================================================================ */
.abt-section {
  background: #0a0a0a;
  padding: 60px 0 40px;
}

.abt-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 2fr;
  gap: 50px;
  align-items: center;
}

.abt-left {

  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.abt-section.is-visible .abt-left {
  opacity: 1;
  transform: translateY(0);
}

.abt-left .overview-label::after {
  left: 0;
  transform: none;
  width: 0;
  transition: width 0.5s ease 0.4s;
}

.abt-section.is-visible .abt-left .overview-label::after {
  width: 34px;
}

.abt-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.12;
  color: var(--white);
  margin: 6px 0 20px;
}

.abt-desc {
  font-size: 16.5px;
  line-height: 1.8;
  color: white;
  margin-bottom: 36px;
  text-align: justify;
}

.abt-presence-label {
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 14px;
}

.abt-presence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.abt-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: white;
}

.abt-flag-emoji {
  font-size: 1.15rem;
  line-height: 1;
}

.abt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.abt-card {
  background: #111111;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 24px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.abt-section.is-visible .abt-card {
  animation: abtCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.abt-section.is-visible .abt-card:nth-child(1) {
  animation-delay: 0.1s;
}

.abt-section.is-visible .abt-card:nth-child(2) {
  animation-delay: 0.2s;
}

.abt-section.is-visible .abt-card:nth-child(3) {
  animation-delay: 0.3s;
}

.abt-section.is-visible .abt-card:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes abtCardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.abt-card:hover {
  background: linear-gradient(135deg, var(--purple-vivid), var(--purple-btn));
  border-color: transparent;
}


.abt-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #DF0019;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.abt-card-icon i {
  font-size: 1.2rem;
  color: white;
}

.abt-card:hover .abt-card-icon i {
  background: white;
  color: #DF0019;
}

.abt-card:hover .abt-card-icon {
  background: white;
}

.abt-card-title {
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 10px;
}

.abt-card-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  color: white;
  text-align: justify;
}


@media (max-width: 1100px) {
  .abt-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 560px) {
  .abt-section {
    padding: 60px 0;
  }

  .abt-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   ABOUT PAGE — OUR SUCCESS JOURNEY (timeline)
   ================================================================ */
.jny-section {
  background: #FCF1F1;
  padding: 60px 0;
}

.jny-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.jny-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.jny-section.is-visible .jny-header {
  opacity: 1;
  transform: translateY(0);
}

.jny-header .overview-label {
  color: black;
}

.jny-header .overview-label::after {
  width: 0;
  background: var(--light-theme-red);
  transition: width 0.5s ease 0.4s;
}

.jny-section.is-visible .jny-header .overview-label::after {
  width: 34px;
}

.jny-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: #0b0b10;
  margin: 10px 0 16px;
  line-height: 1.12;
}

.jny-title-accent {
  color: var(--light-theme-red);
}

.span-dark {
  color: var(--purple-vivid);
}

.span-light {
  color: var(--light-theme-red);
}

.jny-desc {
  font-size: 16.5px;
  text-align: justify;
  color: rgba(11, 11, 16, 0.6);
}

/* ── Year track ── */
.jny-track {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 56px;
  padding: 0 4px;
}

.jny-track-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.475);
  transform: translateY(-50%);
  z-index: 0;
}

.jny-year {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  font-family: var(--font-subheading);
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.475);
  cursor: pointer;
  padding: 0 0 22px;
  transition: color 0.25s ease;
}

.jny-year::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(11, 11, 16, 0.22);
  transform: translate(-50%, 50%);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.jny-year.is-active,
.jny-year:hover {
  color: var(--light-theme-red);
}

.jny-year.is-active::after {
  background: var(--light-theme-red);
  box-shadow: 0 0 0 4px rgba(173, 4, 23, 0.22);
  transform: translate(-50%, 50%) scale(1.15);
}

/* ── Stage ── */
.jny-stage {
  display: flex;
  align-items: center;
  gap: 20px;
}

.jny-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 5%;
  border: none;
  background: var(--light-theme-red);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.jny-arrow.active {
  background: var(--light-theme-red);
  color: #ffffff;
}


.jny-arrow:hover {
  background: var(--light-theme-red);
  color: #ffffff;
}

.jny-arrow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ece7e7;
  color: #0b0b10;
}

.jny-arrow:disabled:hover {
  background: #ece7e7;
  color: #0b0b10;
}

.jny-card-year {
  display: none;
}

.jny-cards {
  position: relative;
  flex: 1;
  min-height: 360px;
}

.jny-card {
  display: none;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 16, 0.08);
  border-radius: 22px;
  overflow: hidden;
  gap: 0;
}

.jny-card.is-active {
  display: flex;
  animation: jnyCardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes jnyCardIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jny-card-img {
  flex: 0 0 38%;
  position: relative;
}

.jny-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 280px;
}

.jny-card-body {
  flex: 1;
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
}

.jny-card-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: #0b0b10;
  line-height: 1.3;
  margin-bottom: 14px;
}

.jny-card-desc {
  font-size: 17.5px;
  text-align: justify;
  color: rgba(11, 11, 16, 0.62);
  line-height: 1.75;
  margin-bottom: 22px;
}

.jny-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.jny-tag {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(11, 11, 16, 0.65);
  background: transparent;
  border: 1px solid rgba(11, 11, 16, 1);
  border-radius: 20px;
  padding: 6px 14px;
}

.jny-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-subheading);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--light-theme-red);
  transition: opacity 0.25s ease;
}

.jny-card-link:hover {
  opacity: 0.75;
}

@media (max-width: 1024px) {
  .jny-card-body {
    padding: 30px 32px;
  }
}

/* ── ≤860px: static vertical timeline — dashed line on the left with
   a year badge centred on each card, all cards always visible,
   no JS-driven swapping or auto-scroll ── */
@media (max-width: 860px) {
  .jny-section {
    padding: 70px 0;
  }

  .jny-track {
    display: none;
  }

  .jny-stage {
    display: block;
  }

  .jny-arrow {
    display: none;
  }

  .jny-cards {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 76px;
  }

  .jny-cards::before {
    content: '';
    position: absolute;
    left: 38px;
    top: 8px;
    bottom: 8px;
    border-left: 2px dashed rgba(255, 255, 255, 0.25);
  }

  .jny-card {
    display: flex !important;
    flex-direction: column;
    position: relative;
    overflow: visible;
    animation: none !important;
  }

  .jny-card-img img {
    min-height: 200px;
    border-radius: 22px 22px 0 0;
  }

  .jny-card-body {
    padding: 28px 24px;
  }

  /* Year badge sits on the dashed line, centred on the card */
  .jny-card-year {
    display: inline-block;
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    background: var(--purple-vivid);
    color: #fff;
    font-family: var(--font-subheading);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 0 0 4px #0a0a0a;
    margin-bottom: 0;
  }
}

@media (max-width: 560px) {
  .jny-section {
    padding: 52px 0;
  }

  .jny-cards {
    padding-left: 64px;
    gap: 30px;
  }

  .jny-cards::before {
    left: 32px;
  }

  .jny-card-year {
    left: -32px;
    font-size: 0.7rem;
    padding: 5px 12px;
  }

  .jny-tag {
    font-size: 0.72rem;
    padding: 5px 12px;
  }
}

/* ================================================================
   ABOUT PAGE — VISION & MISSION
   ================================================================ */
.vsm-section {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 90px 0;
}

.vsm-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.vsm-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  min-height: 480px;
}

.vsm-card {
  position: absolute;
  max-width: 380px;
  background: rgba(10, 8, 16, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 26px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.vsm-section.is-visible .vsm-card {
  opacity: 1;
}

.vsm-card--values {
  top: 0;
  left: 0;
  transform: translateY(-16px);
}

.vsm-card--mission {
  top: 0;
  right: 0;
  transform: translateY(-16px);
}

.vsm-card--vision {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 16px);
}

.vsm-section.is-visible .vsm-card--values,
.vsm-section.is-visible .vsm-card--mission {
  transform: translateY(0);
}

.vsm-section.is-visible .vsm-card--vision {
  transform: translate(-50%, 0);
}

.vsm-card-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
  margin-bottom: 16px;
}

.vsm-card-title {
  font-family: var(--font-roboto-flex);
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  margin-bottom: 10px;
}

.vsm-card-desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  text-align: justify;
}

@media (max-width: 760px) {
  .vsm-section {
    min-height: 0;
    padding: 60px 0;
  }

  .vsm-inner {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .vsm-card {
    position: static;
    width: 100%;
    transform: none !important;
  }
}

@media (max-width: 560px) {
  .vsm-section {
    padding: 44px 0;
  }

}

/* ================================================================
   ABOUT PAGE — MANIFESTO
   ================================================================ */
.mnf-section {
  background: #FCF1F1;
  padding: 60px 0;
}

.mnf-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnf-section.is-visible .mnf-inner {
  opacity: 1;
  transform: translateY(0);
}

.mnf-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  text-align: center;
  color: var(--light-theme-red);
  margin-bottom: 56px;
}

.mnf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
}

.mnf-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mnf-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-top: 2px;
  flex-shrink: 0;
}

.mnf-item p {
  font-size: 1.1rem;
  line-height: 1.7;
  text-align: justify;
  color: #262626;
}

@media (max-width: 700px) {
  .mnf-section {
    padding: 60px 0;
  }

  .mnf-title {
    margin-bottom: 36px;
  }

  .mnf-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* ================================================================
   ABOUT PAGE — WHY PARTNER WITH US
   ================================================================ */
.wpu-section {
  background: #FCF1F1;
  padding: 90px 0;
}

.wpu-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.wpu-header {
  margin-bottom: 48px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.wpu-section.is-visible .wpu-header {
  opacity: 1;
  transform: translateY(0);
}

.wpu-header .overview-label {
  color: black;
}

.wpu-header .overview-label::after {
  left: 0;
  transform: none;
  width: 0;
  transition: width 0.5s ease 0.4s;
}

.wpu-section.is-visible .wpu-header .overview-label::after {
  width: 34px;
}

.wpu-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  margin: 8px 0 0;
  line-height: 1.15;
}

.wpu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.wpu-card {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 30px 26px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

.wpu-section.is-visible .wpu-card {
  animation: wpuCardReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wpu-section.is-visible .wpu-card:nth-child(1) {
  animation-delay: 0.1s;
}

.wpu-section.is-visible .wpu-card:nth-child(2) {
  animation-delay: 0.18s;
}

.wpu-section.is-visible .wpu-card:nth-child(3) {
  animation-delay: 0.26s;
}

.wpu-section.is-visible .wpu-card:nth-child(4) {
  animation-delay: 0.34s;
}

.wpu-section.is-visible .wpu-card:nth-child(5) {
  animation-delay: 0.42s;
}

.wpu-section.is-visible .wpu-card:nth-child(6) {
  animation-delay: 0.5s;
}

@keyframes wpuCardReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wpu-card:hover {
  border-color: rgba(223, 0, 25, 0.38);
  transform: translateY(-4px);
}

.wpu-card-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  margin-bottom: 22px;
}

.wpu-card-title {
  font-family: var(--font-subheading);
  font-size: 18px;
  font-weight: 600;
  color: black;
  line-height: 1.4;
  margin-bottom: 12px;
}

.wpu-card-desc {
  font-size: 1rem;
  color: #262626;
  line-height: 1.65;
}

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

@media (max-width: 560px) {
  .wpu-section {
    padding: 52px 0;
  }

  .wpu-grid {
    grid-template-columns: 1fr;
  }

  .wpu-card {
    padding: 24px 20px;
  }
}

/* ================================================================
   CONTACT PAGE — CONTACT HERO
   ================================================================ */
.cth-section {
  position: relative;
  background: #0D0D0D;
  padding: 80px 0 60px;
  overflow: hidden;
}

.cth-bg-img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 90vw);
  max-width: 900px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  opacity: 0.92;
}

.cth-inner {
  position: relative;
  z-index: 1;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.cth-header {
  text-align: center;
  max-width: 760px;
  margin: 25px auto 56px;
}

.cth-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 500;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.cth-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.8;
}

.cth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.cth-card {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 26px 24px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.cth-card:hover {
  border-color: rgba(223, 0, 25, 0.38);
  transform: translateY(-4px);
}

.cth-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--purple-vivid);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.cth-card-icon i {
  color: #fff;
  font-size: 1.1rem;
}

.cth-card-title {
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 12px;
}

.cth-card-desc {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 18px;
}

.cth-card-link {
  display: inline-block;
  font-family: var(--font-subheading);
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.25s ease;
  word-break: break-word;
}

.cth-card-link:hover {
  opacity: 0.75;
}

@media (max-width: 1100px) {
  .cth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .cth-section {
    padding: 60px 0 44px;
  }

  .cth-header {
    margin-bottom: 36px;
  }

  .cth-grid {
    grid-template-columns: 1fr;
  }

  .cth-bg-img {
    width: 130vw;
    opacity: 0.6;
  }
}

/* ================================================================
   CONTACT PAGE — CONTACT US (global offices + form)
   ================================================================ */
.cus-section {
  background: #0a0a0a;
  padding: 80px 0 100px;
}

.cus-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* ── Left: global offices ── */
.cus-global {
  background: #000000;
  border-radius: 20px;
  padding: 44px;
}

.cus-global-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 32px;
}

.cus-office {
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cus-office:first-of-type {
  padding-top: 0;
}

.cus-office:last-of-type {
  border-bottom: none;
}

.cus-office-head {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.cus-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.cus-office-name {
  font-family: var(--font-subheading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}

.cus-office-addr {
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 10px;
}

.cus-office-line {
  display: block;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 4px;
  transition: color 0.25s ease;
}

.cus-office-line:hover {
  color: var(--primary-purple);
}

/* ── Right: form ── */
.cus-form-wrap {
  background: #000000;
  border-radius: 20px;
  padding: 44px;
}

.cus-form-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 28px;
}

.cus-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.cus-field {
  margin-bottom: 18px;
}

.cus-field label {
  display: block;
  font-family: var(--font-subheading);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

.cus-field input,
.cus-field select,
.cus-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--white);
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.cus-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.cus-field select option {
  background: #161616;
  color: var(--white);
}

.cus-field input::placeholder,
.cus-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.32);
}

.cus-field input:focus,
.cus-field select:focus,
.cus-field textarea:focus {
  border-color: var(--purple-vivid);
  background: rgba(255, 255, 255, 0.07);
}

.cus-field textarea {
  resize: vertical;
  min-height: 110px;
}

.cus-field input.has-error,
.cus-field select.has-error,
.cus-field textarea.has-error {
  border-color: #ff4d4f;
}

.cus-field-error {
  display: block;
  min-height: 16px;
  font-size: 0.76rem;
  color: #ff6b6d;
  margin-top: 6px;
}

.cus-captcha-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.cus-captcha-canvas {
  display: block;
  width: 160px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #141414;
}

.cus-captcha-refresh {
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.cus-captcha-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 54px;
  margin: 0;
}

.cus-captcha-refresh:hover {
  border-color: var(--purple-vivid);
  color: var(--purple-vivid);
  background: rgba(255, 255, 255, 0.07);
}

.cus-captcha-refresh i {
  transition: transform 0.35s ease;
}

.cus-captcha-refresh:active i {
  transform: rotate(180deg);
}

.cus-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  margin-bottom: 4px;
}

.cus-checkbox input {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--purple-vivid);
  cursor: pointer;
  flex-shrink: 0;
}

.cus-form-status {
  font-size: 0.85rem;
  font-weight: 600;
  min-height: 20px;
  margin: 14px 0 0;
}

.cus-form-status--success {
  color: #3ddc84;
}

.cus-form-status--error {
  color: #ff6b6d;
}

.cus-submit-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--purple-vivid);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 15px 20px;
  font-family: var(--font-roboto-flex);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease;
}

.cus-submit-btn:hover:not(:disabled) {
  background: var(--purple-btn);
}

.cus-submit-btn:disabled {
  cursor: not-allowed;
}

.cus-submit-btn.is-loading {
  opacity: 0.75;
}

.cus-submit-btn.is-success {
  background: #1f9d55;
  animation: cusSubmitPop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cus-submit-label i {
  margin-right: 6px;
}

@keyframes cusSubmitPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.04);
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 1024px) {
  .cus-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cus-form-wrap {
    padding: 32px;
  }
}

@media (max-width: 560px) {
  .cus-section {
    padding: 56px 0 70px;
  }

  .cus-form-wrap {
    padding: 24px;
    border-radius: 16px;
  }

  .cus-form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cus-captcha-row {
    flex-wrap: wrap;
  }

  .cus-captcha-input {
    flex-basis: 100%;
  }
}

/* ================================================================
   MANAGEMENT TEAM PAGE — TEAM HERO
   ================================================================ */
.thr-section {
  background: #000;
  padding: 160px 0 90px;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.thr-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.thr-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.thr-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 16px 0 22px;
}

.thr-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.8;
}

@media (max-width: 560px) {
  .thr-section {
    padding: 120px 0 60px;
  }
}

/* ================================================================
   MANAGEMENT TEAM PAGE — MANAGEMENT TEAM
   ================================================================ */
.mgt-section {
  background: #FCF1F1;
  padding: 50px 0 40px;
}

.mgt-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* ── Row 1: title + description ── */
.mgt-row1 {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 64px;
}

.mgt-title {
  flex: 0 0 38%;
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.15;
}

.mgt-row1-desc {
  flex: 1;
  font-size: 16.5px;
  color: #262626;
  line-height: 1.85;
}

/* ── Row 2: CEO profile ── */
.mgt-row2 {
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  gap: 56px;
  margin-bottom: 64px;
}

.mgt-ceo-img-wrap {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

.mgt-ceo-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1;
  background: #fff;
  color: var(--purple-vivid);
  font-family: var(--font-subheading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 20px;
}

.mgt-ceo-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 460 / 480;
  object-fit: cover;
  display: block;
}

.mgt-ceo-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mgt-ceo-name {
  font-family: var(--font-roboto-flex);
  font-size: clamp(0.9rem, 1.3vw, 1.650rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: black;
  margin-bottom: 16px;
}

.mgt-ceo-desc {
  font-size: 16.5px;
  color: #262626;
  line-height: 1.8;
  margin-bottom: 20px;
}

.mgt-ceo-socials {
  display: flex;
  gap: 10px;
}

.mgt-ceo-social {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-theme-red);
  color: white;
  font-size: 0.9rem;
  transition: background var(--transition), border-color var(--transition);
}

.mgt-ceo-social:hover {
  background: transparent;
  border-color: var(--light-theme-red);
  color: var(--light-theme-red);
}

.mgt-ceo-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 28px 0;
}

.mgt-ceo-subhead {
  font-family: var(--font-subheading);
  font-size: clamp(0.9rem, 1.3vw, 1.650rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: black;
  margin-bottom: 14px;
}

.mgt-ceo-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.mgt-ceo-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(0.9rem, 1.2vw, 1.250rem);
  color: black;
}

.mgt-ceo-checklist i {
  color: var(--primary-purple);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ── Row 3: flip cards ── */
.mgt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mgt-card {
  perspective: 1400px;
  aspect-ratio: 280 / 360;
  cursor: pointer;
}

.mgt-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}

.mgt-card:hover .mgt-card-inner,
.mgt-card:focus-within .mgt-card-inner {
  transform: rotateY(180deg);
}

.mgt-card-face {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  overflow: hidden;
  backface-visibility: hidden;
}

.mgt-card-front {
  background: #111;
}

.mgt-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mgt-card-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 16px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.88) 78%);
  text-align: center;
}

.mgt-card-name {
  font-family: var(--font-roboto-flex);
  font-size: clamp(0.875rem, 1.042vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 4px;
}

.mgt-card-role {
  font-size: clamp(0.688rem, 0.729vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
}

.mgt-card-back {
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transform: rotateY(180deg);
}

.mgt-card-back-name {
  font-family: var(--font-roboto-flex);
  font-size: clamp(0.875rem, 1.042vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white);
  margin-bottom: 4px;
}

.mgt-card-back-role {
  font-size: clamp(0.688rem, 0.729vw, 0.875rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--primary-purple);
  margin-bottom: 14px;
}

.mgt-card-back-desc {
  font-size: 1rem;
  line-height: 1.6;
  color: white;
  margin-bottom: 10px;
}

@media (max-width: 1150px) {
  .mgt-row1 {
    flex-direction: column;
    gap: 18px;
  }

  .mgt-title {
    flex-basis: auto;
  }

  .mgt-row2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .mgt-ceo-img {
    aspect-ratio: 16 / 10;
  }

  .mgt-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Bump font sizes: vw values are relative to viewport, not card width */
  .mgt-card-name,
  .mgt-card-back-name {
    font-size: 1rem;
    /* 16px */
  }

  .mgt-card-role,
  .mgt-card-back-role {
    font-size: 0.8125rem;
    /* 13px */
  }

  .mgt-card-back-desc {
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 6px;
  }
}

@media (max-width: 992px) {
  .mgt-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards are now ~50vw wide — scale down height a little */
  .mgt-card {
    aspect-ratio: 280 / 320;
  }

  /* Centre content vertically to eliminate the bottom gap */
  .mgt-card-back {
    justify-content: center;
    gap: 6px;
    padding: 28px 24px;
  }


}

@media (max-width: 769px) {

  .mgt-card-name,
  .mgt-card-back-name {
    font-size: 0.9375rem;
    /* 15px */
  }

  .mgt-card-role,
  .mgt-card-back-role {
    font-size: 0.75rem;
    /* 12px */
  }

  .mgt-card-back-desc {
    font-size: 0.8125rem;
    /* 13px */
  }
}

@media (max-width: 560px) {
  .mgt-section {
    padding: 0 0 60px;
  }

  .mgt-row1 {
    margin-bottom: 40px;
  }

  .mgt-row2 {
    margin-bottom: 40px;
  }

  .mgt-grid {
    grid-template-columns: 1fr;
  }

  .mgt-card {
    aspect-ratio: 280 / 320;
  }

  .mgt-card-back-desc {
    font-size: 16px;
  }
}

/* === PAGE — OUR WORK CULTURE === */
/* wch = hero | wcc = content | otg = opportunities | rtd = roles | qte = qualified */

/* ── WORK CULTURE HERO ── */

.wch-section {
  position: relative;
  min-height: 580px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 100px 0 100px;
}

.wch-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.wch-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.wch-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.wch-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  padding: 0 var(--section-px);
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.wch-section.is-visible .wch-inner {
  opacity: 1;
  transform: none;
}

.wch-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--white);
  line-height: 1.12;
  margin: 20px 0 24px;
}

.wch-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  max-width: 60%;
  margin: 0 auto;
}

/* ── WORK CULTURE CONTENT ── */

.wcc-section {
  background: #FCF1F1;
  padding: 20px 0 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.wcc-section.is-visible {
  opacity: 1;
  transform: none;
}

.wcc-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.wcc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}

.wcc-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wcc-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.18;
  margin: 0;
}

.wcc-body {
  font-size: 19px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
}

.wcc-checklist {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.wcc-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  color: #262626;
  line-height: 1.55;
}

.wcc-check-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.wcc-img {
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.wcc-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* Trust Badges — 5 horizontal items, icon left + text right */
.wcc-badges {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  /* border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); */
}

.wcc-badge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  border: 1px solid #B1B1B1;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.wcc-badge:hover {
  border-color: rgba(223, 0, 25, 0.45);
  transform: translateY(-3px);
}

.wcc-badge-icon {
  width: 35px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wcc-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wcc-badge-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wcc-badge-title {
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--light-theme-red);
  margin: 0;
  line-height: 1.3;
}

.wcc-badge-desc {
  font-family: var(--font-body);
  font-size: 0.76rem;
  color: #262626;
  line-height: 1.4;
  margin: 0;
}

/* ── OTG — OPPORTUNITIES TO GROW ── */

.otg-section {
  background: #0a0a0a;
  padding: 60px 0;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.otg-section.is-visible {
  opacity: 1;
  transform: none;
}

.otg-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.otg-header {
  text-align: center;
  margin-bottom: 52px;
}

.otg-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--white);
  line-height: 1.12;
  margin: 0 0 28px;
}

.otg-desc {
  font-size: 19px;
  color: white;
  line-height: 1.75;
  text-align: center;
}

.otg-desc--mt {
  margin-top: 14px;
}

.otg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.otg-card {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.35s ease;
  cursor: default;
}

.otg-card:hover {
  border-color: var(--purple-vivid);
}

.otg-card-num {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 1px;
}

.otg-card-title {
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--white);
  margin: 0;
  padding-left: 12px;
  line-height: 1.3;
}

/* Accent bar overhangs into the card's padding gutter, flush with the
   card's own edge — matching the .svc-card-title treatment. */
.otg-card-title::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 2px;
  bottom: 2px;
  width: 3px;
  background: var(--purple-vivid);
  border-radius: 2px;
}

.otg-card-desc {
  font-size: 15px;
  color: #ffffff;
  line-height: 1.65;
  margin: 0;
}

/* ── ROLES TO DISPLAY ── */

.rtd-section {
  background: #FCF1F1;
  padding: 0 0 100px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rtd-section.is-visible {
  opacity: 1;
  transform: none;
}

.rtd-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.rtd-row1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 20px 0 30px;
}

.rtd-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rtd-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.15;
  margin: 0;
}

.rtd-desc {
  font-size: 19px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
}

.rtd-img {
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}

.rtd-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

/* Pills — wrapping rows */
.rtd-row2 {
  /* border-top: 1px solid rgba(255, 255, 255, 0.08); */
  padding-top: 14px;
}

.rtd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rtd-pill {
  padding: 9px 22px;
  border: 1px solid #262626;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: #262626;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  user-select: none;
  background-color: transparent;
}

.rtd-pill:hover {
  background: var(--light-theme-red);
  border-color: var(--light-theme-red);
  color: var(--white);
}

/* ── QUALIFIED TO EXCEL ── */

.qte-section {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.qte-section.is-visible {
  opacity: 1;
  transform: none;
}

.qte-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.qte-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.qte-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background: linear-gradient(to right, rgba(13, 13, 13, 0.1) 0%, rgba(13, 13, 13, 0.45) 38%, #0D0D0D 62%); */
  z-index: 1;
}

.qte-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
}

.qte-content {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.qte-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--white);
  line-height: 1.12;
  margin: 0;
}

.qte-desc {
  font-size: 17px;
  color: white;
  line-height: 1.75;
  margin: 0;
}

/* ── RESPONSIVE — OUR WORK CULTURE ── */

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

  .wcc-badges {
    grid-template-columns: repeat(3, 1fr);
  }

  .rtd-row1 {
    padding-top: 30px;
  }

}

@media (max-width: 1024px) {
  .wcc-badges {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {

  /* Stack rows vertically — image always first */
  .wcc-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* --emp: text is first in DOM, image is second → push image above text */
  .wcc-row--emp .wcc-img {
    order: -1;
  }

  /* --collab: image is already first in DOM → naturally appears on top */
}

@media (max-width: 900px) {

  .rtd-row1 {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px;
  }

  .qte-inner {
    justify-content: flex-start;
  }

  .qte-section::before {
    background: rgba(13, 13, 13, 0.78);
  }

  .qte-content {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  .wcc-badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 769px) {
  .wch-section {
    min-height: 420px;
    padding: 80px 0 70px;
  }

  .wcc-section {
    padding: 60px 0 0;
  }

  .otg-section {
    padding: 70px 0;
  }

  .otg-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .rtd-section {
    padding: 0 0 70px;
  }

  .qte-section {
    padding: 70px 0;
  }
}

@media (max-width: 640px) {
  .wcc-row {
    padding: 44px 0;
  }

  .wcc-badges {
    grid-template-columns: 1fr;
    padding: 36px 0;
  }

  .rtd-row2 {
    padding-top: 32px;
  }
}

@media (max-width: 560px) {
  .otg-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .qte-bg {
    display: none;
  }

  .qte-section::before {
    display: none;
  }

  .qte-section {
    background: var(--bg-dark);
    padding: 60px 0;
  }
}



/* ============================================================
   BLOG — SECTION 1: FEATURED + LATEST ARTICLES
============================================================ */

.blg-section {
  padding: 130px 0 90px;
  background: #000000;
}

.blg-inner {
  width: calc(100% - var(--container-margin));
  /* max-width: 75%; */
  margin: 0 auto;
}

/* Section header: heading + description */
.blg-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--white);
  line-height: 1.08;
  margin: 0 0 20px;
}

.blg-intro {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.72;
  max-width: 55%;
  margin: 0 0 52px;
}

/* Two-column layout */
.blg-layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 60px;
  align-items: center;
}

/* ── LEFT: featured article ── */

.blg-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white);
  background: var(--purple-vivid);
  border-radius: 50px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.blg-feat-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 28px;
}

.blg-feat-img {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}

.blg-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s ease;
}

.blg-feat-img:hover img {
  transform: scale(1.04);
}

.blg-feat-caption {
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  margin: 20px 0 24px;
}

/* Author row */
.blg-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.blg-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-vivid), var(--primary-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-roboto-flex);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--white);
}

.blg-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blg-author-name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--white);
}

.blg-author-date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: white;
  margin-left: auto;
}

.blg-author-date svg {
  flex-shrink: 0;
}

/* ── RIGHT: latest articles panel ── */
.blg-right {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  padding: 50px 46px;
}

.blg-latest-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.2;
}

.blg-latest-accent {
  width: 36px;
  height: 3px;
  background: var(--purple-vivid);
  border-radius: 2px;
  margin-bottom: 28px;
}

.blg-latest-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.blg-latest-list li {
  padding: 0;
  margin: 0;
}

.blg-latest-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid #D9D9D9;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.blg-latest-list li:first-child .blg-latest-item {
  padding-top: 0;
}

.blg-latest-list li:last-child .blg-latest-item {
  border-bottom: none;
  padding-bottom: 0;
}

.blg-latest-text {
  flex: 1;
  min-width: 0;
}

.blg-latest-cat {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 6px;
}

.blg-latest-title {
  font-family: var(--font-subheading);
  font-size: var(--fs-h5);
  font-weight: 500;
  color: white;
  line-height: 1.35;
  margin: 0;
  transition: color 0.2s ease;
}

.blg-latest-title-side {
  color: #262626;
  font-family: var(--font-subheading);
  font-size: var(--fs-h5);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  transition: color 0.2s ease;
}

.blg-latest-item:hover .blg-latest-title,
.blg-latest-item:hover .blg-latest-title-side {
  color: var(--light-theme-red);
}

/* Circular arrow button (always rendered, shown on hover) */
.blg-latest-arrow {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--purple-vivid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 18px rgba(223, 0, 25, 0.45);
}

.blg-latest-item:hover .blg-latest-arrow {
  opacity: 1;
  transform: scale(1);
}


/* ============================================================
   BLOG — SECTION 2: CATEGORIES + ARTICLE GRID
============================================================ */

.bcat-section {
  padding: 60px 0 100px;
  background: white;
}

.bcat-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  /* border-top: 1px solid #c63535; */
  padding-top: 40px;
}

.bcat-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  line-height: 1.08;
  margin: 0 0 18px;
}

.bcat-intro {
  font-size: 17px;
  color: #262626;
  line-height: 1.72;
  margin: 0 0 40px;
  max-width: 50%;
}

/* ── Category pill filters ── */
.bcat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}

.bcat-pill {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: black;
  background: transparent;
  border: 1px solid #262626;
  border-radius: 50px;
  padding: 10px 24px;
  cursor: pointer;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  white-space: nowrap;
}

/* .bcat-pill:hover {
  color: var(--light-theme-red);
  border-color: var(--light-theme-red);
} */

.bcat-pill--active {
  color: var(--white);
  background: var(--purple-vivid);
  border-color: var(--purple-vivid);
  box-shadow: 0 4px 18px rgba(223, 0, 25, 0.3);
}

/* ── 3-col article grid ── */
.bcat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

/* hidden card */
.bcat-card.is-hidden {
  display: none;
}

/* ── Article card ── */
.bcat-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: border-color 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
}

.bcat-card:hover {
  border-color: rgba(223, 0, 25, 0.38);
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(223, 0, 25, 0.13);
}

.bcat-card-img-wrap {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: block;
}

.bcat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.bcat-card:hover .bcat-card-img {
  transform: scale(1.04);
}

.bcat-card-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bcat-card-title {
  font-family: var(--font-subheading);
  font-size: 18px;
  font-weight: 500;
  color: black;
  line-height: 1.3;
  margin: 0 0 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bcat-card-desc {
  font-size: 17.5px;
  color: #262626;
  line-height: 1.7;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

/* Author row inside card */
.bcat-card-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bcat-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--purple-vivid), var(--primary-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-roboto-flex);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white);
}

.bcat-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcat-card-author-name {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: black;
}

.bcat-card-date {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: black;
  margin-left: auto;
}

/* ── Pagination dots ── */
.bcat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.bcat-page-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #262626;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bcat-page-arrow:hover {
  border-color: var(--light-theme-red);
  color: var(--light-theme-red);
}

.bcat-page-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bcat-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(39, 38, 38, 0.299);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.bcat-page-dot--active {
  background: var(--purple-vivid);
  transform: scale(1.25);
}


/* ── Responsive ── */

@media (max-width: 1100px) {
  .blg-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .blg-right {
    padding: 28px 24px;
  }
}

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

@media (max-width: 768px) {
  .blg-section {
    padding: 110px 0 60px;
  }

  .bcat-section {
    padding: 60px 0 80px;
  }

  .blg-intro,
  .bcat-intro {
    max-width: 100%;
  }

  .blg-latest-arrow {
    width: 38px;
    height: 38px;
  }

  .bcat-grid {
    grid-template-columns: 1fr;
  }

  .bcat-filters {
    gap: 8px;
  }

  .bcat-pill {
    padding: 8px 18px;
  }
}

@media (max-width: 480px) {
  .blg-feat-img {
    border-radius: 12px;
  }

  .bcat-card-body {
    padding: 18px 18px 20px;
  }
}

/* ============================================================
   ARTICLE / BLOG-DETAIL PAGE
============================================================ */

/* ── Hero ── */
.art-hero {
  background: #000000;
  padding: 140px 0 130px;
  text-align: center;
}

.art-hero-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.art-hero-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #BCBCBC;
  border: 1px solid #BCBCBC;
  border-radius: 50px;
  padding: 6px 20px;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}

.art-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.25rem, 3.167vw, 5rem);
  /* 36 → 80px at 1920px */
  font-weight: 500;
  color: var(--white);
  line-height: 1.08;
  margin: 0 auto 36px;
  max-width: 920px;
}

.art-hero-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.art-meta-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.art-meta-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: white;
}

.art-meta-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple-vivid), var(--primary-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-roboto-flex);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--white);
  flex-shrink: 0;
  overflow: hidden;
}

.art-meta-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-meta-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.art-meta-date {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}

.art-meta-date svg {
  flex-shrink: 0;
  color: white;
}

.art-meta-sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.18);
}

/* ── Banner (overlaps hero by 20%) ── */
.art-banner {
  width: calc(100% - 10%);
  margin: -185px auto 0;
  position: relative;
  z-index: 2;
  border-radius: 12px;
}

.art-banner-img {
  width: 100%;
  border-radius: 12px;
  display: block;
  aspect-ratio: 16 / 6.5;
  object-fit: cover;
}

/* ── Article body: content + sticky sidebar ── */
.art-body {
  background: white;
  padding: 80px 0 40px;

}

.art-body-inner {
  width: calc(100% - 10%);
  margin: 40px auto 0px;
  display: flex;
  gap: 64px;
  align-items: flex-start;

}

.art-content {
  flex: 1 1 0;
  min-width: 0;
}

.art-sidebar {
  flex: 0 0 30vw;
  width: 30vw;
  max-width: 480px;
}

/* ── Left: article content ── */
.art-content>p {
  font-size: 19px;
  /* 16 → 20px at 1920px */
  color: #262626;
  line-height: 1.85;
  margin: 0 0 24px;
  text-align: justify;
}

.art-content h2 {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.5rem, 2.292vw, 2.75rem);
  /* 24 → 44px at 1920px */
  font-weight: 600;
  color: black;
  margin: 32px 0 20px;
  line-height: 1.2;
}

.art-content h3 {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.1rem, 1.563vw, 1.875rem);
  /* 17.6 → 30px at 1920px */
  font-weight: 500;
  color: black;
  margin: 36px 0 14px;
  line-height: 1.25;
}

.art-inline-img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  display: block;
  margin: 40px 0;
  max-height: 440px;
}

/* checklist */
.art-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.art-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  /* matches art-content p */
  color: #262626;
  line-height: 1.75;
  text-align: justify;
}

.art-check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  object-fit: contain;
  display: block;
}

/* ── Right: sticky sidebar ── */
.art-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.art-panel {
  background: #FCF1F1;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 30px 40px;
}

.art-panel-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h4);
  /* 28px at 1920px, up from 22px */
  font-weight: 500;
  color: black;
  margin: 0 0 10px;
  line-height: 1.2;
}

.art-panel-accent {
  width: 28px;
  height: 3px;
  background: var(--purple-vivid);
  border-radius: 2px;
  margin-bottom: 18px;
}

/* TOC list */
.art-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.art-toc-link {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  /* up from --fs-sm (14px) to body (17px) */
  color: #262626;
  text-decoration: none;
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(255, 255, 255, 0.07);
  line-height: 1.45;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.art-toc-link:hover,
.art-toc-link.is-active {
  color: var(--light-theme-red);
  border-left-color: var(--light-theme-red);
}

/* Categories list */
.art-cats-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.art-cats-list li {
  padding-block: 10px;
}

.art-cat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.art-cat-item:first-child {
  padding-top: 0;
}

.art-cat-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.art-cat-item:hover {
  opacity: 0.7;
}

.art-cat-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  color: black;
}

.art-cat-name {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  /* 22px at 1920px, up from 17px */
  font-weight: 500;
  color: black;
}

/* ── Similar Posts ── */
.art-similar {
  background: white;
  padding: 40px 0 40px;

}

.art-similar-inner {
  width: calc(100% - 10%);
  margin: 0 auto;
}

.art-similar-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: black;
  margin: 0 0 48px;
  line-height: 1.1;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .art-body-inner {
    gap: 48px;
  }

  .art-sidebar {
    flex: 0 0 34vw;
    width: 34vw;
  }
}

@media (max-width: 1024px) {
  .art-body-inner {
    flex-direction: column;
  }

  .art-sidebar {
    flex: none;
    width: 100%;
    max-width: 100%;
    position: static;
  }
}

@media (max-width: 768px) {
  .art-hero {
    padding: 100px 0 90px;
  }

  .art-banner {
    margin-top: -80px;
  }

  .art-banner-img {
    border-radius: 14px;
    aspect-ratio: 16/8;
  }

  .art-body {
    padding: 60px 0 80px;
  }

  .art-meta-sep {
    display: none;
  }

  .art-hero-meta {
    gap: 16px;
  }

  .art-similar {
    padding: 60px 0 80px;
  }
}

@media (max-width: 480px) {
  .art-hero {
    padding: 80px 0 70px;
  }

  .art-banner {
    margin-top: -50px;
  }

  .art-banner-img {
    border-radius: 10px;
  }

  .art-hero-meta {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================================
   NEWS & EVENTS PAGE
============================================================ */

/* ── Hero ── */
.nev-hero {
  background: #000000;
  padding: 150px 0 130px;
  position: relative;
}

.nev-hero-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.nev-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--white);
  line-height: 1.08;
  margin: 0 0 20px;
}

.nev-hero-desc {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.72;
  max-width: 60%;
  margin: 0;
}

/* Single source of truth for the hero overlap: .nev-slider is a direct
   sibling of .nev-hero (no intermediate padding to cancel), so this
   margin IS the overlap amount — -110px is ~15% of the card's own
   height (aspect-ratio 16/7 at typical desktop widths). */
.nev-slider {
  position: relative;
  z-index: 2;
  margin-top: -110px;
  padding-bottom: 40px;
}

.nev-slider::before {
  content: "";
  position: absolute;
  top: 109px;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: -1;
}

.nev-slider-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  position: relative;
}

/* Slides wrapper */
.nev-slides {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.nev-slide {
  display: none;
  position: relative;
}

.nev-slide.is-active {
  display: block;
}

.nev-slide-img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

/* Gradient overlay */
.nev-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.42) 45%,
      transparent 100%);
  pointer-events: none;
}

/* "Upcoming event" badge */
.nev-slide-badge {
  position: absolute;
  top: 28px;
  left: 28px;
  background: var(--white);
  color: #111;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 6px 18px;
  border-radius: 50px;
  letter-spacing: 0.03em;
}

/* Bottom-left text content */
.nev-slide-content {
  position: absolute;
  bottom: 36px;
  left: 36px;
  right: 140px;
}

.nev-slide-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 12px;
  max-width: 580px;
}

.nev-slide-desc {
  font-size: 16.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.65;
  margin: 0 0 18px;
  max-width: 520px;
}

.nev-slide-meta {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.nev-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.72);
}

.nev-meta-item svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* Nav arrows — bottom-right inside slider */
.nev-slider-nav {
  position: absolute;
  bottom: 36px;
  right: 36px;
  display: flex;
  gap: 10px;
  z-index: 4;
}

.nev-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.15);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.nev-nav-btn:hover,
.nev-nav-btn--filled {
  background: var(--purple-vivid);
  border-color: var(--purple-vivid);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(223, 0, 25, 0.4);
}

/* ── What's going on ── */
.nev-news {
  background: white;
  padding: 0 0 100px;
}

.nev-news-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.nev-news-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 0 26px;
  line-height: 1.1;
}

/* Stacked news cards */
.nev-cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 48px;
}

.nev-card {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.6);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.nev-card:hover {
  border-color: rgba(223, 0, 25, 0.35);
  transform: translateX(4px);
}

.nev-card.is-hidden {
  display: none;
}

.nev-card-img-wrap {
  flex-shrink: 0;
  width: 300px;
  overflow: hidden;
}

.nev-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.nev-card:hover .nev-card-img {
  transform: scale(1.05);
}

.nev-card-body {
  flex: 1;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nev-card-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: black;
  margin: 0 0 14px;
  line-height: 1.3;
}

.nev-card-desc {
  font-size: 16.5px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
}

/* Pagination */
.nev-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.nev-page-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid black;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.nev-page-arrow:hover {
  border-color: var(--light-theme-red);
  color: var(--light-theme-red);
}

.nev-page-dots {
  display: flex;
  gap: 8px;
}

.nev-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(2, 2, 2, 0.18);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nev-page-dot--active {
  background: var(--purple-vivid);
  transform: scale(1.3);
}

@media (max-width: 1024px) {
  .nev-card {
    flex-direction: column;
  }

  .nev-card-img-wrap {
    width: 100%;
    height: 220px;
  }

  .nev-card-body {
    padding: 24px 28px;
  }
}

@media (max-width: 768px) {
  .nev-hero {
    padding: 100px 0 40px;
  }

  .nev-hero-inner {
    text-align: center;

  }

  .nev-hero-inner .nev-hero-desc {
    max-width: 100%;
  }


  .nev-slider {
    padding: 0 0 60px;
    margin-top: 30px;
  }

  .nev-slider-inner {
    margin-top: clamp(-40px, -6vw, -28px);
  }

  .nev-slide-content {
    left: 24px;
    right: 24px;
    bottom: 32px;
    /* sits at bottom, clears the nav row */
  }

  .nev-slide-title {
    font-size: var(--fs-body);
    line-height: 1.3;
    margin: 0 0 10px;
  }

  .nev-slide-desc {
    display: none;
  }

  .nev-slide-meta {
    gap: 14px;
  }

  .nev-meta-item {
    font-size: var(--fs-sm);
  }

  .nev-slider-nav {
    bottom: 24px;
    right: 24px;
  }

  .nev-news {
    padding: 60px 0 80px;
  }

  .nev-card-img-wrap {
    width: 180px;
  }
}

@media (max-width: 560px) {
  .nev-card {
    flex-direction: column;
  }

  .nev-card-img-wrap {
    width: 100%;
    height: 200px;
  }

  .nev-card-body {
    padding: 20px;
  }

  .nev-slide-content {
    left: 18px;
    right: 18px;
    bottom: 15px;
  }

  .nev-slide-title {
    font-size: var(--fs-sm);
    line-height: 1.35;
    margin: 0 0 8px;
  }

  .nev-slide-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ============================================================
   CASE STUDIES PAGE
============================================================ */

/* ── Hero: two-layer bg (black → image) ── */
.cs-hero {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* Bottom layer: bg image */
.cs-hero-bg {
  position: absolute;
  inset: 0;
  background: url('../images/banner/case-studies-bg.png') center/cover no-repeat;
  z-index: 0;
}

/* Top layer: black gradient fades to transparent toward bottom */
.cs-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
      #000 0%,
      #000 45%,
      rgba(0, 0, 0, 0.7) 70%,
      rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
}

.cs-hero-inner {
  position: relative;
  z-index: 2;
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  padding: 140px 0 100px;
}

.cs-hero-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--purple-vivid);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
  position: relative;
}

.cs-hero-label::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--purple-vivid);
  border-radius: 2px;
  margin-top: 4px;
}

.cs-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h1);
  font-weight: 600;
  color: var(--white);
  line-height: 1.08;
  margin: 0 auto 20px;
  max-width: 720px;
}

.cs-hero-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.72;
  max-width: 480px;
  margin: 0 auto;
}

/* ── Projects We Excelled ── */
.cs-projects {
  background: white;
  padding: 60px 0 80px;
}

.cs-projects-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.cs-projects-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 0 32px;
  line-height: 1.1;
}

.cs-filter-intro {
  font-size: 19px;
  margin: 20px auto;
  max-width: 80%;
  text-align: center;
  color: #262626;

}

/* Filter pills */
.cs-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 52px;
}

.cs-pill {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: #262626;
  background: transparent;
  border: 1px solid #D9D9D9;
  border-radius: 50px;
  padding: 9px 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.cs-pill:hover {
  color: var(--light-theme-red);
  border-color: var(--light-theme-red);
}

.cs-pill--active {
  color: var(--white);
  background: var(--light-theme-red);
  border-color: var(--light-theme-red);
  box-shadow: 0 4px 18px rgba(223, 0, 25, 0.3);
}

/* 2-column card grid */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

/* Individual card */
.cs-card {
  background: transparent;
  border: 1px solid #D9D9D9;
  border-radius: 14px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.25s ease;
  text-decoration: none;
}

.cs-card:hover {
  border-color: var(--light-theme-red);
  transform: translateY(-3px);
}

.cs-card.is-hidden {
  display: none;
}

.cs-card-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: black;
  line-height: 1.28;
  margin: 0;
}

.cs-card-desc {
  font-size: 19px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
  overflow: hidden;
  text-align: justify;
  flex: 1;
}

.cs-card-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: white;
  background: var(--light-theme-red);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 8px 18px;
  width: fit-content;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cs-card-btn:hover {
  border-color: var(--purple-vivid);
  color: var(--purple-vivid);
  background: transparent;
}

/* Pagination (reuses same pattern) */
.cs-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cs-page-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #000;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.cs-page-arrow:hover {
  border-color: var(--light-theme-red);
  color: var(--light-theme-red);
}

.cs-page-dots {
  display: flex;
  gap: 8px;
}

.cs-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9D9D9;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cs-page-dot--active {
  background: var(--light-theme-red);
  transform: scale(1.3);
}

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

@media (max-width: 768px) {
  .cs-hero-inner {
    padding: 110px 0 80px;
  }

  .cs-projects {
    padding: 60px 0 80px;
  }

  .cs-card {
    padding: 24px 22px;
  }
}

@media (max-width: 480px) {
  .cs-pill {
    padding: 7px 16px;
    font-size: var(--fs-sm);
  }
}


/* ============================================================
   CASE STUDY DETAIL — LOGISTICS PAGE  (.lcs-*)
============================================================ */

/* ── Hero: tag + large title ── */
.lcs-hero {
  background: #000000;
  padding: 120px 0 60px;
}

.lcs-hero-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.lcs-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: #BCBCBC;
  background: transparent;
  border: 1px solid #BCBCBC;
  border-radius: 50px;
  padding: 5px 16px;
  margin-bottom: 28px;
  letter-spacing: 0.03em;
}

.lcs-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.5rem, 3.4vw, 110px);
  font-weight: 500;
  color: var(--white);
  line-height: 1.08;
  margin: 0;
  max-width: 860px;
}

/* ── About + Requirement ── */
.lcs-info {
  background: #000000;
  padding: 40px 0 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lcs-info-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.lcs-info-col-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.2;
}

.lcs-info-col-body {
  text-align: justify;
  font-size: 17px;
  color: white;
  line-height: 1.78;
}

/* ── Business Challenge + Our Solution ── */
.lcs-biz {
  background: #000000;
  padding: 60px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lcs-biz-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.lcs-biz-col-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--white);
  margin-bottom: 28px;
  line-height: 1.2;
}

.lcs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lcs-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  text-align: justify;
  font-size: 17px;
  color: white;
  line-height: 1.6;
}

.lcs-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  object-fit: contain;
  display: block;
  opacity: 0.65;
}

.lcs-check-icon--purple {
  opacity: 1;
  filter: hue-rotate(0deg) saturate(2) brightness(1.2);
}

/* ── The Result ── */
.lcs-result {
  background: #FCF1F1;
  padding: 40px 0 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lcs-result-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.lcs-result-title {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: black;
}


.lcs-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lcs-result-card {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.25s ease;
}

.lcs-result-card:hover {
  border-color: var(--light-theme-red);
}

.lcs-result-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #DF0019;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lcs-result-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.lcs-result-card-title {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 600;
  color: black;
  line-height: 1.3;
  margin: 0;
}

.lcs-result-card-desc {
  font-size: 16px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

/* ── Client Testimonial ── */
.lcs-testimonial {
  background: #000000;
  padding: 60px 0 80px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.lcs-testimonial-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.lcs-testimonial-heading {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--white);
  text-align: center;
  margin-bottom: 32px;
}

/* Card wrapper — extra top padding so the icon can overflow upward */
.lcs-testi-wrap {
  position: relative;
  padding-top: 44px;
}

/* The actual card */
.lcs-testi-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 60px 60px 52px;
  position: relative;
}

/* Quote icon sits half outside top edge */
.lcs-quote-icon {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #DF0019;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(223, 0, 25, 0.4);
  flex-shrink: 0;
  z-index: 1;
}


/* Stars */
.lcs-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 28px;
}

.lcs-star {
  width: 20px;
  height: 20px;
  color: #F5C518;
}

/* Testimonial text */
.lcs-testi-text {
  font-family: var(--font-body);
  font-size: 18px;
  color: white;
  line-height: 1.82;
  text-align: justify;
  margin-bottom: 36px;

}

/* Attribution */
.lcs-testi-attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lcs-testi-name {
  font-family: var(--font-roboto-flex);
  font-size: var(--fs-h5);
  font-weight: 500;
  color: var(--white);
}

.lcs-testi-role {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--purple-vivid);
  font-weight: 500;
}

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

@media (max-width: 900px) {
  .lcs-info-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .lcs-biz-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .lcs-hero {
    padding: 90px 0 56px;
  }

  .lcs-info {
    padding: 56px 0;
  }

  .lcs-biz {
    padding: 56px 0;
  }

  .lcs-result {
    padding: 56px 0 70px;
  }

  .lcs-testimonial {
    padding: 56px 0 80px;
  }

  .lcs-result-grid {
    grid-template-columns: 1fr;
  }

  .lcs-testi-card {
    padding: 52px 28px 40px;
  }
}

@media (max-width: 480px) {
  .lcs-hero-title {
    font-size: clamp(2rem, 8vw, 3.2rem);
  }

  .lcs-testi-card {
    padding: 52px 20px 32px;
  }
}

/* ============================================================
   TESTIMONIALS PAGE  (.tsm-*)
============================================================ */

/* ── Hero ── */
.tsm-hero {
  background: #000000;
  padding: 140px 0 220px;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* No-overlap variant: used on pages where next section is not overlapping the hero */
.tsm-hero--flat {
  padding-bottom: 80px;
}

.tsm-hero-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

/* Filter dropdown lives at the bottom of the hero */
.tsm-hero-filter {
  width: calc(100% - var(--container-margin));
  margin: 52px auto 0;
  display: flex;
  justify-content: flex-end;
}

.tsm-hero-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--purple-vivid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 20px;
  position: relative;
}

.tsm-hero-label::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--purple-vivid);
  border-radius: 2px;
  margin-top: 4px;
}

.tsm-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.06;
  margin: 0 auto 24px;
  max-width: 840px;
}

.tsm-hero-desc {
  font-size: 19px;
  color: #ffffff;
  line-height: 1.75;
  max-width: 60%;
  margin: 0 auto;
}

/* ── Main section ── */
/* Panel slides 80px into hero — first card's top sits ~28px above the hero bottom */
.tsm-section {
  background: #FCF1F1;
  padding: 0 0 50px;
  position: relative;
  z-index: 2;
  margin-top: -80px;
}

.tsm-section-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.tsm-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tsm-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  pointer-events: none;
  width: 10px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tsm-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 10px 40px 10px 16px;
  cursor: pointer;
  outline: none;
  min-width: 190px;
  transition: border-color 0.2s ease;
}

.tsm-select option,
.tsm-select optgroup {
  background: #1a1a2e;
  color: #fff;
  font-size: 1rem;
}

.tsm-select:focus {
  border-color: var(--purple-vivid);
}

/* Cards stack */
.tsm-cards {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Individual card */
.tsm-card {
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 44px 44px 40px;
  position: relative;
  transition: border-color 0.25s ease;

}

.tsm-card.is-hidden {
  display: none;
}

.tsm-card:hover {
  border-color: rgba(223, 0, 25, 0.28);
}

/* Quote icon: purple circle, half above top-left of card */
.tsm-quote-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--light-theme-red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: absolute;
  top: -24px;
  left: 44px;
}

/* Font Awesome quote glyph */
.tsm-quote-icon i {
  font-size: 20px;
  color: #fff;
  line-height: 1;
}

/* Stars */
.tsm-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  color: #F5C518;
}

/* Font Awesome star glyph */
.tsm-star {
  font-size: 16px;
  color: #F5C518;
  line-height: 1;
}

/* 2-col inner layout */
.tsm-card-inner {
  display: grid;
  grid-template-columns: 45% 1fr;
  gap: 48px;
  align-items: start;
}

/* Left column */
.tsm-card-quote {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.1rem, 1.563vw, 1.875rem);
  font-weight: 600;
  color: black;
  line-height: 1.32;
  margin: 0 0 28px;
}

.tsm-card-name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: black;
  margin: 0 0 2px;
}

.tsm-card-role {
  font-family: var(--font-body);
  font-size: 14px;
  color: #262626;
  margin: 0;
}

.tsm-card-loc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.38);
  margin: 2px 0 0;
}

/* Right column: full description */
.tsm-card-desc {
  font-size: 17px;
  color: #262626;
  line-height: 1.78;
  margin: 0;
}

/* Pagination */
.tsm-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 52px;
}

.tsm-page-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid black;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: black;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.tsm-page-arrow:hover:not(:disabled) {
  border-color: var(--light-theme-red);
  color: var(--light-theme-red);
}

.tsm-page-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.tsm-page-dots {
  display: flex;
  gap: 8px;
}

.tsm-page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D9D9D9;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.tsm-page-dot--active {
  background: var(--purple-vivid);
  transform: scale(1.3);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tsm-card-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .tsm-hero {
    padding: 100px 0 155px;
  }

  .tsm-hero--flat {
    padding-bottom: 60px;
  }

  .tsm-hero-filter {
    margin-top: 36px;
  }

  .tsm-section {
    padding: 0 0 70px;
    margin-top: -60px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }

  .tsm-cards {
    padding-top: 44px;
  }

  .tsm-card {
    padding: 40px 24px 28px;
  }

  .tsm-quote-icon {
    left: 24px;
  }
}

@media (max-width: 480px) {
  .tsm-hero-filter {
    justify-content: flex-start;
  }

  .tsm-card {
    padding: 40px 18px 24px;
  }

  .tsm-quote-icon {
    left: 18px;
  }

  .tsm-select {
    min-width: 0;
    width: 100%;
  }
}


/* ============================================================
   CSR & ESG PAGE  (.csr-*)
============================================================ */

/* Section: same overlap technique as testimonials — first card sits in hero bottom */
.csr-section {
  background: #FCF1F1;
  padding: 0 0 40px;
  position: relative;
  z-index: 2;
  margin-top: -190px;
}

.csr-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-top: 40px;
}

/* Card: image left, content right */
.csr-card {
  display: flex;
  flex-direction: row;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.csr-card:hover {
  border-color: rgba(223, 0, 25, 0.28);
}

/* Image panel */
.csr-card-img {
  width: 38%;
  flex-shrink: 0;
  background: none;

}

.csr-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

}

/* Content panel */
.csr-card-body {
  flex: 1;
  padding: 40px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  background: #ffffff;
}

/* Date + location row */
.csr-card-meta {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.csr-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: black;
}

.csr-meta-item i {
  font-size: 13px;
  color: var(--light-theme-red);
}

/* Title */
.csr-card-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.25rem, 1.875vw, 2.25rem);
  font-weight: 500;
  color: black;
  line-height: 1.2;
  margin: 0;
}

/* Description */
.csr-card-desc {
  font-size: 16.5px;
  color: #262626;
  opacity: 0.8;
  line-height: 1.75;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .csr-section {
    margin-top: -160px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-bottom: 70px;
  }

  .csr-card {
    flex-direction: column;
  }

  .csr-card-img {
    width: 100%;
    height: 240px;
  }

  .csr-card-body {
    padding: 28px 24px;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .csr-card-body {
    padding: 24px 18px;
  }

  .csr-card-meta {
    gap: 16px;
  }
}


/* ============================================================
   LOCATIONS PAGE  (.loc-*, .infra-*, .adv-*)
============================================================ */

/* ── Map section ── */
.loc-section {
  background: #000;
  position: relative;
  z-index: 2;
  margin-top: -190px;
  padding-bottom: 80px;
}

.loc-map-wrap {
  position: relative;
  width: 100%;
  line-height: 0;
}

.loc-map-img {
  width: 100%;
  display: block;
  opacity: 0.8;
}

/* Pulse animation for location pins */
@keyframes loc-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }

  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.loc-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
}

.loc-pin-dot {
  display: block;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
}

.loc-pin-ring {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: loc-pulse 2s ease-out infinite;
}

/* ── Location cards grid ── */
.loc-cards-wrap {
  padding-top: 36px;
}

.loc-cards-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.loc-card {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.25s ease;
}

.loc-card:hover {
  border-color: rgba(223, 0, 25, 0.3);
}

.loc-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loc-flag {
  width: 28px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
}

.loc-country {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.loc-address {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
  margin: 0;
}

.loc-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-all;
}

.loc-contact i {
  color: var(--purple-vivid);
  font-size: 13px;
  flex-shrink: 0;
}

.loc-contact:hover {
  color: var(--white);
}

/* ── Infrastructure section ── */
.infra-section {
  background: #FCF1F1;
  padding: 80px 0;
}

.infra-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.infra-header {
  margin-bottom: 48px;
  max-width: 50%;
}

.infra-header .overview-label {
  color: black;
}

.infra-header .overview-label::after {
  left: 0;
  transform: none;
}

.infra-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2rem, 3.125vw, 3.75rem);
  font-weight: 600;
  color: black;
  line-height: 1.1;
  margin: 14px 0 18px;
}

.infra-desc {
  font-size: 19px;
  color: #262626;
  line-height: 1.75;
  margin: 0;
}

/* Photo masonry grid */
.infra-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.8fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
}

.infra-img {
  border-radius: 10px;
  overflow: hidden;
}

.infra-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* img1: tall left column */
.infra-img--1 {
  grid-column: 1;
  grid-row: 1 / 3;
}

/* img2/3: stacked in col 2 */
.infra-img--2 {
  grid-column: 2;
  grid-row: 1;
}

.infra-img--3 {
  grid-column: 2;
  grid-row: 2;
}

/* img4: tall center column */
.infra-img--4 {
  grid-column: 3;
  grid-row: 1 / 3;
}

/* img5/6 top row, cols 4-5 */
.infra-img--5 {
  grid-column: 4;
  grid-row: 1;
}

.infra-img--6 {
  grid-column: 5;
  grid-row: 1;
}

/* img7/8 bottom row, cols 4-5 */
.infra-img--7 {
  grid-column: 4;
  grid-row: 2;
}

.infra-img--8 {
  grid-column: 5;
  grid-row: 2;
}

/* ── Advantages section ── */
.adv-section {
  padding: 40px 0;
  background: #FCF1F1;
}

.adv-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

/* Left: 2-col feature grid */
.adv-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 36px;
}

.adv-box {
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  background-color: white;
  border-radius: 4%;
  padding: 20px;
}

.adv-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.adv-box-title {
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 0.833vw, 1rem);
  font-weight: 700;
  color: black;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

.adv-box-desc {
  font-family: var(--font-body);
  font-size: clamp(0.6875rem, 0.729vw, 0.875rem);
  color: #262626;
  line-height: 1.7;
  margin: 0;
  grid-column: 1 / -1;
  grid-row: 2;
}

/* Right: heading content */
.adv-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.25rem, 4.167vw, 5rem);
  font-weight: 550;
  color: black;
  line-height: 1.06;
  margin: 14px 0 24px;
}

.adv-desc {
  font-size: 19px;
  color: #262626;
  line-height: 1.78;
  margin: 0;
}

.adv-content .overview-label {
  color: black;
}

.adv-content .overview-label::after {
  left: 0;
  transform: none;
}

/* ── Locations hero — padding tracks loc-section margin-top at every breakpoint ── */
/*
 * Rule of thumb: hero padding-bottom ≈ |loc-section margin-top| + 30px gap
 * Desktop:  loc margin-top -190px  →  padding-bottom 220px  (30px gap)
 * 992px:    loc margin-top -120px  →  padding-bottom 150px  (30px gap)
 * 768px:    loc margin-top  -80px  →  padding-bottom 110px  (30px gap)
 * 600px:    loc margin-top  -40px  →  padding-bottom  70px  (30px gap)
 * 480px:    loc margin-top  -40px  →  padding-bottom  60px  (20px gap)
 */
.loc-hero {
  padding: 140px 0 220px;
}

@media (max-width: 992px) {
  .loc-hero {
    padding: 120px 0 150px;
  }
}

@media (max-width: 768px) {
  .loc-hero {
    padding: 100px 0 110px;
  }
}

@media (max-width: 600px) {
  .loc-hero {
    padding: 100px 0 70px;
  }
}

@media (max-width: 480px) {
  .loc-hero {
    padding: 80px 0 60px;
  }
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .loc-cards-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .loc-cards-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .loc-section {
    margin-top: -120px;
  }

  .adv-inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  /* Content (right) shows first on mobile */
  .adv-content {
    order: -1;
  }

  .adv-boxes {
    order: 1;
  }
}

@media (max-width: 992px) {
  .infra-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: unset;
    grid-auto-rows: 200px;
  }

  /* Reset all explicit placements so images flow naturally in 3-col grid */
  .infra-img--1,
  .infra-img--2,
  .infra-img--3,
  .infra-img--4,
  .infra-img--5,
  .infra-img--6,
  .infra-img--7,
  .infra-img--8 {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .loc-section {
    margin-top: -80px;
    padding-bottom: 60px;
  }

  .loc-cards-wrap {
    padding-top: 24px;
  }

  .loc-card {
    padding: 20px;
  }

  .loc-contact {
    font-size: 12px;
    word-break: break-word;
  }

  .adv-boxes {
    gap: 28px 24px;
  }

  .infra-section {
    padding: 80px 0;
  }

  .adv-section {
    padding: 80px 0;
  }
}

@media (max-width: 600px) {
  .infra-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }

  .loc-cards-inner {
    grid-template-columns: 1fr;
  }

  .loc-section {
    margin-top: -40px;
  }
}

@media (max-width: 480px) {
  .adv-boxes {
    grid-template-columns: 1fr;
  }

  .infra-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
}


/* ============================================================
   CUSTOMERS PAGE
   ============================================================ */

/* ── Customers Hero ── */
.cust-hero {
  background: #000000;
  padding: 140px 0 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.cust-hero-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.cust-hero-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.06;
  margin: 0 auto 24px;
}

.cust-hero-desc {
  font-size: 19px;
  color: #ffffff;
  line-height: 1.75;
  max-width: 70%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .cust-hero {
    padding: 100px 0 60px;
  }
}

/* ── Stats Section ── */
.cust-stats {
  background: #000;
  padding: 40px 0 60px;
  margin-bottom: -1px;
}

.cust-stats-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cust-stat {
  flex: 1;
  text-align: center;
}

.cust-stat-num {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.5rem, 5.208vw, 6rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.cust-stat-symbol {
  color: var(--purple-vivid);
}

.cust-stat-label {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.729vw, 0.875rem);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.cust-stat-divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* ── Clients Grid ── */
.cust-clients {
  background: #ffffff;
  padding: 80px 0 60px;
}

.cust-clients-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.cust-clients-header {
  text-align: center;
  padding-bottom: 32px;
}

.cust-clients-header .overview-label {
  color: black;
}

.cust-clients-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2rem, 3.125vw, 3.75rem);
  font-weight: 600;
  color: black;
  margin: 16px 0 0;
  line-height: 1.1;
}

.cust-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.cust-logo-item {
  background: #ffffff;
  border: 1px solid #BCBCBC;
  border-radius: 14px;
  padding: 28px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  transition: background 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

.cust-logo-item:hover {
  background: #ffffff;
  border-color: transparent;
}

.cust-logo-item img {
  max-width: 110px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.cust-logo-text {
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.729vw, 0.875rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  text-align: center;
  transition: color 0.25s ease;
  text-transform: uppercase;
}

.cust-logo-item:hover .cust-logo-text {
  color: #111;
}

/* ── Advantage Card (old — commented out) ── */
/*
.cust-adv-section { ... }
.cust-adv-wrap { ... }
.cust-adv-card { ... }
.cust-adv-img-col { ... }
.cust-adv-circle { border: 58px solid var(--purple-vivid); ... }
.cust-adv-circle::after { ... }
.cust-adv-people { ... }
.cust-adv-content { ... }
*/

/* ── Advantage Card v2 ── */
.kgs-adv {
  background: #ffffff;
  padding: 0 0 80px;
}

.kgs-adv-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.kgs-adv-card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 400px;
  border-radius: 24px;
  overflow: hidden;
  background: #000;
}

/* ── Left image column ── */
.kgs-adv-img {
  position: relative;
  flex-shrink: 0;
  width: 40%;
  align-self: stretch;
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Hollow ring behind people — fades out at bottom */
.kgs-adv-img::before {
  content: '';
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: transparent;
  border: 50px solid var(--purple-vivid);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  z-index: 0;
  animation: kgs-circle-pulse 6s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, black 45%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 45%, transparent 85%);
}

@keyframes kgs-circle-pulse {

  0%,
  100% {
    transform: translate(-50%, -52%) scale(1);
  }

  50% {
    transform: translate(-50%, -52%) scale(1.05);
  }
}

@media ((min-width: 992px) and (max-width: 1300px)) {
  .kgs-adv-img::before {
    width: 320px;
    height: 320px;
  }
}

/* Image — full col width, natural height, bottom-anchored in front of circle */
.kgs-adv-img img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ── Right content ── */
.kgs-adv-content {
  position: relative;
  flex: 1;
  z-index: 1;
  padding: 28px 60px 28px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}

.kgs-adv-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kgs-adv-heading {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.25rem, 1.458vw, 1.75rem);
  font-weight: 500;
  color: var(--white);
  margin: 0;
}

.kgs-adv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 32px;
}

/* KGS Advantages block — 3 columns */
.kgs-adv-block:first-child .kgs-adv-list {
  grid-template-columns: repeat(3, 1fr);
}

.kgs-adv-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
}

.kgs-adv-list li i {
  font-size: 9px;
  color: var(--purple-vivid);
  flex-shrink: 0;
}

/* Underline slides in from left on hover — same technique as .footer-link */
.kgs-adv-list li a {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(90deg, var(--primary-purple), var(--purple-vivid));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: left bottom;
  transition: color 0.25s ease, background-size 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.kgs-adv-list li a:hover {
  color: var(--white);
  background-size: 100% 1.5px;
}

@media(min-width:1500px) {
  .kgs-adv-list li {
    font-size: 17px;
  }
}

/* ── Customers Responsive ── */
@media (max-width: 1200px) {
  .cust-logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

/* ── kgs-adv responsive ── */
@media (max-width: 1400px) {
  .kgs-adv-img {
    width: 42%;
  }

  .kgs-adv-content {
    padding: 48px 48px 48px 40px;
  }
}

@media (max-width: 1200px) {
  .kgs-adv-img {
    width: 40%;
  }

  .kgs-adv-content {
    padding: 44px 40px 44px 36px;
  }
}

@media (max-width: 992px) {
  .kgs-adv-card {
    min-height: auto;
  }

  .kgs-adv-img {
    display: none;
  }

  .kgs-adv-content {
    padding: 40px 36px;
    gap: 28px;
  }

  /* Collapse 3-col list to 2 at mid sizes */
  .kgs-adv-block:first-child .kgs-adv-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .kgs-adv-content {
    padding: 32px 24px;
    gap: 24px;
  }

  .kgs-adv-block:first-child .kgs-adv-list {
    grid-template-columns: 1fr;
  }

  .kgs-adv-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .kgs-adv-heading {
    font-size: clamp(1.125rem, 4vw, 1.375rem);
  }
}

@media (max-width: 480px) {
  .kgs-adv-content {
    padding: 28px 18px;
    gap: 20px;
  }

  .kgs-adv-block {
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .cust-stats {
    padding: 0px 0 60px;
  }

  .cust-clients {
    padding: 60px 0 60px;
  }

  .cust-clients-header {
    padding-bottom: 36px;
  }

  .cust-stats-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 0;
  }

  .cust-stat {
    flex: 0 0 50%;
  }

  .cust-stat-divider {
    display: none;
  }

  .cust-logo-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .cust-adv-content {
    padding: 36px 28px;
  }

  .cust-adv-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cust-logo-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .cust-logo-item {
    min-height: 80px;
    padding: 20px 14px;
  }

  .cust-stat {
    flex: 0 0 100%;
  }
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */

/* ── Opening Positions Section ── */
.job-positions {
  background: #000;
  padding: 60px 0 100px;
}

.job-positions-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
}

.job-positions-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2rem, 3.646vw, 4.375rem);
  font-weight: 500;
  color: var(--white);
  margin: 0 0 36px;
  line-height: 1.05;
}

/* ── Filter pills ── */
.job-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 48px;
}

.job-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.job-filter-pill:hover {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--white);
}

.job-filter-pill.is-active {
  background: var(--purple-vivid);
  color: #ffffff;
}

/* ── Job list ── */
.job-list {
  display: flex;
  flex-direction: column;
}

/* ── Individual job card ── */
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 0;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* .job-card:last-child {
  border-bottom: none;
} */

.job-card:hover {
  background: transparent;
}

.job-card--hidden {
  display: none;
}

/* Left content */
.job-card-main {
  flex: 1;
  min-width: 0;
}

.job-card-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.4rem, 1.25vw, 2rem);
  font-weight: 400;
  color: var(--white);
  margin: 0 0 12px;
}

.job-card-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 14px;
}

.job-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
}

.job-meta-item i {
  font-size: 0.75rem;
  color: var(--purple-vivid);
}

.job-card-desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  max-width: 76%;
}

/* Apply button */
.job-card-action {
  flex-shrink: 0;
}

.job-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: white;
  color: #000;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.job-apply-btn i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.job-apply-btn:hover {
  background: var(--purple-vivid);
  border-color: var(--purple-vivid);
  color: var(--white);
}

.job-apply-btn:hover i {
  transform: translateX(3px);
}

/* ── Careers responsive ── */
@media (max-width: 768px) {
  .job-positions {
    padding: 60px 0 80px;
  }

  .job-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px;
  }

  .job-card-action {
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .job-filters {
    gap: 8px;
    margin-bottom: 32px;
  }

  .job-filter-pill {
    padding: 7px 14px;
    font-size: 0.75rem;
  }

  .job-card {
    padding: 20px 16px;
  }

  .job-card-meta {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ============================================================
   CERTIFICATIONS PAGE
   ============================================================ */

.cert-detail {
  background: #000;
  padding: 80px 0 100px;
}

.cert-detail-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ── Each alternating row ── */
.cert-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* Reverse: image left, content right */
.cert-row--reverse {
  direction: rtl;
}

.cert-row--reverse>* {
  direction: ltr;
}

/* ── Content side ── */
.cert-row-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.375rem, 1.875vw, 2.25rem);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
  margin: 0 0 32px;
}

.cert-row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cert-row-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
}

.cert-check-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 3px;
  object-fit: contain;
}

/* ── Image side ── */
.cert-row-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-row-img img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ── Responsive ── */
@media (max-width: 992px) {

  .cert-row,
  .cert-row--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 36px;
  }

  /* Text always first on mobile */
  .cert-row-content {
    order: 1;
  }

  .cert-row-img {
    order: 2;
  }

  .cert-detail-inner {
    gap: 60px;
  }
}

@media (max-width: 768px) {
  .cert-detail {
    padding: 60px 0 80px;
  }

  .cert-detail-inner {
    gap: 48px;
  }
}

@media (max-width: 480px) {
  .cert-row {
    gap: 28px;
  }

  .cert-detail-inner {
    gap: 40px;
  }
}

/* ============================================================
   404 PAGE
   ============================================================ */

.pg404 {
  background: #000;
  padding: 100px 0 120px;
  text-align: center;
}

.pg404-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ── Animated 404 digits ── */
.pg404-number {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
}

.pg404-digit {
  font-family: var(--font-roboto-flex);
  font-size: clamp(7rem, 16vw, 14rem);
  font-weight: 700;
  color: var(--purple-vivid);
  line-height: 1;
  display: inline-block;
  animation: pg404-float 3s ease-in-out infinite;
}

.pg404-digit--mid {
  color: var(--white);
  animation: pg404-float 3s ease-in-out infinite 0.2s, pg404-glow 3s ease-in-out infinite;
  text-shadow: 0 0 60px rgba(108, 40, 217, 0.6);
}

.pg404-digit:last-child {
  animation-delay: 0.4s;
}

@keyframes pg404-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-16px);
  }
}

@keyframes pg404-glow {

  0%,
  100% {
    text-shadow: 0 0 40px rgba(255, 40, 217, 0.5);
  }

  50% {
    text-shadow: 0 0 90px rgba(255, 40, 217, 0.9);
  }
}

/* ── Text ── */
.pg404-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.5rem, 2.604vw, 3.125rem);
  font-weight: 600;
  color: var(--white);
  margin: 0;
}

.pg404-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  line-height: 1.7;
  margin: 0;
}

/* ── Home link ── */
.pg404-home-link {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

.pg404-home-link span {
  color: var(--purple-vivid);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.pg404-home-link:hover span {
  color: #fff;
}

/* ── Useful links ── */
.pg404-links-wrap {
  margin-top: 16px;
}

.pg404-links-heading {
  font-family: var(--font-roboto-flex);
  font-size: clamp(0.9375rem, 1.042vw, 1.125rem);
  font-weight: 500;
  color: var(--white);
  margin: 0 0 20px;
}

.pg404-links {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto;
  width: fit-content;
  gap: 12px 40px;
  text-align: left;
}

.pg404-links li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: clamp(0.8125rem, 0.885vw, 0.9375rem);
  color: var(--purple-vivid);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pg404-links li a i {
  font-size: 7px;
  flex-shrink: 0;
}

.pg404-links li a:hover {
  color: var(--white);
}

/* ── 404 responsive ── */
@media (max-width: 768px) {
  .pg404 {
    padding: 80px 0 100px;
  }
}

@media (max-width: 480px) {
  .pg404-links {
    grid-template-columns: auto;
  }
}

/* ============================================================
   SITEMAP PAGE
   ============================================================ */

.sitemap-section {
  background: #000;
  padding: 80px 0 100px;
}

.sitemap-inner {
  width: calc(100% - var(--container-margin));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ── Hero ── */
.sitemap-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 40px 0 20px;
}

.sitemap-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(2.5rem, 4.167vw, 5rem);
  font-weight: 500;
  color: var(--white);
  margin: 0;
  line-height: 1.05;
}

.sitemap-desc {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.5);
  max-width: 480px;
  line-height: 1.7;
  margin: 0;
}

/* ── Group ── */
.sitemap-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sitemap-group-title {
  font-family: var(--font-roboto-flex);
  font-size: clamp(1.125rem, 1.458vw, 1.75rem);
  font-weight: 500;
  color: var(--white);
  margin: 0;
}

.sitemap-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: -8px;
}

/* ── Links grid ── */
.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px 40px;
}

.sitemap-list--4col {
  grid-template-columns: repeat(4, 1fr);
}

.sitemap-list--1col {
  grid-template-columns: 1fr;
}

/* Two sitemap groups side by side */
.sitemap-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
}

.sitemap-list li a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: clamp(0.8375rem, 1.042vw, 1.525rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sitemap-list li a i {
  font-size: 6px;
  color: var(--purple-vivid);
  flex-shrink: 0;
}

.sitemap-list li a:hover {
  color: var(--white);
}

/* ── Sitemap responsive ── */
@media (max-width: 992px) {
  .sitemap-list--4col {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .sitemap-section {
    padding: 60px 0 80px;
  }

  .sitemap-list--4col {
    grid-template-columns: repeat(2, 1fr);
  }

  .sitemap-inner {
    gap: 44px;
  }
}

@media (max-width: 480px) {
  .sitemap-list--4col {
    grid-template-columns: 1fr;
  }
}


/* media font above 1500px */
@media(min-width:1600px) {

  .ind-svc-lead,
  .ind-intro-body p,
  .faq-q,
  .svc-ov-desc,
  .svc-services-desc,
  .svc-card-desc,
  .ts-header p,
  .wcu-card-desc,
  .csd-header p,
  .abt-desc,
  .vsm-card-title,
  .wpu-card-desc,
  .blg-intro,
  .cs-card-desc,
  .cth-desc,
  .tsm-hero-desc,
  .lcs-result-card-desc,
  .csr-card-desc,
  .mgt-row1-desc,
  .mgt-ceo-desc,
  .nev-hero-desc,
  .wcc-checklist li,
  .otg-desc,
  .wcu-card-title,
  .fs-card-title {
    font-size: 21px;
  }

  .abt-card-desc,
  .vsm-card-desc,
  .kgs-adv-list li,
  .cus-office-line,
  .mgt-card-back-desc,
  .lcs-info-col-body,
  .lcs-list-item {
    font-size: 19px;
  }

  .ind-chip,
  .qte-desc,
  .ts-card-items li,
  .cs-pill,
  .cus-office-addr,
  .otg-card-desc,
  .rtd-pill {
    font-size: 18px;
  }

  .jny-tag,
  .blg-latest-cat {
    font-size: 1rem;
  }

  .ind-svc-header {
    max-width: 70%;
  }

  .rtd-desc,
  .ind-svc-card-desc,
  .tm-text,
  .jny-card-desc,
  .mnf-item p,
  .job-card-desc,
  .tsm-card-desc {
    font-size: 20px;

  }


  .hww-detail-desc,
  .faq-a p,
  .jny-desc,
  .job-filter-pill {
    font-size: 20px;
  }

  .wpu-card-title,
  .bcat-card-title,
  .cert-row-list li,
  .nev-card-desc,
  .otg-card-title,
  .svc-card-title {
    font-size: 24px;
  }

  .csd-card-desc,
  .abt-card-title,
  .job-meta-item,
  .cth-card-title {
    font-size: 1.250rem;
  }

  .cert-check-icon,
  .wcc-check-icon {
    width: 25px;
    height: 25px;
  }

  .bcat-intro {
    font-size: 20px;
  }

  .blg-feat-caption,
  .bcat-pill,
  .bcat-card-desc,
  .lcs-testi-text {
    font-size: 20px;
  }

  .cth-card-desc {
    font-size: 1.2rem;
  }

  .cus-field label,
  .cus-field textarea,
  .tsm-card-role {
    font-size: 1rem;
  }

  .logo-img {
    height: 55px;
  }

  .footer-logo img {
    height: 55px;
  }

  .cta-btn {
    padding: 16px 28px;
    font-size: 21px;
    font-weight: 600;
  }

  .di-title {
    font-size: 1.2rem;
  }

  .di-sub {
    font-size: 18px;
  }

  .blg-latest-title {
    font-size: 25px;
  }

  .blg-latest-item {
    padding: 30px 0px;
  }
}

/* ============================================================
   SITE SEARCH — always-visible transparent header search box
   Desktop only (matches the breakpoint where the CTA button /
   hamburger menu already split, @media max-width: 1100px).
   ============================================================ */

.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  width: 220px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid #ffffffd1;
  border-radius: 6px;
  transition: border-color var(--transition), background var(--transition);
}

@media(max-width:1200px) {
  .nav-search {
    width: 180px;
  }
}

.nav-search:focus-within {
  border-color: var(--purple-vivid);
  background: rgba(223, 0, 25, 0.06);
}

.search-icon {
  flex-shrink: 0;
  color: #ffffffd1;
  pointer-events: none;
}

.search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 9px 4px 9px 8px;
}

.search-input::placeholder {
  color: var(--text-muted);
}

/* Live results dropdown, anchored under the search box */
.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-width: 80vw;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-dark);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(223, 0, 25, 0.08) inset;
  z-index: 600;
}

.search-dropdown.show {
  display: block;
}

.search-suggestion-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.search-suggestion-item:hover,
.search-suggestion-item.active {
  background: rgba(223, 0, 25, 0.14);
}

.search-suggestion-cat {
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--purple-vivid);
  background: rgba(223, 0, 25, 0.14);
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.search-suggestion-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-suggestion-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
}

.search-suggestion-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-no-results {
  padding: 20px 14px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.search-dropdown mark {
  background: rgba(223, 0, 25, 0.35);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* Desktop-only feature: hide entirely once the hamburger menu takes over
   (mirrors the existing .cta-btn breakpoint — mobile menu is untouched). */
@media (max-width: 1100px) {
  .nav-search {
    display: none;
  }
}



/* @media (min-width:1100px) and (max-width:1499px) {
  .logo-img {
    height: 36px;
  }
} */