/* =====================================================================
   PON PURE · SHARED SHELL  (tokens · type · buttons · header · mega ·
   drawer · footer · Pura · portal note · shared sub-page blocks)
   Every page carries this block first; page CSS follows it.
   ===================================================================== */
:root {
   --font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
   --blue: #16356B;
   --blue-d: #0E2549;
   --blue-l: #4A74BE;
   --navy: #0C1F3E;
   --navy-2: #16356B;
   --ink: #0E1420;
   --ink-2: #5A6273;
   --ink-3: #98A0B0;
   --mist: #F3F6FB;
   --red: #E0342B;
   --line: rgba(14, 20, 32, .10);
   --white: #fff;
   --r-xl: 34px;
   --r-lg: 24px;
   --r-md: 16px;
   --pill: 999px;
   --ease: cubic-bezier(.2, .8, .2, 1);
   --shadow: 0 30px 70px -40px rgba(12, 31, 62, .5);
   --hdr-h: 118px;
   /* type scale */
   --t-display: clamp(2.5rem, 5.4vw, 4.4rem);
   --t-h1: clamp(2.15rem, 4.4vw, 3.4rem);
   --t-h2: clamp(1.65rem, 3vw, 2.45rem);
   --t-h3: 1.12rem;
   --t-body: 1rem;
   --t-small: .88rem;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--hdr-h) + 12px);
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--font);
   font-size: var(--t-body);
   color: var(--ink);
   background: var(--white);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   overflow-x: clip
}

img,
svg,
video {
   max-width: 100%;
   display: block
}

img {
   height: auto
}

a {
   color: inherit;
   text-decoration: none
}

button,
input,
select,
textarea {
   font: inherit;
   color: inherit
}

button {
   cursor: pointer;
   border: 0;
   background: none
}

:focus-visible {
   outline: 2px solid var(--blue-l);
   outline-offset: 3px;
   border-radius: 6px
}

.wrap {
   width: min(1280px, calc(100% - 40px));
   margin: 0 auto
}

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap
}

h1,
h2,
h3,
h4 {
   font-family: var(--font);
   letter-spacing: -.03em;
   line-height: 1.1;
   text-wrap: balance
}

h1 {
   font-size: var(--t-h1);
   font-weight: 600;
   letter-spacing: -.035em
}

h2 {
   font-size: var(--t-h2);
   font-weight: 500
}

h3 {
   font-size: var(--t-h3);
   font-weight: 600;
   letter-spacing: -.015em;
   line-height: 1.3
}

p {
   text-wrap: pretty
}

.micro {
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--ink-3);
   line-height: 1.4
}

.lede {
   color: var(--ink-2);
   font-size: 1.02rem;
   max-width: 58ch
}

section {
   padding: clamp(64px, 7vw, 112px) 0
}

section+section {
   padding-top: 0
}

section.band {
   padding: clamp(64px, 7vw, 112px) 0
}

/* ---------- buttons (one system) ---------- */
.btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 7px 7px 7px 22px;
   border-radius: var(--pill);
   font-weight: 600;
   font-size: .92rem;
   line-height: 1.2;
   background: var(--blue);
   color: #fff;
   transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
   white-space: nowrap
}

.btn:hover {
   background: var(--blue-d);
   transform: translateY(-1px)
}

@media (max-width:560px) {
   .btn {
      white-space: normal;
      max-width: 100%
   }
}

.btn i {
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: #fff;
   display: grid;
   place-items: center;
   flex: none
}

.btn i svg {
   width: 13px;
   height: 13px;
   stroke: var(--blue);
   fill: none;
   stroke-width: 2.4
}

.btn.white {
   background: #fff;
   color: var(--navy)
}

.btn.white:hover {
   background: var(--mist);
   color:#000
}

.btn.white i {
   background: var(--blue)
}

.btn.white i svg {
   stroke: #fff
}

.btn.line {
   background: transparent;
   color: #fff;
   box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45)
}

.btn.line i {
   background: rgba(255, 255, 255, .2)
}

.btn.line i svg {
   stroke: #fff
}

.btn.line:hover {
   background: rgba(255, 255, 255, .14)
}

.btn.ghost {
   background: transparent;
   color: var(--ink);
   box-shadow: inset 0 0 0 1.5px var(--line)
}

.btn.ghost:hover {
   background: var(--mist)
}

.btn.ghost i {
   background: var(--blue)
}

.btn.ghost i svg {
   stroke: #fff
}

.arrows {
   display: flex;
   gap: 8px
}

.arrows button {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--mist);
   display: grid;
   place-items: center;
   transition: .2s
}

.arrows button:last-child {
   background: var(--blue)
}

.arrows button svg {
   width: 14px;
   height: 14px;
   stroke: var(--ink-2);
   fill: none;
   stroke-width: 2.4
}

.arrows button:last-child svg {
   stroke: #fff
}

.disc {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 600;
   font-size: .9rem;
   color: var(--blue)
}

.disc svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.6;
   transition: transform .25s
}

.disc:hover svg {
   transform: translateX(4px)
}

/* =============================== HEADER =============================== */
header#hdr {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 70;
   isolation: isolate;
   transition: background .3s, box-shadow .3s
}

header#hdr .bar {
   position: relative
}

header#hdr .bar-in {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   height: 76px;
   transition: height .3s
}

.utilbar {
   border-bottom: 1px solid rgba(255, 255, 255, .18);
   transition: .3s
}

.util-in {
   display: flex;
   align-items: center;
   gap: 20px;
   height: 42px
}

.util-in .push {
   flex: 1
}

.util-in .ub {
   display: none;
   align-items: center;
   gap: 8px;
   font-size: .78rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .8)
}

