/* ========================================
   COMPONENTS — Centralized, DRY, Variable-Driven
   ======================================== */

:root {
  /* Color palette for text */
  --text-dark: #333;
  --text-mid: #444;
  --text-light: #666;
  --text-muted: #999;
  
  /* Border colors */
  --border-light: #e1e1e1;
  
  /* Box shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
  
  /* Accent border */
  --accent-border: 4px solid var(--primary);
}

/* ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Two-column layout (70/30 split) — reusable for multiple contexts */
.local-seo-layout,
.product-layout,
.services-layout {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: 1fr;
  max-width: var(--content-max);
  margin: 0 auto;
}

.local-seo-layout {
  margin-top: 0;
}

.product-layout {
  margin-top: var(--space-2xl);
}

@media (min-width: 900px) {
  .local-seo-layout,
  .product-layout,
  .services-layout {
    grid-template-columns: 2fr 1fr;
  }
}

/* ========================================
   MAIN CONTENT COMPONENTS
   ======================================== */

/* Main content area — shared styles for local-seo-main and product-main */
.local-seo-main,
.product-main,
.services-main {
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-2xl);
}

@media (max-width: 600px) {
  .local-seo-main,
  .product-main,
  .services-main {
    padding: var(--space-lg) var(--space-md);
  }
}

/* Heading styles — shared across main content areas */
.local-seo-main h2,
.product-main h2 {
  color: var(--primary);
  margin-bottom: var(--space-md);
}

.local-seo-main h2 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-2xl);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--accent);
}

.product-main h2 {
  font-size: var(--font-size-3xl);
  margin-top: var(--space-2xl);
}

.local-seo-main h3,
.product-main h3 {
  font-size: var(--font-size-xl);
  color: var(--text-dark);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}

.local-seo-main p,
.product-main p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
  color: var(--text-mid);
}

.product-main p {
  font-size: var(--font-size-lg);
}

.local-seo-main p {
  font-size: var(--font-size-base);
}

.local-seo-main ul,
.product-main ul {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.product-main ul {
  margin-bottom: var(--space-xl);
}

.local-seo-main li,
.product-main li {
  margin-bottom: var(--space-sm);
  color: var(--text-mid);
}

/* ========================================
   CARD COMPONENTS
   ======================================== */

/* Info Card — Neutral container for content blocks */
.info-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  box-shadow: var(--shadow-sm);
}

.info-card h2:first-child,
.info-card h3:first-child,
.info-card h4:first-child {
  margin-top: 0;
}

/* Blog Card — Article preview card in grid */
.blog-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.blog-image {
  width: 100%;
  height: 0;
  background: linear-gradient(135deg, var(--accent) 0%, #b8c9b6 100%);
  overflow: hidden;
  /* TODO: Adjust image height (likely 300-400px) and source appropriate hero/feature images for each blog article.
     Images should represent the article topic visually (e.g., AI concepts for AI articles, local maps for local SEO, etc.).
     Current placeholder images are not suitable for production. */
}

.blog-image img,
.blog-image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.blog-content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-tag {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: inline-block;
}

.blog-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  line-height: 1.4;
  color: var(--text-dark);
}

.blog-excerpt {
  font-size: var(--font-size-base);
  color: var(--text-light);
  line-height: 1.6;
  margin: 0 0 var(--space-lg) 0;
  flex-grow: 1;
}

.read-more {
  display: inline-block;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--font-size-base);
  transition: all var(--transition);
}

.read-more:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

/* Tier Card — Pricing tier card */
.tier-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

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

.tier-card h4 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0 0 var(--space-md) 0;
  color: var(--text-dark);
}

.tier-price {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-sm);
}

.tier-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  margin-bottom: var(--space-lg);
}

.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.tier-card li {
  font-size: var(--font-size-base);
  color: var(--text-mid);
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
  position: relative;
}

.tier-card li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Tier Featured — Highlighted pricing tier */
.tier-featured {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 102, 0, 0.15);
}

