/* =============================================================
   RESET & BASE
============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #000;
  color: #d8d8d8;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}

img { display: block; }
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }

/* =============================================================
   DESIGN TOKENS
============================================================= */
:root {
  --c-green1: #b7e0ac;
  --c-green2: #95c787;
  --c-green3: #6ed6a9;
  --c-green4: #72c47e;
  --c-green5: #a4d898;
  --c-red:    #b82020;
  --pad-x:    clamp(24px, 8.3vw, 120px);
  /* centers content within a 1440px column on any screen width */
  --site-pad: max(var(--pad-x), calc((100vw - 1440px) / 2 + var(--pad-x)));
}

/* color utility classes */
.c-green1 { color: var(--c-green1); }
.c-green2 { color: var(--c-green2); }
.c-green3 { color: var(--c-green3); }
.c-green4 { color: var(--c-green4); }
.c-green5 { color: var(--c-green5); }
.w-regular { font-weight: 400; }

/* =============================================================
   1. HERO  –  flex layout, full-width background
============================================================= */
.s-hero {
  position: relative;
  overflow: hidden;
  background: #000;
  min-height: clamp(600px, 55.8vw, 804px);
}

.s-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.s-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
}

.s-hero__inner {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 5.5vw, 80px) var(--site-pad);
  min-height: clamp(600px, 55.8vw, 804px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

.s-hero__left {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding-top: clamp(20px, 3.5vw, 50px);
  flex: 1;
  max-width: 600px;
}

.s-hero__logo {
  width: clamp(110px, 10.7vw, 154px);
  height: auto;
  flex-shrink: 0;
}
.s-hero__logo img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.s-hero__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 28px;
  border-radius: 100px;
  background: #000;
  box-shadow: inset 0 0 8px rgba(103, 228, 181, 0.35);
  align-self: flex-start;
}
.s-hero__tag span {
  font-family: 'Inter', sans-serif;
  font-size: clamp(13px, 1.4vw, 20px);
  color: #d8d8d8;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.s-hero__tag strong {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.s-hero__headline {
  font-size: clamp(26px, 3.6vw, 52px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.15;
}
.s-hero__headline strong { font-weight: 800; }
.s-hero__headline .c-green2 { font-weight: 700; }
.s-hero__headline .w-regular { font-weight: 400; }

.s-hero__sub {
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: #d8d8d8;
  max-width: 460px;
}
.s-hero__sub .c-green5 { font-weight: 700; }

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(383px, 100%);
  height: 63px;
  border-radius: 100px;
  background: var(--c-green2);
  box-shadow: inset 0 0 8px rgba(103, 228, 181, 0.35), 0 0 21px rgba(149, 199, 135, 0.19);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 800;
  color: #000e0a;
  cursor: pointer;
  transition: opacity 0.2s;
  align-self: flex-start;
  border: none;
}
.btn-cta:hover { opacity: 0.88; }

/* =============================================================
   2. PROBLEMS  –  flex-column (no fixed height to avoid overlap)
============================================================= */
.s-problems {
  position: relative;
  overflow: hidden;
  background: #000;
  padding: clamp(40px, 5.5vw, 80px) var(--site-pad);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.s-problems__overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: hard-light;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
.s-problems__overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-problems__heading {
  position: relative;
  z-index: 1;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: 28px;
}
.s-problems__heading .c-green1 { font-weight: 700; }

.s-problems__body {
  position: relative;
  z-index: 1;
  max-width: min(765px, 100%);
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: #d8d8d8;
  margin-bottom: 24px;
}

.s-problems__result-top {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: 14px;
}

.s-problems__result-bottom {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 700;
  color: #d8d8d8;
  line-height: 1.5;
  margin-top: 14px;
}

/* problem tags */
.problem-tags {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.problem-tag {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  height: 50px;
  padding: 10px 15px;
  overflow: hidden;
}

.problem-tag__bg {
  position: absolute;
  inset: 0;
  background: var(--c-red);
}
.problem-tag__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(5deg, rgba(0,0,0,0.55) 2.77%, rgba(255,255,255,0.55) 65.63%);
  mix-blend-mode: overlay;
}

.problem-tag__icon {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 33px;
  object-fit: contain;
  flex-shrink: 0;
}

.problem-tag span {
  position: relative;
  z-index: 1;
  font-size: clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  color: #d8d8d8;
  white-space: nowrap;
}

/* =============================================================
   3. NPV METHOD  –  flex-column centered (no fixed height)
============================================================= */
.s-npv {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 5.5vw, 80px) var(--site-pad);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-npv__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.s-npv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-npv__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: 28px;
}
.s-npv__heading strong { font-weight: 700; }

.s-npv__body {
  position: relative;
  z-index: 1;
  max-width: min(690px, 100%);
  text-align: center;
  font-size: clamp(15px, 1.4vw, 20px);
  line-height: 1.5;
  color: #d8d8d8;
  margin-bottom: 40px;
}

.npv-tags {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 40px;
}

