/** Shopify CDN: Minification failed

Line 2795:1 Unexpected "*"

**/
/* assets/css/tokens.css */
/* ============================================================
   ENIGMA — design tokens
   Palette sampled directly from designs/image.png
   ============================================================ */
:root {
  color-scheme: dark;

  /* --- surfaces: the dark-green theatre ------------------- */
  --ink:            #030403;
  --forest-950:     #030e08;
  --forest-900:     #04150d;
  --forest-850:     #07120a;
  --forest-800:     #0a2013;
  --forest-700:     #0f2a1b;
  --glass-formula:  #13311d;
  --glass-proof:    #10241a;

  /* --- brand greens --------------------------------------- */
  --mint-100:       #eafff0;
  --mint-200:       #d3fdda;   /* Add-to-cart fill */
  --mint-400:       #7ee5ab;
  --mint-600:       #2f9c6b;

  /* --- type ----------------------------------------------- */
  --paper:          #ffffff;
  --paper-90:       rgba(255, 255, 255, 0.92);
  --paper-70:       rgba(235, 237, 235, 0.72);
  --paper-55:       rgba(226, 235, 228, 0.55);
  --paper-38:       rgba(219, 232, 223, 0.38);
  --section-heading: #d9dfb5;
  --hairline:       rgba(226, 245, 232, 0.16);
  --hairline-soft:  rgba(226, 245, 232, 0.09);

  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-serif:   "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", sans-serif;

  /* --- rhythm --------------------------------------------- */
  --gutter:  clamp(20px, 4.2vw, 74px);
  --rail-w:  clamp(92px, 9.4vw, 170px);
  --nav-height: 88px;

  /* --- motion --------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
}


/* assets/css/base.css */
/* ============================================================
   ENIGMA — reset + shared primitives
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 18px);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--forest-950);
  color: var(--paper-90);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

figure,
blockquote,
dl, dd { margin: 0; }

img { max-width: 100%; }
[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

:where(a):focus-visible,
:where(button):focus-visible {
  outline: 2px solid var(--mint-400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- small uppercase label used across the whole site ------ */
.micro {
  margin: 0;
  color: var(--paper-55);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.62vw, 11px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

/* --- hairline rule ---------------------------------------- */
.rule {
  width: 42px;
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--paper-38), transparent);
}

/* --- underlined text link --------------------------------- */
.link-quiet {
  position: relative;
  color: var(--paper-90);
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.05vw, 17px);
  text-decoration: none;
  white-space: nowrap;
}
.link-quiet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transform-origin: right;
  transition: transform 460ms var(--ease-out), opacity 300ms ease;
}
.link-quiet:hover::after { transform: scaleX(0); opacity: 1; }

/* --- scroll reveal ---------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 900ms var(--ease-out) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- screen-reader only ----------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   SEAM FADES — take the edge off the cut between stacked sections.
   A very short, faint darkening right at a section's edge — just
   enough that it doesn't snap into the next block of color.
   Applied to only ONE side of each boundary (never both): two
   fades meeting at the same line each peak toward black exactly
   at the seam, which reads as a visible dark notch — the opposite
   of smoothing. One-sided avoids that.
   Needs position:relative on the section.
   ============================================================ */
.seam-top,
.seam-bottom {
  position: relative;
}
.seam-top::before,
.seam-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 4;
  height: clamp(14px, 1.6vw, 26px);
  pointer-events: none;
}
.seam-top::before {
  top: 0;
  background: linear-gradient(180deg, rgba(3, 4, 3, 0.16) 0%, rgba(3, 4, 3, 0) 100%);
}
.seam-bottom::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(3, 4, 3, 0.16) 0%, rgba(3, 4, 3, 0) 100%);
}


/* assets/css/hero.css */
/* ============================================================
   SECTION 1 — HERO (ripple reveal)   [behaviour unchanged]
   ============================================================ */
.hero {
  position: relative;
  width: 100vw;
  height: 90svh;
  min-height: 480px;
  overflow: hidden;
  cursor: crosshair;
  isolation: isolate;
  user-select: none;
  touch-action: pan-y;
}

/* texture sources for the shader, never shown directly */
.hero img.src {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--nav-height);
  padding: 0 clamp(24px, 3.8vw, 58px);
  color: rgba(245, 250, 242, 0.9);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 24, 14, 0.8), rgba(4, 20, 12, 0.68));
  border-bottom: 1px solid rgba(226, 245, 232, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.72);
}

.hero-brand {
  justify-self: start;
  color: rgba(245, 250, 242, 0.88);
  font-size: 23px;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  min-width: 128px;
}

.brand-logo-img {
  display: block;
  width: 46px;
  height: auto;
  opacity: 0.92;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18))
    drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42));
}

.hero-links {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
}

.hero-links a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
  transition: color 220ms ease;
}

.hero-links a:hover { color: var(--paper); }

.hero-shop {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero-shop-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 20px;
  border: 1px solid rgba(222, 232, 190, 0.72);
  border-radius: 999px;
  color: #062015;
  background: rgba(217, 223, 181, 0.92);
  font-weight: 600;
  text-decoration: none;
  text-shadow: none;
  pointer-events: auto;
  transition:
    border-color 240ms ease,
    background 240ms ease,
    color 240ms ease;
}

.hero-shop-link:hover {
  border-color: rgba(239, 245, 220, 0.96);
  background: rgba(232, 237, 204, 0.98);
  color: #03170e;
}

.hero-shop-link__mobile { display: none; }

.hero-divider {
  width: 1px;
  height: 18px;
  background: rgba(239, 245, 235, 0.24);
}

.hero-bag {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 20px;
  margin-top: 2px;
  border: 1.4px solid rgba(245, 250, 242, 0.78);
  border-radius: 4px 4px 5px 5px;
  opacity: 0.9;
}

.hero-bag::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -7px;
  width: 8px;
  height: 8px;
  border: 1.3px solid rgba(245, 250, 242, 0.78);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.hero-menu-toggle,
.hero-mobile-menu,
.hero-menu-backdrop {
  display: none;
}

body.nav-open { overflow: hidden; }

@media (max-width: 960px) {
  :root { --nav-height: 68px; }

  .hero {
    height: 82svh;
    min-height: 540px;
  }

  .hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    height: 24%;
    background: linear-gradient(180deg, transparent, rgba(2, 17, 10, 0.2));
    pointer-events: none;
  }

  .hero-nav {
    grid-template-columns: auto 1fr auto auto;
    min-height: var(--nav-height);
    padding: 0 clamp(18px, 5vw, 28px);
    font-size: 11px;
    letter-spacing: 0.18em;
    background: rgba(2, 20, 12, 0.86);
    border-bottom-color: rgba(226, 245, 232, 0.1);
    backdrop-filter: blur(16px) saturate(118%);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
  }

  .hero-brand {
    position: relative;
    z-index: 3;
    grid-column: 1;
    min-width: 0;
    font-size: 19px;
    letter-spacing: 0.24em;
  }

  .brand-logo-img { width: 38px; }

  .hero-links { display: none; }

  .hero-shop {
    position: relative;
    z-index: 3;
    grid-column: 3;
    gap: 8px;
    margin-right: 10px;
  }

  .hero-divider { display: none; }

  .hero-shop-link {
    min-height: 32px;
    padding: 0 12px;
    border-color: rgba(222, 232, 190, 0.7);
    color: #062015;
    background: rgba(217, 223, 181, 0.92);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-shadow: none;
  }

  .hero-shop-link:hover,
  .hero-shop-link:focus-visible {
    border-color: rgba(239, 245, 220, 0.94);
    color: #03170e;
    background: rgba(232, 237, 204, 0.98);
  }

  .hero-shop-link__desktop { display: none; }
  .hero-shop-link__mobile { display: inline; }

  .hero-bag {
    width: 15px;
    height: 17px;
  }

  .hero-bag::before {
    left: 3px;
    top: -6px;
    width: 7px;
    height: 7px;
  }

  .hero-menu-toggle {
    position: relative;
    z-index: 3;
    grid-column: 4;
    display: block;
    width: 40px;
    height: 40px;
    padding: 9px 5px;
    border: 0;
    color: rgba(245, 250, 242, 0.9);
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
  }

  .hero-menu-toggle span {
    position: absolute;
    left: 7px;
    width: 26px;
    height: 1px;
    background: currentColor;
    transform-origin: center;
    transition:
      top 300ms var(--ease-out),
      rotate 300ms var(--ease-out),
      opacity 180ms ease;
  }

  .hero-menu-toggle span:nth-child(1) { top: 11px; }
  .hero-menu-toggle span:nth-child(2) { top: 19px; }
  .hero-menu-toggle span:nth-child(3) { top: 27px; }

  .hero-menu-toggle.is-open span:nth-child(1) { top: 19px; rotate: 45deg; }
  .hero-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .hero-menu-toggle.is-open span:nth-child(3) { top: 19px; rotate: -45deg; }

  .hero-menu-backdrop {
    position: absolute;
    top: var(--nav-height);
    right: 0;
    left: 0;
    height: calc(100dvh - var(--nav-height));
    z-index: 1;
    display: block;
    background: rgba(0, 8, 5, 0.58);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition:
      opacity 320ms ease,
      visibility 0s linear 320ms;
  }

  .hero-menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition:
      opacity 320ms ease,
      visibility 0s;
  }

  .hero-mobile-menu {
    position: absolute;
    top: var(--nav-height);
    right: 0;
    left: 0;
    height: calc(100dvh - var(--nav-height));
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: none;
    padding: clamp(30px, 6vh, 54px) clamp(24px, 7vw, 42px) 28px;
    overflow-y: auto;
    color: rgba(242, 248, 239, 0.9);
    background:
      radial-gradient(circle at 100% 0, rgba(87, 155, 107, 0.13), transparent 38%),
      rgba(2, 18, 11, 0.985);
    opacity: 0;
    visibility: hidden;
    translate: 100% 0;
    pointer-events: auto;
    transition:
      opacity 320ms ease,
      translate 420ms var(--ease-out),
      visibility 0s linear 420ms;
  }

  .hero-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    transition:
      opacity 320ms ease,
      translate 420ms var(--ease-out),
      visibility 0s;
  }

  .hero-mobile-menu::before {
    content: "MEN’S HAIR SCIENCE";
    display: block;
    margin-bottom: clamp(22px, 4vh, 34px);
    color: rgba(208, 225, 200, 0.5);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.42em;
  }

  .hero-mobile-menu > a {
    display: flex;
    align-items: center;
    min-height: clamp(62px, 9vh, 76px);
    border-bottom: 1px solid rgba(226, 245, 232, 0.1);
    color: inherit;
    font-family: var(--font-display);
    font-size: clamp(30px, 8.5vw, 39px);
    letter-spacing: 0.02em;
    text-decoration: none;
    text-transform: none;
  }

  .hero-mobile-menu > a > span {
    width: 48px;
    color: rgba(190, 218, 188, 0.55);
    font-family: var(--font-sans);
    font-size: 8px;
    letter-spacing: 0.18em;
  }

  .hero-mobile-menu .hero-mobile-menu__shop {
    justify-content: center;
    min-height: 52px;
    margin-top: auto;
    padding-top: 0;
    border: 1px solid rgba(222, 232, 190, 0.72);
    border-radius: 999px;
    color: #062015;
    background: rgba(217, 223, 181, 0.92);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-shadow: none;
    text-transform: uppercase;
  }

  .hero-mobile-menu .hero-mobile-menu__shop:hover,
  .hero-mobile-menu .hero-mobile-menu__shop:focus-visible {
    border-color: rgba(239, 245, 220, 0.96);
    color: #03170e;
    background: rgba(232, 237, 204, 0.98);
  }

  .hero-mobile-menu .hero-mobile-menu__shop span {
    width: auto;
    margin-left: 12px;
    color: inherit;
    font-size: 14px;
  }

  .hero .scroll-cue {
    bottom: 24px;
    gap: 10px;
    font-size: 8px;
    letter-spacing: 0.22em;
    white-space: nowrap;
  }

  .hero .scroll-cue-icon {
    width: 20px;
    height: 20px;
  }
}

/* cart count reacts when a serum is added in the theatre */
#cartCount { transition: color 300ms ease; }
#cartCount.is-bumped { color: var(--mint-200); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateX(-50%);
  color: rgba(239, 245, 235, 0.68);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  pointer-events: none;
}

.scroll-cue-icon {
  position: relative;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(239, 245, 235, 0.54);
  border-radius: 999px;
}

.scroll-cue-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 3px;
  height: 5px;
  border-radius: 999px;
  background: rgba(239, 245, 235, 0.72);
  transform: translateX(-50%);
  animation: cueDot 1500ms ease-in-out infinite;
}

@keyframes cueDot {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.42; }
  50%      { transform: translate(-50%, 6px); opacity: 0.9; }
}

.reset {
  position: fixed;
  right: 24px;
  bottom: 22px;
  z-index: 10;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(239, 245, 235, 0.18);
  border-radius: 999px;
  color: rgba(239, 245, 235, 0.7);
  background: rgba(2, 10, 7, 0.32);
  backdrop-filter: blur(18px);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 300ms ease;
  display: none;
}
.reset:hover { opacity: 1; }

.debug-controls {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 20;
  width: min(300px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(239, 245, 235, 0.18);
  border-radius: 18px;
  color: rgba(239, 245, 235, 0.78);
  background: rgba(2, 10, 7, 0.42);
  backdrop-filter: blur(18px);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: none;
}
.debug-controls label { display: block; margin-bottom: 10px; }
.debug-controls label:last-child { margin-bottom: 0; }
.debug-controls input {
  width: 100%;
  margin-top: 6px;
  color: rgba(239, 245, 235, 0.72);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}


/* assets/css/thesis.css */
/* ============================================================
   SECTION 2 — BRAND THESIS
   Matches designs/ChatGPT Image Sep 15, 2026, 07_04_51 PM.png:
   a centered statement over a mottled dark-green wall, with an
   italic sage accent on the pivot phrase.
   ============================================================ */
.thesis {
  position: relative;
  min-height: clamp(540px, 78svh, 800px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: clamp(76px, 9vh, 104px) clamp(30px, 8.7vw, 134px)
    clamp(74px, 10vh, 108px);
  isolation: isolate;
  background: #010a06;
}

.thesis__wall {
  position: absolute;
  inset: -2%;
  z-index: 0;
  background: url("//enigmaformen.com/cdn/shop/t/2/assets/enigma-assets-img-texture-thesis-wall.jpg?v=49893468791313511411790600773") center / cover no-repeat;
}

.thesis__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  align-items: center;
  gap: clamp(58px, 7.2vw, 118px);
  width: min(100%, 1360px);
  margin: 0 auto;
}

.thesis__eyebrow {
  margin: 0 0 clamp(25px, 3.8vh, 38px);
  color: rgba(245, 248, 238, 0.88);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.thesis__statement {
  transform: translateX(clamp(20px, 2vw, 32px));
}

.thesis__headline {
  margin: 0;
  color: rgba(250, 248, 241, 0.97);
  font-family: var(--font-display);
  font-size: clamp(62px, 7.15vw, 106px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.thesis__headline span {
  color: #d1e6a9;
}

.thesis__story {
  align-self: center;
  width: 100%;
  max-width: 32rem;
  padding-top: clamp(26px, 4vh, 48px);
  transform: translateX(clamp(60px, 5vw, 82px));
}

.thesis__story p {
  margin: 0;
  color: rgba(247, 245, 236, 0.93);
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.65vw, 25px);
  font-weight: 400;
  line-height: 1.18;
}

.thesis__story p + p {
  margin-top: clamp(28px, 4.6vh, 46px);
}

.thesis__story .thesis__conclusion {
  margin-top: clamp(24px, 3.8vh, 38px);
  color: #d1e6a9;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.08;
}

.thesis__link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: clamp(29px, 4.8vh, 46px);
  color: rgba(228, 236, 211, 0.82);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.75vw, 12px);
  font-weight: 500;
  letter-spacing: 0.26em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.thesis__link span {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0;
  transition: transform 240ms var(--ease-out);
}

.thesis__link:hover span {
  transform: translateX(5px);
}

@media (max-width: 900px) {
  .thesis {
    min-height: auto;
    padding: 132px clamp(24px, 7vw, 64px) 92px;
  }

  .thesis__inner {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .thesis__statement {
    transform: none;
  }

  .thesis__headline {
    font-size: clamp(52px, 10vw, 78px);
  }

  .thesis__story {
    max-width: 31em;
    padding-top: 0;
    transform: none;
  }

  .thesis__desktop-break {
    display: none;
  }
}

@media (max-width: 560px) {
  .thesis {
    padding: clamp(72px, 10svh, 88px) 24px 48px;
  }

  .thesis__wall {
    inset: -4%;
    background-position: 58% center;
    transform: scale(1.04);
  }

  .thesis__inner {
    gap: 46px;
  }

  .thesis__eyebrow {
    margin-bottom: 28px;
    font-size: 9px;
    letter-spacing: 0.36em;
  }

  .thesis__headline {
    font-size: clamp(46px, 12.6vw, 52px);
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .thesis__story p {
    font-size: 18px;
    line-height: 1.38;
  }

  .thesis__story p + p {
    margin-top: 26px;
  }

  .thesis__story .thesis__conclusion {
    margin-top: 30px;
    font-size: clamp(24px, 6.6vw, 27px);
    line-height: 1.12;
  }

  .thesis__link {
    min-height: 44px;
    margin-top: 22px;
    padding: 0 2px;
    font-size: 10px;
    letter-spacing: 0.28em;
  }

  .thesis__link span {
    font-size: 22px;
  }
}


/* assets/css/iteration-counter.css */
/* ============================================================
   TRANSITION — formulation iteration counter
   ============================================================ */
.iteration-counter {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: clamp(160px, 20svh, 220px);
  overflow: hidden;
  padding: clamp(28px, 4vh, 46px) var(--gutter);
  background:
    radial-gradient(42% 120% at 50% 100%, rgba(40, 112, 70, 0.12), transparent 72%),
    linear-gradient(180deg, #02110a 0%, #03170e 100%);
}

.iteration-counter__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 48px);
  width: min(100%, 1120px);
  margin: 0 auto;
}

.iteration-counter__line {
  flex: 1 1 90px;
  max-width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(213, 237, 215, 0.28));
}

.iteration-counter__line:last-child {
  background: linear-gradient(90deg, rgba(213, 237, 215, 0.28), transparent);
}

.iteration-counter__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.8vw, 28px);
  margin: 0;
  color: rgba(237, 239, 230, 0.82);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.45vw, 23px);
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
}

.iteration-counter__copy strong {
  display: inline-block;
  min-width: 3ch;
  color: #c9f5c9;
  font-family: var(--font-serif);
  font-size: clamp(64px, 6.6vw, 102px);
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
  line-height: 0.82;
  letter-spacing: -0.055em;
  text-align: center;
  text-shadow:
    0 0 10px rgba(202, 255, 205, 0.26),
    0 0 30px rgba(110, 223, 148, 0.16);
}

