/* Cinematic layer. Original artwork, palette, type, routes and form IDs remain.
   Static reading is the default; native-scroll enhancement is opt-in through JS. */
@view-transition { navigation: none; }
.story-skip {
  position: fixed; z-index: 2000; top: 12px; left: 12px;
  padding: 14px 20px; background: #fffaf0; color: #07151b;
  border: 2px solid #c8a66a; border-radius: 8px; transform: translateY(-160%);
}
.story-skip:focus { transform: none; }
.story-motion-control {
  position: fixed; bottom: 18px; left: 20px; z-index: 1400;
  min-height: 40px; padding: 10px 15px; border: 1px solid rgba(200,166,106,.45);
  border-radius: 999px; background: #10272d; color: #fffaf0;
  font: 600 11px/1.2 Inter, system-ui, sans-serif; cursor: pointer;
  box-shadow: 0 4px 20px rgba(7,21,27,.12);
}
.story-motion-control:disabled { cursor: default; }
.story-opening { background: var(--cream); }
[data-story-surface="sales"] { overflow-x: clip; }
[data-story-surface="sales"] .hero { min-height: 820px; min-height: 100svh; }
[data-story-surface="sales"] .hero h1 {
  max-width: 10ch; margin: 18px 0 24px;
  font-size: clamp(4rem, 6.7vw, 7.3rem); line-height: .98; letter-spacing: -.065em;
}
[data-story-surface="sales"] .hero-content {
  padding-block: 145px 125px; width: min(100% - 8rem, 1320px);
}
[data-story-surface="sales"] .hero-subtitle { max-width: 47ch; font-size: 1rem; line-height: 1.75; }
[data-story-surface="sales"] .hero-cta { margin-top: 26px; }
[data-story-surface="sales"] .hero-phone-stage {
  right: 9%; top: 26%; width: 30%; max-width: 410px; height: min(62svh, 590px);
  z-index: 2; opacity: 1;
}
[data-story-surface="sales"] .hero-video-phone { width: 250px; margin-inline: auto; }
[data-story-surface="sales"] .hero-seal-card { left: -3%; top: -40px; }
[data-story-surface="sales"] .hero-detail { left: auto; right: -4%; bottom: 32px; width: 215px; }
.hero-story-footer {
  position: absolute; bottom: 27px; left: 5%; right: 5%; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 20px; border-top: 1px solid rgba(255,250,240,.23);
  color: rgba(255,250,240,.72); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.hero-story-footer a { text-decoration: none; padding-block: 8px; }
.hero-story-footer a span { margin-left: 18px; color: var(--gold); }
.story-chapters {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 22px; border-bottom: 1px solid var(--line);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.story-chapters > span { color: var(--muted); }
.story-chapters div { display: flex; gap: 34px; }
.story-chapters a { text-decoration: none; padding-block: 10px; }
.story-chapters a span { margin-right: 8px; color: var(--red); }
.story-chapters a[aria-current] { color: var(--red); }
[data-story-surface="sales"] .family-story { padding-block: 110px; }
[data-story-surface="sales"] .family-story-media,
[data-story-surface="sales"] .family-story-media img { min-height: 540px; }
[data-story-surface="sales"] .film-layout { grid-template-columns: 1fr .8fr; }
[data-story-surface="sales"] .film-copy h2 { font-size: clamp(3.2rem, 5vw, 5.8rem); }
[data-story-surface="sales"] .film-portrait { margin-block: 0; }
[data-story-surface="sales"] .membership { border-top: 1px solid rgba(200,166,106,.3); }
[data-story-surface="sales"] .proof-badge strong { font-size: 2.15rem; }
.story-static-note { margin: 0; padding: 16px 24px; color: #fffaf0; background: #10272d; font: 500 13px/1.6 Inter, sans-serif; }
.story-chapter-index { margin: 0 0 30px; color: var(--gold); font: 700 10px/1.4 var(--font-body); letter-spacing: .15em; text-transform: uppercase; }
[data-story-surface="sales"] .hero-eyebrow { color: #dec998; letter-spacing: .16em; font-size: 10px; }

/* One opening hold, followed by the existing natural-flow story and card stack. */
@media (min-width: 1060px) and (min-height: 800px) {
  html[data-story-motion="on"] .story-opening { height: 155svh; }
  html[data-story-motion="on"] .story-opening > .hero {
    position: sticky; top: 0; height: 100svh; min-height: 0;
    margin-inline: var(--story-inset, 0px); border-radius: var(--story-radius, 0px);
  }
  html[data-story-motion="on"] .story-opening .hero-phone-stage {
    translate: 0 var(--story-lift, 0px);
  }
  html[data-story-motion="on"] [data-story-pass] .family-story-media img,
  html[data-story-motion="on"] [data-story-pass] .film-portrait img {
    transform: translateY(var(--story-drift, 0px)) scale(1.025);
  }
}
@media (min-width: 1060px) and (max-height: 850px) {
  [data-story-surface="sales"] .hero-content { padding-block: 125px 90px; }
  [data-story-surface="sales"] .hero h1 { font-size: clamp(3.6rem, 5.4vw, 5.8rem); }
}

/* The workspace gets the same visual language without pinned forms or tasks. */
.workspace-masthead {
  display: flex; gap: 12px; align-items: center; margin: 0 0 22px;
  color: #71675f; font-size: 11px; letter-spacing: .04em;
}
.workspace-masthead a { color: #174f3c; text-decoration: none; font-weight: 700; }
[data-story-surface="workspace"] main { padding-bottom: 88px; }
[data-story-surface="workspace"] .page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 338px; padding: clamp(28px, 4vw, 50px);
  border: 1px solid rgba(215,170,81,.3); border-radius: 24px;
  background: radial-gradient(ellipse at 20% 0, rgba(215,170,81,.1), transparent 60%), #0b2942;
  color: #fffaf0; box-shadow: 0 18px 45px rgba(7,26,44,.13);
}
[data-story-surface="workspace"] .page-hero > div { position: relative; z-index: 2; min-width: 0; }
[data-story-surface="workspace"] .page-hero::before {
  z-index: 1; background: linear-gradient(90deg, #0b2942 3%, rgba(11,41,66,.9) 35%, rgba(11,41,66,.08) 78%);
}
[data-story-surface="workspace"] .page-hero::after { display: none; }
[data-story-surface="workspace"] .page-hero .eyebrow { color: #e2bd70; }
[data-story-surface="workspace"] .page-hero h1 {
  max-width: 14ch; font-size: clamp(2.8rem, 4vw, 4.6rem); line-height: 1.02;
}
[data-story-surface="workspace"] .page-hero p:not(.eyebrow) { color: #d2d9d8; max-width: 48ch; }
[data-story-surface="workspace"] .page-hero > img {
  position: absolute; z-index: 0; inset: 0 0 0 auto; width: 58%; height: 100%;
  object-fit: cover; border: 0; border-radius: 0; box-shadow: none;
  transform: none; filter: none;
}
[data-story-surface="workspace"] .page-hero .ghost-button {
  border-color: rgba(255,250,240,.4); color: #fffaf0; background: transparent;
}
[data-story-surface="workspace"] .page-hero .ghost-button:hover { background: rgba(255,250,240,.08); }
[data-story-surface="workspace"] .flow-strip {
  gap: 0; margin-block: 30px; padding-block: 22px;
  border-block: 1px solid rgba(47,35,28,.16);
}
[data-story-surface="workspace"] .flow-strip > article {
  min-height: 0; padding: 10px 24px; border: 0; border-right: 1px solid rgba(47,35,28,.13);
  border-radius: 0; background: transparent; box-shadow: none;
}
[data-story-surface="workspace"] .flow-strip > article:last-child { border-right: 0; }
[data-story-surface="workspace"] .flow-strip > article::after { display: none; }
[data-story-surface="workspace"] .flow-strip p { max-width: 23ch; font-size: .84rem; }
[data-story-surface="workspace"] .flow-strip > article > span {
  background: transparent; color: #9d762e; font-family: Fraunces, Georgia, serif;
  font-size: 25px; width: auto; height: auto; justify-content: flex-start;
}
[data-story-surface="workspace"] .primary-action {
  background: linear-gradient(130deg, #9f1a29, #74151f); color: #fffaf0;
  border-color: rgba(116,21,31,.2);
}
[data-story-surface="workspace"] .primary-action .eyebrow,
[data-story-surface="workspace"] .primary-action p { color: #f2dedb; }
[data-story-surface="workspace"] .primary-action .primary-button { background: #fffaf0; color: #74151f; box-shadow: none; }
[data-story-surface="workspace"] .story-motion-control {
  position: static; flex: 0 0 auto; margin-left: auto; min-height: 32px;
  padding: 8px 12px; color: #174f3c; background: transparent; box-shadow: none;
}
.workspace-masthead > [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-story-motion="on"] [data-story-surface="workspace"] .wizard-step.active {
  animation: story-step-in 320ms cubic-bezier(.16,1,.3,1) both;
}
html[data-story-motion="on"] [data-story-surface="workspace"] .page-hero > div {
  animation: story-step-in 500ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes story-step-in { from { opacity: .3; transform: translateY(9px); } to { opacity: 1; transform: none; } }

@media (max-width: 1050px) {
  html:has([data-story-surface="workspace"]) { scroll-padding-top: 165px; }
  [data-story-surface="workspace"] .story-motion-control { left: 16px; }
  .story-opening { height: auto; }
  [data-story-surface="sales"] .hero-content { width: calc(100% - 3rem); padding-block: 150px 100px; }
  [data-story-surface="sales"] .hero h1 { font-size: clamp(3.4rem, 7.6vw, 5.8rem); }
  [data-story-surface="sales"] .hero-phone-stage { right: 5%; width: 34%; top: 31%; }
  [data-story-surface="sales"] .hero-video-phone { width: 220px; }
  [data-story-surface="sales"] .hero-detail { display: none; }
}
@media (max-width: 820px) {
  [data-story-surface="sales"] .hero { display: block; min-height: 0; padding-bottom: 98px; }
  [data-story-surface="sales"] .hero-content { padding-block: 135px 35px; }
  [data-story-surface="sales"] .hero h1 { max-width: 11ch; font-size: clamp(3.3rem, 12vw, 5.7rem); }
  [data-story-surface="sales"] .hero-subtitle { max-width: 44ch; font-size: .94rem; }
  [data-story-surface="sales"] .hero-phone-stage {
    position: relative; inset: auto; width: min(80%, 330px); max-width: none;
    margin: 25px auto 0; height: auto; min-height: 0; transform: none;
  }
  [data-story-surface="sales"] .hero-video-phone { position: relative; inset: auto; width: 210px; }
  [data-story-surface="sales"] .hero-seal-card { width: 100px; top: 10px; left: -2%; }
  .hero-story-footer { font-size: 9px; gap: 10px; left: 24px; right: 24px; }
  .hero-story-footer > span { max-width: 16ch; text-align: right; }
  .story-chapters { padding-block: 14px; }
  .story-chapters > span { display: none; }
  .story-chapters div { width: 100%; justify-content: space-between; gap: 8px; }
  .story-chapters a { font-size: 9px; letter-spacing: 0; }
  [data-story-surface="sales"] .family-story { padding-block: 70px; }
  [data-story-surface="sales"] .family-story-media,
  [data-story-surface="sales"] .family-story-media img { min-height: 420px; }
  [data-story-surface="sales"] .film-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .workspace-masthead { margin-block: 8px 18px; }
  [data-story-surface="workspace"] .page-hero { display: block; min-height: 390px; padding: 30px 25px 110px; }
  [data-story-surface="workspace"] .page-hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); }
  [data-story-surface="workspace"] .page-hero > img { width: 100%; height: 100%; opacity: .5; object-position: 70% center; }
  [data-story-surface="workspace"] .page-hero::before {
    background: linear-gradient(180deg, #0b2942 0%, rgba(11,41,66,.92) 40%, rgba(11,41,66,.14) 100%);
  }
  [data-story-surface="workspace"] .flow-strip { grid-template-columns: 1fr 1fr; padding-block: 12px; }
  [data-story-surface="workspace"] .flow-strip > article { padding: 14px; }
  [data-story-surface="workspace"] .flow-strip > article:nth-child(2) { border-right: 0; }
  [data-story-surface="workspace"] .page-hero .hero-actions { flex-wrap: wrap; }
  .workspace-masthead { gap: 8px; font-size: 10px; }
  [data-story-surface="workspace"] .story-motion-control { padding: 7px 9px; font-size: 10px; }
  .story-motion-control { bottom: 12px; font-size: 10px; min-height: 36px; padding: 9px 12px; }
}

/* A complete static composition for system preference, user pause and no JS. */
html:not([data-story-motion="on"]) .moment-card { position: relative; top: auto; margin-bottom: 28px; }
html:not([data-story-motion="on"]) .moments-intro { position: relative; top: auto; }
html[data-story-motion="off"] { scroll-behavior: auto; }
html[data-story-motion="off"] *,
html[data-story-motion="off"] *::before,
html[data-story-motion="off"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-story-motion="off"] [data-reveal],
html[data-story-motion="off"] [data-reveal-stagger] > *,
html[data-story-motion="off"] [data-motion-reveal],
html[data-story-motion="off"] .hero h1 .word,
html[data-story-motion="off"] .hero-eyebrow,
html[data-story-motion="off"] .hero-subtitle,
html[data-story-motion="off"] .hero-cta,
html[data-story-motion="off"] .hero-phone-stage { opacity: 1 !important; filter: none !important; transform: none !important; }
html[data-story-motion="off"] .site-header { opacity: 1 !important; transform: translateX(-50%) !important; }
@media (prefers-reduced-motion: reduce) {
  .story-opening { height: auto !important; }
  .story-opening > .hero { position: relative !important; margin-inline: 0 !important; border-radius: 0 !important; }
}