/*
 * SandyGerber.Com — site-wide custom CSS
 *
 * Loaded on every front-end page by the plugin (sg_styles_and_scripts).
 * Home for rules moved out of Divi's Theme Customizer > Additional CSS.
 *
 * Version: 0.3.2
 * Last update: Oct 23, 2026
 *
 * Bump the version above when editing (the enqueue query string uses the
 * file's mtime, so cache busting is automatic; this number is for tracking).
 */


/* ===================================================================
    SANDY GERBER — SITE HEADER (Theme Builder global header)
    Structure: section.sg-header
                 └ .sg-header-row
                     ├ .sg-logo-col    → .sg-logo (image)
                     ├ .sg-nav-col     → .sg-utility-menu (Utility menu)
                     │                   .sg-utility-social (code module, SVG icons)
                     │                   .sg-mainnav (main menu; hamburger on mobile)
                     └ .sg-social-col  → social follow (tablet/phone only)
    Classes are set in Divi → Advanced → CSS Class, so nothing here depends
    on Divi's auto-numbered _N_tb_header selectors.
    Desktop design: Claude Design handoff "site header v2" (2026-09-30).
    =================================================================== */

/* Transparent header: lift the Theme Builder header out of the flow so page
   content starts at the top and the hero runs underneath it. Divi's sticky
   takes over on scroll (switches the section to position: fixed inline and
   fades its background to black over 300ms). */
header.et-l--header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

/* Pages with no hero banner (privacy policy, plain posts…): the overlay
   would sit on top of the content, with white links on a white page. Put
   the header back in the flow, so content starts below it at its real
   height on every breakpoint, and make it solid black. Keyed off the
   page having a hero section rather than a list of page ids. */
