/* =================================================================   AUTOMATED PODCAST - Shared Stylesheet================================================================= */ 
 /* ******* 1. VARIABLES & BASE ******* */
 :root {
    --navy: #0a2d49;
    --dark-navy: #072339;
    --deep-navy: #071d30;
    --blue: #0b67b2;
    --gray: #8e8c8c;
    --light-bg: #f4f7fb; 
 /* Consistent layout tokens */ --container-max: 1446px; 
 /* Max content width */ --card-pad-x: 45px; 
 /* Horizontal padding inside content cards */ --card-pad-y: 40px; 
 /* Vertical padding inside content cards */ --section-gap: 60px; 
 /* Empty space between main sections */
} 
 /* Override Bootstrap container-xl max-width to match site spec (1446px) */ @media (min-width: 1200px) {
    .container, .container-xl, .container-lg, .container-md, .container-sm {
        max-width: var(--container-max);
    }
}
* {
    box-sizing: border-box;
}
body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--navy);
    background-image: url('/images/automated-background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    color: var(--navy);
}
a {
    text-decoration: none;
} 
 /* ******* 2. A3 MINI HEADER ******* */
 .a3-header {
    background-color: var(--navy);
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.a3-header .a3-logo {
    height: 38px;
}
.a3-header .contact-link {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.a3-header .join-link {
    color: #C85252;
    font-size: 13px;
    font-weight: 600;
}
.a3-header .hdr-divider {
    color: rgba(255, 255, 255, 0.35);
    margin: 0 8px;
}
@media (max-width: 460px) {
    .a3-header .d-flex {
        display: block !important;
        text-align: center;
    }
} 
 /* ******* 3. MAIN NAVIGATION ******* */
 
 /* Sticky behavior: the nav sticks to the top of the viewport. JS adds the   .is-scrolled class once the page scrolls past ~20px so the nav slims to   take less vertical space. */ .main-nav {
    background-color: var(--dark-navy);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 1030; 
 /* above Bootstrap's modal-backdrop default; matches BS navbar */ transition: padding .25s ease; 
 /* Subtle drop shadow appears once scrolled so the nav lifts off the page */ box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.main-nav.is-scrolled {
    padding: 8px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.main-nav .nav-logo {
    height: 80px;
    transition: height .25s ease;
}
.main-nav.is-scrolled .nav-logo {
    height: 44px;
}
.main-nav .nav-links a {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    padding: 0 18px;
    transition: color .2s, font-size .25s ease;
}
.main-nav.is-scrolled .nav-links a {
    font-size: 16px;
}
.main-nav .nav-links a:hover, .main-nav .nav-links a.nav-active {
    color: var(--blue);
}
.main-nav .social-icons a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 30px;
    margin-left: 14px;
    transition: color .2s, font-size .25s ease;
}
.main-nav.is-scrolled .social-icons a {
    font-size: 22px;
}
.main-nav .social-icons a:hover {
    color: #fff;
} 
 /* ******* 4. PAGE HEROES ******* */
 
 /* Homepage "This Week" hero */ 
 /* Top breathing room from .main-nav above (now sticky, in normal flow at   top of page). */ .this-week-section {
    padding: 36px 0 0;
}
.this-week-label {
    color: #fff;
    font-weight: 800;
    font-size: 32px;
    text-transform: uppercase;
}
.this-week-date {
    color: #fff;
    font-weight: 500;
    font-size: 18px;
} 
 /* Inner-page hero (breadcrumb + title + description) */ 
 /* 36px breathing room from sticky .main-nav above. Bottom spacing comes from   --section-gap so the rhythm to the next section stays consistent. */ .page-hero {
    padding: 36px 0 0;
    margin-bottom: var(--section-gap);
} 
 /* Generic top-of-page wrapper for pages whose first content element is not   .this-week-section or .page-hero (e.g. the episode-detail page). */ .page-top {
    padding-top: 36px;
} 
 /* Generic main-section wrapper used across pages. Same role as .content-section   but reads naturally on pages that aren't using the homepage card pattern. */ .page-section {
    margin-bottom: var(--section-gap);
}
.page-section:last-child {
    margin-bottom: 0;
}
.page-hero-bg {}
.breadcrumb-nav {
    color: var(--light-bg);
    font-size: 16px;
    margin-bottom: 16px;
    padding-top: 4px;
}
.breadcrumb-nav a {
    color: var(--light-bg);
}
.breadcrumb-nav a:hover {
    color: #fff;
}
.page-hero-title {
    color: #fff;
    font-weight: 600;
    font-size: 32px;
    margin-bottom: 8px;
}
.page-hero-desc {
    color: #fff;
    font-size: 19px;
    line-height: 1.6;
    max-width: 560px;
} 
 /* ******* 5. FEATURED EPISODE CARD ******* */

.featured-card {
    background-color: var(--light-bg);
    border-radius: 5px;
    overflow: hidden;
}
.featured-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center; 
 /* Horizontal aligns with card token; vertical stays compact (header bar) */ padding: 18px var(--card-pad-x);
}

 /* The image wrap is the stage. The image and overlay are absolute layers   (background); .episode-content drives the wrap's actual height by sitting   in normal flow with padding-top: 140px (preserves the gap to the white   header bar above) and padding-bottom: 48px (breathing room at the bottom).   min-height keeps the card from looking squashed when there's little text. */
.episode-image-wrap {
    position: relative;
    overflow: hidden;
    min-height: 520px;
}
.episode-image-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.episode-overlay {
    position: absolute;
    inset: 0;
    background: transparent linear-gradient(16deg, #16588E 0%, #0A2D49 43%, #0A2D4961 100%) 0% 0% no-repeat padding-box;
    opacity: 0.89;
}
.episode-content { 
 /* In normal flow so this drives the wrap's actual height. Sits ABOVE the absolute image/overlay layers thanks to position: relative + z-index. */ position: relative;
    z-index: 1;
    padding: 140px var(--card-pad-x) 48px;
}
.episode-number {
    color: #fff;
    font-weight: 800;
    font-size: 19px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.episode-title {
    color: #fff;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.25; 
 /* Widened ~25% from 660px so the headline has more breathing room */ max-width: 825px;
    margin-bottom: 18px;
}
.episode-desc {
    color: #fff;
    font-size: 16px;
    line-height: 1.75; 
 /* Widened ~25% from 480px to match the wider title area */ max-width: 600px;
    margin-bottom: 10px;
}
.episode-duration {
    color: #fff;
    font-size: 14px;
    margin-bottom: 16px;
}
.podcast-platforms a {
    color: #fff;
    font-size: 20px;
    margin-right: 18px;
    opacity: 0.5;
}
.podcast-platforms a:hover {
    opacity: 1;
}
.watch-btn {
    display: inline-block;
    font-weight: 800;
    font-size: 17px;
    padding: 20px 34px;
    text-transform: uppercase;
    margin-top: 18px;
    transition: background .2s, color .2s;
    background: #fff;
    color: var(--navy);
}
.watch-btn:hover {
    background: var(--navy);
    color: #FFF;
}
@media (max-width: 640px) {
    .episode-image-wrap {
        min-height: auto;
    }
    .episode-image-wrap img {
        position: relative;
        aspect-ratio: 16 / 9;
    }
    .episode-overlay {
        display: none;
    }
    .episode-content {
        background-color: #FFF;
        padding: 32px 36px;
    }
    .episode-number, .episode-title, .episode-desc, .episode-duration {
        color: var(--navy);
    }
    .watch-btn {
        background-color: var(--blue);
        color: #FFF
    }
    .watch-btn:hover {
        background-color: #0956a0;
    }
    .podcast-platforms a {
        color: var(--blue)
    }
}
@media (max-width: 460px) {
    .watch-btn {
        display: block;
        padding: 20px;
    }
    .episode-title {
        font-size: 28px;
    }
    .featured-card-header {
        display: block;
    }
}

 /* ******* 6. SECTION UTILITIES ******* */

.section-title {
    font-weight: 800;
    font-size: 27px;
    text-transform: uppercase;
    color: var(--navy);
    margin: 0;
}
.section-title-white {
    font-weight: 700;
    font-size: 27px;
    text-transform: uppercase;
    color: #fff;
    margin: 0; 
 /* Display as flex so we can render a horizontal rule next to the title that grows to fill any space between the title text and the optional section-link-white on the right. */ display: flex;
    align-items: center;
    flex: 1; 
 /* take all available width in the parent flex row */ gap: 24px;
    white-space: nowrap;
}
.section-title-white::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #fff;
}

 /* When the title is followed by a link (e.g. "ALL EPISODES →"), mirror the   24px gap on the title side so the rule's right end has equal breathing   room before the link. When no link follows (e.g. the "ABOUT" header), the   rule extends all the way to the right edge. */
.section-title-white:has(+ a)::after, .section-title-white:has(+ .section-link-white)::after {
    margin-right: 24px;
}
.section-link {
    color: var(--blue);
    font-weight: 600;
    font-size: 15px;
}
.section-link:hover {
    text-decoration: underline;
    color: var(--blue);
}
.section-link-white {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
}
.section-link-white:hover {
    color: var(--blue);
}
.card-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
@media (max-width: 460px) {
    .card-header-row {
        display: block;
    }
}
.content-card--newsletter .card-header-row, .content-card.p-0 .card-header-row {
    padding: 18px 36px;
    margin-bottom: 0;
}
.content-card--newsletter .card-header-row, .content-card--news .card-header-row {
    border-bottom: 1px solid #B3BECE;
}
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
} 
 /* ******* 7. CONTENT CARDS ******* */
 
 /* Every main section gets a 60px gap below it via .content-section margin.   The first hero section (.this-week-section) also uses --section-gap to   create the same 60px gap before the next section. */ .content-section {
    padding: 0;
    margin-bottom: var(--section-gap);
}
.content-section:last-child {
    margin-bottom: 0;
}
.this-week-section {
    margin-bottom: var(--section-gap);
}
.content-card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 17px rgba(136, 137, 138, 0.3);
    padding: var(--card-pad-y) var(--card-pad-x);
} 
 /* Bordered variant (no shadow) */ .content-card-bordered {
    background: #fff;
    border: 1px solid #707070;
    padding: var(--card-pad-y) var(--card-pad-x);
} 
 /* Full-bleed variant: when a card uses Bootstrap's p-0 (e.g. the newsletter   card with the navy signup panel touching the right edge), individual   inner columns are responsible for their own padding. See the newsletter   left-column rule below. */ .content-card.p-0 {
    padding: 0 !important;
} 
 /* ******* 8. NEWS SECTION ******* */
 .news-featured-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.news-featured-title {
    font-weight: 800;
    font-size: 32px;
    color: var(--navy);
    line-height: 1.25;
    margin: 10px 0 6px;
    transition: color .25s;
}
.news-featured-title:hover {
    color: var(--blue);
}
.news-meta {
    color: var(--gray);
    font-size: 15px;
    margin-bottom: 6px;
}
.news-list-item {
    display: flex;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #eee;
}
.news-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.news-list-thumb {
   /* width: 170px;
    height: 115px;*/
    object-fit: cover;
    flex-shrink: 0;
	width: 30%
}
.news-list-title {
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
    line-height: 1.35;
    margin-bottom: 6px;
    transition: color .25s;
}
.news-list-item:hover .news-list-title {
    color: var(--blue);
}
@media (max-width: 460px) {
    .news-list-item {
        display: block;
    }
    .news-list-thumb {
        width: 100%;
        margin-bottom: 6px;
    }
} 
 /* ── 9. NEWSLETTER SECTION ── */ 
 /* ── NEWSLETTER CARD - full-bleed navy panel ──   Card has zero padding so the navy panel touches the right edge.   Left column has its own padding via .newsletter-left so the header   divider can extend the full width of the left column without bumping   into the navy panel. */ .content-card--newsletter {
    padding: 0 !important;
    overflow: hidden;
} 
 /* Left column container - owns the white-area padding (32px all around).   Slightly tighter than the global --card-pad tokens because the design   uses a denser layout here. */ .newsletter-left {
    padding: 32px 36px;
} 
 /* Header row: "NEWSLETTER" on the left, "ALL NEWSLETTERS →" on the right,   with a divider line below that spans the full width of the left column. */ .newsletter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e8e8e8;
}
.newsletter-header .section-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: var(--navy);
    margin: 0;
    text-transform: uppercase;
}
.newsletter-header .section-link {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--blue);
    text-transform: uppercase;
} 
 /* "ISSUE 00 · OCT 24, 2025" meta line */ .newsletter-issue {
    font-weight: 700;
    font-size: 12px;
    color: #9a9c9f;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
} 
 /* Big mixed-case title - sized to fit comfortably in 1-2 lines on most   titles. If a particularly long title still wraps to 3 lines that's OK. */ .newsletter-big-title {
    font-weight: 800;
    font-size: 32px;
    color: var(--navy);
    line-height: 1.15;
    margin-bottom: 14px;
    max-width: 480px;
}
.newsletter-excerpt {
    font-size: 14px;
    color: var(--navy);
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 460px;
}
.newsletter-cta-btn {
    display: inline-block;
    background-color: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 12px 20px;
    text-transform: uppercase;
}
.newsletter-cta-btn:hover {
    background-color: #0956a0;
    color: #fff;
} 
 /* ── NAVY SIGNUP PANEL ─────────────────────────────────────── */ .newsletter-signup-panel {
    background-color: var(--navy);
    padding: 32px 36px;
    height: 100%;
    position: relative;
    overflow: hidden;
} 
 /* Paper plane decoration in the top-right corner. Outline-only SVG,   tilted up-right, semi-transparent so it sits behind content. */ .newsletter-signup-panel::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 22px;
    width: 150px;
    height: 150px;
    background-image: url("/images/paper-airplane.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.35;
    pointer-events: none;
} 
 /* Content sits above the paper plane decoration */ .newsletter-signup-title, .newsletter-signup-desc, .newsletter-signup-panel .subscribe-form {
    position: relative;
    z-index: 1;
}
.newsletter-signup-title {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.4;
    margin: 0 0 10px;
    max-width: 280px;
}
.newsletter-signup-desc {
    color: #fff;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 360px;
} 
 /* ******* 10. SHORTS SECTION ******* */
 .short-card {
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}
.short-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-4px);
}
.short-card img {
    width: 100%;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.short-card:hover img {
    transform: scale(1.04);
}
.short-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 26, 42, 0.92) 0%, transparent 50%);
}
.short-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 52px;
    opacity: 0.9;
    pointer-events: none;
}
.short-info {
    position: absolute;
    bottom: 18px;
    left: 18px;
    right: 18px;
}
.short-title {
    color: #fff;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 5px;
}
.short-meta {
    color: #fff;
    font-size: 13px;
}
.shorts-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}
.shorts-dots button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--navy);
    opacity: 0.25;
    display: inline-block;
    border: none;
    padding: 0;
    flex-shrink: 0;
}
.shorts-dots button.active {
    opacity: 1;
} 
 /* ******* 11. VIDEO CARDS (More Videos) ******* */
 .dark-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
