/*
Theme Name: Knowledge Way Theme
Theme URI: https://knowledge-way.com
Author: Knowledge Way LLC
Author URI: https://knowledge-way.com
Description: Knowledge Way LLC – AI Governance Consulting Theme. ISO 42001-aligned governance expertise for UAE & GCC organizations.
Version: 1.0.0
License: Proprietary
License URI: https://knowledge-way.com
Text Domain: kw-theme
Tags: business, consulting, ai, governance
*/

/* ===================================================
   CSS CUSTOM PROPERTIES (BRAND VARIABLES)
   =================================================== */

:root {
  /* Brand Colours */
  --background:         hsl(210, 20%, 98%);
  --foreground:         hsl(220, 20%, 14%);
  --card:               hsl(0, 0%, 100%);
  --card-foreground:    hsl(220, 20%, 14%);
  --popover:            hsl(0, 0%, 100%);
  --popover-foreground: hsl(220, 20%, 14%);

  --primary:            hsl(22, 95%, 53%);
  --primary-foreground: hsl(0, 0%, 100%);

  --secondary:          hsl(182, 72%, 28%);
  --secondary-foreground: hsl(0, 0%, 100%);

  --muted:              hsl(210, 25%, 95%);
  --muted-foreground:   hsl(220, 10%, 46%);

  --accent:             hsl(182, 72%, 28%);
  --accent-foreground:  hsl(0, 0%, 100%);

  --destructive:        hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(0, 0%, 100%);

  --border:             hsl(220, 13%, 91%);
  --input:              hsl(220, 13%, 91%);
  --ring:               hsl(22, 95%, 53%);

  --radius:             0.75rem;

  /* Computed hex values for cross-browser fallback */
  --primary-hex:        #f87316;
  --secondary-hex:      #127e7c;
  --background-hex:     #f7f9fb;
  --foreground-hex:     #1a2035;
  --card-hex:           #ffffff;
  --muted-hex:          #edf1f5;
  --muted-fg-hex:       #6e7a8a;
  --border-hex:         #e2e4ea;
  --destructive-hex:    #f23838;
}

