/*
Theme Name: Divi Child Theme
Theme URI: https://divireadythemes.com/
Description: Meridia — Divi Child Theme
Author: Melbourne Online
Template: Divi
Version: 1.6.2
*/

/* ================================================
   BRAND TOKENS
   ================================================ */

:root {
    /* Primary Colors */
    --meridia-orange: #F6861F;
    --meridia-black: #000000;
    
    /* Secondary Colors */
    --meridia-cream: #F9F5ED;
    --meridia-white: #FFFFFF;
    --meridia-light-grey: #E6E7E8;
    
    /* Support Colors (charts/graphs only) */
    --meridia-pink: #EA66A6;
    --meridia-mauve: #9684BA;
    --meridia-navy-grey: #666986;
    --meridia-aqua: #74CCD4;
    --meridia-light-green: #95CFB9;
    --meridia-lavender: #A676A8;
    
    /* Typography */
    --meridia-font: 'Be Vietnam Pro', sans-serif;
}

/* ================================================
   GLOBAL TYPOGRAPHY
   ================================================ */

body,
body #page-container,
body .et_pb_module,
body .et_pb_text,
body .et_pb_blurb,
body .et_pb_slide_description,
body .et_pb_pricing_table,
body .et_pb_counter_title,
body .et_pb_counter_amount,
body .et_pb_toggle_title,
body .et_pb_toggle_content,
body .et_pb_tab,
body .et_pb_tabs_controls li,
body .et_pb_newsletter_description,
body .et_pb_button,
h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
    font-family: var(--meridia-font) !important;
}

body {
    color: var(--meridia-black);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { font-weight: 700; font-size: 48px; line-height: 1.15; }
h2 { font-weight: 600; font-size: 36px; line-height: 1.2; }
h3 { font-weight: 600; font-size: 28px; line-height: 1.3; }
h4 { font-weight: 500; font-size: 22px; line-height: 1.4; }
h5 { font-weight: 500; font-size: 18px; line-height: 1.4; }
h6 { font-weight: 500; font-size: 16px; line-height: 1.5; }

/* Keep all section H2 headings the same size: Divi shrinks H2 inside narrow
   columns (1_3, 1_4, 1_5, 1_6, 2_5) to 23px — force them back to 36px. */
.et_pb_column_1_3 h2, .et_pb_column_1_4 h2, .et_pb_column_1_5 h2,
.et_pb_column_1_6 h2, .et_pb_column_2_5 h2 { font-size: 36px !important; }

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--meridia-black);
}

a {
    color: var(--meridia-orange);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #d9710e;
}

/* ================================================
   BRAND BUTTONS
   Apply via module_class on any et_pb_button or contact form.
   Divi's per-module custom-button CSS does not generate reliably on
   programmatically-built (non-VB-saved) content, so brand buttons are a
   reusable class system. Button text / URL / alignment stay VB-editable.
   ================================================ */
.meridia-btn-primary.et_pb_button,
.meridia-btn-primary .et_pb_button,
.meridia-contact-form .et_pb_button,
.meridia-contact-form .et_pb_contact_submit {
    background: var(--meridia-orange) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 40px !important;
    padding: 14px 34px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.25s ease, transform 0.1s ease !important;
}
.meridia-btn-primary.et_pb_button:hover,
.meridia-btn-primary .et_pb_button:hover,
.meridia-contact-form .et_pb_button:hover,
.meridia-contact-form .et_pb_contact_submit:hover {
    background: #d9710e !important;
    color: #fff !important;
    padding: 14px 34px !important;
}
.meridia-contact-form .et_pb_button,
.meridia-contact-form .et_pb_contact_submit {
    border-radius: 6px !important;
}

/* ================================================
   HERO BANNERS (full-bleed image with baked-in headline)
   The headline lives in the image; a visually-hidden .meridia-sr-only <h1>
   preserves the page heading for screen readers + SEO.
   ================================================ */
.meridia-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.meridia-hero-banner { padding: 0 !important; }
.meridia-hero-banner .et_pb_fullwidth_image,
.meridia-hero-banner .et_pb_code,
.meridia-hero-banner .et_pb_code_inner { margin: 0 !important; padding: 0 !important; }
.meridia-hero-banner .et_pb_image_wrap,
.meridia-hero-banner img { display: block; width: 100%; }

/* Mobile hero: trim the dead side space so the banner sits taller / near-square
   (~16:10) instead of a thin landscape strip. object-fit: cover crops the empty
   margins; per-page object-position keeps each headline fully in frame. */
