:root { --gold:#ebd1a1; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { width:100%; min-height:100%; margin:0; background:#020405; }
body { overflow:hidden; font-family:Arial, sans-serif; }
.screen { position:relative; min-height:100svh; width:100%; overflow:hidden; background:#05090b; }
.reference-screen { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; }
.popup-launcher { position:fixed; z-index:2; right:28px; bottom:26px; width:44px; height:44px; border:1px solid rgba(235,209,161,.72); border-radius:50%; color:#fff0cb; background:rgba(8,11,12,.54); box-shadow:0 4px 23px rgba(0,0,0,.45); font-size:17px; backdrop-filter:blur(7px); cursor:pointer; transition:transform .25s ease, background .25s ease; }
.popup-launcher:hover { transform:translateY(-3px); background:rgba(117,87,48,.64); }
.modal-backdrop { position:fixed; z-index:10; inset:0; display:grid; place-items:center; padding:20px; background:rgba(1,4,7,.42); backdrop-filter:blur(2px); animation:fade .26s ease both; }
.modal { width:min(calc(100% - 40px),500px); max-height:calc(100svh - 40px); position:relative; overflow:hidden; color:#eae4d9; background:linear-gradient(145deg,rgba(27,30,32,.98),rgba(9,13,16,.98)); border:1px solid rgba(224,197,141,.65); box-shadow:0 24px 80px rgba(0,0,0,.64), inset 0 0 0 5px rgba(236,214,170,.06); animation:rise .34s cubic-bezier(.2,.8,.2,1) both; }
.modal::before,.modal::after { content:""; position:absolute; width:20px; height:20px; border-color:#d9b976; pointer-events:none; }.modal::before { left:10px; top:10px; border-left:1px solid; border-top:1px solid; }.modal::after { right:10px; bottom:10px; border-right:1px solid; border-bottom:1px solid; }
.video-wrap { height:clamp(220px,42vw,300px); position:relative; overflow:hidden; background:#0d1015; }.video-wrap::after { content:""; position:absolute; z-index:1; left:0; right:0; top:60%; height:40%; background:linear-gradient(transparent,#121316); pointer-events:none; }.video-wrap wistia-player { display:block; width:100%; height:100%; }.video-shield { position:absolute; z-index:2; inset:0; cursor:default; }.corner-ribbon { position:absolute; z-index:3; top:20px; left:-50px; width:180px; padding:9px 0; transform:rotate(-45deg); background:#f59320; color:#1a1510; text-align:center; font-size:12px; font-weight:800; letter-spacing:.1em; box-shadow:0 2px 8px rgba(0,0,0,.32); animation:heartbeat 1.8s ease-in-out infinite; transform-origin:center; }.modal-copy { position:relative; z-index:2; margin-top:-1px; padding:0 38px 28px; text-align:center; background:#121316; }.eyebrow { margin:0 0 12px; color:#ed9d3a; font-size:10px; font-weight:bold; letter-spacing:.22em; }
wistia-player[media-id='ryn6ebxq75']:not(:defined) { background:center / contain no-repeat url('https://fast.wistia.com/embed/medias/ryn6ebxq75/swatch'); display:block; filter:blur(5px); padding-top:56.25%; }
h1 { margin:0 0 9px; font-family:Georgia,'Yu Mincho',serif; font-weight:400; font-size:clamp(36px,5vw,52px); line-height:.95; letter-spacing:.035em; } h1 em { font-style:normal; color:#f79221; }
#modal-copy { max-width:325px; margin:0 auto 16px; color:rgba(240,235,223,.76); font-size:12px; line-height:1.7; }.cta { width:100%; display:flex; align-items:center; justify-content:center; gap:15px; padding:14px 18px; color:#fff; background:linear-gradient(90deg,#bd701f,#e14c12); font-size:13px; font-weight:700; text-decoration:none; transition:filter .2s ease,transform .2s ease; }.cta:hover { filter:brightness(1.12); transform:translateY(-2px); }.cta span { font-size:18px; }.cta.is-disabled { pointer-events:none; opacity:.55; filter:saturate(.6); }.unlock { --progress:0%; position:relative; width:min(100%,355px); height:58px; margin:14px auto 10px; overflow:hidden; border:1px solid rgba(255,255,255,.5); background:#242424; text-align:center; animation:swipe-prompt 1.6s ease-in-out infinite; }.unlock-progress { position:absolute; inset:0 auto 0 0; width:var(--progress); background:linear-gradient(90deg,#bd701f,#e14c12); transition:width .08s linear; }.unlock-label { position:relative; z-index:1; display:block; padding:19px 52px; color:#f2ede3; font-size:12px; font-weight:700; letter-spacing:.1em; pointer-events:none; }.unlock-range { position:absolute; z-index:2; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }.unlock-handle { position:absolute; z-index:1; top:5px; bottom:5px; left:clamp(5px,calc(var(--progress) - 24px),calc(100% - 53px)); width:48px; border-radius:2px; color:#2c1a0c; background:#f2c06d; font-size:37px; line-height:43px; font-family:Georgia,serif; transition:left .08s linear, background .2s ease; pointer-events:none; }.unlock.is-ready { border-color:#e9bd6c; animation:none; }.unlock.is-ready .unlock-handle { left:calc(100% - 53px); color:#112014; background:#85d19a; }
@keyframes fade { from{opacity:0}to{opacity:1} } @keyframes rise { from{opacity:0;transform:translateY(17px) scale(.98)}to{opacity:1;transform:none} } @keyframes swipe-prompt { 0%,100% { transform:translateX(0); box-shadow:0 0 0 rgba(245,147,32,0); } 45% { transform:translateX(10px); box-shadow:0 0 24px rgba(245,147,32,.26); } } @keyframes heartbeat { 0%,100% { transform:rotate(-45deg) scale(1); filter:brightness(1); } 8% { transform:rotate(-45deg) scale(1.08); filter:brightness(1.18); } 16% { transform:rotate(-45deg) scale(1); filter:brightness(1); } 24% { transform:rotate(-45deg) scale(1.06); filter:brightness(1.12); } 38% { transform:rotate(-45deg) scale(1); filter:brightness(1); } } @keyframes heartbeat-mobile { 0%,100% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } 8% { transform:rotate(-45deg) scale(.864); filter:brightness(1.18); } 16% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } 24% { transform:rotate(-45deg) scale(.848); filter:brightness(1.12); } 38% { transform:rotate(-45deg) scale(.8); filter:brightness(1); } } @keyframes spin { to { transform:rotate(360deg); } }
@media (max-width:760px) { .reference-screen { width:auto; min-width:100%; height:100%; object-position:center; }.modal { width:min(calc(100% - 32px),390px); }.modal-copy { padding:0 25px 24px; }.video-wrap { height:175px; }.video-wrap::after { top:100px; height:75px; }.corner-ribbon { top:13px; left:-59px; transform:rotate(-45deg) scale(.8); animation-name:heartbeat-mobile; }.popup-launcher { right:18px; bottom:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }


/* Popup fits the entire viewport with NO scroll on desktop, mobile or landscape. */
html, body { overflow: hidden !important; }
.modal-backdrop {
  display: block;
  overflow: hidden;
  padding: 0;
  overscroll-behavior: none;
}
.modal-positioner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(500px, calc(100vw - 24px));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.modal {
  width: 100%;
  max-height: none;
  overflow: hidden;
  transform: scale(var(--modal-fit-scale, 1));
  transform-origin: center center;
  pointer-events: auto;
  animation: popup-reveal .25s ease both;
}
@keyframes popup-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 760px) {
  .modal-positioner { width: min(390px, calc(100vw - 20px)); }
  .modal-copy { padding-left: clamp(14px, 5vw, 25px); padding-right: clamp(14px, 5vw, 25px); }
  .video-wrap { height: clamp(110px, 25dvh, 175px); }
  .video-wrap::after { top: 57%; height: 43%; }
  .modal-copy { padding-bottom: 16px; }
}
@media (max-height: 700px) {
  .video-wrap { height: clamp(86px, 24dvh, 165px); }
  .modal-copy { padding-bottom: 14px; }
  .eyebrow { margin-bottom: 7px; }
  h1 { font-size: clamp(29px, 6dvh, 42px); margin-bottom: 5px; }
  #modal-copy { margin-bottom: 9px; line-height: 1.35; }
  .cta { padding: 10px 12px; min-height: 40px; }
  .unlock { height: 48px; margin: 9px auto 5px; }
  .unlock-label { padding-top: 14px; padding-bottom: 13px; }
  .unlock-handle { height: 38px; line-height: 36px; }
}
@media (max-height: 420px) {
  .video-wrap { height: clamp(60px, 20dvh, 85px); }
  .modal-copy { padding-bottom: 10px; }
  .eyebrow { margin-bottom: 5px; }
  h1 { font-size: 30px; }
  #modal-copy { margin-bottom: 6px; }
  .unlock { height: 44px; margin-top: 6px; }
  .unlock-label { padding-top: 12px; padding-bottom: 12px; }
  .unlock-handle { height: 34px; line-height: 33px; }
}