.util-in .ub:hover {
   color: #fff
}

.util-in .ub svg {
   width: 13px;
   height: 13px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.8
}

/* brand + 45-year lockup (static, designed) */
.brandlock {
   display: flex;
   align-items: center;
   gap: 18px;
   flex: none
}

.brandlock .logo img {
   height: 40px;
   width: auto;
   filter: brightness(0) invert(1);
   transition: filter .3s
}

.brandlock .rule {
   width: 1px;
   height: 40px;
   background: rgba(255, 255, 255, .3);
   transition: background .3s
}

.yr45 {
   display: flex;
   align-items: center;
   gap: 9px;
   color: #fff;
   transition: color .3s;
   line-height: 1;

   small{
      /* margin-left:5px */
   }
}

.yr45 .num {
   position: relative;
   font-size: 2.05rem;
   font-weight: 800;
   letter-spacing: -.06em;
   line-height: .8;
   padding-right: 7px
}

.yr45 .num::after {
   content: "";
   position: absolute;
   right: 0;
   top: 1px;
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--red)
}

.yr45 .txt {
   display: grid;
   gap: 3px;
   padding-left: 9px;
   border-left: 2px solid var(--red)
}

.yr45 .txt b {
   font-size: .74rem;
   font-weight: 700;
   letter-spacing: -.005em;
   line-height: 1
}

.yr45 .txt small {
   font-size: .6rem;
   font-weight: 600;
   letter-spacing: .06em;
   opacity: .7;
   line-height: 1
}

@media (max-width:760px) {

   .brandlock .rule,
   .yr45 {
      display: none
   }
}

.nav-desk {
   display: flex;
   align-items: center;
   gap: 2px;
   margin-left: auto
}

.nav-item {
   position: static
}

.nav-link {
   position: relative;
   display: flex;
   align-items: center;
   gap: 6px;
   padding: 11px 15px;
   border-radius: var(--pill);
   font-size: .86rem;
   font-weight: 600;
   color: rgba(255, 255, 255, .92);
   white-space: nowrap;
   transition: background .2s, color .2s
}

.nav-link .chev {
   width: 11px;
   height: 11px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.4;
   transition: transform .25s
}

.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link {
   background: rgba(255, 255, 255, .14);
   color: #fff
}

.nav-item:hover .chev,
.nav-item:focus-within .chev {
   transform: rotate(180deg)
}

.nav-link[aria-current]::after {
   content: "";
   position: absolute;
   left: 15px;
   right: 15px;
   bottom: 3px;
   height: 2px;
   border-radius: 2px;
   background: var(--red)
}

.hact {
   display: flex;
   align-items: center;
   gap: 10px;
   flex: none
}

.langwrap {
   position: relative
}

.langbtn {
   display: flex;
   align-items: center;
   gap: 7px;
   padding: 6px 12px;
   border-radius: var(--pill);
   border: 1px solid rgba(255, 255, 255, .3);
   font-size: .78rem;
   font-weight: 600;
   color: #fff;
   transition: .2s
}

.langbtn:hover {
   background: rgba(255, 255, 255, .14)
}

.langbtn svg.g {
   width: 15px;
   height: 15px;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.8
}

.langbtn svg.c {
   width: 10px;
   height: 10px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.6;
   transition: transform .25s
}

.langwrap.open .langbtn svg.c {
   transform: rotate(180deg)
}

.langmenu {
   position: absolute;
   top: calc(100% + 10px);
   right: 0;
   width: 260px;
   background: #fff;
   border-radius: var(--r-md);
   box-shadow: 0 26px 50px -22px rgba(12, 31, 62, .45);
   border: 1px solid var(--line);
   padding: 8px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-6px);
   transition: .22s var(--ease);
   max-height: 340px;
   overflow-y: auto;
   z-index: 10
}

.langwrap.open .langmenu {
   opacity: 1;
   visibility: visible;
   transform: none
}

.langmenu h6 {
   font-size: .62rem;
   font-weight: 700;
   letter-spacing: .13em;
   text-transform: uppercase;
   color: var(--ink-3);
   padding: 10px 12px 6px
}

.langmenu a {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   padding: 9px 12px;
   border-radius: 9px;
   font-size: .88rem;
   color: var(--ink-2)
}

.langmenu a:hover {
   background: var(--mist);
   color: var(--blue)
}

.langmenu a small {
   font-size: .72rem;
   color: var(--ink-3)
}

.langmenu a.on {
   color: var(--blue);
   font-weight: 600;
   background: var(--mist)
}

.custlogin {
   display: none;
   align-items: center;
   gap: 8px;
   padding: 6px 14px;
   border-radius: var(--pill);
   border: 1px solid rgba(255, 255, 255, .34);
   font-size: .78rem;
   font-weight: 600;
   color: #fff;
   white-space: nowrap;
   transition: .2s
}

.custlogin svg {
   width: 14px;
   height: 14px;
   flex: none;
   stroke: currentColor;
   fill: none;
   stroke-width: 1.9
}

.custlogin:hover {
   background: rgba(255, 255, 255, .16)
}

.askpura {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   background: #fff;
   color: var(--blue);
   padding: 11px 19px;
   border-radius: var(--pill);
   font-weight: 600;
   font-size: .86rem;
   white-space: nowrap;
   transition: .2s
}

.askpura:hover {
   background: var(--mist);
   transform: translateY(-1px)
}

.askpura svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
   stroke: none
}

.icon-btn {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   transition: background .2s
}

.icon-btn svg {
   width: 18px;
   height: 18px;
   stroke: rgba(255, 255, 255, .95);
   fill: none;
   stroke-width: 2
}

