/* ==========================================================================
   Wellfit Designs — responsive layer
   Breakpoints: 1280 (laptop) · 1024 (tablet landscape) · 820 (tablet) · 600 (phone)
   ========================================================================== */

@media (max-width: 1280px) {
  .process__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .process__line { display: none; }
  .process__step { border-top: 1px solid var(--line-light); }
  .process__step::before { top: -5px; }
  .swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
}

@media (max-width: 1100px) {
  :root { --header-h: 80px; }
  .nav, .header-cta { display: none; }
  .menu-toggle { display: inline-flex; }
  .brand img { height: 54px; }
  .site-header.is-scrolled .brand img { height: 48px; }
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .svc-row__link { grid-template-columns: 52px minmax(0, 1fr) 40px; }
  .svc-row__desc { grid-column: 2 / 3; grid-row: 2; }
  .svc-row__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .svc-preview { display: none; }
  .svc-layout { grid-template-columns: minmax(0, 1fr); }
  .svc-nav { display: none; }
  .materials__quote { left: 16px; }
}

@media (max-width: 1024px) {
  .hero__grid, .intro__grid, .why__grid, .materials__grid, .contact__grid, .brochure__grid, .page-hero__grid, .split { grid-template-columns: minmax(0, 1fr); }
  .hero__sticky { padding-bottom: 40px; }
  .hero__slot { height: auto; min-height: 0; aspect-ratio: 4 / 4.4; max-height: 78vh; width: 100%; max-width: 640px; }
  .hero__scroll { display: none; }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .why__aside { position: static; }
  .why__aside .media { max-width: 520px; }
  .intro__media { max-width: 640px; }
  .page-hero__grid { align-items: start; }
  .page-hero .media { max-width: 560px; max-height: none; }
  /* phones and tablets: the picture leads, the copy follows */
  .hero__slot { order: -1; }
  .page-hero__grid > .media { order: -1; }
  .portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-3 { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 96px minmax(0, 1fr); }
  .step__media { grid-column: 2; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .materials__visual { max-width: 560px; }
}

@media (max-width: 820px) {
  .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .svc-block { grid-template-columns: minmax(0, 1fr); }
  .svc-block--flip .svc-block__media { order: 0; }
  .svc-block__media { max-width: 560px; }
  .checklist { grid-template-columns: minmax(0, 1fr); }
  .cards-2 { grid-template-columns: minmax(0, 1fr); }
  .project-card { width: min(78vw, 360px); }
  .project-card--wide { width: min(86vw, 440px); }
}

@media (max-width: 600px) {
  :root { --header-h: 72px; }
  body { font-size: 1rem; }
  .brand img { height: 48px; }
  .site-header.is-scrolled .brand img { height: 44px; }
  .menu-toggle { width: 48px; height: 48px; }
  .hero__slot { aspect-ratio: auto; height: min(52svh, 440px); min-height: 280px; max-height: none; }
  .hero__sticky { padding-top: calc(var(--header-h) + 12px); }
  .page-hero { padding-top: calc(var(--header-h) + 16px); }
  .page-hero .media { aspect-ratio: auto; height: min(50svh, 420px); min-height: 260px; width: 100%; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .header-cta .btn, .filters .btn { width: auto; }
  .facts__grid { grid-template-columns: minmax(0, 1fr); }
  .fact { padding-left: 18px; }
  .sectors { grid-template-columns: minmax(0, 1fr); }
  .sector .media { aspect-ratio: 4 / 4.2; }
  .svc-row__link { grid-template-columns: 40px minmax(0, 1fr); padding: 24px 0; }
  .svc-row__arrow { display: none; }
  .why__item { grid-template-columns: 56px minmax(0, 1fr); }
  .why__num { font-size: 2rem; }
  .process__steps { grid-template-columns: minmax(0, 1fr); }
  .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .swatch:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; width: 100%; }
  .portfolio { grid-template-columns: minmax(0, 1fr); }
  .portfolio .pending-panel { grid-column: auto; }
  .intro__media .media--main { width: 86%; }
  .intro__media .media--inset { width: 50%; border-width: 6px; }
  .materials__quote { position: relative; left: auto; bottom: auto; margin: -48px 16px 0; }
  .step { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step__media { grid-column: auto; }
  .faq__a-inner { padding-right: 0; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .contact-panel { padding: 22px 18px; }
  .contact-action { gap: 12px; padding: 14px; }
  .contact-action__icon { width: 40px; height: 40px; }
  .contact-action__value { font-size: .95rem; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__bottom { flex-direction: column; }
  .pending-panel { grid-template-columns: minmax(0, 1fr); }
  .lightbox__bar, .lightbox__foot { padding-inline: 16px; }
  .cta-band::after { background: linear-gradient(180deg, rgba(20, 24, 31, .62), rgba(20, 24, 31, .82)); }
}

@media (max-width: 380px) {
  .marquee__item { font-size: 2.1rem; }
  .project-card { width: 84vw; }
}

/* Large screens: let the hero breathe a little more */
@media (min-width: 1600px) {
  :root { --wrap: 1240px; }
}

/* Touch devices: no hover-only affordances */
@media (hover: none) {
  .svc-preview { display: none; }
  .sector:hover .media img, .project-card:hover .media img, .swatch:hover .media img { transform: none; }
}

/* Print: clean, readable */
@media print {
  .site-header, .menu, .curtain, .scroll-progress, .marquee, .svc-preview, .lightbox, .to-top { display: none !important; }
  .hero.is-pinned, .rail.is-pinned { height: auto !important; }
  .hero.is-pinned .hero__sticky, .rail.is-pinned .rail__sticky { position: static !important; height: auto !important; }
  body { background: #fff; }
}