/*
Theme Name:   VATcube
Theme URI:    https://vatcube.com/
Description:  The VATcube website theme. A standalone theme - it does not depend on
              Divi or any page builder. Page layouts are built from section
              templates; all copy comes from the WordPress editor or the page
              templates themselves.
Author:       VATcube
Version:      4.1.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  vatcube
*/
/* ============================================================
   0. FONTS
   @font-face is NOT declared here on purpose.

   It is printed inline in wp_head by vatcube_font_faces() using absolute
   URLs. Relative paths like url('assets/fonts/x.woff2') break the moment a
   plugin combines or minifies CSS, because the combined file lives in
   wp-content/cache/ and the relative path then resolves against that
   directory instead of the theme. This site runs both Autoptimize and
   SpeedyCache, so that was a live failure, not a theoretical one, and it is
   why the site kept rendering in a fallback serif.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   Palette carried over unchanged from the approved mockup.
   ============================================================ */
:root{
  --vc-navy:#163d7a;
  --vc-blue:#2957a4;
  --vc-sky:#6f93d1;
  --vc-pale:#d9e6f8;
  --vc-paler:#f3f7fd;
  --vc-page:#ffffff;
  --vc-ink:#0f1f38;
  --vc-muted:#5c6c88;
  --vc-brd:#e2ebf9;

  --vc-display:'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vc-body:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vc-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --vc-r-sm:10px;
  --vc-r-md:16px;
  --vc-r-lg:22px;
  --vc-r-xl:26px;

  --vc-shadow-card:0 10px 30px rgba(41,87,164,.06);
  --vc-shadow-lift:0 18px 40px rgba(41,87,164,.16);
  --vc-shadow-btn:0 8px 20px rgba(41,87,164,.30);
  --vc-wrap:1180px;
}
/* ============================================================
   2. BASE + TYPOGRAPHY
   These deliberately override Divi's Open Sans defaults.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* Base typography.
   This declaration was lost when the stylesheet was derived from the old
   child theme: the rule that set it also listed Divi selectors, so removing
   Divi removed the body font with it and the whole site fell back to Times.
   Declared standalone here so it cannot happen again. */
body{
  margin:0;
  font-family:var(--vc-body);
  font-size:16px;
  line-height:1.7;
  color:var(--vc-ink);
  background:var(--vc-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

input,select,textarea,button{font-family:inherit;}

/* Headings.
   The global heading rule was another casualty of deriving this stylesheet
   from the child theme: it listed Divi selectors alongside the bare tags,
   so stripping Divi took the whole rule and every heading except the hero
   fell back to the body typeface. That is the "fonts are not correct"
   report. Declared standalone here. */
/* The approved design assigns Lexend to h1, h2 and h3 ONLY. Everything
   else - h4 to h6, nav, buttons, eyebrows, card labels, footer headings -
   is Source Sans 3. Spreading Lexend wider than the design specified is
   what made the type look inconsistent. */
h1,h2,h3{
  font-family:var(--vc-display);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--vc-navy);
  margin:0 0 .5em;
}
h4,h5,h6{
  font-family:var(--vc-body);
  font-weight:700;
  line-height:1.3;
  color:var(--vc-navy);
  margin:0 0 .5em;
}
h1{font-size:clamp(28px,4.4vw,44px); font-weight:800; letter-spacing:-.02em;}
h2{font-size:clamp(24px,3vw,30px);}
h3{font-size:20px;}
h4{font-size:17px;}
h5{font-size:15px;}
h6{font-size:14px;}

/* Buttons use the display face at small sizes for the same reason. */


/* Navigation is body-face, matching the approved design:
   .nav-links there sets size, weight and colour but no font-family. */
.vc-nav-links{font-family:var(--vc-body);}
/* Colour only where this theme owns the markup. Anything Divi renders
   keeps whatever colour the page author set on the module. */
.vc-article-body h1,.vc-article-body h2,.vc-article-body h3,
.vc-article-body h4,.vc-article-body h5,.vc-article-body h6{
  color:var(--vc-navy);
}
.vc-hero h1,.vc-page-hero h1,
.vc-section-head h2,.vc-card-title,
.vc-highlight-card h3,.vc-service-card h3,
.vc-blog-card h4,.vc-footer-col h5{
  color:var(--vc-navy);
}
.vc-hero h1,.vc-page-hero h1{color:#fff;}
h2{font-size:clamp(24px,3vw,30px);}
h3{font-size:20px;}
h4{font-size:17px;}
h5{font-size:15px;}
h6{font-size:14px;}
/* Set the rhythm, not the colour.
   `.entry-content p` still caught Divi pagebuilder content, because Divi
   renders module output inside .entry-content on builder pages. That
   repainted the dark testimonial band's white text to dark ink and made it
   unreadable. Colour is now applied only where this theme owns the markup. */
p{line-height:1.7;}
.vc-article-body p,
.vc-blog-card p,
.vc-section-head p,
.vc-highlight-card p,
.vc-service-card p,
.vc-empty p{color:var(--vc-ink);}
.vc-section-head p,.vc-blog-card p,.vc-highlight-card p,
.vc-service-card p,.vc-empty p{color:var(--vc-muted);}
a{color:var(--vc-blue); text-decoration:none; transition:color .15s ease;}
a:hover{color:var(--vc-navy);}
strong,b{font-weight:600;}
.vc-mono,.mono{font-family:var(--vc-mono);}
/* Icons. Sized in em so they track the text they sit beside, and
   stroked with currentColor so they inherit whatever colour the
   parent sets - no per-icon colour rules needed. */
.vc-icon-svg{
  width:1em; height:1em; display:inline-block; vertical-align:-0.125em;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  flex-shrink:0;
}
/* Keyboard focus. Divi ships with :focus{outline:0} - put it back. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--vc-sky);
  outline-offset:2px;
  border-radius:4px;
}
.vc-skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--vc-navy); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--vc-r-sm) 0; font-weight:600; font-size:14px;
}
.vc-skip-link:focus{left:0; color:#fff;}
.vc-wrap{max-width:var(--vc-wrap); margin:0 auto; padding:0 32px; position:relative; z-index:2;}
.vc-sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* ============================================================
   3. MOTION
   ============================================================ */
/* SCROLL-REVEAL ANIMATIONS HAVE BEEN REMOVED. This is deliberate.
 *
 * They worked by setting opacity:0 on content and relying on JavaScript to
 * reveal it. That makes your content's visibility depend on a script running
 * successfully, and on this site it repeatedly did not: with JS disabled 486
 * elements were invisible, and even with the JS present, a caching plugin
 * that defers, combines or minifies scripts can break it. The result was
 * article cards rendering as blank white boxes.
 *
 * I then added a JavaScript failsafe, which was the wrong fix: it lived
 * inside the very file that might fail to run.
 *
 * A fade-in is worth a few seconds of polish. It is not worth a lead
 * generation site intermittently showing visitors empty boxes. The classes
 * (.reveal, .reveal-scale, .stagger) are left in the templates so nothing
 * breaks, but they now do nothing at all.
 *
 * Hover transitions on cards and buttons are unaffected: those enhance
 * something already visible and cannot hide content. */
.reveal,
.reveal-scale,
.stagger > *{opacity:1; transform:none;}
.stagger.in > *:nth-child(1){transition-delay:.03s;}
.stagger.in > *:nth-child(2){transition-delay:.09s;}
.stagger.in > *:nth-child(3){transition-delay:.15s;}
.stagger.in > *:nth-child(4){transition-delay:.21s;}
.stagger.in > *:nth-child(5){transition-delay:.27s;}
.stagger.in > *:nth-child(6){transition-delay:.33s;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal,.reveal-scale,.stagger > *,
  html.vc-js .reveal,html.vc-js .reveal-scale,html.vc-js .stagger > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .vc-orb,.vc-marquee-track,.vc-scene-orb{animation:none !important;}
}
/* Ambient background orbs */
.vc-orb{position:fixed; border-radius:50%; filter:blur(90px); z-index:0; opacity:.35; pointer-events:none;}
.vc-orb-1{width:460px; height:460px; background:var(--vc-sky); top:-160px; left:-160px; animation:vcFloat1 18s ease-in-out infinite;}
.vc-orb-2{width:380px; height:380px; background:var(--vc-pale); top:500px; right:-160px; animation:vcFloat2 20s ease-in-out infinite;}
@keyframes vcFloat1{0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,50px);}}
@keyframes vcFloat2{0%,100%{transform:translate(0,0);} 50%{transform:translate(-40px,60px);}}
/* ============================================================
   4. UTILITY BAR + HEADER
   #main-header keeps its Divi ID so Divi's own scripts still
   find it, but every Divi header style is neutralised here.
   ============================================================ */
/* The whole stack sticks as one unit. This is the fix for the navy bar
   painting over the logo and menu: previously the nav was sticky on its
   own and slid under the utility bar, which sat higher in the stacking
   order. Nothing inside this wrapper is independently positioned now. */
