/** Shopify CDN: Minification failed

Line 42:0 Unexpected "}"

**/
/* Brand story — full-bleed lifestyle */
.story { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ink); min-height: max(100svh, 720px); max-height: 1300px; display: flex; }
.story__media video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 40%); }
/* Optional flat darkening (theme-editor setting, 0 by default) — no gradients. */
.story__media::after { content: ''; position: absolute; inset: 0; background: rgba(11, 9, 7, var(--overlay, 0)); pointer-events: none; }
.story__inner {
  position: relative; z-index: 2; width: 100%; max-width: 1800px; margin-inline: auto;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + clamp(32px, 7vh, 72px)) var(--gutter) clamp(32px, 6vh, 72px);
}
.story__side, .story__title, .story__cta-text { text-shadow: 0 1px 24px rgba(0, 0, 0, 0.55); }
.story__side { align-self: flex-end; display: grid; gap: 6px; text-align: right; font-size: 0.5625rem; letter-spacing: 0.3em; color: var(--c-on-dark-muted); }
.story__side li:last-child::after { content: ''; display: block; width: 28px; height: 1px; background: var(--c-bronze); margin: 14px 0 0 auto; }

.story__body { display: grid; gap: clamp(28px, 6vh, 56px); }
.story__title { font-size: clamp(3.3rem, 15vw, 5.6rem); line-height: 0.96; }
.story__line { display: block; }
.story__word { display: block; }
.story__cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.story__cta-text { display: grid; gap: 14px; width: 54%; color: var(--c-on-dark-muted); }
.story__cta-text .eyebrow { font-size: 0.5625rem; letter-spacing: 0.26em; }
.story__rule { display: block; width: 36px; height: 1px; background: var(--c-bronze); }
.story__rule:last-child { display: none; }
.story__play { width: 60px; height: 60px; }
.story__play .icon { width: 18px; height: 18px; }
.story__cta:hover .story__play { background: rgba(208, 176, 122, 0.14); border-color: var(--c-champagne); }

@media (max-width: 749px) {
  /* Heading first, then the video at its own shape (16:9 by default), then the paragraph and button, all on black. */
  .story { display: flex; flex-direction: column; min-height: 0; max-height: none; padding: clamp(28px, 7vw, 44px) 0 clamp(36px, 9vw, 56px); row-gap: clamp(20px, 5vw, 30px); }
  .story__inner, .story__body { display: contents; }
  .story__title { order: 1; padding-inline: var(--gutter); }
  .story .story__media { order: 2; position: relative; inset: auto; width: 100%; aspect-ratio: var(--story-ratio, 16 / 9); }
  .story__text { order: 3; padding-inline: var(--gutter); }
  .story__cta { order: 4; padding-inline: var(--gutter); }
}
}

@media (min-width: 750px) {
  .story__side { font-size: 0.6875rem; }
  .story__title { font-size: clamp(4.2rem, 9vw, 7rem); }
  .story__cta-text .eyebrow { font-size: 0.6875rem; }
}

/* Desktop: the photo is a portrait crop, so the subject (face + watch) stays on the left and the
   words stack in a column on the right, over the wall. Nothing sits on the subject. */
@media (min-width: 990px) {
  .story { min-height: 92svh; }
  .story__body { align-self: flex-end; width: min(26%, 400px); min-width: 330px; gap: 44px; }
  .story__title { font-size: clamp(4.2rem, 6.4vw, 7.5rem); }
  .story__cta { flex-direction: row; align-items: center; justify-content: flex-end; gap: 26px; }
  .story__cta-text { width: auto; grid-auto-flow: column; align-items: center; gap: 16px; }
  .story__rule:last-child { display: block; width: 40px; }
  .story__play { width: 76px; height: 76px; }
}

/* Compact heading variant (longer headlines) + supporting paragraph */
.story__text { max-width: 46ch; font-size: 0.9375rem; line-height: 1.65; color: var(--c-on-dark); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75); }
.story--compact .story__title { font-size: clamp(1.4rem, 6vw, 2.1rem); line-height: 1.08; letter-spacing: 0.04em; }
.story--compact .story__word { display: inline; }
.story--compact .story__line + .story__line { margin-top: 0.4em; }
.story--compact .story__body { gap: clamp(18px, 3vh, 28px); }
@media (min-width: 750px) {
  .story--compact .story__title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
  .story__text { font-size: 1rem; }
}
@media (min-width: 990px) {
  .story--compact .story__body { width: min(36%, 560px); min-width: 400px; }
  .story--compact .story__title { font-size: clamp(1.8rem, 2.4vw, 2.8rem); }
}

/* Desktop / tablet: the video behind the words has bright moments, so the heading and paragraph sit on a dark panel
   that keeps them readable on every frame. (On phones the words already sit on black above the video.) */
@media (min-width: 750px) {
  .story--compact .story__body {
    padding: clamp(22px, 2.4vw, 40px); background: rgba(11, 9, 7, 0.78);
    border: 1px solid rgba(208, 176, 122, 0.28); border-radius: 4px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .story--compact .story__title, .story--compact .story__text { text-shadow: none; }
  .story--compact .story__text { color: var(--c-ivory, #f3ecdf); }
}

/* Founder legacy: text block sits at the very bottom of the photo. */
.story--compact .story__inner { padding-bottom: clamp(24px, 4.5vh, 44px); }

/* Heading in gold */
.story__title { color: var(--c-champagne); }

/* Empty video frame (until a background video is added): same look as the hero's, no image, no art on the live store */
.story .media-ph--hero { gap: 12px; text-align: center; padding-inline: 24px; }
.story .media-ph--hero .icon { width: 64px; height: 64px; stroke-width: 0.8; }
.story .media-ph__hint { font-size: 0.75rem; letter-spacing: 0.04em; color: rgba(233, 224, 211, 0.3); }

/* Desktop: video and words side by side. The video is shown whole (nothing on top of it) and the words sit on the black
   beside it, so both are always readable. Phones and tablets keep their own layouts above. */
@media (min-width: 990px) {
  .story--compact {
    display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 4.5vw, 84px);
    min-height: 0; max-height: none; padding: clamp(48px, 6vw, 96px) max(var(--gutter), calc((100vw - 1400px) / 2));
  }
  .story--compact .story__media { position: relative; inset: auto; grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; border-radius: clamp(16px, 1.8vw, 26px); box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(208, 176, 122, 0.22); }
  .story--compact .story__inner { display: contents; }
  .story--compact .story__side { display: none; }
  .story--compact .story__body { grid-column: 2; grid-row: 1; align-self: center; width: auto; min-width: 0; padding: 0; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; gap: clamp(18px, 2.4vw, 30px); }
  .story--compact .story__body::before { content: ''; display: block; width: 44px; height: 2px; background: var(--c-champagne); }
  .story--compact .story__title { font-size: clamp(2rem, 3.3vw, 3.4rem); line-height: 1.08; letter-spacing: 0.02em; }
  .story--compact .story__word { display: inline; }
  .story--compact .story__text { max-width: 38ch; font-size: clamp(1rem, 1.15vw, 1.1875rem); line-height: 1.7; }
}
