/*
Theme Name: B2B Managers
Theme URI: https://b2bmanagers.com
Author: Raja Aman Ullah
Author URI: https://b2bmanagers.com
Description: A premium, professional WordPress theme for WooCommerce development services and digital product sales.
Version: 2.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: b2bmanagers
Tags: woocommerce, ecommerce, services, professional, responsive
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* B2B Managers cobalt scale — brand cobalt is p600 #2454E6 */
  --c-p50:  #F2F5FF;
  --c-p100: #E3EAFF;
  --c-p200: #C5D3FF;
  --c-p300: #9BB2FF;
  --c-p400: #6E8DFF;
  --c-p500: #4D74FF;
  --c-p600: #2454E6;
  --c-p700: #1E40D9;
  --c-p800: #1A33A8;
  --c-p900: #1C2C66;
  --c-p950: #0F172A;

  --c-amber:   #f59e0b;
  --c-teal:    #1E40D9;  /* positive accent (checks, discounts) — cobalt-700, 6.2:1 on white */
  --c-emerald: #1E40D9;  /* legacy alias */
  --c-volt:    #7CC4FA;  /* brand lime — fill only on light, text only on dark */
  --c-volt-300:#B3DDFC;
  --c-volt-100:#EEF6FE;
  --c-volt-ink:#0B4A7A;
  --c-ink:     #0F172A;
  --c-rose:    #f43f5e;
  --c-sky:     #0ea5e9;

  --c-dark:  #070B15;
  --c-dark2: #0F172A;
  --c-dark3: #10182B;

  --c-slate50:  #f8fafc;
  --c-slate100: #f1f5f9;
  --c-slate200: #e2e8f0;
  --c-slate300: #cbd5e1;
  --c-slate400: #94a3b8;
  --c-slate500: #64748b;
  --c-slate600: #475569;
  --c-slate700: #334155;
  --c-slate800: #222222;
  --c-slate900: #111111;
  --c-white: #ffffff;

  /* Semantic */
  --color-primary:       var(--c-p600);
  --color-primary-dark:  var(--c-p700);
  --color-primary-light: var(--c-p500);
  --color-primary-bg:    var(--c-p50);
  --color-heading:       #0F172A;
  --color-text:          var(--c-slate600);
  --color-muted:         var(--c-slate400);
  --color-border:        var(--c-slate200);
  --color-white:         var(--c-white);
  --color-light:         var(--c-slate50);

  /* Gradients */
  --grad-primary:  linear-gradient(135deg, #1E40D9 0%, #2454E6 100%);
  --grad-vivid:    linear-gradient(135deg, #0F172A 0%, #15213B 100%);
  --grad-card:     linear-gradient(135deg, #FFFFFF 0%, #F5F8FD 100%);
  --grad-dark:     linear-gradient(135deg, #070B15 0%, #0F172A 50%, #10182B 100%);
  --grad-amber:    linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
  --grad-emerald:  linear-gradient(135deg, #1E40D9 0%, #1A33A8 100%);
  --grad-glass:    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
  --grad-glow:     radial-gradient(ellipse at center, rgba(36,84,230,0.35) 0%, transparent 70%);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */

  /* Spacing scale */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;
  --sp-4:  1rem;     --sp-5:  1.25rem;  --sp-6:  1.5rem;
  --sp-8:  2rem;     --sp-10: 2.5rem;   --sp-12: 3rem;
  --sp-16: 4rem;     --sp-20: 5rem;     --sp-24: 6rem;
  --sp-32: 8rem;

  /* Radii */
  --r-sm: 0.5rem;  --r-md: 0.75rem; --r-lg: 1rem;
  --r-xl: 1.25rem; --r-2xl: 1.75rem; --r-3xl: 2.5rem;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:    0 2px 8px rgba(0,0,0,.07);
  --shadow-md:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:    0 16px 48px rgba(0,0,0,.14);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,.18);
  --shadow-purple: 0 8px 32px rgba(36,84,230,.25);
  --shadow-purple-lg: 0 16px 56px rgba(36,84,230,.35);
  --shadow-card:  0 4px 24px rgba(36,84,230,.08), 0 1px 4px rgba(0,0,0,.05);
  --shadow-card-hover: 0 20px 60px rgba(36,84,230,.18), 0 4px 16px rgba(0,0,0,.08);

  /* Transitions */
  --t-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --t-base: 250ms cubic-bezier(0.4,0,0.2,1);
  --t-slow: 400ms cubic-bezier(0.4,0,0.2,1);
  --t-spring: 500ms cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 780px;
  --px: clamp(1rem, 4vw, 2rem);
  --header-h: 72px;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color: var(--color-primary); text-decoration:none; transition:color var(--t-fast); }
ul,ol { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,textarea,select { font-family:inherit; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-heading);
  letter-spacing: -0.025em;
}
/* Anchors inside headings inherit black — not the global link purple */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--c-teal, #1E40D9);
}
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--px);
  padding-right: var(--px);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section    { padding: clamp(4rem, 8vw, 6rem) 0; }
.section--sm{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--lg{ padding: clamp(5rem,10vw,8rem) 0; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-self: flex-start; /* never stretch inside a flex column */
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-p700);
  background: var(--c-p100);
  border: 1px solid var(--c-p200);
  border-radius: var(--r-full);
  padding: 0.35rem 1rem;
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content:'';
  width:6px; height:6px;
  border-radius:50%;
  background: var(--c-p600);
  flex-shrink:0;
}

.section-title {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
/* gradient-text works inside any heading, not just .section-title */
h1 .gradient-text, h2 .gradient-text, h3 .gradient-text,
.section-title .gradient-text {
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--color-text);
  max-width: 560px;
  line-height: 1.75;
}
.section-header {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-header .section-subtitle { margin: 0 auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
/* ── Button Base ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.22s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease;
}
/* Icon slides right on every button hover */
.btn svg, .btn .icon {
  flex-shrink: 0;
  width: 16px; height: 16px;
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1);
}
.btn:hover svg, .btn:hover .icon { transform: translateX(3px); }
.btn--lg svg, .btn--lg .icon { width: 18px; height: 18px; }

/* ── Primary — teal gradient, shimmer sweep ──────────────────── */
.btn--primary {
  background: linear-gradient(180deg, #3A66FF 0%, #2454E6 100%);
  color: #fff;
  border-color: rgba(36,84,230,0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 2px 10px rgba(36,84,230,0.38),
    0 1px 3px rgba(0,0,0,0.12);
}
/* Shimmer sweep — diagonal light band travels across on hover */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; left: -85%;
  width: 58%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  transition: left 0.68s ease;
  pointer-events: none;
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 10px 34px rgba(36,84,230,0.48),
    0 0 0 4px rgba(36,84,230,0.12),
    0 2px 8px rgba(0,0,0,0.10);
}
.btn--primary:hover::after { left: 158%; }
.btn--primary:active  {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 14px rgba(36,84,230,0.38);
}

/* ── Header CTA override — tighter, crisper in nav context ───── */
.header-cta .btn--primary {
  padding: 0.58rem 1.3rem;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  background: linear-gradient(150deg, #1E40D9 0%, #2454E6 45%, #1E40D9 100%);
  border-color: rgba(36,84,230,0.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.10),
    0 2px 12px rgba(36,84,230,0.32),
    0 1px 3px rgba(0,0,0,0.10);
}
.header-cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 8px 26px rgba(36,84,230,0.44),
    0 0 0 4px rgba(36,84,230,0.12),
    0 1px 4px rgba(0,0,0,0.08);
}

/* ── Outline ─────────────────────────────────────────────────── */
.btn--outline {
  background: transparent;
  color: var(--c-p600);
  border-color: var(--c-p300);
}
.btn--outline:hover {
  background: var(--c-p50);
  border-color: var(--c-p500);
  color: var(--c-p700);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(36,84,230,0.14);
}

/* ── Ghost white (on dark backgrounds) ──────────────────────── */
.btn--ghost-white {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--ghost-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

/* ── White (on gradient/dark sections) ──────────────────────── */
.btn--white {
  background: #fff;
  color: var(--c-p800);
  border-color: rgba(255,255,255,0.9);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.btn--white:hover {
  background: #fff;
  color: var(--c-p700);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,255,255,0.2);
}

/* ── Dark ────────────────────────────────────────────────────── */
.btn--dark {
  background: var(--c-slate900);
  color: #fff;
  border-color: var(--c-slate800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.btn--dark:hover {
  background: var(--c-slate800);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}

/* ── Size variants ───────────────────────────────────────────── */
.btn--lg { padding: 0.9rem 2.2rem; font-size: 1rem; }
.btn--sm { padding: 0.45rem 1.1rem; font-size: 0.8rem; letter-spacing:0.01em; }
.btn--icon { padding:0.75rem; aspect-ratio:1; border-radius:var(--r-full); }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge--purple  { background: var(--c-p100); color: var(--c-p800); border:1px solid var(--c-p200); }
.badge--amber   { background: #fef3c7; color: #92400e; border:1px solid #fde68a; }
.badge--emerald { background: #E3EAFF; color: #1A33A8; border:1px solid #C5D3FF; }
.badge--new { background: var(--grad-vivid); color:#fff; }

/* ============================================================
   GLASSMORPHISM CARD BASE
   ============================================================ */
.glass-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  transition: all var(--t-base);
}
.glass-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: rgba(155,178,255,0.3);
}

.dark-glass {
  background: rgba(7,11,21,0.6);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-2xl);
}

/* ============================================================
   DECORATIVE HELPERS
   ============================================================ */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.5;
}
.orb--purple { background: rgba(36,84,230,0.6); }
.orb--indigo { background: rgba(36,84,230,0.5); }
.orb--fuchsia{ background: rgba(36,84,230,0.4); }
.orb--amber  { background: rgba(245,158,11,0.3); }

.grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(36,84,230,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36,84,230,0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

.noise-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.gradient-line {
  height: 2px;
  background: var(--grad-vivid);
  border-radius: var(--r-full);
}

/* ============================================================
   SITE HEADER
   ============================================================ */
/* Push all page content below the fixed header in one place */
.site-main {
  padding-top: var(--header-h);
}

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid rgba(226,232,240,0.7);
  /* Make the header itself a flex container so the inner .container
     fills the full height — this is what allows align-items:center
     on .header-inner to actually vertically centre the logo/nav/button */
  display: flex;
  align-items: stretch;
  /* clean drop shadow — visible from the very first pixel */
  box-shadow:
    0 1px 0   rgba(0,0,0,0.04),
    0 4px 16px rgba(0,0,0,0.06),
    0 8px 32px rgba(36,84,230,0.05);
  transition: box-shadow var(--t-base), border-color var(--t-base);
}
/* The .container inside the header must fill the header's height */
.site-header > .container {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.site-header.scrolled {
  border-bottom-color: rgba(209,213,219,0.9);
  box-shadow:
    0 1px 0   rgba(0,0,0,0.05),
    0 6px 24px rgba(0,0,0,0.08),
    0 12px 48px rgba(36,84,230,0.08);
}
.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

/* Logo */
/* ── Custom logo (the_custom_logo() output) ──────────────────── */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  line-height: 0;
}
/* Force height regardless of HTML width/height attrs or SVG intrinsic size */
.custom-logo-link img.custom-logo,
.custom-logo {
  display: block !important;
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain;
}
@media (max-width: 768px) {
  .custom-logo-link img.custom-logo,
  .custom-logo { height: 36px !important; max-height: 36px !important; max-width: 140px !important; }
}

/* ── Fallback text logo (shown when no image is uploaded) ────── */
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo__mark {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #1C2C66 0%, #2454E6 100%);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: -0.03em;
  box-shadow: var(--shadow-purple);
  position: relative;
  flex-shrink: 0;
  /* teal underline accent matching logo */
  border-bottom: 3px solid var(--c-teal);
}
.site-logo__text {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-heading);
  letter-spacing: -0.03em;
}
.site-logo__text .accent { color: var(--c-p700); }

/* Primary Nav */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.primary-nav > li { position: relative; }
.primary-nav > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--c-slate700);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.primary-nav > li > a:hover,
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a {
  color: var(--c-p700);
  background: var(--c-p50);
}
.primary-nav > li.current-menu-item > a { font-weight: 700; }

/* Dropdown */
.primary-nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  /* Wider so multi-word service titles (e.g. "Custom WooCommerce Plugin
     Development", "WooCommerce Theme Customization & Child Theme Development")
     don't ride the page edge or get severely truncated. */
  min-width: 340px;
  max-width: 380px;
  background: #fff;
  border: 1px solid var(--c-slate100);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(0,0,0,.12), 0 4px 16px rgba(36,84,230,.08);
  padding: var(--sp-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transition: all var(--t-base);
  z-index: 100;
}
.primary-nav > li:hover .sub-menu,
.primary-nav > li:focus-within .sub-menu {
  opacity: 1; visibility: visible;
  transform: translateY(0) scale(1);
}
.primary-nav .sub-menu a {
  display: flex;
  /* Top-align so the SVG sits next to the first line of a wrapped title. */
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0.625rem var(--sp-4);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-slate700);
  border-radius: var(--r-md);
  transition: all var(--t-fast);
  line-height: 1.35;
  text-decoration: none;
}
/* Icon must not shrink; align with the first line of text. */
.primary-nav .sub-menu a > svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 18px;
  height: 18px;
}
/* Text wraps to max 2 lines (-webkit-line-clamp requires display:-webkit-box,
   so we apply it to the inner span — the link itself stays a flex container). */
.primary-nav .sub-menu a .sub-menu__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.primary-nav .sub-menu a:hover {
  background: var(--c-p50);
  color: var(--c-p700);
  padding-left: calc(var(--sp-4) + 4px);
}
/* "All Services →" footer link inside the dropdown */
.primary-nav .sub-menu .sub-menu__all {
  margin-top: 4px;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-slate100);
  font-weight: 600;
  color: var(--c-p700);
}

/* Header actions */
.header-cta { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; margin-left:var(--sp-4); }
.header-cart-btn {
  position: relative;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-slate500);
  background: var(--c-slate100);
  transition: all var(--t-fast);
}
.header-cart-btn:hover { background: var(--c-p100); color: var(--c-p700); }
.header-cart-btn svg { width:18px; height:18px; }
.cart-count {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: var(--grad-vivid);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #fff;
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  border-radius: var(--r-md);
  background: var(--c-slate100);
  transition: background var(--t-fast);
}
.nav-toggle:hover { background: var(--c-p100); }
.nav-toggle span {
  display: block; width: 20px; height: 2px;
  background: var(--c-slate700);
  border-radius: 2px;
  transition: all var(--t-base);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Nav */
.mobile-nav {
  position: fixed;
  top: var(--header-h); left:0; right:0; bottom:0;
  background: #fff;
  z-index: 999;
  padding: var(--sp-6);
  overflow-y: auto;
  transform: translateX(100%);
  /* visibility keeps the off-screen links out of the tab order when closed */
  visibility: hidden;
  transition: transform var(--t-slow), visibility 0s var(--t-slow);
  border-top: 1px solid var(--color-border);
}
.mobile-nav.open { transform: translateX(0); visibility: visible; transition: transform var(--t-slow); }
.mobile-nav ul { display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-6); }
.mobile-nav a {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem; font-weight:600;
  color: var(--color-heading);
  border-radius: var(--r-lg);
}
.mobile-nav a:hover { background: var(--c-p50); color: var(--c-p700); }
.mobile-nav-divider { border-top:1px solid var(--color-border); margin:var(--sp-4) 0; }
.mobile-nav .btn { width:100%; justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
/* ── Site Footer ─────────────────────────────────────────── */
.site-footer {
  background: #0B1120;
  color: rgba(255,255,255,0.55);
  position: relative;
  overflow: hidden;
  /* Visible separator from the dark CTA / last page section above */
  border-top: 1px solid rgba(255,255,255,0.10);
}
/* subtle ambient glows */
.site-footer::before {
  content: '';
  position: absolute;
  top: -250px; left: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(36,84,230,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.site-footer::after {
  content: '';
  position: absolute;
  bottom: -150px; right: -150px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(36,84,230,0.08) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Trust bar ── */
.footer-top {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.footer-top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.footer-badge-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.footer-badge-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--r-full);
  padding: 0.3rem 0.85rem;
  letter-spacing: 0.01em;
  transition: all var(--t-fast);
}
.footer-badge-item:hover {
  border-color: rgba(77,116,255,0.35);
  color: rgba(255,255,255,0.85);
  background: rgba(36,84,230,0.08);
}
.footer-badge-item .badge-icon { font-size: 0.85rem; }

.footer-availability {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.78rem;
  font-weight: 700;
  color: #34d399;
  background: rgba(16,185,129,0.08);
  border: 1px solid rgba(16,185,129,0.18);
  border-radius: var(--r-full);
  padding: 0.35rem 1rem;
  letter-spacing: 0.02em;
}
.footer-availability::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #34d399;
  flex-shrink: 0;
  animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(1.4); }
}

/* ── Main columns ── */
.footer-main {
  padding: var(--sp-16) 0 var(--sp-12);
  display: grid;
  /* Services column is widened so multi-word titles can wrap to 2 lines
     comfortably without overflowing or column-eating the brand area. */
  grid-template-columns: 1.6fr 1.4fr 1fr 1fr;
  gap: var(--sp-12);
  position: relative; z-index: 1;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Brand column ── */
.footer-brand-logo { margin-bottom: var(--sp-5); }
.footer-brand-logo .site-logo__text { color: #fff; }
/* Logo image in footer — slightly smaller, brightness filter for dark bg */
.footer-brand-logo .custom-logo-link .custom-logo {
  height: 40px;
  max-width: 180px;
  filter: brightness(0) invert(1); /* white version on dark bg */
}
.footer-brand > p {
  font-size: 0.875rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.42);
  max-width: 280px;
  margin-bottom: var(--sp-6);
}
/* mini CTA inside brand — premium teal ghost button */
.footer-brand-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;        /* NEVER let the label wrap — wrapping = circle */
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-teal);
  background: rgba(36,84,230,0.06);
  border: 1px solid rgba(36,84,230,0.28);
  border-radius: var(--r-full);
  padding: 0.6rem 1.25rem;
  margin-bottom: var(--sp-6);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* spring easing */
  transition:
    transform    0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow   0.22s ease,
    color        0.18s ease,
    background   0.18s ease,
    border-color 0.18s ease;
  /* subtle teal glow at rest */
  box-shadow:
    inset 0 1px 0 rgba(36,84,230,0.10),
    0 2px 8px  rgba(36,84,230,0.12),
    0 1px 3px  rgba(0,0,0,0.18);
}
/* shimmer sweep */
.footer-brand-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(36,84,230,0.18) 50%,
    transparent 80%
  );
  transform: skewX(-18deg);
  left: -100%;
  transition: left 0.55s ease;
  pointer-events: none;
}
.footer-brand-cta:hover::after { left: 150%; }
/* icon — fixed size so the SVG never defaults to 300×150px */
.footer-brand-cta svg,
.footer-brand-cta .icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-brand-cta:hover svg,
.footer-brand-cta:hover .icon { transform: translateX(4px); }
.footer-brand-cta:hover {
  color: #fff;
  background: rgba(36,84,230,0.14);
  border-color: rgba(36,84,230,0.55);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(36,84,230,0.20),
    0 6px 20px  rgba(36,84,230,0.28),
    0 2px 8px   rgba(0,0,0,0.22);
}
.footer-brand-cta:active { transform: translateY(0); }
.footer-brand-cta:focus-visible {
  outline: 2px solid var(--c-teal);
  outline-offset: 3px;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: var(--sp-2);
}
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45);
  transition: all var(--t-base);
}
.footer-social a:hover {
  background: var(--grad-vivid);
  border-color: transparent;
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(36,84,230,0.4);
}
.footer-social svg { width: 15px; height: 15px; }