@media (max-width: 720px) {
  .iteration-counter {
    min-height: 220px;
    padding: 28px 20px 36px;
  }

  .iteration-counter__inner {
    display: grid;
    grid-template-columns: minmax(36px, 1fr) auto minmax(36px, 1fr);
    grid-template-rows: auto auto auto;
    gap: 12px 16px;
  }

  .iteration-counter__line {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: 62px;
    justify-self: end;
  }

  .iteration-counter__line:last-child {
    grid-column: 3;
    justify-self: start;
  }

  .iteration-counter__copy { display: contents; }

  .iteration-counter__lead {
    grid-column: 1 / -1;
    grid-row: 1;
    color: rgba(220, 232, 210, 0.68);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.34em;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
  }

  .iteration-counter__copy strong {
    grid-column: 2;
    grid-row: 2;
    min-width: 3.25ch;
    font-size: clamp(76px, 21vw, 84px);
    line-height: 0.82;
  }

  .iteration-counter__detail {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: rgba(225, 233, 216, 0.72);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
  }
}


/* assets/css/theatre.css */
/* ============================================================
   SECTION 3 — PRODUCT THEATRE
   Replicates designs/image.png
   ============================================================ */
.theatre {
  --px: 0;                      /* pointer parallax, -1 … 1 (set by JS) */
  --py: 0;
  position: relative;
  min-height: clamp(700px, 74svh, 760px);
  margin-top: -1px;
  overflow: hidden;
  isolation: isolate;
  background: var(--forest-950);
}

.theatre::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: clamp(100px, 15vh, 160px);
  background:
    radial-gradient(42% 120% at 50% 0%, rgba(40, 112, 70, 0.12), transparent 72%),
    linear-gradient(180deg, #03170e, transparent);
  pointer-events: none;
}

.theatre::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: clamp(100px, 15vh, 160px);
  background: linear-gradient(180deg, transparent, var(--forest-950));
  pointer-events: none;
}

/* ---------- backdrop: lit plaster wall ---------------------- */
.theatre__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.theatre__wall {
  position: absolute;
  inset: -4%;
  background: url("//enigmaformen.com/cdn/shop/t/2/assets/enigma-assets-img-texture-theatre-wall.jpg?v=176201435005190853571790600773") center / cover no-repeat;
  transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -8px), 0) scale(1.04);
  transition: transform 900ms var(--ease-soft);
}
.theatre__keylight {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(62% 48% at 34% 16%, rgba(126, 229, 171, 0.14), transparent 68%),
    radial-gradient(48% 42% at 78% 34%, rgba(72, 168, 124, 0.10), transparent 70%);
}
.theatre__haze {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 14, 8, 0.48) 0%, transparent 17%),
    linear-gradient(0deg, rgba(2, 8, 5, 0.42) 0%, transparent 24%),
    linear-gradient(90deg, rgba(2, 8, 5, 0.55) 0%, transparent 22%,
                          transparent 80%, rgba(2, 8, 5, 0.5) 100%);
}

/* ---------- layout ------------------------------------------ */
.theatre__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns:
    [rail-l] clamp(56px, 5.7vw, 88px)
    [stage] minmax(190px, 0.52fr)
    [main] minmax(0, 1.48fr)
    [rail-r] clamp(56px, 5.7vw, 88px);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(14px, 1.4vw, 24px);
  width: 100%;
  max-width: 1540px;
  min-height: clamp(700px, 74svh, 760px);
  margin: 0 auto;
  padding:
    calc(var(--nav-height) + clamp(8px, 1.6vh, 18px))
    clamp(14px, 1.6vw, 26px)
    clamp(22px, 3vh, 40px);
}

/* ---------- edge rails -------------------------------------- */
.rail {
  position: relative;
  white-space: nowrap;
  align-self: center;
  padding-left: 22px;
}
.rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--paper-38), transparent);
}
.rail--left  { grid-column: rail-l; grid-row: 1; }
.rail--right {
  grid-column: rail-r;
  grid-row: 1;
  align-self: start;
  padding: 0 0 22px 0;
  text-align: right;
}
.rail--right::before {
  left: auto;
  right: 0;
  top: auto;
  bottom: 0;
  width: 46px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--paper-38));
}
.theatre__footline {
  position: relative;
  z-index: 3;
  grid-column: rail-l / main;
  grid-row: 3;
  color: var(--paper-70);
  display: flex;
  align-items: center;
  gap: 22px;
  align-self: end;
}
.theatre__footline::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent);
}

/* ============================================================
   THE STAGE — the serum, lit against the wall
   ============================================================ */
.stage {
  grid-column: stage;
  grid-row: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding-bottom: clamp(16px, 3.5vh, 52px);
  translate: 0 -60px;
}

.stage__product {
  position: relative;
  z-index: 2;
  width: min(100%, clamp(190px, 23vw, 356px));
  height: min(58vh, 570px);
  transform: translate3d(calc(var(--px) * 12px), calc(var(--py) * 8px), 0);
  transition: transform 900ms var(--ease-soft);
}

/* The render ships with its own alpha channel (~75% of it is fully transparent),
   so it needs nothing but ordinary compositing — no blend mode, no matte, and the
   file is used byte-for-byte as supplied.
   Sized to the BOTTLE rather than the file: the artwork carries transparent margins
   either side, so `object-fit: contain` would fit by width and shrink the product;
   matching the height instead lets those margins overhang harmlessly. */
.stage__tube {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: auto;
  height: 100%;
  max-width: none;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.5));
}

/* ============================================================
   MAIN COLUMN — buy block + panels
   ============================================================ */
.theatre__main {
  position: relative;
  z-index: 2;
  grid-column: main;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.7vh, 20px);
  min-width: 0;
  padding-bottom: clamp(8px, 2vh, 28px);
  translate: 0 -60px;
}

/* ---------- buy block --------------------------------------- */
.buy { padding-left: 0; }

.buy__wordmark {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(50px, 5.7vw, 108px);
  font-weight: 500;
  line-height: 0.92;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.buy__name {
  margin: 0;
  color: var(--paper-90);
  font-family: var(--font-serif);
  font-size: clamp(32px, 3.3vw, 52px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
}
.buy__meta {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  margin: clamp(6px, 1vh, 14px) 0 0;
  color: var(--paper-90);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2vw, 32px);
  font-variant-numeric: tabular-nums;
}
.buy__meta i {
  font-style: normal;
  color: var(--paper-38);
  font-size: 0.8em;
}
.buy__rule { margin: clamp(12px, 1.8vh, 24px) 0 0; }

.buy__copy {
  max-width: 47em;
  margin: clamp(12px, 1.7vh, 22px) 0 0;
  color: var(--paper-70);
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.35;
}

.buy__proof-label { display: none; }

/* ---------- reported result metrics ------------------------- */
.result-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(12px, 1.7vh, 22px) 0 0;
  padding: 0;
  list-style: none;
}

.result-metrics li {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1vw, 15px);
  min-height: clamp(66px, 5.4vw, 82px);
  padding: 0 clamp(13px, 1.3vw, 22px);
}

.result-metrics li:first-child { padding-left: 0; }
.result-metrics li:last-child { padding-right: 0; }

.result-metrics li + li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 72%;
  background: rgba(217, 243, 224, 0.34);
}

.result-metric__ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(56px, 4.7vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #aff8c3 0 var(--metric),
    rgba(163, 230, 183, 0.18) var(--metric) 100%
  );
  box-shadow: 0 0 18px rgba(118, 232, 153, 0.12);
}

.result-metric__ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(197, 238, 209, 0.17);
  border-radius: 50%;
  background: #0a291b;
}

.result-metric__ring strong {
  position: relative;
  z-index: 1;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 500;
  line-height: 1;
}

.result-metric__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.result-metric__copy span {
  color: rgba(238, 243, 236, 0.82);
  font-family: var(--font-serif);
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.12;
}

/* ---------- sensorial/product qualities --------------------- */
.product-qualities {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  margin: clamp(12px, 1.5vh, 18px) 0 0;
  padding: 0;
  list-style: none;
}

.product-qualities li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 clamp(10px, 1.2vw, 19px);
  color: rgba(238, 244, 237, 0.84);
  white-space: nowrap;
}

.product-qualities li:first-child { padding-left: 0; }
.product-qualities li:last-child { padding-right: 0; }

.product-qualities li + li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  height: 24px;
  background: rgba(218, 242, 224, 0.18);
}

.product-qualities li > span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(208, 242, 220, 0.28);
  border-radius: 50%;
  color: #c1efd0;
}

.product-qualities li > span svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.product-qualities strong {
  font-family: var(--font-serif);
  font-size: clamp(11px, 0.86vw, 15px);
  font-weight: 400;
}

/* ---------- proof/results panel ----------------------------- */
.product-proof {
  position: relative;
  margin-right: clamp(-90px, -5vw, -55px);
  overflow: hidden;
  padding: clamp(13px, 1.2vw, 19px) clamp(14px, 1.35vw, 22px) clamp(11px, 1vw, 17px);
  border: 1px solid rgba(215, 247, 224, 0.55);
  border-radius: clamp(16px, 1.25vw, 22px);
  background:
    linear-gradient(140deg, rgba(12, 43, 29, 0.78), rgba(3, 22, 14, 0.67)),
    radial-gradient(circle at 22% 0, rgba(91, 159, 111, 0.13), transparent 42%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 28px 70px rgba(0, 0, 0, 0.28);
}

.product-proof__header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 3px;
}

.product-proof__header h3 {
  margin: 0;
  font-family: var(--font-sans);
  text-transform: uppercase;
}

.product-proof__header h3 {
  color: var(--paper);
  font-size: clamp(13px, 1.15vw, 19px);
  font-weight: 600;
  letter-spacing: 0.2em;
}

.product-proof__header p {
  margin: 0;
  color: rgba(230, 241, 228, 0.62);
  font-family: var(--font-serif);
  font-size: clamp(10px, 0.76vw, 13px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.product-proof__gallery {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) clamp(58px, 5vw, 82px);
  align-items: center;
  gap: clamp(10px, 1.1vw, 18px);
  margin-top: clamp(9px, 1vh, 14px);
}

.product-proof__result {
  position: relative;
  min-width: 0;
  margin: 0;
}

.product-proof__result img {
  display: block;
  width: 100%;
  height: clamp(94px, 7.8vw, 128px);
  border: 1px solid rgba(217, 239, 218, 0.42);
  border-radius: clamp(8px, 0.65vw, 12px);
  object-fit: cover;
  object-position: center;
  background: #092118;
  transition: transform 800ms var(--ease-out), filter 400ms ease;
}

.product-proof__result:first-child img { object-position: center 42%; }
.product-proof__result:nth-child(3) img { object-position: center 38%; }

.product-proof__result--thermal img {
  object-fit: contain;
  background: #062379;
}

.product-proof__result figcaption {
  margin-top: 5px;
  color: rgba(240, 245, 238, 0.86);
  font-family: var(--font-sans);
  font-size: clamp(11px, 1vw, 16px);
  line-height: 1.2;
  text-align: center;
}

.product-proof__transform {
  position: absolute;
  right: 7px;
  bottom: 26px;
  z-index: 2;
  padding: 9px 8px 8px 22px;
  color: rgba(255, 255, 255, 0.94);
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.62));
  font-family: var(--font-serif);
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 500;
  line-height: 1.15;
  text-align: right;
  text-decoration: none;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.product-proof__transform span {
  display: inline-block;
  margin-left: 4px;
  transition: translate 240ms var(--ease-out);
}

.product-proof__transform:hover span { translate: 3px 0; }

.product-proof__peek {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(217, 239, 218, 0.32);
  border-radius: clamp(8px, 0.65vw, 12px) 0 0 clamp(8px, 0.65vw, 12px);
}

.product-proof__peek img {
  display: block;
  width: 190%;
  height: clamp(94px, 7.8vw, 128px);
  max-width: none;
  object-fit: cover;
  object-position: left center;
}

.product-proof__result:hover img {
  transform: translateY(-2px) scale(1.015);
  filter: brightness(1.05);
}

.product-proof__next {
  position: absolute;
  right: clamp(5px, 0.5vw, 9px);
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(50px, 4.2vw, 66px);
  aspect-ratio: 1;
  translate: 0 -58%;
  padding: 0;
  border: 1px solid rgba(214, 245, 223, 0.35);
  border-radius: 50%;
  color: var(--paper);
  background: rgba(2, 18, 11, 0.78);
  box-shadow:
    0 0 0 1px rgba(194, 243, 208, 0.08) inset,
    0 10px 26px rgba(0, 0, 0, 0.34);
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.4vw, 23px);
  cursor: pointer;
  transition: background 260ms ease, translate 300ms var(--ease-out);
}

.product-proof__next:hover {
  background: rgba(159, 229, 184, 0.13);
  translate: 3px -58%;
}

.product-proof__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(10px, 1.25vh, 17px);
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(234, 244, 232, 0.45);
  color: rgba(242, 247, 240, 0.9);
  font-family: var(--font-serif);
  font-size: clamp(12px, 0.95vw, 16px);
  text-decoration: none;
}

.product-proof__link span {
  transition: translate 280ms var(--ease-out);
}

.product-proof__link:hover span { translate: 4px 0; }

/* ---------- three benefit marks ----------------------------- */
.benefits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.7vw, 34px);
  margin: clamp(14px, 2.2vh, 30px) 0 0;
  padding: 0;
  list-style: none;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.72vw, 14px);
}
.benefit__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: clamp(34px, 2.75vw, 50px);
  aspect-ratio: 1;
  border: 1px solid rgba(214, 245, 226, 0.34);
  border-radius: 50%;
  color: var(--mint-100);
  background:
    radial-gradient(60% 60% at 34% 26%, rgba(255, 255, 255, 0.12), transparent 70%),
    rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 14px rgba(180, 255, 214, 0.07);
}
.benefit__icon svg {
  width: 46%;
  height: 46%;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.benefit__label {
  color: var(--paper-90);
  font-family: var(--font-serif);
  font-size: clamp(11px, 0.92vw, 16px);
  line-height: 1.28;
}

/* ---------- actions ----------------------------------------- */
.buy__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  margin-top: clamp(12px, 1.8vh, 22px);
}

.buy__secondary-actions { display: contents; }
.buy__results-link { display: none; }

.btn-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: clamp(210px, 20vw, 358px);
  min-height: clamp(48px, 4.4vw, 64px);
  padding: 0 clamp(20px, 2vw, 38px);
  border: 0;
  border-radius: 5px;
  color: #06251a;
  background: linear-gradient(180deg, #e4fff0 0%, var(--mint-200) 46%, #b6efc6 100%);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.24) inset,
    0 26px 70px rgba(126, 229, 171, 0.14);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.82vw, 14px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: transform 340ms var(--ease-out), box-shadow 340ms var(--ease-out);
}
.btn-cart::before {                     /* specular sweep on hover */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%, rgba(255, 255, 255, 0.72) 48%, transparent 66%);
  translate: -110% 0;
  transition: translate 720ms var(--ease-out);
}
.btn-cart:hover {
  transform: translateY(-2px);
  box-shadow:
    0 24px 56px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.34) inset,
    0 30px 90px rgba(126, 229, 171, 0.22);
}
.btn-cart:hover::before { translate: 110% 0; }
.btn-cart:active { transform: translateY(0); }
.btn-cart svg { width: 20px; height: 12px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.btn-cart span { position: relative; }
.btn-cart.is-added { background: linear-gradient(180deg, #d8fbe4, #9fe4b8); }

.buy .btn-cart {
  min-width: clamp(220px, 21vw, 320px);
}

/* ============================================================
   THE GLASS PANELS
   ============================================================ */
.panels {
  position: relative;
  perspective: 1080px;
  perspective-origin: 56% 46%;
  margin-left: clamp(-44px, -2vw, 0px);
  margin-right: calc(var(--rail-w) * -1 - var(--gutter) * 0.55);
  padding-bottom: clamp(10px, 2vh, 26px);
}
.panels__floor {                        /* light pooling on the floor */
  position: absolute;
  left: 4%;
  right: -2%;
  bottom: -6%;
  height: 46%;
  background: radial-gradient(52% 100% at 44% 0%,
    rgba(126, 229, 171, 0.16), transparent 74%);
  filter: blur(14px);
  pointer-events: none;
}

.panel {
  position: relative;
  border-radius: clamp(14px, 1.2vw, 22px);
  transform-origin: 50% 60%;
  transition: transform 900ms var(--ease-soft), box-shadow 600ms var(--ease-out);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    0 2px 0 rgba(255, 255, 255, 0.05) inset;
}
/* bright hairline edge, brightest along the top/left */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(232, 255, 242, 0.92) 0%,
    rgba(180, 235, 205, 0.34) 28%,
    rgba(160, 220, 190, 0.12) 56%,
    rgba(214, 250, 230, 0.5) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* specular sheen across the glass */
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(118deg,
    rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 22%,
    transparent 48%, rgba(255, 255, 255, 0.05) 88%, transparent 100%);
  pointer-events: none;
}

.panel__body {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  overflow: hidden;
}

/* --- the two panes are fanned out, mirroring the reference --- */
.panel--formula {
  width: 60%;
  transform:
    rotateY(calc(14deg + var(--px) * 3deg))
    rotateX(calc(-2deg + var(--py) * -2.5deg));
}
.panel--proof {
  position: absolute;
  right: 1%;
  bottom: clamp(10px, 2vh, 26px);
  width: 56%;
  z-index: 4;
  transform:
    translateZ(96px)
    rotateY(calc(-12deg + var(--px) * 3deg))
    rotateX(calc(-1.5deg + var(--py) * -2.5deg));
}

/* ---------- formula architecture ---------------------------- */
.panel--formula .panel__body {
  min-height: clamp(204px, 28vh, 318px);
  /* the right 42% is where the proof pane lands — keep it art-only */
  padding: clamp(15px, 1.4vw, 28px) 31% clamp(13px, 1.3vw, 24px) clamp(15px, 1.4vw, 28px);
  background:
    linear-gradient(96deg,
      rgba(4, 22, 14, 0.92) 0%, rgba(5, 28, 18, 0.58) 24%,
      rgba(6, 34, 21, 0.08) 50%, rgba(8, 40, 25, 0.00) 100%),
    url("//enigmaformen.com/cdn/shop/t/2/assets/enigma-assets-img-texture-formula-architecture.jpg?v=135101665885198356521790600773") center / cover no-repeat,
    var(--glass-formula);
}
/* keep the sheen consistent with the proof pane */
.panel--formula::after {
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 22%,
      transparent 48%, rgba(255, 255, 255, 0.05) 88%, transparent 100%);
}

.panel__title {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.72vw, 13px);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}
.panel__lede {
  margin: clamp(6px, 0.8vh, 12px) 0 0;
  color: var(--paper-90);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.88vw, 16px);
  font-weight: 400;
  line-height: 1.32;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, 0.45vw, 9px);
  margin: clamp(10px, 1.3vh, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.pills li {
  padding: clamp(3px, 0.34vw, 6px) clamp(8px, 0.72vw, 14px);
  border: 1px solid rgba(214, 250, 230, 0.34);
  border-radius: 999px;
  color: var(--paper-90);
  background: rgba(8, 40, 26, 0.5);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.68vw, 12px);
  white-space: nowrap;
}

