/* Home scroll story (English): a hero and three numbered chapters with drifting painted postcards and a butterfly that flies to a new spot in each chapter. */
html.ss-on .st-hero, html.ss-on .hv { display: none !important; }
html:not(.ss-on) .ss { display: none; }
.ss { --ink: #16202C; --muted: #5E6672; --teal: #145C63; position: relative; font-family: Inter, system-ui, sans-serif; color: var(--ink); }
.ss section { position: relative; overflow: hidden; border-radius: 28px; margin: 0 0 12px; height: 86svh; min-height: 520px; max-height: 900px; }
.ss-hero { height: 92svh !important; background: radial-gradient(60% 50% at 18% 78%, rgba(240,170,60,.30), transparent 70%), radial-gradient(50% 50% at 86% 20%, rgba(214,69,122,.18), transparent 70%), linear-gradient(180deg, #FFF4E2 0%, #FCE6D6 58%, #F3E6F6 100%); }
.ss-s1 { background: linear-gradient(180deg, #F6F1E6 0%, #F1ECE0 100%); }
.ss-s2 { background: radial-gradient(70% 60% at 80% 85%, rgba(214,69,122,.30), transparent 70%), linear-gradient(160deg, #0E3F4B 0%, #14283F 100%); color: #fff; }
.ss-s3 { background: linear-gradient(180deg, #FBEFE0 0%, #F6F1E6 100%); }
.ss-end { height: 62svh !important; min-height: 420px !important; background: linear-gradient(180deg, #F6F1E6 0%, #F0E6DA 100%); }
.ss-art { position: absolute; pointer-events: none; user-select: none; will-change: transform; margin: 0; padding: 6px; border-radius: 22px; background: #fff; box-shadow: 0 24px 50px rgba(60,30,40,.22); }
.ss-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 17px; }
.ss h1 { position: absolute; left: 0; right: 0; top: 14vh; margin: 0; text-align: center; font: 600 clamp(38px, 4.8vw, 84px)/1.05 Fraunces, Georgia, serif; letter-spacing: -.025em; color: var(--ink); will-change: transform; z-index: 2; padding: 0 16px; }
.ss h1 .line { display: block; overflow: hidden; padding-bottom: .08em; }
.ss h1 .line span { display: inline-block; transform: translateY(112%); }
.ss h1 em { font-style: italic; color: #C2410C; }
.ss-loaded h1 .line span { animation: ssrise 1.1s cubic-bezier(.2,.8,.15,1) forwards; }
.ss-loaded h1 .line:nth-child(2) span { animation-delay: .12s; }
@keyframes ssrise { to { transform: none; } }
.ss-side { position: absolute; right: clamp(24px, 6.5vw, 120px); top: 62%; width: min(280px, 80vw); z-index: 2; opacity: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.ss-loaded .ss-side { animation: ssfade 1s .7s ease forwards; }
@keyframes ssfade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ss-side p { margin: 0; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.4; color: var(--muted); }
.ss-join { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 0; background: none; border: 0; font: 600 clamp(15px, 1.3vw, 18px)/1 Inter, system-ui, sans-serif; color: inherit; cursor: pointer; text-decoration: none; }
.ss-join i { width: 26px; height: 34px; border: 1.8px solid currentColor; border-radius: 10px; display: grid; place-items: center; transition: transform .35s ease; }
.ss-join:hover i, .ss-join:focus-visible i { transform: translateX(4px); }
.ss-skip { position: absolute; z-index: 3; top: 18px; left: 20px; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.08); font: 500 13px/1 Inter, system-ui, sans-serif; color: var(--ink); cursor: pointer; }
.ss-skip:hover { background: #fff; }
.ss-num { font: 600 clamp(110px, 15vw, 240px)/.8 Fraunces, Georgia, serif; letter-spacing: -.05em; color: #EBD6AC; }
.ss-s2 .ss-num { color: rgba(246,185,91,.45); }
.ss-title { margin: 0; font: 600 clamp(30px, 3.4vw, 56px)/1.1 Fraunces, Georgia, serif; letter-spacing: -.015em; }
.ss-copy { margin: 20px 0 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.6; color: var(--muted); max-width: 430px; }
.ss-s2 .ss-copy { color: rgba(255,244,224,.84); }
.ss-text { position: absolute; z-index: 2; }
.ss-s1 .ss-num { position: absolute; left: 6vw; top: 48%; }
.ss-s1 .ss-text { left: 50vw; top: 36%; width: min(520px, 44vw); }
.ss-s2 .ss-text { left: 6vw; top: 18%; width: min(500px, 46vw); }
.ss-s2 .ss-title { margin-top: 20px; }
.ss-s3 .ss-text { left: 54vw; top: 22%; width: min(500px, 40vw); }
.ss-s3 .ss-title { margin-top: 22px; }
.ss-end .ss-cta { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); text-align: center; width: min(640px, 90%); }
.ss-end .ss-title { font-size: clamp(30px, 3.6vw, 60px); }
.ss-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.ss-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; border: 0; background: var(--teal); color: #fff; font: 600 16px/1 Inter, system-ui, sans-serif; cursor: pointer; text-decoration: none; transition: transform .2s, background .2s; }
.ss-btn:hover { transform: translateY(-2px); background: #11707F; }
.ss-btn.g { background: #F0EEE6; color: var(--ink); }
.ss-btn.g:hover { background: #E8E4D8; }
.ss .rv { opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.15,1); }
.ss .in .rv { opacity: 1; transform: none; }
.ss .in .rv.d1 { transition-delay: .1s; } .ss .in .rv.d2 { transition-delay: .22s; } .ss .in .rv.d3 { transition-delay: .34s; }
.ss-bf { position: fixed; display: block; left: 0; top: 0; z-index: 15; pointer-events: none; opacity: 0; transition: opacity .6s ease; will-change: transform; filter: drop-shadow(0 14px 16px rgba(70,20,60,.28)); }
.ss-bf.on { opacity: 1; }
.ss-bf svg { display: block; width: 100%; height: 100%; overflow: visible; }
html.ss-fly .c3d-stage { opacity: 0; }
@media (max-width: 760px) {
  .ss section { border-radius: 22px; height: 80svh; min-height: 480px; }
  .ss-hero { height: 88svh !important; }
  .ss h1 { top: 10vh; font-size: clamp(30px, 8.4vw, 40px); }
  .ss-side { top: auto; bottom: 120px; right: 18px; left: 22px; width: auto; }
  .ss-num { font-size: 84px; }
  .ss-side { gap: 12px; }
  .ss-join { align-self: flex-start; padding: 7px 18px 7px 8px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 6px 18px rgba(60,30,40,.14); }
  .ss-s1 .ss-num { top: 8%; left: auto; right: 6vw; }
  .ss-s1 .ss-text, .ss-s3 .ss-text { left: 22px; right: 18px; width: auto; top: auto; bottom: 120px; }
  .ss-s2 .ss-text { left: 22px; right: 18px; width: auto; top: 12%; }
  .ss-end .ss-cta { top: 20%; }
  .ss-skip { top: 12px; left: 12px; }
}
@media (prefers-reduced-motion: reduce) { .ss h1 .line span { transform: none; animation: none !important; } .ss-side, .ss .rv { opacity: 1; transform: none; transition: none; animation: none !important; } .ss-bf { display: none; } }