/* =======================================================
   Geometric Business Growth — DARK Readable Theme (Clean)
   ======================================================= */

/* ---- Colors ---- */
:root{
  --bg:#0b0f14;          /* page background (dark) */
  --text:#e8f0ff;        /* main text (light) */
  --muted:#a6b0c7;       /* secondary text */
  --card:#121826;        /* card background (panel) */
  --card-2:#0f1522;      /* alt panel */
  --border:rgba(255,255,255,.10);

  /* Blue accent set */
  --accent-1:#1f6fe5;    /* primary blue */
  --accent-2:#3979ff;    /* lighter blue */
  --accent-3:#a8c6ff;    /* pale blue */

  /* Aliases */
  --g-text: var(--text);
  --g-blue: var(--accent-1);
}

/* ---- Base / Reset ---- */
*{ box-sizing:border-box }
html{ font-size:16px }
body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:400 18px/1.65 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
img{ max-width:100%; display:block }
a{ color:var(--accent-3); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width:1100px; margin:0 auto; padding:0 1rem }

/* ---- Banner strip ---- */
.site-banner{
  width:100%; text-align:center; background:var(--bg);
  border-bottom:1px solid rgba(255,255,255,.10);
  position:relative;
}
.site-banner img{ max-width:100%; height:auto; display:block; margin:0 auto; }
.site-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background:linear-gradient(180deg, rgba(31,111,229,.45), rgba(31,111,229,0));
  filter:blur(8px); pointer-events:none;
}

/* =======================================================
   NAVIGATION (Unified)
   ======================================================= */
.site-header{ position:relative; z-index:100 }
.nav{
  position:sticky; top:0; z-index:1000;
  max-width:1200px; margin:0 auto; padding:.25rem 1rem;
  background:rgba(11,15,20,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.85);
}

/* hide any brand text block inside the bar */
.nav .brand, .site-title-in-nav{ display:none !important; }

/* centered desktop links */
.nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center;
  gap:.75rem;
}
.nav-list > li > a{
  display:block; color:var(--text);
  font-size:.95rem; line-height:1;
  padding:.65rem .75rem; border-radius:.5rem;
  text-decoration:none; transition:color .2s ease, background .2s ease;
}
.nav-list > li > a:hover{ color:#3b82f6; }
.nav-list > li.cta > a{ background:rgba(59,130,246,.15); }
.nav-list > li > a.is-active{ color:#3b82f6; font-weight:700; }

/* hamburger */
.nav-toggle{
  position:absolute; right:1rem; top:.35rem;
  width:42px; height:42px; border:none; background:transparent; cursor:pointer;
  display:none;
}
.nav-toggle span{ display:block; height:2px; margin:7px 8px; background:var(--text); }

/* mobile dropdown panel */
@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav-list{
    position:absolute; left:.5rem; right:.5rem; top:2.75rem;
    display:none; flex-direction:column; gap:.25rem; padding:.5rem;
    background:rgba(0,0,0,.85); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.08); border-radius:.75rem;
  }
  .nav-list.open{ display:flex; }
  .nav-list > li > a{ padding:.9rem 1rem; }
}

/* =======================================================
   Sections, Cards, Lists
   ======================================================= */
