/* =========================================================
   EcoGrid Electrical — Landing page
   Section 1: Top nav + hero
   ========================================================= */

:root {
  --c-navy: #04053e;
  --c-navy-deep: #04040d;
  --c-lime: #d0f35b;
  --c-white: #ffffff;
  --c-cream: #f5f5f5;
  --c-ink: #04040d;

  --font-display: "Nunito", system-ui, sans-serif;
  --font-mono: "Orbitron", "Arial Narrow", sans-serif;

  --radius-pill: 30px;
  --max-w: 1920px;
}

/* ------- Reset ------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-display);
  color: var(--c-white);
  background: var(--c-navy-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

/* ------- Buttons ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--c-ink);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.btn:hover {
  filter: brightness(1.04);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35);
}
.btn:active { transform: translateY(0); filter: brightness(0.96); }
.btn--light   { background: var(--c-white); }
.btn--primary { background: var(--c-lime); }
.btn--dark    { background: var(--c-navy-deep); color: var(--c-white); }
.btn--lg      { padding: 22px 32px; }

/* =========================================================
   Scroll Reveals (IntersectionObserver-driven)
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}
[data-reveal-stagger].in-view > * { opacity: 1; transform: none; }
[data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0.00s; }
[data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-stagger].in-view > *:nth-child(6) { transition-delay: 0.40s; }
[data-reveal-stagger].in-view > *:nth-child(7) { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   Site Header / Nav
   ========================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header.is-scrolled {
  background: #18134b;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
}
.brand {
  transition: transform .2s ease;
}
.brand:hover { transform: scale(1.03); }

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 250px;
}
.brand__mark { width: 100%; height: 28px; }
.brand__sub {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 20.5px;
  letter-spacing: 0.48em;
  color: var(--c-white);
  line-height: 1;
}

.site-nav {
  display: flex;
  gap: 30px;
  align-items: center;
}
.site-nav__link {
  position: relative;
  font-weight: 600;
  font-size: 20px;
  color: var(--c-white);
  letter-spacing: -0.02em;
  transition: color .2s ease;
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: var(--c-lime);
  transition: right .25s ease;
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { right: 0; }
.site-nav__link.is-active,
.site-nav__link:hover { color: var(--c-lime); }

.site-header__panel {
  display: contents;  /* desktop: panel is transparent, children lay out normally */
}
.site-header__cta {
  display: flex;
  gap: 10px;
}

.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  z-index: 60;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* =========================================================
   HERO (bare structure — backgrounds will be layered in)
   Figma reference: total nav + hero = 1920 x 1260.
   Right now: solid navy with the headline / sub / CTA in the upper
   region and the trust bar near the bottom — that's it.
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1920 / 1260;
  min-height: 760px;
  padding: 0 60px;
  overflow: hidden;
  color: var(--c-white);
  background: var(--c-navy-deep);
}

/* ------- Hero background layers (added one at a time) ------- */
.hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* Layer 1: sky photograph (softest, sits at the back) */
.hero__bg--sky {
  z-index: 1;
  background: url("assets/sky.png") center/cover no-repeat;
}
/* Layer 2: purple gradient — anchored to top, full width, blends down
   into the sky. Top color matches the header (#18134B) so the seam
   between the fixed header and the hero is invisible. */
.hero__bg--gradient {
  z-index: 2;
  top: 0;
  height: 65%;
  bottom: auto;
  background: url("assets/hero-gradient.svg") top center / 100% 100% no-repeat;
}
/* Layer 3: ECOGRID watermark — centered in the hero, full width with
   50px padding either side. Image keeps its natural aspect ratio. */
