/* Commercial Pavement Group — mobile-first responsive overrides */

/* Large tablet and below: 1024px */
@media (max-width: 64rem) {
  :root { --space-8: 5rem; }
  .utility-bar { display: none; }
  .site-header__inner { min-height: 4.75rem; }
  .js .nav-toggle { display: block; position: relative; z-index: 2; }
  .nav-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-of-type(3) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
  .primary-nav { align-items: stretch; background: var(--color-white); border-top: 1px solid var(--color-light-gray); box-shadow: var(--shadow-lg); flex-direction: column; gap: 0; left: 0; max-height: calc(100vh - 4.75rem); overflow-y: auto; padding: var(--space-3) var(--gutter) var(--space-5); position: absolute; right: 0; top: 100%; }
  .js .primary-nav { display: none; }
  .primary-nav.is-open { display: flex; }
  .primary-nav__list { align-items: stretch; flex-direction: column; gap: 0; }
  .primary-nav__list > li { border-bottom: 1px solid var(--color-light-gray); }
  .primary-nav__list > li > a, .nav-dropdown__toggle { padding: 1rem 0; width: 100%; }
  .primary-nav__list > li > a::after, .nav-dropdown__toggle::after { bottom: .6rem; width: 2rem; }
  .nav-dropdown__toggle { text-align: left; }
  .nav-dropdown__toggle::before { right: .25rem; top: 1.25rem; }
  .nav-dropdown__menu { border: 0; box-shadow: none; gap: var(--space-4); grid-template-columns: 1fr 1fr; min-width: 0; opacity: 1; padding: 0 0 var(--space-4); pointer-events: auto; position: static; transform: none; transition: none; visibility: visible; }
  .js .nav-dropdown__menu { display: none; }
  .nav-dropdown.is-open .nav-dropdown__menu { display: grid; }
  .primary-nav__cta { margin-top: var(--space-4); }
  .site-footer__grid { grid-template-columns: 1.5fr repeat(2, 1fr); }
  .site-footer__grid > :last-child { grid-column: 2; }
}

/* Tablet and below: 768px */
@media (max-width: 48rem) {
  :root { --space-7: 3.5rem; --space-8: 4rem; }
  .section-heading, .two-column, .foundation-hero__grid, .component-row { grid-template-columns: 1fr; }
  .section-heading { align-items: start; }
  .card-grid--3 { grid-template-columns: 1fr 1fr; }
  .service-card:last-child { grid-column: 1 / -1; }
  .foundation-hero__panel { border-left: 0; border-top: 1px solid rgba(255,255,255,.28); grid-template-columns: 1fr 1fr; padding: var(--space-5) 0 0; }
  .foundation-hero__line { height: 3px; left: 0; top: -2px; width: 5rem; }
  .cta-band__inner { align-items: flex-start; flex-direction: column; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__grid > :last-child { grid-column: auto; }
  .site-footer__bottom { flex-direction: column; gap: .5rem; }
}

/* Mobile: 640px */
@media (max-width: 40rem) {
  :root { --gutter: 1rem; }
  .brand { max-width: 12rem; }
  .brand__mark { flex-basis: 2.65rem; height: 2.25rem; }
  .brand__name { font-size: .7rem; }
  .brand__name strong { font-size: .86rem; }
  .nav-dropdown__menu { grid-template-columns: 1fr; }
  .nav-dropdown__menu .nav-dropdown__all { grid-column: auto; }
  .card-grid--3 { grid-template-columns: 1fr; }
  .service-card:last-child { grid-column: auto; }
  .service-card { min-height: 0; }
  .foundation-hero { padding-block: 4.5rem; }
  .foundation-hero__panel { grid-template-columns: 1fr; }
  .button-group { align-items: stretch; flex-direction: column; }
  .button-group .button { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field--full { grid-column: auto; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__brand, .site-footer__grid > :last-child { grid-column: auto; }
  .site-footer__grid > div:not(.site-footer__brand) { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: var(--space-4); }
  .site-footer address a { white-space: normal; }
}

/* Services responsive composition */
@media (max-width: 64rem) {
  .service-nav-menu { min-width: 0; right: auto; }
  .service-nav-menu > div { grid-template-columns: 1fr 1fr; }
  .service-hero { grid-template-columns: 1fr 1fr; }
  .service-hero__content { padding: var(--space-6) var(--gutter); }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-card:nth-child(2) { border-right: 1px solid var(--color-light-gray); }
  .benefit-card:nth-child(n+3) { border-top: 0; }
  .overview-service-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 48rem) {
  .service-hero, .overview-hero__grid, .service-story__grid, .la-focus__grid, .safety-feature__grid, .service-proof, .service-area-overview { grid-template-columns: 1fr; }
  .service-hero__media { min-height: 24rem; order: -1; }
  .service-hero__media::after { background: linear-gradient(0deg, var(--color-navy), transparent 35%); }
  .service-hero__content { justify-content: flex-start; }
  .service-hero__content > div { max-width: none; }
  .benefit-card { min-height: 15rem; }
  .related-grid { grid-template-columns: 1fr; }
  .overview-hero__grid { padding-right: var(--gutter); }
  .overview-hero__grid > div:first-child { padding-right: 0; }
  .overview-hero__visual { min-height: 24rem; }
  .overview-hero__visual::after { background: linear-gradient(0deg, var(--color-navy), transparent 35%); }
  .service-area-overview img { max-height: 28rem; }
}

@media (max-width: 40rem) {
  .service-nav-menu > div, .benefit-grid, .overview-service-grid { grid-template-columns: 1fr; }
  .service-hero__media, .overview-hero__visual { min-height: 19rem; }
  .service-hero h1 { font-size: clamp(2.25rem, 11vw, 3.2rem); }
  .service-detail-page :is(h1, h2, h3), .services-overview-page :is(h1, h2, h3) { overflow-wrap: anywhere; }
  .benefit-card, .benefit-card:nth-child(2), .benefit-card:last-child { border: 1px solid var(--color-light-gray); border-bottom: 0; }
  .benefit-card:last-child { border-bottom: 1px solid var(--color-light-gray); }
  .breadcrumb-bar ol { font-size: .72rem; }
}

/* Wide screens: 1440px+ */
@media (min-width: 90rem) {
  :root { --container: 82rem; }
}

/* Very wide screens: 1920px+ */
@media (min-width: 120rem) {
  :root { --container: 88rem; }
}

/* Homepage responsive composition */
@media (max-width: 64rem) {
  .home-page .site-header { top: 0; }
  .home-hero { min-height: 44rem; }
  .home-hero__content { min-height: 38rem; }
  .home-hero__rail { grid-template-columns: 1fr 1fr; }
  .home-hero__rail > div:nth-child(2) { border-right: 0; }
  .home-hero__rail > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.16); }
  .value-grid, .property-grid { grid-template-columns: 1fr 1fr; }
  .value-item:nth-child(2), .property-card:nth-child(2) { border-right: 1px solid rgba(255,255,255,.15); }
  .value-item:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.15); }
  .property-card { min-height: 20rem; }
  .property-card:nth-child(2) { border-right-color: var(--color-light-gray); }
  .property-card:nth-child(n+3) { border-top: 0; }
  .featured-project { grid-template-columns: 1.1fr .9fr; }
  .home-services-grid { grid-template-columns: 1fr 1fr; }
  .home-service-card:nth-child(n) { border-bottom: 0; border-right: 0; }
  .home-service-card:nth-child(2n) { border-right: 1px solid var(--color-light-gray); }
  .home-service-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--color-light-gray); }
  .home-service-card--wide { grid-column: span 2; }
}

