/* Vonduri · story pages (Before, During, After). Each page has its own ground and light:
   Before = morning paper, During = dusk and full-bleed photos, After = warm paper with grain. */

/* ---------- shared ---------- */
.story{--ink:#1C1F24;--paper:#F2EEE7;--sea:#74ADB0;--sea-text:#356466;--sea-deep:#24393B;--muted:#5C636E;--line:#DED8CD;font-family:-apple-system,system-ui,sans-serif;color:var(--ink)}
.story .serif{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-weight:400}
.story .k{font:600 13px/18px -apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--sea-text);margin:0}
.story .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.story h2.big{font-size:56px;line-height:60px;letter-spacing:-.6px;margin:14px 0 18px;text-wrap:balance}
.story .lede{font-size:20px;line-height:31px;color:var(--muted);margin:0;max-width:34em}
.story section{position:relative}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.tab{font-variant-numeric:tabular-nums}

/* light header for paper pages */
.hdr.light{position:relative;z-index:6}
.hdr.light .nav{background:rgba(255,255,255,.72);border:1px solid rgba(28,31,36,.1);box-shadow:0 8px 32px rgba(28,31,36,.08);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.site .hdr.light .nav .brand{color:#1C1F24}
.site .hdr.light .nav .links a{color:#3A4452}
.site .hdr.light .nav .links a[aria-current="page"]{color:#1C1F24}
.site .hdr.light .nav .btn{background:#3A4452;color:#FBF9F5}
.hdr.light .menu-btn{color:#1C1F24;border-color:rgba(28,31,36,.2);background:rgba(255,255,255,.6)}

/* phone frame */
.phone{width:300px;height:620px;border-radius:52px;background:#0B0C0E;padding:10px;box-shadow:0 30px 80px rgba(28,31,36,.28),inset 0 0 0 2px #2A2E35;box-sizing:border-box;flex:none}
.phone .scr{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#FFFFFF}
.phone .island{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#0B0C0E;z-index:5}

/* ---------- BEFORE · morning ---------- */
.before{background:var(--paper)}
.before .grain,.after .grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply}
.b-hero{position:relative;overflow:hidden;padding:24px 0 96px;isolation:isolate}
.b-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/contour-wide.svg) center/cover;opacity:.07;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 40% 50%,transparent 35%,#000 100%);mask-image:radial-gradient(ellipse 60% 70% at 40% 50%,transparent 35%,#000 100%)}
.b-hero .grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center;padding-top:56px}
.count{display:flex;align-items:baseline;gap:18px;margin:6px 0 4px}
.count .num{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-size:168px;line-height:.9;letter-spacing:-4px;color:var(--ink);display:inline-flex;overflow:hidden;height:152px}
.count .digit{display:inline-block;height:152px;overflow:hidden}
.count .digit span{display:block;transition:transform 1.4s cubic-bezier(.2,.75,.15,1)}
.count .unit{font-size:22px;line-height:28px;color:var(--muted)}
.count .unit b{display:block;color:var(--ink);font-weight:600}
.b-hero h1{font-size:60px;line-height:64px;letter-spacing:-.8px;margin:18px 0 18px;text-wrap:balance}
.b-arch{position:relative;justify-self:center;width:100%;max-width:440px}
.b-arch img{width:100%;height:560px;object-fit:cover;border-radius:999px 999px 28px 28px;display:block;box-shadow:0 30px 60px rgba(28,31,36,.18)}
.b-arch .glass-card{position:absolute;left:-28px;bottom:36px;width:250px;border-radius:22px;padding:16px 18px;background:rgba(255,255,255,.78);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px rgba(28,31,36,.16)}
.bars5{display:flex;gap:5px}.bars5 span{flex:1;height:7px;border-radius:999px;background:#E2DCD1;transition:background .5s}.bars5 span.on{background:var(--sea)}

/* steps: sticky phone story */
.steps{padding:64px 0 40px;background:#FFFFFF;border-radius:32px 32px 0 0;position:relative;z-index:2;box-shadow:0 -12px 40px rgba(28,31,36,.06)}
.steps .head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap;margin-bottom:24px}
.steps .bar-wrap{position:sticky;top:0;z-index:4;background:linear-gradient(#FFF 70%,rgba(255,255,255,0));padding:18px 0 22px}
.steps .bar-wrap .row{display:flex;align-items:center;gap:18px}
.steps .bar-wrap .bars5{flex:1;max-width:520px}
.steps .bar-wrap .lbl{font-size:14px;color:var(--muted);white-space:nowrap}
.story-grid{display:grid;grid-template-columns:1fr 340px;gap:72px}
.step-list{position:relative;padding-left:44px}
.route-v{position:absolute;left:10px;top:12px;bottom:12px;width:3px}
.route-v .dots{position:absolute;inset:0;background:radial-gradient(circle,#9AA3AD 1.3px,transparent 1.6px) center top/3px 10px repeat-y}
.route-v .lit{position:absolute;left:0;right:0;top:0;height:0;background:var(--sea);border-radius:2px}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;position:relative}
.step .pin{position:absolute;left:-41px;top:calc(50% - 10px);width:20px;height:20px;border-radius:50%;background:#FFF;border:2px solid #9AA3AD;box-sizing:border-box;transition:all .4s}
.step.active .pin,.step.done .pin{border-color:var(--sea-text);background:var(--sea)}
.step .n{font:600 13px/18px -apple-system,system-ui;letter-spacing:.08em;color:var(--sea-text)}
.step h3{font-size:40px;line-height:44px;margin:10px 0 12px;letter-spacing:-.4px}
.step q{display:block;quotes:none;font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-style:italic;font-size:22px;line-height:28px;color:var(--ink);margin:0 0 12px}
.step p{font-size:17px;line-height:27px;color:var(--muted);margin:0;max-width:32em}
.step .inline-phone{display:none}
.phone-col{position:relative}
.phone-sticky{position:sticky;top:110px;height:640px;display:flex;justify-content:center}
.phone .scr .sc{position:absolute;inset:0;padding:54px 16px 16px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none;background:#FFF}
.phone .scr .sc.on{opacity:1;transform:none}
.sc .t{font:700 22px/26px -apple-system,system-ui;margin:0 0 2px}
.sc .st{font-size:12px;color:var(--muted);margin:0 0 12px}
.sc .item{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:14px;margin-bottom:8px;font-size:13px;line-height:17px;background:#FFF;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.sc .item .ic{width:34px;height:34px;border-radius:10px;background:var(--paper);display:grid;place-items:center;flex:none;font-size:15px}
.sc .item b{display:block;font-size:13px}
.sc .item .tag{margin-left:auto;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:#FBF3E6;color:#7F5C25;flex:none}
.sc .item .tag.ok{background:#E6F0EE;color:var(--sea-text)}
.sc .trip{border-radius:18px;overflow:hidden;position:relative;height:120px;margin-bottom:12px}
.sc .trip img{width:100%;height:100%;object-fit:cover}
.sc .trip div{position:absolute;left:12px;bottom:10px;color:#FFF;font:600 15px/18px -apple-system,system-ui;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.sc .chk{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13px}
.sc .chk i{width:18px;height:18px;border-radius:6px;border:1.5px solid #7D8590;flex:none;display:grid;place-items:center;font-style:normal;font-size:11px;color:#FFF}
.sc .chk.y i{background:var(--sea-text);border-color:var(--sea-text)}
.sc .chk.y span{color:var(--muted);text-decoration:line-through}
.sc .grp{font:600 11px/14px -apple-system,system-ui;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:12px 0 2px}
.sc .deep{background:var(--sea-deep);color:#F2EEE7;border-radius:18px;padding:14px;margin-bottom:10px}
.sc .jl{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;font-size:12px;margin:7px 0}
.sc .jl .track{position:relative;height:12px;border-radius:6px;background:#E9E4DA}
.sc .jl .sleep{position:absolute;top:0;bottom:0;border-radius:6px;background:#3A4452}
.sc .jl .sun{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--sea)}
.sc .days{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sc .day{border-radius:14px;overflow:hidden;position:relative;height:92px}
.sc .day img{width:100%;height:100%;object-fit:cover}
.sc .day span{position:absolute;left:8px;bottom:6px;color:#FFF;font:600 12px/14px -apple-system,system-ui;text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* unfolding day cards */
.unfold{border:1px solid var(--line);border-radius:22px;background:#FFF;overflow:hidden;margin-bottom:12px;box-shadow:0 1px 2px rgba(28,26,23,.05)}
.unfold summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;padding:12px 18px 12px 12px;min-height:96px}
.unfold summary::-webkit-details-marker{display:none}
.unfold summary img{width:120px;height:80px;object-fit:cover;border-radius:14px}
.unfold summary .d{font:600 12px/16px -apple-system,system-ui;letter-spacing:.08em;text-transform:uppercase;color:var(--sea-text)}
.unfold summary .h{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-size:24px;line-height:29px;display:block;margin-top:4px}
.unfold summary .chev{width:36px;height:36px;border-radius:50%;background:var(--paper);display:grid;place-items:center;transition:transform .4s}
.unfold[open] summary .chev{transform:rotate(180deg)}
.unfold .body{padding:4px 22px 20px 150px;font-size:15px;line-height:23px;color:var(--muted)}
.unfold .stop{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.unfold .stop b{color:var(--ink);font-weight:600}
.unfold .more{margin-top:10px;font-size:14px;color:var(--sea-text);font-weight:600}
.unfold[open] .body{animation:unfold .5s cubic-bezier(.2,.7,.2,1)}
@keyframes unfold{from{opacity:0;transform:perspective(600px) rotateX(-12deg);transform-origin:top}to{opacity:1;transform:none}}

/* ---------- DURING · dusk ---------- */
.during{background:#101215;color:#F2EEE7}
.during .k{color:#96D0D3}
.during .lede{color:rgba(242,238,231,.78)}
.d-hero{position:relative;height:100vh;min-height:640px;max-height:960px;overflow:hidden}
.d-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:slowzoom 18s ease-out forwards}
@keyframes slowzoom{to{transform:scale(1)}}
.d-hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,21,.5),rgba(16,18,21,0) 25%,rgba(16,18,21,0) 45%,rgba(16,18,21,.92))}
.d-hero .copy{position:absolute;left:0;right:0;bottom:80px}
.d-hero h1{font-size:84px;line-height:86px;letter-spacing:-1.2px;margin:16px 0 18px;max-width:880px;color:#FFF;text-wrap:balance}
.d-hero .live{position:absolute;right:32px;top:120px;width:260px;border-radius:22px;padding:14px 16px}
.daywrap{position:relative;height:420vh}
.day-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;transition:background-color .2s}
.day-top{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 32px;max-width:1200px;margin:0 auto 28px;width:100%;box-sizing:border-box}
.day-top h2{font-size:48px;line-height:52px;margin:10px 0 0;color:#FFF}
.tick-strip{display:flex;gap:6px;align-items:center}
.tick-strip span{width:46px;height:6px;border-radius:999px;background:rgba(242,238,231,.2);transition:background .4s}
.tick-strip span.on{background:var(--sea)}
.strip{display:flex;gap:28px;padding:0 calc(50vw - 260px);will-change:transform}
.moment{flex:none;width:520px;height:62vh;max-height:600px;border-radius:30px;overflow:hidden;position:relative;background:#1C1F24;box-shadow:0 30px 60px rgba(0,0,0,.45)}
.moment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.moment .scr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.75))}
.moment .tm{position:absolute;left:22px;top:20px;font:700 30px/34px ui-rounded,-apple-system,system-ui;color:#FFF;font-variant-numeric:tabular-nums}
.moment .pl{position:absolute;left:22px;right:22px;bottom:22px}
.moment .pl h3{font-size:32px;line-height:36px;margin:0 0 6px;color:#FFF}
.moment .pl p{margin:0;font-size:15px;line-height:22px;color:rgba(242,238,231,.85)}
.moment.dusk{background:linear-gradient(170deg,#3A4452 0%,#8C5A4A 55%,#E2A26B 100%)}
.moment.dusk .q{position:absolute;left:30px;right:30px;top:50%;transform:translateY(-50%);font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-style:italic;font-size:34px;line-height:42px;color:#FFF}
.capture{padding:120px 0}
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.ctile{border-radius:26px;padding:28px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;background:#1C1F24;border:1px solid #2C3038}
.ctile h3{font-size:30px;line-height:34px;margin:0 0 8px;color:#FFF}
.ctile p{margin:0;color:rgba(242,238,231,.72);font-size:15px;line-height:23px}
.ctile.voice{background:var(--sea-deep);border-color:var(--sea-deep)}
.vbars{display:flex;align-items:center;gap:6px;height:64px}
.vbars span{width:10px;border-radius:6px;background:var(--sea);animation:vb 1.1s ease-in-out infinite}
.vbars span:nth-child(2){animation-delay:.15s}.vbars span:nth-child(3){animation-delay:.3s}.vbars span:nth-child(4){animation-delay:.45s}.vbars span:nth-child(5){animation-delay:.6s}
@keyframes vb{0%,100%{height:14px}50%{height:58px}}
.offline{padding:40px 0 120px}
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.toggle{display:inline-flex;align-items:center;gap:14px;min-height:56px;padding:0 20px 0 10px;border-radius:999px;border:1px solid #3A4452;background:#1C1F24;color:#F2EEE7;font:600 16px/1 -apple-system,system-ui;cursor:pointer;margin-top:26px}
.toggle .sw{width:52px;height:32px;border-radius:999px;background:#3A4452;position:relative;transition:background .3s}
.toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#FFF;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.toggle[aria-pressed="true"] .sw{background:var(--sea)}
.toggle[aria-pressed="true"] .sw::after{transform:translateX(20px)}
.pack{border-radius:28px;background:#FFF;color:var(--ink);padding:24px;box-shadow:0 30px 60px rgba(0,0,0,.4)}
.pack .status{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.pack .sig{display:inline-flex;gap:3px;align-items:end;height:14px}
.pack .sig i{width:4px;background:#1C1F24;border-radius:1px;transition:opacity .3s}
.pack .air{display:none;font-weight:600;color:var(--sea-text)}
.pack.off .sig{display:none}.pack.off .air{display:inline}
.pack .row{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:22px}
.pack .row:last-of-type{border-bottom:0}
.pack .row b{font-weight:600}
.pack .note{margin:14px 0 0;font-size:14px;color:var(--sea-text);min-height:20px}
.lock{padding:40px 0 120px}
.lock-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lockscreen{width:300px;height:620px;border-radius:52px;background:#0B0C0E;padding:10px;box-sizing:border-box;margin:0 auto;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lockscreen .scr{height:100%;border-radius:42px;overflow:hidden;position:relative;background:url(/assets/img/alfama.jpg) center/cover}
.lockscreen .scr::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.25)}
.lockscreen .clock{position:relative;text-align:center;color:#FFF;padding-top:70px;font:300 72px/1 -apple-system,system-ui}
.lockscreen .date{position:relative;text-align:center;color:#FFF;font:600 15px/20px -apple-system,system-ui;margin-top:6px}
.la{position:absolute;left:12px;right:12px;bottom:46px;border-radius:24px;padding:14px;background:rgba(28,31,36,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#F2EEE7}
.la .a,.la .b{transition:opacity .5s,transform .5s}
.la .b{position:absolute;left:14px;right:14px;top:14px;opacity:0;transform:translateY(8px)}
.la.done .a{opacity:0;transform:translateY(-8px)}.la.done .b{opacity:1;transform:none}
.la .t{font-size:12px;opacity:.75;display:flex;justify-content:space-between}
.la .p{font-weight:600;font-size:17px;margin:4px 0 6px}
.la .btns{display:flex;gap:8px;margin-top:10px}.la .btns span{flex:1;text-align:center;padding:8px 0;border-radius:12px;font-size:13px;font-weight:600;background:#F2EEE7;color:#1C1F24}.la .btns span+span{background:#2C3038;color:#F2EEE7;font-weight:400}
.vault{padding:0 0 120px}
.v-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vcard{border-radius:28px;padding:32px;background:#1C1F24;border:1px solid #2C3038;min-height:300px;position:relative;overflow:hidden}
.vcard h3{font-size:30px;line-height:34px;margin:12px 0 10px;color:#FFF}
.vcard p{margin:0;color:rgba(242,238,231,.72);font-size:16px;line-height:25px;max-width:30em}
.vcard svg.draw path{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2.4s ease}
.vcard.in svg.draw path{stroke-dashoffset:0}
.faceid{width:72px;height:72px;margin-top:26px;color:var(--sea)}

/* ---------- AFTER · warm paper ---------- */
.after{background:#F5F0E7}
.a-hero{position:relative;padding:24px 0 80px;overflow:hidden;text-align:center;isolation:isolate}
.fan{position:relative;height:430px;max-width:760px;margin:56px auto 0}
.fan img{position:absolute;left:50%;top:20px;width:260px;height:340px;object-fit:cover;border:10px solid #FFF;border-bottom-width:36px;border-radius:6px;box-shadow:0 22px 50px rgba(60,40,20,.22);transition:transform 1.4s cubic-bezier(.2,.75,.15,1);filter:sepia(.08) saturate(.94) contrast(.98)}
.fan img:nth-child(1){transform:translateX(-50%) rotate(-2deg)}
.fan img:nth-child(2){transform:translateX(-50%) rotate(1deg)}
.fan img:nth-child(3){transform:translateX(-50%) rotate(-1deg)}
.fan.open img:nth-child(1){transform:translateX(-118%) translateY(24px) rotate(-11deg)}
.fan.open img:nth-child(2){transform:translateX(-50%) rotate(1.5deg)}
.fan.open img:nth-child(3){transform:translateX(18%) translateY(24px) rotate(10deg)}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.pills span{padding:8px 14px;border-radius:999px;background:#FFF;border:1px solid var(--line);font-size:14px;opacity:0;transform:translateY(10px) scale(.9);transition:all .6s cubic-bezier(.3,1.4,.5,1)}
.pills.in span{opacity:1;transform:none}.pills.in span:nth-child(2){transition-delay:.12s}.pills.in span:nth-child(3){transition-delay:.24s}
.pills span b{color:var(--sea-text)}
.a-hero h1{font-size:68px;line-height:72px;letter-spacing:-1px;margin:16px auto 18px;max-width:820px;text-wrap:balance}
.a-hero .lede{margin:0 auto}
.reliv{position:relative;height:520vh;background:#1C1F24}
.reliv-sticky{position:sticky;top:0;height:100vh;overflow:hidden;color:#F2EEE7}
.reliv .ph{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.reliv .ph.on{opacity:1}
.reliv .ph img{width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.92);transform:scale(1.04);transition:transform 6s ease-out}
.reliv .ph.on img{transform:scale(1)}
.reliv .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,18,21,.55),rgba(16,18,21,.05) 30%,rgba(16,18,21,.1) 50%,rgba(16,18,21,.85))}
.segs{position:absolute;left:32px;right:32px;top:28px;display:flex;gap:6px;z-index:3;max-width:1200px;margin:0 auto}
.segs span{flex:1;height:4px;border-radius:999px;background:rgba(242,238,231,.3);overflow:hidden}
.segs span i{display:block;height:100%;width:0;background:#F2EEE7;transition:width .3s linear}
.reliv .cap{position:absolute;left:0;right:0;bottom:72px;z-index:3}
.reliv .cap .d{opacity:0;transform:translateY(16px);transition:all .7s;position:absolute;left:0;right:0;bottom:0}
.reliv .cap .d.on{opacity:1;transform:none;position:relative}
.reliv .cap h3{font-size:56px;line-height:58px;margin:10px 0 10px;color:#FFF;max-width:760px}
.reliv .cap p{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-style:italic;font-size:24px;line-height:32px;color:rgba(242,238,231,.9);margin:0;max-width:640px}
.wave{display:flex;gap:3px;align-items:center;height:28px;margin-top:16px}
.wave i{width:3px;border-radius:2px;background:rgba(242,238,231,.75)}
.route-sec{padding:120px 0}
.route-art{position:relative;max-width:980px;margin:48px auto 0}
.route-art svg{width:100%;height:auto;overflow:visible}
.route-art .path{stroke-dasharray:1400;stroke-dashoffset:1400}
.route-art .city{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-style:italic;font-size:30px;fill:#1C1F24}
.route-art .nights{font:600 13px -apple-system,system-ui;letter-spacing:.08em;fill:#356466;text-transform:uppercase}
.years{padding:40px 0 120px}
.yr{display:grid;grid-template-columns:140px 1fr;gap:40px;padding:40px 0;border-top:1px solid var(--line);align-items:center}
.yr .y{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-size:56px;line-height:1;color:#B7AE9F}
.yr .row{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center}
.yr img{width:100%;height:300px;object-fit:cover;border-radius:22px;display:block}
.yr h3{font-size:34px;line-height:38px;margin:0 0 10px}
.yr p{margin:0;font-size:17px;line-height:27px;color:var(--muted)}
.yr.y2 img{filter:sepia(.18) saturate(.85) contrast(.96)}
.yr.y3 img{filter:sepia(.32) saturate(.72) contrast(.94) brightness(1.02)}
.yr .told{margin-top:14px;display:inline-flex;gap:8px;align-items:center;font-size:14px;color:var(--sea-text);font-weight:600}
.voicecard{background:#1C1F24;color:#F2EEE7;border-radius:24px;padding:28px}
.voicecard .serif{font-size:24px;line-height:32px}
.pp{padding:40px 0 120px}
.pp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:36px 0 24px}
.pp-card{background:#FFF;border:1px solid var(--line);border-radius:24px;padding:24px}
.pp-card .big{font-family:ui-serif,"New York",Newsreader,Georgia,serif;font-size:40px;line-height:44px;margin:8px 0 14px}
.dots7{display:flex;gap:8px}.dots7 i{width:16px;height:16px;border-radius:50%;border:1.5px dashed #9AA3AD;box-sizing:border-box}.dots7 i.on{background:var(--sea);border:0}
.page{position:relative;border-radius:28px;background:#FFFDF8;border:1px solid var(--line);padding:48px 32px;display:grid;grid-template-columns:repeat(4,1fr);gap:36px 16px;justify-items:center;overflow:hidden;isolation:isolate}
.page::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/contour-tall.svg) center/cover;opacity:.08}
.pstamp{width:128px;height:128px;border-radius:50%;border:2.5px solid currentColor;display:grid;place-items:center;text-align:center;font:700 13px/16px -apple-system,system-ui;letter-spacing:.1em;background:rgba(255,253,248,.8);opacity:0;transform:scale(1.35) rotate(var(--r0,8deg))}
.pstamp span{display:block;font-weight:500;letter-spacing:0;font-size:13px;margin-top:4px;padding:0 10px}
.pstamp.rect{border-radius:12px;width:150px;height:106px}
.pstamp.dash{border-style:dashed;color:#7D8590}
.pstamp.land{animation:land .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes land{0%{opacity:0;transform:scale(1.35) rotate(var(--r0,8deg))}60%{opacity:1}100%{opacity:1;transform:scale(1) rotate(var(--r,-6deg))}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
 .b-hero .grid,.off-grid,.lock-grid,.v-grid,.pp-grid,.yr .row{grid-template-columns:1fr}
 .story-grid{grid-template-columns:1fr}
 .phone-col{display:none}
 .step{min-height:auto;padding:36px 0}
 .step .inline-phone{display:flex;justify-content:center;margin-top:24px}
 .step .inline-phone .phone{transform:scale(.86);transform-origin:top center;margin-bottom:-86px}
 .b-arch img{height:440px}
 .b-arch .glass-card{left:12px}
 .daywrap{height:auto}
 .day-sticky{position:relative;height:auto;padding:80px 0}
 .strip{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 16px 8px;transform:none!important;-webkit-overflow-scrolling:touch}
 .moment{width:82vw;height:60vh;scroll-snap-align:center}
 .cap-grid{grid-template-columns:1fr}
 .reliv{height:auto}
 .reliv-sticky{position:relative;height:auto}
 .reliv .ph{position:relative;opacity:1;height:72vh}
 .reliv .ph .mcap{position:absolute;left:20px;right:20px;bottom:28px;z-index:3}
 .reliv .cap,.segs{display:none}
 .page{grid-template-columns:repeat(2,1fr)}
 .yr{grid-template-columns:1fr;gap:12px}
}
@media (min-width:1001px){.reliv .ph .mcap{display:none}}
@media (max-width:640px){
 .story .wrap{padding:0 16px}
 .story h2.big{font-size:38px;line-height:42px}
 .count .num{font-size:120px;height:110px}.count .digit{height:110px}
 .b-hero h1,.a-hero h1{font-size:42px;line-height:46px}
 .d-hero h1{font-size:46px;line-height:50px}
 .d-hero .live{display:none}
 .day-top h2{font-size:34px;line-height:38px}
 .step h3{font-size:32px;line-height:36px}
 .fan{height:330px}.fan img{width:180px;height:240px;border-width:7px;border-bottom-width:26px}
 .reliv .ph .mcap h3{font-size:34px;line-height:38px}
 .unfold summary{grid-template-columns:72px 1fr auto;gap:12px}
 .unfold summary img{width:72px;height:64px}
 .unfold .body{padding:4px 18px 18px}
 .pstamp{width:108px;height:108px}.pstamp.rect{width:124px;height:92px}
 .tick-strip span{width:26px}
}
@media (prefers-reduced-motion:reduce){
 .reveal{opacity:1;transform:none;transition:none}
 .d-hero>img{animation:none;transform:none}
 .vbars span{animation:none;height:40px}
 .pstamp{opacity:1;transform:rotate(var(--r,-6deg))}
 .route-art .path{stroke-dashoffset:0!important}
 .fan img{transition:none}
}
.count .digit>span>span{height:152px;line-height:152px;text-align:center}
@media (max-width:640px){.count .digit>span>span{height:110px;line-height:110px}}
/* fixes after first render */
.reliv .cap p.k{font:600 13px/18px -apple-system,system-ui,sans-serif;font-style:normal;letter-spacing:.08em;color:#96D0D3}
.d-hero .scrim{background:linear-gradient(180deg,rgba(16,18,21,.55),rgba(16,18,21,0) 25%,rgba(16,18,21,.15) 45%,rgba(16,18,21,.94)),linear-gradient(90deg,rgba(16,18,21,.55),rgba(16,18,21,0) 60%)}
.d-hero .live{background:rgba(28,31,36,.62)}
@media (max-width:900px){
 .rm-grid{grid-template-columns:1fr!important;gap:32px!important}
 .rm-grid>div[style*="sticky"]{position:static!important}
}
.story .close h2{color:#1C1F24}