.npv-tags__row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.npv-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 59px;
}
.npv-tag__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}
.npv-tag span {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.7vw, 24px);
  color: #d8d8d8;
  padding: 0 clamp(14px, 2vw, 30px);
  white-space: nowrap;
  line-height: 59px;
}

.s-npv__footer {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  color: #d8d8d8;
}

/* =============================================================
   4. BIO  –  CSS Grid two-column
============================================================= */
.s-bio {
  background: #000;
  overflow: hidden;
}

.s-bio__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(480px, 50vw, 720px);
}

.s-bio__content {
  padding: clamp(40px, 5.5vw, 80px) clamp(24px, 4vw, 60px) clamp(40px, 5.5vw, 80px) var(--site-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.s-bio__photo {
  overflow: hidden;
  min-height: 400px;
}
.s-bio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.s-bio__heading {
  font-size: clamp(28px, 3.3vw, 48px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: 24px;
}
.s-bio__heading .c-green1 { font-weight: 700; }

.s-bio__body {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #d8d8d8;
  line-height: 1.6;
  margin-bottom: 12px;
}
.s-bio__body .c-green1 { font-weight: 700; }

.s-bio__list {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 14px;
}
.s-bio__list li {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #d8d8d8;
  line-height: 1.6;
}

/* =============================================================
   5. SERVICES  –  flex wrap, responsive
============================================================= */
.s-services {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 5.5vw, 80px) var(--site-pad);
}

.s-services__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.s-services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-services__heading {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.4;
  margin-bottom: clamp(32px, 4vw, 60px);
}
.s-services__heading .c-green4 { font-weight: 700; }

.services-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(16px, 1.7vw, 25px);
  justify-content: center;
  flex-wrap: wrap;
}

.service-card {
  position: relative;
  width: clamp(260px, 27vw, 370px);
  min-height: 450px;
  overflow: hidden;
  text-align: center;
  padding: 106px 20px 32px;
}

.service-card__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.service-card__bg img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.service-card__icon {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  z-index: 2;
}
.service-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-card h3 {
  position: relative;
  z-index: 2;
  font-size: clamp(20px, 2.2vw, 32px);
  font-weight: 700;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: 20px;
}

.service-card p {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 1.1vw, 16px);
  color: #d8d8d8;
  line-height: 1.5;
}

/* =============================================================
   6. RESULTS  –  flex two-column
============================================================= */
.s-results {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 5.5vw, 80px) var(--site-pad);
}

.s-results__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.s-results__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-results__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 100px);
  justify-content: space-between;
}

.s-results__left {
  flex: 1;
  max-width: 420px;
}

.s-results__heading {
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  line-height: 1.2;
  margin-bottom: clamp(24px, 4vw, 60px);
}
.s-results__heading .c-green4 { font-weight: 700; }

.s-results__body {
  font-size: clamp(14px, 1.4vw, 20px);
  color: #d8d8d8;
  line-height: 1.6;
  margin-bottom: 16px;
}

.s-results__right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.s-results__cards { flex-shrink: 0; }

.testimonial-card {
  margin-bottom: 28px;
}
.testimonial-card img {
  width: clamp(240px, 24.4vw, 351px);
  height: auto;
  object-fit: contain;
}

.s-results__nav {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 72px);
}

.nav-arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}
.nav-arrow img {
  width: 10px;
  height: 5px;
}
.nav-arrow--down img {
  transform: scaleY(-1);
}

/* =============================================================
   7. CONTACT  (y 4275–5049)
============================================================= */
.s-contact {
  position: relative;
  padding: clamp(60px, 7vw, 100px) var(--site-pad) clamp(40px, 4vw, 60px);
  background: #000;
  overflow: hidden;
}

.s-contact__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  overflow: hidden;
}
.s-contact__bg img {
  width: 119.39%;
  margin-left: -12.21%;
  height: 130.2%;
  margin-top: -5%;
  object-fit: cover;
}

.s-contact__heading {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  text-align: center;
  margin-bottom: 40px;
  line-height: 1.25;
  position: relative;
}
.s-contact__heading .c-green4 { font-weight: 700; }

.s-contact__body {
  font-size: clamp(15px, 1.4vw, 20px);
  color: #d8d8d8;
  text-align: center;
  line-height: 1.6;
  margin-bottom: clamp(32px, 4vw, 60px);
  position: relative;
}