.vc-header-stack{
  position:-webkit-sticky; position:sticky; top:0; z-index:1000;
  background:var(--vc-page);
}
.vc-util-bar{
  background:var(--vc-navy); color:#dce8fb; font-size:12.5px;
  padding:7px 32px; display:flex; justify-content:flex-end;
  gap:22px; position:relative; z-index:1;
}
.vc-util-bar a{color:#dce8fb; opacity:.9; transition:opacity .15s ease;}
.vc-util-bar a:hover{opacity:1; color:#fff; text-decoration:underline;}
/* position:relative !important is deliberate. Divi's custom.min.js still
   applies its fixed-header behaviour to #main-header regardless of the
   body classes we remove, and any position other than relative here
   re-creates the overlap. */
#main-header.vc-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  position:relative !important;
  top:auto !important; left:auto !important; right:auto !important;
  z-index:2;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--vc-brd);
  box-shadow:none;
  width:100%; height:auto; line-height:normal;
  transform:none !important;
  transition:box-shadow .2s ease, padding .2s ease;
}
#main-header.vc-nav.is-stuck{padding:10px 32px;}
.vc-header-stack.is-stuck{box-shadow:0 4px 20px rgba(22,61,122,.10);}
.vc-logo{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.vc-logo img{height:38px; width:auto; display:block; transition:height .2s ease;}
#main-header.vc-nav.is-stuck .vc-logo img{height:32px;}
.vc-nav-links{
  display:flex; align-items:center; gap:26px;
  font-size:14px; font-weight:500;
  list-style:none; margin:0; padding:0;
}
.vc-nav-links a{color:var(--vc-blue); opacity:.9; transition:opacity .15s ease, color .15s ease;}
.vc-nav-links a:hover,
.vc-nav-links .current-menu-item > a,
.vc-nav-links .current_page_item > a{opacity:1; color:var(--vc-navy);}
/* Dropdowns for the "What We Do" / "Resources" sub-menus */
.vc-nav-links li{position:relative; list-style:none;}
.vc-nav-links ul.sub-menu{
  position:absolute; top:calc(100% + 14px); left:-16px; min-width:280px;
  background:#fff; border:1px solid var(--vc-brd); border-radius:var(--vc-r-md);
  box-shadow:0 18px 40px rgba(41,87,164,.16); padding:10px; margin:0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.vc-nav-links li:hover > ul.sub-menu,
.vc-nav-links li:focus-within > ul.sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.vc-nav-links ul.sub-menu a{
  display:block; padding:10px 14px; border-radius:var(--vc-r-sm);
  font-size:13.5px; line-height:1.45; color:var(--vc-ink);
}
.vc-nav-links ul.sub-menu a:hover{background:var(--vc-paler); color:var(--vc-navy);}
/* The assessment item renders as the button wherever it sits in the menu. */
.vc-nav-links li.vc-nav-cta > a{
  font-family:var(--vc-body);
  background:linear-gradient(135deg, var(--vc-sky), var(--vc-blue));
  color:#fff !important; border-radius:var(--vc-r-sm);
  padding:11px 20px; font-size:14px; font-weight:600; opacity:1;
  box-shadow:var(--vc-shadow-btn); white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vc-nav-links li.vc-nav-cta > a:hover{
  transform:translateY(-2px); color:#fff !important;
  box-shadow:0 12px 26px rgba(41,87,164,.4);
}
/* Mobile toggle - the mockup had no mobile navigation at all. */
.vc-nav-toggle{
  display:none; background:var(--vc-paler); border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-sm); width:44px; height:44px;
  align-items:center; justify-content:center; color:var(--vc-navy);
}
.vc-nav-toggle:hover{background:var(--vc-pale);}
.vc-nav-toggle .vc-icon-svg{width:22px; height:22px;}
.vc-btn-ghost{
  display:inline-block; background:var(--vc-paler); color:var(--vc-navy);
  border:1px solid var(--vc-brd); border-radius:var(--vc-r-sm);
  padding:13px 26px; font-size:15px; font-weight:600;
  transition:background .15s ease, border-color .15s ease;
}
.vc-btn-ghost:hover{background:var(--vc-pale); border-color:var(--vc-sky); color:var(--vc-navy);}
.vc-btn-on-dark{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25);}
.vc-btn-on-dark:hover{background:rgba(255,255,255,.16); color:#fff;}
/* ============================================================
   5. BUTTONS
   ============================================================ */
.vc-btn-primary,
button.vc-btn-primary,
a.vc-btn-primary,
.vc-form button[type="submit"],
input[type="submit"]{
  display:inline-block;
  font-family:var(--vc-body);
  background:linear-gradient(135deg, var(--vc-sky), var(--vc-blue));
  color:#fff;
  border:none;
  border-radius:var(--vc-r-sm);
  padding:13px 24px;
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  text-align:center;
  box-shadow:var(--vc-shadow-btn);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
  cursor:pointer;
}
.vc-btn-primary:hover,
button.vc-btn-primary:hover,
a.vc-btn-primary:hover,
.vc-form button[type="submit"]:hover,
input[type="submit"]:hover{
  transform:translateY(-2px);
  color:#fff;
  box-shadow:0 12px 26px rgba(41,87,164,.4);
}

.vc-btn-ghost,
a.vc-btn-ghost,
button.vc-btn-ghost{
  display:inline-block;
  font-family:var(--vc-body);
  background:var(--vc-paler); color:var(--vc-navy);
  border:1px solid var(--vc-brd); border-radius:var(--vc-r-sm);
  padding:13px 26px; font-size:15px; font-weight:600;
  line-height:1.4; text-align:center; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.vc-btn-ghost:hover{background:var(--vc-pale); border-color:var(--vc-sky); color:var(--vc-navy);}

/* Secondary action sitting on the hero or the CTA band. */
.vc-btn-on-dark,
a.vc-btn-on-dark{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.25);}
.vc-btn-on-dark:hover,
a.vc-btn-on-dark:hover{background:rgba(255,255,255,.16); color:#fff;}

/* Nav menu item that links to the assessment page renders as the button. */
.vc-nav-links li.vc-nav-cta > a{
  background:linear-gradient(135deg, var(--vc-sky), var(--vc-blue));
  color:#fff; border-radius:var(--vc-r-sm);
  padding:11px 20px; font-size:14px; font-weight:600; opacity:1;
  box-shadow:var(--vc-shadow-btn); white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vc-nav-links li.vc-nav-cta > a:hover{
  transform:translateY(-2px); color:#fff;
  box-shadow:0 12px 26px rgba(41,87,164,.4);
}

/* ============================================================
   6. SECTIONS
   ============================================================ */
.vc-section{padding:88px 32px; position:relative; z-index:2;}
.vc-section--tight{padding-top:0;}
.vc-section-head{text-align:center; max-width:680px; margin:0 auto 48px;}
.vc-eyebrow{
  font-size:12.5px; font-weight:600; letter-spacing:.1em;
  color:var(--vc-blue); text-transform:uppercase; display:block; margin-bottom:12px;
}
.vc-section-head h2{font-size:30px; font-weight:700; color:var(--vc-navy); line-height:1.3;}
.vc-section-head p{color:var(--vc-muted); font-size:15.5px; margin-top:12px; line-height:1.6;}
/* ============================================================
   7. HERO
   ============================================================ */
.vc-hero{
  position:relative; margin:28px 32px 0; border-radius:var(--vc-r-xl); overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(111,147,209,.55), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(41,87,164,.60), transparent 55%),
    linear-gradient(160deg,#123465,#0d264f 60%,#081a3a);
  box-shadow:0 30px 70px rgba(22,61,122,.28);
}
.vc-scene-lines{
  position:absolute; inset:0; opacity:.5;
  background-image:repeating-linear-gradient(115deg,
    rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px,
    transparent 1px, transparent 90px);
}
.vc-scene-orb{
  position:absolute; width:340px; height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(111,147,209,.9), rgba(111,147,209,0) 70%);
  top:-90px; right:60px; filter:blur(4px); animation:vcFloat1 14s ease-in-out infinite;
}
.vc-hero-content{position:relative; z-index:3; padding:64px 56px 52px; max-width:760px;}
.vc-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#eaf1fb; font-size:13px; font-weight:500; padding:7px 16px;
  border-radius:24px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  margin-bottom:20px;
}
.vc-pill .vc-icon-svg{width:15px; height:15px; color:var(--vc-sky);}
.vc-hero h1{
  font-family:var(--vc-display); font-weight:800; letter-spacing:-1.5px;
  font-size:clamp(32px,5.4vw,58px); line-height:1.05; color:#fff; margin:0 0 20px;
}
.vc-hero h1 .vc-accent{
  background:linear-gradient(120deg,#fff 10%, var(--vc-pale) 50%, var(--vc-sky) 95%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.vc-hero-sub{font-size:16px; color:#dce6f7; max-width:560px; line-height:1.7; margin:0 0 30px;}
.vc-hero-actions{display:flex; gap:14px; flex-wrap:wrap;}
/* Marquee of VAT acronyms */
.vc-marquee{
  position:relative; z-index:3; border-top:1px solid rgba(255,255,255,.12);
  overflow:hidden; padding:14px 0; background:rgba(255,255,255,.04);
}
.vc-marquee-track{display:flex; gap:28px; white-space:nowrap; animation:vcMarquee 30s linear infinite; width:max-content;}
.vc-marquee-track span{font-family:var(--vc-mono); font-size:13px; color:#a9c4ef; letter-spacing:.03em;}
@keyframes vcMarquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}
/* Inner-page banner - the hero treatment applied to every non-home page */
.vc-page-hero{
  position:relative; margin:28px 32px 0; border-radius:var(--vc-r-xl); overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(111,147,209,.5), transparent 55%),
    linear-gradient(160deg,#123465,#0d264f 60%,#081a3a);
  box-shadow:0 24px 56px rgba(22,61,122,.24);
}
.vc-page-hero .vc-hero-content{padding:52px 56px;}
/* The global h1 rule paints headings navy. On this dark banner that is
   navy-on-navy and effectively unreadable, so the colour is reset here. */
.vc-page-hero h1{
  font-size:clamp(28px,4vw,42px);
  color:#fff;
  margin:0 0 10px;
  letter-spacing:-.02em;
}
.vc-page-hero .vc-hero-content > *{position:relative; z-index:3;}
.vc-breadcrumb{font-size:13px; color:#a9c4ef; margin:0;}
.vc-breadcrumb a{color:#cfdcf3;}
.vc-breadcrumb a:hover{color:#fff;}
/* ============================================================
   8. CARD SYSTEMS
   ============================================================ */
.vc-expense-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; max-width:var(--vc-wrap); margin:0 auto;}
.vc-expense-card{
  background:#fff; border:1px solid var(--vc-brd); border-radius:var(--vc-r-md);
  padding:22px 14px; text-align:center;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vc-expense-card:hover{transform:translateY(-4px); border-color:var(--vc-sky); box-shadow:0 14px 28px rgba(41,87,164,.12);}
.vc-expense-card .vc-ic{
  width:42px; height:42px; border-radius:11px; background:var(--vc-pale);
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
}
.vc-expense-card .vc-ic .vc-icon-svg{color:var(--vc-navy); width:20px; height:20px;}
.vc-expense-card:hover span{color:var(--vc-blue);}
.vc-expense-card span{font-size:12.5px; font-weight:600; color:var(--vc-navy); line-height:1.4; display:block;}
.vc-highlight-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; max-width:var(--vc-wrap); margin:0 auto;}
.vc-highlight-card{
  background:#fff; border:1px solid var(--vc-brd); border-radius:18px;
  padding:26px 22px; box-shadow:var(--vc-shadow-card);
  transition:transform .2s ease, border-color .2s ease;
}
.vc-highlight-card:hover{transform:translateY(-4px); border-color:var(--vc-sky);}
.vc-highlight-card .vc-icon{
  width:38px; height:38px; border-radius:var(--vc-r-sm); background:var(--vc-pale);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.vc-highlight-card .vc-icon .vc-icon-svg{color:var(--vc-navy); width:19px; height:19px;}
.vc-highlight-card h3{font-size:15.5px; font-weight:700; color:var(--vc-navy); margin:0 0 8px; line-height:1.3;}
.vc-highlight-card p{font-size:13.5px; color:var(--vc-muted); line-height:1.6; margin:0;}
.vc-service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto;}
.vc-service-card{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid var(--vc-brd); border-radius:20px; padding:32px;
  box-shadow:var(--vc-shadow-card);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vc-service-card:hover{transform:translateY(-6px); border-color:var(--vc-sky); box-shadow:0 20px 45px rgba(41,87,164,.18);}
.vc-service-card::before{
  content:''; position:absolute; top:-60px; right:-60px; width:150px; height:150px;
  border-radius:50%; background:radial-gradient(circle, rgba(111,147,209,.14), transparent 70%);
}
.vc-service-icon{
  width:50px; height:50px; border-radius:13px;
  background:linear-gradient(135deg, var(--vc-sky), var(--vc-blue));
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  box-shadow:0 8px 22px rgba(41,87,164,.35);
}
.vc-service-icon .vc-icon-svg{width:23px; height:23px; color:#fff;}
.vc-service-card h3{font-size:18px; font-weight:700; color:var(--vc-navy); margin:0 0 12px;}
.vc-service-card p{font-size:14.5px; color:var(--vc-muted); line-height:1.7; margin:0 0 18px;}
.vc-service-link{
  font-size:13.5px; font-weight:600; color:var(--vc-blue);
  display:inline-flex; align-items:center; gap:5px; position:relative; z-index:1;
}
.vc-service-link .vc-icon-svg{width:15px; height:15px; transition:transform .15s ease;}
.vc-service-card:hover .vc-service-link .vc-icon-svg{transform:translateX(4px);}
.vc-blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:var(--vc-wrap); margin:0 auto;}
.vc-blog-card{
  background:#fff; border:1px solid var(--vc-brd); border-radius:18px; overflow:hidden;
  box-shadow:var(--vc-shadow-card); display:block;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vc-blog-card:hover{transform:translateY(-5px); border-color:var(--vc-sky); box-shadow:var(--vc-shadow-lift);}
.vc-blog-card img{width:100%; height:170px; object-fit:cover; display:block;}
.vc-blog-card .vc-bc-body{padding:20px;}
.vc-blog-card h4{font-size:15px; font-weight:700; color:var(--vc-navy); line-height:1.4; margin:0 0 10px;}
.vc-blog-card p{font-size:13px; color:var(--vc-muted); line-height:1.6; margin:0 0 12px;}
.vc-blog-card .vc-rm{font-size:12.5px; font-weight:600; color:var(--vc-blue);}
.vc-blog-more{display:flex; justify-content:center; margin-top:36px;}
.vc-network-panel{
  max-width:1000px; margin:0 auto; padding:44px; border-radius:var(--vc-r-lg);
  background:var(--vc-paler); border:1px solid var(--vc-brd); text-align:center; overflow:hidden;
}
.vc-network-panel img{max-width:420px; margin:0 auto; opacity:.85;}
.vc-testimonial{max-width:720px; margin:0 auto; text-align:center; padding:20px 44px;}
.vc-avatar-ring{
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
  background:linear-gradient(135deg, var(--vc-sky), var(--vc-blue));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--vc-display); font-weight:700; color:#fff; font-size:20px;
  box-shadow:var(--vc-shadow-btn);
}
.vc-testimonial blockquote{
  border:none; background:none; padding:0; margin:0; border-radius:0;
}
.vc-testimonial p{font-size:19px; color:var(--vc-navy); font-weight:500; line-height:1.6; margin:0 0 16px;}
.vc-testimonial .vc-who{font-size:14px; color:var(--vc-muted);}
.vc-testimonial .vc-who a{color:var(--vc-blue); font-weight:600;}
.vc-cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg, var(--vc-navy), var(--vc-blue) 60%, var(--vc-sky));
  border-radius:var(--vc-r-xl); padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  max-width:1120px; margin:0 auto; flex-wrap:wrap;
  box-shadow:0 30px 60px rgba(22,61,122,.3);
}
.vc-cta-band::after{
  content:''; position:absolute; top:-80px; right:-80px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
}
.vc-cta-band h2{color:#fff; font-size:25px; font-weight:800; margin:0 0 8px;}
.vc-cta-band p{color:var(--vc-pale); font-size:14.5px; margin:0;}
.vc-cta-band .vc-cta-btn{
  font-family:var(--vc-body);
  position:relative; z-index:1; background:#fff !important; color:var(--vc-navy) !important;
  border:none; border-radius:12px; padding:14px 26px !important;
  font-size:15px; font-weight:700; white-space:nowrap; box-shadow:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vc-cta-band .vc-cta-btn:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(22,61,122,.25);}
/* ============================================================
   10. FOOTER
   ============================================================ */
/* Was #main-footer.vc-footer. The standalone theme renders
   <footer id="colophon" class="vc-footer">, so that selector matched
   nothing and the footer had NO padding at all: on a phone the text ran
   to the very edge of the screen and looked cropped. Class-based now, so
   it cannot be broken by an id rename again. */
.vc-footer{
  background:var(--vc-paler); border-top:1px solid var(--vc-brd);
  padding:56px 32px 28px; position:relative; z-index:2;
}
.vc-footer-top{
  display:grid; grid-template-columns:1.1fr 1.2fr 1fr 1.3fr; gap:36px;
  max-width:var(--vc-wrap); margin:0 auto 36px;
}
.vc-footer-brand img{height:44px; width:auto; margin-bottom:16px;}
.vc-footer-brand p{font-size:13.5px; color:var(--vc-muted); line-height:1.7; margin:0 0 6px; max-width:280px;}
.vc-footer-col h5{
  font-size:13px; font-weight:700; color:var(--vc-navy);
  text-transform:uppercase; letter-spacing:.05em; margin:0 0 16px;
}
.vc-footer-col ul{margin:0; padding:0; list-style:none;}
.vc-footer-col li{margin:0;}
.vc-footer-col a{display:block; font-size:13.5px; color:var(--vc-muted); margin-bottom:9px; transition:color .15s ease;}
.vc-footer-col a:hover{color:var(--vc-blue);}
.vc-footer-col p{font-size:13.5px; color:var(--vc-muted); line-height:1.7; margin:0 0 4px;}
.vc-footer-col p a{display:inline; color:var(--vc-blue);}
.vc-footer-countries{
  display:flex; flex-wrap:wrap; gap:6px 10px; max-width:var(--vc-wrap);
  margin:0 auto 28px; padding-top:20px; border-top:1px solid var(--vc-brd);
}
.vc-footer-countries a{
  font-size:12.5px; color:var(--vc-blue); background:#fff;
  border:1px solid var(--vc-brd); border-radius:14px; padding:5px 11px;
  transition:border-color .15s ease, background .15s ease;
}
.vc-footer-countries a:hover{border-color:var(--vc-sky); background:var(--vc-pale);}
.vc-footer-countries .vc-countries-label{
  width:100%; font-size:13px; font-weight:700;
  color:var(--vc-navy); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
}
.vc-footer-bottom{
  text-align:center; font-size:12.5px; color:var(--vc-muted);
  padding-top:20px; border-top:1px solid var(--vc-brd);
  max-width:var(--vc-wrap); margin:0 auto;
}
.vc-footer-bottom a{color:var(--vc-blue);}
/* ============================================================
   11. RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .vc-expense-grid{grid-template-columns:repeat(3,1fr);}
  .vc-footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:980px){
  .vc-nav-toggle{display:flex;}
  #main-header.vc-nav{padding:12px 20px;}
  .vc-nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--vc-brd);
    box-shadow:0 18px 40px rgba(41,87,164,.16);
    padding:12px 20px 20px; max-height:calc(100vh - 90px); overflow-y:auto;
  }
  .vc-nav-links.is-open{display:flex;}
  .vc-nav-links > li > a,
  .vc-nav-links > a{padding:13px 4px; border-bottom:1px solid var(--vc-brd); font-size:15px; display:block;}
  .vc-nav-links ul.sub-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; border-radius:0;
    padding:0 0 8px 14px; min-width:0;
  }
  .vc-nav-links ul.sub-menu a{padding:9px 4px;}
  .vc-nav-links .vc-btn-primary{margin-top:14px; text-align:center; display:block;}
  .vc-highlight-grid{grid-template-columns:repeat(2,1fr);}
  .vc-service-grid,.vc-blog-grid{grid-template-columns:1fr;}
  .vc-cta-band{flex-direction:column; text-align:center; padding:40px 28px;}
  .vc-hero{margin:20px 20px 0;}
  .vc-hero-content{padding:44px 28px 36px;}
  .vc-page-hero{margin:20px 20px 0;}
  .vc-page-hero .vc-hero-content{padding:38px 28px;}
  .vc-section{padding:64px 20px;}
  .vc-section--tight{padding-top:0;}
  .vc-util-bar{padding:7px 20px; gap:16px; justify-content:center;}
  .vc-network-panel{padding:28px;}
  .vc-testimonial{padding:12px 8px;}
  .vc-orb{display:none;}
}
@media (max-width:600px){
  .vc-expense-grid{grid-template-columns:repeat(2,1fr);}
  .vc-highlight-grid{grid-template-columns:1fr;}
  .vc-footer-top{grid-template-columns:1fr; gap:28px;}
  /* The <br> in the hero headline is a desktop line break. On a narrow
     screen it strands the em-dash on a line of its own. */
  .vc-hero h1{letter-spacing:-.5px;}
  .vc-hero h1 br{display:none;}
  /* Buttons carry white-space:nowrap for the desktop nav. At this width
     the labels are longer than the viewport, so let them wrap. */
  .vc-hero-actions{flex-direction:column; align-items:stretch;}
  .vc-hero-actions .vc-btn-primary,
  .vc-hero-actions .vc-btn-ghost,
  .vc-cta-band .vc-cta-btn{
    text-align:center; width:100%;
    white-space:normal !important;
    line-height:1.4;
  }
  .vc-section-head h2{font-size:24px;}
  .vc-cta-band h2{font-size:22px;}
}
/* ============================================================
   12. PRINT
   ============================================================ */
@media print{
  .vc-util-bar,#main-header,.vc-nav-toggle,.vc-orb,
  .vc-marquee,.vc-cta-band,.vc-footer .vc-footer-countries{display:none !important;}
  body{font-size:11pt; color:#000;}
  .vc-hero,.vc-page-hero{background:none !important; box-shadow:none !important; color:#000;}
  .vc-hero h1,.vc-page-hero h1{color:#000 !important;}
}
/* ============================================================
   13. BLOG TEMPLATES
   Archive, single, search and 404.
   ============================================================ */

/* --- Cards: extra bits the archive uses --- */
.vc-card-date{
  display:block; font-family:var(--vc-mono); font-size:11.5px;
  color:var(--vc-muted); letter-spacing:.02em; margin-bottom:8px;
}
.vc-card-title{
  font-size:15px; font-weight:700; color:var(--vc-navy);
  line-height:1.4; margin:0 0 10px;
}
.vc-blog-card-wrap{display:block;}
.vc-archive-desc{color:var(--vc-muted); font-size:15.5px; line-height:1.7;}
/* --- Single article --- */
.vc-article{padding:56px 32px 0; position:relative; z-index:2;}
/* One measure for the whole article. 720px at 17px is roughly 68
   characters per line, which is the comfortable reading range, and it
   keeps the figure, body, table, tags and prev/next on a single left
   edge. Constraining only the body text left everything else wider
   and the column read as misaligned. */
.vc-article-inner{max-width:720px; margin:0 auto;}
.vc-article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:13px; color:var(--vc-muted); margin-bottom:24px;
}
.vc-article-meta .vc-card-date{margin:0; display:inline;}
.vc-article-cats a{color:var(--vc-blue); font-weight:600;}
.vc-meta-sep{color:var(--vc-brd);}
.vc-article-figure{margin:0 0 36px;}
.vc-article-figure img{
  width:100%; height:auto; border-radius:var(--vc-r-lg);
  box-shadow:0 18px 40px rgba(41,87,164,.14);
}
/* 68ch keeps line length in the comfortable reading range. Divi's
   default full-bleed body text runs far wider than that on desktop. */
.vc-article-body{font-size:17px; line-height:1.75; color:var(--vc-ink);}
.vc-article-body > * + *{margin-top:1.25em;}
.vc-article-body h2{font-size:26px; margin-top:1.9em;}
.vc-article-body h3{font-size:20px; margin-top:1.6em;}
.vc-article-body ul,.vc-article-body ol{padding-left:1.3em;}
.vc-article-body li{margin-bottom:.5em;}
.vc-article-body img{border-radius:var(--vc-r-md); height:auto;}
.vc-article-body a{text-decoration:underline; text-underline-offset:2px;}
.vc-article-tags{margin-top:40px; display:flex; flex-wrap:wrap; gap:8px;}
.vc-article-tags a{
  font-size:12.5px; color:var(--vc-blue); background:var(--vc-paler);
  border:1px solid var(--vc-brd); border-radius:14px; padding:5px 12px;
}
.vc-article-tags a:hover{border-color:var(--vc-sky); background:var(--vc-pale);}
/* --- Prev / next --- */
.vc-post-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
  margin:48px 0 0; padding-top:32px; border-top:1px solid var(--vc-brd);
}
.vc-post-nav-item{
  display:block; padding:18px 20px; border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-md); background:#fff;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.vc-post-nav-item:hover{border-color:var(--vc-sky); transform:translateY(-2px); box-shadow:var(--vc-shadow-card);}
.vc-post-nav-next{text-align:right;}
/* Only one neighbour? Push it to its own side rather than leaving a gap. */
.vc-post-nav-next:only-child{grid-column:2;}
.vc-post-nav-label{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vc-blue); margin-bottom:6px;
}
.vc-post-nav-title{display:block; font-size:14.5px; font-weight:600; color:var(--vc-navy); line-height:1.4;}
.vc-page-links{margin-top:32px; font-size:14px; color:var(--vc-muted);}
/* --- Pagination --- */
.vc-pagination,.navigation.pagination{
  max-width:var(--vc-wrap); margin:44px auto 0; padding-top:28px;
  border-top:1px solid var(--vc-brd);
}
.vc-pagination .nav-links,.navigation.pagination .nav-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.vc-pagination .page-numbers,.navigation.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px;
  border:1px solid var(--vc-brd); border-radius:var(--vc-r-sm);
  background:#fff; color:var(--vc-blue); font-size:14px; font-weight:600;
  transition:border-color .15s ease, background .15s ease;
}
.vc-pagination .page-numbers:hover,.navigation.pagination .page-numbers:hover{
  border-color:var(--vc-sky); background:var(--vc-paler);
}
.vc-pagination .page-numbers.current,.navigation.pagination .page-numbers.current{
  background:var(--vc-navy); border-color:var(--vc-navy); color:#fff;
}
.vc-pagination .page-numbers.dots{border-color:transparent; background:none;}
/* --- Search --- */
.vc-search-bar{max-width:760px; margin:0 auto 44px; text-align:center;}
.vc-search-form{display:flex; gap:10px; margin-bottom:14px;}
.vc-search-form input[type="search"]{
  flex:1; min-width:0;
  background:#fff !important; border:1px solid var(--vc-brd) !important;
  border-radius:var(--vc-r-sm) !important; padding:13px 16px !important;
  font-size:15px !important; font-family:var(--vc-body) !important;
}
.vc-search-form .vc-btn-primary{border:none;}
.vc-search-count{font-size:14px; color:var(--vc-muted); margin:0;}
.vc-search-form--inline{max-width:460px; margin:24px auto 0;}
/* --- Empty states + 404 --- */
.vc-empty{max-width:620px; margin:0 auto; text-align:center; padding:48px 24px;}
.vc-empty-icon{
  width:64px; height:64px; border-radius:18px; margin:0 auto 22px;
  background:var(--vc-pale); display:flex; align-items:center; justify-content:center;
}
.vc-empty-icon .vc-icon-svg{width:28px; height:28px; color:var(--vc-navy);}
.vc-empty h1,.vc-empty h2{font-size:26px; color:var(--vc-navy); margin:0 0 12px;}
.vc-empty p{color:var(--vc-muted); font-size:15.5px; line-height:1.7; margin:0 0 26px;}
.vc-empty-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.vc-404-links{margin-top:16px;}
@media (max-width:980px){
  .vc-article{padding:40px 20px 0;}
  .vc-article-body{font-size:16px;}
  .vc-post-nav{grid-template-columns:1fr;}
  .vc-post-nav-next,.vc-post-nav-next:only-child{grid-column:1; text-align:left;}
}
@media (max-width:600px){
  .vc-search-form{flex-direction:column;}
  .vc-search-form .vc-btn-primary{width:100%; white-space:normal !important;}
  .vc-empty-actions{flex-direction:column;}
  .vc-empty-actions .vc-btn-primary,
  .vc-empty-actions .vc-btn-ghost{width:100%; text-align:center; white-space:normal !important;}
  .vc-article-figure img{border-radius:var(--vc-r-md);}
}

/* ============================================================
   14. PAGE SECTION COMPONENTS
   The building blocks every page is composed from. Adding a page
   means composing these, not writing new CSS.
   ============================================================ */

/* --- Prose: the default rendering of editor content --- */
.vc-prose{max-width:760px; margin:0 auto;}
.vc-prose--wide{max-width:960px;}
.vc-prose > * + *{margin-top:1.25em;}
.vc-prose h2{font-size:clamp(22px,2.6vw,28px); color:var(--vc-navy); margin-top:1.8em;}
.vc-prose h3{font-size:20px; color:var(--vc-navy); margin-top:1.5em;}
.vc-prose p{font-size:17px; line-height:1.75; color:var(--vc-ink);}
.vc-prose ul,.vc-prose ol{padding-left:1.3em;}
.vc-prose li{margin-bottom:.5em; line-height:1.7;}
.vc-prose a{color:var(--vc-blue); text-decoration:underline; text-underline-offset:2px;}
.vc-prose img{border-radius:var(--vc-r-md); height:auto;}
.vc-prose blockquote{
  border-left:4px solid var(--vc-sky); background:var(--vc-paler);
  padding:20px 24px; border-radius:0 var(--vc-r-md) var(--vc-r-md) 0; margin:1.6em 0;
}
.vc-prose table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--vc-brd); border-radius:var(--vc-r-md);
  overflow:hidden; font-size:14.5px;
}
.vc-prose thead th{
  background:var(--vc-navy); color:#fff; font-family:var(--vc-display);
  font-weight:600; padding:13px 16px; text-align:left;
}
.vc-prose td{padding:11px 16px; border-top:1px solid var(--vc-brd);}
.vc-prose tbody tr:nth-child(even) td{background:var(--vc-paler);}

/* --- Acronym strip: "Including recovery of" --- */
.vc-acronyms{
  max-width:1000px; margin:0 auto; padding:26px 32px;
  background:var(--vc-paler); border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-lg); text-align:center;
}
.vc-acronyms p{
  font-family:var(--vc-mono); font-size:13px; line-height:2;
  color:var(--vc-blue); margin:0; word-spacing:.15em;
}

/* --- Feature rows: the alternating image + text blocks --- */
.vc-feature{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:center;
  max-width:var(--vc-wrap); margin:0 auto 64px;
}
.vc-feature:nth-child(even){direction:rtl;}
.vc-feature:nth-child(even) > *{direction:ltr;}
.vc-feature-media img{
  width:100%; height:auto; border-radius:var(--vc-r-lg);
  box-shadow:0 18px 40px rgba(41,87,164,.14);
}
.vc-feature-body .vc-eyebrow{margin-bottom:10px;}
.vc-feature-body h3{font-size:22px; color:var(--vc-navy); margin:0 0 12px; line-height:1.3;}
.vc-feature-body p{font-size:15.5px; color:var(--vc-muted); line-height:1.75; margin:0 0 16px;}
.vc-feature-body .vc-service-link{font-size:14px;}

/* --- Two-column split (form + supporting list) --- */
.vc-split{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
  max-width:var(--vc-wrap); margin:0 auto; align-items:start;
}
.vc-checklist{list-style:none; margin:0; padding:0;}
.vc-checklist li{
  position:relative; padding-left:30px; margin-bottom:16px;
  font-size:15.5px; line-height:1.6; color:var(--vc-ink);
}
.vc-checklist li .vc-icon-svg{
  position:absolute; left:0; top:4px; width:19px; height:19px; color:var(--vc-blue);
}
.vc-checklist h3{font-size:17px; color:var(--vc-navy); margin:28px 0 16px;}
.vc-checklist h3:first-child{margin-top:0;}

/* --- Forms --- */
.vc-form{
  background:var(--vc-paler); border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-lg); padding:32px;
}
.vc-field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.vc-field{margin-bottom:16px;}
.vc-field label{
  display:block; font-size:13px; font-weight:600; color:var(--vc-navy);
  margin-bottom:6px; letter-spacing:.01em;
}
.vc-field .vc-req{color:#c0392b;}
.vc-form input[type="text"],
.vc-form input[type="email"],
.vc-form input[type="tel"],
.vc-form select,
.vc-form textarea{
  width:100%; font-family:var(--vc-body); font-size:15px;
  background:#fff; border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-sm); padding:12px 14px; color:var(--vc-ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.vc-form textarea{min-height:130px; resize:vertical;}
.vc-form input:focus,.vc-form select:focus,.vc-form textarea:focus{
  border-color:var(--vc-sky); box-shadow:0 0 0 3px rgba(111,147,209,.25); outline:none;
}
.vc-form .vc-has-error input,
.vc-form .vc-has-error select,
.vc-form .vc-has-error textarea{border-color:#c0392b;}
.vc-field-error{display:block; font-size:12.5px; color:#c0392b; margin-top:5px;}
/* Honeypot. Off-screen rather than display:none, which some bots detect. */
.vc-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
.vc-form-message{
  margin-top:18px; padding:14px 16px; border-radius:var(--vc-r-sm); font-size:14.5px;
}
.vc-form-message.is-success{background:#e6f5ec; color:#1e7a4d; border:1px solid #bfe4cf;}
.vc-form-message.is-error{background:#fdecea; color:#c0392b; border:1px solid #f5c6c0;}
.vc-form button[type="submit"]{font-family:var(--vc-body); border:none; width:100%; margin-top:6px;}
.vc-form button[aria-busy="true"]{opacity:.7; pointer-events:none;}

/* --- Logo strip --- */
.vc-logos{
  display:flex; flex-wrap:wrap; gap:36px; align-items:center; justify-content:center;
  max-width:var(--vc-wrap); margin:0 auto;
}
.vc-logos img{max-height:44px; width:auto; opacity:.55; filter:grayscale(1); transition:opacity .2s ease, filter .2s ease;}
.vc-logos img:hover{opacity:1; filter:none;}

/* --- Country chip grid (Our Network) --- */
.vc-country-grid{
  display:flex; flex-wrap:wrap; gap:8px; max-width:var(--vc-wrap);
  margin:0 auto; justify-content:center;
}
.vc-country-grid a{
  font-size:13.5px; color:var(--vc-blue); background:#fff;
  border:1px solid var(--vc-brd); border-radius:16px; padding:7px 15px;
  transition:border-color .15s ease, background .15s ease;
}
.vc-country-grid a:hover{border-color:var(--vc-sky); background:var(--vc-pale);}

/* --- Accordion (FAQ) --- */
.vc-accordion{max-width:820px; margin:0 auto;}
.vc-accordion details{
  background:#fff; border:1px solid var(--vc-brd); border-radius:var(--vc-r-md);
  margin-bottom:12px; box-shadow:var(--vc-shadow-card); overflow:hidden;
}
.vc-accordion summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font-size:16px; font-weight:600; color:var(--vc-navy);
}
.vc-accordion summary::-webkit-details-marker{display:none;}
.vc-accordion summary::after{
  content:''; position:absolute; right:24px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--vc-blue); border-bottom:2px solid var(--vc-blue);
  transform:rotate(45deg); transition:transform .2s ease;
}
.vc-accordion details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.vc-accordion .vc-acc-body{padding:0 24px 22px; font-size:15.5px; line-height:1.75; color:var(--vc-muted);}

@media (max-width:980px){
  .vc-feature{grid-template-columns:1fr; gap:24px; margin-bottom:44px;}
  .vc-feature:nth-child(even){direction:ltr;}
  .vc-split{grid-template-columns:1fr; gap:32px;}
  .vc-acronyms{padding:20px; border-radius:var(--vc-r-md);}
}
@media (max-width:600px){
  .vc-field-row{grid-template-columns:1fr; gap:0;}
  .vc-form{padding:22px;}
  .vc-logos{gap:24px;}
}

/* ============================================================
   15. HOMEPAGE ADDITIONS
   ============================================================ */

/* Hero with the site's own photograph behind the gradient. */
.vc-hero--photo{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* The six expense icons are the brand's own artwork rather than an icon
   font, so the tile is sized for a raster image and given a light
   background the grey line-art reads against. */
.vc-ic--image{
  width:64px; height:64px; border-radius:14px;
  background:#fff; border:1px solid var(--vc-brd);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px; padding:8px;
}
.vc-ic--image img{max-width:100%; height:auto; display:block;}
.vc-expense-card:hover .vc-ic--image{border-color:var(--vc-sky);}

/* Acronym panel now carries a heading and two lines. */
.vc-acronyms h3{
  font-size:13px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--vc-navy);
  margin:0 0 14px;
}
.vc-acronyms p + p{margin-top:10px; padding-top:10px; border-top:1px solid var(--vc-brd);}

/* ============================================================
   16. RULES RECOVERED AFTER THE DIVI STRIP
   These selectors originally shared a rule block with Divi ones and were
   removed with them. Restored standalone.
   ============================================================ */

.entry-title{
  font-family:var(--vc-display); font-weight:800;
  color:var(--vc-navy); line-height:1.25; letter-spacing:-.02em;
}

.more-link,
a.more-link{
  display:inline-block; font-weight:600; color:var(--vc-blue); font-size:14px;
}

/* Form controls outside .vc-form (comment forms, search widgets, plugins)
   still need to match the design system. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea{
  font-family:var(--vc-body);
  font-size:15px;
  color:var(--vc-ink);
  background:#fff;
  border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-sm);
  padding:12px 14px;
  max-width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,
select:focus,
textarea:focus{
  border-color:var(--vc-sky);
  box-shadow:0 0 0 3px rgba(111,147,209,.25);
  outline:none;
}
::placeholder{color:var(--vc-muted); opacity:.8;}

/* Screen-reader text, in case a plugin or core template emits it. */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================
   17. CLAIMS SECTION (two columns)
   Matches the live homepage: statements on the left, network map
   on the right, rather than the two split apart.
   ============================================================ */
.vc-claims{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px;
  max-width:var(--vc-wrap); margin:0 auto; align-items:center;
}
.vc-claim{display:flex; gap:16px; margin-bottom:30px;}
.vc-claim .vc-icon{
  width:40px; height:40px; flex-shrink:0; border-radius:var(--vc-r-sm);
  background:var(--vc-pale); display:flex; align-items:center; justify-content:center;
}
.vc-claim .vc-icon .vc-icon-svg{width:19px; height:19px; color:var(--vc-navy);}
.vc-claim h3{
  font-size:19px; font-weight:700; color:var(--vc-navy);
  margin:0 0 8px; line-height:1.3;
}
.vc-claim p{font-size:15px; line-height:1.7; color:var(--vc-muted); margin:0;}
/* The inline links are part of the site's internal linking, so they are
   visibly links rather than styled flat. */
.vc-claim p a{color:var(--vc-blue); text-decoration:underline; text-underline-offset:2px; font-weight:500;}
.vc-claim p a:hover{color:var(--vc-navy);}
.vc-claims-action{margin-top:34px;}
.vc-claims-media img{width:100%; height:auto; display:block;}

/* The inner-page banner uses the same photo treatment as the hero. */
.vc-page-hero.vc-hero--photo{
  background-size:cover; background-position:center; background-repeat:no-repeat;
}

@media (max-width:980px){
  .vc-claims{grid-template-columns:1fr; gap:32px;}
  .vc-claims-media{order:-1;}
  .vc-claims-media img{max-width:520px; margin:0 auto;}
}
@media (max-width:600px){
  .vc-claim{gap:12px; margin-bottom:24px;}
  .vc-claims-action .vc-btn-ghost{width:100%; white-space:normal !important;}
}

/* ============================================================
   18. CLASSES REFERENCED BY TEMPLATES BUT PREVIOUSLY UNSTYLED
   Caught by the class-coverage check rather than by noticing
   them on a live page.
   ============================================================ */

/* The left column of the claims block. Without a rule it had no width
   constraint, so on wide screens the paragraphs ran the full page width
   instead of sitting in their column. */
.vc-claims-body{min-width:0;}

/* The previous-article link. Its .vc-post-nav-next counterpart was styled
   and this one was not, so the pair sat inconsistently. */
.vc-post-nav-prev{text-align:left;}

/* ============================================================
   19. LEGACY CONTENT SAFETY
   ============================================================ */

/* Inherited content carries inline colours chosen for backgrounds that no
   longer exist, which is how a "Download" heading ends up white on white.
   Inside .vc-prose the page background is always light, so force a legible
   colour and beat the inline style. */
.vc-prose h1,.vc-prose h2,.vc-prose h3,
.vc-prose h4,.vc-prose h5,.vc-prose h6{
  color:var(--vc-navy) !important;
}
/* Do NOT include span here. Inherited headings often wrap part of their
   text in a <span> ("EUR Millions <span>& Counting</span>"), and forcing
   spans to body ink split single headings into two colours - navy for the
   heading, near-black for the span. Spans inherit instead. */
.vc-prose p,.vc-prose li,.vc-prose td{
  color:var(--vc-ink) !important;
}
.vc-prose span,
.vc-prose strong,
.vc-prose em,
.vc-prose b{color:inherit !important;}
.vc-prose a{color:var(--vc-blue) !important;}
/* Inherited light-text classes from the old theme, now on a light page. */
.vc-prose .white,
.vc-prose [style*="color:#fff"],
.vc-prose [style*="color: #fff"],
.vc-prose [style*="color:#ffffff"],
.vc-prose [style*="color: #ffffff"]{color:var(--vc-navy) !important;}

/* Responsive video wrapper for [vimeo_video]. */
.vc-video{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:var(--vc-r-md); margin:0 0 24px;}
.vc-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* [footer_social] */
.vc-social{display:flex; flex-wrap:wrap; gap:14px; align-items:center; list-style:none; margin:0; padding:0;}
.vc-social-label{font-weight:600; color:var(--vc-navy); font-size:13.5px;}
.vc-social a{font-size:13.5px; color:var(--vc-blue);}

/* [custom_subscribe_form] */
.vc-form--inline{display:flex; gap:12px; align-items:flex-end; padding:0; background:none; border:none;}
.vc-form--inline .vc-field{flex:1; margin-bottom:0;}
.vc-form--inline button[type="submit"]{width:auto; margin-top:0;}

/* ============================================================
   20. HEADER FIT
   The nav ran off the right edge between roughly 980px and 1400px:
   seven items plus a button did not fit, and the hamburger only
   appeared below 980px, so there was a band with no working nav.
   ============================================================ */
@media (max-width:1400px){
  .vc-nav-links{gap:18px; font-size:13.5px;}
  #main-header.vc-nav{padding:14px 24px;}
  .vc-nav-links li.vc-nav-cta > a{padding:10px 15px; font-size:13px;}
}
@media (max-width:1240px){
  .vc-nav-links{gap:13px; font-size:13px;}
  .vc-logo img{height:32px;}
  #main-header.vc-nav{padding:12px 18px;}
}
/* Below this the horizontal nav cannot fit honestly, so switch to the
   drawer rather than letting items disappear off the edge. */
@media (max-width:1120px){
  .vc-nav-toggle{display:flex;}
  .vc-nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--vc-brd);
    box-shadow:0 18px 40px rgba(41,87,164,.16);
    padding:12px 20px 20px; max-height:calc(100vh - 90px); overflow-y:auto;
    font-size:15px;
  }
  .vc-nav-links.is-open{display:flex;}
  .vc-nav-links > li > a{padding:13px 4px; border-bottom:1px solid var(--vc-brd); display:block;}
  .vc-nav-links li.vc-nav-cta{margin-top:14px;}
  .vc-nav-links li.vc-nav-cta > a{display:block; text-align:center; font-size:15px; padding:13px 20px;}
}

/* Nothing may push the page wider than the viewport. The header running off
   the right edge was visible as a horizontal scrollbar on every page. */
html,body{max-width:100%; overflow-x:hidden;}
#main-header.vc-nav{max-width:100%;}

/* ============================================================
   21. LEGACY CONTENT SIZING
   Inherited content carries inline font sizes chosen for Divi's
   module CSS, so an "EUR Millions" heading arrives at 90px+ and a
   page ends up with three competing headline scales.
   The page banner already provides the h1, so content headings
   step down from there.
   !important is needed to beat inline style attributes.
   ============================================================ */
.vc-prose h1{font-size:clamp(24px,3.2vw,32px) !important; line-height:1.25 !important;}
.vc-prose h2{font-size:clamp(21px,2.6vw,27px) !important; line-height:1.3 !important;}
.vc-prose h3{font-size:19px !important; line-height:1.35 !important;}
.vc-prose h4{font-size:17px !important;}
.vc-prose h5,.vc-prose h6{font-size:15px !important;}
.vc-prose h1,.vc-prose h2,.vc-prose h3{
  font-family:var(--vc-display) !important;
  letter-spacing:-.01em !important;
}
.vc-prose h4,.vc-prose h5,.vc-prose h6{font-family:var(--vc-body) !important;}
/* Body copy inherits odd sizes and centring the same way. */
.vc-prose p,.vc-prose li{font-size:17px !important; line-height:1.75 !important;}
.vc-prose p[style*="text-align: center"],
.vc-prose p[style*="text-align:center"]{text-align:left !important;}

/* Legacy tables used for country lists render as ragged columns because
   their Divi sizing is gone. Give them an even, readable grid. */
.vc-prose table td{vertical-align:top; font-size:15px !important;}
.vc-prose table{table-layout:fixed;}

/* Inline images inside content (the small grey icons on Why Us) sat
   unaligned with no spacing. */
.vc-prose p > img{margin:8px 0;}

/* ============================================================
   22. LEGACY FORMS INSIDE CONTENT
   Old form markup (Request a Call, download gates) arrives as raw
   HTML in the page with placeholder-only fields and its own widths,
   so inputs came out at inconsistent widths with the select wider
   than everything else.
   ============================================================ */
.vc-prose form{max-width:460px;}
.vc-prose form p{margin:0 0 14px !important;}
.vc-prose form input[type="text"],
.vc-prose form input[type="email"],
.vc-prose form input[type="tel"],
.vc-prose form select,
.vc-prose form textarea{
  width:100% !important;
  max-width:100% !important;
  display:block;
  font-size:15px !important;
}
.vc-prose form select{
  /* Native selects sit a couple of pixels taller than text inputs. */
  height:auto; padding:12px 14px !important;
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--vc-blue) 50%),
                   linear-gradient(135deg, var(--vc-blue) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:40px !important;
}
.vc-prose form input[type="submit"],
.vc-prose form button{
  width:auto !important;
  min-width:180px;
  margin-top:6px;
  text-transform:none;
  letter-spacing:0;
}
/* The old markup used placeholders instead of labels. Keep them legible
   rather than the near-invisible grey they arrived with. */
.vc-prose form ::placeholder{color:var(--vc-muted); opacity:1;}

/* ============================================================
   23. FORMS AND GRIDS INSIDE CONTENT
   ============================================================ */

/* A post grid rendered in place of a Divi blog module needs to escape the
   760px prose measure, or three cards get squeezed into a text column. */
.vc-prose .vc-blog-grid--content{
  max-width:none;
  width:calc(100vw - 64px);
  max-width:var(--vc-wrap);
  margin-left:50%;
  transform:translateX(-50%);
  margin-top:8px;
}
@media (max-width:980px){
  .vc-prose .vc-blog-grid--content{width:auto; margin-left:0; transform:none;}
}

/* Forms are CENTRED on the page.
   They previously inherited whatever text-align the surrounding content
   had, which pushed them right on some pages; the fix at the time pinned
   them hard left. They are now centred with auto margins on both sides,
   which is stable regardless of the surrounding alignment.
   Note the two are different things: the BLOCK is centred, the CONTENT
   inside stays left-aligned, because centred field labels are markedly
   harder to scan down a form. */
.vc-prose .vc-form,
.vc-prose form{
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
}
.vc-prose .vc-form *,
.vc-prose form *{text-align:left;}
.vc-prose .vc-form button[type="submit"],
.vc-prose form input[type="submit"]{text-align:center;}
/* Two-column rows need the full 620px; below that they stack anyway. */
.vc-prose .vc-form .vc-field-row{grid-template-columns:1fr 1fr;}
@media (max-width:600px){
  .vc-prose .vc-form .vc-field-row{grid-template-columns:1fr;}
}

/* Legacy content headings below h3 were rendering smaller than the body
   copy around them, which flattened the hierarchy on pages like Why Us
   where "WE ARE / WHERE YOU / NEED US" sat beneath much larger stats. */
.vc-prose h4{font-size:19px !important;}
.vc-prose h5{font-size:17px !important;}
.vc-prose h6{font-size:16px !important;}

/* Component links rendered inside prose must not inherit the prose
   underline. A whole article card is an <a>, so underlining links in
   content underlined every word of every card. */
.vc-prose .vc-blog-card,
.vc-prose .vc-blog-card *,
.vc-prose .vc-expense-card,
.vc-prose .vc-expense-card *,
.vc-prose .vc-btn-primary,
.vc-prose .vc-btn-ghost,
.vc-prose .vc-service-link,
.vc-prose .vc-rm{text-decoration:none !important;}
.vc-prose .vc-blog-card h3,
.vc-prose .vc-blog-card h4{color:var(--vc-navy) !important;}
.vc-prose .vc-blog-card p{color:var(--vc-muted) !important;}
.vc-prose .vc-card-date{color:var(--vc-muted) !important;}

/* ============================================================
   24. CARD IMAGES INSIDE CONTENT  (fixes the ragged VAT Pulse grid)
   ============================================================ */

/* .vc-prose img sets height:auto and sits later in this file with equal
   specificity to .vc-blog-card img, so it was overriding the card image
   height. Cards then grew to whatever their photo's natural height was:
   one card showed a 300px image, another showed almost nothing but a
   photo, and the row heights went ragged. Scoped explicitly here. */
.vc-prose .vc-blog-card img,
.vc-blog-grid .vc-blog-card img{
  width:100% !important;
  height:190px !important;
  object-fit:cover !important;
  border-radius:0 !important;
  margin:0 !important;
  display:block;
}

/* Cards fill their grid row so the bottoms line up regardless of how much
   text each one has, and the read-more sits at the foot of the card. */
.vc-blog-grid{align-items:stretch;}
.vc-blog-card{display:flex; flex-direction:column; height:100%;}
.vc-blog-card .vc-bc-body{display:flex; flex-direction:column; flex:1;}
.vc-blog-card .vc-rm{margin-top:auto; padding-top:6px;}
/* Long headlines must not push cards to different heights. */
.vc-blog-card h3,
.vc-blog-card h4,
.vc-blog-card .vc-card-title{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.vc-blog-card p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Section 25 removed: the theme no longer rewrites content icons. */

/* ============================================================
   26. FORM FIELD ALIGNMENT
   A <select> renders 2px taller than a text <input> at the same
   padding and font size, because the browser adds its own inner
   box. Side by side in a two-column row that reads as a wobble.
   Both are pinned to the same line-height so the computed height
   matches exactly.
   ============================================================ */
.vc-form input[type="text"],
.vc-form input[type="email"],
.vc-form input[type="tel"],
.vc-form input[type="url"],
.vc-form input[type="number"],
.vc-form select{
  line-height:1.4;
  height:47px;
}
.vc-form select{
  /* Remove the platform chrome so the arrow we draw is the only one. */
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--vc-blue) 50%),
    linear-gradient(135deg, var(--vc-blue) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
.vc-form textarea{line-height:1.6;}

/* The label-to-field gap and the row gap were the same 16px, so labels read
   as belonging to the field above rather than below. */
.vc-form .vc-field{margin-bottom:20px;}
.vc-form .vc-field label{margin-bottom:7px;}
.vc-form .vc-field-row{gap:16px 18px;}

/* ============================================================
   27. BODY COPY COLOUR
   Two greys were in use for the same job: --ink for checklists and
   prose, --muted for section intros and card text. Side by side on
   the contact page that reads as a mismatch.
   Rule: --ink for anything the visitor reads as content,
         --muted only for secondary text (dates, meta, captions).
   ============================================================ */
.vc-section-head p,
.vc-highlight-card p,
.vc-service-card p,
.vc-blog-card p,
.vc-feature-body p,
.vc-checklist li,
.vc-empty p{color:var(--vc-ink);}

.vc-card-date,
.vc-article-meta,
.vc-search-count,
.vc-footer-col p,
.vc-footer-bottom{color:var(--vc-muted);}

/* ============================================================
   28. MOBILE HEADER AND FOOTER
   ============================================================ */

/* The hamburger sat in the MIDDLE of the header, not the right.
   #main-header is a flex row with justify-content:space-between and THREE
   children: logo, button, and <nav>. Below 1120px the menu list inside
   <nav> is absolutely positioned, so <nav> collapses to zero width, but it
   is still a flex item. space-between therefore placed it at the right edge
   and pushed the button to the centre.
   An auto left margin claims the free space before space-between can
   distribute it, so the button sits hard right where it belongs. */
@media (max-width:1120px){
  .vc-nav-toggle{margin-left:auto;}
  #main-header.vc-nav > nav{width:0; flex:0 0 0;}
}

/* Footer padding on small screens. The 32px desktop inset is too much of a
   narrow viewport, but it must never reach zero or the text touches the
   edge of the screen. */
@media (max-width:600px){
  .vc-footer{padding:44px 20px 24px;}
  .vc-footer-top{gap:26px;}
  .vc-footer-countries{padding-top:18px; gap:6px 8px;}
  .vc-footer-countries a{font-size:12px; padding:5px 10px;}
  .vc-footer-bottom{padding-top:18px; line-height:1.7;}
}

/* Nothing in the footer may push wider than the viewport. Long unbroken
   strings such as email addresses are the usual culprit. */
.vc-footer,
.vc-footer-top,
.vc-footer-col{min-width:0;}
.vc-footer-col a,
.vc-footer-col p{overflow-wrap:anywhere;}

/* ============================================================
   29. SUB-MENU ITEM DESCRIPTIONS
   The title and its description were running together on one
   line: "Foreign VAT RecoveryMaximum refunds for cross-border
   business travel and activities".
   Any wrapper inside a sub-menu link is treated as the
   description and pushed onto its own line beneath the title,
   whichever element the label happens to use.
   ============================================================ */
.vc-nav-links ul.sub-menu a{
  display:block;
  line-height:1.4;
}
.vc-nav-links ul.sub-menu a > span,
.vc-nav-links ul.sub-menu a > small,
.vc-nav-links ul.sub-menu a > em,
.vc-nav-links ul.sub-menu a > i,
.vc-nav-links ul.sub-menu a > .vc-menu-desc,
.vc-nav-links > li > a > .vc-menu-desc{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  font-style:normal;
  font-weight:400;
  line-height:1.45;
  color:var(--vc-muted);
  white-space:normal;
}
/* The title is the text node before the description, so weight it here. */
.vc-nav-links ul.sub-menu a{font-weight:600; color:var(--vc-navy);}
.vc-nav-links ul.sub-menu a:hover{background:var(--vc-paler); color:var(--vc-navy);}
.vc-nav-links ul.sub-menu a:hover > span,
.vc-nav-links ul.sub-menu a:hover > .vc-menu-desc{color:var(--vc-blue);}

/* Wider dropdown so a two-line entry does not wrap awkwardly. */
.vc-nav-links ul.sub-menu{min-width:330px;}

@media (max-width:1120px){
  /* In the mobile drawer the same rules apply, with a little more room. */
  .vc-nav-links ul.sub-menu{min-width:0;}
  .vc-nav-links ul.sub-menu a{padding-top:11px; padding-bottom:11px;}
  .vc-nav-links ul.sub-menu a > span,
  .vc-nav-links ul.sub-menu a > .vc-menu-desc{font-size:13px;}
}

/* ============================================================
   30. EXPENSE GRIDS INSIDE PAGE CONTENT
   The service pages carry these as plain <ul> lists. They are
   rebuilt into the card grid by inc/expense-lists.php; these
   rules size the grid to the number of items and let it break
   out of the narrower prose measure.
   ============================================================ */
.vc-prose .vc-expense-grid--content{
  max-width:none;
  width:calc(100vw - 64px);
  max-width:var(--vc-wrap);
  margin:32px auto 40px;
  margin-left:50%;
  transform:translateX(-50%);
}
/* Fewer items should not stretch into oddly wide cards. */
.vc-expense-grid--1{grid-template-columns:repeat(1,minmax(0,220px)); justify-content:start;}
.vc-expense-grid--2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px !important;}
.vc-expense-grid--3{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:760px !important;}
.vc-expense-grid--4{grid-template-columns:repeat(4,minmax(0,1fr)); max-width:900px !important;}
.vc-expense-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));}
.vc-expense-grid--6{grid-template-columns:repeat(6,minmax(0,1fr));}

