/* ============================================ */
/* HERO-REIMAGINED.CSS - FULL SCREEN TEXT FOCUS */
/* Controls at bottom - appear on touch */
/* FORCED LANDSCAPE ASPECT ON ALL DEVICES */
/* ============================================ */

/* ---------- GLOBAL RESET (within hero scope) ---------- */
.hero-reimagined *{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* ---------- MAIN CONTAINER: FORCED LANDSCAPE ASPECT ---------- */
.hero-reimagined{
  position:relative;
  width:100%;
  background-color:#0B4F66;
  overflow:hidden;
  display:flex;
  align-items:center;
  touch-action:pan-y pinch-zoom;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  margin:0;
  padding:0;
  
  /* Force landscape aspect ratio on all devices */
  aspect-ratio: 16/9;
  min-height: auto;
  height: auto;
  max-height: 95vh; /* Increased from 90vh */
}

/* Ensure no gap above hero (if header is sticky/absolute) */
.page-section:first-child,
#home.page-section{
  margin-top:0;
  padding-top:0;
}

/* ---------- BACKGROUND SLIDES WITH STRONGER ANIMATIONS ---------- */
.hero-slides-container{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:1;
}

.hero-slide-bg{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change:opacity, transform, filter;
  transform:scale(1.02);
}

.hero-slide-bg.active{
  opacity:1;
  /* Cinematic: zoom + gentle drift + mild color pop */
  animation:
    kenBurnsZoomBoost 11s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    bgDrift 9s ease-in-out infinite;
  filter:saturate(1.05) contrast(1.05);
}

/* More cinematic Ken Burns */
@keyframes kenBurnsZoomBoost{
  0%   { transform:scale(1.02); }
  100% { transform:scale(1.12); }
}

/* gentle drift prevents “static image feeling” */
@keyframes bgDrift{
  0%   { transform:scale(1.12) translate3d(0,0,0); }
  50%  { transform:scale(1.12) translate3d(-10px,-6px,0); }
  100% { transform:scale(1.12) translate3d(0,0,0); }
}

/* ---------- DYNAMIC OVERLAY WITH PULSE EFFECT ---------- */
.hero-dynamic-overlay{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:2;
  background:linear-gradient(125deg,
    rgba(11,79,102,0.40) 0%,
    rgba(20,119,109,0.25) 50%,
    rgba(11,79,102,0.45) 100%);
  transition:background 0.4s;
  animation:overlayPulseBoost 7s ease-in-out infinite;
  will-change:opacity, filter;
}

@keyframes overlayPulseBoost{
  0%   { opacity:0.58; filter:brightness(1) saturate(1); }
  50%  { opacity:0.78; filter:brightness(1.06) saturate(1.08); }
  100% { opacity:0.58; filter:brightness(1) saturate(1); }
}

/* Different overlay variations per slide */
[data-layout="balanced"] .hero-dynamic-overlay{
  background:linear-gradient(135deg,
    rgba(11,79,102,0.40) 0%,
    rgba(20,119,109,0.25) 70%,
    rgba(11,79,102,0.40) 100%);
}
[data-layout="left-focus"] .hero-dynamic-overlay{
  background:linear-gradient(95deg,
    rgba(11,79,102,0.52) 0%,
    rgba(11,79,102,0.25) 60%,
    rgba(20,119,109,0.20) 100%);
}
[data-layout="center-stage"] .hero-dynamic-overlay{
  background:radial-gradient(circle at 70% 50%,
    rgba(11,79,102,0.20) 0%,
    rgba(11,79,102,0.55) 90%);
  animation:radialPulse 7.5s ease-in-out infinite;
}
[data-layout="right-accent"] .hero-dynamic-overlay{
  background:linear-gradient(85deg,
    rgba(11,79,102,0.46) 0%,
    rgba(20,119,109,0.20) 70%,
    rgba(11,79,102,0.32) 100%);
}
[data-layout="full-impact"] .hero-dynamic-overlay{
  background:linear-gradient(145deg,
    rgba(11,79,102,0.46) 0%,
    rgba(20,119,109,0.20) 80%,
    rgba(245,123,44,0.16) 100%);
  animation:orangeGlow 8s ease-in-out infinite;
}

@keyframes radialPulse{
  0%   { opacity:0.58; transform:scale(1); }
  100% { opacity:0.82; transform:scale(1.015); }
}

@keyframes orangeGlow{
  0%{
    opacity:0.60;
    filter:brightness(1);
  }
  100%{
    opacity:0.82;
    filter:brightness(1.06);
    background:linear-gradient(145deg,
      rgba(11,79,102,0.40) 0%,
      rgba(20,119,109,0.20) 80%,
      rgba(245,123,44,0.22) 100%);
  }
}