section.alt{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
section.band{
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(31,111,229,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* Cards */
.card{
  background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:1.2rem;
}
.card.edge{ position:relative; overflow:hidden; border-color:rgba(31,111,229,.35); }
.card.edge::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, #1f6fe5, #a8c6ff);
}

/* Color-coded checks */
.tone-blue { --tone:#1f6fe5; }
.tone-cyan { --tone:#2ad1ff; }
.tone-amber{ --tone:#ffb000; }
.tone-pink { --tone:#ff2d8a; }

.li .check{
  background: var(--tone, var(--accent-1));
  box-shadow: 0 6px 14px -6px color-mix(in oklab, var(--tone, var(--accent-1)) 60%, black 40%);
}

/* Section label */
.section-label{
  display:inline-block; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text); opacity:.9;
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  padding:.28rem .6rem; margin-bottom:.6rem;
  background:rgba(255,255,255,.06);
}

/* Bullets */
ul.bullets{ list-style:none; padding:0; margin:.6rem 0; }
ul.bullets li{ position:relative; padding-left:1.25rem; margin:.4rem 0; }
ul.bullets li::before{
  content:""; position:absolute; left:0; top:.6rem; width:.5rem; height:.5rem; border-radius:999px;
  background:var(--tone, var(--accent-1));
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

/* Forms */
input, select, textarea{
  background:#fff; color:#0e1b2e;
  border:1px solid rgba(20,40,100,.22);
  border-radius:6px; padding:.6rem .8rem;
  font-family:inherit;
}

/* =======================================================
   Hero “Pill Rows” + Badge
   ======================================================= */

/* Generic pill row style (for Service Area / Done-for-you visibility) */
.pill-row{
  background:var(--card); color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.45rem .9rem;
  display:inline-block;
}

/* Mobile: push below hamburger, tighten */
@media (max-width:900px){
  .pill-row{
    margin-top:3.5rem;         /* clears hamburger zone */
    font-size:.85rem; line-height:1.3;
    padding:.25rem .6rem;
  }
  .pill-row + .pill-row{ margin-top:.5rem; }  /* bring pill rows closer */
}

/* Centered blue badge under pills */
.hero .brand-badge-wrapper{ text-align:center; }
.hero .brand-badge{
  display:inline-block;                 /* width hugs text */
  margin:1.25rem auto 0;                /* space above, centered */
  background:#3b82f6; color:#fff;
  font-weight:700; font-size:.9rem;
  padding:.4rem 1rem; border-radius:999px; text-align:center;
}

/* Optional: hide the small badge on desktop if hero title already says the brand */
/*
@media (min-width:901px){
  .hero .brand-badge-wrapper{ display:none; }
}
*/
/* wrapper centers the pill */
.brand-badge-wrapper {
  text-align: center;   /* this is what makes it centered */
  margin-top: 1.25rem;  /* space above it */
}

/* blue pill style */
.brand-badge {
  display: inline-block;       /* shrink to text width */
  background: #3b82f6;         /* blue background */
  color: #fff;                 /* white text */
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;        /* pill shape */
}
.brand-badge {
  display: inline-block;
  background: #3b82f6;       /* same blue */
  color: #fff;               /* white text */
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: 0.75rem;    /* same as Explore Empire Master Map */
}
.brand-badge-wrapper {
  text-align: center;
  margin: 1.25rem 0;   /* equal margin above and below */
}

.brand-badge {
  display: inline-block;
  background: #3b82f6;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.5rem;   /* more padding = more blue space */
  border-radius: 0.75rem;   /* same style as Explore Empire Master Map */
}
h2 {
  color: #3b82f6;   /* Geometric Growth Blue */
  /* or */
  /* color: #ffb000;  Gold accent */
}
/* Strong, safe override for H2 color */
h2,
.section h2,
.hero h2,
.content h2,
h2.section-title,
h2.section-heading {
  color: #3b82f6 !important; /* Geometric Growth Blue */
}
/* Only affect section headers styled in blue */
.section > h2,
.section > h3 {
  margin-bottom: 0.5rem;
}
/* Only affect section headers styled in blue */
.section > h2,
.section > h3 {
  margin-bottom: 0.5rem;
}
/* ===== tighten space under blue section headers ===== */

/* 1) Make the heading’s own bottom margin small */
section h2,
.section h2,
h2.section-heading,
h2.section-title {
  margin-bottom: 0.5rem !important;   /* ~8px */
}

/* 2) Kill the top margin on the element that comes right after an h2 */
section h2 + *,
.section h2 + *,
h2.section-heading + *,
h2.section-title + * {
  margin-top: 0 !important;
}

/* 3) Extra safety: common wrappers after headers (cards/grids/stacks) */
h2 + .card,
h2 + .cards,
h2 + .grid,
h2 + .stack,
h2 + .container,
h2 + .content {
  margin-top: 0 !important;
}
/* ===== PLACE AT THE VERY END: tighten space under section headers ===== */

/* 1) Make h2/h3 bottom margin small */
:is(section,.section) :is(h2,h3),
h2.section-title,
h2.section-heading {
  margin-bottom: 0.5rem !important;   /* ~8px under the blue header */
}

/* 2) Remove top margin/padding on the block IMMEDIATELY after the header */
:is(section,.section) :is(h2,h3) + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Common wrappers that often sit under the header */
h2 + .cards,
h2 + .card,
h2 + .grid,
h2 + .stack,
h2 + .content,
h2 + .container,
h2 + .list,
h2 + .panel {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 4) In case the first child inside those wrappers adds its own top spacing */
h2 + .container > :first-child,
h2 + .content   > :first-child,
h2 + .cards     > :first-child,
h2 + .grid      > :first-child,
h2 + .stack     > :first-child {
  margin-top: 0 !important;
}

/* Optional: also tighten h3 if you use it as a section header */
:is(section,.section) h3 + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* Force tighter spacing under blue section headers */
h2,
h2.elementor-heading-title,
h2.section-title,
h2.section-heading {
  margin-bottom: 0.5rem !important;  /* reduce bottom space */
  margin-top: 2rem !important;       /* give balanced space above */
}
/* Make all card titles gold */
.card h3,
.card h4,
.card-title {
  color: #ffb000 !important;   /* rich gold */
}
/* Footer = same look & feel as top nav */
.site-footer { border-top: 1px solid var(--g-border); padding: 28px 0 48px; }
.footgrid { display: grid; gap: 16px; align-items: start; }
@media (min-width: 860px){ .footgrid { grid-template-columns: 1fr auto; } }

/* reuse nav styles */
.site-footer .nav-list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap;
}
.site-footer .nav-list li a{
  display:block; text-decoration:none;
  color: var(--g-text); font-weight:600; line-height:1;
  padding:.65rem .75rem; border-radius:.5rem; transition:color .2s;
}
.site-footer .nav-list li a:hover{ color:#3b82f6; }
.site-footer .nav-list li a.is-active{ color:#3b82f6; font-weight:700; }
.site-footer .nav-list li.cta a{ background:#3b82f6; color:#fff; }

/* desktop bullets between links (same as top) */
@media (min-width: 901px){
  .site-footer .nav-list li a{ position:relative; padding:.6rem .9rem; }
  .site-footer .nav-list li:not(:last-child) a::after{
    content:"•"; position:absolute; right:-.35rem; color:#a6b0c7; opacity:.6; font-size:1.05rem;
  }
}