/*
Theme Name: Ollie Child
Theme URI: https://olliewp.com
Description: Ollie child theme.
Author: Mike McAlister
Author URI: https://olliewp.com
Template:     ollie
Version: 1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: ollie-child
*/

/* ============ PROJECT CSS (only what theme.json cannot express) ============ */

/* CTA: subtle decorative dot texture over the gradient. Decorative only. */
.cta-dark {
  position: relative;
  overflow: hidden;
}
.cta-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.1;
  pointer-events: none;
}
.cta-dark > * {
  position: relative;
  z-index: 1;
}

/* CTA trust row: centered list of proof points with inline check icons. */
.cta-trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
}
.cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cta-trust svg {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--wp--preset--color--success);
}

/* Kicker eyebrow label (matches blacktigerdigital.com .btd-kicker). */
.btd-kicker {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
}

/* Subtle hover lift for cards. Motion-safe. */
.btd-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btd-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .btd-lift {
    transition: none;
  }
  .btd-lift:hover {
    transform: none;
  }
}

/* Feature list: warning-colored marker replaces per-item icons. */
.btd-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.btd-feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.85rem;
}
.btd-feature-list li:last-child {
  margin-bottom: 0;
}
.btd-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--wp--preset--color--warning);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 0l4 4-4 4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 0l4 4-4 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icon circle (e.g. thumbs up/down card headers). */
.btd-icon-circle {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.btd-icon-circle svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.btd-icon-circle--success { background-color: var(--wp--preset--color--success); }
.btd-icon-circle--danger { background-color: var(--wp--preset--color--danger); }

/* Check / X lists: meaningful markers (success check, danger X). */
.btd-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.btd-checklist li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
}
.btd-checklist li:last-child {
  margin-bottom: 0;
}
.btd-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--btd-marker-color, currentColor);
  -webkit-mask: var(--btd-marker) center / contain no-repeat;
  mask: var(--btd-marker) center / contain no-repeat;
}
.btd-checklist--check li::before {
  --btd-marker-color: var(--wp--preset--color--success);
  --btd-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E");
}
.btd-checklist--x li::before {
  --btd-marker-color: var(--wp--preset--color--danger);
  --btd-marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}

/* Gravity Forms honeypot ("My URL" field). REQUIRED. Hides it from humans;
   bots fill it and are rejected by the gform_validation filter. */
.contact-url {
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

/* Visually-hidden text for screen readers (descriptive link context, etc.). */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

/* Soft shadow + corner clip for cards (matches blacktigerdigital.com). */
.btd-soft-shadow { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12); }
.btd-clip { overflow: hidden; }

/* Split-card dark panel: vertically center its content. */
.btd-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Small icon circle variant with a soft warning tint. */
.btd-icon-circle--sm { width: 40px; height: 40px; }
.btd-icon-circle--sm svg { width: 18px; height: 18px; }
.btd-icon-circle--warning-soft {
  background-color: rgba(181, 139, 58, 0.2);
  background-color: color-mix(in srgb, var(--wp--preset--color--warning) 20%, transparent);
  color: var(--wp--preset--color--warning);
}

/* Small standalone tile icon (warning colored). */
.btd-tile-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 0.5rem;
  color: var(--wp--preset--color--warning);
}
.btd-tile-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

/* Subtle ring border for cards (btd-ring approximation; not in source CSS). */
.btd-ring { border: 1px solid rgba(0, 0, 0, 0.08); }

/* Stats strip: 2-up on mobile, 4-up from lg (matches col-6 col-lg-3). */
.btd-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 992px) {
  .btd-stats-strip { grid-template-columns: repeat(4, 1fr); }
}

/* Large centered standalone icon. */
.btd-icon-xl {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto 1rem;
  color: var(--wp--preset--color--warning);
}
.btd-icon-xl svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

/* Hero: layered background (warm glow + dot texture + dark gradient + image).
   Replace the image URL with a locally uploaded hero, and set it in the
   BT Toolkit Preload Manager for best LCP. */
