/* Compact desktop structure for full-width tablets. Phone and desktop rules stay intact. */
@media (min-width: 744px) and (max-width: 1180px) {
  .header {
    height: clamp(80px, 8vw, 96px);
    padding: 0 clamp(16px, 2.2vw, 26px);
    flex-wrap: nowrap;
    gap: 18px;
  }
  .header .logo { flex: 0 0 auto; }
  .header .logo img { width: clamp(150px, 18vw, 212px); }
  .header .menu-toggle { display: none; }
  .header .nav, .header .nav.open {
    display: flex;
    width: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(8px, 1.2vw, 16px);
    padding: 0;
    border: 0;
    max-height: none;
    overflow: visible;
    font-size: clamp(10px, 1vw, 12px);
    letter-spacing: .035em;
  }
  .header .nav a {
    width: auto;
    padding: 26px 0;
    white-space: nowrap;
    overflow-wrap: normal;
  }
  .header .nav a::after { bottom: 17px; }
  body.menu-open { overflow-y: auto; }

  .section, .content-section, .detail-section,
  .tip-section, .grab-section, .muck-section, .agg-section,
  .sweeper-section, .plant-section, .social-section,
  .about-story-section, .about-history-section, .contact-page-section {
    padding: 56px clamp(22px, 3vw, 36px);
  }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
  .cards .card { height: clamp(240px, 26vw, 308px) !important; aspect-ratio: auto; }
  .cards .card-content { left: 18px; right: 18px; bottom: 22px; }
  .cards .card h3 { font-size: clamp(20px, 2.25vw, 27px); line-height: 1.08; }
  .cards .card p { font-size: 14px; line-height: 1.4; }
  .about { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 30px; }
  .about-photo { height: clamp(330px, 36vw, 430px); }
  .two-col, .detail-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .benefit-grid, .gallery-full, .gallery-lightbox-grid, .service-gallery,
  .social-page-grid, .contact-grid, .about-services-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  }
  .about-history-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .social-grid, .trust-badges-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid a { height: clamp(130px, 16vw, 165px); }
  .image-panel, .detail-image { height: auto; min-height: 310px; }
  .contact-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.4fr); gap: 18px; }
  .contact-item { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; border-right: 1px solid rgba(255,255,255,.17); border-bottom: 0; padding-bottom: 0; }
  .contact-item:last-child { border-right: 0; }
  .contact-icon { width: 40px; height: 40px; font-size: 19px; }
  .contact-item strong { font-size: 14px; }
  .contact-item span { font-size: 13px; }
  .contact-strip { padding: 30px 22px; }
  .footer { flex-direction: row; gap: 18px; padding: 18px 22px; }

  /* Preserve the desktop hero structure, including at 744–767px. */
  .hero { min-height: 560px !important; height: auto !important; }
  .hero-content { padding: 58px 60px !important; width: min(760px, 94vw); }
  .hero-logo { width: min(530px, 64vw); max-width: none !important; margin-bottom: 24px; }
  .hero-tag { font-size: 19px !important; line-height: 1.48 !important; }
  .hero-arrow { width: 46px !important; height: 46px !important; }
  .hero-arrow.prev { left: 8px !important; }
  .hero-arrow.next { right: 8px !important; }
  .hero-slide-caption { display: block !important; }
  .hero-slide img { object-position: var(--slide-position, center 55%) !important; }
  .hero-contact-btn { display: inline-flex; margin: 0 0 0 14px; width: auto; }
  .page-hero { min-height: 340px !important; height: auto !important; }
  .page-hero-content, .page-hero .hero-inner, .page-hero > div { padding-left: 30px !important; padding-right: 30px !important; }
  .page-hero h1 { font-size: clamp(46px, 6vw, 72px) !important; line-height: 1.02 !important; }
  .page-hero p { font-size: 18px !important; line-height: 1.5 !important; max-width: 760px !important; }
  .service-page-hero .content { padding-bottom: 54px; }

  /* Individual service templates have their own 1050/1180px stacking rules. */
  .tip-intro, .grab-intro, .muck-intro, .agg-intro {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 22px;
  }
  .tip-split, .grab-split, .muck-split, .agg-bulk, .plant-intro, .social-intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px;
  }
  .equipment-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; }
  .clubs-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .tip-card-grid, .grab-card-grid, .muck-card-grid, .agg-feature-strip,
  .tip-gallery, .grab-gallery, .agg-gallery, .grab-badges, .use-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  }
  .muck-gallery { grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); gap: 12px; }
  .agg-product-grid, .equipment-grid, .initiative-grid, .impact-grid, .club-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  }
  .tip-intro__copy, .grab-intro__copy, .muck-intro__copy, .agg-intro__copy,
  .plant-copy, .equipment-panel, .support-panel { padding: 28px 24px; }
  .tip-card, .grab-card, .muck-card, .agg-feature, .agg-product-card,
  .use-card, .tip-split__panel, .grab-split__panel, .muck-split__panel, .agg-bulk__panel {
    padding: 26px 20px;
  }
  .tip-card h3, .grab-card h3, .muck-card h3, .use-card h3 { font-size: clamp(20px, 2.15vw, 25px); overflow-wrap: break-word; }
  .tip-split__panel h2, .grab-split__panel h2, .muck-split__panel h2, .agg-bulk__panel h2 { font-size: clamp(28px, 3.2vw, 38px); }
  .plant-heading { font-size: clamp(29px, 3.4vw, 40px); }
  .tip-intro__image, .grab-intro__image, .muck-intro__image, .agg-intro__image {
    min-height: 360px; height: auto;
  }
  .tip-split__image, .grab-split__image, .muck-split__image, .agg-bulk__image { height: clamp(330px, 36vw, 410px); }
  .plant-image, .social-image { min-height: 380px; }
  .equipment-photo { height: clamp(430px, 46vw, 550px); }
  .tip-gallery picture, .grab-gallery picture, .agg-gallery picture { height: clamp(190px, 24vw, 285px); }
  .grab-badge { padding: 20px 16px; }
  .equipment-item { gap: 8px; padding: 13px 10px; font-size: 13px; }
  .club-item { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 14px 12px; font-size: 14px; }
  .club-item picture, .club-item .club-logo { width: 36px; height: 36px; }
  .support-panel { margin-top: 0; }

  .services-emergency { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 20px; }
  .service-list, .topsoil-main .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .service-pill { padding: 14px 12px; gap: 9px; font-size: 14px; }
  .emergency-panel { padding: 26px 22px; }
  .emergency-title { gap: 14px; }
  .emergency-title .clock { width: 58px; height: 58px; flex-basis: 58px; font-size: 21px; }
  .emergency-panel h2 { font-size: clamp(21px, 2.4vw, 29px); }
  .why-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px); }
  .why-card { padding: 24px clamp(5px, calc(4vw - 25px), 20px); }
  .why-card h3 { font-size: clamp(14px, 1.45vw, 18px); }
  .why-card .why-icon { width: 54px; height: 54px; }
  .feature-svg-icon { width: 66px; height: 66px; margin-bottom: 18px; }
  .feature-svg-icon svg { width: 50px; height: 50px; }
  .feature-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
  .environment-card { grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); }
  .environment-card img { height: 100%; }
  .environment-copy, .backblack-copy { padding: 24px 20px; }
  .environment-copy h2, .backblack-copy h2 { font-size: clamp(18px, 2.1vw, 25px); overflow-wrap: break-word; }
  .environment-copy h2 { font-size: clamp(16px, 1.9vw, 22px); }
  .backblack-shot span { left: 4px; bottom: 4px; padding: 4px; font-size: 9px; }
  .backblack-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .safety-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; padding: 22px; }
  .safety-symbol { width: 58px; height: 58px; }
  .safety-card h2 { font-size: 23px; }
  .aed-badge { grid-column: auto; padding: 10px; }
  .topsoil-main .sweeper-hero { min-height: 560px !important; }
  .topsoil-main .sweeper-hero__inner { width: calc(100% - 60px); padding: 0 !important; }
  .topsoil-main .sweeper-hero h1 { font-size: clamp(48px, 6vw, 72px) !important; line-height: .98 !important; }
  .topsoil-main .sweeper-hero p { font-size: 20px !important; }

  .service-cta .detail-inner, .tip-cta__inner, .grab-cta__inner, .muck-cta__inner,
  .agg-cta__inner, .sweeper-cta__inner, .plant-cta__inner, .social-cta__inner {
    flex-direction: row; align-items: center; gap: 22px;
  }
  .service-cta .gold-btn, .tip-cta .gold-btn, .grab-cta .gold-btn, .muck-cta .gold-btn,
  .agg-cta .gold-btn, .sweeper-cta .gold-btn, .plant-cta .gold-btn, .social-cta .gold-btn {
    flex-shrink: 0; padding: 16px 22px;
  }
  .tip-cta h2, .grab-cta h2, .muck-cta h2, .agg-cta h2,
  .sweeper-cta h2, .plant-cta h2, .social-cta h2 { font-size: clamp(27px, 3vw, 36px); }
  .plant-cta, .social-cta, .sweeper-cta { padding: 42px 30px; }
  .plant-areas { margin: 38px 30px; }

  .contact-hours-grid, .contact-card-grid, .jj-contact-form-grid, .enquiry-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .contact-hours-card, .contact-card { padding: 26px 24px; }
  .contact-card { padding-right: 50px; }
  .contact-card-value { font-size: clamp(20px, 2.1vw, 24px); }
  .contact-card[href^="mailto:"] .contact-card-value { font-size: clamp(17px, 1.8vw, 22px); }
  .contact-card.location-card { grid-column: 1 / -1; }
  .jj-contact-form-field.jj-contact-form-message-field, .form-field.full, .form-actions { grid-column: 1 / -1; }
  .jj-contact-form-button { width: auto; justify-content: initial; }
}