/** Shopify CDN: Minification failed

Line 78:0 All "@import" rules must come first

**/
/*
  ============================================================
  FILE:    assets/founder-glowora.css
  BRAND:   FLO — Premium Hair Gummies
  STYLE:   Editorial Luxury | Emotional Storytelling | Asymmetric
  VERSION: 3.0.0

  TABLE OF CONTENTS
  1.  Custom Properties
  2.  Font Import
  3.  Section Scaffold           ← GEÄNDERT: padding-block kleiner
  4.  Ambient Glow
  5.  Section Rule (top ornament)
  6.  Inner Asymmetric Grid      ← GEÄNDERT: Bildspalte schmaler
  7.  Column A — Media
     7a. Media Wrap + Frame
     7b. Figure + Image          ← GEÄNDERT: aspect-ratio + margin-block-start
     7c. Caption
     7d. Nameplate
  8.  Column B — Text
     8a. Statement Headline
     8b. Story Container
     8c. Opening Sentence
     8d. Body Richtext
     8e. Pull Quote
     8f. Signature
  9.  Watermark
  10. Scroll-Reveal Animations
  11. Image Side Modifier (right variant)
  12. Responsive: Tablet (≤ 1024px)
  13. Responsive: Mobile (≤ 749px)
  14. Reduced Motion
  ============================================================
*/


/* ── 1. CUSTOM PROPERTIES ─────────────────────────────────── */

.glow-founder {
  --founder-bg:      #F5F0EA;
  --founder-text:    #1C1814;
  --founder-accent:  #D8B8A2;

  --founder-text-muted:   color-mix(in srgb, var(--founder-text) 44%, transparent);
  --founder-text-subtle:  color-mix(in srgb, var(--founder-text) 16%, transparent);
  --founder-accent-dim:   color-mix(in srgb, var(--founder-accent) 16%, transparent);
  --founder-accent-mid:   color-mix(in srgb, var(--founder-accent) 48%, transparent);
  --founder-accent-warm:  color-mix(in srgb, var(--founder-accent) 10%, #F5F0EA);
  --founder-border:       color-mix(in srgb, var(--founder-text) 9%, transparent);

  --sp-1:  0.5rem;
  --sp-2:  1rem;
  --sp-3:  1.5rem;
  --sp-4:  2rem;
  --sp-6:  3rem;
  --sp-8:  4rem;
  --sp-12: 6rem;
  --sp-16: 8rem;
  --sp-24: 12rem;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  --ease-reveal:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-slow:       1.1s;
  --dur-mid:        0.85s;
}


/* ── 2. FONT IMPORT ───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@300;400;500&display=swap');


/* ── 3. SECTION SCAFFOLD ──────────────────────────────────── */

.glow-founder {
  position: relative;
  background-color: var(--founder-bg);
  color: var(--founder-text);
  /*
    GEÄNDERT v2.1: Section kompakter.
    Vorher: clamp(var(--sp-12), 12vw, var(--sp-24)) / clamp(var(--sp-16), 16vw, calc(var(--sp-24) + var(--sp-8)))
    Jetzt:  oben 5rem→8rem, unten 6rem→10rem — ca. 35% weniger Luft
  */
  padding-block: clamp(var(--sp-6), 7vw, var(--sp-16))
                 clamp(var(--sp-8), 9vw, var(--sp-24));
  overflow: hidden;
  isolation: isolate;
}

.glow-founder .page-width {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  width: 100%;
}


/* ── 4. AMBIENT GLOW ──────────────────────────────────────── */

.glow-founder__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.glow-founder__ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.glow-founder__ambient-orb--1 {
  width: clamp(400px, 58vw, 860px);
  height: clamp(400px, 58vw, 860px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--founder-accent) 20%, transparent) 0%,
    transparent 65%
  );
  top: -20%;
  right: -8%;
  animation: founder-orb-1 22s ease-in-out infinite alternate;
}

.glow-founder__ambient-orb--2 {
  width: clamp(240px, 32vw, 500px);
  height: clamp(240px, 32vw, 500px);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--founder-accent) 10%, #fff8f3) 0%,
    transparent 70%
  );
  bottom: 10%;
  left: -5%;
  animation: founder-orb-2 28s ease-in-out infinite alternate;
}

@keyframes founder-orb-1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 5%) scale(1.06); }
}

@keyframes founder-orb-2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(4%, -4%) scale(1.05); }
}


/* ── 5. SECTION RULE (top ornament) ──────────────────────── */

.glow-founder__section-rule {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-block-end: clamp(var(--sp-8), 8vw, var(--sp-12));
  position: relative;
  z-index: 1;
}

.glow-founder__section-rule-line {
  flex: 1;
  height: 1px;
  background: var(--founder-border);
}

