@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400&display=swap");

@font-face {
  font-family: "VAG Rounded Next Extra-bold 800";
  src:
    url("../assets/frambini/fonts/VAG-Rounded-Next-ExtraBlack.ttf") format("truetype"),
    local("VAG Rounded Next Extra-bold 800"),
    local("VAG Rounded Next ExtraBlack"),
    local("VAG Rounded Next");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "VAG Rounded Cyrillic Black";
  src:
    url("../assets/frambini/fonts/VAG-Rounded-Cyrillic-Black.ttf") format("truetype"),
    local("VAG Rounded Cyrillic Black"),
    local("VAG Rounded Cyrillic-Black"),
    local("VAG Rounded Cyr Black");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-latin: "VAG Rounded Next Extra-bold 800";
  --font-cyrillic: "VAG Rounded Cyrillic Black";
  --frambini-pink: #ff2e72;
  --frambini-red: #9b0639;
  --frambini-rose: #ff9ec0;
  --frambini-dark: #030104;
  --content-max: 1840px;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--frambini-dark);
  min-width: 320px;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--frambini-dark);
  color: #fff4f8;
  font-family: var(--font-cyrillic);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-shell {
  min-height: 100svh;
  background: #020004;
}

/* Desktop story flow: each premium scene owns exactly one viewport. */
@media (min-width: 1025px) and (pointer: fine) {
  html:not(.fr-admin-mode) {
    scroll-snap-type: y mandatory;
    scroll-padding: 0;
  }

  html:not(.fr-admin-mode) body {
    overscroll-behavior-y: none;
  }

  html:not(.fr-admin-mode) .site-shell > section {
    width: 100%;
    min-height: 100svh;
    height: 100svh;
    min-height: 100dvh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

.latin {
  font-family: var(--font-latin);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  height: 100svh;
  overflow: hidden;
  background: #020004;
}

.hero__bg {
  display: none;
}

.hero__grain,
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__grain {
  z-index: 42;
  opacity: 0.10;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.09) 0 1px, transparent 1.4px),
    radial-gradient(circle at 77% 28%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 44% 82%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1.3px);
  background-size: 34px 34px, 51px 51px, 63px 63px;
}

.hero__vignette {
  z-index: 40;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.52) 0%, transparent 18%, transparent 72%, rgba(0, 0, 0, 0.74) 100%),
    radial-gradient(ellipse at 50% 49%, transparent 0 48%, rgba(0,0,0,0.20) 72%, rgba(0,0,0,0.82) 100%);
}

.hero__header {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 60;
  display: grid;
  grid-template-columns: auto 1fr;
  width: min(calc(100% - clamp(18px, 2.5vw, 40px)), var(--content-max));
  min-height: clamp(58px, 4.9vw, 88px);
  padding: clamp(10px, 0.9vw, 16px) clamp(18px, 2vw, 34px);
  align-items: center;
  transform: translateX(-50%);
}

.hero__header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 26px 26px;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

.hero__brand {
  align-self: center;
  font-size: clamp(24px, 2.2vw, 43px);
  line-height: 1.08;
  color: #fff5f7;
  text-transform: lowercase;
  text-shadow: 0 0 18px rgba(255, 46, 114, 0.34), 0 0 46px rgba(255, 46, 114, 0.18);
}

.hero__nav {
  display: flex;
  align-items: center;
  align-self: center;
  justify-self: center;
  gap: clamp(18px, 1.75vw, 36px);
  margin-left: clamp(28px, 4vw, 90px);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.hero__nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.24em;
  padding-block: 0.12em;
  font-size: clamp(18.5px, 1.48vw, 25.6px);
  line-height: 1.12;
  color: rgba(255, 244, 248, 0.90);
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(255, 46, 114, 0.24);
  transition: color 180ms ease, text-shadow 180ms ease, opacity 180ms ease;
}

.hero__nav a:hover,
.hero__nav a:focus-visible {
  color: #fff;
  outline: none;
  text-shadow: 0 0 16px rgba(255, 46, 114, 0.76), 0 0 36px rgba(255, 46, 114, 0.34);
}

.hero__copy {
  position: absolute;
  left: max(28px, calc((100vw - var(--content-max)) / 2 + 28px));
  bottom: clamp(34px, 4.6vw, 88px);
  z-index: 55;
  width: min(620px, 39vw);
  padding: clamp(25px, 2.2vw, 42px) clamp(20px, 2vw, 40px) clamp(23px, 2vw, 38px);
  color: #fff6f9;
  isolation: isolate;
  filter: drop-shadow(0 26px 78px rgba(0, 0, 0, 0.88));
}

.hero__copy::before,
.hero__copy::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.hero__copy::before {
  inset: 0;
  z-index: -2;
  border-radius: 30px;
  background:
    linear-gradient(105deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018) 38%, transparent 76%),
    radial-gradient(circle at 18% 16%, rgba(255, 236, 244, 0.16), transparent 27%),
    linear-gradient(90deg, rgba(36, 0, 15, 0.62), rgba(13, 0, 7, 0.34) 62%, rgba(0, 0, 0, 0.02));
  border: 1px solid rgba(255, 222, 236, 0.13);
  border-left: 1px solid rgba(255, 236, 245, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 0 44px rgba(255, 46, 114, 0.055),
    0 0 0 1px rgba(255, 46, 114, 0.035);
  backdrop-filter: blur(9px) saturate(1.08);
  -webkit-backdrop-filter: blur(9px) saturate(1.08);
}

.hero__copy::after {
  left: clamp(20px, 2vw, 40px);
  right: clamp(20px, 2vw, 40px);
  top: clamp(13px, 1.25vw, 24px);
  height: 1px;
  z-index: -1;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 244, 249, 0.80) 12%,
      rgba(255, 46, 114, 0.92) 42%,
      rgba(132, 0, 50, 0.34) 74%,
      transparent);
  box-shadow: 0 0 18px rgba(255, 46, 114, 0.38);
  opacity: 0.88;
}


.hero__copy h1 {
  display: grid;
  gap: clamp(8px, 0.7vw, 14px);
  margin: 0;
  text-wrap: balance;
}

.hero__copy-brand {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: clamp(44px, 5.1vw, 104px);
  line-height: 0.76;
  color: #fff;
  text-transform: lowercase;
  letter-spacing: -0.018em;
  -webkit-text-stroke: 1px rgba(255, 220, 235, 0.22);
  text-shadow:
    0 0 20px rgba(255, 230, 240, 0.44),
    0 0 58px rgba(255, 46, 114, 0.32),
    0 0 112px rgba(137, 0, 54, 0.34);
}

.hero__copy-dash {
  display: none;
}

.hero__copy-line {
  display: block;
  max-width: 560px;
  font-size: clamp(23px, 2.28vw, 46px);
  line-height: 0.93;
  color: #fff7fa;
  letter-spacing: -0.05em;
  text-shadow:
    0 0 18px rgba(255, 46, 114, 0.18),
    0 0 56px rgba(171, 0, 62, 0.24),
    0 8px 18px rgba(0, 0, 0, 0.72);
}


.portal {
  position: absolute;
  left: 50.5%;
  top: 51.1%;
  z-index: 20;
  width: min(104vw, calc(100svh * 1.70));
  aspect-ratio: 1.6 / 1;
  transform: translate(-50%, -50%) translateZ(0);
  pointer-events: none;
  contain: layout paint;
}

.portal::before {
  content: "";
  position: absolute;
  left: 50.4%;
  top: 50%;
  z-index: -2;
  width: 67%;
  height: 92%;
  border-radius: 50%;
  border: 1px solid rgba(255, 53, 119, 0.08);
  box-shadow: 0 0 38px rgba(255, 46, 114, 0.08), inset 0 0 54px rgba(255, 46, 114, 0.04);
  transform: translate(-50%, -50%) rotate(-8deg);
  opacity: 0.5;
}

.portal::after {
  content: "";
  position: absolute;
  left: 51%;
  top: 51.2%;
  z-index: 12;
  width: 23.5%;
  height: 37%;
  border-radius: 999px;
  background:
    radial-gradient(circle,
      rgba(255, 251, 253, 0.84) 0%,
      rgba(255, 242, 247, 0.58) 10%,
      rgba(255, 214, 228, 0.22) 18%,
      rgba(193, 17, 84, 0.24) 34%,
      rgba(132, 0, 50, 0.18) 54%,
      rgba(83, 0, 31, 0.09) 70%,
      transparent 100%);
  filter: blur(24px);
  opacity: 0.96;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

@font-face {
  font-family: "FrambiniPSDText";
  src: local("VAG Rounded Next ExtraBlack"), local("VAG Rounded Next Extra Black"), local("VAG Rounded Next Extra-bold 800"), local("VAG Rounded Next");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.portal__spiral {
  position: absolute;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 1;
  filter: none;
}

.portal__spiral-group {
  transform-origin: 800px 500px;
  isolation: isolate;
}

.portal__spiral--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.portal__rings-canvas {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: strict;
}

.portal__rings-canvas--ready {
  opacity: 1;
}

.hero__ingredients-overlay {
  display: none;
}

.portal__vortex-haze,
.vortex-haze {
  display: none;
}

.vortex-word-stack {
  isolation: isolate;
}

.vortex-word {
  font-family: "FrambiniPSDText", "VAG Rounded Next ExtraBlack", "VAG Rounded Next", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-style: normal;
  font-weight: 900;
  text-anchor: start;
  dominant-baseline: central;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  word-spacing: 0.34em;
  text-rendering: geometricPrecision;
  shape-rendering: geometricPrecision;
  stroke-linejoin: round;
  stroke-miterlimit: 2;
  stroke-linecap: round;
  font-kerning: normal;
  paint-order: stroke fill;
}

.vortex-word--shadow {
  fill: #2d0016;
  stroke: #ff007d;
  stroke-width: 3.25px;
  opacity: 0.96;
  transform: translate(0.8px, 1.05px);
  transform-origin: center;
  filter: drop-shadow(0 0 1.2px rgba(255, 0, 132, 0.95)) drop-shadow(0 0 3.4px rgba(255, 0, 132, 0.58)) drop-shadow(0 2.2px 0 rgba(54, 0, 25, 0.86));
}

.vortex-word--main {
  fill: url("#frambini-vortex-fill");
  stroke: #7b0038;
  stroke-width: 0.86px;
  opacity: 1;
  filter: url("#frambini-vortex-main-glow");
}

.vortex-word--highlight {
  fill: none;
  stroke: url("#frambini-vortex-edge");
  stroke-width: 1.05px;
  opacity: 0.92;
  transform: translate(-0.42px, -0.62px);
  transform-origin: center;
  filter: url("#frambini-vortex-highlight-glow");
}

.vortex-word textPath {
  white-space: pre;
}

.portal__spiral-group > .vortex-word-stack:nth-child(-n+17) {
  opacity: 1;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+18):nth-child(-n+39) {
  opacity: 0.98;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+40):nth-child(-n+62) {
  opacity: 0.93;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+63) {
  opacity: 0.86;
}

.portal__spiral-group > .vortex-word-stack:nth-child(-n+17) .vortex-word--shadow {
  stroke-width: 3.45px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+18):nth-child(-n+39) .vortex-word--shadow {
  stroke-width: 3.00px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+40):nth-child(-n+62) .vortex-word--shadow {
  stroke-width: 2.55px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+63) .vortex-word--shadow {
  stroke-width: 2.10px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(-n+17) .vortex-word--main {
  stroke-width: 0.92px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+18):nth-child(-n+39) .vortex-word--main {
  stroke-width: 0.80px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+40):nth-child(-n+62) .vortex-word--main {
  stroke-width: 0.68px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+63) .vortex-word--main {
  stroke-width: 0.56px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(-n+17) .vortex-word--highlight {
  stroke-width: 1.10px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+18):nth-child(-n+39) .vortex-word--highlight {
  stroke-width: 0.92px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+40):nth-child(-n+62) .vortex-word--highlight {
  stroke-width: 0.74px;
}

.portal__spiral-group > .vortex-word-stack:nth-child(n+63) .vortex-word--highlight {
  stroke-width: 0.58px;
}

.portal__energy {
  display: none;
}


.portal__energy--plume {
  width: 86%;
  opacity: 0.41;
  filter: blur(0.8px) saturate(1.28) contrast(1.08);
}

.portal__energy--ring {
  width: 73%;
  opacity: 0.48;
  filter: blur(0.2px) saturate(1.26) contrast(1.16);
}

.portal__energy--main {
  width: 63%;
  opacity: 0.42;
}

.portal__berry {
  position: absolute;
  left: 51.2%;
  top: 51.1%;
  z-index: 16;
  width: 28.3%;
  height: auto;
  transform: translate(-50%, -50%) rotate(-1deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 16px rgba(255, 245, 249, 0.34)) drop-shadow(0 0 42px rgba(255, 39, 112, 0.24)) drop-shadow(0 0 84px rgba(125, 0, 48, 0.22)) drop-shadow(0 28px 40px rgba(0, 0, 0, 0.72)) saturate(1.08) contrast(1.03);
  backface-visibility: hidden;
  will-change: transform;
}

.ingredient {
  display: none !important;
}

.ingredient img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.ingredient--raspberry-top-left {
  left: 22.2%;
  top: 12.7%;
  width: clamp(52.65px, 6.045vw, 118.95px);
  --ingredient-rotate: -15deg;
  --float-duration: 7.4s;
  --float-delay: -0.8s;
  --float-distance: 10px;
  --float-drift-x: 4px;
  --float-tilt: 1.4deg;
}

.ingredient--raspberry-top-right {
  right: 15.2%;
  top: 4.9%;
  width: clamp(59.475px, 6.63vw, 134.55px);
  --ingredient-rotate: 15deg;
  --float-duration: 7.8s;
  --float-delay: -2.1s;
  --float-distance: 12px;
  --float-drift-x: -5px;
  --float-tilt: 1.2deg;
}

.ingredient--raspberry-bottom-left {
  left: 5.6%;
  bottom: 13.4%;
  width: clamp(81.9px, 8.385vw, 173.55px);
  --ingredient-rotate: -13deg;
  --float-duration: 8.6s;
  --float-delay: -1.6s;
  --float-distance: 13px;
  --float-drift-x: 4px;
  --float-tilt: 1.1deg;
}

.ingredient--strawberry-right-top {
  right: 0.5%;
  top: 29.5%;
  width: clamp(60.45px, 6.3375vw, 128.7px);
  --ingredient-rotate: 8deg;
  --float-duration: 7.2s;
  --float-delay: -3.2s;
  --float-distance: 11px;
  --float-drift-x: -4px;
  --float-tilt: 1.5deg;
}

.ingredient--strawberry-right-bottom {
  right: 1.5%;
  bottom: 3.3%;
  width: clamp(68.25px, 7.1175vw, 144.3px);
  --ingredient-rotate: 8deg;
  --float-duration: 8.1s;
  --float-delay: -4.1s;
  --float-distance: 14px;
  --float-drift-x: -6px;
  --float-tilt: 1.6deg;
}

.ingredient--banana-top {
  right: 20.3%;
  top: 11.2%;
  width: clamp(52.65px, 4.9725vw, 101.4px);
  --ingredient-rotate: 2deg;
  --float-duration: 6.8s;
  --float-delay: -1.1s;
  --float-distance: 10px;
  --float-drift-x: 3px;
  --float-tilt: 1deg;
}

.ingredient--banana-left {
  left: 11.3%;
  top: 52.9%;
  width: clamp(56.55px, 5.46vw, 111.15px);
  --ingredient-rotate: -14deg;
  --float-duration: 7.9s;
  --float-delay: -2.8s;
  --float-distance: 11px;
  --float-drift-x: 5px;
  --float-tilt: 1.1deg;
}

.ingredient--banana-bottom-left {
  left: 16.2%;
  bottom: 0.2%;
  width: clamp(77.025px, 7.215vw, 146.25px);
  --ingredient-rotate: 9deg;
  --float-duration: 8.8s;
  --float-delay: -5.0s;
  --float-distance: 15px;
  --float-drift-x: -4px;
  --float-tilt: 1.2deg;
}

.ingredient--banana-right-mid {
  right: 2.4%;
  top: 54.6%;
  width: clamp(59.475px, 5.46vw, 113.1px);
  --ingredient-rotate: 15deg;
  --float-duration: 7.1s;
  --float-delay: -3.9s;
  --float-distance: 10px;
  --float-drift-x: -3px;
  --float-tilt: 1.2deg;
}

.ingredient--banana-right-bottom {
  right: 7.4%;
  bottom: 17.2%;
  width: clamp(87.75px, 7.5075vw, 154.05px);
  --ingredient-rotate: 4deg;
  --float-duration: 8.7s;
  --float-delay: -0.9s;
  --float-distance: 14px;
  --float-drift-x: -5px;
  --float-tilt: 1.3deg;
}

.ingredient--honeysuckle-left {
  left: 4.6%;
  top: 60.8%;
  width: clamp(39px, 3.9vw, 79.95px);
  --ingredient-rotate: 11deg;
  --float-duration: 6.9s;
  --float-delay: -2.4s;
  --float-distance: 9px;
  --float-drift-x: 2px;
  --float-tilt: 1.4deg;
}

.ingredient--honeysuckle-right {
  right: 7.6%;
  bottom: 4.8%;
  width: clamp(42.9px, 4.1925vw, 83.85px);
  --ingredient-rotate: -6deg;
  --float-duration: 7.6s;
  --float-delay: -3.7s;
  --float-distance: 10px;
  --float-drift-x: -2px;
  --float-tilt: 1.2deg;
}

.ingredient--ice-top-left {
  left: 29.1%;
  top: 4.6%;
  width: clamp(30.225px, 3.12vw, 62.4px);
  --ingredient-rotate: 12deg;
  --float-duration: 6.4s;
  --float-delay: -1.7s;
  --float-distance: 9px;
  --float-drift-x: 3px;
  --float-tilt: 1.8deg;
}

.ingredient--ice-left-big {
  left: 4.0%;
  top: 33.3%;
  width: clamp(79.95px, 8.19vw, 165.75px);
  --ingredient-rotate: -16deg;
  --float-duration: 8.3s;
  --float-delay: -4.4s;
  --float-distance: 13px;
  --float-drift-x: 5px;
  --float-tilt: 1.5deg;
  z-index: 24;
}

.ingredient--ice-left-mid {
  left: 14.8%;
  bottom: 16.7%;
  width: clamp(56.55px, 5.265vw, 107.25px);
  --ingredient-rotate: 8deg;
  --float-duration: 7.5s;
  --float-delay: -0.6s;
  --float-distance: 11px;
  --float-drift-x: 4px;
  --float-tilt: 1.5deg;
}

.ingredient--ice-right-top {
  right: 12.7%;
  top: 12.5%;
  width: clamp(46.8px, 4.3875vw, 87.75px);
  --ingredient-rotate: -10deg;
  --float-duration: 7.0s;
  --float-delay: -2.2s;
  --float-distance: 10px;
  --float-drift-x: -3px;
  --float-tilt: 1.6deg;
}

.ingredient--ice-right-mid {
  right: 17.1%;
  top: 30.8%;
  width: clamp(55.575px, 5.265vw, 103.35px);
  --ingredient-rotate: -12deg;
  --float-duration: 7.7s;
  --float-delay: -3.4s;
  --float-distance: 11px;
  --float-drift-x: -4px;
  --float-tilt: 1.6deg;
}

.ingredient--ice-right-big {
  right: 4.2%;
  top: 46.7%;
  width: clamp(74.1px, 7.3125vw, 148.2px);
  --ingredient-rotate: 10deg;
  --float-duration: 8.5s;
  --float-delay: -1.3s;
  --float-distance: 14px;
  --float-drift-x: -6px;
  --float-tilt: 1.4deg;
}

.ingredient--ice-bottom-left {
  left: 19.2%;
  bottom: 5.8%;
  width: clamp(46.8px, 4.5825vw, 93.6px);
  --ingredient-rotate: 7deg;
  --float-duration: 7.2s;
  --float-delay: -2.6s;
  --float-distance: 10px;
  --float-drift-x: 3px;
  --float-tilt: 1.4deg;
}

.ingredient--ice-bottom-right {
  right: 11.5%;
  bottom: 11.2%;
  width: clamp(53.625px, 5.265vw, 109.2px);
  --ingredient-rotate: -8deg;
  --float-duration: 7.9s;
  --float-delay: -4.8s;
  --float-distance: 12px;
  --float-drift-x: -4px;
  --float-tilt: 1.3deg;
}

.ingredient--chocolate-top-left {
  left: 18.0%;
  top: 24.7%;
  width: clamp(33.15px, 3.2175vw, 70.2px);
  --ingredient-rotate: -22deg;
  --float-duration: 6.7s;
  --float-delay: -2.0s;
  --float-distance: 9px;
  --float-drift-x: 3px;
  --float-tilt: 1.9deg;
}

.ingredient--chocolate-left-mid {
  left: 14.7%;
  top: 39.6%;
  width: clamp(26.325px, 2.73vw, 58.5px);
  --ingredient-rotate: 8deg;
  --float-duration: 6.5s;
  --float-delay: -0.7s;
  --float-distance: 8px;
  --float-drift-x: 2px;
  --float-tilt: 1.8deg;
}

.ingredient--chocolate-top-right {
  right: 1.9%;
  top: 16.8%;
  width: clamp(58.5px, 5.265vw, 105.3px);
  --ingredient-rotate: 14deg;
  --float-duration: 7.4s;
  --float-delay: -3.1s;
  --float-distance: 11px;
  --float-drift-x: -4px;
  --float-tilt: 1.5deg;
}

.ingredient--chocolate-bottom-mid {
  right: 26.6%;
  bottom: 6.7%;
  width: clamp(33.15px, 3.315vw, 66.3px);
  --ingredient-rotate: 16deg;
  --float-duration: 6.9s;
  --float-delay: -4.5s;
  --float-distance: 9px;
  --float-drift-x: -2px;
  --float-tilt: 1.6deg;
}

.ingredient--white-bottom-left {
  left: 0.4%;
  bottom: -0.9%;
  width: clamp(40.95px, 4.29vw, 85.8px);
  --ingredient-rotate: 13deg;
  --float-duration: 7.3s;
  --float-delay: -1.4s;
  --float-distance: 10px;
  --float-drift-x: 3px;
  --float-tilt: 1.5deg;
}

.experience {
  position: relative;
  min-height: 100svh;
  background: #000;
  overflow: hidden;
}

.experience__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 0;
}

.experience__artboard {
  --screen-left: 29.98%;
  --screen-top: 29.03%;
  --screen-width: 40.88%;
  --screen-height: 42.40%;
  position: relative;
  width: min(100vw, calc(100svh * 1798 / 875));
  aspect-ratio: 1798 / 875;
  max-width: 100vw;
  max-height: 100svh;
  isolation: isolate;
}

.experience__headline {
  position: absolute;
  left: 50%;
  top: 1.45%;
  z-index: 7;
  transform: translateX(-50%);
  width: min(74%, 1330px);
}

.experience__headline-brand {
  display: inline-flex;
  justify-content: center;
  align-items: end;
  gap: clamp(2px, 0.18vw, 6px);
  height: clamp(54px, 6.7vw, 120px);
  width: 100%;
  filter:
    drop-shadow(0 0 14px rgba(255, 58, 124, 0.40))
    drop-shadow(0 0 36px rgba(126, 0, 46, 0.24));
}

.experience__headline-brand img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}

.experience__headline-copy-wrap {
  position: relative;
  margin: clamp(8px, 0.6vw, 12px) auto 0;
  width: min(100%, 1200px);
  padding: 0 0 clamp(4px, 0.45vw, 8px);
}

.experience__headline-copy {
  margin: 0;
  text-align: center;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(20px, 2.06vw, 38px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  font-weight: 400;
  color: #fff9fb;
  text-shadow:
    0 0 12px rgba(255, 72, 131, 0.18),
    0 0 28px rgba(105, 0, 35, 0.16),
    0 5px 14px rgba(0, 0, 0, 0.62);
}

.experience__headline-flare {
  position: absolute;
  top: 46%;
  width: clamp(76px, 6.5vw, 138px);
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}

.experience__headline-flare::before,
.experience__headline-flare::after,
.experience__headline-flare i {
  content: "";
  position: absolute;
}

.experience__headline-flare::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 62, 127, 0), rgba(255, 69, 134, 0.84) 24%, rgba(255, 241, 247, 0.96) 54%, rgba(255, 59, 126, 0.80) 82%, rgba(255, 59, 126, 0));
  box-shadow: 0 0 12px rgba(255, 57, 124, 0.34);
}

