/* Reflow with the available window, including monitor changes and rotation. */
:root{--page-gutter:clamp(16px,3.333vw,48px);--header-height:clamp(81px,6.5vw,94px);--utility-height:37px;scroll-padding-top:calc(var(--header-height) + 18px)}
.container{width:min(1320px,calc(100% - 2 * var(--page-gutter)))}
.header-inner{height:var(--header-height);gap:clamp(18px,2.8vw,40px)}
.header .brand{max-width:calc(100% - 65px)}
.header .brand>img{width:clamp(173px,18vw,225px)}
.section{padding-block:clamp(56px,7vw,100px)}
.environment-section,.environment-banner{padding-block:clamp(56px,6vw,86px)}
.page-intro{padding-block:clamp(30px,3.333vw,48px) clamp(42px,4.45vw,64px)}
.page-intro h1{font-size:clamp(30px,4.1vw,59px)}
:where(h1,h2,h3,p,a,button,label,small,strong){overflow-wrap:break-word}
:where(.purpose-grid,.solutions-grid,.people-grid,.form-grid,.footer-main,.environment-topics,.environment-statement,.expertise-inner,.admin-layout)>*{min-width:0}
.field :is(input,select,textarea),.admin-toolbar select{min-width:0;max-width:100%}
.receipt-box strong,.admin-list button,.admin-layout .form-card>a{overflow-wrap:anywhere}

/* Content sets the minimum height; the panorama fills the remaining space. */
.hero.hero-energy{display:grid;grid-template-rows:1fr auto;min-height:clamp(0px,calc(100svh - var(--utility-height) - var(--header-height)),850px);align-items:stretch}
.hero-energy .hero-content{align-self:center;padding-block:clamp(28px,5.3svh,64px)}
.hero.hero-energy h1{font-size:clamp(30px,min(4.6vw,6.6svh),68px);letter-spacing:clamp(-2.8px,-.2vw,-1.3px);line-height:1.12}
.hero-energy .kicker{margin-bottom:clamp(16px,2.8svh,27px)}
.hero-energy .hero-content>p:not(.kicker){font-size:clamp(13px,1.04vw,15px);line-height:1.8;margin-top:clamp(16px,2.4svh,28px)}
.hero-energy .hero-actions{margin-top:clamp(18px,3svh,29px)}
.hero-energy .hero-environment{margin-top:clamp(18px,2.6svh,26px)}
.hero-energy .hero-note{margin-top:clamp(16px,2.2svh,22px)}
.hero-energy .hero-bottom{position:relative;inset:auto;align-self:end;padding:14px var(--page-gutter);font-size:7px;min-width:0}
.hero-energy .hero-bottom>span{min-width:0}

dialog{width:min(590px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.text-dialog{padding:clamp(40px,5vw,42px) clamp(20px,3.5vw,36px) clamp(24px,3.5vw,35px)}

@media(max-width:1049px){
  :root{--header-height:81px}
  .header nav{top:100%;max-height:calc(100dvh - var(--header-height) - var(--utility-height) - 8px);overflow-y:auto;overscroll-behavior:contain}
  .header nav>a:not(.btn),.nav-more>summary{white-space:normal}
  .nav-more>div{min-width:0}
  .about-grid,.environment-grid,.quality-grid,.contact-grid,.channel-layout{gap:clamp(28px,4.5vw,65px)}
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
  .field input,.field select,.field textarea{font-size:16px}
}
@media(max-width:719px){
  :root{--header-height:77px}
  .hero.hero-energy h1{font-size:clamp(30px,9.6vw,58px);letter-spacing:-1.55px}
  .hero-energy .hero-content{padding-block:clamp(28px,5.3svh,46px)}
  .hero-energy .hero-bottom{gap:18px;font-size:6px}
  .hero-energy .hero-bottom>a{font-size:6px;white-space:normal}
  .hero-energy .hero-actions .btn{min-width:0;max-width:100%}
  .header .brand>img{width:clamp(173px,49vw,210px)}
  .footer-main{column-gap:clamp(18px,5vw,35px)}
  .form-grid{grid-template-columns:1fr}
}
@media(max-height:500px) and (min-width:720px){
  .hero-energy .hero-content{padding-block:28px}
  .hero-energy .hero-content>p:not(.kicker){max-width:560px}
  .hero-energy .hero-actions{flex-direction:row}
}