/* ==========================================================================
   PPOL Modern  ·  v4  — Complete Design System
   2024–2026 healthcare transport · Inter · 8px grid · Refined type scale
   ========================================================================== */

/* ─── 0. Design Tokens ───────────────────────────────────────────────────── */
:root {
    /* Brand palette */
    --c-navy:       #071832;
    --c-navy-mid:   #0C2D5E;
    --c-blue:       #1A5FBF;
    --c-blue-h:     #1450A3;
    --c-blue-tint:  #EBF2FC;
    --c-teal:       #0A9E97;
    --c-teal-h:     #088780;
    --c-teal-tint:  #E4F5F4;
    --c-white:      #FFFFFF;
    --c-surface:    #F6F8FC;
    --c-surface-2:  #EEF2F8;
    --c-border:     #DDE3EE;
    --c-text:       #0D1726;
    --c-text-2:     #3A4860;
    --c-muted:      #6B7896;
    --c-gold:       #F4A92B;

    /* Gradients */
    --g-hero:    linear-gradient(140deg, rgba(7,24,50,0.88) 0%, rgba(12,45,94,0.72) 55%, rgba(10,158,151,0.22) 100%);
    --g-cta:     linear-gradient(135deg, #071832 0%, #0C2D5E 100%);
    --g-brand:   linear-gradient(135deg, #1A5FBF 0%, #0A9E97 100%);
    --g-accent:  linear-gradient(90deg, #1A5FBF, #0A9E97);

    /* Type scale */
    --t-xs:    11px;
    --t-sm:    12.5px;
    --t-base:  15px;
    --t-md:    17px;
    --t-lg:    20px;
    --t-xl:    26px;
    --t-2xl:   34px;
    --t-3xl:   44px;
    --t-hero:  56px;

    /* 8-px spacing grid */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:   12px;
    --sp-4:   16px;
    --sp-5:   20px;
    --sp-6:   24px;
    --sp-8:   32px;
    --sp-10:  40px;
    --sp-12:  48px;
    --sp-16:  64px;
    --sp-20:  80px;
    --sp-24: 96px;

    /* Radius */
    --r-sm:  6px;
    --r-md:  12px;
    --r-lg:  18px;
    --r-xl:  24px;
    --r-full: 9999px;

    /* Shadows */
    --sh-xs: 0 1px 3px  rgba(7,24,50,0.06), 0 1px 2px rgba(7,24,50,0.04);
    --sh-sm: 0 2px 8px  rgba(7,24,50,0.08), 0 1px 3px rgba(7,24,50,0.05);
    --sh-md: 0 6px 24px rgba(7,24,50,0.10), 0 2px 8px rgba(7,24,50,0.06);
    --sh-lg: 0 16px 48px rgba(7,24,50,0.14), 0 4px 14px rgba(7,24,50,0.07);
    --sh-xl: 0 24px 64px rgba(7,24,50,0.18), 0 8px 20px rgba(7,24,50,0.08);
    --sh-blue: 0 8px 28px rgba(26,95,191,0.30);
    --sh-teal: 0 8px 28px rgba(10,158,151,0.28);

    /* Transition */
    --ease: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: 0.3s cubic-bezier(0, 0, 0.2, 1);
}

/* ─── 1. Global Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body,
h1, h2, h3, h4, h5, h6,
p, a, li, button, input, select, textarea, span {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-size: var(--t-base);
    line-height: 1.65;
    color: var(--c-text-2);
    background: var(--c-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ─── Type scale ─────────────────────────────────────────────────────────── */
h1 { font-size: var(--t-3xl); font-weight: 800; line-height: 1.10; letter-spacing: -1.2px; color: var(--c-navy); margin: 0 0 var(--sp-4); }
h2 { font-size: var(--t-2xl); font-weight: 700; line-height: 1.18; letter-spacing: -0.7px; color: var(--c-navy); margin: 0 0 var(--sp-3); }
h3 { font-size: var(--t-lg);  font-weight: 600; line-height: 1.35; color: var(--c-text); margin: 0 0 var(--sp-2); }
h4 { font-size: var(--t-base); font-weight: 600; color: var(--c-text); margin: 0 0 var(--sp-2); }
h5 { font-size: var(--t-sm); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--c-text); margin: 0 0 var(--sp-3); }
p  { font-size: var(--t-base); line-height: 1.72; color: var(--c-muted); margin: 0 0 var(--sp-4); }

/* ─── 2. Top Utility Bar ─────────────────────────────────────────────────── */
.ppol-topbar {
    background: var(--c-navy);
    height: 36px;
    display: flex;
    align-items: center;
}

.ppol-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.ppol-topbar-contact,
.ppol-topbar-utils {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
    gap: var(--sp-5);
}

.ppol-topbar-contact li,
.ppol-topbar-utils li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ppol-topbar-contact li i {
    font-size: 12px;
    color: rgba(255,255,255,0.40);
    line-height: 1;
}

.ppol-topbar-contact li a,
.ppol-topbar-contact li span {
    font-size: var(--t-xs);
    font-weight: 400;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--ease);
}

.ppol-topbar-contact li a:hover { color: #fff; }

.ppol-topbar-utils { gap: var(--sp-4); }

.ppol-topbar-utils li a {
    font-size: var(--t-xs);
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color var(--ease);
}

.ppol-topbar-utils li a:hover { color: #fff; }

.ppol-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.ppol-social-icon i { font-size: 11px; line-height: 1; }

/* ─── 3. Primary Navigation ──────────────────────────────────────────────── */
.ppol-nav {
    background: var(--c-white);
    border-bottom: 1px solid var(--c-border);
    position: relative;
    z-index: 200;
}

/* Kill old clip-path */
.ppol-nav .nav-menu-inner::before,
.nav-menu-wrapper.ppol-nav .nav-menu-inner::before,
.nav-menu-inner::before { display: none !important; }

.ppol-nav-row,
.ppol-nav .nav-menu-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 70px !important;
    gap: var(--sp-4) !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo */
.ppol-logo,
.ppol-nav .site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.ppol-logo img,
.ppol-nav .site-logo img {
    height: 72px !important;
    width: auto !important;
    max-height: 72px !important;
    display: block;
    object-fit: contain;
}

/* Nav links */
.ppol-menu,
.ppol-nav .header-menu-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.ppol-menu ul,
.ppol-nav .header-menu-wrap ul.nav-menu {
    display: flex !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px !important;
}

.ppol-menu ul li,
.ppol-nav .header-menu-wrap ul li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

.ppol-menu ul li > a,
.ppol-nav .header-menu-wrap ul li > a {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--c-text-2) !important;
    padding: 7px 11px !important;
    border-radius: var(--r-sm) !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
    transition: color var(--ease), background var(--ease) !important;
    position: relative;
}

/* Active indicator */
.ppol-menu ul li > a::after,
.ppol-nav .header-menu-wrap ul li > a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 11px;
    right: 11px;
    height: 2px;
    background: var(--g-brand);
    border-radius: 2px 2px 0 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ease);
}

.ppol-menu ul li > a::before,
.ppol-nav .header-menu-wrap ul li > a::before { display: none !important; }

.ppol-menu ul li > a:hover,
.ppol-nav .header-menu-wrap ul li > a:hover {
    color: var(--c-blue) !important;
    background: var(--c-blue-tint) !important;
}

.ppol-menu ul li.active > a,
.ppol-nav .header-menu-wrap ul li.active > a {
    color: var(--c-blue) !important;
    font-weight: 600 !important;
    background: var(--c-blue-tint) !important;
}

