:root {
      --navy: #0D1F3C;
      --slate: #1E3A5F;
      --gold: #F5A31A;
      --gold-dark: #C07D0A;
      --amber-bg: #FDF6EC;
      --amber-mid: #F5E8CC;
      --text-dark: #1A1208;
      --text-mid: #3D2E14;
      --text-muted: #7A6240;
      --white: #FFFFFF;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'DM Sans', -apple-system, sans-serif;
      background: var(--amber-bg);
      color: var(--text-dark);
      line-height: 1.6
    }

    /* NAV */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(253, 246, 236, 0.95);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(13, 31, 60, 0.08);
      padding: 0 5%
    }

    .nav-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none
    }

    .nav-wordmark { line-height: 1.15; }

    .nav-mark {
      height: 44px;
      width: auto
    }

    .nav-wordmark .nw-top {
      font-size: 9px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--text-muted)
    }

    .nav-wordmark .nw-main {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: .02em;
      color: var(--navy);
      text-transform: uppercase
    }

    .nav-wordmark .nw-tag {
      font-size: 7px;
      font-weight: 500;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold-dark)
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 20px
    }

    .nav-links a { white-space: nowrap;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-mid);
      text-decoration: none;
      transition: color .2s
    }

    .nav-links a:hover {
      color: var(--navy)
    }

    .nav-links a.active {
      color: var(--navy);
      font-weight: 700
    }

    .nav-cta {
      font-size: 12px !important;
      font-weight: 800 !important;
      padding: 9px 20px;
      background: var(--gold);
      color: var(--navy) !important;
      border-radius: 24px;
      transition: background .2s, transform .15s;
      white-space: nowrap
    }

    .nav-cta:hover {
      background: #f8b83a !important;
      transform: translateY(-1px)
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px
    }

    .hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--navy);
      border-radius: 2px
    }

    /* PAGE HEADER */
    .page-header {
      background: var(--navy);
      padding: 80px 5% 64px;
      text-align: center
    }

    .page-header .eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 14px
    }

    .page-header h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(32px, 5vw, 52px);
      font-weight: 400;
      color: #FDF6EC;
      line-height: 1.1;
      margin-bottom: 16px
    }

    .page-header p {
      font-size: 15px;
      color: rgba(253, 246, 236, 0.55);
      max-width: 540px;
      margin: 0 auto;
      line-height: 1.75
    }

    /* QUIZ */
    .quiz-wrapper {
      max-width: 700px;
      margin: 0 auto;
      padding: 48px 5% 80px
    }

    .screen {
      display: none
    }

    .screen.active {
      display: block
    }

    .card {
      background: var(--white);
      border: 1px solid var(--amber-mid);
      border-radius: 16px;
      padding: 40px
    }

    .intro-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold-dark);
      margin-bottom: 8px
    }

    .intro-h2 {
      font-family: 'DM Serif Display', serif;
      font-size: 28px;
      color: var(--navy);
      margin-bottom: 8px
    }

    .gold-rule {
      width: 40px;
      height: 3px;
      background: var(--gold);
      border-radius: 2px;
      margin: 12px 0 24px
    }

    .intro-desc {
      font-size: 15px;
      color: var(--text-mid);
      line-height: 1.75;
      margin-bottom: 28px
    }

    .dim-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 28px
    }

    .dim-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-mid)
    }

    .dim-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 24px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .field label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--text-muted)
    }

    .field input {
      background: var(--amber-bg);
      border: 1.5px solid rgba(13, 31, 60, 0.12);
      color: var(--text-dark);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      padding: 12px 16px;
      border-radius: 8px;
      transition: border-color .2s;
      outline: none
    }

    .field input:focus {
      border-color: var(--gold)
    }

    .field input::placeholder {
      color: rgba(13, 31, 60, 0.25)
    }

    .progress-header {
      margin-bottom: 28px
    }

    .progress-meta {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px
    }

    .progress-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text-muted)
    }

    .progress-count {
      font-size: 12px;
      font-weight: 700;
      color: var(--navy)
    }

    .progress-track {
      height: 6px;
      background: var(--amber-mid);
      border-radius: 6px;
      overflow: hidden
    }

    .progress-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 6px;
      transition: width .4s ease
    }

    .dim-badge {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 12px;
      margin-bottom: 18px
    }

    .question-text {
      font-family: 'DM Serif Display', serif;
      font-size: 22px;
      color: var(--navy);
      line-height: 1.35;
      margin-bottom: 26px
    }

    .options-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px
    }

    .opt {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      background: var(--amber-bg);
      border: 1.5px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      color: var(--text-mid);
      transition: all .15s;
      line-height: 1.45;
      text-align: left;
      width: 100%
    }

    .opt:hover {
      border-color: var(--gold);
      background: #FFF8EE;
      color: var(--navy)
    }

    .opt.sel {
      border-color: var(--navy);
      background: #EEF3FB;
      color: var(--navy);
      font-weight: 600
    }

    .opt-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1.5px solid rgba(13, 31, 60, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: all .15s
    }

    .opt.sel .opt-num {
      background: var(--navy);
      border-color: var(--navy);
      color: var(--white)
    }

    .quiz-nav {
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .btn-back {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 0;
      transition: color .2s
    }

    .btn-back:hover {
      color: var(--navy)
    }

    .btn-next {
      padding: 13px 28px;
      background: var(--navy);
      color: var(--gold);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      border: none;
      border-radius: 32px;
      cursor: pointer;
      transition: all .2s
    }

    .btn-next:hover:not(:disabled) {
      background: var(--slate);
      transform: translateY(-2px)
    }

    .btn-next:disabled {
      opacity: .35;
      cursor: not-allowed;
      transform: none
    }

    /* RESULTS */
    .results-hero {
      background: var(--navy);
      border-radius: 16px;
      padding: 40px;
      text-align: center;
      margin-bottom: 28px
    }

    .r-eyebrow {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 10px
    }

    .r-name {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(253, 246, 236, 0.45);
      margin-bottom: 6px
    }

    .r-level {
      font-family: 'DM Serif Display', serif;
      font-size: 30px;
      color: #FDF6EC;
      margin-bottom: 8px;
      line-height: 1.2
    }

    .r-score {
      font-size: 13px;
      color: rgba(253, 246, 236, 0.45);
      margin-bottom: 18px
    }

    .r-bar-track {
      height: 8px;
      background: rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      max-width: 320px;
      margin: 0 auto 18px;
      overflow: hidden
    }

    .r-bar-fill {
      height: 100%;
      background: var(--gold);
      border-radius: 8px;
      transition: width 1s ease
    }

    .r-desc {
      font-size: 14px;
      color: rgba(253, 246, 236, 0.6);
      line-height: 1.7;
      max-width: 500px;
      margin: 0 auto
    }

    .dim-results {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-bottom: 28px
    }

    .dim-card {
      background: var(--white);
      border: 1px solid var(--amber-mid);
      border-radius: 12px;
      padding: 24px
    }

    .dim-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      flex-wrap: wrap;
      gap: 8px
    }

    .dim-name {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--navy)
    }

    .dim-lbl {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 12px
    }

    .dim-bar-track {
      height: 5px;
      background: var(--amber-mid);
      border-radius: 5px;
      overflow: hidden;
      margin-bottom: 14px
    }

    .dim-bar-fill {
      height: 100%;
      border-radius: 5px;
      transition: width 1.2s ease
    }

    .dim-insight {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.65
    }

    .btn-report {
      display: block;
      width: 100%;
      padding: 16px;
      background: var(--gold);
      color: var(--navy);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 800;
      border: none;
      border-radius: 32px;
      cursor: pointer;
      transition: all .2s;
      margin-bottom: 20px;
      text-align: center
    }

    .btn-report:hover {
      background: #f8b83a;
      transform: translateY(-2px)
    }

    .results-cta {
      background: linear-gradient(135deg, var(--navy), var(--slate));
      border-radius: 16px;
      padding: 40px;
      text-align: center;
      margin-bottom: 20px
    }

    .results-cta h3 {
      font-family: 'DM Serif Display', serif;
      font-size: 26px;
      color: #FDF6EC;
      margin-bottom: 12px
    }

    .results-cta p {
      font-size: 14px;
      color: rgba(253, 246, 236, 0.6);
      margin-bottom: 24px;
      line-height: 1.7;
      max-width: 480px;
      margin-left: auto;
      margin-right: auto
    }

    .btn-gold-link {
      display: inline-block;
      padding: 14px 32px;
      background: var(--gold);
      color: var(--navy);
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      border-radius: 32px;
      text-decoration: none;
      transition: all .2s
    }

    .btn-gold-link:hover {
      background: #f8b83a;
      transform: translateY(-2px)
    }

    .submit-note {
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 10px
    }

    /* REPORT OVERLAY */
    #rpt-overlay {
      position: fixed;
      inset: 0;
      background: #fff;
      z-index: 500;
      overflow-y: auto;
      display: none
    }

    #rpt-actions {
      position: sticky;
      top: 0;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      padding: 12px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 10;
      gap: 12px;
      flex-wrap: wrap
    }

    .rpt-action-btn {
      padding: 9px 18px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 700;
      border-radius: 24px;
      cursor: pointer;
      transition: all .2s;
      white-space: nowrap
    }

    .rpt-btn-back {
      background: none;
      border: 1.5px solid #d1d5db;
      color: #374151
    }

    .rpt-btn-back:hover {
      border-color: #374151
    }

    .rpt-btn-email {
      background: var(--navy);
      color: var(--gold);
      border: none
    }

    .rpt-btn-email:hover {
      background: var(--slate)
    }

    .rpt-btn-print {
      background: var(--gold);
      color: var(--navy);
      border: none
    }

    .rpt-btn-print:hover {
      background: #f8b83a
    }

    #rpt-email-note {
      font-size: 11px;
      color: #6b7280;
      width: 100%
    }

    /* REPORT PAGES */
    .rpt-pages {
      max-width: 800px;
      margin: 0 auto;
      padding: 32px 24px 60px;
      background: #e8e8e8
    }

    .rpt-page {
      background: var(--amber-bg);
      padding: 48px;
      margin-bottom: 40px;
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10)
    }

    .rpt-hdr {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 36px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--amber-mid)
    }

    .rpt-brand {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .rpt-brand img {
      height: 36px;
      width: auto
    }

    .rpt-brand-text { line-height: 1.15 }

    .rpt-brand-text .bt-top {
      font-size: 8px; font-weight: 600; letter-spacing: .14em;
      text-transform: uppercase; color: var(--text-muted)
    }

    .rpt-brand-text .bt-main {
      font-size: 14px; font-weight: 800; letter-spacing: .02em;
      text-transform: uppercase; color: var(--navy)
    }

    .rpt-brand-text .bt-tag {
      font-size: 7px; font-weight: 500; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold-dark)
    }

    .rpt-name-date { text-align: right }

    .rpt-name-date .nd-name {
      font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .03em
    }

    .rpt-name-date .nd-date {
      font-size: 11px; color: var(--text-muted); margin-top: 2px
    }

    /* overall hero */
    .r-hero {
      background: var(--navy);
      border-radius: 14px;
      padding: 36px 40px;
      text-align: center;
      margin-bottom: 28px
    }

    .r-hero .r-eyebrow {
      font-size: 10px; font-weight: 700; letter-spacing: .16em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 8px
    }

    .r-hero .r-level {
      font-family: 'DM Serif Display', serif;
      font-size: 32px; color: #FDF6EC; margin-bottom: 6px; line-height: 1.2
    }

    .r-hero .r-score {
      font-size: 13px; color: rgba(253,246,236,0.5); margin-bottom: 20px
    }

    .r-hero .r-bar-track {
      height: 8px; background: rgba(255,255,255,0.12);
      border-radius: 8px; max-width: 340px; margin: 0 auto 20px; overflow: hidden
    }

    .r-hero .r-bar-fill {
      height: 100%; background: var(--gold); border-radius: 8px
    }

    .r-hero .r-desc {
      font-size: 14px; color: rgba(253,246,236,0.65);
      line-height: 1.7; max-width: 520px; margin: 0 auto
    }

    /* dimension cards in report */
    .rpt-dim-results { display: flex; flex-direction: column; gap: 14px }

    .rpt-dim-card {
      background: var(--white);
      border: 1px solid var(--amber-mid);
      border-radius: 12px;
      padding: 20px 24px
    }

    .rpt-dim-top {
      display: flex; justify-content: space-between;
      align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px
    }

    .rpt-dim-name {
      font-size: 12px; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; color: var(--navy)
    }

    .rpt-dim-lbl {
      font-size: 10px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; padding: 4px 10px; border-radius: 12px
    }

    .rpt-dim-bar-track {
      height: 5px; background: var(--amber-mid);
      border-radius: 5px; overflow: hidden; margin-bottom: 12px
    }

    .rpt-dim-bar-fill { height: 100%; border-radius: 5px }

    .rpt-dim-insight { font-size: 13px; color: var(--text-mid); line-height: 1.65 }

    /* page 2 */
    .rpt-section-title {
      font-family: 'DM Serif Display', serif;
      font-size: 22px; color: var(--navy);
      margin: 0 0 20px; padding-bottom: 10px;
      border-bottom: 2px solid var(--amber-mid)
    }

    .rpt-dim-deep { margin-bottom: 28px }

    .rpt-dim-deep-hdr {
      display: flex; align-items: baseline; gap: 12px;
      margin-bottom: 10px; flex-wrap: wrap
    }

    .rpt-dim-deep-name {
      font-size: 13px; font-weight: 800; letter-spacing: .04em;
      text-transform: uppercase; color: var(--navy)
    }

    .rpt-dim-deep-lbl {
      font-size: 10px; font-weight: 700; letter-spacing: .07em;
      text-transform: uppercase; padding: 3px 9px; border-radius: 10px
    }

    .rpt-dim-deep-body {
      font-size: 14px; color: var(--text-mid); line-height: 1.75; margin-bottom: 8px
    }

    .rpt-dim-deep-momentum {
      font-size: 13px; color: var(--text-muted); line-height: 1.65;
      padding-left: 14px; border-left: 3px solid var(--amber-mid)
    }

    .rpt-pattern {
      background: var(--white); border: 1px solid var(--amber-mid);
      border-radius: 12px; padding: 24px; margin: 28px 0
    }

    .rpt-pattern-label {
      font-size: 10px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px
    }

    .rpt-pattern-text { font-size: 14px; color: var(--text-mid); line-height: 1.75 }

    .rpt-next {
      background: var(--navy); border-radius: 12px; padding: 28px 32px; margin-bottom: 28px
    }

    .rpt-next-label {
      font-size: 10px; font-weight: 700; letter-spacing: .12em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 8px
    }

    .rpt-next-title {
      font-family: 'DM Serif Display', serif;
      font-size: 18px; color: #FDF6EC; margin-bottom: 10px
    }

    .rpt-next-body { font-size: 14px; color: rgba(253,246,236,0.65); line-height: 1.7 }

    .rpt-quote {
      font-family: 'DM Serif Display', serif;
      font-size: 16px; font-style: italic;
      color: var(--text-muted); line-height: 1.7;
      text-align: center; padding: 24px 32px;
      border-top: 1px solid var(--amber-mid);
      border-bottom: 1px solid var(--amber-mid);
      margin: 28px 0
    }

    .rpt-footer {
      display: flex; justify-content: space-between;
      align-items: center; padding-top: 20px;
      border-top: 1px solid var(--amber-mid);
      margin-top: 32px
    }

    .rpt-footer span { font-size: 11px; color: var(--text-muted) }

    /* FOOTER */
    footer {
      background: #060F1E;
      padding: 28px 5%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px
    }

    .footer-brand {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .footer-mark {
      height: 32px;
      width: auto;
      opacity: .8
    }

    .footer-name {
      font-size: 12px;
      font-weight: 700;
      color: rgba(253, 246, 236, 0.5);
      letter-spacing: .08em;
      text-transform: uppercase
    }

    footer>p {
      font-size: 11px;
      color: rgba(253, 246, 236, 0.3)
    }

    .footer-links {
      display: flex;
      gap: 16px
    }

    .footer-links a {
      font-size: 11px;
      color: rgba(253, 246, 236, 0.3);
      text-decoration: none
    }

    .footer-links a:hover {
      color: rgba(253, 246, 236, 0.6)
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .nav-links {
        display: none
      }

      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: rgba(253, 246, 236, 0.98);
        padding: 16px 5% 20px;
        border-bottom: 1px solid rgba(13, 31, 60, 0.1);
        gap: 14px;
        z-index: 99
      }

      .hamburger {
        display: flex
      }

      .dim-grid {
        grid-template-columns: 1fr
      }

      .field-row {
        grid-template-columns: 1fr
      }

      .card {
        padding: 28px 20px
      }

      .question-text {
        font-size: 19px
      }

      .rpt-page {
        padding: 32px 24px
      }

      .rpt-hdr {
        flex-direction: column;
        gap: 8px
      }

      .rpt-name-date {
        text-align: left
      }
    }

    @media print {

      nav,
      .page-header,
      .quiz-wrapper,
      footer,
      #rpt-actions {
        display: none !important
      }

      #rpt-overlay {
        display: block !important;
        position: static !important;
        overflow: visible !important
      }

      .rpt-pages {
        padding: 0
      }

      .rpt-pages {
        background: #fff;
        padding: 0
      }

      .rpt-page {
        page-break-after: always;
        box-shadow: none;
        margin: 0;
        padding: 40px 48px;
        border-radius: 0
      }

      .rpt-page:last-of-type {
        page-break-after: auto
      }
    }
      /* Nav collapses earlier: six links + CTA need ~1040px */
@media (max-width: 1040px) {
      .nav-links { display: none; }
      .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0; background: rgba(253,246,236,0.98); padding: 16px 5% 20px; border-bottom: 1px solid rgba(13,31,60,0.1); gap: 14px; z-index: 99; }
      .hamburger { display: flex; }
    }

/* Public assessment controls. Scoring and report data remain server-side. */
.intro-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.intro-actions p {
  font-size: 12px;
  color: var(--text-muted);
}

.form-error {
  color: #B42318;
  font-size: 12px;
  margin-top: 10px;
}

.opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.opt:focus-within {
  border-color: var(--gold);
  background: #FFF8EE;
}

#restart {
  margin: 0 auto;
  display: block;
}