/*
Theme Name: XaaS Techs MSP
Description: Clean, responsive layout for XaaS Techs (unified pages)
Version: 1.7
*/

/* ========== CSS RESET / BASE ========== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding-left:1.1rem}
h1,h2,h3,h4,h5,h6{margin:0 0 .5rem}
p{margin:0 0 .75rem}
button{font:inherit}

/* ========== THEME TOKENS ========== */
:root{
  --bg:#0b1220;
  --bg-page:#f6f7fb;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#2563eb;
  --brand-2:#f97316;
  --accent:#0ea5e9;
  --panel:#ffffff;
  --shadow-sm:0 6px 20px rgba(2,6,23,.06);
  --shadow-md:0 14px 40px rgba(2,6,23,.10);
  --radius:14px;
  --radius-lg:18px;
  --container:1280px;
}

/* ========== TYPOGRAPHY ========== */
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg-page);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1{font-size:clamp(28px,3.2vw,44px);line-height:1.1;letter-spacing:-.02em}
h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2}
h3{font-size:clamp(18px,2vw,22px);line-height:1.25}
.muted{color:var(--muted)}

/* ========== LAYOUT ========== */
.xaas-container{max-width:var(--container);margin:0 auto;padding:0 16px}
.xaas-page-content{max-width:var(--container);margin:0 auto;padding:0 16px}

