:root {
  --bg: #fff7e9;
  --orange: #af4c25;
  --green: #235c4e;
  --green-deep: #0b3229;
  --green-bar: #1e5b4f;
  --lime: #d2eb7d;
  --text: #332115;
  --white: #ffffff;
  --page-max: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #212222;
  color: var(--text);
  font-family: "Lato", sans-serif;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

.landing {
  width: 100%;
  background: var(--bg);
}

.section-observe {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.section-observe.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero,
.intro,
.feature,
.investment,
.panorama,
.closing,
.footer {
  position: relative;
}

/* ─── HERO ─── */
.hero {
  height: clamp(500px, 45vw, 720px);
  overflow: hidden;
  background: #102923;
}

.hero__media,
.hero__media img,
.hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media img {
  object-fit: cover;
  object-position: center 80%; /* Anchor to the bottom area to show hands better */
}

.hero__shade {
  background:
    linear-gradient(180deg, rgba(12, 33, 28, 0.18) 0%, rgba(12, 33, 28, 0.22) 54%, rgba(12, 33, 28, 0.38) 100%),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.12), transparent 20%);
}

.hero__brand-mobile {
  position: absolute;
  top: 14.4%;
  left: 50%;
  z-index: 1;
  width: min(83.4vw, 480px);
  transform: translateX(-50%);
}

.hero__brand--desktop {
  display: none;
}

/* ─── INTRO ─── */
.intro {
  position: relative;
  z-index: 5;
  margin-top: -120px;
}

.intro__panel {
  position: relative;
  z-index: 2;
}

.intro__art {
  position: relative;
  width: 100%;
  pointer-events: none;
}

.intro__asset {
  position: absolute;
}

.intro__asset--palm {
  top: -40px;
  right: -13%;
  width: 31%;
  z-index: 6;
}

.intro__asset--woman {
  left: -7%;
  top: -60px;
  width: 42.5%;
  z-index: 6;
}

.intro__asset--figs {
  left: 15%;
  bottom: -4%;
  width: 57%;
  z-index: 3;
}

.intro__asset--flower {
  right: -5%;
  bottom: -2%;
  width: 32%;
  z-index: 2;
} 

.intro__fullwidth {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.intro__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: min(80%, 400px);
  text-align: center;
}

.intro__copy p {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
}

/* ─── FEATURE CARDS ─── */
.feature__card {
  position: relative;
  overflow: hidden;
}

.feature__copy {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  text-align: center;
}

.feature__copy h2,
.investment__copy h2 {
  margin: 0 0 18px;
  font-family: "Sora", sans-serif;
  font-size: clamp(2rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.feature__copy p,
.investment__copy p {
  margin: 0;
  font-size: 18px;
  line-height: 22px;
}

.feature__copy p + p {
  margin-top: 12px;
}

.feature__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.44;
}

/* Innovation card */
.feature__card--orange {
  min-height: 401px;
  background: var(--orange);
  color: var(--bg);
}

.feature--innovation .feature__card--orange {
  background: transparent;
  position: relative;
}

.feature--innovation .feature__pattern {
  opacity: 1;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 0;
}

.feature--innovation .feature__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  padding: 0;
  z-index: 1;
}

.feature__card--orange .feature__copy {
  width: min(63%, 362px);
  padding: 44px 0 34px;
}

/* Support card */
.feature__card--lime {
  min-height: 371px;
  background: var(--lime);
  color: var(--green);
}

.feature--support .feature__card--lime {
  background: transparent;
  position: relative;
}

.feature--support .feature__pattern {
  opacity: 1;
  position: relative;
  width: 100%;
  height: auto;
  z-index: 0;
}

.feature--support .feature__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  padding: 0;
  z-index: 1;
}

.feature__card--lime .feature__copy {
  width: min(76.4%, 440px);
  padding: 42px 0 34px;
}

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

.feature--innovation .feature__media img {
  aspect-ratio: 576 / 370;
}

.feature--support .feature__media img {
  aspect-ratio: 577 / 485;
  object-position: center top;
}

