/* NAV BREAKPOINT — SINGLE SOURCE OF TRUTH: the literal in the `@media (max-width: 1050px)` block below. Media queries cannot read custom properties, so that block publishes `--nav-drawer: 1` and nav-mobile.js reads the flag instead of repeating the number; `--nav-breakpoint` is the same value in a form JS and tests can cross-check. */
:root {
  --nav-breakpoint: 1050px;
  --nav-drawer: 0;
}

/* Logged in, the bar sits under WordPress core's #wpadminbar: 32px tall, 46px at <=782px (core's own `screen and (max-width: 782px)`). */
body.admin-bar {
  --wp-admin-bar-offset: 32px;
}

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

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

/* At <=600px core makes #wpadminbar `position: absolute`, so it scrolls away, and a fixed offset left a 46px gap above the bar once it had. Sticky instead: the bar starts in the flow right under the admin bar and pins to the window's top edge after it has gone. In the flow it is its own clearance, so the body padding drops; logged-out visitors never match. */
@media screen and (max-width: 600px) {
  body.admin-bar .site-header {
    position: sticky;
    top: 0;
  }

  html body.admin-bar {
    padding-top: 0;
  }

  /* The drawer's `overflow: hidden` would make body a scroll box the sticky bar pins to, off-screen once the page has scrolled; clip draws the same and is no scroll box. */
  body.admin-bar.nav-open,
  body.admin-bar.nav-open-fixed {
    overflow: clip;
  }
}

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

/* Fixed rather than sticky, with its height reserved as body padding: a sticky bar keeps its slot in the flow, so the compact-on-scroll state would pull every following section up the instant the class landed. --header-h is the RESTING height, and header-compact.js overwrites the placeholder with the measured one. */
.site-header {
  /* THE BAR'S OWN TOKEN API — a project restyles the header by rewriting these lines, and the structure (header.php, nav.js, nav-mobile.js) stays locked. They were once var() fallbacks, which made the fallback the real value and left the token gate unable to see the colour at all. */
  --header-bg: var(--white);
  --header-border: var(--border);
  --header-utility-color: var(--ink);
  --header-logo-color: var(--ink);
  --header-logo-width: 8rem;
  --header-link-color: var(--brand-accent);
  --header-link-active: var(--brand-light);
  --header-dropdown-bg: var(--white);
  --header-dropdown-border: rgba(var(--ink-rgb), 0.08);
  --header-dropdown-link: var(--ink);
  --header-dropdown-hover-bg: rgba(var(--brand-rgb), 0.08);
  --header-toggle-color: var(--ink);
  --header-social-color: var(--header-link-color);
  --header-social-hover: var(--header-link-active);
  --header-social-size: 1.375rem;
  --header-social-hit: 2.5rem;
  --header-social-gap: 0;
  --header-social-offset: 0.625rem;
  /* The bar scrolls with the page (below), so the compact state must change nothing: a bar in the flow that shrank on scroll would pull the page up under the reader. */
  --header-compact-shadow: none;
  --header-compact-pad: 0;
  --header-compact-logo-scale: 1;
  /* The drawer panel is the brand colour with white type on it, and --header-mobile-link-active is a separate name so a restyle can hold >= 4.5:1 without touching the resting link colour. */
  --header-mobile-bg: var(--brand);
  --header-mobile-link: var(--white);
  --header-mobile-link-active: var(--header-mobile-link);
  --header-mobile-close: var(--header-mobile-link);
  --header-mobile-divider: rgba(var(--white-rgb), 0.18);
  --header-mobile-social-divider: rgba(var(--white-rgb), 0.28);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  backdrop-filter: blur(12px);
  /* Naming the bar lifts it out of the page-wide crossfade into its own transition group, so a same-origin navigation paints it continuously. */
  view-transition-name: site-header;
}

/* The header is normally byte-identical on both documents, so there is nothing to crossfade — anything else reads as a flicker on a fixed element. */
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

