/* One shared breakpoint for the header, trigger and navigation panel. */
.header{
  --header-height:95px;
  height:var(--header-height);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  padding:0 4%;
  position:sticky;
  top:0;
  z-index:30;
  background:#fff;
  border-bottom:1px solid #ececec;
}
.header .brand{width:165px;display:block}
.header .brand img{width:100%;height:auto;max-height:65px;object-fit:contain}
.header .desktop-nav{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.1vw,30px);margin:0;min-width:0;height:100%}
.header .nav-link,.header .mega-trigger{white-space:nowrap;font-size:12px;line-height:1.4;flex-shrink:0}
.nav-group{height:100%;display:flex;align-items:center}
.mega-trigger{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.nav-chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .2s;flex:none}
[aria-expanded=true]>.nav-chevron{transform:rotate(180deg)}
.mega-trigger[aria-expanded=true],.mega-trigger[data-current=true]{text-decoration:underline;text-underline-offset:6px}
.header .mega-panel{position:absolute;top:100%;left:0;right:0;background:#fff;padding:32px 4% 36px;border-top:1px solid #ededed;border-bottom:1px solid #e7e7e7;box-shadow:0 22px 28px #00000010;display:grid;gap:36px;max-height:calc(100dvh - var(--header-height) - 32px);overflow:auto;overscroll-behavior:contain;animation:mega-reveal .18s ease-out}
.header .mega-panel span{display:block;margin-left:0}
.header .mega-panel a::after{display:none}
.mega-custom{grid-template-columns:minmax(190px,.8fr) 3fr}
.mega-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-content:start}
.header .mega-panel.mega-services{grid-template-columns:minmax(190px,.85fr) minmax(0,2fr) minmax(180px,.9fr);gap:32px}
.mega-intro{padding:4px 22px 0 0;border-right:1px solid #e8e8e8}
.mega-eyebrow{font-size:9px;letter-spacing:.12em;line-height:1.5;color:#6c6c6c;margin:0 0 16px}
.mega-heading{font-size:clamp(28px,2.6vw,39px);line-height:1.03;letter-spacing:-.055em;margin:0 0 15px;font-weight:400}
.mega-description{max-width:220px;font-size:12px;line-height:1.7;color:#6a6a6a;margin:0 0 24px}
.mega-all{display:inline-flex;align-items:center;gap:16px;font-size:11px;line-height:1.5;border-bottom:1px solid #222;padding-bottom:5px}
.mega-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mega-card{min-width:0;display:block}
.mega-image{overflow:hidden;background:#f1efec;aspect-ratio:1.5;margin-bottom:15px}
.mega-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mega-card:first-child img{object-position:50% 60%}
.header .mega-panel .mega-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:17px;line-height:1.3;letter-spacing:-.035em}
.nav-arrow{flex:none;transition:transform .2s}
.mega-card-description{display:block;font-size:11px;line-height:1.5;color:#6a6a6a;margin-top:6px}
.mega-card:hover img,.mega-card:focus-visible img{transform:scale(1.035)}
.mega-card:hover .nav-arrow,.mega-service:hover .nav-arrow{transform:translate(2px,-2px)}
.mega-service{display:flex;align-items:center;gap:12px;min-height:83px;padding:15px 0;border-bottom:1px solid #e7e7e7}
.mega-service-number{font-size:9px;color:#888;align-self:flex-start;padding-top:4px}
.mega-service>span:nth-child(2){flex:1;min-width:0}
.mega-service strong{display:block;font-size:15px;line-height:1.3;font-weight:400;letter-spacing:-.025em}
.mega-service small{display:block;font-size:10px;line-height:1.5;color:#6a6a6a;margin-top:5px}
.mega-service:hover strong,.mega-service[aria-current=page] strong{text-decoration:underline;text-underline-offset:4px}
.mega-feature{position:relative;display:block;overflow:hidden;min-height:245px;background:#eee}
.mega-feature img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.header .mega-panel .mega-feature>span{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;gap:10px;padding:35px 16px 16px;background:linear-gradient(transparent,#000b);color:#fff;font-size:11px;line-height:1.5}
.header a:focus-visible,.header button:focus-visible{outline:2px solid #111;outline-offset:5px}
@keyframes mega-reveal{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:961px) and (max-width:1100px){
  .header{gap:18px}
  .header .brand{width:150px}
  .header .desktop-nav{gap:18px}
  .header .mega-panel{gap:24px}
  .mega-cards{gap:16px}
  .header .mega-panel .mega-card-title{font-size:15px}
  .header .mega-panel.mega-services{grid-template-columns:190px minmax(0,1fr)}
  .mega-feature{display:none}
}
.header .header-actions{display:flex;align-items:center;gap:8px;margin:0;flex-shrink:0}
.header .header-actions .icon-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:44px;flex:none;padding:8px}
.header .header-actions .icon-button svg{width:21px;height:21px}
.header .header-actions #menu-toggle{display:none}
.header #mobile-nav{display:none}
.menu-lines{display:block;position:relative;width:20px;height:16px}
.menu-lines::before,.menu-lines::after{content:'';position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .2s,top .2s}
.menu-lines::before{top:4px}
.menu-lines::after{top:11px}
#menu-toggle[aria-expanded=true] .menu-lines::before{top:7px;transform:rotate(45deg)}
#menu-toggle[aria-expanded=true] .menu-lines::after{top:7px;transform:rotate(-45deg)}

@media(max-width:960px){
  .header{--header-height:80px;grid-template-columns:auto auto;justify-content:space-between;gap:15px;padding:0 5%}
  .header .brand{width:145px}
  .header .desktop-nav{display:none}
  .header .header-actions{gap:5px}
  .header .header-actions #menu-toggle{display:inline-flex;margin-left:5px}
  .header #mobile-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    width:auto;
    margin:0;
    padding:15px 5% 24px;
    background:#fff;
    border-top:1px solid #ececec;
    box-shadow:0 18px 28px #00000012;
    max-height:calc(100dvh - var(--header-height) - 32px);
    overflow:auto;
    overscroll-behavior:contain;
  }
  .header #mobile-nav:not([hidden]){display:flex;flex-direction:column}
  .header #mobile-nav a,.header #mobile-nav .mobile-disclosure{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-shrink:0;
    width:100%;
    padding:15px 4px;
    margin:0;
    min-height:55px;
    font-size:20px;
    line-height:1.25;
    letter-spacing:-.035em;
    border-bottom:1px solid #ededed;
    white-space:normal;
  }
  .header #mobile-nav .mobile-disclosure{background:none;border:0;color:inherit;font-family:inherit;cursor:pointer;text-align:left}
  .mobile-group{border-bottom:1px solid #ededed}
  .header #mobile-nav .mobile-subnav{padding:0 4px 12px 16px}
  .header #mobile-nav .mobile-subnav a{min-height:44px;padding:12px 10px;font-size:15px;line-height:1.4;letter-spacing:-.015em;border:0}
  .header #mobile-nav .mobile-subnav a::after{font-size:15px}
  .header #mobile-nav .mobile-subnav a.mobile-all{font-size:12px;color:#666;margin-top:4px}
  .mobile-disclosure .nav-chevron{width:16px;height:16px}
  .header #mobile-nav .mobile-disclosure[aria-expanded=true]{font-weight:500}
  .header #mobile-nav a::after{content:'';width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url('/assets/arrow-up-right.svg') center/contain no-repeat;mask:url('/assets/arrow-up-right.svg') center/contain no-repeat;color:#888}
  .header #mobile-nav a:hover,.header #mobile-nav a[aria-current=page]{color:#111;background:#f7f7f7}
  .header #mobile-nav a:last-child{border-bottom:0}
}
@media(max-width:640px){
  .header{--header-height:75px;padding:0 6%;gap:10px}
  .header .brand{width:125px}
  .header .header-actions{gap:0}
  .header .header-actions .icon-button{width:36px;height:44px;padding:8px}
  .header .header-actions .icon-button svg{width:20px;height:20px}
  .header .header-actions #menu-toggle{margin-left:2px}
  .header #mobile-nav{padding:12px 6% 20px}
  .header #mobile-nav a,.header #mobile-nav .mobile-disclosure{padding:14px 2px;min-height:54px}
}
@media(max-width:359px){
  .header{padding:0 4%;gap:6px}
  .header .brand{width:110px}
  .header .header-actions .icon-button{width:34px}
}
@media(prefers-reduced-motion:reduce){
  .menu-lines::before,.menu-lines::after,.nav-chevron,.mega-image img,.nav-arrow{transition:none}
  .header #mobile-nav:not([hidden]),.header .mega-panel{animation:none}
}