.glow-founder__section-rule-label {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--founder-accent);
  white-space: nowrap;
  flex-shrink: 0;
}


/* ── 6. INNER ASYMMETRIC GRID ─────────────────────────────── */

.glow-founder__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /*
    GEÄNDERT v2.1: Bildspalte schmaler.
    Vorher: 44fr 56fr
    Jetzt:  36fr 64fr — Bild nimmt weniger Breite ein
  */
  grid-template-columns: 36fr 64fr;
  gap: clamp(var(--sp-8), 8vw, var(--sp-16));
  align-items: start;
}


/* ── 7. COLUMN A — MEDIA ──────────────────────────────────── */

.glow-founder__media-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  /*
    GEÄNDERT v2.1: Weniger negativer Versatz nach oben.
    Vorher: calc(-1 * clamp(var(--sp-8), 10vw, var(--sp-16)))
    Jetzt:  calc(-1 * clamp(var(--sp-4), 4vw, var(--sp-6)))
    → Bild ragt weniger über die Section-Oberkante hinaus
  */
  margin-block-start: calc(-1 * clamp(var(--sp-4), 4vw, var(--sp-6)));
}


/* ── 7a. MEDIA WRAP + FRAME ───────────────────────────────── */

.glow-founder__media-wrap {
  position: relative;
}

.glow-founder__frame {
  position: absolute;
  top:    var(--sp-4);
  right:  calc(-1 * var(--sp-3));
  bottom: calc(-1 * var(--sp-6));
  left:   var(--sp-4);
  border: 1px solid var(--founder-accent-mid);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease;
}

.glow-founder__media-col:hover .glow-founder__frame {
  opacity: 0.5;
}


/* ── 7b. FIGURE + IMAGE ───────────────────────────────────── */

.glow-founder__figure {
  position: relative;
  z-index: 1;
  margin: 0;
  /*
    GEÄNDERT v2.1: Seitenverhältnis kompakter.
    Vorher: 2 / 3  (sehr lang/hochformatig)
    Jetzt:  3 / 4  (kürzer, klassisch Porträt)
  */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 1px;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      175deg,
      transparent 50%,
      color-mix(in srgb, var(--founder-accent) 18%, transparent) 80%,
      color-mix(in srgb, var(--founder-bg) 28%, transparent) 100%
    );
    pointer-events: none;
    z-index: 2;
  }
}

.glow-founder__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 1.3s var(--ease-out-expo);
}

.glow-founder__figure:hover .glow-founder__image {
  transform: scale(1.035);
}

.glow-founder__image-placeholder {
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--founder-accent) 10%, var(--founder-bg));
  display: flex;
  align-items: center;
  justify-content: center;
}

.glow-founder__image-placeholder .placeholder-svg {
  width: 50%;
  height: 50%;
  opacity: 0.16;
}


/* ── 7c. CAPTION ──────────────────────────────────────────── */

.glow-founder__caption {
  margin: var(--sp-2) 0 0 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--founder-text-muted);
  text-align: right;
}


/* ── 7d. NAMEPLATE ────────────────────────────────────────── */

.glow-founder__nameplate {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-block: var(--sp-4) 0;
  border-top: 1px solid var(--founder-border);
  margin-block-start: var(--sp-2);
}

.glow-founder__name {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--founder-text);
  margin: 0;
}

.glow-founder__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--founder-accent);
  margin: 0;
}


/* ── 8. COLUMN B — TEXT ───────────────────────────────────── */

.glow-founder__text-col {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-6), 6vw, var(--sp-10, 5rem));
  padding-block-start: var(--sp-6);
}


/* ── 8a. STATEMENT HEADLINE ───────────────────────────────── */

.glow-founder__statement {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.5vw, 6.5rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--founder-text);
  margin: 0;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;

  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity var(--dur-slow) var(--ease-reveal),
    transform var(--dur-slow) var(--ease-reveal);
}

.glow-founder__statement[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

.glow-founder__statement em {
  color: var(--founder-accent);
  opacity: 0.9;
}


/* ── 8b. STORY CONTAINER ──────────────────────────────────── */

.glow-founder__story {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  max-width: 58ch;

  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-mid) var(--ease-reveal) 0.15s,
    transform var(--dur-mid) var(--ease-reveal) 0.15s;
}

.glow-founder__story[data-visible] {
  opacity: 1;
  transform: translateY(0);
}


/* ── 8c. OPENING SENTENCE ─────────────────────────────────── */

.glow-founder__opening {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--founder-text);
  margin: 0;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--founder-accent);
}


/* ── 8d. BODY RICHTEXT ────────────────────────────────────── */

.glow-founder__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.glow-founder__body p {
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 300;
  line-height: 1.95;
  color: var(--founder-text-muted);
  margin: 0;
}

