/* ─────────────────────────────────────────────────────────────────────────────
   home.css  —  Elmatics Engineers  —  Home Page Styles
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Full-width / no-overflow base ─────────────────────────────────────────── */
/*
   Prevent any child element from creating a horizontal scrollbar.
   Applied to html + body so it catches both layout layers.
*/
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Welcome section ────────────────────────────────────────────────────────── */
.home-page .welcome-section {
  background:
    linear-gradient(135deg, rgba(25, 118, 210, 0.06), rgba(231, 76, 60, 0.04)),
    var(--surface);
}

.home-page .welcome-section .section-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 28px;
}

.home-page .welcome-section .section-desc {
  max-width: 820px;
}

.home-page .welcome-content {
  display: grid;
  gap: 28px;
}

@media (min-width: 1024px) {
  .home-page .welcome-content {
    align-items: start;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
  }
}

.home-page .welcome-copy {
  border-left: 4px solid var(--primary);
  padding-left: 24px;
}

.home-page .welcome-copy p {
  color: var(--on-surface-variant);
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 18px;
}

.home-page .welcome-copy p:last-child {
  margin-bottom: 0;
}

.home-page .welcome-strengths {
  background: var(--surface);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.home-page .welcome-strengths::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}

.home-page .welcome-strengths h3 {
  color: var(--on-surface);
  font-size: 24px;
  margin-bottom: 20px;
}

.home-page .welcome-strengths ul {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-page .welcome-strengths li {
  align-items: flex-start;
  color: var(--on-surface-variant);
  display: flex;
  font-size: 16px;
  gap: 12px;
  line-height: 1.45;
}

.home-page .welcome-strengths .material-symbols-outlined {
  color: var(--primary);
  flex: 0 0 auto;
  font-size: 22px;
  margin-top: 1px;
}

/* ── Hero section ───────────────────────────────────────────────────────────── */

/*
  Design intent
  ─────────────
  • Hero must sit perfectly "above the fold" — no clipping, no overflow.
  • On desktop (≥992 px) the frames are 16:9, so we let the hero grow to
    the natural 16:9 height of the viewport width, but we ALWAYS cap it at
    100vh minus the navbar height (approximated with a CSS custom property
    --navbar-h that defaults to 72px; override it in your layout if the
    navbar height differs).
  • On tablet / mobile the hero scales down fluidly while preserving ratio.
  • The <canvas> fills the hero container and uses object-fit:contain
    semantics (enforced via JS drawImageContain) so frames are never
    cropped or stretched.
*/

:root {
  --navbar-h: 72px; /* override in _Layout.cshtml if your navbar is taller */
}

.home-page .hero-bg {
  background-color: #172033;
}

/* ── Hero container ─────────────────────────────────────────────────────────── */
.home-page .hero {
  /* Full viewport width — no side gaps */
  width: 100%;
  /* Contain children; never let frames bleed outside */
  overflow: hidden;
  /* Remove any margin / padding that could cause gaps */
  margin: 0;
  padding: 0;
  /* Default (mobile-first): fluid 16:9 ratio, capped at viewport */
  height: min(calc(100vw * 9 / 16), calc(100vh - var(--navbar-h)));
  max-height: calc(100vh - var(--navbar-h));
  min-height: 0;
  /* Prevent this element from ever being wider than the viewport */
  max-width: 100vw;
  position: relative;
}

/* ── Hero frame-sequence wrapper ────────────────────────────────────────────── */
.home-page .hero-frame-sequence {
  /* Fill the .hero container exactly */
  width: 100%;
  height: 100%;
  /* CSS background image fallback (drawn by JS before canvas is ready) */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /* No extra transforms or animations on the wrapper itself */
  animation: none;
  /* Promote to own GPU compositor layer so canvas repaints never block CSS animation thread */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: contents;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  position: relative;
  /* New stacking context keeps canvas layer isolated from text overlay */
  isolation: isolate;
}

.home-page .hero-frame-sequence::after {
  content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO TEXT SLIDER — Performance-First Cinematic Animation System  v2
   ─────────────────────────────────────────────────────────────────────────
   PERFORMANCE RULES (strictly enforced):
   ✓  Only `opacity` and `transform` are animated — both run on the GPU
      compositor thread and NEVER cause layout reflow or paint.
   ✗  NO filter:blur()    — forces GPU re-composite, stalls canvas paint
   ✗  NO letter-spacing   — triggers text layout reflow every frame
   ✗  NO inset/top/left   — triggers layout reflow
   ✗  NO width/height     — triggers layout + paint

   SLIDE 4 SYNC:
   The Earth-globe frame segment begins at frame ≈ 397 of 557
   (≈ 71.3 % of total).  Slide 4 visibility is aligned to start
   exactly at 71 % so text appears the moment the Earth footage begins.
   Reset is a hard snap at 100 % → 0 % invisible so the cycle is clean.

   Total cycle: 27.55 s (locked to frame sequence duration)
   Slide windows:
     Slide 1:  0 %   → 26 %   (≈ 7.16 s)
     Slide 2:  29 %  → 50 %   (≈ 5.79 s)
     Slide 3:  49 %  → 70 %   (≈ 5.79 s)
     Slide 4:  71 %  → 100 %  (≈ 8.00 s) ← Earth segment, full window
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay: vignette for legibility (no animation needed here) ─────────── */
.home-page .hero-text-slider {
  align-items: stretch;
  color: #ffffff;
  display: grid;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  text-align: center;
  z-index: 3;
  /* GPU-composited layer for the whole overlay */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Subtle bottom+top vignette for consistent text legibility */
  background:
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(0,0,0,0.42) 0%, transparent 100%),
    radial-gradient(ellipse 80%  35% at 50% 0%,   rgba(0,0,0,0.20) 0%, transparent 100%);
}

/* ── Shared slide base ───────────────────────────────────────────────────── */
.home-page .hero-text-slide {
  align-items: center;
  display: flex;
  grid-area: 1 / 1;
  justify-content: center;
  opacity: 0;
  padding: clamp(14px, 3vw, 42px);
  visibility: hidden;
  /* Promote each slide to its own compositor layer */
  will-change: opacity, transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Deep text shadow — no filter needed */
  text-shadow:
    0 1px 3px  rgba(0,0,0,0.95),
    0 4px 14px rgba(0,0,0,0.80),
    0 10px 36px rgba(0,0,0,0.45);
}

.home-page .hero-text-slide-1 {
  flex-direction: column;
  justify-content: space-between;
  padding-bottom: clamp(18px, 5vw, 62px);
  padding-top: clamp(18px, 4.6vw, 58px);
}

.home-page .hero-text-slide-2,
.home-page .hero-text-slide-4 {
  align-items: flex-end;
  padding-bottom: clamp(18px, 5vw, 62px);
}

.home-page .hero-text-slide-3 {
  align-items: flex-end;
  padding-bottom: 3.5cm;
}

/* ── Typography ──────────────────────────────────────────────────────────── */
.home-page .hero-slide-title,
.home-page .hero-slide-copy {
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;          /* static — never animated */
  margin: 0 auto;
  max-width: min(1120px, 94vw);
}

.home-page .hero-slide-title {
  font-size: clamp(24px, 4.2vw, 66px);
  line-height: 1.05;
  position: relative;
  display: inline-block;
  will-change: opacity, transform;
}

/* Accent bar — uses transform:scaleX only (GPU-safe) */
.home-page .hero-slide-title::after {
  content: '';
  position: absolute;
  left: 10%;
  top: -16px;
  width: 80%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), #ff6b35, var(--primary), transparent);
  box-shadow: 0 0 10px rgba(244,44,55,0.7), 0 0 22px rgba(244,44,55,0.35);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  animation: heroAccentBar 27.55s linear infinite;
  will-change: transform, opacity;
}

