/*
Theme Name: Citelane AI Growth
Theme URI: https://citelane.com
Author: Citelane
Author URI: https://citelane.com
Description: Professional SaaS SEO, AEO & GEO Agency WordPress Theme for Citelane. Built for SaaS startups from Seed to Series C. Includes full support for custom post types, schema markup, AI visibility features, and advanced SEO optimization.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
License URI: https://citelane.com/license
Text Domain: citelane-ai-growth
Tags: business, saas, seo, agency, custom-header, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Space+Mono:wght@400;700&display=swap');

/* ============================================
   GLOBAL DRAG/SELECT GUARDS
   - Suppress native image-drag and selection-drag on
     decorative media so words can be selected without
     accidentally dragging logos, icons, or SVGs.
   - Body text remains fully selectable.
   ============================================ */
img, svg, picture, video, canvas {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
img {
  pointer-events: auto;
}
img[draggable="false"] {
  pointer-events: none;
}
/* Decorative wrappers: never selectable, never draggable */
.no-drag,
.hero-3d-scene,
.svc-hero-visual,
.orbit-item, .orbit-card, .orbit-label,
.aeo-card, .geo-card, .cw-card, .lb-card, .pr-card,
.aeo-particle, .geo-particle, .cw-particle, .lb-particle, .pr-particle,
.pr-megaphone, .lb-chain, .cw-rocket, .aeo-rocket,
.aeo-orbit, .aeo-orbit-2, .geo-orbit, .geo-orbit-2,
.cw-orbit, .cw-orbit-2, .lb-orbit, .lb-orbit-2,
.pr-orbit, .pr-orbit-2, .pr-compound,
.svc-vis-glow, .stack-icon, .footer-logo, .site-logo {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
/* Prevent ghost-drag of inline SVGs anywhere on the site */
svg, svg * {
  -webkit-user-drag: none;
  user-drag: none;
}

/* ============================================
   CSS CUSTOM PROPERTIES (BRAND TOKENS)
   ============================================ */
:root {
  --radius: 0.75rem;

  /* Crimson palette */
  --crimson:       #b1003e;
  --crimson-light: #d4205a;
  --crimson-dark:  #8a002f;

  /* Cream palette */
  --cream:       oklch(96% .015 80);
  --cream-warm:  oklch(93% .02 70);
  --cream-light: oklch(98% .008 80);
  --cream-mid:   oklch(91% .018 70);

  /* Charcoal palette */
  --charcoal:       oklch(35% 0 0);
  --charcoal-light: oklch(45% 0 0);
  --charcoal-deep:  oklch(27% 0 0);

  /* Semantic mappings */
  --background:            oklch(98% .008 80);
  --foreground:            oklch(27% 0 0);
  --card:                  oklch(100% 0 0);
  --card-foreground:       oklch(27% 0 0);
  --primary:               #b1003e;
  --primary-foreground:    #ffffff;
  --secondary:             oklch(96% .015 80);
  --secondary-foreground:  oklch(27% 0 0);
  --muted:                 oklch(93% .02 70);
  --muted-foreground:      oklch(45% 0 0);
  --accent:                oklch(91% .018 70);
  --accent-foreground:     oklch(27% 0 0);
  --border:                oklch(91% .018 70);
  --input:                 oklch(91% .018 70);
  --ring:                  #b1003e;

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

  /* Typography */
  --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow:    0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 3px;
}

ul, ol { list-style: none; }

button { cursor: pointer; border: none; background: none; font-family: inherit; }

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--charcoal-deep);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 640px)  { .container { padding: 0 var(--space-6); } }
@media (min-width: 1024px) { .container { padding: 0 var(--space-8); } }

.container-sm { max-width: 768px; margin: 0 auto; padding: 0 var(--space-4); }
.container-md { max-width: 900px; margin: 0 auto; padding: 0 var(--space-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--crimson);
  display: block;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--charcoal-light);
  display: block;
}

.heading-display {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--charcoal-deep);
}

.text-primary  { color: var(--primary); }
.text-muted    { color: var(--muted-foreground); }
.text-cream    { color: var(--cream); }

.bg-background { background-color: var(--background); }
.bg-card       { background-color: var(--card); }
.bg-primary    { background-color: var(--primary); }
.bg-charcoal-deep { background-color: var(--charcoal-deep); }
.bg-muted      { background-color: var(--muted); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
.btn-primary:hover {
  background-color: var(--crimson-dark);
  border-color: var(--crimson-dark);
  color: #fff;
}

.btn-outline {
  background-color: transparent;
  color: var(--charcoal-deep);
  border-color: var(--border);
}
.btn-outline:hover {
  background-color: var(--charcoal-deep);
  color: var(--cream);
  border-color: var(--charcoal-deep);
}

.btn-outline-white {
  background-color: transparent;
  color: #fff;
  border-color: #fff;
}
.btn-outline-white:hover {
  background-color: #fff;
  color: var(--charcoal-deep);
}

.btn-outline-cream {
  background-color: transparent;
  color: var(--cream);
  border-color: var(--cream);
}
.btn-outline-cream:hover {
  background-color: var(--cream);
  color: var(--charcoal-deep);
}

.btn-dark {
  background-color: var(--charcoal-deep);
  color: var(--cream);
  border-color: var(--charcoal-deep);
}
.btn-dark:hover {
  background-color: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--cream);
}

.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }

/* ============================================
   CARDS
   ============================================ */
.card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  background-color: rgba(192,57,43,0.08);
  color: var(--crimson);
  flex-shrink: 0;
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: var(--space-12) 0; }
.section-sm { padding: var(--space-8) 0; }
@media (min-width: 768px) { .section { padding: var(--space-16) 0; } }

.section-hero {
  padding-top: var(--space-20);
  padding-bottom: var(--space-16);
}
@media (min-width: 768px) {
  .section-hero {
    padding-top: var(--space-28);
    padding-bottom: var(--space-20);
  }
}

/* ============================================
   BADGE
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-primary {
  background-color: rgba(192,57,43,0.08);
  color: var(--crimson);
  border: 1px solid rgba(192,57,43,0.2);
}
.badge-muted {
  background-color: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

/* ============================================
   GRID LAYOUTS
   ============================================ */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================
   DIVIDER
   ============================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

/* ============================================
   CHECK LIST
   ============================================ */
.check-list { display: flex; flex-direction: column; gap: var(--space-3); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: 0.9375rem;
  color: var(--charcoal-light);
}
.check-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C0392B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 2px;
}

/* ============================================
   WORDPRESS ADMIN BAR - REMOVE TOP MARGIN
   ============================================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}
.admin-bar #site-header {
  top: 0 !important;
}
/* Hide the admin bar entirely even if WP injects it */
#wpadminbar {
  display: none !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* ---- Header explicit layout (no Tailwind dependency) ---- */

/* Header base */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background-color: rgba(253,250,246,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}

/* Push content below fixed header */
body > main {
  padding-top: 4rem;
}

/* Header inner flex row */
#site-header > div > div {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}

/* Desktop nav */
#site-header nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}
@media (min-width: 1024px) {
  #site-header nav { display: flex !important; }
}

/* Desktop CTA */
.header-cta-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .header-cta-desktop { display: flex; align-items: center; gap: 0.75rem; }
}
.header-cta-desktop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary);
  color: #fff;
  padding: 0.5rem 1.125rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: background-color 0.15s;
}
.header-cta-desktop a:hover {
  background-color: var(--crimson-dark);
  color: #fff;
}

/* Mobile toggle */
#mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--foreground);
}
@media (min-width: 1024px) {
  #mobile-menu-toggle { display: none; }
}

/* Desktop nav dropdown panel */
.nav-dropdown-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  width: 15rem;
  background-color: var(--card);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08);
  padding: 0.25rem;
  z-index: 50;
}
.nav-dropdown-wrap { position: relative; }

/* Dropdown items - full native CSS, no Tailwind dependency */
.nav-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background-color 0.15s;
  color: inherit;
}
.nav-dropdown-panel a + a { margin-top: 1px; }
.nav-dropdown-panel a:hover {
  background-color: var(--muted);
}
.nav-dropdown-panel .nav-icon-wrap {
  flex-shrink: 0;
  margin-top: 0;
  padding: 6px;
  border-radius: 8px;
  background: rgba(177,0,62,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.nav-dropdown-panel a:hover .nav-icon-wrap {
  background: var(--primary);
}
.nav-dropdown-panel a:hover .nav-icon-wrap .nav-icon {
  stroke: #fff;
}
.nav-dropdown-panel .nav-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nav-dropdown-panel .nav-item-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal-deep);
  line-height: 1.3;
}
.nav-dropdown-panel .nav-item-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* Mobile menu panel */
#mobile-menu {
  position: fixed;
  left: 0; right: 0;
  top: 4rem; bottom: 0;
  background-color: var(--background);
  z-index: 40;
  overflow-y: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(253,250,246,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: var(--space-4);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--charcoal-deep);
  letter-spacing: -0.03em;
  text-decoration: none;
  flex-shrink: 0;
}
.site-logo span { color: var(--crimson); }

/* Desktop nav */
.main-nav {
  display: none;
  align-items: center;
  gap: var(--space-1);
}
@media (min-width: 1024px) { .main-nav { display: flex; } }

.main-nav a,
.main-nav button {
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--charcoal-light);
  transition: color 0.15s, background-color 0.15s;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.main-nav a:hover,
.main-nav button:hover { color: var(--charcoal-deep); background-color: var(--muted); }
.main-nav a.current-menu-item { color: var(--primary); }

/* Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-toggle svg { transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-toggle svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s, transform 0.15s;
  transform: translateX(-50%) translateY(-4px);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0.875rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--charcoal-light);
  transition: all 0.15s;
}
.nav-dropdown-menu a:hover {
  background-color: var(--muted);
  color: var(--charcoal-deep);
}

/* Header CTA */
.header-cta {
  display: none;
  align-items: center;
  gap: var(--space-3);
}
@media (min-width: 1024px) { .header-cta { display: flex; } }