/* Sections */
.section{padding:32px 0}
.section--light{background:#fff}
.section--muted{background:#f8fafc}

/* Cards/Grid helpers */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.panel:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

/* Buttons */
.xaas-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-weight:800;border:1px solid var(--line);background:#fff;color:var(--text);cursor:pointer}
.xaas-btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.xaas-btn--ghost{background:#fff;border-color:var(--line);color:var(--text)}
.xaas-btn:hover{filter:brightness(.98)}

/* ========== TOPBAR ========== */
.xaas-topbar{background:#0b1220;color:#fff;font-size:14px}
.xaas-topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.xaas-topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xaas-topbar a{color:#fff;opacity:.95}
.xaas-topbar a:hover{opacity:1}
.xaas-topbar .xaas-topbar-separator{opacity:.5}

/* ========== HEADER / NAV ========== */
.xaas-site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.xaas-header-inner{
  min-height:70px;display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center
}
.xaas-logo-img{height:42px;width:auto}

/* Desktop nav row (second row) */
.xaas-desktop-nav{display:flex;align-items:center;justify-content:center;gap:18px;min-height:46px}
.xaas-desktop-nav a{padding:8px 10px;border-radius:10px;color:#0f172a;font-weight:700}
.xaas-desktop-nav a:hover{background:#f2f4f7}

/* WordPress menu -> desktop (if using wp_nav_menu) */
.xaas-nav{display:none} /* kept hidden; we rely on .xaas-desktop-nav */
.menu-main,.menu{display:flex;align-items:center;justify-content:center;gap:18px;list-style:none;margin:0;padding:0}
.menu a{padding:8px 10px;border-radius:10px;color:#0f172a;font-weight:700}
.menu a:hover{background:#f2f4f7}

/* Mobile toggle shown under 992px */
.xaas-nav-toggle{display:none}

/* Mobile overlay drawer */
.xaas-nav-overlay{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.78);opacity:0;pointer-events:none;transition:opacity .18s ease}
.xaas-nav-overlay.is-open{opacity:1;pointer-events:auto}
.xaas-nav-overlay .xaas-nav-overlay-inner{position:fixed;inset:0;background:#0b1220;color:#fff;display:flex;flex-direction:column}
.xaas-nav-overlay a{color:#fff}

/* ========== HERO ========== */
.xaas-hero{padding:36px 0;background:#fff}
.xaas-hero--blue{background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 42%,#0b1220 140%);color:#fff}
.xaas-hero .xaas-hero-eyebrow{font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.95;margin-bottom:6px}
.xaas-hero h1{margin-bottom:10px}
.xaas-hero-text{opacity:.95;max-width:70ch;margin-bottom:16px}
.xaas-hero-ctas{display:flex;gap:10px;flex-wrap:wrap}

/* Hero grid */
.xaas-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
.xaas-hero-art{
  min-height:220px;border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.25);
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(255,255,255,.18), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  box-shadow:0 30px 80px rgba(0,0,0,.18);
  position:relative;overflow:hidden;
  animation:floaty 8s ease-in-out infinite
}
@keyframes floaty{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}

/* ========== HOME SECTIONS ========== */
.home-kpis .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.home-kpis .panel{display:flex;flex-direction:column;align-items:flex-start}
.home-kpis .num{font-size:28px;font-weight:900}
.home-kpis .label{color:var(--muted)}

.home-steps .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.home-steps .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.home-steps .step .k{font-weight:900;color:var(--brand);margin-bottom:8px}

/* ========== ABOUT ========== */
.about-intro .about-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}

/* ========== SERVICE AREAS ========== */
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.area-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.area-card h3{margin-bottom:4px}
.area-card p{color:var(--muted)}
.area-card a:hover h3{color:var(--brand)}

/* ========== KNOWLEDGE BASE ========== */
.kb-wrap{display:grid;grid-template-columns:260px 1fr;gap:16px}
.kb-sidebar{position:sticky;top:94px;align-self:start}
.kb-nav{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kb-nav a{display:block;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff}
.kb-nav a:hover{background:#f9fafb}
.kb-list{display:grid;gap:12px}
.kb-article{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.kb-article .meta{font-size:12px;color:var(--muted);margin:.25rem 0 .5rem}

/* ========== CONTACT ========== */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.contact-form{display:grid;gap:12px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row--single{grid-template-columns:1fr}
label{font-weight:700;display:block;margin-bottom:6px}
input,select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;
}
textarea{min-height:120px;resize:vertical}

/* ========== PREF00TER (single) & FOOTER ========== */
/* Prefooter block (ensure only one on page) */
.xaas-prefooter{background:#0f172a;color:#fff}
.xaas-prefooter .xaas-prefooter-inner{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center
}
.xaas-prefooter .xaas-prefooter-title{font-size:clamp(22px,2.6vw,36px);line-height:1.15;margin:6px 0 8px}
.xaas-prefooter .xaas-prefooter-btn-phone{background:var(--brand-2);border-color:var(--brand-2);color:#0b1220;font-weight:900}

/* Footer */
.xaas-footer-wrapper{background:#0b122a}
.xaas-footer{padding:28px 0;color:#fff;background:#0b122a}
.xaas-footer .xaas-footer-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:12px
}
.xaas-footer-heading{font-size:16px;margin-bottom:8px;font-weight:900}
.xaas-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.xaas-footer-list a{opacity:.95}
.xaas-footer-list a:hover{opacity:1;text-decoration:underline}
.xaas-footer-bottom{border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding-top:10px;color:#d1d5db}

/* ========== COOKIE BANNER ========== */
.xaas-cookie-banner{
  position:fixed;left:16px;bottom:16px;z-index:70;background:#fff;color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);
  width:min(520px,calc(100% - 32px));display:flex;align-items:flex-start;gap:12px;padding:12px
}
.xaas-cookie-inner{display:flex;gap:12px}
.xaas-cookie-text p{margin:.25rem 0 0}
.xaas-cookie-actions{margin-left:auto}

/* ========== IDLE POPUP (optional) ========== */
.xaas-idle-popup-overlay{position:fixed;inset:0;z-index:80;background:rgba(2,6,23,.5);display:none;align-items:center;justify-content:center;padding:16px}
.xaas-idle-popup-overlay.is-visible{display:flex}
.xaas-idle-popup{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:18px;max-width:560px;width:100%}
.xaas-idle-close{position:absolute;right:16px;top:14px;border:1px solid var(--line);background:#fff;border-radius:10px;width:36px;height:36px;cursor:pointer}
.xaas-idle-actions{display:flex;gap:10px;margin-top:12px}
.xaas-btn-secondary{background:#fff;border:1px solid var(--line)}

/* ========== UTILITIES ========== */
.center{display:flex;justify-content:center;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* Fix WordPress blocks inside our container */
.wp-block-group,.wp-block-columns,.wp-block-image{max-width:100%}

/* ========== RESPONSIVE ========== */
@media (max-width: 1199px){
  .xaas-hero-grid{grid-template-columns:1fr}
  .home-kpis .kpi{grid-template-columns:repeat(4,1fr)}
}
@media (max-width: 991px){
  /* show mobile toggle, hide desktop nav row */
  .xaas-nav-toggle{display:inline-flex !important}
  .xaas-desktop-nav{display:none !important}

  .home-kpis .kpi{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:1fr}
  .home-steps .steps{grid-template-columns:1fr 1fr}
  .about-intro .about-columns{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:1fr 1fr}
  .kb-wrap{grid-template-columns:1fr}
  .kb-sidebar{position:static}
  .contact-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .xaas-prefooter .xaas-prefooter-inner{grid-template-columns:1fr}
  .xaas-footer .xaas-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 599px){
  .home-steps .steps{grid-template-columns:1fr}
  .areas-grid{grid-template-columns:1fr}
  .xaas-footer .xaas-footer-grid{grid-template-columns:1fr}
}

/* ========== PAGE-SPECIFIC POLISH ========== */
/* Keep hero flush under header (no awkward gaps) */
body .xaas-hero{margin-top:0}

/* Ensure only a single prefooter visually stands out (avoid same color as footer) */
.xaas-prefooter{background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 42%,#0b1220 140%)}
.xaas-footer-wrapper{background:#0b122a}

/* Social icon avatar style (circle) */
.xaas-topbar a svg{display:block}
.xaas-topbar a svg circle{opacity:.95}

/* Hover accents for links in content blocks */
.section a:not(.xaas-btn):hover{color:var(--brand);text-decoration:underline}

/* Subtle divider option */
.hr{height:1px;background:var(--line);margin:16px 0}

/*
Theme Name: XaaS Techs MSP
Description: Unified styles with brand-rich home hero (no HTML changes required).
Author: XaaS Techs
Version: 1.0.6
*/

/* ===========================================
   0) Base & Tokens
=========================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
:root{
  --container:1280px;
  --line:#e5e7eb;
  --text:#0f172a;
  --muted:#6b7280;
  --brand:#2563eb;   /* primary blue */
  --accent:#0ea5e9;  /* cyan accent */
  --orange:#f97316;  /* CTA orange */
  --panel:#ffffff;
  --bg:#f6f7fb;
  --midnight:#0b1220;

  --shadow-xs:0 2px 10px rgba(2,6,23,.06);
  --shadow-sm:0 6px 20px rgba(2,6,23,.08);
  --shadow-md:0 14px 40px rgba(2,6,23,.12);
  --shadow-lg:0 30px 80px rgba(2,6,23,.16);
  --radius:14px;
  --radius-lg:18px;
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1{font-size:clamp(28px,3.2vw,44px);line-height:1.1;margin:0 0 .5rem}
h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin:0 0 .5rem}
h3{font-size:clamp(18px,2vw,22px);line-height:1.25;margin:0 0 .35rem}
p{margin:0 0 .75rem}
ul{padding-left:1.1rem;margin:.25rem 0}
.xaas-container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* Utilities */
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--muted)}
.mb-0{margin-bottom:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}

/* ===========================================
   1) Topbar
=========================================== */
.xaas-topbar{background:var(--midnight);color:#fff;font-size:14px}
.xaas-topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.xaas-topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xaas-topbar-link{color:#fff;opacity:.95}
.xaas-topbar-link:hover{opacity:1;text-decoration:underline}
.xaas-topbar-sep{opacity:.5}
.xaas-topbar-icon svg{width:18px;height:18px;display:block}

/* ===========================================
   2) Header & Navigation
=========================================== */
.xaas-site-header{
  position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)
}
.xaas-header-inner{
  min-height:70px;display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center
}
.xaas-logo-img{height:42px;width:auto}

.xaas-nav{display:flex;justify-content:center}
.xaas-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.xaas-nav-list a{
  display:inline-block;padding:8px 10px;border-radius:10px;font-weight:700;color:#0f172a
}
.xaas-nav-list a:hover{background:#f2f4f7}

.xaas-btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;
  border:1px solid var(--line);background:#fff;color:var(--text);font-weight:800;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease
}
.xaas-btn--ghost{background:#fff}
.xaas-btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.xaas-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.30)}

/* Mobile toggle */
.xaas-nav-toggle{
  display:none;border:1px solid var(--line);background:#fff;border-radius:12px;
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer
}
.xaas-nav-toggle-bar{display:block;width:20px;height:2px;background:#111;border-radius:2px}

/* Mobile overlay drawer */
.xaas-nav-overlay{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.78);opacity:0;pointer-events:none;transition:opacity .18s ease}
.xaas-nav-overlay.is-open{opacity:1;pointer-events:auto}
.xaas-nav-drawer{position:fixed;inset:0;background:var(--midnight);color:#fff;display:flex;flex-direction:column}
.xaas-nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.xaas-nav-overlay-close{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer
}
.xaas-nav-mobile{padding:18px 16px 12px;overflow:auto;height:100%}
.xaas-mobile-menu{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xaas-mobile-menu a{
  display:block;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff
}
.xaas-mobile-menu a:hover{background:rgba(255,255,255,.06)}
.xaas-nav-overlay-cta{
  display:block;margin:16px 0 8px;text-align:center;background:var(--orange);
  border-color:var(--orange);color:var(--midnight);font-weight:900
}

/* ===========================================
   3) Hero (base)
   - About/Contact remain light by default
   - Home hero dark variant is below (body.home)
=========================================== */
.xaas-hero{
  padding:36px 0;background:#ffffff;position:relative
}
.xaas-hero-eyebrow{
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.95;margin-bottom:6px;color:var(--text)
}
.xaas-hero-text{opacity:.95;max-width:70ch;margin-bottom:16px}
.xaas-hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.xaas-home-hero-grid,.xaas-hero-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center
}

/* Decorative art block */
.xaas-hero-art{
  min-height:220px;border-radius:var(--radius-lg);border:1px solid #e8eefb;
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(37,99,235,.08), transparent 40%),
    linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,0));
  box-shadow:var(--shadow-sm);
  animation:floaty 8s ease-in-out infinite
}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Contact/Right panel (works on light & dark) */
.xaas-contact-hero-panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));
  box-shadow:var(--shadow-sm);
  color:var(--text)
}
.xaas-contact-hero-panel-inner{padding:16px}
.xaas-contact-hero-panel h2{margin-bottom:.35rem}
.xaas-contact-hero-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:.5rem 0 .75rem
}
.xaas-contact-hero-meta>div{
  border:1px solid var(--line);border-radius:12px;padding:10px;background:#fafbff
}
.xaas-contact-hero-note{font-size:.95rem;color:var(--muted)}

/* ===========================================
   3b) Home Hero – Brand-rich, less white (no HTML change)
   Applies automatically on the homepage via body.home
   Also available by adding .xaas-hero--home anywhere
=========================================== */
body.home .xaas-hero,
.xaas-hero--home{
  background:none; padding:56px 0 42px; position:relative; isolation:isolate;
}
body.home .xaas-hero::before,
.xaas-hero--home::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(14,165,233,.25), transparent 40%),
    radial-gradient(900px 380px at 90% 0%, rgba(37,99,235,.28), transparent 45%),
    linear-gradient(160deg, var(--midnight) 0%, #0e2a6c 38%, var(--brand) 62%, var(--accent) 100%);
}
body.home .xaas-hero::after,
.xaas-hero--home::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.14;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(1200px 600px at 40% 20%, #000 50%, transparent 70%);
}

/* Light-on-dark text for hero copy */
body.home .xaas-hero .xaas-hero-eyebrow,
.xaas-hero--home .xaas-hero-eyebrow{ color:#c7d2fe; opacity:1 }
body.home .xaas-hero h1,
.xaas-hero--home h1{ color:#fff }
body.home .xaas-hero .xaas-hero-text,
body.home .xaas-hero .xaas-hero-bullets,
.xaas-hero--home .xaas-hero-text,
.xaas-hero--home .xaas-hero-bullets{ color:#e6e9f5 }
body.home .xaas-hero .xaas-hero-bullets li,
.xaas-hero--home .xaas-hero-bullets li{ margin:.35rem 0 }

/* Panel adapts for dark */
body.home .xaas-hero .xaas-contact-hero-panel,
.xaas-hero--home .xaas-contact-hero-panel{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  color:#f1f5ff; backdrop-filter:blur(6px);
}
body.home .xaas-hero .xaas-contact-hero-panel-inner,
.xaas-hero--home .xaas-contact-hero-panel-inner{ padding:16px }
body.home .xaas-hero .xaas-contact-hero-panel h2,
.xaas-hero--home .xaas-contact-hero-panel h2{ color:#fff }
body.home .xaas-hero .xaas-contact-hero-panel p,
.xaas-hero--home .xaas-contact-hero-panel p{ color:#e6ecff }
body.home .xaas-hero .xaas-contact-hero-meta>div,
.xaas-hero--home .xaas-contact-hero-meta>div{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e6f0ff;
}

/* Buttons on dark */
body.home .xaas-hero .xaas-btn--primary,
.xaas-hero--home .xaas-btn--primary{
  background:var(--brand); border-color:var(--brand); color:#fff;
  box-shadow:0 8px 24px rgba(37,99,235,.45);
}
body.home .xaas-hero .xaas-btn--primary:hover,
.xaas-hero--home .xaas-btn--primary:hover{ transform:translateY(-2px) }
body.home .xaas-hero .xaas-btn--ghost,
.xaas-hero--home .xaas-btn--ghost{
  background:#fff; border-color:#fff; color:var(--text)
}
body.home .xaas-hero .xaas-btn--orange,
.xaas-hero--home .xaas-btn--orange{
  background:var(--orange); border-color:var(--orange); color:var(--midnight);
  box-shadow:0 8px 24px rgba(249,115,22,.45);
}

/* Art block on dark */
body.home .xaas-hero .xaas-hero-art,
.xaas-hero--home .xaas-hero-art{
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 240px at -10% -20%, rgba(14,165,233,.22), transparent 40%),
    radial-gradient(640px 200px at 110% 0%, rgba(37,99,235,.22), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow:0 30px 80px rgba(2,6,23,.45);
}

/* Header line remains visible above dark hero */
body.home .xaas-site-header{ border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.98) }
body.home .xaas-topbar{ box-shadow:0 1px 0 rgba(255,255,255,.08) }

/* ===========================================
   4) Sections, Cards, Grids, Steps
=========================================== */
.xaas-section{padding:28px 0}
.xaas-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xaas-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease
}
.xaas-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.xaas-checklist{margin:.25rem 0 0;padding-left:1.1rem}
.xaas-checklist li{margin:.25rem 0}

.xaas-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xaas-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.xaas-step .num{font-weight:900;color:var(--brand);font-size:18px;margin-bottom:6px}

/* ===========================================
   5) Contact Layout & Form
=========================================== */
.xaas-contact-grid{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:start
}
.xaas-contact-form-wrap h2{margin-bottom:.35rem}
.xaas-section-lead{color:var(--muted)}

.xaas-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.xaas-form-field{display:grid;gap:6px;margin-bottom:12px}
.xaas-form-field label{font-weight:700}
.xaas-form-field label span{color:var(--brand)}
.xaas-form-field input,
.xaas-form-field select,
.xaas-form-field textarea{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:#fff;
  font:inherit;color:inherit;box-shadow:var(--shadow-xs)
}
.xaas-form-field input:focus,
.xaas-form-field select:focus,
.xaas-form-field textarea:focus{
  outline:none;border-color:#c7d2fe;box-shadow:0 0 0 3px rgba(59,130,246,.2)
}
.xaas-form-footnote{font-size:.9rem;color:var(--muted)}
.xaas-form-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Honeypot (hidden) */
.xaas-field-honeypot{position:absolute;left:-999em;opacity:0;height:0;width:0;overflow:hidden}

/* Alerts */
.xaas-alert{
  border-radius:12px;padding:10px 12px;margin:10px 0;font-weight:700;display:block
}
.xaas-alert-success{background:#ecfdf5;border:1px solid #10b981;color:#065f46}
.xaas-alert-error{background:#fef2f2;border:1px solid #ef4444;color:#7f1d1d}

/* Thank-you overlay (AJAX success) */
.xaas-contact-thanks-overlay{position:fixed;inset:0;display:none;z-index:60}
.xaas-contact-thanks-overlay.is-visible{display:block}
.xaas-contact-thanks-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.75)}
.xaas-contact-thanks-modal{
  position:relative;max-width:480px;margin:10vh auto 0;background:#fff;border-radius:1rem;
  padding:1.75rem 1.6rem;box-shadow:0 24px 60px rgba(15,23,42,.35);z-index:1
}
.xaas-contact-thanks-modal h2{margin-top:0;margin-bottom:.6rem}
.xaas-contact-thanks-modal p{margin-bottom:1.2rem;font-size:.95rem}

/* ===========================================
   6) Pre-footer & Footer
=========================================== */
.xaas-prefooter{
  background:linear-gradient(135deg,var(--accent) 0%,var(--brand) 42%,var(--midnight) 140%);
  color:#fff
}
.xaas-prefooter-inner{
  display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center
}
.xaas-prefooter-title{font-size:clamp(22px,2.6vw,36px);line-height:1.15;margin:6px 0 8px}
.xaas-prefooter-tagline{opacity:.95}
.xaas-prefooter-btn-phone{background:var(--orange);border-color:var(--orange);color:var(--midnight);font-weight:900}

.xaas-footer-wrapper{background:#0b122a}
.xaas-footer{padding:28px 0;color:#fff;background:#0b122a}
.xaas-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:12px}
.xaas-footer-heading{font-size:16px;margin-bottom:8px;font-weight:900}
.xaas-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.xaas-footer-list a{opacity:.95}
.xaas-footer-list a:hover{opacity:1;text-decoration:underline}
.xaas-footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;flex-wrap:wrap;
  justify-content:space-between;padding-top:10px;color:#d1d5db
}

/* ===========================================
   7) Responsive
=========================================== */
@media (max-width: 1199px){
  .xaas-home-hero-grid,.xaas-hero-grid{grid-template-columns:1fr}
  .xaas-prefooter-inner{grid-template-columns:1fr}
}
@media (max-width: 991px){
  .xaas-nav{display:none}            /* hide desktop nav */
  .xaas-nav-toggle{display:inline-flex}
  .xaas-footer-grid{grid-template-columns:1fr 1fr}
  .xaas-grid-3{grid-template-columns:1fr 1fr}
  .xaas-steps{grid-template-columns:1fr 1fr}
  .xaas-form-row{grid-template-columns:1fr}
  .xaas-contact-hero-meta{grid-template-columns:1fr 1fr}
}
@media (max-width: 599px){
  .xaas-footer-grid{grid-template-columns:1fr}
  .xaas-grid-3{grid-template-columns:1fr}
  .xaas-steps{grid-template-columns:1fr}
  .xaas-contact-hero-meta{grid-template-columns:1fr}
}

/* ===========================================
   8) Little Polish
=========================================== */
html::before{content:"";display:block;height:3px;background:var(--brand)}
/* keep your earlier .xaas-hero--blue override harmless */
.xaas-hero--blue{outline:0 solid transparent; box-shadow: inset 0 0 0 9999px rgba(37,99,235,.00)}

/* ============================================
   ABOUT PAGE – HERO + CONTENT + STATS + ALT
   Targets only: /about-xaas-techs/ classes you already use
   ============================================ */

/* ---------- HERO (About) ---------- */
.xaas-about-hero{
  position: relative;
  padding: 56px 0 44px;
  color:#eef3ff;
  background:
    radial-gradient(1200px 520px at -10% -20%, rgba(14,165,233,.18), transparent 42%),
    radial-gradient(900px 420px at 110% -10%, rgba(37,99,235,.22), transparent 48%),
    linear-gradient(160deg, var(--midnight) 0%, #0e2a6c 38%, var(--brand) 62%, var(--accent) 100%);
  overflow:hidden;
}
.xaas-about-hero .xaas-hero-eyebrow{color:#cbd9ff; opacity:.96}
.xaas-about-hero h1{color:#fff}
.xaas-about-hero .xaas-hero-text{color:#e7edff; opacity:.98}
.xaas-about-hero .xaas-hero-bullets{
  margin: 10px 0 0; padding:0; list-style:none; color:#e3eaff
}
.xaas-about-hero .xaas-hero-bullets li{
  position:relative; padding-left:26px; margin:6px 0;
}
.xaas-about-hero .xaas-hero-bullets li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:14px;
  border-radius:50%;
  background:conic-gradient(from 0deg, #fff, #9cc8ff);
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 4px 12px rgba(0,0,0,.22);
}

/* floating tech glow layer if present */
.xaas-about-hero .xaas-hero-tech-bg{
  position:absolute; inset:-20% -10% auto -10%; height:200%;
  background: radial-gradient(420px 220px at 80% 20%, rgba(255,255,255,.18), transparent 60%);
  opacity:.35; pointer-events:none;
}

/* shared grid from your hero */
.xaas-about-hero .xaas-home-hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:16px; align-items:center}
@media (max-width:1199px){ .xaas-about-hero .xaas-home-hero-grid{grid-template-columns:1fr} }

/* right column card (reusing your contact hero panel inside about hero) */
.xaas-about-hero .xaas-contact-hero-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  color:#f8fbff;
}
.xaas-about-hero .xaas-contact-hero-panel-inner{padding:18px}
.xaas-about-hero .xaas-contact-hero-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px
}
.xaas-about-hero .xaas-contact-hero-meta strong{color:#fff}
.xaas-about-hero .xaas-contact-hero-note{color:#deebff; opacity:.95}
@media (max-width:599px){
  .xaas-about-hero .xaas-contact-hero-meta{grid-template-columns:1fr 1fr}
}

/* ---------- CONTENT SECTIONS (About) ---------- */
.xaas-about-section{
  background:#f8f9fe;
  padding: 32px 0 20px;
}
.xaas-about-section--alt{
  background:
    radial-gradient(900px 340px at 10% -20%, rgba(37,99,235,.10), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

/* two-column text grid used in “Our story / How we work” and “What you can expect / Let’s talk” */
.xaas-about-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.xaas-about-column{
  background:#fff; border:1px solid var(--line);
  border-radius: var(--radius); padding:16px;
  box-shadow: var(--shadow-1);
}
.xaas-about-column:hover{ box-shadow: var(--shadow-2) }

/* bullet list with checks */
.xaas-about-list{margin:.25rem 0 0; padding:0; list-style:none}
.xaas-about-list li{
  position:relative; padding-left:26px; margin:.45rem 0;
}
.xaas-about-list li::before{
  content:""; position:absolute; left:0; top:.45rem; width:14px; height:14px; border-radius:4px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow:0 0 0 2px #eaf1ff inset, 0 6px 16px rgba(2,6,23,.18);
}

/* ---------- STATS BAND ---------- */
.xaas-about-stats{
  background:
    linear-gradient(180deg, #0b1220 0%, #0f1930 100%);
  color:#eaf0ff;
  padding: 24px 0;
}
.xaas-about-stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.xaas-about-stat{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding:14px;
  text-align:center;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.xaas-about-stat-number{
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(22px, 2.4vw, 30px); color:#fff;
}
.xaas-about-stat-label{
  font-size: var(--fs-sm); color:#d3dfff; opacity:.95; margin-top:4px;
}
@media (max-width:991px){
  .xaas-about-stats-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:599px){
  .xaas-about-stats-grid{grid-template-columns:1fr}
}

/* ---------- CTA BUTTON VARIANT USED IN ABOUT ---------- */
.xaas-btn-primary, .xaas-btn--primary{
  background: var(--brand);
  border-color: var(--brand);
  color:#fff;
  box-shadow:0 10px 28px rgba(37,99,235,.35);
}
.xaas-btn-primary:hover, .xaas-btn--primary:hover{
  transform: translateY(-2px);
}

/* ---------- SPACING NUDGES FOR ABOUT PAGE ONLY ---------- */
body.page-template-page-about-xaas-techs-en .xaas-section{padding:28px 0}
body.page-template-page-about-xaas-techs-en .xaas-about-section{padding:28px 0 22px}
body.page-template-page-about-xaas-techs-en .xaas-about-section--alt{padding:28px 0 26px}

/* =========================================================
   SERVICE AREAS – HERO + GRID + CARDS
   (non-destructive: only targets service-areas page classes)
   ========================================================= */
.xaas-service-areas-hero{
  position:relative;
  padding:56px 0 40px;
  color:#0b132a;
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(14,165,233,.16), transparent 48%),
    radial-gradient(900px 360px at 88% -20%, rgba(37,99,235,.16), transparent 50%),
    linear-gradient(180deg,#ffffff 0%, #f5f7ff 100%);
  overflow:hidden;
}
.xaas-service-areas-hero .xaas-hero-eyebrow{color:#2563eb; opacity:.95}
.xaas-service-areas-hero h1{color:#0b132a}
.xaas-service-areas-hero .xaas-hero-text{color:#394256; opacity:.98; max-width:70ch}
.xaas-service-areas-hero .xaas-hero-ctas .xaas-btn{box-shadow:0 10px 26px rgba(37,99,235,.25)}

.xaas-service-areas-hero .xaas-hero-art{
  border:1px solid #e2e8ff;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(255,255,255,.8), transparent 70%),
    linear-gradient(180deg, rgba(37,99,235,.08), rgba(14,165,233,.06)),
    #f9fbff;
  box-shadow:0 24px 60px rgba(2,6,23,.10);
}

/* Regions grid (works whether your HTML uses ul>li or divs) */
.xaas-region-grid,
.xaas-service-areas-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media (max-width:991px){ .xaas-region-grid,.xaas-service-areas-grid{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .xaas-region-grid,.xaas-service-areas-grid{grid-template-columns:1fr} }

.xaas-region-card,
.xaas-area-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.xaas-region-card:hover,
.xaas-area-card:hover{
  transform:translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color:#d6ddf7;
}

.xaas-region-card h3{margin-bottom:6px; font-size:clamp(16px,1.8vw,18px)}
.xaas-region-card p{color:#4b5563}
.xaas-region-list, .xaas-locations{
  list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px
}
.xaas-region-list a, .xaas-locations a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border:1px solid #e6ebf7; border-radius:10px;
  color:#0f172a; background:#fff;
}
.xaas-region-list a:hover, .xaas-locations a:hover{
  border-color:#c7d4ff; background:#f6f9ff
}

/* tiny pill for county/area tags */
.xaas-badge, .xaas-area-pill{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#27427a; font-weight:700; font-size:12px
}

/* page section wrapper on service areas */
body.page-template-page-service-areas .xaas-section{padding:28px 0}
body.page-template-page-service-areas .xaas-about-section--alt{
  background:
    radial-gradient(900px 340px at 10% -20%, rgba(37,99,235,.08), transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}

/* Optional “map card” if present */
.xaas-map-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:0; overflow:hidden
}
.xaas-map-card iframe, .xaas-map-card img{display:block; width:100%; height:100%}

/* =========================================================
   CONTACT US – HERO + FORM + SIDEBAR + ALERTS + OVERLAY
   (enhances your existing .xaas-contact-* classes)
   ========================================================= */

/* HERO (Contact) – darker, more depth, less plain white */
.xaas-contact-hero{
  position:relative;
  padding:56px 0 40px;
  color:#eef3ff;
  background:
    radial-gradient(1100px 480px at -10% -20%, rgba(14,165,233,.20), transparent 44%),
    radial-gradient(900px 360px at 110% -10%, rgba(37,99,235,.26), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #0e245c 48%, #123b9c 100%);
  overflow:hidden;
}
.xaas-contact-hero .xaas-hero-eyebrow{color:#cbd9ff}
.xaas-contact-hero h1{color:#fff}
.xaas-contact-hero .xaas-hero-text{color:#e5edff; opacity:.98}
.xaas-contact-hero .xaas-hero-bullets{color:#dfe7ff; margin:10px 0 0; padding:0; list-style:none}
.xaas-contact-hero .xaas-hero-bullets li{position:relative; padding-left:26px; margin:6px 0}
.xaas-contact-hero .xaas-hero-bullets li::before{
  content:""; position:absolute; left:0; top:8px; width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,#fff,#a7c5ff);
  box-shadow:0 0 0 2px rgba(255,255,255,.16) inset, 0 4px 12px rgba(0,0,0,.25)
}

/* right-side quick panel already in your HTML */
.xaas-contact-hero .xaas-contact-hero-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  color:#f8fbff;
}
.xaas-contact-hero .xaas-contact-hero-panel-inner{padding:18px}
.xaas-contact-hero .xaas-contact-hero-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px
}
.xaas-contact-hero .xaas-contact-hero-meta a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.xaas-contact-hero .xaas-contact-hero-note{color:#deebff; opacity:.95}
@media (max-width:599px){ .xaas-contact-hero .xaas-contact-hero-meta{grid-template-columns:1fr 1fr} }

/* MAIN CONTACT GRID */
.xaas-contact-grid{
  display:grid; grid-template-columns:1.4fr .6fr; gap:16px;
}
@media (max-width:991px){ .xaas-contact-grid{grid-template-columns:1fr} }

/* FORM WRAPPER */
.xaas-contact-form-wrap{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow-sm)
}
.xaas-contact-form-wrap h2{margin-bottom:6px}
.xaas-section-lead{color:#4b5563; margin-bottom:12px}

/* FORM ELEMENTS */
.xaas-form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:599px){ .xaas-form-row{grid-template-columns:1fr} }

.xaas-contact-form label{font-weight:800; display:block; margin:0 0 6px}
.xaas-contact-form label span{color:#ef4444}

.xaas-contact-form input[type="text"],
.xaas-contact-form input[type="email"],
.xaas-contact-form input[type="tel"],
.xaas-contact-form select,
.xaas-contact-form textarea{
  width:100%;
  appearance:none;
  border:1px solid #d3daea;
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  color:#0f172a;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.xaas-contact-form textarea{min-height:140px; resize:vertical}

.xaas-contact-form input:focus,
.xaas-contact-form select:focus,
.xaas-contact-form textarea:focus{
  outline:none;
  border-color:#8aa6ff;
  box-shadow:0 0 0 4px rgba(37,99,235,.18);
}

/* invalid / success helper classes (if you set them server-side) */
.xaas-contact-form .is-invalid{border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.xaas-contact-form .is-valid{border-color:#22c55e !important; box-shadow:0 0 0 4px rgba(34,197,94,.12)}

/* Honeypot – keep fully hidden but accessible offscreen */
.xaas-field-honeypot{
  position:absolute !important; left:-999em; width:1px; height:1px; overflow:hidden
}

/* Submit row */
.xaas-form-footer{display:flex; align-items:center; gap:12px; margin-top:12px}
.xaas-form-footnote{color:#6b7280; margin:0}
#xaas-contact-submit{
  min-width:220px;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  border-color: transparent;
  color:#fff; font-weight:900;
  box-shadow:0 12px 28px rgba(37,99,235,.35);
}
#xaas-contact-submit:hover{transform:translateY(-2px)}
#xaas-contact-submit:disabled{opacity:.6; cursor:not-allowed; transform:none}

/* ALERTS (AJAX response box) */
.xaas-alert{
  border-radius:12px; padding:10px 12px; margin:10px 0 0;
  border:1px solid transparent; font-weight:700
}
.xaas-alert-success{background:#ecfdf5; border-color:#10b981; color:#065f46}
.xaas-alert-error{background:#fef2f2; border-color:#ef4444; color:#991b1b}

/* SIDEBAR CARDS */
.xaas-contact-sidebar{display:grid; gap:12px}
.xaas-contact-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow-sm)
}
.xaas-contact-card h3{margin-bottom:6px}
.xaas-contact-card p{color:#475569}
.xaas-contact-card ol{margin:6px 0 0; padding-left:1.1rem}

/* THANK-YOU OVERLAY (you already have base) – add polish */
.xaas-contact-thanks-backdrop{backdrop-filter:saturate(120%) blur(3px)}
.xaas-contact-thanks-modal{
  border:1px solid #e5e7eb;
  box-shadow:0 26px 70px rgba(2,6,23,.35)
}
.xaas-contact-thanks-modal a{color:#2563eb; font-weight:800; text-decoration:underline; text-underline-offset:3px}

/* PAGE-LEVEL SPACING TARGETS */
body.page-template-page-contact-us .xaas-section{padding:28px 0}
body.page-template-page-contact-us .xaas-contact-section{padding:28px 0 22px}
/* =========================================================
   SERVICE AREAS – HERO UPGRADE (scoped, no HTML changes)
   Targets: body.page-template-page-service-area-region
   ========================================================= */

/* Rich, darker hero with mesh gradients + subtle grid */
body.page-template-page-service-area-region .xaas-hero.xaas-home-hero{
  position:relative;
  padding:60px 0 44px;
  background:none;
  isolation:isolate;
}
body.page-template-page-service-area-region .xaas-hero.xaas-home-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 480px at -10% -20%, rgba(14,165,233,.22), transparent 44%),
    radial-gradient(900px 360px at 110% -10%, rgba(37,99,235,.28), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #0e245c 46%, #123b9c 78%, #1e3a8a 100%);
}
body.page-template-page-service-area-region .xaas-hero.xaas-home-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(1200px 580px at 42% 18%, #000 55%, transparent 75%);
}

/* Copy colors on dark */
body.page-template-page-service-area-region .xaas-hero .xaas-hero-eyebrow{color:#cbd9ff; opacity:1}
body.page-template-page-service-area-region .xaas-hero h1{color:#fff}
body.page-template-page-service-area-region .xaas-hero-subtitle,
body.page-template-page-service-area-region .xaas-hero-tagline,
body.page-template-page-service-area-region .xaas-hero-list{color:#e6ecff; opacity:.98}

/* Eyebrow & tagline nudge */
body.page-template-page-service-area-region .xaas-hero .xaas-hero-eyebrow{
  letter-spacing:.06em; text-transform:uppercase; font-weight:900;
}
body.page-template-page-service-area-region .xaas-hero .xaas-hero-tagline{
  margin:.35rem 0 .15rem; font-weight:800; color:#f1f5ff;
}

/* Bullet styling with luminous dots */
body.page-template-page-service-area-region .xaas-hero-list{
  list-style:none; margin:.25rem 0 0; padding:0;
}
body.page-template-page-service-area-region .xaas-hero-list li{
  position:relative; padding-left:26px; margin:.35rem 0;
}
body.page-template-page-service-area-region .xaas-hero-list li::before{
  content:""; position:absolute; left:0; top:.45rem; width:14px; height:14px; border-radius:50%;
  background:conic-gradient(from 0deg,#fff,#9cc8ff);
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 6px 16px rgba(0,0,0,.28);
}

/* CTA buttons on dark */
body.page-template-page-service-area-region .xaas-hero .xaas-btn{
  border-color:#fff; background:#fff; color:#0b1220; font-weight:900;
  box-shadow:0 10px 28px rgba(255,255,255,.18);
}
body.page-template-page-service-area-region .xaas-hero .xaas-btn:hover{
  transform:translateY(-2px);
}

/* Right-side info card turns to frosted glass */
body.page-template-page-service-area-region .xaas-home-hero-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#eaf1ff;
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}
body.page-template-page-service-area-region .xaas-home-hero-card h3{color:#fff; margin-bottom:.35rem}
body.page-template-page-service-area-region .xaas-home-hero-card ul{margin:.35rem 0 0; padding-left:1.1rem}

/* Keep header readable above the dark hero */
body.page-template-page-service-area-region .xaas-site-header{
  background:rgba(255,255,255,.98);
  border-bottom:1px solid rgba(255,255,255,.10);
}

/* Responsive hero grid */
@media (max-width:1199px){
  body.page-template-page-service-area-region .xaas-home-hero-grid{grid-template-columns:1fr}
}

/* =========================================================
   SERVICE AREAS – CARDS & SECTION HEADER POLISH
   ========================================================= */

/* Section header inside service-areas body intro */
body.page-template-page-service-area-region .xaas-section-service-areas .xaas-section-header{
  text-align:left;
}
body.page-template-page-service-area-region .xaas-section-service-areas .xaas-section-eyebrow{
  color:#2563eb; font-weight:900; letter-spacing:.04em; text-transform:uppercase;
}

/* Card base (uses your existing markup) */
body.page-template-page-service-area-region .xaas-service-area-card,
body.page-template-page-service-area-region .xaas-service-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:16px;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.page-template-page-service-area-region .xaas-service-area-card:hover,
body.page-template-page-service-area-region .xaas-service-card:hover{
  transform:translateY(-3px);
  border-color:#cdd6ff;
  box-shadow:0 18px 48px rgba(2,6,23,.12);
}
body.page-template-page-service-area-region .xaas-service-area-card h3 a{
  color:#0b132a; text-decoration:none;
}
body.page-template-page-service-area-region .xaas-service-area-card h3 a:hover{
  color:#1d4ed8; text-decoration:underline; text-underline-offset:3px;
}

/* “View region details →” link */
body.page-template-page-service-area-region .xaas-service-area-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; font-weight:800; color:#1d4ed8;
}
body.page-template-page-service-area-region .xaas-service-area-link:hover{
  text-decoration:underline; text-underline-offset:3px;
}

/* 3-up / 2-up / 1-up grid without changing HTML */
body.page-template-page-service-area-region .xaas-service-areas-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
@media (max-width:991px){
  body.page-template-page-service-area-region .xaas-service-areas-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:599px){
  body.page-template-page-service-area-region .xaas-service-areas-grid{grid-template-columns:1fr}
}

/* Optional “home base” highlight line you already render inline */
body.page-template-page-service-area-region .xaas-service-area-card p[style*="color:#f97316"]{
  letter-spacing:.01em;
}

/* =========================================================
   REUSABLE LANDING PAGE HOOKS
   Apply the same dark hero on region detail pages that use
   body classes like: page-template-page-service-area-*
   ========================================================= */
body[class*="page-service-area-"] .xaas-hero.xaas-home-hero{
  position:relative; background:none; padding:56px 0 42px; isolation:isolate;
}
body[class*="page-service-area-"] .xaas-hero.xaas-home-hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 480px at -10% -20%, rgba(14,165,233,.22), transparent 44%),
    radial-gradient(900px 360px at 110% -10%, rgba(37,99,235,.28), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #0e245c 46%, #123b9c 78%, #1e3a8a 100%);
}
body[class*="page-service-area-"] .xaas-hero.xaas-home-hero::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.16;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(1200px 580px at 42% 18%, #000 55%, transparent 75%);
}
body[class*="page-service-area-"] .xaas-hero .xaas-hero-eyebrow{color:#cbd9ff}
body[class*="page-service-area-"] .xaas-hero h1{color:#fff}
body[class*="page-service-area-"] .xaas-hero-subtitle,
body[class*="page-service-area-"] .xaas-hero-tagline,
body[class*="page-service-area-"] .xaas-hero-list{color:#e6ecff}

/* Right column card on region pages too */
body[class*="page-service-area-"] .xaas-home-hero-card{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:#eaf1ff; backdrop-filter:blur(6px);
  box-shadow:0 24px 70px rgba(0,0,0,.35);
  border-radius:18px; padding:16px;
}

/* Responsive guard */
@media (max-width:1199px){
  body[class*="page-service-area-"] .xaas-home-hero-grid{grid-template-columns:1fr}
}

/* =========================================================
   PRE-FOOTER POLISH (keeps your existing markup)
========================================================= */
.xaas-prefooter{
  position: relative;
  overflow: clip;
  padding: 28px 0;
  background:
    radial-gradient(1200px 520px at -10% -10%, rgba(14,165,233,.15), transparent 50%),
    radial-gradient(900px 420px at 110% 0%, rgba(37,99,235,.18), transparent 55%),
    linear-gradient(135deg, var(--accent) 0%, var(--brand) 42%, var(--midnight) 140%);
}
.xaas-prefooter::after{
  content:""; position:absolute; inset:0; opacity:.15; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image: radial-gradient(1200px 600px at 40% 20%, #000 55%, transparent 75%);
}
.xaas-prefooter-inner{
  gap: 20px;
  align-items: center;
}
.xaas-prefooter-eyebrow{
  letter-spacing:.06em; text-transform:uppercase; font-weight:900; opacity:.95;
}
.xaas-prefooter-title{
  margin:8px 0 10px;
  text-shadow:0 1px 0 rgba(0,0,0,.15);
}
.xaas-prefooter-tagline{
  opacity:.96; max-width:70ch;
}
.xaas-prefooter-actions{
  display:flex; gap:12px; justify-content:flex-end; align-items:center;
}
.xaas-prefooter-actions .xaas-btn{
  padding:12px 16px; border-radius:14px; font-weight:900;
  transition: transform .15s ease, box-shadow .15s ease;
}
.xaas-prefooter-btn-phone{
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  border-color: transparent !important; color:#0b1220 !important;
  box-shadow:0 12px 28px rgba(249,115,22,.35);
}
.xaas-prefooter-actions .xaas-btn:hover{ transform: translateY(-2px) }
@media (max-width: 991px){
  .xaas-prefooter-actions{ justify-content:flex-start }
}

/* =========================================================
   KNOWLEDGE BASE (scoped to KB page only, no HTML changes)
   Targets common Gutenberg blocks on /knowledge-base/
========================================================= */

/* Scope to likely body classes to avoid bleed */
body.page-template-page-it-knowledgebase,
body.page-template-page-knowledge-base,
body.page-slug-knowledge-base,
body.page-knowledge-base{
  /* nothing here—just scoping */
}

/* ---------- KB Hero / Header band ---------- */
body.page-slug-knowledge-base .xaas-hero,
body.page-template-page-it-knowledgebase .xaas-hero{
  position:relative;
  padding:52px 0 36px;
  background:
    radial-gradient(1000px 420px at -10% -10%, rgba(14,165,233,.16), transparent 48%),
    radial-gradient(820px 320px at 110% -10%, rgba(37,99,235,.18), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f5f7ff 100%);
}
body.page-slug-knowledge-base .xaas-hero .xaas-hero-eyebrow,
body.page-template-page-it-knowledgebase .xaas-hero .xaas-hero-eyebrow{
  color:#2563eb; letter-spacing:.06em; text-transform:uppercase; font-weight:900;
}
body.page-slug-knowledge-base .xaas-hero h1,
body.page-template-page-it-knowledgebase .xaas-hero h1{
  color:#0b132a;
}
body.page-slug-knowledge-base .xaas-hero .xaas-hero-text,
body.page-template-page-it-knowledgebase .xaas-hero .xaas-hero-text{
  color:#394256; opacity:.98; max-width:70ch;
}

/* ---------- Search (Gutenberg wp-block-search) ---------- */
body.page-slug-knowledge-base .wp-block-search,
body.page-template-page-it-knowledgebase .wp-block-search{
  margin: 10px 0 16px;
}
body.page-slug-knowledge-base .wp-block-search__inside-wrapper,
body.page-template-page-it-knowledgebase .wp-block-search__inside-wrapper{
  display:flex; gap:8px; align-items:center;
  background:#fff; border:1px solid #dbe2f3; border-radius:14px;
  padding:8px 8px 8px 12px; box-shadow: var(--shadow-xs);
}
body.page-slug-knowledge-base .wp-block-search__input,
body.page-template-page-it-knowledgebase .wp-block-search__input{
  flex:1; border:0; outline:none; background:transparent; font:inherit; padding:8px 6px;
}
body.page-slug-knowledge-base .wp-block-search__button,
body.page-template-page-it-knowledgebase .wp-block-search__button{
  border:1px solid #dbe2f3; background:#fff; color:#0b132a; font-weight:900;
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
body.page-slug-knowledge-base .wp-block-search__button:hover,
body.page-template-page-it-knowledgebase .wp-block-search__button:hover{
  border-color:#c7d4ff; box-shadow:0 8px 20px rgba(2,6,23,.08);
}

/* ---------- KB Grid (Query Loop or Latest Posts) ---------- */
body.page-slug-knowledge-base .wp-block-query .wp-block-post-template,
body.page-template-page-it-knowledgebase .wp-block-query .wp-block-post-template,
body.page-slug-knowledge-base .wp-block-latest-posts,
body.page-template-page-it-knowledgebase .wp-block-latest-posts{
  display:grid !important;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  list-style:none; padding:0; margin:16px 0 0;
}
@media (max-width:991px){
  body.page-slug-knowledge-base .wp-block-query .wp-block-post-template,
  body.page-template-page-it-knowledgebase .wp-block-query .wp-block-post-template,
  body.page-slug-knowledge-base .wp-block-latest-posts,
  body.page-template-page-it-knowledgebase .wp-block-latest-posts{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:599px){
  body.page-slug-knowledge-base .wp-block-query .wp-block-post-template,
  body.page-template-page-it-knowledgebase .wp-block-query .wp-block-post-template,
  body.page-slug-knowledge-base .wp-block-latest-posts,
  body.page-template-page-it-knowledgebase .wp-block-latest-posts{
    grid-template-columns: 1fr;
  }
}

/* ---------- KB Card ---------- */
body.page-slug-knowledge-base .wp-block-post,
body.page-template-page-it-knowledgebase .wp-block-post,
body.page-slug-knowledge-base .wp-block-latest-posts__list li,
body.page-template-page-it-knowledgebase .wp-block-latest-posts__list li{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.page-slug-knowledge-base .wp-block-post:hover,
body.page-template-page-it-knowledgebase .wp-block-post:hover,
body.page-slug-knowledge-base .wp-block-latest-posts__list li:hover,
body.page-template-page-it-knowledgebase .wp-block-latest-posts__list li:hover{
  transform: translateY(-3px);
  border-color: #cdd6ff;
  box-shadow: var(--shadow-md);
}

/* Post title link */
body.page-slug-knowledge-base .wp-block-post-title a,
body.page-template-page-it-knowledgebase .wp-block-post-title a,
body.page-slug-knowledge-base .wp-block-latest-posts__post-title,
body.page-template-page-it-knowledgebase .wp-block-latest-posts__post-title{
  color:#0b132a; text-decoration:none; font-weight:900;
}
body.page-slug-knowledge-base .wp-block-post-title a:hover,
body.page-template-page-it-knowledgebase .wp-block-post-title a:hover,
body.page-slug-knowledge-base .wp-block-latest-posts__post-title:hover,
body.page-template-page-it-knowledgebase .wp-block-latest-posts__post-title:hover{
  color:#1d4ed8; text-decoration:underline; text-underline-offset:3px;
}

/* Excerpt & meta */
body.page-slug-knowledge-base .wp-block-post-excerpt__excerpt,
body.page-template-page-it-knowledgebase .wp-block-post-excerpt__excerpt{
  color:#4b5563; margin:.5rem 0 .25rem;
}
body.page-slug-knowledge-base .wp-block-post-date,
body.page-template-page-it-knowledgebase .wp-block-post-date{
  color:#6b7280; font-size:13px;
}

/* Category/tag pills (works for both Query Loop & Latest Posts with taxonomy displays) */
body.page-slug-knowledge-base .wp-block-post-terms,
body.page-template-page-it-knowledgebase .wp-block-post-terms{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:6px;
}
body.page-slug-knowledge-base .wp-block-post-terms a,
body.page-template-page-it-knowledgebase .wp-block-post-terms a{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background:#eef2ff; color:#27427a; font-weight:800; font-size:12px;
}

/* ---------- Sidebar widgets (if present) ---------- */
body.page-slug-knowledge-base .wp-block-categories,
body.page-template-page-it-knowledgebase .wp-block-categories,
body.page-slug-knowledge-base .wp-block-archives,
body.page-template-page-it-knowledgebase .wp-block-archives{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:14px; box-shadow: var(--shadow-sm);
}
body.page-slug-knowledge-base .wp-block-categories-list a,
body.page-template-page-it-knowledgebase .wp-block-categories-list a{
  display:flex; justify-content:space-between; gap:8px;
  padding:8px 10px; border:1px solid #e6ebf7; border-radius:10px; margin:6px 0; color:#0f172a; background:#fff;
}
body.page-slug-knowledge-base .wp-block-categories-list a:hover,
body.page-template-page-it-knowledgebase .wp-block-categories-list a:hover{
  border-color:#c7d4ff; background:#f6f9ff;
}

/* ---------- Breadcrumbs (RankMath) ---------- */
body.page-slug-knowledge-base .rank-math-breadcrumb,
body.page-template-page-it-knowledgebase .rank-math-breadcrumb{
  margin: 6px 0 12px; font-size:14px; color:#6b7280;
}
body.page-slug-knowledge-base .rank-math-breadcrumb a,
body.page-template-page-it-knowledgebase .rank-math-breadcrumb a{
  color:#1d4ed8; text-decoration:underline; text-underline-offset:3px;
}

/* ---------- Pagination ---------- */
body.page-slug-knowledge-base .wp-block-query-pagination,
body.page-template-page-it-knowledgebase .wp-block-query-pagination{
  display:flex; gap:8px; flex-wrap:wrap; margin:16px 0 0;
}
body.page-slug-knowledge-base .wp-block-query-pagination .wp-block-query-pagination-numbers a,
body.page-template-page-it-knowledgebase .wp-block-query-pagination .wp-block-query-pagination-numbers a,
body.page-slug-knowledge-base .wp-block-query-pagination-previous,
body.page-template-page-it-knowledgebase .wp-block-query-pagination-previous,
body.page-slug-knowledge-base .wp-block-query-pagination-next,
body.page-template-page-it-knowledgebase .wp-block-query-pagination-next{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:40px;
  padding:0 12px; border:1px solid #dbe2f3; border-radius:12px; background:#fff; color:#0b132a; font-weight:900;
}
body.page-slug-knowledge-base .wp-block-query-pagination a:hover,
body.page-template-page-it-knowledgebase .wp-block-query-pagination a:hover{
  border-color:#c7d4ff; box-shadow:0 8px 20px rgba(2,6,23,.08);
}

/* =========================================================
   LOCATION PAGES (template: page-service-area-region)
   - auto-styles headings, intro, feature list, city list, CTA
   - zero HTML changes required (uses structural selectors)
========================================================= */

body.page-template-page-service-area-region .xaas-section-service-areas{
  padding-top: 16px; /* tighter above fold */
}

/* --- Section header polish (the “Southern California coverage” band) --- */
body.page-template-page-service-area-region .xaas-section-header{
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(14,165,233,.10), transparent 48%),
    radial-gradient(900px 360px at 88% -20%, rgba(37,99,235,.10), transparent 50%),
    linear-gradient(180deg,#ffffff 0%, #f6f8ff 100%);
  border:1px solid #e6ebf7;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 16px 16px 14px;
}

body.page-template-page-service-area-region .xaas-section-header .xaas-section-eyebrow{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#27427a;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

body.page-template-page-service-area-region .xaas-section-header h2{
  margin:8px 0 6px;
  color:#0b132a;
  position:relative;
}
body.page-template-page-service-area-region .xaas-section-header h2::after{
  content:""; display:block; height:3px; width:64px; margin-top:8px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius:999px;
}

body.page-template-page-service-area-region .xaas-section-header p{
  color:#394256; opacity:.98; max-width:75ch;
}

/* --- Main content area typography (where your example text lives) --- */
body.page-template-page-service-area-region .xaas-page-content,
body.page-template-page-service-area-region .entry-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow-sm);
  padding:16px;
}

body.page-template-page-service-area-region .xaas-page-content h2,
body.page-template-page-service-area-region .entry-content h2{
  color:#0f172a; margin:10px 0 6px; line-height:1.2;
}

body.page-template-page-service-area-region .xaas-page-content h3,
body.page-template-page-service-area-region .entry-content h3{
  margin:10px 0 6px; color:#1e293b; font-weight:900;
}

body.page-template-page-service-area-region .xaas-page-content p,
body.page-template-page-service-area-region .entry-content p{
  color:#394256; margin:6px 0 8px; max-width:75ch;
}

/* --- FEATURE LIST (auto: first UL inside content becomes checklist) --- */
body.page-template-page-service-area-region .xaas-page-content > ul:first-of-type,
body.page-template-page-service-area-region .entry-content > ul:first-of-type{
  list-style:none; padding:0; margin:8px 0 4px;
  display:grid; gap:8px;
}

body.page-template-page-service-area-region .xaas-page-content > ul:first-of-type > li,
body.page-template-page-service-area-region .entry-content > ul:first-of-type > li{
  position:relative;
  padding:10px 10px 10px 40px;
  border:1px solid #e6ebf7;
  border-radius:14px;
  background:#fff;
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body.page-template-page-service-area-region .xaas-page-content > ul:first-of-type > li::before,
body.page-template-page-service-area-region .entry-content > ul:first-of-type > li::before{
  content:"";
  position:absolute; left:12px; top:12px; width:18px; height:18px; border-radius:5px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow: 0 0 0 2px #eef2ff inset, 0 6px 16px rgba(2,6,23,.18);
  -webkit-mask: 
    radial-gradient(circle at 35% 55%, #000 27%, transparent 28%) left 2px top 7px / 8px 8px no-repeat,
    linear-gradient(#000 0 0) left 6px top 9px / 6px 2px no-repeat,
    linear-gradient(#000 0 0) left 8px top 11px / 6px 2px no-repeat;
  mask: 
    radial-gradient(circle at 35% 55%, #000 27%, transparent 28%) left 2px top 7px / 8px 8px no-repeat,
    linear-gradient(#000 0 0) left 6px top 9px / 6px 2px no-repeat,
    linear-gradient(#000 0 0) left 8px top 11px / 6px 2px no-repeat;
}
body.page-template-page-service-area-region .xaas-page-content > ul:first-of-type > li:hover,
body.page-template-page-service-area-region .entry-content > ul:first-of-type > li:hover{
  transform: translateY(-2px);
  border-color:#cdd6ff;
  box-shadow: var(--shadow-md);
}

/* --- CITIES GRID (auto: last UL inside content becomes pills grid) --- */
body.page-template-page-service-area-region .xaas-page-content > ul:last-of-type,
body.page-template-page-service-area-region .entry-content > ul:last-of-type{
  list-style:none; padding:0; margin:10px 0 0;
  display:grid; gap:8px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 991px){
  body.page-template-page-service-area-region .xaas-page-content > ul:last-of-type,
  body.page-template-page-service-area-region .entry-content > ul:last-of-type{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 599px){
  body.page-template-page-service-area-region .xaas-page-content > ul:last-of-type,
  body.page-template-page-service-area-region .entry-content > ul:last-of-type{
    grid-template-columns: 1fr;
  }
}

body.page-template-page-service-area-region .xaas-page-content > ul:last-of-type > li,
body.page-template-page-service-area-region .entry-content > ul:last-of-type > li{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px;
  border:1px solid #e6ebf7;
  border-radius:12px;
  background:#f9fbff;
  color:#0f172a; font-weight:800;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  text-align:center;
}
body.page-template-page-service-area-region .xaas-page-content > ul:last-of-type > li:hover,
body.page-template-page-service-area-region .entry-content > ul:last-of-type > li:hover{
  border-color:#c7d4ff; background:#f6f9ff; transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}

/* --- Inline CTA at the bottom (auto-styled blockquote or last paragraph) --- */
body.page-template-page-service-area-region .xaas-page-content blockquote,
body.page-template-page-service-area-region .entry-content blockquote{
  margin:12px 0 0; padding:12px 14px;
  border:1px solid #e6ebf7; border-left:4px solid var(--brand);
  border-radius:14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
  color:#0f172a; font-weight:800;
  box-shadow: var(--shadow-xs);
}
body.page-template-page-service-area-region .xaas-page-content p:last-of-type{
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #e6ebf7; border-left:4px solid var(--accent);
  border-radius:14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  font-weight:700; color:#0f172a;
}

/* --- little helpers if editors add buttons/links inside content --- */
body.page-template-page-service-area-region .xaas-page-content a.xaas-btn,
body.page-template-page-service-area-region .entry-content a.xaas-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:8px;
  padding:10px 14px; border-radius:12px; font-weight:900; border:1px solid var(--brand);
  background: var(--brand); color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.28);
}
body.page-template-page-service-area-region .xaas-page-content a.xaas-btn:hover,
body.page-template-page-service-area-region .entry-content a.xaas-btn:hover{
  transform:translateY(-2px);
}

/*
Theme Name: XaaS Techs MSP
Description: Unified styles with brand-rich home hero, service areas, contact, about, knowledge base, and refined prefooter. Non-destructive to markup.
Author: XaaS Techs
Version: 1.1.0
*/

/* ===========================================
   0) Base & Tokens
=========================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
:root{
  --container:1280px;

  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;

  --brand:#2563eb;   /* primary blue */
  --accent:#0ea5e9;  /* cyan */
  --orange:#f97316;  /* CTA */
  --bg:#f6f7fb;
  --panel:#ffffff;
  --midnight:#0b1220;

  --radius:16px;     /* softened (was 14px) */
  --radius-lg:22px;  /* softened (was 18px) */

  --shadow-xs:0 2px 10px rgba(2,6,23,.06);
  --shadow-sm:0 6px 20px rgba(2,6,23,.08);
  --shadow-md:0 14px 40px rgba(2,6,23,.12);
  --shadow-lg:0 30px 80px rgba(2,6,23,.16);
}

body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6; /* more comfortable */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1{font-size:clamp(28px,3.2vw,44px);line-height:1.12;margin:0 0 .5rem}
h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin:0 0 .5rem}
h3{font-size:clamp(18px,2vw,22px);line-height:1.25;margin:0 0 .35rem}
p{margin:0 0 .75rem}
ul{padding-left:1.1rem;margin:.25rem 0}

.xaas-container{max-width:var(--container);margin:0 auto;padding:0 16px}

/* Utilities */
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--muted)}
.mb-0{margin-bottom:0}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}

/* ===========================================
   1) Topbar
=========================================== */
.xaas-topbar{background:var(--midnight);color:#fff;font-size:14px}
.xaas-topbar-inner{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.xaas-topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xaas-topbar-link{color:#fff;opacity:.95}
.xaas-topbar-link:hover{opacity:1;text-decoration:underline}
.xaas-topbar-sep{opacity:.5}
.xaas-topbar-icon svg{width:18px;height:18px;display:block}

/* ===========================================
   2) Header & Navigation
=========================================== */
.xaas-site-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.xaas-header-inner{min-height:70px;display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center}
.xaas-logo-img{height:42px;width:auto}

.xaas-nav{display:flex;justify-content:center}
.xaas-nav-list{list-style:none;margin:0;padding:0;display:flex;gap:18px;align-items:center}
.xaas-nav-list a{display:inline-block;padding:8px 10px;border-radius:10px;font-weight:700;color:#0f172a}
.xaas-nav-list a:hover{background:#f2f4f7}

.xaas-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:calc(var(--radius) + 4px);
  border:1px solid var(--line);background:#fff;color:var(--text);font-weight:800;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease
}
.xaas-btn--ghost{background:#fff}
.xaas-btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.xaas-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,.30)}

/* Mobile toggle */
.xaas-nav-toggle{
  display:none;border:1px solid var(--line);background:#fff;border-radius:12px;
  width:42px;height:42px;align-items:center;justify-content:center;cursor:pointer
}
.xaas-nav-toggle-bar{display:block;width:20px;height:2px;background:#111;border-radius:2px}

/* Mobile overlay drawer */
.xaas-nav-overlay{position:fixed;inset:0;z-index:60;background:rgba(2,6,23,.78);opacity:0;pointer-events:none;transition:opacity .18s ease}
.xaas-nav-overlay.is-open{opacity:1;pointer-events:auto}
.xaas-nav-drawer{position:fixed;inset:0;background:var(--midnight);color:#fff;display:flex;flex-direction:column;border-radius:var(--radius-lg)}
.xaas-nav-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.xaas-nav-overlay-close{
  width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:#fff;font-size:28px;line-height:1;cursor:pointer
}
.xaas-nav-mobile{padding:18px 16px 12px;overflow:auto;height:100%}
.xaas-mobile-menu{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xaas-mobile-menu a{display:block;padding:12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;color:#fff}
.xaas-mobile-menu a:hover{background:rgba(255,255,255,.06)}
.xaas-nav-overlay-cta{display:block;margin:16px 0 8px;text-align:center;background:var(--orange);border-color:var(--orange);color:var(--midnight);font-weight:900}

/* ===========================================
   3) Hero (base)
   - About/Contact default light; Home has dark variant
=========================================== */
.xaas-hero{padding:36px 0;background:#ffffff;position:relative}
.xaas-hero-eyebrow{font-weight:800;letter-spacing:.04em;text-transform:uppercase;opacity:.95;margin-bottom:6px;color:var(--text)}
.xaas-hero-text{opacity:.95;max-width:70ch;margin-bottom:16px;line-height:1.7}
.xaas-hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.xaas-home-hero-grid,.xaas-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}

/* Decorative art block */
.xaas-hero-art{
  min-height:220px;border-radius:var(--radius-lg);border:1px solid #e8eefb;
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(37,99,235,.08), transparent 40%),
    linear-gradient(180deg, rgba(37,99,235,.06), rgba(255,255,255,0));
  box-shadow:var(--shadow-sm);
  animation:floaty 8s ease-in-out infinite
}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}

/* Contact/Right panel (works on light & dark) */
.xaas-contact-hero-panel{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,#fff,rgba(255,255,255,.96));box-shadow:var(--shadow-sm);color:var(--text)}
.xaas-contact-hero-panel-inner{padding:16px}
.xaas-contact-hero-panel h2{margin-bottom:.35rem}
.xaas-contact-hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:.5rem 0 .75rem}
.xaas-contact-hero-meta>div{border:1px solid var(--line);border-radius:12px;padding:10px;background:#fafbff}
.xaas-contact-hero-note{font-size:.95rem;color:var(--muted)}

/* 3b) Home Hero – Brand-rich, darker (no HTML change) */
body.home .xaas-hero,
.xaas-hero--home{
  background:none; padding:56px 0 42px; position:relative; isolation:isolate;
}
body.home .xaas-hero::before,
.xaas-hero--home::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(14,165,233,.25), transparent 40%),
    radial-gradient(900px 380px at 90% 0%, rgba(37,99,235,.28), transparent 45%),
    linear-gradient(160deg, var(--midnight) 0%, #0e2a6c 38%, var(--brand) 62%, var(--accent) 100%);
}
body.home .xaas-hero::after,
.xaas-hero--home::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.14;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image: radial-gradient(1200px 600px at 40% 20%, #000 50%, transparent 70%);
}

/* Light-on-dark text for hero copy */
body.home .xaas-hero .xaas-hero-eyebrow,
.xaas-hero--home .xaas-hero-eyebrow{ color:#c7d2fe; opacity:1 }
body.home .xaas-hero h1,
.xaas-hero--home h1{ color:#fff }
body.home .xaas-hero .xaas-hero-text,
body.home .xaas-hero .xaas-hero-bullets,
.xaas-hero--home .xaas-hero-text,
.xaas-hero--home .xaas-hero-bullets{ color:#e6e9f5 }
body.home .xaas-hero .xaas-hero-bullets li,
.xaas-hero--home .xaas-hero-bullets li{ margin:.35rem 0 }

/* Panel adapts for dark */
body.home .xaas-hero .xaas-contact-hero-panel,
.xaas-hero--home .xaas-contact-hero-panel{
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  color:#f1f5ff; backdrop-filter:blur(6px);
}
body.home .xaas-hero .xaas-contact-hero-panel-inner,
.xaas-hero--home .xaas-contact-hero-panel-inner{ padding:16px }
body.home .xaas-hero .xaas-contact-hero-panel h2,
.xaas-hero--home .xaas-contact-hero-panel h2{ color:#fff }
body.home .xaas-hero .xaas-contact-hero-panel p,
.xaas-hero--home .xaas-contact-hero-panel p{ color:#e6ecff }
body.home .xaas-hero .xaas-contact-hero-meta>div,
.xaas-hero--home .xaas-contact-hero-meta>div{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e6f0ff;
}

/* Buttons on dark */
body.home .xaas-hero .xaas-btn--primary,
.xaas-hero--home .xaas-btn--primary{ background:var(--brand); border-color:var(--brand); color:#fff; box-shadow:0 8px 24px rgba(37,99,235,.45) }
body.home .xaas-hero .xaas-btn--primary:hover,
.xaas-hero--home .xaas-btn--primary:hover{ transform:translateY(-2px) }
body.home .xaas-hero .xaas-btn--ghost,
.xaas-hero--home .xaas-btn--ghost{ background:#fff; border-color:#fff; color:var(--text) }
body.home .xaas-hero .xaas-btn--orange,
.xaas-hero--home .xaas-btn--orange{ background:var(--orange); border-color:var(--orange); color:var(--midnight); box-shadow:0 8px 24px rgba(249,115,22,.45) }

/* Art block on dark */
body.home .xaas-hero .xaas-hero-art,
.xaas-hero--home .xaas-hero-art{
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(800px 240px at -10% -20%, rgba(14,165,233,.22), transparent 40%),
    radial-gradient(640px 200px at 110% 0%, rgba(37,99,235,.22), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow:0 30px 80px rgba(2,6,23,.45);
}

/* Header line visible above dark hero */
body.home .xaas-site-header{ border-bottom:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.98) }
body.home .xaas-topbar{ box-shadow:0 1px 0 rgba(255,255,255,.08) }

/* ===========================================
   4) Sections, Cards, Grids, Steps
=========================================== */
.xaas-section{padding:28px 0}
.xaas-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.xaas-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease
}
.xaas-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.xaas-checklist{margin:.25rem 0 0;padding-left:1.1rem}
.xaas-checklist li{margin:.25rem 0}

.xaas-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xaas-step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.xaas-step .num{font-weight:900;color:var(--brand);font-size:18px;margin-bottom:6px}

/* ===========================================
   5) Contact Layout & Form
=========================================== */
.xaas-contact-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:16px;align-items:start}
@media (max-width:991px){ .xaas-contact-grid{grid-template-columns:1fr} }

.xaas-contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.xaas-contact-form-wrap h2{margin-bottom:6px}
.xaas-section-lead{color:#4b5563;margin-bottom:12px}

.xaas-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:599px){ .xaas-form-row{grid-template-columns:1fr} }

.xaas-contact-form label{font-weight:800;display:block;margin:0 0 6px}
.xaas-contact-form label span{color:#ef4444}

.xaas-contact-form input[type="text"],
.xaas-contact-form input[type="email"],
.xaas-contact-form input[type="tel"],
.xaas-contact-form select,
.xaas-contact-form textarea{
  width:100%;appearance:none;border:1px solid #d3daea;background:#fff;border-radius:var(--radius);
  padding:10px 12px;font:inherit;color:#0f172a;transition:border-color .15s ease, box-shadow .15s ease;
}
.xaas-contact-form textarea{min-height:140px;resize:vertical}
.xaas-contact-form input:focus,
.xaas-contact-form select:focus,
.xaas-contact-form textarea:focus{outline:none;border-color:#8aa6ff;box-shadow:0 0 0 4px rgba(37,99,235,.18)}
.xaas-contact-form .is-invalid{border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.xaas-contact-form .is-valid{border-color:#22c55e !important; box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.xaas-field-honeypot{position:absolute !important; left:-999em; width:1px; height:1px; overflow:hidden}

.xaas-form-footer{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.xaas-form-footnote{color:#6b7280;margin:0}
#xaas-contact-submit{
  min-width:220px;
  background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%);
  border-color:transparent;color:#fff;font-weight:900;box-shadow:0 12px 28px rgba(37,99,235,.35)
}
#xaas-contact-submit:hover{transform:translateY(-2px)}
#xaas-contact-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* Thank-you overlay */
.xaas-contact-thanks-overlay{position:fixed;inset:0;display:none;z-index:60}
.xaas-contact-thanks-overlay.is-visible{display:block}
.xaas-contact-thanks-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.75);backdrop-filter:saturate(120%) blur(3px)}
.xaas-contact-thanks-modal{
  position:relative;max-width:480px;margin:10vh auto 0;background:#fff;border-radius:var(--radius-lg);
  padding:1.75rem 1.6rem;box-shadow:0 26px 70px rgba(2,6,23,.35);z-index:1;border:1px solid #e5e7eb
}
.xaas-contact-thanks-modal h2{margin:0 0 .6rem}
.xaas-contact-thanks-modal p{margin:0 0 1.2rem;font-size:.95rem}
.xaas-contact-thanks-modal a{color:#2563eb;font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ===========================================
   6) Pre-footer & Footer (polished)
=========================================== */
.xaas-prefooter{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--radius-lg);
  background:
    radial-gradient(900px 360px at 15% -10%, rgba(255,255,255,.14), transparent 46%),
    radial-gradient(900px 360px at 85% 0%, rgba(255,255,255,.10), transparent 50%),
    linear-gradient(135deg,var(--accent) 0%,var(--brand) 42%,var(--midnight) 140%);
}
.xaas-prefooter::after{
  content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:28px 28px;
}
.xaas-prefooter-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center;padding:20px 0}
.xaas-prefooter-eyebrow{font-weight:900;letter-spacing:.04em;opacity:.95}
.xaas-prefooter-title{font-size:clamp(22px,2.6vw,36px);line-height:1.15;margin:6px 0 8px}
.xaas-prefooter-tagline{opacity:.95;max-width:68ch}
.xaas-prefooter-actions{display:flex;justify-content:flex-start}
.xaas-prefooter .xaas-btn{
  background:#fff;border-color:#fff;color:#0b1220;font-weight:900;box-shadow:0 14px 32px rgba(255,255,255,.18)
}
.xaas-prefooter .xaas-btn:hover{
  transform:translateY(-2px);box-shadow:0 18px 42px rgba(255,255,255,.22)
}

.xaas-footer-wrapper{background:#0b122a}
.xaas-footer{padding:28px 0;color:#fff;background:#0b122a}
.xaas-footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:12px}
.xaas-footer-heading{font-size:16px;margin-bottom:8px;font-weight:900}
.xaas-footer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.xaas-footer-list a{opacity:.95}
.xaas-footer-list a:hover{opacity:1;text-decoration:underline}
.xaas-footer-bottom{border-top:1px solid rgba(255,255,255,.08);display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding-top:10px;color:#d1d5db}

/* ===========================================
   7) About Page – Hero + Sections + Stats
=========================================== */
.xaas-about-hero{
  position:relative;padding:56px 0 44px;color:#eef3ff;overflow:hidden;
  background:
    radial-gradient(1200px 520px at -10% -20%, rgba(14,165,233,.18), transparent 42%),
    radial-gradient(900px 420px at 110% -10%, rgba(37,99,235,.22), transparent 48%),
    linear-gradient(160deg, var(--midnight) 0%, #0e2a6c 38%, var(--brand) 62%, var(--accent) 100%);
}
.xaas-about-hero .xaas-hero-eyebrow{color:#cbd9ff;opacity:.96}
.xaas-about-hero h1{color:#fff}
.xaas-about-hero .xaas-hero-text{color:#e7edff;opacity:.98}
.xaas-about-hero .xaas-hero-bullets{margin:10px 0 0;padding:0;list-style:none;color:#e3eaff}
.xaas-about-hero .xaas-hero-bullets li{position:relative;padding-left:26px;margin:6px 0}
.xaas-about-hero .xaas-hero-bullets li::before{
  content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;
  background:conic-gradient(from 0deg,#fff,#9cc8ff);
  box-shadow:0 0 0 2px rgba(255,255,255,.18) inset, 0 4px 12px rgba(0,0,0,.22);
}
.xaas-about-hero .xaas-hero-tech-bg{position:absolute;inset:-20% -10% auto -10%;height:200%;background:radial-gradient(420px 220px at 80% 20%, rgba(255,255,255,.18), transparent 60%);opacity:.35;pointer-events:none}
.xaas-about-hero .xaas-home-hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:center}
@media (max-width:1199px){ .xaas-about-hero .xaas-home-hero-grid{grid-template-columns:1fr} }
.xaas-about-hero .xaas-contact-hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  box-shadow:0 18px 50px rgba(0,0,0,.28);color:#f8fbff;
}
.xaas-about-hero .xaas-contact-hero-panel-inner{padding:18px}
.xaas-about-hero .xaas-contact-hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.xaas-about-hero .xaas-contact-hero-note{color:#deebff;opacity:.95}
@media (max-width:599px){ .xaas-about-hero .xaas-contact-hero-meta{grid-template-columns:1fr 1fr} }

.xaas-about-section{background:#f8f9fe;padding:32px 0 20px}
.xaas-about-section--alt{
  background:
    radial-gradient(900px 340px at 10% -20%, rgba(37,99,235,.10), transparent 48%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
}
.xaas-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.xaas-about-column{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.xaas-about-column:hover{box-shadow:var(--shadow-md)}
.xaas-about-list{margin:.25rem 0 0;padding:0;list-style:none}
.xaas-about-list li{position:relative;padding-left:26px;margin:.45rem 0}
.xaas-about-list li::before{
  content:"";position:absolute;left:0;top:.45rem;width:14px;height:14px;border-radius:4px;
  background:linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  box-shadow:0 0 0 2px #eaf1ff inset, 0 6px 16px rgba(2,6,23,.18);
}

/* Stats band */
.xaas-about-stats{background:linear-gradient(180deg,#0b1220 0%,#0f1930 100%);color:#eaf0ff;padding:24px 0}
.xaas-about-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.xaas-about-stat{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:14px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.28)}
.xaas-about-stat-number{font-weight:900;letter-spacing:.02em;font-size:clamp(22px,2.4vw,30px);color:#fff}
.xaas-about-stat-label{font-size:14px;color:#d3dfff;opacity:.95;margin-top:4px}
@media (max-width:991px){ .xaas-about-stats-grid{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .xaas-about-stats-grid{grid-template-columns:1fr} }

/* ===========================================
   Service Areas – Hero + Cards + Lists
=========================================== */
.xaas-service-areas-hero{
  position:relative;padding:56px 0 40px;color:#0b132a;overflow:hidden;
  background:
    radial-gradient(900px 360px at 12% -10%, rgba(14,165,233,.16), transparent 48%),
    radial-gradient(900px 360px at 88% -20%, rgba(37,99,235,.16), transparent 50%),
    linear-gradient(180deg,#ffffff 0%, #f5f7ff 100%);
}
.xaas-service-areas-hero .xaas-hero-eyebrow{color:#2563eb;opacity:.95}
.xaas-service-areas-hero h1{color:#0b132a}
.xaas-service-areas-hero .xaas-hero-text{color:#394256;opacity:.98;max-width:70ch}
.xaas-service-areas-hero .xaas-hero-ctas .xaas-btn{box-shadow:0 10px 26px rgba(37,99,235,.25)}
.xaas-service-areas-hero .xaas-hero-art{
  border:1px solid #e2e8ff;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(255,255,255,.8), transparent 70%),
    linear-gradient(180deg, rgba(37,99,235,.08), rgba(14,165,233,.06)),
    #f9fbff;
  box-shadow:0 24px 60px rgba(2,6,23,.10);
}

/* Regions grid */
.xaas-region-grid,.xaas-service-areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:991px){ .xaas-region-grid,.xaas-service-areas-grid{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .xaas-region-grid,.xaas-service-areas-grid{grid-template-columns:1fr} }

.xaas-region-card,.xaas-area-card,.xaas-service-area-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.xaas-region-card:hover,.xaas-area-card:hover,.xaas-service-area-card:hover{
  transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d6ddf7
}
.xaas-region-card h3{margin-bottom:6px;font-size:clamp(16px,1.8vw,18px)}
.xaas-region-card p{color:#4b5563}
.xaas-region-list,.xaas-locations{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.xaas-region-list a,.xaas-locations a{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e6ebf7;border-radius:10px;color:#0f172a;background:#fff
}
.xaas-region-list a:hover,.xaas-locations a:hover{border-color:#c7d4ff;background:#f6f9ff}
.xaas-badge,.xaas-area-pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2ff;color:#27427a;font-weight:700;font-size:12px}

/* Service-area page spacing */
body.page-template-page-service-areas .xaas-section{padding:28px 0}
body.page-template-page-service-areas .xaas-about-section--alt{
  background:
    radial-gradient(900px 340px at 10% -20%, rgba(37,99,235,.08), transparent 50%),
    linear-gradient(180deg,#ffffff 0%,#f6f8ff 100%);
}

/* Content block styling for “Key Services”, “Cities We Serve”, etc. */
.xaas-region-content{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:991px){ .xaas-region-content{grid-template-columns:1fr} }
.xaas-region-text,.xaas-region-aside{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)
}
.xaas-region-text h3{margin:.35rem 0 .35rem}
.xaas-region-text p{line-height:1.7}
.xaas-region-text ul{margin:.35rem 0 0}
.xaas-region-aside h4{margin:0 0 .35rem;font-size:16px}

/* ===========================================
   Contact Page – Hero variant
=========================================== */
.xaas-contact-hero{
  position:relative;padding:56px 0 40px;color:#eef3ff;overflow:hidden;
  background:
    radial-gradient(1100px 480px at -10% -20%, rgba(14,165,233,.20), transparent 44%),
    radial-gradient(900px 360px at 110% -10%, rgba(37,99,235,.26), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #0e245c 48%, #123b9c 100%);
}
.xaas-contact-hero .xaas-hero-eyebrow{color:#cbd9ff}
.xaas-contact-hero h1{color:#fff}
.xaas-contact-hero .xaas-hero-text{color:#e5edff;opacity:.98}
.xaas-contact-hero .xaas-hero-bullets{color:#dfe7ff;margin:10px 0 0;padding:0;list-style:none}
.xaas-contact-hero .xaas-hero-bullets li{position:relative;padding-left:26px;margin:6px 0}
.xaas-contact-hero .xaas-hero-bullets li::before{
  content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;
  background:linear-gradient(135deg,#fff,#a7c5ff);
  box-shadow:0 0 0 2px rgba(255,255,255,.16) inset, 0 4px 12px rgba(0,0,0,.25)
}
.xaas-contact-hero .xaas-contact-hero-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);box-shadow:0 18px 50px rgba(0,0,0,.35);color:#f8fbff
}
.xaas-contact-hero .xaas-contact-hero-panel-inner{padding:18px}
.xaas-contact-hero .xaas-contact-hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.xaas-contact-hero .xaas-contact-hero-meta a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.xaas-contact-hero .xaas-contact-hero-note{color:#deebff;opacity:.95}
@media (max-width:599px){ .xaas-contact-hero .xaas-contact-hero-meta{grid-template-columns:1fr 1fr} }

/* ===========================================
   Knowledge Base – cards + category grid + search
=========================================== */
.kb-wrapper{padding:28px 0}
.kb-header{text-align:center;margin-bottom:16px}
.kb-eyebrow{font-weight:900;letter-spacing:.04em;color:#2563eb;margin-bottom:6px}
.kb-title{font-size:clamp(22px,2.6vw,34px);margin:0 0 .35rem}
.kb-subtitle{color:#4b5563;max-width:72ch;margin:0 auto}

.kb-search{margin:16px auto 12px;max-width:760px;display:flex;gap:8px}
.kb-search input[type="search"]{
  flex:1;border:1px solid #d3daea;border-radius:var(--radius);
  padding:12px 14px;font:inherit
}
.kb-search button{
  padding:12px 16px;border-radius:calc(var(--radius) + 4px);border:1px solid var(--brand);
  background:var(--brand);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(37,99,235,.22)
}
.kb-search button:hover{transform:translateY(-2px)}

.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
@media (max-width:991px){ .kb-grid{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .kb-grid{grid-template-columns:1fr} }

.kb-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease
}
.kb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d6ddf7}
.kb-card h3{margin:0 0 6px;font-size:18px}
.kb-card p{color:#475569;margin:0 0 10px}
.kb-meta{font-size:12px;color:#6b7280}

/* KB article list styling */
.kb-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.kb-list a{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e6ebf7;border-radius:10px;background:#fff}
.kb-list a:hover{border-color:#c7d4ff;background:#f6f9ff}

/* ===========================================
   Responsive
=========================================== */
@media (max-width:1199px){
  .xaas-home-hero-grid,.xaas-hero-grid{grid-template-columns:1fr}
  .xaas-prefooter-inner{grid-template-columns:1fr}
}
@media (max-width:991px){
  .xaas-nav{display:none} /* hide desktop nav */
  .xaas-nav-toggle{display:inline-flex}
  .xaas-footer-grid{grid-template-columns:1fr 1fr}
  .xaas-grid-3{grid-template-columns:1fr 1fr}
  .xaas-steps{grid-template-columns:1fr 1fr}
  .xaas-form-row{grid-template-columns:1fr}
  .xaas-contact-hero-meta{grid-template-columns:1fr 1fr}
}
@media (max-width:599px){
  .xaas-footer-grid{grid-template-columns:1fr}
  .xaas-grid-3{grid-template-columns:1fr}
  .xaas-steps{grid-template-columns:1fr}
  .xaas-contact-hero-meta{grid-template-columns:1fr}
}

/* ===========================================
   Little Polish / Safe Keepers
=========================================== */
html::before{content:"";display:block;height:3px;background:var(--brand)}
.xaas-hero--blue{outline:0 solid transparent;box-shadow:inset 0 0 0 9999px rgba(37,99,235,.00)}
/* Extra readability inside cards/sections */
.xaas-card p,
.xaas-service-area-card p,
.xaas-contact-card p,
.xaas-page-content p,
.entry-content p{line-height:1.7}

.esh-410 {
  padding: 4rem 1.5rem;
}
.esh-410-inner {
  max-width: 720px;
  margin: 0 auto;
}
.esh-410 h1 {
  margin-bottom: 1rem;
}
.esh-410 p {
  margin-bottom: 1rem;
}
.esh-410-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.esh-410-links h2 {
  margin-bottom: 0.5rem;
}
.esh-410-links ul {
  padding-left: 1.2rem;
  margin: 0 0 1.5rem;
}
.esh-410-links li {
  margin: 0.25rem 0;
}
.esh-410-meta {
  font-size: 0.9rem;
  opacity: 0.8;
}
@media (max-width: 640px) {
  .esh-410 {
    padding: 3rem 1.25rem;
  }
  .esh-410-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===========================
   XaaS Layout Helpers
   =========================== */

.xaas-main {
  min-height: 100vh;
}

/* Container */
.xaas-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Generic buttons */
.xaas-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease;
  white-space: nowrap;
}

.xaas-btn-primary {
  background: #f97316; /* XaaS orange */
  color: #111827;
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.35);
}

.xaas-btn-primary:hover {
  background: #ea580c;
  box-shadow: 0 16px 40px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
}

.xaas-btn-outline {
  background: transparent;
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.9);
}

.xaas-btn-outline:hover {
  background: rgba(249, 115, 22, 0.08);
  border-color: #f97316;
}

/* Outline button for dark backgrounds */
.xaas-btn-outline-on-dark {
  background: transparent;
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.85);
}

.xaas-btn-outline-on-dark:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: #fbbf24;
}

/* ===========================
   HERO
   =========================== */

.xaas-hero {
  position: relative;
  overflow: hidden;
  color: #f9fafb;
}

/* Subtle animated techy background */
.xaas-home-hero {
  padding: 4.5rem 0 3.5rem;
  background: radial-gradient(circle at top left, #0f172a 0, #020617 45%, #020617 100%);
}

.xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 20%, rgba(56, 189, 248, 0.22), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(249, 115, 22, 0.26), transparent 52%),
    radial-gradient(circle at 50% 85%, rgba(59, 130, 246, 0.18), transparent 55%);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: xaasHeroGlow 16s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes xaasHeroGlow {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate3d(-8px, 6px, 0) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translate3d(6px, -8px, 0) scale(1.03);
    opacity: 0.9;
  }
}

/* Hero grid layout */
.xaas-home-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.25rem;
}

@media (min-width: 900px) {
  .xaas-home-hero-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: flex-start;
  }
}

/* Left side copy */
.xaas-home-hero-copy {
  max-width: 640px;
}

.xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c7d2fe;
  margin-bottom: 0.9rem;
}

.xaas-hero-title {
  font-size: clamp(2.1rem, 3vw + 1rem, 3.1rem);
  line-height: 1.05;
  margin: 0 0 0.8rem;
}

.xaas-hero-subtitle {
  margin: 0 0 1.4rem;
  font-size: 1rem;
  color: #e5e7eb;
  max-width: 34rem;
}

.xaas-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.xaas-hero-meta {
  margin: 0;
  font-size: 0.85rem;
  color: #cbd5f5;
}

/* Right side hero column */
.xaas-home-hero-side {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

/* Trust + stats card */
.xaas-hero-trust-card {
  background: rgba(15, 23, 42, 0.96);
  color: #f9fafb;
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  max-width: 360px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.4);
}

.xaas-hero-trust-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin: 0 0 0.55rem;
}

.xaas-hero-trust-title {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 0 0.15rem;
}

.xaas-hero-trust-subtitle {
  font-size: 0.9rem;
  color: #e5e7eb;
  margin: 0 0 0.85rem;
}

.xaas-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.1rem;
  margin: 0;
}

.xaas-hero-stat {
  display: flex;
  flex-direction: column;
}

.xaas-hero-stat dt {
  font-weight: 700;
  font-size: 1.02rem;
  color: #f97316;
  margin-bottom: 0.1rem;
}

.xaas-hero-stat dd {
  margin: 0;
  font-size: 0.8rem;
  color: #e5e7eb;
}

@media (max-width: 899px) {
  .xaas-home-hero {
    padding: 3.4rem 0 3rem;
  }

  .xaas-hero-trust-card {
    margin-top: 1.6rem;
    max-width: 100%;
  }

  .xaas-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===========================
   Generic Sections
   =========================== */

.xaas-section {
  padding: 3.5rem 0;
}

.xaas-section-light {
  background: #f9fafb;
  color: #111827;
}

.xaas-section-dark {
  background: #020617;
  color: #e5e7eb;
}

/* Section headings */
.xaas-section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.2rem;
}

.xaas-section-header h2 {
  font-size: 1.8rem;
  margin: 0 0 0.4rem;
}

.xaas-section-header p {
  margin: 0;
  font-size: 0.98rem;
  color: #4b5563;
}

.xaas-section-header-on-dark p {
  color: #9ca3af;
}

/* Section grid helpers */
.xaas-section-grid {
  display: grid;
  gap: 1.7rem;
}

.xaas-section-grid-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.xaas-section-grid-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .xaas-section-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xaas-section-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Cards */
.xaas-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.xaas-card h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.xaas-card p {
  margin: 0;
  font-size: 0.92rem;
  color: #4b5563;
}

/* Cards on dark sections */
.xaas-card-on-dark {
  background: radial-gradient(circle at top left, #0f172a, #020617);
  border-color: rgba(30, 64, 175, 0.6);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.7);
}

.xaas-card-on-dark p {
  color: #d1d5db;
}

/* Checklist for services section */
.xaas-checklist {
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  font-size: 0.88rem;
}

.xaas-checklist li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.35rem;
}

.xaas-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-size: 0.85rem;
  color: #22c55e;
}

/* ===========================
   Service Areas
   =========================== */

.xaas-section-service-areas .xaas-card h3 {
  font-size: 1rem;
}

.xaas-section-service-areas .xaas-card p {
  font-size: 0.9rem;
}

/* ===========================
   Knowledge Base Teaser
   =========================== */

.xaas-section-knowledgebase {
  background: radial-gradient(circle at top left, #0f172a, #020617);
}

.xaas-knowledgebase-inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .xaas-knowledgebase-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.xaas-knowledgebase-copy {
  max-width: 520px;
}

.xaas-knowledgebase-copy h2 {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
}

.xaas-knowledgebase-copy p {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  color: #d1d5db;
}

.xaas-knowledgebase-meta {
  font-size: 0.9rem;
  color: #9ca3af;
}

.xaas-taglist {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.xaas-taglist li {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  font-size: 0.8rem;
}

/* ===========================
   Pre-Footer CTA
   =========================== */

.xaas-prefooter-cta {
  background: #020617;
  color: #f9fafb;
  padding: 2.8rem 0 3rem;
  border-top: 1px solid rgba(15, 23, 42, 0.9);
}

.xaas-prefooter-cta-inner {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: flex-start;
}

@media (min-width: 900px) {
  .xaas-prefooter-cta-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.xaas-prefooter-copy h2 {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
}

.xaas-prefooter-copy p {
  margin: 0;
  font-size: 0.95rem;
  color: #d1d5db;
}

.xaas-prefooter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Make prefooter CTA full-width on desktop */
@media (min-width: 1024px) {
  .xaas-prefooter-cta {
    padding-left: 0;
    padding-right: 0;
  }

  .xaas-prefooter-cta .xaas-container {
    max-width: none;
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

/* ===========================
   About XaaS Techs – Hero Tidy
   (scoped to /about-xaas-techs/)
   =========================== */

body.page-about-xaas-techs .xaas-hero {
  position: relative;
  padding: 3.4rem 0 2.8rem;
  background: linear-gradient(135deg, #020617 0%, #020617 55%, #0f172a 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* Soften the animated background if you reuse .xaas-hero-tech-bg there */
body.page-about-xaas-techs .xaas-hero-tech-bg {
  opacity: 0.7;
  animation-duration: 20s;
}

/* Layout inside the hero */
body.page-about-xaas-techs .xaas-hero .xaas-container {
  position: relative;
  z-index: 1;
  max-width: 1100px;
}

/* Two-column feel on desktop, stacked on mobile */
body.page-about-xaas-techs .xaas-hero-inner {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  body.page-about-xaas-techs .xaas-hero-inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: flex-start;
  }
}

/* If you don’t already have .xaas-hero-inner, this will still help by
   just tightening the text styles below. */

/* Eyebrow “About XaaS Techs” */
body.page-about-xaas-techs .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c7d2fe;
  margin-bottom: 0.9rem;
}

/* Main title */
body.page-about-xaas-techs .xaas-hero h1,
body.page-about-xaas-techs .xaas-about-title {
  font-size: clamp(2rem, 2.4vw + 1rem, 2.7rem);
  line-height: 1.1;
  margin: 0 0 0.7rem;
}

/* Lead paragraph */
body.page-about-xaas-techs .xaas-hero-lead,
body.page-about-xaas-techs .xaas-hero > .xaas-container > p:first-of-type {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: #e5e7eb;
  max-width: 38rem;
}

/* Supporting paragraphs */
body.page-about-xaas-techs .xaas-hero p {
  font-size: 0.95rem;
  color: #cbd5f5;
}

/* Little chip/badge row if you use spans for quick facts */
body.page-about-xaas-techs .xaas-about-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

body.page-about-xaas-techs .xaas-about-badges span {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.75);
  font-size: 0.8rem;
  color: #e5e7eb;
  background: rgba(15, 23, 42, 0.7);
}

/* Optional “facts” list on the right side, if present */
body.page-about-xaas-techs .xaas-about-facts {
  background: rgba(15, 23, 42, 0.98);
  border-radius: 18px;
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(148, 163, 184, 0.5);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
}

body.page-about-xaas-techs .xaas-about-facts h2 {
  margin: 0 0 0.7rem;
  font-size: 1.1rem;
}

body.page-about-xaas-techs .xaas-about-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.page-about-xaas-techs .xaas-about-facts li {
  margin-bottom: 0.7rem;
}

body.page-about-xaas-techs .xaas-about-facts li:last-child {
  margin-bottom: 0;
}

body.page-about-xaas-techs .xaas-about-facts strong {
  display: block;
  color: #f97316;
  margin-bottom: 0.12rem;
  font-size: 0.9rem;
}

body.page-about-xaas-techs .xaas-about-facts span {
  display: block;
  color: #e5e7eb;
  font-size: 0.86rem;
}

/* Mobile spacing tweaks */
@media (max-width: 899px) {
  body.page-about-xaas-techs .xaas-hero {
    padding: 3rem 0 2.4rem;
  }

  body.page-about-xaas-techs .xaas-about-facts {
    margin-top: 1.4rem;
  }
}

/* ===========================
   ABOUT PAGE – WHITE BOX TEXT
   =========================== */

/* Scope to About XaaS page only */
body.page-id-1117,
body.page-about-xaas-techs-en {
  /* nothing here, just scoping for the rules below */
}

/* Hero right-side white panel */
body.page-id-1117 .xaas-contact-hero-panel,
body.page-about-xaas-techs-en .xaas-contact-hero-panel {
  background: #ffffff;
  color: #111827;
}

body.page-id-1117 .xaas-contact-hero-panel-inner,
body.page-about-xaas-techs-en .xaas-contact-hero-panel-inner {
  color: #111827;
}

body.page-id-1117 .xaas-contact-hero-panel h2,
body.page-about-xaas-techs-en .xaas-contact-hero-panel h2 {
  color: #111827;
}

body.page-id-1117 .xaas-contact-hero-panel p,
body.page-about-xaas-techs-en .xaas-contact-hero-panel p {
  color: #374151;
}

body.page-id-1117 .xaas-contact-hero-meta div,
body.page-about-xaas-techs-en .xaas-contact-hero-meta div {
  color: #111827;
}

body.page-id-1117 .xaas-contact-hero-meta strong,
body.page-about-xaas-techs-en .xaas-contact-hero-meta strong {
  color: #111827;
}

/* Main About sections (light/white areas) */
body.page-id-1117 .xaas-about-section,
body.page-about-xaas-techs-en .xaas-about-section {
  background: #f9fafb;
  color: #111827;
}

body.page-id-1117 .xaas-about-section h2,
body.page-about-xaas-techs-en .xaas-about-section h2 {
  color: #111827;
}

body.page-id-1117 .xaas-about-section p,
body.page-about-xaas-techs-en .xaas-about-section p {
  color: #374151;
}

body.page-id-1117 .xaas-about-section .xaas-about-list li,
body.page-about-xaas-techs-en .xaas-about-section .xaas-about-list li {
  color: #374151;
}

body.page-id-1117 .xaas-about-section .xaas-about-list strong,
body.page-about-xaas-techs-en .xaas-about-section .xaas-about-list strong {
  color: #111827;
}

/* Alt About section (still light) */
body.page-id-1117 .xaas-about-section--alt,
body.page-about-xaas-techs-en .xaas-about-section--alt {
  background: #ffffff;
  color: #111827;
}

body.page-id-1117 .xaas-about-section--alt h2,
body.page-about-xaas-techs-en .xaas-about-section--alt h2 {
  color: #111827;
}

body.page-id-1117 .xaas-about-section--alt p,
body.page-about-xaas-techs-en .xaas-about-section--alt p {
  color: #374151;
}

body.page-id-1117 .xaas-about-section--alt .xaas-about-list li,
body.page-about-xaas-techs-en .xaas-about-section--alt .xaas-about-list li {
  color: #374151;
}

body.page-id-1117 .xaas-about-section--alt .xaas-about-list strong,
body.page-about-xaas-techs-en .xaas-about-section--alt .xaas-about-list strong {
  color: #111827;
}
/* ==============================
   SERVICE AREAS – HERO CLEANUP
   (page-id-933 / /service-areas/)
   ============================== */

body.page-id-933 .xaas-hero.xaas-home-hero {
  position: relative;
  padding: 3.4rem 0 3rem;
  background: linear-gradient(135deg, #020617 0%, #020617 55%, #0f172a 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* soften the animated BG */
body.page-id-933 .xaas-hero-tech-bg {
  opacity: 0.7;
}

/* keep hero content at a comfortable width */
body.page-id-933 .xaas-home-hero .xaas-container {
  max-width: 1100px;
}

/* layout tweaks */
body.page-id-933 .xaas-home-hero-grid {
  align-items: flex-start;
  gap: 2.2rem;
}

/* left copy */
body.page-id-933 .xaas-home-hero-copy {
  max-width: 620px;
}

/* eyebrow */
body.page-id-933 .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.55);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #c7d2fe;
  margin-bottom: 0.9rem;
}

/* title */
body.page-id-933 .xaas-home-hero h1 {
  font-size: clamp(2.1rem, 2.4vw + 1rem, 2.8rem);
  line-height: 1.1;
  margin: 0 0 0.7rem;
}

/* subtitle */
body.page-id-933 .xaas-hero-subtitle {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: #e5e7eb;
}

/* small tagline “Where we typically work” */
body.page-id-933 .xaas-hero-tagline {
  margin-top: 0.9rem;
  margin-bottom: 0.25rem;
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
}

/* list of regions */
body.page-id-933 .xaas-hero-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
}

body.page-id-933 .xaas-hero-list li {
  font-size: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.55);
  color: #e5e7eb;
}

/* hero CTA */
body.page-id-933 .xaas-hero-ctas {
  margin-top: 0.8rem;
}

/* right card */
body.page-id-933 .xaas-home-hero-media {
  display: flex;
  justify-content: flex-end;
}

body.page-id-933 .xaas-home-hero-card {
  background: #ffffff;
  color: #111827;
  border-radius: 18px;
  padding: 1.4rem 1.5rem;
  max-width: 360px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(10px);
}

body.page-id-933 .xaas-home-hero-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  color: #111827;
}

body.page-id-933 .xaas-home-hero-card p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  color: #374151;
}

body.page-id-933 .xaas-home-hero-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: #4b5563;
}

body.page-id-933 .xaas-home-hero-card li + li {
  margin-top: 0.35rem;
}

/* mobile spacing */
@media (max-width: 899px) {
  body.page-id-933 .xaas-hero.xaas-home-hero {
    padding: 3rem 0 2.4rem;
  }

  body.page-id-933 .xaas-home-hero-media {
    margin-top: 1.4rem;
    justify-content: flex-start;
  }

  body.page-id-933 .xaas-home-hero-card {
    max-width: 100%;
  }
}

/* ============================================
   KNOWLEDGE BASE (page-id-177)
   Hero + search + article cards
   ============================================ */

/* HERO WRAPPER */
body.page-id-177 .xaas-hero.xaas-kb-hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  background: radial-gradient(circle at top left, #1d4ed8 0%, #020617 45%, #020617 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* Animated tech background */
body.page-id-177 .xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(59,130,246,.65) 0, transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(56,189,248,.45) 0, transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(139,92,246,.3) 0, transparent 45%);
  animation: xaas-kb-orbit 26s linear infinite alternate;
}

@keyframes xaas-kb-orbit {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.32;
  }
  50% {
    transform: translate3d(-12px, -8px, 0) scale(1.03);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(10px, 6px, 0) scale(1.02);
    opacity: 0.36;
  }
}

/* Soft animated halo behind hero content */
body.page-id-177 .xaas-kb-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96,165,250,.5), transparent 60%);
  top: -180px;
  right: -140px;
  opacity: 0.35;
  filter: blur(4px);
  animation: xaas-kb-pulse 18s ease-in-out infinite;
}

@keyframes xaas-kb-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.32;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.45;
  }
}

/* LAYOUT IN HERO */
body.page-id-177 .xaas-kb-hero-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: space-between;
}

body.page-id-177 .xaas-kb-hero-copy {
  max-width: 620px;
}

/* Eyebrow pill */
body.page-id-177 .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.85);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c7d2fe;
  margin-bottom: 0.85rem;
}

/* Hero heading + text */
body.page-id-177 .xaas-kb-hero h1 {
  font-size: clamp(2.1rem, 2.5vw + 1rem, 2.9rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
}

body.page-id-177 .xaas-hero-text {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  color: #e5e7eb;
}

/* SEARCH PANEL */
body.page-id-177 .xaas-kb-hero-search {
  max-width: 420px;
  width: 100%;
}

body.page-id-177 .xaas-kb-search-form {
  position: relative;
  padding: 1.25rem 1.4rem;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(37,99,235,.45), rgba(15,23,42,.96));
  border: 1px solid rgba(148,163,184,0.6);
  box-shadow: 0 22px 55px rgba(15,23,42,0.9);
  backdrop-filter: blur(12px);
}

body.page-id-177 .xaas-kb-search-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 0.5rem;
}

body.page-id-177 .xaas-kb-search-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

/* Text input */
body.page-id-177 .xaas-kb-search-row input[type="text"] {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.75);
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  background: rgba(15,23,42,0.95);
  color: #e5e7eb;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.12s ease;
}

body.page-id-177 .xaas-kb-search-row input[type="text"]::placeholder {
  color: #6b7280;
}

body.page-id-177 .xaas-kb-search-row input[type="text"]:focus {
  border-color: #60a5fa;
  background: rgba(15,23,42,1);
  box-shadow: 0 0 0 1px rgba(37,99,235,0.65), 0 12px 30px rgba(15,23,42,0.9);
  transform: translateY(-1px);
}

/* Search button */
body.page-id-177 .xaas-kb-search-row .xaas-btn-primary {
  white-space: nowrap;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
}

/* Small ambient shimmer on button */
body.page-id-177 .xaas-kb-search-row .xaas-btn-primary {
  position: relative;
  overflow: hidden;
}

body.page-id-177 .xaas-kb-search-row .xaas-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 35%, transparent 70%);
  opacity: 0;
  transform: translateX(-60%);
  pointer-events: none;
}

body.page-id-177 .xaas-kb-search-row .xaas-btn-primary:hover::before {
  animation: xaas-kb-sheen 900ms ease-out;
}

@keyframes xaas-kb-sheen {
  0% {
    opacity: 0;
    transform: translateX(-70%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(80%);
  }
}

/* TABLET / MOBILE HERO STACKING */
@media (max-width: 900px) {
  body.page-id-177 .xaas-hero.xaas-kb-hero {
    padding: 3rem 0 2.4rem;
  }

  body.page-id-177 .xaas-kb-hero-inner {
    flex-direction: column;
    align-items: stretch;
  }

  body.page-id-177 .xaas-kb-hero-search {
    max-width: 100%;
  }
}

/* ==========================
   KB SECTION + GRID
   ========================== */

body.page-id-177 .xaas-kb-section {
  padding: 2.4rem 0 3rem;
  background: #f9fafb;
}

body.page-id-177 .xaas-kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
}

/* Card shell */
body.page-id-177 .xaas-kb-card {
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(209,213,219,0.9);
  box-shadow: 0 14px 35px rgba(15,23,42,0.08);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body.page-id-177 .xaas-kb-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}

/* Body */
body.page-id-177 .xaas-kb-card-body {
  padding: 1.1rem 1.25rem 1.15rem;
}

/* Meta (date) */
body.page-id-177 .xaas-kb-card-meta time {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.4rem;
}

/* Title */
body.page-id-177 .xaas-kb-card-title {
  font-size: 1.02rem;
  line-height: 1.35;
  margin: 0 0 0.4rem;
  color: #111827;
}

/* Excerpt */
body.page-id-177 .xaas-kb-card-excerpt {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #4b5563;
  margin: 0 0 0.6rem;
}

/* “Read article →” */
body.page-id-177 .xaas-kb-card-readmore {
  display: inline-flex;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 500;
  color: #2563eb;
}

/* Hover state */
body.page-id-177 .xaas-kb-card:hover {
  transform: translateY(-4px);
  border-color: rgba(129,140,248,0.9);
  box-shadow: 0 20px 40px rgba(15,23,42,0.18);
}

body.page-id-177 .xaas-kb-card:hover .xaas-kb-card-title {
  color: #1d4ed8;
}

/* Mobile card spacing */
@media (max-width: 640px) {
  body.page-id-177 .xaas-kb-card-body {
    padding: 1rem 1.05rem 1.05rem;
  }
}

/* =========================================================
   CONTACT PAGE (page-id-22)
   Hero, contact grid, form, sidebar, overlay polish
   ========================================================= */

/* HERO WRAPPER */
body.page-id-22 .xaas-hero.xaas-contact-hero {
  position: relative;
  padding: 3.5rem 0 3rem;
  background: radial-gradient(circle at top left, #1d4ed8 0%, #020617 45%, #020617 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* Animated tech glow background */
body.page-id-22 .xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(59,130,246,.6) 0, transparent 45%),
    radial-gradient(circle at 78% 8%, rgba(56,189,248,.4) 0, transparent 40%),
    radial-gradient(circle at 22% 88%, rgba(129,140,248,.3) 0, transparent 45%);
  animation: xaas-contact-orbit 26s linear infinite alternate;
}

@keyframes xaas-contact-orbit {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.32;
  }
  50% {
    transform: translate3d(-10px, -6px, 0) scale(1.03);
    opacity: 0.42;
  }
  100% {
    transform: translate3d(10px, 6px, 0) scale(1.02);
    opacity: 0.36;
  }
}

/* Soft halo behind hero cards */
body.page-id-22 .xaas-contact-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(96,165,250,.55), transparent 60%);
  top: -190px;
  right: -150px;
  opacity: 0.35;
  filter: blur(4px);
  animation: xaas-contact-pulse 18s ease-in-out infinite;
}

@keyframes xaas-contact-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.32;
  }
  50% {
    transform: scale(1.07);
    opacity: 0.46;
  }
}

/* HERO GRID SHAPE */
body.page-id-22 .xaas-home-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.45fr);
  gap: 2.6rem;
  align-items: stretch;
}

/* Eyebrow pill */
body.page-id-22 .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.85);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c7d2fe;
  margin-bottom: 0.9rem;
}

/* Hero heading + text */
body.page-id-22 .xaas-home-hero-copy h1 {
  font-size: clamp(2.1rem, 2.5vw + 1rem, 2.9rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
}

body.page-id-22 .xaas-home-hero-copy .xaas-hero-text {
  margin: 0 0 0.9rem;
  font-size: 1rem;
  color: #e5e7eb;
}

/* Bullets */
body.page-id-22 .xaas-home-hero-copy .xaas-hero-bullets {
  margin: 0;
  padding-left: 1.1rem;
  color: #e5e7eb;
  font-size: 0.95rem;
}

body.page-id-22 .xaas-home-hero-copy .xaas-hero-bullets li + li {
  margin-top: 0.25rem;
}

/* CONTACT QUICK PANEL (RIGHT CARD) */
body.page-id-22 .xaas-contact-hero-panel {
  max-width: 420px;
  justify-self: end;
}

body.page-id-22 .xaas-contact-hero-panel-inner {
  position: relative;
  padding: 1.6rem 1.55rem 1.5rem;
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(37,99,235,.4), rgba(15,23,42,.96));
  border: 1px solid rgba(148,163,184,0.6);
  box-shadow: 0 22px 55px rgba(15,23,42,0.95);
  backdrop-filter: blur(12px);
  color: #e5e7eb;
}

body.page-id-22 .xaas-contact-hero-panel-inner h2 {
  margin-top: 0;
  margin-bottom: 0.45rem;
  font-size: 1.3rem;
}

body.page-id-22 .xaas-contact-hero-panel-inner p {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
}

body.page-id-22 .xaas-contact-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 0.7rem 0 0.7rem;
  font-size: 0.85rem;
}

body.page-id-22 .xaas-contact-hero-meta strong {
  display: block;
  margin-bottom: 0.1rem;
  color: #bfdbfe;
}

body.page-id-22 .xaas-contact-hero-meta a {
  color: #e5e7eb;
}

body.page-id-22 .xaas-contact-hero-note {
  font-size: 0.82rem;
  color: #cbd5f5;
  margin-bottom: 0;
}

/* HERO RESPONSIVE */
@media (max-width: 960px) {
  body.page-id-22 .xaas-hero.xaas-contact-hero {
    padding: 3rem 0 2.5rem;
  }

  body.page-id-22 .xaas-home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-22 .xaas-contact-hero-panel {
    max-width: 100%;
    justify-self: stretch;
  }

  body.page-id-22 .xaas-contact-hero-meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* =========================================
   MAIN CONTACT SECTION
   ========================================= */

body.page-id-22 .xaas-contact-section {
  padding: 2.5rem 0 3.2rem;
  background: #f9fafb;
}

body.page-id-22 .xaas-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.25fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* FORM COLUMN */
body.page-id-22 .xaas-contact-form-wrap h2 {
  margin-top: 0;
  margin-bottom: 0.3rem;
  font-size: 1.35rem;
}

body.page-id-22 .xaas-contact-form-wrap .xaas-section-lead {
  margin-top: 0;
  margin-bottom: 1.4rem;
  font-size: 0.96rem;
  color: #4b5563;
}

/* Form shell */
body.page-id-22 .xaas-contact-form {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 16px 35px rgba(15,23,42,0.06);
}

/* Rows */
body.page-id-22 .xaas-contact-form .xaas-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* Fields */
body.page-id-22 .xaas-contact-form .xaas-form-field {
  margin-bottom: 1rem;
}

body.page-id-22 .xaas-contact-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
}

body.page-id-22 .xaas-contact-form label span {
  color: #ef4444;
}

/* Inputs, selects, textareas */
body.page-id-22 .xaas-contact-form input[type="text"],
body.page-id-22 .xaas-contact-form input[type="email"],
body.page-id-22 .xaas-contact-form input[type="tel"],
body.page-id-22 .xaas-contact-form select,
body.page-id-22 .xaas-contact-form textarea {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid #d1d5db;
  padding: 0.55rem 0.7rem;
  font-size: 0.92rem;
  color: #111827;
  background: #f9fafb;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.page-id-22 .xaas-contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

body.page-id-22 .xaas-contact-form input:focus,
body.page-id-22 .xaas-contact-form select:focus,
body.page-id-22 .xaas-contact-form textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(37,99,235,0.7);
}

/* Footnote / actions */
body.page-id-22 .xaas-form-footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.2rem;
  margin-top: 0.4rem;
}

body.page-id-22 .xaas-form-footer .xaas-btn-primary {
  min-width: 210px;
}

body.page-id-22 .xaas-form-footnote {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* Alert styles (AJAX feedback) */
body.page-id-22 .xaas-alert {
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.55rem;
  font-size: 0.85rem;
}

body.page-id-22 .xaas-alert-success {
  background: #ecfdf3;
  border: 1px solid #22c55e;
  color: #166534;
}

body.page-id-22 .xaas-alert-error {
  background: #fef2f2;
  border: 1px solid #f97373;
  color: #b91c1c;
}

/* SIDEBAR */
body.page-id-22 .xaas-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

body.page-id-22 .xaas-contact-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  padding: 1.1rem 1rem;
  font-size: 0.9rem;
  color: #4b5563;
  box-shadow: 0 10px 24px rgba(15,23,42,0.04);
}

body.page-id-22 .xaas-contact-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-size: 1rem;
  color: #111827;
}

body.page-id-22 .xaas-contact-card ol {
  padding-left: 1.1rem;
  margin: 0.1rem 0 0;
}

/* CONTACT GRID RESPONSIVE */
@media (max-width: 960px) {
  body.page-id-22 .xaas-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  body.page-id-22 .xaas-contact-form {
    padding: 1.3rem 1.15rem 1.2rem;
  }

  body.page-id-22 .xaas-contact-form .xaas-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body.page-id-22 .xaas-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  body.page-id-22 .xaas-form-footer .xaas-btn-primary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* OPTIONAL: Slightly tighten the thank-you modal on mobile */
@media (max-width: 640px) {
  .xaas-contact-thanks-modal {
    margin: 20vh 1rem 0;
    padding: 1.4rem 1.2rem;
  }
}

/* =========================================
   MOBILE NAV DRAWER HEADER ROW → WHITE
   ========================================= */

.xaas-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.1rem;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.xaas-nav-drawer-head .xaas-logo-link {
  display: inline-flex;
  align-items: center;
}

.xaas-nav-drawer-head .xaas-logo-img {
  max-height: 34px;
  width: auto;
}

/* Close (X) button styling */
.xaas-nav-overlay-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  padding: 0;
  color: #0f172a;
  cursor: pointer;
}

.xaas-nav-overlay-close:hover,
.xaas-nav-overlay-close:focus-visible {
  color: #2563eb;
  outline: none;
}

/* =========================================
   SERVICE HEROES – generic formatting
   ========================================= */

.xaas-hero.xaas-service-hero,
.xaas-hero.xaas-services-hero {
  position: relative;
  padding: 3.2rem 0 2.8rem;
  background: radial-gradient(circle at top left, #0f172a 0%, #020617 55%, #020617 100%);
  color: #f9fafb;
  overflow: hidden;
}

/* optional subtle grid / glow if you have .xaas-hero-tech-bg inside */
.xaas-hero.xaas-service-hero .xaas-hero-tech-bg,
.xaas-hero.xaas-services-hero .xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(to right, rgba(148,163,184,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,0.14) 1px, transparent 1px);
  background-size: 80px 80px;
}

/* Content wrapper */
.xaas-hero.xaas-service-hero .xaas-container,
.xaas-hero.xaas-services-hero .xaas-container {
  position: relative;
  z-index: 1;
}

/* Typical layout: text left, maybe image or list right */
.xaas-service-hero-inner,
.xaas-services-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 2.4rem;
  align-items: center;
}

/* If you re-use home hero grid for services: make it behave nicely */
.xaas-hero.xaas-service-hero .xaas-home-hero-grid,
.xaas-hero.xaas-services-hero .xaas-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
  gap: 2.4rem;
  align-items: center;
}

/* Eyebrow */
.xaas-hero.xaas-service-hero .xaas-hero-eyebrow,
.xaas-hero.xaas-services-hero .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.6);
  background: rgba(15,23,42,0.9);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 0.8rem;
}

/* Headline and subcopy */
.xaas-hero.xaas-service-hero h1,
.xaas-hero.xaas-services-hero h1 {
  font-size: clamp(2rem, 2.4vw + 1rem, 2.7rem);
  line-height: 1.08;
  margin: 0 0 0.7rem;
}

.xaas-hero.xaas-service-hero .xaas-hero-text,
.xaas-hero.xaas-services-hero .xaas-hero-text {
  margin: 0 0 1rem;
  font-size: 0.98rem;
  color: #e5e7eb;
  max-width: 36rem;
}

/* Optional bullets inside a service hero */
.xaas-hero.xaas-service-hero .xaas-hero-bullets,
.xaas-hero.xaas-services-hero .xaas-hero-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0.4rem 0 0;
}

.xaas-hero.xaas-service-hero .xaas-hero-bullets li,
.xaas-hero.xaas-services-hero .xaas-hero-bullets li {
  position: relative;
  padding-left: 1.35rem;
  font-size: 0.9rem;
  color: #e5e7eb;
}

.xaas-hero.xaas-service-hero .xaas-hero-bullets li + li,
.xaas-hero.xaas-services-hero .xaas-hero-bullets li + li {
  margin-top: 0.22rem;
}

.xaas-hero.xaas-service-hero .xaas-hero-bullets li::before,
.xaas-hero.xaas-services-hero .xaas-hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
}

/* Right-side block – e.g. feature list, icon grid, etc. */
.xaas-service-hero-side,
.xaas-services-hero-side {
  justify-self: end;
}

/* Responsive collapse */
@media (max-width: 960px) {
  .xaas-service-hero-inner,
  .xaas-services-hero-inner,
  .xaas-hero.xaas-service-hero .xaas-home-hero-grid,
  .xaas-hero.xaas-services-hero .xaas-home-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }

  .xaas-service-hero-side,
  .xaas-services-hero-side {
    justify-self: stretch;
  }

  .xaas-hero.xaas-service-hero,
  .xaas-hero.xaas-services-hero {
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
  }
}

/* =========================================
   Contact hero – wider right column
   ========================================= */
@media (min-width: 960px) {
  /* Make the right-hand contact panel a bit wider */
  body.page-id-22 .xaas-home-hero-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.4fr);
  }

  /* Keep the left copy from getting too wide */
  body.page-id-22 .xaas-home-hero-copy {
    max-width: 32rem;
  }
}

/* =========================================
   Contact hero – darker link colors
   ========================================= */

/* Links inside the contact quick panel (Support / Sales / Phone) */
body.page-id-22 .xaas-contact-hero-panel a {
  color: #111827;                 /* darker slate */
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(37, 99, 235, 0.45);
  text-underline-offset: 2px;
}

body.page-id-22 .xaas-contact-hero-panel a:hover {
  color: #0b1120;
  text-decoration-color: rgba(37, 99, 235, 0.9);
}

/* Optional: darker links in the right-hand sidebar cards, too */
body.page-id-22 .xaas-contact-sidebar a {
  color: #111827;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.page-id-22 .xaas-contact-sidebar a:hover {
  color: #0b1120;
}

/* =========================================
   Blog – hero & layout
   ========================================= */

.xaas-blog-main {
  background: #f3f4f6;
}

/* Hero */
.xaas-blog-hero {
  position: relative;
  padding: 72px 0 40px;
  background: radial-gradient(circle at top left, #1d4ed8 0, #020617 55%);
  color: #e5e7eb;
  overflow: hidden;
}

.xaas-blog-hero .xaas-hero-tech-bg {
  opacity: 0.15;
}

.xaas-blog-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr);
  gap: 32px;
  align-items: stretch;
}

.xaas-blog-hero-copy {
  max-width: 40rem;
}

.xaas-blog-hero-copy h1 {
  font-size: clamp(1.9rem, 3vw, 2.3rem);
  line-height: 1.2;
  margin: 0 0 0.9rem;
  color: #f9fafb;
}

.xaas-blog-hero-copy .xaas-hero-text {
  margin: 0;
  color: #e5e7eb;
  max-width: 34rem;
}

/* Hero side card */
.xaas-blog-hero-aside {
  display: flex;
  align-items: stretch;
}

.xaas-blog-hero-card {
  background: rgba(15, 23, 42, 0.85);
  border-radius: 1rem;
  padding: 20px 22px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.5);
}

.xaas-blog-hero-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #f9fafb;
}

.xaas-blog-hero-card p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: #e5e7eb;
}

.xaas-blog-hero-card .xaas-btn--ghost {
  border-color: rgba(96, 165, 250, 0.9);
  color: #e5e7eb;
  background: transparent;
}

.xaas-blog-hero-card .xaas-btn--ghost:hover {
  background: rgba(37, 99, 235, 0.12);
}

/* Responsive hero layout */
@media (min-width: 960px) {
  .xaas-blog-hero-inner {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.2fr);
    gap: 40px;
  }
}

/* =========================================
   Blog – card grid
   ========================================= */

.xaas-blog-section {
  padding: 40px 0 64px;
  background: #f9fafb;
}

.xaas-blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .xaas-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .xaas-blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.xaas-blog-card {
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid #e5e7eb;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.xaas-blog-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.xaas-blog-card-thumb img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.xaas-blog-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.xaas-blog-card-meta {
  font-size: 0.8rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xaas-blog-card-dot {
  opacity: 0.8;
}

.xaas-blog-card-category {
  font-weight: 500;
  color: #4b5563;
}

.xaas-blog-card-title {
  font-size: 1.05rem;
  margin: 0;
  color: #111827;
}

.xaas-blog-card-excerpt {
  margin: 0;
  font-size: 0.9rem;
  color: #4b5563;
}

.xaas-blog-card-readmore {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 500;
  color: #2563eb;
}

/* Hover state */
.xaas-blog-card:hover {
  transform: translateY(-3px);
  border-color: #bfdbfe;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
}

.xaas-blog-card:hover .xaas-blog-card-title {
  color: #1d4ed8;
}

/* =========================================
   Blog – pagination
   ========================================= */

.xaas-blog-pagination {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.xaas-blog-pagination .nav-links {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.9rem;
}

.xaas-blog-pagination a,
.xaas-blog-pagination span {
  padding: 6px 10px;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  color: #374151;
}

.xaas-blog-pagination a:hover {
  border-color: #2563eb;
  color: #1d4ed8;
}

.xaas-blog-pagination .current {
  background: #2563eb;
  border-color: #2563eb;
  color: #f9fafb;
}

/* Empty state */
.xaas-blog-empty {
  text-align: center;
  padding: 40px 0 20px;
}

.xaas-blog-empty h2 {
  margin-bottom: 0.5rem;
}

/* Single blog – layout */

.xaas-blog-single-main {
  background: #f3f4f6;
}

.xaas-blog-article-section {
  padding: 40px 0 72px;
  background: #f9fafb;
}

.xaas-blog-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr);
  gap: 32px;
}

/* wider article vs sidebar on desktop */
@media (min-width: 960px) {
  .xaas-blog-article-grid {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr);
  }
}

.xaas-blog-article {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09);
  overflow: hidden;
}

.xaas-blog-article-thumb img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.xaas-blog-article-body {
  padding: 20px 22px 22px;
}

.xaas-blog-article-meta {
  font-size: 0.85rem;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

/* basic content typography */
.xaas-blog-article-content > *:first-child {
  margin-top: 0;
}

.xaas-blog-article-content p {
  line-height: 1.7;
  margin-bottom: 1rem;
  color: #111827;
}

.xaas-blog-article-content h2,
.xaas-blog-article-content h3,
.xaas-blog-article-content h4 {
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

.xaas-blog-article-content ul,
.xaas-blog-article-content ol {
  margin-left: 1.1rem;
  margin-bottom: 1rem;
}

/* tags */
.xaas-blog-article-tags {
  margin-top: 16px;
  font-size: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.xaas-blog-article-tags-label {
  font-weight: 600;
  color: #4b5563;
}

.xaas-blog-article-tags a {
  padding: 3px 9px;
  border-radius: 9999px;
  background: #eff6ff;
  color: #1d4ed8;
  text-decoration: none;
}

/* prev / next */
.xaas-blog-article-nav {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.xaas-blog-article-nav a {
  color: #2563eb;
}

/* sidebar */
.xaas-blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.xaas-blog-sidebar-card {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  padding: 16px 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.xaas-blog-sidebar-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

.xaas-blog-sidebar-card p {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.xaas-blog-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.xaas-blog-sidebar-list li + li {
  margin-top: 0.6rem;
}

.xaas-blog-sidebar-list a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.xaas-blog-sidebar-title {
  font-size: 0.92rem;
  color: #111827;
}

.xaas-blog-sidebar-date {
  font-size: 0.8rem;
  color: #6b7280;
}

.xaas-blog-sidebar-btn {
  font-size: 0.9rem;
}

/* comments wrapper */
.xaas-blog-comments-wrap {
  margin-top: 16px;
}

/* ===== Pre-footer CTA – stretch content to the right ===== */

.xaas-prefooter {
  padding: 32px 0;
  background: #0f172a;
  color: #e5e7eb;
}

.xaas-prefooter .xaas-container {
  /* Slightly wider on large screens so the CTA can breathe */
  max-width: 1320px;
}

.xaas-prefooter-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
}

/* Let the text take the left side */
.xaas-prefooter-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Push the CTA block all the way to the right */
.xaas-prefooter-actions {
  flex: 0 0 auto;
  margin-left: auto;
}

.xaas-prefooter-btn-phone {
  white-space: nowrap;
  padding-inline: 1.75rem;
}

/* Mobile: stack, but still nice */
@media (max-width: 768px) {
  .xaas-prefooter-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .xaas-prefooter-actions {
    margin-left: 0;
    width: 100%;
  }

  .xaas-prefooter-actions .xaas-btn {
    width: 100%;
    text-align: center;
  }
}

/* ===== Cookie banner – bottom-left ===== */

.xaas-cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  max-width: 340px;
  z-index: 80;
  display: none; /* shown via JS */
  font-size: 0.85rem;
}

.xaas-cookie-banner.is-visible {
  display: block;
}

.xaas-cookie-inner {
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.xaas-cookie-text {
  margin: 0;
  line-height: 1.4;
}

.xaas-cookie-text a {
  color: #93c5fd;
  text-decoration: underline;
}

.xaas-cookie-text a:hover {
  color: #bfdbfe;
}

.xaas-cookie-accept {
  flex-shrink: 0;
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
}

/* Mobile: full-width bar at bottom */
@media (max-width: 640px) {
  .xaas-cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    padding: 0 12px 12px;
  }

  .xaas-cookie-inner {
    border-radius: 0.75rem 0.75rem 0 0;
  }
}

/* ================================
   SERVICE AREAS – HERO
   ================================ */

.xaas-service-areas-hero {
  position: relative;
  padding: 64px 0 56px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .xaas-service-areas-hero {
    padding: 80px 0 72px;
  }
}

.xaas-service-areas-hero .xaas-home-hero-grid {
  align-items: stretch;
}

/* Optional: make the right hero card slightly lifted */
.xaas-service-areas-hero .xaas-home-hero-card {
  background: linear-gradient(135deg, #0f172a, #111827);
  color: #e5e7eb;
  border-radius: 1.25rem;
  padding: 24px 24px 26px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.xaas-service-areas-hero .xaas-home-hero-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.1rem;
  color: #f9fafb;
}

.xaas-service-areas-hero .xaas-home-hero-card p {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: #e5e7eb;
}

.xaas-service-areas-hero .xaas-home-hero-card ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.93rem;
  color: #cbd5f5;
}

.xaas-service-areas-hero .xaas-home-hero-card li + li {
  margin-top: 0.25rem;
}

/* Eyebrow + bullets reuse existing styles but keep spacing tidy */
.xaas-service-areas-hero .xaas-hero-eyebrow {
  margin-bottom: 0.4rem;
}

.xaas-service-areas-hero .xaas-hero-text {
  max-width: 38rem;
}

.xaas-service-areas-hero .xaas-hero-bullets {
  margin: 1rem 0 1.4rem;
  padding-left: 1.2rem;
}

.xaas-service-areas-hero .xaas-hero-bullets li + li {
  margin-top: 0.2rem;
}

/* ================================
   SERVICE AREAS – SECTION
   ================================ */

.xaas-section-service-areas {
  padding: 56px 0 72px;
  background: #f3f4f6;
}

@media (min-width: 768px) {
  .xaas-section-service-areas {
    padding: 72px 0 88px;
  }
}

.xaas-section-service-areas .xaas-section-header {
  text-align: left;
  max-width: 720px;
  margin: 0 auto 32px;
}

@media (min-width: 900px) {
  .xaas-section-service-areas .xaas-section-header {
    margin-bottom: 40px;
  }
}

.xaas-section-service-areas .xaas-section-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 0.25rem;
}

.xaas-section-service-areas h2 {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 768px) {
  .xaas-section-service-areas h2 {
    font-size: 1.9rem;
  }
}

.xaas-section-service-areas .xaas-section-lead,
.xaas-section-service-areas .xaas-section-header p {
  margin: 0;
  font-size: 0.98rem;
  color: #4b5563;
}

/* Optional body content from editor */
.xaas-page-content--service-areas {
  max-width: 720px;
  margin: 24px auto 24px;
  font-size: 0.98rem;
  color: #374151;
}

.xaas-section-service-areas .xaas-section-divider {
  margin: 32px 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

/* ================================
   SERVICE AREAS – GRID & CARDS
   ================================ */

.xaas-service-areas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 768px) {
  .xaas-service-areas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .xaas-service-areas-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.xaas-service-area-card {
  background: #ffffff;
  border-radius: 1rem;
  padding: 18px 18px 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.12);
  display: flex;
  flex-direction: column;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.xaas-service-area-card:hover {
  transform: translateY(-3px);
  border-color: #cbd5f5;
  box-shadow: 0 20px 45px rgba(148, 163, 184, 0.25);
}

.xaas-service-area-title {
  font-size: 1.05rem;
  margin: 0 0 0.45rem;
}

.xaas-service-area-title a {
  text-decoration: none;
  color: #111827;
}

.xaas-service-area-title a:hover {
  color: #2563eb;
}

.xaas-service-area-excerpt {
  margin: 0 0 0.8rem;
  font-size: 0.94rem;
  color: #4b5563;
  flex: 1 1 auto;
}

.xaas-service-area-link {
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 500;
  color: #1d4ed8; /* slightly darker blue */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.xaas-service-area-link:hover {
  color: #1e40af;
  text-decoration: underline;
}

/* Fallback text when no child pages */
.xaas-service-areas-empty {
  margin-top: 16px;
  font-size: 0.96rem;
  color: #4b5563;
}

.xaas-service-areas-empty a {
  color: #1d4ed8;
  text-decoration: underline;
}

.xaas-service-areas-empty a:hover {
  color: #1e40af;
}

/* Small polish for hero CTA button inside this page */
.xaas-service-areas-hero .xaas-hero-ctas .xaas-btn-primary {
  min-width: 0;
  padding-inline: 1.7rem;
}

/* ========== LAYOUT HELPERS ========== */

.xaas-container {
  width: min(1120px, 100% - 2.5rem);
  margin: 0 auto;
}

/* ========== TOPBAR ========== */

.xaas-topbar {
  background: #020617;
  color: #e5e7eb;
  font-size: 0.85rem;
}

.xaas-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
}

.xaas-topbar-left {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xaas-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.xaas-topbar-link {
  color: #e5e7eb;
  text-decoration: none;
}

.xaas-topbar-link:hover {
  text-decoration: underline;
}

.xaas-topbar-sep {
  opacity: 0.4;
}

.xaas-topbar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.xaas-topbar-icon svg {
  width: 100%;
  height: 100%;
}

/* Stack topbar on small screens */
@media (max-width: 768px) {
  .xaas-topbar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .xaas-topbar-right {
    justify-content: flex-start;
  }
}

/* ========== HEADER BASE ========== */

.xaas-site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.xaas-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.75rem 0;
}

/* Logo */
.xaas-logo-link {
  display: inline-flex;
  align-items: center;
}

.xaas-logo-img {
  height: 40px;
  width: auto;
}

/* Header CTA */
.xaas-header-cta .xaas-btn--ghost {
  border-radius: 999px;
  padding: 0.55rem 1.15rem;
  border: 1px solid #ea580c;
  background: transparent;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xaas-header-cta .xaas-btn--ghost:hover {
  background: #ffedd5;
}

/* ========== DESKTOP NAV + MEGA MENU ========== */

.xaas-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

.xaas-nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.xaas-nav-item {
  position: relative;
}

.xaas-nav-link {
  display: inline-block;
  padding: 0.55rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: #111827;
}

.xaas-nav-link:hover {
  color: #ea580c;
}

/* Mega: parent */
.xaas-nav-item--has-mega {
  position: static;
}

/* Mega panel base */
.xaas-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 160ms ease-out,
    transform 160ms ease-out,
    visibility 0s linear 160ms;
  z-index: 40;

  background: radial-gradient(circle at top left, #111827 0, #020617 45%, #020617 100%);
  color: #f9fafb;
  padding: 1.75rem 0 2.25rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.55);
}

/* Show mega on hover/focus */
.xaas-nav-item--has-mega:hover > .xaas-mega,
.xaas-nav-item--has-mega:focus-within > .xaas-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Mega inner layout */
.xaas-mega-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.xaas-mega-column h4 {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fb923c;
}

.xaas-mega-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xaas-mega-column ul li + li {
  margin-top: 0.35rem;
}

.xaas-mega-column ul a {
  font-size: 0.92rem;
  text-decoration: none;
  color: #e5e7eb;
  display: inline-flex;
  align-items: center;
}

.xaas-mega-column ul a::before {
  content: "›";
  margin-right: 0.4rem;
  font-size: 0.9rem;
  opacity: 0.7;
}

.xaas-mega-column ul a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Highlight column */
.xaas-mega-column-highlight {
  border-radius: 1rem;
  padding: 1.1rem 1.25rem 1.3rem;
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.22), rgba(249, 115, 22, 0.2));
  border: 1px solid rgba(249, 115, 22, 0.35);
  align-self: flex-start;
}

.xaas-mega-column-highlight p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: #f9fafb;
  opacity: 0.9;
}

.xaas-mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: #f97316;
  color: #111827;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4);
}

.xaas-mega-cta:hover {
  text-decoration: none;
  filter: brightness(1.03);
}

/* ========== MOBILE NAV TOGGLE ========== */

.xaas-nav-toggle {
  display: none; /* only on mobile */
  border: none;
  background: transparent;
  padding: 0.25rem;
  cursor: pointer;
}

.xaas-nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #111827;
  position: relative;
}

.xaas-nav-toggle-bar::before,
.xaas-nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #111827;
}

.xaas-nav-toggle-bar::before {
  top: -6px;
}

.xaas-nav-toggle-bar::after {
  top: 6px;
}

/* ========== MOBILE OVERLAY MENU ========== */

.xaas-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.7);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out,
    visibility 0s linear 180ms;
}

.xaas-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.xaas-nav-drawer {
  margin-left: auto;
  height: 100%;
  max-width: 420px;
  width: 100%;
  background: #020617;
  color: #f9fafb;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.5rem 2rem;
}

/* Drawer head (logo + X) */
.xaas-nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.xaas-nav-overlay-close {
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Mobile menu list */
.xaas-mobile-menu {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
}

.xaas-mobile-menu li {
  margin-bottom: 0.5rem;
}

.xaas-mobile-menu a {
  display: block;
  padding: 0.65rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  color: #f9fafb;
}

.xaas-mobile-menu a:hover {
  color: #fed7aa;
}

/* Section headings in mobile menu */
.xaas-mobile-heading {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fed7aa;
}

/* Mobile CTA */
.xaas-nav-overlay-cta {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: #f97316;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

@media (max-width: 1024px) {
  /* Hide desktop nav + header CTA on mobile */
  .xaas-nav {
    display: none;
  }

  .xaas-header-cta {
    display: none;
  }

  .xaas-nav-toggle {
    display: inline-flex;
  }

  .xaas-header-inner {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

@media (max-width: 1200px) {
  .xaas-mega-inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .xaas-mega {
    display: none; /* mega only for desktop */
  }

  .xaas-mega-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================
   SERVICE PAGES – GLOBAL LAYOUT / CLEANUP
   Applies to: .xaas-service-page, all service templates
========================================= */

/* General page spacing */
.xaas-service-page {
  background: #0b1020; /* deep techy background */
  color: #e5e7eb;
}

.xaas-service-page .xaas-section {
  padding: 3.5rem 0;
  position: relative;
}

@media (min-width: 768px) {
  .xaas-service-page .xaas-section {
    padding: 4.5rem 0;
  }
}

/* Basic text resets inside dark sections */
.xaas-service-page h1,
.xaas-service-page h2,
.xaas-service-page h3,
.xaas-service-page h4 {
  color: #f9fafb;
}

.xaas-service-page p,
.xaas-service-page li {
  color: #e5e7eb;
}

/* =========================================
   HERO
========================================= */

.xaas-service-hero {
  position: relative;
  padding: 4.5rem 0 3.5rem;
  overflow: hidden;
}

@media (min-width: 960px) {
  .xaas-service-hero {
    padding: 5.5rem 0 4rem;
  }
}

.xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(234, 88, 12, 0.4), transparent 60%),
    linear-gradient(135deg, #020617, #020617 40%, #020617);
  opacity: 0.95;
  pointer-events: none;
}

.xaas-hero-inner {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: flex-start;
}

@media (min-width: 960px) {
  .xaas-hero-inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr);
    gap: 3.25rem;
  }
}

/* Left copy */
.xaas-hero-copy {
  max-width: 680px;
}

.xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f97316;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(249, 115, 22, 0.4);
  margin-bottom: 0.85rem;
}

.xaas-hero-copy h1 {
  font-size: clamp(2.1rem, 3vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.xaas-hero-lede {
  font-size: 1.02rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  color: #e5e7eb;
  max-width: 40rem;
}

/* Hero CTAs */
.xaas-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.xaas-hero-cta-row .xaas-btn {
  font-size: 0.95rem;
  padding-inline: 1.35rem;
  padding-block: 0.8rem;
}

/* Trust list under hero CTAs */
.xaas-hero-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.5rem;
  font-size: 0.9rem;
  color: #9ca3af;
}

.xaas-hero-trust-list li::before {
  content: "✓";
  color: #22c55e;
  margin-right: 0.4rem;
  font-size: 0.85rem;
}

/* Right side metrics card */
.xaas-hero-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.xaas-hero-metrics-card {
  border-radius: 1rem;
  padding: 1.25rem 1.4rem;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.8), #020617);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .xaas-hero-metrics-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.xaas-hero-metric {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.xaas-hero-metric-number {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f97316;
}

.xaas-hero-metric-label {
  font-size: 0.78rem;
  color: #9ca3af;
}

/* Hero note */
.xaas-hero-note {
  font-size: 0.85rem;
  color: #9ca3af;
  line-height: 1.5;
  border-left: 2px solid rgba(148, 163, 184, 0.7);
  padding-left: 0.85rem;
}

/* =========================================
   SERVICE NAV STRIP (Overview / Features / FAQ)
========================================= */

.xaas-service-nav-strip {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.8), #020617);
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
}

.xaas-service-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  padding: 0.75rem 0;
  margin: 0;
  font-size: 0.9rem;
}

.xaas-service-nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0;
  color: #e5e7eb;
  text-decoration: none;
}

.xaas-service-nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #fb923c);
  transition: width 0.18s ease-out;
}

.xaas-service-nav-list a:hover::after,
.xaas-service-nav-list a:focus-visible::after {
  width: 100%;
}

/* Optional sticky on desktop */
@media (min-width: 960px) {
  .xaas-service-nav-strip {
    position: sticky;
    top: 70px; /* adjust if header height differs */
    z-index: 40;
    backdrop-filter: blur(10px);
    background: rgba(2, 6, 23, 0.9);
  }
}

/* =========================================
   SECTION GRID LAYOUT
========================================= */

.xaas-section-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 960px) {
  .xaas-section-grid {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1.1fr);
    gap: 3rem;
  }
}

.xaas-section-header {
  max-width: 46rem;
  margin-bottom: 2rem;
}

.xaas-section-header h2 {
  font-size: clamp(1.6rem, 2.2vw, 2rem);
  margin-bottom: 0.75rem;
}

.xaas-section-header p {
  margin: 0;
  color: #d1d5db;
}

/* Left column */
.xaas-section-copy p + p {
  margin-top: 0.75rem;
}

/* Right sidebar cards */
.xaas-service-aside-card,
.xaas-service-geo-card {
  border-radius: 1rem;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.85), #020617);
  border: 1px solid rgba(148, 163, 184, 0.4);
  padding: 1.5rem 1.6rem;
}

.xaas-service-aside-card h3,
.xaas-service-geo-card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.05rem;
}

.xaas-service-geo-card .xaas-btn-link {
  margin-top: 0.75rem;
}

/* =========================================
   CARD GRIDS (3-column cards)
========================================= */

.xaas-card-grid {
  display: grid;
  gap: 1.75rem;
}

.xaas-card-grid-3 {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .xaas-card-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.xaas-card {
  padding: 1.6rem 1.5rem;
  border-radius: 1rem;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), #020617);
  border: 1px solid rgba(31, 41, 55, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.55);
}

.xaas-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.03rem;
}

.xaas-card p {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  color: #e5e7eb;
}

/* Lists inside cards & details */
.xaas-card-list,
.xaas-checklist,
.xaas-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
}

.xaas-card-list li,
.xaas-checklist li,
.xaas-bullet-list li {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #d1d5db;
  padding-left: 1.25rem;
  position: relative;
}

.xaas-card-list li + li,
.xaas-checklist li + li,
.xaas-bullet-list li + li {
  margin-top: 0.4rem;
}

/* Bullets / icons */
.xaas-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-size: 1rem;
  color: #f97316;
}

.xaas-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.8rem;
  color: #22c55e;
}

.xaas-bullet-list li::before {
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9rem;
  color: #9ca3af;
}

/* =========================================
   FAQ ACCORDION
========================================= */

.xaas-faq-list {
  display: grid;
  gap: 0.75rem;
}

.xaas-faq-item {
  border-radius: 0.9rem;
  background: radial-gradient(circle at top left, rgba(15, 23, 42, 0.9), #020617);
  border: 1px solid rgba(31, 41, 55, 0.9);
  overflow: hidden;
}

.xaas-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.95rem 1.2rem;
  position: relative;
  font-size: 0.97rem;
  color: #f9fafb;
}

.xaas-faq-item summary::-webkit-details-marker {
  display: none;
}

.xaas-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #f97316;
  transition: transform 0.18s ease-out;
}

.xaas-faq-item[open] summary::after {
  content: "–";
  transform: translateY(-50%);
}

.xaas-faq-body {
  padding: 0 1.2rem 0.9rem;
  border-top: 1px solid rgba(55, 65, 81, 0.9);
}

.xaas-faq-body p {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  color: #e5e7eb;
}

/* =========================================
   FINAL CTA SECTION
========================================= */

.xaas-service-final-cta {
  background: radial-gradient(circle at top left, rgba(248, 113, 113, 0.08), #020617);
  border-top: 1px solid rgba(148, 163, 184, 0.4);
}

.xaas-final-cta-inner {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .xaas-final-cta-inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr);
  }
}

.xaas-final-cta-copy h2 {
  margin-bottom: 0.6rem;
}

.xaas-final-cta-copy p {
  margin: 0;
  color: #d1d5db;
}

.xaas-final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}

/* =========================================
   BUTTON TOUCH-UPS (works with your existing .xaas-btn)
========================================= */

.xaas-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.xaas-btn-primary {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #0b1020;
  border: none;
}

.xaas-btn-primary:hover {
  filter: brightness(1.05);
}

.xaas-btn-ghost,
.xaas-btn--ghost {
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: transparent;
  color: #f97316;
}

.xaas-btn-ghost:hover,
.xaas-btn--ghost:hover {
  background: rgba(249, 115, 22, 0.08);
}

/* =========================================
   Cloud Services – Hero Styling
   Target: page-cloud-services.php
========================================= */

/* Scope to Cloud Services template */
.page-template-page-cloud-services .xaas-inner-hero,
.page-cloud-services .xaas-inner-hero {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background:
    radial-gradient(circle at top center, #1e293b 0%, #020617 55%, #020617 100%);
  color: #e5e7eb;
}

/* Techy cloud backdrop */
.page-template-page-cloud-services .xaas-hero-tech-bg,
.page-cloud-services .xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(148, 163, 184, 0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.95));
  opacity: 0.95;
}

/* Gentle vertical “light columns” drifting up */
.page-template-page-cloud-services .xaas-hero-tech-bg::before,
.page-cloud-services .xaas-hero-tech-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 10% 80%, rgba(96, 165, 250, 0.2), transparent 55%),
    linear-gradient(
      to top,
      transparent 0%,
      rgba(56, 189, 248, 0.05) 30%,
      rgba(59, 130, 246, 0.17) 50%,
      rgba(56, 189, 248, 0.05) 70%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.8;
  animation: xaas-cloud-drift 22s linear infinite;
}

/* Second, softer column moving opposite direction */
.page-template-page-cloud-services .xaas-hero-tech-bg::after,
.page-cloud-services .xaas-hero-tech-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 90% 20%, rgba(129, 140, 248, 0.18), transparent 55%),
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(129, 140, 248, 0.06) 30%,
      rgba(37, 99, 235, 0.18) 50%,
      rgba(129, 140, 248, 0.06) 70%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: xaas-cloud-drift-reverse 28s linear infinite;
}

/* Inner content stays sharp on top */
.page-template-page-cloud-services .xaas-inner-hero-content,
.page-cloud-services .xaas-inner-hero-content {
  position: relative;
  max-width: 720px;
  z-index: 1;
}

.page-template-page-cloud-services .xaas-inner-hero-content h1,
.page-cloud-services .xaas-inner-hero-content h1 {
  font-size: clamp(2.4rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  color: #f9fafb;
}

.page-template-page-cloud-services .xaas-inner-hero-content .xaas-hero-sub,
.page-cloud-services .xaas-inner-hero-content .xaas-hero-sub {
  font-size: 1.05rem;
  max-width: 40rem;
  color: rgba(226, 232, 240, 0.9);
}

/* Animations */
@keyframes xaas-cloud-drift {
  0% {
    transform: translateY(10%);
  }
  50% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

@keyframes xaas-cloud-drift-reverse {
  0% {
    transform: translateY(-12%);
  }
  50% {
    transform: translateY(12%);
  }
  100% {
    transform: translateY(-12%);
  }
}

/* Mobile spacing */
@media (max-width: 768px) {
  .page-template-page-cloud-services .xaas-inner-hero,
  .page-cloud-services .xaas-inner-hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* =========================================
   Marketing Solutions page – hero styling
   (/marketing-solutions/)
========================================= */

.page-id-1250 .xaas-hero.xaas-inner-hero,
.page-marketing-solutions .xaas-hero.xaas-inner-hero {
  position: relative;
  overflow: hidden;
  padding-top: 6rem;
  padding-bottom: 6rem;
  background:
    radial-gradient(circle at top center, #0f172a 0%, #020617 55%, #020617 100%);
  color: #e5e7eb;
}

/* Techy “signal” backdrop */
.page-id-1250 .xaas-hero-tech-bg,
.page-marketing-solutions .xaas-hero-tech-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 25%, rgba(59, 130, 246, 0.25), transparent 60%),
    radial-gradient(circle at 82% 70%, rgba(249, 115, 22, 0.22), transparent 60%),
    linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 1));
  opacity: 0.96;
}

/* Soft “signal waves” moving up */
.page-id-1250 .xaas-hero-tech-bg::before,
.page-marketing-solutions .xaas-hero-tech-bg::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(56, 189, 248, 0.18) 20%,
      rgba(59, 130, 246, 0.22) 40%,
      rgba(249, 115, 22, 0.20) 60%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.8;
  animation: xaas-marketing-waves 22s linear infinite;
}

/* Second layer drifting opposite */
.page-id-1250 .xaas-hero-tech-bg::after,
.page-marketing-solutions .xaas-hero-tech-bg::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(
      to left,
      transparent 0%,
      rgba(249, 115, 22, 0.20) 25%,
      rgba(59, 130, 246, 0.24) 55%,
      transparent 100%
    );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: xaas-marketing-waves-reverse 28s linear infinite;
}

/* Inner hero text tweaks */
.page-id-1250 .xaas-inner-hero-content,
.page-marketing-solutions .xaas-inner-hero-content {
  position: relative;
  max-width: 720px;
  z-index: 1;
}

.page-id-1250 .xaas-inner-hero-content h1,
.page-marketing-solutions .xaas-inner-hero-content h1 {
  font-size: clamp(2.4rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 0.75rem;
  color: #f9fafb;
}

.page-id-1250 .xaas-inner-hero-content .xaas-hero-sub,
.page-marketing-solutions .xaas-inner-hero-content .xaas-hero-sub {
  font-size: 1.05rem;
  max-width: 40rem;
  color: rgba(226, 232, 240, 0.9);
}

/* Animations for marketing waves */
@keyframes xaas-marketing-waves {
  0%   { transform: translateX(-8%) translateY(8%); }
  50%  { transform: translateX(8%) translateY(-8%); }
  100% { transform: translateX(-8%) translateY(8%); }
}

@keyframes xaas-marketing-waves-reverse {
  0%   { transform: translateX(10%) translateY(-10%); }
  50%  { transform: translateX(-10%) translateY(10%); }
  100% { transform: translateX(10%) translateY(-10%); }
}

/* Mobile hero spacing */
@media (max-width: 768px) {
  .page-id-1250 .xaas-hero.xaas-inner-hero,
  .page-marketing-solutions .xaas-hero.xaas-inner-hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
}

/* =========================================
   Highlight "Solutions" in the main nav
   when on Marketing Solutions
========================================= */

.page-id-1250 .xaas-nav-list .xaas-nav-item a[href*="marketing-solutions"],
.page-marketing-solutions .xaas-nav-list .xaas-nav-item a[href*="marketing-solutions"] {
  color: #f97316;
  position: relative;
}

.page-id-1250 .xaas-nav-list .xaas-nav-item a[href*="marketing-solutions"]::after,
.page-marketing-solutions .xaas-nav-list .xaas-nav-item a[href*="marketing-solutions"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #f97316);
}
/* ================================
   FRONT PAGE HERO – GOLD STROBES
   ================================ */

/* Make sure hero can contain the strobes */
.home .xaas-home-hero {
  position: relative;
  overflow: hidden;
}

/* Base styling for both strobes */
.home .xaas-home-hero::before,
.home .xaas-home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px; /* thickness of the strobe line */
  background: linear-gradient(
    90deg,
    rgba(253, 224, 71, 0) 0%,
    rgba(253, 224, 71, 1) 50%,
    rgba(253, 224, 71, 0) 100%
  );
  background-size: 200% 100%;
  opacity: 0.9;
  pointer-events: none;
}

/* TOP BORDER – moves left → right */
.home .xaas-home-hero::before {
  top: 0;
  animation: xaas-strobe-right 9s linear infinite;
}

/* BOTTOM BORDER – moves right → left */
.home .xaas-home-hero::after {
  bottom: 0;
  animation: xaas-strobe-left 9s linear infinite;
}

/* KEYFRAMES – smooth, slow movement */
@keyframes xaas-strobe-right {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes xaas-strobe-left {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
/* =======================================
   MEGA MENU LAYOUT TWEAKS (CSS ONLY)
   ======================================= */

/* Ensure megas use flex layout */
.xaas-mega-inner {
  display: flex;
  gap: 2rem;
}

/* -------------------------------
   SOLUTIONS MEGA
   (4th .xaas-nav-item--has-mega)
   - "Not sure where to start?"
   - Make highlight ~3/4 width
------------------------------- */

/* Scope to the Solutions item */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(4) .xaas-mega-inner {
  display: flex;
}

/* First column (Marketing & Outreach) ~1/4 width */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(4)
  .xaas-mega-inner
  .xaas-mega-column:nth-of-type(1) {
  flex: 0 0 25%;
}

/* Second column (highlight "Not sure where to start?") ~3/4 width */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(4)
  .xaas-mega-inner
  .xaas-mega-column:nth-of-type(2) {
  flex: 0 0 75%;
}

/* -------------------------------
   SERVICE AREAS MEGA
   (5th .xaas-nav-item--has-mega)
   - "Not sure if you’re in range?"
   - Make highlight ~1/2 width
------------------------------- */

/* Scope to the Service Areas item */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(5) .xaas-mega-inner {
  display: flex;
}

/* Column 1 (Primary Regions) ~1/4 width */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(5)
  .xaas-mega-inner
  .xaas-mega-column:nth-of-type(1) {
  flex: 0 0 25%;
}

/* Column 2 (Additional Areas) ~1/4 width */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(5)
  .xaas-mega-inner
  .xaas-mega-column:nth-of-type(2) {
  flex: 0 0 25%;
}

/* Column 3 (highlight "Not sure if you’re in range?") ~1/2 width */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(5)
  .xaas-mega-inner
  .xaas-mega-column:nth-of-type(3) {
  flex: 0 0 50%;
}

/* -------------------------------
   MOBILE SAFETY – STACK COLUMNS
   So wide ratios don't break small screens
------------------------------- */
@media (max-width: 900px) {
  .xaas-mega-inner {
    flex-direction: column;
  }

  .xaas-mega-inner .xaas-mega-column {
    flex: 0 0 100% !important;
  }
}

/* =======================================
   SERVICES MEGA MENU – CLEAN LAYOUT
   (3rd nav item with mega)
   ======================================= */

/* Slightly padded dropdown for Services mega */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3) .xaas-mega {
  padding: 1.75rem 0 2rem;
}

/* 4-column grid just for Services mega */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3) .xaas-mega-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: flex-start;
}

/* Column headings */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column > h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0f172a;
}

/* Lists inside Services mega */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column > ul > li {
  margin-bottom: 0.35rem;
}

.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column > ul > li > a {
  font-size: 0.9rem;
  color: #4b5563;
  text-decoration: none;
}

.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column > ul > li > a:hover {
  color: #111827;
  text-decoration: underline;
}

/* Highlight card – "Need a custom project?" */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column-highlight {
  background: #0f172a;
  color: #e5e7eb;
  border-radius: 0.9rem;
  padding: 1.25rem 1.5rem 1.4rem;
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.35);
}

/* Highlight heading */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column-highlight h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #f9fafb;
}

/* Highlight text */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-column-highlight p {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  color: #cbd5f5;
}

/* Highlight CTA */
.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(135deg, #2563eb, #f97316);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.55);
}

.xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3)
  .xaas-mega-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.7);
}

