/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TOKENS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root{
  --b:   #0C5BA6;   /* primary blue */
  --b-dk:#073F75;   /* dark blue */
  --b-md:#2471C8;
  --b-lt:#E8F1FB;   /* light blue bg */
  --b-bd:#C7DDF4;   /* blue border */
  --t:   #1A1D23;   /* text dark */
  --t-m: #4A4F5A;   /* text medium */
  --t-l: #7A7F8A;   /* text light */
  --bg:  #F7F8FA;   /* section alt bg */
  --bg-s:#FAFBFC;   /* subtle bg */
  --br:  #E4E7EC;   /* border */
  --w:   #FFFFFF;
  --f-bg:#F7F8FA;   /* footer bg */
  --sh-xs:0 1px 2px rgba(12,91,166,.05);
  --sh-s: 0 1px 3px rgba(12,91,166,.08),0 1px 2px rgba(0,0,0,.04);
  --sh-m: 0 4px 16px rgba(12,91,166,.10),0 2px 4px rgba(0,0,0,.04);
  --sh-l: 0 8px 32px rgba(12,91,166,.13),0 2px 8px rgba(0,0,0,.05);
  --r:   10px;
  --r-l: 14px;
  /* page-css compatibility aliases */
  --blue:var(--b);--blue-dk:var(--b-dk);--blue-lt:var(--b-lt);--blue-bd:var(--b-bd);--rl:var(--r-l);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESET & BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:66px}
[id]{scroll-margin-top:66px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--t);background:var(--w);line-height:1.5;
  -webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   TYPOGRAPHY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;
    line-height:1.1;letter-spacing:-.03em}
.h2{font-size:clamp(26px,3vw,40px);font-weight:800;
    line-height:1.16;letter-spacing:-.025em}