/* Mobile toggle */
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 0.5rem;
  color: var(--charcoal-deep);
  transition: background-color 0.15s;
}
.mobile-menu-toggle:hover { background-color: var(--muted); }
@media (min-width: 1024px) { .mobile-menu-toggle { display: none; } }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--background);
  overflow-y: auto;
}
.mobile-menu.active { display: block; }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--border);
}

.mobile-menu-nav {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-menu-nav a {
  display: block;
  padding: 0.875rem var(--space-4);
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 500;
  color: var(--charcoal-deep);
  transition: background-color 0.15s;
}
.mobile-menu-nav a:hover { background-color: var(--muted); }
.mobile-menu-section { margin-top: var(--space-4); }
.mobile-menu-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-2);
}
.mobile-menu-cta {
  padding: var(--space-6) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  margin-top: var(--space-4);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
  background-color: #ddd0bb;
  color: var(--charcoal-deep);
}

.footer-main {
  padding: var(--space-16) 0 var(--space-12);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.footer-brand p {
  margin-top: var(--space-4);
  font-size: 0.875rem;
  color: var(--charcoal-light);
  line-height: 1.7;
  max-width: 280px;
}

.footer-logo {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--charcoal-deep);
}
.footer-logo span { color: var(--crimson); }

.footer-social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.footer-social a {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.5rem;
  background-color: rgba(0,0,0,0.07);
  color: var(--charcoal-light);
  transition: all 0.15s;
  font-size: 0.875rem;
  font-weight: 600;
}
.footer-social a:hover {
  background-color: var(--crimson);
  color: #fff;
}

.footer-col h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--charcoal-deep);
  margin-bottom: var(--space-5);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col ul li a {
  font-size: 0.875rem;
  color: var(--charcoal-light);
  transition: color 0.15s;
}
.footer-col ul li a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.1);
  padding: var(--space-6) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}
@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
  }
}

.footer-bottom p, .footer-bottom a {
  font-size: 0.8125rem;
  color: var(--charcoal-light);
}
.footer-bottom a:hover { color: var(--primary); }

.footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}
@media (min-width: 640px) { .footer-badges { justify-content: flex-end; } }

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.625rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(249,245,239,0.5);
}

/* ============================================
   CTA SECTION
   ============================================ */
.cta-section { padding: var(--space-20) 0; }
@media (min-width: 768px) { .cta-section { padding: var(--space-28) 0; } }

.cta-section.variant-default { background-color: #fdf6ef; }
.cta-section.variant-dark    { background-color: var(--charcoal-deep); }

.cta-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--space-4);
  text-align: center;
}

.cta-section.variant-default .cta-headline { color: var(--charcoal-deep); }
.cta-section.variant-dark    .cta-headline { color: var(--cream); }

.cta-headline {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.cta-section.variant-default .cta-sub { color: var(--charcoal-light); }
.cta-section.variant-dark    .cta-sub { color: var(--cream-warm); }

.cta-sub {
  margin-top: var(--space-6);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.cta-actions {
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
@media (min-width: 640px) { .cta-actions { flex-direction: row; } }

/* ============================================
   HERO SECTION
   ============================================ */
.hero-section {
  background-color: var(--background);
  padding-top: 5rem;
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .hero-section {
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(192,57,43,0.06);
  border: 1px solid rgba(192,57,43,0.15);
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--crimson);
  margin-bottom: var(--space-6);
}

.hero-headline {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.06;
  color: var(--charcoal-deep);
  max-width: 18ch;
}
.hero-headline span { color: var(--primary); }

.hero-sub {
  margin-top: var(--space-6);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.65;
  color: var(--charcoal-light);
  max-width: 44ch;
}

.hero-actions {
  margin-top: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.hero-trust-dots {
  display: flex;
  gap: -4px;
}
.hero-trust-dot {
  width: 28px; height: 28px;
  border-radius: 50%;
  background-color: var(--cream-mid);
  border: 2px solid var(--background);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--charcoal-light);
  margin-left: -6px;
}
.hero-trust-dot:first-child { margin-left: 0; }

/* ============================================
   STATS SECTION
   ============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background-color: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

.stat-item {
  background-color: var(--card);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}

.stat-value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--primary);
  line-height: 1;
}

.stat-label {
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

/* ============================================
   BRAND LOGOS TICKER
   ============================================ */
.logos-section {
  padding: var(--space-10) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.logos-ticker {
  display: flex;
  gap: var(--space-12);
  animation: logos-scroll 25s linear infinite;
  width: max-content;
}
.logos-ticker:hover { animation-play-state: paused; }

.logo-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity 0.2s;
}
.logo-item:hover { opacity: 1; }
.logo-item svg { flex-shrink: 0; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================
   SERVICES SECTION
   ============================================ */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.service-card:hover {
  border-color: var(--crimson);
  box-shadow: 0 0 0 1px rgba(192,57,43,0.1), var(--shadow-lg);
  transform: translateY(-2px);
}

.service-card-icon {
  width: 48px; height: 48px;
  border-radius: 0.625rem;
  background-color: rgba(192,57,43,0.07);
  color: var(--crimson);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-4);
  flex-shrink: 0;
}

.service-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--charcoal-deep);
  margin-bottom: var(--space-2);
}

.service-card p {
  font-size: 0.875rem;
  color: var(--charcoal-light);
  line-height: 1.65;
  flex-grow: 1;
}

.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-4);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  transition: gap 0.15s;
}
.service-card:hover .service-card-link { gap: var(--space-2); }

/* ============================================
   PAIN POINTS SECTION
   ============================================ */
.pain-points-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px)  { .pain-points-grid { grid-template-columns: repeat(2, 1fr); } }

.pain-card {
  background-color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.pain-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  color: var(--charcoal-deep);
}
.pain-card p {
  font-size: 0.875rem;
  color: var(--charcoal-light);
  line-height: 1.65;
}

/* ============================================
   PROCESS STEPS
   ============================================ */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.process-step {
  display: flex;
  gap: var(--space-6);
  padding-bottom: var(--space-10);
  position: relative;
}
.process-step:last-child { padding-bottom: 0; }
.process-step::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--crimson), transparent);
}
.process-step:last-child::before { display: none; }

.step-number {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--crimson);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem;
  font-weight: 800;
  font-family: var(--font-mono);
  position: relative;
  z-index: 1;
}

.step-content h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: var(--space-2);
  padding-top: 0.5rem;
}
.step-content p {
  font-size: 0.9375rem;
  color: var(--charcoal-light);
  line-height: 1.65;
}

/* ============================================
   PRICING SECTION
   ============================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px)  { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  background-color: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: box-shadow 0.2s;
}
.pricing-card:hover { box-shadow: var(--shadow-xl); }

.pricing-card.featured {
  border-color: var(--crimson);
  position: relative;
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--crimson);
  color: #fff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pricing-name {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.pricing-amount {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--charcoal-deep);
  line-height: 1;
}
.pricing-period {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.pricing-desc {
  font-size: 0.875rem;
  color: var(--charcoal-light);
  line-height: 1.6;
}

.pricing-features { display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-feature {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.875rem;
  color: var(--charcoal-light);
}
.pricing-feature svg { color: var(--crimson); flex-shrink: 0; }
.pricing-feature.excluded { opacity: 0.4; }

.pricing-cta { margin-top: auto; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-track {
  display: flex;
  gap: var(--space-6);
  animation: testimonials-scroll 40s linear infinite;
  width: max-content;
}
.testimonials-track:hover { animation-play-state: paused; }

@keyframes testimonials-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testimonial-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  width: 320px;
  flex-shrink: 0;
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-4);
  color: #f59e0b;
}

.testimonial-text {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--charcoal);
  margin-bottom: var(--space-5);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.testimonial-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: var(--crimson);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.testimonial-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--charcoal-deep);
  line-height: 1.3;
}
.testimonial-role {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ============================================
   FAQ / ACCORDION
   ============================================ */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-5) 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--charcoal-deep);
  cursor: pointer;
  gap: var(--space-4);
  transition: color 0.15s;
}
.faq-trigger:hover { color: var(--primary); }

.faq-trigger svg {
  flex-shrink: 0;
  transition: transform 0.2s;
  color: var(--muted-foreground);
}
.faq-item.open .faq-trigger svg { transform: rotate(45deg); }

.faq-content {
  display: none;
  padding-bottom: var(--space-5);
  font-size: 0.9375rem;
  color: var(--charcoal-light);
  line-height: 1.7;
}
.faq-item.open .faq-content { display: block; }

/* ============================================
   BLOG / POSTS
   ============================================ */
.post-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.post-card-thumb {
  aspect-ratio: 16/9;
  background-color: var(--muted);
  overflow: hidden;
}
.post-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.post-card:hover .post-card-thumb img { transform: scale(1.04); }

.post-card-body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.post-card-category {
  background-color: rgba(192,57,43,0.08);
  color: var(--crimson);
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.post-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--charcoal-deep);
  line-height: 1.35;
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card:hover .post-card-title { color: var(--primary); }

.post-card-excerpt {
  font-size: 0.875rem;
  color: var(--charcoal-light);
  line-height: 1.65;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.post-card-read-more {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.15s;
}
.post-card:hover .post-card-read-more { gap: 0.5rem; }

/* ============================================
   CONTACT FORM
   ============================================ */
.contact-form {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8);
}

.form-group { margin-bottom: var(--space-5); }

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--charcoal-deep);
  margin-bottom: var(--space-2);
}
.form-label span { color: var(--primary); }

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1);
}

.form-textarea { resize: vertical; min-height: 140px; }

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  background-color: var(--background);
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) { .page-header { padding-top: 3rem; padding-bottom: 2.5rem; } }

