/* ==========================================================================
   vertical.css — shared by ALL vertical pages:
   core.html, pact.html, ld.html, green.html, ci.html

   These five pages had identical CSS repeated five times. Now there is one
   copy. The only things that differ per page are the two background images,
   which each page sets with the --hero-img and --cta-img variables on <body>.

   Bootstrap has been removed — the grid below replaces row/col-lg-6/col-lg-3.
   ========================================================================== */

.vertical-page {
    font-family: 'Barlow', 'Inter', sans-serif;
    background: #f5fbff;
    color: #1c1c1c;
}

.vertical-page .container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: 24px;
}

.vertical-page section {
    padding: 100px 0;
}

.brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
        }

        .brand img {
            height: 45px;
            width: auto;
        }

        .brand span {
            font-weight: 700;
            font-size: 20px;
        }
/* ============ HERO ============ */
.hero-section {
    position: relative;
    background:
        linear-gradient(rgba(7, 45, 74, 0.85), rgba(56, 182, 255, 0.75)),
        var(--hero-img, url('https://images.unsplash.com/photo-1518623489648-a173ef7824f3?q=80&w=2070'))
        center center / cover no-repeat;
    padding: 180px 0 140px;
    overflow: hidden;
}

.hero-logo {
    text-align: center;
    margin-bottom: 55px;
}

.hero-logo img {
    max-width: min(420px, 60%);
    height: auto;
    margin-inline: auto;
}

.vertical-page .hero-content {
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 2;
}

.vertical-page .hero-content h1 {
    font-size: clamp(2.2rem, 5.5vw, 4.4rem);
    font-weight: 800;
    margin-bottom: 25px;
    line-height: 1.1;
}

.vertical-page .hero-content p {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    line-height: 1.8;
    max-width: 62ch;
    margin-inline: auto;
}

.hero-btns {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.hero-btn {
    display: inline-block;
    padding: 15px 36px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.btn-primary-custom {
    background: #fff;
    color: #0a3d62;
}

.btn-primary-custom:hover {
    background: #38b6ff;
    color: #fff;
}

.btn-outline-custom {
    border: 2px solid #fff;
    color: #fff;
}

.btn-outline-custom:hover {
    background: #fff;
    color: #0a3d62;
}

/* ============ SECTION TITLE ============ */
.vertical-page .section-title {
    text-align: center;
    margin-bottom: 65px;
}

.vertical-page .section-title h2 {
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    font-weight: 800;
    color: #0a3d62;
    margin-bottom: 18px;
}

.vertical-page .section-title p {
    font-size: 1.1rem;
    color: #666;
    max-width: 70ch;
    margin-inline: auto;
    line-height: 1.8;
}

/* ============ GRIDS (replaces the Bootstrap row/col classes) ============ */
/* Phones: 1 column. Tablets and up: 2 columns. */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

/* Phones: 2 x 2. Laptops: 4 in a row. */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 700px) {
    .svc-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============ SERVICE BOX ============ */
.service-box {
    background: #fff;
    border-radius: 30px;
    padding: 45px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: 0.35s;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.service-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.14);
}

.service-box::before {
    content: '';
    position: absolute;
    width: 140px;
    height: 140px;
    background: rgba(56, 182, 255, 0.08);
    border-radius: 50%;
    top: -40px;
    right: -40px;
}

.service-icon {
    width: 78px;
    height: 78px;
    background: linear-gradient(135deg, #38b6ff, #0a3d62);
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.service-icon i {
    color: #fff;
    font-size: 32px;
}

.service-box h3 {
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    color: #0a3d62;
    margin-bottom: 22px;
    font-weight: 700;
}

.service-box ul {
    padding-left: 18px;
    margin: 0;
}

.service-box ul li {
    margin-bottom: 13px;
    line-height: 1.75;
    color: #444;
    font-size: 1.02rem;
}

/* Long lists (L&D marine training) scroll inside the card */
.service-box ul.scroll-list {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 10px;
}

/* Tick-marked variant used on the PACT page */
.service-box ul.ticked {
    list-style: none;
    padding-left: 0;
}

.service-box ul.ticked li {
    position: relative;
    padding-left: 30px;
}

.service-box ul.ticked li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #38b6ff;
    font-weight: 700;
    font-size: 20px;
}

.coming-soon {
    color: #720000;
    font-style: italic;
    font-size: 0.75em;
    font-weight: 500;
}

/* ============ STATS ============ */
.stats-section {
    background: linear-gradient(135deg, #0a3d62, #0d6ba7);
    color: #fff;
}

.stats-box {
    text-align: center;
    padding: 42px 22px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    transition: 0.35s;
}

.stats-box:hover {
    transform: translateY(-8px);
}

.stats-box h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 800;
}

.stats-box p {
    font-size: 1.1rem;
    margin-top: 8px;
}

/* ============ CTA ============ */
.vertical-page .cta-section {
    position: relative;
    background:
        linear-gradient(rgba(10, 61, 98, 0.88), rgba(56, 182, 255, 0.85)),
        var(--cta-img, url('https://images.unsplash.com/photo-1500375592092-40eb2168fd21?q=80&w=2070'))
        center center / cover no-repeat;
    padding: 110px 24px;
    text-align: center;
    color: #fff;
}

.vertical-page .cta-section h2 {
    font-size: clamp(1.9rem, 4.5vw, 3.4rem);
    font-weight: 800;
    margin-bottom: 22px;
}

.vertical-page .cta-section p {
    font-size: clamp(1rem, 1.6vw, 1.35rem);
    max-width: 60ch;
    margin: 0 auto 36px;
    line-height: 1.8;
}

.cta-btn {
    display: inline-block;
    padding: 15px 42px;
    background: #fff;
    color: #0a3d62;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
}

.cta-btn:hover {
    background: #38b6ff;
    color: #fff;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991px) {
    .vertical-page section {
        padding: 70px 0;
    }

    .hero-section {
        padding: 140px 0 100px;
    }

    .service-box {
        padding: 34px;
    }
}

/* Pages with a single service card (Labs, Wordsmith) — keep it a readable
   width and centred instead of stretching across the whole grid */
.svc-grid > .service-box:only-child {
    max-width: 760px;
    width: 100%;
    margin-inline: auto;
}