/* Article Intro Card — Header section for blog articles */
.article-intro {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.article-intro .article-tag {
  display: block;
  margin-bottom: var(--space-md);
}

.article-intro h1 {
  margin-bottom: var(--space-lg);
}

.article-intro .article-subhead {
  margin-bottom: var(--space-lg);
}

.article-intro .listen-btn {
  margin-top: 0;
}

/* Card header — flex layout for title + button */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.card-header h2,
.card-header h3,
.card-header h4 {
  margin: 0;
}

/* Callout boxes — shared styles for highlight-box and tech-box */
.highlight-box,
.tech-box {
  border-left: var(--accent-border);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.tech-box {
  margin: var(--space-xl) 0;
}

/* Highlight Box — Emphasis container with gradient */
.highlight-box {
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
}

.highlight-box h3 {
  margin-top: 0;
  color: var(--primary);
}

.highlight-box p {
  margin-bottom: var(--space-md);
  line-height: 1.7;
  color: var(--text-mid);
  font-size: var(--font-size-base);
}

.highlight-box p:first-child {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

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

/* Tech Box — Technical callout */
.tech-box {
  background: var(--color-bg-light);
}

.tech-box h3 {
  margin-top: 0;
  color: var(--primary);
}

/* ========================================
   SIDEBAR COMPONENTS
   ======================================== */

/* Sidebar Container */
.local-seo-sidebar,
.product-sidebar {
  position: relative;
}

/* Sticky Panel — Fixed sidebar that sticks on scroll */
.sticky-panel {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadow-md);
}

.sticky-panel h3 {
  margin-top: 0;
  font-size: var(--font-size-xl);
  color: var(--primary);
}

/* Sidebar Bullets — Checkmark list */
.sidebar-bullets {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0;
}

.sidebar-bullets li {
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
  position: relative;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.sidebar-bullets li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
  font-weight: bold;
  font-size: var(--font-size-lg);
}

/* ========================================
   PRICING COMPONENTS
   ======================================== */

/* Price Tag — Large price display */
.price-tag {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-sm);
  line-height: 1;
}

/* Price Subtitle — Supporting text */
.price-sub {
  font-size: var(--font-size-sm);
  color: #666;
  margin-bottom: var(--space-lg);
  display: block;
}

/* ========================================
   PROCESS & STEP COMPONENTS
   ======================================== */

/* Process Steps — Numbered step list */
.process-steps {
  display: grid;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* Individual Process Step */
.process-step {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

/* Step Number Circle */
.step-number {
  background: var(--primary);
  color: white;
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

/* Step Content */
.step-content h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--text-dark);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.step-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: 1.6;
}

/* Step Grid — Multi-column layout for steps */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
  margin: var(--space-xl) 0;
}

.step-container {
  text-align: center;
}

.step-container .step-number {
  font-size: var(--font-size-3xl);
  width: 60px;
  height: 60px;
  margin: 0 auto var(--space-md);
}

.step-container h3 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-lg);
  color: var(--text-dark);
}

.step-container p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-light);
  line-height: 1.6;
}

/* ========================================
   GRID COMPONENTS
   ======================================== */

/* Areas Grid — Location/tag grid */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* Area Tag — Individual location tag */
.area-tag {
  background: var(--bg);
  padding: var(--space-sm) var(--space-md);
  border-radius: 20px;
  text-align: center;
  font-size: var(--font-size-sm);
  border: 1px solid var(--accent);
  transition: all var(--transition);
}

.area-tag:hover {
  background: var(--accent);
  border-color: var(--primary);
}

/* Stats Grid — Statistics display */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* Stat Card — Individual statistic */
.stat-card {
  background: var(--bg);
  padding: var(--space-lg);
  border-radius: var(--radius);
  text-align: center;
  border: 1px solid var(--accent);
  transition: all var(--transition);
}

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

.stat-number {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--primary);
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: var(--font-size-sm);
  color: var(--text-light);
  margin-top: var(--space-md);
}

/* Feature Grid — Feature list grid */
.feature-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-top: var(--space-md);
}

