/* Dr Sumi London - Vibrant Premium Theme */

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Lato:wght@300;400;700&display=swap');

@import 'hero_rebuild.css';

:root {
  /* Premium Palette */
  --color-primary: #2e8b57;
  /* Sea Green - Vibrant Action */
  --color-primary-dark: #1e5e3a;
  /* Deep Green - Text/Hover */
  --color-secondary: #d4af37;
  /* Muted Gold - Accents */
  --color-charcoal: #2c2c2c;
  /* Charcoal - High contrast text */

  --color-bg: #D6CEBE;
  /* Rich Darker Tan */
  --color-text: #333333;
  /* Dark Grey body */
  --color-text-light: #666666;
  --color-white: #E8E2D2;
  /* Warm Tan Tiles */
  --color-border: #D4AF37;
  /* Gold Border */

  --font-heading: 'Playfair Display', serif;
  --font-body: 'Lato', sans-serif;

  --spacing-container: 16px;
  --width-container: 1100px;
  /* Slightly wider for modern feel */
}

/* Dark Mode Variables */
body.dark-mode {
  --color-bg: #121212;
  /* Deep Charcoal/Black */
  --color-text: #f0f0f0;
  /* Off-white for text */
  --color-text-light: #b0b0b0;
  /* Light Grey */
  --color-white: #1e1e1e;
  /* Dark Grey for cards */
  --color-border: #333333;
  /* Darker border */
  --color-charcoal: #e0e0e0;
  /* Light text for headings */
  --color-primary-dark: #4ade80;
  /* Brighter Green for contrast on dark */

  /* Gold stays gold, but maybe slightly brighter if needed */
  /* --color-secondary: #d4af37; */
}

body.dark-mode header {
  background: rgba(18, 18, 18, 0.98);
  border-bottom-color: var(--color-border);
}

/* Theme Toggle Icons */
.theme-icon {
  width: 24px;
  height: 24px;
  fill: currentColor;
  vertical-align: middle;
}

.icon-sun {
  display: none;
}

.icon-moon {
  display: block;
}

body.dark-mode .icon-sun {
  display: block;
}

body.dark-mode .icon-moon {
  display: none;
}

/* Transitions for smooth toggle */
body,
.card,
.treatment-toggle-card,
.toggle-header,
.toggle-content,
.faq-item,
.nav-links a {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body {
  font-family: var(--font-body);
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  overflow-x: hidden;
  /* Prevent horizontal scroll on mobile */
}

h1,
h2,
h3,
h4,
strong {
  font-family: var(--font-heading);
  color: var(--color-charcoal);
  /* Updated to Charcoal for premium feel */
  font-weight: 600;
  margin-top: 0;
}

h1 {
  font-size: 3rem;
  line-height: 1.2;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 24px;
}

h3 {
  font-size: 1.5rem;
}

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

p {
  margin-bottom: 1rem;
}

/* Utilities */
.container {
  max-width: var(--width-container);
  margin: 0 auto;
  padding: 0 var(--spacing-container);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.muted {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

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

/* --- Navigation --- */
header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  padding: 16px 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  color: var(--color-charcoal);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

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

/* Ensure buttons in nav keep their text color */
.nav-links a.btn-primary {
  color: var(--color-white) !important;
}

.nav-links a.btn-primary:hover {
  color: var(--color-white) !important;
}


/* Mobile Menu Toggle */
.mobile-toggle {
  display: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-charcoal);
}

.logo-img {
  height: 80px;
  /* Increased for prominence */
  width: auto;
  display: block;
}

/* --- Hero Section --- */
.hero-homepage {
  background: linear-gradient(135deg, #fdfcf8 0%, #e8f5e9 100%);
  padding: 70px 0;
  /* Reduced from 100px */
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 600px;
}

/* .hero-title {
  font-size: 4rem; // DEPRECATED: Handled by hero_rebuild.css
  color: var(--color-primary-dark);
  margin-bottom: 20px;
} */

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin-bottom: 24px;
  /* Reduced from 40px */
}

.inner-faq {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.inner-faq h5 {
  grid-column: 1 / -1;
  /* Span full width */
  margin-bottom: 12px;
  color: var(--color-primary-dark);
  font-size: 1rem;
}

.inner-faq summary {
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  /* Hide standard marker */
  position: relative;
  padding-right: 40px;
  /* Space for icon */
  background: rgba(var(--color-primary-rgb), 0.03);
  border-radius: 4px;
  transition: background 0.2s;
  height: 100%;
  /* Match height in grid */
  display: flex;
  /* alignment */
  align-items: center;
}

.inner-faq summary:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
}

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

.inner-faq summary::after {
  content: '\f054';
  /* FontAwesome chevron-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  color: var(--color-secondary);
}

.inner-faq details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.inner-faq p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.5;
  padding: 12px 16px;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-top: none;
  border-radius: 0 0 4px 4px;
}

/* Ensure details element spans appropriately if needed, 
   but grid items are the details elements themselves */
.inner-faq details {
  height: max-content;
}

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

/* --- Feature Grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin: 60px 0;
}

.treatments-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-card {
  background: white;
  border-radius: 8px;
  /* Premium Shadow / Embossed Effect */
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
  border-top: 3px solid var(--color-gold);
  /* Rich Gold Border */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px -12px rgba(212, 175, 55, 0.15);
  /* Gold glow on hover */
}

.card-img-container {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.feature-card:hover .card-img-top {
  transform: scale(1.05);
}

.card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-body p {
  flex: 1;
  margin-bottom: 16px;
}

/* Dark Mode Overrides for Treatment Cards */
body.dark-mode .feature-card {
  background: var(--color-white);
  /* Theme dark bg */
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-gold);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .treatments-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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



/* --- References Section --- */
.references-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: left;
}


.reference-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  border-left: 4px solid var(--color-secondary);
  /* Maintaining brand green accent */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  height: 320px;
  /* Fixed height for consistency */
  display: flex;
  flex-direction: column;
}

.reference-card p {
  font-style: italic;
  font-size: 0.95rem;
  margin-bottom: 20px;
  flex: 1;
  overflow-y: auto;
  /* Scrollable text area */
  padding-right: 8px;
  /* Space for scrollbar */
}

/* Custom Scrollbar for Reference Text */
.reference-card p::-webkit-scrollbar {
  width: 4px;
}

.reference-card p::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 4px;
}

