/* ===========================================================
   352 Electric — Responsive layer
   Loaded AFTER assets/app.css. Makes the fixed 1280px design
   fluid and mobile-friendly (mobile-first indexing / Core Web Vitals).
   =========================================================== */

/* Kill the desktop min-width lock so the page can shrink. */
html, body { min-width: 0 !important; overflow-x: hidden; }
img, svg { max-width: 100%; }

/* Fluid display type — scales smoothly from phone to desktop,
   capped at the original desktop sizes. */
h1.hero-title { font-size: clamp(40px, 8.5vw, 104px); }
.ph-title     { font-size: clamp(36px, 7vw, 88px); }
.sec-title    { font-size: clamp(32px, 6vw, 80px); }
.cta-title    { font-size: clamp(32px, 6vw, 88px); }
.ev-title     { font-size: clamp(28px, 4.6vw, 62px); }
.svc-title,
.svc-cat-head h3 { font-size: clamp(30px, 4vw, 46px); }

/* Fluid section rhythm. */
.section    { padding: clamp(56px, 9vw, 104px) 0; }
.section-sm { padding: clamp(44px, 7vw, 72px) 0; }
.cta-banner { padding: clamp(48px, 8vw, 80px) 0; }
.hero-inner { padding: clamp(56px, 9vw, 96px) 0 clamp(64px, 10vw, 110px); }
.ph-inner   { padding: clamp(40px, 7vw, 64px) 0 clamp(48px, 8vw, 80px); }

/* Mobile nav toggle (hidden on desktop). */
.nav-toggle { display: none; }

/* ───────── ≤ 1024px : large tablet ───────── */
@media (max-width: 1024px) {
  .wrap { padding: 0 32px; }
  .sec-head { gap: 24px; margin-bottom: 40px; }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-row { grid-template-columns: repeat(3, 1fr); }
  .ev-inner { grid-template-columns: auto 1fr; }
  .ev-cta { grid-column: 1 / -1; justify-self: start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ───────── ≤ 900px : tablet → hamburger nav ───────── */
@media (max-width: 900px) {
  .nav-inner { height: 68px; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 10px; border-radius: 8px; background: rgba(255,255,255,.06);
  }
  .nav-toggle span { display: block; height: 2px; background: var(--yellow); border-radius: 2px; transition: transform .2s, opacity .2s; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--black);
    padding: 8px 32px 20px; border-bottom: 1px solid #000; box-shadow: 0 16px 24px rgba(0,0,0,.3);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 16px; border-bottom: 1px solid #2a2a2a; }
  .nav-links a.active::after { display: none; }

  /* ── Services submenu becomes a tap-to-open accordion ── */
  .nav-item { display: block; width: 100%; position: static; }
  .nav-item > a { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .nav-caret { transition: transform .2s; }
  .nav-item:hover .nav-caret { transform: none; }
  .nav-item.open > a .nav-caret { transform: rotate(180deg); }
  .mega,
  .nav-item:hover .mega {
    position: static; display: none; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 2px 0 10px; grid-template-columns: 1fr; gap: 0; width: 100%; min-width: 0;
  }
  .nav-item.open .mega { display: grid; }
  .mega-group { padding: 0; border: 0; }
  .mega-group h6 { margin: 12px 0 2px; font-size: 11px; letter-spacing: .22em; color: var(--gray-300); }
  .mega-links { display: grid; grid-template-columns: 1fr; gap: 0; }
  .nav-links .mega-links a { padding: 13px 0 13px 14px; font-size: 15px; border-bottom: 1px solid #232323; color: #E4E4E0; }
  .nav-links .mega-links a.all { color: var(--yellow); font-weight: 700; border-bottom: 0; }
  .brand-sub { display: none; }
  .phone-cta { padding: 11px 14px; font-size: 14px; }

  /* Stack the big two-column layouts. */
  .hero-inner,
  .ph-grid,
  .area-grid,
  .test-grid,
  .detail-grid,
  .svc-grid,
  .cmp { grid-template-columns: 1fr !important; gap: 40px; }

  /* Photo columns must fill the stacked row, not shrink to a sliver. */
  .detail-grid > .img-figure,
  .detail-grid > figure,
  .owner-figure { width: 100%; max-width: 100%; }
  .detail-grid > .img-figure img,
  .detail-grid > figure img { width: 100%; height: 100%; object-fit: cover; }

  /* ── EV / featured-capability banner: stack and keep the CTA off the edge ── */
  /* Vertical padding lives on the section: .wrap's `padding: 0 20px` shorthand
     (set later, at the 600px breakpoint) would otherwise reset it to zero. */
  .ev-banner { padding: 56px 0; }
  .ev-inner { grid-template-columns: 1fr !important; gap: 28px; padding-top: 0; padding-bottom: 0; justify-items: start; }
  .ev-cta { margin-top: 4px; }

  .hero-badge-wrap { order: -1; }
  .hero-badge img { width: clamp(180px, 42vw, 280px); height: auto; aspect-ratio: 1; }
  .test-grid .google-card { max-width: 420px; }

  .sidebar { position: static; }
  .detail-grid { gap: 32px; }

  .svc-index { grid-template-columns: repeat(2, 1fr); }
  .stat-row  { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: 0; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .signs-grid { grid-template-columns: 1fr; }
  .prose ul, .svc-list, .modal-body, .big-form .field-grid { grid-template-columns: 1fr; }

  .cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .cta-buttons { flex-wrap: wrap; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}

/* ───────── ≤ 600px : phone ───────── */
@media (max-width: 600px) {
  .wrap { padding: 0 20px; }
  .nav-links { padding-left: 20px; padding-right: 20px; }
  .nav-toggle { top: 0; }

  .hero-trust { gap: 12px 20px; }
  .badge-stat.s1 { top: 0; left: 0; }
  .badge-stat.s2 { bottom: 0; right: 0; }

  .why-grid,
  .cert-row,
  .svc-index,
  .contact-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .ft-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .big-form { padding: 24px; }
  .big-form .submit { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ph-meta { width: 100%; }
  .callout { padding: 28px 24px; font-size: 17px; }
  .svc-card { padding: 32px 28px 28px; }
  .btn, .btn-lg { width: 100%; justify-content: center; }
  .hero-ctas, .ph-ctas { width: 100%; }
  .hero-ctas .btn, .ph-ctas .btn { flex: 1 1 auto; }
}

/* Respect reduced-motion: stop the decorative spinning rings. */
@media (prefers-reduced-motion: reduce) {
  .hero-badge::before, .hero-badge::after { animation: none; }
  .reveal { transition: none; }
}