.global-site-header { position: sticky; top: 0; z-index: 1000; margin: 0; padding: 0; border-bottom: 2px solid var(--palette-accent, #ff9720); background: linear-gradient(135deg, var(--palette-dark, #040f21), var(--palette-primary, #081b33)); box-shadow: 0 10px 28px rgba(var(--palette-shadow-rgb, 2,11,24),.24); font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", Arial, sans-serif; font-size: 1rem; line-height: 1.5; text-align: left; -webkit-text-size-adjust: 100%; }
/* Isolate the shared header from each page's resets and inherited typography. */
.global-site-header *, .global-site-header *::before, .global-site-header *::after { box-sizing: border-box; }
.global-site-header :where(nav, details, summary, a, button, img) { margin: 0; padding: 0; }
.global-site-header img { display: block; max-width: none; object-fit: contain; }
.global-site-header button { appearance: none; cursor: pointer; line-height: 1.5; transition: opacity .15s ease; }
.global-site-header button:hover { opacity: .88; }
.global-header-inner { position: relative; width: min(1440px, calc(100% - 48px)); min-height: 94px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
/* Reserve the jump's left-hand run-up on every page so logo alignment stays identical. */
.global-brand { position: relative; flex: 0 0 228px; display: block; width: 228px; height: 82px; color: transparent; text-decoration: none; }
.global-logo-stage { position: relative; display: block; width: 156px; height: 82px; margin-left: 72px; transform: scale(.9); transform-origin: left center; }
.global-logo-stage .logo-wordmark { position: absolute; right: 0; bottom: 1px; width: 156px; height: auto; }
.global-logo-stage .logo-kangaroo { position: absolute; left: calc(50% - 32px); bottom: 37px; width: 64px; height: auto; transform-origin: 50% 100%; }
.global-nav-row { display: contents; }
.global-nav { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.global-nav a, .global-nav summary { color: #e5edf4; font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", Arial, sans-serif; font-size: .9rem; font-weight: 700; letter-spacing: .005em; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.global-nav > a, .global-dropdown > summary { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; padding: 11px 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; transition: color .18s ease; }
.global-nav > a::before, .global-dropdown > summary::before { content: ""; position: absolute; right: 10px; bottom: 4px; left: 10px; height: 2px; background: var(--palette-accent, #ff9720); transform: scaleX(0); transition: transform .18s ease; }
.global-nav > a:hover, .global-dropdown > summary:hover, .global-dropdown[open] > summary, .global-nav > a.active, .global-dropdown > summary.active { color: var(--palette-accent-hover, #ffb35b); }
.global-nav > a:hover::before, .global-nav > a.active::before, .global-dropdown > summary:hover::before, .global-dropdown > summary.active::before, .global-dropdown[open] > summary::before { transform: scaleX(1); }
.global-dropdown { position: relative; flex-shrink: 0; }
.global-dropdown summary { cursor: pointer; list-style: none; }
.global-dropdown summary::-webkit-details-marker { display: none; }
.global-dropdown > summary::after { content: ""; display: block; width: 7px; height: 7px; flex: 0 0 7px; margin: -4px 1px 0 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; }
.global-dropdown[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.global-dropdown:not([open]) > .global-nav-menu { display: none; }
.global-nav-menu { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); z-index: 1010; width: max-content; min-width: 190px; max-width: calc(100vw - 32px); display: grid; gap: 0; padding: 6px; border: 1px solid var(--bluesky-glass-border); border-radius: 12px; background: var(--bluesky-glass-surface); -webkit-backdrop-filter: blur(var(--bluesky-glass-blur)); backdrop-filter: blur(var(--bluesky-glass-blur)); box-shadow: var(--bluesky-glass-shadow); }
/* Bridge the visual gap so the pointer can move into the dropdown. */
.global-nav-menu::before { content: ""; position: absolute; top: -12px; right: 0; left: 0; height: 12px; }
.global-dropdown[open] > .global-nav-menu { animation: global-menu-unroll .2s ease-out; }
.global-nav-menu a { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 16px; border: 0; border-radius: 0; color: var(--palette-primary, #081b33); background: transparent; font-weight: 680; text-shadow: none; transition: color .18s ease; }
.global-nav-menu a:hover, .global-nav-menu a.active { color: #081522; background: transparent; text-decoration: underline; text-decoration-color: var(--palette-accent, #ff9720); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.global-submenu-back { display: none; }
.global-submenu-back svg { flex: 0 0 20px; }
@keyframes global-menu-unroll { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(-50px -70px -70px); opacity: 1; } }
.global-header-phone { flex: 0 0 auto; padding: 8px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: #fff; background: rgba(255,255,255,.06); font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", Arial, sans-serif; font-size: .9rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.global-header-phone span { margin-right: 5px; color: var(--palette-accent, #ff9720); }
.global-header-actions { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 10px; text-align: center; }
.global-header-actions .global-header-phone { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 11px; font-size: .875rem; }
.global-header-request { min-height: 40px; padding: 8px 14px; border: 1px solid var(--palette-accent, #ff9720); border-radius: 8px; color: var(--palette-dark, #040f21); background: var(--palette-accent, #ff9720); font: 800 .875rem/1.3 "Segoe UI Variable Text", "Aptos", "Segoe UI", Arial, sans-serif; white-space: nowrap; }
.global-header-request:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.global-menu-toggle { display: none; margin-left: auto; padding: 9px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px; color: #fff; background: rgba(255,255,255,.07); font-family: "Segoe UI Variable Text", "Aptos", "Segoe UI", Arial, sans-serif; font-size: .9rem; font-weight: 800; letter-spacing: .03em; }
.global-site-header a:focus-visible, .global-site-header summary:focus-visible, .global-menu-toggle:focus-visible { outline: 2px solid var(--palette-accent, #ff9720); outline-offset: 3px; }

@media (max-width: 1536px) {
  .global-header-inner { display: grid; grid-template-columns: auto minmax(0,1fr) 44px; grid-template-areas: "brand actions toggle"; padding: 8px 0; }
  .global-site-header.is-enhanced .global-menu-toggle { display: block; }
  .global-header-actions { grid-area: actions; justify-self: end; min-width: 0; margin-left: 0; }
  /* Settle the logo on the left at every width that uses the hamburger menu. */
  .global-brand { grid-area: brand; flex: 0 0 228px; width: 228px; }
  .global-logo-stage { margin-left: 72px; }
  .global-brand:not(.animated-logo), .global-brand.logo-settled { flex-basis: 156px; width: 156px; }
  .global-brand:not(.animated-logo) .global-logo-stage, .global-brand.logo-settled .global-logo-stage { margin-left: 0; }
  .global-brand.logo-settled { transition: width .4s ease, flex-basis .4s ease; }
  .global-brand.logo-settled .global-logo-stage { transition: margin-left .4s ease; }
  .global-menu-toggle { grid-area: toggle; justify-self: end; position: relative; width: 44px; height: 44px; margin-left: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 0; letter-spacing: 0; }
  .global-menu-toggle::before, .global-menu-toggle::after { content: ""; position: absolute; top: 21px; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .global-menu-toggle::before { box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
  .global-menu-toggle::after { opacity: 0; }
  .global-menu-toggle[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
  .global-menu-toggle[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
  .global-header-phone { margin-left: 0; }
  /* Float the compact glass menu over the page without changing header height. */
  .global-nav-row { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1010; width: max-content; max-width: 100%; min-width: 0; display: flex; justify-content: flex-end; background: transparent; }
  .global-site-header.is-enhanced .global-nav-row { display: none; }
  .global-site-header.is-enhanced .global-nav-row:has(> .global-nav.open) { display: flex; }
  .global-nav { position: static; flex: 0 1 auto; width: max-content; max-width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 4px; margin: 0; padding: 8px 6px; border: 1px solid var(--bluesky-glass-border); border-radius: 12px; background: var(--bluesky-glass-surface); -webkit-backdrop-filter: blur(var(--bluesky-glass-blur)); backdrop-filter: blur(var(--bluesky-glass-blur)); box-shadow: var(--bluesky-glass-shadow); }
  .global-nav a, .global-nav summary { color: var(--palette-primary, #081b33); text-shadow: none; }
  /* Underline only the label while retaining each full-width touch target. */
  .global-nav > a::before, .global-dropdown > summary::before { display: none; }
  .global-nav > a:hover, .global-nav > a.active, .global-dropdown > summary:hover, .global-dropdown > summary.active, .global-dropdown[open] > summary { color: #081522; text-decoration: underline; text-decoration-color: var(--palette-accent, #ff9720); text-underline-offset: 5px; text-decoration-thickness: 2px; }
  .global-site-header.is-enhanced .global-nav { display: none; }
  .global-site-header.is-enhanced .global-nav.open { display: flex; animation: global-menu-unroll .2s ease-out; }
  .global-nav.open { max-height: min(65dvh, var(--global-nav-available,calc(100dvh - 140px))); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-block: 8px; scrollbar-gutter: stable; }
  .global-nav > a, .global-dropdown { width: 100%; flex: 0 0 auto; }
  .global-nav > a, .global-dropdown > summary { min-height: 46px; padding: 14px 13px 12px; }
  /* A darker inset surface distinguishes expanded items from their parent label. */
  .global-nav-menu { position: static; transform: none; width: auto; min-width: 0; max-width: 100%; margin: 4px 0 8px; padding: 4px 6px; border: 0; border-radius: 8px; background: rgba(var(--palette-dark-rgb, 4,15,33),.82); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .global-dropdown[open] > .global-nav-menu { animation: none; }
  .global-nav-menu::before { display: none; }
  .global-nav-menu a { color: #fff; background: transparent; }
  .global-nav-menu a:hover, .global-nav-menu a.active { color: var(--palette-accent-hover, #ffb35b); background: transparent; }
  .global-nav-menu .global-submenu-back { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 4px; padding: 11px 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); background: transparent; color: var(--palette-accent-hover, #ffd09a); font: 700 .875rem/1.4 "Segoe UI",Arial,sans-serif; text-align: center; }
  .global-submenu-back:focus-visible { outline: 2px solid var(--palette-accent, #ff9720); outline-offset: -2px; }
}

@media (max-width: 620px) {
  .global-header-inner { width: min(100% - 28px, 1440px); min-height: 82px; gap: 12px; }
  .global-brand { flex-basis: 204px; width: 204px; height: 70px; margin-right: 0; }
  .global-logo-stage { width: 132px; height: 70px; margin-left: 72px; }
  .global-brand:not(.animated-logo), .global-brand.logo-settled { flex-basis: 132px; width: 132px; }
  .global-logo-stage .logo-wordmark { width: 132px; }
  .global-logo-stage .logo-kangaroo { left: calc(50% - 27.5px); bottom: 32px; width: 55px; }
  .global-header-actions .global-header-phone { display: none; }
  .global-header-request { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) { .global-brand .logo-kangaroo { animation: none !important; transform: none !important; } }
@media (max-width: 1536px) and (prefers-reduced-motion: reduce) { .global-brand { flex-basis: 156px; width: 156px; transition: none !important; } .global-brand .global-logo-stage { margin-left: 0; transition: none !important; } }
@media (max-width: 620px) and (prefers-reduced-motion: reduce) { .global-brand { flex-basis: 132px; width: 132px; } }
@media (prefers-reduced-motion: reduce) { .global-nav a, .global-nav summary, .global-nav > a::before, .global-dropdown > summary::before, .global-dropdown > summary::after { transition: none; } .global-dropdown[open] > .global-nav-menu, .global-site-header.is-enhanced .global-nav.open { animation: none; } }

/* Jingle sits immediately before the phone link in the shared menu bar. */
.global-jingle-control { position: relative; flex: 0 1 auto; min-width: 0; }
.global-jingle-button { appearance: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; color: #fff; font: 650 .875rem/1.4 "Segoe UI", Arial, sans-serif; }
.global-jingle-button:hover { color: var(--palette-accent-hover, #ffb35b); }
.global-jingle-button:focus-visible { outline: 2px solid var(--palette-accent, #ff9720); outline-offset: 2px; }
.global-jingle-button svg { flex-shrink: 0; }
.global-jingle-button .jingle-pause-icon { display: none; }
.global-jingle-button[aria-pressed="true"] .jingle-play-icon { display: none; }
.global-jingle-button[aria-pressed="true"] .jingle-pause-icon { display: block; }
.global-jingle-status { position: absolute; top: 100%; left: 0; z-index: 1010; width: 220px; max-width: calc(100vw - 28px); padding: 12px; border: 1px solid var(--palette-accent, #ff9720); border-radius: 6px; background: var(--palette-dark, #040f21); color: var(--palette-accent-hover, #ffd3a0); font-size: .875rem; line-height: 1.4; }
.global-jingle-status[hidden] { display: none; }
#proposal-details, #equipment-selection, #licensing-insurance { scroll-margin-top: 240px; }
.global-header-request .request-label-compact, .global-header-request .request-label-small, .global-jingle-button .jingle-label-compact { display: none; }

/* One header row at every hamburger width, including the initial logo hops. */
@media (max-width: 980px) {
  .global-header-inner { width: calc(100% - 32px); gap: 10px; grid-template-columns: auto minmax(0,1fr) 44px; grid-template-areas: "brand actions toggle"; }
  .global-brand, .global-brand:not(.animated-logo), .global-brand.logo-settled { flex-basis: 156px; width: 156px; }
  .global-logo-stage { margin-left: 0; transform: translateX(64px) scale(.58); }
  .global-brand:not(.animated-logo) .global-logo-stage, .global-brand.logo-settled .global-logo-stage { margin-left: 0; transform: scale(var(--header-logo-resting-scale,.9)); }
  .global-brand.logo-settled .global-logo-stage { transition: transform .4s ease; }
  .global-header-actions { width: auto; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
  .global-header-actions .global-header-phone { display: none; }
  .global-jingle-control, .global-header-request { flex: 0 0 auto; }
  .global-jingle-button, .global-header-request { white-space: nowrap; }
}
@media (max-width: 760px) {
  .global-jingle-button .jingle-label, .global-header-request .request-label-full { display: none; }
  .global-jingle-button .jingle-label-compact, .global-header-request .request-label-compact { display: inline; }
}
@media (max-width: 620px) {
  .global-header-inner { width: calc(100% - 20px); gap: 6px; }
  .global-brand, .global-brand:not(.animated-logo), .global-brand.logo-settled { flex-basis: 120px; width: 120px; }
  .global-logo-stage { transform: translateX(46px) scale(.5); }
  .global-header-actions { gap: 6px; }
  .global-jingle-button { min-width: 44px; min-height: 44px; gap: 5px; padding: 6px; font-size: .8125rem; }
  .global-jingle-button svg { width: 14px; height: 14px; }
  .global-header-request { min-width: 0; min-height: 44px; padding: 8px; font-size: .8125rem; }
  .global-jingle-status { left: 0; right: auto; width: 196px; max-width: calc(100vw - 20px); }
}
@media (max-width: 480px) {
  .global-header-inner, .global-header-actions { gap: 4px; }
  .global-jingle-button { width: 44px; }
  .global-jingle-button .jingle-label-compact, .global-header-request .request-label-compact { display: none; }
  .global-header-request .request-label-small { display: inline; }
  .global-header-request { width: 100px; padding: 8px 6px; font-size: .75rem; }
}
@media (max-width: 380px) {
  .global-brand, .global-brand:not(.animated-logo), .global-brand.logo-settled { --header-logo-resting-scale: .7; flex-basis: 96px; width: 96px; }
  .global-logo-stage { transform: translateX(36px) scale(.4); }
}
@media (max-width: 980px) and (prefers-reduced-motion: reduce) {
  .global-brand .global-logo-stage { margin-left: 0; transform: scale(var(--header-logo-resting-scale,.9)); transition: none !important; }
}

/* Hide the viewport scroll indicator on touch screens; swipe scrolling remains native.
   Nested menus and forms keep their own scrollbars. */
@media (hover: none) and (pointer: coarse) and (max-width: 1200px) {
  html, body { scrollbar-width: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
}

/* A compact history strip stays with the sticky header only when navigation is available. */
.mobile-page-history { display: none; }
@media (max-width: 980px) {
  .global-site-header.history-ready.has-page-history .mobile-page-history { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; margin: 0; padding: 0 max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px)); border: 0; background: var(--palette-dark,#040f21); }
  .mobile-page-history button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font: 850 .8125rem/1.4 "Segoe UI",Arial,sans-serif; letter-spacing: .055em; text-transform: uppercase; }
  .mobile-page-history button[hidden] { display: none; }
  .mobile-page-history [data-history-step="-1"] { margin-right: auto; }
  .mobile-page-history [data-history-step="1"] { margin-left: auto; }
  .mobile-page-history button svg { display: block; flex: 0 0 20px; stroke-width: 2.5; }
  .mobile-page-history button:not(:disabled):hover { opacity: 1; color: var(--palette-accent-hover,#ffb35b); }
  .mobile-page-history button:focus-visible { outline: 2px solid var(--palette-accent,#ff9720); outline-offset: 2px; }
  .global-site-header.history-ready.has-page-history .global-nav-row { top: calc(100% + 52px); }
}