.btd-hero {
  min-height: 700px;
  background:
    radial-gradient(ellipse at top, color-mix(in srgb, var(--wp--preset--color--warning) 15%, transparent), transparent 50%),
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, 0.10) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(180deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.95)),
    url("https://images.blacktigerdigital.com/wp-media-folder-black-tiger-digital/wp-content/uploads/2025/12/black-tiger-digital-marketing-automation-system.webp") center / cover no-repeat,
    #0a0a0a;
}

/* Glassmorphism panel (semi-transparent + blur). */
.btd-glass {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Glass pill badge. */
.btd-badge {
  display: inline-block;
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--warning);
}

/* Medium icon circle (48px). */
.btd-icon-circle--md { width: 48px; height: 48px; }
.btd-icon-circle--md svg { width: 22px; height: 22px; }

/* ============ ENTRANCE ANIMATIONS ============
   Add the classes below to any block (Advanced -> Additional CSS class(es)):
     btd-animate                 base (fade in)
     btd-animate--up / --down    slide in vertically
     btd-animate--left / --right slide in horizontally
     btd-animate--zoom           scale up
     btd-animate--tilt           tilt + rise
     btd-delay-1 / -2 / -3       stagger (0.1s / 0.2s / 0.3s)
   Do NOT add to the hero <h1> / LCP element. Gated behind .js so content is
   visible without JavaScript; disabled under prefers-reduced-motion. */
.js .btd-animate {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .btd-animate.is-visible {
  opacity: 1;
  transform: none;
  transition-delay: var(--btd-delay, 0s);
}
.js .btd-animate--up { transform: translateY(40px); }
.js .btd-animate--down { transform: translateY(-40px); }
.js .btd-animate--left { transform: translateX(-40px); }
.js .btd-animate--right { transform: translateX(40px); }
.js .btd-animate--zoom { transform: scale(0.92); }
.js .btd-animate--tilt {
  transform: perspective(800px) rotateX(8deg) translateY(30px);
  transform-origin: top center;
}
.js .btd-delay-1 { --btd-delay: 0.1s; }
.js .btd-delay-2 { --btd-delay: 0.2s; }
.js .btd-delay-3 { --btd-delay: 0.3s; }

/* Auto-stagger: add .btd-stagger to a parent; its .btd-animate children cascade. */
.js .btd-stagger > .btd-animate:nth-child(2).is-visible { --btd-delay: 0.12s; }
.js .btd-stagger > .btd-animate:nth-child(3).is-visible { --btd-delay: 0.24s; }
.js .btd-stagger > .btd-animate:nth-child(4).is-visible { --btd-delay: 0.36s; }

/* Problem card (dark, subtle border). */
.btd-problem-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  text-align: center;
}

/* Responsive grid: 1-up / 2-up (md) / 4-up (lg). */
.btd-grid-1-2-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) { .btd-grid-1-2-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .btd-grid-1-2-4 { grid-template-columns: repeat(4, 1fr); } }

/* Large icon circle (80px) with soft danger tint + warning icon.
   color-mix ties the tint to the danger/warning tokens (follows global edits). */
.btd-icon-circle--lg { width: 80px; height: 80px; }
.btd-icon-circle--lg svg { width: 32px; height: 32px; }
.btd-icon-circle--danger-soft {
  background-color: rgba(124, 58, 82, 0.15);
  background-color: color-mix(in srgb, var(--wp--preset--color--danger) 15%, transparent);
  border: 2px solid rgba(124, 58, 82, 0.3);
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--danger) 30%, transparent);
  color: var(--wp--preset--color--warning);
}

