@font-face{font-family:Playfair;src:url('assets/PlayfairDisplay-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('assets/DMSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('assets/DMSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1e2d3d;color:#f5f1ea;font-family:DM,Arial,sans-serif}body{display:flex;align-items:center;justify-content:center;cursor:none}button,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #d7c7a9;outline-offset:5px}
#stage{position:relative;width:100vw;height:56.25vw;max-height:100vh;overflow:hidden;--u:1px;--bg:#1e2d3d;--ink:#f5f1ea;--accent:#d7c7a9;background:var(--bg);color:var(--ink);isolation:isolate}
#stage.ivory{--bg:#f5f1ea;--ink:#1e2d3d;--accent:#796344}
.scene{position:absolute;inset:0;background:var(--bg);opacity:0;transition:opacity 1400ms ease;pointer-events:none}.scene.current{opacity:1;z-index:2}.scene.leaving{opacity:0;z-index:3}.scene.instant{transition:none}
.photo-frame{position:absolute;top:0;left:31%;width:69%;height:100%;overflow:hidden}.photo{display:block;width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}.photo-wrap{width:100%;height:100%;transform:scale(1.01)}.current .photo-wrap{animation:drift var(--hold,26s) linear both}.paused .photo-wrap{animation-play-state:paused}@keyframes drift{from{transform:scale(1.01)}to{transform:scale(1.045)}}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,#1e2d3d 0%,#1e2d3d 32%,rgba(30,45,61,.97) 40%,rgba(30,45,61,.82) 49%,rgba(30,45,61,.30) 64%,rgba(30,45,61,0) 80%)}
.ivory .veil{background:linear-gradient(90deg,#f5f1ea 0%,#f5f1ea 32%,rgba(245,241,234,.97) 40%,rgba(245,241,234,.86) 49%,rgba(245,241,234,.30) 64%,rgba(245,241,234,0) 80%)}
.scene.membership .veil{background:linear-gradient(90deg,#1e2d3d 0%,#1e2d3d 36%,rgba(30,45,61,.97) 44%,rgba(30,45,61,.7) 54%,rgba(30,45,61,.12) 72%,transparent 83%)}
.ivory .scene.membership .veil{background:linear-gradient(90deg,#f5f1ea 0%,#f5f1ea 36%,rgba(245,241,234,.97) 44%,rgba(245,241,234,.78) 54%,rgba(245,241,234,.1) 72%,transparent 83%)}
.category{position:absolute;left:calc(100 * var(--u));top:calc(105 * var(--u));font-size:calc(22 * var(--u));line-height:1.2;font-weight:700;letter-spacing:calc(4.5 * var(--u));color:var(--accent);margin:0;max-width:55%}
.headline{position:absolute;left:calc(94 * var(--u));top:calc(200 * var(--u));font-family:Playfair,Georgia,serif;font-size:calc(106 * var(--u));line-height:1.09;letter-spacing:calc(-1.9 * var(--u));font-weight:400;white-space:pre-line;margin:0;max-width:calc(1100 * var(--u))}
.body-copy{position:absolute;left:calc(100 * var(--u));top:calc(494 * var(--u));font-size:calc(40 * var(--u));line-height:1.45;white-space:pre-line;margin:0;width:calc(925 * var(--u));max-width:52%}
.ask{position:absolute;left:calc(100 * var(--u));bottom:calc(150 * var(--u));width:calc(1030 * var(--u));max-width:55%}.ask-label{color:var(--accent);font-size:calc(28 * var(--u));font-weight:700;margin:0 0 calc(17 * var(--u))}.service-names{font-size:calc(42 * var(--u));line-height:1.28;white-space:pre-line;margin:0;letter-spacing:calc(-.3 * var(--u))}.detail{position:absolute;left:calc(100 * var(--u));bottom:calc(85 * var(--u));width:calc(1080 * var(--u));font-size:calc(22 * var(--u));color:var(--accent);margin:0;line-height:1.3;white-space:pre-line}
.price{display:none;position:absolute;left:calc(94 * var(--u));top:calc(408 * var(--u));font-size:calc(86 * var(--u));line-height:1.1;letter-spacing:calc(-3 * var(--u));margin:0}.price span{font-size:calc(37 * var(--u));letter-spacing:0;margin-left:calc(15 * var(--u));color:var(--accent)}
.has-price .headline{top:calc(177 * var(--u));font-size:calc(91 * var(--u))}.has-price .price{display:block}.has-price .body-copy{top:calc(545 * var(--u));font-size:calc(37 * var(--u))}.membership .ask{bottom:calc(193 * var(--u))}.legal{position:absolute;left:calc(100 * var(--u));bottom:calc(58 * var(--u));width:calc(1100 * var(--u));font-size:calc(21 * var(--u));line-height:1.45;white-space:pre-line;margin:0;opacity:.88}.membership .category{font-size:calc(25 * var(--u));letter-spacing:calc(5 * var(--u))}
.scene.long-title .headline{font-size:calc(94 * var(--u));top:calc(214 * var(--u))}
#controls{position:fixed;z-index:10;bottom:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:94vw;padding:20px 24px;background:rgba(20,31,43,.97);border:1px solid #d7c7a944;border-radius:12px;box-shadow:0 16px 64px #0004;color:#f5f1ea;opacity:0;pointer-events:none;transition:opacity .25s;font-size:16px;visibility:hidden}body.show-controls{cursor:auto}body.show-controls #controls{opacity:1;pointer-events:auto;visibility:visible}.buttons{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.buttons button,.buttons select{background:#f5f1ea;color:#1e2d3d;border:0;padding:12px 16px;border-radius:5px;min-height:46px;font-size:16px}.buttons label{font-size:14px;margin-left:4px}#status{margin:13px 0 0;color:#d7c7a9;font-size:13px}.hint{margin:7px 0 0;color:#c2ccd5;font-size:12px}
@media(prefers-reduced-motion:reduce){.scene{transition:none}.current .photo-wrap{animation:none}}body.still .current .photo-wrap{animation:none}body.still .scene{transition:none}body.still #controls{display:none}
@media(max-width:700px){#controls{bottom:10px;padding:12px;max-height:75vh;overflow:auto}.buttons{gap:6px}.buttons button,.buttons select{padding:9px 11px;min-height:40px;font-size:13px}.buttons label{font-size:12px}.hint{max-width:320px}}
