/* One pinned stage; the two semantic sections remain normal-flow fallbacks. */
.life-brand { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); }
.life-powered { display: block; text-align: left; font-size: clamp(14px, 1.667vw, 24px); line-height: 1.3; margin-left: 6px; }
.life-brand .life-wordmark { position: static; transform: none; font-size: clamp(90px, min(14vw, calc(200px * var(--product-fit, 1))), 200px); }
.life-brand .life-wordmark span:first-child { color: #2a2a2a; }
.life-brand .life-wordmark span:last-child { color: var(--accent-orange); }
.life-product > p { top: 70%; font-weight: 800; }
.life-story.has-product-sequence .life-stage { min-height: 480px; }
.has-product-sequence .wearable-section,
.has-product-sequence .capture-section {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  visibility: hidden;
}
.has-product-sequence .wearable-section { inset: 0; overflow: visible; }
.has-product-sequence .wearable-stage,
.has-product-sequence .capture-section {
  left: 50%;
  top: 50%;
  width: 1440px;
  height: 933px;
  max-height: none;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%) scale(var(--product-fit, 1));
}
.has-product-sequence .wearable-stage { position: absolute; aspect-ratio: auto; }
.has-product-sequence .wearable-copy h2 { font-size: 40px; }
.has-product-sequence .wearable-copy p { font-size: 20px; }
.has-product-sequence .wearable-wordmark { font-size: 78.927px; }
.has-product-sequence .wearable-device,
.has-product-sequence .capture-device { visibility: hidden; }
.has-product-sequence .capture-section { overflow: visible; }
.has-product-sequence .capture-heading { position: absolute; top: 110px; width: 100%; }
/* Cancel the stage scale so this title matches the normal-flow section headings. */
.has-product-sequence .capture-heading h2 {
  display: grid;
  grid-template-columns: max-content max-content max-content;
  justify-content: center;
  white-space: nowrap;
  align-items: center;
  column-gap: .24em;
  font-size: min(calc(var(--section-heading-size, 40px) / var(--product-fit, 1)), 48px);
  line-height: 1.3;
}
.has-product-sequence .capture-title-before { grid-column: 1; grid-row: 1; text-align: right; }
.has-product-sequence .capture-title-after { grid-column: 3; grid-row: 1; text-align: left; }
.has-product-sequence .capture-title-side { display: block; }
.has-product-sequence .capture-heading p { font-size: calc(20px / var(--product-fit, 1)); }
.has-product-sequence .capture-wordmark {
  grid-column: 2; grid-row: 1;
  visibility: hidden;
  font-family: 'Life Quip', sans-serif;
  font-size: 1em;
  line-height: .9;
  letter-spacing: -.065em;
}
.has-product-sequence .capture-visual { position: absolute; top: 271px; width: 1440px; height: 391px; margin: 0; }
.has-product-sequence .capture-frame { width: 389px; }
/* The scene scales to fit vertically; the strip and fades still span the viewport. */
.has-product-sequence .capture-strip {
  --capture-strip-width: max(1604px, calc(var(--capture-viewport-width) * 1.25));
  width: var(--capture-strip-width);
  left: calc((100% - var(--capture-strip-width)) / 2);
}
.has-product-sequence .capture-visual::before,
.has-product-sequence .capture-visual::after { width: calc(110px / var(--product-fit)); }
.has-product-sequence .capture-visual::before { left: calc((100% - var(--capture-viewport-width)) / 2); }
.has-product-sequence .capture-visual::after { right: calc((100% - var(--capture-viewport-width)) / 2); }
.has-product-sequence .capture-labels { position: absolute; top: 773px; width: 100%; margin: 0; font-size: 20px; }
/* Chapter text is controlled by the reversible main timeline, not one-shot reveals. */
.has-product-sequence .wearable-copy h2,
.has-product-sequence .capture-heading h2 { opacity: 1 !important; filter: none !important; transform: none !important; translate: none !important; transition: none !important; }
.has-product-sequence .life-device { z-index: 7; }
.life-device::before {
  content: ''; position: absolute; pointer-events: none;
  left: 8%; top: 26%; width: 84%; height: 78%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37, 28, 19, .76) 24%, rgba(49, 38, 24, .48) 48%, transparent 74%);
  filter: blur(3px); opacity: var(--contact-shadow, 0);
}
.life-story.is-reduced .life-stage { min-height: 480px; }
.sequence-layout-anchor { visibility: hidden !important; translate: none !important; scale: none !important; rotate: none !important; }
.has-product-sequence .wearable-wordmark { visibility: hidden !important; }
.has-product-sequence .life-shared-wordmark {
  position: absolute; left: 0; top: 0; z-index: 8;
  width: max-content; height: auto; margin: 0;
  transform-origin: 0 0; pointer-events: none; will-change: transform;
}
.life-shared-wordmark span:first-child { color: #2a2a2a; }
.life-shared-wordmark span:last-child { color: var(--accent-orange) !important; }
.has-product-sequence .life-wearable-title {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: max-content; margin: 0; padding: 0;
  font: 800 40px/1 var(--font-gilroy); letter-spacing: -.02em;
  text-transform: uppercase; white-space: nowrap;
  transform-origin: 0 0; filter: none !important;
  translate: none !important; scale: none !important; rotate: none !important;
  transition: none !important; pointer-events: none;
}
.wearable-reveal-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.wearable-reveal-char { display: inline-block; }

@media (max-width: 767px) {
  .life-brand { top: 15%; }
  .life-brand .life-wordmark { font-size: clamp(74px, 28vw, 155px); }
  .life-powered { font-size: 14px; }
  .has-product-sequence .wearable-stage,
  .has-product-sequence .capture-section { inset: 0; width: 100%; height: 100%; transform: none; }
  .has-product-sequence .wearable-person {
    top: calc(52% - 416px);
    width: 600px;
    height: 800px;
  }
  .has-product-sequence .wearable-copy { top: 190px; left: 24px; }
  .has-product-sequence .wearable-copy h2 { font-size: 30px; }
  .has-product-sequence .wearable-copy p { font-size: 16px; }
  .has-product-sequence .wearable-device { top: 52%; }
  .has-product-sequence .wearable-wordmark { top: auto; bottom: 12%; font-size: 56px; }
  .has-product-sequence .capture-heading { top: 90px; padding: 0 20px; }
  .has-product-sequence .capture-heading h2 { max-width: none; grid-template-columns: max-content max-content; justify-content: center; font-size: clamp(22px, 6.7vw, 32px); line-height: 1.3; row-gap: 6px; }
  .has-product-sequence .capture-title-before { grid-column: 1; grid-row: 1; text-align: right; }
  .has-product-sequence .capture-wordmark { grid-column: 2; grid-row: 1; }
  .has-product-sequence .capture-title-after { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .has-product-sequence .capture-heading p { font-size: 20px; line-height: 1.4; max-width: 340px; }
  .has-product-sequence .capture-visual { top: 55%; width: 100%; height: min(32svh, 280px); transform: translateY(-50%); }
  .has-product-sequence .capture-frame { width: 279px; }
  .has-product-sequence .capture-labels { top: auto; bottom: 9%; grid-template-columns: 1fr; gap: 12px; font-size: 14px; line-height: 1.3; padding: 0 20px; }
  .has-product-sequence .capture-labels br { display: none; }
  .has-product-sequence .capture-visual::before,
  .has-product-sequence .capture-visual::after { width: 36px; }
}
@media (max-height: 650px) and (max-width: 767px) {
  .life-brand { top: 16%; }
  .life-brand .life-wordmark { font-size: 80px; }
  .has-product-sequence .capture-heading { top: 78px; }
  .has-product-sequence .capture-heading h2 { margin-bottom: 8px; }
  .has-product-sequence .capture-labels { bottom: 6%; font-size: 12px; gap: 7px; }
  .has-product-sequence .wearable-copy { top: 166px; }
  .has-product-sequence .wearable-copy h2 { font-size: 25px; }
  .has-product-sequence .wearable-copy p { font-size: 14px; margin-top: 8px; }
  .has-product-sequence .wearable-wordmark { bottom: 10%; font-size: 44px; }
}

/* Description and labels share one flow so their actual screen gap stays 20px. */
.has-product-sequence .capture-footer { position: absolute; top: 700px; width: 100%; gap: calc(20px / var(--product-fit, 1)); }
.has-product-sequence .capture-description { font-size: calc(20px / var(--product-fit, 1)); }
.has-product-sequence .capture-footer .capture-labels { position: static; margin: 0; padding: 0 12px; align-items: start; }
@media(max-width:767px) {
  .has-product-sequence .capture-footer { top: auto; bottom: 5%; gap: 20px; padding: 0 20px; }
  .has-product-sequence .capture-description { font-size: 20px; }
}

/* Keep the requested supporting copy at 20 CSS pixels after stage scaling. */
.life-product > p, .wearable-copy p, .capture-labels { font-size: 20px; }
.has-product-sequence .wearable-copy p,
.has-product-sequence .capture-labels { font-size: calc(20px / var(--product-fit, 1)); }
@media (max-width: 767px) {
  .has-product-sequence .wearable-copy p,
  .has-product-sequence .capture-labels { font-size: 20px; }
}

.ubl-reveal-word { display: inline-block; }

/* Match the header logo gutter, with equal breathing room on the right. */
.ubl-content { width: min(100%, var(--container-max)); padding-left: 65px; padding-right: 65px; }
.ubl-media-region {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 48px;
  height: 363px;
}
.ubl-dots { top: 0; }
@media (max-width: 1024px) {
  .ubl-content { padding-left: 24px; padding-right: 24px; }
  .ubl-copy { width: 100%; }
  .ubl-media-region { margin-top: 36px; height: 260px; }
}
@media (max-width: 768px) {
  .ubl-content { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 1025px) {
  .life-product > p { font-size: 28px; }
}