.ppol-menu ul li.active > a::after,
.ppol-menu ul li > a:hover::after,
.ppol-nav .header-menu-wrap ul li.active > a::after,
.ppol-nav .header-menu-wrap ul li > a:hover::after {
    transform: scaleX(1);
}

/* Right controls */
.ppol-nav-actions,
.ppol-nav .menu-right-item {
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-2) !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

/* Language */
.ppol-lang {
    position: relative;
    /* extend hover area downward to bridge gap to menu */
    padding-bottom: 8px;
    margin-bottom: -8px;
}

.ppol-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: 1.5px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: var(--t-xs);
    font-weight: 600;
    color: var(--c-text-2);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
    white-space: nowrap;
}

.ppol-lang-btn i { font-size: 13px; color: var(--c-muted); }
.ppol-lang-arrow { font-size: 9px !important; color: var(--c-muted); transition: transform var(--ease); }
.ppol-lang:hover .ppol-lang-arrow { transform: rotate(180deg); }
.ppol-lang:hover .ppol-lang-btn,
.ppol-lang-btn:hover { border-color: var(--c-blue); background: var(--c-blue-tint); color: var(--c-blue); }

.ppol-lang-menu {
    position: absolute !important;
    right: 0;
    top: 100%;
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    min-width: 130px;
    overflow: hidden;
    z-index: 9999;
    /* hidden by default — shown on parent hover */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}

/* Show on hover — no gap thanks to padding-bottom on parent */
.ppol-lang:hover .ppol-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.ppol-lang-menu a {
    display: block;
    padding: 9px var(--sp-4);
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--c-text-2);
    text-decoration: none;
    transition: background var(--ease);
}

.ppol-lang-menu a:hover { background: var(--c-surface); }
.ppol-lang-menu a.is-active { color: var(--c-blue); font-weight: 700; background: var(--c-blue-tint); }

/* CTA button */
.ppol-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: var(--g-brand);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--r-sm);
    text-decoration: none !important;
    transition: opacity var(--ease), box-shadow var(--ease), transform var(--ease);
    white-space: nowrap;
    box-shadow: var(--sh-blue);
}

.ppol-cta i { font-size: 11px; transition: transform var(--ease); }
.ppol-cta:hover { opacity: .88; box-shadow: 0 6px 20px rgba(26,95,191,0.42); color: #fff !important; transform: translateY(-1px); }
.ppol-cta:hover i { transform: translateX(3px); }

/* Burger */
.ppol-burger,
.ppol-nav .burger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: var(--sp-1);
}

.ppol-burger .line-menu,
.ppol-nav .burger-menu .line-menu {
    display: block !important;
    background: var(--c-navy) !important;
    height: 2px;
    border-radius: 2px;
    width: 100%;
    transition: transform 0.28s ease;
}

/* ─── 4. Trust Strip ─────────────────────────────────────────────────────── */
.ppol-trust {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.ppol-trust-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0; padding: 0;
}

.ppol-trust-list li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px var(--sp-5);
    font-size: var(--t-xs);
    font-weight: 700;
    color: var(--c-text-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-right: 1px solid var(--c-border);
    white-space: nowrap;
}

.ppol-trust-list li:last-child { border-right: none; }

.ppol-trust-list li i { font-size: 13px; color: var(--c-teal); line-height: 1; }

/* ─── 5. Sticky Header ───────────────────────────────────────────────────── */
.sticky-header {
    background: var(--c-white) !important;
    box-shadow: var(--sh-md) !important;
    border-bottom: 1px solid var(--c-border);
}

.sticky-header .ppol-nav,
.sticky-header .nav-menu-wrapper { background: var(--c-white) !important; border-bottom: none; box-shadow: none; }
.sticky-header .nav-menu-inner::before { display: none !important; }
.sticky-header .nav-menu-inner { max-width: 100% !important; margin: 0 !important; height: 62px !important; }
.sticky-header .site-logo img { height: 56px !important; max-height: 56px !important; }
.sticky-header .header-menu-wrap ul li > a { color: var(--c-text-2) !important; }
.sticky-header .header-menu-wrap ul li.active > a,
.sticky-header .header-menu-wrap ul li > a:hover { color: var(--c-blue) !important; background: var(--c-blue-tint) !important; }
.sticky-header .ppol-topbar,
.sticky-header .ppol-trust { display: none !important; }
.top-header, .mid-header { display: none !important; }

/* ─── 6. Hero / Banner Section ───────────────────────────────────────────── */
.slider-section { position: relative; }

/* Dark gradient overlay — sits above the photo, inside .slider-img stacking context
   (.slider-img keeps its original z-index:-1 from slider.css so the overlay
   and image are both below .slider-content-wrap which has no z-index set) */
.slider-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--g-hero);
    z-index: 1;
    pointer-events: none;
}

/* Increase hero height */
.slider-content-wrap {
    height: 620px !important;
    position: relative;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Override the template's text-left on the wrapper */
.slider-section .slider-content-wrap {
    text-align: center !important;
}

.slider-section .container { position: relative; z-index: 2; }

.slider-content {
    text-align: center !important;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

/* Eyebrow label */
.slider-caption.medium {
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--c-teal) !important;
    margin-bottom: var(--sp-3) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-shadow: none;
}

.slider-caption.medium::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--c-teal);
    border-radius: 2px;
}

.slider-caption.medium::after {
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--c-teal);
    border-radius: 2px;
}

/* Big headline */
.slider-caption.big {
    font-size: var(--t-hero) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -2px !important;
    margin-bottom: var(--sp-5) !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
}

/* Subheading */
.slider-caption.small {
    font-size: 17px !important;
    line-height: 1.65 !important;
    color: rgba(255,255,255,0.80) !important;
    margin-bottom: var(--sp-8) !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.20) !important;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.slider-btn {
    display: flex;
    justify-content: center;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

/* ─── 7. Buttons ─────────────────────────────────────────────────────────── */
.default-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    background: var(--g-brand) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
    padding: 13px 30px !important;
    border-radius: var(--r-sm) !important;
    border: none !important;
    height: auto !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity var(--ease), box-shadow var(--ease), transform var(--ease) !important;
    box-shadow: var(--sh-blue) !important;
    position: relative;
    overflow: hidden;
}

.default-btn::before,
.default-btn::after { display: none !important; }

.default-btn:hover {
    opacity: .88 !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(26,95,191,0.40) !important;
    transform: translateY(-2px) !important;
}

.default-btn:active { transform: translateY(0) !important; }

/* Secondary outline button */
.default-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-2) !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    border-radius: var(--r-sm) !important;
    border: 2px solid rgba(255,255,255,0.45) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease) !important;
}

.default-btn-outline:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.75) !important;
    color: #fff !important;
}

/* ─── 8. Section Labels & Headings ───────────────────────────────────────── */
.section-heading h4,
.section-heading h4 span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--c-teal) !important;
    margin-bottom: var(--sp-3) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.section-heading h4::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--c-teal);
    border-radius: 2px;
    flex-shrink: 0;
}

.section-heading h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: -0.7px !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-4) !important;
}