.home-page .hero-slide-copy-Slide-2 {
  font-size: clamp(18px, 3.25vw, 40px);
  line-height: 1.22;
  will-change: opacity, transform;
}

.home-page .hero-slide-copy {
  font-size: clamp(24px, 4.2vw, 66px);
  line-height: 1.22;
  position: relative;
  will-change: opacity, transform;
}

.home-page .hero-text-slide-2 .hero-slide-copy-Slide-2 {
  max-width: min(1180px, 94vw);
}

.home-page .hero-text-slide-3 .hero-slide-copy,
.home-page .hero-text-slide-4 .hero-slide-copy {
  max-width: min(1040px, 94vw);
}

/* ── Anniversary Banner ──────────────────────────────────────────────────── */
.home-page .banner-drop-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(78px, 26vw, 320px);
  margin: 0 auto;
}

.home-page .hero-anniversary-banner {
  display: block;
  height: auto;
  max-height: clamp(78px, 26vw, 320px);
  max-width: min(720px, 85vw);
  margin: 0 auto;
  object-fit: contain;
  will-change: opacity, transform;
  /* Static drop-shadow (not animated) */
  filter: drop-shadow(0 0 16px rgba(255,215,0,0.30)) drop-shadow(0 3px 10px rgba(0,0,0,0.50));
}

/* ── Fire Cracker ─────────────────────────────────────────────────────────── */
.home-page .hero-rotator-badge .fire-cracker-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 10;
  /* Ensure it doesn't inherit transforms from parent animations */
  will-change: transform;
}

/* ── CSS-drawn fire-cracker bar — commented out, replaced by rocket image ── */
/*
.home-page .fire-cracker {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  width: clamp(6px, 1.2vw, 12px);
  height: clamp(30px, 6vw, 60px);
  background: linear-gradient(to top, #c9a227 0%, #d4af37 50%, #e6c200 100%);
  border-radius: 50% 50% 30% 30%;
  opacity: 0;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 30px rgba(255, 236, 139, 0.7), 0 0 45px rgba(255, 248, 220, 0.5);
}

.home-page .fire-cracker.active {
  animation: fireCrackerLaunch 1.5s ease-out forwards;
}

.home-page .fire-cracker-container .fire-cracker {
  animation: fireCrackerSequence 27.55s linear infinite;
}

.home-page .fire-cracker::before {
  content: '';
  position: absolute;
  bottom: -15px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 15px;
  background: linear-gradient(to top, #ff6b00, #ff9500, #ffd700);
  border-radius: 50% 50% 0 0;
  animation: fireCrackerSpark 0.1s linear infinite;
}
*/

/* ── Rocket image — same container anchor, same fireCrackerSequence animation */
.home-page .fire-cracker-container .rocket-launch-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(30px, 6vw, 60px);
  height: auto;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  animation: fireCrackerSequence 27.55s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255, 120, 0, 0.6));
}

/* ── Blast Effect ─────────────────────────────────────────────────────────── */
.home-page .blast-effect {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  opacity: 0;
}

.home-page .blast-effect.active {
  animation: blastExplode 0.6s ease-out forwards;
}

.home-page .fire-cracker-container .blast-effect {
  animation: blastSequence 27.55s linear infinite;
}

.home-page .blast-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(4px, 1vw, 8px);
  height: clamp(4px, 1vw, 8px);
  border-radius: 50%;
  opacity: 0;
}

.home-page .blast-particle:nth-child(1) { background: #ffd700; animation: blastParticle1 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(2) { background: #ffec8b; animation: blastParticle2 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(3) { background: #fff8dc; animation: blastParticle3 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(4) { background: #ffd700; animation: blastParticle4 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(5) { background: #ffec8b; animation: blastParticle5 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(6) { background: #fff8dc; animation: blastParticle6 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(7) { background: #ffd700; animation: blastParticle7 0.6s ease-out forwards; }
.home-page .blast-particle:nth-child(8) { background: #ffec8b; animation: blastParticle8 0.6s ease-out forwards; }

/* ── Fire Cracker Launch Animation ─────────────────────────────────────────── */
@keyframes fireCrackerLaunch {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  75% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-75vh);
  }
}

/* ── Fire Cracker Sequence Animation (syncs with card flip) ───────────────── */
@keyframes fireCrackerSequence {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
  20.1% {
    opacity: 0;
    transform: translateX(-50%) translateY(-75vh);
  }
  20.2% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
  40.1% {
    opacity: 0;
    transform: translateX(-50%) translateY(-75vh);
  }
  40.2% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
  60.1% {
    opacity: 0;
    transform: translateX(-50%) translateY(-75vh);
  }
  60.2% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
  80.1% {
    opacity: 0;
    transform: translateX(-50%) translateY(-75vh);
  }
  80.2% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-75vh);
  }
}

@keyframes fireCrackerSpark {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Blast Explosion Animation ───────────────────────────────────────────── */
@keyframes blastExplode {
  0% { opacity: 0; transform: translateX(-50%) scale(0); }
  50% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* ── Blast Sequence Animation (syncs with fire cracker at 75vh) ────────────── */
@keyframes blastSequence {
  0%, 19.5% {
    opacity: 0;
    transform: translateX(-50%) scale(0);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  20.5%, 39.5% {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
  }
  40% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  40.5%, 59.5% {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  60.5%, 79.5% {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
  }
  80% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  80.5%, 100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.5);
  }
}

@keyframes blastParticle1 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-60px, -60px); } }
@keyframes blastParticle2 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(60px, -60px); } }
@keyframes blastParticle3 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-60px, 60px); } }
@keyframes blastParticle4 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(60px, 60px); } }
@keyframes blastParticle5 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, -80px); } }
@keyframes blastParticle6 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 80px); } }
@keyframes blastParticle7 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-80px, 0); } }
@keyframes blastParticle8 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(80px, 0); } }

/* ── Responsive Adjustments ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* .home-page .fire-cracker — commented out, replaced by rocket image */
  /*
  .home-page .fire-cracker {
    width: clamp(6px, 1.2vw, 12px);
    height: clamp(30px, 6vw, 60px);
  }
  */
  .home-page .fire-cracker-container .rocket-launch-img {
    width: clamp(24px, 5vw, 48px);
  }
  .home-page .blast-particle {
    width: clamp(3px, 0.8vw, 6px);
    height: clamp(3px, 0.8vw, 6px);
  }
  @keyframes blastParticle1 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-40px, -40px); } }
  @keyframes blastParticle2 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(40px, -40px); } }
  @keyframes blastParticle3 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-40px, 40px); } }
  @keyframes blastParticle4 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(40px, 40px); } }
  @keyframes blastParticle5 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, -50px); } }
  @keyframes blastParticle6 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 50px); } }
  @keyframes blastParticle7 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(-50px, 0); } }
  @keyframes blastParticle8 { 0% { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); } 100% { opacity: 0; transform: translate(-50%, -50%) translate(50px, 0); } }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE ANIMATION ASSIGNMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── SLIDE 1 — ASCEND: rises from below ─────────────────────────────────── */
