/* noyateam — home page. Design px: 1920 desktop / 430 mobile. */

.stage, .hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; }
.fr { position: relative; width: calc(var(--k)*1920); height: calc(var(--k)*1080); flex: none; }
.pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }

/* ---------------- hero ---------------- */
.hero { background: radial-gradient(ellipse 70% 60% at 70% 45%, #FDF8F1, var(--cream) 70%); }
.hero .sun { position: absolute; width: calc(var(--k)*1020); left: calc(var(--k)*-330); top: calc(var(--k)*-400); will-change: transform; }
.tw { position: absolute; left: calc(var(--k)*330); bottom: calc(var(--k)*60); width: calc(var(--k)*560); will-change: transform, opacity; }
.tw .shadow { position: absolute; left: 4%; right: 4%; bottom: -4%; height: 16%; background: radial-gradient(ellipse, rgba(62, 10, 32, .32), transparent 68%); filter: blur(calc(var(--k)*8)); }
.tw > img { position: relative; width: 100%; transition: transform .06s; }
.tw.strike > img { transform: translateY(calc(var(--k)*2)); }
.tw .paper { position: absolute; left: 26.5%; width: 52%; top: 1.6%; height: 44.6%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%); mask-image: linear-gradient(to bottom, transparent, #000 14%); }
.tw .lines { position: absolute; right: 7%; left: 5%; bottom: 8%; font-size: calc(var(--k)*23); line-height: 1.95; color: #2B0A17; font-weight: 800; }
.tw .ln { white-space: nowrap; min-height: calc(var(--k)*45); position: relative; }
.js .tw .ln.wait { display: none; }
.tw .caret { position: absolute; top: calc(var(--k)*9); width: calc(var(--k)*2); height: calc(var(--k)*26); background: var(--wine); }
.tw .caret.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.wordmark { position: absolute; right: calc(var(--k)*200); top: calc(var(--k)*250); width: calc(var(--k)*600); display: grid; justify-items: center; gap: calc(var(--k)*18); will-change: transform, opacity; }
.logo-h img { width: calc(var(--k)*400); height: auto; }
.js .logo-h img { animation: logoin 1.4s var(--eo) .15s both; }
@keyframes logoin { from { opacity: 0; transform: translateY(calc(var(--k)*40)) scale(.96); filter: blur(calc(var(--k)*10)); } }
.hero .tag { font-size: calc(var(--k)*34); color: var(--soft); }
.js .hero .tag { animation: fadeup 1.1s var(--eo) .5s both; }
.hero .ctas { display: flex; gap: calc(var(--k)*16); margin-top: calc(var(--k)*16); }
.js .hero .ctas { animation: fadeup 1.1s var(--eo) .7s both; }
@keyframes fadeup { from { opacity: 0; transform: translateY(calc(var(--k)*50)); } }
.cue { position: absolute; left: 50%; bottom: calc(var(--k)*34); transform: translateX(-50%); display: grid; justify-items: center; gap: calc(var(--k)*10); font-size: calc(var(--k)*18); color: var(--soft); }
.js .cue { animation: fadein 1s 4.5s both; }
@keyframes fadein { from { opacity: 0; } }
.cue i { width: calc(var(--k)*1.5); height: calc(var(--k)*56); background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.cue i::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: var(--wine); animation: cue 1.8s var(--eio) infinite; }
@keyframes cue { from { top: -40%; } to { top: 100%; } }

/* ---------------- tea ---------------- */
.tea { position: relative; padding: calc(var(--k)*170) 0 calc(var(--k)*190); background: linear-gradient(180deg, var(--cream), var(--cream-2)); overflow: hidden; }
.tea .wrap { width: calc(var(--k)*1440); display: grid; grid-template-columns: 1fr calc(var(--k)*540); gap: calc(var(--k)*110); align-items: center; }
.tea-copy { display: grid; gap: calc(var(--k)*30); justify-items: start; }
.tea .h2 { font-size: calc(var(--k)*78); line-height: 1.32; }
.cta { position: relative; width: calc(var(--k)*600); padding-top: calc(var(--k)*200); }
.lantern { position: absolute; top: 0; left: calc(var(--k)*70); width: calc(var(--k)*150); height: calc(var(--k)*266); pointer-events: none; }
.lantern img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lantern .swing { position: absolute; inset: 0; transform-origin: 73% 15.5%; animation: swing 4.4s ease-in-out infinite alternate; }
@keyframes swing { from { transform: rotate(-3.2deg); } to { transform: rotate(3.2deg); } }
.lantern .glow { position: absolute; left: 62%; top: 55%; width: calc(var(--k)*260); height: calc(var(--k)*260); margin: calc(var(--k)*-130) 0 0 calc(var(--k)*-130); border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 90, .55), rgba(255, 170, 70, .15) 45%, transparent 70%); mix-blend-mode: screen; animation: flick 3s infinite; }
@keyframes flick { 0%, 100% { opacity: .85; } 13% { opacity: .62; } 22% { opacity: .95; } 48% { opacity: .72; } 54% { opacity: 1; } 79% { opacity: .7; } }
.book { position: relative; display: block; width: calc(var(--k)*600); transition: transform .6s var(--eo); cursor: pointer; }
.book:hover { transform: translateY(calc(var(--k)*-12)) rotate(-1.2deg); }
.book > img { width: 100%; }
.book .bshadow { position: absolute; left: 14%; right: 4%; bottom: -3%; height: 14%; background: radial-gradient(ellipse, rgba(62, 10, 32, .26), transparent 70%); filter: blur(calc(var(--k)*10)); transition: transform .6s var(--eo), opacity .6s; }
.book:hover .bshadow { transform: scale(1.08); opacity: 1.3; }
.book .pg { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--wine); }
.book .pg small { font-size: calc(var(--k)*22); line-height: 1.5; color: var(--soft); }
.book .pg strong { font-size: calc(var(--k)*46); line-height: 1.3; font-weight: 800; position: relative; }
.book .pg strong::after { content: ''; position: absolute; right: 10%; left: 10%; bottom: calc(var(--k)*-6); height: calc(var(--k)*3); background: var(--gold); transform: scaleX(0); transition: transform .5s var(--eo); }
.book:hover .pg strong::after { transform: scaleX(1); }
.book .pr { left: 61.8%; top: 21%; width: 27%; height: 43.5%; transform: rotate(1.5deg); }
.book .pl { left: 34.5%; top: 14%; width: 21%; height: 42%; transform: rotate(4deg) skewY(2deg); }
.book .flame { position: absolute; left: 15.3%; top: 24.5%; width: calc(var(--k)*64); height: calc(var(--k)*64); margin: calc(var(--k)*-32) 0 0 calc(var(--k)*-32); border-radius: 50%; background: radial-gradient(circle, rgba(255, 214, 128, .95), rgba(255, 150, 40, .32) 45%, transparent 70%); mix-blend-mode: screen; animation: flick 2.3s infinite; }
.arch-ph { position: relative; width: calc(var(--k)*560); }
.arch-ph .arch { width: calc(var(--k)*560); height: calc(var(--k)*756); border-radius: calc(var(--k)*280) calc(var(--k)*280) calc(var(--k)*26) calc(var(--k)*26); overflow: hidden; box-shadow: 0 0 0 calc(var(--k)*10) var(--paper), 0 0 0 calc(var(--k)*11.5) var(--gold), var(--shadow); }
.arch-ph .arch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 2.2s var(--eo); }
.arch-ph.in .arch img { transform: scale(1); }
.steam { position: absolute; left: 71%; top: 30%; width: calc(var(--k)*60); height: calc(var(--k)*120); overflow: visible; pointer-events: none; }
.steam path { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 3.2; stroke-linecap: round; filter: blur(calc(var(--k)*1.8)); stroke-dasharray: 60 220; animation: steam 3.6s ease-in infinite; }
.steam path:nth-child(2) { animation-delay: -1.2s; }
.steam path:nth-child(3) { animation-delay: -2.4s; }
@keyframes steam { 0% { stroke-dashoffset: 60; opacity: 0; transform: translateY(calc(var(--k)*6)); } 25% { opacity: .95; } 100% { stroke-dashoffset: -220; opacity: 0; transform: translateY(calc(var(--k)*-16)); } }
.clock { position: absolute; width: calc(var(--k)*176); filter: drop-shadow(0 calc(var(--k)*16) calc(var(--k)*18) rgba(62, 10, 32, .3)); }
.clock img { width: 100%; }
.clock.a { left: calc(var(--k)*-70); top: calc(var(--k)*-40); }
.clock.b { right: calc(var(--k)*-58); top: calc(var(--k)*-34); width: calc(var(--k)*138); }
.clock .hd { position: absolute; left: 50%; bottom: 53.3%; transform-origin: 50% 100%; border-radius: calc(var(--k)*4); background: var(--wine-2); }
.clock .hh { width: 3.6%; height: 17%; margin-left: -1.8%; }
.clock .mh { width: 2.4%; height: 25%; margin-left: -1.2%; }
.clock .sh { width: 1.1%; height: 29%; margin-left: -.55%; background: #9E1C2A; }
.clock b { position: absolute; left: 50%; top: 46.7%; width: 6%; height: 6%; margin: -3% 0 0 -3%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--gold-hi), var(--gold-lo)); }

