/* Единые размеры и читаемые элементы на всех экранах. */
html { scroll-padding-top:110px; }
body { overflow-x:clip; }
#compact-journey { display:none; }
button, summary, a { touch-action:manipulation; }
.contacts a { overflow-wrap:anywhere; }
@media(min-width:901px) and (max-width:1200px) {
   header { padding-inline:3%; gap:18px; }
   .brand { width:170px; flex-basis:170px; transform:translateY(-8px); }
   .header-contacts { gap:22px; }
   .header-phone span { font-size:16px; }
   .header-address span { font-size:12px; }
   .header-contacts .header-max { font-size:12px; gap:7px; }
   .header-max img { width:30px; height:30px; }
   .plaque,body[data-scene='1'] .plaque { width:40%; right:3%; }
   .journey-nav button { padding-inline:12px; }
   body[data-scene='0'] .guide-note { width:215px; }
}
@media(min-width:901px) and (max-height:760px) {
   header { height:76px; }
   .brand { width:165px; flex-basis:165px; }
   .intro { top:94px; }
   .plaque,body[data-scene='1'] .plaque { top:94px; max-height:calc(100svh - 178px); padding:16px 20px; }
   .plaque h2,body[data-scene='1'] .plaque h2 { font-size:26px; margin:9px 0; }
   .plaque>p { font-size:13px; }
   .journey-nav { bottom:12px; }
   body:not([data-scene='0']) .guide { bottom:88px; }
   body[data-scene='0'] .guide { height:33svh; width:22svh; bottom:82px; }
   .guide-note p { font-size:12px; }
}
@media(min-width:1800px) {
   .plaque,body[data-scene='1'] .plaque { width:490px; padding:26px 30px; }
   .plaque>p { font-size:16px; }
   .service-list summary { font-size:16px; }
   .service-list details p { font-size:15px; }
   .intro { width:530px; }
   .intro h1 { font-size:44px; }
   .intro p { font-size:17px; }
   .journey-nav button { font-size:14px; padding-inline:22px; }
}
/* Узкие устройства: иллюстрация и текст последовательно, без перекрытий. */
@media(max-width:900px), (max-width:1200px) and (orientation:portrait) {
   html { scroll-padding-top:calc(var(--header-height,112px) + 10px); }
   header { height:auto; min-height:106px; padding:calc(8px + env(safe-area-inset-top)) 16px 10px; display:grid; grid-template-columns:1fr auto; gap:6px 14px; background:#faf6ecef; border-bottom:1px solid #e2d9c4; backdrop-filter:blur(12px); }
   .brand { width:150px; flex-basis:auto; transform:translateY(-5px); grid-column:1; grid-row:1; }
   .header-contacts { display:contents; }
   .header-contacts .header-phone { grid-column:2; grid-row:1; justify-self:end; justify-content:center; min-height:44px; }
   .header-phone small { display:none; }
   .header-phone span { font-size:15px; white-space:nowrap; }
   .header-contacts .header-address { grid-column:1; grid-row:2; gap:2px; min-height:38px; justify-content:center; }
   .header-address span { font-size:12px; }
   .header-address small { font-size:10px; }
   .header-contacts .header-max { grid-column:2; grid-row:2; font-size:12px; justify-self:end; min-height:40px; gap:6px; }
   .header-max img { width:27px; height:27px; }
   #journey { display:none; }
   #compact-journey { display:block; padding-top:var(--header-height,112px); padding-bottom:calc(92px + env(safe-area-inset-bottom)); background:#f5eedf; }
   .mobile-section { scroll-margin-top:0; border-bottom:1px solid #d9cdb5; }
   .mobile-hero-image { position:relative; width:100%; aspect-ratio:1672/941; overflow:hidden; background:#d6e1dc; }
   .mobile-hero-image>img { display:block; width:100%; height:100%; object-fit:cover; }
   .mobile-gate { position:absolute; left:66.9856%; top:54.6227%; width:5.622%; height:14.665%; perspective:420px; clip-path:polygon(0 100%,0 37%,10% 19%,27% 7%,50% 0,73% 7%,90% 19%,100% 37%,100% 100%); }
   .mobile-gate .gate-left { transform:rotateY(calc(-1 * var(--door-angle,0deg))); }
   .mobile-gate .gate-right { transform:rotateY(var(--door-angle,0deg)); }
   .mobile-intro,.mobile-service { padding:24px clamp(20px,5vw,40px); background:#faf6ec; color:#263e34; }
   .mobile-intro h1 { font-size:clamp(27px,5.8vw,40px); line-height:1.3; letter-spacing:-.7px; margin:16px 0; }
   .mobile-intro p,.mobile-service>p { font-size:15px; line-height:1.7; color:#4d614f; margin:12px 0 20px; }
   .mobile-intro .eyebrow { font-size:10px; letter-spacing:2px; }
   .mobile-intro .landmark-note { display:block; margin-top:14px; font-size:12px; }
   .mobile-intro .landmark-note span { font-size:11px; }
   .mobile-hero>.mobile-guide { margin:0; padding:4px clamp(20px,5vw,40px) 26px; background:#faf6ec; }
   .mobile-illustration { position:relative; width:100%; aspect-ratio:1.4; overflow:hidden; background:#e8dfcb; }
   .mobile-illustration .scene-art { position:absolute; inset:0 auto 0 0; top:0; left:0; width:126.93%; height:100%; transform:none; background-size:100% 100%; background-position:center; }
   .mobile-illustration-1 .scene-art { background-image:url('art/scene-1-hd.png'); }
   .mobile-illustration-2 .scene-art { background-image:url('art/scene-2-style-fixed.png'); }
   .mobile-illustration-3 .scene-art { background-image:url('art/scene-3-hd.png'); }
   .mobile-illustration-4 .scene-art { background-image:url('art/scene-4-style-fixed.png'); }
   .mobile-eyebrow { font-size:10px; line-height:1.6; letter-spacing:1px; color:#826b41; display:block; }
   .mobile-service h2 { font:400 clamp(27px,5.5vw,37px)/1.3 Prata,Georgia,serif; margin:13px 0; letter-spacing:-.5px; }
   .mobile-service h3 { font-size:17px; margin:26px 0 12px; font-weight:600; }
   .mobile-service .service-list summary { min-height:48px; padding:13px 25px 13px 0; font-size:15px; line-height:1.6; }
   .mobile-service .service-list details p { font-size:14px; line-height:1.7; color:#4c604b; }
   .mobile-service .service-cta { min-height:48px; margin-top:22px; padding:14px 16px; border-radius:6px; font-size:15px; }
   .mobile-guide { display:flex; gap:13px; align-items:center; margin-top:26px; padding-top:20px; border-top:1px solid #d8cfb9; }
   .mobile-guide>img { display:block; width:58px; height:76px; object-fit:contain; flex:0 0 58px; }
   .mobile-guide>div { flex:1; min-width:0; }
   .mobile-guide p { font-size:13px; line-height:1.65; margin:0 0 5px; color:#4b624e; }
   .mobile-guide button { background:none; border:0; padding:9px 0; min-height:40px; font-size:13px; color:#345d46; text-align:left; }
   .mobile-navigation { display:flex; position:fixed; bottom:calc(10px + env(safe-area-inset-bottom)); left:12px; right:12px; transform:none; width:auto; max-width:none; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain; gap:3px; padding:5px; border-radius:12px; background:#faf6ecee; scrollbar-width:none; box-shadow:0 4px 24px #243b3030; }
   .mobile-navigation::-webkit-scrollbar { display:none; }
   .mobile-navigation button { flex:0 0 auto; padding:11px 13px; min-height:46px; font-size:12px; gap:6px; white-space:nowrap; }
   .mobile-service .contacts { margin:22px 0; }
   .mobile-service .contacts a { font-size:16px; }
   .mobile-service .contacts li { padding:15px 0; }
   .mobile-service .contacts small { font-size:10px; color:#806c47; }
   .contact-actions a { min-height:46px; display:flex; justify-content:center; align-items:center; font-size:14px; }
   .contact-dialog { width:calc(100vw - 28px); max-width:470px; max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding:28px 22px 22px; border-radius:13px; }
   .contact-dialog h2 { font-size:27px; margin-top:24px; }
   .contact-dialog .contacts a { font-size:15px; }
   .dialog-close { width:40px; height:40px; }
}
@media(min-width:601px) and (max-width:900px), (min-width:901px) and (max-width:1200px) and (orientation:portrait) {
   header { padding-inline:28px; }
   .brand { width:180px; }
   .header-phone span { font-size:18px; }
   .header-address span { font-size:14px; }
   .mobile-hero-image { aspect-ratio:1672/941; }
   .mobile-illustration { aspect-ratio:16/9; }
   .mobile-illustration .scene-art { width:100%; }
   .mobile-intro,.mobile-service { padding:32px 40px; }
   .mobile-navigation { left:24px; right:24px; justify-content:center; }
}
@media(max-width:360px) {
   header { padding-inline:12px; gap:4px 8px; }
   .brand { width:130px; }
   .header-phone span { font-size:13px; }
   .header-contacts .header-max { font-size:11px; }
   .header-address span { font-size:11px; }
   .mobile-intro,.mobile-service { padding-inline:18px; }
}

/* Режим работы доступен и в контактах, и в модальном окне. */
.header-contact-toggle { display:none; }
.office-hours>div { font-size:16px; line-height:1.7; color:#3c5542; }
.office-hours small { display:block; font-size:10px; color:#806c47; letter-spacing:1px; margin-bottom:4px; }
.office-hours>div>span { display:block; }
.office-hours .office-break { font-size:13px; color:#68735f; }
@media(max-width:900px), (max-width:1200px) and (orientation:portrait) {
   header { display:flex; justify-content:space-between; align-items:center; min-height:76px; height:calc(76px + env(safe-area-inset-top)); padding:calc(8px + env(safe-area-inset-top)) 18px 8px; gap:14px; }
   header .brand { width:150px; flex:0 0 150px; transform:translateY(-6px); }
   header .header-contacts { display:none; }
   .header-contact-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 13px; border:1px solid #6a7f6b55; border-radius:7px; background:#365646; color:#fff7e5; font-size:12px; line-height:1.35; white-space:nowrap; }
   .header-contact-toggle span { color:#e7d29e; }
   .mobile-illustration { aspect-ratio:1.15; }
   .mobile-illustration .scene-art { width:208.7%; height:135%; left:-2%; top:-17%; transform:none; }
   .mobile-illustration-4 .scene-art { left:-15%; }
   .contact-dialog .office-hours>div { font-size:15px; }
}
@media(min-width:601px) and (max-width:900px), (min-width:901px) and (max-width:1200px) and (orientation:portrait) {
   header { padding-inline:28px; height:calc(88px + env(safe-area-inset-top)); }
   header .brand { width:180px; flex-basis:180px; }
   .header-contact-toggle { font-size:14px; padding-inline:18px; }
   .mobile-illustration { aspect-ratio:1.65; }
   .mobile-illustration .scene-art { width:134.68%; height:125%; left:0; top:-12%; }
   .mobile-illustration-4 .scene-art { left:-5%; }
}
@media(max-width:360px) {
   header { padding-inline:12px; gap:8px; }
   header .brand { width:125px; flex-basis:125px; }
   .header-contact-toggle { padding-inline:10px; font-size:11px; }
}

@media(max-width:900px), (max-width:1200px) and (orientation:portrait) {
   .mobile-illustration-1 .scene-art { background-image:url('art/engineers-final-wide.png'); }
   .mobile-illustration-2 .scene-art { background-image:url('art/surveyor-final-wide.png'); }
   .mobile-illustration-3 .scene-art { background-image:url('art/lawyers-final-wide.png'); }
   .mobile-illustration-3 .detail-flag { display:none; }
}