/* =========================================================
   WOMB & HEART
   HERO
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero {
  width: 100%;

  height:
    calc(
      100svh -
      var(--header-h, 104px)
    );

  min-height: 620px;

  padding:
    0
    0
    0;

  background:
    #ffffff;
}


.hero-shell {
  height: 100%;
}


/* =========================================================
   HERO STAGE
========================================================= */

.hero-stage {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius:
    20px;

  background:
    #fff6f7;

  isolation:
    isolate;
}


/* =========================================================
   HERO IMAGE
========================================================= */

.hero-photo {
  position: absolute;

  z-index: 1;

  inset: 0;

  margin: 0;
}


.hero-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center
    48%;

  transform:
    scale(1.001);
}


/* =========================================================
   SHADE
========================================================= */

.hero-shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0) 36%
    );
}


/* =========================================================
   CORNER CUTOUTS

   IMPORTANT:

   The main cutouts stay exactly as before.

   The pseudo-elements below create the SMALL CONCAVE
   transition curves where each white cutout rejoins the
   hero edge.

   They do NOT create extra white blocks.
   They do NOT change the large 30px corner.
========================================================= */

.hero-corner {
  position: absolute;

  z-index: 1000;

  width: 224px;
  height: 64px;

  box-sizing:
    border-box;

  display: flex;

  background:
    #ffffff;

  color:
    #512c3e;

  opacity: 1;
  visibility: visible;

  text-decoration: none;

  pointer-events:
    auto;

  overflow:
    visible;
}


/* =========================================================
   TOP LEFT CUTOUT
========================================================= */

.hero-corner--top {
  top: 0;
  left: 0;

  padding:
    7px
    15px
    10px
    0;

  align-items:
    flex-start;

  justify-content:
    flex-start;

  border-right:
    2px
    solid
    #512c3e;

  border-bottom:
    2px
    solid
    #512c3e;

  border-bottom-right-radius:
    30px;
}


/* =========================================================
   TOP LEFT — TOP JOIN

   This replaces the sharp meeting point where the vertical
   cutout edge reaches the TOP edge of the hero.

                 hero top
   --------------------╮
                       │
                       │
                 cutout│

   White is OUTSIDE the curve.
   Hero image is INSIDE the curve.
========================================================= */

.hero-corner--top::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: 0;

  right: -24px;

  width: 24px;
  height: 24px;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 100% 100%,

      transparent
      0
      22px,

      #512c3e
      22px
      24px,

      #ffffff
      24px
      100%
    );
}


/* =========================================================
   TOP LEFT — LEFT JOIN

   This replaces the sharp meeting point where the
   horizontal shelf reaches the LEFT edge of the hero.

   cutout shelf
   ----------------╮
                   │
                   │ hero left continues down

========================================================= */

.hero-corner--top::after {
  content: "";

  position: absolute;

  z-index: 2;

  left: 0;

  bottom: -24px;

  width: 24px;
  height: 24px;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 100% 100%,

      transparent
      0
      22px,

      #512c3e
      22px
      24px,

      #ffffff
      24px
      100%
    );
}


/* =========================================================
   BOTTOM RIGHT CUTOUT
========================================================= */

.hero-corner--bottom {
  right: 0;
  bottom: 0;

  padding:
    10px
    0
    7px
    15px;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  border-top:
    2px
    solid
    #512c3e;

  border-left:
    2px
    solid
    #512c3e;

  border-top-left-radius:
    30px;
}


/* =========================================================
   BOTTOM RIGHT — RIGHT JOIN

   Mirror of the top-left transition.

   Hero right edge comes down and CURVES into the
   horizontal top edge of the white Yoga Mama cutout.

========================================================= */

.hero-corner--bottom::before {
  content: "";

  position: absolute;

  z-index: 2;

  top: -24px;

  right: 0;

  width: 24px;
  height: 24px;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 0 0,

      transparent
      0
      22px,

      #512c3e
      22px
      24px,

      #ffffff
      24px
      100%
    );
}