body:not(:has(.section-page-hero, #homepage-hero)) header.et-l--header {
    position: relative;
}

body:not(:has(.section-page-hero, #homepage-hero)) header .sg-header.et_pb_section {
    background-color: #000 !important;
}

/* Keyboard focus for every header link (not in the mock; needed for a11y). */
header .sg-header a:focus-visible {
    outline: 2px solid #C1622D;
    outline-offset: 3px;
}

/* ---- Desktop: logo spanning two rows, utility row above main nav ---- */
@media (min-width: 981px) {

    /* Soft top fade for legibility over the hero. Drawn on ::before so it
       sits over Divi's own background fade; once sticky turns the section
       black, a black-to-clear gradient on black is invisible, so it needs
       no transition of its own. */
    header .sg-header.et_pb_section {
        padding: 0 !important;
        transition: background-color .3s ease, box-shadow .25s ease;
    }

    header .sg-header.et_pb_section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,0) 100%);
        pointer-events: none;
        z-index: 0;
    }

    header .sg-header.et_pb_sticky {
        box-shadow: 0 6px 20px rgba(0,0,0,.35);
    }

    /* Row: full width with 72px sides (Jerry's call over the handoff's
       1280px container, to match the original header), logo | nav column.
       !important beats Divi's row settings. */
    header .sg-header .sg-header-row.et_pb_row {
        position: relative;
        z-index: 1;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 32px;
        align-items: center;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 72px !important;
        transition: padding .25s ease;
    }

    /* Scrolled: 10px top and bottom. (While sticky, Divi copies the
       section's computed padding inline, i.e. the 0 set above.) */
    header .sg-header.et_pb_sticky .sg-header-row.et_pb_row {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    header .sg-header-row > .et_pb_column {
        width: auto !important;
        margin: 0 !important;
    }

    /* Explicit cells: left to auto-placement, the logo landed in column 2
       and the nav wrapped to a second row. Divi's clearfix ::after is also
       taken out of the grid. */
    header .sg-header-row > .sg-logo-col { grid-column: 1; grid-row: 1; }
    header .sg-header-row > .sg-nav-col  { grid-column: 2; grid-row: 1; }

    header .sg-header .sg-header-row.et_pb_row::before,
    header .sg-header .sg-header-row.et_pb_row::after {
        display: none;
    }

    /* The social column only serves tablet/phone. */
    header .sg-header-row > .sg-social-col {
        display: none !important;
    }

    /* Logo: 84px tall at rest, 42px once sticky. */
    header .sg-header .sg-logo.et_pb_module {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    header .sg-header .sg-logo img {
        display: block;
        height: 84px;
        width: auto;
        max-width: none;
        transition: height .25s ease;
    }

    header .sg-header.et_pb_sticky .sg-logo img {
        height: 42px;
    }

    /* Nav column: utility menu + icons on row 1, main nav across row 2.
       When the utility row collapses, the column shrinks to the main nav
       and the logo sits beside it. */
    header .sg-header-row > .sg-nav-col {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 22px;
        align-items: center;
    }

    header .sg-nav-col > .et_pb_module {
        margin: 0 !important;
    }

    header .sg-nav-col > .sg-utility-menu   { grid-column: 1; grid-row: 1; }
    header .sg-nav-col > .sg-utility-social { grid-column: 2; grid-row: 1; }
    header .sg-nav-col > .sg-mainnav        { grid-column: 1 / -1; grid-row: 2; }

    /* Utility row: 32px, collapses to nothing when sticky and only comes
       back at the top of the page. */
    header .sg-nav-col > .sg-utility-menu,
    header .sg-nav-col > .sg-utility-social {
        height: 32px;
        overflow: hidden;
        opacity: 1;
        transition: height .25s ease, opacity .2s ease;
    }

    header .sg-header.et_pb_sticky .sg-nav-col > .sg-utility-menu,
    header .sg-header.et_pb_sticky .sg-nav-col > .sg-utility-social {
        height: 0;
        opacity: 0;
    }

    /* Menu modules: flatten Divi's menu box so the links sit on a plain
       flex line (Divi pads each li 11px and pulls the ul back -11px). */
    header .sg-header .sg-utility-menu.et_pb_menu,
    header .sg-header .sg-mainnav.et_pb_menu {
        background-color: transparent !important;
        border: 0 !important;
    }

    header .sg-header .sg-utility-menu .et_pb_menu__wrap,
    header .sg-header .sg-mainnav .et_pb_menu__wrap {
        justify-content: flex-end;
    }

    header .sg-header .sg-utility-menu .et-menu,
    header .sg-header .sg-mainnav .et-menu {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        margin: 0;
    }

    header .sg-header .sg-utility-menu .et-menu > li,
    header .sg-header .sg-mainnav .et-menu > li {
        padding: 0;
        margin: 0;
    }

    /* Utility links: 11px / 600 / 0.12em, grey, white on hover. */
    header .sg-header .sg-utility-menu .et-menu {
        height: 32px;
        gap: 22px;
    }

    header .sg-header .sg-utility-menu.et_pb_menu ul li a {
        padding: 0;
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 11px;
        font-weight: 600;
        line-height: 32px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #B4B4B4;
        opacity: 1;
        transition: color .2s ease;
    }

    /* Main nav: 12px / 600 / 0.08em. Divi's module settings put the colour
       on with !important, hence the !important here. */
    header .sg-header .sg-mainnav .et-menu {
        gap: 26px;
    }

    header .sg-header .sg-mainnav.et_pb_menu ul.et-menu li a {
        padding: 12px 0;
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: 0.08em !important;
        text-transform: uppercase;
        color: #EDEDED !important;
        opacity: 1;
        transition: color .2s ease;
    }

    header .sg-header .sg-utility-menu.et_pb_menu ul li a:hover,
    header .sg-header .sg-mainnav.et_pb_menu ul.et-menu li a:hover {
        color: #FFFFFF !important;
        opacity: 1;
    }

    /* Current page: rust, in both menus. Needed because the link colours
       above out-rank Divi's own "Active Link Color" setting. */
    header .sg-header .sg-utility-menu.et_pb_menu ul li.current-menu-item > a,
    header .sg-header .sg-mainnav.et_pb_menu ul.et-menu li.current-menu-item > a {
        color: #C1622D !important;
    }

    /* About / FAQ / Contact are in the main menu for the mobile popup only;
       on desktop they live in the utility row. */
    header .sg-header .sg-mainnav .et-menu > li.sg-mobile-only {
        display: none;
    }

    /* Social icons: vertical divider, then three 14px SVGs. */
    header .sg-header .sg-social-icons {
        display: flex;
        align-items: center;
        gap: 14px;
        height: 32px;
    }

    header .sg-header .sg-social-icons::before {
        content: '';
        width: 1px;
        height: 14px;
        margin-right: 8px;          /* 14px gap + 8px = the 22px row gap */
        background: rgba(255, 255, 255, .16);
    }

    header .sg-header .sg-social-icons a {
        display: flex;
        color: #B4B4B4;
        transition: color .2s ease;
    }

    header .sg-header .sg-social-icons a:hover {
        color: #FFFFFF;
    }
}

/* Up to 1280px: the handoff's 32px sides instead of 72px. */
@media (min-width: 981px) and (max-width: 1280px) {
    header .sg-header .sg-header-row.et_pb_row {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }
}

/* Laptops: tighten the main nav before it can wrap. */
@media (min-width: 981px) and (max-width: 1199px) {
    header .sg-header .sg-mainnav .et-menu {
        gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    header .sg-header.et_pb_section,
    header .sg-header .sg-header-row.et_pb_row,
    header .sg-header .sg-logo img,
    header .sg-nav-col > .sg-utility-menu,
    header .sg-nav-col > .sg-utility-social {
        transition: none;
    }
}

/* ---- Tablet/phone: logo, social icons and hamburger on one row ----
   Logo left, hamburger far right, social icons right-aligned beside it.
   Divi stacks the three header columns full-width below 980px; this turns
   the row into a flex line and re-orders the columns. The utility menu and
   icon modules are hidden here by Divi's own visibility settings. */
@media (max-width: 980px) {
    .sg-header-row {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        position: relative;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .sg-header-row > .et_pb_column {
        width: auto !important;
        margin: 0 !important;
        float: none;
    }

    /* Logo column (z-index keeps it above the full-screen menu overlay) */
    .sg-header-row > .sg-logo-col {
        flex: 1 1 auto;
        order: 1;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
        z-index: 9999;
    }

    .sg-header-row .sg-logo.et_pb_module {
        margin: 0 !important;
        text-align: left;
        width: 112px !important;
        max-width: 112px !important;
    }

    /* Social icons column (also above the overlay) */
    .sg-header-row > .sg-social-col {
        flex: 0 0 auto;
        order: 2;
        position: relative;
        z-index: 9999;
    }

    .sg-social-col .et_pb_social_media_follow li a.icon:before {
        font-size: 18px !important;
    }

    .sg-social-col .et_pb_social_media_follow {
        margin: 0 !important;
        line-height: 0;
    }

    .sg-social-col .et_pb_social_media_follow li {
        margin-bottom: 0;
    }

    /* Menu column (hamburger) */
    .sg-header-row > .sg-nav-col {
        flex: 0 0 auto;
        order: 3;
        position: static;
    }

    .sg-header-row .sg-mainnav.et_pb_module {
        position: static;
    }

    .sg-header-row .sg-mainnav .et_pb_menu__wrap {
        justify-content: flex-end;
    }

    .sg-header-row .sg-mainnav .et_mobile_nav_menu {
        float: none;
    }

    /* Full-screen mobile menu: fixed black overlay, items centred, slides
       down from the top. `display: flex !important` and the !important box
       values override the inline styles Divi's slideToggle writes, so the
       open/close animation is ours (driven by Divi toggling .opened). The
       `header` prefix also out-specifies the module's own !important
       "Mobile Menu Background Color" (transparent). */
    header .sg-header .sg-mainnav.et_pb_menu .et_mobile_menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 80px 8% !important;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow-y: auto !important;
        background: #000 !important;
        border-top: 0;
        box-shadow: none;
        z-index: 9998;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-100%);
        transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s .45s;
    }

    header .sg-header .sg-mainnav .mobile_nav.opened .et_mobile_menu {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility 0s;
    }

    header .sg-header .sg-mainnav .et_mobile_menu li {
        width: auto;
        margin: 0;
        padding: 0 !important;
        text-align: center;
    }

    header .sg-header .sg-mainnav.et_pb_menu ul.et_mobile_menu li a {
        padding: 10px 20px;
        border: 0;
        color: #fff;
        font-size: 24px;
        line-height: 1.5em;
        letter-spacing: 2px !important;
        text-transform: uppercase;
    }

    /* About / FAQ / Contact: secondary style under a short divider. The
       divider hangs off the first of them (the item after a non-utility
       one), since menu order puts all three last. */
    header .sg-header .sg-mainnav .et_mobile_menu li:not(.sg-mobile-only) + li.sg-mobile-only::before {
        content: '';
        display: block;
        width: 48px;
        height: 1px;
        margin: 18px auto 12px;
        background: rgba(255, 255, 255, .16);
    }

    header .sg-header .sg-mainnav.et_pb_menu ul.et_mobile_menu li.sg-mobile-only a {
        padding: 6px 20px;
        font-size: 15px;
        letter-spacing: 0.12em !important;
        color: #B4B4B4 !important;
    }

    /* Hamburger: three CSS bars (Divi's icon-font glyph replaced) that
       animate into an X while the menu is open. Sits above the overlay so
       it stays tappable to close. */
    header .sg-header .sg-mainnav .mobile_menu_bar {
        position: relative;
        z-index: 9999;
        width: 32px;
        height: 32px;
    }

    header .sg-header .sg-mainnav .mobile_menu_bar:before,
    header .sg-header .sg-mainnav .mobile_menu_bar:after {
        content: '' !important;
        position: absolute;
        left: 4px;
        right: 4px;
        top: 15px;
        height: 2px;
        background: #fff;
        transition: transform .3s, box-shadow .2s;
    }

    /* Outer bars come from the box-shadow on :before; :after is the hidden
       second stroke of the X. */
    header .sg-header .sg-mainnav .mobile_menu_bar:before {
        box-shadow: 0 -8px 0 #fff, 0 8px 0 #fff;
    }

    header .sg-header .sg-mainnav .mobile_menu_bar:after {
        transform: scaleX(0);
    }

    header .sg-header .sg-mainnav .mobile_nav.opened .mobile_menu_bar:before {
        box-shadow: 0 0 0 transparent, 0 0 0 transparent;
        transform: rotate(45deg);
    }

    header .sg-header .sg-mainnav .mobile_nav.opened .mobile_menu_bar:after {
        transform: rotate(-45deg);
    }
}

/* Homepage hero on phone: fit photo + heading + copy + button into one
   screen. The photo column flexes to fill whatever the text doesn't need
   (min 200px); text column spacing is tightened from the builder values. */
@media (max-width: 767px) {
    #homepage-hero {
        min-height: 100vh !important;
        min-height: 100svh !important;
    }

    #homepage-hero .et_pb_row_1 {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100svh;
    }

    /* Photo column (background image) */
    #homepage-hero .et_pb_row_1 > .et_pb_column_1 {
        flex: 1 1 auto;
        min-height: 200px !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Text column */
    #homepage-hero .et_pb_row_1 > .et_pb_column_2 {
        flex: 0 0 auto;
        padding-top: 24px !important;
        padding-bottom: 32px !important;
    }

    #homepage-hero .et_pb_text_1 {
        margin-top: 0 !important;
    }

    #homepage-hero .et_pb_text_1 h1 {
        font-size: 30px !important;
        line-height: 1.05 !important;
        padding-bottom: 6px;
    }

    #homepage-hero .et_pb_divider_0 {
        margin-top: 14px !important;
        margin-bottom: 14px !important;
    }

    #homepage-hero .et_pb_button_0_wrapper {
        margin-top: 18px !important;
    }
}

 .sg-hidden {
     display: none;
 }

 /* Bulleted lists in page and post content: rust discs, text colour
    unchanged. Scoped to content so menus and widgets are untouched. */
 .et_pb_text_inner ul li::marker,
 .et_pb_post_content ul li::marker,
 .entry-content ul li::marker {
     color: #C1622D;
 }

 /* Lists take the line height of the text around them. Divi core hard-codes
    `.entry-content ul { line-height: 26px }`, so lists ignored the text
    module's own line height. `body` lifts this over that rule, which loads
    after this file. */
 body .et_pb_text_inner ul,
 body .et_pb_post_content ul,
 body .entry-content ul {
     line-height: inherit;
 }

 /* One line height for content paragraphs and list items (was 1.5–2.06,
    set module by module in Divi). Specificity 0,1,2 beats Divi's
    `.et_pb_text_N p` (0,1,1); `:where()` adds none, so deliberate
    exceptions written more specifically here (hero copy 1.6, card copy
    1.65) still win. The per-module Divi values are now dead weight and
    get cleared as each module is touched. */
 body .et-l--post :where(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_slide_content, .et_pb_post_content) :is(p, li) {
     line-height: 1.7;
 }

 /* Letter spacing scale, in em so it reads the same at every size (Divi's
    per-module values were set in px, 0.14–0.33em on small caps). Values
    from the design handoff: body 0, display headings -0.02em, eyebrows
    0.18em, buttons 0.12em. Same specificity trick as line height above:
    0,1,2 beats Divi's `.et_pb_text_N h4` (0,1,1), and our own more
    specific rules (card h3s, hero) still win. Small caps text that is a
    `p` rather than an h4 drops to 0 until it is switched to an h4. */
 body .et-l--post :where(.et_pb_text_inner, .et_pb_blurb_description, .et_pb_slide_content, .et_pb_post_content) :is(p, li) {
     letter-spacing: 0;
 }

 body .et-l--post :where(.et_pb_text_inner, .et_pb_blurb_container) :is(h1, h2) {
     letter-spacing: -0.02em;
 }

 /* h4–h6 are used as uppercase eyebrows and labels on this site. */
 body .et-l--post :where(.et_pb_text_inner, .et_pb_blurb_container) :is(h4, h5, h6) {
     letter-spacing: 0.18em;
 }

 /* Eyebrow: small rust caps label above a section heading. Add the class
    `sg-eyebrow` to a Text module (Advanced → CSS Class) and type plain
    text. A label, not a heading, so it doesn't break the h2 outline.
    Only non-heading children are styled, so a module that holds both the
    eyebrow and its heading (e.g. "Three languages available" + h2) keeps
    the heading as is. 0,2,x beats the global p/li rules above. Values
    from the design handoff. */
 body .et-l--post .sg-eyebrow .et_pb_text_inner > :not(h1, h2, h3, h4, h5, h6) {
     margin: 0;
     padding: 0;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.5;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: #A4501F;
 }

 /* Gap to a heading in the same module (the handoff's 14px). */
 body .et-l--post .sg-eyebrow .et_pb_text_inner > :not(h1, h2, h3, h4, h5, h6):not(:last-child) {
     margin-bottom: 14px;
 }

 body .et-l--post .sg-eyebrow.et_pb_bg_layout_dark .et_pb_text_inner > :not(h1, h2, h3, h4, h5, h6) {
     color: #D9743A;
 }

 /* Blog grid card titles: no tracking (were +0.05em). The Blog module
    writes its title spacing as `.et_pb_blog_N .et_pb_post .entry-title
    { … !important }`, hence the !important. */
 body .et-l--post .et_pb_blog_grid .et_pb_post .entry-title {
     letter-spacing: 0 !important;
 }

 /* Buttons: 0.12em, matching the hero and Gravity Forms buttons. Divi
    writes a button's custom letter spacing as
    `body #page-container .et_pb_section .et_pb_button_N { … !important }`,
    so this needs the id and one more class to win. */
 body #page-container .et-l--post .et_pb_section a.et_pb_button.et_pb_button {
     letter-spacing: 0.12em !important;
 }


