/* One visible canvas height across the seven main navigation pages. */
:root{--site-banner-height:510px}
#home.hero-composite,.about-hero,.product-hero,.industrial-banner{
 box-sizing:border-box;height:var(--site-banner-height);min-height:var(--site-banner-height);max-height:none;
}
#home.hero-composite{--home-image-height:var(--site-banner-height);--home-image-width:min(100%,calc(var(--home-image-height) * 1672 / 941));margin-top:66px;border:0}
#home.hero-composite .workshop-layer{inset:0;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:right bottom}
#home.hero-composite .atmosphere-layer{background:linear-gradient(90deg,#091827 calc(100% - var(--home-image-width)),#09182700 calc(100% - var(--home-image-width) + 140px)),linear-gradient(90deg,#051a34b8,#051a3450 54%,#051a3415)}
.product-hero{--product-hero-height:var(--site-banner-height)}

/* Keep homepage content inside the shorter canvas while preserving its hierarchy. */
#home.hero-composite .hero-copy{top:38px;left:max(5%,calc((100% - 1200px)/2));width:clamp(500px,39.2vw,720px)}
#home.hero-composite .eyebrow{margin-bottom:12px}
#home.hero-composite h1{margin-bottom:12px}
#home.hero-composite .hero-benefits{margin:18px 0 22px}
#home.hero-composite .hero-benefits>div{padding:14px 16px}
#home.hero-composite .hero-metrics{margin-top:22px;padding-top:18px}
html[lang="en"] #home.hero-composite .hero-copy{top:28px}
html[lang="en"] #home.hero-composite h1{font-size:clamp(30px,2vw,38px)}
html[lang="en"] #home.hero-composite .hero-benefits{margin:16px 0 18px}
html[lang="en"] #home.hero-composite .hero-metrics{margin-top:18px;padding-top:16px}

@media(min-width:701px) and (max-width:1100px){
 #home.hero-composite .hero-copy{width:70%;left:5%;top:32px}
 #home.hero-composite .workshop-layer{inset:0;width:100%;height:100%;object-fit:contain;object-position:right bottom}
 #home.hero-composite h1{font-size:clamp(28px,3.5vw,36px)}
 #home.hero-composite .hero-benefits{gap:16px}
 #home.hero-composite .hero-benefits>div{width:auto;padding:12px}
 #home.hero-composite .hero-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 #home.hero-composite .hero-metrics strong{font-size:24px}
 #home.hero-composite .hero-metrics svg{width:22px}
 html[lang="en"] #home.hero-composite .hero-copy{top:24px}
}

/* Phones share a taller canvas with a separate image area. */
@media(max-width:700px){
 :root{--site-banner-height:700px}
 #home.hero-composite{--home-image-height:240px}
 .about-hero,.industrial-banner,.contact-hero.industrial-banner{padding-bottom:0}
 #home.hero-composite .hero-copy{top:24px;left:5%;width:90%;max-width:none}
 #home.hero-composite .eyebrow{font-size:9px;margin-bottom:10px}
 #home.hero-composite h1{font-size:30px;line-height:1.24;margin-bottom:12px;white-space:normal}
 #home.hero-composite h1>span{display:block;white-space:nowrap}
 #home.hero-composite h2{font-size:14px;line-height:1.65}
 #home.hero-composite .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}
 #home.hero-composite .hero-benefits>div{width:auto;padding:12px 10px}
 #home.hero-composite .hero-benefits b{font-size:16px}
 #home.hero-composite .hero-benefits small{font-size:10px}
 #home.hero-composite .hero-metrics{margin-top:18px;padding-top:16px;gap:14px 20px}
 #home.hero-composite .hero-metrics strong{font-size:22px}
 #home.hero-composite .workshop-layer{height:240px;inset:auto 0 0;width:100%;object-fit:contain;object-position:right bottom}
 #home.hero-composite .atmosphere-layer{background:linear-gradient(180deg,#071a2b 0%,#071a2b calc(100% - 250px),#071a2b40 calc(100% - 130px),transparent 100%),linear-gradient(90deg,#071a2b calc(100% - var(--home-image-width)),transparent calc(100% - var(--home-image-width) + 70px))}
 html[lang="en"] #home.hero-composite .hero-copy{top:20px}
 html[lang="en"] #home.hero-composite h1{font-size:24px;line-height:1.15}
 html[lang="en"] #home.hero-composite h1>span{white-space:normal}
 html[lang="en"] #home.hero-composite .hero-benefits{margin:12px 0}
 html[lang="en"] #home.hero-composite .hero-benefits b{font-size:14px}
 html[lang="en"] #home.hero-composite .hero-benefits>div>div{min-width:0}
 html[lang="en"] #home.hero-composite .hero-benefits b{white-space:normal}
 html[lang="en"] #home.hero-composite .hero-metrics{margin-top:16px;padding-top:14px}
 .product-hero .hero-product{position:absolute;inset:auto 0 0;width:100%;height:270px;margin:0}
 .product-hero .hero-product picture{display:grid;place-items:center;height:100%}
 .product-hero .hero-product img{height:100%;width:auto;max-width:85%;margin:0;object-fit:contain}
}
@media(max-width:360px){
 .site-header.hero-header{gap:6px}
 .hero-header .nav-actions{gap:5px}
 .hero-header .nav-actions .nav-cta{font-size:10px;padding-inline:8px}
 .hero-header .menu-toggle{font-size:11px;padding-inline:6px}
 html[lang="en"] .hero-header .brand-name strong{font-size:14px}
 html[lang="en"] #home.hero-composite .hero-benefits b{font-size:12px}
}