.assessment-page { background: var(--art-paper); }

.assessment-hero {
  position: relative;
  overflow: hidden;
  padding: 7rem 0 6rem;
  background:
    radial-gradient(circle at 90% 20%, rgba(224,164,70,.3), transparent 24%),
    linear-gradient(125deg, var(--art-navy), #073b62 65%, var(--art-blue));
  color: white;
}
.assessment-hero::after {
  content: "BE REAL";
  position: absolute;
  right: -1rem;
  bottom: -3rem;
  color: rgba(255,255,255,.045);
  font-family: Georgia, serif;
  font-size: clamp(8rem, 20vw, 20rem);
  line-height: 1;
  white-space: nowrap;
}
.assessment-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .55fr; gap: 5rem; align-items: end; }
.assessment-hero h1 { max-width: 850px; margin-bottom: 1.5rem; color: white; font-size: clamp(3.6rem, 7vw, 7rem); line-height: .9; }
.assessment-hero .lede { max-width: 770px; color: rgba(255,255,255,.84); }
.assessment-intro-card { display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; padding: 2rem; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); backdrop-filter: blur(12px); }
.assessment-intro-card strong { color: #ffd387; font-family: Georgia, serif; font-size: 2.2rem; line-height: 1; }
.assessment-intro-card span { align-self: center; color: white; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.assessment-shell { width: min(980px, calc(100% - 2rem)); margin: 0 auto; }
.assessment-instructions { display: grid; grid-template-columns: 1fr .55fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.assessment-instructions h2 { font-size: clamp(2.7rem, 5vw, 4.8rem); }
.privacy-note { padding: 1.5rem; border-left: 4px solid var(--art-gold); background: white; box-shadow: 0 12px 30px rgba(4,23,36,.08); }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note span { margin-top: .45rem; color: var(--muted); font-size: .9rem; }

.assessment-progress { position: sticky; z-index: 10; top: 112px; margin-bottom: 2rem; padding: 1rem 1.25rem; border: 1px solid rgba(7,95,168,.16); background: rgba(251,248,241,.95); box-shadow: 0 10px 25px rgba(4,23,36,.06); backdrop-filter: blur(12px); }
.assessment-progress > div:first-child { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.progress-track { height: 5px; margin-top: .75rem; overflow: hidden; background: #dce6ec; }
.progress-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--art-gold), var(--art-coral), var(--art-blue)); transition: width .25s ease; }

.dimension-section { margin: 0 0 2rem; padding: 0; border: 1px solid rgba(7,95,168,.15); background: white; box-shadow: 0 14px 35px rgba(4,23,36,.055); }
.dimension-section legend { float: left; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: .15rem 1rem; padding: 1.6rem 2rem; border-bottom: 1px solid rgba(7,95,168,.13); background: #edf5fb; }
.dimension-section legend + * { clear: both; }
.dimension-section legend > span { grid-row: 1 / 3; align-self: center; color: var(--art-coral); font-family: Georgia, serif; font-size: 2.8rem; line-height: 1; }
.dimension-section legend strong { color: var(--art-navy); font-size: 1.3rem; }
.dimension-section legend em { color: var(--muted); font-size: .9rem; }
.assessment-question { display: grid; grid-template-columns: 1fr 350px; gap: 2rem; align-items: center; padding: 1.6rem 2rem; border-bottom: 1px solid #e4eaee; }
.assessment-question:last-child { border-bottom: 0; }
.assessment-question > p { margin: 0; color: var(--ink); font-weight: 650; line-height: 1.45; }
.assessment-question > p span { color: var(--art-coral); }
.rating { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.rating label { position: relative; cursor: pointer; text-align: center; }
.rating input { position: absolute; opacity: 0; pointer-events: none; }
.rating label > span { display: grid; width: 44px; height: 44px; place-items: center; margin: 0 auto; border: 1px solid #b7c9d5; border-radius: 50%; background: white; color: var(--art-navy); transition: .15s ease; }
.rating label:hover > span, .rating input:focus-visible + span { border-color: var(--art-blue); box-shadow: 0 0 0 4px rgba(17,132,213,.13); }
.rating input:checked + span { border-color: var(--art-blue); background: var(--art-blue); color: white; font-weight: 800; transform: scale(1.06); }
.rating small { display: block; min-height: 1.1rem; margin-top: .3rem; color: var(--muted); font-size: .62rem; font-weight: 650; }

.assessment-submit { padding: 2.5rem 0 1rem; text-align: center; }
.assessment-submit .button { min-width: 320px; }
.assessment-submit > p:last-child { color: var(--muted); font-size: .8rem; }
.assessment-error { min-height: 1.5em; color: #a63f2c; font-weight: 750; }

.assessment-results { scroll-margin-top: 140px; margin-top: 5rem; padding: clamp(2rem, 5vw, 4.5rem); background: var(--art-navy); color: white; box-shadow: 18px 18px 0 var(--art-gold); }
.results-heading { display: grid; grid-template-columns: .75fr 1fr; gap: 4rem; align-items: end; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.18); }
.results-heading h2 { margin: 0; color: white; font-size: clamp(4rem, 8vw, 7rem); }
.results-heading h2 small { color: rgba(255,255,255,.55); font-size: .3em; }
.results-heading > p { color: rgba(255,255,255,.75); font-size: 1.1rem; }
.score-band { margin: 0; color: #ffd387; font-size: 1.2rem; font-weight: 800; }
.dimension-results { display: grid; gap: 1rem; padding: 2.5rem 0; }
.dimension-result > div:first-child { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; }
.dimension-result span { color: #ffd387; font-weight: 800; }
.dimension-meter { height: 7px; background: rgba(255,255,255,.15); }
.dimension-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--art-gold), var(--art-coral)); }
.results-reflection { padding: 2rem; background: rgba(255,255,255,.07); }
.results-reflection h3 { color: white; font-family: Georgia, serif; font-size: 1.55rem; line-height: 1.3; }
.results-reflection textarea { min-height: 110px; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.96); }
.results-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.results-actions .button-secondary { border-color: rgba(255,255,255,.45); background: transparent; }
.results-actions .button-secondary:hover { background: rgba(255,255,255,.1); }
.results-actions span { color: #ffd387; font-weight: 750; }

.assessment-next { padding: 7rem 0; background: #edf5fb; }
.assessment-next-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 5rem; align-items: center; }
.assessment-next h2 { margin-bottom: 0; }

@media (max-width: 800px) {
  .assessment-hero-grid, .assessment-instructions, .results-heading, .assessment-next-grid { grid-template-columns: 1fr; gap: 2rem; }
  .assessment-question { grid-template-columns: 1fr; gap: 1rem; }
  .assessment-progress { top: 82px; }
}

@media (max-width: 520px) {
  .assessment-hero { padding: 4.5rem 0; }
  .dimension-section legend { padding: 1.25rem; }
  .assessment-question { padding: 1.4rem 1.15rem; }
  .rating label > span { width: 40px; height: 40px; }
  .assessment-submit .button { width: 100%; min-width: 0; }
  .assessment-results { padding: 1.5rem; box-shadow: 8px 8px 0 var(--art-gold); }
  .assessment-progress > div:first-child span:last-child { display: none; }
}