/* Treatment finder: homepage band + the quiz dialog (quiz.js). */

/* Treatments, then results, then reviews and packages: the second half keeps the treatments backdrop. */
#treatments.treatments { padding-bottom: clamp(56px, 7vw, 96px); }
.treatments.treatments-more { padding: 0 clamp(8px, 1.1vw, 22px) 130px; }
/* Five reviews sit in one row on wide screens instead of leaving one alone on a second row. */
@media (min-width: 1181px) { .story-track:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1180px) and (min-width: 901px) { .story-track > :last-child:nth-child(odd) { grid-column: span 2; } }

.quiz-band { max-width: 1372px; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0 clamp(8px, 2vw, 24px); }
.quiz-band-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3.5vw, 48px); padding: clamp(26px, 3.4vw, 44px) clamp(22px, 4vw, 56px); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-soft); overflow: hidden; }
.quiz-band-inner::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(176,91,60,.12), transparent 70%); pointer-events: none; }
.quiz-band-mark { width: 72px; height: 42px; fill: none; stroke: var(--clay); stroke-width: 1.6; stroke-linecap: round; }
.quiz-band-copy .eyebrow { margin-bottom: 10px; }
.quiz-band-copy h2 { margin: 0 0 8px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.05; }
.quiz-band-copy p:not(.eyebrow) { margin: 0; max-width: 620px; color: var(--bark); }
.quiz-band-action { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; }
.quiz-band-action small { color: var(--taupe); font-size: 11px; letter-spacing: .04em; }
.quiz-band-action .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

@media (max-width: 760px) {
  .quiz-band-inner { grid-template-columns: 1fr; text-align: left; gap: 16px; padding: 26px 20px; }
  .quiz-band-mark { width: 56px; height: 32px; }
  .quiz-band-action { justify-items: stretch; }
  .quiz-band-action .button { width: 100%; }
  .quiz-band-action small { text-align: center; }
}