/* When a .section immediately follows .page-header, remove its top padding */
.page-header + .section {
  padding-top: 0;
}
.page-header + section {
  padding-top: 0;
}

.page-header h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--charcoal-deep);
  max-width: 18ch;
}
.page-header h1 span { color: var(--primary); }

.page-header .subtitle {
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  color: var(--charcoal-light);
  line-height: 1.65;
  max-width: 44ch;
}

/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 768px) { .two-col { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1.1fr 0.9fr; } }

.two-col.reverse { }
@media (min-width: 768px) { .two-col.reverse .two-col-media { order: -1; } }

/* ============================================
   AI INTEGRATION BADGES
   ============================================ */
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--charcoal);
  background-color: var(--card);
}

.ai-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

/* ============================================
   RESOURCE CARDS
   ============================================ */
.resource-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  transition: all 0.2s;
}
.resource-card:hover {
  border-color: var(--crimson);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.comparison-table th {
  padding: var(--space-4);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  border-bottom: 2px solid var(--border);
}
.comparison-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--charcoal-light);
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table .check { color: var(--crimson); font-size: 1.25rem; }
.comparison-table .cross { color: var(--muted-foreground); font-size: 1.25rem; }

/* ============================================
   INTEGRATION LOGOS GRID
   ============================================ */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px)  { .integrations-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .integrations-grid { grid-template-columns: repeat(6, 1fr); } }

.integration-item {
  aspect-ratio: 1;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  transition: all 0.2s;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  text-align: center;
}
.integration-item:hover {
  border-color: var(--crimson);
  box-shadow: var(--shadow-md);
}

/* ============================================
   SECTION HEADER
   ============================================ */
.section-header {
  margin-bottom: var(--space-12);
}
.section-header.centered { text-align: center; }

.section-header h2 {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--charcoal-deep);
  margin-top: var(--space-3);
}
.section-header h2 span { color: var(--primary); }

.section-header p {
  margin-top: var(--space-4);
  font-size: 1.0625rem;
  color: var(--charcoal-light);
  line-height: 1.65;
  max-width: 52ch;
}
.section-header.centered p { margin-left: auto; margin-right: auto; }

/* ============================================
   BREADCRUMBS
   ============================================ */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin-bottom: var(--space-5);
}
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs span.sep { opacity: 0.5; }

/* ============================================
   PAGINATION
   ============================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-12);
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  color: var(--charcoal-light);
  transition: all 0.15s;
}
.pagination a:hover { border-color: var(--primary); color: var(--primary); }
.pagination .current { background-color: var(--primary); color: #fff; border-color: var(--primary); }

/* ============================================
   404 PAGE
   ============================================ */
.not-found {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-20) var(--space-4);
}
.not-found-code {
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--crimson);
  line-height: 1;
  opacity: 0.15;
}

/* ============================================
   SEARCH FORM
   ============================================ */
.search-form {
  display: flex;
  gap: var(--space-2);
  max-width: 560px;
}
.search-form input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  background-color: var(--background);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  outline: none;
  transition: border-color 0.15s;
}
.search-form input:focus { border-color: var(--primary); }

/* ============================================
   SKIP LINK
   ============================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background-color: var(--primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  z-index: 9999;
  transition: top 0.1s;
}
.skip-link:focus { top: var(--space-4); }

/* ============================================
   ANIMATIONS & KEYFRAMES (mirrors React app)
   ============================================ */

/* --- Orbit / Spin (Hero rotating logos) --- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Marquee scroll (logo ticker & testimonials) --- */
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes scroll-testimonials {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Fade up reveal --- */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up { animation: fade-in-up 0.5s ease forwards; }

/* --- Dropdown fade-in --- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.15s ease forwards; }

/* --- Pulse rings (AI Agent hero) --- */
@keyframes pulse-ring {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.05); }
}

/* ============================================
   HERO 3D ORBIT
   ============================================ */
.hero-3d-wrapper {
  display: none;
}
@media (min-width: 1024px) {
  .hero-3d-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 1;
    isolation: isolate;
    left: 20px;
  }
}

.hero-3d-scene {
  position: relative;
  width: 560px;
  height: 450px;
  overflow: visible;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform: scale(1.10);
  transform-origin: center center;
}
.hero-3d-scene img,
.hero-3d-scene svg,
.hero-3d-scene .orbit-item,
.hero-3d-scene .orbit-card,
.hero-3d-scene .orbit-label,
.hero-3d-scene .hero-globe-core,
.hero-3d-scene .hero-globe-wrap {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: auto;
}
.hero-3d-scene img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Service-page hero visualisations: disable drag/select on all decorative parts */
.svc-hero-visual,
.svc-hero-visual *,
.svc-vis-glow,
.aeo-card, .aeo-card *,
.geo-card, .geo-card *,
.cw-card, .cw-card *,
.lb-card, .lb-card *,
.pr-card, .pr-card *,
.aeo-orbit, .aeo-orbit-2, .aeo-particle, .aeo-rocket,
.geo-orbit, .geo-orbit-2, .geo-particle,
.cw-orbit, .cw-orbit-2, .cw-particle, .cw-rocket,
.lb-orbit, .lb-orbit-2, .lb-particle, .lb-chain,
.pr-orbit, .pr-orbit-2, .pr-particle, .pr-megaphone, .pr-compound {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.svc-hero-visual img,
.svc-hero-visual svg {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Orbit ellipse ring - now drawn on canvas by JS; keep div hidden */
.orbit-ellipse-ring { display: none; }

/* Globe */
.hero-globe-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-globe-core {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--crimson-light), var(--primary) 50%, var(--crimson-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow:
    0 0 0 12px rgba(192,57,43,0.08),
    0 0 0 24px rgba(192,57,43,0.04),
    0 20px 60px rgba(192,57,43,0.45),
    0 8px 24px rgba(0,0,0,0.20);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* Shimmer sweep across the globe */
.hero-globe-core::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  animation: globe-shimmer 3.5s ease-in-out infinite;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes globe-shimmer {
  0%   { left: -75%; opacity: 0; }
  20%  { opacity: 1; }
  60%  { left: 130%; opacity: 1; }
  61%  { opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

/* Pulsing rings */
.hero-globe-pulse {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(192,57,43,0.3);
  pointer-events: none;
}
.hero-globe-pulse.p1 {
  width: 165px; height: 165px;
  animation: globe-pulse 3s ease-out infinite;
}
.hero-globe-pulse.p2 {
  width: 220px; height: 220px;
  animation: globe-pulse 3s ease-out 1s infinite;
}
.hero-globe-pulse.p3 {
  width: 280px; height: 280px;
  animation: globe-pulse 3s ease-out 2s infinite;
}

@keyframes globe-pulse {
  0%   { opacity: 0.7; transform: scale(0.85); }
  100% { opacity: 0;   transform: scale(1.1); }
}

/* Orbit items - JS positions these */
.orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  cursor: default;
  will-change: transform, opacity;
}

.orbit-card {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.10),
    0 1px 4px rgba(0,0,0,0.06),
    0 0 0 1px rgba(255,255,255,0.8) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: box-shadow 0.25s, transform 0.25s;
  background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,1), rgba(248,248,252,0.9));
}

.orbit-item:hover .orbit-card {
  box-shadow:
    0 8px 30px var(--glow, rgba(192,57,43,0.2)),
    0 2px 8px rgba(0,0,0,0.10),
    0 0 0 1.5px rgba(192,57,43,0.25) inset;
  transform: translateY(-3px) scale(1.05);
}

.orbit-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--charcoal-light);
  background: rgba(253,250,246,0.9);
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid rgba(0,0,0,0.06);
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* --- Scroll-triggered reveal (JS-added classes) --- */
.citelane-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.citelane-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.citelane-reveal-delay-1 { transition-delay: 0.10s; }
.citelane-reveal-delay-2 { transition-delay: 0.20s; }
.citelane-reveal-delay-3 { transition-delay: 0.30s; }
.citelane-reveal-delay-4 { transition-delay: 0.40s; }
.citelane-reveal-delay-5 { transition-delay: 0.50s; }
.citelane-reveal-delay-6 { transition-delay: 0.60s; }

/* --- <details> FAQ open/close icon rotation --- */
details[open] summary span { transform: rotate(45deg); }
details summary span { display: inline-block; transition: transform 0.2s ease; }

/* --- Button micro-interactions (click animation removed) --- */
.btn, a.btn { transition: all 0.2s ease; }

/* --- Card hover lift --- */
.service-card, .pricing-card, .resource-card {
  transition: all 0.25s ease;
}