/* Mobile: stack columns so it doesn’t get cramped */
@media (max-width: 900px) {
  .xaas-nav-list > li.xaas-nav-item--has-mega:nth-of-type(3) .xaas-mega-inner {
    grid-template-columns: 1fr;
  }
}

/* =======================================
   MEGA MENU H4 – VIBRANT + ANIMATIONS
   Applies to all mega menus (Services, Solutions, Service Areas)
   ======================================= */

/* Vibrant gradient-style heading text */
.xaas-nav .xaas-mega-column > h4 {
  position: relative;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #2563eb, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Underline that animates in on hover */
.xaas-nav .xaas-mega-column > h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #2563eb);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
}

/* Trigger underline on hover of the whole column */
.xaas-nav .xaas-mega-column:hover > h4::after {
  transform: scaleX(1);
}

/* Extra: gentle pulse on the highlighted callout boxes only */
.xaas-nav .xaas-mega-column-highlight > h4 {
  animation: xaas-mega-pulse 2.6s ease-in-out infinite;
}

/* Text glow pulse */
@keyframes xaas-mega-pulse {
  0%, 100% {
    text-shadow: 0 0 0 rgba(249, 115, 22, 0.0);
  }
  50% {
    text-shadow: 0 0 12px rgba(249, 115, 22, 0.55);
  }
}
/* Base (desktop + tablet): left */
.xaas-hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f97316; /* brand orange */
  text-align: left;
}

