:root{
	--g:#82d40b;
	--b:#070909;
	--p:#111512;
	--l:#2b332e;
	--w:#f5f6f2;
	--m:#b8beb9
}
*{
	box-sizing:border-box
}
body{
	margin:0;
	background:var(--b);
	color:var(--w);
	font-family:Arial,sans-serif
}
a{
	color:inherit
}
.wrap{max-width:1150px;margin:auto;padding:0 22px}
header{position:sticky;top:0;z-index:10;background:#070909f5;border-bottom:1px solid var(--l)}
nav{height:72px;display:flex;align-items:center;justify-content:space-between}

.logo{font-size:32px;font-weight:900;text-decoration:none}
.logo span,h1 span,h2 span{color:var(--g)}


.links{display:flex;gap:25px;font-weight:bold}
.links a{text-decoration:none}
.btn{display:inline-block;background:var(--g);color:#070907;border:0;border-radius:7px;padding:13px 19px;font-weight:900;text-decoration:none;cursor:pointer}.alt{background:transparent;color:white;border:1px solid #485148}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:center;padding:70px 0}
.eyebrow{color:var(--g);font-size:13px;font-weight:900;letter-spacing:2px;text-transform:uppercase}

.hero h1,.hero h2,.hero h3{
	font-family:Impact,'Arial Narrow',Arial,sans-serif;
  text-transform:uppercase
}
h1{font-size:clamp(60px,8vw,100px);line-height:.87;margin:14px 0 22px}.lead{color:var(--m);font-size:19px;line-height:1.6}.hero img{width:100%;border-radius:17px;border:1px solid #394139}
section{padding:75px 0}.head{text-align:center;max-width:700px;margin:0 auto 35px}.head h2{font-size:50px;line-height:.9;margin:10px 0}.head p{color:var(--m)}
.calculator{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;background:var(--g);color:#070907;border-radius:18px;padding:38px}.calculator h2{font-size:53px;line-height:.9;margin:9px 0}.calcbox{background:#080a08;color:white;border-radius:13px;padding:25px}.input{width:100%;padding:14px;background:#0c100d;color:white;border:1px solid #3a433c;border-radius:7px;font:inherit}.lookup{display:flex;gap:9px}.status{margin-top:10px;min-height:22px;font-weight:700;color:#dfe5df}.result{display:none;margin-top:16px;padding:18px;background:#151a16;border:1px solid #38423a;border-radius:10px}.price{font-size:42px;font-weight:900;color:#a4ed36;margin-top:8px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card,.formbox,.review{background:var(--p);border:1px solid var(--l);border-radius:14px;padding:25px}.card h3{font-size:27px;margin:10px 0}.card p,.review p{color:var(--m)}.quote{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px}.quote h2,.map h2{font-size:55px;line-height:.9}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:900;margin-bottom:6px}textarea{resize:vertical}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stars{color:var(--g);letter-spacing:2px}.map{display:grid;grid-template-columns:.8fr 1.2fr;gap:25px}.mapframe{min-height:360px;border:1px solid var(--l);border-radius:15px;overflow:hidden}.mapframe iframe{width:100%;height:100%;min-height:360px;border:0}.checker{background:var(--p);border:1px solid var(--l);border-radius:15px;padding:25px}.cta{background:var(--g);color:#070907;border-radius:18px;padding:32px;display:flex;justify-content:space-between;align-items:center}.cta h2{margin:0;font-size:42px}.cta .btn{background:#070907;color:white}footer{border-top:1px solid var(--l);padding:28px 0;color:#89918b}.wa{position:fixed;right:20px;bottom:20px;background:#25d366;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:white;font-weight:900;font-size:25px}
@media(max-width:850px){.links{display:none}.hero,.calculator,.quote,.map{grid-template-columns:1fr}.cards,.reviews{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.full{grid-column:auto}.lookup{flex-direction:column}.lookup .btn{width:100%}.cta{display:block}.cta .btn{margin-top:20px}}


      /* ============================================================
           MAIN
        ============================================================ */
        .page-container {
            width: calc(100% - 40px);
            max-width: 900px;
            margin:
                -30px auto 70px;
            position: relative;
            z-index: 2;
        }


        /* ============================================================
           SECTION CARD
        ============================================================ */

        .form-section {
            border: 2px solid var(--g);
            padding: 30px;
            margin-bottom: 24px;
        }

        .section-heading {
            margin-bottom: 24px;
        }

        .section-heading h2 {
            margin: 0 0 5px;
            font-size: 25px;
            color: var(--dark);
        }

        .section-heading p {
            margin: 0;
            font-size: 14px;
        }


        /* ============================================================
           VEHICLE CARD
        ============================================================ */

        .vehicle-card {
            
            overflow: hidden;
        }

        .vehicle-top {
            background: var(--green);
            padding: 22px 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .vehicle-registration {
            display: inline-block;
            background: #f7c900;
            color: black;
            border: 2px solid black;
            border-radius: 5px;
            padding:
                5px 11px;
            font-size: 24px;
            font-weight: 900;
            letter-spacing: 2px;
            white-space: nowrap;
        }

        .vehicle-confirmed {
            color: #fff;

            font-size: 13px;
            font-weight: 800;

            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .vehicle-body {
            padding: 24px 25px;
        }

        .vehicle-name {
            margin: 0 0 20px;
            font-size: 25px;
            line-height: 1.15;
        }

        .vehicle-details {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 15px;
        }

        .vehicle-detail {
            padding:
                13px 15px;
            border-radius: 6px;
        }

        .vehicle-detail-label {
            display: block;
            margin-bottom: 2px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .vehicle-detail-value {
            display: block;
            color: var(--dark);
            font-size: 15px;
            font-weight: 800;
        }


        /* ============================================================
           FORM
        ============================================================ */

        .form-grid {
            display: grid;
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
            gap: 20px;
        }

        .form-field {
            margin-bottom: 20px;
        }

        .form-grid .form-field {
            margin-bottom: 0;
        }

        .form-field.full {
            grid-column: 1 / -1;
        }

        .form-field label {
            display: block;
            margin-bottom: 7px;
            font-size: 14px;
            font-weight: 800;
        }

        .required {
            color: #c52323;
        }

        .form-field input,
        .form-field select {
            width: 100%;
            min-height: 50px;
            padding:
                12px 14px;
            border:
                1px solid #cfd4cc;
            border-radius: 6px;
            background: #fff;
            outline: none;

            transition:
                border-color .15s ease,
                box-shadow .15s ease;
        }

        .form-field input:focus,
        .form-field select:focus {
            border-color: var(--green);

            box-shadow:
                0 0 0 3px rgba(120, 190, 32, .15);
        }

        .form-field input::placeholder {
            color: #9ca19a;
        }

        .postcode-row {
            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                auto;

            gap: 12px;

            align-items: end;
        }

        .postcode-row .form-field {
            margin: 0;
        }


        /* ============================================================
           BUTTONS
        ============================================================ */

        .button {
            border: 0;
            border-radius: 6px;
            min-height: 50px;
            padding:
                12px 25px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .4px;

            transition:
                background .15s ease,
                transform .1s ease,
                opacity .15s ease;
        }

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

        .button:disabled {
            cursor: not-allowed;

            opacity: .6;
        }

        .button-primary {
            background: var(--green);

            color: #fff;

            box-shadow:
                0 3px 0 var(--green-dark);
        }

        .button-primary:hover {
            background: var(--green-dark);
        }

        .button-secondary {
            background: var(--dark);

            color: #fff;
        }

        .button-secondary:hover {
            background: #343c31;
        }


        /* ============================================================
           ADDRESS STATUS
        ============================================================ */

        .address-status {
            min-height: 22px;

            margin:
                10px 0 15px;

            color: var(--muted);

            font-size: 13px;
        }

        .address-status.success {
            color: var(--green-dark);

            font-weight: 700;
        }

        .address-status.error {
            color: #c52323;

            font-weight: 700;
        }


        /* ============================================================
           CONTACT PREFERENCE
        ============================================================ */

        .contact-preferences {
            border: 0;

            margin: 25px 0 0;

            padding: 0;
        }

        .contact-preferences legend {
            margin-bottom: 12px;

            color: var(--dark);

            font-size: 14px;
            font-weight: 800;
        }

        .contact-options {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 12px;
        }

        .contact-option {
            position: relative;
        }

        .contact-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .contact-option span {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 55px;
            padding: 10px;

            border:
                2px solid var(--g);

            border-radius: 6px;


            font-size: 14px;
            font-weight: 800;

            cursor: pointer;

            text-align: center;

            transition:
                border-color .15s ease,
                background .15s ease,
                color .15s ease;
        }

        .contact-option input:checked + span {
            border-color: var(--green);

            background: var(--green-light);

            color: var(--green-dark);
        }

        .contact-option input:focus + span {
            box-shadow:
                0 0 0 3px rgba(120, 190, 32, .15);
        }


        /* ============================================================
           CONFIRMATION
        ============================================================ */

        .confirmation {
            padding-top: 5px;
        }

        .confirmation-label {
            display: flex;

            align-items: flex-start;

            gap: 12px;

            color: var(--text);

            font-size: 14px;

            cursor: pointer;
        }

        .confirmation-label input {
            width: 20px;
            height: 20px;

            margin: 1px 0 0;

            flex: 0 0 auto;

            accent-color: var(--green);
        }

        .accept-area {
            margin-top: 25px;

            padding-top: 25px;

            border-top:
                1px solid var(--border);

            text-align: center;
        }

        .accept-button {
            width: 100%;

            min-height: 62px;

            font-size: 19px;
        }

        .accept-note {
            margin:
                14px 0 0;

            color: var(--muted);

            font-size: 12px;
        }


        /* ============================================================
           REVIEWS
        ============================================================ */

        .reviews-section {
            padding:
                35px 30px;
        }

        .reviews-header {
            text-align: center;

            margin-bottom: 25px;
        }

        .reviews-header h2 {
            margin: 0 0 5px;

            color: var(--dark);

            font-size: 26px;
        }

        .reviews-header p {
            margin: 0;

            color: var(--muted);

            font-size: 14px;
        }

        .review-stars {
            color: #f5c400;

            font-size: 22px;

            letter-spacing: 2px;

            margin-bottom: 8px;
        }

        .reviews-grid {
            display: grid;

            grid-template-columns:
                repeat(3, 1fr);

            gap: 15px;
        }

        .review {
            padding: 20px;

            background: #f7f8f6;

            border-radius: 6px;
        }

        .review p {
            margin:
                0 0 12px;

            color: var(--text);

            font-size: 14px;
        }

        .review strong {
            font-size: 13px;

            color: var(--dark);
        }


        /* ============================================================
           COLLECTION AREA
        ============================================================ */

        .collection-section {
            background: var(--dark);

            color: #fff;

            border-radius: var(--radius);

            padding: 35px 30px;

            margin-bottom: 24px;
        }

        .collection-content {
            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 30px;

            align-items: center;
        }

        .collection-section h2 {
            margin:
                0 0 10px;

            font-size: 27px;
        }

        .collection-section p {
            margin: 0;

            color: #d2d7d0;

            font-size: 14px;
        }

        .map-placeholder {
            min-height: 190px;

            display: flex;

            align-items: center;
            justify-content: center;

            border-radius: 6px;

            background:
                linear-gradient(
                    135deg,
                    #354033,
                    #262e24
                );

            color: #cbd2c6;

            text-align: center;

            padding: 20px;
        }

        .map-placeholder strong {
            display: block;

            color: #fff;

            margin-bottom: 5px;
        }