/* =========================================================
   BOTTOM RIGHT — BOTTOM JOIN

   The left edge of the Yoga Mama cutout curves smoothly
   into the BOTTOM edge of the hero.

========================================================= */

.hero-corner--bottom::after {
  content: "";

  position: absolute;

  z-index: 2;

  left: -24px;

  bottom: 0;

  width: 24px;
  height: 24px;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 0 0,

      transparent
      0
      22px,

      #512c3e
      22px
      24px,

      #ffffff
      24px
      100%
    );
}


/* =========================================================
   BOTH CORNER BUTTONS
   2PX BORDER
========================================================= */

.hero-corner-pill {
  position: relative;

  z-index: 5;

  width: 193px;
  height: 43px;

  flex:
    0
    0
    193px;

  padding:
    0
    14px
    0
    18px;

  box-sizing:
    border-box;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  border:
    2px
    solid
    #512c3e;

  border-radius:
    999px;

  background:
    #ffffff;

  color:
    #512c3e;

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.015em;

  white-space:
    nowrap;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}


.hero-corner-pill svg {
  width:
    18px;

  height:
    18px;

  flex:
    0
    0
    18px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.9;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

  transition:
    transform
    220ms
    ease;
}


.hero-corner:hover
.hero-corner-pill {
  background:
    #512c3e;

  color:
    #ffffff;
}


.hero-corner:hover
.hero-corner-pill svg {
  transform:
    translateX(3px);
}


/* =========================================================
   NADJA PREMIUM INFO
========================================================= */

.hero-nadja {
  position: absolute;

  z-index: 30;

  top: 26px;
  right: 30px;

  display: flex;

  align-items:
    stretch;

  gap:
    14px;

  color:
    #ffffff;

  text-shadow:
    0
    2px
    14px
    rgba(0, 0, 0, 0.28);
}


.hero-nadja-rule {
  width:
    2px;

  min-height:
    67px;

  align-self:
    stretch;

  background:
    rgba(
      255,
      255,
      255,
      0.95
    );

  border-radius:
    999px;
}


.hero-nadja-content {
  display: flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  justify-content:
    center;
}


.hero-nadja-label {
  margin-bottom:
    7px;

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.16em;
}


.hero-nadja-content strong {
  color:
    #ffffff;

  font-size:
    clamp(
      20px,
      1.45vw,
      25px
    );

  font-weight:
    700;

  line-height:
    0.95;

  letter-spacing:
    -0.025em;
}


.hero-nadja-brand {
  margin-top:
    6px;

  color:
    rgba(
      255,
      255,
      255,
      0.92
    );

  font-size:
    13px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.14em;
}


/* =========================================================
   COMPACT PREMIUM SLIDER
========================================================= */

.hero-slider {
  position: absolute;

  z-index: 40;

  left: 20px;
  bottom: 20px;

  width:
    300px;

  outline:
    none;
}


/* =========================================================
   SLIDER CARD WINDOW
========================================================= */

.hero-slider-window {
  width:
    100%;

  overflow:
    hidden;

  border-radius:
    15px;
}


/* =========================================================
   TRACK
========================================================= */

.hero-slider-track {
  display:
    flex;

  width:
    100%;

  will-change:
    transform;
}


/* =========================================================
   SLIDE
========================================================= */