@media (max-width: 48rem) {
  .brand--image { max-width: 11rem; }
  .home-hero { min-height: 0; }
  .home-hero__image { object-position: 64% center; }
  .home-hero__overlay { background: linear-gradient(90deg, rgba(7,20,30,.94), rgba(7,20,30,.58)), linear-gradient(0deg, rgba(7,20,30,.9), transparent); }
  .home-hero__content { min-height: 34rem; }
  .split-intro, .trust-layout, .final-cta__inner { grid-template-columns: 1fr; }
  .featured-project, .service-area { grid-template-columns: 1fr; }
  .featured-project__media, .service-area__media { min-height: 24rem; }
  .featured-project__media::after { background: linear-gradient(0deg, var(--color-charcoal), transparent 35%); }
  .featured-project__content { max-width: none; padding: var(--space-6) var(--gutter); }
  .service-area__media { order: -1; }
  .service-area__content { justify-content: flex-start; padding: var(--space-6) var(--gutter); }
  .project-placeholder-grid { grid-template-columns: 1fr; }
  .final-cta__inner > .button-group { justify-content: flex-start; }
}

@media (max-width: 40rem) {
  .home-hero__content { min-height: 36rem; }
  .home-hero__content h1 { max-width: 14ch; }
  .home-hero__rail { grid-template-columns: 1fr; }
  .home-hero__rail > div, .home-hero__rail > div:first-child { border-left: 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.16); padding-inline: var(--gutter); }
  .value-grid, .property-grid, .home-services-grid { grid-template-columns: 1fr; }
  .value-item, .value-item:first-child { border-left: 1px solid rgba(255,255,255,.15); border-right: 1px solid rgba(255,255,255,.15); }
  .value-item + .value-item { border-top: 1px solid rgba(255,255,255,.15); }
  .property-card, .property-card:nth-child(2), .property-card:last-child { border: 1px solid var(--color-light-gray); border-bottom: 0; min-height: 17rem; }
  .property-card:last-child { border-bottom: 1px solid var(--color-light-gray); }
  .home-service-card:nth-child(n), .home-service-card:nth-child(2n) { border: 1px solid var(--color-light-gray); border-bottom: 0; min-height: 19rem; }
  .home-service-card:last-child { border-bottom: 1px solid var(--color-light-gray); }
  .home-service-card--wide { grid-column: auto; }
  .featured-project__media, .service-area__media { min-height: 20rem; }
  .testimonial-placeholder { padding: var(--space-5); }
}