/* `html body`, not `body`: WordPress core's global-styles-inline-css emits `body{padding:0}`
   (theme.json), and WHERE it prints moved once already — before the theme sheets on one build,
   after them on the next. At (0,0,1) this rule won or lost by print order, and page bundles grew
   their own clearance to survive the losing case; when the order flipped back, every interior page
   cleared the header twice (operator, 2026-09-13). (0,0,2) wins in both orders, so this is the ONLY
   clearance a theme built on this base may carry — never a page root, never a section. */
html body {
  padding-top: var(--header-h);
}

/* Anchor targets have to clear the fixed bar, or every #hash link lands with its heading hidden underneath the header. */
html {
  scroll-padding-top: var(--header-h);
}

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

.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  grid-template-areas:
    "logo utility"
    "logo nav";
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 0.75rem;
  padding-block: 1rem;
}

/* With no `utility` menu the first grid row collapses to 0 but its row-gap survives, so the bar carries ~12px of phantom space and the logo centres half a gap above the nav's axis. header.php marks the wrapper and the grid drops to one row. Declared before the drawer breakpoint so the mobile grid still wins. */
.site-header__inner--no-utility {
  grid-template-areas: "logo nav";
  row-gap: 0;
  align-items: center;
}

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

.site-header__utility-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__utility-menu a {
  color: var(--header-utility-color);
  font-family: var(--sans);
  font-size: 0.95rem;
}

.site-header__middle {
  grid-area: logo;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  color: var(--header-logo-color);
}

.site-header__logo img {
  width: min(100%, var(--header-logo-width));
  height: auto;
}

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

.site-header__nav {
  grid-area: nav;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

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

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.75rem);
}

.site-nav li {
  position: relative;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.35rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--header-link-color);
}

.site-nav > .menu-item-has-children > a::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  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.875rem);
  left: 0;
  min-width: 15rem;
  display: grid;
  gap: 0.125rem;
  padding: 0.75rem;
  background: var(--header-dropdown-bg);
  border: 1px solid var(--header-dropdown-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

/* Bridges the 14px between the link and the panel, so the pointer keeps the item hovered on its way down into the submenu (without it the panel closes before the mouse reaches it). */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(0.875rem + 1px);
}

.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 {
  justify-content: space-between;
  padding: 0.75rem 0.875rem;
  border-radius: var(--radius);
  color: var(--header-dropdown-link);
}

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

/* Bare symbol, no chrome — and it is also the drawer's close control, so `flex: 0 0 auto` keeps the header's flex row from squeezing the 3rem box. */
.site-header__toggle {
  display: none;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--header-toggle-color);
  cursor: pointer;
}

.site-header__toggle span {
  display: block;
  width: 1.125rem;
  height: 2px;
  margin: 0.25rem auto;
  background: currentColor;
  /* Paced just ahead of the 380ms drawer slide so the X has landed by the time the panel finishes; at 200ms it snapped shut mid-travel. */
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}

/* Convergence distance comes from the bar metrics, not from taste: 2px + 2 x 0.25rem margin = a 10px pitch, and a 6px translate stops short and reads as a ">". Keep these in step with the bar height and margin. */
.site-header__toggle.is-active span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

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

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

/* The toggle sits above the drawer, which is painted --header-mobile-bg, so bars in the resting colour can end up invisible against it. */
body.nav-open .site-header__toggle span,
.site-header__toggle.is-active span {
  background: var(--header-mobile-close);
}

.site-header__toggle.is-active {
  color: var(--header-mobile-close);
}

/* Chrome controls ring on keyboard focus only: a tap must never leave a box around the burger or the X. */
.site-header__toggle:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

.site-header__toggle:focus-visible {
  outline: 2px solid var(--form-focus-border);
  outline-offset: 2px;
}

/* The drawer-only "Overview" row nav-mobile.js injects so the parent page stays reachable; desktop dropdowns never show it. */
.site-nav .sub-menu > .site-header__overview-item {
  display: none;
}