.home-page .hero-text-slide-1 {
  animation: heroSlideOne 27.55s linear infinite;
}
.home-page .hero-text-slide-1 .hero-slide-title {
  animation: heroTitleAscend 27.55s cubic-bezier(0.22,1,0.36,1) infinite;
  max-width: min(860px, 58vw) !important;
}
.home-page .hero-text-slide-1 .banner-drop-wrapper {
  animation: heroBannerFloat 27.55s cubic-bezier(0.22,1,0.36,1) infinite;
}

/* ── SLIDE 2 — WIPE: slides in from left ────────────────────────────────── */
.home-page .hero-text-slide-2 {
  animation: heroSlideTwo 27.55s linear infinite;
}
.home-page .hero-text-slide-2 .hero-slide-copy-Slide-2 {
  animation: heroTextWipeLeft 27.55s cubic-bezier(0.22,1,0.36,1) infinite;
}

/* ── SLIDE 3 — DRIFT: gentle float up ───────────────────────────────────── */
.home-page .hero-text-slide-3 {
  animation: heroSlideThree 27.55s linear infinite;
}
.home-page .hero-text-slide-3 .hero-slide-copy {
  animation: heroTextDrift 27.55s cubic-bezier(0.22,1,0.36,1) infinite;
}

/* ── SLIDE 4 — SURGE: Earth segment, starts at 71% ──────────────────────── */
.home-page .hero-text-slide-4 {
  animation: heroSlideFour 27.55s linear infinite;
}
.home-page .hero-text-slide-4 .hero-slide-copy {
  animation: heroTextSurge 27.55s cubic-bezier(0.22,1,0.36,1) infinite;
}

/* Slide 4 pulse ring — transform:scale only, no inset animation ─────────── */
.home-page .hero-text-slide-4 .hero-slide-copy::before {
  content: '';
  position: absolute;
  /* Fixed position — never animated, only opacity+scale change */
  inset: -18px -28px;
  border-radius: 10px;
  background: transparent;
  border: 2px solid rgba(244,44,55,0);
  pointer-events: none;
  will-change: opacity, transform;
  animation: heroSurgeRing 27.55s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — transform + opacity ONLY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Visibility controllers (opacity + visibility) ───────────────────────── */
/* Slide 1: visible 0%–26% */
@keyframes heroSlideOne {
  0%          { opacity: 0; visibility: hidden;  }
  1%          { opacity: 1; visibility: visible; }
  23%         { opacity: 1; visibility: visible; }
  26%         { opacity: 0; visibility: hidden;  }
  100%        { opacity: 0; visibility: hidden;  }
}

/* Slide 2: visible 29%–50% */
@keyframes heroSlideTwo {
  0%,  28%    { opacity: 0; visibility: hidden;  }
  30%         { opacity: 1; visibility: visible; }
  48%         { opacity: 1; visibility: visible; }
  50%         { opacity: 0; visibility: hidden;  }
  100%        { opacity: 0; visibility: hidden;  }
}

/* Slide 3: visible 49%–70% */
@keyframes heroSlideThree {
  0%,  49%    { opacity: 0; visibility: hidden;  }
  51%         { opacity: 1; visibility: visible; }
  68%         { opacity: 1; visibility: visible; }
  70%         { opacity: 0; visibility: hidden;  }
  100%        { opacity: 0; visibility: hidden;  }
}

/* Slide 4: visible 71%–100% (Earth globe segment — full window) */
/* Hard snap back to hidden at 0% so there's no ghost at cycle start */
@keyframes heroSlideFour {
  0%          { opacity: 0; visibility: hidden;  }  /* hard reset */
  70%         { opacity: 0; visibility: hidden;  }
  71%         { opacity: 1; visibility: visible; }
  99.9%       { opacity: 1; visibility: visible; }  /* hold until last video frame */
  100%        { opacity: 0; visibility: hidden;  }  /* snap hidden when video resets */
}

/* ── Slide 1 accent bar: scaleX sweep (GPU-safe) ─────────────────────────── */
@keyframes heroAccentBar {
  0%          { transform: scaleX(0); opacity: 0; }
  5%          { transform: scaleX(0); opacity: 0; }
  13%         { transform: scaleX(1); opacity: 1; }
  22%         { transform: scaleX(1); opacity: 0.85; }
  26%         { transform: scaleX(0); opacity: 0; }
  100%        { transform: scaleX(0); opacity: 0; }
}

/* ── Slide 1 title: translateY + opacity only ────────────────────────────── */
@keyframes heroTitleAscend {
  0%          { transform: translateY(32px); opacity: 0; }
  2%          { opacity: 1; }
  8%          { transform: translateY(-2px);  opacity: 1; }
  15%         { transform: translateY(0px);   opacity: 1; }
  22%         { transform: translateY(-3px);  opacity: 1; }
  25%         { transform: translateY(-10px); opacity: 0; }
  26%, 100%   { transform: translateY(32px);  opacity: 0; }
}

@keyframes heroBannerFloat {
  0%          { transform: translateY(60vh) scale(0.5); opacity: 0; }
  2%          { opacity: 0.4; }
  8%          { transform: translateY(0) scale(1); opacity: 1; }
  14%         { transform: translateY(0) scale(1); opacity: 1; }
  /* Hold banner fully stable until the very moment Slide 1 text exits (26%) */
  25.9%       { transform: translateY(0) scale(1); opacity: 1; }
  26%, 100%   { transform: translateY(60vh) scale(0.5); opacity: 0; }
}

/* ── Slide 2 text: translateX slide in from left ─────────────────────────── */
@keyframes heroTextWipeLeft {
  0%, 28%     { transform: translateX(-52px); opacity: 0; }
  32%         { transform: translateX(3px);   opacity: 1; }
  46%         { transform: translateX(0px);   opacity: 1; }
  49%         { transform: translateX(40px);  opacity: 0; }
  50%, 100%   { transform: translateX(-52px); opacity: 0; }
}

/* ── Slide 3 text: translateY gentle upward drift ────────────────────────── */
@keyframes heroTextDrift {
  0%, 49%     { transform: translateY(24px) scale(0.97); opacity: 0; }
  53%         { transform: translateY(0px)  scale(1.00); opacity: 1; }
  61%         { transform: translateY(-4px) scale(1.01); opacity: 1; }
  67%         { transform: translateY(-2px) scale(1.00); opacity: 1; }
  69.5%       { transform: translateY(-11px) scale(0.97); opacity: 0; }
  70%, 100%   { transform: translateY(24px)  scale(0.97); opacity: 0; }
}

/* ── Slide 4 text: scale surge from small ────────────────────────────────── */
/* Starts at 71 % → locked to Earth globe frame start
   Resets cleanly at 100 % with a fast fade so cycle repeat is seamless */
@keyframes heroTextSurge {
  0%, 70%     { transform: scale(0.78) translateY(18px); opacity: 0; }
  73%         { transform: scale(1.05) translateY(-3px); opacity: 1; }
  78%         { transform: scale(0.99) translateY(0px);  opacity: 1; }
  99.9%       { transform: scale(1.01) translateY(-2px); opacity: 1; }  /* hold until last video frame */
  100%        { transform: scale(0.78) translateY(18px); opacity: 0; }  /* snap when video resets */
}

/* ── Slide 4 ring: scale outward, opacity only (no inset change) ─────────── */
@keyframes heroSurgeRing {
  0%, 70%     { transform: scale(0.85); opacity: 0;   border-color: rgba(244,44,55,0);   }
  72%         { transform: scale(1.00); opacity: 1;   border-color: rgba(244,44,55,0.85); }
  80%         { transform: scale(1.18); opacity: 0.3; border-color: rgba(244,44,55,0.25); }
  86%, 100%   { transform: scale(1.35); opacity: 0;   border-color: rgba(244,44,55,0);   }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — opacity transitions only, zero transform/scale
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-text-slide-1 { animation: heroSlideOne   27.55s linear infinite; }
  .home-page .hero-text-slide-2 { animation: heroSlideTwo   27.55s linear infinite; }
  .home-page .hero-text-slide-3 { animation: heroSlideThree 27.55s linear infinite; }
  .home-page .hero-text-slide-4 { animation: heroSlideFour  27.55s linear infinite; }

  .home-page .hero-text-slide-1 .hero-slide-title,
  .home-page .hero-text-slide-1 .hero-anniversary-banner,
  .home-page .hero-text-slide-2 .hero-slide-copy-Slide-2,
  .home-page .hero-text-slide-3 .hero-slide-copy,
  .home-page .hero-text-slide-4 .hero-slide-copy {
    animation: none !important;
    transform: none !important;
  }

  .home-page .hero-slide-title::after,
  .home-page .hero-text-slide-4 .hero-slide-copy::before {
    display: none;
  }
}


/* ── Canvas ─────────────────────────────────────────────────────────────────── */
/*
  The canvas must fill its parent (.hero-frame-sequence / .hero) completely
  so JS can paint frames across the entire hero area.

  • width / height: 100% — fills parent.
  • display: block — removes the 4-px inline-block gap below the element.
  • object-fit: contain — visual hint; actual contain logic is in JS
    drawImageContain().
  • max-width / max-height: 100% — hard containment guard.
*/
.home-page .hero-frame-canvas {
  display: none;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.hero-frame-canvas-compat .home-page .hero-frame-canvas {
  display: block;
  inset: 0;
  position: absolute;
  z-index: 0;
}

/* ── Off-screen preload holder ──────────────────────────────────────────────── */
.home-page .hero-frame-preload-queue {
  height: 1px;
  left: -9999px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: -9999px;
  width: 1px;
}

.home-page .hero-frame-preload-queue img {
  display: block;
  height: 1px;
  width: 1px;
}

/* ── Desktop hero (≥992 px) ─────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .home-page .hero {
    /*
      On desktop we want full-bleed 16:9 hero.
      The JS syncHeroHeight() function sets an inline height that caps at
      100vh − navbar.  The CSS provides a safe default while JS initialises.
    */
    width: 100vw;
    height: min(calc(100vw * 9 / 16), calc(100vh - var(--navbar-h)));
    max-height: calc(100vh - var(--navbar-h));
  }

  .home-page .hero-frame-sequence {
    /* Stretch edge-to-edge on desktop */
    width: 100vw;
    height: 100%;
    /* Pull the sequence flush to left edge (parent is inside a container) */
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    background-size: cover;
  }

  .home-page .hero-frame-canvas {
    width: 100vw;
    height: 100%;
    max-width: none;
  }
}