.experience__headline-flare::after {
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255, 248, 251, 1) 0%, rgba(255, 110, 160, 0.98) 35%, rgba(255, 57, 124, 0.34) 68%, rgba(255, 57, 124, 0) 76%);
}

.experience__headline-flare--left { left: 0; }
.experience__headline-flare--left::after { left: 10px; }
.experience__headline-flare--right { right: 0; }
.experience__headline-flare--right::after { right: 10px; }

.experience__headline-underline {
  display: block;
  width: min(100%, 1040px);
  height: 1px;
  margin: clamp(9px, 0.75vw, 14px) auto 0;
  background: linear-gradient(90deg, rgba(255, 50, 121, 0) 0%, rgba(255, 65, 131, 0.60) 12%, rgba(255, 238, 245, 0.92) 50%, rgba(255, 65, 131, 0.60) 88%, rgba(255, 50, 121, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 52, 120, 0.24);
}

.experience__headline-underline::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: -5px auto 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 252, 0.98) 0%, rgba(255, 85, 143, 0.88) 38%, rgba(255, 85, 143, 0) 72%);
}

.experience__screen {
  position: absolute;
  z-index: 1;
  left: var(--screen-left);
  top: var(--screen-top);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  background: #000;
}

.experience__screen-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: #000;
}

.experience__visual {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.experience__feature {
  position: absolute;
  z-index: 6;
  display: grid;
  grid-template-columns: clamp(54px, 4vw, 76px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(13px, 1vw, 18px);
  padding: clamp(18px, 1.3vw, 22px) clamp(18px, 1.24vw, 23px);
  color: #fff8fb;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(84, 18, 35, 0.56), rgba(24, 3, 11, 0.82) 42%, rgba(2, 0, 2, 0.92)),
    radial-gradient(circle at 18% 16%, rgba(255, 231, 239, 0.12), transparent 40%);
  border: 1px solid rgba(255, 117, 160, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 246, 0.14),
    inset 0 0 24px rgba(255, 55, 122, 0.07),
    inset 0 -8px 24px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 46, 114, 0.03),
    0 0 18px rgba(255, 46, 114, 0.18),
    0 24px 44px rgba(0, 0, 0, 0.72);
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  transition:
    transform 260ms cubic-bezier(0.2, 0.85, 0.25, 1),
    border-color 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease;
}

.experience__feature::before,
.experience__feature::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.experience__feature::before {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(108deg, rgba(255, 255, 255, 0.07), transparent 26%, transparent 70%, rgba(255, 172, 196, 0.07)),
    radial-gradient(circle at 20% 18%, rgba(255, 245, 249, 0.11), transparent 24%);
}

.experience__feature::after {
  left: 5.5%;
  right: 5.5%;
  top: 9px;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 250, 0.58), rgba(255, 42, 115, 0.90), rgba(255, 246, 250, 0.50), transparent);
  box-shadow: 0 0 14px rgba(255, 47, 117, 0.32);
  opacity: 0.88;
}

.experience__feature:hover,
.experience__feature:focus-visible {
  transform: translateY(-4px) scale(1.01);
  outline: none;
  border-color: rgba(255, 170, 198, 0.78);
  filter: saturate(1.05) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 248, 0.16),
    inset 0 0 28px rgba(255, 54, 122, 0.11),
    inset 0 -8px 24px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 219, 232, 0.06),
    0 0 26px rgba(255, 56, 122, 0.30),
    0 24px 52px rgba(0, 0, 0, 0.74);
}

.experience__feature > :not(.experience__juice):not(.experience__berries) {
  position: relative;
  z-index: 4;
}

.experience__feature-icon {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: clamp(54px, 4vw, 76px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 31% 24%, rgba(255, 232, 241, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(51, 3, 19, 0.92), rgba(7, 0, 3, 0.9));
  border: 1px solid rgba(255, 130, 170, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 244, 0.14),
    inset 0 0 18px rgba(255, 46, 114, 0.08),
    0 0 18px rgba(255, 55, 119, 0.16);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}

.experience__feature-icon svg {
  width: 64%;
  height: 64%;
  fill: none;
  stroke: #ff789f;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255, 60, 126, 0.34));
  transition: stroke 260ms ease, filter 260ms ease, transform 260ms ease;
}

.experience__feature:hover .experience__feature-icon,
.experience__feature:focus-visible .experience__feature-icon {
  transform: scale(1.04);
  border-color: rgba(255, 207, 223, 0.80);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 249, 0.16),
    inset 0 0 20px rgba(255, 46, 114, 0.11),
    0 0 24px rgba(255, 46, 114, 0.30);
}

.experience__feature:hover .experience__feature-icon svg,
.experience__feature:focus-visible .experience__feature-icon svg {
  stroke: #ffd6e1;
  filter: drop-shadow(0 0 7px rgba(255, 236, 244, 0.46)) drop-shadow(0 0 14px rgba(255, 46, 114, 0.50));
}

.experience__feature-icon-image {
  position: absolute;
  inset: 18% auto auto 18%;
  width: 64%;
  height: 64%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 6px rgba(255, 60, 126, 0.34));
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 260ms ease, transform 260ms ease;
}

.experience__feature:hover .experience__feature-icon-image,
.experience__feature:focus-visible .experience__feature-icon-image {
  filter: drop-shadow(0 0 7px rgba(255, 236, 244, 0.46)) drop-shadow(0 0 14px rgba(255, 46, 114, 0.50));
}

.experience__feature-icon-image--left-top {
  left: 15%;
  top: 16%;
  width: 71%;
  height: 71%;
}

.experience__feature-icon-image--left-mid {
  left: 16%;
  top: 13%;
  width: 68%;
  height: 74%;
}

.experience__feature-icon-image--left-bottom {
  left: 14%;
  top: 13%;
  width: 72%;
  height: 76%;
}

.experience__feature-icon-image--right-top {
  left: 4%;
  top: 3%;
  width: 93%;
  height: 93%;
}

.experience__feature-icon-image--right-bottom {
  left: 6%;
  top: 6%;
  width: 88%;
  height: 88%;
}

.experience__feature-icon-image--right-lower {
  left: 8%;
  top: 8%;
  width: 84%;
  height: 84%;
}

.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  margin: 0;
}

.experience__feature-title {
  font-size: clamp(18px, 1.42vw, 27px);
  line-height: 1.02;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: #fff9fb;
  text-shadow: 0 0 14px rgba(255, 46, 114, 0.12), 0 6px 16px rgba(0, 0, 0, 0.56);
  text-wrap: balance;
}

.experience__feature-text {
  margin-top: clamp(7px, 0.64vw, 12px);
  font-size: clamp(12.2px, 0.97vw, 17px);
  line-height: 1.25;
  color: rgba(255, 222, 233, 0.92);
  letter-spacing: -0.03em;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.64);
}

.experience__berries {
  position: absolute;
  left: 7%;
  right: 7%;
  top: -18px;
  height: 40px;
  z-index: -1;
  pointer-events: none;
}

.experience__berry {
  position: absolute;
  width: clamp(24px, 2vw, 36px);
  aspect-ratio: 1;
  background: url("../assets/frambini/01-hero/images/cutouts/raspberry/01-hero-raspberry-set-v01.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 9px rgba(255, 40, 104, 0.18));
  opacity: 0;
  transform: translateY(10px) scale(0.78) rotate(var(--berry-rot, 0deg));
  transition: opacity 240ms ease, transform 520ms cubic-bezier(0.18, 0.9, 0.22, 1);
}

.experience__berry--1 { left: 13%; top: 15px; --berry-rot: -14deg; }
.experience__berry--2 { left: 34%; top: 7px; width: clamp(20px, 1.8vw, 32px); --berry-rot: 12deg; }
.experience__berry--3 { left: 56%; top: 14px; width: clamp(26px, 2.15vw, 40px); --berry-rot: -8deg; }
.experience__berry--4 { left: 72%; top: 5px; width: clamp(22px, 1.9vw, 34px); --berry-rot: 10deg; }
.experience__berry--5 { left: 84%; top: 12px; width: clamp(24px, 1.95vw, 35px); --berry-rot: -12deg; }

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--berry-rot, 0deg));
}

.experience__berry--1 { transition-delay: 20ms; }
.experience__berry--2 { transition-delay: 80ms; }
.experience__berry--3 { transition-delay: 140ms; }
.experience__berry--4 { transition-delay: 200ms; }
.experience__berry--5 { transition-delay: 240ms; }

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.experience__juice-stream,
.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
}

.experience__juice-stream {
  background:
    linear-gradient(180deg, rgba(255, 248, 250, 0.94) 0%, rgba(255, 186, 208, 0.90) 18%, rgba(237, 48, 114, 0.98) 52%, rgba(179, 5, 59, 0.98) 82%, rgba(101, 0, 28, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 252, 253, 0.45),
    inset 0 -1px 1px rgba(125, 0, 34, 0.24),
    0 0 8px rgba(255, 40, 104, 0.32);
  filter: blur(0.15px) saturate(1.12);
}

.experience__juice-stream::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.44), rgba(255,255,255,0.0) 55%);
  opacity: 0.7;
}

.experience__juice-stream--top {
  left: 16px;
  right: 16px;
  top: -3px;
  height: 6px;
  border-radius: 999px;
  transform: scaleX(0.02);
  transform-origin: center;
}

.experience__juice-stream--left,
.experience__juice-stream--right {
  top: 16px;
  bottom: 16px;
  width: 6px;
  border-radius: 999px;
  transform: scaleY(0.02);
  transform-origin: top;
}

.experience__juice-stream--left { left: -3px; }
.experience__juice-stream--right { right: -3px; }

.experience__juice-stream--bottom {
  left: 16px;
  right: 16px;
  bottom: -3px;
  height: 6px;
  border-radius: 999px;
  transform: scaleX(0.02);
  transform-origin: center;
}

.experience__juice-pool {
  left: 50%;
  bottom: -5px;
  width: 44px;
  height: 13px;
  transform: translateX(-50%) scaleX(0.25);
  border-radius: 999px 999px 82% 82%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 246, 249, 0.96) 0%, rgba(255, 175, 198, 0.94) 22%, rgba(237, 48, 114, 0.98) 56%, rgba(154, 0, 46, 0.98) 82%, rgba(96, 0, 25, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 247, 250, 0.48),
    0 0 10px rgba(255, 40, 104, 0.28);
}

.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0) 100%);
}

.experience__juice-drop {
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 247, 250, 0.94) 0%, rgba(255, 176, 199, 0.92) 20%, rgba(237, 48, 114, 0.98) 56%, rgba(154, 0, 46, 1) 84%, rgba(96, 0, 25, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 246, 250, 0.38), 0 0 7px rgba(255, 40, 104, 0.24);
  transform: translateY(0) scale(0.72);
}

.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}

.experience__feature:hover .experience__juice-stream--top,
.experience__feature:focus-visible .experience__juice-stream--top {
  opacity: 1;
  animation: frambini-juice-top 600ms ease forwards;
}

.experience__feature:hover .experience__juice-stream--left,
.experience__feature:focus-visible .experience__juice-stream--left {
  opacity: 1;
  animation: frambini-juice-side 520ms 260ms ease forwards;
}

.experience__feature:hover .experience__juice-stream--right,
.experience__feature:focus-visible .experience__juice-stream--right {
  opacity: 1;
  animation: frambini-juice-side 520ms 260ms ease forwards;
}

.experience__feature:hover .experience__juice-stream--bottom,
.experience__feature:focus-visible .experience__juice-stream--bottom {
  opacity: 1;
  animation: frambini-juice-bottom 520ms 610ms ease forwards;
}

.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  opacity: 1;
  animation: frambini-juice-pool 360ms 980ms ease forwards;
}

.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  opacity: 1;
  animation: frambini-juice-drop 560ms 1170ms ease forwards;
}

.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  opacity: 1;
  animation: frambini-juice-drop-small 520ms 1300ms ease forwards;
}

.experience__feature--left-top {
  left: 8.0%;
  top: 27.0%;
  width: 18.1%;
  min-height: 16.6%;
}

.experience__feature--left-mid {
  left: 8.0%;
  top: 46.5%;
  width: 18.1%;
  min-height: 16.6%;
}

.experience__feature--left-bottom {
  left: 8.0%;
  top: 66.0%;
  width: 18.1%;
  min-height: 16.6%;
}

.experience__feature--right-top {
  left: 72.4%;
  top: 35.0%;
  width: 18.8%;
  min-height: 16.7%;
}

.experience__feature--right-bottom {
  left: 72.4%;
  top: 56.0%;
  width: 18.8%;
  min-height: 16.7%;
}

.experience__feature--bottom {
  left: 28.0%;
  top: 81.2%;
  width: 44.0%;
  min-height: 15.4%;
  grid-template-columns: clamp(62px, 5vw, 92px) minmax(0, 1fr);
  border-radius: 30px;
  padding: clamp(16px, 1.18vw, 22px) clamp(22px, 1.72vw, 32px);
}

.experience__feature--bottom .experience__feature-icon {
  width: clamp(62px, 5vw, 92px);
}

.experience__feature--bottom .experience__feature-title {
  font-size: clamp(22px, 2.05vw, 38px);
  line-height: 0.96;
}

.experience__feature--bottom .experience__feature-text {
  display: grid;
  gap: clamp(4px, 0.42vw, 8px);
  font-size: clamp(12px, 0.92vw, 17px);
}

@keyframes frambini-juice-top {
  from { transform: translateX(-50%) scaleX(0.02); }
  to { transform: translateX(-50%) scaleX(1); }
}

@keyframes frambini-juice-side {
  from { transform: scaleY(0.02); }
  to { transform: scaleY(1); }
}

@keyframes frambini-juice-bottom {
  from { transform: translateX(-50%) scaleX(0.02); }
  to { transform: translateX(-50%) scaleX(1); }
}

@keyframes frambini-juice-pool {
  from { transform: translateX(-50%) scaleX(0.25); }
  to { transform: translateX(-50%) scaleX(1); }
}

@keyframes frambini-juice-drop {
  0% { transform: translateY(0) scale(0.68); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(10px) scale(0.98); opacity: 0; }
}

@keyframes frambini-juice-drop-small {
  0% { transform: translateY(0) scale(0.68); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translateY(8px) scale(0.92); opacity: 0; }
}

@media (max-width: 1280px) {
  .experience__headline {
    width: min(82%, 1140px);
  }

  .experience__headline-brand {
    height: clamp(48px, 6.3vw, 108px);
  }

  .experience__headline-copy-wrap {
    width: min(100%, 980px);
    padding-inline: clamp(34px, 3.2vw, 64px);
  }

  .experience__headline-copy {
    font-size: clamp(18px, 2vw, 34px);
  }

  .experience__headline-flare {
    width: clamp(54px, 5vw, 112px);
  }

  .experience__feature {
    border-radius: 22px;
    grid-template-columns: clamp(46px, 3.6vw, 62px) minmax(0, 1fr);
    gap: clamp(9px, 0.75vw, 14px);
    padding: clamp(14px, 1.05vw, 19px);
  }

  .experience__feature-icon {
    width: clamp(46px, 3.6vw, 62px);
  }

  .experience__feature-text {
    font-size: clamp(11px, 0.9vw, 15px);
  }
}

@media (max-width: 1024px) {
  .experience {
    min-height: auto;
  }

  .experience__stage {
    padding: 18px 16px 28px;
  }

  .experience__artboard {
    width: min(96vw, 860px);
    max-height: none;
  }

  .experience__headline {
    top: 1.1%;
    width: 90%;
  }

  .experience__headline-brand {
    height: clamp(38px, 6.2vw, 72px);
  }

  .experience__headline-copy-wrap {
    width: min(100%, 760px);
    padding-inline: 28px;
  }

  .experience__headline-copy {
    font-size: clamp(16px, 2.4vw, 26px);
  }

  .experience__headline-flare {
    width: 46px;
  }
}

@media (max-width: 760px) {
  .experience__stage {
    padding: 12px 10px 20px;
  }

  .experience__artboard {
    width: 100%;
  }

  .experience__headline {
    top: 1%;
    width: 94%;
  }

  .experience__headline-brand {
    height: clamp(26px, 6.2vw, 48px);
  }

  .experience__headline-copy-wrap {
    padding: 0 24px 8px;
  }

  .experience__headline-copy {
    font-size: clamp(10px, 2.25vw, 16px);
    line-height: 1.08;
  }

  .experience__headline-flare {
    width: 24px;
    height: 8px;
  }

  .experience__headline-flare::after {
    width: 8px;
    height: 8px;
  }

  .experience__feature {
    grid-template-columns: clamp(28px, 7vw, 40px) minmax(0, 1fr);
    gap: 8px;
    border-radius: 13px;
    padding: 8px 9px;
  }

  .experience__feature-icon,
  .experience__feature--bottom .experience__feature-icon {
    width: clamp(28px, 7vw, 40px);
  }

  .experience__feature-title,
  .experience__feature--bottom .experience__feature-title {
    font-size: clamp(11px, 3.3vw, 16px);
  }

  .experience__feature-text,
  .experience__feature--bottom .experience__feature-text {
    margin-top: 4px;
    font-size: clamp(8px, 2.5vw, 12px);
    line-height: 1.15;
  }

  .experience__feature--bottom {
    grid-template-columns: clamp(32px, 8vw, 44px) minmax(0, 1fr);
    border-radius: 16px;
  }

  .experience__berries {
    top: -14px;
    height: 24px;
  }

  .experience__berry {
    width: 14px !important;
  }
}

@keyframes frambini-berry-breathe {
  0%, 100% {
    scale: 1;
  }

  50% {
    scale: 0.82;
  }
}

@keyframes frambini-core-breathe {
  0%, 100% {
    opacity: 0.88;
    transform: translate(-50%, -50%) scale(0.91);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.07);
  }
}

@keyframes frambini-copy-scan {
  0%, 100% {
    opacity: 0.44;
    transform: scaleX(0.64);
    transform-origin: left center;
  }

  50% {
    opacity: 0.95;
    transform: scaleX(1);
    transform-origin: left center;
  }
}

@media (max-width: 1080px) {
  .hero__nav {
    gap: 12px;
    margin-left: 18px;
  }

  .hero__nav a:nth-child(3),
  .hero__nav a:nth-child(5) {
    display: none;
  }

  .hero__copy {
    width: min(580px, 56vw);
  }

  .portal {
    width: 130vw;
  }

}

@media (max-width: 760px) {
  .hero {
    min-height: 760px;
    height: 100svh;
  }

  .hero__header {
    align-items: center;
  }

  .hero__nav {
    max-width: 60vw;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 16px;
  }

  .hero__nav a:nth-child(2),
  .hero__nav a:nth-child(4) {
    display: none;
  }

  .hero__copy {
    left: 20px;
    right: 20px;
    bottom: 28px;
    width: auto;
    padding: 26px 18px 22px;
  }

  .hero__copy-brand {
    font-size: clamp(42px, 16vw, 76px);
  }

  .hero__copy-line {
    font-size: clamp(24px, 8.4vw, 39px);
  }

  .portal {
    top: 48%;
    left: 52%;
    width: 180vw;
  }

  .portal__berry {
    width: 32.2%;
  }


  .ingredient--raspberry-bottom-left,
  .ingredient--banana-bottom-left,
  .ingredient--ice-bottom-right,
  .ingredient--white-bottom-left {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__nav a {
    transition-duration: 200ms;
  }

  .hero--animate .portal__berry {
    scale: 1;
    animation: frambini-berry-breathe 3.8s ease-in-out infinite;
  }

  .hero--animate .portal::after {
    animation: frambini-core-breathe 3.8s ease-in-out infinite;
  }

  .hero--animate .hero__copy::after {
    animation: frambini-copy-scan 4.8s ease-in-out infinite;
  }
}

.experience__headline-flare,
.experience__headline-underline { display: none; }


/* refined symmetric layout and liquid border animation */
.experience__feature--left-top,
.experience__feature--left-mid,
.experience__feature--left-bottom,
.experience__feature--right-top,
.experience__feature--right-bottom,
.experience__feature--right-lower {
  width: 18.2%;
  min-height: 16.5%;
}

.experience__feature--left-top { left: 8%; top: 29.4%; }
.experience__feature--left-mid { left: 8%; top: 48.3%; }
.experience__feature--left-bottom { left: 8%; top: 67.2%; }
.experience__feature--right-top { left: 73.8%; top: 29.4%; }
.experience__feature--right-bottom { left: 73.8%; top: 48.3%; }
.experience__feature--right-lower { left: 73.8%; top: 67.2%; }

.experience__feature--bottom {
  display: none;
}

.experience__feature--best .experience__feature-title {
  font-size: clamp(16px, 1.26vw, 23px);
}

.experience__feature--best .experience__feature-text {
  display: grid;
  gap: clamp(5px, 0.36vw, 8px);
  font-size: clamp(10.4px, 0.82vw, 14.2px);
  line-height: 1.18;
}

.experience__berries {
  left: 8%;
  right: 8%;
  top: -15px;
  height: 34px;
}

.experience__berry {
  z-index: -1;
}

.experience__berry--1 { left: 13%; top: 12px; }
.experience__berry--2 { left: 31%; top: 4px; }
.experience__berry--3 { left: 50%; top: 10px; }
.experience__berry--4 { left: 68%; top: 3px; }
.experience__berry--5 { left: 83%; top: 11px; }

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.experience__juice-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.experience__juice-path,
.experience__juice-path-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
}

.experience__juice-path {
  stroke: rgba(223, 20, 82, 0.92);
  stroke-width: 6;
  filter: drop-shadow(0 0 4px rgba(255, 74, 134, 0.28)) drop-shadow(0 0 10px rgba(121, 0, 35, 0.16));
}

.experience__juice-path-highlight {
  stroke: rgba(255, 241, 246, 0.68);
  stroke-width: 2.15;
}

.experience__juice-pool {
  left: 50%;
  bottom: -4px;
  width: 44px;
  height: 14px;
  transform: translateX(-50%) scaleX(0.22);
  border-radius: 999px 999px 84% 84%;
  background: radial-gradient(circle at 35% 26%, rgba(255, 244, 248, 0.96) 0%, rgba(255, 186, 208, 0.9) 20%, rgba(231, 40, 103, 0.98) 55%, rgba(145, 0, 43, 0.98) 84%, rgba(95, 0, 27, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 248, 250, 0.42), 0 0 10px rgba(255, 58, 122, 0.22);
  opacity: 0;
}

.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0) 100%);
}

.experience__juice-drop {
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background: radial-gradient(circle at 35% 24%, rgba(255, 247, 250, 0.94) 0%, rgba(255, 177, 199, 0.92) 18%, rgba(231, 40, 103, 0.98) 54%, rgba(148, 0, 43, 1) 82%, rgba(95, 0, 27, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 247, 250, 0.38), 0 0 7px rgba(255, 58, 122, 0.18);
  transform: translateY(0) scale(0.72);
  opacity: 0;
}

.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}

.experience__feature:hover .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path {
  opacity: 1;
  animation: frambini-juice-trace 1.22s cubic-bezier(0.22, 0.75, 0.24, 1) forwards;
}

.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
  animation: frambini-juice-trace 1.22s cubic-bezier(0.22, 0.75, 0.24, 1) forwards;
}

.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: frambini-juice-pool-build 340ms 1.02s ease forwards;
}

.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: frambini-juice-drop-real 520ms 1.19s ease forwards;
}

.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: frambini-juice-drop-real-small 460ms 1.29s ease forwards;
}