/* form */
.contact-form {
  max-width: 825px;
  margin: 0 auto 40px;
  position: relative;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 33px;
  margin-bottom: 16px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-field label {
  font-size: clamp(14px, 1.1vw, 18px);
  color: #d8d8d8;
}

.form-field input {
  height: 45px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  color: #d8d8d8;
  font-size: clamp(15px, 1.1vw, 18px);
  font-family: 'Montserrat', sans-serif;
  padding: 0 25px;
  outline: none;
  transition: border-color 0.2s;
}
.form-field input::placeholder {
  color: rgba(255, 255, 255, 0.1);
  font-size: clamp(15px, 1.1vw, 18px);
  letter-spacing: 0.035px;
}
.form-field input:focus {
  border-color: var(--c-green4);
}

.btn-submit {
  width: 100%;
  height: clamp(50px, 5vw, 57px);
  background: var(--c-green2);
  border: none;
  border-radius: 3px;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  color: #000;
  letter-spacing: 1.125px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: opacity 0.2s;
  margin-top: 8px;
}
.btn-submit:hover { opacity: 0.9; }

/* contact info row */
.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 40px;
  position: relative;
  flex-wrap: wrap;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(14px, 1.4vw, 20px);
  color: #fff;
  transition: opacity 0.2s;
}
.contact-item:hover { opacity: 0.8; }
.contact-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* =============================================================
   8. FAQ  (y 5049–5560)
============================================================= */
.s-faq {
  background: #000;
  padding: clamp(48px, 5.5vw, 80px) var(--site-pad) clamp(60px, 6vw, 80px);
}

.s-faq__heading {
  font-size: clamp(24px, 2.8vw, 40px);
  font-weight: 400;
  color: #d8d8d8;
  text-align: center;
  margin-bottom: 50px;
}

.faq-list {
  max-width: 750px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #060606;
  border: none;
  padding: 22px 35px;
  height: 65px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(15px, 1.4vw, 20px);
  color: #d8d8d8;
  text-align: left;
  gap: 16px;
}
.faq-btn:hover { background: #0d0d0d; }

.faq-arrow {
  width: 24px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-btn[aria-expanded="true"] .faq-arrow {
  transform: rotate(180deg);
}

.faq-answer {
  background: #060606;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
}
.faq-answer.is-open {
  max-height: 200px;
  padding: 0 35px 24px;
}
.faq-answer p {
  font-size: 18px;
  color: rgba(216, 216, 216, 0.75);
  line-height: 1.7;
  padding-top: 4px;
}

/* =============================================================
   9. FOOTER
============================================================= */
.s-footer {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.s-footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.s-footer__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-footer__content {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: clamp(40px, 5vw, 60px) var(--site-pad);
}

.s-footer__logo {
  width: clamp(180px, 21.4vw, 308px);
  height: auto;
  object-fit: contain;
}

.s-footer__content p {
  font-size: clamp(13px, 1.1vw, 16px);
  color: #d8d8d8;
  line-height: 1.5;
}

/* =============================================================
   RESPONSIVE  –  ≤ 768px
============================================================= */
@media (max-width: 768px) {

  /* ── HERO ──────────────────────────────────────── */
  .s-hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }
  .s-hero__bg {
    position: static;
    width: 100%;
    height: 90vw;
    min-height: 300px;
    max-height: 520px;
  }
  .s-hero__bg img { object-fit: cover; object-position: center top; }
  .s-hero__inner {
    flex-direction: column;
    padding: 32px 24px 52px;
    min-height: auto;
    gap: 16px;
  }
  .s-hero__left { max-width: 100%; padding-top: 0; gap: 16px; }
  .s-hero__logo { width: 110px; }
  .s-hero__tag  { height: 48px; }
  .s-hero__tag span { font-size: 13px; }
  .s-hero__headline { font-size: 26px; }
  .s-hero__sub { font-size: 15px; max-width: 100%; }
  .btn-cta { width: 100%; height: 54px; font-size: 16px; align-self: stretch; }

  /* ── BIO ────────────────────────────────────────── */
  .s-bio__inner  { grid-template-columns: 1fr; min-height: auto; }
  .s-bio__photo  { height: 320px; min-height: 0; order: -1; }
  .s-bio__content { padding: 32px 24px 48px; justify-content: flex-start; }

  /* ── SERVICES ───────────────────────────────────── */
  .services-grid { flex-direction: column; align-items: center; }
  .service-card  { width: 100%; max-width: 370px; }

  /* ── RESULTS ────────────────────────────────────── */
  .s-results {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
  .s-results__bg {
    position: static;
    width: 100%;
    height: 72vw;
    min-height: 260px;
    max-height: 420px;
  }
  .s-results__bg img { object-position: center top; }
  .s-results__inner  {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 32px 24px 48px;
  }
  .s-results__left   { max-width: 100%; }
  .s-results__right  { flex-direction: column; align-items: flex-start; }
  .testimonial-card img { width: 100%; }
  .s-results__nav    { flex-direction: row; gap: 24px; justify-content: center; }

  /* ── CONTACT ────────────────────────────────────── */
  .contact-form  { max-width: 100%; }
  .form-grid     { grid-template-columns: 1fr; }
  .contact-info  { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* ── FAQ ────────────────────────────────────────── */
  .faq-list  { max-width: 100%; }
  .faq-btn   {
    height: auto;
    min-height: 56px;
    padding: 16px 20px;
    white-space: normal;
    line-height: 1.4;
  }
  .faq-answer.is-open { max-height: 300px; padding: 0 20px 20px; }
}