/* Dark Mode Variables */
.dark {
  --background:         hsl(220, 20%, 10%);
  --foreground:         hsl(210, 20%, 95%);
  --card:               hsl(220, 20%, 13%);
  --card-foreground:    hsl(210, 20%, 95%);
  --popover:            hsl(220, 20%, 13%);
  --popover-foreground: hsl(210, 20%, 95%);
  --primary:            hsl(22, 95%, 53%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary:          hsl(182, 72%, 35%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --muted:              hsl(220, 15%, 18%);
  --muted-foreground:   hsl(220, 10%, 60%);
  --accent:             hsl(182, 72%, 35%);
  --accent-foreground:  hsl(0, 0%, 100%);
  --destructive:        hsl(0, 62.8%, 30.6%);
  --destructive-foreground: hsl(0, 0%, 95%);
  --border:             hsl(220, 15%, 22%);
  --input:              hsl(220, 15%, 22%);
  --ring:               hsl(22, 95%, 53%);
}

/* ===================================================
   RESET & BASE
   =================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid var(--border);
}

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

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

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

ul, ol {
  list-style: none;
}

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

/* ===================================================
   TYPOGRAPHY UTILITY CLASSES
   =================================================== */

.font-poppins   { font-family: 'Poppins', sans-serif; }
.font-open-sans { font-family: 'Open Sans', sans-serif; }

.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-2xl { font-size: 1.5rem;   line-height: 2rem; }
.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.1; }
.text-6xl { font-size: 3.75rem;  line-height: 1.1; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }
.font-extrabold{ font-weight: 800; }

.leading-snug   { line-height: 1.375; }
.leading-tight  { line-height: 1.25; }
.leading-relaxed{ line-height: 1.7; }
.leading-normal { line-height: 1.5; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-wide   { letter-spacing: 0.025em; }
.tracking-wider  { letter-spacing: 0.05em; }
.uppercase { text-transform: uppercase; }
.italic    { font-style: italic; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Color utilities */
.text-foreground        { color: var(--foreground); }
.text-muted-foreground  { color: var(--muted-foreground); }
.text-primary           { color: var(--primary); }
.text-secondary         { color: var(--secondary); }
.text-background        { color: var(--background); }
.text-destructive       { color: var(--destructive); }
.text-primary-foreground{ color: var(--primary-foreground); }
.text-secondary-foreground { color: var(--secondary-foreground); }

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ===================================================
   LAYOUT UTILITIES
   =================================================== */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Padding */
.px-4  { padding-left: 1rem;    padding-right: 1rem; }
.px-6  { padding-left: 1.5rem;  padding-right: 1.5rem; }
.px-8  { padding-left: 2rem;    padding-right: 2rem; }
.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-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-16 { padding-top: 4rem;     padding-bottom: 4rem; }
.py-20 { padding-top: 5rem;     padding-bottom: 5rem; }
.py-24 { padding-top: 6rem;     padding-bottom: 6rem; }
.pt-2  { padding-top: 0.5rem; }
.pt-4  { padding-top: 1rem; }
.pt-5  { padding-top: 1.25rem; }
.pt-8  { padding-top: 2rem; }
.pb-4  { padding-bottom: 1rem; }
.pb-6  { padding-bottom: 1.5rem; }
.pl-4  { padding-left: 1rem; }
.pl-6  { padding-left: 1.5rem; }
.pl-8  { padding-left: 2rem; }
.p-5   { padding: 1.25rem; }
.p-6   { padding: 1.5rem; }
.p-8   { padding: 2rem; }

/* Margin */
.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; }
.mt-1  { margin-top: 0.25rem; }
.mt-3  { margin-top: 0.75rem; }
.mt-4  { margin-top: 1rem; }
.mt-6  { margin-top: 1.5rem; }
.mt-8  { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

/* Widths / Heights */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.h-full   { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-md  { max-width: 28rem; }

/* Flex & Grid */
.flex           { display: flex; }
.inline-flex    { display: inline-flex; }
.grid           { display: grid; }
.block          { display: block; }
.inline-block   { display: inline-block; }
.hidden         { display: none; }
.relative       { position: relative; }
.absolute       { position: absolute; }
.sticky         { position: sticky; }
.overflow-hidden{ overflow: hidden; }
.overflow-y-auto{ overflow-y: auto; }
.flex-col       { flex-direction: column; }
.flex-row       { flex-direction: row; }
.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; }
.flex-grow      { flex-grow: 1; }
.flex-shrink-0  { flex-shrink: 0; }

.gap-2  { gap: 0.5rem; }
.gap-3  { gap: 0.75rem; }
.gap-4  { gap: 1rem; }
.gap-5  { gap: 1.25rem; }
.gap-6  { gap: 1.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-x-8 { column-gap: 2rem; }
.gap-y-3 { row-gap: 0.75rem; }

.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.space-y-8 > * + * { margin-top: 2rem; }
.space-x-8 > * + * { margin-left: 2rem; }

/* Background colors */
.bg-background  { background-color: var(--background); }
.bg-foreground  { background-color: var(--foreground); }
.bg-card        { background-color: var(--card); }
.bg-muted       { background-color: var(--muted); }
.bg-primary     { background-color: var(--primary); }
.bg-secondary   { background-color: var(--secondary); }

/* Opacity variants */
.bg-muted-30    { background-color: hsl(210, 25%, 95%, 0.3); }
.bg-primary-5   { background-color: hsl(22, 95%, 53%, 0.05); }
.bg-primary-10  { background-color: hsl(22, 95%, 53%, 0.1); }
.bg-primary-20  { background-color: hsl(22, 95%, 53%, 0.2); }
.bg-secondary-5 { background-color: hsl(182, 72%, 28%, 0.05); }
.bg-secondary-10{ background-color: hsl(182, 72%, 28%, 0.1); }
.bg-secondary-20{ background-color: hsl(182, 72%, 28%, 0.2); }

/* ===================================================
   BORDERS & RADIUS
   =================================================== */

.border         { border-width: 1px; border-style: solid; border-color: var(--border); }
.border-t       { border-top: 1px solid var(--border); }
.border-b       { border-bottom: 1px solid var(--border); }
.border-l-2     { border-left: 2px solid; }
.border-l-4     { border-left: 4px solid; }
.border-primary { border-color: var(--primary); }
.border-secondary{ border-color: var(--secondary); }

.rounded        { border-radius: 0.25rem; }
.rounded-lg     { border-radius: 0.5rem; }
.rounded-xl     { border-radius: 0.75rem; }
.rounded-2xl    { border-radius: 1rem; }
.rounded-3xl    { border-radius: 1.5rem; }
.rounded-full   { border-radius: 9999px; }

/* ===================================================
   SHADOWS
   =================================================== */

.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); }
.shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }

/* ===================================================
   Z-INDEX
   =================================================== */

.z-0  { z-index: 0; }
.z-10 { z-index: 10; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ===================================================
   TRANSITIONS
   =================================================== */

.transition-all     { transition: all 0.2s ease; }
.transition-colors  { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
.transition-shadow  { transition: box-shadow 0.3s ease; }
.duration-300       { transition-duration: 0.3s; }

/* ===================================================
   ANIMATIONS (replaces framer-motion)
   =================================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* Intersection Observer triggered animations */
.kw-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kw-animate.kw-visible {
  opacity: 1;
  transform: translateY(0);
}

.kw-animate-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kw-animate-left.kw-visible {
  opacity: 1;
  transform: translateX(0);
}

.kw-animate-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.kw-animate-right.kw-visible {
  opacity: 1;
  transform: translateX(0);
}

.kw-animate-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.kw-animate-scale.kw-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ===================================================
   SITE HEADER
   =================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(247, 249, 251, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 228, 234, 0.5);
  width: 100%;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0.75rem 2rem;
}

.site-logo img {
  height: 44px;
  width: auto;
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  font-family: 'Open Sans', sans-serif;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--primary);
  border-radius: 9999px;
}

.header-cta {
  display: none;
}

.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--foreground);
  transition: background-color 0.2s;
}

