/* One continuous wall, with the original brand and introduction side by side. */
#hop-website{
  --hop-header-height:84px;
  --hop-wall-size:max(100%, 1100px) auto;
  --hop-wall-position:center;
}
#hop-website .site-header,#hop-website .hero-panel{
  background-image:linear-gradient(var(--hop-wall-shade),var(--hop-wall-shade)),url("assets/betonwand-zonder-conusgaten.webp");
}
#hop-website .header-inner{
  min-height:var(--hop-header-height);
  padding-block:20px;
  justify-content:flex-end;
  flex-wrap:nowrap;
}
#hop-website #hop-navigation{width:auto;gap:32px}
#hop-website #hop-navigation .home-link{display:inline-flex}
#hop-website #hop-navigation .header-contact{border:0;padding:0;margin:0;gap:14px}
#hop-website .header-contact span{background:transparent;min-width:20px}
#hop-website .hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(40px,6vw,88px);
  min-height:440px;
  padding-top:12px;
  padding-bottom:72px;
  align-items:center;
}
#hop-website .hero .brand{
  width:100%;
  max-width:440px;
  height:auto;
  margin:0;
  justify-self:center;
  aspect-ratio:1420/1320;
}
/* A fine shadow gives the original crane lines definition against the wall. */
#hop-website .hero .brand-logo{
  width:100%;height:100%;overflow:visible;
  filter:drop-shadow(0 1px .6px rgb(32 35 25 / 52%));
}
#hop-website .hero-copy{width:100%;max-width:none;min-width:0}
#hop-website .hero h1{
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(30px,7.5cqi,44px);
  font-weight:700;
  line-height:1.16;
  letter-spacing:-.9px;
  text-transform:none;
  white-space:nowrap;
  margin-bottom:22px;
  color:#151819;
}
#hop-website .hero h1 span{color:inherit}
#hop-website #home{scroll-margin-top:calc(var(--hop-header-height) + 16px)}
#hop-website .hero-description{
  max-width:350px;
  font-size:16px;
  line-height:1.65;
  margin-bottom:30px;
  color:#202526;
}
#hop-website .hero-actions{gap:14px 24px;align-items:center;flex-wrap:wrap}
#hop-website .hero-actions .primary-action{font-size:12px;padding:17px 20px;gap:28px;min-height:54px}
#hop-website .hero-contact{font-size:12px;gap:14px;min-height:44px;border-bottom-color:#404440}
@media(max-width:900px){
  #hop-website{--hop-header-height:76px}
  #hop-website .header-inner{padding-block:16px;min-height:var(--hop-header-height)}
  #hop-website #hop-navigation{gap:0}
  #hop-website #hop-navigation .header-contact{padding:12px 0;min-height:46px}
  #hop-website .hero{gap:40px;min-height:390px;padding-top:10px;padding-bottom:56px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  #hop-website .hero h1{font-size:clamp(28px,8.4cqi,36px);letter-spacing:-.7px;margin-bottom:18px}
  #hop-website .hero-description{font-size:15px;margin-bottom:22px}
  #hop-website .hero-actions{gap:12px 20px}
  #hop-website .hero-actions .primary-action{font-size:12px;padding-inline:16px;gap:24px}
}
@media(max-width:699px){
  #hop-website{--hop-header-height:68px;--hop-wall-position:40%}
  #hop-website .header-inner{padding-block:12px;min-height:var(--hop-header-height)}
  #hop-website .hero{grid-template-columns:minmax(0,1fr);gap:30px;min-height:0;padding-top:0;padding-bottom:40px;text-align:center}
  #hop-website .hero .brand{width:min(100%,300px)}
  #hop-website .hero-copy{width:100%;max-width:440px;justify-self:center}
  #hop-website .hero h1{font-size:clamp(28px,7.7cqi,32px);line-height:1.2;letter-spacing:-.5px;margin-bottom:14px}
  #hop-website .hero-description{max-width:280px;margin:0 auto 22px;font-size:14px}
  #hop-website .hero-actions{justify-content:center;gap:8px 18px}
  #hop-website .hero-actions .primary-action{font-size:11px;gap:18px;padding-inline:15px;min-height:50px}
  #hop-website .hero-contact{font-size:11px;gap:10px;min-height:44px}
}
@media(max-width:360px){
  #hop-website .hero .brand{width:260px;max-width:100%}
  #hop-website .hero{gap:26px}
  #hop-website .hero-actions{flex-direction:column;gap:8px}
}