.site-header{
  background:#fff;
  border-bottom:0;
  position:sticky;top:0;z-index:50;
}
.site-header::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:clamp(10px,.9766vw,20px);
  background:#f4f4f4;
}
.site-header__inner{
  display:flex;align-items:flex-start;
  width:min(calc(100% - 16.6vw),1708px);
  min-height:clamp(72px,7.08vw,145px);
  padding-top:clamp(24px,2.344vw,48px);
  padding-left:clamp(10px,.9766vw,20px);
  padding-right:0;
  gap:0;
  max-width:none;
  margin:0 auto;
}
.site-header__logo{
  font-family:var(--sans);
  flex:0 0 auto;
  margin-right:clamp(98px,9.57vw,196px);
  font-size:clamp(15px,1.465vw,30px);
  font-weight:400;
  line-height:1;
  letter-spacing:-0.035em;
  color:var(--ink);
}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(15px,1.465vw,30px);
  white-space:nowrap;
}
.nav__item{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--sans);
  font-size:clamp(10.5px,1.025vw,21px);
  font-weight:400;
  line-height:1.2;
  color:var(--ink);
  padding:clamp(1px,.0977vw,2px) 0 clamp(6px,.586vw,12px);
  cursor:pointer;
  border:0;
  background:transparent;
}
.nav__caret{font-size:.65em;color:currentColor;margin-left:2px}
.nav__trigger[aria-expanded="true"] .nav__caret{transform:rotate(180deg)}

.site-header__cta{
  margin-left:auto;
  padding-left:clamp(20px,1.953vw,40px);
  display:flex;
  align-items:center;
  gap:clamp(17px,1.66vw,34px);
  white-space:nowrap;
}
.site-header__cta-link{
  font-family:var(--sans);
  font-size:clamp(10px,.9766vw,20px);
  font-weight:600;
  line-height:1.2;
  border-bottom:1px dotted var(--ink);
  padding-bottom:1px;
  color:var(--ink);
}
.site-header__phone{
  font-family:var(--sans);
  font-size:clamp(10px,.9766vw,20px);
  font-weight:600;
  line-height:1.2;
  color:var(--ink);
}

.burger{
  display:none;
  width:36px;height:36px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:0;
  margin-left:auto;
}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink)}

@media (max-width:899px){
  .site-header::before{display:none}
  .nav,.site-header__cta{display:none}
  .burger{display:inline-flex}
  .site-header__inner{
    align-items:center;
    width:100%;
    min-height:72px;
    padding:0 var(--gutter);
    gap:10px;
  }
  .site-header__logo{
    margin-right:0;
    font-size:24px;
  }
}

/* mobile menu drawer */
.mobile-menu{
  display:none;
  position:fixed;inset:0;
  background:#fff;
  z-index:100;
  flex-direction:column;
}
.mobile-menu.is-open{display:flex}
.mobile-menu__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
}
.mobile-menu__close{
  width:36px;height:36px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--ink);
}
.mobile-menu__list{
  flex:1;
  display:flex;flex-direction:column;
  padding:8px 0;
  overflow-y:auto;
}
.mobile-menu__list a{
  padding:16px 20px;
  border-bottom:1px solid var(--line);
  font-size:17px;font-weight:600;color:var(--ink);
}
.site-header :where(a,button):focus-visible,
.mobile-menu :where(a,button):focus-visible,
.mega-menu :where(a,button):focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}
.mobile-menu__foot{
  padding:20px;
  display:flex;flex-direction:column;gap:12px;
  border-top:1px solid var(--line);
}
.mobile-menu__foot .btn{justify-content:center}
.mobile-menu__phone{
  font-size:18px;font-weight:600;text-align:center;color:var(--ink);
}

/* Desktop mega menus mirror the Tilda header popups on domgazobeton.com. */
.mega-menu{
  width:min(86.1vw,1764px);
  max-width:none;
  height:min(32.52vw,calc(100dvh - 48px),666px);
  max-height:calc(100dvh - 48px);
  margin:max(24px,3.1dvh) auto auto;
  transform:translateX(clamp(0px,1.17vw,24px));
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:4px;
  background:#fff;
  color:#17171a;
}
.mega-menu:focus{outline:none}
.mega-menu::backdrop{background:rgba(23,23,26,.40)}
.mega-menu[open]{animation:mega-menu-in .3s ease-out}
.mega-menu__layout{
  display:grid;
  grid-template-columns:60.0833% 39.9167%;
  width:100%;
  height:100%;
  min-height:0;
}
.mega-menu__content{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:space-between;
  padding:clamp(24px,1.76vw,36px) clamp(20px,2.35vw,48px) clamp(24px,1.85vw,38px)
    clamp(20px,1.42vw,29px);
  background:#fff;
}
.mega-menu__links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.mega-menu__links a{
  display:inline-flex;
  align-items:center;
  color:#9b9ba5;
  font-family:var(--sans);
  font-size:clamp(28px,2.93vw,60px);
  font-weight:400;
  line-height:1.25;
  letter-spacing:-.02em;
  transition:color .3s ease;
}
.mega-menu__links a::after{
  content:'→';
  flex:0 0 auto;
  margin-left:.42em;
  font-size:.48em;
  line-height:1;
  transform:translateY(.06em);
}
.mega-menu__links a:where(:hover,:focus-visible){color:#17171a}
.mega-menu__bottom{
  display:grid;
  grid-template-columns:minmax(0,57%) max-content;
  align-items:end;
  gap:12%;
}
.mega-menu__bottom p{
  margin:0;
  color:#9b9ba5;
  font-family:var(--sans);
  font-size:clamp(13px,1.1vw,22px);
  font-weight:400;
  line-height:1.45;
}
.mega-menu__button{
  display:inline-flex;
  min-height:clamp(45px,3.28vw,67px);
  align-items:center;
  justify-content:center;
  padding:10px clamp(18px,1.65vw,34px);
  background:#17171a;
  color:#fff;
  font-family:var(--sans);
  font-size:clamp(13px,1.1vw,22px);
  line-height:1.2;
  white-space:nowrap;
}
.mega-menu__image{
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  object-position:center;
  background:#e9e9e9;
}
@keyframes mega-menu-in{
  from{opacity:0}
  to{opacity:1}
}
@media (max-width:1199px) and (min-width:900px){
  .mega-menu{
    width:calc(100vw - 64px);
    height:min(54vw,calc(100dvh - 48px),518px);
  }
  .mega-menu__layout{
    grid-template-columns:51.5625% 48.4375%;
    aspect-ratio:auto;
  }
  .mega-menu__content{padding:25px 20px 30px}
  .mega-menu__links a{font-size:clamp(28px,3.34vw,40px)}
  .mega-menu__bottom{
    grid-template-columns:1fr;
    gap:18px;
  }
  .mega-menu__bottom p{max-width:380px}
  .mega-menu__button{justify-self:start}
}
@media (max-width:899px){
  .mega-menu{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mega-menu[open]{animation:none}
  .mega-menu__links a{transition:none}
}