/* ============================================================
   ESP 2026 — Unified design system
   Source of truth: the landing page Landing.css.
   The base layer (tokens, .ew-section, .ew-pill, .ew-btn-*,
   .ew-checklist, .ew-section-head, .ew-final-cta, etc.) is
   identical to what powers the landing page so SalaryPackaging.cshtml
   and any future page reuse the same look.
   Page-extras (FAQ, industries grid, NFP comparison, slick
   subscription box, video card, modal restyle) live in the
   "Page extensions" block at the bottom.
   All px units. No duplication with Landing.css class names.
   ============================================================ */

/* ===== TOKENS =====
   Only TWO fonts are allowed across the entire site, going forward.
   Geist (sans, all body + headings) and Instrument Serif (italic accents).
   The legacy --avenir-* variables from style-new.css are re-pointed at
   Geist here so any existing rule that reads `font-family: var(--avenir-book)`
   automatically resolves to Geist without touching style-new.css. */
:root {
    /* ---------- Brand colours ---------- */
    --ew-green: #55b147;
    --ew-green-dark: #429636;
    --ew-green-lt: #A8D98F;
    --ew-green-pale: #EFF7EB;
    --ew-ink: #0E1A0E;
    --ew-ink2: #1F2A1F;
    --ew-muted: #5C6A5C;
    --ew-line: #E2E5DD;
    --ew-line-2: #ECEFE7;
    --ew-paper: #FAFAF6;
    --ew-white: #FFFFFF;
    /* ---------- Shadows ---------- */
    --ew-shadow1: 0 1px 2px rgba(14,26,14,.04), 0 4px 16px rgba(14,26,14,.04);
    --ew-shadow2: 0 10px 30px -8px rgba(14,26,14,.18), 0 4px 12px rgba(14,26,14,.06);
    --ew-shadow3: 0 30px 60px -12px rgba(14,26,14,.22);
    /* ---------- Radii ---------- */
    --ew-radius-sm: 10px;
    --ew-radius: 14px;
    --ew-radius-lg: 22px;
    --ew-radius-pill: 999px;
    /* ---------- Spacing scale (4px base) ----------
       Use these instead of one-off pixel values so spacing is consistent. */
    --ew-space-1: 4px;
    --ew-space-2: 8px;
    --ew-space-3: 12px;
    --ew-space-4: 16px;
    --ew-space-5: 22px;
    --ew-space-6: 32px;
    --ew-space-7: 48px;
    --ew-space-8: 64px;
    --ew-space-9: 90px;
    /* ---------- Section vertical rhythm ----------
       Default section padding-y at each breakpoint. */
    --ew-section-py: 90px;
    --ew-section-py-md: 64px; /* @ 991px */
    --ew-section-py-sm: 48px; /* @ 767px */
    --ew-section-py-xs: 40px; /* @ 575px */
    /* Space between a section head (.ew-section-head) and its first child */
    --ew-section-head-mb: 56px;
    /* Default grid gap between major grid items inside sections */
    --ew-grid-gap: 22px;
    --ew-grid-gap-sm: 14px;
    /* ---------- Icon tile sizes ----------
       Every `.ew-*-ic` snaps to one of these three sizes. */
    --ew-icon-sm: 40px;
    --ew-icon-md: 48px;
    --ew-icon-lg: 54px;
    --ew-icon-radius: 12px;
    --ew-icon-radius-lg: 14px;
    /* ---------- Card / control sizing ---------- */
    --ew-card-padding-x: 26px;
    --ew-card-padding-y: 24px;
    /* ---------- Typography ---------- */
    --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
    /* ---------- Type scale ---------- */
    --ew-text-xs: 12px;
    --ew-text-sm: 13px;
    --ew-text-base: 15px;
    --ew-text-md: 16px;
    --ew-text-lg: 18px;
    --ew-text-xl: 22px;
    --ew-text-2xl: 28px;
    --ew-text-3xl: 34px;
    --ew-text-4xl: 46px;
    /* ---------- Misc ---------- */
    --ew-transition: .25s ease;
    --ew-transition-fast: .15s ease;
    /* ---------- Legacy Avenir variables redirect to Geist ---------- */
    --avenir-book: var(--font-sans);
    --avenir-heavy: var(--font-sans);
    --avenir-light: var(--font-sans);
    --avenir-black: var(--font-sans);
}

html {
    scroll-padding-top: 88px;
}

body {
    font-family: var(--font-sans);
    color: var(--ew-ink);
    background: var(--ew-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    padding-top: 72px;
}

/*.ScrollSnapContainer {
    padding-top: 72px;*/
/* Make sure scroll-snap anchors line up under the header */
/*scroll-padding-top: 72px;
}*/

*, *::before, *::after {
    box-sizing: border-box;
}

.header {
    height: 80px;
}

.header-row {
    height: 80px;
}

.marquee-gapfix {
    /*    height: 80px;
*/
}

header nav .main-wrapper .nav-link ul li:hover .drop-menu, header nav .main-wrapper .nav-link ul li:hover .mega-menu {
    top: 80px;
}

.logo-height {
    height: 40px;
}

.logo-text {
    font-size: 12px;
}

*, *::before, *::after {
    font-family: inherit;
}

input, button, select, textarea, optgroup {
    font-family: var(--font-sans);
}

.Title-H1, .Title-H2, .Title-H3, .Title-H4, .Title-H5, .Title-H6, .Title-H6-1,
.BodyText, .QuestionsSpans, .ScrollDescription,
.EWNormalBtn, .EWSecondaryBtn, .EWSecondaryBtnFW, .EziButtonTrans,
.main-heading, .main-heading a,
.carousel-caption h1, .carousel-caption h2, .carousel-caption h3,
.carousel-caption h4, .carousel-caption h5, .carousel-caption h6,
.carousel-caption .banner-heading, .carousel-caption .enquiry-heading,
.nfp-item, .nfp-text-bold, .nfp-t,
.tab_drawer_heading, .tabs, .tab_content,
.card-title, .FBTitems, .draftContent,
.show-more-container, .more-text, .more-text1, .TabUL,
.app-button, .button-text, .button-hint,
.SlideTitle, .innerContainer {
    font-family: var(--font-sans);
}

em, i.italic, .ital, .ew-serif, h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
    font-family: var(--font-serif);
    font-style: italic;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

/* ===== RESPONSIVE H1 (style-guide compliant) =====*/
h1,
.Title-H1 {
    font-family: var(--font-sans);
    font-size: 60px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -2.1px;
    color: var(--ew-ink);
    margin: 0 0 20px;
}

    h1 em,
    .Title-H1 em {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green);
        letter-spacing: -.5px;
    }

.inner-pg-banners h1,
.inner-pg-banners .Title-H1,
.carousel-caption h1,
.carousel-caption .Title-H1 {
    color: var(--ew-white);
}

    .inner-pg-banners h1 em,
    .inner-pg-banners .Title-H1 em,
    .carousel-caption h1 em,
    .carousel-caption .Title-H1 em {
        color: var(--ew-green-lt);
    }
/* ===== BUTTONS ===== */
.ew-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
    font-family: var(--font-sans);
}

.ew-btn-primary {
    background: var(--ew-ink);
    color: var(--ew-white);
    text-decoration: none;
}

    .ew-btn-primary:hover {
        background: var(--ew-green);
        color: var(--ew-ink);
    }

.ew-btn-green {
    background: var(--ew-green);
    color: var(--ew-white);
    text-decoration: none;
}

    .ew-btn-green:hover {
        background: var(--ew-green-dark);
        color: var(--ew-white);
        transform: translateY(-1px);
    }

.ew-btn-outline {
    border: 1.5px solid var(--ew-ink);
    background: transparent;
    color: var(--ew-ink);
}

    .ew-btn-outline:hover {
        background: var(--ew-ink);
        color: var(--ew-white);
    }

.ew-btn-ghost {
    background: transparent;
    color: var(--ew-ink);
    padding-left: 8px;
    padding-right: 8px;
}

    .ew-btn-ghost:hover {
        color: var(--ew-green);
    }

.ew-btn-light {
    background: var(--ew-white);
    color: var(--ew-ink);
    box-shadow: var(--ew-shadow1);
    text-decoration: none;
}

    .ew-btn-light:hover {
        transform: translateY(-1px);
        box-shadow: var(--ew-shadow2);
    }

.ew-btn .arr {
    transition: transform .2s ease;
    display: inline-block;
}

.ew-btn:hover .arr {
    transform: translateX(3px);
}

/* ===== UTILITY BAR ===== */
.ew-util {
    background: var(--ew-ink);
    color: #C8D6C8;
    font-size: 13px;
}

.ew-util-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    flex-wrap: wrap;
    gap: 8px;
}

.ew-util-left,
.ew-util-right {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.ew-util a {
    color: #C8D6C8;
    transition: color .15s;
}

    .ew-util a:hover {
        color: var(--ew-green-lt);
    }

.ew-util .ew-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid #2C3A2C;
    border-radius: 999px;
    color: #DCE6D6;
    font-size: 12px;
}

.ew-live-pill .ew-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ew-green);
    box-shadow: 0 0 0 3px rgba(85,177,71,.2);
    flex-shrink: 0;
}

/* ===== HERO CAROUSEL (landing-page hero shared) ===== */
.ew-hero-section {
    position: relative;
    overflow: hidden;
}

.ew-carousel-wrap {
    position: relative;
}

#ewHeroCarousel .carousel-item {
    min-height: 580px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ew-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(14,26,14,.72) 0%, rgba(14,26,14,.38) 55%, rgba(14,26,14,.1) 100%);
    pointer-events: none;
}

.ew-hero-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 60px 0;
}

    .ew-hero-caption .container {
        position: relative;
        z-index: 2;
    }

    .ew-hero-caption h1 {
        font-family: var(--font-sans);
        font-size: 54px;
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -1.6px;
        color: var(--ew-white);
        margin-bottom: 18px;
        max-width: 680px;
    }

        .ew-hero-caption h1 em {
            font-family: var(--font-serif);
            font-style: italic;
            font-weight: 400;
            color: var(--ew-green-lt);
        }

    .ew-hero-caption .BannerTxt {
        font-family: var(--font-sans);
        font-size: 54px;
        font-weight: 700;
        line-height: 1.06;
        letter-spacing: -1.6px;
        color: var(--ew-white);
        margin-bottom: 18px;
        max-width: 680px;
    }

        .ew-hero-caption .BannerTxt em {
            font-family: var(--font-serif);
            font-style: italic;
            font-weight: 400;
            color: var(--ew-green-lt);
        }

    .ew-hero-caption .ew-hero-sub {
        font-size: 18px;
        color: rgba(255,255,255,.82);
        max-width: 540px;
        margin-bottom: 32px;
        line-height: 1.55;
    }

    .ew-hero-caption .ew-hero-cta {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

.ew-carousel-control {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ew-white);
    font-size: 14px;
    transition: background .2s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
}

    .ew-carousel-control:hover {
        background: rgba(255,255,255,.22);
    }

    .ew-carousel-control.prev {
        left: 20px;
    }

    .ew-carousel-control.next {
        right: 20px;
    }

.ew-page .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.5);
    border: none;
    opacity: 1;
    transition: background .2s, transform .2s;
}

.ew-page .carousel-indicators .active {
    background-color: var(--ew-green);
    transform: scale(1.25);
}

/* ===== SECTION SHARED =====
   Canonical section padding sourced from --ew-section-py so every section
   reads from the same token. */
.ew-section {
    padding-top: var(--ew-section-py);
    padding-bottom: var(--ew-section-py);
}

.ew-section-sm {
    padding-top: calc(var(--ew-section-py) * 0.66);
    padding-bottom: calc(var(--ew-section-py) * 0.66);
}

.ew-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 16px;
}

.ew-section-head {
    max-width: 720px;
    margin: 0 auto var(--ew-section-head-mb);
    text-align: center;
}

    .ew-section-head h2 {
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: 46px;
        letter-spacing: -1.4px;
        line-height: 1.06;
        margin: 0 0 16px;
        /*        color: var(--ew-ink);
*/
    }

        .ew-section-head h2 em {
            font-family: var(--font-serif);
            font-style: italic;
            font-weight: 400;
            color: var(--ew-green);
        }

    .ew-section-head p {
        font-size: 17px;
        color: var(--ew-muted);
        margin: 0;
        line-height: 1.6;
    }

/* ===== NOT-FOR-PROFIT INTRO SECTION ===== */
.ew-intro-section {
    background: var(--ew-paper);
    padding-top: var(--ew-section-py);
    padding-bottom: var(--ew-section-py);
}

.ew-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 999px;
    font-size: 12px;
    box-shadow: var(--ew-shadow1);
    margin-bottom: 20px;
    color: var(--ew-ink2);
}

    .ew-intro-eyebrow .tag {
        background: var(--ew-green);
        color: var(--ew-white);
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

.ew-intro-heading {
    font-family: var(--font-sans);
    font-size: 44px;
    font-weight: 700;
    letter-spacing: -1.3px;
    line-height: 1.08;
    color: var(--ew-ink);
    margin-bottom: 22px;
}

    .ew-intro-heading em {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green);
    }

.ew-intro-lead {
    font-size: 17px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}

/* Locked to the column's left edge so the green tick badge never
   escapes the parent column. The !important rules override any
   default `ul { padding-left: 2rem }` from Bootstrap / browser UA. */
.ew-checklist,
ul.ew-checklist {
    list-style: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0;
    margin-bottom: 28px;
}

    .ew-checklist li {
        display: flex;
        gap: 12px;
        padding: 9px 0;
        margin: 0;
        border-bottom: 1px dashed var(--ew-line);
        font-size: 15px;
        line-height: 1.5;
        align-items: flex-start;
        color: var(--ew-ink2);
        list-style: none;
    }

        .ew-checklist li::before,
        .ew-checklist li::marker {
            content: none !important;
            display: none !important;
        }

        .ew-checklist li:last-child {
            border-bottom: none;
        }

    .ew-checklist .ck {
        width: 22px;
        height: 22px;
        border-radius: 7px;
        background: var(--ew-green);
        color: var(--ew-white);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 11px;
        margin-top: 1px;
    }

.ew-video-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.ew-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--ew-white);
    border: 1.5px solid var(--ew-line);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ew-ink2);
    transition: border-color .2s, background .2s, color .2s;
    cursor: pointer;
    font-family: var(--font-sans);
}

    .ew-video-btn:hover {
        border-color: var(--ew-green);
        background: var(--ew-green-pale);
        color: var(--ew-green-dark);
    }

    .ew-video-btn i {
        color: var(--ew-green);
        font-size: 11px;
    }

.ew-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 28px;
}

.ew-why-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 20px;
    box-shadow: var(--ew-shadow1);
}

    .ew-why-card h4 {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 8px;
        color: var(--ew-ink);
    }

    .ew-why-card p {
        font-size: 14px;
        color: var(--ew-muted);
        margin: 0;
        line-height: 1.55;
    }

/* ===== FBT STATS SECTION ===== */
.ew-stats-section {
    background: var(--ew-paper);
    padding: 90px 0;
    background-image: radial-gradient(600px 280px at 50% 0%, rgba(85,177,71,.08), transparent 60%);
}

.ew-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
}
    /* 5-up variant for transition program stats (page-reusable modifier).
   Use as `.ew-stat-grid.ew-stat-grid--five`. */
    .ew-stat-grid.ew-stat-grid--five {
        grid-template-columns: repeat(5, 1fr);
    }

.ew-stat-cell {
    padding: 36px 28px;
    border-right: 1px solid var(--ew-line);
    position: relative;
    cursor: pointer;
    transition: background .2s;
}

    .ew-stat-cell:hover {
        background: var(--ew-green-pale);
    }

    .ew-stat-cell:last-child {
        border-right: none;
    }

    .ew-stat-cell::before {
        content: "";
        position: absolute;
        left: 28px;
        top: 0;
        width: 22px;
        height: 3px;
        background: var(--ew-green);
        border-radius: 0 0 4px 4px;
    }

.ew-stat-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 52px;
    letter-spacing: -2px;
    line-height: 1;
    margin: 8px 0 8px;
    color: var(--ew-ink);
}

.ew-stat-unit {
    color: var(--ew-green);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
}

.ew-stat-lbl {
    font-size: 14px;
    color: var(--ew-muted);
    line-height: 1.45;
}

.ew-stat-tag {
    font-size: 11px;
    color: var(--ew-green-dark);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ===== NOVATED LEASE STEPS ===== */
.ew-steps-section {
    background: var(--ew-ink);
    padding: 90px 0;
    overflow: hidden;
    position: relative;
}

    .ew-steps-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to right, rgba(85,177,71,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(85,177,71,.05) 1px, transparent 1px);
        background-size: 64px 64px;
        pointer-events: none;
    }

    .ew-steps-section .ew-section-head h2 {
        color: var(--ew-white);
    }

    .ew-steps-section .ew-section-head p {
        color: rgba(255,255,255,.6);
    }

    .ew-steps-section .ew-pill {
        background: rgba(85,177,71,.15);
        color: var(--ew-green-lt);
    }

.ew-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.ew-step-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--ew-radius);
    padding: 28px 22px;
    text-align: center;
    transition: background .2s, transform .2s;
}

    .ew-step-card:hover {
        background: rgba(85,177,71,.12);
        transform: translateY(-4px);
    }

.ew-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ew-green);
    color: var(--ew-white);
    font-size: 18px;
    font-weight: 800;
    margin: 0 auto 16px;
}

.ew-step-icon-wrap {
    font-size: 36px;
    margin-bottom: 14px;
    color: var(--ew-green-lt);
}

.ew-step-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--ew-white);
    margin-bottom: 8px;
}

.ew-step-card p {
    font-size: 14px;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.55;
}

/* ===== PILLARS / FEATURES ===== */
.ew-pillars-section {
    background: var(--ew-white);
    padding: 90px 0;
}

.ew-pillar-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 40px;
    justify-content: center;
}

.ew-pillar-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--ew-line);
    background: var(--ew-white);
    color: var(--ew-muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    font-family: var(--font-sans);
}

    .ew-pillar-tab:hover {
        border-color: var(--ew-green);
        color: var(--ew-green-dark);
    }

    .ew-pillar-tab.active {
        background: var(--ew-green);
        border-color: var(--ew-green);
        color: var(--ew-white);
    }

    .ew-pillar-tab i {
        font-size: 13px;
    }

.ew-pillar-panels .ew-pillar-panel {
    display: none;
}

    .ew-pillar-panels .ew-pillar-panel.active {
        display: grid;
    }

.ew-pillar-panel {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.ew-pillar-copy h3 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -.9px;
    line-height: 1.1;
    color: var(--ew-ink);
    margin-bottom: 16px;
}

    .ew-pillar-copy h3 em {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green);
    }

.ew-pillar-copy p {
    font-size: 16px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin-bottom: 16px;
}

    .ew-pillar-copy p:last-child {
        margin-bottom: 0;
    }

.ew-pillar-visual {
    background: var(--ew-green-pale);
    border-radius: var(--ew-radius-lg);
    padding: 40px;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ew-pillar-visual .ew-pillar-icon {
        font-size: 80px;
        color: var(--ew-green);
        text-align: center;
    }

/* ===== CAR TOP PICKS ===== */
.ew-cars-section {
    background: var(--ew-paper);
    padding: 80px 0;
}

.ew-car-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    box-shadow: var(--ew-shadow1);
    transition: box-shadow .2s, transform .2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .ew-car-card:hover {
        box-shadow: var(--ew-shadow2);
        transform: translateY(-4px);
    }

.ew-car-img-wrap {
    background: #F4F6F1;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

    .ew-car-img-wrap img {
        max-height: 120px;
        width: auto;
    }

.ew-car-body {
    padding: 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ew-car-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ew-ink);
    margin-bottom: 6px;
}

.ew-car-price {
    font-size: 13px;
    color: var(--ew-muted);
    margin-bottom: 14px;
    flex: 1;
}

    .ew-car-price strong {
        color: var(--ew-green-dark);
        font-size: 15px;
    }

/* ----- Collapsible car grid (home Top Picks).
        Bootstrap row is `row-cols-2 row-cols-md-3 row-cols-lg-5`; when collapsed
        we keep only the first row at each breakpoint (2 / 3 / 5 cards) and hide
        the rest until the user clicks "Show all". ----- */
.ew-cars-grid.is-collapsed > .col:nth-child(n+3) {
    display: none;
}

.ew-cars-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    align-items: center;
    margin-top: 18px;
}

/* ----- Eye-catchy "Show all" toggle.
        Big green-soft pill that draws the eye, with a count chip and an
        animated chevron. A one-shot hint pulse on first render nudges the
        user toward it; pulse stops once the button is interacted with. ----- */
.ew-cars-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--ew-green-dark);
    background: var(--ew-green-pale);
    border: 1px solid rgba(66, 150, 54, .22);
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 6px 18px -8px rgba(66, 150, 54, .35);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position: relative;
    animation: ewCarsTogglePulse 2.4s ease-out 1.2s 2 both;
}

    .ew-cars-toggle:hover {
        background: var(--ew-green, #6CB33F);
        color: #08210A;
        border-color: var(--ew-green, #6CB33F);
        transform: translateY(-1px);
        box-shadow: 0 12px 26px -10px rgba(79, 138, 42, .45);
        animation: none;
    }

    .ew-cars-toggle:focus-visible {
        outline: 3px solid color-mix(in srgb, var(--ew-green-dark) 35%, transparent);
        outline-offset: 2px;
        animation: none;
    }

    .ew-cars-toggle:active {
        transform: translateY(0);
    }

    .ew-cars-toggle .badge {
        display: inline-grid;
        place-items: center;
        min-width: 26px;
        height: 22px;
        padding: 0 8px;
        border-radius: 100px;
        background: var(--ew-green-dark, #4F8A2A);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1;
    }

    .ew-cars-toggle:hover .badge {
        background: #08210A;
        color: var(--ew-green, #6CB33F);
    }

    .ew-cars-toggle .chev {
        font-size: 13px;
        transition: transform .25s cubic-bezier(.2,.7,.2,1);
        margin-left: 2px;
    }

    .ew-cars-toggle.is-open .chev {
        transform: rotate(180deg);
    }
    /* Stop pulse the moment the user opens it. */
    .ew-cars-toggle.is-open {
        animation: none;
    }

@keyframes ewCarsTogglePulse {
    0%, 100% {
        box-shadow: 0 6px 18px -8px rgba(79, 138, 42, .35), 0 0 0 0 rgba(108, 179, 63, 0);
    }

    50% {
        box-shadow: 0 6px 18px -8px rgba(79, 138, 42, .35), 0 0 0 14px rgba(108, 179, 63, 0);
    }

    25% {
        box-shadow: 0 6px 18px -8px rgba(79, 138, 42, .35), 0 0 0 0 rgba(108, 179, 63, .55);
    }
}

/* ===== TESTIMONIALS ===== */
.ew-testimonials-section {
    background: var(--ew-white);
    padding: 90px 0;
}

.ew-testimonial-card {
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 36px;
    box-shadow: var(--ew-shadow1);
}

.ew-testimonial-quote {
    font-size: 17px;
    color: var(--ew-ink2);
    line-height: 1.7;
    margin-bottom: 24px;
    font-style: italic;
}

    .ew-testimonial-quote::before {
        content: "\201C";
    }

    .ew-testimonial-quote::after {
        content: "\201D";
    }

.ew-testimonial-meta {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ew-testimonial-logo img {
    max-height: 40px;
    width: auto;
}

.ew-testimonial-author {
    font-size: 14px;
}

    .ew-testimonial-author strong {
        display: block;
        color: var(--ew-ink);
        font-size: 15px;
    }

    .ew-testimonial-author span {
        color: var(--ew-muted);
    }

.ew-reviews-section {
    background: var(--ew-paper);
    padding: 80px 0;
}

/* ===== FINAL CTA ===== */
.ew-final-cta {
    background: var(--ew-ink);
    padding: 100px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: var(--ew-white);
}

    .ew-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(800px 400px at 50% -20%, rgba(85,177,71,.2), transparent 60%);
        pointer-events: none;
    }

    .ew-final-cta .container {
        position: relative;
        z-index: 1;
    }

    .ew-final-cta .ew-pill {
        background: rgba(85,177,71,.15);
        color: var(--ew-green-lt);
    }

    .ew-final-cta h2 {
        font-family: var(--font-sans);
        font-size: 54px;
        font-weight: 700;
        letter-spacing: -1.6px;
        line-height: 1.06;
        color: var(--ew-white);
        margin-bottom: 18px;
        position: relative;
    }

        .ew-final-cta h2 em {
            font-family: var(--font-serif);
            font-style: italic;
            font-weight: 400;
            color: var(--ew-green-lt);
        }

    .ew-final-cta p {
        font-size: 17px;
        color: rgba(255,255,255,.65);
        max-width: 580px;
        margin: 0 auto 32px;
        line-height: 1.6;
        position: relative;
    }

    .ew-final-cta .ew-cta-btns {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        position: relative;
    }

    .ew-final-cta .ew-btn-ghost-white {
        background: transparent;
        color: rgba(255,255,255,.85);
        border: 1px solid rgba(255,255,255,.2);
        padding: 12px 22px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 500;
        transition: border-color .2s, color .2s, background .2s;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-sans);
        cursor: pointer;
        text-decoration: none;
    }

        .ew-final-cta .ew-btn-ghost-white:hover {
            border-color: rgba(255,255,255,.5);
            color: var(--ew-white);
        }

    /* Small helper line under the CTA buttons — e.g. "Prefer desktop?
       Log in to the Eziway Portal or call 1800 932 394." on the app
       download final CTA. Muted white text with subtle green links. */
    .ew-final-cta .ew-final-cta-alt {
        margin-top: 22px;
        margin-bottom: 0;
        font-size: 14px;
        color: rgba(255,255,255,.55);
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

        .ew-final-cta .ew-final-cta-alt a {
            color: var(--ew-green-lt);
            border-bottom: 1px solid rgba(85,177,71,.4);
            transition: color .15s, border-color .15s;
        }

            .ew-final-cta .ew-final-cta-alt a:hover {
                color: var(--ew-white);
                border-bottom-color: rgba(255,255,255,.7);
            }

/* ===== MODAL CLOSE (landing-shared) ===== */
.ew-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 24px;
    line-height: 1;
    background: none;
    border: none;
    color: var(--ew-muted);
    cursor: pointer;
    z-index: 10;
    font-family: var(--font-sans);
}

    .ew-modal-close:hover {
        color: var(--ew-ink);
    }

/* ===== CAROUSEL INNER IMAGES =====
   Modal photo carousels (site visits, on-site interviews, corporate meetings,
   staff information sessions) contain mixed-orientation photos.
   Let each image display at its own natural aspect ratio — no fixed frame,
   no letterboxing, no cropping. Cap the height to keep the modal within
   the viewport on any screen. */
.ew-modal.ew-modal--video .carousel,
.ew-modal.watch-video-box .carousel {
    background: transparent;
}

.ew-modal.ew-modal--video .carousel .carousel-inner,
.ew-modal.watch-video-box .carousel .carousel-inner {
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
}

.ew-modal.ew-modal--video .carousel .carousel-item,
.ew-modal.watch-video-box .carousel .carousel-item {
    background: transparent;
}

.ew-modal.ew-modal--video .carousel .carousel-item > img,
.ew-modal.watch-video-box .carousel .carousel-item > img,
.ew-inner-carousel-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 8px;
    background: #666666;
}

/* ===== RESPONSIVE UTILITIES ===== */
.ew-hide-mobile-init {
    display: initial;
}

/* ============================================================
   COMMON REUSABLE COMPONENTS
   ----------------------------------------------------------------
   These are the canonical class names new pages should use.
   They replace the older page-specific names like .ew-pkg-filter,
   .ew-partners-filter, .ew-card-feature, .ew-resource-card etc.
   The page-specific names are kept as aliases so existing HTML
   keeps working without touching JS data-attributes.
   ============================================================ */

/* ----- SECTION RHYTHM -----
   Universal rule: every section that follows the `.ew-*-section` naming
   pattern, plus `.ew-section`, `.ew-intro-section` and `.ew-final-cta`,
   reads its vertical rhythm from the same token. New section variants
   added in future automatically inherit the rhythm — no need to extend
   the selector list. */
section[class*="ew-"][class*="-section"],
.ew-section,
.ew-intro-section,
.ew-final-cta {
    padding-top: var(--ew-section-py);
    padding-bottom: var(--ew-section-py);
}
    /* Modifier classes are utility-style — they MUST win over any page-specific
   section background rule, regardless of source order. Use !important. */
    .ew-section--paper,
    .ew-section.is-paper,
    section.ew-section--paper,
    section.is-paper {
        background: var(--ew-paper) !important;
    }

    .ew-section--white,
    .ew-section.is-white,
    section.ew-section--white,
    section.is-white {
        background: var(--ew-white) !important;
    }

    .ew-section--ink,
    .ew-section.is-ink,
    section.ew-section--ink,
    section.is-ink {
        background: var(--ew-ink) !important;
        color: var(--ew-white);
    }

/* ----- ICON TILE (.ew-*-ic) -----
   Every icon tile across the site snaps to one of three sizes. The default
   is `--ew-icon-md`; small variants use `.ew-icon--sm`, large use
   `.ew-icon--lg`. Hover behaviour is owned by the parent card class. */
.ew-feature-ic,
.ew-channel-ic,
.ew-ind-ic,
.ew-resource-ic,
.ew-pds-icon,
.ew-cat-ic,
.ew-nfp-orgs-ic,
.ew-icon-tile {
    width: var(--ew-icon-md);
    height: var(--ew-icon-md);
    border-radius: var(--ew-icon-radius);
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    margin-bottom: var(--ew-space-4);
    transition: background var(--ew-transition), color var(--ew-transition), transform var(--ew-transition);
}

    .ew-feature-ic.ew-icon--sm,
    .ew-ind-ic,
    .ew-resource-ic,
    .ew-pds-icon,
    .ew-cat-ic,
    .ew-nfp-orgs-ic,
    .ew-icon-tile.ew-icon--sm {
        width: var(--ew-icon-sm);
        height: var(--ew-icon-sm);
        border-radius: var(--ew-icon-radius);
        font-size: 16px;
        margin-bottom: var(--ew-space-3);
    }

    .ew-feature-ic.ew-icon--lg,
    .ew-channel-ic,
    .ew-icon-tile.ew-icon--lg {
        width: var(--ew-icon-lg);
        height: var(--ew-icon-lg);
        border-radius: var(--ew-icon-radius-lg);
        font-size: 22px;
        margin-bottom: var(--ew-space-5);
    }
/* Featured (dark) parent cards reskin their icon-tile to a translucent
   light-green so it stays legible against the ink background. */
.ew-feature-card-featured .ew-feature-ic,
.ew-channel-card-featured .ew-channel-ic,
.ew-feature-card-featured .ew-icon-tile,
.ew-channel-card-featured .ew-icon-tile {
    background: rgba(168,217,143,.18);
    color: var(--ew-green-lt);
}

/* ----- Filter chip row (used by package filter, partners filter, etc.) ----- */
.ew-filter-row,
.ew-pkg-filter,
.ew-partners-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}

.ew-filter-btn,
.ew-pkg-filter-btn,
.ew-partners-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--ew-white);
    border: 1.5px solid var(--ew-line);
    color: var(--ew-muted);
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

    .ew-filter-btn:hover,
    .ew-pkg-filter-btn:hover,
    .ew-partners-filter-btn:hover {
        border-color: var(--ew-green);
        color: var(--ew-green-dark);
        transform: translateY(-1px);
    }

    .ew-filter-btn.is-active,
    .ew-pkg-filter-btn.is-active,
    .ew-partners-filter-btn.is-active {
        background: var(--ew-ink);
        border-color: var(--ew-ink);
        color: var(--ew-white);
    }

