/* One content column for the landing page and inner pages: every block lines up on the same left and right edges.
   Backgrounds that run edge to edge (hero, FAQ, footer) keep their content inside the same column. */
:root{--brand-blue:#0032FE;--hdr-base:#0032FE;--col:min(1240px,100% - 48px);--col-gutter:max(24px,(100% - 1240px) / 2)}
@media(max-width:700px){:root{--col:calc(100% - 24px);--col-gutter:12px}}

/* Header: slim contact row above a floating navigation bar */
.site > header{padding:12px 0 14px;background:linear-gradient(120deg,#02091f 0%,#04153c 55%,#07194a 100%)}
.site > header .topbar{width:var(--col);margin:0 auto;padding:0;min-height:34px;height:auto;border:0;border-radius:0;background:transparent}
.site > header .contact-banner{width:100%;margin:0;padding:4px 2px;justify-content:flex-start;gap:6px 22px;font-size:12px;font-weight:600;color:#dbe6ff}
.site > header .contact-banner > a{opacity:.92;transition:color .2s,opacity .2s}
.site > header .contact-banner > a:hover{color:#fff;opacity:1;text-decoration:none}
.site > header .contact-banner svg{width:15px;height:15px;color:#fff}
.site > header .theme-pill{margin-left:auto;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#e4edff}
.site > header > nav{width:var(--col);margin:6px auto 0;min-height:72px;padding:10px 14px 10px 24px;border:0;border-radius:18px;background:#fff;box-shadow:0 18px 40px -22px rgba(0,8,40,.8),0 0 0 1px rgba(255,255,255,.06)}
.site > header .navlinks{gap:6px}
.site > header .navlinks > a:not(.button){padding:9px 14px;border-radius:10px;font-size:13px;font-weight:600;color:#14275c;transition:background .2s,color .2s}
.site > header .navlinks > a:not(.button):hover{background:#eef3ff;color:#0b4bd8;text-decoration:none}
.site > header .navlinks > a.active:not(.button){background:#e8f0ff;color:#0b4bd8}
.site > header .navlinks > a.active:after{display:none}
.site > header .navlinks .button{margin-left:8px;border-radius:12px;padding:11px 20px}
.site > header.nav-compact{background:var(--brand-blue)}

/* Landing page blocks share the column */
.site .stats{width:var(--col);margin-left:auto!important;margin-right:auto!important}
.site .ks,.site .cm,.site .kp,.site .loyalty,.site .values,.site .customer-reviews{width:var(--col);margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
.site .ks,.site .cm{border-radius:22px}
.site .hero-copy{padding-left:var(--col-gutter)}
.site .site-faq .kf-head,.site .site-faq .faq-grid{width:var(--col);max-width:none}
.site footer .footer-grid,.site footer .copyright{padding-left:var(--col-gutter);padding-right:var(--col-gutter)}

/* Footer type */
.site footer .footer-grid h3{font-size:14px;font-weight:900}
.site footer .footer-grid p,.site footer .footer-grid a:not(.brand){font-size:13px}

/* Header background: deep-space blue with soft aurora glows, and a fine grid */
.site > header{position:sticky;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(700px 240px at 8% -30%,rgba(255,255,255,.16),transparent 70%),
    radial-gradient(600px 220px at 96% 130%,rgba(0,12,130,.45),transparent 70%),
    var(--brand-blue)}
.site > header.nav-compact{background:radial-gradient(500px 160px at 10% -30%,rgba(255,255,255,.14),transparent 70%),var(--brand-blue)}
.site footer .footer-brand p br{display:none}

/* Trust bar: floating card straddling the hero, gradient icon tiles, gradient numbers */
.site .stats.glow-panel{position:relative;z-index:3;height:auto;min-height:0;margin-top:-44px;margin-bottom:30px;padding:22px 12px;gap:0;grid-template-columns:repeat(5,minmax(0,1fr));
  background:linear-gradient(180deg,#fff,#f3f7ff);color:#0b1739;border:1px solid #dbe6fb;border-radius:22px;
  box-shadow:0 30px 60px -28px rgba(8,30,110,.55),0 2px 0 rgba(255,255,255,.9) inset}
.site .stats > div{display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:4px 18px;transition:transform .25s}
.site .stats > div:hover{transform:translateY(-2px)}
.site .stats > div + div:before{content:"";position:absolute;left:0;top:14%;height:72%;width:1px;background:linear-gradient(180deg,transparent,#cfdcf7,transparent)}
.site .stats > div > svg{flex:none;width:46px!important;height:46px!important;padding:12px;border-radius:15px;color:#fff!important;stroke-width:1.8;filter:none!important;box-shadow:0 10px 20px -10px currentColor}
.site .stats > div:nth-child(1) > svg{background:linear-gradient(135deg,#19d3a2,#0aa5c8);box-shadow:0 10px 20px -10px #0aa5c8}
.site .stats > div:nth-child(2) > svg{background:linear-gradient(135deg,#2f9bff,#2455ff);box-shadow:0 10px 20px -10px #2455ff}
.site .stats > div:nth-child(3) > svg{background:linear-gradient(135deg,#7a5cff,#5a2fe0);box-shadow:0 10px 20px -10px #5a2fe0}
.site .stats > div:nth-child(4) > svg{background:linear-gradient(135deg,#ff6fb5,#e0359a);box-shadow:0 10px 20px -10px #e0359a}
.site .stats > div:nth-child(5) > svg{background:linear-gradient(135deg,#ffb23d,#ff7a2e);box-shadow:0 10px 20px -10px #ff7a2e}
.site .stats span{font-size:12px;font-weight:600;line-height:1.4;color:#5a6a8f}
.site .stats strong{display:block;font-size:22px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:#0b1739;margin-bottom:1px}
html[data-scheme=dark] .site .stats.glow-panel{background:linear-gradient(180deg,#101c42,#0b1534);color:#eaf0ff;border-color:#25396f;box-shadow:0 30px 60px -28px #000}
html[data-scheme=dark] .site .stats span{color:#9fb1da}
html[data-scheme=dark] .site .stats strong{color:#fff}
html[data-scheme=dark] .site .stats > div + div:before{background:linear-gradient(180deg,transparent,#2b4180,transparent)}
@media(max-width:1000px){.site .stats.glow-panel{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 0}}
@media(max-width:640px){.site .stats.glow-panel{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:-28px;padding:16px 6px}.site .stats > div{padding:6px 10px;gap:10px}.site .stats > div > svg{width:40px!important;height:40px!important;padding:10px}.site .stats strong{font-size:18px}.site .stats > div + div:before{display:none}}
#coverage-map[hidden],.site .cm[hidden]{display:none!important}

/* WhatsApp tile in the contact popup: white glyph on the green tile */
#contact-form .contact-chat-now i svg,#contact-form .cd-list a.contact-chat-now i svg{color:#fff!important;fill:#fff}

/* Brand blue #0032FE on the dark surfaces: hero, footer and inner-page titles (header above) */
.site .hero,.site .hero.hero{background:radial-gradient(900px 520px at 12% -10%,rgba(255,255,255,.14),transparent 65%),radial-gradient(800px 520px at 100% 115%,rgba(0,10,120,.5),transparent 65%),var(--brand-blue)!important}
.site .hero:after{background:linear-gradient(90deg,rgba(0,40,200,.92) 0,rgba(0,40,200,.7) 34%,rgba(0,40,200,0) 62%)!important}
.site .hero h1 span{background:linear-gradient(90deg,#ffffff,#bfe6ff 60%,#8fd8ff)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.site footer{background:var(--brand-blue)!important}
.site footer .copyright{background:rgba(0,10,110,.55)!important}
.site footer .footer-grid>div+div{border-color:rgba(255,255,255,.2)}
.site .pg-hero{background:radial-gradient(520px 200px at 82% 100%,rgba(0,12,130,.4),transparent 70%),radial-gradient(480px 180px at 12% 120%,rgba(255,255,255,.12),transparent 70%),var(--brand-blue)!important}

/* Hero photo: brand-blue wash over the picture so it matches the blue on the left */
.site .hero-art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(0,50,254,.78) 0%,rgba(0,50,254,.5) 38%,rgba(1,44,227,.34) 100%);mix-blend-mode:multiply}
.site .hero-art::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(0,50,254,.5) 0%,rgba(0,50,254,.18) 45%,rgba(0,50,254,.1) 100%);mix-blend-mode:screen}

/* Header and hero share one gradient (fixed to the viewport) so there is no seam where they meet */
:root{--blue-flow:radial-gradient(900px 520px at 12% -10%,rgba(255,255,255,.14),transparent 65%),radial-gradient(800px 520px at 100% 115%,rgba(0,10,120,.5),transparent 65%),linear-gradient(135deg,#0032FE 0%,#012CE3 100%)}
.site > header,.site > header.nav-compact,.site .hero,.site .hero.hero{background:var(--blue-flow)!important;background-attachment:fixed!important}

/* One flat brand blue (no light or deep patches) for header, hero and inner-page titles */
:root{--blue-flow:#0032FE}
.site > header,.site > header.nav-compact,.site .hero,.site .hero.hero,.site .pg-hero{background:#0032FE!important;background-image:none!important}
.site .pg-hero::after{display:none}

/* Header takes the colour the hero visibly shows (#0028CC) */
.site > header,.site > header.nav-compact{background:#0028CC!important;background-image:none!important}

/* Phones/tablets: let the open ☰ menu drop below the header instead of being clipped */
@media (max-width:1100px){.site > header{overflow:visible}}