/* ===== StoreText — scroll-lit manifesto with inline pet photos ===== */
.cc_pxqp5f8i_Hdz1g6YGf8 .stx {
  width: 100%;
  /* clip, not hidden: hidden would make the section its own scroll container
     and pin every view() timeline below to it, so nothing would animate. */
  overflow: clip;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: calc(var(--section-y) * 1.4) var(--container-pad);
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__eyebrow {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-accent-text);
}

/* The statement: big display type. Each word is its own view timeline, so a
   whole line lights up together as it crosses the lower half of the screen. */
.cc_pxqp5f8i_Hdz1g6YGf8 .stx__statement {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 5.4vw, 76px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  max-width: 1100px;
  text-wrap: balance;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__word {
  /* Own box per word so each one tracks its own line's position. */
  display: inline-block;
  color: inherit;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__pic {
  display: inline-block;
  width: 1.55em;
  height: 0.92em;
  margin: 0 0.18em 0 0;
  vertical-align: -0.08em;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-surface-alt);
}

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

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cc_pxqp5f8i_Hdz1g6YGf8 .stx__word {
      animation: cc_pxqp5f8i_Hdz1g6YGf8_stx-light linear both;
      animation-timeline: view();
      animation-range: entry 90% cover 38%;
    }

    .cc_pxqp5f8i_Hdz1g6YGf8 .stx__pic {
      transform-origin: 50% 60%;
      animation: cc_pxqp5f8i_Hdz1g6YGf8_stx-swing linear both;
      animation-timeline: view();
      animation-range: entry 40% cover 40%;
    }
  }
}

@keyframes cc_pxqp5f8i_Hdz1g6YGf8_stx-light {
  from {
    opacity: 0.12;
    transform: translateY(0.18em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cc_pxqp5f8i_Hdz1g6YGf8_stx-swing {
  from {
    opacity: 0;
    transform: scale(0.4) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Folded SEO copy ---- */
.cc_pxqp5f8i_Hdz1g6YGf8 .stx__more {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 760px;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-soft);
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle-icon::before, .cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: transform 220ms ease;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle-icon::after {
  transform: rotate(90deg);
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle[aria-expanded="true"] .stx__toggle-icon::after {
  transform: rotate(0deg);
}

/* Height animates open via grid rows, so the copy stays in the DOM for SEO. */
.cc_pxqp5f8i_Hdz1g6YGf8 .stx__body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  font-size: var(--text-small);
  line-height: 1.65;
  color: var(--color-text-secondary);
  transition: grid-template-rows 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__body-inner {
  min-height: 0;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__body.is-open {
  grid-template-rows: 1fr;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__body-inner :is(p, ul, ol) {
  margin: 0 0 0.8em;
}

.cc_pxqp5f8i_Hdz1g6YGf8 .stx__body-inner :is(h2, h3) {
  margin: 1.1em 0 0.35em;
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  .cc_pxqp5f8i_Hdz1g6YGf8 .stx__body, .cc_pxqp5f8i_Hdz1g6YGf8 .stx__toggle-icon::after {
    transition: none;
  }
}