/* Home-only styles moved unchanged from pineverse.css. */
/* ════════════════════════════════════════════════
   ECOSYSTEM SECTION
════════════════════════════════════════════════ */
.ecosystem-section {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  height: 871px;
  border-radius: 32px;
  background: #A7FC00;
  position: relative;
  overflow: hidden;
  top: 30px;
}

.eco-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.eco-nav-pill {
  position: absolute;
  top: 28px;
  right: 40px;
  width: 281px;
  height: 77px;
  background: rgba(28, 28, 28, 0.28);
  backdrop-filter: blur(13.9px);
  -webkit-backdrop-filter: blur(13.9px);
  border-radius: 8.26px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  z-index: 10;
}

.eco-hamburger {
  width: 28px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 4px;
}

.eco-hamburger span {
  display: block;
  width: 28px;
  height: 2px;
  background: #021717;
  border-radius: 2px;
}

.eco-nav-btn {
  width: 155px;
  height: 53px;
  background: #021717;
  color: #A7FC00;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 116%;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  transition: opacity 0.2s;
}

.eco-nav-btn:hover { opacity: 0.85; }

.eco-content {
  position: absolute;
  top: 153px;
  /* Figma has the copy at x=136 → 1333; on the site gutter instead, so the
     band lines up with the hero above it and the slides below it */
  left: var(--pv-gutter);
  right: var(--pv-gutter);
  width: auto;
  max-width: none;
  z-index: 2;
}

.eco-tagline {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 116%;
  letter-spacing: 0;
  color: #000000;
  width: 650px;
  max-width: 100%;
}

.eco-divider {
  /* Figma: rule runs x=140 → 1333, i.e. 4px inset from the copy at x=136 */
  width: calc(100% - 4px);
  max-width: 1193px;
  height: 0;
  border: none;
  border-top: 1px solid #000000;
  margin: 41px 0 0 4px;
}

.eco-body {
  margin-top: 49px;
  width: 100%;
  max-width: 1197px;
}

.eco-body p {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 116%;
  letter-spacing: 0;
  color: #000000;
}

.eco-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 63px;
  width: 381px;
  height: 62px;
  border-radius: 72.63px;
  border: 0.59px solid #021717;
  background: #A7FC00;
  color: #021717;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 19.02px;
  font-weight: 400;
  line-height: 116%;
  text-decoration: none;
  padding: 0 0 0 37.2px;
  white-space: nowrap;
  transition: opacity 0.22s, transform 0.22s;
}

.eco-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.eco-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.eco-arrow-icon { width: 11.65px; height: 11.27px; display: block; }

.eco-cta-btn:hover .eco-cta-arrow { transform: translateX(4px); }

.eco-img-left,
.eco-img-right {
  position: absolute;
  width: 738.88px;
  height: 539px;
  top: 360px;
  overflow: hidden;
}

.eco-img-left { left: 0; }
.eco-img-right { left: 699.93px; }

.eco-img-left img,
.eco-img-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* ── Ecosystem Responsive ── */
@media (max-width: 1440px) {
  .ecosystem-section { border-radius: 24px; }
  .eco-img-left,
  .eco-img-right {
    width: 51.3vw;
    height: auto;
    aspect-ratio: 738.88 / 539;
  }
  .eco-img-right { left: 48.6vw; }
}

@media (max-width: 1280px) {
  .eco-content { left: var(--pv-gutter); right: var(--pv-gutter); }
  .eco-body p { font-size: 34px; }
}

@media (max-width: 960px) {
  .ecosystem-section { height: auto; min-height: 500px; border-radius: 20px; }
  .eco-nav-pill { top: 20px; right: 20px; width: 240px; height: 64px; }
  .eco-nav-btn { width: 130px; height: 44px; font-size: 14px; }
  .eco-content {
   position: revert;
    top: auto; left: auto; right: auto;
    width: 100%; max-width: 100%;
    padding: 32px var(--pv-gutter) 0;
  }
  .eco-tagline { font-size: 18px; width: 100%; }
  .eco-divider { margin-top: 20px; }
  .eco-body { margin-top: 28px; }
  .eco-body p { font-size: 24px; }
  .eco-cta-btn {
    margin-top: 36px;
    width: 100%; max-width: 340px;
    font-size: 15px; height: 54px;
    padding: 0 0 0 24px;
  }
  .eco-img-left,
  .eco-img-right {
   position: revert-rule;
    top: auto; left: auto;
    width: 100%; height: 220px;
    aspect-ratio: unset;
  }
  .eco-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
  }
}

