/* Website questionnaire · styled to match kagt.co.uk.
   Tokens are the KAGT / DesignSystem palette (kagt/brand/README.md).
   Light only, like the brand. Teal is a fill, never text. Flat: no shadows. */

@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap;
    src: url("../assets/fonts/fraunces-latin-full-normal.woff2") format("woff2-variations"), url("../assets/fonts/fraunces-latin-full-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap;
    src: url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/manrope-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../assets/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../assets/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }

:root {
    color-scheme: light;
    --navy: #0E1733; --navy-2: #1B2750; --navy-3: #2A3868; --navy-ink: #C9D0E4;
    --teal: #00BFA5; --teal-soft: #D9F7F2;
    --page: #F5F6F8; --surface: #FFFFFF; --surface-2: #EEF0F4; --surface-3: #E2E5EC;
    --ink: #0E1733; --ink-2: #545D73;
    --edge: rgba(14, 23, 51, .14);
    --danger: #B42318; --danger-soft: #FDECEA;
    --display: "Fraunces", Georgia, serif;
    --text: "Manrope", "Segoe UI", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, Consolas, monospace;
    --r: 10px;
    --wrap: 1120px;
    --gutter: 20px;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --snap: cubic-bezier(.34, 1.4, .64, 1);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--page); color: var(--ink); font: 400 17px/1.65 var(--text); -webkit-font-smoothing: antialiased; }