.section-heading h2.white { color: #fff !important; }
.section-heading h4.white { color: rgba(255,255,255,0.70) !important; }
.section-heading h4.white::before { background: rgba(255,255,255,0.50); }

.section-heading p {
    font-size: 16px !important;
    line-height: 1.70 !important;
    color: var(--c-muted) !important;
    max-width: 560px;
}

.section-heading p.white { color: rgba(255,255,255,0.65) !important; }

.section-heading.text-center p { margin-left: auto; margin-right: auto; }

/* Gradient span in headings */
.section-heading h2 span,
h2 .gradient-text {
    background: var(--g-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ─── 8b. Mobile Hero CTA (outside slider) ──────────────────────────────── */
/* ─── 9. Booking / Estimate Section ─────────────────────────────────────── */
.booking-section-2 {
    background: var(--c-navy) !important;
    padding: 0 !important;
    position: relative;
    z-index: 10;
    margin-top: -2px;
}

.booking-form-2 {
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    overflow: hidden;
    background: var(--c-navy-mid);
    box-shadow: var(--sh-xl);
}

.booking-section-2 .section-heading h2 { color: #fff !important; font-size: 26px !important; }
.booking-section-2 .section-heading h2.white { color: #fff !important; }

/* ─── 10. Services Section ───────────────────────────────────────────────── */
.service-section.bg-grey { background: var(--c-surface) !important; }

.service-item {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-xs) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-white) !important;
    overflow: hidden;
    transition: box-shadow var(--ease-out), transform var(--ease-out), border-color var(--ease) !important;
}

.service-item:hover {
    box-shadow: var(--sh-lg) !important;
    transform: translateY(-6px) !important;
    border-color: rgba(26,95,191,0.15) !important;
}

.service-item .service-thumb { overflow: hidden; }

.service-item .service-thumb img {
    width: 100%;
    transition: transform 0.5s ease;
}

.service-item:hover .service-thumb img { transform: scale(1.05); }

.service-item .service-content {
    padding: var(--sp-5) !important;
}

.service-item .service-content h3 {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-2) !important;
}

.service-item .service-content h3 a { color: inherit !important; text-decoration: none !important; }
.service-item .service-content h3 a:hover { color: var(--c-blue) !important; }

.service-item .service-content p {
    font-size: 14px !important;
    line-height: 1.70 !important;
    color: var(--c-muted) !important;
    margin-bottom: var(--sp-3) !important;
}

.service-item .read-more {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--ease), color var(--ease);
}

.service-item .read-more:hover { color: var(--c-teal) !important; gap: 8px; }
.service-item .read-more::after { content: '→'; font-size: 14px; }

/* ─── 11. CTA Section ────────────────────────────────────────────────────── */
.cta-section-2 {
    background: var(--g-cta) !important;
    position: relative;
    overflow: hidden;
}

.cta-section-2::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(10,158,151,0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-section-2 .cta-content h4 {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--c-teal) !important;
    margin-bottom: var(--sp-2) !important;
}

.cta-section-2 .cta-content h2 {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.6px !important;
    line-height: 1.18 !important;
    margin-bottom: var(--sp-5) !important;
}

.cta-section-2 .check-list {
    list-style: none;
    padding: 0; margin: 0;
}

.cta-section-2 .check-list li {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cta-section-2 .check-list li:last-child { border-bottom: none; }

.cta-section-2 .check-list li i {
    flex-shrink: 0;
    width: 26px; height: 26px;
    background: rgba(10,158,151,0.18);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--c-teal);
}

/* ─── 12. How It Works / Pricing Steps ──────────────────────────────────── */
.pricing-section.bg-grey { background: var(--c-surface) !important; }

.pricing-item {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-sm) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-white) !important;
    overflow: hidden;
    transition: box-shadow var(--ease-out), transform var(--ease-out) !important;
    text-align: center;
    padding: var(--sp-6) var(--sp-5) !important;
    position: relative;
}

.pricing-item:hover {
    box-shadow: var(--sh-lg) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(26,95,191,0.18) !important;
}

/* Step number badge */
.pricing-item[data-step]::before {
    content: attr(data-step);
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    width: 32px; height: 32px;
    background: var(--c-blue-tint);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 800;
    color: var(--c-blue);
    line-height: 32px;
    text-align: center;
}

.pricing-item .pricing-head h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-2) !important;
}

.pricing-item .pricing-head h3 a { color: inherit !important; text-decoration: none !important; }

.pricing-item .pricing-head .location {
    font-size: 14px;
    color: var(--c-muted);
    line-height: 1.6;
}

.pricing-item .pricing-car { margin-bottom: var(--sp-4); }

.pricing-item .pricing-car img {
    height: 90px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    filter: drop-shadow(0 8px 16px rgba(7,24,50,0.14));
    transition: transform 0.4s ease;
}

.pricing-item:hover .pricing-car img { transform: scale(1.06) translateY(-4px); }

/* ─── 13. Download Section ───────────────────────────────────────────────── */
.download-section-2 {
    background: var(--g-cta) !important;
    position: relative;
    overflow: hidden;
}

.download-section-2 .overlay {
    background: radial-gradient(ellipse at 80% 50%, rgba(10,158,151,0.20) 0%, transparent 65%),
                radial-gradient(ellipse at 20% 80%, rgba(26,95,191,0.18) 0%, transparent 60%);
    position: absolute;
    inset: 0;
    z-index: 0;
}

.download-section-2 > .container { position: relative; z-index: 1; }

.download-section-2 .section-heading h4 { color: var(--c-teal) !important; }
.download-section-2 .section-heading h4::before { background: var(--c-teal); }

.download-section-2 .section-heading h2 { color: #fff !important; }

.download-section-2 .section-heading p { color: rgba(255,255,255,0.65) !important; }

.download-btn { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); }

.download-btn a img {
    height: 44px;
    width: auto;
    transition: transform var(--ease), filter var(--ease);
    filter: brightness(1.05);
}

.download-btn a:hover img { transform: translateY(-3px); filter: brightness(1.1); }

/* App screen */
.app-screen img {
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    max-width: 100%;
}

/* ─── 14. Testimonials Section ───────────────────────────────────────────── */
.testimonial-section.bg-grey { background: var(--c-surface) !important; margin-top: var(--sp-16) !important; }

.testi-item {
    background: var(--c-white);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-border);
    transition: box-shadow var(--ease), transform var(--ease);
}

.testi-item:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }

.testi-item .quote-icon i {
    font-size: 28px !important;
    color: var(--c-teal);
    line-height: 1;
    margin-bottom: var(--sp-3);
    display: block;
}

.testi-item > p {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--c-text-2) !important;
    font-style: italic;
    margin-bottom: var(--sp-5) !important;
}

.testi-item .testi-author {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.testi-item .author-thumb img {
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid var(--c-border);
}

.testi-item .author-info h3 {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin: 0 !important;
}

.testi-item .author-info h3 span {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--c-muted) !important;
    margin-top: 2px;
}

/* ─── 15. Feature / Why Choose Us Section ────────────────────────────────── */
.feature-wrap {
    background: var(--g-cta);
    border-radius: var(--r-xl);
    padding: var(--sp-10) var(--sp-8) !important;
    position: relative;
    overflow: hidden;
}

.feature-wrap::before {
    content: '';
    position: absolute;
    bottom: -40px; right: -40px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(10,158,151,0.20) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ppol-features {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.ppol-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: rgba(255,255,255,0.05);
    border-radius: var(--r-md);
    border: 1px solid rgba(255,255,255,0.08);
    transition: background var(--ease), border-color var(--ease);
}

.ppol-features li:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(10,158,151,0.28);
}

.ppol-features .feature-icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    background: rgba(10,158,151,0.15);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(10,158,151,0.22);
}

.ppol-features .feature-icon i {
    font-size: 20px !important;
    color: var(--c-teal);
    line-height: 1;
}

.ppol-features .feature-content h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
}

.ppol-features .feature-content p {
    font-size: 13.5px !important;
    color: rgba(255,255,255,0.58) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ─── 16. Blog Section ───────────────────────────────────────────────────── */
.blog-section.bg-grey { background: var(--c-surface) !important; }

.post-card {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-xs) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-white) !important;
    overflow: hidden;
    transition: box-shadow var(--ease-out), transform var(--ease-out) !important;
}

