/* =============================================
   WOHNER TECHNICAL SERVICES — GLOBAL STYLES
   ============================================= */

/* ── Variables ─────────────────────────────── */
:root {
  --clr-dark:       #07101f;
  --clr-dark-2:     #0d1a2e;
  --clr-dark-3:     #112240;
  --clr-accent:     #2563eb;
  --clr-accent-lt:  #60a5fa;
  --clr-accent-glow:rgba(37,99,235,0.3);
  --clr-teal:       #06b6d4;
  --clr-light:      rgba(255,255,255,.06);
  --clr-light-bg:   #f0f4ff;
  --clr-white:      #ffffff;
  --clr-gray:       rgba(255,255,255,.55);
  --clr-gray-lt:    rgba(255,255,255,.4);
  --clr-border:     rgba(255,255,255,0.09);
  --clr-border-hover: rgba(255,255,255,0.16);

  --ff-head: 'Barlow Condensed', sans-serif;
  --ff-body: 'Barlow', sans-serif;

  --header-h: 80px;
  --radius:   6px;
  --radius-lg:14px;

  /* Multi-layer shadow system */
  --shadow:    0 0 0 1px rgba(0,0,0,.18), 0 4px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 0 0 1px rgba(0,0,0,.22), 0 12px 48px rgba(0,0,0,.5), 0 0 60px rgba(0,0,0,.1);
  --shadow-glow:    0 0 0 1px rgba(37,99,235,.2), 0 8px 32px rgba(0,0,0,.45), 0 0 48px rgba(37,99,235,.15);
  --shadow-glow-lg: 0 0 0 1px rgba(96,165,250,.25), 0 16px 56px rgba(0,0,0,.55), 0 0 80px rgba(37,99,235,.18);

  /* Expo-out easing for premium feel */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-expo: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Reset ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 16px);
  color: rgba(255,255,255,.88);
  background-color: #07101f;
  background-image: radial-gradient(rgba(255,255,255,.052) 1px, transparent 1px);
  background-size: 28px 28px;
  line-height: 1.65;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a  { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Utility ─────────────────────────────────── */
.container { width: min(1240px, calc(100% - 1.5rem)); margin-inline: auto; }
.section-pad { padding-block: 100px; }
.bg-dark {
  background-color: var(--clr-dark);
  background-image: radial-gradient(rgba(255,255,255,.042) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-light {
  background-color: #111827;
  background-image:
    radial-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(135deg, #0f1b2e 0%, #111827 55%, #0d1a2e 100%);
  background-size: 28px 28px, auto;
}

/* ── Typography ──────────────────────────────── */
.section-label {
  font-family: var(--ff-head);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--clr-accent-lt);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--clr-accent-lt);
  flex-shrink: 0;
}
.section-label.light { color: var(--clr-accent-lt); }
.section-label.light::before { background: var(--clr-accent-lt); }

.section-title {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--clr-white);
  overflow: visible;
}
.section-title.light { color: var(--clr-white); }
.section-title em {
  font-style: italic;
  background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  line-height: 1.4;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.section-desc {
  max-width: 600px;
  color: var(--clr-gray);
  font-size: 1.05rem;
  margin-top: .9rem;
}
.section-desc.light { color: var(--clr-gray-lt); }

.section-header { margin-bottom: 3.5rem; }
.section-header.centered { text-align: center; }
.section-header.centered .section-label { justify-content: center; }
.section-header.centered .section-label::before { display: none; }
.section-header.centered .section-desc { margin-inline: auto; }

/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 2rem;
  font-family: var(--ff-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 50px;
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Shine sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-15deg);
  transition: left .5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btn:hover::after { left: 150%; }
.btn:active { transform: scale(.98) !important; }

.btn-primary {
  background: var(--clr-accent);
  color: var(--clr-white);
  box-shadow: 0 0 0 1px rgba(27,95,192,.45), 0 4px 14px rgba(27,95,192,.32), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover {
  background: var(--clr-accent-lt);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(59,127,212,.55), 0 8px 28px rgba(27,95,192,.45), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-outline {
  border: 1.5px solid rgba(255,255,255,.65);
  color: var(--clr-white);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 0 transparent;
}
.btn-outline:hover {
  border-color: var(--clr-accent-lt);
  color: var(--clr-accent-lt);
  background: rgba(96,165,250,.08);
  box-shadow: 0 0 0 1px rgba(96,165,250,.25), 0 4px 20px rgba(37,99,235,.2), inset 0 1px 0 rgba(255,255,255,.1);
  transform: translateY(-2px);
}
.btn-outline-light {
  border: 1.5px solid var(--clr-accent);
  color: var(--clr-accent);
  padding: .75rem 1.75rem;
  box-shadow: 0 0 0 0 rgba(27,95,192,.0);
}
.btn-outline-light:hover {
  background: var(--clr-accent);
  color: var(--clr-white);
  box-shadow: 0 0 0 1px rgba(27,95,192,.45), 0 4px 16px rgba(27,95,192,.32);
  transform: translateY(-2px);
}
.btn-full { width: 100%; justify-content: center; }

/* ── Scroll Animations ─────────────────────── */
.reveal-up, .reveal-left, .reveal-right {
  opacity: 0;
  will-change: opacity, transform;
  transform: translate3d(0, 32px, 0);
  transition: opacity .6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s),
              transform .6s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s);
}
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.revealed {
  opacity: 1;
  transform: none;
}


/* ══════════════════════════════════════════════
   HEADER / NAVIGATION
══════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(7,16,31,.97);
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: box-shadow var(--transition-expo), height var(--transition-expo), background var(--transition-expo);
}
.site-header.scrolled {
  background: rgba(7,16,31,.99);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 32px rgba(0,0,0,.5);
  height: 68px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 2rem;
  max-width: 1400px;
  margin-inline: auto;
}

/* Logo */
.logo-link { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.logo-img   { height: 52px; width: auto; }
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark svg { width: 40px; height: 32px; }
.logo-placeholder {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-text {
  font-family: var(--ff-head);
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--clr-white);
}
.logo-sub {
  font-family: var(--ff-head);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--clr-accent-lt);
  text-transform: uppercase;
}

/* Nav */
.nav-list {
  display: flex;
  align-items: center;
  gap: .2rem;
}
.nav-link {
  font-family: var(--ff-head);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: .5rem .9rem;
  border-radius: var(--radius);
  transition: color var(--transition-fast);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: .9rem; right: .9rem;
  height: 2px;
  background: var(--clr-accent-lt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-expo);
}
.nav-link:hover,
.nav-link.active { color: var(--clr-accent-lt); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.nav-cta {
  background: var(--clr-accent);
  color: var(--clr-white) !important;
  padding: .5rem 1.4rem;
  border-radius: 50px;
  margin-left: .4rem;
  box-shadow: 0 0 0 1px rgba(27,95,192,.45), 0 3px 12px rgba(27,95,192,.28), inset 0 1px 0 rgba(255,255,255,.15);
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}
.nav-cta::after { display: none; }
.nav-cta:hover {
  background: var(--clr-accent-lt);
  box-shadow: 0 0 0 1px rgba(59,127,212,.55), 0 5px 20px rgba(27,95,192,.38), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translateY(-1px);
}

/* Dropdown */
.has-dropdown { position: relative; }

/* Chevron toggle button — hidden on desktop, shown on mobile alongside the link */
.dropdown-toggle-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: .25rem .4rem;
  line-height: 1;
  flex-shrink: 0;
}
.dropdown-menu {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  min-width: 230px;
  background: var(--clr-dark-2);
  border: 1px solid rgba(255,255,255,.09);
  border-top: 2px solid var(--clr-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: .4rem 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-fast), transform var(--transition-expo), visibility var(--transition-fast);
  box-shadow: 0 0 0 1px rgba(10,22,40,.15), 0 16px 48px rgba(10,22,40,.45), 0 0 60px rgba(27,95,192,.06);
}
.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu a {
  display: block;
  padding: .65rem 1.2rem;
  font-family: var(--ff-body);
  font-size: .88rem;
  color: rgba(255,255,255,.7);
  transition: var(--transition);
}
.dropdown-menu a:hover {
  color: var(--clr-accent-lt);
  padding-left: 1.5rem;
  background: rgba(255,255,255,.04);
}

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: .4rem; }
.hamburger span {
  display: block; width: 26px; height: 2px;
  background: rgba(255,255,255,.82); border-radius: 2px;
  transition: var(--transition);
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: min(100vh, 860px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: #0c0d10;
  padding-top: var(--header-h);
  contain: paint;
}

/* Background */
.hero-bg {
  position: absolute;
  inset: 0;
  background: #0c0d10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.1s linear;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,22,40,.82) 0%,
    rgba(10,22,40,.72) 45%,
    rgba(10,22,40,.92) 100%
  );
}

/* Animated ambient blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.hero-blob-1 {
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(27,95,192,.22) 0%, transparent 70%);
  filter: blur(42px);
  top: -200px; right: -150px;
  animation: hero-blob-float 10s ease-in-out infinite;
}
.hero-blob-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,127,212,.12) 0%, transparent 70%);
  filter: blur(32px);
  bottom: 0; left: -100px;
  animation: hero-blob-float 13s ease-in-out infinite reverse;
}
@keyframes hero-blob-float {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  33%       { transform: translateY(-18px) rotate(.5deg) scale(1.02); }
  66%       { transform: translateY(-8px) rotate(-.5deg) scale(.98); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-blob-1, .hero-blob-2 { animation: none; }
}

/* Geometric accents */
.geo {
  position: absolute;
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 50%;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
  animation: geo-spin 30s linear infinite;
}
.geo-1 { width: 600px; height: 600px; top: -150px; right: -100px; }
.geo-2 { width: 400px; height: 400px; top: -80px;  right:  60px;  border-color: rgba(59,127,212,.1); animation-duration: 45s; animation-direction: reverse; }
.geo-3 { width: 900px; height: 900px; bottom: -300px; left: -200px; opacity: .35; animation-duration: 60s; }
@keyframes geo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .geo { animation: none; }
}

/* Content */
.hero-content {
  position: relative;
  z-index: 2;
  padding-inline: max(2rem, calc((100% - 1240px) / 2));
  padding-top: clamp(2.5rem, 8vh, 6rem);
  padding-bottom: 1.25rem;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--ff-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-accent-lt);
  margin-bottom: 1.6rem;
}
.badge-line { flex: 0 0 24px; height: 1px; background: var(--clr-accent-lt); }

.hero-title {
  display: flex;
  flex-direction: column;
  font-family: var(--ff-head);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--clr-white);
  max-width: 720px;
}
.hero-title .line-1  { font-size: clamp(2.4rem, 5vw, 4rem); opacity: .85; }
.hero-title .line-2  { font-size: clamp(4rem, 9vw, 7rem); }
.hero-title .line-3  { font-size: clamp(2rem, 4.5vw, 3.6rem); opacity: .85; }
.accent-text {
  background: linear-gradient(135deg, #5da5ff 0%, #9ac8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  max-width: 560px;
  color: rgba(255,255,255,.9);
  font-size: 1.05rem;
  margin-top: 1.4rem;
  line-height: 1.75;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
}

/* Stats bar */
.hero-stats {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  background: linear-gradient(90deg, rgba(10,22,40,.55) 0%, rgba(7,16,31,.65) 100%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 -4px 32px rgba(0,0,0,.3);
  margin-top: 0;
  padding-block: 1rem;
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 2.5rem;
  gap: .2rem;
}
.stat-value-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}
.stat-number {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--clr-accent-lt);
  line-height: 1;
  text-shadow: 0 0 24px rgba(59,127,212,.45);
}
.stat-suffix {
  font-family: var(--ff-head);
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--clr-accent-lt);
  line-height: 1;
  text-shadow: 0 0 24px rgba(59,127,212,.45);
}
.stat-label {
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: .4rem;
}
.stat-divider { width: 1px; height: 3rem; background: var(--clr-border); }

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: .5rem;
}
.scroll-dot {
  display: block;
  width: 6px; height: 6px;
  background: var(--clr-accent-lt);
  border-radius: 50%;
  animation: bounce 1.8s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%       { transform: translateY(10px); opacity: .4; }
}


/* ══════════════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════════════ */
.trust-strip {
  background: #0d1525;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-block: 1.6rem;
  overflow: visible;
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 1 !important;
  transform: none !important;
}
.trust-badge {
  opacity: 1 !important;
  transform: none !important;
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-label {
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--clr-gray);
  white-space: nowrap;
  flex-shrink: 0;
}
.trust-divider-v {
  width: 1px;
  height: 1.4rem;
  background: rgba(0,0,0,.12);
  flex-shrink: 0;
}
.trust-badges {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--ff-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  white-space: nowrap;
}
.trust-badge i {
  font-size: 1rem;
  color: var(--clr-accent-lt);
}


/* ══════════════════════════════════════════════
   ABOUT
══════════════════════════════════════════════ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}
.about-img-wrap {
  position: relative;
}
.img-placeholder {
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, #0F2040 0%, #162B52 50%, #1B3A6B 100%);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  color: rgba(59,127,212,.5);
  overflow: hidden;
  position: relative;
}

/* Real image replaces placeholder */
.about-real-img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 60px rgba(10,22,40,.35);
}
.about-img-wrap {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.about-img-wrap:hover .about-real-img { transform: scale(1.03); }
.about-accent-card {
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  color: var(--clr-white);
  padding: 1.2rem 1.6rem;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(255,255,255,.15);
  border-left: 3px solid var(--clr-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(37,99,235,.22), 0 16px 48px rgba(0,0,0,.55), 0 0 40px rgba(37,99,235,.1);
}
.about-accent-card > i {
  font-size: 1.8rem;
  color: var(--clr-accent-lt);
}
.about-accent-card div {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.about-accent-card strong { font-weight: 700; font-size: .95rem; }
.about-accent-card span   { font-size: .8rem; color: var(--clr-gray-lt); }

.about-text { overflow: visible; }
.about-text .section-title { margin-bottom: 1.2rem; overflow: visible; }
.about-intro {
  font-size: 1.1rem;
  color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
  font-weight: 500;
}
.about-text p { color: var(--clr-gray); margin-bottom: 1.5rem; }

.about-checkmarks {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 2rem;
}
.about-checkmarks li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-weight: 500;
  font-size: .95rem;
}
.about-checkmarks li i {
  width: 22px; height: 22px;
  background: var(--clr-accent);
  color: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .65rem;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════ */
.about.section-pad    { padding-bottom: 60px; }
.services.section-pad { padding-top: 60px; padding-bottom: 60px; }

/* About page: tighten spacing around the standalone stats bar */
#about-story { padding-bottom: 0; }
#vision      { padding-top: 48px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: background var(--transition-expo), transform var(--transition-expo), box-shadow var(--transition-expo), border-color var(--transition-expo);
  border: 1px solid rgba(255,255,255,.09);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 32px rgba(0,0,0,.4);
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(27,95,192,.12) 0%, transparent 65%);
  opacity: 0;
  transition: opacity var(--transition-expo);
  z-index: 1;
  pointer-events: none;
}
.service-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(96,165,250,.22);
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px rgba(96,165,250,.14), 0 16px 48px rgba(0,0,0,.5), 0 0 60px rgba(37,99,235,.1), inset 0 1px 0 rgba(255,255,255,.12);
}
.service-card:hover::before { opacity: 1; }

