/*
Theme Name: Kadence Child - Wave Rock Global
Template: kadence
Description: Wave Rock Global dark corporate-tech theme
Version: 1.0
*/

/* ═══════════════════════════════════════════════════════════
   WAVE ROCK GLOBAL — Complete Design System
   Child Theme: style.css
   
   This file contains:
   1. Google Fonts import
   2. Kadence CSS variable overrides (global colours + typography)
   3. Global element overrides
   4. Component library (cards, badges, buttons, etc.)
   5. Section-specific styles (hero, trust bar, testimonials, etc.)
   6. Utility classes
   7. Responsive adjustments
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   1. GOOGLE FONTS
   ───────────────────────────────────────────────── */

/* Google Fonts loaded via functions.php for better performance */


/* ─────────────────────────────────────────────────
   2. KADENCE CSS VARIABLE OVERRIDES
   
   These override Kadence's global palette at the root
   level. This means every Kadence block that references
   "Global Palette Color 1" etc. will use these values.
   No need to set them in the Customiser — this wins.
   ───────────────────────────────────────────────── */

:root {
  /* ── Global Palette ── */
  --global-palette1: #3B82F6;         /* Accent Blue */
  --global-palette2: #6366F1;         /* Accent Indigo / Hover */
  --global-palette3: #F1F5F9;         /* Text Strong (headings) */
  --global-palette4: #94A3B8;         /* Text Body */
  --global-palette5: #64748B;         /* Text Muted */
  --global-palette6: #0A0E17;         /* Background Base */
  --global-palette7: #111827;         /* Background Surface */
  --global-palette8: #1A2035;         /* Background Card */
  --global-palette9: #0A0E17;         /* Extra: same as base */

  /* ── Kadence-specific mapping ── */
  --global-body-font-family: 'DM Sans', sans-serif;
  --global-heading-font-family: 'DM Sans', sans-serif;
  --global-fallback-font: sans-serif;
  --global-content-width: 1200px;
  --global-content-narrow-width: 800px;
  --global-content-edge-padding: 40px;

  /* ── Custom WRG tokens ── */
  --wrg-accent: #3B82F6;
  --wrg-accent-hover: #6366F1;
  --wrg-accent-bright: #60A5FA;
  --wrg-accent-glow: rgba(59, 130, 246, 0.15);
  --wrg-bg-primary: #0A0E17;
  --wrg-bg-secondary: #111827;
  --wrg-bg-card: #1A2035;
  --wrg-bg-card-hover: #1F2847;
  --wrg-text-primary: #F1F5F9;
  --wrg-text-secondary: #94A3B8;
  --wrg-text-muted: #64748B;
  --wrg-border: rgba(148, 163, 184, 0.08);
  --wrg-border-accent: rgba(59, 130, 246, 0.2);
  --wrg-gradient: linear-gradient(135deg, #3B82F6, #6366F1);
  --wrg-font-mono: 'Space Mono', monospace;
}


/* ─────────────────────────────────────────────────
   3. GLOBAL ELEMENT OVERRIDES
   ───────────────────────────────────────────────── */

body {
  background-color: var(--wrg-bg-primary) !important;
  color: var(--wrg-text-secondary);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  color: var(--wrg-text-primary);
}

h1 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

h2 {
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

h3 {
  font-weight: 600;
  line-height: 1.3;
}

/* Links */
a {
  color: var(--wrg-accent);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--wrg-accent-bright);
}

/* Paragraphs inside dark sections */
.entry-content p {
  color: var(--wrg-text-secondary);
}

/* Selection highlight */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: var(--wrg-text-primary);
}


/* ─────────────────────────────────────────────────
   4. KADENCE HEADER OVERRIDES
   ───────────────────────────────────────────────── */

/* Main header bar */
#masthead,
.site-header {
  background: rgba(10, 14, 23, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--wrg-border) !important;
}

/* Navigation links */
.header-navigation .menu > li > a {
  color: var(--wrg-text-secondary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  transition: color 0.2s ease !important;
}
.header-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a {
  color: var(--wrg-text-primary) !important;
}

/* Site title / logo text */
.site-branding .site-title a,
.site-branding .site-title {
  color: var(--wrg-text-primary) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  letter-spacing: -0.3px;
}

/* Mobile menu toggle */
.menu-toggle-open {
  color: var(--wrg-text-primary) !important;
}

/* Dropdown menus */
.header-navigation ul ul {
  background: var(--wrg-bg-card) !important;
  border: 1px solid var(--wrg-border) !important;
  border-radius: 8px !important;
}
.header-navigation ul ul a {
  color: var(--wrg-text-secondary) !important;
}
.header-navigation ul ul a:hover {
  color: var(--wrg-text-primary) !important;
  background: var(--wrg-bg-card-hover) !important;
}


/* ─────────────────────────────────────────────────
   5. KADENCE FOOTER OVERRIDES
   ───────────────────────────────────────────────── */

.site-footer {
  background: var(--wrg-bg-primary) !important;
  border-top: 1px solid var(--wrg-border) !important;
}

/* Kill the Kadence credit line */
.site-footer-credits,
.footer-widget-area .powered-by-developer,
.site-info {
  display: none !important;
}

/* Footer text */
.site-footer,
.site-footer a,
.site-footer p {
  color: var(--wrg-text-muted) !important;
  font-size: 13px;
}
.site-footer a:hover {
  color: var(--wrg-text-secondary) !important;
}

/* Footer navigation */
.footer-navigation a {
  color: var(--wrg-text-muted) !important;
  font-size: 13px !important;
}
.footer-navigation a:hover {
  color: var(--wrg-text-secondary) !important;
}


/* ─────────────────────────────────────────────────
   6. COMPONENT LIBRARY
   ───────────────────────────────────────────────── */

/* ── Gradient Text ── */
.wrg-gradient-text {
  background: var(--wrg-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Badge / Pill Label ── */
.wrg-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--wrg-accent-glow);
  border: 1px solid var(--wrg-border-accent);
  border-radius: 100px;
  font-family: var(--wrg-font-mono);
  font-size: 12px;
  color: var(--wrg-accent-bright) !important;
  letter-spacing: 0.5px;
}
.wrg-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--wrg-accent);
  border-radius: 50%;
  animation: wrg-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes wrg-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Section Label (mono uppercase) ── */