.glow-founder__body strong {
  font-weight: 500;
  color: var(--founder-text);
}

.glow-founder__body a {
  color: var(--founder-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity 0.2s ease;
}

.glow-founder__body a:hover {
  opacity: 0.7;
}


/* ── 8e. PULL QUOTE ───────────────────────────────────────── */

.glow-founder__pullquote {
  margin: 0;
  padding: var(--sp-6) var(--sp-8);
  position: relative;
  background: var(--founder-accent-warm);
  border-radius: 1px;
  border-left: none;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: var(--sp-4);
    bottom: var(--sp-4);
    width: 3px;
    background: linear-gradient(
      to bottom,
      var(--founder-accent),
      var(--founder-accent-mid)
    );
    border-radius: 1px;
  }

  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-mid) var(--ease-reveal) 0.25s,
    transform var(--dur-mid) var(--ease-reveal) 0.25s;
}

.glow-founder__pullquote[data-visible] {
  opacity: 1;
  transform: translateY(0);
}

.glow-founder__pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--founder-text);
  margin: 0;
}


/* ── 8f. SIGNATURE ────────────────────────────────────────── */

.glow-founder__signature {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block-start: var(--sp-3);
  border-top: 1px solid var(--founder-border);
}

.glow-founder__signature-line {
  display: inline-block;
  width: 56px;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--founder-accent),
    var(--founder-accent-mid)
  );
  flex-shrink: 0;
}

.glow-founder__signature-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.03em;
  color: var(--founder-text);
  margin: 0;
}


/* ── 9. WATERMARK ─────────────────────────────────────────── */