/* ----- Split image+body card (used by feature cards, comparison cards,
   app download, phone CTA, hero card, explainer card, etc.) ----- */
.ew-split-card,
.ew-card-feature,
.ew-nfp-compare-card,
.ew-app-download,
.ew-nfp-explainer {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 220px 1fr;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    box-shadow: var(--ew-shadow1);
}

    .ew-split-card:hover,
    .ew-card-feature:hover,
    .ew-nfp-compare-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: #C7D8B5;
    }

.ew-split-card-figure,
.ew-card-feature-figure,
.ew-nfp-compare-figure,
.ew-app-download-figure,
.ew-nfp-explainer-figure {
    background: linear-gradient(160deg, var(--ew-green-pale), var(--ew-paper));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    position: relative;
    overflow: hidden;
}

    .ew-split-card-figure img,
    .ew-card-feature-figure img,
    .ew-nfp-compare-figure img {
        max-width: 100%;
        max-height: 140px;
        width: auto;
        height: auto;
        position: relative;
        z-index: 1;
        transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    }

.ew-split-card:hover .ew-split-card-figure img,
.ew-card-feature:hover .ew-card-feature-figure img,
.ew-nfp-compare-card:hover .ew-nfp-compare-figure img {
    transform: scale(1.06);
}

.ew-split-card-body,
.ew-card-feature-body,
.ew-nfp-compare-body {
    padding: 24px 26px 26px;
}

    .ew-split-card-body h3,
    .ew-card-feature-body h3,
    .ew-nfp-compare-body h3 {
        font-family: var(--font-sans);
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.3;
        margin: 0 0 12px;
        color: var(--ew-ink);
    }

    .ew-split-card-body > p,
    .ew-card-feature-body > p,
    .ew-nfp-compare-body > p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--ew-muted);
        margin: 0;
    }

/* ----- Compact horizontal link card (used by resource downloads,
   document links, quick actions, etc.) ----- */
.ew-link-card,
.ew-resource-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 22px 22px 22px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: var(--ew-ink);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .ew-link-card:hover,
    .ew-resource-card:hover {
        transform: translateY(-3px);
        box-shadow: var(--ew-shadow2);
        border-color: var(--ew-green-lt);
    }

/* ============================================================
   PAGE EXTENSIONS (SalaryPackaging.cshtml only — not in Landing.css)
   ============================================================ */

/* ----- Pre-tax category icons (5-up under intro copy) ----- */
.ew-cat-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 4px;
}

.ew-cat {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    padding: 14px 8px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .ew-cat:hover {
        transform: translateY(-2px);
        border-color: var(--ew-green-lt);
        box-shadow: var(--ew-shadow1);
    }

/* .ew-cat-ic inherits the small icon-tile from the shared rule. Override
   just the centered margin so it sits centred above the category name. */
.ew-cat-ic {
    margin: 0 auto var(--ew-space-2);
}

.ew-cat-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ew-ink2);
    line-height: 1.3;
}

/* ----- Video card (iframe wrapper used on the intro right column) ----- */
.ew-video-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    box-shadow: var(--ew-shadow2);
    overflow: hidden;
    position: relative;
}

.ew-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ew-ink);
}

    .ew-video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
    }

.ew-video-caption {
    padding: 16px 22px;
    border-top: 1px solid var(--ew-line);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ew-paper);
    font-size: 13px;
    color: var(--ew-muted);
}

    .ew-video-caption .ew-d {
        width: 8px;
        height: 8px;
        background: var(--ew-green);
        border-radius: 50%;
        flex-shrink: 0;
    }

/* ----- NFP comparison cards (PBI vs Public Hospital) ----- */
.ew-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

    .ew-compare-grid.ew-compare-grid--single {
        grid-template-columns: minmax(0, 640px);
        justify-content: center;
    }

.ew-compare-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 32px 28px 28px;
    box-shadow: var(--ew-shadow1);
}

    .ew-compare-card.is-highlight {
        background: linear-gradient(180deg, var(--ew-green-pale), var(--ew-white));
        border-color: #C7D8B5;
    }

.ew-cc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--ew-line);
    margin-bottom: 14px;
}

    .ew-cc-head h3 {
        font-family: var(--font-sans);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: -.4px;
        margin: 0;
        color: var(--ew-ink);
    }

.ew-cc-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--ew-green-dark);
    background: var(--ew-green-pale);
    border: 1px solid #C7D8B5;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ew-cc-row {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px dashed #ECEFE7;
    align-items: center;
}

    .ew-cc-row:last-of-type {
        border-bottom: 0;
    }

.ew-cc-label {
    font-size: 14px;
    color: var(--ew-ink2);
}

    .ew-cc-label small {
        display: block;
        color: #8A968A;
        font-size: 12px;
        margin-top: 2px;
    }

.ew-cc-val {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    text-align: right;
    color: var(--ew-ink);
    letter-spacing: -.3px;
}

.ew-cc-total {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--ew-line);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 14px;
}

.ew-cc-tlabel {
    font-size: 13px;
    color: var(--ew-muted);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
}

.ew-cc-tval {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 32px;
    color: var(--ew-green-dark);
    letter-spacing: -.6px;
    line-height: 1;
}

.ew-cc-foot {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ew-cc-foot img {
        max-width: 180px;
        height: auto;
        border-radius: 10px;
    }

/* ----- Image hero card ("why does it work for you") ----- */
.ew-hero-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    box-shadow: var(--ew-shadow2);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
}

.ew-hc-img {
    background-size: cover;
    background-position: center;
    min-height: 320px;
    position: relative;
}

    .ew-hc-img::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(14,26,14,.18));
    }

.ew-hc-body {
    padding: 40px 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .ew-hc-body h3 {
        font-family: var(--font-sans);
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -.8px;
        line-height: 1.15;
        margin: 0 0 14px;
        color: var(--ew-ink);
    }

        .ew-hc-body h3 em {
            font-family: var(--font-serif);
            font-style: italic;
            font-weight: 400;
            color: var(--ew-green);
        }

    .ew-hc-body p {
        font-size: 16px;
        color: var(--ew-muted);
        margin: 0 0 14px;
        line-height: 1.7;
    }

        .ew-hc-body p:last-child {
            margin-bottom: 0;
        }

/* ----- Industries grid (3-up cards) ----- */
.ew-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.ew-ind-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 26px 24px;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .ew-ind-card:hover {
        border-color: var(--ew-green);
        transform: translateY(-2px);
        box-shadow: var(--ew-shadow1);
    }

/* .ew-ind-ic inherits the small icon-tile from the shared rule. */

.ew-ind-ttl {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 17px;
    color: var(--ew-ink);
    margin-bottom: 6px;
    letter-spacing: -.2px;
}

.ew-ind-desc {
    color: var(--ew-muted);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 14px;
}

.ew-ind-cap {
    font-size: 12px;
    color: var(--ew-green-dark);
    font-weight: 500;
    letter-spacing: .02em;
    padding-top: 12px;
    border-top: 1px dashed #ECEFE7;
}

    .ew-ind-cap strong {
        font-family: var(--font-sans);
        font-size: 14px;
        color: var(--ew-ink);
        font-weight: 700;
        letter-spacing: -.2px;
    }

/* ----- FAQ accordion (native details/summary, no JS) ----- */
.ew-faq-list {
    max-width: 880px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.ew-faq-item {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease;
}

    .ew-faq-item:hover {
        border-color: #C7D8B5;
    }

    .ew-faq-item[open] {
        border-color: var(--ew-green-lt);
        box-shadow: var(--ew-shadow1);
    }

    .ew-faq-item > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 20px 24px;
        cursor: pointer;
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 700;
        color: var(--ew-ink);
        list-style: none;
        letter-spacing: -.2px;
        line-height: 1.4;
    }

        .ew-faq-item > summary::-webkit-details-marker {
            display: none;
        }

        .ew-faq-item > summary::after {
            content: "+";
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--ew-green-pale);
            color: var(--ew-green-dark);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 400;
            line-height: 1;
            flex-shrink: 0;
            transition: background .2s ease, color .2s ease;
        }

    .ew-faq-item[open] > summary::after {
        content: "\2212";
        background: var(--ew-green);
        color: var(--ew-white);
    }

.ew-faq-body {
    padding: 0 24px 22px;
    color: var(--ew-muted);
    font-size: 15px;
    line-height: 1.7;
}

    .ew-faq-body p {
        margin: 0 0 10px;
    }

        .ew-faq-body p:last-child {
            margin-bottom: 0;
        }

    .ew-faq-body a {
        color: var(--ew-green-dark);
        border-bottom: 1px solid var(--ew-green-lt);
        transition: color .2s ease, border-color .2s ease;
    }

        .ew-faq-body a:hover {
            color: var(--ew-green);
            border-color: var(--ew-green);
        }

/* ----- Slick subscription box (floating bottom-right widget) ----- */
.ew-sub-box {
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-bottom: 0;
    box-shadow: var(--ew-shadow3);
    width: 380px;
    max-width: 92vw;
}

.ew-sub-line {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--ew-green-lt) 30%, var(--ew-green) 50%, var(--ew-green-lt) 70%, transparent 100%);
    background-size: 220% 100%;
    animation: ew-sub-line-slide 3.6s ease-in-out infinite;
    margin: 0;
}

@keyframes ew-sub-line-slide {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

.ew-sub-head {
    background: linear-gradient(135deg, var(--ew-ink), #1A2A1A);
    color: var(--ew-white);
    cursor: pointer;
    transition: background .2s ease;
    border: 0;
    margin: 0;
}

    .ew-sub-head:hover {
        background: linear-gradient(135deg, #1A2A1A, var(--ew-ink2));
    }

.ew-sub-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    min-height: 56px;
}

.ew-sub-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.1px;
    color: var(--ew-white);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1.2;
}

    .ew-sub-title .ew-sub-subtitle {
        font-family: var(--font-sans);
        font-weight: 400;
        font-size: 12px;
        color: #B7C3B7;
        letter-spacing: 0;
        white-space: nowrap;
    }

.ew-sub-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ew-green);
    box-shadow: 0 0 0 4px rgba(85,177,71,.22);
    flex-shrink: 0;
    animation: ew-sub-pulse 2.4s ease-in-out infinite;
}

.marquee-gapfix {
    /*    height: 80px;
*/
}

@keyframes ew-sub-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(85,177,71,.22);
    }

    50% {
        box-shadow: 0 0 0 8px rgba(85,177,71,.06);
    }
}

.ew-sub-icon {
    font-size: 14px;
    opacity: .85;
    transition: opacity .2s ease, transform .2s ease;
}

.ew-sub-head:hover .ew-sub-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.ew-sub-icon-close {
    font-size: 12px;
}

.ew-sub-phone-wrap {
    display: inline-flex;
    align-items: center;
}

.ew-sub-box .ew-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ew-green);
    color: var(--ew-white);
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 2px 8px rgba(85,177,71,.28);
}

    .ew-sub-box .ew-phone-pill:hover {
        background: var(--ew-green-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(85,177,71,.36);
    }

    .ew-sub-box .ew-phone-pill i {
        font-size: 11px;
    }

.ew-sub-area {
    background: var(--ew-white);
    border-top: 1px solid var(--ew-line);
    animation: ew-sub-area-in .25s ease-out;
}

@keyframes ew-sub-area-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ew-sub-area-inner {
    padding: 4px 16px 12px;
}

/* ============================================================
   .ew-modal — UNIFIED MODAL SYSTEM
   One canonical look for every modal/popup across the site, with
   three content variants that swap surface treatment:
   • .ew-modal--video → transparent body, iframe floats on the
                       overlay (the home-page Top Picks modal look)
   • .ew-modal--form  → paper surface, padded, designed for forms
   • .ew-modal--info  → smaller centered dialog for confirmations
   The .ew-modal-close button works on both dark and light
   surfaces — variant rules invert its colours accordingly.
   ============================================================ */

/* ----- Base: positioning, dialog width, scrim ----- */
.ew-modal .modal-dialog {
    max-width: 880px;
    margin: auto;
    padding: 1.75rem 1rem;
    min-height: calc(100% - 3.5rem);
    display: flex;
    align-items: center;
}

.ew-modal .modal-content {
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
    border: none;
    background: var(--ew-paper);
    box-shadow: var(--ew-shadow3);
}

.ew-modal .modal-body {
    padding: 28px 28px 24px;
    position: relative;
}

.ew-modal .modal-header {
    border-bottom: 1px solid var(--ew-line);
    padding: 20px 28px;
    align-items: center;
}

    .ew-modal .modal-header .modal-title {
        font-family: var(--font-sans);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--ew-ink);
        margin: 0;
    }

.ew-modal .modal-footer {
    border-top: 1px solid var(--ew-line);
    padding: 18px 28px;
    gap: 12px;
}

/* ----- Unified close button — circle, top-right, dark X on light;
        variants flip the colour scheme below. ----- */
.ew-modal .ew-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(14, 26, 14, .08);
    color: var(--ew-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

    .ew-modal .ew-modal-close:hover {
        background: var(--ew-green);
        color: var(--ew-ink);
        transform: rotate(90deg);
    }

    .ew-modal .ew-modal-close:focus-visible {
        outline: 3px solid rgba(85, 177, 71, .35);
        outline-offset: 2px;
    }

/* ============================================================
   Variant: --video — transparent content, just the iframe floats
   on the Bootstrap dark scrim (matches the home-page pattern).
   ============================================================ */
.ew-modal.ew-modal--video .modal-content,
.ew-modal.watch-video-box .modal-content {
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.ew-modal.ew-modal--video .modal-body,
.ew-modal.watch-video-box .modal-body {
    padding: 0;
}

.ew-modal.ew-modal--video .ew-modal-close,
.ew-modal.watch-video-box .ew-modal-close {
    top: -16px;
    right: -16px;
    background: var(--ew-white);
    color: var(--ew-ink);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, .35);
}

    .ew-modal.ew-modal--video .ew-modal-close:hover,
    .ew-modal.watch-video-box .ew-modal-close:hover {
        background: var(--ew-green);
    }

.ew-modal.ew-modal--video iframe,
.ew-modal.watch-video-box iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0 !important;
    border-radius: var(--ew-radius);
    display: block;
    box-shadow: 0 24px 56px -16px rgba(0, 0, 0, .55);
}

.ew-modal.ew-modal--video img,
.ew-modal.watch-video-box img {
    width: 100%;
    height: auto;
    border-radius: var(--ew-radius);
    display: block;
    box-shadow: 0 24px 56px -16px rgba(0, 0, 0, .55);
}

/* ============================================================
   Variant: --form — paper surface, designed to host a form.
   ============================================================ */
.ew-modal.ew-modal--form .modal-dialog {
    max-width: 720px;
}

.ew-modal.ew-modal--form .modal-body {
    padding: 24px 28px;
}

.ew-modal.ew-modal--form label {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ew-muted);
    margin-bottom: 6px;
    display: block;
}

.ew-modal.ew-modal--form .form-control,
.ew-modal.ew-modal--form input[type="text"],
.ew-modal.ew-modal--form input[type="email"],
.ew-modal.ew-modal--form input[type="tel"],
.ew-modal.ew-modal--form input[type="number"],
.ew-modal.ew-modal--form select,
.ew-modal.ew-modal--form textarea {
    width: 100%;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--ew-ink);
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 11px;
    padding: 12px 14px;
    transition: border-color .15s, box-shadow .15s;
}

    .ew-modal.ew-modal--form .form-control:focus,
    .ew-modal.ew-modal--form input:focus,
    .ew-modal.ew-modal--form select:focus,
    .ew-modal.ew-modal--form textarea:focus {
        outline: none;
        border-color: var(--ew-green);
        box-shadow: 0 0 0 3px rgba(85, 177, 71, .15);
    }

/* ============================================================
   Variant: --info — small centred confirmation/info dialog.
   ============================================================ */
.ew-modal.ew-modal--info .modal-dialog {
    max-width: 460px;
}

.ew-modal.ew-modal--info .modal-body {
    padding: 36px 32px 30px;
    text-align: center;
}

.ew-modal.ew-modal--info h2,
.ew-modal.ew-modal--info h3,
.ew-modal.ew-modal--info h4,
.ew-modal.ew-modal--info .modal-title {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ew-ink);
    margin: 14px 0 10px;
}

.ew-modal.ew-modal--info p {
    font-size: 15px;
    color: var(--ew-muted);
    line-height: 1.55;
    margin: 0 0 8px;
}

.ew-modal.ew-modal--info .ew-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    display: inline-grid;
    place-items: center;
    font-size: 24px;
    margin: 0 auto 4px;
}

.ew-modal.ew-modal--info .ew-modal-actions {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ----- Fade animation tuning so every modal feels consistent ----- */
.ew-modal.fade .modal-dialog {
    transform: translateY(14px) scale(.985);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease-out;
}

.ew-modal.fade.show .modal-dialog {
    transform: translateY(0) scale(1);
}

header nav .main-wrapper .nav-link ul li a {
    font-weight: 400;
    font-size: 15px;
    color: var(--ew-ink);
    transition: all 0.2s;
    margin-right: 13px;
}

.login-link {
    background: var(--ew-ink);
    color: var(--ew-white) !important;
    text-decoration: none;
    line-height: 15px !important;
    margin: 0;
    font-size: 15px;
}

    .login-link:hover {
        background: var(--ew-green);
        color: var(--ew-ink) !important;
    }

.quick-link-heading {
    color: var(--ew-green);
}

header {
    position: fixed;
    width: 100%;
    z-index: 9;
    top: 0px;
    /* font-family: 'Avenir Book'; */
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--box-shadow-one);
}

.MobileImages img {
    width: 50% !important;
}

.DesktopImages img {
    width: 100% !important;
}
/* ============================================================
   GLOBAL HEADER & FOOTER (rendered by ctrlHeader.ascx / ctrlFooter.ascx)
   ============================================================ */
/* ===== Utility bar (dark strip above the main header) ===== */
.ew-util-bar {
    background: var(--ew-ink);
    color: #C8D6C8;
    font-size: 13px;
    position: relative;
    z-index: 60;
}

    .ew-util-bar .ew-util-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 9px 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .ew-util-bar .ew-util-left,
    .ew-util-bar .ew-util-right {
        display: flex;
        gap: 22px;
        align-items: center;
        flex-wrap: wrap;
    }

    .ew-util-bar a {
        color: #C8D6C8;
        text-decoration: none;
        transition: color .15s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

        .ew-util-bar a:hover {
            color: var(--ew-green-lt);
        }

    .ew-util-bar .ew-live-pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 10px;
        border: 1px solid #2C3A2C;
        border-radius: 999px;
        color: #DCE6D6;
        font-size: 12px;
        font-weight: 500;
    }

        .ew-util-bar .ew-live-pill .ew-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ew-green);
            box-shadow: 0 0 0 3px rgba(85,177,71,.22);
            flex-shrink: 0;
        }

    .ew-util-bar .ew-util-phone i {
        font-size: 11px;
        color: var(--ew-green-lt);
    }

    .ew-util-bar .ew-util-login {
        padding: 4px 12px;
        border: 1px solid #2C3A2C;
        border-radius: 999px;
        color: #DCE6D6;
        font-weight: 500;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
    }

        .ew-util-bar .ew-util-login:hover {
            background: var(--ew-green);
            border-color: var(--ew-green);
            color: var(--ew-white);
        }

/* ============================================================
   INDUSTRY SPECIALISTS — page-specific extensions
   ============================================================ */

/* Reveal animations — graceful fallback baseline. The legacy
   animation/style.css already powers the timing curve; these
   rules only ensure pre-reveal elements are not invisible if
   the global observer hasn't fired. */
.ew-page .reveal {
    will-change: transform, opacity;
}

/* ----- Stats grid — animated entry + counter typography ----- */
.ew-stat-grid-animate .ew-stat-cell {
    transition: transform .25s ease, box-shadow .25s ease, background .2s ease;
}

    .ew-stat-grid-animate .ew-stat-cell:hover {
        transform: translateY(-2px);
        background: var(--ew-green-pale);
    }

.ew-stat-num .ew-stat-num-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.ew-tight-top {
    padding-top: 56px;
}

/* ----- Unified body-text size for all card-based content -----
   Paragraph + list-item text inside every .ew-*-card pattern reads at
   the same 15 px / 1.65 rhythm so the page feels visually consistent.
   These rules sit ABOVE the individual card declarations and remain
   the highest-specificity baseline for both. */
.ew-feature-card > p,
.ew-channel-card > p,
.ew-hc-body p,
.ew-step-body p,
.ew-card-feat p {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--ew-muted);
}

.ew-intro-lead {
    font-size: 15px;
    line-height: 1.65;
}

.ew-feature-card .ew-feature-list li,
.ew-channel-card .ew-feature-list li {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--ew-ink2);
    padding: 7px 0;
}

.ew-channel-card .ew-feature-list {
    margin-bottom: 22px;
}

.ew-channel-link {
    font-size: 15px;
}

/* ----- "Beyond a service" feature row ----- */
.ew-feature-section {
    background: var(--ew-white);
}

.ew-feature-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ew-feature-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 36px 32px 32px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position: relative;
    overflow: hidden;
    /* Flex column so any child with `mt-auto` (e.g. the "Start calculator"
       button at the bottom of each sector card) is pushed to the foot of the
       card — keeping every CTA on the same baseline across the row. */
    display: flex;
    flex-direction: column;
}

    .ew-feature-card::before {
        content: "";
        position: absolute;
        inset: -1px -1px auto -1px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--ew-green) 50%, transparent);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .ew-feature-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: #C7D8B5;
    }

        .ew-feature-card:hover::before {
            opacity: 1;
        }
/* .ew-feature-ic uses the LARGE icon-tile from the shared rule. The
   playful rotate on hover is variant behaviour. */
.ew-feature-ic {
    width: var(--ew-icon-lg);
    height: var(--ew-icon-lg);
    border-radius: var(--ew-icon-radius-lg);
    font-size: 22px;
    margin-bottom: var(--ew-space-5);
}

.ew-feature-card:hover .ew-feature-ic {
    transform: scale(1.08) rotate(-3deg);
}

/* Optional character-image illustration inside an .ew-feature-card.
   Replaces or complements the .ew-feature-ic when a visual is more
   appropriate than a glyph. Left-aligned to match the card's text
   alignment, with a soft tile background so transparent PNG/WebP
   illustrations read clearly on both light and dark cards. */
.ew-feature-figure {
    margin: 0 0 22px;
    width: 100%;
    height: 300px;
    border-radius: var(--ew-radius);
    background: var(--ew-green-pale);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: transform var(--ew-transition), box-shadow var(--ew-transition);
}

    .ew-feature-figure img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform var(--ew-transition);
    }

.ew-feature-card:hover .ew-feature-figure {
    transform: translateY(-2px);
}

    .ew-feature-card:hover .ew-feature-figure img {
        transform: scale(1.06);
    }
/* On the dark/featured variant, swap to a translucent light tile so
   white-line illustrations remain visible. */
.ew-feature-card-featured .ew-feature-figure {
    background: rgba(168,217,143,.18);
}

/* ----- Case study card variant of .ew-feature-card -----
   Use as `.ew-feature-card ew-case-card`. Shows a brand logo at the top,
   a key/value metadata grid, a blurb, and an outline-button CTA. */
.ew-case-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: var(--ew-space-6) var(--ew-space-5) var(--ew-space-5);
}

.ew-case-card-logo {
    width: 100%;
    height: 110px;
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 16px;
    border-bottom: 1px dashed var(--ew-line);
}

    .ew-case-card-logo img {
        max-width: 80%;
        max-height: 80px;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform var(--ew-transition);
    }

.ew-case-card:hover .ew-case-card-logo img {
    transform: scale(1.05);
}

.ew-case-card h3 {
    font-size: var(--ew-text-lg, 18px);
    margin: 0 0 14px;
}

.ew-case-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    font-size: 13.5px;
}

    .ew-case-meta dt {
        color: var(--ew-muted);
        font-weight: 500;
    }

    .ew-case-meta dd {
        color: var(--ew-ink);
        font-weight: 700;
        margin: 0;
    }

.ew-case-card > p {
    color: var(--ew-muted);
    flex-grow: 1;
    margin: 0 0 18px;
}

.ew-case-card .ew-btn {
    align-self: flex-start;
}

/* ----- Case study HORIZONTAL row layout (alternating image side) -----
   An editorial / magazine alternative to the vertical .ew-case-card grid.
   Each case study is a full-width split card. The logo column alternates
   between left and right via :nth-child(even). Use as
   `<div class="ew-case-row">` containing `.ew-split-card.ew-case-card-h`. */
.ew-case-row {
    display: grid;
    gap: 22px;
}

.ew-case-card-h {
    grid-template-columns: 300px 1fr;
    align-items: stretch;
}

.ew-case-row > .ew-case-card-h:nth-child(even) {
    grid-template-columns: 1fr 300px;
}

    .ew-case-row > .ew-case-card-h:nth-child(even) .ew-case-card-h-figure {
        order: 2;
    }

    .ew-case-row > .ew-case-card-h:nth-child(even) .ew-case-card-h-body {
        order: 1;
    }

.ew-case-card-h-figure {
    background: var(--ew-green-pale);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 28px;
    position: relative;
    overflow: hidden;
    transition: background var(--ew-transition);
}

    .ew-case-card-h-figure::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(180px 140px at 50% 35%, rgba(85,177,71,.14), transparent 70%);
        pointer-events: none;
    }

    .ew-case-card-h-figure img {
        max-width: 100%;
        max-height: 100px;
        width: auto;
        height: auto;
        object-fit: contain;
        position: relative;
        z-index: 1;
        transition: transform var(--ew-transition);
    }

.ew-case-card-h:hover .ew-case-card-h-figure {
    background: var(--ew-green-pale);
}

    .ew-case-card-h:hover .ew-case-card-h-figure img {
        transform: scale(1.05);
    }

.ew-case-card-h-body {
    padding: 30px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .ew-case-card-h-body .ew-pill {
        align-self: flex-start;
        margin-bottom: 4px;
    }

    .ew-case-card-h-body h3 {
        font-family: var(--font-sans);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.4px;
        line-height: 1.2;
        margin: 0;
        color: var(--ew-ink);
    }

.ew-case-card-h-stats {
    list-style: none;
    padding: 0;
    margin: 8px 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

    .ew-case-card-h-stats li {
        display: inline-flex;
        align-items: baseline;
        gap: 6px;
        font-size: 13.5px;
        color: var(--ew-muted);
        line-height: 1.35;
    }

        .ew-case-card-h-stats li strong {
            color: var(--ew-ink);
            font-weight: 700;
            font-size: 18px;
            letter-spacing: -.3px;
        }

        .ew-case-card-h-stats li + li {
            padding-left: 18px;
            border-left: 1px solid var(--ew-line);
        }

.ew-case-card-h-body > p {
    font-size: 15px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin: 6px 0 14px;
}

.ew-case-card-h-body .ew-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* ----- Case study BENTO layout (featured hero + supporting grid) -----
   Alternative to .ew-case-row when one customer story should headline the
   section. Pair `.ew-case-hero-card` (the featured story) with
   `.ew-case-mini-card`s (supporting stories) inside a Bootstrap row. */
.ew-case-hero-card {
    background: linear-gradient(140deg, var(--ew-green-pale) 0%, var(--ew-paper) 60%, var(--ew-white) 100%);
    border: 1px solid var(--ew-green-lt);
    border-radius: var(--ew-radius-lg);
    padding: 40px 36px 36px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform var(--ew-transition), box-shadow var(--ew-transition);
    box-shadow: var(--ew-shadow1);
}

    .ew-case-hero-card::before {
        content: "";
        position: absolute;
        top: -60px;
        right: -60px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(85,177,71,.18), transparent);
        pointer-events: none;
    }

    .ew-case-hero-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
    }

    .ew-case-hero-card .ew-pill {
        background: var(--ew-ink);
        color: var(--ew-white);
        align-self: flex-start;
        margin-bottom: 18px;
    }

