/* ==========================================================================
   CableNet Industries — responsive.css
   Desktop-first, descending: 1600 → 1280 → 1024 → 768 → 480
   ========================================================================== */

@media (max-width: 1600px) {
  :root { --container: 1360px; }
}

/* ------------------------------- 1280 ----------------------------------- */
@media (max-width: 1280px) {
  :root { --space-10: 80px; --space-9: 60px; }

  .site-header .main-nav ul { gap: 0; margin-right: 16px; }
  .site-header .main-nav ul li a { padding: 9px 11px; font-size: 15px; }
  .site-logo img { width: 176px; }

  .page-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-7); }
  .project-item,
  .project-item:nth-child(even) { grid-template-columns: 340px minmax(0, 1fr); }
  .project-item:nth-child(even) .media { order: 0; }
  .site-footer .footer-inner { gap: var(--space-6); }
}

/* ------------------------------- 1024 ----------------------------------- */
@media (max-width: 1024px) {
  :root { --header-h: 145px; --gutter: 22px; }

  /* topbar collapses to one compact icon row, in step with the drawer */
  .site-header .topbar { padding: 7px 0; }
  .site-header .topbar .topbar-inner { justify-content: space-between; flex-wrap: nowrap; gap: var(--space-3); }
  .site-header .topbar-list { gap: var(--space-2); justify-content: flex-start; flex-wrap: nowrap; }
  .site-header .topbar-list li:nth-child(2),
  .site-header .topbar-list li:nth-child(3) { display: none; }
  .site-header .topbar-social { display: flex; gap: var(--space-2); }
  .site-header .topbar-list a,
  .site-header .topbar-social a {
    width: 36px; height: 36px;
    min-height: 36px;
    gap: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--white);
    justify-content: center;
  }
  .site-header .topbar-list a { font-size: 0; }
  .site-header .topbar-list a svg,
  .site-header .topbar-social a svg { width: 16px; height: 16px; }
  .site-header .topbar-list a:hover,
  .site-header .topbar-social a:hover { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }

  /* ---- one nav, restyled as a drawer ---- */
  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  .site-header .main-nav ul#primary-menu {
    position: fixed;
    top: var(--header-h);
    right: 0;
    width: min(380px, 88vw);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    margin: 0;
    padding: var(--space-5) var(--space-5) var(--space-9);
    background: var(--white);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 40px rgba(20, 20, 83, 0.12);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
    z-index: 950;
  }
  .site-header.nav-open .main-nav ul#primary-menu,
  .site-header .main-nav ul#primary-menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .site-header .main-nav ul#primary-menu li { width: 100%; }
  .site-header .main-nav ul li a {
    justify-content: space-between;
    padding: 14px 12px;
    font-size: 18.5px;
    min-height: 48px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .site-header .main-nav ul li a:hover { background: transparent; }
  .site-header .main-nav ul li.menu-item-has-children > a::before { transform: rotate(45deg); opacity: 0.8; }
  .site-header .main-nav ul li.menu-item-has-children.is-open > a::before { transform: rotate(-135deg); }

  .site-header .main-nav ul ul.sub-menu {
    position: static;
    display: none;
    min-width: 0;
    width: auto;
    height: auto;
    padding: var(--space-2) 0 var(--space-3) var(--space-4);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: visible;
    background: var(--off);
  }
  .site-header .main-nav ul li.is-open > ul.sub-menu { display: block; }
  .site-header .main-nav ul ul.sub-menu li a { font-size: 17.5px; padding: 12px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

  /* ---- layout ---- */
  .home-hero .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-collage { grid-template-rows: 190px 190px; }
  .split-2, .split-2.wide-gap { grid-template-columns: 1fr; gap: var(--space-7); }
  .about-images { grid-template-rows: 170px 170px; }
  .why-media .media { height: 400px; }
  .card-grid { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .step-grid { grid-template-columns: 1fr 1fr; }
  .equip-grid { grid-template-columns: 1fr 1fr; }
  .sector-grid { grid-template-columns: 1fr 1fr; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .cert-grid { grid-template-columns: 1fr 1fr; }
  .profile-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .project-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 210px; }
  .project-card.large { grid-column: 1 / 3; grid-row: 1; }
  .stats-row ul { grid-template-columns: repeat(2, 1fr); }
  .stats-row li:nth-child(2) { border-right: none; }
  .stats-row li:nth-child(1), .stats-row li:nth-child(2) { border-bottom: 1px solid var(--border); }

  .page-layout { grid-template-columns: 1fr; }
  .page-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .page-sidebar > * { flex: 1 1 300px; }

  .project-item, .project-item:nth-child(even) { grid-template-columns: 1fr; gap: var(--space-5); }
  .project-item .media { height: 240px; }

  .float-stat { left: 0; }
  .float-checks { right: 0; }

  .site-footer .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------- 768 ----------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-h: 145px;
    --space-10: 60px;
    --space-9: 44px;
    --space-8: 40px;
    --fs-body: 17px;
    --fs-small: 16px;
    --fs-ui: 16px;
    --fs-h1: clamp(32px, 8.4vw, 44px);
    --fs-h2: clamp(27px, 6.8vw, 36px);
    --fs-h3: clamp(22px, 5.4vw, 28px);
  }

  /* tap targets */
  .site-header .topbar-list a,
  .site-footer .footer-contact li a,
  .breadcrumbs a,
  .content-area a { min-height: 32px; display: inline-flex; align-items: center; }
  .btn { min-height: 52px; }
  .btn-link { min-height: 44px; }
  .to-top { width: 52px; height: 52px; }

  /* reduce motion cost on small screens */
  .marquee .marquee-track { animation-duration: 26s; }
  .page-hero .hero-bg { opacity: 0.22; }
  [data-parallax] { transform: none !important; }

  /* topbar already collapsed at 1024px — only the nav bar shrinks further */
  .site-header .main-nav { height: 94px; }
  .site-logo img { width: 172px; }

  .home-hero { padding: 48px 0 52px; }
  .hero-collage { grid-template-columns: 1fr; grid-template-rows: 220px; }
  .hero-collage .media.tall { grid-row: 1; }
  .hero-collage .media.two, .hero-collage .media.three { display: none; }
  .hero-collage .collage-star { display: none; }

  .page-hero { padding: 48px 0 52px; }
  .page-hero .lede { font-size: 19.5px; }

  .card-grid, .info-grid, .blog-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .project-card { min-height: 240px; }
  .project-card.large { grid-column: 1; grid-row: auto; min-height: 300px; }

  .about-images { grid-template-columns: 1fr 1fr; grid-template-rows: 150px 150px; }
  .about-images .badge-round { right: 50%; transform: translate(50%, 0); top: auto; bottom: -34px; width: 104px; height: 104px; }
  .why-media .media { height: 320px; }
  .float-stat, .float-checks { position: static; width: auto; margin-top: var(--space-4); }
  .float-checks { display: inline-block; }

  .stats-row li { padding: var(--space-5) var(--space-4); }
  .stats-row .stat-num { font-size: 39px; }

  .cta-band { padding: 56px 0; }
  .cta-band .cta-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .cta-band .cta-actions { min-width: 0; }
  .cta-band .cta-buttons { grid-template-columns: 1fr; }

  .team-grid { grid-template-columns: 1fr 1fr; }
  .step-grid { grid-template-columns: 1fr; }
  .equip-grid { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: 1fr; }
  .faq-list summary { font-size: 18.5px; }
  .value-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .timeline li { grid-template-columns: 1fr; gap: var(--space-2); }
  .timeline li .t-year { font-size: 17.5px; }

  .form-block { padding: var(--space-5); }
  .enquiry-form { grid-template-columns: 1fr; }
  .enquiry-form input, .enquiry-form textarea, .enquiry-form select { font-size: 18.5px; min-height: 50px; }

  .profile-aside { position: static; }
  .profile-aside .media { aspect-ratio: 3 / 2; }
  .profile-facts li { font-size: var(--fs-ui); }
  .step-card { padding: var(--space-5); }
  .step-card .s-num { font-size: 32px; }
  .faq-list summary { padding: 16px; }
  .faq-list .faq-body { padding: 0 16px 16px; }
  .value-card, .info-tile, .cert-card, .sector-card { padding: var(--space-5); }
  .team-card .media { height: 300px; }
  .side-card.contact-card .side-phone { font-size: 24px; }
  .heading-group { margin-bottom: var(--space-6); }
  .content-area figure { margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); border-radius: 0; }

  .accred-strip .accred-inner { gap: var(--space-4); }
  .map-embed { height: 320px; }

  .site-footer .footer-inner { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-7) 0; }
  .site-footer .footer-bottom { flex-direction: column; align-items: flex-start; }

  .to-top { right: 16px; bottom: 16px; }
}

