/* ================= RESET & BASE ================= */
* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    font-family: Arial,Helvetica,sans-serif;
    color: #12243a;
    background: #f3f4f5;
    line-height: 1.5
}

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

img {
    max-width: 100%;
    display: block
}

/* ================= HEADER ================= */
.site-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.14);
    position: sticky;
    top: 0;
    z-index: 100
}

.header-inner {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 4%;
    max-width: 1500px;
    margin: auto
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 320px
}

.company-logo {
    width: 100px;
    height: 100px;
    object-fit: contain
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1
}

    .brand-text strong {
        font-size: 29px;
        letter-spacing: 1px;
        color: #0b315b
    }

    .brand-text span {
        font-size: 12px;
        font-weight: 800;
        color: #0b315b;
        margin-top: 4px
    }

    .brand-text small {
        font-size: 11px;
        font-weight: 700;
        color: #ef7417;
        margin-top: 5px
    }

/* ================= NAVIGATION ================= */
.main-nav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    font-size: 13px;
    font-weight: 800
}

    .main-nav a {
        padding: 33px 16px;
        color: #102846;
        transition: .2s
    }

        .main-nav a:hover, .main-nav a.active {
            background: #ef7417;
            color: #fff
        }

    /* ENROLL + CONTACT - SAME WIDTH & HEIGHT */
    .main-nav .enroll-nav,
    .main-nav .contact-nav {
        background: #27833b;
        color: #fff;
        border-radius: 4px;
        margin: 18px 0 18px 10px;
        padding: 14px 18px;
        min-width: 108px;
        height: 46px;
        text-align: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

        .main-nav .enroll-nav:hover,
        .main-nav .contact-nav:hover {
            background: #1f6d30;
        }

.menu-toggle {
    display: none;
    border: 0;
    background: #0b315b;
    color: #fff;
    padding: 10px 12px;
    border-radius: 4px;
    font-weight: 700
}

/* ================= HERO ================= */
.hero {
    min-height: 430px;
    background: #fff;
    display: grid;
    grid-template-columns: 53% 47%;
    overflow: hidden
}

.hero-content {
    padding: 78px 8% 55px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero h1 {
    font-size: 44px;
    line-height: 1.05;
    margin: 0 0 18px;
    color: #123b68;
    letter-spacing: .3px
}

    .hero h1 span {
        color: #ec7118
    }

.hero p {
    font-size: 17px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 24px
}

.hero-image {
    min-height: 430px;
    background: linear-gradient(90deg,rgba(255,255,255,.15),transparent),url('../assets/hero1.jpeg') center/cover no-repeat
}

.buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

.btn {
    display: inline-block;
    border: 0;
    padding: 13px 19px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 12px;
    color: #fff;
    cursor: pointer
}

.orange {
    background: #ed7316
}

.blue {
    background: #0c3a69
}

.green {
    background: #23813a
}

.outline {
    border: 1px solid #fff;
    background: transparent
}

/* ================= WHY CHOOSE US ================= */
.why {
    background: #fff;
    padding: 24px 6% 28px
}

.section-kicker {
    font-size: 17px;
    color: #123b68;
    font-weight: 900;
    margin: 0 0 18px
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 20px
}

.why-item {
    display: flex;
    gap: 10px
}

.why-icon {
    font-size: 31px;
    color: #123b68;
    line-height: 1
}

.why-item b {
    font-size: 11px;
    color: #102846
}

.why-item p {
    font-size: 10px;
    line-height: 1.5;
    margin: 7px 0
}

/* ================= PARTNER STRIP ================= */
.partner {
    background: #073660;
    color: #fff;
    padding: 18px 6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

    .partner h2 {
        font-size: 21px;
        margin: 0
    }

    .partner p {
        margin: 2px 0;
        font-size: 12px
    }

/* ================= HOME GRID ================= */
.content-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    padding: 16px 1.2%;
    max-width: 1500px;
    margin: auto
}

.panel {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0,0,0,.15)
}

    .panel > h2, .page-title {
        background: #083966;
        color: #fff;
        padding: 13px;
        text-align: center;
        margin: 0;
        font-size: 17px
    }

.panel-body {
    padding: 18px
}

.service {
    display: flex;
    gap: 13px;
    padding: 11px 18px;
    border-bottom: 1px solid #eee
}

    .service > span {
        font-size: 26px;
        color: #123b68;
        width: 35px
    }

    .service b, .project b {
        font-size: 11px
    }

    .service p, .project p, .panel p {
        font-size: 10px;
        line-height: 1.55;
        margin: 6px 0
    }

.course {
    margin: 11px 12px;
    padding: 13px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1)
}

    .course > span {
        font-size: 27px;
        color: #123b68
    }

    .course small {
        display: block;
        margin-top: 5px;
        font-size: 10px
    }

    .course em {
        margin-left: auto;
        background: #23813a;
        color: #fff;
        padding: 7px;
        font-size: 9px;
        font-style: normal;
        font-weight: bold
    }