/* Base inline icon (references the sprite via <use>). Inherits text color. */
.icon {
  width: 1.25em;
  height: 1.25em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Button trailing icons. Core Button can't embed SVG, so the icon is a CSS
   mask after the label (inherits the button text color). Add two classes to a
   Button block, e.g. "btd-btn-icon btd-icon-arrow-right". */
.btd-btn-icon .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.5em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--btd-btn-icon) center / contain no-repeat;
  mask: var(--btd-btn-icon) center / contain no-repeat;
}
.btd-icon-arrow-right { --btd-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.01 11H4v2h12.01v3L20 12l-3.99-4z'/%3E%3C/svg%3E"); }
.btd-icon-arrow-down { --btd-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 4h2v12l5.5-5.5 1.42 1.42L12 19.84l-7.92-7.92L5.5 10.5 11 16z'/%3E%3C/svg%3E"); }
.btd-icon-phone { --btd-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E"); }
.btd-icon-calendar { --btd-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zm-2.47-8.06L15.47 9.88l-4.24 4.24-2.12-2.12-1.06 1.06L11.23 16l5.3-5.06z'/%3E%3C/svg%3E"); }
.btd-icon-dollar { --btd-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 10.9c-2.27-.59-3-1.2-3-2.15 0-1.09 1.01-1.85 2.7-1.85 1.78 0 2.44.85 2.5 2.1h2.21c-.07-1.72-1.12-3.3-3.21-3.81V3h-3v2.16c-1.94.42-3.5 1.68-3.5 3.61 0 2.31 1.91 3.46 4.7 4.13 2.5.6 3 1.48 3 2.41 0 .69-.49 1.79-2.7 1.79-2.06 0-2.87-.92-2.98-2.1h-2.2c.12 2.19 1.76 3.42 3.68 3.83V21h3v-2.15c1.95-.37 3.5-1.5 3.5-3.55 0-2.84-2.43-3.81-4.7-4.4z'/%3E%3C/svg%3E"); }

/* Token-driven translucent card tints (color-mix follows global swatch edits). */
.btd-tint-success {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent), color-mix(in srgb, var(--wp--preset--color--success) 5%, transparent));
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--success) 35%, transparent);
  border-radius: 2rem;
}
.btd-tint-danger {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--danger) 12%, transparent), color-mix(in srgb, var(--wp--preset--color--danger) 5%, transparent));
  border: 2px solid color-mix(in srgb, var(--wp--preset--color--danger) 35%, transparent);
  border-radius: 2rem;
}
.btd-tint-glow {
  background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--warning) 8%, transparent), color-mix(in srgb, var(--wp--preset--color--info) 8%, transparent));
}

@media (prefers-reduced-motion: reduce) {
  .js .btd-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============ XGS STICKY SITE HEADER ============
   Bespoke translucent header. theme.json cannot express the backdrop blur,
   gradient CTA, or scroll state, so it lives here. The template-part wrapper
   (.site-header, set by Ollie's header reference) is the sticky container;
   .xgs-header-v2 is the visible bar. global.js toggles .is-scrolled. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.xgs-header-v2 {
  --xgs-header-height: 100px;
  --xgs-accent: var(--wp--preset--color--primary);
  --xgs-accent-glow: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
  --xgs-bar-bg: color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent);
  --xgs-bar-bg-solid: var(--wp--preset--color--base);
  --xgs-text-soft: var(--wp--preset--color--muted);
  --xgs-cta: var(--wp--preset--gradient--cta);
  --xgs-cta-hover: linear-gradient(135deg, #fbbf24 0%, #f87171 100%);
  --xgs-ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: var(--xgs-header-height);
  display: flex;
  align-items: center;
  background: var(--xgs-bar-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--xgs-ease), box-shadow var(--xgs-ease);
}
.xgs-header-v2.is-scrolled {
  background: var(--xgs-bar-bg-solid);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}
.xgs-header-inner {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1320px);
  margin-inline: auto;
  padding-inline: var(--xgs-gutter, 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

/* Logo */
.xgs-header-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}
.xgs-header-logo-link:hover { transform: scale(1.02); }
.xgs-header-logo {
  height: 70px;
  width: auto;
  max-width: 450px;
  display: block;
}

/* Right-side actions */
.xgs-header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Phone (hidden on the smallest screens, CTA carries the action) */
.xgs-header-phone {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  color: var(--xgs-text-soft);
  text-decoration: none;
  font-weight: 500;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.xgs-header-phone:hover {
  color: var(--xgs-accent);
  background: var(--xgs-accent-glow);
  text-decoration: none;
}
.xgs-header-phone .icon { width: 18px; height: 18px; }
@media (min-width: 576px) {
  .xgs-header-phone { display: inline-flex; }
}

/* CTA button */
.xgs-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--xgs-cta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  transition: background var(--xgs-ease), transform var(--xgs-ease), box-shadow var(--xgs-ease);
}
.xgs-header-cta:hover {
  background: var(--xgs-cta-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.35);
}
.xgs-header-cta .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.xgs-header-cta:hover .icon { transform: translateX(3px); }

/* Responsive */
@media (max-width: 767px) {
  .xgs-header-v2 { --xgs-header-height: 80px; }
  .xgs-header-logo { height: 50px; max-width: 280px; }
}
@media (max-width: 575px) {
  .xgs-header-cta { padding: 0.625rem 1.25rem; }
  .xgs-header-cta span { display: none; }
  .xgs-header-cta .icon { width: 18px; height: 18px; }
}
@media (max-width: 480px) {
  .xgs-header-logo { height: 40px; max-width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .xgs-header-v2,
  .xgs-header-logo-link,
  .xgs-header-cta,
  .xgs-header-cta .icon { transition: none; }
  .xgs-header-logo-link:hover,
  .xgs-header-cta:hover { transform: none; }
}

/* ============ XGS SITE FOOTER ============
   Bespoke dark footer. theme.json cannot express the gradient top border,
   radial glows, gradient CTA, or pill contact links, so it lives here.
   Sits inside Ollie's footer template-part wrapper (.site-footer). */
.xgs-footer-v2 {
  --xgs-accent: var(--wp--preset--color--primary);
  --xgs-accent-glow: color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent);
  --xgs-bg-deep: var(--wp--preset--color--base);
  --xgs-text-secondary: var(--wp--preset--color--muted);
  --xgs-text-muted: var(--wp--preset--color--faint);
  --xgs-cta: var(--wp--preset--gradient--cta);
  --xgs-ease: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  background: var(--xgs-bg-deep);
}

/* Thin multi-color top border */
.xgs-footer-v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 20%,
    color-mix(in srgb, var(--wp--preset--color--violet) 30%, transparent) 50%,
    color-mix(in srgb, var(--wp--preset--color--warning) 30%, transparent) 80%,
    transparent 100%);
}

