/* Book My Vehicle — bright, warm, mobile-first.
   Written narrow-first: the only breakpoints widen things for larger screens. */

:root {
    /* Sampled from the logo: the badge runs gold at the top through orange to
       red at the bottom. --brand-deep is the text-safe end (5.07:1 on the page
       background); the brand orange itself is only 3.04:1 and must never carry
       body copy. Dark ink on the gradient is 5.7:1, which is why buttons are
       ink-on-gradient rather than the logo's white-on-gradient. */
    --brand-gold: #FEA513;
    --brand: #FC5E1D;
    --brand-red: #F33342;
    --brand-deep: #C2410C;
    --brand-soft: #FFF0E6;
    --brand-gradient: linear-gradient(150deg, #FEA513 0%, #FC5E1D 52%, #F33342 100%);

    --ink: #1F1613;
    --ink-soft: #4A3A33;
    --muted: #7C6A61;

    --surface: #FFFCFA;
    --surface-warm: #FFF4EC;
    --card: #FFFFFF;
    --line: #F7E4D8;

    /* Distinct from the brand red so an error never reads as decoration. */
    --danger: #B42318;

    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
    --shadow: 0 4px 16px rgba(28, 25, 23, 0.08);
    --shadow-lg: 0 12px 32px rgba(28, 25, 23, 0.12);

    --gutter: 20px;
    --section-y: 56px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    /* 17px base: comfortably readable on a phone without zooming. */
    font: 500 17px/1.6 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--surface);
    /* Nothing on this page may scroll the body sideways. */
    overflow-x: hidden;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-weight: 800;
}

p {
    margin: 0;
}

img, svg {
    max-width: 100%;
}

.container {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 52px tall: a comfortable thumb target. */
    min-height: 52px;
    padding: 14px 24px;
    border: 0;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--brand-gradient);
    color: var(--ink);
    box-shadow: 0 4px 14px rgba(252, 94, 29, 0.3);
}

/* A gradient cannot be transitioned, so the hover lifts it with a filter. */
.btn-primary:hover {
    filter: brightness(1.06);
}

.btn-lg {
    min-height: 52px;
    font-size: 17px;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn.loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.btn.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2.5px solid rgba(28, 25, 23, 0.25);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 252, 250, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

/* 60px is load-bearing: the hero's min-height subtracts it to fill the screen
   without overflowing it. Change one and change the other. */
.site-header .container {
    display: flex;
    align-items: center;
    min-height: 60px;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--ink);
    text-decoration: none;
}

.logo-mark {
    display: block;
    width: 38px;
    height: 38px;
}

/* Lowercase and tight, following the wordmark inside the badge. */
.logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.logo-tld {
    color: var(--brand-deep);
    font-weight: 600;
}

/* ---------- Hero ---------- */

/* The whole form has to sit on one screen, so the hero is sized to the viewport
   and everything inside it is kept deliberately tight. svh rather than vh so
   mobile browser chrome is accounted for; the vh line is the fallback. */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 60px);
    min-height: calc(100svh - 60px);
    padding: 20px 0 28px;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--brand-soft) 0%, rgba(255, 240, 230, 0) 62%),
        var(--surface);
    text-align: center;
    scroll-margin-top: 60px;
}

.hero h1 {
    font-size: clamp(24px, 6.6vw, 38px);
}

.highlight {
    color: var(--brand-deep);
}

.hero-sub {
    margin: 8px auto 16px;
    max-width: 34ch;
    color: var(--ink-soft);
    font-size: 15.5px;
}

.hero-reassure {
    margin-top: 14px;
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* ---------- Reg plate ---------- */

.reg-plate {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #FFD400;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.gb-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex: 0 0 40px;
    background: #0A3DA5;
    color: #FFF;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.reg-plate input {
    flex: 1 1 auto;
    /* min-width:0 stops the input forcing the flex row wider than the screen. */
    min-width: 0;
    width: 100%;
    padding: 12px 10px;
    border: 0;
    background: transparent;
    color: #111;
    /* Comfortably above 16px, which is where iOS starts zooming on focus. */
    font: 800 22px/1.2 'Poppins', sans-serif;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.reg-plate input::placeholder {
    color: rgba(17, 17, 17, 0.38);
}

.reg-plate input:focus {
    outline: none;
}

.reg-plate:focus-within {
    box-shadow: 0 0 0 4px rgba(252, 94, 29, 0.32), var(--shadow);
}

/* ---------- Insider ---------- */

.insider {
    padding: 32px 0;
    background: var(--surface-warm);
    border-block: 1px solid var(--line);
}

.insider p {
    color: var(--ink-soft);
    font-size: 16.5px;
}

.insider strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink);
    font-size: 18px;
    font-weight: 800;
}

/* ---------- Quote form ---------- */

/* The single form. Sits inside the centred hero, so it resets to left-aligned. */
.quote-card {
    padding: 18px 16px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: left;
}