.icon-btn:hover {
   background: rgba(255, 255, 255, .14)
}

.burger {
   display: none
}

/* mega panel */
.mega {
   position: absolute;
   z-index: 5;
   left: 0;
   right: 0;
   top: 100%;
   background: #fff;
   box-shadow: 0 30px 60px -30px rgba(12, 31, 62, .4);
   border-top: 1px solid var(--line);
   opacity: 0;
   visibility: hidden;
   transform: translateY(-8px);
   transition: .25s var(--ease)
}

.nav-item:hover .mega,
.nav-item:focus-within .mega {
   opacity: 1;
   visibility: visible;
   transform: none
}

.nav-item.closed .mega {
   opacity: 0 !important;
   visibility: hidden !important
}

.mega-in {
   display: grid;
   grid-template-columns: .8fr 2.2fr;
   gap: 46px;
   padding: 38px 0 42px
}

.mega-lead h4 {
   font-size: 1.22rem;
   font-weight: 600;
   letter-spacing: -.02em;
   line-height: 1.25;
   color: var(--ink)
}

.mega-lead p {
   font-size: .87rem;
   color: var(--ink-2);
   margin: 10px 0 18px;
   max-width: 32ch
}

.mghost {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: .85rem;
   font-weight: 600;
   color: var(--blue)
}

.mghost i {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--blue);
   display: grid;
   place-items: center;
   transition: transform .25s var(--ease)
}

.mghost i svg {
   width: 12px;
   height: 12px;
   stroke: #fff;
   fill: none;
   stroke-width: 2.4
}

.mghost:hover i {
   transform: translateX(3px)
}

.mega-cols {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px
}

.mega-cols h5 {
   font-size: .64rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--ink-3);
   margin-bottom: 14px
}

.mega-cols ul {
   list-style: none;
   display: grid;
   gap: 10px
}

.mega-cols a {
   font-size: .9rem;
   color: var(--ink-2);
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.mega-cols a:hover {
   color: var(--blue)
}

.mega-cols .tag {
   font-size: .56rem;
   font-weight: 700;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #fff;
   background: var(--blue);
   padding: 2px 6px;
   border-radius: 4px
}

.megafoot {
   grid-column: 1/-1;
   border-top: 1px solid var(--line);
   margin-top: 4px;
   padding-top: 18px;
   display: flex;
   gap: 26px;
   flex-wrap: wrap
}

.megafoot a {
   font-size: .84rem;
   font-weight: 600;
   color: var(--blue);
   display: inline-flex;
   align-items: center;
   gap: 8px
}

.megafoot a svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.4
}

.partnerblock {
   grid-column: 1/-1;
   margin-top: 6px;
   background: var(--mist);
   border-radius: var(--r-md);
   padding: 20px 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap
}

.partnerblock b {
   display: block;
   font-size: .98rem
}

.partnerblock span {
   font-size: .84rem;
   color: var(--ink-2)
}

.partnerblock .pl {
   display: flex;
   gap: 22px;
   flex-wrap: wrap
}

.partnerblock .pl a {
   font-size: .85rem;
   font-weight: 600;
   color: var(--blue)
}

/* solid (white) header state */
header#hdr.solid {
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   box-shadow: 0 1px 0 var(--line)
}

header#hdr.solid .bar-in {
   height: 70px
}

header#hdr.solid .utilbar {
   background: var(--mist);
   border-color: var(--line)
}

header#hdr.solid .util-in .ub {
   color: var(--ink-2)
}

header#hdr.solid .util-in .ub:hover {
   color: var(--blue)
}

header#hdr.solid .brandlock .logo img {
   filter: none
}

header#hdr.solid .brandlock .rule {
   background: var(--line)
}

header#hdr.solid .yr45 {
   color: var(--blue);
   font-weight: bold;
}

header#hdr.solid .nav-link {
   color: var(--ink-2)
}

header#hdr.solid .nav-link[aria-current] {
   color: var(--blue)
}

header#hdr.solid .nav-item:hover .nav-link,
header#hdr.solid .nav-item:focus-within .nav-link {
   background: var(--mist);
   color: var(--blue)
}

header#hdr.solid .langbtn {
   border-color: var(--line);
   color: var(--ink-2)
}

header#hdr.solid .langbtn:hover {
   background: var(--mist)
}

header#hdr.solid .custlogin {
   border-color: var(--line);
   color: var(--ink-2)
}

header#hdr.solid .custlogin:hover {
   background: var(--mist);
   color: var(--blue)
}

header#hdr.solid .askpura {
   background: var(--blue);
   color: #fff
}

header#hdr.solid .icon-btn svg {
   stroke: var(--ink)
}

header#hdr.solid .icon-btn:hover {
   background: var(--mist)
}

@media (max-width:1280px) {
   .nav-link {
      padding: 11px 11px;
      font-size: .82rem
   }

   .nav-link[aria-current]::after {
      left: 11px;
      right: 11px
   }
}

@media (max-width:1240px) {
   .custlogin span {
      display: none
   }

   .custlogin {
      padding: 6px 10px
   }
}

@media (max-width:1140px) {
   .nav-desk {
      display: none
   }

   .burger {
      display: grid
   }

   .askpura span {
      display: none
   }

   .askpura {
      padding: 11px 13px
   }
}

@media (max-width:760px) {
   .util-in .ub {
      display: none
   }

   .util-in {
      height: 40px;
      gap: 10px
   }

   :root {
      --hdr-h: 110px
   }
}

/* =========================== MOBILE DRAWER =========================== */
.drawer {
   position: fixed;
   inset: 0;
   background: var(--navy);
   color: #fff;
   z-index: 95;
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-10px);
   transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s
}

