:root {
    --naffco-red: #C8102E;
    --naffco-black: #111111;
    --naffco-grey: #6b6b6b;
    --border: #d9d9d9;
    --bg: #ffffff;
    --radius: 0; /* sharp corners throughout, matching the source site */
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--naffco-black);
    background: var(--bg);
    line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    display: flow-root;
}

/* Background image is pinned to exactly 80vh and sits behind everything.
   It's absolutely positioned so it never affects .hero's real height —
   .hero's height comes only from .enquiry-card below, which is allowed
   to run on past the image. */
.hero__bg {
    position: absolute;
    inset: 0;
    height: 80vh;
    z-index: 0;
    background-color: var(--naffco-black); /* fallback until the real photo is dropped in */
    background-image:
        linear-gradient(100deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.08) 78%),
        url("../img/hero-maintenance.jpg");
    background-size: cover;
    background-position: center;
}

.hero__brand {
    position: absolute;
    top: 28px;
    left: 5%;
    z-index: 2;
}
.hero__brand-mark { height: 34px; display: block; }

.hero__text {
    position: absolute;
    left: 5%;
    top: clamp(250px, 12vh, 140px);
    max-width: 540px;
    color: #fff;
    z-index: 2;
}
.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.hero__eyebrow-icon { height: 14px; width: auto; }
.hero__headline {
    font-size: clamp(36px, 4.2vw, 58px);
    line-height: 1.05;
    font-weight: 800;
    margin: 0;
}

/* Bar sits pinned to the bottom edge of the 80vh image, but only spans
   the left zone that the enquiry card doesn't cover. */
.hero__back-bar {
    position: absolute;
    left: 0;
    top: calc(80vh - 64px);
    width: 34%;
    height: 64px;
    display: flex;
    align-items: stretch;
    z-index: 2;
}
.hero__back-icon {
    background: var(--naffco-red);
    color: #fff;
    width: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.hero__back-label {
    background: var(--naffco-black);
    color: #fff;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 0 10px;
}
.hero__back-bar:hover .hero__back-label { color: var(--naffco-red); }

/* ---------- Enquiry card ---------- */
/* The only in-flow child of .hero — its margin-top pulls it up into the
   image (overlap) and its height (whatever the form needs) is what
   actually gives .hero its real height, so the footer lands correctly
   right after the form regardless of how tall it is. */
.enquiry-card {
    position: relative;
    z-index: 2;
    margin-left: 34%;
    margin-top: 40vh;
    background: #f4f4f5;
    min-height: 40vh;
}
.enquiry-card__inner {
    max-width: 820px;
    margin: 0;
    padding: clamp(42px, 4vw, 72px) clamp(28px, 5vw, 96px) 70px;
}

.enquiry__title { font-size: 34px; font-weight: 800; margin: 0 0 16px; }
.enquiry__intro { color: var(--naffco-grey); margin-bottom: 26px; max-width: 620px; }
.enquiry__rule { border: none; border-top: 1px solid var(--border); margin: 0 0 30px; }
.enquiry__subhead {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 24px;
}

@media (max-width: 900px) {
    .hero__bg { height: 60vh; }
    .hero__text { top: 120px; max-width: 80%; }
    .hero__back-bar { top: calc(60vh - 56px); width: 100%; height: 56px; }
    .enquiry-card { margin-left: 0; margin-top: 60vh; }
    .enquiry-card__inner { max-width: 760px; margin: 0 auto; }
}

.field, .field-group { margin-bottom: 18px; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; margin-bottom: 0; }
.field-sub { font-size: 12px; color: var(--naffco-grey); }

label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.req { color: var(--naffco-red); }

/* ---------- Accordion: Choose your inquiry type ---------- */
.accordion__selected {
    font-size: 13px;
    color: var(--naffco-grey);
    margin: 0 0 10px;
    font-weight: 400;
}
.accordion__selected.is-set { color: var(--naffco-black); font-weight: 600; }

.accordion { border: 1px solid var(--border); background: #fff; }
.accordion__item + .accordion__item { border-top: 1px solid var(--border); }

.accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: none;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--naffco-black);
}
.accordion__header:hover { background: #fafafa; }
.accordion__icon {
    color: var(--naffco-red);
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
    transition: transform .15s ease;
}
.accordion__item.is-open > .accordion__header .accordion__icon { transform: rotate(45deg); }
.accordion__item.has-selection > .accordion__header { background: #fdecef; }
.accordion__item.has-selection > .accordion__header .accordion__icon { color: var(--naffco-red); }

.accordion__panel {
    display: none;
    padding: 14px 16px 16px;
    background: #fafafa;
    border-top: 1px solid var(--border);
}
.accordion__item.is-open > .accordion__panel { display: block; }

/* Each type option is a full selectable row, not a native radio button.
   The <input> itself is visually hidden; the row + custom check mark
   carry the selected state instead. */
.accordion__option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--naffco-black);
    background: #fff;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.accordion__option:last-child { margin-bottom: 0; }
.accordion__option:hover { border-color: var(--naffco-red); }

.accordion__option input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.accordion__check {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: transparent;
    background: #fff;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.accordion__option.is-selected {
    border-color: var(--naffco-red);
    background: #fdecef;
    font-weight: 700;
}
.accordion__option.is-selected .accordion__check {
    background: var(--naffco-red);
    border-color: var(--naffco-red);
    color: #fff;
}

input[type=text],
input[type=email],
input[type=tel],
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
    background: #fff;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--naffco-red);
    box-shadow: 0 0 0 3px rgba(200,16,46,0.12);
}

/* Honeypot: visually hidden, still present in the DOM and tab order excluded */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.btn-submit {
    background: var(--naffco-red);
    color: #fff;
    border: none;
    padding: 13px 36px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s ease;
}
.btn-submit:hover { background: #a50d26; }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }

.form-alert {
    padding: 12px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}
.form-alert.success { background: #e7f6ec; color: #1e7a3d; border: 1px solid #b7e5c4; }
.form-alert.error { background: #fdeaea; color: #a11; border: 1px solid #f3b9b9; }

.site-footer {
    background: var(--naffco-black);
    color: #ccc;
    padding: 40px 5%;
    font-size: 14px;
}
.footer__inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.footer__logo { height: 34px; margin-bottom: 18px; }
.footer__links { margin-top: 18px; display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.footer__links a:hover { color: #fff; }

@media (max-width: 600px) {
    .field-row { flex-direction: column; gap: 18px; }
    .hero__back-icon { width: 52px; min-width: 52px; }
    .hero__back-label { font-size: 11px; padding: 0 8px; }
}