.accred {
    background: #083966;
    color: #fff;
    text-align: center;
    padding: 14px
}

.logos {
    background: #fff;
    color: #173b68;
    padding: 15px;
    margin: 10px -14px -14px;
    font-size: 19px;
    font-weight: bold
}

.project {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #eee
}

    .project img {
        width: 126px;
        height: 78px;
        object-fit: cover;
        border-radius: 4px
    }

.projects > .btn {
    margin: 12px 30%
}

.home-contact {
    grid-column: span 3
}

.contact-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    padding: 20px
}

    .contact-columns p {
        font-size: 11px
    }

.mapbox {
    background: #eee;
    min-height: 210px;
    padding: 30px 15px;
    font-weight: bold;
    font-size: 11px;
    border-radius: 4px
}

    .mapbox small {
        display: block;
        margin-top: 20px;
        font-weight: normal
    }

/* ================= INNER PAGES ================= */
.inner {
    max-width: 1150px;
    margin: 25px auto;
    padding: 0 15px 40px
}

    .inner > h1 {
        background: #083966;
        color: #fff;
        padding: 17px 20px;
        margin: 0;
        border-radius: 5px 5px 0 0;
        font-size: 23px
    }

    .inner > p.lead {
        background: #fff;
        margin: 0;
        padding: 20px;
        font-size: 14px
    }

.cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-top: 15px
}

    .cards article {
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 1px 4px rgba(0,0,0,.08)
    }

    .cards h2 {
        font-size: 18px;
        color: #123b68;
        margin-top: 0
    }

    .cards p {
        line-height: 1.6;
        font-size: 13px
    }

    .cards img {
        width: 100%;
        height: 190px;
        object-fit: cover;
        border-radius: 4px
    }

.page-cta {
    margin-top: 18px;
    background: #073660;
    color: #fff;
    padding: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px
}

/* ================= ENROLLMENT FORM ================= */
.enrollment-form {
    background: #fff;
    padding: 22px;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,.08)
}

    .enrollment-form h3 {
        color: #123b68;
        font-size: 18px;
        margin: 0 0 4px
    }

.form-note {
    font-size: 12px !important;
    color: #666;
    margin: 0 0 14px !important
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.enrollment-form label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #17324d;
    margin-bottom: 4px
}

.enrollment-form input, .enrollment-form select, .enrollment-form textarea {
    width: 100%;
    padding: 11px;
    border: 1px solid #d5dce3;
    border-radius: 3px;
    margin-bottom: 10px;
    font: inherit;
    font-size: 12px;
    background: #fff
}

.enrollment-form textarea {
    resize: vertical
}

.checkbox {
    display: flex !important;
    gap: 8px;
    align-items: flex-start;
    margin: 5px 0 14px
}

    .checkbox input {
        width: auto !important;
        margin: 2px 0 0 !important
    }

.honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden
}

.notice {
    padding: 12px;
    border-radius: 4px;
    margin: 12px 0;
    font-size: 12px
}

    .notice.success {
        background: #e8f5ea;
        color: #236b31;
        border: 1px solid #b8dfbe
    }

.success-page {
    text-align: center;
    background: #fff;
    padding: 70px 25px;
    border-radius: 6px
}

.success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #27833b;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 12px
}

.success-page p {
    font-size: 13px;
    line-height: 1.6
}

.wide-contact {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    margin-top: 15px
}

.contact-card {
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,.1)
}

    .contact-card h2 {
        color: #123b68
    }

    .contact-card p {
        font-size: 13px;
        line-height: 1.7
    }

/* ================= FOOTER ================= */
.site-footer {
    background: #073660;
    color: #fff
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    padding: 38px 6%;
    max-width: 1500px;
    margin: auto
}

