/* =========================================
   57. BLUEPRINT / NEWSPAPER SECTION
========================================= */
.blueprint-section {
    padding: 140px 0;
    background-color: var(--bg-light);
    /* Brand Wave Pattern Background */
    background-image: url("../image/Group 208.svg"); /* fixed path + name */
    background-size: cover;
     background-position: center;
    width: 100%;
    overflow: hidden;
}

.blueprint-content-wrapper {
    position: relative;
    z-index: 10;
    /* Keeps the text block from stretching too wide on 4K screens */
    max-width: 1100px;
    margin: 0 auto;
}

.blueprint-main-title {
    font-family: Unbounded;
    font-weight: 900;
    font-size: clamp(2.5rem, 4.8vw, 4.4rem);
    line-height: 1.3;
    letter-spacing: -2px;
    color: var(--text-dark);
    margin: 0;
    position: relative;
    z-index: 2;
}

/* Ensure the orange text pops */
.blueprint-main-title .text-orange {
    color: var(--brand-orange);
}

/* --- THE FLOATING SLIT IMAGE --- */
.blueprint-floating-img {
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 62%;
    height: 90px;
    border-radius: 6px;
    overflow: hidden;
    z-index: -1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    margin-right: 2px;
    /* margin-top: 40px; */
    margin-bottom: -21px;
}

.blueprint-floating-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Align image to focus on the text/center of the photo */
    object-position: center; 
    /* Slightly fade it so the orange text on top remains highly readable */
    opacity: 0.85; 
    mix-blend-mode: multiply;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 1200px) {
    .blueprint-floating-img {
        width: 60%;
        height: 75px;
        bottom: 10px;
    }
}

@media (max-width: 991px) {
    .blueprint-section { padding: 100px 0; }
    /* Hide the floating image on tablet to prevent text readability issues */
    .blueprint-floating-img { display: none !important; }
}

@media (max-width: 767px) {
    .blueprint-main-title { 
        font-size: 2.2rem; 
        letter-spacing: -1px; 
        line-height: 1.2;
    }
}


/* =========================================
   58. EDITORIAL ARTICLE SECTION
========================================= */
.editorial-section {
    padding: 100px 0;
    background-color: #FFFFFF;
    width: 100%;
}

.article-paragraph {
    font-family: Poppins;
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8; 
    margin-bottom: 25px;
}

.article-subheading {
    font-family: Unbounded;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--text-dark);
    letter-spacing: -0.5px;
}

/* Custom List Styling */
.article-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}

.article-list li {
    font-family: Poppins;
    font-size: 1.2rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.article-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.article-list li strong {
    font-weight: 700;
    color: var(--text-dark);
}

/* Sidebar Styling */
.article-sidebar {
    padding-left: 20px; 
}

.sidebar-card {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.sidebar-img-box {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f0f0f0;
}

.sidebar-img-box img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
    transition: transform 0.4s ease;
}

.sidebar-card:hover .sidebar-img-box img {
    transform: scale(1.05);
}

.sidebar-title {
    font-family: Unbounded;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0;
}

/* Bottom Banner Image */
.article-banner-wrapper {
    width: 100%;
    height: 350px; 
    border-radius: 12px;
    overflow: hidden;
}

.article-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block; 
}

/* --- RESPONSIVENESS --- */
@media (max-width: 1399px) {
    .article-paragraph {
        font-size: 1.1rem;
    }
   
}
@media (max-width: 991px) {
    .article-sidebar { padding-left: 0; }
    .sidebar-img-box { height: 200px; }
}

@media (max-width: 767px) {
    .editorial-section { padding: 60px 0; }
    .article-subheading { font-size: 1.25rem; }
    .article-banner-wrapper { height: 250px; }
    .sidebar-img-box { height: 180px; }
}

/* =========================================
   59. LONG FORM EDITORIAL SECTION
========================================= */
.longform-editorial-section {
    padding: 100px 0;
    background-color: #FFFFFF;
    width: 100%;
}

/* The wrapper that forces optimal reading width */
.editorial-reading-wrapper {
    max-width: 1620px;
    margin: 0 auto; /* Centers the text block on the page */
}

.editorial-main-title {
    font-family: Unbounded;
    font-weight: 800;
    font-size: clamp(1.6rem, 2.5vw, 1.8rem);
    color: var(--text-dark);
    letter-spacing: -0.5px;
    line-height: 1.3;
}

.editorial-subheading {
    font-family: Unbounded;
    font-weight: 800;
    font-size: clamp(1.2rem, 2vw, 1.4rem);
    color: var(--text-dark);
    letter-spacing: -0.5px;
    margin-bottom: 15px;
}

.editorial-paragraph {
    font-family: Poppins;
    font-size: 1.2rem;
    color: #444;
    line-height: 1.8; /* Generous breathing room */
    margin-bottom: 20px;
}

/* Numbered Block Vertical Rhythm */
.editorial-numbered-block {
    margin-top: 60px; /* Large gap before new section starts */
}

/* Custom List Styling */
.editorial-list {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
    margin-top: 20px;
}

.editorial-list li {
    font-family: Poppins;
    font-size: 1.2rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 15px;
    position: relative;
    padding-left: 15px; /* Space for custom bullet */
}