.xgs-footer-container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1320px);
  margin-inline: auto;
  padding-inline: var(--xgs-gutter, 20px);
}

/* Main block */
.xgs-footer-main {
  position: relative;
  padding: 4rem 0 3rem;
}
.xgs-footer-main::before,
.xgs-footer-main::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.xgs-footer-main::before {
  width: 500px;
  height: 500px;
  top: -200px;
  left: -100px;
  background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent) 0%, transparent 60%);
}
.xgs-footer-main::after {
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -100px;
  background: radial-gradient(circle, color-mix(in srgb, var(--wp--preset--color--violet) 5%, transparent) 0%, transparent 60%);
}
.xgs-footer-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}

/* Logo */
.xgs-footer-logo-link {
  display: inline-block;
  transition: transform 0.2s ease;
}
.xgs-footer-logo-link:hover { transform: scale(1.03); }
.xgs-footer-logo {
  width: 280px;
  max-width: 100%;
  height: auto;
}

/* Tagline */
.xgs-footer-tagline {
  max-width: 500px;
  margin: 0;
  color: var(--xgs-text-secondary);
  line-height: 1.7;
}

/* Contact pills */
.xgs-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.xgs-footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  color: var(--xgs-text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--xgs-ease), border-color var(--xgs-ease), color var(--xgs-ease), transform var(--xgs-ease);
}
.xgs-footer-contact-link:hover {
  background: var(--xgs-accent-glow);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  transform: translateY(-2px);
}
.xgs-footer-contact-link .icon {
  width: 18px;
  height: 18px;
  color: var(--xgs-accent);
  flex: none;
}

/* CTA */
.xgs-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  background: var(--xgs-cta);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  transition: transform var(--xgs-ease), box-shadow var(--xgs-ease);
}
.xgs-footer-cta:hover {
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(245, 158, 11, 0.35);
}
.xgs-footer-cta .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}
.xgs-footer-cta:hover .icon { transform: translateX(3px); }

