/* ==========================================================================
   ExtroVision "Glass" layer — Apple-style refresh (frosted glass, soft depth,
   large radii, calm motion). Loaded AFTER styles.css and fixes.css; removing
   the one <link> to this file restores the previous look exactly.
   Rules use `html body:not(#g):not(#h)` (two-id priority: the base sheets never use more than one id) + !important only because the base sheets do.
   ========================================================================== */

:root {
  --g-radius-xl: 28px;
  --g-radius-lg: 22px;
  --g-radius-md: 16px;
  --g-glass: rgba(255, 255, 255, 0.66);
  --g-glass-strong: rgba(255, 255, 255, 0.82);
  --g-glass-dark: rgba(255, 255, 255, 0.08);
  --g-edge: rgba(255, 255, 255, 0.78);
  --g-edge-dark: rgba(255, 255, 255, 0.16);
  --g-hairline: rgba(15, 35, 60, 0.08);
  --g-ink: #0b1220;
  --g-ink-soft: #3b4657;
  --g-blue: #0a66c2;
  --g-blue-deep: #0b3a66;
  --g-shadow: 0 1px 2px rgba(11, 31, 51, 0.05), 0 10px 30px rgba(11, 31, 51, 0.07), 0 30px 80px rgba(11, 31, 51, 0.06);
  --g-shadow-hover: 0 2px 4px rgba(11, 31, 51, 0.06), 0 18px 44px rgba(11, 31, 51, 0.12), 0 40px 100px rgba(11, 31, 51, 0.08);
  --g-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  --g-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --g-blur: blur(26px) saturate(185%);
}