/* ── Tablet (576 px – 991 px) ───────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .home-page .hero {
    height: min(calc(100vw * 9 / 16), calc(100vh - var(--navbar-h)));
    max-height: calc(100vh - var(--navbar-h));
  }

  .home-page .hero-frame-sequence {
    width: 100vw;
    height: 100%;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
    background-size: cover;
  }

  .home-page .hero-frame-canvas {
    width: 100vw;
    height: 100%;
    max-width: none;
  }
}

/* ── Mobile (≤575 px) ───────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .home-page .hero {
    aspect-ratio: auto;
    height: calc(min(max(360px, 118vw), calc(100vh - var(--navbar-h))) - 1.5cm);
    max-height: calc(100vh - var(--navbar-h) - 1.5cm);
  }

  .home-page .hero-text-slide {
    padding: 18px 16px;
  }

  .home-page .hero-text-slide-1 {
    padding-bottom: clamp(62px, 18vw, 96px);
    padding-top: 22px;
  }
  .home-page .hero-text-slide-1 .hero-slide-title {
    max-width: 60vw !important;
  }

  .home-page .hero-text-slide-2,
  .home-page .hero-text-slide-4 {
    padding-bottom: clamp(54px, 16vw, 82px);
  }

  .home-page .hero-text-slide-3 {
    padding-bottom: 3.5cm;
  }

  .home-page .hero-slide-title {
    font-size: clamp(22px, 6.8vw, 32px);
  }

  .home-page .hero-slide-copy-Slide-2,
  .home-page .hero-slide-copy {
    font-size: clamp(17px, 5.4vw, 28px);
    line-height: 1.22;
    max-width: 96vw;
  }

  .home-page .hero-anniversary-banner {
    max-height: 260px;
    max-width: 100%;
  }

  .home-page .banner-drop-wrapper {
    max-height: 260px;
  }

  /* Energy ring: hide on small mobile screens (too narrow to show cleanly) */
  .home-page .hero-text-slide-4 .hero-slide-copy::before {
    display: none;
  }

  /* Accent bar: slightly narrower on mobile */
  .home-page .hero-slide-title::after {
    left: 5%;
    width: 90%;
    height: 2px;
    top: -12px;
  }
}

/* ── Service cards & client logos ───────────────────────────────────────────── */
.home-page .service-card {
  background: linear-gradient(135deg, #172033 0%, #253348 100%);
}

.home-page .service-img {
  background-color: #172033;
}

.home-page .marquee-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 48%, #ffffff 100%),
    radial-gradient(circle at 50% 0%, rgba(244, 44, 55, 0.08), transparent 42%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding: 34px 0 38px;
}

.home-page .marquee-header {
  border-bottom: 0;
  color: var(--on-surface);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: 0;
  margin-bottom: 26px;
  padding-bottom: 0;
  position: relative;
}

.home-page .marquee-header::after {
  background: linear-gradient(90deg, transparent, var(--primary), #ffb703, var(--primary), transparent);
  border-radius: 999px;
  bottom: -10px;
  content: '';
  height: 4px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: min(180px, 52vw);
}

.home-page .marquee-container {
  margin: 0 auto;
  max-width: 100%;
  overflow: hidden;
  padding: 18px 0;
  position: relative;
}

.home-page .marquee-container::before,
.home-page .marquee-container::after {
  content: '';
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: min(120px, 18vw);
  z-index: 2;
}

.home-page .marquee-container::before {
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0) 100%);
  left: 0;
}