.mobile-menu-btn:hover {
  background-color: var(--muted);
}

.mobile-nav {
  display: none;
  border-top: 1px solid rgba(226, 228, 234, 0.5);
  padding: 0.5rem 0 1rem;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-link {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  margin: 0 0.5rem;
  transition: all 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
  color: var(--primary);
  background-color: rgba(248, 115, 22, 0.05);
}

.mobile-nav-cta {
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}

/* ===================================================
   BUTTONS
   =================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  padding: 0.75rem 2rem;
  border-color: var(--primary);
}

.btn-primary:hover {
  background-color: hsl(22, 95%, 47%);
  border-color: hsl(22, 95%, 47%);
  color: var(--primary-foreground);
}

.btn-outline {
  background-color: transparent;
  color: var(--primary);
  padding: 0.75rem 2rem;
  border-color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.btn-outline-secondary {
  background-color: transparent;
  color: var(--secondary);
  padding: 0.75rem 2rem;
  border-color: var(--secondary);
  border-width: 2px;
}

.btn-outline-secondary:hover {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
}

.btn-ghost {
  background-color: transparent;
  color: var(--primary);
  padding: 0.5rem 0;
  border: none;
  font-size: 0.875rem;
}

.btn-ghost:hover {
  opacity: 0.8;
}

.btn-lg {
  font-size: 1rem;
  padding: 1rem 2.5rem;
}

.btn-sm {
  font-size: 0.75rem;
  padding: 0.375rem 0.875rem;
}

.btn svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

/* ===================================================
   HERO SECTION
   =================================================== */

.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--background) 0%, var(--background) 70%, hsl(182, 72%, 28%, 0.05) 100%);
}

.hero-blob-1 {
  position: absolute;
  top: 80px;
  right: 0;
  width: 384px;
  height: 384px;
  background: hsl(22, 95%, 53%, 0.05);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

.hero-blob-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: hsl(182, 72%, 28%, 0.05);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding: 5rem 2rem;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 36rem;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.trust-badges {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.trust-badge svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--secondary);
  flex-shrink: 0;
}

/* Hero stats card */
.hero-stats-card {
  position: relative;
  width: 100%;
  max-width: 28rem;
}

.hero-stats-glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(90deg, hsl(22, 95%, 53%, 0.2), hsl(182, 72%, 28%, 0.2), hsl(22, 95%, 53%, 0.2));
  border-radius: 1.5rem;
  filter: blur(12px);
}

.hero-stats-inner {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(226, 228, 234, 0.6);
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.stat-item {
  text-align: center;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid;
}

.stat-item.primary {
  background: hsl(22, 95%, 53%, 0.05);
  border-color: hsl(22, 95%, 53%, 0.1);
}

.stat-item.secondary {
  background: hsl(182, 72%, 28%, 0.05);
  border-color: hsl(182, 72%, 28%, 0.1);
}

.stat-value {
  font-size: 2.25rem;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
}

.stat-item.primary .stat-value { color: var(--primary); }
.stat-item.secondary .stat-value { color: var(--secondary); }

.stat-label {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
  font-weight: 500;
}

.stats-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(226, 228, 234, 0.6);
  text-align: center;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.social-proof-bar {
  border-top: 1px solid rgba(226, 228, 234, 0.5);
  background: hsl(210, 25%, 95%, 0.3);
  padding: 1.5rem 2rem;
  text-align: center;
}

.social-proof-bar p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  max-width: 56rem;
  margin: 0 auto;
}

/* ===================================================
   SECTION COMMON STYLES
   =================================================== */

.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0.75rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.section-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.section-desc {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.7;
}

.bg-section-alt { background: hsl(210, 25%, 95%, 0.3); }
.bg-section-dark { background-color: var(--foreground); }

/* ===================================================
   CARD COMPONENT
   =================================================== */

.kw-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.kw-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
}