/* Mobile: center */
@media (max-width: 640px) {
  .xaas-hero-eyebrow {
    text-align: left;
    display: block;
    margin-inline: auto;
  }
}
.xaas-hero {
background: #111827;
}
.xaas-feature-card {
background: #111827;
}
/* Mobile menu: centered text, full-row clickable links */
@media (max-width: 768px) {

  /* Mobile nav container / overlay */
  .xaas-mobile-menu,
  .xaas-main-nav--mobile,
  .xaas-mobile-nav-inner,
  .xaas-nav-overlay {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center if full-screen */
    align-items: stretch;      /* children take full width */
    text-align: center;
  }

  /* The <ul> holding the links */
  .xaas-mobile-nav-list,
  .xaas-main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* each <li> full width */
    gap: 0;
  }

  .xaas-mobile-nav-list li,
  .xaas-main-nav ul li {
    width: 100%;
  }

  .xaas-mobile-nav-list a,
  .xaas-main-nav ul li a {
    display: block;            /* full-row click area */
    width: 100%;
    padding: 0.9rem 1.25rem;
    text-align: center;        /* text centered within row */
  }
}
/* Card titles orange in 3- and 4-column grids */
.xaas-section-grid.xaas-section-grid-3 .xaas-card h3,
.xaas-section-grid.xaas-section-grid-3 .xaas-card .xaas-card-title,
.xaas-section-grid.xaas-section-grid-4 .xaas-card h3,
.xaas-section-grid.xaas-section-grid-4 .xaas-card .xaas-card-title {
  color: #f97316; /* brand orange */
}