.home-page .marquee-container::after {
  background: linear-gradient(270deg, #ffffff 0%, rgba(255,255,255,0) 100%);
  right: 0;
}

.home-page .marquee-track {
  align-items: center;
  animation: homeClientLogoScroll 34s linear infinite;
  display: flex;
  gap: clamp(18px, 2.8vw, 34px);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

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

.home-page .client-logo {
  align-items: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.10);
  display: flex;
  flex: 0 0 250px;
  height: 144px;
  justify-content: center;
  min-width: 250px;
  overflow: hidden;
  padding: 16px 20px;
  position: relative;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.home-page .client-logo::before {
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.65) 45%, transparent 62%);
  content: '';
  height: 160%;
  left: -120%;
  position: absolute;
  top: -30%;
  transform: rotate(8deg);
  transition: left 0.6s ease;
  width: 70%;
}

.home-page .client-logo:hover {
  border-color: rgba(244, 44, 55, 0.35);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.16);
  transform: translateY(-5px) scale(1.035);
}

.home-page .client-logo:hover::before {
  left: 125%;
}

.home-page .client-logo img {
  backface-visibility: hidden;
  display: block;
  filter: saturate(1.26) contrast(1.14) brightness(1.04) drop-shadow(0 4px 8px rgba(15, 23, 42, 0.10));
  height: 108px;
  max-height: 100%;
  max-width: 100%;
  mix-blend-mode: normal;
  object-fit: contain;
  opacity: 1;
  position: relative;
  transform: translateZ(0);
  transition: transform 0.35s ease, filter 0.35s ease;
  width: 210px;
  will-change: transform;
  z-index: 1;
}

.home-page .client-logo:hover img {
  filter: saturate(1.28) contrast(1.14) drop-shadow(0 6px 14px rgba(15, 23, 42, 0.16));
  transform: scale(1.04);
}

@keyframes homeClientLogoScroll {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .marquee-track {
    animation: none;
  }
}

/* ── Jobs / certs section ───────────────────────────────────────────────────── */
.home-page .jobs-title {
  margin-top: 48px;
}

/* ── Modal z-index ──────────────────────────────────────────────────────────── */
.home-page .modal {
  z-index: 2000;
}

/* ── Contact offices grid ───────────────────────────────────────────────────── */
.home-page .contact-offices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}

.home-page .contact-offices-grid .contact-block {
  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
  padding: 32px;
  border-radius: 8px;
  color: #ffffff;
}

.home-page .contact-offices-grid .contact-block h4 {
  color: #3498db;
  border-bottom: 2px solid #e74c3c;
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.home-page .contact-offices-grid .contact-block p,
.home-page .contact-offices-grid .contact-block .contact-detail {
  color: #ffffff;
}

/* ── Mobile overrides ───────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .home-page .contact-offices-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .home-page .marquee-section {
    padding: 28px 0 32px;
  }

  .home-page .marquee-container {
    padding: 14px 0;
  }

  .home-page .marquee-track {
    animation-duration: 28s;
    gap: 16px;
  }

  .home-page .client-logo {
    flex-basis: 184px;
    height: 112px;
    min-width: 184px;
    padding: 12px 14px;
  }

  .home-page .client-logo img {
    height: 84px;
    width: 154px;
  }

  .home-page .jobs-title {
    margin-top: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   39+ YEARS ROTATOR BADGE — Card-flip (no mirror) flap effect
   ─────────────────────────────────────────────────────────────────────────
   Badge is positioned in .hero (position:relative).
   bottom:0 puts the PNG bottom at the hero baseline.
   The PNG has internal whitespace below the badge art (~15% of image height).
   On browser view only: translateY(15%) pushes the badge down so the
   visible art sits flush with the video frame baseline — no gap.
   Mobile: no change (translateY not applied in mobile breakpoint).
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .hero-rotator-badge {
  position: absolute;
  right: 1cm;
  bottom: 0;
  z-index: 4;
  width: clamp(72px, 14vw, 180px);
  height: clamp(72px, 14vw, 180px);
  pointer-events: none;
  perspective: 700px;
  perspective-origin: center center;
  /* Push down by the PNG's internal bottom whitespace so art is flush to baseline */
  transform: translateY(15%);
}

/* The flipper is the element that actually rotates */
.home-page .hero-rotator-badge__flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: badgeFlapSpin 3.2s ease-in-out infinite;
  will-change: transform;
}

/* Both face images are stacked on top of each other */
.home-page .hero-rotator-badge__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter:
    drop-shadow(0 4px 18px rgba(0,0,0,0.55))
    drop-shadow(0 1px  6px rgba(0,0,0,0.40));
}

/* Front face: normal orientation */
.home-page .hero-rotator-badge__front {
  transform: rotateY(0deg);
}

/* Back face: pre-rotated 180° so when the flipper reaches 180° it faces forward.
   No scaleX(-1) needed — the image is the same on both sides, so it should look
   identical to the front face (not mirrored). The rotateY(180deg) alone is enough
   to place this face on the reverse side of the card. */
.home-page .hero-rotator-badge__back {
  transform: rotateY(180deg);
}

/* ── Flap keyframe ────────────────────────────────────────────────────────── */
@keyframes badgeFlapSpin {
  0%          { transform: rotateY(0deg);   }
  30%         { transform: rotateY(0deg);   }
  50%         { transform: rotateY(180deg); }
  70%         { transform: rotateY(180deg); }
  90%         { transform: rotateY(360deg); }
  100%        { transform: rotateY(360deg); }
}

/* ── Tablet (576–991px): tighter right, same translateY offset ───────────── */
@media (min-width: 576px) and (max-width: 991.98px) {
  .home-page .hero-rotator-badge {
    right: clamp(8px, 2.5vw, 38px);
    width: clamp(60px, 12vw, 130px);
    height: clamp(60px, 12vw, 130px);
  }
}

/* ── Mobile: no changes ──────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .home-page .hero-rotator-badge {
    right: clamp(6px, 2.8vw, 20px);
    width: clamp(54px, 18vw, 90px);
    height: clamp(54px, 18vw, 90px);
    transform: none;   /* restore — no translateY offset on mobile */
  }
}

/* ── Reduced-motion: static display ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-page .hero-rotator-badge__flipper {
    animation: none;
    transform: rotateY(0deg);
  }
  .home-page .hero-rotator-badge__back {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE 2 — TOP SPACE ANIMATION (COMMENTED OUT)
   ─────────────────────────────────────────────────────────────────────────
   Slide 2 text sits at flex-end (bottom). The upper ~60% of the slide is
   free. We fill it with:
     • 3 glowing orbs that float/pulse (translateY + opacity + scale)
     • 3 horizontal light streaks that sweep across (translateX + opacity)
   All synced to the Slide 2 visibility window: 29%–50% of 27.55s cycle.
   Only transform + opacity animated — GPU compositor-safe.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Slide 2 must be relative for absolute deco children ─────────────────── */
.home-page .hero-text-slide-2 {
  position: relative;
}

/* ── Top-deco wrapper: fills upper portion of the slide ──────────────────── */
/*
.home-page .slide2-top-deco {
  position: absolute;
  inset: 0 0 38% 0;
  pointer-events: none;
  overflow: hidden;
}
*/

/* ── Shared orb base ─────────────────────────────────────────────────────── */
/*
.home-page .s2-orb {
  position: absolute;
  border-radius: 50%;
  will-change: opacity, transform;
  opacity: 0;
}
*/