.kw-card.card-lift:hover {
  transform: translateY(-4px);
}

.kw-card.ring-primary {
  box-shadow: 0 0 0 2px hsl(22, 95%, 53%, 0.2);
  border-color: hsl(22, 95%, 53%, 0.3);
}

/* Icon containers */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

.icon-box-sm  { width: 2.5rem;  height: 2.5rem; }
.icon-box-md  { width: 3rem;    height: 3rem; }
.icon-box-lg  { width: 3.5rem;  height: 3.5rem; }
.icon-box-xl  { width: 4rem;    height: 4rem; }

.icon-box-primary   { background: hsl(22, 95%, 53%, 0.1); color: var(--primary); }
.icon-box-secondary { background: hsl(182, 72%, 28%, 0.1); color: var(--secondary); }
.icon-box-gradient  { background: linear-gradient(135deg, hsl(22, 95%, 53%, 0.1), hsl(182, 72%, 28%, 0.1)); }

.icon-box svg {
  width: 55%;
  height: 55%;
}

/* ===================================================
   PROBLEM SECTION
   =================================================== */

.problem-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.gap-card-row {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  transition: box-shadow 0.3s;
}

.gap-card-row:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.gap-inner { display: flex; flex-direction: column; gap: 1rem; }

.gap-row { padding-top: 1rem; border-top: 1px solid rgba(226, 228, 234, 0.5); }

.gap-row-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0.25rem;
}

.gap-row-label.innovating { color: var(--secondary); }
.gap-row-label.governance { color: var(--primary); }
.gap-row-label.result     { color: var(--destructive); }

.gap-row p {
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.problem-callout {
  display: inline-block;
  background: hsl(182, 72%, 28%, 0.1);
  border: 1px solid hsl(182, 72%, 28%, 0.2);
  padding: 1rem 2rem;
  border-radius: 9999px;
  text-align: center;
}

.problem-callout p {
  color: var(--secondary);
  font-weight: 600;
  font-size: 1rem;
}

/* ===================================================
   HOW WE HELP SECTION
   =================================================== */

.steps-grid {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

.step-card {
  position: relative;
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.step-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

.step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

.step-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, hsl(22, 95%, 53%, 0.1), hsl(182, 72%, 28%, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem auto 1.25rem;
}

.step-icon svg {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
}

.step-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.25rem;
  letter-spacing: 0.05em;
}

.step-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 0.75rem;
  font-family: 'Poppins', sans-serif;
}

.step-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ===================================================
   WHY KNOWLEDGE WAY SECTION
   =================================================== */

.differentiators-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

.diff-card {
  display: flex;
  gap: 1.25rem;
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.diff-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  border-color: hsl(22, 95%, 53%, 0.2);
}

.diff-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.25rem;
}

.diff-subtitle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}

.diff-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ===================================================
   SERVICES PREVIEW
   =================================================== */

.services-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.service-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.service-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

.service-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.service-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--secondary);
  background: hsl(182, 72%, 28%, 0.1);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-family: 'Open Sans', sans-serif;
}

.service-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5rem;
}

.service-tagline {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.service-outcome {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-style: italic;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.service-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(226, 228, 234, 0.5);
}

.service-timeline {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.service-timeline svg {
  width: 0.75rem;
  height: 0.75rem;
}

/* Workshop card */
.workshop-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid hsl(182, 72%, 28%, 0.3);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.workshop-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

.workshop-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ===================================================
   WHO WE WORK WITH
   =================================================== */

.audience-grid {
  display: grid;
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto;
}

.audience-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
  transition: box-shadow 0.3s ease;
}

.audience-card:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); }

.audience-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.audience-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
}

.audience-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.help-list-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.75rem;
}

.help-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.help-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.help-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.typical-clients {
  padding-top: 1rem;
  border-top: 1px solid rgba(226, 228, 234, 0.5);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* ===================================================
   CEO / FOUNDER SECTION
   =================================================== */

.founder-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
}

.founder-photo {
  position: relative;
}

.founder-photo-inner {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, hsl(182, 72%, 28%, 0.1), hsl(22, 95%, 53%, 0.1));
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(226, 228, 234, 0.6);
}

.founder-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.founder-deco-1 {
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 7rem;
  height: 7rem;
  background: hsl(22, 95%, 53%, 0.1);
  border-radius: 1rem;
  z-index: -1;
}

.founder-deco-2 {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 5rem;
  height: 5rem;
  background: hsl(182, 72%, 28%, 0.1);
  border-radius: 1rem;
  z-index: -1;
}

.founder-quote {
  position: relative;
  margin-bottom: 2rem;
}

.founder-quote-icon {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 2.5rem;
  height: 2.5rem;
  color: hsl(22, 95%, 53%, 0.15);
}