/* Header social icons, rendered inside .site-header__nav by header.php so they ride the mobile drawer. A 22px mark centred in a >=40px hit area: social glyphs are smaller than the pointer-target minimum, so the box is padded out rather than the art. */
.site-header__social {
  display: flex;
  align-items: center;
  margin-left: var(--header-social-offset);
}

.site-header__social-menu {
  display: flex;
  align-items: center;
  gap: var(--header-social-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__social-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--header-social-hit);
  height: var(--header-social-hit);
  padding: 0;
  /* The glyph is the only thing carrying meaning (the label is sr-only text), so this colour has to clear 4.5:1 against the header background. */
  color: var(--header-social-color);
}

.site-header__social-menu .cnm-icon {
  font-size: var(--header-social-size); /* 22px */
  transition: color 150ms ease-out, transform 150ms ease-out;
}

.site-header__social-menu a:hover .cnm-icon,
.site-header__social-menu a:focus-visible .cnm-icon {
  color: var(--header-social-hover);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------- Compact-on-scroll header. assets/js/header-compact.js adds .site-header--compact past a small scroll threshold and owns nothing else; every visual is here. The bar tightens by spending its own vertical padding and the logo scales from its LEFT edge, so the wordmark shrinks toward the corner it is anchored to instead of drifting inward. The logo keeps its full box while scaled, which is what lets the padding do the height reduction on its own. Safe because .site-header is fixed and its resting height is reserved as body padding-top (top of this file) — the bar can change height without moving anything below it. ------------------------------------------------------------------------- */
.site-header,
.site-header__inner,
.site-header__logo {
  transition: padding 300ms ease-out, box-shadow 300ms ease-out, transform 300ms ease-out;
}

.site-header__logo {
  transform-origin: left center;
}

.site-header--compact {
  box-shadow: var(--header-compact-shadow);
}

.site-header--compact .site-header__inner {
  padding-block: var(--header-compact-pad);
}

.site-header--compact .site-header__logo {
  transform: scale(var(--header-compact-logo-scale));
}

/* One-frame flag from header-compact.js: a page that loads already scrolled starts compact with no entrance animation. */
.site-header--no-transition,
.site-header--no-transition .site-header__inner,
.site-header--no-transition .site-header__logo {
  transition: none;
}

/* THE nav breakpoint literal. Keep `--nav-breakpoint` at the top of this file equal to it; nav-mobile.js reads the flag published here, not the number. */
@media (max-width: 1050px) {
  :root {
    --nav-drawer: 1;
  }

  .site-header__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "utility utility"
      "logo logo"
      "nav nav";
  }

  .site-header__top {
    justify-content: flex-start;
  }

  .site-header__middle {
    width: 100%;
    justify-content: space-between;
  }

  .site-header__toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 110; /* above the drawer so the X stays clickable */
  }

  .site-header__nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 360px;
    height: 100vh;
    background: var(--header-mobile-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 96px 30px 30px;
    /* ease-out, not ease: the panel leaves fast and settles slowly instead of stopping dead at the edge. */
    transition: right 380ms ease-out;
    overflow-y: auto;
    z-index: 105;
    /* The panel is painted --header-mobile-bg, so the desktop link colours — chosen against the page background — routinely fall under 4.5:1 here. Set --header-mobile-bg and the three foreground tokens together. */
    color: var(--header-mobile-link);
  }

  .site-header__nav.is-open {
    right: 0;
  }

  body.nav-open {
    overflow: hidden;
  }

  .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: 16px 0;
    font-size: 1.125rem;
    color: var(--header-mobile-link);
  }

  /* The current item is marked with a rule, not a hue: the desktop active colour sits on the brand panel and scores ~2:1 there. */
  .site-nav .current-menu-item > a,
  .site-nav .current-menu-ancestor > a,
  .site-nav a:hover,
  .site-nav a:focus-visible {
    color: var(--header-mobile-link-active);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
  }

  /* Pinned to the bottom of the drawer under a hairline rule — the conventional place, and far enough from the nav links not to read as one. */
  .site-header__social {
    width: 100%;
    margin: auto 0 0;
    padding-top: 1.5rem;
    /* Its own name, not the nav divider's: the two carried the SAME token at DIFFERENT weights, and collapsing them would let one silently win. */
    border-top: 1px solid var(--header-mobile-social-divider);
  }

  .site-header__social-menu {
    gap: 0.5rem;
    /* Pull the first hit area back so the glyph aligns with the nav labels' left edge instead of the box's. */
    margin-left: -0.5625rem;
  }

  .site-header__social-menu a {
    color: var(--header-mobile-link);
  }

  .site-header__social-menu a:hover .cnm-icon,
  .site-header__social-menu a:focus-visible .cnm-icon {
    color: var(--header-mobile-link);
    opacity: 0.75;
  }

  /* Sub-menu accordion (inline within drawer) — overrides desktop dropdown styles. Selectors carry 3 classes to beat the desktop sub-menu specificity. */
  .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 > .sub-menu::before {
    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 > .site-header__overview-item {
    display: block;
  }

  .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);
    text-decoration: none;
    background: transparent;
    opacity: 0.85;
  }

  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a:hover,
  .site-header__nav--mobile-accordion .site-nav > .menu-item-has-children > .sub-menu a:focus-visible {
    opacity: 1;
    background: transparent;
  }
}
/* Reduced motion: nothing in the header animates — not the compact transition, not the drawer slide, not the hamburger's fold into an X. States still change instantly, so every control keeps working. */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__inner,
  .site-header__logo,
  .site-header__nav,
  .site-header__toggle span,
  .site-header__social-menu .cnm-icon {
    transition: none;
  }

  .site-header__social-menu a:hover .cnm-icon,
  .site-header__social-menu a:focus-visible .cnm-icon {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   This site's bar: the logo centred on its own row with the button at the
   right of that row, the nav centred under it, and the services bar (two
   labelled groups of links under a drawn watercolour rule) closing the header.
   Below the nav breakpoint the nav, the button and the services bar ride the
   starter's drawer.
   ------------------------------------------------------------------------- */

/* The design's header scrolls away with the page; at 431px tall a fixed bar would cover a third of the screen. In the flow it is its own clearance, so the body padding and the anchor offset the starter reserves for a fixed bar go to zero. */
.site-header {
  position: relative;
  backdrop-filter: none;
}

html body {
  padding-top: 0;
}

html {
  scroll-padding-top: 0;
}

body.admin-bar .site-header {
  top: 0;
}

.site-header.scrolled {
  box-shadow: none;
}

.site-header__inner {
  position: relative;
  padding-block: 0;
}

.site-header__logo {
  flex-shrink: 0;
  transform-origin: center;
}

.site-nav a {
  font-family: var(--sans);
  font-weight: 700;
  white-space: nowrap;
}

/* The underline that grows under a nav link on hover. */
.site-nav > li:not(.menu-cta) > a::after {
  content: "";
  position: absolute;
  bottom: 0.375rem;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--header-link-active);
  transition: width 0.2s ease;
}