/* ---------------- why me: chess box (plays by itself when in view; never holds the scroll) ---------------- */
.bai { position: relative; }
.bai .pin { position: relative; }
.bai .pin { background: radial-gradient(ellipse 55% 60% at 50% 38%, #FFFDF9 0%, #F8EFE3 55%, #EEDFCC 100%); }
.bai .pin::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(90, 15, 46, .08), transparent 70%); }
.bai-copy { position: absolute; right: calc(var(--k)*150); top: calc(var(--k)*190); width: calc(var(--k)*470); display: grid; gap: calc(var(--k)*20); justify-items: start; }
.bh { font-size: calc(var(--k)*120); line-height: 1.15; color: var(--wine); font-weight: 800; }
.bai-copy .lead { font-size: calc(var(--k)*27); }
.steps { position: absolute; z-index: 3; left: calc(var(--k)*120); top: calc(var(--k)*230); width: calc(var(--k)*470); list-style: none; display: grid; gap: calc(var(--k)*14); }
.steps > li { display: contents; }
.step { display: grid; grid-template-columns: calc(var(--k)*62) 1fr auto; gap: calc(var(--k)*18); align-items: center; padding: calc(var(--k)*13) calc(var(--k)*20); border-radius: calc(var(--k)*20); background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(90, 15, 46, .14); font-size: calc(var(--k)*25); color: var(--ink); opacity: .55; transform: translateX(calc(var(--k)*-14)); transition: opacity .5s, transform .6s var(--eo), background .5s, box-shadow .5s, color .5s; width: 100%; text-align: start; cursor: pointer; }
.step:hover { opacity: .85; }
.step.on { opacity: 1; transform: none; }
.step.cur { background: var(--wine); color: var(--cream); box-shadow: 0 calc(var(--k)*18) calc(var(--k)*30) calc(var(--k)*-18) rgba(62, 10, 32, .7); }
.step .sq { width: calc(var(--k)*62); height: calc(var(--k)*62); border-radius: calc(var(--k)*14); display: grid; place-items: center; background: conic-gradient(var(--wine) 0 25%, #F3E7D6 0 50%, var(--wine) 0 75%, #F3E7D6 0) 0 0 / 50% 50%; box-shadow: inset 0 0 0 calc(var(--k)*2) var(--gold); }
.step .sq img { height: calc(var(--k)*46); width: auto; filter: drop-shadow(0 calc(var(--k)*4) calc(var(--k)*4) rgba(0, 0, 0, .35)); }
.step .sl { display: block; line-height: 1.5; }
.step .sl .s1, .step .sl small { display: block; }
.step small { font-size: calc(var(--k)*17); opacity: .8; }
.step .op { font-size: calc(var(--k)*32); color: var(--gold); font-weight: 800; }
.step.res { opacity: .4; }
.step.res.on { opacity: 1; background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--wine-2); box-shadow: 0 0 0 calc(var(--k)*10) rgba(241, 221, 164, .25); }
.scene { position: absolute; left: calc(var(--k)*610); width: calc(var(--k)*700); top: calc(var(--k)*96); bottom: 0; }
.gcard { position: absolute; z-index: 1; left: 50%; top: calc(var(--k)*40); width: calc(var(--k)*330); height: calc(var(--k)*470); margin-left: calc(var(--k)*-165); border-radius: calc(var(--k)*30); background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .18)); -webkit-backdrop-filter: blur(calc(var(--k)*10)) saturate(1.2); backdrop-filter: blur(calc(var(--k)*10)) saturate(1.2); box-shadow: inset 0 0 0 calc(var(--k)*1.2) rgba(90, 15, 46, .22), 0 calc(var(--k)*40) calc(var(--k)*70) calc(var(--k)*-40) rgba(62, 10, 32, .45); cursor: pointer; transition: opacity .6s, transform .7s var(--eo); }
.gcard:hover { transform: translateY(calc(var(--k)*-6)); }
.gcard .ring { position: absolute; top: calc(var(--k)*18); left: calc(var(--k)*18); width: calc(var(--k)*16); height: calc(var(--k)*16); border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--k)*1.5) var(--wine); }
.gcard .caps { position: absolute; right: calc(var(--k)*26); left: calc(var(--k)*26); bottom: calc(var(--k)*22); height: calc(var(--k)*74); }
.gcard .cap { position: absolute; inset: 0; display: grid; align-content: end; justify-items: start; gap: calc(var(--k)*2); opacity: 0; transform: translateY(calc(var(--k)*10)); transition: opacity .45s, transform .6s var(--eo); }
.gcard .cap.on { opacity: 1; transform: none; }
.gcard .no { font-size: calc(var(--k)*15); color: var(--gold-lo); line-height: 1.5; }
.gcard .nm2 { font-size: calc(var(--k)*22); color: var(--wine); font-weight: 800; line-height: 1.4; }
.gcard .tapme { position: absolute; top: calc(var(--k)*14); right: calc(var(--k)*18); font-size: calc(var(--k)*14); color: var(--soft); padding: calc(var(--k)*2) calc(var(--k)*10); border-radius: calc(var(--k)*999); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(90, 15, 46, .2); }
.scene.done .gcard { opacity: 0; transform: translateY(calc(var(--k)*-30)) scale(.94); pointer-events: none; }
.pieces { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.pc { position: absolute; left: 50%; top: calc(var(--k)*70); width: calc(var(--k)*116); height: calc(var(--k)*330); margin-left: calc(var(--k)*-58); object-fit: contain; transform-origin: 50% 100%; will-change: transform, filter, opacity; filter: drop-shadow(0 calc(var(--k)*24) calc(var(--k)*22) rgba(62, 10, 32, .32)); }
.box { position: absolute; left: 50%; bottom: calc(var(--k)*-14); width: calc(var(--k)*640); height: calc(var(--k)*438); margin-left: calc(var(--k)*-320); }
.box .bk { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }
.box .bf { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; }
.box .glow { position: absolute; z-index: 2; left: 10%; right: 10%; top: 28%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse, rgba(241, 221, 164, .95), rgba(199, 161, 90, .4) 45%, transparent 70%); opacity: 0; transition: opacity 1s; mix-blend-mode: screen; }
.scene.done .box .glow { opacity: 1; animation: gpulse 2.4s ease-in-out infinite; }
@keyframes gpulse { 50% { opacity: .55; } }
.pieces.drop { z-index: 2; }
.bres { position: absolute; z-index: 4; pointer-events: none; left: 50%; top: calc(var(--k)*150); transform: translate(-50%, calc(var(--k)*30)); display: flex; align-items: center; gap: calc(var(--k)*14); padding: calc(var(--k)*16) calc(var(--k)*34); border-radius: calc(var(--k)*999); background: linear-gradient(135deg, var(--gold-hi), var(--gold) 55%, var(--gold-lo)); color: var(--wine-2); box-shadow: 0 calc(var(--k)*30) calc(var(--k)*50) calc(var(--k)*-24) rgba(62, 10, 32, .6); opacity: 0; transition: opacity .7s, transform .9s var(--eo); white-space: nowrap; }
.scene.done .bres { opacity: 1; transform: translate(-50%, 0); }
.bres .eq { font-size: calc(var(--k)*40); font-weight: 800; line-height: 1.2; }
.bres .rt { font-size: calc(var(--k)*32); font-weight: 800; line-height: 1.4; }
.bpanel { position: absolute; z-index: 6; left: 50%; top: calc(var(--k)*210); width: calc(var(--k)*860); margin-left: calc(var(--k)*-430); min-height: calc(var(--k)*470); border-radius: calc(var(--k)*34); padding: calc(var(--k)*36) calc(var(--k)*40); display: grid; grid-template-columns: 1fr calc(var(--k)*230); gap: calc(var(--k)*34); background: linear-gradient(160deg, rgba(255, 253, 249, .9), rgba(248, 240, 229, .82)); -webkit-backdrop-filter: blur(calc(var(--k)*18)); backdrop-filter: blur(calc(var(--k)*18)); box-shadow: inset 0 0 0 calc(var(--k)*1.2) rgba(90, 15, 46, .2), 0 calc(var(--k)*60) calc(var(--k)*90) calc(var(--k)*-50) rgba(62, 10, 32, .55); opacity: 0; visibility: hidden; transform: translateY(calc(var(--k)*26)) scale(.96); transition: opacity .45s, transform .7s cubic-bezier(.16, 1, .3, 1), visibility 0s .7s; }
.bpanel.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .7s cubic-bezier(.16, 1, .3, 1); }
.bpanel .x { position: absolute; top: calc(var(--k)*18); left: calc(var(--k)*18); }
.bp-art { position: relative; order: 2; display: grid; place-items: center; border-radius: calc(var(--k)*26); background: radial-gradient(circle at 50% 40%, #fff, #F3E7D6); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .45); min-height: calc(var(--k)*380); }
.bpi { position: absolute; height: calc(var(--k)*300); width: calc(var(--k)*110); object-fit: contain; opacity: 0; transform: translateY(calc(var(--k)*20)) scale(.9); transition: opacity .5s, transform .7s var(--eo); filter: drop-shadow(0 calc(var(--k)*18) calc(var(--k)*18) rgba(62, 10, 32, .3)); }
.bpi.on { opacity: 1; transform: none; }
.bp-copy { order: 1; display: grid; gap: calc(var(--k)*14); align-content: start; }
.bp-k { font-size: calc(var(--k)*17); color: var(--gold-lo); }
.bp-t { position: relative; min-height: calc(var(--k)*150); }
.bpt { position: absolute; inset: 0; opacity: 0; transform: translateY(calc(var(--k)*10)); transition: opacity .4s, transform .6s var(--eo); }
.bpt.on { opacity: 1; transform: none; }
.bpt h3 { font-size: calc(var(--k)*40); color: var(--wine); font-weight: 800; line-height: 1.35; }
.bpt p { font-size: calc(var(--k)*22); color: var(--soft); line-height: 1.8; margin-top: calc(var(--k)*6); }
.tracks { list-style: none; display: grid; gap: calc(var(--k)*4); }
.tracks li { display: grid; grid-template-columns: calc(var(--k)*40) 1fr auto; gap: calc(var(--k)*12); align-items: center; padding: calc(var(--k)*8) calc(var(--k)*14); border-radius: calc(var(--k)*12); font-size: calc(var(--k)*19); color: var(--ink); cursor: pointer; transition: background .3s, color .3s; }
.tracks li:hover { background: rgba(90, 15, 46, .06); }
.tracks li.on { background: var(--wine); color: var(--cream); }
.tracks .tn { font-size: calc(var(--k)*18); opacity: .7; }
.tracks .to { color: var(--gold); font-weight: 800; }
.tracks li.on .to { color: var(--gold-hi); }
.bhint { position: absolute; left: 50%; bottom: calc(var(--k)*26); transform: translateX(-50%); font-size: calc(var(--k)*17); color: var(--soft); white-space: nowrap; transition: opacity .5s; }
.scene.done ~ .bhint { opacity: 0; }

/* ---------------- why noya (pinned horizontal) ---------------- */
.why { position: relative; height: 260vh; background: var(--cream); }
.whint { display: none; }
.why .pin { background: var(--cream); }
.why-head { position: absolute; top: calc(var(--k)*120); right: calc(var(--k)*310); left: calc(var(--k)*310); display: flex; justify-content: space-between; align-items: flex-end; }
.why-head .h2 { font-size: calc(var(--k)*104); }
.why-head .wsub { font-size: calc(var(--k)*22); color: var(--soft); padding-bottom: calc(var(--k)*26); }
.track { position: absolute; top: calc(var(--k)*340); right: calc(var(--k)*310); display: flex; gap: calc(var(--k)*48); will-change: transform; perspective: calc(var(--k)*1600); }
.card { position: relative; flex: none; width: calc(var(--k)*520); height: calc(var(--k)*610); border-radius: calc(var(--k)*36); padding: calc(var(--k)*70) calc(var(--k)*36) calc(var(--k)*38); display: grid; grid-template-rows: 1fr auto; gap: calc(var(--k)*14); background: var(--paper); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .45), inset 0 0 0 calc(var(--k)*10) var(--paper), inset 0 0 0 calc(var(--k)*11) rgba(199, 161, 90, .3), 0 calc(var(--k)*40) calc(var(--k)*70) calc(var(--k)*-40) rgba(62, 10, 32, .45); will-change: transform; }
.card .drip { position: absolute; z-index: 3; left: calc(var(--k)*-2); top: calc(var(--k)*-12); width: calc(var(--k)*524); height: auto; pointer-events: none; }
.card .art { position: relative; display: grid; place-items: center; min-height: 0; }
.card .art img { max-width: 100%; max-height: calc(var(--k)*300); }
.card .num { position: absolute; z-index: 2; top: calc(var(--k)*40); right: calc(var(--k)*36); font-size: calc(var(--k)*120); line-height: 1; color: transparent; -webkit-text-stroke: calc(var(--k)*2) var(--gold); }
.card .num .tx::before { background-color: var(--gold); }
.card .ct { font-size: calc(var(--k)*27); line-height: 1.85; color: var(--ink); }
.c1 .art img { animation: breathe 5s ease-in-out infinite; transform-origin: 70% 80%; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 18%); mask-image: linear-gradient(to top, transparent 0, #000 18%); }
@keyframes breathe { 50% { transform: scale(1.04) rotate(-1deg); } }
.c2 .art img { animation: toast 4s ease-in-out infinite; transform-origin: 20% 100%; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 30%); mask-image: linear-gradient(to top, transparent 0, #000 30%); }
@keyframes toast { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(4deg) translateY(calc(var(--k)*-6)); } }
.c3 .art img { transform-origin: 72% 80%; transform: scaleX(.15) rotate(-24deg); transition: transform 1.2s cubic-bezier(.34, 1.4, .64, 1); }
.c3.open .art img { transform: none; }
.c4 .art img { animation: heel 3.6s cubic-bezier(.5, 0, .2, 1) infinite; transform-origin: 80% 90%; }
@keyframes heel { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg) translateY(calc(var(--k)*-12)); } 55% { transform: rotate(1deg); } }
.c5 .art img { animation: floatY 5.5s ease-in-out infinite; }
@keyframes floatY { 50% { transform: translateY(calc(var(--k)*-14)) rotate(1.5deg); } }
.why .bar { position: absolute; left: calc(var(--k)*310); right: calc(var(--k)*310); bottom: calc(var(--k)*70); height: calc(var(--k)*2); background: var(--line); }
.why .bar i { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; transform-origin: 100% 50%; transform: scaleX(0); background: linear-gradient(270deg, var(--gold-lo), var(--gold-hi)); }