/* ---------- dialog ---------- */
body.quiz-open { overflow: hidden; }
.quiz-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(860px, calc(100dvh - 32px)); padding: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); display: none; flex-direction: column; overflow: hidden; }
.quiz-dialog[open] { display: flex; animation: quiz-in .28s cubic-bezier(.22,1,.36,1); }
.quiz-dialog::backdrop { background: rgba(23,19,15,.55); backdrop-filter: blur(3px); }
@keyframes quiz-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.quiz-top { display: grid; grid-template-columns: 88px 1fr 44px; align-items: center; gap: 14px; padding: 12px 14px 12px 18px; border-bottom: 1px solid var(--line); }
.quiz-back { justify-self: start; display: inline-flex; gap: 6px; align-items: center; padding: 8px 2px; border: 0; background: none; color: var(--bark); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.quiz-back[hidden] { display: inline-flex; visibility: hidden; }
.quiz-back:hover { color: var(--clay-text); }
.quiz-progress { height: 4px; background: var(--sand); border-radius: 4px; overflow: hidden; }
.quiz-progress span { display: block; width: 0; height: 100%; background: var(--clay); border-radius: 4px; transition: width .35s cubic-bezier(.22,1,.36,1); }
.quiz-close { width: 44px; height: 44px; border: 0; background: none; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.quiz-close:hover { color: var(--clay-text); }

.quiz-body { padding: clamp(24px, 4vw, 44px); overflow-y: auto; overscroll-behavior: contain; }
.quiz-count { margin: 0 0 12px; color: var(--clay-text); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.quiz-question { margin: 0 0 26px; font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.2vw, 40px); line-height: 1.1; letter-spacing: -.02em; outline: none; }
.quiz-options { display: grid; gap: 12px; }
.quiz-options.is-grid { grid-template-columns: 1fr 1fr; }
.quiz-option { position: relative; display: grid; gap: 4px; padding: 18px 52px 18px 20px; min-height: 64px; text-align: left; border: 1px solid var(--line); background: var(--white); color: var(--ink); font: inherit; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .2s ease; }
.quiz-option strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.quiz-option small { color: var(--bark); font-size: 13px; line-height: 1.35; }
.quiz-option-arrow { position: absolute; right: 18px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--clay); stroke-width: 2; opacity: .45; transition: opacity .18s ease, transform .18s ease; }
.quiz-option:hover, .quiz-option:focus-visible { border-color: var(--clay); box-shadow: var(--shadow-soft); }
.quiz-option:hover .quiz-option-arrow, .quiz-option:focus-visible .quiz-option-arrow { opacity: 1; transform: translate(3px, -50%); }
.quiz-option[aria-pressed="true"] { border-color: var(--clay); background: var(--hover-surface); }
.quiz-option:active { transform: scale(.99); }

/* ---------- result ---------- */
.quiz-result { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 3.5vw, 36px); align-items: start; }
.quiz-result-media { margin: 0; aspect-ratio: 4/5; overflow: hidden; background: var(--sand); }
.quiz-result-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo); }
.quiz-result .quiz-question { margin-bottom: 10px; font-size: clamp(26px, 3.6vw, 36px); }
.quiz-meta { margin: 0 0 18px; color: var(--bark); font-size: 14px; }
.quiz-meta b { color: var(--ink); font-size: 18px; }
.quiz-reasons { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.quiz-reasons li, .quiz-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.45; color: var(--cocoa); }
.quiz-reasons .icon, .quiz-note .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--clay); stroke-width: 2; }
.quiz-note { margin: 0 0 10px; padding: 10px 12px; background: var(--cream); color: var(--bark); font-size: 13px; }
.quiz-save { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--clay); background: var(--hover-surface); font-size: 14px; font-weight: 700; color: var(--ink); }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 20px 0 14px; }
.quiz-actions .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.quiz-wa { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.quiz-wa .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.quiz-upsell { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--clay); background: none; color: var(--clay-text); font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }
.quiz-upsell span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--clay); color: #fff; font-size: 16px; line-height: 1; flex: 0 0 auto; }
.quiz-upsell:hover { background: var(--hover-surface); }
.quiz-disclaimer { margin: 0 0 8px; color: var(--taupe); font-size: 12px; line-height: 1.5; }
.quiz-again { padding: 6px 0; border: 0; background: none; color: var(--bark); font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

@media (max-width: 640px) {
  .quiz-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; }
  .quiz-top { grid-template-columns: 72px 1fr 44px; padding: 8px 8px 8px 14px; }
  .quiz-body { padding: 24px 16px 32px; }
  .quiz-options.is-grid { grid-template-columns: 1fr; }
  .quiz-result { grid-template-columns: 1fr; }
  .quiz-result-media { aspect-ratio: 16/10; }
  .quiz-actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-dialog[open] { animation: none; }
  .quiz-progress span, .quiz-option, .quiz-option-arrow { transition: none; }
}

