/*
Theme Name: Maui Removal Works
Theme URI: https://www.mauiremovalworks.com
Description: Custom pixel-perfect child theme for Maui Removal Works, built on Hello Elementor with dark contractor-sleek styling.
Author: Google Deepmind Antigravity Team
Version: 1.0.0
Template: hello-elementor
Text Domain: maui-removal-works
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --radius: 0.75rem;
  --background: #0e121a;
  --foreground: #f5f6f8;
  --card: #161c28;
  --card-foreground: #f5f6f8;
  --popover: #161c28;
  --popover-foreground: #f5f6f8;
  --primary: #3E74A0;
  --primary-foreground: #f8fafc;
  --primary-glow: #6298C6;
  --secondary: #1c2332;
  --secondary-foreground: #f5f6f8;
  --muted: #19202e;
  --muted-foreground: #a9b2c0;
  --accent: #21293a;
  --accent-foreground: #f5f6f8;
  --destructive: #dc2626;
  --destructive-foreground: #f8fafc;
  --border: #2d3748;
  --border-muted: rgba(45, 55, 72, 0.6);
  --border-strong: rgba(45, 55, 72, 0.7);
  --input: #242d3e;
  --ring: #3E74A0;
  
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --shadow-glow: 0 0 40px -8px rgba(62, 116, 160, 0.45);
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  min-height: 100vh;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--foreground);
}

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

/* ─────────────────────────────────────────────────────────────
   GLOBAL SVG ICON SIZING STANDARDS (PREVENTS OVERSIZED ICONS)
   ───────────────────────────────────────────────────────────── */
svg {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  max-width: 100%;
}

/* Tailwind utility size mappings used by Lucide React icons */
.h-3\.5, .w-3\.5 { height: 0.875rem !important; width: 0.875rem !important; }
.h-4, .w-4 { height: 1rem !important; width: 1rem !important; }
.h-4\.5, .w-4\.5 { height: 1.125rem !important; width: 1.125rem !important; }
.h-5, .w-5 { height: 1.25rem !important; width: 1.25rem !important; }
.h-5\.5, .w-5\.5 { height: 1.375rem !important; width: 1.375rem !important; }

/* Custom icon class helpers */
.icon-box svg, .icon-box-svg {
  width: 1.375rem !important;
  height: 1.375rem !important;
  max-width: 1.375rem !important;
  max-height: 1.375rem !important;
  flex-shrink: 0;
  color: var(--primary-glow);
}

.trust-check-icon {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0;
  color: var(--primary-glow);
}

.icon-xs {
  width: 0.875rem !important;
  height: 0.875rem !important;
  max-width: 0.875rem !important;
  max-height: 0.875rem !important;
  flex-shrink: 0;
}

.icon-sm {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0;
}

.icon-md {
  width: 1.125rem !important;
  height: 1.125rem !important;
  max-width: 1.125rem !important;
  max-height: 1.125rem !important;
  flex-shrink: 0;
}

.icon-lg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  flex-shrink: 0;
}

.icon-glow {
  width: 1rem !important;
  height: 1rem !important;
  max-width: 1rem !important;
  max-height: 1rem !important;
  flex-shrink: 0;
  color: var(--primary-glow);
}

/* Section Containers */
.mrw-container {
  width: 100%;
  max-width: 72rem; /* 6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .mrw-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.mrw-container-narrow {
  width: 100%;
  max-width: 48rem; /* 3xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .mrw-container-narrow {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Header */
.mrw-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border-muted);
  background-color: rgba(14, 18, 26, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mrw-header-inner {
  display: flex;
  height: 4.5rem;
  align-items: center;
  justify-content: space-between;
}

.mrw-logo {
  height: 3rem;
  width: auto;
  display: block;
}

@media (min-width: 768px) {
  .mrw-logo {
    height: 3.5rem;
  }
}

/* Buttons */
.mrw-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 0.875rem 1.5rem;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-glow);
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.mrw-btn-primary:hover {
  background-color: rgba(62, 116, 160, 0.9);
  color: #ffffff;
}

