:root{
  --paper:#f4efe5;
  --ink:#101010;
  --navy:#0b2341;
  --navy-2:#16385f;
  --muted:#5e5952;
  --soft:#cbc3b7;
  --white:#fffdf8;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
}
a{color:inherit}
.top-rule{height:7px;background:var(--navy)}

.landing-shell,
.page-shell{
  width:min(1080px,calc(100% - 40px));
  margin:0 auto;
}

.masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 0 15px;
  border-bottom:1px solid var(--ink);
  color:var(--navy);
}
.brand{
  color:var(--navy);
  text-decoration:none;
  font-size:21px;
  font-weight:900;
  letter-spacing:.01em;
}
.brand i,
.cert-brand i,
.signature-title i,
.landing-footer i{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:700;
}
.masthead-label{
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:12px 18px 11px;
  border:2px solid var(--ink);
  border-radius:0;
  background:transparent;
  color:var(--ink);
  text-decoration:none;
  font:900 11px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.07em;
  text-transform:uppercase;
  cursor:pointer;
}
.button:hover{
  background:var(--navy);
  border-color:var(--navy);
  color:white;
}
.button-primary{
  background:var(--navy);
  border-color:var(--navy);
  color:white;
}
.button-primary:hover{background:var(--navy-2);border-color:var(--navy-2)}
.button-secondary{background:transparent}