@media (min-width: 700px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   CTA COMPONENTS
   ======================================== */

/* Map CTA — Call-to-action box */
.map-cta {
  background: linear-gradient(135deg, var(--primary) 0%, #2a5a2a 100%);
  color: white;
  padding: var(--space-xl);
  border-radius: var(--radius);
  margin-top: var(--space-lg);
  text-align: center;
}

.map-cta h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.map-cta p {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-size-sm);
  opacity: 0.9;
  line-height: 1.6;
}

.map-cta .btn {
  background: white;
  color: var(--primary);
  display: inline-block;
}

.map-cta .btn:hover {
  background: #f0f0f0;
}

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

@media (max-width: 768px) {
  /* Sticky panel becomes static on mobile */
  .sticky-panel {
    position: static;
    margin-top: var(--space-xl);
  }

  /* Step grid collapses to single column */
  .step-grid {
    grid-template-columns: 1fr;
  }

  /* Areas grid becomes narrower */
  .areas-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  /* Stats grid becomes single column */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  /* Feature grid stays 2-column on tablet */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  /* Tighter spacing on small screens */
  .local-seo-main,
  .product-main {
    padding: var(--space-lg) var(--space-md);
  }

  .sticky-panel {
    padding: var(--space-lg) var(--space-md);
  }

  /* Feature grid becomes single column */
  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce font sizes slightly */
  .local-seo-main h2 {
    font-size: var(--font-size-xl);
  }

  .product-main h2 {
    font-size: var(--font-size-2xl);
  }

  /* Step number becomes smaller */
  .step-container .step-number {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-2xl);
  }
}

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

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .area-tag,
  .stat-card,
  .sticky-panel {
    transition: none;
  }

  .stat-card:hover {
    transform: none;
  }
}


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

.contact-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  max-width: var(--content-max);
  margin: 0 auto;
}

@media (min-width: 900px) {
  .contact-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.contact-main {
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 40px;
}

@media (max-width: 600px) {
  .contact-main {
    padding: 20px 16px;
  }
}

.contact-main h3 {
  font-size: 22px;
  color: var(--primary);
  margin-top: 32px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.contact-main h3:first-child {
  margin-top: 0;
}

/* Success Message */
.success-message {
  display: none;
  background: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  color: #2e7d32;
  font-weight: 500;
  text-align: center;
}

.success-message.active {
  display: block;
}

/* Appointment Summary Card */
.appointment-summary {
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.appointment-summary:hover {
  border-color: var(--primary);
  background: #f5f5f5;
}

.appointment-summary.expanded {
  border-color: var(--primary);
  background: #f9f9f9;
}

.appointment-summary.has-selection {
  border-color: var(--primary);
  background: #f0f8f0;
}

.appointment-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.appointment-summary-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--primary);
  border: none;
  padding: 0;
}

.expand-icon {
  font-size: 12px;
  color: #666;
  transition: transform 0.2s ease;
}

.appointment-summary.expanded .expand-icon {
  transform: rotate(180deg);
}

.appointment-summary-details {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.appointment-summary-placeholder {
  color: #999;
  font-weight: normal;
}

/* Appointment Picker */
.appointment-picker {
  display: none;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.appointment-picker.active {
  display: block;
}

.picker-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
  .picker-grid {
    grid-template-columns: 1fr;
  }
}

.calendar-container {
  background: #f9f9f9;
  border-radius: var(--radius);
  padding: 16px;
}

.calendar-container .flatpickr-calendar {
  width: 100%;
  box-shadow: none;
  border: 1px solid var(--accent);
}

.appointment-details h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: var(--primary);
}

.selected-date-display {
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #333;
}

.day-name {
  font-weight: 600;
  color: var(--primary);
}

.time-slots-label {
  font-size: 14px;
  font-weight: 600;
  color: #666;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .time-slots {
    grid-template-columns: repeat(2, 1fr);
  }
}

.time-slot {
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--white);
  color: #333;
}

.time-slot:hover {
  border-color: var(--primary);
  background: #f0f8f0;
}

.time-slot.selected {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  font-weight: 600;
}

.time-slot.unavailable {
  background: #f5f5f5;
  color: #999;
  cursor: not-allowed;
  opacity: 0.5;
}

.appointment-form-group {
  margin-bottom: 16px;
}

.appointment-form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.appointment-form-group select,
.appointment-form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.appointment-form-group select:focus,
.appointment-form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 0, 0.1);
}

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

/* Form Section */
.form-section {
  margin-top: 32px;
}

.form-section h3 {
  margin-top: 0;
}

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

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

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

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.required {
  color: #d32f2f;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 0, 0.1);
}

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

.submit-btn {
  margin-top: 8px;
  width: 100%;
}

/* Contact Sidebar */
.contact-sidebar {
  position: relative;
}

.contact-sticky {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.contact-sticky h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  color: var(--primary);
  border: none;
  padding: 0;
}

.contact-sticky h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #333;
}

.contact-sticky hr {
  border: 0;
  border-top: 1px solid var(--accent);
  margin: 24px 0;
}

