/* Global Icons — shared site header (used on every page) */
/* position, surface and bottom border: see "Sticky header" at the end of this file */
.gi-site-top{background:#0053E2;color:#fff}
.gi-site-header .gi-nav__brand,.gi-site-header .gi-nav__links a{color:var(--color-white)}
.gi-site-header .gi-nav__links a[aria-current="page"]{border-bottom-color:var(--color-gold)}
@media (hover:hover){.gi-site-header .gi-nav__links a:hover{border-bottom-color:var(--color-gold)}}
.gi-site-header .gi-nav__menu{color:var(--color-white)}
/* ── Mobile menu (under 900px) ──────────────────────────────────────────────
   A full-screen blue sheet under the header bar, in the hero's blue with its dot texture:
   numbered page links with arrows on full-width hairlines, then "Talk to us" and the
   email at the bottom. .is-open comes from assets/js/site-chrome.js, which also locks
   the page scroll and keeps Tab inside the open menu. The sheet hangs from the fixed
   header (top: 100%) and is sized to the rest of the screen, so the page behind it
   never affects where it sits. Motion: the sheet fades in (--dur-300, out --dur-200),
   the rows rise in 40ms apart; reduced motion shows the open state at once. */
@media (max-width:899px){
  .gi-site-header .gi-nav__links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;top:100%;left:0;right:0;
    height:calc(100vh - var(--gi-header-h));height:calc(100dvh - var(--gi-header-h));
    margin:0;padding:var(--space-8) var(--space-16) calc(var(--space-32) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;counter-reset:gi-menu;
    background-color:var(--color-blue);
    background-image:radial-gradient(rgb(var(--color-white-rgb) / .16) 1px,transparent 1.2px);
    background-size:var(--space-6) var(--space-6);
    visibility:hidden;opacity:0;
    transition:opacity var(--dur-200) var(--ease-out-quart),visibility 0s linear var(--dur-200);
  }
  .gi-site-header.is-open .gi-nav__links{visibility:visible;opacity:1;transition:opacity var(--dur-300) var(--ease-out-quart),visibility 0s}
  /* rows rise in one after another; closing is quick and all at once */
  .gi-site-header .gi-nav__links>li{opacity:0;transform:translateY(var(--space-12));transition:opacity var(--dur-100) linear,transform 0s linear var(--dur-100)}
  .gi-site-header.is-open .gi-nav__links>li{opacity:1;transform:none;transition:opacity var(--dur-300) var(--ease-out-quart),transform var(--dur-400) var(--ease-out-quart)}
  .gi-site-header.is-open .gi-nav__links>li:nth-child(1){transition-delay:calc(var(--dur-80) * .5)}
  .gi-site-header.is-open .gi-nav__links>li:nth-child(2){transition-delay:var(--dur-80)}
  .gi-site-header.is-open .gi-nav__links>li:nth-child(3){transition-delay:calc(var(--dur-80) * 1.5)}
  .gi-site-header.is-open .gi-nav__links>li:nth-child(4){transition-delay:calc(var(--dur-80) * 2)}
  .gi-site-header.is-open .gi-nav__links>li:nth-child(5){transition-delay:calc(var(--dur-80) * 2.5)}
  /* page links: number, name, arrow; the whole row is the tap target */
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a{
    counter-increment:gi-menu;display:grid;grid-template-columns:var(--space-32) 1fr auto;align-items:center;gap:var(--space-12);
    width:100%;min-height:calc(var(--space-64) + var(--space-8));padding:0;
    border-bottom:1px solid rgb(var(--color-white-rgb) / .2);
    font-family:var(--font-display);font-weight:500;font-size:var(--text-30);letter-spacing:-.02em;color:var(--color-white);text-decoration:none}
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a::before{content:counter(gi-menu,decimal-leading-zero);content:counter(gi-menu,decimal-leading-zero) / "";font:600 var(--text-13)/1 var(--font-body);letter-spacing:.06em;color:var(--color-blue-100);font-variant-numeric:tabular-nums}
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a::after{content:"→";content:"→" / "";font-size:var(--text-24);color:rgb(var(--color-white-rgb) / .6);transition:transform var(--dur-200) var(--ease-out-quart)}
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a[aria-current="page"],
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a[aria-current="page"]::after{color:var(--color-gold-on-blue)}
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a:active{background-color:rgb(var(--color-white-rgb) / .06)}
  .gi-site-header .gi-nav__links a:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}
  /* bottom of the sheet: the same "Talk to us" pill as the hero, full width, then the email */
  .gi-site-header .gi-nav__menu-cta{margin-top:auto;padding-top:var(--space-32)}
  .gi-site-header .gi-nav__links .gi-nav__menu-cta a{width:100%;min-height:calc(var(--space-48) + var(--space-8));font-size:var(--text-17)}
  .gi-site-header .gi-nav__links .gi-nav__menu-mail a{display:flex;justify-content:center;align-items:center;min-height:var(--space-44);margin-top:var(--space-12);font-size:var(--text-16);color:var(--color-blue-100);border-bottom:0}
}
@media (max-width:899px) and (hover:hover){
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a:hover::after{transform:translateX(var(--space-4))}
}
/* short screens (landscape phones): smaller rows so more fits before the sheet scrolls */
@media (max-width:899px) and (max-height:500px){
  .gi-site-header .gi-nav__links>li:not(.gi-nav__menu-only)>a{min-height:var(--space-56);font-size:var(--text-24)}
  .gi-site-header .gi-nav__menu-cta{padding-top:var(--space-20)}
}
/* the page behind the open menu does not scroll */
html.gi-menu-open{overflow:hidden}
/* menu button: two lines that turn into an X (an on-screen morph, so --ease-in-out-cubic) */
.gi-burger{position:relative;display:block;width:var(--space-18);height:var(--space-8)}
.gi-burger i{position:absolute;left:0;right:0;height:var(--space-2);border-radius:var(--radius-pill);background:currentColor;transition:transform var(--dur-250) var(--ease-in-out-cubic)}
.gi-burger i:first-child{top:0}
.gi-burger i:last-child{bottom:0}
.gi-site-header.is-open .gi-burger i:first-child{transform:translateY(calc(var(--space-6) / 2)) rotate(45deg)}
.gi-site-header.is-open .gi-burger i:last-child{transform:translateY(calc(var(--space-6) / -2)) rotate(-45deg)}
/* "Talk to us" sits in the mobile menu; on desktop the pill beside the links is the same link */
@media (min-width:900px){.gi-nav__links .gi-nav__menu-only{display:none}}
/* touch: the brand and desktop links reach 44px without moving anything for mouse users */
.gi-site-header .gi-nav__brand{min-height:var(--space-44)}
@media (min-width:900px) and (pointer:coarse){.gi-site-header .gi-nav__links a{min-width:var(--space-44);justify-content:center}}

