:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; color: #fff8e9; background: #0761b9; font-family: "DM Sans", Arial, sans-serif; }
.hero { min-height: 100svh; position: relative; overflow: hidden; isolation: isolate; background: #0761b9; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; pointer-events: none; background-image: radial-gradient(#fff 0.7px, transparent 0.8px); background-size: 5px 5px; mix-blend-mode: soft-light; }
.topline { position: relative; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: 1.3rem clamp(1.4rem, 5vw, 5rem); font: 0.68rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.topline nav { display: flex; gap: 1rem; margin-left: auto; }.topline a { color: inherit; text-decoration: none; opacity: .8; }.topline a:hover { opacity: 1; color: #ffcc27; }
.status-dot { width: .58rem; height: .58rem; border-radius: 50%; background: #ffcc27; box-shadow: 0 0 0 4px rgb(255 204 39 / .2); }
.year { margin-left: auto; opacity: .7; }
.content { position: relative; z-index: 2; max-width: 42rem; padding: clamp(3.8rem, 10vh, 8rem) clamp(1.4rem, 8vw, 8rem); }
.eyebrow { margin: 0 0 1.15rem; color: #ffcc27; font: .75rem/1.3 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
h1 { max-width: 7ch; margin: 0; font-size: clamp(4rem, 10.5vw, 9.5rem); line-height: .82; letter-spacing: -.085em; font-weight: 900; }
h1 em { color: #ffcc27; font-style: normal; }
.lede { max-width: 32rem; margin: 2rem 0; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height: 1.45; }
button { border: 0; cursor: pointer; font: 700 .85rem/1 "DM Mono", monospace; letter-spacing: .02em; }
#reveal { padding: 1.1rem 1.25rem; color: #09274d; background: #ffcc27; box-shadow: 5px 5px 0 #e84624; transition: transform .18s ease, box-shadow .18s ease; }
#reveal:hover, #reveal:focus-visible { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #e84624; }
.footnote { margin-top: 2rem; opacity: .65; font: .72rem/1.3 "DM Mono", monospace; }
.reko-offer { position: relative; width: min(100%, 31rem); margin-top: 2rem; padding: 1.15rem 1.2rem; color: #09274d; background: #ffcc27; border: 4px solid #09274d; box-shadow: 6px 6px 0 #e84624; transform: rotate(-1.3deg); }
.trombone-sticker { position: absolute; right: -1.1rem; top: -1.2rem; z-index: 1; width: 7.7rem; padding: .62rem .4rem; color: #fff8e9; background: #e84624; border: 3px solid #09274d; border-radius: 48% 52% 43% 57%; box-shadow: 3px 3px 0 #09274d; font: 700 .58rem/.95 "DM Mono", monospace; letter-spacing: .03em; text-align: center; text-transform: uppercase; transform: rotate(11deg); }
.trombone-sticker strong { color: #ffcc27; font-size: 1.13em; }
.reko-kicker { margin: 0; font: .62rem/1.2 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.reko-offer h2 { margin: .2rem 0; font-size: clamp(2rem, 5vw, 3.2rem); line-height: .85; letter-spacing: -.07em; }
.reko-deal { margin: .7rem 0 .45rem; font-size: 1.15rem; line-height: 1.05; }
.reko-deal strong { color: #e84624; font-size: 1.35em; }
.reko-fineprint { margin: 0 0 1rem; font: .62rem/1.3 "DM Mono", monospace; }
.reko-offer a { display: inline-block; padding: .75rem .85rem; color: #fff8e9; background: #09274d; font: 700 .7rem/1 "DM Mono", monospace; text-decoration: none; }
.coming-soon { width: min(100%, 31rem); margin-top: 2.5rem; padding: 1.3rem 0; border-top: 2px solid rgb(255 248 233 / .55); }.coming-soon h2 { margin: .2rem 0 .65rem; font-size: clamp(2rem, 5vw, 3.5rem); line-height: .85; letter-spacing: -.07em; }.coming-soon p:last-child { max-width: 22rem; margin: 0; font-size: .95rem; }
.terms-trigger { margin-top: 1.2rem; padding: .8rem 1rem; color: #fff8e9; background: transparent; border: 2px solid #fff8e9; }
.mayor-form { width: min(100%, 29rem); margin-top: 2.5rem; padding: 1.1rem; color: #09274d; background: #fff8e9; box-shadow: 5px 5px 0 #e84624; }
.form-title { margin: 0 0 1rem; font: 700 .74rem/1.25 "DM Mono", monospace; letter-spacing: .04em; text-transform: uppercase; }
.mayor-form label { display: block; margin: .7rem 0; font: 700 .68rem/1.2 "DM Mono", monospace; letter-spacing: .02em; }
.mayor-form input[type="text"] { width: 100%; margin-top: .35rem; padding: .7rem; border: 2px solid #09274d; border-radius: 0; color: #09274d; background: #fffdfa; font: 500 .87rem/1.2 "DM Sans", sans-serif; }
.checkbox-label { display: flex !important; gap: .55rem; align-items: flex-start; font-size: .62rem !important; }
.checkbox-label input { margin: .05rem 0 0; accent-color: #e84624; }
.mayor-form button { width: 100%; margin-top: .25rem; padding: .8rem; color: #fff8e9; background: #09274d; }
.form-note { margin: .7rem 0 0; opacity: .65; font: .6rem/1.2 "DM Mono", monospace; }
.form-success { margin: 0; font-size: 1rem; line-height: 1.35; }
.image-wrap { position: absolute; z-index: 1; right: clamp(0rem, 4vw, 5rem); bottom: 0; height: min(82vh, 850px); width: min(38vw, 510px); overflow: hidden; pointer-events: none; border: 6px solid #fff8e9; border-bottom: 0; box-shadow: 10px 0 0 #e84624; transform: rotate(2deg); }
.image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; filter: saturate(.9) contrast(1.06); }
dialog { width: min(32rem, calc(100% - 2rem)); border: 7px solid #09274d; padding: 2.3rem; color: #09274d; background: #fff8e9; box-shadow: 12px 12px 0 #ffcc27; text-align: center; }
dialog::backdrop { background: rgb(4 31 63 / .76); backdrop-filter: blur(3px); }
dialog h2 { margin: .3rem 0; font-size: clamp(2.6rem, 8vw, 4.5rem); line-height: .9; letter-spacing: -.07em; }
dialog p:not(.eyebrow) { font-size: 1.1rem; }
.close { position: absolute; top: .65rem; right: .75rem; color: #09274d; background: transparent; font-size: 2rem; }
.stamp { display: inline-block; margin-top: 1rem; padding: .8rem 1.1rem; border: 3px solid #e84624; color: #e84624; transform: rotate(-5deg); font: 700 1.15rem/.9 "DM Mono", monospace; }
.stamp small { font-size: .57rem; letter-spacing: .16em; }
.clip-player { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.clip-player iframe { border: 0; width: 1px; height: 1px; }
.terms-dialog { width: min(34rem, calc(100% - 2rem)); border: 7px solid #09274d; padding: 2rem; color: #09274d; background: #fff8e9; box-shadow: 12px 12px 0 #ffcc27; }
.terms-dialog::backdrop { background: rgb(4 31 63 / .8); }
.terms-dialog h2 { margin: .2rem 0 .75rem; font-size: clamp(2.8rem, 9vw, 5rem); line-height: .82; letter-spacing: -.08em; }
.terms-warning { margin: 0 0 1rem; font-size: .9rem; }
.terms-window { height: 11rem; overflow: hidden; border: 3px solid #09274d; background: #fff; }
.terms-copy { padding: .55rem .75rem; animation: terms-sprint 4s linear infinite, font-chaos 1.1s steps(2, end) infinite alternate; transform-origin: left top; }
.terms-copy p { margin: 0 0 1.5rem; font: .72rem/1.3 "DM Mono", monospace; }
.terms-countdown, .terms-check { display: block; margin: .9rem 0; font: .65rem/1.3 "DM Mono", monospace; }
.terms-dialog > button { width: 100%; padding: .9rem; color: #fff8e9; background: #09274d; }
.terms-dialog > button:disabled { cursor: not-allowed; opacity: .45; }
@keyframes terms-sprint { from { transform: translateY(0); } to { transform: translateY(-73%); } }
@keyframes font-chaos { from { font-size: .65rem; } to { font-size: 1.65rem; } }
@media (max-width: 720px) { .hero { min-height: 100svh; } .content { padding-top: 4.5rem; } .image-wrap { height: 65vh; width: 52vw; right: -3vw; opacity: .4; } .lede { max-width: 23rem; } }