/* ---------------- collaborations ---------------- */
.collab { position: relative; padding: calc(var(--k)*170) 0 calc(var(--k)*200); background: linear-gradient(180deg, var(--cream), var(--cream-2)); overflow: hidden; }
.center { text-align: center; display: grid; justify-items: center; gap: calc(var(--k)*18); }
.collab .row { display: flex; justify-content: center; gap: calc(var(--k)*200); margin-top: calc(var(--k)*90); }
.royal { position: relative; width: calc(var(--k)*400); height: calc(var(--k)*437); transition: transform .7s var(--eo); }
.royal .pic { position: absolute; left: 17.4%; top: 23%; width: 66%; height: 60.4%; border-radius: 50%; object-fit: cover; }
.royal .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.royal .shine { position: absolute; inset: 0; -webkit-mask: url(../a/frame-round.webp) center / 100% 100% no-repeat; mask: url(../a/frame-round.webp) center / 100% 100% no-repeat; background: linear-gradient(115deg, transparent 38%, rgba(255, 248, 220, .95) 50%, transparent 62%) 0 0 / 300% 100%; mix-blend-mode: overlay; animation: shine 5s ease-in-out infinite; }
@keyframes shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
.who { display: grid; justify-items: center; gap: calc(var(--k)*18); }
.who:hover .royal { transform: rotate(-4deg) scale(1.03); }
.who .handle { font-family: Abar; font-size: calc(var(--k)*50); color: var(--wine); direction: ltr; line-height: 1.3; }
.who .fol { display: flex; align-items: center; gap: calc(var(--k)*12); font-family: Abar; color: var(--soft); }
.who .fol .cnt { font-size: calc(var(--k)*40); color: var(--gold-lo); line-height: 1.3; direction: ltr; min-width: calc(var(--k)*150); text-align: center; }
.who .fol .fw { font-size: calc(var(--k)*28); line-height: 1.3; }
.leo-cap { position: absolute; left: calc(var(--k)*40); bottom: calc(var(--k)*60); width: calc(var(--k)*420); }