.ew-case-hero-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

    .ew-case-hero-logo img {
        max-height: 80px;
        max-width: 60%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform var(--ew-transition);
    }

.ew-case-hero-card:hover .ew-case-hero-logo img {
    transform: scale(1.04);
}

.ew-case-hero-card h3 {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.7px;
    line-height: 1.15;
    margin: 0 0 18px;
    color: var(--ew-ink);
}

.ew-case-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 36px;
    margin: 4px 0 20px;
    position: relative;
    z-index: 1;
}

.ew-case-hero-stat {
    display: flex;
    flex-direction: column;
}

.ew-case-hero-num {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 36px;
    color: var(--ew-ink);
    letter-spacing: -1.2px;
    line-height: 1;
}

.ew-case-hero-num-lbl {
    font-size: 12px;
    color: var(--ew-muted);
    margin-top: 6px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ew-case-hero-card > p {
    font-size: 15px;
    color: var(--ew-ink2);
    line-height: 1.7;
    margin: 0 0 20px;
    max-width: 580px;
    position: relative;
    z-index: 1;
}

.ew-case-hero-card .ew-btn {
    align-self: flex-start;
    margin-top: auto;
    position: relative;
    z-index: 1;
}

/* Mini supporting card — compact version of .ew-feature-card */
.ew-case-mini-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform var(--ew-transition), box-shadow var(--ew-transition), border-color var(--ew-transition);
    box-shadow: var(--ew-shadow1);
}

    .ew-case-mini-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: var(--ew-green-lt);
    }

    .ew-case-mini-card .ew-pill {
        align-self: flex-start;
        margin-bottom: 12px;
        font-size: 10.5px;
        padding: 4px 10px;
    }

.ew-case-mini-logo {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0 0 14px;
}

    .ew-case-mini-logo img {
        max-height: 56px;
        max-width: 70%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform var(--ew-transition);
    }

.ew-case-mini-card:hover .ew-case-mini-logo img {
    transform: scale(1.05);
}

.ew-case-mini-card h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.3px;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--ew-ink);
}

.ew-case-mini-stats {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 12.5px;
    color: var(--ew-muted);
}

    .ew-case-mini-stats li strong {
        color: var(--ew-ink);
        font-weight: 700;
    }

.ew-case-mini-card > p {
    font-size: 13.5px;
    color: var(--ew-muted);
    line-height: 1.55;
    margin: 0 0 14px;
    flex-grow: 1;
}

.ew-case-mini-card .ew-btn {
    align-self: flex-start;
    margin-top: auto;
}

/* ----- Case-study detail page brand row -----
   Used at the top of a case-study page&apos;s intro section. Pairs the
   organisation&apos;s brand logo with a small sector pill. */
.ew-case-brand-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.ew-case-brand-logo {
    height: 70px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.ew-case-brand-row .ew-pill {
    margin: 0;
}

.ew-feature-card h3 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--ew-ink);
}

.ew-feature-card > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ew-muted);
    margin: 0 0 18px;
}

.ew-feature-card .ew-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .ew-feature-card .ew-feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13.5px;
        color: var(--ew-ink2);
        padding: 6px 0;
        border-top: 1px dashed #ECEFE7;
    }

        .ew-feature-card .ew-feature-list li:first-child {
            border-top: 0;
        }

        .ew-feature-card .ew-feature-list li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ew-green);
            flex-shrink: 0;
            margin-top: 8px;
        }

.ew-feature-card-featured {
    background: linear-gradient(160deg, var(--ew-ink), #1A2A1A);
    color: var(--ew-white);
    border-color: transparent;
}

    .ew-feature-card-featured h3,
    .ew-feature-card-featured > p,
    .ew-feature-card-featured .ew-feature-list li {
        color: rgba(255,255,255,.88);
    }

    .ew-feature-card-featured .ew-feature-ic {
        background: rgba(168,217,143,.18);
        color: var(--ew-green-lt);
    }

    .ew-feature-card-featured .ew-feature-list li {
        border-top-color: rgba(255,255,255,.12);
        color: rgba(255,255,255,.78);
    }

        .ew-feature-card-featured .ew-feature-list li::before {
            background: var(--ew-green-lt);
        }

/* ----- Hero image card (Why choose Eziway) ----- */
.ew-image-section {
    background: var(--ew-paper);
}

.ew-image-card {
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
    box-shadow: var(--ew-shadow2);
    transition: transform .35s ease;
    background: var(--ew-white);
}

    .ew-image-card img {
        display: block;
        transition: transform .8s cubic-bezier(.16, 1, .3, 1);
        margin: 0 auto;
        padding: 20px;
        max-height: 350px;
    }

    .ew-image-card:hover img {
        transform: scale(1.02);
    }

/* ----- Pillars — wrap the legacy tabs in the new aesthetic ----- */
.ew-pillars-wrap {
    margin: 0;
}

.ew-pillars-section .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 0 36px;
}

    .ew-pillars-section .tabs li {
        background: var(--ew-white);
        border: 1.5px solid var(--ew-line);
        border-radius: var(--ew-radius);
        padding: 18px 22px;
        cursor: pointer;
        transition: border-color .25s ease, background .25s ease, color .25s ease, transform .15s ease;
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 14px;
        color: var(--ew-ink2);
        line-height: 1.2;
    }

        .ew-pillars-section .tabs li .sa,
        .ew-pillars-section .tabs li > div {
            font-size: 26px;
            color: var(--ew-green);
            transition: color .25s ease;
        }

        .ew-pillars-section .tabs li:hover {
            border-color: var(--ew-green);
            color: var(--ew-green-dark);
            transform: translateY(-2px);
        }

        .ew-pillars-section .tabs li.active {
            background: var(--ew-ink);
            border-color: var(--ew-ink);
            color: var(--ew-white);
        }

            .ew-pillars-section .tabs li.active .sa,
            .ew-pillars-section .tabs li.active > div {
                color: var(--ew-green-lt);
            }

.ew-pillars-section .tab_container {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 40px 44px;
    box-shadow: var(--ew-shadow1);
}

.ew-pillars-section .tab_content {
    transition: opacity .3s ease, transform .3s ease;
}

    .ew-pillars-section .tab_content.ew-pop {
        animation: ew-pop-in .35s ease;
    }

@keyframes ew-pop-in {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.ew-pillars-section .tab_content h3 {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: var(--ew-ink);
    margin: 0 0 16px;
}

.ew-pillars-section .tab_content .BodyText {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ew-muted);
    margin: 0 0 14px;
}

.ew-pillars-section .TabUL li {
    color: var(--ew-ink2);
    padding: 6px 0;
    border-bottom: 1px dashed var(--ew-line);
}

    .ew-pillars-section .TabUL li:last-child {
        border-bottom: 0;
    }

.ew-pillars-section .tab_drawer_heading {
    display: none;
}

/* ----- Testimonials section + carousel ----- */
.ew-testimonials-section .owl-carousel {
    overflow: visible;
}

.ew-testimonials-section .app-button {
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .ew-testimonials-section .app-button:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
    }

    .ew-testimonials-section .app-button img.video-shadow {
        border-radius: var(--ew-radius);
        transition: filter .35s ease;
    }

    .ew-testimonials-section .app-button:hover img.video-shadow {
        filter: brightness(.85);
    }

.ew-testimonials-section .youtube-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: auto;
    z-index: 2;
    transition: transform .25s ease, opacity .25s ease;
    opacity: .92;
}

.ew-testimonials-section .app-button:hover .youtube-icon {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
}

/* ----- Partner grid — filterable, greyscale → colour on hover -----
   Filter row + button use the SHARED .ew-filter-row / .ew-filter-btn
   defined in the "Common components" block at the top of this file. */
.ew-partners-section {
    background: var(--ew-paper);
}

.ew-partners-group {
    margin-bottom: 36px;
    transition: opacity .25s ease;
}

    .ew-partners-group.is-hidden {
        display: none;
    }

.ew-partners-cat-title {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin: 0 0 18px;
    padding: 0 0 10px;
    border-bottom: 1px dashed var(--ew-line);
}

.ew-partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.ew-partners-cell {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 20px 16px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease, background .25s ease;
}

    .ew-partners-cell img {
        max-width: 100%;
        max-height: 70px;
        width: auto;
        height: auto;
        filter: grayscale(100%);
        opacity: .65;
        transition: filter .35s ease, opacity .35s ease, transform .35s ease;
    }

    .ew-partners-cell:hover {
        border-color: var(--ew-green);
        box-shadow: var(--ew-shadow1);
        transform: translateY(-3px);
        background: var(--ew-white);
    }

        .ew-partners-cell:hover img {
            filter: grayscale(0%);
            opacity: 1;
            transform: scale(1.04);
        }

/* ----- Final CTA additions (matches the existing .ew-final-cta block) ----- */
.ew-final-cta .ew-cta-btns .ew-btn-green {
    background: var(--ew-green);
    color: var(--ew-white);
}

    .ew-final-cta .ew-cta-btns .ew-btn-green:hover {
        background: var(--ew-green-dark);
        color: var(--ew-white);
    }

/* ============================================================
   LET'S GET STARTED — page-specific extensions
   ============================================================ */

/* ----- 3-step "How it works" flow ----- */
.ew-howto-section {
    background: var(--ew-white);
}

.ew-step-flow {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    position: relative;
    counter-reset: ew-step;
}
    /* 5-step variant — tighten the connector line and grid to 5 cols.
   Use as `.ew-step-flow.ew-step-flow--five`. */
    .ew-step-flow.ew-step-flow--five {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }

        .ew-step-flow.ew-step-flow--five::before {
            left: 8%;
            right: 8%;
        }

/* Optional character-image illustration inside a step. Sits between the
   numbered circle and the body text. Reusable on any page that wants a
   visual cue per step in addition to the number. */
.ew-step-figure {
    margin: 0 auto 18px;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1 / 1;
    border-radius: var(--ew-radius);
    background: var(--ew-paper);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    transition: transform var(--ew-transition), box-shadow var(--ew-transition);
}

    .ew-step-figure img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform var(--ew-transition);
    }

.ew-step:hover .ew-step-figure {
    transform: translateY(-3px);
    box-shadow: var(--ew-shadow1);
}

    .ew-step:hover .ew-step-figure img {
        transform: scale(1.04);
    }

.ew-step-flow::before {
    content: "";
    position: absolute;
    top: 38px;
    left: 12%;
    right: 12%;
    height: 2px;
    background: repeating-linear-gradient( 90deg, var(--ew-line) 0, var(--ew-line) 6px, transparent 6px, transparent 12px );
    z-index: 0;
}

.ew-step {
    position: relative;
    z-index: 1;
    background: var(--ew-white);
    text-align: center;
    padding: 12px 12px;
}

.ew-step-num {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--ew-ink);
    color: var(--ew-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -1px;
    box-shadow: 0 6px 22px rgba(14,26,14,.18);
    position: relative;
    transition: transform .3s ease, background .3s ease;
}

    .ew-step-num::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        border: 2px solid var(--ew-green);
        opacity: 0;
        transform: scale(.85);
        transition: opacity .3s ease, transform .3s ease;
    }

.ew-step:hover .ew-step-num {
    transform: translateY(-3px);
    background: var(--ew-green);
}

    .ew-step:hover .ew-step-num::after {
        opacity: 1;
        transform: scale(1);
    }

.ew-step-body h3 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: var(--ew-ink);
    margin: 0 0 10px;
}

.ew-step-body p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ew-muted);
    margin: 0;
}

/* ----- Channel cards (App / Web / Phone) ----- */
.ew-channel-section {
    background: var(--ew-paper);
}

.ew-channel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ew-channel-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 36px 30px 30px;
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
}

    .ew-channel-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: #C7D8B5;
    }

    .ew-channel-card::before {
        content: "";
        position: absolute;
        inset: -1px -1px auto -1px;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--ew-green), transparent);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .ew-channel-card:hover::before {
        opacity: 1;
    }

.ew-channel-tag {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin-bottom: 18px;
}
/* .ew-channel-ic uses the LARGE icon-tile from the shared rule (it's
   the same size + radius as .ew-feature-ic). */
.ew-channel-ic {
    font-size: 24px;
}

.ew-channel-card:hover .ew-channel-ic {
    transform: scale(1.08) rotate(-4deg);
}

.ew-channel-card h3 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--ew-ink);
}

.ew-channel-card > p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ew-muted);
    margin: 0 0 18px;
}

.ew-channel-card .ew-feature-list {
    margin-bottom: 22px;
    flex: 1;
}

.ew-channel-link {
    color: var(--ew-ink);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
    align-self: flex-start;
}

    .ew-channel-link .arr {
        transition: transform .2s ease;
    }

    .ew-channel-link:hover {
        color: var(--ew-green-dark);
        gap: 10px;
    }

        .ew-channel-link:hover .arr {
            transform: translateX(3px);
        }

.ew-channel-card-featured {
    background: linear-gradient(160deg, var(--ew-ink), #1A2A1A);
    color: var(--ew-white);
    border-color: transparent;
}

    .ew-channel-card-featured .ew-channel-tag {
        color: var(--ew-green-lt);
    }

    .ew-channel-card-featured h3 {
        color: var(--ew-white);
    }

    .ew-channel-card-featured > p {
        color: rgba(255,255,255,.78);
    }

    .ew-channel-card-featured .ew-channel-ic {
        background: rgba(168,217,143,.18);
        color: var(--ew-green-lt);
    }

    .ew-channel-card-featured .ew-feature-list li {
        color: rgba(255,255,255,.78);
        border-top-color: rgba(255,255,255,.12);
    }

        .ew-channel-card-featured .ew-feature-list li::before {
            background: var(--ew-green-lt);
        }

    .ew-channel-card-featured .ew-channel-link {
        color: var(--ew-green-lt);
    }

        .ew-channel-card-featured .ew-channel-link:hover {
            color: var(--ew-white);
        }

/* ----- App / Website screenshot showcase ----- */
.ew-showcase-section {
    background: var(--ew-white);
}

.ew-showcase-section-paper {
    background: var(--ew-paper);
}

.ew-showcase-reverse {
    flex-direction: row-reverse;
}
/* The two .TestimonialsNew carousels keep their original Owl-carousel
   styling — no .ew-app-frame wrapper, so the project's existing slider
   look (AppScreenText caption pill, image proportions) is preserved. */

/* ----- Phone CTA card ----- */
.ew-phone-cta-section {
    background: var(--ew-white);
}

.ew-phone-card {
    background: linear-gradient(160deg, var(--ew-green-pale), var(--ew-paper));
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    align-items: center;
    box-shadow: var(--ew-shadow1);
}

.ew-phone-card-figure {
    padding: 28px 28px 0;
    text-align: center;
    align-self: end;
}

    .ew-phone-card-figure img {
        max-width: 100%;
        height: auto;
        display: inline-block;
        filter: drop-shadow(0 14px 24px rgba(14,26,14,.18));
    }

.ew-phone-card-body {
    padding: 44px 44px 44px 0;
}

    .ew-phone-card-body .ew-intro-heading {
        margin-bottom: 14px;
    }

    .ew-phone-card-body .ew-intro-lead {
        margin-bottom: 24px;
    }

.ew-phone-card-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.ew-btn-phone {
    padding: 12px 22px 12px 16px;
    gap: 14px;
}

    .ew-btn-phone i {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .ew-btn-phone span {
        display: inline-flex;
        flex-direction: column;
        line-height: 1.1;
        text-align: left;
    }

    .ew-btn-phone .ew-phone-card-ctas-label {
        font-size: 11px;
        font-weight: 500;
        opacity: .75;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ew-btn-phone strong {
        font-size: 17px;
        font-weight: 700;
        letter-spacing: .02em;
    }

/* ----- FAQ section background tweak (uses the shared .ew-faq-* from earlier) ----- */
.ew-faq-section {
    background: var(--ew-paper);
}

/* Subscription box: reverted — the floating "Enquire Now" widget keeps
   its original styling from style-new.css. No 2026 overrides here. */

/* ============================================================
   WHAT CAN I PACKAGE — page-specific extensions
   ============================================================ */

/* ----- 3-up video benefit explainers ----- */
.ew-benefits-section {
    background: var(--ew-paper);
}

.ew-benefit-explainers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ew-benefit-explainer {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 0;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    color: var(--ew-ink);
}

    .ew-benefit-explainer:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: #C7D8B5;
    }

.ew-benefit-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: var(--ew-ink2);
    background-size: cover;
    background-position: center;
}

.ew-thumb-remote {
    background-image: url('/Areas/ESP/images/remote-living-cost-1.webp');
}

.ew-thumb-car-park {
    background-image: url('/Areas/ESP/images/car-parking-1.webp');
}

.ew-thumb-novated {
    background-image: url('/Areas/ESP/images/car-leasing-1.webp');
}

.ew-benefit-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14,26,14,.05) 0%, rgba(14,26,14,.55) 100%);
    transition: background .25s ease;
}

.ew-benefit-explainer:hover .ew-benefit-thumb::after {
    background: linear-gradient(180deg, rgba(14,26,14,.15) 0%, rgba(14,26,14,.65) 100%);
}

.ew-benefit-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: var(--ew-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 10px 24px -6px rgba(14,26,14,.32);
    z-index: 2;
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.ew-benefit-explainer:hover .ew-benefit-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: var(--ew-green);
    color: var(--ew-white);
}

.ew-benefit-title {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ew-ink);
    padding: 18px 22px 4px;
    line-height: 1.3;
    display: block;
}

.ew-benefit-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 22px 18px;
    color: var(--ew-green-dark);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .ew-benefit-meta::before {
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--ew-green);
    }

/* ----- Package grid — 12 items, filterable -----
   Filter row + button use the SHARED .ew-filter-row / .ew-filter-btn. */
.ew-pkg-section {
    background: var(--ew-white);
}

.ew-pkg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ew-pkg-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, opacity .2s ease;
    display: flex;
    flex-direction: column;
}

    .ew-pkg-card.is-hidden {
        display: none;
    }

    .ew-pkg-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ew-shadow2);
        border-color: #C7D8B5;
    }

.ew-pkg-card-figure {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ew-green-pale);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ew-pkg-card-figure img {
        max-width: 80%;
        max-height: 80%;
        width: auto;
        height: auto;
        transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    }

.ew-pkg-card:hover .ew-pkg-card-figure img {
    transform: scale(1.08);
}

.ew-pkg-card-body {
    padding: 18px 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ew-pkg-cat-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin-bottom: 8px;
}

.ew-pkg-card-body h3 {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--ew-ink);
}

.ew-pkg-card-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ew-muted);
    margin: 0;
}

    .ew-pkg-card-body p strong {
        color: var(--ew-ink);
        font-weight: 700;
    }

/* ============================================================
   CARD DETAILS — page-specific extensions
   ============================================================ */

/* ----- Card hero image ----- */
.ew-card-hero-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--ew-radius-lg);
    box-shadow: 0 24px 48px -16px rgba(14,26,14,.28);
    transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}

    .ew-card-hero-image:hover {
        transform: translateY(-4px) rotate(-1deg);
    }

.ew-link-inline {
    color: var(--ew-green-dark);
    font-weight: 600;
    border-bottom: 1px solid var(--ew-green-lt);
    transition: color .2s ease, border-color .2s ease;
    text-decoration: none;
}

    .ew-link-inline:hover {
        color: var(--ew-green);
        border-color: var(--ew-green);
    }
/* ----- CTA button group -----
   Sensible default layout for `.ew-cta-btns`: flex row with wrap and a
   consistent gap, used anywhere two or more `.ew-btn`s sit together
   outside `.ew-final-cta`. Modifiers control alignment. */
.ew-cta-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.ew-cta-btns-center {
    justify-content: center;
}

.ew-cta-btns-start {
    justify-content: flex-start;
}

.ew-cta-btns-end {
    justify-content: flex-end;
}

/* ----- PDS alert callout ----- */
.ew-pds-section {
    background: var(--ew-white);
}

.ew-pds-alert {
    max-width: 880px;
    margin: 0 auto;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-left: 4px solid var(--ew-green);
    border-radius: var(--ew-radius);
    box-shadow: var(--ew-shadow1);
    overflow: hidden;
}

.ew-pds-alert-head {
    background: linear-gradient(135deg, var(--ew-green-pale), var(--ew-white));
    padding: 24px 28px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
    border-bottom: 1px dashed var(--ew-line);
}
/* .ew-pds-icon uses the small icon-tile shape but with solid green
   background to signal the "important update" intent. */
.ew-pds-icon {
    background: var(--ew-green);
    color: var(--ew-white);
    font-size: 19px;
    margin-bottom: 0;
}

.ew-pds-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin-bottom: 6px;
}

.ew-pds-alert-head h3 {
    font-family: var(--font-sans);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.3;
    margin: 0;
    color: var(--ew-ink);
}

    .ew-pds-alert-head h3 em {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green-dark);
    }

.ew-pds-alert-body {
    padding: 22px 28px 26px;
}

    .ew-pds-alert-body p {
        font-size: 15px;
        line-height: 1.65;
        color: var(--ew-muted);
        margin: 0 0 14px;
    }

        .ew-pds-alert-body p:last-child {
            margin-bottom: 0;
        }

    .ew-pds-alert-body strong {
        color: var(--ew-ink);
        font-weight: 700;
    }

.ew-pds-clause {
    background: var(--ew-paper);
    border-radius: var(--ew-radius);
    padding: 18px 20px 14px;
    margin: 0 0 16px;
    position: relative;
}

.ew-pds-clause-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    background: var(--ew-white);
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--ew-green-lt);
    margin-bottom: 10px;
}

.ew-pds-clause p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ew-ink2);
}

.ew-pds-alert-body .ew-btn {
    margin-top: 8px;
}

/* ----- 4-card features grid (card benefits) ----- */
.ew-card-features-section {
    background: var(--ew-paper);
}

.ew-card-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
/* Base .ew-card-feature box (background, border, hover, figure padding,
   body h3, body p) is provided by the SHARED .ew-split-card block at the
   top of this file. Only the radial-gradient and feature-list bullet
   styles unique to the card-feature variant remain below. */
.ew-card-feature-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ew-card-feature-figure::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120px 80px at 70% 30%, rgba(85,177,71,.18), transparent 70%);
    pointer-events: none;
}

.ew-card-feature-body .ew-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .ew-card-feature-body .ew-feature-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 14.5px;
        line-height: 1.55;
        color: var(--ew-ink2);
        padding: 7px 0;
        border-top: 1px dashed #ECEFE7;
    }

        .ew-card-feature-body .ew-feature-list li:first-child {
            border-top: 0;
            padding-top: 0;
        }

        .ew-card-feature-body .ew-feature-list li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--ew-green);
            flex-shrink: 0;
            margin-top: 8px;
        }

        .ew-card-feature-body .ew-feature-list li strong {
            color: var(--ew-ink);
            font-weight: 700;
        }

/* ----- Resource cards (FAQ / FSG / PDS / Dispute Form) ----- */
.ew-resources-section {
    background: var(--ew-white);
}

.ew-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
/* Base .ew-resource-card box (background, border, padding, flex layout,
   hover lift) is provided by the SHARED .ew-link-card / .ew-resource-card
   block at the top of this file. Only the icon, body and arrow children
   unique to this variant remain below. */
/* .ew-resource-ic uses the small icon-tile from the shared rule.
   Variant: zero margin (sits inline with the body) + a slightly larger
   font for the document icon glyphs. */
.ew-resource-ic {
    font-size: 19px;
    margin-bottom: 0;
}

.ew-resource-card:hover .ew-resource-ic {
    background: var(--ew-green);
    color: var(--ew-white);
}

.ew-resource-body {
    flex: 1;
    min-width: 0;
}

.ew-resource-tag {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ew-muted);
    display: block;
    margin-bottom: 4px;
}

.ew-resource-body h3 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.2px;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--ew-ink);
}

.ew-resource-body p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ew-muted);
    margin: 0;
}

.ew-resource-arrow {
    color: var(--ew-muted);
    font-size: 13px;
    flex-shrink: 0;
    transition: transform .25s ease, color .25s ease;
}

.ew-resource-card:hover .ew-resource-arrow {
    color: var(--ew-green);
    transform: translateX(3px);
}

/* ----- App download card (PWA install section) -----
   Base box, figure and body use the SHARED .ew-split-card pattern.
   Only the figure padding + image size and body padding overrides remain. */
.ew-app-download-section {
    background: var(--ew-white);
}

.ew-app-download {
    align-items: center;
}

.ew-app-download-figure {
    padding: 36px 24px;
    text-align: center;
    align-self: stretch;
}

    .ew-app-download-figure img {
        max-height: 96px;
        width: auto;
    }

.ew-app-download-body {
    padding: 32px 36px;
}

    .ew-app-download-body .ew-intro-heading {
        margin-bottom: 12px;
    }

    .ew-app-download-body .ew-intro-lead {
        margin-bottom: 22px;
    }

.ew-app-download-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

    .ew-app-download-ctas .ew-btn {
        cursor: pointer;
        font-family: var(--font-sans);
    }

    .ew-app-download-ctas i {
        font-size: 14px;
    }

/* ============================================================
   NFP page — page-specific extensions
   Page section rhythm is inherited from the universal
   `section[class*="ew-"][class*="-section"]` rule near the top of
   this file. No per-page padding overrides needed here.
   ============================================================ */

/* ----- NFP advantage explainer card -----
   Base box, figure padding and image styling use the SHARED .ew-split-card
   pattern. The variant uses a 320px figure column and a radial gradient
   background accent. */
.ew-nfp-explainer-section {
    background: var(--ew-white);
}

.ew-nfp-explainer {
    grid-template-columns: 320px 1fr;
}

.ew-nfp-explainer-figure {
    padding: var(--ew-space-6);
    align-self: stretch;
}

    .ew-nfp-explainer-figure::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(160px 100px at 70% 30%, rgba(85,177,71,.16), transparent 70%);
        pointer-events: none;
    }

    .ew-nfp-explainer-figure img {
        max-width: 100%;
        height: auto;
        position: relative;
        z-index: 1;
        border-radius: var(--ew-radius);
    }

.ew-nfp-explainer:hover .ew-nfp-explainer-figure img {
    transform: scale(1.03);
}

.ew-nfp-explainer-body {
    padding: var(--ew-space-6) calc(var(--ew-space-6) + var(--ew-space-1));
    display: grid;
    gap: var(--ew-space-6);
}

.ew-nfp-explainer-block h3 {
    font-family: var(--font-sans);
    font-size: var(--ew-text-lg);
    font-weight: 700;
    letter-spacing: -.2px;
    color: var(--ew-ink);
    margin: 0 0 var(--ew-space-3);
    padding-bottom: var(--ew-space-2);
    border-bottom: 1px dashed var(--ew-line);
}

/* Orgs eligible list */
.ew-nfp-orgs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--ew-space-3);
}

    .ew-nfp-orgs-list li {
        display: grid;
        grid-template-columns: var(--ew-icon-sm) 1fr;
        gap: var(--ew-space-3);
        align-items: center;
        font-size: var(--ew-text-base);
        color: var(--ew-ink2);
        padding: var(--ew-space-1) 0;
    }

        .ew-nfp-orgs-list li::before {
            content: none;
        }
/* .ew-nfp-orgs-ic uses the small icon-tile from the shared rule. */
.ew-nfp-orgs-ic {
    font-size: 15px;
    margin-bottom: 0;
}

.ew-nfp-orgs-list li:hover .ew-nfp-orgs-ic {
    background: var(--ew-green);
    color: var(--ew-white);
}

.ew-nfp-orgs-list li strong {
    display: block;
    font-weight: 700;
    color: var(--ew-ink);
    margin-bottom: 2px;
    font-size: var(--ew-text-base);
}

.ew-nfp-orgs-list li span {
    display: block;
    font-size: var(--ew-text-sm);
    color: var(--ew-muted);
    line-height: 1.5;
}

/* Cap structures row */
.ew-nfp-cap-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ew-grid-gap-sm);
}

.ew-nfp-cap {
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: var(--ew-space-4) var(--ew-space-5);
    transition: border-color var(--ew-transition), transform var(--ew-transition-fast);
}

    .ew-nfp-cap:hover {
        border-color: var(--ew-green);
        transform: translateY(-2px);
    }