@media (max-width: 460px) {
    .dark-section-header {
        display: block
    }
} 
 /* The anchor (<a class="video-card">) is the card root and must fill the   Bootstrap column so siblings end up equal height. */ .col-md-4 > .video-card, .video-card {
    border: 1px solid #707070;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s; 
 /* Equal-height cards: fill the Bootstrap column and use a column flex layout so the body grows to absorb any height difference caused by varying excerpt length. */ height: 100%;
    display: flex;
    flex-direction: column;
}
.video-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-4px);
}
.video-card:hover .video-title {
    color: var(--blue);
}
.video-thumb-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; 
 /* 16:9 */
    aspect-ratio: 16 / 9
}
.video-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.video-card:hover .video-thumb {
    transform: scale(1.04);
}
.video-date-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(10, 45, 73, 0.85));
    padding: 20px 12px 10px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
.video-card-body {
    padding: 14px; 
 /* Let the body grow to fill remaining card height when neighbour cards have longer excerpts. */ flex: 1 1 auto;
}
.video-title {
    font-weight: 500;
    font-size: 17px;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 8px;
    transition: color .25s;
}
.video-excerpt {
    color: #555;
    font-size: 14px;
    line-height: 1.6;
} 
 /* ******* 12. EPISODE GRID CARDS (All Episodes page) ******* */
 .ep-card {
    background: #fff;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .25s, transform .25s;
}
.ep-card:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-4px);
}
.ep-card-thumb-wrap {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; 
 /* 16:9 */
}
.ep-card-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
    transition: transform .35s ease;
}
.ep-card:hover .ep-card-thumb {
    transform: scale(1.04);
}
.ep-card:hover .ep-card-title {
    color: var(--blue);
}
.ep-card-date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(7, 29, 48, 0.88));
    padding: 18px 14px 10px;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