/* ---------------- results ---------------- */
.results { position: relative; padding: calc(var(--k)*170) 0 calc(var(--k)*150); background: var(--cream-2); overflow: hidden; }
.res-top { display: grid; grid-template-columns: 1fr calc(var(--k)*640); gap: calc(var(--k)*60); align-items: center; }
.res-copy { display: grid; gap: calc(var(--k)*24); justify-items: start; }
.tv { position: relative; width: calc(var(--k)*640); }
.tv > img { width: 100%; }
.tv .scr { position: absolute; left: 12.4%; top: 9.6%; width: 57.2%; height: 46%; border-radius: 13% / 16%; overflow: hidden; background: radial-gradient(ellipse, #2B1E18, #0B0705 80%); box-shadow: inset 0 0 calc(var(--k)*40) rgba(0, 0, 0, .8); transform: scaleY(.01); opacity: 0; transition: transform .55s var(--eo), opacity .3s; }
.tv.on .scr { transform: none; opacity: 1; }
.tv canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; image-rendering: pixelated; }
.tv.static canvas { opacity: 1; }
.tv .txt { position: absolute; inset: 8%; color: #FDF3DC; }
.tv .stat { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--k)*8); text-align: center; opacity: 0; transition: opacity .15s; }
.tv .stat.on { opacity: 1; }
.tv.static .stat { opacity: 0; }
.tv .stat .tx { filter: drop-shadow(0 0 calc(var(--k)*10) rgba(255, 220, 160, .55)); }
.tv .big { font-size: calc(var(--k)*54); line-height: 1.3; color: var(--gold-hi); font-weight: 800; white-space: nowrap; }
.tv .sm { font-size: calc(var(--k)*23); line-height: 1.5; white-space: nowrap; }
.tv .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 calc(var(--k)*1), transparent calc(var(--k)*1) calc(var(--k)*3)); }