/*
.home-page .s2-orb--1 {
  width: clamp(80px, 18vw, 240px);
  height: clamp(80px, 18vw, 240px);
  top: 10%;
  left: 8%;
  background: radial-gradient(circle, rgba(100,160,255,0.45) 0%, rgba(30,90,200,0.18) 55%, transparent 100%);
  animation: s2Orb1 27.55s linear infinite;
}
*/

/*
.home-page .s2-orb--2 {
  width: clamp(50px, 10vw, 140px);
  height: clamp(50px, 10vw, 140px);
  top: 5%;
  left: 44%;
  background: radial-gradient(circle, rgba(255,210,80,0.55) 0%, rgba(200,150,20,0.20) 55%, transparent 100%);
  animation: s2Orb2 27.55s linear infinite;
}
*/

/*
.home-page .s2-orb--3 {
  width: clamp(40px, 8vw, 110px);
  height: clamp(40px, 8vw, 110px);
  top: 18%;
  right: 10%;
  background: radial-gradient(circle, rgba(80,220,200,0.50) 0%, rgba(20,160,140,0.18) 55%, transparent 100%);
  animation: s2Orb3 27.55s linear infinite;
}
*/

/* ── Shared streak base ──────────────────────────────────────────────────── */
/*
.home-page .s2-streak {
  position: absolute;
  height: clamp(1px, 0.25vw, 3px);
  border-radius: 2px;
  will-change: opacity, transform;
  opacity: 0;
}
*/

/*
.home-page .s2-streak--1 {
  width: clamp(120px, 30vw, 420px);
  top: 32%;
  left: 0%;
  background: linear-gradient(90deg, transparent, rgba(140,190,255,0.70), rgba(255,255,255,0.90), rgba(140,190,255,0.70), transparent);
  animation: s2Streak1 27.55s linear infinite;
}
*/

/*
.home-page .s2-streak--2 {
  width: clamp(80px, 20vw, 280px);
  top: 14%;
  left: 20%;
  background: linear-gradient(90deg, transparent, rgba(255,210,80,0.60), rgba(255,240,160,0.85), rgba(255,210,80,0.60), transparent);
  animation: s2Streak2 27.55s linear infinite;
}
*/

/*
.home-page .s2-streak--3 {
  width: clamp(100px, 24vw, 340px);
  top: 50%;
  right: 5%;
  background: linear-gradient(90deg, transparent, rgba(80,220,200,0.55), rgba(200,255,250,0.80), rgba(80,220,200,0.55), transparent);
  animation: s2Streak3 27.55s linear infinite;
}
*/

/* ── Orb keyframes — synced to Slide 2 window (29%–50%) ─────────────────── */
/*
@keyframes s2Orb1 {
  0%, 28%     { opacity: 0; transform: translateY(22px) scale(0.80); }
  31%         { opacity: 1; transform: translateY(0px)  scale(1.00); }
  38%         { opacity: 0.85; transform: translateY(-10px) scale(1.04); }
  44%         { opacity: 0.70; transform: translateY(-18px) scale(1.02); }
  49%         { opacity: 0; transform: translateY(-28px) scale(0.95); }
  50%, 100%   { opacity: 0; transform: translateY(22px) scale(0.80); }
}

@keyframes s2Orb2 {
  0%, 29.5%   { opacity: 0; transform: translateY(18px) scale(0.75); }
  33%         { opacity: 1; transform: translateY(0px)  scale(1.00); }
  40%         { opacity: 0.80; transform: translateY(-8px)  scale(1.06); }
  46%         { opacity: 0.60; transform: translateY(-16px) scale(1.03); }
  49.5%       { opacity: 0; transform: translateY(-24px) scale(0.90); }
  50%, 100%   { opacity: 0; transform: translateY(18px) scale(0.75); }
}

@keyframes s2Orb3 {
  0%, 30.5%   { opacity: 0; transform: translateY(14px) scale(0.70); }
  34%         { opacity: 0.90; transform: translateY(0px) scale(1.00); }
  41%         { opacity: 0.75; transform: translateY(-6px) scale(1.08); }
  47%         { opacity: 0.50; transform: translateY(-14px) scale(1.04); }
  49.8%       { opacity: 0; transform: translateY(-22px) scale(0.88); }
  50%, 100%   { opacity: 0; transform: translateY(14px) scale(0.70); }
}

/* ── Streak keyframes — sweeping translateX ──────────────────────────────── */
@keyframes s2Streak1 {
  0%, 29%     { opacity: 0; transform: translateX(-60px); }
  32%         { opacity: 0.90; transform: translateX(0px); }
  42%         { opacity: 0.70; transform: translateX(40px); }
  48%         { opacity: 0; transform: translateX(100px); }
  50%, 100%   { opacity: 0; transform: translateX(-60px); }
}

@keyframes s2Streak2 {
  0%, 30%     { opacity: 0; transform: translateX(-40px); }
  33.5%       { opacity: 0.85; transform: translateX(0px); }
  43%         { opacity: 0.65; transform: translateX(30px); }
  48.5%       { opacity: 0; transform: translateX(80px); }
  50%, 100%   { opacity: 0; transform: translateX(-40px); }
}

@keyframes s2Streak3 {
  0%, 31%     { opacity: 0; transform: translateX(60px); }
  35%         { opacity: 0.80; transform: translateX(0px); }
  44%         { opacity: 0.60; transform: translateX(-30px); }
  49%         { opacity: 0; transform: translateX(-80px); }
  50%, 100%   { opacity: 0; transform: translateX(60px); }
}
*/

/* ── Mobile: smaller orbs, narrower streaks ──────────────────────────────── */
/* (Commented out - decorations disabled) */

/* ── Reduced-motion: hide deco entirely ─────────────────────────────────── */
/* (Commented out - decorations disabled) */

/* ═══════════════════════════════════════════════════════════════════════════
   GOLDEN WAVE EFFECT — Slides 1, 2 & 3 (COMMENTED OUT)
   ─────────────────────────────────────────────────────────────────────────
   Mimics the horizontal golden sinusoidal shimmer seen in the background
   video frames. Each slide gets a .slide-wave-deco wrapper containing
   5 wave bands at different vertical positions, opacities and speeds.
   Each band is a tall element with a repeating SVG sine-wave as its
   background-image, animated only via translateX + opacity (GPU-safe).

   Performance rules (matching existing system):
   ✓  Only `opacity` and `transform` animated
   ✗  NO filter / blur / width / height / inset animation

   Slide timing (27.55 s cycle):
     Slide 1:  0 % → 26 %
     Slide 2:  29 % → 50 %
     Slide 3:  49 % → 70 %

   SVG wave path: one full 200 px period sine, 28 px amplitude,
   repeated horizontally via background-size: 200px 100%.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared wrapper — fills the entire slide, sits behind text (z-index:0) ── */
/*
.home-page .slide-wave-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
*/