.drawer.open {
   opacity: 1;
   visibility: visible;
   transform: none
}

.dtop {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 22px;
   border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.dtop img {
   height: 32px;
   width: auto;
   filter: brightness(0) invert(1)
}

.dtop .x {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .3);
   display: grid;
   place-items: center
}

.dtop .x svg {
   width: 16px;
   height: 16px;
   stroke: #fff;
   fill: none;
   stroke-width: 2.4
}

.dmenu {
   padding: 8px 22px 28px
}

.dsec {
   border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.dsec>button {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 19px 0;
   font-size: 1.08rem;
   font-weight: 600;
   color: #fff;
   text-align: left
}

.dsec>button svg {
   width: 14px;
   height: 14px;
   stroke: #fff;
   fill: none;
   stroke-width: 2.4;
   transition: transform .3s
}

.dsec.open>button svg {
   transform: rotate(180deg)
}

.dpanel {
   max-height: 0;
   overflow: hidden;
   transition: max-height .35s var(--ease)
}

.dpanel ul {
   list-style: none;
   padding: 0 0 18px;
   display: grid;
   gap: 13px
}

.dpanel a {
   font-size: .95rem;
   font-weight: 400;
   color: rgba(255, 255, 255, .78)
}

.dpanel a:hover {
   color: #fff
}

.dacts {
   padding: 24px 22px 40px;
   display: grid;
   gap: 10px
}

.dacts .btn {
   width: 100%;
   justify-content: space-between
}

.dacts .btn.ghost {
   color: #fff;
   box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35)
}

.dacts .btn.ghost:hover {
   background: rgba(255, 255, 255, .1)
}

/* =============================== FOOTER =============================== */
footer.site-foot {
   background: var(--ink);
   color: #fff;
   padding: 64px 0 26px;
   border-radius: var(--r-xl) var(--r-xl) 0 0;
   /* margin-top: 20px */
}

.fg {
   display: grid;
   grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
   gap: 30px;
   padding-bottom: 44px;
   border-bottom: 1px solid rgba(255, 255, 255, .14)
}

.fg h4 {
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .45);
   margin-bottom: 15px;
   line-height: 1.4
}

.fg ul {
   list-style: none;
   display: grid;
   gap: 10px;
   font-size: .9rem;
   color: rgba(255, 255, 255, .75)
}

.fg a:hover {
   color: #fff
}

.fg .brand img {
   height: 40px;
   width: auto;
   filter: brightness(0) invert(1)
}

.fg .addr {
   font-size: .88rem;
   color: rgba(255, 255, 255, .65);
   margin-top: 16px;
   max-width: 34ch;
   line-height: 1.65
}

.fg .addr a {
   color: #fff
}

.fg .fcta {
   margin-top: 22px
}

.fbot {
   display: flex;
   justify-content: center;
   gap: 16px;
   flex-wrap: wrap;
   padding-top: 20px;
   font-size: .8rem;
   color: rgba(255, 255, 255, .45)
}

.fbot a:hover {
   color: #fff
}

@media (max-width:1000px) {
   .fg {
      grid-template-columns: 1fr 1fr 1fr
   }

   .fg>div:first-child {
      grid-column: 1/-1
   }
}

@media (max-width:600px) {
   .fg {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width:440px) {
   .fg {
      grid-template-columns: 1fr
   }
}

/* ============================ PURA (AI) ==============================
   Launcher: fixed bottom-centre translucent pill, appears once the hero
   has scrolled away. Panel: blurred navy glass, 520px, radius 24.      */
.askbar {
   position: fixed;
   left: 50%;
   bottom: 50px;
   z-index: 80;
   width: min(560px, calc(100% - 28px));
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 7px 7px 7px 18px;
   border-radius: var(--pill);
   background: rgba(22, 53, 107, .82);
   backdrop-filter: blur(18px) saturate(140%);
   -webkit-backdrop-filter: blur(18px) saturate(140%);
   border: 1px solid rgba(255, 255, 255, .18);
   box-shadow: 0 22px 48px -18px rgba(8, 18, 36, .65);
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, 24px);
   transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s
}

.askbar.is-ready {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

body.pura-open .askbar {
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, 24px)
}

.askbar .spark {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: rgba(255, 255, 255, .16);
   display: grid;
   place-items: center;
   flex: none
}

.askbar .spark svg {
   width: 16px;
   height: 16px;
   fill: #fff
}

.askbar input {
   flex: 1;
   min-width: 0;
   border: 0;
   outline: none;
   background: transparent;
   color: #fff;
   font-size: .95rem;
   padding: 10px 0
}

.askbar input::placeholder {
   color: rgba(255, 255, 255, .72)
}

.askbar button {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   display: grid;
   place-items: center;
   flex: none;
   transition: transform .2s
}

.askbar button:hover {
   transform: translateY(-1px)
}

.askbar button svg {
   width: 16px;
   height: 16px;
   stroke: var(--blue);
   fill: none;
   stroke-width: 2.4
}

.puraveil {
   position: fixed;
   inset: 0;
   background: rgba(8, 18, 36, .35);
   z-index: 85;
   opacity: 0;
   visibility: hidden;
   transition: .25s
}

.puraveil.on {
   opacity: 1;
   visibility: visible
}

.pura {
   position: fixed;
   left: 50%;
   bottom: 22px;
   z-index: 90;
   width: min(520px, calc(100% - 28px));
   display: flex;
   flex-direction: column;
   gap: 10px;
   opacity: 0;
   visibility: hidden;
   transform: translate(-50%, 16px);
   transition: .3s var(--ease)
}

