.km-header{
  position:sticky;
  top:0;
  z-index:1200;
  padding:8px 0 0;
  background:#121317;
  color:#121317;
}
body.admin-bar .km-header{top:32px}
.km-header__frame{padding-left:8px;padding-right:8px}
.km-header__card{
  min-height:96px;
  display:grid;
  grid-template-columns:minmax(420px,.95fr) auto auto;
  align-items:center;
  gap:20px;
  padding:12px 28px;
  border-radius:24px;
  background:#efeff0;
}
.km-header__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  color:#121317!important;
  text-decoration:none;
}
.km-header__logo{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
}
.km-header__logo img{width:34px;height:34px;object-fit:contain}
.km-header__brand-name{display:flex;flex-direction:column;min-width:max-content}
.km-header__brand-name strong{color:#121317!important;font:600 22px/24px var(--km-display);text-transform:uppercase;letter-spacing:-.02em}
.km-header__brand-name small{margin-top:3px;color:#121317!important;font:500 12px/14px var(--km-ui)}
.km-header__brand-divider{width:1px;height:48px;background:#121317;opacity:.24}
.km-header__address{min-width:0;display:flex;flex-direction:column;color:#121317;font:600 12px/15px var(--km-ui)}
.km-header__address b{font-weight:700}
.km-header__address span{margin-top:2px;white-space:nowrap}

.km-header__nav{display:flex;align-items:center;justify-content:center;gap:8px}
.km-header__nav a{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  border-radius:999px;
  background:#fff;
  color:#121317!important;
  font:700 13px/16px var(--km-ui);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.km-header__nav a:hover,.km-header__nav a:focus-visible{background:#2affee;color:#121317!important}
.km-header__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}

.km-phone-menu{position:relative}
.km-header__phone-button,
.km-header__menu-button{
  appearance:none!important;
  -webkit-appearance:none!important;
  min-height:48px!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
  cursor:pointer;
  font-family:var(--km-ui)!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}
.km-header__phone-button{
  min-width:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 18px!important;
  background:#fff!important;
  color:#121317!important;
}
.km-header__phone-button svg{width:18px;height:18px}
.km-header__chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .18s ease}
.km-header__phone-button[aria-expanded="true"]{background:#121317!important;color:#fff!important}
.km-header__phone-button[aria-expanded="true"] .km-header__chevron{transform:rotate(225deg) translate(-1px,-1px)}
.km-header__menu-button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 20px!important;
  background:#fff!important;
  color:#121317!important;
}
.km-header__menu-button:hover,.km-header__menu-button:focus-visible{background:#2affee!important}
.km-header__menu-icon{width:20px;display:grid;gap:4px}
.km-header__menu-icon i{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}

.km-phone-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:340px;
  padding:10px 18px;
  border:2px solid #121317;
  border-radius:14px;
  background:#fff;
  color:#121317;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
  z-index:1300;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.985);
  transform-origin:top right;
  transition:
    opacity .22s ease,
    transform .28s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear .28s;
}
.km-phone-dropdown.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.km-phone-dropdown[hidden]{display:none!important}
.km-phone-dropdown__item{padding:14px 0;text-align:right;border-top:1px solid #e4e4e4}
.km-phone-dropdown__item:first-child{border-top:0}
.km-phone-dropdown__item span{display:block;color:#6b6b6d;font:700 12px/14px var(--km-ui);text-transform:uppercase}
.km-phone-dropdown__item small{display:block;margin-top:4px;color:#8d8d90;font:500 11px/14px var(--km-ui)}
.km-phone-dropdown__item a{display:block;margin-top:8px;color:#121317!important;font:500 21px/24px var(--km-display);text-decoration:none}
.km-phone-dropdown__item a:hover{color:#18adad!important}

.km-mega-menu{
  position:fixed;
  inset:0;
  z-index:1500;
  padding:8px;
  overflow:hidden;
  color:#fff;

  /* The original site lets the page remain visible under the menu.
     Blur belongs to the overlay itself, not to the menu panels. */
  background:rgba(18,19,23,.26);
  -webkit-backdrop-filter:blur(18px) saturate(.92);
  backdrop-filter:blur(18px) saturate(.92);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .28s ease,
    visibility 0s linear .34s,
    -webkit-backdrop-filter .32s ease,
    backdrop-filter .32s ease;
}
body.admin-bar .km-mega-menu{top:32px}
.km-mega-menu[hidden]{display:none!important}
.km-mega-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.km-mega-menu__canvas{
  min-height:calc(100dvh - 16px);
  height:calc(100dvh - 16px);
  display:grid;
  grid-template-columns:minmax(320px,29%) 1fr;
  gap:8px;
}

.km-mega-menu__side,
.km-mega-menu__content{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:#27282b;
  opacity:0;
  will-change:transform,opacity;
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    opacity .30s ease;
}
.km-mega-menu__side{transform:translate3d(-18px,10px,0) scale(.992)}
.km-mega-menu__content{transform:translate3d(18px,10px,0) scale(.992)}

.km-mega-menu.is-open .km-mega-menu__side,
.km-mega-menu.is-open .km-mega-menu__content{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.km-mega-menu.is-open .km-mega-menu__side{transition-delay:.025s}
.km-mega-menu.is-open .km-mega-menu__content{transition-delay:.065s}

.km-mega-menu__side{
  display:flex;
  flex-direction:column;
  padding:42px 32px 32px;
}
.km-mega-menu__main-nav{display:grid;gap:18px}
.km-mega-menu__main-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff!important;
  font:400 clamp(26px,2.2vw,40px)/1.08 var(--km-display);
  text-transform:uppercase;
  text-decoration:none;
  letter-spacing:-.035em;
  opacity:0;
  transform:translateY(10px);
  transition:
    color .15s ease,
    opacity .28s ease,
    transform .34s cubic-bezier(.2,.75,.25,1);
}
.km-mega-menu.is-open .km-mega-menu__main-nav a{
  opacity:1;
  transform:translateY(0);
}
.km-mega-menu.is-open .km-mega-menu__main-nav a:nth-child(1){transition-delay:.10s}
.km-mega-menu.is-open .km-mega-menu__main-nav a:nth-child(2){transition-delay:.13s}
.km-mega-menu.is-open .km-mega-menu__main-nav a:nth-child(3){transition-delay:.16s}
.km-mega-menu.is-open .km-mega-menu__main-nav a:nth-child(4){transition-delay:.19s}

.km-mega-menu__arrow{width:28px;color:transparent;transition:color .15s ease}
.km-mega-menu__main-nav a:hover,
.km-mega-menu__main-nav a.is-active{color:#2affee!important}
.km-mega-menu__main-nav a:hover .km-mega-menu__arrow,
.km-mega-menu__main-nav a.is-active .km-mega-menu__arrow{color:#2affee}

.km-mega-menu__side-links{
  display:grid;
  gap:14px;
  margin-top:46px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease .19s,transform .34s cubic-bezier(.2,.75,.25,1) .19s;
}
.km-mega-menu.is-open .km-mega-menu__side-links{opacity:1;transform:translateY(0)}
.km-mega-menu__side-links a{
  color:#fff!important;
  font:500 20px/24px var(--km-display);
  text-decoration:none;
}
.km-mega-menu__side-links a:hover{color:#2affee!important}

.km-mega-menu__main-phone{
  margin-top:auto;
  color:#fff!important;
  font:400 clamp(26px,2.2vw,40px)/1 var(--km-display);
  text-decoration:none;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .28s ease .22s,transform .34s cubic-bezier(.2,.75,.25,1) .22s;
}
.km-mega-menu.is-open .km-mega-menu__main-phone{opacity:1;transform:translateY(0)}

.km-mega-menu__content{padding:42px 34px 34px}

/* Close pill is attached to overlay root.
   On desktop it visually sits inside the upper-right corner of the right panel;
   on mobile it remains accessible above the scrolling menu content. */
.km-mega-menu__close{
  position:fixed;
  top:32px;
  right:32px;
  z-index:1510;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  border:0!important;
  border-radius:999px!important;
  background:#121317!important;
  color:#fff!important;
  box-shadow:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer;
  text-transform:uppercase;
  font:700 14px/18px var(--km-ui)!important;

  opacity:0;
  transform:translateY(-8px) scale(.96);
  transition:
    opacity .22s ease,
    transform .32s cubic-bezier(.2,.8,.2,1),
    color .16s ease,
    background .16s ease;
}
body.admin-bar .km-mega-menu__close{top:64px}
.km-mega-menu.is-open .km-mega-menu__close{
  opacity:1;
  transform:translateY(0) scale(1);
  transition-delay:.10s, .10s, 0s, 0s;
}
.km-mega-menu__close:hover,
.km-mega-menu__close:focus-visible{
  color:#2affee!important;
  outline:none;
}
.km-mega-menu__close-icon{
  position:relative;
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
}
.km-mega-menu__close-icon::before,
.km-mega-menu__close-icon::after{
  content:"";
  position:absolute;
  left:1px;
  top:10px;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor;
}
.km-mega-menu__close-icon::before{transform:rotate(45deg)}
.km-mega-menu__close-icon::after{transform:rotate(-45deg)}

.km-mega-menu__columns{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:50px;
  padding:34px 150px 34px 0;
}
.km-mega-menu__column{
  display:flex;
  flex-direction:column;
  gap:14px;
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .28s ease,
    transform .36s cubic-bezier(.2,.75,.25,1);
}
.km-mega-menu.is-open .km-mega-menu__column{opacity:1;transform:translateY(0)}
.km-mega-menu.is-open .km-mega-menu__column:nth-child(1){transition-delay:.13s}
.km-mega-menu.is-open .km-mega-menu__column:nth-child(2){transition-delay:.17s}
.km-mega-menu.is-open .km-mega-menu__column:nth-child(3){transition-delay:.21s}

.km-mega-menu__label{
  margin-bottom:4px;
  color:rgba(255,255,255,.48);
  font:700 13px/16px var(--km-ui);
  text-transform:uppercase;
}
.km-mega-menu__column a{
  max-width:280px;
  color:#fff!important;
  font:500 20px/24px var(--km-display);
  text-decoration:none;
}
.km-mega-menu__column a:hover{color:#2affee!important}

.km-mega-menu__contact-strip{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity .30s ease .20s,
    transform .38s cubic-bezier(.2,.75,.25,1) .20s;
}
.km-mega-menu.is-open .km-mega-menu__contact-strip{
  opacity:1;
  transform:translateY(0);
}
.km-mega-menu__contact-strip>div{
  min-height:126px;
  padding:22px;
  border-radius:18px;
  background:#3b3e43;
}
.km-mega-menu__contact-strip span{
  display:block;
  color:rgba(255,255,255,.5);
  font:700 12px/14px var(--km-ui);
  text-transform:uppercase;
}
.km-mega-menu__contact-strip a{
  display:block;
  margin-top:14px;
  color:#fff!important;
  font:400 clamp(21px,1.7vw,32px)/1 var(--km-display);
  text-decoration:none;
}
.km-mega-menu__contact-strip a:hover{color:#2affee!important}

/* Body is locked via JS with fixed positioning to preserve scroll position. */
body.km-service-theme.km-menu-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

@media (prefers-reduced-motion:reduce){
  .km-mega-menu,
  .km-mega-menu *,
  .km-phone-dropdown{
    transition-duration:.001ms!important;
    transition-delay:0s!important;
    animation-duration:.001ms!important;
  }
}

@media(max-width:1370px){
  .km-header__card{grid-template-columns:minmax(340px,.8fr) auto auto;padding-left:18px;padding-right:18px}
  .km-header__address span{font-size:11px}.km-header__nav a{padding:0 14px;font-size:12px}
}
@media(max-width:1120px){
  .km-header__card{grid-template-columns:1fr auto}
  .km-header__nav{display:none}
  .km-header__address{display:none}.km-header__brand-divider{display:none}
  .km-header__brand{max-width:max-content}
  .km-mega-menu__canvas{grid-template-columns:36% 1fr}
  .km-mega-menu__columns{grid-template-columns:1fr 1fr;padding-right:120px}
  .km-mega-menu__column:last-child{display:none}
}
@media(max-width:767px){
  body.admin-bar .km-header{top:46px}
  body.admin-bar .km-mega-menu{top:46px}
  .km-header{padding-top:4px}
  .km-header__frame{padding-left:4px;padding-right:4px}
  .km-header__card{min-height:70px;padding:9px 10px;border-radius:18px;gap:8px}
  .km-header__logo{width:44px;height:44px;flex-basis:44px}.km-header__logo img{width:30px;height:30px}
  .km-header__brand-name strong{font-size:16px;line-height:18px}.km-header__brand-name small{font-size:10px}
  .km-header__phone-button{min-width:48px!important;width:48px!important;padding:0!important}.km-header__phone-button .km-header__chevron{display:none}
  .km-header__menu-button{width:48px!important;padding:0!important}.km-header__menu-button>span:last-child{display:none}
  .km-phone-dropdown{position:fixed;top:82px;right:8px;left:8px;width:auto}
  body.admin-bar .km-phone-dropdown{top:128px}
  .km-mega-menu{padding:4px}
  .km-mega-menu__canvas{
    min-height:calc(100dvh - 8px);
    height:auto;
    grid-template-columns:1fr;
    overflow:auto;
    padding-bottom:4px;
  }
  .km-mega-menu__side{
    min-height:calc(100dvh - 8px);
    padding:84px 20px 28px;
  }
  .km-mega-menu__content{display:none}
  .km-mega-menu__close{
    top:16px;
    right:16px;
    min-height:50px;
    padding:0 18px;
  }
  body.admin-bar .km-mega-menu__close{top:62px}
  .km-mega-menu__main-nav a{font-size:32px}
  .km-mega-menu__main-phone{font-size:28px}
}


/* ==========================================================
   KM SERVICE HEADER / MEGA MENU — v3.4 layout corrections
   ========================================================== */

@media (min-width:768px){
  .km-mega-menu{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding:16px;
  }

  .km-mega-menu__canvas{
    width:min(1760px,100%);
    height:min(820px,calc(100dvh - 32px));
    min-height:min(620px,calc(100dvh - 32px));
    max-height:calc(100dvh - 32px);
    grid-template-columns:minmax(330px,29%) minmax(0,1fr);
    align-self:flex-start;
  }

  body.admin-bar .km-mega-menu__canvas{
    height:min(790px,calc(100dvh - 64px));
    min-height:min(590px,calc(100dvh - 64px));
    max-height:calc(100dvh - 64px);
  }

  .km-mega-menu__side,
  .km-mega-menu__content{
    min-height:0;
    height:100%;
    max-height:100%;
  }

  .km-mega-menu__side{
    overflow:auto;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
  }

  .km-mega-menu__content{
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    padding:0;
    overflow:hidden;
  }

  .km-mega-menu__scroll{
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.22) transparent;
    padding:42px 34px 24px;
  }

  .km-mega-menu__columns{
    padding:34px 150px 20px 0;
  }

  .km-mega-menu__contact-strip{
    position:static;
    left:auto;
    right:auto;
    bottom:auto;
    flex:0 0 auto;
    margin:0 10px 10px;
  }

  .km-mega-menu__close{
    position:absolute!important;
    top:20px!important;
    right:20px!important;
  }

  .km-mega-menu__close--desktop{display:flex!important}
  .km-mega-menu__close--mobile{display:none!important}
}

@media (max-width:767px){
  .km-mega-menu__close--desktop{display:none!important}
  .km-mega-menu__close--mobile{
    display:flex!important;
    position:absolute!important;
    top:16px!important;
    right:16px!important;
  }

  body.admin-bar .km-mega-menu__close--mobile{
    top:16px!important;
  }

  .km-mega-menu__side{
    position:relative;
    overflow:auto;
  }
}

/* Better low-height desktop behavior: shrink typography and cards before hiding content. */
@media (min-width:768px) and (max-height:760px){
  .km-mega-menu__side{padding:30px 26px 24px}
  .km-mega-menu__main-nav{gap:12px}
  .km-mega-menu__main-nav a{font-size:clamp(23px,1.8vw,32px)}
  .km-mega-menu__side-links{margin-top:26px;gap:10px}
  .km-mega-menu__side-links a{font-size:17px;line-height:21px}
  .km-mega-menu__main-phone{font-size:clamp(22px,1.8vw,28px)}
  .km-mega-menu__scroll{padding-top:28px}
  .km-mega-menu__columns{padding-top:28px}
  .km-mega-menu__column{gap:10px}
  .km-mega-menu__column a{font-size:17px;line-height:21px}
  .km-mega-menu__contact-strip>div{min-height:96px;padding:16px}
  .km-mega-menu__contact-strip a{margin-top:10px;font-size:clamp(18px,1.45vw,25px)}
}

/* WebKit scrollbars stay subtle, matching the reference UI. */
.km-mega-menu__side::-webkit-scrollbar,
.km-mega-menu__scroll::-webkit-scrollbar{width:6px}
.km-mega-menu__side::-webkit-scrollbar-track,
.km-mega-menu__scroll::-webkit-scrollbar-track{background:transparent}
.km-mega-menu__side::-webkit-scrollbar-thumb,
.km-mega-menu__scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}

/* v7.4: contact emails in compact phone dropdown */
.km-header .km-phone-dropdown__item .km-phone-dropdown__email{display:block;margin-top:6px;color:#277b83!important;font:600 13px/1.35 var(--km-ui,Arial,sans-serif)!important;text-decoration:none;overflow-wrap:anywhere;word-break:break-word}
.km-header .km-phone-dropdown__item .km-phone-dropdown__email:hover{color:#101619!important;text-decoration:underline}
