:root { --white:#f4f2ed; --black:#050505; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--black); }
body { color:var(--white); font-family:Arial,Helvetica,sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
button,input { font:inherit; text-transform:uppercase; }
main { position:relative; width:100%; height:100svh; min-height:620px; overflow:hidden; background:#151515; }
.campaign { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 53%; filter:saturate(1.08) contrast(1.02); animation:settle 2.4s cubic-bezier(.2,.7,.2,1) both; }
.wash { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 24%,transparent 60%,rgba(0,0,0,.7)); pointer-events:none; }
header { position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; padding:24px 28px; }
.wordmark { font-size:clamp(23px,2.2vw,40px); font-weight:900; letter-spacing:-.055em; line-height:.85; }
.edition { padding-top:2px; }
.offer { position:absolute; right:28px; bottom:25px; display:grid; grid-template-columns:auto auto; align-items:end; column-gap:9px; text-align:right; }
.currency { align-self:start; padding-top:.45vw; color:rgba(255,255,255,.68); }
.offer strong { font-size:clamp(42px,6.8vw,112px); line-height:.76; letter-spacing:-.075em; font-weight:500; }
.offer button { grid-column:1/-1; justify-self:end; margin-top:23px; padding:0 0 5px; border:0; border-bottom:1px solid currentColor; color:var(--white); background:transparent; letter-spacing:.2em; cursor:pointer; }
.place { position:absolute; left:28px; bottom:27px; }
.loader { position:fixed; inset:0; z-index:20; display:flex; justify-content:space-between; align-items:flex-end; padding:28px; background:var(--black); font-size:clamp(44px,11vw,190px); line-height:.7; font-weight:900; letter-spacing:-.08em; transition:transform .9s cubic-bezier(.8,0,.2,1); }
.loader span:last-child { font-size:10px; letter-spacing:.2em; font-weight:400; }
.loader.done { transform:translateY(-101%); }
dialog { width:min(620px,calc(100vw - 28px)); padding:0; border:0; color:var(--white); background:var(--black); }
dialog::backdrop { background:rgba(0,0,0,.84); backdrop-filter:blur(11px); }
.close { position:absolute; right:18px; top:13px; padding:0; border:0; color:var(--white); background:transparent; font-size:27px; cursor:pointer; }
.dialog-mark { display:block; padding:24px; border-bottom:1px solid rgba(255,255,255,.18); font-size:22px; font-weight:900; letter-spacing:-.04em; }
.dialog-offer { min-height:310px; display:flex; flex-direction:column; justify-content:space-between; padding:54px 24px 24px; }
.dialog-offer strong { font-size:clamp(34px,7vw,67px); font-weight:400; letter-spacing:-.06em; }
form { padding:24px; border-top:1px solid rgba(255,255,255,.18); }
label { display:block; margin-bottom:21px; color:rgba(255,255,255,.58); }
.field { display:flex; border-bottom:1px solid rgba(255,255,255,.4); }
input { flex:1; min-width:0; padding:14px 0; border:0; outline:0; color:var(--white); background:transparent; letter-spacing:.14em; border-radius:0; }
.field button { width:48px; border:0; color:var(--white); background:transparent; font-size:19px; cursor:pointer; }
form p { min-height:12px; margin:16px 0 0; color:rgba(255,255,255,.55); }
@keyframes settle { from { transform:scale(1.045); filter:saturate(.75) contrast(1.08); } to { transform:scale(1); filter:saturate(1.08) contrast(1.02); } }
@media (max-width:700px) {
  main { min-height:580px; }
  .campaign { object-position:50% center; }
  header { padding:19px 18px; }
  .edition { padding-top:0; font-size:9px; }
  .offer { left:18px; right:18px; bottom:20px; }
  .offer strong { font-size:clamp(48px,15vw,76px); }
  .place { display:none; }
  .loader { padding:20px 18px; }
}
@media (prefers-reduced-motion:reduce) { .loader{display:none}.campaign{animation:none} }