.founder-blockquote {
  padding-left: 2rem;
  font-size: 1.125rem;
  color: var(--foreground);
  font-style: italic;
  line-height: 1.7;
}

.founder-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
}

.founder-role {
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.founder-bio {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 2rem;
}

.credentials-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.credential-badge {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: hsl(182, 72%, 28%, 0.1);
  color: var(--secondary);
  border: 1px solid hsl(182, 72%, 28%, 0.2);
}

/* ===================================================
   FINAL CTA SECTION
   =================================================== */

.cta-section {
  position: relative;
  overflow: hidden;
  background-color: var(--foreground);
  padding: 5rem 2rem;
}

.cta-blob-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 20rem;
  height: 20rem;
  background: hsl(22, 95%, 53%, 0.1);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

.cta-blob-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16rem;
  height: 16rem;
  background: hsl(182, 72%, 28%, 0.1);
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.cta-title {
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--background);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1.5rem;
}

.cta-subtitle {
  font-size: 1.125rem;
  color: rgba(247, 249, 251, 0.7);
  margin-bottom: 2.5rem;
  line-height: 1.7;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

.cta-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  color: rgba(247, 249, 251, 0.5);
}

/* ===================================================
   FOOTER
   =================================================== */

.site-footer {
  background: var(--card);
  border-top: 1px solid rgba(226, 228, 234, 0.6);
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding: 4rem 2rem;
}

.footer-brand p {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin: 1rem 0 1.25rem;
  line-height: 1.7;
}

.social-links {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.social-link svg { width: 1rem; height: 1rem; }

.social-link.linkedin {
  background: hsl(182, 72%, 28%, 0.1);
  color: var(--secondary);
}

.social-link.linkedin:hover {
  background: var(--secondary);
  color: var(--secondary-foreground);
}

.social-link.email {
  background: hsl(22, 95%, 53%, 0.1);
  color: var(--primary);
}

.social-link.email:hover {
  background: var(--primary);
  color: var(--primary-foreground);
}

.footer-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.footer-link {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  transition: color 0.2s;
}

.footer-link:hover { color: var(--foreground); }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.footer-contact-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.footer-contact-item a:hover { color: var(--foreground); }

.footer-bottom {
  border-top: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.footer-legal {
  display: flex;
  gap: 1.5rem;
}

/* ===================================================
   INNER PAGE HERO
   =================================================== */

.page-hero {
  padding: 4rem 2rem;
  background: linear-gradient(135deg, var(--background) 0%, hsl(182, 72%, 28%, 0.05) 100%);
  border-bottom: 1px solid rgba(226, 228, 234, 0.5);
}

.page-hero-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0.75rem;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  max-width: 40rem;
}

.page-hero p {
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

/* ===================================================
   ABOUT PAGE
   =================================================== */

.story-section {
  padding: 4rem 2rem;
}

.story-content {
  max-width: 56rem;
  margin: 0 auto;
}

.story-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
  margin: 1rem 0;
}

.story-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--muted-foreground);
}

.story-list-item .bullet {
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

.vision-mission-grid {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.values-grid {
  display: grid;
  gap: 1.25rem;
}

.value-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  transition: box-shadow 0.3s;
}

.value-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.value-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin: 0.75rem 0 0.5rem;
}

.value-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.projects-grid {
  display: grid;
  gap: 1rem;
}

.project-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  transition: box-shadow 0.2s;
}

.project-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.06); }

.project-number {
  width: 2rem;
  height: 2rem;
  background: hsl(22, 95%, 53%, 0.1);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary);
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
}

.project-text {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.partners-list {
  max-width: 30rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.partner-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--muted-foreground);
  font-size: 1rem;
}

.partner-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* ===================================================
   SERVICES PAGE
   =================================================== */

.trust-bar {
  padding: 2.5rem 2rem;
  background: hsl(210, 25%, 95%, 0.3);
  border-bottom: 1px solid rgba(226, 228, 234, 0.3);
}

.trust-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 2rem;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.trust-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  flex-shrink: 0;
}

.full-service-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
  transition: box-shadow 0.3s;
}

.full-service-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.service-detail-grid {
  display: grid;
  gap: 2rem;
}