/* ── Nav columns ── */
.footer-col h5 {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.28);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-col ul li a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.48);
  display: flex;
  /* Top-align bullet dot with the first line of a wrapped title. */
  align-items: flex-start;
  gap: var(--sp-2);
  transition: all var(--t-fast);
  text-decoration: none;
  /* Allow long service titles ("WooCommerce Theme Customization & Child Theme
     Development") to wrap to a 2nd line instead of overflowing the column. */
  line-height: 1.4;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;          /* line-clamp container — overrides the flex above */
  overflow: hidden;
}
.footer-col ul li a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-p500);
  opacity: 0;
  flex-shrink: 0;
  margin-top: 9px;               /* align with first line of text */
  transition: opacity var(--t-fast);
  display: none;                 /* line-clamp's box hides pseudo-elements — drop the dot */
}
.footer-col ul li a:hover {
  color: rgba(255,255,255,0.9);
  padding-left: var(--sp-1);
}
.footer-col ul li a:hover::before {
  opacity: 1;
}
.footer-col ul li a.footer-link-highlight {
  color: var(--c-p300);
  font-weight: 600;
}
.footer-col ul li a.footer-link-highlight:hover { color: #fff; }

/* ── Bottom bar ── */
.footer-bottom {
  padding: var(--sp-6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.25);
  position: relative; z-index: 1;
}
.footer-bottom a {
  color: rgba(255,255,255,0.35);
  transition: color var(--t-fast);
  text-decoration: none;
}
.footer-bottom a:hover { color: rgba(255,255,255,0.8); }
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}
.footer-bottom-links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.28);
}
.footer-made-with {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.footer-made-with .heart {
  color: #f43f5e;
  animation: heartbeat 1.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  14%     { transform: scale(1.25); }
  28%     { transform: scale(1); }
  42%     { transform: scale(1.15); }
  56%     { transform: scale(1); }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  background: var(--grad-dark);
  display: flex;
  align-items: center;
  /* Pull the hero up so its bg sits behind the fixed header;
     padding-top = header height + extra breathing room so content
     never presses flush against the bottom edge of the header */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3rem, 6vw, 5rem));
  position: relative;
  overflow: hidden;
}
.hero .orb-1 {
  position: absolute;
  width:700px; height:700px;
  top:-200px; left:-200px;
  background: radial-gradient(circle, rgba(36,84,230,0.5) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.hero .orb-2 {
  position: absolute;
  width:500px; height:500px;
  bottom:-100px; right:-100px;
  background: radial-gradient(circle, rgba(77,116,255,0.35) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.hero .orb-3 {
  position: absolute;
  width:350px; height:350px;
  top:20%; right:25%;
  background: radial-gradient(circle, rgba(36,84,230,0.2) 0%, transparent 65%);
  filter:blur(60px);
  pointer-events:none;
}
.hero-grid-overlay {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}

.hero-inner {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(3rem,6vw,5rem);
  align-items:center;
  padding: clamp(4rem,8vw,6rem) 0;
}

.hero-content {
  min-width: 0; /* prevent grid blowout */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-kicker {
  display: inline-flex;
  align-self: flex-start; /* shrink to text width inside the flex column */
  align-items: center;
  gap: var(--sp-2);
  background: rgba(155,178,255,0.12);
  border: 1px solid rgba(155,178,255,0.25);
  border-radius: var(--r-full);
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-p300);
  margin-bottom: var(--sp-6);
  letter-spacing: 0.02em;
}
.kicker-dot {
  width: 7px; height: 7px;
  border-radius:50%;
  background: var(--c-amber);
  flex-shrink:0;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(1.4);}
}

.hero-title {
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: var(--sp-6);
}
.hero-title .line-normal { display:block; color:rgba(255,255,255,0.9); }
.hero-title .line-gradient {
  display:block;
  background: linear-gradient(90deg, #9BB2FF 0%, #4D74FF 40%, #1E40D9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-title .line-white {
  display: block;
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
}

.hero-desc {
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: rgba(255,255,255,0.65);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: var(--sp-8);
}

.hero-actions {
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
  margin-bottom: var(--sp-10);
}

.hero-metrics {
  display: flex;
  gap: var(--sp-8);
  padding-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.hero-metrics > div {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.hero-metric__value {
  display:block;
  font-size: 1.75rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  line-height:1;
  margin-bottom: var(--sp-1);
}
.hero-metric__label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

/* Hero visual */
.hero-visual {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-code-window {
  width:100%;
  max-width:480px;
  background: rgba(7,11,21,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(36,84,230,0.2);
  backdrop-filter:blur(16px);
  position:relative;
  z-index:2;
}
.hero-code-window::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(155,178,255,0.5), transparent);
}
.code-toolbar {
  display:flex; align-items:center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.code-dot { width:11px; height:11px; border-radius:50%; }
.code-dot-r { background:#ff5f57; }
.code-dot-y { background:#febc2e; }
.code-dot-g { background:#28c840; }
.code-filename {
  margin-left:auto;
  font-size:0.72rem;
  font-family: var(--font-mono);
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.04);
  padding: 2px 10px;
  border-radius: var(--r-full);
  border:1px solid rgba(255,255,255,0.06);
}
.code-body {
  padding: var(--sp-5) var(--sp-6);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.85;
}
.code-body .c-comment  { color:#6a9955; }
.code-body .c-keyword  { color:#569cd6; }
.code-body .c-fn       { color:#dcdcaa; }
.code-body .c-string   { color:#ce9178; }
.code-body .c-var      { color:#9cdcfe; }
.code-body .c-prop     { color:#B3DDFC; }
.code-body .c-num      { color:#b5cea8; }
.code-body .c-plain    { color:rgba(255,255,255,0.75); }
.code-line { display:block; }
.code-line-nums {
  display:flex; gap: var(--sp-4);
}
.code-cursor {
  display:inline-block;
  width:2px; height:1em;
  background:var(--c-p400);
  margin-left:2px;
  animation: blink 1.2s step-end infinite;
  vertical-align:text-bottom;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

.hero-float-card {
  position:absolute;
  background:#fff;
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-4);
  display:flex; align-items:center; gap:var(--sp-3);
  box-shadow: 0 16px 48px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
  z-index:3;
  white-space:nowrap;
}
.hero-float-card--1 { top:4%; right:-4%; animation: floatA 5s ease-in-out infinite; }
.hero-float-card--2 { bottom:8%; left:-6%; animation: floatB 6s ease-in-out infinite; }
.float-icon {
  width:38px; height:38px;
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; flex-shrink:0;
}
.float-icon--green { background:#d1fae5; }
.float-icon--amber { background:#fef3c7; }
.float-title { font-size:0.82rem; font-weight:700; color:var(--c-slate800); display:block; }
.float-sub   { font-size:0.72rem; color:var(--c-slate400); }
@keyframes floatA {
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-14px) rotate(1deg);}
}
@keyframes floatB {
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-10px) rotate(-1deg);}
}

/* ============================================================
   MARQUEE / TECH STRIP
   ============================================================ */
.marquee-strip {
  background: var(--c-p950);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: var(--sp-4) 0;
  overflow:hidden;
}
.marquee-track {
  display:flex;
  gap: var(--sp-10);
  animation: marquee 28s linear infinite;
  width:max-content;
}
.marquee-strip:hover .marquee-track { animation-play-state:paused; }
.marquee-item {
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:0.8rem; font-weight:700;
  color:rgba(255,255,255,0.45);
  white-space:nowrap;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.marquee-item span { font-size:1.1rem; }
.marquee-sep { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.15); flex-shrink:0; }
@keyframes marquee {
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-section {
  background: linear-gradient(180deg, #fff 0%, var(--c-slate50) 100%);
  padding: clamp(2.5rem,5vw,4rem) 0;
  border-top: 3px solid transparent;
  border-image: var(--grad-vivid) 1;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.stats-section::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad-vivid);
}
.stats-grid {
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:var(--sp-6);
}
.stat-card {
  display:flex;
  align-items:center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: #fff;
  border-radius: var(--r-2xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base);
}
.stat-card:hover {
  border-color: var(--c-p200);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.stat-icon {
  width:52px; height:52px;
  border-radius: var(--r-xl);
  background: var(--grad-vivid);
  display:flex; align-items:center; justify-content:center;
  color: #fff;
  flex-shrink:0;
  box-shadow: var(--shadow-purple);
}
.stat-icon svg { width:22px; height:22px; }
.stat-value {
  font-size: 2rem;
  font-weight: 900;
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.04em;
  line-height:1;
  display:block;
}
.stat-label {
  font-size:0.78rem;
  color: var(--color-muted);
  font-weight:600;
  display:block;
  margin-top:4px;
  -webkit-text-fill-color: var(--color-muted);
}
.stat-divider {
  display:none;
}

/* ============================================================
   PROBLEM SECTION
   ============================================================ */
.problem-section {
  background: #fff;
}
.problem-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(3rem,6vw,5rem);
  align-items:center;
}
.problem-lhs {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.problem-illustration {
  position:relative;
  background: var(--c-p50);
  border-radius: var(--r-3xl);
  border:1px solid var(--c-p100);
  padding: var(--sp-8);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
  overflow:hidden;
}
.problem-illustration::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 70%, rgba(36,84,230,0.08) 0%, transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(77,116,255,0.06) 0%, transparent 60%);
}
/* Image variant — drop the pastel pad/background so the full media art
   shows edge-to-edge inside the rounded frame. */
.problem-illustration--image {
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 0;
}
.problem-illustration--image::before { content: none; }
.problem-illustration__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  border-radius: var(--r-3xl);
}
.problem-emoji { font-size:5rem; position:relative; z-index:1; }
.problem-floating-tags {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.problem-tag {
  position:absolute;
  background:#fff;
  border-radius:var(--r-xl);
  padding: var(--sp-2) var(--sp-3);
  font-size:0.75rem;
  font-weight:700;
  color:var(--c-slate700);
  box-shadow: var(--shadow-md);
  border:1px solid var(--color-border);
  display:flex; align-items:center; gap:var(--sp-1);
}
.problem-tag:nth-child(1) { top:12%; left:6%; animation:floatA 4s ease-in-out infinite; }
.problem-tag:nth-child(2) { top:10%; right:6%; animation:floatB 5s ease-in-out infinite; }
.problem-tag:nth-child(3) { bottom:12%; left:8%; animation:floatB 4.5s ease-in-out infinite; }
.problem-tag:nth-child(4) { bottom:10%; right:5%; animation:floatA 5.5s ease-in-out infinite; }

.problem-rhs {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
}
.problem-highlight-box {
  background: linear-gradient(135deg, var(--c-p50), var(--c-p100));
  border: 1px solid var(--c-p200);
  border-left: 4px solid var(--c-p600);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-6);
  font-size:1.05rem;
  font-weight:600;
  color: var(--c-p800);
  font-style:italic;
  line-height:1.6;
}

/* ============================================================
   SERVICES SECTION
   ============================================================ */
.services-section { background: var(--c-slate50); }

.services-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: var(--sp-5);
}

.service-card {
  background:#fff;
  border-radius: var(--r-2xl);
  padding: 0; /* image fills top; body has its own padding */
  border: 1px solid var(--color-border);
  transition: all var(--t-base);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap: 0;
  text-decoration: none;
  color: inherit;
}
/* Legacy: cards without the new media+body structure still get padding */
.service-card:not(.service-card--has-image):not(.service-card--icon-only) {
  padding: var(--sp-6);
  gap: var(--sp-3);
}

/* ── New media area (image OR icon chip) ─────────────────── */
.service-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-p50, #F2F5FF) 0%, rgba(36,84,230,0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0);
  transition: transform 0.45s ease;
}
.service-card:hover .service-card__image {
  transform: scale(1.06);
}
.service-card__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15,23,42, 0) 40%,
    rgba(15,23,42, 0.35) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.service-card:hover .service-card__media-overlay {
  background: linear-gradient(180deg,
    rgba(36,84,230, 0.05) 0%,
    rgba(15,23,42, 0.55) 100%);
}

/* Icon-only variant (no featured image): show a large icon chip centered */
.service-card--icon-only .service-card__media {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 30% 30%, rgba(36,84,230,0.10) 0%, transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(36,84,230,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #fff 0%, var(--c-p50, #F2F5FF) 100%);
}
.service-card__icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p800, #1A33A8) 100%);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(36,84,230, 0.30),
    inset 0 1px 0 rgba(255,255,255, 0.18);
  transition: transform 0.3s ease;
}
.service-card:hover .service-card__icon-chip { transform: scale(1.06) rotate(-3deg); }
.service-card__icon-chip svg { width: 36px; height: 36px; }

/* ── Body area ───────────────────────────────────────────── */
.service-card__body {
  padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.service-card__title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-heading, #0f172a);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
}
.service-card__excerpt {
  font-size: 0.875rem;
  color: var(--color-text, #475569);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-teal, #1E40D9);
  transition: color 0.22s ease, gap 0.22s ease;
}
.service-card__cta svg { transition: transform 0.22s ease; }
.service-card:hover .service-card__cta {
  color: #1E40D9;
  gap: 10px;
}
.service-card:hover .service-card__cta svg { transform: translateX(3px); }
.service-card::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: var(--grad-vivid);
  transform:scaleX(0);
  transform-origin:left;
  transition: transform var(--t-base);
}
.service-card:hover::before { transform:scaleX(1); }
.service-card:hover {
  border-color: rgba(155,178,255,0.3);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-6px);
}
.service-card__icon {
  width:52px; height:52px;
  background: var(--c-p50);
  border: 1px solid var(--c-p100);
  border-radius: var(--r-xl);
  display:flex; align-items:center; justify-content:center;
  color: var(--c-p700);
  font-size:1.5rem;
  transition: all var(--t-base);
  flex-shrink:0;
}
.service-card:hover .service-card__icon {
  background: var(--grad-vivid);
  color:#fff;
  border-color:transparent;
  box-shadow: var(--shadow-purple);
}
.service-card__icon svg { width:24px;height:24px; }
.service-card h3 {
  font-size:1.05rem;
  font-weight:800;
  color:var(--color-heading);
}
.service-card p {
  font-size:0.875rem;
  color: var(--color-text);
  line-height:1.65;
  margin:0;
  flex:1;
}
.service-card__link {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:0.82rem; font-weight:700;
  color: var(--c-p700);
  margin-top:var(--sp-1);
  opacity:0;
  transform:translateX(-6px);
  transition: all var(--t-base);
}
.service-card:hover .service-card__link { opacity:1; transform:translateX(0); }

/* ============================================================
   WHY SECTION
   ============================================================ */
.why-section { background:#fff; }

.why-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap: clamp(3rem,6vw,6rem);
  align-items:center;
}
.why-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.why-content h2 { margin-bottom:var(--sp-4); }
.why-content p { color:var(--color-text); margin-bottom:var(--sp-6); }
.why-features {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-4);
}
.why-feature {
  display:flex;
  align-items:flex-start;
  gap:var(--sp-3);
  padding:var(--sp-4);
  border-radius:var(--r-xl);
  border:1px solid var(--color-border);
  transition: all var(--t-base);
}
.why-feature:hover {
  border-color: var(--c-p200);
  background:var(--c-p50);
  transform:translateY(-2px);
}
.why-feature__icon {
  width:38px; height:38px;
  border-radius:var(--r-md);
  background:var(--c-p50);
  display:flex; align-items:center; justify-content:center;
  color:var(--c-p700);
  flex-shrink:0;
}
.why-feature__icon svg { width:18px;height:18px; }
.why-feature h4 { font-size:0.875rem; font-weight:700; margin-bottom:2px; }
.why-feature p { font-size:0.8rem; color:var(--color-muted); margin:0; }

.why-visual {
  position:relative;
}
.why-big-card {
  background: var(--grad-dark);
  border-radius: var(--r-3xl);
  padding: var(--sp-8);
  border:1px solid rgba(255,255,255,0.06);
  position:relative;
  overflow:hidden;
}
.why-big-card::before {
  content:'';
  position:absolute;
  top:-60px; right:-60px;
  width:250px; height:250px;
  background:radial-gradient(circle,rgba(36,84,230,0.35) 0%,transparent 70%);
  pointer-events:none;
}
.why-stat-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-4); margin-bottom:var(--sp-6);
  position:relative;z-index:1;
}
.why-stat-box {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-xl);
  padding:var(--sp-5);
  text-align:center;
}
.why-stat-box .num {
  font-size:2rem; font-weight:900;
  color:#fff; letter-spacing:-0.03em;
  display:block; line-height:1;
  margin-bottom:var(--sp-1);
}
.why-stat-box .lbl { font-size:0.75rem; color:rgba(255,255,255,0.45); }
.why-reviews {
  display:flex; gap:var(--sp-3); align-items:center;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:var(--r-xl);
  padding:var(--sp-4) var(--sp-5);
  position:relative;z-index:1;
}
.why-review-avatars { display:flex; }
.why-review-avatars span {
  width:34px; height:34px;
  border-radius:50%;
  background: var(--grad-vivid);
  border:2px solid var(--c-dark2);
  display:flex; align-items:center; justify-content:center;
  font-size:0.85rem; font-weight:700; color:#fff;
  margin-left:-10px;
}
.why-review-avatars span:first-child { margin-left:0; }
.why-review-text { flex:1; }
.why-review-stars { color:var(--c-amber); font-size:0.85rem; }
.why-review-label { font-size:0.78rem; color:rgba(255,255,255,0.55); }

/* ============================================================
   PROCESS SECTION
   ============================================================ */
.process-section { background:var(--c-slate50); }

.process-steps {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:var(--sp-3);
  position:relative;
}
.process-line {
  position:absolute;
  top:44px; left:calc(100%/12); right:calc(100%/12);
  height:2px;
  background: linear-gradient(90deg, transparent, var(--c-p300), var(--c-p500), var(--c-p300), transparent);
  z-index:0;
}
.process-step {
  text-align:center;
  position:relative; z-index:1;
  padding: var(--sp-4) var(--sp-2);
  background: #fff;
  border-radius: var(--r-2xl);
  border: 1px solid var(--color-border);
  transition: all var(--t-base);
}
.process-step:hover {
  border-color: var(--c-p200);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}
.process-step__bubble {
  width:80px; height:80px;
  border-radius:50%;
  background: var(--c-p50);
  border:2px solid var(--c-p100);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--sp-4);
  position:relative;
  transition: all var(--t-base);
}
.process-step:hover .process-step__bubble {
  background: var(--grad-vivid);
  border-color:transparent;
  box-shadow: var(--shadow-purple);
}
.process-step:hover .step-svg { color:#fff; }
.step-svg { width:28px; height:28px; color:var(--c-p700); transition:color var(--t-base); }
.process-step__num {
  position:absolute;
  bottom:-4px; right:-4px;
  width:24px; height:24px;
  background: var(--grad-vivid);
  color:#fff;
  border-radius:50%;
  font-size:0.68rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--c-slate50);
}
.process-step h4 { font-size:0.85rem; font-weight:800; margin-bottom:var(--sp-1); color:var(--color-heading); }
.process-step p { font-size:0.75rem; color:var(--color-muted); line-height:1.5; margin:0; }

/* ============================================================
   PORTFOLIO SECTION
   ============================================================ */
.portfolio-section { background:#fff; }

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--sp-5);
  margin-bottom:var(--sp-10);
}
.portfolio-card {
  background:#fff;
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:all var(--t-base);
  cursor:pointer;
  display:flex;
  flex-direction:column;
}
.portfolio-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform:translateY(-8px);
  border-color:rgba(155,178,255,0.35);
}
.portfolio-card__thumb {
  height:160px;
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem;
  background: linear-gradient(135deg, var(--c-p50) 0%, var(--c-p100) 50%, var(--c-p200) 100%);
  position:relative;
  overflow:hidden;
}
.portfolio-card__thumb::before {
  content:'';
  position:absolute;
  top:-30px; right:-30px;
  width:120px; height:120px;
  background:radial-gradient(circle,rgba(36,84,230,0.15) 0%,transparent 70%);
}
.portfolio-card__thumb::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,transparent 50%,rgba(30,64,217,0.1));
}
.portfolio-card__thumb img { width:100%;height:100%;object-fit:cover; }
.portfolio-card__body { padding:var(--sp-5); flex:1; display:flex; flex-direction:column; }
.portfolio-card h4 { font-size:0.9rem;font-weight:800;margin-bottom:var(--sp-2);color:var(--color-heading); }
.portfolio-card p { font-size:0.8rem;color:var(--color-muted);margin:0;line-height:1.55;flex:1; }
.portfolio-card__arrow {
  display:inline-flex; align-items:center; gap:var(--sp-1);
  font-size:0.78rem; font-weight:700; color:var(--c-p700);
  margin-top:var(--sp-3);
  opacity:0; transform:translateX(-4px);
  transition:all var(--t-base);
}
.portfolio-card:hover .portfolio-card__arrow { opacity:1; transform:translateX(0); }

/* ============================================================
   TESTIMONIALS + FAQ
   ============================================================ */
.social-proof-section { background:var(--c-slate50); }

.sp-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-16);
  align-items:start;
}

/* Testimonial cards */
.testimonial-card {
  background:#fff;
  border-radius:var(--r-2xl);
  padding:var(--sp-6);
  border:1px solid var(--color-border);
  margin-bottom:var(--sp-4);
  position:relative;
  transition:all var(--t-base);
}
.testimonial-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-3px); border-color:rgba(155,178,255,.2); }
.testimonial-quote-mark {
  font-size:4rem; line-height:1;
  color:var(--c-p200);
  font-family:Georgia,serif;
  margin-bottom:var(--sp-2);
  display:block;
  margin-top:-var(--sp-2);
}
.testimonial-stars { color:var(--c-amber); font-size:0.9rem; letter-spacing:2px; margin-bottom:var(--sp-3); }
.testimonial-text { font-size:0.9rem; line-height:1.75; color:var(--c-slate600); margin-bottom:var(--sp-4); font-style:italic; }
.testimonial-author { display:flex;align-items:center;gap:var(--sp-3); }
.testimonial-avatar {
  width:44px;height:44px;
  border-radius:50%;
  background: var(--grad-vivid);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;color:#fff;
  overflow:hidden;flex-shrink:0;
}
.testimonial-avatar img { width:100%;height:100%;object-fit:cover; }
.testimonial-name { font-weight:800;font-size:0.875rem;color:var(--color-heading); }
.testimonial-role { font-size:0.78rem;color:var(--color-muted); }
.testimonial-verified {
  margin-left:auto;
  background:var(--c-p50);
  border:1px solid var(--c-p100);
  color:var(--c-p700);
  border-radius:var(--r-full);
  font-size:0.7rem;font-weight:700;
  padding:2px 8px;
}

/* FAQ */
.faq-list { display:flex;flex-direction:column;gap:var(--sp-3); }
.faq-item {
  border:1px solid var(--color-border);
  border-radius:var(--r-xl);
  overflow:hidden;
  transition:all var(--t-base);
}
.faq-item.open { border-color:var(--c-p300); box-shadow:0 4px 20px rgba(36,84,230,0.08); }
.faq-question {
  /* native <button> reset */
  width:100%;border:none;font-family:inherit;text-align:left;
  /* layout */
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);
  min-height:44px; /* WCAG 2.1 AA touch target */
  cursor:pointer;font-size:0.9rem;font-weight:700;
  color:var(--color-heading);
  background:#fff;
  transition:all var(--t-fast);
  user-select:none;
}
.faq-question:focus-visible {
  outline:2px solid var(--c-p400);
  outline-offset:2px;
}
.faq-question:hover { background:var(--c-p50); color:var(--c-p700); }
.faq-item.open .faq-question { background:var(--c-p50); color:var(--c-p700); }
.faq-icon {
  width:28px;height:28px;border-radius:50%;
  background:var(--c-slate100);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-slate500);
  font-size:1.25rem;font-weight:300;line-height:1;
  flex-shrink:0;
  transition:all var(--t-base);
}
.faq-item.open .faq-icon { background:var(--grad-vivid);color:#fff;transform:rotate(45deg); }
.faq-answer { max-height:0;overflow:hidden;transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
.faq-answer-inner {
  padding:0 var(--sp-6) var(--sp-5);
  font-size:0.875rem;color:var(--color-text);line-height:1.75;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
/* ── CTA Section ─────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #0F172A 0%, #0F172A 40%, #141E36 70%, #0F172A 100%);
  padding: clamp(5rem,10vw,8rem) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
/* vivid gradient border on top */
.cta-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-vivid);
}
/* grid overlay */
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(155,178,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,178,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.cta-section .orb-cta-1 {
  position: absolute; top: -180px; left: -120px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(36,84,230,0.55) 0%, transparent 65%);
  filter: blur(70px); pointer-events: none;
}
.cta-section .orb-cta-2 {
  position: absolute; bottom: -140px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(36,84,230,0.4) 0%, transparent 65%);
  filter: blur(70px); pointer-events: none;
}
/* optional third orb for centre glow */
.cta-section .orb-cta-3 {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 300px;
  background: radial-gradient(ellipse, rgba(77,116,255,0.18) 0%, transparent 70%);
  filter: blur(60px); pointer-events: none;
}
.cta-inner {
  position: relative; z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.cta-inner .eyebrow {
  margin-bottom: var(--sp-5);
}
.cta-inner h2 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  color: #fff;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--sp-5);
  letter-spacing: -0.02em;
}
.cta-inner h2 .gradient-text {
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cta-inner > p {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-lg);
  max-width: 520px;
  margin: 0 auto var(--sp-10);
  line-height: 1.7;
}
.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.cta-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  flex-wrap: wrap;
}
.cta-trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}
.cta-trust-item svg,
.cta-trust-item span { opacity: .7; }

/* legacy layout support for pages that still use .cta-grid */
.cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-content {
  text-align: left;
}
.cta-content h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: #fff;
  margin-bottom: var(--sp-3);
  text-align: left;
}
.cta-content p {
  color: rgba(255,255,255,0.65);
  max-width: 520px;
  margin: 0;
  text-align: left;
}
.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 220px;
  align-items: stretch;
  flex-shrink: 0;
}
.cta-actions .btn {
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--grad-dark);
  /* site-main already offsets by header-h; just add section-specific padding */
  padding: clamp(3rem,6vw,5rem) 0 clamp(3rem,6vw,4rem);
  /* extend behind header like the front-page hero */
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(3rem,6vw,5rem));
  position:relative;
  overflow:hidden;
}
.page-hero .orb-h1 {
  position:absolute;top:-100px;left:-100px;
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(36,84,230,0.35) 0%,transparent 70%);
  filter:blur(60px);pointer-events:none;
}
.page-hero .orb-h2 {
  position:absolute;bottom:-80px;right:-80px;
  width:350px;height:350px;
  background:radial-gradient(circle,rgba(77,116,255,0.25) 0%,transparent 70%);
  filter:blur(60px);pointer-events:none;
}
.page-hero-grid-overlay {
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.page-hero-inner { position:relative;z-index:1;text-align:center; }
.page-hero h1 { color:#fff;margin-bottom:var(--sp-4); }
.page-hero p { color:rgba(255,255,255,0.65);font-size:clamp(1rem,1.5vw,1.125rem);max-width:560px;margin:0 auto; }

/* Breadcrumb */
.breadcrumb {
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-4);
  font-size:0.8rem;color:rgba(255,255,255,0.45);
}
.breadcrumb a { color:rgba(255,255,255,0.5); }
.breadcrumb a:hover { color:rgba(255,255,255,0.85); }
.breadcrumb-sep { color:rgba(255,255,255,0.2); }

/* ============================================================
   SERVICE ARCHIVE
   ============================================================ */
.services-archive { background:var(--c-slate50); }
.services-archive-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--sp-6);
}
.service-archive-card {
  background:#fff;
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--color-border);
  transition:all var(--t-base);
  display:flex;flex-direction:column;
}
.service-archive-card:hover {
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-8px);
  border-color:rgba(155,178,255,0.3);
}
.sac-header {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  padding:var(--sp-10);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.sac-header::before {
  content:'';position:absolute;
  top:-30px;right:-30px;
  width:100px;height:100px;
  background:radial-gradient(circle,rgba(36,84,230,0.15) 0%,transparent 70%);
}
.sac-icon {
  width:72px;height:72px;
  background:var(--grad-vivid);
  border-radius:var(--r-2xl);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;
  box-shadow:var(--shadow-purple);
  position:relative;z-index:1;
}
.sac-body { padding:var(--sp-6);flex:1;display:flex;flex-direction:column; }
.sac-body h3 { font-size:1.15rem;margin-bottom:var(--sp-3); }
.sac-body p { font-size:0.875rem;color:var(--color-text);flex:1;margin-bottom:var(--sp-5); }
.sac-tags { display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5); }
.sac-tag {
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);
  padding:2px 10px;border-radius:var(--r-full);
  font-size:0.72rem;font-weight:600;
}

/* ── Featured-image variant ─────────────────────────────────────
   When the service has a featured image, the .sac-header drops its
   gradient + padding so the image fills the card edge-to-edge,
   uses a fixed aspect ratio for row alignment, and gets a subtle
   purple overlay on hover for affordance. */
.service-archive-card--has-image .sac-header {
  padding: 0;
  background: var(--c-slate100, #f1f5f9);
  aspect-ratio: 16 / 10;
  display: block;
}
.service-archive-card--has-image .sac-header::before {
  content: none;
}
.sac-image {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-decoration: none;
}
.sac-image__img,
.service-archive-card--has-image .sac-header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.service-archive-card:hover .sac-image__img,
.service-archive-card:hover .sac-header img {
  transform: scale(1.04);
}
.sac-image__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,23,42, 0.45) 100%);
  opacity: 0.85;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.service-archive-card:hover .sac-image__overlay {
  opacity: 1;
}

/* ============================================================
   SERVICE SINGLE
   ============================================================ */
.service-single { padding:clamp(3rem,6vw,5rem) 0; }
.service-single-layout {
  display:grid;grid-template-columns:1fr 340px;
  gap:var(--sp-10);align-items:start;
}
.service-sidebar { position:sticky;top:calc(var(--header-h) + var(--sp-6)); }
.sidebar-card {
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--r-2xl);padding:var(--sp-6);
  margin-bottom:var(--sp-5);
  box-shadow:var(--shadow-sm);
}
.sidebar-card h4 { font-size:1.05rem;margin-bottom:var(--sp-4); }
.service-price {
  font-size:2.5rem;font-weight:900;
  color:var(--c-p700);letter-spacing:-0.04em;
  line-height:1;margin-bottom:var(--sp-1);
}
.service-price-note { font-size:0.82rem;color:var(--color-muted);margin-bottom:var(--sp-5); }
.include-list { display:flex;flex-direction:column;gap:var(--sp-3); }
.include-item {
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:0.875rem;color:var(--color-text);
}
.include-check {
  width:20px;height:20px;border-radius:50%;
  background:var(--grad-emerald);
  color:#fff;font-size:0.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sidebar-highlight {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  border:1px solid var(--c-p200);
  border-radius:var(--r-2xl);padding:var(--sp-5);
}

/* ============================================================
   BLOG ARCHIVE
   ============================================================ */
.blog-archive-section { padding:clamp(3rem,6vw,5rem) 0;background:var(--c-slate50); }
.blog-layout { display:grid;grid-template-columns:1fr 300px;gap:var(--sp-8);align-items:start; }
.blog-grid { display:flex;flex-direction:column;gap:var(--sp-5); }

.post-card {
  background:#fff;
  border-radius:var(--r-2xl);
  overflow:hidden;
  border:1px solid var(--color-border);
  display:grid;grid-template-columns:260px 1fr;
  transition:all var(--t-base);
}
.post-card:hover { box-shadow:var(--shadow-card-hover);border-color:rgba(155,178,255,0.25); transform:translateY(-4px); }
.post-card__thumb {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  display:flex;align-items:center;justify-content:center;
  font-size:3.5rem;min-height:200px;overflow:hidden;
}
.post-card__thumb img { width:100%;height:100%;object-fit:cover; }
.post-card__body { padding:var(--sp-6);display:flex;flex-direction:column; }
.post-card__meta { display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-3); }
.meta-cat {
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);
  padding:2px 10px;border-radius:var(--r-full);
  font-size:0.72rem;font-weight:700;
}
.meta-date,.meta-read { font-size:0.78rem;color:var(--color-muted); }
.post-card h2 { font-size:1.2rem;margin-bottom:var(--sp-2); }
.post-card h2 a { color:var(--color-heading); }
.post-card h2 a:hover { color:var(--c-p700); }
.post-card > .post-card__body > p { font-size:0.875rem;color:var(--color-text);flex:1;margin-bottom:var(--sp-4); }
.post-card__foot {
  display:flex;align-items:center;justify-content:space-between;
  padding-top:var(--sp-4);border-top:1px solid var(--color-border);
  margin-top:auto;
}
.post-author-mini { display:flex;align-items:center;gap:var(--sp-2);font-size:0.78rem;color:var(--color-muted); }

/* Blog sidebar */
.blog-sidebar { position:sticky;top:calc(var(--header-h) + var(--sp-6));display:flex;flex-direction:column;gap:var(--sp-4); }
.sidebar-widget {
  background:#fff;border-radius:var(--r-2xl);
  padding:var(--sp-5);border:1px solid var(--color-border);
}
.sidebar-widget h4 {
  font-size:0.82rem;font-weight:800;
  text-transform:uppercase;letter-spacing:0.1em;
  color:var(--color-muted);margin-bottom:var(--sp-4);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--color-border);
}
.sidebar-cats a {
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-2) 0;font-size:0.875rem;
  color:var(--color-text);border-bottom:1px solid var(--c-slate50);
}
.sidebar-cats a:last-child { border-bottom:none; }
.sidebar-cats a:hover { color:var(--c-p700); }
.sidebar-cats .cnt {
  background:var(--c-p50);color:var(--c-p700);
  padding:1px 8px;border-radius:var(--r-full);
  font-size:0.7rem;font-weight:700;border:1px solid var(--c-p100);
}

/* ============================================================
   BLOG SINGLE
   ============================================================ */
.blog-single-section { padding:clamp(3rem,6vw,5rem) 0; }
.blog-single-layout { display:grid;grid-template-columns:1fr 300px;gap:var(--sp-8);align-items:start; }

.article-header { margin-bottom:var(--sp-8); }
.article-meta { display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5); }
.article-author-row {
  display:flex;align-items:center;gap:var(--sp-4);
  background:var(--c-slate50);border-radius:var(--r-xl);
  padding:var(--sp-4) var(--sp-5);border:1px solid var(--color-border);
  margin-top:var(--sp-5);
}
.article-hero-image {
  border-radius:var(--r-2xl);overflow:hidden;
  margin-bottom:var(--sp-8);
  aspect-ratio:16/9;background:var(--c-p50);
  display:flex;align-items:center;justify-content:center;font-size:5rem;
}
.article-hero-image img { width:100%;height:100%;object-fit:cover; }

.article-body { font-size:1.075rem;line-height:1.8;color:var(--c-slate700); }
.article-body h2 { font-size:1.75rem;margin:var(--sp-10) 0 var(--sp-4);color:var(--color-heading); }
.article-body h3 { font-size:1.35rem;margin:var(--sp-8) 0 var(--sp-3);color:var(--color-heading); }
.article-body p { margin-bottom:var(--sp-5); }
.article-body ul,.article-body ol { padding-left:var(--sp-6);margin-bottom:var(--sp-5); }
.article-body ul { list-style:disc; }
.article-body ol { list-style:decimal; }
.article-body li { margin-bottom:var(--sp-2); }
.article-body blockquote {
  border-left:4px solid var(--c-p500);
  background:var(--c-p50);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
  padding:var(--sp-5) var(--sp-6);
  margin:var(--sp-8) 0;
  font-style:italic;font-size:1.1rem;
  color:var(--c-p800);
}
.article-body code {
  background:var(--c-p50);color:var(--c-p700);
  padding:2px 6px;border-radius:var(--r-sm);
  font-family:var(--font-mono);font-size:0.875em;
  border:1px solid var(--c-p100);
}
.article-body pre {
  background:var(--c-dark2);color:#e2e8f0;
  padding:var(--sp-6);border-radius:var(--r-xl);
  overflow-x:auto;margin:var(--sp-6) 0;
  border:1px solid rgba(255,255,255,0.06);
}
.article-body pre code { background:none;color:inherit;padding:0;border:none; }
.article-body img { border-radius:var(--r-xl);margin:var(--sp-6) 0; }

.article-tags {
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
  margin-top:var(--sp-8);padding-top:var(--sp-6);
  border-top:1px solid var(--color-border);
}
.article-tags a {
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);
  font-size:0.82rem;font-weight:600;
}
.article-tags a:hover { background:var(--c-p700);color:#fff;border-color:var(--c-p700); }

.author-box {
  background:var(--c-slate50);border-radius:var(--r-2xl);
  padding:var(--sp-6);display:flex;gap:var(--sp-5);
  margin:var(--sp-10) 0;border:1px solid var(--color-border);
}
.author-box__avatar { width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0; }
.author-box__avatar img { width:100%;height:100%;object-fit:cover; }
.author-box__info h4 { margin-bottom:var(--sp-2); }
.author-box__info p { font-size:0.875rem;color:var(--color-muted);margin:0; }

/* ============================================================
   PRODUCTS (WooCommerce)
   ============================================================ */
.products-archive-section { padding:clamp(3rem,6vw,5rem) 0;background:var(--c-slate50); }
.products-layout { display:grid;grid-template-columns:260px 1fr;gap:var(--sp-8);align-items:start; }
.products-sidebar { position:sticky;top:calc(var(--header-h) + var(--sp-6));display:flex;flex-direction:column;gap:var(--sp-4); }
.products-widget {
  background:#fff;border-radius:var(--r-2xl);
  padding:var(--sp-5);border:1px solid var(--color-border);
}
.products-widget h4 {
  font-size:0.78rem;font-weight:800;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--color-muted);
  margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--color-border);
}

.products-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-5); }

/* ── pcard — Product Archive Cards ──────────────────────────────── */
.pcard {
  background:#fff;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--color-border);
  display:flex;flex-direction:column;
  position:relative;
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease,border-color 0.2s ease;
}
.pcard:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(36,84,230,0.13),0 6px 16px rgba(0,0,0,0.07);
  border-color:rgba(155,178,255,0.5);
}
/* Visual area — responsive aspect-ratio container so any image (square,
   landscape, portrait, ultra-wide infographic) shows in full without
   being cropped or distorted. Falls back to the soft purple gradient
   only where the image leaves empty space. */
