/* ==================================================================
   WEBTEL GLOBAL — "Clean corporate" theme
   Loaded after every other stylesheet; restyles the whole site.
   Plus Jakarta Sans headings · Inter text (self-hosted, assets/fonts)
   Navy ink · corporate blue for actions · teal for confirmation
   Light page headers with a framed photo · rounded cards · soft shadows
   (Previous theme kept as assets/theme-advisory-backup.css)
   ================================================================== */

/* ---------- Fonts (self-hosted, no Google request) ---------- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2'); }

:root{
  --ink:#0B1B33; --ink-2:#12284A; --ink-soft:#3A4A63; --muted:#64748B;
  --blue:#1556D8; --blue-d:#0F44B3; --blue-tint:#EAF1FD; --blue-soft:#C9DAFB;
  --sky:#3B8BEB; --teal:#0E9384; --teal-tint:#E5F5F2; --amber:#C77700;
  --mist:#F5F8FC; --mist-2:#EDF2F9; --rule:#E2E8F0; --rule-2:#EDF1F6; --paper:#FFFFFF;
  --display:'Plus Jakarta Sans','Inter','Segoe UI',system-ui,sans-serif;
  --sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --r:10px; --r-lg:16px; --r-xl:22px;
  --sh-sm:0 1px 2px rgba(11,27,51,.06);
  --sh:0 1px 2px rgba(11,27,51,.05), 0 12px 28px -16px rgba(11,27,51,.22);
  --sh-lg:0 2px 4px rgba(11,27,51,.04), 0 30px 60px -30px rgba(11,27,51,.38);
  --wrap:1200px;
  /* older pages read these names */
  --indigo:var(--blue); --indigo-d:var(--blue-d); --indigo-tint:var(--blue-tint);
  --primary:var(--blue); --emerald:var(--teal);
}

/* ---------- Base type ---------- */
body.gx{ font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body.gx, body.gx button, body.gx input, body.gx select, body.gx textarea{ font-family:var(--sans); }
body.gx h1, body.gx h2{ font-family:var(--display); font-weight:700; letter-spacing:-.022em; }
body.gx h1{ line-height:1.08; }
body.gx h2{ line-height:1.18; }
:where(body.gx) h3, :where(body.gx) h4{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; }
body.gx ::selection{ background:var(--blue); color:#fff; }
body.gx :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
body.gx a{ text-underline-offset:3px; }

/* headings in navy; blue is kept for things you can click */
body.gx h1.text-primary, body.gx h2.text-primary, body.gx h3.text-primary{ color:var(--ink); }
body.gx h2.text-2xl, body.gx h2.md\:text-3xl{ font-size:clamp(26px,2.7vw,38px); }
body.gx h1.font-extrabold, body.gx h2.font-extrabold{ font-weight:700; }
body.gx .text-secondary{ color:var(--ink-soft); }
body.gx .text-primary{ color:var(--blue); }
body.gx .text-accent{ color:var(--sky); }
body.gx .text-emerald{ color:var(--teal); }
body.gx .bg-primary{ background-color:var(--blue) !important; }
body.gx .bg-primary\/10{ background-color:var(--blue-tint) !important; }
body.gx .bg-accent\/10{ background-color:#E8F2FD !important; }
body.gx .bg-emerald\/10{ background-color:var(--teal-tint) !important; }
body.gx .bg-emerald{ background-color:var(--teal) !important; }
body.gx p.text-sm.leading-relaxed, body.gx p.text-secondary.text-sm{ font-size:15.5px; line-height:1.7; }

/* section labels: small blue pill */
body.gx p.tracking-widest.text-xs, body.gx .wx-eyebrow, .hm-eyebrow{
  display:inline-flex; align-items:center; gap:7px; width:auto; max-width:max-content;
  font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-tint); padding:6px 12px; border-radius:999px; line-height:1.2;
}
body.gx p.tracking-widest.text-xs::before, body.gx .wx-eyebrow::before, .hm-eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 6px; }
body.gx p.tracking-widest.text-xs.text-center, body.gx .text-center > p.tracking-widest.text-xs{ margin-left:auto; margin-right:auto; }
body.gx p.tracking-widest.text-xs.mb-3{ margin-bottom:16px; }

/* ---------- Buttons ---------- */
body.gx .btn-primary, body.gx a.bg-emerald.btn-primary, body.gx .wx-btn{
  background:var(--blue) !important; color:#fff !important; border-radius:var(--r) !important;
  box-shadow:0 1px 2px rgba(11,27,51,.12), 0 8px 18px -8px rgba(21,86,216,.6) !important;
  font-weight:600; transition:background .15s ease, transform .15s ease, box-shadow .15s ease; transform:none !important;
}
body.gx .btn-primary:hover, body.gx .wx-btn:hover{ background:var(--blue-d) !important; transform:translateY(-1px) !important; }
body.gx a.border.rounded-lg, body.gx a.btn-ghost{ border-radius:var(--r) !important; }

/* ==================================================================
   PAGE HEADERS (every <header class="skyline">) — light with a framed photo
   ================================================================== */
body.gx header.skyline{
  color:var(--ink); border-bottom:1px solid var(--rule); overflow:hidden;
  background:linear-gradient(180deg,#F7FAFE 0%,#EEF3FA 100%) !important;
}
body.gx header.skyline::before{ display:block; content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(21,86,216,.10) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 70%); mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 70%); }
body.gx header.skyline .glow-orb, body.gx header.skyline .tower{ display:none; }
/* photo panel on the right (set by wx_hero_style as --hero-img) */
body.gx header.skyline.wx-photo-hero::after{
  content:''; display:block; position:absolute; top:28px; bottom:28px; right:28px; left:auto; width:38%;
  border-radius:var(--r-xl); background:var(--hero-img, none) center/cover no-repeat #DCE5F2;
  box-shadow:var(--sh-lg); height:auto; pointer-events:none; z-index:0;
}
body.gx header.skyline.wx-photo-hero.wx-has-qf::after{ bottom:96px; }
body.gx header.skyline > *{ position:relative; z-index:1; }
@media (max-width:900px){ body.gx header.skyline.wx-photo-hero::after{ display:none; } }

