/* Design revisions: shared frame, section rhythm, header and responsive layouts. */
:root{--frame-width:1480px;--frame-inset:40px;--section-space:70px}
.site-frame{width:min(var(--frame-width),calc(100% - 48px));margin-inline:auto;border-inline:1px solid #DCE5EA;position:relative}
.site-frame .container{width:calc(100% - var(--frame-inset)*2);max-width:none}
.site-header{position:sticky;top:0;z-index:100;background:var(--page);border-bottom:1px solid #DCE5EA}
.admin-bar .site-header{top:32px}
.header-inner{flex-wrap:nowrap;min-height:100px;gap:20px}
.header-inner nav{gap:24px}
.header-actions .header-phone{display:inline-flex}
.header-phone-number,.header-quote{white-space:nowrap}
.header-phone .icon{width:17px;height:17px}
.header-actions .menu-toggle{display:none}
.nav-catalog>.nav-catalog-trigger{display:flex;align-items:center;gap:10px}
.nav-chevron{width:12px;height:22px;transition:transform .2s}
.nav-catalog.is-open .nav-chevron{transform:rotate(180deg)}
.nav-catalog.is-open .nav-dropdown{display:block}
.nav-dropdown{box-shadow:0 8px 20px #1d2d3a0c}
.burger-lines{display:flex;flex-direction:column;justify-content:center;gap:4px;width:16px;height:20px;position:relative}
.burger-lines i{display:block;height:1px;width:16px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu-toggle[aria-expanded=true] .burger-lines i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-toggle[aria-expanded=true] .burger-lines i:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] .burger-lines i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.site-frame .hero{width:calc(100% - var(--frame-inset)*2);max-width:none;aspect-ratio:1400/665;min-height:0;margin-top:28px;margin-bottom:0}
.hero-copy{width:65%;padding:50px 0 50px 50px}
.hero-image{object-position:center}
.hero-actions .button-primary{box-shadow:0 6px 16px #1d2d3a20}
.site-frame .section{position:relative;padding-top:var(--section-space);padding-bottom:var(--section-space);margin-top:0}
.site-frame #catalog{margin-top:28px}
.site-frame .section::before,.site-frame .site-footer::before{content:'';position:absolute;top:0;left:calc(-1*var(--frame-inset));right:calc(-1*var(--frame-inset));border-top:1px solid #DCE5EA;pointer-events:none}
.site-frame .site-footer{position:relative;margin-top:0;border-top:0}
.footer-top{min-height:150px}
.footer-bottom{min-height:90px;border-top-color:#DCE5EA}
.studio-logo{width:172px;height:30px;object-fit:contain}
.product-panel{grid-template-columns:minmax(250px,432px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:40px;row-gap:0}
.product-panel>.product-heading{grid-column:2;grid-row:1}
.product-panel>.product-image-wrap{grid-column:1;grid-row:1 / span 2}
.product-panel>.product-content{grid-column:2;grid-row:2}
.product-panel>.product-heading h3{font-size:28px}
.product-image{object-position:center}
.catalog-button:disabled{background:transparent;color:var(--navy);cursor:default;opacity:1;border-color:#b7cbd9}
.catalog-button:disabled:hover{background:transparent}
.text-link{gap:6px}
.contacts-grid .contact-item>.icon{width:30px;height:30px;flex-basis:30px}
.messengers{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.messengers .messenger-button{min-height:42px;font-size:16px;gap:10px;padding:8px 12px;white-space:nowrap}
.messenger-icon{width:30px;height:30px;object-fit:contain}
.messenger-button.is-placeholder:disabled{background:transparent;color:var(--ink);border-color:var(--navy);opacity:1;cursor:default}
@media(min-width:1024px) and (max-width:1380px){.header-inner nav{gap:16px;font-size:13px}.header-actions .button{font-size:13px;padding-inline:12px}.brand{font-size:21px}.hero-copy{padding-left:40px}.product-panel{grid-template-columns:32% minmax(0,1fr);gap:0 30px}.product-panel>.product-heading h3{font-size:25px}}
@media(max-width:1023px){
 :root{--frame-inset:24px}
 .site-frame{width:calc(100% - 32px)}
 .header-inner{min-height:88px;padding-block:18px;flex-wrap:wrap;gap:16px}
 .header-inner .brand{font-size:20px;gap:10px}
 .brand-mark{width:32px;height:32px}
 .header-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
 .header-actions .header-phone{display:inline-flex;font-size:13px}
 .header-actions .header-quote{display:inline-flex;font-size:13px}
 .header-actions .menu-toggle{display:inline-flex;width:46px;height:44px;min-height:44px;padding:0;margin-left:0;flex-shrink:0}
 .header-inner #site-nav{display:none;flex-basis:100%;order:3;padding:16px 0 0;align-items:stretch;gap:8px;font-size:15px;flex-direction:column}
 .header-inner #site-nav.is-open{display:flex}
 .nav-dropdown{position:static;width:100%;border:0;box-shadow:none;background:var(--panel)}
 #site-nav.is-open .nav-dropdown{display:block}
 #site-nav.is-open .nav-chevron{transform:rotate(180deg)}
 .site-frame .hero{aspect-ratio:auto;min-height:480px}
 .hero-copy{width:72%;padding:35px}
 .hero-actions{flex-wrap:nowrap;gap:8px}
 .hero-actions .button{white-space:nowrap;font-size:14px;padding-inline:12px;min-width:0}
 .product-panel{display:flex;flex-direction:column;gap:24px;padding:28px}
 .product-panel>.product-heading{order:0;margin:0;align-items:flex-start}
 .product-panel>.product-heading h3{font-size:26px}
 .product-panel>.product-image-wrap{order:1;width:100%}
 .product-panel>.product-content{order:2}
 .product-image{width:100%;height:240px;aspect-ratio:auto;object-fit:cover;object-position:center 60%}
 .product-items{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
 .product-item{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .product-item-copy{width:100%}
 .product-item .catalog-button{align-self:flex-start;margin-left:18px;width:auto}
 .category-tabs{display:grid;grid-template-columns:1fr;overflow:visible;gap:10px;padding:0}
 .category-tab{white-space:normal;text-align:left;justify-content:space-between;min-height:50px;width:100%;font-size:16px;gap:16px}
 .quote-panel{gap:32px;padding:36px;grid-template-columns:1fr 1fr}
 .contacts-layout{grid-template-columns:1fr}
 .contacts-grid{gap:36px}
 .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
@media(min-width:641px) and (max-width:800px){.header-inner .brand{font-size:18px}.header-actions .header-phone{font-size:12px;padding-inline:8px;gap:6px}.header-actions .header-quote{font-size:12px;padding-inline:10px}.header-inner{gap:10px}.hero-copy{width:100%;padding:32px}.hero-copy h1{max-width:70%;font-size:36px}.hero-description{max-width:65%}.hero-actions{width:max-content;max-width:100%}.hero-actions .button{font-size:13px;padding-inline:10px}}
@media(max-width:640px){
 :root{--frame-inset:24px}
 .site-frame{width:calc(100% - 24px)}
 .admin-bar #wpadminbar{position:fixed}
 .header-inner{min-height:78px;padding:16px 0;gap:8px}
 .header-inner .brand{font-size:18px;gap:8px}
 .brand-mark{width:30px;height:30px}
 .header-actions{gap:6px;margin-left:auto}
 .header-actions .header-phone{width:46px;height:44px;min-height:44px;padding:0;background:var(--action);border-color:transparent}
 .header-phone-number{display:none}
 .header-actions .header-phone .icon{width:18px;height:18px}
 .header-actions .header-quote{display:none}
 .header-actions .menu-toggle{width:46px;height:44px;min-height:44px}
 .site-frame .hero{margin-top:0;display:flex;flex-direction:column;align-items:stretch;min-height:0;aspect-ratio:auto;overflow:visible;border-radius:0;background:transparent;padding-top:36px}
 .hero::after{display:none}
 .hero-copy{order:0;width:100%;padding:0;background:transparent}
 .hero-copy h1{font-size:32px;max-width:none;line-height:1.15}
 .hero-subtitle{font-size:17px;line-height:1.5;margin-top:24px}
 .hero-description{font-size:15px;line-height:1.5;margin-top:22px;max-width:none}
 .hero-actions{display:flex;flex-direction:column;flex-wrap:nowrap;width:100%;gap:10px;margin-top:28px}
 .hero-actions .button{flex:none!important;width:100%;min-height:50px;font-size:16px;white-space:nowrap;padding:12px 14px}
 .hero-image{order:1;position:static;inset:auto;display:block;width:100%;height:150px;object-fit:cover;object-position:right 53%;border-radius:16px;margin-top:24px}
 .site-frame #catalog{margin-top:28px}
 .product-panel{gap:20px;padding:20px}
 .product-panel>.product-heading h3{font-size:23px}
 .product-panel>.product-heading>span{padding-top:3px}
 .product-image{height:200px;object-position:center 60%}
 .product-items{grid-template-columns:1fr;gap:0}
 .product-item{gap:12px;padding-block:18px}
 .product-item h4{font-size:16px}
 .product-item p{font-size:14px}
 .catalog-button{min-height:40px;font-size:14px;padding:9px 12px}
 .category-tab{font-size:15px;min-height:50px;padding:12px 14px}
 .quote-panel{padding:28px 24px;grid-template-columns:1fr}
 .contacts-grid{grid-template-columns:1fr;gap:30px}
 .contacts-grid .contact-item{gap:12px}
 .contact-map{height:400px}
 .footer-top{padding:32px 0;min-height:0}
 .footer-bottom{padding:24px 0;min-height:0}
 .studio-logo{height:30px;width:auto;max-width:172px}
 .benefits-grid{grid-template-columns:1fr}
}
@media(max-width:360px){:root{--frame-inset:16px}.header-inner .brand{font-size:16px}.brand-mark{width:26px;height:26px}.header-actions .header-phone,.header-actions .menu-toggle{width:40px;height:40px;min-height:40px}.hero-copy h1{font-size:30px}.hero-actions .button{font-size:14px}}
/* Keep anchored headings below the sticky header and crop only the mobile visual. */
html{scroll-padding-top:120px}html:has(body.admin-bar){scroll-padding-top:152px}
.hero-visual{position:absolute;inset:0;overflow:hidden;border-radius:16px}
.product-panel{scroll-margin-top:0}
@media(max-width:1023px){html{scroll-padding-top:108px}html:has(body.admin-bar){scroll-padding-top:154px}}
@media(max-width:640px){html{scroll-padding-top:98px}html:has(body.admin-bar){scroll-padding-top:144px}.hero-visual{position:relative;inset:auto;order:1;width:100%;height:150px;margin-top:24px;overflow:hidden;border-radius:16px}.hero-visual .hero-image{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;transform:scale(1.6);transform-origin:right center}}
/* Tablet hero uses a separate image so copy never overlaps the equipment. */
@media(min-width:641px) and (max-width:1023px){
 .site-frame .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;aspect-ratio:auto;background:transparent;border-radius:0;overflow:visible;padding-top:36px;margin-top:0}
 .hero-copy{order:0;width:100%;padding:0;background:transparent}
 .hero-copy h1{font-size:40px;max-width:100%}
 .hero-description{max-width:100%}
 .hero-actions{flex-direction:row;flex-wrap:nowrap;width:auto;max-width:100%;margin-top:28px}
 .hero-actions .button{font-size:15px;white-space:nowrap;min-height:50px;padding-inline:16px}
 .hero-visual{order:1;position:relative;inset:auto;width:100%;height:260px;margin-top:28px;border-radius:16px;overflow:hidden}
 .hero-visual .hero-image{position:absolute;inset:0;width:100%;height:100%;margin:0;object-fit:cover;object-position:right center;transform:scale(1.2);transform-origin:right center}
}
@media(min-width:641px) and (max-width:800px){.hero-visual{height:240px}}
/* 1.2: unobstructed responsive images and quiet catalogue links. */
.hero-visual picture{display:block;width:100%;height:100%}
.product-item{flex-direction:column;align-items:stretch;gap:12px}
.product-item-copy{width:100%}
.product-item .catalog-button{align-self:flex-start;margin-left:18px;width:auto;min-height:24px;border:0;padding:0;font-size:16px;gap:2px;line-height:1.5;letter-spacing:0}
.product-item .catalog-button:disabled{border:0;background:transparent;color:var(--navy);cursor:default}
.awaiting-bot:disabled,.awaiting-bot:disabled:hover{background:var(--action);color:var(--ink);opacity:1;cursor:default}
.messengers .messenger-icon{width:30px;height:30px;min-width:30px;max-width:30px;flex:0 0 30px}
@media(max-width:1023px){
 .header-inner{position:relative}
 .header-inner #site-nav{position:absolute;top:100%;left:calc(-1*var(--frame-inset));right:calc(-1*var(--frame-inset));width:auto;margin:0;padding:22px var(--frame-inset) 28px;border-top:1px solid #DCE5EA;border-bottom:1px solid #DCE5EA;background:var(--page);max-height:calc(100dvh - 140px);overflow-y:auto;box-shadow:0 10px 20px #1d2d3a0b;z-index:10;gap:12px}
 .nav-dropdown{border-radius:10px;padding:14px;margin-top:12px}
 .nav-dropdown a{padding:14px 10px}
 .hero-visual{height:auto;aspect-ratio:1921/819}
 .hero-visual .hero-image{transform:none;object-fit:contain;object-position:center}
 .product-image-wrap{border-radius:16px;overflow:hidden;background:#dce5ea}
 .product-image{object-fit:contain;object-position:center}
}
@media(max-width:640px){
 .messengers{flex-direction:column;align-items:stretch;width:100%;max-width:260px}
 .messengers .messenger-button{width:100%;min-height:46px;justify-content:center}
 .chat-main{width:100%;max-width:260px;min-height:46px}
 .hero-visual{height:auto;aspect-ratio:1921/819}
}

/* Desktop starts at 1024px; desktop hero has a fixed 600px height. */
@media(min-width:1024px){.site-frame .hero{height:600px;min-height:600px;aspect-ratio:auto}.header-inner #site-nav{display:flex}.header-actions .menu-toggle{display:none}}
@media(min-width:1024px) and (max-width:1200px){.header-inner{gap:12px}.header-inner .brand{font-size:18px;gap:8px}.brand-mark{width:32px;height:32px}.header-inner nav{gap:12px;font-size:12px}.header-actions{gap:6px}.header-actions .button{font-size:12px;padding-inline:8px}.header-phone .icon{width:16px;height:16px}.hero-copy{width:60%;padding:32px}.hero-copy h1{font-size:36px}.hero-subtitle{font-size:16px;margin-top:20px}.hero-description{font-size:14px;margin-top:20px;max-width:100%}.hero-actions{gap:8px;margin-top:28px}.hero-actions .button{font-size:13px;padding-inline:10px;white-space:nowrap}.product-panel{grid-template-columns:30% minmax(0,1fr);column-gap:24px;padding:28px}.product-heading h3{font-size:24px}.product-items{column-gap:22px}}