/* Optional: keep body text neutral */
.xaas-section-grid.xaas-section-grid-3 .xaas-card p,
.xaas-section-grid.xaas-section-grid-4 .xaas-card p {
  color: #4b5563;
}
@media (max-width: 640px) {
  .xaas-hero-eyebrow {
    border-radius: 0.5rem;     /* or 0 for perfectly square */
    width: 100%;               /* optional: full-width ribbon */
    text-align: center;
    justify-content: center;
  }
}

/* ==========================================
   EXTRA POLISH – Remote Work + Microsoft 365
   Applies to:
   - page-template-page-remote-work.php
   - page-template-page-microsoft-365.php
========================================== */

/* Page-specific body hooks (WordPress adds these automatically) */
.page-template-page-remote-work .xaas-main,
.page-template-page-microsoft-365 .xaas-main {
  background-color: #f3f4f6;
}

/* Make inner heroes just a bit taller on desktop for drama */
.page-template-page-remote-work .xaas-hero.xaas-hero-inner,
.page-template-page-microsoft-365 .xaas-hero.xaas-hero-inner {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

/* Slightly tighter hero content width */
.page-template-page-remote-work .xaas-hero-inner-copy,
.page-template-page-microsoft-365 .xaas-hero-inner-copy {
  max-width: 34rem;
}

/* Animated tech “wash” overlay on inner heroes (subtle) */
.page-template-page-remote-work .xaas-hero.xaas-hero-inner::before,
.page-template-page-microsoft-365 .xaas-hero.xaas-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(148, 163, 184, 0.05),
    rgba(15, 23, 42, 0.1),
    rgba(249, 115, 22, 0.08),
    rgba(37, 99, 235, 0.12)
  );
  mix-blend-mode: soft-light;
  opacity: 0.75;
  pointer-events: none;
  animation: xaas-hero-sheen 16s linear infinite;
}