/* call-to-action buttons — pill with inner light and soft glow, in the company blues */
.gi .gi-btn{border-radius:999px;min-height:52px;padding:0 28px;font-weight:600;letter-spacing:-.005em}
.gi .gi-btn--primary{position:relative;isolation:isolate;overflow:hidden;gap:10px;color:#fff;border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,#2E6DF0 0%,#0053E2 55%,#0043B8 100%);
  box-shadow:0 0 0 6px rgba(0,83,226,.14),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -10px 22px rgba(117,168,255,.45);
  transition:transform .2s ease,box-shadow .25s ease,filter .25s ease}
.gi .gi-btn--primary::before{content:"";position:absolute;left:12%;right:12%;bottom:-55%;height:90%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(173,203,255,.75),rgba(173,203,255,0));z-index:-1;transition:transform .35s ease,opacity .35s ease;opacity:.8}
.gi .gi-btn--primary::after{content:"→";display:inline-block;transition:transform .2s ease}
.gi .gi-btn--primary:hover{transform:translateY(-1px);filter:brightness(1.08);
  box-shadow:0 0 0 7px rgba(0,83,226,.2),0 10px 28px -8px rgba(0,67,184,.6),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -12px 26px rgba(117,168,255,.6)}
.gi .gi-btn--primary:hover::before{transform:translateY(-12%) scale(1.1);opacity:1}
.gi .gi-btn--primary:hover::after{transform:translateX(3px)}
.gi .gi-btn--primary:active{transform:translateY(0);filter:brightness(.95)}
/* on the blue sections the pill steps down to the deep blues so it separates from the background */
.gi-dark .gi-btn--primary,#top .gi-btn--primary{color:#fff;border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg,#1A55D6 0%,#003BA3 55%,#002D7A 100%);
  box-shadow:0 0 0 6px rgba(0,26,77,.28),inset 0 1px 0 rgba(255,255,255,.3),inset 0 -10px 22px rgba(117,168,255,.5)}