.pcard__visual {
  background:linear-gradient(140deg,var(--c-p50) 0%,var(--c-p100) 55%,rgba(36,84,230,0.07) 100%);
  position:relative;overflow:hidden;
  aspect-ratio: 3 / 2;
  display:flex;align-items:center;justify-content:center;
}
.pcard__visual::before {
  content:'';position:absolute;
  top:-50%;right:-20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(36,84,230,0.1) 0%,transparent 70%);
  pointer-events:none;
}
.pcard__visual-link {
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.pcard__thumb {
  /* Fit the entire image inside the visual frame — never crop. */
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
  transition:transform 0.4s ease;
  position:relative;z-index:1;
}
.pcard:hover .pcard__thumb { transform:scale(1.03); }
.pcard__placeholder {
  width:72px;height:72px;
  background:rgba(36,84,230,0.1);border-radius:var(--r-2xl);
  display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
}
.pcard__placeholder svg { color:var(--c-p400); }
/* Badges */
.pcard__badge {
  position:absolute;bottom:var(--sp-3);right:var(--sp-3);
  /* Soft drop shadow so the pill stays legible over any image. */
  box-shadow:0 2px 6px rgba(15,23,42,0.18), 0 1px 2px rgba(15,23,42,0.10);
  /* Match the .product-card__badge peek animation. */
  animation: badge-peek 6s ease-in-out 2s infinite;
  transform-origin: right center;
  will-change: transform;
  font-size:0.65rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--r-full);z-index:2;
}
.pcard__badge--sale { background:var(--grad-vivid);color:#fff;box-shadow:0 2px 8px rgba(36,84,230,0.4); }
.pcard__badge--new  { background:var(--c-teal);color:#fff;box-shadow:0 2px 8px rgba(36,84,230,0.4); }
.pcard__badge--free {
  background:linear-gradient(135deg, var(--c-emerald, #10b981) 0%, #047857 100%);
  color:#fff;
  box-shadow:0 2px 8px rgba(16,185,129,0.35);
}
.pcard__badge--premium {
  background:var(--grad-vivid);
  color:#fff;
  box-shadow:0 2px 8px rgba(36,84,230,0.35);
}
/* Body */
.pcard__body { padding:var(--sp-5);flex:1;display:flex;flex-direction:column; }
.pcard__cat {
  display:inline-block;align-self:flex-start;
  font-size:0.68rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--c-teal);background:rgba(36,84,230,0.1);border:1px solid rgba(36,84,230,0.2);
  border-radius:var(--r-full);padding:2px 10px;margin-bottom:var(--sp-3);
}
.pcard__title { font-size:1.05rem;font-weight:800;line-height:1.3;letter-spacing:-0.02em;margin-bottom:var(--sp-2); }
.pcard__title a { color:var(--color-heading);text-decoration:none; }
.pcard__title a:hover { color:var(--c-p700); }
.pcard__desc { font-size:0.82rem;color:var(--color-muted);line-height:1.6;flex:1;margin-bottom:var(--sp-4); }
/* Features */
.pcard__features { list-style:none;display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-5); }
.pcard__features li { display:flex;align-items:center;gap:var(--sp-2);font-size:0.78rem;color:var(--color-text);line-height:1.4; }
.pcard__features li svg { color:var(--c-emerald);flex-shrink:0; }
/* Footer: price + CTA */
.pcard__footer {
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--color-border);
}
.pcard__price { font-size:1.5rem;font-weight:900;color:var(--c-p700);letter-spacing:-0.04em;line-height:1; }
.pcard__price del { font-size:0.85rem;color:var(--color-muted);font-weight:400;display:block;margin-bottom:1px;letter-spacing:0; }
/* WooCommerce add-to-cart inside pcard */
.pcard .button,.pcard a.button {
  display:inline-flex;align-items:center;gap:0.4rem;
  background:var(--grad-vivid);color:#fff;
  border:none;border-radius:var(--r-full);
  padding:0.55rem 1.1rem;
  font-size:0.82rem;font-weight:700;letter-spacing:0.02em;
  cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:opacity 0.18s ease,transform 0.18s ease,box-shadow 0.18s ease;
  box-shadow:0 2px 10px rgba(36,84,230,0.3);
}
.pcard .button:hover,.pcard a.button:hover {
  opacity:0.88;transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(36,84,230,0.4);color:#fff;
}
/* Sidebar widget variants */
.products-widget.sidebar-card--accent {
  background:var(--c-slate50);
  border-left:3px solid var(--c-teal);
  border-color:rgba(36,84,230,0.2);
}
.products-widget.sidebar-card--gradient {
  background:var(--grad-vivid);border:none;
}
.products-widget.sidebar-card--gradient .scard-title,.products-widget.sidebar-card--gradient h4 { color:#fff;border:none; }
.products-widget.sidebar-card--gradient .scard-desc { color:rgba(255,255,255,0.85); }
.scard-icon-wrap {
  width:44px;height:44px;border-radius:var(--r-xl);
  background:rgba(36,84,230,0.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-3);
}
.scard-icon-wrap svg { color:var(--c-teal); }
.sidebar-card--gradient .scard-icon-wrap { background:rgba(255,255,255,0.2); }
.sidebar-card--gradient .scard-icon-wrap svg { color:#fff; }
.scard-title { font-size:0.9rem;font-weight:800;color:var(--color-heading);margin-bottom:var(--sp-2);letter-spacing:-0.01em; }
.scard-desc { font-size:0.78rem;color:var(--color-muted);line-height:1.5;margin-bottom:var(--sp-4); }
.scard-list { list-style:none;display:flex;flex-direction:column;gap:var(--sp-2); }
.scard-list li { display:flex;align-items:center;gap:var(--sp-2);font-size:0.78rem;color:var(--color-text); }
.scard-list li svg { color:var(--c-emerald);flex-shrink:0; }
.scard-btn { width:100%;justify-content:center; }
/* Shop trust bar */
.shop-trust-bar { background:#fff;border-bottom:1px solid var(--color-border);padding:var(--sp-3) 0; }
.shop-trust-inner { display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-5); }
.shop-trust-item { display:flex;align-items:center;gap:var(--sp-2);font-size:0.8rem;font-weight:600;color:var(--color-muted); }
.shop-trust-item svg { color:var(--c-p400);flex-shrink:0; }
.shop-trust-item:first-child svg { color:#f59e0b; }
.shop-trust-sep { width:1px;height:16px;background:var(--color-border); }
/* Widget label */
.widget-label {
  font-size:0.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--color-muted);margin-bottom:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:1px solid var(--color-border);
}
/* Shop search form */
.shop-search-form { margin-top:var(--sp-3); }
.shop-search-inner {
  display:flex;align-items:center;
  background:var(--c-slate50);border:1px solid var(--color-border);
  border-radius:var(--r-xl);overflow:hidden;
  transition:border-color 0.18s ease,box-shadow 0.18s ease;
}
.shop-search-inner:focus-within { border-color:var(--c-p300);box-shadow:0 0 0 3px rgba(36,84,230,0.1); }
.shop-search-input {
  flex:1;border:none;background:transparent;
  padding:var(--sp-2) var(--sp-3);font-size:0.82rem;color:var(--color-text);outline:none;
}
.shop-search-input::placeholder { color:var(--color-muted); }
.shop-search-btn {
  background:none;border:none;padding:var(--sp-2) var(--sp-3);
  cursor:pointer;color:var(--color-muted);display:flex;align-items:center;
  transition:color 0.15s ease;
}
.shop-search-btn:hover { color:var(--c-p700); }
/* Category count badge */
.cat-count {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--c-slate50);border:1px solid var(--color-border);
  border-radius:var(--r-full);font-size:0.68rem;font-weight:700;color:var(--color-muted);
}
.products-cat-list li a.is-active { color:var(--c-p700);font-weight:700; }
.products-cat-list li a.is-active .cat-count { background:var(--c-p100);border-color:var(--c-p200);color:var(--c-p700); }
/* Shop empty state */
.shop-empty { grid-column:1/-1;text-align:center;padding:clamp(3rem,8vw,5rem) var(--sp-8); }
.shop-empty__icon {
  width:80px;height:80px;background:var(--c-p50);border-radius:var(--r-3xl);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-5);
}
.shop-empty__icon svg { color:var(--c-p300); }
.shop-empty h3 { margin-bottom:var(--sp-2); }
.shop-empty p { color:var(--color-muted);margin-bottom:var(--sp-6); }
/* ── Shop pagination ──────────────────────────────────────────
   Markup (paginate_links, type="list"):
     <nav class="woocommerce-pagination">
       <ul class="page-numbers">           ← the <ul> carries .page-numbers too
         <li><a class="prev page-numbers">←</a></li>
         <li><span class="page-numbers current">2</span></li>
       </ul>
     </nav>

   WooCommerce's own woocommerce.css styles this with selectors such as
   `.woocommerce nav.woocommerce-pagination ul li span.current` (0,3,4):
   floated <li>s with dividing borders, a bordered inline-block <ul>,
   `min-width:1em`, and a grey current page. Those beat simple theme
   selectors, so every rule below is written to out-rank them:
     ul   → body nav.woocommerce-pagination ul.page-numbers        (0,2,3)
     li   → … ul.page-numbers li                                   (0,2,4)
     link → … li a.page-numbers / span.page-numbers                (0,3,5)
     state→ … span.page-numbers.current / a.page-numbers:hover     (0,4,5)
   Element-qualifying a/span also keeps button styles off the <ul>.      */
.shop-pagination { margin-top:var(--sp-12);display:flex;justify-content:center; }

body nav.woocommerce-pagination {
  display:flex;justify-content:center;width:100%;text-align:center;
}

/* Reset WooCommerce's bordered inline-block list */
body nav.woocommerce-pagination ul.page-numbers {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-2);
  list-style:none;margin:0;padding:0;
  border:0;background:none;white-space:normal;
  min-width:0;height:auto;
}
/* Reset WooCommerce's floated, divided list items */
body nav.woocommerce-pagination ul.page-numbers li {
  display:block;float:none;
  margin:0;padding:0;border:0;overflow:visible;
  list-style:none;
}

/* Page buttons */
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;
  min-width:44px;height:44px;margin:0;padding:0 var(--sp-3);
  border-radius:var(--r-lg);
  border:1.5px solid var(--color-border);background:#fff;
  color:var(--color-text);
  font-family:inherit;font-size:0.95rem;font-weight:700;line-height:1;
  text-decoration:none;
  transition:border-color var(--t-fast),color var(--t-fast),
             background var(--t-fast),box-shadow var(--t-fast),
             transform var(--t-fast);
}
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
  border-color:var(--c-teal);color:var(--c-p700);background:var(--c-p50);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,84,230,0.14);
}
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
  outline:2px solid var(--c-teal);outline-offset:2px;
}

/* Current page */
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current {
  background:var(--grad-vivid);color:#fff;border-color:transparent;
  box-shadow:0 4px 14px rgba(36,84,230,0.35);
}

/* Ellipsis — not a control, so no button box */
body nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots {
  border-color:transparent;background:none;box-shadow:none;
  min-width:24px;padding:0;color:var(--color-muted);
}

/* Prev / next arrows */
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev,
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next {
  padding:0 var(--sp-4);font-size:1.05rem;
  color:var(--c-p700);border-color:var(--c-p200);background:var(--c-p50);
}
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev:hover,
body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next:hover {
  background:var(--c-p700);color:#fff;border-color:var(--c-p700);
}

@media (max-width:480px) {
  body nav.woocommerce-pagination ul.page-numbers { gap:6px; }
  body nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
  body nav.woocommerce-pagination ul.page-numbers li span.page-numbers {
    min-width:44px;padding:0 var(--sp-2);font-size:0.9rem;
  }
  body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.prev,
  body nav.woocommerce-pagination ul.page-numbers li a.page-numbers.next { padding:0 var(--sp-3); }
}
/* WooCommerce ordering dropdown */
.woocommerce-ordering select {
  padding:var(--sp-2) 2rem var(--sp-2) var(--sp-4);
  border:1px solid var(--color-border);border-radius:var(--r-xl);
  font-size:var(--text-sm);color:var(--color-text);background:#fff;
  cursor:pointer;outline:none;transition:border-color 0.18s ease;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px;
}
.woocommerce-ordering select:focus { border-color:var(--c-p300); }

/* ── product-card legacy aliases (front-page + related products) ── */
.product-card {
  background:#fff;border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--color-border);
  display:flex;flex-direction:column;
  position:relative;
  transition:transform 0.28s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.28s ease,border-color 0.2s ease;
}
.product-card:hover {
  transform:translateY(-6px);
  box-shadow:0 20px 48px rgba(36,84,230,0.13),0 6px 16px rgba(0,0,0,0.07);
  border-color:rgba(155,178,255,0.5);
}
.product-card__visual {
  background:linear-gradient(140deg,var(--c-p50) 0%,var(--c-p100) 55%,rgba(36,84,230,0.07) 100%);
  position:relative;overflow:hidden;
  /* Responsive aspect ratio so the visual area scales with the column
     width and fits any image (square, landscape, ultra-wide infographic)
     without cropping. */
  aspect-ratio: 3 / 2;
  display:flex;align-items:center;justify-content:center;
}
.product-card__visual::before {
  content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;
  background:radial-gradient(circle,rgba(36,84,230,0.1) 0%,transparent 70%);pointer-events:none;
}
.product-card__img {
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:relative;z-index:1;
}
.product-card__img img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;   /* show full image — never crop */
  display:block;
  transition:transform 0.4s ease;
}
.product-card:hover .product-card__img img { transform:scale(1.03); }
.product-card__icon-wrap { font-size:3rem;position:relative;z-index:1; }
.product-card__badge {
  position:absolute;bottom:var(--sp-3);right:var(--sp-3);
  background:var(--grad-vivid);color:#fff;
  font-size:0.65rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--r-full);z-index:2;
  /* Soft drop shadow so the pill stays legible even when it overlaps
     a busy / light area of the image. */
  box-shadow:0 2px 6px rgba(15,23,42,0.18), 0 1px 2px rgba(15,23,42,0.10);
  /* Subtle "peek-out" animation — every 6s the badge slides 50% of its
     own width past the card edge, then settles back. Draws the eye to
     the pricing tag without being distracting. */
  animation: badge-peek 6s ease-in-out 2s infinite;
  transform-origin: right center;
  will-change: transform;
}
/* Pause the peek on hover so the user can read / interact comfortably. */
.product-card:hover .product-card__badge { animation-play-state: paused; }

@keyframes badge-peek {
  0%, 80%, 100% { transform: translateX(0); }
  88%           { transform: translateX(50%); }
  96%           { transform: translateX(0); }
}
/* Respect users who ask for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .product-card__badge,
  .pcard__badge { animation: none; }
}
/* Also pause the .pcard__badge peek on card hover so the user can read it. */
.pcard:hover .pcard__badge { animation-play-state: paused; }
/* Free badge → green gradient so it visually distinguishes from Premium. */
.product-card__badge--free {
  background:linear-gradient(135deg, var(--c-emerald, #10b981) 0%, #047857 100%);
  box-shadow:0 2px 8px rgba(16,185,129,0.35);
}
/* Premium badge keeps the existing purple gradient — explicit alias for
   clarity at the call site. */
.product-card__badge--premium {
  background:var(--grad-vivid);
  box-shadow:0 2px 8px rgba(36,84,230,0.35);
}
/* Neutral / "Coming Soon" badge — slate so it reads as muted, not Free. */
.product-card__badge--soon {
  background:linear-gradient(135deg, var(--c-slate500, #64748b) 0%, var(--c-slate700, #334155) 100%);
  box-shadow:0 2px 8px rgba(15,23,42,0.20);
}
.product-card__body { padding:var(--sp-5);flex:1;display:flex;flex-direction:column; }
.product-card__title { font-size:1.05rem;font-weight:800;line-height:1.3;letter-spacing:-0.02em;margin-bottom:var(--sp-2); }
.product-card__title a { color:var(--color-heading);text-decoration:none; }
.product-card__title a:hover { color:var(--c-p700); }
.product-card__desc { font-size:0.82rem;color:var(--color-muted);line-height:1.6;flex:1;margin-bottom:var(--sp-4); }

/* Single product */
.product-short-desc {
  font-size:1rem;color:var(--color-text);
  line-height:1.75;margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--color-border);
}
.product-tabs {
  border-radius:var(--r-2xl);overflow:hidden;
  border:1px solid var(--color-border);
  background:#fff;
}
.single-product-section { padding:clamp(3rem,6vw,5rem) 0; }
.single-product-layout {
  display:grid;grid-template-columns:1fr 400px;
  gap:var(--sp-12);align-items:start;margin-bottom:var(--sp-16);
}
.product-gallery {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  border-radius:var(--r-3xl);
  padding:var(--sp-12);
  display:flex;align-items:center;justify-content:center;
  min-height:380px;font-size:6rem;text-align:center;
  border:1px solid var(--c-p100);
}
.product-gallery img { width:100%;height:100%;object-fit:cover; }
.trust-badges-row {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-3);margin-top:var(--sp-5);
}
.trust-badge {
  text-align:center;background:#fff;
  border-radius:var(--r-xl);padding:var(--sp-4);
  border:1px solid var(--color-border);
}
.trust-badge-icon { font-size:1.5rem;display:block;margin-bottom:var(--sp-1); }
.trust-badge-label { font-size:0.72rem;font-weight:700;color:var(--color-heading); }
.product-info h1 { margin-bottom:var(--sp-3); }
.product-full-price { font-size:2.5rem;font-weight:900;color:var(--c-p700);letter-spacing:-0.04em;margin-bottom:var(--sp-4); }
.product-full-price del { font-size:1.5rem;color:var(--color-muted);font-weight:400;margin-right:var(--sp-2); }
.product-features-box {
  background:var(--c-slate50);border-radius:var(--r-xl);
  padding:var(--sp-5);margin-bottom:var(--sp-6);
  border:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:var(--sp-3);
}
.product-feature-item { display:flex;align-items:center;gap:var(--sp-3);font-size:0.875rem; }
.pfi-check {
  width:22px;height:22px;border-radius:50%;
  background:var(--grad-emerald);color:#fff;
  font-size:0.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product-buy-box { display:flex;flex-direction:column;gap:var(--sp-3); }
.product-guarantees-row {
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
  font-size:0.75rem;color:var(--color-muted);margin-top:var(--sp-2);
}
.product-guarantees-row span { display:flex;align-items:center;gap:4px; }

/* Product tabs */
.product-tabs-nav {
  display:flex;
  border-bottom:2px solid var(--color-border);
  margin-bottom:var(--sp-8);
  gap:0;overflow-x:auto;
}
.ptab-btn {
  padding:var(--sp-4) var(--sp-6);
  font-size:0.875rem;font-weight:700;color:var(--color-muted);
  border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:all var(--t-fast);white-space:nowrap;cursor:pointer;
}
.ptab-btn:hover { color:var(--c-p700); }
.ptab-btn.active { color:var(--c-p700);border-bottom-color:var(--c-p700); }
.ptab-panel { display:none; }
.ptab-panel.active { display:block; }

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-intro-section { padding:clamp(3rem,6vw,5rem) 0;background:#fff; }
.about-grid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,5rem);align-items:center; }
.about-image-wrap {
  position:relative;border-radius:var(--r-3xl);overflow:hidden;
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  /* Generous padding gives the image breathing room against the soft purple
     background so it reads as an intentional portrait card, not a cropped
     hero strip. */
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--c-p100);
}
/* Show the full image — object-fit:contain keeps the entire portrait
   visible without cropping. Height auto so we never force a stretch. */
.about-image-wrap img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: contain;
  display: block;
  border-radius: var(--r-2xl);
}
.about-exp-badge {
  position:absolute;bottom:var(--sp-5);left:var(--sp-5);
  background:var(--grad-vivid);color:#fff;
  border-radius:var(--r-xl);padding:var(--sp-3) var(--sp-5);
  font-size:0.875rem;font-weight:800;
  box-shadow:var(--shadow-purple);
}
.about-content h2 { margin-bottom:var(--sp-5); }
.about-content p { color:var(--color-text);margin-bottom:var(--sp-4); }

.about-stats-section {
  background:var(--grad-vivid);
  padding:clamp(2rem,4vw,3rem) 0;
}
.about-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);text-align:center; }
.about-stat-value { font-size:2.75rem;font-weight:900;color:#fff;letter-spacing:-0.04em;line-height:1;display:block;margin-bottom:var(--sp-2); }
.about-stat-label { font-size:0.82rem;color:rgba(255,255,255,0.7); }

.skills-section { padding:clamp(3rem,6vw,5rem) 0;background:var(--c-slate50); }
.skills-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--sp-4); }
.skill-card {
  background:#fff;border-radius:var(--r-2xl);
  padding:var(--sp-5);text-align:center;
  border:1px solid var(--color-border);
  transition:all var(--t-base);
}
.skill-card:hover { transform:translateY(-4px);box-shadow:var(--shadow-card-hover);border-color:rgba(155,178,255,.3); }
.skill-icon { font-size:2rem;display:block;margin-bottom:var(--sp-3); }
.skill-name { font-size:0.875rem;font-weight:800;margin-bottom:var(--sp-3);color:var(--color-heading); }
.skill-bar { height:4px;background:var(--color-border);border-radius:var(--r-full);overflow:hidden; }
.skill-fill { height:100%;background:var(--grad-vivid);border-radius:var(--r-full);width:0;transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }
.skill-pct { font-size:0.72rem;color:var(--color-muted);display:block;margin-top:var(--sp-1); }

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-section { padding:clamp(3rem,6vw,5rem) 0;background:var(--c-slate50); }
.contact-layout { display:grid;grid-template-columns:1fr 380px;gap:var(--sp-8);align-items:start; }
.contact-form-card {
  background:#fff;border-radius:var(--r-3xl);
  padding:var(--sp-8);border:1px solid var(--color-border);
  box-shadow:var(--shadow-sm);
}
.contact-form-card h2 { margin-bottom:var(--sp-2); }
.contact-form-card > p { color:var(--color-text);margin-bottom:var(--sp-6); }
.contact-info-col { display:flex;flex-direction:column;gap:var(--sp-4); }
.contact-info-card {
  background:#fff;border-radius:var(--r-2xl);
  padding:var(--sp-5);border:1px solid var(--color-border);
  display:flex;align-items:flex-start;gap:var(--sp-4);
  transition:all var(--t-base);
}
.contact-info-card:hover { border-color:var(--c-p200);box-shadow:var(--shadow-card); }
.ci-icon {
  width:48px;height:48px;
  background:var(--c-p50);border:1px solid var(--c-p100);
  border-radius:var(--r-xl);
  display:flex;align-items:center;justify-content:center;
  color:var(--c-p700);flex-shrink:0;
}
.ci-icon svg { width:22px;height:22px; }
.ci-body h4 { font-size:0.875rem;margin-bottom:var(--sp-1); }
.ci-body p,.ci-body a { font-size:0.875rem;color:var(--color-text);margin:0; }
.ci-body a { color:var(--c-p700);font-weight:600; }
.contact-avail {
  background:var(--grad-vivid);border-radius:var(--r-2xl);
  padding:var(--sp-6);color:#fff;
}
.contact-avail h4 { color:#fff;margin-bottom:var(--sp-3); }
.contact-avail p { color:rgba(255,255,255,0.8);font-size:0.875rem;margin-bottom:var(--sp-4); }

/* Form fields */
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4); }
.form-field { display:flex;flex-direction:column;gap:var(--sp-2); }
.form-field.full { grid-column:1/-1; }
.form-field label { font-size:0.82rem;font-weight:700;color:var(--color-heading); }
.form-field input,.form-field textarea,.form-field select {
  padding:0.75rem 1rem;
  border:1.5px solid var(--color-border);
  border-radius:var(--r-lg);font-size:0.875rem;
  color:var(--color-heading);background:#fff;
  transition:all var(--t-fast);outline:none;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus {
  border-color:var(--c-p500);
  box-shadow:0 0 0 4px rgba(77,116,255,0.1);
}
.form-field textarea { resize:vertical;min-height:140px; }

/* ============================================================
   PAGINATION
   ============================================================ */
/* Blog / CPT pagination. b2bm_pagination() emits type="list", so the
   markup matches WooCommerce's: <ul class="page-numbers"> + <li> per link.
   As in the shop rules above, button styles are element-qualified so the
   <ul class="page-numbers"> can never pick them up. */
.pagination {
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp-2);margin-top:var(--sp-12);
  flex-wrap:wrap;
}
.pagination ul,
.pagination ul.page-numbers {
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--sp-2);
  list-style:none;margin:0;padding:0;
  border:0;background:none;
}
.pagination li { margin:0;padding:0;list-style:none; }

.pagination a,
.pagination span.page-numbers {
  min-width:42px;height:42px;padding:0 var(--sp-3);
  border-radius:var(--r-lg);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:0.9rem;font-weight:700;line-height:1;
  border:1.5px solid var(--color-border);background:#fff;
  color:var(--color-text);text-decoration:none;
  transition:border-color var(--t-fast),color var(--t-fast),
             background var(--t-fast),box-shadow var(--t-fast),
             transform var(--t-fast);
}
.pagination a:hover {
  border-color:var(--c-teal);color:var(--c-p700);background:var(--c-p50);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(36,84,230,0.14);
}
.pagination a:focus-visible { outline:2px solid var(--c-teal);outline-offset:2px; }
.pagination span.current {
  background:var(--grad-vivid);color:#fff;border-color:transparent;
  box-shadow:0 2px 10px rgba(36,84,230,0.35);
}
.pagination span.dots {
  border-color:transparent;background:none;
  min-width:26px;padding:0;color:var(--color-muted);
}
.pagination a.prev,.pagination a.next {
  padding:0 var(--sp-4);font-size:1rem;
  color:var(--c-p700);border-color:var(--c-p200);background:var(--c-p50);
}
.pagination a.prev:hover,.pagination a.next:hover {
  background:var(--c-p700);color:#fff;border-color:var(--c-p700);
}

@media (max-width:480px) {
  .pagination ul,.pagination ul.page-numbers { gap:6px; }
  .pagination a,.pagination span.page-numbers {
    min-width:44px;height:44px;padding:0 var(--sp-2);font-size:0.85rem;
  }
  .pagination a.prev,.pagination a.next { padding:0 var(--sp-3); }
}

/* ============================================================
   WOOCOMMERCE BASE OVERRIDES
   ============================================================ */
.woocommerce-message { background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);font-size:0.875rem; }
.woocommerce-error   { background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);font-size:0.875rem; }
.woocommerce-info    { background:var(--c-p50);color:var(--c-p800);border:1px solid var(--c-p200);border-radius:var(--r-lg);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);font-size:0.875rem; }
.woocommerce .button,.woocommerce button.button { display:inline-flex;align-items:center;gap:var(--sp-2);padding:.75rem 1.75rem;font-size:.9rem;font-weight:700;border-radius:var(--r-full);background:var(--grad-vivid);color:#fff;border:none;cursor:pointer;transition:all var(--t-base);box-shadow:var(--shadow-purple); }
.woocommerce .button:hover,.woocommerce button.button:hover { transform:translateY(-2px);box-shadow:var(--shadow-purple-lg);color:#fff; }

/* ============================================================
   SKIP LINK / ACCESSIBILITY
   ============================================================ */
.skip-link {
  position:absolute;top:-100%;left:var(--sp-4);
  background:var(--c-p700);color:#fff;
  padding:var(--sp-2) var(--sp-4);border-radius:0 0 var(--r-md) var(--r-md);
  font-size:0.875rem;font-weight:600;z-index:9999;
}
.skip-link:focus { top:0; }
.screen-reader-text { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap; }
:focus-visible { outline:2px solid var(--c-p600);outline-offset:3px; }

/* Scroll to top */
.scroll-to-top {
  position:fixed;bottom:var(--sp-6);right:var(--sp-6);
  width:46px;height:46px;
  background:var(--grad-vivid);color:#fff;
  border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-purple);
  opacity:0;visibility:hidden;
  transform:translateY(16px);
  transition:all var(--t-base);
  z-index:900;border:none;cursor:pointer;
}
.scroll-to-top.visible { opacity:1;visibility:visible;transform:translateY(0); }
.scroll-to-top:hover { transform:translateY(-3px);box-shadow:var(--shadow-purple-lg); }
.scroll-to-top svg { width:20px;height:20px; }

/* WP admin bar */
/* Admin bar — desktop (32px bar). WordPress already pushes the page down
   (html margin-top), so only the fixed header and mobile menu need moving. */
.admin-bar .site-header { top: 32px; }
.admin-bar .mobile-nav  { top: calc(var(--header-h) + 32px); }

/* Admin bar — mobile (46px bar) */
@media screen and (max-width:782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .mobile-nav  { top: calc(var(--header-h) + 46px); }
}

/* ============================================================
   V2 SUPPLEMENTAL — inner page classes
   ============================================================ */

/* Page hero compact variant */
.page-hero--compact { padding-bottom:var(--sp-10); }
.hero-post-meta { display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5); }
.hero-post-author { display:flex;align-items:center;gap:var(--sp-2); }
.hero-post-author img { width:36px;height:36px;border-radius:50%;object-fit:cover; }
.hero-post-author span { font-size:0.875rem;font-weight:600;color:rgba(255,255,255,0.9); }
.meta-divider { color:rgba(255,255,255,0.4);font-size:0.9rem; }

/* Page content section */
.page-content-section { padding:clamp(3rem,6vw,5rem) 0; }
.page-content-inner { max-width:840px;margin:0 auto; }