.editorial-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    color: var(--text-dark);
}

.editorial-list li strong {
    font-weight: 700;
    color: var(--text-dark);
}

/* --- RESPONSIVENESS --- */
@media (max-width: 1399px) {
  
    .editorial-paragraph {
        font-size: 1.1rem;
    }
    .editorial-list li {
        font-size: 1.1rem;
    }
}
@media (max-width: 767px) {
    .longform-editorial-section { padding: 60px 0; }
    .editorial-numbered-block { margin-top: 40px; }
}

/* =========================================
   60. ROADMAP EDITORIAL SECTION (STRETCHED IMAGE)
========================================= */
.roadmap-editorial-section {
    padding: 0 0 120px 0; /* No top padding to flow directly from the section above */
    background-color: #FFFFFF;
    width: 100%;
}

/* Phase Blocks */
.roadmap-phase-block {
    margin-bottom: 40px;
}

.roadmap-phase-block:last-child {
    margin-bottom: 0;
}

/* Make the phase titles look like the screenshot (Medium weight) */
.roadmap-phase-block > .editorial-paragraph:first-child {
    font-weight: 500;
    color: #222;
}

/* --- THE FULL HEIGHT IMAGE LOGIC --- */
.roadmap-image-wrapper {
    width: 100%;
    /* No fixed height or sticky! It relies on the HTML 'h-100' class */
    border-radius: 12px; /* Figma rounded corners */
    overflow: hidden;
}

.roadmap-img {
    width: 100%;
    height: 100%; /* Forces image to stretch to wrapper height */
    object-fit: cover; /* Prevents distortion while stretching */
    display: block;
    opacity: 0.85; /* Subtle wash effect from Figma */
}

/* --- RESPONSIVENESS --- */
@media (max-width: 991px) {
    .roadmap-editorial-section { padding: 40px 0 80px 0; }
    
    /* On mobile/tablet, the columns stack, so we MUST give the image a fixed height again */
    .roadmap-image-wrapper { 
        height: 400px !important; 
        margin-top: 30px;
    }
}

/* Inline Dark Link for Body Text */
.text-link-dark {
    color: #444; /* Matches paragraph text */
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.text-link-dark:hover {
    color: var(--brand-orange);
}

/* Ensure padding handles the transition out of the section */
.editorial-conclusion-section {
    padding: 0 0 120px 0; /* Flows naturally from the previous section */
    background-color: #FFFFFF;
}

@media (max-width: 991px) {
    .editorial-conclusion-section { padding-bottom: 80px; } 
}
/* --- THE BULLETPROOF FIX FOR TOUCHING CARDS ON TABLET/MOBILE --- */

@media (max-width: 991px) {
    /* Targets the columns specifically in your Insights/Editorial sections */
    .insights-grid-section .col-md-6,
    .insights-grid-section .col-lg-3,
    .editorial-conclusion-section .col-md-6, 
    .editorial-conclusion-section .col-lg-3 {
        margin-bottom: 30px !important; /* Forces the gap */
    }
    
    /* Also ensure the card itself isn't expanding past its boundary */
    .insight-card {
        margin-bottom: 30px !important; 
    }
}

/* =========================================
   FEATURED CASE STUDIES CTA SECTION
========================================= */
.launching-cta-section {
    padding: 120px 0;
    background-color: var(--bg-light); /* #F6F5F3 */
    width: 100%;
}

.launching-main-title {
    font-family: Unbounded;
    font-weight: 900;
    /* Massive scale matching your other headers */
    font-size: clamp(3rem, 4.5vw, 4.5rem); 
    line-height: 1.1;
    letter-spacing: -2.5px;
    color: var(--text-dark);
    margin-bottom: 0;
}

.launching-main-subtext {
    font-family: Poppins;
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Reusing your solid orange button with sharp corners */
.launching-cta-section .btn-orange-solid-cta {
    background-color: var(--brand-orange);
    color: #FFFFFF;
    font-family: Poppins;
    font-weight: 700;
    font-size: 14px; /* Slightly smaller text so the long sentence fits well */
    padding: 18px 30px;
    border-radius: 0; 
    text-decoration: none;
    display: inline-block;
    transition: 0.3s ease;
    border: 2px solid var(--brand-orange);
    white-space: nowrap; /* Prevents button text from breaking into two lines */
}

.launching-cta-section .btn-orange-solid-cta:hover {
    background-color: #000000;
    border-color: #000000;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 991px) {
    .launching-cta-section { 
        padding: 80px 0; 
        text-align: center;
    }
    
    .launching-main-subtext {
        margin-top: 20px !important;
    }

    /* Remove the <br> in the subtext on mobile so it flows naturally */
    .launching-main-subtext br {
        display: none;
    }

    .launching-cta-section .col-lg-4 {
        margin-top: 40px !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .launching-main-title { 
        font-size: 2.2rem; 
        letter-spacing: -1.5px; 
    }
    
    /* Allow the button text to wrap if the phone screen is very narrow */
    .launching-cta-section .btn-orange-solid-cta {
        width: 100%;
        white-space: normal;
    }
}