/* No Brainer Water Co. - homepage-only styles.
   Shell, tokens and shared components live in layout.css / tokens.css -
   this file only adds what index.html needs beyond the shared classes. */

/* hero: full-bleed photo, copy over the dark left half of the frame.
   The image was generated with an uncluttered dark left side for exactly
   this - keep the scrim light-handed so the photo stays the design. */
.home-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
}
.home-hero__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
.home-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgb(4 10 20 / 0.78) 0%, rgb(4 10 20 / 0.45) 48%, rgb(4 10 20 / 0.05) 78%);
}
.home-hero > .container { position: relative; }
.home-hero__copy { max-width: 620px; }
.home-hero__proof { margin-top: 1.6rem; }
@media (max-width: 760px) {
  /* mobile: glass low-right, copy reads top-down over the darkened frame */
  .home-hero { align-items: flex-start; }
  .home-hero__bg { object-position: 66% center; }
  .home-hero__scrim {
    background: linear-gradient(to bottom,
      rgb(4 10 20 / 0.82) 0%, rgb(4 10 20 / 0.5) 55%, rgb(4 10 20 / 0.12) 100%);
  }
}

/* proof strip */
.home-proof { padding-block: 1.8rem; }
.home-proof__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.6rem 2.2rem;
  font-size: var(--text-sm);
  font-weight: var(--w-medium);
  opacity: 0.75;
  text-align: center;
}

/* problem / quiz */
.home-problem { text-align: center; }
.home-problem__card {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* gadget ladder */
.home-ladder__note { margin-top: 1.6rem; }

/* trust / research (merged honest-maths + trust facts) */
.home-trust__links { margin: 0 0 2.5rem; font-size: var(--text-sm); }
.home-trust__links a { text-decoration: underline; }
.home-trust__kicker2 { margin-top: 0; }
.home-trust__headline2 {
  font-weight: var(--w-medium);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 1.2rem;
}
.home-trust__list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  opacity: 0.9;
}
.home-trust__reviews { font-size: var(--text-sm); opacity: 0.6; margin: 0; }

/* product grid */
.home-products__grid { margin-top: 2.2rem; }
.home-product__card {
  text-decoration: none;
  color: inherit;
  display: grid;
  gap: 0.5rem;
}
.home-product__card img {
  border-radius: calc(var(--radius-card) - 4px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin-bottom: 0.4rem;
}
.home-product__price {
  font-weight: var(--w-medium);
  font-size: 1.1rem;
  margin: 0;
}

/* footer email capture */
.home-footer__form {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.home-footer__arrow {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: transparent;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
}
.home-footer__arrow:hover { background: rgb(255 255 255 / 0.1); }

/* two-column comparison (replaces the ladder table) */
.compare { display: grid; gap: 1.2rem; grid-template-columns: 1fr; max-width: 720px; }
@media (min-width: 700px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border: 1px solid rgb(var(--ink) / 0.12); border-radius: var(--radius-card); padding: 1.5rem 1.7rem; background: rgb(var(--paper)); }
.compare__col--us { background: rgb(var(--accent) / 0.08); border-color: rgb(var(--accent) / 0.5); }
.compare__col h3 { margin-bottom: 1rem; }
.compare__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.compare__col li { padding-left: 1.7rem; position: relative; }
.compare__col li.tick::before { content: "\2713"; position: absolute; left: 0; color: rgb(35 160 90); font-weight: 600; }
.compare__col li.cross::before { content: "\2715"; position: absolute; left: 0; opacity: 0.35; }
.compare__col li.cross { opacity: 0.55; }

/* v3: the fork */
.home-fork__card { text-decoration: none; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.15s ease; }
.home-fork__card:hover { transform: translateY(-2px); }
.home-fork__card p { margin: 0; opacity: 0.85; }
.home-fork__go { margin-top: auto; display: flex; justify-content: space-between; align-items: center;
  border: 1.5px solid rgb(var(--ink) / 0.2); border-radius: 999px;
  /* pill height rule (Mason, 9 Aug): same min-height as .btn, padding
     carries no vertical weight so every pill lands identical */
  min-height: 3.25rem; padding: 0 1.3rem;
  font-weight: var(--w-medium); gap: 1rem; transition: border-color 0.15s, background 0.15s; }
.home-fork__card:hover .home-fork__go { border-color: rgb(var(--ink)); background: rgb(var(--ink)); color: #fff; }
.home-fork__price { opacity: 0.75; }
.home-fork__card { display: flex; flex-direction: column; }
.home-fork__help { margin-top: 2rem; font-size: var(--text-base); opacity: 0.8; }

/* v3: how it works steps */
.home-steps { margin-top: 1.5rem; }
.home-step { display: flex; flex-direction: column; gap: 0.5rem; }
.home-step__num { font-size: 2rem; font-weight: var(--w-medium); opacity: 0.35; }
.home-step p { margin: 0; opacity: 0.85; }
.home-steps__cta { margin-top: 2.5rem; }
.home-compare__note { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; margin-top: 1.5rem; }

/* v3 visual pass - Intake treatments with our imagery */
.home-hero__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 1000px) {
  .home-hero__grid { grid-template-columns: 1.05fr 1fr; min-height: 640px; }
}
.home-hero__media { position: relative; border-radius: var(--radius-media); overflow: hidden; }
.home-hero__media img { width: 100%; height: 100%; min-height: 420px; object-fit: cover;
  filter: saturate(0.85) contrast(1.05); }
.home-hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, rgb(var(--accent) / 0.18), transparent 45%),
              linear-gradient(0deg, rgb(var(--ink) / 0.45), transparent 60%); }