main { flex: 1; display: flex; flex-direction: column; }
h1, h2, h3, p, ul, dl, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.on-navy :focus-visible { outline-color: #fff; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 760px; }
.skip { position: absolute; left: 12px; top: -60px; background: #fff; color: var(--navy); padding: 10px 14px; border-radius: 8px; font-weight: 700; z-index: 10; }
.skip:focus { top: 12px; }
.kicker { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.on-navy .kicker { color: var(--navy-ink); }

/* ---- Header ---- */
.site-head { background: var(--navy); color: #fff; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; min-height: 76px; flex-wrap: wrap; padding-block: 14px; }
.kagt-site-logo { display: block; width: 124px; }
.kagt-site-logo svg { display: block; width: 100%; height: auto; }
.site-head__note { font: 700 15px var(--text); color: var(--navy-ink); }

/* ---- Hero: the puzzle board ---- */
.hero { background: var(--navy); color: #fff; flex: 1; display: flex; align-items: center; }
.hero .wrap { padding-block: clamp(64px, 11vw, 132px); }
.hero__words { display: grid; gap: 22px; max-width: 640px; justify-items: start; }
.hero__title { font: 600 clamp(44px, 8vw, 88px)/0.98 var(--display); letter-spacing: -0.025em; }
.hero__subtitle { color: var(--navy-ink); font-size: clamp(18px, 2.2vw, 21px); max-width: 44ch; }
.hero.is-leaving { opacity: 0; transform: translateY(-16px); transition: opacity .35s var(--ease), transform .35s var(--ease); }

/* A see-through band behind header text, so it stays clear when a tile lights up behind it */
.hl { background: rgba(10, 17, 40, .78); color: #DCE2F0; padding: .12em .4em; border-radius: 5px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero__subtitle, .thankyou__text { line-height: 1.85; margin-left: -.4em; }

/* The faint board behind navy sections: a texture, not a feature. It fades further under the words. */
.kagt-field rect { transition-duration: 1.2s; }
.kagt-field { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 65%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35), #000 65%); }

/* ---- Buttons (as on kagt.co.uk) ---- */
.links { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 19px; border-radius: 8px; border: 1.5px solid var(--navy); font: 700 15px/1.2 var(--text); text-decoration: none; background: var(--surface); color: var(--ink); cursor: pointer; transition: background-color .12s, color .12s, border-color .12s; }
.btn:hover { background: var(--navy); color: #fff; }
.btn.primary { background: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--navy-3); border-color: var(--navy-3); }
/* Teal button: fill only, text stays navy (brand rule). The one call to action on a navy hero. */
.btn.signal { background: var(--teal); color: var(--navy); border-color: var(--teal); min-height: 50px; padding-inline: 22px; font-size: 16px; }
.btn.signal:hover { background: #00A891; border-color: #00A891; color: var(--navy); }
.btn__arrow { display: inline-block; transition: transform .2s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
#prevBtn:hover .btn__arrow { transform: translateX(-4px); }
#prevBtn:disabled { visibility: hidden; }
.btn--submit:disabled { cursor: wait; opacity: .7; }

/* ---- Form page ---- */
.form-wrapper { display: none; padding-block: clamp(36px, 6vw, 64px) clamp(56px, 8vw, 96px); }
.form-wrapper.active { display: block; }
@media (prefers-reduced-motion: no-preference) { .form-wrapper.active { animation: rise .42s var(--ease) both; } }

/* Progress: one puzzle piece per step. Done = navy, current = lit teal, to come = grey. */
.progress { display: grid; gap: 12px; margin-bottom: 40px; }
.progress__label { font: 500 13px/1.4 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.progress__steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.progress__dot { height: 40px; border: 0; border-radius: 8px; background: var(--surface-3); color: var(--ink-2); font: 700 14px var(--text); cursor: pointer; display: grid; place-items: center;
    transition: background-color .3s var(--ease), color .3s var(--ease); }
.progress__dot.completed { background: var(--navy); color: #fff; }
.progress__dot.active { background: var(--teal); color: var(--navy); cursor: default; }
@media (prefers-reduced-motion: no-preference) { .progress__dot.active { animation: tile-in .42s var(--snap); } }

/* Steps */
.step { display: none; }
.step.active { display: block; }
@media (prefers-reduced-motion: no-preference) { .step.active { animation: rise .42s var(--ease) both; } }
.step__header { display: grid; gap: 10px; margin-bottom: 32px; }
.step__number { font: 700 12px/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.step__number::before { content: "Step "; }
.step__title { font: 600 clamp(30px, 4.4vw, 44px)/1.1 var(--display); letter-spacing: -0.015em; }
.step__desc { color: var(--ink-2); max-width: 60ch; }
.step__body { display: grid; gap: 28px; background: var(--surface); border: 1px solid rgba(14, 23, 51, .09); border-radius: var(--r); padding: clamp(20px, 4vw, 32px); }

/* Fields */
.field { display: grid; gap: 8px; }
.field__label { font: 700 16px/1.4 var(--text); color: var(--ink); }
.field__hint { font-size: 15px; color: var(--ink-2); margin-top: -4px; }
.field__hint strong { font-weight: 600; }
.req { color: var(--danger); }
.field__input, .field__textarea { width: 100%; font: 400 16px/1.5 var(--text); color: var(--ink); background: var(--surface); padding: 11px 14px; border: 1.5px solid var(--edge); border-radius: 8px; outline: none;
    transition: border-color .15s, box-shadow .15s; }
.field__input::placeholder, .field__textarea::placeholder { color: #8A91A3; }
.field__input:hover, .field__textarea:hover { border-color: rgba(14, 23, 51, .3); }
.field__input:focus, .field__textarea:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.field__textarea { resize: vertical; min-height: 88px; }

/* ---- Choice cards: each has a small tile that lights teal when chosen ---- */
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.checkbox-grid--sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.radio-group { display: grid; gap: 8px; }
.radio-group--inline { display: flex; flex-wrap: wrap; }

.checkbox-card, .radio-card { position: relative; display: block; cursor: pointer; }
.checkbox-card input, .radio-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.checkbox-card__box, .radio-card__box { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 52px; padding: 12px 14px; background: var(--surface); border: 1.5px solid var(--edge); border-radius: 8px;
    transition: border-color .15s, background-color .15s; }
.checkbox-card__box::before, .radio-card__box::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 5px; background: var(--surface-3) center / 12px no-repeat;
    transition: background-color .2s var(--ease); }
.checkbox-card__text, .radio-card__text { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.radio-card__text strong { font-weight: 800; }

.checkbox-card:hover .checkbox-card__box, .radio-card:hover .radio-card__box { border-color: rgba(14, 23, 51, .34); background: #FAFBFC; }
.checkbox-card input:checked + .checkbox-card__box, .radio-card input:checked + .radio-card__box { border-color: var(--navy); background: var(--surface); box-shadow: inset 0 0 0 1px var(--navy); }
/* Checkbox: a navy tick on the lit tile. Radio: a navy piece inside the lit tile. */
.checkbox-card input:checked + .checkbox-card__box::before { background-color: var(--teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%230E1733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.radio-card input:checked + .radio-card__box::before { background-color: var(--teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='3' y='3' width='6' height='6' rx='1.5' fill='%230E1733'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
    .checkbox-card input:checked + .checkbox-card__box::before, .radio-card input:checked + .radio-card__box::before { animation: tile-in .36s var(--snap); }
}
.checkbox-card input:focus-visible + .checkbox-card__box, .radio-card input:focus-visible + .radio-card__box { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ---- Navigation ---- */
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; }

/* ---- Validation and send errors ---- */
.field__input.error, .field__textarea.error { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field__error-msg { font-size: 14px; font-weight: 600; color: var(--danger); }
.form-status { margin-top: 20px; padding: 14px 16px; border-radius: 8px; background: var(--danger-soft); color: #7A1B14; font-size: 15px; line-height: 1.55; }
.form-status a { color: inherit; font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .step.shake { animation: shake .4s var(--ease); } }

/* ---- Thank you: the mark solves itself when the answers have really sent ---- */
.thankyou { display: none; background: var(--navy); color: #fff; flex: 1; align-items: center; }
.thankyou.active { display: flex; }
.thankyou .wrap { padding-block: clamp(64px, 11vw, 132px); }
.thankyou__content { display: grid; gap: 22px; max-width: 600px; justify-items: start; }
.thankyou__mark { width: clamp(88px, 12vw, 120px); }
.thankyou__mark svg { display: block; width: 100%; height: auto; }
.thankyou__title { font: 600 clamp(44px, 7vw, 80px)/0.98 var(--display); letter-spacing: -0.025em; }
.thankyou__text { color: var(--navy-ink); font-size: clamp(18px, 2.2vw, 21px); max-width: 46ch; }

/* ---- Footer ---- */
.site-foot { background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.site-foot .wrap { padding-block: 28px 36px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between; }
.site-foot .left { display: flex; gap: 12px; align-items: center; }
.site-foot .mark { width: 32px; }
.site-foot .mark svg { display: block; width: 100%; height: auto; }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a { color: var(--ink); }

/* ---- Motion ---- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes tile-in { from { transform: scale(.6); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* ---- Small screens ---- */
@media (max-width: 600px) {
    .progress__steps { gap: 4px; }
    .progress__dot { height: 34px; font-size: 13px; }
    .checkbox-grid { grid-template-columns: 1fr; }
    .checkbox-grid--sm { grid-template-columns: 1fr 1fr; }
    .radio-group--inline { flex-direction: column; }
    .form-nav { flex-direction: column-reverse; }
    .form-nav .btn { width: 100%; }
    #prevBtn:disabled { display: none; }
}
@media (max-width: 400px) { .checkbox-grid--sm { grid-template-columns: 1fr; } }