/* Bottom / legal */
.xgs-footer-bottom {
  position: relative;
  z-index: 1;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.xgs-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
}
.xgs-footer-copyright {
  margin: 0;
  color: var(--xgs-text-secondary);
  font-size: 0.875rem;
}
.xgs-footer-credit {
  margin: 0;
  color: var(--xgs-text-secondary);
  font-size: 0.8125rem;
}
@media (min-width: 768px) {
  .xgs-footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media (max-width: 575px) {
  .xgs-footer-main { padding: 3rem 0 2rem; }
  .xgs-footer-logo { width: 220px; }
  .xgs-footer-contact { flex-direction: column; width: 100%; }
  .xgs-footer-contact-link { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .xgs-footer-logo-link,
  .xgs-footer-contact-link,
  .xgs-footer-cta,
  .xgs-footer-cta .icon { transition: none; }
  .xgs-footer-logo-link:hover,
  .xgs-footer-contact-link:hover,
  .xgs-footer-cta:hover { transform: none; }
}

/* ============ XGS HOME HERO (animated) ============
   Bespoke animated hero. theme.json cannot express the layered animated
   background (drifting mesh, panning grid, floating shapes), gradient text,
   or the floating partner badge, so it lives here. All ambient motion is
   disabled under prefers-reduced-motion; entrance reveals reuse the
   .btd-animate system in global.js (the h1 and LCP image are never hidden). */
.xgs-hero-v2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent), transparent 60%),
    var(--wp--preset--color--base);
}

/* Layered animated background */
.xgs-hero-mesh {
  position: absolute;
  inset: -20%;
  z-index: -2;
  pointer-events: none;
  filter: blur(40px);
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent), transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--wp--preset--color--violet) 16%, transparent), transparent 45%),
    radial-gradient(circle at 60% 20%, color-mix(in srgb, var(--wp--preset--color--warning) 10%, transparent), transparent 40%);
  animation: xgs-mesh-drift 22s ease-in-out infinite alternate;
}
.xgs-hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--wp--preset--color--contrast) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 75%);
  animation: xgs-grid-pan 30s linear infinite;
}
.xgs-hero-shapes {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.xgs-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.xgs-shape--1 {
  width: 340px;
  height: 340px;
  top: -60px;
  left: -40px;
  background: var(--wp--preset--color--primary);
  animation: xgs-float-a 16s ease-in-out infinite;
}
.xgs-shape--2 {
  width: 300px;
  height: 300px;
  right: -30px;
  bottom: -80px;
  background: var(--wp--preset--color--violet);
  animation: xgs-float-b 19s ease-in-out infinite;
}
.xgs-shape--3 {
  width: 220px;
  height: 220px;
  top: 40%;
  left: 55%;
  opacity: 0.35;
  background: var(--wp--preset--color--warning);
  animation: xgs-float-a 23s ease-in-out infinite reverse;
}

.xgs-hero-content { position: relative; z-index: 1; }
.xgs-hero-row { gap: clamp(2rem, 4vw, 3.5rem); }

/* Eyebrow badge */
.xgs-hero-badge {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
  color: var(--wp--preset--color--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Headline */
.xgs-hero-title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--contrast);
}
.xgs-gradient-text {
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtitle */
.xgs-hero-subtitle {
  max-width: 40rem;
  margin: 0 0 2rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}

/* Button group (core Buttons, restyled) */
.xgs-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2.5rem;
}
.xgs-btn-primary .wp-block-button__link,
.xgs-btn-secondary .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 100px;
  font-weight: 600;
}
.xgs-btn-primary .wp-block-button__link {
  background: var(--wp--preset--gradient--cta);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.xgs-btn-primary .wp-block-button__link:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.35);
}
.xgs-btn-secondary .wp-block-button__link {
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 6%, transparent);
  color: var(--wp--preset--color--contrast);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
  transition: background 0.3s ease, border-color 0.3s ease;
}
.xgs-btn-secondary .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
  color: var(--wp--preset--color--contrast);
}