@keyframes xaas-hero-sheen {
  0% {
    transform: translateX(-8%);
    opacity: 0.65;
  }
  50% {
    transform: translateX(6%);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-8%);
    opacity: 0.65;
  }
}

/* Hero headings: add a small accent bar under H1 */
.page-template-page-remote-work .xaas-hero-inner-copy h1,
.page-template-page-microsoft-365 .xaas-hero-inner-copy h1 {
  position: relative;
  padding-bottom: 0.5rem;
}

.page-template-page-remote-work .xaas-hero-inner-copy h1::after,
.page-template-page-microsoft-365 .xaas-hero-inner-copy h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #fbbf24);
}

/* Center the accent bar on mobile since the hero text often centers */
@media (max-width: 640px) {
  .page-template-page-remote-work .xaas-hero-inner-copy h1,
  .page-template-page-microsoft-365 .xaas-hero-inner-copy h1 {
    text-align: center;
  }

  .page-template-page-remote-work .xaas-hero-inner-copy h1::after,
  .page-template-page-microsoft-365 .xaas-hero-inner-copy h1::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-template-page-remote-work .xaas-hero-lead,
  .page-template-page-microsoft-365 .xaas-hero-lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .page-template-page-remote-work .xaas-hero-cta,
  .page-template-page-microsoft-365 .xaas-hero-cta {
    justify-content: center;
  }

  .page-template-page-remote-work .xaas-hero-trust-row,
  .page-template-page-microsoft-365 .xaas-hero-trust-row {
    text-align: center;
  }
}