/* carousels */
.carousel { position: relative; height: calc(var(--k)*800); margin-top: calc(var(--k)*110); touch-action: pan-y; }
.citem { position: absolute; left: 50%; top: 0; transition: transform .85s var(--eio), filter .85s var(--eio), opacity .85s var(--eio); will-change: transform; }
.citem.side { cursor: pointer; }
.citem.side > * { pointer-events: none; }
.reelcard { width: calc(var(--k)*420); padding: calc(var(--k)*26); border: calc(var(--k)*46) solid transparent; border-image: url(../a/frame-rect.webp) 125 / calc(var(--k)*46) / 0 round; filter: drop-shadow(0 calc(var(--k)*26) calc(var(--k)*26) rgba(62, 10, 32, .3)); }
.reel { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #fff; border-radius: calc(var(--k)*6); overflow: hidden; display: flex; flex-direction: column; gap: calc(var(--k)*8); padding: calc(var(--k)*70) calc(var(--k)*16) calc(var(--k)*16); }
.reel .rh { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--k)*54); display: flex; align-items: center; gap: calc(var(--k)*10); padding: 0 calc(var(--k)*16); border-bottom: calc(var(--k)*1) solid #EFEFEF; color: #262626; }
.reel .rh img { width: calc(var(--k)*32); height: calc(var(--k)*32); border-radius: 50%; object-fit: cover; }
.reel .rn { font-size: calc(var(--k)*17); font-weight: 800; }
.reel .rp { margin-right: auto; color: #8E8E8E; font-size: calc(var(--k)*14); }
.reel .sp { margin-top: auto; }
.bub > span { display: block; }
.bub { align-self: flex-start; max-width: 94%; background: #EFEFEF; color: #262626; border-radius: calc(var(--k)*18); padding: calc(var(--k)*10) calc(var(--k)*14); font-size: calc(var(--k)*16); line-height: 1.75; }
.s15 .bub { font-size: calc(var(--k)*15); } .s16 .bub { font-size: calc(var(--k)*16); } .s17 .bub { font-size: calc(var(--k)*17); } .s18 .bub { font-size: calc(var(--k)*18); }
.from { display: flex; align-items: flex-end; gap: calc(var(--k)*8); }
.from img { width: calc(var(--k)*24); height: calc(var(--k)*24); border-radius: 50%; object-fit: cover; flex: none; }
.from .bub { max-width: 88%; }
.reel.tg { background: linear-gradient(160deg, #C9DDF0, #B6D1E8); }
.reel.tg .rh { background: rgba(255, 255, 255, .6); justify-content: center; }
.reel.tg .rp { margin: 0; color: #2B5278; font-size: calc(var(--k)*16); font-weight: 800; }
.reel.tg .bub { background: #fff; }
.reel.tg .bub.me { align-self: flex-end; background: #EFFDDE; }
.cctrl { position: absolute; left: 50%; bottom: calc(var(--k)*-10); transform: translateX(-50%); display: flex; gap: calc(var(--k)*22); align-items: center; direction: ltr; }
.arrow { width: calc(var(--k)*60); height: calc(var(--k)*60); border-radius: 50%; display: grid; place-items: center; background: var(--paper); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .5), 0 calc(var(--k)*10) calc(var(--k)*22) calc(var(--k)*-12) rgba(62, 10, 32, .5); transition: transform .35s var(--eo); }
.arrow:hover { transform: scale(1.08); }
.arrow svg { width: calc(var(--k)*26); height: calc(var(--k)*26); fill: none; stroke: var(--wine); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dots { display: flex; gap: calc(var(--k)*10); }
.dots i { width: calc(var(--k)*10); height: calc(var(--k)*10); border-radius: calc(var(--k)*5); background: rgba(90, 15, 46, .2); transition: width .5s var(--eo), background .5s; cursor: pointer; }
.dots i.on { width: calc(var(--k)*32); background: var(--wine); }

/* ---------------- services + courses ---------------- */
.offer { position: relative; padding: calc(var(--k)*170) 0 calc(var(--k)*140); background: var(--cream); }
.offer-head { display: flex; justify-content: space-between; align-items: flex-end; }
.offer-head .lead { max-width: calc(var(--k)*560); font-size: calc(var(--k)*26); }
.sub { font-size: calc(var(--k)*40); color: var(--wine); display: flex; align-items: center; gap: calc(var(--k)*18); margin-top: calc(var(--k)*90); font-weight: 800; }
.sub::before { content: ''; width: calc(var(--k)*50); height: calc(var(--k)*2); background: var(--gold); }
.svc { height: calc(var(--k)*720); margin-top: calc(var(--k)*40); }
.svcwrap { display: grid; justify-items: center; gap: calc(var(--k)*26); }
.spot { display: block; width: calc(var(--k)*470); height: calc(var(--k)*532); border-radius: calc(var(--k)*30); overflow: hidden; position: relative; background: #2A0A14 url(../a/spotlight-card.jpg) center / cover; box-shadow: 0 calc(var(--k)*40) calc(var(--k)*70) calc(var(--k)*-40) rgba(30, 5, 15, .7); cursor: pointer; }
.spot .beam { position: absolute; inset: 0; background: radial-gradient(ellipse 42% 70% at 50% -5%, rgba(255, 236, 190, .36), transparent 70%); mix-blend-mode: screen; animation: beam 5s ease-in-out infinite; }
@keyframes beam { 0%, 100% { opacity: .68; } 40% { opacity: 1; } 55% { opacity: .8; } }
.spot .dust { position: absolute; width: calc(var(--k)*3); height: calc(var(--k)*3); border-radius: 50%; background: rgba(255, 240, 200, .9); box-shadow: 0 0 calc(var(--k)*6) rgba(255, 240, 200, .9); animation: dust 9s linear infinite; opacity: 0; }
.spot .dust:nth-of-type(2) { left: 36%; top: 62%; animation-delay: -1.2s; } .spot .dust:nth-of-type(3) { left: 58%; top: 48%; animation-delay: -2.6s; --dx: calc(var(--k)*-18); }
.spot .dust:nth-of-type(4) { left: 44%; top: 78%; animation-delay: -4s; } .spot .dust:nth-of-type(5) { left: 66%; top: 70%; animation-delay: -5.3s; --dx: calc(var(--k)*14); }
.spot .dust:nth-of-type(6) { left: 52%; top: 40%; animation-delay: -6.5s; --dx: calc(var(--k)*-10); } .spot .dust:nth-of-type(7) { left: 40%; top: 52%; animation-delay: -7.8s; }
@keyframes dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(var(--dx, calc(var(--k)*20)), calc(var(--k)*-170)); opacity: 0; } }
.spot .ttl { position: absolute; left: 30%; width: 40.3%; top: 40.1%; height: 36.6%; display: flex; align-items: center; justify-content: center; padding: calc(var(--k)*10); text-align: center; color: var(--wine); font-weight: 800; line-height: 1.35; transition: opacity .5s, filter .5s, transform .6s var(--eo); }
.spot .ttl > span { display: block; }
.spot .t1 { font-size: calc(var(--k)*46); } .spot .t2 { font-size: calc(var(--k)*36); } .spot .t3 { font-size: calc(var(--k)*30); } .spot .t4 { font-size: calc(var(--k)*27); } .spot .t5 { font-size: calc(var(--k)*30); }
.spot .desc { position: absolute; inset: 7% 8%; border-radius: calc(var(--k)*22); padding: calc(var(--k)*34) calc(var(--k)*32); background: rgba(40, 7, 20, .82); -webkit-backdrop-filter: blur(calc(var(--k)*6)); backdrop-filter: blur(calc(var(--k)*6)); color: var(--cream); text-align: right; box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(241, 221, 164, .35); opacity: 0; transform: scale(.94); transition: opacity .5s, transform .6s var(--eo); display: block; }
.spot .dh { display: block; font-size: calc(var(--k)*32); color: var(--gold-hi); margin-bottom: calc(var(--k)*8); font-weight: 800; line-height: 1.5; }
.spot .dp { display: block; font-size: calc(var(--k)*21); line-height: 2; }
.spot .tap { position: absolute; bottom: calc(var(--k)*22); left: 0; right: 0; text-align: center; font-size: calc(var(--k)*17); color: rgba(248, 240, 229, .78); transition: opacity .4s; }
.spot.open .ttl { opacity: 0; filter: blur(calc(var(--k)*8)); transform: scale(.92); }
.spot.open .desc { opacity: 1; transform: none; }
.spot.open .tap { opacity: 0; }
.crs { height: calc(var(--k)*760); margin-top: calc(var(--k)*40); }
.course { width: calc(var(--k)*430); padding: calc(var(--k)*26) calc(var(--k)*28) calc(var(--k)*30); border-radius: calc(var(--k)*34); background: var(--paper); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .45), 0 calc(var(--k)*40) calc(var(--k)*70) calc(var(--k)*-40) rgba(62, 10, 32, .45); display: grid; gap: calc(var(--k)*14); }
.course .art { position: relative; height: calc(var(--k)*290); display: grid; place-items: center; }
.course .art img { max-height: calc(var(--k)*280); max-width: calc(var(--k)*360); }
.course .ch { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--k)*10); }
.course .cn2 { font-size: calc(var(--k)*38); color: var(--wine); line-height: 1.4; font-weight: 800; }
.chip { display: block; font-size: calc(var(--k)*17); padding: calc(var(--k)*4) calc(var(--k)*16); border-radius: calc(var(--k)*999); background: rgba(47, 107, 79, .12); color: #2F6B4F; line-height: 1.8; white-space: nowrap; }
.chip.g { background: rgba(199, 161, 90, .2); color: var(--gold-lo); }
.chip.r { background: rgba(163, 18, 42, .1); color: #A3122A; }
.chip.s { background: rgba(114, 117, 125, .14); color: var(--gray); }
.course .cd { font-size: calc(var(--k)*22); line-height: 1.85; color: var(--soft); min-height: calc(var(--k)*82); }
.add { display: grid; justify-items: center; padding: calc(var(--k)*14); border-radius: calc(var(--k)*22); background: var(--wine); color: var(--cream); box-shadow: 0 calc(var(--k)*16) calc(var(--k)*30) calc(var(--k)*-16) rgba(62, 10, 32, .6); transition: transform .35s var(--eo), background .4s; width: 100%; text-align: center; }
.add:hover { transform: translateY(calc(var(--k)*-3)); }
.add .pr { display: block; font-size: calc(var(--k)*28); color: var(--gold-hi); line-height: 1.5; }
.add .lb { display: block; font-size: calc(var(--k)*19); line-height: 1.5; white-space: nowrap; }
.add.off { background: rgba(114, 117, 125, .2); color: var(--gray); box-shadow: none; cursor: default; }
.add.off:hover { transform: none; }
.add.ok { background: #2F6B4F; }
.art-senator img { animation: hg 6s var(--eio) infinite; }
@keyframes hg { 0%, 35% { transform: rotate(0); } 50%, 85% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.art-delfino img { animation: leap 4.2s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes leap { 0%, 100% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(-4%, -10%) rotate(-6deg); } }
.art-nahayat svg { position: absolute; inset: 8% 4%; width: 92%; height: 84%; overflow: visible; }
.art-nahayat path { fill: none; stroke: var(--wine); stroke-width: 10; stroke-linecap: round; opacity: .5; stroke-dasharray: 600; animation: paint 5s ease-in-out infinite; }
@keyframes paint { 0% { stroke-dashoffset: 600; } 45%, 75% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -600; } }
.art-nahayat img { position: relative; animation: brush 5s ease-in-out infinite; }
@keyframes brush { 0%, 100% { transform: translate(6%, 0); } 45% { transform: translate(-6%, -4%) rotate(-6deg); } }
.art-victor img { -webkit-mask-image: radial-gradient(ellipse 58% 62% at 50% 40%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 58% 62% at 50% 40%, #000 62%, transparent 100%); animation: crown 4.6s ease-in-out infinite; }
@keyframes crown { 50% { transform: translateY(-2%) scale(1.02); } }
.art-vip .royal { width: calc(var(--k)*250); height: calc(var(--k)*273); }
.gemfly { position: fixed; z-index: 950; left: 0; top: 0; width: calc(var(--k)*26); height: calc(var(--k)*26); margin: calc(var(--k)*-13) 0 0 calc(var(--k)*-13); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFD3DB, #C2185B 38%, #6A0D2B 78%); box-shadow: 0 0 calc(var(--k)*18) rgba(194, 24, 91, .7); pointer-events: none; }

/* ---------------- contact: Nokia (pinned zoom) ---------------- */
.contact { position: relative; height: 200vh; }
.contact .pin { background: radial-gradient(ellipse at 50% 60%, #FFF9EF, var(--cream-2)); }
.chead { position: absolute; z-index: 3; top: calc(var(--k)*130); left: 0; right: 0; display: grid; justify-items: center; gap: calc(var(--k)*14); text-align: center; transition: opacity .3s; }
.nphoto { position: absolute; left: calc(var(--k)*700); top: calc(var(--k)*260); width: calc(var(--k)*520); height: calc(var(--k)*779); transform-origin: 0 0; transform: translate(calc(var(--k) * var(--zx, 0)), calc(var(--k) * var(--zy, 0))) scale(var(--zs, 1)); }
.nphoto .np { width: 100%; height: 100%; border-radius: calc(var(--k)*30); box-shadow: var(--shadow); object-fit: cover; }
/* the phone screen and keys are drawn at 3x and shown from the start, so they stay sharp when the photo zooms in */
.nui { position: absolute; left: 0; top: 0; width: calc(var(--k)*1560); height: calc(var(--k)*2337); transform: scale(.33333); transform-origin: 0 0; }
.lcd { position: absolute; left: 18.4%; top: 43.9%; width: 16.6%; height: 8.6%; border-radius: calc(var(--k)*18); overflow: hidden; padding: calc(var(--k)*6) calc(var(--k)*12); background: linear-gradient(180deg, #BCCD9B, #A0B57F); box-shadow: inset 0 0 calc(var(--k)*18) rgba(30, 50, 20, .45); color: #1D2A12; }
.lcd .bar2 { display: flex; justify-content: space-between; align-items: center; height: calc(var(--k)*22); direction: ltr; font-family: var(--sys); font-size: calc(var(--k)*15); line-height: 1; }
.lcd .bar2 i { width: calc(var(--k)*21); height: calc(var(--k)*12); background: repeating-linear-gradient(90deg, #1D2A12 0 calc(var(--k)*3), transparent calc(var(--k)*3) calc(var(--k)*6)); }
.lcd .view { position: absolute; left: calc(var(--k)*12); right: calc(var(--k)*12); top: calc(var(--k)*30); bottom: calc(var(--k)*6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k)*2); opacity: 0; visibility: hidden; transition: opacity .2s; }
.lcd .view.on { opacity: 1; visibility: visible; }
.lcd .view p, .lcd .view a, .lcd .view button { display: block; font-size: calc(var(--k)*24); line-height: 1.45; white-space: nowrap; color: #1D2A12; font-weight: 800; }
.lcd .view a:hover, .lcd .view button:hover { background: #1D2A12; color: #BCCD9B; }
.lcd .view .pl1 { font-size: calc(var(--k)*30); }
.keys { position: absolute; left: 16.6%; top: 54%; width: 21.8%; height: 17%; border-radius: calc(var(--k)*48) calc(var(--k)*48) calc(var(--k)*78) calc(var(--k)*78); padding: calc(var(--k)*24) calc(var(--k)*27); background: linear-gradient(180deg, #24325A, #19244A); display: grid; align-content: center; gap: calc(var(--k)*18); }
.key { height: calc(var(--k)*66); border-radius: calc(var(--k)*18); background: linear-gradient(180deg, #ECEFF3, #B8BEC8); color: #1A2546; box-shadow: 0 calc(var(--k)*6) 0 #8A919C, inset 0 calc(var(--k)*3) 0 #fff; font-size: calc(var(--k)*24); line-height: calc(var(--k)*66); text-align: center; white-space: nowrap; transition: transform .1s, box-shadow .1s; }
.key:hover { background: linear-gradient(180deg, #fff, #C8CDD6); }
.key:active, .key.pr { transform: translateY(calc(var(--k)*6)); box-shadow: 0 0 0 #8A919C, inset 0 calc(var(--k)*3) 0 #fff; }
.hintp { position: absolute; left: 41%; top: 56%; display: flex; align-items: center; gap: calc(var(--k)*18); padding: calc(var(--k)*16) calc(var(--k)*34) calc(var(--k)*16) calc(var(--k)*20); border-radius: calc(var(--k)*999); background: rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(calc(var(--k)*14)) saturate(1.3); backdrop-filter: blur(calc(var(--k)*14)) saturate(1.3); box-shadow: inset 0 0 0 calc(var(--k)*2) rgba(255, 255, 255, .6), 0 calc(var(--k)*30) calc(var(--k)*50) calc(var(--k)*-20) rgba(42, 8, 21, .45); color: var(--wine); font-size: calc(var(--k)*44); font-weight: 800; white-space: nowrap; pointer-events: none; animation: hintb 2.4s ease-in-out infinite; }
.hintp i { position: relative; width: calc(var(--k)*44); height: calc(var(--k)*44); border-radius: 50%; background: var(--wine); flex: none; }
.hintp i::after { content: ''; position: absolute; inset: calc(var(--k)*-10); border-radius: 50%; border: calc(var(--k)*3) solid var(--wine); animation: hring 1.6s ease-out infinite; }
@keyframes hring { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes hintb { 50% { transform: translateX(calc(var(--k)*-14)); } }
.nphoto.used .hintp { opacity: 0; transition: opacity .4s; }

/* ====================== mobile (430) ====================== */
@media (max-width: 1023px) {
  .fr { width: calc(var(--k)*430); height: calc(var(--k)*860); }
  .hero .sun { width: calc(var(--k)*380); left: calc(var(--k)*-170); top: calc(var(--k)*-150); }
  .wordmark { right: 0; left: 0; top: calc(var(--k)*120); width: auto; gap: calc(var(--k)*10); }
  .logo-h img { width: calc(var(--k)*230); }
  .hero .tag { font-size: calc(var(--k)*18); }
  .hero .ctas { gap: calc(var(--k)*10); margin-top: calc(var(--k)*8); }
  .tw { left: calc(var(--k)*85); bottom: calc(var(--k)*34); width: calc(var(--k)*260); }
  .tw .lines { font-size: calc(var(--k)*11); }
  .tw .ln { min-height: calc(var(--k)*21.5); }
  .tw .caret { top: calc(var(--k)*4); width: calc(var(--k)*1.5); height: calc(var(--k)*13); }
  .cue { display: none; }

  .tea { padding: calc(var(--k)*90) 0 calc(var(--k)*100); }
  .tea .wrap { width: calc(var(--k)*382); grid-template-columns: 1fr; gap: calc(var(--k)*50); }
  .tea-copy { gap: calc(var(--k)*18); justify-items: center; text-align: center; }
  .tea .h2 { font-size: calc(var(--k)*40); }
  .cta { width: calc(var(--k)*382); padding-top: calc(var(--k)*100); }
  .lantern { left: calc(var(--k)*40); width: calc(var(--k)*80); height: calc(var(--k)*142); }
  .lantern .glow { width: calc(var(--k)*140); height: calc(var(--k)*140); margin: calc(var(--k)*-70) 0 0 calc(var(--k)*-70); }
  .book { width: calc(var(--k)*382); }
  .book .pg small { font-size: calc(var(--k)*14); }
  .book .pg strong { font-size: calc(var(--k)*28); }
  .book .pg strong::after { height: calc(var(--k)*2); bottom: calc(var(--k)*-3); }
  .book .flame { width: calc(var(--k)*40); height: calc(var(--k)*40); margin: calc(var(--k)*-20) 0 0 calc(var(--k)*-20); }
  .arch-ph { width: calc(var(--k)*300); justify-self: center; }
  .arch-ph .arch { width: calc(var(--k)*300); height: calc(var(--k)*405); border-radius: calc(var(--k)*150) calc(var(--k)*150) calc(var(--k)*18) calc(var(--k)*18); box-shadow: 0 0 0 calc(var(--k)*7) var(--paper), 0 0 0 calc(var(--k)*8.5) var(--gold), var(--shadow); }
  .steam { width: calc(var(--k)*34); height: calc(var(--k)*68); }
  .clock { width: calc(var(--k)*96); }
  .clock.a { left: calc(var(--k)*-30); top: calc(var(--k)*-24); }
  .clock.b { right: calc(var(--k)*-26); top: calc(var(--k)*-18); width: calc(var(--k)*76); }

  .bai-copy { right: calc(var(--k)*24); left: calc(var(--k)*24); top: calc(var(--k)*80); width: auto; justify-items: center; text-align: center; gap: calc(var(--k)*6); }
  .bh { font-size: calc(var(--k)*52); }
  .bai-copy .lead { font-size: calc(var(--k)*15); line-height: 1.8; }
  .steps { left: calc(var(--k)*24); right: calc(var(--k)*24); top: calc(var(--k)*240); width: auto; grid-template-columns: 1fr 1fr; gap: calc(var(--k)*8); }
  .step { grid-template-columns: calc(var(--k)*34) 1fr auto; gap: calc(var(--k)*8); min-height: calc(var(--k)*48); padding: calc(var(--k)*6) calc(var(--k)*10) calc(var(--k)*6) calc(var(--k)*8); border-radius: calc(var(--k)*14); font-size: calc(var(--k)*13); }
  .step .sq { width: calc(var(--k)*34); height: calc(var(--k)*34); border-radius: calc(var(--k)*9); box-shadow: inset 0 0 0 calc(var(--k)*1.5) var(--gold); }
  .step .sq img { height: calc(var(--k)*27); }
  .step .sl { line-height: 1.4; }
  .step .sl small { display: none; }
  .step .op { font-size: calc(var(--k)*19); }
  .step.res.on { box-shadow: 0 0 0 calc(var(--k)*5) rgba(241, 221, 164, .3); }
  .scene { left: 0; width: calc(var(--k)*430); top: calc(var(--k)*352); }
  .gcard { width: calc(var(--k)*168); height: calc(var(--k)*246); margin-left: calc(var(--k)*-84); top: 0; border-radius: calc(var(--k)*20); }
  .gcard .ring { top: calc(var(--k)*11); left: calc(var(--k)*11); width: calc(var(--k)*10); height: calc(var(--k)*10); }
  .gcard .caps { right: calc(var(--k)*14); left: calc(var(--k)*14); bottom: calc(var(--k)*12); height: calc(var(--k)*46); }
  .gcard .no { font-size: calc(var(--k)*10.5); }
  .gcard .nm2 { font-size: calc(var(--k)*13); }
  .gcard .tapme { top: calc(var(--k)*8); right: calc(var(--k)*10); font-size: calc(var(--k)*10.5); padding: calc(var(--k)*1) calc(var(--k)*8); }
  .pc { top: calc(var(--k)*18); width: calc(var(--k)*62); height: calc(var(--k)*176); margin-left: calc(var(--k)*-31); }
  .box { width: calc(var(--k)*330); height: calc(var(--k)*226); margin-left: calc(var(--k)*-165); bottom: calc(var(--k)*30); }
  .bres { top: calc(var(--k)*92); padding: calc(var(--k)*10) calc(var(--k)*20); gap: calc(var(--k)*8); }
  .bres .eq { font-size: calc(var(--k)*24); }
  .bres .rt { font-size: calc(var(--k)*19); }
  .bpanel { left: calc(var(--k)*14); right: calc(var(--k)*14); width: auto; margin-left: 0; top: calc(var(--k)*110); min-height: 0; padding: calc(var(--k)*22) calc(var(--k)*20); grid-template-columns: 1fr; gap: calc(var(--k)*14); border-radius: calc(var(--k)*26); }
  .bpanel .x { top: calc(var(--k)*12); left: calc(var(--k)*12); }
  .bp-art { order: 0; min-height: calc(var(--k)*170); }
  .bpi { height: calc(var(--k)*150); width: calc(var(--k)*56); }
  .bp-k { font-size: calc(var(--k)*13); }
  .bp-t { min-height: calc(var(--k)*130); }
  .bpt h3 { font-size: calc(var(--k)*24); }
  .bpt p { font-size: calc(var(--k)*15); }
  .tracks li { grid-template-columns: calc(var(--k)*26) 1fr auto; gap: calc(var(--k)*8); padding: calc(var(--k)*6) calc(var(--k)*10); font-size: calc(var(--k)*14); border-radius: calc(var(--k)*10); }
  .tracks .tn { font-size: calc(var(--k)*13); }
  .bhint { display: none; }

  .why { height: auto; }
  .why .pin { position: relative; }
  .whint { display: flex; position: absolute; top: calc(var(--k)*196); right: calc(var(--k)*24); align-items: center; gap: calc(var(--k)*6); font-size: calc(var(--k)*13); color: var(--soft); }
  .whint svg { width: calc(var(--k)*16); height: calc(var(--k)*16); fill: none; stroke: var(--gold-lo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; }
  @keyframes nudge { 50% { transform: translateX(calc(var(--k)*-5)); } }
  .why-head { top: calc(var(--k)*92); right: calc(var(--k)*24); left: calc(var(--k)*24); flex-direction: column; align-items: flex-start; gap: calc(var(--k)*4); }
  .why-head .h2 { font-size: calc(var(--k)*44); }
  .why-head .wsub { font-size: calc(var(--k)*15); padding: 0; }
  .track { top: calc(var(--k)*226); right: 0; left: 0; gap: calc(var(--k)*22); padding: calc(var(--k)*16) calc(var(--k)*65) calc(var(--k)*46); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; will-change: auto; }
  .track::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: center; }
  .card { width: calc(var(--k)*300); height: calc(var(--k)*470); border-radius: calc(var(--k)*26); padding: calc(var(--k)*52) calc(var(--k)*22) calc(var(--k)*24); gap: calc(var(--k)*10); box-shadow: inset 0 0 0 calc(var(--k)*1) rgba(199, 161, 90, .45), inset 0 0 0 calc(var(--k)*7) var(--paper), inset 0 0 0 calc(var(--k)*8) rgba(199, 161, 90, .3), 0 calc(var(--k)*30) calc(var(--k)*50) calc(var(--k)*-30) rgba(62, 10, 32, .45); }
  .card .drip { width: calc(var(--k)*302); left: calc(var(--k)*-1); top: calc(var(--k)*-7); }
  .card .num { top: calc(var(--k)*28); right: calc(var(--k)*22); font-size: calc(var(--k)*70); -webkit-text-stroke: calc(var(--k)*1.5) var(--gold); }
  .card .art img { max-height: calc(var(--k)*200); }
  .card .ct { font-size: calc(var(--k)*16.5); }
  .why .bar { left: calc(var(--k)*24); right: calc(var(--k)*24); bottom: calc(var(--k)*40); }

  .collab { padding: calc(var(--k)*90) 0 calc(var(--k)*120); }
  .collab .row { gap: calc(var(--k)*22); margin-top: calc(var(--k)*44); }
  .royal { width: calc(var(--k)*180); height: calc(var(--k)*197); }
  .who { gap: calc(var(--k)*8); }
  .who .handle { font-size: calc(var(--k)*22); }
  .who .fol { gap: calc(var(--k)*6); }
  .who .fol .cnt { font-size: calc(var(--k)*20); min-width: calc(var(--k)*70); }
  .who .fol .fw { font-size: calc(var(--k)*15); }
  .collab { padding-bottom: calc(var(--k)*60); }
  .leo-cap { position: relative; display: block; left: auto; bottom: auto; width: calc(var(--k)*270); margin: calc(var(--k)*36) auto 0; }

  .results { padding: calc(var(--k)*90) 0 calc(var(--k)*90); }
  .res-top { grid-template-columns: 1fr; gap: calc(var(--k)*30); }
  .res-copy { gap: calc(var(--k)*12); justify-items: center; text-align: center; }
  .tv { width: calc(var(--k)*340); justify-self: center; }
  .tv .big { font-size: calc(var(--k)*28); }
  .tv .sm { font-size: calc(var(--k)*13); }
  .carousel { height: calc(var(--k)*640); margin-top: calc(var(--k)*40); }
  .reelcard { width: calc(var(--k)*312); padding: calc(var(--k)*14); border-width: calc(var(--k)*34); border-image-width: calc(var(--k)*34); }
  .reel { padding: calc(var(--k)*52) calc(var(--k)*10) calc(var(--k)*10); gap: calc(var(--k)*6); }
  .reel .rh { height: calc(var(--k)*42); gap: calc(var(--k)*8); padding: 0 calc(var(--k)*10); }
  .reel .rh img { width: calc(var(--k)*24); height: calc(var(--k)*24); }
  .reel .rn { font-size: calc(var(--k)*13); }
  .reel .rp { font-size: calc(var(--k)*11); }
  .bub { border-radius: calc(var(--k)*14); padding: calc(var(--k)*7) calc(var(--k)*10); line-height: 1.7; }
  .s15 .bub { font-size: calc(var(--k)*11); } .s16 .bub { font-size: calc(var(--k)*11.5); } .s17 .bub { font-size: calc(var(--k)*12); } .s18 .bub { font-size: calc(var(--k)*13); }
  .from { gap: calc(var(--k)*6); }
  .from img { width: calc(var(--k)*18); height: calc(var(--k)*18); }
  .reel.tg .rp { font-size: calc(var(--k)*13); }
  .arrow { width: calc(var(--k)*46); height: calc(var(--k)*46); }
  .arrow svg { width: calc(var(--k)*20); height: calc(var(--k)*20); }
  .cctrl { gap: calc(var(--k)*14); bottom: 0; }
  .dots { gap: calc(var(--k)*6); }
  .dots i { width: calc(var(--k)*8); height: calc(var(--k)*8); }
  .dots i.on { width: calc(var(--k)*22); }

  .offer { padding: calc(var(--k)*90) 0 calc(var(--k)*80); }
  .offer-head { flex-direction: column; align-items: center; text-align: center; gap: calc(var(--k)*10); }
  .offer-head .lead { font-size: calc(var(--k)*16); }
  .sub { font-size: calc(var(--k)*26); margin-top: calc(var(--k)*50); gap: calc(var(--k)*12); }
  .sub::before { width: calc(var(--k)*30); }
  .svc { height: calc(var(--k)*520); margin-top: calc(var(--k)*24); }
  .svcwrap { gap: calc(var(--k)*18); }
  .spot { width: calc(var(--k)*300); height: calc(var(--k)*340); border-radius: calc(var(--k)*22); }
  .spot .t1 { font-size: calc(var(--k)*30); } .spot .t2 { font-size: calc(var(--k)*23); } .spot .t3 { font-size: calc(var(--k)*19); } .spot .t4 { font-size: calc(var(--k)*17); } .spot .t5 { font-size: calc(var(--k)*19); }
  .spot .ttl { padding: calc(var(--k)*6); }
  .spot .desc { padding: calc(var(--k)*18) calc(var(--k)*16); border-radius: calc(var(--k)*16); }
  .spot .dh { font-size: calc(var(--k)*19); margin-bottom: calc(var(--k)*4); }
  .spot .dp { font-size: calc(var(--k)*13.5); line-height: 1.9; }
  .spot .tap { font-size: calc(var(--k)*12); bottom: calc(var(--k)*12); }
  .crs { height: calc(var(--k)*600); margin-top: calc(var(--k)*24); }
  .course { width: calc(var(--k)*310); padding: calc(var(--k)*18) calc(var(--k)*18) calc(var(--k)*20); border-radius: calc(var(--k)*26); gap: calc(var(--k)*10); }
  .course .art { height: calc(var(--k)*190); }
  .course .art img { max-height: calc(var(--k)*180); max-width: calc(var(--k)*250); }
  .course .cn2 { font-size: calc(var(--k)*24); }
  .chip { font-size: calc(var(--k)*12); padding: calc(var(--k)*2) calc(var(--k)*10); }
  .course .cd { font-size: calc(var(--k)*15); min-height: calc(var(--k)*56); }
  .add { padding: calc(var(--k)*10); border-radius: calc(var(--k)*16); }
  .add .pr { font-size: calc(var(--k)*19); }
  .add .lb { font-size: calc(var(--k)*14); }
  .art-vip .royal { width: calc(var(--k)*160); height: calc(var(--k)*175); }

  .chead { top: calc(var(--k)*90); }
  .nphoto { left: calc(var(--k)*65); top: calc(var(--k)*230); width: calc(var(--k)*300); height: calc(var(--k)*449); }
  .nphoto .np { border-radius: calc(var(--k)*20); }
  .nui { transform: scale(.19231); }
  .hintp { left: 14%; top: 73.5%; }
}