/* ---------- MAIN CONTENT ---------- */
.hero-main-content{
  position:relative;
  z-index:10;
  width:100%;
  padding:0 5vw;
  display:flex;
  align-items:center;
  height:100%;
  margin:0;
}

.hero-grid-container{
  display:grid;
  grid-template-columns:1fr;
  width:100%;
  max-width:1320px;
  margin:0 auto;
  align-items:center;
}

.hero-layout-col{
  position:relative;
}

/* Right column hidden */
.hero-col-right{ display:none; }

/* ---------- TEXT BLOCK (BIGGER + CLEANER) ---------- */
.hero-text-block{
  max-width:980px;
  margin:0;
  width:100%;
  animation:textReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Headline - bigger + stronger entrance */
.hero-text-block h1{
  font-size:clamp(2.8rem, 7.6vw, 5.4rem);
  font-weight:850;
  line-height:1.05;
  margin:0 0 0.22em 0;
  color:#fff;
  text-shadow:0 8px 22px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  letter-spacing:-0.02em;
  word-break:break-word;
  text-transform:uppercase;

  opacity:0;
  transform:translate3d(-34px, 10px, 0) scale(0.985);
  will-change:transform, opacity, filter, text-shadow;

  animation:
    heroTitleIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    textGlow 3.2s ease-in-out infinite alternate 0.95s;
  transform-origin:left;
}

@keyframes heroTitleIn{
  0%{
    opacity:0;
    transform:translate3d(-34px, 10px, 0) scale(0.985);
    filter:blur(6px);
  }
  70%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

/* Text glow animation */
@keyframes textGlow{
  0%{
    text-shadow:0 8px 22px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  }
  100%{
    text-shadow:0 10px 26px rgba(245,123,44,0.45), 0 2px 10px rgba(255,255,255,0.18);
  }
}

/* Underline - with pulse + sheen */
.hero-text-block h1::after{
  content:'';
  display:block;
  width:110px;
  height:6px;
  background:#F57B2C;
  margin-top:0.22em;
  margin-bottom:0.22em;
  border-radius:4px;
  box-shadow:0 0 16px rgba(245,123,44,0.75);
  transform:scaleX(0);
  transform-origin:left;
  position:relative;
  overflow:hidden;

  animation:
    expandWidth 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards,
    underlinePulse 3.2s ease-in-out infinite alternate 0.95s,
    underlineSheen 2.8s ease-in-out infinite 1.2s;
}

@keyframes underlinePulse{
  0%{
    box-shadow:0 0 14px rgba(245,123,44,0.65);
    width:110px;
  }
  100%{
    box-shadow:0 0 26px rgba(245,123,44,0.9), 0 0 46px rgba(245,123,44,0.25);
    width:122px;
  }
}

@keyframes underlineSheen{
  0%   { filter:brightness(1); }
  50%  { filter:brightness(1.25); }
  100% { filter:brightness(1); }
}

/* Underline alignment adjustments */
[data-layout="balanced"] .hero-text-block h1::after,
[data-layout="center-stage"] .hero-text-block h1::after,
[data-layout="full-impact"] .hero-text-block h1::after{
  margin-left:auto;
  margin-right:auto;
  transform-origin:center;
}

[data-layout="left-focus"] .hero-text-block h1::after,
[data-layout="right-accent"] .hero-text-block h1::after{
  margin-left:0;
  margin-right:auto;
  transform-origin:left;
}

/* Description - UPPERCASE + BOLD (same as title) */
.hero-text-block .lead{
  font-size:clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight:850;
  line-height:1.5;
  margin:0.45rem 0 1.25rem 0;
  color:rgba(255,255,255,1);
  text-shadow:0 3px 14px rgba(0,0,0,0.42);
  max-width:860px;
  
  /* TRANSFORM TO UPPERCASE */
  text-transform:uppercase;
  
  /* Letter spacing for better readability in uppercase */
  letter-spacing:0.06em;

  opacity:0;
  transform:translate3d(0, 18px, 0);
  will-change:transform, opacity, filter;

  animation:
    heroLeadIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s forwards,
    floatText 4.2s ease-in-out infinite 1.1s;
}

@keyframes heroLeadIn{
  0%   { opacity:0; transform:translate3d(0, 18px, 0); filter:blur(4px); }
  100% { opacity:1; transform:translate3d(0, 0, 0); filter:blur(0); }
}

/* Floating animation */
@keyframes floatText{
  0%   { transform:translate3d(0,0,0); }
  50%  { transform:translate3d(0,-4px,0); }
  100% { transform:translate3d(0,0,0); }
}

/* Buttons container */
.hero-buttons-container{
  display:flex;
  flex-wrap:wrap;
  gap:1.1rem;
  margin:1.7rem 0 0 0;
  width:100%;

  opacity:0;
  transform:translate3d(0, 16px, 0);
  will-change:transform, opacity;

  animation:heroBtnsIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

@keyframes heroBtnsIn{
  to{ opacity:1; transform:translate3d(0,0,0); }
}

/* Layout-specific button alignment */
[data-layout="balanced"] .hero-buttons-container,
[data-layout="center-stage"] .hero-buttons-container,
[data-layout="full-impact"] .hero-buttons-container{
  justify-content:center;
}
[data-layout="left-focus"] .hero-buttons-container,
[data-layout="right-accent"] .hero-buttons-container{
  justify-content:flex-start;
}
@media (max-width:640px){
  .hero-buttons-container{ justify-content:center !important; }
}

/* Button styles */
.hero-btn{
  padding:0.95rem 2.2rem;
  font-weight:650;
  font-size:1.08rem;
  border-radius:50px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:170px;
  letter-spacing:0.3px;
  touch-action:manipulation;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
  border:none;
  cursor:pointer;
  transition:
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.28s ease,
    background 0.28s ease,
    filter 0.28s ease;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  overflow:hidden;
  will-change:transform, box-shadow;
}

/* Button shine */
.hero-btn::after{
  content:'';
  position:absolute;
  top:-55%;
  left:-55%;
  width:220%;
  height:220%;
  background:linear-gradient(
    to bottom right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0) 100%
  );
  transform:rotate(30deg);
  animation:shine 7.2s infinite;
  opacity:0;
  pointer-events:none;
}

@keyframes shine{
  0%   { transform:translateX(-110%) rotate(30deg); opacity:0; }
  12%  { opacity:0.35; }
  28%  { transform:translateX(110%) rotate(30deg); opacity:0; }
  100% { transform:translateX(110%) rotate(30deg); opacity:0; }
}

.hero-btn-primary{
  background:linear-gradient(145deg, #F57B2C, #E56A1E);
  color:#fff;
  border:1px solid rgba(255,255,255,0.15);
  animation:btnPulse 4.6s infinite 2s;
}

.hero-btn-outline{
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  border:1.6px solid rgba(255,255,255,0.82);
}

.hero-btn:hover{
  transform:translateY(-5px) scale(1.03);
  box-shadow:0 18px 38px rgba(0,0,0,0.35);
  filter:brightness(1.02);
}

.hero-btn-primary:hover{
  background:linear-gradient(145deg, #FF8C3A, #F57B2C);
}

.hero-btn-outline:hover{
  background:rgba(245,123,44,0.16);
  border-color:#F57B2C;
}

.hero-btn:active{ transform:scale(0.985); }

@keyframes btnPulse{
  0%   { box-shadow:0 6px 18px rgba(0,0,0,0.28); }
  50%  { box-shadow:0 8px 30px rgba(245,123,44,0.55); }
  100% { box-shadow:0 6px 18px rgba(0,0,0,0.28); }
}

/* ========== CORE ANIMATION KEYFRAMES ========== */
@keyframes textReveal{
  0%   { clip-path:polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes fadeInUp{
  0%   { opacity:0; transform:translateY(20px); }
  100% { opacity:1; transform:translateY(0); }
}

@keyframes slideInLeft{
  0%   { opacity:0; transform:translateX(-30px); }
  100% { opacity:1; transform:translateX(0); }
}

@keyframes expandWidth{
  0%   { transform:scaleX(0); }
  100% { transform:scaleX(1); }
}

/* ========== CONTROLS AT BOTTOM - APPEAR ON TOUCH ========== */

/* Controls container - positioned near bottom */
.hero-controls-bottom{
  position:absolute;
  bottom:30px;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  pointer-events:none;
  
  /* Hidden by default */
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}

/* Show controls when visible class is added via JavaScript */
.hero-controls-bottom.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Navigation arrows - at bottom */
.hero-nav-bottom{
  display:flex;
  gap:20px;
  justify-content:center;
  pointer-events:auto;
}

.hero-nav-btn{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,0.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:0 5px 15px rgba(0,0,0,0.3);
  animation:navBtnPulse 3s infinite alternate;
}

@keyframes navBtnPulse{
  0%   { box-shadow:0 5px 15px rgba(0,0,0,0.3); }
  100% { box-shadow:0 8px 25px rgba(245,123,44,0.4); }
}

.hero-nav-btn svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  transition:transform 0.28s ease;
}

.hero-nav-btn:hover{
  background:#F57B2C;
  border-color:#F57B2C;
  transform:scale(1.1);
  box-shadow:0 10px 25px rgba(245,123,44,0.5);
}

.hero-nav-btn:hover svg{
  transform:scale(1.1);
}

.hero-nav-btn:active{
  transform:scale(0.95);
}

/* Progress indicator */
.hero-progress{
  display:flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-size:1rem;
  font-weight:650;
  background:rgba(0,0,0,0.30);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  padding:6px 16px;
  border-radius:40px;
  border:1px solid rgba(255,255,255,0.10);
  pointer-events:none;
  animation:progressPulse 3.6s infinite alternate;
  margin-top:5px;
}

@keyframes progressPulse{
  0%   { background:rgba(0,0,0,0.30); }
  100% { background:rgba(245,123,44,0.22); }
}

.hero-current-slide{ color:#F57B2C; }
.hero-slash{ color:rgba(255,255,255,0.5); }
.hero-total-slides{ color:#fff; }

/* Dot indicators */
.hero-dots-container{
  display:flex;
  gap:10px;
  padding:8px 15px;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:40px;
  border:1px solid rgba(255,255,255,0.08);
  pointer-events:auto;
  margin-top:5px;
}

.hero-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,0.50);
  border:none;
  cursor:pointer;
  transition:all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  padding:0;
}

.hero-dot:hover{
  background:rgba(255,255,255,0.90);
  transform:scale(1.15);
}

.hero-dot.active{
  width:28px;
  background:#F57B2C;
  border-radius:20px;
  animation:activeDotPulse 3s infinite alternate;
}

@keyframes activeDotPulse{
  0%   { box-shadow:0 0 8px rgba(245,123,44,0.50); width:28px; }
  100% { box-shadow:0 0 16px rgba(245,123,44,0.75); width:34px; }
}

/* Autoplay progress bar */
.hero-timer-indicator{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.10);
  z-index:35;
}

.hero-timer-progress{
  height:100%;
  width:0%;
  background:#F57B2C;
  transition:width 7s linear;
  box-shadow:0 0 15px #F57B2C;
  animation:progressGlow 3s infinite alternate;
}

@keyframes progressGlow{
  0%   { filter:brightness(1); }
  100% { filter:brightness(1.22); }
}

/* ========== FIX HERO TO MISSION GAP ========== */
.hero-reimagined {
  margin-bottom: 0;
  padding-bottom: 0;
}

.mission-section {
  margin-top: 0;
  padding-top: 40px;
}

.mission-title-wrap h2,
.mission-title-wrap .mission-underline,
.mission-title-wrap .mission-subtitle {
  margin-top: 0;
}

/* ========== RESPONSIVE DESIGN ========== */
/* Desktop and tablet */
@media (min-width:992px){
  .hero-reimagined{
    aspect-ratio: 16/9;
    max-height: 95vh;
  }
  
  .hero-controls-bottom{
    bottom:40px;
  }
  
  .hero-text-block h1{
    font-size:clamp(3.2rem, 6vw, 5.4rem);
  }
}

/* Small desktop / large tablet */
@media (min-width:768px) and (max-width:991px){
  .hero-reimagined{
    aspect-ratio: 16/9;
    max-height: 85vh;
  }
  
  .hero-controls-bottom{
    bottom:30px;
  }
  
  .hero-text-block h1{
    font-size:clamp(2.5rem, 5.5vw, 3.8rem);
  }
  
  .hero-text-block .lead{
    font-size:clamp(1rem, 2.2vw, 1.4rem);
  }
  
  .hero-btn{
    padding:0.8rem 1.8rem;
    font-size:1rem;
    min-width:150px;
  }
}

/* Mobile landscape */
@media (max-width:767px){
  .hero-reimagined{
    aspect-ratio: 16/9;
    max-height: 45vh; /* Increased from 40vh */
  }
  
  .hero-main-content{
    padding: 0 4vw;
  }
  
  .hero-text-block h1{
    font-size: clamp(2rem, 5.5vw, 2.8rem);
    margin-bottom: 0.1em;
  }
  
  .hero-text-block h1::after{
    width: 70px;
    height: 4px;
    margin-top: 0.1em;
  }
  
  .hero-text-block .lead{
    font-size: clamp(0.95rem, 2.4vw, 1.2rem);
    margin: 0.2rem 0 0.5rem 0;
    letter-spacing: 0.04em;
  }
  
  .hero-buttons-container{
    gap: 0.7rem;
    margin-top: 0.8rem;
    justify-content: center;
  }
  
  .hero-btn{
    padding: 0.6rem 1.3rem;
    font-size: 0.9rem;
    min-width: 130px;
  }
  
  /* Controls at bottom - smaller on mobile */
  .hero-controls-bottom{
    bottom:20px;
    gap:10px;
  }
  
  .hero-nav-bottom{
    gap:15px;
  }
  
  .hero-nav-btn{
    width:42px;
    height:42px;
  }
  
  .hero-nav-btn svg{
    width:20px;
    height:20px;
  }
  
  .hero-progress{
    padding:4px 12px;
    font-size:0.85rem;
  }
  
  .hero-dots-container{
    padding:6px 10px;
    gap:8px;
  }
  
  .hero-dot{
    width:6px;
    height:6px;
  }
  
  .hero-dot.active{
    width:20px;
  }
  
  .mission-section {
    padding-top: 30px;
  }
}

/* Extra small phones */
@media (max-width:480px){
  .hero-reimagined{
    aspect-ratio: 16/9;
    max-height: 40vh; /* Increased from 35vh */
  }
  
  .hero-text-block h1{
    font-size: 1.8rem; /* Increased from 1.6rem */
  }
  
  .hero-text-block .lead{
    font-size: 0.9rem; /* Increased from 0.85rem */
  }
  
  .hero-btn{
    padding: 0.5rem 1rem;
    font-size: 0.85rem; /* Increased from 0.8rem */
    min-width: 120px; /* Increased from 110px */
  }
  
  .hero-controls-bottom{
    bottom:15px;
  }
  
  .hero-nav-btn{
    width:38px; /* Increased from 36px */
    height:38px;
  }
  
  .hero-nav-btn svg{
    width:20px; /* Increased from 18px */
    height:20px;
  }
  
  .hero-progress{
    font-size:0.8rem; /* Increased from 0.75rem */
    padding:4px 12px; /* Increased padding */
  }
  
  .mission-section {
    padding-top: 25px;
  }
}

/* Very small phones */
@media (max-width:360px){
  .hero-reimagined{
    max-height: 38vh;
  }
  
  .hero-text-block h1{
    font-size: 1.6rem;
  }
  
  .hero-text-block .lead{
    font-size: 0.85rem;
  }
  
  .hero-btn{
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    min-width: 110px;
  }
  
  .hero-controls-bottom{
    bottom:10px;
    gap:8px;
  }
  
  .hero-nav-btn{
    width:34px;
    height:34px;
  }
  
  .hero-nav-btn svg{
    width:18px;
    height:18px;
  }
}

/* Very tall phones in portrait */
@media (max-height:700px) and (max-width:500px){
  .hero-reimagined{
    max-height: 45vh;
  }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi){
  .hero-btn{ border-width:0.5px; }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion:reduce){
  .hero-slide-bg.active,
  .hero-dynamic-overlay,
  .hero-text-block,
  .hero-text-block h1,
  .hero-text-block h1::after,
  .hero-text-block .lead,
  .hero-buttons-container,
  .hero-btn,
  .hero-btn::after,
  .hero-nav-btn,
  .hero-progress,
  .hero-dots-container,
  .hero-dot,
  .hero-timer-progress{
    animation:none !important;
    transition:none !important;
  }

  .hero-slide-bg.active{ transform:scale(1); }
  .hero-text-block h1,
  .hero-text-block .lead,
  .hero-buttons-container{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* Focus states for accessibility */
.hero-btn:focus-visible,
.hero-nav-btn:focus-visible,
.hero-dot:focus-visible{
  outline:2px solid #F57B2C;
  outline-offset:2px;
}

/* Touch optimization */
@media (hover:none) and (pointer:coarse){
  .hero-btn, .hero-nav-btn, .hero-dot{
    -webkit-tap-highlight-color:rgba(245,123,44,0.2);
  }
}

/* ======================= */
/* FIX HERO TO MISSION GAP - COMPLETE */
/* ======================= */

.hero-reimagined {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.mission-section {
  margin-top: 0 !important;
  padding-top: 40px !important; /* Add some padding if you want space, or set to 0 */
}

/* Adjust controls to not create extra space */
.hero-controls-bottom {
  bottom: 20px;
}

@media (max-width: 767px) {
  .hero-controls-bottom {
    bottom: 10px;
  }
  
  .mission-section {
    padding-top: 30px !important;
  }
}

/* Ensure the first element in mission doesn't add top margin */
.mission-title-wrap h2,
.mission-title-wrap .mission-underline,
.mission-title-wrap .mission-subtitle {
  margin-top: 0;
}