/* Dark Mode for Reference Cards */
body.dark-mode .reference-card {
  background: var(--color-white);
  /* Theme dark bg */
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
}

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


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

/* --- How It Works Section --- */
.dr-sumi-teaser {
  background: #f8f8f8;
  padding: 80px 0;
}

/* Force dark text in standard light section even when dark mode is active */
body.dark-mode .dr-sumi-teaser {
  background: #f8f8f8;
  /* Ensure bg stays light */
}

body.dark-mode .dr-sumi-teaser h2,
body.dark-mode .dr-sumi-teaser p,
body.dark-mode .dr-sumi-teaser li {
  color: #2c2c2c !important;
  /* Force dark text (overriding theme vars) */
}

body.dark-mode .dr-sumi-teaser .muted {
  color: #666666 !important;
  /* Force dark gray */
}

.how-it-works-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 3 steps */
  gap: 24px;
  align-items: center;
  position: relative;
  /* Context for connector line */
}

/* Connector Line (Desktop) */
.how-it-works-grid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 15%;
  /* Start after first box logical center */
  right: 15%;
  /* End before last box logical center */
  height: 1px;
  background: var(--color-border);
  opacity: 0.5;
  z-index: 0;
  transform: translateY(-50%);
}

.how-it-works-step {
  background: var(--color-bg);
  /* Match background to cover line */
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* Very subtle border */
  border-radius: 12px;
  padding: 10px 20px;
  /* Compact label-style padding */
  position: relative;
  z-index: 1;
  /* Sit above the line */
  /* height: 100%; Allow grid stretch to handle equality without forcing full height if content is small */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Dark mode adjust for steps */
body.dark-mode .how-it-works-step {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

@media (max-width: 600px) {
  .how-it-works-grid {
    grid-template-columns: 1fr;
    /* Stack vertically on mobile */
  }

  .how-it-works-grid::before {
    display: none;
    /* Hide line on mobile */
  }
}

/* --- Sticky Footer CTA --- */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: white;
  padding: 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  display: none;
  /* Shown via JS or media query */
  z-index: 990;
  text-align: center;
  border-top: 1px solid var(--color-primary);
}

/* Buttons */
.btn {
  padding: 14px 28px;
  border-radius: 8px;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-block;
  text-transform: uppercase;
  font-family: var(--font-body);
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 4px 10px rgba(46, 139, 87, 0.3);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(46, 139, 87, 0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  /* Cleaner look */
}

.btn-secondary:hover {
  background: rgba(46, 139, 87, 0.08);
}

/* Main Layout */
main {
  padding: 20px 0 60px;
}

/* Stepper */
.stepper {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.step {
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-light);
  background: var(--color-white);
  font-weight: 600;
}

.step.active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(46, 139, 87, 0.2);
}

/* Sections & Cards */
section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  /* Deeper shadow for depth */
}

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

