/* Phone and tablet presentation; desktop styles remain in styles.css. */
@media (max-width: 860px) {
  :root {scroll-padding-top: 96px;}
  section[id], article[id] {scroll-margin-top: 96px;}
  .header-inner {min-height: 78px;}
  .brand {align-items: center;}
  .brand img {width: 138px;}
  .menu-toggle {width: auto; min-width: 92px; height: 44px; padding: 10px 14px; gap: 12px;}
  .menu-toggle > span:first-child {display: block;}
  .menu-toggle[aria-expanded="true"] {background: var(--soft); border-color: #a2b0b5;}
  .menu-toggle[aria-expanded="true"] .menu-lines {border-color: transparent;}
  .menu-toggle[aria-expanded="true"] .menu-lines::before,
  .menu-toggle[aria-expanded="true"] .menu-lines::after {content: ''; position: absolute; top: 4px; left: 0; width: 18px; height: 1.5px; background: currentColor; transform: rotate(45deg);}
  .menu-toggle[aria-expanded="true"] .menu-lines::after {transform: rotate(-45deg);}
  .site-header nav {padding: 8px 22px 22px; max-height: calc(100vh - 100px); max-height: calc(100svh - 100px); overflow-y: auto; overscroll-behavior: contain;}
  .site-header nav > a {min-height: 52px; padding: 15px 0; border-bottom: 1px solid var(--line);}
  .site-header nav > a[aria-current="page"] {color: var(--gold-dark);}
  .site-header nav > a[aria-current="page"]::after {display: none;}
  .site-header nav > .nav-contact {margin-top: 16px; border: 0;}
  .site-footer nav > a {display: inline-flex; align-items: center; min-height: 44px;}
}

@media (max-width: 600px) {
  .container {width: calc(100% - 40px);}
  .section {padding: 52px 0;}
  p {line-height: 1.7;}
  h1, h2, h3 {overflow-wrap: break-word;}
  h2 {font-size: clamp(1.75rem, 6.5vw, 2.125rem); line-height: 1.22;}
  .eyebrow {font-size: .8125rem; letter-spacing: .08em; margin-bottom: 14px;}
  .lead {font-size: 1.0625rem; line-height: 1.7;}
  .text-link {min-height: 44px; max-width: 100%; font-size: .9375rem; gap: 16px;}
  .utility-inner {min-height: 34px; padding: 5px 0; gap: 5px 12px; flex-wrap: wrap;}
  .utility-inner > a {font-size: .8125rem; letter-spacing: -.015em; line-height: 1.7;}
  .header-inner {gap: 16px; min-height: 76px;}
  .site-header nav {padding-inline: 20px;}

  /* Show the site work early, with the same content and authentic photograph. */
  .hero-grid {grid-template-columns: minmax(0, 1fr); padding-top: 30px; padding-bottom: 28px;}
  .hero-copy {display: contents;}
  .hero .eyebrow {grid-row: 1; margin: 0 0 14px; font-size: .75rem; letter-spacing: .075em;}
  .hero h1 {grid-row: 2; font-size: clamp(2rem, 9vw, 2.875rem); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 24px;}
  .hero-media {grid-row: 3; margin: 0; align-self: auto;}
  .hero-media img {width: 100%; height: auto; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;}
  .hero-media figcaption {display: flex; flex-direction: column; gap: 3px; padding: 12px 15px;}
  .hero-media figcaption > span:first-child {font-size: .75rem; letter-spacing: .08em;}
  .hero-media figcaption > span:last-child {font-size: .875rem; letter-spacing: 0;}
  .hero-lead {grid-row: 4; max-width: none; margin: 22px 0 0; font-size: 1rem; line-height: 1.7;}
  .hero-actions {grid-row: 5; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 22px 0 0;}
  .hero .hero-actions > a {width: 100%; justify-content: space-between; font-size: 1rem; padding: 14px 18px; min-height: 52px;}
  .hero-actions > .text-link {border: 1px solid #72868d;}
  .hero-note {grid-row: 6; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 24px; padding-top: 17px; font-size: .75rem; letter-spacing: .055em;}
  .hero-note > span + span {margin-top: 0;}

  .page-intro {padding: 22px 0 36px;}
  .breadcrumb {font-size: .8125rem; gap: 9px; margin-bottom: 28px;}
  .page-intro-grid {gap: 18px;}
  .page-intro .eyebrow {margin-bottom: 13px;}
  .page-intro h1 {font-size: clamp(2.125rem, 8.5vw, 2.75rem); line-height: 1.12; letter-spacing: -.025em;}
  .page-intro-grid .lead {font-size: 1rem; line-height: 1.7;}
  .project-intro {padding-bottom: 30px;}
  .intro-grid, .story-grid, .equipment-grid, .equipment-summary, .team-grid {gap: 24px;}
  .section-heading {margin-bottom: 28px;}
  .section-heading > .text-link {margin-top: 12px;}
  .section-heading > p {margin-top: 14px; font-size: 1rem;}
  .intro-copy .text-link {margin-top: 16px;}
  .prose > p + p, .intro-copy > p + p {margin-top: 16px;}

  /* Consistent two-column logo presentation at every phone width. */
  .client-strip {padding: 32px 0;}
  .client-strip-heading {margin-bottom: 22px;}
  .client-strip-heading h2 {font-size: 1.5rem; line-height: 1.3; max-width: 22ch;}
  .client-strip-heading .text-link {font-size: .875rem; margin-top: 10px; gap: 14px;}
  .home-client-logos {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .home-client-logos .client-brand {border: 1px solid var(--line); padding: 12px 10px;}
  .home-client-logos .client-brand:last-child:nth-child(odd) {grid-column: 1 / -1; width: calc((100% - 12px) / 2); justify-self: center;}
  .home-client-logos .client-logo-frame {height: 76px; padding: 4px;}
  .home-client-logos .client-logo-frame img {max-width: 100%; max-height: 68px; object-fit: contain;}
  .home-client-logos figcaption {min-height: 42px; display: flex; justify-content: center; align-items: center; font-size: .875rem; line-height: 1.5; margin-top: 8px;}
  .company-client-logos {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
  .company-client-logos .client-brand {padding: 12px 10px;}
  .company-client-logos .client-logo-frame {height: 82px; padding: 5px;}
  .company-client-logos .client-logo-frame img {max-height: 72px; max-width: 100%; object-fit: contain;}
  .company-client-logos .brand-emami .client-logo-frame img {max-height: none; max-width: 180%; width: 300px; height: auto;}
  .company-client-logos figcaption {min-height: 44px; font-size: .875rem; line-height: 1.5; margin-top: 8px;}
  .client-directory {margin-top: 30px; padding-top: 26px;}
  .client-directory h3 {font-size: 1.25rem; line-height: 1.4;}
  .client-name-list {grid-template-columns: minmax(0, 1fr); margin-top: 18px; gap: 0;}
  .client-name-list li {font-size: 1rem; line-height: 1.55; padding: 12px 0; color: var(--ink);}

  .capability-overview {gap: 24px;}
  .capability-overview article {display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-top: 22px;}
  .capability-overview .index {padding-top: 4px;}
  .capability-overview h3 {grid-column: 2; min-height: 0; margin: 0; font-size: 1.3rem; line-height: 1.35; text-wrap: pretty;}
  .capability-overview p {grid-column: 1 / -1; font-size: 1rem;}
  .featured-projects {gap: 16px;}
  .feature-project {padding: 22px; min-height: 0;}
  .feature-project h3 {font-size: 1.6rem; line-height: 1.28; margin: 17px 0 22px;}
  .feature-project > div {font-size: .875rem; padding-top: 14px; align-items: center;}
  .equipment-band, .team-section {padding: 44px 0;}
  .equipment-summary p:not(.eyebrow) {font-size: 1rem;}
  .service-detail {display: block; padding: 26px 0;}
  .service-detail > .index {padding: 0; margin-bottom: 12px;}
  .service-detail > div {grid-template-columns: minmax(0, 1fr); gap: 12px;}
  .service-detail h3 {font-size: 1.35rem; line-height: 1.35;}
  .service-detail p {font-size: 1rem;}
  .service-tags {font-size: .75rem; letter-spacing: .025em; line-height: 1.8;}
  .equipment-grid .lead {margin-top: 20px;}
  .fleet-list > div {grid-template-columns: 24px minmax(0, 1fr); gap: 6px 14px; padding: 21px 0;}
  .fleet-list h3 {font-size: 1.125rem;}
  .principles {gap: 24px;}
  .principles h3 {font-size: 1.25rem; margin-bottom: 12px;}

  .project-panorama img {aspect-ratio: 16 / 9; object-position: center;}
  .project-panorama figcaption {padding: 12px 15px; font-size: .875rem;}
  .project-detail {grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 26px 0;}
  .project-number {grid-column: 1; grid-row: 1; padding: 0; font-size: .8125rem; line-height: 1.5;}
  .project-description {display: contents;}
  .project-description > .project-sector {grid-column: 2; grid-row: 1; font-size: .75rem;}
  .project-detail h2 {grid-column: 1 / -1; margin: 0; font-size: 1.5rem; line-height: 1.28; text-wrap: pretty;}
  .project-description > p {grid-column: 1 / -1; margin: 0; font-size: 1rem;}
  .project-location {grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px; padding-top: 3px;}
  .project-location p {font-size: .9375rem; margin: 0;}

  /* Retain the table content and semantics, with no horizontal scrolling. */
  .table-scroll {overflow: visible; padding: 0;}
  .project-table {display: block; min-width: 0; width: 100%;}
  .project-table thead {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
  .project-table tbody {display: grid; gap: 14px;}
  .project-table tbody tr {display: block; padding: 20px; background: white; border: 1px solid var(--line);}
  .project-table tbody th {display: block; width: auto; border: 0; padding: 0 0 14px; font-size: 1.125rem; line-height: 1.4; color: var(--ink);}
  .project-table tbody td {display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 10px; border: 0; padding: 7px 0 0; font-size: 1rem; line-height: 1.55;}
  .project-table .mobile-cell-label {display: block; font-size: .8125rem; padding-top: 2px; color: var(--text);}

  .contact {padding: 44px 0;}
  .contact h2 {font-size: 2rem;}
  .contact-layout {gap: 28px;}
  .contact-layout > div:first-child > p:not(.eyebrow) {margin-top: 16px; font-size: 1rem;}
  .contact-details > a {grid-template-columns: minmax(0, 1fr) 22px; gap: 5px 12px; min-height: 78px; padding: 18px 0;}
  .contact-details > a:first-child {padding-top: 0; min-height: 68px;}
  .contact-details > a > span, .office > span {font-size: .875rem; letter-spacing: .025em;}
  .contact-details strong {font-size: clamp(1rem, 4.7vw, 1.25rem); line-height: 1.5; letter-spacing: -.02em;}
  .contact-details > a[href^="tel:"] strong {font-size: 1.25rem;}
  .email-options {margin: 0; font-size: .875rem;}
  .email-options a {display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0;}
  .office {padding-top: 22px;}
  .office address {font-size: 1rem; line-height: 1.7; margin-top: 8px;}
  .site-footer {padding: 28px 0 22px;}
  .footer-top {gap: 18px;}
  .site-footer nav {display: grid; grid-template-columns: auto auto; gap: 0 20px; width: 100%; font-size: .875rem;}
  .footer-bottom {margin-top: 22px; padding-top: 18px; gap: 8px; font-size: .75rem;}
}

@media (max-width: 360px) {
  .container {width: calc(100% - 32px);}
  .utility-inner > a {font-size: .75rem;}
  .hero-note {justify-content: flex-start;}
  .project-table tbody tr {padding: 16px;}
  .project-table tbody td {grid-template-columns: minmax(0, 1fr); gap: 2px; padding-top: 10px;}
  .project-table .mobile-cell-label {padding: 0;}
}