/* Support pattern */
.support-pattern {
  position: absolute;
  inset: -42% -1% -46% -1%;
  opacity: 0.44;
  pointer-events: none;
}

.support-pattern__piece {
  position: absolute;
  height: auto;
}

.support-pattern__piece--1 {
  top: 0;
  left: 25.11%;
  width: 48.18%;
}

.support-pattern__piece--2 {
  top: 18.47%;
  left: 34.96%;
  width: 65.04%;
}

.support-pattern__piece--3 {
  top: 30.92%;
  left: 51.04%;
  width: 39.78%;
}

.support-pattern__piece--4 {
  top: 59.13%;
  left: 10.4%;
  width: 64.7%;
}

.support-pattern__piece--5 {
  top: 19.45%;
  left: 0;
  width: 50.39%;
}

/* ─── SEQUENCE (panorama + investment) ─── */
.sequence {
  display: flex;
  flex-direction: column;
}

.investment {
  order: 1;
  position: relative;
  min-height: auto;
  overflow: hidden;
  background: transparent;
  color: var(--bg);
  z-index: 5;
}

.investment__pattern {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.investment__pattern--mobile {
  top: -5%;
  left: -7%;
  width: 114%;
  opacity: 0.95;
}

.investment__pattern--desktop {
  display: none;
}

.investment__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(90%, 384px);
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ─── PANORAMA ─── */
.panorama {
  order: 2;
}

.panorama img {
  width: 100%;
  aspect-ratio: 576 / 435;
  object-fit: cover;
}

/* ─── CLOSING ─── */
.closing {
  position: relative;
  min-height: 499px;
  background: transparent;
  z-index: 6;
}

.closing__bg,
.closing__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.closing__bg img {
  object-fit: cover;
  object-position: center top;
}

.closing__cutout {
  position: absolute;
  left: -8%;
  bottom: -1%;
  width: 114%;
  max-width: none;
}

/* ─── FOOTER ─── */
.footer {
  background: var(--green-deep);
  color: var(--white);
}

.footer__top {
  position: relative;
  overflow: hidden;
  padding: 86px 0 46px;
  background: var(--green-deep);
}

.footer__wave {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translateX(-50%);
}

.footer__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.footer__content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}

.footer__brand-social {
  width: min(45.3vw, 261px);
}

.footer__bar {
  position: relative;
  z-index: 1;
  background: var(--green-bar);
  padding: 24px 18px;
}

