/* =========================================================
   ai.STARTUPJURY — COMMON BLOG POST STYLESHEET
   ---------------------------------------------------------
   Reusable stylesheet for ALL individual blog post pages.

   Design system:
   - Same header/navigation as blog.php
   - Same 1180px max-width system
   - Same colors and typography
   - Same article reading width
   - Same CTA and footer
   - Responsive at 900px / 600px / 380px

   REQUIRED PAGE WRAPPER:
       <div class="blog-detail-page">
           ... blog post ...
       </div>

   Keep each blog post's CONTENT/HTML in its own file.
   This file controls the shared blog-post DESIGN only.
   ========================================================= */

/* =========================================================
   FONTS
   ========================================================= */

@import url(
    'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap'
);


/* =========================================================
   ARTICLE VARIABLES
   ---------------------------------------------------------
   Values intentionally follow blog.php
   ========================================================= */

.blog-detail-page {

    --sj-amber: #E8A020;
    --sj-amber-soft: #F0B24A;

    --sj-ink: #1A1A2E;

    --sj-green-dark: #3b4a3f;
    --sj-green-deep: #3b4a3f;

    --sj-paper: #F5F7F2;

    --sj-card: #FFFFFF;
    --sj-line: #D8DDD2;

    --sj-muted: #888888;

    --sj-line-dark: rgba(255,255,255,.14);

    --sj-maxw: 1180px;

    --article-copy: #40505a;
    --article-heading: #1b3044;

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 0;

    background: var(--sj-paper);
    color: var(--sj-ink);

    font-family:
        'DM Sans',
        system-ui,
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overflow-x: hidden;
}


/* =========================================================
   RESET
   ========================================================= */

.blog-detail-page *,
.blog-detail-page *::before,
.blog-detail-page *::after {
    box-sizing: border-box;
}


.blog-detail-page h1,
.blog-detail-page h2,
.blog-detail-page h3,
.blog-detail-page h4,
.blog-detail-page p,
.blog-detail-page ul,
.blog-detail-page ol {
    margin-top: 0;
}


.blog-detail-page img {
    display: block;

    max-width: 100%;
    height: auto;
}


.blog-detail-page a {
    color: inherit;

    text-decoration: none;
}


.blog-detail-page button,
.blog-detail-page input,
.blog-detail-page textarea,
.blog-detail-page select {
    font-family:
        'DM Sans',
        system-ui,
        sans-serif;
}


html,
body {
    overflow-x: hidden;
}


/* =========================================================
   =========================================================
   HEADER
   SAME DESIGN AS blog.php
   =========================================================
   ========================================================= */

.blog-detail-page .site-header {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    width: 100%;

    border: 1px solid rgba(255,255,255,.31);

    background: transparent;
}


/* ---------------------------------------------------------
   Header inner
   --------------------------------------------------------- */

.blog-detail-page .site-header .nav-inner {

    display: flex;

    align-items: center;
    justify-content: space-between;

    max-width: var(--sj-maxw);

    margin: 0 auto;

    padding: 22px 26px;

    gap: 30px;
}


/* ---------------------------------------------------------
   Brand
   --------------------------------------------------------- */

.blog-detail-page .site-header .brand {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;

    flex-shrink: 0;
}


/* ---------------------------------------------------------
   Logo
   EXACT SAME SIZE AS blog.php
   --------------------------------------------------------- */