.site-nav > li:not(.menu-cta) > a {
  position: relative;
  transition: color 0.2s ease;
}

.site-nav > li:not(.menu-cta) > a:hover::after,
.site-nav > li:not(.menu-cta) > a:focus-visible::after {
  width: 100%;
}

.site-nav .menu-cta > a {
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 2.75rem;
  padding: 0.625rem 1.3125rem;
  border: 1px solid var(--button-bg);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.site-nav .menu-cta > a:hover,
.site-nav .menu-cta > a:focus-visible {
  background: var(--button-bg-hover);
  color: var(--button-text);
  transform: translateY(-2px);
}

.site-nav .menu-cta .menu-arrow {
  font-size: 1.1875rem;
  font-weight: 400;
  line-height: 1;
}

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

.site-header__services-label {
  margin: 0;
  max-width: none;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--brand-dark);
}

.site-header__services-menu .sub-menu a {
  display: block;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 1051px) {
  .site-header__inner,
  .site-header__inner--no-utility {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "nav";
    row-gap: 0.375rem;
    padding-inline: 0;
  }

  .site-header__middle {
    justify-content: center;
    height: 8.75rem;
    margin-top: 0.5rem;
  }

  .site-header__nav {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(1.75rem, calc(1.1rem + 1.4vw), 2.125rem);
    padding-bottom: 1.25rem;
  }

  .site-nav > li:not(.menu-cta) > a {
    padding-block: 0.375rem;
    font-size: 1.0625rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
  }

  /* The button sits at the right end of the logo's row, centred on it, though it is the last item of the menu. */
  .site-nav > .menu-cta {
    position: absolute;
    top: 4.875rem;
    right: 4%;
    transform: translateY(-50%);
  }

  /* Under the nav, a grid row of its own: the row gap is the nav's to give, not the bar's. */
  .site-header__services {
    margin-top: -0.375rem;
  }
}