/* Services archive section */
.services-archive-section { padding:clamp(3rem,6vw,5rem) 0; }

/* Service single section */
.service-single-section { padding:clamp(3rem,6vw,5rem) 0; }
.service-main { min-width:0; }
.service-hero-img {
  border-radius:var(--r-2xl);overflow:hidden;
  margin-bottom:var(--sp-8);
}
.service-hero-img img { width:100%;height:auto;display:block; }
.related-services { margin-top:var(--sp-12); }
.related-services h2 { margin-bottom:var(--sp-6); }

/* Sidebar card variants */
.sidebar-card { background:#fff;border:1px solid var(--color-border);border-radius:var(--r-2xl);padding:var(--sp-6);margin-bottom:var(--sp-5);box-shadow:var(--shadow-sm); }
.sidebar-card h4 { font-size:1.05rem;margin-bottom:var(--sp-4); }
.sidebar-card--accent {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  border:1px solid var(--c-p200);
  border-radius:var(--r-2xl);padding:var(--sp-6);margin-bottom:var(--sp-5);
}
.sidebar-card--gradient {
  background:var(--grad-vivid);border:none;
  border-radius:var(--r-2xl);padding:var(--sp-6);
  text-align:center;color:#fff;margin-bottom:var(--sp-5);
}
.sidebar-card-row { display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-2); }
.sidebar-price {
  font-size:2.5rem;font-weight:900;color:var(--c-p700);
  letter-spacing:-0.04em;line-height:1;margin-bottom:var(--sp-2);
}
.sidebar-search { display:flex;gap:var(--sp-2); }
.sidebar-search input {
  flex:1;padding:0.625rem 0.875rem;
  border:1.5px solid var(--color-border);
  border-radius:var(--r-lg);font-size:var(--text-sm);
  outline:none;transition:border-color var(--t-fast);
}
.sidebar-search input:focus { border-color:var(--c-p500); }
.sidebar-recent { display:flex;flex-direction:column;gap:var(--sp-4);list-style:none; }
.sidebar-recent__item { display:flex;gap:var(--sp-3);align-items:flex-start; }
.sidebar-recent__thumb { flex-shrink:0; }
.sidebar-recent__title {
  font-size:var(--text-sm);font-weight:600;
  color:var(--color-heading);line-height:1.4;
  display:block;margin-bottom:var(--sp-1);
}
.sidebar-recent__title:hover { color:var(--c-p700); }
.sidebar-recent__date { font-size:var(--text-xs);color:var(--color-muted); }

/* Blog archive */
.blog-main { min-width:0; }
.post-card__title { font-size:1.2rem;margin-bottom:var(--sp-2); }
.post-card__title a { color:var(--color-heading); }
.post-card__title a:hover { color:var(--c-p700); }
.post-card__excerpt { font-size:0.875rem;color:var(--color-text);flex:1;margin-bottom:var(--sp-4); }
.post-card__footer { display:flex;align-items:center;justify-content:space-between;padding-top:var(--sp-4);border-top:1px solid var(--color-border);margin-top:auto; }
.post-card__author { display:flex;align-items:center;gap:var(--sp-2);font-size:0.78rem;color:var(--color-muted); }
.post-card__author img { width:28px;height:28px;border-radius:50%; }

/* Blog single */
.blog-article { min-width:0; }
.article-share-bar {
  display:flex;align-items:center;gap:var(--sp-3);
  margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--color-border);
}
.article-tag {
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-full);
  font-size:0.82rem;font-weight:600;
  transition:all var(--t-fast);
}
.article-tag:hover { background:var(--c-p700);color:#fff;border-color:var(--c-p700); }
.post-nav { display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-8); }
.post-nav__item {
  display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-5);border-radius:var(--r-2xl);
  background:#fff;border:1px solid var(--color-border);
  text-decoration:none;transition:all var(--t-base);
}
.post-nav__item:hover { border-color:var(--c-p300);box-shadow:var(--shadow-card-hover);transform:translateY(-3px); }
.post-nav__item--next { text-align:right; }
.post-nav__label { font-size:0.72rem;font-weight:700;color:var(--color-muted);text-transform:uppercase;letter-spacing:0.08em; }
.post-nav__title { font-size:0.9rem;font-weight:700;color:var(--color-heading);line-height:1.4; }
.related-posts { margin-top:var(--sp-12); }
.related-posts h2 { margin-bottom:var(--sp-6); }
.blog-grid--3 { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5); }

/* Products archive layout */
.products-main { min-width:0; }
.products-sortbar {
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-6);flex-wrap:wrap;gap:var(--sp-3);
}
.products-count { font-size:var(--text-sm);color:var(--color-muted);margin:0; }
.products-cat-list { list-style:none;display:flex;flex-direction:column;gap:var(--sp-1); }
.products-cat-list li a {
  display:flex;align-items:center;justify-content:space-between;
  font-size:var(--text-sm);color:var(--color-text);
  padding:var(--sp-2) 0;border-bottom:1px solid var(--c-slate50);
  transition:color var(--t-fast);text-decoration:none;
}
.products-cat-list li:last-child a { border-bottom:none; }
.products-cat-list li a:hover { color:var(--c-p700); }

/* Single product v2 */
.product-gallery-col { display:flex;flex-direction:column;gap:var(--sp-5); }
.product-gallery--icon { flex-direction:column;gap:var(--sp-3); }
.product-gallery__label { font-size:var(--text-sm);color:var(--c-p700);font-weight:600; }
.product-rating { display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4); }
.product-rating span { font-size:var(--text-sm);color:var(--color-muted); }
.product-feature-check {
  width:22px;height:22px;border-radius:50%;
  background:var(--grad-emerald);color:#fff;
  font-size:0.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.product-guarantees {
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
  font-size:0.75rem;color:var(--color-muted);margin-top:var(--sp-4);
}
.product-guarantees span { display:flex;align-items:center;gap:4px; }
.product-tabs-wrap { margin-top:var(--sp-12); }
.ptab-nav {
  display:flex;border-bottom:2px solid var(--color-border);
  margin-bottom:var(--sp-8);gap:0;overflow-x:auto;
}
.related-products { margin-top:var(--sp-16); }
.related-products .section-header { margin-bottom:var(--sp-8); }

/* 404 + empty states */
.error-404-wrap { padding:clamp(3rem,6vw,5rem) 0; }
.error-404-inner {
  max-width:600px;margin:0 auto;text-align:center;
  padding:var(--sp-12) var(--sp-8);
}
.error-404__code {
  font-size:clamp(5rem,15vw,9rem);font-weight:900;
  background:var(--grad-vivid);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;margin-bottom:var(--sp-4);
}
.error-404__actions { display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin:var(--sp-8) 0; }
.error-404__links p { font-size:var(--text-sm);color:var(--color-muted);margin-bottom:var(--sp-3); }
.error-404__links div { display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center; }
.error-404__links a {
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);
  padding:var(--sp-2) var(--sp-4);border-radius:var(--r-full);
  font-size:var(--text-sm);font-weight:600;
  transition:all var(--t-fast);
}
.error-404__links a:hover { background:var(--c-p700);color:#fff; }

.empty-state { text-align:center;padding:clamp(3rem,8vw,6rem) 0; }
.empty-state__icon { font-size:4rem;margin-bottom:var(--sp-4); }

/* ============================================================
   SINGLE PRODUCT PAGE — sp-* classes
   ============================================================ */

/* Section wrapper */
.sp-section { padding:clamp(3rem,6vw,5rem) 0;background:#fff; }

/* Two-column grid: content (left, wider) + sidebar (right, sticky) */
.sp-layout {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}

/* Left column */
.sp-content { min-width:0; }

/* ── Title row ────────────────────────────────────────── */
.sp-title-row {
  display:flex;align-items:flex-start;
  gap:var(--sp-4);flex-wrap:wrap;
  margin-bottom:var(--sp-4);
}
.sp-product-title {
  font-size:clamp(1.75rem,3vw,2.5rem);
  font-weight:900;color:var(--color-heading);
  line-height:1.15;letter-spacing:-0.03em;
  margin:0;flex:1;min-width:180px;
}
.sp-free-pill {
  display:inline-flex;align-items:center;
  padding:4px 14px;
  background:linear-gradient(135deg,var(--c-teal),#1A33A8);
  color:#fff;font-size:0.75rem;font-weight:800;
  border-radius:var(--r-full);letter-spacing:0.06em;
  text-transform:uppercase;white-space:nowrap;
  margin-top:8px;flex-shrink:0;
}

/* ── Rating ───────────────────────────────────────────── */
.sp-rating-row {
  display:flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-4);
}
.sp-rating-count { font-size:0.82rem;color:var(--color-muted); }

/* ── Short description ────────────────────────────────── */
.sp-excerpt {
  font-size:1.05rem;color:var(--color-text);
  line-height:1.75;
  margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-6);
  border-bottom:1px solid var(--color-border);
}
.sp-excerpt p { margin:0; }

/* ── Features list ────────────────────────────────────── */
.sp-features {
  list-style:none;
  display:flex;flex-direction:column;gap:var(--sp-3);
  margin-bottom:var(--sp-8);
  padding:var(--sp-6);
  background:var(--c-slate50);
  border-radius:var(--r-2xl);
  border:1px solid var(--color-border);
}
.sp-features li {
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:0.9rem;color:var(--color-heading);font-weight:500;
}
.sp-feature-check {
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--c-teal),#1A33A8);
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.sp-feature-check svg { width:12px;height:12px; }

/* ── Tabs ─────────────────────────────────────────────── */
.sp-tab-nav {
  display:flex;gap:0;
  border-bottom:2px solid var(--color-border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.sp-tab-btn {
  padding:var(--sp-4) var(--sp-5);
  font-size:0.875rem;font-weight:700;color:var(--color-muted);
  background:none;border:none;
  border-bottom:2px solid transparent;margin-bottom:-2px;
  cursor:pointer;transition:all var(--t-fast);white-space:nowrap;
}
.sp-tab-btn:hover { color:var(--c-p700); }
.sp-tab-btn.active { color:var(--c-p700);border-bottom-color:var(--c-p700); }

.sp-tab-body { padding:var(--sp-8) 0; }
.sp-tab-panel { display:none; }
.sp-tab-panel.active { display:block; }

/* Requirements grid */
.sp-req-grid {
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--sp-4);
}
.sp-req-item {
  display:flex;align-items:flex-start;gap:var(--sp-3);
  background:var(--c-slate50);
  border:1px solid var(--color-border);
  border-radius:var(--r-xl);padding:var(--sp-4);
}
.sp-req-icon { font-size:1.5rem;flex-shrink:0;line-height:1.2; }
.sp-req-label {
  display:block;font-size:0.82rem;font-weight:700;
  color:var(--color-heading);margin-bottom:2px;
}
.sp-req-val {
  display:block;font-size:0.78rem;color:var(--color-muted);
}

/* Changelog */
.sp-changelog { display:flex;flex-direction:column;gap:var(--sp-2); }
.sp-cl-version {
  display:inline-block;
  font-size:0.82rem;font-weight:800;color:var(--c-p700);
  background:var(--c-p50);border:1px solid var(--c-p100);
  border-radius:var(--r-lg);padding:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-5);
}
.sp-cl-version:first-child { margin-top:0; }
.sp-cl-entry {
  display:flex;align-items:flex-start;gap:var(--sp-3);
  font-size:0.875rem;color:var(--color-text);padding-left:var(--sp-4);
}
.sp-cl-dot {
  width:6px;height:6px;border-radius:50%;
  background:var(--c-p400);flex-shrink:0;margin-top:8px;
}

/* ── Right sidebar ────────────────────────────────────── */
.sp-sidebar {
  display:flex;flex-direction:column;gap:var(--sp-5);
  position:sticky;top:calc(var(--header-h) + var(--sp-6));
}

/* Product visual card */
.sp-visual-card {
  border-radius:var(--r-3xl);overflow:hidden;
  background:linear-gradient(135deg,var(--c-p900) 0%,var(--c-p700) 50%,var(--c-p500) 100%);
  min-height:200px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.sp-visual-card::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 25% 25%,rgba(155,178,255,0.45) 0%,transparent 55%),
    radial-gradient(ellipse at 85% 85%,rgba(26,51,168,0.5) 0%,transparent 50%);
}
.sp-visual-card::after {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:32px 32px;
}
.sp-visual-img { width:100%;height:100%;object-fit:cover;display:block; }
.sp-visual-icon {
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  padding:var(--sp-8);text-align:center;position:relative;z-index:1;
}
.sp-visual-plug { font-size:4rem;filter:drop-shadow(0 4px 16px rgba(0,0,0,.35)); }
.sp-visual-name {
  font-size:0.95rem;font-weight:800;color:#fff;
  line-height:1.3;max-width:220px;
}
.sp-visual-by { font-size:0.72rem;color:rgba(255,255,255,.6);font-weight:500; }

/* Buy / CTA box */
.sp-buy-box {
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--r-2xl);
  padding:var(--sp-6);
  box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;gap:var(--sp-4);
}
.sp-price-row {
  display:flex;align-items:baseline;gap:var(--sp-3);
  padding-bottom:var(--sp-4);border-bottom:1px solid var(--color-border);
}
.sp-price-free {
  font-size:2.5rem;font-weight:900;color:var(--c-emerald);
  letter-spacing:-0.04em;line-height:1;
}
.sp-price-sub { font-size:0.8rem;color:var(--color-muted);font-weight:500; }
.sp-price-value {
  font-size:2rem;font-weight:900;color:var(--c-p700);
  letter-spacing:-0.04em;
}
.sp-cta-btn {
  width:100%;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6);font-size:1rem;
}
.sp-cta-btn svg { width:18px;height:18px;flex-shrink:0; }

/* Trust list */
.sp-trust-list {
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:var(--sp-2);
}
.sp-trust-list li {
  display:flex;align-items:center;gap:var(--sp-2);
  font-size:0.8rem;color:var(--color-text);
}
.sp-trust-list li span { font-size:0.9rem;flex-shrink:0; }

/* Meta info box */
.sp-meta-box {
  background:#fff;border:1px solid var(--color-border);
  border-radius:var(--r-2xl);padding:var(--sp-5);
  display:flex;flex-direction:column;
}
.sp-meta-row {
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--c-slate50);
  font-size:0.82rem;
}
.sp-meta-row--tags { align-items:flex-start; }
.sp-meta-row:last-child { border-bottom:none;padding-bottom:0; }
.sp-meta-label {
  flex-shrink:0;width:80px;font-weight:700;
  color:var(--color-heading);padding-top:1px;
}
.sp-meta-val { color:var(--color-text);flex:1; }
.sp-meta-val code {
  background:var(--c-slate100);padding:2px 6px;
  border-radius:var(--r-sm);font-size:0.78rem;
  font-family:var(--font-mono);color:var(--c-p700);
}
.sp-meta-link { color:var(--c-p700);font-weight:600; }
.sp-meta-link:hover { color:var(--c-p900);text-decoration:underline; }

/* Tag pills */
.sp-tag-list { display:flex;flex-wrap:wrap;gap:4px; }
.sp-tag {
  display:inline-block;padding:2px 9px;
  background:var(--c-p50);color:var(--c-p700);
  border:1px solid var(--c-p100);border-radius:var(--r-full);
  font-size:0.72rem;font-weight:600;
  transition:all var(--t-fast);
}
.sp-tag:hover { background:var(--c-p700);color:#fff;border-color:var(--c-p700); }

/* "Need a custom version" card */
.sp-custom-card {
  background:linear-gradient(135deg,var(--c-p50),var(--c-p100));
  border:1px solid var(--c-p200);border-radius:var(--r-2xl);
  padding:var(--sp-6);text-align:center;
}
.sp-custom-icon { display:block;font-size:2rem;margin-bottom:var(--sp-3); }
.sp-custom-card h4 { font-size:1rem;color:var(--c-p800);margin-bottom:var(--sp-2); }
.sp-custom-card p {
  font-size:0.82rem;color:var(--c-p700);
  line-height:1.55;margin-bottom:var(--sp-4);
}

/* Related products section */
.sp-related {
  padding:clamp(3rem,6vw,5rem) 0;
  background:var(--c-slate50);
}
.sp-related .section-header { margin-bottom:var(--sp-8); }
.products-grid--3 { display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6); }
.product-price--free { color:var(--c-emerald);font-weight:800; }

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

/* ── Large screens (1600px+) ──────────────────────────────────
   Widen the content column so big monitors aren't a narrow strip
   with huge empty margins. Card grids are pinned to their design
   column-counts (portfolio 2×4, services 3-up) so auto-fill
   doesn't create uneven 5+3 / 4+2 rows at the wider width.      */
@media (min-width:1600px) {
  :root { --container: 1320px; --container-wide: 1560px; }
  .portfolio-grid { grid-template-columns: repeat(4, 1fr); }
  .services-grid  { grid-template-columns: repeat(3, 1fr); }
}

/* 4K / very large monitors — scale the whole rem-based type ramp.
   Every font-size, spacing token and clamp() cap uses rem, so
   nudging the root size scales the design proportionally.        */
@media (min-width:1920px) {
  html { font-size: 17px; }
  :root { --container: 1400px; }
}
@media (min-width:2400px) {
  html { font-size: 18px; }
}

/* ── Header collapse ──────────────────────────────────────────
   The full desktop header (logo + 5-item nav + cart + CTA button)
   needs ~1100px of width. Below that the nav wraps / overflows,
   so we switch to the hamburger EARLY — not at 768px.           */
@media (max-width:1100px) {
  .primary-nav-wrap { display:none; }
  .nav-toggle { display:flex; }
}

@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr;text-align:center; }
  .hero-desc { max-width:100%; }
  .hero-actions { justify-content:center; }
  .hero-metrics { justify-content:center; }
  .hero-visual { display:none; }
  .why-grid { grid-template-columns:1fr; }
  .process-steps { grid-template-columns:repeat(3,1fr); }
  .process-line { display:none; }
  .sp-grid { grid-template-columns:1fr; }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-content, .cta-content h2, .cta-content p { text-align: center; }
  .cta-content p { max-width: 100%; margin: 0 auto; }
  .cta-actions { flex-direction: row; justify-content: center; align-items: center; }
  .cta-actions .btn { flex: 1; max-width: 240px; }
  .cta-buttons { flex-direction:column;align-items:center; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .about-stats-grid { grid-template-columns:repeat(2,1fr); }
  .single-product-layout { grid-template-columns:1fr; }
  .blog-grid--3 { grid-template-columns:repeat(2,1fr); }
  /* SP new classes */
  .sp-layout { grid-template-columns:1fr; }
  .sp-sidebar { position:static; }
  .products-grid--3 { grid-template-columns:repeat(2,1fr); }
  .sp-req-grid { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  :root { --header-h:64px; }
  /* Hide the big CTA button (it's duplicated inside the mobile panel)
     but KEEP the cart icon — shoppers need it on mobile. */
  .header-cta .btn { display:none; }
  .header-cta { margin-left:0; gap:var(--sp-2); }
  .header-inner { gap:var(--sp-3); }
  .hero-metrics { flex-wrap:wrap;gap:var(--sp-5); }
  .problem-grid,.about-grid { grid-template-columns:1fr; }
  .why-features { grid-template-columns:1fr; }
  .blog-layout,.blog-single-layout { grid-template-columns:1fr; }
  .contact-layout { grid-template-columns:1fr; }
  .products-layout { grid-template-columns:1fr; }
  .service-single-layout { grid-template-columns:1fr; }
  .post-card { grid-template-columns:1fr; }
  .post-card__thumb { min-height:200px; }
  .footer-main { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column;text-align:center;gap:var(--sp-3); }
  .footer-bottom-links { justify-content:center; }
  .form-grid { grid-template-columns:1fr; }
  .about-stats-grid { grid-template-columns:1fr 1fr; }
  .trust-badges-row { grid-template-columns:repeat(3,1fr); }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .blog-grid--3 { grid-template-columns:1fr; }
  .post-nav { grid-template-columns:1fr; }
  /* SP mobile */
  .sp-title-row { flex-direction:column;gap:var(--sp-2); }
  .sp-free-pill { margin-top:0; }
  .products-grid--3 { grid-template-columns:1fr; }
  /* Shop mobile */
  .products-sidebar { position:static; }
  .products-grid { grid-template-columns:repeat(2,1fr); }
  .shop-trust-inner { gap:var(--sp-3); }
  .shop-trust-sep { display:none; }
}

@media (max-width:480px) {
  :root { --px:1rem; }
  .section { padding:clamp(2.5rem,6vw,4rem) 0; }
  .process-steps { grid-template-columns:repeat(2,1fr); }
  .about-stats-grid { grid-template-columns:1fr 1fr; }
  /* CTA buttons: stack full-width. flex:none kills the flex:1/max-width
     pair inherited from the 1024 row layout that made stacked buttons
     collapse into each other. */
  .cta-actions { flex-direction:column; align-items:stretch; }
  .cta-actions .btn { flex:none; width:100%; max-width:100%; justify-content:center; }
  .stats-grid { grid-template-columns:1fr; }
  .stat-card { flex-direction:column; text-align:center; }
  /* Hero metrics: centered 2×2 grid instead of a left-aligned stack */
  .hero-metrics {
    display:grid; grid-template-columns:1fr 1fr;
    gap:var(--sp-5) var(--sp-4);
    justify-items:center; text-align:center;
  }
  /* Hero buttons: full-width stacked so they can't crowd each other */
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions .btn { width:100%; justify-content:center; }
  .footer-main { grid-template-columns:1fr; }
  .footer-badge-row { flex-direction:column; }
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:1fr; }
  .error-404__actions { flex-direction:column;align-items:center; }
  /* Shop single-column on small phones */
  .products-grid { grid-template-columns:1fr; }
  .pcard__footer { flex-direction:column;align-items:flex-start;gap:var(--sp-3); }
  .pcard .button,.pcard a.button { width:100%;justify-content:center; }
}

/* ── Very small screens (360 px and below) ──────────────────── */
@media (max-width:360px) {
  .process-steps { grid-template-columns:1fr; }
  .portfolio-grid { grid-template-columns:1fr; }
  /* .hero-metrics stays a centered 2×2 grid (set at 480px) —
     the values are short enough to fit even at 320px wide */
  .footer-top-inner { flex-direction:column;gap:var(--sp-3); }
}

/* ── Mobile nav touch targets ────────────────────────────────── */
.mobile-nav li a {
  min-height:44px;
  display:flex;align-items:center;
}

/* ── Section CTA row (paired buttons under a section) ─────────
   Replaces the old inline text-align:center div — inline-block
   buttons had no vertical gap when they wrapped, so stacked
   buttons touched each other on mobile.                          */
.section-cta-row {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-3);
  margin-top:var(--sp-10);
}
@media (max-width:480px) {
  .section-cta-row { flex-direction:column; align-items:center; }
  .section-cta-row .btn { width:100%; max-width:340px; justify-content:center; }
}

/* ── Mobile alignment pass ────────────────────────────────────
   On a single narrow column, section intros that sit left-aligned
   next to a visual on desktop read better centered. Icon rows,
   checklists and cards inside stay left-aligned for readability. */
@media (max-width:768px) {
  .problem-rhs,
  .why-content,
  .sp-grid > div { text-align:center; }

  /* Re-left the content that shouldn't center */
  .problem-highlight-box,
  .why-features,
  .why-feature,
  .testimonial-card,
  .faq-list,
  .faq-item { text-align:left; }

  /* Centered blocks with internal flex rows */
  .why-reviews { justify-content:center; }
  .why-feature { text-align:left; }

  /* Tier footnote + CTA trust row read centered */
  .tier-footnote { text-align:center; }
  .cta-trust-row { justify-content:center; }
}


/* ════════════════════════════════════════════════════════════════
   CART & CHECKOUT — B2B Managers Premium
   ════════════════════════════════════════════════════════════════ */

/* ── Shared tokens ──────────────────────────────────────────── */
:root {
  --co-radius:    18px;
  --co-panel-bg: #ffffff;
  --co-border:   rgba(36,84,230,0.12);
  --co-shadow:   0 2px 24px rgba(36,84,230,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --co-gap:      40px;
}

/* ══════════════════════════════════════════════════════════════
   CART
══════════════════════════════════════════════════════════════ */

.wm-cart-wrap { padding: var(--sp-10) 0 var(--sp-16); }

.wm-cart {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--co-gap);
  align-items: start;
}

/* ── Trust strip ─────────────────────────────────────────────── */
.wm-cart-trust {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: rgba(36,84,230,0.04);
  border: 1px solid var(--co-border);
  border-radius: var(--r-xl);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--c-n500);
  flex-wrap: wrap;
}
.wm-cart-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wm-cart-trust__item svg { color: var(--c-teal); flex-shrink: 0; }
.wm-cart-trust__sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--c-n300);
}

/* ── Section head ────────────────────────────────────────────── */
.wm-cart__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.wm-cart__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--c-n900);
}
.wm-cart__continue {
  font-size: var(--text-sm);
  color: var(--c-p400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}
.wm-cart__continue:hover { color: var(--c-p600); }

/* ── Cart items ──────────────────────────────────────────────── */
.wm-cart-items { display: flex; flex-direction: column; gap: var(--sp-4); }

.wm-citem {
  display: grid;
  grid-template-columns: 88px 1fr auto auto auto;
  gap: var(--sp-5);
  align-items: center;
  background: var(--co-panel-bg);
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  padding: var(--sp-5);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.wm-citem:hover {
  border-color: rgba(36,84,230,0.3);
  box-shadow: var(--co-shadow);
  transform: translateY(-1px);
}
.wm-citem.is-removing {
  opacity: 0;
  transform: translateX(20px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Visual */
.wm-citem__visual {
  width: 88px; height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-p50), var(--c-p100));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.wm-citem__visual img { width: 100%; height: 100%; object-fit: cover; }
.wm-citem__visual a { display: block; width: 100%; height: 100%; }
.wm-citem__icon { color: var(--c-p300); }
.wm-citem__badge {
  position: absolute;
  bottom: 4px; left: 4px;
  background: linear-gradient(135deg, var(--c-p500), var(--c-teal));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 3px;
}
.wm-citem__badge svg { flex-shrink: 0; }

/* Info */
.wm-citem__info { min-width: 0; }
.wm-citem__cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-teal);
  margin-bottom: 4px;
}
.wm-citem__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-n900);
  margin-bottom: 4px;
  line-height: 1.35;
}
.wm-citem__name a { color: inherit; text-decoration: none; }
.wm-citem__name a:hover { color: var(--c-p500); }
.wm-citem__delivery {
  font-size: 0.72rem;
  color: var(--c-n400);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.wm-citem__delivery::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
}

/* Quantity — sold individually badge */
.wm-qty-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-p50);
  border: 1px solid var(--co-border);
  border-radius: 10px;
  padding: 6px 14px;
  gap: 2px;
}
.wm-qty-badge__label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-n400); }
.wm-qty-badge__num { font-size: var(--text-lg); font-weight: 700; color: var(--c-p500); line-height: 1; }

/* Quantity stepper */
.wm-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--co-border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.wm-qty-stepper__btn {
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-p500);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.wm-qty-stepper__btn:hover { background: var(--c-p50); }
.wm-qty-stepper__input {
  width: 48px;
  border: none;
  border-left: 1px solid var(--co-border);
  border-right: 1px solid var(--co-border);
  text-align: center;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--c-n900);
  padding: 0;
  height: 36px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.wm-qty-stepper__input::-webkit-outer-spin-button,
.wm-qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Pricing */
.wm-citem__pricing { text-align: right; white-space: nowrap; }
.wm-citem__subtotal { font-size: var(--text-lg); font-weight: 700; color: var(--c-n900); }
.wm-citem__regular {
  font-size: var(--text-sm);
  color: var(--c-n400);
  text-decoration: line-through;
  margin-top: 2px;
}

/* Remove button */
.wm-citem__actions { display: flex; align-items: center; }
.wm-citem__remove {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-n400);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;
}
.wm-citem__remove:hover { color: #e53e3e; background: #fff0f0; }

/* ── Cart actions row ────────────────────────────────────────── */
.wm-cart-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}

/* Coupon accordion */
.wm-coupon-wrap { flex: 1; min-width: 200px; }
.wm-coupon-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px dashed var(--co-border);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-p400);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.wm-coupon-toggle:hover { background: var(--c-p50); border-style: solid; }
.wm-coupon-toggle .wm-coupon-toggle__chevron {
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  margin-left: auto;
}
.wm-coupon-toggle[aria-expanded="true"] .wm-coupon-toggle__chevron { transform: rotate(180deg); }

.wm-coupon-body {
  margin-top: var(--sp-3);
  animation: fadeSlideDown 0.25s ease;
}
.wm-coupon-body[hidden] { display: none; }
.wm-coupon-inner {
  display: flex;
  gap: var(--sp-2);
}
.wm-coupon-input {
  flex: 1;
  border: 1px solid var(--co-border);
  border-radius: 10px;
  padding: 11px 16px;
  font-size: var(--text-sm);
  background: #fff;
  color: var(--c-n900);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wm-coupon-input:focus {
  outline: none;
  border-color: var(--c-p400);
  box-shadow: 0 0 0 3px rgba(36,84,230,0.1);
}
.wm-coupon-btn {
  background: var(--grad-vivid);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  white-space: nowrap;
}
.wm-coupon-btn:hover { opacity: 0.88; transform: translateY(-1px); }

/* Update cart button */
.wm-cart-update { display: flex; }
.wm-cart-update-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--co-border);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-n600);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.wm-cart-update-btn:hover { color: var(--c-p500); border-color: var(--c-p300); background: var(--c-p50); }