.ew-nfp-cap-tag {
    font-size: var(--ew-text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    display: block;
    margin-bottom: var(--ew-space-2);
}

.ew-nfp-cap-num {
    font-family: var(--font-sans);
    font-size: var(--ew-text-xl);
    font-weight: 700;
    color: var(--ew-ink);
    letter-spacing: -.5px;
    line-height: 1.2;
    margin-bottom: var(--ew-space-1);
}

    .ew-nfp-cap-num span {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        font-size: var(--ew-text-sm);
        color: var(--ew-green-dark);
        letter-spacing: 0;
    }

.ew-nfp-cap p {
    font-size: var(--ew-text-sm);
    color: var(--ew-muted);
    margin: 0;
    line-height: 1.5;
}

.ew-nfp-explainer-foot {
    font-size: var(--ew-text-sm);
    color: var(--ew-muted);
    line-height: 1.6;
    margin: var(--ew-space-3) 0 0;
    padding: var(--ew-space-3) var(--ew-space-4);
    background: var(--ew-paper);
    border-left: 3px solid var(--ew-green);
    border-radius: 0 var(--ew-radius) var(--ew-radius) 0;
}

/* ----- Tax-compare section (wraps the legacy nfp-wrapper widget) ----- */
.ew-tax-compare-section {
    background: var(--ew-paper);
}

    .ew-tax-compare-section .album.Enquiry-box {
        background: var(--ew-white);
        border: 1px solid var(--ew-line);
        border-radius: var(--ew-radius-lg);
        padding: var(--ew-space-6) 0;
        box-shadow: var(--ew-shadow1);
    }
        /* Cancel the Bootstrap py-5 inside the Enquiry-box wrapper — section
   padding is already supplied by the universal section-py rule. */
        .ew-tax-compare-section .album.Enquiry-box.py-5 {
            padding-top: var(--ew-space-6);
            padding-bottom: var(--ew-space-6);
        }

/* ----- NFP features section (3-up reusing .ew-feature-row) ----- */
.ew-nfp-features-section {
    background: var(--ew-white);
}

/* ----- NFP compare cards (PBI/HPC vs Public Hospital) ----- */
.ew-nfp-compare-section {
    background: var(--ew-paper);
}

.ew-nfp-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ew-grid-gap);
}
/* Base .ew-nfp-compare-card box is provided by the SHARED .ew-split-card
   block at the top of this file. The 240px figure column gives the
   character illustrations enough room without clipping. */
.ew-nfp-compare-card {
    grid-template-columns: 240px 1fr;
    align-items: stretch;
}

.ew-nfp-compare-figure {
    align-self: stretch;
    min-height: 220px;
}

    .ew-nfp-compare-figure img {
        max-width: 100%;
        max-height: 180px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

.ew-nfp-compare-body {
    padding: var(--ew-card-padding-y) var(--ew-card-padding-x);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .ew-nfp-compare-body .ew-pill {
        margin-bottom: var(--ew-space-3);
    }

    .ew-nfp-compare-body h3 {
        font-size: var(--ew-text-lg);
        margin: 0 0 var(--ew-space-3);
    }

.ew-nfp-compare-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--ew-space-3);
}

    .ew-nfp-compare-table tbody tr {
        border-top: 1px dashed var(--ew-line);
    }

        .ew-nfp-compare-table tbody tr:first-child {
            border-top: 0;
        }

    .ew-nfp-compare-table td {
        padding: var(--ew-space-2) 0;
        font-size: var(--ew-text-sm);
        color: var(--ew-muted);
        vertical-align: middle;
    }

        .ew-nfp-compare-table td:last-child {
            font-family: var(--font-sans);
            font-weight: 700;
            color: var(--ew-ink);
            text-align: right;
            letter-spacing: -.2px;
        }

    .ew-nfp-compare-table tr.is-highlight td {
        background: var(--ew-green-pale);
        color: var(--ew-ink);
        font-weight: 600;
    }

        .ew-nfp-compare-table tr.is-highlight td:last-child {
            color: var(--ew-green-dark);
        }

        .ew-nfp-compare-table tr.is-highlight td:first-child {
            padding-left: var(--ew-space-3);
            border-radius: var(--ew-radius-sm) 0 0 var(--ew-radius-sm);
        }

        .ew-nfp-compare-table tr.is-highlight td:last-child {
            padding-right: var(--ew-space-3);
            border-radius: 0 var(--ew-radius-sm) var(--ew-radius-sm) 0;
        }

.ew-nfp-compare-saving {
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    padding: var(--ew-space-3) var(--ew-space-4);
    border-radius: var(--ew-radius-sm);
    font-size: var(--ew-text-sm);
    font-weight: 500;
    line-height: 1.5;
}

    .ew-nfp-compare-saving strong {
        color: var(--ew-ink);
        font-weight: 700;
    }

/* ============================================================
   EZIWAY CAR SEARCH page extensions
   Scoped under [data-ng-controller="searchCarController"] so they
   Scoped under [data-ng-controller="PublicCalculatorController"] so they
   never leak into other pages. Reuses --ew-* tokens; reuses
   .ew-btn / .ew-faq-item / .ew-feature-card / .ew-section / .container
   from the rest of this stylesheet. Only the patterns unique to
   the Angular search workflow are defined here.
   Media queries live in stylesheet2026-media.css.
   ============================================================ */

/* ---- Banner page (preserved) ---- */
.search-field {
    display: none;
}

.slide {
    scroll-snap-align: unset;
}

#carousel img {
    display: block;
    opacity: .5;
    cursor: pointer;
}

#carousel .flex-active-slide img {
    opacity: 1;
    cursor: default;
}

.flexslider {
    margin: 0 0 20px;
}

[data-ng-controller="specialOfferController"] .owl-prev,
[data-ng-controller="searchCarController"] .owl-prev,
[data-ng-controller="PublicCalculatorController"] .owl-prev,
[data-ng-controller="specialOfferController"] .owl-next,
[data-ng-controller="searchCarController"] .owl-next {
    font-size: 25px;
}

[data-ng-controller="specialOfferController"] .owl-next,
[data-ng-controller="PublicCalculatorController"] .owl-next {
    font-size: 25px;
}

/* ---- Demo-shell card (dark left + white right). Used by every form. ---- */
.ew-shell {
    background: var(--ew-ink);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    box-shadow: var(--ew-shadow3);
}

.ew-shell-left {
    padding: 56px 50px;
    position: relative;
    overflow: hidden;
    color: var(--ew-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .ew-shell-left::after {
        content: "";
        position: absolute;
        width: 460px;
        height: 460px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(85, 177, 71, .28), transparent 62%);
        top: -230px;
        left: -120px;
        pointer-events: none;
        z-index: 0;
    }

    .ew-shell-left > * {
        position: relative;
        z-index: 1;
    }

.ew-shell-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(85, 177, 71, .18);
    color: var(--ew-green-pale);
    padding: 6px 14px;
    border-radius: var(--ew-radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    align-self: flex-start;
    margin-bottom: 18px;
}

.ew-shell-left h2 {
    color: var(--ew-white);
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.08;
    letter-spacing: -.022em;
    font-weight: 600;
    margin: 0 0 18px;
}

    .ew-shell-left h2 em {
        font-family: "Instrument Serif", Georgia, serif;
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green);
        font-size: 1.02em;
    }

.ew-shell-left p {
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 24px;
    max-width: 400px;
}

.ew-shell-assure {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .ew-shell-assure li {
        display: flex;
        align-items: flex-start;
        gap: 11px;
        color: rgba(255, 255, 255, .88);
        font-size: 14.5px;
        line-height: 1.4;
    }

        .ew-shell-assure li i {
            color: var(--ew-white);
            font-size: 14px;
            flex: none;
            margin-top: 3px;
        }

.ew-shell-right {
    background: var(--ew-white);
    padding: 44px 46px;
}

.ew-shell-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin: 0 0 8px;
}

.ew-shell-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--ew-ink);
    letter-spacing: -.012em;
    margin: 0 0 22px;
}

/* ---- Field (label + input) ---- */
.ew-shell-field {
    margin-bottom: 16px;
}

    .ew-shell-field label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--ew-muted);
        margin-bottom: 7px;
    }

    .ew-shell-field input,
    .ew-shell-field select,
    .ew-shell-field textarea {
        width: 100%;
        font-family: inherit;
        font-size: 15px;
        font-weight: 500;
        color: var(--ew-ink);
        background: var(--ew-paper);
        border: 1px solid var(--ew-line);
        border-radius: 11px;
        padding: 12px 14px;
        height: auto;
        line-height: 1.4;
        transition: border-color .15s, box-shadow .15s;
    }

    .ew-shell-field select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 38px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6A5C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
    }

        .ew-shell-field input:focus,
        .ew-shell-field select:focus,
        .ew-shell-field textarea:focus {
            outline: none;
            border-color: var(--ew-green);
            box-shadow: 0 0 0 3px var(--ew-green-pale);
        }

.ew-shell-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---- Actions row + supporting bits ---- */
.ew-shell-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ew-shell-submit {
    /*    flex: 1; 
*/ min-width: 0;
}

.ew-shell-fine {
    font-size: 12.5px;
    color: var(--ew-muted);
    margin: 14px 0 0;
    text-align: center;
}

    .ew-shell-fine i {
        color: var(--ew-green);
        margin-right: 4px;
    }