/* The services bar, the same on every width but a phone's (below): a label beside each group's links, under the drawn watercolour rule. */
.site-header__services {
  position: relative;
  padding: 1.3125rem 5% 0.625rem;
}

.site-header__services::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: url("../img/top-splitter.png") center top / auto 15px repeat-x;
  pointer-events: none;
}

.site-header__services-menu > li {
  display: grid;
  grid-template-columns: 9.6875rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
}

.site-header__services-menu > li + li {
  border-top: 1px solid var(--border);
}

.site-header__services-menu .sub-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1875rem 0.5rem;
}

.site-header__services-menu .sub-menu a {
  padding: 0.5rem 0.625rem;
  color: var(--header-link-color);
}

.site-header__services-menu .sub-menu a:hover,
.site-header__services-menu .sub-menu a:focus-visible {
  background: var(--white);
  color: var(--header-link-active);
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .site-nav a::after,
  .site-nav .menu-cta > a,
  .site-header__services-menu .sub-menu a {
    transition: none;
  }
}

/* The Instagram bar over the header (inc/instagram-bar.php): a full-width brand band, its one link centred. */
.site-instagram-bar {
  padding: 0 1rem;
  text-align: center;
  color: var(--white);
  background: var(--brand);
}

.site-instagram-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5625rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: inherit;
  text-decoration: none;
}

/* The hover line runs under the words and the arrow as one: a text underline would break at the gap between them. */
.site-instagram-bar a {
  position: relative;
}

.site-instagram-bar a::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  left: 0.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0;
}

.site-instagram-bar a:hover::after {
  opacity: 1;
}

.site-instagram-bar a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -3px;
}

@media (max-width: 760px) {
  .site-instagram-bar a {
    font-size: 0.875rem;
    letter-spacing: 0;
  }
}

/* ---------------------------------------------------------------------------
   This site's phone and tablet header (below 1051px), as the site draws it:
   the logo, the button and a two-line toggle on one 115px row, the services
   bar always open under it, and the toggle dropping a short blush panel with
   the main links over the page — no drawer, no scroll lock (nav-mobile.js is
   not loaded: inc/header-services.php).
   ------------------------------------------------------------------------- */
.site-header__cta {
  display: none;
}

