/* ==========================================================================
   RESPONSIVE — mobile-first. Breakpoints: 480 / 768 / 1024 / 1280 / 1536
   Loaded last so these rules win without needing !important.
   ========================================================================== */

/* ==========================================================================
   >= 480px
   ========================================================================== */
@media (min-width: 480px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .popup__actions .btn { flex: 1; }
}

/* ==========================================================================
   >= 768px  — tablet. Mobile action bar switches OFF here.
   ========================================================================== */
@media (min-width: 768px) {

  /* More room for the sticky header once the layout is wider. */
  :root { --h-header: 72px; }

  /* Address returns to the sticky utility bar — there is room for it now. */
  .utilitybar__link.u-hide-sm { display: inline-flex; }
  .utilitybar__group { gap: var(--s-5); }

  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }

  .stats { grid-template-columns: repeat(4, 1fr); }

  .footer__grid { grid-template-columns: repeat(2, 1fr); }

  .hero__cue { display: flex; }

  .process { padding-left: 84px; }
  .step__dot { left: -84px; width: 62px; height: 62px; font-size: 1.25rem; }
  .process__line { left: 31px; }

  .gallery { column-count: 2; }

  /* The mobile action bar is mobile-only, per spec. */
  .mobilebar { display: none; }
  body[data-mobilebar="true"] { padding-bottom: 0; }
}

/* ==========================================================================
   >= 1024px — desktop. Real nav replaces the hamburger.
   ========================================================================== */
@media (min-width: 1024px) {

  .nav { display: block; }
  .navtoggle { display: none; }
  .mobilenav { display: none; }
  .header__cta { display: inline-flex; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }

  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split__media { position: sticky; top: calc(var(--h-utilitybar) + var(--h-header) + var(--s-5)); }

  .contact-grid { grid-template-columns: 1.15fr .85fr; }

  .gallery { column-count: 3; }

  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }

  .hero__chip { display: block; }

  .team-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ==========================================================================
   >= 1280px
   ========================================================================== */
@media (min-width: 1280px) {
  .hero__content { max-width: 840px; }
}

/* ==========================================================================
   >= 1536px — cap the measure so text never runs too wide
   ========================================================================== */
@media (min-width: 1536px) {
  :root { --container: 1360px; }
}

/* ==========================================================================
   POINTER CAPABILITY
   3D tilt and pointer-tracked highlights only make sense with a fine
   pointer. On touch they are dead weight and can cause jank.
   ========================================================================== */
@media (hover: none) or (pointer: coarse) {
  .card--tilt { transform: none !important; }
  .card__spec { display: none; }
  .gallery__cap { opacity: 1; transform: none; }   /* captions always shown on touch */
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .utilitybar, .header, .mobilebar, .modal, .lightbox,
  .scroll-progress, .bg-field, .ctaband, .hero__cue { display: none !important; }

  body { background: #fff; color: #000; }
  h1, h2, h3 { color: #000; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .card, .infocard { border: 1px solid #ccc; box-shadow: none; background: #fff; }
}