.pura.on {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.pglass {
   position: relative;
   color: #fff;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(160deg, rgba(28, 62, 120, .9), rgba(12, 31, 62, .94));
   backdrop-filter: blur(22px) saturate(150%);
   -webkit-backdrop-filter: blur(22px) saturate(150%);
   border: 1px solid rgba(255, 255, 255, .14);
   box-shadow: 0 34px 70px -26px rgba(4, 10, 24, .75)
}

.pura .head {
   padding: 16px 18px 14px;
   display: flex;
   align-items: center;
   gap: 12px
}

.pura .head .av {
   width: 36px;
   height: 36px;
   border-radius: 10px;
   background: rgba(255, 255, 255, .16);
   display: grid;
   place-items: center;
   flex: none
}

.pura .head .av svg {
   width: 18px;
   height: 18px;
   fill: #fff
}

.pura .head .who {
   display: grid;
   line-height: 1.15
}

.pura .head b {
   font-size: 1.02rem;
   font-weight: 700;
   letter-spacing: -.01em
}

.pura .head em {
   font-style: normal;
   font-size: .6rem;
   font-weight: 700;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .62);
   margin-top: 3px
}

.pura .head .info {
   position: relative;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .45);
   font-size: .62rem;
   font-weight: 700;
   display: grid;
   place-items: center;
   color: rgba(255, 255, 255, .75);
   cursor: help;
   align-self: flex-start;
   margin-top: 2px
}

.pura .head .info .tip {
   position: absolute;
   left: 50%;
   top: calc(100% + 8px);
   transform: translateX(-50%);
   width: 240px;
   background: #fff;
   color: var(--ink-2);
   font-size: .74rem;
   font-weight: 500;
   line-height: 1.45;
   letter-spacing: 0;
   text-transform: none;
   padding: 10px 12px;
   border-radius: 10px;
   box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .5);
   opacity: 0;
   visibility: hidden;
   transition: .2s;
   z-index: 3
}

.pura .head .info:hover .tip,
.pura .head .info:focus .tip {
   opacity: 1;
   visibility: visible
}

.pura .head .x {
   margin-left: auto;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   transition: .2s
}

.pura .head .x:hover {
   background: rgba(255, 255, 255, .16)
}

.pura .head .x svg {
   width: 16px;
   height: 16px;
   stroke: #fff;
   fill: none;
   stroke-width: 2.4
}

.pura .body {
   padding: 0 20px 20px;
   max-height: 46vh;
   overflow-y: auto;
   scrollbar-width: thin
}

.pura .intro {
   font-size: .96rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, .94)
}

.pura .intro b {
   font-weight: 700
}

.pura .pchips {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 16px
}

.pura .pchips button,
.lyra-quick button {
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .2);
   color: #fff;
   border-radius: var(--pill);
   padding: 9px 16px;
   font-size: .86rem;
   font-weight: 500;
   transition: .2s;
   cursor: pointer;
   font-family: inherit
}

.pura .pchips button:hover,
.lyra-quick button:hover {
   background: rgba(255, 255, 255, .24);
   border-color: rgba(255, 255, 255, .35)
}

.lyra-quick {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   margin-top: 14px
}

.lyra-about-wrap {
   position: relative;
   display: inline-flex;
   align-items: center
}

.lyra-about-btn {
   background: transparent;
   border: none;
   color: rgba(255, 255, 255, .7);
   width: 22px;
   height: 22px;
   padding: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border-radius: 50%;
   transition: .15s ease
}

.lyra-about-btn:hover,
.lyra-about-btn:focus-visible {
   color: #fff;
   background: rgba(255, 255, 255, .16);
   outline: none
}

.lyra-about-btn svg {
   width: 17px;
   height: 17px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2
}

.lyra-about-pop {
   position: absolute;
   bottom: calc(100% + 10px);
   left: 50%;
   transform: translateX(-50%);
   width: 280px;
   background: #fff;
   color: #1e293b;
   font-size: .8rem;
   font-weight: 500;
   line-height: 1.5;
   padding: 13px 15px;
   border-radius: 12px;
   border: 1px solid rgba(0, 0, 0, .08);
   box-shadow: 0 14px 34px rgba(0, 15, 45, .28);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition: opacity .2s ease, visibility .2s ease;
   z-index: 120;
   text-transform: none;
   letter-spacing: normal
}

.pura .head .lyra-about-pop {
   bottom: auto;
   top: calc(100% + 10px)
}

.lyra-about-pop::before {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border-width: 6px;
   border-style: solid;
   border-color: #fff transparent transparent transparent
}

.pura .head .lyra-about-pop::before {
   top: auto;
   bottom: 100%;
   border-color: transparent transparent #fff transparent
}

.lyra-about-wrap:hover .lyra-about-pop,
.lyra-about-wrap:focus-within .lyra-about-pop,
.lyra-about-pop:hover {
   opacity: 1;
   visibility: visible;
   pointer-events: auto
}

.lyra-about-pop a {
   color: #0052cc;
   font-weight: 600;
   text-decoration: underline
}

.lyra-about-pop a:hover {
   color: #0747a6
}

.pstream {
   display: flex;
   flex-direction: column
}

.pmsg {
   font-size: .94rem;
   line-height: 1.6;
   margin-top: 14px
}

.pmsg.bot {
   color: rgba(255, 255, 255, .94);
   max-width: 100%
}

.pmsg.bot b {
   color: #fff
}

.pmsg.bot a {
   color: #fff;
   text-decoration: underline;
   text-underline-offset: 3px
}