@keyframes frambini-juice-trace {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes frambini-juice-pool-build {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0.22); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

@keyframes frambini-juice-drop-real {
  0% { opacity: 0; transform: translateY(0) scale(0.72); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px) scale(0.96); }
}

@keyframes frambini-juice-drop-real-small {
  0% { opacity: 0; transform: translateY(0) scale(0.68); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px) scale(0.9); }
}

@media (max-width: 760px) {
  .experience__feature--left-top,
  .experience__feature--left-mid,
  .experience__feature--left-bottom,
  .experience__feature--right-top,
  .experience__feature--right-bottom,
  .experience__feature--right-lower {
    width: 18.4%;
    min-height: 16.4%;
  }

  .experience__feature--best .experience__feature-title {
    font-size: clamp(10px, 3vw, 14px);
  }

  .experience__feature--best .experience__feature-text {
    font-size: clamp(7px, 2.15vw, 10.5px);
    gap: 3px;
  }
}


/* v3 refinement: symmetric spacing, centered TV, hidden ingredients, uniform type, clipped berries, improved juice flow */
.experience__artboard::before,
.experience__artboard::after {
  content: "";
  position: absolute;
  bottom: -1%;
  width: 23%;
  height: 23%;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.98) 0%, rgba(0,0,0,0.96) 44%, rgba(0,0,0,0.7) 66%, rgba(0,0,0,0) 100%);
}

.experience__artboard::before { left: -1%; }
.experience__artboard::after { right: -1%; }

.experience__visual,
.experience__screen {
  transform: translateY(2.15%);
}

.experience__feature {
  width: 18.25%;
  min-height: 15.9%;
}

.experience__feature--left-top { left: 8.2%; top: 30.8%; }
.experience__feature--left-mid { left: 8.2%; top: 50.2%; }
.experience__feature--left-bottom { left: 8.2%; top: 69.6%; }
.experience__feature--right-top { left: 73.55%; top: 30.8%; }
.experience__feature--right-bottom { left: 73.55%; top: 50.2%; }
.experience__feature--right-lower { left: 73.55%; top: 69.6%; }

.experience__feature--best .experience__feature-title,
.experience__feature-title {
  font-size: clamp(16.8px, 1.33vw, 24px);
  line-height: 1.04;
}

.experience__feature--best .experience__feature-text,
.experience__feature-text {
  font-size: clamp(11.4px, 0.92vw, 16px);
  line-height: 1.22;
}

.experience__feature--best .experience__feature-text {
  display: grid;
  gap: clamp(4px, 0.34vw, 7px);
}

.experience__berries {
  left: 8%;
  right: 8%;
  top: -25px;
  height: 25px;
  overflow: hidden;
  z-index: 2;
}

.experience__berry {
  width: clamp(23px, 1.85vw, 33px);
  transform: translateY(10px) scale(0.76) rotate(var(--berry-rot, 0deg));
}

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  transform: translateY(0) scale(1) rotate(var(--berry-rot, 0deg));
}

/* individual random-ish berry placements per card */
.experience__feature--left-top .experience__berry--1 { left: 12%; top: 7px; }
.experience__feature--left-top .experience__berry--2 { left: 35%; top: 0; }
.experience__feature--left-top .experience__berry--3 { left: 54%; top: 9px; }
.experience__feature--left-top .experience__berry--4 { left: 70%; top: 2px; }
.experience__feature--left-top .experience__berry--5 { left: 86%; top: 8px; }

.experience__feature--left-mid .experience__berry--1 { left: 16%; top: 5px; }
.experience__feature--left-mid .experience__berry--2 { left: 31%; top: 10px; }
.experience__feature--left-mid .experience__berry--3 { left: 48%; top: 1px; }
.experience__feature--left-mid .experience__berry--4 { left: 67%; top: 8px; }
.experience__feature--left-mid .experience__berry--5 { left: 83%; top: 3px; }

.experience__feature--left-bottom .experience__berry--1 { left: 13%; top: 9px; }
.experience__feature--left-bottom .experience__berry--2 { left: 39%; top: 1px; }
.experience__feature--left-bottom .experience__berry--3 { left: 55%; top: 6px; }
.experience__feature--left-bottom .experience__berry--4 { left: 73%; top: 0; }
.experience__feature--left-bottom .experience__berry--5 { left: 88%; top: 8px; }

.experience__feature--right-top .experience__berry--1 { left: 11%; top: 8px; }
.experience__feature--right-top .experience__berry--2 { left: 28%; top: 1px; }
.experience__feature--right-top .experience__berry--3 { left: 52%; top: 9px; }
.experience__feature--right-top .experience__berry--4 { left: 74%; top: 2px; }
.experience__feature--right-top .experience__berry--5 { left: 87%; top: 7px; }

.experience__feature--right-bottom .experience__berry--1 { left: 17%; top: 3px; }
.experience__feature--right-bottom .experience__berry--2 { left: 33%; top: 10px; }
.experience__feature--right-bottom .experience__berry--3 { left: 56%; top: 0; }
.experience__feature--right-bottom .experience__berry--4 { left: 71%; top: 6px; }
.experience__feature--right-bottom .experience__berry--5 { left: 84%; top: 2px; }

.experience__feature--right-lower .experience__berry--1 { left: 14%; top: 8px; }
.experience__feature--right-lower .experience__berry--2 { left: 30%; top: 2px; }
.experience__feature--right-lower .experience__berry--3 { left: 46%; top: 9px; }
.experience__feature--right-lower .experience__berry--4 { left: 69%; top: 0; }
.experience__feature--right-lower .experience__berry--5 { left: 85%; top: 6px; }

.experience__juice {
  inset: 0;
}

.experience__juice-svg {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  overflow: visible;
}

.experience__juice-path,
.experience__juice-path-highlight {
  opacity: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  fill: none;
}

.experience__juice-path {
  stroke: rgba(224, 24, 84, 0.95);
  stroke-width: 5.2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(255, 66, 128, 0.24)) drop-shadow(0 0 12px rgba(113, 0, 31, 0.16));
}

.experience__juice-path-highlight {
  stroke: rgba(255, 242, 246, 0.62);
  stroke-width: 1.6;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.experience__juice-pool {
  left: 50%;
  bottom: -3px;
  width: 42px;
  height: 13px;
  transform: translateX(-50%) scaleX(0.18);
  border-radius: 999px 999px 84% 84%;
  opacity: 0;
}

.experience__juice-drop {
  left: 50%;
  bottom: -2px;
  opacity: 0;
}

.experience__feature:hover .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}

.experience__feature:hover .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: frambini-juice-half-left 1.24s linear forwards;
}

.experience__feature:hover .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: frambini-juice-half-right 1.24s linear forwards;
}

.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: frambini-juice-pool-build 300ms 1.04s ease forwards;
}

.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: frambini-juice-drop-real 520ms 1.20s ease forwards;
}

.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: frambini-juice-drop-real-small 460ms 1.31s ease forwards;
}

@keyframes frambini-juice-half-left {
  0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 100 0; stroke-dashoffset: 0; }
}

@keyframes frambini-juice-half-right {
  0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 100 0; stroke-dashoffset: 0; }
}

@media (max-width: 760px) {
  .experience__feature { width: 18.3%; min-height: 15.6%; }
  .experience__feature-title,
  .experience__feature--best .experience__feature-title {
    font-size: clamp(10px, 2.95vw, 14px);
  }
  .experience__feature-text,
  .experience__feature--best .experience__feature-text {
    font-size: clamp(7px, 2.15vw, 10px);
  }
}


/* v4 final refinement requested by user */
.experience__artboard::before,
.experience__artboard::after {
  bottom: -2%;
  width: 29%;
  height: 29%;
  z-index: 5;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 48%, rgba(0,0,0,0.78) 69%, rgba(0,0,0,0) 100%);
}

.experience__artboard::before { left: -3%; }
.experience__artboard::after { right: -3%; }

.experience__visual,
.experience__screen {
  transform: translateY(3.2%);
}

.experience__feature {
  width: 18.55%;
  min-height: 16.8%;
  padding: clamp(18px, 1.2vw, 22px) clamp(18px, 1.22vw, 22px);
}

.experience__feature--left-top { left: 8.1%; top: 30.0%; }
.experience__feature--left-mid { left: 8.1%; top: 50.3%; }
.experience__feature--left-bottom { left: 8.1%; top: 70.6%; }
.experience__feature--right-top { left: 73.35%; top: 30.0%; }
.experience__feature--right-bottom { left: 73.35%; top: 50.3%; }
.experience__feature--right-lower { left: 73.35%; top: 70.6%; }

.experience__feature-title,
.experience__feature--best .experience__feature-title {
  font-size: clamp(17px, 1.34vw, 24px);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.experience__feature-text,
.experience__feature--best .experience__feature-text {
  font-size: clamp(11.2px, 0.88vw, 15px);
  line-height: 1.22;
  letter-spacing: -0.028em;
}

.experience__feature--best .experience__feature-text {
  gap: clamp(4px, 0.34vw, 7px);
}

.experience__feature-copy {
  min-width: 0;
}

.experience__berries {
  left: 8%;
  right: 8%;
  top: -22px;
  height: 22px;
  overflow: hidden;
  z-index: 0;
}

.experience__berry {
  width: clamp(23px, 1.82vw, 32px);
  z-index: 0;
  opacity: 0;
}

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
}

.experience__feature > :not(.experience__juice):not(.experience__berries) {
  z-index: 4;
}

.experience__juice {
  inset: 0;
  z-index: 2;
}

.experience__juice-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.experience__juice-path,
.experience__juice-path-highlight {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.experience__juice-path {
  stroke: rgba(230, 36, 96, 0.96);
  stroke-width: 7;
  filter: drop-shadow(0 0 4px rgba(255, 73, 134, 0.30)) drop-shadow(0 0 10px rgba(103, 0, 30, 0.18));
}

.experience__juice-path-highlight {
  stroke: rgba(255, 244, 248, 0.72);
  stroke-width: 2.2;
}

.experience__juice-pool {
  left: 50%;
  bottom: -4px;
  width: 42px;
  height: 13px;
  transform: translateX(-50%) scaleX(0.16);
  border-radius: 999px 999px 85% 85%;
  background: radial-gradient(circle at 35% 22%, rgba(255, 246, 249, 0.95) 0%, rgba(255, 187, 209, 0.92) 18%, rgba(231, 38, 103, 0.99) 54%, rgba(143, 0, 42, 1) 82%, rgba(89, 0, 24, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), 0 0 8px rgba(255, 59, 122, 0.18);
}

.experience__juice-drop {
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background: radial-gradient(circle at 35% 24%, rgba(255, 247, 250, 0.94) 0%, rgba(255, 177, 199, 0.92) 18%, rgba(231, 40, 103, 0.99) 54%, rgba(148, 0, 43, 1) 82%, rgba(95, 0, 27, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.36), 0 0 6px rgba(255, 58, 122, 0.18);
}

.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}

/* trace exactly along the outer contour, from top center in two directions */
.experience__juice-path--left,
.experience__juice-path-highlight--left {
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
}

.experience__juice-path--right,
.experience__juice-path-highlight--right {
  stroke-dasharray: 96;
  stroke-dashoffset: 96;
}

.experience__feature:hover .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}

.experience__feature:hover .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: frambini-juice-left-contour 1.28s linear forwards;
}

.experience__feature:hover .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: frambini-juice-right-contour 1.28s linear forwards;
}

.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: frambini-juice-pool-build 320ms 1.06s ease forwards;
}

.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: frambini-juice-drop-real 520ms 1.24s ease forwards;
}

.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: frambini-juice-drop-real-small 460ms 1.34s ease forwards;
}

@keyframes frambini-juice-left-contour {
  from { stroke-dashoffset: 96; }
  to { stroke-dashoffset: 0; }
}

@keyframes frambini-juice-right-contour {
  from { stroke-dashoffset: 96; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 760px) {
  .experience__feature {
    width: 18.5%;
    min-height: 16.4%;
  }

  .experience__feature-title,
  .experience__feature--best .experience__feature-title {
    font-size: clamp(10px, 2.9vw, 14px);
  }

  .experience__feature-text,
  .experience__feature--best .experience__feature-text {
    font-size: clamp(7px, 2.1vw, 10px);
  }
}


/* v5 precise contour + cleaner stage */
@property --fr-juice-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.experience__artboard::before,
.experience__artboard::after {
  content: "";
  position: absolute;
  bottom: -3%;
  width: 31%;
  height: 34%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.985) 48%, rgba(0,0,0,0.88) 68%, rgba(0,0,0,0) 100%);
}
.experience__artboard::before { left: -3.5%; }
.experience__artboard::after { right: -3.5%; }

.experience__visual,
.experience__screen {
  transform: translateY(4.2%);
}

.experience__feature {
  z-index: 8;
  width: 18.6%;
  min-height: 16.7%;
  grid-template-columns: clamp(50px, 3.65vw, 68px) minmax(0, 1fr);
  gap: clamp(11px, 0.85vw, 15px);
  padding: clamp(18px, 1.24vw, 22px) clamp(18px, 1.3vw, 24px);
  border-radius: 24px;
}
.experience__feature-icon {
  width: clamp(50px, 3.65vw, 68px);
}
.experience__feature--left-top { left: 8%; top: 31.0%; }
.experience__feature--left-mid { left: 8%; top: 51.2%; }
.experience__feature--left-bottom { left: 8%; top: 71.4%; }
.experience__feature--right-top { left: 73.4%; top: 31.0%; }
.experience__feature--right-bottom { left: 73.4%; top: 51.2%; }
.experience__feature--right-lower { left: 73.4%; top: 71.4%; }

.experience__feature-title,
.experience__feature--best .experience__feature-title {
  font-size: clamp(17.8px, 1.38vw, 25px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.experience__feature-text,
.experience__feature--best .experience__feature-text {
  font-size: clamp(11.8px, 0.93vw, 16px);
  line-height: 1.22;
  letter-spacing: -0.028em;
}
.experience__feature--best .experience__feature-text { gap: clamp(4px, 0.34vw, 7px); }

.experience__berries {
  left: 7.5%;
  right: 7.5%;
  top: -18px;
  height: 18px;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.experience__berry {
  width: clamp(22px, 1.8vw, 32px);
  opacity: 0;
  transform: translateY(9px) scale(0.82) rotate(var(--berry-rot, 0deg));
  z-index: 1;
}
.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
  transform: translateY(1px) scale(1) rotate(var(--berry-rot, 0deg));
}
/* per-card random berry placements */
.experience__feature--left-top .experience__berry--1, .experience__feature--right-top .experience__berry--1 { left: 11%; top: 6px; }
.experience__feature--left-top .experience__berry--2, .experience__feature--right-top .experience__berry--2 { left: 30%; top: 0; }
.experience__feature--left-top .experience__berry--3, .experience__feature--right-top .experience__berry--3 { left: 50%; top: 8px; }
.experience__feature--left-top .experience__berry--4, .experience__feature--right-top .experience__berry--4 { left: 70%; top: 1px; }
.experience__feature--left-top .experience__berry--5, .experience__feature--right-top .experience__berry--5 { left: 86%; top: 7px; }
.experience__feature--left-mid .experience__berry--1, .experience__feature--right-bottom .experience__berry--1 { left: 16%; top: 4px; }
.experience__feature--left-mid .experience__berry--2, .experience__feature--right-bottom .experience__berry--2 { left: 36%; top: 9px; }
.experience__feature--left-mid .experience__berry--3, .experience__feature--right-bottom .experience__berry--3 { left: 55%; top: 0; }
.experience__feature--left-mid .experience__berry--4, .experience__feature--right-bottom .experience__berry--4 { left: 73%; top: 7px; }
.experience__feature--left-mid .experience__berry--5, .experience__feature--right-bottom .experience__berry--5 { left: 85%; top: 2px; }
.experience__feature--left-bottom .experience__berry--1, .experience__feature--right-lower .experience__berry--1 { left: 14%; top: 8px; }
.experience__feature--left-bottom .experience__berry--2, .experience__feature--right-lower .experience__berry--2 { left: 34%; top: 0; }
.experience__feature--left-bottom .experience__berry--3, .experience__feature--right-lower .experience__berry--3 { left: 52%; top: 6px; }
.experience__feature--left-bottom .experience__berry--4, .experience__feature--right-lower .experience__berry--4 { left: 68%; top: 1px; }
.experience__feature--left-bottom .experience__berry--5, .experience__feature--right-lower .experience__berry--5 { left: 87%; top: 9px; }

.experience__feature > :not(.experience__juice):not(.experience__berries) { z-index: 4; }

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --fr-juice-angle: 0deg;
}
.experience__juice-svg,
.experience__juice-path,
.experience__juice-path-highlight {
  display: none !important;
}
.experience__juice::before,
.experience__juice::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(24px + 3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.experience__juice::before {
  padding: 6px;
  background:
    conic-gradient(from -90deg,
      rgba(231, 42, 104, 0.98) 0deg,
      rgba(255, 206, 220, 0.94) calc(var(--fr-juice-angle) * 0.18),
      rgba(224, 29, 91, 0.98) var(--fr-juice-angle),
      rgba(0,0,0,0) calc(var(--fr-juice-angle) + 0.12deg),
      rgba(0,0,0,0) calc(360deg - var(--fr-juice-angle) - 0.12deg),
      rgba(224, 29, 91, 0.98) calc(360deg - var(--fr-juice-angle)),
      rgba(255, 206, 220, 0.94) calc(360deg - (var(--fr-juice-angle) * 0.18)),
      rgba(231, 42, 104, 0.98) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow: 0 0 8px rgba(255, 60, 123, 0.24), 0 0 16px rgba(113, 0, 31, 0.16);
  filter: saturate(1.08) blur(0.1px);
}
.experience__juice::after {
  padding: 8px;
  background:
    conic-gradient(from -90deg,
      rgba(255, 243, 247, 0.78) 0deg,
      rgba(255, 243, 247, 0.78) calc(var(--fr-juice-angle) * 0.94),
      rgba(0,0,0,0) calc(var(--fr-juice-angle) + 0.1deg),
      rgba(0,0,0,0) calc(360deg - var(--fr-juice-angle) - 0.1deg),
      rgba(255, 243, 247, 0.78) calc(360deg - (var(--fr-juice-angle) * 0.94)),
      rgba(255, 243, 247, 0.78) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
}
.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.experience__juice-pool {
  left: 50%;
  bottom: -4px;
  width: 44px;
  height: 14px;
  margin-left: -22px;
  border-radius: 999px 999px 84% 84%;
  background: radial-gradient(circle at 35% 22%, rgba(255,247,250,0.96) 0%, rgba(255,186,208,0.92) 18%, rgba(231,42,104,0.98) 54%, rgba(145,0,42,1) 82%, rgba(89,0,24,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), 0 0 8px rgba(255,60,123,0.18);
  transform: scaleX(0.16);
}
.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 7px; right: 7px; top: 1px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0) 100%);
}
.experience__juice-drop {
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background: radial-gradient(circle at 35% 24%, rgba(255,247,250,0.94) 0%, rgba(255,177,199,0.92) 18%, rgba(231,40,103,0.99) 54%, rgba(148,0,43,1) 82%, rgba(95,0,27,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.36), 0 0 6px rgba(255,58,122,0.18);
  transform: translateY(0) scale(0.72);
}
.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}
.experience__feature:hover .experience__juice,
.experience__feature:focus-visible .experience__juice {
  animation: fr-juice-angle-grow 1.22s linear forwards;
}
.experience__feature:hover .experience__juice::before,
.experience__feature:hover .experience__juice::after,
.experience__feature:focus-visible .experience__juice::before,
.experience__feature:focus-visible .experience__juice::after {
  opacity: 1;
}
.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: fr-juice-pool-build 320ms 1.02s ease forwards;
}
.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: fr-juice-drop 520ms 1.17s ease forwards;
}
.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: fr-juice-drop-small 460ms 1.28s ease forwards;
}
@keyframes fr-juice-angle-grow {
  from { --fr-juice-angle: 0deg; }
  to { --fr-juice-angle: 180deg; }
}
@keyframes fr-juice-pool-build {
  from { opacity: 0; transform: scaleX(0.16); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes fr-juice-drop {
  0% { opacity: 0; transform: translateY(0) scale(0.72); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(10px) scale(0.96); }
}
@keyframes fr-juice-drop-small {
  0% { opacity: 0; transform: translateY(0) scale(0.68); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px) scale(0.9); }
}

@media (max-width: 760px) {
  .experience__feature { width: 18.6%; min-height: 16.5%; }
  .experience__feature-title,
  .experience__feature--best .experience__feature-title { font-size: clamp(10px, 2.95vw, 14px); }
  .experience__feature-text,
  .experience__feature--best .experience__feature-text { font-size: clamp(7px, 2.1vw, 10px); }
}


/* v6 precise per-card contour trace requested */
.experience__stage::before,
.experience__stage::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 27%;
  height: 33%;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.98) 46%, rgba(0,0,0,0.92) 66%, rgba(0,0,0,0) 100%);
}
.experience__stage::before { left: -3%; }
.experience__stage::after { right: -3%; }

.experience__visual,
.experience__screen {
  transform: translateY(4.6%);
}

.experience__feature {
  z-index: 8;
  width: 18.9%;
  min-height: 17.2%;
  grid-template-columns: clamp(50px, 3.7vw, 70px) minmax(0, 1fr);
  gap: clamp(11px, 0.9vw, 16px);
  padding: clamp(18px, 1.26vw, 22px) clamp(18px, 1.32vw, 24px);
}
.experience__feature--left-top { left: 8.1%; top: 31.0%; }
.experience__feature--left-mid { left: 8.1%; top: 52.0%; }
.experience__feature--left-bottom { left: 8.1%; top: 73.0%; }
.experience__feature--right-top { left: 73.0%; top: 31.0%; }
.experience__feature--right-bottom { left: 73.0%; top: 52.0%; }
.experience__feature--right-lower { left: 73.0%; top: 73.0%; }

.experience__feature-title,
.experience__feature--best .experience__feature-title {
  font-size: clamp(17.8px, 1.38vw, 25px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.experience__feature-text,
.experience__feature--best .experience__feature-text {
  font-size: clamp(11.8px, 0.93vw, 16px);
  line-height: 1.22;
  letter-spacing: -0.028em;
}
.experience__feature--best .experience__feature-text { gap: clamp(4px, 0.34vw, 7px); }
.experience__feature-copy { min-width: 0; }

.experience__berries {
  left: 8%;
  right: 8%;
  top: -18px;
  height: 18px;
  overflow: hidden;
  z-index: 1;
}
.experience__berry {
  z-index: 1;
  opacity: 0;
  width: clamp(22px, 1.8vw, 32px);
  transform: translateY(9px) scale(0.82) rotate(var(--berry-rot, 0deg));
}
.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
  transform: translateY(1px) scale(1) rotate(var(--berry-rot, 0deg));
}

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.experience__juice::before,
.experience__juice::after { display: none !important; }
.experience__juice-svg {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.experience__juice-path,
.experience__juice-path-highlight {
  display: block !important;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.experience__juice-path {
  stroke: rgba(230, 36, 96, 0.98);
  stroke-width: 6;
  filter: drop-shadow(0 0 4px rgba(255, 73, 134, 0.28)) drop-shadow(0 0 10px rgba(103, 0, 30, 0.16));
}
.experience__juice-path-highlight {
  stroke: rgba(255, 244, 248, 0.72);
  stroke-width: 1.9;
}
.experience__feature:hover .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}
.experience__feature:hover .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: fr-contour-left 1.28s linear forwards;
}
.experience__feature:hover .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: fr-contour-right 1.28s linear forwards;
}

