:root {
  color-scheme: light;

  --page-background: #f5f6f7;
  --surface-background: #ffffff;
  --section-background: #ffffff;

  --navigation-background: #0f263c;
  --card-background: #061d33;
  --about-background: #0f263c;
  --footer-background: #0f263c;

  --primary-text: #0f263c;
  --secondary-text: #3f4b56;
  --light-text: #ffffff;
  --muted-light-text: rgba(255, 255, 255, 0.75);

  --accent: #95d318;
  --border-color: #d5dce2;

  --hero-overlay: linear-gradient(
    to right,
    rgba(3, 24, 42, 0.88) 0%,
    rgba(3, 24, 42, 0.72) 30%,
    rgba(3, 24, 42, 0.35) 48%,
    rgba(3, 24, 42, 0.05) 60%,
    transparent 70%
  );

  --card-shadow: 0 20px 30px rgba(15, 38, 60, 0.2);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --page-background: #071522;
  --surface-background: #0d1721;
  --section-background: #0d1721;

  --navigation-background: #0f263c;
  --card-background: #061d33;
  --about-background: #0f263c;
  --footer-background: #0f263c;

  --primary-text: #ffffff;
  --secondary-text: rgba(255, 255, 255, 0.75);
  --light-text: #ffffff;
  --muted-light-text: rgba(255, 255, 255, 0.7);

  --accent: #95d318;
  --border-color: rgba(255, 255, 255, 0.15);

  --hero-overlay: linear-gradient(
    to right,
    rgba(3, 24, 42, 0.98) 0%,
    rgba(3, 24, 42, 0.92) 28%,
    rgba(3, 24, 42, 0.65) 43%,
    rgba(3, 24, 42, 0.15) 52%,
    transparent 60%
  );

  --card-shadow: none;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  background: var(--page-background);
  color: var(--primary-text);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.theme-surface {
  background-color: var(--section-background);
  color: var(--primary-text);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.theme-navigation {
  background-color: var(--navigation-background);
}

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

.theme-about {
  background-color: var(--about-background);
}

.theme-footer {
  background-color: var(--footer-background);
}

.theme-primary-text {
  color: var(--primary-text);
}

.theme-secondary-text {
  color: var(--secondary-text);
}

.hero-theme-overlay {
  background: var(--hero-overlay);
  transition: background 0.3s ease;
}

/* =========================================
   WHY GREENWICH HANDYMAN SECTION
========================================= */

:root {
  --why-section-background: #f7f8fa;

  --card-light-background: #ffffff;
  --card-light-text: #0f263c;
  --card-light-muted: #4b5563;
  --card-light-border: rgba(15, 38, 60, 0.12);

  --card-blue-background: #0f263c;
  --card-blue-text: #ffffff;
  --card-blue-muted: rgba(255, 255, 255, 0.76);
  --card-blue-border: rgba(255, 255, 255, 0.12);

  --why-card-shadow: 0 14px 35px rgba(15, 38, 60, 0.12);
}

html[data-theme="dark"] {
  --why-section-background: #071522;

  --card-light-background: #102b43;
  --card-light-text: #ffffff;
  --card-light-muted: rgba(255, 255, 255, 0.72);
  --card-light-border: rgba(255, 255, 255, 0.1);

  --card-blue-background: #061d33;
  --card-blue-text: #ffffff;
  --card-blue-muted: rgba(255, 255, 255, 0.72);
  --card-blue-border: rgba(255, 255, 255, 0.1);

  --why-card-shadow: 0 14px 35px rgba(0, 0, 0, 0.25);
}

.theme-why-section {
  background-color: var(--why-section-background);
  transition: background-color 0.5s ease;
}

/* Light-card background image */
.theme-card-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  background-color: var(--card-light-background);
  border-color: var(--card-light-border);
  color: var(--card-light-text);
  box-shadow: var(--why-card-shadow);

  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.theme-card-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: url("../images/bg/card-light-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  transition:
    transform 0.6s ease,
    opacity 0.5s ease;
}

/* White overlay for light mode */
.theme-card-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: rgba(255, 255, 255, 0.9);
  transition: background-color 0.5s ease;
}

/* Slight image zoom on hover */
.theme-card-light:hover::before {
  transform: scale(1.04);
}

/* Dark-mode treatment */
html[data-theme="dark"] .theme-card-light::after {
  background: rgba(16, 43, 67, 0.91);
}

.theme-card-light .card-muted {
  color: var(--card-light-muted);
}

.theme-card-blue {
  background-color: var(--card-blue-background);
  border-color: var(--card-blue-border);
  color: var(--card-blue-text);
  box-shadow: var(--why-card-shadow);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.theme-card-blue .card-muted {
  color: var(--card-blue-muted);
}

.why-icon {
  background-color: rgba(149, 211, 24, 0.14);
  color: #95d318;
}

@media (prefers-reduced-motion: reduce) {
  .theme-card-light,
  .theme-card-blue,
  .theme-why-section {
    transition: none;
  }
}

.theme-card-light.card-bg-contractors::before {
  background-image: url("../images/bg/contractors-bg.jpg");
}

.theme-card-light.card-bg-numbers::before {
  background-image: url("../images/bg/numbers-bg.jpg");
}

/* =========================================
   REVIEWS / TESTIMONIALS SECTION
========================================= */

:root {
  --reviews-section-bg: #f4f7f9;
  --reviews-heading: #0f263c;
  --reviews-muted: #52606d;

  --review-card-bg: #ffffff;
  --review-card-text: #0f263c;
  --review-card-muted: #52606d;
  --review-card-border: rgba(15, 38, 60, 0.08);
  --review-card-divider: rgba(15, 38, 60, 0.1);
  --review-card-shadow: 0 18px 38px rgba(15, 38, 60, 0.1);

  --review-quote-bg: #f2f6f8;
  --review-quote-color: #95d318;
}

html[data-theme="dark"] {
  --reviews-section-bg: #0d1721;
  --reviews-heading: #ffffff;
  --reviews-muted: rgba(255, 255, 255, 0.7);

  --review-card-bg: #061d33;
  --review-card-text: #ffffff;
  --review-card-muted: rgba(255, 255, 255, 0.7);
  --review-card-border: rgba(255, 255, 255, 0.08);
  --review-card-divider: rgba(255, 255, 255, 0.12);
  --review-card-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);

  --review-quote-bg: rgba(255, 255, 255, 0.06);
  --review-quote-color: #95d318;
}

.theme-reviews-section {
  background-color: var(--reviews-section-bg);
  transition: background-color 0.5s ease;
}

.theme-reviews-heading {
  color: var(--reviews-heading);
  transition: color 0.5s ease;
}

.theme-reviews-muted {
  color: var(--reviews-muted);
  transition: color 0.5s ease;
}

.review-card {
  background-color: var(--review-card-bg);
  border-color: var(--review-card-border);
  color: var(--review-card-text);
  box-shadow: var(--review-card-shadow);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 38, 60, 0.16);
}