.ep-card-body {
    padding: 16px 18px 20px;
}
.ep-card-title {
    font-weight: 500;
    font-size: 18px;
    color: #000;
    line-height: 1.4;
    margin-bottom: 10px;
    transition: color .25s;
}
.ep-card-excerpt {
    font-size: 14px;
    color: #333;
    line-height: 1.65;
} 
 /* ******* 13. FILTER BAR ******* */
 .filter-bar {
    background: #fff;
    border: 1px solid #707070;
    padding: 18px 26px;
    margin-bottom: 0;
}
.filter-label {
    color: var(--navy);
    font-size: 18px;
    font-weight: 400;
    margin-right: 10px;
    margin-bottom: 0;
    white-space: nowrap;
}
.filter-pill {
    display: inline-block;
    border: 1px solid var(--blue);
    border-radius: 50px;
    padding: 5px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    background: #fff;
    cursor: pointer;
    transition: background .15s, color .15s;
    margin-right: 8px;
}
.filter-pill.active, .filter-pill:hover {
    background-color: var(--blue);
    color: #fff;
}
.filter-search {
    background-color: var(--light-bg);
    border: 1px solid rgba(187, 187, 187, 0.52);
    padding: 10px 42px 10px 18px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #bbb;
    outline: none;
    width: 100%;
}
.filter-search::placeholder {
    color: #bbb;
}
.filter-search-wrap {
    position: relative;
    width: 300px;
}
.filter-search-wrap .fa-magnifying-glass {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    pointer-events: none;
}
.load-more-btn {
    color: var(--blue);
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    padding: 12px 0;
}
.load-more-btn:hover {
    text-decoration: underline;
} 
 /* ******* 14. NEWSLETTER SUBSCRIBE BAR ******* */
 .newsletter-bar {
    padding: 28px 24px;
}
.newsletter-bar-inner {
    background: #fff;
    box-shadow: 0 0 12px rgba(187, 187, 187, 0.31);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    max-width: 1395px;
    margin: 0 auto;
    justify-content: space-between;
}
.newsletter-bar-title {
    color: var(--navy);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 4px;
}
.newsletter-bar-subtitle {
    color: var(--navy);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}