/* About responsive composition */
@media (max-width: 64rem) {
  .about-value-grid { grid-template-columns: repeat(2, 1fr); }
  .about-value-grid article:nth-child(2n) { border-right: 1px solid rgba(255,255,255,.15); }
  .about-value-grid article:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.15); }
  .about-value-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 48rem) {
  .about-hero { min-height: 34rem; }
  .about-hero__image { object-position: 62% center; }
  .about-hero__overlay { background: linear-gradient(90deg, rgba(7,20,30,.95), rgba(7,20,30,.55)), linear-gradient(0deg, rgba(7,20,30,.86), transparent); }
  .about-hero__content { min-height: 34rem; }
  .about-intro, .commercial-focus__grid, .about-story, .trust-credentials { grid-template-columns: 1fr; }
  .commercial-focus__points article { grid-template-columns: 2rem 1fr; }
  .commercial-focus__points article p { grid-column: 2; }
  .about-capability-grid { grid-template-columns: 1fr 1fr; }
  .about-capability-grid a:not(:nth-child(3n)) { border-right: 0; }
  .about-capability-grid a:nth-child(odd) { border-right: 1px solid var(--color-light-gray); }
  .about-story__media { min-height: 27rem; }
  .about-story__media::after { background: linear-gradient(0deg, var(--color-navy), transparent 35%); }
  .about-story__content { padding: var(--space-6) var(--gutter); }
}

@media (max-width: 40rem) {
  .about-page :is(h1, h2, h3), .about-capability-grid a { overflow-wrap: anywhere; }
  .about-hero .media-disclosure { left: var(--gutter); right: auto; }
  .about-value-grid, .about-capability-grid { grid-template-columns: 1fr; }
  .about-value-grid article, .about-value-grid article:first-child, .about-value-grid article:nth-child(2n), .about-value-grid article:last-child { border: 1px solid rgba(255,255,255,.15); border-bottom: 0; grid-column: auto; }
  .about-value-grid article:last-child { border-bottom: 1px solid rgba(255,255,255,.15); }
  .about-capability-grid a:nth-child(odd) { border-right: 0; }
  .about-story__media { min-height: 22rem; }
}

/* Blog responsive composition */
@media (max-width: 64rem) {
  .blog-card-grid { grid-template-columns: 1fr 1fr; }
  .blog-category-list { grid-template-columns: repeat(3,1fr); }
  .article-layout { grid-template-columns: minmax(0,1fr) 15rem; }
}

@media (max-width: 48rem) {
  .blog-tools, .featured-article, .article-layout { grid-template-columns: 1fr; }
  .featured-article__media { min-height: 25rem; }
  .featured-article__media::after { background: linear-gradient(0deg,var(--color-charcoal),transparent 35%); }
  .featured-article__content { padding: var(--space-6) var(--gutter); }
  .blog-category-list { grid-template-columns: 1fr 1fr; }
  .recent-list a { grid-template-columns: 5rem 1fr; }
  .recent-list i { grid-column: 2; }
  .article-figure img { aspect-ratio: 16/10; }
  .article-sidebar { position: static; }
  .related-services, .related-posts { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .blog-page :is(h1,h2,h3), .article-page :is(h1,h2,h3) { overflow-wrap: anywhere; }
  .blog-card-grid, .blog-category-list { grid-template-columns: 1fr; }
  .category-nav { align-items: stretch; display: grid; grid-template-columns: 1fr 1fr; }
  .category-nav button { border-radius: var(--radius-sm); }
  .featured-article__media { min-height: 20rem; }
  .article-figure img { aspect-ratio: 4/3; }
  .article-figure figcaption { left: var(--gutter); }
  .key-takeaways { padding: var(--space-5); }
}

/* Contact responsive composition */
@media (max-width: 64rem) {
  .contact-market-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 48rem) {
  .contact-hero { min-height: 34rem; }
  .contact-hero__image { object-position: 62% center; }
  .contact-hero__overlay { background: linear-gradient(90deg,rgba(7,20,30,.95),rgba(7,20,30,.55)),linear-gradient(0deg,rgba(7,20,30,.82),transparent); }
  .contact-hero__content { min-height: 34rem; }
  .contact-intro, .contact-form-layout, .contact-area { grid-template-columns: 1fr; }
  .project-request-guide { position: static; }
  .contact-services-grid { grid-template-columns: 1fr 1fr; }
  .contact-services-grid a:not(:nth-child(3n)) { border-right: 0; }
  .contact-services-grid a:nth-child(odd) { border-right: 1px solid var(--color-light-gray); }
  .contact-market-grid { grid-template-columns: 1fr 1fr; }
  .contact-area img { max-height: 26rem; }
}

@media (max-width: 40rem) {
  .contact-page :is(h1,h2,h3), .contact-services-grid a { overflow-wrap: anywhere; }
  .contact-hero .media-disclosure { left: var(--gutter); right: auto; }
  .contact-details div { grid-template-columns: 1fr; }
  .contact-services-grid, .contact-market-grid { grid-template-columns: 1fr; }
  .contact-services-grid a:nth-child(odd) { border-right: 0; }
  .commercial-inquiry-form { padding: var(--space-4); }
}