/* ── Order Panel (right sidebar) ────────────────────────────── */
.wm-cart__aside { position: sticky; top: 100px; }

.wm-order-panel {
  padding: var(--sp-6);
  border-radius: var(--co-radius);
}
.wm-order-panel__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--sp-5);
  color: var(--c-n900);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--co-border);
}

.wm-order-lines { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.wm-order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--c-n600);
}
.wm-order-line__val { font-weight: 600; color: var(--c-n900); }
.wm-order-line--discount .wm-order-line__label { color: var(--c-teal); }
.wm-order-line--discount .wm-order-line__val--green { color: var(--c-teal); font-weight: 700; }
.wm-order-line--total {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--co-border);
  margin-top: var(--sp-2);
}
.wm-order-line--total .wm-order-line__label { font-size: var(--text-base); font-weight: 700; color: var(--c-n900); }
.wm-order-line--total .wm-order-line__val { font-size: var(--text-xl); font-weight: 800; color: var(--c-p500); }

.wm-checkout-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-base);
  font-weight: 700;
  border-radius: var(--r-full);
  text-decoration: none;
  margin-bottom: var(--sp-5);
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
}
.wm-checkout-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(36,84,230,0.3); opacity: 0.92; }

.wm-panel-trust {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--co-border);
  margin-bottom: var(--sp-4);
}
.wm-panel-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--c-n500);
}
.wm-panel-trust__item svg { color: var(--c-teal); flex-shrink: 0; }

.wm-payment-logos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--co-border);
}
.wm-pay-logo {
  width: 46px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 0.75;
  transition: opacity 0.15s;
}
.wm-pay-logo:hover { opacity: 1; }

/* ── Upsell strip ────────────────────────────────────────────── */
.wm-cart-upsells { margin-top: var(--sp-10); }
.wm-cart-upsells__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}
.wm-cart-upsells__title { font-size: var(--text-xl); font-weight: 700; color: var(--c-n900); }
.wm-cart-upsells__all { font-size: var(--text-sm); color: var(--c-p400); text-decoration: none; font-weight: 600; }
.wm-cart-upsells__all:hover { color: var(--c-p600); }

.wm-cart-upsells__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}
.wm-up-card {
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.2s;
}
.wm-up-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(36,84,230,0.1);
  border-color: rgba(36,84,230,0.3);
}
.wm-up-card__visual {
  height: 100px;
  background: linear-gradient(135deg, var(--c-p50) 0%, var(--c-p100) 60%, rgba(36,84,230,0.06) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.wm-up-card__visual img { width: 100%; height: 100%; object-fit: cover; }
.wm-up-card__visual a { display: block; width: 100%; height: 100%; }
.wm-up-card__icon { color: var(--c-p300); }
.wm-up-card__badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--grad-vivid);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border-radius: 20px;
}
.wm-up-card__body { padding: var(--sp-3) var(--sp-4); flex: 1; }
.wm-up-card__cat { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-teal); margin-bottom: 4px; }
.wm-up-card__name { font-size: 0.85rem; font-weight: 700; color: var(--c-n900); margin-bottom: 6px; line-height: 1.35; }
.wm-up-card__name a { color: inherit; text-decoration: none; }
.wm-up-card__excerpt { font-size: 0.75rem; color: var(--c-n500); line-height: 1.5; }
.wm-up-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--co-border);
  gap: var(--sp-2);
}
.wm-up-card__price { font-size: var(--text-sm); font-weight: 700; color: var(--c-n900); }
.wm-up-card__btn { font-size: 0.74rem !important; padding: 6px 14px !important; white-space: nowrap; }

/* ── Empty cart ──────────────────────────────────────────────── */
.wm-cart-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: var(--sp-12) var(--sp-6);
}
.wm-cart-empty__inner {
  text-align: center;
  max-width: 520px;
  padding: var(--sp-12) var(--sp-10);
  border-radius: 24px;
}
.wm-cart-empty__icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--sp-6);
}
.wm-cart-empty__svg { width: 120px; height: 120px; }
.wm-cart-empty__orb {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(36,84,230,0.08), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: pulse 3s ease-in-out infinite;
}
.wm-cart-empty__heading { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--sp-3); }
.wm-cart-empty__sub { color: var(--c-n500); font-size: var(--text-base); margin-bottom: var(--sp-8); line-height: 1.6; }
.wm-cart-empty__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-8); }
.wm-cart-empty__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--c-n400);
}
.wm-cart-empty__links a { color: var(--c-p400); text-decoration: none; font-weight: 500; }
.wm-cart-empty__links a:hover { color: var(--c-p600); text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   CHECKOUT
══════════════════════════════════════════════════════════════ */

.wm-checkout-wrap { padding: var(--sp-8) 0 var(--sp-16); }

/* ── Progress steps ──────────────────────────────────────────── */
.wm-checkout-steps { margin-bottom: var(--sp-8); }
.wm-checkout-steps__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.wm-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wm-step__bubble {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--co-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--c-n400);
  transition: all 0.2s;
  text-decoration: none;
}
.wm-step--active .wm-step__bubble {
  background: var(--grad-vivid);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(36,84,230,0.35);
}
.wm-step--done .wm-step__bubble {
  background: var(--c-teal);
  border-color: transparent;
  color: #fff;
}
.wm-step__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-n400);
  white-space: nowrap;
}
.wm-step--active .wm-step__label { color: var(--c-p500); }
.wm-step--done .wm-step__label { color: var(--c-teal); }
.wm-step__connector {
  height: 2px;
  width: 80px;
  background: var(--co-border);
  margin: 0 8px;
  align-self: flex-start;
  margin-top: 17px;
}
.wm-step__connector--done { background: var(--c-teal); }

/* ── Layout ──────────────────────────────────────────────────── */
.wm-co-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--co-gap);
  align-items: start;
}
.wm-co-right { position: sticky; top: 90px; }

/* ── Login notice ────────────────────────────────────────────── */
.wm-co-login-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: 12px;
  margin-bottom: var(--sp-5);
}
.wm-co-login-notice__icon {
  width: 38px; height: 38px;
  background: var(--c-p50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-p500);
  flex-shrink: 0;
}
.wm-co-login-notice__body { font-size: var(--text-sm); }
.wm-co-login-notice__body strong { display: block; margin-bottom: 2px; color: var(--c-n900); }
.wm-login-toggle { color: var(--c-p400); font-weight: 600; text-decoration: none; }
.wm-login-toggle:hover { color: var(--c-p600); text-decoration: underline; }

.wm-co-login-form {
  background: var(--c-p50);
  border: 1px solid var(--co-border);
  border-radius: 14px;
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  animation: fadeSlideDown 0.25s ease;
}
.wm-co-login-form[hidden] { display: none; }

/* ── Section card ────────────────────────────────────────────── */
.wm-co-section {
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--co-shadow);
}
.wm-co-section__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--co-border);
}
.wm-co-section__head--small { margin-bottom: var(--sp-4); padding-bottom: var(--sp-4); }
.wm-co-step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grad-vivid);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wm-co-section__title { font-size: var(--text-lg); font-weight: 700; color: var(--c-n900); line-height: 1; margin-bottom: 4px; }
.wm-co-section__sub { font-size: 0.78rem; color: var(--c-n400); margin: 0; }

/* ── Billing field layout ────────────────────────────────────── */
.wm-co-fields .form-row { margin-bottom: var(--sp-4) !important; }

/* Two-column billing grid */
#billing_first_name_field,
#billing_last_name_field {
  width: calc(50% - var(--sp-2)) !important;
  display: inline-block;
}
#billing_first_name_field { margin-right: var(--sp-4) !important; }

/* ── Floating label inputs ───────────────────────────────────── */
.wm-co-fields .form-row {
  position: relative;
  margin: 0 0 var(--sp-4) !important;
}
.wm-co-fields .form-row label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-n400);
  pointer-events: none;
  transition: top 0.18s ease, font-size 0.18s ease, color 0.18s ease, transform 0.18s ease;
  background: transparent;
  z-index: 1;
  padding: 0 2px;
  white-space: nowrap;
}
.wm-co-fields .form-row label .optional {
  font-size: 0.75em;
  font-style: italic;
  color: var(--c-n400);
}
.wm-co-fields .form-row label abbr { display: none; } /* hide required * */

/* Elevated state: focused or has value */
.wm-co-fields .form-row.wm-focused label,
.wm-co-fields .form-row.wm-has-value label {
  top: 10px;
  transform: translateY(0);
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--c-p400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fff;
  padding: 0 4px;
  left: 10px;
}

.wm-co-fields .form-row.wm-focused.woocommerce-invalid label,
.wm-co-fields .form-row.wm-has-value.woocommerce-invalid label { color: #e53e3e; }

/* Input styles */
.wm-co-fields .form-row input[type="text"],
.wm-co-fields .form-row input[type="email"],
.wm-co-fields .form-row input[type="tel"],
.wm-co-fields .form-row input[type="password"],
.wm-co-fields .form-row textarea {
  display: block;
  width: 100%;
  height: 54px;
  padding: 22px 14px 8px;
  border: 1.5px solid var(--co-border);
  border-radius: 12px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--c-n900);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
  box-shadow: none;
}
.wm-co-fields .form-row textarea { height: auto; min-height: 90px; resize: vertical; padding-top: 28px; }
.wm-co-fields .form-row input:focus,
.wm-co-fields .form-row textarea:focus {
  border-color: var(--c-p400);
  box-shadow: 0 0 0 3px rgba(36,84,230,0.1);
}
.wm-co-fields .woocommerce-invalid input,
.wm-co-fields .woocommerce-invalid textarea {
  border-color: #e53e3e !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,0.1) !important;
}
.wm-co-fields .woocommerce-validated input,
.wm-co-fields .woocommerce-validated textarea {
  border-color: var(--c-teal) !important;
  box-shadow: 0 0 0 3px rgba(36,84,230,0.08) !important;
}

/* Validation icons */
.wm-co-fields .form-row.woocommerce-validated::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300c9b1' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}

/* Select fields */
.wm-co-fields .form-row select {
  display: block;
  width: 100%;
  height: 54px;
  padding: 14px 40px 8px 14px;
  border: 1.5px solid var(--co-border);
  border-radius: 12px;
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--c-n900);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237040a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
  appearance: none;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wm-co-fields .form-row select:focus {
  border-color: var(--c-p400);
  box-shadow: 0 0 0 3px rgba(36,84,230,0.1);
}

/* select2 override */
.wm-co-fields .select2-container .select2-selection--single {
  height: 54px !important;
  border: 1.5px solid var(--co-border) !important;
  border-radius: 12px !important;
  padding-top: 22px;
  padding-left: 14px;
}
.wm-co-fields .select2-container .select2-selection--single .select2-selection__rendered {
  line-height: normal;
  padding: 0;
  font-size: var(--text-base);
  color: var(--c-n900);
}
.wm-co-fields .select2-container .select2-selection--single .select2-selection__arrow {
  height: 54px;
  top: 0;
}
.wm-co-fields .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-p400) !important;
  box-shadow: 0 0 0 3px rgba(36,84,230,0.1) !important;
}

/* ── Coupon section ──────────────────────────────────────────── */
.wm-co-section--coupon { padding: 0; overflow: hidden; }
.wm-co-coupon-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-p400);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.wm-co-coupon-toggle:hover { background: var(--c-p50); }
.wm-co-coupon-toggle__chevron {
  margin-left: auto;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.wm-co-coupon-toggle[aria-expanded="true"] .wm-co-coupon-toggle__chevron { transform: rotate(180deg); }

.wm-co-coupon-body { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--co-border); }
.wm-co-coupon-body[hidden] { display: none; }

/* ── Right Sidebar ───────────────────────────────────────────── */
.wm-co-sidebar {
  background: #fff;
  border: 1px solid var(--co-border);
  border-radius: var(--co-radius);
  overflow: hidden;
  box-shadow: var(--co-shadow);
}

.wm-co-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--co-border);
  background: var(--c-p50);
}
.wm-co-summary-head h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--c-n900);
}
.wm-co-summary-edit {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--c-p400);
  text-decoration: none;
}
.wm-co-summary-edit:hover { color: var(--c-p600); }

/* ── Review order items ──────────────────────────────────────── */
.wm-co-review { padding: 0; }

.wm-review-order { }

.wm-review-items {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--co-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.wm-review-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}
.wm-review-item__thumb {
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-p50), var(--c-p100));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.wm-review-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.wm-review-item__icon { color: var(--c-p300); }
.wm-review-item__qty-badge {
  position: absolute;
  top: -4px; right: -4px;
  background: var(--c-p500);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.wm-review-item__cat { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-teal); margin-bottom: 3px; }
.wm-review-item__name { font-size: 0.83rem; font-weight: 700; color: var(--c-n900); line-height: 1.3; }
.wm-review-item__x { color: var(--c-n400); font-weight: 400; }
.wm-review-item__meta { margin-top: 4px; }
.wm-review-item__digital {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  color: var(--c-teal);
  font-weight: 600;
}
.wm-review-item__price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-n900);
  white-space: nowrap;
}

/* ── Review totals ───────────────────────────────────────────── */
.wm-review-totals {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--co-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.wm-review-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--c-n600);
}
.wm-review-line--discount { color: var(--c-teal); }
.wm-review-line__green { color: var(--c-teal); font-weight: 700; }
.wm-review-line--total {
  padding-top: var(--sp-3);
  border-top: 2px solid var(--co-border);
  margin-top: var(--sp-1);
}
.wm-review-line--total span:first-child { font-size: var(--text-base); font-weight: 700; color: var(--c-n900); }
.wm-review-total-amt { font-size: var(--text-xl); font-weight: 800; color: var(--c-p500); }
.wm-review-total-amt .amount { font-size: inherit !important; }

/* ── Payment section ─────────────────────────────────────────── */
#payment,
.wm-co-payment {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Payment method heading */
#payment .woocommerce-checkout-review-order-table { display: none !important; } /* hidden — we have custom summary above */

#payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--co-border);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
#payment ul.payment_methods li.payment_method {
  border: 1.5px solid var(--co-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
  background: #fff;
}
#payment ul.payment_methods li.payment_method:has(input:checked),
#payment ul.payment_methods li.payment_method.active-payment {
  border-color: var(--c-p400);
  box-shadow: 0 0 0 3px rgba(36,84,230,0.08);
}
#payment ul.payment_methods li label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--c-n900);
}
#payment ul.payment_methods li label input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--c-p500);
  flex-shrink: 0;
}
#payment ul.payment_methods li label img {
  max-height: 22px;
  width: auto;
  object-fit: contain;
  margin-left: auto;
}
#payment .payment_box {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--c-n600);
}

/* Place order button */
#payment #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - var(--sp-12));
  margin: var(--sp-4) var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: var(--grad-vivid);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
  box-shadow: 0 4px 20px rgba(36,84,230,0.3);
  letter-spacing: 0.02em;
}
#payment #place_order:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(36,84,230,0.4);
}
#payment #place_order:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(36,84,230,0.3);
}
#payment #place_order[disabled],
#payment #place_order.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── Checkout trust ──────────────────────────────────────────── */
.wm-co-trust {
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
}
.wm-co-trust__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.wm-co-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--c-n500);
  font-weight: 500;
}
.wm-co-trust__item svg { color: var(--c-teal); }
.wm-co-trust__note { font-size: 0.7rem; color: var(--c-n400); line-height: 1.5; margin: 0; }

/* ── Thank you page ──────────────────────────────────────────── */
.wm-thankyou-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: linear-gradient(135deg, rgba(36,84,230,0.06), rgba(36,84,230,0.04));
  border: 1px solid rgba(36,84,230,0.2);
  border-radius: 14px;
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.wm-thankyou-notice__icon {
  width: 52px; height: 52px;
  background: rgba(36,84,230,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
  flex-shrink: 0;
}
.wm-thankyou-notice__body strong { display: block; font-size: var(--text-lg); font-weight: 700; margin-bottom: 6px; color: var(--c-n900); }
.wm-thankyou-notice__body p { font-size: var(--text-sm); color: var(--c-n600); margin: 0; line-height: 1.6; }

/* ── Loader overlay during checkout ─────────────────────────── */
.woocommerce-checkout-payment .blockOverlay {
  border-radius: var(--co-radius) !important;
}
.blockOverlay::after {
  content: '';
  display: block;
  width: 28px; height: 28px;
  border: 3px solid rgba(36,84,230,0.2);
  border-top-color: var(--c-p500);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Woo notices in cart/checkout ───────────────────────────── */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: 12px !important;
  border-left-width: 4px !important;
  padding: var(--sp-4) var(--sp-5) !important;
  margin-bottom: var(--sp-5) !important;
  font-size: var(--text-sm) !important;
}
.woocommerce-error   { border-left-color: #e53e3e !important; background: #fff5f5 !important; color: #c53030 !important; }
.woocommerce-message { border-left-color: var(--c-teal) !important; background: rgba(36,84,230,0.05) !important; color: var(--c-n800) !important; }
.woocommerce-info    { border-left-color: var(--c-p400) !important; background: var(--c-p50) !important; color: var(--c-n800) !important; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Cart & Checkout
══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .wm-cart { grid-template-columns: 1fr 340px; }
  .wm-co-layout { grid-template-columns: 1fr 360px; }
  .wm-cart-upsells__grid { grid-template-columns: repeat(2, 1fr); }
  .wm-step__connector { width: 48px; }
}

@media (max-width: 900px) {
  .wm-cart { grid-template-columns: 1fr; }
  .wm-cart__aside { position: static; }
  .wm-co-layout { grid-template-columns: 1fr; }
  .wm-co-right { position: static; }
}

@media (max-width: 768px) {
  .wm-citem {
    grid-template-columns: 72px 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--sp-3);
  }
  .wm-citem__qty-wrap  { grid-column: 2; grid-row: 2; }
  .wm-citem__pricing   { grid-column: 2; grid-row: 3; text-align: left; }
  .wm-citem__actions   { position: absolute; top: var(--sp-4); right: var(--sp-4); }
  .wm-cart-upsells__grid { grid-template-columns: 1fr 1fr; }
  .wm-checkout-steps__track { gap: 0; }
  .wm-step__connector { width: 32px; }
  .wm-co-section { padding: var(--sp-5); }
  #billing_first_name_field,
  #billing_last_name_field { width: 100% !important; display: block; }
  #billing_first_name_field { margin-right: 0 !important; }
}

@media (max-width: 480px) {
  .wm-cart-upsells__grid { grid-template-columns: 1fr; }
  .wm-cart-trust { display: none; }
  .wm-cart__section-head { flex-direction: column; gap: var(--sp-2); align-items: flex-start; }
  .wm-citem { grid-template-columns: 64px 1fr; }
  .wm-step__label { display: none; }
  .wm-co-trust__row { flex-direction: column; gap: var(--sp-2); }
}


/* ════════════════════════════════════════════════════════════════
   SINGLE PRODUCT — GALLERY & DEMO BUTTON
   ════════════════════════════════════════════════════════════════ */

/* ── Product gallery ─────────────────────────────────────────── */
.sp-gallery {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(36,84,230,0.12);
  background: var(--c-slate50);
  margin-bottom: var(--sp-4);
}

/* Main image container */
.sp-gallery__main {
  position: relative;
  background: linear-gradient(140deg, var(--c-p50) 0%, var(--c-p100) 55%, rgba(36,84,230,0.07) 100%);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-gallery__main-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.sp-gallery__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease;
}
.sp-gallery__main:hover .sp-gallery__main-img { transform: scale(1.03); }

/* Zoom hint icon */
.sp-gallery__zoom-hint {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.sp-gallery__main-link:hover .sp-gallery__zoom-hint {
  opacity: 1;
  transform: scale(1);
}

/* Image swap transition */
.sp-gallery__main-img.is-transitioning {
  opacity: 0;
  transform: scale(0.97);
}

/* Placeholder when no featured image */
.sp-gallery__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Thumbnail strip */
.sp-gallery__thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  background: rgba(36,84,230,0.03);
  border-top: 1px solid rgba(36,84,230,0.08);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(36,84,230,0.2) transparent;
}
.sp-gallery__thumbs::-webkit-scrollbar { height: 4px; }
.sp-gallery__thumbs::-webkit-scrollbar-track { background: transparent; }
.sp-gallery__thumbs::-webkit-scrollbar-thumb { background: rgba(36,84,230,0.2); border-radius: 2px; }

.sp-gallery__thumb {
  flex-shrink: 0;
  width: 68px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
  position: relative;
}
.sp-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.sp-gallery__thumb:hover {
  border-color: rgba(36,84,230,0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(36,84,230,0.15);
}
.sp-gallery__thumb.is-active {
  border-color: var(--c-p500);
  box-shadow: 0 0 0 3px rgba(36,84,230,0.15);
}
.sp-gallery__thumb.is-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(36,84,230,0.1);
  border-radius: 6px;
  pointer-events: none;
}

/* ── Lightbox overlay ────────────────────────────────────────── */
.wm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,11,21,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: var(--sp-6);
}
.wm-lightbox.is-open {
  opacity: 1;
  pointer-events: all;
}
.wm-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.wm-lightbox.is-open .wm-lightbox__img { transform: scale(1); }
.wm-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  font-size: 1.2rem;
}
.wm-lightbox__close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }

/* ── Demo button ─────────────────────────────────────────────── */
.sp-demo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: transparent;
  border: 1.5px solid rgba(36,84,230,0.45);
  color: var(--c-teal);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s, transform 0.18s;
}
.sp-demo-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(36,84,230,0.06), rgba(36,84,230,0.04));
  opacity: 0;
  transition: opacity 0.22s;
}
.sp-demo-btn:hover {
  border-color: var(--c-teal);
  background: rgba(36,84,230,0.06);
  box-shadow: 0 4px 18px rgba(36,84,230,0.2);
  transform: translateY(-1px);
  color: var(--c-teal);
}
.sp-demo-btn:hover::before { opacity: 1; }

/* Live pulse dot */
.sp-demo-btn__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-teal);
  flex-shrink: 0;
  position: relative;
}
.sp-demo-btn__dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(36,84,230,0.35);
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.8); opacity: 0; }
}

.sp-demo-btn__arrow {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.18s;
}
.sp-demo-btn:hover .sp-demo-btn__arrow { transform: translate(2px, -2px); }

/* ── Responsive gallery ──────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-gallery__main { aspect-ratio: 16 / 10; }
  .sp-gallery__thumb { width: 56px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   LIGHTBOX — multi-image navigation upgrade
   ════════════════════════════════════════════════════════════════ */

/* Inner wrapper — centres the image */
.wm-lightbox__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── Counter ─────────────────────────────────────────────────── */
.wm-lightbox__counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 4px 14px;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Prev / Next nav buttons ─────────────────────────────────── */
.wm-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, transform 0.18s, opacity 0.18s;
  opacity: 0.75;
}
.wm-lightbox__nav:hover {
  background: rgba(36,84,230,0.55);
  border-color: rgba(36,84,230,0.6);
  opacity: 1;
  transform: translateY(-50%) scale(1.08);
}
.wm-lightbox__nav:focus-visible {
  outline: 2px solid #4D74FF;
  outline-offset: 3px;
}
.wm-lightbox__prev { left: 20px; }
.wm-lightbox__next { right: 20px; }

@media (max-width: 600px) {
  .wm-lightbox__prev { left: 10px; }
  .wm-lightbox__next { right: 10px; }
  .wm-lightbox__nav  { width: 42px; height: 42px; }
}

/* ── Slide transition keyframes ──────────────────────────────── */
.wm-lightbox__img.slide-out-left {
  animation: lbSlideOutLeft 0.22s ease forwards;
}
.wm-lightbox__img.slide-out-right {
  animation: lbSlideOutRight 0.22s ease forwards;
}
.wm-lightbox__img.slide-in-right {
  animation: lbSlideInRight 0.22s ease forwards;
}
.wm-lightbox__img.slide-in-left {
  animation: lbSlideInLeft 0.22s ease forwards;
}

@keyframes lbSlideOutLeft  { from { opacity:1; transform:scale(1) translateX(0);     } to { opacity:0; transform:scale(0.96) translateX(-40px); } }
@keyframes lbSlideOutRight { from { opacity:1; transform:scale(1) translateX(0);     } to { opacity:0; transform:scale(0.96) translateX(40px);  } }
@keyframes lbSlideInRight  { from { opacity:0; transform:scale(0.96) translateX(40px);  } to { opacity:1; transform:scale(1) translateX(0); } }
@keyframes lbSlideInLeft   { from { opacity:0; transform:scale(0.96) translateX(-40px); } to { opacity:1; transform:scale(1) translateX(0); } }

/* ── Zoom-hint cursor signals lightbox is available ─────────── */
.sp-gallery__main-link { cursor: zoom-in; }

/* ════════════════════════════════════════════════════════════════
   WM SERVICE HERO BLOCK  (wm/service-hero)
   ════════════════════════════════════════════════════════════════ */

.wm-sh {
  position: relative;
  overflow: hidden;
  background: var(--grad-dark);
  padding: clamp(80px, 12vw, 130px) 0 clamp(80px, 12vw, 140px);
  isolation: isolate;
}

/* ── Background orbs ──────────────────────────────────────────── */
.wm-sh__orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.wm-sh__orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(36,84,230,.30) 0%, transparent 70%);
  top: -200px; left: -180px;
}
.wm-sh__orb--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(36,84,230,.18) 0%, transparent 70%);
  bottom: -120px; right: -100px;
}
.wm-sh__orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(155,178,255,.12) 0%, transparent 70%);
  top: 40%; left: 45%;
}
.wm-sh__grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ── Two-column layout ────────────────────────────────────────── */
.wm-sh__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* ── Left column ─────────────────────────────────────────────── */
.wm-sh__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wm-sh__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-teal);
  background: rgba(36,84,230,.10);
  border: 1px solid rgba(36,84,230,.25);
  border-radius: var(--r-full);
  padding: 6px 16px 6px 10px;
  width: fit-content;
}
.wm-sh__eyebrow-dot {
  width: 7px; height: 7px;
  background: var(--c-teal);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(36,84,230,.25);
  animation: shPulse 2.4s ease-in-out infinite;
}
@keyframes shPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(36,84,230,.25); }
  50%       { box-shadow: 0 0 0 6px rgba(36,84,230,.08); }
}

.wm-sh__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--c-white);
  margin: 0;
}
.wm-sh__title strong {
  background: var(--grad-vivid);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wm-sh__desc {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: rgba(255,255,255,.60);
  margin: 0;
  max-width: 52ch;
}

/* Trust stats */
.wm-sh__trust {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wm-sh__trust-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.wm-sh__trust-num {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--c-white);
  line-height: 1;
  letter-spacing: -.01em;
}
.wm-sh__trust-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.wm-sh__trust-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
  margin: 0 24px;
}

/* CTA buttons */
.wm-sh__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.wm-sh__sec-cta {
  color: rgba(255,255,255,.70) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.wm-sh__sec-cta:hover {
  color: var(--c-white) !important;
  border-color: rgba(255,255,255,.40) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Scroll hint */
.wm-sh__scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: rgba(255,255,255,.25);
  margin-top: 8px;
}
.wm-sh__scroll-line {
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,.30), transparent);
}

/* ── Right column — form card ─────────────────────────────────── */
.wm-sh__form-col {
  position: relative;
}

.wm-sh__form-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-3xl);
  padding: clamp(28px, 4vw, 44px);
  box-shadow:
    0 32px 80px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Card header */
.wm-sh__form-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wm-sh__form-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: linear-gradient(135deg, rgba(36,84,230,.5), rgba(36,84,230,.3));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal);
}
.wm-sh__form-heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--c-white);
  margin: 0 0 4px;
  line-height: 1.3;
}
.wm-sh__form-subtext {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.50);
  margin: 0;
  line-height: 1.5;
}

/* Form body */
.wm-sh__form-body {
  margin-bottom: 20px;
}

/* Empty state placeholder */
.wm-sh__form-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 20px;
  border: 2px dashed rgba(255,255,255,.10);
  border-radius: var(--r-xl);
  color: rgba(255,255,255,.35);
  text-align: center;
}
.wm-sh__form-empty p { margin: 0; font-size: var(--text-sm); }
.wm-sh__form-empty code {
  font-size: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 4px 10px;
  border-radius: var(--r-md);
  color: var(--c-teal);
}

/* Card footer trust line */
.wm-sh__form-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,.35);
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Floating availability badge */
.wm-sh__badge {
  position: absolute;
  top: -18px;
  right: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  background: rgba(36,84,230,.12);
  border: 1px solid rgba(36,84,230,.28);
  backdrop-filter: blur(8px);
  border-radius: var(--r-full);
  padding: 5px 14px 5px 10px;
}
.wm-sh__badge-dot {
  width: 7px; height: 7px;
  background: var(--c-teal);
  border-radius: 50%;
  flex-shrink: 0;
  animation: shPulse 2s ease-in-out infinite;
}

