/* Direct page links stay available at every width and throughout the page. */
html{scroll-padding-top:calc(var(--site-header-height,112px) + 18px)}
body>.site-header{position:sticky;top:0;z-index:55}
.page-home>.site-header{position:absolute;inset:0 0 auto}
html:not(.has-js) .page-home>.site-header{position:relative}
body>.site-header.is-scrolled{
  background:var(--cobalt) url('cobalt.webp') center 46%/cover;
  border-bottom-color:transparent;
  box-shadow:0 6px 24px #101e3226;
}
html.has-js .desktop-nav{display:flex}
/* Readable at normal browser zoom, with the same direct links on every page. */
body>.site-header{height:140px;gap:24px}
.site-header .brand img{width:110px;height:100px}
.site-header .desktop-nav{font-size:18px;gap:clamp(14px,1.7vw,28px)}
.site-header .header-contact{font-size:18px;gap:22px;padding:14px 18px}
.page-home .fault-copy{padding-top:max(180px,calc(var(--site-header-height,140px) + 40px))}

/* Match the hero's texture in document space, then carry its final strip. */
:is(.page-enablement,.page-strategy,.page-blueprints,.page-about,.page-work)>.site-header,
:is(.page-enablement,.page-strategy,.page-blueprints,.page-about,.page-work)>.site-header.is-scrolled{
  background:var(--cobalt) url('cobalt.webp') center var(--header-texture-y,0px) / var(--hero-texture-size,max(100vw,1050px) auto) no-repeat;
  background-origin:border-box;
  border-bottom-color:transparent;
  box-shadow:none;
}
:is(.page-enablement,.page-strategy,.page-blueprints,.page-about,.page-work)>.site-header.is-past-hero{
  box-shadow:0 6px 24px #101e3226;
}

@media(max-width:960px){
  body>.site-header{
    height:auto;min-height:0;flex-wrap:wrap;
    padding:10px var(--gutter) 9px;gap:5px 24px;
  }
  .site-header .brand img{width:96px;height:84px}
  .site-header .header-contact{margin-left:auto;font-size:17px;padding:12px 16px}
  .site-header .desktop-nav,html.has-js .site-header .desktop-nav{
    display:flex;order:3;width:100%;margin:0;padding:0;
    flex-wrap:nowrap;justify-content:space-between;gap:12px;font-size:18px;
  }
  .site-header .desktop-nav a{padding:8px 0}
}
@media(max-width:600px){
  body>.site-header{gap:4px 20px;padding-top:7px;padding-bottom:9px}
  .site-header .brand img{width:84px;height:74px}
  .site-header .desktop-nav,html.has-js .site-header .desktop-nav{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px;
    font-size:16px;
  }
  .site-header .desktop-nav a{width:max-content;max-width:100%;margin:auto;padding:6px 0}
}

/* One shared, non-repeating texture across the header and service hero. */
:is(.page-enablement,.page-strategy,.page-blueprints,.page-about,.page-work){
  background-size:var(--hero-texture-size,max(100vw,1050px) auto);
  background-repeat:no-repeat;
}
.page-about .about-opening{
  background-size:var(--hero-texture-size,max(100vw,1050px) auto);
  background-repeat:no-repeat;
}

/* Preserve the revised logo proportions at every navigation size. */
.site-header .brand img{height:auto;aspect-ratio:1000 / 860;object-fit:contain}