.blog-detail-page .site-header .site-logo {

    display: block;

    width: 260px;

    max-width: min(260px, 42vw);

    height: auto;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Navigation
   --------------------------------------------------------- */

.blog-detail-page .site-header .nav-links {

    display: flex;

    align-items: center;

    gap: 30px;
}


/* ---------------------------------------------------------
   Navigation links
   --------------------------------------------------------- */

.blog-detail-page .site-header .nav-links > a {

    color: rgba(255,255,255,.82);

    font-size: 14.5px;

    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.blog-detail-page .site-header .nav-links > a:hover {
    color: #fff;
}


.blog-detail-page .site-header .nav-links > a.active {
    color: #fff;
}


/* ---------------------------------------------------------
   Active underline
   --------------------------------------------------------- */

.blog-detail-page
.site-header
.nav-links
> a:not(.nav-cta).active {

    position: relative;
}


.blog-detail-page
.site-header
.nav-links
> a:not(.nav-cta).active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    bottom: -6px;

    height: 2px;

    background: var(--sj-amber);

    border-radius: 2px;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.blog-detail-page .site-header .nav-cta {

    background: rgba(255,255,255,.09);

    border: 1px solid var(--sj-line-dark);

    padding: 9px 18px;

    border-radius: 7px;

    color: var(--sj-ink);

    text-decoration: none;
}


.blog-detail-page .site-header .nav-cta.primary {

    background: var(--sj-amber);

    color: var(--sj-ink);

    border-color: var(--sj-amber);

    font-weight: 600;
}


.blog-detail-page .site-header .nav-cta.primary:hover {

    background: var(--sj-amber-soft);

    border-color: var(--sj-amber-soft);
}


/* ---------------------------------------------------------
   Generic button
   --------------------------------------------------------- */

.blog-detail-page .site-header .btn {

    display: inline-flex;

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

    gap: 8px;

    font-weight: 600;

    font-size: 15px;

    padding: 13px 24px;

    border-radius: 8px;

    cursor: pointer;

    border: 1.5px solid transparent;

    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease;

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Ghost button
   --------------------------------------------------------- */

.blog-detail-page .site-header .btn-ghost {

    border-color: var(--sj-line-dark);

    color: #fff;

    background: transparent;
}


.blog-detail-page .site-header .btn-ghost:hover {

    border-color: #fff;

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   Mobile toggle
   --------------------------------------------------------- */

.blog-detail-page .site-header .nav-toggle {

    display: none;

    background: rgba(255,255,255,.09);

    border: 1px solid var(--sj-line-dark);

    border-radius: 8px;

    width: 44px;
    height: 40px;

    cursor: pointer;

    padding: 0;

    flex-direction: column;

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

    gap: 4px;
}


.blog-detail-page .site-header .nav-toggle span {

    display: block;

    width: 19px;
    height: 2px;

    background: #fff;

    border-radius: 2px;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


.blog-detail-page
.site-header
.nav-toggle.open
span:nth-child(1) {

    transform:
        translateY(6px)
        rotate(45deg);
}


.blog-detail-page
.site-header
.nav-toggle.open
span:nth-child(2) {

    opacity: 0;
}


.blog-detail-page
.site-header
.nav-toggle.open
span:nth-child(3) {

    transform:
        translateY(-6px)
        rotate(-45deg);
}


/* =========================================================
   =========================================================
   ARTICLE HERO
   =========================================================
   ========================================================= */

.blog-detail-page .article-hero {

    position: relative;

    width: 100%;

    /*
       Keep this article hero visually consistent
       with the inner-page header system.

       The original blog.php inner-page header uses:
       padding: 150px 0 76px

       Article hero uses equivalent visual spacing,
       while allowing title/meta content.
    */

    min-height: 409px;

    display: block;

    overflow: hidden;

    padding: 0;

    background:

        radial-gradient(
            circle at 92% 91%,
            rgba(113,126,91,.15) 0 13%,
            transparent 13.2%
        ),

        radial-gradient(
            circle at 92% 91%,
            rgba(113,126,91,.10) 0 23%,
            transparent 23.2%
        ),

        linear-gradient(
            135deg,
            #34483d 0%,
            #35493d 58%,
            #35483c 100%
        );

    color: #fff;
}


/* ---------------------------------------------------------
   Decorative rings
   --------------------------------------------------------- */

.blog-detail-page .article-hero::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -145px;
    bottom: -345px;

    border-radius: 50%;

    border:
        1px solid
        rgba(150,160,134,.10);

    box-shadow:

        0 0 0 80px
        rgba(150,160,134,.045),

        0 0 0 160px
        rgba(150,160,134,.035);

    pointer-events: none;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.blog-detail-page .article-hero-inner {

    position: relative;

    z-index: 2;

    width:
        min(
            1060px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    padding-top: 111px;

    padding-bottom: 58px;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.blog-detail-page .article-category {

    display: block;

    color: var(--sj-amber);

    text-transform: uppercase;

    letter-spacing: .16em;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    margin: 0 0 20px;
}


.blog-detail-page .article-category::before {

    content: "";

    display: inline-block;

    width: 24px;
    height: 1px;

    background: var(--sj-amber);

    vertical-align: middle;

    margin-right: 10px;
}


/* =========================================================
   ARTICLE TITLE
   ========================================================= */

.blog-detail-page .article-title {

    max-width: 850px;

    margin: 0;

    color: #fff;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:
        clamp(
            48px,
            6.1vw,
            78px
        );

    font-weight: 600;

    line-height: .94;

    letter-spacing: -.025em;
}


/* =========================================================
   ARTICLE DESCRIPTION
   ========================================================= */

.blog-detail-page .article-deck {

    max-width: 700px;

    margin: 20px 0 17px;

    color: rgba(255,255,255,.82);

    font-size: 16px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   ARTICLE META
   ========================================================= */

.blog-detail-page .article-meta {

    color: rgba(255,255,255,.66);

    font-size: 11px;

    line-height: 1.5;
}


.blog-detail-page
.article-meta
span:not(:last-child)::after {

    content: "•";

    color: var(--sj-amber);

    margin: 0 9px;
}


/* =========================================================
   =========================================================
   ARTICLE MAIN
   =========================================================
   ========================================================= */

.blog-detail-page .article-main {

    width: 100%;

    padding: 64px 24px 88px;

    background: var(--sj-paper);
}


/* ---------------------------------------------------------
   Reading column
   --------------------------------------------------------- */

.blog-detail-page .article-column {

    width:
        min(
            760px,
            100%
        );

    margin: 0 auto;
}


/* =========================================================
   ARTICLE NAVIGATION
   ========================================================= */

.blog-detail-page .article-nav {

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 0 0 24px;

    color: #3b4a3f;

    font-size: 14.5px;

    line-height: 1.5;

    font-weight: 600;
}


.blog-detail-page .article-nav a {

    color: #53625a;

    text-decoration: none;
}


.blog-detail-page .article-nav a:hover {

    color: var(--sj-amber);
}


/* =========================================================
   POST NUMBER
   ========================================================= */

.blog-detail-page .article-post-pill {

    display: inline-flex;

    align-items: center;

    border:
        1px solid
        #d2dad3;

    background: #eef1ed;

    border-radius: 20px;

    padding: 4px 9px;

    color: #526058;

    font-size: 8px;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================================
   LEAD
   ========================================================= */

.blog-detail-page .article-lead {

    color: #31413a;

    font-size: 16.5px;

    line-height: 1.75;

    margin: 0 0 30px;
}


/* =========================================================
   BODY PARAGRAPHS
   ========================================================= */

.blog-detail-page .article-column p {

    color: #3b3b36;

    font-size: 16.5px;

    line-height: 1.75;

    margin: 0 0 18px;
}


/* =========================================================
   ARTICLE SECTION HEADING
   ========================================================= */

.blog-detail-page .article-section {

    font-family:
        'Playfair Display',
        Georgia,
        serif;

    color: #1A1A2E;

    font-size: 26px;

    line-height: 1.08;

    letter-spacing: -.01em;

    margin: 36px 0 12px;

    font-weight: 600;
}


/* =========================================================
   CALLOUT
   ========================================================= */

.blog-detail-page .article-callout {

    position: relative;

    margin: 34px 0 38px;

    padding: 27px 27px 25px;

    background: #fff;

    border:
        1px solid
        #d9dfd8;

    border-top:
        3px solid
        var(--sj-amber);

    border-radius: 9px;

    box-shadow:
        0 12px 28px
        rgba(35,52,44,.07);
}


.blog-detail-page .article-callout-label {

    display: block;

    margin-bottom: 11px;

    color: var(--sj-amber);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.blog-detail-page .article-callout p {

    color: #3b3b36;

    font-size: 16px;

    line-height: 1.65;

    margin: 0;
}


/* =========================================================
   QUOTE
   ========================================================= */

.blog-detail-page .article-quote {

    margin: 36px 0 38px;

    padding: 28px 27px;

    background: #3b4e42;

    border-left:
        3px solid
        var(--sj-amber);

    border-radius:
        0 9px 9px 0;

    box-shadow:
        0 12px 28px
        rgba(35,52,44,.09);
}


.blog-detail-page .article-quote p {

    color: #fff;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-style: italic;

    font-size: 26px;

    line-height: 1.2;

    margin: 0 0 10px;
}


.blog-detail-page .article-quote small {

    color:
        rgba(255,255,255,.66);

    font-size: 9px;
}


/* =========================================================
   =========================================================
   ARTICLE CTA
   =========================================================
   ========================================================= */

.blog-detail-page .article-cta {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            120deg,
            #34483d,
            #394b40 70%,
            #4c513c
        );

    color: #fff;

    padding: 66px 24px;
}


/* ---------------------------------------------------------
   CTA decorative background
   --------------------------------------------------------- */

.blog-detail-page .article-cta::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -190px;
    top: -310px;

    border-radius: 50%;

    border:
        1px solid
        rgba(150,160,134,.08);

    box-shadow:

        0 0 0 80px
        rgba(150,160,134,.025),

        0 0 0 160px
        rgba(150,160,134,.02);

    pointer-events: none;
}


/* ---------------------------------------------------------
   CTA inner
   --------------------------------------------------------- */

.blog-detail-page .article-cta-inner {

    position: relative;

    z-index: 2;

    width:
        min(
            1060px,
            100%
        );

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;
}


/* ---------------------------------------------------------
   CTA kicker
   --------------------------------------------------------- */

.blog-detail-page .article-cta-kicker {

    color: var(--sj-amber);

    text-transform: uppercase;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    margin-bottom: 10px;
}


/* ---------------------------------------------------------
   CTA title
   --------------------------------------------------------- */

.blog-detail-page .article-cta h2 {

    max-width: 580px;

    margin: 0;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size:
        clamp(
            32px,
            4vw,
            46px
        );

    line-height: .98;

    font-weight: 600;
}


/* ---------------------------------------------------------
   CTA button
   --------------------------------------------------------- */

.blog-detail-page .article-cta-button {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 43px;

    padding: 0 18px;

    border-radius: 6px;

    background: var(--sj-amber);

    color: #192a22;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    border: 1px solid var(--sj-amber);

    transition:
        transform .18s ease,
        background .18s ease;
}


.blog-detail-page .article-cta-button:hover {

    background: var(--sj-amber-soft);

    border-color: var(--sj-amber-soft);

    transform: translateY(-1px);
}


/* =========================================================
   =========================================================
   FOOTER
   SAME DESIGN CONSTRAINTS AS blog.php
   =========================================================
   ========================================================= */

.blog-detail-page .corporate-footer {

    width: 100%;

    background: #35483d;

    color: #f5f4ed;

    border-top:
        1px solid
        rgba(255,255,255,.12);

    box-sizing: border-box;
}


/* ---------------------------------------------------------
   Footer main
   --------------------------------------------------------- */

.blog-detail-page .footer-main {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    padding: 70px 0 58px;

    display: grid;

    grid-template-columns:
        minmax(280px, 1.8fr)
        1fr
        1fr;

    gap: 70px;
}


/* ---------------------------------------------------------
   Footer brand
   --------------------------------------------------------- */

.blog-detail-page .footer-brand {

    max-width: 390px;
}


/* ---------------------------------------------------------
   Footer logo
   --------------------------------------------------------- */

.blog-detail-page .footer-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;
}


.blog-detail-page .footer-logo img {

    display: block;

    width: 180px;

    max-width: 100%;

    height: auto;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Footer brand text
   --------------------------------------------------------- */

.blog-detail-page .footer-brand p {

    margin: 25px 0 12px;

    font-size:
        clamp(
            22px,
            2vw,
            30px
        );

    line-height: 1.2;

    font-weight: 500;

    letter-spacing: -.02em;
}


/* ---------------------------------------------------------
   Footer tagline
   --------------------------------------------------------- */

.blog-detail-page .footer-tagline {

    display: block;

    max-width: 320px;

    color:
        rgba(245,244,237,.62);

    font-size: 14px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   Footer columns
   --------------------------------------------------------- */

.blog-detail-page .footer-navigation {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.blog-detail-page .footer-contact {

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* ---------------------------------------------------------
   Footer headings
   --------------------------------------------------------- */

.blog-detail-page .footer-navigation h4,
.blog-detail-page .footer-contact h4 {

    margin: 5px 0 22px;

    color: #f5f4ed;

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .12em;
}


/* ---------------------------------------------------------
   Footer navigation links
   --------------------------------------------------------- */

.blog-detail-page .footer-navigation a {

    display: inline-block;

    width: fit-content;

    margin-bottom: 14px;

    color:
        rgba(245,244,237,.72);

    font-size: 15px;

    line-height: 1.5;

    text-decoration: none;

    transition:
        color .25s ease,
        transform .25s ease;
}


.blog-detail-page .footer-navigation a:hover {

    color: #f5f4ed;

    transform:
        translateX(4px);
}


/* ---------------------------------------------------------
   Footer contact
   --------------------------------------------------------- */

.blog-detail-page .footer-contact-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-top: 10px;

    padding: 8px 16px;

    color: #f5f4ed;

    border:
        1px solid
        rgba(245,244,237,.2);

    border-radius: 8px;

    font-size: 14px;

    font-weight: 500;

    text-decoration: none;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.blog-detail-page .footer-contact-link span {

    font-size: 17px;

    transition:
        transform .25s ease;
}


.blog-detail-page .footer-contact-link:hover {

    background:
        rgba(255,255,255,.07);

    border-color:
        rgba(245,244,237,.4);

    transform:
        translateY(-2px);
}


.blog-detail-page .footer-contact-link:hover span {

    transform:
        translateX(3px);
}


/* ---------------------------------------------------------
   Footer divider
   --------------------------------------------------------- */

.blog-detail-page .footer-divider {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    height: 1px;

    margin: 0 auto;

    background:
        rgba(255,255,255,.12);
}


/* ---------------------------------------------------------
   Footer bottom
   --------------------------------------------------------- */

.blog-detail-page .footer-bottom {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin: 0 auto;

    min-height: 76px;

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 25px;

    font-size: 12px;
}


/* ---------------------------------------------------------
   Copyright
   --------------------------------------------------------- */

.blog-detail-page .footer-copyright {

    color:
        rgba(245,244,237,.55);

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;
}


/* ---------------------------------------------------------
   Legal
   --------------------------------------------------------- */

.blog-detail-page .footer-legal {

    display: flex;

    align-items: center;

    gap: 22px;
}


.blog-detail-page .footer-legal a {

    color:
        rgba(245,244,237,.55);

    text-decoration: none;

    transition:
        color .25s ease;
}


.blog-detail-page .footer-legal a:hover {

    color: #f5f4ed;
}


/* ---------------------------------------------------------
   Digital Catalyst logo
   --------------------------------------------------------- */

.blog-detail-page .dc-footer-logo {

    width: 30px;

    height: auto;

    max-height: 24px;

    object-fit: contain;

    vertical-align: middle;

    margin-left: 5px;
}


/* =========================================================
   =========================================================
   TABLET
   SAME 900px BREAKPOINT AS blog.php
   =========================================================
   ========================================================= */

@media (max-width: 900px) {


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .blog-detail-page .site-header .nav-toggle {

        display: flex;
    }


    .blog-detail-page .site-header .nav-links {

        position: absolute;

        top: 72px;

        right: 20px;
        left: 20px;

        flex-direction: column;

        align-items: stretch;

        gap: 2px;

        background:
            var(--sj-green-dark);

        border:
            1px solid
            var(--sj-line-dark);

        border-radius: 12px;

        padding: 9px;

        box-shadow:
            0 26px 54px -20px
            rgba(0,0,0,.6);

        display: none;
    }


    .blog-detail-page
    .site-header
    .nav-links.open {

        display: flex;
    }


    .blog-detail-page
    .site-header
    .nav-links
    > a:not(.nav-cta) {

        display: block;

        width: 100%;

        padding: 13px 14px;

        border-radius: 8px;

        font-size: 15.5px;

        box-sizing: border-box;
    }


    .blog-detail-page
    .site-header
    .nav-links
    > a:not(.nav-cta):hover {

        background:
            rgba(255,255,255,.06);
    }


    .blog-detail-page
    .site-header
    .nav-links
    > a:not(.nav-cta).active::after {

        display: none;
    }


    .blog-detail-page
    .site-header
    .nav-links
    > a:not(.nav-cta).active {

        background:
            rgba(255,255,255,.07);

        color: #fff;
    }


    .blog-detail-page
    .site-header
    .nav-links
    .nav-cta {

        margin-top: 6px;

        text-align: center;

        justify-content: center;

        width: 100%;
    }


    .blog-detail-page
    .site-header
    .nav-links
    .btn-ghost {

        width: 100%;

        min-height: 48px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        box-sizing: border-box;

        margin-top: 6px;
    }


    /* -----------------------------------------------------
       HEADER LOGO
       ----------------------------------------------------- */

    .blog-detail-page .site-header .site-logo {

        width: 260px;

        max-width: 55vw;
    }


    /* -----------------------------------------------------
       ARTICLE HERO
       ----------------------------------------------------- */

    .blog-detail-page .article-hero {

        min-height: 540px;
    }


    .blog-detail-page .article-hero-inner {

        width:
            min(
                calc(100% - 36px),
                720px
            );

        padding-top: 125px;

        padding-bottom: 52px;
    }


    .blog-detail-page .article-title {

        max-width: 100%;

        font-size:
            clamp(
                43px,
                9vw,
                62px
            );

        line-height: .95;
    }


    .blog-detail-page .article-deck {

        font-size: 15px;
    }


    /* -----------------------------------------------------
       ARTICLE
       ----------------------------------------------------- */

    .blog-detail-page .article-main {

        padding:
            48px
            18px
            70px;
    }


    .blog-detail-page .article-column {

        width: min(
            720px,
            100%
        );
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .blog-detail-page .article-cta-inner {

        align-items: flex-start;

        flex-direction: column;

        gap: 28px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .blog-detail-page .footer-main {

        grid-template-columns:
            1.5fr
            1fr;

        gap: 45px;

        padding:
            55px
            0
            45px;
    }


    .blog-detail-page .footer-contact {

        grid-column: 2;
    }


    .blog-detail-page .footer-bottom {

        grid-template-columns:
            1fr
            1fr;

        padding:
            18px
            0;
    }


    .blog-detail-page .footer-legal {

        justify-content: flex-end;
    }
}


/* =========================================================
   =========================================================
   MOBILE
   SAME 600px BREAKPOINT AS blog.php
   =========================================================
   ========================================================= */

@media (max-width: 600px) {


    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .blog-detail-page
    .site-header
    .nav-inner {

        padding:
            18px
            16px;
    }


    .blog-detail-page
    .site-header
    .site-logo {

        width: 190px;

        max-width: 62vw;
    }


    .blog-detail-page
    .site-header
    .nav-links {

        top: 66px;

        right: 12px;
        left: 12px;
    }


    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .blog-detail-page .article-hero {

        min-height: 560px;
    }


    .blog-detail-page .article-hero-inner {

        width:
            calc(100% - 30px);

        padding-top: 100px;

        padding-bottom: 40px;
    }


    .blog-detail-page .article-category {

        margin-bottom: 15px;

        font-size: 9px;
    }


    .blog-detail-page .article-category::before {

        width: 18px;

        margin-right: 8px;
    }


    .blog-detail-page .article-title {

        max-width: 100%;

        font-size: 45px;

        line-height: .96;
    }


    .blog-detail-page .article-deck {

        max-width: 100%;

        margin:
            16px
            0
            14px;

        font-size: 14px;
    }


    .blog-detail-page .article-meta {

        font-size: 9px;
    }


    /* -----------------------------------------------------
       ARTICLE
       ----------------------------------------------------- */

    .blog-detail-page .article-main {

        padding:
            38px
            15px
            58px;
    }


    .blog-detail-page .article-column {

        width: 100%;
    }


    .blog-detail-page .article-nav {

        margin-bottom: 23px;

        font-size: 9px;
    }


    .blog-detail-page .article-post-pill {

        padding:
            4px
            9px;

        font-size: 8px;
    }


    .blog-detail-page .article-lead {

        font-size: 15px;

        line-height: 1.75;

        margin-bottom: 27px;
    }


    .blog-detail-page .article-column p {

        font-size: 13.5px;

        line-height: 1.78;

        margin-bottom: 22px;
    }


    .blog-detail-page .article-section {

        font-size: 29px;

        line-height: 1.08;

        margin-top: 38px;

        margin-bottom: 11px;
    }


    /* -----------------------------------------------------
       CALLOUT
       ----------------------------------------------------- */

    .blog-detail-page .article-callout {

        padding:
            22px
            20px;
    }


    .blog-detail-page
    .article-callout p {

        font-size: 13px;

        line-height: 1.7;
    }


    /* -----------------------------------------------------
       QUOTE
       ----------------------------------------------------- */

    .blog-detail-page .article-quote {

        padding:
            23px
            20px;
    }


    .blog-detail-page
    .article-quote p {

        font-size: 22px;

        line-height: 1.2;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .blog-detail-page .article-cta {

        padding:
            52px
            20px;
    }


    .blog-detail-page
    .article-cta h2 {

        font-size: 34px;
    }


    .blog-detail-page
    .article-cta-button {

        min-height: 40px;

        padding:
            0
            16px;

        font-size: 10px;
    }


    /* -----------------------------------------------------
       FOOTER
       ----------------------------------------------------- */

    .blog-detail-page .footer-main {

        width:
            calc(100% - 32px);

        display: flex;

        flex-direction: column;

        gap: 38px;

        padding:
            45px
            0
            38px;
    }


    .blog-detail-page .footer-brand {

        max-width: 100%;
    }


    .blog-detail-page
    .footer-logo img {

        width: 155px;
    }


    .blog-detail-page
    .footer-brand p {

        margin-top: 20px;

        font-size: 24px;
    }


    .blog-detail-page
    .footer-navigation,
    .blog-detail-page
    .footer-contact {

        grid-column: auto;

        width: 100%;
    }


    .blog-detail-page
    .footer-navigation h4,
    .blog-detail-page
    .footer-contact h4 {

        margin-bottom: 17px;
    }


    .blog-detail-page
    .footer-navigation a {

        margin-bottom: 12px;
    }


    .blog-detail-page .footer-divider {

        width:
            calc(100% - 32px);
    }


    .blog-detail-page .footer-bottom {

        width:
            calc(100% - 32px);

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 16px;

        padding:
            25px
            0
            30px;
    }


    .blog-detail-page .footer-copyright {

        line-height: 1.7;
    }


    .blog-detail-page .footer-legal {

        width: 100%;

        display: flex;

        justify-content: flex-start;

        gap: 18px;

        flex-wrap: wrap;
    }
}


/* =========================================================
   =========================================================
   VERY SMALL MOBILE
   SAME 380px BREAKPOINT AS blog.php
   =========================================================
   ========================================================= */

@media (max-width: 380px) {


    .blog-detail-page
    .site-header
    .site-logo {

        width: 160px;
    }


    .blog-detail-page
    .site-header
    .nav-links {

        right: 8px;

        left: 8px;
    }


    /* Hero */

    .blog-detail-page .article-hero {

        min-height: 520px;
    }


    .blog-detail-page .article-hero-inner {

        width:
            calc(100% - 24px);

        padding-top: 90px;
    }


    .blog-detail-page .article-title {

        font-size: 39px;
    }


    .blog-detail-page .article-deck {

        font-size: 13px;
    }


    /* Footer */

    .blog-detail-page .footer-main {

        width:
            calc(100% - 24px);

        padding-top: 35px;
    }


    .blog-detail-page .footer-divider {

        width:
            calc(100% - 24px);
    }


    .blog-detail-page .footer-bottom {

        width:
            calc(100% - 24px);
    }


    .blog-detail-page
    .footer-logo img {

        width: 140px;
    }


    .blog-detail-page
    .footer-brand p {

        font-size: 22px;
    }


    .blog-detail-page
    .footer-tagline {

        font-size: 13px;
    }


    .blog-detail-page
    .footer-legal {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }
}


/* =========================================================
   FINAL ARTICLE TYPOGRAPHY OVERRIDE
   Match blog.php reading typography on desktop
   ========================================================= */

@media (min-width: 901px) {

    .blog-detail-page .article-column {
        width: min(760px, 100%);
        max-width: 760px;
    }

    .blog-detail-page .article-nav {
        font-size: 14.5px;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .blog-detail-page .article-lead {
        font-size: 16.5px;
        line-height: 1.75;
        margin-bottom: 30px;
    }

    .blog-detail-page .article-column p {
        font-size: 16.5px;
        line-height: 1.75;
        margin-bottom: 18px;
    }

    .blog-detail-page .article-section {
        font-size: 26px;
        line-height: 1.08;
        margin-top: 36px;
        margin-bottom: 12px;
    }

    .blog-detail-page .article-callout p {
        font-size: 16px;
        line-height: 1.65;
    }

    .blog-detail-page .article-quote p {
        font-size: 26px;
        line-height: 1.2;
    }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .blog-detail-page *,
    .blog-detail-page *::before,
    .blog-detail-page *::after {

        animation: none !important;

        transition: none !important;
    }
}


/* =========================================================
   GLOBAL SAFETY
   ========================================================= */

.blog-detail-page iframe,
.blog-detail-page video,
.blog-detail-page svg {

    max-width: 100%;
}


.blog-detail-page table {

    max-width: 100%;

    overflow-x: auto;
}


.blog-detail-page ::selection {

    background:
        rgba(232,160,32,.25);

    color: inherit;
}