.pmsg.me {
   align-self: flex-end;
   max-width: 80%;
   background: rgba(255, 255, 255, .95);
   color: var(--ink);
   font-size: .86rem;
   padding: 7px 14px;
   border-radius: var(--pill)
}

.pmsg.typing {
   display: flex;
   gap: 5px;
   padding: 4px 0
}

.pmsg.typing i {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: rgba(255, 255, 255, .7);
   animation: pdot 1s infinite
}

.pmsg.typing i:nth-child(2) {
   animation-delay: .15s
}

.pmsg.typing i:nth-child(3) {
   animation-delay: .3s
}

@keyframes pdot {

   0%,
   80%,
   100% {
      opacity: .3;
      transform: none
   }

   40% {
      opacity: 1;
      transform: translateY(-3px)
   }
}

.pinput {
   background: #fff;
   border-radius: var(--pill);
   padding: 6px 6px 6px 22px;
   display: flex;
   align-items: center;
   gap: 12px;
   box-shadow: 0 22px 46px -18px rgba(0, 0, 0, .45)
}

.pinput input {
   flex: 1;
   min-width: 0;
   border: 0;
   outline: none;
   font-size: 1rem;
   color: var(--ink);
   background: transparent;
   padding: 12px 0
}

.pinput input::placeholder {
   color: var(--ink-3)
}

.pinput button {
   width: 42px;
   height: 42px;
   border-radius: 50%;
   background: var(--blue);
   display: grid;
   place-items: center;
   flex: none;
   transition: .2s
}

.pinput button:hover {
   background: var(--blue-d)
}

.pinput button svg {
   width: 16px;
   height: 16px;
   stroke: #fff;
   fill: none;
   stroke-width: 2.4
}

@media (max-width:640px) {
   .pura .body {
      max-height: 52vh
   }

   .askbar {
      bottom: 14px
   }

   .pura {
      bottom: 14px
   }
}

/* in-hero Pura prompt (sub-pages) */
.ppura {
   margin-top: 28px;
   width: min(620px, 100%);
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(255, 255, 255, .12);
   border: 1px solid rgba(255, 255, 255, .26);
   color: #fff;
   border-radius: var(--pill);
   padding: 8px 8px 8px 16px;
   transition: .25s var(--ease);
   text-align: left
}

.ppura:hover {
   background: rgba(255, 255, 255, .22)
}

.ppura .pico {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: rgba(255, 255, 255, .18);
   display: grid;
   place-items: center;
   flex: none
}

.ppura .pico svg {
   width: 16px;
   height: 16px;
   fill: #fff;
   stroke: none
}

.ppura .pt {
   flex: 1;
   min-width: 0;
   font-size: .96rem;
   color: rgba(255, 255, 255, .9);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.ppura .pgo {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   display: grid;
   place-items: center;
   flex: none
}

.ppura .pgo svg {
   width: 15px;
   height: 15px;
   stroke: var(--blue);
   fill: none;
   stroke-width: 2.4
}

/* portal note (Customer Login · phase two) */
.portal-note {
   position: fixed;
   left: 50%;
   bottom: 24px;
   transform: translate(-50%, 14px);
   z-index: 120;
   background: var(--navy);
   color: #fff;
   border-radius: var(--r-md);
   padding: 18px 22px;
   box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .6);
   width: min(430px, calc(100% - 28px));
   opacity: 0;
   visibility: hidden;
   transition: .25s var(--ease)
}

.portal-note.on {
   opacity: 1;
   visibility: visible;
   transform: translate(-50%, 0)
}

.portal-note b {
   display: block;
   font-size: 1rem;
   margin-bottom: 6px
}

.portal-note p {
   font-size: .88rem;
   color: rgba(255, 255, 255, .78);
   line-height: 1.55
}

.portal-note button {
   margin-top: 14px;
   font-size: .82rem;
   font-weight: 600;
   color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, .5);
   padding-bottom: 2px
}

/* ======================= SHARED SUB-PAGE BLOCKS ====================== */
.phero {
   position: relative;
   background: var(--navy);
   color: #fff;
   overflow: hidden;
   padding: calc(var(--hdr-h) + 40px) 0 clamp(48px, 6vw, 72px)
}

.phero::before {
   content: "";
   position: absolute;
   right: -12%;
   top: -70%;
   width: 58%;
   height: 240%;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(74, 116, 190, .42), transparent);
   pointer-events: none
}

.phero.img::before {
   display: none
}

.phero.img>img.bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.phero.img::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(12, 31, 62, .62), rgba(12, 31, 62, .92));
   pointer-events: none
}

.phero>.wrap {
   position: relative;
   z-index: 2
}

.pcrumb {
   font-size: .8rem;
   color: rgba(255, 255, 255, .7);
   margin-bottom: 16px
}

.pcrumb a:hover {
   color: #fff
}

.pcrumb span {
   margin: 0 8px;
   opacity: .5
}

.pcrumb b {
   font-weight: 600;
   color: #fff
}

.ptag {
   display: inline-block;
   font-size: .6rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   background: #fff;
   color: var(--blue);
   padding: 5px 11px;
   border-radius: 5px;
   margin-bottom: 14px
}

.phero h1 {
   font-size: var(--t-h1);
   font-weight: 500;
   letter-spacing: -.04em;
   line-height: 1.05;
   max-width: 22ch
}

.phero .sub {
   color: rgba(255, 255, 255, .84);
   margin-top: 16px;
   max-width: 58ch;
   font-size: 1.02rem
}

.hacts {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-top: 26px
}

.sec {
   padding: clamp(52px, 6vw, 88px) 0
}

.sec+.sec {
   padding-top: 0
}