.panel__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(11px, 1.6vh, 22px);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--paper-38);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.88vw, 15px);
  text-decoration: none;
  transition: gap 380ms var(--ease-out), border-color 380ms ease;
}
.panel__link:hover { gap: 18px; border-color: var(--paper); }
.panel__link svg { width: 20px; height: 11px; stroke: currentColor; stroke-width: 1.4; fill: none; }

/* ---------- proof / results --------------------------------- */
.panel--proof .panel__body {
  min-height: clamp(180px, 24.5vh, 278px);
  padding: clamp(13px, 1.25vw, 24px) clamp(13px, 1.25vw, 24px) clamp(11px, 1.1vw, 20px);
  background:
    linear-gradient(120deg, rgba(9, 38, 25, 0.90), rgba(4, 22, 14, 0.94)),
    var(--glass-proof);
}
.proof__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.55fr);
  gap: clamp(6px, 0.6vw, 11px);
  margin-top: clamp(10px, 1.4vh, 18px);
}
.proof__tile {
  position: relative;
  aspect-ratio: 1 / 1.06;
  border: 1px solid rgba(206, 240, 220, 0.22);
  border-radius: clamp(6px, 0.55vw, 11px);
  overflow: hidden;
  background: #071a12;
}
.proof__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}
.proof__tile::after {                   /* glass curvature over each tile */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(124deg,
    rgba(255, 255, 255, 0.2) 0%, transparent 34%,
    transparent 76%, rgba(255, 255, 255, 0.08) 100%);
}
.panel--proof:hover .proof__tile img { transform: scale(1.07); }

/* the little chart readout */
.chart {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: clamp(8px, 0.8vw, 15px);
  border: 1px solid rgba(190, 226, 226, 0.26);
  border-radius: clamp(6px, 0.55vw, 11px);
  background: linear-gradient(160deg,
    rgba(48, 78, 78, 0.62), rgba(16, 34, 36, 0.80));
}
.chart__title {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.72vw, 13px);
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid  { stroke: rgba(214, 240, 235, 0.22); stroke-width: 0.8; fill: none; }
.chart__axis  { stroke: rgba(214, 240, 235, 0.4);  stroke-width: 0.9; fill: none; }
.chart__line {
  stroke: var(--mint-100);
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(160, 255, 210, 0.55));
  stroke-dasharray: var(--len, 320);
  stroke-dashoffset: var(--len, 320);
}
.chart__dot {
  fill: var(--mint-100);
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(160, 255, 210, 0.8));
}
.is-in .chart__line { animation: drawLine 1800ms var(--ease-out) 260ms forwards; }
.is-in .chart__dot  { animation: popDot 420ms var(--ease-out) forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes popDot   { to { opacity: 1; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  .theatre__inner {
    grid-template-columns:
      [rail-l] 58px
      [stage] minmax(180px, 0.48fr)
      [main] minmax(0, 1.52fr)
      [rail-r] 58px;
  }

  .product-qualities {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 12px 0;
  }

  .product-qualities li {
    flex: 0 0 auto;
  }
}

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

  .theatre__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: auto;
    padding:
      calc(var(--nav-height) + 34px)
      var(--gutter)
      clamp(56px, 10vh, 96px);
    row-gap: clamp(32px, 6vh, 64px);
  }
  .rail--left,
  .rail--right { display: none; }

  .stage {
    grid-column: 1;
    grid-row: auto;
    padding-bottom: clamp(16px, 3vh, 34px);
    translate: 0;
  }
  .stage__product { width: min(68%, 262px); height: min(56vh, 470px); }

  .theatre__main {
    grid-column: 1;
    grid-row: auto;
    gap: clamp(28px, 5vh, 48px);
    translate: 0;
  }
  .buy { padding-left: 0; }
  .buy__wordmark { font-size: clamp(44px, 13vw, 84px); }
  .buy__name     { font-size: clamp(20px, 5.4vw, 34px); }
  .buy__meta     { font-size: clamp(16px, 4.2vw, 26px); }
  .buy__copy     { font-size: clamp(14px, 3.7vw, 19px); }
  .benefit__label { font-size: clamp(12px, 3.1vw, 15px); }

  .btn-cart { flex: 1 1 100%; min-width: 0; }

  .result-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .product-proof__gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) 64px;
  }

  .product-proof {
    margin-right: 0;
  }

  /* the fanned 3-D stack unstacks into two readable cards */
  .panels {
    perspective: none;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    gap: 18px;
  }
  .panel { transform: none !important; }
  .panel--formula,
  .panel--proof { position: relative; width: 100%; right: auto; bottom: auto; }
  .panels__floor { display: none; }
  .proof__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .chart { grid-column: 1 / -1; }
  .theatre__footline { grid-column: 1; }
}

@media (max-width: 480px) {
  .theatre__inner {
    padding-top: calc(var(--nav-height) + 28px);
  }

  .result-metrics {
    grid-template-columns: 1fr;
  }

  .result-metrics li {
    min-height: 78px;
  }

  .product-qualities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 8px;
  }

  .product-qualities li {
    padding: 0;
  }

  .product-qualities li + li::before { display: none; }

  .product-proof__header {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .product-proof__gallery {
    grid-template-columns: 1fr;
  }

  .product-proof__peek { display: none; }

  .product-proof__result img {
    height: 150px;
  }

  .product-proof__next {
    position: absolute;
    top: auto;
    right: 18px;
    bottom: 17px;
    translate: 0;
  }

  .benefits { gap: 14px; }
  .benefits li { flex: 1 1 100%; }
}

/* Dedicated mobile product journey: product first, conversion action early,
   evidence and sensorial details immediately after purchase intent. */
@media (max-width: 560px) {
  .theatre::before {
    height: 96px;
  }

  .theatre__keylight {
    background:
      radial-gradient(82% 34% at 50% 18%, rgba(126, 229, 171, 0.18), transparent 72%),
      radial-gradient(75% 34% at 50% 58%, rgba(72, 168, 124, 0.08), transparent 74%);
  }

  .theatre__haze {
    background:
      linear-gradient(180deg, rgba(3, 14, 8, 0.42) 0%, transparent 13%),
      linear-gradient(0deg, rgba(2, 8, 5, 0.46) 0%, transparent 18%),
      linear-gradient(90deg, rgba(2, 8, 5, 0.36), transparent 24% 76%, rgba(2, 8, 5, 0.34));
  }

  .theatre__inner {
    position: relative;
    padding:
      0
      24px
      12px;
    row-gap: 18px;
  }

  .rail--left { display: none; }

  .rail--right {
    display: block;
    position: absolute;
    top: calc(var(--nav-height) + 132px);
    right: 24px;
    z-index: 3;
    width: 104px;
    margin: 0;
    padding: 0 0 17px;
    color: rgba(220, 232, 210, 0.62);
    font-size: 8px;
    letter-spacing: 0.32em;
    line-height: 1.65;
    text-align: left;
    white-space: normal;
  }

  .rail--right::before {
    display: block;
    right: auto;
    left: 0;
    width: 38px;
  }

  .stage {
    min-height: 0;
    padding: 0;
  }

  .stage__product {
    width: min(64%, 238px);
    height: min(40svh, 340px);
  }

  .theatre__main {
    gap: 0;
  }

  .buy {
    display: flex;
    flex-direction: column;
  }

  .buy__name {
    order: 1;
    max-width: 10em;
    font-size: clamp(30px, 8.4vw, 34px);
    line-height: 1.04;
  }

  .buy__meta {
    order: 2;
    margin-top: 9px;
    font-size: 20px;
  }

  .buy__rule {
    order: 3;
    margin-top: 16px;
  }

  .buy__copy {
    order: 4;
    margin-top: 16px;
    color: rgba(239, 242, 233, 0.76);
    font-size: 17px;
    line-height: 1.42;
  }

  .buy__actions {
    order: 7;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 18px;
  }

  .buy__actions.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .buy .btn-cart {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    border-radius: 6px;
  }

  .link-quiet {
    align-self: center;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .buy__proof-label {
    order: 5;
    display: none;
  }

  .result-metrics {
    order: 6;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
  }

  .result-metrics li {
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 0 8px;
    text-align: center;
  }

  .result-metrics li:first-child { padding-left: 0; }
  .result-metrics li:last-child { padding-right: 0; }

  .result-metrics li + li::before {
    top: 4px;
    height: calc(100% - 8px);
  }

  .result-metric__ring {
    width: clamp(60px, 17vw, 68px);
  }

  .result-metric__ring strong {
    font-size: 17px;
  }

  .result-metric__copy span {
    font-size: 12px;
    line-height: 1.2;
  }

  .product-qualities {
    order: 8;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-top: 12px;
    padding-top: 18px;
    border-top: 0;
    gap: 8px 0;
    background:
      linear-gradient(90deg, transparent, rgba(218, 242, 224, 0.42), transparent)
      top center / 140px 1px no-repeat;
  }

  .product-qualities li {
    grid-column: span 2;
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

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

  .product-qualities li:nth-child(5) {
    grid-column: 4 / span 2;
    justify-content: center;
  }

  .product-qualities li + li::before { display: none; }

  .product-qualities li > span {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
  }

  .product-qualities strong {
    font-size: 10.5px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .buy__secondary-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
  }

  .buy__secondary-actions .link-quiet {
    position: relative;
    align-self: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 0 2px;
    border: 0;
    border-radius: 0;
    color: rgba(235, 241, 228, 0.84);
    background: transparent;
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
  }

  .buy__secondary-actions .link-quiet::before {
    content: "→";
    order: 2;
    font-family: var(--font-sans);
    font-size: 15px;
  }

  .buy__secondary-actions .link-quiet::after {
    display: block;
    bottom: 3px;
  }

  .buy__results-link { display: inline-flex; }
}


/* assets/css/results.css */
/* ============================================================
   SECTION 4 — RESULTS / SCALP ENVIRONMENT
   ============================================================ */
.results-story {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  margin-top: -140px;
  overflow: hidden;
  padding:
    clamp(20px, 2.6vh, 28px)
    clamp(28px, 5vw, 80px)
    clamp(38px, 6vh, 72px);
  color: rgba(243, 247, 240, 0.94);
  background:
    linear-gradient(
      180deg,
      transparent 0,
      transparent 140px,
      var(--forest-950) 140px
    );
}

/* Mobile result accordion */
@media (max-width: 620px) {
  .results-story {
    padding-right: 16px;
    padding-bottom: 48px;
    padding-left: 16px;
  }

  .results-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .results-story__heading {
    order: 0;
    margin-bottom: 20px;
  }

  .results-tabs,
  .results-panels {
    display: contents;
  }

  #scalpResponseTab { order: 1; }
  #scalpResponsePanel { order: 2; }
  #scalpEnvironmentTab { order: 3; }
  #scalpEnvironmentPanel { order: 4; }
  #visibleProgressTab { order: 5; }
  #visibleProgressPanel { order: 6; }
  #realPeopleTab { order: 7; }
  #realPeoplePanel { order: 8; }

  .results-tab {
    grid-template-columns: 66px minmax(0, 1fr) 20px;
    gap: 14px;
    width: 100%;
    min-height: 86px;
    margin: 10px 0 0;
    padding: 13px 17px;
    border-color: rgba(190, 225, 199, 0.34);
    border-radius: 12px;
    color: rgba(245, 247, 238, 0.96);
    background:
      linear-gradient(145deg, rgba(20, 53, 37, 0.86), rgba(7, 33, 21, 0.9));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 10px 28px rgba(0, 0, 0, 0.1);
    scroll-snap-align: none;
  }

  #scalpResponseTab {
    margin-top: 0;
  }

  .results-tab::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transform-origin: center;
    transition: transform 280ms var(--ease-out);
  }

  .results-tab.is-active::after {
    transform: rotate(225deg) translate(-1px, 1px);
  }

  .results-tab__number {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 14px;
    border-right: 1px solid rgba(224, 237, 222, 0.32);
    font-size: 39px;
    line-height: 1;
  }

  .results-tab__copy {
    justify-content: center;
  }

  .results-tab__copy strong {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.05;
  }

  .results-tab__copy small {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.3;
  }

  .results-tab > img,
  .results-tab__timeline-thumb,
  .results-tab__people-thumb {
    display: none;
  }

  .results-tab.is-active {
    z-index: 2;
    margin-bottom: 0;
    transform: none;
    border-color: rgba(30, 48, 36, 0.16);
    border-bottom-color: rgba(30, 48, 36, 0.1);
    border-radius: 12px 12px 0 0;
    color: #192219;
    background: #f7f8f1;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .results-tab.is-active .results-tab__number,
  .results-tab.is-active .results-tab__copy strong {
    color: #182018;
  }

  .results-tab.is-active .results-tab__number {
    border-right-color: rgba(30, 48, 36, 0.2);
  }

  .results-tab.is-active .results-tab__copy small {
    color: rgba(25, 34, 25, 0.68);
  }

  .results-panel,
  .results-panel--response,
  .results-panel--progress,
  .results-panel--people {
    position: relative;
    grid-area: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: -1px 0 0;
    overflow: hidden;
    border-color: rgba(30, 48, 36, 0.16);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #f7f8f1;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
  }

  .results-panel[hidden] {
    display: none;
  }

  .results-story.is-enhanced .results-panel,
  .results-story.is-enhanced .results-panel.is-open {
    opacity: 1;
    translate: none;
  }

  .results-panel__intro,
  .results-panel--response .results-panel__intro,
  .results-panel--progress .results-panel__intro {
    padding: 18px 24px 10px;
  }

  .results-panel__label,
  .results-panel__dots {
    display: none;
  }

  .results-panel__intro h3,
  .results-panel--response .results-panel__intro h3,
  .results-panel--progress .results-panel__intro h3 {
    max-width: none;
    margin: 0;
    font-size: clamp(27px, 7.6vw, 31px);
    line-height: 0.98;
  }

  .results-panel__intro h3 br {
    display: none;
  }

  .results-panel__description,
  .results-panel--response .results-panel__description,
  .results-panel--progress .results-panel__description {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.42;
  }

  .results-panel--progress .results-panel__intro {
    display: none;
  }

  .results-evidence,
  .results-evidence--response,
  .results-evidence--progress {
    flex: 0 0 auto;
    padding: 8px 24px 10px;
  }

  .results-evidence__eyebrow {
    margin-bottom: 8px;
    font-size: 7px;
  }

  .microcirculation-scale {
    margin-bottom: 8px;
  }

  .microcirculation-scale > span {
    height: 9px;
  }

  .microcirculation-card img {
    height: 108px;
    aspect-ratio: auto;
    object-fit: cover;
  }

  .microcirculation-card figcaption {
    font-size: 9px;
  }

  .trichoscopy-card img {
    height: 104px;
  }

  .results-metrics {
    gap: 8px;
    margin-top: 10px;
  }

  .results-metrics article {
    min-height: 82px;
    padding: 8px 9px;
  }

  .results-metrics p {
    font-size: 11px;
  }

  .results-metrics strong {
    margin-top: 3px;
    font-size: 24px;
  }

  .results-metrics span {
    margin-top: 4px;
    font-size: 7px;
  }

  .results-metrics article > small {
    display: none;
  }

  .progression-card img {
    height: clamp(70px, 20vw, 82px);
  }

  .progression-metrics {
    gap: 8px 14px;
    margin-top: 0;
    padding-top: 7px;
  }

  .progression-metrics article {
    padding-top: 3px;
    padding-bottom: 5px;
  }

  .results-panel__navigation {
    grid-template-columns: 38px 1fr 38px;
    gap: 10px;
    margin: 12px 20px 14px;
    padding-top: 11px;
  }

  .results-evidence .results-panel__navigation {
    margin-top: 12px;
  }

  .results-panel__navigation button {
    width: 38px;
    height: 38px;
  }

  .people-testimonial {
    padding: 18px 22px 10px;
  }

  .people-testimonial::before,
  .people-testimonial blockquote p:first-child {
    display: none;
  }

  .people-testimonial blockquote p:last-child::before {
    content: "“";
    color: #3d8a61;
    font-size: 1.35em;
    line-height: 0;
  }

  .people-testimonial blockquote p {
    font-size: 16px;
    line-height: 1.18;
  }

  .people-testimonial__credit {
    margin-top: 10px;
    padding-bottom: 7px;
    font-size: 8px;
  }

  .people-testimonial__journeys {
    min-height: 38px;
    margin-top: 7px;
    font-size: 12px;
  }

  .people-evidence {
    gap: 7px;
    padding: 0 22px 6px;
  }

  .people-comparison figure {
    height: 112px;
    aspect-ratio: auto;
  }

  .people-benefits {
    min-height: 44px;
    padding: 4px;
  }

  .people-benefits__icon {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 620px) {
  .results-tab__desktop-summary {
    display: none;
  }

  .results-tab__mobile-summary {
    display: block;
  }

  .results-panel__intro h3 br,
  .trichoscopy-card figcaption br {
    display: initial;
  }
}
*** End of File

.results-story__atmosphere {
  position: absolute;
  inset: 140px -6% -6%;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(2, 15, 9, 0.7), rgba(2, 18, 10, 0.84)),
    radial-gradient(circle at 12% 18%, rgba(102, 173, 105, 0.22), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(59, 125, 77, 0.18), transparent 32%),
    url("//enigmaformen.com/cdn/shop/t/2/assets/enigma-assets-img-texture-theatre-wall.jpg?v=176201435005190853571790600773") center / cover no-repeat;
  filter: blur(1px) saturate(112%);
}

.results-story__atmosphere::before,
.results-story__atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(28px);
  pointer-events: none;
}

.results-story__atmosphere::before {
  top: 4%;
  left: 2%;
  width: min(28vw, 400px);
  aspect-ratio: 1.4;
  background: radial-gradient(circle, rgba(133, 188, 119, 0.22), transparent 67%);
}

.results-story__atmosphere::after {
  right: 4%;
  bottom: 2%;
  width: min(24vw, 340px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(67, 137, 84, 0.18), transparent 70%);
}

.results-story__inner {
  width: min(100%, 1440px);
  margin: 0 auto;
}

/* ---------- heading ---------------------------------------- */
.results-story__heading {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  width: min(100%, 1120px);
  margin-inline: auto;
  text-align: center;
}

.results-story__heading::before,
.results-story__heading::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 236, 215, 0.34));
}

.results-story__heading::after {
  background: linear-gradient(90deg, rgba(210, 236, 215, 0.34), transparent);
}

.results-story__heading p {
  margin: 0 0 10px;
  color: rgba(224, 237, 222, 0.76);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.75vw, 12px);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

.results-story__heading h2 {
  margin: 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.5vw, 54px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.36);
}

/* ---------- four result categories ------------------------- */
.results-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(22px, 3vh, 36px);
  padding: 9px;
  border: 1px solid rgba(189, 229, 200, 0.28);
  border-radius: 14px;
  background: rgba(3, 24, 14, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 22px 55px rgba(0, 0, 0, 0.18);
}