@media (max-width: 1050px) {
  .site-header__inner {
    display: block;
    position: relative;
    padding: 0;
  }

  .site-header__middle {
    display: flex;
    align-items: center;
    gap: 1.375rem;
    height: 7.1875rem;
    min-height: 0;
    padding: 0.375rem 6%;
  }

  .site-header__logo img {
    width: 5.875rem;
    height: 6.5625rem;
  }

  .site-header__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 2.5625rem;
    margin-left: auto;
    padding: 0.625rem 1rem;
    border: 1px solid var(--button-bg);
    border-radius: var(--button-radius);
    background: var(--button-bg);
    color: var(--button-text);
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  .site-header__cta:hover,
  .site-header__cta:focus-visible {
    background: var(--button-bg-hover);
    color: var(--button-text);
    transform: translateY(-2px);
  }

  .site-header__cta .menu-arrow {
    font-size: 1.1875rem;
    font-weight: 400;
    line-height: 1;
  }

  .site-nav > .menu-cta {
    display: none;
  }

  /* Two hairlines that cross into an X. */
  .site-header__toggle,
  .site-header__toggle.is-active {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 2.375rem;
    height: 2.625rem;
    margin-left: 0;
    padding: 0.5rem;
    color: var(--ink);
  }

  .site-header__toggle span,
  body.nav-open .site-header__toggle span,
  .site-header__toggle.is-active span {
    width: 1.375rem;
    height: 1px;
    margin: 0;
    background: currentColor;
    transition: transform 0.2s;
  }

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

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

  /* The panel the toggle drops over the page, under the logo row. */
  .site-header__nav,
  .site-header__nav.is-open {
    position: absolute;
    top: 7.1875rem;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    height: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 1.375rem 6%;
    overflow: visible;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 15px 20px rgba(var(--black-rgb), 0.043);
    transition: none;
    z-index: 50;
    color: var(--brand-accent);
  }

  .site-header__nav.is-open {
    display: flex;
  }

  body.nav-open {
    overflow: visible;
  }

  .site-nav {
    gap: 0.5rem;
  }

  .site-nav > li {
    border-bottom: 0;
  }

  .site-nav > li > a,
  .site-nav .current-menu-item > a,
  .site-nav .current-menu-ancestor > a,
  .site-nav a:hover,
  .site-nav a:focus-visible {
    display: block;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.01125rem;
    color: var(--brand-accent);
    text-decoration: none;
  }

  .site-nav > li:not(.menu-cta) > a::after {
    display: none;
  }

  .site-header__services-label {
    color: var(--brand-accent);
  }
}

@media (max-width: 760px) {
  .site-header__middle {
    gap: 0.625rem;
    padding: 0.5rem 5%;
  }

  .site-header__logo img {
    width: 5.375rem;
    height: 6rem;
  }

  .site-header__cta {
    gap: 0.625rem;
    max-width: 9.375rem;
    min-height: 2.75rem;
    padding: 0.625rem 0.75rem;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .site-header__nav,
  .site-header__nav.is-open {
    padding: 1.25rem 7% 1.875rem;
  }

  /* On a phone each group stacks: its label over its links in two centred columns. */
  .site-header__services-menu > li {
    display: block;
    padding-block: 0.6875rem;
  }

  .site-header__services-label {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
  }

  .site-header__services-menu .sub-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 0.5rem;
  }

  .site-header__services-menu .sub-menu a {
    padding: 0.5rem 0.3125rem;
  }
}

/* On a phone each group of the services bar is a label that opens its links (assets/js/services-bar.js); both start closed. Keyed on `has-js` (set inline in <head>, functions.php), not on the script's own `.is-collapsible`: the script is deferred, and waiting for it drew every link first and then collapsed them — the whole page jumped (mobile CLS 0.39). Without JS every link still shows. */
@media (max-width: 760px) {
  .has-js .site-header__services .site-header__services-menu > li {
    padding-block: 0;
  }

  .has-js .site-header__services .site-header__services-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem;
    margin: 0;
    cursor: pointer;
  }

  .has-js .site-header__services .site-header__services-label::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .has-js .site-header__services .is-open > .site-header__services-label::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .has-js .site-header__services .site-header__services-label:focus-visible {
    outline: 2px solid var(--form-focus-border);
    outline-offset: 2px;
  }

  .has-js .site-header__services .site-header__services-menu > li:not(.is-open) > .sub-menu {
    display: none;
  }

  .has-js .site-header__services .site-header__services-menu > li.is-open > .sub-menu {
    padding-bottom: 0.75rem;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .has-js .site-header__services .site-header__services-label::after {
    transition: none;
  }
}