.footer__gov {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.footer__gov img:first-child {
  width: 32px;
}

.footer__gov img:nth-child(2) {
  width: 66px;
}

.footer__gov img:nth-child(3) {
  width: 92px;
}

/* ════════════════════════════════════════════════════
   DESKTOP (≥ 768px) — Pixel-perfect Figma match
   ════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  /* ─── HERO ─── */
  .hero {
    height:1000px;
  }

  .hero__brand-mobile {
    display: none;
  }

  .hero__brand--desktop {
    position: absolute;
    top: -5%;
    left: 50%;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 12px;
    transform: translateX(-50%);
    text-align: center;
  }

  .hero__full-logo {
    width: 85vw;
    max-width: 2200px;
    height: auto;
    display: block;
  }

  /* ─── INTRO ─── */
  .intro {
    margin-top: -180px;
  }

  .intro__wave {
    position: relative;
    z-index: 1;
    width: 121.25%;
    margin: 0 0 0 -7.95%;
  }

  .intro__panel {
    /* controlled by image */
  }

  .intro__asset--palm {
    top: -80px;
    right: -2%;
    width: min(12.3%, 176px);
    z-index: 6;
  }

  .intro__asset--woman {
    left: -2.4%;
    top: -120px;
    width: min(25.8%, 372px);
    z-index: 6;
  }

  .intro__asset--figs {
    left: 18.2%;
    bottom: -4px;
    width: min(23.8%, 343px);
  }

  .intro__asset--flower {
    right: -1.3%;
    bottom: 2px;
    width: min(20.5%, 296px);
  }

  .intro__copy {
    width: min(44.2%, 636px);
  }

  .intro__fullwidth {
    /* Natural positioning */
  }

  .intro__copy p {
    font-size: 30px;
    line-height: 42px;
  }

  /* ─── FEATURE: INNOVATION ─── */
  .feature {
    display: grid;
    width: 100%;
  }

  .feature--innovation {
    display: block;
    min-height: 480px;
  }

  .feature__card--orange {
    position: relative;
    min-height: 480px;
  }

  .feature__card--orange .feature__copy {
    width: 410px;
    /* other styling if any */
  }

  .feature--innovation .feature__copy {
    left: 25%;
    padding: 0;
  }

  .feature__copy h2 {
    margin-bottom: 22px;
    font-size: clamp(3rem, 5vw, 4.5rem);
  }

  .feature__media img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* ─── FEATURE: SUPPORT ─── */
  .feature--support {
    display: block;
    min-height: auto;
  }

  .feature--support .feature__card {
    order: unset;
  }

  .feature__card--lime {
    position: relative;
    min-height: auto;
    border-radius: 0 10px 10px 0;
  }

  .feature--support .feature__copy {
    position: absolute;
    top: 50%;
    left: 79%;
    transform: translate(-50%, -50%);
    width: 440px;
    padding: 0;
  }

  .feature--support .feature__copy h2 {
    margin-left: -40px;
  }

  .feature--support .feature__copy p {
    margin-left: 60px;
  }

  .feature__pattern {
    position: absolute;
  }

  .feature__arrow-link,
  .investment__arrow-link {
    position: absolute;
    z-index: 25;
    width: min(8vw, 114px);
    cursor: pointer;
    text-decoration: none;
  }

  .feature__arrow-link img,
  .investment__arrow-link img {
    width: 100%;
    height: auto;
    display: block;
    animation: arrow-peek 2.5s infinite ease-in-out;
  }

  @keyframes arrow-peek {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
  }

  .feature__arrow--innovation {
    bottom: 40px;
    right: calc(50% - 60px);
  }

  .feature__arrow--support {
    bottom: 40px;
    left: calc(50% - 60px);
  }

  .investment__arrow-link {
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }

  .investment__arrow-link img {
    animation: arrow-peek-inv 2.5s infinite ease-in-out;
  }

  @keyframes arrow-peek-inv {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(12px); }
  }

  .support-pattern {
    inset: -5% -6% -2% -2%;
  }

  /* ─── SEQUENCE ─── */
  .sequence {
    display: flex;
    flex-direction: column;
  }

  .panorama {
    order: 1;
  }

  .panorama img {
    aspect-ratio: 1440 / 627;
  }

  .investment {
    order: 2;
    min-height: 339px;
  }

  .investment__pattern--mobile {
    display: none;
  }

  .investment__pattern--desktop {
    display: block;
    opacity: 1;
  }

  .investment__copy {
    display: grid;
    width: min(100%, 1220px);
    margin: 0;
    padding: 0 24px;
    height: auto;
    grid-template-columns: 382px 446px;
    justify-content: center;
    align-items: center;
    gap: 148px;
    text-align: left;
  }

  .investment__copy h2 {
    margin: 0;
    font-size: 60px;
  }

  /* ─── CLOSING ─── */
  .closing {
    height: auto;
    min-height: auto;
    position: relative;
    z-index: 10;
    margin-top: -150px;
    background: transparent;
    pointer-events: none;
  }

  .closing__bg {
    position: absolute;
    top: 150px; /* Offset to not cover investment while section overlaps */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
  }

  .closing__bg img {
    position: absolute;
    top: -300px; /* Aligned with cutout (-150 relative to section) */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top center;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  }

  .closing__cutout {
    position: relative;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: -150px; /* Make section bottom hug the image bottom */
    z-index: 6;
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
  }

  /* ─── FOOTER ─── */
  .footer {
    position: relative;
    z-index: 20;
    margin-top: -350px; /* Overlap the closing section much more to cover elbow/back */
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .section-observe {
    transition: none;
  }
}