/* Card image thumbnail */
.service-card-img {
  position: relative;
  height: 170px;
  overflow: hidden;
  flex-shrink: 0;
}
.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
  filter: brightness(0.7) saturate(0.85);
}
.service-card:hover .service-card-img img {
  transform: scale(1.09);
  filter: brightness(0.9) saturate(1.05);
}
.service-card-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,22,40,.08) 30%, rgba(10,22,40,.68) 100%);
}

/* Icon badge overlaid on the image */
.service-card-img-icon {
  position: absolute;
  bottom: .9rem;
  left: 1.2rem;
  font-size: 1.5rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
  z-index: 1;
  transition: transform var(--transition);
}
.service-card:hover .service-card-img-icon { transform: scale(1.15); }

/* Card text body */
.service-card-body {
  padding: 1.5rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}

.service-card h3 {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-white);
  letter-spacing: .02em;
  line-height: 1.2;
}
.service-card p {
  font-size: .88rem;
  color: rgba(255,255,255,.48);
  line-height: 1.62;
  flex: 1;
}
.service-link {
  font-family: var(--ff-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent-lt);
  display: flex;
  align-items: center;
  gap: .45rem;
  transition: gap var(--transition);
  margin-top: .2rem;
}
.service-link:hover { gap: .75rem; }

/* Prevent the translateY reveal animation from being clipped by the grid's
   overflow:hidden. Cards still fade in; the image container handles its own
   overflow for the zoom effect. */
.services-grid > .service-card.reveal-up,
.services-grid > .service-card.reveal-up.revealed {
  transform: none;
}
.services-grid > .service-card {
  overflow: visible;
}


/* ══════════════════════════════════════════════
   PROJECTS
══════════════════════════════════════════════ */
.projects .section-header { display: flex; justify-content: space-between; align-items: flex-end; }

.projects-filter {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.filter-btn {
  font-family: var(--ff-head);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.2rem;
  border-radius: 50px;
  border: 2px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.6);
  transition: var(--transition);
}
.filter-btn:hover, .filter-btn.active {
  border-color: var(--clr-accent);
  color: var(--clr-white);
  background: var(--clr-accent);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.project-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 40px rgba(0,0,0,.45);
  transition: transform var(--transition-expo), box-shadow var(--transition-expo), border-color var(--transition-expo);
  border: 1px solid rgba(255,255,255,.12);
}
.project-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);
  border-color: rgba(96,165,250,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(37,99,235,.22), 0 24px 60px rgba(0,0,0,.5), 0 0 50px rgba(37,99,235,.12);
}
.project-card.hidden { display: none; }

.project-img-wrap {
  position: relative;
  overflow: hidden;
}
.project-img-placeholder {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: rgba(255,255,255,.5);
}
.project-img-placeholder.civil       { background: linear-gradient(135deg, #0A1C38, #0F2D5A); }
.project-img-placeholder.commercial  { background: linear-gradient(135deg, #0D2B1A, #1A5230); }
.project-img-placeholder.residential { background: linear-gradient(135deg, #2A1A0A, #5A3A18); }
.project-img-placeholder.industrial  { background: linear-gradient(135deg, #1A0A2A, #3A1A5A); }

.project-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,22,40,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}
.project-card:hover .project-overlay { opacity: 1; }
.project-view-btn {
  width: 48px; height: 48px;
  background: var(--clr-accent);
  color: var(--clr-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transform: scale(.8);
  transition: transform var(--transition);
}
.project-card:hover .project-view-btn { transform: scale(1); }

.project-category-tag {
  position: absolute;
  top: .85rem; left: .85rem;
  background: var(--clr-accent);
  color: var(--clr-white);
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 50px;
}

.project-info {
  padding: 1.4rem 1.5rem 1.6rem;
}
.project-info h4 {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .5rem;
}
.project-info p {
  font-size: .88rem;
  color: var(--clr-gray);
  line-height: 1.55;
  margin-bottom: .8rem;
}
.project-year {
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-accent);
}

.projects-cta { text-align: center; margin-top: 3rem; }


/* ══════════════════════════════════════════════
   WHY US
══════════════════════════════════════════════ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.why-card {
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-radius: var(--radius-lg);
  padding: 2.8rem 2.2rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 8px 40px rgba(0,0,0,.45),
    0 2px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-expo), box-shadow var(--transition-expo), border-color var(--transition-expo), background var(--transition-expo);
  border: 1px solid rgba(255,255,255,.13);
}
.why-card:hover {
  transform: translateY(-7px);
  background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);
  border-color: rgba(96,165,250,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 0 0 1px rgba(37,99,235,.25),
    0 20px 60px rgba(0,0,0,.5),
    0 0 60px rgba(37,99,235,.14);
}
.why-card-featured {
  background: rgba(37,99,235,.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--clr-white);
  border: 1px solid rgba(96,165,250,.35);
  box-shadow: 0 0 0 1px rgba(37,99,235,.2), 0 8px 40px rgba(0,0,0,.5), 0 0 60px rgba(37,99,235,.15);
}
.why-card-featured:hover {
  box-shadow: 0 0 0 1px rgba(96,165,250,.35), 0 20px 60px rgba(0,0,0,.55), 0 0 80px rgba(37,99,235,.2);
}
.why-card-featured h3 { color: var(--clr-white); }
.why-card-featured p  { color: rgba(255,255,255,.65); }
.why-card-featured .why-icon { color: var(--clr-accent-lt); }
.why-card-featured .why-number { color: rgba(37,99,235,.12); }

.why-number {
  font-family: var(--ff-head);
  font-size: 4.5rem;
  font-weight: 800;
  color: rgba(255,255,255,.04);
  line-height: 1;
  position: absolute;
  top: 1rem; right: 1.5rem;
  letter-spacing: -.04em;
}
.why-icon {
  font-size: 2.2rem;
  color: var(--clr-accent-lt);
  margin-bottom: 1.2rem;
}
.why-card h3 {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .9rem;
}
.why-card p {
  font-size: .92rem;
  color: var(--clr-gray);
  line-height: 1.7;
}


/* ══════════════════════════════════════════════
   SUSTAINABILITY STRIP
══════════════════════════════════════════════ */
.sustainability-strip {
  background: linear-gradient(135deg, var(--clr-dark-3) 0%, var(--clr-dark) 100%);
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  padding-block: 3rem;
}
.strip-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.strip-icon {
  font-size: 2.8rem;
  color: var(--clr-accent-lt);
  flex-shrink: 0;
}
.strip-text { flex: 1; min-width: 240px; }
.strip-text h3 {
  font-family: var(--ff-head);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .4rem;
}
.strip-text p { font-size: .92rem; color: rgba(255,255,255,.55); }


/* ══════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.testimonial-card {
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  position: relative;
  transition: transform var(--transition-expo), box-shadow var(--transition-expo), border-top-color var(--transition-fast), border-color var(--transition-expo);
  border-top: 3px solid rgba(255,255,255,.06);
  border-left: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 32px rgba(0,0,0,.4);
}
.testimonial-card:hover {
  transform: translateY(-6px);
  border-top-color: var(--clr-accent-lt);
  border-color: rgba(96,165,250,.2);
  border-top-color: var(--clr-accent-lt);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(37,99,235,.2), 0 16px 48px rgba(0,0,0,.48), 0 0 44px rgba(37,99,235,.1);
}
.quote-mark {
  font-size: 1.5rem;
  color: var(--clr-accent);
  margin-bottom: 1rem;
  opacity: .7;
}
.testimonial-card > p {
  font-size: .95rem;
  line-height: 1.75;
  color: rgba(255,255,255,.75);
  margin-bottom: 1.5rem;
  font-style: italic;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: .9rem;
}
.author-avatar {
  width: 44px; height: 44px;
  background: var(--clr-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.author-avatar span {
  font-family: var(--ff-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--clr-accent-lt);
}
.testimonial-author div strong {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  color: var(--clr-white);
}
.testimonial-author div span {
  font-size: .8rem;
  color: var(--clr-gray);
}


/* ══════════════════════════════════════════════
   CONTACT CTA
══════════════════════════════════════════════ */
.cta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 4vw, 5rem);
  align-items: start;
}
.cta-text .section-title { margin-bottom: 1.2rem; }
.light-p {
  color: rgba(255,255,255,.55);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.contact-details {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .95rem;
  color: rgba(255,255,255,.7);
}
.contact-item i {
  width: 36px; height: 36px;
  background: rgba(27,95,192,.15);
  color: var(--clr-accent-lt);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-item a { color: rgba(255,255,255,.7); transition: color var(--transition); }
.contact-item a:hover { color: var(--clr-accent-lt); }

/* Form */
.contact-form {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.form-group label {
  font-family: var(--ff-head);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  color: var(--clr-white);
  font-family: var(--ff-body);
  font-size: .95rem;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.form-group select option { background: var(--clr-dark-2); color: var(--clr-white); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.22); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-accent-lt);
  background: rgba(27,95,192,.08);
  box-shadow: 0 0 0 3px rgba(27,95,192,.14), inset 0 1px 0 rgba(255,255,255,.04);
}
.form-group textarea { resize: vertical; min-height: 110px; max-height: 160px; overflow-y: auto; }


/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.site-footer { background: var(--clr-dark); border-top: 1px solid var(--clr-border); }
.footer-top { padding: 4.5rem 0 3.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  align-items: start;
}

.footer-brand { padding-right: 1.5rem; }
.footer-logo  { display: flex; flex-direction: column; line-height: 1; margin-bottom: 1.2rem; }
.footer-logo-wrap { display: inline-block; background: #fff; padding: 8px 14px; border-radius: 8px; margin-bottom: 1.2rem; }
.footer-logo-img { height: 52px; width: auto; display: block; }
.footer-logo-mark {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.2rem;
}
.footer-logo-mark svg { width: 36px; height: 29px; }
.footer-brand p { font-size: .88rem; color: rgba(255,255,255,.45); line-height: 1.65; margin-bottom: 1.5rem; }

.social-links { display: flex; gap: .6rem; }
.social-links a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.55);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  transition: var(--transition);
}
.social-links a:hover {
  background: var(--clr-accent);
  color: var(--clr-white);
}

.footer-col h5 {
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-col ul { display: flex; flex-direction: column; gap: .55rem; }
.footer-col li a {
  font-size: .88rem;
  color: rgba(255,255,255,.55);
  transition: var(--transition);
}
.footer-col li a:hover { color: var(--clr-accent-lt); padding-left: 4px; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: .87rem;
  color: rgba(255,255,255,.55);
}
.footer-contact li i {
  color: var(--clr-accent-lt);
  margin-top: .2rem;
  flex-shrink: 0;
  width: 14px;
}
.footer-contact li a { color: inherit; transition: color var(--transition); }
.footer-contact li a:hover { color: var(--clr-accent-lt); }

.footer-bottom {
  border-top: 1px solid var(--clr-border);
  padding-block: 1.4rem;
}
.footer-bottom .container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 2rem;
}
.footer-bottom p { font-size: .82rem; color: rgba(255,255,255,.3); }
.footer-bottom p a { color: rgba(255,255,255,.3); text-decoration: none; transition: color .3s ease; }
.footer-bottom p a:hover { color: var(--clr-accent-lt); text-decoration: underline; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { font-size: .82rem; color: rgba(255,255,255,.3); transition: color var(--transition); }
.footer-links a:hover { color: var(--clr-accent-lt); }


/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 1400px) {
  .section-pad { padding-block: 80px; }
}
@media (max-width: 1200px) {
  .section-pad { padding-block: 70px; }
}
@media (max-width: 1100px) {
  .section-pad      { padding-block: 64px; }
  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .footer-grid      { grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
  .footer-brand     { grid-column: 1 / -1; padding-right: 0; }
  .footer-top       { padding: 3.5rem 0 2.5rem; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .about-grid  { grid-template-columns: 1fr; gap: 3rem; }
  .about-visual { order: -1; max-width: 480px; margin-inline: auto; }
  .projects-grid { grid-template-columns: 1fr 1fr; }
  .why-grid      { grid-template-columns: 1fr; }
  .cta-inner     { grid-template-columns: 1fr; gap: 3rem; }
  .trust-badges  { gap: 1.2rem; }
}

@media (max-width: 768px) {
  :root { --header-h: 64px; }
  .section-pad { padding-block: 64px; }

  /* Mobile nav */
  .primary-nav {
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    background: var(--clr-dark);
    backdrop-filter: blur(16px);
    padding: 1.5rem;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    border-top: 2px solid var(--clr-accent);
  }
  .primary-nav.open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .nav-list > li { width: 100%; }
  .nav-link {
    font-size: 1rem;
    padding: .65rem 1rem;
    width: 100%;
    display: block;
    color: rgba(255,255,255,.8);
    border-radius: 6px;
  }
  .nav-link:hover, .nav-link.active { color: var(--clr-white); background: rgba(255,255,255,.06); }
  .nav-link::after { display: none; }
  .nav-cta {
    display: block;
    text-align: center;
    margin: .5rem 0 0;
    padding: .7rem 1rem;
    font-size: .95rem;
    border-radius: 50px;
  }
  /* On mobile the <li> becomes a flex row: link text + chevron button side by side */
  .has-dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .has-dropdown > .nav-link { flex: 1; }
  .dropdown-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: rgba(255,255,255,.7);
    margin-right: .25rem;
  }
  .has-dropdown .dropdown-menu {
    position: static;
    flex-basis: 100%;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,.03);
    border: none;
    border-left: 2px solid var(--clr-accent);
    padding: 0;
    margin: 0 0 0 1.2rem;
    border-radius: 0;
    min-width: unset;
    transition: max-height .32s ease, opacity .25s ease, padding .25s ease, margin .25s ease;
  }
  .has-dropdown.dropdown-open .dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 600px;
    padding: .25rem 0;
    margin: .15rem 0 .4rem 1.2rem;
  }
  .has-dropdown .dropdown-menu a {
    font-size: .85rem;
    padding: .5rem 1rem;
    color: rgba(255,255,255,.65);
    border-radius: 4px;
  }
  .has-dropdown .dropdown-menu a:hover {
    padding-left: 1rem;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.06);
  }
  .has-dropdown .fa-chevron-down {
    transition: transform .28s ease;
    display: inline-block;
    font-size: .75rem;
    margin-left: .3rem;
  }
  .has-dropdown.dropdown-open .fa-chevron-down {
    transform: rotate(180deg);
  }
  .hamburger { display: flex; }

  .hero-content {
    padding-inline: 1.5rem;
    padding-top: 2rem;
    padding-bottom: 1.25rem;
  }
  .hero-stats {
    flex-direction: row;
    gap: 0;
    padding-block: 1rem;
  }
  .stat-item { padding-inline: 1rem; }
  .stat-number, .stat-suffix { font-size: 1.8rem; }
  .stat-label  { font-size: .7rem; }
  .stat-divider { height: 2rem; }

  .projects-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .testimonials-grid > :last-child { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-top  { padding: 2.5rem 0 2rem; }
  .footer-brand { text-align: left; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .footer-links { flex-wrap: wrap; gap: 1rem; }
  .hero-stats { flex-wrap: wrap; }
  .stat-item { flex: 1 1 40%; }
  .stat-divider { display: none; }
  .strip-inner { flex-direction: column; text-align: center; }
  .trust-strip-inner { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .trust-divider-v { display: none; }
}

@media (max-width: 600px) {
  .container { width: min(1240px, calc(100% - 1rem)); }
  .section-pad { padding-block: 56px; }
  .header-inner { padding-inline: 1rem; }
  .logo-img { height: 42px; }
  .section-title { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .section-desc { font-size: .98rem; }
  .hero-content { padding-inline: 1rem; padding-top: 1.25rem; padding-bottom: 1rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; justify-content: center; }
  .theme-toggle { width: 56px; height: 30px; }
}

@media (max-width: 480px) {
  .hero-content   { padding-top: 1.25rem; padding-bottom: 1rem; }
  .hero-title .line-2 { font-size: 3.2rem; }
  .hero-badge     { margin-bottom: .8rem; }
  .hero-desc      { margin-top: .8rem; font-size: .95rem; }
  .hero-actions   { flex-direction: column; margin-top: 1.2rem; }
  .btn { width: 100%; justify-content: center; }
  .projects-filter { gap: .4rem; }
  .filter-btn { font-size: .75rem; padding: .4rem .9rem; }
  .trust-badge span { display: none; }
}


/* ══════════════════════════════════════════════
   PAGE HERO  (inner pages)
══════════════════════════════════════════════ */
.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 4.5rem) 0 4.5rem;
  overflow: hidden;
  background: #0c0d10;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-color: #0c0d10;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,22,40,.88) 0%, rgba(10,22,40,.65) 55%, rgba(10,22,40,.85) 100%);
}
.page-hero-ring {
  position: absolute;
  right: -80px; top: 50%;
  transform: translateY(-50%);
  width: 480px; height: 480px;
  border: 1px solid rgba(59,127,212,.1);
  border-radius: 50%;
  pointer-events: none;
}
.page-hero-ring::before {
  content: '';
  position: absolute;
  inset: 70px;
  border: 1px solid rgba(59,127,212,.07);
  border-radius: 50%;
}
.page-hero-inner {
  position: relative;
  z-index: 1;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  margin-bottom: 1.2rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.breadcrumb a { color: rgba(255,255,255,.82); transition: color var(--transition); text-shadow: inherit; }
.breadcrumb a:hover { color: #ffffff; }
.breadcrumb i { font-size: .7rem; opacity: .7; }
.breadcrumb .bc-current { color: #ffffff; text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.page-hero h1 {
  font-family: var(--ff-head);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--clr-white);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.page-hero h1 em { font-style: normal; color: var(--clr-accent-lt); }
.page-hero .page-hero-desc {
  max-width: 560px;
  color: rgba(255,255,255,.6);
  font-size: 1.05rem;
  line-height: 1.75;
}


/* ══════════════════════════════════════════════
   STANDALONE STATS ROW
══════════════════════════════════════════════ */
.stats-section {
  background: linear-gradient(160deg, var(--clr-dark-3) 0%, var(--clr-dark-2) 100%);
  border-top: 1px solid rgba(37,99,235,.15);
  border-bottom: 1px solid rgba(37,99,235,.15);
  padding-block: 1.75rem;
}
/* Cancel the reveal-up translateY inside these strips — it shifts items down
   visually and creates the appearance of extra top padding. Opacity fade kept. */
.stats-section .reveal-up,
.sustainability-strip .reveal-up {
  transform: none !important;
}

/* Cancel reveal-right/left translateX inside sections where a full-width column
   is shifted by translateX. On narrow viewports body's overflow-x:hidden clips
   the shifted content — cancelling the transform keeps the opacity-fade intact.
   Covers: homepage about section (overflow:hidden from glow blob) and the about
   page company-story section (#about-story, full-width single-col on mobile). */
.about.section-pad .reveal-right,
.about.section-pad .reveal-left,
#about-story .reveal-right,
#about-story .reveal-left {
  transform: none !important;
}
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.stat-box-num {
  font-family: var(--ff-head);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--clr-white);
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .2rem;
}
.stat-box-suffix { font-size: 1.8rem; }
.stat-box-label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-top: .4rem;
}


/* ══════════════════════════════════════════════
   VALUES GRID
══════════════════════════════════════════════ */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.value-card {
  border: 1px solid var(--clr-border);
  background: var(--clr-dark-2);
  border-radius: var(--radius-lg);
  padding: 2rem 1.6rem;
  transition: transform var(--transition), border-color var(--transition);
}
.value-card:hover {
  transform: translateY(-4px);
  border-color: rgba(59,127,212,.35);
}
.value-card-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  background: rgba(27,95,192,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--clr-accent-lt);
  margin-bottom: 1.2rem;
}
.value-card h4 {
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: .6rem;
}
.value-card p { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.65; }


/* ══════════════════════════════════════════════
   TEAM SECTION
══════════════════════════════════════════════ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.team-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 8px 36px rgba(0,0,0,.4);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.team-card:hover {
  transform: translateY(-6px);
  border-color: rgba(96,165,250,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(37,99,235,.22), 0 20px 56px rgba(0,0,0,.5), 0 0 50px rgba(37,99,235,.12);
}
.team-card-img {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--clr-dark-2) 0%, var(--clr-dark-3) 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  color: rgba(59,127,212,.5);
  position: relative;
  overflow: hidden;
}
.team-card-img img { width: 100%; height: 100%; object-fit: cover; }
.team-card-img .team-initials {
  font-family: var(--ff-head);
  font-size: 3rem;
  font-weight: 800;
  color: rgba(59,127,212,.4);
}
.team-card-body { padding: 1.5rem; }
.team-card-body h4 {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .2rem;
}
.team-card-role {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--clr-accent-lt);
  margin-bottom: .8rem;
}
.team-card-bio { font-size: .86rem; color: var(--clr-gray); line-height: 1.6; margin-bottom: 1rem; }
.team-social-links { display: flex; gap: .5rem; }
.team-social-links a {
  width: 32px; height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  transition: var(--transition);
}
.team-social-links a:hover { background: var(--clr-accent); color: var(--clr-white); border-color: var(--clr-accent); }


/* ══════════════════════════════════════════════
   TIMELINE
══════════════════════════════════════════════ */
.timeline {
  position: relative;
  padding-left: 2.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--clr-accent), rgba(27,95,192,.1));
}
.timeline-item {
  position: relative;
  padding-bottom: 2.8rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -2.5rem;
  top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--clr-accent);
  border: 3px solid #07101f;
  box-shadow: 0 0 0 3px rgba(37,99,235,.3);
  transform: translateX(-6px);
}
.timeline-year {
  font-family: var(--ff-head);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: .4rem;
}
.timeline-item h4 {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .4rem;
}
.timeline-item p { font-size: .88rem; color: var(--clr-gray); line-height: 1.65; }


/* ══════════════════════════════════════════════
   PROCESS STEPS
══════════════════════════════════════════════ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative;
}
.process-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(12.5% + 28px);
  right: calc(12.5% + 28px);
  height: 2px;
  background: linear-gradient(to right, var(--clr-accent), rgba(27,95,192,.2));
  pointer-events: none;
}
.process-step { text-align: center; position: relative; }
.process-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--clr-accent);
  color: var(--clr-white);
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 16px rgba(27,95,192,.3);
}
.process-step h4 {
  font-family: var(--ff-head);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: .5rem;
}
.process-step p { font-size: .85rem; color: var(--clr-gray); line-height: 1.65; }


/* ══════════════════════════════════════════════
   SERVICE DETAIL (services.php)
══════════════════════════════════════════════ */
.service-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.service-detail.reverse { direction: rtl; }
.service-detail.reverse > * { direction: ltr; }
.service-detail-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--clr-dark-2) 0%, var(--clr-dark-3) 100%);
  position: relative;
}