.gi-dark .gi-btn--primary:hover,#top .gi-btn--primary:hover{background:linear-gradient(180deg,#1A55D6 0%,#003BA3 55%,#002D7A 100%);border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 7px rgba(0,26,77,.34),0 12px 30px -10px rgba(0,26,77,.7),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -12px 26px rgba(117,168,255,.65)}
.gi .gi-btn--secondary{border-width:1.5px}
#top .gi-btn--secondary{border-color:rgba(255,255,255,.55)}
#top .gi-btn--secondary:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.gi .gi-btn:focus-visible{outline:2px solid var(--color-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.gi .gi-btn--primary,.gi .gi-btn--primary::before,.gi .gi-btn--primary::after{transition:none}}


/* button motion — the inner light breathes, a sheen sweeps across on hover, the arrow nudges, the button presses in */
.gi .gi-btn--primary{background-size:100% 100%,250% 100%;background-repeat:no-repeat;background-position:0 0,150% 0;transition:transform .2s ease,box-shadow .25s ease,filter .25s ease,background-position .9s cubic-bezier(.16,1,.3,1)}
.gi .gi-btn--primary{background-image:linear-gradient(180deg,#2E6DF0 0%,#0053E2 55%,#0043B8 100%),linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.32) 50%,rgba(255,255,255,0) 62%)}
.gi-dark .gi-btn--primary,#top .gi-btn--primary,.gi-dark .gi-btn--primary:hover,#top .gi-btn--primary:hover{background-image:linear-gradient(180deg,#1A55D6 0%,#003BA3 55%,#002D7A 100%),linear-gradient(110deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.28) 50%,rgba(255,255,255,0) 62%)}
.gi .gi-btn--primary:hover{background-position:0 0,-50% 0}
.gi .gi-btn--primary::before{animation:gi-btn-breathe 3.2s ease-in-out infinite}
.gi .gi-btn--primary:hover::before{animation-play-state:paused}
.gi .gi-btn--primary:active{transform:translateY(1px) scale(.98)}
@keyframes gi-btn-breathe{0%,100%{opacity:.65;transform:scale(.95)}50%{opacity:1;transform:translateY(-8%) scale(1.06)}}
/* buttons rise in with the hero on load */
#top .h-hero-text .gi-btn{animation:gi-btn-in .7s cubic-bezier(.16,1,.3,1) backwards}
#top .h-hero-text .gi-btn + .gi-btn{animation-delay:.08s}
@keyframes gi-btn-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.gi .gi-btn--primary::before,#top .h-hero-text .gi-btn{animation:none}.gi .gi-btn--primary{transition:none}}


/* Same page column for header and footer on every page */
@media (min-width:900px){
  .gi-site-header .gi-container{max-width:1440px;padding-inline:64px}
  .bespoke-footer{--page-max:1440px;--page-pad:64px}
}


/* ── Sticky header ──────────────────────────────────────────────────────────
   Fixed to the viewport on every page. It lives inside the blue hero (#top), and
   sticky would let go when the hero ends, so it is fixed and the hero keeps its
   space with padding of the same height (--gi-header-h). Nothing is measured in
   JS, so the page cannot jump on load.
   At the top: no surface, no border; it is part of the hero.
   Scrolled (.is-scrolled, set by assets/js/site-chrome.js):
     1. a background blur fades in behind the bar (::before), no colour; it fades off just
        below the bar. The brand, links and menu icon are navy over white sections and white
        over blue ones (.is-on-dark);
     2. no hairline: the fade separates the bar from the page.
   Reduced motion: same states, no transitions. */
:root { --gi-header-h: calc(var(--space-72) + var(--space-4)); scroll-padding-top: var(--gi-header-h); }
@media (max-width: 899px) { :root { --gi-header-h: var(--space-64); } }

.gi-site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background-color: rgb(var(--color-blue-rgb) / 0);
}
.gi-site-header .gi-nav__inner { height: var(--gi-header-h); min-height: 0; }
#top { padding-top: var(--gi-header-h); }

.gi-site-header::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
/* the hairline: drawn from the centre */
.gi-site-header::after {
  bottom: 0; height: 1px; background: rgb(var(--color-white-rgb) / .24);
  transform: scaleX(0); opacity: 0;
}

/* scrolled: a background blur only, no colour. It covers the bar and fades off by --space-24 below it
   (masked, so it never ends on a hard edge). Taps pass through. */
.gi-site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: calc(var(--gi-header-h) + var(--space-24));
  -webkit-backdrop-filter: blur(var(--space-12)); backdrop-filter: blur(var(--space-12));
  -webkit-mask-image: linear-gradient(to bottom, black calc(var(--gi-header-h) * .5), transparent 100%);
  mask-image: linear-gradient(to bottom, black calc(var(--gi-header-h) * .5), transparent 100%);
  opacity: 0;
}
.gi-site-header.is-scrolled::before { opacity: 1; }
/* with no surface colour, the text follows what is under the bar: navy over white sections,
   white over blue ones (.is-on-dark, set by site-chrome.js from the section under the bar).
   The open mobile menu keeps its own blue panel and white links. */
