body.admin-bar {
  --wp-admin-bar-offset: 32px;
}

body.admin-bar .site-header {
  top: var(--wp-admin-bar-offset, 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-offset: 46px;
  }
}

/* At <=600px WordPress switches the admin bar to position:absolute, so it
   scrolls away with the page instead of staying pinned. A fixed header that
   keeps the 46px top offset then leaves an empty band at the top once you
   start scrolling — zero the offset here so the header sits flush. */
@media screen and (max-width: 600px) {
  body.admin-bar {
    --wp-admin-bar-offset: 0px;
  }
}

body.nav-open,
body.nav-open-fixed {
  overflow: hidden;
}

/* Fixed (not sticky) so the on-scroll height change floats over the content
   instead of reflowing the page — the reflow was what made the shrinking
   header jitter/flicker around the scroll threshold. Body is offset below. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s ease;
}

/* Offset content below the fixed header (at-rest height). */
body {
  padding-top: 80px;
}

.site-header.scrolled {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 273px minmax(0, 1fr) 295px;
  grid-template-areas: "logo nav utility";
  align-items: center;
  column-gap: 0;
  row-gap: 0.75rem;
  padding: 0 20px 0 0;
  min-height: 80px;
  transition: min-height 0.25s ease;
}

/* Header shrinks on scroll. Safe now that the header is fixed (out of flow):
   the height change floats over the content and never reflows the page, so it
   no longer jitters around the scroll threshold. */
.site-header.scrolled .site-header__inner {
  min-height: 64px;
}

.site-header__top {
  grid-area: utility;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.site-header__utility-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__mobile-utility {
  display: none;
}

.site-header__utility-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 132px;
  min-height: 48px;
  padding: 0.8rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 0;
  color: var(--header-utility-color);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.site-header__utility-menu a:hover,
.site-header__utility-menu a:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
}

.site-header__utility-menu li:first-child > a:hover,
.site-header__utility-menu li:first-child > a:focus-visible,
.site-header__utility-menu .cta-solid > a:hover,
.site-header__utility-menu .cta-solid > a:focus-visible {
  background: var(--accent-tint);
  border-color: var(--accent-tint);
  color: var(--brand-dark);
}

.site-header__utility-menu li:nth-child(2) > a:hover,
.site-header__utility-menu li:nth-child(2) > a:focus-visible {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brand);
}

.site-header__utility-menu li:first-child > a,
.site-header__utility-menu .cta-solid > a {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--brand-dark);
}

.site-header__utility-menu li:nth-child(2) > a {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.9);
  color: #ffffff;
}

.site-header__utility-menu li:nth-child(2) > a::before {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: url("../img/icons/icon-phone-volume.svg") center / contain no-repeat;
  mask: url("../img/icons/icon-phone-volume.svg") center / contain no-repeat;
}

.site-header__utility-menu .cta-solid > a:hover {
  background: var(--accent-tint);
  border-color: var(--accent-tint);
}

.site-header__middle {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 1rem;
  align-self: stretch;
  min-width: 0;
}

.site-header__logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 0 62px 0 20px;
  background: #ffffff;
  color: var(--brand-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - 48px) 100%, 0 100%);
  transition: min-height 0.2s ease, padding 0.2s ease;
}

.site-header.scrolled .site-header__logo {
  min-height: 64px;
  padding-right: 54px;
}

.site-header__logo img {
  /* Definite width (not min(100%, …)) so the logo's intrinsic size does not
     blow out the max-content grid track and crush the nav column. */
  width: 185px;
  max-width: 100%;
  height: auto;
  transition: width 0.2s ease;
}

.site-header.scrolled .site-header__logo img {
  width: 160px;
}

.site-header__logo-text {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 700;
  color: #ffffff;
}

.site-header__nav {
  grid-area: nav;
  display: flex;
  justify-content: stretch;
  width: 100%;
  min-width: 0;
  padding-inline: clamp(18px, 2.3vw, 34px);
}

.site-nav,
.site-nav .sub-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
  width: 100%;
}

.site-nav li {
  position: relative;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  color: var(--header-link-color);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-nav > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  background: var(--accent-tint);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.site-nav > li.current-menu-item > a::before,
.site-nav > li.current-menu-ancestor > a::before,
.site-nav > li > a:hover::before,
.site-nav > li > a:focus-visible::before {
  transform: scaleX(1);
}

.site-nav > .menu-item-has-children > a::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--header-link-active);
}

.site-nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 0;
  min-width: 14rem;
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Transparent hover-bridge across the gap between the nav item and its
   dropdown — prevents the hover from dropping (and the menu flickering)
   while the cursor travels the 0.75rem gap. */
.site-nav .menu-item-has-children > .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.85rem;
  height: 0.85rem;
  background: transparent;
}

.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.site-nav .sub-menu a {
  padding: 0.65rem 0.875rem;
  border-radius: 4px;
  color: var(--ink);
  font-size: 0.9375rem;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu a:focus-visible {
  background: var(--bg-warm);
  color: var(--brand);
}

.site-header__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  border: 1px solid var(--header-toggle-border);
  border-radius: 999px;
  background: var(--header-toggle-bg);
  color: var(--header-toggle-color);
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 1.25rem;
  height: 2px;
  margin: 0.18rem auto;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 1199px) {
  .site-header__utility-menu a {
    min-width: 118px;
    padding-inline: 0.85rem;
    font-size: 0.75rem;
  }

  .site-header__inner {
    grid-template-columns: 240px minmax(0, 1fr) 260px;
  }

  .site-header__logo {
    padding-inline: 16px 54px;
  }

  .site-header__logo img {
    width: 170px;
  }

  .site-nav a {
    font-size: 0.75rem;
  }
}

