:root{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#171717;background:#f3efe9
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:
  radial-gradient(circle at 50% -10%,rgba(255,255,255,.96),rgba(255,255,255,0) 38%),
  linear-gradient(180deg,#f8f5f1 0,#eee8df 100%)}
button,a{font:inherit}
.shell{min-height:100vh;display:flex;flex-direction:column}
.brandbar{height:70px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;max-width:1080px;width:100%;margin:0 auto}
.brand{color:#111;text-decoration:none;font-size:1.02rem;font-weight:760;letter-spacing:-.035em}
.brand span{font-weight:420}
.ghost{border:0;background:transparent;color:#6e675e;cursor:pointer;padding:10px 0}
main{width:100%;max-width:880px;margin:auto;padding:22px 20px 54px}
.experience{overflow:hidden;border-radius:34px;border:1px solid rgba(26,22,18,.08);box-shadow:0 30px 90px rgba(48,39,28,.10);background:rgba(255,255,255,.80);backdrop-filter:blur(20px)}
.progress{height:3px;background:rgba(40,34,29,.12);overflow:hidden}
.progress>div{height:100%;background:#171717;transition:width .35s ease}

.animatic{position:relative;aspect-ratio:16/9;min-height:360px;background:#e9e2d8;overflow:hidden}
.frame{position:absolute;inset:0;opacity:0;transform:scale(1.025);transition:opacity .7s ease,transform 3.8s ease;pointer-events:none}
.frame.active{opacity:1;transform:scale(1)}
.frame .wash{position:absolute;inset:0;background:
  radial-gradient(circle at 18% 20%,rgba(255,255,255,.7),transparent 35%),
  linear-gradient(140deg,#e8e1d8,#d9d2c8)}
.scene-caption{position:absolute;left:7%;bottom:8%;right:7%;z-index:8}
.kicker{text-transform:uppercase;letter-spacing:.15em;font-size:.67rem;font-weight:750;color:#686158;margin:0 0 10px}
.caption{font-size:clamp(1.25rem,3vw,2.2rem);line-height:1.08;letter-spacing:-.035em;font-weight:720;max-width:18ch;margin:0;color:#171717}
.subcaption{font-size:clamp(.9rem,2vw,1.08rem);line-height:1.5;max-width:31em;margin:12px 0 0;color:#4f4943}

.phone{position:absolute;width:23%;min-width:120px;max-width:210px;height:66%;right:10%;top:12%;background:#171717;border-radius:28px;padding:9px;box-shadow:0 30px 60px rgba(30,25,20,.22);transform:rotate(3deg)}
.phone-screen{height:100%;background:#f8f6f2;border-radius:21px;padding:18px 11px;overflow:hidden}
.msg{background:#fff;border:1px solid #ded9d1;border-radius:14px;padding:8px 10px;margin:0 0 9px;font-size:clamp(.58rem,1.2vw,.78rem);line-height:1.3;box-shadow:0 3px 9px rgba(0,0,0,.035);transform:translateY(12px);opacity:0}
.frame.active .msg{animation:msgIn .48s ease forwards}
.frame.active .msg:nth-child(2){animation-delay:.55s}
.frame.active .msg:nth-child(3){animation-delay:1.1s}
.frame.active .msg:nth-child(4){animation-delay:1.65s}
@keyframes msgIn{to{transform:translateY(0);opacity:1}}

.people{position:absolute;left:10%;top:17%;width:44%;height:48%}
.person{position:absolute;bottom:0;width:35%;height:70%;border-radius:48% 48% 22% 22%/32% 32% 15% 15%;background:#746c63}
.person:before{content:"";position:absolute;width:52%;aspect-ratio:1;border-radius:50%;background:#8a8177;left:24%;top:-29%}
.person.one{left:5%;transform:rotate(-2deg)}
.person.two{right:5%;background:#9a9186;transform:rotate(2deg)}
.person.two:before{background:#ada398}
.table{position:absolute;left:5%;right:5%;height:10%;bottom:0;background:#b5ab9f;border-radius:50% 50% 8px 8px}

.calendar{position:absolute;width:220px;height:180px;right:12%;top:18%;background:#f7f4ef;border-radius:24px;box-shadow:0 20px 45px rgba(40,32,24,.16);padding:24px}
.calendar .bar{height:16px;background:#181818;border-radius:99px;width:56%}
.calendar .days{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
.calendar .day{aspect-ratio:1;border-radius:9px;background:#e5dfd6}
.calendar .day.hot{background:#b9afa2}

.boundary{position:absolute;left:12%;top:20%;width:42%;height:58%;display:flex;align-items:center;justify-content:center}
.boundary .bubble{background:#fff;border-radius:24px;padding:24px 27px;font-size:clamp(1rem,2.4vw,1.5rem);font-weight:680;box-shadow:0 18px 50px rgba(40,32,24,.14)}
.boundary .small{position:absolute;right:-25%;bottom:7%;background:#efe9e1;border-radius:22px;padding:16px 20px;font-size:clamp(.78rem,1.8vw,1.02rem);max-width:220px}

.controls{position:absolute;top:18px;right:18px;z-index:12;display:flex;gap:8px}
.control{border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.74);backdrop-filter:blur(10px);border-radius:999px;padding:8px 12px;cursor:pointer;color:#413c36;font-size:.78rem}
.timeline{position:absolute;left:6%;right:6%;bottom:3.5%;height:3px;background:rgba(0,0,0,.12);border-radius:99px;overflow:hidden;z-index:10}
.timeline div{height:100%;width:0;background:#171717}
.animatic.playing .timeline div{animation:timeline 12s linear forwards}
@keyframes timeline{to{width:100%}}

.choice-stage{display:none;padding:24px clamp(22px,5vw,48px) 28px;background:#fff}
.choice-stage.visible{display:block;animation:fadeUp .42s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.choices{display:grid;gap:10px}
.choice{width:100%;text-align:left;border:1px solid #e0dad2;background:#fff;border-radius:16px;padding:17px 18px;color:#1b1a18;cursor:pointer;line-height:1.38;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.choice:hover,.choice:focus-visible{transform:translateY(-1px);border-color:#aca399;box-shadow:0 8px 22px rgba(0,0,0,.055);outline:none}
.choice::after{content:"›";float:right;color:#a49b91;font-size:1.2rem;line-height:1}
.none{margin-top:16px;border:0;background:transparent;color:#80786f;cursor:pointer;padding:7px 0;font-size:.9rem}
.navrow{display:flex;justify-content:space-between;align-items:center;margin-top:20px;min-height:34px}
.back{border:0;background:transparent;color:#5e5851;cursor:pointer;padding:6px 0}
.step{font-size:.75rem;color:#a0988f}

.text-scene{padding:clamp(32px,6vw,60px);background:
 linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.9)),
 radial-gradient(circle at 10% 0%,rgba(222,211,198,.55),transparent 40%)}
.text-scene .kicker{margin-bottom:12px}
.text-scene h1{font-size:clamp(1.9rem,5vw,3.6rem);line-height:1;letter-spacing:-.05em;margin:0 0 22px;max-width:15ch}
.text-scene p{font-size:clamp(1.05rem,2.6vw,1.28rem);line-height:1.58;color:#34312d;margin:0;max-width:36em}

.end-copy{color:#5d564f;line-height:1.55;margin:0 0 20px;max-width:34em}
.primary{border:0;background:#171717;color:#fff;border-radius:999px;padding:14px 20px;cursor:pointer}
footer{padding:20px 24px 28px;max-width:1080px;width:100%;margin:0 auto;color:#9b9389;font-size:.72rem}
.loading{padding:80px 0;text-align:center;color:#777}

@media(max-width:640px){
  .brandbar{height:60px;padding:0 16px}
  main{padding:8px 10px 34px}
  .experience{border-radius:24px}
  .animatic{aspect-ratio:9/14;min-height:560px}
  .phone{width:39%;height:49%;right:8%;top:12%}
  .people{left:7%;top:19%;width:52%;height:36%}
  .calendar{width:42%;height:26%;right:7%;top:17%;padding:16px}
  .scene-caption{left:7%;right:7%;bottom:8%}
  .caption{max-width:12ch}
  .choice-stage{padding:16px 14px 20px}
  .choice{padding:16px 15px}
  footer{padding:16px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important}
}


.audio-gate{
  position:absolute; inset:0; z-index:30;
  display:flex; align-items:center; justify-content:center;
  background:rgba(244,240,234,.92); backdrop-filter:blur(14px);
}
.audio-gate.hidden{display:none}
.audio-gate-card{
  width:min(88%,390px); background:#fff; border-radius:26px;
  padding:28px; box-shadow:0 24px 70px rgba(28,22,17,.16);
  border:1px solid rgba(0,0,0,.07)
}
.audio-gate-card h2{
  margin:0 0 12px; font-size:1.55rem; letter-spacing:-.035em
}
.audio-gate-card p{
  margin:0 0 20px; line-height:1.5; color:#5b544d
}
.gate-actions{display:flex;gap:9px;flex-wrap:wrap}
.gate-primary,.gate-secondary{
  border-radius:999px; padding:12px 16px; cursor:pointer
}
.gate-primary{border:0;background:#171717;color:#fff}
.gate-secondary{border:1px solid #d8d1c8;background:#fff;color:#4f4942}

.audio-status{
  position:absolute; left:18px; top:18px; z-index:15;
  display:flex; gap:8px; align-items:center
}
.audio-pill{
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.76);
  backdrop-filter:blur(10px); border-radius:999px;
  padding:8px 11px; cursor:pointer; color:#413c36; font-size:.76rem
}
.subtitle{
  position:absolute; left:7%; right:7%; bottom:13.5%; z-index:14;
  display:flex; justify-content:center; pointer-events:none;
  transition:opacity .25s ease
}
.subtitle span{
  max-width:720px; padding:9px 13px;
  background:rgba(20,20,20,.78); color:#fff;
  border-radius:12px; font-size:clamp(.78rem,1.7vw,1rem);
  line-height:1.35; text-align:center;
  box-shadow:0 8px 26px rgba(0,0,0,.13)
}
.subtitle.empty{opacity:0}