.results-tab {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr clamp(84px, 7.6vw, 120px);
  align-items: center;
  gap: clamp(9px, 1vw, 16px);
  min-width: 0;
  min-height: clamp(92px, 8.5vw, 132px);
  padding: clamp(10px, 1vw, 16px);
  border: 1px solid rgba(184, 227, 196, 0.09);
  border-radius: 10px;
  color: rgba(240, 246, 238, 0.9);
  background:
    linear-gradient(145deg, rgba(13, 51, 32, 0.76), rgba(2, 25, 14, 0.88));
  text-align: left;
  cursor: pointer;
  transition:
    border-color 320ms ease,
    background 320ms ease,
    box-shadow 420ms var(--ease-out),
    transform 420ms var(--ease-out);
}

.results-tab[aria-disabled="true"] {
  opacity: 1;
  cursor: default;
}

.results-tab.is-active {
  z-index: 2;
  transform: translateY(-2px);
  border-color: rgba(188, 255, 207, 0.94);
  background:
    radial-gradient(circle at 82% 15%, rgba(174, 241, 187, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(43, 117, 70, 0.96), rgba(10, 62, 36, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(160, 241, 183, 0.22),
    0 12px 30px rgba(0, 0, 0, 0.24),
    0 0 34px rgba(103, 230, 141, 0.22);
}

.results-tab__number {
  align-self: start;
  color: rgba(248, 249, 240, 0.96);
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.35vw, 40px);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "kern" 1;
  line-height: 0.88;
  letter-spacing: -0.025em;
}

.results-tab__copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.results-tab__copy strong,
.results-tab__copy small {
  font-family: var(--font-sans);
  font-weight: 400;
}

.results-tab__copy strong {
  color: rgba(246, 248, 241, 0.94);
  font-size: clamp(12px, 1vw, 17px);
  line-height: 1.2;
}

.results-tab__copy small {
  margin-top: 7px;
  color: rgba(224, 235, 222, 0.78);
  font-size: clamp(10px, 0.8vw, 13px);
  line-height: 1.35;
}

.results-tab__mobile-summary {
  display: none;
}

.results-tab img {
  width: 100%;
  height: clamp(76px, 7.6vw, 116px);
  border-radius: 7px;
  object-fit: cover;
}

.results-tab__timeline-thumb,
.results-tab__people-thumb {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  height: clamp(76px, 7.6vw, 116px);
  overflow: hidden;
  border-radius: 7px;
}

.results-tab__people-thumb {
  box-sizing: border-box;
  padding: 3px;
  border: 1px solid rgba(104, 203, 137, 0.45);
  background: #075437;
}

.results-tab__timeline-thumb img,
.results-tab__people-thumb img {
  height: 100%;
  min-width: 0;
  border-radius: 2px;
}

/* ---------- ivory evidence panel --------------------------- */
.results-panels {
  display: grid;
  margin-top: 14px;
}

.results-panels.is-transitioning {
  overflow: hidden;
}

.results-panels.is-transitioning .results-panel {
  transition: none;
}

.results-panel {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1.34fr);
  height: clamp(520px, 36vw, 540px);
  margin-top: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 48, 36, 0.18);
  border-radius: 15px;
  color: #121713;
  background:
    radial-gradient(circle at 88% 6%, rgba(255, 255, 255, 0.72), transparent 32%),
    linear-gradient(145deg, #fbfcf7, #f0f3ec);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transition:
    opacity 380ms ease,
    translate 460ms var(--ease-out);
}

.results-story.is-enhanced .results-panel {
  opacity: 0;
  translate: 0 18px;
}

.results-story.is-enhanced .results-panel.is-open {
  opacity: 1;
  translate: 0;
}

.results-panel__intro {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(25px, 2.4vw, 40px) clamp(24px, 2.5vw, 42px);
}

.results-panel__label {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2vw, 32px);
  margin: 0;
  text-transform: uppercase;
}

.results-panel__label strong {
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.35vw, 39px);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1, "kern" 1;
  line-height: 1;
  letter-spacing: -0.025em;
}

.results-panel__label span,
.results-evidence__eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 11px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.42em;
}

.results-panel__intro h3 {
  max-width: 9.5em;
  margin: clamp(23px, 2.8vh, 38px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.45vw, 54px);
  font-weight: 500;
  line-height: 0.93;
  letter-spacing: -0.035em;
}

.results-panel__description {
  max-width: 28em;
  margin: clamp(18px, 2.4vh, 30px) 0 0;
  color: rgba(26, 34, 28, 0.7);
  font-family: var(--font-sans);
  font-size: clamp(14px, 1.2vw, 20px);
  line-height: 1.45;
}

.results-panel__dots {
  display: flex;
  gap: 7px;
  margin-top: auto;
  padding-top: 28px;
}

.results-panel__dots span {
  width: 18px;
  height: 5px;
  border-radius: 999px;
  background: #b7beb6;
}

.results-panel__dots span.is-active {
  width: 22px;
  background: #173e2d;
}

/* ---------- comparison evidence ---------------------------- */
.results-evidence {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(25px, 2.4vw, 40px) clamp(24px, 2.7vw, 44px) clamp(30px, 3vw, 48px);
}

.results-evidence__eyebrow {
  margin: 0 0 12px;
  text-transform: uppercase;
}

.trichoscopy-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(12px, 2vw, 28px);
}

.trichoscopy-card {
  min-width: 0;
  margin: 0;
}

.trichoscopy-card img {
  display: block;
  width: 100%;
  height: clamp(138px, 11vw, 180px);
  border: 1px solid rgba(43, 55, 46, 0.14);
  border-radius: 8px;
  object-fit: cover;
  object-position: center;
}

.trichoscopy-card figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.trichoscopy-card figcaption strong {
  font-family: var(--font-sans);
  font-size: clamp(12px, 1vw, 16px);
  line-height: 1.15;
}

.trichoscopy-card figcaption span {
  margin-top: 2px;
  color: rgba(25, 34, 28, 0.67);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.74vw, 12px);
  line-height: 1.25;
}

.results-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.results-metrics article {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-height: clamp(106px, 8.6vw, 132px);
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid rgba(52, 72, 58, 0.08);
  border-radius: 8px;
  background: rgba(228, 233, 225, 0.66);
  text-align: left;
}

.results-metrics p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.45vw, 23px);
  line-height: 1.12;
}

.results-metrics strong {
  display: flex;
  align-items: baseline;
  gap: 0.12em;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.results-metrics strong i {
  color: #111713;
  font-style: normal;
  font-weight: 400;
}

.results-metrics strong .results-metric__baseline,
.results-metrics strong .results-metric__arrow {
  color: #747a75;
  font-weight: 300;
}

.results-metrics strong .results-metric__direction {
  margin-right: 0.05em;
  color: #111713;
  font-family: var(--font-sans);
  font-weight: 300;
}

.results-metrics strong small {
  margin-left: 0.06em;
  color: #69706b;
  font-size: 0.72em;
  font-weight: 400;
}

.results-metrics span {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #245636;
  background: #c9efd1;
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.82vw, 13px);
  font-weight: 500;
  line-height: 1.15;
}

.results-metrics b {
  display: inline;
  margin-right: 5px;
  padding: 0;
  color: inherit;
  background: transparent;
  font-weight: 700;
}

.results-metrics article > small {
  display: block;
  margin-top: 7px;
  color: rgba(26, 34, 28, 0.5);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.76vw, 12px);
  line-height: 1.25;
}

.results-panel__navigation {
  position: absolute;
  right: clamp(20px, 2vw, 34px);
  bottom: 9px;
  display: flex;
  gap: 9px;
}

.results-panel__navigation button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(35, 58, 43, 0.16);
  border-radius: 50%;
  color: #163423;
  background: rgba(255, 255, 255, 0.25);
  font-family: var(--font-sans);
  font-size: 17px;
}

.results-panel__navigation button:disabled {
  opacity: 1;
}

.results-panel__position { display: none; }

/* ---------- scalp response / microcirculation -------------- */
.results-panel--response {
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.15fr);
}

.results-panel--response .results-panel__intro h3 {
  max-width: 8.4em;
  font-size: clamp(42px, 4.1vw, 64px);
}

.results-panel--response .results-panel__description {
  max-width: 27em;
  color: #65718a;
}

.results-evidence--response {
  padding-left: clamp(18px, 2vw, 32px);
}

.results-evidence--response .results-evidence__eyebrow {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.microcirculation-scale {
  margin-bottom: 10px;
}

.microcirculation-scale > span {
  display: block;
  width: 100%;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    #1512c9 0%,
    #173ff1 13%,
    #00b8ee 29%,
    #28de73 43%,
    #e5ed21 60%,
    #ff9a00 76%,
    #e5290b 90%,
    #9f0000 100%
  );
  box-shadow: inset 0 0 0 1px rgba(19, 27, 21, 0.1);
}

.microcirculation-scale > div {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
}

.microcirculation-scale small {
  color: rgba(20, 29, 23, 0.68);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.76vw, 12px);
}

.microcirculation-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 235px));
  justify-content: center;
  gap: clamp(24px, 2.8vw, 42px);
}

.microcirculation-card {
  min-width: 0;
  margin: 0;
}

.microcirculation-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.835;
  border: 1px solid rgba(35, 48, 39, 0.14);
  border-radius: 7px;
  object-fit: cover;
  object-position: center;
  background: transparent;
}

.microcirculation-card figcaption {
  margin-top: 7px;
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.9vw, 15px);
}

/* ---------- visible progress / phototrichogram ------------- */
.results-panel--progress {
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.36fr);
}

.results-panel--progress .results-panel__intro {
  padding:
    30px
    clamp(32px, 3.2vw, 50px);
}

.results-panel--progress .results-panel__intro h3 {
  max-width: 8.8em;
  margin-top: 8px;
  font-size: clamp(44px, 4vw, 61px);
}

.results-panel--progress .results-panel__description {
  max-width: 29em;
  margin-top: 22px;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.35;
}

.results-evidence--progress {
  padding-top: 27px;
  padding-left: clamp(12px, 1vw, 16px);
  padding-right: clamp(20px, 2.2vw, 36px);
}

.results-evidence--progress .results-evidence__eyebrow {
  letter-spacing: 0.12em;
}

.progression-comparison {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.2vw, 19px);
}

.progression-card {
  min-width: 0;
  margin: 0;
}

.progression-card img {
  display: block;
  width: 100%;
  height: clamp(138px, 10.7vw, 165px);
  border: 1px solid rgba(35, 48, 39, 0.14);
  border-radius: 7px;
  object-fit: cover;
}

.progression-card figcaption {
  display: flex;
  flex-direction: column;
  margin-top: 5px;
}

.progression-card figcaption strong {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.1vw, 17px);
  line-height: 1.05;
}

.progression-card figcaption span {
  margin-top: 3px;
  color: rgba(25, 34, 28, 0.65);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.84vw, 13px);
  line-height: 1.3;
}

.progression-metrics {
  position: absolute;
  top: 291px;
  right: 45px;
  left: 50px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(39, 56, 44, 0.14);
}

.progression-metrics article {
  min-width: 0;
  min-height: 126px;
  padding: 10px;
  border: 1px solid rgba(44, 62, 49, 0.09);
  border-radius: 8px;
  background: rgba(228, 233, 225, 0.58);
}

.progression-metrics strong {
  display: flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-serif);
  font-size: clamp(19px, 1.65vw, 25px);
  letter-spacing: -0.035em;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.progression-metrics strong > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.progression-metrics strong b,
.progression-metrics strong small {
  font: inherit;
  font-weight: 400;
}

.progression-metrics strong small {
  margin-top: 2px;
  font-size: 0.64em;
  line-height: 1.05;
}

.progression-metrics i {
  flex: 0 0 auto;
  color: #0eaa35;
  font-family: var(--font-sans);
  font-size: 1.5em;
  font-style: normal;
  font-weight: 400;
  line-height: 0.7;
}

.progression-metrics i.is-down {
  color: #d33429;
}

.progression-metric__greater {
  display: inline-block;
  color: #0eaa35;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 0.7;
}

.progression-metrics p {
  margin: 6px 0 0;
  color: rgba(30, 41, 33, 0.6);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.74vw, 11px);
  line-height: 1.25;
}

.progression-metric__time {
  display: block;
  margin-top: 6px;
  color: #2c6542;
  font-family: var(--font-sans);
  font-size: clamp(7.5px, 0.56vw, 8.5px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.progression-metrics strong {
  flex-wrap: wrap;
}

.progression-metrics strong b {
  font-size: 1.55em;
}

.progression-metrics strong > i {
  font-size: 1.55em;
}

.progression-metrics strong .progression-metric__time {
  flex: 0 0 100%;
  margin: 5px 0 0;
  line-height: 1.2;
  white-space: nowrap;
}

.progression-metrics article > p {
  color: #2c6542;
}

.progression-metrics p small {
  display: block;
  margin-top: 4px;
  color: rgba(30, 41, 33, 0.44);
  font-size: 0.82em;
  line-height: 1.25;
}

.progression-metrics p em {
  display: block;
  margin-top: 3px;
  color: rgba(20, 31, 23, 0.9);
  font-family: var(--font-serif);
  font-size: 1.24em;
  font-style: normal;
  line-height: 1.08;
}

/* ---------- real people / testimonial ---------------------- */
.results-panel--people {
  grid-template-columns: minmax(330px, 0.8fr) minmax(0, 1.34fr);
  height: clamp(520px, 36vw, 540px);
}

.people-testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding:
    clamp(28px, 2.2vw, 34px)
    clamp(32px, 3vw, 46px)
    52px;
}

.people-testimonial blockquote {
  position: relative;
  margin: 0;
}

.people-testimonial blockquote p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(20px, 1.76vw, 27px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
}

.people-testimonial blockquote p span {
  display: block;
  white-space: nowrap;
}

.people-testimonial .testimonial-quote {
  display: inline-block;
  color: #3d8a61;
  font-family: inherit;
  font-size: 1.5em;
  font-style: normal;
  font-weight: 600;
  line-height: 0.72;
  vertical-align: -0.1em;
}

.people-testimonial .testimonial-quote--open {
  margin-right: 0.08em;
}

.people-testimonial .testimonial-quote--close {
  margin-left: 0.08em;
}

.people-testimonial blockquote p + p {
  margin-top: clamp(12px, 1.2vw, 18px);
}

.people-testimonial__credit {
  margin: auto 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(37, 55, 43, 0.14);
  color: rgba(30, 43, 34, 0.6);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.98vw, 15px);
}

.people-testimonial__journeys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 330px);
  min-height: 46px;
  margin-top: 13px;
  padding: 10px 22px;
  border: 1px solid rgba(14, 111, 70, 0.72);
  border-radius: 10px;
  color: rgba(251, 250, 242, 0.96);
  background:
    radial-gradient(circle at 50% 0%, rgba(36, 119, 79, 0.42), transparent 66%),
    linear-gradient(135deg, #073f2a, #015b38 58%, #073b28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 7px 18px rgba(7, 67, 43, 0.2);
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1;
  text-decoration: none;
  transition:
    transform 220ms var(--ease-out),
    box-shadow 220ms ease,
    background 220ms ease;
}

.people-testimonial__journeys span {
  font-family: var(--font-sans);
  font-size: 1.05em;
  transition: transform 220ms var(--ease-out);
}

.people-testimonial__journeys:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 11px 24px rgba(7, 67, 43, 0.28);
}

.people-testimonial__journeys:hover span {
  transform: translateX(4px);
}

.people-testimonial .results-panel__dots {
  position: absolute;
  bottom: 17px;
  left: clamp(32px, 3vw, 46px);
  margin: 0;
  padding: 0;
}

.people-evidence {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 72px 42px;
  min-width: 0;
  min-height: 0;
  gap: 8px;
  padding: 12px 22px 8px 0;
}

.people-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-height: 0;
}

.people-comparison figure {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
}

.people-comparison img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.people-comparison figure:last-child img {
  scale: 1.06;
  transform-origin: center top;
}

.people-comparison figcaption {
  position: absolute;
  bottom: 13px;
  left: 13px;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(250, 252, 247, 0.96);
  background: rgba(28, 60, 45, 0.86);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.72vw, 11px);
  backdrop-filter: blur(7px);
}

.people-comparison figure:last-child figcaption {
  background: rgba(22, 116, 76, 0.9);
}

.people-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(47, 64, 52, 0.07);
  border-radius: 10px;
  background: rgba(226, 232, 224, 0.62);
}

.people-benefits > div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 0;
  color: rgba(28, 42, 33, 0.7);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.98vw, 15px);
  line-height: 1.25;
}

.people-benefits > div + div::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.75);
}

.people-benefits__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #275c43;
  background: rgba(250, 252, 247, 0.78);
}

.people-benefits__icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- responsive ------------------------------------- */
@media (max-width: 980px) {
  .results-story {
    margin-top: 0;
    background: var(--forest-950);
  }

  .results-story__atmosphere {
    inset: -6%;
  }

  .results-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-panel {
    grid-template-columns: 1fr;
    height: auto;
  }

  .results-panel--response {
    grid-template-columns: 1fr;
  }

  .results-panel--progress {
    grid-template-columns: 1fr;
  }

  .results-panel--people {
    grid-template-columns: 1fr;
  }

  .people-testimonial blockquote p span {
    display: inline;
    white-space: normal;
  }

  .people-evidence {
    grid-template-rows: auto 72px;
    padding: 0 clamp(24px, 2.7vw, 44px) clamp(24px, 2.7vw, 44px);
  }

  .people-testimonial .results-panel__dots {
    position: static;
    margin-top: 20px;
  }

  .people-comparison figure {
    aspect-ratio: 1.1;
  }

  .progression-metrics {
    position: static;
    margin: 0 clamp(24px, 2.7vw, 44px) clamp(24px, 2.7vw, 44px);
  }

  .results-panel__intro h3 { max-width: none; }
  .results-panel__dots { margin-top: 28px; }

  .results-panel--response .results-panel__intro h3 {
    max-width: none;
  }
}

@media (max-width: 620px) {
  .results-story {
    padding:
      calc(var(--nav-height) + 28px)
      16px
      36px;
  }

  .results-story__heading h2 {
    font-size: clamp(34px, 9vw, 42px);
  }

  .results-story__heading {
    grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
    gap: 10px;
  }

  .results-tabs {
    grid-template-columns: 1fr;
  }

  .results-tab {
    grid-template-columns: 44px 1fr 72px;
  }

  .trichoscopy-comparison {
    grid-template-columns: 1fr;
  }

  .results-metrics {
    grid-template-columns: 1fr;
  }

  .microcirculation-comparison {
    grid-template-columns: 1fr;
  }

  .progression-comparison,
  .progression-metrics {
    grid-template-columns: 1fr;
  }

  .progression-metrics {
    position: static;
    margin: 0 clamp(24px, 2.7vw, 44px) clamp(24px, 2.7vw, 44px);
  }

  .progression-card img {
    height: auto;
    aspect-ratio: 1.35;
  }

  .people-comparison,
  .people-benefits {
    grid-template-columns: 1fr;
  }

  .people-evidence {
    grid-template-rows: auto auto;
  }

  .people-comparison figure {
    aspect-ratio: 1.2;
  }

  .people-benefits {
    gap: 10px;
    padding: 12px;
  }

  .people-benefits > div {
    justify-content: flex-start;
  }

  .people-benefits > div + div::before {
    display: none;
  }

  .results-panel__navigation {
    position: static;
    justify-content: flex-end;
    margin-top: 18px;
  }
}