/* Link from each treatment card to its own page (SEO landing pages). */
.treatment-more { display: inline-flex; gap: 6px; margin-top: 12px; color: var(--bark); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
.treatment-more:hover { color: var(--clay-text); }

/* ---------- quiz v2: motion, photo answers, live times ---------- */
.quiz-step { animation: quiz-step-in .36s cubic-bezier(.22,1,.36,1) both; }
.quiz-step.is-back { animation-name: quiz-step-back; }
@keyframes quiz-step-in { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes quiz-step-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.quiz-step .quiz-option { animation: quiz-rise .42s cubic-bezier(.22,1,.36,1) both; }
.quiz-step .quiz-option:nth-child(2) { animation-delay: .05s; }
.quiz-step .quiz-option:nth-child(3) { animation-delay: .1s; }
.quiz-step .quiz-option:nth-child(4) { animation-delay: .15s; }
@keyframes quiz-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quiz-option.is-picked { border-color: var(--clay); background: var(--hover-surface); transform: scale(.985); }
.quiz-option.is-picked .quiz-option-arrow { opacity: 1; transform: translate(6px, -50%); }
.quiz-option-text { display: grid; gap: 4px; }
.quiz-hint { margin: -16px 0 18px; color: var(--taupe); font-size: 13px; }

.quiz-options.is-visual { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.quiz-option.has-img { padding: 0 0 14px; align-content: start; overflow: hidden; }
.quiz-option.has-img .quiz-option-text { padding: 12px 14px 0; }
.quiz-option.has-img .quiz-option-arrow { top: auto; bottom: 14px; transform: none; }
.quiz-option.has-img:hover .quiz-option-arrow, .quiz-option.has-img.is-picked .quiz-option-arrow { transform: translateX(3px); }
.quiz-option-media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.quiz-option-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: var(--photo); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.quiz-option.has-img:hover .quiz-option-media img { transform: scale(1.06); }
.quiz-option.no-img { align-content: center; min-height: 120px; }

/* result reveal */
.quiz-result-media { position: relative; animation: quiz-photo .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes quiz-photo { from { opacity: 0; transform: scale(.94); clip-path: inset(8% 8% 8% 8%); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.quiz-result-media::before, .quiz-result-media::after { content: "✦"; position: absolute; z-index: 1; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.25); animation: quiz-twinkle 2.4s ease-in-out infinite; pointer-events: none; }
.quiz-result-media::before { top: 10%; right: 12%; font-size: 22px; }
.quiz-result-media::after { bottom: 14%; left: 10%; font-size: 14px; animation-delay: .8s; }
@keyframes quiz-twinkle { 0%, 100% { opacity: 0; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(20deg); } }
.quiz-result-copy > * { animation: quiz-rise .5s cubic-bezier(.22,1,.36,1) both; }
.quiz-result-copy > :nth-child(2) { animation-delay: .08s; }
.quiz-result-copy > :nth-child(3) { animation-delay: .14s; }
.quiz-result-copy > :nth-child(4) { animation-delay: .2s; }
.quiz-result-copy > :nth-child(n+5) { animation-delay: .26s; }

.quiz-bonus { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; padding: 11px 14px; background: var(--clay); color: #fff; font-size: 14px; font-weight: 700; }
.quiz-bonus .icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; }

.quiz-slots { margin: 16px 0 4px; min-height: 40px; }
.quiz-slots:not(.is-ready)::before { content: ""; display: block; height: 70px; background: linear-gradient(90deg, var(--cream) 0%, var(--white) 50%, var(--cream) 100%); background-size: 200% 100%; animation: quiz-shimmer 1.2s linear infinite; }
@keyframes quiz-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.quiz-slots-title { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.quiz-slot-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quiz-slot { display: grid; gap: 2px; padding: 9px 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-align: center; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; animation: quiz-rise .4s cubic-bezier(.22,1,.36,1) both; }
.quiz-slot:nth-child(2) { animation-delay: .04s; } .quiz-slot:nth-child(3) { animation-delay: .08s; } .quiz-slot:nth-child(4) { animation-delay: .12s; } .quiz-slot:nth-child(5) { animation-delay: .16s; } .quiz-slot:nth-child(6) { animation-delay: .2s; }
.quiz-slot small { color: var(--bark); font-size: 11px; text-transform: capitalize; }
.quiz-slot b { font-size: 15px; }
.quiz-slot:hover, .quiz-slot:focus-visible { border-color: var(--clay); background: var(--hover-surface); transform: translateY(-2px); }
.quiz-slots-more { display: inline-block; margin-top: 10px; color: var(--clay-text); font-size: 13px; font-weight: 700; }

.quiz-review { margin: 16px 0 6px; padding: 14px 16px; border-left: 2px solid var(--clay); background: var(--white); }
.quiz-review-stars { color: var(--clay); font-size: 12px; letter-spacing: .1em; }
.quiz-review blockquote { margin: 6px 0; font-family: var(--display); font-size: 16px; line-height: 1.4; }
.quiz-review figcaption { color: var(--bark); font-size: 12px; font-weight: 700; }

@media (max-width: 640px) {
  .quiz-options.is-visual { grid-template-columns: 1fr 1fr; gap: 10px; }
  .quiz-option.has-img strong { font-size: 13px; }
  .quiz-option.has-img small { display: none; }
  .quiz-option.no-img { grid-column: 1 / -1; min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-step, .quiz-step .quiz-option, .quiz-result-media, .quiz-result-copy > *, .quiz-slot { animation: none; }
  .quiz-result-media::before, .quiz-result-media::after { display: none; }
}
.quiz-option.has-img .quiz-option-text { padding-right: 38px; }
@media (max-width: 640px) {
  .quiz-options.is-visual > .has-img:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .quiz-options.is-visual > .has-img:last-child:nth-child(odd) .quiz-option-media { aspect-ratio: 2 / 1; }
}
.quiz-last { margin: 4px 0 0; max-width: 260px; text-align: center; color: var(--bark); font-size: 12px; line-height: 1.45; }
.quiz-last a { color: var(--clay-text); font-weight: 700; white-space: nowrap; }