.mrw-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background-color: rgba(14, 18, 26, 0.4);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  padding: 0.875rem 1.5rem;
  transition: background-color 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.mrw-btn-outline:hover {
  background-color: var(--accent);
}

/* Hero Section & Canvas Effects */
.hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.hero-glow {
  background:
    radial-gradient(ellipse 70% 60% at 75% 15%, rgba(98, 152, 198, 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 15% 85%, rgba(62, 116, 160, 0.16), transparent 70%),
    linear-gradient(to bottom, rgba(22, 28, 40, 0.7), var(--background));
}

.hero-grid {
  background-image:
    linear-gradient(to right, rgba(98, 152, 198, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98, 152, 198, 0.16) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, black 45%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 10%, black 45%, transparent 88%);
}

.hero-floor-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45vh;
  max-height: 380px;
  overflow: hidden;
  perspective: 1000px;
  pointer-events: none;
  z-index: 1;
}

.hero-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -10%;
  bottom: 0;
  transform: rotateX(60deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(to right, rgba(98, 152, 198, 0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98, 152, 198, 0.18) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: linear-gradient(to top, black 20%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, black 20%, transparent 85%);
}

.hero-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6rem;
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
}

/* Pill / Badge */
.mrw-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(45, 55, 72, 0.8);
  background-color: rgba(22, 28, 40, 0.7);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted-foreground);
  backdrop-filter: blur(4px);
}

/* Gradient Text */
.mrw-gradient-text {
  background: linear-gradient(to right, var(--primary-glow), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards & Containers */
.mrw-card {
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
}

.mrw-card-hover {
  transition: border-color 0.2s;
}

.mrw-card-hover:hover {
  border-color: rgba(62, 116, 160, 0.4);
}

/* Section Kickers */
.mrw-kicker {
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary-glow);
}

/* FAQ Details Accordion */
.mrw-faq-item {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-strong);
}

@media (min-width: 640px) {
  .mrw-faq-item {
    padding: 1.25rem 1.75rem;
  }
}

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

.mrw-faq-summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
}

.mrw-faq-summary::-webkit-details-marker {
  display: none;
}

.mrw-faq-summary h3,
.mrw-faq-summary span:first-child {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--foreground);
  line-height: 1.4;
}

@media (min-width: 640px) {
  .mrw-faq-summary h3,
  .mrw-faq-summary span:first-child {
    font-size: 1.0625rem;
  }
}

.mrw-faq-icon {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background-color: rgba(62, 116, 160, 0.18);
  color: var(--primary-glow);
  transition: transform 0.2s ease;
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
  user-select: none;
}

details[open] .mrw-faq-icon {
  transform: rotate(45deg);
}

.mrw-faq-content {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* Mobile Sticky Bottom CTA Bar */
.mrw-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  border-top: 1px solid var(--border-muted);
  background-color: rgba(14, 18, 26, 0.9);
  padding: 0.75rem 1rem max(0.75rem, env(safe-area-inset-bottom));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (min-width: 768px) {
  .mrw-mobile-cta-bar {
    display: none !important;
  }
}

.mrw-page-wrapper {
  padding-bottom: 6rem;
}

@media (min-width: 768px) {
  .mrw-page-wrapper {
    padding-bottom: 0;
  }
}

/* ─────────────────────────────────────────────────────────────
   PREMIUM INNER PAGE DESIGN SYSTEM
   ───────────────────────────────────────────────────────────── */

/* Card Grid Utilities */
.card-grid-3 {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

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

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

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

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

.card-grid-4 {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

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

/* Rich Elevated Cards */
.mrw-rich-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid var(--border-strong);
  background-color: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  overflow: hidden;
}

.mrw-rich-card:hover {
  transform: translateY(-3px);
  border-color: rgba(62, 116, 160, 0.5);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(62, 116, 160, 0.2);
}

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

.rich-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: rgba(62, 116, 160, 0.15);
  color: var(--primary-glow);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rich-card-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.35;
  margin-bottom: 0.625rem;
  transition: color 0.2s ease;
}

.mrw-rich-card:hover .rich-card-title {
  color: #ffffff;
}

.rich-card-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.rich-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(45, 55, 72, 0.5);
  margin-top: auto;
}