.hero__bg--watermark {
  z-index: 3;
  top: 50%;
  left: 50px;
  right: 50px;
  bottom: auto;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__bg--watermark img {
  display: block;
  width: 100%;
  height: auto;     /* never distort: height follows aspect */
  max-width: 100%;
}
/* Layer 4: mountains + solar foreground. Anchored bottom, full width,
   covers the hero. PNG has transparent upper area so the sky + gradient
   + watermark still show through above the mountain ridge. */
.hero__bg--foreground {
  z-index: 4;
  background: url("assets/mountains-solar.png") center bottom / cover no-repeat;
}

/* Sun glare — the original glow with pulsing warm core + rotating
   ray bands, blended onto the hero with mix-blend-mode: screen. */
.hero__sun-glare {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 720px;
  height: 720px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero__sun-glare-core,
.hero__sun-glare-rays {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hero__sun-glare-core {
  background: radial-gradient(
    circle at center,
    rgba(255, 240, 200, 0.95) 0%,
    rgba(255, 220, 150, 0.65) 12%,
    rgba(255, 200, 120, 0.35) 25%,
    rgba(255, 180, 100, 0.12) 45%,
    rgba(255, 180, 100, 0) 70%
  );
  animation: sunPulse 4.5s ease-in-out infinite;
}
.hero__sun-glare-rays {
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 230, 170, 0) 0deg,
      rgba(255, 230, 170, 0.18) 10deg,
      rgba(255, 230, 170, 0) 20deg,
      rgba(255, 230, 170, 0) 80deg,
      rgba(255, 230, 170, 0.14) 90deg,
      rgba(255, 230, 170, 0) 100deg,
      rgba(255, 230, 170, 0) 170deg,
      rgba(255, 230, 170, 0.16) 180deg,
      rgba(255, 230, 170, 0) 190deg,
      rgba(255, 230, 170, 0) 260deg,
      rgba(255, 230, 170, 0.14) 270deg,
      rgba(255, 230, 170, 0) 280deg,
      rgba(255, 230, 170, 0) 360deg
    );
  -webkit-mask: radial-gradient(circle at center, black 18%, transparent 68%);
          mask: radial-gradient(circle at center, black 18%, transparent 68%);
  animation: sunRotate 24s linear infinite;
  opacity: 0.85;
}
@keyframes sunPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes sunRotate {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__sun-glare-core,
  .hero__sun-glare-rays { animation: none; }
}

/* ------- Hero content ------- */
/* Figma: Frame 2 at x=180, y=100 (within 1920x1180 hero, but counting from top of section incl. 80px nav above, absolute top = 180/1260 = 14.29%) */
.hero__content {
  position: absolute;
  z-index: 10;
  top: 14.29%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: calc(100% - 120px);
  max-width: 1000px;
  text-align: center;
}

.hero__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(36px, 4.45vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.hero__title-accent { color: var(--c-lime); }
.hero__title-rest   { color: var(--c-white); }
.hero__title-accent::after { content: " "; }

.hero__sub {
  margin: 0;
  max-width: 720px;
  font-weight: 400;
  font-size: clamp(16px, 1.39vw, 20px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

/* CTA spacing within hero content — Figma: 60px gap between sub and button */
.hero__content > .btn { margin-top: 20px; }

/* =========================================================
   Trust Bar
   Figma: Frame at y=1109 of 1260 total => top 88.0%
   ========================================================= */
.trust-bar {
  position: absolute;
  z-index: 10;
  top: 88%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  align-items: stretch;
  width: calc(100% - 500px);
  max-width: 1420px;
}
.trust-bar__item {
  flex: 1 1 0;
  padding-left: 30px;
  border-left: 4px solid var(--c-lime);
  font-weight: 600;
  font-size: clamp(18px, 1.7vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
  display: flex;
  align-items: center;
}

/* =========================================================
   About — split text + photo
   Figma node 179:70
   ========================================================= */
.about {
  position: relative;
  isolation: isolate;
  background: var(--c-cream);
  padding: 140px 250px;
  min-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  z-index: 1;
  pointer-events: none;
}
.about__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to right,
    var(--c-navy-deep) 0%,
    var(--c-navy-deep) 25%,
    rgba(4, 4, 13, 0) 70%
  );
}
.about__content {
  position: relative;
  z-index: 3;
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  color: var(--c-white);
}
.about__title {
  margin: 0;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.about__body {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-white);
}

/* =========================================================
   Offers — 3-card row
   Figma node 179:79
   ========================================================= */
.offers {
  display: flex;
  gap: 5px;
  padding: 5px;
  background: var(--c-white);
}
.offer-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 600px;
  padding: 60px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  background: linear-gradient(to bottom, #cdfa95 0%, #d0f35b 100%);
  isolation: isolate;
  transition: transform .4s ease, box-shadow .4s ease;
}
.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -20px rgba(4, 4, 13, 0.35);
}
.offer-card__title {
  margin: 0;
  position: relative;
  z-index: 2;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.offer-card__note {
  margin: 16px 0 0;
  position: relative;
  z-index: 2;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  opacity: 0.5;
}
.offer-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  z-index: 1;
  pointer-events: none;
  transition: transform .8s ease;
}
.offer-card:hover .offer-card__img { transform: scale(1.06); }
.offer-card__cta {
  position: relative;
  z-index: 2;
  align-self: flex-start;
}

/* =========================================================
   Services — 3x2 grid
   Figma node 179:105
   ========================================================= */
.services {
  background: linear-gradient(to bottom, var(--c-white) 0%, var(--c-cream) 100%);
  padding: 200px 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px;
}
.services__intro {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
  text-align: center;
  color: var(--c-ink);
}
.services__title {
  margin: 0;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.services__sub {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 100%;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  height: 600px;
  padding: 60px;
  overflow: hidden;
  background: linear-gradient(to bottom, #cdfa95 0%, #d0f35b 100%);
  isolation: isolate;
  transition: transform .4s ease, box-shadow .4s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -20px rgba(4, 4, 13, 0.35);
}
.service-card__title {
  margin: 0;
  position: relative;
  z-index: 2;
  max-width: 100%;
  font-weight: 500;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.service-card__cta {
  position: relative;
  z-index: 2;
}
.service-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
  transition: transform .8s ease;
}
.service-card:hover .service-card__img { transform: scale(1.06); }

/* =========================================================
   Why Us — 5-card row
   Figma node 179:155
   ========================================================= */
.why-us {
  background: var(--c-white);
  padding: 5px;
}
.why-us__list {
  display: flex;
  gap: 5px;
  align-items: stretch;
}
.why-us__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 80px 60px;
  background: linear-gradient(131.2deg, #efefef 0%, #ffffff 100%);
  text-align: center;
  transition: transform .3s ease, background .3s ease;
}
.why-us__card:hover {
  transform: translateY(-6px);
  background: linear-gradient(131.2deg, #e7f4cd 0%, #f6fde2 100%);
}
.why-us__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  transition: transform .5s ease;
}
.why-us__card:hover .why-us__icon {
  transform: scale(1.12) rotate(-4deg);
}
.why-us__text {
  margin: 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

/* =========================================================
   Areas — Serving Greater Sydney
   Figma node 35:4027
   ========================================================= */
.areas {
  background: linear-gradient(to bottom, #161625 0%, #000000 100%);
  padding: 200px 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px;
  color: var(--c-white);
}
.areas__intro {
  width: 600px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
  text-align: center;
}
.areas__title {
  margin: 0;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.areas__sub {
  margin: -20px 0 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-white);
}
.areas__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  width: 800px;
  max-width: 100%;
  margin-top: -60px;  /* tighter to intro per Figma 80px gap */
}
.areas__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #161625;
  border-radius: 30px;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-white);
  white-space: nowrap;
  cursor: default;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.areas__pill:hover {
  background: #221d6a;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -10px rgba(208, 243, 91, 0.45);
}
.areas__pill--more { color: var(--c-lime); cursor: pointer; user-select: none; }
.areas__pill--more:hover {
  background: var(--c-lime);
  color: var(--c-ink);
}
.areas__pill--more:focus-visible {
  outline: 2px solid var(--c-lime);
  outline-offset: 3px;
}

/* Extra suburbs are hidden until the "+ More" pill is clicked.
   On expand they fade/slide in with a tiny stagger. */
.areas__pill--extra { display: none; }
.areas__pills.is-expanded .areas__pill--extra {
  display: inline-flex;
  animation: pillReveal .4s ease-out both;
}
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(11) { animation-delay: 0.02s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(12) { animation-delay: 0.05s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(13) { animation-delay: 0.08s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(14) { animation-delay: 0.11s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(15) { animation-delay: 0.14s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(16) { animation-delay: 0.17s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(17) { animation-delay: 0.20s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(18) { animation-delay: 0.23s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(19) { animation-delay: 0.26s; }
.areas__pills.is-expanded .areas__pill--extra:nth-of-type(20) { animation-delay: 0.29s; }
@keyframes pillReveal {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .areas__pills.is-expanded .areas__pill--extra { animation: none; }
}

.areas__map {
  position: relative;
  width: 100%;
  max-width: 1420px;
  height: 637px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}
.areas__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(1.05);
}

/* =========================================================
   Quote form
   Figma node 2:11
   ========================================================= */
.quote {
  background: linear-gradient(to bottom, var(--c-lime) 0%, #cdfa95 100%);
  padding: 140px 250px;
  display: flex;
  gap: 140px;
  align-items: flex-start;
}
.quote__intro {
  width: 500px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  color: var(--c-ink);
}
.quote__title {
  margin: 0;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.quote__sub {
  margin: 0;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #504f4f;
}
.quote__form {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote__field {
  position: relative;
  display: block;
}
.quote__field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.quote__field input,
.quote__field select {
  width: 100%;
  padding: 20px;
  background: var(--c-cream);
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  outline: none;
}
.quote__field input::placeholder,
.quote__field select:invalid {
  color: rgba(115, 115, 115, 0.8);
  font-style: italic;
}
.quote__field input,
.quote__field select {
  transition: box-shadow .2s ease, transform .2s ease;
}
.quote__field input:hover,
.quote__field select:hover {
  box-shadow: 0 4px 12px -4px rgba(4, 4, 13, 0.18);
}
.quote__field input:focus,
.quote__field select:focus {
  box-shadow: 0 0 0 2px var(--c-navy-deep), 0 6px 14px -4px rgba(4, 4, 13, 0.25);
  transform: translateY(-1px);
}
.quote__field--select select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("assets/select-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 26px 15px;
  padding-right: 60px;
}
.quote__submit {
  align-self: flex-start;
  background: var(--c-navy-deep);
  color: var(--c-cream);
  font-weight: 800;
  font-size: 24px;
  padding: 20px 32px;
  border-radius: 30px;
  cursor: pointer;
  border: 0;
  margin-top: 40px;
}
.quote__field .is-invalid {
  box-shadow: 0 0 0 2px #c4392f !important;
}
.quote__status {
  margin: 16px 0 0;
  min-height: 1.4em;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.quote__status[data-kind="error"] { color: #8a2a22; }
.quote__status[data-kind="ok"]    { color: #1f5a1f; }

/* =========================================================
   Policy pages (privacy, terms, refund)
   ========================================================= */
.policy {
  background: var(--c-cream);
  color: var(--c-ink);
  padding: 160px 24px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.policy__intro {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}
.policy__eyebrow {
  margin: 0;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-lime);
  background: var(--c-navy-deep);
  padding: 6px 12px;
  border-radius: 30px;
  align-self: flex-start;
}
.policy__title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}
.policy__meta {
  margin: 0;
  font-size: 16px;
  color: #6b6b6b;
}
.policy__body {
  width: 100%;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.6;
  color: #1f1f24;
}
.policy__body p,
.policy__body ul { margin: 0 0 20px; }
.policy__body ul { padding-left: 22px; }
.policy__body li { margin-bottom: 8px; }
.policy__body h2 {
  margin: 40px 0 16px;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.policy__body a {
  color: var(--c-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy__body a:hover { color: var(--c-navy); }
.policy__back {
  width: 100%;
  max-width: 760px;
  margin: 48px 0 0;
}
.policy__back a {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  color: var(--c-ink);
  text-decoration: none;
  padding: 12px 0;
  transition: transform .2s ease;
}
.policy__back a:hover { transform: translateX(-4px); }

@media (max-width: 720px) {
  .policy { padding: 110px 20px 80px; }
  .policy__intro { gap: 10px; margin-bottom: 32px; }
  .policy__body { font-size: 16px; }
  .policy__body h2 { font-size: 20px; margin: 32px 0 12px; }
}

/* =========================================================
   Footer
   Figma node 35:4284
   ========================================================= */
.site-footer {
  background: var(--c-cream);
  color: var(--c-ink);
  padding: 60px;
  display: flex;
  flex-direction: column;
  gap: 60px;
}
.site-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
}

/* brand + nav cluster */
.site-footer__brand {
  display: flex;
  gap: 60px;
  align-items: stretch;
}
.footer-logo {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 346px;
}
.footer-logo__row {
  width: 100%;
  height: auto;
  display: block;
}
.footer-logo__row:first-child { height: 84px; }
.footer-logo__row:nth-child(2) { height: 73px; margin-top: -10px; }
.footer-logo__sub {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 28.26px;
  letter-spacing: 0.48em;
  color: var(--c-ink);
  line-height: 1;
}
.site-footer__divider {
  width: 1px;
  background: var(--c-ink);
  align-self: stretch;
}
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 30px;
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.site-footer__nav a {
  position: relative;
  color: #504f4f;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}
.site-footer__nav a:hover {
  color: var(--c-ink);
  transform: translateX(4px);
}
.site-footer__nav a.is-active { color: var(--c-ink); }

/* contact */
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--c-ink);
}
.site-footer__contact-heading {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 1;
}
.site-footer__contact-row {
  margin: 0;
  display: flex;
  gap: 14px;
  font-size: 18px;
  line-height: 1.4;
}
.site-footer__contact-row > span:first-child {
  font-weight: 600;
  font-size: 16px;
  width: 16px;
  flex-shrink: 0;
}
.site-footer__contact-row a { color: var(--c-ink); }
.site-footer__contact-row a:hover { text-decoration: underline; }

/* tagline + CTAs */
.site-footer__cta-block {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-end;
  width: 386px;
  max-width: 100%;
}
.site-footer__tagline {
  margin: 0;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-align: right;
}
.site-footer__cta-buttons {
  display: flex;
  gap: 10px;
}

/* bottom row */
.site-footer__bottom {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.site-footer__copy {
  margin: 0;
  font-size: 16px;
  color: var(--c-ink);
}
.site-footer__legal {
  display: flex;
  gap: 20px;
  font-size: 16px;
  opacity: 0.8;
}
.site-footer__legal a { color: var(--c-ink); }
.site-footer__legal a:hover { text-decoration: underline; }
.site-footer__powered {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.site-footer__powered:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}
.site-footer__powered img:first-child {
  width: 95px;
  height: 14px;
  margin-left: 3px;
}
.site-footer__powered img:nth-child(2) { width: 112px; height: 30px; }

/* =========================================================
   Responsive
   ========================================================= */

/* Narrow desktop — tighten the heavy 250px side paddings */
@media (max-width: 1440px) {
  .about,
  .areas,
  .quote,
  .services {
    padding-left: 120px;
    padding-right: 120px;
  }
  .site-footer { padding: 48px 40px; }
  .site-footer__top { gap: 40px; }
  .site-footer__brand { gap: 40px; }
  .footer-logo { width: 260px; }
  .footer-logo__row:first-child { height: 64px; }
  .footer-logo__row:nth-child(2) { height: 55px; }
  .footer-logo__sub { font-size: 22px; letter-spacing: 0.4em; }
  .site-footer__nav { font-size: 22px; gap: 22px; }
  .site-footer__nav a { white-space: nowrap; }
  .site-footer__cta-block { width: auto; max-width: 320px; gap: 30px; }
  .site-footer__tagline { font-size: 18px; }
}

/* Tablet */
@media (max-width: 1024px) {
  .site-header { padding: 0 24px; }
  .site-nav { gap: 20px; }
  .site-nav__link { font-size: 16px; }
  .btn { font-size: 18px; padding: 14px 18px; }
  .brand { width: 200px; }
  .brand__sub { font-size: 16px; letter-spacing: 0.4em; }

  .hero { padding: 0 32px; }

  .trust-bar {
    flex-wrap: wrap;
    gap: 24px 40px;
    width: calc(100% - 80px);
  }
  .trust-bar__item { flex: 1 1 calc(50% - 40px); }

  .why-us__list { flex-wrap: wrap; }
  .why-us__card {
    flex: 1 1 calc(33.333% - 5px);
    min-width: calc(33.333% - 5px);
    padding: 60px 40px;
    gap: 24px;
  }
  .why-us__text { font-size: 22px; }

  .services { padding: 120px 32px; gap: 80px; }
  .services__title { font-size: 48px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { height: 480px; padding: 40px; gap: 30px; }
  .service-card__title { font-size: 36px; }

  .offers { flex-wrap: wrap; }
  .offer-card { flex: 1 1 calc(50% - 5px); height: 480px; padding: 40px; }
  .offer-card__title { font-size: 36px; }
  .offer-card:last-child { flex-basis: 100%; }

  .about { padding: 100px 32px; min-height: 600px; }
  .about__title { font-size: 48px; }

  .areas { padding: 120px 32px; gap: 80px; }
  .areas__title { font-size: 48px; }
  .areas__pills { width: 100%; gap: 14px; }
  .areas__pill { font-size: 18px; padding: 14px 16px; }
  .areas__map { height: 480px; }

  .quote { padding: 100px 32px; gap: 60px; flex-direction: column; }
  .quote__intro { width: 100%; gap: 30px; }
  .quote__title { font-size: 48px; }
  .quote__form { width: 100%; }

  .site-footer { padding: 48px 32px; gap: 40px; }
  .site-footer__top { flex-wrap: wrap; gap: 40px; }
  .site-footer__brand { flex: 1 1 100%; }
  .footer-logo { width: 280px; }
  .footer-logo__sub { font-size: 22px; letter-spacing: 0.4em; }
  .site-footer__nav { font-size: 22px; }
  .site-footer__cta-block { width: 100%; align-items: flex-start; }
  .site-footer__tagline { text-align: left; }
}

/* Mobile */
@media (max-width: 720px) {
  .site-header {
    height: 72px;
    padding: 0 20px;
  }
  .nav-toggle { display: flex; }
  .brand { width: 160px; }
  .brand__mark { height: 22px; }
  .brand__sub { font-size: 13px; letter-spacing: 0.35em; }

  /* Mobile slide-down menu panel */
  .site-header__panel {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 32px 24px 40px;
    background: #18134b;
    border-top: 1px solid rgba(208, 243, 91, 0.15);
    box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.6);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 40;
  }
  .site-header.is-open .site-header__panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .site-header__panel .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .site-header__panel .site-nav__link {
    font-size: 22px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-header__panel .site-nav__link::after { display: none; }
  .site-header__panel .site-header__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .site-header__panel .btn {
    width: 100%;
    font-size: 18px;
    padding: 16px 20px;
  }

  /* Mobile hero: background images fill the full hero (no padding-top),
     header floats above. Content has its OWN top margin to clear the
     fixed header. */
  .hero {
    aspect-ratio: auto;
    min-height: 0;
    height: auto;
    padding: 0 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 0;
    text-align: center;
  }
  .hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: none;
    gap: 24px;
    align-items: center;
    text-align: center;
    margin-top: 130px;   /* clears the fixed header */
    margin-bottom: 400px; /* leaves room for watermark + mountains/solar */
  }
  /* Trust bar lives at the bottom of the hero, sitting over the dark
     solar panel area where text reads cleanly. */
  .trust-bar {
    position: relative;
    z-index: 10;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: none;
  }
  .hero__content > .btn { margin-top: 8px; }
  .hero__title { font-size: clamp(32px, 9vw, 40px); }
  .hero__sub { font-size: 16px; max-width: 320px; margin: 0 auto; }
  .btn--lg { font-size: 20px; padding: 18px 28px; }

  /* Gradient anchored to the very top edge of the hero on mobile.
     Extended to cover more of the hero so the dark purple flows
     smoothly into the mountain area — no washed-out grey band. */
  .hero__bg--gradient {
    top: 0;
    bottom: auto;
    height: 75%;
  }

  /* Watermark: full-bleed with default 20px hero padding, centered
     on the top mountain peak so the peak crosses the lower letters. */
  .hero__bg--watermark {
    top: 52%;
    bottom: auto;
    left: 20px;
    right: 20px;
    transform: translateY(-50%);
    opacity: 0.9;
  }
  .trust-bar {
    flex-direction: column;
    gap: 14px;
    margin-top: 0;
  }
  .trust-bar__item {
    flex: 1 1 100%;
    padding-left: 18px;
    border-left-width: 3px;
    font-size: 16px;
  }

  .trust-bar {
    flex-direction: column;
    gap: 14px;
    margin-top: 0;
  }
  .trust-bar__item {
    flex: 1 1 100%;
    padding-left: 18px;
    border-left-width: 3px;
    font-size: 16px;
  }

  .why-us__list {
    flex-direction: column;
    gap: 5px;
  }
  .why-us__card {
    flex: 1 1 100%;
    padding: 48px 32px;
    gap: 20px;
  }
  .why-us__text { font-size: 20px; }

  .services { padding: 80px 20px; gap: 60px; }
  .services__intro { gap: 30px; }
  .services__title { font-size: 36px; }
  .services__sub { font-size: 16px; }
  .services__grid { grid-template-columns: 1fr; }
  .service-card { height: 420px; padding: 32px; gap: 24px; }
  .service-card__title { font-size: 32px; }

  .offers { flex-direction: column; }
  .offer-card {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    padding: 28px;
  }
  .offer-card__title { font-size: 28px; }

  .about { padding: 80px 20px; min-height: 0; }
  .about__overlay { background: linear-gradient(to bottom, rgba(4,4,13,0.9) 0%, rgba(4,4,13,0.75) 60%, rgba(4,4,13,0.6) 100%); }
  .about__content { gap: 30px; }
  .about__title { font-size: 36px; }
  .about__body { font-size: 16px; }

  .areas { padding: 80px 20px; gap: 40px; }
  .areas__intro { gap: 20px; }
  .areas__title { font-size: 36px; }
  .areas__sub { font-size: 16px; margin: 0; }
  /* Reset desktop's negative top margin that pulled the pills over the sub text */
  .areas__pills {
    margin-top: 0;
    width: 100%;
    gap: 12px;
  }
  .areas__pill { font-size: 15px; padding: 12px 16px; }
  .areas__map { height: 320px; }

  .quote { padding: 80px 20px; gap: 40px; }
  .quote__intro { gap: 20px; }
  .quote__title { font-size: 36px; }
  .quote__sub { font-size: 16px; }
  .quote__field input,
  .quote__field select { font-size: 16px; padding: 16px; }

  .site-footer { padding: 40px 20px; }
  .site-footer__top { gap: 32px; }
  .site-footer__brand { flex-direction: column; gap: 24px; }
  .site-footer__divider { display: none; }
  .site-footer__nav { flex-direction: row; flex-wrap: wrap; gap: 20px; font-size: 18px; }
  .footer-logo { width: 160px; gap: 6px; }
  .footer-logo__row:first-child { height: 38px; }
  .footer-logo__row:nth-child(2) { height: 33px; margin-top: -6px; }
  .footer-logo__sub { font-size: 13px; letter-spacing: 0.32em; margin-top: 2px; }
  .site-footer__tagline { font-size: 18px; }
  .site-footer__bottom { gap: 16px; }
  .site-footer__bottom > * { flex: 1 1 100%; text-align: left; }
  .site-footer__legal {
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 14px;
  }
  .site-footer__legal a { white-space: nowrap; }
  .site-footer__powered { align-items: flex-start; }
}