/* Real photo fills the visual container */
.svc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-detail:hover .svc-img { transform: scale(1.06); }

/* Gradient overlay on top of photo */
.svc-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,22,40,.18) 0%,
    rgba(10,22,40,.08) 50%,
    rgba(27,95,192,.10) 100%
  );
  transition: opacity 0.4s ease;
}
.service-detail:hover .svc-img-overlay { opacity: 0.55; }

/* Accent bar stays on top */
.service-detail-visual .svc-accent-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--clr-accent) 0%, var(--clr-accent-lt) 100%);
  z-index: 2;
}

/* Hide old icon — image replaces it */
.service-detail-visual .svc-icon { display: none; }
.service-detail-body h3 {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: 1rem;
  line-height: 1.2;
}
.service-detail-body p {
  color: var(--clr-gray);
  line-height: 1.75;
  margin-bottom: 1.2rem;
}
.service-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-bottom: 1.8rem;
}
.service-feature-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .88rem;
  color: rgba(255,255,255,.8);
}
.service-feature-item i { color: var(--clr-accent); font-size: .75rem; flex-shrink: 0; }
.service-divider {
  border: none;
  border-top: 1px solid rgba(10,22,40,.08);
  margin-block: 4rem;
}


/* ══════════════════════════════════════════════
   PROJECTS PAGE  (projects.php)
══════════════════════════════════════════════ */
.projects-page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.project-card-lg {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.project-card-lg:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.project-card-lg .pcl-img {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--clr-dark-2) 0%, var(--clr-dark-3) 100%);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.project-card-lg .pcl-img img { width: 100%; height: 100%; object-fit: cover; }
.project-card-lg .pcl-icon { font-size: 3.5rem; color: rgba(59,127,212,.25); }
.pcl-tag {
  position: absolute;
  top: 1rem; left: 1rem;
  background: var(--clr-accent);
  color: var(--clr-white);
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 4px;
}
.pcl-year-badge {
  position: absolute;
  bottom: 1rem; right: 1rem;
  background: rgba(12,13,16,.75);
  color: rgba(255,255,255,.7);
  font-size: .75rem;
  padding: .25rem .7rem;
  border-radius: 4px;
  backdrop-filter: blur(4px);
}
.pcl-body { padding: 1.5rem; }
.pcl-body h4 {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .5rem;
}
.pcl-body p { font-size: .87rem; color: var(--clr-gray); line-height: 1.6; margin-bottom: 1rem; }
.pcl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--clr-gray-lt);
}
.pcl-meta .pcl-value { font-weight: 600; color: rgba(255,255,255,.8); }