.field {
    display: block;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

/* .field sets display:block, which would beat the browser's [hidden] rule. */
.field[hidden] {
    display: none;
}

/* Revealed by a chip, so it sits attached to the chips above it. */
.field-revealed {
    margin: 14px 0 0;
    animation: reveal 0.2s ease;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.field > label,
.field legend {
    display: block;
    margin-bottom: 6px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
}

.label-soft {
    color: var(--muted);
    font-weight: 600;
}

/* Direct children only. The reg input is nested inside .reg-plate and must keep
   the plate styling — a descendant selector here outranks .reg-plate input and
   silently strips it back to a plain white box. */
/* Every direct-child input, not a list of types. Listing them meant the email
   field — added later, as type="email" — matched nothing: no styling, and no
   font-size, so it fell back to the browser default of about 13px and iOS zoomed
   the page whenever it was tapped. The chip checkboxes are nested inside
   .chips > .chip, so they are not direct children and are unaffected. */
.field > input {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    /* 16px minimum, again to stop iOS zooming on focus. */
    font: 600 16px/1.4 'Poppins', sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field > input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(252, 94, 29, 0.22);
}

.field > input.error {
    border-color: var(--danger);
}

.field .reg-plate:has(input.error) {
    border-color: var(--danger);
}

/* Postcode and mobile are both short, so they pair up at every width rather
   than costing another row of height on a phone. */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.error-message {
    margin-top: 6px;
    color: var(--danger);
    font-size: 14px;
    font-weight: 600;
}

/* ---------- Chips ---------- */

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.chip span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip span:hover {
    border-color: var(--brand);
}

.chip input:checked + span {
    background: var(--brand);
    border-color: var(--brand-deep);
    color: var(--ink);
    font-weight: 700;
}

.chip input:focus-visible + span {
    box-shadow: 0 0 0 4px rgba(252, 94, 29, 0.32);
}

/* Confirmation that replaces the form once it is sent. */
.quote-card[hidden],
.sent-panel[hidden] {
    display: none;
}

.sent-panel {
    text-align: center;
    outline: none;
}

.sent-icon {
    color: var(--brand-deep);
}

.sent-panel h2 {
    margin: 6px 0 8px;
    font-size: 22px;
}

.sent-panel p {
    color: var(--ink-soft);
    font-size: 15.5px;
}

.sent-again {
    margin-top: 18px;
    padding: 8px;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.sent-again:hover {
    color: var(--ink);
}

.quote-promise {
    margin-top: 12px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: center;
}

/* ---------- Steps ---------- */

.steps {
    padding: var(--section-y) 0;
    background: var(--surface-warm);
    border-block: 1px solid var(--line);
}

.steps h2,
.handled h2 {
    margin-bottom: 24px;
    font-size: 26px;
}

.step-list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.step-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    background: var(--brand-gradient);
    border-radius: 50%;
    color: var(--ink);
    font-size: 15px;
    font-weight: 800;
}

.step-list h3 {
    font-size: 17px;
}

.step-list p {
    margin-top: 4px;
    color: var(--ink-soft);
    font-size: 15.5px;
}

/* ---------- What I handle ---------- */

.handled {
    padding: var(--section-y) 0;
}

.handled h2 {
    margin-bottom: 10px;
}

/* The list underneath is illustrative, not a menu — this line is what stops it
   reading as the limit of what we cover. */
.handled-lead {
    margin-bottom: 20px;
    color: var(--ink-soft);
    font-size: 16px;
}

.handled-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.handled-list li {
    padding: 9px 16px;
    background: var(--brand-soft);
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 600;
}

/* ---------- Closing ---------- */

.closing {
    padding: var(--section-y) 0;
    background: var(--surface-warm);
    border-top: 1px solid var(--line);
    text-align: center;
}

.closing h2 {
    margin-bottom: 22px;
    font-size: 26px;
}

.closing-note {
    margin-top: 18px;
    color: var(--muted);
    font-size: 14.5px;
}

/* ---------- Footer ---------- */

.site-footer {
    padding: 32px 0 40px;
    background: var(--ink);
    color: #E5D8D1;
    text-align: center;
}

/* A hairline of the brand gradient, so the footer still carries the identity
   without a logo on a dark ground. */
.site-footer::before {
    content: '';
    display: block;
    height: 3px;
    margin: -32px 0 32px;
    background: var(--brand-gradient);
}

.footer-brand {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #FFF;
}

.footer-note {
    margin: 12px auto 0;
    max-width: 42ch;
    font-size: 14px;
    color: #B8ADA4;
}

.footer-legal {
    margin-top: 20px;
    font-size: 13px;
    color: #8A817A;
}

/* ---------- Modal ---------- */

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(28, 25, 23, 0.6);
    backdrop-filter: blur(3px);
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 36px 24px 24px;
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    text-align: center;
    animation: modal-in 0.25s ease;
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.modal-icon {
    color: var(--brand-deep);
}

.modal-card h2 {
    margin: 8px 0 10px;
    font-size: 26px;
}

.modal-card p {
    margin-bottom: 24px;
    color: var(--ink-soft);
    font-size: 16px;
}

.modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    color: var(--muted);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

/* ---------- Wider screens ---------- */

@media (min-width: 560px) {
    .field-row {
        gap: 16px;
    }

    .quote-card {
        padding: 24px 24px 26px;
    }
}

@media (min-width: 768px) {
    :root {
        --section-y: 72px;
    }

    .hero {
        padding: 32px 0 40px;
    }

    .hero-sub {
        margin-bottom: 20px;
        font-size: 17px;
    }

    .steps h2,
    .handled h2,
    .closing h2 {
        font-size: 30px;
    }
}

/* Short viewports — small phones, and laptops in landscape. Everything above
   the form gives up its height first, because the form is the point of the
   page and a heading the reader has to scroll past is worse than no heading. */
@media (max-height: 720px) {
    .hero {
        padding: 12px 0 18px;
    }

    .hero h1 {
        font-size: clamp(21px, 5.4vw, 28px);
    }

    .hero-sub {
        display: none;
    }

    .quote-card {
        padding: 14px 14px 16px;
    }

    .field {
        margin-bottom: 11px;
    }

    .hero-reassure {
        margin-top: 10px;
    }
}

@media (max-height: 600px) {
    .site-header {
        position: static;
    }

    .hero {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}