/* Stats row */
.xgs-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.xgs-stat-number {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--wp--preset--color--primary), var(--wp--preset--color--contrast));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.xgs-stat-label {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

/* Visual + floating badge */
.xgs-hero-visual { position: relative; }
.xgs-hero-image-wrapper {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.xgs-hero-image {
  display: block;
  width: 100%;
  height: auto;
}
.xgs-floating-badge {
  position: absolute;
  left: -1rem;
  bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  animation: xgs-badge-float 6s ease-in-out infinite;
}
.xgs-floating-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--wp--preset--gradient--cta);
  color: #fff;
}
.xgs-floating-badge-icon .icon { width: 20px; height: 20px; }
.xgs-floating-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.xgs-floating-badge-text strong {
  color: var(--wp--preset--color--contrast);
  font-size: 0.9375rem;
}
.xgs-floating-badge-text span {
  color: var(--wp--preset--color--muted);
  font-size: 0.8125rem;
}

@keyframes xgs-mesh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2%, -2%, 0) scale(1.05); }
}
@keyframes xgs-grid-pan {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}
@keyframes xgs-float-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(20px, -30px); }
}
@keyframes xgs-float-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-25px, 20px); }
}
@keyframes xgs-badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (max-width: 575px) {
  .xgs-floating-badge { left: 0.5rem; bottom: 0.5rem; }
  .xgs-hero-stats { gap: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .xgs-hero-mesh,
  .xgs-hero-grid,
  .xgs-shape,
  .xgs-floating-badge { animation: none !important; }
  .xgs-btn-primary .wp-block-button__link,
  .xgs-btn-secondary .wp-block-button__link { transition: none; }
}

/* ============ XGS SERVICES GRID ============
   "Our Solutions" header + four service cards. Entrance reveals reuse the
   .btd-animate / .btd-stagger system in global.js. */
.xgs-services {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--wp--preset--color--base);
}

/* Centered section header */
.xgs-section-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.xgs-section-label {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--wp--preset--color--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.xgs-section-title {
  margin: 0 0 1rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
}
.xgs-section-subtitle {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}

/* Cards grid: 1 / 2 / 4 across */
.xgs-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 600px) {
  .xgs-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .xgs-cards-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Card */
.xgs-service-card {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 1rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.xgs-service-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.xgs-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1.25rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  color: var(--wp--preset--color--primary);
}
.xgs-service-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.xgs-service-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.xgs-service-desc {
  flex: 1 1 auto;
  margin: 0 0 1.5rem;
  color: var(--wp--preset--color--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}
.xgs-service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease;
}
.xgs-service-link:hover {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  gap: 0.6rem;
}
.xgs-service-link .icon {
  width: 16px;
  height: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .xgs-service-card,
  .xgs-service-link { transition: none; }
  .xgs-service-card:hover { transform: none; }
}

/* ============ XGS FEATURE SPLIT (image + text) ============ */
.xgs-feature-split,
.xgs-mobile-section {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--wp--preset--color--base);
}
.xgs-feature-row { gap: clamp(2rem, 4vw, 4rem); }

/* On desktop, place the image on the left while keeping content first in the
   DOM (so the headline leads on mobile). */
@media (min-width: 992px) {
  .xgs-feature-row { flex-direction: row-reverse; }
}

.xgs-feature-title {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
}
.xgs-feature-text {
  margin: 0 0 1.75rem;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}

/* Checklist with circular check badges */
.xgs-feature-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.xgs-feature-list li {
  position: relative;
  padding-left: 2.5rem;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast);
}
.xgs-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
}
.xgs-feature-list li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--wp--preset--color--base);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.42z'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