/* blended hero: the navy studio shot merges into the section background,
   no box - the Intake integrated-hero treatment */
.home-hero__media--blend { border-radius: 0; overflow: visible; }
.home-hero__media--blend img { min-height: 520px; object-fit: contain; filter: none;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 98%);
  mask-image: radial-gradient(120% 120% at 50% 45%, #000 55%, transparent 98%); }
.home-hero__media--blend::after { display: none; }

.home-fork__img { width: 100%; height: 190px; object-fit: cover; border-radius: calc(var(--radius-card) - 6px); margin-bottom: 0.9rem; background: rgb(var(--paper-dim)); }

.home-why { position: relative; background-size: cover; background-position: center; }
.home-why::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgb(var(--ink) / 0.96) 0%, rgb(var(--ink) / 0.86) 45%, rgb(var(--ink) / 0.35) 100%); }
.home-why__inner { position: relative; }

.home-product__card img { width: 100%; height: 210px; object-fit: cover; border-radius: calc(var(--radius-card) - 6px); margin-bottom: 0.9rem; background: rgb(var(--paper-dim)); }
.home-problem__media { max-width: 720px; margin-bottom: 1.4rem; }
.home-problem__media img { width: 100%; height: 300px; object-fit: cover; }
.home-steps__media { margin-top: 3rem; }
.home-steps__media img { width: 100%; height: 380px; object-fit: cover; }