.contact-sticky iframe {
  border-radius: 8px;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--primary);
  color: var(--white);
  padding: 16px 24px;
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(100px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 1000;
}

.toast.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.toast-icon {
  font-size: 18px;
}

@media (max-width: 600px) {
  .toast {
    bottom: 16px;
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* Breadcrumb */
.breadcrumb {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-top: 57px;
  padding: 2px 29px;
  font-size: 0.875rem;
  color: #f9f9f9;
  background: rgba(0, 0, 0, var(--opacity-overlay-dark));
  position: relative;
}

.breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  transition: all 0.2s ease;
}

.breadcrumb a:hover {
  color: #4caf50;
  text-decoration: underline;
  font-weight: 600;
}

.breadcrumb .sep {
  margin: 0 8px;
  color: #ccc;
}

.breadcrumb .current {
  color: #f9f9f9;
  font-weight: 500;
}


/* ========================================
   FAQ PAGE LAYOUT
   ======================================== */

.faq-layout {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
  max-width: var(--content-max);
  margin: 0 auto;
}

@media (min-width: 900px) {
  .faq-layout {
    grid-template-columns: 2fr 1fr;
  }
}

.faq-main {
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 32px;
}

@media (max-width: 600px) {
  .faq-main {
    padding: 16px;
  }
}

.faq-main h2 {
  font-size: 26px;
  color: var(--primary);
  margin-top: 40px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}

.faq-main h2:first-child {
  margin-top: 0;
}

.faq-section {
  margin-bottom: 40px;
}

.faq-section h2 {
  position: relative;
  padding-left: 16px;
}

.faq-section h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: var(--primary);
  border-radius: 2px;
}

.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: all 0.2s ease;
}

.faq-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 102, 0, 0.1);
}

.faq-item.active {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 102, 0, 0.15);
}

.faq-item h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 18px 20px 18px 48px;
  position: relative;
  display: block;
  background: var(--white);
}

.faq-item h3::before {
  content: '▼';
  position: absolute;
  left: 16px;
  color: var(--primary);
  font-size: 12px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item:hover h3 {
  background: #f0f8f0;
  color: var(--primary);
}

.faq-item.active h3 {
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

/* Accordion: Hide answer by default */
.faq-item p,
.faq-item ul,
.faq-item ol {
  display: none;
  padding: 0 20px;
  margin: 0;
}

.faq-item p {
  padding: 0 20px;
  margin: 0;
}

.faq-item ul,
.faq-item ol {
  padding: 0 20px 0 40px;
  margin: 0;
}

/* Accordion: Show answer when active */
.faq-item.active p,
.faq-item.active ul,
.faq-item.active ol {
  display: block;
  padding-bottom: 16px;
  padding-top: 12px;
}

.faq-item.active p:first-of-type {
  padding-top: 16px;
}

/* Accordion: Rotate arrow when active */
.faq-item.active h3::before {
  transform: rotate(180deg);
}

.faq-item p {
  margin: 0 0 12px 0;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

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

.faq-item ul,
.faq-item ol {
  margin: 12px 0;
  padding-left: 20px;
  color: #555;
  font-size: 15px;
  line-height: 1.7;
}

.faq-item li {
  margin-bottom: 8px;
}

.faq-item a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}

.faq-item a:hover {
  text-decoration: underline;
}

/* FAQ Sidebar */
.faq-sidebar {
  position: relative;
}

.faq-sticky {
  position: sticky;
  top: 100px;
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.faq-sticky h3 {
  margin: 0 0 20px 0;
  font-size: 20px;
  color: var(--primary);
  border: none;
  padding: 0;
}

.faq-sticky ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-sticky li {
  margin-bottom: 12px;
  padding-left: 0;
}

.faq-sticky a {
  color: var(--primary);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s ease;
}

.faq-sticky a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.faq-cta {
  margin-top: 32px;
  padding: 24px;
  border-top: 1px solid var(--accent);
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  text-align: center;
}

.faq-cta h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: var(--primary);
  font-weight: 600;
}

.faq-cta p {
  margin: 0 0 20px 0;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
  font-weight: 500;
}

.faq-cta .btn {
  width: 100%;
  text-align: center;
  background: var(--primary);
  color: var(--white);
  padding: 14px 24px;
  font-weight: 600;
  border-radius: 6px;
  display: inline-block;
  transition: all 0.2s ease;
}

.faq-cta .btn:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 102, 0, 0.2);
}


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