body.gx header.skyline h1{ color:var(--ink); font-size:clamp(34px,4.3vw,56px); max-width:18ch; font-weight:800; letter-spacing:-.03em; }
body.gx header.skyline h1 .text-accent, body.gx header.skyline h1 span{ color:var(--blue); }
body.gx header.skyline .text-white{ color:var(--ink); }
body.gx header.skyline .text-slate-300, body.gx header.skyline .text-white\/80, body.gx header.skyline .text-white\/90{ color:var(--ink-soft); }
body.gx header.skyline p.mt-4{ font-size:17px; line-height:1.65; max-width:34rem; }
body.gx header.skyline .text-emerald{ color:var(--blue); }
body.gx header.skyline p.text-emerald.tracking-widest{ background:var(--blue-tint); }
body.gx header.skyline a.border{ border-color:var(--rule) !important; color:var(--ink); background:#fff; box-shadow:var(--sh-sm); }
body.gx header.skyline a.border:hover{ border-color:var(--ink) !important; background:#fff !important; }
/* stat tiles under the hero text */
body.gx header.skyline .bg-white\/10{ background:#fff !important; border:1px solid var(--rule); border-radius:var(--r) !important; color:var(--ink-soft); box-shadow:var(--sh-sm); }
body.gx header.skyline .bg-white\/10 .text-accent{ color:var(--blue) !important; font-family:var(--display); font-weight:800; }
body.gx header.skyline .border-white\/10{ border-color:var(--rule) !important; }
/* the floating info card */
body.gx header.skyline .bg-white.rounded-2xl, body.gx header.skyline .bg-white.text-ink{ border-radius:var(--r-lg) !important; border:1px solid var(--rule); box-shadow:var(--sh-lg) !important; }
body.gx header.skyline .grid.md\:grid-cols-\[1\.1fr_\.9fr\]{ align-items:center; }
body.gx header.skyline .grid.md\:grid-cols-\[1\.1fr_\.9fr\] > :last-child{ justify-self:end; margin-right:6%; }
@media (max-width:767px){ body.gx header.skyline .grid.md\:grid-cols-\[1\.1fr_\.9fr\] > :last-child{ justify-self:stretch; margin-right:0; } }
/* simple page headers (page_hero) have no right column: keep text clear of the photo */
body.gx header.skyline.wx-photo-hero > .relative.max-w-7xl:not(.grid) > *{ max-width:56%; }
@media (max-width:900px){ body.gx header.skyline.wx-photo-hero > .relative.max-w-7xl:not(.grid) > *{ max-width:none; } }

/* ==================================================================
   DARK BANDS (closing CTA, "local fit" panels)
   ================================================================== */
body.gx section.skyline{
  background:radial-gradient(ellipse at 85% 0%, rgba(59,139,235,.28) 0%, transparent 55%), linear-gradient(135deg,#0B1B33 0%,#12284A 100%) !important;
  border-top:0; position:relative; overflow:hidden;
}
body.gx section.skyline::before{ display:block; content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size:22px 22px; pointer-events:none; }
body.gx section.skyline::after{ display:none; }
body.gx section.skyline .glow-orb, body.gx section.skyline .tower{ display:none; }
body.gx section.skyline h2{ font-size:clamp(24px,2.6vw,34px); font-weight:700; }
body.gx section.skyline a.border{ border-radius:var(--r) !important; border-color:rgba(255,255,255,.35) !important; }
body.gx section.skyline .btn-primary{ background:#fff !important; color:var(--ink) !important; box-shadow:none !important; }
body.gx section.skyline .btn-primary:hover{ background:var(--blue-tint) !important; }
body.gx .bg-ink{ background:linear-gradient(135deg,#0B1B33 0%,#12284A 100%) !important; }
body.gx section.grid.md\:grid-cols-2 > .bg-ink h2, body.gx section.grid.md\:grid-cols-2 > div h2.text-white{ color:#fff; }
body.gx section.grid.md\:grid-cols-2 > .bg-ink .w-9, body.gx section.grid.md\:grid-cols-2 > .bg-ink .rounded-lg{ border-radius:8px !important; }

/* ---------- Surfaces ---------- */
body.gx .bg-slate-50{ background:var(--mist) !important; }
body.gx section.bg-slate-50{ border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }

/* ---------- Cards ---------- */
body.gx .rounded-xl.border, body.gx .card-lift, body.gx .rounded-2xl.border{
  border-radius:var(--r-lg) !important; border-color:var(--rule) !important; background:#fff; box-shadow:var(--sh-sm);
}
body.gx .card-lift{ transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
body.gx .card-lift:hover{ transform:translateY(-3px) !important; box-shadow:var(--sh) !important; border-color:var(--blue-soft) !important; }
body.gx .w-11.h-11.rounded-lg, body.gx .w-12.h-12.rounded-lg, body.gx .rounded-lg.bg-primary\/10, body.gx .rounded-lg.bg-accent\/10, body.gx .rounded-lg.bg-emerald\/10{ border-radius:12px !important; }
body.gx .card-lift h3, body.gx .rounded-xl h3{ font-size:16px; color:var(--ink); }
body.gx .text-xs.leading-relaxed, body.gx p.text-secondary.text-xs{ font-size:13.5px; line-height:1.6; }
body.gx .card-lift .text-primary.font-semibold{ font-weight:600; }

/* numbered steps */
body.gx .rounded-full.bg-primary.text-white{ background:var(--blue) !important; color:#fff !important; border:0; box-shadow:0 0 0 6px var(--blue-tint); font-family:var(--display); font-weight:700; }

/* FAQ */
body.gx details.rounded-xl{ border:1px solid var(--rule) !important; border-radius:var(--r) !important; padding:18px 22px !important; box-shadow:none; background:#fff; }
body.gx details.rounded-xl[open]{ border-color:var(--blue-soft) !important; box-shadow:var(--sh-sm); }
body.gx details.rounded-xl summary{ font-size:15.5px; font-weight:600; color:var(--ink); }
body.gx details.rounded-xl summary > span{ width:26px; height:26px; border-radius:50%; background:var(--blue-tint); color:var(--blue); display:inline-flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 26px; }

/* round icon chips in benefit lists */
body.gx .rounded-full.bg-white.border{ border-radius:12px !important; border-color:var(--rule) !important; background:var(--blue-tint) !important; }
body.gx .rounded-full.bg-white.border svg{ stroke:var(--blue); }

/* tables (country comparison) */
body.gx table thead tr, body.gx thead.bg-ink{ background:var(--ink) !important; }
body.gx .rounded-2xl.overflow-hidden, body.gx .overflow-x-auto.rounded-2xl{ border-radius:var(--r-lg) !important; }

/* ---------- Photo pieces from includes/enhance.php ---------- */
body.gx .wx-media-photo, body.gx .wx-why-photo, body.gx .wx-strip figure{ border-radius:var(--r-xl); box-shadow:var(--sh-lg); }
body.gx .wx-media::before{ display:block; right:-16px; top:-16px; border-radius:var(--r-lg); background-image:radial-gradient(rgba(21,86,216,.32) 1.5px, transparent 1.6px); }
body.gx .wx-media-chip{ border-radius:var(--r); box-shadow:var(--sh-lg); border:1px solid var(--rule); }
body.gx .wx-media-chip b{ font-family:var(--display); font-weight:800; color:var(--blue); }
body.gx .wx-media-tag{ border-radius:999px; background:rgba(255,255,255,.94); color:var(--ink); letter-spacing:.06em; box-shadow:var(--sh-sm); }
body.gx .wx-media-tag i{ background:var(--teal); }
body.gx .wx-why{ background:var(--mist); border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
body.gx .wx-why-media::after{ display:block; background:var(--blue); opacity:.10; border-radius:var(--r-xl); }
body.gx .wx-why-chip{ border-radius:var(--r-lg); background:#fff; color:var(--ink-soft); border:1px solid var(--rule); box-shadow:var(--sh-lg); }
body.gx .wx-why-num{ font-family:var(--display); font-weight:800; background:none; -webkit-background-clip:initial; background-clip:initial; color:var(--blue); }
body.gx .wx-why-copy h2{ color:var(--ink); font-family:var(--display); font-weight:700; }
body.gx .wx-why-copy li strong{ font-family:var(--display); }
body.gx .wx-why-tick{ border-radius:9px; background:var(--teal); color:#fff; }
body.gx .wx-btn{ padding:13px 22px; }
body.gx .wx-link{ color:var(--blue); }

/* ---------- Quick enquiry form (under every solution page header) ---------- */
body.gx .wx-qf{ border-radius:var(--r-lg); border-color:var(--rule); box-shadow:var(--sh-lg); }
body.gx .wx-qf::before{ left:22px; right:22px; top:0; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--blue),var(--sky),var(--teal)); }
body.gx .wx-qf-ico{ border-radius:12px; background:var(--blue); color:#fff; box-shadow:0 8px 18px -8px rgba(21,86,216,.7); }
body.gx .wx-qf-title{ font-family:var(--display); font-weight:700; font-size:17px; }
body.gx .wx-qf .wx-qf-form input{ border-radius:var(--r); background:var(--mist); border:1px solid var(--rule); }
body.gx .wx-qf .wx-qf-form input:focus{ background:#fff; border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,86,216,.14); }
body.gx .wx-qf .wx-qf-form button[type=submit]{ background:var(--blue); border-radius:var(--r); box-shadow:0 8px 18px -8px rgba(21,86,216,.7); }
body.gx .wx-qf .wx-qf-form button[type=submit]:hover{ background:var(--blue-d); }
body.gx .wx-qf-note a{ color:var(--blue); }

/* ---------- All other forms ---------- */
body.gx .wt-form input, body.gx .wt-form select, body.gx .wt-form textarea{ border-radius:var(--r); border:1px solid #D3DBE6; background:#fff; }
body.gx .wt-form input:focus, body.gx .wt-form select:focus, body.gx .wt-form textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(21,86,216,.14); }
body.gx .wt-form button[type=submit]{ background:var(--blue); border-radius:var(--r); box-shadow:0 8px 18px -8px rgba(21,86,216,.7); }
body.gx .wt-form button[type=submit]:hover{ background:var(--blue-d); }
body.gx .wt-form-status.ok{ background:var(--teal-tint); color:#0B6E63; }

/* ==================================================================
   HEADER
   ================================================================== */
body.gx .wt-topbar{ background:var(--ink); height:auto; min-height:36px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); }
body.gx .gx-topbar-note{ color:#A9B6C9; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.gx .gx-topbar-links{ display:flex; align-items:center; gap:22px; }
body.gx .gx-topbar-links a{ color:#D3DCE8; font-size:12.5px; font-weight:500; display:inline-flex; gap:6px; align-items:center; }
body.gx .gx-topbar-links a:hover{ color:#fff; }
body.gx .gx-topbar-links svg{ width:14px; height:14px; }
body.gx .gx-topbar-links .gx-tel{ color:#fff; font-weight:600; }
@media (max-width:760px){ body.gx .gx-topbar-note{ display:none; } body.gx .gx-hide-sm{ display:none !important; } body.gx .wt-topbar{ justify-content:flex-end; } }

body.gx .wt-nav{ background:rgba(255,255,255,.96) !important; -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule); box-shadow:none; }
body.gx .wt-nav.scrolled{ box-shadow:0 10px 30px -22px rgba(11,27,51,.4); }
body.gx .wt-nav-inner{ max-width:var(--wrap); height:74px; padding:0 16px; }
body.gx .wt-logo-chip{ background:transparent; padding:0; box-shadow:none; border-radius:0; }
body.gx .wt-logo-img{ height:36px; width:auto; }
body.gx .wt-menu > li > a{ color:var(--ink); font-family:var(--sans); font-size:14.5px; font-weight:500; }
body.gx .wt-menu > li > a:hover, body.gx .wt-menu > li.active > a{ color:var(--blue); }
body.gx .wt-menu > li > a::after{ background:var(--blue); height:2px; bottom:-2px; border-radius:2px; }
body.gx .wt-caret{ border-color:currentColor; }
body.gx .wt-btn-ghost{ color:var(--ink); border:1px solid var(--rule); border-radius:var(--r); background:#fff; font-weight:600; }
body.gx .wt-btn-ghost:hover{ border-color:var(--ink); background:#fff; color:var(--ink); }
body.gx .wt-btn-solid{ background:var(--blue); color:#fff; border-radius:var(--r); box-shadow:0 8px 18px -8px rgba(21,86,216,.7); font-weight:600; }
body.gx .wt-btn-solid:hover{ background:var(--blue-d); transform:none; box-shadow:0 8px 18px -8px rgba(21,86,216,.7); }
body.gx .wt-burger{ border-color:var(--rule); border-radius:var(--r); background:#fff; }
body.gx .wt-burger span{ background:var(--ink); }

/* mega menu + dropdown */
body.gx .wt-mega, body.gx .wt-dropdown{ border-radius:var(--r-lg); border:1px solid var(--rule); box-shadow:var(--sh-lg); }
body.gx .wt-mega-col-head{ border-radius:var(--r); }
body.gx .wt-mega-col-head strong{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--ink); }
body.gx .wt-mega-ico{ border-radius:10px; }
body.gx .wt-mega a.wt-mega-link{ border-radius:8px; color:var(--ink-soft); }
body.gx .wt-mega a.wt-mega-link:hover, body.gx .wt-dropdown li a:hover{ background:var(--blue-tint); color:var(--blue); }
body.gx .wt-mega-feature{ background:linear-gradient(150deg,var(--blue) 0%,#0B3FA8 100%); border-radius:var(--r-lg); }
body.gx .wt-mega-feature h4{ font-family:var(--display); font-weight:700; font-size:17px; }
body.gx .wt-mega-feature a{ background:#fff; color:var(--blue); border-radius:var(--r); }
body.gx .wt-dropdown li a{ border-radius:8px; }

/* mobile drawer */
body.gx .wt-mobile{ background:#fff; }
body.gx .wt-mobile-accordion > li > button, body.gx .wt-mobile-accordion > li > a.wt-mobile-link{ color:var(--ink); font-family:var(--display); font-weight:700; }
body.gx .wt-mobile-sub a{ color:var(--ink-soft); border-radius:8px; }

/* ==================================================================
   FOOTER
   ================================================================== */
.gf{ background:var(--ink); color:#B7C3D4; font-family:var(--sans); border-top:0; position:relative; }
.gf::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--sky),var(--teal)); }
.gf a{ color:#B7C3D4; text-decoration:none; }
.gf a:hover{ color:#fff; }
.gf-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.gf-top{ display:grid; grid-template-columns:1.35fr repeat(5, 1fr); gap:32px; padding:68px 0 52px; }
.gf-brand img{ height:36px; width:auto; background:#fff; padding:7px 11px; border-radius:var(--r); }
.gf-brand p{ font-size:14px; line-height:1.65; margin:18px 0 20px; color:#9FAEC3; max-width:32ch; }
.gf-contact{ display:grid; gap:10px; font-size:14px; }
.gf-contact a, .gf-contact span{ display:inline-flex; align-items:flex-start; gap:9px; color:#fff; font-weight:500; }
.gf-contact .gf-addr{ color:#9FAEC3; font-size:13px; line-height:1.55; font-weight:400; }
.gf-contact svg{ flex:0 0 15px; margin-top:3px; color:var(--sky); }
.gf-contact small{ color:#8292A8; font-weight:500; }
.gf h5{ font-family:var(--display); font-weight:700; font-size:14px; color:#fff; margin:0 0 16px; letter-spacing:.02em; }
.gf ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; }
.gf-social{ display:flex; gap:8px; margin-top:22px; }
.gf-social a{ width:36px; height:36px; border:1px solid #23395A; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.03); }
.gf-social a:hover{ border-color:var(--sky); background:rgba(59,139,235,.12); }
.gf-social svg{ width:15px; height:15px; fill:currentColor; }
.gf-bottom{ border-top:1px solid #1C3253; padding:20px 0 26px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#8292A8; }
.gf-bottom nav{ display:flex; gap:20px; flex-wrap:wrap; }
@media (max-width:1000px){ .gf-top{ grid-template-columns:1fr 1fr 1fr; } .gf-brand{ grid-column:1 / -1; } }
@media (max-width:560px){ .gf-top{ grid-template-columns:1fr 1fr; gap:28px 20px; padding-top:52px; } }

/* ==================================================================
   HOME PAGE (index.php)
   ================================================================== */
.hm{ font-family:var(--sans); color:var(--ink); }
.hm-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 16px; }
.hm-eyebrow{ margin:0 0 16px; }
.hm h2{ font-family:var(--display); font-weight:700; font-size:clamp(28px,3vw,42px); line-height:1.14; letter-spacing:-.025em; margin:0; color:var(--ink); }
.hm-lede{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); max-width:60ch; margin:14px 0 0; }
.hm-sec{ padding:100px 0; }
.hm-sec.alt{ background:var(--mist); border-top:1px solid var(--rule-2); border-bottom:1px solid var(--rule-2); }
.hm-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:46px; }
.hm-link{ color:var(--blue); font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:6px; }
.hm-link::after{ content:'→'; transition:transform .15s ease; }
.hm-link:hover::after{ transform:translateX(3px); }
.hm-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 24px; border-radius:var(--r); font-weight:600; font-size:15px; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.hm-btn.solid{ background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(11,27,51,.12), 0 10px 22px -10px rgba(21,86,216,.7); }
.hm-btn.solid:hover{ background:var(--blue-d); transform:translateY(-1px); }
.hm-btn.line{ border:1px solid var(--rule); color:var(--ink); background:#fff; box-shadow:var(--sh-sm); }
.hm-btn.line:hover{ border-color:var(--ink); }
.hm-btn.line.on-dark{ border-color:rgba(255,255,255,.35); color:#fff; background:transparent; box-shadow:none; }
.hm-btn.line.on-dark:hover{ background:#fff; color:var(--ink); }

/* hero */
.hm-hero{ position:relative; background:linear-gradient(180deg,#F7FAFE 0%,#EEF3FA 100%); border-bottom:1px solid var(--rule); overflow:hidden; }
.hm-hero::before{ content:''; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(21,86,216,.10) 1px, transparent 1.2px); background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 65%); mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.35) 45%,transparent 65%); }
.hm-hero-in{ position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); min-height:620px; }
.hm-hero-copy{ padding:96px 48px 96px max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); align-self:center; }
.hm-hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(40px,5.2vw,70px); line-height:1.02; letter-spacing:-.035em; margin:0; color:var(--ink); }
.hm-hero h1 em{ font-style:normal; color:var(--blue); }
.hm-hero-sub{ font-size:18px; line-height:1.65; color:var(--ink-soft); margin:24px 0 34px; max-width:34rem; }
.hm-hero-ctas{ display:flex; flex-wrap:wrap; gap:12px; }
.hm-hero-media{ position:relative; margin:32px max(16px, calc((100vw - var(--wrap)) / 2 + 16px)) 32px 0; min-height:420px; border-radius:var(--r-xl); background:#DCE5F2; box-shadow:var(--sh-lg); }
.hm-hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:var(--r-xl); }
.hm-hero-media::after{ display:none; }
.hm-status{ position:absolute; left:-64px; bottom:48px; z-index:2; width:min(360px, 82%); background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); box-shadow:var(--sh-lg); padding:20px 22px; }
.hm-status h3{ font-family:var(--display); font-weight:700; font-size:16px; margin:0 0 4px; }
.hm-status > p{ font-size:12.5px; color:var(--muted); margin:0 0 12px; }
.hm-status ul{ list-style:none; margin:0; padding:0; }
.hm-status li{ display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--rule-2); font-size:13.5px; }
.hm-status .cc{ width:32px; height:24px; border-radius:6px; background:var(--blue-tint); color:var(--blue); font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; letter-spacing:.04em; }
.hm-status b{ display:block; font-weight:600; color:var(--ink); }
.hm-status small{ color:var(--muted); font-size:12px; }
.hm-status .st{ font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; white-space:nowrap; }
.hm-status .st.live{ background:var(--teal-tint); color:#0B6E63; }
.hm-status .st.soon{ background:var(--blue-tint); color:var(--blue); }
.hm-proof{ position:relative; border-top:1px solid var(--rule); background:#fff; }
.hm-proof ul{ list-style:none; margin:0 auto; padding:0 16px; max-width:var(--wrap); display:grid; grid-template-columns:repeat(4,1fr); }
.hm-proof li{ padding:22px 20px; font-size:14px; font-weight:600; color:var(--ink); display:flex; gap:12px; align-items:center; border-left:1px solid var(--rule-2); }
.hm-proof li:first-child{ border-left:0; padding-left:0; }
.hm-proof svg{ flex:0 0 34px; width:34px; height:34px; padding:8px; border-radius:10px; background:var(--blue-tint); stroke:var(--blue); }

/* solutions */
.hm-sol{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hm-sol article{ border:1px solid var(--rule); border-radius:var(--r-lg); background:#fff; display:flex; flex-direction:column; box-shadow:var(--sh-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; overflow:hidden; }
.hm-sol article:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--blue-soft); }
.hm-sol figure{ margin:0; height:200px; overflow:hidden; background:#dfe6f1; }
.hm-sol figure img{ transition:transform .6s ease; }
.hm-sol article:hover figure img{ transform:scale(1.04); }
.hm-sol-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.hm-sol h3{ font-family:var(--display); font-weight:700; font-size:21px; margin:0; color:var(--ink); letter-spacing:-.015em; }
.hm-sol .tag{ font-size:13.5px; color:var(--muted); margin:6px 0 18px; }
.hm-sol ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; font-size:14.5px; color:var(--ink-soft); }
.hm-sol li{ display:flex; gap:10px; }
.hm-sol li svg{ flex:0 0 18px; width:18px; height:18px; margin-top:2px; padding:3px; border-radius:50%; background:var(--teal-tint); stroke:var(--teal); }
.hm-sol .hm-link{ margin-top:auto; align-self:flex-start; }

/* industries */
.hm-ind{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; border:0; background:none; }
.hm-ind div{ border:1px solid var(--rule); border-radius:var(--r); background:#fff; padding:18px 18px; display:flex; gap:12px; align-items:center; font-size:15px; font-weight:600; box-shadow:var(--sh-sm); transition:border-color .15s ease, transform .15s ease; }
.hm-ind div:hover{ border-color:var(--blue-soft); transform:translateY(-2px); }
.hm-ind svg{ flex:0 0 38px; width:38px; height:38px; padding:9px; border-radius:10px; background:var(--blue-tint); stroke:var(--blue); }

/* why + photo */
.hm-why{ display:grid; grid-template-columns:1fr 1fr; background:linear-gradient(135deg,#0B1B33 0%,#12284A 100%); color:#fff; position:relative; }
.hm-why-copy{ padding:96px 56px 96px max(16px, calc((100vw - var(--wrap)) / 2 + 16px)); }
.hm-why h2{ color:#fff; }
.hm-why .hm-eyebrow{ color:#BFD4FB; background:rgba(59,139,235,.18); }
.hm-why ul{ list-style:none; margin:36px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 28px; }
.hm-why li{ display:flex; gap:12px; font-size:15px; line-height:1.5; color:#D3DCE8; align-items:center; }
.hm-why li span.ic{ width:40px; height:40px; flex:0 0 40px; border:1px solid #23395A; border-radius:10px; background:rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; }
.hm-why-photo{ position:relative; min-height:440px; background:#1a2b40; }
.hm-why-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* stats */
.hm-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; border:0; }
.hm-stats div{ padding:30px 26px; border:1px solid var(--rule); border-radius:var(--r-lg); background:linear-gradient(180deg,#fff 0%,var(--mist) 100%); position:relative; overflow:hidden; }
.hm-stats div::before{ content:''; position:absolute; left:26px; top:0; width:36px; height:3px; border-radius:0 0 3px 3px; background:var(--blue); }
.hm-stats div:nth-child(2)::before{ background:var(--sky); } .hm-stats div:nth-child(3)::before{ background:var(--teal); } .hm-stats div:nth-child(4)::before{ background:var(--amber); }
.hm-stats b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(38px,4vw,54px); line-height:1; color:var(--ink); letter-spacing:-.03em; }
.hm-stats span{ display:block; margin-top:12px; font-size:14px; color:var(--muted); font-weight:500; }

/* purpose */
.hm-purpose{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.hm-purpose figure{ margin:0; height:440px; border-radius:var(--r-xl); overflow:hidden; background:#dfe6f1; box-shadow:var(--sh-lg); }

/* testimonial */
.hm-quote{ display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:center; }
.hm-quote figure{ background:#fff; border:1px solid var(--rule); border-radius:var(--r-xl); padding:40px 44px; box-shadow:var(--sh); position:relative; }
.hm-quote figure::before{ content:''; position:absolute; left:0; top:36px; bottom:36px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--blue),var(--teal)); }
.hm-quote blockquote{ margin:0; font-family:var(--display); font-size:clamp(20px,2vw,26px); line-height:1.5; color:var(--ink); font-weight:600; letter-spacing:-.01em; min-height:6em; }
.hm-quote cite{ display:block; margin-top:20px; font-style:normal; font-size:14px; font-weight:600; color:var(--blue); }
.hm-quote-nav{ display:flex; gap:8px; margin-top:28px; }
.hm-quote-nav button{ width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; background:#fff; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-sm); }
.hm-quote-nav button:hover{ border-color:var(--blue); color:var(--blue); }
.hm-quote-count{ font-size:13px; color:var(--muted); align-self:center; margin-left:8px; }

/* insights */
.hm-ins{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.hm-ins a{ display:flex; flex-direction:column; color:inherit; background:#fff; border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s ease, box-shadow .2s ease; }
.hm-ins a:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.hm-ins figure{ margin:0; height:190px; overflow:hidden; background:#dfe6f1; }
.hm-ins figure img{ transition:transform .6s ease; }
.hm-ins a:hover figure img{ transform:scale(1.04); }
.hm-ins .tg{ align-self:flex-start; margin:20px 22px 0; font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--blue); background:var(--blue-tint); padding:5px 10px; border-radius:999px; }
.hm-ins h3{ font-family:var(--display); font-weight:700; font-size:18px; line-height:1.35; margin:12px 22px 24px; color:var(--ink); letter-spacing:-.01em; }

/* closing band */
.hm-cta{ background:radial-gradient(ellipse at 85% 0%, rgba(59,139,235,.3) 0%, transparent 55%), linear-gradient(135deg,#0B1B33 0%,#12284A 100%); color:#fff; border-top:0; }
.hm-cta .hm-wrap{ display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; padding-top:72px; padding-bottom:72px; }
.hm-cta h2{ color:#fff; max-width:22ch; }
.hm-cta p{ color:#A9B6C9; margin:12px 0 0; font-size:16px; }
.hm-cta-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.hm-cta .hm-btn.solid{ background:#fff; color:var(--ink); box-shadow:none; }
.hm-cta .hm-btn.solid:hover{ background:var(--blue-tint); }

@media (max-width:1000px){
  .hm-hero-in, .hm-why, .hm-purpose, .hm-quote{ grid-template-columns:1fr; }
  .hm-hero-copy{ padding:64px 16px 36px; }
  .hm-hero-media{ min-height:0; margin:0 16px 48px; padding-top:250px; background:transparent; box-shadow:none; }
  .hm-hero-media img{ height:280px !important; bottom:auto !important; box-shadow:var(--sh-lg); }
  .hm-status{ position:relative; left:auto; bottom:auto; width:auto; margin:0 14px; }
  .hm-sol, .hm-ins{ grid-template-columns:1fr; }
  .hm-why-copy{ padding:64px 16px; }
  .hm-why-photo{ min-height:300px; }
  .hm-purpose{ gap:32px; }
  .hm-purpose figure{ height:300px; }
  .hm-quote{ gap:36px; }
  .hm-quote figure{ padding:34px 26px; }
  .hm-proof ul{ grid-template-columns:1fr 1fr; }
  .hm-proof li:nth-child(3){ border-left:0; padding-left:0; }
  .hm-proof li{ border-top:1px solid var(--rule-2); }
  .hm-ind, .hm-stats{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .hm-sec{ padding:68px 0; }
  .hm-ind div{ padding:14px 12px; font-size:14px; }
  .hm-why ul{ grid-template-columns:1fr; }
  .hm-proof li{ padding:16px 10px; font-size:13px; }
}

/* ==================================================================
   PAGES WITH THEIR OWN STYLESHEETS
   ================================================================== */
/* free resources / reviews / case-study library (shared/assets/library.css) */
body.gx .wtl-btn-primary, body.gx .wtl-btn.wtl-btn-primary{ background:var(--blue) !important; border-radius:var(--r) !important; box-shadow:0 8px 18px -8px rgba(21,86,216,.7) !important; }
body.gx .wtl-btn-primary:hover{ background:var(--blue-d) !important; }
body.gx [class^="wtl-"] h1, body.gx [class^="wtl-"] h2, body.gx [class*=" wtl-"] h1, body.gx [class*=" wtl-"] h2{ font-family:var(--display) !important; letter-spacing:-.02em; }
body.gx .wtl-card-form{ border-radius:var(--r-lg) !important; box-shadow:var(--sh-lg) !important; }
body.gx .wtl-field input, body.gx .wtl-field select, body.gx .wtl-field textarea{ border-radius:var(--r) !important; }

/* blog listing + article */
body.gx .hero h1{ font-family:var(--display) !important; font-weight:800 !important; letter-spacing:-.03em; }
body.gx .hero h1 em{ font-family:var(--display) !important; font-style:normal !important; font-weight:800 !important; color:var(--blue) !important; -webkit-text-fill-color:currentColor; background:none !important; }
body.gx .hero:has(.hero-search){ background:linear-gradient(180deg,#F7FAFE 0%,#EEF3FA 100%) !important; background-image:linear-gradient(180deg,#F7FAFE 0%,#EEF3FA 100%) !important; border-bottom:1px solid var(--rule); }
body.gx .hero:has(.hero-search) .hero-inner{ max-width:var(--wrap); }
body.gx .hero:has(.hero-search) h1{ color:var(--ink) !important; }
body.gx .hero:has(.hero-search) .hero-sub{ color:var(--ink-soft) !important; }
body.gx .hero:has(.hero-search) .eyebrow{ color:var(--blue); letter-spacing:.06em; font-size:12px; }
body.gx .hero-search input{ border-radius:var(--r) !important; border:1px solid var(--rule) !important; box-shadow:var(--sh-sm) !important; }
body.gx .hero-search input:focus{ border-color:var(--blue) !important; }
body.gx.blog-page, body.gx .post-body, body.gx .article-body{ font-family:var(--sans) !important; }
body.gx .post-body h2, body.gx .post-body h3, body.gx .article-body h2, body.gx .article-body h3,
body.gx .card-title, body.gx .post-card h3, body.gx .art-title, body.gx article h1, body.gx article h2{ font-family:var(--display) !important; letter-spacing:-.015em; }

/* case studies: brand blue instead of gold accents */
body.gx{ --gold-500:#1556D8; --gold-300:#8FB4FF; }
body.gx mark{ background:none; color:var(--blue); padding:0; }

/* demo pop-up */
.wtdm{ font-family:var(--sans) !important; border-radius:var(--r-xl) !important; }
.wtdm h2, .wtdm h3{ font-family:var(--display) !important; letter-spacing:-.02em; }
.wtdm button[type=submit]{ background:var(--blue) !important; border-radius:var(--r) !important; }
.wtdm-side{ background:linear-gradient(160deg,#0B1B33 0%,#12284A 100%) !important; }

/* ---------- misc ---------- */
body.gx header.skyline h1{ hyphens:manual; overflow-wrap:normal; word-break:normal; }
body.gx .h-1.bg-gradient-to-r, body.gx .h-1\.5.bg-gradient-to-r{ background:linear-gradient(90deg,var(--blue),var(--sky)) !important; border-radius:3px !important; }
body.gx .reveal{ transition:opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .hm-ins figure img, .hm-sol figure img, .wx-media-photo img{ transition:none !important; }
  body.gx .card-lift:hover, .hm-sol article:hover, .hm-ins a:hover{ transform:none !important; }
}

/* ---------- coloured card headers (e-invoicing country cards etc.) keep white text ---------- */
body.gx .text-white h3, body.gx .card-lift .text-white h3, body.gx [class*="bg-gradient-to"].text-white h3{ color:#fff !important; }
body.gx .text-white > p.tracking-widest.text-xs, body.gx [class*="bg-gradient-to"] p.tracking-widest.text-xs{
  background:rgba(255,255,255,.16); color:#fff; padding:4px 10px;
}
body.gx .text-white > p.tracking-widest.text-xs::before{ background:#fff; }
body.gx section.skyline p.tracking-widest.text-xs, body.gx .bg-ink p.tracking-widest.text-xs{ background:rgba(59,139,235,.18); color:#BFD4FB; }

/* ---------- blog article header: navy gradient like the other dark bands ---------- */
body.gx .hero:not(:has(.hero-search)){
  background:radial-gradient(ellipse at 85% 0%, rgba(59,139,235,.28) 0%, transparent 55%), linear-gradient(135deg,#0B1B33 0%,#12284A 100%) !important;
}
body.gx .hero:not(:has(.hero-search))::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px); background-size:22px 22px; pointer-events:none; }
body.gx .hero .eyebrow{ border-radius:999px; }

/* white text that sits on a coloured badge inside a light page header stays white */
body.gx header.skyline [class*="bg-gradient-to"].text-white, body.gx header.skyline [class*="bg-gradient-to"] .text-white,
body.gx header.skyline .bg-primary.text-white, body.gx header.skyline .bg-emerald.text-white, body.gx header.skyline .bg-ink.text-white,
body.gx header.skyline .bg-accent.text-white, body.gx header.skyline [style*="background"].text-white{ color:#fff !important; }

/* ---------- Footer directory (UAE e-invoicing pages; footer only) ---------- */
.gf-dir{ border-top:1px solid #1C3253; padding:22px 0 18px; min-width:0; max-width:100%; }
.gf-dir p{ overflow-wrap:anywhere; }
.gf-dir summary span{ all:unset; }
.gf-dir summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--display); font-weight:700; font-size:14px; color:#fff; margin-bottom:12px; }
.gf-dir summary::-webkit-details-marker{ display:none; }
.gf-dir summary i{ width:22px; height:22px; border:1px solid #23395A; border-radius:6px; position:relative; flex:0 0 22px; }
.gf-dir summary i::before, .gf-dir summary i::after{ content:''; position:absolute; left:6px; right:6px; top:10px; height:1.5px; background:#B7C3D4; }
.gf-dir summary i::after{ transform:rotate(90deg); transition:transform .2s ease; }
.gf-dir[open] summary i::after{ transform:rotate(0deg); }
.gf-dir p{ margin:0 0 8px; font-size:12.5px; line-height:1.9; color:#8292A8; }
.gf-dir strong{ color:#D3DCE8; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:11.5px; margin-right:6px; }
.gf-dir a{ color:#9FAEC3; }
.gf-dir a:hover{ color:#fff; text-decoration:underline; }
.gf-dir .sep{ color:#3A5170; margin:0 3px; }

/* utilities used by the UAE directory pages that the precompiled Tailwind file lacks */
.pt-16{ padding-top:4rem; }
@media (min-width:1024px){ .lg\:grid-cols-\[1fr_1\.4fr\]{ grid-template-columns:1fr 1.4fr; } }