/* Giant Entity: the header bar and its menus (look-v3 sections 8 and 13). The bar never animates
   and is never sticky; the menus open as a full-width shelf under it on wide screens and as a
   full-screen accordion below 1280 px. */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
  view-transition-name: site-header;
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-m);
  min-height: var(--nav-h);
  max-width: var(--wrap-max);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* The wordmark: small, flat, carbon, 24 to 28 px tall; nothing on hover beyond the focus ring. */
.site-header__mark { flex: 0 1 auto; min-width: 0; display: block; padding-block: 0.5rem; color: var(--fg); }
/* the wordmark's own ratio (7931 by 749), so at the largest text setting it can shrink to fit */
.site-header__mark svg { width: calc(var(--mark-h) * 7931 / 749); max-width: 100%; height: auto; }
.site-header__mark svg [fill]:not([fill="none"]) { fill: currentColor; }

.site-header__menu { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: clamp(1.5rem, 2.2vw, 4rem); min-width: 0; }
.site-header__cta { flex: none; min-height: 2.75rem; padding-inline: 1.1em; }
.site-header .button { transition: none; }
.site-header .button:active { transform: none; }

.site-nav ul { list-style: none; padding: 0; margin: 0; }
.site-nav ul.site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 clamp(1.25rem, 1.9vw, 3.5rem); }

/* Nav links, menu triggers and Plan your project share one treatment: 17 to 20 px, weight 500,
   a 1 px underline that draws from the left under the hand, 2 px on the current page. */
.site-nav__trigger,
.site-nav__link,
.site-header__plan,
.site-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--fs-nav);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.site-nav__label,
.site-header__plan > span { position: relative; }
.site-nav__label::after,
.site-header__plan > span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.3em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-hover) var(--ease-out);
}
.site-nav__trigger:hover .site-nav__label::after,
.site-nav__link:hover .site-nav__label::after,
.site-header__plan:hover > span::after,
.site-nav__trigger[aria-expanded="true"] .site-nav__label::after,
[aria-current] > .site-nav__label::after,
.site-header__plan[aria-current] > span::after { transform: scaleX(1); }
[aria-current="page"] > .site-nav__label::after,
.site-header__plan[aria-current="page"] > span::after { height: 2px; }

.site-nav__caret { width: 1rem; height: 1rem; transition: transform var(--dur-hover) var(--ease-out); }
.site-nav__trigger[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

/* The panels' own links */
.site-nav__panel { color: var(--fg); }
.site-nav ul.site-nav__links { display: grid; gap: 0; }
.site-nav__links a,
.site-nav__all a,
.site-nav__pillar {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-link) var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__all a:hover,
.site-nav__pillar:hover,
.site-nav__links a[aria-current],
.site-nav__pillar[aria-current],
.site-nav__all a[aria-current] { text-decoration-color: currentColor; }
.site-nav__links a[aria-current="page"],
.site-nav__pillar[aria-current="page"],
.site-nav__all a[aria-current="page"] { text-decoration-thickness: 2px; }
.site-nav__pillar { font-size: var(--fs-lead); font-weight: 500; line-height: 1.25; }
.site-nav__all { max-width: none; font-weight: 500; }

/* The menu toggle (below 1280 px): the list icon, the x when open */
.site-header__toggle .icon { width: 1.5rem; height: 1.5rem; }
.site-header__toggle .icon-x,
.site-header.is-open .site-header__toggle .icon-list { display: none; }
.site-header.is-open .site-header__toggle .icon-x { display: block; }

@media (min-width: 1280px) {
  .site-nav__item { position: static; }
  /* each menu opens as a full-width shelf under the bar */
  .site-nav__panel {
    position: absolute;
    inset: 100% 0 auto 0;
    padding: var(--sp-m) var(--margin) var(--sp-l);
    background: var(--ground);
    border-block: 1px solid var(--line);
    box-shadow: 0 1.5rem 1.5rem -1.5rem rgb(23 26 36 / 0.18);
    clip-path: inset(0 0 -2rem 0);
    transition: clip-path var(--dur-menu-open) var(--ease-out);
  }
  @starting-style {
    .site-nav__panel { clip-path: inset(0 0 100% 0); }
  }
  .site-nav__panel.is-closing { clip-path: inset(0 0 100% 0); transition-duration: var(--dur-menu-close); }
  .site-nav__panel > * { max-width: calc(var(--wrap-max) - 2 * var(--margin)); margin-inline: auto; }
  .site-nav__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: var(--sp-xs); }
  .site-nav__column { display: grid; align-content: start; gap: var(--sp-2xs); padding-top: var(--sp-xs); border-top: 1px solid var(--line); }
  .site-nav__panel:not(.site-nav__panel--mega) ul.site-nav__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-l); }
  .site-nav__panel:not(.site-nav__panel--mega) .site-nav__links a { font-size: var(--fs-lead); }
  .site-header__toggle { display: none; }
}

@media (max-width: 1279px) {
  .site-header__inner { flex-wrap: wrap; gap: 0 var(--sp-s); }
  /* the bar stays one row at every text size: the wordmark gives up width before anything wraps */
  .site-header__mark { flex: 1 1 0; max-width: fit-content; margin-right: auto; }
  .site-header__cta { padding-inline: 1rem; }
  /* without a script the menu is a plain row of links under the bar */
  .site-header__menu { order: 4; flex-basis: 100%; flex-wrap: wrap; justify-content: flex-start; padding-bottom: var(--sp-2xs); }
  .js .site-header__menu { display: none; }
  .js .site-header.is-open .site-header__menu {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-s);
    padding: var(--sp-xs) var(--margin) var(--sp-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ground);
    border-top: 1px solid var(--line);
  }
  .js .site-nav ul.site-nav__list { flex-direction: column; align-items: stretch; }
  .js .site-nav__item { border-bottom: 1px solid var(--line); }
  .js .site-nav__trigger,
  .js .site-nav__link { width: 100%; justify-content: space-between; min-height: 3.25rem; font-size: var(--fs-lead); }
  .js .site-nav__caret { width: 1.25rem; height: 1.25rem; }
  .site-nav__panel { padding: 0 0 var(--sp-s); }
  .site-nav__columns { display: grid; gap: var(--sp-xs); }
  .site-nav__links a { min-height: 2.75rem; }
  .js .site-header__plan { min-height: 3.25rem; font-size: var(--fs-lead); }
}
@media (max-width: 1279px) and (prefers-reduced-motion: no-preference) {
  .js .site-header.is-open .site-header__menu { animation: sheet-in var(--dur-menu-open) var(--ease-out); }
}
@keyframes sheet-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* The bar's own Book a call; on a phone the wordmark at its 24 px minimum leaves no room for it,
   so it moves into the menu sheet (the hero and every page's closing band carry one too). */
.site-header__cta-sheet { display: none; }
@media (max-width: 479px) {
  .site-header__cta { display: none; }
  .site-header__cta-sheet { display: inline-flex; align-self: flex-start; margin-top: var(--sp-xs); }
  .site-header__toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
html.menu-open { overflow: hidden; }

@media (forced-colors: active) {
  .site-nav__label::after,
  .site-header__plan > span::after { background: CanvasText; }
}