/* =================================================================
   RCHV landing page — pixel-faithful replica of the Figma design
   Figma artboard: 3670 x 21230. Every value uses --fu = 100vw / 3670
   so 1 figma px = 1fu and 100vw = full design width on any viewport.
================================================================= */

:root {
  --fu: calc(100vw / 3670);

  --c-text: #f4f4f4;
  --c-blue-deep: #16223d;
  --c-blue: #3552c2;
  --c-blue-mid: #3653c3;
  --c-blue-bright: #324eb7;
  --c-blue-cta: rgba(22, 48, 154, 0.44);
  --c-blue-night: #0b1429;
  --c-grass: #4a5734;
  --c-dirt: #3f342c;

  --shadow-sm: 0 0 calc(20 * var(--fu)) rgba(0, 0, 0, 0.5);
  --shadow-md: 0 0 calc(30 * var(--fu)) rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0 calc(40 * var(--fu)) rgba(0, 0, 0, 0.7);
  --shadow-xl: 0 0 calc(40 * var(--fu)) rgba(0, 0, 0, 0.4);
  /* Soft white halo around bright text (replicates Figma's
     "text + blurred text behind" two-layer approach with a single
     element via stacked text-shadows). */
  --text-glow:
    0 0 calc(20 * var(--fu)) rgba(255, 255, 255, 0.55),
    0 0 calc(45 * var(--fu)) rgba(255, 255, 255, 0.45),
    0 0 calc(90 * var(--fu)) rgba(255, 255, 255, 0.3),
    0 0 calc(40 * var(--fu)) rgba(0, 0, 0, 0.45);

  --font: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

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

html,
body {
  width: 100%;
  overflow-x: hidden;
  background: var(--c-blue-night);
  color: var(--c-text);
  font-family: var(--font);
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

ul,
ol {
  list-style: none;
}

em {
  font-style: italic;
}

/* The page stacks .hero and .main vertically via flexbox so the two
   sections flow naturally — the previous setup pinned them both with
   position:absolute and a hardcoded top:2405fu on .main which didn't
   always line up perfectly with .hero's bottom (off-by-6fu overlap,
   and any reflow could cause a visible gap). All grandchildren stay
   absolutely positioned within their relative section parent. */
.page {
  position: relative;
  width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ================= HERO 0 - 2411 ================= */
.hero {
  position: relative;
  width: calc(3670 * var(--fu));
  height: calc(2411 * var(--fu));
  flex: 0 0 auto;
  overflow: hidden;
  /* No background colour — sky gradient covers everything; a colour
     here was producing a thin seam where it met .main below. */
  background: transparent;
}

/* Unified hero background — covers the full hero at the lowest z-index
   so every other hero element (cliffs, horse, clouds, figures) sits
   on top of it. Replaces the previous sky-gradient + mountain stack. */
.hero-bg-mountain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* (Desktop-only baked-in element hiding lives at the bottom of this
   file so it overrides per-element display rules defined later above.) */

/* Hero clouds - 1:7 to 1:14 */
.hero-cloud {
  position: absolute;
  pointer-events: none;
}
.hero-cloud-1 {
  top: calc(723 * var(--fu));
  left: calc(2448 * var(--fu));
  width: calc(621 * var(--fu));
  height: calc(394 * var(--fu));
  opacity: 0.8;
  object-fit: cover;
  object-position: 0 0;
}
.hero-cloud-2 {
  top: calc(694 * var(--fu));
  left: calc(119 * var(--fu));
  width: calc(344 * var(--fu));
  height: calc(218 * var(--fu));
  opacity: 0.8;
  transform: scaleY(-1) rotate(180deg);
}
.hero-cloud-3 {
  top: calc(-216 * var(--fu));
  left: calc(1379 * var(--fu));
  width: calc(999 * var(--fu));
  height: calc(398 * var(--fu));
  opacity: 0.9;
}
.hero-cloud-4 {
  top: calc(387 * var(--fu));
  left: calc(9 * var(--fu));
  width: calc(909 * var(--fu));
  height: calc(385 * var(--fu));
  opacity: 0.8;
}
.hero-cloud-5 {
  top: calc(842 * var(--fu));
  left: calc(316 * var(--fu));
  width: calc(555 * var(--fu));
  height: calc(377 * var(--fu));
  transform: rotate(4.56deg);
}
.hero-cloud-6 {
  top: calc(759 * var(--fu));
  left: calc(1426 * var(--fu));
  width: calc(372 * var(--fu));
  height: calc(252 * var(--fu));
  transform: rotate(4.56deg);
}
.hero-cloud-7 {
  top: calc(708 * var(--fu));
  left: calc(2111 * var(--fu));
  width: calc(372 * var(--fu));
  height: calc(252 * var(--fu));
  transform: rotate(4.56deg);
}
.hero-cloud-8 {
  top: calc(865 * var(--fu));
  left: calc(1007 * var(--fu));
  width: calc(372 * var(--fu));
  height: calc(252 * var(--fu));
  transform: scaleY(-1) rotate(175.44deg);
}

/* Grass --- back two layers behind everything */
.hero-grass-back-2 {
  position: absolute;
  top: calc(645 * var(--fu));
  left: calc(69 * var(--fu));
  width: calc(4319 * var(--fu));
  height: calc(2159 * var(--fu));
  transform: scaleY(-1) rotate(172.67deg);
  object-fit: cover;
}
.hero-grass-back {
  position: absolute;
  top: calc(1101 * var(--fu));
  left: calc(316 * var(--fu));
  width: calc(1913 * var(--fu));
  height: calc(812 * var(--fu));
  transform: rotate(-1.9deg);
  object-fit: cover;
}
.hero-grass-l {
  position: absolute;
  top: calc(252 * var(--fu));
  left: calc(-1904 * var(--fu));
  width: calc(4565 * var(--fu));
  height: calc(2899 * var(--fu));
  transform: rotate(17.66deg);
  object-fit: cover;
}
.hero-grass-r {
  position: absolute;
  top: calc(864 * var(--fu));
  left: calc(1374 * var(--fu));
  width: calc(3796 * var(--fu));
  height: calc(1971 * var(--fu));
  transform: scaleY(-1) rotate(171.23deg);
  object-fit: cover;
}
/* Mobile-only layers — hidden on desktop */
.hero-grass-back-m,
.hero-grass-front-m,
.hero-clouds-right-m,
.hero-makonis-m,
.hero-makonis-2-m,
.hero-makonis-3-m,
.why-makonis-m,
.why-makonis-2-m,
.why-makonis-3-m,
.why-makonis-4-m,
.why-grad-1-m,
.why-grad-2-m,
.apply-grad-top-m,
.apply-grad-bottom-m,
.sparkle-6,
.sparkle-7,
.apply-mountain-l-m,
.apply-makonis-6-m,
.adm-makonis-10-m {
  display: none;
}

/* Cliffs */
.hero-klints-r {
  position: absolute;
  top: calc(-12 * var(--fu));
  left: calc(2465 * var(--fu));
  width: calc(1251 * var(--fu));
  height: calc(2037 * var(--fu));
  filter: drop-shadow(0 calc(4 * var(--fu)) calc(20 * var(--fu)) rgba(0, 0, 0, 0.5));
  object-fit: cover;
  z-index: 8; /* must render on top of horse — has climbing figure embedded */
}
/* Pre-cut klints L (957x1636 transparent PNG) — flush with the left
   edge of the hero, no CSS rotation/flip needed (asset is correctly
   oriented in the source file). */
.hero-klints-l {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(957 * var(--fu));
  height: calc(1636 * var(--fu));
  filter: drop-shadow(0 calc(4 * var(--fu)) calc(30 * var(--fu)) rgba(0, 0, 0, 0.6));
  z-index: 2;
}

/* Headline */
.hero-headline {
  position: absolute;
  top: calc(137 * var(--fu));
  left: calc(671 * var(--fu));
  width: calc(2328 * var(--fu));
  font-size: calc(250 * var(--fu));
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
  z-index: 6;
}

/* Horse — exact Figma structure (file node 4:58):
     outer flex-centering wrapper (2773x2476)
       в†’ rotation div (8.45deg in landing-page context)
         в†’ 2486x2134 image stack (glow + main, both stretched to box).
   The natural PNG is 820x1024 but Figma uses size-full so it stretches
   to 2486x2134 (1.166 aspect). Matching that exactly. */
.hero-horse-wrap {
  position: absolute;
  top: calc(209 * var(--fu));
  left: calc(266 * var(--fu));
  width: calc(2773 * var(--fu));
  height: calc(2476 * var(--fu));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.hero-horse-stack {
  position: relative;
  width: calc(2486 * var(--fu));
  height: calc(2134 * var(--fu));
  transform: rotate(8.45deg);
}
.hero-horse-glow,
.hero-horse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill; /* Figma: size-full — stretch to box */
  object-position: bottom;
}
.hero-horse-glow {
  opacity: 0.3;
  filter: blur(calc(25 * var(--fu)));
}

/* Unified rope + figure composition — transparent PNG (1449x1172
   natural). Positioned at the meitene_uz_strika group bounds. */
.hero-rope-figure {
  position: absolute;
  top: calc(325 * var(--fu));
  left: calc(-222 * var(--fu));
  width: calc(1449 * var(--fu));
  height: calc(1172 * var(--fu));
  z-index: 4;
  pointer-events: none;
}

/* Bottom blue gradient fading to grass colour. The bottom colour
   matches .main's top (#3653c4) exactly so there's no visible seam
   where the hero meets the main page below. */
.hero-floor-gradient {
  position: absolute;
  top: calc(1920 * var(--fu));
  left: 0;
  width: calc(3670 * var(--fu));
  height: calc(491 * var(--fu));
  background: linear-gradient(to top, #3653c4 0%, rgba(54, 83, 196, 0) 100%);
  z-index: 9;
}

/* Sub-claims */
.hero-claim {
  position: absolute;
  font-size: calc(90 * var(--fu));
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
  z-index: 10;
}
.hero-claim-priority {
  top: calc(1487 * var(--fu));
  left: calc(600 * var(--fu));
  width: calc(517 * var(--fu));
}
.hero-claim-apply {
  top: calc(1758 * var(--fu));
  left: calc(2789 * var(--fu));
  width: calc(625 * var(--fu));
}

/* (horse-legs wrap removed per design request) */

/* Apply button */
.btn-apply {
  position: absolute;
  display: grid;
  place-items: center;
  text-decoration: none;
  cursor: pointer;
  border-radius: calc(149 * var(--fu));
  border: calc(2 * var(--fu)) solid #fff;
  background: var(--c-blue-cta);
  backdrop-filter: blur(calc(15 * var(--fu)));
  -webkit-backdrop-filter: blur(calc(15 * var(--fu)));
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.4s ease;
  z-index: 11;
}
.btn-apply > span {
  font-style: italic;
  font-weight: 700;
  font-size: calc(200 * var(--fu));
  line-height: 1.1;
  color: var(--c-text);
  text-shadow: var(--shadow-sm);
}
.btn-apply:hover {
  transform: translateY(calc(-6 * var(--fu)));
  background: rgba(22, 48, 154, 0.6);
  box-shadow: 0 calc(20 * var(--fu)) calc(60 * var(--fu)) rgba(0, 0, 0, 0.5);
}
.btn-apply--hero {
  top: calc(1931 * var(--fu));
  left: calc(1211 * var(--fu));
  width: calc(1363 * var(--fu));
  height: calc(298 * var(--fu));
}

/* Hero butterflies & dust dots */
.deco {
  position: absolute;
  pointer-events: none;
  z-index: 6;
}
.deco--butterfly {
  filter: blur(calc(1 * var(--fu)));
}
.deco--petal {
  filter: blur(calc(0.5 * var(--fu)));
}

/* ================= MAIN PAGE 2411 - 21230 ================= */
/* Sits directly below .hero in the flex column — no manual top
   positioning needed, so there's no overlap or seam to manage. */
.main {
  position: relative;
  width: calc(3670 * var(--fu));
  height: calc(18825 * var(--fu));
  background: linear-gradient(to top, #0b1429 0%, #3653c4 100%);
  flex: 0 0 auto;
  /* overflow:clip (NOT hidden) so the browser can't scroll .main
     internally to bring #admissions / #apply into view on hash nav.
     overflow:hidden makes the element a scroll container — landing the
     page at #admissions would scroll .main up by ~182px, shifting every
     child and leaving a navy "ghost" band at the bottom. clip clips
     identically but creates no scroll container. */
  overflow: clip;
  /* content-visibility:auto was previously enabled here for perf, but
     it caused smooth-scroll to #admissions to land at the wrong y —
     the placeholder height didn't match actual rendered height until
     after the scroll settled. Disabled so anchor-scrolling is reliable.
     loading="lazy" + media-conditional srcsets still cover the bulk
     of the perf win. */
  /* content-visibility:auto was previously set here for perf, but it
     caused a brief dark-navy band at the bottom when smooth-scrolling
     fast from Piesakies → #admissions (the intrinsic-size placeholder
     didn't match the actual rendered height until after the scroll
     settled). loading="lazy" + media-conditional srcsets still cover
     the bulk of the perf win. */
}

/* ----- PROGRAMS row (relative to .main) ----- */
/* Section order was swapped — programs now sits BELOW the why-RCHV
   section instead of above it. Pushed down further to clear the new
   taller why-RCHV section (Figma 26:3 ends at y≈4109). */
.programs {
  position: absolute;
  top: calc(4500 * var(--fu));
  left: 0;
  width: calc(3670 * var(--fu));
  height: calc(2293 * var(--fu));
}

.program-card {
  position: absolute;
  top: 0;
  width: calc(937 * var(--fu));
  height: calc(2293 * var(--fu));
  border-radius: calc(105 * var(--fu));
  border: calc(2 * var(--fu)) solid #000;
  background: rgba(255, 255, 255, 0.2);
}
.program-card[data-n="01"] { left: calc(358 * var(--fu)); }
.program-card[data-n="02"] { left: calc(1367 * var(--fu)); }
.program-card[data-n="03"] { left: calc(2376 * var(--fu)); }

.program-num {
  position: absolute;
  top: calc(78 * var(--fu));
  left: 50%;
  transform: translateX(-50%);
  font-size: calc(350 * var(--fu));
  line-height: 1;
  text-transform: uppercase;
  color: var(--c-text);
  text-shadow: var(--shadow-md);
  white-space: nowrap;
}
.program-title {
  position: absolute;
  top: calc(463 * var(--fu));
  left: 50%;
  transform: translateX(-50%);
  /* Widened from 694 → 920fu so long words ("DABAS ZINĀTNES",
     "SOCIĀLĀS ZINĀTNES") fit on one line — keeps all 3 titles at
     3 visual lines and stops the divider from crowding the last line. */
  width: calc(920 * var(--fu));
  font-size: calc(85 * var(--fu));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--shadow-sm);
}
/* Desktop: show desktop label, hide mobile label. Inverted on mobile. */
.program-title .title-mob { display: none; }
.program-rule {
  position: absolute;
  left: 0;
  width: 100%;
  border: 0;
  border-top: calc(2 * var(--fu)) solid rgba(255, 255, 255, 0.4);
}
.program-rule--top { top: calc(826 * var(--fu)); }
.program-rule--mid { top: calc(1552 * var(--fu)); }

.program-pill-solid {
  position: absolute;
  top: calc(866 * var(--fu));
  left: 50%;
  transform: translateX(-50%);
  width: calc(586 * var(--fu));
  height: calc(140 * var(--fu));
  border-radius: calc(127 * var(--fu));
  border: calc(2 * var(--fu)) solid #000;
  background: var(--c-blue-bright);
  display: grid;
  place-items: center;
  font-style: italic;
  font-size: calc(60 * var(--fu));
  text-transform: uppercase;
}
/* Specializētie kursi pill — uses the Figma Union SVG as a single
   unified shape. Two-line text: "specializД“tie" on top, "kursi" below
   so each word lands in its own rounded pill area of the union shape. */
.program-pill-spec {
  position: absolute;
  top: calc(1592 * var(--fu));
  left: 50%;
  transform: translateX(-50%);
  width: calc(586 * var(--fu));
  height: calc(217 * var(--fu));
  background: url("../assets/shape-spec-pill.svg") center / 100% 100% no-repeat;
  font-style: italic;
  font-weight: 700;
  font-size: calc(60 * var(--fu));
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--c-text);
  text-align: center;
  padding-top: calc(40 * var(--fu));
  border: 0;
  border-radius: 0;
}
.program-pill-spec span {
  display: block;
}

.program-list {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: calc(60 * var(--fu));
  line-height: 1.1;
  color: var(--c-text);
  display: flex;
  flex-direction: column;
  gap: calc(40 * var(--fu));
}
.program-list--core {
  top: calc(1080 * var(--fu));
}
.program-list--spec {
  top: calc(1880 * var(--fu));
}
.program-list .item {
  position: relative;
  padding-left: calc(80 * var(--fu));
  display: inline-block;
  margin: 0 auto;
}
.program-list .item::before {
  content: "";
  position: absolute;
  left: calc(-50 * var(--fu));
  top: 50%;
  transform: translateY(-50%);
  width: calc(57 * var(--fu));
  height: calc(38 * var(--fu));
  background: url("../assets/check.svg") no-repeat center / contain;
}
.program-list .small {
  font-family: var(--font);
  font-weight: 300;
  font-size: calc(44 * var(--fu));
  margin-top: calc(8 * var(--fu));
  display: block;
}

/* ----- WHY RCHV section ----- */
/* Why-RCHV section — rebuilt to match Figma node 26:3 with the new
   4-bubble layout. All positions are in .main coords (frame top=0). */
.why-title {
  position: absolute;
  top: calc(533 * var(--fu));
  left: calc(587 * var(--fu));
  width: calc(2328 * var(--fu));
  font-size: calc(250 * var(--fu));
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
}

.why-grass-l {
  position: absolute;
  top: calc(1711 * var(--fu));
  left: calc(-386 * var(--fu));
  width: calc(4254 * var(--fu));
  height: calc(1688 * var(--fu));
  object-fit: cover;
}
/* Two stacked gradients from Figma 26:3 — top one fades transparent
   into grass over the green hill area (21:446), bottom one fades
   grass back into blue (21:445, scale-y flipped). Combined into a
   single seamless band that spans the full section width. */
.why-fade-band {
  position: absolute;
  top: calc(2727 * var(--fu));
  left: 0;
  right: 0;
  height: calc(1382 * var(--fu));
  background: linear-gradient(
    to bottom,
    rgba(74, 87, 52, 0) 0%,
    var(--c-grass) 49%,
    #2d46a3 100%
  );
  pointer-events: none;
}

/* 4 organic-shape bubbles from Figma node 26:3.
   Structure: each bubble has a child .why-bubble__blur whose ONLY job
   is to render the backdrop-filter clipped to the shape via mask.
   The bubble itself carries the SVG bg (fill + outline) and the
   absolutely-positioned title and body. Splitting the blur into its
   own child is the most reliable way to combine backdrop-filter + mask
   across Chrome/Safari/Firefox without it silently disappearing. */
.why-bubble {
  position: absolute;
  z-index: 6;
  isolation: isolate; /* fresh stacking context for the blur child */
}
/* Backdrop blur child — uses clip-path (SVG <clipPath>) NOT mask-image,
   because backdrop-filter + mask-image is silently dropped in
   Chrome/Safari. clip-path keeps the blur intact. */
.why-bubble__blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(calc(7.5 * var(--fu)));
  -webkit-backdrop-filter: blur(calc(7.5 * var(--fu)));
  background: rgba(255, 255, 255, 0.05);
  clip-path: var(--bubble-clip);
  pointer-events: none;
  z-index: 0;
}
/* SVG (fill + outline) renders ON TOP of the blur so the stroke
   doesn't get blurred away into the backdrop. */
.why-bubble__shape {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-image: var(--bubble-shape-img);
  pointer-events: none;
  z-index: 1;
}
.why-bubble .heading,
.why-bubble p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--c-text);
  z-index: 2;
}
.why-bubble .heading {
  font-style: italic;
  font-weight: 700;
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  text-transform: uppercase;
}
.why-bubble p {
  font-size: calc(70 * var(--fu));
  line-height: 1.1;
}

