/* Layout: full-bleed painted hill town built from separate layers (sky → peaks → hills → town → bridge → train → trees).
   Mouse moves layers at different depths; scrolling flies the camera in and drives the train across the bridge.
   Landmarks are clickable chapters. Single committed dusk look with a night mode. */
:root{
  color-scheme:dark;
  --ink:#1D2333; --cream:#FFF8EC; --lamp:#F2A93B; --lamp-soft:#FFD58A; --dusk:#2A2F55; --text:#F7F1E6; --muted:#C9C3D8;
  --f-display:"Bricolage Grotesque","Avenir Next",system-ui,sans-serif;
  --f-body:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:#1B1F3A;color:var(--text);font-family:var(--f-body)}
button{font:inherit}
:focus-visible{outline:2px solid var(--lamp-soft);outline-offset:3px}

.ride{height:300vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#3b4a8a}
.world{position:absolute;left:0;top:0;transform-origin:62% 45%}
.lyr{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden}
.lyr img{position:absolute;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fog{position:absolute;left:-5%;right:-5%;top:48%;bottom:-5%;background:linear-gradient(180deg,rgba(170,175,205,0) 0%,rgba(170,175,205,.6) 30%,rgba(165,170,205,.92) 60%,rgba(160,166,204,.95) 100%);pointer-events:none}
.drift{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.drift i{position:absolute;width:40%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(235,232,245,.55),rgba(235,232,245,0));animation:drift 38s linear infinite;filter:blur(6px)}
.drift i:nth-child(2){top:62%;animation-duration:52s;animation-delay:-20s;width:55%}
.drift i:nth-child(3){top:74%;animation-duration:44s;animation-delay:-8s}
.drift i:nth-child(1){top:55%}
@keyframes drift{from{transform:translateX(-60%)}to{transform:translateX(260%)}}
.night-sky{position:absolute;inset:0;background:linear-gradient(#0B1233,#1A2556 55%,#2E3466);opacity:0;transition:opacity 1.2s}
.night-sky canvas{position:absolute;inset:0;width:100%;height:100%}
.moon{position:absolute;left:46%;top:7%;width:4.2%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 40%,#FFFBEA,#E9E2C8 60%,#CFC6A6);box-shadow:0 0 40px 10px rgba(255,246,210,.25)}
body.night .night-sky{opacity:1}
body.night #L-peaks img{filter:brightness(.55) saturate(.7) hue-rotate(10deg)}
body.night #L-hills img,body.night #L-hills2 img{filter:brightness(.45) saturate(.7)}
body.night #L-town img{filter:brightness(.78) saturate(1.05) contrast(1.08)}
body.night #L-bridge img{filter:brightness(.6) saturate(.85)}
body.night #L-train img{filter:brightness(.8)}
body.night #L-fg img{filter:brightness(.55) saturate(.8)}
body.night .fog{opacity:.55}
.lyr img,.fog{transition:filter 1.2s,opacity 1.2s}

/* hotspots live inside their layer so they move with it */
.pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:var(--ink)}
.pin .tag{display:flex;align-items:center;gap:8px;background:var(--cream);border-radius:99px;padding:6px 12px 6px 8px;font:600 13px var(--f-body);white-space:nowrap;box-shadow:0 6px 18px rgba(10,12,30,.35);transition:transform .2s}
.pin .tag img{position:static;width:20px;height:20px;border-radius:50%}
.pin .tag small{font:500 11px var(--f-mono);color:#6A6377}
.pin .dot{width:12px;height:12px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 0 rgba(242,169,59,.7);animation:ping 2s infinite}
.pin:hover .tag,.pin:focus-visible .tag{transform:translateY(-3px) scale(1.04)}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,169,59,.7)}100%{box-shadow:0 0 0 14px rgba(242,169,59,0)}}
.pin .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font:700 10px var(--f-mono);color:#fff}

/* chrome */
.top{position:absolute;z-index:10;top:env(safe-area-inset-top, 0px);left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:16px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.brand{display:flex;align-items:center;font:400 34px/1 "Great Vibes","Snell Roundhand","Apple Chancery",cursive;letter-spacing:.01em;color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.45);padding-top:2px;white-space:nowrap}
.links{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-weight:500;font-size:14px}
.links a{color:var(--text);text-decoration:none;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.links a:hover{color:var(--lamp-soft)}
.right{display:flex;gap:10px;align-items:center}
.toggle{display:flex;gap:2px;background:rgba(20,22,45,.45);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:3px}
.toggle button{border:0;background:transparent;color:var(--muted);font:600 12px var(--f-body);padding:6px 12px;border-radius:99px;cursor:pointer}
.toggle button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}

.scrim{position:absolute;z-index:5;left:0;top:0;width:min(760px,100%);height:70%;background:radial-gradient(120% 90% at 0% 10%,rgba(18,16,40,.55),rgba(18,16,40,0) 70%);pointer-events:none}
.copy{position:absolute;z-index:6;left:max(28px, env(safe-area-inset-left, 0px));top:calc(env(safe-area-inset-top, 0px) + 92px);max-width:min(520px,calc(100vw - 56px))}
.eyebrow{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--lamp-soft);margin:0 0 12px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.copy h1{font:800 clamp(32px,4.1vw,58px)/.98 var(--f-display);letter-spacing:-.035em;margin:0 0 14px;text-wrap:balance;text-shadow:0 4px 30px rgba(20,10,40,.45)}
.copy h1 em{font-style:normal;color:var(--lamp-soft)}
.copy p{margin:0;font-size:17px;line-height:1.5;color:#F3EADB;max-width:40ch;text-shadow:0 2px 14px rgba(20,10,40,.5)}
.hint{position:absolute;z-index:6;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 22px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hint b{width:22px;height:34px;border:2px solid #fff;border-radius:12px;position:relative}
.hint b::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}

/* chapter card */
.card{position:absolute;z-index:12;right:max(20px, env(safe-area-inset-right, 0px));top:calc(env(safe-area-inset-top, 0px) + 84px);width:min(380px,calc(100vw - 40px));background:var(--cream);color:var(--ink);border-radius:20px;padding:22px 22px 20px;box-shadow:0 24px 60px rgba(10,10,30,.45);transform:translateY(12px);opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.card.on{opacity:1;transform:none;pointer-events:auto}
.card .k{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#B4651E}
.card h2{font:800 30px/1.02 var(--f-display);letter-spacing:-.03em;margin:6px 0 8px}
.card .role{display:inline-block;font:500 12px var(--f-mono);background:#F4E4C4;border-radius:99px;padding:4px 10px;margin-bottom:10px}
.card p{margin:0 0 10px;font-size:15px;line-height:1.55;color:#3A3F4E}
.card .stats{display:flex;gap:20px;margin:6px 0 12px}
.card .stats strong{display:block;font:800 28px/1 var(--f-display);letter-spacing:-.02em}
.card .stats span{font:500 11px var(--f-mono);color:#6A6377}
.card .x{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:10px;border:0;background:transparent;font-size:22px;cursor:pointer;color:#6A6377}
.card .x:hover{background:#F1E6D2}
.card .go{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--f-body);background:var(--ink);color:var(--cream);border:0;border-radius:12px;padding:10px 14px;cursor:pointer;text-decoration:none}
.card .shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;border-radius:12px;margin:2px 0 12px;box-shadow:0 6px 16px rgba(20,20,40,.18)}
.card .soon{font:500 12px var(--f-mono);color:#8A8296;margin-left:8px}

.places{display:none}
.after{background:#1B1F3A;padding-block:72px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
.after .in{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.after h2{grid-column:1/-1;font:800 clamp(28px,4vw,44px)/1.05 var(--f-display);letter-spacing:-.03em;margin:0 0 8px}
.next{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:20px;background:rgba(255,255,255,.04)}
.next b{display:block;font:700 20px var(--f-display);margin-bottom:6px}
.next p{margin:0;color:var(--muted);line-height:1.55;font-size:15px}
.next span{font:500 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lamp-soft)}



.loader{position:fixed;inset:0;z-index:100;background:#1B1F3A;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .8s,visibility .8s}
.loader.done{opacity:0;visibility:hidden}
.loader b{font:800 clamp(28px,4vw,44px)/1 var(--f-display);letter-spacing:-.03em;text-align:center;padding:0 16px}
.loader .bar{width:min(280px,70vw);height:4px;border-radius:2px;background:rgba(255,255,255,.15);overflow:hidden}
.loader .bar i{display:block;height:100%;width:0;background:var(--lamp);transition:width .3s}
.loader small{font:500 12px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}
/* ---------- scene transition: the train's steam becomes a cloud bank ---------- */
:root{--mist:#F7E9DA;--mist-2:#F3D7BE}
body.night{--mist:#3B3F68;--mist-2:#2E3360}
.mist{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden;visibility:hidden}
.mist .wash{position:absolute;inset:0;opacity:0;background:#E9A27A;overflow:hidden}
.mist .wash .sky{position:absolute;left:-4%;right:-4%;top:-20%;bottom:-20%;background:center/cover no-repeat;will-change:transform}
.mist .wash .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,226,196,.10),rgba(255,214,178,.28) 60%,rgba(255,236,214,.45))}
body.night .mist .wash .tint{background:linear-gradient(180deg,rgba(28,32,78,.62),rgba(46,46,98,.55))}
.mist i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,rgba(255,232,210,.82) 0%,rgba(255,226,200,.6) 40%,rgba(255,220,190,0) 100%);opacity:0}
body.night .mist i{background:radial-gradient(closest-side,rgba(70,74,128,.92) 0%,rgba(64,68,120,.7) 40%,rgba(59,63,104,0) 100%)}
.mist .cum{position:absolute;top:0;height:auto;opacity:0;will-change:transform;filter:drop-shadow(0 30px 40px rgba(120,60,70,.12))}
body.night .mist .cum{filter:brightness(.5) saturate(.6)}
.mist .cap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;opacity:0;width:min(90vw,680px);text-shadow:0 2px 28px rgba(90,40,40,.45),0 1px 2px rgba(90,40,40,.3);z-index:2}
.mist .cap span{display:block;font:500 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;opacity:.9}
.mist .cap b{display:block;font:800 clamp(40px,7vw,96px)/.95 var(--f-display);letter-spacing:-.04em}
.mist .cap em{display:block;font:500 16px var(--f-body);font-style:normal;margin-top:12px;opacity:.92}
.jride{background:#E9A27A!important}

/* ---------- Scene 3: studio ---------- */
.sride{position:relative;height:640vh;background:#E9A27A}
.sstage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#2A2F55}
.sworld{position:absolute;left:0;top:0;will-change:transform}
.sl{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden}
.sl img{position:absolute;display:block;user-select:none;-webkit-user-drag:none}
.snight{position:absolute;inset:0;opacity:0;transition:opacity 1.2s;pointer-events:none}
.snight img{width:100%;height:100%;object-fit:cover}
body.night .snight{opacity:1}
.sglow{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(60% 60% at 50% 50%,#FFE2A6 0%,#FFB65C 45%,#C9762E 100%)}
.shead{position:absolute;z-index:5;left:max(28px, env(safe-area-inset-left, 0px));top:calc(env(safe-area-inset-top, 0px) + 28px);max-width:min(480px,calc(100vw - 56px))}
.shead h2{font:800 clamp(28px,3.6vw,48px)/1 var(--f-display);letter-spacing:-.03em;margin:0 0 10px;text-shadow:0 4px 24px rgba(30,10,40,.45)}
.shead p{margin:0;color:#F3EADB;font-size:16px;line-height:1.5;text-shadow:0 2px 12px rgba(30,10,40,.5)}
.inside{position:absolute;inset:0;z-index:6;opacity:0;visibility:hidden;background:#3A2414}
.iworld{position:absolute;left:0;top:0;transform-origin:50% 50%}
.iworld>img{position:absolute;inset:0;width:100%;height:100%;display:block}
body.night .iworld>img{filter:brightness(.62) saturate(.9)}
body.night .iworld::after{content:"";position:absolute;inset:0;background:radial-gradient(22% 30% at 27% 42%,rgba(255,190,100,.35),transparent 70%),radial-gradient(10% 14% at 75% 58%,rgba(255,200,120,.25),transparent 70%);pointer-events:none}
.hot{position:absolute;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:0;transition:opacity .5s}
.inside.ready .hot{opacity:1}
.hot .ring{width:22px;height:22px;border-radius:50%;background:rgba(255,215,140,.95);box-shadow:0 0 0 0 rgba(255,215,140,.7);animation:ping 2s infinite;border:3px solid rgba(255,255,255,.9)}
.hot .lbl{background:var(--cream);color:var(--ink);border-radius:99px;padding:6px 12px;font:600 13px var(--f-body);white-space:nowrap;box-shadow:0 8px 20px rgba(20,10,0,.35);transition:transform .2s}
.hot:hover .lbl,.hot:focus-visible .lbl{transform:translateY(-3px) scale(1.05)}
.ihead{position:absolute;z-index:7;left:max(28px, env(safe-area-inset-left, 0px));top:calc(env(safe-area-inset-top, 0px) + 24px);opacity:0;transition:opacity .5s;pointer-events:none}
.inside.ready .ihead{opacity:1}
.ihead h2{font:800 clamp(26px,3vw,40px)/1 var(--f-display);letter-spacing:-.03em;margin:0 0 6px;text-shadow:0 4px 20px rgba(20,8,0,.6)}
.ihead p{margin:0;color:#F6E9D6;text-shadow:0 2px 10px rgba(20,8,0,.6)}
.dock{position:absolute;z-index:7;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);transform:translateX(-50%);display:flex;gap:4px;flex-wrap:wrap;justify-content:center;width:fit-content;max-width:calc(100vw - 32px);background:rgba(30,18,10,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:6px;opacity:0;transition:opacity .5s}
.inside.ready .dock{opacity:1}
.dock button{border:0;background:transparent;color:#F6E9D6;font:600 13px var(--f-body);padding:8px 12px;border-radius:10px;cursor:pointer}
.dock button:hover{background:rgba(255,255,255,.12)}
/* drawer */
.sbgal{display:flex;gap:8px;overflow-x:auto;margin:-4px 0 16px;padding-bottom:6px;scroll-snap-type:x mandatory}
.sbgal img{flex:0 0 78%;width:78%;border-radius:12px;border:1px solid #E8DCC6;scroll-snap-align:start}
.drawer{position:fixed;z-index:50;top:0;right:0;bottom:0;width:min(560px,100vw);background:var(--cream);color:var(--ink);transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);overflow-y:auto;box-shadow:-30px 0 60px rgba(10,6,0,.35);padding:28px max(24px, env(safe-area-inset-right, 0px)) 40px 28px}
.drawer.on{transform:none}
.veil{position:fixed;inset:0;z-index:49;background:rgba(15,10,5,.45);opacity:0;pointer-events:none;transition:opacity .3s}
.veil.on{opacity:1;pointer-events:auto}
.drawer .x{position:sticky;top:0;float:right;width:40px;height:40px;border-radius:12px;border:0;background:#F1E6D2;font-size:22px;cursor:pointer;color:#5A5262}
.drawer .k{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#B4651E}
.drawer h2{font:800 clamp(30px,4vw,40px)/1.02 var(--f-display);letter-spacing:-.03em;margin:8px 0 10px}
.drawer>p,.drawer .lead{margin:0 0 20px;color:#3A3F4E;line-height:1.55}
.case{display:block;text-decoration:none;color:inherit;border:1px solid #E8DCC6;border-radius:16px;overflow:hidden;margin-bottom:14px;background:#fff;transition:transform .2s,box-shadow .2s}
.case:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(60,40,10,.14)}
.case img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid #EFE5D3}
.case .cb{padding:14px 16px 16px}
.case .tag{font:500 11px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#8A7F70}
.case h3{font:800 20px/1.15 var(--f-display);letter-spacing:-.015em;margin:4px 0 6px}
.case p{margin:0;font-size:14.5px;line-height:1.5;color:#4A4F5E}
.case .meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font:500 12px var(--f-mono);color:#2B2F3A}
.case.feature{background:#1D2333;color:#F6EFE3;border-color:#1D2333}
.case.feature p,.case.feature .tag{color:#C9C3D8}
.case.feature .meta{color:#FFD58A}
.case .art{aspect-ratio:16/10;background:radial-gradient(120% 120% at 0% 0%,#F2A93B 0%,#C9622E 40%,#2B3E8C 100%);display:grid;place-items:center;font:800 42px var(--f-display);letter-spacing:-.03em;color:#fff}
.links2{display:flex;flex-direction:column;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.links2 a{display:flex;justify-content:space-between;gap:12px;text-decoration:none;color:var(--ink);border:1px solid #E8DCC6;background:#fff;border-radius:12px;padding:12px 14px;font-weight:600;font-size:15px}
.links2 a span{font:500 12px var(--f-mono);color:#8A7F70;white-space:nowrap}
.links2 a:hover{border-color:var(--ink)}
.drawer h4{font:700 12px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#8A7F70;margin:22px 0 10px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:st}
.steps li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid #E8DCC6;border-radius:14px;padding:12px 14px}
.steps li::before{counter-increment:st;content:counter(st);width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font:700 14px var(--f-mono)}
.steps b{display:block;font:700 16px var(--f-display)}
.steps span{font-size:14px;color:#4A4F5E}
.bigstat{display:flex;gap:24px;margin:4px 0 18px}
.bigstat strong{display:block;font:800 40px/1 var(--f-display);letter-spacing:-.03em}
.bigstat span{font:500 12px var(--f-mono);color:#8A7F70}
.mailrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.mailrow code{font:500 15px var(--f-mono);background:#F4E4C4;padding:10px 12px;border-radius:10px;user-select:all}
.mailrow button{border:0;background:var(--ink);color:var(--cream);font:600 14px var(--f-body);padding:11px 14px;border-radius:10px;cursor:pointer}
.foot{background:#1B1F3A;color:var(--muted);padding-block:28px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px));display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.foot a{color:var(--text)}
@media (max-width:820px){.hot .lbl{font-size:11px;padding:4px 9px}.dock button{font-size:12px;padding:7px 9px}}
/* ---------- Scene 2: journey ---------- */
.jride{position:relative;height:760vh;background:#1B1F3A}
.jstage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:#F2A85E}
.jworld{position:absolute;left:0;top:0;height:100%}
.jl{position:absolute;inset:0;pointer-events:none;backface-visibility:hidden}
.jl img{position:absolute;bottom:0;display:block;user-select:none;-webkit-user-drag:none}
.jl.sky img{top:0;bottom:auto;height:100%;width:100%;object-fit:cover}
body.night .jl.sky img{filter:brightness(.38) saturate(.6) hue-rotate(195deg)}
body.night .jl.peaks img{filter:brightness(.55) saturate(.7)}
body.night .jl.land img,body.night .jl.roofs img{filter:brightness(.5) saturate(.75)}
body.night .jl.city img,body.night .jl.camp img{filter:brightness(.75) saturate(1.05)}
.jl img{transition:filter 1.2s}
.jhead{position:absolute;z-index:5;left:max(28px, env(safe-area-inset-left, 0px));top:calc(env(safe-area-inset-top, 0px) + 24px);max-width:min(460px,calc(100vw - 56px))}
.jhead .eyebrow{margin-bottom:6px}
.jhead h2{font:800 clamp(26px,3.2vw,42px)/1 var(--f-display);letter-spacing:-.03em;margin:0;text-shadow:0 4px 24px rgba(30,10,40,.45)}
.jcard{position:absolute;z-index:6;right:max(24px, env(safe-area-inset-right, 0px));top:calc(env(safe-area-inset-top, 0px) + 24px);width:min(360px,calc(100vw - 48px));background:rgba(255,248,236,.95);color:var(--ink);border-radius:18px;padding:18px 20px;box-shadow:0 20px 50px rgba(20,10,30,.35);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.jcard.on{opacity:1;transform:none}
.jcard .k{font:700 11px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#B4651E}
.jcard h3{font:800 26px/1.05 var(--f-display);letter-spacing:-.02em;margin:6px 0 6px}
.jcard .role{display:inline-block;font:500 12px var(--f-mono);background:#F4E4C4;border-radius:99px;padding:3px 9px;margin-bottom:8px}
.jcard p{margin:0;font-size:14.5px;line-height:1.5;color:#3A3F4E}
.jcard .stats{display:flex;gap:18px;margin-top:10px}
.jcard .stats strong{display:block;font:800 24px/1 var(--f-display)}
.jcard .stats span{font:500 11px var(--f-mono);color:#6A6377}
.jbar{position:absolute;z-index:6;left:max(24px, env(safe-area-inset-left, 0px));right:max(24px, env(safe-area-inset-right, 0px));bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);background:rgba(20,22,45,.55);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:12px 16px 10px}
.jtrack{position:relative;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin:0 6px}
.jfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--lamp);border-radius:2px}
.jticks{display:flex;justify-content:space-between;margin-top:10px}
.jticks button{background:none;border:0;padding:0;cursor:pointer;color:var(--muted);font:600 12px var(--f-body);display:flex;flex-direction:column;align-items:center;gap:2px;position:relative}
.jticks button::before{content:"";position:absolute;top:-17px;width:12px;height:12px;border-radius:50%;background:#2A2F55;border:2px solid var(--muted)}
.jticks button.done{color:#fff}
.jticks button.done::before{background:var(--lamp);border-color:var(--lamp)}
.jticks small{font:500 10.5px var(--f-mono);opacity:.75}
.jyear{position:absolute;z-index:4;left:50%;top:44%;transform:translate(-50%,-50%);font:800 clamp(80px,14vw,200px)/1 var(--f-display);letter-spacing:-.05em;color:rgba(255,255,255,.16);pointer-events:none;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .jcard{top:auto;bottom:calc(env(safe-area-inset-bottom, 0px) + 96px);right:max(16px, env(safe-area-inset-right, 0px))}
  .jticks button{font-size:10px}
  .jticks small{display:none}
}
@media (max-width:820px){
  .links{display:none}
  .copy{top:calc(env(safe-area-inset-top, 0px) + 74px)}
  .copy p{font-size:15px}
  .pin .tag{font-size:11px;padding:4px 9px 4px 6px}
  .pin .tag small{display:none}
  .card{top:auto;bottom:calc(env(safe-area-inset-bottom, 0px) + 16px)}
  .after .in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* global dock */
.gdock{position:fixed;z-index:30;left:50%;bottom:calc(env(safe-area-inset-bottom, 0px) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:6px;background:rgba(255,248,236,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.6);border-radius:18px;box-shadow:0 14px 40px rgba(20,12,40,.28);max-width:calc(100vw - 24px)}
.gdock button,.gdock a{display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#4A4458;font:600 14px var(--f-body);padding:9px 14px;border-radius:12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.gdock button:hover{color:var(--ink);background:rgba(29,35,51,.06)}
.gdock button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(20,12,40,.12)}
.gdock i{width:22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 9px var(--f-mono);font-style:normal}
.gdock .cta{background:var(--ink);color:#fff;margin-left:4px}
.gdock .cta:hover{background:#2B3247}
.hint{bottom:calc(env(safe-area-inset-bottom, 0px) + 96px)}
.jbar{bottom:calc(env(safe-area-inset-bottom, 0px) + 86px)}
.mini{display:flex;gap:14px;align-items:center;border:1px solid #E8DCC6;background:#fff;border-radius:14px;padding:12px}
.mini img{width:120px;height:76px;object-fit:cover;border-radius:8px;flex:none}
.mini h3{margin:0 0 4px;font-size:16px}
.mini p{margin:0;font-size:14px;color:#5B5566;line-height:1.45}
@media (max-width:820px){
  .gdock button,.gdock a{font-size:12.5px;padding:8px 9px;gap:6px}
  .gdock i{display:none}
  .jcard{bottom:calc(env(safe-area-inset-bottom, 0px) + 168px)}
}
.scrim{width:100%;height:100%;background:radial-gradient(ellipse 52% 48% at 16% 27%,rgba(16,14,36,.66) 0%,rgba(16,14,36,.45) 50%,rgba(16,14,36,0) 100%)}
@media (max-width:820px){.scrim{background:linear-gradient(180deg,rgba(16,14,36,.7) 0%,rgba(16,14,36,.45) 45%,rgba(16,14,36,0) 70%)}.hint{font-size:11px;white-space:nowrap}}
.copy p{color:#fff}

/* journey stops placed where each chapter starts */
.jticks{position:relative;display:block;height:30px;margin:10px 6px 0}
.jticks button{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.jticks button:first-child{transform:none;align-items:flex-start}
.jticks button:first-child::before{left:0}
.jticks button:last-child{transform:translateX(-100%);align-items:flex-end}
.jticks button:last-child::before{right:0}

/* ---------- living hero: paraglider, birds, smoke, flags, breeze ---------- */
#L-sky>img{animation:skydrift 90s ease-in-out infinite alternate}
@keyframes skydrift{to{transform:translateX(-2.2%)}}
#L-fg img{transform-origin:50% 100%;animation:sway 6.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:skewX(-.5deg)}to{transform:skewX(.6deg)}}
.glider{position:absolute;left:104%;top:9%;width:15%;animation:glide 52s linear -5s infinite;will-change:left,top}
.glider .bob{position:relative;animation:bob 4.5s ease-in-out infinite alternate}
.glider .wing{display:block;width:34%;animation:tilt 6s ease-in-out infinite alternate;transform-origin:50% 90%}
/* towed banner: live visitor count */
.glider .rope{position:absolute;left:27%;top:88%;width:10%;opacity:0;transition:opacity .6s}
.glider .banner{position:absolute;left:36%;top:84%;background:#FFF6E6;color:#3A2A1E;border-radius:3px;padding:.3em .75em;font:600 clamp(10px,.78vw,15px)/1.2 var(--f-body);white-space:nowrap;box-shadow:0 4px 10px rgba(30,15,40,.25);transform-origin:0 50%;animation:flap 1.6s ease-in-out infinite alternate;opacity:0;transition:opacity .6s}
.glider.has-count .rope,.glider.has-count .banner{opacity:1}
.glider .banner b{font:800 1.08em var(--f-display);letter-spacing:-.01em}
.glider .banner em{font-style:normal;opacity:.45;margin:0 .35em}
.glider .banner .live{display:inline-block;width:.55em;height:.55em;border-radius:50%;background:#2FA35A;margin-right:.35em;vertical-align:.05em;box-shadow:0 0 0 0 rgba(47,163,90,.6);animation:livedot 1.8s ease-out infinite}
@keyframes livedot{0%{box-shadow:0 0 0 0 rgba(47,163,90,.6)}100%{box-shadow:0 0 0 .55em rgba(47,163,90,0)}}
.owner-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:80;background:#1E2140;color:#FFF6E6;font:500 13px var(--f-body);padding:9px 14px;border-radius:99px;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:opacity .5s}

@keyframes glide{0%{left:104%;top:9%;opacity:0}4%{opacity:1}80%{opacity:1}86%{left:22%;top:5.5%;opacity:0}100%{left:22%;top:5.5%;opacity:0}}
@keyframes bob{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes tilt{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes flap{from{transform:skewY(-2deg) scaleX(.98)}to{transform:skewY(2deg) scaleX(1)}}
.flock{position:absolute;width:6.5%;height:3%;left:105%;top:20%;animation:flock 34s linear infinite}
.flock.f2{top:30%;width:4%;animation-duration:46s;animation-delay:-21s}
.flock i{position:absolute;width:16%;animation:drift2 3s ease-in-out infinite alternate}
.flock b{display:block;animation:wingbeat .55s ease-in-out infinite alternate;transform-origin:50% 60%}
.flock svg{display:block;width:100%;fill:none;stroke:#2B2340;stroke-width:1.6;stroke-linecap:round}
body.night .flock svg{stroke:#C9C6E6}
@keyframes flock{0%{left:105%;transform:translateY(0)}50%{transform:translateY(-40%)}100%{left:-10%;transform:translateY(20%)}}
@keyframes wingbeat{from{transform:scaleY(1)}to{transform:scaleY(-.35)}}
@keyframes drift2{from{transform:translateY(-12%)}to{transform:translateY(12%)}}
.smoke{position:absolute;left:58%;top:40%;width:30%;height:30%;pointer-events:none}
.smoke i{position:absolute;left:15.4%;top:52%;width:1.6%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,244,232,.85),rgba(255,236,220,0));opacity:0;animation:puff 4.2s ease-out infinite}
.smoke i:nth-child(2){animation-delay:.7s}.smoke i:nth-child(3){animation-delay:1.4s}.smoke i:nth-child(4){animation-delay:2.1s}.smoke i:nth-child(5){animation-delay:2.8s}.smoke i:nth-child(6){animation-delay:3.5s}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.6)}12%{opacity:.9}100%{opacity:0;transform:translate(260%,-420%) scale(4.2)}}
.flags{position:absolute;overflow:visible}
.flags .fl{transform-box:fill-box;transform-origin:50% 0;animation:flutter 1.3s ease-in-out infinite alternate}
@keyframes flutter{from{transform:skewX(-14deg) scaleY(.92)}to{transform:skewX(12deg) scaleY(1)}}
.breeze{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
@media (prefers-reduced-motion:reduce){.glider,.flock,.smoke,.breeze{display:none}}

/* contact form */
.hire{display:grid;gap:14px;margin:4px 0 8px}
.hire label{display:grid;gap:6px}
.hire label span{font:600 13px var(--f-body);color:#3A3F4E}
.hire label i{font-style:normal;font-weight:500;color:#8A7F70}
.hire input,.hire select,.hire textarea{font:500 16px var(--f-body);color:var(--ink);background:#fff;border:1px solid #E3D8C3;border-radius:12px;padding:12px 14px;width:100%;box-sizing:border-box;outline:none;transition:border-color .2s,box-shadow .2s}
.hire textarea{resize:vertical;min-height:96px}
.hire input:focus,.hire select:focus,.hire textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,169,59,.35)}
.hire button[type=submit]{justify-self:start;font:700 15px var(--f-body);background:var(--ink);color:var(--cream);border:0;border-radius:12px;padding:13px 20px;cursor:pointer}
.hire button[type=submit]:hover{background:#2B3247}
.hire button[disabled]{opacity:.6;cursor:wait}
.hire .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.hire .status{margin:0;font-size:14px;min-height:1em}
.hire .status.err{color:#B3261E}
.hire .sent{background:#EEF7EE;border:1px solid #CFE6CF;border-radius:14px;padding:18px;display:grid;gap:4px}
.hire .sent b{font:800 20px var(--f-display)}
.hire .sent span{color:#3A3F4E}
.cta-hire{margin-top:18px;font:700 15px var(--f-body);background:var(--lamp);color:#1D2333;border:0;border-radius:12px;padding:12px 18px;cursor:pointer;box-shadow:0 8px 24px rgba(20,10,40,.35);transition:transform .2s}
.cta-hire:hover{transform:translateY(-2px)}

/* ---------- contact letter ---------- */
.mailbox{position:fixed;inset:0;z-index:60;display:none;pointer-events:none}
.mailbox.on{display:block;pointer-events:auto}
.mb-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 100%,rgba(42,47,85,.55),rgba(14,12,30,.82));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .6s}
.mailbox[data-stage]:not([data-stage=""]):not([data-stage=fly]):not([data-stage=sink]):not([data-stage=back]):not([data-stage=gone]) .mb-veil,.mailbox[data-stage=done] .mb-veil{opacity:1}
.env{position:absolute;left:50%;top:50%;width:min(420px,86vw);aspect-ratio:1.6;margin-left:calc(min(420px,86vw)/-2);margin-top:calc(min(420px,86vw)/-3.2);z-index:2;transform:translate(0,85vh) rotate(-8deg)}
.env-back,.env-front,.env-flap{position:absolute;inset:0;border-radius:6px}
.env-back{background:#E2C998;box-shadow:0 30px 60px rgba(10,6,25,.45)}
.env-front{background:linear-gradient(160deg,#F1DCB2,#E8CF9F);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);z-index:3}
.env-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(120,80,30,.18) 50%,transparent 50.6%),linear-gradient(to top left,transparent 49.6%,rgba(120,80,30,.18) 50%,transparent 50.6%)}
.env-flap{background:linear-gradient(180deg,#EAD3A6,#DDBF8A);clip-path:polygon(0 0,100% 0,50% 58%);transform-origin:50% 0;z-index:4;transform:perspective(1200px) rotateX(0);transition:transform .6s cubic-bezier(.4,.1,.3,1),z-index 0s .3s}
.seal{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-36px 0 0 -27px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#D9564B,#A3271F 70%);color:#FBE3D2;font:700 15px var(--f-mono);display:grid;place-items:center;z-index:5;box-shadow:0 4px 10px rgba(80,10,10,.4),inset 0 0 0 4px rgba(255,255,255,.12);transition:transform .35s,opacity .35s}
.letter{position:absolute;left:50%;top:6%;width:92%;height:88%;transform:translateX(-50%);background:#FFFBF2;background-image:repeating-linear-gradient(180deg,transparent 0 33px,rgba(70,90,140,.10) 33px 34px);border-radius:4px;box-shadow:0 6px 18px rgba(40,20,0,.2);overflow:hidden;z-index:2;color:#2A2440;transition:top .7s cubic-bezier(.3,.7,.2,1),width .55s cubic-bezier(.3,.7,.2,1),height .55s cubic-bezier(.3,.7,.2,1),transform .55s,box-shadow .5s}
.lt-form{padding:26px 28px 20px;opacity:.35;transition:opacity .4s}
.lt-x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;font-size:24px;color:#6A6377;cursor:pointer;opacity:0;transition:opacity .3s}
.lt-x:hover{background:rgba(29,35,51,.08)}
.lt-date{margin:0 0 6px;text-align:right;font:500 12px var(--f-mono);color:#8A7F70}
.lt-hi{font:700 40px/1 'Caveat',cursive;margin:0 0 10px;color:#2A2440}
.lt-line{font:500 17px/34px var(--f-body);margin:0}
.lt-line input,.lt-line select{font:700 22px 'Caveat',cursive;color:#B4651E;border:0;border-bottom:2px dashed #C8B48E;background:transparent;padding:0 4px;min-width:150px;max-width:100%;outline:none}
.lt-line select{min-width:auto;cursor:pointer}
.lt-line input:focus,.lt-line select:focus{border-bottom-color:#B4651E;background:rgba(242,169,59,.12)}
.lt-line input::placeholder{color:#BDAE95}
.lt-more{margin-top:8px}.lt-more span{color:#8A7F70;font-size:14px}
.letter textarea{width:100%;box-sizing:border-box;font:600 21px/34px 'Caveat',cursive;color:#2A2440;background:transparent;border:0;border-bottom:2px dashed #C8B48E;resize:vertical;outline:none;padding:0 4px;min-height:68px}
.letter textarea:focus{border-bottom-color:#B4651E}
.letter .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lt-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.lt-sign{font:500 15px/1.3 var(--f-body);color:#5B5566}.lt-sign b{font:700 26px 'Caveat',cursive;color:#2A2440}
.lt-send{font:700 15px var(--f-body);background:#A3271F;color:#FFF3E6;border:0;border-radius:12px;padding:13px 18px;cursor:pointer;box-shadow:0 8px 18px rgba(120,20,15,.3);transition:transform .2s}
.lt-send:hover{transform:translateY(-2px)}.lt-send[disabled]{opacity:.7;cursor:wait}
.lt-status{margin:10px 0 0;font-size:14px;min-height:1em}.lt-status.err{color:#B3261E}
.lt-alt{margin:8px 0 0;font-size:13px;color:#6A6377}.lt-alt a{color:#2A2440}
/* stages */
.mailbox[data-stage=open] .env,.mailbox[data-stage=out] .env,.mailbox[data-stage=full] .env,.mailbox[data-stage=fold] .env,.mailbox[data-stage=seal] .env{transform:none}
.mailbox[data-stage=open] .seal,.mailbox[data-stage=out] .seal,.mailbox[data-stage=full] .seal,.mailbox[data-stage=fold] .seal{transform:scale(1.4);opacity:0}
.mailbox[data-stage=open] .env-flap,.mailbox[data-stage=out] .env-flap,.mailbox[data-stage=full] .env-flap,.mailbox[data-stage=fold] .env-flap{transform:perspective(1200px) rotateX(180deg);z-index:1}
.mailbox[data-stage=out] .letter{top:-58%}
.mailbox[data-stage=full] .letter{top:50%;width:min(560px,92vw);height:min(640px,88vh);overflow:auto;transform:translate(-50%,-50%);z-index:6;box-shadow:0 40px 90px rgba(10,6,25,.5)}
.mailbox[data-stage=full] .lt-form{opacity:1}
.mailbox[data-stage=full] .lt-x{opacity:1}
.mailbox[data-stage=full] .env-back,.mailbox[data-stage=full] .env-front,.mailbox[data-stage=full] .env-flap{opacity:0;transition:opacity .4s}
.mailbox[data-stage=fold] .letter{top:6%}
.mailbox[data-stage=seal] .env-flap{transform:perspective(1200px) rotateX(0)}
.mailbox[data-stage=seal] .seal{animation:stamp .45s ease-out}
@keyframes stamp{0%{transform:scale(2.2);opacity:0}70%{transform:scale(.9);opacity:1}100%{transform:scale(1)}}
.mailbox[data-stage=fly] .env{animation:fly 1.5s cubic-bezier(.45,0,.75,.6) forwards}
@keyframes fly{0%{transform:perspective(1100px)}20%{transform:perspective(1100px) translate(-4vw,3vh) rotate(-8deg) rotateX(30deg) rotateY(-20deg) scale(.95)}45%{transform:perspective(1100px) translate(14vw,-22vh) rotate(10deg) rotateX(-35deg) rotateY(30deg) scale(.75)}70%{transform:perspective(1100px) translate(36vw,-55vh) rotate(-6deg) rotateX(40deg) rotateY(-28deg) scale(.55)}100%{transform:perspective(1100px) translate(70vw,-95vh) rotate(16deg) rotateX(-30deg) rotateY(25deg) scale(.3);opacity:.2}}
.mailbox[data-stage=sink] .env{animation:sink .9s cubic-bezier(.5,0,.7,.3) forwards}
@keyframes sink{to{transform:translate(0,85vh) rotate(-8deg)}}
.mailbox[data-stage=done] .env{display:none}
.mb-thanks{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:min(440px,88vw);background:#FFFBF2;color:#2A2440;border-radius:16px;padding:26px 26px 22px;box-shadow:0 40px 90px rgba(10,6,25,.5);display:none;gap:8px;text-align:center;opacity:0;z-index:7}
.mb-thanks.on{display:grid;animation:pop .5s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes pop{to{opacity:1;transform:translate(-50%,-50%)}}
.mb-thanks b{font:700 34px/1.05 'Caveat',cursive}
.mb-thanks span{color:#5B5566;line-height:1.5}
.mb-thanks button{justify-self:center;margin-top:8px;font:700 14px var(--f-body);background:var(--ink);color:var(--cream);border:0;border-radius:12px;padding:11px 16px;cursor:pointer}
@media (max-width:600px){.lt-form{padding:22px 18px 16px}.lt-hi{font-size:34px}.lt-line{font-size:16px}.lt-line input{min-width:120px}}
@media (prefers-reduced-motion:reduce){.mailbox .env{animation:none!important;transform:none!important}}

/* the letter starts life behind the real hero peaks */
.mail-peek{position:absolute;backface-visibility:visible;left:48.6%;top:16%;margin-top:-3.6%;width:4.2%;aspect-ratio:1.6;border-radius:3px;background:linear-gradient(160deg,#F6E4BE,#E6CC98);box-shadow:0 0 14px rgba(255,226,170,.75),0 4px 10px rgba(30,20,60,.35);visibility:hidden;transform:translateY(240%);pointer-events:none}
.mail-peek::before{transform-origin:50% 0;content:"";position:absolute;inset:0;border-radius:3px;background:linear-gradient(180deg,#EAD3A6,#D7B77E);clip-path:polygon(0 0,100% 0,50% 58%)}
.mail-peek::after{content:"";position:absolute;left:50%;top:50%;width:18%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#B3322A}
.mail-peek.peek{visibility:visible;animation:peek 2.4s linear forwards}
@keyframes peek{
0%{transform:perspective(320px) translate(0,240%) rotate(-10deg) rotateX(60deg) rotateY(-30deg) skewY(6deg);animation-timing-function:ease-in-out}
16%{transform:perspective(320px) translate(-24%,150%) rotate(12deg) rotateX(-45deg) rotateY(40deg) skewY(-7deg);animation-timing-function:ease-in-out}
32%{transform:perspective(320px) translate(18%,60%) rotate(-14deg) rotateX(50deg) rotateY(-45deg) skewY(6deg);animation-timing-function:ease-in-out}
48%{transform:perspective(320px) translate(-16%,-20%) rotate(12deg) rotateX(-40deg) rotateY(38deg) skewY(-5deg);animation-timing-function:ease-in-out}
64%{transform:perspective(320px) translate(12%,6%) rotate(-10deg) rotateX(34deg) rotateY(-30deg) skewY(4deg);animation-timing-function:ease-in-out}
80%{transform:perspective(320px) translate(-8%,-6%) rotate(7deg) rotateX(-24deg) rotateY(20deg) skewY(-3deg);animation-timing-function:ease-in-out}
92%{transform:perspective(320px) translate(4%,2%) rotate(-3deg) rotateX(10deg) rotateY(-9deg) skewY(1deg);animation-timing-function:ease-in-out}
100%{transform:perspective(320px) translate(0,0) rotate(0) rotateX(0) rotateY(0) skewY(0)}}
.mail-peek.held{visibility:hidden;transform:none;animation:none}
.mail-peek.dip{visibility:visible;animation:dip 1.1s ease-in forwards}
@keyframes dip{
0%{transform:perspective(320px) translate(0,0) rotate(0) rotateX(0) rotateY(0)}
30%{transform:perspective(320px) translate(-14%,-16%) rotate(-9deg) rotateX(30deg) rotateY(-25deg)}
65%{transform:perspective(320px) translate(12%,90%) rotate(8deg) rotateX(-35deg) rotateY(30deg)}
100%{transform:perspective(320px) translate(-6%,240%) rotate(-6deg) rotateX(45deg) rotateY(-20deg)}}
.mb-wipe{position:fixed;inset:0;z-index:59;background:linear-gradient(180deg,#5A63B0,#E9925A);opacity:0;pointer-events:none;transition:opacity .35s}
.mb-wipe.on{opacity:1;pointer-events:auto}
.mailbox[data-stage=gone] .env{display:none}
.mailbox[data-stage=rise] .mb-veil{opacity:.6;transition:opacity 1.8s ease-in}
@media (max-width:700px){.mail-peek{left:52%;top:13.5%}}
/* the flap catches the wind like loose paper */
@keyframes flapwind{0%{transform:perspective(300px) rotateX(0)}100%{transform:perspective(300px) rotateX(-55deg)}}
.mail-peek.peek::before,.mail-peek.dip::before{animation:flapwind .32s ease-in-out infinite alternate}
@keyframes flapwind2{0%{transform:perspective(1200px) rotateX(0)}100%{transform:perspective(1200px) rotateX(-50deg)}}
.mailbox[data-stage=rise] .env-flap,.mailbox[data-stage=back] .env-flap{animation:flapwind2 .34s ease-in-out infinite alternate}

/* ShipBahi: a quiet link beside the main CTA */
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.cta-row .cta-hire{margin-top:0}
.side-link{display:none;align-items:center;gap:8px;color:var(--cream);text-decoration:none;font:500 14px var(--f-body);opacity:.92;border-bottom:1px solid rgba(255,244,225,.35);padding-bottom:2px;transition:opacity .2s,border-color .2s}
.side-link b{font-weight:700}
.side-link:hover,.side-link:focus-visible{opacity:1;border-color:var(--lamp)}
.side-link .sl-dot{width:8px;height:8px;border-radius:50%;background:#E0612B;box-shadow:0 0 0 3px rgba(224,97,43,.25)}
@media (max-width:700px){
  .cta-row{gap:12px}
  .side-link{display:inline-flex;font-size:13px}
  .card{bottom:calc(env(safe-area-inset-bottom, 0px) + 84px);max-height:calc(100svh - 190px);overflow:auto}
  .card .shot{display:none}
}

/* ---------- living journey + studio ---------- */
.jbox{position:absolute;bottom:0;aspect-ratio:4342/1448}
.jl .jbox>img{left:0;bottom:0;width:100%}
.breeze2{z-index:1}
.kite{position:absolute;width:2.1%;animation:kfly 7s ease-in-out infinite alternate;transform-origin:50% 30%}
.kite svg{display:block;width:100%;overflow:visible}
.kite.k2{width:1.7%;animation-duration:9.5s;animation-delay:-3s}
.kite .ktail{transform-box:fill-box;transform-origin:50% 0;animation:ktail .9s ease-in-out infinite alternate}
@keyframes kfly{0%{transform:translate(0,0) rotate(-9deg)}35%{transform:translate(35%,-22%) rotate(7deg)}70%{transform:translate(-25%,12%) rotate(-4deg)}100%{transform:translate(18%,-12%) rotate(10deg)}}
@keyframes ktail{from{transform:skewX(-18deg)}to{transform:skewX(18deg)}}
.flock.jflock{left:auto;width:3%;height:1.5%;animation:jfly 32s linear infinite}
.flock.jflock.j2{width:2.2%;animation-duration:41s;animation-delay:-17s}
.flock.jflock.j3{animation-duration:36s;animation-delay:-9s}
@keyframes jfly{0%{transform:translate(28vw,0);opacity:0}8%{opacity:1}50%{transform:translate(-8vw,-40%)}92%{opacity:1}100%{transform:translate(-44vw,15%);opacity:0}}
.jplane{position:absolute;width:12px;height:3px;border-radius:2px;background:#4A4466;animation:jplane 55s linear infinite}
.jplane::before{content:"";position:absolute;left:3px;top:-2px;width:5px;height:7px;background:inherit;clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.jplane i{position:absolute;left:-2px;top:-1px;width:4px;height:4px;border-radius:50%;background:#FF5A4A;box-shadow:0 0 6px #FF5A4A;animation:blink 1.4s steps(2,jump-none) infinite}
body.night .jplane{background:#CFCBEA}
@keyframes jplane{0%{transform:translateX(-30vw);opacity:0}6%{opacity:1}94%{opacity:1}100%{transform:translateX(45vw);opacity:0}}
@keyframes blink{0%{opacity:1}50%{opacity:.1}}
.jl.sky .drift i{width:16%;height:9%;animation-duration:150s;filter:blur(10px);background:radial-gradient(closest-side,rgba(255,240,226,.5),rgba(255,240,226,0))}
.jl.sky .drift i:nth-child(1){top:8%}.jl.sky .drift i:nth-child(2){top:18%;animation-duration:190s;animation-delay:-70s}.jl.sky .drift i:nth-child(3){top:28%;animation-duration:170s;animation-delay:-120s}
.twk{position:absolute;width:.32%;aspect-ratio:1;border-radius:50%;background:#FFE9B0;box-shadow:0 0 6px 2px rgba(255,214,120,.75);animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.12}50%{opacity:1}}
.glowp{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,196,96,.8),rgba(255,150,50,0));mix-blend-mode:screen;animation:flick 2.1s ease-in-out infinite;pointer-events:none}
.glowp.win{aspect-ratio:1.6;background:radial-gradient(closest-side,rgba(255,200,110,.45),rgba(255,170,70,0));animation:winglow 5s ease-in-out infinite alternate}
body.night .glowp{filter:brightness(1.25)}
@keyframes flick{0%{opacity:.7;transform:scale(1)}18%{opacity:1;transform:scale(1.08)}33%{opacity:.55;transform:scale(.96)}52%{opacity:.92;transform:scale(1.04)}70%{opacity:.62}86%{opacity:.95;transform:scale(1.02)}100%{opacity:.7;transform:scale(1)}}
@keyframes winglow{from{opacity:.45}to{opacity:1}}
.csmoke{position:absolute;width:5%;pointer-events:none}
.csmoke i{position:absolute;left:0;bottom:0;width:30%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(238,230,226,.7),rgba(238,230,226,0));opacity:0;animation:cpuff 6.5s ease-out infinite}
.csmoke i:nth-child(2){animation-delay:1.3s}.csmoke i:nth-child(3){animation-delay:2.6s}.csmoke i:nth-child(4){animation-delay:3.9s}.csmoke i:nth-child(5){animation-delay:5.2s}
@keyframes cpuff{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.8}100%{opacity:0;transform:translate(-150%,-330%) scale(3.4)}}
#sFg img{transform-origin:50% 100%;animation:sway 7s ease-in-out infinite alternate}
#sworld .sl:first-child img{animation:skydrift 90s ease-in-out infinite alternate}
.sdrift i:nth-child(1){top:50%}.sdrift i:nth-child(2){top:58%}.sdrift i:nth-child(3){top:66%}
@media (prefers-reduced-motion:reduce){.kite,.jflock,.jplane,.twk,.glowp,.csmoke,.drift,#sFg img{animation:none!important}.jflock,.jplane,.csmoke{display:none}}

/* ---------- Palampur tea estate welcome sign ---------- */
.teasign{position:absolute;left:19%;top:58.5%;width:10%;overflow:visible;filter:saturate(.92)}
.teasign .board{transform-box:view-box;transform-origin:70px 22px;animation:signsway 4.2s ease-in-out infinite alternate}
.teasign .t1{font:700 17px var(--f-hand,"Caveat",cursive);fill:#FFF1D6}
.teasign .t2{font:700 11.5px "Caveat",cursive;fill:#F6C46A}
.teasign .steam{opacity:0;animation:steam 2.8s ease-out infinite}
.teasign .s2{animation-delay:1.4s}
@keyframes signsway{from{transform:rotate(-2.2deg)}to{transform:rotate(2.2deg)}}
@keyframes steam{0%{opacity:0;transform:translateY(1px)}30%{opacity:.9}100%{opacity:0;transform:translateY(-4px)}}
body.night .teasign{filter:brightness(.85)}
body.night .teasign text{filter:drop-shadow(0 0 3px rgba(255,190,90,.7))}
@media (prefers-reduced-motion:reduce){.teasign .board,.teasign .steam{animation:none}.teasign .steam{opacity:.7}}

/* ---------- studio: snow on the peaks ---------- */
.sl .snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(#000 0,#000 54%,transparent 70%);mask-image:linear-gradient(#000 0,#000 54%,transparent 70%)}
.spin i{position:absolute;width:9%;aspect-ratio:3.2;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(3px);transform-origin:0 50%;opacity:0;animation:spindrift 6.5s ease-out infinite}
@keyframes spindrift{0%{opacity:0;transform:translate(0,0) scale(.3,.6)}25%{opacity:.85}100%{opacity:0;transform:translate(60%,-25%) scale(1.4,1.1)}}
/* ---------- studio interior: living details ---------- */
.snow-win{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ilive{position:absolute;inset:0;pointer-events:none}
.iglow{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,206,120,.42),rgba(255,170,70,0));mix-blend-mode:screen;animation:ibreathe 4.8s ease-in-out infinite alternate}
.iglow.pool{aspect-ratio:2.4;background:radial-gradient(closest-side,rgba(255,214,140,.28),rgba(255,180,80,0));animation-duration:6s}
.iglow.salt{background:radial-gradient(closest-side,rgba(255,150,60,.55),rgba(255,120,40,0));animation:salt 3.6s ease-in-out infinite alternate}
@keyframes ibreathe{from{opacity:.65}to{opacity:1}}
@keyframes salt{from{opacity:.5;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
.mscreen{position:absolute;left:32.6%;top:35.3%;width:15.2%;height:20.3%;overflow:hidden;border-radius:2px}
.mscreen::before{content:"";position:absolute;top:-20%;bottom:-20%;width:35%;left:-40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-12deg);animation:msweep 8s ease-in-out infinite}
.mscreen::after{content:"";position:absolute;left:0;right:0;top:62%;height:30%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 5px);animation:ripple 3s linear infinite;opacity:.8}
@keyframes msweep{0%,55%{left:-40%}100%{left:120%}}
@keyframes ripple{to{background-position:0 10px}}
.msteam{position:absolute;left:26.7%;top:55.6%;width:1.8%;height:8%;transform:translate(-50%,-100%)}
.msteam i{position:absolute;left:25%;bottom:0;width:50%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,246,230,.55),rgba(255,246,230,0));filter:blur(1px);opacity:0;animation:msteam 3.6s ease-out infinite}
.msteam i:nth-child(2){animation-delay:1.2s}.msteam i:nth-child(3){animation-delay:2.4s}
@keyframes msteam{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:.9}100%{opacity:0;transform:translate(35%,-380%) scale(1.9)}}
.pin{position:absolute;width:.55%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(230,60,50,.7);animation:pinping 3.6s ease-out infinite}
@keyframes pinping{0%{box-shadow:0 0 0 0 rgba(235,70,55,.75)}70%,100%{box-shadow:0 0 0 9px rgba(235,70,55,0)}}
.motes{position:absolute;left:3%;top:6%;width:58%;height:82%}
.motes i{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,236,190,.9);box-shadow:0 0 4px rgba(255,220,150,.9);animation:mote 14s ease-in-out infinite,twk 3.4s ease-in-out infinite alternate}
@keyframes mote{0%,100%{transform:translate(0,0)}25%{transform:translate(28px,-18px)}50%{transform:translate(8px,-40px)}75%{transform:translate(-20px,-16px)}}
@keyframes twk{from{opacity:.15}to{opacity:.95}}
body.night .motes{opacity:.35}
body.night .iglow{filter:brightness(1.35)}
body.night .mscreen::before{opacity:.6}
@media (prefers-reduced-motion:reduce){.spin,.motes,.msteam,.pin{display:none}.iglow,.mscreen::before,.mscreen::after{animation:none}}
/* ---------- studio letter: a paper plane from the desk lamp ---------- */
.pplane{position:absolute;left:0;top:0;width:76px;margin:-24px 0 0 -38px;z-index:3;opacity:0;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(10,6,25,.35))}
.pplane svg{display:block;width:100%}
.mailbox[data-stage=plane] .mb-veil{opacity:.5;transition:opacity 1.4s ease-in}
.mailbox[data-stage=plane] .env{transform:none;opacity:0}
@media (max-width:700px){.glider{width:11%;animation-name:glidem}#L-air{z-index:1}}
@keyframes glidem{0%{left:67%;top:70%;opacity:0}5%{opacity:1}80%{opacity:1}86%{left:43%;top:67%;opacity:0}100%{left:43%;top:67%;opacity:0}}

@media (max-width:700px){.brand{font-size:28px}}