@media (max-width: 560px) {
  .eco-body p { font-size: 20px; }
  .eco-tagline { 
   font-size: 35px;
  margin-top: 60px;
  }
  .eco-cta-btn { font-size: 14px; padding: 0 0 0 20px; }
  .eco-nav-pill { width: 200px; height: 56px; }
  .eco-nav-btn { font-size: 13px; width: 120px; height: 40px; }
}

/* ════════════════════════════════════════════════
   SERVICES STACK
════════════════════════════════════════════════ */
.services-stack {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  /* top: -30px; */
  z-index: -1;
}

.service-slide {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  transform-origin: center top;
  will-change: transform;
  backface-visibility: hidden;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0.116);

  /* Same lightship stacking as the Our Services slides (.sv-card):
     the covered slide scales back and lifts while the next one rises
     over it. JS only writes --sticky-progress 0→1 — see pineverse.js.
     With the script off the sticky stack still reads correctly. */
  border-radius: calc(var(--sticky-progress, 0) * 26px);
  transform:
    scale(calc(1 - var(--sticky-progress, 0) * 0.12))
    translate3d(0, calc(var(--sticky-progress, 0) * -3%), 0);
}

/* the covered slide also dims, so the stack reads as depth */
.service-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: #03100e;
  opacity: calc(var(--sticky-progress, 0) * 0.55);
}

.service-slide:not(:last-child) {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.service-slide .slide-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.service-slide .slide-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6,12,12,0.52);
  z-index: 1;
}