.card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

/* Active card state */
.card.selected {
  border-color: var(--color-primary);
  background: #f0fdf4;
  /* Very light green tint */
  box-shadow: 0 4px 12px rgba(46, 139, 87, 0.15);
}

.card.selected::before {
  content: '\2713';
  /* Checkmark */
  position: absolute;
  top: 10px;
  right: 15px;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.2rem;
}

.card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

/* Form Elements */
label {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #eee;
  /* Thicker border for modern feel */
  margin-bottom: 24px;
  font-family: var(--font-body);
  font-size: 1rem;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(46, 139, 87, 0.1);
}

/* Checkbox styling */
.checkbox-group {
  margin-bottom: 16px;
  background: #fafafa;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s;
}

.checkbox-group:hover {
  background: #fff;
  border-color: #eee;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.checkbox-group label {
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 0;
}

.checkbox-group input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--color-primary);
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

footer {
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 60px;
  background: var(--color-white);
}

.trust-badges img {
  height: 48px;
  margin: 0 12px;
  opacity: 0.9;
  filter: none;
  /* Keep original colors for trust badges */
}


/* --- Treatment Toggle Cards (Accordion) --- */
.treatment-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.treatment-toggle-card {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.treatment-toggle-card[open] {
  box-shadow: 0 8px 24px rgba(46, 139, 87, 0.15);
  border-color: var(--color-primary);
}

.treatment-toggle-card summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  display: block;
}

.treatment-toggle-card summary::-webkit-details-marker {
  display: none;
}

.toggle-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: #fdfcf8;
}

.toggle-icon {
  width: 32px;
  height: 32px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: var(--color-secondary);
  transition: transform 0.3s ease;
}

.treatment-toggle-card[open] .toggle-icon {
  transform: rotate(90deg);
  background: var(--color-primary);
  color: white;
}

.toggle-title {
  flex: 1;
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  color: var(--color-charcoal);
}

.toggle-content {
  padding: 30px;
  border-top: 1px solid var(--color-border);
  background: white;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.treatment-toggle-card ul {
  padding-left: 20px;
  margin-bottom: 24px;
}

.inner-faq details {
  background: #fafafa;
  border: none;
  margin-bottom: 10px;
  border-radius: 6px;
  padding: 0;
}

.inner-faq summary {
  padding: 12px 16px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-primary-dark);
  cursor: pointer;
  list-style: none;
  /* Hide standard marker */
  position: relative;
  padding-right: 40px;
  /* Space for icon */
}

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

.inner-faq summary::after {
  /* Ensuring arrow is visible and styled by the block above */
  display: block;
}

.inner-faq p {
  padding: 0 16px 16px;
  margin: 0;
  color: var(--color-text-light);
  font-size: 0.9rem;
}

/* --- Feature Testimonial (Tola) --- */
.testimonial-feature {
  background: rgba(255, 255, 255, 0.6);
  /* Soft light neutral */
  border-radius: 12px;
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.03);
  /* Subtle definition */
}

.testimonial-feature blockquote {
  font-family: var(--font-body);
  /* Body font, not heading */
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--color-charcoal);
  margin: 0 0 24px 0;
  border: none;
  /* No default border */
  padding: 0;
}

.testimonial-feature cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.95rem;
}

body.dark-mode .testimonial-feature {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.05);
}

/* --- Background Logo (Subtle) --- */
.dr-sumi-text-col {
  position: relative;
}

/* --- Foreground Logo (Standalone) --- */
.dr-sumi-logo {
  display: block;
  max-width: 140px;
  /* Controlled intentional size */
  margin-bottom: 24px;
  /* Space before heading */
  opacity: 1;
  /* Full visibility for premium gold */
}