/* ===================================================================
    SANDY GERBER — PAGE HERO BANNER
    Structure: section.section-page-hero
                 └ .et_pb_row (flex)
                     ├ .et_pb_column_2_5  (empty — holds the photo open)
                     └ .et_pb_column_3_5  (headline / divider / copy / CTA)
    Background image: set per page in Divi → Section → Background → Image
                      Size: Cover · Position: Center · No Repeat
    Photo on the right: add .hero-photo-right to the section
    =================================================================== */

 .et_pb_section.section-page-hero {
   position: relative;
   padding: 0 !important;
   overflow: hidden;
   background-color: #000;          /* fallback + the black the type sits on */
 }

 /* ---- Row: full bleed, no gutters ---- */
 .section-page-hero .et_pb_row {
   position: relative;
   z-index: 2;
   display: flex;
   align-items: stretch;
   width: 100% !important;
   max-width: none !important;
   margin: 0 !important;
   padding: 0 !important;
 }

 .section-page-hero .et_pb_column {
   margin: 0 !important;
   min-height: max(688px, 50vh);    /* whichever is larger */
 }

 /* ---- Photo column + scrim ---- */
 .section-page-hero .et_pb_row > .et_pb_column_2_5 {
   position: relative;
   width: 50% !important;
 }

 .section-page-hero .et_pb_row > .et_pb_column_2_5::after {
   content: "";
   display: block;
   position: absolute;
   inset: 0;
   z-index: 2;
   pointer-events: none;
   background-image:
     radial-gradient(110% 90% at 20% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
     linear-gradient(90deg,
       rgba(0,0,0,.30)   0%,
       rgba(0,0,0,.15)  55%,
       rgba(0,0,0,.55)  72%,
       rgba(0,0,0,.94)  86%,
       rgb(0,0,0)       96%);
 }

 /* ---- Type panel: overlaps the photo column, no background of its own ---- */
 .section-page-hero .et_pb_row > .et_pb_column_3_5 {
   position: relative;
   z-index: 3;
   background: none;
   width: 60% !important;           /* 60% + the 10% reclaimed by the overlap */
   margin-left: -10% !important;    /* the overlap — push to -14% for more */
   display: flex;
   flex-direction: column;
   justify-content: center;
   box-sizing: border-box;
   padding: 180px clamp(28px, 5vw, 80px) 144px;
 }

 .section-page-hero .et_pb_module { margin-bottom: 0 !important; }

 /* ---- Headline ---- */
 .section-page-hero .et_pb_text_inner h2 {
   margin: 0;
   max-width: 800px;
   font-family: "Montserrat", system-ui, sans-serif;
   font-size: clamp(38px, 4vw, 64px);   /* Design, 2026-10-01: all hero banners */
   font-weight: 900;
   line-height: 0.96;
   letter-spacing: -0.02em;
   text-transform: uppercase;
   color: #fff;
   overflow-wrap: break-word;
 }

 .section-page-hero .et_pb_text_inner .highlight {
   color: #D9743A;                  /* light rust — AA on black */
 }

 /* ---- Rust rule (divider module) ---- */
 .section-page-hero .et_pb_divider {
   max-width: 144px;
   margin: 16px 0 22px !important;
 }
 .section-page-hero .et_pb_divider:before {
   border-top: 3px solid #C1622D;
   width: 100%;
   top: 0;
 }

 /* ---- Body copy ---- */
 .section-page-hero .et_pb_text_inner p {
   margin: 0;                       /* Divi adds the <p> only sometimes; the
                                       button's margin-top carries the gap */
   font-family: "Montserrat", system-ui, sans-serif;
   font-size: 17px;
   line-height: 1.6;
   color: #EDEDED;
 }

 /* Desktop-only line break, anywhere: <br class="sg-br-desktop"> (add it in
    the module's Text tab; the Visual tab can strip the class). Leave a space
    before the tag, or the words join when it is hidden. */
 @media (max-width: 980px) {
   br.sg-br-desktop {
     display: none;
   }
 }

 /* Manual <br> line breaks in hero body copy hold only on wide screens. Below
    the width where the lines start wrapping on their own, drop the breaks and
    let the browser balance the lines instead. Tune 1330px to that width; the
    text column is only ~55% of the row, so lines wrap well above tablet
    widths. Heading breaks (h1-h3) are kept. Excluded with :not() rather than
    targeting `p br`, since Divi doesn't always wrap the copy in <p>. */
 @media (max-width: 1330px) {
   .section-page-hero .et_pb_text_inner br:not(h1 br, h2 br, h3 br) {
     display: none;
   }

   .section-page-hero .et_pb_text_inner {
     text-wrap: balance;
   }
 }

 /* ---- Square rust CTA ---- */
 .section-page-hero .et_pb_button_module_wrapper {
   margin-top: 36px !important;     /* gap above the button, <p> or not */
 }
 .section-page-hero .et_pb_button {
   display: inline-block;
   align-self: flex-start;
   background: #C1622D !important;
   border: 0 !important;
   border-radius: 0 !important;
   color: #fff !important;
   font-family: "Montserrat", system-ui, sans-serif;
   font-size: 13px !important;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   padding: 18px 34px !important;
   transition: background .2s ease;
 }
 .section-page-hero .et_pb_button:hover {
   background: #A4501F !important;
   padding: 18px 34px !important;   /* stop Divi's hover jump */
 }
 .section-page-hero .et_pb_button:before {
   display: none !important;        /* Divi's left-side icon slot */
 }

 /* Arrow is always in the button, so hover never changes its width (Divi's
    own icon widens the button on hover). Hover only nudges the arrow right. */
 .section-page-hero .et_pb_button:after {
   content: "\2192" !important;
   display: inline-block !important;
   position: static !important;
   opacity: 1 !important;
   margin: 0 0 0 .6em !important;
   font-family: "Montserrat", system-ui, sans-serif !important;
   font-size: 1.15em !important;
   line-height: 1 !important;
   letter-spacing: 0;
   transition: transform .2s ease;
 }
 .section-page-hero .et_pb_button:hover:after {
   margin-left: .6em !important;    /* Divi resets it on hover */
   transform: translateX(4px);
 }

 /* ---- Variant: photo on the right ---- */
 .section-page-hero.hero-photo-right .et_pb_row {
   flex-direction: row-reverse;
 }
 .section-page-hero.hero-photo-right .et_pb_row > .et_pb_column_2_5::after {
   background-image:
     radial-gradient(110% 90% at 80% 45%, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
     linear-gradient(270deg,
       rgba(0,0,0,.30)   0%,
       rgba(0,0,0,.15)  55%,
       rgba(0,0,0,.55)  72%,
       rgba(0,0,0,.94)  86%,
       rgb(0,0,0)       96%);
 }
 .section-page-hero.hero-photo-right .et_pb_row > .et_pb_column_3_5 {
   margin-left: 0 !important;
   margin-right: -10% !important;
 }

 /* ---- Tablet / mobile: photo band on top, panel below ---- */
 @media (max-width: 980px) {
   .section-page-hero .et_pb_row,
   .section-page-hero.hero-photo-right .et_pb_row {
     flex-direction: column;
   }

   .section-page-hero .et_pb_row > .et_pb_column_2_5 {
     display: block !important;     /* Divi hides empty columns on phone */
     width: 100% !important;
     min-height: 320px;
   }
   .section-page-hero .et_pb_row > .et_pb_column_2_5::after,
   .section-page-hero.hero-photo-right .et_pb_row > .et_pb_column_2_5::after {
     background-image: linear-gradient(180deg,
       rgba(0,0,0,.25)   0%,
       rgba(0,0,0,.15)  55%,
       rgba(0,0,0,.70)  85%,
       rgb(0,0,0)      100%);
   }

   .section-page-hero .et_pb_row > .et_pb_column_3_5,
   .section-page-hero.hero-photo-right .et_pb_row > .et_pb_column_3_5 {
     width: 100% !important;
     margin: 0 !important;          /* drop the overlap when stacked */
     min-height: 0;
     padding: 48px 24px 56px;
   }

   .section-page-hero .et_pb_text_inner h2 { font-size: clamp(28px, 7vw, 40px); }
 }


 /* ===================================================================
    PAGINATION (WP-PageNavi), per the Blog page design (Blog - Recolour):
    44px square boxes, 8px apart, left-aligned 48px under the grid.
    Current page solid black; the rest a light grey outline.
    The Blog module's own pagination settings and Divi core both use
    !important (12px uppercase white, 3px tracking, blue hover), so these
    carry the #page-container id to out-rank them.
    =================================================================== */
 body #page-container .wp-pagenavi {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 48px 0 0;
     padding: 0;
     border: 0;
     text-align: left;
 }

 body #page-container .wp-pagenavi > a,
 body #page-container .wp-pagenavi > span {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     min-width: 44px;
     height: 44px;
     margin: 0;
     padding: 0 12px;
     box-sizing: border-box;
     font-family: 'Montserrat', Helvetica, Arial, sans-serif;
     font-size: 14px !important;
     font-weight: 700 !important;
     line-height: 1;
     letter-spacing: 0 !important;
     text-transform: none !important;
     color: #0D0D0D !important;
     background: transparent !important;
     border: 1px solid #E2E2E2 !important;
     border-radius: 0;
     transition: border-color .2s ease, color .2s ease;
 }

 /* Hover isn't in the mock: darken the outline, the usual light touch. */
 body #page-container .wp-pagenavi > a:hover {
     color: #0D0D0D !important;
     border-color: #0D0D0D !important;
 }

 body #page-container .wp-pagenavi > span.current {
     color: #FFFFFF !important;
     background: #0D0D0D !important;
     border-color: #0D0D0D !important;
 }

 /* Vertical menu: add `sg-vertical-menu` to a Divi Menu module (e.g. the
    blog sidebar's Post Categories) to list its links one per line at every
    width, with no hamburger on mobile. Divi otherwise lays menu items out
    in a flex row and swaps them for a hamburger below 980px. Link style
    from the Blog page design's Categories list. */
 body #page-container .sg-vertical-menu .et_pb_menu__wrap,
 body #page-container .sg-vertical-menu .et_pb_menu__menu,
 body #page-container .sg-vertical-menu .et_pb_menu__menu > nav {
     display: block !important;
 }

 body #page-container .sg-vertical-menu .et_pb_menu__menu > nav > ul {
     display: flex !important;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
     margin: 0;
     padding: 0;
 }

 body #page-container .sg-vertical-menu .et_pb_menu__menu > nav > ul > li {
     display: block;
     margin: 0;
     padding: 0;
 }

 body #page-container .sg-vertical-menu.et_pb_menu ul li a {
     padding: 0;
     font-size: 15px;
     font-weight: 600;
     line-height: 1.4;
     letter-spacing: 0;
     text-transform: none;
     color: #2B2B2B !important;
     opacity: 1;
 }

 body #page-container .sg-vertical-menu.et_pb_menu ul li a:hover {
     color: #A4501F !important;
 }

 body #page-container .sg-vertical-menu .et_mobile_nav_menu {
     display: none !important;
 }

 body #page-container .wp-pagenavi > a:focus-visible {
     outline: 2px solid #C1622D;
     outline-offset: 3px;
 }


 input.ninja-forms-field[type="submit"] {
     background-color: #c1622d!important;
     font-family: "Work Sans", Helvetica, Arial, Lucida, sans-serif!important;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 2px;
     padding: 9px 36px;
 }

 input.ninja-forms-field[type="submit"]:hover {
     background-color: #ff0000!important;
     color: #fff!important;
 }

 .et_pb_column.align-vertical-center {
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .et_pb_button_module_wrapper .et_pb_button:before {
     margin-left: -2em!important;
 }

 @media all and (max-width: 980px) {

     .et_pb_row.mobile-reverse {
         display: flex;
         flex-direction: column;
     }

     .et_pb_row.mobile-reverse .et_pb_column:nth-child(1) {
         order: 2;
     }

     .et_pb_row.mobile-reverse .et_pb_column:nth-child(2) {
         order: 1;
     }

 }

 @media (max-width: 479px) {
     #as-seen-logos .et_pb_row {
         padding: 9px 9px!important;
     }

 }

 /* 3 Columns Mobile */
 @media all and (max-width: 767px) {
     html .et-db .three-col-mob .et_pb_column {
         width:29.6667% !important;
     }
     html .et-db .three-col-mob .et_pb_column:nth-last-child(-n+3) {
         margin-bottom:0;
     }
     html .et-db .three-col-mob .et_pb_column:not(:nth-child(3n)) {
         margin-right:5.5% !important;
     }

     .et_pb_column.mobile-column-1 {
         width:100%!important;
     }
 }


 /* Decision Drivers */
 #decision-drivers-flipcards .dd-flipcard {
     display: block;
     width: 25%;
     margin: 0;
 }

 #decision-drivers-flipcards .dd-flipcard > .et_pb_module{
     display: block;
     width: 160px;
     margin: 0 auto;
 }

 #decision-drivers-flipcards .dd-flipcard .dd-flipcard-icon{
     margin-bottom: 20px;
 }

 #decision-drivers-flipcards .dd-flipcard .et_pb_text_inner {
     margin-left: -15px;
     margin-right: -15px;
 }


 /* Feature: Flipcard */
  .flip_panel {
     margin: 0 auto;
     position: relative;
     display: block;
     width: 100%;
     padding-bottom: 100%;
     transform-style: preserve-3d;
 }

 .flip_panel .front, .flip_panel .back {
     text-align: center;
 }

 .flip_panel .front {
     height: inherit;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     z-index: 99;
     text-align: center;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
 }

 .flip_panel .back {
     height: inherit;
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     z-index: 1000;

     -webkit-transform: rotateY(-180deg);
     -moz-transform: rotateY(-180deg);
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
     -webkit-transition: all .55s ease-in-out;
     -moz-transition: all .55s ease-in-out;
     -ms-transition: all .55s ease-in-out;
     -o-transition: all .55s ease-in-out;
     transition: all .55s ease-in-out;
 }

 /* Flip on hover (tap on touch) and keyboard focus; .flip kept for the old page script. */
 .flip_panel.flip .front,
 .flip_panel:hover .front,
 .flip_panel:focus-within .front {
     z-index: 99;
     -webkit-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
 }

 .flip_panel.flip .back,
 .flip_panel:hover .back,
 .flip_panel:focus-within .back {
     z-index: 100;
     -webkit-transform: rotateX(0deg) rotateY(0deg);
     -moz-transform: rotateX(0deg) rotateY(0deg);
 }

 /*** Flip Card Front box ****/
 #decision-drivers-flipcards .dd-flipcard h3 {
     letter-spacing: -1px;
 }
     .flip_box_front {
     width: 100%;
     min-width: 100%;
     height: 100%;
     min-height: 100%;
     background-repeat: no-repeat;
     background-position: center center;
 }

 .dd-safety .flip_box_front {
     background-image: url(/wp-content/uploads/2019/06/dd-safety.svg);
 }

 .dd-achievement .flip_box_front {
     background-image: url(/wp-content/uploads/2019/06/dd-achievement.svg);
 }

 .dd-value .flip_box_front {
     background-image: url(/wp-content/uploads/2019/06/dd-value.svg);
 }

 .dd-experience .flip_box_front {
     background-image: url(/wp-content/uploads/2019/06/dd-experience.svg);
 }


 /*** Flip Card Back box ****/
 .flip_box_back {
     width: 100%;
     min-width: 100%;
     height: 100%;
     min-height: 100%;
     border-radius: 50%;

     display: flex;
     justify-content: center;
     align-items: center;

     color: #fff;
     font-size: 14px;
     font-weight: 700;
     line-height: 1.3;
     text-transform: uppercase;
     box-sizing: border-box;

     padding: 10%;
 }

 .dd-safety .flip_box_back {
     background-color: #fae500;
     text-shadow: 0px 0px 6px rgba(129, 118, 1, 1);
 }

 .dd-achievement .flip_box_back {
     background-color: #fb2e1f;
     text-shadow: 0px 0px 6px rgba(117, 8, 0, 1);
 }

 .dd-value .flip_box_back {
     background-color: #0540f2;
     text-shadow: 0px 0px 6px rgba(0, 30, 121, 1);
 }

 .dd-experience .flip_box_back {
     background-color: #4900b2;
     text-shadow: 0px 0px 6px rgba(45, 0, 108, 1);
 }


 @media (max-width: 980px){
     #decision-drivers-flipcards.et_pb_row .dd-flipcard {
         width: 50%;
     }

     #decision-drivers-flipcards .dd-flipcard h3 {
         font-size: 20px;
     }

     #decision-drivers-flipcards.et_pb_row {
         width: 75%;
     }

     #decision-drivers-flipcards .dd-flipcard:nth-child(1),
     #decision-drivers-flipcards .dd-flipcard:nth-child(2)
     {
         margin-bottom: 30px;
     }
 }

 @media (max-width: 600px){
     #decision-drivers-flipcards.et_pb_row .dd-flipcard {
         width: 100%;
     }

     #decision-drivers-flipcards .dd-flipcard:nth-child(3)
     {
         margin-bottom: 30px;
     }
 }

 /* Podcast */
 .episode-list {
     display: flex;
     flex-direction: column;
     gap: clamp( 12px, 3vw, 24px);
 }

 .episode-item {
     padding: 18px;
     border-radius: 5px;
         background-color: rgba(0,0,0,0);
     transition: all 0.3s ease-in;
 }

 .episode-item:hover {
     background-color: rgba(0,0,0,0.1);
     transition: all 0.3s ease-in;
 }

 .episode-item .episode-wrap {
     display: grid;
     grid-template-columns: clamp( 48px, 7.5vw, 112.5px)  auto;
     grid-column-gap: clamp( 12px, 3vw, 24px);
 }

 .episode-item .episode-wrap .episode-thumbnail img {
     border-radius: 4px;
 }

 .episode-item .episode-wrap .episode-title h3{
     padding-bottom: 0;
 }

 .episode-item .episode-wrap .episode-content {
     display: flex;
     flex-direction: column;
     gap: 5px;
 }

 .episode-item .episode-wrap .episode-content {
     color: #2a2a01;
 }

 .episode-item .episode-wrap .episode-content .episode-description {
     width: 100%;
     display: -webkit-box;
      overflow: hidden;
    -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
 }

 /* Title 25% smaller than the global h3 (clamp(18px, 1.6vw, 22px)) then +15%;
    date moves above it at 90% size; a little air above the description. */
 body .episode-list .episode-item .episode-title h3 {
     font-size: clamp(17px, 1.52vw, 21px);
 }

 .episode-item .episode-wrap .episode-content .episode-meta {
     order: -1;
     font-size: 73%;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .episode-item .episode-wrap .episode-content .episode-description {
     margin-top: 8px;
 }

 /* [sg-podcast-list theme="dark"]: for dark sections. Load-more items append
    inside .episode-list, so they inherit this. */
 .episode-list--dark .episode-item:hover {
     background-color: rgba(255,255,255,0.1);
 }

 body .episode-list--dark .episode-item .episode-title h3 {
     color: #fff;
 }

 .episode-list--dark .episode-item .episode-wrap .episode-content,
 .episode-list--dark .episode-item .episode-meta,
 .episode-list--dark .episode-item .episode-description,
 .episode-list--dark .episode-item .episode-description p {
     color: #f6f7f7;
 }

 #podcast-navigation,
 .past-speaks-navigation {
     text-align: center;
     margin-top: 36px;
 }

 #ajax-load-more-episode,
 .sg-load-more-past-speaks {
     padding: 12px 36px!important;
     cursor: pointer; /* the anchors have no href, so no pointer by default */
 }

 /* Gravity Forms */
 .gform_wrapper.gravity-theme .gform_footer {
     justify-content: center;
 }


 /* Gravity Forms submit — newer forms render <button>, older ones <input>.
    Matches the hero CTA (.section-page-hero .et_pb_button), arrow included.
    An <input> can't take ::after, so the arrow is an SVG background on both;
    padding-right is sized for it, so hover never changes the width. Hover
    darkens the rust and nudges the arrow 4px right. */
 .gform_wrapper.gravity-theme .gform_footer input.gform_button,
 .gform_wrapper.gravity-theme .gform_footer button.gform_button {
     background-color: #C1622D !important;
     border: 0 !important;
     border-radius: 0 !important;
     color: #fff !important;
     font-family: "Montserrat", system-ui, sans-serif;
     font-size: 13px !important;
     font-weight: 700;
     font-style: normal;
     letter-spacing: 0.12em;
     line-height: 1.7em !important;
     text-transform: uppercase;
     text-decoration: none;
     padding: 14px 56px 14px 34px !important;   /* right = 34 + arrow + gap */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") !important;
     background-repeat: no-repeat !important;
     background-position: right 34px center !important;
     transition: background-color .2s ease, background-position .2s ease;
 }

 .gform_wrapper.gravity-theme .gform_footer input.gform_button:hover,
 .gform_wrapper.gravity-theme .gform_footer button.gform_button:hover {
     background-color: #A4501F !important;
     background-position: right 30px center !important;
 }

 /* Speaking Events */
 .speaking-events {
     display: grid;
     gap: 1rem;
     /* min() so a column never exceeds the container on phones (<360px wide) */
     grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
 }

 .speaking-events .speaking-event-item {
     display: flex;

     background-color: hsla(0,0%,0%,0.1);
     position: relative;
 }

 .speaking-events .speaking-event-item .event-date {
     position: absolute;
     top: 0;
     right: 36px;
     background: #c1622d;
     color: #fff;
     padding: 0;
     text-align: center;
     display: flex;
     flex-direction: column;
     line-height: 1.1;
     padding: 18px 18px 12px 18px;
 }

 .event-date .date-month {
     font-size: 14px;
 }

 .event-date .date-day {
     font-size: 24px;
     font-weight: bold;
 }

 /* Past events only: they span several years, so the badge carries one. */
 .event-date .date-year {
     font-size: 12px;
     letter-spacing: 0.06em;
     opacity: 0.85;
     margin-top: 4px;
 }

 /* The badge is taller with the year; keep the venue clear of it too. */
 .past-speaks .speaking-event-item .event-content .event-venue {
     width: calc(100% - 72px);
 }

 .speaking-events .speaking-event-item a {
     color: #032796;
 }

 .speaking-events .speaking-event-item .event-content {
     width: 100%;
     padding: 36px;
 }

 .speaking-events .speaking-event-item .event-content .event-title {
     width: calc(100% - 72px);
 }

 /* Card title: rust, sentence case (as typed; CSS can't re-case it), linked
    or not. `body .et-l--post` lifts it over the global uppercase h3 rule and
    the blue link colour above. */
 body .et-l--post .speaking-events .speaking-event-item .event-content .event-title h3,
 body .et-l--post .speaking-events .speaking-event-item .event-content .event-title h3 a {
     color: #A4501F;
     font-weight: bold;
     text-transform: none;
 }

 /* Venue: same look as .sg-eyebrow, but black. */
 body .et-l--post .speaking-events .speaking-event-item .event-venue h4 {
     margin: 0 0 14px;
     padding: 0;
     font-size: 12px;
     font-weight: 700;
     line-height: 1.5;
     letter-spacing: 0.18em;
     text-transform: uppercase;
     color: #000;
 }

 .past-speaks .group-by-year {
     margin-bottom: 36px;
 }

 .past-speaks .group-by-year .group-heading h3 {
     font-size: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
     font-weight: bold;
 }

 .gform_wrapper .gform_heading {
     padding-bottom: 36px;
 }

 @media (min-width: 1390px) {
     .speaking-events {
         grid-template-columns: repeat(auto-fit, minmax(360px, calc( (100% - 2rem) / 3 ) ) );
     }
 }

 #cc-mailchimp-form .gform_heading {
     display: none;
 }

 #cc-mailchimp-form  .gform_wrapper.gravity-theme .gform_footer {
     justify-content: left;
 }

 .gform_wrapper.gravity-theme #gform_9 h3.gsection_title {
     font-size: 24px;
     margin-top: 36px;
 }

 .gform_wrapper.gravity-theme #gform_9 .gfield_label {
     font-size: 18px;
 }

 .gform_wrapper.gravity-theme #gform_9 .gsection_description {
     font-size: 17px;
 }