.wrg-section-label {
  font-family: var(--wrg-font-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--wrg-accent) !important;
  margin-bottom: 16px !important;
}

/* ── Cards ── */
.wrg-card {
  background: var(--wrg-bg-card) !important;
  border: 1px solid var(--wrg-border) !important;
  border-radius: 14px !important;
  padding: 32px !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.wrg-card:hover {
  border-color: var(--wrg-border-accent) !important;
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}
.wrg-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wrg-gradient);
  opacity: 0;
  transition: opacity 0.3s;
}
.wrg-card:hover::after {
  opacity: 1;
}

/* ── Service Number ── */
.wrg-service-num {
  font-family: var(--wrg-font-mono) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  color: rgba(59, 130, 246, 0.12) !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
}

/* ── Service Tag ── */
.wrg-service-tag {
  display: inline-flex !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-family: var(--wrg-font-mono) !important;
  font-size: 12px !important;
  background: rgba(59, 130, 246, 0.08) !important;
  color: var(--wrg-accent-bright) !important;
  border: 1px solid rgba(59, 130, 246, 0.12) !important;
  margin-top: 20px !important;
}

/* ── Process Step Circle ── */
.wrg-step-num {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--wrg-bg-card);
  border: 2px solid var(--wrg-border-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wrg-font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--wrg-accent-bright);
}

/* ── Buttons ── */
.wrg-btn-primary,
a.wrg-btn-primary {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 32px !important;
  background: var(--wrg-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
  cursor: pointer;
  line-height: 1.4 !important;
}
.wrg-btn-primary:hover,
a.wrg-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35) !important;
  color: #FFFFFF !important;
}

.wrg-btn-secondary,
a.wrg-btn-secondary {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 32px !important;
  background: transparent !important;
  color: var(--wrg-text-secondary) !important;
  border: 1px solid var(--wrg-border) !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  cursor: pointer;
  line-height: 1.4 !important;
}
.wrg-btn-secondary:hover,
a.wrg-btn-secondary:hover {
  border-color: var(--wrg-text-muted) !important;
  color: var(--wrg-text-primary) !important;
}

/* ── Testimonial ── */
.wrg-quote-mark {
  font-size: 72px;
  color: var(--wrg-accent);
  opacity: 0.3;
  line-height: 1;
  text-align: center;
}

.wrg-testimonial-text {
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--wrg-text-primary) !important;
  font-style: italic;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px !important;
}

.wrg-testimonial-author {
  font-size: 15px !important;
  color: var(--wrg-text-muted) !important;
  text-align: center;
}

/* ── Check List Items ── */
.wrg-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--wrg-text-secondary);
  margin-bottom: 14px;
}

.wrg-check-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4ADE80;
  font-size: 12px;
  flex-shrink: 0;
}

/* ── Trust Bar ── */
.wrg-trust-bar {
  padding: 48px 0;
  border-top: 1px solid var(--wrg-border);
  border-bottom: 1px solid var(--wrg-border);
}

.wrg-trust-label {
  font-family: var(--wrg-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--wrg-text-muted);
}

.wrg-trust-item {
  color: var(--wrg-text-muted);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ── Vertical Icons (Who We Help) ── */
.wrg-vertical-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────
   7. SECTION-SPECIFIC STYLES
   ───────────────────────────────────────────────── */

/* ── Hero ── */
.wrg-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-size: cover !important;
  background-position: center !important;
}
.wrg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10, 14, 23, 0.92) 0%,
    rgba(10, 14, 23, 0.75) 50%,
    rgba(10, 14, 23, 0.88) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.wrg-hero > .wp-block-kadence-rowlayout,
.wrg-hero > .wp-block-group,
.wrg-hero > * {
  position: relative;
  z-index: 1;
}

/* ── Section backgrounds ── */
.wrg-bg-secondary {
  background: var(--wrg-bg-secondary) !important;
}
.wrg-bg-primary {
  background: var(--wrg-bg-primary) !important;
}

/* ── Final CTA glow effect ── */
.wrg-cta-glow {
  position: relative;
}
.wrg-cta-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Lead Magnet Box ── */
.wrg-lead-magnet {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08) 0%,
    rgba(99, 102, 241, 0.06) 100%
  ) !important;
  border: 1px solid var(--wrg-border-accent) !important;
  border-radius: 20px !important;
  padding: 64px !important;
}
.wrg-lead-magnet input[type="email"] {
  background: var(--wrg-bg-primary) !important;
  border: 1px solid var(--wrg-border) !important;
  color: var(--wrg-text-primary) !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-family: 'DM Sans', sans-serif !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}
.wrg-lead-magnet input[type="email"]:focus {
  border-color: var(--wrg-accent) !important;
}
.wrg-lead-magnet input[type="email"]::placeholder {
  color: var(--wrg-text-muted);
}


/* ─────────────────────────────────────────────────
   8. UTILITY CLASSES
   ───────────────────────────────────────────────── */

/* Float animation */
@keyframes wrg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.wrg-float {
  animation: wrg-float 3s ease-in-out infinite;
}

/* Center text */
.wrg-text-center {
  text-align: center !important;
}