.rich-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-glow);
  transition: color 0.2s ease, transform 0.2s ease;
}

.mrw-rich-card:hover .rich-card-link {
  color: #ffffff;
  transform: translateX(3px);
}

/* Quick Highlights Bar */
.highlights-bar {
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

.highlight-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
}

.highlight-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--foreground);
}

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

/* Region Sections */
.region-group-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-glow);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.region-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(98, 152, 198, 0.3), transparent);
}

/* Prose / Inner Content Styling */
.prose-content p {
  margin-bottom: 1.25rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.prose-content h2, .prose-content h3 {
  font-family: var(--font-display);
  color: var(--foreground);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose-content ul, .prose-content ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  color: var(--muted-foreground);
}

.prose-content li {
  margin-bottom: 0.5rem;
}

/* ─────────────────────────────────────────────────────────────
   PREMIUM INNER PAGE SPACING & RHYTHM SYSTEM (PHASE 5.1)
   ───────────────────────────────────────────────────────────── */

/* Hero Spacing & Vertical Rhythm */
.hero-section {
  position: relative;
  padding: 2.25rem 0 3rem 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-section {
    padding: 2.75rem 0 3.5rem 0;
  }
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100%;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.breadcrumb-nav a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s;
}

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

.crumb-separator {
  color: var(--border-strong);
}

.crumb-current {
  color: var(--foreground);
  font-weight: 500;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--foreground);
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.hero-description {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 44rem;
  margin-bottom: 1.75rem;
}

.hero-content.text-center .hero-description,
.text-center .hero-description {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.hero-cta-group {
  margin-top: 0.5rem;
}

.btn-flex-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-content.text-center .btn-flex-row {
  justify-content: center;
}

/* Section Spacing & Rhythm */
.section-padding {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .section-padding {
    padding: 4.5rem 0;
  }
}

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

.bg-alt {
  background-color: rgba(22, 28, 40, 0.4);
}

.text-center {
  text-align: center !important;
}

.text-center .section-title,
.text-center .section-subtitle,
.text-center .mrw-kicker,
.text-center .breadcrumb-nav,
.text-center .hero-description {
  text-align: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.section-header {
  margin-bottom: 2.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-top: 0.375rem;
}

.section-subtitle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-foreground);
  max-width: 40rem;
  margin-top: 0.75rem;
}

/* Footer Separation */
.mrw-footer {
  margin-top: 2rem;
}

/* ─────────────────────────────────────────────────────────────
   PHASE 6.1 — REFINED SPACING, PRICING & FOOTER TRANSITION SYSTEM
   ───────────────────────────────────────────────────────────── */

:root {
  --section-space-xl: clamp(4.5rem, 7vw, 6.5rem);
  --section-space-lg: clamp(3.5rem, 5vw, 5rem);
  --section-space-md: clamp(2.5rem, 3.5vw, 3.5rem);
  --section-space-sm: clamp(1.5rem, 2vw, 2.25rem);
}

/* Hero Spacing & Vertical Rhythm */
.hero-section {
  position: relative;
  padding: 2.25rem 0 3rem 0;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-section {
    padding: 2.75rem 0 3.5rem 0;
  }
}

.hero-title-landing {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 5vw, 4.25rem); /* 44px to 68px desktop */
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.hero-sub-landing {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted-foreground);
  max-width: 44rem;
  margin-bottom: 2rem;
}

/* Icon Box Badge Utility */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background-color: rgba(62, 116, 160, 0.18);
  color: var(--primary-glow) !important;
  border: 1px solid rgba(98, 152, 198, 0.3);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.icon-box svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
  color: var(--primary-glow) !important;
  stroke: currentColor;
}

