/* Stage 3a — inner pages: tablet (<=1180 / 768) and phone (<=600 / 390, checked at 320).
   Desktop >1180 is untouched: every rule below sits inside a max-width query,
   except the two hidden-on-desktop components (menu button, panel contacts). */
.menu-btn,.nav-contact{display:none}

@media(max-width:1180px){
 .top .wrap{flex-wrap:nowrap;height:88px;min-height:0;padding-block:0;gap:20px}
 .top-contact{margin-left:auto;order:0}
 .top-contact .mail{display:none}
 .top-contact .tel{display:inline-flex;align-items:center;min-height:48px}
 .menu-btn{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:48px;padding:0 18px;background:transparent;color:var(--text);border:1px solid #a8acb2;font:500 14px/1 var(--display);text-transform:uppercase;letter-spacing:.06em}
 .menu-btn:hover{border-color:var(--yellow)}
 .menu-ico{position:relative;display:block;width:20px;height:14px}
 .menu-ico i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s var(--ease),opacity .2s}
 .menu-ico i:nth-child(1){top:0}.menu-ico i:nth-child(2){top:6px}.menu-ico i:nth-child(3){top:12px}
 .menu-btn[aria-expanded=true]{border-color:var(--yellow)}
 .menu-btn[aria-expanded=true] .menu-ico i:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .menu-btn[aria-expanded=true] .menu-ico i:nth-child(2){opacity:0}
 .menu-btn[aria-expanded=true] .menu-ico i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 .nav{display:none}
 .top.menu-open{position:fixed;top:0;left:0;right:0;z-index:61;background:var(--bg)}
 .menu-open .nav{display:flex;position:fixed;left:0;right:0;top:89px;bottom:0;z-index:60;flex-direction:column;flex-wrap:nowrap;gap:0;width:auto;margin:0;padding:8px 20px 40px;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;font-size:18px;letter-spacing:.04em}
 .menu-open .nav>a{display:flex;align-items:center;min-height:64px;padding:0;border-bottom:1px solid var(--line)}
 .menu-open .nav>a[aria-current]{color:var(--yellow);border-bottom-color:var(--line)}
 .menu-open .nav>a:hover{color:var(--yellow);border-bottom-color:var(--line)}
 .menu-open .nav-contact{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:28px;text-transform:none;letter-spacing:0}
 .nav-contact a{display:flex;align-items:center;min-height:48px;padding:0;border:0}
 .nav-contact .tel{font:500 22px/1.4 var(--display);white-space:nowrap}
 .nav-contact .mail{font:400 16px/1.4 var(--body);color:var(--muted)}
 .menu-lock,.menu-lock body{overflow:hidden}
 .m .menu-open .nav{animation:menu-in .25s var(--ease)}
 @keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
 /* tablet layout */
 .two{gap:56px}
 .photo-hero{height:520px}
 .call-sec h2{font-size:40px}
 /* touch targets >=44px */
 .logo{min-height:48px}
 .crumb a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-block:0}
 .footer-grid a,.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
 footer li{margin-bottom:0}
 .more{min-height:44px;align-items:flex-end}
 .call-sec .tel,.call-sec .rest a,.contact-big,.contact-email{display:inline-flex;align-items:center;min-height:48px}
 /* grids: two columns from 1180 down (site.css switches only at 1000) */
 .grid,.projects-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .projects-grid .card,.projects-grid .card:first-child,.projects-grid .card:nth-child(2){grid-column:auto}
 .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:1000px){
 .intro h1,.error-layout h1{font-size:min(44px,calc((100vw - 40px) / var(--lw,12)))}
 .section h2{font-size:clamp(26px,4.4vw,36px)}
 .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fleet-grid .data div{grid-template-columns:minmax(0,1fr);gap:6px}
 .video-planned{grid-template-columns:1fr}
 .headrow{gap:24px}
 .footer-grid{gap:40px}
 /* sidebar viewer controls keep their sides, smaller offsets */
 .media-viewer .viewer-actions [data-prev]{left:20px}
 .media-viewer .viewer-actions [data-next]{right:20px}
 dialog.media-viewer{padding:20px 20px 28px}
}

@media(max-width:600px){
 .top .wrap{height:72px;gap:12px}
 .intro h1,.error-layout h1{font-size:min(32px,calc((100vw - 32px) / var(--lw,12)))}
 .top-contact{display:none}
 .menu-btn{margin-left:auto;padding:0 14px}
 .menu-open .nav{top:73px;padding-inline:16px}
 .logo svg{width:120px;height:36px}
 .photo-hero,.photo-hero.compact{height:300px}
 .fleet-grid{grid-template-columns:1fr}
 .grid,.projects-grid,.related-grid,.steps{grid-template-columns:minmax(0,1fr)}
 .call-sec h2{font-size:clamp(24px,7.4vw,28px)}
 .crumb{gap:4px 10px}
 .crumb a{min-height:44px;display:inline-flex;align-items:center;padding-block:0}
 .footer-grid a{display:inline-flex;align-items:center;min-height:44px}
 footer li{margin-bottom:0}
 /* viewer: counter + close on top, prev/next move to the bottom corners so the photo keeps the full width */
 dialog.media-viewer{padding:12px 12px 88px}
 .media-viewer .viewer-actions [data-prev],.media-viewer .viewer-actions [data-next]{top:auto;bottom:20px;transform:none;width:56px;height:56px}
 .media-viewer .viewer-actions [data-prev]{left:16px}
 .media-viewer .viewer-actions [data-next]{right:16px}
 .viewer-stage{margin-inline:0}
}

@media(max-width:360px){
 .wrap{width:calc(100% - 24px)}
 .intro h1,.error-layout h1{font-size:min(32px,calc((100vw - 24px) / var(--lw,12)))}
 .section h2{font-size:22px}
 .section .card .card-title,.card h3{font-size:16px}
 .card .body{padding:20px 16px}
}

/* Narrow desktop 1181–1439: accepted composition, five process steps keep their words whole. */
@media(min-width:1181px) and (max-width:1439px){
 .steps h3{font-size:17px}
}