/* Max width constraint */
.wrg-max-600 {
  max-width: 600px;
}
.wrg-max-720 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}


/* ─────────────────────────────────────────────────
   9. KADENCE BLOCK OVERRIDES
   
   Fix Kadence-specific elements that don't
   inherit the dark theme properly
   ───────────────────────────────────────────────── */

/* Kadence Row backgrounds */
.wp-block-kadence-rowlayout {
  /* Ensure rows are transparent by default so page bg shows */
}

/* Kadence Buttons — override defaults */
.kb-buttons-wrap .kb-button {
  font-family: 'DM Sans', sans-serif !important;
}

/* Kadence Info Box — override text colours */
.kt-blocks-info-box-title {
  color: var(--wrg-text-primary) !important;
}
.kt-blocks-info-box-text {
  color: var(--wrg-text-secondary) !important;
}

/* Kadence Tabs — dark theme */
.wp-block-kadence-tabs .kt-tabs-title-list li a {
  color: var(--wrg-text-secondary) !important;
}
.wp-block-kadence-tabs .kt-tabs-title-list li.kt-tab-title-active a {
  color: var(--wrg-text-primary) !important;
  border-color: var(--wrg-accent) !important;
}

/* Kadence spacer — no background bleed */
.wp-block-kadence-spacer .kt-block-spacer {
  background: transparent !important;
}

/* Kadence accordion */
.kt-accordion-header-wrap .kt-blocks-accordion-header {
  background: var(--wrg-bg-card) !important;
  color: var(--wrg-text-primary) !important;
  border: 1px solid var(--wrg-border) !important;
}

/* WPForms overrides for dark theme */
.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form textarea,
.wpforms-container .wpforms-form select {
  background: var(--wrg-bg-card) !important;
  border: 1px solid var(--wrg-border) !important;
  color: var(--wrg-text-primary) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
}
.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form textarea:focus {
  border-color: var(--wrg-accent) !important;
  outline: none !important;
}
.wpforms-container .wpforms-form label {
  color: var(--wrg-text-secondary) !important;
}
.wpforms-container .wpforms-form .wpforms-submit {
  background: var(--wrg-gradient) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 32px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.wpforms-container .wpforms-form .wpforms-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35) !important;
}

/* Page title — hide on homepage */
.home .entry-hero-container-inner,
.home .page-title {
  display: none !important;
}


/* ─────────────────────────────────────────────────
   10. RESPONSIVE ADJUSTMENTS
   ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
  :root {
    --global-content-edge-padding: 24px;
  }
  
  .wrg-lead-magnet {
    padding: 40px !important;
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 36px !important;
    letter-spacing: -1px;
  }
  
  h2 {
    font-size: 28px !important;
  }
  
  .wrg-hero {
    min-height: auto;
    padding: 60px 0 !important;
  }
  
  section,
  .entry-content > .alignfull {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .wrg-lead-magnet {
    padding: 32px !important;
  }
  
  .wrg-testimonial-text {
    font-size: 18px !important;
  }
  
  .wrg-step-num {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
}


/* ═══════════════════════════════════════════════════════════
   WAVE ROCK GLOBAL — Homepage Template Styles
   
   ADD THIS to the bottom of your child theme style.css
   These classes support the PHP template (template-wrg-homepage.php)
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   LAYOUT SYSTEM
   ───────────────────────────────────────────────── */

.wrg-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.wrg-section {
    padding: 100px 0;
}

.wrg-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.wrg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.wrg-section-desc {
    font-size: 17px;
    color: var(--wrg-text-secondary);
    max-width: 600px;
    line-height: 1.7;
    margin-bottom: 56px;
}


/* ─────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────── */

.wrg-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    min-height: 85vh;
    padding-top: 80px;
    padding-bottom: 80px;
}

.wrg-hero-sub {
    font-size: 18px;
    color: var(--wrg-text-secondary);
    line-height: 1.7;
    margin-bottom: 40px;
    max-width: 520px;
}

.wrg-hero-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────
   WORKFLOW CARD (Hero Visual)
   ───────────────────────────────────────────────── */

.wrg-hero-visual {
    position: relative;
}

.wrg-workflow-card {
    background: var(--wrg-bg-card);
    border: 1px solid var(--wrg-border);
    border-radius: 16px;
    padding: 32px;
    position: relative;
    overflow: hidden;
}
.wrg-workflow-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--wrg-gradient);
}