.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.experience__juice-pool {
  left: 50%;
  bottom: -4px;
  width: 44px;
  height: 14px;
  margin-left: -22px;
  border-radius: 999px 999px 84% 84%;
  background: radial-gradient(circle at 35% 22%, rgba(255,247,250,0.96) 0%, rgba(255,186,208,0.92) 18%, rgba(231,42,104,0.98) 54%, rgba(145,0,42,1) 82%, rgba(89,0,24,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), 0 0 8px rgba(255,60,123,0.18);
  transform: scaleX(0.16);
}
.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0) 100%);
}
.experience__juice-drop {
  left: 50%;
  bottom: -3px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background: radial-gradient(circle at 35% 24%, rgba(255,247,250,0.94) 0%, rgba(255,177,199,0.92) 18%, rgba(231,40,103,0.99) 54%, rgba(148,0,43,1) 82%, rgba(95,0,27,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.36), 0 0 6px rgba(255,58,122,0.18);
  transform: translateY(0) scale(0.72);
}
.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}
.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: fr-juice-pool-build 320ms 1.06s ease forwards;
}
.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: fr-juice-drop 520ms 1.24s ease forwards;
}
.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: fr-juice-drop-small 460ms 1.34s ease forwards;
}

@keyframes fr-contour-left { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes fr-contour-right { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes fr-juice-pool-build { from { opacity: 0; transform: scaleX(0.16); } to { opacity: 1; transform: scaleX(1); } }
@keyframes fr-juice-drop { 0% { opacity: 0; transform: translateY(0) scale(0.72); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes fr-juice-drop-small { 0% { opacity: 0; transform: translateY(0) scale(0.68); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateY(8px) scale(0.9); } }


/* v7 raspberry syrup animation refined */
.experience__visual,
.experience__screen {
  transform: translateY(4.9%);
}

.experience__stage::before,
.experience__stage::after {
  content: "";
  position: absolute;
  bottom: -1%;
  width: 31%;
  height: 37%;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.985) 48%, rgba(0,0,0,0.95) 70%, rgba(0,0,0,0) 100%);
}
.experience__stage::before { left: -4%; }
.experience__stage::after { right: -4%; }

.experience__feature {
  z-index: 9;
  width: 19.0%;
  min-height: 17.2%;
  border-radius: 24px;
}
.experience__feature--left-top { left: 8.0%; top: 31.2%; }
.experience__feature--left-mid { left: 8.0%; top: 52.2%; }
.experience__feature--left-bottom { left: 8.0%; top: 73.2%; }
.experience__feature--right-top { left: 73.0%; top: 31.2%; }
.experience__feature--right-bottom { left: 73.0%; top: 52.2%; }
.experience__feature--right-lower { left: 73.0%; top: 73.2%; }

.experience__feature-title,
.experience__feature--best .experience__feature-title {
  font-size: clamp(17.8px, 1.38vw, 25px);
}
.experience__feature-text,
.experience__feature--best .experience__feature-text {
  font-size: clamp(11.8px, 0.93vw, 16px);
}

.experience__berries {
  z-index: 1;
  top: -18px;
  height: 18px;
  overflow: hidden;
}
.experience__berry {
  z-index: 1;
  opacity: 0;
  transform: translateY(9px) scale(0.82) rotate(var(--berry-rot, 0deg));
}
.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
  transform: translateY(1px) scale(1) rotate(var(--berry-rot, 0deg));
}

.experience__feature > :not(.experience__juice):not(.experience__berries) {
  z-index: 4;
}

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.experience__juice::before,
.experience__juice::after {
  display: none !important;
}

.experience__juice-svg {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.experience__juice-path,
.experience__juice-path-highlight {
  display: block !important;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* thick syrup body hugging the exact card contour */
.experience__juice-path {
  stroke: rgba(223, 28, 89, 0.88);
  stroke-width: 7.8;
  filter:
    drop-shadow(0 0 4px rgba(255, 74, 133, 0.22))
    drop-shadow(0 0 10px rgba(118, 0, 35, 0.14));
}

/* glossy top highlight within the syrup */
.experience__juice-path-highlight {
  stroke: rgba(255, 244, 248, 0.52);
  stroke-width: 2.15;
}

.experience__juice-source,
.experience__juice-corner,
.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
}

/* starting top-center droplet */
.experience__juice-source {
  left: 50%;
  top: -2px;
  width: 18px;
  height: 12px;
  margin-left: -9px;
  border-radius: 999px 999px 70% 70%;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,248,250,0.96) 0%, rgba(255,197,216,0.92) 18%, rgba(228, 35, 96, 0.98) 56%, rgba(144, 0, 42, 0.98) 84%, rgba(89, 0, 24, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.4),
    0 0 6px rgba(255, 63, 123, 0.18);
}
.experience__juice-source::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0) 100%);
}

/* thicker blobs that appear at rounded corners */
.experience__juice-corner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,248,250,0.94) 0%, rgba(255,191,211,0.90) 20%, rgba(224, 29, 90, 0.98) 58%, rgba(141, 0, 39, 0.98) 84%, rgba(88, 0, 23, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.34), 0 0 5px rgba(255, 61, 122, 0.14);
}
.experience__juice-corner--tl { left: -4px; top: -4px; }
.experience__juice-corner--tr { right: -4px; top: -4px; }
.experience__juice-corner--bl { left: -4px; bottom: -4px; }
.experience__juice-corner--br { right: -4px; bottom: -4px; }

/* bottom accumulation and drops */
.experience__juice-pool {
  left: 50%;
  bottom: -3px;
  width: 46px;
  height: 15px;
  margin-left: -23px;
  border-radius: 999px 999px 84% 84%;
  background:
    radial-gradient(circle at 35% 22%, rgba(255,247,250,0.96) 0%, rgba(255,186,208,0.92) 18%, rgba(231,42,104,0.98) 54%, rgba(145,0,42,1) 82%, rgba(89,0,24,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), 0 0 7px rgba(255,60,123,0.15);
  transform: scaleX(0.12);
}
.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,255,255,0) 100%);
}

.experience__juice-drop {
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 13px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,247,250,0.94) 0%, rgba(255,177,199,0.92) 18%, rgba(231,40,103,0.99) 54%, rgba(148,0,43,1) 82%, rgba(95,0,27,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.34), 0 0 5px rgba(255,58,122,0.14);
  transform: translateY(0) scale(0.72);
}
.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}

/* animation timing */
.experience__feature:hover .experience__juice-source,
.experience__feature:focus-visible .experience__juice-source {
  animation: fr-syrup-source 320ms ease forwards;
}
.experience__feature:hover .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}
.experience__feature:hover .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: fr-syrup-trace 1.34s cubic-bezier(0.35, 0.05, 0.25, 1) forwards;
}
.experience__feature:hover .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: fr-syrup-trace 1.34s cubic-bezier(0.35, 0.05, 0.25, 1) forwards;
}
.experience__feature:hover .experience__juice-corner--tl,
.experience__feature:focus-visible .experience__juice-corner--tl {
  animation: fr-syrup-corner 260ms 0.42s ease forwards;
}
.experience__feature:hover .experience__juice-corner--tr,
.experience__feature:focus-visible .experience__juice-corner--tr {
  animation: fr-syrup-corner 260ms 0.42s ease forwards;
}
.experience__feature:hover .experience__juice-corner--bl,
.experience__feature:focus-visible .experience__juice-corner--bl {
  animation: fr-syrup-corner 260ms 0.92s ease forwards;
}
.experience__feature:hover .experience__juice-corner--br,
.experience__feature:focus-visible .experience__juice-corner--br {
  animation: fr-syrup-corner 260ms 0.92s ease forwards;
}
.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: fr-syrup-pool 340ms 1.12s ease forwards;
}
.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: fr-syrup-drop 620ms 1.42s ease forwards;
}
.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: fr-syrup-drop-small 560ms 1.56s ease forwards;
}

@keyframes fr-syrup-trace {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fr-syrup-source {
  0% { opacity: 0; transform: translateY(-1px) scale(0.72); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fr-syrup-corner {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fr-syrup-pool {
  0% { opacity: 0; transform: scaleX(0.12); }
  100% { opacity: 1; transform: scaleX(1); }
}
@keyframes fr-syrup-drop {
  0% { opacity: 0; transform: translateY(0) scale(0.72); }
  18% { opacity: 1; }
  65% { opacity: 1; transform: translateY(6px) scale(0.92, 1.06); }
  100% { opacity: 0; transform: translateY(11px) scale(0.96, 1.12); }
}
@keyframes fr-syrup-drop-small {
  0% { opacity: 0; transform: translateY(0) scale(0.68); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px) scale(0.9, 1.02); }
}


/* v8 final override: real raspberry syrup on exact card contour */
.experience__artboard::before,
.experience__artboard::after,
.experience__stage::before,
.experience__stage::after {
  content: "";
  position: absolute;
  bottom: 0;
  z-index: 6;
  pointer-events: none;
}
/* small corner masks only for remaining floor ingredients, do not cover cards */
.experience__artboard::before,
.experience__stage::before {
  left: 0;
  width: 20%;
  height: 14%;
  background: radial-gradient(ellipse at 28% 72%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.96) 48%, rgba(0,0,0,0) 100%);
}
.experience__artboard::after,
.experience__stage::after {
  right: 0;
  width: 20%;
  height: 14%;
  background: radial-gradient(ellipse at 72% 72%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.96) 48%, rgba(0,0,0,0) 100%);
}

.experience__visual,
.experience__screen { transform: translateY(4.7%); }

.experience__feature {
  z-index: 10;
  width: 19.0%;
  min-height: 17.1%;
  border-radius: 24px;
  overflow: visible;
}
.experience__feature--left-top { left: 8.0%; top: 31.2%; }
.experience__feature--left-mid { left: 8.0%; top: 52.5%; }
.experience__feature--left-bottom { left: 8.0%; top: 73.8%; }
.experience__feature--right-top { left: 73.0%; top: 31.2%; }
.experience__feature--right-bottom { left: 73.0%; top: 52.5%; }
.experience__feature--right-lower { left: 73.0%; top: 73.8%; }

.experience__feature-title,
.experience__feature--best .experience__feature-title {
  font-size: clamp(17.8px, 1.38vw, 25px) !important;
}
.experience__feature-text,
.experience__feature--best .experience__feature-text {
  font-size: clamp(11.8px, 0.93vw, 16px) !important;
}

.experience__berries {
  left: 8%;
  right: 8%;
  top: -18px;
  height: 18px;
  overflow: hidden;
  z-index: 1;
}
.experience__berry {
  z-index: 1;
  opacity: 0;
  transform: translateY(9px) scale(0.82) rotate(var(--berry-rot, 0deg));
}
.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1;
  transform: translateY(1px) scale(1) rotate(var(--berry-rot, 0deg));
}

.experience__feature > :not(.experience__juice):not(.experience__berries) {
  position: relative;
  z-index: 4;
}

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.experience__juice::before,
.experience__juice::after,
.experience__juice-stream {
  display: none !important;
}

.experience__juice-svg {
  display: block !important;
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  overflow: visible;
}
.experience__juice-path,
.experience__juice-path-highlight {
  display: block !important;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
/* syrup body */
.experience__juice-path {
  stroke: rgba(194, 10, 63, 0.86);
  stroke-width: 8.4;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.10)) drop-shadow(0 0 4px rgba(117,0,31,0.12));
}
/* glossy highlight on the syrup */
.experience__juice-path-highlight {
  stroke: rgba(255, 245, 249, 0.56);
  stroke-width: 2.3;
}

.experience__juice-source,
.experience__juice-corner,
.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
  z-index: 2;
}
.experience__juice-source {
  left: 50%;
  top: -7px;
  width: 20px;
  height: 14px;
  margin-left: -10px;
  border-radius: 999px 999px 76% 76%;
  background: radial-gradient(circle at 34% 24%, rgba(255,250,251,0.95) 0%, rgba(255,204,221,0.92) 18%, rgba(227,29,91,0.98) 52%, rgba(143,0,40,0.98) 82%, rgba(88,0,22,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.36), 0 1px 3px rgba(76,0,18,0.18);
}
.experience__juice-source::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 1px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.50), rgba(255,255,255,0) 100%);
}

.experience__juice-corner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 24%, rgba(255,249,251,0.94) 0%, rgba(255,196,214,0.90) 22%, rgba(223,28,89,0.98) 58%, rgba(138,0,37,0.98) 84%, rgba(86,0,22,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.28);
}
.experience__juice-corner--tl { left: -3px; top: -3px; }
.experience__juice-corner--tr { right: -3px; top: -3px; }
.experience__juice-corner--bl { left: -3px; bottom: -3px; }
.experience__juice-corner--br { right: -3px; bottom: -3px; }

.experience__juice-pool {
  left: 50%;
  bottom: -6px;
  width: 46px;
  height: 16px;
  margin-left: -23px;
  border-radius: 999px 999px 84% 84%;
  background: radial-gradient(circle at 34% 22%, rgba(255,248,250,0.96) 0%, rgba(255,193,212,0.92) 18%, rgba(229,34,96,0.98) 54%, rgba(145,0,41,0.98) 82%, rgba(89,0,22,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.42), 0 1px 4px rgba(76,0,18,0.18);
  transform: scaleX(0.18);
}
.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 8px; right: 8px; top: 1px; height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0) 100%);
}
.experience__juice-drop {
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 14px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background: radial-gradient(circle at 35% 24%, rgba(255,247,250,0.94) 0%, rgba(255,177,199,0.92) 18%, rgba(231,40,103,0.99) 54%, rgba(148,0,43,1) 82%, rgba(95,0,27,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.36), 0 1px 3px rgba(76,0,18,0.16);
  transform: translateY(0) scale(0.70, 0.82);
}
.experience__juice-drop--2 { width: 6px; height: 10px; margin-left: 6px; }

.experience__feature:hover .experience__juice-source,
.experience__feature:focus-visible .experience__juice-source {
  animation: fr-syrup-source-v8 240ms ease forwards;
}
.experience__feature:hover .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}
.experience__feature:hover .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: fr-syrup-trace-v8 1.52s linear forwards;
}
.experience__feature:hover .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: fr-syrup-trace-v8 1.52s linear forwards;
}
.experience__feature:hover .experience__juice-corner--tl,
.experience__feature:focus-visible .experience__juice-corner--tl,
.experience__feature:hover .experience__juice-corner--tr,
.experience__feature:focus-visible .experience__juice-corner--tr {
  animation: fr-syrup-corner-v8 220ms 0.42s ease forwards;
}
.experience__feature:hover .experience__juice-corner--bl,
.experience__feature:focus-visible .experience__juice-corner--bl,
.experience__feature:hover .experience__juice-corner--br,
.experience__feature:focus-visible .experience__juice-corner--br {
  animation: fr-syrup-corner-v8 220ms 1.01s ease forwards;
}
.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: fr-syrup-pool-v8 280ms 1.20s ease forwards;
}
.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: fr-syrup-drop-v8 680ms 1.44s ease forwards;
}
.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: fr-syrup-drop-small-v8 560ms 1.58s ease forwards;
}

/* slower around rounded corners for more viscous feel */
@keyframes fr-syrup-trace-v8 {
  0% { stroke-dashoffset: 100; }
  18% { stroke-dashoffset: 82; }
  30% { stroke-dashoffset: 75; }
  44% { stroke-dashoffset: 61; }
  58% { stroke-dashoffset: 44; }
  72% { stroke-dashoffset: 28; }
  82% { stroke-dashoffset: 21; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fr-syrup-source-v8 {
  from { opacity: 0; transform: translateY(-2px) scale(0.62); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fr-syrup-corner-v8 {
  from { opacity: 0; transform: scale(0.64); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fr-syrup-pool-v8 {
  from { opacity: 0; transform: scaleX(0.18); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes fr-syrup-drop-v8 {
  0% { opacity: 0; transform: translateY(0) scale(0.68, 0.82); }
  18% { opacity: 1; }
  55% { opacity: 1; transform: translateY(3px) scale(0.82, 1.12); }
  78% { opacity: 1; transform: translateY(6px) scale(0.92, 1.28); }
  100% { opacity: 0; transform: translateY(11px) scale(0.98, 1.36); }
}
@keyframes fr-syrup-drop-small-v8 {
  0% { opacity: 0; transform: translateY(0) scale(0.66, 0.80); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px) scale(0.88, 1.06); }
}


/* v9 FINAL: animate only realistic raspberry syrup along card contour */
/* keep cards unchanged; only fix syrup + prevent masks from hiding lower cards */
.experience__artboard::before,
.experience__artboard::after,
.experience__stage::before,
.experience__stage::after {
  content: none !important;
  display: none !important;
}

.experience__juice,
.experience__juice * {
  pointer-events: none;
}

/* disable all previous line/outline variants */
.experience__juice::before,
.experience__juice::after,
.experience__juice-stream {
  display: none !important;
}

.experience__juice {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.experience__juice-svg {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.experience__juice-path,
.experience__juice-path-highlight {
  display: block !important;
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

/* main syrup body: deep raspberry, glossy, slightly translucent */
.experience__juice-path {
  stroke: rgba(195, 7, 61, 0.84);
  stroke-width: 7.4;
  filter:
    drop-shadow(0 0.6px 0 rgba(255,255,255,0.12))
    drop-shadow(0 0 2px rgba(120, 0, 33, 0.16));
}

/* thin wet highlight inside the syrup */
.experience__juice-path-highlight {
  stroke: rgba(255, 246, 250, 0.50);
  stroke-width: 2.1;
}

.experience__juice-source,
.experience__juice-corner,
.experience__juice-pool,
.experience__juice-drop {
  position: absolute;
  opacity: 0;
  z-index: 2;
}

/* source droplet in exact top center */
.experience__juice-source {
  left: 50%;
  top: -5px;
  width: 18px;
  height: 14px;
  margin-left: -9px;
  border-radius: 999px 999px 76% 76%;
  background:
    radial-gradient(circle at 34% 22%, rgba(255, 249, 251, 0.96) 0%, rgba(255, 198, 216, 0.92) 18%, rgba(224, 26, 89, 0.98) 54%, rgba(144, 0, 40, 0.98) 82%, rgba(87, 0, 22, 1) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.34),
    0 1px 2px rgba(69,0,18,0.18);
}
.experience__juice-source::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.46), rgba(255,255,255,0) 100%);
}

/* thicker rounded accumulations on corners */
.experience__juice-corner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 249, 251, 0.94) 0%, rgba(255, 190, 211, 0.90) 22%, rgba(222, 24, 86, 0.98) 58%, rgba(138, 0, 36, 0.98) 84%, rgba(86, 0, 22, 1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.24);
}
.experience__juice-corner--tl { left: -2px; top: -2px; }
.experience__juice-corner--tr { right: -2px; top: -2px; }
.experience__juice-corner--bl { left: -2px; bottom: -2px; }
.experience__juice-corner--br { right: -2px; bottom: -2px; }

/* merged hanging drop at bottom center */
.experience__juice-pool {
  left: 50%;
  bottom: -5px;
  width: 44px;
  height: 14px;
  margin-left: -22px;
  border-radius: 999px 999px 84% 84%;
  background:
    radial-gradient(circle at 34% 22%, rgba(255,248,250,0.96) 0%, rgba(255,194,212,0.92) 18%, rgba(228,31,94,0.98) 54%, rgba(144,0,40,0.98) 82%, rgba(88,0,22,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.38), 0 1px 3px rgba(69,0,18,0.15);
  transform: scaleX(0.20);
}
.experience__juice-pool::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0) 100%);
}

.experience__juice-drop {
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 14px;
  margin-left: -5px;
  border-radius: 999px 999px 72% 72%;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,247,250,0.94) 0%, rgba(255,177,199,0.92) 18%, rgba(231,40,103,0.99) 54%, rgba(148,0,43,1) 82%, rgba(95,0,27,1) 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.30), 0 1px 3px rgba(69,0,18,0.14);
  transform: translateY(0) scale(0.70, 0.82);
}
.experience__juice-drop--2 {
  width: 6px;
  height: 10px;
  margin-left: 6px;
}

/* only animate juice; cards remain visually unchanged */
.experience__feature:hover .experience__juice-source,
.experience__feature:focus-visible .experience__juice-source {
  animation: fr-juice-source-v9 240ms ease forwards;
}
.experience__feature:hover .experience__juice-path,
.experience__feature:hover .experience__juice-path-highlight,
.experience__feature:focus-visible .experience__juice-path,
.experience__feature:focus-visible .experience__juice-path-highlight {
  opacity: 1;
}
.experience__feature:hover .experience__juice-path--left,
.experience__feature:hover .experience__juice-path-highlight--left,
.experience__feature:focus-visible .experience__juice-path--left,
.experience__feature:focus-visible .experience__juice-path-highlight--left {
  animation: fr-juice-trace-v9 1.58s linear forwards;
}
.experience__feature:hover .experience__juice-path--right,
.experience__feature:hover .experience__juice-path-highlight--right,
.experience__feature:focus-visible .experience__juice-path--right,
.experience__feature:focus-visible .experience__juice-path-highlight--right {
  animation: fr-juice-trace-v9 1.58s linear forwards;
}
.experience__feature:hover .experience__juice-corner--tl,
.experience__feature:focus-visible .experience__juice-corner--tl,
.experience__feature:hover .experience__juice-corner--tr,
.experience__feature:focus-visible .experience__juice-corner--tr {
  animation: fr-juice-corner-v9 220ms 0.40s ease forwards;
}
.experience__feature:hover .experience__juice-corner--bl,
.experience__feature:focus-visible .experience__juice-corner--bl,
.experience__feature:hover .experience__juice-corner--br,
.experience__feature:focus-visible .experience__juice-corner--br {
  animation: fr-juice-corner-v9 220ms 1.05s ease forwards;
}
.experience__feature:hover .experience__juice-pool,
.experience__feature:focus-visible .experience__juice-pool {
  animation: fr-juice-pool-v9 300ms 1.24s ease forwards;
}
.experience__feature:hover .experience__juice-drop--1,
.experience__feature:focus-visible .experience__juice-drop--1 {
  animation: fr-juice-drop-v9 700ms 1.48s ease forwards;
}
.experience__feature:hover .experience__juice-drop--2,
.experience__feature:focus-visible .experience__juice-drop--2 {
  animation: fr-juice-drop-small-v9 580ms 1.60s ease forwards;
}

/* progression with slight slow-down near rounded corners for viscous feel */
@keyframes fr-juice-trace-v9 {
  0% { stroke-dashoffset: 100; }
  14% { stroke-dashoffset: 87; }
  24% { stroke-dashoffset: 79; }
  33% { stroke-dashoffset: 71; }
  45% { stroke-dashoffset: 55; }
  59% { stroke-dashoffset: 38; }
  71% { stroke-dashoffset: 27; }
  81% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
@keyframes fr-juice-source-v9 {
  from { opacity: 0; transform: translateY(-1px) scale(0.64); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fr-juice-corner-v9 {
  from { opacity: 0; transform: scale(0.62); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fr-juice-pool-v9 {
  from { opacity: 0; transform: scaleX(0.20); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes fr-juice-drop-v9 {
  0% { opacity: 0; transform: translateY(0) scale(0.70, 0.82); }
  16% { opacity: 1; }
  56% { opacity: 1; transform: translateY(3px) scale(0.82, 1.12); }
  78% { opacity: 1; transform: translateY(6px) scale(0.92, 1.28); }
  100% { opacity: 0; transform: translateY(11px) scale(0.98, 1.36); }
}
@keyframes fr-juice-drop-small-v9 {
  0% { opacity: 0; transform: translateY(0) scale(0.66, 0.80); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(8px) scale(0.88, 1.06); }
}


/* v10: remove failed syrup/outline animation; keep only small raspberries on hover */
.experience__visual,
.experience__screen {
  transform: translateY(calc(4.7% + 10px)) !important;
}

/* No juice / outline / syrup / glowing contour on hover */
.experience__juice,
.experience__juice *,
.experience__juice::before,
.experience__juice::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

/* Keep the cards visually unchanged on hover; only raspberries appear */
.experience__feature:hover,
.experience__feature:focus-visible {
  transform: none !important;
  filter: none !important;
  border-color: rgba(255, 117, 160, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 246, 0.14),
    inset 0 0 24px rgba(255, 55, 122, 0.07),
    inset 0 -8px 24px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 46, 114, 0.03),
    0 0 18px rgba(255, 46, 114, 0.18),
    0 24px 44px rgba(0, 0, 0, 0.72) !important;
}

.experience__feature:hover .experience__feature-icon,
.experience__feature:focus-visible .experience__feature-icon {
  transform: none !important;
  border-color: rgba(255, 130, 170, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 244, 0.14),
    inset 0 0 18px rgba(255, 46, 114, 0.08),
    0 0 18px rgba(255, 55, 119, 0.16) !important;
}

.experience__feature:hover .experience__feature-icon svg,
.experience__feature:focus-visible .experience__feature-icon svg {
  stroke: #ff789f !important;
  filter: drop-shadow(0 0 6px rgba(255, 60, 126, 0.34)) !important;
  transform: none !important;
}

/* Only the small raspberries remain as the hover animation */
.experience__berries {
  left: 8% !important;
  right: 8% !important;
  top: -18px !important;
  height: 18px !important;
  overflow: hidden !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.experience__berry {
  opacity: 0 !important;
  width: clamp(22px, 1.8vw, 32px) !important;
  z-index: 1 !important;
  transform: translateY(9px) scale(0.82) rotate(var(--berry-rot, 0deg)) !important;
  transition:
    opacity 240ms ease,
    transform 520ms cubic-bezier(0.18, 0.9, 0.22, 1) !important;
}

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1 !important;
  transform: translateY(1px) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}


/* v11: crisp side-card typography + hide lower corner ingredients on experience background */

/* keep card design, only make typography sharper and more premium */
.experience__feature-copy,
.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  font-family: var(--font-cyrillic), "VAG Rounded Next Extra-bold 800", "Arial Rounded MT Bold", sans-serif !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}

.experience__feature-copy {
  transform: translateZ(0);
}

.experience__feature-title {
  color: #fffafc !important;
  letter-spacing: -0.035em !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.42),
    0 0 10px rgba(255, 61, 126, 0.08) !important;
}

.experience__feature-text,
.experience__feature-text p {
  color: rgba(255, 233, 241, 0.98) !important;
  letter-spacing: -0.018em !important;
  line-height: 1.22 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38) !important;
}

/* cover bottom-left and bottom-right background ingredients only */
.experience__artboard::before,
.experience__artboard::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  bottom: -1.2%;
  width: 18%;
  height: 12.5%;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.985) 44%, rgba(0, 0, 0, 0.88) 62%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.96) 68%, rgba(0,0,0,1) 100%);
}