@media (max-width: 768px) {
  .dr-sumi-logo {
    max-width: 110px;
    /* Proportional scaling for mobile */
    margin-bottom: 16px;
  }

  /* --- Footer Logos --- */
  .footer-logo {
    height: 80px !important;
    /* Force priority */
    width: auto;
    display: block;
    margin-bottom: 24px;
  }

  .footer-gmc-logo {
    height: 120px !important;
    /* Force priority */
    width: auto;
    object-fit: contain;
    opacity: 1;
    filter: none;
    display: block;
  }

  /* Mobile */
  @media (max-width: 768px) {
    .card-grid {
      grid-template-columns: 1fr;
    }

    .logo-img {
      height: 40px;
    }

    section {
      padding: 24px;
    }

    .hero-banner {
      padding: 40px 20px;
    }
  }

  /* --- Treatments Page Overhaul --- */
  .treatment-section {
    scroll-margin-top: 140px;
    /* Offset for sticky header */
  }

  /* Accordion / FAQ */
  .faq-container {
    margin-top: 24px;
  }

  .faq-item {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .faq-item summary {
    padding: 16px 24px;
    cursor: pointer;
    font-weight: 700;
    color: var(--color-primary-dark);
    background: #fdfcf8;
    list-style: none;
    /* Hide default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 300;
  }

  .faq-item[open] summary::after {
    content: '-';
  }

  .faq-item p {
    padding: 16px 24px;
    margin-bottom: 0;
    border-top: 1px solid #eee;
    color: var(--color-text-light);
  }

  /* Treatment Navigation */
  .treatment-nav .btn-secondary {
    border-color: var(--color-border);
    color: var(--color-text);
    font-size: 0.85rem;
  }

  .treatment-nav .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: white;
  }
}

/* --- Hero Trust Logos --- */
.hero-trust-container {
  margin-top: 20px;
  /* Reduced from 32px */
  display: flex;
  align-items: center;
  gap: 32px;
}

.hero-trust-logos {
  display: flex;
  align-items: center;
  gap: 24px;
}

.trust-logo {
  height: 40px;
  /* Reduced size per request */
  width: auto;
  object-fit: contain;
  filter: none;
  /* Full colour */
  opacity: 1;
  /* No transparency */
}

.gmc-logo {
  height: 200px;
  /* Massive size per user request */
}

.hero-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--color-text);
}

.hero-rating i {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  opacity: 0.9;
}


/* --- New CTA / Consultation Section (Refactored) --- */
.cta-section {
  padding: 80px 16px;
  /* background-color: var(--color-bg); Left flexible to inherit section bg */
}

.cta-two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Left Column Styling */
.cta-content-col {
  padding-right: 20px;
}

.cta-heading {
  font-family: var(--font-heading);
  color: var(--color-primary);
  /* Green heading per ref */
  font-size: 2rem;
  line-height: 1.2;
  margin-bottom: 32px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cta-body-text p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--color-charcoal);
}

.cta-body-text strong {
  font-weight: 700;
  color: black;
}

/* Prominent Instagram Link */
.insta-prominent-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  color: black;
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

.insta-prominent-link i {
  font-size: 2.5rem;
  /* Large prominent icon */
  display: block;
}

.insta-prominent-link:hover {
  opacity: 0.7;
}

/* Right Column: Form Card */
.contact-form-card {
  background: white;
  padding: 40px;
  border-radius: 16px;
  /* Soft rounded corners */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  /* Premium shadow */
}

/* Dark Mode Card Override */
body.dark-mode .contact-form-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
}

.form-row-half {
  display: flex;
  gap: 20px;
}

.form-row-half .form-group {
  flex: 1;
}

.form-group {
  margin-bottom: 24px;
}

.contact-form-card label {
  display: block;
  font-size: 0.9rem;
  color: var(--color-primary);
  margin-bottom: 8px;
  font-weight: 500;
}

/* Specific styling for 'required' text if we wanted it separate, 
   but user asked for simple labels. Keeping labels clean. */

.contact-form-card input,
.contact-form-card textarea {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: #EAEAEA;
  /* Light grey input bg per ref */
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.contact-form-card input:focus,
.contact-form-card textarea:focus {
  outline: 2px solid var(--color-primary);
  background: white;
}

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

.form-submit-btn {
  width: 100%;
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 16px;
  border-radius: 20px 0 20px 0;
  /* Leaf-like shape or just rounded? 
                                   Ref shows distinct shape or just pill. 
                                   Sticking to standard pill or rounded rect for safety 
                                   unless 'same shape' implies the leaf bit. 
                                   Let's go with standard rounded for now to be safe, 
                                   or slightly rounded. */
  border-radius: 50px;
  /* Pill shape */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  margin-top: 16px;
  cursor: pointer;
  transition: background 0.3s;
  box-shadow: none;
}

.form-submit-btn:hover {
  background: var(--color-primary-dark);
}

/* Mobile Responsive */
@media (max-width: 900px) {
  .cta-two-col-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cta-content-col {
    padding-right: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}