/* Image side with decorative accent line */
.xgs-feature-image { position: relative; }
.xgs-accent-line {
  position: absolute;
  left: -6px;
  top: 2rem;
  bottom: 2rem;
  width: 6px;
  border-radius: 6px;
  z-index: 1;
  background: linear-gradient(180deg, var(--wp--preset--color--primary), var(--wp--preset--color--base));
}
.xgs-feature-image-inner {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.xgs-feature-image-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============ XGS FEATURE SPLIT (video) ============
   Reuses the .xgs-feature-content side; adds a click-to-load video facade.
   Content stays first in the DOM (left on desktop, video right). */
.xgs-mobile-row { gap: clamp(2rem, 4vw, 4rem); }

.xgs-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1.25rem;
  overflow: hidden;
  cursor: pointer;
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.xgs-video-container:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}
.xgs-video-thumbnail {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.xgs-video-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--wp--preset--color--base) 35%, transparent);
  transition: background 0.3s ease;
}
.xgs-video-container:hover .xgs-video-overlay,
.xgs-video-container:focus-visible .xgs-video-overlay {
  background: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent);
}
.xgs-play-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: #fff;
  background: var(--wp--preset--gradient--cta);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
}
.xgs-video-container:hover .xgs-play-button {
  transform: scale(1.08);
}
.xgs-play-button svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
  fill: currentColor;
}
.xgs-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .xgs-video-overlay,
  .xgs-play-button { transition: none; }
  .xgs-video-container:hover .xgs-play-button { transform: none; }
}

/* ============ XGS CONTACT CTA ============ */
.xgs-contact {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--wp--preset--color--base);
}
.xgs-contact-row { gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Card panel (left) */
.xgs-contact-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 1.5rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.xgs-contact-title {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--contrast);
}
.xgs-contact-text {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}

/* Email / phone tiles */
.xgs-contact-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.75rem 0;
}
.xgs-contact-method {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1 1 200px;
  padding: 0.85rem 1.1rem;
  border-radius: 0.85rem;
  text-decoration: none;
  background: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.xgs-contact-method:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
}
.xgs-contact-method-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent);
  color: var(--wp--preset--color--primary);
}
.xgs-contact-method-icon .icon { width: 20px; height: 20px; }
.xgs-contact-method-body { display: flex; flex-direction: column; line-height: 1.3; }
.xgs-contact-method-label {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.xgs-contact-method-value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}

/* Push the CTA to the bottom of the card so columns align */
.xgs-contact-cta { margin-top: auto; }

/* Image (right) fills the equal-height column */
.xgs-contact-image {
  position: relative;
  height: 100%;
  min-height: 320px;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}
.xgs-contact-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .xgs-contact-method { transition: none; }
  .xgs-contact-method:hover { transform: none; }
}

/* ============ XGS LOGO CAROUSEL (marquee) ============
   Pure-CSS infinite scroll. The track holds two identical sets of logos and
   translates -50% so the loop is seamless. Pauses on hover/focus; stops and
   becomes scrollable under prefers-reduced-motion. */
.xgs-vendors {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  background: var(--wp--preset--color--base);
}
.xgs-vendors-title {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--wp--preset--color--contrast);
}
.xgs-logo-carousel {
  display: flex;
  overflow: hidden;
  position: relative;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Two identical groups, each at least the full width and animated 0 -> -100%.
   When one group scrolls fully off, the other has taken its place, so the loop
   is seamless at any viewport width. space-around keeps the logos spread/centered
   even when the set is narrower than the screen. */
.xgs-logo-group {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-width: 100%;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  animation: xgs-logo-scroll 40s linear infinite;
}
.xgs-logo-carousel:hover .xgs-logo-group,
.xgs-logo-carousel:focus-within .xgs-logo-group {
  animation-play-state: paused;
}
.xgs-logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 44px;
}
.xgs-logo-item img {
  height: 100%;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  /* Render the mixed-brand logos as a uniform light monochrome on the dark
     background; reveal full opacity on hover. */
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.xgs-logo-item:hover img { opacity: 1; }
@keyframes xgs-logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .xgs-logo-group { animation: none; }
}

/* ============ GLOBAL GUTTER ============
   Full-width (alignfull) sections escape the theme's root padding, so their
   constrained inner wrappers would reach the viewport edge on small screens.
   Apply one consistent left/right gutter everywhere so content is never
   wall-to-wall. Adjust --xgs-gutter to taste (e.g. 15px or 20px). */
:root { --xgs-gutter: 20px; }

.xgs-hero-content,
.xgs-services-inner,
.xgs-feature-split-inner,
.xgs-mobile-inner,
.xgs-contact-inner,
.xgs-vendors-inner {
  padding-inline: var(--xgs-gutter);
}