/* ── Form plugin normalisation inside the card ────────────────── */
/* Works with Fluent Forms, WPForms Lite, Contact Form 7, and most
   shortcode-based form plugins. Override only colours & spacing. */

.wm-sh__form-body .ff-el-input--label label,
.wm-sh__form-body .wpforms-field-label,
.wm-sh__form-body label {
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.65) !important;
  margin-bottom: 6px !important;
}

.wm-sh__form-body input[type="text"],
.wm-sh__form-body input[type="email"],
.wm-sh__form-body input[type="tel"],
.wm-sh__form-body input[type="url"],
.wm-sh__form-body input[type="number"],
.wm-sh__form-body select,
.wm-sh__form-body textarea {
  width: 100% !important;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--r-lg) !important;
  color: var(--c-white) !important;
  font-size: var(--text-sm) !important;
  padding: 12px 16px !important;
  box-shadow: none !important;
  transition: border-color .2s, background .2s !important;
}
.wm-sh__form-body input:focus,
.wm-sh__form-body select:focus,
.wm-sh__form-body textarea:focus {
  outline: none !important;
  border-color: rgba(155,178,255,.55) !important;
  background: rgba(255,255,255,.09) !important;
}
.wm-sh__form-body input::placeholder,
.wm-sh__form-body textarea::placeholder {
  color: rgba(255,255,255,.28) !important;
}
.wm-sh__form-body textarea {
  min-height: 100px !important;
  resize: vertical !important;
}

