#top.hero{min-height:max(760px,100svh);padding-top:var(--jsw-nav-height)}
#top .hero-facts-layout{--hero-fact-size:clamp(16px,1.25vw,22px);grid-template-columns:16% minmax(0,1fr) 16%!important;gap:20px;min-height:calc(max(760px,100svh) - var(--jsw-nav-height));padding:40px 3.7vw!important;width:100%;margin:0}
#top .hero-stats-left{grid-column:1;grid-row:1}#top .hero-stats-right{grid-column:3;grid-row:1;justify-self:end}#top .hero-stats{gap:22px;align-self:center;max-width:100%}
#top .hero-stat strong{font-size:var(--hero-fact-size);font-weight:750;line-height:1.18;letter-spacing:-.02em;opacity:.8}#top .hero-stat span{font-size:12px;line-height:1.5;margin-top:5px}
#top .hero-message{position:absolute;left:52%;right:19%;top:clamp(165px,23vh,255px);text-align:left;color:#fff;z-index:2;text-shadow:0 2px 16px #0007}
#top .hero-oem-label{display:inline-block;border:2px solid #ed243b;border-radius:4px;padding:10px 22px;font-size:23px;font-weight:750;line-height:1.2;letter-spacing:.06em;background:transparent}
#top .hero-message h1{font-size:clamp(35px,2.65vw,51px);line-height:1.2;letter-spacing:-.025em;margin:20px 0 22px;text-align:left;text-wrap:initial}
#top .hero-series{display:flex;flex-wrap:wrap;gap:8px 15px;margin:0;font-size:clamp(18px,1.3vw,25px);font-weight:600;line-height:1.6}#top .hero-series span{display:block}
#top .hero-carbon{font-size:clamp(24px,1.65vw,32px);font-weight:600;margin:20px 0}#top .hero-qualities{font-size:clamp(18px,1.3vw,25px);line-height:1.7;margin:0;max-width:100%}
#top .hero-brand-invitation{position:absolute;left:20%;right:20%;bottom:13%;text-align:center;z-index:2;color:#fff}#top .hero-taglines p{font-size:var(--hero-fact-size);line-height:1.6;margin:0 0 6px;text-shadow:0 2px 12px #0009}
#top .hero-company-link{display:inline-flex;align-items:center;justify-content:center;margin-top:20px;min-height:44px;padding:12px 28px;background:#bd1227;border:1px solid #ec3248;border-radius:4px;color:#fff;font-size:14px;font-weight:700;line-height:1.5;transition:background .2s}
#top .hero-company-link:hover{background:#e0253b}#top .hero-company-link:focus-visible{outline:3px solid #fff;outline-offset:5px}
@media(max-width:1100px){
 #top.hero{min-height:100svh;align-items:center}
 #top .hero-facts-layout{--hero-fact-size:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px 24px;min-height:calc(100svh - var(--jsw-nav-height));padding:32px 6vw 74px!important}
 #top .hero-message{position:static;grid-column:1/-1;grid-row:1;max-width:690px;width:100%;justify-self:center}
 #top .hero-message h1{font-size:36px;margin:16px 0}#top .hero-series{font-size:16px;gap:6px 14px}#top .hero-carbon{font-size:22px;margin:14px 0}#top .hero-qualities{font-size:16px}
 #top .hero-facts-layout .hero-stats{grid-row:2!important;gap:12px;align-self:start}#top .hero-stats-left{grid-column:1}#top .hero-stats-right{grid-column:2}#top .hero-stat span{font-size:11px}
 #top .hero-brand-invitation{position:static;grid-column:1/-1;grid-row:3;max-width:100%}#top .hero-company-link{margin-top:16px}
}
@media(max-width:520px){#top .hero-facts-layout{--hero-fact-size:15px;gap:24px 16px}#top .hero-message h1{font-size:32px}#top .hero-oem-label{font-size:18px;padding:7px 14px}#top .hero-series{font-size:14px;gap:5px 12px}#top .hero-qualities{font-size:15px}#top .hero-taglines p{font-size:var(--hero-fact-size)}}

/* Desktop hero copy fills the right-center area; compact screens retain natural flow. */
@media(min-width:1101px){
 /* Overlap fix (2026-11-02). Previously the copy block asserted a hard
    height of clamp(360px,47vh,630px) and the slogan block was anchored to the
    viewport bottom (bottom:13%). On 1080p-class screens (~1900x840 usable after
    browser chrome) the copy is physically taller than that clamp, so it spilled
    out of its own box and collided with the slogan by up to 33px. Both blocks are
    now normal grid items in two auto rows, so the copy is never clipped to a
    guessed height and the gap below it is structural. */
 #top .hero-facts-layout{grid-template-rows:auto auto;align-content:space-between;row-gap:clamp(20px,3.2vh,44px);padding-top:clamp(56px,8vh,112px)!important;padding-bottom:clamp(80px,13vh,160px)!important}
 #top .hero-stats-left{grid-row:1/-1;align-self:center}
 #top .hero-stats-right{grid-row:1/-1;align-self:center}
 #top .hero-message{position:static;grid-column:2;grid-row:1;justify-self:end;width:min(33vw,780px);height:auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:clamp(18px,3vh,40px);margin-right:calc(-1.52vw - 20px)}
 #top .hero-brand-invitation{position:static;grid-column:2;grid-row:2;justify-self:center;left:auto;right:auto;bottom:auto}
 #top .hero-stats-right{max-width:12vw}
 #top .hero-oem-label{font-size:clamp(24px,1.35vw,34px);padding:11px 24px}
 #top .hero-message h1{font-size:clamp(42px,3.2vw,76px);line-height:1.08;margin:0}
 #top .hero-series{font-size:clamp(21px,1.35vw,32px);line-height:1.45;gap:7px 18px}
 #top .hero-carbon{font-size:clamp(28px,1.8vw,42px);line-height:1.25;margin:0}
 #top .hero-qualities{font-size:clamp(20px,1.3vw,30px);line-height:1.5}
 /* Slogan is deliberately quieter than the stat figures (22px) and slightly
    larger than their captions (12px), so the eye lands on the product copy
    first and on the invitation second. */
 #top .hero-taglines p{font-size:15px;line-height:1.55}
}