.service-includes {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.include-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  background: hsl(210, 25%, 95%, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.include-item svg {
  width: 1rem;
  height: 1rem;
  color: var(--secondary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.include-item span {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Modal */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
  max-width: 42rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: var(--muted);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.modal-close:hover { background: var(--border); }

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Poppins', sans-serif;
  color: var(--foreground);
  padding-right: 2.5rem;
  margin-bottom: 1.5rem;
}

.modal-section { margin-bottom: 1.5rem; }

.modal-section-title {
  font-weight: 600;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}

.modal-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.modal-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.modal-list-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.modal-list-item.check svg  { color: var(--secondary); }
.modal-list-item.cross svg  { color: var(--destructive); }
.modal-list-item.bullet svg { color: var(--primary); }

.modal-info-box {
  background: hsl(210, 25%, 95%, 0.5);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.modal-after-box {
  background: hsl(22, 95%, 53%, 0.05);
  border-radius: 0.5rem;
  padding: 1rem;
}

.modal-quote {
  font-style: italic;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  border-left: 2px solid var(--primary);
  padding-left: 1rem;
  line-height: 1.7;
}

/* Training cards */
.training-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  overflow: hidden;
  transition: box-shadow 0.3s;
}

.training-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.training-card-body { padding: 2rem; }

.training-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.training-icon-box {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.training-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.25rem;
}

.training-audience {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.training-outcome {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  font-style: italic;
  border-left: 2px solid hsl(22, 95%, 53%, 0.3);
  padding-left: 1rem;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.training-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.training-bonus {
  background: hsl(22, 95%, 53%, 0.05);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}

.training-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.training-expand-btn {
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: opacity 0.2s;
  background: none;
  border: none;
  cursor: pointer;
}

.training-expand-btn:hover { opacity: 0.8; }

.training-expanded {
  display: none;
  padding: 0 2rem 2rem;
  border-top: 1px solid rgba(226, 228, 234, 0.3);
  padding-top: 1.25rem;
}

.training-expanded.open { display: block; }

.training-expanded-title {
  font-weight: 600;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.training-best-for {
  background: hsl(210, 25%, 95%, 0.5);
  border-radius: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Why comparison table */
.why-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.why-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.06); }

.why-card-inner { padding: 1.25rem 1.5rem; }

.why-card-title {
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.why-compare {
  display: grid;
  gap: 1rem;
}

.why-col {
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.why-col.general { background: hsl(210, 25%, 95%, 0.4); }
.why-col.ours    { background: hsl(22, 95%, 53%, 0.05); border: 1px solid hsl(22, 95%, 53%, 0.1); }

.why-col-badge {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.why-col.general .why-col-badge {
  background: var(--muted);
}

.why-col.ours .why-col-badge {
  background: hsl(22, 95%, 53%, 0.1);
}

.why-col-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  font-family: 'Open Sans', sans-serif;
}

.why-col.general .why-col-label { color: rgba(110, 122, 138, 0.7); }
.why-col.ours    .why-col-label { color: var(--primary); }

.why-col-text {
  font-size: 0.875rem;
}

.why-col.general .why-col-text { color: var(--muted-foreground); }
.why-col.ours    .why-col-text { color: var(--foreground); }

/* Credentials */
.cred-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
  text-align: center;
  transition: box-shadow 0.3s;
}

.cred-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1); }

.cred-icon {
  width: 4rem;
  height: 4rem;
  background: hsl(22, 95%, 53%, 0.1);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.cred-icon svg {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
}

.cred-title {
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.cred-desc {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Addon workshops */
.addon-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.25rem;
  text-align: center;
  transition: box-shadow 0.2s;
}

.addon-card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.06); }

.addon-icon {
  width: 3rem;
  height: 3rem;
  background: hsl(182, 72%, 28%, 0.1);
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
}

.addon-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--secondary);
}

.addon-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.25rem;
}

.addon-desc {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Bundle */
.bundle-box {
  margin-top: 2.5rem;
  background: linear-gradient(135deg, hsl(182, 72%, 28%, 0.1), hsl(22, 95%, 53%, 0.1));
  border-radius: 1rem;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(226, 228, 234, 0.3);
}

/* Accordion */
.accordion-item {
  background: var(--card);
  border: 1px solid rgba(226, 228, 234, 0.6);
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.accordion-trigger:hover { background: hsl(210, 25%, 95%, 0.3); }

.accordion-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--muted-foreground);
  flex-shrink: 0;
  transition: transform 0.3s;
}

.accordion-item.open .accordion-trigger svg {
  transform: rotate(180deg);
}

.accordion-content {
  display: none;
  padding: 0 1.25rem 1rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.7;
}

.accordion-item.open .accordion-content { display: block; }

/* ===================================================
   INSIGHTS PAGE
   =================================================== */

.categories-bar {
  padding: 1.25rem 2rem;
  border-bottom: 1px solid rgba(226, 228, 234, 0.5);
  position: sticky;
  top: 72px;
  background: rgba(247, 249, 251, 0.95);
  backdrop-filter: blur(12px);
  z-index: 40;
}

.categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cat-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: 'Open Sans', sans-serif;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.cat-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.cat-btn:not(.active) {
  background: var(--muted);
  color: var(--muted-foreground);
}

.cat-btn:not(.active):hover { background: hsl(210, 25%, 95%, 0.8); }

.featured-post-grid {
  display: grid;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(226, 228, 234, 0.6);
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  background: var(--card);
}

.featured-post-image {
  background: linear-gradient(135deg, hsl(182, 72%, 28%, 0.1), hsl(22, 95%, 53%, 0.1));
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-post-image span {
  font-size: 3rem;
  font-weight: 700;
  color: hsl(182, 72%, 28%, 0.2);
  font-family: 'Poppins', sans-serif;
}

.featured-post-body {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.post-cat-badge {
  display: inline-block;
  background: hsl(22, 95%, 53%, 0.1);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
  font-family: 'Open Sans', sans-serif;
}

.featured-post-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.75rem;
}

.featured-post-excerpt {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.read-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

.read-time svg { width: 0.875rem; height: 0.875rem; }

.blog-grid {
  display: grid;
  gap: 1.5rem;
}

.blog-card {
  background: var(--card);
  border-radius: 0.75rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  overflow: hidden;
  transition: all 0.3s;
}

.blog-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
  transform: translateY(-4px);
}

.blog-card-image {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--muted), hsl(210, 25%, 95%, 0.5));
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-image svg {
  width: 2.5rem;
  height: 2.5rem;
  color: rgba(110, 122, 138, 0.2);
}

.blog-card-body { padding: 1.25rem; }

.blog-post-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  transition: color 0.2s;
}

.blog-card:hover .blog-post-title { color: var(--primary); }

.blog-post-excerpt {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Newsletter */
.newsletter-box {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 28rem;
  margin: 0 auto;
}

/* ===================================================
   CONTACT PAGE
   =================================================== */

.contact-grid {
  display: grid;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

.contact-form-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 2rem;
}

.form-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  color: var(--foreground);
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-required { color: var(--destructive); }

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--background);
  color: var(--foreground);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px hsl(22, 95%, 53%, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder { color: var(--muted-foreground); }

.form-textarea {
  resize: none;
  min-height: 120px;
  line-height: 1.6;
}

.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e7a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.contact-sidebar-card {
  background: var(--card);
  border-radius: 1rem;
  border: 1px solid rgba(226, 228, 234, 0.6);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.contact-sidebar-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  padding: 0.625rem 0;
  transition: color 0.2s;
}

.contact-item:hover { color: var(--foreground); }

.contact-icon-box {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-icon-box.primary   { background: hsl(22, 95%, 53%, 0.1); color: var(--primary); }
.contact-icon-box.secondary { background: hsl(182, 72%, 28%, 0.1); color: var(--secondary); }

.contact-icon-box svg { width: 1rem; height: 1rem; }

.next-steps-card {
  background: hsl(182, 72%, 28%, 0.05);
  border-radius: 1rem;
  border: 1px solid hsl(182, 72%, 28%, 0.1);
  padding: 1.5rem;
}

.next-steps-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.next-steps-title svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--secondary);
}

.next-steps-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.step-num-badge {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* WPForms container */
.wpforms-container {
  margin-top: 0;
}

/* ===================================================
   404 PAGE
   =================================================== */

.error-404-section {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  text-align: center;
}

/* ===================================================
   PROBLEM CALLOUT SECTION
   =================================================== */

.problem-callout-center {
  text-align: center;
}

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

/* Mobile first — styles above apply to all.
   Below we layer on tablet and desktop enhancements. */

@media (min-width: 640px) {
  .sm\:flex-row     { flex-direction: row; }
  .sm\:grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
  .hero-cta-group   { flex-direction: row; }
  .newsletter-form  { flex-direction: row; }
  .form-grid-2      { grid-template-columns: repeat(2, 1fr); }
  .why-compare      { grid-template-columns: repeat(2, 1fr); }
  .training-meta    { grid-template-columns: repeat(2, 1fr); }
  .workshop-inner   { flex-direction: row; align-items: center; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .desktop-nav  { display: flex; }
  .header-cta   { display: block; }
  .mobile-menu-btn { display: none; }

  .hero-grid { grid-template-columns: 1.2fr 1fr; padding: 7rem 2rem; }
  .hero-stats-card { display: block; }

  .problem-grid       { grid-template-columns: repeat(3, 1fr); }
  .steps-grid         { grid-template-columns: repeat(3, 1fr); }
  .differentiators-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid      { grid-template-columns: repeat(3, 1fr); }
  .audience-grid      { grid-template-columns: repeat(2, 1fr); }
  .vision-mission-grid{ grid-template-columns: repeat(2, 1fr); }
  .values-grid        { grid-template-columns: repeat(2, 1fr); }
  .projects-grid      { grid-template-columns: repeat(2, 1fr); }
  .blog-grid          { grid-template-columns: repeat(2, 1fr); }
  .footer-grid        { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom-inner{ flex-direction: row; justify-content: space-between; }
  .featured-post-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid       { grid-template-columns: 3fr 2fr; }
  .service-detail-grid{ grid-template-columns: 1fr 2fr; }

  .md-text-3xl { font-size: 1.875rem; }
  .md-text-4xl { font-size: 2.25rem; }
  .md-text-5xl { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .container { padding-left: 2rem; padding-right: 2rem; }
  .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .values-grid { grid-template-columns: repeat(3, 1fr); }
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid  { grid-template-columns: repeat(3, 1fr); }

  .addon-grid { grid-template-columns: repeat(4, 1fr); }
  .creds-grid { grid-template-columns: repeat(4, 1fr); }
  .founder-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Hero stats card hidden on mobile, shown on large */
@media (max-width: 1023px) {
  .hero-stats-wrapper { display: none; }
}

/* ===================================================
   UTILITY OVERRIDES & HELPERS
   =================================================== */

.section-py { padding-top: 5rem; padding-bottom: 5rem; }

.text-foreground-70 { color: rgba(26, 32, 53, 0.7); }
.text-background-70 { color: rgba(247, 249, 251, 0.7); }

.inline-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.inline-checklist li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

/* WPForms reset — ensure it inherits theme styles */
.wpforms-form .wpforms-field-container input,
.wpforms-form .wpforms-field-container textarea,
.wpforms-form .wpforms-field-container select {
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  background: var(--background) !important;
  color: var(--foreground) !important;
}

.wpforms-form .wpforms-submit-container .wpforms-submit {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 0.875rem 2.5rem !important;
  font-weight: 600 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 0.9375rem !important;
  cursor: pointer !important;
  transition: background-color 0.2s !important;
}

.wpforms-form .wpforms-submit-container .wpforms-submit:hover {
  background-color: hsl(22, 95%, 47%) !important;
}

/* ===================================================
   CONTACT PAGE
   =================================================== */

/* Hero variant with subtle teal gradient */
.page-hero-contact {
  background: linear-gradient(135deg, var(--background) 0%, hsl(182, 72%, 28%, 0.05) 100%);
}

/* Contact two-column layout: form (3fr) + sidebar (2fr) */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 3fr 2fr;
  }
}

/* Form card */
.contact-form-card {
  padding: 2rem;
}

/* Sidebar column: stacked cards */
.contact-sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Direct contact card */
.contact-direct-card {
  padding: 1.5rem;
}

.contact-direct-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-direct-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

a.contact-direct-item:hover {
  color: var(--foreground);
}

.contact-direct-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-direct-icon svg {
  width: 1rem;
  height: 1rem;
}

.contact-direct-icon-primary {
  background-color: hsl(22, 95%, 53%, 0.1);
  color: var(--primary);
}

.contact-direct-icon-secondary {
  background-color: hsl(182, 72%, 28%, 0.1);
  color: var(--secondary);
}

/* "What Happens Next" card */
.contact-next-card {
  background-color: hsl(182, 72%, 28%, 0.05);
  border: 1px solid hsl(182, 72%, 28%, 0.15);
  border-radius: 1rem;
  padding: 1.5rem;
}

.contact-next-card svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--secondary);
}

.next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.next-step-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.next-step-num {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.next-step-text {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  line-height: 1.6;
  font-family: 'Open Sans', sans-serif;
}

/* ── Fallback HTML form (shown before WPForms is installed) ── */
.kw-contact-fallback-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-label {
  font-size: 0.875rem;
  font-family: 'Open Sans', sans-serif;
  color: var(--foreground);
  font-weight: 500;
}

.form-required {
  color: var(--destructive);
}

.form-input {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.875rem;
  background: var(--background);
  color: var(--foreground);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px hsl(22, 95%, 53%, 0.15);
}

.form-textarea {
  resize: none;
  min-height: 7rem;
}

.form-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}

.form-feedback {
  font-size: 0.875rem;
  line-height: 1.5;
  border-radius: 0.5rem;
  padding: 0;
  min-height: 0;
  transition: all 0.2s;
}

.form-feedback.success {
  color: var(--secondary);
  background: hsl(182, 72%, 28%, 0.08);
  border: 1px solid hsl(182, 72%, 28%, 0.2);
  padding: 0.75rem 1rem;
}

.form-feedback.error {
  color: var(--destructive);
  background: hsl(0, 84%, 60%, 0.08);
  border: 1px solid hsl(0, 84%, 60%, 0.2);
  padding: 0.75rem 1rem;
}