/* Dedicated mobile proof experience */
@media (max-width: 620px) {
  .results-story {
    min-height: auto;
    padding:
      var(--nav-height)
      16px
      52px;
  }

  .results-story__heading {
    grid-template-columns: minmax(18px, 1fr) auto minmax(18px, 1fr);
    gap: 12px;
  }

  .results-story__heading h2 {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 0.96;
  }

  .results-tabs {
    display: flex;
    gap: 10px;
    margin: 22px -16px 0;
    padding: 7px 16px 12px;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    scroll-padding-inline: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .results-tabs::-webkit-scrollbar { display: none; }

  .results-tab {
    flex: 0 0 min(76vw, 284px);
    grid-template-columns: 38px minmax(0, 1fr) 72px;
    gap: 9px;
    min-height: 86px;
    padding: 9px 10px;
    scroll-snap-align: start;
  }

  .results-tab.is-active {
    transform: none;
  }

  .results-tab__number {
    font-size: 30px;
  }

  .results-tab__copy strong {
    font-size: 12px;
  }

  .results-tab__copy small {
    margin-top: 5px;
    font-size: 9px;
  }

  .results-tab img,
  .results-tab__timeline-thumb,
  .results-tab__people-thumb {
    height: 66px;
  }

  .results-panels {
    margin-top: 4px;
    touch-action: pan-y;
  }

  .results-panels img {
    -webkit-user-drag: none;
    user-select: none;
  }

  .results-panel,
  .results-panel--response,
  .results-panel--progress,
  .results-panel--people {
    display: flex;
    flex-direction: column;
    height: 690px;
    min-height: 0;
    border-radius: 14px;
  }

  .results-panel__intro,
  .results-panel--progress .results-panel__intro {
    padding: 24px 20px 18px;
  }

  .results-panel--progress .results-panel__intro {
    padding-bottom: 14px;
  }

  .results-panel__label {
    gap: 14px;
  }

  .results-panel__label strong {
    font-size: 28px;
  }

  .results-panel__label span,
  .results-evidence__eyebrow {
    font-size: 8px;
    letter-spacing: 0.32em;
  }

  .results-panel__intro h3,
  .results-panel--response .results-panel__intro h3,
  .results-panel--progress .results-panel__intro h3 {
    max-width: 9em;
    margin-top: 17px;
    font-size: clamp(38px, 10.8vw, 44px);
    line-height: 0.94;
  }

  .results-panel__description,
  .results-panel--response .results-panel__description,
  .results-panel--progress .results-panel__description {
    max-width: 30em;
    margin-top: 16px;
    font-size: 14px;
    line-height: 1.45;
  }

  .results-panel__description br { display: none; }
  .results-panel__dots { display: none; }

  .results-evidence,
  .results-evidence--response,
  .results-evidence--progress {
    flex: 1 1 auto;
    padding: 4px 20px 22px;
  }

  .results-evidence__eyebrow {
    margin-bottom: 11px;
    line-height: 1.35;
  }

  .microcirculation-scale {
    margin-bottom: 11px;
  }

  .microcirculation-scale > span {
    height: 12px;
  }

  .microcirculation-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .microcirculation-card img {
    aspect-ratio: 0.86;
  }

  .microcirculation-card figcaption {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.25;
  }

  .trichoscopy-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 10px;
  }

  .trichoscopy-card img {
    height: 132px;
  }

  .trichoscopy-card figcaption strong {
    font-size: 12px;
  }

  .trichoscopy-card figcaption span {
    font-size: 9px;
  }

  .trichoscopy-card figcaption br { display: none; }

  .results-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
  }

  .results-metrics article {
    min-height: 106px;
    padding: 9px 10px;
  }

  .results-metrics p {
    font-size: 13px;
  }

  .results-metrics strong {
    margin-top: 5px;
    font-size: 28px;
  }

  .results-metrics span {
    margin-top: 5px;
    padding: 3px 7px;
    font-size: 8px;
  }

  .results-metrics b {
    margin-right: 3px;
    padding: 0;
  }

  .results-metrics article > small {
    margin-top: 5px;
    font-size: 8px;
  }

  .progression-comparison {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .progression-card img {
    height: clamp(88px, 25vw, 100px);
    aspect-ratio: auto;
  }

  .progression-card figcaption {
    margin-top: 6px;
  }

  .progression-card figcaption strong {
    font-size: 11px;
  }

  .progression-card figcaption span {
    display: none;
  }

  .progression-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 4px 0 0;
    padding: 8px 20px 0;
    overflow: visible;
    border-top: 1px solid rgba(39, 56, 44, 0.14);
  }

  .progression-metrics article {
    display: block;
    min-height: 0;
    padding: 5px 0 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .progression-metrics article + article {
    border-top: 0;
  }

  .progression-metrics strong {
    gap: 5px;
    font-size: 18px;
    line-height: 0.94;
    white-space: normal;
  }

  .progression-metrics strong small {
    margin-top: 3px;
    font-size: 0.65em;
    line-height: 1.02;
  }

  .progression-metrics i {
    font-size: 1.45em;
  }

  .progression-metrics p {
    min-height: 0;
    margin: 5px 0 0;
    padding-left: 0;
    border-left: 0;
    font-size: 7.2px;
    line-height: 1.28;
  }

  .progression-metric__time {
    margin-top: 5px;
    font-size: 7px;
    letter-spacing: -0.02em;
  }

  .progression-metrics strong .progression-metric__time {
    flex: 0 0 100%;
    margin: 4px 0 0;
  }

  .progression-metrics p small {
    margin-top: 3px;
    font-size: 0.84em;
  }

  .progression-metrics p em {
    margin-top: 3px;
    font-size: 1.2em;
  }

  .results-panel__navigation {
    position: static;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    width: auto;
    margin: auto 20px 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(35, 58, 43, 0.13);
  }

  .results-evidence .results-panel__navigation {
    margin-top: auto;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .results-panel__navigation button {
    width: 44px;
    height: 44px;
    background: rgba(225, 233, 224, 0.72);
  }

  .results-panel__position {
    display: block;
    color: rgba(30, 49, 37, 0.5);
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-align: center;
  }

  .people-testimonial {
    padding: 22px 22px 14px;
  }

  .people-testimonial::before {
    content: "04  ·  REAL PEOPLE";
    display: block;
    margin-bottom: 15px;
    color: rgba(28, 47, 35, 0.55);
    font-family: var(--font-sans);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.32em;
  }

  .people-testimonial blockquote p {
    font-size: 19px;
    line-height: 1.14;
  }

  .people-testimonial blockquote p + p {
    margin-top: 10px;
  }

  .people-testimonial__credit {
    margin: 14px 0 0;
    padding-bottom: 10px;
    font-size: 10px;
    line-height: 1.4;
  }

  .people-testimonial__journeys {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;
    font-size: 15px;
  }

  .people-evidence {
    grid-template-rows: auto auto;
    gap: 9px;
    padding: 0 20px 8px;
  }

  .people-comparison {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .people-comparison figure {
    aspect-ratio: 1;
  }

  .people-comparison figcaption {
    bottom: 8px;
    left: 8px;
    padding: 5px 8px;
    font-size: 8px;
  }

  .people-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 6px 4px;
  }

  .people-benefits > div {
    justify-content: center;
    gap: 5px;
    font-size: 8px;
    text-align: center;
  }

  .people-benefits > div + div::before {
    display: block;
    top: 7px;
    bottom: 7px;
  }

  .people-benefits__icon {
    width: 30px;
    height: 30px;
  }

  .people-benefits__icon svg {
    width: 17px;
    height: 17px;
  }
}

/* Final mobile accordion overrides */
@media (max-width: 620px) {
  .results-story {
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 24px;
    padding-left: 16px;
    scroll-margin-top: var(--nav-height);
  }

  .results-story__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .results-story__heading {
    order: 0;
    margin-bottom: 20px;
  }

  .results-tabs,
  .results-panels {
    display: contents;
  }

  #scalpResponseTab { order: 1; }
  #scalpResponsePanel { order: 2; }
  #scalpEnvironmentTab { order: 3; }
  #scalpEnvironmentPanel { order: 4; }
  #visibleProgressTab { order: 5; }
  #visibleProgressPanel { order: 6; }
  #realPeopleTab { order: 7; }
  #realPeoplePanel { order: 8; }

  .results-tab {
    grid-template-columns: 54px minmax(0, 1fr) 18px;
    gap: 11px;
    width: 100%;
    min-height: 70px;
    margin: 7px 0 0;
    padding: 9px 13px;
    border-color: rgba(255, 255, 255, 0.66);
    border-radius: 12px;
    color: #172018;
    background:
      linear-gradient(145deg, rgba(250, 251, 244, 0.95), rgba(225, 231, 220, 0.9));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      inset 0 -1px 0 rgba(32, 55, 41, 0.08),
      0 12px 30px rgba(0, 0, 0, 0.14);
    -webkit-backdrop-filter: blur(16px) saturate(112%);
    backdrop-filter: blur(16px) saturate(112%);
    scroll-snap-align: none;
  }

  #scalpResponseTab {
    margin-top: 0;
  }

  .results-tab::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, 2px);
    transform-origin: center;
    transition: transform 280ms var(--ease-out);
  }

  .results-tab.is-active::after {
    transform: rotate(225deg) translate(-1px, 1px);
  }

  .results-tab__number {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid rgba(30, 48, 36, 0.18);
    color: #172018;
    font-size: 32px;
    line-height: 1;
  }

  .results-tab__copy {
    justify-content: center;
  }

  .results-tab__copy strong {
    color: #172018;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1.05;
  }

  .results-tab__copy small {
    margin-top: 4px;
    color: rgba(23, 32, 24, 0.66);
    font-size: 9px;
    line-height: 1.3;
  }

  .results-tab > img,
  .results-tab__timeline-thumb,
  .results-tab__people-thumb {
    display: none;
  }

  .results-tab.is-active {
    z-index: 2;
    margin-bottom: 0;
    transform: none;
    border-color: rgba(30, 48, 36, 0.16);
    border-bottom-color: rgba(30, 48, 36, 0.1);
    border-radius: 12px 12px 0 0;
    color: #192219;
    background: linear-gradient(145deg, #e7f2e1, #cfe3ca);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
  }

  .results-tab.is-active .results-tab__number,
  .results-tab.is-active .results-tab__copy strong {
    color: #182018;
  }

  .results-tab.is-active .results-tab__number {
    border-right-color: rgba(30, 48, 36, 0.2);
  }

  .results-tab.is-active .results-tab__copy small {
    color: rgba(25, 34, 25, 0.68);
  }

  .results-panel,
  .results-panel--response,
  .results-panel--progress,
  .results-panel--people {
    position: relative;
    grid-area: auto;
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: -1px 0 0;
    overflow: hidden;
    border-color: rgba(30, 48, 36, 0.16);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(145deg, #edf6e8, #dcebd7);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
  }

  .results-panel[hidden] {
    display: none;
  }

  .results-story.is-enhanced .results-panel,
  .results-story.is-enhanced .results-panel.is-open {
    opacity: 1;
    translate: none;
  }

  .results-panel__intro,
  .results-panel--response .results-panel__intro,
  .results-panel--progress .results-panel__intro {
    padding: 18px 24px 10px;
  }

  .results-panel__label,
  .results-panel__dots {
    display: none;
  }

  .results-panel__intro h3,
  .results-panel--response .results-panel__intro h3,
  .results-panel--progress .results-panel__intro h3 {
    max-width: none;
    margin: 0;
    font-size: clamp(27px, 7.6vw, 31px);
    line-height: 0.98;
  }

  .results-panel__intro h3 br {
    display: none;
  }

  .results-panel__description,
  .results-panel--response .results-panel__description,
  .results-panel--progress .results-panel__description {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.42;
  }

  .results-panel--progress .results-panel__intro {
    display: none;
  }

  .results-evidence,
  .results-evidence--response,
  .results-evidence--progress {
    flex: 0 0 auto;
    padding: 8px 24px 10px;
  }

  .results-evidence__eyebrow {
    margin-bottom: 8px;
    font-size: 7px;
  }

  .microcirculation-scale {
    margin-bottom: 8px;
  }

  .microcirculation-scale > span {
    height: 9px;
  }

  .microcirculation-card img {
    height: auto;
    aspect-ratio: 0.84;
    background: #050584;
    object-fit: contain;
    object-position: center;
  }

  .microcirculation-card figcaption {
    font-size: 9px;
  }

  .trichoscopy-card img {
    height: 104px;
  }

  .results-metrics {
    gap: 8px;
    margin-top: 10px;
  }

  .results-metrics article {
    min-height: 82px;
    padding: 8px 9px;
  }

  .results-metrics p {
    font-size: 11px;
  }

  .results-metrics strong {
    margin-top: 3px;
    font-size: 24px;
  }

  .results-metrics span {
    margin-top: 4px;
    font-size: 7px;
  }

  .results-metrics article > small {
    display: none;
  }

  .progression-card img {
    height: clamp(70px, 20vw, 82px);
  }

  .progression-card figcaption span {
    display: block;
    margin-top: 2px;
    color: rgba(24, 35, 27, 0.58);
    font-size: 6.5px;
    line-height: 1.2;
  }

  .progression-card figcaption span br {
    display: initial;
  }

  .progression-metrics {
    gap: 8px 14px;
    margin-top: 0;
    padding-top: 7px;
  }

  .progression-metrics article {
    padding-top: 3px;
    padding-bottom: 5px;
  }

  .results-panel__navigation {
    grid-template-columns: 38px 1fr 38px;
    gap: 10px;
    margin: 12px 20px 14px;
    padding-top: 11px;
  }

  .results-evidence .results-panel__navigation {
    margin-top: 12px;
  }

  .results-panel__navigation button {
    width: 38px;
    height: 38px;
  }

  .people-testimonial {
    display: contents;
    padding: 0;
  }

  .people-testimonial::before,
  .people-testimonial::after {
    display: none;
  }

  .people-testimonial blockquote {
    order: 1;
    margin: 18px 22px 0;
  }

  .people-testimonial blockquote p:first-child {
    display: block;
  }

  .people-testimonial blockquote p:last-child::before {
    content: none;
  }

  .people-testimonial blockquote p {
    font-size: 16px;
    line-height: 1.18;
  }

  .people-testimonial__credit {
    order: 2;
    margin: 10px 22px 0;
    padding-bottom: 7px;
    font-size: 8px;
  }

  .people-testimonial__journeys {
    order: 4;
    width: auto;
    min-height: 38px;
    margin: 10px 22px 0;
    font-size: 12px;
  }

  .people-evidence {
    order: 3;
    gap: 7px;
    padding: 12px 22px 0;
  }

  .people-comparison figure {
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
  }

  .people-comparison img {
    height: 112px;
    border-radius: 10px;
  }

  .people-comparison figure:last-child img {
    scale: 1;
  }

  .people-comparison figcaption,
  .people-comparison figure:last-child figcaption {
    position: static;
    margin-top: 5px;
    padding: 0;
    color: rgba(24, 35, 27, 0.66);
    background: transparent;
    font-size: 8px;
    backdrop-filter: none;
  }

  .people-benefits {
    min-height: 44px;
    padding: 4px;
  }

  .people-benefits__icon {
    width: 25px;
    height: 25px;
  }

  .results-panel--people > .results-panel__navigation {
    order: 5;
  }
}

@media (max-width: 620px) {
  .results-tab__desktop-summary {
    display: none;
  }

  .results-tab__mobile-summary {
    display: block;
  }

  .results-panel__intro h3 br,
  .trichoscopy-card figcaption br {
    display: initial;
  }
}


/* assets/css/real-people.css */
/* ============================================================
   REAL PEOPLE — TWO-PERSON CONSISTENCY PROOF
   ============================================================ */
.real-stories {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding:
    clamp(12px, 1.2vh, 16px)
    clamp(28px, 5vw, 80px)
    clamp(26px, 3vh, 36px);
  color: rgba(244, 247, 240, 0.94);
  background:
    radial-gradient(circle at 50% 18%, rgba(27, 105, 65, 0.17), transparent 36%),
    radial-gradient(circle at 88% 78%, rgba(65, 133, 76, 0.1), transparent 31%),
    linear-gradient(180deg, #031b11 0%, #032015 48%, #02180e 100%);
}

.real-stories::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.16;
  background:
    linear-gradient(90deg, transparent 49.9%, rgba(189, 230, 194, 0.12) 50%, transparent 50.1%),
    radial-gradient(circle at 18% 30%, rgba(116, 174, 112, 0.14), transparent 25%);
  pointer-events: none;
}

.real-stories__inner {
  width: min(100%, 1440px);
  margin: 0 auto;
}

.real-stories__heading {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  width: min(100%, 1120px);
  margin-inline: auto;
  text-align: center;
}

.real-stories__heading::before,
.real-stories__heading::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 236, 215, 0.34));
}

.real-stories__heading::after {
  background: linear-gradient(90deg, rgba(210, 236, 215, 0.34), transparent);
}

.real-stories__heading p {
  margin: 0 0 11px;
  color: rgba(221, 235, 218, 0.72);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.72vw, 11px);
  font-weight: 500;
  letter-spacing: 0.48em;
  text-transform: uppercase;
}

.real-stories__heading h2 {
  margin: 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.5vw, 54px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.real-stories__list {
  display: grid;
  gap: clamp(30px, 4vh, 44px);
  margin-top: clamp(28px, 3.5vh, 38px);
}

.real-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto clamp(230px, 17.3vw, 270px);
  gap: 13px 20px;
}

.real-story__photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(151, 211, 168, 0.2);
  border-radius: 10px;
  background: rgba(6, 24, 15, 0.62);
}

.real-story__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.real-story__photo--arjun-before img { object-position: center 56%; }
.real-story__photo--arjun-after img { object-position: center 44%; }
.real-story__photo--rahul-before img {
  object-position: center 60%;
  scale: 1.22;
}
.real-story__photo--rahul-after img { object-position: center 100%; }

.real-story__photo figcaption {
  position: absolute;
  z-index: 2;
  bottom: 11px;
  left: 11px;
  padding: 7px 12px;
  border-radius: 999px;
  color: rgba(250, 252, 248, 0.94);
  background: rgba(27, 58, 44, 0.88);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.7vw, 11px);
  line-height: 1;
  backdrop-filter: blur(7px);
}

.real-story__photo:last-child figcaption {
  background: rgba(16, 119, 75, 0.9);
}