@media (max-width: 767px) {
    .meridia-hero-banner img {
        width: 100%;
        aspect-ratio: 9 / 5;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
}

/* The visible section heading promoted to the page's real <h1>: keep it at the
   section-heading size, not the global 48px h1. */
.meridia-section-h1 h1 {
    font-size: 40px !important;
    font-weight: 200 !important;
    line-height: 1.2 !important;
    color: var(--meridia-black);
    margin: 0;
}

/* Executive Leadership Team (page 74) — larger display heading + intro body per
   design. Page-scoped heading; body sizes via class hooks because Divi's
   per-module text_font_size does not reliably generate here. */
.page-id-74 .meridia-section-h1 h1 {
    font-size: 42px !important;
    line-height: 1.1 !important;
}
.meridia-exec-intro-1 .et_pb_text_inner,
.meridia-exec-intro-1 .et_pb_text_inner p { font-size: 22px !important; line-height: 1.55 !important; }
.meridia-exec-intro-2 .et_pb_text_inner,
.meridia-exec-intro-2 .et_pb_text_inner p { font-size: 24px !important; line-height: 1.5 !important; }

/* Leadership bio cards (Exec / Board): 36px name with inline LinkedIn icon,
   and a "Read more" link that expands the hidden remainder inline. */
.meridia-bio-name h3 { font-size: 36px !important; }
.meridia-bio-name h3 .meridia-li { display: inline-flex; vertical-align: middle; margin-left: 10px; line-height: 0; }
.meridia-bio-name h3 .meridia-li svg { width: 28px; height: 28px; display: block; }
.meridia-bio-extra { margin-top: 4px; }
.meridia-bio-extra .meridia-bio-more[hidden] { display: none; }
.meridia-readmore {
    display: inline-block;
    margin-top: 10px;
    color: #F6861F !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.meridia-readmore:hover { color: #d9710e !important; }

/* Big display section headings use Be Vietnam Pro Light (300) per the brand.
   (Forces light over the per-module 600 the build wrote, which renders heavy.) */
.et_pb_section .et_pb_text h2 {
    font-weight: 300 !important;
}

/* Orange accent line. Divi's per-module text_text_color does not reliably
   generate on programmatic content and its .et_pb_text_N selector shifts when
   content is edited, so a stable class hook guarantees the brand orange + bold. */
.meridia-accent .et_pb_text_inner,
.meridia-accent .et_pb_text_inner p {
    color: #F6861F !important;
    font-weight: 700 !important;
}

/* About page — "Our Vision" bullet list: breathing room between items (per design) */
.meridia-vision-body ul { margin: 6px 0 18px; padding-left: 1.1em; }
.meridia-vision-body ul li { margin-bottom: 14px; padding-left: 6px; }
.meridia-vision-body ul li:last-child { margin-bottom: 0; }

/* About page — "Our Leaders": orange heading, link rules, large rounded image.
   (Per-module colour/radius don't reliably generate on programmatic content.) */
.meridia-leaders-heading h2 { color: #F6861F !important; font-size: 36px !important; }
.meridia-leaders-links .et_pb_text_inner,
.meridia-leaders-links .et_pb_text_inner p,
.meridia-leaders-links a { font-size: 26px !important; }
.meridia-leaders-links a { text-decoration: none !important; }
.meridia-leaders-links a:hover { color: #d9710e !important; }
.meridia-leaders-image img { border-radius: 24px !important; display: block; width: 100%; }

/* Advocacy priority cards: force 24px rounding (Divi's per-module border-radius
   doesn't reliably generate here, so the white cards were rendering square) and
   make every card in a row the same height so short cards don't leave a gap. */
.meridia-adv-card { border-radius: 24px !important; }
.meridia-adv-card .et_pb_text_inner { padding: 30px !important; }
@media (min-width: 981px) {
    .meridia-adv-row { display: flex !important; flex-wrap: nowrap; align-items: stretch; }
    .meridia-adv-row > .et_pb_column { float: none !important; display: flex; flex-direction: column; }
    .meridia-adv-row > .et_pb_column > .meridia-adv-card { flex: 1 1 auto; }
}

/* "What we are working on now" — dynamic news cards (latest 2). Image on the left,
   cream text box on the right with title, excerpt and an orange arrow link. */
.meridia-won-heading h2 { color: #F6861F !important; }
.meridia-news-list { display: flex; flex-direction: column; gap: 28px; }
.meridia-news-card {
    display: flex;
    align-items: stretch;
    background: #F9F5ED;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none !important;
    color: #000;
    transition: box-shadow 0.2s ease;
}
.meridia-news-card:hover { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.12); }
.meridia-news-img {
    flex: 0 0 38%;
    align-self: stretch;
    background-size: cover;
    background-position: center;
    background-color: #E6E7E8;
    min-height: 300px;
}
.meridia-news-body {
    flex: 1;
    padding: 40px 92px 40px 44px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.meridia-news-title { font-size: 26px; font-weight: 700; color: #000; line-height: 1.25; margin-bottom: 16px; }
.meridia-news-excerpt { font-size: 16px; line-height: 1.7; color: #000; }
.meridia-news-arrow {
    position: absolute; right: 30px; bottom: 30px;
    width: 46px; height: 46px; border-radius: 50%;
    background: #F6861F; color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.meridia-news-card:hover .meridia-news-arrow { background: #d9710e; }
.meridia-news-archive-link {
    display: inline-block;
    margin-top: 30px;
    color: #F6861F !important;
    font-weight: 600;
    text-decoration: underline !important;
}
.meridia-news-archive-link:hover { color: #d9710e !important; }
.meridia-news-archive-wrap { margin-top: 40px; }
/* Single news post: publish date between the title and the featured image, centered */
.single-news .meridia-news-date,
.meridia-news-date {
    color: #F6861F !important;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    margin: 14px 0 22px;
}
/* Remove the Divi sidebar divider line running down single news posts */
.single-news #main-content .container:before { display: none !important; }

/* Inclusive governance (podcast) — orange heading, white body on the black band */
.meridia-podcast h2 { color: #F6861F !important; }
.meridia-podcast h3,
.meridia-podcast p,
.meridia-podcast .et_pb_text_inner { color: #FFFFFF !important; }
.meridia-podcast .et_pb_image img { border-radius: 16px !important; }
@media (max-width: 980px) {
    .meridia-news-card { flex-direction: column; }
    .meridia-news-img { flex: none; width: 100%; min-height: 220px; }
    .meridia-news-body { padding: 30px; }
    .meridia-news-arrow { right: 24px; bottom: 24px; }
}

/* ================================================
   GLOBAL LAYOUT OVERRIDES
   ================================================ */

/* Full width sections */
.et_pb_section {
    padding: 0;
}

.et_pb_row {
    max-width: 1200px;
    padding: 0 40px;
}

/* Fix: Divi column float rules (missing #et-boc wrapper) */
@media (min-width: 981px) {
    .et_pb_column {
        float: left !important;
        background-size: cover;
        background-position: 50%;
        position: relative;
        z-index: 2;
        min-height: 1px;
    }
    .et_pb_row:after {
        content: "";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
        width: 0;
    }
    .et_pb_row .et_pb_column.et-last-child,
    .et_pb_row .et_pb_column:last-child {
        margin-right: 0 !important;
    }
}

/* ================================================
   THEME BUILDER HEADER STYLES
   ================================================ */

.meridia-tb-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: none;
}

/* Logo sizing in Theme Builder header */
.meridia-tb-header .et_pb_image img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

/* Menu module styling in header */
.meridia-tb-header .et_pb_menu .et-menu li a {
    font-family: var(--meridia-font) !important;
    font-weight: 500;
    font-size: 15px;
    color: var(--meridia-black);
    padding: 10px 18px;
    transition: color 0.3s ease;
}

.meridia-tb-header .et_pb_menu .et-menu li a:hover {
    color: var(--meridia-orange);
}

/* Mobile hamburger in Divi menu module */
.meridia-tb-header .et_pb_menu .mobile_nav .mobile_menu_bar:before {
    color: var(--meridia-black);
}

/* ================================================
   THEME BUILDER FOOTER STYLES
   ================================================ */

.meridia-tb-footer,
.meridia-tb-footer * {
    color: var(--meridia-white) !important;
}

.meridia-tb-footer a {
    color: var(--meridia-white) !important;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.meridia-tb-footer a:hover {
    opacity: 0.8;
}

.meridia-tb-footer .et_pb_image img {
    filter: none; /* Logo is already white */
}

/* Footer content runs wider than the 1200px content sections (per design):
   near full-width with side padding, capped on ultra-wide screens. Overrides the
   global .et_pb_row{max-width:1200px} cap. */
.meridia-tb-footer .et_pb_row {
    width: 100% !important;
    max-width: 1920px !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

/* Desktop: Acknowledgement (col 1) sits left; the empty spacer (col 2) grows to
   absorb slack, pushing Reference (col 3) + Contact (col 4) flush to the right
   with a clear gap after the Acknowledgement block. */
@media (min-width: 981px) {
    .meridia-tb-footer .et_pb_row {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .meridia-tb-footer .et_pb_row > .et_pb_column { float: none !important; }
    .meridia-tb-footer .et_pb_row > .et_pb_column:nth-child(2) { flex: 1 1 auto !important; }
}

/* ================================================
   PAGE TITLE BANNER
   ================================================ */

.meridia-page-title {
    background: var(--meridia-cream);
    border-radius: 50px;
    padding: 18px 40px;
    margin: 40px auto;
    max-width: 1200px;
    display: inline-block;
}

.meridia-page-title h1 {
    color: var(--meridia-orange);
    font-size: 28px;
    font-weight: 500;
    margin: 0;
    padding: 0;
}

/* ================================================
   HOMEPAGE SECTIONS
   ================================================ */

/* Hero Section — Cream container with rounded corners */
.meridia-hero {
    background: transparent !important;
    padding: 40px 0 !important;
}

.meridia-hero .et_pb_row {
    background: var(--meridia-cream);
    border-radius: 35px;
    padding: 60px 50px !important;
    max-width: 1200px;
}

.meridia-hero h1 {
    font-size: 44px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.2;
    color: var(--meridia-black);
}

/* Hero image — rounded squircle, NO cream blob behind */
.meridia-hero .et_pb_column:last-child .et_pb_image {
    position: relative;
}

.meridia-hero .et_pb_column:last-child .et_pb_image .et_pb_image_wrap {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 30% 30% 30% 30%;
    overflow: hidden;
}

.meridia-hero .et_pb_column:last-child .et_pb_image .et_pb_image_wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Orange Banner — Pill/capsule with orange border, NOT solid fill */
.meridia-orange-banner {
    background: transparent !important;
    padding: 30px 0 !important;
    text-align: center;
}

.meridia-orange-banner .et_pb_row {
    max-width: 900px;
}

.meridia-orange-banner .et_pb_text {
    border: 2px solid var(--meridia-orange);
    border-radius: 50px;
    padding: 20px 40px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
}

.meridia-orange-banner,
.meridia-orange-banner p,
.meridia-orange-banner h3,
.meridia-orange-banner .et_pb_text_inner {
    color: var(--meridia-black) !important;
}

.meridia-orange-banner h3 {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.5px;
    margin: 0;
}

/* Connected Services Section */
.meridia-services-section {
    padding: 80px 0 !important;
}

/* Service list items — orange arrow on LEFT of each brand */
.meridia-services-section .et_pb_column:last-child .et_pb_text {
    position: relative;
}

/* Orange arrow BEFORE each service name (not dot, not after) */
.meridia-services-section .et_pb_column:last-child .et_pb_text p strong::before {
    content: '→';
    display: inline-block;
    margin-right: 12px;
    color: var(--meridia-orange);
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
}

/* Exclude the heading "Connected services" from getting arrow */
.meridia-services-section .et_pb_column:last-child .et_pb_text:first-child p strong::before,
.meridia-services-section .et_pb_column:last-child .et_pb_text:first-child h3::before {
    display: none !important;
}

/* Service text layout */
.meridia-services-section .et_pb_column:last-child .et_pb_text .et_pb_text_inner {
    position: relative;
}

/* Feature Image Section */
.meridia-feature-section {
    padding: 0 !important;
}

.meridia-feature-section .et_pb_row {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.meridia-feature-section .et_pb_column:first-child {
    padding: 0 !important;
}

.meridia-feature-section .et_pb_column:first-child .et_pb_image,
.meridia-feature-section .et_pb_column:first-child .et_pb_image img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.meridia-feature-section .et_pb_column:first-child .et_pb_image .et_pb_image_wrap {
    display: block;
}

/* Quote text — larger, serif-like italic */
.meridia-feature-section .et_pb_column:last-child .et_pb_text p {
    font-size: 26px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    line-height: 1.5 !important;
    color: #222 !important;
}

/* Feature image should fill column height */
.meridia-feature-section .et_pb_column:first-child {
    position: relative !important;
}

.meridia-feature-section .et_pb_column:first-child .et_pb_image,
.meridia-feature-section .et_pb_column:first-child .et_pb_image .et_pb_image_wrap {
    height: 100% !important;
    display: block !important;
}

.meridia-feature-section .et_pb_column:first-child .et_pb_image .et_pb_image_wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Align row to stretch */
.meridia-feature-section .et_pb_row {
    align-items: stretch !important;
    display: flex !important;
}

.meridia-feature-section .et_pb_column:last-child {
    display: flex !important;
    align-items: center !important;
    padding: 60px 60px 60px 60px !important;
}

/* Content Blocks */
.meridia-content-blocks {
    background: var(--meridia-cream) !important;
    padding: 80px 0 !important;
}

.content-block {
    padding: 40px;
    border-radius: 8px;
}

.content-block.grey-bg {
    background: var(--meridia-light-grey);
}

.content-block.white-bg {
    background: var(--meridia-white);
    border-left: 4px solid var(--meridia-orange);
}

.content-block h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* ================================================
   OUR BRANDS PAGE
   ================================================ */

.brand-card {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(--meridia-light-grey);
}

.brand-card:last-child {
    border-bottom: none;
}

.brand-card .brand-logo {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-card .brand-logo img {
    max-width: 160px;
    height: auto;
}

.brand-card .brand-info {
    flex: 1;
}

.brand-card .brand-info h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.brand-card .brand-info p {
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 8px;
}

.brand-card .brand-info a.brand-link {
    color: var(--meridia-orange);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
}

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

@media (max-width: 980px) {
    .meridia-hero h1 {
        font-size: 32px;
    }
    
    .meridia-hero .et_pb_row {
        border-radius: 25px;
        padding: 40px 30px !important;
    }
    
    /* Feature section stacks on tablet */
    .meridia-feature-section .et_pb_row {
        flex-direction: column !important;
    }
    
    .meridia-feature-section .et_pb_column:first-child .et_pb_image .et_pb_image_wrap img {
        height: 350px !important;
    }
    
    .meridia-feature-section .et_pb_column:last-child .et_pb_text p {
        font-size: 22px !important;
    }
    
    .brand-card {
        flex-direction: column;
        gap: 20px;
    }
    
    .brand-card .brand-logo {
        flex: none;
    }
    
    .et_pb_row {
        padding: 0 10px;
    }
}

@media (max-width: 767px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }
    
    .meridia-hero h1 {
        font-size: 28px;
    }
    
    .meridia-hero .et_pb_row {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .meridia-hero .et_pb_row {
        border-radius: 20px;
        padding: 30px 20px !important;
    }
    
    /* Feature section mobile */
    .meridia-feature-section .et_pb_row {
        flex-direction: column !important;
    }
    
    .meridia-feature-section .et_pb_column:last-child {
        padding: 30px 20px !important;
    }
    
    .meridia-feature-section .et_pb_column:last-child .et_pb_text p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }
    
    .meridia-feature-section .et_pb_column:first-child .et_pb_image .et_pb_image_wrap img {
        height: 280px !important;
    }
    
    /* Content blocks stack */
    .meridia-content-blocks .et_pb_row {
        padding: 0 20px;
    }
    
    .meridia-page-title {
        margin: 20px;
    }
    
    .meridia-page-title h1 {
        font-size: 22px;
    }
    
    /* Footer mobile */
    .meridia-tb-footer .et_pb_row {
        flex-direction: column;
    }
}

/* ---------------------------------------------------------------------------
   Our Board Members (page id 75) — deterministic brand-orange delivery.
   Divi's deferred/late dynamic CSS does NOT emit the per-module
   header_3_text_color / text_text_color orange for these et_pb_text modules
   (verified: no .et_pb_text_N h3{color:#F6861F} rule reaches the page via curl;
   the base sheet's h1..h6{color:#333} would otherwise win). These page-scoped
   rules guarantee the names render in brand orange independent of Divi's
   dynamic-CSS pipeline. The intro accent line is delivered in the deeper
   brand orange #A85200, which clears WCAG AA (4.99:1) on the cream
   (#F9F5ED) section background — #F6861F (2.31:1) fails AA for that text.
   The names sit on white sections where #F6861F is acceptable for large
   28px display headings.
   --------------------------------------------------------------------------- */
.page-id-74 .et_pb_text h3,
.page-id-75 .et_pb_text h3 {
    color: #F6861F;
}

/* Homepage stat counters — brand-orange numbers (native counter_color lands on
   .percent but the .percent-value span overrides it; Divi's per-module colour
   does not generate on programmatic content). */
.page-id-10 .et_pb_number_counter .percent,
.page-id-10 .et_pb_number_counter .percent-value {
    color: #F6861F !important;
}

/* ================================================
   NEWS SINGLE ARTICLE (full-width centered layout)
   News posts render via the default single template; this removes the sidebar
   and centers the article to match the design (centered title, date, rounded
   image, body). A full Theme Builder single template can replace this later.
   ================================================ */
body.single-news #main-content .container { max-width: 920px; }
body.single-news #sidebar { display: none !important; }
body.single-news #left-area {
    width: 100% !important;
    float: none !important;
    padding: 60px 0 80px !important;
}
body.single-news .entry-title {
    text-align: center;
    font-size: 36px;
    line-height: 1.25;
    margin: 0 auto 14px;
}
body.single-news .et_post_meta_wrapper { text-align: center; }
body.single-news .et_post_meta_wrapper .post-meta { color: #888; }
body.single-news #left-area img {
    border-radius: 20px;
    display: block;
    margin: 24px auto;
}
body.single-news .entry-content { margin-top: 26px; }
body.single-news .entry-content p { font-size: 16px; line-height: 1.85; }
/* remove Divi's sidebar-layout vertical divider */
body.single-news #main-content .container { background: none !important; }
body.single-news #left-area { border-right: 0 !important; }

/* Intro accent line — keyed off a stable module_class hook (set in the
   layout source) so it does NOT depend on Divi's auto-incremented
   .et_pb_text_N numbering (which shifts on re-save) or on an inline
   style that Divi's empty dynamic CSS never emits. The previous
   .et_pb_text_3 / p[style*="A85200"] selectors matched nothing (the
   accent is et_pb_text_2 and carries no inline A85200 style), so the
   line was falling back to body black and losing the brand accent.
   #A85200 clears WCAG AA (4.99:1) on the cream section background;
   #F6861F (2.31:1) fails AA for this 26px/600 text. */
.page-id-75 .meridia-board-accent .et_pb_text_inner,
.page-id-75 .meridia-board-accent .et_pb_text_inner p {
    color: #A85200 !important;
}

/* Homepage "How we support people" service rows — keyed off the stable
   .meridia-service-blurb module_class (set in the layout source), so it
   does NOT depend on Divi's auto-incremented .et_pb_blurb_N numbering.
   Two CSS-only effects Divi can't reliably emit on programmatic content:
   (1) the supplied black-circle PNG icons sit inside Divi's blurb image
       wrapper, which starts at opacity:0 and is only revealed by the JS
       waypoint scroll animation — force them visible so the icons always
       show (animation="off" is also set natively in the shortcode);
   (2) the orange title — per-module header_text_color does not generate
       on programmatic content (DIVI.md §11 / pitfall #11), the same
       known issue as brand buttons, so the brand orange is pinned here.
   The supplied PNGs are pre-rendered black circles, so no background is
   added. Title / text / image stay fully Visual-Builder editable. */
.meridia-service-blurb .et_pb_main_blurb_image,
.meridia-service-blurb .et_pb_main_blurb_image .et_pb_image_wrap,
.meridia-service-blurb .et_pb_main_blurb_image img {
    opacity: 1 !important;
}
.meridia-service-blurb .et_pb_module_header {
    color: #F6861F !important;
}

/* Homepage cream sections + orange stats heading (per-section/per-module colour
   doesn't reliably generate on programmatic content; stable hooks guarantee it). */
.meridia-cream-section { background-color: #F9F5ED !important; }
.meridia-stats-heading h2 { color: #F6861F !important; }

/* Stats: heading in left column, 6 counters as a 3-across x 2-down grid in the
   right (2/3) column. The grid lives on the column (VB Advanced -> CSS Class). */
.meridia-stats-heading h2 {
	text-align: left !important;
	font-size: 36px !important;   /* match the "How we support people" heading */
	line-height: 1.15em !important;
}
#page-container .meridia-stats-grid.et_pb_column {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
	row-gap: 40px;
	align-items: start;
}
#page-container .meridia-stats-grid.et_pb_column .et_pb_number_counter {
	margin-bottom: 0 !important;
	width: auto !important;
	float: none !important;
}
@media (max-width: 980px) {
	#page-container .meridia-stats-grid.et_pb_column { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	#page-container .meridia-stats-grid.et_pb_column { grid-template-columns: 1fr; }
}

/* Feature-statement dark band (black bg, white text) */
.meridia-dark-section { background-color: #000000 !important; }
.meridia-dark-section .et_pb_text,
.meridia-dark-section .et_pb_text_inner,
.meridia-dark-section h1, .meridia-dark-section h2, .meridia-dark-section h3,
.meridia-dark-section p { color: #FFFFFF !important; }

/* Dark-band text must out-specify Divi's heading colour (#page-container = id) */
#page-container .meridia-dark-section h1,
#page-container .meridia-dark-section h2,
#page-container .meridia-dark-section h3,
#page-container .meridia-dark-section p,
#page-container .meridia-dark-section .et_pb_text_inner { color: #FFFFFF !important; }

/* ============================================================
   Our Brands accordion (page-id-11)
   Each brand is a Divi Text module (.meridia-brand-item) holding
   an always-visible .mb-head and a collapsible .mb-body. Toggle
   behaviour + a11y are added by meridia_brands_accordion_script().
   ============================================================ */
.meridia-brand-item { margin: 0 !important; border-bottom: 1px solid #E4DFD6; padding: 40px 0; }
.meridia-brand-item:first-child { border-top: 1px solid #E4DFD6; }
.meridia-brand-item .et_pb_text_inner { padding: 0; }

/* Header row: logo | name | chevron — always visible, clickable */
.meridia-brand-item .mb-head {
    display: grid;
    grid-template-columns: 32% 1fr 30px;
    gap: 24px;
    align-items: center;
    cursor: pointer;
    outline: none;
}
.meridia-brand-item .mb-head:focus-visible { outline: 2px solid #F6861F; outline-offset: 4px; }
.meridia-brand-item .mb-logo { max-height: 56px; width: auto; max-width: 100%; }
.meridia-brand-item .mb-name {
    color: #F6861F !important;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: 1.25;
}
.meridia-brand-item .mb-chev {
    justify-self: end;
    width: 13px; height: 13px;
    border-right: 2.5px solid #F6861F;
    border-bottom: 2.5px solid #F6861F;
    transform: rotate(45deg);
    transition: transform .3s ease;
    margin-top: -4px;
}
.meridia-brand-item.open .mb-chev { transform: rotate(-135deg); margin-top: 4px; }

/* Collapsible body: two columns under logo / name.
   Gentle slide via grid-template-rows 0fr -> 1fr (animates to natural height).
   .is-animated is added by JS after first paint so the default-open item
   does not animate on load. */
.meridia-brand-item .mb-body {
    display: grid;
    grid-template-columns: 32% 1fr 30px;
    grid-template-rows: 0fr;
    column-gap: 24px;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
}
.meridia-brand-item.is-animated .mb-body {
    transition: grid-template-rows .45s ease, opacity .35s ease, margin-top .45s ease;
}
.meridia-brand-item.open .mb-body {
    grid-template-rows: 1fr;
    margin-top: 18px;
    opacity: 1;
}
.meridia-brand-item .mb-body > * { min-height: 0; overflow: hidden; }
.meridia-brand-item .mb-left .mb-tag { font-weight: 600; color: #1A1A1A; font-size: 16px; margin: 0; }
.meridia-brand-item .mb-right p { font-size: 16px; color: #1A1A1A; margin: 0 0 16px; line-height: 1.7; }
.meridia-brand-item .mb-right .mb-focus { margin-top: 4px; }
.meridia-brand-item .mb-right .mb-focus strong {
    display: block;
    color: #F6861F;
    font-weight: 700;
    margin-bottom: 4px;
}
.meridia-brand-item .mb-visit {
    display: inline-block;
    background: #F6861F;
    color: #FFFFFF !important;
    padding: 12px 30px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 10px;
    transition: background .2s ease;
}
.meridia-brand-item .mb-visit:hover { background: #d96f12; }

/* Mobile: stack everything */
@media (max-width: 980px) {
    .meridia-brand-item .mb-head { grid-template-columns: 1fr 30px; gap: 16px; }
    .meridia-brand-item .mb-logo { grid-column: 1 / -1; }
    .meridia-brand-item .mb-name { grid-column: 1; }
    .meridia-brand-item .mb-chev { grid-column: 2; grid-row: 2; align-self: start; }
    /* On mobile the two columns stack into two grid rows; the desktop single-row
       0fr collapse can't collapse the implicit second row, so the body kept its
       full height while invisible. Use a max-height collapse on mobile instead. */
    .meridia-brand-item .mb-body {
        display: block;
        max-height: 0;
    }
    .meridia-brand-item.is-animated .mb-body {
        transition: max-height .45s ease, opacity .35s ease, margin-top .45s ease;
    }
    .meridia-brand-item.open .mb-body { max-height: 1200px; }
    .meridia-brand-item .mb-left { margin-bottom: 14px; }
}

/* ============================================================
   Careers — "Current opportunities" link list (page 12)
   Big bold orange links, each its own row with a divider rule.
   Links stay VB-editable in the Text module.
   ============================================================ */
.meridia-careers-links { border-top: 1px solid #D9D4CA; }
.meridia-careers-links .meridia-career-link {
    display: block;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #F6861F !important;
    text-decoration: none !important;
    padding: 20px 0;
    border-bottom: 1px solid #D9D4CA;
}
.meridia-careers-links .meridia-career-link:hover { color: #d9710e !important; }

@media (max-width: 980px) {
    .meridia-careers-links .meridia-career-link { font-size: 24px; padding: 16px 0; }
}

/* ============================================================
   Contact page (page-id-14)
   ============================================================ */
/* Top section: gap between "Let's connect" and "Contact details" */
.page-id-14 .meridia-section-h1 h2 { margin-top: 44px; }
/* "A better, connected future" + email read as black (not orange) per design */
.page-id-14 .meridia-accent .et_pb_text_inner,
.page-id-14 .meridia-accent .et_pb_text_inner p { color: #1A1A1A !important; font-weight: 400 !important; }
.page-id-14 a[href^="mailto:"] { color: #1A1A1A !important; }

/* Contact form: cream rounded card */
.meridia-contact-form {
    background: #F9F5ED !important;
    border-radius: 24px !important;
    padding: 40px !important;
}
/* Surface Divi's hidden field labels and style them above each input */
.meridia-contact-form .et_pb_contact_form_label {
    display: block !important;
    position: static !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 0 8px !important;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #1A1A1A !important;
}
/* White, outlined inputs (replace Divi's grey fill) */
.meridia-contact-form .et_pb_contact_field .input,
.meridia-contact-form .et_pb_contact_field input.input,
.meridia-contact-form .et_pb_contact_field textarea {
    background-color: #FFFFFF !important;
    border: 1px solid #2A2A2A !important;
    border-radius: 10px !important;
    padding: 15px 18px !important;
    color: #1A1A1A !important;
    box-shadow: none !important;
    font-size: 16px !important;
}
.meridia-contact-form .et_pb_contact_field textarea { min-height: 150px; }
.meridia-contact-form ::placeholder { color: #555 !important; opacity: 1 !important; }
/* Field spacing */
.meridia-contact-form .et_pb_contact_field { padding: 0 !important; margin-bottom: 22px !important; }
/* Full-width submit button */
.meridia-contact-form .et_contact_bottom_container {
    margin-top: 4px;
    width: 100% !important;
    float: none !important;
}
.meridia-contact-form .et_pb_button_wrapper {
    width: 100% !important;
    display: block !important;
    float: none !important;
    text-align: center;
}
.meridia-contact-form .et_pb_contact_submit {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 16px 24px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Divi aligns the submit wrapper right; keep the full-width button flush left */
.meridia-contact-form .et_pb_button_wrapper { text-align: left !important; }

/* Footer email (and any footer link) stays white on every page — out-specifies
   the page-scoped contact mailto rule via #page-container. */
#page-container .meridia-tb-footer a,
#page-container .meridia-tb-footer a[href^="mailto:"] { color: var(--meridia-white) !important; }

/* ============================================================
   Custom mobile menu (<=980px): animated hamburger + right slide-in panel.
   Markup + behaviour: meridia_mobile_menu() in functions.php.
   ============================================================ */
/* Hide on desktop */
.meridia-burger,
.meridia-mnav,
.meridia-mnav-backdrop { display: none; }

@media (max-width: 980px) {
    /* Replace Divi's default mobile menu */
    .meridia-tb-header .et_mobile_nav_menu,
    .meridia-tb-header .mobile_menu_bar,
    .meridia-tb-header .et_pb_menu__mobile-bottom { display: none !important; }

    /* Tighten the mobile header: hide the empty black topbar + the now-empty menu
       column (the hamburger replaces it) and kill Divi's stacked-column margin
       so the white bar hugs the logo at the very top. */
    .meridia-tb-topbar { display: none !important; }
    .meridia-tb-header { padding-top: 12px !important; padding-bottom: 12px !important; }
    .meridia-tb-header .et_pb_column_2_tb_header { display: none !important; }
    .meridia-tb-header .et_pb_row > .et_pb_column { margin-bottom: 0 !important; }

    /* Hamburger button — fixed top-right, sits in the sticky header */
    .meridia-burger {
        position: fixed;
        top: 7px;
        right: 18px;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFFFFF;
        border: 0;
        border-radius: 10px;
        padding: 0;
        cursor: pointer;
        z-index: 100000;
        box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
        transition: background-color .25s ease, box-shadow .25s ease;
    }
    .meridia-burger-box { position: relative; width: 28px; height: 20px; }
    .meridia-burger-inner,
    .meridia-burger-inner::before,
    .meridia-burger-inner::after {
        position: absolute;
        left: 0;
        width: 28px;
        height: 3px;
        border-radius: 3px;
        background: #1A1A1A;
        transition: transform .3s ease, opacity .2s ease, background-color .3s ease;
    }
    .meridia-burger-inner { top: 50%; margin-top: -1.5px; }
    .meridia-burger-inner::before { content: ''; top: -9px; }
    .meridia-burger-inner::after  { content: ''; top: 9px; }
    /* 3 lines -> X (dark, reads on the white circular button) */
    .meridia-burger.is-open .meridia-burger-inner { background: transparent; }
    .meridia-burger.is-open .meridia-burger-inner::before { transform: translateY(9px) rotate(45deg); background: #1A1A1A; }
    .meridia-burger.is-open .meridia-burger-inner::after  { transform: translateY(-9px) rotate(-45deg); background: #1A1A1A; }

    /* Slide-in panel from the right */
    .meridia-mnav {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: 84%;
        max-width: 360px;
        background: #0E0E0E;
        z-index: 99999;
        transform: translateX(100%);
        transition: transform .38s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: -22px 0 50px rgba(0, 0, 0, .4);
    }
    body.meridia-mnav-open .meridia-mnav { transform: translateX(0); }
    .meridia-mnav-inner {
        min-height: 100%;
        padding: 30px 32px 40px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }
    /* White Meridia logo at the top of the panel */
    .meridia-mnav-logo { display: inline-block; align-self: flex-start; margin-bottom: 34px; }
    .meridia-mnav-logo img { display: block; width: 150px; height: auto; }

    /* Backdrop */
    .meridia-mnav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .38s ease;
        z-index: 99998;
    }
    body.meridia-mnav-open .meridia-mnav-backdrop { opacity: 1; pointer-events: auto; }

    /* Lock background scroll while open */
    body.meridia-mnav-open { overflow: hidden; }

    /* Links */
    .meridia-mnav-list { list-style: none; margin: 0; padding: 0; }
    .meridia-mnav-list li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .meridia-mnav-list li:first-child { border-top: 1px solid rgba(255, 255, 255, .1); }
    .meridia-mnav-list a {
        display: block;
        padding: 17px 0;
        color: #FFFFFF !important;
        font-family: 'Be Vietnam Pro', sans-serif;
        font-size: 22px;
        font-weight: 600;
        text-decoration: none;
        transition: color .2s ease, padding-left .2s ease;
    }
    .meridia-mnav-list a:hover,
    .meridia-mnav-list .current-menu-item > a,
    .meridia-mnav-list .current_page_item > a { color: #F6861F !important; padding-left: 8px; }

    /* Panel footer: CTA + contact */
    .meridia-mnav-foot { margin-top: auto; padding-top: 34px; }
    .meridia-mnav-cta {
        display: block;
        text-align: center;
        background: #F6861F;
        color: #FFFFFF !important;
        padding: 14px;
        border-radius: 40px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 22px;
        transition: background .2s ease;
    }
    .meridia-mnav-cta:hover { background: #d9710e; }
    .meridia-mnav-contact {
        display: block;
        color: rgba(255, 255, 255, .7) !important;
        font-size: 15px;
        text-decoration: none;
        margin-top: 6px;
    }
    .meridia-mnav-contact:hover { color: #F6861F !important; }

    /* Respect reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .meridia-mnav, .meridia-mnav-backdrop,
        .meridia-burger-inner,
        .meridia-burger-inner::before,
        .meridia-burger-inner::after { transition: none !important; }
    }
}

/* ============================================================
   OUR BRANDS carousel (homepage) — mobile.
   The arrow-nav carousel is too cramped on phones (only ~1.7 logos fit
   and overflow:hidden blocks swipe). On mobile, drop the arrows and turn
   it into a natural swipeable strip with scroll-snap. Overrides the code
   module's inline <style> (which loads after this file), hence !important.
   ============================================================ */
@media (max-width: 767px) {
    /* Let the strip use the full screen width (the row otherwise boxes it to ~272px),
       so the prev/next arrows and the logos both have room. */
    .et_pb_row:has(.meridia-brands-carousel) {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .meridia-brands-carousel .mbc-wrap { gap: 6px !important; max-width: none !important; }
    /* Slightly smaller arrows on mobile to leave more room for logos */
    .meridia-brands-carousel .mbc-btn { width: 42px !important; height: 42px !important; }
    .meridia-brands-carousel .mbc-btn svg { width: 17px !important; height: 17px !important; }
    /* Allow touch-swipe in addition to the arrows, with snap for clean stops */
    .meridia-brands-carousel .mbc-vp {
        overflow-x: auto !important;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }
    .meridia-brands-carousel .mbc-tk {
        gap: 36px !important;
        padding: 8px 6px !important;
    }
    .meridia-brands-carousel .mbc-tk a { scroll-snap-align: center; }
    .meridia-brands-carousel .mbc-tk img { height: 56px !important; }
}

/* ============================================================
   Responsive pass — site-wide mobile (<=767px) fixes from the audit.
   The brand CSS pins several headings with !important and never scales
   them on phones; sections carry 70–90px desktop padding. These rules
   scale headings down, trim section padding, stack the contact form,
   and clean the default news-archive sidebar.
   ============================================================ */
@media (max-width: 767px) {
    /* Section vertical padding: brand sections sit at 70–90px on desktop and
       Divi 5 doesn't auto-scale custom padding. Trim on phones, but leave the
       header, footer and full-bleed hero (which set their own). */
    .et_pb_section:not(.meridia-tb-header):not(.meridia-tb-topbar):not(.meridia-tb-footer):not(.meridia-hero-banner) {
        padding-top: 46px !important;
        padding-bottom: 46px !important;
    }

    /* Promoted page H1 (.meridia-section-h1) was pinned 40–42px !important and
       never scaled on mobile — bring it in line with the rest of the site. */
    .meridia-section-h1 h1,
    .page-id-74 .meridia-section-h1 h1 { font-size: 30px !important; line-height: 1.2 !important; }

    /* Narrow-column section H2s + stats heading pinned at 36px */
    .et_pb_column_1_3 h2, .et_pb_column_1_4 h2, .et_pb_column_1_5 h2,
    .et_pb_column_1_6 h2, .et_pb_column_2_5 h2,
    .meridia-stats-heading h2 { font-size: 27px !important; line-height: 1.25 !important; }

    /* Leadership bio names (Exec + Board) + inline LinkedIn icon */
    .meridia-bio-name h3 { font-size: 26px !important; line-height: 1.25 !important; }
    .meridia-bio-name h3 .meridia-li svg { width: 22px !important; height: 22px !important; }

    /* Exec intro paragraphs were 22/24px — oversized on a phone */
    .meridia-exec-intro-1 .et_pb_text_inner,
    .meridia-exec-intro-1 .et_pb_text_inner p { font-size: 18px !important; }
    .meridia-exec-intro-2 .et_pb_text_inner,
    .meridia-exec-intro-2 .et_pb_text_inner p { font-size: 19px !important; }

    /* Contact form: stack the half-width fields full-width + tighten the card */
    .meridia-contact-form { padding: 24px !important; border-radius: 16px !important; }
    .meridia-contact-form .et_pb_contact_field.et_flex_column_12_24_phone { width: 100% !important; }

    /* News archive: drop the default (placeholder) widget sidebar, go full width */
    .post-type-archive-news #sidebar { display: none !important; }
    .post-type-archive-news #left-area {
        width: 100% !important;
        float: none !important;
        padding-right: 0 !important;
    }
}

/* ============================================================
   Main menu — mid-width fix. Between the desktop and mobile menu
   breakpoints the 6 uppercase items (15px, 18px side padding) overflow
   and drop the nav below the logo. Shrink the items so they fit on one
   line beside the logo down to the ~980px mobile-menu cutover.
   ============================================================ */
@media (max-width: 1190px) {
    .meridia-tb-header .et-menu li a {
        font-size: 14px !important;
        padding: 0 5px !important;
    }
}

/* ============================================================
   Header (desktop): vertically center the menu with the logo. The menu
   module carries a 7px top margin that dropped it ~10px below the logo's
   centre. Pull it up so logo + menu items align. (Menu is hidden <=980px.)
   ============================================================ */
@media (min-width: 981px) {
    body .meridia-tb-header .et_pb_menu { margin-top: -3px !important; }
}

/* ============================================================
   Legal / utility pages (Privacy Policy, Modern Slavery Statement).
   .meridia-legal is on the Text module holding the long-form content.
   Out-specifies the global section-h2 weight rule via #page-container.
   ============================================================ */
#page-container .meridia-legal h1 { font-size: 40px !important; font-weight: 600 !important; line-height: 1.2 !important; margin: 0 0 6px !important; }
#page-container .meridia-legal h2 { font-size: 24px !important; font-weight: 600 !important; margin: 34px 0 10px !important; }
.meridia-legal p, .meridia-legal li { font-size: 16px; line-height: 1.8; }
.meridia-legal ul { margin: 4px 0 18px; padding-left: 1.2em; }
.meridia-legal li { margin-bottom: 8px; }
.meridia-legal a { color: #F6861F; text-decoration: underline; }
.meridia-legal em { color: #666; }
@media (max-width: 767px) {
    #page-container .meridia-legal h1 { font-size: 30px !important; }
    #page-container .meridia-legal h2 { font-size: 20px !important; }
}