/* --- Stats icon group-hover scale --- */
.stat-item:hover .stat-icon {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* --- Gradient text (hero span) --- */
.text-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--crimson-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- Focus ring for accessibility --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* --- Service card icon hover (group-hover in Tailwind) --- */
.service-card:hover .service-card-icon {
  background-color: var(--primary);
  color: #fff;
}

/* --- Testimonial card hover lift --- */
.testimonial-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* --- Nav dropdown animation --- */
.nav-dropdown-panel {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-dropdown-panel.open {
  animation: fade-in 0.15s ease forwards;
}

/* --- Mobile menu slide-in --- */
#mobile-menu {
  transition: opacity 0.2s ease;
}

/* --- Process step hover --- */
.process-step:hover {
  border-color: rgba(192,57,43,0.2);
  box-shadow: var(--shadow-xl);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
.hidden    { display: none !important; }
.sm-hidden { }
@media (max-width: 639px)  { .sm-hidden { display: none !important; } }
@media (max-width: 1023px) { .lg-hidden { display: none !important; } }
@media (min-width: 640px)  { .sm-show { display: block !important; } }
@media (min-width: 1024px) { .lg-show { display: block !important; } }

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .site-header, .site-footer, .mobile-menu { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a[href]::after { content: " (" attr(href) ")"; }
}

/* ============================================
   TOOLS & GUIDES HERO - responsive 2-col
   ============================================ */
@media (max-width: 767px) {
  .page-header .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

/* ============================================
   NAV DROPDOWN ICONS
   ============================================ */
.nav-icon { width: 22px; height: 22px; stroke: var(--primary); display: block; }

/* ============================================
   HEADER RESPONSIVE LAYOUT
   ============================================ */
/* Desktop nav: hidden on mobile, flex on desktop */
.site-nav-desktop { display: none; }
@media (min-width: 1024px) { .site-nav-desktop { display: flex !important; align-items: center; gap: 0.25rem; } }

/* Mobile toggle: visible on mobile, hidden on desktop */
#mobile-menu-toggle { display: flex !important; }
@media (min-width: 1024px) { #mobile-menu-toggle { display: none !important; } }

/* Mobile menu: never show on desktop even if JS toggles it */
@media (min-width: 1024px) { #mobile-menu { display: none !important; } }

/* ============================================
   ABOUT PAGE HERO ANIMATIONS
   ============================================ */
.about-hero-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@keyframes about-fadeup {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes about-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes about-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
  50%       { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.about-dot-pulse {
  animation: about-dot-pulse 2s ease-in-out infinite;
}
.about-float-1 {
  animation: about-fadeup 0.7s ease-out 0.15s both,
             about-float 7s ease-in-out 1.1s infinite;
}
.about-float-2 {
  animation: about-fadeup 0.65s ease-out 0.35s both,
             about-float 6s ease-in-out 1.3s infinite;
}
.about-float-3 {
  animation: about-fadeup 0.65s ease-out 0.5s both,
             about-float 6s ease-in-out 1.7s infinite;
}
.about-float-4 {
  animation: about-fadeup 0.65s ease-out 0.65s both,
             about-float 6s ease-in-out 2.1s infinite;
}
.about-float-5 {
  animation: about-fadeup 0.65s ease-out 0.8s both,
             about-float 6s ease-in-out 2.5s infinite;
}

/* ============================================================
   CRITICAL UTILITY CLASSES
   Pre-Tailwind fallback - ensures page layout is correct
   before the async Tailwind CDN finishes loading.
   ============================================================ */

/* Display */
.flex  { display: flex; }
.grid  { display: grid; }
.block { display: block; }
.inline-flex { display: inline-flex; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.text-left   { text-align: left; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-max   { width: max-content; }
.shrink-0 { flex-shrink: 0; }
.mx-auto  { margin-left: auto; margin-right: auto; }
.italic   { font-style: italic; }
.whitespace-nowrap { white-space: nowrap; }
.list-none { list-style: none; }
.cursor-pointer { cursor: pointer; }
.transition-all { transition: all 0.2s ease; }
.transition-colors { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }

/* Max widths */
.max-w-7xl { max-width: 80rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-2xl { max-width: 42rem; }

/* Grid columns */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Gaps */
.gap-1  { gap: 0.25rem; }
.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-12 { gap: 3rem; }

/* Padding */
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-7  { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-3  { padding-top: 0.75rem;  padding-bottom: 0.75rem; }
.py-4  { padding-top: 1rem;     padding-bottom: 1rem; }
.py-10 { padding-top: 2.5rem;   padding-bottom: 2.5rem; }
.py-14 { padding-top: 3.5rem;   padding-bottom: 3.5rem; }
.py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
.p-3   { padding: 0.75rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }
.pr-4  { padding-right: 1rem; }

/* Margin */
.mb-1  { margin-bottom: 0.25rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1  { margin-top: 0.25rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-10 { margin-top: 2.5rem; }
.mx-4  { margin-left: 1rem; margin-right: 1rem; }
.mx-8  { margin-left: 2rem; margin-right: 2rem; }
.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; }

/* Sizing */
.w-4   { width:  1rem;    }  .h-4   { height: 1rem;    }
.w-10  { width:  2.5rem;  }  .h-10  { height: 2.5rem;  }
.w-12  { width:  3rem;    }  .h-12  { height: 3rem;    }
.h-0\.5 { height: 0.125rem; }
.w-3\.5 { width:  0.875rem; }  .h-3\.5 { height: 0.875rem; }
.h-0\.5 { height: 2px; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Typography */
.text-xs   { font-size: 0.75rem;  line-height: 1rem; }
.text-sm   { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem;     line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl   { font-size: 1.25rem;  line-height: 1.75rem; }
.text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
.text-5xl  { font-size: 3rem;     line-height: 1; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.leading-relaxed { line-height: 1.625; }
.leading-tight   { line-height: 1.25; }
.tracking-tight  { letter-spacing: -0.025em; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

/* Colors - text */
.text-primary         { color: var(--primary); }
.text-foreground      { color: var(--foreground); }
.text-muted-foreground { color: var(--muted-foreground); }
.text-cream           { color: var(--cream); }
.text-cream-warm      { color: var(--cream-warm); }
.text-white           { color: #fff; }

/* Colors - background */
.bg-card         { background-color: var(--card); }
.bg-background   { background-color: var(--background); }
.bg-primary      { background-color: var(--primary); }
.bg-cream        { background-color: var(--cream); }
.bg-charcoal-deep { background-color: var(--charcoal-deep); }
.bg-white        { background-color: #fff; }
.bg-muted        { background-color: var(--muted); }

/* Borders */
.border   { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-border  { border-color: var(--border); }
.border-primary { border-color: var(--primary); }
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* Shadow */
.shadow-sm  { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }

/* Responsive - sm (640px) */
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:text-5xl { font-size: 3rem;    line-height: 1; }
  .sm\:py-28    { padding-top: 7rem;  padding-bottom: 7rem; }
  .sm\:flex-row { flex-direction: row; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Responsive - md (768px) */
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-left   { text-align: left; }
  .md\:mx-0        { margin-left: 0; margin-right: 0; }
  .md\:block       { display: block; }
}

/* Responsive - lg (1024px) */
@media (min-width: 1024px) {
  .lg\:px-8        { padding-left: 2rem;   padding-right: 2rem; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:text-5xl    { font-size: 3rem;    line-height: 1; }
  .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .lg\:block       { display: block; }
  .lg\:hidden      { display: none !important; }
}

/* Responsive - xl (1280px) */
@media (min-width: 1280px) {
  .xl\:text-7xl { font-size: 4.5rem; line-height: 1; }
}

/* ============================================================
   HOVER & INTERACTION UTILITIES
   ============================================================ */
.hover\:bg-primary:hover       { background-color: var(--primary); }
.hover\:bg-crimson-dark:hover  { background-color: var(--crimson-dark); }
.hover\:bg-cream:hover         { background-color: var(--cream); }
.hover\:bg-muted:hover         { background-color: var(--muted); }
.hover\:text-white:hover       { color: #fff; }
.hover\:text-primary:hover     { color: var(--primary); }
.hover\:shadow-lg:hover        { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.hover\:shadow-xl:hover        { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
.hover\:border-primary:hover   { border-color: var(--primary); }
.hover\:border-primary\/30:hover { border-color: rgba(177,0,62,0.3); }
.hover\:border-primary\/20:hover { border-color: rgba(177,0,62,0.2); }
.hover\:\[animation-play-state\:paused\]:hover { animation-play-state: paused; }

/* Group hover - parent has class="group" */
.group:hover .group-hover\:bg-primary   { background-color: var(--primary); }
.group:hover .group-hover\:text-white   { color: #fff; }
.group:hover .group-hover\:text-primary { color: var(--primary); }
.group:hover .group-hover\:opacity-100  { opacity: 1; }

/* FAQ accordion - details[open] */
details[open] .group-open\:rotate-45 { transform: rotate(45deg); }
.transition-transform { transition: transform 0.2s ease; }
.transition-opacity   { transition: opacity 0.2s ease; }
.duration-200 { transition-duration: 0.2s; }
.duration-300 { transition-duration: 0.3s; }

/* ============================================================
   OPACITY / COLOR-WITH-ALPHA UTILITIES
   ============================================================ */
.opacity-0   { opacity: 0; }
.opacity-100 { opacity: 1; }

/* bg-primary/10 - icon wrappers on service cards */
.bg-primary\/10 { background-color: rgba(177,0,62,0.1); }

/* bg-charcoal/50 - why-citelane dark cards */
.bg-charcoal\/50 { background-color: color-mix(in srgb, var(--charcoal) 50%, transparent); }

/* text with opacity */
.text-muted-foreground\/50 { color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
.text-white\/80            { color: rgba(255,255,255,0.8); }

/* Border charcoal - why-citelane card borders */
.border-charcoal { border-color: var(--charcoal); }

/* ============================================================
   SPECIAL DIMENSIONS & POSITIONS
   ============================================================ */
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.h-0\.5  { height: 2px; }
.w-\[380px\] { width: 380px; }
.top-24 { top: 6rem; }
.left-\[16\.66\%\]  { left: 16.66%; }
.right-\[16\.66\%\] { right: 16.66%; }
.absolute { position: absolute; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* ============================================================
   GRADIENT UTILITIES  (process connector line)
   ============================================================ */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, rgba(177,0,62,0.2), var(--primary), rgba(177,0,62,0.2));
}

/* ============================================================
   ADDITIONAL RESPONSIVE UTILITIES
   ============================================================ */
@media (min-width: 640px) {
  .sm\:text-4xl  { font-size: 2.25rem; line-height: 2.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:flex-row  { flex-direction: row; }
  .sm\:py-28     { padding-top: 7rem; padding-bottom: 7rem; }
}
@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:text-left   { text-align: left; }
  .md\:mx-0        { margin-left: 0; margin-right: 0; }
  .md\:block       { display: block; }
}
@media (min-width: 1024px) {
  .lg\:text-5xl { font-size: 3rem;    line-height: 1; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
  .lg\:block    { display: block; }
  .lg\:hidden   { display: none !important; }
}

/* ============================================================
   HEADER - native CSS for nav links (no Tailwind dependency)
   ============================================================ */
#site-header nav a,
#site-header .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  border-radius: 0.375rem;
  transition: color 0.15s, background-color 0.15s;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.5;
}
#site-header nav a:hover,
#site-header .nav-dropdown-toggle:hover {
  color: var(--foreground);
  background-color: var(--muted);
}
#site-header nav a.text-primary { color: var(--primary); }

/* ============================================================
   FOOTER - full native CSS layout (no Tailwind dependency)
   ============================================================ */
#site-footer {
  background-color: var(--charcoal-deep);
  color: var(--cream);
}
#site-footer > div {
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 1rem;
}
@media (min-width: 640px)  { #site-footer > div { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { #site-footer > div { padding-left: 2rem; padding-right: 2rem; } }

/* Footer grid - 1 col → 2 col → 4 col (brand takes double width) */
#site-footer .grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  #site-footer .grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  #site-footer .grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
}

/* Brand column - full width on mobile, spans across on desktop */
#site-footer .lg\:col-span-2 { }
@media (min-width: 768px) { #site-footer .lg\:col-span-2 { grid-column: 1 / -1; } }
@media (min-width: 1024px) { #site-footer .lg\:col-span-2 { grid-column: span 1; } }

/* Footer typography */
#site-footer .text-cream-warm        { color: var(--cream-warm); }
#site-footer .text-charcoal-light    { color: var(--charcoal-light); }
#site-footer .text-cream-warm\/60    { color: color-mix(in srgb, var(--cream-warm) 60%, transparent); }
#site-footer .text-primary\/60 svg   { stroke: rgba(177,0,62,0.7); }
#site-footer .text-sm   { font-size: 0.875rem; }
#site-footer .text-xs   { font-size: 0.75rem;  }
#site-footer .text-\[10px\] { font-size: 10px; }
#site-footer .leading-relaxed { line-height: 1.625; }
#site-footer .max-w-sm  { max-width: 24rem; }
#site-footer .mb-4  { margin-bottom: 1rem; }
#site-footer .mb-6  { margin-bottom: 1.5rem; }
#site-footer .mb-3  { margin-bottom: 0.75rem; }
#site-footer .mt-6  { margin-top:    1.5rem; }

/* Footer headings */
#site-footer h4.section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-warm);
  margin-bottom: 1rem;
  font-family: var(--font-mono);
}

/* Footer links */
#site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
#site-footer ul a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--cream-warm);
  text-decoration: none;
  transition: color 0.15s;
}
#site-footer ul a:hover { color: var(--cream); }

/* Service links - icon sizing */
#site-footer ul a span { display: inline-flex; width: 14px; height: 14px; }
#site-footer ul a span svg { width: 14px; height: 14px; stroke: rgba(177,0,62,0.7); fill: none; }

/* Contact info rows */
#site-footer .space-y-2 { display: flex; flex-direction: column; gap: 0.5rem; }
#site-footer .space-y-2\.5 { display: flex; flex-direction: column; gap: 0.625rem; }
#site-footer .flex.items-center.gap-2 {
  display: flex; align-items: center; gap: 0.5rem;
}

/* Footer CTA button */
.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--primary);
  color: #fff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s;
}
.footer-cta-btn:hover { background-color: var(--crimson-dark); color: #fff; }
.footer-cta-btn svg { width: 1rem; height: 1rem; stroke: #fff; }

/* Keyword tags */
#site-footer .flex.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#site-footer .flex.flex-wrap span {
  font-size: 10px;
  color: color-mix(in srgb, var(--cream-warm) 50%, transparent);
  border: 1px solid var(--charcoal);
  border-radius: 9999px;
  padding: 2px 8px;
}

/* Footer bottom bar */
#site-footer .mt-16 { margin-top: 4rem; }
#site-footer .pt-8  { padding-top: 2rem; }
#site-footer .border-t { border-top: 1px solid var(--charcoal); }
#site-footer .border-t > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
@media (min-width: 640px) {
  #site-footer .border-t > div { flex-direction: row; }
}
#site-footer .border-t a {
  font-size: 0.75rem;
  color: var(--charcoal-light);
  text-decoration: none;
  transition: color 0.15s;
}
#site-footer .border-t a:hover { color: var(--cream-warm); }
#site-footer .border-t > div > div {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* ============================================================
   COMPREHENSIVE UTILITY CLASSES - ALL PAGES
   Covers every Tailwind class found across all page templates
   ============================================================ */

/* --- Display extras --- */
.inline        { display: inline; }
.flex-1        { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-baseline { align-items: baseline; }
.items-stretch  { align-items: stretch; }
.justify-start  { justify-content: flex-start; }
.justify-end    { justify-content: flex-end; }
.self-center    { align-self: center; }
.self-start     { align-self: flex-start; }
.min-w-0        { min-width: 0; }
.w-full         { width: 100%; }
.h-full         { height: 100%; }
.min-h-screen   { min-height: 100vh; }
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-auto   { overflow: auto; }
.aspect-video    { aspect-ratio: 16/9; }
.sticky         { position: sticky; }
.top-0          { top: 0; }
.z-10           { z-index: 10; }
.z-40           { z-index: 40; }
.z-50           { z-index: 50; }
.pointer-events-none { pointer-events: none; }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0; }
.outline-none { outline: none; }
.uppercase    { text-transform: uppercase; }
.capitalize   { text-transform: capitalize; }
.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.truncate     { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.select-none  { user-select: none; }
.text-right   { text-align: right; }
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }

/* --- Width & height extras --- */
.w-3   { width:  0.75rem; } .h-3   { height: 0.75rem; }
.w-3\.5{ width:  0.875rem;} .h-3\.5{ height: 0.875rem;}
.w-5   { width:  1.25rem; } .h-5   { height: 1.25rem; }
.w-6   { width:  1.5rem;  } .h-6   { height: 1.5rem;  }
.w-7   { width:  1.75rem; } .h-7   { height: 1.75rem; }
.w-8   { width:  2rem;    } .h-8   { height: 2rem;    }
.w-9   { width:  2.25rem; } .h-9   { height: 2.25rem; }
.w-14  { width:  3.5rem;  } .h-14  { height: 3.5rem;  }
.w-16  { width:  4rem;    } .h-16  { height: 4rem;    }
.w-20  { width:  5rem;    } .h-20  { height: 5rem;    }
.h-44  { height: 11rem;   }
.h-48  { height: 12rem;   }
.w-\[72px\]  { width:  72px; }
.h-\[72px\]  { height: 72px; }
.max-h-\[420px\] { max-height: 420px; }
.w-fit { width: fit-content; }

/* --- Max widths --- */
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-xs  { max-width: 20rem; }
.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }
.max-w-none { max-width: none; }

/* --- Gap extras --- */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }
.gap-5    { gap: 1.25rem;  }
.gap-7    { gap: 1.75rem;  }
.gap-9    { gap: 2.25rem;  }
.gap-10   { gap: 2.5rem;   }
.gap-12   { gap: 3rem;     }
.gap-14   { gap: 3.5rem;   }
.gap-16   { gap: 4rem;     }
.gap-20   { gap: 5rem;     }
.gap-24   { gap: 6rem;     }

/* --- Padding extras --- */
.p-0   { padding: 0; }
.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem;  }
.p-4   { padding: 1rem;    }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem;  }
.p-8   { padding: 2rem;    }
.p-10  { padding: 2.5rem;  }
.px-2      { padding-left: 0.5rem;   padding-right: 0.5rem;   }
.px-2\.5   { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3      { padding-left: 0.75rem;  padding-right: 0.75rem;  }
.px-5      { padding-left: 1.25rem;  padding-right: 1.25rem;  }
.px-6      { padding-left: 1.5rem;   padding-right: 1.5rem;   }
.px-8      { padding-left: 2rem;     padding-right: 2rem;     }
.py-0\.5   { padding-top: 0.125rem;  padding-bottom: 0.125rem;}
.py-1      { padding-top: 0.25rem;   padding-bottom: 0.25rem; }
.py-1\.5   { padding-top: 0.375rem;  padding-bottom: 0.375rem;}
.py-2      { padding-top: 0.5rem;    padding-bottom: 0.5rem;  }
.py-2\.5   { padding-top: 0.625rem;  padding-bottom: 0.625rem;}
.py-3      { padding-top: 0.75rem;   padding-bottom: 0.75rem; }
.py-4      { padding-top: 1rem;      padding-bottom: 1rem;    }
.py-5      { padding-top: 1.25rem;   padding-bottom: 1.25rem; }
.py-6      { padding-top: 1.5rem;    padding-bottom: 1.5rem;  }
.py-7      { padding-top: 1.75rem;   padding-bottom: 1.75rem; }
.py-8      { padding-top: 2rem;      padding-bottom: 2rem;    }
.py-10     { padding-top: 2.5rem;    padding-bottom: 2.5rem;  }
.py-12     { padding-top: 3rem;      padding-bottom: 3rem;    }
.py-14     { padding-top: 3.5rem;    padding-bottom: 3.5rem;  }
.py-16     { padding-top: 4rem;      padding-bottom: 4rem;    }
.py-20     { padding-top: 5rem;      padding-bottom: 5rem;    }
.py-24     { padding-top: 6rem;      padding-bottom: 6rem;    }
.py-28     { padding-top: 7rem;      padding-bottom: 7rem;    }
.py-32     { padding-top: 8rem;      padding-bottom: 8rem;    }
.pb-2      { padding-bottom: 0.5rem; }
.pb-3      { padding-bottom: 0.75rem;}
.pb-4      { padding-bottom: 1rem;   }
.pb-6      { padding-bottom: 1.5rem; }
.pb-8      { padding-bottom: 2rem;   }
.pb-10     { padding-bottom: 2.5rem; }
.pb-12     { padding-bottom: 3rem;   }
.pb-14     { padding-bottom: 3.5rem; }
.pb-16     { padding-bottom: 4rem;   }
.pb-20     { padding-bottom: 5rem;   }
.pb-24     { padding-bottom: 6rem;   }
.pb-28     { padding-bottom: 7rem;   }
.pt-2      { padding-top: 0.5rem;    }
.pt-3      { padding-top: 0.75rem;   }
.pt-4      { padding-top: 1rem;      }
.pt-6      { padding-top: 1.5rem;    }
.pt-8      { padding-top: 2rem;      }
.pt-10     { padding-top: 2.5rem;    }
.pt-12     { padding-top: 3rem;      }
.pt-16     { padding-top: 4rem;      }
.pt-20     { padding-top: 5rem;      }
.pt-24     { padding-top: 6rem;      }
.pt-28     { padding-top: 7rem;      }
.pl-4      { padding-left: 1rem;     }
.pl-5      { padding-left: 1.25rem;  }
.pl-6      { padding-left: 1.5rem;   }
.pr-4      { padding-right: 1rem;    }
.pr-6      { padding-right: 1.5rem;  }

/* --- Margin extras --- */
.m-0       { margin: 0; }
.mt-0      { margin-top: 0; }
.mt-0\.5   { margin-top: 0.125rem; }
.mt-1      { margin-top: 0.25rem;  }
.mt-2      { margin-top: 0.5rem;   }
.mt-3      { margin-top: 0.75rem;  }
.mt-4      { margin-top: 1rem;     }
.mt-5      { margin-top: 1.25rem;  }
.mt-6      { margin-top: 1.5rem;   }
.mt-7      { margin-top: 1.75rem;  }
.mt-8      { margin-top: 2rem;     }
.mt-10     { margin-top: 2.5rem;   }
.mt-12     { margin-top: 3rem;     }
.mt-14     { margin-top: 3.5rem;   }
.mt-16     { margin-top: 4rem;     }
.mt-20     { margin-top: 5rem;     }
.mt-auto   { margin-top: auto;     }
.mb-0      { margin-bottom: 0;     }
.mb-1      { margin-bottom: 0.25rem;}
.mb-2      { margin-bottom: 0.5rem;}
.mb-3      { margin-bottom: 0.75rem;}
.mb-4      { margin-bottom: 1rem;  }
.mb-5      { margin-bottom: 1.25rem;}
.mb-6      { margin-bottom: 1.5rem;}
.mb-8      { margin-bottom: 2rem;  }
.mb-10     { margin-bottom: 2.5rem;}
.mb-12     { margin-bottom: 3rem;  }
.mb-14     { margin-bottom: 3.5rem;}
.mb-16     { margin-bottom: 4rem;  }
.mb-20     { margin-bottom: 5rem;  }
.mb-auto   { margin-bottom: auto;  }
.mx-auto   { margin-left: auto; margin-right: auto; }
.mx-1\.5   { margin-left: 0.375rem; margin-right: 0.375rem; }
.mx-2      { margin-left: 0.5rem; margin-right: 0.5rem; }
.mx-4      { margin-left: 1rem; margin-right: 1rem; }
.ml-0      { margin-left: 0;    }
.ml-auto   { margin-left: auto;  }
.ml-2      { margin-left: 0.5rem; }
.ml-4      { margin-left: 1rem;  }
.mr-0      { margin-right: 0;   }
.mr-auto   { margin-right: auto; }
.mr-2      { margin-right: 0.5rem; }
.mr-4      { margin-right: 1rem; }

/* --- Space-y extras --- */
.space-y-1 > * + * { margin-top: 0.25rem;  }
.space-y-3 > * + * { margin-top: 0.75rem;  }
.space-y-6 > * + * { margin-top: 1.5rem;   }
.space-y-8 > * + * { margin-top: 2rem;     }

/* --- Typography extras --- */
.text-2xl { font-size: 1.5rem;   line-height: 2rem;    }
.text-6xl { font-size: 3.75rem;  line-height: 1;       }
.text-7xl { font-size: 4.5rem;   line-height: 1;       }
.text-8xl { font-size: 6rem;     line-height: 1;       }
.leading-snug  { line-height: 1.375; }
.leading-7     { line-height: 1.75rem; }
.leading-none  { line-height: 1; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-wide   { letter-spacing: 0.025em; }
.font-extrabold  { font-weight: 800; }
.font-black      { font-weight: 900; }
.font-normal     { font-weight: 400; }
.font-light      { font-weight: 300; }
.not-italic      { font-style: normal; }

/* --- Color extras - backgrounds --- */
.bg-primary\/5  { background-color: rgba(177,0,62,0.05); }
.bg-primary\/15 { background-color: rgba(177,0,62,0.15); }
.bg-primary\/20 { background-color: rgba(177,0,62,0.2);  }
.bg-crimson-light\/10 { background-color: rgba(212,32,90,0.1); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, var(--cream), var(--cream-warm))); }
.from-cream      { --tw-gradient-stops: var(--cream), var(--cream-warm); }
.to-cream-warm   { --tw-gradient-to: var(--cream-warm); }
.bg-white        { background-color: #fff; }
.bg-green-100    { background-color: #dcfce7; }
.bg-muted        { background-color: var(--muted); }
.bg-accent       { background-color: var(--muted); }

/* --- Color extras - text --- */
.text-crimson           { color: var(--crimson); }
.text-primary-foreground { color: var(--primary-foreground); }
.text-green-700         { color: #15803d; }
.text-green-800         { color: #166534; }

/* --- Border extras --- */
.border-b    { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l    { border-left-width: 1px;   border-left-style: solid;   }
.border-l-4  { border-left-width: 4px;   border-left-style: solid;   }
.border-t    { border-top-width: 1px;    border-top-style: solid;    }
.border-muted   { border-color: var(--muted); }
.border-white   { border-color: #fff; }
.border-border  { border-color: var(--border); }
.border-primary\/20 { border-color: rgba(177,0,62,0.2); }
.border-primary\/30 { border-color: rgba(177,0,62,0.3); }
.border-primary\/40 { border-color: rgba(177,0,62,0.4); }
.rounded-none { border-radius: 0; }
.rounded-md   { border-radius: 0.375rem; }

/* --- Shadows --- */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* --- Opacity --- */
.opacity-90   { opacity: 0.9; }
.opacity-75   { opacity: 0.75; }
.opacity-50   { opacity: 0.5; }

/* --- Hover extras --- */
.hover\:bg-primary\/20:hover  { background-color: rgba(177,0,62,0.2); }
.hover\:bg-white:hover        { background-color: #fff; }
.hover\:opacity-90:hover      { opacity: 0.9; }
.hover\:underline:hover       { text-decoration: underline; }
.hover\:scale-105:hover       { transform: scale(1.05); }
.hover\:text-foreground:hover { color: var(--foreground); }
.hover\:text-cream:hover      { color: var(--cream); }
.hover\:text-cream-warm:hover { color: var(--cream-warm); }
.hover\:bg-accent:hover       { background-color: var(--muted); }
.hover\:border-primary\/40:hover { border-color: rgba(177,0,62,0.4); }

/* --- Group hover extras --- */
.group:hover .group-hover\:scale-105    { transform: scale(1.05); }
.group:hover .group-hover\:text-primary-foreground { color: var(--primary-foreground); }

/* --- Focus states (form inputs) --- */
.focus\:border-primary:focus { border-color: var(--primary); }
.focus\:ring-1:focus         { box-shadow: 0 0 0 1px var(--primary); }
.focus\:ring-primary:focus   { box-shadow: 0 0 0 2px rgba(177,0,62,0.4); }
.focus\:outline-none:focus   { outline: none; }

/* --- Transform --- */
.scale-105  { transform: scale(1.05); }
.rotate-180 { transform: rotate(180deg); }

/* --- Responsive extras --- */
@media (min-width: 640px) {
  .sm\:text-3xl  { font-size: 1.875rem; line-height: 2.25rem; }
  .sm\:text-4xl  { font-size: 2.25rem;  line-height: 2.5rem; }
  .sm\:text-5xl  { font-size: 3rem;     line-height: 1; }
  .sm\:text-6xl  { font-size: 3.75rem;  line-height: 1; }
  .sm\:pt-20     { padding-top: 5rem; }
  .sm\:pt-24     { padding-top: 6rem; }
  .sm\:pt-28     { padding-top: 7rem; }
  .sm\:pb-12     { padding-bottom: 3rem; }
  .sm\:pb-14     { padding-bottom: 3.5rem; }
  .sm\:pb-16     { padding-bottom: 4rem; }
  .sm\:pb-20     { padding-bottom: 5rem; }
  .sm\:pb-24     { padding-bottom: 6rem; }
  .sm\:pb-28     { padding-bottom: 7rem; }
  .sm\:py-20     { padding-top: 5rem; padding-bottom: 5rem; }
  .sm\:py-24     { padding-top: 6rem; padding-bottom: 6rem; }
  .sm\:py-28     { padding-top: 7rem; padding-bottom: 7rem; }
  .sm\:p-10      { padding: 2.5rem; }
  .sm\:text-right  { text-align: right; }
  .sm\:text-center { text-align: center; }
  .sm\:text-left   { text-align: left; }
  .sm\:block     { display: block; }
  .sm\:flex      { display: flex; }
  .sm\:hidden    { display: none; }
  .sm\:flex-row  { flex-direction: row; }
  .sm\:items-center { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:w-fit     { width: fit-content; }
  .sm\:w-auto    { width: auto; }
  .sm\:px-4      { padding-left: 1rem; padding-right: 1rem; }
  .sm\:px-6      { padding-left: 1.5rem; padding-right: 1.5rem; }
  .sm\:gap-6     { gap: 1.5rem; }
  .sm\:gap-8     { gap: 2rem; }
  .sm\:mt-0      { margin-top: 0; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:flex-row         { flex-direction: row; }
  .md\:flex-row-reverse { flex-direction: row-reverse; }
  .md\:flex-col         { flex-direction: column; }
  .md\:grid-cols-2      { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4      { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2       { grid-column: span 2 / span 2; }
  .md\:col-span-3       { grid-column: span 3 / span 3; }
  .md\:text-left        { text-align: left; }
  .md\:text-right       { text-align: right; }
  .md\:text-center      { text-align: center; }
  .md\:block            { display: block; }
  .md\:flex             { display: flex; }
  .md\:hidden           { display: none; }
  .md\:items-center     { align-items: center; }
  .md\:justify-between  { justify-content: space-between; }
  .md\:gap-8            { gap: 2rem; }
  .md\:gap-12           { gap: 3rem; }
  .md\:py-20            { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24            { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:mt-0             { margin-top: 0; }
  .md\:mb-0             { margin-bottom: 0; }
  .md\:w-auto           { width: auto; }
}
@media (min-width: 1024px) {
  .lg\:col-span-2  { grid-column: span 2 / span 2; }
  .lg\:col-span-3  { grid-column: span 3 / span 3; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:text-4xl    { font-size: 2.25rem; line-height: 2.5rem; }
  .lg\:text-5xl    { font-size: 3rem;    line-height: 1; }
  .lg\:text-6xl    { font-size: 3.75rem; line-height: 1; }
  .lg\:text-7xl    { font-size: 4.5rem;  line-height: 1; }
  .lg\:text-8xl    { font-size: 6rem;    line-height: 1; }
  .lg\:py-20       { padding-top: 5rem;  padding-bottom: 5rem; }
  .lg\:py-24       { padding-top: 6rem;  padding-bottom: 6rem; }
  .lg\:py-28       { padding-top: 7rem;  padding-bottom: 7rem; }
  .lg\:py-32       { padding-top: 8rem;  padding-bottom: 8rem; }
  .lg\:pt-28       { padding-top: 7rem;  }
  .lg\:pb-28       { padding-bottom: 7rem; }
  .lg\:gap-8       { gap: 2rem;  }
  .lg\:gap-12      { gap: 3rem;  }
  .lg\:gap-16      { gap: 4rem;  }
  .lg\:gap-20      { gap: 5rem;  }
  .lg\:block       { display: block; }
  .lg\:flex        { display: flex; }
  .lg\:hidden      { display: none; }
  .lg\:items-center { align-items: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:text-left   { text-align: left; }
  .lg\:mt-0        { margin-top: 0; }
  .lg\:mb-0        { margin-bottom: 0; }
  .lg\:w-auto      { width: auto; }
  .lg\:max-w-none  { max-width: none; }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:text-7xl    { font-size: 4.5rem; line-height: 1; }
  .xl\:text-8xl    { font-size: 6rem;   line-height: 1; }
  .xl\:py-32       { padding-top: 8rem; padding-bottom: 8rem; }
  .xl\:gap-16      { gap: 4rem; }
  .xl\:flex        { display: flex; }
  .xl\:block       { display: block; }
}

/* =========================================================
   ADDITIONAL UTILITIES - gap fill from template audit
   ========================================================= */

/* Grid column spans */
.col-span-1    { grid-column: span 1 / span 1; }
.col-span-2    { grid-column: span 2 / span 2; }
.col-span-3    { grid-column: span 3 / span 3; }
.col-span-full { grid-column: 1 / -1; }

/* Grid row spans */
.row-span-1 { grid-row: span 1 / span 1; }
.row-span-2 { grid-row: span 2 / span 2; }

/* Alignment extras */
.place-items-center { place-items: center; }
.self-end           { align-self: flex-end; }

/* Divide (border between children) */
.divide-y > * + * {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--border);
}
.divide-border > * + * { border-color: var(--border); }

/* Text wrapping */
.text-balance    { text-wrap: balance; }
.text-pretty     { text-wrap: pretty; }
.text-inherit    { color: inherit; }
.text-current    { color: currentColor; }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* Word break */
.break-words { overflow-wrap: break-word; word-break: break-word; }
.break-all   { word-break: break-all; }

/* Max height */
.max-h-screen { max-height: 100vh; }

/* Ring utilities (box-shadow outline) */
.ring-0       { box-shadow: 0 0 0 0px rgba(177,0,62,0.4); }
.ring-1       { box-shadow: 0 0 0 1px rgba(177,0,62,0.4); }
.ring-2       { box-shadow: 0 0 0 2px rgba(177,0,62,0.4); }
.ring-primary { box-shadow: 0 0 0 2px var(--primary); }

/* Animations */
@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes pulse  { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: none; animation-timing-function: cubic-bezier(0,0,.2,1); } }

.animate-spin   { animation: spin 1s linear infinite; }
.animate-pulse  { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

/* Table utilities */
.table      { display: table; }
.table-auto { table-layout: auto; }

/* Prose - basic typography for blog/content areas */
.prose {
  max-width: 65ch;
  color: var(--foreground);
  line-height: 1.75;
}
.prose p      { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--charcoal-deep); font-weight: 700; line-height: 1.3; }
.prose h1 { font-size: 2.25em; margin-top: 0; margin-bottom: 0.8em; }
.prose h2 { font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; }
.prose h3 { font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; }
.prose h4 { font-size: 1em; margin-top: 1.5em; margin-bottom: 0.5em; }
.prose ul, .prose ol { padding-left: 1.625em; margin-top: 1.25em; margin-bottom: 1.25em; }
.prose li { margin-top: 0.5em; margin-bottom: 0.5em; }
.prose a  { color: var(--primary); text-decoration: underline; font-weight: 500; }
.prose a:hover { color: var(--crimson-dark); }
.prose blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; font-style: italic; color: var(--muted-foreground); margin: 1.6em 0; }
.prose code { background: var(--muted); padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; font-family: var(--font-mono); }
.prose pre  { background: var(--charcoal-deep); color: var(--cream); padding: 1.25rem; border-radius: 0.5rem; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose img  { border-radius: 0.5rem; max-width: 100%; }
.prose hr   { border-color: var(--border); margin: 3em 0; }
.prose strong { font-weight: 600; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }
.prose.max-w-none { max-width: none; }
.not-prose * { all: revert; }

/* =========================================================
   POST CONTENT / PROSE-BLOG - blog article body typography
   ========================================================= */
.post-content,
.prose-blog {
  color: var(--foreground);
  line-height: 1.8;
  font-size: 1.0625rem;
}
.post-content p,
.prose-blog p { margin-top: 1.3em; margin-bottom: 1.3em; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4,
.prose-blog h1,.prose-blog h2,.prose-blog h3,.prose-blog h4 {
  color: var(--charcoal-deep); font-weight: 700; line-height: 1.3; margin-top: 2em; margin-bottom: 0.75em;
}
.post-content h2, .prose-blog h2 { font-size: 1.5rem; }
.post-content h3, .prose-blog h3 { font-size: 1.25rem; }
.post-content h4, .prose-blog h4 { font-size: 1.1rem; }
.post-content ul, .post-content ol,
.prose-blog ul, .prose-blog ol { padding-left: 1.625em; margin-top: 1em; margin-bottom: 1em; }
.post-content li, .prose-blog li { margin-top: 0.4em; margin-bottom: 0.4em; }
.post-content a, .prose-blog a { color: var(--primary); text-decoration: underline; }
.post-content a:hover, .prose-blog a:hover { color: var(--crimson-dark); }
.post-content blockquote, .prose-blog blockquote {
  border-left: 4px solid var(--primary); padding-left: 1rem;
  font-style: italic; color: var(--muted-foreground); margin: 1.6em 0;
}
.post-content code, .prose-blog code {
  background: var(--muted); padding: 0.2em 0.4em;
  border-radius: 0.25em; font-size: 0.875em; font-family: var(--font-mono);
}
.post-content pre, .prose-blog pre {
  background: var(--charcoal-deep); color: var(--cream);
  padding: 1.25rem; border-radius: 0.5rem; overflow-x: auto;
}
.post-content pre code, .prose-blog pre code { background: none; padding: 0; }
.post-content img, .prose-blog img { border-radius: 0.5rem; max-width: 100%; height: auto; }
.post-content strong, .prose-blog strong { font-weight: 600; }
.post-content hr, .prose-blog hr { border-color: var(--border); margin: 2.5em 0; }

/* =========================================================
   POSITIONING & LAYOUT UTILITIES - final gap fill
   ========================================================= */

/* Positioning */
.top-full   { top: 100%; }
.bottom-0   { bottom: 0; }
.bottom-4   { bottom: 1rem; }
.left-0     { left: 0; }
.left-4     { left: 1rem; }
.right-0    { right: 0; }
.right-4    { right: 1rem; }
.left-1\/2  { left: 50%; }
.right-1\/2 { right: 50%; }
.top-16     { top: 4rem; }
.top-20     { top: 5rem; }
.top-4      { top: 1rem; }
.inset-x-0  { left: 0; right: 0; }
.inset-y-0  { top: 0; bottom: 0; }

/* Negative positioning */
.-top-3\.5  { top: -0.875rem; }
.-top-4     { top: -1rem; }
.-top-px    { top: -1px; }
.-left-4    { left: -1rem; }
.-right-4   { right: -1rem; }
.-mt-px     { margin-top: -1px; }

/* Transform */
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
.translate-x-0     { transform: translateX(0); }
.translate-y-0     { transform: translateY(0); }

/* Fixed & sticky layout */
.fixed    { position: fixed; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* Mobile menu native positioning (supplement utility classes) */
#mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 4rem;
  bottom: 0;
}

/* Padding extras */
.py-3\.5   { padding-top: 0.875rem;  padding-bottom: 0.875rem; }
.py-2\.5   { padding-top: 0.625rem;  padding-bottom: 0.625rem; }
.px-4\.5   { padding-left: 1.125rem; padding-right: 1.125rem;  }
.px-9      { padding-left: 2.25rem;  padding-right: 2.25rem;   }
.py-5      { padding-top: 1.25rem;   padding-bottom: 1.25rem;  }
.px-5      { padding-left: 1.25rem;  padding-right: 1.25rem;   }
.pb-2\.5   { padding-bottom: 0.625rem; }
.pt-2\.5   { padding-top: 0.625rem;  }

/* Width extras */
.w-80      { width: 20rem; }
.w-72      { width: 18rem; }
.w-64      { width: 16rem; }
.w-56      { width: 14rem; }
.w-48      { width: 12rem; }
.w-\[380px\] { width: 380px; }
.w-\[240px\] { width: 240px; }
.h-1       { height: 0.25rem; }
.h-0\.5    { height: 2px; }

/* Opacity */
.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-30  { opacity: 0.3; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-80  { opacity: 0.8; }
.opacity-100 { opacity: 1; }
.opacity-\[0\.03\] { opacity: 0.03; }

/* Scale transform */
.scale-100  { transform: scale(1); }
.scale-110  { transform: scale(1.1); }
.-scale-x-1 { transform: scaleX(-1); }

/* Shadow */
.shadow     { box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); }

/* Backdrop */
.backdrop-blur-lg  { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.backdrop-blur-sm  { backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  }
.backdrop-blur-md  { backdrop-filter: blur(8px);  -webkit-backdrop-filter: blur(8px);  }
.backdrop-blur-xl  { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }

/* Hover transition for animation */
.hover\:\[animation-play-state\:paused\]:hover { animation-play-state: paused; }

/* Arbitrary color classes */
.bg-\[\#fdf6ef\]   { background-color: #fdf6ef; }
.bg-\[\#f8f5f0\]   { background-color: #f8f5f0; }
.text-\[10px\]     { font-size: 10px; line-height: 1.5; }
.text-cream-warm\/50 { color: color-mix(in srgb, var(--cream-warm) 50%, transparent); }
.text-charcoal-light { color: var(--charcoal-light); }

/* Background opacity variants */
.bg-background\/80  { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
.bg-background\/60  { background-color: color-mix(in srgb, var(--background) 60%, transparent); }
.bg-card\/80        { background-color: color-mix(in srgb, var(--card) 80%, transparent); }
.bg-primary\/10     { background-color: rgba(177,0,62,0.10); }
.bg-primary\/20     { background-color: rgba(177,0,62,0.20); }
.bg-primary\/30     { background-color: rgba(177,0,62,0.30); }

/* Border opacity */
.border-white\/20   { border-color: rgba(255,255,255,0.2); }
.border-white\/30   { border-color: rgba(255,255,255,0.3); }
.border-charcoal    { border-color: var(--charcoal); }

/* Text opacity */
.text-white\/70     { color: rgba(255,255,255,0.7); }
.text-white\/80     { color: rgba(255,255,255,0.8); }
.text-white\/90     { color: rgba(255,255,255,0.9); }
.text-primary\/70   { color: rgba(177,0,62,0.7); }
.text-primary\/60   { color: rgba(177,0,62,0.6); }
.text-cream-warm\/60 { color: color-mix(in srgb, var(--cream-warm) 60%, transparent); }
.text-cream-warm\/80 { color: color-mix(in srgb, var(--cream-warm) 80%, transparent); }

/* From/to gradient stops */
.from-primary\/20   { --tw-gradient-from: rgba(177,0,62,0.2); }
.via-primary        { --tw-gradient-via: var(--primary); }
.to-primary\/20     { --tw-gradient-to: rgba(177,0,62,0.2); }

/* Flex extras */
.flex-none { flex: none; }
.basis-0   { flex-basis: 0; }
.grow-0    { flex-grow: 0; }
.shrink    { flex-shrink: 1; }
.items-end { align-items: flex-end; }
.justify-around { justify-content: space-around; }
.gap-x-4   { column-gap: 1rem; }
.gap-x-6   { column-gap: 1.5rem; }
.gap-y-4   { row-gap: 1rem; }
.gap-y-6   { row-gap: 1.5rem; }
.gap-y-8   { row-gap: 2rem; }

/* Space extras */
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-7 > * + * { margin-top: 1.75rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.space-y-12 > * + * { margin-top: 3rem; }
.space-y-16 > * + * { margin-top: 4rem; }

/* Text decoration color */
.decoration-primary { text-decoration-color: var(--primary); }

/* Line height extras */
.leading-normal   { line-height: 1.5; }
.leading-loose    { line-height: 2; }
.leading-4        { line-height: 1rem; }
.leading-5        { line-height: 1.25rem; }
.leading-6        { line-height: 1.5rem; }

/* Letter spacing */
.tracking-normal  { letter-spacing: 0; }
.tracking-wider   { letter-spacing: 0.05em; }

/* Visibility */
.invisible  { visibility: hidden; }
.visible    { visibility: visible; }

/* Overflow */
.overflow-x-hidden { overflow-x: hidden; }

/* Object position */
.object-top    { object-position: top; }
.object-center { object-position: center; }

/* Sizing misc */
.size-4    { width: 1rem; height: 1rem; }
.size-5    { width: 1.25rem; height: 1.25rem; }
.size-6    { width: 1.5rem; height: 1.5rem; }
.size-8    { width: 2rem; height: 2rem; }

/* Z-index extras */
.z-0    { z-index: 0; }
.z-20   { z-index: 20; }
.z-30   { z-index: 30; }
.z-100  { z-index: 100; }

/* Border radius extras */
.rounded    { border-radius: 0.25rem; }
.rounded-sm { border-radius: 0.125rem; }
.rounded-3xl { border-radius: 1.5rem; }

/* List style */
.list-disc   { list-style-type: disc; }
.list-inside { list-style-position: inside; }

/* Border sides */
.border-r    { border-right-width: 1px; border-right-style: solid; }
.border-l-2  { border-left-width: 2px; border-left-style: solid; }
.border-b-2  { border-bottom-width: 2px; border-bottom-style: solid; }
.border-t-2  { border-top-width: 2px; border-top-style: solid; }

/* Mix blend mode */
.mix-blend-multiply { mix-blend-mode: multiply; }
.mix-blend-overlay  { mix-blend-mode: overlay; }

/* Will change */
.will-change-transform { will-change: transform; }

/* Group hover extras */
.group:hover .group-hover\:text-white { color: #fff; }
.group:hover .group-hover\:text-primary { color: var(--primary); }
.group:hover .group-hover\:bg-primary   { background-color: var(--primary); }
.group:hover .group-hover\:opacity-100  { opacity: 1; }

/* Hover text extras */
.hover\:text-primary:hover   { color: var(--primary); }
.hover\:text-white:hover     { color: #fff; }
.hover\:bg-primary:hover     { background-color: var(--primary); }
.hover\:bg-primary-dark:hover { background-color: var(--crimson-dark); }
.hover\:bg-crimson-dark:hover { background-color: var(--crimson-dark); }
.hover\:bg-cream:hover       { background-color: var(--cream); }
.hover\:text-primary-foreground:hover { color: var(--primary-foreground); }
.hover\:shadow-lg:hover      { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.hover\:shadow-md:hover      { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:opacity-90:hover     { opacity: 0.9; }
.hover\:opacity-80:hover     { opacity: 0.8; }
.transition-opacity { transition: opacity 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }

/* Focus ring extras */
.focus\:not-sr-only:focus { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.focus\:fixed:focus        { position: fixed; }
.focus\:top-4:focus        { top: 1rem; }
.focus\:left-4:focus       { left: 1rem; }
.focus\:z-\[9999\]:focus   { z-index: 9999; }
.focus\:px-4:focus         { padding-left: 1rem; padding-right: 1rem; }
.focus\:py-2:focus         { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.focus\:bg-primary:focus   { background-color: var(--primary); }
.focus\:text-white:focus   { color: #fff; }
.focus\:rounded-lg:focus   { border-radius: 0.5rem; }

/* Responsive - md block/hidden */
@media (min-width: 768px) {
  .md\:flex-wrap    { flex-wrap: wrap; }
  .md\:items-center { align-items: center; }
  .md\:gap-6        { gap: 1.5rem; }
  .md\:py-16        { padding-top: 4rem; padding-bottom: 4rem; }
  .md\:w-auto       { width: auto; }
  .md\:col-span-1   { grid-column: span 1 / span 1; }
  .md\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
  .md\:text-4xl     { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl     { font-size: 3rem; line-height: 1; }
  .md\:text-6xl     { font-size: 3.75rem; line-height: 1; }
}

/* Responsive - lg specifics */
@media (min-width: 1024px) {
  .lg\:flex-row     { flex-direction: row; }
  .lg\:items-start  { align-items: flex-start; }
  .lg\:col-span-1   { grid-column: span 1 / span 1; }
  .lg\:col-span-4   { grid-column: span 4 / span 4; }
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:text-right   { text-align: right; }
  .lg\:text-3xl     { font-size: 1.875rem; line-height: 2.25rem; }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:pt-24        { padding-top: 6rem; }
  .lg\:pb-24        { padding-bottom: 6rem; }
  .lg\:mt-0         { margin-top: 0; }
  .lg\:flex-1       { flex: 1 1 0%; }
}

/* Responsive - sm specifics */
@media (min-width: 640px) {
  .sm\:gap-4   { gap: 1rem; }
  .sm\:mt-6    { margin-top: 1.5rem; }
  .sm\:inline  { display: inline; }
  .sm\:flex-1  { flex: 1 1 0%; }
  .sm\:max-w-sm { max-width: 24rem; }
  .sm\:max-w-lg { max-width: 32rem; }
}