/* Hero + marquee strip */
.hero {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(60% 70% at 85% 12%, var(--leaf-100) 0%, transparent 62%),
    radial-gradient(45% 55% at 5% 85%, var(--sand) 0%, transparent 60%),
    var(--cream);
  overflow: hidden;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.hero__title { margin-block: 1rem .4rem; }
.hero__title em { font-style: italic; color: var(--leaf-600); position: relative; }
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .16em;
  background: var(--leaf-200); border-radius: 4px; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  animation: underline-in 1s var(--ease) 1.1s forwards;
}
.hero__text { max-width: 34rem; font-size: 1.06rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin-top: 2.25rem; }
.hero__facts li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; color: var(--ink); }
.hero__facts svg { width: 20px; height: 20px; flex: none; }
.hero__facts circle { fill: var(--leaf-100); }
.hero__facts path { stroke: var(--leaf-600); stroke-width: 2; fill: none; }

/* Collage */
.hero__media { position: relative; min-height: clamp(380px, 52vw, 620px); }
.hero__shape {
  position: absolute; inset: auto 0 0 6%;
  width: 78%; aspect-ratio: 3/4; max-height: 100%;
  border-radius: 260px 260px var(--radius-lg) var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-lg);
}
.hero__shape img { width: 100%; height: 100%; object-fit: cover; }
.hero__card {
  position: absolute; background: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .85rem; width: min(46%, 210px);
}
.hero__card img { border-radius: 16px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
/* One declaration carries both the entrance and the idle float; two separate
   rules would cancel each other, since `animation` is a single property. */
.hero__card--one {
  left: -2%; top: 12%;
  animation: enter-scale .95s var(--ease) 620ms backwards,
             float-y 6.5s var(--ease-in-out) 1.6s infinite;
}
.hero__card--two {
  right: -1%; bottom: 14%;
  animation: enter-scale .95s var(--ease) 760ms backwards,
             float-y 8.5s var(--ease-in-out) 2.1s infinite;
}
.hero__card:hover img { transform: scale(1.06); }
.hero__pill { transition: transform var(--dur-slow) var(--ease-in-out); }
.hero__pill:hover { transform: translateY(-4px); }

.hero__pill {
  position: absolute; right: 2%; top: 3%;
  background: var(--leaf-900); color: var(--leaf-50);
  border-radius: var(--radius-pill); padding: .8rem 1.35rem;
  display: flex; align-items: center; gap: .7rem; box-shadow: var(--shadow);
  font-size: .82rem; line-height: 1.25;
}
.hero__pill strong { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.hero__pill span { color: rgba(241,249,245,.7); }
.hero__pill svg { width: 26px; height: 26px; stroke: var(--leaf-300); fill: none; stroke-width: 1.6; }

/* Floating decorative leaves */
.leaf { position: absolute; pointer-events: none; opacity: .5; z-index: 0; }
.leaf svg { width: 100%; height: auto; }
.leaf--1 { width: 190px; left: -70px; top: 8%; transform: translateY(var(--parallax-y, 0)) rotate(-18deg); }
.leaf--2 { width: 150px; right: 4%; bottom: 2%; transform: translateY(var(--parallax-y, 0)) rotate(24deg); opacity: .38; }
.leaf--3 { width: 110px; left: 42%; top: -30px; transform: translateY(var(--parallax-y, 0)) rotate(8deg); opacity: .3; }

/* Marquee */
.marquee {
  background: var(--leaf-800); color: var(--leaf-100);
  padding-block: 1.15rem; overflow: hidden; display: flex; user-select: none;
}
/* The track holds two identical groups; the keyframe travels exactly one group,
   so the second copy lands where the first started and the loop never shows a seam. */
.marquee__track { display: flex; flex: none; animation: marquee 24s linear infinite; will-change: transform; }
.marquee__group { display: flex; align-items: center; gap: 2.5rem; padding-right: 2.5rem; flex: none; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: .02em; white-space: nowrap;
}
.marquee__item::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--leaf-400); flex: none;
  transition: transform var(--dur) var(--ease-in-out), background-color var(--dur) var(--ease-in-out);
}
.marquee__item:nth-child(even) { color: var(--leaf-300); font-style: italic; }
.marquee__item:hover::after { transform: scale(1.6); background: var(--gold); }