.post-card:hover {
    box-shadow: var(--sh-lg) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(26,95,191,0.14) !important;
}

.post-card .post-thumb { overflow: hidden; position: relative; }

.post-card .post-thumb img {
    width: 100%;
    transition: transform 0.5s ease;
    display: block;
}

.post-card:hover .post-thumb img { transform: scale(1.05); }

.post-card .post-category {
    position: absolute;
    top: var(--sp-3); left: var(--sp-3);
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff !important;
    background: var(--g-brand);
    border-radius: var(--r-full);
    text-decoration: none !important;
}

.post-card .post-content-wrap { padding: var(--sp-5) !important; }

.post-card .post-meta {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    list-style: none;
    padding: 0; margin: 0 0 var(--sp-3);
}

.post-card .post-meta li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--c-muted);
}

.post-card .post-meta li i { font-size: 12px; color: var(--c-teal); }

.post-card .post-content h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    line-height: 1.4 !important;
    margin-bottom: var(--sp-2) !important;
}

.post-card .post-content h3 a { color: inherit !important; text-decoration: none !important; }
.post-card .post-content h3 a:hover { color: var(--c-blue) !important; }

.post-card .post-content p {
    font-size: 14px !important;
    color: var(--c-muted) !important;
    line-height: 1.68 !important;
    margin-bottom: var(--sp-3) !important;
}

.post-card .read-more {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--ease), color var(--ease);
}

.post-card .read-more:hover { color: var(--c-teal) !important; gap: 8px; }
.post-card .read-more::after { content: '→'; font-size: 14px; }

/* ─── 17. General Cards & Components ────────────────────────────────────── */
.team-item,
.benefit-card,
.program-point-card {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-xs) !important;
    border: 1px solid var(--c-border) !important;
    background: var(--c-white) !important;
    overflow: hidden;
    transition: box-shadow var(--ease), transform var(--ease) !important;
}

.team-item:hover,
.benefit-card:hover { box-shadow: var(--sh-lg) !important; transform: translateY(-4px) !important; }

/* ─── 18. Forms ──────────────────────────────────────────────────────────── */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--c-text) !important;
    background: var(--c-white) !important;
    border: 1.5px solid var(--c-border) !important;
    border-radius: var(--r-sm) !important;
    padding: 11px 14px !important;
    height: auto !important;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(26,95,191,0.12) !important;
    outline: none !important;
}

/* ─── 19. Links & Accent ─────────────────────────────────────────────────── */
a:not(.btn):hover,
.header-menu-wrap li li > a:hover { color: var(--c-blue) !important; }
/* Buttons keep their own hover text colour (the global a:hover above turned
   .btn-primary / filled .btn-outline-primary text blue-on-blue = invisible). */
.btn-primary:hover, .btn-primary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus { color: #fff !important; }

/* ─── 20. Footer ─────────────────────────────────────────────────────────── */
.ppol-footer { background: #040F1C; color: rgba(255,255,255,0.60); position: relative; }

.ppol-footer-wave { background: #040F1C; line-height: 0; overflow: hidden; }
.ppol-footer-wave svg { display: block; width: 100%; height: 56px; }

.ppol-footer-body { padding: var(--sp-16) 0 var(--sp-12); }

.ppol-footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.5fr;
    gap: 52px;
    padding-bottom: var(--sp-12);
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Logo card */
.ppol-footer-logo-wrap {
    display: inline-block;
    margin-bottom: var(--sp-5);
    background: var(--c-white);
    border-radius: var(--r-sm);
    padding: 10px 18px;
}

.ppol-footer-logo-wrap img { height: 42px; width: auto; display: block; object-fit: contain; }

.ppol-footer-brand p {
    font-size: 13.5px;
    line-height: 1.78;
    color: rgba(255,255,255,0.48);
    margin-bottom: var(--sp-5);
    max-width: 270px;
}

.ppol-footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.ppol-footer-badges span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    /* Bumped contrast on the dark footer — pure 55% white reads
       as 'almost invisible' against #050a14. */
    color: rgba(255,255,255,0.88);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--r-sm);
    padding: 5px 10px;
}

.ppol-footer-badges svg { width: 12px; height: 12px; color: var(--c-teal); }

.ppol-footer-social { display: flex; flex-wrap: wrap; gap: 10px; }

.ppol-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    /* Brighter chips so they're actually visible. The previous 5% white
       on a near-black background was almost invisible. */
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}

.ppol-footer-social a:hover {
    background: var(--c-blue);
    color: #fff;
    border-color: var(--c-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(56,114,255,0.35);
}

.ppol-footer-social a i.fa { font-size: 18px; line-height: 1; }

/* Footer columns */
.ppol-footer-col h5 {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(255,255,255,0.85) !important;
    margin-bottom: var(--sp-5) !important;
}

.ppol-footer-col ul { list-style: none; padding: 0; margin: 0; }
.ppol-footer-col ul li { margin-bottom: 9px; }

.ppol-footer-col ul li a {
    font-size: 13.5px;
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    transition: color var(--ease), padding-left var(--ease);
    display: inline-block;
}

.ppol-footer-col ul li a:hover { color: #fff; padding-left: 4px; }

/* Contact list */
.ppol-footer-contact-list { list-style: none; padding: 0; margin: 0; }

.ppol-footer-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.ppol-fc-icon {
    flex-shrink: 0;
    width: 32px; height: 32px;
    background: rgba(10,158,151,0.14);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.ppol-fc-icon svg { width: 14px; height: 14px; color: var(--c-teal); }

.ppol-footer-contact-list li div { display: flex; flex-direction: column; gap: 2px; }

.ppol-footer-contact-list li span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.28);
}

.ppol-footer-contact-list li a,
.ppol-footer-contact-list li strong {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.68);
    text-decoration: none;
    transition: color var(--ease);
    line-height: 1.55;
}

.ppol-footer-contact-list li a:hover { color: #fff; }

/* Bottom bar */
.ppol-footer-bottom { background: rgba(0,0,0,0.28); padding: 15px 0; }

.ppol-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.ppol-footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.28); margin: 0; }

.ppol-footer-bottom ul { display: flex; align-items: center; gap: var(--sp-5); list-style: none; margin: 0; padding: 0; }

.ppol-footer-bottom ul li a {
    font-size: 11.5px;
    color: rgba(255,255,255,0.30);
    text-decoration: none;
    transition: color var(--ease);
}

.ppol-footer-bottom ul li a:hover { color: rgba(255,255,255,0.65); }

/* ─── 21. Section Padding Enhancements ───────────────────────────────────── */
.section-bg-alt { background: var(--c-surface) !important; }

.padding { padding: var(--sp-20) 0 !important; }

/* ─── 22. Swiper / Carousels ─────────────────────────────────────────────── */
.swiper-pagination-bullet {
    background: var(--c-border) !important;
    opacity: 1 !important;
    width: 7px !important;
    height: 7px !important;
    transition: background var(--ease), width var(--ease);
}

.swiper-pagination-bullet-active {
    background: var(--g-brand) !important;
    width: 22px !important;
    border-radius: var(--r-full) !important;
}

.swiper-nav {
    background: var(--c-white) !important;
    border: 1.5px solid var(--c-border) !important;
    border-radius: 50% !important;
    width: 42px !important;
    height: 42px !important;
    box-shadow: var(--sh-sm) !important;
    transition: background var(--ease), box-shadow var(--ease), border-color var(--ease) !important;
}