.sec.mist,
.sec.mist+.sec {
   padding-top: clamp(52px, 6vw, 88px)
}

.sec.mist {
   background: var(--mist)
}

.sec.tight {
   padding-top: 0
}

.shead {
   align-items: start;
   margin-bottom: clamp(26px, 3vw, 40px)
}

.shead h2 {
   font-size: var(--t-h2);
   font-weight: 500;
   letter-spacing: -.03em
}

.shead .micro+h2,
.shead h2 {
   margin-top: 0
}

.shead p {
   color: var(--ink-2);
   margin-top: 12px;
   max-width: 64ch
}

@media (max-width:900px) {
   .shead {
      grid-template-columns: 1fr;
      gap: 10px
   }
}

.statrow {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line)
}

.statrow>div {
   padding: 26px 24px;
   border-left: 1px solid var(--line);
   min-width: 0
}

.statrow>div:first-child {
   border-left: 0;
   padding-left: 0
}

.statrow b {
   display: block;
   font-size: clamp(1.6rem, 3vw, 2.3rem);
   font-weight: 600;
   letter-spacing: -.04em;
   line-height: 1;
   color: var(--blue)
}

.statrow span {
   display: block;
   font-size: .84rem;
   color: var(--ink-2);
   margin-top: 8px;
   line-height: 1.4
}

@media (max-width:820px) {
   .statrow {
      grid-template-columns: 1fr 1fr
   }

   .statrow>div:nth-child(3) {
      border-left: 0;
      padding-left: 0
   }

   .statrow>div:nth-child(n+3) {
      border-top: 1px solid var(--line)
   }
}

/* enquiry */
.enq {
   background: var(--mist);
   padding: 0 0 50px 0;
}

.enq .card {
   background: var(--navy);
   color: #fff;
   border-radius: var(--r-xl);
   padding: clamp(26px, 4vw, 52px);
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: clamp(28px, 4vw, 54px);
   align-items: start;
   position: relative;
   overflow: hidden
}

.enq .card::after {
   content: "";
   position: absolute;
   left: -16%;
   bottom: -62%;
   width: 60%;
   height: 155%;
   border-radius: 50%;
   background: radial-gradient(closest-side, rgba(74, 116, 190, .4), transparent);
   pointer-events: none
}

.enq .card>* {
   position: relative;
   z-index: 1;
   min-width: 0
}

.enq .micro {
   color: rgba(255, 255, 255, .55)
}

.enq h2 {
   color: #fff;
   font-size: clamp(1.55rem, 2.6vw, 2.1rem);
   font-weight: 500;
   margin-top: 12px
}

.enq .sub {
   color: rgba(255, 255, 255, .78);
   margin-top: 14px;
   max-width: 42ch
}

.enq .ways {
   margin-top: 26px;
   display: grid;
   gap: 10px
}

.enq .way {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   padding: 15px 18px;
   border-radius: var(--r-md);
   background: rgba(255, 255, 255, .08);
   border: 1px solid rgba(255, 255, 255, .16);
   transition: background .2s
}

.enq .way:hover {
   background: rgba(255, 255, 255, .16)
}

.enq .way small {
   display: block;
   font-size: .66rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55)
}

.enq .way b {
   font-weight: 600;
   font-size: .96rem;
   word-break: break-word
}

.enq .way svg {
   width: 15px;
   height: 15px;
   stroke: #fff;
   fill: none;
   stroke-width: 2;
   flex: none
}

.enq form {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 14px;
   background: #fff;
   color: var(--ink);
   padding: clamp(20px, 2.6vw, 30px);
   border-radius: var(--r-lg)
}

.enq label {
   display: grid;
   gap: 6px;
   font-size: .66rem;
   font-weight: 700;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--ink-3);
   min-width: 0
}

.enq input,
.enq select,
.enq textarea {
   width: 100%;
   min-width: 0;
   font-size: .93rem;
   font-weight: 400;
   letter-spacing: 0;
   text-transform: none;
   padding: 12px 14px;
   background: var(--mist);
   border: 1px solid transparent;
   color: var(--ink);
   border-radius: 11px
}

.enq textarea {
   resize: vertical;
   min-height: 96px
}

.enq input:focus,
.enq select:focus,
.enq textarea:focus {
   border-color: var(--blue);
   outline: none;
   background: #fff
}

.enq .full {
   grid-column: 1/-1
}

.enq form .btn {
   grid-column: 1/-1;
   justify-content: center
}

.enq .note,
.enq .sent {
   grid-column: 1/-1;
   font-size: .78rem;
   color: var(--ink-3);
   text-align: center;
   letter-spacing: 0;
   text-transform: none;
   font-weight: 500
}

/* Hide legacy redundant note when consent is present */
.enq .note,
form[data-enquiry] .note {
   display: none !important;
}

/* Clean, modern consent row across all forms */
.enq .pp-consent-row,
.pp-consent-row {
   grid-column: 1 / -1 !important;
   display: block !important;
   margin: 4px 0 10px 0 !important;
   padding: 0 !important;
   min-width: 0 !important;
}

.enq .pp-consent-row label,
.pp-consent-row label {
   display: flex !important;
   flex-direction: row !important;
   align-items: flex-start !important;
   gap: 10px !important;
   cursor: pointer !important;
   text-transform: none !important;
   letter-spacing: normal !important;
   font-size: 0.88rem !important;
   font-weight: 500 !important;
   color: #334155 !important;
   line-height: 1.45 !important;
   margin: 0 !important;
   min-width: 0 !important;
}

.enq .pp-consent-row label span,
.pp-consent-row label span {
   display: inline !important;
   text-transform: none !important;
   letter-spacing: normal !important;
   font-size: 0.88rem !important;
   font-weight: 500 !important;
   color: #334155 !important;
   line-height: 1.45 !important;
}