.glow-founder__watermark {
  position: absolute;
  bottom: -0.12em;
  right: clamp(var(--sp-4), 4vw, var(--sp-12));
  z-index: 0;
  pointer-events: none;
  user-select: none;

  font-family: var(--font-display);
  font-size: clamp(10rem, 22vw, 22rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.03em;

  color: transparent;
  -webkit-text-stroke: 1px var(--founder-border);

  opacity: 0.45;
  overflow: hidden;
}


/* ── 10. SCROLL-REVEAL ANIMATIONS ─────────────────────────── */

[data-founder-reveal="image"] {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity var(--dur-slow) var(--ease-reveal),
    transform var(--dur-slow) var(--ease-reveal);
}

[data-founder-reveal="image"][data-visible] {
  opacity: 1;
  transform: translateX(0);
}

.glow-founder--image-right [data-founder-reveal="image"] {
  transform: translateX(32px);
}

.glow-founder--image-right [data-founder-reveal="image"][data-visible] {
  transform: translateX(0);
}


/* ── 11. IMAGE-RIGHT MODIFIER ─────────────────────────────── */

.glow-founder--image-right .glow-founder__inner {
  /*
    GEÄNDERT v2.1: passend zum neuen 36/64 Ratio
  */
  grid-template-columns: 64fr 36fr;
}

.glow-founder--image-right .glow-founder__media-col {
  order: 2;
}

.glow-founder--image-right .glow-founder__text-col {
  order: 1;
}

.glow-founder--image-right .glow-founder__frame {
  right: var(--sp-4);
  left: calc(-1 * var(--sp-3));
}


/* ── 12. RESPONSIVE: TABLET (≤ 1024px) ───────────────────── */

@media (max-width: 1024px) {
  .glow-founder {
    padding-block: var(--sp-8) var(--sp-12);
  }

  .glow-founder .page-width {
    padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  }

  .glow-founder__inner {
    grid-template-columns: 44fr 56fr;
    gap: var(--sp-8);
  }

  .glow-founder__media-col {
    margin-block-start: calc(-1 * var(--sp-4));
  }

  .glow-founder__statement {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
  }

  .glow-founder__name {
    font-size: clamp(1.625rem, 3.5vw, 2.125rem);
  }

  .glow-founder__title {
    font-size: 0.9375rem;
  }

  .glow-founder__opening {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
  }

  .glow-founder__body p {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
  }

  .glow-founder__pullquote {
    padding: var(--sp-5, 2.5rem) var(--sp-6);
  }

  .glow-founder__pullquote p {
    font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  }

  .glow-founder__signature-text {
    font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  }

  .glow-founder__watermark {
    font-size: clamp(8rem, 18vw, 16rem);
  }
}


/* ── 13. RESPONSIVE: MOBILE (≤ 749px) ────────────────────── */
/* ═══════════════════════════════════════════════════
   Komplett neu geschrieben — gleiche Aggressivität
   wie flo-hero Mobile-Block. Desktop unverändert.
═══════════════════════════════════════════════════ */

@media screen and (max-width: 749px) {

  /* Kein horizontaler Overflow */
  .glow-founder {
    overflow-x: hidden;
    padding-block: var(--sp-4) var(--sp-6);
  }

  .glow-founder .page-width {
    padding-inline: 18px;
  }

  /* ── GRID: Single Column, Bild oben ── */
  .glow-founder__inner,
  .glow-founder--image-right .glow-founder__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }

  /* Bild immer zuerst */
  .glow-founder__media-col,
  .glow-founder--image-right .glow-founder__media-col {
    order: -1;
    margin-block-start: 0;
    overflow: hidden;
  }

  .glow-founder__text-col,
  .glow-founder--image-right .glow-founder__text-col {
    order: 1;
  }

  /* ── BILD: kompakt, Motiv gut sichtbar ── */
  .glow-founder__figure {
    aspect-ratio: 4 / 5;
    max-height: 75vw;
    border-radius: 2px;
  }

  /* Bild: Motiv oben sichtbar */
  .glow-founder__image {
    object-position: center 15%;
  }

  /* Dekorativer Frame: ausblenden */
  .glow-founder__frame {
    display: none;
  }

  /* Scroll-Reveal: sofort sichtbar auf Mobile */
  [data-founder-reveal="image"],
  .glow-founder--image-right [data-founder-reveal="image"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ── SECTION RULE ── */
  .glow-founder__section-rule {
    margin-block-end: var(--sp-3);
    gap: var(--sp-2);
  }

  .glow-founder__section-rule-label {
    font-size: 0.75rem;
    letter-spacing: 0.22em;
  }

  /* ── TEXT COLUMN ── */
  .glow-founder__text-col {
    gap: var(--sp-3);
    padding-block-start: 0;
  }

  /* Statement: kompakt, gut lesbar */
  .glow-founder__statement {
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    line-height: 1.1;
    word-break: break-word;
    hyphens: auto;
    /* Scroll-Reveal sofort */
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Story Container */
  .glow-founder__story {
    max-width: 100%;
    gap: var(--sp-3);
    /* Scroll-Reveal sofort */
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Opening: kompakter */
  .glow-founder__opening {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    padding-left: var(--sp-2);
    line-height: 1.55;
    word-break: break-word;
    hyphens: auto;
  }

  /* Body Text */
  .glow-founder__body {
    gap: var(--sp-2);
  }

  .glow-founder__body p {
    font-size: 0.9375rem;
    line-height: 1.8;
    word-break: break-word;
  }

  /* Pull Quote: kompakt */
  .glow-founder__pullquote {
    padding: var(--sp-3) var(--sp-3);
    /* Scroll-Reveal sofort */
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow-founder__pullquote p {
    font-size: clamp(1.125rem, 5vw, 1.375rem);
    word-break: break-word;
    hyphens: auto;
  }

  /* Signature */
  .glow-founder__signature {
    gap: var(--sp-2);
    padding-block-start: var(--sp-2);
  }

  .glow-founder__signature-line {
    width: 32px;
  }

  .glow-founder__signature-text {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
  }

  /* Nameplate */
  .glow-founder__nameplate {
    padding-block: var(--sp-3) 0;
  }

  .glow-founder__name {
    font-size: clamp(1.375rem, 6.5vw, 1.75rem);
    line-height: 1.15;
  }

  .glow-founder__title {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
  }

  .glow-founder__caption {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }

  /* Watermark: ausblenden auf Mobile — verhindert Overflow */
  .glow-founder__watermark {
    display: none;
  }

  /* Touch: Hover-Zoom am Bild deaktivieren */
  @media (hover: none) {
    .glow-founder__figure:hover .glow-founder__image {
      transform: none;
    }
    .glow-founder__media-col:hover .glow-founder__frame {
      opacity: 1;
    }
    .glow-founder__body a:hover {
      opacity: 1;
    }
  }

  /* ── Sehr kleine Screens (360px) ── */
  @media (max-width: 360px) {
    .glow-founder {
      padding-block: var(--sp-3) var(--sp-4);
    }
    .glow-founder .page-width {
      padding-inline: 14px;
    }
    .glow-founder__figure {
      max-height: 72vw;
    }
    .glow-founder__statement {
      font-size: 1.625rem;
    }
    .glow-founder__opening {
      font-size: 0.9375rem;
    }
    .glow-founder__body p {
      font-size: 0.875rem;
    }
    .glow-founder__pullquote {
      padding: var(--sp-2) var(--sp-2);
    }
    .glow-founder__pullquote p {
      font-size: 1.0625rem;
    }
  }
}


/* ── 14. REDUCED MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .glow-founder__ambient-orb {
    animation: none;
  }

  .glow-founder__statement,
  .glow-founder__story,
  .glow-founder__pullquote,
  [data-founder-reveal="image"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .glow-founder__image {
    transition: none;
  }
}