/* ---- Slider rail (ion.rangeSlider re-skinned) ---- */
[data-ng-controller="specialOfferController"] .ew-slider-card,
[data-ng-controller="searchCarController"] .ew-slider-card,
[data-ng-controller="PublicCalculatorController"] .ew-slider-card {
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 18px 22px;
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: 1fr 96px;
    grid-template-areas:
        "label label"
        "slider input";
    gap: 6px 16px;
    align-items: center;
}

    [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-label,
    [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-label,
    [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-label {
        grid-area: label;
        font-size: 12px;
        font-weight: 600;
        color: var(--ew-muted);
        text-transform: uppercase;
        letter-spacing: .08em;
        margin: 0;
    }

    [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-rail,
    [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-rail,
    [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-rail {
        grid-area: slider;
        padding: 16px 0 24px;
        margin: 0;
        min-width: 0;
    }

    [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-input,
    [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-input,
    [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-input {
        grid-area: input;
        justify-self: end;
        width: 96px;
    }

        [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-input input,
        [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-input input,
        [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-input input {
            width: 100%;
            text-align: center;
            background: var(--ew-white);
            border: 1px solid var(--ew-line);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            padding: 8px 10px;
            color: var(--ew-ink);
            font-family: inherit;
            height: auto;
        }

            [data-ng-controller="specialOfferController"] .ew-slider-card .ew-slider-input input:focus,
            [data-ng-controller="searchCarController"] .ew-slider-card .ew-slider-input input:focus,
            [data-ng-controller="PublicCalculatorController"] .ew-slider-card .ew-slider-input input:focus {
                outline: none;
                border-color: var(--ew-green);
                box-shadow: 0 0 0 3px var(--ew-green-pale);
            }

/* ion.rangeSlider plugin overrides */
[data-ng-controller="specialOfferController"] .irs--flat,
[data-ng-controller="searchCarController"] .irs--flat {
    height: 50px;
}

[data-ng-controller="specialOfferController"] .irs--flat,
[data-ng-controller="PublicCalculatorController"] .irs--flat {
    height: 50px;
}

    [data-ng-controller="specialOfferController"] .irs--flat .irs-line,
    [data-ng-controller="searchCarController"] .irs--flat .irs-line,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-line {
        height: 6px;
        background: var(--ew-line);
        border-radius: var(--ew-radius-pill);
        top: 22px;
    }

    [data-ng-controller="specialOfferController"] .irs--flat .irs-bar,
    [data-ng-controller="searchCarController"] .irs--flat .irs-bar,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-bar {
        height: 6px;
        background: var(--ew-green);
        border-radius: var(--ew-radius-pill);
        top: 22px;
    }

    [data-ng-controller="specialOfferController"] .irs--flat .irs-handle,
    [data-ng-controller="searchCarController"] .irs--flat .irs-handle,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-handle {
        top: 15px;
        width: 22px;
        height: 22px;
        border: 0;
        background: transparent;
        cursor: grab;
    }

        [data-ng-controller="specialOfferController"] .irs--flat .irs-handle > i:first-child,
        [data-ng-controller="searchCarController"] .irs--flat .irs-handle > i:first-child,
        [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-handle > i:first-child {
            width: 22px;
            height: 22px;
            background: var(--ew-white);
            border: 3px solid var(--ew-green);
            border-radius: 50%;
            box-shadow: 0 2px 6px rgba(85, 177, 71, .35);
            top: 0;
            left: 0;
            margin-left: 0;
            transition: transform .15s;
        }

        [data-ng-controller="specialOfferController"] .irs--flat .irs-handle:hover > i:first-child,
        [data-ng-controller="searchCarController"] .irs--flat .irs-handle:hover > i:first-child {
            transform: scale(1.15);
        }

        [data-ng-controller="specialOfferController"] .irs--flat .irs-handle:hover > i:first-child,
        [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-handle:hover > i:first-child {
            transform: scale(1.15);
        }

    [data-ng-controller="specialOfferController"] .irs--flat .irs-from,
    [data-ng-controller="searchCarController"] .irs--flat .irs-from,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-from,
    [data-ng-controller="specialOfferController"] .irs--flat .irs-to,
    [data-ng-controller="searchCarController"] .irs--flat .irs-to,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-to,
    [data-ng-controller="specialOfferController"] .irs--flat .irs-single,
    [data-ng-controller="searchCarController"] .irs--flat .irs-single,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-single {
        background-color: var(--ew-ink);
        background-image: none;
        color: #fff;
        padding: 3px 9px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 600;
        font-family: inherit;
        top: -2px; /* sit above the rail/handle, not behind it */
        min-width: 56px; /* enough room for "$500,000" so digits aren't clipped */
        white-space: nowrap;
        text-align: center;
        z-index: 3; /* always render above the white handle circle */
        box-sizing: border-box;
    }

        [data-ng-controller="specialOfferController"] .irs--flat .irs-from::before,
        [data-ng-controller="searchCarController"] .irs--flat .irs-from::before,
        [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-from::before,
        [data-ng-controller="specialOfferController"] .irs--flat .irs-to::before,
        [data-ng-controller="searchCarController"] .irs--flat .irs-to::before,
        [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-to::before,
        [data-ng-controller="specialOfferController"] .irs--flat .irs-single::before,
        [data-ng-controller="searchCarController"] .irs--flat .irs-single::before,
        [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-single::before {
            border-top-color: var(--ew-ink);
        }

    [data-ng-controller="specialOfferController"] .irs--flat .irs-min,
    [data-ng-controller="searchCarController"] .irs--flat .irs-min,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-min,
    [data-ng-controller="specialOfferController"] .irs--flat .irs-max,
    [data-ng-controller="searchCarController"] .irs--flat .irs-max,
    [data-ng-controller="PublicCalculatorController"] .irs--flat .irs-max {
        top: 34px;
        background: transparent;
        color: var(--ew-muted);
        font-size: 10.5px;
        font-family: inherit;
        font-weight: 500;
        padding: 0;
    }

/* ---- Key/value list (Features tab + Specifications accordion bodies) ---- */
[data-ng-controller="specialOfferController"] dl.ew-kv,
[data-ng-controller="searchCarController"] dl.ew-kv,
[data-ng-controller="PublicCalculatorController"] dl.ew-kv {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 1.2fr;
    gap: 0;
    margin: 0;
    padding: 0;
}

    [data-ng-controller="specialOfferController"] dl.ew-kv dt,
    [data-ng-controller="searchCarController"] dl.ew-kv dt,
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv dt,
    [data-ng-controller="specialOfferController"] dl.ew-kv dd,
    [data-ng-controller="searchCarController"] dl.ew-kv dd,
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv dd {
        padding: 10px 0;
        border-bottom: 1px solid var(--ew-line);
        margin: 0;
        font-size: 14.5px;
        line-height: 1.5;
        text-align: left;
    }

    [data-ng-controller="specialOfferController"] dl.ew-kv dt,
    [data-ng-controller="searchCarController"] dl.ew-kv dt,
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv dt {
        color: var(--ew-muted);
        font-weight: 500;
        padding-right: 8px;
        text-align: left;
    }

    [data-ng-controller="specialOfferController"] dl.ew-kv dd,
    [data-ng-controller="searchCarController"] dl.ew-kv dd,
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv dd {
        color: var(--ew-ink);
        font-weight: 600;
    }

    [data-ng-controller="specialOfferController"] dl.ew-kv > dt:nth-last-of-type(1),
    [data-ng-controller="searchCarController"] dl.ew-kv > dt:nth-last-of-type(1),
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv > dt:nth-last-of-type(1),
    [data-ng-controller="specialOfferController"] dl.ew-kv > dd:nth-last-of-type(1),
    [data-ng-controller="searchCarController"] dl.ew-kv > dd:nth-last-of-type(1) {
        border-bottom: 0;
    }

    [data-ng-controller="specialOfferController"] dl.ew-kv > dd:nth-last-of-type(1),
    [data-ng-controller="PublicCalculatorController"] dl.ew-kv > dd:nth-last-of-type(1) {
        border-bottom: 0;
    }

/* General .ew-kv (Privacy Policy contact details, etc.) — same look as the
   calculator-scoped rules above, but works on any page. */
.ew-page dl.ew-kv {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 1.4fr;
    gap: 0;
    margin: 0;
    padding: 0;
}

    .ew-page dl.ew-kv dt,
    .ew-page dl.ew-kv dd {
        padding: 10px 0;
        border-bottom: 1px solid var(--ew-line);
        margin: 0;
        font-size: 14.5px;
        line-height: 1.5;
        text-align: left;
    }

    .ew-page dl.ew-kv dt {
        color: var(--ew-muted);
        font-weight: 500;
        padding-right: 8px;
        text-align: left;
    }

    .ew-page dl.ew-kv dd {
        color: var(--ew-muted);
        font-weight: 500;
        padding-right: 8px;
        text-align: left;
    }

.ew-page .ew-feature-card:not(.ew-feature-card-featured) dl.ew-kv dt {
    color: var(--ew-muted);
}

.ew-page .ew-feature-card:not(.ew-feature-card-featured) dl.ew-kv dd {
    color: var(--ew-ink);
}

.ew-page dl.ew-kv dt:last-of-type,
.ew-page dl.ew-kv dd:last-of-type {
    border-bottom: 0;
}

.ew-page dl.ew-kv a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

    .ew-page dl.ew-kv a:hover {
        color: var(--ew-green);
    }

/* Policy version log table */
.ew-page .ew-policy-table {
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 14.5px;
}

    .ew-page .ew-policy-table th,
    .ew-page .ew-policy-table td {
        padding: 12px 16px;
        border-bottom: 1px solid var(--ew-line);
    }

    .ew-page .ew-policy-table thead th {
        background: var(--ew-paper);
        color: var(--ew-ink);
        font-weight: 600;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-size: 12px;
    }

    .ew-page .ew-policy-table tbody tr:last-child td {
        border-bottom: 0;
    }

/* Sitemap sub-link grouping inside the two big service cards */
.ew-page .ew-sitemap-group + .ew-sitemap-group {
    margin-top: var(--ew-space-3);
    padding-top: var(--ew-space-3);
    border-top: 1px dashed var(--ew-line);
}

.ew-page .ew-feature-card-featured .ew-sitemap-group + .ew-sitemap-group {
    border-top-color: rgba(255,255,255,.18);
}

/* ---- Legacy class fallbacks (HTML still emits these from the Angular workflow) ---- */
[data-ng-controller="specialOfferController"] .EWSecondaryBtn,
[data-ng-controller="searchCarController"] .EWSecondaryBtn,
[data-ng-controller="PublicCalculatorController"] .EWSecondaryBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--ew-ink);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-pill);
    padding: 11px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    line-height: 1.2;
}

    [data-ng-controller="specialOfferController"] .EWSecondaryBtn:hover,
    [data-ng-controller="searchCarController"] .EWSecondaryBtn:hover,
    [data-ng-controller="PublicCalculatorController"] .EWSecondaryBtn:hover {
        border-color: var(--ew-ink);
        background: var(--ew-ink);
        color: var(--ew-white);
        transform: translateY(-1px);
    }

    [data-ng-controller="specialOfferController"] .EWSecondaryBtn[disabled],
    [data-ng-controller="searchCarController"] .EWSecondaryBtn[disabled] {
        opacity: .55;
        cursor: not-allowed;
    }

    [data-ng-controller="specialOfferController"] .EWSecondaryBtn[disabled],
    [data-ng-controller="PublicCalculatorController"] .EWSecondaryBtn[disabled] {
        opacity: .55;
        cursor: not-allowed;
    }

[data-ng-controller="specialOfferController"] .EWNormalBtn,
[data-ng-controller="searchCarController"] .EWNormalBtn,
[data-ng-controller="PublicCalculatorController"] .EWNormalBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ew-green);
    color: var(--ew-ink);
    border: 1px solid var(--ew-green);
    border-radius: var(--ew-radius-pill);
    padding: 12px 26px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
    text-decoration: none;
    box-shadow: 0 1px 0 var(--ew-green-dark);
}

    [data-ng-controller="specialOfferController"] .EWNormalBtn:hover,
    [data-ng-controller="searchCarController"] .EWNormalBtn:hover,
    [data-ng-controller="PublicCalculatorController"] .EWNormalBtn:hover {
        background: var(--ew-green-dark);
        color: var(--ew-white);
        transform: translateY(-1px);
    }

/* Inputs / floating-label */
[data-ng-controller="specialOfferController"] .form-control,
[data-ng-controller="searchCarController"] .form-control,
[data-ng-controller="PublicCalculatorController"] .form-control,
[data-ng-controller="specialOfferController"] .form-control-lg,
[data-ng-controller="searchCarController"] .form-control-lg,
[data-ng-controller="PublicCalculatorController"] .form-control-lg {
    width: 100%;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ew-ink);
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: 11px;
    padding: 11px 14px;
    height: auto;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

[data-ng-controller="specialOfferController"] select.form-control,
[data-ng-controller="searchCarController"] select.form-control,
[data-ng-controller="PublicCalculatorController"] select.form-control,
[data-ng-controller="specialOfferController"] select.form-control-lg,
[data-ng-controller="searchCarController"] select.form-control-lg,
[data-ng-controller="PublicCalculatorController"] select.form-control-lg {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235C6A5C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

[data-ng-controller="specialOfferController"] .form-control:focus,
[data-ng-controller="searchCarController"] .form-control:focus,
[data-ng-controller="PublicCalculatorController"] .form-control:focus,
[data-ng-controller="specialOfferController"] .form-control-lg:focus,
[data-ng-controller="searchCarController"] .form-control-lg:focus,
[data-ng-controller="PublicCalculatorController"] .form-control-lg:focus {
    outline: none;
    border-color: var(--ew-green);
    box-shadow: 0 0 0 3px var(--ew-green-pale);
}

[data-ng-controller="specialOfferController"] textarea.form-control,
[data-ng-controller="searchCarController"] textarea.form-control,
[data-ng-controller="PublicCalculatorController"] textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

[data-ng-controller="specialOfferController"] .label-text,
[data-ng-controller="searchCarController"] .label-text,
[data-ng-controller="PublicCalculatorController"] .label-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--ew-muted);
    margin-bottom: 7px;
    display: block;
}

    [data-ng-controller="specialOfferController"] .label-text span,
    [data-ng-controller="searchCarController"] .label-text span {
        color: #C0392B;
        margin-right: 3px;
    }

    [data-ng-controller="specialOfferController"] .label-text span,
    [data-ng-controller="PublicCalculatorController"] .label-text span {
        color: #C0392B;
        margin-right: 3px;
    }

[data-ng-controller="specialOfferController"] .highlight,
[data-ng-controller="searchCarController"] .highlight {
    display: none;
}

[data-ng-controller="specialOfferController"] .highlight,
[data-ng-controller="PublicCalculatorController"] .highlight {
    display: none;
}

[data-ng-controller="specialOfferController"] .leasing-input-box .price-input-box,
[data-ng-controller="searchCarController"] .leasing-input-box .price-input-box,
[data-ng-controller="PublicCalculatorController"] .leasing-input-box .price-input-box {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 10px;
    max-width: 100px;
}

/* Narrow-search filter strip */
[data-ng-controller="specialOfferController"] .row.form-box,
[data-ng-controller="searchCarController"] .row.form-box,
[data-ng-controller="PublicCalculatorController"] .row.form-box {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    padding: 22px;
    margin: 0 0 20px;
}

[data-ng-controller="specialOfferController"] .car-acc-box,
[data-ng-controller="searchCarController"] .car-acc-box,
[data-ng-controller="PublicCalculatorController"] .car-acc-box {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-pill);
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 14px;
    cursor: pointer;
    transition: all .18s;
}

    [data-ng-controller="specialOfferController"] .car-acc-box:hover,
    [data-ng-controller="searchCarController"] .car-acc-box:hover,
    [data-ng-controller="PublicCalculatorController"] .car-acc-box:hover {
        border-color: var(--ew-green);
        color: var(--ew-green-dark);
    }

    [data-ng-controller="specialOfferController"] .car-acc-box label,
    [data-ng-controller="searchCarController"] .car-acc-box label,
    [data-ng-controller="PublicCalculatorController"] .car-acc-box label,
    [data-ng-controller="specialOfferController"] .car-acc-box .heading04,
    [data-ng-controller="searchCarController"] .car-acc-box .heading04,
    [data-ng-controller="PublicCalculatorController"] .car-acc-box .heading04 {
        font-size: 13.5px;
        font-weight: 500;
        margin: 0;
        cursor: pointer;
        color: inherit;
    }

/* Variant detail spec rows (inside .album-box) */
[data-ng-controller="specialOfferController"] section.album-box .car-acc-box,
[data-ng-controller="searchCarController"] section.album-box .car-acc-box,
[data-ng-controller="PublicCalculatorController"] section.album-box .car-acc-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: var(--ew-radius);
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    width: 100%;
    cursor: default;
}

    [data-ng-controller="specialOfferController"] section.album-box .car-acc-box:hover,
    [data-ng-controller="searchCarController"] section.album-box .car-acc-box:hover,
    [data-ng-controller="PublicCalculatorController"] section.album-box .car-acc-box:hover {
        border-color: var(--ew-line);
        color: var(--ew-ink);
    }

[data-ng-controller="specialOfferController"] .car-acc-box-left,
[data-ng-controller="searchCarController"] .car-acc-box-left,
[data-ng-controller="PublicCalculatorController"] .car-acc-box-left {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

    [data-ng-controller="specialOfferController"] .car-acc-box-left .ESPIcons,
    [data-ng-controller="searchCarController"] .car-acc-box-left .ESPIcons,
    [data-ng-controller="PublicCalculatorController"] .car-acc-box-left .ESPIcons,
    [data-ng-controller="specialOfferController"] .car-acc-box-left .sa,
    [data-ng-controller="searchCarController"] .car-acc-box-left .sa {
        font-size: 16px;
        color: var(--ew-green-dark);
    }

    [data-ng-controller="specialOfferController"] .car-acc-box-left .sa,
    [data-ng-controller="PublicCalculatorController"] .car-acc-box-left .sa {
        font-size: 16px;
        color: var(--ew-green-dark);
    }

[data-ng-controller="specialOfferController"] .car-acc-box-right .BodyText,
[data-ng-controller="searchCarController"] .car-acc-box-right .BodyText,
[data-ng-controller="PublicCalculatorController"] .car-acc-box-right .BodyText {
    font-size: 14px;
    color: var(--ew-ink);
    margin: 0;
}

[data-ng-controller="specialOfferController"] .car-acc-box .calculator-text01,
[data-ng-controller="searchCarController"] .car-acc-box .calculator-text01,
[data-ng-controller="PublicCalculatorController"] .car-acc-box .calculator-text01 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ew-ink);
    margin: 0;
}

/* Result tiles */
[data-ng-controller="specialOfferController"] .car-search-box,
[data-ng-controller="searchCarController"] .car-search-box,
[data-ng-controller="PublicCalculatorController"] .car-search-box {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    transition: all .18s ease;
    text-align: center;
    padding: 16px;
    margin-bottom: 12px;
}

    [data-ng-controller="specialOfferController"] .car-search-box:hover,
    [data-ng-controller="searchCarController"] .car-search-box:hover,
    [data-ng-controller="PublicCalculatorController"] .car-search-box:hover {
        border-color: var(--ew-green);
        transform: translateY(-3px);
        box-shadow: 0 14px 28px -16px rgba(14, 26, 14, .18);
    }

    [data-ng-controller="specialOfferController"] .car-search-box a,
    [data-ng-controller="searchCarController"] .car-search-box a,
    [data-ng-controller="PublicCalculatorController"] .car-search-box a {
        text-decoration: none;
        color: var(--ew-ink);
        display: block;
    }

    [data-ng-controller="specialOfferController"] .car-search-box img,
    [data-ng-controller="searchCarController"] .car-search-box img,
    [data-ng-controller="PublicCalculatorController"] .car-search-box img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 10px;
    }

    [data-ng-controller="specialOfferController"] .car-search-box .label-01,
    [data-ng-controller="searchCarController"] .car-search-box .label-01,
    [data-ng-controller="PublicCalculatorController"] .car-search-box .label-01 {
        font-size: 15px;
        font-weight: 600;
        color: var(--ew-ink);
        letter-spacing: -.01em;
        margin: 0;
        cursor: pointer;
    }

/* Variant detail card text */
[data-ng-controller="specialOfferController"] .car-variant-text01,
[data-ng-controller="searchCarController"] .car-variant-text01,
[data-ng-controller="PublicCalculatorController"] .car-variant-text01 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0 0 6px;
    line-height: 1.3;
}

    [data-ng-controller="specialOfferController"] .car-variant-text01 a,
    [data-ng-controller="searchCarController"] .car-variant-text01 a {
        color: var(--ew-ink);
        text-decoration: none;
    }

    [data-ng-controller="specialOfferController"] .car-variant-text01 a,
    [data-ng-controller="PublicCalculatorController"] .car-variant-text01 a {
        color: var(--ew-ink);
        text-decoration: none;
    }

    [data-ng-controller="specialOfferController"] .car-variant-text01 a:hover,
    [data-ng-controller="searchCarController"] .car-variant-text01 a:hover {
        color: var(--ew-green-dark);
    }

    [data-ng-controller="specialOfferController"] .car-variant-text01 a:hover,
    [data-ng-controller="PublicCalculatorController"] .car-variant-text01 a:hover {
        color: var(--ew-green-dark);
    }

[data-ng-controller="specialOfferController"] .car-variant-text02,
[data-ng-controller="searchCarController"] .car-variant-text02,
[data-ng-controller="PublicCalculatorController"] .car-variant-text02 {
    font-size: 13px;
    color: var(--ew-muted);
    margin: 0 0 10px;
}

    [data-ng-controller="specialOfferController"] .car-variant-text02 span,
    [data-ng-controller="searchCarController"] .car-variant-text02 span,
    [data-ng-controller="PublicCalculatorController"] .car-variant-text02 span {
        font-size: 18px;
        color: var(--ew-green-dark);
        font-weight: 700;
        display: block;
        margin-bottom: 2px;
    }

[data-ng-controller="specialOfferController"] .car-variant-text03,
[data-ng-controller="searchCarController"] .car-variant-text03,
[data-ng-controller="PublicCalculatorController"] .car-variant-text03 {
    font-size: 13px;
    color: var(--ew-muted);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    [data-ng-controller="specialOfferController"] .car-variant-text03 .fa-star,
    [data-ng-controller="searchCarController"] .car-variant-text03 .fa-star {
        color: var(--ew-green);
        font-size: 11px;
    }

    [data-ng-controller="specialOfferController"] .car-variant-text03 .fa-star,
    [data-ng-controller="PublicCalculatorController"] .car-variant-text03 .fa-star {
        color: var(--ew-green);
        font-size: 11px;
    }

/* Album wrapper */
[data-ng-controller="specialOfferController"] section.album-box,
[data-ng-controller="searchCarController"] section.album-box,
[data-ng-controller="PublicCalculatorController"] section.album-box {
    background: var(--ew-paper);
    border-radius: var(--ew-radius-lg);
    padding: 32px;
    margin: 0 0 24px;
    border: 1px solid var(--ew-line);
}

    [data-ng-controller="specialOfferController"] section.album-box.searchCarSection,
    [data-ng-controller="searchCarController"] section.album-box.searchCarSection {
        background: var(--ew-white);
    }

    [data-ng-controller="specialOfferController"] section.album-box.searchCarSection,
    [data-ng-controller="PublicCalculatorController"] section.album-box.searchCarSection {
        background: var(--ew-white);
    }

/* Tabs (Submit / Features / Specifications) */
[data-ng-controller="specialOfferController"] #CarSearechTabs,
[data-ng-controller="searchCarController"] #CarSearechTabs,
[data-ng-controller="PublicCalculatorController"] #CarSearechTabs {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 32px;
}

[data-ng-controller="specialOfferController"] ul.tabs,
[data-ng-controller="searchCarController"] ul.tabs,
[data-ng-controller="PublicCalculatorController"] ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

    [data-ng-controller="specialOfferController"] ul.tabs li,
    [data-ng-controller="searchCarController"] ul.tabs li,
    [data-ng-controller="PublicCalculatorController"] ul.tabs li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 22px;
        border-radius: var(--ew-radius-pill);
        border: 1.5px solid var(--ew-line);
        background: var(--ew-white);
        color: var(--ew-muted);
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
        transition: all .2s;
        flex: 0 0 auto;
    }

        [data-ng-controller="specialOfferController"] ul.tabs li:hover,
        [data-ng-controller="searchCarController"] ul.tabs li:hover {
            border-color: var(--ew-green);
            color: var(--ew-green-dark);
        }

        [data-ng-controller="specialOfferController"] ul.tabs li:hover,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li:hover {
            border-color: var(--ew-green);
            color: var(--ew-green-dark);
        }

        [data-ng-controller="specialOfferController"] ul.tabs li.active,
        [data-ng-controller="searchCarController"] ul.tabs li.active,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li.active {
            background: var(--ew-green);
            border-color: var(--ew-green);
            color: var(--ew-white);
        }

        [data-ng-controller="specialOfferController"] ul.tabs li::before,
        [data-ng-controller="searchCarController"] ul.tabs li::before,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li::before {
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 12px;
            display: inline-block;
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab1"]::before,
        [data-ng-controller="searchCarController"] ul.tabs li[rel="tab1"]::before {
            content: "\f0e0";
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab1"]::before,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li[rel="tab1"]::before {
            content: "\f0e0";
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab2"]::before,
        [data-ng-controller="searchCarController"] ul.tabs li[rel="tab2"]::before {
            content: "\f005";
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab2"]::before,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li[rel="tab2"]::before {
            content: "\f005";
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab3"]::before,
        [data-ng-controller="searchCarController"] ul.tabs li[rel="tab3"]::before {
            content: "\f085";
        }

        [data-ng-controller="specialOfferController"] ul.tabs li[rel="tab3"]::before,
        [data-ng-controller="PublicCalculatorController"] ul.tabs li[rel="tab3"]::before {
            content: "\f085";
        }

[data-ng-controller="specialOfferController"] .tab_container,
[data-ng-controller="searchCarController"] .tab_container,
[data-ng-controller="PublicCalculatorController"] .tab_container {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

[data-ng-controller="specialOfferController"] .tab_drawer_heading,
[data-ng-controller="searchCarController"] .tab_drawer_heading {
    display: none;
}

[data-ng-controller="specialOfferController"] .tab_drawer_heading,
[data-ng-controller="PublicCalculatorController"] .tab_drawer_heading {
    display: none;
}

/* Pillar panels — strip 2-col grid on the search page */
[data-ng-controller="specialOfferController"] .ew-pillars-section,
[data-ng-controller="searchCarController"] .ew-pillars-section {
    padding: 0;
    background: transparent;
}

[data-ng-controller="specialOfferController"] .ew-pillars-section,
[data-ng-controller="PublicCalculatorController"] .ew-pillars-section {
    padding: 0;
    background: transparent;
}

[data-ng-controller="specialOfferController"] .ew-pillars-section > .container,
[data-ng-controller="searchCarController"] .ew-pillars-section > .container {
    padding: 0;
}

[data-ng-controller="specialOfferController"] .ew-pillars-section > .container,
[data-ng-controller="PublicCalculatorController"] .ew-pillars-section > .container {
    padding: 0;
}

[data-ng-controller="specialOfferController"] .ew-pillar-panels,
[data-ng-controller="searchCarController"] .ew-pillar-panels {
    display: block;
}

[data-ng-controller="specialOfferController"] .ew-pillar-panels,
[data-ng-controller="PublicCalculatorController"] .ew-pillar-panels {
    display: block;
}

[data-ng-controller="specialOfferController"] .ew-pillar-panel,
[data-ng-controller="searchCarController"] .ew-pillar-panel,
[data-ng-controller="PublicCalculatorController"] .ew-pillar-panel {
    display: none;
    grid-template-columns: none;
    gap: 0;
}

    [data-ng-controller="specialOfferController"] .ew-pillar-panel.active,
    [data-ng-controller="searchCarController"] .ew-pillar-panel.active {
        display: block;
    }

    [data-ng-controller="specialOfferController"] .ew-pillar-panel.active,
    [data-ng-controller="PublicCalculatorController"] .ew-pillar-panel.active {
        display: block;
    }

/* Flexslider gallery */
[data-ng-controller="specialOfferController"] .flexslider,
[data-ng-controller="searchCarController"] .flexslider,
[data-ng-controller="PublicCalculatorController"] .flexslider {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    box-shadow: none;
}

[data-ng-controller="specialOfferController"] #carousel.flexslider,
[data-ng-controller="searchCarController"] #carousel.flexslider,
[data-ng-controller="PublicCalculatorController"] #carousel.flexslider {
    background: transparent;
    border: 0;
    margin-top: 12px;
}

[data-ng-controller="specialOfferController"] #carousel li img,
[data-ng-controller="searchCarController"] #carousel li img,
[data-ng-controller="PublicCalculatorController"] #carousel li img {
    border-radius: 8px;
    border: 0;
}

[data-ng-controller="specialOfferController"] #carousel .flex-active-slide img,
[data-ng-controller="searchCarController"] #carousel .flex-active-slide img {
    border-color: var(--ew-green);
}

[data-ng-controller="specialOfferController"] #carousel .flex-active-slide img,
[data-ng-controller="PublicCalculatorController"] #carousel .flex-active-slide img {
    border-color: var(--ew-green);
}

[data-ng-controller="specialOfferController"] .flex-direction-nav a,
[data-ng-controller="searchCarController"] .flex-direction-nav a,
[data-ng-controller="PublicCalculatorController"] .flex-direction-nav a {
    background: rgba(255, 255, 255, .92);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    text-shadow: none;
    color: var(--ew-ink);
}

/* Enquiry detail form (legacy .contact-form-box) */
[data-ng-controller="specialOfferController"] .contact-form-box,
[data-ng-controller="searchCarController"] .contact-form-box,
[data-ng-controller="PublicCalculatorController"] .contact-form-box {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-lg);
    padding: 32px;
}

[data-ng-controller="specialOfferController"] .summary-details-heading,
[data-ng-controller="searchCarController"] .summary-details-heading,
[data-ng-controller="PublicCalculatorController"] .summary-details-heading,
[data-ng-controller="specialOfferController"] .cal-heading,
[data-ng-controller="searchCarController"] .cal-heading,
[data-ng-controller="PublicCalculatorController"] .cal-heading {
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--ew-ink);
    margin: 0 0 18px;
    letter-spacing: -.01em;
}

[data-ng-controller="specialOfferController"] section.summary-section,
[data-ng-controller="searchCarController"] section.summary-section {
    background: transparent;
}

[data-ng-controller="specialOfferController"] section.summary-section,
[data-ng-controller="PublicCalculatorController"] section.summary-section {
    background: transparent;
}

/* Neutralise legacy float + fixed-width container on summary-section so the
   footer / following content does not get pushed off to the right when the
   Salary Packaging Summary panel becomes visible after Calculate. */
[data-ng-controller="specialOfferController"] section.summary-section,
[data-ng-controller="searchCarController"] section.summary-section,
[data-ng-controller="PublicCalculatorController"] section.summary-section {
    float: none;
    width: auto;
    display: block;
    clear: both;
    overflow: hidden; /* contain inner floats (.summary-box, .summary-box-in) */
}

    [data-ng-controller="specialOfferController"] section.summary-section .container,
    [data-ng-controller="searchCarController"] section.summary-section .container,
    [data-ng-controller="PublicCalculatorController"] section.summary-section .container {
        width: auto;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

[data-ng-controller="specialOfferController"] .summary-box,
[data-ng-controller="searchCarController"] .summary-box,
[data-ng-controller="PublicCalculatorController"] .summary-box {
    float: none;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--ew-radius-lg);
    padding: 32px;
    margin: 0 0 24px;
    border: 1px solid var(--ew-line);
}

[data-ng-controller="specialOfferController"] .summary-box-in,
[data-ng-controller="searchCarController"] .summary-box-in,
[data-ng-controller="PublicCalculatorController"] .summary-box-in {
    float: none;
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0; /* allow shrinking so 3 cols fit without overflow */
}

/* ============================================================
   "Click to select benefits" trigger — reuses field/btn rhythm so
   the long label + caret fit comfortably on a single line even
   inside narrow form columns.
============================================================ */
[data-ng-controller="specialOfferController"] .benefit-listing-button-box,
[data-ng-controller="searchCarController"] .benefit-listing-button-box,
[data-ng-controller="PublicCalculatorController"] .benefit-listing-button-box {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
    background: var(--ew-white);
    color: var(--ew-ink);
    border: 1px solid var(--ew-line);
    border-bottom: 1px solid var(--ew-line);
    border-radius: var(--ew-radius-pill);
    padding: 12px 22px;
    height: auto;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    margin: 0 0 12px 0;
}

    [data-ng-controller="specialOfferController"] .benefit-listing-button-box:hover,
    [data-ng-controller="searchCarController"] .benefit-listing-button-box:hover,
    [data-ng-controller="PublicCalculatorController"] .benefit-listing-button-box:hover {
        border-color: var(--ew-green);
        box-shadow: 0 0 0 3px var(--ew-green-pale);
    }

    [data-ng-controller="specialOfferController"] .benefit-listing-button-box .fa-caret-down,
    [data-ng-controller="searchCarController"] .benefit-listing-button-box .fa-caret-down,
    [data-ng-controller="PublicCalculatorController"] .benefit-listing-button-box .fa-caret-down {
        position: static; /* override legacy absolute positioning */
        top: auto;
        right: auto;
        color: var(--ew-green);
        font-size: 14px;
    }

/* ============================================================
   SALARY PACKAGING SUMMARY — restyle so the 3 outcome cards
   read like the rest of the design (.ew-feature-row / .ew-feature-card).
   Scoped to PublicCalculatorController + searchCarController so the
   change doesn't leak to other pages that may also use .summary-box.
============================================================ */
[data-ng-controller="specialOfferController"] .ew-summary-section,
[data-ng-controller="searchCarController"] .ew-summary-section,
[data-ng-controller="PublicCalculatorController"] .ew-summary-section {
    background: transparent;
    padding: var(--ew-space-6) 0 var(--ew-space-4);
}

    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-section-head,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-section-head,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-section-head {
        margin-bottom: var(--ew-space-5);
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section .ew-section-head h2,
        [data-ng-controller="searchCarController"] .ew-summary-section .ew-section-head h2,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-section-head h2 {
            margin: 8px 0 6px;
        }

        [data-ng-controller="specialOfferController"] .ew-summary-section .ew-section-head p,
        [data-ng-controller="searchCarController"] .ew-summary-section .ew-section-head p,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-section-head p {
            color: var(--ew-muted);
            font-size: 15px;
            margin: 0;
        }

    /* Strip the legacy .summary-box border/padding so the new card grid
   defines the look. Use flex (more robust than grid here because the
   legacy stylesheet keeps mutating .summary-box-in widths in 5+ media
   queries — flex with `flex: 1 1 0` wins consistently). */
    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-box,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-box,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-box {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 22px !important;
        align-items: stretch !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-box-in,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-box-in,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-box-in {
        /* All three cards share width equally — `flex: 1 1 0` makes them
       grow to fill the row, ignoring the legacy `width: 33.33%`. */
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        float: none !important;
        min-width: 0 !important;
        min-height: 0 !important; /* drop the 471px legacy min-height */
        padding: 28px 24px !important;
        border: 1px solid var(--ew-line);
        border-radius: var(--ew-radius-lg);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        box-sizing: border-box;
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section .summary-box-in.border-right,
        [data-ng-controller="searchCarController"] .ew-summary-section .summary-box-in.border-right,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-box-in.border-right {
            border-right: 1px solid var(--ew-line); /* keep border on all sides, override skinny "border-right only" legacy */
        }

    /* Featured card (Tax savings) — dark pitch panel, same as ew-shell-left */
    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-feature-card-featured,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-feature-card-featured,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-feature-card-featured {
        background: var(--ew-ink);
        color: #fff;
        border-color: var(--ew-ink);
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section .ew-feature-card-featured h3,
        [data-ng-controller="searchCarController"] .ew-summary-section .ew-feature-card-featured h3,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-feature-card-featured h3 {
            color: #fff;
        }

    /* Stat labels + values inside the featured card */
    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-stat-label,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-stat-label,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-stat-label {
        color: rgba(255,255,255,.78);
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 4px;
        letter-spacing: .01em;
    }

    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-stat-value,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-stat-value,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-stat-value {
        color: #fff;
        font-size: 22px;
        line-height: 1.2;
        margin: 0 0 var(--ew-space-3);
        letter-spacing: -.01em;
    }

    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-stat-select,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-stat-select,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-stat-select {
        display: inline-block;
        width: auto;
        background: rgba(255,255,255,.08);
        color: #fff;
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
        padding: 4px 10px;
        margin-left: 6px;
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section .ew-stat-select option,
        [data-ng-controller="searchCarController"] .ew-summary-section .ew-stat-select option,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-stat-select option {
            color: var(--ew-ink);
        }

    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-card-cta,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-card-cta,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-card-cta {
        margin-top: auto; /* pin CTA to bottom of card */
        padding-top: var(--ew-space-3);
    }

    /* Middle card (chart) + right card (car CTA) — light feature cards */
    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) h3,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) h3,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) h3 {
        margin: 6px 0 8px;
    }

    [data-ng-controller="specialOfferController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) > p,
    [data-ng-controller="searchCarController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) > p,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .ew-feature-card:not(.ew-feature-card-featured) > p {
        color: var(--ew-muted);
        font-size: 14px;
        margin: 0 0 var(--ew-space-3);
    }

    /* Chart container — Google Charts draws an SVG at fixed pixel dimensions
   determined at draw time. We clip overflow and force the inner div + SVG
   to fit the card width so both bars are always visible. */
    [data-ng-controller="specialOfferController"] .ew-summary-section #graphContainer,
    [data-ng-controller="searchCarController"] .ew-summary-section #graphContainer,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section #graphContainer {
        width: 100% !important;
        max-width: 100%;
        min-height: 280px;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section #graphContainer > div,
        [data-ng-controller="searchCarController"] .ew-summary-section #graphContainer > div,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section #graphContainer > div {
            width: 100% !important;
            max-width: 100% !important;
        }

        [data-ng-controller="specialOfferController"] .ew-summary-section #graphContainer svg,
        [data-ng-controller="searchCarController"] .ew-summary-section #graphContainer svg,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section #graphContainer svg {
            width: 100% !important;
            height: auto !important;
            max-width: 100%;
            display: block;
        }

    [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph,
    [data-ng-controller="searchCarController"] .ew-summary-section #dvGraph,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section #dvGraph {
        margin: 0;
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .col-sm-12,
        [data-ng-controller="searchCarController"] .ew-summary-section #dvGraph .col-sm-12,
        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .form-horizontal,
        [data-ng-controller="searchCarController"] .ew-summary-section #dvGraph .form-horizontal,
        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .squarebox_wrapplist,
        [data-ng-controller="searchCarController"] .ew-summary-section #dvGraph .squarebox_wrapplist,
        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .col-sm-12,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section #dvGraph .col-sm-12,
        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .form-horizontal,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section #dvGraph .form-horizontal,
        [data-ng-controller="specialOfferController"] .ew-summary-section #dvGraph .squarebox_wrapplist,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section #dvGraph .squarebox_wrapplist {
            padding-left: 0;
            padding-right: 0;
            width: 100%;
            max-width: 100%;
        }

    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-map-box,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-map-box,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-map-box {
        margin-top: auto; /* push chart toward bottom of card */
        width: 100%;
    }

    /* Car image card */
    [data-ng-controller="specialOfferController"] .ew-summary-section .summary-car-image-box,
    [data-ng-controller="searchCarController"] .ew-summary-section .summary-car-image-box,
    [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-car-image-box {
        width: 100%;
        max-width: 100%; /* fill card, not 220px capped */
        margin: var(--ew-space-3) 0;
        aspect-ratio: 16 / 10;
        border-radius: var(--ew-radius);
        overflow: hidden;
        background: var(--ew-paper);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

        [data-ng-controller="specialOfferController"] .ew-summary-section .summary-car-image-box img,
        [data-ng-controller="searchCarController"] .ew-summary-section .summary-car-image-box img,
        [data-ng-controller="PublicCalculatorController"] .ew-summary-section .summary-car-image-box img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* fill the frame; source image is squarish */
            object-position: center;
        }

/* Alerts / modals */
[data-ng-controller="specialOfferController"] .alert-danger,
[data-ng-controller="searchCarController"] .alert-danger,
[data-ng-controller="PublicCalculatorController"] .alert-danger {
    background: #FDECEA;
    border: 1px solid #F5C9C4;
    color: #8E2A21;
    border-radius: var(--ew-radius);
    padding: 14px 18px;
    font-size: 14px;
}

    [data-ng-controller="specialOfferController"] .alert-danger ul,
    [data-ng-controller="searchCarController"] .alert-danger ul {
        margin: 4px 0 0;
        padding-left: 18px;
    }

    [data-ng-controller="specialOfferController"] .alert-danger ul,
    [data-ng-controller="PublicCalculatorController"] .alert-danger ul {
        margin: 4px 0 0;
        padding-left: 18px;
    }

[data-ng-controller="specialOfferController"] .modal-content,
[data-ng-controller="searchCarController"] .modal-content,
[data-ng-controller="PublicCalculatorController"] .modal-content {
    border-radius: var(--ew-radius-lg);
    border: 1px solid var(--ew-line);
}

[data-ng-controller="specialOfferController"] .modal-body,
[data-ng-controller="searchCarController"] .modal-body {
    padding: 28px;
}

[data-ng-controller="specialOfferController"] .modal-body,
[data-ng-controller="PublicCalculatorController"] .modal-body {
    padding: 28px;
}

[data-ng-controller="specialOfferController"] .swal-title,
[data-ng-controller="searchCarController"] .swal-title,
[data-ng-controller="PublicCalculatorController"] .swal-title {
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    color: var(--ew-ink);
}

[data-ng-controller="specialOfferController"] .swal-text,
[data-ng-controller="searchCarController"] .swal-text {
    color: var(--ew-muted);
    font-size: 14.5px;
}

[data-ng-controller="specialOfferController"] .swal-text,
[data-ng-controller="PublicCalculatorController"] .swal-text {
    color: var(--ew-muted);
    font-size: 14.5px;
}

[data-ng-controller="specialOfferController"] .swal-button,
[data-ng-controller="searchCarController"] .swal-button,
[data-ng-controller="PublicCalculatorController"] .swal-button {
    background: var(--ew-green);
    color: var(--ew-ink);
    border-radius: var(--ew-radius-pill);
    padding: 11px 26px;
    font-family: inherit;
    font-weight: 600;
    border: 0;
    cursor: pointer;
}

    [data-ng-controller="specialOfferController"] .swal-button:hover,
    [data-ng-controller="searchCarController"] .swal-button:hover {
        background: var(--ew-green-dark);
        color: #fff;
    }

    [data-ng-controller="specialOfferController"] .swal-button:hover,
    [data-ng-controller="PublicCalculatorController"] .swal-button:hover {
        background: var(--ew-green-dark);
        color: #fff;
    }

/* Breadcrumbs in inner sections */
[data-ng-controller="specialOfferController"] .album-box .BodyText.fw-bold,
[data-ng-controller="searchCarController"] .album-box .BodyText.fw-bold,
[data-ng-controller="PublicCalculatorController"] .album-box .BodyText.fw-bold,
[data-ng-controller="specialOfferController"] .album-box .BodyText.fw-bold a,
[data-ng-controller="searchCarController"] .album-box .BodyText.fw-bold a,
[data-ng-controller="PublicCalculatorController"] .album-box .BodyText.fw-bold a {
    color: var(--ew-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

    [data-ng-controller="specialOfferController"] .album-box .BodyText.fw-bold a:hover,
    [data-ng-controller="searchCarController"] .album-box .BodyText.fw-bold a:hover {
        color: var(--ew-green-dark);
    }

    [data-ng-controller="specialOfferController"] .album-box .BodyText.fw-bold a:hover,
    [data-ng-controller="PublicCalculatorController"] .album-box .BodyText.fw-bold a:hover {
        color: var(--ew-green-dark);
    }

[data-ng-controller="specialOfferController"] .BreadcrumbIcon,
[data-ng-controller="searchCarController"] .BreadcrumbIcon,
[data-ng-controller="PublicCalculatorController"] .BreadcrumbIcon {
    color: var(--ew-muted);
    margin: 0 6px;
    font-size: 12px;
}

[data-ng-controller="specialOfferController"] .child-text,
[data-ng-controller="searchCarController"] .child-text,
[data-ng-controller="PublicCalculatorController"] .child-text {
    color: var(--ew-muted);
    font-weight: 500;
}

/* Empty-state ("No record to display") */
[data-ng-controller="specialOfferController"] .col-lg-6 > span,
[data-ng-controller="searchCarController"] .col-lg-6 > span,
[data-ng-controller="PublicCalculatorController"] .col-lg-6 > span,
[data-ng-controller="specialOfferController"] .col-lg-10 > span,
[data-ng-controller="searchCarController"] .col-lg-10 > span,
[data-ng-controller="PublicCalculatorController"] .col-lg-10 > span {
    display: block;
    padding: 28px;
    background: var(--ew-paper);
    border: 1px dashed var(--ew-line);
    border-radius: var(--ew-radius);
    text-align: center;
    color: var(--ew-muted);
    font-size: 14px;
}

.irs-from, .irs-to, .irs-single {
    top: -12px !important;
}

.article-listing ul li a {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ew-muted);
    margin-bottom: 18px;
}

#divShowcase .wrapper_box,
#divArticle .wrapper_box {
    margin-bottom: 0;
}
/* ============================================================
   SHOWCASE / ARTICLES grid — responsive 2-up (1-up on mobile)
   Overrides the legacy `.wrapper_box` width so cards sit
   correctly inside Bootstrap 5 row-cols-* utility rows.
   ============================================================ */
.ew-showcase-grid > .wrapper_box,
.ew-showcase-grid > .col {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.ew-feature-card h3 {
    font-weight: normal;
}
/* ============================================================
   SoftwareAsAService — SaaS landing page
   Reuses .ew-intro-section, .ew-section--paper, .ew-section--ink,
   .ew-section-head, .ew-pill, .ew-feature-row, .ew-feature-card,
   .ew-ind-grid, .ew-ind-card, .ew-compare-grid, .ew-compare-card,
   .ew-checklist, .ew-testimonial-card, .ew-steps-section,
   .ew-shell (left+right form panel), .ew-faq-list, .ew-final-cta,
   .ew-btn variants — and adds only what's truly unique below:
   (1) the payroll-console product mockup, (2) the trust strip,
   (3) page-scoped dark-card variant for the problem section.
   All media queries for this page live in stylesheet2026-media.css.
============================================================ */

/* Hero compliance note — slim variant of .ew-shell-fine outside the shell */
.ew-saas-page .ew-saas-hero-note {
    margin-top: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ----- Trust strip ----- */
.ew-saas-trust {
    padding: 36px 0;
    border-top: 1px solid var(--ew-line);
    border-bottom: 1px solid var(--ew-line);
}

.ew-saas-trust-lead {
    font-size: 13px;
    color: var(--ew-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.ew-saas-trust-chips {
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 12px;
}

/* ----- Page-scoped dark variant for problem cards in .ew-section--ink ----- */
.ew-saas-page .ew-section--ink .ew-feature-card {
    background: rgba(255,255,255,.04);
    border-color: rgba(255,255,255,.1);
    color: #DCE6D7;
}

    .ew-saas-page .ew-section--ink .ew-feature-card:hover {
        background: rgba(85,177,71,.08);
        border-color: rgba(85,177,71,.35);
    }

    .ew-saas-page .ew-section--ink .ew-feature-card h3 {
        color: #fff;
    }

    .ew-saas-page .ew-section--ink .ew-feature-card > p {
        color: #A9B6A6;
    }

    .ew-saas-page .ew-section--ink .ew-feature-card .ew-pill em {
        font-style: italic;
        font-size: 16px;
    }

/* ----- Restore 3-col rhythm for problem cards on this page,
        overriding the 4-col .ew-feature-row tail rule. ----- */
.ew-saas-page .ew-section--ink .ew-feature-row {
    grid-template-columns: repeat(3, 1fr);
}

/* ----- prob-card variant: 3-up row that AUTO-CENTRES its last row.
        Grid lays orphan cards flush-left; flex with justify-content: center
        leaves any partial last row horizontally centred. Works for any
        item count — 4 cards centre the 4th, 5 cards centre the trailing 2,
        7 cards centre the trailing 1, etc. The explicit flex-basis matches
        the 3-col grid track width so a full row of 3 still looks identical
        to the old grid layout. ----- */
.ew-feature-row.prob-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

    .ew-feature-row.prob-card > .ew-feature-card {
        flex: 0 1 calc((100% - 2 * 22px) / 3);
        min-width: 240px;
    }

/* ----- Payroll console product mock (hero right) ----- */
.ew-saas-mock {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    box-shadow: 0 30px 60px -28px rgba(14,26,14,.28), 0 2px 0 rgba(14,26,14,.02);
    padding: 20px;
    position: relative;
}

.ew-saas-mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 16px;
}

    .ew-saas-mock-bar i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ew-line);
        display: block;
    }

    .ew-saas-mock-bar span {
        margin-left: 10px;
        font-size: 12px;
        color: var(--ew-muted);
    }

.ew-saas-mock-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ew-saas-mc {
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    padding: 15px 16px;
}

.ew-saas-mc-label {
    font-size: 11.5px;
    color: var(--ew-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ew-saas-mc-val {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    margin-top: 6px;
    color: var(--ew-ink);
}

    .ew-saas-mc-val small {
        font-size: 13px;
        color: var(--ew-muted);
        font-weight: 400;
    }

.ew-saas-mc-status {
    font-weight: 600;
    margin-top: 4px;
    color: var(--ew-ink);
    font-size: 15px;
}

.ew-saas-mc-wide {
    grid-column: 1 / -1;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ew-saas-pill {
    font-size: 12px;
    font-weight: 500;
    padding: 5px 11px;
    border-radius: 100px;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ew-saas-pill i {
        font-size: 6px;
        color: var(--ew-green);
    }

.ew-saas-tracker {
    margin-top: 14px;
    background: var(--ew-ink);
    border-radius: 14px;
    padding: 16px;
    color: #EAF0E6;
}

.ew-saas-tracker-top {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #A9B6A6;
}

    .ew-saas-tracker-top b {
        color: #fff;
        font-weight: 500;
    }

.ew-saas-track {
    margin-top: 13px;
    display: flex;
    gap: 6px;
}

.ew-saas-seg {
    height: 5px;
    border-radius: 4px;
    flex: 1;
    background: #26352A;
}

    .ew-saas-seg.on {
        background: var(--ew-green);
    }

.ew-saas-tracker-foot {
    margin-top: 11px;
    font-size: 12px;
    color: #A9B6A6;
}

    .ew-saas-tracker-foot b {
        color: var(--ew-green);
    }

.ew-saas-float-tag {
    position: absolute;
    right: -14px;
    bottom: 34px;
    background: #fff;
    border: 1px solid var(--ew-line);
    border-radius: 12px;
    padding: 11px 14px;
    box-shadow: 0 14px 30px -16px rgba(14,26,14,.3);
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ew-ink);
}

    .ew-saas-float-tag .tk {
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: var(--ew-green-pale);
        display: grid;
        place-items: center;
        color: var(--ew-green-dark);
        font-size: 11px;
    }

/* ----- .ew-checklist crosses variant (used in the compare card on the left)
        — same layout as .ew-checklist, just neutral grey instead of green. ----- */
.ew-checklist.ew-checklist--x .ck {
    background: rgba(0,0,0,.06);
    color: var(--ew-muted);
}

.summary-output-box-inner {
    font-size: 16px;
    color: var(--ew-ink);
}

.ew-checklist .ck {
    /*    background: none;
*/
}

.prob-card .n {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-size: 34px;
    color: var(--ew-green);
    line-height: 1;
}

/* ============================================================
   AboutUs — stats strip + team tabs/grid
   Scoped under .ew-about-page so no leak elsewhere.
   Reuses existing .ew-page, .ew-intro-section, .ew-section--ink/--paper/--white,
   .ew-section-head, .ew-pill, .ew-ind-grid, .ew-ind-card, .ew-final-cta.
============================================================ */

/* ----- Stats strip (numbers + label) ----- */
.ew-about-page .ew-stat-num {
    font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
    font-size: clamp(36px, 4.6vw, 54px);
    line-height: 1;
    letter-spacing: -.01em;
    color: var(--ew-ink);
}

    .ew-about-page .ew-stat-num em {
        font-style: italic;
        color: var(--ew-green-dark);
    }

.ew-about-page .ew-stat-lbl {
    font-size: 14px;
    color: var(--ew-muted);
    margin: 10px 0 0;
    max-width: 220px;
    line-height: 1.5;
}

/* ----- Story dark section eyebrow + headings on dark ----- */
.ew-about-page .ew-section--ink h2 em {
    color: var(--ew-green-lt);
    font-style: italic;
}

.ew-about-page .ew-section--ink p {
    color: rgba(255,255,255,.78);
    line-height: 1.7;
    font-size: 16px;
}

    .ew-about-page .ew-section--ink p + p {
        margin-top: 18px;
    }

.ew-about-page .ew-section--ink strong {
    color: #DCE6D7;
}

/* ----- Team filter tabs ----- */
.ew-about-page .ew-team-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ew-line);
}

.ew-about-page .ew-team-tab {
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ew-muted);
    padding: 9px 16px;
    border-radius: 999px;
    transition: color .15s, background .15s, border-color .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ew-about-page .ew-team-tab:hover {
        color: var(--ew-ink);
    }

    .ew-about-page .ew-team-tab.is-active {
        color: #08210A;
        background: var(--ew-green);
    }

.ew-about-page .ew-team-tc {
    font-size: 12px;
    opacity: .75;
    margin-left: 4px;
}

.ew-about-page .ew-team-tab.is-active .ew-team-tc {
    opacity: 1;
}

/* ----- Team grid — flexbox so any orphan cards on the last row
   auto-centre horizontally (grid's auto-fill would leave them
   dangling flush-left). Each card has a fixed flex-basis of
   ~196px, letting the row pack as many as fit while keeping card
   width predictable across breakpoints. ----- */
.ew-about-page .ew-team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}

.ew-about-page .ew-team-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display: flex;
    flex-direction: column;
    /* Track ~196px per card; won't grow (so wide desktops stay uniform),
       may shrink slightly to fit narrow viewports. min-width prevents the
       card from collapsing past a readable size. */
    flex: 0 1 196px;
    min-width: 196px;
    max-width: 240px;
}

    .ew-about-page .ew-team-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 34px -20px rgba(14, 26, 14, .32);
        border-color: #D3DBCB;
    }

/* photo (aspect 1:1 — image fills, initials center) */
.ew-about-page .ew-team-photo {
    aspect-ratio: 1 / 1;
    background: var(--ew-green-pale);
    margin: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

    .ew-about-page .ew-team-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.ew-about-page .ew-team-photo--initials {
    background: var(--ew-green-pale);
}

    .ew-about-page .ew-team-photo--initials span {
        font-family: var(--font-serif, "Instrument Serif", Georgia, serif);
        font-style: italic;
        font-size: clamp(34px, 5vw, 46px);
        color: var(--ew-green-dark);
        line-height: 1;
    }

.ew-about-page .ew-team-card.is-lead .ew-team-photo--initials {
    background: var(--ew-ink);
}

    .ew-about-page .ew-team-card.is-lead .ew-team-photo--initials span {
        color: var(--ew-green);
    }

.ew-about-page .ew-team-photo--vacant {
    background: repeating-linear-gradient(135deg, var(--ew-paper), var(--ew-paper) 9px, var(--ew-white) 9px, var(--ew-white) 18px);
}

    .ew-about-page .ew-team-photo--vacant span {
        font-family: var(--font-sans, "Geist", -apple-system, sans-serif);
        font-style: normal;
        font-weight: 300;
        font-size: 48px;
        color: var(--ew-muted);
    }

/* info */
.ew-about-page .ew-team-info {
    padding: 15px 16px 17px;
}

    .ew-about-page .ew-team-info h4 {
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -.01em;
        line-height: 1.2;
        color: var(--ew-ink);
        margin: 0;
    }

    .ew-about-page .ew-team-info p {
        font-size: 13px;
        color: var(--ew-muted);
        margin: 5px 0 0;
        line-height: 1.35;
    }

.ew-about-page .ew-team-state {
    display: inline-block;
    margin-top: 9px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    background: var(--ew-green-pale);
    padding: 3px 9px;
    border-radius: 999px;
}

/* lead variant accent */
.ew-about-page .ew-team-card.is-lead {
    border-color: #D3DBCB;
}

/* vacant variant */
.ew-about-page .ew-team-card.is-vacant {
    border-style: dashed;
}

    .ew-about-page .ew-team-card.is-vacant .ew-team-info h4 {
        color: var(--ew-muted);
    }

/* ----- Locations pill band ----- */
.ew-about-page .ew-about-locations {
    flex-wrap: wrap;
    gap: 10px 12px;
    justify-content: center;
    margin-top: var(--ew-space-4, 24px);
}

/* Responsive rules for .ew-about-page live in stylesheet2026-media.css. */

/* ============================================================
   Enquiry forms — MakeAnEnquiryForSalaryPackaging + …NovatedLease
   These render inside .ew-shell, so all the field/label/button rules
   come from the existing .ew-shell-* design system. Below we only
   tidy up the bits that are unique to these forms: the legacy .plans
   radio-toggle (kept verbatim so server-side validation still binds)
   and the reCAPTCHA widget overflow.
============================================================ */

/* ─────────────────────────────────────────────────────────────
   "I'm a…" radio pair — side-by-side row layout (professional).
   Two equal-width cards sharing one row. Each card has a
   centred label with a tick badge in the TOP-RIGHT corner so
   the row doesn't grow taller when label wraps to two lines.
   IDLE = white + neutral grey border.
   ACTIVE = green border + green-pale fill + green tick badge.
─────────────────────────────────────────────────────────────── */
body .ew-enquiry-shell .plans,
.ew-enquiry-shell .plans {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 14px !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    list-style: none;
    width: 100% !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    position: static !important;
    overflow: visible !important;
    box-shadow: none !important;
    min-height: 0;
    grid-template-columns: none !important;
}
    /* Wipe any decoration from earlier options */
    body .ew-enquiry-shell .plans::before,
    body .ew-enquiry-shell .plans::after,
    .ew-enquiry-shell .plans::before,
    .ew-enquiry-shell .plans::after {
        content: none !important;
        display: none !important;
    }

    body .ew-enquiry-shell .plans .plan,
    .ew-enquiry-shell .plans .plan {
        position: relative !important;
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        flex: 1 1 0 !important; /* equal-width 50/50 row */
        min-width: 0 !important;
        grid-column: auto !important;
        border: 1.5px solid #D8DDE2 !important;
        border-top: 1.5px solid #D8DDE2 !important;
        border-radius: 14px !important;
        background: var(--ew-white) !important;
        cursor: pointer;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .15s ease;
        display: block !important;
        overflow: visible !important;
        box-shadow: 0 1px 2px rgba(14, 26, 14, .03) !important;
    }

        body .ew-enquiry-shell .plans .plan:first-child,
        .ew-enquiry-shell .plans .plan:first-child {
            border-top: 1.5px solid #D8DDE2 !important;
        }

        body .ew-enquiry-shell .plans .plan:hover,
        .ew-enquiry-shell .plans .plan:hover {
            border-color: #B6C3A8 !important;
            background: #FAFCF6 !important;
            transform: translateY(-1px);
        }

        body .ew-enquiry-shell .plans .plan input[type="radio"],
        .ew-enquiry-shell .plans .plan input[type="radio"] {
            position: absolute !important;
            inset: 0 !important;
            width: 100% !important;
            height: 100% !important;
            opacity: 0 !important;
            margin: 0 !important;
            cursor: pointer !important;
            z-index: 2 !important;
        }

        body .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked),
        .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked) {
            border: 2px solid var(--ew-green) !important;
            background: var(--ew-green-pale) !important;
            box-shadow: 0 0 0 4px rgba(85, 177, 71, .12), 0 1px 2px rgba(14, 26, 14, .04) !important;
            transform: translateY(-1px);
        }

        /* Hide the legacy person icon — pure text + corner tick */
        body .ew-enquiry-shell .plans .plan .plan-content .ESPIcons,
        .ew-enquiry-shell .plans .plan .plan-content .ESPIcons {
            display: none !important;
        }

        /* Inner layout — single-row layout with label flex-filling and the
   tick badge floating on the right edge of the .plan card. Right
   padding reserves space for the absolutely-positioned tick. */
        body .ew-enquiry-shell .plans .plan .plan-content,
        .ew-enquiry-shell .plans .plan .plan-content {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: flex-start !important;
            column-gap: 12px !important;
            row-gap: 0 !important;
            padding: 9px 42px 9px 16px !important; /* tighter vertical padding for compact height */
            width: 100% !important;
            min-height: 0 !important;
            position: relative !important;
            z-index: 1 !important;
            color: inherit !important;
        }

        /* Inline tick badge — sits on the right edge of the row, vertically
   centred against the label. Reserves space when idle so the row
   doesn't shift on selection. */
        body .ew-enquiry-shell .plans .plan::after,
        .ew-enquiry-shell .plans .plan::after {
            content: "" !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            right: 14px !important;
            transform: translateY(-50%) !important;
            width: 22px !important;
            height: 22px !important;
            border-radius: 50% !important;
            background: #F2F4ED !important;
            border: 1.5px solid #D8DDE2 !important;
            transition: all .18s ease;
            color: transparent !important;
            font-size: 0 !important;
            box-sizing: border-box;
            z-index: 3;
            pointer-events: none;
        }

        body .ew-enquiry-shell .plans .plan:hover::after,
        .ew-enquiry-shell .plans .plan:hover::after {
            border-color: #B6C3A8 !important;
        }

        body .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked)::after,
        .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked)::after {
            content: "\f00c" !important;
            font-family: "Font Awesome 5 Free" !important;
            font-weight: 900 !important;
            color: #fff !important;
            background: var(--ew-green) !important;
            border-color: var(--ew-green) !important;
            display: grid !important;
            place-items: center !important;
            font-size: 11px !important;
            line-height: 1 !important;
            transform: translateY(-50%) !important;
            box-shadow: 0 2px 4px rgba(85, 177, 71, .35) !important;
        }

        /* Suppress any leftover ::before / .plan-content::after from earlier options */
        body .ew-enquiry-shell .plans .plan::before,
        body .ew-enquiry-shell .plans .plan .plan-content::before,
        body .ew-enquiry-shell .plans .plan .plan-content::after,
        .ew-enquiry-shell .plans .plan::before,
        .ew-enquiry-shell .plans .plan .plan-content::before,
        .ew-enquiry-shell .plans .plan .plan-content::after {
            content: none !important;
            display: none !important;
        }

        /* Label */
        body .ew-enquiry-shell .plans .plan .plan-details,
        .ew-enquiry-shell .plans .plan .plan-details {
            min-width: 0 !important;
            display: block !important;
            width: 100% !important;
        }

            body .ew-enquiry-shell .plans .plan .plan-details > div,
            .ew-enquiry-shell .plans .plan .plan-details > div {
                margin: 0 !important;
                font-size: 14.5px !important;
                font-weight: 500 !important;
                color: var(--ew-ink) !important;
                line-height: 1.4 !important;
                text-align: left !important;
                letter-spacing: -.005em;
                white-space: normal;
                overflow: visible;
                text-overflow: clip;
                transition: color .18s ease, font-weight .18s ease;
            }

        body .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked) .plan-details > div,
        .ew-enquiry-shell .plans .plan:has(input[type="radio"]:checked) .plan-details > div {
            font-weight: 600 !important;
            color: var(--ew-green-dark) !important;
        }

