:root {
  --bg: #000;
  --ink: #f2f2f2;
  --muted: #9a9a9a;
  --accent: #fff;
  --line: #2a2a2a;
  --danger: #ff5555;
  --display: "Oswald", sans-serif;
  --body: "Roboto Mono", monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.45}
a{color:#fff} button,input{font:inherit}

.hdr{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.2rem 1.5rem;border-bottom:1px solid var(--line);
}
.hdr .logo{font-family:var(--display);font-size:1.4rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;font-weight:600}
.hdr .phone{color:var(--muted);text-decoration:none;font-size:.8rem}

/* asymmetric: photo LEFT column, copy RIGHT-aligned */
.board{
  display:grid;
  grid-template-columns:42% 1fr;
  min-height:calc(100vh - 4rem);
}
.board__media{
  border-right:1px solid var(--line);
  background:#0a0a0a url('../img/hero.jpg') center/cover no-repeat;
  min-height:320px;
  filter:grayscale(1) contrast(1.1);
}
.board__side{
  display:flex;flex-direction:column;justify-content:center;
  padding:3rem 2rem 3rem 2.5rem;
  text-align:right;
}
.board__brand{
  margin:0 0 .8rem;
  font-family:var(--display);
  font-size:clamp(2.2rem,6vw,4.2rem);
  letter-spacing:.12em;text-transform:uppercase;line-height:.95;
}
.board__title{
  margin:0 0 1rem;
  font-family:var(--display);
  font-size:clamp(1.4rem,3vw,2.2rem);
  text-transform:uppercase;letter-spacing:.04em;line-height:1.15;
  font-weight:500;
}
.board__text{margin:0 0 1.8rem 15%;color:var(--muted);font-size:.92rem}

/* flying button */
.fly-btn{
  appearance:none;border:1px solid #fff;background:#fff;color:#000;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  align-self:flex-end;
  min-height:3.2rem;padding:.85rem 1.6rem;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  text-decoration:none;
  animation:flyIn 1.1s cubic-bezier(.2,.9,.2,1) .35s both;
}
.fly-btn:hover{background:transparent;color:#fff}
.fly-btn.ghost{background:transparent;color:#fff;animation:none}
.fly-btn.solid{background:#fff;color:#000;animation:none}

.feats{
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.feats article{
  padding:1.4rem 1.2rem;border-right:1px solid var(--line);text-align:right;
}
.feats article:last-child{border-right:0}
.feats h2{display:none}
.feats .n{font-family:var(--display);font-size:2rem;color:#fff;margin:0 0 .4rem;letter-spacing:.08em}
.feats p{margin:0;color:var(--muted);font-size:.85rem}

.foot{
  border-top:1px solid var(--line);padding:1.5rem;text-align:right;
  color:var(--muted);font-size:.78rem;
}
.foot strong{display:block;color:#fff;font-family:var(--display);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem;font-weight:500}
.foot p{margin:.15rem 0}

.quiz{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1rem;background:rgba(0,0,0,.85);opacity:0;pointer-events:none;transition:opacity .2s}
.quiz.is-open{opacity:1;pointer-events:auto}
.quiz__panel{width:min(500px,100%);max-height:90vh;overflow:auto;background:#0d0d0d;border:1px solid var(--line);padding:1.3rem;position:relative}
.quiz__close{position:absolute;top:.4rem;right:.6rem;border:0;background:0;color:var(--muted);font-size:1.6rem;cursor:pointer}
.quiz__bar{height:2px;background:#222;margin-bottom:.8rem}
.quiz__bar span{display:block;height:100%;width:25%;background:#fff;transition:width .25s}
.quiz__meta{margin:0 0 .45rem;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;text-align:right}
.quiz__title{margin:0 0 .9rem;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;font-size:1.25rem;text-align:right;font-weight:500}
.quiz__sub{margin:-.2rem 0 1rem;color:var(--muted);text-align:right;font-size:.85rem}
.quiz-step{display:none}.quiz-step.is-active{display:block}
.quiz-options{display:grid;gap:.45rem}
.quiz-opt{display:block;cursor:pointer}
.quiz-opt input{position:absolute;opacity:0;pointer-events:none}
.quiz-opt span{display:block;padding:.8rem 1rem;border:1px solid var(--line);text-align:right;font-size:.9rem}
.quiz-opt.is-selected span,.quiz-opt input:checked+span{border-color:#fff;background:#161616}
.quiz__actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem;flex-wrap:wrap}
.form-row{margin-bottom:.75rem;text-align:right}
.form-row label{display:block;margin-bottom:.25rem;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.form-row input{width:100%;min-height:2.9rem;border:1px solid var(--line);background:#000;color:#fff;padding:.6rem .8rem;text-align:right;border-radius:0}
.form-row input.error{border-color:var(--danger)}
.consent{font-size:.75rem;color:var(--muted);text-align:right}
.iti{width:100%}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid #000;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
.page,.thank{width:min(780px,92vw);margin:2rem auto;border:1px solid var(--line);padding:1.4rem;text-align:right}
.page__title,.thank h1{font-family:var(--display);text-transform:uppercase;letter-spacing:.06em}
.legal-content{color:var(--muted);text-align:left}
.legal-content h2{color:#fff;font-family:var(--display);text-transform:uppercase;font-weight:500}
.legal-content dl{display:grid;gap:.25rem 1rem;grid-template-columns:11rem 1fr}
.legal-content dt{color:#fff}.legal-content dd{margin:0}

@keyframes flyIn{
  0%{opacity:0;transform:translateY(120px) rotate(-4deg) scale(.85)}
  60%{opacity:1;transform:translateY(-10px) rotate(1deg) scale(1.03)}
  100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:860px){
  .board{grid-template-columns:1fr}
  .board__media{min-height:240px;border-right:0;border-bottom:1px solid var(--line)}
  .board__side{text-align:left;padding:2rem 1.3rem}
  .board__text{margin-left:0}
  .fly-btn{align-self:flex-start}
  .feats{grid-template-columns:1fr}
  .feats article{border-right:0;border-bottom:1px solid var(--line);text-align:left}
  .foot,.quiz__meta,.quiz__title,.quiz__sub,.form-row,.consent,.quiz-opt span{text-align:left}
  .quiz__actions{justify-content:flex-start}
  .form-row input{text-align:left}
}
@media(prefers-reduced-motion:reduce){.fly-btn{animation:none}}