.swiper-nav:hover {
    background: var(--c-blue) !important;
    border-color: var(--c-blue) !important;
    box-shadow: var(--sh-blue) !important;
    color: #fff !important;
}

.swiper-nav i { color: var(--c-navy); transition: color var(--ease); }
.swiper-nav:hover i { color: #fff !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ── ≤1400px ─────────────────────────────────────────────────────────────── */
@media (max-width: 1400px) {
    :root { --t-hero: 50px; }
}

/* ── ≤1200px ─────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    :root { --t-hero: 44px; }

    .ppol-menu ul li > a,
    .ppol-nav .header-menu-wrap ul li > a {
        font-size: 13px !important;
        padding: var(--sp-2) 10px !important;
    }

    .ppol-trust-list li { padding: 8px var(--sp-4); }
    .ppol-footer-grid { gap: 36px; }
    .section-heading h2 { font-size: 30px !important; }
}

/* ── ≤1024px ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    :root { --t-hero: 38px; }

    h1 { font-size: 34px; }
    h2 { font-size: 28px; }
    .section-heading h2 { font-size: 27px !important; }

    .ppol-nav-row,
    .ppol-nav .nav-menu-inner { height: 64px !important; }

    .ppol-logo img,
    .ppol-nav .site-logo img { height: 60px !important; max-height: 60px !important; }

    .ppol-trust-list li { font-size: 10px; padding: 7px var(--sp-3); }

    .ppol-footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .ppol-footer-brand { grid-column: 1 / -1; }
    .ppol-footer-brand p { max-width: 100%; }

    .slider-content-wrap { height: 560px !important; }
}

/* ── ≤992px (mobile nav) ─────────────────────────────────────────────────── */
@media (max-width: 992px) {
    :root { --t-hero: 34px; }

    .ppol-trust { display: none; }

    .ppol-nav-row,
    .ppol-nav .nav-menu-inner { height: 62px !important; }

    .ppol-logo img,
    .ppol-nav .site-logo img { height: 56px !important; max-height: 56px !important; }

    /* Show burger */
    .ppol-burger,
    .ppol-nav .mobile-menu-icon { display: flex !important; }

    /* Mobile menu drawer — no !important on display so jQuery slideToggle works */
    .ppol-menu,
    .ppol-nav .header-menu-wrap {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: var(--c-white) !important;
        border-top: 1px solid var(--c-border) !important;
        border-bottom: 2px solid var(--c-blue) !important;
        box-shadow: var(--sh-lg) !important;
        padding: var(--sp-3) var(--sp-5) var(--sp-5) !important;
        display: none;
        z-index: 9997 !important;
    }

    .ppol-menu ul,
    .ppol-nav .header-menu-wrap ul.nav-menu {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .ppol-menu ul li,
    .ppol-nav .header-menu-wrap ul li {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--c-border) !important;
    }

    .ppol-menu ul li:last-child,
    .ppol-nav .header-menu-wrap ul li:last-child { border-bottom: none !important; }

    .ppol-menu ul li > a,
    .ppol-nav .header-menu-wrap ul li > a {
        font-size: 14px !important;
        font-weight: 500 !important;
        padding: 12px var(--sp-2) !important;
        border-radius: 0 !important;
        color: var(--c-text) !important;
        display: block !important;
        width: 100% !important;
    }

    .ppol-menu ul li > a::after,
    .ppol-nav .header-menu-wrap ul li > a::after { display: none !important; }

    .ppol-menu ul li.active > a,
    .ppol-menu ul li > a:hover,
    .ppol-nav .header-menu-wrap ul li.active > a,
    .ppol-nav .header-menu-wrap ul li > a:hover {
        color: var(--c-blue) !important;
        background: var(--c-blue-tint) !important;
        padding-left: var(--sp-3) !important;
    }

    .ppol-cta { padding: 7px 14px; font-size: 12.5px; }

    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    .section-heading h2 { font-size: 24px !important; }
    .default-btn { padding: 12px 24px !important; font-size: 14px !important; }

    .slider-content-wrap { height: 500px !important; }
    .slider-caption.big { letter-spacing: -1px !important; }

    .feature-wrap { padding: var(--sp-8) var(--sp-6) !important; }
}

/* ── ≤768px ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    :root { --t-hero: 28px; }

    .ppol-topbar { display: none; }

    .ppol-nav-row,
    .ppol-nav .nav-menu-inner { height: 58px !important; }

    .ppol-logo img,
    .ppol-nav .site-logo img { height: 50px !important; max-height: 50px !important; }

    .ppol-lang-code { display: none; }
    .ppol-lang-btn { padding: 6px 8px; gap: 3px; }

    h1 { font-size: 24px; line-height: 1.18; }
    h2 { font-size: 22px; }
    h3 { font-size: 18px; }
    .section-heading h2 { font-size: 22px !important; }
    .section-heading p  { font-size: 15px !important; }

    .slider-caption.small { font-size: 15px !important; }

    .ppol-footer-body { padding: var(--sp-10) 0 var(--sp-8); }
    .ppol-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding-bottom: var(--sp-8); }
    .ppol-footer-wave svg { height: 40px; }

    .default-btn { width: 100% !important; justify-content: center !important; padding: 13px 20px !important; }

    .ppol-footer-bottom-inner { flex-direction: column; text-align: center; gap: var(--sp-2); }
    .ppol-footer-bottom ul { justify-content: center; }

    .slider-btn { flex-direction: column; align-items: center; }

    .booking-form-2 { margin-top: 0 !important; }
}

/* ── ≤576px ───────────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    :root { --t-hero: 24px; }

    h1 { font-size: 22px; }
    h2 { font-size: 20px; }
    .section-heading h2 { font-size: 20px !important; }

    .ppol-nav-row,
    .ppol-nav .nav-menu-inner { height: 54px !important; gap: var(--sp-2) !important; }

    .ppol-logo img,
    .ppol-nav .site-logo img { height: 44px !important; max-height: 44px !important; }

    .ppol-cta { display: none; }

    .ppol-footer-grid { grid-template-columns: 1fr !important; gap: var(--sp-6); }
    .ppol-footer-brand p { max-width: 100%; }
    .ppol-footer-badges span { font-size: 9.5px; }

    .slider-caption.big { font-size: var(--t-hero) !important; letter-spacing: -0.5px !important; }
    .slider-caption.small { font-size: 14px !important; }

    .feature-wrap { padding: var(--sp-6) var(--sp-4) !important; }
    .ppol-features li { padding: var(--sp-3); }
}

/* ── ≤400px ───────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    h1 { font-size: 20px; }
    h2 { font-size: 18px; }
    .ppol-footer-body { padding: var(--sp-8) 0 var(--sp-6); }
    .ppol-footer-bottom ul { gap: var(--sp-3); }
}

/* ─── reCAPTCHA v3 badge — hidden per Google's FAQ (attribution in footer) ─ */
.grecaptcha-badge { visibility: hidden !important; }

/* ─── Driver Login Page ──────────────────────────────────────────────────── */
.ppol-login-card {
    background: #fff;
    border-radius: var(--r-lg);
    padding: var(--sp-10) var(--sp-8);
    box-shadow: var(--sh-md);
}
.ppol-login-card h3 { text-align: center; margin-bottom: var(--sp-2); }
.ppol-login-card label { font-size: 13px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; display: block; }
.ppol-login-card .form-control { padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 8px; font-size: 14px; }
.ppol-login-card .form-control:focus { border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(26,95,191,0.12); }

/* ==========================================================================
   MODALS — Demo Request, Login, Popups
   ========================================================================== */

/* Base modal overlay */
#demoModal,
#loginModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    padding: 16px;
}

