/* Quizzes, estimators, thank-you pages, topic tabs and service-page starters (inc/quizzes.php).
   Loaded only where they appear. Orange for actions, blue for numbers, icons and hovers;
   light grey hand-drawn sketches that draw in once. */

/* ---------- Quiz shell ---------- */
.quiz [hidden], .quiz-recap[hidden] { display: none !important; }
.quiz { position: relative; max-width: 820px; margin: 0 auto; padding-bottom: 24px; isolation: isolate; }
.quiz__sketches { position: absolute; inset: -40px -120px auto auto; z-index: -1; color: var(--c-muted); pointer-events: none; }
.quiz__sketch { position: absolute; width: 240px; opacity: 0.16; stroke-width: 1.3; }
.quiz__sketch--1 { right: 0; top: 0; transform: rotate(6deg); }
.quiz__sketch--2 { right: 170px; top: 210px; width: 130px; transform: rotate(-8deg); opacity: 0.12; }
.quiz__head { display: grid; gap: 14px; margin-bottom: 28px; }
.quiz__title { font-size: var(--fs-h2); line-height: 1.02; max-width: 15em; }
.quiz__intro { font-size: 18px; line-height: 1.55; color: var(--c-muted); max-width: 36em; }
.quiz__typed { min-height: 1.6em; font-size: 17px; font-weight: 600; color: var(--c-text); }
.quiz__typed-text { white-space: pre-wrap; }
.quiz__caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--c-accent); animation: quiz-caret 1s steps(1) infinite; }
.quiz__typed.is-done .quiz__caret { animation: none; opacity: 0; }
@keyframes quiz-caret { 50% { opacity: 0; } }