.services-main {
  background: var(--white);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 40px;
}

@media (max-width: 600px) {
  .services-main {
    padding: 20px 16px;
  }
}

.services-main h2 {
  font-size: 26px;
  color: var(--primary);
  margin-top: 40px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.services-main h2:first-child {
  margin-top: 0;
}

.services-main h3 {
  font-size: 20px;
  color: #333;
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 600;
}

.services-main p {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 16px;
}

.services-main ul {
  padding-left: 20px;
  margin-bottom: 20px;
}

.services-main li {
  margin-bottom: 8px;
  color: #444;
  line-height: 1.6;
}

/* Tier Grid */
.tier-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
  margin: 32px 0;
}

@media (max-width: 1024px) {
  .tier-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .tier-grid {
    grid-template-columns: 1fr;
  }
}

/* Tier Card — Pricing tier card */
.tier-card {
  padding: 28px;
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

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

.tier-card h4 {
  margin: 0 0 12px 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: #333;
}

.tier-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
}

.tier-card li {
  margin-bottom: 12px;
  font-size: var(--font-size-base);
  color: var(--text-mid);
  padding-left: 24px;
  position: relative;
}

.tier-card li::before {
  content: "✓";
  color: var(--primary);
  position: absolute;
  left: 0;
  font-weight: bold;
}

.tier-featured {
  border-color: var(--primary);
  box-shadow: 0 4px 16px rgba(0, 102, 0, 0.15);
}

/* Filter Box (Don't ring me if...) */
.filter-box {
  background: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
}

.filter-box h3 {
  margin-top: 0;
  color: #856404;
  font-size: 18px;
}

.filter-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filter-box li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 12px;
  color: #856404;
}

.filter-box li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: #dc3545;
  font-weight: bold;
}

/* Fit Box (Do ring me if...) */
.fit-box {
  background: #d4edda;
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
}

.fit-box h3 {
  margin-top: 0;
  color: var(--primary);
  font-size: 18px;
}

.fit-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fit-box li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 12px;
  color: #155724;
}

.fit-box li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

/* Lab Promo Card */
.lab-promo {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid var(--accent);
}

.lab-card {
  display: block;
  background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.lab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 102, 0, 0.15);
  border-color: var(--primary-hover);
}

.lab-card h3 {
  margin: 0 0 12px 0;
  color: var(--primary);
  font-size: 20px;
}

.lab-card .small {
  margin: 0 0 16px 0;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

.lab-cta-group {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn-compact {
  padding: 10px 16px;
  font-size: 14px;
}

/* Tier Note */
.tier-note {
  margin-top: 32px;
  color: #888;
  font-size: 14px;
  text-align: center;
  font-style: italic;
}

/* Services Actions */
.services-actions {
  margin-bottom: 24px;
}


/* ========================================
   FAQ & CONTENT PAGE COMPONENTS
   ======================================== */

/* FAQ List Styling */
.faq-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* FAQ Paragraph Spacing */
.faq-paragraph {
  margin-top: 12px;
}

/* Content List (ul/ol with standard FAQ styling) */
.content-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Content Paragraph with top margin */
.content-paragraph {
  margin-top: 12px;
}

/* Pricing List */
.pricing-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Onboarding Steps */
.onboarding-steps {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Payment Plan List */
.payment-plan-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Refund Policy List */
.refund-policy-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Requirements List */
.requirements-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Communication List */
.communication-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* Technical Changes List */
.technical-changes-list {
  margin-top: 12px;
  padding-left: 20px;
  color: #555;
}

/* SEO vs PPC Comparison */
.seo-vs-ppc {
  margin-top: 12px;
}

/* Contact Page Components */
.contact-info-box {
  background: var(--bg);
  padding: 20px;
  border-radius: 8px;
}

.contact-info-box h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
}

.contact-info-box p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.contact-divider {
  border: 0;
  border-top: 1px solid #eee;
  margin: 24px 0;
}

/* AI Agent Lab Components */
.ai-lab-intro {
  background: var(--bg);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.ai-lab-intro h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: var(--primary);
}

.ai-lab-intro p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #555;
}

/* Christchurch Local SEO Components */
.local-seo-intro {
  background: var(--bg);
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.local-seo-intro h4 {
  margin: 0 0 8px 0;
  font-size: 15px;
  color: var(--primary);
}

.local-seo-intro p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #555;
}