/* ===================================
   EVERWISE LEGAL - MAIN STYLESHEET
   Design: Warm & Approachable meets Modern Professional

   Last Refactored: 2025
   Status: All inline styles removed, organized into semantic classes
   =================================== */

/* ===================================
   TABLE OF CONTENTS

   1. CSS Variables (Colors, Typography, Spacing)
   2. Reset & Base Styles
   3. Typography
   4. Layout Utilities
   5. Utility Classes (Spacing, Colors, Borders, etc.)
   6. Navigation
   7. Buttons
   8. Hero Section
   9. Cards
   10. Grid Layouts
   11. Footer
   12. Homepage Specific Styles
   13. About Page Specific Styles
   14. Practice Areas Page Specific Styles
   15. Pricing Page Styles
   16. Contact Page Styles
   17. Section Headers & Common Components
   18. Practice Area Cards
   19. Jim Blair Section
   20. Responsive Design (Tablet & Mobile)
   =================================== */

/* ===================================
   1. CSS VARIABLES - COLOR PALETTE & TYPOGRAPHY
   =================================== */

:root {
  /* Color Palette */
  --color-primary: #2E5C8A;        /* Softer, approachable blue */
  --color-primary-light: #4A7BA7;  /* Lighter blue for hovers */
  --color-primary-dark: #1D3D5C;   /* Darker blue for text */

  --color-accent: #D4A574;         /* Warm gold/amber */
  --color-accent-light: #E6C89F;   /* Lighter gold */
  --color-accent-dark: #B8895A;    /* Darker gold */

  --color-neutral-100: #F8F9FA;    /* Very light gray (backgrounds) */
  --color-neutral-200: #E9ECEF;    /* Light gray (borders, dividers) */
  --color-neutral-300: #DEE2E6;    /* Medium-light gray */
  --color-neutral-700: #495057;    /* Dark gray (body text) */
  --color-neutral-900: #212529;    /* Almost black (headings) */

  --color-white: #FDFDFB;         /* Warm off-white */
  --color-success: #5B9279;        /* Soft green for CTAs */
  --color-error: #C75146;          /* Muted red for errors */

  /* Typography */
  --font-heading: 'Georgia', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Spacing */
  --spacing-xs: 0.5rem;     /* 8px */
  --spacing-sm: 1rem;       /* 16px */
  --spacing-md: 1.5rem;     /* 24px */
  --spacing-lg: 2rem;       /* 32px */
  --spacing-xl: 3rem;       /* 48px */
  --spacing-2xl: 4rem;      /* 64px */
  --spacing-3xl: 6rem;      /* 96px */

  /* Border Radius */
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.5rem;      /* 8px */
  --radius-lg: 1rem;        /* 16px */

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;

  /* Max widths */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
}

/* ===================================
   2. RESET & BASE STYLES
   Modern CSS reset with box-sizing and smooth scrolling
   =================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-neutral-700);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ===================================
   3. TYPOGRAPHY
   Heading hierarchy, paragraph spacing, and link styles
   =================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-neutral-900);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  margin-bottom: var(--spacing-sm);
  line-height: var(--line-height-relaxed);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
}

strong, b {
  font-weight: var(--font-weight-semibold);
}

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

/* ===================================
   4. LAYOUT UTILITIES
   Container widths and section padding
   =================================== */

.container {
  width: 100%;
  max-width: var(--max-width-xl);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.container-narrow {
  max-width: var(--max-width-lg);
}

.section {
  padding: var(--spacing-xl) 0;
}

.section-sm {
  padding: var(--spacing-lg) 0;
}

/* ===================================
   5. UTILITY CLASSES
   Reusable single-purpose classes for rapid styling
   Based on Tailwind-style utility approach
   =================================== */

/* Hover Effects */
.hover-lift-sm:hover {
  transform: translateY(-2px);
}

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

.hover-lift-lg:hover {
  transform: translateY(-8px);
}

.hover-shadow-md:hover {
  box-shadow: var(--shadow-md);
}

.hover-shadow-lg:hover {
  box-shadow: var(--shadow-lg);
}

.hover-shadow-xl:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.hover-effect-sm:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hover-effect-md:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hover-effect-lg:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

/* Typography Utilities */
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Spacing Utilities - Margin Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 2.5rem; }
.mt-6 { margin-top: 3rem; }

/* Spacing Utilities - Margin Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 2.5rem; }
.mb-6 { margin-bottom: 3rem; }

/* Spacing Utilities - Padding */
.p-0 { padding: 0; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }
.p-5 { padding: 2.5rem; }
.p-6 { padding: 3rem; }