.experience__artboard::before {
  left: -0.6%;
}

.experience__artboard::after {
  right: -0.6%;
}


/* v12: sharper card text, remove remaining lower ingredients, raspberries around full card on hover */

/* sharpen text rendering inside side cards without changing card layout/design */
.experience__feature-copy,
.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  font-family: var(--font-cyrillic), "VAG Rounded Cyrillic Black", "VAG Rounded Next Extra-bold 800", "Arial Rounded MT Bold", sans-serif !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  transform: translateZ(0);
}

.experience__feature-title {
  color: #fffafd !important;
  letter-spacing: -0.032em !important;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.34),
    0 0 5px rgba(255, 72, 133, 0.06) !important;
}

.experience__feature-text,
.experience__feature-text p {
  color: rgba(255, 236, 244, 0.98) !important;
  letter-spacing: -0.014em !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.34) !important;
}

/* carefully black out only the lower side background areas where the ingredients remain.
   Cards are above this layer; the TV/screen remain untouched. */
.experience__artboard::before,
.experience__artboard::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 69.5% !important;
  height: 31.5% !important;
  z-index: 7 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.995) 44%, rgba(0, 0, 0, 0.94) 66%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.98) 58%, rgba(0,0,0,1) 100%) !important;
}

.experience__artboard::before {
  left: -1.5% !important;
  width: 29.2% !important;
}

.experience__artboard::after {
  right: -1.5% !important;
  width: 29.2% !important;
}

/* Make sure cards stay above cleanup masks */
.experience__feature {
  z-index: 10 !important;
}

/* No syrup/outline animation; only raspberries appear */
.experience__juice,
.experience__juice *,
.experience__juice::before,
.experience__juice::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

/* Raspberries are positioned behind the card and peek out from all sides */
.experience__berries {
  position: absolute !important;
  inset: -18px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.experience__berry {
  position: absolute !important;
  width: clamp(14px, 1.08vw, 22px) !important;
  aspect-ratio: 1 !important;
  opacity: 0 !important;
  z-index: -1 !important;
  background: url("../assets/frambini/01-hero/images/cutouts/raspberry/01-hero-raspberry-set-v01.png") center / contain no-repeat !important;
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.42))
    drop-shadow(0 0 7px rgba(255, 44, 108, 0.16)) !important;
  transform: translate(var(--berry-x, 0), var(--berry-y, 0)) scale(0.72) rotate(var(--berry-rot, 0deg)) !important;
  transition:
    opacity 240ms ease,
    transform 520ms cubic-bezier(0.18, 0.9, 0.22, 1) !important;
}

/* top edge */
.experience__berry--1 { left: 12%; top: 4px; --berry-x: 0; --berry-y: 10px; --berry-rot: -12deg; }
.experience__berry--2 { left: 31%; top: -3px; --berry-x: 0; --berry-y: 12px; --berry-rot: 9deg; }
.experience__berry--3 { left: 53%; top: 3px; --berry-x: 0; --berry-y: 10px; --berry-rot: -6deg; }
.experience__berry--4 { left: 76%; top: -2px; --berry-x: 0; --berry-y: 12px; --berry-rot: 13deg; }

/* left side */
.experience__berry--5 { left: -6px; top: 28%; --berry-x: 12px; --berry-y: 0; --berry-rot: 11deg; }
.experience__berry--6 { left: 2px; top: 62%; --berry-x: 10px; --berry-y: 0; --berry-rot: -8deg; }

/* right side */
.experience__berry--7 { right: -7px; top: 24%; --berry-x: -12px; --berry-y: 0; --berry-rot: -13deg; }
.experience__berry--8 { right: 2px; top: 58%; --berry-x: -10px; --berry-y: 0; --berry-rot: 10deg; }

/* bottom edge */
.experience__berry--9 { left: 18%; bottom: -4px; --berry-x: 0; --berry-y: -10px; --berry-rot: 7deg; }
.experience__berry--10 { left: 42%; bottom: 2px; --berry-x: 0; --berry-y: -9px; --berry-rot: -11deg; }
.experience__berry--11 { left: 63%; bottom: -3px; --berry-x: 0; --berry-y: -10px; --berry-rot: 14deg; }
.experience__berry--12 { left: 82%; bottom: 4px; --berry-x: 0; --berry-y: -8px; --berry-rot: -7deg; }

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}

/* tiny stagger so they feel organic, not mechanical */
.experience__berry--1 { transition-delay: 20ms !important; }
.experience__berry--2 { transition-delay: 70ms !important; }
.experience__berry--3 { transition-delay: 120ms !important; }
.experience__berry--4 { transition-delay: 170ms !important; }
.experience__berry--5 { transition-delay: 55ms !important; }
.experience__berry--6 { transition-delay: 155ms !important; }
.experience__berry--7 { transition-delay: 95ms !important; }
.experience__berry--8 { transition-delay: 205ms !important; }
.experience__berry--9 { transition-delay: 115ms !important; }
.experience__berry--10 { transition-delay: 185ms !important; }
.experience__berry--11 { transition-delay: 235ms !important; }
.experience__berry--12 { transition-delay: 275ms !important; }


/* v13: berries peek from BEHIND cards + clearer premium card typography */

/* Replace the heavy rounded card text with a clearer premium UI stack. */
.experience__feature-copy,
.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  font-family: "Inter", "Manrope", "Avenir Next", "Segoe UI", Arial, sans-serif !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.experience__feature-title {
  font-weight: 800 !important;
  font-size: clamp(18px, 1.24vw, 24px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #fff8fb !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.42),
    0 0 8px rgba(255, 70, 134, 0.08) !important;
}

.experience__feature-text,
.experience__feature-text p {
  font-weight: 650 !important;
  font-size: clamp(12px, 0.84vw, 15.5px) !important;
  line-height: 1.27 !important;
  letter-spacing: -0.012em !important;
  color: rgba(255, 235, 243, 0.98) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.34) !important;
}

.experience__feature--best .experience__feature-title {
  font-size: clamp(17px, 1.16vw, 22.5px) !important;
}

.experience__feature--best .experience__feature-text,
.experience__feature--best .experience__feature-text p {
  font-size: clamp(10.8px, 0.76vw, 14px) !important;
  line-height: 1.22 !important;
}

/* Berries remain the only hover animation, but now they are visually BEHIND the glass card. */
.experience__feature {
  overflow: visible !important;
}

.experience__berries {
  position: absolute !important;
  inset: -18px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.experience__berry {
  position: absolute !important;
  width: clamp(15px, 1.08vw, 22px) !important;
  aspect-ratio: 1 !important;
  opacity: 0 !important;
  z-index: 1 !important;
  background: url("../assets/frambini/01-hero/images/cutouts/raspberry/01-hero-raspberry-set-v01.png") center / contain no-repeat !important;
  filter:
    drop-shadow(0 5px 8px rgba(0, 0, 0, 0.44))
    drop-shadow(0 0 6px rgba(255, 44, 108, 0.14)) !important;
  transform: translate(var(--berry-x, 0), var(--berry-y, 0)) scale(0.72) rotate(var(--berry-rot, 0deg)) !important;
  transition:
    opacity 230ms ease,
    transform 500ms cubic-bezier(0.18, 0.9, 0.22, 1) !important;
}

/* crop the part that would sit over the card, so it reads as hidden behind the card */
.experience__berry--1,
.experience__berry--2,
.experience__berry--3,
.experience__berry--4 {
  clip-path: inset(0 0 48% 0 round 999px) !important;
}

.experience__berry--5,
.experience__berry--6 {
  clip-path: inset(0 48% 0 0 round 999px) !important;
}

.experience__berry--7,
.experience__berry--8 {
  clip-path: inset(0 0 0 48% round 999px) !important;
}

.experience__berry--9,
.experience__berry--10,
.experience__berry--11,
.experience__berry--12 {
  clip-path: inset(48% 0 0 0 round 999px) !important;
}

/* top edge: only upper halves peek out */
.experience__berry--1 { left: 12%; top: 2px; --berry-x: 0; --berry-y: 10px; --berry-rot: -12deg; }
.experience__berry--2 { left: 31%; top: -5px; --berry-x: 0; --berry-y: 12px; --berry-rot: 9deg; }
.experience__berry--3 { left: 53%; top: 1px; --berry-x: 0; --berry-y: 10px; --berry-rot: -6deg; }
.experience__berry--4 { left: 76%; top: -4px; --berry-x: 0; --berry-y: 12px; --berry-rot: 13deg; }

/* sides: only outside halves peek out */
.experience__berry--5 { left: 1px; top: 26%; --berry-x: 11px; --berry-y: 0; --berry-rot: 11deg; }
.experience__berry--6 { left: 5px; top: 61%; --berry-x: 10px; --berry-y: 0; --berry-rot: -8deg; }
.experience__berry--7 { right: 1px; top: 23%; --berry-x: -11px; --berry-y: 0; --berry-rot: -13deg; }
.experience__berry--8 { right: 5px; top: 58%; --berry-x: -10px; --berry-y: 0; --berry-rot: 10deg; }

/* bottom edge: only lower halves peek out */
.experience__berry--9 { left: 18%; bottom: -5px; --berry-x: 0; --berry-y: -10px; --berry-rot: 7deg; }
.experience__berry--10 { left: 42%; bottom: 0; --berry-x: 0; --berry-y: -9px; --berry-rot: -11deg; }
.experience__berry--11 { left: 63%; bottom: -5px; --berry-x: 0; --berry-y: -10px; --berry-rot: 14deg; }
.experience__berry--12 { left: 82%; bottom: 2px; --berry-x: 0; --berry-y: -8px; --berry-rot: -7deg; }

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}

/* keep the card visually above the berries */
.experience__feature > :not(.experience__berries):not(.experience__juice) {
  position: relative !important;
  z-index: 4 !important;
}

/* no syrup / no outlines */
.experience__juice,
.experience__juice *,
.experience__juice::before,
.experience__juice::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}


/* v15: restore normal cards, berries truly behind cards, clearer serif text, TV/video fixed */

/* TV and video: undo excessive downward shift, keep both aligned, keep video inside screen */
.experience__visual,
.experience__screen {
  transform: translateY(10px) !important;
}

.experience__screen {
  left: 30.06% !important;
  top: 29.25% !important;
  width: 40.72% !important;
  height: 41.85% !important;
  z-index: 1 !important;
  background: #000 !important;
}

.experience__visual {
  z-index: 2 !important;
}

.experience__screen-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #000 !important;
}

/* remove leftover ingredient fragments in lower side corners only; do not touch TV center */
.experience__artboard::before,
.experience__artboard::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 71.8% !important;
  height: 29.2% !important;
  width: 27.8% !important;
  z-index: 6 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.995) 46%, rgba(0,0,0,0.94) 68%, rgba(0,0,0,0.35) 84%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.98) 58%, rgba(0,0,0,1) 100%) !important;
}

.experience__artboard::before { left: -1.8% !important; }
.experience__artboard::after { right: -1.8% !important; }

/* Restore normal card footprint and layout */
.experience__feature {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: clamp(54px, 4vw, 76px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(13px, 1vw, 18px) !important;
  padding: clamp(18px, 1.3vw, 22px) clamp(18px, 1.24vw, 23px) !important;
  width: 19.0% !important;
  min-height: 17.1% !important;
  border-radius: 24px !important;
  color: #fff8fb !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: isolate !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.experience__feature--left-top { left: 8.0% !important; top: 31.2% !important; }
.experience__feature--left-mid { left: 8.0% !important; top: 52.5% !important; }
.experience__feature--left-bottom { left: 8.0% !important; top: 73.8% !important; }
.experience__feature--right-top { left: 73.0% !important; top: 31.2% !important; }
.experience__feature--right-bottom { left: 73.0% !important; top: 52.5% !important; }
.experience__feature--right-lower { left: 73.0% !important; top: 73.8% !important; }

/* Real card surface is drawn as a layer above berries, so berries are not clipped — they are simply behind it. */
.experience__feature::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(84, 18, 35, 0.88), rgba(24, 3, 11, 0.96) 42%, rgba(2, 0, 2, 0.995)),
    radial-gradient(circle at 18% 16%, rgba(255, 231, 239, 0.12), transparent 40%) !important;
  border: 1px solid rgba(255, 117, 160, 0.56) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 246, 0.14),
    inset 0 0 24px rgba(255, 55, 122, 0.07),
    inset 0 -8px 24px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(255, 46, 114, 0.03),
    0 0 18px rgba(255, 46, 114, 0.18),
    0 24px 44px rgba(0, 0, 0, 0.72) !important;
}

.experience__feature::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 5.5% !important;
  right: 5.5% !important;
  top: 9px !important;
  z-index: 3 !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 246, 250, 0.58), rgba(255, 42, 115, 0.90), rgba(255, 246, 250, 0.50), transparent) !important;
  box-shadow: 0 0 14px rgba(255, 47, 117, 0.32) !important;
  opacity: 0.88 !important;
}

.experience__feature:hover,
.experience__feature:focus-visible {
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.experience__feature:hover::before,
.experience__feature:focus-visible::before {
  border-color: rgba(255, 170, 198, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 248, 0.16),
    inset 0 0 28px rgba(255, 54, 122, 0.11),
    inset 0 -8px 24px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 219, 232, 0.06),
    0 0 26px rgba(255, 56, 122, 0.30),
    0 24px 52px rgba(0, 0, 0, 0.74) !important;
}

.experience__feature > :not(.experience__berries):not(.experience__juice) {
  position: relative !important;
  z-index: 4 !important;
}

/* Make icon/copy line up as before despite pseudo-layer background */
.experience__feature-icon {
  width: clamp(54px, 4vw, 76px) !important;
}

/* Typography: use the same serif feeling as the white headline, but sized for small cards. */
.experience__feature-copy,
.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  font-family: Georgia, "Times New Roman", serif !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.experience__feature-title {
  font-weight: 700 !important;
  font-size: clamp(18px, 1.22vw, 24px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.035em !important;
  color: #fffafc !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.44), 0 0 5px rgba(255,72,131,0.05) !important;
}

.experience__feature-text,
.experience__feature-text p {
  font-weight: 700 !important;
  font-size: clamp(12.4px, 0.86vw, 15.2px) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  color: rgba(255, 240, 246, 0.985) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.34) !important;
}

.experience__feature--best .experience__feature-title {
  font-size: clamp(17px, 1.08vw, 22px) !important;
}

.experience__feature--best .experience__feature-text,
.experience__feature--best .experience__feature-text p {
  font-size: clamp(11px, 0.74vw, 13.4px) !important;
  line-height: 1.19 !important;
}

/* No syrup / outlines. */
.experience__juice,
.experience__juice *,
.experience__juice::before,
.experience__juice::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

/* Berries are full images, NOT clipped. They are lower layer; the card pseudo-layer hides the overlapping part. */
.experience__berries {
  position: absolute !important;
  inset: -18px !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.experience__berry {
  position: absolute !important;
  width: clamp(16px, 1.08vw, 22px) !important;
  aspect-ratio: 1 !important;
  opacity: 0 !important;
  z-index: 1 !important;
  clip-path: none !important;
  background: url("../assets/frambini/01-hero/images/cutouts/raspberry/01-hero-raspberry-set-v01.png") center / contain no-repeat !important;
  filter: drop-shadow(0 6px 9px rgba(0,0,0,0.42)) drop-shadow(0 0 6px rgba(255,44,108,0.12)) !important;
  transform: translate(var(--berry-x, 0), var(--berry-y, 0)) scale(0.74) rotate(var(--berry-rot, 0deg)) !important;
  transition: opacity 220ms ease, transform 500ms cubic-bezier(0.18, 0.9, 0.22, 1) !important;
}

.experience__berry--1 { left: 10%; top: -10px; --berry-x: 0; --berry-y: 11px; --berry-rot: -12deg; }
.experience__berry--2 { left: 28%; top: -12px; --berry-x: 0; --berry-y: 13px; --berry-rot: 8deg; }
.experience__berry--3 { left: 49%; top: -9px; --berry-x: 0; --berry-y: 10px; --berry-rot: -6deg; }
.experience__berry--4 { left: 72%; top: -12px; --berry-x: 0; --berry-y: 13px; --berry-rot: 12deg; }
.experience__berry--5 { left: -11px; top: 25%; --berry-x: 12px; --berry-y: 0; --berry-rot: 10deg; }
.experience__berry--6 { left: -10px; top: 61%; --berry-x: 11px; --berry-y: 0; --berry-rot: -8deg; }
.experience__berry--7 { right: -11px; top: 22%; --berry-x: -12px; --berry-y: 0; --berry-rot: -12deg; }
.experience__berry--8 { right: -10px; top: 58%; --berry-x: -11px; --berry-y: 0; --berry-rot: 9deg; }
.experience__berry--9 { left: 16%; bottom: -10px; --berry-x: 0; --berry-y: -11px; --berry-rot: 7deg; }
.experience__berry--10 { left: 38%; bottom: -12px; --berry-x: 0; --berry-y: -10px; --berry-rot: -9deg; }
.experience__berry--11 { left: 61%; bottom: -11px; --berry-x: 0; --berry-y: -11px; --berry-rot: 13deg; }
.experience__berry--12 { left: 82%; bottom: -10px; --berry-x: 0; --berry-y: -9px; --berry-rot: -7deg; }

.experience__feature:hover .experience__berry,
.experience__feature:focus-visible .experience__berry {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}


/* v21 clean revert: hover video only inside "Ручной отбор ягод".
   No admin layout overrides, no global overlay, no square constraint. */
.experience__feature-hover-video--manual-berries,
.experience__artboard > .experience__feature-hover-video {
  display: none !important;
}

/* Transparent chromakeyed WebM sits over the same card and has exactly card size. */
.experience__feature--right-top {
  position: absolute !important;
  overflow: visible !important;
}

.experience__feature--right-top > .experience__feature-hover-video {
  position: absolute !important;
  inset: 0 !important;
  z-index: 70 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  border-radius: inherit !important;
  background: transparent !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  transition: opacity 120ms ease !important;
}

.experience__feature--right-top:hover > .experience__feature-hover-video,
.experience__feature--right-top:focus-visible > .experience__feature-hover-video,
.experience__feature--right-top.is-hover-video-active > .experience__feature-hover-video {
  opacity: 1 !important;
}

/* Keep card/text/icon in place. The transparent video is only an overlay. */
.experience__feature--right-top:hover > .experience__feature-icon,
.experience__feature--right-top:hover > .experience__feature-copy,
.experience__feature--right-top:focus-visible > .experience__feature-icon,
.experience__feature--right-top:focus-visible > .experience__feature-copy,
.experience__feature--right-top.is-hover-video-active > .experience__feature-icon,
.experience__feature--right-top.is-hover-video-active > .experience__feature-copy {
  visibility: visible !important;
}


/* v24: independent hover-video layers.
   Hover videos are no longer children of cards, so resizing them cannot resize/move cards. */
.experience__hover-video-layers {
  position: absolute;
  inset: 0;
  z-index: 72;
  pointer-events: none;
}

.experience__hover-video-layer {
  position: absolute;
  display: block;
  z-index: 1;
  width: 19%;
  height: 17.1%;
  border-radius: 24px;
  object-fit: fill;
  object-position: center center;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transform-origin: center center;
  transition: opacity 120ms ease;
}

.experience__hover-video-layer.is-active,
.experience__hover-video-layer.is-admin-selected {
  opacity: 1 !important;
}

/* Default positions match the existing cards but the layers are fully independent. */
.experience__hover-video-layer--left-top { left: 8%; top: 31.2%; }
.experience__hover-video-layer--left-mid { left: 8%; top: 52.5%; }
.experience__hover-video-layer--left-bottom { left: 8%; top: 73.8%; }
.experience__hover-video-layer--right-top { left: 73%; top: 31.2%; }
.experience__hover-video-layer--right-bottom { left: 73%; top: 52.5%; }
.experience__hover-video-layer--right-lower { left: 73%; top: 73.8%; }

/* Disable stale child-hover-video rules if any old CSS remains. */
.experience__feature > .experience__feature-hover-video,
.experience__feature--right-top > .experience__feature-hover-video {
  display: none !important;
}

/* v24 admin readability fixes */
.fr-admin-panel__select,
.fr-admin-panel__select option {
  color: #fff7fb !important;
  background: #2a0614 !important;
}

.fr-admin-panel__select option:checked,
.fr-admin-panel__select option:hover {
  color: #fff !important;
  background: #7a163a !important;
}

.fr-admin-panel input,
.fr-admin-panel textarea {
  color: #fff7fb !important;
  caret-color: #ff7bad;
}

.fr-admin-box {
  will-change: left, top, width, height, transform;
  touch-action: none;
}

.fr-admin-mode .experience__hover-video-layer {
  will-change: left, top, width, height, transform, opacity;
}


/* v25: admin mode must not show accidental hover layers.
   Only the selected hover-video layer is visible while editing. */
.fr-admin-mode .experience__hover-video-layer {
  opacity: 0 !important;
}

.fr-admin-mode .experience__hover-video-layer.is-admin-selected {
  opacity: 1 !important;
}

.fr-admin-mode .experience__hover-video-layer.is-active:not(.is-admin-selected) {
  opacity: 0 !important;
}


/* v36: virtual TV assembly control used by the admin panel.
   The box follows the visible TV, while the actual frame and screen remain separate elements. */
.experience__tv-control {
  position: absolute;
  left: 28.5%;
  top: 27%;
  width: 43%;
  height: 50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}

.fr-admin-mode .experience__tv-control {
  display: block;
}


/* v37: keep side floor ingredients hidden even when the TV is moved lower; make icons closer to the approved reference */
.experience__artboard::before,
.experience__artboard::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 72.2% !important;
  width: 29.5% !important;
  height: 27.8% !important;
  z-index: 7 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.74) 28%, rgba(0, 0, 0, 0.98) 58%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.94) 22%, rgba(0, 0, 0, 1) 44%, rgba(0, 0, 0, 1) 100%) !important;
  box-shadow: none !important;
}