.newsletter-bar-email {
    flex: 1;
    min-width: 200px;
    background: var(--light-bg);
    border: 1px solid rgba(187, 187, 187, 0.52);
    padding: 16px 20px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    color: #bbb;
    outline: none;
    text-align: center;
}
.newsletter-bar-email::placeholder {
    color: #bbb;
}
.newsletter-bar-btn {
    background-color: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    border: none;
    padding: 16px 36px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.newsletter-bar-btn:hover {
    background-color: #0956a0;
} 
 /* ******* Pagination ******* */
 .pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 16px 0 20px;
}
.pagination-row a, .pagination-row span {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 4px 10px;
    transition: color .2s;
}
.pagination-row a:hover {
    color: var(--blue);
}
.pagination-row a.pg-active {
    color: var(--blue);
}
.pagination-row .pg-dots {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
} 
 /* ******* 8b. TOP STORIES SIDEBAR ******* */
 .top-stories-panel {
    background: #fff;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.16);
    height: 100%;
    padding: 28px 28px 20px;
}
.top-stories-heading {
    font-weight: 700;
    font-size: 18px;
    color: #36393d;
    margin-bottom: 0;
}
.top-stories-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 12px 0;
}
.story-item {
    margin-bottom: 4px;
}
.story-category {
    display: inline-block;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
    opacity: 0.85;
}
.cat-vision {
    color: #4cb74d;
}
.cat-robotics {
    color: #a71f23;
}
.cat-ai {
    color: #7e287b;
}
.cat-motion {
    color: #f15a25;
}
.story-headline {
    font-weight: 500;
    font-size: 15px;
    color: #051d31;
    line-height: 1.4;
    margin-bottom: 5px;
}
.story-date {
    color: #949494;
    font-size: 12px;
    margin-bottom: 0;
} 
 /* ******* 19. ARTICLE DETAIL ******* */
 
 /* The article card owns its full frame (40 top/bottom, 45 left/right). The   markup includes inline Bootstrap padding utilities (p-4, px-4, pb-3, pt-2,   pb-4) on direct children; we neutralise those so the card's own padding   wins everywhere instead of stacking 24-48px of extra Bootstrap padding   on top of our token padding. */ .article-card {
    background: #fff;
    box-shadow: 0 0 9.5px rgba(148, 148, 148, 0.2);
    padding: var(--card-pad-y) var(--card-pad-x);
}
.article-card > [class*="p-"] {
    padding: 0 !important;
} 
 /* Small visual gap between zones - replaces the vertical Bootstrap padding   that we zeroed out above. */ .article-card > * + * {
    margin-top: 18px;
} 
 /* Full-bleed feature image inside an .article-card should escape the card's   own horizontal padding. */ .article-card > .article-featured-img {
    margin-left: calc(var(--card-pad-x) * -1);
    margin-right: calc(var(--card-pad-x) * -1);
    width: calc(100% + (var(--card-pad-x) * 2));
}
.article-title {
    font-weight: 800;
    font-size: 38px;
    color: #051d31;
    line-height: 1.25;
    margin-bottom: 16px;
}
.article-meta {
    font-size: 14px;
    color: var(--gray);
    margin-bottom: 0;
}
.article-category-label {
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #686767;
}
.article-byline-link {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
}
.article-byline-link:hover {
    color: #0956a0;
}
.article-featured-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}
.article-body {
    font-size: 18px;
    color: #000;
    line-height: 1.75;
}
.article-body p {
    margin-bottom: 1.25rem;
}
.article-share {
    color: #949494;
    font-size: 17px;
}
.article-share a {
    color: #949494;
    font-weight: 600;
}
.article-share a:hover {
    color: var(--navy);
}
.related-section {
    background: #fff;
    box-shadow: 0 0 9.5px rgba(148, 148, 148, 0.2);
    padding: var(--card-pad-y) var(--card-pad-x);
}
.related-art-card {
    display: flex;
    background: #fff;
    box-shadow: 0 0 9.5px rgba(148, 148, 148, 0.2);
    overflow: hidden;
    height: 170px;
}
.related-art-thumb {
    width: 136px;
    height: 170px;
    object-fit: cover;
    flex-shrink: 0;
}
.related-art-body {
    padding: 16px 18px;
    flex: 1;
}
.related-art-category {
    display: inline-block;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
    opacity: 0.85;
}
.related-art-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--navy);
    line-height: 1.35;
    margin-bottom: 8px;
}
.related-art-meta {
    color: #949494;
    font-size: 13px;
} 
 /* ******* 15. EPISODE BRAND HEADER ******* */
 
 /* Used on episode detail pages instead of the standard main-nav */ .brand-header {
    background: #fff;
    box-shadow: 0 9px 7.5px rgba(203, 205, 207, 0.34);
    padding: 14px 0;
}
.brand-logo {
    width: 100px;
    flex-shrink: 0;
}
.brand-title {
    font-weight: 700;
    font-size: 38px;
    color: var(--navy);
    line-height: 1;
    margin: 0;
    letter-spacing: .5px;
}
.brand-subtitle {
    font-weight: 600;
    font-size: 18px;
    color: var(--navy);
    margin: 4px 0 0;
}
.brand-search {
    background: var(--light-bg);
    border: 1px solid #ced4dc;
    padding: 8px 36px 8px 32px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    color: #c4c5c9;
    outline: none;
    width: 220px;
}
.brand-search-wrap {
    position: relative;
}
.brand-search-wrap .fa-magnifying-glass {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    font-size: 14px;
    pointer-events: none;
}
.brand-platform-icons a {
    color: var(--navy);
    font-size: 18px;
    margin-left: 14px;
    opacity: 0.8;
    transition: opacity .2s;
}
.brand-platform-icons a:hover {
    opacity: 1;
} 
 /* Episode sub-navigation */ .ep-subnav {
    background: var(--light-bg);
    box-shadow: 0 9px 12px rgba(5, 23, 38, 0.29);
    padding: 0;
}
.ep-subnav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ep-subnav-tabs {
    display: flex;
    align-items: stretch;
}
.ep-subnav-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    font-size: 20px;
    font-weight: 400;
    color: #051d31;
    background: #fff;
    box-shadow: 0 0 9.5px rgba(223, 223, 223, 0.6);
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.ep-subnav-tab:hover {
    color: var(--blue);
}
.ep-subnav-tab.active {
    background: var(--blue);
    color: #fff;
    font-weight: 600;
}
.ep-subnav-platforms {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-right: 8px;
}
.ep-subnav-platforms a {
    color: var(--navy);
    font-size: 18px;
    opacity: 0.75;
    transition: opacity .2s;
}
.ep-subnav-platforms a:hover {
    opacity: 1;
} 
 /* ******* 17. AD BANNER + LEADERBOARD AD ******* */
 .bc.bagh-79 {
    margin: 3rem 0;
} 
 /* ******* 15. ABOUT SECTION ******* */
 .about-card {
    background: #fff;
    border: 1px solid #707070;
    margin-bottom: var(--section-gap);
}
.about-top {
    padding: var(--card-pad-y) var(--card-pad-x);
}
.about-artwork {
    width: 280px;
}
.about-headline {
    font-weight: 600;
    font-size: 27px;
    line-height: 1.5;
    color: var(--navy);
    margin-bottom: 20px;
}
.about-text {
    font-size: 17px;
    color: var(--navy);
    line-height: 2;
}
.about-features {
    border-top: 1px solid #707070;
}
.about-feature-col {
    padding: 28px 36px;
    border-right: 1px solid #707070;
    display: flex;
    flex-direction: column;
}
.about-feature-col .about-feature-divider:last-of-type {
    margin-top: auto;
}
.about-feature-col:last-child {
    border-right: none;
}
.about-feature-icon {
    font-size: 24px;
    color: var(--navy);
    margin-bottom: 8px;
}
.about-feature-icon i {
    color: var(--navy);
}
.about-feature-title {
    font-weight: 700;
    font-size: 22px;
    color: var(--navy);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.about-feature-text {
    font-size: 14px;
    color: var(--navy);
    line-height: 1.65;
}
.about-feature-link {
    color: var(--blue);
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-top: 12px;
}
.about-feature-link:hover {
    text-decoration: underline;
    color: var(--blue);
}
.about-feature-divider {
    border: none;
    border-top: 1px solid #707070;
    margin: 12px 0;
}
.about-card .flex-grow-1 iframe {
    display: block;
    width: 496px !important;
    height: 279px;
} 
.about-bottom {
        border-top: 1px solid #707070;
    }
.subscribe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: #FF0000;
    color: #FFF;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    letter-spacing: 0.3px;
    box-sizing: border-box;
    transition: background-color 0.15s ease;
    padding: 10px 20px;
}
.subscribe-btn i {
    font-size: 20px;
}
.subscribe-btn:hover {
    background-color: #CC0000;
}
.subscribe-btn:active {
    background-color: #A30000;
}
 /* Mobile: fluid */ @media (max-width: 767px) {
    .about-card .flex-grow-1 {
        min-width: 0;
        width: 100%;
    }
    .about-card .flex-grow-1 iframe {
        width: 100% !important;
        height: 279px;
    }
    
} 
 /* ******* 16. A3 FOOTER ******* */
 .a3-footer {
    display: none;
    background-color: var(--navy);
    padding: 44px 0;
    border-top: 2px solid rgba(255, 255, 255, 0.08);
}
.a3-footer-text {
    color: #fff;
    font-size: 18px;
    text-align: left;
}
.a3-footer-text em {
    font-style: italic;
}
.a3-footer-text strong {
    font-weight: 700;
}
.a3-footer-link {
    color: #FFF;
    font-style: italic;
    text-decoration: underline;
}
.a3-footer-logo {
    height: 70px;
}
#podcast-main .a3-footer {
    display: block
} 
 /* ******* Episode video ******* */
 .ep-video-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
 /* 16:9 */
}
.ep-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
} 
 /* ******* Transcript toggle ******* */
 .ep-transcript-toggle {
    display: block;
    width: 100%;
    text-align: center;
    color: #1167af;
    font-weight: 500;
    font-size: 18px;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
}
.ep-transcript-toggle:hover {
    text-decoration: underline;
    color: var(--blue);
}
.ep-transcript-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease, padding 0.4s ease;
    opacity: 0;
    padding: 0;
    font-size: 16px;
    color: #444;
    line-height: 1.8;
    border-top: 1px solid #e0e0e0;
}
.ep-transcript-body.open {
    max-height: 500px;
    overflow-y: scroll;
    opacity: 1;
    padding: 24px 0 8px;
} 
 /* ******* Episode meta bar (date / episode number) ******* */
 .ep-meta-bar {
    background: var(--light-bg); 
 /* Match the featured-card-header bar so meta strips align horizontally */ padding: 18px var(--card-pad-x);
}
.ep-meta-text {
    color: var(--navy);
    font-size: 18px;
    font-weight: 400;
    margin: 0;
} 
 /* ******* Episode detail card ******* */
 .ep-detail-card {
    background: #fff;
    box-shadow: 0 -2px 17.5px rgba(0, 0, 0, 0.16);
    padding: var(--card-pad-y) var(--card-pad-x);
}
.ep-detail-title {
    font-weight: 700;
    font-size: 42px;
    color: #1c0c0c;
    line-height: 1.25;
    margin-bottom: 24px;
}
.ep-detail-body {
    font-size: 18px;
    color: #1c0c0c;
    line-height: 1.75;
}
.ep-transcript-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 24px 0 16px;
}
.ep-transcript-link {
    display: block;
    text-align: center;
    color: #1167af;
    font-weight: 500;
    font-size: 18px;
    padding: 8px 0;
}
.ep-transcript-link:hover {
    text-decoration: underline;
    color: var(--blue);
} 
 /* ******* "This Week in Automated" section ******* */
 
 /* Spacing above this section is handled by .page-section margin-bottom on   the preceding section, so this owns no top padding. */ .this-week-content {
    padding: 0;
}
.this-week-content-title {
    font-weight: 600;
    font-size: 30px;
    color: #fff;
    margin-bottom: 6px;
}
.this-week-content-sub {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 28px;
} 
 /* Editorial / Newsletter mini cards */ .mini-card {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(187, 187, 187, 0.3);
    padding: 24px;
    height: 100%;
}
.mini-card-title {
    font-weight: 600;
    font-size: 25px;
    color: var(--navy);
    margin-bottom: 4px;
}
.mini-card-sub {
    font-size: 14px;
    color: var(--navy);
    margin-bottom: 18px;
}
.mini-card-thumb {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border: 1px solid #707070;
    display: block;
}
.mini-card-thumb-rounded {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 0 6.5px rgba(0, 0, 0, 0.16);
    display: block;
}
.mini-card-article-title {
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 10px;
}
.mini-card-excerpt {
    font-size: 12px;
    color: var(--navy);
    line-height: 1.6;
    margin-bottom: 14px;
}
.mini-card-cta {
    display: block;
    background: var(--blue);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    padding: 10px 16px;
    margin-bottom: 10px;
}
.mini-card-cta:hover {
    background: #0956a0;
    color: #fff;
}
.mini-card-link {
    color: var(--blue);
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
}
.mini-card-link:hover {
    color: #0956a0;
} 
 /* Shorts within this-week section */ .shorts-section-white {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 12px rgba(187, 187, 187, 0.3);
    padding: 24px 28px 28px;
    margin-top: 28px;
}
.shorts-section-title {
    font-weight: 600;
    font-size: 25px;
    color: var(--navy);
    margin-bottom: 4px;
}
.shorts-section-sub {
    font-size: 14px;
    color: var(--navy);
    margin-bottom: 20px;
} 
 /* Sidebar subscribe widget */ .sidebar-subscribe {
    background: #fff;
    box-shadow: 0 0 9.5px rgba(148, 148, 148, 0.2);
    padding: 26px 28px 28px;
}
.sidebar-subscribe-title {
    font-weight: 600;
    font-size: 18px;
    color: #000;
    text-align: center;
    line-height: 1.45;
    margin-bottom: 18px;
}
.sidebar-email-wrap {
    display: flex;
    border: 1px solid rgba(112, 112, 112, 0.18);
}
.sidebar-email-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
    color: #b2b1b1;
    outline: none;
    min-width: 0;
}
.sidebar-email-input::placeholder {
    color: #b2b1b1;
}
.sidebar-subscribe-btn {
    background: var(--blue);
    color: #fff;
    border: none;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Montserrat', sans-serif;
    padding: 12px 18px;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    transition: background .2s;
}
.sidebar-subscribe-btn:hover {
    background: #0956a0;
} 
 /* Automate 2026 ad block */ .ad-automate {
    background: var(--navy);
    padding: 32px 24px 28px;
    text-align: center;
}
.ad-automate-title {
    color: #fff;
    font-weight: 500;
    font-size: 30px;
    margin-bottom: 16px;
    line-height: 1.2;
}
.ad-automate-btn {
    display: inline-block;
    background: #f03436;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    padding: 18px 32px;
    line-height: 1.2;
    width: 100%;
}
.ad-automate-btn:hover {
    background: #d02e30;
    color: #fff;
}
.ad-automate-btn small {
    display: block;
    font-size: 16px;
    font-weight: 700;
} 
 /* Blue recirculation ad block */ .recirculation {
    background: #FFF;
    padding: 28px 24px;
    text-align: center;
}
.recirculation-label {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

 /* Divider line between sections */ .section-rule {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 0;
} 
 /* ******* Featured article hero ******* */

.featured-article {
    position: relative;
    overflow: hidden;
}
.featured-article-img {
    width: 100%;
    height: 580px;
    object-fit: cover;
    display: block;
}
.featured-article-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 45, 73, 0.95) 0%, #0a2d49 28%, rgba(22, 88, 142, 0.38) 100%);
}
.featured-article-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 44px;
}
.featured-article-meta {
    color: #c9c9c9;
    font-size: 14px;
    margin-bottom: 16px;
}
.featured-article-title {
    color: #fff;
    font-weight: 800;
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 14px;
}
.featured-article-sub {
    color: #fff;
    font-size: 20px;
    line-height: 1.65;
    margin-bottom: 18px;
}
.featured-article-link {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
}
.featured-article-link:hover {
    color: var(--blue);
}
@media (max-width: 640px) {
    .featured-article-img {
        height: auto;
        position: relative;
        aspect-ratio: 16 / 9;
        margin-bottom: 0
    }
    .featured-article-overlay {
        display: none;
    }
    .featured-article-content {
        background-color: #FFF;
        padding: 28px 28px 20px;
        position: relative;
    }
    .featured-article-title, .featured-article-sub, .featured-article-meta {
        color: var(--navy);
    }
    .featured-article-link {
        color: var(--blue);
    }
    .featured-article-link:hover {
        color: var(--navy);
    }
    .featured-article {
        border-bottom: 1px solid #e0e0e0;
    }
}
@media (max-width: 460px) {
    .watch-btn {
        display: block;
        padding: 20px;
    }
    .episode-title {
        font-size: 28px;
    }
    .featured-card-header {
        display: block;
    }
}

 /* ── HUBSPOT FORM (new Form Component builder)  */ .subscribe-form [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content {
    padding: 0 !important;
    display: flex
}
.subscribe-form [data-hsfc-id="Renderer"] {
    max-width: 100%;
    font-family: 'Montserrat', sans-serif;
} 
 /* Hide labels and required asterisks — the design shows the input alone */ .subscribe-form [data-hsfc-id="Renderer"] label {
    display: none !important;
}
.subscribe-form [data-hsfc-id="Renderer"] button[type="submit"] {
    margin-top: 0
}
.subscribe-form [data-hsfc-id=Renderer] .hsfc-NavigationRow__Alerts {
    display: none !important
}
.subscribe-form [data-hsfc-id=Renderer] .hsfc-Row {
    margin-bottom: 0;
    width: 60%;
}
.subscribe-form [data-hsfc-id=Renderer] .hsfc-NavigationRow {
    margin-top: 0
}
.subscribe-form [data-hsfc-id=Renderer] .hsfc-TextInput {
    height: 44px;
} 
 /* Submit button */ .subscribe-form [data-hsfc-id="Renderer"] button[type="submit"], .subscribe-form [data-hsfc-id="Renderer"] button:not([type]), .subscribe-form [data-hsfc-id="Renderer"] input[type="submit"] {
    background: var(--blue) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background .2s !important;
    width: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.subscribe-form [data-hsfc-id="Renderer"] button[type="submit"]:hover, .subscribe-form [data-hsfc-id="Renderer"] button:not([type]):hover, .subscribe-form [data-hsfc-id="Renderer"] input[type="submit"]:hover {
    background: #0956a0 !important;
} 
 .subscribe-form [data-hsfc-id="Renderer"] > div > div {
    margin-bottom: 10px;
} 
.subscribe-form [data-hsfc-id="Renderer"] [class*="error"], .subscribe-form [data-hsfc-id="Renderer"] [class*="Error"] {
    color: #ffb4b4 !important;
    font-size: 12px !important;
}
.newsletter-bar-inner .subscribe-form [data-hsfc-id="Renderer"] [class*="error"], .newsletter-bar-inner .subscribe-form [data-hsfc-id="Renderer"] [class*="Error"] {
    color: #FF0004 !important;
}  
.subscribe-form [data-hsfc-id="Renderer"] [class*="success"], .subscribe-form [data-hsfc-id="Renderer"] [class*="submitted"], .subscribe-form [data-hsfc-id="Renderer"] [class*="thankyou"] {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}
@media (max-width: 460px) {
    .subscribe-form [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content {
        display: block;
    }
    .subscribe-form, .subscribe-form [data-hsfc-id=Renderer] .hsfc-Row {
        width: 100%;
		
    }
	.subscribe-form [data-hsfc-id="Renderer"] button[type="submit"], .subscribe-form [data-hsfc-id="Renderer"] button:not([type]), .subscribe-form [data-hsfc-id="Renderer"] input[type="submit"] {
		margin-top: 15px !important;
		display: block;
		width: 100% !important;
	}
}  
 /* ******* 3b. MOBILE NAVIGATION ******* */
 .nav-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
}
.nav-hamburger .fa-xmark {
    display: none;
}
.nav-hamburger.is-open .fa-bars {
    display: none;
}
.nav-hamburger.is-open .fa-xmark {
    display: block;
} 
 /* Mobile drawer */ .mobile-nav-drawer {
    display: flex;
    flex-direction: column;
    background: var(--deep-navy);
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, padding .3s ease;
    padding: 0 1.5rem;
}
.mobile-nav-drawer.is-open {
    max-height: 320px;
    padding: 12px 1.5rem 20px;
}
.mobile-nav-drawer a {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color .2s;
}
.mobile-nav-drawer a:last-of-type {
    border-bottom: none;
}
.mobile-nav-drawer a:hover, .mobile-nav-drawer a.nav-active {
    color: var(--blue);
}
.mobile-nav-social {
    display: flex;
    gap: 18px;
    padding-top: 14px;
}
.mobile-nav-social a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 24px;
    padding: 0;
    border-bottom: none !important;
    transition: color .2s;
}
.mobile-nav-social a:hover {
    color: #fff;
}