/* ─────────────────────────────────────────────────────────────
   Salary Packaging vs Novated Lease — FINAL: simple flex
   underline tabs. No grid (which legacy CSS overrides), no
   container card, no pseudo-elements that can fight legacy
   styles. Just two text labels in a flex row with a bottom-
   border that turns green on the active tab. Bulletproof.
─────────────────────────────────────────────────────────────── */
body #MakeAnEnquiry .col-12.col-md-10.col-lg-8,
body #MakeAnEnquiry .col-12,
#MakeAnEnquiry .col-12.col-md-10.col-lg-8,
#MakeAnEnquiry .col-12 {
    text-align: left !important;
}

/* Hide the legacy mobile drawer h3 elements on desktop — they
   only exist for accordion/mobile views and were leaking into
   the tab strip area. */
body #MakeAnEnquiry .tab_drawer_heading,
#MakeAnEnquiry .tab_drawer_heading {
    display: none !important;
}

body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs,
#MakeAnEnquiry ul.tabs.ew-enquiry-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--ew-line) !important;
    padding: 10px 0 0 !important;
    gap: 12px !important;
    margin: 0 0 24px !important;
    list-style: none !important;
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    position: relative;
    overflow: visible !important;
    box-shadow: none !important;
    min-height: 0;
    grid-template-columns: none !important; /* nuke any inherited grid */
}
    /* Wipe any decoration from earlier options */
    body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs::before,
    body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs::after,
    #MakeAnEnquiry ul.tabs.ew-enquiry-tabs::before,
    #MakeAnEnquiry ul.tabs.ew-enquiry-tabs::after {
        content: none !important;
        display: none !important;
    }

    body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li,
    #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li {
        position: relative !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        grid-column: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        padding: 14px 22px !important;
        margin: 0 4px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: var(--ew-ink) !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        cursor: pointer;
        transition: font-weight .15s ease;
        white-space: nowrap;
        letter-spacing: -.005em;
        box-shadow: none !important;
    }

        body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li:last-child,
        #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li:last-child {
            margin-right: 0 !important;
        }

        body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li i,
        #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li i {
            font-size: 14px !important;
            color: inherit !important;
        }

        body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li:hover,
        #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li:hover {
            color: var(--ew-ink) !important;
        }

        /* Active state: bold text + green colour on both label and icon.
           No underline, no border indicator — so both tabs sit on the
           same vertical baseline. */
        body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active,
        #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active {
            color: var(--ew-green-dark) !important;
            font-weight: 700 !important;
            background: transparent !important;
        }

            body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active i,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active i {
                color: var(--ew-green-dark) !important;
            }

            /* Suppress any pseudo-element decoration from earlier options */
            body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li::before,
            body #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li::after,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li::before,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li::after,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li:hover::after,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active::after,
            #MakeAnEnquiry ul.tabs.ew-enquiry-tabs li.active::before {
                content: none !important;
                display: none !important;
            }

/* reCAPTCHA widget — contain overflow when the iframe is wider than
   a narrow form panel, and remove the underlying field background. */
.ew-enquiry-shell .ew-shell-recaptcha {
    background: transparent;
    padding: 0;
    border: 0;
    margin-top: 6px;
    /*    overflow-x: auto;
*/ -webkit-overflow-scrolling: touch;
}

    .ew-enquiry-shell .ew-shell-recaptcha .g-recaptcha,
    .ew-enquiry-shell .ew-shell-recaptcha > div {
        transform-origin: left top;
    }

/* The submit input is an <input type="submit"> — keep the button shape
   identical to the anchor-based .ew-btn-primary used elsewhere. */
.ew-enquiry-shell input[type="submit"].ew-shell-submit {
    width: 100%;
    font-family: inherit;
    border: 0;
    cursor: pointer;
}

/* Tighten the .form-control + .required class footprint inherited from
   @Html.EditorFor — these are already styled by .ew-shell-field, but
   .form-control's default margin/box-shadow can leak through. */
.ew-enquiry-shell .ew-shell-field input.form-control,
.ew-enquiry-shell .ew-shell-field textarea.form-control {
    box-shadow: none;
    margin: 0;
}

/* Validation message colour aligns with design system muted-error tone. */
.ew-enquiry-shell .text-danger {
    font-size: 12.5px;
    color: #C0392B;
    margin-top: 5px;
    display: block;
}

/* Stack the two .plan cards on narrow screens — responsive rule lives
   in stylesheet2026-media.css. */
.ew-feature-list {
    padding-left: 20px !important;
}

/* ============================================================
   FIX: Shell-form checkbox (Feedback page "Agree to T&C")
   ------------------------------------------------------------
   The generic `.ew-shell-field input { width: 100% }` rule
   stretched the checkbox into a full-width text-input shape.
   These overrides keep checkboxes and radios at their native
   size and lay the label out on a single row beside them.
   ============================================================ */
body .ew-shell-field input[type="checkbox"],
body .ew-shell-field input[type="radio"],
.ew-enquiry-shell .ew-shell-field input[type="checkbox"],
.ew-enquiry-shell .ew-shell-field input[type="radio"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--ew-white) !important;
    border: 1.5px solid var(--ew-line) !important;
    border-radius: 4px !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: var(--ew-green, #6FA943);
    box-shadow: none !important;
    flex: 0 0 auto !important;
}

body .ew-shell-field input[type="radio"],
.ew-enquiry-shell .ew-shell-field input[type="radio"] {
    border-radius: 50% !important;
}

/* The wrapper around the checkbox + label */
.ew-shell-check {
    margin-top: 4px;
}

    .ew-shell-check label.form-check {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        cursor: pointer;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
        color: var(--ew-ink) !important;
        font-weight: 500 !important;
    }

        .ew-shell-check label.form-check span {
            flex: 1 1 auto;
            min-width: 0;
        }

    .ew-shell-check .text-danger {
        margin-top: 6px;
    }

/* ============================================================
   FIX: Careers job-listing typography (inside ew-faq-body)
   ------------------------------------------------------------
   The job descriptions inside `<details class="ew-faq-item">`
   contain <h4>, <ul>, nested <ul>, <strong> — give them a
   consistent voice in the design-system colours and spacing.
   ============================================================ */
.ew-faq-body h3,
.ew-faq-body h4,
.ew-faq-body h5 {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: var(--ew-ink);
    letter-spacing: -.1px;
    margin: 18px 0 8px;
    line-height: 1.35;
}

    .ew-faq-body h3:first-child,
    .ew-faq-body h4:first-child,
    .ew-faq-body h5:first-child {
        margin-top: 4px;
    }

.ew-faq-body ul,
.ew-faq-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
    color: var(--ew-muted);
    font-size: 15px;
    line-height: 1.7;
}

    .ew-faq-body ul ul,
    .ew-faq-body ol ol,
    .ew-faq-body ul ol,
    .ew-faq-body ol ul {
        margin: 6px 0 6px;
        padding-left: 20px;
    }

.ew-faq-body li {
    margin: 0 0 4px;
    padding-left: 2px;
}

    .ew-faq-body li::marker {
        color: var(--ew-green, #6FA943);
        font-size: 14px;
    }

.ew-faq-body strong,
.ew-faq-body b {
    color: var(--ew-ink);
    font-weight: 700;
}

.ew-faq-body em,
.ew-faq-body i {
    color: var(--ew-muted);
    font-style: italic;
}

/* Definition-list metadata strip (ew-case-meta) when used inside
   ew-faq-body — give it a soft tinted background so it reads as
   a metadata card distinct from the body copy. */
.ew-faq-body .ew-case-meta {
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 4px 0 18px;
    font-size: 13.5px;
}

    .ew-faq-body .ew-case-meta dt {
        color: var(--ew-muted);
        font-weight: 500;
    }

    .ew-faq-body .ew-case-meta dd {
        color: var(--ew-ink);
        font-weight: 600;
    }

.ew-faq-item ul {
    padding-left: 20px !important;
    color: var(--ew-ink) !important;
}

/* ============================================================
   SalaryPackaging.cshtml — only the components that didn't
   exist in the ew-* layer yet. Everything else reuses
   ew-intro-section, ew-section / ew-section--ink/-paper/-white,
   ew-section-head, ew-ind-grid / ew-ind-card,
   ew-feature-row / ew-feature-card, ew-shell / ew-enquiry-shell,
   ew-checklist, ew-cta-btns, ew-btn / ew-btn-primary / -ghost.
   ============================================================ */

/* ---- On-page sub-nav (sticky below the fixed site header) ---- */
.ew-subnav {
    position: sticky;
    /* Sit just below the fixed .ew-h header (72px tall on desktop, 64px on
       mobile — overridden in stylesheet2026-media.css). Without this, the
       subnav stuck to top: 0 and slid behind the header which has a higher
       z-index, hiding the in-page nav. */
    top: 72px;
    z-index: 8;
    background: rgba(242, 242, 234, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--ew-line);
    border-bottom: 1px solid var(--ew-line);
}

    /* Container anchors the absolute-positioned scroll arrows. */
    .ew-subnav .container {
        position: relative;
    }

.ew-subnav-inner {
    display: flex;
    gap: 6px;
    align-items: center;
    /* `safe center` centers when items fit, but flips to flex-start when
       they overflow — so the leftmost item stays reachable on narrow
       screens instead of being clipped past scroll-left:0. */
    justify-content: safe center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 11px 16px;
    /* Snap points so touch-swipes settle on a chip. */
    scroll-snap-type: x proximity;
    scroll-padding-inline: 44px;
    /* Fade the ends so pills slip under the arrow buttons rather than
       being hard-clipped. Only visually meaningful when the row is
       actually scrollable, but harmless when it isn't. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

/* Scroll arrows — hardcoded directly in each .ew-subnav's markup so
   they render regardless of JS availability. On wide desktop screens
   the menu fits, so arrows stay hidden; on smaller screens where
   the menu overflows they become visible (see media query in
   stylesheet2026-media.css). */
.ew-subnav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ew-line);
    background: #fff;
    color: var(--ew-ink);
    display: none; /* hidden on wide desktop — revealed at ≤991px */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(14,26,14,.25), 0 2px 4px rgba(14,26,14,.06);
    opacity: 1;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease, background .15s, border-color .15s, color .15s;
    padding: 0;
    line-height: 1;
    /* Reset any global button styles that might interfere. */
    font: inherit;
    text-transform: none;
    appearance: none;
    -webkit-appearance: none;
}

/* If the progressive-enhancement JS detects actual overflow on a wide
   screen (rare but possible), show the arrows anyway. */
.ew-subnav[data-scrollable="1"] .ew-subnav-arrow {
    display: inline-flex;
}

/* Optional dim state — set by the progressive-enhancement JS when it
   can determine the pill row is at a scroll boundary or has no
   overflow at all. Without the JS, arrows stay at full opacity. */
.ew-subnav[data-can-prev="0"] .ew-subnav-arrow--prev,
.ew-subnav[data-can-next="0"] .ew-subnav-arrow--next {
    opacity: .35;
    pointer-events: none;
}

/* Arrow icons — Font Awesome (already loaded via font-awesome/css/all.css). */
.ew-subnav-arrow i,
.ew-subnav-arrow .fa,
.ew-subnav-arrow .fas,
.ew-subnav-arrow .far,
.ew-subnav-arrow .fal,
.ew-subnav-arrow .fab {
    font-size: 13px;
    line-height: 1;
    color: inherit;
    display: block;
}

.ew-subnav-arrow:hover {
    background: var(--ew-green);
    color: #08210A;
    border-color: var(--ew-green);
}

.ew-subnav-arrow:focus-visible {
    outline: 2px solid var(--ew-green);
    outline-offset: 2px;
}

.ew-subnav-arrow--prev {
    left: 6px;
}

.ew-subnav-arrow--next {
    right: 6px;
}

/* Boundary state — arrow remains visible (users still see the control)
   but reads as disabled. Kept at 0.5 opacity so it's clearly not
   interactive without disappearing entirely. */
.ew-subnav[data-can-prev="0"] .ew-subnav-arrow--prev,
.ew-subnav[data-can-next="0"] .ew-subnav-arrow--next {
    opacity: .45;
    pointer-events: none;
    box-shadow: 0 2px 6px -3px rgba(14,26,14,.15);
}

.ew-subnav-arrow:active {
    transform: translateY(-50%) scale(.94);
}

    .ew-subnav-inner::-webkit-scrollbar {
        display: none;
    }

.ew-subnav a {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ew-muted);
    padding: 7px 14px;
    border-radius: 100px;
    white-space: nowrap;
    transition: color .15s, background .15s;
    flex: none;
    cursor: pointer;
    text-decoration: none;
    scroll-snap-align: center;
}

    .ew-subnav a:hover {
        color: var(--ew-ink);
    }

    .ew-subnav a.on {
        background: var(--ew-green);
        color: #08210A;
    }

.ew-subnav-lead {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ew-muted);
    margin-right: 8px;
    white-space: nowrap;
    flex: none;
}

/* Scroll-margin so a section header isn't hidden under header + subnav */
.ew-sp-anchor {
    scroll-margin-top: 132px;
}

/* ---- Hero intro note (sits under the hero CTA row) ---- */
.ew-intro-note {
    margin: 22px 0 0;
    font-size: 13.5px;
    color: var(--ew-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ew-intro-note i {
        color: var(--ew-green);
    }

/* 4-col variant of the existing 3-col benefits grid */
.ew-ind-grid.ew-ind-grid--4col {
    grid-template-columns: repeat(4, 1fr);
}

/* ---- Pay-card hero illustration (the "How a packaged pay works" tile) ---- */
.ew-paycard {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    box-shadow: 0 30px 60px -28px rgba(14, 26, 14, .28), 0 2px 0 rgba(14, 26, 14, .02);
    padding: 24px;
    position: relative;
}

    .ew-paycard h4 {
        font-family: var(--font-sans);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ew-muted);
        font-weight: 600;
        margin: 0 0 18px;
    }

.ew-payrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid var(--ew-line);
    font-size: 15px;
}

    .ew-payrow:last-of-type {
        border-bottom: none;
    }

    .ew-payrow span {
        color: var(--ew-muted);
    }

    .ew-payrow b {
        font-weight: 600;
        letter-spacing: -.01em;
        color: var(--ew-ink);
    }

    .ew-payrow.is-pkg span, .ew-payrow.is-pkg b {
        color: var(--ew-green-dark);
    }

    .ew-payrow.is-total {
        margin-top: 6px;
        padding-top: 18px;
        border-top: 2px solid var(--ew-ink);
    }

        .ew-payrow.is-total span {
            color: var(--ew-ink);
            font-weight: 600;
        }

        .ew-payrow.is-total b {
            font-size: 21px;
        }

.ew-paybar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    margin: 18px 0 8px;
    background: var(--ew-paper);
}

    .ew-paybar i {
        display: block;
        height: 100%;
    }

.ew-paybar-pre {
    background: var(--ew-green);
    width: 32%;
}

.ew-paybar-post {
    background: var(--ew-ink);
    width: 68%;
}

.ew-paykey {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--ew-muted);
}

.ew-paykey-k1, .ew-paykey-k2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ew-paykey-k1::before, .ew-paykey-k2::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 3px;
        display: inline-block;
    }

    .ew-paykey-k1::before {
        background: var(--ew-green);
    }

    .ew-paykey-k2::before {
        background: var(--ew-ink);
    }

.ew-paycard-tag {
    position: absolute;
    right: -14px;
    bottom: 30px;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 12px;
    padding: 11px 14px;
    box-shadow: 0 14px 30px -16px rgba(14, 26, 14, .3);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ew-ink);
}

    .ew-paycard-tag i {
        color: var(--ew-green-dark);
        font-size: 12px;
    }

/* ---- Dark feature section: light body copy + numbered step list ---- */
.ew-section--ink p {
    color: #C3CFBE;
}

    .ew-section--ink p strong, .ew-section--ink p b {
        color: #fff;
        font-weight: 600;
    }

.ew-step-list {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

    .ew-step-list li {
        display: flex;
        gap: 13px;
        align-items: flex-start;
        font-size: 15.5px;
        color: var(--ew-ink);
    }

.ew-section--ink .ew-step-list li {
    color: #DCE6D7;
}

.ew-step-list-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ew-green);
    color: #08210A;
    font-size: 13px;
    font-weight: 700;
    display: grid;
    place-items: center;
    margin-top: 1px;
}