/* Item Chips & Location Cards */
.item-chip-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.item-chip-card:hover {
  border-color: rgba(62, 116, 160, 0.4);
  transform: translateY(-2px);
}

.location-chip-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.5rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.location-chip-card:hover {
  border-color: rgba(62, 116, 160, 0.4);
  transform: translateY(-2px);
}

.location-chip-card:hover .rich-card-link {
  color: #ffffff;
  transform: translateX(3px);
}

/* Major Section Vertical Separation */
.section-major {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

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

.bg-alt {
  background-color: rgba(22, 28, 40, 0.45);
}

/* Visual Service Story / Overview Split */
.service-story-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .service-story-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
  }
}

.story-media-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(62, 116, 160, 0.25);
  background-color: var(--card);
}

.story-media-card img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  display: block;
}

/* Steps Connector Line for Desktop Process */
.process-steps-row {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  position: relative;
}

@media (min-width: 768px) {
  .process-steps-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }

  .process-steps-row::before {
    content: "";
    position: absolute;
    top: 2.75rem;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(to right, rgba(98, 152, 198, 0.4), rgba(62, 116, 160, 0.2));
    z-index: 1;
  }
}

.process-step-item {
  position: relative;
  z-index: 2;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.process-step-item:hover {
  transform: translateY(-4px);
  border-color: rgba(62, 116, 160, 0.5);
}

.process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  color: #ffffff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-glow);
}

/* Horizontal Trust Strip */
.trust-strip-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .trust-strip-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-strip-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
}

/* Pricing 2-Column Composition (Phase 6 Visual Fidelity) */
.pricing-card-split {
  display: grid;
  grid-template-columns: 1fr;
  border-radius: 1.25rem;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.8), var(--shadow-glow);
}

@media (min-width: 1024px) {
  .pricing-card-split {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.pricing-left {
  padding: 2.25rem;
  background-color: var(--card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .pricing-left {
    padding: 3rem;
  }
}

.pricing-right {
  padding: 2.25rem;
  background: linear-gradient(135deg, var(--primary) 0%, rgba(45, 85, 120, 0.95) 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 1024px) {
  .pricing-right {
    padding: 3rem;
  }
}

.price-giant {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 5vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--foreground);
  background: linear-gradient(to right, #ffffff, var(--primary-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.price-display-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 1.25rem 0;
}

.price-label-stack {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--primary-glow);
  line-height: 1.35;
}

.pricing-points-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.pricing-points-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--foreground);
}

.pricing-right-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.5rem;
}

.pricing-right-title {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.pricing-right-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.75rem;
}

.pricing-right-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1.125rem 1.75rem;
  border-radius: 0.625rem;
  background-color: #ffffff;
  color: #0e121a;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.pricing-right-btn:hover {
  background-color: #f8fafc;
  color: #0e121a;
  transform: translateY(-2px);
}

/* Final CTA & Seamless Footer Transition */
.final-cta-section {
  padding: clamp(3.5rem, 5vw, 5rem) 1.5rem;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(62, 116, 160, 0.16), transparent 75%), rgba(22, 28, 40, 0.5);
  border-top: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: 0;
}

.final-cta-heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.final-cta-sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  color: var(--muted-foreground);
  max-width: 38rem;
  margin: 0 auto 2rem auto;
}

/* ─────────────────────────────────────────────────────────────
   REFINED HERO FEATURE CARD & INNER CARD SYSTEM (VISUAL REFINEMENT)
   ───────────────────────────────────────────────────────────── */

/* Hero Feature Card (Fallback for Media Column) */
.hero-feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 1.25rem;
  border: 1px solid rgba(98, 152, 198, 0.35);
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(62, 116, 160, 0.2), transparent 75%), var(--card);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(62, 116, 160, 0.25);
  overflow: hidden;
}

.hero-feature-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(45, 55, 72, 0.6);
  margin-bottom: 1.5rem;
}