.real-story__quote {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid rgba(178, 212, 186, 0.34);
  border-radius: 10px;
  color: #18271f;
  background:
    radial-gradient(circle at 85% 10%, rgba(202, 222, 204, 0.48), transparent 35%),
    linear-gradient(145deg, #f3f5ef, #e8ede6);
}

.real-story__person {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.real-story__person strong {
  color: rgba(248, 246, 237, 0.98);
  font-family: var(--font-sans);
  font-size: clamp(16px, 1.35vw, 21px);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.real-story__person span,
.real-story__person small {
  color: rgba(220, 232, 216, 0.72);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.82vw, 13px);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
}

.real-story__quote > p:last-child {
  position: relative;
  margin: 0;
  color: rgba(16, 39, 27, 0.94);
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.45vw, 23px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
}

.real-story__quote-mark {
  color: #17653e;
  font-size: 1.55em;
  font-style: normal;
  font-weight: 600;
  line-height: 0;
  vertical-align: -0.15em;
}

@media (max-width: 900px) {
  .real-story {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
  }

  .real-story__photo {
    aspect-ratio: 3 / 2;
  }

  .real-story__quote {
    min-height: 180px;
    padding: 28px 22px;
  }
}

@media (max-width: 620px) {
  .real-stories {
    padding:
      20px
      16px
      36px;
  }

  .real-stories__heading h2 {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 0.96;
  }

  .real-stories__heading {
    grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
    gap: 10px;
  }

  .real-stories__list {
    margin-top: 28px;
  }

  .real-story {
    padding: 8px;
  }

  .real-story__photo {
    aspect-ratio: 4 / 3;
  }

  .real-story__person {
    flex-wrap: wrap;
    gap: 7px;
    white-space: normal;
  }
}


/* assets/css/technology-showcase.css */
/* ============================================================
   HOW ENIGMA WORKS — COMPACT EDITORIAL TECHNOLOGY ROWS
   ============================================================ */
.technology-showcase {
  display: grid;
  gap: clamp(12px, 1.2vw, 18px);
  margin-top: 0;
}

.technology-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(340px, 0.88fr) minmax(0, 1.2fr);
  height: clamp(340px, 25vw, 390px);
  overflow: hidden;
  color: rgba(248, 247, 239, 0.96);
  background: transparent;
}

.technology-feature--peptide {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.95fr);
  height: clamp(440px, 31vw, 480px);
}

.technology-feature--liposomal {
  grid-template-columns: minmax(570px, 0.95fr) minmax(440px, 1.05fr);
  height: clamp(430px, 30vw, 460px);
}

.technology-feature--exosome {
  grid-template-columns: minmax(620px, 1.22fr) minmax(340px, 0.78fr);
  height: clamp(440px, 31.6vw, 485px);
}

.technology-feature__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding:
    clamp(28px, 2.5vw, 40px)
    clamp(28px, 3vw, 48px)
    clamp(54px, 4.5vw, 68px);
}

.technology-feature__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 12px;
  color: rgba(223, 235, 217, 0.68);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.67vw, 10px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.technology-feature__eyebrow::after {
  content: "";
  width: 46px;
  height: 1px;
  background: rgba(210, 231, 207, 0.48);
}

.technology-feature h3 {
  margin: 0;
  color: rgba(250, 247, 239, 0.98);
  font-family: var(--font-display);
  font-size: clamp(39px, 3.7vw, 57px);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.038em;
}

.technology-title__hyphen {
  display: inline-block;
  width: 0.25em;
  height: 1px;
  margin: 0 0.035em;
  background: currentColor;
  vertical-align: middle;
}

.technology-feature__lead {
  max-width: 24em;
  margin: clamp(14px, 1.4vw, 21px) 0 0;
  color: rgba(250, 247, 239, 0.93);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.12;
}

.technology-feature__body {
  max-width: 38em;
  margin: clamp(10px, 1vw, 15px) 0 0;
  color: rgba(232, 238, 228, 0.76);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.04vw, 16px);
  line-height: 1.28;
}

.technology-feature__stat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  gap: 0 14px;
  width: fit-content;
  margin-top: auto;
  padding: 9px 0 0 18px;
  border-left: 2px solid rgba(224, 239, 217, 0.74);
}

.technology-feature__stat strong {
  grid-row: 1 / 3;
  color: rgba(249, 247, 239, 0.98);
  font-family: var(--font-display);
  font-size: clamp(46px, 4.8vw, 74px);
  font-weight: 400;
  font-variant-numeric: lining-nums;
  line-height: 0.76;
  letter-spacing: -0.045em;
}

.technology-feature__stat span {
  color: rgba(245, 244, 235, 0.92);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.72vw, 11px);
  font-weight: 500;
  letter-spacing: 0.35em;
  line-height: 1.2;
  text-transform: uppercase;
}

.technology-feature__stat small {
  max-width: 34em;
  color: rgba(220, 230, 216, 0.67);
  font-family: var(--font-serif);
  font-size: clamp(9px, 0.72vw, 11px);
  line-height: 1.25;
}

.technology-feature__visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.technology-feature__visual--mobile {
  display: none;
}

.technology-feature__body--mobile-exosome {
  display: none;
}

.technology-feature__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #03170e 0%, rgba(3, 23, 14, 0.55) 8%, transparent 27%);
  pointer-events: none;
}