/* ── Shared wave band base ──────────────────────────────────────────────── */
/*
.home-page .sw {
  position: absolute;
  left: -220px;
  width: calc(100% + 440px);
  will-change: opacity, transform;
  opacity: 0;
  background-repeat: repeat-x;
  background-position: 0 50%;
}

.home-page .sw--thick  { height: 36px; }
.home-page .sw--medium { height: 22px; }
.home-page .sw--thin   { height: 12px; }

.home-page .sw--a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='36' viewBox='0 0 200 36'%3E%3Cpath d='M0 18 C25 2, 75 2, 100 18 S175 34, 200 18' fill='none' stroke='%23FFD700' stroke-width='2.5' stroke-opacity='0.72'/%3E%3C/svg%3E");
  background-size: 200px 36px;
}

.home-page .sw--b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='22' viewBox='0 0 200 22'%3E%3Cpath d='M0 11 C25 1, 75 1, 100 11 S175 21, 200 11' fill='none' stroke='%23FFA500' stroke-width='1.8' stroke-opacity='0.55'/%3E%3C/svg%3E");
  background-size: 200px 22px;
}

.home-page .sw--c {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='22' viewBox='0 0 200 22'%3E%3Cpath d='M0 11 C25 1, 75 1, 100 11 S175 21, 200 11' fill='none' stroke='%23FFE87C' stroke-width='1.4' stroke-opacity='0.45'/%3E%3C/svg%3E");
  background-size: 200px 22px;
}

.home-page .sw--d {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M0 6 C25 1, 75 1, 100 6 S175 11, 200 6' fill='none' stroke='%23CC8800' stroke-width='1.2' stroke-opacity='0.38'/%3E%3C/svg%3E");
  background-size: 200px 12px;
}

.home-page .sw--e {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M0 6 C25 1, 75 1, 100 6 S175 11, 200 6' fill='none' stroke='%23FFF0A0' stroke-width='1.0' stroke-opacity='0.30'/%3E%3C/svg%3E");
  background-size: 200px 12px;
}

.home-page .sw--pos-15 { top: 15%; }
.home-page .sw--pos-30 { top: 30%; }
.home-page .sw--pos-48 { top: 48%; }
.home-page .sw--pos-64 { top: 64%; }
.home-page .sw--pos-78 { top: 78%; }
*/

/* ══════════════════════════════════════════════════════════════════════════
   SLIDE 1 GOLDEN WAVES  —  window  0 % → 26 % (COMMENTED OUT)
   ══════════════════════════════════════════════════════════════════════════ */
/*
.home-page .sw-1 { animation: commonWave1 27.55s linear infinite; }
.home-page .sw-2 { animation: commonWave2 27.55s linear infinite; }
.home-page .sw-3 { animation: commonWave3 27.55s linear infinite; }
.home-page .sw-4 { animation: commonWave4 27.55s linear infinite; }
.home-page .sw-5 { animation: commonWave5 27.55s linear infinite; }
*/

/*
@keyframes commonWave1 {
  0%          { opacity: 0.78; transform: translateX(0px); }
  68%         { opacity: 0.55; transform: translateX(-1080px); }
  70%         { opacity: 0;    transform: translateX(-1120px); }
  70.1%, 100% { opacity: 0;    transform: translateX(0px); }
}
@keyframes commonWave2 {
  0%          { opacity: 0.62; transform: translateX(0px); }
  68%         { opacity: 0.40; transform: translateX(1200px); }
  70%         { opacity: 0;    transform: translateX(1240px); }
  70.1%, 100% { opacity: 0;    transform: translateX(0px); }
}
@keyframes commonWave3 {
  0%          { opacity: 0.50; transform: translateX(0px); }
  68%         { opacity: 0.32; transform: translateX(-1280px); }
  70%         { opacity: 0;    transform: translateX(-1320px); }
  70.1%, 100% { opacity: 0;    transform: translateX(0px); }
}
@keyframes commonWave4 {
  0%          { opacity: 0.42; transform: translateX(0px); }
  68%         { opacity: 0.28; transform: translateX(1120px); }
  70%         { opacity: 0;    transform: translateX(1160px); }
  70.1%, 100% { opacity: 0;    transform: translateX(0px); }
}
@keyframes commonWave5 {
  0%          { opacity: 0.35; transform: translateX(0px); }
  68%         { opacity: 0.20; transform: translateX(-960px); }
  70%         { opacity: 0;    transform: translateX(-1000px); }
  70.1%, 100% { opacity: 0;    transform: translateX(0px); }
}
*/

/* ── Mobile: reduce translateX travel so waves stay proportional ─────────── */
/* (Commented out - wave effects disabled) */

/* ── Reduced-motion: hide all wave deco ──────────────────────────────────── */
/*
@media (prefers-reduced-motion: reduce) {
  .home-page .slide-wave-deco { display: none; }
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   ELECTRIC POWER SPARK EFFECT — Slides 1, 2 & 3 (COMMENTED OUT)
   ─────────────────────────────────────────────────────────────────────────
   Simulates electric current pulses racing along the golden wave lines.
   Each spark is a short bright horizontal dash that travels across the
   wave band at high speed, looping with staggered delays so each band
   fires at a different moment — giving a "current travelling through wires"
   feel.

   Implementation:
   • One .sw-spark <span> per wave band, nested inside .slide-wave-deco
   • Each spark is a narrow pill shape using background: linear-gradient
     (bright white-gold core that feathers to transparent — no SVG needed)
   • Animated ONLY via translateX + opacity (GPU compositor-safe)
   • Each slide has 5 sparks (one per wave band), timed to the same slide
     visibility window as its parent waves
   • Spark speed is ~1.8 s per crossing — much faster than the slow wave
     drift — creating the "electricity on wire" contrast
   • Stagger: each band's spark is offset by ~0.3–0.5 s so they do not
     all fire at once

   Performance rules (matching existing system):
   ✓  Only `opacity` and `transform` animated
   ✗  NO filter / blur / width / height / inset animation
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared spark base ──────────────────────────────────────────────────── */
/*
.home-page .sw-spark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(48px, 8vw, 110px);
  height: 4px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 245, 180, 0.55) 18%,
    rgba(255, 255, 255, 0.98) 50%,
    rgba(255, 245, 180, 0.55) 82%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  left: 0;
}

.home-page .sw--thick  .sw-spark { height: 5px; }
.home-page .sw--medium .sw-spark { height: 3px; }
.home-page .sw--thin   .sw-spark { height: 2px; border-radius: 2px; }

.home-page .sw-1 .sw-spark { animation: commonSpark1 27.55s linear infinite; }
.home-page .sw-2 .sw-spark { animation: commonSpark2 27.55s linear infinite; }
.home-page .sw-3 .sw-spark { animation: commonSpark3 27.55s linear infinite; }
.home-page .sw-4 .sw-spark { animation: commonSpark4 27.55s linear infinite; }
.home-page .sw-5 .sw-spark { animation: commonSpark5 27.55s linear infinite; }
*/

/* Reduced-motion: sparks hidden (wave deco already hidden, belt-and-braces) */
/*
@media (prefers-reduced-motion: reduce) {
  .home-page .sw-spark { display: none; }
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   LUMINESCENT MOSAIC - Client Portfolio Marquee
   ═══════════════════════════════════════════════════════════════════════════ */