#demoModal.show,
#loginModal.show,
#demoModal:not(.hidden),
#loginModal:not(.hidden) {
    display: flex !important;
}

/* Modal content box */
#demoModal > div,
#loginModal > div {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    z-index: 10000;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* Close button */
#demoModal .close-modal,
#demoModal [data-toggle-modal],
#loginModal [data-toggle-modal] {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    z-index: 10001;
}

/* Form inputs inside modals */
#demoModal input,
#demoModal textarea,
#demoModal select,
#loginModal input,
#loginModal select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: #1e293b;
    outline: none;
    position: relative;
    z-index: 10001;
    -webkit-appearance: none;
}

#demoModal input:focus,
#demoModal textarea:focus,
#loginModal input:focus {
    border-color: var(--c-blue, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13,110,253,0.12);
}

/* Modal labels */
#demoModal label,
#loginModal label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
}

/* Modal submit button */
#demoModal button[type="submit"],
#loginModal button[type="submit"] {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: var(--c-blue, #0d6efd);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

#demoModal button[type="submit"]:hover,
#loginModal button[type="submit"]:hover {
    background: var(--c-blue-dark, #0b5ed7);
}

/* Mobile modal sizing */
@media (max-width: 576px) {
    #demoModal > div,
    #loginModal > div {
        max-width: 100%;
        padding: 20px 16px;
        margin: 0 8px;
        border-radius: 10px;
    }

    #demoModal h3,
    #loginModal h2 {
        font-size: 18px;
    }
}

/* iOS Safari fixes — fixed positioning and modal rendering */
@supports (-webkit-touch-callout: none) {
    #demoModal,
    #loginModal {
        -webkit-overflow-scrolling: touch;
    }

    #demoModal > div,
    #loginModal > div {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    #demoModal button[type="submit"],
    #loginModal button[type="submit"] {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* ==========================================================================
   INNER PAGES — Shared design system for all static pages
   ========================================================================== */

/* ─── 23. Page Header Banner ─────────────────────────────────────────────── */
.page-header {
    height: 320px !important;
    background-size: cover !important;
    background-position: center center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Replace dark+orange checkered overlay with clean brand gradient */
.page-header::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(140deg, rgba(7,24,50,0.85) 0%, rgba(12,45,94,0.70) 60%, rgba(10,158,151,0.20) 100%) !important;
    z-index: -1 !important;
    opacity: 1 !important;
    background-color: transparent !important;
}

/* Kill old clip-path shape decorations */
.page-header-shape,
.page-header-shape::before,
.page-header-shape::after { display: none !important; }

.page-header-info { text-align: center; position: relative; z-index: 2; padding: 0 var(--sp-4); }

/* Eyebrow tag — replace clip-path pill with clean badge */
.page-header-info h4 {
    background: rgba(10,158,151,0.18) !important;
    clip-path: none !important;
    border: 1px solid rgba(10,158,151,0.40) !important;
    border-radius: var(--r-full) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--c-teal) !important;
    padding: 5px 16px !important;
    height: auto !important;
    line-height: 1.6 !important;
    display: inline-block !important;
    margin-bottom: var(--sp-3) !important;
    font-family: 'Inter', sans-serif !important;
}

.page-header-info h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
    color: #fff !important;
    margin-bottom: var(--sp-3) !important;
    text-shadow: 0 2px 16px rgba(0,0,0,0.22) !important;
}

.page-header-info h2 span { color: var(--c-teal) !important; }

.page-header-info p {
    font-size: 16px !important;
    color: rgba(255,255,255,0.72) !important;
    margin: 0 auto !important;
    max-width: 520px;
    line-height: 1.65 !important;
}

/* Blog/doc style page header (help, privacy, terms, zero-tolerance) */
.page-header.blog-details { height: 280px !important; }

.page-header.blog-details .page-header-info { padding-top: 0 !important; }

.page-header .post-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--sp-5) !important;
    list-style: none !important;
    padding: 0 !important;
    margin-top: var(--sp-3) !important;
}

.page-header .post-meta li {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.65) !important;
}

.page-header .post-meta li i { font-size: 13px; color: var(--c-teal); }

/* ─── 24. About Page ─────────────────────────────────────────────────────── */
.about-section.padding { padding: var(--sp-20) 0 !important; }

.about-section .about-img { margin-top: 0 !important; }

.about-section .about-img::before { display: none !important; }

/* ─── 25. Contact Page ───────────────────────────────────────────────────── */
.contact-info-section.padding { padding: var(--sp-16) 0 !important; }

.contact-section.padding { padding: var(--sp-16) 0 var(--sp-20) !important; }

/* Contact info cards */
.contact-box {
    background: var(--c-white) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--r-lg) !important;
    padding: var(--sp-8) var(--sp-6) !important;
    box-shadow: var(--sh-sm) !important;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease) !important;
    text-align: center;
}

.contact-box:hover {
    box-shadow: var(--sh-lg) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(26,95,191,0.18) !important;
}

.contact-box i {
    font-size: 28px !important;
    color: var(--c-blue) !important;
    margin-bottom: var(--sp-3) !important;
    display: block !important;
    line-height: 1 !important;
}

.contact-box h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-2) !important;
}

.contact-box p, .contact-box a {
    font-size: 14px !important;
    color: var(--c-muted) !important;
    text-decoration: none !important;
    transition: color var(--ease) !important;
}

.contact-box a:hover { color: var(--c-blue) !important; }

/* Contact form card */
.contact-form.p-4 {
    border-radius: var(--r-lg) !important;
    box-shadow: var(--sh-md) !important;
    border: 1px solid var(--c-border) !important;
    padding: var(--sp-8) !important;
}

.contact-form .form-control,
.contact-form input,
.contact-form textarea {
    border-color: var(--c-border) !important;
    border-radius: var(--r-sm) !important;
    font-size: 14px !important;
    color: var(--c-text) !important;
    padding: 11px 14px !important;
}

.contact-form .form-control:focus,
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c-blue) !important;
    box-shadow: 0 0 0 3px rgba(26,95,191,0.10) !important;
}

/* Override inline teal button color */
.contact-form .default-btn,
button[style*="00a896"], button[style*="background-color"] {
    background: var(--g-brand) !important;
    border: none !important;
}

/* ─── 26. Blog / Policy / Legal Content Pages ────────────────────────────── */
.blog-section.blog-page { background: var(--c-surface) !important; padding: var(--sp-16) 0 var(--sp-20) !important; }

.blog-page .post-details,
.post-details.ck-content {
    background: var(--c-white);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    border: 1px solid var(--c-border);
    padding: var(--sp-10) var(--sp-12) !important;
}

/* Rich-text typography inside policy/legal pages */
.post-details p,
.ck-content p {
    font-size: 15px !important;
    line-height: 1.80 !important;
    color: var(--c-text-2) !important;
    margin-bottom: var(--sp-4) !important;
}

.post-details h2,
.ck-content h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin: var(--sp-8) 0 var(--sp-3) !important;
    letter-spacing: -0.3px !important;
}

.post-details h3,
.ck-content h3 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--c-text) !important;
    margin: var(--sp-5) 0 var(--sp-2) !important;
}

.post-details h4,
.ck-content h4 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--c-text) !important;
    margin: var(--sp-4) 0 var(--sp-2) !important;
}

.post-details ul,
.post-details ol,
.ck-content ul,
.ck-content ol {
    padding-left: var(--sp-6) !important;
    margin-bottom: var(--sp-4) !important;
}