.site-footer h3 {
    font-size: 13px
}

.site-footer a, .site-footer p {
    display: block;
    font-size: 11px;
    line-height: 1.8
}

.social {
    display: flex;
    gap: 10px
}

    .social img {
        width: 45px;
        height: 45px
    }

    .social span {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #fff;
        color: #073660;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 900
    }

.legal-title {
    margin-top: 25px
}

.copyright {
    background: #27833b;
    padding: 12px;
    text-align: center;
    font-size: 11px
}

.mobile-only {
    display: none
}

/* ================= PARTNERS & MANAGEMENT ================= */
.partner-section, .management-section {
    margin-top: 18px;
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,.08)
}

.page-section-title {
    margin: 0 0 18px;
    color: #123b68;
    font-size: 21px;
    border-left: 5px solid #ef7417;
    padding-left: 12px
}

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

.partner-logo-card {
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
    background: #fafbfc
}

.partner-logo-frame {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 15px
}

    .partner-logo-frame img {
        max-height: 120px;
        max-width: 90%;
        width: auto;
        object-fit: contain;
        margin: auto
    }

.partner-logo-card h3 {
    margin: 5px 0;
    color: #123b68;
    font-size: 18px
}

.partner-logo-card p {
    font-size: 12px;
    color: #555;
    margin: 8px 0;
    line-height: 1.6
}

.partner-note {
    font-size: 11px;
    color: #666;
    margin: 18px 0 0
}

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

.management-card {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    padding: 15px;
    background: #fafbfc;
    align-items: center
}

.management-photo {
    height: 220px;
    border-radius: 5px;
    overflow: hidden;
    background: #e9edf0;
    display: flex;
    align-items: center;
    justify-content: center
}

    .management-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.management-info h3 {
    margin: 0;
    color: #123b68;
    font-size: 20px
}

.management-role {
    font-weight: 800;
    color: #ef7417;
    font-size: 12px !important;
    text-transform: uppercase
}

.management-info p {
    font-size: 12px;
    color: #555;
    line-height: 1.6
}

.contact-form-link {
    margin-top: 10px;
    display: inline-block
}

.contact-card .btn {
    margin-right: 8px
}

/* ================= MAP ================= */
.actual-map {
    overflow: hidden
}

.map-frame {
    width: 100%;
    height: 360px;
    border-radius: 14px;
    overflow: hidden;
    background: #e9edf2;
    margin: 18px 0;
    border: 1px solid #d7dce2
}

    .map-frame iframe {
        width: 100%;
        height: 100%;
        border: 0;
        display: block
    }

/* ================= DOCUMENT UPLOADS ================= */
.document-upload-section {
    margin: 24px 0;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f8f9fa
}

    .document-upload-section h3 {
        margin-top: 0
    }

    .document-upload-section input[type=file] {
        width: 100%;
        padding: 10px;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px
    }

    .document-upload-section small {
        display: block;
        margin-top: 6px;
        color: #666
    }

/* ================= EQUIPMENT WORKSHOP ================= */
.workshop-section {
    margin-top: 18px;
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,.08)
}

    .workshop-section h2 {
        margin: 4px 0 12px;
        color: #123b68;
        font-size: 25px
    }

.workshop-kicker {
    display: inline-block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ef7417;
    text-transform: uppercase
}

.workshop-intro {
    font-size: 13px;
    line-height: 1.8;
    color: #4d5965;
    margin: 0 0 22px
}

.equipment-group {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #e3e7eb
}

    .equipment-group h3 {
        font-size: 18px;
        color: #123b68;
        margin: 0 0 14px
    }

.equipment-grid {
    display: grid;
    gap: 15px
}

    .equipment-grid.three-cols {
        grid-template-columns: repeat(3,1fr)
    }

    .equipment-grid.two-cols {
        grid-template-columns: repeat(2,1fr)
    }

.equipment-card {
    border: 1px solid #dfe5ea;
    border-radius: 7px;
    background: #fafbfc;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.05)
}

.equipment-placeholder {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg,#eef2f5,#f9fafb);
    color: #123b68
}

    .equipment-placeholder span {
        font-size: 15px;
        font-weight: 800
    }

    .equipment-placeholder small {
        margin-top: 7px;
        font-size: 11px;
        color: #687582
    }

.motor-workshop {
    margin-top: 18px
}

