/* Existing site palette and artwork; a guided reflection within the archetypes catalogue. */
#catalog-start { margin: 0 0 2.5rem; padding: 0; background: var(--bg); border: 0; border-radius: 0; text-align: left; scroll-margin-top: 6rem; }
#catalog-start [data-quiz-panel] { display: none; }
#catalog-start [data-quiz-panel].is-active { display: block; }
#catalog-start [hidden] { display: none !important; }
#catalog-start .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#catalog-start .netru-quiz-inner { max-width: 1240px; margin: auto; display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid var(--border); }
#catalog-start .quiz-art { position: relative; min-width: 0; overflow: hidden; background: var(--void); }
#catalog-start .quiz-art > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; opacity: .75; }
#catalog-start .quiz-art::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(24,24,24,.88)); pointer-events: none; }
#catalog-start .quiz-art-caption { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 540px; height: 100%; padding: clamp(1.5rem, 3.5vw, 3rem); color: var(--white); }
#catalog-start .quiz-art-caption span { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; }
#catalog-start .quiz-art-caption p { font: 2.25rem/1.25 'Alike', serif; margin: 1rem 0 1.5rem; color: var(--white); }
#catalog-start .quiz-stage { min-width: 0; align-self: center; padding: clamp(1.5rem, 3.5vw, 3rem); }
#catalog-start .netru-quiz-box { padding: 0; max-width: none; margin: 0; border: 0; border-radius: 0; background: transparent; scroll-margin-top: 7rem; }
#catalog-start [data-quiz-panel="intro"].is-active { display: block; }
#catalog-start .eyebrow { margin-bottom: 1.25rem; font-size: .65rem; }
#catalog-start h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.16; margin: 0 0 1.4rem; text-wrap: balance; }
#catalog-start .quiz-intro-copy { max-width: 31rem; font-size: .95rem; line-height: 1.85; margin-bottom: 1.5rem; }
#catalog-start .quiz-intro-meta { display: flex; gap: 1.25rem; font-size: .73rem; color: var(--text-soft); margin-bottom: 1.75rem; }
#catalog-start .quiz-intro-meta span + span { border-left: 1px solid var(--border); padding-left: 1.25rem; }
#catalog-start .btn-primary { border: 0; min-height: 48px; cursor: pointer; font-family: inherit; }
#catalog-start .quiz-begin { display: inline-flex; align-items: center; gap: 2rem; }
#catalog-start .quiz-begin span { font-size: 1.25rem; transition: transform 150ms ease; }
#catalog-start .quiz-begin:hover span { transform: translateX(4px); }
#catalog-start .quiz-intro-foot { margin-top: 1.25rem; font-size: .73rem; line-height: 1.8; color: var(--text-soft); }
#catalog-start fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#catalog-start legend { width: 100%; padding: 0; }
#catalog-start .quiz-progress-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
#catalog-start .netru-quiz-progress { margin: 0; font-size: .65rem; letter-spacing: .1em; text-align: left; font-weight: 600; text-transform: uppercase; color: var(--burg); }
#catalog-start .quiz-step-name { font-size: .7rem; color: var(--text-soft); }
#catalog-start .quiz-progress-track { display: flex; list-style: none; gap: 6px; padding: 0; margin: .8rem 0 2rem; }
#catalog-start .quiz-progress-track li { flex: 1; height: 3px; background: var(--border); transition: background-color 200ms ease; }
#catalog-start .quiz-progress-track li.is-complete, #catalog-start .quiz-progress-track li[aria-current] { background: var(--burg); }
#catalog-start .netru-quiz-question { font: clamp(1.65rem, 2.25vw, 2.1rem)/1.25 'Alike', serif; color: var(--void); text-align: left; margin-bottom: .65rem; text-wrap: balance; }
#catalog-start .quiz-question-hint { font-size: .75rem; margin-bottom: 1.5rem; color: var(--text-soft); }
#catalog-start .netru-quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.5rem; list-style: none; padding: 0; }
#catalog-start .netru-quiz-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; cursor: pointer; min-height: 150px; height: 100%; padding: 1rem; border: 1px solid var(--border); border-radius: 3px; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
#catalog-start .netru-quiz-option:hover { transform: translateY(-2px); border-color: var(--burg); background: var(--bg-alt); }
#catalog-start .netru-quiz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#catalog-start .quiz-option-letter { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--border); border-radius: 50%; color: var(--text-soft); font-size: .65rem; font-weight: 600; }
#catalog-start .netru-quiz-option .quiz-option-copy { font-size: .81rem; line-height: 1.65; color: var(--text-body); }
#catalog-start .netru-quiz-option:has(input:checked) { border-color: var(--burg); background: var(--cream); }
#catalog-start .netru-quiz-option:has(input:checked) .quiz-option-letter { color: var(--white); background: var(--burg); border-color: var(--burg); }
#catalog-start .netru-quiz-option:focus-within { outline: 2px solid var(--burg); outline-offset: 3px; }
#catalog-start button:focus-visible, #catalog-start a:focus-visible, #catalog-start .quiz-field input:focus-visible { outline: 2px solid var(--burg); outline-offset: 4px; }
#catalog-start .quiz-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; }
#catalog-start .quiz-text-button { min-height: 44px; padding: .65rem 0; border: 0; background: transparent; color: var(--burg); font: inherit; font-size: .75rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
#catalog-start button:disabled { opacity: .45; cursor: default; }
#catalog-start h3 { font-family: 'Alike', serif; font-weight: normal; line-height: 1.25; margin: 0 0 1rem; font-size: clamp(1.7rem, 2.5vw, 2.4rem); text-wrap: balance; }
#catalog-start .quiz-email-copy { font-size: .9rem; line-height: 1.8; margin-bottom: 1.5rem; }
#catalog-start .quiz-field { display: block; margin-bottom: 1rem; font-size: .8rem; font-weight: 500; }
#catalog-start .quiz-field input { box-sizing: border-box; display: block; width: 100%; min-height: 48px; margin-top: .5rem; padding: .75rem; border: 1px solid rgba(88,77,102,.3); border-radius: 3px; background: var(--white); color: var(--text); font: inherit; font-size: 1rem; }
#catalog-start .quiz-email-form .btn-primary { display: block; width: 100%; margin-top: 1.25rem; }
#catalog-start .quiz-result-note { font-size: .72rem; line-height: 1.8; color: var(--text-soft); margin: 1rem 0; }
#catalog-start .quiz-email-error { color: var(--burg); font-size: .85rem; line-height: 1.7; margin: .75rem 0; }
#catalog-start .quiz-email-error:empty, #catalog-start .quiz-email-status:empty { display: none; }
#catalog-start .quiz-email-status { font-size: .85rem; line-height: 1.7; border-left: 2px solid var(--burg); padding: .75rem 1rem; margin-bottom: 1.5rem; }
#catalog-start[data-state="result"] .quiz-art { display: none; }
#catalog-start[data-state="result"] .netru-quiz-inner { display: block; }
#catalog-start .quiz-result-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
#catalog-start .quiz-result-image { width: 100%; height: auto; display: block; border-radius: 3px; }
#catalog-start .quiz-result-kicker { font: 1.3rem/1.4 'Alike', serif; margin-bottom: 1.25rem; }
#catalog-start .netru-quiz-result-eyebrow, #catalog-start .netru-quiz-result-title, #catalog-start .netru-quiz-result-body, #catalog-start .netru-quiz-result-cta { text-align: left; }
#catalog-start .netru-quiz-result-eyebrow { margin-bottom: .75rem; }
#catalog-start .netru-quiz-result-body { font-size: .9rem; line-height: 1.85; margin-bottom: 1.25rem; }
#catalog-start .quiz-result-includes { display: flex; flex-wrap: wrap; gap: .45rem 1rem; padding: 1rem 0; border-top: 1px solid var(--border); margin-bottom: 1.25rem; font-size: .68rem; color: var(--text-soft); }
#catalog-start .quiz-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#catalog-start .quiz-result-foot { margin-top: .75rem; }
#catalog-start[data-state="email"] [data-quiz-panel="result"] { border-top: 1px solid var(--border); padding-top: 2rem; margin-top: 2rem; }
#catalog-start[data-state="email"] .quiz-result-layout { display: block; }
#catalog-start[data-state="email"] .quiz-result-image { max-width: 220px; margin-bottom: 1.5rem; }
@media (max-width: 900px) {
  #catalog-start .netru-quiz-inner { grid-template-columns: .7fr 1.3fr; }
  #catalog-start .quiz-art-caption { padding: 1.5rem; }
  #catalog-start .quiz-art-caption p { font-size: 1.8rem; }
}
@media (max-width: 639px) {
  #catalog-start .netru-quiz-inner { display: block; }
  #catalog-start .quiz-art-caption { min-height: 230px; padding: 1.5rem; }
  #catalog-start .quiz-art-caption p { font-size: 1.65rem; margin: .65rem 0; }
  #catalog-start .quiz-art > img { object-position: center 62%; }
  #catalog-start:not([data-state="intro"]) .quiz-art { display: none; }
  #catalog-start .quiz-stage { padding: 1.5rem 1.15rem; }
  #catalog-start .quiz-progress-track { margin-bottom: 1.5rem; }
  #catalog-start .netru-quiz-options { grid-template-columns: 1fr; gap: .65rem; }
  #catalog-start .netru-quiz-option { flex-direction: row; align-items: flex-start; gap: .8rem; min-height: 0; padding: .9rem; }
  #catalog-start .quiz-option-letter { flex: 0 0 25px; margin-top: .1rem; }
  #catalog-start .quiz-result-layout { display: block; }
  #catalog-start .quiz-result-image { max-width: 320px; margin: 0 auto 1.5rem; }
  #catalog-start .quiz-intro-foot { font-size: .7rem; }
  #catalog-start .quiz-actions .btn-primary { padding-left: 1rem; padding-right: 1rem; }
}
@media (prefers-reduced-motion: reduce) { #catalog-start * { scroll-behavior: auto; transition: none; } }