/* Tax-cap example cards (used inside the dark feature section) */
.ew-tax-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ew-tax-card {
    background: rgba(19, 33, 21, .19);
    border: 1px solid #25342A;
    border-radius: var(--ew-radius);
    padding: 22px 20px;
}

.ew-tax-card-ttl {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ew-green);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.ew-tax-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid #25342A;
    font-size: 13.5px;
}

    .ew-tax-line:last-of-type {
        border-bottom: none;
    }

    .ew-tax-line span {
        color: #A9B6A6;
    }

    .ew-tax-line b {
        color: #E9EFE6;
        font-weight: 600;
    }

    .ew-tax-line.is-big {
        margin-top: 8px;
        padding-top: 14px;
        border-top: 2px solid #34463A;
    }

        .ew-tax-line.is-big span {
            color: #fff;
            font-weight: 600;
        }

        .ew-tax-line.is-big b {
            font-family: "Instrument Serif", Georgia, serif;
            font-style: italic;
            font-size: 24px;
            color: var(--ew-green);
        }

.ew-tax-note {
    font-size: 12px;
    color: #7E8C7C;
    margin: 16px 0 0;
}

/* ---- Feature-card extras: small tag, arrow link, serif "01/02/03" num ---- */
.ew-feature-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
    margin-bottom: 9px;
}

.ew-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ew-green-dark);
    text-decoration: none;
    margin-top: 6px;
}

    .ew-feature-link .arr {
        transition: transform .18s;
    }

    .ew-feature-link:hover {
        color: var(--ew-green);
    }

        .ew-feature-link:hover .arr {
            transform: translateX(3px);
        }

.ew-feature-num em {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 36px;
    line-height: 1;
    color: var(--ew-green-dark);
    display: inline-block;
    margin-bottom: 14px;
}

/* ---- Credit-card mockup (used in the Cards split section) ---- */
.ew-spcard {
    background: linear-gradient(135deg, #13211A, var(--ew-ink));
    border-radius: 20px;
    padding: 28px;
    color: #E9EFE6;
    box-shadow: 0 30px 60px -28px rgba(14, 26, 14, .5);
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.586/1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .ew-spcard::after {
        content: "";
        position: absolute;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(108, 179, 63, .34), transparent 64%);
        top: -130px;
        right: -90px;
    }

.ew-spcard-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
}

.ew-spcard-brand {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 9px;
}

.ew-spcard-mark {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--ew-green);
    position: relative;
    flex: none;
    display: inline-block;
}

    .ew-spcard-mark::after {
        content: "";
        position: absolute;
        inset: 7px 7px auto auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #08210A;
    }

.ew-spcard-chip {
    width: 38px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #D9C56B, #B89A3F);
}

.ew-spcard-num {
    font-family: var(--font-sans), monospace;
    font-size: 18px;
    letter-spacing: .14em;
    position: relative;
}

.ew-spcard-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    font-size: 12px;
    color: #A9B6A6;
}

    .ew-spcard-foot b {
        color: #fff;
        font-weight: 500;
        display: block;
        font-size: 13.5px;
        letter-spacing: .02em;
    }

/* ---- Loan visual block (soft green tile in Personal Loan section) ---- */
.ew-loan-visual {
    background: var(--ew-green-pale);
    border: 1px solid #D8E6CC;
    border-radius: 20px;
    padding: 38px;
}

.ew-loan-num {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 54px;
    line-height: 1;
    color: var(--ew-green-dark);
}

.ew-loan-txt {
    font-size: 16px;
    color: var(--ew-muted);
    margin: 10px 0 0;
    max-width: 300px;
}

.ew-loan-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

    .ew-loan-tags span {
        font-size: 13px;
        font-weight: 500;
        background: var(--ew-white);
        border: 1px solid #D8E6CC;
        color: var(--ew-muted);
        padding: 7px 13px;
        border-radius: 100px;
    }

/* ---- PDS notice band (used inside the Cards section) ---- */
.ew-notice {
    margin-top: 26px;
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-left: 3px solid var(--ew-green);
    border-radius: 12px;
    padding: 18px 20px;
    font-size: 13.5px;
    color: var(--ew-muted);
    line-height: 1.6;
}

    .ew-notice strong, .ew-notice b {
        color: var(--ew-ink);
        font-weight: 600;
    }

/* ---- Enquiry shell extras (phone block + success state) ---- */
.ew-shell-phone {
    margin-top: 30px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: rgba(255, 255, 255, .65);
}

    .ew-shell-phone i {
        color: var(--ew-green);
    }

    .ew-shell-phone strong {
        color: #fff;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: .01em;
    }

.ew-form-done {
    display: none;
    text-align: center;
    padding: 30px 10px;
}

    .ew-form-done.show {
        display: block;
    }

.ew-form-tick {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ew-green-pale);
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    color: var(--ew-green-dark);
    font-size: 22px;
}

.ew-form-done h3 {
    font-family: var(--font-sans);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--ew-ink);
}

.ew-form-done p {
    font-size: 15px;
    color: var(--ew-muted);
    margin: 8px 0 0;
}

/* ---- Pill-segmented toggle (new vs existing employee, matches source) ---- */
.ew-seg-toggle {
    display: flex;
    gap: 6px;
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: 100px;
    padding: 4px;
    margin-bottom: 22px;
    position: relative;
}

    .ew-seg-toggle button {
        flex: 1;
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ew-muted);
        background: transparent;
        border: none;
        padding: 9px 14px;
        border-radius: 100px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
        line-height: 1.2;
        white-space: nowrap;
    }

        .ew-seg-toggle button:hover {
            color: var(--ew-ink);
        }

        .ew-seg-toggle button.on {
            background: var(--ew-green);
            color: #08210A;
            font-weight: 600;
        }

            .ew-seg-toggle button.on:hover {
                color: #08210A;
            }

    .ew-seg-toggle input[type="hidden"] {
        display: none;
    }

    /* ---- ew-seg-toggle as a form-bound radio group ----
   Used on MakeAnEnquiry SP/NL and Feedback so Razor model
   binding (`@Html.RadioButtonFor`) keeps working. The real
   radio is visually hidden; the wrapping <label> behaves as
   the clickable pill. Active state is driven by :has(input:checked). */
    .ew-seg-toggle .ew-seg-toggle-item {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: var(--font-sans);
        font-size: 13.5px;
        font-weight: 500;
        color: var(--ew-muted);
        background: transparent;
        border: none;
        padding: 9px 14px;
        border-radius: 100px;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
        line-height: 1.2;
        white-space: nowrap;
        margin: 0;
        position: relative;
        /* Cover the whole pill width so the click area matches the visual */
        min-width: 0;
    }

        .ew-seg-toggle .ew-seg-toggle-item:hover {
            color: var(--ew-ink);
        }
        /* Visually hide the real radio but keep it focusable for keyboard / screen readers */
        .ew-seg-toggle .ew-seg-toggle-item > input[type="radio"] {
            position: absolute;
            opacity: 0;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            cursor: pointer;
            /* keep tab order */
            z-index: 1;
        }
        /* Active pill — when the wrapped radio is checked */
        .ew-seg-toggle .ew-seg-toggle-item:has(input[type="radio"]:checked) {
            background: var(--ew-green);
            color: #08210A;
            font-weight: 600;
        }

            .ew-seg-toggle .ew-seg-toggle-item:has(input[type="radio"]:checked):hover {
                color: #08210A;
            }
        /* Keyboard focus ring on the pill (since the input itself is invisible) */
        .ew-seg-toggle .ew-seg-toggle-item:has(input[type="radio"]:focus-visible) {
            outline: 2px solid var(--ew-green-dark);
            outline-offset: 2px;
        }
        /* Fallback for browsers without :has() — drive the active state via
   a JS-applied .is-on class on the label (added by the snippet below). */
        .ew-seg-toggle .ew-seg-toggle-item.is-on {
            background: var(--ew-green);
            color: #08210A;
            font-weight: 600;
        }

/* ============================================================
   ctrlFooter.ascx — site-wide footer (matches the source design)
   ------------------------------------------------------------
   Light background, single top hairline, three-column link list
   alongside a brand block, plus a slim legal/social bottom bar.
   ============================================================ */
.ew-footer {
    background: var(--ew-white);
    color: var(--ew-ink);
    padding: 54px 0 26px;
    border-top: 1px solid var(--ew-line);
    /*    margin-top: 96px;
*/ font-family: var(--font-sans);
}

/* Top: brand + columns row */
.ew-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}

/* Left: brand + tagline */
.ew-foot-brand {
    max-width: 360px;
    flex: 0 0 auto;
}

.ew-foot-logo {
    display: inline-block;
    line-height: 0;
}

    .ew-foot-logo img {
        height: 38px;
        width: auto;
        display: block;
    }

.ew-foot-brand p {
    margin: 16px 0 0;
    font-size: 13.5px;
    color: var(--ew-muted);
    line-height: 1.6;
}

/* Right: 3 link columns */
.ew-foot-cols {
    display: flex;
    gap: 54px;
    flex-wrap: wrap;
}

.ew-foot-col {
    min-width: 140px;
}

    .ew-foot-col h5 {
        font-family: var(--font-sans);
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--ew-muted);
        margin: 0 0 14px;
        font-weight: 600;
    }

    .ew-foot-col a {
        display: block;
        font-size: 14px;
        color: var(--ew-ink);
        padding: 5px 0;
        text-decoration: none;
        transition: color .15s ease;
    }

        .ew-foot-col a:hover {
            color: var(--ew-green-dark);
        }

        .ew-foot-col a i {
            color: var(--ew-green-dark);
            font-size: 12px;
            width: 14px;
            text-align: center;
        }

.ew-foot-address {
    font-style: normal;
    font-size: 14px;
    color: var(--ew-muted);
    line-height: 1.6;
    margin: 8px 0 0;
}

/* Acknowledgement of Country */
.ew-foot-ack {
    margin: 46px 0 0;
    padding: 0;
    font-size: 12.5px;
    color: var(--ew-muted);
    max-width: 880px;
    line-height: 1.6;
}

/* Bottom bar: legal links + social */
.ew-foot-bottom {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ew-line);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.ew-foot-legal {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

    .ew-foot-legal small,
    .ew-foot-legal a {
        color: var(--ew-muted);
        font-size: 13px;
        text-decoration: none;
    }

        .ew-foot-legal a:hover {
            color: var(--ew-ink);
        }

.ew-foot-sep {
    color: var(--ew-line);
    font-size: 13px;
    user-select: none;
}

/* Social icons — slim circle, brand-green on hover */
.ew-foot-social {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

    .ew-foot-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--ew-paper);
        color: var(--ew-muted);
        border: 1px solid var(--ew-line);
        font-size: 14px;
        transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
        text-decoration: none;
    }

        .ew-foot-social a:hover {
            background: var(--ew-green);
            color: #08210A;
            border-color: var(--ew-green);
            transform: translateY(-1px);
        }

        .ew-foot-social a .sa {
            font-size: 14px;
            line-height: 1;
        }

/* Google Translate widget — keep it on its own line, dimmed */
.ew-foot-translate {
    margin-top: 14px;
    opacity: .75;
    font-size: 12px;
}

.slide {
    height: auto;
}

.irs {
    padding: 0;
}

/* ============================================================
   NEW HEADER NAVBAR — ctrlHeader.ascx
   ------------------------------------------------------------
   Ported from eziway-nav.html. Class prefix ew-h-* so the
   styles sit alongside the legacy .header / .mega-menu rules
   in style-new.css without colliding. The legacy header is
   preserved in the DOM (hidden via inline style="display:none")
   so any code-behind references to LogoImage / marquee labels
   keep working.
   ============================================================ */
header.ew-h {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
    background: rgba(250, 250, 246, .86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
    font-family: var(--font-sans);
    /* Override legacy bare-`header` rule's shadow */
    box-shadow: none;
}

    header.ew-h.is-scrolled {
        border-bottom-color: var(--ew-line);
    }

/* Nav row */
.ew-h-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 20px;
}

/* Logo */
.ew-h-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: none;
    line-height: 0;
}

    .ew-h-logo img {
        height: 36px;
        width: auto;
        display: block;
    }

/* Centre nav row */
.ew-h-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.ew-h-item {
    position: relative;
}

.ew-h-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 14.5px;
    color: var(--ew-muted);
    font-weight: 500;
    padding: 9px 14px;
    border-radius: 100px;
    transition: color .15s ease, background .15s ease;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}

    .ew-h-link:hover {
        color: var(--ew-ink);
        background: var(--ew-green);
    }

.ew-h-caret {
    /* Font Awesome <i> — size via font-size */
    font-size: 11px;
    color: var(--ew-muted);
    transition: transform .22s ease, color .15s ease;
    flex: none;
    line-height: 1;
    display: inline-block;
}

.ew-h-item.is-open > .ew-h-link {
    color: var(--ew-ink);
    background: var(--ew-green);
}

    .ew-h-item.is-open > .ew-h-link .ew-h-caret {
        transform: rotate(180deg);
        color: var(--ew-ink);
    }

/* Right-side CTA group */
.ew-h-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
}

/* Login sits alongside "Book a demo" as a primary CTA — visible on
   ALL screen sizes (never collapsed into the hamburger). Styled as a
   green pill so it reads as a proper button, not a secondary link. */
.ew-h-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #08210A;
    background: var(--ew-green);
    font-weight: 600;
    padding: 10px 18px;
    border-radius: var(--ew-radius-pill, 100px);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .12s ease;
    line-height: 1;
}

    .ew-h-signin:hover {
        background: var(--ew-green-dark);
        color: #fff;
        text-decoration: none;
    }

    .ew-h-signin:active {
        transform: translateY(1px);
    }

    .ew-h-signin:focus-visible {
        outline: 2px solid var(--ew-green-dark);
        outline-offset: 2px;
    }

header.ew-h .ew-h-demo {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
}

/* ---------- Desktop dropdown panel ---------- */
.ew-h-drop {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 320px;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    box-shadow: 0 24px 50px -24px rgba(14, 26, 14, .30), 0 2px 0 rgba(14, 26, 14, .02);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    z-index: 120;
}
    /* Invisible hover bridge — prevents the 12px gap from closing the menu */
    .ew-h-drop::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px;
    }

.ew-h-item.is-open .ew-h-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Choice cards inside the dropdown */
.ew-h-drop-choice {
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ew-h-choice {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 13px;
    border: 1px solid var(--ew-line);
    background: var(--ew-paper);
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
    text-decoration: none;
    color: var(--ew-ink);
}

    .ew-h-choice:hover {
        background: var(--ew-white);
        border-color: var(--ew-green);
        transform: translateY(-1px);
    }

.ew-h-choice-ic {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--ew-green-pale);
    display: grid;
    place-items: center;
    color: var(--ew-green-dark);
    flex: none;
    transition: background .16s ease, color .16s ease;
    /* Sets size for the inner Font Awesome <i> */
    font-size: 16px;
    line-height: 1;
}

.ew-h-choice:hover .ew-h-choice-ic {
    background: var(--ew-green);
    color: #08210A;
}

.ew-h-choice-text {
    flex: 1;
    line-height: 1.2;
    min-width: 0;
}

    .ew-h-choice-text b {
        display: block;
        font-family: var(--font-sans);
        font-size: 15.5px;
        font-weight: 600;
        color: var(--ew-ink);
        letter-spacing: -.01em;
    }

    .ew-h-choice-text span {
        display: block;
        font-size: 12.5px;
        color: var(--ew-muted);
        margin-top: 2px;
    }

.ew-h-choice-arr {
    /* Font Awesome <i> — size via font-size */
    font-size: 13px;
    color: var(--ew-muted);
    flex: none;
    transition: transform .18s ease, color .16s ease;
    line-height: 1;
    display: inline-block;
}

.ew-h-choice:hover .ew-h-choice-arr {
    color: var(--ew-green-dark);
    transform: translateX(3px);
}

/* ---------- Mobile burger ---------- */
.ew-h-burger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ew-line);
    border-radius: 11px;
    background: transparent;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    flex: none;
    padding: 0;
}

    .ew-h-burger span {
        width: 18px;
        height: 1.8px;
        background: var(--ew-ink);
        display: block;
        transition: .25s;
    }

    .ew-h-burger.is-x span:nth-child(1) {
        transform: translateY(5.8px) rotate(45deg);
    }

    .ew-h-burger.is-x span:nth-child(2) {
        opacity: 0;
    }

    .ew-h-burger.is-x span:nth-child(3) {
        transform: translateY(-5.8px) rotate(-45deg);
    }

/* ---------- Mobile nav panel (hidden by default, shown when burger toggles) ---------- */
.ew-h-mnav {
    display: none;
    flex-direction: column;
    padding: 6px 0 20px;
    border-top: 1px solid var(--ew-line);
}

    .ew-h-mnav.is-open {
        display: flex;
    }

.ew-h-mlink {
    padding: 14px 4px;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--ew-ink);
    border-bottom: 1px solid var(--ew-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}

    .ew-h-mlink .ew-h-caret {
        /* Mobile-row caret — slightly larger than desktop */
        font-size: 14px;
        color: var(--ew-muted);
        transition: transform .25s ease;
        line-height: 1;
        display: inline-block;
    }

.ew-h-macc.is-open .ew-h-mlink .ew-h-caret {
    transform: rotate(180deg);
}

.ew-h-macc > .ew-h-mlink {
    cursor: pointer;
}

.ew-h-mpanel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s cubic-bezier(.2, .7, .2, 1);
}

.ew-h-macc.is-open .ew-h-mpanel {
    grid-template-rows: 1fr;
}

.ew-h-mpanel-in {
    overflow: hidden;
    min-height: 0;
}

.ew-h-msub a {
    display: block;
    padding: 11px 4px 11px 16px;
    font-size: 15px;
    color: var(--ew-muted);
    border-bottom: 1px solid var(--ew-line);
    text-decoration: none;
}

    .ew-h-msub a:hover {
        color: var(--ew-ink);
    }

.ew-h-mcta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

    .ew-h-mcta .ew-btn {
        justify-content: center;
    }

/* ============================================================
   PUBLIC CALCULATOR — PublicCalculator/Index.cshtml
   ------------------------------------------------------------
   Ported from calculator.html. Reuses ew-intro-section /
   ew-section / ew-section-head / ew-feature-row / ew-feature-card
   / ew-shell-field / ew-shell-field-row / ew-btn / ew-pill / arr.
   New ew-calc-* classes only for calculator-specific UI.
   All icons are Font Awesome free.
   ============================================================ */

/* ---- Switch (Salary packaging | Novated lease) ---- */
.ew-calc-switch {
    display: inline-flex;
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-radius: 100px;
    padding: 5px;
    margin-top: 30px;
    gap: 4px;
}

    .ew-calc-switch a,
    .ew-calc-switch button {
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        border: none;
        background: transparent;
        color: var(--ew-muted);
        padding: 9px 20px;
        border-radius: 100px;
        cursor: pointer;
        transition: background .18s ease, color .18s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .ew-calc-switch .is-on {
        background: var(--ew-ink);
        color: #fff;
    }

    .ew-calc-switch a:hover:not(.is-on),
    .ew-calc-switch button:hover:not(.is-on) {
        color: var(--ew-ink);
    }

/* ---- Calculator section padding ---- */
.ew-calc-section {
    padding-top: 26px;
}

/* ---- Two-column layout: panels left, sticky summary right ---- */
.ew-calc-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 26px;
    align-items: start;
}

/* ---- Panel card ---- */
.ew-calc-panel {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 22px;
}

.ew-calc-panel-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
}

.ew-calc-panel-num {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: 28px;
    color: var(--ew-green-dark);
    line-height: 1;
    flex: none;
}

.ew-calc-panel-head h2 {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--ew-ink);
    margin: 0;
}

.ew-calc-panel-head p {
    font-size: 13.5px;
    color: var(--ew-muted);
    margin: 4px 0 0;
}

/* ---- Sector picker (radio cards) ---- */
.ew-calc-sectors {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.ew-calc-sector {
    position: relative;
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    background: var(--ew-paper);
    padding: 18px 16px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-sans);
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

    .ew-calc-sector:hover {
        border-color: #C9D6BC;
        transform: translateY(-1px);
    }

    .ew-calc-sector.is-on {
        border-color: var(--ew-green);
        background: var(--ew-green-pale);
    }

.ew-calc-sector-ic {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--ew-green-pale);
    display: grid;
    place-items: center;
    color: var(--ew-green-dark);
    margin-bottom: 12px;
    transition: background .18s ease, color .18s ease;
    font-size: 15px;
}

.ew-calc-sector.is-on .ew-calc-sector-ic {
    background: var(--ew-green);
    color: #08210A;
}

.ew-calc-sector b {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ew-ink);
}
/* Description span — restrict to the unclassed span only so this rule
   doesn't accidentally match .ew-calc-sector-tick / .ew-calc-sector-ic
   (which are also <span> children) and override their display values. */
.ew-calc-sector > span:not([class]) {
    display: block;
    font-size: 12px;
    color: var(--ew-muted);
    margin-top: 4px;
}

.ew-calc-sector-tick {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ew-green);
    display: none;
    place-items: center;
    color: #08210A;
    font-size: 9px;
}
/* High-specificity override so we can never lose to a generic
   .ew-calc-sector span rule again. */
.ew-calc-sector.is-on > .ew-calc-sector-tick {
    display: grid;
}

/* ---- Money input wrapper (adds $ prefix) ---- */
.ew-calc-money {
    position: relative;
}

    .ew-calc-money::before {
        content: "$";
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 15px;
        color: var(--ew-muted);
        pointer-events: none;
    }

    .ew-calc-money input {
        padding-left: 28px !important;
    }

/* ---- Toggle switches (TFT, HECS) ---- */
.ew-calc-tog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--ew-line);
}

    .ew-calc-tog-row:first-of-type {
        border-top: none;
    }

    .ew-calc-tog-row b {
        font-size: 14.5px;
        font-weight: 500;
        color: var(--ew-ink);
        display: block;
    }

    .ew-calc-tog-row span {
        font-size: 12.5px;
        color: var(--ew-muted);
        display: block;
        margin-top: 2px;
        max-width: 380px;
    }

.ew-calc-tog {
    position: relative;
    width: 46px;
    height: 26px;
    flex: none;
    border-radius: 100px;
    background: var(--ew-line);
    border: none;
    cursor: pointer;
    transition: background .18s ease;
    padding: 0;
}

    .ew-calc-tog::after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 3px rgba(14, 26, 14, .25);
        transition: transform .18s ease;
    }

    .ew-calc-tog.is-on {
        background: var(--ew-green);
    }

        .ew-calc-tog.is-on::after {
            transform: translateX(20px);
        }

/* ---- Money input base — used both inside .ew-shell-field (salary)
   and standalone (benefit rows). Standalone .ew-calc-money inputs
   are NOT inside .ew-shell-field, so they don't inherit the shell
   field styles — set them explicitly here. */
.ew-calc-money {
    position: relative;
    display: block;
}

    .ew-calc-money input {
        width: 100%;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 500;
        color: var(--ew-ink);
        background: var(--ew-white);
        border: 1px solid var(--ew-line);
        border-radius: 11px;
        padding: 12px 14px 12px 28px;
        height: auto;
        line-height: 1.4;
        transition: border-color .15s ease, box-shadow .15s ease;
        box-shadow: none;
        margin: 0;
    }

        .ew-calc-money input:focus {
            outline: none;
            border-color: var(--ew-green);
            box-shadow: 0 0 0 3px var(--ew-green-pale);
        }
/* When .ew-calc-money sits inside a .ew-shell-field, use paper bg
   to match the rest of that form row */
.ew-shell-field .ew-calc-money input {
    background: var(--ew-paper);
}

/* ---- Benefit rows ---- */
.ew-calc-benefit {
    border: 1px solid var(--ew-line);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 14px;
    background: var(--ew-paper);
}

    .ew-calc-benefit:last-child {
        margin-bottom: 0;
    }

.ew-calc-benefit-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}
    /* Title + description column: takes the remaining space, can shrink */
    .ew-calc-benefit-top > div:first-child {
        flex: 1 1 220px;
        min-width: 0;
    }

    .ew-calc-benefit-top b {
        font-size: 15px;
        font-weight: 600;
        display: block;
        letter-spacing: -.01em;
        color: var(--ew-ink);
    }

    .ew-calc-benefit-top small {
        font-size: 12.5px;
        color: var(--ew-muted);
        display: block;
        margin-top: 3px;
        max-width: 340px;
    }
/* Right column: fixed money input + cap hint */
.ew-calc-benefit-field {
    flex: 0 0 170px;
    text-align: right;
    min-width: 0;
}

    .ew-calc-benefit-field .ew-calc-money {
        width: 100%;
    }

        .ew-calc-benefit-field .ew-calc-money input {
            padding: 11px 14px 11px 28px;
            font-weight: 600;
            text-align: right;
            font-variant-numeric: tabular-nums;
            background: var(--ew-white);
        }

.ew-calc-cap-hint {
    display: block;
    font-size: 12px;
    color: var(--ew-muted);
    margin-top: 8px;
    line-height: 1.5;
}

    .ew-calc-cap-hint b {
        color: var(--ew-green-dark);
        font-weight: 600;
    }

/* ---- Sticky summary card (dark) ---- */
.ew-calc-summary {
    position: sticky;
    top: 92px;
}

.ew-calc-sum {
    background: var(--ew-ink);
    border-radius: 22px;
    padding: 30px 28px;
    color: #E9EFE6;
    position: relative;
    overflow: hidden;
}

    .ew-calc-sum::after {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(108, 179, 63, .25), transparent 62%);
        top: -190px;
        right: -120px;
        pointer-events: none;
    }

.ew-calc-sum-kick {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ew-green);
    position: relative;
}

.ew-calc-sum-big {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: clamp(46px, 5vw, 58px);
    line-height: 1;
    letter-spacing: -.01em;
    color: #fff;
    margin-top: 14px;
    position: relative;
}

    .ew-calc-sum-big small {
        font-family: var(--font-sans);
        font-style: normal;
        font-size: 14px;
        color: #A9B6A6;
        letter-spacing: 0;
        margin-left: 6px;
    }

.ew-calc-sum-sub {
    font-size: 13.5px;
    color: #A9B6A6;
    margin: 10px 0 0;
    position: relative;
}

.ew-calc-sum-rows {
    margin-top: 26px;
    border-top: 1px solid #25342A;
    position: relative;
}

.ew-calc-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid #25342A;
    font-size: 14px;
    color: #A9B6A6;
}

    .ew-calc-sum-row b {
        font-family: var(--font-sans);
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        letter-spacing: -.01em;
        white-space: nowrap;
    }

    .ew-calc-sum-row.is-neg b {
        color: #E8B96A;
    }

.ew-calc-sum-foot {
    margin: 18px 0 0;
    font-size: 12px;
    color: #7E8C7B;
    position: relative;
    line-height: 1.55;
}

.ew-calc-sum-cta {
    margin-top: 22px;
    position: relative;
}

    .ew-calc-sum-cta .ew-btn {
        width: 100%;
        justify-content: center;
    }

/* ---- "Add a car" mini card under the summary ---- */
.ew-calc-car-card {
    margin-top: 18px;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 18px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ew-calc-car-ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ew-green-pale);
    display: grid;
    place-items: center;
    color: var(--ew-green-dark);
    flex: none;
    font-size: 18px;
}

.ew-calc-car-card b {
    font-size: 15px;
    font-weight: 600;
    display: block;
    letter-spacing: -.01em;
    color: var(--ew-ink);
}

.ew-calc-car-card span {
    font-size: 13px;
    color: var(--ew-muted);
    display: block;
    margin-top: 3px;
}

.ew-calc-car-card a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ew-green-dark);
    white-space: nowrap;
    margin-left: auto;
    text-decoration: none;
    transition: color .15s ease;
}

    .ew-calc-car-card a:hover {
        color: var(--ew-ink);
    }

/* ---- Salary Impact Statement accordion ---- */
.ew-calc-stmt {
    margin-top: 6px;
}

.ew-calc-stmt-toggle {
    width: 100%;
    font-family: var(--font-sans);
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: border-color .18s ease;
}

    .ew-calc-stmt-toggle:hover {
        border-color: var(--ew-green);
    }

    .ew-calc-stmt-toggle b {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.01em;
        display: flex;
        align-items: center;
        gap: 11px;
        color: var(--ew-ink);
    }

        .ew-calc-stmt-toggle b i {
            color: var(--ew-green-dark);
            font-size: 16px;
        }

.ew-calc-stmt-chev {
    transition: transform .3s ease;
    color: var(--ew-muted);
    font-size: 14px;
}

.ew-calc-stmt.is-open .ew-calc-stmt-chev {
    transform: rotate(180deg);
}

.ew-calc-stmt-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1);
}

.ew-calc-stmt.is-open .ew-calc-stmt-body {
    grid-template-rows: 1fr;
}

.ew-calc-stmt-inner {
    overflow: hidden;
    min-height: 0;
}

