:root {
  --fern-green: #587042;
  --olive-sage: #8f9470;
  --cosmic-latte: #faf7e6;
  --jasmine: #f8de8c;
  --buttery-cream: #fdefbb;
  --ink: #344126;
  --muted: #6e7656;
  --soft-line: rgba(88, 112, 66, 0.2);
  --warm-panel: rgba(253, 239, 187, 0.48);
  --content-max: 760px;
  --narrow-max: 620px;
  --wide-max: 980px;
  --split-max: 1040px;
  --hero-image-max-width: 820px;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--cosmic-latte);
  color: var(--ink);
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% 160px, rgba(248, 222, 140, 0.2), rgba(250, 247, 230, 0) 420px),
    linear-gradient(180deg, rgba(253, 239, 187, 0.42) 0, rgba(250, 247, 230, 0) 520px),
    var(--cosmic-latte);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

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

main {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* ============================================================================
   Decorative citrus installation.
   Two scenes share one engine:
     - .hero-scene  : the main 3D stage, scoped to the hero box, layered around
                      the photo (foreground / midground / background).
     - .decor-scene : a lighter page-level scene carrying soft depth through the
                      lower sections.
   Depth is expressed with .decor--front / --mid / --back (shadow, glow, blur,
   blend) plus per-item placement; movement comes from the parallax engine in JS.
   ============================================================================ */

/* Page-level scene spans the whole document and sits behind all content. */
.decor-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.decor-item {
  position: absolute;
  width: var(--decor-size);
  height: auto;
  opacity: var(--decor-opacity, 0.2);
  filter: blur(var(--decor-blur, 4px)) var(--decor-shadow, none);
  transform: translate3d(0, 0, 0) rotate(var(--decor-rotate, 0deg)) scale(var(--decor-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform;
}

/* --- depth presets --------------------------------------------------------- */

/* Foreground: closest to the viewer — reads clearly as a lemon, lifted off the
   page with a soft warm shadow + halo glow, and the longest parallax travel. */
.decor--front {
  --decor-shadow:
    drop-shadow(0 26px 38px rgba(88, 112, 66, 0.16))
    drop-shadow(0 0 34px rgba(248, 222, 140, 0.42));
}

/* Midground: present and fairly crisp, but defers to the foreground. */
.decor--mid {
  --decor-shadow:
    drop-shadow(0 16px 26px rgba(88, 112, 66, 0.12))
    drop-shadow(0 0 24px rgba(248, 222, 140, 0.3));
}

/* Background: large, soft, low — pure depth. Multiply melts it into the warmth. */
.decor--back {
  mix-blend-mode: multiply;
  --decor-shadow: none;
}

/* Rings: only ever a faint far-plane accent, never a hero element. */
.decor--ring {
  mix-blend-mode: multiply;
  --decor-shadow: drop-shadow(0 12px 18px rgba(88, 112, 66, 0.1));
}

/* ----------------------------------------------------------------------------
   HERO SCENE — the main stage, cropped against the first screen.
   Mobile-first: a calm two-element scene — one large cropped lemon reading
   clearly top-right, one soft big form behind it, upper-left.
   ---------------------------------------------------------------------------- */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-decor--tr {
  top: -8%;
  right: -20%;
  --decor-size: 290px;
  --decor-scale: 1.6;
  --decor-rotate: -14deg;
  --decor-opacity: 0.3;
  --decor-blur: 3px;
}

.hero-decor--back {
  top: -8%;
  left: -30%;
  --decor-size: 360px;
  --decor-scale: 2.1;
  --decor-rotate: 16deg;
  --decor-opacity: 0.12;
  --decor-blur: 16px;
}

/* Reserved for wider hero viewports. */
.hero-decor--tl,
.hero-decor--bl {
  display: none;
}

/* ----------------------------------------------------------------------------
   PAGE SCENE — soft depth through the lower sections (never the hero).
   ---------------------------------------------------------------------------- */
.decor--page-low {
  top: 78%;
  left: -26%;
  --decor-size: 300px;
  --decor-scale: 1.5;
  --decor-rotate: -12deg;
  --decor-opacity: 0.16;
  --decor-blur: 10px;
}

/* Reserved for wider viewports. */
.decor--page-mid,
.decor--ring-closing {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 5.6svh, 64px) 20px clamp(22px, 4.6svh, 50px);
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  inset: 18px;
  background:
    linear-gradient(rgba(143, 148, 112, 0.24), rgba(143, 148, 112, 0.24)) 0 0 / 52px 1px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.24), rgba(143, 148, 112, 0.24)) 0 0 / 1px 52px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.24), rgba(143, 148, 112, 0.24)) 100% 0 / 52px 1px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.24), rgba(143, 148, 112, 0.24)) 100% 0 / 1px 52px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.18), rgba(143, 148, 112, 0.18)) 0 100% / 42px 1px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.18), rgba(143, 148, 112, 0.18)) 0 100% / 1px 42px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.18), rgba(143, 148, 112, 0.18)) 100% 100% / 42px 1px no-repeat,
    linear-gradient(rgba(143, 148, 112, 0.18), rgba(143, 148, 112, 0.18)) 100% 100% / 1px 42px no-repeat;
}