/* ══════════════════════════════════════════════
   CONTACT PAGE  (contact.php)
══════════════════════════════════════════════ */
/* Dark gradient backdrop for contact page */
section:has(.contact-page-grid) {
  background: linear-gradient(135deg, #0f1b2e 0%, #07101f 50%, #0f172a 100%);
}
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-info-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-info-card {
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 28px rgba(0,0,0,.4);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.contact-info-card:hover {
  border-color: rgba(96,165,250,.3);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 0 1px rgba(37,99,235,.2), 0 12px 40px rgba(0,0,0,.48);
}
.contact-info-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(27,95,192,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--clr-accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-info-body h5 {
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-gray-lt);
  margin-bottom: .35rem;
}
.contact-info-body p,
.contact-info-body a {
  font-size: .92rem;
  color: rgba(255,255,255,.8);
  line-height: 1.55;
  transition: color var(--transition);
}
.contact-info-body a:hover { color: var(--clr-accent); }
.contact-map-placeholder {
  height: 220px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #e8ecf0 0%, #d8dfe8 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .6rem;
  color: var(--clr-gray);
  font-size: .9rem;
  border: 1px solid rgba(10,22,40,.08);
  margin-top: 1rem;
}
.contact-map-placeholder i { font-size: 2rem; color: var(--clr-accent); opacity: .5; }
.contact-form-card {
  background: linear-gradient(160deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 56px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
}
.contact-form-card h3 {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: .4rem;
}
.contact-form-card .form-subtitle {
  font-size: .88rem;
  color: var(--clr-gray);
  margin-bottom: .9rem;
}
/* Space form rows/groups evenly and give the submit button extra breathing room */
.contact-form-card form {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.contact-form-card form > button[type="submit"] {
  margin-top: 0.4rem;
}

/* Dark-context form styles */
.contact-form-card .form-group label {
  color: rgba(255,255,255,.55);
}
.contact-form-card .form-group input,
.contact-form-card .form-group select,
.contact-form-card .form-group textarea {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  color: var(--clr-white);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.contact-form-card .form-group select option {
  background: #1a2744;
  color: #fff;
}
.contact-form-card .form-group input::placeholder,
.contact-form-card .form-group textarea::placeholder {
  color: rgba(255,255,255,.25);
}
.contact-form-card .form-group input:focus,
.contact-form-card .form-group select:focus,
.contact-form-card .form-group textarea:focus {
  border-color: var(--clr-accent-lt);
  background: rgba(37,99,235,.08);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Field validation states */
.contact-form-card .form-group input.field-invalid,
.contact-form-card .form-group select.field-invalid,
.contact-form-card .form-group textarea.field-invalid {
  border-color: #d93025;
  background: rgba(217,48,37,.04);
}
.contact-form-card .form-group input.field-invalid:focus,
.contact-form-card .form-group select.field-invalid:focus,
.contact-form-card .form-group textarea.field-invalid:focus {
  border-color: #d93025;
  background: rgba(217,48,37,.06);
}
.field-error-msg {
  display: none;
  color: #d93025;
  font-size: .78rem;
  margin-top: .35rem;
  font-weight: 500;
}
.field-error-msg.visible {
  display: block;
}

/* Compact contact sections — fit in one viewport */
section:has(.contact-page-grid) { padding-block: 44px; }
.contact-cta { padding-block: 60px !important; }
.contact-cta .light-p { margin-bottom: 1rem; }

.contact-form-card .form-group input,
.contact-form-card .form-group select,
.contact-form-card .form-group textarea {
  padding: .6rem .85rem;
  font-size: .9rem;
}
.contact-form-card .form-group textarea { min-height: 76px; }
.contact-form-card .form-group label { font-size: .75rem; }

.contact-form .form-group input,
.contact-form .form-group select,
.contact-form .form-group textarea {
  padding: .6rem .85rem;
  font-size: .9rem;
}
.contact-form .form-group textarea { min-height: 82px; }

.hours-card {
  background: rgba(27,95,192,.06);
  border: 1px solid rgba(27,95,192,.15);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-top: 1.5rem;
}
.hours-card h5 {
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: .8rem;
}
.hours-row {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: var(--clr-dark);
  padding-block: .25rem;
  border-bottom: 1px solid rgba(27,95,192,.1);
}
.hours-row:last-child { border-bottom: none; }
.hours-row span:last-child { font-weight: 600; }


/* ══════════════════════════════════════════════
   SUSTAINABILITY PAGE
══════════════════════════════════════════════ */
.commitment-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
.commitment-card {
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  display: flex;
  gap: 1.6rem;
  transition: border-color var(--transition), transform var(--transition);
}
.commitment-card:hover { border-color: rgba(96,165,250,.35); transform: translateY(-3px); }
.commitment-icon {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: rgba(27,95,192,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: var(--clr-accent);
  flex-shrink: 0;
}
.commitment-body h4 {
  font-family: var(--ff-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .5rem;
}
.commitment-body p { font-size: .88rem; color: var(--clr-gray); line-height: 1.65; }
.goal-strip {
  background: var(--clr-dark);
  border-radius: var(--radius-lg);
  padding: 3rem;
  margin-top: 2rem;
}
.goal-strip h3 {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: 1.8rem;
  text-align: center;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.goals-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.goal-item-num {
  font-family: var(--ff-head);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--clr-accent-lt);
  line-height: 1;
}
.goal-item-label {
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin-top: .4rem;
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.cert-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  padding: 1.8rem 1.2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: border-color var(--transition), transform var(--transition);
}
.cert-card:hover { border-color: var(--clr-accent-lt); transform: translateY(-3px); }
.cert-card i { font-size: 2rem; color: var(--clr-accent-lt); margin-bottom: .8rem; }
.cert-card h5 {
  font-family: var(--ff-head);
  font-size: .88rem;
  font-weight: 700;
  color: var(--clr-white);
  margin-bottom: .3rem;
}
.cert-card p { font-size: .78rem; color: var(--clr-gray); }


/* ══════════════════════════════════════════════
   INDUSTRIES SERVED (services.php)
══════════════════════════════════════════════ */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  text-align: center;
}
.industry-item {
  padding: 1.4rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  transition: var(--transition);
}
.industry-item:hover { border-color: var(--clr-accent-lt); background: rgba(37,99,235,.08); }
.industry-item i { font-size: 1.5rem; color: var(--clr-accent-lt); margin-bottom: .6rem; }
.industry-item span { display: block; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8); }


/* ══════════════════════════════════════════════
   ABOUT PAGE – MISSION BLOCK
══════════════════════════════════════════════ */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.mission-card {
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  position: relative;
  overflow: hidden;
}
.mission-card.bg-accent {
  background: var(--clr-accent);
  color: var(--clr-white);
}
.mission-card.bg-dark-card {
  background: var(--clr-dark);
  color: var(--clr-white);
}
.mission-card-label {
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: .8rem;
}
.mission-card h3 {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: .9rem;
  line-height: 1.2;
}
.mission-card p { font-size: .92rem; line-height: 1.7; opacity: .8; }
.mission-card-icon {
  position: absolute;
  bottom: -10px; right: -10px;
  font-size: 6rem;
  opacity: .07;
}


/* ══════════════════════════════════════════════
   RESPONSIVE  (new components)
══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .values-grid   { grid-template-columns: repeat(2, 1fr); }
  .team-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-grid  { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .stats-row     { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-grid     { grid-template-columns: repeat(2, 1fr); }
  .goals-row     { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1050px) {
  .contact-page-grid { grid-template-columns: 1fr 1.4fr; gap: 2rem; }
}
@media (max-width: 900px) {
  .service-detail          { grid-template-columns: 1fr; gap: 2.5rem; }
  .service-detail.reverse  { direction: ltr; }
  .contact-page-grid       { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact-form-card       { padding: 1.75rem; }
  /* On tablet, show both info cards side-by-side above the full-width form */
  .contact-info-stack      { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .commitment-grid         { grid-template-columns: 1fr; }
  .projects-page-grid      { grid-template-columns: repeat(2, 1fr); }
  .mission-grid            { grid-template-columns: 1fr; }
  /* Cancel reveal translateY/X offsets when contact layout is single-column.
     A 32px pre-animation shift overflows the grid gap and causes the OFFICE card
     to visually overlap the form below it. Opacity fade-in is preserved. */
  .contact-page-grid .reveal-up,
  .contact-page-grid .reveal-right {
    transform: none;
  }
}
@media (max-width: 768px) {
  .values-grid    { grid-template-columns: 1fr; }
  .team-grid      { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid      { grid-template-columns: repeat(2, 1fr); }
  .goals-row      { grid-template-columns: repeat(2, 1fr); }
  .stats-row      { grid-template-columns: repeat(2, 1fr); }
  .contact-form-card { padding: 1.25rem; }
  .contact-info-card { padding: 1.1rem; gap: .85rem; }
  .contact-page-grid { gap: 2.5rem; }
}
@media (max-width: 600px) {
  .projects-page-grid { grid-template-columns: 1fr; }
  .process-grid  { grid-template-columns: 1fr; }
  .service-features { grid-template-columns: 1fr; }
  /* Stack info cards back to single column on small phones */
  .contact-info-stack { grid-template-columns: 1fr; gap: .875rem; }
  .contact-page-grid  { gap: 2rem; }
}
@media (max-width: 480px) {
  .contact-form-card  { padding: 1rem; }
  .contact-info-card  { padding: .875rem; gap: .65rem; }
  .contact-page-grid  { gap: 2rem; }
  .section-pad        { padding-block: 44px; }
  /* Trust strip: stack label above badges on small phones */
  .trust-strip-inner  { flex-direction: column; align-items: center; gap: .75rem; }
  .trust-badges       { gap: 1rem; }
}


/* ══════════════════════════════════════════════
   ABOUT PAGE — supplementary
══════════════════════════════════════════════ */
.about-signoff {
  margin-top: 2rem;
  padding: 1.2rem 1.5rem;
  background: var(--clr-light);
  border-left: 3px solid var(--clr-accent);
  border-radius: var(--radius);
  font-size: .92rem;
  color: var(--clr-dark);
  line-height: 1.7;
}

.section-subtitle {
  font-family: var(--ff-head);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-top: 2rem;
  margin-bottom: .75rem;
  letter-spacing: .02em;
}

/* 10-service grid — responsive columns */
@media (min-width: 1200px) {
  .services-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1199px) and (min-width: 900px) {
  .services-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 899px) and (min-width: 600px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .service-card-img { height: 145px; }
}
@media (max-width: 599px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card-img { height: 130px; }
}

/* ══════════════════════════════════════════════
   IMAGE QUALITY ENHANCEMENTS
══════════════════════════════════════════════ */

/* Smooth image loading fade-in */
img {
  transition: opacity 0.4s ease;
}
img[loading="lazy"] {
  opacity: 0;
}
img[loading="lazy"].loaded,
img.loaded {
  opacity: 1;
}

/* Service detail visual — ensure image fills completely on mobile */
@media (max-width: 900px) {
  .service-detail-visual {
    aspect-ratio: 16/9;
    max-height: 320px;
  }
}

/* About real image responsive */
@media (max-width: 900px) {
  .about-real-img {
    aspect-ratio: 16/9;
    max-height: 380px;
    width: 100%;
  }
  .about-img-wrap {
    max-width: 100%;
  }
}

/* Ensure service card body doesn't lose min height on small grid */
.service-card-body {
  min-height: 0;
}


/* ══════════════════════════════════════════════
   SERVICES MODULE — LISTING + DETAIL PAGES
══════════════════════════════════════════════ */

/* ── Services listing grid (services.php) ────── */
.svc-listing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.svc-listing-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 380px;
  text-decoration: none;
  color: #fff;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition);
}
.svc-listing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.svc-listing-card-img {
  position: absolute; inset: 0;
}
.svc-listing-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
.svc-listing-card-img img.loaded { opacity: 1; }
.svc-listing-card:hover .svc-listing-card-img img { transform: scale(1.06); }
.svc-listing-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(10,22,40,.92) 0%,
    rgba(10,22,40,.55) 55%,
    rgba(10,22,40,.25) 100%);
  transition: opacity var(--transition);
}
.svc-listing-card:hover .svc-listing-overlay { opacity: .88; }
.svc-listing-num {
  position: absolute; top: 1.25rem; left: 1.25rem;
  font-family: var(--ff-head); font-size: .85rem; font-weight: 700;
  color: var(--clr-accent-lt); letter-spacing: .12em;
  text-transform: uppercase;
}
.svc-listing-body {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 1.75rem;
}
.svc-listing-icon {
  width: 44px; height: 44px;
  background: var(--clr-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: .75rem;
  transition: background var(--transition);
}
.svc-listing-card:hover .svc-listing-icon { background: var(--clr-accent-lt); }
.svc-listing-icon i { color: #fff; font-size: .9rem; }
.svc-listing-body h3 {
  font-family: var(--ff-head); font-size: 1.4rem; font-weight: 700;
  margin: 0 0 .4rem; color: #fff; line-height: 1.25;
}
.svc-listing-body p {
  font-size: .84rem; color: rgba(255,255,255,.75); margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-clamp: 2;
}
.svc-listing-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-head); font-size: .82rem; font-weight: 700;
  color: var(--clr-accent-lt); text-transform: uppercase; letter-spacing: .08em;
  transition: gap var(--transition);
}
.svc-listing-card:hover .svc-listing-cta { gap: .75rem; }

/* Listing responsive */
@media (max-width: 900px) {
  .svc-listing-grid { grid-template-columns: 1fr; }
  .svc-listing-card { height: 300px; }
}

/* ── Service detail hero badge ────────────────── */
.svc-hero-badge {
  display: inline-flex; align-items: center;
  font-family: var(--ff-head); font-size: .85rem; font-weight: 700;
  color: var(--clr-accent-lt); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: .85rem;
  gap: .5rem;
}

/* ── Service overview 2-col grid ──────────────── */
.svc-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.svc-overview-intro {
  font-size: 1.05rem; font-weight: 500;
  color: var(--clr-dark); margin-bottom: 1rem; line-height: 1.65;
}
.svc-overview-cta {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2.25rem;
}
.svc-overview-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.svc-overview-img {
  width: 100%; height: 460px;
  object-fit: cover; display: block;
  transition: transform 0.70s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-overview-img-wrap:hover .svc-overview-img { transform: scale(1.04); }
.svc-overview-badge {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  background: var(--clr-accent);
  color: #fff;
  display: flex; align-items: center; gap: .6rem;
  padding: .65rem 1.1rem;
  border-radius: 100px;
  font-family: var(--ff-head); font-size: .88rem; font-weight: 700;
  box-shadow: 0 4px 16px rgba(27,95,192,.4);
}
.svc-overview-badge i { font-size: .9rem; }

@media (max-width: 900px) {
  .svc-overview-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .svc-overview-img  { height: 300px; }
}

/* ── Features grid ────────────────────────────── */
.svc-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.svc-feature-card {
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.svc-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.svc-feature-icon {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-accent-lt) 100%);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.svc-feature-icon i { color: #fff; font-size: 1.1rem; }
.svc-feature-card h4 {
  font-family: var(--ff-head); font-size: 1.05rem; font-weight: 700;
  color: var(--clr-white); margin: 0 0 .5rem; line-height: 1.3;
}
.svc-feature-card p {
  font-size: .875rem; color: var(--clr-gray); line-height: 1.6; margin: 0;
}

@media (max-width: 900px) { .svc-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .svc-features-grid { grid-template-columns: 1fr; } }

/* ── Process workflow steps ───────────────────── */
.svc-process-steps {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  margin-top: 3rem;
  position: relative;
}
.svc-process-step {
  flex: 1;
  position: relative;
  background: rgba(255,255,255,.06);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem 1.75rem;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform var(--transition), box-shadow var(--transition);
}
.svc-process-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.svc-process-num {
  font-family: var(--ff-head); font-size: 2.8rem; font-weight: 800;
  color: var(--clr-accent); line-height: 1; margin-bottom: .75rem;
  opacity: .9;
}
.svc-process-step h4 {
  font-family: var(--ff-head); font-size: 1rem; font-weight: 700;
  color: var(--clr-white); margin: 0 0 .6rem; line-height: 1.35;
}
.svc-process-step p {
  font-size: .84rem; color: var(--clr-gray); line-height: 1.65; margin: 0;
}
.svc-process-connector {
  position: absolute;
  /* Centre the badge in the 3rem gap:
     right = gap/2 + badge_half = 1.5rem + 1.1rem = 2.6rem outside the card */
  right: -2.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: none;
  width: 2.2rem;
  height: 2.2rem;
  background: #0d1a2e;
  border: 2px solid var(--clr-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-accent-lt);
  font-size: .75rem;
  box-shadow: 0 2px 10px rgba(37,99,235,.3);
}

@media (max-width: 900px) {
  .svc-process-steps { flex-direction: column; gap: 1rem; }
  .svc-process-step { text-align: left; padding: 1.5rem; }
  .svc-process-num { font-size: 2rem; }
  .svc-process-connector { display: none; }
}

/* ── Project gallery strip ────────────────────── */
.svc-gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
}
.svc-gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.svc-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}
.svc-gallery-item img.loaded { opacity: 1; }
.svc-gallery-item:hover img { transform: scale(1.07); }
.svc-gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,22,40,.45) 0%, transparent 55%);
  transition: opacity var(--transition);
}
.svc-gallery-item:hover .svc-gallery-overlay { opacity: .7; }

@media (max-width: 700px) {
  .svc-gallery-strip { grid-template-columns: 1fr; }
  .svc-gallery-item  { aspect-ratio: 16/9; }
}

/* ── Related services grid ────────────────────── */
.related-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.related-svc-card {
  display: block;
  background: var(--clr-dark);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-decoration: none;
  color: #fff;
  border: 1px solid var(--clr-border);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.related-svc-card:hover {
  transform: translateY(-4px);
  border-color: var(--clr-accent);
  box-shadow: 0 8px 32px rgba(27,95,192,.25);
}
.related-svc-num {
  font-family: var(--ff-head); font-size: .82rem; font-weight: 700;
  color: var(--clr-accent-lt); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: .85rem;
}
.related-svc-icon {
  width: 50px; height: 50px;
  background: rgba(59,127,212,.15);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
  transition: background var(--transition);
}
.related-svc-card:hover .related-svc-icon { background: rgba(59,127,212,.28); }
.related-svc-icon i { color: var(--clr-accent-lt); font-size: 1.1rem; }
.related-svc-card h4 {
  font-family: var(--ff-head); font-size: 1rem; font-weight: 700;
  margin: 0 0 1.25rem; color: #fff; line-height: 1.4;
}
.related-svc-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-head); font-size: .8rem; font-weight: 700;
  color: var(--clr-accent-lt); text-transform: uppercase; letter-spacing: .07em;
  transition: gap var(--transition);
}
.related-svc-card:hover .related-svc-link { gap: .7rem; }

@media (max-width: 900px) { .related-svc-grid { grid-template-columns: 1fr; } }
@media (min-width: 601px) and (max-width: 900px) { .related-svc-grid { grid-template-columns: repeat(2, 1fr); } }


/* ══════════════════════════════════════════════
   SERVICES PAGE — PREMIUM SPLIT LAYOUT
   (Link Holdings-inspired alternating rows)
══════════════════════════════════════════════ */

.svc-split-section {
  background: #0d1a2e;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 3.5rem 0;
}
.svc-split-section.svc-split-bg {
  background: #07101f;
}

/* ── Two-column flex row ──────────────────────── */
.svc-split-inner {
  display: flex;
  min-height: 580px;
  overflow: hidden;
}
/* Alternate: image swaps to right side */
.svc-split-section.svc-split-alt .svc-split-inner {
  flex-direction: row-reverse;
}

/* ── Image column ─────────────────────────────── */
.svc-split-media {
  flex: 0 0 50%;
  position: relative;
  display: flex;
  align-items: stretch;
  padding: 0 1.5rem 0 5rem;
}
/* Alt rows: image is visually on the right — flip padding */
.svc-split-section.svc-split-alt .svc-split-media {
  padding: 0 5rem 0 1.5rem;
}

/* Rounded image wrapper — clips the zoom animation */
.svc-split-img-wrap {
  position: relative;
  flex: 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 55px rgba(10,22,40,.18), 0 4px 16px rgba(10,22,40,.1);
}