.experience__artboard::before { left: -2% !important; }
.experience__artboard::after { right: -2% !important; }

.experience__feature-icon svg {
  stroke-width: 1.85 !important;
}

.experience__feature-icon-image--right-top {
  width: 93% !important;
  height: 93% !important;
}

.experience__feature-icon-image--right-lower {
  width: 84% !important;
  height: 84% !important;
}

/* 03 — occasions: composition rebuilt from the supplied reference and source artwork. */
.occasions {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  background: #050104;
  color: #fff8fa;
}

.occasions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 34%, rgba(141, 10, 51, 0.30), transparent 29%),
    linear-gradient(180deg, #050104 0%, #120008 52%, #050104 100%);
}

.occasions__stage {
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
}

.occasions__artboard {
  position: relative;
  isolation: isolate;
  width: min(100%, 1920px);
  aspect-ratio: 1790 / 878;
  overflow: hidden;
  container-type: inline-size;
  background: #050104;
  box-shadow:
    inset 0 0 9cqw rgba(0, 0, 0, 0.86),
    inset 0 -2.8cqw 5cqw rgba(0, 0, 0, 0.72);
}

.occasions__backdrop,
.occasions__particles,
.occasions__horizon-glow {
  position: absolute;
  pointer-events: none;
}

.occasions__backdrop {
  inset: 0;
  z-index: 0;
  background: url("../assets/frambini/03-occasions/images/03-occasions-background-with-heading-v01.png") center / cover no-repeat;
}

.occasions__particles {
  inset: 0;
  z-index: 1;
  opacity: 0.58;
  background:
    radial-gradient(circle at 8% 15%, rgba(255, 48, 112, 0.22) 0 0.13cqw, transparent 0.18cqw),
    radial-gradient(circle at 89% 25%, rgba(255, 197, 216, 0.14) 0 0.10cqw, transparent 0.16cqw),
    radial-gradient(circle at 28% 7%, rgba(255, 45, 104, 0.13) 0 0.08cqw, transparent 0.14cqw),
    radial-gradient(circle at 77% 74%, rgba(255, 46, 114, 0.16) 0 0.11cqw, transparent 0.17cqw);
  background-size: 5.8cqw 5.8cqw, 7.3cqw 7.3cqw, 4.1cqw 4.1cqw, 6.4cqw 6.4cqw;
  mix-blend-mode: screen;
}

.occasions__horizon-glow {
  left: 23%;
  right: 23%;
  bottom: -4%;
  z-index: 2;
  height: 26%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 37, 103, 0.20), transparent 67%);
  filter: blur(1.5cqw);
}

.occasions__headline {
  position: absolute;
  top: 4.6%;
  left: 50%;
  z-index: 8;
  width: 40%;
  height: 10.4cqw;
  text-align: center;
  transform: translateX(-50%);
}

.occasions__headline-ornament {
  position: absolute;
  top: 0;
  left: 25%;
  display: grid;
  width: 50%;
  height: 1.9cqw;
  margin: 0;
  place-items: center;
  color: #ffe2a1;
  font-family: Georgia, serif;
  font-size: 1.55cqw;
  line-height: 1;
  text-shadow: 0 0 0.45cqw rgba(255, 179, 85, 0.72);
}

.occasions__headline-ornament::before,
.occasions__headline-ornament::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 42%;
  height: 0.11cqw;
  min-height: 1px;
  background: linear-gradient(90deg, transparent, #e20058 22%, #f42275 100%);
  box-shadow: 0 0 0.7cqw rgba(255, 30, 106, 0.38);
}

.occasions__headline-ornament::before {
  left: 0;
}

.occasions__headline-ornament::after {
  right: 0;
  transform: scaleX(-1);
}


.occasions__title {
  position: absolute;
  top: 2.24cqw;
  left: 0;
  width: 100%;
  margin: 0;
  color: #fffdfd;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 3.62cqw;
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-shadow:
    0 0.08cqw 0 rgba(255, 255, 255, 0.28),
    0 0 1.3cqw rgba(255, 238, 244, 0.12),
    0 0.25cqw 0.55cqw rgba(0, 0, 0, 0.75);
}

.occasions__title-line {
  display: block;
  white-space: pre-line;
}

.occasions__title em {
  font-weight: 400;
  letter-spacing: -0.045em;
}

.occasions__card {
  --occasion-pointer-x: 50%;
  --occasion-pointer-y: 50%;
  --occasion-tilt-x: 0deg;
  --occasion-tilt-y: 0deg;
  --occasion-art-x: 0px;
  --occasion-art-y: 0px;
  --occasion-copy-x: 0px;
  --occasion-copy-y: 0px;
  position: absolute;
  z-index: 5;
  margin: 0;
  overflow: visible;
  border-radius: 1.8cqw;
  perspective: 90cqw;
  transform: translateZ(0);
  transition: z-index 0s linear 260ms;
}

.occasions__card-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  background: rgba(13, 1, 7, 0.72);
  box-shadow:
    0 1.2cqw 2.4cqw rgba(0, 0, 0, 0.46),
    inset 0 -1.2cqw 2.2cqw rgba(80, 0, 27, 0.18);
  transform: perspective(90cqw) rotateX(var(--occasion-tilt-x)) rotateY(var(--occasion-tilt-y)) translateZ(0) scale(1);
  transform-style: preserve-3d;
  transform-origin: center center;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 520ms ease,
    box-shadow 620ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.occasions__card-motion::before,
.occasions__card-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 480ms ease, transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.occasions__card-motion::before {
  background:
    radial-gradient(circle at var(--occasion-pointer-x) var(--occasion-pointer-y), rgba(255, 237, 244, 0.24), rgba(255, 76, 137, 0.09) 22%, transparent 48%),
    linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.04) 42%, rgba(255, 96, 151, 0.12) 50%, transparent 65%);
  mix-blend-mode: screen;
}

.occasions__card-motion::after {
  display: none;
}

.occasions__card.is-interacting {
  z-index: 9;
  transition-delay: 0s;
}

.occasions__card.is-interacting .occasions__card-motion {
  filter: saturate(1.11) brightness(1.055);
  box-shadow:
    0 1.9cqw 3.3cqw rgba(0, 0, 0, 0.58),
    0 0 2.8cqw rgba(211, 12, 83, 0.12),
    inset 0 -1.5cqw 2.6cqw rgba(101, 0, 35, 0.24);
  transform: perspective(90cqw) rotateX(var(--occasion-tilt-x)) rotateY(var(--occasion-tilt-y)) translateY(-0.74cqw) translateZ(1.94cqw) scale(1.035);
}

.occasions__card.is-interacting .occasions__card-motion::before {
  opacity: 1;
}

.occasions__card--1 {
  top: 11.25%;
  left: 3.95%;
  width: 29.22%;
  aspect-ratio: 526 / 305;
}

.occasions__card--2 {
  top: 48.05%;
  left: 4.35%;
  width: 28.78%;
  aspect-ratio: 526 / 292;
}

.occasions__card--3 {
  top: 11.25%;
  right: 3.95%;
  width: 29.22%;
  aspect-ratio: 525 / 305;
}

.occasions__card--4 {
  top: 48.05%;
  right: 4.35%;
  width: 28.78%;
  aspect-ratio: 526 / 292;
}

.occasions__card--5 {
  top: 79.95%;
  left: 50%;
  width: 46.65%;
  height: 17.55%;
  transform: translateX(-50%);
}


.occasions__card-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  translate: var(--occasion-art-x) var(--occasion-art-y);
  scale: 1.018;
  transition: translate 720ms cubic-bezier(0.16, 1, 0.3, 1), scale 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 520ms ease;
  will-change: translate;
}

.occasions__card.is-interacting .occasions__card-art {
  scale: 1.033;
  filter: contrast(1.035) saturate(1.095);
}

.occasions__card-copy {
  position: absolute;
  z-index: 2;
  color: #fff9fa;
  translate: var(--occasion-copy-x) var(--occasion-copy-y);
  transform-style: preserve-3d;
  text-shadow: 0 0.15cqw 0.28cqw rgba(0, 0, 0, 0.86), 0 0 0.75cqw rgba(0, 0, 0, 0.48);
  transition: translate 720ms cubic-bezier(0.16, 1, 0.3, 1), text-shadow 520ms ease;
  will-change: translate;
}

.occasions__card.is-interacting .occasions__card-copy {
  text-shadow: 0 0.18cqw 0.32cqw rgba(0, 0, 0, 0.9), 0 0 1.05cqw rgba(255, 211, 227, 0.17);
}

.occasions__card-copy h3,
.occasions__card-copy p {
  margin: 0;
  white-space: pre-line;
}

.occasions__card-copy h3 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 1.76cqw;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.occasions__card-copy p {
  margin-top: 0.72cqw;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.96cqw;
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.018em;
}



.occasions__card--2 .occasions__card-copy p {
  margin-top: 0.86cqw;
}




.occasions__card--5 .occasions__card-copy h3 {
  font-size: 1.38cqw;
  font-weight: 400;
  line-height: 1.14;
}

.occasions__card--5 .occasions__card-copy p {
  margin-top: 0.55cqw;
  font-size: 0.95cqw;
  line-height: 1.36;
}

.occasions__product {
  position: absolute;
  top: 24.5%;
  left: 50%;
  z-index: 6;
  width: 23.9%;
  aspect-ratio: 728 / 734;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.3cqw 1.7cqw rgba(0, 0, 0, 0.62));
}

.occasions__product-motion {
  --occasion-product-x: 0px;
  --occasion-product-y: 0px;
  --occasion-product-rx: 0deg;
  --occasion-product-ry: 0deg;
  position: absolute;
  inset: 0;
  transform: perspective(80cqw) translate3d(var(--occasion-product-x), var(--occasion-product-y), 0) rotateX(var(--occasion-product-rx)) rotateY(var(--occasion-product-ry));
  transform-style: preserve-3d;
  animation: occasions-product-breathe 7s ease-in-out infinite;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.occasions__product-aura {
  position: absolute;
  left: 50%;
  bottom: 0.6%;
  z-index: -1;
  width: 136%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 26, 94, 0.48), rgba(112, 0, 39, 0.20) 44%, transparent 72%);
  filter: blur(1.35cqw);
  transform: translateX(-50%);
}

.occasions__product-image,
.occasions__product-reflection {
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
  transform: translateX(-50%);
}

.occasions__product-video {
  background: transparent;
}

.occasions__product-image {
  inset-block-start: 0;
  z-index: 3;
}

.occasions__product-reflection {
  top: 78%;
  z-index: 0;
  opacity: 0.19;
  transform: translateX(-50%) scaleY(-0.52);
  transform-origin: top center;
  filter: blur(0.18cqw) saturate(0.85);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 74%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.72), transparent 74%);
}

.occasions__product-raspberry {
  position: absolute;
  z-index: 4;
  object-fit: contain;
  filter: drop-shadow(0 0.6cqw 0.75cqw rgba(0, 0, 0, 0.68));
}

.occasions__product-raspberry--left {
  left: -13%;
  bottom: 1%;
  width: 19%;
  transform: rotate(-8deg);
}

.occasions__product-raspberry--right {
  right: -12%;
  bottom: 0;
  width: 18%;
  transform: rotate(9deg);
}

@keyframes occasions-product-breathe {
  0%, 100% {
    translate: 0 0;
    scale: 1;
  }
  50% {
    translate: 0 -0.42cqw;
    scale: 1.008;
  }
}

.occasions.is-motion-ready:not(.is-visible) .occasions__headline,
.occasions.is-motion-ready:not(.is-visible) .occasions__product,
.occasions.is-motion-ready:not(.is-visible) .occasions__card {
  opacity: 0;
  translate: 0 2.2cqw;
}

.occasions.is-motion-ready .occasions__headline,
.occasions.is-motion-ready .occasions__product,
.occasions.is-motion-ready .occasions__card {
  transition: opacity 900ms ease, translate 1100ms cubic-bezier(0.16, 1, 0.3, 1), z-index 0s linear 260ms;
}

.occasions.is-motion-ready .occasions__headline { transition-delay: 70ms; }
.occasions.is-motion-ready .occasions__product { transition-delay: 180ms; }
.occasions.is-motion-ready .occasions__card--1 { transition-delay: 260ms; }
.occasions.is-motion-ready .occasions__card--3 { transition-delay: 330ms; }
.occasions.is-motion-ready .occasions__card--2 { transition-delay: 400ms; }
.occasions.is-motion-ready .occasions__card--4 { transition-delay: 470ms; }
.occasions.is-motion-ready .occasions__card--5 { transition-delay: 540ms; }

.fr-admin-mode .occasions__card-motion,
.fr-admin-mode .occasions__product-motion,
.fr-admin-mode .occasions__card-art,
.fr-admin-mode .occasions__card-copy {
  animation: none !important;
  transition: none !important;
  translate: none !important;
  scale: 1 !important;
  transform: none !important;
}

.fr-admin-mode .occasions__backdrop,
.fr-admin-mode .occasions__particles,
.fr-admin-mode .occasions__horizon-glow,
.fr-admin-mode .occasions__card,
.fr-admin-mode .occasions__headline,
.fr-admin-mode .occasions__product,
.fr-admin-mode .occasions__card-art,
.fr-admin-mode .occasions__card-copy,
.fr-admin-mode .occasions__product-image,
.fr-admin-mode .occasions__product-reflection,
.fr-admin-mode .occasions__product-aura,
.fr-admin-mode .occasions__product-raspberry {
  cursor: grab;
}

.fr-admin-mode .occasions__product-video {
  pointer-events: auto;
}

.fr-admin-mode .occasions__title-line[contenteditable="true"],
.fr-admin-mode .occasions__title-line-2-copy[contenteditable="true"],
.fr-admin-mode .occasions__title-brand[contenteditable="true"],
.fr-admin-mode .occasions__card-copy h3[contenteditable="true"],
.fr-admin-mode .occasions__card-copy p[contenteditable="true"],
.fr-admin-mode .hero__copy-line[contenteditable="true"] {
  cursor: text;
  outline: 1px dashed rgba(255, 116, 166, 0.9);
  border-radius: 6px;
  background: rgba(255, 50, 120, 0.08);
}

@media (max-width: 900px) {
  .occasions__stage {
    min-height: auto;
    padding: 28px 14px 44px;
  }

  .occasions__artboard {
    display: flex;
    width: min(100%, 620px);
    aspect-ratio: auto;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    overflow: visible;
    padding: clamp(118px, 34vw, 165px) 0 24px;
    background-position: center;
    border-radius: 28px;
    box-shadow: inset 0 0 110px rgba(0, 0, 0, 0.82);
  }

  .occasions__backdrop {
    background-color: #050104;
    background-position: center top;
    background-size: 100% auto;
  }

  .occasions__horizon-glow {
    display: none;
  }

  .occasions__headline,
  .occasions__card,
  .occasions__product {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    transform: none;
  }

  .occasions__headline {
    order: 0;
    width: 100%;
    height: auto;
    padding: 0 18px 8px;
  }

  .occasions__headline-ornament {
    position: relative;
    inset: auto;
    width: min(64%, 310px);
    height: 32px;
    margin: 0 auto 2px;
  }

  .occasions__headline-ornament::before,
  .occasions__headline-ornament::after {
    height: 2px;
  }

  .occasions__headline-ornament {
    font-size: 28px;
  }

  .occasions__title {
    position: relative;
    inset: auto;
    width: auto;
    font-size: clamp(34px, 9vw, 54px);
    line-height: 0.94;
  }

  .occasions__product {
    order: 1;
    flex: 0 0 auto;
    align-self: center;
    width: min(78%, 340px);
    max-width: calc(100% - 56px);
    height: auto;
    margin: -8px auto 4px;
    aspect-ratio: 728 / 734;
  }

  .occasions__card {
    width: 100%;
    height: auto;
    border-radius: clamp(20px, 5vw, 30px);
  }

  .occasions__card.is-interacting .occasions__card-motion {
    transform: translateY(-4px) scale(1.008);
  }

  .occasions__card--1 { order: 2; aspect-ratio: 526 / 305; }
  .occasions__card--2 { order: 3; aspect-ratio: 526 / 292; }
  .occasions__card--3 { order: 4; aspect-ratio: 525 / 305; }
  .occasions__card--4 { order: 5; aspect-ratio: 526 / 292; }
  .occasions__card--5 { order: 6; aspect-ratio: 526 / 292; }

  .occasions__card--5 .occasions__card-art {
    object-fit: cover;
    object-position: 42% center;
  }

  .occasions__card-copy h3,
  .occasions__card--5 .occasions__card-copy h3 {
    font-size: clamp(22px, 5.9vw, 34px);
  }

  .occasions__card-copy p,
  .occasions__card--5 .occasions__card-copy p {
    margin-top: clamp(8px, 2vw, 14px);
    font-size: clamp(13px, 3.25vw, 18px);
    line-height: 1.35;
  }

  .occasions__card--1 .occasions__card-copy { top: 34%; left: 7.2%; }
  .occasions__card--2 .occasions__card-copy { top: 20%; left: 7.2%; }
  .occasions__card--3 .occasions__card-copy { top: 18%; left: 8%; }
  .occasions__card--4 .occasions__card-copy { top: 28%; left: 8%; }
  .occasions__card--5 .occasions__card-copy {
    top: auto;
    right: 3%;
    bottom: 7%;
    left: 26%;
    padding: 10px 8px 9px 16px;
    background: linear-gradient(90deg, transparent, rgba(5, 0, 3, 0.78) 18%, rgba(5, 0, 3, 0.92));
    border-radius: 20px;
  }

  .occasions__card--5 .occasions__card-copy h3 {
    font-size: clamp(18px, 4.7vw, 23px);
    line-height: 1.18;
  }

  .occasions__card--5 .occasions__card-copy p {
    margin-top: 6px;
    font-size: clamp(11px, 2.7vw, 13.5px);
    line-height: 1.28;
  }

  .occasions__card--5 .occasions__card-copy br {
    display: none;
  }
}

@media (max-width: 520px) {
  .occasions__stage {
    padding-inline: 8px;
  }

  .occasions__artboard {
    gap: 10px;
    border-radius: 22px;
  }

  .occasions__card-copy h3,
  .occasions__card--5 .occasions__card-copy h3 {
    font-size: clamp(18px, 5.6vw, 26px);
  }

  .occasions__card-copy p,
  .occasions__card--5 .occasions__card-copy p {
    font-size: clamp(11px, 3.05vw, 15px);
  }

  .occasions__card--1 .occasions__card-copy p,
  .occasions__card--3 .occasions__card-copy p,
  .occasions__card--4 .occasions__card-copy p {
    margin-top: 6px;
  }

  .occasions__card--5 .occasions__card-copy h3 {
    font-size: clamp(18px, 4.7vw, 23px);
  }

  .occasions__card--5 .occasions__card-copy p {
    font-size: clamp(11px, 2.7vw, 13.5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .occasions__card,
  .occasions__card-motion,
  .occasions__card-art,
  .occasions__card-copy,
  .occasions__product-motion,
  .occasions__product-image {
    animation: none;
    transition: none;
  }
}

/* Third window product protection + fourth window freezer reviews */
.occasions__product {
  z-index: 4;
}

.occasions__product-motion {
  overflow: visible;
}

.occasions__product-base {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

html.is-review-modal-open,
html.is-review-modal-open body {
  overflow: hidden;
}

/* Fixes: third window product layering and fourth window freezer alignment */
.occasions__product {
  z-index: 4;
  width: 24.8%;
  top: 23.2%;
}

.occasions__product-base {
  display: none !important;
}

.occasions__product-motion {
  overflow: visible;
}

.occasions__product-image,
.occasions__product-reflection {
  width: 108%;
  height: 108%;
  left: 50%;
  top: -3.5%;
}

.occasions__product-image {
  z-index: 2;
}

.occasions__product-reflection {
  top: 80%;
}

.occasions__product-raspberry {
  z-index: 3;
}

@media (max-width: 720px) {

}

/* Final fixes: occasion product alpha and freezer review paging */
.occasions__product {
  z-index: 4;
  width: 24.3%;
  top: 23.8%;
}

.occasions__product-image,
.occasions__product-reflection {
  width: 100%;
  height: 100%;
  left: 50%;
  top: 0;
}

.occasions__product-image {
  z-index: 2;
}

.occasions__product-reflection {
  top: 80%;
  opacity: 0.15;
}

@media (max-width: 720px) {

}

/* Third slide: full background video with overlay berries only */
.occasions__backdrop {
  overflow: hidden;
  background: #050104;
}

.occasions__backdrop-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: saturate(1.01) contrast(1.01);
}

.occasions__particles,
.occasions__horizon-glow,
.occasions__product-aura,
.occasions__product-image,
.occasions__product-reflection,
.occasions__product-video {
  display: none !important;
}

.occasions__product {
  top: 23.6%;
  left: 50%;
  z-index: 4;
  width: 27.4%;
  aspect-ratio: 728 / 734;
  transform: translateX(-50%);
  filter: drop-shadow(0 0.95cqw 1.55cqw rgba(0, 0, 0, 0.54));
  pointer-events: none;
}

.occasions__product-motion {
  animation: none;
}

.occasions__product-raspberry {
  z-index: 2;
  filter: drop-shadow(0 0.55cqw 0.75cqw rgba(0, 0, 0, 0.68));
}

.occasions__product-raspberry--left {
  left: -14.5%;
  bottom: 4.8%;
  width: 16.5%;
  transform: rotate(-9deg);
}

.occasions__product-raspberry--center {
  left: -7.5%;
  bottom: 1.7%;
  width: 12.4%;
  transform: rotate(3deg);
}

.occasions__product-raspberry--small {
  left: 2.5%;
  bottom: 0.8%;
  width: 8.1%;
  transform: rotate(12deg);
}

.occasions__product-raspberry--right {
  right: -5.2%;
  bottom: 2.7%;
  width: 19.2%;
  transform: rotate(7deg);
}

@media (max-width: 720px) {
  .occasions__backdrop-video {
    object-position: 52% center;
  }

  .occasions__product {
    top: 25.4%;
    width: 36%;
  }

  .occasions__product-raspberry--left {
    left: -16%;
    bottom: 2%;
    width: 19%;
  }

  .occasions__product-raspberry--center {
    left: -7%;
    bottom: 0;
    width: 14%;
  }

  .occasions__product-raspberry--small {
    left: 4%;
    bottom: -1%;
    width: 10%;
  }

  .occasions__product-raspberry--right {
    right: -9%;
    bottom: 1%;
    width: 22%;
  }
}

/* Request update: third window without side berries, fourth window title graphic + stricter freezer masking */
.occasions__product-motion > .occasions__product-raspberry {
  display: none !important;
}

@media (max-width: 720px) {

}

@media (max-width: 720px) {

}

/* Legacy freezer frost pseudo-elements removed.
   The fourth window must render without top or floor smoke. */

/* v39: second-window rebuild — use only the approved user background.
   Background image now owns the TV frame/stage/berries. The live video, headline,
   and side cards stay as separate layers above it. Remove legacy black masks and
   hide the old full-canvas TV image so it no longer paints a black field behind cards. */
.experience__artboard {
  background-image: url("../assets/frambini/02-experience/images/02-experience-bg-v01.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
}

.experience__visual {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.experience__artboard::before,
.experience__artboard::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

.experience__screen {
  z-index: 3 !important;
  background: #000 !important;
}

/* === v34 hero redesign: user-approved berry background + water overlay + card block === */
.hero__bg,
.hero__water,
.hero__copy-art {
  display: block;
}

.hero {
  background: #040105;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.015);
}

.hero__water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4%;
  z-index: 34;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center bottom;
  filter: drop-shadow(0 -18px 28px rgba(255, 32, 94, 0.16));
  pointer-events: none;
}

.hero__grain {
  z-index: 38;
  opacity: 0.06;
}

.hero__vignette {
  z-index: 36;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.56) 0%, rgba(0, 0, 0, 0.06) 18%, rgba(0, 0, 0, 0.06) 74%, rgba(0, 0, 0, 0.72) 100%),
    radial-gradient(ellipse at 50% 56%, transparent 0 42%, rgba(0, 0, 0, 0.24) 78%, rgba(0, 0, 0, 0.76) 100%);
}

.hero__header {
  top: clamp(20px, 2.3vw, 38px);
  left: 50%;
  z-index: 62;
  grid-template-columns: auto 1fr;
  width: min(calc(100% - clamp(28px, 5.2vw, 126px)), 1536px);
  min-height: clamp(58px, 4.86vw, 82px);
  padding: clamp(8px, 0.68vw, 12px) clamp(26px, 2.3vw, 44px);
  align-items: center;
  gap: clamp(19px, 1.9vw, 38px);
}

.hero__header::before {
  background: rgba(7, 2, 7, 0.13);
  border: 1px solid rgba(255, 103, 157, 0.34);
  border-radius: 999px;
  backdrop-filter: blur(20px) saturate(1.12) brightness(0.86);
  -webkit-backdrop-filter: blur(20px) saturate(1.12) brightness(0.86);
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 236, 0.10),
    inset 0 -1px 0 rgba(150, 0, 48, 0.26),
    0 0 0 1px rgba(114, 0, 37, 0.18),
    0 12px 34px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(255, 36, 105, 0.16);
}