/* ENERGY PASS */
/* split-photo comparison with chips */
.vs { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__panel { position: relative; border-radius: var(--radius-media); overflow: hidden; }
.vs__panel img { width: 100%; height: 380px; object-fit: cover; }
.vs__chip { position: absolute; left: 14px; bottom: 14px; padding: 0.5rem 1rem;
  border-radius: 999px; font-size: var(--text-sm); font-weight: var(--w-medium); }
.vs__chip--yes { background: rgb(46 200 130); color: #fff; }
.vs__chip--no { background: rgb(255 255 255 / 0.92); color: rgb(var(--ink) / 0.7); }
.vs__rows { max-width: 640px; margin: 2rem auto 0; }
.vs__row { display: flex; justify-content: space-between; padding: 0.7rem 0;
  border-bottom: 1px solid rgb(var(--ink) / 0.1); font-size: var(--text-base); }
.vs__row .tick { color: rgb(35 160 90); font-weight: var(--w-medium); }

/* marquee proof strip */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 3rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee .home-proof__list { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.marquee .home-proof__list li { text-transform: uppercase; letter-spacing: 0.14em;
  font-size: var(--text-xs); font-weight: var(--w-medium); color: rgb(var(--ink) / 0.55);
  display: flex; align-items: center; }
.marquee .home-proof__list li::after { content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: rgb(var(--accent)); margin: 0 2.2rem; opacity: 0.8; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* quiz media card with overlay CTA */
.quiz-card { position: relative; max-width: 860px; }
.quiz-card img { width: 100%; height: 420px; object-fit: cover; object-position: top; }
@media (max-width: 640px) { .quiz-card img { height: 320px; } }
.quiz-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2rem; text-align: center;
  background: linear-gradient(0deg, rgb(2 28 70 / 0.88), rgb(2 28 70 / 0.62));
  color: #fff; padding: 2rem; }
.quiz-card__overlay p { max-width: 30em; font-size: var(--text-lg); margin: 0; }

/* accent glow on dark sections */
.sec--dark2 { background-image:
  radial-gradient(55% 60% at 85% 0%, rgb(var(--accent) / 0.14), transparent 70%),
  linear-gradient(180deg, rgb(var(--ink)), rgb(var(--ink-2))); }
section[data-hero].sec--dark { background-image:
  radial-gradient(50% 55% at 90% 20%, rgb(var(--accent) / 0.10), transparent 70%); }
.sec-thin { padding-block: 1.1rem; border-bottom: 1px solid rgb(var(--ink) / 0.08); }
.home-map { max-width: 480px; margin: 2.2rem auto 0; }
.home-map img { width: 100%; height: auto; }

/* Clean whole-house comparison (13 Aug: replaced the two-photo vs panels -
   the kid photo broke the no-AI-faces and no-golden-cast rules, and the
   split layout read as two competing sections). One table, one photo. */
.compare { display: grid; gap: 1.4rem; margin-top: 2rem; align-items: stretch; }
@media (min-width: 760px) { .compare { grid-template-columns: 1.1fr 1fr; } }
.compare__table { padding: 1.1rem 1.3rem; display: flex; flex-direction: column; justify-content: center; }
.compare__row { display: grid; grid-template-columns: 1fr 6.5em 6.5em; align-items: center; gap: 0.6rem; padding: 0.65rem 0; border-bottom: 1px solid rgb(var(--ink) / 0.08); }
.compare__row:last-child { border-bottom: 0; }
.compare__row--head { font-size: var(--text-xs); font-weight: var(--w-semibold); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; border-bottom: 2px solid rgb(var(--ink) / 0.15); }
.compare__row .c-yes { color: #0e9aa7; font-weight: 800; text-align: center; }
.compare__row .c-no { opacity: 0.35; text-align: center; }
.compare__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ES60 single-product hero (19 Aug 2026: the site IS the ES60) */
.home-hero__price { font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: var(--w-medium); margin: 1.6rem 0 0.2rem; }
.home-hero__pay { font-size: var(--text-sm); opacity: 0.8; margin: 0 0 1.4rem; }
.home-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.4rem; }

/* AquaTru-structure rebuild (20 Aug 2026) ------------------------------- */

/* education strip: fact cards */
.home-facts { margin-top: 2.4rem; }
.fact h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.fact p { margin: 0; font-size: var(--text-sm); opacity: 0.78; }
.fact .fact__num { font-size: 1.9rem; font-weight: var(--w-medium); margin: 0 0 0.7rem; color: rgb(var(--ink)); letter-spacing: -0.01em; opacity: 1; }

/* report -> product bridge line */
.home-bridge { margin: 2.6rem 0 0; font-size: var(--text-lg); font-weight: var(--w-medium); opacity: 0.95; }

/* the range: uniform card anatomy - badge, media, job chip, name, one-liner,
   three features, price, Afterpay figure, one button */
.range-grid { margin-top: 2.4rem; align-items: stretch; }
.range-card { display: flex; flex-direction: column; position: relative; }
.range-card__media { border-radius: calc(var(--radius-card) - 4px); overflow: hidden; background: #05173a; aspect-ratio: 4 / 3; margin: -0.4rem -0.4rem 1rem; }
.range-card__media img { width: 100%; height: 100%; object-fit: contain; }
.range-card h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.range-card__line { margin: 0 0 0.8rem; font-size: var(--text-sm); opacity: 0.8; }
.range-card__features { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; font-size: var(--text-sm); }
.range-card__features li { padding-left: 1.3rem; position: relative; opacity: 0.85; }
.range-card__features li::before { content: "\2713"; position: absolute; left: 0; color: rgb(var(--accent)); font-weight: 800; }
.range-card__price { font-weight: var(--w-medium); font-size: 1.25rem; margin: auto 0 0; padding-top: 0.4rem; }
.range-card__unit { font-size: var(--text-sm); font-weight: var(--w-regular); opacity: 0.65; }
.range-card__pay { font-size: var(--text-xs); opacity: 0.65; margin: 0.15rem 0 0.9rem; }
.range-card .btn { width: 100%; }
.range-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgb(var(--accent)); color: rgb(var(--accent-ink)); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.2rem 0.6rem; }
.range-card--hero { border: 2px solid rgb(var(--accent)); }
.product-card__job { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--chip-blue, #2354B4); font-weight: 600; margin: 0 0 0.35rem; }

/* founder split */
.founder-split { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .founder-split { grid-template-columns: 0.85fr 1.15fr; } }
.founder-split__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; }

/* what-it-removes + council-report cards */
.home-removes { margin-top: 2.4rem; }
.home-removes .card h3 { margin-bottom: 0.5rem; }
.home-removes .card p { margin: 0; font-size: var(--text-sm); opacity: 0.82; }
.home-reports { margin-top: 2.4rem; }
.home-report__card { display: block; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease; }
.home-report__card:hover { border-color: rgb(var(--accent) / 0.6); transform: translateY(-2px); }
.home-report__card .kicker { margin-bottom: 0.5rem; }
.home-report__card h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.home-report__card p { margin: 0; font-size: var(--text-sm); opacity: 0.78; }