.hero-slide {
  width:
    100%;

  flex:
    0
    0
    100%;

  min-height:
    112px;

  padding:
    9px;

  box-sizing:
    border-box;

  display:
    grid;

  grid-template-columns:
    92px
    minmax(
      0,
      1fr
    );

  gap:
    12px;

  border:
    1px
    solid
    rgba(
      81, 44, 62,
      0.18
    );

  border-radius:
    15px;

  background:
    rgba(
      255, 246, 247,
      0.94
    );

  color:
    #512c3e;

  box-shadow:
    0
    14px
    34px
    rgba(
      0,
      0,
      0,
      0.13
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


/* =========================================================
   SLIDE IMAGE
========================================================= */

.hero-slide-image {
  width:
    92px;

  height:
    92px;

  margin:
    0;

  overflow:
    hidden;

  border-radius:
    11px;

  background:
    #eab4c9;
}


.hero-slide-image img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


/* =========================================================
   SLIDE COPY
========================================================= */

.hero-slide-copy {
  position:
    relative;

  min-width:
    0;

  padding:
    3px
    3px
    2px
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


/* NUMBER TOP RIGHT */

.hero-slide-number {
  position:
    absolute;

  top:
    1px;

  right:
    2px;

  color:
    rgba(
      81, 44, 62,
      0.5
    );

  font-size:
    12px;

  font-weight:
    700;

  line-height:
    1;
}


/* COPY GROUP */

.hero-slide-text {
  padding-right:
    29px;
}


/* CATEGORY */

.hero-slide-category {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(
      81, 44, 62,
      0.5
    );

  font-size:
    9px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.11em;
}


/* TITLE */

.hero-slide h2 {
  margin:
    0;

  color:
    #512c3e;

  font-size:
    20px;

  font-weight:
    700;

  line-height:
    0.94;

  letter-spacing:
    -0.025em;
}


/* =========================================================
   SLIDE CTA
========================================================= */

.hero-slide-button {
  min-width:
    92px;

  height:
    29px;

  margin-top:
    auto;

  padding:
    0
    12px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  border:
    1.5px
    solid
    #512c3e;

  border-radius:
    4px;

  background:
    transparent;

  color:
    #512c3e;

  font-size:
    10px;

  font-weight:
    700;

  line-height:
    1;

  letter-spacing:
    0.06em;

  transition:
    background-color
    180ms
    ease,
    color
    180ms
    ease;
}


.hero-slide-button:hover {
  background:
    #512c3e;

  color:
    #ffffff;
}


/* =========================================================
   NAVIGATION BELOW CARD
========================================================= */

.hero-slider-navigation {
  margin-top:
    10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    11px;

  width:
    100%;
}


/* =========================================================
   ROUND ARROW BUTTONS
========================================================= */

.hero-slider-arrow {
  width:
    34px;

  height:
    34px;

  flex:
    0
    0
    34px;

  padding:
    0;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  background:
    #fff6f7;

  color:
    #512c3e;

  box-shadow:
    0
    4px
    14px
    rgba(
      0,
      0,
      0,
      0.08
    );

  transition:
    transform
    180ms
    ease,
    background-color
    180ms
    ease;
}


.hero-slider-arrow:hover {
  transform:
    translateY(-1px);

  background:
    #ffffff;
}


.hero-slider-arrow svg {
  width:
    15px;

  height:
    15px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   DOTS
========================================================= */

.hero-slider-dots {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    4px;
}


.hero-slider-dots span {
  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    rgba(
      255,
      255,
      255,
      0.48
    );

  transition:
    transform
    180ms
    ease,
    background-color
    180ms
    ease;
}


.hero-slider-dots span.is-active {
  background:
    #ffffff;

  transform:
    scale(1.35);
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 901px) {
  .hero-slider {
    width: 210px;
  }

  .hero-slide {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    padding: 7px;
  }

  .hero-slide-image {
    width: 64px;
  }

  .hero-slide-text {
    padding: 14px 0 0;
  }

  .hero-slide h2 {
    font-size: 16px;
  }
}

@media (max-width: 900px) {

  .hero-slider {
    width:
      290px;
  }


  .hero-nadja {
    top:
      20px;

    right:
      20px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

  .hero {
    min-height:
      590px;

    padding:
      0
      0
      0;
  }


  .hero-stage {
    border-radius:
      15px;
  }


  .hero-photo img {
    object-position:
      center
      center;
  }


  /* =====================================================
     MOBILE CORNERS
  ====================================================== */

  .hero-corner {
    width:
      182px;

    height:
      55px;
  }


  .hero-corner--top {
    padding:
      6px
      11px
      8px
      0;

    border-bottom-right-radius:
      24px;
  }


  .hero-corner--bottom {
    padding:
      8px
      0
      6px
      11px;

    border-top-left-radius:
      24px;
  }


  /*
     Smaller transition radius on mobile.
     Same direction — just reduced from 24px to 18px.
  */

  .hero-corner--top::before {
    right:
      -18px;

    width:
      18px;

    height:
      18px;

    background:
      radial-gradient(
        circle at 100% 100%,

        transparent
        0
        16px,

        #512c3e
        16px
        18px,

        #ffffff
        18px
        100%
      );
  }


  .hero-corner--top::after {
    bottom:
      -18px;

    width:
      18px;

    height:
      18px;

    background:
      radial-gradient(
        circle at 100% 100%,

        transparent
        0
        16px,

        #512c3e
        16px
        18px,

        #ffffff
        18px
        100%
      );
  }


  .hero-corner--bottom::before {
    top:
      -18px;

    width:
      18px;

    height:
      18px;

    background:
      radial-gradient(
        circle at 0 0,

        transparent
        0
        16px,

        #512c3e
        16px
        18px,

        #ffffff
        18px
        100%
      );
  }


  .hero-corner--bottom::after {
    left:
      -18px;

    width:
      18px;

    height:
      18px;

    background:
      radial-gradient(
        circle at 0 0,

        transparent
        0
        16px,

        #512c3e
        16px
        18px,

        #ffffff
        18px
        100%
      );
  }


  .hero-corner-pill {
    width:
      158px;

    height:
      39px;

    flex-basis:
      158px;

    padding:
      0
      11px
      0
      14px;

    font-size:
      13px;

    border-width:
      2px;
  }


  .hero-corner-pill svg {
    width:
      16px;

    height:
      16px;

    flex-basis:
      16px;
  }


  /* =====================================================
     NADJA
  ====================================================== */

  .hero-nadja {
    top:
      14px;

    right:
      13px;

    gap:
      9px;
  }


  .hero-nadja-rule {
    min-height:
      54px;

    width:
      1.5px;
  }


  .hero-nadja-label {
    margin-bottom:
      5px;

    font-size:
      7px;
  }


  .hero-nadja-content strong {
    font-size:
      16px;
  }


  .hero-nadja-brand {
    margin-top:
      5px;

    font-size:
      10px;
  }


  /* =====================================================
     SLIDER
  ====================================================== */

  .hero-slider {
    left:
      10px;

    bottom:
      68px;

    width:
      264px;
  }


  .hero-slide {
    min-height:
      101px;

    padding:
      7px;

    grid-template-columns:
      82px
      1fr;

    gap:
      10px;

    border-radius:
      13px;
  }


  .hero-slide-image {
    width:
      82px;

    height:
      82px;

    border-radius:
      9px;
  }


  .hero-slide-number {
    font-size:
      10px;
  }


  .hero-slide-category {
    font-size:
      7px;
  }


  .hero-slide h2 {
    font-size:
      17px;
  }


  .hero-slide-button {
    min-width:
      82px;

    height:
      26px;

    font-size:
      9px;
  }


  .hero-slider-navigation {
    margin-top:
      8px;

    gap:
      9px;
  }


  .hero-slider-arrow {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;
  }


  .hero-slider-arrow svg {
    width:
      14px;

    height:
      14px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .hero-slider {
    width:
      245px;
  }


  .hero-slide {
    grid-template-columns:
      76px
      1fr;
  }


  .hero-slide-image {
    width:
      76px;

    height:
      76px;
  }


  .hero-slide h2 {
    font-size:
      16px;
  }

}
/* Let the hero span the full viewport width. */
.hero .hero-shell {
  width: 100%;
  max-width: none;
}

.hero .hero-stage {
  border-radius: 0;
}

/* The overlaid header is now part of the hero's viewport height. */
.hero {
  height: 100svh;
}

.hero .hero-shell {
  position: relative;
}

.hero .hero-nadja {
  top: calc(var(--header-h) + 24px);
}

.hero .hero-shade {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.42) 0%,
    rgba(0, 0, 0, 0.12) 25%,
    rgba(0, 0, 0, 0) 48%);
}

/* Founder information sits beneath the logo on the left. */
.hero .hero-nadja {
  left: var(--page-x);
  right: auto;
  top: 144px;
}

@media (max-width: 720px) {
  .hero .hero-nadja {
    top: 108px;
  }
}