.hero::after {
  width: min(68vw, 560px);
  height: 1px;
  bottom: clamp(18px, 4svh, 48px);
  left: 50%;
  background: linear-gradient(90deg, transparent, rgba(88, 112, 66, 0.36), transparent);
  transform: translateX(-50%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 940px);
  min-height: calc(100svh - clamp(44px, 10svh, 112px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(10px, 2.1svh, 23px);
  text-align: center;
}

/* Invitation line — a refined italic accent, flanked by hairlines, that stays
   lighter than the names below it. Cormorant carries Cyrillic, so it reads. */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 3vw, 20px);
  margin: 0;
  color: var(--olive-sage);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 4.4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.25;
  animation: heroFade 850ms 120ms both;
}

.hero__kicker::before,
.hero__kicker::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(18px, 7vw, 48px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143, 148, 112, 0.6), transparent);
}

.hero__figure {
  position: relative;
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: heroImageIn 1100ms 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero__figure::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(80vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(248, 222, 140, 0.43) 0 30%, rgba(253, 239, 187, 0.24) 48%, rgba(250, 247, 230, 0) 72%);
  filter: blur(10px);
}

.hero__figure::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(52vw, 380px);
  height: clamp(14px, 4vw, 34px);
  bottom: clamp(5px, 1.2vw, 12px);
  left: 50%;
  border-radius: 50%;
  background: rgba(88, 112, 66, 0.11);
  filter: blur(18px);
  transform: translateX(-50%);
}

.hero__image {
  --hero-image-scale: 1.15;
  width: auto;
  max-width: min(98vw, 500px);
  max-height: min(58svh, 540px);
  object-fit: contain;
  filter: drop-shadow(0 16px 22px rgba(56, 67, 39, 0.1));
  transform: translateY(0) scale(var(--hero-image-scale));
  transform-origin: 50% 82%;
  animation: softBreath 7.5s 1600ms ease-in-out infinite both;
}

.hero__text {
  color: var(--fern-green);
  animation: heroFadeUp 900ms 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 15vw, 5.35rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0;
}

.hero h1 span {
  display: inline-block;
  color: var(--olive-sage);
  font-size: 0.52em;
  transform: translateY(-0.08em);
}

/* Date now sits above the names as a delicate, wide-tracked eyebrow, letting
   "Лоліта & Влад" be the single big accent of the hero. */