/* Top-left — ANGĻU VALODA NĀKOTNEI (Figma 21:679) */
.why-bubble--tl {
  top: calc(1053 * var(--fu));
  left: calc(811 * var(--fu));
  width: calc(787 * var(--fu));
  height: calc(1038 * var(--fu));
  --bubble-shape-img: url("../assets/shape-anglu.svg");
  --bubble-clip: url(#bubble-anglu);
}
.why-bubble--tl .heading { top: calc(79 * var(--fu));  width: calc(593 * var(--fu)); }
.why-bubble--tl p        { top: calc(553 * var(--fu)); width: calc(710 * var(--fu)); }

/* Top-right — DOMĀŠANA UN PATSTĀVĪBA (Figma 21:697) */
.why-bubble--tr {
  top: calc(1427 * var(--fu));
  left: calc(1936 * var(--fu));
  width: calc(979 * var(--fu));
  height: calc(826 * var(--fu));
  --bubble-shape-img: url("../assets/shape-domasana.svg");
  --bubble-clip: url(#bubble-domasana);
}
.why-bubble--tr .heading { top: calc(73 * var(--fu));  width: calc(776 * var(--fu)); }
.why-bubble--tr p        { top: calc(359 * var(--fu)); width: calc(845 * var(--fu)); }

/* Bottom-left — AKADĒMISKA KVALITĀTE (Figma 21:691) */
.why-bubble--bl {
  top: calc(2376 * var(--fu));
  left: calc(372 * var(--fu));
  width: calc(876 * var(--fu));
  height: calc(925 * var(--fu));
  --bubble-shape-img: url("../assets/shape-akademiska.svg");
  --bubble-clip: url(#bubble-akademiska);
}
.why-bubble--bl .heading { top: calc(73 * var(--fu));  width: calc(725 * var(--fu)); }
.why-bubble--bl p        { top: calc(382 * var(--fu)); width: calc(782 * var(--fu)); }

/* Bottom-right — VIDE, KUR AUGT (Figma 21:685) */
.why-bubble--br {
  top: calc(2538 * var(--fu));
  left: calc(2343 * var(--fu));
  width: calc(787 * var(--fu));
  height: calc(861 * var(--fu));
  --bubble-shape-img: url("../assets/shape-vide.svg");
  --bubble-clip: url(#bubble-vide);
}
.why-bubble--br .heading { top: calc(73 * var(--fu));  width: calc(593 * var(--fu)); }
.why-bubble--br p        { top: calc(391 * var(--fu)); width: calc(611 * var(--fu)); }

.why-cloud-1 {
  position: absolute;
  top: calc(969 * var(--fu));
  left: calc(91 * var(--fu));
  width: calc(909 * var(--fu));
  height: calc(385 * var(--fu));
  opacity: 0.8;
}
.why-cloud-2 {
  position: absolute;
  top: calc(1775 * var(--fu));
  left: calc(2885 * var(--fu));
  width: calc(1111 * var(--fu));
  height: calc(471 * var(--fu));
  opacity: 0.8;
  transform: scaleY(-1) rotate(180deg);
}
.why-cloud-small {
  position: absolute;
  top: calc(1053 * var(--fu));
  left: calc(1912 * var(--fu));
  width: calc(372 * var(--fu));
  height: calc(252 * var(--fu));
  transform: rotate(4.56deg);
}

.why-butterfly-1 {
  position: absolute;
  top: calc(2140 * var(--fu));
  left: calc(744 * var(--fu));
  width: calc(212 * var(--fu));
  height: calc(212 * var(--fu));
  filter: blur(calc(1 * var(--fu)));
  transform: scaleY(-1) rotate(172.91deg);
}
.why-butterfly-2 {
  position: absolute;
  top: calc(2202 * var(--fu));
  left: calc(2934 * var(--fu));
  width: calc(212 * var(--fu));
  height: calc(212 * var(--fu));
  transform: rotate(7.09deg);
}

.sparkle {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  object-fit: cover;
}
.sparkle-1 {
  /* Figma 21:433 */
  top: calc(678 * var(--fu));
  left: calc(2652 * var(--fu));
  width: calc(412 * var(--fu));
  height: calc(416 * var(--fu));
  transform: rotate(-26.71deg);
}
.sparkle-2 {
  /* Figma 21:434 */
  top: calc(211 * var(--fu));
  left: calc(372 * var(--fu));
  width: calc(407 * var(--fu));
  height: calc(402 * var(--fu));
  transform: rotate(67.03deg);
}
.sparkle-3 {
  top: calc(6751 * var(--fu));
  left: calc(1629 * var(--fu));
  width: calc(412 * var(--fu));
  height: calc(416 * var(--fu));
  transform: scaleY(-1) rotate(-153.29deg);
}
.sparkle-4 {
  top: calc(7392 * var(--fu));
  left: calc(849 * var(--fu));
  width: calc(266 * var(--fu));
  height: calc(260 * var(--fu));
  transform: scaleY(-1) rotate(-82.29deg);
}
.sparkle-5 {
  top: calc(7424 * var(--fu));
  left: calc(2433 * var(--fu));
  width: calc(407 * var(--fu));
  height: calc(402 * var(--fu));
  transform: scaleY(-1) rotate(112.97deg);
}

/* ----- GOALS section ----- */
.goals-title {
  position: absolute;
  top: calc(7083 * var(--fu));
  left: calc(671 * var(--fu));
  width: calc(2328 * var(--fu));
  font-size: calc(250 * var(--fu));
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
}

.goals-dirt {
  position: absolute;
  top: calc(7939 * var(--fu));
  left: 0;
  width: calc(3670 * var(--fu));
  height: calc(2154 * var(--fu));
  object-fit: fill; /* show full image with horse — don't crop */
  /* In Figma's layer order asdf 1 sits BETWEEN TAVI MĒRĶI (below) and
     the other three goal cards (above), so the horse silhouette
     covers TAVI MĒRĶI but not the rest. */
  z-index: 5;
}
/* Rectangle 24 + 23 combined into a single 3-stop band.
   Spans y=9602-10584 (h=982). Transparent в†’ solid dirt в†’ transparent
   so the dirt section fades cleanly out into the apply section
   without a sub-pixel seam between two stacked rectangles. */
.goals-fade-band {
  position: absolute;
  top: calc(9602 * var(--fu));
  left: 0;
  width: calc(3670 * var(--fu));
  height: calc(982 * var(--fu));
  background: linear-gradient(
    to bottom,
    rgba(63, 52, 44, 0) 0%,
    var(--c-dirt) 50%,
    rgba(30, 47, 109, 0) 100%
  );
  pointer-events: none;
  z-index: 7;
}

/* Big mountain piece on left of goals — pre-tilted PNG (tilt baked in,
   no CSS rotate). Flush with the left edge of the section. */
.goals-mountain-l {
  position: absolute;
  top: calc(10753 * var(--fu));
  left: 0;
  width: calc(1268 * var(--fu));
  height: calc(3282 * var(--fu));
  filter: drop-shadow(0 calc(4 * var(--fu)) calc(15 * var(--fu)) rgba(0, 0, 0, 0.5));
}

/* Goal cards — same pattern as why-bubbles: blur layer (clipped to
   shape via clip-path) + shape layer on top with the SVG fill+outline,
   then absolutely-positioned heading and body using exact Figma offsets. */
.goal-card {
  position: absolute;
  z-index: 6; /* above goals-dirt (z=5) by default */
  isolation: isolate;
}
.goal-card__blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(calc(7.5 * var(--fu)));
  -webkit-backdrop-filter: blur(calc(7.5 * var(--fu)));
  background: rgba(255, 255, 255, 0.05);
  clip-path: var(--card-clip);
  pointer-events: none;
  z-index: 0;
}
.goal-card__shape {
  position: absolute;
  inset: 0;
  background-image: var(--card-shape-img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}
.goal-card .heading,
.goal-card p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--c-text);
  z-index: 2;
}
.goal-card .heading {
  font-style: italic;
  font-weight: 700;
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  text-transform: uppercase;
}
.goal-card p {
  font-size: calc(70 * var(--fu));
  line-height: 1.1;
}

/* KULTŪRA (Figma 21:427) — top-left blob */
.goal-merki {
  top: calc(7724 * var(--fu));
  left: calc(759 * var(--fu));
  width: calc(787 * var(--fu));
  height: calc(752 * var(--fu));
  --card-shape-img: url("../assets/shape-kultura.svg");
  --card-clip: url(#goal-kultura);
  z-index: 4; /* sits BELOW the dirt+horse */
}
.goal-merki .heading { top: calc(56 * var(--fu));  width: calc(593 * var(--fu)); }
.goal-merki p        { top: calc(294 * var(--fu)); width: calc(699 * var(--fu)); }

/* PERSONĪBA (Figma 21:467) — top-right blob */
.goal-skola {
  top: calc(7997 * var(--fu));
  left: calc(2342 * var(--fu));
  width: calc(787 * var(--fu));
  height: calc(652 * var(--fu));
  --card-shape-img: url("../assets/shape-personiba.svg");
  --card-clip: url(#goal-personiba);
}
.goal-skola .heading { top: calc(56 * var(--fu));  width: calc(733 * var(--fu)); }
.goal-skola p        { top: calc(262 * var(--fu)); width: calc(618 * var(--fu)); }

/* ATTĪSTĪBA (Figma 21:455) — bottom-left wider blob */
.goal-uzvara {
  top: calc(8932 * var(--fu));
  left: calc(423 * var(--fu));
  width: calc(863 * var(--fu));
  height: calc(693 * var(--fu));
  --card-shape-img: url("../assets/shape-attistiba.svg");
  --card-clip: url(#goal-attistiba);
}
.goal-uzvara .heading { top: calc(56 * var(--fu));  width: calc(690 * var(--fu)); }
.goal-uzvara p        { top: calc(295 * var(--fu)); width: calc(726 * var(--fu)); }

/* PRIORITĀTE (Figma 21:461) — bottom-right widest blob */
.goal-izaugsme {
  top: calc(9158 * var(--fu));
  left: calc(2028 * var(--fu));
  width: calc(935 * var(--fu));
  height: calc(686 * var(--fu));
  --card-shape-img: url("../assets/shape-prioritate.svg");
  --card-clip: url(#goal-prioritate);
}
.goal-izaugsme .heading { top: calc(56 * var(--fu));  width: calc(823 * var(--fu)); }
.goal-izaugsme p        { top: calc(291 * var(--fu)); width: calc(771 * var(--fu)); }
/* ----- APPLY section ----- */
.apply-title-wrap {
  position: absolute;
  top: calc(10522 * var(--fu));
  left: calc(671 * var(--fu));
  width: calc(2328 * var(--fu));
  height: calc(1103 * var(--fu));
}
.apply-title {
  position: absolute;
  top: calc(280 * var(--fu));
  left: 0;
  width: 100%;
  font-size: calc(250 * var(--fu));
  line-height: 1.15;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
}
.apply-title-sub {
  position: absolute;
  top: calc(895 * var(--fu));
  left: 50%;
  transform: translateX(-50%);
  width: calc(690 * var(--fu));
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  text-align: center;
  color: var(--c-text);
  text-transform: uppercase;
}

/* Big mountain piece on right of apply — pre-tilted PNG (tilt baked
   in, no CSS rotate). Flush with the right edge of the section.
   z-index above the apply button + pills so the rock face overlaps
   them where it crosses (matches Figma layer order). */
.apply-mountain-r {
  position: absolute;
  top: calc(12242 * var(--fu));
  right: 0;
  left: auto;
  width: calc(1367 * var(--fu));
  height: calc(3542 * var(--fu));
  filter: drop-shadow(0 calc(4 * var(--fu)) calc(15 * var(--fu)) rgba(0, 0, 0, 0.5));
  z-index: 12;
}

/* Apply-section bubbles (Figma 21:703 KAD, 21:709 KДЂ).
   Same shape+blur+content layered structure used elsewhere. */
.apply-bubble {
  position: absolute;
  z-index: 6;
  isolation: isolate;
}
.apply-bubble__blur {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(calc(7.5 * var(--fu)));
  -webkit-backdrop-filter: blur(calc(7.5 * var(--fu)));
  background: rgba(255, 255, 255, 0.05);
  clip-path: var(--apply-bubble-clip);
  pointer-events: none;
  z-index: 0;
}
.apply-bubble__shape {
  position: absolute;
  inset: 0;
  background-image: var(--apply-bubble-shape-img);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  pointer-events: none;
  z-index: 1;
}
.apply-bubble__heading,
.apply-bubble__body {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: var(--c-text);
  z-index: 2;
}
.apply-bubble__heading {
  font-style: italic;
  font-weight: 700;
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.apply-bubble__body {
  font-size: calc(70 * var(--fu));
  line-height: 1.1;
  font-weight: 700;
}
.apply-bubble__body u {
  text-decoration: underline;
  text-underline-offset: calc(8 * var(--fu));
}

/* KAD bubble (871x562). Position chosen so the rendered gap from the
   bottom of the "UZ 10. KLASI" subtitle is the 358fu spacing
   specified in Figma. */
.apply-bubble--kad {
  top: calc(11945 * var(--fu));
  left: calc((3670 - 871) / 2 * var(--fu));
  width: calc(871 * var(--fu));
  height: calc(562 * var(--fu));
  --apply-bubble-shape-img: url("../assets/shape-apply-kad.svg");
  --apply-bubble-clip: url(#apply-kad);
}
.apply-bubble--kad .apply-bubble__heading {
  top: calc(40 * var(--fu));
}
.apply-bubble--kad .apply-bubble__body {
  top: calc(290 * var(--fu));
  width: calc(743 * var(--fu));
}

/* KДЂ bubble (871x1148). Maintains 138fu spacing after KAD ends. */
.apply-bubble--ka {
  top: calc(12645 * var(--fu));
  left: calc((3670 - 871) / 2 * var(--fu));
  width: calc(871 * var(--fu));
  height: calc(1148 * var(--fu));
  --apply-bubble-shape-img: url("../assets/shape-apply-ka.svg");
  --apply-bubble-clip: url(#apply-ka);
}
.apply-bubble--ka .apply-bubble__heading {
  top: calc(40 * var(--fu));
}
.apply-bubble--ka .apply-bubble__body--elek {
  top: calc(290 * var(--fu));
  width: calc(673 * var(--fu));
}
.apply-bubble--ka .apply-bubble__body--klat {
  top: calc(640 * var(--fu));
  width: calc(651 * var(--fu));
}
/* Inline arrow bullet that sits next to the underlined word, not on it */
.apply-bullet {
  display: inline-block;
  width: calc(57 * var(--fu));
  height: calc(38 * var(--fu));
  background: url("../assets/check-2.svg") no-repeat center / contain;
  vertical-align: middle;
  margin-right: calc(20 * var(--fu));
}

.btn-apply--main {
  top: calc(14530 * var(--fu));
  left: calc(1160 * var(--fu));
  width: calc(1363 * var(--fu));
  height: calc(298 * var(--fu));
  background: rgba(255, 255, 255, 0.1);
}

/* Rectangle 28 + Rectangle 29 combined into a single 4-stop gradient
   that runs from the bottom of apply (transparent) through a dark
   valley, up to the bright admissions handoff color, and down to
   the deep navy at the bottom of the admissions section. Single
   element = no sub-pixel seam between the two. */
.apply-admissions-band {
  position: absolute;
  top: calc(14520 * var(--fu));
  left: calc(-207 * var(--fu));
  width: calc(3915 * var(--fu));
  height: calc(4510 * var(--fu));
  background: linear-gradient(
    to bottom,
    rgba(21, 35, 77, 0) 0%,
    #15234d 7%,
    #3653c3 19.76%,
    #1a285d 100%
  );
  pointer-events: none;
}

/* ----- ADMISSIONS section ----- */
.adm-title {
  position: absolute;
  top: calc(15577 * var(--fu));
  left: calc(671 * var(--fu));
  width: calc(2328 * var(--fu));
  font-size: calc(250 * var(--fu));
  line-height: 1.15;
  text-align: center;
  color: var(--c-text);
  text-shadow: var(--text-glow);
}

.adm-criteria {
  position: absolute;
  top: calc(16359 * var(--fu));
  left: calc(1358 * var(--fu));
  width: calc(961 * var(--fu));
  height: calc(843 * var(--fu));
  background: url("../assets/shape-atlases.svg") center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(76 * var(--fu));
}
.adm-criteria-title {
  font-style: italic;
  font-weight: 700;
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  color: var(--c-text);
  text-align: center;
  width: calc(733 * var(--fu));
  margin-bottom: calc(180 * var(--fu));
}
.adm-criteria p {
  font-size: calc(60 * var(--fu));
  line-height: 1.1;
  color: var(--c-text);
  text-align: center;
  width: calc(866 * var(--fu));
}

/* Single big edge clouds (makonis-edge-l/r). The new assets are
   roughly square (~781×658) — keep their natural aspect ratio so
   they aren't stretched. Sized to fill similar visual space as the
   previous 2.36-aspect cluster image. */
.adm-cloud-l {
  position: absolute;
  top: calc(16325 * var(--fu));
  left: calc(-200 * var(--fu));
  width: calc(900 * var(--fu));
  height: calc(758 * var(--fu));
  opacity: 0.8;
}
.adm-cloud-r {
  position: absolute;
  top: calc(16781 * var(--fu));
  left: calc(2970 * var(--fu));
  width: calc(900 * var(--fu));
  height: calc(763 * var(--fu));
  opacity: 0.8;
}
.adm-cloud-bottom-1 {
  position: absolute;
  top: calc(18101 * var(--fu));
  left: calc(1510 * var(--fu));
  width: calc(785 * var(--fu));
  height: calc(533 * var(--fu));
  transform: rotate(4.56deg);
}
.adm-cloud-bottom-2 {
  position: absolute;
  top: calc(18342 * var(--fu));
  left: calc(1968 * var(--fu));
  width: calc(1401 * var(--fu));
  height: calc(952 * var(--fu));
  transform: scaleY(-1) rotate(175.44deg);
}

/* Unified admissions rope + figure composition (Group 70).
   Replaces the previous 6-element stack with a single transparent
   PNG (1449x1172 natural). Positioned at the original Figma group
   bounds. */
.adm-rope-figure {
  position: absolute;
  top: calc(17909 * var(--fu));
  left: calc(-301 * var(--fu));
  width: calc(1449 * var(--fu));
  height: calc(1172 * var(--fu));
  pointer-events: none;
}

.adm-label {
  position: absolute;
  top: calc(17366 * var(--fu));
  font-style: italic;
  font-weight: 700;
  font-size: calc(100 * var(--fu));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  width: calc(733 * var(--fu));
  color: var(--c-text);
}
.adm-label--vairak { left: calc(852 * var(--fu)); }
.adm-label--phone { left: calc(2068 * var(--fu)); }

.btn-link {
  position: absolute;
  display: grid;
  place-items: center;
  text-decoration: none;
  width: calc(933 * var(--fu));
  height: calc(204 * var(--fu));
  border-radius: calc(142 * var(--fu));
  border: calc(2 * var(--fu)) solid #fff;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(calc(15 * var(--fu)));
  -webkit-backdrop-filter: blur(calc(15 * var(--fu)));
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.5s ease,
    box-shadow 0.5s ease,
    border-color 0.4s ease;
}
.btn-link span {
  font-size: calc(100 * var(--fu));
  font-weight: 700;
  color: var(--c-text);
  text-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.btn-link:hover {
  transform: translateY(calc(-6 * var(--fu)));
  background: rgba(255, 255, 255, 0.2);
}
.btn-link--web { top: calc(17651 * var(--fu)); left: calc(752 * var(--fu)); }
.btn-link--phone { top: calc(17651 * var(--fu)); left: calc(1968 * var(--fu)); }

/* Sparkles in admissions */
.adm-sparkle {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  object-fit: cover;
}
.adm-sp-1 { top: calc(16457 * var(--fu)); left: calc(2252 * var(--fu)); width: calc(357 * var(--fu)); height: calc(353 * var(--fu)); transform: scaleY(-1) rotate(112.97deg); }
.adm-sp-2 { top: calc(16792 * var(--fu)); left: calc(1075 * var(--fu)); width: calc(264 * var(--fu)); height: calc(270 * var(--fu)); transform: scaleY(-1) rotate(171.05deg); }
.adm-sp-3 { top: calc(18082 * var(--fu)); left: calc(974 * var(--fu)); width: calc(329 * var(--fu)); height: calc(330 * var(--fu)); transform: scaleY(-1) rotate(139.05deg); }
.adm-sp-4 { top: calc(17948 * var(--fu)); left: calc(2001 * var(--fu)); width: calc(228 * var(--fu)); height: calc(228 * var(--fu)); transform: scaleY(-1) rotate(139.05deg); }
.adm-sp-5 { top: calc(18201 * var(--fu)); left: calc(2865 * var(--fu)); width: calc(137 * var(--fu)); height: calc(142 * var(--fu)); transform: scaleY(-1) rotate(179.66deg); }
.adm-sp-6 { top: calc(17461 * var(--fu)); left: calc(1835 * var(--fu)); width: calc(126 * var(--fu)); height: calc(129 * var(--fu)); transform: scaleY(-1) rotate(171.08deg); }
.adm-sp-7 { top: calc(17844 * var(--fu)); left: calc(591 * var(--fu)); width: calc(126 * var(--fu)); height: calc(129 * var(--fu)); transform: scaleY(-1) rotate(171.08deg); }
.adm-sp-8 { top: calc(16294 * var(--fu)); left: calc(1276 * var(--fu)); width: calc(126 * var(--fu)); height: calc(129 * var(--fu)); transform: scaleY(-1) rotate(171.08deg); }
.adm-sp-9 { top: calc(18406 * var(--fu)); left: calc(2229 * var(--fu)); width: calc(228 * var(--fu)); height: calc(228 * var(--fu)); transform: scaleY(-1) rotate(139.05deg); }

/* =============================================================
   Cloud floating animations — primarily vertical bob with a tiny
   horizontal sway so the motion feels organic rather than mechanical.
   Each cloud gets a unique keyframe + duration + negative delay so
   the scene is alive but never in lockstep.
   Uses the modern `translate:` property so it composes with each
   cloud's existing `transform: rotate(...)` without conflict.
============================================================= */
/* Pure-vertical floating — strong up/down motion. Three magnitudes
   so neighbouring clouds don't bob in lockstep. */
@keyframes cloud-float-a {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-220 * var(--fu)); }
}
@keyframes cloud-float-b {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc( 180 * var(--fu)); }
}
@keyframes cloud-float-c {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 calc(-140 * var(--fu)); }
}

/* Subtle twinkle for sparkles — slow opacity oscillation */
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: no-preference) {
  .sparkle, .adm-sparkle {
    animation: sparkle-twinkle 4s ease-in-out infinite;
    will-change: opacity;
  }
  .sparkle-1 { animation-delay: -0.3s; }
  .sparkle-2 { animation-delay: -1.2s; animation-duration: 5s; }
  .sparkle-3 { animation-delay: -2.4s; }
  .sparkle-4 { animation-delay: -1.6s; animation-duration: 3.2s; }
  .sparkle-5 { animation-delay: -0.9s; animation-duration: 4.5s; }
  .adm-sp-1 { animation-delay: -0.5s; }
  .adm-sp-2 { animation-delay: -1.0s; animation-duration: 4.4s; }
  .adm-sp-3 { animation-delay: -1.6s; }
  .adm-sp-4 { animation-delay: -2.2s; animation-duration: 3.6s; }
  .adm-sp-5 { animation-delay: -0.8s; }
  .adm-sp-6 { animation-delay: -3.0s; animation-duration: 5s; }
  .adm-sp-7 { animation-delay: -1.4s; }
  .adm-sp-8 { animation-delay: -2.6s; animation-duration: 4.8s; }
  .adm-sp-9 { animation-delay: -0.2s; }
}

/* Reveal-on-scroll was removed — it caused sections to fade/slide on
   refresh which broke the page feel. Both the JS (setupReveal in
   main.ts) and these classes are no-ops now. */

/* Apply / link buttons — subtle ambient pulse + mouse-follow glow +
   click ripple. Uses CSS custom properties --mx / --my that main.ts
   updates on pointer move. */
@keyframes cta-ambient-pulse {
  0%, 100% { box-shadow: 0 0 calc(20 * var(--fu)) rgba(255, 255, 255, 0.10); }
  50%      { box-shadow: 0 0 calc(60 * var(--fu)) rgba(255, 255, 255, 0.28); }
}
@keyframes cta-click-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  100% { box-shadow: 0 0 0 calc(80 * var(--fu)) rgba(255, 255, 255, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .btn-apply, .btn-link {
    animation: cta-ambient-pulse 3.6s ease-in-out infinite;
  }
}
.btn-apply, .btn-link {
  --mx: 50%;
  --my: 50%;
  position: absolute; /* preserved from existing rules */
  overflow: hidden;
}
.btn-apply::after,
.btn-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle calc(280 * var(--fu)) at var(--mx) var(--my),
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0;
  transition: opacity 0.45s ease, background 0.15s linear;
  pointer-events: none;
}
.btn-apply:hover::after,
.btn-link:hover::after { opacity: 1; }
.btn-apply.is-pulsing,
.btn-link.is-pulsing {
  animation: cta-click-pulse 0.55s ease-out, cta-ambient-pulse 3.6s ease-in-out infinite 0.55s;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cloud,
  .why-cloud-1, .why-cloud-2, .why-cloud-small,
  .adm-cloud-l, .adm-cloud-r,
  .adm-cloud-bottom-1, .adm-cloud-bottom-2 {
    animation: cloud-float-a 18s ease-in-out infinite;
    will-change: translate;
  }
  /* Vary keyframes, durations and start offsets so each cloud drifts
     at its own pace and the scene feels alive but never in lockstep. */
  .hero-cloud-1 { animation-duration: 18s; animation-delay:  -2s; }
  .hero-cloud-2 { animation-name: cloud-float-b; animation-duration: 22s; animation-delay:  -7s; }
  .hero-cloud-3 { animation-name: cloud-float-c; animation-duration: 26s; animation-delay:  -3s; }
  .hero-cloud-4 { animation-duration: 20s; animation-delay: -11s; }
  .hero-cloud-5 { animation-name: cloud-float-b; animation-duration: 24s; animation-delay:  -5s; }
  .hero-cloud-6 { animation-name: cloud-float-c; animation-duration: 19s; animation-delay:  -9s; }
  .hero-cloud-7 { animation-duration: 23s; animation-delay: -14s; }
  .hero-cloud-8 { animation-name: cloud-float-b; animation-duration: 21s; animation-delay:  -6s; }

  .why-cloud-1     { animation-name: cloud-float-c; animation-duration: 28s; animation-delay:  -4s; }
  .why-cloud-2     { animation-name: cloud-float-b; animation-duration: 25s; animation-delay: -10s; }
  .why-cloud-small { animation-duration: 20s; animation-delay:  -8s; }

  .adm-cloud-l        { animation-name: cloud-float-b; animation-duration: 27s; animation-delay:  -3s; }
  .adm-cloud-r        { animation-name: cloud-float-c; animation-duration: 24s; animation-delay: -12s; }
  .adm-cloud-bottom-1 { animation-duration: 22s; animation-delay:  -7s; }
  .adm-cloud-bottom-2 { animation-name: cloud-float-b; animation-duration: 30s; animation-delay: -15s; }
}


/* ============================================================
   Desktop-only: bg_group_hero.png bakes in cliffs, horse,
   rope+figure, glowing climbers, grass and butterflies/petals.
   Hide the per-element versions on desktop so they don't double
   up on top of the new bg. Placed at the very end so it wins
   over the per-element display:flex / display:block rules above.
   Mobile (<=768px) keeps these elements via mobile.css overrides.
   ============================================================ */
@media (min-width: 769px) {
  .hero-klints-l,
  .hero-klints-r,
  .hero-horse-wrap,
  .hero-rope-figure,
  .hero-grass-back,
  .hero-grass-back-2,
  .hero-grass-l,
  .hero-grass-r,
  .deco--butterfly,
  .deco--petal,
  /* Floating hero clouds removed for now — will be re-added one by one. */
  .hero-cloud-1,
  .hero-cloud-2,
  .hero-cloud-3,
  .hero-cloud-4,
  .hero-cloud-5,
  .hero-cloud-6,
  .hero-cloud-7,
  .hero-cloud-8 {
    display: none;
  }
}

/* ============================================================
   Why-RCHV section unified bg image (Group 80 desktop / Group 81
   mobile). Bakes in grass hill, climbing figure, butterflies and
   floating clouds. The 4 bubbles + title + 2 sparkles are the
   only overlay elements.
   ============================================================ */
.why-bg {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1; /* below .why-bubble (z=6) */
}
@media (min-width: 769px) {
  .why-bg {
    top: calc(1300 * var(--fu));
    height: calc(2464 * var(--fu));
  }
  /* Hide all per-element layers that are now baked into Group 80. */
  .why-grass-l,
  .why-fade-band,
  .why-cloud-1,
  .why-cloud-2,
  .why-cloud-small,
  .why-butterfly-1,
  .why-butterfly-2 {
    display: none;
  }
}


/* Two-piece transition between why-bg and the programs section.
   why-bg ends at top:1300 + height:2464 = 3764fu on desktop.
     - .why-fade-top  ends at 3764fu (placed 675fu before)
     - .why-fade-bottom starts at 3764fu and continues for 707fu */
.why-fade-top,
.why-fade-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2; /* above why-bg (z=1), below bubbles (z=6) */
}
@media (min-width: 769px) {
  .why-fade-top {
    top: calc((3764 - 675) * var(--fu));
    height: calc(675 * var(--fu));
  }
  .why-fade-bottom {
    /* Start 1px earlier so why-fade-top and why-fade-bottom overlap by
       1px. Both PNGs have alpha=254 at their grass-coloured edges and
       slightly different grass colours, so an exact-touch boundary lets
       the .main blue gradient bleed through as a thin blue seam. */
    top: calc(3764 * var(--fu) - 1px);
    height: calc(707 * var(--fu));
  }
}