/* Spacing Utilities - Padding Top */
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 0.5rem; }
.pt-2 { padding-top: 1rem; }
.pt-3 { padding-top: 1.5rem; }
.pt-4 { padding-top: 2rem; }
.pt-5 { padding-top: 2.5rem; }
.pt-6 { padding-top: 3rem; }

/* Spacing Utilities - Padding Bottom */
.pb-0 { padding-bottom: 0; }
.pb-1 { padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 1rem; }
.pb-3 { padding-bottom: 1.5rem; }
.pb-4 { padding-bottom: 2rem; }
.pb-5 { padding-bottom: 2.5rem; }
.pb-6 { padding-bottom: 3rem; }

/* Layout Utilities */
.w-full { width: 100%; }

/* Transition Utilities */
.transition-all {
  transition: all var(--transition-normal);
}

.transition-fast {
  transition: all var(--transition-fast);
}
.w-auto { width: auto; }
.max-w-sm { max-width: 600px; }
.max-w-md { max-width: 800px; }
.max-w-lg { max-width: 1000px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Display Utilities */
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }

/* Background Utilities */
.bg-neutral-100 { background-color: var(--color-neutral-100); }
.bg-neutral-200 { background-color: var(--color-neutral-200); }
.bg-white { background-color: var(--color-white); }
.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }

/* Heading Styles */
.heading-primary {
  color: var(--color-primary-dark);
}

.heading-accent {
  color: var(--color-primary);
}

.heading-xl {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
}

.heading-underline {
  border-bottom: 1px solid var(--color-neutral-200);
  padding-bottom: 0.75rem;
}

/* Text Color Utilities */
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-accent { color: var(--color-accent); }
.text-neutral-700 { color: var(--color-neutral-700); }
.text-neutral-900 { color: var(--color-neutral-900); }
.text-white { color: var(--color-white); }

/* Border Utilities */
.border { border: 1px solid var(--color-neutral-300); }
.border-2 { border: 2px solid var(--color-neutral-300); }
.border-accent { border-color: var(--color-accent); }
.border-primary { border-color: var(--color-primary); }
.border-left-accent { border-left: 4px solid var(--color-accent); }
.border-bottom { border-bottom: 1px solid var(--color-neutral-200); }

/* Border Radius Utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Gap Utilities */
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.gap-5 { gap: 2.5rem; }
.gap-6 { gap: 3rem; }

/* List Utilities */
.list-styled {
  padding-left: 1.5rem;
  line-height: var(--line-height-relaxed);
}

/* Line Height Utilities */
.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

/* ===================================
   6. NAVIGATION
   Sticky navbar with mobile menu support
   Logo scales on mobile, CTA button styling
   =================================== */

.navbar {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  max-width: var(--max-width-xl);
  margin: 0 auto;
}

.navbar-logo {
  position: relative;
  height: 60px;        /* Maintains original space in navbar layout */
  overflow: visible;   /* Allows logo to overflow downward */
}

.navbar-logo img {
  height: 120px !important;       /* 2x original size */
  width: auto !important;
  max-width: none;                /* Override global img max-width */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;        /* Floats above content below */
  border: 5px solid var(--color-white);
  box-sizing: border-box;
  transition: all 0.2s ease-out;
}

/* Mobile consultation button in navbar */
.navbar-cta-mobile {
  display: none;
}

.navbar-nav {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  list-style: none;
  flex: 1;
  padding-left: 120px;
}

.navbar-nav li:first-child {
  margin-left: auto;          /* Pushes nav group away from logo */
}

.navbar-nav li:nth-child(5) {
  margin-right: auto;         /* Centers the first 5 items, pushes last to right */
}

.navbar-nav a {
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-900);
  transition: color var(--transition-fast);
}

.navbar-nav a:hover {
  color: var(--color-primary);
}

.navbar-nav a.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.navbar-cta {
  background-color: var(--color-accent);
  color: var(--color-white) !important;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  transition: all var(--transition-normal);
}

.navbar-cta:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-white) !important;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  cursor: pointer;
  color: var(--color-neutral-900);
}

/* ===================================
   7. BUTTONS
   Primary, accent, and outline button variants with hover states
   =================================== */

.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-primary-light);
  color: var(--color-white);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-accent:hover {
  background-color: var(--color-accent-dark);
  color: var(--color-white);
}

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

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

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
}

/* ===================================
   8. HERO SECTION
   Gradient background hero with centered content
   =================================== */

.hero {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: var(--color-white);
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.hero h1 {
  color: var(--color-white);
  font-size: var(--font-size-5xl);
  margin-bottom: var(--spacing-md);
}

.hero p {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
  opacity: 0.95;
}

.hero p:last-child {
  margin-bottom: 0;
}

.hero .btn {
  margin-top: var(--spacing-md);
}

/* ===================================
   9. CARDS
   General purpose card component with hover effects
   =================================== */

.card {
  background-color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.card h3 {
  color: var(--color-primary-dark);
  margin-bottom: var(--spacing-sm);
}

.card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--spacing-md);
}