.hero-feature-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(62, 116, 160, 0.22);
  border: 1px solid rgba(98, 152, 198, 0.4);
  color: var(--primary-glow);
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(62, 116, 160, 0.2);
}

.hero-feature-svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: var(--primary-glow) !important;
}

.hero-feature-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary-glow);
  margin-bottom: 0.25rem;
}

.hero-feature-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}

.hero-feature-price-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  background: rgba(22, 28, 40, 0.7);
  border: 1px solid rgba(98, 152, 198, 0.25);
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.price-pill-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--muted-foreground);
}

.price-pill-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-glow);
}

.hero-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.hero-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--foreground);
  font-weight: 500;
}

.hero-feature-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 0.625rem;
  background-color: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-glow);
}

.hero-feature-cta-btn:hover {
  background-color: rgba(62, 116, 160, 0.9);
  color: #ffffff;
}

/* Trust Strip Refinement */
.trust-strip-section {
  padding: 1.25rem 0 !important;
  background-color: rgba(22, 28, 40, 0.65) !important;
}

.trust-strip-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: rgba(14, 18, 26, 0.7);
  border: 1px solid rgba(98, 152, 198, 0.25);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.trust-strip-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: rgba(62, 116, 160, 0.18);
  border: 1px solid rgba(98, 152, 198, 0.3);
  color: var(--primary-glow);
  flex-shrink: 0;
}

.trust-strip-svg {
  width: 1.25rem !important;
  height: 1.25rem !important;
  color: var(--primary-glow) !important;
}

.trust-strip-title {
  font-weight: 700;
  color: var(--foreground);
  font-size: 0.9375rem;
}

.trust-strip-sub {
  font-size: 0.75rem;
  color: var(--muted-foreground);
}

/* Item Acceptance Grid Refinement */
.item-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

@media (min-width: 1024px) {
  .item-chip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.item-chip-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.item-chip-card:hover {
  border-color: rgba(98, 152, 198, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.6), 0 0 15px -3px rgba(62, 116, 160, 0.2);
}

.chip-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(62, 116, 160, 0.18);
  border: 1px solid rgba(98, 152, 198, 0.3);
  color: var(--primary-glow);
  flex-shrink: 0;
}

.chip-icon-svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  color: var(--primary-glow) !important;
}

.chip-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--foreground);
}

/* Why Choose Us Benefit Cards */
.benefit-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--primary-glow), transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.benefit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(98, 152, 198, 0.45);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7), 0 0 20px -5px rgba(62, 116, 160, 0.2);
}

.benefit-card:hover::before {
  opacity: 1;
}

.benefit-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: rgba(62, 116, 160, 0.18);
  border: 1px solid rgba(98, 152, 198, 0.3);
  color: var(--primary-glow);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.benefit-icon-svg {
  width: 1.5rem !important;
  height: 1.5rem !important;
  color: var(--primary-glow) !important;
}

.benefit-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

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

/* Location Chips Grid */
.location-chip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

@media (min-width: 1024px) {
  .location-chip-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.location-chip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 0.875rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.location-chip-card:hover {
  border-color: rgba(98, 152, 198, 0.45);
  background-color: rgba(22, 28, 40, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.6), 0 0 15px -3px rgba(62, 116, 160, 0.2);
}

.location-chip-left {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.location-chip-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}

.location-chip-arrow {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--primary-glow);
  transition: transform 0.2s ease, color 0.2s ease;
}

.location-chip-card:hover .location-chip-arrow {
  color: #ffffff;
  transform: translateX(4px);
}

/* Service Overview Info Panel (Left Media Fallback Card) */
.overview-info-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background-color: var(--card);
  border: 1px solid rgba(98, 152, 198, 0.35);
  border-radius: 1.25rem;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), 0 0 30px -10px rgba(62, 116, 160, 0.2);
  height: 100%;
}

.overview-info-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(45, 55, 72, 0.6);
  margin-bottom: 1.5rem;
}