html[data-theme="dark"] .review-card:hover {
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.32);
}

.review-card-text {
  color: var(--review-card-text);
}

.review-card-muted {
  color: var(--review-card-muted);
}

.review-card-divider {
  border-color: var(--review-card-divider);
}

.review-quote-icon {
  background-color: var(--review-quote-bg);
  color: var(--review-quote-color);
}

@media (prefers-reduced-motion: reduce) {
  .theme-reviews-section,
  .theme-reviews-heading,
  .theme-reviews-muted,
  .review-card {
    transition: none;
  }

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

:root {
  --reviews-section-bg: linear-gradient(
    135deg,
    #e8edf1 0%,
    #dfe7ec 55%,
    #e9ece7 100%
  );
}

html[data-theme="dark"] {
  --reviews-section-bg: linear-gradient(135deg, #09131d 0%, #0f263c 100%);
}

.theme-reviews-section {
  background: var(--reviews-section-bg);
  transition: background 0.5s ease;
}

.location-pin {
  position: absolute;
  z-index: 10;

  width: clamp(42px, 4.8vw, 72px);
  height: clamp(42px, 4.8vw, 72px);

  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  border-radius: 9999px;
  outline: none;

  transition:
    transform 250ms ease,
    filter 250ms ease;
}

.location-pin img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  /* Green asset appears red initially */
  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(7025%)
    hue-rotate(359deg) brightness(97%) contrast(118%);

  transition:
    filter 250ms ease,
    transform 250ms ease;
}

.location-pin:hover,
.location-pin:focus-visible {
  z-index: 20;
  transform: translate(-50%, -50%) scale(1.15);
}

.location-pin:hover img,
.location-pin:focus-visible img {
  filter: none;
}

.location-pin:focus-visible {
  outline: 3px solid #95d318;
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .location-pin {
    width: 34px;
    height: 34px;
  }
}

.contact-field[aria-invalid="true"] {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.field-error {
  min-height: 1.25rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #fca5a5;
}