.motor-placeholder {
    min-height: 230px;
    border: 2px dashed #cbd3da;
    border-radius: 7px;
    background: #f7f9fa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #123b68
}

    .motor-placeholder strong {
        font-size: 17px
    }

    .motor-placeholder span {
        font-size: 12px;
        color: #687582;
        margin-top: 6px
    }



/* Motor mechanic equipment gallery */
.motor-equipment-group {
    margin-top: 24px
}

.motor-equipment-grid {
    grid-template-columns: repeat(3,1fr)
}

.motor-equipment-card {
    display: flex;
    flex-direction: column
}

.motor-equipment-card img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    background: #eef2f5
}

.motor-equipment-card figcaption {
    padding: 12px 13px;
    color: #123b68;
    background: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
    min-height: 46px;
    display: flex;
    align-items: center
}

/* ================= RESPONSIVE ================= */
@media(max-width:950px) {
    .header-inner {
        padding: 8px 4%
    }

    .main-nav {
        gap: 0
    }

        .main-nav a {
            padding: 30px 9px;
            font-size: 11px
        }

        .main-nav .enroll-nav, .main-nav .contact-nav {
            padding: 11px 12px;
            margin-left: 5px;
            min-width: 90px;
            height: 40px
        }

    .brand {
        min-width: 280px
    }

    .company-logo {
        width: 68px;
        height: 68px
    }

    .hero {
        grid-template-columns: 1fr
    }

    .hero-content {
        padding: 55px 7%
    }

    .hero-image {
        min-height: 300px
    }

    .why-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .content-grid {
        grid-template-columns: 1fr 1fr
    }

    .home-contact {
        grid-column: span 2
    }

    .cards {
        grid-template-columns: 1fr 1fr
    }

    .motor-equipment-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media(max-width:720px) {
    .header-inner {
        min-height: 72px
    }

    .company-logo {
        width: 62px;
        height: 62px
    }

    .brand {
        gap: 8px;
        min-width: 0
    }

    .brand-text strong {
        font-size: 22px
    }

    .brand-text span {
        font-size: 9px
    }

    .brand-text small {
        font-size: 9px
    }

    .menu-toggle {
        display: block
    }

    .main-nav {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 72px;
        background: #fff;
        flex-direction: column;
        padding: 8px;
        box-shadow: 0 5px 12px rgba(0,0,0,.15)
    }

        .main-nav.open {
            display: flex
        }

        .main-nav a, .main-nav .enroll-nav, .main-nav .contact-nav {
            padding: 13px 14px;
            margin: 0;
            border-radius: 3px;
            height: auto;
            min-width: 0;
            width: 100%
        }

    .hero h1 {
        font-size: 35px
    }

    .hero p {
        font-size: 14px
    }

    .hero-image {
        min-height: 240px
    }

    .why-grid {
        grid-template-columns: 1fr
    }

    .partner {
        flex-direction: column;
        align-items: flex-start
    }

    .content-grid {
        grid-template-columns: 1fr;
        padding: 12px
    }

    .home-contact {
        grid-column: auto
    }

    .contact-columns, .form-grid, .wide-contact {
        grid-template-columns: 1fr
    }

    .cards {
        grid-template-columns: 1fr
    }

    .page-cta {
        flex-direction: column;
        align-items: flex-start
    }

    .footer-grid {
        grid-template-columns: 1fr;
        padding: 30px 8%
    }

    .partner-logos, .management-grid {
        grid-template-columns: 1fr
    }

    .management-card {
        grid-template-columns: 1fr
    }

    .management-photo {
        height: 280px
    }

    .map-frame {
        height: 280px
    }

    .equipment-grid.three-cols, .equipment-grid.two-cols, .motor-equipment-grid {
        grid-template-columns: 1fr
    }

    .motor-equipment-card img {
        height: 220px
    }

    .equipment-placeholder {
        min-height: 200px
    }

    .workshop-section {
        padding: 18px
    }
}

/* Accreditation programme detail tables */
.data-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:.94rem;background:#fff}.data-table th,.data-table td{border:1px solid #d9dde5;padding:10px;vertical-align:top;text-align:left}.data-table th{font-weight:700}.data-table tbody tr:nth-child(even){background:#f7f9fc}


/* Recruitment callout */
.recruitment-banner{margin-top:28px;}
.recruitment-banner h2{margin-bottom:8px;}