.quiz__bar { height: 6px; border-radius: 6px; background: var(--c-surface); overflow: hidden; }
.quiz__bar-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-accent); transition: width 400ms var(--ease-out, ease); }
.quiz__count { margin: 8px 0 20px; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.quiz[data-quiz-state="done"] .quiz__count { visibility: hidden; }

/* ---------- Steps ---------- */
.quiz-step { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz-step.is-in { animation: quiz-in 360ms var(--ease-out, ease) both; }
@keyframes quiz-in { from { opacity: 0; transform: translateY(10px); } }
.quiz-step__q { display: block; float: none; width: 100%; padding: 0; margin-bottom: 8px; font-family: var(--f-display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; outline: none; }
.quiz-step__hint { margin-bottom: 4px; color: var(--c-muted); }
.quiz-step__q + * { margin-top: 18px; }
.quiz-step__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; min-height: 44px; }
.quiz-step__nav .quiz-next { margin-left: auto; }
.quiz-back { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--c-muted); cursor: pointer; }
.quiz-back svg { width: 18px; height: 18px; }
.quiz-back:hover, .quiz-back:focus-visible { color: var(--c-blue); }

/* Zulu yes / maybe / no */
.quiz-zulu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.quiz-zulu__btn { display: grid; gap: 2px; justify-items: center; padding: 20px 12px; border-radius: var(--radius); border: 1.5px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); font: inherit; text-decoration: none; cursor: pointer; transition: border-color 160ms, background-color 160ms, color 160ms, transform 160ms; }
.quiz-zulu__zu { font-family: var(--f-display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.1; }
.quiz-zulu__en { font-size: 14px; font-weight: 600; color: var(--c-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.quiz-zulu__btn--yebo { border-color: color-mix(in srgb, var(--c-accent) 55%, transparent); }
.quiz-zulu__btn:hover, .quiz-zulu__btn:focus-visible { border-color: var(--c-blue); transform: translateY(-2px); }
.quiz-zulu__btn.is-picked { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.quiz-zulu__btn.is-picked .quiz-zulu__en { color: inherit; }
.quiz-unsure { display: inline-block; margin-top: 14px; padding: 6px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiz-unsure:hover, .quiz-unsure:focus-visible, .quiz-unsure.is-picked { color: var(--c-blue); }

/* Illustrated cards */
.quiz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.quiz-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-card { position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; min-height: 132px; padding: 20px 22px; border-radius: var(--radius); border: 1.5px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color 160ms, background-color 160ms, transform 160ms; }
.quiz-card__label { position: relative; font-family: var(--f-display); font-size: 21px; font-weight: 700; line-height: 1.15; max-width: 12em; }
.quiz-card__hint { position: relative; font-size: 15px; line-height: 1.45; color: var(--c-muted); max-width: 18em; }
.quiz-card__sketch { position: absolute; right: -26px; bottom: -22px; width: 160px; color: var(--c-muted); opacity: 0.22; stroke-width: 1.4; transition: opacity 200ms, color 200ms; }
.motion .quiz-card__sketch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .quiz-card__sketch.is-drawn path, .motion .quiz-teaser .is-in .quiz-card__sketch path { animation: quiz-draw 1100ms var(--ease-out, ease) forwards; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
@keyframes quiz-draw { to { stroke-dashoffset: 0; } }
.quiz-card:hover, .quiz-card:focus-visible { border-color: var(--c-blue); transform: translateY(-2px); }
.quiz-card:hover .quiz-card__sketch, .quiz-card:focus-visible .quiz-card__sketch { color: var(--c-blue); opacity: 0.26; }
.quiz-card.is-picked { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface-2)); }
.quiz-card.is-picked .quiz-card__sketch { color: var(--c-accent); opacity: 0.3; }

/* Chips */
.quiz-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.quiz-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); font: inherit; font-weight: 600; cursor: pointer; transition: border-color 160ms, background-color 160ms, color 160ms; }
.quiz-chip__icon { width: 18px; height: 18px; color: var(--c-blue); }
.quiz-chip:hover, .quiz-chip:focus-visible { border-color: var(--c-blue); }
.quiz-chip[aria-pressed="true"] { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-white); }
.quiz-chip[aria-pressed="true"] .quiz-chip__icon { color: inherit; }
.quiz-step.is-nudged .quiz-step__hint { color: var(--c-accent); font-weight: 600; }
.quiz-step.is-nudged .quiz-chips { animation: quiz-nudge 300ms; }
@keyframes quiz-nudge { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Slider */
.quiz-slider { display: grid; gap: 14px; padding: 22px 24px 18px; border-radius: var(--radius); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.quiz-slider__out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.quiz-slider__out strong { font-family: var(--f-display); font-size: clamp(32px, 3.4vw, 44px); line-height: 1; color: var(--c-blue); }
.quiz-slider__out span { font-weight: 600; color: var(--c-muted); }
.quiz-slider__input { --pct: 50%; width: 100%; height: 28px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.quiz-slider__input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--c-accent) var(--pct), var(--c-surface) var(--pct)); }
.quiz-slider__input::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--c-accent) var(--pct), var(--c-surface) var(--pct)); }
.quiz-slider__input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--c-white); border: 3px solid var(--c-accent); box-shadow: 0 2px 6px rgba(30, 30, 30, 0.15); }
.quiz-slider__input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--c-white); border: 3px solid var(--c-accent); }
.quiz-slider__input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; border-radius: 8px; }
.quiz-slider__ends { display: flex; justify-content: space-between; font-size: 14px; color: var(--c-muted); }

/* Free text */
.quiz-text { display: grid; gap: 10px; }
.quiz-text textarea, .quiz-text input { width: 100%; padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--c-border-strong); background: var(--c-surface-2); font: inherit; color: var(--c-text); }
.quiz-text textarea:focus, .quiz-text input:focus { outline: none; border-color: var(--c-blue); }
.quiz-text__label { margin-top: 8px; font-weight: 600; }

/* ---------- Result, receipt and contact ---------- */
.quiz-result { position: relative; display: grid; gap: 14px; padding: 32px; border-radius: var(--radius-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); outline: none; animation: quiz-in 420ms var(--ease-out, ease) both; }
.quiz-result__title { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; }
.quiz-result__range { font-family: var(--f-display); font-size: clamp(26px, 3vw, 40px); font-weight: 700; line-height: 1; color: var(--c-blue); }
.quiz-result__text { font-size: 18px; line-height: 1.55; }
.quiz-result__reasons { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.quiz-result__reasons li { position: relative; padding-left: 22px; line-height: 1.5; }
.quiz-result__reasons li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); }
.quiz-result__note { font-size: 14px; line-height: 1.55; color: var(--c-muted); }
.quiz-restart { justify-self: start; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.quiz-restart:hover, .quiz-restart:focus-visible { color: var(--c-blue); }

/* The receipt: dashed rows, a bold total, a torn bottom edge. */
.quiz-receipt { position: relative; margin: 6px 0 10px; padding: 18px 20px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 10px 10px 0 0; font-size: 15px; }
.quiz-receipt::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -9px; height: 10px; background: linear-gradient(-45deg, transparent 6px, var(--c-white) 0) 0 0 / 12px 10px, linear-gradient(45deg, transparent 6px, var(--c-white) 0) 0 0 / 12px 10px; }
.quiz-receipt > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--c-border-strong); }
.quiz-receipt dt { color: var(--c-muted); flex: none; }
.quiz-receipt dd { margin: 0; font-weight: 600; text-align: right; }
.quiz-receipt__total { border-bottom: 0 !important; padding-top: 14px !important; font-size: 17px; }
.quiz-receipt__total dt, .quiz-receipt__total dd { color: var(--c-text); font-weight: 700; }
.quiz-receipt__total dd { color: var(--c-blue); }