.gi-site-header.is-scrolled:not(.is-on-dark) .gi-nav__brand,
.gi-site-header.is-scrolled:not(.is-on-dark) .gi-nav__menu,
.gi-site-header.is-scrolled:not(.is-on-dark):not(.is-open) .gi-nav__links a { color: var(--color-navy); }
/* open mobile menu over a scrolled page: the bar goes back to blue so it and the panel read as one */
.gi-site-header.is-open { background-color: var(--color-blue); }
.gi-site-header.is-open::before { opacity: 0; }
.gi-site-header.is-open .gi-nav__brand, .gi-site-header.is-open .gi-nav__menu { color: var(--color-white); }
.gi-site-header.is-open::after { transform: scaleX(1); opacity: 1; background: rgb(var(--color-white-rgb) / .2); }
.gi-site-header.is-live .gi-nav__brand, .gi-site-header.is-live .gi-nav__links a, .gi-site-header.is-live .gi-nav__menu { transition: color var(--dur-400) var(--ease-out-quart); }

/* transitions start only after the first frame (.is-live), so a page opened mid-scroll
   or on an anchor shows the scrolled header straight away instead of animating it in */
.gi-site-header.is-live { transition: background-color var(--dur-400) var(--ease-out-quart); }
.gi-site-header.is-live::before { transition: opacity var(--dur-400) var(--ease-out-quart); }
.gi-site-header.is-live::after { transition: transform var(--dur-700) var(--ease-out-expo), opacity var(--dur-250) var(--ease-out-quart); }

/* without JS there is no scroll state: keep the readable surface and the hairline */
:root:not(.js) .gi-site-header { background-color: var(--color-blue); }
:root:not(.js) .gi-site-header::after { transform: scaleX(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gi-site-header.is-live, .gi-site-header.is-live::before, .gi-site-header.is-live::after { transition: none; }
}