/* Tight desktop range, just above the mobile breakpoint. The full nav, logo
   and CTAs must share one row without the menu overlapping the buttons, so
   shrink the type, gaps and the two side columns enough to pack everything in
   down to 992px — where it then switches to the mobile hamburger. */
@media (min-width: 992px) and (max-width: 1199px) {
  .site-header__inner {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 232px);
  }

  .site-header__logo {
    padding-inline: 14px 46px;
  }

  .site-header__logo img {
    width: 152px;
  }

  .site-header__nav {
    padding-inline: clamp(8px, 1vw, 16px);
  }

  .site-nav {
    gap: clamp(0.4rem, 0.9vw, 0.9rem);
  }

  .site-nav a {
    font-size: 0.7rem;
  }

  .site-header__utility-menu {
    gap: 8px;
  }

  .site-header__utility-menu a {
    min-width: 0;
    padding-inline: 0.6rem;
    font-size: 0.7rem;
    white-space: nowrap;
  }
}

@media (max-width: 991px) {
  .site-header {
    z-index: 1150;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .site-header__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "middle";
    padding: 0 14px 0 0;
    min-height: 76px;
    row-gap: 0;
  }

  /* Match the body offset to the 76px mobile header so there's no white gap
     between the (fixed) header and the hero. */
  body {
    padding-top: 76px;
  }

  .site-header.scrolled .site-header__inner {
    min-height: 68px;
  }

  .site-header__top {
    grid-area: utility;
    display: none;
    justify-content: stretch;
  }

  .site-header__middle {
    grid-area: middle;
    display: grid;
    grid-template-columns: minmax(0, 220px) 48px;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    align-self: center;
    gap: 14px;
  }

  .site-header__logo {
    width: 100%;
    height: 100%;
    min-height: 76px;
    padding: 0 48px 0 14px;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%);
    color: #ffffff;
  }

  .site-header.scrolled .site-header__logo {
    min-height: 68px;
    padding-right: 42px;
  }

  .site-header__logo img {
    width: 142px;
  }

  .site-header__toggle {
    display: inline-flex;
    align-self: center;
    position: relative;
    width: 42px;
    height: 42px;
    margin-left: auto;
    border-radius: 0;
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    z-index: 1140;
  }

  .site-header__toggle span {
    position: absolute;
    left: 50%;
    width: 20px;
    height: 2px;
    margin: 0;
    transform: translateX(-50%);
    transform-origin: center;
  }

  .site-header__toggle span:nth-child(1) {
    top: 14px;
  }

  .site-header__toggle span:nth-child(2) {
    top: 20px;
  }

  .site-header__toggle span:nth-child(3) {
    top: 26px;
  }

  .site-header__toggle.is-active span:nth-child(1) {
    top: 20px;
    transform: translateX(-50%) rotate(45deg);
  }

  .site-header__toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .site-header__toggle.is-active span:nth-child(3) {
    top: 20px;
    transform: translateX(-50%) rotate(-45deg);
  }

  .site-header__toggle.is-active {
    background: #ffffff;
    color: var(--brand);
    border-color: #ffffff;
  }

  .site-header__nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 80vw;
    max-width: none;
    height: 100svh;
    background: var(--header-mobile-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 96px 24px 32px;
    transform: translateX(100%);
    transition: transform 0.35s ease;
    overflow-y: auto;
    z-index: 1120;
  }

  .site-header__nav.is-open {
    transform: translateX(0);
  }

  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(5, 11, 24, 0.6);
    z-index: 1100;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav > li {
    width: 100%;
    border-bottom: 1px solid var(--header-mobile-divider);
  }

  .site-nav > li > a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--header-mobile-link);
  }

  .site-nav > li > a::before {
    bottom: 8px;
    right: auto;
    width: 44px;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu {
    position: static;
    list-style: none;
    margin: 0;
    padding: 0 0 12px 16px;
    min-width: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: none;
    display: none;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children.is-open > .sub-menu,
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children.current-menu-item > .sub-menu,
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children.current-menu-ancestor > .sub-menu,
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children.current-menu-parent > .sub-menu {
    display: block;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu li {
    border-bottom: 0;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a {
    display: block;
    padding: 10px 0;
    font-size: 0.9375rem;
    font-weight: 300;
    color: var(--header-mobile-link);
    background: transparent;
    opacity: 0.85;
  }

  .site-header__mobile-utility {
    display: block;
    width: 100%;
    margin-top: 22px;
  }

  .site-header__mobile-utility-menu {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
  }

  .site-header__mobile-utility-menu li {
    width: 100%;
  }

  .site-header__mobile-utility-menu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 54px;
    min-width: 0;
    max-width: none;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.9);
  }

  .site-header__mobile-utility-menu li:first-child > a {
    background: #ffffff;
    color: var(--brand-dark);
    border-color: #ffffff;
  }

  .site-header__mobile-utility-menu li:nth-child(2) > a::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("../img/icons/icon-phone-volume.svg") center / contain no-repeat;
    mask: url("../img/icons/icon-phone-volume.svg") center / contain no-repeat;
  }
}

@media (max-width: 767px) {
  .site-header__utility-menu {
    width: 100%;
  }
  .site-header__utility-menu li {
    flex: 1;
  }
  .site-header__utility-menu a {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .site-header__inner {
    padding-block: 0;
    padding-right: 12px;
  }

  .site-header__middle {
    grid-template-columns: minmax(0, 218px) 42px;
    gap: 12px;
  }
}