/* ===================================
   10. GRID LAYOUTS
   Responsive grid systems for 2, 3, and 4 column layouts
   =================================== */

.grid {
  display: grid;
  gap: var(--spacing-lg);
}

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

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* ===================================
   11. FOOTER
   Dark footer with link columns and copyright bar
   =================================== */

.footer {
  background-color: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--spacing-2xl) 0 var(--spacing-md);
}

.footer h4 {
  color: var(--color-accent-light);
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

.footer a {
  color: var(--color-white);
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.footer a:hover {
  opacity: 1;
  color: var(--color-accent-light);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.footer-links {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links li:last-child {
  margin-bottom: 0;
}

/* ===================================
   19. JIM BLAIR SECTION
   Bio grid, statistics, and photo styling
   =================================== */

/* Jim Blair photos */
.jim-photo-index,
.jim-photo-about {
  height: auto;
  border-radius: var(--radius-md);
}

/* ===================================
   12. HOMEPAGE SPECIFIC STYLES
   Intro text, organization items, badges, and CTA sections
   =================================== */

.intro-text {
  font-size: var(--font-size-lg);
  margin-bottom: 2rem;
}

.intro-link {
  font-weight: var(--font-weight-semibold);
}

.org-item-label {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-700);
  margin-bottom: 0.5rem;
}

.org-item-name {
  font-weight: var(--font-weight-semibold);
}

.card-featured {
  border: 2px solid var(--color-accent);
}

.badge {
  background-color: var(--color-accent);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  display: inline-block;
}

.cta-section {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: white;
  text-align: center;
}

.cta-section h2 {
  color: white;
  margin-bottom: 1rem;
}

.cta-section p {
  opacity: 0.95;
}

.cta-section-link {
  color: var(--color-accent-light);
  font-weight: var(--font-weight-semibold);
}

/* ===================================
   13. ABOUT PAGE SPECIFIC STYLES
   Bio grid, credentials, journey items, and philosophy cards
   =================================== */

.hero-compact {
  padding: 4rem 0;
}

.bio-grid {
  display: block;
  margin-bottom: 4rem;
}

.bio-image-wrapper {
  float: left;
  width: 280px;
  margin: 1rem 2rem 1rem 0;
}

.bio-image-wrapper img {
  width: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-md);
  display: block;
}

.bio-text {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.bio-text-emphasis {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-dark);
}

.content-section {
  margin-bottom: 4rem;
}

/* Uses .content-item base class for spacing */

.credential-item h3,
.journey-item h3,
.community-item h3 {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.item-subtitle {
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.5rem;
}

.philosophy-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: 1rem;
}

/* ===================================
   17. SECTION HEADERS & COMMON COMPONENTS
   Reusable section headers with accent underline
   Shared base classes for card-like components
   =================================== */

.section-header {
  color: var(--color-primary-dark);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Base class for accent-bordered boxes */
.accent-box {
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

/* Base class for content items with consistent spacing */
.content-item {
  margin-bottom: 2rem;
}

.content-item:last-child {
  margin-bottom: 0;
}

/* Base class for card-like components */
.card-base {
  padding: 2rem;
  border-radius: var(--radius-lg);
}

.card-light {
  background-color: var(--color-neutral-100);
}

.card-shadow {
  box-shadow: var(--shadow-md);
}

.card-shadow-lg {
  box-shadow: var(--shadow-lg);
}

.card-transition {
  transition: all var(--transition-normal);
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ===================================
   14. PRACTICE AREAS PAGE SPECIFIC STYLES
   Practice intro text, subsections, and info boxes
   =================================== */

.practice-intro {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent-dark);
  margin-bottom: 2rem;
}

/* Uses .content-item base class for spacing */

.practice-subsection h3 {
  color: var(--color-primary);
}

/* Uses .accent-box base class for border & border-radius */
.info-box {
  padding: 1.5rem;
}

.info-box-light {
  background-color: var(--color-neutral-100);
}

.info-box-white {
  background-color: var(--color-white);
}

.info-box h4 {
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.practice-subsection h4 {
  font-size: var(--font-size-lg);
  margin-bottom: 0.5rem;
}

/* ===================================
   18. PRACTICE AREA CARDS
   Clickable cards with left accent border and hover effects
   =================================== */

/* Uses .accent-box base class for border-left & border-radius */
.practice-card {
  text-decoration: none;
  color: inherit;
  display: block;
  background-color: var(--color-neutral-100);
  padding: 1rem 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.practice-card h3 {
  font-size: var(--font-size-xl);
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.practice-card p {
  margin: 0;
}

/* ===================================
   15. PRICING PAGE STYLES
   Pricing cards, badges, features lists, and FAQ items
   Moved from embedded <style> block in pricing.html
   =================================== */

.pricing-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  align-items: start;
}

/* Uses .card-base for padding and border-radius */
.pricing-card {
  background-color: var(--color-white);
  position: relative;
}

.pricing-card.featured {
  border: 3px solid var(--color-accent);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: white;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}

.pricing-header {
  text-align: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-neutral-200);
}

.pricing-header h3 {
  color: var(--color-primary-dark);
  margin-bottom: 0.5rem;
}

.pricing-price {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.pricing-period {
  font-size: var(--font-size-base);
  color: var(--color-neutral-700);
}

.pricing-features {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.pricing-features li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-neutral-200);
  line-height: var(--line-height-relaxed);
}

.pricing-features li:last-child {
  border-bottom: none;
}

.pricing-features li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: var(--font-weight-bold);
  margin-right: 0.75rem;
}

.faq-item {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-neutral-200);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 0.75rem;
}

/* ===================================
   16. CONTACT PAGE STYLES
   Contact form, grid layout, and contact info cards
   Moved from embedded <style> block in contact.html
   =================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

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

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

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

.contact-info-card h3 {
  color: var(--color-primary-dark);
  margin-bottom: 1rem;
}

.contact-info-item {
  display: flex;
  align-items: start;
  margin-bottom: 1.5rem;
}

.contact-info-item:last-child {
  margin-bottom: 0;
}

.contact-info-icon {
  font-size: var(--font-size-2xl);
  margin-right: 1rem;
  color: var(--color-accent);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hours-list {
  list-style: none;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-neutral-300);
}

.hours-list li:last-child {
  border-bottom: none;
}

.checkbox-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
}

.jim-section-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 3rem;
  align-items: start;
}

.jim-image-container {
  text-align: center;
  padding-right: 2rem;
}

.jim-image-container img {
  width: 100%;
  max-width: 250px;
  object-fit: cover;
  margin: 0 auto;
  display: block;
}

.jim-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-neutral-300);
}

.jim-stat-number {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.jim-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-neutral-700);
  margin: 0;
}

/* ===================================
   20. RESPONSIVE DESIGN
   Tablet (max-width: 768px) and mobile (max-width: 480px) breakpoints
   Mobile-first adjustments for navigation, typography, and layouts
   =================================== */

@media (max-width: 768px) {
  :root {
    --font-size-4xl: 2rem;
    --font-size-5xl: 2.25rem;
  }

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  .navbar-container {
    padding: calc(var(--spacing-sm) / 2) var(--spacing-md);  /* Reduce height by 50% */
  }

  .navbar-logo {
    position: fixed;
    top: 4px;
    left: var(--spacing-md);
    height: auto;
    overflow: visible;
    z-index: 1001;
  }

  .navbar-logo img {
    height: 70px !important;
    position: relative !important;
    border-width: 3px !important;
  }

  .navbar-cta-mobile {
    display: block;
    background-color: var(--color-accent);
    color: var(--color-white) !important;
    padding: calc(var(--spacing-xs) / 2) var(--spacing-sm);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    transition: all var(--transition-normal);
    white-space: nowrap;
    margin-left: auto;
    margin-right: var(--spacing-sm);
  }

  .navbar-cta-mobile:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .navbar-container {
    width: 100%;
    max-width: 100%;
  }

  .navbar-nav {
    display: none;
    padding-left: 0 !important;
  }

  .navbar-nav li:first-child {
    margin-left: 0 !important;
  }

  .navbar-nav li:nth-child(5) {
    margin-right: 0 !important;
  }

  .navbar-nav.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
  }

  .navbar-nav .navbar-cta {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .section {
    padding: var(--spacing-lg) 0;
    width: 100%;
  }

  .hero {
    padding: var(--spacing-2xl) 0;
    margin-top: 46px;
    width: 100%;
  }

  .container {
    padding: 0 var(--spacing-sm);
    width: 100%;
    max-width: 100%;
  }

  /* Jim section responsive */
  .jim-section-grid {
    display: block;
  }

  .jim-image-container {
    float: left;
    width: 40%;
    max-width: 180px;
    margin: 0 1.5rem 1rem 0;
    padding: 0.5rem 0 0 0;
  }

  .jim-image-container img {
    width: 100%;
    max-width: 100%;
  }

  /* Contact grid responsive */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Bio grid responsive */
  .bio-image-wrapper {
    width: 40%;
    max-width: 180px;
    margin: 1rem 1.5rem 1rem 0;
  }
}

@media (max-width: 480px) {
  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }

  /* Adjust grid layouts for very small screens */
  .grid-2 {
    grid-template-columns: 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: 1fr;
  }
}