/* A card with no link is presentational, so it gets no hover affordance. */
.vc-expense-card--static{cursor:default;}
.vc-expense-card--static:hover{transform:none; border-color:var(--vc-brd); box-shadow:none;}

/* The label is a <span> inside the card; it must not inherit the prose
   link styling, which rendered these italic and underlined. */
.vc-prose .vc-expense-card,
.vc-prose .vc-expense-card *{
  text-decoration:none !important;
  font-style:normal !important;
}
.vc-prose .vc-expense-card span:not(.vc-ic){
  color:var(--vc-navy) !important;
  font-size:12.5px !important;
  font-weight:600;
  line-height:1.4 !important;
  display:block;
}
.vc-prose .vc-expense-card .vc-ic{
  display:flex; width:44px; height:44px; border-radius:12px;
  background:var(--vc-pale); align-items:center; justify-content:center;
  margin:0 auto 12px;
}
.vc-prose .vc-expense-card .vc-icon-svg{width:21px; height:21px; color:var(--vc-navy);}
.vc-prose .vc-expense-card:hover .vc-ic{background:var(--vc-sky);}
.vc-prose .vc-expense-card:hover .vc-icon-svg{color:#fff;}

@media (max-width:1080px){
  .vc-expense-grid--5,.vc-expense-grid--6{grid-template-columns:repeat(3,minmax(0,1fr));}
  .vc-expense-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:980px){
  .vc-prose .vc-expense-grid--content{width:auto; margin-left:0; transform:none;}
}
@media (max-width:600px){
  .vc-expense-grid--3,.vc-expense-grid--4,
  .vc-expense-grid--5,.vc-expense-grid--6{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vc-expense-grid--1,.vc-expense-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ============================================================
   31. FORM ALIGNMENT
   Every contact and download form is centred in its container.
   The block centres; the labels and fields inside stay
   left-aligned, which is what makes a form scannable.
   ============================================================ */
.vc-form{
  margin-left:auto;
  margin-right:auto;
  max-width:620px;
}

/* The contact template puts the form in a two-column split beside the
   checklist. Centre it within its own column rather than the page, so the
   two columns stay balanced. */
.vc-split .vc-form{margin-left:auto; margin-right:auto;}

/* Legacy forms that arrived as raw markup in the content: their submit
   button was a left-aligned inline element. */
.vc-prose form input[type="submit"],
.vc-prose form button[type="submit"]{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* The inline subscribe form centres as a unit too. */
.vc-form--inline{max-width:520px; margin-left:auto; margin-right:auto;}

/* Confirmation and error messages sit under a centred form, so centre them
   with it rather than leaving them hanging at the left edge. */
.vc-form-message{text-align:center;}

/* A form that is the only thing in a section gets a little more room to
   breathe now that it is no longer flush left. */
.vc-section > .vc-form{margin-top:8px;}

/* ============================================================
   32. PROCESS STEP GRIDS AND CONTENT LABELS
   ============================================================ */

/* Step cards are the highlight card with a fixed sensible column count,
   and they break out of the narrower prose measure like the other grids. */
.vc-prose .vc-step-grid{
  max-width:none;
  width:calc(100vw - 64px);
  max-width:var(--vc-wrap);
  margin:36px auto 44px;
  margin-left:50%;
  transform:translateX(-50%);
}
.vc-step-grid--2{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:760px !important;}
.vc-step-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.vc-step-grid--4{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:880px !important;}
.vc-step-grid--5,
.vc-step-grid--6{grid-template-columns:repeat(3,minmax(0,1fr));}

.vc-step-card h3{
  font-size:16px !important;
  color:var(--vc-navy) !important;
  margin:0 0 8px !important;
  line-height:1.3 !important;
}
.vc-step-card p{
  font-size:13.5px !important;
  line-height:1.6 !important;
  color:var(--vc-muted) !important;
  margin:0 !important;
}
.vc-step-card .vc-icon{
  width:40px; height:40px; border-radius:var(--vc-r-sm);
  background:var(--vc-pale); display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.vc-step-card .vc-icon-svg{width:20px; height:20px; color:var(--vc-navy);}
.vc-step-card:hover .vc-icon{background:var(--vc-sky);}
.vc-step-card:hover .vc-icon-svg{color:#fff;}

/* Content eyebrows removed on purpose.
   Small uppercase labels above a title made the reader work out which line
   was the actual subject, and uppercase is harder to read because it
   removes the word-shape cues we read by. Every section now carries ONE
   heading, at one size, in title case. */

@media (max-width:980px){
  .vc-prose .vc-step-grid{width:auto; margin-left:0; transform:none;}
  .vc-step-grid--3,.vc-step-grid--5,.vc-step-grid--6{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .vc-step-grid--2,.vc-step-grid--3,.vc-step-grid--4,
  .vc-step-grid--5,.vc-step-grid--6{grid-template-columns:1fr;}
}

/* ============================================================
   33. INHERITED INLINE FONT SIZES
   Content carries inline sizes on inner elements, e.g.
     <p><span style="font-size:48px"><strong>Get 100%...</strong></span></p>
   Capping the paragraph does nothing there, because the size sits
   on the child. That is why some lines still rendered at 48px in
   the body typeface while every real heading was 27px.
   Descendants inherit the size their container was given.
   ============================================================ */
.vc-prose p [style*="font-size"],
.vc-prose li [style*="font-size"],
.vc-prose td [style*="font-size"],
.vc-prose span[style*="font-size"],
.vc-prose strong[style*="font-size"],
.vc-prose em[style*="font-size"],
.vc-prose div[style*="font-size"]{
  font-size:inherit !important;
  line-height:inherit !important;
}
/* Headings keep the scale set in section 21; an inline size on a heading's
   own children must not escape it either. */
.vc-prose h1 [style*="font-size"],
.vc-prose h2 [style*="font-size"],
.vc-prose h3 [style*="font-size"],
.vc-prose h4 [style*="font-size"],
.vc-prose h5 [style*="font-size"],
.vc-prose h6 [style*="font-size"]{font-size:inherit !important;}

/* Inherited inline colours are neutralised for the same reason: they were
   chosen against backgrounds that no longer exist. */
.vc-prose p [style*="color"],
.vc-prose li [style*="color"]{color:inherit !important;}

/* A bare <div> of text in content should read as body copy, not fall back
   to the browser default. */
.vc-prose > div:not([class]){font-size:17px; line-height:1.75; color:var(--vc-ink);}

/* Headings recovered from bold-only or inline-styled paragraphs.
   Sized to MATCH the section h2 exactly, because they are section titles:
   "100% TRANSPARENCY" carries the same weight as "Data Capture & Invoice
   Listing" and should look identical. Anything that turns out to be a label
   above another heading is demoted to an eyebrow by vatcube_pair_headings()
   before it reaches the page. */
.vc-prose .vc-content-heading{
  font-size:clamp(21px,2.6vw,27px) !important;
  font-family:var(--vc-display) !important;
  font-weight:700;
  color:var(--vc-navy) !important;
  margin:44px 0 14px !important;
  line-height:1.3 !important;
  letter-spacing:-.01em;
}



/* ============================================================
   34. INLINE ICON FALLBACK
   Legacy icon images that no grid builder consumed are swapped
   for a line icon in a tile. They keep the author's original
   placement, so an icon that sat centred above its caption stays
   centred above its caption, just in the site's own icon set.
   ============================================================ */
.vc-inline-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:16px;
  background:var(--vc-pale);
  vertical-align:middle;
  flex-shrink:0;
}
.vc-inline-icon .vc-icon-svg{width:26px; height:26px; color:var(--vc-navy);}

/* An icon on its own line reads as a section marker, so give it room and
   align it with the text rather than leaving it stranded mid-column. */
.vc-prose p > .vc-inline-icon:only-child{
  display:flex;
  margin:30px 0 10px;
}
.vc-prose p[style*="text-align: center"] > .vc-inline-icon:only-child,
.vc-prose p[style*="text-align:center"] > .vc-inline-icon:only-child{
  margin-left:auto; margin-right:auto;
}
/* Icon followed by text on the same line: sit them on a shared baseline. */
.vc-prose p > .vc-inline-icon:first-child:not(:only-child){
  margin:0 14px 0 0;
}
.vc-prose li > .vc-inline-icon{width:38px; height:38px; border-radius:11px; margin-right:10px;}
.vc-prose li > .vc-inline-icon .vc-icon-svg{width:19px; height:19px;}

/* ============================================================
   35. UNIFORM CONTENT HEADINGS
   One size, one weight, one colour, title case. A reader should
   be able to tell what a section is about at a glance rather
   than working out which of two stacked lines is the subject.
   ============================================================ */
.vc-prose h2,
.vc-prose h3.vc-content-heading{
  font-size:clamp(21px,2.6vw,27px) !important;
  font-family:var(--vc-display) !important;
  font-weight:700 !important;
  color:var(--vc-navy) !important;
  line-height:1.3 !important;
  letter-spacing:-.01em !important;
  margin:48px 0 14px !important;
  text-transform:none !important;
}
/* The first heading in the content should not push the section down. */
.vc-prose > h2:first-child,
.vc-prose > h3:first-child{margin-top:0 !important;}

/* Sub-headings sit one clear step below, and are still title case. */
.vc-prose h3:not(.vc-content-heading),
.vc-prose h4{
  font-size:19px !important;
  font-family:var(--vc-display) !important;
  font-weight:700 !important;
  color:var(--vc-navy) !important;
  margin:32px 0 10px !important;
  text-transform:none !important;
}

/* Nothing in content may render as small caps or uppercase any more. */
.vc-prose h1,.vc-prose h2,.vc-prose h3,
.vc-prose h4,.vc-prose h5,.vc-prose h6{text-transform:none !important;}

/* ============================================================
   36. HEADLINE STATISTICS AND DISPLAY STATEMENTS

   These were large graphics in the old design: a giant cyan
   numeral with a caption, and a stacked three-line statement.
   Flattening them into plain text lost the whole point of them,
   so they are rebuilt as components in the current visual
   language: the brand gradient on the figure, generous space,
   and a caption that explains rather than competes.
   ============================================================ */

.vc-prose .vc-stat{
  position:relative;
  display:block;
  margin:48px 0;
  padding:32px 34px 30px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(111,147,209,.16), transparent 60%),
    linear-gradient(180deg, #fff, var(--vc-paler));
  border:1px solid var(--vc-brd);
  border-radius:22px;
  max-width:560px;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(11,31,66,.04), 0 12px 32px -18px rgba(11,31,66,.28);
}

/* A gradient rule anchoring the block, echoing the CTA band. */
.vc-prose .vc-stat::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:linear-gradient(180deg, var(--vc-sky), var(--vc-blue));
}

.vc-prose .vc-stat-value{
  display:block;
  font-family:var(--vc-display);
  font-size:clamp(38px,6vw,58px) !important;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.035em;
  background:linear-gradient(135deg, var(--vc-navy) 10%, var(--vc-blue) 55%, var(--vc-sky) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  /* If background-clip:text is unsupported the text must still be legible. */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .vc-prose .vc-stat-value{color:var(--vc-navy); -webkit-text-fill-color:currentColor;}
}

.vc-prose .vc-stat-caption{
  display:block;
  margin-top:14px;
  font-size:15px !important;
  line-height:1.55;
  color:var(--vc-muted) !important;
  max-width:38ch;
}

/* ---- Display statements ------------------------------------
   "LARGE / ON-GROUND / NETWORK" was three stacked lines with the
   first word carrying the weight. That structure is kept: a bold
   lead word, then the rest lighter beneath it.
   ------------------------------------------------------------ */
.vc-prose .vc-display{
  margin:52px 0 !important;
  font-family:var(--vc-display) !important;
  line-height:1.04;
  letter-spacing:-.03em;
}
.vc-prose .vc-display-lead{
  display:block;
  font-size:clamp(40px,6.4vw,62px) !important;
  font-weight:800;
  background:linear-gradient(120deg, var(--vc-navy), var(--vc-blue) 70%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.vc-prose .vc-display-rest{
  display:block;
  margin-top:2px;
  font-size:clamp(26px,3.6vw,38px) !important;
  font-weight:500;
  color:var(--vc-blue) !important;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .vc-prose .vc-display-lead{color:var(--vc-navy); -webkit-text-fill-color:currentColor;}
}

/* A display statement introduces the heading beneath it, so they sit
   together rather than drifting apart. */
.vc-prose .vc-display + h2,
.vc-prose .vc-display + h3{margin-top:14px !important;}

@media (max-width:600px){
  .vc-prose .vc-stat{padding:24px 24px 22px; margin:34px 0; border-radius:18px;}
  .vc-prose .vc-stat-caption{margin-top:10px;}
  .vc-prose .vc-display{margin:38px 0 !important;}
}

/* Standfirst above a form, from the old shortcode's subheading attribute. */
.vc-prose .vc-form-standfirst{
  max-width:620px;
  margin:0 auto 18px !important;
  text-align:center;
  color:var(--vc-ink) !important;
}

/* ============================================================
   38. COUNTRY CARD AND DATA TABLES

   The country list is rebuilt as a DIV card, not styled as a
   table. A table sizes itself from its own content and internal
   algorithm, so giving it the form's max-width did not actually
   make it the form's width. A div obeys the rules it is given.

   The card carries the contact form's exact values, because the
   two sit one above the other on Why Us.
   ============================================================ */
.vc-prose .vc-table-card{
  box-sizing:border-box;
  width:100%;
  max-width:620px;                    /* identical to .vc-form */
  margin:36px auto 40px;
  padding:32px;
  background:var(--vc-paler);
  border:1px solid var(--vc-brd);
  border-radius:var(--vc-r-lg);
}

/* The label sits above a hairline, like a fieldset legend. */
.vc-prose .vc-table-title{
  margin:0 0 20px !important;
  padding-bottom:16px;
  border-bottom:1px solid var(--vc-brd);
  font-family:var(--vc-display) !important;
  font-size:15px !important;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--vc-navy) !important;
  text-align:center;
}

/* Entries reflow to fit rather than sitting in three fixed columns, so
   "Czech Republic" and "United Kingdom" never break across two lines. */
.vc-prose .vc-country-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px 18px;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.vc-prose .vc-country-grid li{
  position:relative;
  margin:0 !important;
  padding:7px 0 7px 16px;
  font-size:15px !important;
  line-height:1.5 !important;
  color:var(--vc-ink) !important;
  list-style:none !important;
}

/* A small brand marker gives the list some structure without turning every
   entry into a heavy chip. */
.vc-prose .vc-country-grid li::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:5px; height:5px;
  margin-top:-2.5px;
  border-radius:50%;
  background:var(--vc-sky);
}

@media (max-width:760px){
  .vc-prose .vc-country-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 14px;}
}
@media (max-width:600px){
  .vc-prose .vc-table-card{padding:22px;}
  .vc-prose .vc-country-grid li{font-size:14.5px !important; padding:6px 0 6px 15px;}
}
/* Two columns still fit comfortably at 360px; measured, the longest entry
   ("Czech Republic") does not wrap. Only below that does one column win. */
@media (max-width:340px){
  .vc-prose .vc-country-grid{grid-template-columns:1fr;}
}

/* Genuine data tables that were NOT converted are wrapped in a scroll
   container, so a grid that cannot shrink is swipeable rather than cropped
   off the side of a phone screen. */
.vc-prose .vc-table-scroll{
  max-width:620px;
  margin:36px auto 40px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.vc-prose .vc-table-scroll:focus-visible{
  outline:2px solid var(--vc-blue);
  outline-offset:3px;
}
.vc-prose .vc-table-scroll > table{margin:0 auto;}

/* Nothing inside the country card may push it wider than its container:
   a long name wraps rather than forcing the card off the screen. */
.vc-prose .vc-table-card,
.vc-prose .vc-country-grid,
.vc-prose .vc-country-grid li{min-width:0; max-width:100%;}
.vc-prose .vc-country-grid li{overflow-wrap:anywhere; word-break:normal;}

.vc-prose table{
  width:100%;
  max-width:620px;
  margin:36px auto 40px;
  border-collapse:collapse;
  font-size:15px;
}
.vc-prose table th,
.vc-prose table td{
  padding:12px 14px;
  border-bottom:1px solid var(--vc-brd);
  text-align:left;
  vertical-align:top;
}
.vc-prose table th{
  font-weight:700;
  color:var(--vc-navy);
  background:var(--vc-paler);
}