/* =============================================================
   SECTIONS.CSS
   Layout and visual rules specific to individual page sections.
   Shared components (cards, buttons, forms) live in components.css.
============================================================= */

/* =========================================================
   HERO
   Full-bleed background photo with a dark gradient overlay.
   All text and CTAs sit on top of the image, so every hero
   text color is set explicitly here rather than inherited.
========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  padding-top: var(--space-24);
  padding-bottom: var(--space-16);
  overflow: hidden;
  color: var(--color-white);
}

/* Photo + overlay sit behind everything else in the section,
   stretched to the full width and height of the hero. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

/* Darkens the photo so white text/buttons stay readable —
   strongest over the left/lower text area, lighter toward the
   top-right so the room itself still reads through. */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(20, 28, 22, 0.86) 0%, rgba(20, 28, 22, 0.62) 45%, rgba(20, 28, 22, 0.32) 100%),
    linear-gradient(to top, rgba(20, 28, 22, 0.55) 0%, rgba(20, 28, 22, 0) 35%);
}

.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--space-12);
}

.hero__content {
  max-width: 640px;
}

/* Eyebrow on a photo needs a lighter tint than the default
   on-surface green, plus a brighter sparkle bullet. */
.eyebrow--on-dark {
  color: var(--color-green-100);
}

.eyebrow--on-dark::before {
  background-color: var(--color-green-100);
}

.hero__heading {
  color: var(--color-white);
  font-size: var(--fs-4xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}

.hero__lead {
  font-size: var(--fs-md);
  max-width: 520px;
  margin-bottom: var(--space-8);
  color: rgba(255, 255, 255, 0.92);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

/* On-image variant of the outline button: white text/border
   instead of the default charcoal, since it sits on a dark photo. */
.btn--outline-on-dark {
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--outline-on-dark:hover {
  background-color: var(--color-white);
  color: var(--color-charcoal-900);
}

.hero__trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.hero__trust-item .icon {
  color: var(--color-green-500);
}

/* The floating stats bar sits near the bottom of the hero photo,
   pushed down by the flex layout, and still bridges into the
   next section the same way it did before. */
.hero__stats-container {
  position: relative;
  margin-top: auto;
}

/* =========================================================
   ABOUT
========================================================= */
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.about__media {
  position: relative;
}

.about__media img,
.about__media .image-placeholder {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.about__media-tag {
  position: absolute;
  left: var(--space-6);
  bottom: calc(var(--space-6) * -1);
  background-color: var(--color-charcoal-900);
  color: var(--color-white);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  box-shadow: var(--shadow-lg);
}

.about__media-tag strong {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--color-green-500);
}

.about__media-tag span {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
}

.about__content .section-heading__title {
  margin-bottom: var(--space-5);
}

.about__text {
  font-size: var(--fs-md);
  margin-bottom: var(--space-4);
}

.about__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-8);
}

.about__checklist li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-charcoal-900);
}

.about__checklist .icon {
  color: var(--color-green-600);
  flex-shrink: 0;
}

/* =========================================================
   WHY CHOOSE US — slightly different surface to break rhythm
========================================================= */
.why-us {
  background-color: var(--color-surface);
}

/* =========================================================
   PROCESS
========================================================= */
.process {
  background-color: var(--color-charcoal-900);
  color: rgba(255, 255, 255, 0.78);
}

.process .eyebrow {
  color: var(--color-green-500);
}

.process .section-heading__title {
  color: var(--color-white);
}

.process .section-heading__desc {
  color: rgba(255, 255, 255, 0.65);
}

.process-step::before {
  background-color: var(--color-green-500);
}

.process-step__number {
  color: rgba(255, 255, 255, 0.18);
}

.process-step__title {
  color: var(--color-white);
}

.process-step__desc {
  color: rgba(255, 255, 255, 0.65);
}

/* =========================================================
   AREAS WE COVER
========================================================= */
.areas__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.areas__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-6);
}

.areas__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 600;
  color: var(--color-charcoal-900);
}

.areas__list .icon {
  color: var(--color-green-600);
}

.areas__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.areas__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   CTA BANNER
========================================================= */
.cta-banner {
  position: relative;
  padding-block: var(--space-20);
  text-align: center;
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-green-700);
}

/* Soft sparkle-dot texture instead of a photographic background,
   since no CTA background image was supplied for this section. */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.14) 2px, transparent 2.5px);
  background-size: 34px 34px;
}

.cta-banner__inner {
  position: relative;
}

.cta-banner__heading {
  color: var(--color-white);
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
}

.cta-banner__text {
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-8);
}

.cta-banner .btn--primary {
  background-color: var(--color-white);
  color: var(--color-green-700);
}

.cta-banner .btn--primary:hover {
  background-color: var(--color-charcoal-900);
  color: var(--color-white);
}

/* =========================================================
   CONTACT
========================================================= */
.contact__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-16);
}

.contact__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.contact__details li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact__details .icon {
  color: var(--color-green-600);
  margin-top: 2px;
}

.contact__details-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-slate-400);
  margin-bottom: 2px;
}

.contact__details a {
  font-weight: 600;
  color: var(--color-charcoal-900);
  transition: color var(--transition-fast);
}

.contact__details a:hover {
  color: var(--color-green-600);
}