.quiz-contact { margin-top: 20px; padding: 32px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); animation: quiz-in 420ms 120ms var(--ease-out, ease) both; }
.quiz-contact__title { font-size: clamp(28px, 3vw, 40px); }
.quiz-contact__text { margin: 8px 0 18px; color: var(--c-muted); }
.quiz-contact__fine { margin-top: 12px; font-size: 14px; color: var(--c-muted); }

/* WPForms, themed through its own CSS variables (modern markup). */
.quiz-contact .wpforms-container {
	--wpforms-field-border-radius: 10px;
	--wpforms-field-border-color: rgba(30, 30, 30, 0.18);
	--wpforms-field-background-color: #fafafa;
	--wpforms-field-text-color: #1e1e1e;
	--wpforms-label-color: #1e1e1e;
	--wpforms-label-sublabel-color: #4f4f4b;
	--wpforms-button-background-color: #ff5c00;
	--wpforms-button-text-color: #fafafa;
	--wpforms-button-border-radius: 12px;
	--wpforms-field-size-input-height: 48px;
	--wpforms-label-size-font-size: 15px;
	--wpforms-field-size-font-size: 16px;
	margin: 0 !important;
}
.quiz-contact .wpforms-container .wpforms-field { padding: 8px 0 !important; }
.quiz-contact .wpforms-container .wpforms-field-label { font-weight: 600 !important; }
.quiz-contact .wpforms-container input:focus, .quiz-contact .wpforms-container textarea:focus { border-color: var(--c-blue) !important; box-shadow: 0 0 0 1px var(--c-blue) !important; }
.quiz-contact .wpforms-container .wpforms-submit { padding: 12px 26px !important; font-size: 17px !important; font-weight: 600 !important; }
.quiz-contact .wpforms-container .wpforms-submit:hover, .quiz-contact .wpforms-container .wpforms-submit:focus { background: var(--c-blue) !important; }
.quiz-contact .wpforms-container .wpforms-field-required + .wpforms-field-required { margin-top: 0; }

/* ---------- Thank-you pages ---------- */
.quiz-thanks__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.quiz-thanks__title { font-size: var(--fs-h2); line-height: 1.02; }
.quiz-thanks__lead { margin-top: 16px; font-size: 19px; line-height: 1.55; color: var(--c-muted); }
.quiz-thanks__h { margin: 40px 0 16px; font-size: 26px; }
.next-steps { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.next-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
.next-steps__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--c-surface) 90%, #1e1e1e); border: 1px solid var(--c-border); font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--c-blue); }
.next-steps strong { display: block; font-size: 18px; }
.next-steps p { margin-top: 2px; color: var(--c-muted); line-height: 1.5; }
.quiz-thanks__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 36px; }
.quiz-recap { position: sticky; top: calc(var(--header-h, 80px) + 24px); display: grid; gap: 12px; padding: 28px; border-radius: var(--radius-lg); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.quiz-recap__title { font-size: 26px; line-height: 1.1; }

/* ---------- Topic tabs (contact, request a quote) ---------- */
.quiz-tabs { margin-top: 56px; }
.quiz-tabs__title { margin: 6px 0 22px; font-size: clamp(30px, 3vw, 44px); }
.quiz-tabs__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.quiz-tab { position: relative; overflow: hidden; display: grid; gap: 4px; min-height: 140px; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--c-border-strong); background: var(--c-surface-2); color: var(--c-text); text-decoration: none; transition: border-color 160ms, transform 160ms; }
.quiz-tab__label { position: relative; font-family: var(--f-display); font-size: 23px; font-weight: 700; line-height: 1.15; }
.quiz-tab__hint { position: relative; color: var(--c-muted); }
.quiz-tab__go { position: relative; align-self: end; display: inline-flex; width: 22px; height: 22px; color: var(--c-accent); transition: transform 160ms; }
.quiz-tab__go svg { width: 100%; height: 100%; }
.quiz-tab__sketch { position: absolute; right: -28px; bottom: -24px; width: 170px; color: var(--c-muted); opacity: 0.15; stroke-width: 1.4; transition: color 200ms, opacity 200ms; }
.quiz-tab:hover, .quiz-tab:focus-visible { border-color: var(--c-blue); transform: translateY(-2px); }
.quiz-tab:hover .quiz-tab__go { transform: translateX(4px); color: var(--c-blue); }
.quiz-tab:hover .quiz-tab__sketch { color: var(--c-blue); opacity: 0.26; }

