/* ==========================================================================
   Breakpoint overrides. Mobile-first defaults already live in main.css;
   this file only holds adjustments that don't fit naturally at the
   component's own definition (checked at 320/375/390/768/1024/1440/1920).
   ========================================================================== */

/* Tablet and below: tighten vertical rhythm */
@media (max-width: 1024px) {
  :root {
    --sp-9: 72px;
    --sp-10: 96px;
  }
  .about-grid { grid-template-columns: minmax(180px, 260px) 1fr; }
  .hero-img { object-position: 32% 30%; }
}

/* Phones */
@media (max-width: 640px) {
  :root {
    --sp-9: 56px;
    --sp-10: 72px;
    --gutter: 20px;
  }
  .hero-content { padding-top: 128px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; }
  .cta-panel { padding: var(--sp-7) var(--sp-4); }
  .footer-top { flex-direction: column; }
  .footer-cols { gap: var(--sp-6); }
  .step { grid-template-columns: 40px 1fr; }
  .step-index { width: 40px; height: 40px; font-size: .85rem; }
  .steps-rail::before, .steps-rail .step-line-fill { left: 19px; }
  .about-grid { grid-template-columns: 1fr; text-align: center; }
  .about-values, .about-actions { justify-content: center; display: flex; flex-wrap: wrap; }
  .hero-img { object-position: 22% 32%; }
}

/* Small phones (320–375px): avoid cramped hero type */
@media (max-width: 380px) {
  .brand { font-size: .95rem; }
  .brand img { width: 36px; height: 36px; }
}

/* Reduce expensive effects on touch devices regardless of width */
@media (hover: none) and (pointer: coarse) {
  .hero-media img { transform: none !important; }
  .water-ring { display: none; }
  .btn--magnetic { transform: none !important; }
  .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10,15,20,.94); }
}

/* Desktop-only flourishes: tilt/magnetic/parallax opt in above 1024px */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
  .video-card { transition: transform 200ms var(--ease-out); }
}