.post-details ul li,
.post-details ol li,
.ck-content ul li,
.ck-content ol li {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: var(--c-text-2) !important;
    margin-bottom: var(--sp-2) !important;
}

.post-details hr,
.ck-content hr {
    border: none !important;
    border-top: 1px solid var(--c-border) !important;
    margin: var(--sp-8) 0 !important;
}

.post-details a,
.ck-content a {
    color: var(--c-blue) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(26,95,191,0.30) !important;
    text-underline-offset: 3px !important;
    transition: color var(--ease), text-decoration-color var(--ease) !important;
}

.post-details a:hover,
.ck-content a:hover {
    color: var(--c-teal) !important;
    text-decoration-color: var(--c-teal) !important;
}

.post-details strong,
.ck-content strong { color: var(--c-text); font-weight: 700; }

/* Contact-us block inside terms/legal pages */
.contact-us-section {
    background: var(--c-surface);
    border-radius: var(--r-md);
    padding: var(--sp-5) var(--sp-6);
    border: 1px solid var(--c-border);
    margin-top: var(--sp-6) !important;
}

/* ─── 27. Driver Page ────────────────────────────────────────────────────── */
/* NEMT Plus highlight card */
.nemt-plus-card {
    background: var(--g-cta) !important;
    border-radius: var(--r-xl) !important;
    padding: var(--sp-10) var(--sp-10) !important;
    position: relative;
    overflow: hidden;
    border: none !important;
    box-shadow: var(--sh-xl) !important;
}

.nemt-plus-card::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(10,158,151,0.22) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.nemt-plus-card h2,
.nemt-plus-card h3 { color: #fff !important; }

.nemt-plus-card p { color: rgba(255,255,255,0.65) !important; }

.nemt-plus-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }

.nemt-plus-actions .btn.btn-primary {
    background: var(--g-brand) !important;
    border: none !important;
    border-radius: var(--r-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    color: #fff !important;
    box-shadow: var(--sh-blue) !important;
    transition: opacity var(--ease), transform var(--ease) !important;
}

.nemt-plus-actions .btn.btn-primary:hover { opacity: .88; transform: translateY(-2px); }

.nemt-plus-actions .btn.btn-outline-primary {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.40) !important;
    border-radius: var(--r-sm) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    color: #fff !important;
    transition: background var(--ease), border-color var(--ease) !important;
}

.nemt-plus-actions .btn.btn-outline-primary:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.70) !important;
}

/* Safety road features */
.safty-road-features { display: flex; flex-direction: column; gap: var(--sp-4); }

.safty-road-features li,
.app-feature .col-lg-4 {
    background: var(--c-white);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: var(--sp-5) !important;
    transition: box-shadow var(--ease), transform var(--ease), border-color var(--ease);
}

.safty-road-features li:hover,
.app-feature .col-lg-4:hover {
    box-shadow: var(--sh-md);
    transform: translateY(-3px);
    border-color: rgba(26,95,191,0.15);
}

.app-feature .feature-icon {
    width: 48px; height: 48px;
    background: var(--c-blue-tint);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sp-3);
    font-size: 22px !important;
    color: var(--c-blue) !important;
}

.app-feature h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-2) !important;
}

.app-feature p {
    font-size: 14px !important;
    color: var(--c-muted) !important;
    margin: 0 !important;
    line-height: 1.65 !important;
}

/* ─── 27b. Driver App Section ────────────────────────────────────────────── */
.driver-app {
    position: relative !important;
    padding: var(--sp-20) 0 !important;
    background: var(--g-cta) !important;
    overflow: hidden !important;
}

/* Decorative glow blobs */
.driver-app::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 50%, rgba(10,158,151,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 20%, rgba(26,95,191,0.18) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.driver-app > .container { position: relative; z-index: 1; }

/* Two-column layout: text left, mockup right */
.driver-app .row { align-items: center; }

/* ── Left column ── */
.driver-app .section-heading h2 {
    color: #fff !important;
    font-size: var(--t-4xl) !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    margin-bottom: var(--sp-4) !important;
}

.driver-app .section-heading p {
    color: rgba(255,255,255,0.72) !important;
    font-size: var(--t-base) !important;
    line-height: 1.75 !important;
    margin-bottom: var(--sp-6) !important;
}

/* Pill badge above heading */
.driver-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(10,158,151,0.20);
    border: 1px solid rgba(10,158,151,0.40);
    color: #5de8e0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: var(--sp-4);
}

/* Feature checklist */
.driver-app-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 var(--sp-8) !important;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.driver-app-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    color: rgba(255,255,255,0.85) !important;
    font-size: var(--t-sm) !important;
    line-height: 1.55 !important;
}

.driver-app-features li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background: var(--c-teal);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 2px;
}

/* Download buttons row */
.driver-app .download-btn {
    display: flex !important;
    gap: var(--sp-3) !important;
    flex-wrap: wrap !important;
    margin-top: 0 !important;
}

.driver-app .download-btn a {
    display: inline-flex;
    align-items: center;
    transition: transform var(--ease), box-shadow var(--ease);
    border-radius: var(--r-md);
    overflow: hidden;
}

.driver-app .download-btn a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.driver-app .download-btn img {
    height: 48px !important;
    width: auto !important;
    display: block;
}

/* ── Right column: phone mockup card ── */
.driver-app-mockup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--sp-8) 0;
}

.driver-app-mockup-wrap::before {
    content: '';
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(10,158,151,0.30) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.driver-app-phone {
    position: relative;
    z-index: 1;
    width: 240px;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.50), 0 0 0 1px rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.12);
}

.driver-app-phone img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

/* Stats strip below phone */
.driver-app-stats {
    display: flex;
    gap: var(--sp-5);
    flex-wrap: wrap;
    margin-top: var(--sp-8);
    padding-top: var(--sp-8);
    border-top: 1px solid rgba(255,255,255,0.12);
}

.driver-app-stat {
    display: flex;
    flex-direction: column;
}

.driver-app-stat strong {
    font-size: var(--t-2xl) !important;
    font-weight: 800 !important;
    color: var(--c-teal) !important;
    line-height: 1 !important;
}

.driver-app-stat span {
    font-size: 12px !important;
    color: rgba(255,255,255,0.55) !important;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Safety on the Road (download-section-2) ── */
.download-section-2 .app-feature.row.safty-road-features {
    margin-top: var(--sp-6) !important;
}

.download-section-2 .app-feature.row.safty-road-features > [class*="col-"] {
    padding: var(--sp-4) var(--sp-3) !important;
    border-right: 1px solid rgba(255,255,255,0.10);
}

.download-section-2 .app-feature.row.safty-road-features > [class*="col-"]:last-child {
    border-right: none;
}

.download-section-2 .feature-icon {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
    margin-bottom: var(--sp-3) !important;
    display: block;
    filter: brightness(0) invert(1) opacity(0.85);
}

.download-section-2 .app-feature h3 {
    color: #fff !important;
    font-size: var(--t-sm) !important;
    font-weight: 700 !important;
    margin-bottom: var(--sp-2) !important;
    line-height: 1.35 !important;
}

.download-section-2 .app-feature p {
    color: rgba(255,255,255,0.65) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: var(--sp-2) !important;
}

.download-section-2 .app-feature ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.download-section-2 .app-feature ul li {
    color: rgba(255,255,255,0.65) !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
}

.download-section-2 .app-feature ul li b {
    color: rgba(255,255,255,0.90) !important;
    font-weight: 600 !important;
}

/* Mockup image in download-section-2 */
.download-section-2 .app-screen {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: var(--sp-6) auto 0 !important;
    border-radius: var(--r-xl) !important;
    overflow: hidden !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.40) !important;
    border: 2px solid rgba(255,255,255,0.10) !important;
}

