/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1023px){
  .services-header { padding:60px 24px 36px; }
}
@media(max-width:767px){
  .hero-actions { flex-direction:column; align-items:center; }
  .ceo-card { left:0; right:0; bottom:0; border-radius:0 0 var(--radius-xl) var(--radius-xl); }
  .scroll-indicator { display:none; }
  .about-image-bg { display:none; }
  .stats-container { min-height:auto; padding:0 20px; }
  .wave-wrapper { display:none; }
  .stats-track { position:static; height:auto; display:grid; grid-template-columns:1fr 1fr; gap:32px 16px; }
  .stat-node { position:static; width:100%; }
  .stat-node--above,.stat-node--below { flex-direction:column; justify-content:center; top:auto; bottom:auto; }
  .stat-connector { height:20px; }
}
@media(min-width:768px){
  .stat-pill { flex-direction:row; align-items:baseline; text-align:left; }
  .stat-pill__label { align-self:center; margin-left:4px; }
}
@media(min-width:1024px){
  :root { --logo-height-desktop:52px; }
  .logo-img,.logo-placeholder { height:var(--logo-height-desktop); max-width:140px; }
}

/* ============================================================
   LOGO (certifications / events / why hero sections)
   ============================================================ */
.certs-hero .logo-main,
.events-hero .logo-main,
.why-hero .logo-main { color:var(--clr-white); }
.certs-hero .logo-sub,
.events-hero .logo-sub,
.why-hero .logo-sub   { color:rgba(255,255,255,.6); border-bottom:1.5px solid rgba(255,255,255,.4); padding-bottom:2px; }

/* ============================================================
   ACCESSIBILITY + REDUCED MOTION
   ============================================================ */
:focus-visible { outline:2px solid var(--clr-red); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
@media(prefers-reduced-motion:reduce){
  .marquee--ltr .marquee__track,.marquee--rtl .marquee__track { animation:none; }
  .clients-section,.clients-section__title,.clients-section__subtitle,.clients-section__stats { opacity:1; transform:none; transition:none; }
}
.marquee__item:focus-visible { outline:2px solid var(--color-red); outline-offset:4px; border-radius:4px; }


/* ============================================================
   HERO — Small Mobile Text Overflow Fix
   Added: May 2026 — prevents tagline overflow on phones < 380px
   ============================================================ */
@media(max-width:380px){
  .word {
    font-size: clamp(38px, 12vw, 60px);
    letter-spacing: -0.02em;
  }
  .tagline-row { gap: 0.15em; }
  .hero-sub { font-size: 14px; margin-bottom: 28px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 10px; }
  .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
}

/* ============================================================
   MOBILE NAV — Close on outside click (handled via CSS guard)
   About section — single column on narrow screens
   ============================================================ */
@media(max-width:479px){
  .about-inner { gap: 32px; }
  .about-image-wrap { max-width: 100%; }
  .svc-stack-card-content { padding: 24px 16px; }
  .svc-stack-card-title { font-size: 20px; }
  .modal { padding: 28px 20px; }
  .modal h2 { font-size: 20px; }
}