/* header.css — design-system.md §3.3 (own @media blocks live here, not in responsive.css) */
.site-header{position:relative;z-index:var(--z-header);background:var(--c-black);color:var(--c-white);   /* not sticky: measured on the original, the header scrolls away with the page */
  transition:background-color var(--dur) ease, box-shadow var(--dur) ease}
.page-home .site-header{background:transparent}                     /* post-3062 + .home .sticky-header */
body.nav-open .site-header{background:transparent;box-shadow:none}   /* the panel's gradient shows through the bar, as on the live site */

/* the panel is a child of the header, so the bar must sit above it to stay visible (and clickable) while open */
.site-header__inner{position:relative;z-index:calc(var(--z-menu) + 1);max-width:var(--container-max);margin:0 auto;padding:20px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;min-height:var(--header-h)}
.site-header__logo{display:block;flex:0 0 auto;width:265px}
.site-header__logo img{display:block;width:100%;height:auto}
.site-header__right{display:flex;align-items:center;justify-content:flex-end;gap:20px;min-width:0}

.site-nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-link{display:block;padding:8px 0;font:500 20px/1 var(--font-sans);text-transform:uppercase;color:var(--c-white);
  transition:color var(--dur) ease}
.nav-link:hover,.nav-link:focus-visible{color:var(--c-teal-hover)}
.nav-link[aria-current="page"]{color:var(--c-white)}                /* original: no active style (active--none) */

.social{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--c-white);
  transition:color var(--dur) ease}
.social svg{width:22px;height:22px;fill:currentColor}
.social a:hover,.social a:focus-visible{color:var(--c-teal-hover)}

.site-header__cta{flex:0 0 auto}

/* hamburger: two 2px lines, 28px wide, 4px apart → X */
.nav-toggle{display:none;position:relative;width:44px;height:44px;margin:0 -8px 0 2px;padding:0;border:0;background:none;
  cursor:pointer;color:var(--c-white)}
.nav-toggle__line{position:absolute;left:8px;top:50%;width:28px;height:2px;background:currentColor;
  transition:transform .5s ease-in-out, background var(--dur) ease}
.nav-toggle__line:first-child{transform:translateY(-3px)}
.nav-toggle__line:last-child{transform:translateY(3px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:first-child{transform:rotate(-135deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__line:last-child{transform:rotate(135deg)}

/* full-screen menu (post-92: nav--fullscreen, gradient 99deg #2E3593 40% → #0FB6E1, rounded bottom corners, 20px padding) */
.nav-panel{position:fixed;inset:0;z-index:var(--z-menu);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--grad-menu);color:var(--c-white);padding:120px 20px 30px; /* post-92: first heading at y≈120 on 390 (measured on the original) */
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur) ease, transform var(--dur) ease, visibility 0s linear var(--dur)}
.nav-panel.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
.nav-panel__inner{display:flex;flex-direction:column;gap:30px;min-height:calc(80vh - var(--header-h));max-width:600px} /* 30px between blocks (post-92 ≤767 gap) */
.nav-panel__heading{margin:0 0 20px;font:800 18px/30px var(--font-sans)}                 /* heading → content gap 20px (post-92 ≤767) */
.nav-panel__group--social .nav-panel__heading{padding-left:10px}                          /* "Social" text at x=30, icon boxes at x=20 (glyph ≈ x=31) */
.nav-panel__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.nav-panel__menu a{display:block;padding:0;font:500 18px/28px var(--font-sans);text-transform:uppercase;color:var(--c-white);
  transition:color var(--dur) ease}                                 /* post-92 ≤880: 18px/28px rows, no extra gap (list = 112px for 4 items) */
.nav-panel__menu a:hover,.nav-panel__menu a:focus-visible{color:var(--c-teal)}
.nav-panel .arrow-link{color:var(--c-white)}
.nav-panel .social{margin:0}                                       /* boxes start at x=20, like the footer */
.nav-panel .arrow-link{display:flex;width:max-content;line-height:19px}   /* live panel e-mail is a 19px block box, not the footer's inline 26px */
.nav-panel__cta{align-self:flex-start;text-transform:none}         /* label is typed uppercase; sits between Navigate and Contact */

@media (max-width:1200px){
  .site-nav__list{gap:10px} .nav-link{font-size:14px}
  .site-header__cta{padding:15px 18px 12px}
}
@media (max-width:1024px){
  .site-header__logo{width:160px} .site-header__right{gap:10px} .nav-link{font-size:12px}
}
@media (max-width:880px){                                          /* mobile header */
  .site-nav,.site-header__social{display:none}
  .nav-toggle{display:block} .nav-panel{display:block}
  .site-header__right{gap:0}
  .site-header__inner{padding:16px 20px;min-height:82px;align-items:center}
  .site-header__logo{align-self:flex-start}
}
@media (max-width:767px){
  .site-header__logo{width:155px} .site-header__cta{padding:12px 18px}
  .nav-panel__group--last{margin-top:-5px}   /* live phone panel: 25px between the e-mail and Social, not the 30px block gap */
}
@media (min-width:881px){ .nav-panel{display:none !important} .site-header__inner{padding-right:40px} }     /* never render the panel on desktop; measured: right cluster ends at x=1399 (pill 1270–1399) while the logo starts at x=20 */
@media (min-width:768px) and (max-width:880px){        /* live tablet panel: two columns, links right-aligned */
  .nav-panel{padding-right:43px}
  .nav-panel__inner{display:grid;grid-template-columns:minmax(0,404px) 1fr;column-gap:20px;row-gap:0;max-width:none;
    align-content:start}   /* auto rows must not share the panel's spare height */
  .nav-panel__group--nav{grid-column:2;grid-row:1;align-self:start}
  .nav-panel__group--nav .nav-panel__menu{text-align:right}
  .nav-panel__group--nav .nav-panel__heading{margin-bottom:35px}   /* live tablet: first link 65px below the heading */
  .nav-panel__cta{grid-column:1;grid-row:1;align-self:start;justify-self:start}
  .nav-panel__group--contact{grid-column:1;grid-row:2;margin-top:50px}   /* live: Contact heading 50px below the Navigate block */
  .nav-panel__group--contact .nav-panel__heading{margin-bottom:0}
  .nav-panel__group--contact .arrow-link{margin-top:5px}   /* live tablet: e-mail 5px under the heading, not 20px */
  .nav-panel__group--last{grid-column:1;grid-row:3;margin-top:10px}
  .nav-panel__group--last .nav-panel__heading{margin-bottom:5px}
}