.wrg-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.wrg-card-dots {
    display: flex;
    gap: 6px;
}
.wrg-card-dots span {
    width: 10px; height: 10px;
    border-radius: 50%;
}
.wrg-card-dots span:nth-child(1) { background: #EF4444; opacity: 0.7; }
.wrg-card-dots span:nth-child(2) { background: #F59E0B; opacity: 0.7; }
.wrg-card-dots span:nth-child(3) { background: #22C55E; opacity: 0.7; }

.wrg-card-title-bar {
    font-family: var(--wrg-font-mono);
    font-size: 12px;
    color: var(--wrg-text-muted);
}

.wrg-workflow-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wrg-workflow-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-family: var(--wrg-font-mono);
    font-size: 13px;
    color: var(--wrg-text-secondary);
    animation: wrg-fadeSlide 0.6s ease-out both;
}
.wrg-workflow-line:nth-child(2) { animation-delay: 0.15s; }
.wrg-workflow-line:nth-child(3) { animation-delay: 0.3s; }
.wrg-workflow-line:nth-child(4) { animation-delay: 0.45s; }

@keyframes wrg-fadeSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.wrg-wf-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.wrg-wf-blue   { background: rgba(59,130,246,0.15); color: var(--wrg-accent-bright); }
.wrg-wf-green  { background: rgba(34,197,94,0.15); color: #4ADE80; }
.wrg-wf-amber  { background: rgba(245,158,11,0.15); color: #FBBF24; }
.wrg-wf-purple { background: rgba(168,85,247,0.15); color: #C084FC; }

.wrg-wf-status {
    margin-left: auto;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 100px;
    font-weight: 500;
    white-space: nowrap;
}
.wrg-wf-done    { background: rgba(34,197,94,0.1); color: #4ADE80; }
.wrg-wf-running { background: rgba(59,130,246,0.1); color: var(--wrg-accent-bright); }
.wrg-wf-queued  { background: rgba(148,163,184,0.1); color: var(--wrg-text-muted); }

/* Floating stat cards */
.wrg-float-stat {
    position: absolute;
    background: var(--wrg-bg-card);
    border: 1px solid var(--wrg-border);
    border-radius: 12px;
    padding: 16px 20px;
    backdrop-filter: blur(12px);
    animation: wrg-float 3s ease-in-out infinite;
}
.wrg-float-top {
    top: -20px; right: -20px;
    animation-delay: 0.5s;
}
.wrg-float-bottom {
    bottom: -16px; left: -20px;
}

.wrg-stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--wrg-accent-bright);
    font-family: var(--wrg-font-mono);
}
.wrg-stat-label {
    font-size: 12px;
    color: var(--wrg-text-muted);
    margin-top: 2px;
}


/* ─────────────────────────────────────────────────
   TRUST BAR
   ───────────────────────────────────────────────── */

.wrg-trust-section {
    border-top: 1px solid var(--wrg-border);
    border-bottom: 1px solid var(--wrg-border);
    background: var(--wrg-bg-primary);
}

.wrg-trust-inner {
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 48px 40px;
}

.wrg-trust-items {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.wrg-trust-item svg {
    color: var(--wrg-accent);
    flex-shrink: 0;
}


/* ─────────────────────────────────────────────────
   PROBLEM CARDS — Icon sizing
   ───────────────────────────────────────────────── */

.wrg-card-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}


/* ─────────────────────────────────────────────────
   PROCESS STEPS
   ───────────────────────────────────────────────── */

.wrg-process-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
}
.wrg-process-steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(16.67% + 32px);
    right: calc(16.67% + 32px);
    height: 2px;
    background: linear-gradient(90deg, var(--wrg-accent), var(--wrg-border-accent), var(--wrg-accent));
    opacity: 0.3;
}

.wrg-step {
    text-align: center;
}
.wrg-step p {
    max-width: 300px;
    margin: 0 auto;
}


/* ─────────────────────────────────────────────────
   TESTIMONIAL
   ───────────────────────────────────────────────── */

.wrg-testimonial-section {
    border-top: 1px solid var(--wrg-border);
    border-bottom: 1px solid var(--wrg-border);
}

.wrg-testimonial-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}


/* ─────────────────────────────────────────────────
   VERTICAL CARDS (Who We Help)
   ───────────────────────────────────────────────── */

.wrg-vertical-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--wrg-bg-card);
    border: 1px solid var(--wrg-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}
.wrg-vertical-card:hover {
    border-color: var(--wrg-border-accent);
}
.wrg-vertical-card h4 {
    margin-bottom: 6px;
}
.wrg-vertical-card p {
    font-size: 14px;
    color: var(--wrg-text-secondary);
    line-height: 1.5;
}


/* ─────────────────────────────────────────────────
   LEAD MAGNET
   ───────────────────────────────────────────────── */