.service-slide .slide-content {
  position: absolute;
  left: var(--pv-gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.service-slide .slide-heading {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 116%;
  letter-spacing: 0;
  text-transform: capitalize;
  color: #ffffff;
  width: 499px;
  max-width: calc(100vw - 140px);
}

.service-slide .slide-heading em {
  font-family: 'Behind The Nineties', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: inherit;   /* inherits from parent slide-heading for correct scaling */
  line-height: 116%;
  color: #B7F66E;
}

.slide-bottom {
  position: absolute;
  bottom: 52px;
  left: var(--pv-gutter); right: var(--pv-gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.service-slide .slide-subtitle {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 140%;
  color: rgba(255,255,255,0.65);
  width: 455px;
  max-width: 50%;
  flex-shrink: 0;
}

.service-slide .slide-cta-btn {
  width: 381px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 72.63px;
  border: 0.59px solid #B7F66E;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: inline-flex;
  align-items: center;
  padding: 0 28px 0 37px;
  gap: 0;
  text-decoration: none;
  font-family: 'Host Grotesk', sans-serif;
  font-size: 19.02px;
  font-weight: 400;
  line-height: 116%;
  white-space: nowrap;
  color: #ffffff;
  transition: background 0.25s, transform 0.22s;
}

.slide-btn-text {
  background: linear-gradient(90deg, #ffffff, #B7F66E);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.slide-cta-arrow {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

.slide-arrow-icon { width: 45px; height: 11.27px; display: block; }

.service-slide .slide-cta-btn:hover {
  background: rgba(183,246,110,0.12);
  transform: translateY(-1px);
}

/* Stacking depends on transform + sticky; with reduced motion keep the
   sticky stack but drop the scale/translate so nothing moves under you. */
@media (prefers-reduced-motion: reduce) {
  .service-slide { transform: none; border-radius: 0; }
  .service-slide::after { opacity: 0; }
}

/* ── Services Responsive ── */
@media (max-width: 1280px) {
  .slide-bottom { right: var(--pv-gutter); }
  .service-slide .slide-cta-btn { width: 320px; }
}

@media (max-width: 960px) {
  .service-slide .slide-content { left: var(--pv-gutter); top: 42%; }
  .service-slide .slide-heading { font-size: 36px; width: calc(100vw - 56px); }
  .slide-bottom {
    left: var(--pv-gutter); right: var(--pv-gutter); bottom: 36px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .service-slide .slide-subtitle { max-width: 100%; width: 100%; }
  .service-slide .slide-cta-btn {
    width: 100%; font-size: 15px;
    height: 54px; padding: 0 0 0 24px;
  }
}

@media (max-width: 560px) {
  .service-slide .slide-heading { font-size: 50px; }
  .service-slide .slide-subtitle { font-size: 13px; }
  .service-slide .slide-cta-btn { font-size: 14px; padding: 0 0 0 20px; }
}

/* ════════════════════════════════════════════════
   PROBLEM SECTION
════════════════════════════════════════════════ */
.problem-section {
  background: #F5FAF0;
  /* Figma: content 85 → 1355 */
  padding: 80px var(--pv-gutter) 85px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible;
}

/* ── Section Tag ── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: 302px;
  height: 51px;
  background: #E5FFE5;
  border-radius: 7px;
  padding: 0 18px;
  flex-shrink: 0;
  align-self: flex-start;
}

.section-tag-dot {
  display: inline-block;
  width: 15px;
  height: 13px;
  background: #B7F66E;
  border-radius: 3px;
  flex-shrink: 0;
}

.section-tag-label {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 116%;
  color: #021717;
  white-space: nowrap;
}

/* ── Top Row ── */
.problem-top {
  display: flex;
  align-items: flex-start;
  /* Figma: tag ends x=385, heading column starts x=551 → 166px gutter */
  gap: clamp(40px, 11.55vw, 166px);
  padding-bottom: 170px;
}

.problem-heading-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.problem-heading {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 116%;
  letter-spacing: 0%;
  color: #021717;
  max-width: 793px;
}

.problem-accent { color: #2D8C6E; }

.problem-subtext {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 116%;
  color: #021717;
  max-width: 648px;
}

/* ── Bottom Block ── */
.problem-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  position: relative;
  overflow: visible;
}

.problem-changes-text {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 48px;
  line-height: 116%;
  text-align: right;
  width: 352px;
  /* Figma: block ends x=1312, i.e. 44px inside the green card's right edge (1356) */
  margin-right: 44px;
  margin-bottom: 0;
  padding-bottom: 100px;
  align-self: flex-end;
  position: relative;
  z-index: 2;
}

.problem-changes-text em {
  font-weight: 700;
  font-style: italic;
  color: #18C03D;
  display: block;
}

.problem-changes-text span {
  font-weight: 400;
  font-style: normal;
  color: #3D5050;
  display: block;
}

/* ── Green Card ── */
/* ── Green Card ── */
.problem-card {
  width: 100%;
  min-height: 400px;
  background: #B7F66E;
  border-radius: 24px;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-end;
}

/* ✅ FIXED — GIF is full card width, phones overflow top naturally */
.problem-card-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
  z-index: 2;
  /* No right/max-width/transform — GIF khud full width lega */
}

/* Text — bottom-left */
.problem-card-body {
  position: relative;
  z-index: 3;
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 116%;
  color: #021717;
  max-width: 402px;
  padding: 0 0 54px 54px;
  align-self: flex-end;
}

/* ── Problem Responsive ── */
@media (max-width: 1280px) {
  .problem-section { padding: 60px var(--pv-gutter); }
  .problem-heading { font-size: 40px; }
  .problem-changes-text { font-size: 40px; }
  .problem-card { min-height: 400px; }
  .problem-card-img { width: 100%; left: 0; right: auto; }
}

@media (max-width: 960px) {
  .problem-section { padding: 48px var(--pv-gutter) 0; }
  .problem-top { 
    flex-direction: column; 
    gap: 32px;
    padding-bottom: 50px; 
  }
  .section-tag { width: auto; padding: 0 16px; }
  .problem-heading { font-size: 32px; }
  .problem-subtext { font-size: 18px; }
  .problem-changes-text 
  { font-size: 32px; 
    width: auto; 
    padding-bottom: 50px;
  }

  /* ── Stacked layout: GIF upar, text neeche ── */
  .problem-card {
    min-height: unset;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  .problem-card-img {
    position: relative;
    bottom: auto;
    left: auto;
    width: 70%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
  }
  .problem-card-body {
    position: relative;
    z-index: 3;
    padding: 24px 32px 32px 32px;
    max-width: 100%;
    font-size: 16px;
    align-self: unset;
    text-align: left;
  }
}

@media (max-width: 560px) {
  .problem-section { padding: 40px var(--pv-gutter) 0; }
  .problem-heading { font-size: 26px; }
  .problem-subtext { font-size: 16px; }
  .problem-changes-text { font-size: 48px; }

  /* ── Stacked layout: GIF upar, text neeche ── */
  .problem-card {
    min-height: unset;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  .problem-card-img {
    position: relative;
    bottom: auto;
    left: auto;
    width: 65%;
    max-width: 260px;
    display: block;
    margin: 0 auto;
  }
  .problem-card-body {
    position: relative;
    z-index: 3;
    padding: 20px 20px 28px 20px;
    max-width: 100%;
    font-size: 14px;
    align-self: unset;
    text-align: left;
  }
}

/* ════════════════════════════════════════════════
   GROWTH ENGINE SECTION
════════════════════════════════════════════════ */
.growth-section {
  background: #021717;
  /* Figma: copy starts x=83, card column ends x=1360 (gutter 80) */
  padding: 92px var(--pv-gutter) 100px;
  width: 100%;
}

.growth-container {
  display: grid;
  /* Figma: right column is a fixed 571px block starting at x=789 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 571px);
  column-gap: clamp(32px, 4vw, 60px);
  align-items: start;
}

/* ── Section Tag (growth variant) ── */
.growth-tag {
  background: #A7FC00 !important;
  /* width: fit-content !important; */
  min-width: 0 !important;
  padding: 0 18px !important;
  margin-bottom: 32px;
}
.growth-tag .section-tag-dot {
  background: #ffffff !important;
}
.growth-tag .section-tag-label {
  color: #021717 !important;
}

/* ── Left Column ── */
.growth-left {
  display: flex;
  flex-direction: column;
}

.growth-heading {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 116%;
  letter-spacing: -0.02em;
  text-transform: capitalize;
  color: #ffffff;
}

.growth-heading em {
  font-family: 'Behind The Nineties', sans-serif;
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0;
  color: #ffffff;
}

/* ── Right Column ── */
.growth-right {
  display: flex;
  flex-direction: column;
  gap: 50px;            /* Figma annotation: 50px gap between subtext & first card */
  padding-top: 83px;    /* Aligns subtext with heading: section-tag 51px + growth-tag margin-bottom 32px */
}

.growth-subtext {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 116%;
  color: rgba(255, 255, 255, 0.85);
  max-width: 451px;
}

/* ── Base Card ── */
.growth-card {
  width: 100%;
  height: 172px;
  border-radius: 14.25px;
  display: flex;
  align-items: center;
  padding: 19px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, background 0.3s ease, border-color 0.3s ease;
}

/* ── BOTH cards: dark by default ── */
.growth-card--green,
.growth-card--dark {
  background: #071e1e;
  border: 1px solid rgba(183, 246, 110, 0.1);
}

/* ── BOTH cards: hover = green ── */
.growth-card--green:hover,
.growth-card--dark:hover {
  background: #A7FC00;
  border-color: #A7FC00;
  transform: translateY(-2px);
}

/* ── Card photo ── */
.growth-card-img {
  width: 152px;
  height: 137px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.growth-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.growth-card:hover .growth-card-img img {
  transform: scale(1.04);
}

/* ── Card text ── */
.growth-card-content {
  flex: 1;
  min-width: 0;
  padding: 0 0 0 18px;
  align-self: flex-start;
}

.growth-card-title {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 116%;
  margin-bottom: 10px;
  color: #ffffff;
  transition: color 0.3s ease;
}

.growth-card--green:hover .growth-card-title,
.growth-card--dark:hover .growth-card-title {
  color: #101010;
}

.growth-card-desc {
  font-family: 'Host Grotesk', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 127%;
  color: rgba(255, 255, 255, 0.70);
  transition: color 0.3s ease;
}

.growth-card--green:hover .growth-card-desc,
.growth-card--dark:hover .growth-card-desc {
  color: rgba(16, 16, 16, 0.82);
}

/* ── Arrow button ── */
.growth-card-arrow {
  position: absolute;
  bottom: 19px;
  right: 37px;
  width: 28px;
  height: 27px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #B7F66E;
  transition: transform 0.2s ease, background 0.3s ease;
}

.growth-card:hover .growth-card-arrow {
  transform: translate(2px, -2px);
}

.growth-card--green:hover .growth-card-arrow,
.growth-card--dark:hover .growth-card-arrow {
  background: #000000;
}

.growth-card-arrow img {
  width: 11.65px;
  height: 11.27px;
  display: block;
  /* transform: rotate(-45deg); */
  filter: invert(1) brightness(0);
  transition: filter 0.3s ease;
}

.growth-card--green:hover .growth-card-arrow img,
.growth-card--dark:hover .growth-card-arrow img {
  filter: none;
}

/* ══ GROWTH RESPONSIVE ══════════════════════════ */
@media (max-width: 1280px) {
  .growth-section   { padding: 80px var(--pv-gutter) 90px; }
  .growth-container { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
  .growth-heading   { font-size: 40px; }
  .growth-subtext   { font-size: 20px; }
  .growth-card      { height: 160px; }
  .growth-card-img  { width: 130px; height: 117px; }
  .growth-right     { padding-top: 71px; gap: 40px; } /* scale with smaller tag/margin at this bp */
}

@media (max-width: 1024px) {
  .growth-section   { padding: 72px var(--pv-gutter) 80px; }
  .growth-container { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); column-gap: 40px; }
  .growth-heading   { font-size: 36px; }
  .growth-right     { padding-top: 71px; gap: 32px; }
}

@media (max-width: 960px) {
  .growth-section     { padding: 64px var(--pv-gutter) 72px; }
  .growth-container   { grid-template-columns: 1fr; row-gap: 40px; }
  .growth-heading     { font-size: 36px; }
  .growth-subtext     { font-size: 18px; max-width: 100%; }
  .growth-right       { padding-top: 0; gap: 24px; } /* single-column: no offset needed */
  .growth-card        { height: auto; min-height: 150px; }
  .growth-card-img    { width: 130px; height: 115px; }
  .growth-card-arrow  { right: 16px; bottom: 16px; }
}

@media (max-width: 640px) {
  .growth-section      { padding: 48px var(--pv-gutter) 60px; }
  .growth-heading      { font-size: 30px; }
  .growth-subtext      { font-size: 16px; }
  .growth-right        { gap: 16px; }
  .growth-card         { height: auto; min-height: auto; flex-direction: column; align-items: flex-start; padding: 16px; padding-bottom: 56px; }
  .growth-card-img     { width: 100%; height: 150px; }
  .growth-card-content { padding: 14px 0 0 0; }
  .growth-card-arrow   { right: 16px; bottom: 16px; }
}

@media (max-width: 400px) {
  .growth-section   { padding: 40px var(--pv-gutter) 48px; }
  .growth-heading   { font-size: 26px; }
  .growth-tag       { margin-bottom: 24px; }
}

/* ════════════════════════════════════════════════
   INTRO VIDEO SECTION
════════════════════════════════════════════════ */
.intro-video-section {
  width: 100%;
  max-width: 1444px;
  margin: 0 auto;
  height: 812px;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
}

.intro-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-vid{
background-color: #FFFFFF;
}

/* ── Responsive ── */
@media (max-width: 1440px) {
  .intro-video-section {
    height: auto;
    aspect-ratio: 1444 / 812;
    border-radius: 20px;
  }
}

@media (max-width: 960px) {
  .intro-video-section {
    border-radius: 16px;
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 560px) {
  .intro-video-section {
    border-radius: 12px;
    aspect-ratio: 16 / 9;
  }
}

/* contact css */
/* ══════════════════════════════════════════════════════
   HERO — SPLINE POINTER PASS-THROUGH

   The Spline scene reacts to the mouse, but only the LEFT
   half of the banner was responding. Reason: `.hero-left`
   is unpositioned, so it paints *below* the positioned
   `.spline-bg` (z-index 0) and hit-testing falls through
   to the canvas — while `.cards-wrap` is
   `position: relative; z-index: 1` and was covering the
   entire right half of the scene.

   So the columns go transparent to the pointer and only
   the pieces that are actually interactive take it back.
══════════════════════════════════════════════════════ */
.cards-wrap { pointer-events: none; }
.card,
.cards-wrap a,
.cards-wrap button { pointer-events: auto; }

/* `.nav-group` was a wrapper used while the header still held four nav
   links. The header is now the `.eco-nav-pill` component (hamburger +
   Partner button, links moved into the drawer), so the wrapper is gone
   from the markup — see the SITE HEADER block at the end of this file. */


/* ══════════════════════════════════════════════════════
   HOMEPAGE — PHONE
   Figma 1630:49 "iPhone 16 & 17 Pro - 1"  (402 × 9665)

   Values are the Figma pixels off the 402 canvas. Widths
   are expressed as gutters + auto so the same layout also
   holds at 320–560; only the type sizes are fixed, which
   is what the design intends.

   Section map (Figma y):
     hero        0 – 710      cards      770 – 994
     ecosystem   1025 – 1759  slides    1716 – 3396
     problem     3467 – 4300  growth    4361 – 6264
     video       6264 – 6489  contact   6489 – 7850
     events      7959 – 8427  faq       8516 – 9224
══════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  /* ── Header — logo 1630:92, group 1630:429 ─────────── */
  header {
    height: 118px;                 /* logo centre y = 42 + 34/2 = 59 */
    align-items: center;           /* gutter comes from --pv-gutter */
  }

  .logo-img { width: 136px; height: 34px; object-fit: contain; }

  /* The phone pill (142 × 38.91, Figma 1630:429) is now sized in the
     SITE HEADER block at the end of this file, together with the desktop
     pill — one component, one place. Nothing to override here. */

  /* ── Hero — 1630:83 (0–710) + 1630:435 (black, to 1058) ─ */
  .hero {
    display: block;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background: #000000;
  }

  /* ── The 3D scene ──────────────────────────────────
     Leave it exactly as the base rule has it: top/left 0, 100% × 100% of the
     hero, no transform. The scene's own framing is correct at this box —
     measured off the design: on desktop the formation is 330 × 375 CSS in a
     1425 × 900 canvas, i.e. Spline keeps a fixed VERTICAL field of view, so
     the render scale follows canvas HEIGHT and the width just widens the
     window. At 402 × ~874 that puts the formation at roughly 318 × 364 —
     it fits, with room to spare.

     The reason it looked magnified and cropped on a phone was NOT the box
     size or the aspect: `spline-viewer` measures its canvas once when it
     initialises, and on phones `.hero` is `height: auto`, so it could
     initialise against a box that had not reached its final height yet and
     then stretch a small render buffer over a tall element. Hence:

       • `height: 100dvh` — a DEFINITE height at first layout, not a
         percentage of an auto-height parent. Do not change this back to
         `height: 100%`.
       • pineverse.js nudges the viewer to re-measure after load — see the
         "SPLINE — force a re-measure" block there.

     Do NOT give this a wide fixed size plus `transform: scale()`. That was
     tried and it is wrong twice over: it did not fix the render, and the
     oversized canvas pushed 75px of horizontal scroll onto the page, which
     dragged the fixed header sideways.                                    */
  .spline-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    transform: none;
    pointer-events: none;          /* no hover on touch — don't eat taps */
  }

  /* fallback for browsers without dvh — still definite, still not a % */
  @supports not (height: 100dvh) {
    .spline-bg { height: 100vh; }
  }

  .hero-left {
    display: block;
    position: relative;
    z-index: 1;
    height: auto;
    padding: 581px 0 0 0;          /* 1630:117 y = 581 */
  }

  .hero-heading {
    margin: 0 0 0 38px;
    max-width: 261px;
    font-size: 32px;
    line-height: 1.156;
  }

  /* the desktop copy is broken into three forced lines; the phone
     design (1630:117) is two, wrapped naturally inside 261px */
  .hero-heading br { display: none; }

  .hero-subtitle {
    margin: 31px 0 0 33px;         /* heading bottom 655 → 686 */
    max-width: 266px;
    font-size: 11px;
    line-height: 1.156;
    color: #ffffff;
  }

  /* ── Hero cards — 1630:88 / 1630:84 ────────────────── */
  .cards-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    gap: 14.56px;                  /* 889 − 874.44 */
    padding: 45px 0 0 0;           /* subtitle bottom 725 → 770 */
  }

  .card {
    width: calc(100% - 70px);
    max-width: 332px;
    height: 104.7px;
    min-height: 0;
    padding: 14.3px;
    gap: 0;
    align-items: flex-start;
    border: 0;
    border-radius: 10.726px;
    background: linear-gradient(68.04deg,
                rgba(255, 255, 255, 0.14) 15.09%,
                rgba(183, 246, 110, 0.14) 116.78%);
  }

  .card:hover { transform: none; }

  .card-body { flex: 0 1 auto; max-width: 177px; }

  .card-title {
    margin-bottom: 11.25px;
    font-size: 13.55px;
    font-weight: 700;
    line-height: 1.156;
    color: #696969;
  }

  .card-desc { font-size: 11.29px; line-height: 1.27; color: #ffffff; }

  .card-thumb {
    width: 114.1px;
    height: 76.16px;
    margin-left: auto;
    border-radius: 9.032px;
  }

  /* ── Ecosystem — 1630:120 (1025–1759) ──────────────── */
  .ecosystem-section {
    height: auto;
    min-height: 0;
    border-radius: 0;
  }

  .eco-content { padding: 97px var(--pv-gutter) 137px; }   /* 1122 − 1025 */

  .eco-tagline {
    max-width: 175px;
    font-size: 13px;
    line-height: 1.6;
    color: #000000;
  }

  .eco-divider { margin-top: 17px; width: 297px; max-width: 100%; }

  .eco-body { margin-top: 33px; }

  .eco-body p {
    max-width: 301px;
    font-size: 20px;
    line-height: 1.45;
    color: #000000;
  }

  .eco-cta-btn {
    margin-top: 41px;
    width: 296px;
    max-width: 100%;
    height: 48.17px;
    padding: 0 28.44px;
    border-radius: 56.425px;
    border: 0.459px solid #021717;
    background: #a7fc00;
    font-size: 14.77px;
  }

  /* ── Service slides — 1630:533 / :64 / :74 (560 each) ─ */
  .service-slide {
    height: 560px;
    min-height: 0;
    max-height: none;
  }

  .service-slide .slide-content {
    top: auto;
    bottom: 136px;                 /* heading box bottom at 424 of 560 */
    left: var(--pv-gutter);
    right: var(--pv-gutter);
    transform: none;
  }

  .service-slide .slide-heading {
    width: auto;
    max-width: 233px;
    font-size: 20px;
    line-height: 1.156;
  }

  .slide-bottom {
    left: var(--pv-gutter);
    right: var(--pv-gutter);
    bottom: 39px;                  /* CTA bottom 520.6 of 560 */
    flex-direction: column;
    align-items: flex-start;
    gap: 19px;
  }

  .service-slide .slide-subtitle {
    width: auto;
    max-width: 286px;
    font-size: 11px;
    line-height: 1.27;
  }

  .service-slide .slide-cta-btn {
    width: 237px;
    max-width: 100%;
    height: 38.57px;
    padding: 0 20px 0 23px;
    font-size: 11.83px;
  }

  .slide-arrow-icon { width: 26px; height: 7px; }

  /* ── Problem — 1630:216 … 1630:225 ─────────────────── */
  .problem-section { padding: 60px var(--pv-gutter) 70px; text-align: center; }
  .problem-top, .problem-bottom { display: block; }

  .section-tag {
    width: 238px;
    max-width: 100%;
    height: 47px;
    margin: 0 auto;
    justify-content: center;
  }

  .section-tag-label { font-size: 12px; }

  .problem-heading-wrap { margin-top: 39px; }   /* 3514 → 3553 */

  .problem-heading {
    margin: 0 auto;
    max-width: 318px;
    font-size: 20px;
    line-height: 1.156;
    text-align: center;
    color: #021717;
  }

  .problem-accent { color: #1c5858; }

  .problem-subtext {
    margin: 39px auto 0;
    max-width: 238px;
    font-size: 14px;
    line-height: 1.156;
    text-align: center;
  }

  .problem-card { margin-top: 57px; width: 100%; }
  .problem-card-img { width: 100%; height: auto; border-radius: 16px; }

  .problem-changes-text {
    margin: 56px auto 0;
    max-width: 290px;
    font-size: 18px;
    line-height: 1.16;
    text-align: center;
  }

  .problem-card-body {
    margin: 39px auto 0;
    max-width: 266px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
  }

  /* ── Growth — 1630:51 (4361–6264) ──────────────────── */
  .growth-section { padding: 61px var(--pv-gutter) 0; }
  .growth-container { display: block; }
  .growth-left, .growth-right { width: 100%; }

  .growth-tag {
    width: 201px;
    height: 51px;
    margin: 0 auto;
    justify-content: center;
  }

  .growth-heading {
    margin: 56px auto 0;           /* 4473 → 4529 */
    max-width: 242px;
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.16;
    letter-spacing: -0.02em;
    text-align: center;
    color: #fefdfa;
  }

  .growth-subtext {
    margin: 39px auto 0;           /* 4587 → 4626 */
    max-width: 219px;
    font-size: 13px;
    line-height: 1.16;
    text-align: center;
  }

  .growth-card {
    width: 100%;
    max-width: 365px;
    height: auto;
    margin: 0 auto;
    padding: 19px 19px 30px;
    border-radius: 14.25px;
  }

  .growth-right { display: flex; flex-direction: column; gap: 30px; margin-top: 86px; }

  .growth-card-img {
    width: 100%;
    height: 137px;
    border-radius: 12px;
    object-fit: cover;
  }

  .growth-card-title {
    margin: 30px 0 0 13px;         /* img bottom 156 → title 186 */
    font-size: 15px;
    font-weight: 700;
    line-height: 1.156;
  }

  .growth-card-desc {
    margin: 13px 0 0 13px;         /* 186 + 17 → 214 */
    font-size: 13px;
    line-height: 1.27;
  }

  .growth-card-arrow {
    width: 28px;
    height: 27px;
    border-radius: 2px;
    margin-left: auto;
  }

  /* ── Intro video — 1630:546 (400 × 225) ────────────── */
  .intro-vid, .intro-video-section { padding: 0; }
  .intro-video { width: 100%; height: auto; aspect-ratio: 400 / 225; object-fit: cover; }

  /* ── Contact — 1630:548 (6489–7850) ────────────────── */
  .contact-section { padding: 53px var(--pv-gutter) 60px; }   /* 6489 → 6542 */
  .contact-container { display: block; }
  .contact-left, .contact-right { width: 100%; max-width: 100%; }
  .contact-divider { display: none; }

  .contact-heading { font-size: 24px; line-height: 1.156; }

  .contact-info-item { margin-top: 30px; }
  .contact-info-label { font-size: 14px; }
  .contact-info-text  { font-size: 11px; line-height: 1.45; }
  .contact-icon { width: 17px; height: 17px; }

  .contact-map-card { width: 100%; margin-top: 28px; }

  .contact-right { margin-top: 42px; }
  .contact-form-heading { font-size: 16px; line-height: 1.2; }

  .contact-tabs { margin-top: 30px; }
  .contact-tab  { font-size: 13px; padding: 14px 0; }

  .cf-row { display: block; }
  .cf-field, .cf-field--half { width: 100%; margin-top: 34px; }
  .cf-label { font-size: 11px; }
  .cf-input, .cf-selected-text, .cf-code { font-size: 15px; }

  .cf-submit { width: 142px; height: 39.6px; font-size: 12px; margin-top: 52px; }

  /* ── Events — 1630:231 / 1630:232 ──────────────────── */
  .events-section { padding: 60px 0 60px; }

  .events-heading-wrap { padding: 0 var(--pv-gutter); }

  .events-heading {
    margin: 0 auto;
    max-width: 214px;
    font-family: 'Host Grotesk', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.156;
    text-align: center;
  }

  .events-slider-outer { margin-top: 112px; padding: 0 42px; }   /* 7959+46 → 8071 */

  .event-card { width: 317px; min-width: 317px; height: 356px; }
  .event-card-img-wrap { margin: 24.5px 29.8px 0; height: 175px; }
  .event-card-date  { margin: 17px 29.8px 0; font-size: 12px; }
  .event-card-title { margin: 15px 29.8px 0; max-width: 233px; font-size: 14px; line-height: 1.3; }

  .events-nav { margin-top: 28px; padding: 0 var(--pv-gutter); }

  /* ── FAQ — 1630:613 … 1634:664 ─────────────────────── */
  .faq-section { padding: 60px var(--pv-gutter) 70px; }

  .faq-pill {
    width: 111px;
    height: 32px;
    margin: 0 auto;
    justify-content: center;
    font-size: 11px;
  }

  .faq-heading {
    margin: 47px auto 0;           /* 8548 → 8595 */
    max-width: 317px;
    font-size: 16px;
    line-height: 1.217;
    text-align: center;
    color: #414141;
  }

  .faq-list { margin-top: 34px; display: flex; flex-direction: column; gap: 20px; }

  .faq-trigger {
    min-height: 50px;
    padding: 14px 18px 14px 17px;
    font-size: 13px;
    line-height: 1.217;
    color: #414141;
  }

  .faq-icon { width: 19px; height: 19px; flex: 0 0 auto; }

  .faq-body-inner {
    padding: 0 20px 22px 17px;
    max-width: 275px;
    font-size: 12px;
    line-height: 1.45;
  }

  /* the sticky stack is a phone-hostile pattern at 560px:
     keep the slides stacked but stop them shrinking */
  .service-slide { border-radius: 0; }
  .service-slide::after { opacity: calc(var(--sticky-progress, 0) * 0.4); }
}

/* Very small phones — keep the Figma rhythm, just let the
   fixed-width pieces shrink instead of overflowing. */
@media (max-width: 380px) {
  .hero-heading { font-size: 28px; }

  .hero-left { padding-top: 520px; }
  /* .spline-bg is deliberately NOT touched here — see the note in the 560px
     block. It stays at the base 100% × 100%. */
  .card { width: calc(100% - 40px); }
  .eco-content { padding-left: var(--pv-gutter); padding-right: var(--pv-gutter); }
  .service-slide .slide-content,
  .slide-bottom { left: var(--pv-gutter); right: var(--pv-gutter); }
  .contact-section { padding-left: var(--pv-gutter); padding-right: var(--pv-gutter); }
  .event-card { width: 280px; min-width: 280px; height: 330px; }
  .events-slider-outer { padding: 0 22px; }
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE — SECTION RHYTHM

   The homepage had grown five different section paddings
   (80 / 85 / 90 / 92 / 100), so every gap down the page
   was a slightly different size. They all use the one
   token now, exactly like About and Our Services.

   These are LONGHANDS on purpose: each section's own rule
   sets padding with a shorthand that also carries its
   Figma horizontal gutters, and those must survive. Only
   the vertical halves are overridden here.

   Last in the file, so it also wins over the vertical
   values inside the earlier responsive blocks — media
   queries add no specificity, only source order counts.

   Full-bleed bands (hero, ecosystem, services-stack,
   intro-vid) stay at 0: they are edge-to-edge visuals and
   their neighbours' padding supplies the gap. That gives
   240px between two padded sections and 120px either side
   of a band — the same convention the About page's
   overlapping cards resolve to.
══════════════════════════════════════════════════════ */
.problem-section,
.growth-section,
.contact-section,
.events-section,
.faq-section {
  padding-top: var(--pv-section);
  padding-bottom: var(--pv-section);
}

/* ── Events is the one exception, and for a reason ──
   Its last child is `.events-nav` — two 48px carousel arrows pinned to the
   far left. They are a CONTROL, not a content block, so they read as part of
   the empty band rather than as the end of the section. Paying the full token
   *below* them made the visible gap from the last card's painted edge to the
   FAQ pill 320px, against 240px at every other boundary:

     card edge → 32 (nav padding-top) + 48 (arrows) + 120 + 120 = 320

   So the arrows live INSIDE the section's trailing rhythm space instead of
   adding their height on top of it: subtract their footprint and the boundary
   comes back to 240, without the token itself changing.

     card edge → 32 + 48 + 40 + 120 = 240                                  */
.events-section {
  --pv-nav-h: 80px;                            /* .events-nav's own height */
  padding-bottom: max(24px, calc(var(--pv-section) - var(--pv-nav-h)));
}