/* ==========================================================================
   ANNEX — MORPHING HEADER
   The approved prototype, rebuilt on the locked Design System v2 palette and
   Inter Tight. A full-width navy bar contracts into a floating light capsule on
   scroll and stays visible in every scroll direction.

   The header keeps its place in the layout rather than overlaying the hero:
   the expanded state is the same solid navy bar the site already had, so
   Hero C and every other page start exactly where they did.
   ========================================================================== */

/* Geometry matches the previous header exactly: an 84px row plus its 1px
   bottom border on desktop, 70 + 1 below 1000px. Anything else shifts every
   page down or up by a pixel or two. */
:root{ --ph-shell:84px; --ph-h:85px; --ph-shell-compact:64px; }

.ph{
  position:fixed;inset:0 0 auto;z-index:100;
  background:transparent;
  /* the 1px rule lives on the header itself so it adds to the height, exactly
     as the previous bar did — border-box means a border on the shell would
     have been absorbed into its min-height and shifted every page up 1px */
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:0;
  transition:padding .35s ease}

/* the shell is the thing that morphs */
.ph__shell{
  width:100%;max-width:none;margin-inline:auto;
  min-height:var(--ph-shell);
  display:flex;align-items:center;gap:28px;
  padding-inline:var(--ae-pad,clamp(18px,5vw,72px));
  background:var(--annex-navy);
  border:1px solid transparent;
  border-radius:0;
  box-shadow:none;
  transition:
    max-width .45s cubic-bezier(.2,.8,.2,1),
    min-height .35s ease,
    border-color .35s ease,
    border-radius .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease,
    background .35s ease,
    padding .35s ease}

/* --- compact: a floating capsule on a light surface --- */
.ph.is-compact{padding:10px 0;border-bottom-color:transparent}
.ph.is-compact .ph__shell{
  max-width:1160px;
  width:min(calc(100% - 48px),1160px);
  min-height:var(--ph-shell-compact);
  background:rgba(246,248,250,.94);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  border-color:rgba(6,36,82,.10);
  border-bottom-color:rgba(6,36,82,.10);
  border-radius:18px;
  box-shadow:0 12px 38px rgba(6,36,82,.14);
  padding-inline:20px}

/* --- colour states ------------------------------------------------------- */
.ph:not(.is-compact) .ph-link,
.ph:not(.is-compact) .ph-tel{color:var(--annex-text-light)}
.ph:not(.is-compact) .ph-link:hover,
.ph:not(.is-compact) .ph-link[aria-current="page"]{color:#fff}

.ph.is-compact .ph-link,
.ph.is-compact .ph-tel{color:var(--annex-text-secondary)}
.ph.is-compact .ph-link:hover,
.ph.is-compact .ph-link[aria-current="page"]{color:var(--annex-text)}
.ph.is-compact .ph-logo{background:transparent;padding:0}
.ph.is-compact .ph-burger{border-color:rgba(6,36,82,.22)}
.ph.is-compact .ph-burger span{background:var(--annex-text)}

/* the estimate CTA keeps the accessible red in both states */
.ph .ph-est{background:var(--annex-red-dark);color:#fff}
.ph .ph-est:hover{background:#AF1E1A}

/* the phone folds away in the capsule, as in the approved prototype */
.ph-tel{transition:opacity .25s ease,max-width .35s ease,margin .25s ease;
  max-width:200px;overflow:hidden;white-space:nowrap}
.ph.is-compact .ph-tel{opacity:0;max-width:0;margin-inline:0;pointer-events:none}

/* logo scales down with the shell */
.ph-logo img{transition:height .35s ease}
.ph.is-compact .ph-logo img{height:26px}

/* dropdown panels follow the shell surface */
.ph.is-compact .ph-sub{background:var(--annex-white);border-color:var(--annex-divider)}
.ph.is-compact .ph-sub .ph-link{color:var(--annex-text-secondary)}
.ph.is-compact .ph-sub .ph-link:hover{color:var(--annex-text)}

/* --- content offset: the header is fixed, so the page starts below it ----- */
body{padding-top:var(--ph-h)}
@media (max-width:1000px){ :root{ --ph-shell:70px; --ph-h:71px; } }

.ph-nav.is-open{top:var(--ph-h)}

@media (prefers-reduced-motion:reduce){
  .ph,.ph__shell,.ph-tel,.ph-logo img{transition:none}
}