.technology-feature--peptide .technology-feature__visual::after {
  background: linear-gradient(270deg, #03170e 0%, rgba(3, 23, 14, 0.42) 8%, transparent 27%);
}

.technology-feature--exosome .technology-feature__visual::after {
  background: none;
}

.technology-feature__visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.technology-feature--liposomal .technology-feature__visual img {
  width: 48%;
  margin-right: auto;
  margin-left: 38%;
  object-fit: contain;
  object-position: right center;
}

.technology-feature--liposomal .technology-feature__visual {
  position: relative;
  inset: auto;
  z-index: 1;
}

.technology-feature--peptide .technology-feature__visual img {
  width: 64%;
  margin-left: 12%;
  margin-right: auto;
  object-fit: contain;
  scale: 1;
  filter:
    saturate(1.08)
    drop-shadow(0 22px 36px rgba(0, 0, 0, 0.24));
}

.technology-feature--exosome .technology-feature__visual img {
  width: 80%;
  margin-right: auto;
  margin-left: 8%;
  object-fit: contain;
  object-position: right center;
}

.technology-feature__ingredients {
  position: absolute;
  right: clamp(24px, 2.5vw, 40px);
  bottom: 15px;
  left: clamp(28px, 3vw, 48px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(210, 232, 210, 0.18);
  color: rgba(230, 235, 224, 0.74);
  font-family: var(--font-serif);
  font-size: clamp(9px, 0.76vw, 12px);
  white-space: nowrap;
}

.technology-feature__ingredients span {
  color: rgba(238, 243, 233, 0.86);
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.technology-feature__ingredients i {
  width: 1px;
  height: 14px;
  background: rgba(211, 229, 208, 0.4);
}

.technology-feature__ingredients strong {
  color: rgba(250, 241, 218, 0.98);
  font-weight: 600;
}

.technology-feature--liposomal h3 {
  font-size: clamp(38px, 3.35vw, 52px);
}

.technology-feature--liposomal .technology-feature__lead {
  margin-top: 12px;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.08;
}

.technology-feature--liposomal .technology-feature__body {
  margin-top: 8px;
  font-size: clamp(12px, 0.9vw, 14px);
  line-height: 1.2;
}

.technology-feature--liposomal .technology-feature__stat {
  margin-top: 8px;
  padding-top: 5px;
}

.technology-feature--liposomal .technology-feature__stat strong {
  font-size: clamp(42px, 3.8vw, 58px);
}

.liposomal-outcome {
  width: min(100%, 680px);
  margin-top: 18px;
  margin-left: clamp(12px, 1.4vw, 22px);
}

.liposomal-outcome > p {
  margin: 0 0 7px;
  color: rgba(223, 235, 218, 0.76);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.liposomal-outcome__detail {
  display: grid;
  grid-template-columns: minmax(230px, 0.86fr) minmax(280px, 1.14fr);
  align-items: center;
}

.liposomal-outcome__result {
  padding-right: clamp(22px, 2.2vw, 34px);
}

.liposomal-outcome__result strong {
  display: block;
  color: #d6cf91;
  font-family: var(--font-sans);
  font-size: clamp(54px, 4.8vw, 74px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.78;
  letter-spacing: -0.055em;
}

.liposomal-outcome__result small {
  display: block;
  margin-top: 9px;
  color: rgba(240, 243, 233, 0.9);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.2;
  text-transform: uppercase;
}

.liposomal-outcome__comparison {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  margin: 0;
  padding: 4px 0 4px clamp(22px, 2.2vw, 34px);
  border-left: 1px solid rgba(227, 234, 218, 0.58);
}

.liposomal-outcome__comparison > strong {
  align-self: stretch;
  color: #d6cf91;
  font-family: var(--font-sans);
  font-size: clamp(20px, 1.75vw, 27px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.liposomal-outcome__comparison > strong span {
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.18em;
}

.liposomal-outcome__comparison > small {
  display: block;
  align-self: stretch;
  margin-top: 9px;
  color: rgba(244, 241, 232, 0.84);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.04vw, 15.5px);
  line-height: 1.3;
}

.technology-feature--peptide .technology-feature__content {
  justify-content: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

.technology-feature--peptide h3 {
  font-size: clamp(54px, 5.2vw, 80px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.technology-feature--peptide .technology-feature__body {
  max-width: 41em;
  margin-top: clamp(20px, 1.6vw, 25px);
  color: rgba(242, 239, 229, 0.84);
  font-size: clamp(16px, 1.38vw, 21px);
  line-height: 1.35;
}

.technology-feature--peptide .technology-feature__body strong {
  color: rgba(250, 241, 218, 0.98);
  font-weight: 600;
}

.technology-feature--peptide .technology-feature__supporting {
  max-width: 41em;
  margin: 12px 0 0;
  color: rgba(242, 239, 229, 0.84);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.04vw, 15.5px);
  line-height: 1.35;
}

.technology-feature--peptide .technology-feature__supporting strong {
  color: rgba(250, 241, 218, 0.98);
  font-weight: 600;
}

.peptide-outcome {
  width: min(100%, 610px);
  margin-top: 17px;
  margin-left: clamp(14px, 1.4vw, 22px);
}

.peptide-outcome > p {
  margin: 0 0 7px;
  color: rgba(223, 235, 218, 0.76);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
}

.peptide-outcome__detail {
  display: grid;
  grid-template-columns: minmax(180px, 0.86fr) minmax(220px, 1.14fr);
  align-items: center;
}

.peptide-outcome__result {
  padding-right: clamp(22px, 2.2vw, 34px);
}

.peptide-outcome__result strong {
  display: block;
  color: #d6cf91;
  font-family: var(--font-sans);
  font-size: clamp(48px, 4.25vw, 65px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.8;
  letter-spacing: -0.055em;
}

.peptide-outcome__result small {
  display: block;
  margin-top: 9px;
  color: rgba(240, 243, 233, 0.9);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.2;
  text-transform: uppercase;
}

.peptide-outcome__detail > p {
  display: flex;
  align-items: center;
  min-height: 66px;
  margin: 0;
  padding: 4px 0 4px clamp(22px, 2.2vw, 34px);
  border-left: 1px solid rgba(227, 234, 218, 0.58);
  color: rgba(244, 241, 232, 0.84);
  font-family: var(--font-serif);
  font-size: clamp(13px, 1.04vw, 15.5px);
  line-height: 1.3;
}

.technology-feature--exosome .technology-feature__content {
  padding:
    clamp(28px, 2.2vw, 34px)
    clamp(34px, 3.2vw, 50px)
    clamp(62px, 4.5vw, 70px);
}

.technology-feature--exosome h3 {
  max-width: 8.4em;
  font-size: clamp(52px, 4.5vw, 69px);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: -0.045em;
}

.technology-feature--exosome .technology-feature__body {
  max-width: 42em;
  margin-top: clamp(15px, 1.3vw, 20px);
  color: rgba(242, 240, 231, 0.9);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.38;
}

.technology-feature--liposomal h3,
.technology-feature--peptide h3,
.technology-feature--exosome h3 {
  font-size: clamp(42px, 4.05vw, 63px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.technology-feature--liposomal .technology-feature__body,
.technology-feature--peptide .technology-feature__body,
.technology-feature--exosome .technology-feature__body {
  max-width: 41em;
  margin-top: clamp(20px, 1.6vw, 25px);
  color: rgba(242, 239, 229, 0.84);
  font-size: clamp(13px, 1.04vw, 15.5px);
  line-height: 1.39;
}

.technology-feature--liposomal .technology-feature__lead {
  font-size: clamp(13px, 1.04vw, 15.5px);
  line-height: 1.39;
}

.technology-feature--liposomal .technology-feature__ingredients {
  border-top: 0;
}

.technology-feature--exosome > .technology-feature__visual {
  display: block;
}

.technology-feature--exosome .technology-feature__ingredients {
  right: clamp(28px, 3vw, 46px);
  bottom: 34px;
  left: clamp(34px, 3.2vw, 50px);
  gap: clamp(18px, 2vw, 30px);
  padding-top: 10px;
  font-size: clamp(10px, 0.85vw, 13px);
}

.technology-feature--exosome .technology-feature__ingredients span {
  min-width: clamp(150px, 12vw, 184px);
  font-size: clamp(8px, 0.68vw, 10px);
}

.technology-feature--exosome .technology-feature__ingredients i {
  margin-left: 0;
}

.technology-feature--exosome .technology-feature__ingredients strong {
  color: rgba(250, 241, 218, 0.98);
  font-weight: 600;
}

.exosome-outcome {
  width: 100%;
  margin-top: 18px;
}

.exosome-outcome > p {
  margin: 0 0 8px clamp(22px, 2vw, 30px);
  color: rgba(223, 235, 218, 0.76);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.exosome-outcome__detail {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(230px, 1.05fr);
  align-items: center;
}

.exosome-outcome__result {
  padding-right: clamp(20px, 2vw, 30px);
  padding-left: clamp(22px, 2vw, 30px);
}

.exosome-outcome__result > span {
  display: flex;
  align-items: center;
  gap: 0;
}

.exosome-outcome__result strong {
  display: inline-block;
  color: #d6cf91;
  font-family: var(--font-sans);
  font-size: clamp(58px, 5.2vw, 80px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 0.75;
  letter-spacing: -0.055em;
  transform: none;
  transform-origin: left center;
}

.exosome-outcome__result small {
  display: block;
  margin-top: 9px;
  color: rgba(240, 243, 233, 0.9);
  font-family: var(--font-sans);
  font-size: clamp(8px, 0.68vw, 10px);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.exosome-outcome__detail > p {
  display: flex;
  align-items: center;
  min-height: 72px;
  margin: 0;
  padding: 4px 0 4px clamp(22px, 2.2vw, 34px);
  border-left: 1px solid rgba(227, 234, 218, 0.58);
  color: rgba(244, 241, 232, 0.9);
  font-family: var(--font-serif);
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.22;
}

.technology-showcase + .technology-grid {
  margin-top: clamp(28px, 4vh, 46px);
}

@media (max-width: 1000px) {
  .technology-feature,
  .technology-feature--peptide,
  .technology-feature--exosome {
    grid-template-columns: minmax(290px, 0.92fr) minmax(0, 1.08fr);
  }

  .technology-feature {
    height: 360px;
  }

  .technology-feature--peptide {
    height: 440px;
  }

  .technology-feature--liposomal {
    grid-template-columns: minmax(470px, 1.15fr) minmax(260px, 0.85fr);
    height: 430px;
  }

  .technology-feature--exosome {
    grid-template-columns: minmax(470px, 1.15fr) minmax(260px, 0.85fr);
    height: 430px;
  }

  .technology-feature h3 {
    font-size: clamp(36px, 4.8vw, 48px);
  }

  .technology-feature--exosome h3 {
    font-size: clamp(36px, 4.8vw, 48px);
  }

  .technology-feature__body {
    font-size: 13px;
  }

  .technology-feature--exosome .technology-feature__body {
    font-size: 13px;
  }

  .exosome-outcome__detail {
    grid-template-columns: minmax(190px, 0.95fr) minmax(180px, 1.05fr);
  }

  .liposomal-outcome__detail {
    grid-template-columns: minmax(190px, 0.95fr) minmax(180px, 1.05fr);
  }

  .peptide-outcome__detail {
    grid-template-columns: minmax(150px, 0.86fr) minmax(170px, 1.14fr);
  }
}

@media (max-width: 760px) {
  .technology-showcase {
    gap: 14px;
  }

  .technology-feature,
  .technology-feature--peptide,
  .technology-feature--exosome {
    grid-template-columns: 1fr;
    height: auto;
  }

  .technology-feature__content {
    min-height: 330px;
    padding: 28px 24px 60px;
  }

  .technology-feature--exosome .technology-feature__content {
    min-height: 0;
    padding: 28px 24px 42px;
  }

  .technology-feature--peptide .technology-feature__visual {
    order: 2;
  }

  .technology-feature__visual {
    min-height: 235px;
  }

  .technology-feature--liposomal .technology-feature__visual {
    position: relative;
    inset: auto;
  }

  .technology-feature--liposomal .technology-feature__visual img {
    width: 70%;
    margin-right: auto;
    margin-left: auto;
  }

  .technology-feature h3 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .technology-feature__lead {
    font-size: 19px;
  }

  .technology-feature__body {
    font-size: 14px;
  }

  .technology-feature__desktop-break {
    display: none;
  }

  .technology-feature__ingredients {
    position: static;
    flex-wrap: wrap;
    padding: 14px 24px 18px;
    white-space: normal;
  }

  .technology-feature__ingredients i {
    display: none;
  }

  .exosome-outcome__detail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .liposomal-outcome__detail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .liposomal-outcome {
    margin-left: 0;
  }

  .peptide-outcome__detail {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .peptide-outcome {
    margin-left: 0;
  }

  .peptide-outcome__detail > p {
    padding: 12px 0 0;
    border-top: 1px solid rgba(210, 230, 207, 0.28);
    border-left: 0;
  }

  .liposomal-outcome__comparison {
    padding: 12px 0 0;
    border-top: 1px solid rgba(210, 230, 207, 0.28);
    border-left: 0;
  }

  .exosome-outcome {
    margin-top: 28px;
  }

  .exosome-outcome > p,
  .exosome-outcome__result {
    margin-left: 0;
    padding-left: 0;
  }

  .exosome-outcome__detail > p {
    padding: 12px 0 0;
    border-top: 1px solid rgba(210, 230, 207, 0.28);
    border-left: 0;
  }
}

/* Mobile editorial science stories */
@media (max-width: 620px) {
  .technology-showcase {
    gap: 26px;
  }

  .technology-feature,
  .technology-feature--liposomal,
  .technology-feature--peptide,
  .technology-feature--exosome {
    position: relative;
    display: block;
    height: auto;
    overflow: hidden;
    border-top: 0;
    border-bottom: 0;
    background:
      radial-gradient(circle at 92% 22%, rgba(73, 132, 86, 0.12), transparent 35%),
      linear-gradient(180deg, rgba(4, 28, 17, 0.18), rgba(1, 13, 8, 0.2));
  }

  .technology-feature__content,
  .technology-feature--peptide .technology-feature__content,
  .technology-feature--exosome .technology-feature__content {
    position: relative;
    z-index: 2;
    min-height: 0;
    padding: 25px 20px 22px;
  }

  .technology-feature h3,
  .technology-feature--liposomal h3,
  .technology-feature--peptide h3,
  .technology-feature--exosome h3 {
    max-width: 6.1em;
    color: rgba(250, 247, 239, 0.98);
    font-size: clamp(42px, 12vw, 50px);
    font-weight: 400;
    line-height: 0.86;
    letter-spacing: -0.045em;
  }

  .technology-feature__body,
  .technology-feature--liposomal .technology-feature__body,
  .technology-feature--peptide .technology-feature__body,
  .technology-feature--exosome .technology-feature__body,
  .technology-feature--peptide .technology-feature__supporting {
    color: rgba(235, 239, 228, 0.78);
    font-size: 13px;
    line-height: 1.42;
  }

  /* Liposomal delivery: copy and a cropped follicle share the upper field. */
  .technology-feature--liposomal .technology-feature__content {
    display: block;
  }

  .technology-feature--liposomal h3 {
    max-width: 5.2em;
  }

  .technology-feature--liposomal .technology-feature__lead {
    max-width: none;
    margin-top: 20px;
    color: rgba(246, 243, 235, 0.94);
    font-size: 14px;
    line-height: 1.34;
    overflow-wrap: break-word;
  }

  .technology-feature--liposomal .technology-feature__body {
    max-width: none;
    margin-top: 13px;
    overflow-wrap: break-word;
  }

  .technology-feature--liposomal > .technology-feature__visual {
    display: none;
  }

  .technology-feature--liposomal .technology-feature__visual--mobile {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    float: right;
    z-index: 1;
    width: 65%;
    height: auto;
    min-height: 0;
    margin: 0 -20px 12px 12px;
    overflow: hidden;
    pointer-events: none;
  }

  .technology-feature--liposomal .technology-feature__visual--mobile::after {
    display: none;
  }

  .technology-feature--liposomal .technology-feature__visual--mobile img {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center;
  }

  .liposomal-outcome {
    clear: both;
    width: 100%;
    margin: 28px 0 0;
    padding-top: 17px;
    border-top: 0;
  }

  .liposomal-outcome > p,
  .peptide-outcome > p,
  .exosome-outcome > p {
    margin: 0 0 12px;
    font-size: 8px;
    letter-spacing: 0.38em;
  }

  .liposomal-outcome__detail {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    align-items: stretch;
  }

  .liposomal-outcome__result {
    padding: 0 14px 0 0;
  }

  .liposomal-outcome__result strong {
    font-size: clamp(56px, 17vw, 68px);
  }

  .liposomal-outcome__result small {
    font-size: 7.5px;
    letter-spacing: 0.25em;
  }

  .liposomal-outcome__comparison {
    align-items: flex-start;
    justify-content: center;
    min-height: 92px;
    padding: 5px 0 5px 16px;
    border-top: 0;
    border-left: 1px solid rgba(227, 234, 218, 0.4);
  }

  .liposomal-outcome__comparison > strong {
    font-size: 25px;
    line-height: 0.95;
  }

  .liposomal-outcome__comparison > strong span {
    display: block;
    margin-top: 7px;
    font-size: 0.36em;
    letter-spacing: 0.24em;
  }

  .liposomal-outcome__comparison > small {
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.3;
  }

  .technology-feature__ingredients,
  .technology-feature--exosome .technology-feature__ingredients {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0 20px;
    padding: 16px 0 19px;
    border-top: 0;
    font-size: 8.5px;
    line-height: 1.18;
    text-align: center;
    white-space: normal;
  }

  .technology-feature__ingredients span {
    grid-column: 1 / -1;
    margin-bottom: 13px;
    font-size: 7px;
    text-align: left;
  }

  .technology-feature--exosome .technology-feature__ingredients span {
    min-width: 0;
    font-size: 7px;
  }

  .technology-feature__ingredients strong {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 34px;
    padding: 0 7px;
    font-weight: 500;
  }

  .technology-feature__ingredients strong + i + strong,
  .technology-feature__ingredients span + strong ~ strong {
    border-left: 1px solid rgba(210, 232, 210, 0.22);
  }

  .technology-feature__ingredients i {
    display: none;
  }

  /* Peptide story: the ribbon becomes an editorial illustration field. */
  .technology-feature--peptide .technology-feature__content {
    display: block;
  }

  .technology-feature--peptide > .technology-feature__visual {
    display: none;
  }

  .technology-feature--peptide .technology-feature__visual--mobile {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    width: 88%;
    height: auto;
    min-height: 0;
    margin: 4px -10px 14px auto;
    overflow: hidden;
    pointer-events: none;
  }

  .technology-feature--peptide .technology-feature__visual--mobile::after {
    display: none;
  }

  .technology-feature--peptide .technology-feature__visual--mobile img {
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    opacity: 0.92;
  }

  .technology-feature--peptide .technology-feature__body {
    max-width: none;
    margin-top: 0;
  }

  .technology-feature--peptide .technology-feature__supporting {
    max-width: none;
    margin-top: 13px;
  }

  .peptide-outcome {
    width: 100%;
    margin: 23px 0 0;
    padding-top: 17px;
    border-top: 0;
  }

  .peptide-outcome__detail {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: 0;
    align-items: stretch;
  }

  .peptide-outcome__result {
    padding-right: 15px;
  }

  .peptide-outcome__result strong {
    font-size: 58px;
  }

  .peptide-outcome__result small {
    font-size: 7.5px;
    letter-spacing: 0.22em;
  }

  .peptide-outcome__detail > p {
    min-height: 88px;
    padding: 6px 0 6px 16px;
    border-top: 0;
    border-left: 1px solid rgba(227, 234, 218, 0.4);
    font-size: 11px;
    line-height: 1.35;
  }

  /* Exosome story: wide vesicle artwork sits between title and explanation. */
  .technology-feature--exosome .technology-feature__content {
    display: block;
  }

  .technology-feature--exosome > .technology-feature__visual {
    display: none;
  }

  .technology-feature--exosome .technology-feature__visual--mobile {
    position: relative;
    top: auto;
    right: auto;
    display: block;
    float: none;
    width: calc(100% + 40px);
    height: auto;
    min-height: 0;
    margin: 14px -20px 17px;
    overflow: hidden;
    pointer-events: none;
  }

  .technology-feature--exosome .technology-feature__visual--mobile::after {
    display: none;
  }

  .technology-feature--exosome .technology-feature__visual--mobile img {
    width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
    object-position: center;
    opacity: 0.94;
  }

  .technology-feature--exosome .technology-feature__body {
    max-width: none;
    margin-top: 0;
  }

  .technology-feature--exosome .technology-feature__body--mobile-exosome {
    display: block;
  }

  .technology-feature--exosome h3 + .technology-feature__body--mobile-exosome {
    margin-top: 20px;
  }

  .technology-feature--exosome .technology-feature__body--desktop-exosome {
    display: none;
  }

  .exosome-outcome {
    clear: both;
    width: 100%;
    margin-top: 28px;
    padding-top: 17px;
    border-top: 0;
  }

  .exosome-outcome > p {
    margin-left: 0;
  }

  .exosome-outcome__detail {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
    align-items: stretch;
  }

  .exosome-outcome__result {
    padding: 0 15px 0 0;
  }

  .exosome-outcome__result strong {
    font-size: clamp(48px, 14vw, 56px);
  }

  .exosome-outcome__result small {
    font-size: 7.5px;
    letter-spacing: 0.18em;
    white-space: normal;
  }

  .exosome-outcome__detail > p {
    min-height: 92px;
    padding: 6px 0 6px 16px;
    border-top: 0;
    border-left: 1px solid rgba(227, 234, 218, 0.4);
    font-size: 10.5px;
    line-height: 1.34;
  }

  .technology-feature--exosome .technology-feature__ingredients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* assets/css/enigma-targets.css */
/* ============================================================
   WHAT ENIGMA TARGETS — INTERACTIVE BIOLOGICAL PATHWAY
   ============================================================ */
.enigma-targets {
  --active-target: 0;
  --active-y: 56px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: clamp(24px, 3vw, 42px);
  padding: clamp(8px, 1vw, 14px) clamp(8px, 1vw, 16px) clamp(16px, 2vw, 28px);
  color: rgba(247, 245, 235, 0.94);
  background: transparent;
}

.enigma-targets::before {
  content: none;
}

.enigma-targets__heading {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  width: min(100%, 1120px);
  margin: 0 auto clamp(34px, 3vw, 46px);
}

.enigma-targets__heading span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 236, 215, 0.34));
}

.enigma-targets__heading span:last-child {
  background: linear-gradient(90deg, rgba(210, 236, 215, 0.34), transparent);
}

.enigma-targets__heading h3 {
  margin: 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.5vw, 54px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.98;
  white-space: nowrap;
}

.enigma-targets__viewport {
  width: min(90%, 1320px);
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.enigma-targets__viewport::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  .enigma-targets__viewport {
    overflow: visible;
  }
}

.enigma-targets__grid {
  --column-width: 20%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-width: 860px;
}

.enigma-targets__track {
  position: absolute;
  top: 38px;
  right: -5px;
  left: 5px;
  width: auto;
  height: 72px;
  overflow: visible;
  pointer-events: none;
}

.enigma-targets__track path {
  fill: none;
  stroke: url("#targetPathGradient");
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter:
    drop-shadow(0 0 4px rgba(190, 226, 134, 0.16))
    drop-shadow(0 0 10px rgba(97, 164, 76, 0.08));
}

.enigma-targets__track--mobile {
  display: none;
}

.enigma-targets__light {
  position: absolute;
  top: var(--active-y);
  left: calc((var(--active-target) * var(--column-width)) + 5px);
  z-index: 3;
  width: 118px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse,
    rgba(221, 247, 151, 0.3) 0%,
    rgba(167, 222, 104, 0.16) 32%,
    rgba(111, 184, 72, 0.06) 58%,
    transparent 80%
  );
  filter: blur(4px);
  transform: translate(-50%, -50%);
  transition:
    left 480ms cubic-bezier(0.65, 0, 0.35, 1),
    top 480ms cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.enigma-target {
  --target-y: 56px;
  position: relative;
  min-width: 0;
  min-height: 245px;
  padding: 0 clamp(20px, 2.2vw, 34px) 0 5px;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition:
    background 260ms ease,
    box-shadow 260ms ease,
    opacity 320ms ease,
    filter 320ms ease;
}

.enigma-target:nth-of-type(2) { --target-y: 89px; }
.enigma-target:nth-of-type(3) { --target-y: 64px; }
.enigma-target:nth-of-type(4) { --target-y: 99px; }
.enigma-target:nth-of-type(5) { --target-y: 53px; }

.enigma-target:last-child {
  border-right: 0;
}

.enigma-target:focus-visible {
  outline: 1px solid rgba(203, 229, 154, 0.72);
  outline-offset: 7px;
}

.enigma-target:hover,
.enigma-target:focus-visible,
.enigma-target.is-active,
.enigma-target.is-selected {
  background: linear-gradient(
    180deg,
    rgba(134, 190, 99, 0.025) 0%,
    rgba(106, 166, 84, 0.12) 42%,
    rgba(49, 113, 67, 0.07) 100%
  );
  box-shadow:
    inset 1px 0 rgba(169, 208, 139, 0.08),
    inset -1px 0 rgba(169, 208, 139, 0.06);
}

.enigma-target__number {
  position: absolute;
  top: calc(var(--target-y) - 36px);
  left: 5px;
  display: block;
  width: 34px;
  color: rgba(202, 225, 151, 0.88);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.8vw, 13px);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  text-align: center;
  transform: translateX(-50%);
  transition: color 240ms ease;
}

.enigma-target__dot {
  position: absolute;
  top: calc(var(--target-y) - 4px);
  left: 1px;
  z-index: 4;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(205, 224, 158, 0.45);
  border-radius: 50%;
  background: #9eba75;
  box-shadow: 0 0 0 rgba(184, 231, 113, 0);
  transition:
    background 220ms ease,
    box-shadow 260ms ease,
    scale 260ms ease;
}

.enigma-target__dot::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 50%;
  z-index: -1;
  width: 1px;
  height: 36px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(205, 224, 158, 0.34) 34%,
    rgba(205, 224, 158, 0.28) 70%,
    transparent
  );
  transform: translateX(-50%);
}

.enigma-target__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  margin-top: calc(var(--target-y) + 20px);
}

.enigma-target__title > span {
  color: rgba(248, 245, 236, 0.9);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.75vw, 27px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  transition: color 220ms ease;
}

.enigma-target__copy {
  display: block;
  margin-top: 16px;
  color: rgba(224, 230, 217, 0.68);
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 400;
  line-height: 1.45;
  transition: color 220ms ease;
}

.enigma-target.is-active .enigma-target__number {
  color: #d8eda0;
}

.enigma-target.is-active .enigma-target__dot {
  background: #e1f3a7;
  box-shadow:
    0 0 10px rgba(218, 245, 143, 0.85),
    0 0 25px rgba(156, 215, 90, 0.42);
  scale: 1.12;
}

.enigma-target.is-active .enigma-target__title > span {
  color: rgba(255, 252, 242, 1);
}

.enigma-target.is-active .enigma-target__copy {
  color: rgba(234, 239, 228, 0.83);
}

@media (max-width: 760px) {
  .enigma-targets {
    margin-top: 46px;
    padding-right: 0;
    padding-left: 0;
  }

  .enigma-targets__heading {
    grid-template-columns: minmax(16px, 1fr) auto minmax(16px, 1fr);
    width: calc(100% - 32px);
    gap: 14px;
  }

  .enigma-targets__heading h3 {
    font-size: clamp(34px, 9vw, 42px);
    letter-spacing: -0.025em;
  }

  .enigma-targets__viewport {
    width: 100%;
    padding: 0 16px 10px;
  }

  .enigma-targets__grid {
    min-width: 820px;
  }

  .enigma-target {
    padding-right: 24px;
  }
}

@media (max-width: 620px) {
  .enigma-targets {
    margin-top: 24px;
    padding: 0;
  }

  .enigma-targets__heading {
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
  }

  .enigma-targets__heading h3 {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 0.96;
    text-align: center;
  }

  .enigma-target__title::after {
    content: "+";
    position: absolute;
    top: 57px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 1px solid rgba(217, 223, 181, 0.72);
    border-radius: 50%;
    color: #d9dfb5;
    background: rgba(217, 223, 181, 0.025);
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 300;
    line-height: 1;
    transition:
      scale 180ms ease,
      color 180ms ease,
      background 180ms ease;
  }

  .enigma-target[data-enigma-target="0"] .enigma-target__title::after,
  .enigma-target[data-enigma-target="2"] .enigma-target__title::after,
  .enigma-target[data-enigma-target="4"] .enigma-target__title::after {
    left: 44%;
  }

  .enigma-target[data-enigma-target="1"] .enigma-target__title::after,
  .enigma-target[data-enigma-target="3"] .enigma-target__title::after {
    right: 0;
  }

  .enigma-target[data-enigma-target="1"] .enigma-target__title > span,
  .enigma-target[data-enigma-target="3"] .enigma-target__title > span {
    translate: -8px 0;
  }

  .enigma-target[data-enigma-target="0"] .enigma-target__title::after {
    left: 33%;
  }

  .enigma-target[data-enigma-target="3"] .enigma-target__title::after {
    top: 80px;
    right: auto;
    left: 78%;
  }

  .enigma-targets__viewport {
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .enigma-targets__grid {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: 740px;
  }

  .enigma-targets__track--desktop {
    display: none;
  }

  .enigma-targets__track--mobile {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 720px;
    overflow: visible;
  }

  .enigma-targets__track--mobile path {
    stroke: url("#targetPathGradientMobile");
    stroke-width: 1.35;
  }

  .enigma-targets__light {
    display: none;
  }

  .enigma-target {
    --node-x: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 140px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    touch-action: manipulation;
  }

  .enigma-target[data-enigma-target="0"] {
    --node-x: 50%;
    top: 0;
  }

  .enigma-target[data-enigma-target="1"] {
    --node-x: 55.3%;
    top: 142px;
  }

  .enigma-target[data-enigma-target="2"] {
    --node-x: 48.3%;
    top: 284px;
  }

  .enigma-target[data-enigma-target="3"] {
    --node-x: 54.7%;
    top: 429px;
  }

  .enigma-target[data-enigma-target="4"] {
    --node-x: 50%;
    top: 571px;
  }

  .enigma-target:hover,
  .enigma-target:focus-visible,
  .enigma-target.is-active,
  .enigma-target.is-selected {
    background: transparent;
    box-shadow: none;
  }

  .enigma-target__number {
    top: 0;
    left: calc(var(--node-x) - 23px);
    width: 30px;
    font-size: 10px;
  }

  .enigma-target__dot {
    top: 25px;
    left: var(--node-x);
    width: 9px;
    height: 9px;
    background: #cfe49a;
    box-shadow:
      0 0 8px rgba(218, 245, 143, 0.5),
      0 0 18px rgba(156, 215, 90, 0.22);
  }

  .enigma-target__dot::before {
    display: none;
  }

  .enigma-target:active .enigma-target__dot {
    scale: 1.35;
    background: #efffba;
  }

  .enigma-target:active .enigma-target__title::after {
    scale: 0.9;
    color: #123322;
    background: #efffba;
  }

  .enigma-target:active .enigma-target__title > span,
  .enigma-target:active .enigma-target__copy {
    color: #eff5d6;
  }

  .enigma-target__title {
    width: 44%;
    margin-top: 48px;
  }

  .enigma-target__title > span {
    font-size: clamp(23px, 6.6vw, 28px);
    line-height: 0.95;
  }

  .enigma-target__copy {
    width: 44%;
    margin-top: 12px;
    font-size: 11px;
    line-height: 1.42;
  }

  .enigma-target[data-enigma-target="0"] .enigma-target__title,
  .enigma-target[data-enigma-target="0"] .enigma-target__copy,
  .enigma-target[data-enigma-target="2"] .enigma-target__title,
  .enigma-target[data-enigma-target="2"] .enigma-target__copy,
  .enigma-target[data-enigma-target="4"] .enigma-target__title,
  .enigma-target[data-enigma-target="4"] .enigma-target__copy {
    padding-left: 8px;
  }

  .enigma-target[data-enigma-target="1"] .enigma-target__title,
  .enigma-target[data-enigma-target="1"] .enigma-target__copy,
  .enigma-target[data-enigma-target="3"] .enigma-target__title,
  .enigma-target[data-enigma-target="3"] .enigma-target__copy {
    margin-left: 56%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enigma-targets__light,
  .enigma-target__dot {
    transition: none;
  }
}


/* assets/css/formula-science.css */
/* ============================================================
   SECTION 4 — FORMULA SCIENCE
   Editorial technology and biological-target architecture.
   ============================================================ */
.formula-science {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(88px, 8vh, 104px) 0 clamp(28px, 4vw, 58px);
  color: rgba(245, 249, 240, 0.94);
  background: #03170e;
}

.formula-science__atmosphere {
  position: absolute;
  inset: -5%;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 14, 8, 0.72), rgba(2, 16, 9, 0.82)),
    radial-gradient(45% 42% at 9% 14%, rgba(77, 143, 95, 0.26), transparent 72%),
    radial-gradient(38% 34% at 89% 11%, rgba(85, 150, 101, 0.22), transparent 70%),
    radial-gradient(35% 42% at 52% 95%, rgba(26, 87, 55, 0.17), transparent 76%),
    url("//enigmaformen.com/cdn/shop/t/2/assets/enigma-assets-img-texture-theatre-wall.jpg?v=176201435005190853571790600773") center / cover no-repeat;
  filter: saturate(108%);
}

.formula-science__atmosphere::before,
.formula-science__atmosphere::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.22;
}

.formula-science__atmosphere::before {
  top: 8%;
  left: 15%;
  width: clamp(80px, 13vw, 190px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 34% 34%, rgba(206, 239, 196, 0.48) 0 4%, transparent 5%),
    radial-gradient(circle at 70% 58%, rgba(173, 223, 174, 0.35) 0 7%, transparent 8%),
    radial-gradient(circle, rgba(69, 136, 86, 0.45), transparent 68%);
}

.formula-science__atmosphere::after {
  top: 2%;
  right: 2%;
  width: clamp(140px, 22vw, 340px);
  aspect-ratio: 1.25;
  rotate: 18deg;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(117, 185, 116, 0.34), transparent 52%);
}

.formula-science__inner {
  position: relative;
  z-index: 1;
  width: min(94vw, 1480px);
  margin: 0 auto;
  transform-origin: left center;
  transition: transform 620ms var(--ease-out);
}

/* ---------- centered introduction -------------------------- */
.formula-science__intro {
  display: grid;
  grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
  align-items: center;
  gap: clamp(18px, 2.6vw, 38px);
  width: min(100%, 1120px);
  margin: 0 auto clamp(30px, 4vh, 46px);
  text-align: center;
}

.formula-science__intro::before,
.formula-science__intro::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 236, 215, 0.34));
}

.formula-science__intro::after {
  background: linear-gradient(90deg, rgba(210, 236, 215, 0.34), transparent);
}

.formula-science__intro h2 {
  margin: 0;
  color: var(--section-heading);
  font-family: var(--font-display);
  font-size: clamp(38px, 3.5vw, 54px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ---------- section rules ---------------------------------- */
.formula-science__divider {
  display: grid;
  grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  width: min(100%, 1010px);
  margin: clamp(24px, 3.3vh, 38px) auto 16px;
}

.formula-science__divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210, 236, 215, 0.3));
}

.formula-science__divider span:last-child {
  background: linear-gradient(90deg, rgba(210, 236, 215, 0.3), transparent);
}

.formula-science__divider p {
  margin: 0;
  color: rgba(235, 243, 231, 0.9);
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.92vw, 15px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- three technology panels ------------------------ */
.technology-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1vw, 18px);
}

.technology-card {
  position: relative;
  min-height: clamp(260px, 19vw, 320px);
  overflow: hidden;
  border: 1px solid rgba(232, 232, 214, 0.18);
  border-radius: 14px;
  color: #16221a;
  background: #d8d0c2;
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition:
    transform 600ms var(--ease-out),
    box-shadow 600ms var(--ease-out),
    opacity 420ms ease,
    filter 420ms ease;
}

.technology-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 68px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.technology-card.is-selected {
  z-index: 95;
  transform: translateY(-6px) scale(1.012);
  border-color: rgba(235, 255, 225, 0.98);
  box-shadow:
    0 0 0 3px rgba(204, 246, 193, 0.28),
    0 0 46px rgba(151, 234, 169, 0.48),
    0 34px 76px rgba(0, 0, 0, 0.52);
}

.technology-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
  transition: transform 1100ms var(--ease-out);
}

.technology-card:hover > img { transform: scale(1.065); }

.technology-card.is-selected > img {
  transform: scale(1.06);
  filter: brightness(1.08) saturate(1.08);
}

.technology-card__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(246, 240, 229, 0.98) 0%,
      rgba(244, 236, 224, 0.92) 36%,
      rgba(239, 230, 216, 0.55) 58%,
      rgba(234, 224, 207, 0.08) 83%);
}

