:root{--night:#12181b;--night2:#1b2428;--ivory:#ffffff;--paper:#f3f6f8;--ink:#141a1f;--muted:#55606b;--amber:#f2b544;--teal:#3fb6a8;--petrol:#2a5e54;--rule:#dde3e8}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font:17px/1.6 Inter,system-ui,sans-serif}
a{color:var(--petrol)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
header{display:flex;justify-content:space-between;align-items:center;padding:20px 0}
.mark{font:800 1.15rem Inter,sans-serif;letter-spacing:-.01em;text-decoration:none;color:inherit}
.mark small{display:block;font:600 .7rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
nav a{margin-left:22px;text-decoration:none;color:inherit;font-size:.95rem;opacity:.9}
nav .call{border:1.5px solid var(--amber);border-radius:999px;padding:8px 16px;color:var(--amber);font-weight:700;opacity:1}
h1,h2,h3{font-family:Inter,sans-serif;line-height:1.08;margin:0;letter-spacing:-.02em}
h1{font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);max-width:16ch}
h1 em,h2 em{font-style:normal;color:var(--amber)}
h2{font-weight:800;font-size:clamp(1.8rem,4vw,2.8rem);max-width:22ch}
h3{font-size:1.25rem;font-weight:700}
.eyebrow{font:700 .75rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:16px}
.lede{font-size:1.2rem;color:var(--muted);max-width:44rem;margin:22px 0 30px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:700;text-decoration:none;border:0;cursor:pointer;font-size:1rem}
.btn.primary{background:var(--amber);color:#1a1300}
.btn.ghost{border:1.5px solid currentColor;color:var(--petrol);background:transparent}
section{padding:80px 0;border-top:1px solid var(--rule)}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:18px;padding:26px}
.panel{background:var(--night2);color:#eef2f1;border-radius:28px;padding:56px 48px}
.panel h2{color:#fff}
.panel p{max-width:40rem;font-size:1.1rem}
.panel .quote{font:600 1.5rem/1.35 Inter,sans-serif;border-left:3px solid var(--amber);padding-left:22px;margin-top:28px;max-width:34rem;color:#fff}
.two{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.grid4.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.card .n{font:800 2rem Inter,sans-serif;color:var(--amber)}
.card p{color:var(--muted);margin:.6em 0 0}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
blockquote{margin:0;border-left:3px solid var(--teal);padding:4px 0 4px 22px;font:500 1.2rem/1.5 Inter,sans-serif}
blockquote cite{display:block;margin-top:12px;font:600 .85rem Inter,sans-serif;color:var(--muted);font-style:normal}
footer{padding:36px 0 50px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--rule)}
.draft{background:#fff4d6;color:#5a4500;text-align:center;font-size:.85rem;padding:8px}
.page{padding:40px 0 70px}.page h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:20ch}.page h2{margin-top:48px;font-size:1.7rem}.page p,.page li{max-width:44rem}.page ul{padding-left:1.2em}.check li{margin:.5em 0}

/* hero: the owner's office */
.hero{background:var(--night);color:#f3f1ec;padding-bottom:28px}
.hero header{color:#f3f1ec}
.hero .lede{color:#c9d2d0}
.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:34px 0 26px}
.intro .lede{margin:18px 0 0;font-size:1.15rem;max-width:40rem}
.play{display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:#1a1300;border:0;border-radius:999px;padding:14px 22px;font:700 1rem Inter,sans-serif;cursor:pointer;white-space:nowrap}
.play[aria-pressed=true]{background:var(--teal);color:#06201d}
.scene{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 70% 40%,#3a4a4f 0,#1d2629 55%,#12181b 100%);box-shadow:0 20px 50px #0008}
.scene img.room{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s}
.scene.exploring img.room{filter:brightness(.55)}
.scene .label{position:absolute;left:20px;top:18px;font:700 .72rem Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;padding:8px 12px;background:#0f171acc;border:1px solid #ffffff30;border-radius:6px}
.hot{position:absolute;z-index:3;display:flex;gap:10px;align-items:center;text-align:left;padding:9px 14px 9px 9px;background:#0f171ae6;color:#fff;border:1px solid #ffffff60;border-radius:10px;cursor:pointer;font:inherit;box-shadow:0 8px 24px #0007;transition:transform .25s,background .25s,border-color .25s}
.hot{transform:translate(-50%,-50%)}.hot:hover,.hot.on{border-color:var(--amber);background:#1f2a2ef2;box-shadow:0 0 0 3px #f2b54455,0 8px 24px #0007}
.hot .dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--amber);color:#1a1300;font-weight:800;flex:none}
.hot b{display:block;font-size:1rem}.hot small{display:block;font-size:.78rem;color:#c9d2d0;max-width:190px;line-height:1.3}
.hot.on .dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #f2b54499}70%{box-shadow:0 0 0 14px #f2b54400}100%{box-shadow:0 0 0 0 #f2b54400}}
.h1{left:13%;top:42%}.h2{left:43%;top:30%}.h3{left:57%;top:80%}.h4{left:83%;top:76%}
.scene video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:5}
.scene .close{position:absolute;right:16px;top:16px;z-index:6;padding:9px 14px;border-radius:8px;border:1px solid #fff8;background:#0f171ae6;color:#fff;font:600 .9rem Inter,sans-serif;cursor:pointer}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:18px;border-bottom:1px solid #ffffff22}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;color:#c9d2d0;padding:14px 8px;font:600 .95rem Inter,sans-serif;cursor:pointer;text-align:left}
.tabs button span{display:block;font-size:.75rem;color:var(--teal);letter-spacing:.12em;text-transform:uppercase}
.tabs button[aria-pressed=true]{color:#fff;border-color:var(--amber)}
.story{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;padding:26px 0 8px;min-height:190px}
.story h2{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;max-width:none}
.story p{color:#c9d2d0;margin:.7em 0 0}
.story .stop{color:#fff}.story .stop b{color:var(--amber)}
.story .act{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center}
.story .act a:not(.btn){color:var(--teal)}
.story .shown{font-size:.8rem;color:#8fa09d}
.hero :focus-visible{outline:3px solid var(--amber);outline-offset:3px}

@media (max-width:860px){.grid4{grid-template-columns:1fr 1fr}.two,.quotes,.story{grid-template-columns:1fr}.panel{padding:40px 24px;border-radius:22px}nav a:not(.call){display:none}.intro{display:block}.intro .play{margin-top:20px}.hot small{display:none}.tabs{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid4,.grid4.pair{grid-template-columns:1fr}section{padding:56px 0}.scene{aspect-ratio:8/9}.hot{padding:6px;border-radius:50%}.hot b{display:none}.hot .dot{width:34px;height:34px}.scene .label{display:none}.h1{left:9%;top:58%}.h2{left:16%;top:28%}.h3{left:45%;top:78%}.h4{left:86%;top:56%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.ctl{display:flex;gap:10px;flex-wrap:wrap}.mute{background:transparent;color:#f3f1ec;border:1.5px solid #ffffff55;border-radius:999px;padding:12px 18px;font:600 .95rem Inter,sans-serif;cursor:pointer}
.story .line{font:600 1.25rem/1.45 Inter,sans-serif;color:#fff;border-left:3px solid var(--amber);padding-left:14px;min-height:1.45em;margin:.8em 0}.story .line:empty{display:none}
.transcript{color:#c9d2d0;padding:4px 0 10px;font-size:.95rem}.transcript summary{cursor:pointer;color:var(--teal)}
.scene .cap{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;width:min(88%,860px);background:#0f171ae8;color:#fff;border-left:3px solid var(--amber);border-radius:8px;padding:12px 18px;font:600 1.1rem/1.45 Inter,sans-serif;text-align:left;pointer-events:none}
@media (max-width:560px){.scene .cap{font-size:.85rem;bottom:10px;padding:8px 12px}}
/* scroll reveal below the hero: html.rv is set by JS only, so no-JS and reduced-motion visitors see everything */
html.rv [data-rv]{opacity:0;transform:translateY(32px);filter:blur(4px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease;transition-delay:var(--d,0s)}
html.rv [data-rv].in{opacity:1;transform:none;filter:none}
.mark img{display:block;height:58px;width:auto}
@media (max-width:640px){.mark img{height:42px}}