/* ==========================================================================
   Responsive layer — breakpoints, desktop-first, down to 320px phones.
   1280 large laptop · 1024 tablet landscape · 820 tablet portrait ·
   640 large phone · 420 small phone · plus touch / short-height / print.
   ========================================================================== */

@media (max-width: 1280px) {
  .scroller-track { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
  .primary a { padding-inline: 10px; }
}

/* Tablet landscape & small laptops */
@media (max-width: 1100px) {
  .nav-quote { display: none; }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .foot-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; } .foot-contact h3 { grid-column: 1 / -1; }
  .trust { grid-template-columns: repeat(3, 1fr); row-gap: 12px; } .hero-in { padding-bottom: 150px; }
  .g4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scroller-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
  .detail { grid-template-columns: 210px 1fr; }
  .group { grid-template-columns: 190px minmax(0, 1fr); }
  .quote-wrap { grid-template-columns: 1fr; } .quote-side { position: static; grid-template-columns: 1fr 1fr; }
}

/* Mobile navigation kicks in */
@media (max-width: 980px) {
  :root { --header-h: 64px; }
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--teal-ddd); } /* backdrop-filter would trap the fixed drawer */
  .menu-btn { display: inline-flex; }
  .icon-btn .kbd { display: none; }
  .primary { position: fixed; z-index: 950; top: 0; right: 0; bottom: 0; width: min(380px, 88vw); margin: 0; padding: calc(var(--header-h) + 12px) 20px calc(24px + var(--safe-b)); flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; background: var(--teal-ddd); box-shadow: -20px 0 50px rgba(0, 0, 0, .4); transform: translateX(105%); visibility: hidden; transition: transform .35s var(--ease), visibility .35s; overscroll-behavior: contain; }
  .primary.open { transform: none; visibility: visible; }
  .primary > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .primary li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .primary a { flex: 1; padding: 16px 4px; font-size: 1.1rem; border-radius: 0; } .primary a.is-active::after { display: none; }
  .sub-toggle { width: 48px; height: 52px; margin: 0; font-size: 1rem; }
  .mega { position: static; width: 100%; padding: 0; transform: none; opacity: 1; visibility: visible; display: none; flex-basis: 100%; }
  .has-mega:hover .mega, .has-mega:focus-within .mega { transform: none; }
  .has-mega.open .mega { display: block; }
  .mega-grid { grid-template-columns: 1fr; gap: 14px; padding: 16px; background: rgba(255, 255, 255, .05); box-shadow: none; color: #fff; margin-bottom: 12px; }
  .mega-title { color: #fff !important; } .mega ul a { color: #cfe4e1 !important; } .mega-ico { background: rgba(255, 255, 255, .1); color: var(--yellow); } .mega-cta { background: rgba(255, 255, 255, .08); }
  .nav-mobile-cta { display: grid; gap: 10px; margin-top: 24px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats-card { margin-top: 8px; }
  .scroller-track { grid-auto-columns: calc((100% - 20px) / 2.2); }
}

/* Tablet portrait */
@media (max-width: 820px) {
  .two-col, .pillar, .contact-grid, .ph-grid { grid-template-columns: 1fr; } .two-col { align-items: stretch; }
  .pillar.rev .pillar-art { order: 0; }
  .ph-art { display: none; }
  .split-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pkgs { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .pkg.is-featured { transform: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; }
  .detail { grid-template-columns: minmax(0, 1fr); }
  .subnav { position: sticky; top: var(--header-h); z-index: 30; margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); border-radius: 0; background: rgba(255, 238, 222, .97); backdrop-filter: blur(8px); box-shadow: 0 6px 16px rgba(0, 40, 44, .08); }
  .subnav p, .subnav .btn { display: none; } .subnav ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .subnav ul::-webkit-scrollbar { display: none; }
  .subnav li a { margin: 0; white-space: nowrap; padding: 10px 16px; border-radius: var(--r-pill); background: #fff; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .lb-box { grid-template-columns: 1fr; } .lb-art { min-height: 0; aspect-ratio: 4 / 3; }
}

/* Hero stacks (copy above, artwork below) on tablets and phones */
@media (max-width: 1100px) {
  .hero { display: flex; flex-direction: column; }
  .hero-in { order: 1; min-height: 0; padding: 40px var(--gutter) 24px; align-items: flex-start; }
  .hero-bg { position: relative; order: 2; inset: auto; aspect-ratio: 16 / 8; overflow: hidden; }
  .hero-bg img { height: 100%; width: 100%; object-fit: cover; object-position: 80% center; }
  .hero-bg::after { background: linear-gradient(180deg, #00363b 0%, rgba(0, 54, 59, 0) 28%); }
  .hero .trust { position: static; transform: none; order: 3; max-width: none; background: #00282c; padding-block: 22px; width: 100%; }
  .hero-copy { max-width: 620px; }
}

/* Large phones */
@media (max-width: 640px) {
  :root { --header-h: 60px; }
  body { padding-bottom: calc(64px + var(--safe-b)); }
  .topbar { display: none; }
  .brand-mark { width: 38px; height: 38px; } .brand-word { font-size: 1.15rem; }
  .bar { gap: 8px; } .bar-actions { margin-left: auto; }
  .hero-in { min-height: 0; padding: 32px var(--gutter) 24px; align-items: flex-start; }
  .hero { display: flex; flex-direction: column; }
  .hero-bg { aspect-ratio: 4 / 3; } .hero-bg img { object-position: 82% center; }
  .hero .trust { grid-template-columns: 1fr 1fr; }
  .trust li:last-child { grid-column: 1 / -1; }
  .hero-cta .btn { flex: 1 1 100%; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .g4.pgrid, .pgrid, .g4.jgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pcard-body { padding: 12px; } .pcard h3 { font-size: .95rem; } .pcard p { font-size: .78rem; } .pcard .add-btn { font-size: .78rem; padding: 0 8px; min-height: 38px; }
  .jgrid.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .jcard-cap { padding: 26px 10px 10px; } .jcard-cap h3 { font-size: .88rem; }
  .scroller-track { grid-auto-columns: 62%; gap: 12px; } .scroller-nav { display: none; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px; scrollbar-width: none; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; }
  .toolbar { flex-direction: column; align-items: stretch; } .toolbar .select { display: block; } .search-field { flex: none; width: 100%; } .toolbar .select select { width: 100%; }
  .steps { grid-template-columns: 1fr; }
  .stats-card { grid-template-columns: 1fr 1fr; gap: 10px; } .stat { padding: 18px 14px; }
  .group { grid-template-columns: minmax(0, 1fr); } .group-art { aspect-ratio: 16 / 9; }
  .item-list li { flex-wrap: wrap; } .item-list .add-btn { min-height: 38px; }
  .fgrid { grid-template-columns: 1fr; } .review .rv { grid-template-columns: 1fr; gap: 2px; }
  .wiz-steps li b { display: none; } .wiz-steps li.is-on b { display: inline; } .wiz-steps { grid-template-columns: auto auto auto 1fr; }
  .send-row .btn { width: 100%; } .quote-side { grid-template-columns: 1fr; }
  .calc-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; } .foot-contact { grid-template-columns: 1fr; } .foot-base { flex-direction: column; }
  .cta-actions { width: 100%; } .cta-actions .btn { flex: 1; }
  .pillar { padding-block: 24px; }
  .wa-float { display: none; } .to-top { bottom: calc(76px + var(--safe-b)); right: 14px; }
  .toast { bottom: calc(80px + var(--safe-b)); }
  .mobile-bar { position: fixed; z-index: 850; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px 8px calc(6px + var(--safe-b)); background: rgba(0, 40, 44, .97); backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .mobile-bar > * { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; border-radius: 12px; color: #e8f2f0; font-size: 1.2rem; } .mobile-bar span { font: 600 .68rem var(--font-body); }
  .mobile-bar .mb-main { background: var(--yellow); color: var(--teal-ddd); } .mobile-bar .badge { top: 4px; right: calc(50% - 22px); }
  .drawer-panel { width: 100%; } .palette { padding-top: 8px; } .palette-box { max-height: 92dvh; } .palette-hint { display: none; }
  .lightbox { padding: 0; align-items: end; } .lb-box { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 94dvh; }
  .page-hero h1 { max-width: none; }
}

/* Small phones (≤ 420px, e.g. iPhone SE / 360px Androids) */
@media (max-width: 420px) {
  .brand-word { font-size: 1rem; } .brand-mark { width: 34px; height: 34px; }
  .icon-btn { min-width: 40px; padding: 0 6px; } .bar-actions { gap: 2px; }
  .hero h1 { font-size: clamp(2.3rem, 14vw, 3rem); }
  .trust { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr; } .news-row { flex-direction: column; } 
  .pkg { padding: 26px 18px 20px; }
  .btn-lg { padding: 0 20px; }
  .cmp th, .cmp td { padding: 10px 12px; font-size: .88rem; }
}

/* Very narrow (≤ 340px) */
@media (max-width: 340px) { .g4.pgrid, .pgrid, .jgrid.g3, .g4.jgrid { grid-template-columns: 1fr; } .mobile-bar span { font-size: .62rem; } }

/* Short landscape phones */
@media (max-height: 480px) and (orientation: landscape) { .hero-in { min-height: 0; padding-block: 28px; } .palette { padding-top: 8px; } .palette-box { max-height: 94vh; } .primary { padding-top: calc(var(--header-h) + 4px); } .mobile-bar > * { min-height: 44px; } }

/* Touch devices: remove hover-only affordances, enlarge targets */
@media (hover: none) {
  .svc-card:hover, .pcard:hover, .more-card:hover, .c-card:hover, .gl:hover { transform: none; }
  .btn:hover { transform: none; }
  .chip, .add-btn { min-height: 44px; }
}

/* Large / ultra-wide screens */
@media (min-width: 1700px) { :root { --maxw: 1400px; } html { font-size: 17px; } }

/* Print */
@media print {
  .topbar, .site-header, .site-footer, .wa-float, .to-top, .mobile-bar, .cta-band, .drawer, .palette, .scrim, .toast { display: none !important; }
  body { padding: 0; color: #000; } .sec { padding-block: 16px; } .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

@media (max-width: 640px) { .item-list .add-btn .x { display: none; } .item-list .add-btn { min-width: 76px; } }
@media (max-width: 980px) { .bar-actions, .brand { position: relative; z-index: 960; } }