/* Background-image div — animates on hover */
.svc-split-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
.svc-split-section:hover .svc-split-img {
  transform: scale(1.06);
}

/* Gradient overlay on image */
.svc-split-media-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(10,22,40,.35) 0%, transparent 55%);
  pointer-events: none;
  transition: opacity var(--transition);
}
.svc-split-section:hover .svc-split-media-overlay { opacity: .8; }

/* Floating icon badge on image */
.svc-split-badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem;
  width: 56px; height: 56px;
  background: var(--clr-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(27,95,192,.5);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  z-index: 2;
}
.svc-split-badge i { color: #fff; font-size: 1.2rem; }
.svc-split-section:hover .svc-split-badge {
  transform: scale(1.12) rotate(8deg);
  box-shadow: 0 10px 30px rgba(27,95,192,.65);
  background: var(--clr-accent-lt);
}
/* On alt rows the badge moves to the right side */
.svc-split-section.svc-split-alt .svc-split-badge {
  left: auto;
  right: 1.5rem;
}

/* ── Content column ───────────────────────────── */
.svc-split-body {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.5rem 5rem;
}

/* Number / eyebrow row */
.svc-split-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--ff-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--clr-accent);
  margin-bottom: 1.1rem;
}
.svc-split-num-badge {
  display: inline-block;
  border: 2px solid var(--clr-accent);
  border-radius: var(--radius);
  padding: .18rem .6rem;
  font-size: .95rem; font-weight: 800; line-height: 1.5;
  color: var(--clr-accent);
}

.svc-split-body h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.7rem, 2.5vw, 2.3rem);
  font-weight: 800; line-height: 1.15;
  color: var(--clr-white);
  margin: 0 0 .9rem;
}
.svc-split-desc {
  font-size: .975rem; color: var(--clr-gray);
  line-height: 1.75; margin: 0 0 1.5rem;
  max-width: 460px;
}

/* Bullet list — 3 key capabilities */
.svc-split-bullets {
  list-style: none;
  margin: 0 0 2.25rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.svc-split-bullets li {
  display: flex; align-items: center; gap: .75rem;
  font-size: .92rem; font-weight: 500;
  color: rgba(255,255,255,.8); line-height: 1.5;
}
.svc-split-bullets li::before {
  content: '';
  flex-shrink: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clr-accent);
}

/* CTA button */
.svc-split-cta {
  display: inline-flex; align-items: center; gap: .65rem;
  background: var(--clr-accent);
  color: #fff;
  padding: .9rem 2rem;
  border-radius: var(--radius);
  font-family: var(--ff-head); font-size: .9rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  text-decoration: none;
  width: fit-content;
  transition: background var(--transition), gap var(--transition), box-shadow var(--transition);
}
.svc-split-cta:hover {
  background: var(--clr-dark);
  gap: 1.05rem;
  box-shadow: 0 8px 28px rgba(10,22,40,.25);
}
.svc-split-cta i { transition: transform var(--transition); }
.svc-split-cta:hover i { transform: translateX(4px); }

/* ── Responsive ────────────────────────────────── */
@media (max-width: 1100px) {
  .svc-split-section { padding: 3rem 0; }
  .svc-split-media { padding: 0 1.5rem 0 3rem; }
  .svc-split-section.svc-split-alt .svc-split-media { padding: 0 3rem 0 1.5rem; }
  .svc-split-body  { padding: 3rem 3rem; }
}
@media (max-width: 900px) {
  .svc-split-section { padding: 2.5rem 0; }
  .svc-split-inner,
  .svc-split-section.svc-split-alt .svc-split-inner {
    flex-direction: column;
    min-height: 0;
  }
  .svc-split-media,
  .svc-split-section.svc-split-alt .svc-split-media {
    flex: none;
    height: 320px;
    padding: 0 2rem;
  }
  .svc-split-img-wrap { border-radius: 14px; }
  .svc-split-body  { flex: none; padding: 2.5rem 2rem; }
  .svc-split-desc  { max-width: 100%; }
  .svc-split-section.svc-split-alt .svc-split-badge {
    right: auto; left: 1.5rem;
  }
}
@media (max-width: 600px) {
  .svc-split-section { padding: 2rem 0; }
  .svc-split-media,
  .svc-split-section.svc-split-alt .svc-split-media {
    height: 240px;
    padding: 0 1.25rem;
  }
  .svc-split-img-wrap { border-radius: 10px; }
  .svc-split-body  { padding: 2rem 1.25rem; }
  .svc-split-badge { width: 46px; height: 46px; }
  .svc-split-badge i { font-size: 1rem; }
  .svc-split-body h2  { font-size: 1.5rem; }
  .svc-split-num-badge { font-size: .85rem; }
  .svc-split-bullets li { font-size: .875rem; }
  .svc-split-cta  { padding: .8rem 1.6rem; font-size: .85rem; }
}


/* ══════════════════════════════════════════════
   JOIN US PAGE
══════════════════════════════════════════════ */

/* Hero CTA row */
.join-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.join-hero-actions .btn-outline {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.12);
}
.join-hero-actions .btn-outline:hover {
  background: #fff;
  color: var(--clr-dark);
  border-color: #fff;
}

/* ── Benefits grid ────────────────────────── */
.join-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}
.join-benefit-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all var(--transition);
}
.join-benefit-card:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(59,127,212,.4);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
}
.join-benefit-icon {
  width: 50px;
  height: 50px;
  background: var(--clr-accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 1.25rem;
  transition: background var(--transition);
}
.join-benefit-card:hover .join-benefit-icon { background: var(--clr-accent-lt); }
.join-benefit-card h3 {
  font-family: var(--ff-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .65rem;
}
.join-benefit-card p {
  font-size: .875rem;
  color: rgba(255,255,255,.6);
  line-height: 1.75;
}

/* ── Job listings ─────────────────────────── */
.job-listings {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 3rem;
}
.job-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--clr-accent);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  transition: all var(--transition);
}
.job-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-left-color: var(--clr-accent-lt);
}
.job-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.job-title {
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--clr-white);
  margin: 0 0 .45rem;
}
.job-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-size: .82rem;
  color: var(--clr-gray);
}
.job-meta i { color: var(--clr-accent); margin-right: 3px; }
.job-badge {
  flex-shrink: 0;
  background: var(--clr-accent);
  color: #fff;
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
}
.job-desc {
  font-size: .88rem;
  color: var(--clr-gray);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.job-card-footer { display: flex; justify-content: flex-end; }
.btn.btn-sm { padding: .55rem 1.25rem; font-size: .82rem; }

/* ── Hiring timeline ──────────────────────── */
.hiring-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
  position: relative;
}
.hiring-timeline::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-lt));
  z-index: 0;
}
.hiring-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.hiring-step-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--clr-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(27,95,192,.4);
  transition: background var(--transition), transform var(--transition);
}
.hiring-step:hover .hiring-step-circle {
  background: var(--clr-accent-lt);
  transform: scale(1.08);
}
.hiring-step-circle i {
  font-size: .95rem;
  color: rgba(255,255,255,.7);
  line-height: 1;
}
.hiring-step-num {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255,255,255,.9);
  letter-spacing: .05em;
  line-height: 1;
}
.hiring-step h4 {
  font-family: var(--ff-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--clr-white);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}
.hiring-step p {
  font-size: .8rem;
  color: var(--clr-gray);
  line-height: 1.65;
}

/* ── Testimonials slider ──────────────────── */
.join-ts-wrap { margin-top: 3rem; }