/* ============================
   CARD HOVERS & DEPTH
============================ */

.page-template-page-remote-work .xaas-card,
.page-template-page-microsoft-365 .xaas-card {
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.page-template-page-remote-work .xaas-card:hover,
.page-template-page-microsoft-365 .xaas-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  border-top-color: #f97316;
}

/* Gold card: warm hover */
.page-template-page-remote-work .xaas-card--gold:hover,
.page-template-page-microsoft-365 .xaas-card--gold:hover {
  border-top-color: #fbbf24;
  background: linear-gradient(
      135deg,
      rgba(251, 191, 36, 0.04),
      rgba(249, 115, 22, 0.06)
    ),
    #ffffff;
}

/* Dark section card hover variant */
.xaas-section-alt .xaas-card:hover {
  background: radial-gradient(circle at top left, #020617 0, #020617 40%, #020617 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* ============================
   STEPS LIST (APPROACH)
============================ */

.page-template-page-remote-work .xaas-steps-list,
.page-template-page-microsoft-365 .xaas-steps-list {
  border-left: 1px solid rgba(148, 163, 184, 0.4);
  padding-left: 1.25rem;
}

.page-template-page-remote-work .xaas-steps-list li,
.page-template-page-microsoft-365 .xaas-steps-list li {
  margin-bottom: 0.9rem;
  position: relative;
}

.page-template-page-remote-work .xaas-steps-list li::before,
.page-template-page-microsoft-365 .xaas-steps-list li::before {
  content: "";
  position: absolute;
  left: -1.31rem;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.8);
}

/* ============================
   FAQ BLOCKS
============================ */

.page-template-page-remote-work .xaas-faq-item,
.page-template-page-microsoft-365 .xaas-faq-item {
  padding: 1.05rem 1.1rem;
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
  transition:
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out,
    transform 0.16s ease-out,
    background 0.16s ease-out;
}

.page-template-page-remote-work .xaas-faq-item:hover,
.page-template-page-microsoft-365 .xaas-faq-item:hover {
  border-color: rgba(249, 115, 22, 0.75);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  transform: translateY(-2px);
  background: #fefdfb;
}

.page-template-page-remote-work .xaas-faq-item h3,
.page-template-page-microsoft-365 .xaas-faq-item h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: #0f172a;
}

/* ============================
   CTA BLOCKS
============================ */

.page-template-page-remote-work .xaas-cta-shell,
.page-template-page-microsoft-365 .xaas-cta-shell {
  position: relative;
  overflow: hidden;
}

/* Animated gradient edge on CTA */
.page-template-page-remote-work .xaas-cta-shell::before,
.page-template-page-microsoft-365 .xaas-cta-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #f97316,
    #fbbf24,
    #3b82f6,
    #22c55e,
    #f97316
  );
  opacity: 0.25;
  z-index: -2;
  filter: blur(10px);
  animation: xaas-cta-orbit 18s linear infinite;
}

.page-template-page-remote-work .xaas-cta-shell::after,
.page-template-page-microsoft-365 .xaas-cta-shell::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, #020617, #111827);
  z-index: -1;
}

@keyframes xaas-cta-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slightly bigger CTA heading on desktop */
@media (min-width: 768px) {
  .page-template-page-remote-work .xaas-cta-copy h2,
  .page-template-page-microsoft-365 .xaas-cta-copy h2 {
    font-size: 1.8rem;
  }
}

/* ============================
   MOBILE SPACING TWEAKS
============================ */

@media (max-width: 640px) {
  .page-template-page-remote-work .xaas-section,
  .page-template-page-microsoft-365 .xaas-section {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .page-template-page-remote-work .xaas-hero.xaas-hero-inner,
  .page-template-page-microsoft-365 .xaas-hero.xaas-hero-inner {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .page-template-page-remote-work .xaas-hero-aside-card,
  .page-template-page-microsoft-365 .xaas-hero-aside-card {
    max-width: 100%;
  }
}

/* ==========================================
   IT Projects & vCIO – page-project-vcio.php
   Body class: .page-template-page-project-vcio
========================================== */

/* Base page background */
.page-template-page-project-vcio .xaas-main {
  background-color: #f3f4f6;
}

/* Hero: a bit taller, same inner layout */
.page-template-page-project-vcio .xaas-hero.xaas-hero-inner {
  padding-top: 5rem;
  padding-bottom: 4rem;
}

/* Slightly constrained hero copy width */
.page-template-page-project-vcio .xaas-hero-inner-copy {
  max-width: 34rem;
}

/* Animated tech sheen overlay (subtle) */
.page-template-page-project-vcio .xaas-hero.xaas-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(148, 163, 184, 0.06),
    rgba(15, 23, 42, 0.1),
    rgba(249, 115, 22, 0.12),
    rgba(56, 189, 248, 0.12)
  );
  mix-blend-mode: soft-light;
  opacity: 0.8;
  pointer-events: none;
  animation: xaas-hero-sheen 18s linear infinite;
}

@keyframes xaas-hero-sheen {
  0% {
    transform: translateX(-8%);
    opacity: 0.65;
  }
  50% {
    transform: translateX(6%);
    opacity: 0.95;
  }
  100% {
    transform: translateX(-8%);
    opacity: 0.65;
  }
}