/* Submit button */
.wm-sh__form-body button[type="submit"],
.wm-sh__form-body input[type="submit"],
.wm-sh__form-body .ff-btn-submit,
.wm-sh__form-body .wpforms-submit,
.wm-sh__form-body .wpcf7-submit {
  width: 100% !important;
  background: linear-gradient(135deg, var(--c-p600), var(--c-p400)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  padding: 14px 24px !important;
  cursor: pointer !important;
  transition: opacity .2s, transform .15s !important;
  box-shadow: 0 6px 20px rgba(36,84,230,.40) !important;
  letter-spacing: .01em !important;
}
.wm-sh__form-body button[type="submit"]:hover,
.wm-sh__form-body input[type="submit"]:hover,
.wm-sh__form-body .ff-btn-submit:hover,
.wm-sh__form-body .wpforms-submit:hover,
.wm-sh__form-body .wpcf7-submit:hover {
  opacity: .90 !important;
  transform: translateY(-1px) !important;
}

/* Field spacing */
.wm-sh__form-body .ff-el-group,
.wm-sh__form-body .wpforms-field,
.wm-sh__form-body .wpcf7-form-control-wrap,
.wm-sh__form-body p {
  margin-bottom: 10px !important;
  padding: 0 !important;
}

/* Error messages */
.wm-sh__form-body .ff-el-is-error .ff-el-form-control,
.wm-sh__form-body .wpforms-error input,
.wm-sh__form-body .wpcf7-not-valid {
  border-color: rgba(244,63,94,.55) !important;
}
.wm-sh__form-body .error,
.wm-sh__form-body .ff-el-help-message,
.wm-sh__form-body .wpforms-error-container,
.wm-sh__form-body .wpcf7-validation-errors {
  font-size: 12px !important;
  color: #f87171 !important;
  margin-top: 4px !important;
}

/* Success messages */
.wm-sh__form-body .ff-message-success,
.wm-sh__form-body .wpforms-confirmation-container,
.wm-sh__form-body .wpcf7-mail-sent-ok {
  background: rgba(36,84,230,.12) !important;
  border: 1px solid rgba(36,84,230,.25) !important;
  border-radius: var(--r-lg) !important;
  color: var(--c-teal) !important;
  padding: 14px 18px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wm-sh__layout { grid-template-columns: 1fr; gap: 56px; }
  .wm-sh__content { text-align: center; align-items: center; }
  .wm-sh__desc { max-width: 60ch; }
  .wm-sh__trust { justify-content: center; }
  .wm-sh__actions { justify-content: center; }
  .wm-sh__scroll-hint { display: none; }
  .wm-sh__form-col { max-width: 560px; margin: 0 auto; width: 100%; }
  .wm-sh__badge { right: 20px; }
}
@media (max-width: 600px) {
  .wm-sh__trust { flex-wrap: wrap; gap: 16px; }
  .wm-sh__trust-divider { display: none; }
  .wm-sh__trust-item { flex: 0 0 calc(50% - 8px); }
  .wm-sh__form-card { padding: 28px 20px; }
  .wm-sh__badge { position: static; margin-bottom: 16px; width: fit-content; }
}

/* ════════════════════════════════════════════════════════════════
   SERVICE ENTRY CONTENT — full-width block canvas
   ════════════════════════════════════════════════════════════════ */

/*
 * Wraps the_content() on single-service.php.
 * No container here — blocks manage their own max-width/padding.
 * Supports WordPress alignfull / alignwide block system.
 */
.service-entry-content {
  width: 100%;
  overflow-x: hidden; /* prevent horizontal scroll from orb bleed */
}

/* Default block content width (paragraphs, headings, etc.) */
.service-entry-content > .wp-block-group,
.service-entry-content > p,
.service-entry-content > h1,
.service-entry-content > h2,
.service-entry-content > h3,
.service-entry-content > ul,
.service-entry-content > ol {
  max-width: var(--container-width, 1200px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* alignfull blocks (like wm/service-hero) span the full viewport */
.service-entry-content > .alignfull,
.service-entry-content .wp-block.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* alignwide blocks */
.service-entry-content > .alignwide,
.service-entry-content .wp-block.alignwide {
  width: calc(100% + 80px);
  max-width: calc(100% + 80px);
  margin-left: -40px;
  margin-right: -40px;
}

/* wm/service-hero renders at 100% width naturally (uses .container internally)
   so no extra CSS needed — the block handles its own layout */
.service-entry-content .wm-sh {
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   SERVICE HERO — form full-width fix
   Forces every wrapper div / field container a form plugin injects
   to respect 100% width inside the glass card.
════════════════════════════════════════════════════════════════ */

/* Box-sizing reset for the entire form body */
.wm-sh__form-body,
.wm-sh__form-body *,
.wm-sh__form-body *::before,
.wm-sh__form-body *::after {
  box-sizing: border-box !important;
}

/* ── Fluent Forms wrappers ───────────────────────────────────── */
.wm-sh__form-body .ff-el-group,
.wm-sh__form-body .ff-el-input--label,
.wm-sh__form-body .ff-el-form-control,
.wm-sh__form-body .ff-field-container,
.wm-sh__form-body .ff-column-1,
.wm-sh__form-body .fluentform,
.wm-sh__form-body .ff-form-wrap,
.wm-sh__form-body .ff_form_fields_container,
.wm-sh__form-body .ff-el-section-break,
.wm-sh__form-body .ff-step-container,
.wm-sh__form-body .ff_submit_btn_container,
.wm-sh__form-body .ff-el-input {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* ── WPForms wrappers ────────────────────────────────────────── */
/* Only the outer form shell fills the card — inner field/row/column
   classes are intentionally left to WPForms so multi-column layouts
   like first name + last name side-by-side render correctly. */
.wm-sh__form-body .wpforms-form,
.wm-sh__form-body .wpforms-field-container,
.wm-sh__form-body .wpforms-submit-container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Field rows (e.g. first name + last name) fill the full card width */
.wm-sh__form-body .wpforms-field-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Each column block in the row stretches equally */
.wm-sh__form-body .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 0 !important; /* flex basis overrides width; forces equal share */
}
/* WPForms adds .wpforms-field-medium with an inline or stylesheet width —
   override it so it fills its flex column fully */
.wm-sh__form-body .wpforms-field-row .wpforms-field-medium,
.wm-sh__form-body .wpforms-field-row input.wpforms-field-medium,
.wm-sh__form-body .wpforms-field-row input[size] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ── Contact Form 7 wrappers ─────────────────────────────────── */
.wm-sh__form-body .wpcf7,
.wm-sh__form-body .wpcf7-form,
.wm-sh__form-body .wpcf7-form-control-wrap,
.wm-sh__form-body .wpcf7-form p,
.wm-sh__form-body span.wpcf7-form-control-wrap {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* ── Generic: outer shell only, not inner field columns ──────── */
/* Only the direct form child and top-level fieldsets fill the card.
   Deeper descendants keep their plugin-defined widths so column
   layouts (e.g. half-width name fields) are not broken. */
.wm-sh__form-body > div,
.wm-sh__form-body > form,
.wm-sh__form-body form > fieldset {
  width: 100% !important;
  max-width: 100% !important;
}
/* Top-level field group divs fill the card (single-column fields) */
.wm-sh__form-body form > div:not(.wpforms-field-row):not([class*="wpforms-field-row"]) {
  width: 100% !important;
  max-width: 100% !important;
}

/* ── Inputs, selects, textareas — belt-and-suspenders ────────── */
.wm-sh__form-body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]),
.wm-sh__form-body select,
.wm-sh__form-body textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Prevent any flex/grid child shrinkage */
.wm-sh__form-card {
  min-width: 0;
}
.wm-sh__form-body {
  width: 100%;
  min-width: 0;
}




/* ==========================================================================
   WM SERVICE BLOCKS — Frontend CSS  (light-background theme)
   Hero stays dark. All other blocks use white/slate light backgrounds.
   ========================================================================== */

/* ── Shared section helpers ─────────────────────────────────── */
.section {
  padding: var(--sp-3xl, 96px) 0;
}
.section--alt {
  background: var(--c-slate50, #f8fafc);
}
.section-header {
  text-align: center;
  margin-bottom: var(--sp-2xl, 64px);
}
/* On LIGHT backgrounds */
.section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  line-height: 1.2;
  margin: 0.5rem 0 0;
  letter-spacing: -0.02em;
}
.section-subtitle {
  color: var(--c-slate500, #64748b);
  font-size: 1.0625rem;
  margin: 1rem auto 0;
  max-width: 640px;
  line-height: 1.7;
}
/* Duplicate .eyebrow rule removed — canonical pill-style utility
   lives at top of the file (line ~174). .wm-si__eyebrow / .wm-si__eyebrow::before
   removed too — service-intro/render.php uses .eyebrow, not .wm-si__eyebrow,
   so those rules were dead code. */

/* ==========================================================================
   2. SERVICE INTRO  (.wm-si)
   ========================================================================== */
.wm-si {
  padding: var(--sp-3xl, 96px) 0;
  background: #fff;
}
.wm-si__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl, 64px);
  align-items: center;
}
.wm-si__grid--flip .wm-si__content { order: 2; }
.wm-si__grid--flip .wm-si__visual  { order: 1; }
.wm-si__heading {
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
}
.wm-si__body {
  color: var(--c-slate600, #475569);
  font-size: 1.0625rem;
  line-height: 1.75;
  margin: 0 0 2rem;
}

/* Visual card — keep a soft purple-tinted card on light bg */
.wm-si__visual { display: flex; justify-content: center; }
.wm-si__card {
  background: linear-gradient(135deg, var(--c-p50, #F2F5FF) 0%, #fff 100%);
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 20px;
  padding: 40px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 40px rgba(36,84,230,0.10);
}
.wm-si__card-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 28px;
}
/* Stats list inside the intro card — render template uses .wm-si__stats
   (the legacy .wm-si__card-stats selector was a class-name typo). */
.wm-si__stats,
.wm-si__card-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wm-si__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.wm-si__stat-num {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--c-p600, #2454E6);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  min-width: 52px;
}
.wm-si__stat-label {
  font-size: 0.875rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.4;
}

@media (max-width: 860px) {
  .wm-si__grid,
  .wm-si__grid--flip { grid-template-columns: 1fr; }
  .wm-si__grid--flip .wm-si__content,
  .wm-si__grid--flip .wm-si__visual { order: unset; }
  .wm-si__visual { justify-content: flex-start; }
  .wm-si__card { max-width: 100%; }
}

/* ==========================================================================
   3. SERVICE PROCESS  (.wm-sp)
   ========================================================================== */
.wm-sp {
  padding: var(--sp-3xl, 96px) 0;
  background: var(--c-slate50, #f8fafc);
}
.wm-sp .section-title  { color: var(--c-slate900, #0f172a); }
.wm-sp .section-subtitle { color: var(--c-slate500, #64748b); }

.wm-sp__steps {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.wm-sp__steps::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--c-p300, #9BB2FF) 0%, rgba(155,178,255,0.1) 100%);
}
.wm-sp__step {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding: 28px 0;
  position: relative;
  z-index: 1;
}
.wm-sp__step:last-child { padding-bottom: 0; }
.wm-sp__num {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-p200, #C5D3FF);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--c-p600, #2454E6);
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 12px rgba(36,84,230,0.12);
}
.wm-sp__num-icon { font-size: 1.375rem; line-height: 1; }
.wm-sp__body { flex: 1; padding-top: 8px; }
.wm-sp__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--c-slate900, #0f172a);
  margin: 0 0 0.5rem;
}
.wm-sp__desc {
  color: var(--c-slate500, #64748b);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 600px) {
  .wm-sp__steps { padding-left: 8px; }
  .wm-sp__steps::before { left: 20px; }
  .wm-sp__num { width: 42px; height: 42px; font-size: 0.875rem; }
  .wm-sp__num-icon { font-size: 1.125rem; }
}

/* ==========================================================================
   4. SERVICE DELIVERABLES  (.wm-sd)
   ========================================================================== */
.wm-sd {
  padding: var(--sp-3xl, 96px) 0;
  background: #fff;
}
.wm-sd .section-title   { color: var(--c-slate900, #0f172a); }
.wm-sd .section-subtitle { color: var(--c-slate500, #64748b); }

.wm-sd__grid { display: grid; gap: 14px; }
.wm-sd__grid--col-1 { grid-template-columns: 1fr; }
.wm-sd__grid--col-2 { grid-template-columns: 1fr 1fr; }

.wm-sd__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--c-slate50, #f8fafc);
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 12px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wm-sd__item:hover {
  background: var(--c-p50, #F2F5FF);
  border-color: var(--c-p200, #C5D3FF);
  box-shadow: 0 4px 16px rgba(36,84,230,0.08);
}
.wm-sd__check {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(36,84,230,0.1);
  border: 1.5px solid rgba(36,84,230,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-teal, #1E40D9);
}
.wm-sd__check svg { display: block; }
.wm-sd__text {
  font-size: 0.9375rem;
  color: var(--c-slate700, #334155);
  line-height: 1.5;
}
@media (max-width: 680px) {
  .wm-sd__grid--col-2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   5. WHY CHOOSE US  (.wm-sw)
   ========================================================================== */
.wm-sw {
  padding: var(--sp-3xl, 96px) 0;
  background: var(--c-slate50, #f8fafc);
}
.wm-sw .section-title   { color: var(--c-slate900, #0f172a); }
.wm-sw .section-subtitle { color: var(--c-slate500, #64748b); }

/* Flex card grid — cards sit side-by-side and wrap on smaller screens.
   Using flex (not grid) for consistency with the rest of the theme. */
.wm-sw__grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 2-col → ~50% each; 3-col → ~33% each.
   `min(...)` guards against fractional shrinkage on odd container widths. */
.wm-sw__grid--col-2 > .wm-sw__card {
  flex: 1 1 calc(50%  - 10px);
  max-width: calc(50%  - 10px);
}
.wm-sw__grid--col-3 > .wm-sw__card {
  flex: 1 1 calc(33.333% - 14px);
  max-width: calc(33.333% - 14px);
}

.wm-sw__card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.wm-sw__card:hover {
  border-color: var(--c-p200, #C5D3FF);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(36,84,230,0.12);
}
.wm-sw__icon { font-size: 2rem; line-height: 1; margin-bottom: 16px; }
.wm-sw__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-slate900, #0f172a);
  margin: 0 0 0.6rem;
}
.wm-sw__desc {
  font-size: 0.9375rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 900px) {
  .wm-sw__grid--col-3 > .wm-sw__card {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
  }
}
@media (max-width: 580px) {
  .wm-sw__grid--col-2 > .wm-sw__card,
  .wm-sw__grid--col-3 > .wm-sw__card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   6. SERVICE STATS  (.wm-ss)
   ========================================================================== */
.wm-ss {
  padding: var(--sp-2xl, 64px) 0;
}
/* Background variants */
.wm-ss--dark   {
  background: #fff;
}
.wm-ss--purple {
  background: var(--c-p50, #F2F5FF);
}
.wm-ss--teal   {
  background: #f0fdfa;
}

/* ── One-line row layout (icon chip + number + label) ────────
   NOTE: .wm-ss--dark is misleadingly named — the section background is
   actually #fff. So every variant here is designed for a LIGHT section. */
.wm-ss__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 18px;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem);
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 12px 32px rgba(36,84,230, 0.08);
}
.wm-ss--purple .wm-ss__row {
  background: linear-gradient(180deg, #fff 0%, var(--c-p50, #F2F5FF) 100%);
  border-color: var(--c-p200, #C5D3FF);
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 12px 32px rgba(36,84,230, 0.10);
}
.wm-ss--teal .wm-ss__row {
  background: linear-gradient(180deg, #fff 0%, #f0fdfa 100%);
  border-color: rgba(36,84,230, 0.25);
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 12px 32px rgba(36,84,230, 0.10);
}

.wm-ss__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  position: relative;
  padding: 0.25rem 0;
  transition: transform 0.25s ease;
}
.wm-ss__item:hover { transform: translateY(-2px); }

/* Vertical divider between items (not after the last) */
.wm-ss__item + .wm-ss__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * clamp(0.5rem, 1.5vw, 1.25rem));
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--c-slate200, #e2e8f0);
}
.wm-ss--purple .wm-ss__item + .wm-ss__item::before { background: var(--c-p200, #C5D3FF); }
.wm-ss--teal   .wm-ss__item + .wm-ss__item::before { background: rgba(36,84,230, 0.30); }

/* SVG icon chip — purple gradient looks great on any light background */
.wm-ss__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(36,84,230, 0.28),
    inset 0 1px 0 rgba(255,255,255, 0.20);
}
.wm-ss--teal .wm-ss__icon {
  background: linear-gradient(135deg, var(--c-teal, #1E40D9) 0%, #1E40D9 100%);
  box-shadow: 0 6px 16px rgba(36,84,230, 0.30), inset 0 1px 0 rgba(255,255,255, 0.20);
}
.wm-ss__icon .wm-icon { width: 22px; height: 22px; color: #fff !important; }

.wm-ss__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* The big number — purple primary on white card */
.wm-ss__num {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 900;
  color: var(--c-p700, #1E40D9);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.wm-ss--teal .wm-ss__num { color: #1A33A8; }

.wm-ss__label {
  font-size: 0.75rem;
  color: var(--c-slate600, #475569);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Responsive: 5 stats → 4 lines if cramped; 4 stats → keep one-line down
   to ~720px; below ~720px → 2-col grid; below ~500px → single column. */
@media (max-width: 1000px) {
  .wm-ss__row { gap: 1.25rem; padding: 1.25rem 1.5rem; }
  .wm-ss__row--count-5 .wm-ss__label { font-size: 0.68rem; letter-spacing: 0.04em; }
}
@media (max-width: 820px) {
  .wm-ss__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .wm-ss__item + .wm-ss__item::before { display: none; }
  .wm-ss__row--count-5 > .wm-ss__item:last-child {
    grid-column: span 2;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .wm-ss__row { grid-template-columns: 1fr; }
  .wm-ss__row--count-5 > .wm-ss__item:last-child { grid-column: span 1; }
}

/* ==========================================================================
   7. SERVICE TESTIMONIAL  (.wm-st)
   ========================================================================== */
.wm-st {
  padding: var(--sp-3xl, 96px) 0;
  background: var(--c-p50, #F2F5FF);
}
.wm-st__centered { max-width: 760px; margin: 0 auto; text-align: center; }
.wm-st__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl, 64px);
  align-items: center;
}
.wm-st__card {
  padding: 48px 44px;
  background: #fff;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 20px;
  box-shadow: 0 8px 40px rgba(36,84,230,0.08);
  position: relative;
  overflow: hidden;
}
.wm-st__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(155,178,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}
.wm-st__stars {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-bottom: 24px;
}
.wm-st--left .wm-st__stars { justify-content: flex-start; }
.wm-st__star { color: #f59e0b; font-size: 1.25rem; line-height: 1; }
.wm-st__star--empty { color: var(--c-slate200, #e2e8f0); }
.wm-st__quote {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--c-slate700, #334155);
  line-height: 1.75;
  font-style: italic;
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}
.wm-st__quote::before {
  content: '\201C';
  font-size: 4rem;
  color: rgba(36,84,230,0.2);
  line-height: 0;
  vertical-align: -0.55em;
  margin-right: 4px;
}
.wm-st__author {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.wm-st--centered .wm-st__author { justify-content: center; }
.wm-st__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-p400, #6E8DFF), var(--c-teal, #1E40D9));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.wm-st__name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-slate900, #0f172a);
  display: block;
}
.wm-st__role {
  font-size: 0.8125rem;
  color: var(--c-slate500, #64748b);
  display: block;
  margin-top: 2px;
}
@media (max-width: 760px) {
  .wm-st__split { grid-template-columns: 1fr; }
  .wm-st__card { padding: 36px 28px; }
}

/* ==========================================================================
   8. SERVICE PRICING  (.wm-spr)
   ========================================================================== */
.wm-spr {
  padding: var(--sp-3xl, 96px) 0;
  background: var(--c-slate50, #f8fafc);
}
.wm-spr__wrap {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-2xl, 64px);
  align-items: start;
}
.wm-spr__lead { padding-top: 16px; }
.wm-spr__intro-title {
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0.5rem 0 1rem;
}
.wm-spr__intro-sub {
  font-size: 1.0625rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.7;
  margin: 0;
}
/* Pricing card */
.wm-spr__card {
  background: #fff;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.07);
}
/* Render template uses both --popular AND --featured class names on the
   highlighted card; treat them as one. Same look in both cases. */
.wm-spr__card--popular,
.wm-spr__card--featured {
  border-color: var(--c-p300, #9BB2FF);
  box-shadow:
    0 0 0 3px rgba(155,178,255,0.18),
    0 8px 40px rgba(36,84,230,0.15);
  position: relative;
}
.wm-spr__badge {
  background: linear-gradient(90deg, var(--c-p600, #2454E6), var(--c-p400, #6E8DFF));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 20px;
  text-align: center;
}
/* Render emits .wm-spr__price-block; legacy CSS used .wm-spr__price-wrap.
   Style both names identically. */
.wm-spr__price-wrap,
.wm-spr__price-block {
  padding: 32px 36px 24px;
  border-bottom: 1px solid var(--c-slate100, #f1f5f9);
}
.wm-spr__price {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--c-slate900, #0f172a);
  letter-spacing: -0.04em;
  line-height: 1;
}
.wm-spr__period {
  font-size: 0.9375rem;
  color: var(--c-slate400, #94a3b8);
  margin-left: 6px;
  font-weight: 400;
}
.wm-spr__note {
  font-size: 0.8125rem;
  color: var(--c-slate400, #94a3b8);
  margin-top: 8px;
  display: block;
}
.wm-spr__features {
  padding: 24px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--c-slate100, #f1f5f9);
}
.wm-spr__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--c-slate700, #334155);
  line-height: 1.5;
}
/* Render emits .wm-spr__check; legacy CSS used .wm-spr__feature-icon.
   Style both names identically. */
.wm-spr__feature-icon,
.wm-spr__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(36,84,230, 0.12);
  color: var(--c-teal, #1E40D9);
}
.wm-spr__check svg,
.wm-spr__feature-icon svg { width: 14px; height: 14px; }
.wm-spr__actions {
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wm-spr__actions .btn { justify-content: center; text-align: center; }
@media (max-width: 860px) {
  .wm-spr__wrap { grid-template-columns: 1fr; }
  .wm-spr__price-wrap,
  .wm-spr__features,
  .wm-spr__actions { padding-left: 24px; padding-right: 24px; }
}

/* ==========================================================================
   9. SERVICE FAQ  (.wm-sf)
   ========================================================================== */
.wm-sf {
  padding: var(--sp-3xl, 96px) 0;
  background: #fff;
}
.wm-sf .section-title   { color: var(--c-slate900, #0f172a); }
.wm-sf .section-subtitle { color: var(--c-slate500, #64748b); }

.wm-sf__inner { max-width: var(--container, 1200px); margin: 0 auto; }
.wm-sf__list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-slate200, #e2e8f0);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.wm-sf__item { border-bottom: 1px solid var(--c-slate100, #f1f5f9); }
.wm-sf__item:last-child { border-bottom: none; }

.wm-sf__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 28px;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--c-slate800, #1F283D);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.5;
  transition: background .2s;
}
.wm-sf__question:hover { background: var(--c-slate50, #f8fafc); }
.wm-sf__question[aria-expanded="true"] {
  background: var(--c-p50, #F2F5FF);
  color: var(--c-p700, #1E40D9);
}
.wm-sf__chevron {
  flex-shrink: 0;
  transition: transform .3s ease;
  color: var(--c-slate400, #94a3b8);
}
.wm-sf__question[aria-expanded="true"] .wm-sf__chevron {
  transform: rotate(180deg);
  color: var(--c-p500, #4D74FF);
}
.wm-sf__answer { overflow: hidden; }
.wm-sf__answer[hidden] { display: none !important; }
/* Belt-and-braces: any future CSS that uses display: block !important
   on a wrapper class still respects the HTML5 hidden attribute. */
.wm-sf__answer[hidden]:not([open]) { display: none !important; }
.wm-sf__answer-inner {
  padding: 0 28px 22px;
  font-size: 0.9375rem;
  color: var(--c-slate600, #475569);
  line-height: 1.75;
}
.wm-sf__answer-inner p { margin: 0 0 0.75em; }
.wm-sf__answer-inner p:last-child { margin-bottom: 0; }

/* Editor preview */
.wm-sf__question-preview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--c-slate50, #f8fafc);
  border-radius: 8px;
  color: var(--c-slate800, #1F283D);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: default;
}
.wm-sf__answer-inner--preview {
  padding: 12px 24px 16px;
  font-size: 0.875rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.65;
}

/* ==========================================================================
   10. SERVICE CTA  (.wm-sc)
   ========================================================================== */
/* CTA stays dark/coloured — it's a conversion banner, not content */
.wm-sc {
  padding: var(--sp-3xl, 96px) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.wm-sc--purple {
  background: linear-gradient(135deg, #15213B 0%, #0F172A 50%, #10182B 100%);
}
.wm-sc--dark {
  background: #0B1120;
}
.wm-sc--teal {
  background: linear-gradient(135deg, #003832 0%, #001c1a 100%);
}
.wm-sc--gradient {
  background:
    radial-gradient(circle at 20% 30%, rgba(36,84,230,0.45) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(36,84,230,0.30) 0%, transparent 55%),
    linear-gradient(135deg, #15213B 0%, #0F172A 50%, #10182B 100%);
}
.wm-sc__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.wm-sc__orb--1 {
  width: 500px; height: 500px;
  top: -200px; left: -150px;
  background: radial-gradient(circle, rgba(155,178,255,0.18) 0%, transparent 70%);
}
.wm-sc__orb--2 {
  width: 400px; height: 400px;
  bottom: -180px; right: -100px;
  background: radial-gradient(circle, rgba(36,84,230,0.14) 0%, transparent 70%);
}
.wm-sc--teal .wm-sc__orb--1 {
  background: radial-gradient(circle, rgba(36,84,230,0.2) 0%, transparent 70%);
}
.wm-sc__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
/* CTA eyebrow — extends the .eyebrow utility (set in render.php with
   class="wm-sc__eyebrow eyebrow"). Only override what differs on a dark
   background: invert the pill colours so it reads on dark surfaces. */
.wm-sc__eyebrow {
  color: var(--c-teal, #1E40D9);
  background: rgba(36,84,230, 0.10);
  border-color: rgba(36,84,230, 0.25);
}
.wm-sc__eyebrow::before { background: var(--c-teal, #1E40D9); }
.wm-sc--purple .wm-sc__eyebrow {
  color: rgba(155,178,255, 0.95);
  background: rgba(155,178,255, 0.10);
  border-color: rgba(155,178,255, 0.25);
}
.wm-sc--purple .wm-sc__eyebrow::before { background: rgba(155,178,255, 0.95); }
.wm-sc--gradient .wm-sc__eyebrow {
  color: rgba(155,178,255, 0.95);
  background: rgba(36,84,230, 0.18);
  border-color: rgba(155,178,255, 0.30);
}
.wm-sc--gradient .wm-sc__eyebrow::before { background: var(--c-teal, #1E40D9); }
.wm-sc__heading {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}
.wm-sc__subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0 0 2.5rem;
}
.wm-sc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
/* Editor canvas */
.wm-sc--editing {
  background: linear-gradient(135deg, #15213B 0%, #0F172A 50%, #10182B 100%) !important;
}
.wm-sc--editing .btn { pointer-events: none; cursor: default; }

/* ==========================================================================
   11. SERVICE COMPARISON TABLE  (.wm-cmp)
   Modern, light, card-framed comparison with "us" column highlighted.
   ========================================================================== */
.wm-cmp {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: linear-gradient(180deg, #fafbff 0%, #F5F8FD 100%);
  position: relative;
  overflow: hidden;
}
.wm-cmp::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(36,84,230,0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(36,84,230,0.05) 0%, transparent 45%);
  pointer-events: none;
}
.wm-cmp__inner { position: relative; }

.wm-cmp__table-wrap {
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--c-p100, #E3EAFF);
  box-shadow: 0 12px 48px rgba(36,84,230,0.10), 0 2px 8px rgba(0,0,0,0.03);
  overflow: hidden;
  overflow-x: auto;
  /* Match the .container width so the section visually aligns with WM blocks */
  width: 100%;
  margin: 0 auto;
}

.wm-cmp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

/* Header row */
.wm-cmp__th {
  padding: 1.25rem 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-slate600, #475569);
  background: var(--c-p50, #F2F5FF);
  border-bottom: 2px solid var(--c-p100, #E3EAFF);
  white-space: nowrap;
}
.wm-cmp__th--feature {
  text-align: left;
  color: var(--c-slate700, #334155);
  background: #fff;
  border-right: 1px solid var(--c-p100, #E3EAFF);
  min-width: 200px;
}
.wm-cmp__th--us {
  position: relative;
  /* Extra top padding to make room for the "Us" pill that sits above
     the column label. Using padding (not a negative-top pill) so the
     pill is rendered INSIDE the table-wrap and isn't clipped by its
     `overflow: hidden`. */
  padding-top: 2.5rem;
  color: #fff;
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p700, #1E40D9) 100%);
  border-bottom-color: var(--c-p700, #1E40D9);
}
.wm-cmp__th--us::after {
  content: 'Us';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  /* The header cell forces uppercase on its content, but we want the
     pill to read as "Us" (mixed case) not "US". */
  text-transform: none;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--c-p700, #1E40D9);
  background: #fff;
  border: 1px solid var(--c-p200, #C5D3FF);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Body rows */
.wm-cmp__table tbody tr {
  border-bottom: 1px solid var(--c-slate100, #f1f5f9);
  transition: background 0.18s ease;
}
.wm-cmp__table tbody tr:last-child { border-bottom: none; }
.wm-cmp__table tbody tr:hover { background: rgba(242,245,255,0.4); }

.wm-cmp__row-label {
  padding: 1rem 1.25rem;
  text-align: left;
  font-weight: 600;
  color: var(--c-slate800, #1F283D);
  background: #fff;
  border-right: 1px solid var(--c-slate100, #f1f5f9);
  white-space: normal;
}

.wm-cmp__cell {
  padding: 1rem 1.25rem;
  text-align: center;
  color: var(--c-slate700, #334155);
  vertical-align: middle;
}
.wm-cmp__cell--us {
  background: linear-gradient(180deg, rgba(36,84,230,0.04) 0%, rgba(36,84,230,0.08) 100%);
  font-weight: 700;
  color: var(--c-p700, #1E40D9);
  border-left: 1px solid var(--c-p100, #E3EAFF);
  border-right: 1px solid var(--c-p100, #E3EAFF);
}

/* Yes / No / Partial icons */
.wm-cmp__yes,
.wm-cmp__no,
.wm-cmp__partial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}
.wm-cmp__yes {
  color: #fff;
  background: var(--c-teal, #1E40D9);
  box-shadow: 0 2px 8px rgba(36,84,230,0.30);
}
.wm-cmp__no {
  color: #fff;
  background: var(--c-slate300, #cbd5e1);
}
.wm-cmp__partial {
  color: var(--c-amber, #f59e0b);
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  font-size: 1.2rem;
  font-weight: 900;
}
.wm-cmp__cell--us .wm-cmp__yes {
  box-shadow: 0 4px 14px rgba(36,84,230,0.50);
  transform: scale(1.1);
}
.wm-cmp__text {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Mobile — let table scroll horizontally */
@media (max-width: 720px) {
  .wm-cmp__table { font-size: 0.85rem; }
  .wm-cmp__th, .wm-cmp__row-label, .wm-cmp__cell { padding: 0.875rem 0.75rem; }
  .wm-cmp__th--feature, .wm-cmp__row-label { min-width: 140px; }
}

/* Editor canvas */
.wm-cmp--editing {
  background: #f8fafc !important;
  padding: 2rem !important;
  border: 2px dashed var(--c-p200, #C5D3FF) !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   12. LONG-FORM PROSE SECTIONS  (.wm-prose-section)
   Server-side structure emitted by WMSS_Block_Builder::render_section():

     .wm-prose-section                            (outer section, full-width)
       ├─ h2                                       (section title, accent bar)
       ├─ p, ul, ol                                (intro / standalone prose)
       ├─ .wm-prose-subcards                       (responsive flex/grid)
       │    ├─ .wm-prose-subcard                   (one per H3 sub-section)
       │    │    ├─ h3 + accent dot                (sub-section title)
       │    │    └─ p / ul / ol                    (sub-section content)
       │    └─ .wm-prose-subcard …
       └─ p, ul, ol                                (closing prose if any)
   ========================================================================== */
.service-entry-content {
  color: var(--c-slate700, #334155);
}

/* Outer section — full-width, vertical rhythm, alternating wash. */
.wm-prose-section {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: transparent;
}
.service-entry-content > .wm-prose-section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(242,245,255,0.55) 0%, rgba(240,248,255,0.55) 100%);
}

/* Direct standalone prose (h2 / p / ul / ol) inside the section — these
   align to the same .container width every WM block uses (1200px). */
.wm-prose-section > h2,
.wm-prose-section > h3,
.wm-prose-section > h4,
.wm-prose-section > p,
.wm-prose-section > ul,
.wm-prose-section > ol,
/* Backward-compat: pre-seed direct children of .service-entry-content */
.service-entry-content > h2,
.service-entry-content > h3,
.service-entry-content > h4,
.service-entry-content > p,
.service-entry-content > ul,
.service-entry-content > ol {
  max-width: var(--container, 1200px);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--px, 1.5rem);
  padding-right: var(--px, 1.5rem);
  box-sizing: border-box;
}

/* H2 — section title with gradient accent bar. */
.wm-prose-section > h2,
.service-entry-content > h2 {
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-slate900, #0f172a);
  line-height: 1.2;
  margin: 0 auto 1.5rem;
  position: relative;
  padding-top: 0.5rem;
}
.service-entry-content > h2 { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 1rem; }

.wm-prose-section > h2::before,
.service-entry-content > h2::before {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  background: linear-gradient(90deg, var(--c-p600, #2454E6) 0%, var(--c-teal, #1E40D9) 100%);
  border-radius: 2px;
  margin-bottom: 1rem;
  margin-left: var(--px, 1.5rem);
  margin-right: var(--px, 1.5rem);
}

/* Body paragraphs / lists at section level. */
.wm-prose-section > p,
.service-entry-content > p {
  font-size: 1.0625rem;
  line-height: 1.78;
  color: var(--c-slate700, #334155);
  margin: 0 auto 1.25rem;
}
.wm-prose-section > p strong,
.service-entry-content > p strong { color: var(--c-slate900, #0f172a); font-weight: 700; }
.wm-prose-section > p a,
.wm-prose-section > ul a,
.wm-prose-section > ol a,
.service-entry-content > p a,
.service-entry-content > ul a,
.service-entry-content > ol a {
  color: var(--c-p600, #2454E6);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--c-p200, #C5D3FF);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.wm-prose-section > p a:hover,
.wm-prose-section > ul a:hover,
.wm-prose-section > ol a:hover,
.service-entry-content > p a:hover,
.service-entry-content > ul a:hover,
.service-entry-content > ol a:hover {
  color: var(--c-p700, #1E40D9);
  border-bottom-color: var(--c-p600, #2454E6);
}
.wm-prose-section > ul,
.wm-prose-section > ol,
.service-entry-content > ul,
.service-entry-content > ol {
  margin: 1.25rem auto 1.5rem;
  padding-left: calc(var(--px, 1.5rem) + 1.5rem);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--c-slate700, #334155);
}
.wm-prose-section > ul li,
.wm-prose-section > ol li,
.service-entry-content > ul li,
.service-entry-content > ol li { margin-bottom: 0.625rem; }
.wm-prose-section > ul li::marker,
.service-entry-content > ul li::marker { color: var(--c-p500, #4D74FF); }
.wm-prose-section > ol li::marker,
.service-entry-content > ol li::marker { color: var(--c-p600, #2454E6); font-weight: 700; }
.wm-prose-section > ul li strong,
.wm-prose-section > ol li strong,
.service-entry-content > ul li strong,
.service-entry-content > ol li strong { color: var(--c-slate900, #0f172a); font-weight: 700; }

/* ── SUBCARDS — true flexbox layout for heading-anchored cards ──
   IMPORTANT: WordPress wraps wp:group contents in an extra
   .wp-block-group__inner-container div, so we apply the flex layout to
   whichever wrapper actually holds the cards. Both selectors below
   become the flex container in either WP rendering path.
   Selectors are also doubled-up with .wp-block-group prefix to win
   specificity over WordPress's `.is-layout-* > *` rules. */

/* Outer wrapper — just sizing & padding, no flex when an inner container
   exists. When there's NO inner container (older Woo / theme.json), the
   outer wrapper IS the flex container (see the :not selector below). */
.wm-prose-subcards,
.wp-block-group.wm-prose-subcards {
  max-width: var(--container, 1200px) !important;
  width: 100%;
  margin: 1.75rem auto 0 !important;
  padding-left: var(--px, 1.5rem);
  padding-right: var(--px, 1.5rem);
  box-sizing: border-box;
}

/* The actual flex container — covers BOTH rendering paths:
   (A) WP added an .wp-block-group__inner-container — that's the flex parent.
   (B) WP did NOT add an inner container — the .wm-prose-subcards div is
       itself the flex parent (we use :has() if available, otherwise both
       selectors run and the harmless flex rule applies to whichever
       parent actually holds the cards). */
.wm-prose-subcards > .wp-block-group__inner-container,
.wp-block-group.wm-prose-subcards > .wp-block-group__inner-container,
.wm-prose-subcards:not(:has(> .wp-block-group__inner-container)),
.wp-block-group.wm-prose-subcards:not(:has(> .wp-block-group__inner-container)) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem) !important;
  /* If we're the inner container, we no longer need extra padding —
     the outer .wm-prose-subcards already added it. */
  padding: 0 !important;
  margin: 0 !important;
}

/* Browsers without :has() support — fall back to ALSO putting flex on
   the outer .wm-prose-subcards. Harmless when the inner container picks
   up the flex; necessary when it isn't there. */
@supports not (selector(:has(*))) {
  .wm-prose-subcards,
  .wp-block-group.wm-prose-subcards {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: flex-start;
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}

/* Cancel WP's layout-constrained / layout-flow rules that would force
   subcards to a single column. Applies to the flex children regardless
   of which wrapper became the flex parent. */
.wm-prose-subcards > *,
.wm-prose-subcards > .wp-block-group__inner-container > *,
.wp-block-group.wm-prose-subcards > *,
.wp-block-group.wm-prose-subcards > .wp-block-group__inner-container > * {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── SUBCARD — one flex card per heading-anchored chunk ──
   The subcard is itself a wp:group, so its contents are typically
   inside .wp-block-group__inner-container too. We style the outer for
   the card frame (border, shadow, padding) and apply column-flex to the
   inner container so its child blocks stack cleanly. */
.wm-prose-subcard,
.wp-block-group.wm-prose-subcard {
  /* Flex child of .wm-prose-subcards (grow, shrink, basis) */
  flex: 1 1 300px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;

  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 1.75rem) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 8px 24px rgba(36,84,230, 0.06);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex !important;
  flex-direction: column !important;
}
/* Inner container inside a subcard — flex column so children stack. */
.wm-prose-subcard > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
.wm-prose-subcard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  opacity: 0.9;
}
/* Alternating top-stripe colour for visual rhythm across the grid. */
.wm-prose-subcards > .wm-prose-subcard:nth-child(3n+2)::before {
  background: linear-gradient(90deg, var(--c-teal, #1E40D9) 0%, #1E40D9 100%);
}
.wm-prose-subcards > .wm-prose-subcard:nth-child(3n)::before {
  background: linear-gradient(90deg, var(--c-p400, #6E8DFF) 0%, var(--c-p600, #2454E6) 100%);
}

.wm-prose-subcard:hover {
  transform: translateY(-3px);
  border-color: var(--c-p200, #C5D3FF);
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 16px 36px rgba(36,84,230, 0.12),
    0 4px 12px rgba(36,84,230, 0.06);
}

/* H2 or H3 inside subcard — the card's title.
   Selectors use `.wm-prose-subcard h2/h3` (descendant, not direct child)
   so they apply whether or not WP added an inner container. */
.wm-prose-subcard h2,
.wm-prose-subcard h3 {
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 0.875rem;
  padding: 0;
  position: relative;
}
.wm-prose-subcard h2 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}
.wm-prose-subcard h3 {
  font-size: 1.0625rem;
}
/* Accent dot prefixed to the title, colour matches the card's top stripe */
.wm-prose-subcard h2::before,
.wm-prose-subcard h3::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-p600, #2454E6);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(36,84,230, 0.15);
}
.wm-prose-subcards .wm-prose-subcard:nth-child(3n+2) h2::before,
.wm-prose-subcards .wm-prose-subcard:nth-child(3n+2) h3::before {
  background: var(--c-teal, #1E40D9);
  box-shadow: 0 0 0 3px rgba(36,84,230, 0.18);
}
.wm-prose-subcards .wm-prose-subcard:nth-child(3n) h2::before,
.wm-prose-subcards .wm-prose-subcard:nth-child(3n) h3::before {
  background: var(--c-p400, #6E8DFF);
  box-shadow: 0 0 0 3px rgba(110,141,255, 0.18);
}

/* Body content inside subcard — descendant selectors so they apply
   whether or not WP wrapped them in .wp-block-group__inner-container. */
.wm-prose-subcard p,
.wm-prose-subcard ul,
.wm-prose-subcard ol {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--c-slate700, #334155);
  margin: 0 0 0.75rem;
  padding: 0;
}
.wm-prose-subcard p:last-child,
.wm-prose-subcard ul:last-child,
.wm-prose-subcard ol:last-child { margin-bottom: 0; }

.wm-prose-subcard ul,
.wm-prose-subcard ol { padding-left: 1.25rem; }
.wm-prose-subcard ul li,
.wm-prose-subcard ol li { margin-bottom: 0.4rem; }
.wm-prose-subcard ul li::marker { color: var(--c-p500, #4D74FF); }
.wm-prose-subcard ol li::marker { color: var(--c-p600, #2454E6); font-weight: 700; }
.wm-prose-subcard ul li strong,
.wm-prose-subcard ol li strong,
.wm-prose-subcard p strong { color: var(--c-slate900, #0f172a); font-weight: 700; }

.wm-prose-subcard p a,
.wm-prose-subcard ul a,
.wm-prose-subcard ol a {
  color: var(--c-p600, #2454E6);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--c-p200, #C5D3FF);
}
.wm-prose-subcard p a:hover,
.wm-prose-subcard ul a:hover,
.wm-prose-subcard ol a:hover {
  color: var(--c-p700, #1E40D9);
  border-bottom-color: var(--c-p600, #2454E6);
}

/* Extended-FAQ Q&A pairs (H3 + P at section level after the FAQ block).
   Direct H3+P pairs that are NOT inside a subcard get the inset chip. */
.wm-prose-section > h3 + p,
.service-entry-content > h3 + p {
  background: var(--c-p50, #F2F5FF);
  border-left: 3px solid var(--c-p300, #9BB2FF);
  border-radius: 0 10px 10px 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: calc(var(--px, 1.5rem) + 0.5rem);
  padding-right: calc(var(--px, 1.5rem) + 0.5rem);
  margin-top: -0.25rem;
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: var(--c-slate700, #334155);
}

/* "Related Services" UL list at section level — highlight as nav-style card */
.wm-prose-section > h2:last-of-type + ul,
.wm-prose-section > h2 + p + ul:last-of-type,
.service-entry-content > h2:last-of-type + ul,
.service-entry-content > h2 + p + ul:last-of-type {
  background: linear-gradient(135deg, var(--c-p50, #F2F5FF) 0%, rgba(36,84,230,0.05) 100%);
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 16px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: calc(var(--px, 1.5rem) + 1.25rem);
  padding-right: calc(var(--px, 1.5rem) + 1.25rem);
  max-width: var(--container, 1200px);
}

/* Mobile padding + flex behaviour */
@media (max-width: 760px) {
  /* On mobile each subcard takes the full row */
  .wm-prose-subcard,
  .wp-block-group.wm-prose-subcard { flex: 1 1 100% !important; }
  .wm-prose-section > h2,
  .wm-prose-section > h3,
  .wm-prose-section > p,
  .wm-prose-section > ul,
  .wm-prose-section > ol,
  .service-entry-content > h2,
  .service-entry-content > h3,
  .service-entry-content > p,
  .service-entry-content > ul,
  .service-entry-content > ol {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .wm-prose-subcards { padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ── Legacy .wm-prose-card from earlier seed pass — render transparent
   so old un-reseeded posts don't show the big card frame. */
.wm-prose-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.wm-prose-card::before { display: none; }

/* Print-friendly */
@media print {
  .wm-cmp__th--us::after { display: none; }
  .wm-cmp__table-wrap { box-shadow: none; }
}

/* ==========================================================================
   13. LUCIDE SVG ICONS — chip / pill containers
   The block templates render <svg class="wm-icon wm-icon--name"> via the
   wm_blocks_render_icon() helper. These rules turn the SVGs into proper
   chip-style icons that fit each block container at the right weight.
   ========================================================================== */

/* Base SVG icon — inherits currentColor from its parent chip */
.wm-icon {
  display: block;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  stroke-width: 2;
  color: inherit;
}
.wm-icon-fallback {
  display: inline-block;
  font-size: inherit;
  line-height: 1;
}

/* ── Intro block — large chip in the side card ─────────────── */
.wm-si__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  font-size: 0;
  margin-bottom: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p800, #1A33A8) 100%);
  color: #fff;
  box-shadow:
    0 12px 28px rgba(36,84,230, 0.30),
    inset 0 1px 0 rgba(255,255,255, 0.18);
  position: relative;
}
.wm-si__card-icon .wm-icon {
  width: 36px;
  height: 36px;
  stroke-width: 2;
}
.wm-si__card-icon .wm-icon-fallback {
  font-size: 2rem;
  color: #fff;
}

/* ── Process block — circular numbered chips with icon overlay ─ */
.wm-sp__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 0;
  border-radius: 14px;
  background: var(--c-p50, #F2F5FF);
  color: var(--c-p600, #2454E6);
  border: 1px solid var(--c-p100, #E3EAFF);
  transition: all 0.25s ease;
}
.wm-sp__step-icon .wm-icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}
.wm-sp__step-icon .wm-icon-fallback {
  font-size: 1.5rem;
}
/* On hover, lift the step + flash the icon chip */
.wm-sp__step:hover .wm-sp__step-icon {
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p700, #1E40D9) 100%);
  color: #fff;
  border-color: var(--c-p700, #1E40D9);
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(36,84,230, 0.28);
}

/* ── Why block — bigger gradient icon chip on each card ──────── */
.wm-sw__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 0;
  margin-bottom: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p700, #1E40D9) 100%);
  color: #fff;
  box-shadow:
    0 8px 20px rgba(36,84,230, 0.25),
    inset 0 1px 0 rgba(255,255,255, 0.18);
  transition: all 0.25s ease;
  position: relative;
}
.wm-sw__icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--c-teal, #1E40D9), var(--c-p400, #6E8DFF));
  z-index: -1;
  opacity: 0;
  transition: opacity 0.25s ease;
  filter: blur(8px);
}
.wm-sw__icon .wm-icon {
  width: 28px;
  height: 28px;
  stroke-width: 2;
}
.wm-sw__icon .wm-icon-fallback {
  font-size: 1.75rem;
}

/* Hover state on the why card lifts the icon and reveals glow */
.wm-sw__card:hover .wm-sw__icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 14px 32px rgba(36,84,230, 0.40),
    inset 0 1px 0 rgba(255,255,255, 0.22);
}
.wm-sw__card:hover .wm-sw__icon::after { opacity: 0.7; }

/* ── Accent variants — apply teal to alternating cards for visual rhythm ─ */
.wm-sw__grid > .wm-sw__card:nth-child(3n+2) .wm-sw__icon {
  background: linear-gradient(135deg, var(--c-teal, #1E40D9) 0%, #1E40D9 100%);
  box-shadow:
    0 8px 20px rgba(36,84,230, 0.25),
    inset 0 1px 0 rgba(255,255,255, 0.20);
}
.wm-sw__grid > .wm-sw__card:nth-child(3n+2) .wm-sw__icon::after {
  background: linear-gradient(135deg, var(--c-p400, #6E8DFF), var(--c-teal, #1E40D9));
}
.wm-sw__grid > .wm-sw__card:nth-child(3n) .wm-sw__icon {
  background: linear-gradient(135deg, var(--c-p400, #6E8DFF) 0%, var(--c-p600, #2454E6) 100%);
}

/* ── Mobile sizing ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .wm-si__card-icon { width: 64px; height: 64px; }
  .wm-si__card-icon .wm-icon { width: 32px; height: 32px; }
  .wm-sw__icon { width: 52px; height: 52px; }
  .wm-sw__icon .wm-icon { width: 26px; height: 26px; }
  .wm-sp__step-icon { width: 44px; height: 44px; }
  .wm-sp__step-icon .wm-icon { width: 22px; height: 22px; }
}

/* ── Editor canvas — make icons visible even when the helper isn't loaded ─ */
.wm-icon-fallback:empty::before { content: '⬡'; opacity: 0.4; }

/* ==========================================================================
   14. MISSING-CLASS PATCHES
   Audit fixed mismatched class names between WM block render templates and
   the existing theme CSS. Each rule below covers a class that was emitted
   in HTML but had no corresponding stylesheet rule.
   ========================================================================== */

/* ── Pricing block (.wm-spr) patches ──────────────────────────── */

/* The pricing card uses both glass-card + wm-spr__card. glass-card adds
   subtle blur — make sure pricing card's white background still wins. */
.wm-spr__card.glass-card {
  background: #fff;
}

/* ── Process block (.wm-sp) patches ───────────────────────────── */

/* Render template uses these classes; CSS had .wm-sp__num / .wm-sp__title /
   .wm-sp__desc instead — alias all three. */
.wm-sp__step-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.wm-sp__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--c-p600, #2454E6) 0%, var(--c-p800, #1A33A8) 100%);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow:
    0 6px 16px rgba(36,84,230, 0.28),
    inset 0 1px 0 rgba(255,255,255, 0.18);
}
.wm-sp__step-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.wm-sp__step-desc {
  font-size: 0.9375rem;
  color: var(--c-slate600, #475569);
  line-height: 1.7;
  margin: 0;
}
/* Vertical connector line between steps (drawn from one step to the next) */
.wm-sp__connector {
  position: absolute;
  top: 56px;
  left: 22px;
  bottom: -1.5rem;
  width: 2px;
  background: linear-gradient(180deg, var(--c-p200, #C5D3FF) 0%, transparent 100%);
  z-index: 0;
}
.wm-sp__step { position: relative; }
/* Hide connector when the steps render in a grid (multi-column layout) */
.wm-sp__steps--3 .wm-sp__connector,
.wm-sp__steps--4 .wm-sp__connector,
.wm-sp__steps--5 .wm-sp__connector,
.wm-sp__steps--6 .wm-sp__connector { display: none; }

/* ── Testimonial block (.wm-st) patches ───────────────────────── */

/* Large decorative quote-mark above the testimonial text. */
.wm-st__quote-mark {
  display: inline-flex;
  color: var(--c-p300, #9BB2FF);
  opacity: 0.35;
  margin-bottom: 0.5rem;
  line-height: 0;
}
.wm-st--centered .wm-st__quote-mark { justify-content: center; width: 100%; }
.wm-st__quote-mark svg { width: 44px; height: 32px; }

/* Author block layout (avatar + name+role) */
.wm-st__author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  color: #fff;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  box-shadow:
    0 6px 14px rgba(36,84,230, 0.25),
    inset 0 1px 0 rgba(255,255,255, 0.18);
}
.wm-st__author-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.wm-st--centered .wm-st__author-info { align-items: center; text-align: center; }
.wm-st__author-name {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--c-slate900, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.wm-st__author-role {
  font-size: 0.8125rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.3;
}

/* ── Button utility patches ───────────────────────────────────── */

/* .btn--ghost — used in CTA / generic outline-without-bg button. */
.btn--ghost {
  background: transparent;
  color: var(--c-p600, #2454E6);
  border: 1px solid var(--c-p200, #C5D3FF);
}
.btn--ghost:hover {
  background: var(--c-p50, #F2F5FF);
  border-color: var(--c-p400, #6E8DFF);
  color: var(--c-p700, #1E40D9);
}

/* ==========================================================================
   15. WM-PROSE-SECTION VARIANTS
   Card sub-patterns that emerge from the long-form sections:
   - Q&A cards: cards with multiple H3+P pairs (extended-FAQ chunk).
   - Related-services cards: cards whose body is a UL of internal links.
   - Single-feature cards: cards whose body is a UL of bullet points.
   ========================================================================== */

/* ── Q&A pattern: subsequent H3+P pairs inside a single card ──
   The first H2 sits at the top as a section title; each H3 below is a
   question, and the following P is its answer. Distinguish the pairs
   visually with a small top divider between Q&A items. */
.wm-prose-subcard h3 + p {
  margin-bottom: 1.25rem;
}
/* Add a hairline divider before every H3 that isn't the first heading
   in the card — visually separates Q&A pairs without being heavy. */
.wm-prose-subcard h2 ~ h3,
.wm-prose-subcard h3 ~ h3 {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-slate100, #f1f5f9);
}

/* ── Related-services nav card pattern ──
   When a card's body is a UL with link-only items (the "Related Services"
   pattern from after_faq), render each li as a chip-style nav item. */
.wm-prose-subcard ul li a[href^="/services/"],
.wm-prose-subcard ul li a[href*="/services/"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.wm-prose-subcard ul li a[href^="/services/"]::after,
.wm-prose-subcard ul li a[href*="/services/"]::after {
  content: '→';
  display: inline-block;
  margin-left: 4px;
  color: var(--c-p400, #6E8DFF);
  transition: transform 0.2s ease;
}
.wm-prose-subcard ul li a[href^="/services/"]:hover::after,
.wm-prose-subcard ul li a[href*="/services/"]:hover::after {
  transform: translateX(3px);
  color: var(--c-p700, #1E40D9);
}

/* ── Feature-list cards (h3 + UL with many bullets) ──
   Tighten the spacing so the card looks like a digestible feature list. */
.wm-prose-subcard h3 + ul,
.wm-prose-subcard h2 + ul {
  margin-top: 0.25rem;
}
.wm-prose-subcard ul li {
  margin-bottom: 0.5rem;
}
.wm-prose-subcard ul li:last-child { margin-bottom: 0; }

/* ── Long Q&A card: cap content height and let it scroll on small viewports
   to prevent any one card dominating the section visually. (Optional — kept
   gentle so it doesn't surprise readers on large displays.) */
@media (min-width: 1024px) {
  .wm-prose-subcards > .wm-prose-subcard {
    /* Ensure tall cards don't stretch the row excessively when a single
       card has lots of Q&A entries. align-items:stretch (set above) still
       balances the row to the tallest card's height. */
    min-height: 0;
  }
}

/* ── 2-card sections — center each card so they look balanced ──
   When a section has exactly 2 cards, give each a more generous min-width
   so they sit comfortably in a 2-column row rather than stretching too far. */
.wm-prose-subcards:has(> .wm-prose-subcard:nth-child(2):last-child) > .wm-prose-subcard {
  flex: 1 1 calc(50% - clamp(0.5rem, 1vw, 0.75rem));
}

/* ── Single-card fallback — if a section ever ends up with one card,
   centre it at a readable width rather than letting it stretch full-width. */
.wm-prose-subcards:has(> .wm-prose-subcard:only-child) > .wm-prose-subcard {
  flex: 0 1 min(800px, 100%);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   16. EXTENDED-FAQ BLOCK  (.wm-sef)
   Second FAQ accordion — purpose-built for "More Questions" sections.
   Reuses .wm-sf__* accordion JS, so we only need the section frame.
   ========================================================================== */
.wm-sef {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: linear-gradient(180deg, #fafbff 0%, #F5F8FD 100%);
}
.wm-sef__inner {
  max-width: var(--container, 1200px);
  margin: 0 auto;
}
.wm-sef__head {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.wm-sef__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-slate900, #0f172a);
  line-height: 1.2;
  margin: 0.75rem 0 0.5rem;
}
.wm-sef__subtitle {
  font-size: 1rem;
  color: var(--c-slate600, #475569);
  line-height: 1.7;
  margin: 0;
}

/* The accordion list itself reuses .wm-sf__list styles, but on a card frame */
.wm-sef__list {
  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 8px 24px rgba(36,84,230, 0.06);
  overflow: hidden;
}

/* ==========================================================================
   17. RELATED-CARDS BLOCK  (.wm-rel)
   Tile grid linking to related service pages.
   ========================================================================== */
.wm-rel {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: #fff;
}
.wm-rel__inner {
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: 0 var(--px, 1.5rem);
}
.wm-rel__head {
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.wm-rel__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-slate900, #0f172a);
  line-height: 1.2;
  margin: 0.75rem 0 0.5rem;
}
.wm-rel__subtitle {
  font-size: 1rem;
  color: var(--c-slate600, #475569);
  line-height: 1.7;
  margin: 0;
}

/* Grid of tiles — auto-fit, 280-340px each */
.wm-rel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(0.875rem, 1.5vw, 1.25rem);
}

/* Individual tile = horizontal layout: [num] [label+note] [arrow] */
.wm-rel__tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
  position: relative;
}
.wm-rel__tile:hover {
  transform: translateY(-3px);
  background: linear-gradient(135deg, #fff 0%, var(--c-p50, #F2F5FF) 100%);
  border-color: var(--c-p300, #9BB2FF);
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 12px 28px rgba(36,84,230, 0.12);
}

.wm-rel__tile-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  box-shadow:
    0 4px 10px rgba(36,84,230, 0.20),
    inset 0 1px 0 rgba(255,255,255, 0.18);
}
.wm-rel__tile:nth-child(3n+2) .wm-rel__tile-num {
  background: linear-gradient(135deg, var(--c-teal, #1E40D9) 0%, #1E40D9 100%);
  box-shadow:
    0 4px 10px rgba(36,84,230, 0.22),
    inset 0 1px 0 rgba(255,255,255, 0.18);
}
.wm-rel__tile:nth-child(3n) .wm-rel__tile-num {
  background: linear-gradient(135deg, var(--c-p400, #6E8DFF) 0%, var(--c-p600, #2454E6) 100%);
}

.wm-rel__tile-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.wm-rel__tile-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--c-slate900, #0f172a);
  line-height: 1.3;
}
.wm-rel__tile-note {
  font-size: 0.8125rem;
  color: var(--c-slate500, #64748b);
  line-height: 1.4;
}

.wm-rel__tile-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-p400, #6E8DFF);
  transition: transform 0.22s ease, color 0.22s ease;
}
.wm-rel__tile:hover .wm-rel__tile-arrow {
  transform: translateX(4px);
  color: var(--c-p700, #1E40D9);
}

@media (max-width: 480px) {
  .wm-rel__grid { grid-template-columns: 1fr; }
}

/* ─── Inline-SVG icon sizing helpers ─────────────────────────────
   These constrain the inline <svg>s emitted by b2bm_icon() /
   wm_blocks_icon() inside each context. The Lucide SVGs have no
   explicit width/height attribute so they need the wrapper to set
   font-size or width via CSS. */
.footer-badge-item .badge-icon svg,
.cta-trust-item svg,
.marquee-item .marquee-icon svg {
  width: 16px; height: 16px; vertical-align: -3px;
}
.footer-made-with .heart svg {
  width: 14px; height: 14px; color: #e11d48; vertical-align: -2px;
}
.problem-tag svg {
  width: 14px; height: 14px; vertical-align: -2px;
}
.problem-emoji svg {
  width: 56px; height: 56px; color: var(--c-p500, #4D74FF);
}
.cta-trust-item svg { color: currentColor; }
.product-card__icon-wrap svg,
.portfolio-card__thumb svg {
  width: 48px; height: 48px; color: var(--c-p500, #4D74FF);
}
.sp-trust-icon svg,
.trust-check svg,
.msg-icon svg,
.meta-icon svg,
.tv-icon svg {
  width: 16px; height: 16px; vertical-align: -3px;
}
.sp-custom-icon svg,
.sp-visual-plug svg {
  width: 32px; height: 32px;
}
.sp-req-icon svg {
  width: 18px; height: 18px;
}
.sac-icon svg {
  width: 32px; height: 32px;
}
.placeholder-icon svg {
  width: 56px; height: 56px; color: var(--c-slate300, #cbd5e1);
}
.placeholder-icon--sm svg { width: 40px; height: 40px; }
.empty-state__icon svg {
  width: 64px; height: 64px; color: var(--c-p400, #6E8DFF);
}
.skill-card .skill-icon svg,
.service-card__icon svg {
  width: 28px; height: 28px;
}
.about-portrait-placeholder svg {
  width: 120px; height: 120px; color: var(--c-p400, #6E8DFF);
}
.sidebar-cta-icon svg {
  width: 28px; height: 28px;
}
/* Online status pulse dot for "Currently Available" */
.status-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
  animation: status-pulse 1.6s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0.08); }
}

/* ==========================================================================
   18. SMART SECTION LAYOUTS
   - .wm-prose-section__header — Section title + intro text that sits
       ABOVE a .wm-prose-subcards flex grid. (Used when an H2 block has
       H3 sub-sections — the H2 becomes the grid header, the H3s become
       cards.)
   - .wm-prose-solo            — A single wide card containing one H2
       and its paragraphs/lists. (Used when an H2 block has NO H3s.)
   ========================================================================== */

/* ---- A. Section header above the cards grid -------------------------------- */
.wm-prose-section__header,
.wp-block-group.wm-prose-section__header {
  max-width: var(--container, 1200px);
  margin: 0 auto clamp(1.25rem, 2.5vw, 2rem);
  padding: 0 var(--px, 1.5rem);
  text-align: center;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Same rule when WP inserts an inner-container wrapper */
.wm-prose-section__header > .wp-block-group__inner-container,
.wp-block-group.wm-prose-section__header > .wp-block-group__inner-container {
  text-align: center;
}

.wm-prose-section__title,
.wp-block-heading.wm-prose-section__title {
  position: relative;
  display: inline-block;
  margin: 0 auto 0.75rem;
  padding: 0 0 0.875rem;
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-slate900, #0f172a);
  background: none;          /* override generic .wm-prose-section > h2 pill */
  -webkit-text-fill-color: initial;
}
.wm-prose-section__title::before {
  content: none !important;  /* kill the bullet square from generic h2 rule */
}
.wm-prose-section__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--c-p500, #4D74FF) 0%,
    var(--c-teal, #1E40D9) 100%);
}

.wm-prose-section__lead {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--c-slate600, #475569);
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
}

/* When the section-header sits directly above a subcards grid,
   tighten the gap so they read as one unit. */
.wm-prose-section__header + .wm-prose-subcards,
.wm-prose-section__header + .wp-block-group.wm-prose-subcards {
  margin-top: 0;
}

/* ---- B. Solo wide card ----------------------------------------------------- */
.wm-prose-solo,
.wp-block-group.wm-prose-solo {
  max-width: var(--container, 1200px);
  margin: 0 auto;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(2rem, 4vw, 3rem);
  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0, 0.02),
    0 14px 32px rgba(36,84,230, 0.08);
  position: relative;
  overflow: hidden;
}
/* Same rule when WP inserts an inner-container wrapper */
.wm-prose-solo > .wp-block-group__inner-container,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container {
  padding: 0;
  margin: 0;
}

/* Accent bar along the top of the solo card */
.wm-prose-solo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--c-p500, #4D74FF) 0%,
    var(--c-p700, #1E40D9) 50%,
    var(--c-teal, #1E40D9) 100%);
}

/* Headings & body inside the solo card — override the global
   .wm-prose-section > h2 / > p pill+wrapper style so the solo card
   reads as one clean card, not nested cards. */
.wm-prose-solo > h2,
.wm-prose-solo > .wp-block-group__inner-container > h2,
.wp-block-group.wm-prose-solo > h2,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > h2 {
  margin: 0 0 1rem;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-slate900, #0f172a);
  -webkit-text-fill-color: initial;
}
.wm-prose-solo > h2::before,
.wm-prose-solo > .wp-block-group__inner-container > h2::before,
.wp-block-group.wm-prose-solo > h2::before,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > h2::before {
  content: none !important;
}
.wm-prose-solo > h2::after,
.wm-prose-solo > .wp-block-group__inner-container > h2::after,
.wp-block-group.wm-prose-solo > h2::after,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 0.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg,
    var(--c-p500, #4D74FF) 0%,
    var(--c-teal, #1E40D9) 100%);
}

.wm-prose-solo > p,
.wm-prose-solo > .wp-block-group__inner-container > p,
.wp-block-group.wm-prose-solo > p,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > p {
  margin: 0 0 1rem;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--c-slate700, #334155);
}
.wm-prose-solo > ul,
.wm-prose-solo > ol,
.wm-prose-solo > .wp-block-group__inner-container > ul,
.wm-prose-solo > .wp-block-group__inner-container > ol,
.wp-block-group.wm-prose-solo > ul,
.wp-block-group.wm-prose-solo > ol,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > ul,
.wp-block-group.wm-prose-solo > .wp-block-group__inner-container > ol {
  margin: 0 0 1.25rem;
  padding: 0 0 0 1.25rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.wm-prose-solo > ul li,
.wm-prose-solo > ol li,
.wm-prose-solo > .wp-block-group__inner-container > ul li,
.wm-prose-solo > .wp-block-group__inner-container > ol li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
  color: var(--c-slate700, #334155);
}
.wm-prose-solo > ul li::marker,
.wm-prose-solo > .wp-block-group__inner-container > ul li::marker {
  color: var(--c-p500, #4D74FF);
}

/* Last child of a solo card should not add bottom margin */
.wm-prose-solo > *:last-child,
.wm-prose-solo > .wp-block-group__inner-container > *:last-child {
  margin-bottom: 0;
}

/* ---- C. Mobile tweaks ------------------------------------------------------ */
@media (max-width: 640px) {
  .wm-prose-solo,
  .wp-block-group.wm-prose-solo {
    border-radius: 14px;
    padding: 1.5rem 1.25rem;
  }
  .wm-prose-section__title,
  .wp-block-heading.wm-prose-section__title {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   19. PRICING TIERS  (.wm-spr__tiers / .wm-spr__tier)
   Multi-tier package comparison — used by services that show several
   packages side-by-side (e.g. Classic / Block / Hybrid theme builds).
   Renders inside a `.wm-spr--tiers` section. Single-card pricing in other
   services keeps using the legacy `.wm-spr__card` styles in Section 8.
   ========================================================================== */

.wm-spr--tiers {
  background: linear-gradient(180deg, #fafbff 0%, #F5F8FD 100%);
}
.wm-spr--tiers .section-header {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---- Tier grid ------------------------------------------------------------ */
.wm-spr__tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.25rem, 2vw, 1.75rem);
  margin: 0;
  padding: 0;
}
.wm-spr__tiers--count-3 > .wm-spr__tier {
  flex: 1 1 calc(33.333% - 1.25rem);
  max-width: calc(33.333% - 1.25rem);
}
.wm-spr__tiers--count-2 > .wm-spr__tier {
  flex: 1 1 calc(50% - 0.875rem);
  max-width: calc(50% - 0.875rem);
}

/* ---- Tier card ----------------------------------------------------------- */
.wm-spr__tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 12px 32px rgba(36,84,230,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.wm-spr__tier:hover {
  transform: translateY(-3px);
  border-color: var(--c-p200, #C5D3FF);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 18px 40px rgba(36,84,230,0.12);
}

/* Featured tier — elevated with a brand-gradient border halo */
.wm-spr__tier--featured {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-teal, #1E40D9) 100%) border-box;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 24px 56px rgba(36,84,230,0.18);
  transform: translateY(-6px);
  z-index: 1;
}
.wm-spr__tier--featured:hover { transform: translateY(-9px); }

/* "Most Popular" badge — floats above the featured card */
.wm-spr__tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 16px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(36,84,230,0.30);
  white-space: nowrap;
}

/* ---- Tier head (name + tagline) ------------------------------------------ */
.wm-spr__tier-head { margin-bottom: 1.25rem; }
.wm-spr__tier-name {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--c-p700, #1E40D9);
  text-transform: uppercase;
}
.wm-spr__tier-tagline {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-slate900, #0f172a);
  font-weight: 600;
}

/* ---- Price row ----------------------------------------------------------- */
/* Single-line layout — "From  $X,XXX  per theme" must read horizontally even
   in the narrower featured card. flex-wrap: nowrap + smaller clamp + min-width
   on the row prevents the period from breaking onto a new line. */
.wm-spr__tier-price {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
  min-width: 0;
}
.wm-spr__tier-from {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-slate500, #64748b);
  flex: 0 0 auto;
  white-space: nowrap;
}
.wm-spr__tier-amount {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-slate900, #0f172a);
  white-space: nowrap;
  flex: 0 1 auto;
}
.wm-spr__tier-period {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-slate500, #64748b);
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}
.wm-spr__tier-note {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-slate500, #64748b);
}

/* ---- Features list ------------------------------------------------------- */
.wm-spr__tier-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--c-p100, #E3EAFF);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
}
.wm-spr__tier-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-slate700, #334155);
}
.wm-spr__tier-check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-teal, #1E40D9) 0%, #1E40D9 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(36,84,230,0.25);
}
.wm-spr__tier-check svg { width: 12px; height: 12px; }
.wm-spr__tier-feature-text code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.78em;
  padding: 1px 5px;
  background: var(--c-p50, #F2F5FF);
  color: var(--c-p700, #1E40D9);
  border-radius: 4px;
}
.wm-spr__tier--featured .wm-spr__tier-check {
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  box-shadow: 0 2px 6px rgba(36,84,230,0.30);
}

/* ---- Actions row --------------------------------------------------------- */
.wm-spr__tier-actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: auto;
}
.wm-spr__tier-actions .btn {
  justify-content: center;
  width: 100%;
}
.wm-spr__tier-sec-link {
  display: inline-block;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--c-slate500, #64748b);
  text-decoration: none;
  transition: color 0.18s ease;
}
.wm-spr__tier-sec-link:hover { color: var(--c-p700, #1E40D9); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .wm-spr__tiers--count-3 > .wm-spr__tier {
    flex: 1 1 calc(50% - 0.875rem);
    max-width: calc(50% - 0.875rem);
  }
  .wm-spr__tier--featured { transform: none; }
  .wm-spr__tier--featured:hover { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  .wm-spr__tiers--count-3 > .wm-spr__tier,
  .wm-spr__tiers--count-2 > .wm-spr__tier {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   20. LEGACY-CLASS COMPATIBILITY
   Old seeded posts emit `.wm-spr__card.wm-spr__tier` etc. inside
   `.wm-spr__tiers`. Map those legacy names onto the new tier styles so
   the page looks right WITHOUT having to re-seed. New seeds use the
   cleaner `.wm-spr__tier*` markup and these aliases stop being needed.
   ========================================================================== */
.wm-spr__tiers .wm-spr__card {
  /* Reset everything the single-card .wm-spr__card adds inside the tier grid */
  background: #fff;
  border: 1px solid var(--c-p100, #E3EAFF);
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 12px 32px rgba(36,84,230,0.06);
  overflow: visible;
  padding: clamp(1.75rem, 2.5vw, 2.5rem);
  position: relative;
  display: flex;
  flex-direction: column;
}
.wm-spr__tiers .wm-spr__card--featured,
.wm-spr__tiers .wm-spr__card--popular {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-teal, #1E40D9) 100%) border-box;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.02),
    0 24px 56px rgba(36,84,230,0.18);
  transform: translateY(-6px);
}
/* Old badge bar → centered floating pill */
.wm-spr__tiers .wm-spr__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  padding: 6px 16px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--c-p500, #4D74FF) 0%, var(--c-p700, #1E40D9) 100%);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(36,84,230,0.30);
  white-space: nowrap;
}
/* Old .wm-spr__tier-name / .wm-spr__tier-sub used in legacy markup */
.wm-spr__tiers .wm-spr__tier-name {
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--c-p700, #1E40D9);
  text-transform: uppercase;
}
.wm-spr__tiers .wm-spr__tier-sub {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--c-slate900, #0f172a);
  font-weight: 600;
}
/* Old price block had full "From $1,999" in one span at giant size — tame it */
.wm-spr__tiers .wm-spr__price-wrap,
.wm-spr__tiers .wm-spr__price-block {
  padding: 0;
  border-bottom: 0;
  text-align: left;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.375rem 0.5rem;
}
.wm-spr__tiers .wm-spr__price {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-slate900, #0f172a);
  white-space: nowrap;
  display: inline-block;
}
.wm-spr__tiers .wm-spr__period {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-slate500, #64748b);
  margin-left: 0;
}
.wm-spr__tiers .wm-spr__note {
  margin: 0 0 1.5rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--c-slate500, #64748b);
}
.wm-spr__tiers .wm-spr__features {
  padding: 1.25rem 0 0;
  margin: 0 0 1.5rem;
  border-top: 1px solid var(--c-p100, #E3EAFF);
  border-bottom: 0;
  flex: 1 1 auto;
}
.wm-spr__tiers .wm-spr__feature {
  align-items: flex-start;
  font-size: 0.875rem;
}
.wm-spr__tiers .wm-spr__actions {
  padding: 0;
  margin-top: auto;
}




/* ════════════════════════════════════════════════════════════════════
 * Catalog launching card — shown on the front page when no products
 * are published yet (replaces the old "Coming Soon" tile grid).
 * ════════════════════════════════════════════════════════════════════ */
.catalog-launching{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-4);padding:var(--sp-10) var(--sp-6);
  background:linear-gradient(135deg,rgba(155,178,255,0.06),rgba(30,64,217,0.05));
  border:1px dashed rgba(155,178,255,0.4);border-radius:var(--radius-xl,24px);
  max-width:760px;margin:0 auto;
}
.catalog-launching__icon{
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  background:rgba(155,178,255,0.12);color:var(--c-p400,#9BB2FF);
}
.catalog-launching__icon svg{width:32px;height:32px;}
.catalog-launching__title{margin:0;font-size:1.5rem;font-weight:700;color:var(--color-text,#171C28);}
.catalog-launching__desc{margin:0;max-width:560px;color:var(--color-muted,#667085);line-height:1.6;}
.catalog-launching__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-3);}


/* ════════════════════════════════════════════════════════════════════
 * Marquee strip — turned into a real <nav><ul> for crawlability.
 * Override list defaults so the existing scrolling visuals still work.
 * ════════════════════════════════════════════════════════════════════ */
.marquee-strip .marquee-track{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:nowrap;align-items:center;
}
.marquee-strip .marquee-item{display:inline-flex;align-items:center;}
.marquee-strip .marquee-link{
  display:inline-flex;align-items:center;gap:.55rem;
  color:inherit;text-decoration:none;
  font-weight:500;letter-spacing:.01em;
  padding:.25rem .5rem;border-radius:.5rem;
  transition:color .15s ease, background .15s ease;
}
.marquee-strip .marquee-link:hover,
.marquee-strip .marquee-link:focus-visible{
  color:var(--c-p400,#9BB2FF);background:rgba(155,178,255,0.08);
  outline:none;
}
.marquee-strip .marquee-link:focus-visible{
  box-shadow:0 0 0 2px rgba(155,178,255,0.4);
}
/* Visually-hidden helper (used by the marquee SR-only heading). */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);
  height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;word-wrap:normal !important;
}

/* ════════════════════════════════════════════════════════════════════
 * Contact form consent block — checkbox + privacy-policy link.
 * ════════════════════════════════════════════════════════════════════ */
.form-field--consent{margin-top:var(--sp-3);}
.consent-label{
  display:flex;gap:.65rem;align-items:flex-start;
  cursor:pointer;font-size:.875rem;line-height:1.5;color:var(--color-muted,#667085);
}
.consent-label input[type="checkbox"]{
  flex:0 0 18px;width:18px;height:18px;margin-top:2px;
  accent-color:var(--c-p400,#9BB2FF);cursor:pointer;
}
.consent-label a{color:var(--c-p500,#2454E6);text-decoration:underline;text-underline-offset:2px;}
.consent-text{flex:1;}

/* ════════════════════════════════════════════════════════════════════
 * Pricing tiers (.tier-*)
 *
 * Rebuilt from scratch:
 *   - "MOST POPULAR" is an integrated top bar inside the featured card,
 *     not a floating ribbon — so it can never overlap the tier name.
 *   - Price is rendered as three separate spans (prefix / amount / per).
 *     The amount is a single element with `display:inline-block` so it
 *     can't mid-string wrap, regardless of length.
 *   - 4 cards on desktop, 2 on tablet, 1 on mobile. Equal-height via
 *     flex column. CTA always sits below the description.
 *   - Featured card stays in-line with the others (no transform / lift)
 *     so the row reads as a clean strip, not a stairstep.
 * ════════════════════════════════════════════════════════════════════ */

.tier-grid{
  --tier-radius: 18px;
  --tier-border: #e5e7eb;
  --tier-text:   #111827;
  --tier-muted:  #6b7280;
  --tier-soft:   #f9fafb;
  --tier-brand:  #2454E6;     /* B2B Managers purple */
  --tier-brand-2:#9BB2FF;
  --tier-check:  #1E40D9;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 48px 0 0;
  align-items: stretch;
}
@media (max-width: 1100px){ .tier-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){  .tier-grid{ grid-template-columns: 1fr; gap: 16px; } }

.tier{
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tier-border);
  border-radius: var(--tier-radius);
  padding: 28px 24px;
  box-shadow: 0 1px 2px rgba(16,24,41,0.04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;            /* contains the badge bar */
  min-width: 0;
}
.tier:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16,24,41,0.08);
  border-color: rgba(155,178,255,0.5);
}

/* ── Featured (VIP) ───────────────────────────────────────────── */
.tier--featured{
  border-color: var(--tier-brand-2);
  border-width: 2px;
  padding-top: 56px;           /* room for the integrated top bar */
  background: #fff;
}
.tier__badge{
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 9px 12px;
  background: linear-gradient(135deg, var(--tier-brand), var(--tier-brand-2));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Head ─────────────────────────────────────────────────────── */
.tier__head{ margin: 0 0 16px; }
.tier__name{
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tier-muted);
  line-height: 1;
}
.tier__tagline{
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--tier-muted);
  line-height: 1.4;
}

/* ── Price ────────────────────────────────────────────────────── */
.tier__price{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin: 0 0 14px;
  min-height: 48px;            /* keeps card heads level across tiers */
}
.tier__prefix{
  flex: 0 0 100%;              /* "from" sits on its own line, above the amount */
  font-size: 13px;
  font-weight: 600;
  color: var(--tier-muted);
  text-transform: lowercase;
  letter-spacing: .02em;
  margin-bottom: -2px;
}
.tier__amount{
  display: inline-block;       /* single non-wrapping element */
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  color: var(--tier-text);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.tier__per{
  font-size: 13px;
  font-weight: 500;
  color: var(--tier-muted);
}

/* ── Description ──────────────────────────────────────────────── */
.tier__desc{
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--tier-muted);
}

/* ── CTA (sits ABOVE the feature list — easier to action) ─────── */
.tier__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--tier-border);
  color: var(--tier-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.tier__cta:hover{
  border-color: var(--tier-brand-2);
  color: var(--tier-brand);
  transform: translateY(-1px);
}
.tier__cta svg{ width: 16px; height: 16px; }
.tier--featured .tier__cta{
  background: linear-gradient(135deg, var(--tier-brand), var(--tier-brand-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(36,84,230,0.25);
}
.tier--featured .tier__cta:hover{
  color: #fff;
  filter: brightness(1.05);
}

/* ── Feature list ─────────────────────────────────────────────── */
.tier__features{
  list-style: none;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--tier-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;                     /* stretch to bottom; keeps cards equal-height */
}
.tier__features li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tier-text);
}
.tier__check{
  display: inline-flex;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  color: var(--tier-check);
}
.tier__check svg{ width: 16px; height: 16px; }

/* ── Footnote line below the grid ─────────────────────────────── */
.tier-footnote{
  margin-top: 36px;
  text-align: center;
  color: var(--tier-muted);
  font-size: 14px;
}
.tier-footnote a{
  color: var(--tier-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tier-footnote a:hover{ text-decoration-thickness: 2px; }


/* ==========================================================================
   PROJECTS ARCHIVE  (archive-project.php)
   ========================================================================== */

/* Wider columns on the dedicated archive page */
.portfolio-grid--archive {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
}

/* h3 heading inside portfolio cards (archive page uses h3 for correct hierarchy) */
.portfolio-card h3 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: var(--sp-2);
  color: var(--color-heading);
  line-height: 1.3;
}
.portfolio-card p {
  font-size: 0.875rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}

/* Make the card a proper link without underline */
.portfolio-card--link {
  text-decoration: none;
  color: inherit;
}

/* Arrow always visible on the archive grid (larger card, more room) */
.portfolio-grid--archive .portfolio-card__arrow {
  opacity: 1;
  transform: none;
  color: var(--c-teal, #1E40D9);
}
.portfolio-grid--archive .portfolio-card:hover .portfolio-card__arrow {
  color: #1E40D9;
  gap: var(--sp-2);
}

/* Larger thumb on archive page */
.portfolio-grid--archive .portfolio-card__thumb {
  height: 200px;
}

/* Empty state for projects */
.empty-state h2 {
  font-size: 1.5rem;
  color: var(--color-heading);
  margin-bottom: var(--sp-3);
}
.empty-state p {
  color: var(--color-muted);
  font-size: 1rem;
  margin-bottom: var(--sp-6);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}



/* ── WordPress.org stats strip (single product) ───────── */
.sp-wporg {
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);
  border:1px solid var(--color-border);
  border-radius:12px;
}
.sp-wporg-stats { display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5); }
.sp-wporg-stat { display:flex;flex-direction:column;line-height:1.3; }
.sp-wporg-stat strong { font-size:1.15rem;font-weight:700;color:var(--color-text); }
.sp-wporg-stat span { font-size:0.78rem;color:var(--color-muted); }
.sp-wporg-link { margin-left:auto;font-size:0.85rem;white-space:nowrap; }
@media (max-width:600px){
  .sp-wporg { gap:var(--sp-3); }
  .sp-wporg-link { margin-left:0;width:100%; }
}

/* ════════════════════════════════════════════════════════════════
   FOUNDER CREDENTIAL BLOCK  (About page)
   Data: inc/founder.php · Markup: page-about.php
   ════════════════════════════════════════════════════════════════ */
.founder-section { padding-top:0; }

.founder-card {
  display:grid;
  grid-template-columns:minmax(0,180px) 1fr;
  gap:clamp(1.5rem,4vw,3rem);
  align-items:start;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:var(--r-2xl);
  padding:clamp(1.5rem,3.5vw,2.5rem);
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
/* Teal top edge — same accent as the logo mark */
.founder-card::before {
  content:'';
  position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--c-teal) 0%,var(--c-p400) 60%,transparent 100%);
}

.founder-card__media { min-width:0; }
.founder-card__photo {
  display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--r-2xl);
  border:1px solid var(--color-border);
}
.founder-card__photo--placeholder {
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--c-p50) 0%,var(--c-p100) 60%,rgba(36,84,230,0.10) 100%);
  color:var(--c-p400);
}
.founder-card__photo--placeholder svg { width:46px;height:46px; }

.founder-card__body { min-width:0; }
.founder-card__name {
  font-size:clamp(1.35rem,2.4vw,1.75rem);
  line-height:1.2;letter-spacing:-0.025em;
  margin:var(--sp-2) 0 var(--sp-1);
}
.founder-card__role {
  font-size:0.9rem;font-weight:700;
  color:var(--c-p700);
  margin-bottom:var(--sp-4);
}
.founder-card__bio {
  color:var(--color-text);line-height:1.75;
  margin-bottom:var(--sp-5);
}

/* Credential chips */
.founder-card__creds {
  list-style:none;margin:0 0 var(--sp-6);padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.founder-card__creds li {
  display:inline-flex;align-items:center;gap:6px;
  font-size:0.8rem;font-weight:600;
  color:var(--c-slate700);
  background:var(--c-slate50);
  border:1px solid var(--color-border);
  border-radius:var(--r-full);
  padding:6px var(--sp-3);
}
.founder-cred__tick { display:inline-flex;color:var(--c-teal); }
.founder-cred__tick svg { width:14px;height:14px; }

/* Footer: profile links + CTA */
.founder-card__footer {
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-4) var(--sp-5);
  padding-top:var(--sp-5);
  border-top:1px solid var(--color-border);
}
.founder-card__links {
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2);
}
.founder-card__links a {
  display:inline-flex;align-items:center;gap:7px;
  font-size:0.82rem;font-weight:700;
  color:var(--c-slate700);
  text-decoration:none;
  border:1px solid var(--color-border);
  border-radius:var(--r-full);
  padding:7px var(--sp-3);
  transition:color var(--t-fast),border-color var(--t-fast),
             background var(--t-fast),transform var(--t-fast);
}
.founder-card__links a:hover {
  color:var(--c-p700);
  border-color:var(--c-teal);
  background:var(--c-p50);
  transform:translateY(-1px);
}
.founder-card__links a:focus-visible { outline:2px solid var(--c-teal);outline-offset:2px; }
.founder-card__links svg { width:15px;height:15px;flex-shrink:0; }
.founder-card__footer .btn { margin-left:auto; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:760px) {
  /* Stack, and centre — matches the mobile alignment pass elsewhere */
  .founder-card { grid-template-columns:1fr;text-align:center; }
  .founder-card__media { max-width:150px;margin:0 auto; }
  .founder-card__creds,
  .founder-card__links { justify-content:center; }
  .founder-card__footer { flex-direction:column;align-items:stretch; }
  .founder-card__footer .btn { margin-left:0;width:100%;justify-content:center; }
}
@media (max-width:480px) {
  .founder-card__media { max-width:120px; }
  .founder-card__bio { text-align:left; }
}