@font-face { font-family:'Gotham Pro'; src:url('/fonts/gotham-book.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Gotham Pro'; src:url('/fonts/gotham-medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap }
@font-face { font-family:'Gotham Pro'; src:url('/fonts/gotham-bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap }

:root { --ink:#111; --muted:#737373; --paper:#fff; --line:#e6e6e6; --yellow:#ffdc00; --black:#000; --ease:cubic-bezier(.22,1,.36,1) }
* { box-sizing:border-box }
body { margin:0; background:var(--black); color:var(--ink); font-family:'Gotham Pro',Arial,sans-serif; overflow:hidden }
.shell { min-height:100vh; background:var(--paper); max-width:1440px; margin:auto }
.quiz { min-height:100vh; padding:30px clamp(22px,5vw,72px) 24px; display:flex; flex-direction:column }
.masthead { display:flex; align-items:center; margin-bottom:clamp(52px,9vh,92px) }
.brand-logo { display:block; width:min(280px,46vw); height:auto }
.top { display:flex; justify-content:space-between; align-items:center; max-width:980px; width:100%; margin:0 auto }
.eyebrow { font:700 11px 'Gotham Pro'; letter-spacing:.16em }
.counter { font:500 12px 'Gotham Pro'; color:var(--muted) }
.progress { height:3px; background:#ededed; max-width:980px; width:100%; margin:18px auto 0 }
.progress span { display:block; width:100%; height:100%; background:var(--yellow); transform:scaleX(var(--progress,0)); transform-origin:left center; transition:transform .35s var(--ease) }
.stage { max-width:980px; width:100%; margin:auto; padding:clamp(30px,6vh,68px) 0 36px }
.stage.enter-forward { animation:stage-forward .38s var(--ease) both }
.stage.enter-back { animation:stage-back .3s var(--ease) both }
.stage h1 { font:500 clamp(27px,3.5vw,46px)/1.12 'Gotham Pro',Arial,sans-serif; letter-spacing:-.045em; max-width:820px; margin:0 0 14px }
.stage .hint { color:var(--muted); font-size:15px; line-height:1.5; margin:0 0 30px }
.contact-stage { padding-top:clamp(22px,3vh,36px); padding-bottom:16px }
.contact-stage .hint { margin-bottom:20px }
.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.option { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); background:#fff; padding:15px 17px; text-align:left; color:var(--ink); font:400 14px/1.32 'Gotham Pro'; letter-spacing:.005em; cursor:pointer; touch-action:manipulation; transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease) }
.option:hover,.option:focus-visible { border-color:var(--black); background:var(--yellow); outline:none; transform:translateY(-2px) }
.option:active { transform:scale(.985); background:var(--yellow) }
.option:after { content:'↗'; font:400 16px 'Gotham Pro'; flex:0 0 auto; color:#777 }
.option:nth-child(1){animation:option-in .35s .04s var(--ease) both}.option:nth-child(2){animation:option-in .35s .08s var(--ease) both}.option:nth-child(3){animation:option-in .35s .12s var(--ease) both}.option:nth-child(4){animation:option-in .35s .16s var(--ease) both}.option:nth-child(5){animation:option-in .35s .2s var(--ease) both}.option:nth-child(6){animation:option-in .35s .24s var(--ease) both}.option:nth-child(7){animation:option-in .35s .28s var(--ease) both}
.form { max-width:540px; display:grid; gap:9px }
.field { display:grid; gap:5px; font-size:12px; font-weight:600 }
.field input,.field select { width:100%; border:1px solid var(--line); background:#fff; padding:12px 14px; font:15px 'Gotham Pro'; color:var(--ink) }
.field input:focus,.field select:focus { outline:2px solid var(--yellow); outline-offset:1px }
.consent { font-size:11px; color:var(--muted); line-height:1.45; display:flex; gap:9px; margin:3px 0 }
.consent input { accent-color:var(--black); margin-top:2px }
.submit { background:var(--black); border:0; color:#fff; padding:14px 20px; font:500 13px 'Gotham Pro'; cursor:pointer; transition:transform .2s var(--ease),background .2s var(--ease) }
.submit:hover { background:#303030; transform:translateY(-2px) }.submit:active { transform:scale(.985) }
.error { font-size:13px; color:#9a3f31 }.success-mark { font:400 60px 'Gotham Pro'; color:var(--black); margin-bottom:20px }
.foot { display:flex; justify-content:space-between; align-items:center; max-width:980px; width:100%; margin:0 auto; color:var(--muted); font-size:11px; min-height:24px }
.back { border:0; background:none; padding:0; color:var(--ink); font:500 12px 'Gotham Pro'; cursor:pointer; transition:transform .2s var(--ease) }.back:hover { transform:translateX(-3px) }.back:disabled { visibility:hidden }
@keyframes stage-forward { from { opacity:0; transform:translateX(18px) } to { opacity:1; transform:translateX(0) } }
@keyframes stage-back { from { opacity:0; transform:translateX(-14px) } to { opacity:1; transform:translateX(0) } }
@keyframes option-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important } }
@media(max-width:760px) { body{overflow:auto}.quiz{padding:22px 18px 18px}.masthead{margin-bottom:48px}.brand-logo{width:min(220px,68vw)}.top{max-width:none}.progress{margin-top:14px}.stage{padding:34px 0 24px}.stage h1{font-size:29px}.options{grid-template-columns:1fr;gap:8px}.option{min-height:52px;padding:14px}.foot{max-width:none} }