:root { --ink:#221e1f; --paper:#f6f2ea; --surface:#fffdf9; --amber:#fcb960; --muted:#655f59; --line:#d9d1c6; --error:#9e3030; --focus:3px solid #c97917; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font:400 16px/1.55 Manrope,sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
:focus-visible { outline:var(--focus); outline-offset:4px; }
.skip { position:fixed; z-index:10; top:12px; left:12px; padding:10px 14px; background:var(--amber); color:var(--ink); transform:translateY(-180%); }
.skip:focus { transform:translateY(0); }
.page { width:min(100% - 32px, 620px); margin:auto; padding:28px 0 48px; }
.masthead { position:relative; overflow:hidden; min-height:294px; padding:30px 28px 26px; color:var(--paper); background:var(--ink); border-radius:20px 20px 0 0; isolation:isolate; }
.masthead::before { content:""; position:absolute; z-index:-1; width:230px; height:230px; right:-78px; top:33px; background:radial-gradient(circle,rgba(252,185,96,.29),transparent 66%); filter:blur(8px); animation:glow 6s ease-in-out infinite alternate; }
.masthead::after { content:""; position:absolute; z-index:-1; width:190px; height:190px; right:-77px; bottom:-86px; border:2px solid var(--amber); transform:rotate(45deg); opacity:.85; animation:frame-drift 8s ease-in-out infinite alternate; }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-bottom:40px; font-family:Outfit,sans-serif; font-weight:700; letter-spacing:-.02em; }
.brand-logo { width:30%; height:auto; object-fit:contain; }
.brand-name { padding-left:10px; border-left:1px solid var(--amber); }
.eyebrow { position:relative; z-index:1; margin:0 0 8px; color:var(--amber); font:500 11px/1.3 DM Mono,monospace; letter-spacing:.13em; text-transform:uppercase; }
h1 { position:relative; z-index:1; max-width:10ch; margin:0; font:700 clamp(30px,8vw,43px)/1.04 Outfit,sans-serif; letter-spacing:-.045em; }
.hero-photo { position:absolute; z-index:0; width:min(48%,255px); right:-16px; bottom:-78px; filter:drop-shadow(-14px 20px 22px rgba(0,0,0,.28)); pointer-events:none; animation:portrait-float 5.5s ease-in-out infinite; }
main { padding:26px 20px 20px; background:var(--surface); border:1px solid var(--line); border-top:0; }
.intro { margin:0 8px 20px; color:var(--muted); font-size:15px; }
.area-list { display:grid; gap:10px; }
.area-button { width:100%; min-height:70px; display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:transparent; text-align:left; transition:transform .24s cubic-bezier(.2,.8,.2,1), border-color .24s ease, background .24s ease, box-shadow .24s ease; }
.area-button:hover { border-color:var(--ink); background:#fffaf2; box-shadow:4px 5px 0 var(--amber); transform:translate(-2px,-2px); }
.area-number { color:#88601f; font:500 11px/1 DM Mono,monospace; }
.area-label { font-weight:700; font-size:16px; letter-spacing:-.02em; }
.arrow { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:transparent; transition:transform .24s ease, background .24s ease, color .24s ease; }
.arrow svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.area-button:hover .arrow { color:var(--ink); background:var(--amber); transform:rotate(-38deg); }
.notice { margin:22px 8px 0; padding-top:17px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
footer { padding:18px 20px; color:var(--paper); background:var(--ink); border-radius:0 0 20px 20px; font-size:12px; }
footer p { margin:0; }
footer p + p { margin-top:5px; color:#d5cec5; }
dialog { width:min(calc(100% - 28px), 510px); max-height:calc(100dvh - 28px); padding:0; border:0; border-radius:14px; color:var(--ink); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.3); }
dialog::backdrop { background:rgba(34,30,31,.78); }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:24px 24px 18px; border-bottom:1px solid var(--line); }
.dialog-kicker { margin:0 0 6px; color:#88601f; font:500 11px/1.3 DM Mono,monospace; letter-spacing:.1em; text-transform:uppercase; }
.dialog-head h2 { margin:0; font:700 26px/1.1 Outfit,sans-serif; letter-spacing:-.035em; }
.close { flex:0 0 auto; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; font-size:24px; line-height:1; }
form { padding:22px 24px 24px; }
.field { margin-bottom:16px; }
label { display:block; margin-bottom:6px; font-weight:700; font-size:14px; }
input,textarea { width:100%; border:1px solid #aaa197; border-radius:7px; padding:11px 12px; color:var(--ink); background:#fff; }
textarea { min-height:92px; resize:vertical; }
.field small { display:block; margin-top:5px; color:var(--muted); font-size:12px; }
.form-error { min-height:1.25em; margin:0 0 12px; color:var(--error); font-weight:700; font-size:13px; }
.submit { width:100%; min-height:52px; border:0; border-radius:7px; color:var(--ink); background:var(--amber); font-weight:800; transition:background .18s ease, transform .18s ease; }
.submit:hover { background:#e9a744; transform:translateY(-1px); }
.privacy { margin:15px 0 0; color:var(--muted); font-size:11px; line-height:1.45; }
@media (prefers-reduced-motion:no-preference) { .masthead,.area-button { animation:appear .78s both; } .area-button:nth-child(2){animation-delay:.14s}.area-button:nth-child(3){animation-delay:.28s}.area-button:nth-child(4){animation-delay:.42s}.area-button:nth-child(5){animation-delay:.56s}.area-button:nth-child(6){animation-delay:.70s}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes portrait-float{50%{transform:translateY(-9px)}}@keyframes glow{to{transform:scale(1.14) translate(-8px,5px);opacity:.58}}@keyframes frame-drift{to{transform:rotate(53deg) translate(-8px,4px)}} }
@media (max-width:420px) { .page { width:100%; padding:0; } .masthead,footer { border-radius:0; } main { padding-inline:16px; } .masthead { min-height:286px; padding-inline:24px; } dialog { width:100%; max-height:100dvh; border-radius:0; } }