.ew-calc-stmt-table {
    margin-top: 18px;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    overflow: hidden;
}

    .ew-calc-stmt-table table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .ew-calc-stmt-table th {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--ew-muted);
        text-align: right;
        padding: 15px 18px;
        background: var(--ew-paper);
        border-bottom: 1px solid var(--ew-line);
    }

        .ew-calc-stmt-table th:first-child {
            text-align: left;
            color: var(--ew-ink);
        }

    .ew-calc-stmt-table td {
        padding: 12px 18px;
        border-bottom: 1px solid var(--ew-line);
        text-align: right;
        color: var(--ew-muted);
        font-variant-numeric: tabular-nums;
    }

        .ew-calc-stmt-table td:first-child {
            text-align: left;
            color: var(--ew-ink);
        }

    .ew-calc-stmt-table tr:last-child td {
        border-bottom: none;
    }

    .ew-calc-stmt-table tr.hl td {
        background: var(--ew-green-pale);
        font-weight: 600;
        color: var(--ew-ink);
    }

        .ew-calc-stmt-table tr.hl td:last-child {
            color: var(--ew-green-dark);
        }

/* ---- Car search summary (EziwayCarSearch.cshtml) ----
   "Novated Lease Calculator Summary" — reuses the calculator's
   dark .ew-calc-sum card, paired with a white vehicle card. */
.ew-car-summary {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 22px;
    align-items: stretch;
}

.ew-car-sum-ev {
    color: #E8B96A;
}

.ew-car-sum-cycle {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    position: relative;
    font-size: 14px;
    color: #A9B6A6;
}

    .ew-car-sum-cycle label {
        margin: 0;
    }

    .ew-car-sum-cycle select {
        font-family: var(--font-sans);
        font-size: 14px;
        color: #fff;
        background: rgba(255, 255, 255, .08);
        border: 1px solid #25342A;
        border-radius: 10px;
        padding: 8px 12px;
        cursor: pointer;
    }

        .ew-car-sum-cycle select:focus {
            outline: none;
            border-color: var(--ew-green);
        }

        .ew-car-sum-cycle select option {
            color: var(--ew-ink);
            background: var(--ew-white);
        }

.ew-car-sum-vehicle {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

.ew-car-sum-image img {
    max-height: 280px;
    object-fit: contain;
}

.ew-car-sum-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ---- Car search enquiry form (EziwayCarSearch.cshtml) ----
   "Please Fill Your Details and Preferences" — reuses the public
   calculator's panel, save-field and slider-card components. */
.ew-car-enquiry {
    max-width: 980px;
    margin: 0 auto;
}

.ew-car-enquiry-group-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ew-muted);
    border-bottom: 1px dashed var(--ew-line);
    padding-bottom: 8px;
    margin: 26px 0 16px;
}

    .ew-car-enquiry-group-title:first-child {
        margin-top: 0;
    }

.ew-req {
    color: #C0392B;
}

.ew-car-enquiry-sliders {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 20px;
}

    [data-ng-controller="searchCarController"] .ew-car-enquiry-sliders .ew-slider-card {
        margin-bottom: 0;
    }

.ew-car-enquiry-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 8px;
}

.ew-car-enquiry-choice > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--ew-muted);
    margin-bottom: 7px;
}

.ew-car-enquiry-choice .ew-seg-toggle {
    margin-bottom: 0;
}

.ew-car-enquiry-choice .ew-seg-toggle-item {
    white-space: normal;
}

.ew-car-enquiry-office {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 8px;
}

.ew-car-office-checks {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 10px 0;
}

.ew-car-office-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ew-ink);
    margin: 0;
    cursor: pointer;
}

    .ew-car-office-check input[type="checkbox"] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--ew-green);
        cursor: pointer;
    }

/* ---- Car search detailed report (EziwayCarSearch.cshtml) ----
   Reuses the .ew-calc-stmt-table statement design; this wrapper
   centres the report and stacks the tables + disclaimer. */
.ew-car-report {
    max-width: 860px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

    .ew-car-report .ew-calc-stmt-table {
        margin-top: 0;
    }

        .ew-car-report .ew-calc-stmt-table th:first-child {
            width: 56%;
        }

        /* Keep currency values on one line; labels do the wrapping */
        .ew-car-report .ew-calc-stmt-table td + td {
            white-space: nowrap;
        }

.ew-car-ev-note {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #C0392B;
    margin-top: 2px;
}

/* ---- Disclaimer box ---- */
.ew-calc-disclaim-section {
    padding-top: 0;
}

.ew-calc-disclaim {
    border: 1px solid var(--ew-line);
    border-radius: 16px;
    background: var(--ew-paper);
    padding: 26px 28px;
}

    .ew-calc-disclaim h3 {
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ew-muted);
        margin: 0 0 12px;
        display: flex;
        align-items: center;
        gap: 9px;
    }

        .ew-calc-disclaim h3 i {
            color: var(--ew-green-dark);
            font-size: 14px;
        }

    .ew-calc-disclaim ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .ew-calc-disclaim li {
        font-size: 13px;
        color: var(--ew-muted);
        line-height: 1.6;
        padding-left: 16px;
        position: relative;
        margin-bottom: 6px;
    }

        .ew-calc-disclaim li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--ew-green);
        }

/* ============================================================
   NovatedSoftwareAsAService.cshtml — page-specific tweaks
   The page reuses the .ew-saas-page system; .ew-nlsaas-page just
   hosts the few overrides that differ (3-col step grid, EV-tag
   colour for the saas pill on the hero mock, etc.).
   ============================================================ */
.ew-steps-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}
/* On the dealer page the right-hand pill on the hero mock reads
   "your brand", which fits better with a slightly tighter cap. */
.ew-nlsaas-page .ew-saas-pill i {
    color: var(--ew-green-dark);
}

/* ============================================================
   CarLeasing/EziwayCarSearch.cshtml — page-scoped overflow fix
   Flexslider's `.slides` UL + Owl Carousel + ion-rangeSlider all
   set inline pixel widths during init that can exceed the viewport
   on narrow screens, producing a horizontal scrollbar specific to
   this page. `overflow-x: clip` hides the overflow WITHOUT making
   the wrapper a new scroll container (so sticky / position:fixed
   children inside the page still anchor to the viewport correctly).
   ============================================================ */
.ew-carsearch-page,
.ew-specialoffer-page {
    overflow-x: clip;
    /* Fallback for browsers that don't support `clip` (older Safari).
       `hidden` is functionally equivalent here — the page already has
       no children needing escape-the-clip behaviour. */
    overflow-x: hidden;
    overflow-x: clip;
}

/* ============================================================
   Sitemap.cshtml — BENTO LAYOUT
   6-column grid. Two hero cards (Salary Packaging, Novated
   Leasing) each span 3 columns and host a nested 2-col group
   grid inside; six compact cards in two 3-up rows below span
   2 columns each. Collapses cleanly to 2-up then 1-up on
   narrower viewports.
   Reuses the existing card hover language, icon chip pattern
   and link-row chevron from the rest of the site.
   ============================================================ */
.ew-sitemap-grid {
    /* 3-column grid. The 3 hero cards fill row 1, the 3 compact cards
       fill row 2 — heroes are distinguished by their content density
       and styling (gradient bg, larger icon, kicker) rather than width.
       This stays balanced no matter how many heroes vs compacts there
       are, unlike the earlier 6-col span layout that left orphan rows. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ew-sitemap-card {
    grid-column: span 1;
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .ew-sitemap-card:hover {
        border-color: var(--ew-green);
        transform: translateY(-2px);
        box-shadow: var(--ew-shadow1);
    }

/* Hero variant — same column width as compacts on the 3-col grid,
   but distinguished by a subtle paper-tint gradient, larger title,
   bigger icon chip and a kicker label. The taller nested-group
   content naturally gives heroes more vertical presence too. */
.ew-sitemap-card--hero {
    grid-column: span 1;
    padding: 30px 28px 24px;
    background: linear-gradient(180deg, var(--ew-green-pale) 0%, var(--ew-white) 50%);
    border-color: var(--ew-line);
    gap: 22px;
}

    .ew-sitemap-card--hero:hover {
        /* Hero cards already have a tint — keep hover subtle, no lift. */
        transform: none;
        border-color: var(--ew-green);
        box-shadow: var(--ew-shadow2);
    }

/* Card head: icon chip on the left, kicker + title + overview link
   stacked on the right. */
.ew-sitemap-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ew-sitemap-card-ic {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ew-sitemap-card--hero .ew-sitemap-card-ic {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--ew-green);
    color: #08210A;
    font-size: 22px;
}

.ew-sitemap-card-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.ew-sitemap-card-kicker {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ew-green-dark);
}

.ew-sitemap-card-ttl {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--ew-ink);
    margin: 0;
    line-height: 1.2;
}

    .ew-sitemap-card-ttl em {
        font-family: var(--font-serif);
        font-style: italic;
        font-weight: 400;
        color: var(--ew-green-dark);
    }

.ew-sitemap-card--hero .ew-sitemap-card-ttl {
    font-size: 26px;
    letter-spacing: -.02em;
}

.ew-sitemap-overview {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ew-green-dark);
    text-decoration: none;
    letter-spacing: .01em;
    width: max-content;
}

    .ew-sitemap-overview:hover {
        color: var(--ew-green);
    }

    .ew-sitemap-overview .arr {
        transition: transform .18s ease;
    }

    .ew-sitemap-overview:hover .arr {
        transform: translateX(3px);
    }

.ew-sitemap-overview--muted {
    color: var(--ew-muted);
    pointer-events: none;
}

/* Inside hero cards: single-column subsection list. Hero cards are
   now narrower (1/3 of the row), so a 2-col nested grid is too tight
   for the Employee / Employer link lists — stack them vertically
   inside each hero card instead. */
.ew-sitemap-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.ew-sitemap-card--hero .ew-sitemap-group {
    padding: 0;
    border-top: 0;
}

.ew-sitemap-group--full {
    grid-column: 1 / -1;
    border-top: 1px dashed var(--ew-line);
    padding-top: 14px !important;
}

.ew-sitemap-group-ttl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ew-muted);
    margin: 0 0 8px;
}

    .ew-sitemap-group-ttl i {
        width: 14px;
        color: var(--ew-green-dark);
        font-size: 11px;
    }

/* Link rows — leading green chevron, brand-green hover, subtle slide. */
.ew-sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 2px;
}

    .ew-sitemap-links li {
        margin: 0;
    }

    .ew-sitemap-links a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 500;
        color: var(--ew-ink);
        text-decoration: none;
        line-height: 1.4;
        transition: color .15s ease, transform .15s ease;
    }

        .ew-sitemap-links a::before {
            content: "›";
            color: var(--ew-green-dark);
            font-weight: 700;
            font-size: 14px;
            line-height: 1;
            opacity: .55;
            transition: opacity .15s ease, transform .15s ease;
        }

        .ew-sitemap-links a:hover {
            color: var(--ew-green-dark);
        }

            .ew-sitemap-links a:hover::before {
                opacity: 1;
                transform: translateX(2px);
            }

/* Quick Links inline variant — pill-row instead of stacked. */
.ew-sitemap-links--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

    .ew-sitemap-links--inline a {
        padding: 4px 0;
    }

.ew-foot-cols a {
    font-size: 12px;
    color: inherit;
}

.car-acc-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: var(--ew-radius);
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    width: 100%;
    cursor: default;
}

    .car-acc-box .BodyText {
        font-size: 14px;
        color: var(--ew-ink);
        margin: 0;
    }
.flexslider {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    overflow: hidden;
    box-shadow: none;
}
.Calculator-text01 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ew-ink);
    margin: 0;
}
#baseDescriptionResultDivSection .BodyText {
    color: var(--ew-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
#baseDescriptionResultDivSection .car-acc-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    border-radius: var(--ew-radius);
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    width: 100%;
    cursor: default;
}
    #baseDescriptionResultDivSection .car-acc-box:hover {
        border-color: var(--ew-line);
        color: var(--ew-ink);
    }
#baseDescriptionResultDivSection .album-box {
    border-radius: var(--ew-radius-lg);
    padding: 32px;
    border: 1px solid var(--ew-line);
}
#enquiryDetailsDiv .ew-shell {
    background: var(--ew-ink);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    position: relative;
    box-shadow: var(--ew-shadow3);
}
.EziButtonTrans {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    border: none;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
    font-family: var(--font-sans);
    background: var(--ew-ink);
    color: var(--ew-white);
    text-decoration: none;
}
.popover_menu {
    margin: unset;
    float: right;
    margin-right: -7px;
    text-align: right;
    box-sizing: border-box;
    margin-bottom: 24px;
}
@media (max-width: 991.98px) {
    .ew-shell {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }
}

/* ============================================================
   PublicCalculator — Panel 04: Save or share your statement
   ============================================================ */
.ew-calc-save-panel {
    margin-top: 12px;
}

/* Error alert card */
.ew-calc-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 44px 16px 18px;
    background: #fef4f4;
    border: 1px solid #f2c9c9;
    border-left: 4px solid #d64545;
    border-radius: var(--ew-radius, 14px);
    color: #7a2020;
    margin: 4px 0 22px;
}

    .ew-calc-alert-ic {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-grid;
        place-items: center;
        background: #f7dcdc;
        color: #d64545;
        font-size: 15px;
    }

    .ew-calc-alert-body {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.5;
    }

        .ew-calc-alert-body b {
            display: block;
            margin-bottom: 4px;
            color: #7a2020;
        }

        .ew-calc-alert-body ul {
            margin: 0;
            padding-left: 18px;
        }

            .ew-calc-alert-body ul li {
                margin: 2px 0;
            }

    .ew-calc-alert-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 0;
        background: transparent;
        color: #7a2020;
        cursor: pointer;
        display: grid;
        place-items: center;
        font-size: 12px;
        transition: background .15s ease;
    }

        .ew-calc-alert-close:hover {
            background: #f7dcdc;
        }

/* Field row: 3 equal columns on desktop, stacks on mobile */
.ew-calc-save-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    margin-bottom: 20px;
}

    .ew-calc-save-fields .ew-shell-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

        .ew-calc-save-fields .ew-shell-field label {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--ew-muted);
            margin: 0;
        }

        .ew-calc-save-fields .ew-shell-field input {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid var(--ew-line);
            border-radius: 10px;
            background: var(--ew-white, #fff);
            font-size: 15px;
            color: var(--ew-ink);
            font-family: inherit;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

            .ew-calc-save-fields .ew-shell-field input:focus {
                outline: 0;
                border-color: var(--ew-green);
                box-shadow: 0 0 0 3px rgba(70, 133, 12, .15);
            }

            .ew-calc-save-fields .ew-shell-field input::placeholder {
                color: color-mix(in srgb, var(--ew-muted) 70%, transparent);
            }

.ew-calc-save-actions {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px dashed var(--ew-line);
    margin-top: 8px;
}

    .ew-calc-save-actions .ew-btn i {
        margin-right: 8px;
    }

.ew-calc-captcha {
    margin-right: auto;
    position: relative;
    width: 234px;
    min-height: 60px;
    flex: 0 0 auto;
}

    .ew-calc-captcha .g-recaptcha {
        transform: scale(0.77);
        -webkit-transform: scale(0.77);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }

    .ew-calc-captcha #errorLabel {
        display: block;
        color: #d33;
        font-size: 12px;
        line-height: 1.3;
        margin-top: 4px;
    }

.ew-calc-save-note {
    margin: 14px 0 0;
    font-size: 12.5px;
    color: var(--ew-muted);
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .ew-calc-save-note i {
        color: var(--ew-green-dark);
        font-size: 11px;
    }
.textmatter01 {
    font-size: 15px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}
.textmatter01 p{
    font-size: 15px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin-bottom: 0;
}

.ew-hero-slide {
    min-height: 580px;
}

.ew-applepay-contactless {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-top: 14px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--ew-radius-pill, 999px);
    font-size: 12px;
    font-weight: 600;
    color: var(--ew-green-lt, #b7d99b);
    letter-spacing: .05em;
    text-transform: uppercase;
}

    .ew-applepay-contactless img {
        height: 20px;
        width: auto;
        filter: brightness(0) invert(1); /* white-out the black PNG on dark bg */
        opacity: .95;
    }

.ew-steps-grid.ew-steps-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

button.ew-video-frame--link {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

    button.ew-video-frame--link:focus-visible {
        outline: 3px solid rgba(70, 133, 12, .35);
        outline-offset: 2px;
    }

/* Ensure the video-modal iframe fills the modal with a proper 16:9 frame */
.ew-modal--video .ew-video-frame,
.watch-video-box .ew-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--ew-radius, 14px);
    overflow: hidden;
}

    .ew-modal--video .ew-video-frame iframe,
    .watch-video-box .ew-video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Trademark / legal notice at page foot */
.ew-applepay-legal {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 22px;
    background: var(--ew-paper);
    border: 1px solid var(--ew-line);
    border-left: 3px solid var(--ew-green);
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--ew-muted);
    line-height: 1.65;
    max-width: 960px;
    margin: 0 auto;
}

    .ew-applepay-legal i {
        color: var(--ew-green-dark);
        font-size: 15px;
        flex: 0 0 auto;
        padding-top: 2px;
    }

    .ew-applepay-legal p {
        margin: 0;
        font-style: italic;
    }

.ew-video-frame--link {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

    /* The thumbnail image fills the 16:9 frame */
    .ew-video-frame--link .ew-video-thumb,
    .ew-video-frame--link > img:first-of-type {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .35s ease, filter .25s ease;
    }

    /* YouTube icon overlay, centred, subtle idle → punchy on hover */
    .ew-video-frame--link .youtube-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 64px;
        height: auto;
        opacity: .92;
        transition: transform .25s ease, opacity .2s ease;
        pointer-events: none;
        z-index: 2;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35));
    }

    .ew-video-frame--link:hover .ew-video-thumb,
    .ew-video-frame--link:focus-visible .ew-video-thumb,
    .ew-video-frame--link:hover > img:first-of-type,
    .ew-video-frame--link:focus-visible > img:first-of-type {
        transform: scale(1.04);
        filter: brightness(.85);
    }

    .ew-video-frame--link:hover .youtube-icon,
    .ew-video-frame--link:focus-visible .youtube-icon {
        transform: translate(-50%, -50%) scale(1.12);
        opacity: 1;
    }

.ew-diff-section .ew-section-head {
    max-width: 720px;
    margin-bottom: 46px;
}

.ew-diff-section .ew-section-head h2 em {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    color: var(--ew-green-dark);
}

.ew-diff-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 22px;
}

.ew-diff-hero {
    grid-row: 1 / span 3;
    background: var(--ew-ink);
    color: #E9EFE6;
    border-radius: 22px;
    padding: 44px 42px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
}

    .ew-diff-hero::before {
        content: "";
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(108,179,63,.28), transparent 62%);
        top: -280px;
        right: -160px;
        pointer-events: none;
    }

.ew-diff-steam {
    position: absolute;
    top: 44px;
    left: 42px;
    opacity: .9;
}

    .ew-diff-steam path {
        stroke: var(--ew-green);
        stroke-width: 2.2;
        fill: none;
        stroke-linecap: round;
    }

    .ew-diff-steam .s1,
    .ew-diff-steam .s2,
    .ew-diff-steam .s3 {
        animation: ewDiffSteam 3.4s ease-in-out infinite;
    }

    .ew-diff-steam .s2 {
        animation-delay: .7s;
    }

    .ew-diff-steam .s3 {
        animation-delay: 1.4s;
    }

@keyframes ewDiffSteam {
    0%, 100% {
        opacity: .25;
        transform: translateY(0);
    }

    50% {
        opacity: .9;
        transform: translateY(-6px);
    }
}

.ew-diff-tagline {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #fff;
    position: relative;
    max-width: 400px;
    margin: 0;
}

    .ew-diff-tagline b {
        color: var(--ew-green);
        font-style: normal;
        font-family: inherit;
        font-weight: 600;
    }

.ew-diff-hero h3 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
    color: var(--ew-green);
    position: relative;
    margin: 26px 0 10px;
}

.ew-diff-hero p {
    font-size: 15.5px;
    color: #A9B6A6;
    position: relative;
    max-width: 420px;
    margin: 0;
}

.ew-diff-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 12.5px;
    font-weight: 500;
    color: #DCE6D7;
    background: #1B2A1D;
    border: 1px solid #26362A;
    padding: 7px 14px;
    border-radius: 100px;
    width: fit-content;
}

    .ew-diff-chip .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--ew-green);
    }

.ew-diff-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 30px 30px 32px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

    .ew-diff-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 30px -18px rgba(14,26,14,.3);
        border-color: #D3DBCB;
    }

.ew-diff-ic {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ew-green-pale);
    display: grid;
    place-items: center;
    color: var(--ew-green-dark);
    margin-bottom: 18px;
    font-size: 18px;
}

.ew-diff-card h3 {
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -.01em;
    margin-bottom: 9px;
    color: var(--ew-ink);
}

.ew-diff-card p {
    font-size: 14.5px;
    color: var(--ew-muted);
    margin: 0;
}

.ew-diff-zero {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    color: var(--ew-green-dark);
    font-size: 15.5px;
    display: block;
    margin-top: 10px;
}

.ew-diff-disclaimer {
    margin-top: 34px;
    font-size: 12.5px;
    color: var(--ew-muted);
    max-width: 820px;
    line-height: 1.6;
}

/* Article + Showcase breadcrumb — used inside ArticlesDetails.cshtml
   and ShowcaseArticles.cshtml. The legacy .ShowcaseTitle in
   style-new.css forces `white-space: nowrap` + `max-width: 60%`, which
   pushes long article titles beyond the viewport on mobile and
   creates a horizontal-scroll layout bug. Override here so the
   breadcrumb wraps as a proper flex container and the title text
   flows onto multiple lines. */
nav.Breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ew-ink);
    max-width: 100%;
}

.Breadcrumb {
    font-size: 15px;
    color: rgba(var(--eziway-black), 1);
    text-decoration: none;
}

nav.Breadcrumb > a.Breadcrumb {
    color: var(--ew-muted);
    transition: color .15s;
    flex: 0 0 auto;
}

    nav.Breadcrumb > a.Breadcrumb:hover {
        color: var(--ew-green-dark);
    }

nav.Breadcrumb > .BreadcrumbIcon {
    color: var(--ew-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

nav.Breadcrumb > .ShowcaseTitle {
    /* Force the legacy rules to give up nowrap/max-width so long
       titles wrap normally instead of forcing horizontal overflow. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
    display: inline !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--ew-ink);
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
}

/* ============================================================
   Community Sponsorships — sponsor + conference grids + request form
   Used in Community_Sponsorships.cshtml. Responsive rules live in
   stylesheet2026-media.css.
   ============================================================ */
.ew-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.ew-sponsor-grid.ew-sponsor-grid--conf {
    grid-template-columns: repeat(5, 1fr);
    max-width: 900px;
    margin: 0 auto;
}

.ew-sponsor-card {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: var(--ew-radius);
    padding: 24px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .ew-sponsor-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -14px rgba(14, 26, 14, .18);
        border-color: var(--ew-green);
    }

.ew-sponsor-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--ew-green-pale);
    color: var(--ew-green-dark);
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.01em;
    flex: none;
    overflow: hidden;
}

/* Image variant of the logo badge — hosts a proper <img> instead of a
   letter monogram. White background so brand colours don't fight the
   green-pale disc, contained inside the circle without distortion. */
.ew-sponsor-logo.ew-sponsor-logo--img {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    padding: 6px;
}

    .ew-sponsor-logo.ew-sponsor-logo--img img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }

.ew-sponsor-name {
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ew-ink);
    line-height: 1.35;
}

/* ---- Sponsorship request form (Community_Sponsorships.cshtml) ---- */
.ew-sponsor-form {
    background: var(--ew-white);
    border: 1px solid var(--ew-line);
    border-radius: 22px;
    padding: 36px;
    box-shadow: 0 4px 24px -12px rgba(14, 26, 14, .08);
}

.ew-sponsor-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

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

.ew-sponsor-form-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.ew-sponsor-form-note {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--ew-green-pale);
    border: 1px solid var(--ew-green);
    border-radius: 12px;
    font-size: 14px;
    color: var(--ew-ink);
    line-height: 1.5;
}

    .ew-sponsor-form-note a {
        color: var(--ew-green-dark);
        text-decoration: underline;
    }

.ew-sponsor-form-alt {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 13.5px;
    color: var(--ew-muted);
    text-align: center;
}

    .ew-sponsor-form-alt a {
        color: var(--ew-green-dark);
        text-decoration: none;
        border-bottom: 1px solid var(--ew-green-pale);
        transition: border-color .15s;
    }

        .ew-sponsor-form-alt a:hover {
            border-bottom-color: var(--ew-green);
        }
/* ============================================================
   ThankYou / ThankYouFeedback — success confirmation page
   Base rules only; responsive fall-throughs are in
   stylesheet2026-media.css.
   ============================================================ */
.ew-thankyou-hero {
    text-align: center;
    padding-top: clamp(48px, 8vw, 96px);
    padding-bottom: clamp(32px, 5vw, 56px);
}

/* Big animated success medal */
.ew-thankyou-medal {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ew-green), var(--ew-green-dark));
    color: var(--ew-white);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 40px -14px rgba(46, 138, 90, .55);
}

    .ew-thankyou-medal i {
        font-size: 44px;
        line-height: 1;
        animation: ewThankyouPop .6s cubic-bezier(.2, .8, .2, 1.2) .1s both;
    }

    .ew-thankyou-medal .ring {
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 2px solid var(--ew-green);
        opacity: 0;
        animation: ewThankyouRing 1.6s ease-out .3s infinite;
    }

@keyframes ewThankyouPop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

@keyframes ewThankyouRing {
    0%   { transform: scale(.85); opacity: .55; }
    100% { transform: scale(1.35); opacity: 0; }
}

.ew-thankyou-eyebrow {
    justify-content: center;
    margin-bottom: 12px;
}

.ew-thankyou-page .ew-intro-heading {
    margin-bottom: 16px;
}

.ew-thankyou-page .ew-intro-lead {
    max-width: 680px;
    margin: 0 auto 32px;
}

.ew-thankyou-ctas {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* "What happens next" — align feature-card heights across the row */
.ew-thankyou-steps .ew-feature-card {
    height: 100%;
}

/* Follow-us section */
.ew-thankyou-social-section {
    padding-top: clamp(32px, 5vw, 56px);
}

.ew-thankyou-social {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

    .ew-thankyou-social li { margin: 0; }

    .ew-thankyou-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: var(--ew-paper);
        color: var(--ew-ink);
        border: 1px solid var(--ew-line);
        font-size: 20px;
        text-decoration: none;
        transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .ew-thankyou-social a:hover,
    .ew-thankyou-social a:focus-visible {
        transform: translateY(-3px);
        background: var(--ew-green);
        color: var(--ew-white);
        border-color: var(--ew-green);
        box-shadow: 0 10px 22px -10px rgba(46, 138, 90, .55);
    }
.BodyText, .article-text01, .EziAccordianBody ul li, td, p {
    font-size: 15px;
    color: var(--ew-muted);
    line-height: 1.65;
    margin-bottom: 20px;
}
.ew-image-card:has(> .InstaImg) {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: #000;
    padding: 0;
    border-radius: var(--ew-radius-lg);
    box-shadow: var(--ew-shadow2);
    transition: transform .35s ease, box-shadow .35s ease;
    width: 100%;
    /* Override the inline `style="height: 100%"` on the Razor template
       that used to force tiles to stretch to the tallest sibling and
       break the square aspect-ratio. With height:auto the aspect-ratio
       rule takes over and every tile becomes a perfect square at every
       breakpoint — no uneven gaps between rows. */
    height: auto !important;
    min-height: 0;
}

/* Also strip the equal-height flex stretch that Bootstrap .row applies
   to child cols — each tile now sizes to itself via aspect-ratio, so
   we don't want the flex container forcing extra height on shorter
   siblings (which was leaving black strips on the tall ones). */
.row:has(.InstaImg) {
    align-items: flex-start;
}

    .ew-image-card:has(> .InstaImg):hover,
    .ew-image-card:has(> .InstaImg):focus-within {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .35);
    }

.ew-image-card > .InstaImg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1), filter .35s ease;
}

.ew-image-card:has(> .InstaImg):hover > .InstaImg,
.ew-image-card:has(> .InstaImg):focus-within > .InstaImg {
    transform: scale(1.06);
    filter: brightness(.7);
}

.ew-image-card > .card-img-overlay {
    position: absolute;
    inset: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
    color: #fff;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none; /* keep the underlying stretched-link clickable */
}

.ew-image-card:has(> .InstaImg):hover > .card-img-overlay,
.ew-image-card:has(> .InstaImg):focus-within > .card-img-overlay {
    opacity: 1;
}

/* Media-type icon — always visible corner badge so users can tell an
   album/video apart from a still image without hovering. */
.ew-image-card > .card-img-overlay > i {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 20px;
    color: #fff;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
    pointer-events: none;
}

/* Caption body — clamped to 5 lines, subtle rise on hover-in. */
.ew-image-card .card-text {
    font-size: 13px;
    line-height: 1.5;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transform: translateY(10px);
    transition: transform .35s ease;
}

.ew-image-card:has(> .InstaImg):hover .card-text,
.ew-image-card:has(> .InstaImg):focus-within .card-text {
    transform: translateY(0);
}

/* Touch devices / no-hover fallback — reveal the caption on tap-focus
   via .stretched-link so mobile users still get the text. */
@media (hover: none) {
    .ew-image-card > .card-img-overlay {
        /* Slight always-on shade so the icon has contrast. */
        opacity: 1;
        background: linear-gradient(to top, rgba(0, 0, 0, .35) 0%, transparent 60%);
    }

        .ew-image-card .card-text {
            opacity: 0;
            transition: opacity .3s ease;
        }

    .ew-image-card:focus-within .card-text {
        opacity: 1;
    }

    .ew-image-card:focus-within > .card-img-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 55%, transparent 100%);
    }
}