/* ---------- Contact: "Just want to say howzit?" ---------- */
.contact-howzit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.contact-howzit__title { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04; }
.contact-howzit__text { margin: 14px 0 24px; font-size: 18px; line-height: 1.55; color: var(--c-muted); }
.contact-howzit__email { margin-top: 18px; }
.contact-howzit .social-row { margin-top: 18px; }
.contact-howzit__form { margin-top: 0; animation: none; }
.switchboard { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.switchboard__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--c-surface) 90%, #1e1e1e); border: 1px solid var(--c-border); color: var(--c-blue); }
.switchboard__icon svg { width: 22px; height: 22px; }
.switchboard__title { font-weight: 700; }
.switchboard__text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--c-muted); }
.route--note { cursor: default; }

/* ---------- Service-page starter ---------- */
.quiz-teaser__inner { position: relative; overflow: hidden; isolation: isolate; padding: 56px clamp(24px, 5vw, 64px); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface-2)); border: 1px solid color-mix(in srgb, var(--c-accent) 18%, transparent); }
.quiz-teaser__sketches { position: absolute; inset: 0; z-index: -1; color: var(--c-muted); pointer-events: none; }
.quiz-teaser__sketch { position: absolute; width: 220px; opacity: 0.18; stroke-width: 1.4; }
.quiz-teaser__sketch--1 { right: -30px; top: -20px; transform: rotate(6deg); }
.quiz-teaser__sketch--2 { left: -40px; bottom: -30px; width: 180px; transform: rotate(-8deg); }
.quiz-teaser__copy { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; text-align: center; }
.quiz-teaser__title { font-size: var(--fs-h2); line-height: 1.02; }
.quiz-teaser__q { font-size: 20px; line-height: 1.45; color: var(--c-muted); }
.quiz-teaser .quiz-zulu, .quiz-teaser .quiz-cards { margin-top: 10px; text-align: left; }
.quiz-teaser .quiz-unsure { justify-self: center; margin-top: 2px; }
.quiz-teaser .btn { justify-self: center; margin-top: 8px; }

@media (max-width: 900px) {
	.quiz-tabs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.quiz-thanks__grid, .contact-howzit__grid { grid-template-columns: 1fr; gap: 36px; }
	.quiz-recap { position: static; }
	.quiz__sketches { display: none; }
}
@media (max-width: 600px) {
	.quiz-tabs__list, .quiz-cards, .quiz-cards--2, .quiz-cards--4 { grid-template-columns: 1fr; }
	.quiz-zulu { gap: 8px; }
	.quiz-zulu__btn { padding: 16px 4px; }
	.quiz-zulu__zu { font-size: 17px; letter-spacing: -0.01em; }
	.quiz-zulu__en { font-size: 12px; }
	.quiz-result, .quiz-contact { padding: 22px; }
	.quiz-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.quiz-step.is-in, .quiz-result, .quiz-contact { animation: none; }
}

/* Eyebrow pills keep their natural width inside grids. */
.quiz__head .eyebrow, .quiz-thanks__copy .eyebrow, .quiz-result .eyebrow, .quiz-recap .eyebrow { justify-self: start; }
.quiz-teaser__copy .eyebrow { justify-self: center; }
.quiz-teaser__also { justify-self: center; margin-top: 6px; font-weight: 600; }

/* ---------- Yes / maybe / no buttons: English big, Zulu as the fun line; a beadwork strip in each answer's colour ----------
   Strip = mirror-symmetric dots and a diamond at whole-pixel coordinates, repeated with "space" so nothing is cut. */