.download-section-2 .app-screen img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Hide the broken mockup div */
.download-mockup { display: none !important; }

/* ── Fleet Owner — focus block ── */
.fleet-focus-block {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
}
.fleet-focus-title {
    font-size: var(--t-base) !important;
    font-weight: 700 !important;
    color: var(--c-navy) !important;
    margin-bottom: var(--sp-3) !important;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.fleet-focus-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-4);
}
.fleet-focus-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    font-size: 14.5px;
    color: var(--c-text-1);
    line-height: 1.5;
}
.fleet-focus-list li i {
    color: var(--c-teal);
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 1px;
}
@media (max-width: 480px) {
    .fleet-focus-list { grid-template-columns: 1fr; }
}

/* ── Post detail list (blog card bullet lists) ── */
.post-detail-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.post-detail-list li {
    position: relative;
    padding-left: 14px;
    font-size: 14px;
    color: var(--c-text-2);
    line-height: 1.65;
    margin-bottom: var(--sp-1);
}
.post-detail-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--c-teal);
    font-weight: 700;
}

/* ── Commercial Client intro image ── */
.cc-intro-image {
    position: relative;
    width: 100%;
    max-width: 420px;
}
.cc-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    aspect-ratio: 3/4;
    object-fit: cover;
}
.cc-intro-image::after {
    content: '';
    position: absolute;
    inset: -16px;
    border-radius: calc(var(--r-xl) + 16px);
    background: radial-gradient(ellipse at 60% 40%, rgba(10,158,151,0.12) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* ── CTA Feature List (revamped download-section-2 interior) ── */
.cta-features {
    display: flex;
    flex-direction: column;
    margin-top: var(--sp-7);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-lg);
    overflow: hidden;
}

.cta-feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background var(--ease);
}
.cta-feature-item:last-child { border-bottom: none; }
.cta-feature-item:hover { background: rgba(255,255,255,0.04); }

.cta-feature-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,0.08);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cta-feature-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.85);
}

.cta-feature-body { flex: 1; }
.cta-feature-body h3 {
    color: #fff !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
}
.cta-feature-body p {
    color: rgba(255,255,255,0.60) !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.cta-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    align-items: center;
}

/* Right-side image panel */
.cta-image-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}
.cta-image-panel::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(10,158,151,0.22) 0%, transparent 68%);
    z-index: 0;
    pointer-events: none;
}
.cta-image-panel img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r-xl);
    box-shadow: 0 28px 72px rgba(0,0,0,0.45);
    border: 2px solid rgba(255,255,255,0.10);
    aspect-ratio: 4/5;
    object-fit: cover;
}

/* Intro split — a subtle background panel that HUGS the tutorial video and
   bleeds to the right edge of the section. Living on the video column (not the
   whole section) means it wraps the video's height (no tall empty padding) and
   can never reach under the text column (no overlap). Its soft rounded left
   edge is the "invisible line" between the text (left) and media (right). */
.intro-split { position: relative; overflow: hidden; }
.intro-media {
    position: relative;
    padding: 26px 0 26px 30px;                 /* hugs the video top/bottom */
    background: linear-gradient(135deg, #eef4f9 0%, #e7eff6 100%);
    border-radius: 26px 0 0 26px;
    margin-right: calc(50% - 50vw);            /* bleed right to the viewport edge */
}
.intro-media .tutorial-embed { max-width: 520px; margin: 0; }
@media (max-width: 991.98px) {
    .intro-media { padding: 0; background: none; margin-right: 0; }
    .intro-media .tutorial-embed { max-width: 540px; margin: 24px auto 0; }
}

/* ─── 28. Rider Page ─────────────────────────────────────────────────────── */
.driver-app-backg-img { display: none !important; }

/* ─── 29. Help Page ──────────────────────────────────────────────────────── */
/* Help content uses blog-page layout, already covered above */
.blog-section.blog-page.bg-grey.padding { background: var(--c-surface) !important; }

/* ─── 30. Map Section ────────────────────────────────────────────────────── */
.map-section { border-top: 1px solid var(--c-border); }

.map-section iframe {
    display: block;
    width: 100%;
    filter: grayscale(20%) contrast(1.05);
    border: none;
}

/* ─── 31. Breadcrumb ─────────────────────────────────────────────────────── */
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: var(--sp-3) 0 0 !important;
    justify-content: center;
}

.breadcrumb-item a {
    color: rgba(255,255,255,0.65) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    transition: color var(--ease) !important;
}

.breadcrumb-item a:hover { color: var(--c-teal) !important; }

.breadcrumb-item.active { color: rgba(255,255,255,0.90) !important; font-size: 13px !important; }

.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.35) !important; }

/* ─── 32. Shared Section Backgrounds ─────────────────────────────────────── */
section.bg-grey,
.bg-grey { background: var(--c-surface) !important; }

/* ─── 33. Read More / Anchor Links ──────────────────────────────────────── */
.read-more {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--c-blue) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: gap var(--ease), color var(--ease);
}

.read-more:hover { color: var(--c-teal) !important; gap: 8px; }
.read-more::after { content: '→'; font-size: 14px; }

/* ─── 34. Inner-page Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-header { height: 280px !important; }
    .page-header-info h2 { font-size: 32px !important; }
    .blog-page .post-details,
    .post-details.ck-content { padding: var(--sp-8) var(--sp-8) !important; }
}

@media (max-width: 768px) {
    .page-header { height: 240px !important; }
    .page-header.blog-details { height: 220px !important; }
    .page-header-info h2 { font-size: 26px !important; letter-spacing: -0.4px !important; }
    .page-header-info p { font-size: 14px !important; }

    .blog-page .post-details,
    .post-details.ck-content { padding: var(--sp-6) var(--sp-5) !important; }

    .nemt-plus-card { padding: var(--sp-8) var(--sp-6) !important; }
    .nemt-plus-actions { flex-direction: column; }
    .nemt-plus-actions .btn { width: 100%; text-align: center; justify-content: center; }

    .contact-box { padding: var(--sp-6) var(--sp-4) !important; }
}

@media (max-width: 576px) {
    .page-header { height: 210px !important; }
    .page-header-info h2 { font-size: 22px !important; }
    .page-header-info h4 { font-size: 10px !important; }

    .blog-page .post-details,
    .post-details.ck-content { padding: var(--sp-5) var(--sp-4) !important; }

    .post-details h2, .ck-content h2 { font-size: 19px !important; }
}

/* ─── 34. Contact Page ───────────────────────────────────────────────────── */
.contact-box {
    background: #fff;
    padding: 30px;
    border-radius: var(--r-lg);
    transition: transform var(--ease), box-shadow var(--ease);
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.contact-box i {
    font-size: 40px;
    color: var(--c-teal);
    margin-bottom: 15px;
}
.contact-box:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

.contact-form input,
.contact-form textarea {
    border-radius: 6px;
    border: 1px solid var(--c-border);
}
.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--c-teal) !important;
    box-shadow: none !important;
    outline: none;
}

.btn-loader { font-size: 14px; }

.la-spin { animation: ppol-spin 1s linear infinite; }

@keyframes ppol-spin { 100% { transform: rotate(360deg); } }

/* ─── 35. Course Detail Banner ───────────────────────────────────────────── */
.course-banner {
    object-fit: cover;
    object-position: center center;
}
@media (max-width: 768px) {
    .course-banner {
        object-position: 80% 20%;
        height: 300px;
    }
}