/* -------------------------------- 480 ----------------------------------- */
@media (max-width: 480px) {
  :root { --gutter: 18px; --header-h: 141px; --space-10: 52px; --space-9: 38px; }
  .site-header .main-nav { height: 84px; }
  .site-logo img { width: 150px; }
  .site-header .main-nav ul#primary-menu { width: 100%; }
  .nav-toggle { width: 48px; height: 48px; }

  .page-hero { padding: 36px 0 44px; }
  .page-hero .lede { font-size: 18.5px; }
  .btn { width: 100%; }
  .btn.auto-width { width: 100%; }
  .guide-row .btn.auto-width { width: auto; }
  .home-hero .hero-actions, .page-hero .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-link { justify-content: center; }
  .stats-row ul { grid-template-columns: 1fr; }
  .stats-row li { border-right: none; border-bottom: 1px solid var(--border); }
  .stats-row li:last-child { border-bottom: none; }
  .about-images { grid-template-columns: 1fr; grid-template-rows: 200px; }
  .about-images .media.two, .about-images .media.three { display: none; }
  .cta-band .cta-phone .phone-num { font-size: 25.5px; }
  .cta-band .cta-actions { padding: var(--space-4); }
  .team-grid { grid-template-columns: 1fr; }
  .team-card .media { height: 300px; }
  .content-area blockquote { padding: var(--space-4); font-size: 18px; }
  .content-area ul li, .content-area ol li { font-size: var(--fs-body); }
  .timeline li { padding: var(--space-4) 0; }
  .project-item { padding: var(--space-4); }
  .project-item .media { height: 200px; }
  .blog-card .media, .service-card .media { height: 170px; }
  .float-stat { width: 100%; }
  .site-footer .footer-logo img { width: 150px; }
  .site-footer .footer-desc { max-width: none; }
  .map-embed { height: 260px; }
  .to-top { right: 12px; bottom: 12px; }
}

/* -------------------------------- 360 ----------------------------------- */
@media (max-width: 360px) {
  :root { --gutter: 14px; }
  .site-header .topbar-list a,
  .site-header .topbar-social a { width: 34px; height: 34px; min-height: 34px; }
  .site-header .topbar-social a:last-child { display: none; }
  .site-logo img { width: 134px; }
  .stats-row .stat-num { font-size: 34.5px; }
  .hero-collage { grid-template-rows: 190px; }
}