/* Hero H1 accent bar */
.page-template-page-project-vcio .xaas-hero-inner-copy h1 {
  position: relative;
  padding-bottom: 0.5rem;
}

.page-template-page-project-vcio .xaas-hero-inner-copy h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f97316, #fbbf24);
}

/* Center accent + text on mobile */
@media (max-width: 640px) {
  .page-template-page-project-vcio .xaas-hero-inner-copy h1 {
    text-align: center;
  }

  .page-template-page-project-vcio .xaas-hero-inner-copy h1::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .page-template-page-project-vcio .xaas-hero-lead {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .page-template-page-project-vcio .xaas-hero-cta {
    justify-content: center;
  }

  .page-template-page-project-vcio .xaas-hero-trust-row {
    text-align: center;
  }

  .page-template-page-project-vcio .xaas-hero-aside-card {
    max-width: 100%;
  }

  .page-template-page-project-vcio .xaas-section {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .page-template-page-project-vcio .xaas-hero.xaas-hero-inner {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }
}

/* ============================
   Cards – hover / depth
============================ */

.page-template-page-project-vcio .xaas-card {
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.page-template-page-project-vcio .xaas-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  border-top-color: #f97316;
}

/* Gold variant hover */
.page-template-page-project-vcio .xaas-card--gold:hover {
  border-top-color: #fbbf24;
  background: linear-gradient(
      135deg,
      rgba(251, 191, 36, 0.04),
      rgba(249, 115, 22, 0.06)
    ),
    #ffffff;
}

/* Dark section card hover */
.page-template-page-project-vcio .xaas-section-alt .xaas-card:hover {
  background: radial-gradient(circle at top left, #020617 0, #020617 40%, #020617 100%);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* ============================
   Steps list (Our approach)
============================ */

.page-template-page-project-vcio .xaas-steps-list {
  border-left: 1px solid rgba(148, 163, 184, 0.4);
  padding-left: 1.25rem;
}

.page-template-page-project-vcio .xaas-steps-list li {
  margin-bottom: 0.9rem;
  position: relative;
}

.page-template-page-project-vcio .xaas-steps-list li::before {
  content: "";
  position: absolute;
  left: -1.31rem;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.8);
}

/* ============================
   FAQ blocks
============================ */

.page-template-page-project-vcio .xaas-faq-item {
  padding: 1.05rem 1.1rem;
  border-radius: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(209, 213, 219, 0.9);
  transition:
    border-color 0.16s ease-out,
    box-shadow 0.16s ease-out,
    transform 0.16s ease-out,
    background 0.16s ease-out;
}

.page-template-page-project-vcio .xaas-faq-item:hover {
  border-color: rgba(249, 115, 22, 0.75);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  transform: translateY(-2px);
  background: #fefdfb;
}

.page-template-page-project-vcio .xaas-faq-item h3 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
  color: #0f172a;
}

/* ============================
   CTA block (Final section)
============================ */

.page-template-page-project-vcio .xaas-cta-shell {
  position: relative;
  overflow: hidden;
}

/* Animated gradient border glow */
.page-template-page-project-vcio .xaas-cta-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #f97316,
    #fbbf24,
    #3b82f6,
    #22c55e,
    #f97316
  );
  opacity: 0.25;
  z-index: -2;
  filter: blur(10px);
  animation: xaas-cta-orbit 18s linear infinite;
}

.page-template-page-project-vcio .xaas-cta-shell::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, #020617, #111827);
  z-index: -1;
}

@keyframes xaas-cta-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Slightly larger CTA heading on desktop */
@media (min-width: 768px) {
  .page-template-page-project-vcio .xaas-cta-copy h2 {
    font-size: 1.8rem;
  }
}
/* ============================
   Mega menu – light style
============================ */

/* Mega container */
.xaas-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: transparent;
  padding-top: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease-out,
    transform 0.18s ease-out,
    visibility 0.18s ease-out;
  z-index: 30;
}

/* Light card-style panel */
.xaas-mega-inner {
  background: #f9fafb;
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(209, 213, 219, 0.9);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

/* Show on hover (desktop) */
.xaas-nav-item--has-mega:hover > .xaas-mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Columns */
.xaas-mega-column h4 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0f172a;
}

.xaas-mega-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.xaas-mega-column ul li + li {
  margin-top: 0.35rem;
}

.xaas-mega-column a {
  font-size: 0.9rem;
  color: #374151;
  text-decoration: none;
}

.xaas-mega-column a:hover {
  color: #f97316;
  text-decoration: underline;
}

/* Highlight column */
.xaas-mega-column-highlight {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1rem 1.1rem;
  box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.9);
}

.xaas-mega-column-highlight h4 {
  color: #0f172a;
}

.xaas-mega-column-highlight p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: #4b5563;
}

.xaas-mega-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid #f97316;
  color: #f97316;
  text-decoration: none;
}

.xaas-mega-cta:hover {
  background: #f97316;
  color: #ffffff;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 960px) {
  .xaas-mega-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .xaas-mega {
    display: none; /* handled by mobile drawer */
  }
}

/* Make Solutions + Service Areas mega menu links darker */
.xaas-nav-item--has-mega > a[href*="/marketing-solutions/"] + .xaas-mega .xaas-mega-column a,
.xaas-nav-item--has-mega > a[href*="/service-areas/"] + .xaas-mega .xaas-mega-column a {
  color: #111827; /* dark slate */
}

/* Optional: keep a nice orange hover just for those */
.xaas-nav-item--has-mega > a[href*="/marketing-solutions/"] + .xaas-mega .xaas-mega-column a:hover,
.xaas-nav-item--has-mega > a[href*="/service-areas/"] + .xaas-mega .xaas-mega-column a:hover {
  color: #f97316;
  text-decoration: underline;
}

/* ==========================================
   IT Strategy & Roadmaps
   Template: page-it-strategy-roadmaps.php
   Body class: .page-template-page-it-strategy-roadmaps
========================================== */

.page-template-page-it-strategy-roadmaps .xaas-main {
  background-color: #f3f4f6;
}

/* Hero layout */
.page-template-page-it-strategy-roadmaps .xaas-hero.xaas-hero-inner {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 4rem;
  overflow: hidden;
}

.page-template-page-it-strategy-roadmaps .xaas-hero-inner-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: stretch;
}

/* Hero tech sheen */
.page-template-page-it-strategy-roadmaps .xaas-hero.xaas-hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.12), transparent 55%),
              radial-gradient(circle at 100% 20%, rgba(59, 130, 246, 0.16), transparent 55%),
              linear-gradient(135deg, rgba(15, 23, 42, 0.8), #020617);
  mix-blend-mode: normal;
  opacity: 0.9;
  pointer-events: none;
  z-index: -2;
}

/* Keep hero content readable */
.page-template-page-it-strategy-roadmaps .xaas-hero-inner-copy,
.page-template-page-it-strategy-roadmaps .xaas-hero-inner-aside {
  color: #f9fafb;
}

/* Eyebrow "balloon" – angled on mobile */
.page-template-page-it-strategy-roadmaps .xaas-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(249, 115, 22, 0.7);
  color: #f97316;
  margin-bottom: 0.9rem;
}

@media (max-width: 640px) {
  .page-template-page-it-strategy-roadmaps .xaas-hero-eyebrow {
    border-radius: 0.4rem 1.2rem 1.2rem 0.4rem;
  }
}

.page-template-page-it-strategy-roadmaps .xaas-hero-inner-copy h1 {
  font-size: clamp(1.9rem, 2.4vw, 2.4rem);
  margin-bottom: 0.75rem;
  color: #f9fafb;
}

.page-template-page-it-strategy-roadmaps .xaas-hero-lead {
  color: #e5e7eb;
  max-width: 38rem;
}

.page-template-page-it-strategy-roadmaps .xaas-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.page-template-page-it-strategy-roadmaps .xaas-hero-trust-row {
  margin-top: 1rem;
}

.page-template-page-it-strategy-roadmaps .xaas-hero-trust-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.6);
  color: #e5e7eb;
}

/* Aside hero card */
.page-template-page-it-strategy-roadmaps .xaas-hero-aside-card {
  background: radial-gradient(circle at top left, rgba(249, 115, 22, 0.2), transparent 55%),
              rgba(15, 23, 42, 0.96);
  border-radius: 1.1rem;
  padding: 1.5rem 1.4rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
}

.page-template-page-it-strategy-roadmaps .xaas-hero-aside-card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.3rem;
  color: #f9fafb;
}

/* Section header */
.page-template-page-it-strategy-roadmaps .xaas-section-header .xaas-section-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.page-template-page-it-strategy-roadmaps .xaas-section-header h2 {
  color: #0f172a;
}

/* Cards & grids */
.page-template-page-it-strategy-roadmaps .xaas-section-grid.xaas-section-grid-3,
.page-template-page-it-strategy-roadmaps .xaas-section-grid.xaas-section-grid-4 {
  gap: 1.6rem;
}

.page-template-page-it-strategy-roadmaps .xaas-card {
  border-radius: 0.95rem;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
  padding: 1.1rem 1.1rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

/* Card titles orange for 3- & 4-column grids */
.page-template-page-it-strategy-roadmaps .xaas-section-grid.xaas-section-grid-3 .xaas-card h3,
.page-template-page-it-strategy-roadmaps .xaas-section-grid.xaas-section-grid-4 .xaas-card h3 {
  color: #f97316;
}

.page-template-page-it-strategy-roadmaps .xaas-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
  border-color: rgba(249, 115, 22, 0.8);
}

/* Steps list in "Our approach" */
.page-template-page-it-strategy-roadmaps .xaas-steps-list {
  margin: 1.25rem 0 0;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(148, 163, 184, 0.6);
}

.page-template-page-it-strategy-roadmaps .xaas-steps-list li {
  margin-bottom: 0.9rem;
  position: relative;
  font-size: 0.95rem;
  color: #111827;
}

.page-template-page-it-strategy-roadmaps .xaas-steps-list li::before {
  content: "";
  position: absolute;
  left: -1.3rem;
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f97316, #fbbf24);
  box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.7);
}

/* Two-column layout for "Our approach" block */
.page-template-page-it-strategy-roadmaps .xaas-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Gold variant card */
.page-template-page-it-strategy-roadmaps .xaas-card--gold {
  background: linear-gradient(135deg, #fef9c3, #fffbeb);
  border-color: rgba(250, 204, 21, 0.9);
}

/* FAQ blocks */
.page-template-page-it-strategy-roadmaps .xaas-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.page-template-page-it-strategy-roadmaps .xaas-faq-item {
  padding: 1.1rem 1.1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
}

/* Final CTA */
.page-template-page-it-strategy-roadmaps .xaas-cta-shell {
  position: relative;
  overflow: hidden;
  border-radius: 1.3rem;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

/* Animated glowing border */
.page-template-page-it-strategy-roadmaps .xaas-cta-shell::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    #f97316,
    #fbbf24,
    #3b82f6,
    #22c55e,
    #f97316
  );
  opacity: 0.25;
  filter: blur(10px);
  animation: xaas-cta-orbit 18s linear infinite;
  z-index: -2;
}

.page-template-page-it-strategy-roadmaps .xaas-cta-shell::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: radial-gradient(circle at top left, #0f172a, #020617);
  z-index: -1;
}

.page-template-page-it-strategy-roadmaps .xaas-cta-copy h2 {
  color: #f9fafb;
}

.page-template-page-it-strategy-roadmaps .xaas-cta-copy p {
  color: #e5e7eb;
}

@keyframes xaas-cta-orbit {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive tweaks */
@media (max-width: 960px) {
  .page-template-page-it-strategy-roadmaps .xaas-hero-inner-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-template-page-it-strategy-roadmaps .xaas-hero-inner-aside {
    max-width: 32rem;
    margin-top: 1.25rem;
  }

  .page-template-page-it-strategy-roadmaps .xaas-two-col {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-template-page-it-strategy-roadmaps .xaas-faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .page-template-page-it-strategy-roadmaps .xaas-hero.xaas-hero-inner {
    padding-top: 4rem;
    padding-bottom: 3rem;
  }

  .page-template-page-it-strategy-roadmaps .xaas-hero-inner-copy,
  .page-template-page-it-strategy-roadmaps .xaas-hero-inner-copy h1 {
    text-align: left;
  }

  .page-template-page-it-strategy-roadmaps .xaas-cta-shell {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Service Areas hub */
.page-template-page-service-areas .xaas-section-service-areas {
  padding-top: 2.25rem;
}

.page-template-page-service-areas .xaas-section-intro {
  margin-bottom: 1.75rem;
}

.page-template-page-service-areas .xaas-service-areas-grid {
  gap: 1.6rem;
}

.page-template-page-service-areas .xaas-service-area-card {
  padding: 0;
  border-radius: 0.9rem;
  overflow: hidden;
}

.page-template-page-service-areas .xaas-service-area-link-wrap {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.page-template-page-service-areas .xaas-service-area-card-body {
  padding: 1.1rem 1.1rem 1rem;
  border-radius: inherit;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    border-color 0.18s ease-out,
    background 0.18s ease-out;
}

.page-template-page-service-areas .xaas-service-area-title {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: #f97316; /* orange title */
}

.page-template-page-service-areas .xaas-service-area-excerpt {
  margin: 0 0 0.6rem;
  font-size: 0.92rem;
  color: #4b5563;
}

.page-template-page-service-areas .xaas-service-area-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: #f97316;
}

/* Full-row hover */
.page-template-page-service-areas .xaas-service-area-link-wrap:hover .xaas-service-area-card-body {
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.16);
  border-color: rgba(249, 115, 22, 0.9);
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y; /* allow vertical scrolling, block weird gestures */
}

/* Extra safety for mobile only, if you want */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }
}
/* ============================================
   INNER SERVICE / PROJECT PAGES
   (vCIO, Microsoft 365, Remote Work, Helpdesk, etc.)
   Paste near the END of style.css
============================================ */

/* Tighter, cleaner canvas for service pages */
.xaas-main.xaas-service-page {
  background: radial-gradient(circle at top, #0f172a 0, #020617 40%, #020617 100%);
  color: #e5e7eb;
}

/* Use a slightly wider container on these pages */
.xaas-main.xaas-service-page .xaas-container {
  width: min(1120px, 100% - 2.75rem);
}

/* =========================
   HERO – INNER SERVICE PAGES
   (uses .xaas-service-hero)
========================= */

.xaas-service-hero {
  position: relative;
  padding: 4rem 0 3rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.xaas-service-hero .xaas-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 3rem;
  align-items: center;
}

/* Copy column */
.xaas-service-hero .xaas-hero-copy {
  max-width: 640px;
}

.xaas-service-hero .xaas-hero-eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: #a5b4fc;
  margin-bottom: 0.75rem;
}

.xaas-service-hero h1 {
  font-size: clamp(2.25rem, 3vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
}

.xaas-service-hero .xaas-hero-lede {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #cbd5f5;
  max-width: 36rem;
}

/* CTA row reuse */
.xaas-service-hero .xaas-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
}

/* Subtle “pill” meta row under hero (if used) */
.xaas-service-hero .xaas-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: #9ca3af;
}

.xaas-service-hero .xaas-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.26), transparent 55%);
}

/* Optional right-hand visual panel (if present) */
.xaas-service-hero .xaas-hero-visual {
  position: relative;
  border-radius: 1.5rem;
  padding: 1.5rem;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background:
    radial-gradient(circle at 0 0, rgba(79, 70, 229, 0.2), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.26), transparent 60%),
    rgba(15, 23, 42, 0.85);
  box-shadow:
    0 24px 40px rgba(15, 23, 42, 0.8),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* Keeps any img or illustration inside tidy */
.xaas-service-hero .xaas-hero-visual img {
  border-radius: 1.1rem;
}

/* Nice little tag at the top of that panel */
.xaas-service-hero .xaas-hero-visual-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.7);
  margin-bottom: 0.8rem;
}

/* =========================
   CONTENT BODY
   (below hero – shared by vCIO, M365, Remote Work)
========================= */

.xaas-service-page .xaas-service-body {
  padding: 0 0 4rem;
}

/* Readable line length + spacing */
.xaas-service-page .xaas-service-body .entry-content,
.xaas-service-page .xaas-service-body .xaas-service-main {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Headings inside content */
.xaas-service-page .xaas-service-body .entry-content h2,
.xaas-service-page .xaas-service-body .xaas-service-main h2 {
  font-size: 1.6rem;
  margin: 2.5rem 0 0.75rem;
}

.xaas-service-page .xaas-service-body .entry-content h3,
.xaas-service-page .xaas-service-body .xaas-service-main h3 {
  font-size: 1.25rem;
  margin: 1.75rem 0 0.5rem;
}

/* Lists – more compact and aligned */
.xaas-service-page .xaas-service-body .entry-content ul,
.xaas-service-page .xaas-service-body .entry-content ol {
  padding-left: 1.25rem;
  margin: 0.85rem 0 1.25rem;
}

.xaas-service-page .xaas-service-body .entry-content li {
  margin-bottom: 0.45rem;
}

/* “Checkmark” style list if you add .xaas-check-list */
.xaas-service-page .xaas-service-body .xaas-check-list {
  list-style: none;
  padding-left: 0;
}

.xaas-service-page .xaas-service-body .xaas-check-list li {
  position: relative;
  padding-left: 1.5rem;
}

.xaas-service-page .xaas-service-body .xaas-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.9rem;
  color: #22c55e;
}

/* =========================
   FEATURE GRID / PILLARS
   (if you use .xaas-service-grid / .xaas-service-card)
========================= */

.xaas-service-page .xaas-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 2.25rem auto 0;
  max-width: 1120px;
}

.xaas-service-page .xaas-service-card {
  position: relative;
  border-radius: 1.25rem;
  padding: 1.5rem 1.5rem 1.7rem;
  background: radial-gradient(circle at top, rgba(30, 64, 175, 0.5), rgba(15, 23, 42, 0.95));
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow:
    0 18px 30px rgba(15, 23, 42, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

.xaas-service-page .xaas-service-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.xaas-service-page .xaas-service-card p {
  margin: 0;
  font-size: 0.96rem;
  color: #e5e7eb;
}

/* Smaller “chip” row at the bottom of a card */
.xaas-service-page .xaas-service-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  color: #9ca3af;
}

.xaas-service-page .xaas-service-card-meta span {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.65);
  background: rgba(15, 23, 42, 0.75);
}

/* =========================
   CTA BAND NEAR BOTTOM
   (if you add .xaas-service-cta-band)
========================= */

.xaas-service-page .xaas-service-cta-band {
  margin: 3.5rem auto 0;
  max-width: 1120px;
  padding: 1.75rem 2rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(248, 250, 252, 0.12);
  background:
    radial-gradient(circle at 0 0, rgba(56, 189, 248, 0.32), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.26), transparent 60%),
    rgba(15, 23, 42, 0.93);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.xaas-service-page .xaas-service-cta-band-text {
  max-width: 620px;
}

.xaas-service-page .xaas-service-cta-band-text h2 {
  margin: 0 0 0.4rem;
  font-size: 1.4rem;
}

.xaas-service-page .xaas-service-cta-band-text p {
  margin: 0;
  font-size: 0.98rem;
  color: #e5e7eb;
}

.xaas-service-page .xaas-service-cta-band .xaas-hero-cta-row {
  margin-top: 0;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 960px) {
  .xaas-service-hero {
    padding: 3.25rem 0 2.5rem;
  }

  .xaas-service-hero .xaas-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .xaas-service-hero .xaas-hero-visual {
    order: -1;
  }

  .xaas-service-page .xaas-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xaas-service-page .xaas-service-cta-band {
    padding: 1.5rem 1.25rem;
  }
}

@media (max-width: 720px) {
  .xaas-service-hero {
    padding: 2.75rem 0 2.25rem;
  }

  .xaas-service-hero h1 {
    font-size: 2rem;
  }

  .xaas-service-page .xaas-service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .xaas-service-page .xaas-service-cta-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .xaas-service-hero .xaas-hero-cta-row {
    width: 100%;
  }

  .xaas-service-hero .xaas-hero-cta-row .xaas-btn,
  .xaas-service-page .xaas-service-cta-band .xaas-btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

/* ===============================
   FULL-SCREEN EMAIL CAPTURE OVERLAY
=============================== */

.xaas-email-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* shown via JS */
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.xaas-email-overlay.is-visible {
  display: flex;
}

.xaas-email-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15,23,42,.95), rgba(15,23,42,.98));
  backdrop-filter: blur(6px);
}

/* Modal card */
.xaas-email-modal {
  position: relative;
  z-index: 1;
  width: min(620px, 100% - 2.5rem);
  border-radius: 1.5rem;
  padding: 2.25rem 2.5rem 2.35rem;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(129,140,248,.25), transparent 60%),
    #020617;
  color: #e5e7eb;
  box-shadow:
    0 26px 60px rgba(15,23,42,.9),
    0 0 0 1px rgba(15,23,42,1);
  overflow: hidden;
}

/* Glow border */
.xaas-email-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #f97316, #22d3ee, #a855f7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.75;
  pointer-events: none;
}

/* Close button */
.xaas-email-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  border: none;
  background: transparent;
  color: #9ca3af;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.xaas-email-close:hover {
  background-color: rgba(15,23,42,.9);
  color: #f9fafb;
}

/* Inner layout */
.xaas-email-modal-inner {
  position: relative;
  z-index: 1;
}

/* Eyebrow */
.xaas-email-eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin: 0 0 0.4rem;
}

/* Heading / subtitle */
.xaas-email-modal-inner h2 {
  margin: 0 0 0.6rem;
  font-size: 1.6rem;
  line-height: 1.3;
}

.xaas-email-subtitle {
  margin: 0 0 1.4rem;
  font-size: 0.98rem;
  color: #cbd5f5;
}

/* Form */
.xaas-email-form {
  margin: 0;
}

/* Honeypot */
.xaas-email-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Fields layout */
.xaas-email-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

.xaas-email-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: #9ca3af;
  margin-bottom: 0.3rem;
}

.xaas-email-field input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(148,163,184,.65);
  background-color: rgba(15,23,42,.9);
  color: #e5e7eb;
  padding: 0.55rem 0.8rem;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.xaas-email-field input::placeholder {
  color: #6b7280;
}

.xaas-email-field input:focus {
  border-color: #f97316;
  box-shadow: 0 0 0 1px rgba(249,115,22,.7), 0 0 0 6px rgba(249,115,22,.15);
  background-color: rgba(15,23,42,1);
}

/* Consent */
.xaas-email-consent {
  margin-bottom: 1rem;
  font-size: 0.82rem;
  color: #9ca3af;
}

.xaas-email-consent label {
  display: inline-flex;
  gap: 0.4rem;
  align-items: flex-start;
}

.xaas-email-consent input[type="checkbox"] {
  margin-top: 0.05rem;
}

/* Actions */
.xaas-email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.xaas-email-actions .xaas-btn {
  font-size: 0.92rem;
}

/* Ghost style (if not already in theme) */
.xaas-btn.xaas-btn-ghost {
  background: transparent;
  color: #e5e7eb;
  border: 1px solid rgba(148,163,184,.6);
}

.xaas-btn.xaas-btn-ghost:hover {
  background-color: rgba(15,23,42,.9);
}

/* Footnote */
.xaas-email-footnote {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 640px) {
  .xaas-email-modal {
    padding: 2rem 1.5rem 1.9rem;
    width: min(100% - 1.75rem, 480px);
  }

  .xaas-email-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .xaas-email-modal-inner h2 {
    font-size: 1.4rem;
  }

  .xaas-email-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .xaas-email-actions .xaas-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .xaas-email-close {
    top: 0.75rem;
    right: 0.75rem;
  }
}


.xaas-mega-column-highlight {
background: rgba(15, 23, 42, 0.96);
}

.xaas-mega-column-highlight p {
color: #f9fafb;
}

.xaas-section-grid.xaas-section-grid-3 .xaas-card p, .xaas-section-grid.xaas-section-grid-4 .xaas-card p {
color: #eee;
}

.xaas-section-header p {
color: rgba(15, 23, 42, 0.96);
}