.hero__header::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    rgba(255, 61, 124, 0.08) 0%,
    rgba(255, 186, 211, 0.68) 14%,
    rgba(255, 69, 132, 0.24) 32%,
    rgba(255, 49, 115, 0.10) 52%,
    rgba(255, 191, 215, 0.62) 78%,
    rgba(255, 52, 119, 0.10) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.86;
  filter: drop-shadow(0 0 6px rgba(255, 44, 111, 0.28));
}

.hero__brand {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: clamp(36px, 3.2vw, 62px);
  letter-spacing: 0;
  line-height: 1.05;
  color: #fff2ea;
  text-transform: lowercase;
  text-shadow: 0 0 24px rgba(255, 129, 172, 0.14);
}

.hero__brand::after {
  content: ".";
  margin-left: 0.01em;
  color: #ff5a87;
}

.hero__nav {
  gap: clamp(20.9px, 2.185vw, 51.3px);
  margin-left: clamp(10px, 1.4vw, 28px);
  justify-self: stretch;
  justify-content: flex-start;
  overflow: visible;
}

.hero__nav a {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(11.2px, 0.91vw, 17.5px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  color: rgba(255, 243, 247, 0.94);
  text-shadow: 0 0 12px rgba(255, 46, 114, 0.16);
}

.hero__nav a:hover,
.hero__nav a:focus-visible {
  color: #ffffff;
  text-shadow: 0 0 18px rgba(255, 92, 150, 0.52);
}

/* The glass panel and its copy are independent admin layers. Each navigation
   entry is one semantic admin block. Natural height plus flex/grid centering keeps
   every label vertically centered when its font size changes. */
.hero__header {
  display: flex;
  align-items: center;
  overflow: visible;
}

.hero__header-text {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  align-items: center;
  align-self: center;
  gap: clamp(19px, 1.9vw, 38px);
  overflow: visible;
  color: var(--hero-header-text-color, rgba(255, 243, 247, 0.94));
}

.hero__brand,
.hero__nav-item {
  position: relative;
  align-self: center;
}

.hero__brand {
  display: inline-flex;
  align-items: center;
  min-height: 1.18em;
  padding-block: 0.08em;
  line-height: 1.05;
  color: var(--hero-header-text-color, #fff2ea);
}

.hero__nav {
  min-width: 0;
  align-self: center;
  overflow: visible;
}

.hero__nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.24em;
  padding-block: 0.12em;
  line-height: 1.12;
  vertical-align: middle;
  color: var(--hero-header-text-color, rgba(255, 243, 247, 0.94));
}

.hero__copy {
  left: clamp(64px, 5.2vw, 104px);
  bottom: clamp(54px, 5vw, 92px);
  z-index: 58;
  width: min(37vw, 640px);
  aspect-ratio: 637 / 627;
  padding: 0;
  color: transparent;
  isolation: isolate;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 24px rgba(255, 75, 134, 0.14));
}

.hero__copy::before,
.hero__copy::after {
  display: none;
}