.overview-info-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.overview-fact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.overview-fact-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.overview-fact-list strong {
  display: block;
  font-size: 0.95rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.overview-fact-list p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0;
}

.fact-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: rgba(62, 116, 160, 0.18);
  border: 1px solid rgba(98, 152, 198, 0.3);
  color: var(--primary-glow);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.fact-icon-svg {
  width: 1.125rem !important;
  height: 1.125rem !important;
  color: var(--primary-glow) !important;
}

.overview-info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45, 55, 72, 0.6);
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.overview-sms-link {
  font-weight: 700;
  color: var(--primary-glow);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.overview-sms-link:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* Location Detail Map & Info Split Grid */
.location-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .location-split-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

.location-map-wrapper {
  position: relative;
  min-height: 440px;
  height: 100%;
  border-radius: 1.25rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
}

.location-info-card {
  display: flex;
  flex-direction: column;
  padding: 2.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
  height: 100%;
}

.location-highlights-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
}

.location-feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.location-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}

.location-feature-list strong {
  display: block;
  font-size: 0.9375rem;
  color: var(--foreground);
  margin-bottom: 0.125rem;
}

.location-feature-list span {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}

.location-info-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45, 55, 72, 0.6);
}

/* Featured Article Card Refinement */
.featured-blog-card {
  position: relative;
  border-radius: 1.25rem;
  border: 1px solid rgba(98, 152, 198, 0.35);
  background: radial-gradient(ellipse 70% 60% at 85% 20%, rgba(62, 116, 160, 0.18), transparent 75%), var(--card);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.8), var(--shadow-card);
  overflow: hidden;
  margin-bottom: 3.5rem;
}

.featured-blog-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem;
}

@media (min-width: 1024px) {
  .featured-blog-split {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: center;
    padding: 3rem;
    gap: 3rem;
  }
}

.featured-blog-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.blog-cat-pill {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-foreground);
  padding: 0.25rem 0.625rem;
  background: rgba(22, 28, 40, 0.8);
  border: 1px solid rgba(45, 55, 72, 0.6);
  border-radius: 9999px;
}

.featured-blog-title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin-bottom: 0.875rem;
}

.featured-blog-title a {
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}

.featured-blog-title a:hover {
  color: var(--primary-glow);
}

.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.meta-dot {
  color: var(--border-strong);
}

.featured-blog-excerpt {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin-bottom: 1.75rem;
}

.featured-blog-media {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.featured-blog-media img {
  width: 100%;
  height: 100%;
  max-height: 320px;
  object-fit: cover;
  display: block;
}

.featured-blog-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5rem 1.75rem;
  background: rgba(22, 28, 40, 0.7);
  border: 1px solid rgba(98, 152, 198, 0.3);
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.featured-placeholder-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  background: rgba(62, 116, 160, 0.2);
  border: 1px solid rgba(98, 152, 198, 0.4);
  color: var(--primary-glow);
  margin-bottom: 1rem;
}

.featured-placeholder-svg {
  width: 1.75rem !important;
  height: 1.75rem !important;
  color: var(--primary-glow) !important;
}

.placeholder-tag {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--primary-glow);
  text-transform: uppercase;
  margin-bottom: 0.375rem;
}

.placeholder-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.placeholder-read-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  padding: 0.375rem 0.875rem;
  background: rgba(14, 18, 26, 0.6);
  border-radius: 9999px;
  border: 1px solid rgba(45, 55, 72, 0.5);
}

/* Single Blog Post Layout & Sidebar System */
.content-sidebar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .content-sidebar-grid {
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
  }

  .sidebar-wrapper {
    position: sticky;
    top: 6.5rem;
  }
}

.blog-article-card {
  position: relative;
  padding: 2.25rem;
  background-color: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(45, 55, 72, 0.6);
  margin-bottom: 1.75rem;
}

.blog-author-box {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: rgba(22, 28, 40, 0.7);
  border: 1px solid rgba(98, 152, 198, 0.25);
  border-radius: 0.875rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}