.quiz-zulu__btn { --ans: var(--c-blue); --ans-soft: color-mix(in srgb, var(--ans) 10%, var(--c-surface-2)); position: relative; overflow: hidden; padding: 30px 12px 18px; border-color: color-mix(in srgb, var(--ans) 35%, transparent); }
.quiz-zulu__btn--yebo { --ans: #0c73b9; --bead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Ccircle cx='4' cy='5' r='1.5' fill='%230c73b9'/%3E%3Cpath d='M12 1l4 4-4 4-4-4z' fill='%230c73b9'/%3E%3Ccircle cx='20' cy='5' r='1.5' fill='%230c73b9'/%3E%3C/svg%3E"); }
.quiz-zulu__btn--cha { --ans: #d0402b; --bead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Ccircle cx='4' cy='5' r='1.5' fill='%23d0402b'/%3E%3Cpath d='M12 1l4 4-4 4-4-4z' fill='%23d0402b'/%3E%3Ccircle cx='20' cy='5' r='1.5' fill='%23d0402b'/%3E%3C/svg%3E"); }
.quiz-zulu__btn--kungenzeka { --ans: #e3a008; --bead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10'%3E%3Ccircle cx='4' cy='5' r='1.5' fill='%23e3a008'/%3E%3Cpath d='M12 1l4 4-4 4-4-4z' fill='%23e3a008'/%3E%3Ccircle cx='20' cy='5' r='1.5' fill='%23e3a008'/%3E%3C/svg%3E"); }
.quiz-zulu__btn::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 10px; background: var(--bead) 0 0 / 24px 10px space no-repeat; background-repeat: space no-repeat; opacity: 0.85; }
.quiz-zulu__en { font-family: var(--f-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; line-height: 1.1; color: var(--c-text); text-transform: none; letter-spacing: 0; }
.quiz-zulu__zu { font-family: var(--f-body); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--c-muted); font-style: italic; }
.quiz-zulu__btn:hover, .quiz-zulu__btn:focus-visible { border-color: var(--ans); background: var(--ans-soft); }
.quiz-zulu__btn.is-picked { background: var(--ans); border-color: var(--ans); }
.quiz-zulu__btn.is-picked .quiz-zulu__en, .quiz-zulu__btn.is-picked .quiz-zulu__zu { color: #fff; }
.quiz-zulu__btn--kungenzeka.is-picked .quiz-zulu__en, .quiz-zulu__btn--kungenzeka.is-picked .quiz-zulu__zu { color: #1e1e1e; }
.quiz-zulu__btn.is-picked::before { filter: brightness(0) invert(1); opacity: 0.7; }
.quiz-zulu__btn--kungenzeka.is-picked::before { filter: brightness(0); opacity: 0.35; }
@media (max-width: 600px) {
	.quiz-zulu__btn { padding: 26px 4px 14px; }
	.quiz-zulu__en { font-size: 22px; }
	.quiz-zulu__zu { font-size: 12.5px; letter-spacing: 0; }
}

/* English-only answer buttons; the Zulu definition appears subtly under the verdict. */
.quiz-zulu__btn { padding: 28px 12px 20px; }
.quiz-result__def { min-height: 1.5em; margin-top: 2px; font-size: 14px; font-weight: 400; font-style: italic; color: var(--c-muted); }
.quiz-result__def .quiz__caret { width: 1.5px; }

/* The Zulu word again, very small and quiet, under each answer. */
.quiz-zulu__btn .quiz-zulu__zu { display: block; margin-top: 2px; font-family: var(--f-body); font-size: 11.5px; font-weight: 600; font-style: italic; letter-spacing: 0.02em; color: var(--c-muted); opacity: 0.85; }
.quiz-zulu__btn.is-picked .quiz-zulu__zu { color: inherit; }

/* ---------- Contact: intro beside six swapping team headshots ---------- */
.contact-page__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.contact-page__top .page-intro { margin-bottom: 24px; }
.team-shuffle { display: grid; gap: 12px; margin-top: 8px; }
.team-shuffle__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.team-shuffle__face { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--c-surface); text-decoration: none; transition: box-shadow 200ms var(--ease-out); }
.team-shuffle__face img { width: 100%; height: 100%; object-fit: cover; transition: opacity 450ms ease, transform 600ms var(--ease-out); }
.team-shuffle__face.is-swapping img { opacity: 0; transform: scale(1.04); }
.team-shuffle__name { position: absolute; left: 6px; right: 6px; bottom: 6px; display: grid; gap: 1px; padding: 6px 8px; border-radius: 8px; background: rgba(250, 250, 250, 0.92); color: var(--c-text); font-size: 13px; font-weight: 700; line-height: 1.2; opacity: 0; transform: translateY(6px); transition: opacity 200ms, transform 200ms var(--ease-out); }
.team-shuffle__name small { font-size: 11.5px; font-weight: 400; color: var(--c-muted); }
.team-shuffle__face:hover, .team-shuffle__face:focus-visible { box-shadow: 0 0 0 3px var(--c-accent); }
.team-shuffle__face:hover .team-shuffle__name, .team-shuffle__face:focus-visible .team-shuffle__name { opacity: 1; transform: none; }
.team-shuffle__caption { font-size: 14px; color: var(--c-muted); text-align: center; }
@media (max-width: 900px) {
	.contact-page__top { grid-template-columns: 1fr; gap: 8px; }
	.team-shuffle { max-width: 420px; }
	.team-shuffle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.team-shuffle__cell:nth-child(n + 3) { display: none; }
	.team-shuffle__name { opacity: 1; transform: none; }
}
/* Cross-dissolve between team members: the next photo fades in over the current one, on the soft diamond print. */
.team-shuffle__face { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 4l5 5-5 5-5-5z' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3C/svg%3E"), #f6e3c8; }
.team-shuffle__face.is-swapping img { opacity: 1; transform: none; }
.team-shuffle__next { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.team-shuffle__next.is-in { opacity: 1; }

/* ---------- Thank-you pages v2: pattern banner with the team beside it, next steps + recap, their work ---------- */
.thanks-banner { padding: 40px 0 56px; }
.thanks-banner__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 48px; align-items: center; margin-top: 22px; }
.thanks-banner__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.thanks-banner__title { font-size: clamp(40px, 4.6vw, 64px); line-height: 1; }
.thanks-banner__lead { max-width: 46ch; font-size: 19px; line-height: 1.55; }
.thanks-banner__actions { margin-top: 6px; }
.thanks-team { padding: 22px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(30, 30, 30, 0.06); box-shadow: 0 18px 40px -30px rgba(42, 33, 28, 0.5); }
.thanks-team__title { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.thanks-team__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.thanks-team__person { display: grid; grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 14px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 12px; color: var(--c-text); text-decoration: none; transition: background-color 160ms; }
.thanks-team__person:hover, .thanks-team__person:focus-visible { background: #fff; }
.thanks-team__photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--c-surface); }
.thanks-team__photo img { width: 100%; height: 100%; object-fit: cover; }
.thanks-team__name { display: grid; gap: 2px; font-weight: 700; line-height: 1.2; }
.thanks-team__name small { font-size: 13.5px; font-weight: 400; color: var(--c-muted); }
.thanks-team__go { width: 18px; height: 18px; color: var(--c-accent); transition: transform 160ms var(--ease-out); }
.thanks-team__person:hover .thanks-team__go { transform: translateX(3px); color: var(--c-blue); }

.thanks-next__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 48px; align-items: start; }
.thanks-next__title { margin-bottom: 20px; font-size: clamp(30px, 3vw, 40px); }
.thanks-next__side .quiz-recap { position: static; }
.thanks-wait { padding: 24px; border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-border); }
.thanks-wait__title { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.thanks-wait__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.thanks-wait__list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); font-weight: 600; color: var(--c-text); text-decoration: none; transition: border-color 160ms; }
.thanks-wait__list a:hover, .thanks-wait__list a:focus-visible { border-color: var(--c-blue); }
.thanks-wait__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: color-mix(in srgb, var(--c-surface) 90%, #1e1e1e); border: 1px solid var(--c-border); color: var(--c-blue); }
.thanks-wait__icon svg { width: 18px; height: 18px; }
.thanks-work { padding-top: 0; }

@media (max-width: 900px) {
	.thanks-banner__grid, .thanks-next__grid { grid-template-columns: 1fr; gap: 28px; }
}
.thanks-banner__def { margin-top: -4px; font-size: 13.5px; font-style: italic; color: var(--c-muted); }

/* Quiz teaser: the soft diamond print (sky) instead of a flat light tint. */
.quiz-teaser__inner { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M9 4l5 5-5 5-5-5z' fill='none' stroke='%23fff' stroke-opacity='.75' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='18' cy='18' r='1.4' fill='%23fff' fill-opacity='.8'/%3E%3Ccircle cx='9' cy='9' r='1' fill='%232a211c' fill-opacity='.12'/%3E%3C/svg%3E"), #d9eaf7; border-color: rgba(12, 115, 185, 0.15); }
.quiz-teaser__inner .quiz-zulu__btn { background: #fff; }

/* Eight topic tabs: four across on wide screens. */
@media (min-width: 1101px) { .quiz-tabs__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quiz-receipt__alt { border-bottom: 0 !important; margin-top: 4px; padding: 12px 14px !important; border-radius: 12px; background: #fff7ef; border: 1px dashed rgba(255, 92, 0, 0.45) !important; }
.quiz-receipt__alt dt { flex: 1 1 auto; color: var(--c-text); font-weight: 600; }
.quiz-receipt__alt dd { color: var(--c-accent); font-weight: 700; white-space: nowrap; }
@media (max-width: 600px) {
	.quiz-receipt__alt { flex-direction: column; gap: 0; }
	.quiz-receipt__alt dd { text-align: left; font-size: 16px; }
}
.quiz-tabs { scroll-margin-top: 100px; }
/* Phones: calmer result sizes so the price reads clearly without shouting. */
@media (max-width: 600px) {
	.quiz-result__title { font-size: 25px; }
	.quiz-result__range { font-size: 26px; }
	.quiz-result__text { font-size: 16px; }
	.quiz-receipt { padding: 14px 16px 22px; font-size: 14px; }
	.quiz-receipt__total { font-size: 15px; }
	.quiz-receipt__total dt { flex: 1 1 auto; }
	.quiz-receipt__total dd { white-space: nowrap; }
}

/* "Get started" on a plan: what they picked, what happens next, who they'll talk to, a short form. */
.plan-start { padding: 32px 0 72px; }
.plan-start__head { max-width: 720px; margin-top: 18px; }
.plan-start__title { margin-top: 10px; font-size: clamp(32px, 4vw, 52px); line-height: 1.04; }
.plan-start__lead { margin-top: 14px; font-size: 18px; line-height: 1.55; }
.plan-start__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px; align-items: start; margin-top: 36px; }
.plan-start__main, .plan-start__side { display: grid; gap: 24px; }
.plan-pick { padding: 26px 28px; border-radius: var(--radius-lg); background: #fffaf2; border: 2px solid var(--c-accent); box-shadow: 0 24px 50px -34px rgba(42, 33, 28, 0.55); }
.plan-pick__service { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.plan-pick__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 6px 0 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--c-border-strong); }
.plan-pick__name { font-size: clamp(24px, 2.4vw, 32px); }
.plan-pick__price { font-family: var(--f-display); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: var(--c-blue); }
.plan-pick__features { margin: 0; }
.plan-pick__more { margin-top: 10px; font-size: 14px; color: var(--c-muted); }
.plan-pick__change { display: inline-flex; align-items: center; gap: 4px; margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 4px; }
.plan-pick__change svg { width: 16px; height: 16px; color: var(--c-accent); }
.plan-start__next { padding: 26px 28px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(30, 30, 30, 0.06); }
.plan-start__h2 { margin-bottom: 16px; font-size: 24px; }
.plan-start__form { margin-top: 0; background: #fff; }
.plan-start__form .quiz-contact__title { font-size: clamp(24px, 2.4vw, 30px); }
@media (max-width: 900px) {
	.plan-start__grid { grid-template-columns: 1fr; }
	/* Phones: their pick, then the form, then who they will talk to and the next steps. */
	.plan-start__main, .plan-start__side { display: contents; }
	.plan-pick { order: 1; }
	.plan-start__form { order: 2; }
	.plan-start__side .thanks-team { order: 3; }
	.plan-start__next { order: 4; }
}
@media (max-width: 600px) {
	.plan-start { padding: 20px 0 48px; }
	.plan-start__lead { font-size: 16px; }
	.plan-pick, .plan-start__next { padding: 20px; }
	.plan-start__form { padding: 22px; }
}
.plan-pick__features { display: grid; gap: 8px; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; }
.plan-pick__features li { position: relative; padding-left: 26px; }
.plan-pick__features li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 92, 0, 0.16); }
.plan-pick__features li::after { content: ""; position: absolute; left: 5px; top: calc(0.2em + 4px); width: 6px; height: 4px; border-left: 2px solid var(--c-accent); border-bottom: 2px solid var(--c-accent); transform: rotate(-45deg); }