.hero__date {
  margin: 0 0 clamp(6px, 1.4svh, 12px);
  color: var(--olive-sage);
  font-family: var(--sans);
  font-size: clamp(0.82rem, 3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Closing invitation note — soft italic, a touch larger, with room to breathe. */
.hero__note {
  max-width: 360px;
  margin: clamp(12px, 2.2svh, 20px) auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 4vw, 1.28rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.section {
  padding: clamp(48px, 8vw, 88px) 20px;
}

.section__content {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  text-align: center;
}

.section__content--narrow {
  width: min(100%, var(--narrow-max));
}

.section__content--wide {
  width: min(100%, var(--wide-max));
}

.section__eyebrow {
  margin: 0 0 10px;
  color: var(--olive-sage);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

h2 {
  margin: 0;
  color: var(--fern-green);
  font-family: var(--serif);
  font-size: clamp(2.15rem, 10vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.lead,
.section__text {
  margin: 22px auto 0;
  color: var(--ink);
  font-size: clamp(1rem, 4.3vw, 1.16rem);
  line-height: 1.75;
}

.lead {
  max-width: 590px;
}

.section__text {
  max-width: 620px;
}

.section__text--small {
  max-width: 570px;
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(0.95rem, 3.9vw, 1.03rem);
}

.dress-note {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(253, 239, 187, 0.38);
  color: #5f684c;
}

.soft-divider {
  width: min(240px, 58vw);
  height: 1px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, transparent, rgba(88, 112, 66, 0.34), transparent);
}

.section--main-info {
  padding-top: clamp(46px, 7vw, 78px);
}

.intro-copy {
  width: min(100%, var(--narrow-max));
  margin: 0 auto;
}

.summary-card {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: clamp(28px, 5vw, 42px);
  padding: clamp(10px, 2.2vw, 14px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(253, 239, 187, 0.6), rgba(250, 247, 230, 0.82)),
    var(--buttery-cream);
  box-shadow:
    inset 0 0 0 1px rgba(143, 148, 112, 0.1),
    0 18px 46px rgba(88, 112, 66, 0.08);
  text-align: center;
}

.summary-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border-radius: 6px;
  border: 1px solid rgba(250, 247, 230, 0.52);
  pointer-events: none;
}

.summary-card__item {
  position: relative;
  min-width: 0;
  padding: 18px 14px 17px;
}

.summary-card__item + .summary-card__item {
  border-top: 1px solid rgba(143, 148, 112, 0.1);
}

.summary-card__label,
.summary-card__value,
.summary-card__note {
  margin: 0;
}

.summary-card__label {
  color: var(--olive-sage);
  font-size: 0.76rem;
  font-weight: 700;
}

.summary-card__value {
  margin-top: 7px;
  color: var(--fern-green);
  font-family: var(--serif);
  font-size: clamp(1.34rem, 5.8vw, 1.66rem);
  font-weight: 700;
  line-height: 1.08;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.summary-card__note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Soft post-script under the "коли / початок / де" card. */
.summary-afternote {
  max-width: 520px;
  margin: clamp(18px, 3.6vw, 30px) auto 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 3.8vw, 1.22rem);
  line-height: 1.55;
  text-align: center;
}

.location {
  margin-top: 26px;
}

.location__name,
.location__city {
  margin: 0;
}

.location__name {
  color: var(--fern-green);
  font-family: var(--serif);
  font-size: clamp(1.7rem, 6.2vw, 2.32rem);
  font-weight: 600;
  line-height: 1.08;
}

.location__city,
.location__address {
  margin-top: 8px;
  color: var(--olive-sage);
  font-size: 1rem;
  font-weight: 600;
}

.location__address {
  margin-top: 6px;
  color: var(--fern-green);
  font-size: 1.04rem;
  font-weight: 700;
}

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  margin-top: 26px;
  padding: 10px 20px;
  border: 1px solid rgba(88, 112, 66, 0.44);
  border-radius: 999px;
  color: var(--fern-green);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 220ms ease;
}

.map-link:hover {
  border-color: var(--fern-green);
  background: rgba(253, 239, 187, 0.56);
  color: #3d552c;
  transform: translateY(-1px);
}

.map-link:focus-visible {
  outline: 3px solid rgba(248, 222, 140, 0.95);
  outline-offset: 4px;
}

.section--program {
  background: linear-gradient(
    180deg,
    rgba(250, 247, 230, 0) 0%,
    rgba(253, 239, 187, 0.2) 18%,
    rgba(253, 239, 187, 0.22) 82%,
    rgba(250, 247, 230, 0) 100%
  );
}

.timeline {
  position: relative;
  width: min(100%, 560px);
  margin: 30px auto 0;
  padding: 4px 0 4px 0;
  list-style: none;
  text-align: left;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 86px;
  width: 1px;
  background: rgba(143, 148, 112, 0.46);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 34px;
  align-items: center;
  min-height: 58px;
  color: var(--ink);
}

.timeline__item + .timeline__item {
  margin-top: 12px;
}

.timeline__item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 80px;
  width: 13px;
  height: 13px;
  border: 3px solid rgba(250, 247, 230, 0.95);
  border-radius: 50%;
  background: var(--olive-sage);
  box-shadow: 0 0 0 1px rgba(88, 112, 66, 0.26);
  transform: translateY(-50%);
}

.timeline time {
  color: var(--fern-green);
  font-family: var(--serif);
  font-size: 1.56rem;
  font-weight: 700;
  line-height: 1;
}

.timeline span {
  min-width: 0;
  font-size: 1rem;
  line-height: 1.45;
}

.swatches {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 10px;
  width: min(100%, 600px);
  margin: 30px auto 0;
  padding: 10px;
  border-radius: 8px;
  background: rgba(253, 239, 187, 0.2);
}

.swatch {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  grid-column: span 2;
  padding: 6px 2px;
  color: var(--ink);
}

.swatch__color {
  width: min(100%, clamp(54px, 16.2vw, 92px));
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(88, 112, 66, 0.08),
    0 12px 24px rgba(64, 77, 45, 0.08);
}

.swatch__color--fern {
  background: var(--fern-green);
}

.swatch__color--sage {
  background: var(--olive-sage);
}

.swatch__color--soft-sage {
  background: #b0b78f;
}

.swatch__color--jasmine {
  background: var(--jasmine);
}

.swatch__color--cream {
  background: var(--buttery-cream);
}

.swatch__name {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}

.swatch__name {
  margin-top: 4px;
  color: var(--fern-green);
  font-size: 0.9rem;
  font-weight: 600;
}

.swatch:last-child {
  grid-column: 4 / span 2;
}

.swatch:nth-child(4) {
  grid-column: 2 / span 2;
}

.section--closing {
  padding-top: clamp(46px, 7vw, 76px);
  padding-bottom: clamp(54px, 8vw, 92px);
  background:
    linear-gradient(180deg, rgba(250, 247, 230, 0) 0%, rgba(253, 239, 187, 0.34) 24%, rgba(253, 239, 187, 0.46) 100%),
    var(--cosmic-latte);
}

.section__content--closing {
  width: min(100%, 780px);
  display: grid;
  gap: clamp(44px, 8vw, 78px);
}

.gift-card {
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 42px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(250, 247, 230, 0.7), rgba(253, 239, 187, 0.48)),
    var(--cosmic-latte);
  box-shadow:
    inset 0 0 0 1px rgba(143, 148, 112, 0.12),
    0 18px 44px rgba(88, 112, 66, 0.07);
  text-align: center;
}

.gift-card h2 {
  font-size: clamp(2.05rem, 9vw, 3.35rem);
}

.gift-card p {
  margin: 18px auto 0;
  color: var(--ink);
  font-size: clamp(1rem, 4.1vw, 1.12rem);
  line-height: 1.75;
}

.final {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px 0 4px;
  text-align: center;
}

.final p {
  margin: 0;
  color: var(--fern-green);
  font-family: var(--serif);
  font-size: clamp(2.55rem, 10vw, 4.2rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
}

.final__mark {
  position: absolute;
  width: 28px;
  height: 28px;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
}

.final__mark::before,
.final__mark::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 10px;
  height: 20px;
  border-radius: 100% 0 100% 0;
  background: rgba(143, 148, 112, 0.48);
}

.final__mark::before {
  left: 8px;
  transform: rotate(-34deg);
}

.final__mark::after {
  right: 8px;
  transform: rotate(34deg) scaleX(-1);
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 780ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 780ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes heroFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroImageIn {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes softBreath {
  0%,
  100% {
    transform: translateY(0) scale(var(--hero-image-scale));
  }

  50% {
    transform: translateY(3px) scale(var(--hero-image-scale));
  }
}

@media (min-width: 560px) {
  .hero__image {
    max-width: min(90vw, 600px);
    max-height: min(62svh, 640px);
  }

  .swatches {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .swatch {
    grid-column: auto;
  }

  .swatch:nth-child(4),
  .swatch:last-child {
    grid-column: auto;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 17px;
  }

  .hero {
    padding-inline: 36px;
  }

  .hero::before {
    inset: 28px;
  }

  .hero__inner {
    gap: clamp(16px, 2.5svh, 30px);
  }

  .hero__image {
    max-width: min(76vw, var(--hero-image-max-width));
    max-height: min(66svh, 760px);
  }

  .section {
    padding-inline: 32px;
  }

  .timeline {
    margin-top: 40px;
  }

  /* From tablet up the hero becomes a full four-element stage: a deep soft form
     and a sharp foreground lemon layered together top-right, a small midground
     lemon top-left, and a second foreground lemon cropped bottom-left. The page
     scene gains a mid form and a single faint ring near the closing. */
  .hero-decor--tl,
  .hero-decor--bl,
  .decor--page-mid,
  .decor--ring-closing {
    display: block;
  }

  .hero-decor--back {
    top: -16%;
    right: -14%;
    left: auto;
    --decor-size: 480px;
    --decor-scale: 2.4;
    --decor-rotate: 12deg;
    --decor-opacity: 0.13;
    --decor-blur: 20px;
  }

  .hero-decor--tr {
    top: -10%;
    right: -8%;
    --decor-size: 420px;
    --decor-scale: 1.85;
    --decor-rotate: -12deg;
    --decor-opacity: 0.3;
    --decor-blur: 4px;
  }

  .hero-decor--tl {
    top: 8%;
    left: 5%;
    --decor-size: 230px;
    --decor-scale: 1.2;
    --decor-rotate: 24deg;
    --decor-opacity: 0.2;
    --decor-blur: 6px;
  }

  .hero-decor--bl {
    top: 50%;
    left: -12%;
    --decor-size: 380px;
    --decor-scale: 1.7;
    --decor-rotate: 16deg;
    --decor-opacity: 0.26;
    --decor-blur: 4px;
  }

  .decor--page-mid {
    top: 44%;
    right: -24%;
    --decor-size: 300px;
    --decor-scale: 1.5;
    --decor-rotate: 20deg;
    --decor-opacity: 0.16;
    --decor-blur: 10px;
  }

  .decor--page-low {
    top: 76%;
    left: -20%;
    --decor-size: 340px;
    --decor-scale: 1.6;
    --decor-opacity: 0.16;
    --decor-blur: 11px;
  }

  .decor--ring-closing {
    top: 89%;
    right: 7%;
    --decor-size: 150px;
    --decor-scale: 1.1;
    --decor-rotate: 8deg;
    --decor-opacity: 0.09;
    --decor-blur: 9px;
  }
}

@media (min-width: 900px) {
  .summary-card {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .summary-card__item + .summary-card__item {
    border-top: 0;
    border-left: 1px solid rgba(143, 148, 112, 0.18);
  }

  .section__content--split {
    width: min(100%, var(--split-max));
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: center;
    text-align: left;
  }

  .section__content--split .section__heading {
    align-self: center;
  }

  .section--location .section__heading::after,
  .section--program .section__heading::after {
    content: '';
    display: block;
    width: 112px;
    height: 1px;
    margin-top: 22px;
    background: linear-gradient(90deg, rgba(88, 112, 66, 0.36), rgba(88, 112, 66, 0));
  }

  .section__content--split h2 {
    font-size: clamp(2.25rem, 3.7vw, 3.3rem);
  }

  .section__content--split .section__text,
  .section__content--split .lead {
    margin-left: 0;
    margin-right: 0;
  }

  .section__content--split .location,
  .section__content--split .timeline,
  .section__content--split .swatches {
    margin-top: 0;
  }

  .section__content--split .timeline {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .section__content--split .swatches {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-self: stretch;
    padding: 16px;
  }

  .section__content--split .swatch {
    grid-column: auto;
  }

  /* Wide screens: grow the scene and push the dense centres further off the
     edges, so the foreground lemons read big while their cores stay cropped and
     only soft halos reach the content margins. */
  .hero-decor--back {
    top: -18%;
    right: -16%;
    --decor-size: 560px;
    --decor-scale: 2.5;
    --decor-opacity: 0.13;
    --decor-blur: 22px;
  }

  .hero-decor--tr {
    top: -13%;
    right: -8%;
    --decor-size: 500px;
    --decor-scale: 1.85;
    --decor-opacity: 0.3;
    --decor-blur: 5px;
  }

  .hero-decor--tl {
    top: 9%;
    left: 6%;
    --decor-size: 250px;
    --decor-scale: 1.2;
    --decor-opacity: 0.18;
    --decor-blur: 7px;
  }

  .hero-decor--bl {
    top: 48%;
    left: -12%;
    --decor-size: 440px;
    --decor-scale: 1.7;
    --decor-opacity: 0.26;
    --decor-blur: 5px;
  }

  .decor--page-mid {
    top: 46%;
    right: -20%;
    --decor-size: 360px;
    --decor-scale: 1.5;
    --decor-blur: 12px;
  }

  .decor--page-low {
    top: 75%;
    left: -16%;
    --decor-size: 380px;
    --decor-scale: 1.6;
    --decor-blur: 12px;
  }
}

@media (min-width: 1180px) {
  .hero__inner {
    min-height: calc(100svh - 132px);
    gap: clamp(14px, 1.4svh, 18px);
  }

  .hero__image {
    max-width: min(54vw, var(--hero-image-max-width));
    max-height: 70svh;
  }

  .hero h1 {
    font-size: clamp(4.8rem, 7vw, 6.6rem);
  }

  .hero__note {
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: clamp(18px, 4.4svh, 36px);
    padding-bottom: clamp(18px, 3.8svh, 32px);
  }

  .hero__inner {
    min-height: calc(100svh - clamp(38px, 8.2svh, 68px));
    gap: clamp(8px, 1.65svh, 15px);
  }
}

@media (max-width: 559px) {
  .hero__figure {
    width: 100vw;
    margin-inline: -20px;
  }

  .hero__image {
    position: relative;
    left: -9px;
  }
}

@media (max-width: 359px) {
  .hero {
    padding-inline: 16px;
  }

  .hero__figure {
    margin-inline: -16px;
  }

  .hero__image {
    max-width: 92vw;
    max-height: 52svh;
  }

  .hero h1 {
    font-size: 2.72rem;
  }

  .timeline {
    width: 100%;
  }

  .timeline::before {
    left: 76px;
  }

  .timeline__item {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 32px;
  }

  .timeline__item::before {
    left: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .decor-item {
    will-change: auto;
  }
}