:root {
    --navy: #081e45;
    --navy-hover: #173461;
    --red: #870e0b;
    --pale-blue: #e9eef5;
    --border: #c3cedf;
    --ink: #252a32;
    --muted: #505b6c;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: #f4f6f9;
    line-height: 1.6;
    font-size: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--navy); text-underline-offset: .2em; }
.site-header, .booking-panel, .site-footer { width: min(calc(100% - 2rem), 42rem); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; }
.brand { display: inline-flex; max-width: 100%; border-radius: .25rem; }
.brand-logo { display: block; width: 168px; max-width: 100%; height: auto; }
.header-caption { margin: 0; color: var(--navy); font-size: .9375rem; font-weight: 600; }
.booking-panel { padding: clamp(1.25rem, 4vw, 2rem); margin-bottom: 1.5rem; background: white; border: 1px solid var(--border); border-top: 4px solid var(--red); border-radius: .75rem; box-shadow: 0 4px 18px rgb(8 30 69 / 4%); }
h1 { margin: 0 0 .875rem; color: var(--navy); font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
h2 { color: var(--navy); font-size: 1.125rem; line-height: 1.4; margin: 0 0 .625rem; }
p { overflow-wrap: anywhere; }
.intro { margin: 0 0 .75rem; color: var(--muted); }
.type-list { list-style: none; padding: 0; margin: 1.5rem 0 1rem; display: grid; gap: .875rem; }
.type-card { display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 1rem 1.25rem; border: 1px solid var(--border); border-left: 3px solid var(--navy); border-radius: .5rem; background: #f8fafd; color: var(--navy); text-decoration: none; overflow-wrap: anywhere; }
.type-card:hover { background: var(--pale-blue); border-color: var(--navy); }
.type-name { font-size: 1.125rem; font-weight: 650; }
.duration { color: var(--muted); font-size: 1rem; }
.back-link { display: inline-flex; align-items: center; min-height: 48px; padding: .625rem .875rem; margin-top: .5rem; border: 1px solid var(--border); border-radius: .375rem; background: white; font-size: .9375rem; max-width: 100%; overflow-wrap: anywhere; }
.back-link:hover, .button-secondary:hover { background: var(--pale-blue); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.skip-link { position: absolute; left: 1rem; top: .5rem; transform: translateY(-200%); background: white; padding: .75rem; z-index: 1; }
.skip-link:focus { transform: translateY(0); }
.customer-form { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.form-field label { display: block; color: var(--navy); font-weight: 600; margin-bottom: .375rem; }
.form-field input { width: 100%; min-height: 48px; padding: .75rem; border: 1px solid #8f9eb4; border-radius: .375rem; font: inherit; color: var(--ink); background: white; }
.errorlist { color: var(--red); margin: .5rem 0 0; padding-left: 1.25rem; }
.form-field input[aria-invalid="true"] { border: 2px solid var(--red); }
.button, .continue-button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; max-width: 100%; padding: .875rem 1.25rem; border: 1px solid transparent; border-radius: .5rem; font: inherit; font-weight: 600; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.button-primary, .continue-button { background: var(--navy); color: white; }
.button-primary:hover, .continue-button:hover { background: var(--navy-hover); }
.button-secondary { border-color: var(--border); color: var(--navy); background: white; }
button:disabled { background: #d9dfe7; color: #505b6c; cursor: not-allowed; }
.booking-message, .empty-message { padding: 1rem; background: var(--pale-blue); border: 1px solid var(--border); border-left: 3px solid var(--red); border-radius: .375rem; overflow-wrap: anywhere; }
.booking-message { margin-bottom: 1.5rem; }
.booking-message p { margin: 0; }
.appointment-details { background: #f8fafd; border: 1px solid var(--border); border-radius: .5rem; padding: 1rem 1.25rem; margin-block: 1rem; }
.appointment-details p { margin: .5rem 0; color: var(--ink); }
.confirmation-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.5rem 0; padding: 1.25rem; border: 1px solid var(--border); border-radius: .5rem; background: #f8fafd; }
.confirmation-details > div { min-width: 0; }
.confirmation-details dt { color: var(--muted); font-size: .9375rem; margin-bottom: .25rem; }
.confirmation-details dd { margin: 0; font-weight: 600; color: var(--navy); overflow-wrap: anywhere; }
.status-label { color: var(--red); font-size: .9375rem; font-weight: 700; margin: 0 0 .5rem; }
.location-instructions { padding: 1.25rem; border-radius: .5rem; background: var(--pale-blue); margin-bottom: 1rem; }
.location-instructions p { margin-bottom: 0; }
.site-footer { margin-top: auto; padding-block: 1rem 1.75rem; text-align: center; color: var(--muted); font-size: .9375rem; }
.site-footer p { margin: 0 0 .375rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
.landing-page .site-header { flex-direction: column; gap: .5rem; padding-block: 1.5rem; }
.landing-page .brand-logo { width: 300px; }
.landing-page .header-caption { display: none; }
.landing-page .booking-panel { text-align: center; }
.landing-intro .intro { font-size: 1.125rem; margin-bottom: 1.5rem; }
.landing-help { text-align: left; padding: 1.25rem; margin-block: 2rem 1.5rem; border-radius: .5rem; background: var(--pale-blue); }
.landing-help p { margin: 0; color: var(--muted); }

@media (max-width: 480px) {
    .site-header, .booking-panel, .site-footer { width: calc(100% - 1.5rem); }
    .brand-logo { width: 136px; }
    .header-caption { font-size: .875rem; max-width: 8rem; text-align: right; }
    .landing-page .brand-logo { width: 220px; }
    .confirmation-details { grid-template-columns: 1fr; gap: 1rem; }
    .button, .continue-button { width: 100%; }
    .back-link { display: flex; }
}

.action-group { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-block: 1rem; }
.action-group form { margin: 0; }
.button-cancel { background: var(--red); color: white; }
.button-cancel:hover { background: #650b09; }
.late-choices { border: 0; padding: 0; margin: 0; min-width: 0; }
.late-choices legend { color: var(--navy); font-weight: 600; margin-bottom: .75rem; }
.late-choices label { display: flex; align-items: center; gap: .875rem; padding: 1rem; min-height: 56px; border: 1px solid var(--border); border-radius: .5rem; margin-bottom: .75rem; cursor: pointer; }
.late-choices label:hover { background: var(--pale-blue); }
.late-choices input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--navy); }
@media (max-width: 480px) { .action-group, .action-group form { width: 100%; } }