/* ============ XGS CONTACT FORM SECTION ============ */
.xgs-contact-section {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background: var(--wp--preset--color--base);
}
.xgs-contact-header {
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  text-align: center;
}
.xgs-contact-label {
  display: inline-block;
  margin: 0 0 1rem;
  color: var(--wp--preset--color--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.xgs-contact-subtitle {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.7;
}
.xgs-contact-grid { gap: clamp(1.5rem, 3vw, 2.5rem); }

/* Shared card styling for the info + form panels */
.xgs-contact-info-card,
.xgs-contact-form-card {
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: 1.5rem;
  background: var(--wp--preset--color--surface);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.xgs-contact-info-card { display: flex; flex-direction: column; }
.xgs-contact-info-title,
.xgs-contact-form-title {
  margin: 0 0 0.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}
.xgs-contact-info-text,
.xgs-contact-form-subtitle {
  margin: 0 0 1.75rem;
  color: var(--wp--preset--color--muted);
  line-height: 1.7;
}

/* Stack the contact methods in this layout (reuses the shared tile styles) */
.xgs-contact-section .xgs-contact-methods {
  flex-direction: column;
  margin: 0 0 1.75rem;
}
.xgs-contact-section .xgs-contact-method { flex: 0 0 auto; }
.xgs-contact-method-content {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

/* Response time badge, pinned to the bottom of the info card */
.xgs-response-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  align-self: flex-start;
  padding: 0.5rem 0.9rem;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--wp--preset--color--contrast);
  background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}
.xgs-response-badge svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: var(--wp--preset--color--primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Gravity Forms, styled for the dark card */
.xgs-contact-form-card .gform_wrapper {
  margin: 0;
  /* GF Orbital computes label color as color:var(--gf-local-color), where
     --gf-local-color := var(--gf-ctrl-label-color-primary) (a dark default).
     Point those tokens at the light grey used for form labels. */
  --gf-ctrl-label-color-primary: var(--wp--preset--color--muted);
  --gf-ctrl-label-color-secondary: var(--wp--preset--color--muted);
}
/* Field labels (Email, Comments), the Name legend, and complex sub-labels
   (First/Last). !important is required: GF's framework rule sets the color at
   equal specificity and loads after this stylesheet, so it otherwise wins. */
.xgs-contact-form-card .gform_wrapper .gfield_label,
.xgs-contact-form-card .gform_wrapper legend.gfield_label,
.xgs-contact-form-card .gform_wrapper .gform-field-label {
  color: var(--wp--preset--color--muted) !important;
}
.xgs-contact-form-card .gform_wrapper .gfield_label,
.xgs-contact-form-card .gform_wrapper legend.gfield_label {
  font-weight: 600;
}
.xgs-contact-form-card input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]),
.xgs-contact-form-card textarea,
.xgs-contact-form-card select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  color: var(--wp--preset--color--contrast);
  background: color-mix(in srgb, var(--wp--preset--color--base) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent);
}
.xgs-contact-form-card input::placeholder,
.xgs-contact-form-card textarea::placeholder {
  color: var(--wp--preset--color--faint);
}
.xgs-contact-form-card input:focus,
.xgs-contact-form-card textarea:focus,
.xgs-contact-form-card select:focus {
  outline: none;
  border-color: var(--wp--preset--color--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}
.xgs-contact-form-card .gfield_description,
.xgs-contact-form-card .gform_required_legend { color: var(--wp--preset--color--muted); }
.xgs-contact-form-card .gfield_required,
.xgs-contact-form-card .validation_message { color: var(--wp--preset--color--danger); }
.xgs-contact-form-card .gform_button,
.xgs-contact-form-card input[type="submit"] {
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 100px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  background: var(--wp--preset--gradient--cta);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.xgs-contact-form-card .gform_button:hover,
.xgs-contact-form-card input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245, 158, 11, 0.35);
}
@media (prefers-reduced-motion: reduce) {
  .xgs-contact-form-card .gform_button,
  .xgs-contact-form-card input[type="submit"] { transition: none; }
  .xgs-contact-form-card .gform_button:hover,
  .xgs-contact-form-card input[type="submit"]:hover { transform: none; }
}