.technology-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 61%;
  height: 100%;
  min-height: inherit;
  padding: clamp(24px, 2.4vw, 42px) 0 clamp(20px, 2vw, 32px) clamp(22px, 2.15vw, 38px);
}

.technology-card__number {
  margin: 0 0 clamp(16px, 2vw, 30px);
  font-family: var(--font-sans);
  font-size: clamp(7px, 0.62vw, 10px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.technology-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.15vw, 35px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.025em;
}

.technology-card__rule,
.target-card__rule {
  display: block;
  width: 34px;
  height: 1px;
  margin: 16px 0;
  background: currentColor;
  opacity: 0.42;
}

.technology-card__copy {
  max-width: 24em;
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.78vw, 12px);
  line-height: 1.65;
}

.science-explore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.76vw, 12px);
  text-decoration: none;
  cursor: pointer;
}

.science-explore > span {
  transition: translate 260ms var(--ease-out);
}

.science-explore i {
  display: inline-grid;
  place-items: center;
  width: 29px;
  height: 29px;
  margin-left: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  transition:
    color 260ms ease,
    background 260ms ease,
    rotate 360ms var(--ease-out);
}

.science-explore:hover > span { translate: 3px 0; }
.science-explore:hover i {
  color: #eef5ea;
  background: #10271b;
  rotate: 90deg;
}

/* ---------- five target cards ------------------------------ */
.formula-science__divider--targets {
  width: min(100%, 1180px);
  margin-top: clamp(28px, 4vh, 48px);
}

.target-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(7px, 0.65vw, 11px);
}

.target-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(230px, 16vw, 270px);
  padding: clamp(21px, 2vw, 32px) clamp(16px, 1.55vw, 25px) clamp(16px, 1.5vw, 24px);
  overflow: hidden;
  border: 1px solid rgba(211, 236, 216, 0.2);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(49, 91, 65, 0.64), rgba(8, 39, 24, 0.78) 58%, rgba(4, 27, 16, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(231, 248, 229, 0.1),
    0 15px 34px rgba(0, 0, 0, 0.16);
  scroll-margin-top: 110px;
  transition:
    border-color 350ms ease,
    transform 500ms var(--ease-out),
    background 500ms ease,
    box-shadow 500ms ease,
    opacity 420ms ease,
    filter 420ms ease;
}

.target-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 24% 4%, rgba(142, 211, 139, 0.18), transparent 45%);
  transition: opacity 400ms ease;
  pointer-events: none;
}

.target-card:hover {
  transform: translateY(-4px);
  border-color: rgba(211, 236, 216, 0.34);
  background:
    linear-gradient(145deg, rgba(54, 101, 71, 0.7), rgba(9, 44, 26, 0.84) 58%, rgba(4, 29, 17, 0.95));
}

.target-card:hover::before { opacity: 1; }

.target-card.is-selected {
  z-index: 95;
  transform: translateY(-6px) scale(1.018);
  border-color: rgba(222, 255, 211, 0.94);
  background:
    linear-gradient(145deg, rgba(69, 125, 84, 0.92), rgba(12, 59, 35, 0.96) 58%, #062a18);
  box-shadow:
    0 0 0 3px rgba(192, 241, 183, 0.24),
    0 0 42px rgba(133, 229, 156, 0.45),
    0 30px 68px rgba(0, 0, 0, 0.48);
}

.target-card__number {
  position: relative;
  margin: 0 0 17px;
  color: #a6c978;
  font-family: var(--font-display);
  font-size: clamp(23px, 1.9vw, 31px);
  line-height: 1;
}

.target-card h3 {
  position: relative;
  min-height: 2.15em;
  margin: 0;
  color: rgba(241, 242, 229, 0.9);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.62vw, 27px);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.025em;
}

.target-card__rule {
  position: relative;
  margin: 14px 0 15px;
  color: #a6c978;
}

.target-card > p:not(.target-card__number) {
  position: relative;
  max-width: 22em;
  margin: 0;
  color: rgba(225, 235, 221, 0.76);
  font-family: var(--font-sans);
  font-size: clamp(9px, 0.79vw, 12px);
  line-height: 1.55;
}

.science-explore--light {
  position: relative;
  color: rgba(237, 242, 232, 0.86);
}

.science-explore--light:hover i {
  color: #082016;
  background: rgba(226, 241, 218, 0.9);
}

/* ---------- technology detail drawer ----------------------- */
body.science-detail-open { overflow: hidden; }

body.science-detail-open .formula-science__inner {
  pointer-events: none;
}

.science-detail-backdrop {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 80;
  background: rgba(0, 10, 6, 0.34);
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.science-detail-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s;
}

.science-detail {
  position: fixed;
  top: var(--nav-height);
  right: 0;
  bottom: 0;
  z-index: 100;
  width: clamp(460px, 50vw, 680px);
  overflow: hidden;
  color: #171c18;
  background:
    radial-gradient(circle at 96% 4%, rgba(255, 255, 255, 0.72), transparent 30%),
    radial-gradient(circle at 10% 92%, rgba(217, 204, 175, 0.15), transparent 40%),
    #f3f0e8;
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.34);
  transform: translateX(104%);
  visibility: hidden;
  transition:
    transform 620ms var(--ease-out),
    visibility 0s linear 620ms;
}

.science-detail.is-open {
  transform: translateX(0);
  visibility: visible;
  transition:
    transform 620ms var(--ease-out),
    visibility 0s;
}

.science-detail--target {
  color: #142019;
  background:
    radial-gradient(circle at 94% 5%, rgba(255, 255, 255, 0.76), transparent 32%),
    radial-gradient(circle at 8% 94%, rgba(205, 210, 188, 0.1), transparent 42%),
    linear-gradient(145deg, #f7f7f2, #f1f3ed 68%, #ecefe8);
}

.science-detail--target .science-detail__body {
  padding:
    clamp(32px, 4.5vh, 42px)
    clamp(42px, 4.5vw, 62px)
    clamp(34px, 4vh, 44px);
}

.science-detail--target .science-detail__number {
  width: 58px;
  height: 58px;
  margin-bottom: clamp(26px, 3.5vh, 34px);
  font-size: 25px;
}

.science-detail--target .science-detail__body > h2 {
  font-size: clamp(44px, 4.2vw, 54px);
  line-height: 0.96;
}

.science-detail--target .science-detail__summary {
  margin-top: clamp(18px, 2.4vh, 24px);
  padding-bottom: clamp(22px, 3vh, 30px);
  font-size: clamp(18px, 1.65vw, 21px);
  line-height: 1.3;
}

.science-detail--target .science-detail__section {
  padding: clamp(21px, 2.8vh, 27px) 0;
}

.science-detail--target .science-detail__section h3 {
  margin-bottom: clamp(13px, 1.8vh, 17px);
  font-size: 10px;
}

.science-detail--target .science-detail__section > p {
  font-size: clamp(18px, 1.65vw, 22px);
  line-height: 1.34;
}

.science-detail--target .science-detail__pills li {
  min-height: 42px;
  padding: 8px 17px;
  border-color: rgba(23, 51, 32, 0.3);
  background: rgba(255, 255, 255, 0.18);
  font-size: 17px;
}

.science-detail--target .science-detail__research {
  display: none;
}

.science-detail--target .science-detail__focus + .science-detail__section {
  padding-bottom: 0;
  border-bottom: 0;
}

.science-detail--target .science-detail__studies {
  grid-template-columns: 34px 1fr 50px;
}

.science-detail--target .science-detail__studies svg {
  width: 34px;
  height: 34px;
}

.science-detail--target .science-detail__studies i {
  width: 50px;
  height: 50px;
}

.science-detail__close {
  position: absolute;
  top: 24px;
  right: 28px;
  z-index: 2;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(23, 28, 24, 0.42);
  border-radius: 50%;
  color: #171c18;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.science-detail__close span {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 27px;
  height: 1.5px;
  background: currentColor;
  transition: rotate 320ms var(--ease-out);
}

.science-detail__close span:first-child { rotate: 45deg; }
.science-detail__close span:last-child { rotate: -45deg; }
.science-detail__close:hover span:first-child { rotate: 135deg; }
.science-detail__close:hover span:last-child { rotate: 45deg; }

.science-detail__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding:
    clamp(48px, 6vh, 68px)
    clamp(36px, 5vw, 72px)
    clamp(40px, 5vh, 58px);
}

.science-detail__number {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 0 clamp(52px, 7vh, 78px);
  border: 1px solid rgba(23, 28, 24, 0.62);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 27px;
  font-variant-numeric: lining-nums;
}

.science-detail__body > h2 {
  margin: 0;
  color: #101612;
  font-family: var(--font-display);
  font-size: clamp(45px, 4.2vw, 59px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.science-detail__summary {
  margin: 26px 0 0;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(23, 28, 24, 0.25);
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.3;
}

.science-detail__section {
  padding: 28px 0;
  border-bottom: 1px solid rgba(23, 28, 24, 0.25);
}

.science-detail__section h3 {
  margin: 0 0 20px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-transform: uppercase;
}

.science-detail__section > p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.35;
}

.science-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.science-detail__pills li {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid rgba(23, 28, 24, 0.32);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.1;
}

.science-detail__research {
  margin-top: 0;
  border-bottom: 0;
  padding: 32px 0 0;
}

.science-detail__studies {
  display: grid;
  grid-template-columns: 44px 1fr 68px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  border: 0;
  color: #111713;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.science-detail__studies svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.science-detail__studies > span {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 22px);
}

.science-detail__studies i {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 50%;
  color: #f5f1e8;
  background:
    radial-gradient(circle at 30% 25%, rgba(132, 143, 112, 0.7), transparent 55%),
    #42493b;
  font-family: var(--font-sans);
  font-size: 25px;
  font-style: normal;
  transition:
    color 260ms ease,
    background 260ms ease,
    translate 260ms var(--ease-out);
}

.science-detail__studies:hover i {
  color: #f2ecdf;
  background: #17251c;
  translate: 3px 0;
}

/* ---------- responsive ------------------------------------- */
@media (max-width: 1180px) {
  .formula-science { padding-top: 104px; }

  .technology-card { min-height: 310px; }
  .technology-card__content { width: 70%; }

  .target-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .target-card { min-height: 245px; }
}

@media (max-width: 780px) {
  .formula-science {
    padding: calc(var(--nav-height) + 30px) 0 34px;
  }

  .formula-science__inner { width: min(91vw, 680px); }

  .formula-science__intro {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 10px;
  }

  .formula-science__intro h2 {
    max-width: none;
    margin-inline: auto;
    font-size: clamp(34px, 9vw, 42px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    white-space: normal;
  }

  .formula-science__divider {
    gap: 12px;
    margin-top: 26px;
  }

  .formula-science__divider p {
    letter-spacing: 0.32em;
  }

  .technology-grid { grid-template-columns: 1fr; }

  .technology-card {
    min-height: clamp(280px, 60vw, 380px);
  }

  .technology-card__content {
    width: 65%;
    padding: 30px 0 25px 28px;
  }

  .technology-card h3 { font-size: clamp(27px, 7vw, 38px); }
  .technology-card__copy { font-size: 11px; }

  .target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-card h3 { font-size: clamp(21px, 5vw, 28px); }
  .target-card > p:not(.target-card__number) { font-size: 10px; }

}

@media (max-width: 480px) {
  .technology-card__content {
    width: 72%;
    padding-left: 22px;
  }

  .technology-card__veil {
    background:
      linear-gradient(90deg,
        rgba(246, 240, 229, 0.99) 0%,
        rgba(244, 236, 224, 0.93) 48%,
        rgba(239, 230, 216, 0.42) 75%,
        rgba(234, 224, 207, 0.06) 100%);
  }

  .target-grid { grid-template-columns: 1fr; }
  .target-card {
    min-height: 230px;
    padding: 25px 22px 20px;
  }

  .target-card h3 { min-height: 0; }
}

@media (max-width: 620px) {
  .formula-science {
    padding: 20px 0;
    scroll-margin-top: var(--nav-height);
  }

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

  .formula-science__intro {
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    gap: 6px;
    margin-bottom: 12px;
  }

  .formula-science__intro h2 {
    font-size: clamp(36px, 10vw, 42px);
    line-height: 0.96;
    white-space: normal;
  }
}

@media (min-width: 781px) and (max-height: 900px) {
  .science-detail {
    overflow: hidden;
  }

  .science-detail__body {
    padding:
      clamp(30px, 4vh, 38px)
      clamp(32px, 4vw, 54px)
      clamp(26px, 3.5vh, 34px);
  }

  .science-detail__close {
    top: 18px;
    right: 20px;
    width: 46px;
    height: 46px;
  }

  .science-detail__close span {
    left: 12px;
    width: 21px;
  }

  .science-detail__number {
    width: 54px;
    height: 54px;
    margin-bottom: clamp(28px, 4vh, 36px);
    font-size: 24px;
  }

  .science-detail__body > h2 {
    font-size: clamp(44px, 5.8vh, 52px);
    line-height: 0.95;
  }

  .science-detail__summary {
    margin-top: clamp(17px, 2.5vh, 22px);
    padding-bottom: clamp(20px, 3vh, 26px);
    font-size: clamp(17px, 2.3vh, 20px);
    line-height: 1.25;
  }

  .science-detail__section {
    padding: clamp(18px, 2.7vh, 23px) 0;
  }

  .science-detail__section h3 {
    margin-bottom: clamp(11px, 1.8vh, 15px);
    font-size: 9px;
  }

  .science-detail__section > p {
    font-size: clamp(17px, 2.3vh, 20px);
    line-height: 1.25;
  }

  .science-detail__pills {
    gap: 8px 10px;
  }

  .science-detail__pills li {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 15px;
  }

  .science-detail__research {
    margin-top: clamp(14px, 2.3vh, 21px);
    padding-top: clamp(16px, 2.5vh, 22px);
  }

  .science-detail__studies {
    grid-template-columns: 36px 1fr 54px;
    gap: 10px;
  }

  .science-detail__studies svg {
    width: 36px;
    height: 36px;
  }

  .science-detail__studies > span {
    font-size: 18px;
  }

  .science-detail__studies i {
    width: 54px;
    height: 54px;
    font-size: 21px;
  }
}

@media (max-width: 780px) {
  .science-detail {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 78dvh;
    max-height: calc(100dvh - var(--nav-height) - 12px);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.38);
    transform: translateY(104%);
    transition:
      transform 560ms var(--ease-out),
      visibility 0s linear 560ms;
  }

  .science-detail::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 3;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: rgba(23, 44, 31, 0.28);
    transform: translateX(-50%);
  }

  .science-detail.is-open {
    transform: translateY(0);
    transition:
      transform 560ms var(--ease-out),
      visibility 0s;
  }

  .science-detail__body {
    padding: 34px 24px 40px;
  }

  .science-detail__body > h2 { font-size: 39px; }

  .science-detail__close {
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
    border-color: rgba(6, 42, 27, 0.82);
    color: #f6f5ec;
    background: #174a34;
    box-shadow:
      0 6px 18px rgba(8, 42, 28, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .science-detail__close span {
    left: 13px;
    width: 20px;
    height: 2px;
  }

  .science-detail__close:active {
    background: #236247;
    scale: 0.96;
  }
}