.luminescent-mosaic {
  background: linear-gradient(180deg, #f0f4f8 0%, #ffffff 40%, #f8fafc 100%);
  padding: 64px 0 72px;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.luminescent-mosaic::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #f42c37 30%, #f42c37 70%, transparent 100%);
  pointer-events: none;
}

.luminescent-mosaic::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #f0f4f8 0%, transparent 8%, transparent 92%, #f0f4f8 100%);
  pointer-events: none;
  z-index: 3;
}

.mosaic-title {
  text-align: center;
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: relative;
  z-index: 4;
  font-family: var(--font-display, sans-serif);
}

.mosaic-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #f42c37;
  border-radius: 2px;
  margin: 10px auto 36px;
}

.mosaic-row {
  display: flex;
  align-items: center;
  margin: 14px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  white-space: nowrap;
}

.mosaic-track {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  will-change: transform;
  white-space: nowrap;
  padding: 8px 0;
}

.mosaic-row-left .mosaic-track {
  animation: marqueeLeft 38s linear infinite !important;
}

.mosaic-row-right .mosaic-track {
  animation: marqueeRight 42s linear infinite !important;
}

.mosaic-logo {
  width: clamp(200px, 22vw, 280px);
  height: clamp(110px, 13vw, 160px);
  object-fit: contain;
  object-position: center;
  filter: none;
  opacity: 0.82;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.mosaic-logo:hover {
  opacity: 1;
  transform: translateY(-6px) scale(1.06);
  box-shadow:
    0 12px 32px rgba(244, 44, 55, 0.18),
    0 4px 12px rgba(0, 0, 0, 0.10),
    0 0 0 2px rgba(244, 44, 55, 0.35);
  border-color: rgba(244, 44, 55, 0.4);
  z-index: 10;
}

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

@keyframes marqueeLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .mosaic-logo {
    width: clamp(180px, 20vw, 250px);
    height: clamp(100px, 12vw, 145px);
    padding: 14px 18px;
  }
  .mosaic-track { gap: 24px; }
}

@media (max-width: 768px) {
  .mosaic-logo {
    width: clamp(150px, 32vw, 200px);
    height: clamp(88px, 19vw, 120px);
    padding: 12px 16px;
    border-radius: 10px;
  }
  .mosaic-track { gap: 18px; }
}

@media (max-width: 480px) {
  .mosaic-logo {
    width: clamp(130px, 38vw, 170px);
    height: clamp(76px, 22vw, 105px);
    padding: 10px 14px;
  }
  .mosaic-track { gap: 14px; }
  .luminescent-mosaic { padding: 48px 0 56px; }
}


/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .mosaic-row-left .mosaic-track,
  .mosaic-row-right .mosaic-track {
    animation: none;
  }

  .mosaic-logo:hover {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME HALLMARK OF EXCELLENCE — Certificate Award Marquee
   Isolated under .home-page .home-hallmark-* to prevent any conflict with
   the existing client-logo marquee (.marquee-track / homeClientLogoScroll)
   or the About page hallmark grid (.hallmark-section).
   Animation name: homeAwardScroll (unique — does not clash with
   homeClientLogoScroll, marqueeLeft, or marqueeRight).
   ═══════════════════════════════════════════════════════════════════════════ */

.home-page .home-hallmark-section {
  background:
    linear-gradient(180deg, #f8fafc 0%, #ffffff 40%, #f8fafc 100%);
  border-top: 1px solid rgba(15, 23, 42, 0.07);
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  overflow: hidden;
  /* Use padding-bottom only; section-title spacing handles top */
  padding-bottom: 48px;
}

/* ── Header: title only, centred, with trophy icon ──────────────────────── */
.home-page .home-hallmark-header {
  margin-bottom: 32px;
}

.home-page .home-hallmark-title {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 0;
}

.home-page .home-hallmark-trophy-icon {
  color: var(--primary, #f42c37);
  font-size: clamp(26px, 3.5vw, 40px);
  flex-shrink: 0;
}

/* ── Marquee outer container: clips the scrolling track ─────────────────── */
.home-page .home-hallmark-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Fade edges so cards glide in/out smoothly */
}

/* Left and right edge fade — scoped to home hallmark only */
.home-page .home-hallmark-marquee-container::before,
.home-page .home-hallmark-marquee-container::after {
  content: '';
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: clamp(40px, 8vw, 120px);
  z-index: 4;
}

.home-page .home-hallmark-marquee-container::before {
  background: linear-gradient(90deg, #f8fafc 0%, rgba(248,250,252,0) 100%);
  left: 0;
}

.home-page .home-hallmark-marquee-container::after {
  background: linear-gradient(270deg, #f8fafc 0%, rgba(248,250,252,0) 100%);
  right: 0;
}

/* ── Scrolling track — uses unique animation name ────────────────────────── */
.home-page .home-hallmark-marquee-track {
  /* Inline-flex so cards sit in a single row */
  display: inline-flex;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  padding: 12px 0 16px;
  /* Unique keyframe name — no conflict */
  animation: homeAwardScroll 48s linear infinite;
  will-change: transform;
  /* GPU layer isolation — does not affect other animations */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Pause the marquee when user hovers over any card */
.home-page .home-hallmark-marquee-container:hover .home-hallmark-marquee-track {
  animation-play-state: paused;
}

/* ── Individual cert card sizing inside the marquee ─────────────────────── */
/*
  Re-use the global .cert-award-card class from the shared stylesheet,
  but override width and flex so cards fit the horizontal marquee layout.
  .home-hallmark-cert-card provides the override specificity without
  touching the About page's cert-award-card rules.
*/
.home-page .home-hallmark-cert-card {
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 300px);
  /* Remove any inherited block-level display that would break the flex row */
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  /* Pointer so users know it's clickable */
  cursor: pointer;
}

/* ── Unique keyframe — scrolls left, resets at -50% for seamless loop ────── */
@keyframes homeAwardScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Responsive: slow down on smaller screens, tighten gaps ─────────────── */
@media (max-width: 1024px) {
  .home-page .home-hallmark-cert-card {
    width: clamp(200px, 28vw, 270px);
  }
  .home-page .home-hallmark-marquee-track {
    gap: clamp(14px, 2vw, 22px);
    animation-duration: 40s;
  }
}

@media (max-width: 768px) {
  .home-page .home-hallmark-cert-card {
    width: clamp(180px, 44vw, 240px);
  }
  .home-page .home-hallmark-marquee-track {
    gap: 14px;
    animation-duration: 34s;
  }
  .home-page .home-hallmark-section {
    padding-bottom: 36px;
  }
  .home-page .home-hallmark-header {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .home-page .home-hallmark-cert-card {
    width: clamp(158px, 52vw, 200px);
  }
  .home-page .home-hallmark-marquee-track {
    gap: 12px;
    animation-duration: 28s;
  }
  .home-page .home-hallmark-section {
    padding-bottom: 28px;
  }
}

/* ── Reduced motion: stop the auto-scroll, show first few cards statically ── */
@media (prefers-reduced-motion: reduce) {
  .home-page .home-hallmark-marquee-track {
    animation: none;
    /* Show as a wrapping flex layout instead of a continuous marquee */
    flex-wrap: wrap;
    justify-content: center;
  }
  /* Hide the duplicate set-2 cards so they don't double-up in static view */
  .home-page .home-hallmark-marquee-track > .home-hallmark-cert-card:nth-child(n+13) {
    display: none;
  }
}