/* New site navigation (components/shared/siteNav.tsx), 2026-11-12: the C + D hybrid in the Frosted glass +
   red-orange look from the "Navigation directions" canvas. Brand: Andada Pro headings, Montserrat body,
   square corners, no shadows. Red-orange is never text on dark blue: it is only the open-door underline,
   the "Start here" star and the Menu button's compass center. */
.snav {
  --snav-night: #071431; --snav-seafoam: #a9e8da; --snav-ro: #f05238; --snav-cyan: #00c2f3;
  --snav-glass: rgba(7, 20, 49, .5); --snav-line: rgba(255, 255, 255, .2); --snav-bar: 96px;
  --snav-serif: "Andada Pro", Georgia, serif; --snav-sans: Montserrat, Arial, Helvetica, sans-serif;
  position: relative; z-index: 50; height: 0; color: #fff; font-family: var(--snav-sans);
}
/* This page uses the new navigation, so the old global header and its overlay menu step aside. */
body:has(.snav) .main-header, body:has(.snav) .pre-header, body:has(.snav) .overlay-menu { display: none !important; }

.snav *, .snav *::before, .snav *::after { box-sizing: border-box; }
.snav button {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit;
  min-width: 0; min-height: 0; width: auto; height: auto; cursor: pointer;
}
.snav a, .snav a:visited, .snav a:hover { color: #fff; text-decoration: none; }
.snav button:focus-visible, .snav a:focus-visible { outline: 2px solid var(--snav-cyan); outline-offset: 3px; }
.snav [hidden] { display: none !important; }
.snav ul { list-style: none; margin: 0; padding: 0; }
.snav li { margin: 0; padding: 0; }
.snav__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Skip link: hidden until it gets keyboard focus. */
.snav .snav__skip { position: absolute; top: 8px; left: 8px; z-index: 5; padding: 12px 18px; background: #fff; color: #19468d; font-size: 14px; font-weight: 700; transform: translateY(-200%); }
.snav .snav__skip:focus { transform: none; color: #19468d; }

/* Bar */
.snav__frame { position: absolute; top: 0; left: 0; right: 0; overflow-x: clip; transition: background-color .25s; }
.snav__bar {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; height: var(--snav-bar);
  max-width: 1440px; margin: 0 auto; padding: 0 48px; border-bottom: 1px solid transparent; transition: border-color .25s;
}
.snav__logo { display: block; flex-shrink: 0; width: 196px; line-height: 0; }
.snav__logo svg { width: 100%; height: auto; display: block; }
.snav__doors { display: flex; justify-content: center; flex-grow: 1; height: 100%; }
.snav__doorlist { display: flex; align-items: stretch; gap: 40px; height: 100%; }
.snav__item { display: flex; }
.snav .snav__door {
  display: flex; align-items: center; gap: 6px; padding-top: 3px; border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; transition: border-color .2s;
}
.snav__chev { transition: transform .2s ease; }
.snav .snav__door[aria-expanded="true"] { border-bottom-color: var(--snav-ro); }
.snav__door[aria-expanded="true"] .snav__chev { transform: rotate(180deg); }
.snav .snav__talk { flex-shrink: 0; font-size: 14px; font-weight: 600; }
.snav .snav__talk:hover { text-decoration: underline; }
.snav .snav__cta, .snav .snav__cta:visited, .snav .snav__cta:hover {
  flex-shrink: 0; background: #fff; color: #19468d; font-size: 14px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 15px 22px; white-space: nowrap;
}
.snav__menu { display: none !important; }

/* Desktop panels: glass over the page, numbered columns that rise in turn (the chart animation). */
.snav.is-open .snav__frame {
  background: var(--snav-glass); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%);
}
.snav.is-open .snav__bar { border-bottom-color: var(--snav-line); }
/* Each panel follows its door in the DOM (so Tab moves into it) and spans the full width under the bar. */
.snav__panel {
  position: absolute; top: 100%; left: 50%; width: 100vw; margin-left: -50vw; animation: snavFade .28s ease-out both;
  background: var(--snav-glass); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%);
}
.snav__panel-inner {
  min-height: 420px; /* every panel is as tall as What We Do, so moving between doors doesn't resize the glass */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px;
  max-width: 1440px; margin: 0 auto; padding: 48px 48px 56px;
}
.snav__col { display: flex; flex-direction: column; gap: 10px; animation: snavRise .45s cubic-bezier(.2, .7, .2, 1) both; }
.snav__col--wide { grid-column: span 2; }
.snav--switch .snav__panel, .snav--switch .snav__col, .snav--switch .snav__rule { animation-duration: .18s; animation-delay: 0s; }
.snav__c1 { animation-delay: .06s; } .snav__c2 { animation-delay: .12s; } .snav__c3 { animation-delay: .18s; }
.snav__num, .snav__gnum { font-family: var(--snav-serif); font-size: 15px; color: var(--snav-seafoam); }
.snav .snav__ctitle { font-family: var(--snav-serif); font-size: 32px; line-height: 1.15; color: #fff; }
.snav__rule { display: block; height: 2px; width: 64px; background: var(--snav-seafoam); margin: 4px 0 6px; animation: snavRule .5s ease-out both; animation-delay: .24s; }
.snav__links { display: flex; flex-direction: column; }
.snav__links--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.snav .snav__link { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 5px 0; font-size: 15px; transition: color .15s, padding-left .2s; }
.snav .snav__link:hover { padding-left: 6px; color: var(--snav-seafoam); }
.snav .snav__link--muted { color: rgba(255, 255, 255, .85); }
.snav__text { margin: 0; font-size: 15px; line-height: 1.6; color: #fff; }
.snav__plain { font-size: 15px; padding: 5px 0; }
.snav__plain + .snav__plain { color: rgba(255, 255, 255, .85); }

/* "Start here": a red-orange star that twinkles every few seconds. */
.snav__start { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
.snav__star { fill: var(--snav-ro); animation: snavTwinkle 2.8s ease-in-out infinite; }

/* Quiet header: on a page whose hero already shows the audit button and "Talk to our team" (the homepage),
   the bar's audit button is outlined and its "Talk to our team" link steps back, so the two don't repeat. */
.snav--quiet .snav__bar > .snav__talk { display: none; }
.snav.snav--quiet .snav__bar .snav__cta, .snav.snav--quiet .snav__bar .snav__cta:visited {
  background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); transition: background-color .2s, color .2s;
}
.snav.snav--quiet .snav__bar .snav__cta:hover { background: #fff; color: #19468d; }

/* Night Sky Hero: the old header is gone, so the copy clears the new bar itself. */
.snav + .nsh .nsh__inner { padding-top: 208px; }
@media (max-width: 760px) {
  .snav + .nsh .nsh__inner { padding-top: 152px; }
  .snav + .nsh--sky-top .nsh__inner { padding-top: 372px; }
}
/* The page copy under an open menu fades so the glass reads cleanly. */
.nsh__copy { transition: opacity .25s; }
body.snav-open .nsh__copy { opacity: 0; }

/* Sheet (tablet and phone) */
.snav__sheet {
  position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; padding-top: var(--snav-bar);
  /* Denser than the desktop glass: the sheet also covers white page sections below the hero. */
  background: rgba(7, 20, 49, .86); -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%);
  animation: snavFade .28s ease-out both; overscroll-behavior: contain;
}
.snav__sheetnav { display: flex; flex-direction: column; flex-grow: 1; min-height: 0; }
.snav__tabs { display: flex; gap: 36px; padding: 0 40px; border-bottom: 1px solid var(--snav-line); flex-shrink: 0; }
.snav .snav__tab {
  display: flex; align-items: center; height: 56px; padding-top: 3px; border-bottom: 3px solid transparent;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.snav .snav__tab[aria-expanded="true"] { border-bottom-color: var(--snav-ro); }
.snav__sections { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.snav__foot { flex-shrink: 0; display: flex; align-items: center; gap: 28px; padding: 20px 40px 28px; border-top: 1px solid var(--snav-line); background: rgba(7, 20, 49, .35); animation: snavRise .45s cubic-bezier(.2, .7, .2, 1) .24s both; }
.snav .snav__cta--foot { padding: 16px 26px; }
.snav__contact { margin-left: auto; font-size: 15px; color: rgba(255, 255, 255, .85); }
.snav .snav__contact a { color: #fff; }
.snav .snav__gtitle { font-family: var(--snav-serif); font-size: 30px; line-height: 1.15; color: #fff; }
.snav__grule { display: block; height: 2px; width: 48px; background: var(--snav-seafoam); margin: 8px 0 8px; animation: snavRule .45s ease-out both; animation-delay: .1s; }
.snav__group { display: flex; flex-direction: column; gap: 4px; animation: snavRise .45s cubic-bezier(.2, .7, .2, 1) both; }
.snav__group .snav__link { font-size: 16px; padding: 6px 0; }
.snav__dots, .snav__subtabs { display: none; }

/* Menu button: the word rolls from Menu to Close and the compass star turns into a close mark. */
.snav__words { position: relative; display: block; height: 16px; width: 52px; overflow: hidden; line-height: 16px; text-align: left; }
.snav__words span { display: block; height: 16px; transition: transform .35s cubic-bezier(.6, 0, .2, 1); }
.snav__menu[aria-expanded="true"] .snav__words span { transform: translateY(-16px); }
.snav__compass { transition: transform .5s cubic-bezier(.5, -.3, .3, 1.4); }
.snav__menu[aria-expanded="true"] .snav__compass { transform: rotate(225deg) scale(1.05); }

@media (max-width: 1099px) {
  .snav__doors, .snav .snav__talk:not(.snav__talk--foot) { display: none !important; }
  .snav__bar { gap: 24px; padding: 0 40px; }
  .snav__logo { width: 184px; margin-right: auto; }
  .snav .snav__menu {
    display: flex !important; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(7, 20, 49, .45); /* keeps the label above 4.5:1 over the brightest sky */
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; line-height: 16px;
  }
  .snav .snav__bar .snav__cta { font-size: 13px; padding: 13px 18px; }
  .snav.is-sheet .snav__bar .snav__cta { display: none; }
  /* Tablet: the tab picks which door shows; its groups sit in two columns. */
  .snav__head { display: none !important; }
  .snav__sec { display: none; padding: 44px 40px 32px; }
  .snav__sec.is-open { display: block; }
  .snav__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 40px; }
}

@media (max-width: 699px) {
  .snav { --snav-bar: 76px; }
  .snav__bar { padding: 0 22px; }
  .snav__logo { width: 150px; }
  .snav .snav__bar .snav__cta, .snav__tabs, .snav__contact { display: none !important; }
  .snav__sections { padding: 4px 22px 12px; }
  .snav__sec { display: block; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, .18); animation: snavRise .45s cubic-bezier(.2, .7, .2, 1) both; }
  .snav__sec:nth-child(1) { animation-delay: .06s; } .snav__sec:nth-child(2) { animation-delay: .12s; }
  .snav__sec:nth-child(3) { animation-delay: .18s; } .snav__sec:nth-child(4) { animation-delay: .24s; }
  .snav .snav__head { display: flex !important; align-items: baseline; gap: 14px; width: 100%; padding: 18px 0 14px; text-align: left; color: #fff; }
  .snav a.snav__head { padding-bottom: 18px; }
  .snav a.snav__head svg, .snav .snav__plus { align-self: center; flex-shrink: 0; }
  .snav__hnum { font-family: var(--snav-serif); font-size: 14px; color: var(--snav-seafoam); }
  .snav__hlabel { flex-grow: 1; display: flex; flex-direction: column; gap: 8px; font-family: var(--snav-serif); font-size: 26px; line-height: 1.15; }
  .snav__hrule { display: none; height: 3px; width: 48px; background: var(--snav-ro); animation: snavRule .45s ease-out both; animation-delay: .1s; }
  .snav__plus { transition: transform .2s ease; }
  .snav__sec.is-open .snav__hrule { display: block; }
  .snav__sec.is-open .snav__plus { transform: rotate(45deg); }
  .snav__body { display: none; flex-direction: column; gap: 14px; padding: 4px 0 22px 30px; }
  .snav__sec.is-open .snav__body { display: flex; animation: snavRise .4s cubic-bezier(.2, .7, .2, 1) both; }
  .snav__track { display: flex; flex-direction: column; gap: 22px; }
  .snav__gnum { display: none; }
  .snav .snav__gtitle { font-size: 21px; line-height: 1.2; }
  .snav__grule { width: 32px; margin: 6px 0 4px; }
  .snav__group { animation: none; }
  .snav__group .snav__link { padding: 7px 0; }
  /* Swipe rows (What We Do, Company): the group names become tabs and the lists slide sideways. */
  .snav__sec--swipe .snav__subtabs { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .snav__subtabs::-webkit-scrollbar { display: none; }
  .snav .snav__subtab { flex-shrink: 0; white-space: nowrap; padding-bottom: 8px; border-bottom: 3px solid transparent; font-family: var(--snav-serif); font-size: 20px; line-height: 1.2; color: rgba(255, 255, 255, .6); }
  .snav .snav__subtab[aria-selected="true"] { color: #fff; border-bottom-color: var(--snav-ro); }
  .snav__sec--swipe .snav__viewport { overflow: hidden; touch-action: pan-y; }
  .snav__sec--swipe .snav__track { flex-direction: row; align-items: flex-start; gap: 0; width: 300%; transition: transform .38s cubic-bezier(.2, .7, .2, 1); }
  .snav__sec--swipe .snav__group { width: 33.3333%; flex-shrink: 0; padding-right: 16px; }
  .snav__sec--swipe .snav__group > .snav__gtitle, .snav__sec--swipe .snav__group > .snav__grule { display: none; }
  .snav__sec--swipe .snav__dots { display: flex; justify-content: center; gap: 10px; margin-top: -6px; }
  .snav .snav__dot { padding: 10px 0; }
  .snav__dot span { display: block; width: 32px; height: 4px; background: rgba(255, 255, 255, .28); transition: background-color .2s; }
  .snav__dot[aria-current="true"] span { background: #fff; }
  .snav__foot { flex-direction: column; gap: 14px; padding: 16px 22px 26px; }
  .snav .snav__cta--foot { width: 100%; text-align: center; padding: 16px 20px; }
}

@keyframes snavFade { from { opacity: 0; } to { opacity: 1; } }
/* Parker, 2026-11-12: nothing slides or jumps; panels and columns only fade in, in turn. */
@keyframes snavRise { from { opacity: 0; } to { opacity: 1; } }
@keyframes snavRule { from { opacity: 0; } to { opacity: 1; } }
@keyframes snavTwinkle { 0%, 70%, 100% { transform: scale(1) rotate(0); } 82% { transform: scale(1.25) rotate(45deg); } }
body.snav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .snav *, .snav *::before, .snav *::after { animation: none !important; transition: none !important; }
}