.blog-author-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: rgba(62, 116, 160, 0.22);
  border: 1px solid rgba(98, 152, 198, 0.4);
  color: var(--primary-glow);
  font-weight: 800;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.blog-author-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
}

.blog-author-bio {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.blog-article-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45, 55, 72, 0.6);
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary-glow);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.blog-back-link:hover {
  color: #ffffff;
  transform: translateX(-3px);
}

/* Refined Sidebar CTA Widget */
.sidebar-cta-card {
  position: relative;
  padding: 1.75rem;
  background: radial-gradient(ellipse 80% 70% at 50% 0%, rgba(62, 116, 160, 0.18), transparent 75%), var(--card);
  border: 1px solid rgba(98, 152, 198, 0.35);
  border-radius: 1.25rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.7), var(--shadow-card);
  overflow: hidden;
}

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

.sidebar-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(62, 116, 160, 0.2);
  border: 1px solid rgba(98, 152, 198, 0.35);
  color: var(--primary-glow);
  flex-shrink: 0;
}

.sidebar-icon-svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
  color: var(--primary-glow) !important;
}

.sidebar-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--primary-glow);
  text-transform: uppercase;
  display: block;
}

.sidebar-cta-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
}

.sidebar-cta-desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
}

.sidebar-info-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  background: rgba(14, 18, 26, 0.7);
  border: 1px solid rgba(45, 55, 72, 0.6);
  border-radius: 0.75rem;
  margin-bottom: 1.5rem;
}

.sidebar-info-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.info-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: rgba(62, 116, 160, 0.18);
  color: var(--primary-glow);
  flex-shrink: 0;
}

.info-icon-svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  color: var(--primary-glow) !important;
}

.info-row-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
}

.info-row-val {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.2s;
}

a.info-row-val:hover {
  color: var(--primary-glow);
}

.sidebar-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sidebar-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 0.625rem;
  background-color: var(--primary);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s, box-shadow 0.2s;
  box-shadow: var(--shadow-glow);
}

.sidebar-btn-primary:hover {
  background-color: rgba(62, 116, 160, 0.9);
  color: #ffffff;
}

.sidebar-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  border-radius: 0.625rem;
  background: rgba(22, 28, 40, 0.6);
  border: 1px solid rgba(98, 152, 198, 0.4);
  color: var(--foreground);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.sidebar-btn-outline:hover {
  background: rgba(62, 116, 160, 0.18);
  border-color: var(--primary-glow);
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE HERO GRID RESTORATION (PHASE 6.3 — VISUAL PERFECT MATCH)
   ───────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  padding: 1.75rem 0 2.5rem 0;
  overflow: hidden;
  background-color: var(--background);
}

@media (min-width: 768px) {
  .home-hero {
    padding: 2.25rem 0 3rem 0;
  }
}

.home-hero-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.home-hero-glow {
  background:
    radial-gradient(ellipse 65% 55% at 78% 15%, rgba(62, 116, 160, 0.14), transparent 70%),
    radial-gradient(ellipse 55% 45% at 12% 95%, rgba(62, 116, 160, 0.08), transparent 70%),
    linear-gradient(to bottom, rgba(22, 28, 40, 0.4), var(--background));
}

.home-hero-grid {
  background-image:
    linear-gradient(to right, rgba(98, 152, 198, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98, 152, 198, 0.07) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 35%, transparent 80%);
}

.home-hero-floor-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 45vh;
  max-height: 360px;
  overflow: hidden;
  perspective: 1000px;
  pointer-events: none;
  z-index: 1;
}

.home-hero-floor {
  position: absolute;
  left: -20%;
  right: -20%;
  top: -10%;
  bottom: 0;
  transform: rotateX(60deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(to right, rgba(98, 152, 198, 0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98, 152, 198, 0.10) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
  mask-image: linear-gradient(to top, black 25%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, black 25%, transparent 85%);
}

.home-hero-fade-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--background));
  pointer-events: none;
  z-index: 2;
}

.home-hero .hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}