/* ---------- ambient backdrop (what the glass sits on) ---------- */
html body:not(#g):not(#h) {
  background-color: #f5f6f8 !important;
  background-image:
    radial-gradient(1000px 640px at 6% -10%, rgba(120, 186, 255, 0.16), transparent 62%),
    radial-gradient(860px 600px at 102% 8%, rgba(176, 156, 255, 0.11), transparent 62%),
    radial-gradient(900px 700px at 50% 112%, rgba(110, 220, 210, 0.09), transparent 62%) !important;
  background-attachment: fixed !important;
  color: var(--g-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- typography: calmer, tighter headlines, comfortable body ---------- */
html body:not(#g):not(#h) h1 { letter-spacing: -0.028em !important; }
html body:not(#g):not(#h) h2 { letter-spacing: -0.022em !important; }
html body:not(#g):not(#h) h3 { letter-spacing: -0.012em !important; }
html body:not(#g):not(#h) p, html body:not(#g):not(#h) li { line-height: 1.65; }
html body:not(#g):not(#h) .eyebrow { letter-spacing: 0.14em !important; }

/* ---------- navigation: floating liquid-glass capsule ---------- */
html body:not(#g):not(#h) .topbar {
  background: rgba(255, 255, 255, 0.74) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-edge) !important;
  box-shadow: var(--g-highlight), 0 8px 32px rgba(11, 31, 51, 0.10), 0 1px 2px rgba(11, 31, 51, 0.06) !important;
}
html body:not(#g):not(#h) .nav-links a,
html body:not(#g):not(#h) .nav-dropdown-toggle {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--g-ink) !important;
  background: transparent !important;
  transition: background-color 0.25s var(--g-ease), color 0.25s var(--g-ease) !important;
}
html body:not(#g):not(#h) .nav-links a:hover,
html body:not(#g):not(#h) .nav-dropdown-toggle:hover { background: rgba(11, 31, 51, 0.06) !important; }
html body:not(#g):not(#h) .nav-links a[aria-current="page"],
html body:not(#g):not(#h) .nav-links a.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--g-blue) !important;
  box-shadow: var(--g-highlight), 0 1px 3px rgba(11, 31, 51, 0.12) !important;
}
html body:not(#g):not(#h) .nav-dropdown-menu {
  background: var(--g-glass-strong) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-highlight), var(--g-shadow-hover) !important;
}
html body:not(#g):not(#h) .nav-dropdown-menu a { border-radius: 12px !important; }

/* ---------- buttons: solid capsule + glass capsule ---------- */
html body:not(#g):not(#h) .button,
html body:not(#g):not(#h) a.button,
html body:not(#g):not(#h) button.button,
html body:not(#g):not(#h) .nav-cta {
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  letter-spacing: -0.005em !important;
  transition: transform 0.35s var(--g-ease), box-shadow 0.35s var(--g-ease), background-color 0.25s var(--g-ease), filter 0.25s var(--g-ease) !important;
}
html body:not(#g):not(#h) .button.primary,
html body:not(#g):not(#h) .nav-cta {
  background: linear-gradient(180deg, #1677d6 0%, var(--g-blue) 55%, #0857a5 100%) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px rgba(10, 102, 194, 0.28) !important;
}
html body:not(#g):not(#h) .button.primary:hover,
html body:not(#g):not(#h) .nav-cta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 12px 28px rgba(10, 102, 194, 0.34) !important; }
html body:not(#g):not(#h) .button:active,
html body:not(#g):not(#h) .nav-cta:active { transform: scale(0.97); }
html body:not(#g):not(#h) .button.secondary,
html body:not(#g):not(#h) .button:not(.primary) {
  background: var(--g-glass-strong) !important;
  color: var(--g-ink) !important;
  border: 1px solid var(--g-edge) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  box-shadow: var(--g-highlight), 0 4px 14px rgba(11, 31, 51, 0.08) !important;
}

/* ---------- cards: frosted panels with large radii and soft lift ---------- */
html body:not(#g):not(#h) .inner-card,
html body:not(#g):not(#h) .journey-step,
html body:not(#g):not(#h) .page-metric-card,
html body:not(#g):not(#h) .contact-panel,
html body:not(#g):not(#h) .contact-map-card,
html body:not(#g):not(#h) .faq-ac,
html body:not(#g):not(#h) .testimonials article,
html body:not(#g):not(#h) .resources article,
html body:not(#g):not(#h) .article-row,
html body:not(#g):not(#h) .blog-takeaways,
html body:not(#g):not(#h) .blog-related,
html body:not(#g):not(#h) .blog-author,
html body:not(#g):not(#h) .blog-cta-box,
html body:not(#g):not(#h) .city-guides,
html body:not(#g):not(#h) .city-nearby,
html body:not(#g):not(#h) .resource-rail article,
html body:not(#g):not(#h) .faq-list details,
html body:not(#g):not(#h) .intel-panels article,
html body:not(#g):not(#h) .footer-freebie,
html body:not(#g):not(#h) form.contact-panel,
html body:not(#g):not(#h) .tool-logo-card,
html body:not(#g):not(#h) .loc-card,
html body:not(#g):not(#h) .industry-grid article,
html body:not(#g):not(#h) .plug-card,
html body:not(#g):not(#h) .service-feature-grid article,
html body:not(#g):not(#h) .contact-methods article,
html body:not(#g):not(#h) .tool-stack article,
html body:not(#g):not(#h) .service-single-aside,
html body:not(#g):not(#h) .blog-featured {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: var(--g-blur) !important;
  backdrop-filter: var(--g-blur) !important;
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-highlight), var(--g-shadow) !important;
  transition: transform 0.45s var(--g-ease), box-shadow 0.45s var(--g-ease) !important;
}
html body:not(#g):not(#h) .inner-card:hover,
html body:not(#g):not(#h) .journey-step:hover,
html body:not(#g):not(#h) .testimonials article:hover,
html body:not(#g):not(#h) .resources article:hover,
html body:not(#g):not(#h) .article-row:hover,
html body:not(#g):not(#h) .ecosystem-grid article:hover,
html body:not(#g):not(#h) .resource-rail article:hover,
html body:not(#g):not(#h) .intel-panels article:hover,
html body:not(#g):not(#h) .loc-card:hover,
html body:not(#g):not(#h) .plug-card:hover,
html body:not(#g):not(#h) .industry-grid article:hover,
html body:not(#g):not(#h) .tool-logo-card:hover,
html body:not(#g):not(#h) .service-feature-grid article:hover {
  transform: translateY(-4px);
  box-shadow: var(--g-highlight), var(--g-shadow-hover) !important;
}
html body:not(#g):not(#h) .city-guides,
html body:not(#g):not(#h) .city-nearby,
html body:not(#g):not(#h) .blog-related,
html body:not(#g):not(#h) .blog-takeaways { padding: 22px 26px !important; }

/* step cards were open rows; as cards they need inner space */
html body:not(#g):not(#h) .journey-step { padding: 26px 30px !important; }
html body:not(#g):not(#h) .journey-step + .journey-step { margin-top: 14px !important; }

/* text on frosted panels keeps full contrast */
html body:not(#g):not(#h) .inner-card,
html body:not(#g):not(#h) .journey-step,
html body:not(#g):not(#h) .faq-ac,
html body:not(#g):not(#h) .resources article,
html body:not(#g):not(#h) .article-row,
html body:not(#g):not(#h) .testimonials article,
html body:not(#g):not(#h) .blog-takeaways,
html body:not(#g):not(#h) .blog-related,
html body:not(#g):not(#h) .blog-cta-box { color: var(--g-ink) !important; }

/* the pastel service tiles keep their own colours and illustrations: only softer corners and lift */
html body:not(#g):not(#h) .ecosystem-grid article {
  border-radius: var(--g-radius-lg) !important;
  transition: transform 0.45s var(--g-ease), box-shadow 0.45s var(--g-ease) !important;
}

/* the AI avatar card is designed dark with light text: keep its colours, round it */
html body:not(#g):not(#h) .ai-character-card { border-radius: var(--g-radius-xl) !important; overflow: hidden; }

/* designed visual cards keep their own colours: softer corners only */
html body:not(#g):not(#h) .ai-capability-card,
html body:not(#g):not(#h) .resource-kit article,
html body:not(#g):not(#h) .ai-marketing-visual,
html body:not(#g):not(#h) .canvas-artboard { border-radius: var(--g-radius-xl) !important; overflow: hidden; }

/* proof row (e.g. "Technical SEO | Local SEO + GBP | ..."): separate frosted capsules */
html body:not(#g):not(#h) .page-proof-row,
html body:not(#g):not(#h) .industries-proof-row { gap: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body:not(#g):not(#h) .page-proof-row > span,
html body:not(#g):not(#h) .industries-proof-row > * {
  background: var(--g-glass) !important;
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge) !important;
  border-radius: var(--g-radius-md) !important;
  box-shadow: var(--g-highlight), 0 4px 16px rgba(11, 31, 51, 0.06) !important;
}

/* cards on dark bands: dark glass */
html body:not(#g):not(#h) .dark-band .inner-card,
html body:not(#g):not(#h) .global-proof article {
  background: var(--g-glass-dark) !important;
  border: 1px solid var(--g-edge-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}

/* ---------- readability ---------- */
/* small category labels on the home page article cards: darker blue (was 2.7:1, now above 4.5:1) */
html body:not(#g):not(#h) .resource-rail article span { color: #0a5aa8 !important; }
/* grey intro text in light sections: a touch darker so it stays above 4.5:1 on the frosted bands */
html body:not(#g):not(#h) .faq .section-intro p,
html body:not(#g):not(#h) .faq > div > p { color: #4a5568 !important; }
/* WhatsApp link in the blog closing box: white on WhatsApp's dark green instead of the bright green */
html body:not(#g):not(#h) .blog-cta-wa .whatsapp-link {
  background: #0b6e4f !important;
  color: #fff !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
}

/* ---------- FAQ accordions ---------- */
html body:not(#g):not(#h) .faq-ac,
html body:not(#g):not(#h) .faq-list details { overflow: hidden; }
html body:not(#g):not(#h) .faq-ac + .faq-ac { margin-top: 12px !important; }
html body:not(#g):not(#h) .faq-ac summary,
html body:not(#g):not(#h) .faq-list summary { font-weight: 650 !important; color: var(--g-ink) !important; }
html body:not(#g):not(#h) .faq-ac[open],
html body:not(#g):not(#h) .faq-list details[open] { background: var(--g-glass-strong) !important; }

/* ---------- image banners and heroes: rounded, inset like a device screen ---------- */
html body:not(#g):not(#h) .page-image-banner,
html body:not(#g):not(#h) .page-image-banner img,
html body:not(#g):not(#h) .svc-figure img,
html body:not(#g):not(#h) .story-visual img { border-radius: var(--g-radius-xl) !important; }
html body:not(#g):not(#h) .page-image-banner { overflow: hidden; box-shadow: var(--g-shadow) !important; }
html body:not(#g):not(#h) .contact-map-card { overflow: hidden; }
html body:not(#g):not(#h) .contact-map-card iframe { border-radius: var(--g-radius-lg) !important; }

/* light bands become a soft frosted sheet instead of a flat stripe */
html body:not(#g):not(#h) .page-band.light-band {
  border-radius: var(--g-radius-xl) !important;
  background: rgba(255, 255, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--g-edge) !important;
}

/* ---------- forms ---------- */
html body:not(#g):not(#h) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
html body:not(#g):not(#h) select,
html body:not(#g):not(#h) textarea {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 35, 60, 0.14) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  transition: border-color 0.2s var(--g-ease), box-shadow 0.2s var(--g-ease) !important;
}
html body:not(#g):not(#h) input:focus,
html body:not(#g):not(#h) select:focus,
html body:not(#g):not(#h) textarea:focus {
  outline: none !important;
  border-color: var(--g-blue) !important;
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.16) !important;
}

/* ---------- footer pills ---------- */
html body:not(#g):not(#h) .footer-pill {
  border-radius: 999px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- tablets and phones: page headings never touch the screen edge ---------- */
@media (max-width: 820px) {
  html body:not(#g):not(#h) .site-shell .page-main > .page-hero,
  html body:not(#g):not(#h) .site-shell .page-main > section.page-hero {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* ---------- small screens: lighter blur for smooth scrolling ---------- */
@media (max-width: 760px) {
  :root { --g-blur: blur(18px) saturate(170%); }
  html body:not(#g):not(#h) { background-attachment: scroll !important; }
  html body:not(#g):not(#h) .inner-card:hover,
  html body:not(#g):not(#h) .journey-step:hover,
  html body:not(#g):not(#h) .resources article:hover,
  html body:not(#g):not(#h) .article-row:hover,
  html body:not(#g):not(#h) .ecosystem-grid article:hover,
  html body:not(#g):not(#h) .testimonials article:hover { transform: none; }
}

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html body:not(#g):not(#h) * { transition: none !important; }
}