/* ==========================================================================
   home-v2 design — site-wide
   Approved by Sandy 2026-09-29 and un-scoped from the home-v2 demo page.
   Older pages use h2/h3 for things that aren't section or card headings
   (small eyebrow h2s, form section h3s, speaking-event card titles, grey
   copy on white) and are being adjusted page by page.
   ========================================================================== */

/* Section headings: every section header is an h2 in the new design, one
   fluid size. Hero keeps its own clamp (see "Page hero banner" above).
   Specificity beats Divi's per-module .et_pb_text_N h2 sizes at every
   breakpoint without !important. */
.et_pb_section:not(.section-page-hero) .et_pb_text_inner h2 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
}

/* Card headings (h3) and the body copy under them, e.g. Experience / Vision /
   Awards. Scoped to .et-l--post (page content) so the Theme Builder footer's
   h3s (Sandy Gerber / Navigation / Connect) keep their own style. Heading is
   20px at a 1250px viewport, 18px at 1125px and below, 22px at 1375px up. */
.et-l--post .et_pb_text_inner h3 {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.et-l--post .et_pb_text_inner h3 ~ p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
/* Grey copy only on dark cards (text module Background Layout: Dark). On
   light sections it keeps the module's own colour (black), e.g. the
   For Individuals / For Organizations copy on the homepage. */
.et-l--post .et_pb_bg_layout_dark .et_pb_text_inner h3 ~ p {
  color: #B4B4B4;
}

/* Slider slide titles (e.g. professional-speaker hero): fluid size instead of
   the fixed 67px, matching the testimonial sliders. `body` lifts this over Divi's identical selector; the
   testimonial rule below is more specific and still wins for those sliders. */
body .et_pb_slide_description .et_pb_slide_title {
  font-size: clamp(20px, 2vw, 28px);
}

/* Testimonial sliders (sections with class chloe_slider_testi): the quote is
   the slide title, which otherwise falls back to the Customizer's global
   44px. Leave the slider's Title Text size blank in Divi so this applies.
   Line height opens up from Divi's 1.1 since the quotes run to two lines. */
.chloe_slider_testi .et_pb_slide_description .et_pb_slide_title {
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

/* Blog grid cards: Divi pads each card 19px and pulls the featured image out
   with -20px side margins, so the title and excerpt sat ~20px inside the
   image edges. Drop the side padding and the pull so text and image share
   one width. `body` lifts these over Divi's identical selectors in
   style-static.min.css, which loads after this file. */
body .et_pb_blog_grid .et_pb_post {
  padding-left: 0;
  padding-right: 0;
}
body .et_pb_blog_grid .et_pb_post .et_pb_image_container {
  margin-left: 0;
  margin-right: 0;
}

/* Blog grid gutter halved: Divi's 5.5% column gap becomes 2.75%, columns
   widen to fill. Divi's :nth-child rules still zero the last column's margin
   (they outrank these). Desktop is 3-up, tablet 2-up, phone 1-up (no gap).
   `body .et_pb_row` outranks Divi's `.et_pb_gutters3 …` column widths. */
@media (min-width: 981px) {
  body .et_pb_row .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 {
    width: 31.5%;                    /* (100% - 2 × 2.75%) / 3 */
    margin-right: 2.75%;
  }
}
@media (max-width: 980px) {
  body .et_pb_row .et_pb_blog_grid .column.size-1of2 {
    width: 48.625%;                  /* (100% - 2.75%) / 2 */
    margin-right: 2.75%;
  }
}

/* ==========================================================================
   home-v2 design — END
   ========================================================================== */

/* Vertical centre: add `sg-vcenter` to a column (Advanced → CSS Class). Needs
   the column taller than its content, so turn on the row's Equalize Column
   Heights or give the column a min-height. */
body .et-l--post .et_pb_column.sg-vcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}