@media(max-width:1050px) {
  .nav-desktop>a:nth-of-type(3), .nav-desktop>a:nth-of-type(4) {
    display:none
  }
  .mega-menu {
    grid-template-columns:1fr 1fr
  }
  .mega-preview {
    display:none
  }
  .intro {
    grid-template-columns:1fr;
    gap:25px
  }
  .subcopy {
    margin-left:0
  }
  .service-row {
    grid-template-columns:55px 1fr 180px 45px
  }
  .locations-layout, .contact-grid, .quote-wrap {
    grid-template-columns:1fr
  }
  .quote-intro {
    max-width:650px
  }
  .portfolio-masonry {
    grid-template-columns:1fr
  }
  .portfolio-card.wide {
    grid-column:auto
  }
  .infra-scroll {
    grid-template-columns:1fr 1fr
  }
  footer {
    grid-template-columns:1fr 1fr
  }
}
@media(max-width:720px) {
  .site-header {
    top:10px
  }
  .nav-shell {
    min-height:62px;
    padding:9px 14px 9px 18px
  }
  .nav-desktop {
    display:none
  }
  .mobile-menu {
    display:flex;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:#111;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px
  }
  .mobile-menu span {
    width:15px;
    height:1px;
    background:#fff
  }
  .mobile-nav {
    position:absolute;
    top:72px;
    left:0;
    right:0;
    padding:25px;
    background:#fff;
    border-radius:25px;
    box-shadow:0 25px 60px #0002;
    display:none;
    flex-direction:column;
    gap:20px;
    font-weight:800
  }
  .mobile-nav.open {
    display:flex
  }
  .hero {
    min-height:620px
  }
  .hero h1 {
    font-size:clamp(54px, 16vw, 90px)
  }
  .hero-text {
    font-size:15px
  }
  .hero-counter {
    bottom:70px
  }
  .hero-bottom span:first-child {
    display:none
  }
  .section {
    padding:95px 6%
  }
  .intro {
    min-height:75vh
  }
  .giant {
    font-size:clamp(48px, 14vw, 78px)
  }
  .section-top {
    margin-bottom:45px
  }
  .section-top h2 {
    font-size:clamp(50px, 14vw, 85px)
  }
  .service-row {
    min-height:145px;
    grid-template-columns:38px 1fr 45px;
    gap:12px
  }
  .service-media {
    display:none
  }
  .service-name p {
    font-size:11px
  }
  .service-arrow {
    width:38px;
    height:38px
  }
  .work-stage {
    grid-template-columns:1fr
  }
  .work-feature {
    height:500px
  }
  .work-mini {
    min-height:260px
  }
  .work-ticker {
    margin-top:60px
  }
  .infra-scroll {
    grid-template-columns:1fr
  }
  .infra-landing {
    grid-template-columns:1fr
  }
  .infra-landing-copy {
    min-height:420px
  }
  .infra-preview-grid {
    min-height:500px
  }
  .infra-card .photo-slot {
    height:390px
  }
  .locations-layout {
    gap:35px
  }
  .location-map {
    height:400px
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .quote-form .full {
    grid-column:auto
  }
  .quote-form {
    padding:25px
  }
  .inner-hero {
    min-height:58vh;
    padding-bottom:65px
  }
  .inner-hero h1 {
    font-size:clamp(55px, 15vw, 90px)
  }
  .contact-copy h2, .quote-intro h2 {
    font-size:52px
  }
  .map-frame {
    min-height:400px
  }
  footer {
    grid-template-columns:1fr;
    gap:25px
  }
  .cursor-label {
    display:none
  }
}
@media(max-width:720px) {
  .service-nav-links {
    display:none
  }
  .service-nav-cta {
    padding:11px 14px
  }
  .service-page .service-hero {
    overflow:hidden
  }
  .service-page .service-section h2 {
    font-size:clamp(48px, 14vw, 78px)
  }
  .sp-info-card, .sp-app-card, .sp-process-card {
    min-height:0
  }
  .sp-gallery-head p {
    font-size:13px
  }
}
@media(max-width:900px) {
  .nav-desktop {
    display:none
  }
  .mobile-menu {
    display:flex;
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:0;
    border-radius:50%;
    background:#111;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer
  }
  .mobile-menu span {
    width:16px;
    height:1px;
    background:#fff;
    transition:transform .25s var(--ease)
  }
  .mobile-menu[aria-expanded="true"] span:first-child {
    transform:translateY(3px) rotate(45deg)
  }
  .mobile-menu[aria-expanded="true"] span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }
  .mobile-nav {
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    max-height:calc(100svh - 110px);
    padding:12px;
    overflow-y:auto;
    background:rgba(255, 255, 255, .97);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255, 255, 255, .8);
    border-radius:24px;
    box-shadow:0 25px 60px #0002;
    display:none;
    flex-direction:column;
    gap:0;
    font-weight:800
  }
  .mobile-nav.open {
    display:flex
  }
  .mobile-nav a {
    min-height:48px;
    padding:14px 12px;
    border-bottom:1px solid #17171712
  }
  .mobile-nav a:last-child {
    margin-top:8px;
    border:0;
    border-radius:14px;
    background:#111;
    color:#fff
  }
}
@media(max-width:720px) {
  .mobile-nav {
    top:calc(100% + 8px)
  }
  .service-row {
    grid-template-columns:32px minmax(0, 1fr) 64px 38px;
    gap:10px;
    padding:14px 0
  }
  .service-media {
    display:block;
    width:64px;
    height:64px;
    border-radius:12px;
    opacity:1;
    transform:none
  }
  .service-name h3 {
    font-size:clamp(19px, 5vw, 25px);
    line-height:1.05
  }
  .service-name p {
    font-size:12px;
    line-height:1.4
  }
  .service-arrow {
    width:38px;
    height:38px
  }
  .work-feature {
    height:clamp(360px, 105vw, 500px)
  }
  .infra-landing-copy {
    min-height:360px;
    padding:clamp(28px, 8vw, 42px)
  }
  .infra-preview-grid {
    min-height:400px
  }
  .mobile-menu:focus-visible, .mobile-nav a:focus-visible,
  .service-arrow:focus-visible, .pill:focus-visible,
  .under-link:focus-visible {
    outline:3px solid var(--red);
    outline-offset:4px
  }
}
@media(max-width:380px) {
  .service-row {
    grid-template-columns:26px minmax(0, 1fr) 54px 34px;
    gap:7px
  }
  .service-media {
    width:54px;
    height:54px
  }
  .service-arrow {
    width:34px;
    height:34px
  }
  .service-name p {
    font-size:11px
  }
}