/* LANDING */
.landing-page{min-height:100vh}
.landing-shell{
  min-height:calc(100vh - 7px);
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.landing-hero{
  width:min(760px,100%);
  margin:auto;
  padding:54px 0;
  text-align:center;
  align-self:center;
}
.landing-kicker{
  margin-bottom:13px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.landing-hero h1{
  margin:0 auto;
  font:800 clamp(48px,6.6vw,77px)/.94 Georgia,"Times New Roman",serif;
  letter-spacing:-.052em;
}
.landing-deck{
  max-width:650px;
  margin:22px auto 0;
  color:#403b35;
  font-size:14px;
  line-height:1.65;
}
.name-form{
  width:min(600px,100%);
  margin:34px auto 0;
}
.name-form label{
  display:block;
  margin-bottom:9px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.name-form input{
  width:100%;
  padding:10px 0 12px;
  border:0;
  border-bottom:2px solid var(--ink);
  outline:0;
  background:transparent;
  text-align:center;
  color:var(--ink);
  font:700 29px/1.2 Georgia,"Times New Roman",serif;
}
.name-form input:focus{border-color:var(--navy)}
.name-form input::placeholder{color:#918a80;opacity:1}
.form-error{
  min-height:17px;
  margin:8px 0 0;
  color:#7a1b1b;
  font-size:11px;
}
.assessment-meta{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:7px 18px;
  margin:12px 0 22px;
  color:#5c5750;
  font-size:10px;
  line-height:1.5;
}
.assessment-meta strong{color:#2e2b27}
.landing-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:15px 0 22px;
  border-top:1px solid var(--soft);
  color:var(--navy);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* QUIZ */
.quiz-layout{
  padding:42px 0 54px;
}
.quiz-meta{
  display:flex;
  justify-content:space-between;
  gap:16px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.progress-track{
  height:4px;
  margin:10px 0 34px;
  background:#d6cfc4;
  overflow:hidden;
}
.progress-fill{
  width:0;
  height:100%;
  background:var(--navy);
  transition:width .18s ease;
}
.question-number{
  margin-bottom:11px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.question-title{
  max-width:910px;
  margin:0 0 28px;
  font:700 clamp(28px,3.8vw,42px)/1.08 Georgia,"Times New Roman",serif;
  letter-spacing:-.024em;
}
.options-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink);
  border-left:1px solid var(--ink);
}
.option{
  min-height:118px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:18px 19px;
  border-right:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  background:rgba(255,255,255,.15);
  font-size:14px;
  line-height:1.5;
  cursor:pointer;
}
.option:hover{background:var(--white)}
.option.selected{
  background:var(--navy);
  color:white;
}
.choice-box{
  width:13px;
  height:13px;
  flex:0 0 auto;
  margin-top:3px;
  border:2px solid currentColor;
}
.option.selected .choice-box{
  border-color:white;
  background:white;
}
.quiz-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--soft);
}

/* RESULTS */
.result-section{padding:38px 0 60px}
.result-hero{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);
  gap:46px;
  padding-bottom:28px;
  border-bottom:4px solid var(--ink);
}
.result-kicker{
  margin-bottom:10px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.result-role{
  margin:0;
  font:800 clamp(46px,6.5vw,72px)/.94 Georgia,"Times New Roman",serif;
  letter-spacing:-.047em;
}
.result-summary{
  max-width:760px;
  margin:18px 0 0;
  color:#37332e;
  font-size:15px;
  line-height:1.62;
}
.primary-score-block{
  align-self:end;
  padding:17px 0 3px 20px;
  border-left:5px solid var(--navy);
}
.primary-score-block span{
  display:block;
  color:var(--navy);
  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.primary-score-block strong{
  display:block;
  margin-top:6px;
  color:var(--navy);
  font:800 54px/.94 Georgia,"Times New Roman",serif;
}
.result-details{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:44px;
  padding:28px 0 6px;
}
.section-label{
  margin:0 0 12px;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.score-list{border-top:1px solid var(--ink)}
.score-row{
  padding:14px 0 15px;
  border-bottom:1px solid var(--ink);
}
.score-row-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.score-track{height:8px;background:#d7d0c5}
.score-fill{height:100%;background:var(--navy)}
.validation-note{
  padding-top:14px;
  border-top:4px solid var(--navy);
  color:#38342f;
  font-size:13px;
  line-height:1.62;
}
.validation-note strong{
  display:block;
  margin-bottom:8px;
  color:var(--navy);
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.result-actions{margin-top:26px}

/* CERTIFICATE */
.certificate-section{
  margin-top:42px;
  padding-top:28px;
  border-top:2px solid var(--ink);
}
.certificate-section-head{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:14px;
}
.certificate-section-head h2{
  margin:4px 0 0;
  font:800 29px/1 Georgia,"Times New Roman",serif;
}
.certificate-section-head p{
  margin:0;
  color:var(--muted);
  font-size:10px;
}
.certificate-stage{
  overflow:auto;
  padding:18px;
  border:1px solid #c8c0b5;
  background:#ded8ce;
}
.certificate{
  width:100%;
  min-width:760px;
  aspect-ratio:1.414/1;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:30px 48px 26px;
  border:18px solid var(--navy);
  box-shadow:
    inset 0 0 0 1px var(--navy),
    0 3px 0 rgba(0,0,0,.08);
  background:var(--white);
}
.cert-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:38px;
  padding:0 8px 12px;
  border-bottom:1px solid var(--navy);
  color:var(--navy);
  font-size:8px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.cert-brand{
  flex:0 0 auto;
  font-size:15px;
  letter-spacing:.02em;
  text-transform:none;
  white-space:nowrap;
}
.cert-body{
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:22px 58px 18px;
  text-align:center;
}
.cert-label{
  margin:0 0 7px;
  color:var(--navy);
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.cert-body h3{
  margin:0 0 18px;
  color:var(--navy);
  font:800 29px/1.05 Georgia,"Times New Roman",serif;
}
.cert-body p{
  max-width:680px;
  margin:0;
  color:#403c36;
  font:400 11px/1.5 Georgia,"Times New Roman",serif;
}
.cert-name{
  max-width:100%;
  margin:10px 0 10px;
  font:800 clamp(29px,3.4vw,36px)/1 Georgia,"Times New Roman",serif;
  letter-spacing:-.022em;
  overflow-wrap:anywhere;
}
.cert-role{
  max-width:100%;
  margin:8px 0 5px;
  color:var(--navy);
  font:800 clamp(25px,3vw,30px)/1.04 Georgia,"Times New Roman",serif;
  overflow-wrap:anywhere;
}
.cert-primary-score{
  color:var(--navy);
  font-size:9px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cert-other{
  width:100%;
  margin-top:16px;
  padding-top:10px;
  border-top:1px solid #b8b0a4;
}
.cert-other-label{
  margin-bottom:8px;
  color:#66615b;
  font-size:7px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cert-other-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.cert-other-role{
  color:#4f4a45;
  font-size:9px;
  line-height:1.3;
}
.cert-other-role b{
  display:block;
  margin-top:3px;
  color:#242220;
  font-size:14px;
}
.cert-footer{
  min-height:62px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:32px;
  padding:13px 8px 0;
  border-top:1px solid var(--navy);
}
.cert-date{
  padding-bottom:2px;
  color:#5a5650;
  font-size:8px;
  line-height:1.45;
}
.signature{
  width:230px;
  padding-bottom:1px;
  text-align:center;
}
.signature-line{
  margin-bottom:6px;
  border-top:1px solid var(--ink);
}
.signature-name{
  font:700 11px/1.15 Georgia,"Times New Roman",serif;
}
.signature-title{
  margin-top:3px;
  color:#4f4b46;
  font-size:7.5px;
  line-height:1.15;
}
.certificate-actions{
  margin-top:14px;
}
.disclaimer{
  max-width:820px;
  margin-top:22px;
  color:#69645e;
  font-size:10px;
  line-height:1.55;
}

@media(max-width:820px){
  .landing-shell,.page-shell{width:min(100% - 28px,1080px)}
  .masthead{align-items:flex-start;gap:16px}
  .masthead-label{font-size:8px;text-align:right}
  .brand{font-size:18px}
  .landing-hero{
    padding:38px 0;
    margin:auto;
  }
  .landing-hero h1{font-size:clamp(44px,13vw,68px)}
  .landing-deck{font-size:13px}
  .name-form input{font-size:25px}
  .assessment-meta{flex-direction:column;gap:2px}
  .options-grid{grid-template-columns:1fr}
  .result-hero{grid-template-columns:1fr;gap:20px}
  .primary-score-block{max-width:240px}
  .result-details{grid-template-columns:1fr;gap:28px}
  .certificate-section-head{display:block}
  .certificate-section-head p{margin-top:8px}
}