:root { --white:#f5f3ee; --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:640px; overflow:hidden; background:#111; }
.campaign { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 53%; filter:saturate(1.12) contrast(1.04); animation:settle 2.2s cubic-bezier(.2,.7,.2,1) both; }
.wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(0,0,0,.19) 48%,rgba(0,0,0,.12) 100%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 30%,transparent 67%,rgba(0,0,0,.65)); pointer-events:none; }
header { position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; padding:25px 28px; }
.wordmark { font-size:clamp(24px,2.2vw,41px); font-weight:900; letter-spacing:-.06em; line-height:.84; text-shadow:0 1px 16px rgba(0,0,0,.25); }
.location { text-align:right; line-height:1.5; }
.statement { position:absolute; left:28px; top:50%; transform:translateY(-48%); }
.eyebrow { margin:0 0 25px 4px; color:rgba(255,255,255,.76); }
h1 { margin:0; font-size:clamp(72px,10.7vw,184px); line-height:.75; letter-spacing:-.075em; font-weight:900; }
.commercial { display:inline-block; margin:31px 0 0 4px; padding:0 0 6px; border-bottom:1px solid rgba(255,255,255,.7); font-size:10px; }
.build { position:absolute; right:28px; bottom:27px; padding:0 0 6px; border:0; border-bottom:1px solid currentColor; color:var(--white); background:transparent; letter-spacing:.2em; cursor:pointer; }
.build span { display:inline-block; margin-left:13px; font-size:15px; transition:transform .25s ease; }
.build:hover span { transform:translate(3px,-3px); }
.signal { position:absolute; left:28px; bottom:23px; margin:0; }
.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(48px,11vw,190px); line-height:.7; font-weight:900; letter-spacing:-.08em; transition:transform .85s cubic-bezier(.8,0,.2,1); }
.loader span:last-child { font-size:10px; line-height:1; letter-spacing:.2em; font-weight:400; }
.loader.done { transform:translateY(-101%); }
dialog { width:min(690px,calc(100vw - 28px)); max-height:calc(100svh - 28px); padding:0; border:0; color:var(--white); background:var(--black); }
dialog::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(12px); }
.close { position:absolute; z-index:2; right:19px; top:12px; padding:0; border:0; color:var(--white); background:transparent; font-size:28px; cursor:pointer; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; padding:22px 60px 22px 24px; border-bottom:1px solid rgba(255,255,255,.17); }
.dialog-mark { font-size:23px; font-weight:900; letter-spacing:-.05em; }
.dialog-body { min-height:400px; display:grid; grid-template-columns:1.35fr .65fr; gap:30px; align-items:end; padding:55px 24px 26px; }
.dialog-body h2 { margin:0; font-size:clamp(43px,6vw,73px); line-height:.82; letter-spacing:-.065em; }
.dialog-body p { margin:0; color:rgba(255,255,255,.58); line-height:2; }
form { padding:23px 24px 25px; border-top:1px solid rgba(255,255,255,.17); }
label { display:block; margin-bottom:18px; color:rgba(255,255,255,.58); }
.field { display:flex; border-bottom:1px solid rgba(255,255,255,.45); }
input { flex:1; min-width:0; padding:14px 0; border:0; outline:0; border-radius:0; color:var(--white); background:transparent; letter-spacing:.14em; }
.field button { width:48px; border:0; color:var(--white); background:transparent; font-size:19px; cursor:pointer; }
.response { min-height:12px; margin:14px 0 0; color:rgba(255,255,255,.55); }
@keyframes settle { from { transform:scale(1.045); filter:saturate(.78) contrast(1.08); } to { transform:scale(1); filter:saturate(1.12) contrast(1.04); } }
@media (max-width:700px) {
  main { min-height:610px; }
  .campaign { object-position:58% center; }
  .wash { background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.05)),linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.58)); }
  header { padding:19px 18px; }
  .location { font-size:8px; }
  .statement { left:18px; right:18px; top:48%; }
  .eyebrow { margin:0 0 18px 2px; font-size:8px; }
  h1 { font-size:clamp(61px,20.5vw,98px); line-height:.78; }
  .commercial { margin-top:24px; font-size:8px; }
  .signal { left:18px; bottom:18px; font-size:8px; }
  .build { right:18px; bottom:20px; font-size:8px; }
  .loader { padding:20px 18px; }
  .dialog-body { min-height:350px; display:block; }
  .dialog-body p { margin-top:42px; }
}
@media (prefers-reduced-motion:reduce) { .loader{display:none}.campaign{animation:none} }