/* ==========================================================================
   AMEYRA GLOBAL — Responsive Stylesheet
   Breakpoints: Desktop (default) · Tablet (<=1024) · Mobile (<=640)
   ========================================================================== */

/* ---- Large laptop ---- */
@media (max-width: 1200px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-col--news { grid-column: 1 / -1; max-width: 480px; }
}

/* ---- Tablet (8-column thinking) ---- */
@media (max-width: 1024px) {
  :root { --nav-h: 72px; }

  .nav-links,
  .nav .nav-cta { display: none; }
  .nav-toggle { display: flex; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-5); }

  .hero .container { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 48px) 80px; }
  .hero-stage { max-width: 440px; margin-inline: auto; width: 100%; }
  .hero-copy { max-width: 640px; }
  .hero-scroll { display: none; }

  .split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .split .split-media { order: -1; }

  .prod-hero { grid-template-columns: 1fr; }
  .prod-hero-media { order: -1; max-width: 520px; }

  .industry { grid-template-columns: 1fr; }
  .industry:nth-child(even) .ind-media { order: 0; }
  .ind-media { min-height: 260px; }

  .gallery { grid-template-columns: repeat(6, 1fr); }
  .g-wide { grid-column: span 6; }
  .g-tall { grid-column: span 3; }
  .g-half { grid-column: span 6; }
  .g-third { grid-column: span 3; }

  /* Recovery Engineering page */
  .eras { grid-template-columns: 1fr; gap: var(--sp-6); }
  .era .era-num { font-size: 2.4rem; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .ecosystem-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .eco-stage { --r: clamp(120px, 34vw, 200px); --ns: clamp(84px, 22vw, 104px); max-width: 440px; }
  .eco-detail { text-align: center; }
  .eco-detail p { margin-inline: auto; }
  .eco-detail .ed-tags { display: flex; justify-content: center; }
  .future-lineup { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .vision-metrics { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .re-hero-glyph { opacity: 0.25; right: -20%; }

  /* Elevation */
  .future-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .hero-prod.oxy { width: 62%; }
  .hero-prod.hyd { width: 50%; }

  /* Our Story */
  .leader-grid { grid-template-columns: 1fr; gap: var(--sp-8); max-width: 480px; margin-inline: auto; }
  .principle { grid-template-columns: 56px 1fr; gap: var(--sp-3); }
  .eng-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-5); }

  /* OXYZEN flagship */
  .highlights { grid-template-columns: repeat(2, 1fr); }
  .platform-grid { grid-template-columns: repeat(2, 1fr); }

  /* HYDROZEN */
  .variant-meta .vm-row { grid-template-columns: 100px 1fr; gap: var(--sp-3); }

  /* Homepage refinement */
  .showcase > .container { grid-template-columns: 1fr; gap: var(--sp-7); }
  .showcase.rev .sc-media { order: -1; }
  .showcase .sc-media { order: -1; max-width: 560px; margin-inline: auto; width: 100%; }
  .trust-band { grid-template-columns: repeat(2, 1fr); }
  .hero-prod.sculpt.oxy { width: 40%; }
  .hero-prod.sculpt.hyd { width: 36%; }
}

/* ---- Mobile (4-column thinking) ---- */
@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --section-y: clamp(56px, 14vw, 88px);
    --r-panel: 28px;
    --r-hero: 24px;
  }

  .grid-4,
  .grid-3,
  .grid-2,
  .spec-grid,
  .stats { grid-template-columns: 1fr; }

  .stats { gap: var(--sp-6); text-align: left; }

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

  .footer-top { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer-col--news { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .footer-bottom nav { flex-wrap: wrap; }

  .value-card { padding: var(--sp-6); min-height: 0; }
  .cta-banner { padding: var(--sp-7) var(--sp-5); }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .g-wide, .g-tall, .g-half, .g-third { grid-column: span 2; }

  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1; justify-content: center; }

  .timeline { padding-left: 30px; }
  .tl-item::before { left: -30px; }

  .quote { padding-left: var(--sp-5); }

  .hero-stage .float-chip { font-size: 0.64rem; padding: 6px 12px; }
  .hero-stage .chip-2 { left: 0; }

  /* Keep the two-statement headline (and "Human Performance." nowrap) safe on small phones */
  .hero-title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
  .ht-secondary { margin-top: var(--sp-5); }

  .marquee span { gap: var(--sp-5); }

  /* Recovery Engineering page */
  .pillars { grid-template-columns: 1fr; }
  .future-lineup { grid-template-columns: 1fr; }
  .fl-item { padding-bottom: var(--sp-5); }
  .vision-metrics { grid-template-columns: 1fr; gap: var(--sp-6); text-align: left; }
  .eco-node { --ns: clamp(72px, 26vw, 96px); }
  .re-hero h1 { font-size: clamp(2.6rem, 13vw, 4rem); }

  /* Elevation — keep hero scene legible on small screens */
  .hero-prod.oxy { width: 66%; top: 0; }
  .hero-prod.hyd { width: 54%; bottom: 0; }
  .hero-prod .hp-inner { box-shadow: 0 24px 44px rgba(0, 0, 0, 0.16); }
  .footer-statement { padding-top: var(--sp-6); }
  .lb-prev, .lb-next { display: none; }

  /* Homepage refinement */
  .trust-band { grid-template-columns: 1fr; }
  .hero-prod.sculpt.oxy { width: 44%; }
  .hero-prod.sculpt.hyd { width: 40%; }
  .showcase .sc-inner { aspect-ratio: 4 / 3.4; }

  /* OXYZEN flagship */
  .highlights { grid-template-columns: 1fr; }
  .platform-grid { grid-template-columns: 1fr; }

  /* Our Story */
  .eng-grid { grid-template-columns: 1fr; gap: var(--sp-5); }

  /* HYDROZEN */
  .variant-meta .vm-row { grid-template-columns: 1fr; gap: 4px; }

  /* Header logo — scale down proportionally on mobile */
  .nav-logo img { height: 40px; }
  .nav.is-scrolled .nav-logo img { height: 32px; }
}

/* ---- Reduced data / small height tweaks ---- */
@media (max-width: 380px) {
  .nav-logo img { height: 34px; }
  .nav.is-scrolled .nav-logo img { height: 28px; }
}

/* ==========================================================================
   ACCESSIBILITY — Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .cursor-dot, .cursor-ring { display: none; }
}