.wrg-lead-magnet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.wrg-lead-content h3 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 16px;
}
.wrg-lead-content p {
    color: var(--wrg-text-secondary);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.wrg-email-capture {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.wrg-email-capture input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid var(--wrg-border);
    background: var(--wrg-bg-primary);
    color: var(--wrg-text-primary);
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.2s ease;
}
.wrg-email-capture input[type="email"]:focus {
    border-color: var(--wrg-accent);
}
.wrg-email-capture input[type="email"]::placeholder {
    color: var(--wrg-text-muted);
}

.wrg-lead-checklist {
    display: flex;
    flex-direction: column;
    gap: 14px;
}


/* ─────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────── */

.wrg-cta-desc {
    color: var(--wrg-text-secondary);
    font-size: 18px;
    margin-bottom: 40px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

.wrg-btn-lg {
    font-size: 17px !important;
    padding: 16px 40px !important;
}


/* ─────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .wrg-container {
        padding: 0 24px;
    }
    .wrg-hero-grid {
        gap: 48px;
    }
}

@media (max-width: 900px) {
    .wrg-hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .wrg-hero-visual {
        display: none;
    }
    .wrg-grid-3,
    .wrg-process-steps {
        grid-template-columns: 1fr;
    }
    .wrg-process-steps::before {
        display: none;
    }
    .wrg-grid-2 {
        grid-template-columns: 1fr;
    }
    .wrg-lead-magnet {
        grid-template-columns: 1fr;
        padding: 40px !important;
    }
    .wrg-section {
        padding: 60px 0;
    }
    .wrg-trust-inner {
        flex-direction: column;
        gap: 20px;
    }
    .wrg-trust-items {
        flex-direction: column;
        gap: 16px;
    }
    .wrg-float-stat {
        display: none;
    }
}

@media (max-width: 480px) {
    .wrg-container {
        padding: 0 16px;
    }
    .wrg-card {
        padding: 24px !important;
    }
    .wrg-lead-magnet {
        padding: 24px !important;
    }
}

/* ── Card text brightness fix ── */
.wrg-card h3 {
    color: #F1F5F9 !important;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
}

.wrg-card p {
    color: #CBD5E1 !important;
    font-size: 15px;
    line-height: 1.6;
}

.wrg-card .wrg-service-num {
    color: rgba(59, 130, 246, 0.18) !important;
}

/* Vertical cards too */
.wrg-vertical-card h4 {
    color: #F1F5F9 !important;
}

.wrg-vertical-card p {
    color: #CBD5E1 !important;
}

/* Section headings and descriptions */
.wrg-section h2 {
    color: #F1F5F9 !important;
}

.wrg-section-desc {
    color: #94A3B8 !important;
}

/* Testimonial */
.wrg-testimonial-text {
    color: #E2E8F0 !important;
}

/* Lead magnet */
.wrg-lead-content h3 {
    color: #F1F5F9 !important;
}

.wrg-lead-content p {
    color: #94A3B8 !important;
}

/* CTA section */
.wrg-cta-desc {
    color: #94A3B8 !important;
}

/* ═══════════════════════════════════════════════════════════
   WRG POLISH PATCH — Prototype Parity Fixes
   
   Add this to the BOTTOM of your style.css
   Addresses every visual gap between live site and prototype
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   HERO — Bigger, bolder, brighter
   ───────────────────────────────────────────────── */

/* H1 — larger, near-white, more weight */
.wrg-hero h1 {
    font-size: clamp(40px, 5vw, 60px) !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    line-height: 1.08 !important;
    letter-spacing: -2px !important;
    margin-bottom: 28px !important;
}

/* Gradient text — more vivid, brighter blue */
.wrg-hero .wrg-gradient-text {
    background: linear-gradient(135deg, #4F8EFF, #818CF8) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Hero subtext — slightly brighter */
.wrg-hero-sub {
    color: #B0BEC5 !important;
    font-size: 17px !important;
    line-height: 1.75 !important;
    max-width: 480px !important;
}

/* Hero background — stronger gradient for text readability
   while keeping network visible on the right */
.wrg-hero::before {
    background: linear-gradient(
        to right,
        rgba(10, 14, 23, 0.95) 0%,
        rgba(10, 14, 23, 0.88) 40%,
        rgba(10, 14, 23, 0.65) 70%,
        rgba(10, 14, 23, 0.75) 100%
    ) !important;
}

/* Badge — tighter */
.wrg-badge {
    margin-bottom: 28px !important;
    font-size: 11.5px !important;
}

/* Hero content — more vertical padding, centered better */
.wrg-hero-grid {
    min-height: 88vh !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}


/* ─────────────────────────────────────────────────
   WORKFLOW CARD — Tighter, more polished
   ───────────────────────────────────────────────── */

.wrg-workflow-card {
    padding: 28px !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

.wrg-card-header {
    margin-bottom: 20px !important;
}

.wrg-workflow-line {
    padding: 10px 14px !important;
    gap: 10px !important;
    font-size: 12.5px !important;
}

.wrg-workflow-line span:not(.wrg-wf-status):not(.wrg-wf-icon) {
    flex: 1;
}

/* Floating stats — bolder positioning */
.wrg-float-top {
    top: -24px !important;
    right: -28px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.wrg-float-bottom {
    bottom: -20px !important;
    left: -28px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.wrg-stat-num {
    font-size: 28px !important;
    font-weight: 700 !important;
}


/* ─────────────────────────────────────────────────
   BUTTONS — Match prototype exactly
   ───────────────────────────────────────────────── */

.wrg-btn-primary,
a.wrg-btn-primary {
    padding: 15px 34px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    letter-spacing: 0.1px !important;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25) !important;
}

.wrg-btn-secondary,
a.wrg-btn-secondary {
    padding: 15px 34px !important;
    border-color: rgba(148, 163, 184, 0.15) !important;
}


/* ─────────────────────────────────────────────────
   TRUST BAR — Crisper
   ───────────────────────────────────────────────── */

.wrg-trust-label {
    font-size: 10px !important;
    letter-spacing: 2.5px !important;
    color: #4B5563 !important;
}

.wrg-trust-item {
    font-size: 13.5px !important;
    color: #6B7280 !important;
}

.wrg-trust-item svg {
    opacity: 0.7;
}


/* ─────────────────────────────────────────────────
   SECTION HEADINGS — Stronger hierarchy
   ───────────────────────────────────────────────── */

.wrg-section h2 {
    font-size: clamp(30px, 3.2vw, 42px) !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    letter-spacing: -1px !important;
    margin-bottom: 16px !important;
}

.wrg-section-label {
    font-size: 11.5px !important;
    letter-spacing: 2.5px !important;
    margin-bottom: 14px !important;
}

.wrg-section-desc {
    font-size: 16.5px !important;
    color: #94A3B8 !important;
    line-height: 1.7 !important;
    margin-bottom: 48px !important;
}


/* ─────────────────────────────────────────────────
   CARDS — More depth, sharper text
   ───────────────────────────────────────────────── */

.wrg-card {
    border-color: rgba(148, 163, 184, 0.06) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}

.wrg-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

.wrg-card h3 {
    color: #F1F5F9 !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    margin-bottom: 10px !important;
}

.wrg-card p {
    color: #B0BEC5 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}

.wrg-card-icon {
    margin-bottom: 18px !important;
}


/* ─────────────────────────────────────────────────
   SERVICE CARDS — Number more ghostly, tags sharper
   ───────────────────────────────────────────────── */

.wrg-service-num {
    font-size: 52px !important;
    color: rgba(59, 130, 246, 0.10) !important;
    margin-bottom: 12px !important;
}

.wrg-service-tag {
    font-size: 11.5px !important;
    letter-spacing: 0.3px !important;
}


/* ─────────────────────────────────────────────────
   PROCESS STEPS — Cleaner circles
   ───────────────────────────────────────────────── */

.wrg-step h3 {
    color: #F1F5F9 !important;
    font-size: 18px !important;
    margin-bottom: 10px !important;
}

.wrg-step p {
    color: #94A3B8 !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
}

.wrg-step-num {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.08) !important;
}


/* ─────────────────────────────────────────────────
   TESTIMONIAL — More presence
   ───────────────────────────────────────────────── */

.wrg-testimonial-text {
    font-size: 23px !important;
    color: #E2E8F0 !important;
    line-height: 1.7 !important;
}

.wrg-quote-mark {
    font-size: 80px !important;
    margin-bottom: -20px !important;
}

.wrg-testimonial-author strong {
    color: #CBD5E1 !important;
}


/* ─────────────────────────────────────────────────
   VERTICAL CARDS — Brighter text
   ───────────────────────────────────────────────── */

.wrg-vertical-card {
    padding: 28px !important;
    border-color: rgba(148, 163, 184, 0.06) !important;
}

.wrg-vertical-card h4 {
    color: #F1F5F9 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.wrg-vertical-card p {
    color: #94A3B8 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}


/* ─────────────────────────────────────────────────
   LEAD MAGNET — More presence
   ───────────────────────────────────────────────── */

.wrg-lead-content h3 {
    font-size: 34px !important;
    color: #F1F5F9 !important;
    letter-spacing: -0.8px !important;
}

.wrg-lead-content p {
    color: #94A3B8 !important;
}

.wrg-check-item {
    font-size: 14.5px !important;
    color: #B0BEC5 !important;
}


/* ─────────────────────────────────────────────────
   FINAL CTA — Commanding
   ───────────────────────────────────────────────── */

.wrg-cta-glow h2 {
    font-size: clamp(34px, 3.8vw, 50px) !important;
}

.wrg-cta-desc {
    font-size: 17px !important;
    color: #94A3B8 !important;
}

.wrg-btn-lg {
    font-size: 16.5px !important;
    padding: 17px 42px !important;
}


/* ─────────────────────────────────────────────────
   FOOTER — Subtle polish
   ───────────────────────────────────────────────── */

.wrg-custom-footer {
    padding: 40px 40px !important;
}

.wrg-footer-copy {
    font-size: 13px !important;
    color: #4B5563 !important;
}

.wrg-footer-links a {
    color: #4B5563 !important;
    font-size: 13px !important;
}
.wrg-footer-links a:hover {
    color: #94A3B8 !important;
}


/* ─────────────────────────────────────────────────
   SPACING — Tighter between sections
   ───────────────────────────────────────────────── */

.wrg-section {
    padding: 90px 0 !important;
}

.wrg-testimonial-section {
    padding: 80px 0 !important;
}

/* ── Header & Footer (always active) ── */
.wrg-custom-header{position:sticky;top:0;z-index:9999;background:rgba(10,14,23,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(148,163,184,0.08);padding:0 40px}
.wrg-nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.wrg-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.wrg-logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#3B82F6,#6366F1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:16px;color:#fff}
.wrg-logo-text{font-family:'DM Sans',sans-serif;font-weight:600;font-size:18px;color:#F1F5F9;letter-spacing:-0.3px}
.wrg-main-nav{display:flex;align-items:center;gap:8px}
.wrg-nav-links{display:flex;gap:32px;list-style:none;margin:0;padding:0;align-items:center}
.wrg-nav-links li{list-style:none}
.wrg-nav-links a{color:#94A3B8;text-decoration:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;transition:color .2s}
.wrg-nav-links a:hover,.wrg-nav-links .current-menu-item a{color:#F1F5F9}
.wrg-nav-cta{display:inline-flex;align-items:center;margin-left:24px;padding:10px 24px;background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff!important;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:600;text-decoration:none;transition:transform .2s,box-shadow .2s}
.wrg-nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(59,130,246,0.3);color:#fff!important}
.wrg-mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.wrg-mobile-toggle span{display:block;width:24px;height:2px;background:#F1F5F9;border-radius:2px}
.wrg-custom-footer{border-top:1px solid rgba(148,163,184,0.08);padding:48px 40px;background:#0A0E17}
.wrg-footer-inner{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.wrg-footer-left{display:flex;align-items:center;gap:8px}
.wrg-footer-logo-mark{width:28px;height:28px;background:linear-gradient(135deg,#3B82F6,#6366F1);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:13px;color:#fff}
.wrg-footer-copy{font-size:13px;color:#64748B}
.wrg-footer-links{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.wrg-footer-links a{color:#64748B;text-decoration:none;font-size:13px;transition:color .2s}
.wrg-footer-links a:hover{color:#94A3B8}
@media(max-width:900px){.wrg-custom-header{padding:0 20px}.wrg-mobile-toggle{display:flex}.wrg-main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:#0A0E17;border-bottom:1px solid rgba(148,163,184,0.08);padding:24px;flex-direction:column}.wrg-main-nav.wrg-nav-open{display:flex}.wrg-nav-links{flex-direction:column;gap:0;width:100%}.wrg-nav-links a{display:block;padding:12px 0;font-size:16px;border-bottom:1px solid rgba(148,163,184,0.05)}.wrg-nav-cta{margin-left:0;margin-top:16px;text-align:center;justify-content:center}}
@media(max-width:768px){.wrg-custom-footer{padding:32px 20px}.wrg-footer-inner{flex-direction:column;text-align:center}.wrg-footer-links{flex-wrap:wrap;justify-content:center;gap:16px}}


/* ═══════════════════════════════════════════════════════════
   INNER PAGES — Shared Styles
   Append to bottom of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Page Hero ── */
.wrg-page-hero {
    padding: 140px 0 80px;
    background: #0A0E17;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}
.wrg-page-hero h1 {
    font-size: clamp(36px, 4.5vw, 54px) !important;
    font-weight: 700 !important;
    color: #F1F5F9 !important;
    letter-spacing: -1.5px !important;
    line-height: 1.1 !important;
}
.wrg-page-hero-sub {
    font-size: 18px;
    color: #B0BEC5;
    line-height: 1.7;
    max-width: 640px;
    margin-top: 20px;
}

/* ── Service Block Header (big number + heading) ── */
.wrg-service-block-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.wrg-service-block-header .wrg-service-num {
    font-size: 64px !important;
    line-height: 0.85 !important;
    flex-shrink: 0;
    margin-bottom: 0 !important;
}
.wrg-service-block-header h2 {
    margin-bottom: 8px !important;
    color: #F1F5F9 !important;
}

/* ── Service Lead Text ── */
.wrg-service-lead {
    font-size: 17px;
    color: #B0BEC5;
    line-height: 1.6;
    max-width: 600px;
}

/* ── Lists Inside Cards ── */
.wrg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.wrg-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
    font-size: 14.5px;
    color: #B0BEC5;
    line-height: 1.6;
}
.wrg-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #3B82F6;
    font-size: 13px;
}

/* ── Callout Box ── */
.wrg-callout-box {
    background: #1A2035;
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 16px;
    padding: 48px;
}
.wrg-callout-box h3 {
    color: #F1F5F9 !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
}
.wrg-callout-box > p {
    color: #B0BEC5;
}
.wrg-callout-item {
    color: #94A3B8;
    font-size: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    line-height: 1.5;
}
.wrg-callout-item:last-child {
    border-bottom: none;
}

/* ── Inner Page Card h4 Fix ── */
.wrg-card h4 {
    color: #F1F5F9 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    margin-bottom: 10px !important;
}

/* ── Inner Page CTA Section ── */
.wrg-inner-cta {
    text-align: center;
    padding: 90px 0 !important;
}
.wrg-inner-cta h2 {
    color: #F1F5F9 !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wrg-page-hero {
        padding: 100px 0 60px;
    }
    .wrg-service-block-header {
        flex-direction: column;
        gap: 12px;
    }
    .wrg-service-block-header .wrg-service-num {
        font-size: 48px !important;
    }
    .wrg-callout-box {
        padding: 32px;
    }
}

/* ── Services Page Font Brightness Fix ── */
.wrg-card .wrg-list li {
    color: #CBD5E1 !important;
}
.wrg-card h4 {
    color: #F1F5F9 !important;
}
.wrg-service-lead {
    color: #B0BEC5 !important;
}
.wrg-page-hero h1 {
    color: #F1F5F9 !important;
}
.wrg-page-hero-sub {
    color: #B0BEC5 !important;
}
.wrg-callout-box p {
    color: #B0BEC5 !important;
}
.wrg-callout-item {
    color: #CBD5E1 !important;
}

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS — Timeline Styles
   Append to bottom of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Timeline Step ── */
.wrg-timeline-step {
    display: flex;
    gap: 40px;
    margin-bottom: 80px;
}
.wrg-timeline-step:last-child {
    margin-bottom: 0;
}

/* ── Timeline Marker (circle + vertical line) ── */
.wrg-timeline-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.wrg-timeline-line {
    width: 2px;
    flex: 1;
    background: linear-gradient(180deg, rgba(59,130,246,0.3), transparent);
    margin-top: 16px;
    min-height: 40px;
}

/* ── Timeline Content ── */
.wrg-timeline-content {
    flex: 1;
    padding-top: 18px;
}
.wrg-timeline-content h2 {
    font-size: 28px !important;
    margin-bottom: 12px !important;
    color: #F1F5F9 !important;
}
.wrg-timeline-content p {
    color: #CBD5E1 !important;
}

/* ── Outcome Callout ── */
.wrg-timeline-outcome {
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(59, 130, 246, 0.06);
    border-left: 3px solid #3B82F6;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    color: #60A5FA;
}
.wrg-timeline-outcome strong {
    color: #F1F5F9;
}

/* ── Promise Icons ── */
.wrg-promise-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wrg-timeline-step {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 60px;
    }
    .wrg-timeline-marker {
        flex-direction: row;
        gap: 16px;
    }
    .wrg-timeline-line {
        width: auto;
        height: 2px;
        margin-top: 0;
        min-height: 0;
        flex: 1;
    }
    .wrg-timeline-content {
        padding-top: 0;
    }
    .wrg-timeline-content h2 {
        font-size: 24px !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   WHO WE HELP — Vertical Sections
   Append to bottom of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Full-Width Vertical Block ── */
.wrg-vertical-full {
    margin-bottom: 32px;
}
.wrg-vertical-full-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}
.wrg-vertical-full-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}
.wrg-vertical-full-header h2 {
    margin-bottom: 0 !important;
    color: #F1F5F9 !important;
}

/* ── Section Divider ── */
.wrg-section-divider {
    height: 1px;
    background: rgba(148, 163, 184, 0.08);
    margin: 64px 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wrg-vertical-full-header {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Vertical Icon Size Fix ── */
.wrg-vertical-full-icon {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE — Styles
   Append to bottom of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── Narrow Content Column ── */
.wrg-about-narrow {
    max-width: 800px;
}

/* ── Lead Paragraph ── */
.wrg-about-lead {
    font-size: 22px !important;
    color: #E2E8F0 !important;
    line-height: 1.6 !important;
    margin-bottom: 24px !important;
    font-weight: 500;
}

/* ── Body Paragraphs ── */
.wrg-about-body {
    font-size: 16px;
    color: #B0BEC5;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* ── Emoji Icons ── */
.wrg-about-icon {
    font-size: 36px;
    margin-bottom: 16px;
}

/* ── Outcome Items ── */
.wrg-outcome-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #1A2035;
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 12px;
}
.wrg-outcome-num {
    font-family: 'Space Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: rgba(59, 130, 246, 0.2);
    flex-shrink: 0;
    width: 56px;
}
.wrg-outcome-item p {
    font-size: 16px;
    color: #B0BEC5;
    line-height: 1.5;
    margin: 0;
}

/* ── Closing Statement ── */
.wrg-about-closing {
    margin-top: 48px;
    font-size: 20px;
    color: #B0BEC5;
    max-width: 600px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wrg-outcome-item {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ── About Page Fixes ── */
.wrg-about-lead {
    color: #F1F5F9 !important;
}
.wrg-about-body {
    color: #CBD5E1 !important;
}
.wrg-about-closing {
    color: #CBD5E1 !important;
}
.wrg-outcome-item p {
    color: #CBD5E1 !important;
}

/* ── Reduce spacing on About page ── */
.wrg-page-hero {
    padding: 120px 0 60px !important;
}
.wrg-about-narrow {
    padding-top: 0 !important;
}
.wrg-section.wrg-bg-primary .wrg-about-narrow {
    margin-top: -20px;
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE — Styles
   Append to bottom of style.css
   ═══════════════════════════════════════════════════════════ */

/* ── 2-Column Layout ── */
.wrg-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: flex-start;
}

/* ── Intro Text ── */
.wrg-contact-intro {
    color: #B0BEC5;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* ── Form Styling ── */
.wrg-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.wrg-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #CBD5E1;
    margin-bottom: 8px;
}
.wrg-form-group input,
.wrg-form-group textarea {
    width: 100%;
    padding: 14px 20px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    background: #1A2035;
    color: #F1F5F9;
    font-size: 15px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}
.wrg-form-group input:focus,
.wrg-form-group textarea:focus {
    border-color: #3B82F6;
}
.wrg-form-group input::placeholder,
.wrg-form-group textarea::placeholder {
    color: #64748B;
}
.wrg-form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ── WPForms Dark Theme Override ── */
.wrg-contact-form-wrap .wpforms-container .wpforms-form input[type="text"],
.wrg-contact-form-wrap .wpforms-container .wpforms-form input[type="email"],
.wrg-contact-form-wrap .wpforms-container .wpforms-form textarea,
.wrg-contact-form-wrap .wpforms-container .wpforms-form select {
    background: #1A2035 !important;
    border: 1px solid rgba(148, 163, 184, 0.08) !important;
    color: #F1F5F9 !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.wrg-contact-form-wrap .wpforms-container .wpforms-form input:focus,
.wrg-contact-form-wrap .wpforms-container .wpforms-form textarea:focus {
    border-color: #3B82F6 !important;
    outline: none !important;
}
.wrg-contact-form-wrap .wpforms-container .wpforms-form label {
    color: #CBD5E1 !important;
    font-size: 14px !important;
}
.wrg-contact-form-wrap .wpforms-container .wpforms-form .wpforms-submit {
    background: linear-gradient(135deg, #3B82F6, #6366F1) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 32px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.wrg-contact-form-wrap .wpforms-container .wpforms-form .wpforms-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35) !important;
}

/* ── Expect Sidebar ── */
.wrg-expect-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
}
.wrg-expect-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.wrg-expect-icon {
    font-size: 24px;
    flex-shrink: 0;
    width: 36px;
    text-align: center;
}
.wrg-expect-item h4 {
    color: #F1F5F9 !important;
    font-size: 15px !important;
    margin-bottom: 4px !important;
}
.wrg-expect-item p {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .wrg-contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ── Contact Page Form Fixes ── */
.wrg-contact-form-wrap .wpforms-form {
    max-width: 100% !important;
}
.wrg-contact-form-wrap .wpforms-form .wpforms-field {
    padding: 0 0 16px 0 !important;
}
.wrg-contact-form-wrap .wpforms-form input[type="text"],
.wrg-contact-form-wrap .wpforms-form input[type="email"],
.wrg-contact-form-wrap .wpforms-form textarea {
    width: 100% !important;
    background: #1A2035 !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    color: #F1F5F9 !important;
    border-radius: 10px !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-family: 'DM Sans', sans-serif !important;
}
.wrg-contact-form-wrap .wpforms-form input:focus,
.wrg-contact-form-wrap .wpforms-form textarea:focus {
    border-color: #3B82F6 !important;
    outline: none !important;
    box-shadow: none !important;
}
.wrg-contact-form-wrap .wpforms-form label,
.wrg-contact-form-wrap .wpforms-form .wpforms-field-label {
    color: #CBD5E1 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.wrg-contact-form-wrap .wpforms-form .wpforms-field-sublabel {
    color: #64748B !important;
    font-size: 12px !important;
}
.wrg-contact-form-wrap .wpforms-form .wpforms-submit-container {
    padding-top: 8px !important;
}
.wrg-contact-form-wrap .wpforms-form button[type="submit"],
.wrg-contact-form-wrap .wpforms-form .wpforms-submit {
    width: 100% !important;
    background: linear-gradient(135deg, #3B82F6, #6366F1) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 16px 32px !important;
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.wrg-contact-form-wrap .wpforms-form button[type="submit"]:hover,
.wrg-contact-form-wrap .wpforms-form .wpforms-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35) !important;
}
.wrg-contact-form-wrap .wpforms-form .wpforms-required-label {
    color: #EF4444 !important;
}
.wrg-contact-intro {
    color: #B0BEC5 !important;
}

/* Align sidebar card to top of form */
.wrg-contact-sidebar .wrg-card {
    position: sticky;
    top: 100px;
}

/* ── Logo Image ── */
/* ── Logo Mark Container ── */
.wrg-logo-img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.1);
    padding: 4px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}
.wrg-footer-logo-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}