.h3{font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.h4{font-size:15px;font-weight:600;line-height:1.35}
.body{font-size:16px;line-height:1.65;color:var(--t-m)}
.body-t{font-size:16px;line-height:1.65;color:var(--t-m)}
.sm{font-size:13px;line-height:1.6;color:var(--t-m)}
.blue{color:var(--b)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LAYOUT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec   {padding:88px 0}
.sec-alt{padding:88px 0;background:var(--bg)}
.sec-cta{padding:88px 0;background:var(--b)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SECTION HEADER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sec-hd{text-align:center;margin-bottom:48px}
.sec-hd-p{max-width:720px;margin-left:auto;margin-right:auto}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.nav{background:var(--w);border-bottom:1px solid var(--br);
     position:sticky;top:0;z-index:100;height:66px;
     display:flex;align-items:center}
.nav-in{display:flex;align-items:center;
        justify-content:space-between;width:100%}
.nav-logo{height:40px;width:auto;background:var(--w)}
.nav-links{display:flex;align-items:center;gap:28px;justify-content:center}
.nl{font-size:14px;font-weight:500;color:var(--t-m);transition:color .15s}
.nl:hover,.nl.active{color:var(--b)}
.nl.active{font-weight:600}
.nl-cta{display:flex;align-items:center;gap:12px;justify-content:flex-end}
#hbg{grid-column:3;justify-self:end}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SKIP LINK — WCAG 2.4.1 Bypass Blocks
   Visually hidden until focused via keyboard.
   Slides in from above the fixed/sticky nav.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skip-link{
  position:fixed;top:0;left:6px;
  transform:translateY(-100%);
  background:var(--b,#0C5BA6);color:#fff;
  font-size:14px;font-weight:600;
  padding:8px 16px;
  border-radius:0 0 6px 6px;
  text-decoration:none;
  z-index:100000;
  transition:transform .15s
}
.skip-link:focus{transform:translateY(0)}

/* Products Dropdown */
.nav-dd{position:relative}
.nav-dd::after{content:'';position:absolute;top:100%;left:0;right:0;height:12px}
.nav-dd-btn{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:var(--t-m);background:none;border:none;padding:0;cursor:pointer;font-family:inherit;transition:color .15s}
.nav-dd-btn:hover,.nav-dd:hover .nav-dd-btn{color:var(--b)}
.nav-dd-btn.active{color:var(--b);font-weight:600}
.nav-dd-chev{width:14px;height:14px;flex-shrink:0;transition:transform .2s}
.nav-dd:hover .nav-dd-chev{transform:rotate(180deg)}
.nav-dd-panel{display:none;position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--w);border:1px solid var(--br);border-radius:var(--r-l);box-shadow:var(--sh-l);padding:16px;min-width:480px;grid-template-columns:1fr 1fr;gap:16px;z-index:200}
.nav-dd:hover .nav-dd-panel{display:grid}
.dd-col{display:flex;flex-direction:column;gap:3px}
.dd-hd{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--t-l);padding:2px 8px 6px;border-bottom:1px solid var(--br);margin-bottom:4px}
.dd-lnk{display:block;padding:7px 10px;border-radius:7px;font-size:13px;font-weight:600;color:var(--t);transition:background .12s,color .12s}
.dd-lnk:hover{background:var(--b-lt);color:var(--b)}
.dd-lnk.active{color:var(--b);background:var(--b-lt)}
.dd-sub{display:block;padding:4px 10px 4px 18px;font-size:12px;color:var(--t-l);transition:color .12s;line-height:1.5}
.dd-sub:hover{color:var(--b)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BUTTONS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn{display:inline-flex;align-items:center;gap:6px;
     font-size:14px;font-weight:600;border:none;
     border-radius:7px;transition:background .15s,transform .1s;
     letter-spacing:-.01em;white-space:nowrap;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn-p{background:var(--b);color:var(--w);padding:11px 24px}
.btn-p:hover{background:var(--b-dk)}
.btn-s{background:var(--w);color:var(--b);padding:10px 22px;
       border:1.5px solid var(--b)}
.btn-s:hover{background:var(--b-lt)}
.btn-cta-s{background:transparent;color:rgba(255,255,255,.9);
           border:1.5px solid rgba(255,255,255,.45);padding:10px 22px}
.btn-cta-s:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.72);
                 color:#fff}
.btn-g{display:inline-flex;align-items:center;gap:5px;
       color:var(--b);font-size:14px;font-weight:600;transition:gap .15s}
.btn-g:hover{gap:9px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BADGE & SECTION LABEL
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.badge{display:inline-flex;align-items:center;gap:7px;
  background:var(--b-lt);color:var(--b);
  font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;padding:6px 14px;
  border-radius:999px;border:1px solid var(--b-bd)}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--b);
      animation:blink 2.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .bdot{animation:none}
  .skip-link{transition:none}
}
.slbl{display:inline-block;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
  color:var(--b);background:var(--b-lt);
  padding:5px 14px;border-radius:999px;
  border:1px solid var(--b-bd);margin-bottom:16px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD BASE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.card{background:var(--w);border-radius:var(--r);
      border:1px solid var(--br);box-shadow:var(--sh-s);
      transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--sh-m);transform:translateY(-1px)}
.cp{padding:24px}
.ibox{width:44px;height:44px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      background:var(--b-lt);border:1px solid var(--b-bd);
      margin-bottom:16px;flex-shrink:0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer{background:var(--f-bg);padding:72px 0 40px;border-top:1px solid var(--br)}
.g-ft{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-logo{height:38px;width:auto;margin-bottom:16px}
.flk{color:var(--t-m);font-size:14px;transition:color .15s;line-height:1}
.flk:hover{color:var(--b)}
.fhd{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t);margin-bottom:18px}
.fsoc{width:32px;height:32px;border-radius:7px;
  border:1px solid var(--br);display:flex;align-items:center;
  justify-content:center;color:var(--t-l);
  transition:border-color .15s,color .15s}
.fsoc:hover{border-color:var(--b);color:var(--b)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KEYBOARD FOCUS — WCAG 2.4.7 Focus Visible
   :focus-visible fires only for keyboard nav,
   not mouse clicks — no visual change for
   mouse users.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:focus-visible{outline:2.5px solid var(--b,#0C5BA6);outline-offset:3px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sm-hide{display:flex}
.sm-show{display:none}
.desk-only{display:block}

@media(max-width:1023px){
  .hero-g,.g2{grid-template-columns:1fr !important;gap:40px !important}
  .hero-grid > *, .g2 > *, .g3 > *, .g4 > * { min-width: 0; }
  .g4{grid-template-columns:repeat(2,1fr) !important}
  .g3,.g-cmp{grid-template-columns:1fr !important}
  .g-ind{grid-template-columns:repeat(2,1fr) !important}
  .g-ft{grid-template-columns:1fr 1fr !important;gap:32px !important}
  .g-cmp>div:not(:first-child){
    border-top:1px solid var(--br) !important;
    border-left:none !important;border-right:none !important}
  .sm-hide{display:none}
  .sm-show{display:flex}
  .desk-only{display:none!important}
  .sec,.sec-alt,.sec-cta,
  .hero{padding:64px 0 56px}
  /* Mobile menu — fixed overlay, always visible regardless of scroll position */
  #mob-nav{position:fixed;top:66px;left:0;right:0;z-index:99;max-height:calc(100dvh - 66px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Fixed mobile header — permanent at top, not affected by scroll or class */
  header,
  .site-header,
  .nav{position:fixed!important;top:0!important;left:0!important;right:0!important;
       z-index:9999!important;transform:none!important;transition:none!important;
       visibility:visible!important;opacity:1!important;display:flex!important}
  /* Override any class-based scroll-hide patterns */
  .nav.nav-hidden,.nav.is-hidden,.nav.scrolled-down,.nav.hide,.nav.hidden,
  .nav[class*="hide"],.nav[class*="scroll"]{
    position:fixed!important;top:0!important;
    visibility:visible!important;opacity:1!important;display:flex!important}
  body{padding-top:66px}
}
@media(max-width:767px){
  .h1{font-size:30px}
  .h2{font-size:24px}
  .ts{flex-wrap:wrap;gap:20px}
  .td{display:none}
  .g4{grid-template-columns:1fr 1fr !important}
  .g-ind{grid-template-columns:repeat(2,1fr) !important}
  .sec,.sec-alt,.sec-cta,
  .hero{padding:56px 0 48px}
}
@media(max-width:640px){
  /* Contain any residual horizontal overflow at the viewport level.
     overflow-x:clip propagates to the viewport (html overflow is visible),
     clipping without creating a scroll container — position:sticky and
     position:fixed elements are unaffected. Inner overflow-x:auto scroll
     containers (subnav, flow diagrams) continue to work normally. */
  html, body { overflow-x:clip; }
  /* Allow link-CTA text to wrap on narrow viewports. Targets <a class="btn">
     only (specificity 0,1,1 beats page-CSS .btn at 0,1,0). <button class="btn">
     form submits are unaffected. Short labels stay one-line naturally. */
  a.btn { max-width:100%; white-space:normal; }
}
@media(max-width:480px){
  .g-ft{grid-template-columns:1fr !important;gap:8px !important;margin-bottom:24px}
  .g-ft > div:not(:first-child){border-top:1px solid var(--br);padding-top:16px}
  .fhd{margin-bottom:12px}
  .footer{padding:48px 0 32px}
  [style*="grid-template-columns:1fr 1fr;gap:10px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr 1fr;gap:16px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1fr auto;gap:10px"]{grid-template-columns:1fr !important;gap:8px !important}
}

/* Process Flow Component */
.flow-grid{display:grid;grid-template-columns:repeat(8,1fr);align-items:start;gap:0}
.flow-step{text-align:center;position:relative;padding:0 4px}
.flow-step:not(:last-child)::after{content:'';position:absolute;top:20px;left:calc(50% + 22px);right:0;height:2px;background:var(--b-bd)}
.flow-num{width:40px;height:40px;border-radius:50%;background:var(--b);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;box-shadow:var(--sh-m)}
.flow-title{font-size:12px;font-weight:700;color:var(--t);margin-bottom:3px;line-height:1.4}
.flow-desc{font-size:10px;color:var(--t-l);line-height:1.5}
@media(max-width:1023px){
  .flow-grid{grid-template-columns:repeat(4,1fr);gap:24px 16px}
  .flow-step::after{display:none}
}
@media(max-width:639px){
  .flow-grid{grid-template-columns:repeat(2,1fr)}
}