.join-ts-slide { display: none; }
.join-ts-slide.active {
  display: block;
  animation: joinFadeUp .45s ease both;
}
@keyframes joinFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.join-ts-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 3rem 3.5rem;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.join-ts-quote-icon {
  font-size: 2.2rem;
  color: var(--clr-accent-lt);
  opacity: .5;
  margin-bottom: 1.25rem;
  line-height: 1;
}
.join-ts-text {
  font-size: 1.05rem;
  color: rgba(255,255,255,.82);
  line-height: 1.85;
  font-style: italic;
  margin-bottom: 2.25rem;
}
.join-ts-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.join-ts-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--clr-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.join-ts-info {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.join-ts-info strong { color: #fff; font-size: .95rem; font-weight: 700; }
.join-ts-info span   { color: rgba(255,255,255,.5); font-size: .8rem; }
.join-ts-tenure      { color: var(--clr-accent-lt) !important; font-size: .77rem !important; }

.join-ts-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.join-ts-nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  background: transparent;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.join-ts-nav:hover {
  border-color: var(--clr-accent-lt);
  color: var(--clr-accent-lt);
  background: rgba(59,127,212,.1);
}
.join-ts-dots { display: flex; gap: 8px; }
.join-ts-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}
.join-ts-dot.active,
.join-ts-dot:hover {
  background: var(--clr-accent-lt);
  transform: scale(1.25);
}

/* ── Join CTA strip ───────────────────────── */
.join-cta-strip {
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-dark-3) 60%, var(--clr-dark) 100%);
  padding-block: 5rem;
}
.join-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.join-cta-text h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: .4rem;
}
.join-cta-text p { color: rgba(255,255,255,.7); font-size: 1rem; }
.join-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Contact HR section ───────────────────── */
.hr-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 3rem;
  margin-top: 3rem;
  align-items: start;
}
.hr-info-col { display: flex; flex-direction: column; gap: 1.25rem; }
.hr-info-card {
  background: var(--clr-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  transition: box-shadow var(--transition);
}
.hr-info-card:hover { box-shadow: var(--shadow); }
.hr-info-icon {
  width: 40px;
  height: 40px;
  background: var(--clr-accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  margin-bottom: .5rem;
}
.hr-info-card h4 {
  font-family: var(--ff-head);
  font-size: .95rem;
  font-weight: 700;
  color: var(--clr-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hr-info-card p {
  font-size: .82rem;
  color: var(--clr-gray);
  line-height: 1.6;
  margin-bottom: .2rem;
}
.hr-link {
  color: var(--clr-accent);
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: color var(--transition);
}
.hr-link:hover { color: var(--clr-accent-lt); text-decoration: underline; }
.hr-plain { color: var(--clr-dark); font-size: .875rem; font-weight: 500; }

/* HR form — light-background overrides */
.hr-form {
  background: #fff;
  border: 1px solid rgba(10,22,40,.08);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.hr-form .form-group label {
  color: var(--clr-dark);
  font-size: .78rem;
}
.hr-form .form-group input,
.hr-form .form-group select,
.hr-form .form-group textarea {
  background: #f8f9fb;
  border: 1px solid #d1d5db;
  color: var(--clr-dark);
}
.hr-form .form-group input::placeholder,
.hr-form .form-group textarea::placeholder { color: #9ca3af; }
.hr-form .form-group input:focus,
.hr-form .form-group select:focus,
.hr-form .form-group textarea:focus {
  border-color: var(--clr-accent);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(27,95,192,.08);
}
.hr-form .form-group select option { background: #fff; color: var(--clr-dark); }

/* ── Culture pillars ─────────────────────── */
.join-culture-section { background: #111827; }
.join-culture-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3.5rem;
}
.join-culture-pillar {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-top: 4px solid var(--clr-accent);
  border-radius: var(--radius-lg);
  padding: 2.75rem 2rem 2.25rem;
  box-shadow: var(--shadow);
  text-align: center;
  position: relative;
  transition: transform var(--transition), box-shadow var(--transition);
}
.join-culture-pillar:hover {
  transform: translateY(-7px);
  box-shadow: var(--shadow-lg);
}
.join-pillar-num {
  font-family: var(--ff-head);
  font-size: 5rem;
  font-weight: 800;
  color: rgba(255,255,255,.25);
  line-height: 1;
  margin-bottom: .25rem;
  letter-spacing: -.04em;
}
.join-pillar-icon {
  font-size: 2rem;
  color: var(--clr-accent);
  margin-bottom: 1.25rem;
  display: block;
}
.join-culture-pillar h3 {
  font-family: var(--ff-head);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--clr-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.join-culture-pillar p {
  color: var(--clr-gray);
  font-size: .92rem;
  line-height: 1.7;
}
.join-culture-cta {
  text-align: center;
  margin-top: 3rem;
}

/* ── Join Us responsive ───────────────────── */
@media (max-width: 1100px) {
  .join-culture-pillars { grid-template-columns: repeat(2, 1fr); }
  .join-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .hiring-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 2.5rem;
  }
  .hiring-timeline::before { display: none; }
}
@media (max-width: 900px) {
  .hr-contact-grid { grid-template-columns: 1fr; }
  .join-ts-card { padding: 2.25rem 2rem; }
}
@media (max-width: 768px) {
  .join-culture-pillars { grid-template-columns: 1fr; }
  .join-benefits-grid { grid-template-columns: 1fr; }
  .hiring-timeline    { grid-template-columns: 1fr 1fr; }
  .join-cta-inner     { flex-direction: column; align-items: flex-start; }
  .join-cta-text h2   { font-size: 1.8rem; }
  .job-card-header    { flex-direction: column; gap: .75rem; }
  .hr-form            { padding: 1.75rem 1.5rem; }
}
@media (max-width: 500px) {
  .hiring-timeline { grid-template-columns: 1fr; }
  .join-ts-card    { padding: 1.75rem 1.25rem; }
  .join-ts-text    { font-size: .9rem; }
  .join-hero-actions { flex-direction: column; }
  .join-hero-actions .btn { width: 100%; justify-content: center; }
}


/* ══════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════ */
/* ── Theme Toggle Pill ─────────────────────── */
.theme-toggle {
  position: relative;
  width: 66px;
  height: 32px;
  border-radius: 16px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1.5px solid rgba(255,255,255,.18);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-right: .4rem;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 10px rgba(0,0,0,.3);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 4px 16px rgba(0,0,0,.35);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--clr-accent-lt);
  outline-offset: 3px;
}

.toggle-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.toggle-icon-sun,
.toggle-icon-moon {
  font-size: .7rem;
  z-index: 1;
  position: relative;
  transition: color 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
/* Dark mode (default): moon side is active — thumb on right */
.toggle-icon-sun  { color: rgba(255,255,255,.3); }
.toggle-icon-moon { color: rgba(255,255,255,.92); transform: scale(1.1); }

/* Sliding thumb */
.toggle-thumb {
  position: absolute;
  left: 4px;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(220,232,255,.9) 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.9);
  transform: translateY(-50%) translateX(34px); /* dark: pushed to right (moon side) */
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s ease,
              box-shadow 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

/* Light mode — thumb slides left (sun side), turns blue */
[data-theme="light"] .theme-toggle {
  background: rgba(37,99,235,.2);
  border-color: rgba(37,99,235,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 10px rgba(37,99,235,.25);
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(37,99,235,.28);
  border-color: rgba(37,99,235,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 16px rgba(37,99,235,.3);
}
[data-theme="light"] .toggle-thumb {
  transform: translateY(-50%) translateX(0); /* left side (sun side) */
  background: linear-gradient(135deg, var(--clr-accent) 0%, #1d4ed8 100%);
  box-shadow: 0 2px 10px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.3);
}
[data-theme="light"] .toggle-icon-sun  { color: rgba(255,255,255,.95); transform: scale(1.1); }
[data-theme="light"] .toggle-icon-moon { color: rgba(37,99,235,.45); transform: scale(1); }


/* ══════════════════════════════════════════════
   SMOOTH THEME TRANSITION
   Applied via JS for .35s, then removed
══════════════════════════════════════════════ */
.theme-transitioning,
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition: background-color .35s ease,
              color .35s ease,
              border-color .35s ease,
              box-shadow .35s ease !important;
}


/* ══════════════════════════════════════════════
   LIGHT THEME  [data-theme="light"]
   All overrides restore light-mode palette
══════════════════════════════════════════════ */

[data-theme="light"] {
  --clr-gray:    #4b5563;
  --clr-gray-lt: #6b7280;
  --clr-border:  rgba(255,255,255,.65);
  --clr-border-hover: rgba(255,255,255,.9);
  --shadow:    0 4px 24px rgba(37,99,235,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 12px 48px rgba(37,99,235,.14), 0 4px 8px rgba(0,0,0,.07);
}

[data-theme="light"] body {
  background-color: #ccd9ec;
  background-image: radial-gradient(rgba(37,99,235,.14) 1px, transparent 1px);
  background-size: 28px 28px;
  color: #0a1628;
}

/* ── Header ──────────────────────────────── */
[data-theme="light"] .site-header {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 -1px 0 rgba(37,99,235,.08), 0 4px 24px rgba(37,99,235,.1);
}
[data-theme="light"] .site-header.scrolled {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(32px) saturate(190%);
  -webkit-backdrop-filter: blur(32px) saturate(190%);
  box-shadow: inset 0 -1px 0 rgba(37,99,235,.1), 0 8px 32px rgba(37,99,235,.12);
}
[data-theme="light"] .logo-text         { color: #0a1628; }
[data-theme="light"] .logo-sub          { color: var(--clr-accent); }
[data-theme="light"] .nav-link          { color: #374151; }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active   { color: var(--clr-accent); }
[data-theme="light"] .nav-link::after   { background: var(--clr-accent); }
[data-theme="light"] .hamburger span    { background: #374151; }
[data-theme="light"] .dropdown-menu a   { color: #1e293b; }
[data-theme="light"] .dropdown-menu a:hover { color: var(--clr-accent); background: rgba(37,99,235,.07); }
[data-theme="light"] .theme-toggle {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.12);
  color: #374151;
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(37,99,235,.1);
  border-color: rgba(37,99,235,.3);
  color: var(--clr-accent);
}

/* ── Dropdown ────────────────────────────── */
[data-theme="light"] .dropdown-menu {
  background: #ffffff;
  border: 1px solid rgba(10,22,40,.10);
  border-top: 2px solid var(--clr-accent);
  box-shadow: 0 8px 32px rgba(10,22,40,.16), 0 2px 8px rgba(10,22,40,.09), 0 0 0 1px rgba(10,22,40,.04);
}

/* ── Service Ticker ──────────────────────── */
[data-theme="light"] .svc-ticker-strip {
  background: linear-gradient(90deg, rgba(37,99,235,.08) 0%, rgba(37,99,235,.05) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(37,99,235,.12);
  border-bottom: 1px solid rgba(37,99,235,.12);
}
[data-theme="light"] .svc-ticker-strip::before { background: linear-gradient(to right, #ccd9ec, transparent); }
[data-theme="light"] .svc-ticker-strip::after  { background: linear-gradient(to left,  #ccd9ec, transparent); }
[data-theme="light"] .svc-ticker-item  { color: #374151; }
[data-theme="light"] .svc-ticker-dot   { background: var(--clr-accent); }

/* ── Trust Strip ─────────────────────────── */
[data-theme="light"] .trust-strip {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(155%);
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
[data-theme="light"] .trust-badge     { color: #374151; }
[data-theme="light"] .trust-divider-v { background: rgba(37,99,235,.15); }

/* ── Section Typography ──────────────────── */
[data-theme="light"] .section-title:not(.light)         { color: #0a1628; }
[data-theme="light"] .section-desc:not(.light)          { color: #4b5563; }
[data-theme="light"] .section-label:not(.light)         { color: var(--clr-accent); }
[data-theme="light"] .section-label:not(.light)::before { background: var(--clr-accent); }

/* ── Hero ────────────────────────────────── */
[data-theme="light"] .hero        { background: #0c0d10; }
[data-theme="light"] .hero-title  { color: var(--clr-white); }
[data-theme="light"] .hero-desc   { color: rgba(255,255,255,.9); }

/* ── bg-light / bg-dark in light mode ───── */
[data-theme="light"] .bg-light {
  background-color: #bfcee4;
  background-image: radial-gradient(rgba(37,99,235,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .bg-dark {
  background-color: #0d1a2e;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── About ───────────────────────────────── */
[data-theme="light"] .about-intro         { color: #374151; }
[data-theme="light"] .about-checkmarks li { color: #374151; }

/* ── Why-Us Cards ────────────────────────── */
[data-theme="light"] .why-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 32px rgba(37,99,235,.1), 0 2px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .why-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 100%);
  border-color: rgba(37,99,235,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.18), 0 16px 48px rgba(37,99,235,.15), 0 4px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .why-card h3 { color: #0a1628; }
[data-theme="light"] .why-number  { color: rgba(37,99,235,.06); }

/* ── Project Cards ───────────────────────── */
[data-theme="light"] .project-card {
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09), 0 2px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .project-card:hover {
  background: linear-gradient(160deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.68) 100%);
  border-color: rgba(37,99,235,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.16), 0 20px 52px rgba(37,99,235,.14), 0 4px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .project-info h4   { color: #0a1628; }
[data-theme="light"] .filter-btn {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.7);
  color: #374151;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active { background: var(--clr-accent); border-color: var(--clr-accent); color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.35); }

/* ── Testimonials ────────────────────────── */
[data-theme="light"] .testimonial-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border-left: 1px solid rgba(255,255,255,.78);
  border-right: 1px solid rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(255,255,255,.6);
  border-top: 3px solid rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09), 0 2px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .testimonial-card:hover {
  border-top-color: var(--clr-accent);
  border-color: rgba(37,99,235,.25);
  border-top-color: var(--clr-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.14), 0 14px 44px rgba(37,99,235,.13), 0 4px 8px rgba(0,0,0,.05);
}
[data-theme="light"] .testimonial-card > p         { color: #374151; }
[data-theme="light"] .testimonial-author div strong { color: #0a1628; }

/* ── Team Cards ──────────────────────────── */
[data-theme="light"] .team-card {
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09), 0 2px 4px rgba(0,0,0,.05);
}
[data-theme="light"] .team-card:hover {
  border-color: rgba(37,99,235,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.16), 0 18px 50px rgba(37,99,235,.13), 0 4px 8px rgba(0,0,0,.06);
}
[data-theme="light"] .team-card-body h4   { color: #0a1628; }
[data-theme="light"] .team-card-role      { color: var(--clr-accent); }
[data-theme="light"] .team-social-links a {
  background: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.8);
  color: #6b7280;
}

/* ── Process Steps ───────────────────────── */
[data-theme="light"] .process-step h4 { color: #0a1628; }

/* ── Hiring Timeline ─────────────────────── */
[data-theme="light"] .hiring-step h4 { color: #0a1628; }
[data-theme="light"] .hiring-step p  { color: #1e293b; }

/* ── Timeline ────────────────────────────── */
[data-theme="light"] .timeline-dot     { border-color: #f0f4ff; }
[data-theme="light"] .timeline-item h4 { color: #0a1628; }

/* ── Contact Page ────────────────────────── */
[data-theme="light"] section:has(.contact-page-grid) {
  background-color: #bfcee4;
  background-image: radial-gradient(rgba(37,99,235,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .contact-info-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09);
}
[data-theme="light"] .contact-info-card:hover {
  border-color: rgba(37,99,235,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.2), 0 12px 40px rgba(37,99,235,.14);
}
[data-theme="light"] .contact-info-body p,
[data-theme="light"] .contact-info-body a     { color: #374151; }
[data-theme="light"] .contact-form-card {
  background: linear-gradient(160deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.58) 100%);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 12px 48px rgba(37,99,235,.12), 0 4px 8px rgba(0,0,0,.05);
}
[data-theme="light"] .contact-form-card h3                         { color: #0a1628; }
[data-theme="light"] .contact-form-card .form-subtitle             { color: #4b5563; }
[data-theme="light"] .contact-form-card .form-group label          { color: #374151; }
[data-theme="light"] .contact-form-card .form-group input,
[data-theme="light"] .contact-form-card .form-group select,
[data-theme="light"] .contact-form-card .form-group textarea {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.75);
  color: #0a1628;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .contact-form-card .form-group select option { background: #e8f0fa; color: #0a1628; }
[data-theme="light"] .contact-form-card .form-group input::placeholder,
[data-theme="light"] .contact-form-card .form-group textarea::placeholder { color: rgba(0,0,0,.35); }
[data-theme="light"] .contact-form-card .form-group input:focus,
[data-theme="light"] .contact-form-card .form-group select:focus,
[data-theme="light"] .contact-form-card .form-group textarea:focus {
  background: rgba(255,255,255,.88);
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), inset 0 1px 0 rgba(255,255,255,.95);
  outline: none;
}
[data-theme="light"] .contact-form-card .form-group input.field-invalid,
[data-theme="light"] .contact-form-card .form-group textarea.field-invalid {
  border-color: #ef4444;
  background: rgba(239,68,68,.06);
}

/* ── Homepage Contact CTA ────────────────── */
[data-theme="light"] .contact-cta {
  background-color: #c8d8ee;
  background-image: radial-gradient(rgba(37,99,235,.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .contact-cta .section-label.light          { color: var(--clr-accent); }
[data-theme="light"] .contact-cta .section-label.light::before  { background: var(--clr-accent); }
[data-theme="light"] .contact-cta .section-title                { color: #0a1628; }
[data-theme="light"] .contact-cta .light-p                      { color: #374151; }
[data-theme="light"] .contact-cta .contact-item                 { color: #1e293b; }
[data-theme="light"] .contact-cta .contact-item i               { background: rgba(37,99,235,.12); color: var(--clr-accent); }
[data-theme="light"] .contact-cta .contact-item a               { color: #1e293b; }
[data-theme="light"] .contact-cta .contact-item a:hover         { color: var(--clr-accent); }
[data-theme="light"] .contact-form {
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .contact-form .form-group label {
  color: #374151;
}
[data-theme="light"] .contact-form .form-group input,
[data-theme="light"] .contact-form .form-group select,
[data-theme="light"] .contact-form .form-group textarea {
  background: #ffffff;
  border: 1px solid rgba(10,22,40,.15);
  color: #0a1628;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(0,0,0,.05);
}
[data-theme="light"] .contact-form .form-group select option     { background: #e8f0fa; color: #0a1628; }
[data-theme="light"] .contact-form .form-group input::placeholder,
[data-theme="light"] .contact-form .form-group textarea::placeholder { color: rgba(0,0,0,.36); }
[data-theme="light"] .contact-form .form-group input:focus,
[data-theme="light"] .contact-form .form-group select:focus,
[data-theme="light"] .contact-form .form-group textarea:focus {
  background: #ffffff;
  border-color: rgba(37,99,235,.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14), inset 0 1px 0 rgba(255,255,255,.95);
  outline: none;
}

/* ── Service Detail Cards ────────────────── */
[data-theme="light"] .svc-feature-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 20px rgba(37,99,235,.08);
}
[data-theme="light"] .svc-feature-card h4 { color: #0a1628; }
[data-theme="light"] .svc-process-step {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 20px rgba(37,99,235,.08);
}
[data-theme="light"] .svc-process-step h4 { color: #0a1628; }
[data-theme="light"] .svc-process-connector {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  border-color: var(--clr-accent);
}
[data-theme="light"] .svc-split-section {
  background-color: #bfcee4;
  background-image: radial-gradient(rgba(37,99,235,.1) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .svc-split-body h2  { color: #0a1628; }
[data-theme="light"] .svc-split-bullets li { color: #374151; }

/* ── Join Us Page ────────────────────────── */
[data-theme="light"] .join-culture-section {
  background-color: #bfcee4;
  background-image: radial-gradient(rgba(37,99,235,.1) 1px, transparent 1px);
  background-size: 28px 28px;
}
[data-theme="light"] .join-culture-pillar {
  background: linear-gradient(135deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.78);
  border-top: 4px solid var(--clr-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.1);
}
[data-theme="light"] .join-culture-pillar h3 { color: #0a1628; }
[data-theme="light"] .join-pillar-num        { color: rgba(10,22,40,.35); }
[data-theme="light"] .job-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 20px rgba(37,99,235,.08);
}
[data-theme="light"] .job-title { color: #0a1628; }

/* ── About Page Extras ───────────────────── */
[data-theme="light"] .commitment-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 20px rgba(37,99,235,.08);
}
[data-theme="light"] .commitment-body h4 { color: #0a1628; }
[data-theme="light"] .cert-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(18px) saturate(165%);
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid rgba(255,255,255,.76);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 16px rgba(37,99,235,.08);
}
[data-theme="light"] .cert-card h5 { color: #0a1628; }
[data-theme="light"] .industry-item {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .industry-item span    { color: #374151; }
[data-theme="light"] .about-signoff {
  background: rgba(255,255,255,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.6);
  color: #374151;
}

/* ── Projects Page ───────────────────────── */
[data-theme="light"] .project-card-lg {
  background: linear-gradient(160deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,.55) 100%);
  backdrop-filter: blur(22px) saturate(175%);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09);
}
[data-theme="light"] .pcl-body h4 { color: #0a1628; }

/* ── Buttons in light mode ───────────────── */
[data-theme="light"] .btn-outline {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
  box-shadow: 0 0 0 0 transparent;
}
[data-theme="light"] .btn-outline:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(37,99,235,.35);
  transform: translateY(-2px);
}
[data-theme="light"] .btn-outline-light {
  border-color: var(--clr-accent);
  color: var(--clr-accent);
}
[data-theme="light"] .btn-outline-light:hover {
  background: var(--clr-accent);
  color: #ffffff;
}

/* ── Service card text in light mode ─────── */
[data-theme="light"] .service-card h3    { color: #0a1628; }
[data-theme="light"] .service-card p     { color: #374151; }
[data-theme="light"] .service-link       { color: var(--clr-accent); }
[data-theme="light"] .service-link:hover { color: #1d4ed8; }

/* ── Hero outline button (shows on dark hero even in light mode) ─ */
[data-theme="light"] .hero .btn-outline {
  border-color: rgba(255,255,255,.5);
  color: var(--clr-white);
}
[data-theme="light"] .hero .btn-outline:hover {
  border-color: var(--clr-accent-lt);
  color: var(--clr-accent-lt);
  background: transparent;
  box-shadow: none;
}


/* ══════════════════════════════════════════════
   GLASS SYSTEM — ambient glows & enhancements
══════════════════════════════════════════════ */

/* Ambient glow behind key sections so backdrop-filter has colour to blur */
.about.section-pad,
.projects.section-pad,
section:has(.testimonials-grid),
section:has(.contact-page-grid),
section:has(.why-grid) {
  position: relative;
  overflow: hidden;
}
.about.section-pad::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(37,99,235,.1) 0%, transparent 65%);
  filter: blur(80px);
  top: -150px; right: -200px;
  pointer-events: none;
  z-index: 0;
}
.about.section-pad > * { position: relative; z-index: 1; }

section:has(.why-grid)::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 65%);
  filter: blur(70px);
  bottom: -100px; left: -100px;
  pointer-events: none;
  z-index: 0;
}
section:has(.why-grid) > * { position: relative; z-index: 1; }

section:has(.testimonials-grid)::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(37,99,235,.08) 0%, transparent 65%);
  filter: blur(60px);
  top: 50%; right: -100px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
section:has(.testimonials-grid) > * { position: relative; z-index: 1; }

/* Global glass card utility class */
.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 8px 40px rgba(0,0,0,.45);
  border-radius: var(--radius-lg);
}

/* Contact form inputs — frosted glass look */
.contact-form-card .form-group input,
.contact-form-card .form-group select,
.contact-form-card .form-group textarea {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--clr-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.contact-form-card .form-group input::placeholder,
.contact-form-card .form-group textarea::placeholder { color: rgba(255,255,255,.28); }
.contact-form-card .form-group input:focus,
.contact-form-card .form-group select:focus,
.contact-form-card .form-group textarea:focus {
  background: rgba(37,99,235,.12);
  border-color: rgba(96,165,250,.5);
  box-shadow: 0 0 0 3px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.1);
  outline: none;
}

/* ── Autofill overrides ──────────────────────────────────────────
   Browsers (Chrome, Firefox, Safari) inject a white or yellow
   background on autofilled inputs, overriding custom dark styles.
   Technique: a 1000px inset box-shadow paints over the injected
   layer; -webkit-text-fill-color controls the text colour.
   transition: background-color 5000s is the Firefox fallback —
   it delays any background-colour change for so long the injected
   colour never visually appears.                                  */

/* Dark theme — homepage CTA form + contact-page card */
.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.contact-form-card .form-group input:-webkit-autofill,
.contact-form-card .form-group input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #0d1a2e inset !important;
  box-shadow:         0 0 0 1000px #0d1a2e inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
  transition: background-color 5000s ease-in-out 0s !important;
}
/* Focus state while autofilled: keep the focus ring visible */
.form-group input:-webkit-autofill:focus,
.contact-form-card .form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #0d1a2e inset,
                      0 0 0 3px rgba(37,99,235,.18) !important;
  box-shadow:         0 0 0 1000px #0d1a2e inset,
                      0 0 0 3px rgba(37,99,235,.18) !important;
  border-color: rgba(96,165,250,.5) !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff;
}

/* Light theme — contact-page card only */
[data-theme="light"] .contact-form-card .form-group input:-webkit-autofill,
[data-theme="light"] .contact-form-card .form-group input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #f5f8ff inset !important;
  box-shadow:         0 0 0 1000px #f5f8ff inset !important;
  -webkit-text-fill-color: #0a1628 !important;
  caret-color: #0a1628;
  transition: background-color 5000s ease-in-out 0s !important;
}
[data-theme="light"] .contact-form-card .form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f5f8ff inset,
                      0 0 0 3px rgba(37,99,235,.15) !important;
  box-shadow:         0 0 0 1000px #f5f8ff inset,
                      0 0 0 3px rgba(37,99,235,.15) !important;
  border-color: rgba(37,99,235,.5) !important;
  -webkit-text-fill-color: #0a1628 !important;
  caret-color: #0a1628;
}

/* Light theme — homepage CTA form */
[data-theme="light"] .contact-form .form-group input:-webkit-autofill,
[data-theme="light"] .contact-form .form-group input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px #f5f8ff inset !important;
  box-shadow:         0 0 0 1000px #f5f8ff inset !important;
  -webkit-text-fill-color: #0a1628 !important;
  caret-color: #0a1628;
  transition: background-color 5000s ease-in-out 0s !important;
}
[data-theme="light"] .contact-form .form-group input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #f5f8ff inset,
                      0 0 0 3px rgba(37,99,235,.14) !important;
  box-shadow:         0 0 0 1000px #f5f8ff inset,
                      0 0 0 3px rgba(37,99,235,.14) !important;
  border-color: rgba(37,99,235,.5) !important;
  -webkit-text-fill-color: #0a1628 !important;
  caret-color: #0a1628;
}

/* Light-mode ambient glow blobs (blue, softer than dark) */
[data-theme="light"] .about.section-pad::before {
  background: radial-gradient(circle, rgba(37,99,235,.18) 0%, transparent 65%);
}
[data-theme="light"] section:has(.why-grid)::before {
  background: radial-gradient(circle, rgba(6,182,212,.15) 0%, transparent 65%);
}
[data-theme="light"] section:has(.testimonials-grid)::before {
  background: radial-gradient(circle, rgba(37,99,235,.14) 0%, transparent 65%);
}

/* Light-mode about accent card */
[data-theme="light"] .about-accent-card {
  background: linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.62) 100%);
  backdrop-filter: blur(24px) saturate(175%);
  -webkit-backdrop-filter: blur(24px) saturate(175%);
  border: 1px solid rgba(255,255,255,.85);
  border-left: 3px solid var(--clr-accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.12), 0 16px 48px rgba(37,99,235,.15);
  color: #0a1628;
}
[data-theme="light"] .about-accent-card > i { color: var(--clr-accent); }
[data-theme="light"] .about-accent-card strong { color: #0a1628; }
[data-theme="light"] .about-accent-card span   { color: #4b5563; }

/* Light-mode sustainability strip */
[data-theme="light"] .sustainability-strip {
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-top: 1px solid rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.5);
}
[data-theme="light"] .strip-text h3 { color: #0a1628; }
[data-theme="light"] .strip-text p  { color: #4b5563; }
[data-theme="light"] .strip-icon    { color: var(--clr-accent); }

/* Light-mode hero stats bar */
[data-theme="light"] .hero-stats {
  background: linear-gradient(90deg, rgba(255,255,255,.75) 0%, rgba(240,247,255,.82) 100%);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(37,99,235,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 24px rgba(37,99,235,.1);
}
[data-theme="light"] .stat-label {
  color: #4b5e7a;
}
[data-theme="light"] .stat-divider {
  background: rgba(37,99,235,.18);
}

/* Light-mode service card glass (matches other light cards) */
[data-theme="light"] .service-card {
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.52) 100%);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 6px 28px rgba(37,99,235,.09);
}
[data-theme="light"] .service-card:hover {
  background: linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.65) 100%);
  border-color: rgba(37,99,235,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(37,99,235,.16), 0 16px 48px rgba(37,99,235,.14);
}


/* ══════════════════════════════════════════════
   SERVICES TICKER  (running marquee strip)
══════════════════════════════════════════════ */
.svc-ticker-strip {
  background: #0d1525;
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-block: 1rem;
  overflow: hidden;
  position: relative;
}
.svc-ticker-strip::before,
.svc-ticker-strip::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.svc-ticker-strip::before { left: 0;  background: linear-gradient(to right, #0d1525, transparent); }
.svc-ticker-strip::after  { right: 0; background: linear-gradient(to left,  #0d1525, transparent); }

.svc-ticker-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: svc-ticker-scroll 30s linear infinite;
}
.svc-ticker-track:hover { animation-play-state: paused; }

@keyframes svc-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.svc-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-inline: 2rem;
  font-family: var(--ff-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.svc-ticker-item:hover { color: var(--clr-accent-lt); }
.svc-ticker-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--clr-accent);
  border-radius: 50%;
  opacity: .8;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════
   PREMIUM MOTION SYSTEM — Luxury Grade
   Motion-only layer. No layout / spacing changes.
══════════════════════════════════════════════ */

/* ── Easing tokens ──────────────────────────── */
:root {
  --ease-expo:   cubic-bezier(0.19, 1, 0.22, 1);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-silk:   cubic-bezier(0.76, 0, 0.24, 1);
}

/* ── Page entrance ──────────────────────────── */
@keyframes wts-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.wts-ready {
  animation: wts-page-enter 0.45s var(--ease-luxury) both;
}

/* ── Page exit (navigation fade-out) ───────── */
@keyframes wts-page-exit {
  to { opacity: 0; }
}
body.wts-exit {
  animation: wts-page-exit 0.12s var(--ease-silk) forwards;
  pointer-events: none;
}

/* ── Enhanced reveal timing ─────────────────── */
/* More luxurious easing + slightly longer travel */
.reveal-up, .reveal-left, .reveal-right {
  transition: opacity 0.9s var(--ease-expo) var(--delay, 0s),
              transform 0.9s var(--ease-expo) var(--delay, 0s);
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

/* ── Hero entrance sequence ─────────────────── */
@keyframes wts-hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wts-hero-in-dim {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 0.85; transform: none; }
}

.hero-badge         { animation: wts-hero-in     1.0s var(--ease-expo) 0.08s both; }
.hero-title .line-1 { animation: wts-hero-in-dim 1.1s var(--ease-expo) 0.22s both; }
.hero-title .line-2 { animation: wts-hero-in     1.1s var(--ease-expo) 0.38s both; }
.hero-title .line-3 { animation: wts-hero-in-dim 1.1s var(--ease-expo) 0.52s both; }
.hero-desc          { animation: wts-hero-in     1.0s var(--ease-expo) 0.66s both; }
.hero-actions       { animation: wts-hero-in     1.0s var(--ease-expo) 0.82s both; }
.scroll-indicator   { animation: wts-hero-in     0.9s var(--ease-expo) 1.0s  both; }

/* ── Hero stats staggered entrance (no observer dependency) ─ */
.hero-stats .stat-item              { animation: wts-hero-in 0.9s var(--ease-expo) 0.95s both; }
.hero-stats .stat-item:nth-child(3) { animation-delay: 1.05s; }
.hero-stats .stat-item:nth-child(5) { animation-delay: 1.15s; }
.hero-stats .stat-item:nth-child(7) { animation-delay: 1.25s; }

/* ── Accent text shimmer ─────────────────────── */
@keyframes wts-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.accent-text {
  background: linear-gradient(
    135deg,
    #5da5ff 0%, #a8ceff 35%, #e0f0ff 50%, #a8ceff 65%, #5da5ff 100%
  );
  background-size: 250% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wts-shimmer 7s ease infinite;
}

/* ── Hero background: slow breathing / scale pulse ──────────── */
@keyframes wts-hero-breathe {
  0%, 100% { transform: scale(1.0); }
  50%       { transform: scale(1.05); }
}
.hero-bg     { animation: wts-hero-breathe 8s ease-in-out infinite; will-change: transform; }
.page-hero-bg { animation: wts-hero-breathe 8s ease-in-out infinite; will-change: transform; }

/* ── Page-hero entrance sequence ────────────────────────────── */
/* Reuses the existing wts-hero-in keyframe (translateY 26px → none) */
.page-hero .breadcrumb     { animation: wts-hero-in 0.75s var(--ease-expo) 0.1s  both; }
.page-hero h1              { animation: wts-hero-in 1.0s  var(--ease-expo) 0.28s both; }
.page-hero .page-hero-desc { animation: wts-hero-in 0.85s var(--ease-expo) 0.48s both; }
.join-hero-actions         { animation: wts-hero-in 0.85s var(--ease-expo) 0.65s both; }
.svc-hero-badge            { animation: wts-hero-in 0.75s var(--ease-expo) 0.1s  both; }

/* ── Page-hero accent <em> glow pulse ───────────────────────── */
@keyframes wts-em-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(93,165,255,0); }
  50%       { text-shadow: 0 0 14px rgba(93,165,255,0.45); }
}
.page-hero h1 em { animation: wts-em-glow 3s ease-in-out infinite; }

/* ── Why-card icon lift ──────────────────────── */
.why-icon {
  display: inline-block;
  transition: transform 0.55s var(--ease-expo);
}
.why-card:hover .why-icon {
  transform: translateY(-5px) scale(1.08);
}

/* ── Service link arrow push ─────────────────── */
.service-link i {
  display: inline-block;
  transition: transform 0.4s var(--ease-expo);
}
.service-link:hover i { transform: translateX(5px); }

/* ── Dropdown luxury timing ─────────────────── */
.dropdown-menu {
  transition: opacity 0.32s var(--ease-luxury),
              transform 0.42s var(--ease-expo),
              visibility 0.32s linear;
}

/* ── Filter button lift ──────────────────────── */
.filter-btn {
  transition: border-color 0.32s var(--ease-luxury),
              background    0.32s var(--ease-luxury),
              color         0.32s var(--ease-luxury),
              transform     0.35s var(--ease-expo);
}
.filter-btn:hover:not(.active) { transform: translateY(-2px); }

/* ── Logo hover fade ─────────────────────────── */
.logo-link { transition: opacity 0.3s var(--ease-luxury); }
.logo-link:hover { opacity: 0.78; }

/* ── About-accent card entrance refinement ───── */
.about-accent-card {
  transition: transform 0.55s var(--ease-expo), box-shadow 0.55s var(--ease-expo);
}

/* ── Stagger: footer columns ─────────────────── */
/* Initial state only when JS adds .wts-motion to <html> */
.wts-motion .footer-grid > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-expo), transform 0.85s var(--ease-expo);
}
.wts-motion .footer-grid.wts-revealed > * { opacity: 1; transform: none; }
.wts-motion .footer-grid.wts-revealed > *:nth-child(1) { transition-delay: 0s;    }
.wts-motion .footer-grid.wts-revealed > *:nth-child(2) { transition-delay: 0.1s;  }
.wts-motion .footer-grid.wts-revealed > *:nth-child(3) { transition-delay: 0.2s;  }
.wts-motion .footer-grid.wts-revealed > *:nth-child(4) { transition-delay: 0.3s;  }

/* ── Stagger: about checkmarks ───────────────── */
.wts-motion .about-checkmarks > li {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.65s var(--ease-expo), transform 0.65s var(--ease-expo);
}
.wts-motion .about-checkmarks.wts-revealed > li { opacity: 1; transform: none; }
.wts-motion .about-checkmarks.wts-revealed > li:nth-child(1) { transition-delay: 0.05s; }
.wts-motion .about-checkmarks.wts-revealed > li:nth-child(2) { transition-delay: 0.14s; }
.wts-motion .about-checkmarks.wts-revealed > li:nth-child(3) { transition-delay: 0.23s; }
.wts-motion .about-checkmarks.wts-revealed > li:nth-child(4) { transition-delay: 0.32s; }
.wts-motion .about-checkmarks.wts-revealed > li:nth-child(5) { transition-delay: 0.41s; }

/* ── Stagger: trust badges ───────────────────── */
.wts-motion .trust-badges > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo);
}
.wts-motion .trust-badges.wts-revealed > *              { opacity: 1; transform: none; }
.wts-motion .trust-badges.wts-revealed > *:nth-child(1) { transition-delay: 0s;    }
.wts-motion .trust-badges.wts-revealed > *:nth-child(2) { transition-delay: 0.08s; }
.wts-motion .trust-badges.wts-revealed > *:nth-child(3) { transition-delay: 0.16s; }
.wts-motion .trust-badges.wts-revealed > *:nth-child(4) { transition-delay: 0.24s; }
.wts-motion .trust-badges.wts-revealed > *:nth-child(5) { transition-delay: 0.32s; }
.wts-motion .trust-badges.wts-revealed > *:nth-child(6) { transition-delay: 0.40s; }

/* ── Prefers-reduced-motion ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.wts-ready,
  body.wts-exit,
  .hero-badge,
  .hero-title .line-1,
  .hero-title .line-2,
  .hero-title .line-3,
  .hero-desc,
  .hero-actions,
  .hero-stats .stat-item,
  .scroll-indicator  { animation: none !important; opacity: 1 !important; transform: none !important; }

  .accent-text { animation: none; }

  /* New hero animations — skip for reduced-motion users */
  .hero-bg, .page-hero-bg { animation: none !important; }
  .page-hero .breadcrumb,
  .page-hero h1,
  .page-hero .page-hero-desc,
  .join-hero-actions,
  .svc-hero-badge { animation: none !important; opacity: 1 !important; transform: none !important; }
  .page-hero h1 em { animation: none !important; }

  .reveal-up, .reveal-left, .reveal-right { transition-duration: 0.01s !important; }

  .wts-motion .footer-grid > *,
  .wts-motion .about-checkmarks > li,
  .wts-motion .trust-badges > * {
    opacity: 1 !important;
    transform: none !important;
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}

/* ══════════════════════════════════════════════════════════
   MICRO-ANIMATION SYSTEM II
   Word-split heading jumps + floating ambient elements
══════════════════════════════════════════════════════════ */

/* ── Word-split: clip window ────────────────────────────── */
/* Each word rises through this overflow:hidden container   */
.wts-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.15em;
  line-height: inherit;
}

/* Word starts BELOW the clip window — invisible until animated */
.wts-word { display: inline-block; transform: translateY(105%); }

/* ── Spring-jump keyframe ────────────────────────────────── */
@keyframes wts-word-rise {
  0%   { transform: translateY(108%); opacity: 0; }
  55%  { transform: translateY(-5%);  opacity: 1; }
  78%  { transform: translateY(2%); }
  100% { transform: translateY(0); }
}

/* Fires per-word when heading enters viewport (.wts-h-animate added by JS) */
.wts-h-animate .wts-word {
  animation: wts-word-rise 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--wi, 0) * 0.075s);
}

/* ── Section label: slide from left ─────────────────────── */
/* Specificity (0,2,0) — deliberately low so .wts-label-in at (0,3,0) wins */
.wts-motion .section-label {
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.55s var(--ease-expo), transform 0.55s var(--ease-expo);
}
/* Hero label stays visible — JS never observes it */
.wts-motion .hero .section-label {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Triggered by initSectionLabels() — (0,3,0) beats hide rule (0,2,0) */
.wts-motion .section-label.wts-label-in {
  opacity: 1;
  transform: none;
}

/* ── Ambient orb drift ───────────────────────────────────── */
/* Applies to existing ::before pseudo-elements on key sections */
@keyframes wts-orb-drift {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-22px) scale(1.03); }
  70%       { transform: translateY(-10px) scale(0.98); }
}
.about.section-pad::before             { animation: wts-orb-drift 14s ease-in-out infinite; }
section:has(.why-grid)::before         { animation: wts-orb-drift 18s ease-in-out infinite reverse; }
section:has(.testimonials-grid)::before{ animation: wts-orb-drift 16s ease-in-out infinite 3s; }

/* ── Services section: floating orb glows ───────────────── */
.services.section-pad {
  position: relative;
  overflow: hidden;
}
.services.section-pad > * { position: relative; z-index: 1; }
.services.section-pad::before,
.services.section-pad::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.services.section-pad::before {
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(27,95,192,.08) 0%, transparent 65%);
  top: -120px; right: -140px;
  animation: wts-orb-drift 15s ease-in-out infinite;
}
.services.section-pad::after {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(59,127,212,.06) 0%, transparent 65%);
  bottom: 40px; left: -80px;
  animation: wts-orb-drift 20s ease-in-out infinite reverse;
  animation-delay: 5s;
}

/* ── Prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wts-word { transform: none !important; opacity: 1 !important; animation: none !important; }
  .wts-motion .section-label {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .about.section-pad::before,
  section:has(.why-grid)::before,
  section:has(.testimonials-grid)::before,
  .services.section-pad::before,
  .services.section-pad::after { animation: none !important; }
}
/* Pause heavy animations during scroll */
.is-scrolling .hero-blob-1,
.is-scrolling .hero-blob-2,
.is-scrolling .geo-1,
.is-scrolling .geo-2,
.is-scrolling .geo-3,
.is-scrolling .svc-ticker-track,
.is-scrolling .hero-bg,
.is-scrolling .page-hero-bg {
  animation-play-state: paused;
}
/* Pause hero animations when hero has scrolled off-screen */
.hero.hero-offscreen .hero-blob-1,
.hero.hero-offscreen .hero-blob-2,
.hero.hero-offscreen .geo-1,
.hero.hero-offscreen .geo-2,
.hero.hero-offscreen .geo-3 {
  animation-play-state: paused;
}
/* ══════════════════════════════════════════════
   BACK TO TOP
══════════════════════════════════════════════ */
.back-to-top {
  position: fixed;
  right: 32px;
  bottom: 36px;
  width: 44px;
  height: 44px;
  background: var(--clr-accent);
  color: var(--clr-white);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
  z-index: 998;
  box-shadow: 0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(37,99,235,.2);
}
/* Stack above chatbot: 36px bottom + 58px height + 12px gap = 106px */
.back-to-top.has-chatbot-peer { bottom: 106px; }
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover         { background: var(--clr-accent-lt); transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid rgba(96,165,250,.8); outline-offset: 3px; }
@media (max-width: 768px) {
  .back-to-top                  { right: 24px; bottom: 24px; width: 40px; height: 40px; }
  .back-to-top.has-chatbot-peer { bottom: 88px; } /* 24 + 52 + 12 */
}
@media (max-width: 480px) {
  .back-to-top                  { right: 16px; bottom: 20px; }
  .back-to-top.has-chatbot-peer { bottom: 80px; } /* 20 + 48 + 12 */
}


/* ══════════════════════════════════════════════
   RESPONSIVE AUDIT FIX — homepage + about
   Fluid layout, spacing, and typography for
   320 → 375 → 425 → 768 → 1024 → 1440 → 2560px
══════════════════════════════════════════════ */

/* ── 1. Cancel all stepped section-pad overrides — one clamp rules all sizes */
.section-pad { padding-block: clamp(48px, 8vw, 100px); }

/* ── 2. Container: guarantee ≥ 1 rem side-padding at every viewport */
.container { width: min(1240px, calc(100% - 2rem)); }

/* ── 3. Section header bottom margin: fluid so it never crowds on mobile */
.section-header { margin-bottom: clamp(1.75rem, 4vw, 3.5rem); }

/* ── 4. Grid gaps: fluid clamp so spacing scales naturally */
.why-grid          { gap: clamp(1rem, 2vw, 2rem); }
.values-grid       { gap: clamp(1rem, 2vw, 2rem); }
.testimonials-grid { gap: clamp(1rem, 2vw, 1.8rem); }
.stats-row         { gap: clamp(1rem, 2vw, 2rem); }
.mission-grid      { gap: clamp(1rem, 2vw, 2rem); }

/* ── 5. Card padding: fluid so cards don't feel bloated on small screens */
.why-card {
  padding: clamp(1.5rem, 2.5vw, 2.8rem) clamp(1.25rem, 2vw, 2.2rem);
}
.value-card {
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.6rem);
}
.mission-card {
  padding: clamp(1.5rem, 2.5vw, 2.4rem);
}

/* ── 6. Checklist items: icon stays top-aligned so long lines never truncate */
.about-checkmarks li   { align-items: flex-start; }
.about-checkmarks li i { flex-shrink: 0; margin-top: .15em; }

/* ── 7. Services grid: consistent card height — body fills remaining space */
.service-card-body { flex: 1; }

/* ── 8. ≤ 600px — compact page-hero + center-align hero text on mobile */
@media (max-width: 600px) {
  /* Page-hero: remove the excess top/bottom padding on small phones */
  .page-hero {
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 2.5rem;
  }

  /* Homepage hero: stack and center */
  .hero-content  { text-align: center; }
  .hero-title    { align-items: center; }
  .hero-badge    { justify-content: center; }
  .hero-desc     { margin-inline: auto; }
  .hero-actions  { justify-content: center; }

  /* Checklist override: stays left-aligned inside the centered block */
  .about-checkmarks { text-align: left; }
}

/* ── 9. ≤ 480px — hero stats 2×2, compact typography */
@media (max-width: 480px) {
  /* Hero stats bar: tighter items */
  .stat-item   { flex: 1 1 45%; padding-inline: .75rem; }
  .stat-number,
  .stat-suffix { font-size: 1.55rem; }
  .stat-label  { font-size: .65rem; }

  /* Section label: tighter letter-spacing on narrow phones */
  .section-label { font-size: .75rem; letter-spacing: .12em; }

  /* About page stat numbers (stats-section): scale down gracefully */
  .stat-box-num { font-size: clamp(2rem, 7vw, 3.2rem); }
}

/* ── 10. ≤ 425px — hero title font-sizes for 320–425px viewports */
@media (max-width: 425px) {
  /* line-2 ("Meets Reliability.") — was 3.2rem fixed; use fluid clamp */
  .hero-title .line-2 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
  /* line-1 / line-3 — scale down to match */
  .hero-title .line-1,
  .hero-title .line-3 { font-size: clamp(1.4rem, 5.5vw, 2.4rem); }
}

/* ── 11. ≤ 375px — very narrow phones: trust strip + hero badge */
@media (max-width: 375px) {
  .trust-badges { gap: .75rem; }
  .trust-badge  { font-size: .72rem; }
  .hero-badge   { font-size: .68rem; letter-spacing: .14em; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE AUDIT FIX — join-us + contact + services
   Clipping fixes, fluid spacing, mobile layout
══════════════════════════════════════════════ */

/* ── 12. Cancel reveal-right/left on contact page.
         section:has(.contact-page-grid) has overflow:hidden. .contact-form-card
         uses reveal-right; at ≤900px it is full-width and translateX(40px)
         extends past the section boundary — clipped. */
section:has(.contact-page-grid) .reveal-right,
section:has(.contact-page-grid) .reveal-left {
  transform: none !important;
}

/* ── 12b. Cancel reveal-up translateY on contact info cards (pre-reveal only).
          The info cards start at translateY(40px). The grid gap on mobile is
          only 1.5 rem (24px) but the shift is 40px, so the cards visually
          overflow 16px into the form card area — overlapping it.
          :not(.revealed) keeps hover { translateY(-3px) } working after reveal. */
section:has(.contact-page-grid) .reveal-up:not(.revealed) {
  transform: none !important;
}

/* ── 12c. Restore adequate row-gap between info stack and form card on mobile.
          .contact-form-card has box-shadow: 0 12px 56px — the 56px blur extends
          44px ABOVE the card's top edge. The responsive rules at ≤768px and
          ≤480px shrink the gap to 1.75rem / 1.5rem; the upward shadow then
          bleeds across the gap and visually merges with the Office info card,
          making them appear to overlap. Holding the gap at 2.5rem keeps the
          shadow zone fully contained within the gap. */
@media (max-width: 900px) {
  .contact-page-grid { gap: 2.5rem; }
}

/* ── 13. Cancel reveal-right/left on services split columns at ≤900px.
         Below 900px columns stack full-width; body overflow-x:hidden clips
         the 40px translateX shift at the right viewport edge. */
@media (max-width: 900px) {
  .svc-split-media,
  .svc-split-body {
    transform: none !important;
  }
}

/* ── 14. Join CTA strip: fluid padding replaces the fixed 5rem */
.join-cta-strip { padding-block: clamp(2.5rem, 6vw, 5rem); }

/* ── 15. Join Us: fluid card / pillar padding — compact on mobile */
.join-benefit-card   { padding: clamp(1.25rem, 2.5vw, 2rem); }
.join-culture-pillar { padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 2.5vw, 2rem); }

/* ── 16. Join Us: stack + center hero actions and CTA on mobile */
@media (max-width: 600px) {
  .join-hero-actions      { flex-direction: column; align-items: center; gap: .75rem; }
  .join-hero-actions .btn { width: 100%; justify-content: center; }
  .join-cta-inner         { align-items: center; text-align: center; }
  .join-cta-actions       { justify-content: center; }
}

/* ── 17. Hiring timeline: 1-col on ≤425px (2×144px columns are too narrow) */
@media (max-width: 425px) {
  .hiring-timeline { grid-template-columns: 1fr; }
}

/* ── 18. Services split: tighter image height + body padding on very small phones */
@media (max-width: 375px) {
  .svc-split-media,
  .svc-split-section.svc-split-alt .svc-split-media {
    height: 200px;
    padding: .75rem .75rem 0;
  }
  .svc-split-body { padding: 1.25rem 1rem; }
}


/* ══════════════════════════════════════════════
   JOIN-US CTA STRIP — BUTTON OVERLAP FIX
   .join-cta-inner carries reveal-up (translateY 40px).
   .join-cta-strip has no overflow:hidden and its mobile
   bottom padding equals the translateY offset, so the
   button visually spills into the footer.
   Cancel the translateY; opacity fade-in is preserved.
══════════════════════════════════════════════ */
.join-cta-strip .reveal-up {
  transform: none !important;
}


/* ══════════════════════════════════════════════
   MOBILE HEADER — THEME TOGGLE ALIGNMENT FIX
   On mobile the <nav> is position:fixed (out of flow),
   leaving Logo + Toggle + Hamburger as the three flex
   items in .header-inner. With justify-content:space-between
   they spread evenly: Logo-left | Toggle-CENTER | Hamburger-right.
   margin-left:auto on the toggle absorbs all free space so
   Toggle and Hamburger group together on the right.
══════════════════════════════════════════════ */
@media (max-width: 768px) {
  .theme-toggle {
    margin-left: auto;
  }
}


/* ══════════════════════════════════════════════
   SERVICE DETAIL — HORIZONTAL OVERFLOW FIX
   The .svc-overview-visual.reveal-right pre-reveal
   state applies translateX(40px), pushing the element
   past the container right edge at viewports below
   ~1360px and causing unwanted horizontal scrolling.
   Match the existing pattern used for about / contact /
   split sections: cancel the translateX, keep opacity.
══════════════════════════════════════════════ */

/* Cancel reveal-left/-right shifts in the service-detail
   overview section on ALL viewport sizes. */
#overview .reveal-left,
#overview .reveal-right {
  transform: none !important;
}

/* Breadcrumb: wrap long service names onto a second line
   rather than overflowing the mobile viewport. */
.breadcrumb { flex-wrap: wrap; }


/* ══════════════════════════════════════════════
   CONTACT FORM — NESTED BACKDROP-FILTER FIX
   .contact-form-card has backdrop-filter:blur(28px) (stacking
   context). Each input/select/textarea also carries
   backdrop-filter:blur(8px), creating nested GPU compositor layers.
   On mobile, the blur sampling area for the textarea layer extends
   past its layout edge and overpaints the submit button below it.
   The card-level blur already provides frosted-glass depth; removing
   the per-input blur eliminates the nested compositing conflict.
   !important needed to override the [data-theme="light"] rule
   (higher attribute-selector specificity).
══════════════════════════════════════════════ */
.contact-form-card .form-group input,
.contact-form-card .form-group select,
.contact-form-card .form-group textarea {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}