.hero__copy-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero__copy h1,
.hero__copy-brand,
.hero__copy-dash,
.hero__copy-line {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.portal {
  left: 50.4%;
  top: 53%;
  z-index: 24;
  width: min(100vw, calc(100svh * 1.64));
}

.portal__berry {
  z-index: 26;
}

@media (max-width: 1300px) {
  .hero__header {
    width: min(calc(100% - 30px), 1386px);
  }

  .hero__nav {
    gap: clamp(13.3px, 1.52vw, 26.6px);
  }
}

@media (max-width: 1024px) {
  .hero__water {
    width: 140%;
    left: 50%;
    right: auto;
    bottom: -1%;
    transform: translateX(-50%);
  }

  .hero__copy {
    left: 24px;
    bottom: 26px;
    width: min(78vw, 420px);
  }

  .hero__header {
    width: calc(100% - 24px);
  }
}

/* Second window: PNG benefit cards with independent editable title/body fields.
   Canonical structure: cards are the visual PNG panels; title/body fields are
   direct artboard layers with a higher z-index, so text always stays above its
   own panel and can be dragged/resized like the text blocks in window 3. */
.experience__feature {
  --experience-pointer-x: 50%;
  --experience-pointer-y: 50%;
  --experience-art-x: 0px;
  --experience-art-y: 0px;
  position: absolute;
  z-index: 6;
  display: block !important;
  grid-template-columns: none !important;
  align-items: initial !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
  isolation: isolate;
  container-type: inline-size;
  border-radius: clamp(16px, 1.35cqw, 28px);
  cursor: pointer;
  transform-origin: center center;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}

.experience__feature--left-top { left: 1.124674%; top: 18.142444%; width: 24.182129%; height: 19.854847%; min-height: auto; }
.experience__feature--left-mid { left: 0.916341%; top: 44.846904%; width: 24.338379%; height: 19.587284%; min-height: auto; }
.experience__feature--left-bottom { left: 0.916341%; top: 71.551364%; width: 24.234212%; height: 19.693473%; min-height: auto; }
.experience__feature--right-top { left: 74.693197%; top: 18.142444%; width: 24.182129%; height: 19.854847%; min-height: auto; }
.experience__feature--right-bottom { left: 74.745280%; top: 44.846904%; width: 24.338379%; height: 19.587284%; min-height: auto; }
.experience__feature--right-lower { left: 74.849447%; top: 71.551364%; width: 24.234212%; height: 19.693473%; min-height: auto; }

.experience__feature::before,
.experience__feature::after,
.experience__feature:hover::before,
.experience__feature:hover::after,
.experience__feature:focus-visible::before,
.experience__feature:focus-visible::after,
.experience__feature.is-interacting::before,
.experience__feature.is-interacting::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.experience__feature:hover,
.experience__feature:focus-visible,
.experience__feature.is-interacting {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: saturate(1.045) brightness(1.02);
}

.experience__feature-icon,
.experience__feature-icon-image,
.experience__feature-copy { display: none !important; }

.experience__feature-art {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: inherit;
  object-fit: fill !important;
  object-position: center center;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  translate: var(--experience-art-x) var(--experience-art-y);
  scale: 1.01;
  transition: translate 560ms cubic-bezier(0.16, 1, 0.3, 1), scale 560ms cubic-bezier(0.16, 1, 0.3, 1), filter 320ms ease;
}

.experience__feature:hover .experience__feature-art,
.experience__feature:focus-visible .experience__feature-art,
.experience__feature.is-interacting .experience__feature-art { scale: 1.024; }

.experience__artboard > .experience__feature-text-layer {
  position: absolute !important;
  z-index: 82 !important;
  display: block !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fffdfd;
  pointer-events: auto;
  user-select: text;
  cursor: text;
  white-space: normal;
  word-break: normal;
  overflow: visible;
  overflow-wrap: normal;
  hyphens: none;
  font-family: "Cormorant Garamond", "Georgia", "Times New Roman", serif !important;
  font-weight: 700;
  letter-spacing: -0.047em;
  text-align: left;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 0.14cqw 0.28cqw rgba(0, 0, 0, 0.92), 0 0 0.74cqw rgba(0, 0, 0, 0.48);
  transition: text-shadow 320ms ease;
}

.fr-admin-mode .experience__artboard > .experience__feature-text-layer {
  pointer-events: auto;
  user-select: text;
}

.experience__artboard > .experience__feature-title-layer {
  font-size: clamp(15px, 1.36vw, 30px);
  line-height: 0.9;
}

.experience__artboard > .experience__feature-body-layer {
  font-size: clamp(10px, 0.88vw, 18px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: rgba(255, 247, 249, 0.96);
}

.experience__feature-title-layer--left-top { left: 4.631083% !important; top: 24.297447% !important; width: 11.849243% !important; height: 4.864438% !important; }
.experience__feature-body-layer--left-top { left: 4.631083% !important; top: 29.360433% !important; width: 12.086228% !important; height: 6.353551% !important; }
.experience__feature-title-layer--left-mid { left: 4.445406% !important; top: 50.918962% !important; width: 11.925806% !important; height: 4.798885% !important; }
.experience__feature-body-layer--left-mid { left: 4.445406% !important; top: 55.913719% !important; width: 12.164322% !important; height: 6.267931% !important; }
.experience__feature-title-layer--left-bottom { left: 4.430302% !important; top: 77.656341% !important; width: 11.874764% !important; height: 4.824901% !important; }
.experience__feature-body-layer--left-bottom { left: 4.430302% !important; top: 82.678176% !important; width: 12.112259% !important; height: 6.301911% !important; }
.experience__feature-title-layer--right-top { left: 78.199606% !important; top: 24.297447% !important; width: 11.849243% !important; height: 4.864438% !important; }
.experience__feature-body-layer--right-top { left: 78.199606% !important; top: 29.360433% !important; width: 12.086228% !important; height: 6.353551% !important; }
.experience__feature-title-layer--right-bottom { left: 78.274345% !important; top: 50.135471% !important; width: 12.655957% !important; height: 4.798885% !important; }
.experience__feature-body-layer--right-bottom { left: 78.274345% !important; top: 55.913719% !important; width: 12.909076% !important; height: 6.267931% !important; }
.experience__feature-title-layer--right-lower { left: 78.363408% !important; top: 76.868602% !important; width: 12.601790% !important; height: 6.104977% !important; }
.experience__feature-body-layer--right-lower { left: 78.363408% !important; top: 83.761317% !important; width: 12.853826% !important; height: 5.908042% !important; }

.experience__feature-title,
.experience__feature-text,
.experience__feature-text p {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
  white-space: pre-line !important;
  overflow: visible !important;
}

.experience__feature.is-interacting ~ .experience__feature-text-layer,
.experience__feature:hover ~ .experience__feature-text-layer,
.experience__feature:focus-visible ~ .experience__feature-text-layer {
  text-shadow: 0 0.16cqw 0.32cqw rgba(0, 0, 0, 0.94), 0 0 1.02cqw rgba(255, 228, 238, 0.16);
}

.experience__berries { z-index: 4; overflow: visible; }
.experience__juice { z-index: 5; }
.experience__hover-video-layer { z-index: 70; border-radius: clamp(16px, 1.35cqw, 28px); object-fit: fill; }

.experience__hover-video-layer--left-top { left: 1.280924%; top: 16.751116%; width: 23.999837%; height: 24.885905%; object-fit: fill; }
.experience__hover-video-layer--left-mid { left: 1.072787%; top: 43.474443%; width: 24.154915%; height: 24.547586%; object-fit: fill; }
.experience__hover-video-layer--left-bottom { left: 1.071919%; top: 70.169256%; width: 24.051077%; height: 24.681371%; object-fit: fill; }
.experience__hover-video-layer--right-top { left: 74.848297%; top: 16.748100%; width: 23.998603%; height: 24.882628%; object-fit: fill; }
.experience__hover-video-layer--right-bottom { left: 74.900907%; top: 43.472793%; width: 24.153276%; height: 24.544287%; object-fit: fill; }
.experience__hover-video-layer--right-lower { left: 75.004214%; top: 70.167575%; width: 24.049456%; height: 24.678008%; object-fit: fill; }

.fr-admin-mode .experience__feature,
.fr-admin-mode .experience__feature-art,
.fr-admin-mode .experience__feature-text-layer { transition-duration: 0s !important; }

.fr-admin-mode .experience__feature:hover,
.fr-admin-mode .experience__feature:focus-visible,
.fr-admin-mode .experience__feature.is-interacting { transform: none !important; filter: none !important; }

.fr-admin-mode .experience__feature-text-layer[contenteditable="true"],
.fr-admin-mode .experience__feature-title[contenteditable="true"],
.fr-admin-mode .experience__feature-text[contenteditable="true"] {
  outline: 1px dashed rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
  cursor: text;
}

@media (max-width: 760px) {
  .experience__artboard > .experience__feature-title-layer { font-size: clamp(8px, 1.15vw, 16px); }
  .experience__artboard > .experience__feature-body-layer { font-size: clamp(6px, 0.78vw, 10px); line-height: 0.98; }
}

/* === FRAMBINI CORE EDITABLE TEXT + HOVER SYSTEM === */
.occasions__hover-video-layers,
.contacts-hover-video-layers {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  overflow: visible;
}

.universal-hover-video-layer {
  position: absolute;
  z-index: 11;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  object-fit: fill;
  overflow: visible;
  clip-path: none;
  border: 0;
  outline: none;
  mix-blend-mode: screen;
  filter: saturate(1.15) brightness(1.05);
  transform-origin: center center;
  will-change: opacity, visibility, transform;
  transition:
    opacity 180ms ease,
    visibility 180ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.universal-hover-video-layer.is-active,
.universal-hover-video-layer.is-admin-selected {
  opacity: 0.96;
  visibility: visible;
}

.fr-admin-mode .universal-hover-video-layer {
  opacity: 0.22;
  visibility: visible;
}

.fr-admin-mode .universal-hover-video-layer.is-admin-selected {
  opacity: 0.82;
}

.occasions__card,
.contacts-card {
  overflow: visible;
  isolation: isolate;
}

.occasions__card-motion,
.contacts-card__motion {
  z-index: 8;
}

.occasions__card > .experience__berries,
.contacts-card > .experience__berries {
  position: absolute;
  inset: -1.55cqw -1.35cqw;
  width: auto;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  contain: none;
  transform: translate3d(0, 1.35cqw, 0) scale(0.9);
  transform-origin: center center;
  transition: opacity 260ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.occasions__card:hover > .experience__berries,
.occasions__card:focus-visible > .experience__berries,
.occasions__card.is-interacting > .experience__berries,
.contacts-card:hover > .experience__berries,
.contacts-card:focus-visible > .experience__berries,
.contacts-card.is-interacting > .experience__berries {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.04);
}

.occasions__card:hover > .experience__berries .experience__berry,
.occasions__card:focus-visible > .experience__berries .experience__berry,
.occasions__card.is-interacting > .experience__berries .experience__berry,
.contacts-card:hover > .experience__berries .experience__berry,
.contacts-card:focus-visible > .experience__berries .experience__berry,
.contacts-card.is-interacting > .experience__berries .experience__berry {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}

.occasions__card-copy {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 24 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.occasions__text-layer,
.contacts-text-layer {
  position: absolute;
  z-index: 24;
  display: block;
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #fff8fb;
  pointer-events: auto;
  user-select: text;
  cursor: text;
  white-space: normal;
  overflow: visible;
  text-align: left;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.contacts-text-layer {
  transform: translate3d(var(--contacts-copy-x, 0px), var(--contacts-copy-y, 0px), 0);
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease, text-shadow 220ms ease;
}

.fr-admin-mode .occasions__text-layer,
.fr-admin-mode .contacts-text-layer {
  pointer-events: auto;
  user-select: text;
  transition: none !important;
}

.occasions__text-layer .occasions__card-title,
.occasions__text-layer .occasions__card-text,
.contacts-text-layer .contacts-card__eyebrow,
.contacts-text-layer .contacts-card__title,
.contacts-text-layer .contacts-card__textline {
  user-select: text !important;
  cursor: text;
  position: static !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-align: inherit !important;
  text-shadow: inherit !important;
  white-space: pre-line !important;
  overflow: visible !important;
}

.occasions__text-layer {
  font-family: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-shadow: 0 0.12cqw 0.24cqw rgba(0, 0, 0, 0.92), 0 0 0.7cqw rgba(0, 0, 0, 0.42);
}

.occasions__title-layer {
  font-size: clamp(17px, 1.12cqw, 27px);
  line-height: 1.08;
}

.occasions__body-layer {
  font-size: clamp(10px, 0.72cqw, 15px);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -0.02em;
}

.occasions__title-layer--1 { left: 7.2%; top: 34.5%; width: 66%; height: 18%; }
.occasions__body-layer--1 { left: 7.2%; top: 58%; width: 70%; height: 28%; }
.occasions__title-layer--2 { left: 7.3%; top: 20.5%; width: 66%; height: 28%; }
.occasions__body-layer--2 { left: 7.3%; top: 57%; width: 70%; height: 30%; }
.occasions__title-layer--3 { left: 8.2%; top: 32%; width: 66%; height: 18%; }
.occasions__body-layer--3 { left: 8.2%; top: 56%; width: 70%; height: 30%; }
.occasions__title-layer--4 { left: 8.2%; top: 28.5%; width: 66%; height: 20%; }
.occasions__body-layer--4 { left: 8.2%; top: 55%; width: 70%; height: 32%; }
.occasions__title-layer--5 { left: 44.3%; top: 14.2%; width: 50%; height: 35%; font-size: clamp(14px, 0.96cqw, 21px); }
.occasions__body-layer--5 { left: 44.3%; top: 56%; width: 50%; height: 32%; font-size: clamp(9px, 0.62cqw, 14px); }

.contacts-text-layer {
  font-family: "Arial", "Helvetica Neue", Helvetica, sans-serif;
  color: #fff8fb;
  text-shadow: 0 0.06cqw 0.08cqw rgba(0, 0, 0, 0.88);
}

.contacts-text-layer .contacts-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 210, 226, 0.78) !important;
}

.contacts-text-layer--phone-eyebrow,
.contacts-text-layer--email-eyebrow,
.contacts-text-layer--telegram-eyebrow { left: 19.8%; top: 22%; width: 52%; height: 16%; font-size: 8.5pt; font-weight: 700; line-height: 1; }
.contacts-text-layer--phone-title,
.contacts-text-layer--email-title,
.contacts-text-layer--telegram-title { left: 19.8%; top: 42%; width: 62%; height: 32%; font-size: 16pt; font-weight: 800; line-height: 1.06; }
.contacts-text-layer--address-eyebrow,
.contacts-text-layer--requisites-eyebrow { left: 23.5%; top: 19%; width: 58%; height: 15%; font-size: 8.5pt; font-weight: 700; line-height: 1; }
.contacts-text-layer--address-1 { left: 23.5%; top: 40%; width: 62%; height: 22%; font-size: 12.5pt; font-weight: 800; line-height: 1.08; }
.contacts-text-layer--address-2 { left: 23.5%; top: 61%; width: 70%; height: 24%; font-size: 12pt; font-weight: 800; line-height: 1.08; }
.contacts-text-layer--company-eyebrow { left: 23.5%; top: 14%; width: 58%; height: 14%; font-size: 8.5pt; font-weight: 700; line-height: 1; }
.contacts-text-layer--company-1 { left: 23.5%; top: 32%; width: 70%; height: 17%; font-size: 11.5pt; font-weight: 800; line-height: 1.05; }
.contacts-text-layer--company-2 { left: 23.5%; top: 47%; width: 70%; height: 17%; font-size: 11.5pt; font-weight: 800; line-height: 1.05; }
.contacts-text-layer--company-3 { left: 23.5%; top: 62%; width: 70%; height: 17%; font-size: 11.5pt; font-weight: 800; line-height: 1.05; }
.contacts-text-layer--company-4 { left: 23.5%; top: 77%; width: 70%; height: 17%; font-size: 11.5pt; font-weight: 800; line-height: 1.05; }
.contacts-text-layer--requisites-1 { left: 23.5%; top: 42%; width: 70%; height: 20%; font-size: 12.5pt; font-weight: 800; line-height: 1.08; }
.contacts-text-layer--requisites-2 { left: 23.5%; top: 62%; width: 70%; height: 20%; font-size: 12.5pt; font-weight: 800; line-height: 1.08; }

.occasions__hover-video-layer--1 { left: 2.2%; top: 18.8%; width: 26.2%; height: 24.4%; }
.occasions__hover-video-layer--2 { left: 2.2%; top: 48.6%; width: 26.2%; height: 24.4%; }
.occasions__hover-video-layer--3 { left: 71.7%; top: 18.8%; width: 26.2%; height: 24.4%; }
.occasions__hover-video-layer--4 { left: 71.7%; top: 48.6%; width: 26.2%; height: 24.4%; }
.occasions__hover-video-layer--5 { left: 26.8%; top: 77.8%; width: 46.4%; height: 19.2%; }
.contacts-hover-video-layer--phone { left: 4.190583%; top: 22.679072%; width: 25.513217%; height: 14.569420%; }
.contacts-hover-video-layer--email { left: 4.242900%; top: 40.764987%; width: 25.408583%; height: 13.087903%; }
.contacts-hover-video-layer--telegram { left: 3.353503%; top: 57.787706%; width: 26.297981%; height: 13.299550%; }
.contacts-hover-video-layer--address { left: 70.813652%; top: 24.160602%; width: 25.565536%; height: 14.040315%; }
.contacts-hover-video-layer--company { left: 70.342794%; top: 40.882385%; width: 26.454933%; height: 14.118030%; }
.contacts-hover-video-layer--requisites { left: 70.499747%; top: 58.088642%; width: 26.664203%; height: 13.722845%; }

.fr-admin-mode .occasions__text-layer[contenteditable="true"],
.fr-admin-mode .contacts-text-layer[contenteditable="true"],
.fr-admin-mode .occasions__card-title[contenteditable="true"],
.fr-admin-mode .occasions__card-text[contenteditable="true"],
.fr-admin-mode .contacts-card__eyebrow[contenteditable="true"],
.fr-admin-mode .contacts-card__title[contenteditable="true"],
.fr-admin-mode .contacts-card__textline[contenteditable="true"] {
  outline: 1px dashed rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
  cursor: text;
}

.occasions__card > .experience__berries .experience__berry,
.contacts-card > .experience__berries .experience__berry {
  background-image: url("../assets/frambini/01-hero/images/cutouts/raspberry/01-hero-raspberry-set-v01.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  visibility: visible;
}
/* === FRAMBINI CORE EDITABLE TEXT + HOVER SYSTEM END === */

/* === FRAMBINI ADMIN DIRECT COMMIT START === */
/* Generated by /?admin=1. This is real source CSS, not admin-overrides.css. */
:root { --frambini-admin-active: 1; }
.experience__feature--left-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 0.968% !important; top: 22.156% !important; width: 22.802% !important; height: 18.142% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.142% !important; }
.experience__feature--left-top:hover, .experience__feature--left-top:focus-visible { transform: rotate(0deg) !important; }
.experience__feature--left-mid { inset: auto !important; right: auto !important; bottom: auto !important; left: 1.073% !important; top: 47.844% !important; width: 22.906% !important; height: 18.196% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.196% !important; }
.experience__feature--left-mid:hover, .experience__feature--left-mid:focus-visible { transform: rotate(0deg) !important; }
.experience__feature--left-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 1.282% !important; top: 74.12% !important; width: 22.88% !important; height: 18.677% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.677% !important; }
.experience__feature--left-bottom:hover, .experience__feature--left-bottom:focus-visible { transform: rotate(0deg) !important; }
.experience__feature--right-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 76.23% !important; top: 22.156% !important; width: 22.802% !important; height: 18.142% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.142% !important; }
.experience__feature--right-top:hover, .experience__feature--right-top:focus-visible { transform: rotate(0deg) !important; }
.experience__feature--right-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 76.021% !important; top: 47.844% !important; width: 22.906% !important; height: 18.196% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.196% !important; }
.experience__feature--right-bottom:hover, .experience__feature--right-bottom:focus-visible { transform: rotate(0deg) !important; }
.experience__feature--right-lower { inset: auto !important; right: auto !important; bottom: auto !important; left: 75.838% !important; top: 74.12% !important; width: 22.88% !important; height: 18.677% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 18.677% !important; }
.experience__feature--right-lower:hover, .experience__feature--right-lower:focus-visible { transform: rotate(0deg) !important; }
.experience__hover-video-layer--left-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 1.169% !important; top: 21.199% !important; width: 22.33% !important; height: 22.234% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__hover-video-layer--left-mid { inset: auto !important; right: auto !important; bottom: auto !important; left: 1.287% !important; top: 46.593% !important; width: 22.553% !important; height: 22.67% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__hover-video-layer--left-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 1.506% !important; top: 73.134% !important; width: 22.595% !important; height: 22.178% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__hover-video-layer--right-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 76.336% !important; top: 21.184% !important; width: 22.373% !important; height: 22.119% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__hover-video-layer--right-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 76.155% !important; top: 46.578% !important; width: 22.603% !important; height: 22.699% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__hover-video-layer--right-lower { inset: auto !important; right: auto !important; bottom: auto !important; left: 75.888% !important; top: 73.019% !important; width: 22.772% !important; height: 22.846% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.experience__feature-icon-image--left-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 0% !important; top: 0% !important; width: 10% !important; height: 10% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__headline { inset: auto !important; right: auto !important; bottom: auto !important; left: 15.365% !important; top: 1.45% !important; width: 69.271% !important; height: 23.654% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__tv-control { left: 29.176% !important; top: 26.892% !important; width: 43% !important; height: 50% !important; transform: none !important; }
.experience__visual { left: 0% !important; top: 0% !important; width: 100% !important; height: 100% !important; transform: translate(0.676%, calc(-0.108% + 0px)) !important; }
.experience__screen { left: calc(27.973% + 0.676%) !important; top: calc(26.487% + -0.108% + 0px) !important; transform: none !important; }
.experience__screen { inset: auto !important; right: auto !important; bottom: auto !important; left: 30.888% !important; top: 26.913% !important; width: 39.469% !important; height: 49.875% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
@media (min-width: 901px) {
.hero__bg { inset: auto !important; right: auto !important; bottom: auto !important; left: -0.75% !important; top: -0.75% !important; width: 101.5% !important; height: 101.5% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.hero__water { inset: auto !important; right: auto !important; bottom: auto !important; left: 0% !important; top: 3.562% !important; width: 100% !important; height: 96.837% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.hero__header { inset: auto !important; right: auto !important; bottom: auto !important; left: 7.113% !important; top: 3.81% !important; width: 84.672% !important; height: 8.499% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.hero__header-text { left: 7px !important; top: -2px !important; }
.hero__brand { left: 75px !important; top: 0px !important; }
.hero__nav-item--flavors { left: 90px !important; top: 0px !important; }
.hero__nav-item--where-buy { left: 130px !important; top: 0px !important; }
.hero__nav-item--cooperation { left: 161px !important; top: 0px !important; }
.hero__nav-item--faq { left: 197px !important; top: 0px !important; }
.hero__nav-item--contacts { left: 229px !important; top: 0px !important; }
.hero__nav-item--become-partner { left: 269px !important; top: 0px !important; }
.hero__copy { inset: auto !important; right: auto !important; bottom: auto !important; left: 0.831% !important; top: 37.89% !important; width: 68.556% !important; height: 69.517% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.portal__berry { inset: auto !important; right: auto !important; bottom: auto !important; left: 37.073% !important; top: 36.725% !important; width: 28.252% !important; height: 28.748% !important; transform: none !important; rotate: 0deg !important; transform-origin: center center !important; }
.hero-experience-transition__video-frame { inset: auto !important; right: auto !important; bottom: auto !important; left: -0.084% !important; top: -3.609% !important; width: 99.749% !important; height: 103.406% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--left-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.321% !important; top: 30.23% !important; width: 11.849% !important; height: 4.864% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--left-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.321% !important; top: 33.999% !important; width: 12.086% !important; height: 6.352% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--left-mid { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.502% !important; top: 56.204% !important; width: 11.925% !important; height: 4.798% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--left-mid { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.502% !important; top: 60.119% !important; width: 12.164% !important; height: 6.266% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--left-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.698% !important; top: 81.863% !important; width: 11.874% !important; height: 4.824% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--left-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.75% !important; top: 86.237% !important; width: 12.112% !important; height: 6.302% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--right-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.674% !important; top: 29.583% !important; width: 11.849% !important; height: 4.864% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--right-top { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.726% !important; top: 33.136% !important; width: 12.086% !important; height: 6.352% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--right-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.434% !important; top: 56.068% !important; width: 12.656% !important; height: 4.798% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--right-bottom { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.487% !important; top: 60.011% !important; width: 12.908% !important; height: 6.266% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-title-layer--right-lower { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.26% !important; top: 81.398% !important; width: 12.602% !important; height: 6.105% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.experience__feature-body-layer--right-lower { inset: auto !important; right: auto !important; bottom: auto !important; left: 77.313% !important; top: 85.487% !important; width: 15.688% !important; height: 4.074% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__card--1 { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.584% !important; top: 17.884% !important; width: 25.047% !important; height: 28.528% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 28.528% !important; }
.occasions__card--1 .occasions__card-copy { inset: auto !important; right: auto !important; bottom: auto !important; left: 0.419% !important; top: 0.375% !important; width: 100% !important; height: 100% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__title-layer--1 { inset: auto !important; right: auto !important; bottom: auto !important; left: 7.198% !important; top: 33.746% !important; width: 62.017% !important; height: 40.129% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__body-layer--1 { inset: auto !important; right: auto !important; bottom: auto !important; left: 6.569% !important; top: 65.123% !important; width: 88.231% !important; height: 41.501% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__card--2 { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.88% !important; top: 49.761% !important; width: 24.948% !important; height: 28.451% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 28.451% !important; }
.occasions__card--2 .occasions__card-copy { inset: auto !important; right: auto !important; bottom: auto !important; left: 0% !important; top: 0% !important; width: 100% !important; height: 100% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__title-layer--2 { inset: auto !important; right: auto !important; bottom: auto !important; left: 6.457% !important; top: 31.027% !important; width: 72.942% !important; height: 44.546% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__body-layer--2 { inset: auto !important; right: auto !important; bottom: auto !important; left: 6.668% !important; top: 62.26% !important; width: 75.891% !important; height: 37.898% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__card--3 { inset: auto !important; right: auto !important; bottom: auto !important; left: 72.369% !important; top: 17.884% !important; width: 25.047% !important; height: 28.528% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 28.528% !important; }
.occasions__title-layer--3 { inset: auto !important; right: auto !important; bottom: auto !important; left: 7.571% !important; top: 35.375% !important; width: 65.999% !important; height: 17.995% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__body-layer--3 { inset: auto !important; right: auto !important; bottom: auto !important; left: 8.2% !important; top: 66.501% !important; width: 69.997% !important; height: 30% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__card--4 { inset: auto !important; right: auto !important; bottom: auto !important; left: 72.173% !important; top: 49.761% !important; width: 24.948% !important; height: 28.451% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 28.451% !important; }
.occasions__title-layer--4 { inset: auto !important; right: auto !important; bottom: auto !important; left: 7.148% !important; top: 34.137% !important; width: 65.998% !important; height: 19.995% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__body-layer--4 { inset: auto !important; right: auto !important; bottom: auto !important; left: 6.727% !important; top: 65.528% !important; width: 69.999% !important; height: 31.997% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__card--5 { inset: auto !important; right: auto !important; bottom: auto !important; left: 26.728% !important; top: 78.344% !important; width: 47.699% !important; height: 21.081% !important; transform: rotate(0deg) !important; transform-origin: center center !important; min-height: 21.081% !important; }
.occasions__card--5 .occasions__card-copy { inset: auto !important; right: auto !important; bottom: auto !important; left: 0% !important; top: 0% !important; width: 100% !important; height: 100% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__title-layer--5 { inset: auto !important; right: auto !important; bottom: auto !important; left: 49.472% !important; top: 9.63% !important; width: 50% !important; height: 34.999% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__body-layer--5 { inset: auto !important; right: auto !important; bottom: auto !important; left: 49.362% !important; top: 69.197% !important; width: 50% !important; height: 31.993% !important; transform: rotate(0deg) !important; transform-origin: center center !important; }
.occasions__hover-video-layer--1 { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.515% !important; top: 15.481% !important; width: 25.045% !important; height: 36.385% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.occasions__hover-video-layer--2 { inset: auto !important; right: auto !important; bottom: auto !important; left: 2.863% !important; top: 47.471% !important; width: 24.893% !important; height: 36.072% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.occasions__hover-video-layer--3 { inset: auto !important; right: auto !important; bottom: auto !important; left: 72.509% !important; top: 15.585% !important; width: 24.834% !important; height: 36.168% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.occasions__hover-video-layer--4 { inset: auto !important; right: auto !important; bottom: auto !important; left: 72.226% !important; top: 47.526% !important; width: 24.655% !important; height: 36.197% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.occasions__hover-video-layer--5 { inset: auto !important; right: auto !important; bottom: auto !important; left: 26.8% !important; top: 76.514% !important; width: 47.449% !important; height: 27.011% !important; transform: rotate(0deg) !important; transform-origin: center center !important; object-fit: fill !important; }
.hero__nav-item--flavors { font-size: 16.5pt !important; }
.hero__nav-item--where-buy { font-size: 16.5pt !important; }
.hero__nav-item--become-partner { font-size: 16.5pt !important; }
.hero__nav-item--contacts { font-size: 16.5pt !important; }
.hero__nav-item--faq { font-size: 16.5pt !important; }
.hero__nav-item--cooperation { font-size: 16.5pt !important; }
.experience__feature-body-layer--right-lower { font-size: 12.5pt !important; }
.occasions__title-layer--1 { font-size: 25pt !important; }
.occasions__title-layer--1 * { font-size: 25pt !important; }
.occasions__body-layer--1 { font-size: 14.5pt !important; }
.occasions__body-layer--1 * { font-size: 14.5pt !important; }
.occasions__title-layer--2 { font-size: 25pt !important; }
.occasions__title-layer--2 * { font-size: 25pt !important; }
.occasions__body-layer--2 { font-size: 14.5pt !important; }
.occasions__body-layer--2 * { font-size: 14.5pt !important; }
.occasions__title-layer--3 { font-size: 25pt !important; }
.occasions__title-layer--3 * { font-size: 25pt !important; }
.occasions__body-layer--3 { font-size: 14.5pt !important; line-height: 1.31 !important; }
.occasions__body-layer--3 * { font-size: 14.5pt !important; line-height: 1.31 !important; }
.occasions__title-layer--4 { font-size: 25pt !important; }
.occasions__title-layer--4 * { font-size: 25pt !important; }
.occasions__body-layer--4 { font-size: 14.5pt !important; }
.occasions__body-layer--4 * { font-size: 14.5pt !important; }
.occasions__title-layer--5 { font-size: 25pt !important; }
.occasions__title-layer--5 * { font-size: 25pt !important; }
.occasions__body-layer--5 { font-size: 14.5pt !important; }
.occasions__body-layer--5 * { font-size: 14.5pt !important; }
}
/* === FRAMBINI ADMIN DIRECT COMMIT END === */
/* === FRAMBINI HOVER VIDEO NO-DUPLICATE RUNTIME ===
   Runtime only. Static/admin geometry remains untouched.
   The existing admin-positioned hover video stays in place, pauses on 0.01s,
   and plays/transforms from that same element on hover: no clones, no reparent. */
html:not(.fr-admin-mode) #experience.frambini-runtime-window-active,
html:not(.fr-admin-mode) #occasions.frambini-runtime-window-active {
  overflow: visible !important;
}

html:not(.fr-admin-mode) #experience.frambini-runtime-window-active .experience__artboard,
html:not(.fr-admin-mode) #occasions.frambini-runtime-window-active .occasions__artboard {
  overflow: visible !important;
}

html:not(.fr-admin-mode) .experience__feature,
html:not(.fr-admin-mode) .occasions__card,
html:not(.fr-admin-mode) .contacts-card {
  overflow: visible !important;
  contain: none !important;
  transform-style: preserve-3d !important;
}

html:not(.fr-admin-mode) .experience__hover-video-layer.frambini-hover-preview-ready,
html:not(.fr-admin-mode) .universal-hover-video-layer.frambini-hover-preview-ready {
  opacity: 0.9 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 95 !important;
}

html:not(.fr-admin-mode) .experience__hover-video-layer.frambini-bound-active,
html:not(.fr-admin-mode) .universal-hover-video-layer.frambini-bound-active {
  opacity: 0.96 !important;
  visibility: visible !important;
  pointer-events: none !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  z-index: 95 !important;
  mix-blend-mode: screen;
  filter: saturate(1.15) brightness(1.05);
}

html:not(.fr-admin-mode) .experience__feature.frambini-runtime-card-active,
html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active {
  z-index: 40 !important;
  overflow: visible !important;
  contain: none !important;
  transform-style: preserve-3d !important;
}

html:not(.fr-admin-mode) .experience__feature.frambini-runtime-card-active {
  transform:
    perspective(90cqw)
    rotateX(var(--experience-tilt-x, 0deg))
    rotateY(var(--experience-tilt-y, 0deg))
    translateY(-0.5cqw)
    translateZ(1.65cqw)
    scale(1.035) !important;
}

html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active {
  transform:
    perspective(90cqw)
    rotateX(var(--occasion-tilt-x, 0deg))
    rotateY(var(--occasion-tilt-y, 0deg))
    translateY(-0.62cqw)
    translateZ(1.62cqw)
    scale(1.026) !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active {
  transform:
    perspective(90cqw)
    rotateX(var(--contacts-tilt-x, 0deg))
    rotateY(var(--contacts-tilt-y, 0deg))
    translateY(-0.52cqw)
    translateZ(1.55cqw)
    scale(1.026) !important;
}

html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active .occasions__card-motion,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active .contacts-card__motion {
  transform: none !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  clip-path: inset(0 round inherit) !important;
  contain: none !important;
}

html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active .occasions__card-motion::before,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active .contacts-card__motion::before {
  opacity: 1 !important;
}

html:not(.fr-admin-mode) .experience__feature.frambini-runtime-card-active .experience__feature-art {
  translate: var(--experience-art-x, 0px) var(--experience-art-y, 0px) !important;
  scale: 1.024 !important;
  border-radius: inherit !important;
  clip-path: inset(0 round inherit) !important;
}

html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active .occasions__card-art {
  translate: var(--occasion-art-x, 0px) var(--occasion-art-y, 0px) !important;
  scale: 1.028 !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active .contacts-card__art {
  transform: translate3d(var(--contacts-art-x, 0px), var(--contacts-art-y, 0px), 0) scale(1.032) !important;
}

html:not(.fr-admin-mode) .experience__feature.frambini-runtime-card-active .experience__berry,
html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active .experience__berry,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active .experience__berry {
  opacity: 1 !important;
  transform: translateY(0) scale(1) rotate(var(--berry-rot, 0deg)) !important;
}

html:not(.fr-admin-mode) .experience__feature.frambini-runtime-card-active > .experience__berries,
html:not(.fr-admin-mode) .occasions__card.frambini-runtime-card-active > .experience__berries,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries {
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  pointer-events: none !important;
}

html:not(.fr-admin-mode) .experience__hover-video-layer.frambini-bound-active {
  transform:
    perspective(90cqw)
    rotateX(var(--experience-tilt-x, 0deg))
    rotateY(var(--experience-tilt-y, 0deg))
    translateY(-0.5cqw)
    translateZ(1.65cqw)
    scale(1.035)
    translate3d(var(--experience-art-x, 0px), var(--experience-art-y, 0px), 0)
    scale(1.024) !important;
}

html:not(.fr-admin-mode) .occasions__hover-video-layer.frambini-bound-active {
  transform:
    perspective(90cqw)
    rotateX(var(--occasion-tilt-x, 0deg))
    rotateY(var(--occasion-tilt-y, 0deg))
    translateY(-0.62cqw)
    translateZ(1.62cqw)
    scale(1.026)
    translate3d(var(--occasion-art-x, 0px), var(--occasion-art-y, 0px), 0)
    scale(1.028) !important;
}

html:not(.fr-admin-mode) .experience__feature-text-layer.frambini-bound-active {
  transform:
    perspective(90cqw)
    rotateX(var(--experience-tilt-x, 0deg))
    rotateY(var(--experience-tilt-y, 0deg))
    translateY(-0.5cqw)
    translateZ(1.65cqw)
    scale(1.035)
    translate3d(var(--experience-copy-x, 0px), var(--experience-copy-y, 0px), 0) !important;
}

/* === FRAMBINI HOVER VIDEO STACKING FIX ===
   The hover-video wrappers must sit above active cards; otherwise the video
   can look like it is flowing behind the block in windows 3 and 6. */
html:not(.fr-admin-mode) #experience.frambini-runtime-window-active .experience__hover-video-layers,
html:not(.fr-admin-mode) #occasions.frambini-runtime-window-active .occasions__hover-video-layers {
  z-index: 180 !important;
  overflow: visible !important;
  contain: none !important;
  pointer-events: none !important;
}


/* === FRAMBINI HOVER TOP-LAYER + CONTACT BERRIES FIX ===
   Runtime-only fixes. Does not change saved admin geometry. */
html:not(.fr-admin-mode) #occasions.frambini-runtime-window-active .occasions__hover-video-layers {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  pointer-events: none !important;
}

html:not(.fr-admin-mode) .occasions__hover-video-layer.frambini-bound-active,
html:not(.fr-admin-mode) .contacts-hover-video-layer.frambini-bound-active {
  z-index: 2147482001 !important;
  opacity: 0.96 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  transform: translateZ(0) scale(1.045) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries .experience__berry {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: translateY(0) scale(1.12) rotate(var(--berry-rot, 0deg)) !important;
}

/* Kill old fake copyright pseudo at the very end of the cascade.
   The real editable .contacts-copyright-badge remains the source of truth. */
#contacts .contacts-window__artboard::after,
#window-6 .contacts-window__artboard::after,
.contacts-window__artboard::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Reassert saved public position for the real copyright badge after old pseudo rules. */
@media (min-width: 901px) {
  #contacts .contacts-copyright-badge,
  #window-6 .contacts-copyright-badge,
  .contacts-window .contacts-copyright-badge {
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 40.874% !important;
    top: 91.242% !important;
    width: 18.5% !important;
    height: 3.4% !important;
    transform: rotate(0deg) !important;
    transform-origin: center center !important;
  }

  #contacts .contacts-copyright-badge__copy,
  #window-6 .contacts-copyright-badge__copy,
  .contacts-window .contacts-copyright-badge__copy {
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: 1.414% !important;
    top: 0% !important;
    width: 100% !important;
    height: 100% !important;
    transform: rotate(0deg) !important;
    transform-origin: center center !important;
  }
}

/* === FRAMBINI CONTACT HOVER ALIGNMENT FINAL ===
   Runtime-only. Static admin coordinates stay untouched.
   Fixes the contact hover-video jumping out of its saved admin frame. */
html:not(.fr-admin-mode) .contacts-hover-video-layer.frambini-bound-active {
  transform:
    perspective(90cqw)
    rotateX(var(--contacts-tilt-x, 0deg))
    rotateY(var(--contacts-tilt-y, 0deg))
    translateY(-0.52cqw)
    translateZ(1.55cqw)
    scale(1.026) !important;
  opacity: 0.96 !important;
  visibility: visible !important;
  z-index: 2147482001 !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  pointer-events: none !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  transform: translateZ(0) scale(1.055) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries .experience__berry {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: translate3d(var(--berry-x, 0), var(--berry-y, 0), 0) scale(1.14) rotate(var(--berry-rot, 0deg)) !important;
}

/* === FRAMBINI LOCAL BURGER HOVER FINAL ===
   Final runtime-only fix: during hover the same real hover-video element is
   temporarily mounted into the active card, so it shares the exact card plane.
   No clones, no saved layout rewrites, no admin-mode changes. */
html:not(.fr-admin-mode) .frambini-runtime-local-video-card {
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  isolation: isolate !important;
}

html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .frambini-local-hover-video,
html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .frambini-local-hover-video.frambini-bound-active,
html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .experience__hover-video-layer.frambini-local-hover-video,
html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .universal-hover-video-layer.frambini-local-hover-video,
html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .contacts-hover-video-layer.frambini-local-hover-video,
html:not(.fr-admin-mode) .frambini-runtime-local-video-card > .occasions__hover-video-layer.frambini-local-hover-video {
  position: absolute !important;
  display: block !important;
  opacity: 0.96 !important;
  visibility: visible !important;
  z-index: 22 !important;
  pointer-events: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  transform: none !important;
  transform-origin: center center !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.15) brightness(1.05) !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-local-video-card > .experience__berries,
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-local-video-card > .experience__berries .experience__berry {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-local-video-card > .experience__berries {
  transform: translateZ(0) scale(1.055) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-local-video-card > .experience__berries .experience__berry {
  transform: translate3d(var(--berry-x, 0), var(--berry-y, 0), 0) scale(1.14) rotate(var(--berry-rot, 0deg)) !important;
}

/* === FRAMBINI CONTACT STATIC-PLANE HOVER FINAL ===
   Final fix for window 6 only.
   The saved admin rectangle for contacts-hover-video-layer is the source of
   truth. During hover the video is not transformed/repositioned anymore:
   it only plays above the card in the exact same frame that is visible before
   hover. This avoids all drift from mixed coordinate systems. */
html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active,
html:not(.fr-admin-mode) .contacts-card.is-interacting,
html:not(.fr-admin-mode) .contacts-card:hover {
  transform: translateZ(0) !important;
  perspective: none !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active .contacts-card__motion,
html:not(.fr-admin-mode) .contacts-card.is-interacting .contacts-card__motion,
html:not(.fr-admin-mode) .contacts-card:hover .contacts-card__motion {
  transform: none !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  clip-path: inset(0 round inherit) !important;
  contain: none !important;
}

html:not(.fr-admin-mode) .contacts-hover-video-layer.frambini-contact-static-plane-video,
html:not(.fr-admin-mode) .contacts-hover-video-layer.frambini-hover-preview-ready,
html:not(.fr-admin-mode) .contacts-hover-video-layer.frambini-bound-active,
html:not(.fr-admin-mode) .contacts-hover-video-layer.is-active {
  opacity: 0.96 !important;
  visibility: visible !important;
  z-index: 2147482001 !important;
  pointer-events: none !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  transform: rotate(0deg) !important;
  transform-origin: center center !important;
  object-fit: fill !important;
  object-position: center center !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.15) brightness(1.05) !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries,
html:not(.fr-admin-mode) .contacts-card.is-interacting > .experience__berries,
html:not(.fr-admin-mode) .contacts-card:hover > .experience__berries {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  contain: none !important;
  clip-path: none !important;
  transform: translateZ(0) scale(1.055) !important;
  transform-origin: center center !important;
  z-index: 1 !important;
}

html:not(.fr-admin-mode) .contacts-card.frambini-runtime-card-active > .experience__berries .experience__berry,
html:not(.fr-admin-mode) .contacts-card.is-interacting > .experience__berries .experience__berry,
html:not(.fr-admin-mode) .contacts-card:hover > .experience__berries .experience__berry {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: translate3d(var(--berry-x, 0), var(--berry-y, 0), 0) scale(1.14) rotate(var(--berry-rot, 0deg)) !important;
}