.enq .pp-consent-row input[type="checkbox"],
.pp-consent-row input[type="checkbox"],
.pp-consent-row .pp-consent-checkbox {
   width: 18px !important;
   height: 18px !important;
   min-width: 18px !important;
   max-width: 18px !important;
   margin: 2px 0 0 0 !important;
   padding: 0 !important;
   accent-color: #16356B !important;
   flex-shrink: 0 !important;
   cursor: pointer !important;
   border-radius: 4px !important;
   background: #fff !important;
   border: 1.5px solid #94A3B8 !important;
   display: inline-block !important;
}

.enq .pp-consent-row a,
.pp-consent-row a {
   color: #16356B !important;
   font-weight: 600 !important;
   text-decoration: underline !important;
   text-underline-offset: 2px !important;
   transition: color 0.15s ease !important;
}

.enq .pp-consent-row a:hover,
.pp-consent-row a:hover {
   color: #0d6efd !important;
}

.enq .sent {
   color: var(--blue);
   font-size: .9rem;
   font-weight: 600
}

@media (max-width:900px) {
   .enq .card {
      grid-template-columns: 1fr
   }
}

@media (max-width:560px) {
   .enq form {
      grid-template-columns: 1fr
   }
}

/* value strip / cards */
.vgrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px
}

.vcard {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-lg);
   overflow: hidden;
   display: flex;
   flex-direction: column
}

.vcard .im {
   height: 170px;
   overflow: hidden;
   background: var(--mist)
}

.vcard .im img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .6s var(--ease)
}

.vcard:hover .im img {
   transform: scale(1.05)
}

.vcard .bd {
   padding: 24px
}

.vcard h3 {
   font-size: 1.06rem;
   letter-spacing: -.02em
}

.vcard p {
   font-size: .9rem;
   color: var(--ink-2);
   margin-top: 8px
}

@media (max-width:900px) {
   .vgrid {
      grid-template-columns: 1fr
   }
}

.tgrid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 14px;
   margin-top: 4px
}

.tcard {
   background: #fff;
   border: 1px solid var(--line);
   border-radius: var(--r-md);
   padding: 26px
}

.tcard h3 {
   font-size: 1.05rem
}

.tcard p {
   font-size: .9rem;
   color: var(--ink-2);
   margin-top: 8px
}

@media (max-width:900px) {
   .tgrid {
      grid-template-columns: 1fr
   }
}

/* single page-load moment */
.up {
   opacity: 0;
   transform: translateY(12px);
   animation: up .85s var(--ease) forwards
}

.up.d1 {
   animation-delay: .1s
}

.up.d2 {
   animation-delay: .2s
}

.up.d3 {
   animation-delay: .3s
}

@keyframes up {
   to {
      opacity: 1;
      transform: none
   }
}

@media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation: none !important;
      transition: none !important;
      scroll-behavior: auto !important
   }

   .up {
      opacity: 1;
      transform: none
   }
}

/* ============================ END SHELL ============================= */
.skip {
   position: fixed;
   left: 16px;
   top: -60px;
   z-index: 200;
   background: var(--blue);
   color: #fff;
   padding: 10px 16px;
   border-radius: var(--pill);
   font-weight: 600;
   font-size: .86rem;
   transition: top .2s
}

.skip:focus {
   top: 12px
}

.micro+h2,
.micro+h1,
.micro+h3 {
   margin-top: 12px
}

.phero+section {
   padding-top: clamp(56px, 6vw, 96px)
}

.phero+.sec {
   padding-top: clamp(52px, 6vw, 88px)
}

h2+.lede,
h2+p.lede {
   margin-top: 12px
}

/* ---- in-page sub navigation (About, Careers, Connect) ---- */
.subnav {
   position: static;
   top: var(--hdr-h);
   z-index: 30;
   background: rgba(255, 255, 255, .96);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--line);
   padding: 0 !important
}

.subnav-in {
   display: flex;
   gap: 4px;
   overflow-x: auto;
   scrollbar-width: none;
   padding: 10px 0
}

.subnav-in::-webkit-scrollbar {
   display: none
}

.subnav a {
   flex: none;
   padding: 10px 16px;
   border-radius: var(--pill);
   font-size: .86rem;
   font-weight: 600;
   color: var(--ink-2);
   white-space: nowrap;
   transition: background .2s, color .2s
}

.subnav a:hover {
   background: var(--mist);
   color: var(--blue)
}

.subnav a[aria-current] {
   background: var(--blue);
   color: #fff
}

.subnav a.out::after {
   content: " \2197";
   font-weight: 500;
   opacity: .6
}

.subnav+section,
.subnav+.sec {
   padding-top: clamp(56px, 6vw, 96px)
}


/* Mobile navigation links are direct links in addition to expandable sections. */
.dsec .d-direct {
   display: block;
   padding: 17px 0;
   color: #fff;
   font-size: 1.02rem;
   font-weight: 600
}

.dsec .d-direct:hover,
.dsec .d-direct:focus-visible {
   color: #bcd4ff
}

#closeDrawer svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   fill: none;
   stroke-width: 2.4
}

.puraveil[aria-hidden="true"] {
   pointer-events: none
}

.puraveil[aria-hidden="false"] {
   pointer-events: auto
}
.password-toggle-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.password-toggle-wrapper input {
    width: 100%;
    padding-right: 38px !important;
}

.password-toggle-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #777;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    appearance: none;
    box-shadow: none;
}

.password-toggle-btn svg {
    width: 17px;
    height: 17px;
    display: block;
}