.elementor-16275 .elementor-element.elementor-element-d11b547{--display:flex;}.elementor-16275 .elementor-element.elementor-element-d11b547.e-con{--flex-grow:0;--flex-shrink:0;}@media(max-width:767px){.elementor-16275 .elementor-element.elementor-element-d11b547{--width:537px;}}/* Start custom CSS for html, class: .elementor-element-c77119b *//*=========================================================
DOMAT BLOG 02
GLOBAL DESIGN TOKENS
=========================================================*/

:root {


    /*=====================================================
    BRAND COLORS
    =====================================================*/

    --domat-yellow: #ffb400 !important;

    --domat-dark: #111111 !important;

    --domat-blue: #2c2510 !important;


    /*=====================================================
    NEUTRALS
    =====================================================*/

    --gray-50: #fafafa !important;

    --gray-100: #f5f5f5 !important;

    --gray-200: #ececec !important;

    --gray-300: #dddddd !important;

    --gray-400: #bdbdbd !important;

    --gray-500: #999999 !important;

    --gray-600: #666666 !important;

    --gray-700: #4f4f4f !important;

    --gray-800: #333333 !important;


    /*=====================================================
    TEXT
    =====================================================*/

    --text-color: #404040 !important;

    --heading-color: #2c2510 !important;


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

    --font-sans:
        Arial,
        Helvetica,
        sans-serif;


    /*=====================================================
    CONTENT WIDTHS
    =====================================================*/

    --content-width: 920px;

    --layout-width: 1440px;


    /*=====================================================
    RADIUS
    =====================================================*/

    --radius-small: 8px;

    --radius: 12px;

    --radius-large: 18px;


    /*=====================================================
    SHADOWS
    =====================================================*/

    --shadow-small:
        0 6px 18px rgba(0, 0, 0, .05);

    --shadow:
        0 20px 50px rgba(0, 0, 0, .08);

}

/*blog.css*/

/*=========================================================
DOMAT BLOG 02
MAIN EDITORIAL STYLES
=========================================================*/


/*=========================================================
GLOBAL ARTICLE FOUNDATION
=========================================================*/

.domat-article {

    position: relative;

    width: 100%;

    margin: 0;

    padding: 0;

    background: #ffffff;

    color: var(--text-color);

    font-family: var(--font-sans);

}


/*=========================================================
BOX SIZING
=========================================================*/

.domat-article *,
.domat-article *::before,
.domat-article *::after {

    box-sizing: border-box;

}


/*=========================================================
MAIN BLOG LAYOUT
=========================================================*/

.blog-layout {

    width: min(
        var(--layout-width),
        94%
    );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, var(--content-width))
        280px;

    justify-content: center;

    gap: 80px;

    padding: 80px 0 140px;

}


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

.blog-main {

    width: 100%;

    min-width: 0;

}


/*=========================================================
SIDEBAR FOUNDATION
=========================================================*/

.blog-sidebar {

    position: relative;

    min-width: 0;

}


/*=========================================================
EDITORIAL INTRO
=========================================================*/

.editorial-intro {

    width: 100%;

    margin: 0 0 70px;

    padding: 0 0 42px;

    border-bottom:
        1px solid var(--gray-200);

}


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

.editorial-meta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 32px;

}


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

.article-category {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 17px;
    
    margin-top: 10px;

    border-radius: 999px;

    background: #fff6df;

    color: var(--domat-yellow);

    font-size: 12px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    white-space: nowrap;

}


/*=========================================================
ARTICLE INFORMATION
=========================================================*/

.article-information {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 12px;

    color: var(--gray-600);

    font-size: 14px;

    line-height: 1.5;

}


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

.article-title {

    max-width: 900px;

    margin: 0;

    color: var(--heading-color);

    font-size: clamp(
        44px,
        5vw,
        68px
    );

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.045em;

}


/*=========================================================
TITLE SECONDARY LINE
=========================================================*/

.article-title span {

    display: block;

    margin-top: 12px;

    color: var(--domat-dark);

}


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

.article-lead {

    max-width: 790px;

    margin: 32px 0 0;

    color: var(--gray-700);

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

    line-height: 1.8;

    font-weight: 400;

}


/*=========================================================
READING PROGRESS
=========================================================*/

.reading-progress-wrapper{

    position:sticky !important;

    top:0;

    left:0;

    right:0;

    width:100%;

    z-index:99999;

}



.reading-progress-track{

    width:100%;

    height:5px;

    overflow:hidden;

    border-radius:999px;

    background:#ececec;

}



.reading-progress-bar{

    width:0%;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--domat-yellow),
        #ffc93b
    );

    transition:width .10s linear;

}


/*=========================================================
TABLE OF CONTENTS
=========================================================*/

.toc-panel{

    position:fixed;

    right:32px;

    bottom:32px;

    z-index:9999;

    width:220px;

}



.toc-toggle{

    height:70px !important;

    min-height:70px;

    max-height:70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:16px;

    padding:18px 22px;

    border:none;

    border-radius:14px;

    background:#f7b600;

    color:#000;

    cursor:pointer;

    box-shadow:0 18px 45px rgba(0,0,0,.18);

}



.toc-toggle:hover{

    background:#ffc93b !important;

}



.toc-icon{

    font-size:18px;

}



.toc-navigation{

    overflow:hidden;

    max-height:0;

    opacity:0;

    margin-top:14px;

    border-radius:16px;

    background:#ffffff !important;

    border:1px solid #ececec;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:

        max-height .35s ease,

        opacity .25s ease,

        padding .30s ease;
        
    visibility:hidden;
    
    pointer-events:none;

    transform:translateY(15px);

}



.toc-navigation.active{

    opacity:1;

    max-height:700px;

    padding:14px 0;
    
    visibility:visible;
    
    pointer-events:auto;
    
    transform:translateY(0);

}



.toc-navigation ul{

    list-style:none;

    margin:0;

    padding:0;

}



.toc-navigation li{

    margin:0;

}



.toc-navigation a{

    display:block;

    padding:14px 22px;

    color:#000000 !important;

    text-decoration:none !important;

    font-size:15px;

    transition:.25s;

}



.toc-navigation a:hover{

    color:var(--accent-color) !important;

    text-decoration:none !important;

}



/*=========================================================
PART 2 — PRODUCTION STRATEGY INTRODUCTION
=========================================================*/


/*=========================================================
ARTICLE SECTION FOUNDATION
=========================================================*/

.article-section {

    width: 100%;

    margin-bottom: 100px;

}


/*=========================================================
SECTION EYEBROW
=========================================================*/

.section-eyebrow {

    margin-bottom: 20px;

    color: var(--domat-yellow);

    font-size: 12px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform: uppercase;

}


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

.strategy-introduction h2 {

    max-width: 780px;

    margin: 0 0 30px;

    color: var(--heading-color);

    font-size: clamp(
        36px,
        4vw,
        48px
    );

    line-height: 1.16;

    font-weight: 800;

    letter-spacing: -.035em;

}


/*=========================================================
SECTION PARAGRAPHS
=========================================================*/

.strategy-introduction > p {

    max-width: 820px;

    margin: 0 0 27px;

    color: var(--gray-700);

    font-size: 18px;

    line-height: 1.85;

}


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

.strategy-introduction > .section-lead {

    margin-bottom: 32px;

    color: #303030;

    font-size: 21px;

    line-height: 1.75;

    font-weight: 500;

}


/*=========================================================
STRATEGY GRID
=========================================================*/

.strategy-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    margin-top: 55px;

}


/*=========================================================
STRATEGY CARD
=========================================================*/

.strategy-card {

    display: flex;

    align-items: flex-start;

    gap: 22px;

    min-width: 0;

    padding: 32px;

    background: #ffffff;

    border: 1px solid var(--gray-200);

    border-radius: var(--radius);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/*=========================================================
CARD HOVER
=========================================================*/

.strategy-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(255, 180, 0, .65);

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, .07);

}


/*=========================================================
CARD NUMBER
=========================================================*/

.strategy-card-number {

    flex: 0 0 auto;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff6df;

    color: var(--domat-yellow);

    font-size: 14px;

    line-height: 1;

    font-weight: 800;

}


/*=========================================================
CARD CONTENT
=========================================================*/

.strategy-card-content {

    min-width: 0;

}


/*=========================================================
CARD HEADING
=========================================================*/

.strategy-card h3 {

    margin: 0 0 12px;

    color: var(--heading-color);

    font-size: 21px;

    line-height: 1.35;

    font-weight: 750;

    letter-spacing: -.015em;

}


/*=========================================================
CARD PARAGRAPH
=========================================================*/

.strategy-card p {

    margin: 0;

    color: var(--gray-600);

    font-size: 16px;

    line-height: 1.75;

}


/*=========================================================
STRATEGY TAKEAWAY
=========================================================*/

.strategy-takeaway {

    display: flex;

    align-items: center;

    gap: 24px;

    margin-top: 50px;

    padding: 30px 34px;

    background: #f8f8f8;

    border-left:
        4px solid var(--domat-yellow);

}


/*=========================================================
TAKEAWAY ICON
=========================================================*/

.strategy-takeaway-icon {

    flex: 0 0 auto;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ffffff;

    color: var(--domat-yellow);

    font-size: 20px;

}


/*=========================================================
TAKEAWAY CONTENT
=========================================================*/

.strategy-takeaway-content {

    min-width: 0;

}


/*=========================================================
TAKEAWAY LABEL
=========================================================*/

.strategy-takeaway-label {

    display: block;

    margin-bottom: 7px;

    color: var(--gray-600);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 2px;

}


/*=========================================================
TAKEAWAY TEXT
=========================================================*/

.strategy-takeaway p {

    max-width: 750px;

    margin: 0;

    color: var(--heading-color);

    font-size: 18px;

    line-height: 1.65;

    font-weight: 600;

}


/*=========================================================
CONTEXTUAL CTA
=========================================================*/

.contextual-cta {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 42px;

    padding: 30px 32px;

    background: var(--domat-blue);

    border-radius: var(--radius);

}


/*=========================================================
CTA CONTENT
=========================================================*/

.contextual-cta-content {

    min-width: 0;

}


/*=========================================================
CTA LABEL
=========================================================*/

.contextual-cta-label {

    display: block;

    margin-bottom: 8px;

    color: var(--domat-yellow);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 800;

    letter-spacing: 2px;

}


/*=========================================================
CTA TEXT
=========================================================*/

.contextual-cta p {

    max-width: 620px;

    margin: 0;

    color: #dddddd;

    font-size: 16px;

    line-height: 1.7;

}


/*=========================================================
CTA BUTTON
=========================================================*/

.contextual-cta-button {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 52px;

    padding: 14px 22px;

    background: var(--domat-yellow);

    color: var(--domat-dark);

    border-radius: 999px;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 800;

    text-decoration: none;

    white-space: nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/*=========================================================
CTA BUTTON HOVER
=========================================================*/

.contextual-cta-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, .22);

}


/*=========================================================
CTA ARROW
=========================================================*/

.contextual-cta-button i {

    font-size: 13px;

}

/*fix to blue link default text*/
.contextual-cta-button,
.secondary-cta-button{
    color: #000 !important;
}


.final-cta-secondary-link {
    
    color: var(--domat-yellow) !important;
}

/* ============================================================
   PROJECT SITUATIONS
   Educational decision-support section
   ============================================================ */

.situation-guide-section{

    margin-top:20px;

}


/* ============================================================
   SITUATION GRID
   ============================================================ */

.situation-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:28px;

    margin-top:55px;

}


/* ============================================================
   SITUATION CARD
   ============================================================ */

.situation-card{

    display:flex;

    gap:26px;

    padding:36px;

    background:#ffffff;

    border:1px solid var(--gray-200);

    border-radius:
        var(--radius-small);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.situation-card:hover{

    transform:translateY(-4px);

    border-color:
        rgba(255,180,0,.55);

    box-shadow:
        0 16px 36px
        rgba(0,0,0,.07);

}


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

.situation-card-number{

    flex-shrink:0;

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff6df;

    color:
        var(--domat-yellow);

    font-size:17px;

    font-weight:800;

    letter-spacing:.03em;

}


/* ============================================================
   CARD CONTENT
   ============================================================ */

.situation-card-content{

    min-width:0;

}


.situation-card h3{

    margin:0 0 16px;

    color:
        var(--domat-blue);

    font-size:23px;

    line-height:1.3;

    font-weight:750;

    letter-spacing:-.02em;

}


.situation-card p{

    margin:0 0 18px;

    color:#555;

    font-size:16px;

    line-height:1.75;

}


.situation-card p:last-of-type{

    margin-bottom:25px;

}


/* ============================================================
   QUESTION BLOCK
   Converts educational content into a decision prompt.
   ============================================================ */

.situation-question{

    margin-top:24px;

    padding:18px 20px;

    border-left:
        3px solid
        var(--domat-yellow);

    background:
        var(--gray-50);

}


.situation-question-label{

    display:block;

    margin-bottom:7px;

    color:
        var(--domat-yellow);

    font-size:10px;

    line-height:1.2;

    font-weight:800;

    letter-spacing:2px;

}


.situation-question-text{

    display:block;

    color:
        var(--domat-dark);

    font-size:14px;

    line-height:1.6;

    font-weight:600;

}


/* ============================================================
   CONTEXTUAL CTA
   ============================================================ */

.contextual-cta{

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:center;

    gap:40px;

    margin-top:60px;

    padding:36px 40px;

    background:
        #2c2510;

    border-radius:
        var(--radius-small);

}


.contextual-cta-content{

    min-width:0;

}


.contextual-cta-eyebrow{

    display:block;

    margin-bottom:12px;

    color:
        var(--domat-yellow);

    font-size:11px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;

}


.contextual-cta h3{

    margin:0 0 12px;

    color:#ffffff;

    font-size:25px;

    line-height:1.3;

}


.contextual-cta p{

    max-width:700px;

    margin:0;

    color:#d7d7d7;

    font-size:16px;

    line-height:1.7;

}


/* ============================================================
   SECONDARY CTA BUTTON
   ============================================================ */

.secondary-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-height:52px;

    padding:14px 24px;

    border:
        1px solid
        var(--domat-yellow);

    border-radius:6px;

    background:
        var(--domat-yellow);

    color:
        var(--domat-dark);

    font-size:14px;

    font-weight:750;

    line-height:1.3;

    text-decoration:none;

    white-space:nowrap;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}


.secondary-cta-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.25);

}


.secondary-cta-button span{

    font-size:18px;

    line-height:1;

}

/* ============================================================
   FIXED PRODUCTION ENVIRONMENTS
   ============================================================ */

.fixed-production-section{

    margin-top:20px;

}


/* ============================================================
   SCENARIO GRID
   ============================================================ */

.fixed-scenario-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:28px;

    margin-top:55px;

}


/* ============================================================
   SCENARIO CARD
   ============================================================ */

.fixed-scenario-card{

    display:flex;

    gap:24px;

    padding:34px;

    background:#ffffff;

    border:
        1px solid
        var(--gray-200);

    border-radius:
        var(--radius-small);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.fixed-scenario-card:hover{

    transform:translateY(-4px);

    border-color:
        rgba(255,180,0,.55);

    box-shadow:
        0 16px 36px
        rgba(0,0,0,.07);

}


/* ============================================================
   SCENARIO ICON
   ============================================================ */

.fixed-scenario-icon{

    flex-shrink:0;

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff6df;

    color:
        var(--domat-yellow);

    font-size:21px;

}


/* ============================================================
   SCENARIO CONTENT
   ============================================================ */

.fixed-scenario-content{

    min-width:0;

}


.fixed-scenario-label{

    display:block;

    margin-bottom:10px;

    color:
        var(--domat-yellow);

    font-size:10px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;

}


.fixed-scenario-card h3{

    margin:0 0 16px;

    color:
        var(--domat-blue);

    font-size:23px;

    line-height:1.3;

    font-weight:750;

    letter-spacing:-.02em;

}


.fixed-scenario-card p{

    margin:0 0 17px;

    color:#555;

    font-size:16px;

    line-height:1.75;

}


.fixed-scenario-card p:last-child{

    margin-bottom:0;

}


/* ============================================================
   DECISION CHECKPOINT
   ============================================================ */

.fixed-decision-panel{

    display:flex;

    align-items:flex-start;

    gap:28px;

    margin-top:60px;

    padding:36px 40px;

    border:
        1px solid
        #e7e7e7;

    border-left:
        5px solid
        var(--domat-yellow);

    background:
        var(--gray-50);

}


/* ============================================================
   DECISION MARKER
   ============================================================ */

.fixed-decision-marker{

    flex-shrink:0;

}


.fixed-decision-marker span{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        var(--domat-yellow);

    color:
        var(--domat-dark);

    font-size:15px;

    font-weight:800;

}


/* ============================================================
   DECISION CONTENT
   ============================================================ */

.fixed-decision-content{

    min-width:0;

}


.fixed-decision-eyebrow{

    display:block;

    margin-bottom:10px;

    color:
        var(--domat-yellow);

    font-size:10px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;

}


.fixed-decision-content h3{

    margin:0 0 12px;

    color:
        var(--domat-blue);

    font-size:25px;

    line-height:1.3;

}


.fixed-decision-content p{

    max-width:760px;

    margin:0;

    color:#555;

    font-size:16px;

    line-height:1.75;

}


/* ============================================================
   CONTEXTUAL CTA
   ============================================================ */

.fixed-contextual-cta{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:40px;

    margin-top:55px;

    padding:36px 40px;

    background:
        var(--domat-blue);

    border-radius:
        var(--radius-small);

}


.fixed-contextual-cta-content{

    min-width:0;

}


.fixed-contextual-cta-eyebrow{

    display:block;

    margin-bottom:12px;

    color:
        var(--domat-yellow);

    font-size:10px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:2px;

}


.fixed-contextual-cta h3{

    margin:0 0 12px;

    color:#ffffff;

    font-size:25px;

    line-height:1.3;

}


.fixed-contextual-cta p{

    max-width:700px;

    margin:0;

    color:#d7d7d7;

    font-size:16px;

    line-height:1.7;

}


/* ============================================================
   CTA ACTION
   ============================================================ */

.fixed-contextual-cta-action{

    flex-shrink:0;

}


/*
    Reuse the existing .secondary-cta-button class.

    This keeps CTA styling consistent across the article
    while allowing each CTA to have different contextual
    messaging.
*/

/*=========================================================
PROJECT STRATEGIES
PART 04 — DIFFERENT PROJECTS, DIFFERENT PRODUCTION STRATEGIES

Purpose:
Present concrete project scenarios as independent production
environments rather than as a direct mobile vs. stationary
comparison.

Design principles:
- Editorial
- Industrial
- Technical
- Responsive
- No fixed card heights
- Content-driven sizing
=========================================================*/


.project-strategies-section{

    margin-top:20px;

}


/*=========================================================
SECTION INTRODUCTION
=========================================================*/

.project-strategies-section
.section-introduction{

    max-width:820px;

    font-size:21px;

    line-height:1.8;

    color:#3f3f3f;

}


/*=========================================================
PROJECT SCENARIO GRID
=========================================================*/

.project-scenario-grid{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:28px;

    margin-top:55px;

}


/*=========================================================
SCENARIO CARD
=========================================================*/

.project-scenario-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:38px;

    border:1px solid #e6e6e6;

    border-radius:10px;

    background:#ffffff;

    box-sizing:border-box;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


/*=========================================================
CARD HOVER
=========================================================*/

.project-scenario-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(255,180,0,.65);

    box-shadow:
        0 18px 40px rgba(0,0,0,.07);

}


/*=========================================================
SCENARIO NUMBER
=========================================================*/

.project-scenario-number{

    position:absolute;

    top:25px;

    right:28px;

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    color:#d6d6d6;

}


/*=========================================================
SCENARIO ICON
=========================================================*/

.project-scenario-icon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:50%;

    background:#fff6df;

    color:var(--domat-yellow);

    font-size:23px;

}


/*=========================================================
SCENARIO LABEL
=========================================================*/

.project-scenario-label{

    display:block;

    margin-bottom:12px;

    color:var(--domat-yellow);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1.4;

    text-transform:uppercase;

}


/*=========================================================
SCENARIO HEADING
=========================================================*/

.project-scenario-card h3{

    margin:0 0 18px;

    color:var(--domat-blue);

    font-size:27px;

    line-height:1.25;

    font-weight:800;

    letter-spacing:-.02em;

}


/*=========================================================
SCENARIO BODY
=========================================================*/

.project-scenario-card > p{

    margin:0;

    color:#555555;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
KEY CONSIDERATIONS
=========================================================*/

.project-scenario-consideration{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid #eeeeee;

}


/*=========================================================
CONSIDERATION LABEL
=========================================================*/

.project-scenario-consideration > span{

    display:block;

    margin-bottom:16px;

    color:#777777;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*=========================================================
CONSIDERATION LIST
=========================================================*/

.project-scenario-consideration ul{

    margin:0;

    padding:0;

    list-style:none;

}


/*=========================================================
CONSIDERATION ITEM
=========================================================*/

.project-scenario-consideration li{

    position:relative;

    margin:0 0 10px;

    padding-left:19px;

    color:#555555;

    font-size:15px;

    line-height:1.55;

}


/*=========================================================
CUSTOM BULLET
=========================================================*/

.project-scenario-consideration li::before{

    content:"";

    position:absolute;

    top:.65em;

    left:0;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--domat-yellow);

}


/*=========================================================
PRODUCTION INSIGHT
=========================================================*/

.project-scenario-insight{

    margin-top:28px;

    padding:22px 24px;

    border-left:3px solid var(--domat-yellow);

    background:#fafafa;

}


/*=========================================================
INSIGHT LABEL
=========================================================*/

.project-scenario-insight strong{

    display:block;

    margin-bottom:8px;

    color:#101010;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


/*=========================================================
INSIGHT QUESTION
=========================================================*/

.project-scenario-insight p{

    margin:0;

    color:#555555;

    font-size:15px;

    line-height:1.65;

}


/*=========================================================
CROSS-SCENARIO CALLOUT
=========================================================*/

.project-strategy-callout{

    display:grid;

    grid-template-columns:72px minmax(0,1fr);

    gap:30px;

    margin-top:65px;

    padding:42px;

    border-radius:10px;

    background:#2c2510;

    color:#ffffff;

    box-sizing:border-box;

}


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

.project-strategy-callout-marker{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,180,0,.45);

    border-radius:50%;

    color:var(--domat-yellow);

    font-size:25px;

    font-weight:700;

}


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

.project-strategy-callout-eyebrow{

    display:block;

    margin-bottom:14px;

    color:var(--domat-yellow);

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;

}


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

.project-strategy-callout h3{

    margin:0 0 18px;

    color:#ffffff;

    font-size:30px;

    line-height:1.25;

    font-weight:800;

}


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

.project-strategy-callout-content > p{

    max-width:820px;

    margin:0;

    color:#d8d8d8;

    font-size:17px;

    line-height:1.8;

}


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

.project-strategy-question{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin-top:28px;

    padding-top:24px;

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

}


/*=========================================================
QUESTION LABEL
=========================================================*/

.project-strategy-question span{

    color:#a9a9a9;

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


/*=========================================================
QUESTION TEXT
=========================================================*/

.project-strategy-question strong{

    color:#ffffff;

    font-size:20px;

    line-height:1.5;

    font-weight:700;

}



/*=========================================================
READY-MIX PRODUCERS
PART 05 — WHAT SHOULD READY-MIX PRODUCERS CONSIDER?

Purpose:
Help ready-mix producers identify the production model that
most closely reflects their current or planned operation.

Design principles:
- Editorial
- Technical
- Scenario-driven
- Content-driven dimensions
- No fixed card heights
- Fully responsive
=========================================================*/


.readymix-producers-section{

    margin-top:20px;

}


/*=========================================================
SECTION INTRODUCTION
=========================================================*/

.readymix-producers-section
.section-introduction{

    max-width:820px;

    font-size:21px;

    line-height:1.8;

    color:#3f3f3f;

}


/*=========================================================
READY-MIX MODEL GRID
=========================================================*/

.readymix-model-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:26px;

    margin-top:55px;

}


/*=========================================================
MODEL CARD
=========================================================*/

.readymix-model-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:34px;

    border:1px solid #e6e6e6;

    border-radius:10px;

    background:#ffffff;

    box-sizing:border-box;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.readymix-model-card:hover{

    transform:translateY(-5px);

    border-color:
        rgba(255,180,0,.65);

    box-shadow:
        0 18px 40px rgba(0,0,0,.07);

}


/*=========================================================
MODEL HEADER
=========================================================*/

.readymix-model-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;

}


/*=========================================================
MODEL NUMBER
=========================================================*/

.readymix-model-number{

    font-size:13px;

    font-weight:800;

    letter-spacing:2px;

    color:#cfcfcf;

}


/*=========================================================
MODEL ICON
=========================================================*/

.readymix-model-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#fff6df;

    color:var(--domat-yellow);

    font-size:22px;

}


/*=========================================================
MODEL LABEL
=========================================================*/

.readymix-model-label{

    display:block;

    margin-bottom:12px;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1.5;

    text-transform:uppercase;

}


/*=========================================================
MODEL HEADING
=========================================================*/

.readymix-model-card h3{

    margin:0 0 18px;

    color:var(--domat-blue);

    font-size:25px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:-.02em;

}


/*=========================================================
MODEL BODY
=========================================================*/

.readymix-model-card > p{

    margin:0 0 20px;

    color:#555555;

    font-size:16px;

    line-height:1.8;

}


/*=========================================================
MODEL DETAILS
=========================================================*/

.readymix-model-details{

    margin-top:8px;

    padding-top:24px;

    border-top:1px solid #eeeeee;

}


/*=========================================================
DETAILS LABEL
=========================================================*/

.readymix-model-details > span{

    display:block;

    margin-bottom:15px;

    color:#777777;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.8px;

    line-height:1.5;

    text-transform:uppercase;

}


/*=========================================================
DETAILS LIST
=========================================================*/

.readymix-model-details ul{

    margin:0;

    padding:0;

    list-style:none;

}


/*=========================================================
DETAIL ITEM
=========================================================*/

.readymix-model-details li{

    position:relative;

    margin-bottom:10px;

    padding-left:18px;

    color:#555555;

    font-size:14px;

    line-height:1.6;

}


/*=========================================================
DETAIL BULLET
=========================================================*/

.readymix-model-details li::before{

    content:"";

    position:absolute;

    top:.65em;

    left:0;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--domat-yellow);

}


/*=========================================================
GUIDING QUESTION
=========================================================*/

.readymix-model-question{

    margin-top:auto;

    padding-top:25px;

}


/*=========================================================
QUESTION CONTAINER
=========================================================*/

.readymix-model-question{

    margin-top:28px;

    padding:20px 22px;

    border-left:3px solid var(--domat-yellow);

    background:#fafafa;

}


/*=========================================================
QUESTION LABEL
=========================================================*/

.readymix-model-question span{

    display:block;

    margin-bottom:8px;

    color:#101010;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.7px;

    text-transform:uppercase;

}


/*=========================================================
QUESTION TEXT
=========================================================*/

.readymix-model-question p{

    margin:0;

    color:#555555;

    font-size:14px;

    line-height:1.65;

}


/*=========================================================
DECISION PANEL
=========================================================*/

.readymix-decision-panel{

    display:grid;

    grid-template-columns:72px minmax(0,1fr);

    gap:30px;

    margin-top:65px;

    padding:42px;

    border-radius:10px;

    background:#2c2510;

    color:#ffffff;

    box-sizing:border-box;

}


/*=========================================================
DECISION MARKER
=========================================================*/

.readymix-decision-marker{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,180,0,.45);

    border-radius:50%;

}


.readymix-decision-marker span{

    color:var(--domat-yellow);

    font-size:14px;

    font-weight:800;

    letter-spacing:1px;

}


/*=========================================================
DECISION EYEBROW
=========================================================*/

.readymix-decision-eyebrow{

    display:block;

    margin-bottom:14px;

    color:var(--domat-yellow);

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;

}


/*=========================================================
DECISION HEADING
=========================================================*/

.readymix-decision-content h3{

    margin:0 0 18px;

    color:#ffffff;

    font-size:30px;

    line-height:1.25;

    font-weight:800;

}


/*=========================================================
DECISION DESCRIPTION
=========================================================*/

.readymix-decision-content > p{

    max-width:820px;

    margin:0;

    color:#d8d8d8;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
DECISION QUESTIONS
=========================================================*/

.readymix-decision-points{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:18px;

    margin-top:32px;

}


/*=========================================================
DECISION POINT
=========================================================*/

.readymix-decision-point{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:22px;

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

    border-radius:8px;

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

}


/*=========================================================
DECISION POINT NUMBER
=========================================================*/

.readymix-decision-point > span{

    color:var(--domat-yellow);

    font-size:11px;

    font-weight:800;

    letter-spacing:1.5px;

}


/*=========================================================
DECISION POINT TEXT
=========================================================*/

.readymix-decision-point p{

    margin:0;

    color:#eeeeee;

    font-size:14px;

    line-height:1.65;

}


/*=========================================================
CONTEXTUAL CTA
=========================================================*/

.readymix-contextual-cta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    margin-top:45px;

    padding:32px 36px;

    border:1px solid #e7e7e7;

    border-radius:10px;

    background:#ffffff;

    box-shadow:
        0 10px 30px rgba(0,0,0,.04);

    box-sizing:border-box;

}


/*=========================================================
CTA CONTENT
=========================================================*/

.readymix-contextual-cta-content{

    min-width:0;

}


.readymix-contextual-cta-eyebrow{

    display:block;

    margin-bottom:10px;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


/*=========================================================
CTA HEADING
=========================================================*/

.readymix-contextual-cta h3{

    margin:0 0 10px;

    color:var(--domat-blue);

    font-size:24px;

    line-height:1.3;

}


/*=========================================================
CTA DESCRIPTION
=========================================================*/

.readymix-contextual-cta-content p{

    max-width:720px;

    margin:0;

    color:#606060;

    font-size:15px;

    line-height:1.7;

}


/*=========================================================
CTA ACTION
=========================================================*/

.readymix-contextual-cta-action{

    flex-shrink:0;

}


/*=========================================================
SECONDARY CTA BUTTON

Uses the existing CTA system.
=========================================================*/

.readymix-contextual-cta
.secondary-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:52px;

    padding:15px 22px;

    border:1px solid var(--domat-yellow);

    border-radius:999px;

    background:#ffffff;

    color:#101010;

    font-size:14px;

    font-weight:700;

    line-height:1.3;

    text-decoration:none;

    white-space:nowrap;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


.readymix-contextual-cta
.secondary-cta-button:hover{

    transform:translateY(-2px);

    background:var(--domat-yellow);

    color:#101010;

    box-shadow:
        0 10px 24px rgba(0,0,0,.12);

}


/*=========================================================
PLANT SELECTION FRAMEWORK
INTEGRATED PARTS 06–09

Purpose:
- Plant selection variables
- Configuration profiles
- Mobility framework
- ROADMASTER context
=========================================================*/


/*=========================================================
SECTION INTRO
=========================================================*/

.plant-selection-framework{

    margin-top:20px;

}


.plant-selection-framework > h2{

    max-width:850px;

}


/*=========================================================
SELECTION VARIABLE GRID
=========================================================*/

.selection-variable-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:0;

    margin-top:55px;

    border-top:1px solid #e8e8e8;

}


/*=========================================================
VARIABLE CARD
=========================================================*/

.selection-variable-card{

    position:relative;

    display:flex;

    gap:25px;

    padding:34px 30px;

    border-bottom:1px solid #e8e8e8;

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

}


.selection-variable-card:nth-child(odd){

    border-right:1px solid #e8e8e8;

}


.selection-variable-card:hover{

    background:#fffaf0;

}


.selection-variable-number{

    flex-shrink:0;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff6df;

    color:var(--domat-yellow);

    font-size:15px;

    font-weight:800;

    letter-spacing:.04em;

}


.selection-variable-content{

    min-width:0;

}


.selection-variable-label{

    display:block;

    margin-bottom:9px;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1.4;

}


.selection-variable-card h3{

    margin:0 0 12px;

    font-size:21px;

    line-height:1.3;

    letter-spacing:-.015em;

    color:#2c2510;

}


.selection-variable-card p{

    margin:0;

    color:#606060;

    font-size:16px;

    line-height:1.7;

}


/*=========================================================
FEATURED VARIABLE
=========================================================*/

.selection-variable-card--featured{

    background:#2c2510;

}


.selection-variable-card--featured:hover{

    background:#3d3418;

}


.selection-variable-card--featured .selection-variable-number{

    background:var(--domat-yellow);

    color:#101010;

}


.selection-variable-card--featured .selection-variable-label{

    color:var(--domat-yellow);

}


.selection-variable-card--featured h3{

    color:#ffffff;

}


.selection-variable-card--featured p{

    color:#d7d7d7;

}


/*=========================================================
SECTION TRANSITION
=========================================================*/

.selection-transition{

    display:grid;

    grid-template-columns:
        minmax(20px,1fr)
        minmax(0,720px)
        minmax(20px,1fr);

    align-items:center;

    gap:25px;

    margin:75px 0 90px;

}


.selection-transition-line{

    height:1px;

    background:#dedede;

}


.selection-transition p{

    margin:0;

    text-align:center;

    color:#555;

    font-size:18px;

    line-height:1.75;

    font-weight:500;

}


/*=========================================================
CONFIGURATION SECTION
=========================================================*/

.configuration-section{

    margin-top:20px;

}


.configuration-heading{

    max-width:850px;

    margin-bottom:50px;

}


.configuration-heading h3{

    margin:0 0 20px;

    font-size:32px;

    line-height:1.25;

    color:#2c2510;

}


.configuration-heading p{

    margin:0;

    color:#5b5b5b;

}


/*=========================================================
CONFIGURATION PROFILE GRID
=========================================================*/

.configuration-profile-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:24px;

}


/*=========================================================
PROFILE CARD
=========================================================*/

.configuration-profile-card{

    display:flex;

    flex-direction:column;

    padding:32px;

    border:1px solid #e7e7e7;

    background:#ffffff;

    border-radius:10px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.configuration-profile-card:hover{

    transform:translateY(-4px);

    border-color:var(--domat-yellow);

    box-shadow:
        0 14px 32px rgba(0,0,0,.06);

}


.configuration-profile-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:25px;

}


.configuration-profile-index{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#fff6df;

    color:var(--domat-yellow);

    font-size:15px;

    font-weight:800;

}


.configuration-profile-type{

    color:#777;

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

    text-align:right;

}


.configuration-profile-card h4{

    margin:0 0 20px;

    color:#2c2510;

    font-size:23px;

    line-height:1.3;

}


.configuration-profile-card ul{

    margin:0;

    padding:0;

    list-style:none;

}


.configuration-profile-card li{

    position:relative;

    margin-bottom:10px;

    padding-left:20px;

    color:#5b5b5b;

    font-size:16px;

    line-height:1.6;

}


.configuration-profile-card li::before{

    content:"";

    position:absolute;

    top:.7em;

    left:0;

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--domat-yellow);

}


.configuration-consideration{

    margin-top:auto;

    padding-top:25px;

}


.configuration-consideration span{

    display:block;

    margin-bottom:7px;

    color:#858585;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.8px;

}


.configuration-consideration strong{

    display:block;

    color:#2c2510;

    font-size:15px;

    line-height:1.5;

}


/*=========================================================
WIDE PROFILE
=========================================================*/

.configuration-profile-card--wide{

    grid-column:1 / -1;

    background:#f8f8f8;

}


.configuration-profile-wide-content{

    display:grid;

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

    gap:50px;

    align-items:center;

}


.configuration-profile-card--wide h4{

    margin-bottom:12px;

}


.configuration-profile-card--wide p{

    max-width:700px;

    margin:0;

    color:#5d5d5d;

    line-height:1.75;

}


/*=========================================================
MOBILITY FRAMEWORK
=========================================================*/

.mobility-framework{

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(300px,.85fr);

    gap:65px;

    margin-top:100px;

    padding:60px;

    background:#2c2510;

    border-radius:12px;

}


.mobility-framework-content{

    align-self:center;

}


.mobility-framework-content .section-eyebrow{

    color:var(--domat-yellow);

}


.mobility-framework-content h3{

    margin:0 0 22px;

    color:#ffffff;

    font-size:34px;

    line-height:1.25;

}


.mobility-framework-content p{

    margin:0 0 20px;

    color:#d7d7d7;

    font-size:17px;

    line-height:1.8;

}


.mobility-framework-content p:last-child{

    margin-bottom:0;

}


/*=========================================================
MOBILITY POINTS
=========================================================*/

.mobility-points{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:18px;

}


.mobility-point{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:18px 0;

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

}


.mobility-point:last-child{

    border-bottom:0;

}


.mobility-point-icon{

    flex-shrink:0;

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,180,0,.12);

    color:var(--domat-yellow);

    font-size:17px;

}


.mobility-point div{

    display:flex;

    flex-direction:column;

    gap:5px;

}


.mobility-point strong{

    color:#ffffff;

    font-size:16px;

    line-height:1.4;

}


.mobility-point div span{

    color:#aeb7c1;

    font-size:14px;

    line-height:1.55;

}


/*=========================================================
ROADMASTER SELECTION BLOCK
=========================================================*/

.roadmaster-selection-block{

    margin-top:100px;

    overflow:hidden;

    border:1px solid #e6e6e6;

    border-radius:12px;

    background:#ffffff;

}


/*=========================================================
ROADMASTER HEADER
=========================================================*/

.roadmaster-selection-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    padding:48px 50px 35px;

    border-bottom:1px solid #ececec;

}


.roadmaster-selection-header h3{

    margin:0;

    color:#2c2510;

    font-size:34px;

    line-height:1.25;

}


.roadmaster-selection-tag{

    flex-shrink:0;

    padding:9px 15px;

    border:1px solid #e5e5e5;

    border-radius:999px;

    color:#777;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

}


/*=========================================================
ROADMASTER BODY
=========================================================*/

.roadmaster-selection-body{

    padding:45px 50px 50px;

}


.roadmaster-selection-intro{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:45px;

    margin-bottom:45px;

}


.roadmaster-selection-intro p{

    margin:0;

    color:#555;

    font-size:17px;

    line-height:1.8;

}


/*=========================================================
ROADMASTER ARCHITECTURE GRID
=========================================================*/

.roadmaster-architecture-grid{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:20px;

}


.roadmaster-architecture-card{

    padding:28px;

    background:#f8f8f8;

    border-radius:8px;

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

}


.roadmaster-architecture-card:hover{

    transform:translateY(-4px);

    background:#fff8e8;

}


.roadmaster-architecture-icon{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:50%;

    background:#fff1cd;

    color:var(--domat-yellow);

    font-size:19px;

}


.roadmaster-architecture-card h4{

    margin:0 0 12px;

    color:#2c2510;

    font-size:21px;

    line-height:1.35;

}


.roadmaster-architecture-card p{

    margin:0;

    color:#606060;

    font-size:15px;

    line-height:1.7;

}


/*=========================================================
ROADMASTER DECISION NOTE
=========================================================*/

.roadmaster-selection-note{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-top:30px;

    padding:28px;

    border-left:4px solid var(--domat-yellow);

    background:#fffaf0;

}


.roadmaster-selection-note-marker{

    flex-shrink:0;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:var(--domat-yellow);

}


.roadmaster-selection-note > div:last-child > span{

    display:block;

    margin-bottom:7px;

    color:#8a6b24;

    font-size:10px;

    font-weight:800;

    letter-spacing:1.8px;

}


.roadmaster-selection-note p{

    margin:0;

    color:#555;

    font-size:16px;

    line-height:1.7;

}


/*=========================================================
ROADMASTER CONTEXTUAL CTA
=========================================================*/

.roadmaster-selection-cta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    padding:35px 50px;

    background:#2c2510;

}


.roadmaster-selection-cta-label{

    display:block;

    margin-bottom:9px;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:2px;

}


.roadmaster-selection-cta h4{

    margin:0;

    color:#ffffff;

    font-size:23px;

    line-height:1.35;

}


.secondary-cta-button{

    flex-shrink:0;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:13px;

    padding:16px 24px;

    border:1px solid var(--domat-yellow);

    border-radius:999px;

    background:var(--domat-yellow);

    color:#101010;

    font-size:14px;

    font-weight:800;

    line-height:1.2;

    text-decoration:none;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.secondary-cta-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.22);

}


.secondary-cta-button span{

    font-size:18px;

    line-height:1;

}


/*=========================================================
ENDPOINT
=========================================================*/

.plant-selection-endpoint{

    max-width:780px;

    margin:90px auto 0;

    padding-top:40px;

    border-top:1px solid #e5e5e5;

    text-align:center;

}


.plant-selection-endpoint-label{

    display:block;

    margin-bottom:15px;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:2.5px;

}


.plant-selection-endpoint h3{

    margin:0 0 17px;

    color:#2c2510;

    font-size:30px;

    line-height:1.3;

}


.plant-selection-endpoint p{

    max-width:650px;

    margin:0 auto;

    color:#666;

    font-size:17px;

    line-height:1.75;

}

/*=========================================================
FINAL CTA — MAIN CONTAINER
=========================================================

LAYOUT:
Image on top
Content below

The CTA intentionally uses a stacked architecture at all
desktop and mobile resolutions.

This avoids the excessive horizontal image stretch produced
by the previous 50/50 desktop grid.

=========================================================*/

.article-final-cta{

    width:100%;

    display:flex;

    flex-direction:column;

    margin-top:120px;

    margin-bottom:30px;

    overflow:hidden;

    background:#2c2510;

    border-radius:16px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.12);

}


/*=========================================================
FINAL CTA — VISUAL SIDE
=========================================================*/

.final-cta-visual{

    position:relative;

    width:100%;

    height:clamp(
        300px,
        32vw,
        460px
    );

    min-height:300px;

    overflow:hidden;

    background:#111111;

}


/*=========================================================
FINAL CTA — IMAGE
=========================================================*/

.final-cta-visual img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.01);

}


/*=========================================================
IMAGE OVERLAY
=========================================================*/

.final-cta-visual-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(17,17,17,.04) 0%,
            rgba(17,17,17,.08) 45%,
            rgba(17,17,17,.72) 100%
        );

    pointer-events:none;

}


/*=========================================================
IMAGE LABEL
=========================================================*/

.final-cta-image-label{

    position:absolute;

    left:clamp(24px, 4vw, 48px);

    bottom:clamp(24px, 3vw, 36px);

    display:flex;

    align-items:center;

    gap:12px;

    color:#ffffff;

    font-size:11px;

    font-weight:800;

    letter-spacing:2.5px;

    text-transform:uppercase;

}

.final-cta-image-label-line{

    width:34px;

    height:2px;

    display:block;

    background:var(--domat-yellow);

}

/*=========================================================
FINAL CTA — CONTENT PANEL
=========================================================*/

.final-cta-content{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        clamp(42px, 5vw, 72px)
        clamp(28px, 6vw, 66px);

    box-sizing:border-box;

    background:#2c2510 !important;

    color:#ffffff !important;

}


/*=========================================================
CTA EYEBROW
=========================================================*/


.article-final-cta .section-eyebrow{

    margin-bottom:20px;

    color:var(--domat-yellow);

}


/*=========================================================
CTA TITLE
=========================================================*/

.article-final-cta h2{

    max-width:760px;

    margin:0;

    color:#ffffff !important;

    font-size:clamp(
        30px,
        3.2vw,
        42px
    );

    line-height:1.15;

    font-weight:800;

    letter-spacing:-.03em;

}


/*=========================================================
CTA INTRODUCTION
=========================================================*/

.final-cta-introduction{

    max-width:780px;

    margin:
        24px
        0
        40px;

    color:#d6dbe1 !important;

    font-size:clamp(
        15px,
        1.4vw,
        17px
    );

    line-height:1.8;

}


/*=========================================================
DECISION PATHS
=========================================================*/


.final-cta-paths{

    display:flex;

    flex-direction:column;

    gap:14px;

}


/*=========================================================
INDIVIDUAL PATH
=========================================================*/


.final-cta-path{

    display:grid;

    grid-template-columns:48px minmax(0,1fr);

    gap:18px;

    align-items:start;

    padding:20px 0;

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

}


.final-cta-path:last-child{

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

}


/*=========================================================
PATH NUMBER
=========================================================*/


.final-cta-path-number{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:50%;

    color:var(--domat-yellow);

    font-size:12px;

    font-weight:800;

    letter-spacing:.05em;

}


/*=========================================================
PATH CONTENT
=========================================================*/


.final-cta-path-content{

    min-width:0;

}


.final-cta-path-label{

    display:block;

    margin-bottom:7px;

    color:var(--domat-yellow);

    font-size:10px;

    line-height:1.4;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;

}


.final-cta-path h3{

    margin:0 0 10px;

    color:#ffffff;

    font-size:17px;

    line-height:1.45;

    font-weight:600;

}


/*=========================================================
SECONDARY CTA LINKS
=========================================================*/


.final-cta-secondary-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#ffffff;

    font-size:14px;

    line-height:1.4;

    font-weight:700;

    text-decoration:none;

    transition:
        color .25s ease,
        gap .25s ease;

}


.final-cta-secondary-link span{

    color:var(--domat-yellow);

    font-size:18px;

    line-height:1;

    transition:
        transform .25s ease;

}


.final-cta-secondary-link:hover{

    color:var(--domat-yellow);

}


.final-cta-secondary-link:hover span{

    transform:translateX(4px);

}


/*=========================================================
FEATURED / PRIMARY PATH
=========================================================*/


.final-cta-path-featured{

    margin-top:4px;

    padding:22px 20px;

    border:1px solid rgba(255,180,0,.35);

    background:
        rgba(255,180,0,.06);

}


.final-cta-path-featured .final-cta-path-number{

    border-color:var(--domat-yellow);

    background:var(--domat-yellow);

    color:#2c2510;

}


/*=========================================================
PRIMARY CTA BUTTON
=========================================================*/

.final-cta-primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:max-content;

    max-width:100%;

    box-sizing:border-box;

    margin-top:4px;

    padding:14px 20px;

    border-radius:5px;

    background:var(--domat-yellow) !important;

    color:#101010 !important;

    font-size:14px;

    line-height:1.3;

    font-weight:800;

    text-decoration:none !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

.final-cta-primary-button:visited{

    color:#101010 !important;

}

.final-cta-primary-button span{

    font-size:18px;

    line-height:1;

}


.final-cta-primary-button:hover{

    background:#ffc329;

    color:#101010;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(0,0,0,.25);

}


/*=========================================================
CONTACT / ADDRESS
=========================================================*/

.final-cta-contact{

    display:flex;

    align-items:flex-start;

    flex-wrap:wrap;

    gap:10px 12px;

    margin-top:34px;

    padding-top:22px;

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

}


.final-cta-contact-label{

    flex-shrink:0;

    color:var(--domat-yellow);

    font-size:10px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.final-cta-contact address{

    margin:0;

    color:#aeb7c1;

    font-size:12px;

    line-height:1.5;

    font-style:normal;

    overflow-wrap:anywhere;

}

/*=========================================================
FINAL CTA — WORDPRESS / ELEMENTOR ISOLATION
=========================================================

Purpose:
Prevent WordPress, Elementor or theme-level styles from
altering the horizontal position, width or box model of
the final CTA.

This keeps the CTA aligned exactly with .blog-main.
=========================================================*/


.domat-article .blog-main > .article-final-cta{

    position:relative;

    display:grid;

    width:100%;

    max-width:100%;

    min-width:0;

    margin-left:0 !important;

    margin-right:0 !important;

    left:0;

    right:auto;

    transform:none;

    box-sizing:border-box;

    justify-self:stretch;

    align-self:stretch;

}


/*=========================================================
FINAL CTA — GRID CHILDREN
=========================================================*/


.domat-article .article-final-cta > .final-cta-visual,
.domat-article .article-final-cta > .final-cta-content{

    min-width:0;

    max-width:100%;

    box-sizing:border-box;

}


/*=========================================================
FINAL CTA — IMAGE CONTAINMENT
=========================================================*/


.domat-article .article-final-cta .final-cta-visual{

    position:relative;

    width:100%;

    max-width:100%;

    overflow:hidden;

    box-sizing:border-box;

}


.domat-article .article-final-cta .final-cta-visual img{

    display:block;

    width:100%;

    max-width:100%;

    margin:0;

    box-sizing:border-box;

}


/*=========================================================
FINAL CTA — CONTENT CONTAINMENT
=========================================================*/


.domat-article .article-final-cta .final-cta-content{

    width:100%;

    max-width:100%;

    min-width:0;

    box-sizing:border-box;

}


/*=========================================================
FINAL CTA — WORDPRESS LINK NORMALIZATION
=========================================================*/


.domat-article .article-final-cta a{

    box-sizing:border-box;

}


/*=========================================================
FINAL CTA — ELEMENTOR COMPATIBILITY
=========================================================*/


.elementor-widget-html
.domat-article
.article-final-cta{

    width:100%;

    max-width:100%;

    margin-left:0 !important;

    margin-right:0 !important;

}


/*responsive*/

/*=========================================================
DOMAT BLOG 02
RESPONSIVE SYSTEM
=========================================================*/


/*=========================================================
TABLET / SMALL DESKTOP
=========================================================*/

@media (max-width: 1200px) {

    .blog-layout {

        grid-template-columns:
            minmax(0, 1fr);

        gap: 0;

        padding:
            70px 0
            110px;

    }


    .blog-sidebar {

        display: none;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width: 900px) {

    .blog-layout {

        width: min(
            94%,
            760px
        );

    }


    .editorial-meta {

        align-items: flex-start;

    }


    .article-title {

        font-size: clamp(
            40px,
            7vw,
            58px
        );

    }

}


/*=========================================================
MOBILE
=========================================================*/

@media (max-width: 768px) {

    .blog-layout {

        width: 92%;

        padding:
            55px 0
            85px;

    }


    .editorial-intro {

        margin-bottom: 55px;

        padding-bottom: 32px;

    }


    .editorial-meta {

        flex-direction: column;

        align-items: flex-start;

        gap: 18px;

        margin-bottom: 26px;

    }


    .article-information {

        justify-content: flex-start;

        font-size: 13px;

    }


    .article-title {

        font-size: clamp(
            36px,
            10vw,
            48px
        );

        line-height: 1.08;

        letter-spacing: -.035em;

    }


    .article-title span {

        margin-top: 8px;

    }


    .article-lead {

        margin-top: 26px;

        font-size: 18px;

        line-height: 1.8;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {

    .blog-layout {

        width: 90%;

    }


    .article-category {

        font-size: 11px;

        padding:
            7px 13px;

    }


    .article-information {

        gap: 9px;

        font-size: 12px;

    }


    .article-title {

        font-size: clamp(
            32px,
            10vw,
            40px
        );

    }


    .article-lead {

        font-size: 17px;

        line-height: 1.75;

    }

}

/*=========================================================
PART 2 — RESPONSIVE
=========================================================*/


/*=========================================================
MEDIUM DESKTOP / TABLET LANDSCAPE
=========================================================*/

@media (max-width: 1000px) {

    .strategy-grid {

        gap: 20px;

    }


    .strategy-card {

        padding: 28px;

    }


    .contextual-cta {

        align-items: flex-start;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width: 768px) {

    .article-section {

        margin-bottom: 75px;

    }


    .strategy-introduction h2 {

        font-size: clamp(
            32px,
            7vw,
            42px
        );

    }


    .strategy-introduction > p {

        font-size: 17px;

        line-height: 1.8;

    }


    .strategy-introduction > .section-lead {

        font-size: 19px;

        line-height: 1.75;

    }


    .strategy-grid {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 40px;

    }


    .strategy-card {

        padding: 26px;

    }


    .strategy-takeaway {

        align-items: flex-start;

        gap: 18px;

        padding: 26px;

    }


    .strategy-takeaway p {

        font-size: 17px;

    }


    .contextual-cta {

        flex-direction: column;

        align-items: stretch;

        gap: 24px;

        padding: 27px;

    }


    .contextual-cta-button {

        width: 100%;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {

    .strategy-card {

        gap: 16px;

        padding: 22px;

    }


    .strategy-card-number {

        width: 42px;

        height: 42px;

        font-size: 12px;

    }


    .strategy-card h3 {

        font-size: 19px;

    }


    .strategy-card p {

        font-size: 15px;

        line-height: 1.7;

    }


    .strategy-takeaway {

        flex-direction: column;

        padding: 24px;

    }


    .strategy-takeaway-icon {

        width: 46px;

        height: 46px;

    }


    .contextual-cta {

        padding: 24px;

    }


    .contextual-cta p {

        font-size: 15px;

    }


    .contextual-cta-button {

        min-height: 50px;

        padding: 14px 18px;

        font-size: 13px;

        white-space: normal;

        text-align: center;

    }

}

/*=========================================================
PART 3 — RESPONSIVE
=========================================================*/


/*=========================================================
MEDIUM DESKTOP
=========================================================*/

@media (max-width: 1000px) {

    .mobile-scenarios-grid {

        gap: 20px;

    }


    .mobile-scenario-card {

        padding: 28px;

    }


    .mobile-principle {

        padding: 34px;

        gap: 28px;

    }


    .mobile-principle-icon {

        width: 76px;

        height: 76px;

        font-size: 29px;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media (max-width: 768px) {

    .mobile-plant-section h2 {

        font-size: clamp(
            32px,
            7vw,
            42px
        );

    }


    .mobile-plant-section > p {

        font-size: 17px;

        line-height: 1.8;

    }


    .mobile-plant-section > .section-lead {

        font-size: 19px;

    }


    .mobile-scenarios-grid {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 40px;

    }


    .mobile-scenario-card {

        padding: 27px;

    }


    .mobile-principle {

        align-items: flex-start;

        padding: 30px;

    }


    .mobile-principle h3 {

        font-size: 27px;

    }


    .mobile-principle p {

        font-size: 16px;

    }


    .mobile-principle-icon {

        width: 65px;

        height: 65px;

        font-size: 25px;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media (max-width: 480px) {

    .mobile-scenario-card {

        padding: 23px;

    }


    .mobile-scenario-top {

        margin-bottom: 21px;

    }


    .mobile-scenario-icon {

        width: 48px;

        height: 48px;

        font-size: 19px;

    }


    .mobile-scenario-card h3 {

        font-size: 21px;

    }


    .mobile-scenario-card > p {

        font-size: 15px;

        line-height: 1.7;

    }


    .mobile-scenario-question {

        margin-top: 23px;

        padding-top: 19px;

    }


    .mobile-scenario-question p {

        font-size: 14px;

    }


    .mobile-principle {

        flex-direction: column;

        gap: 25px;

        padding: 25px;

    }


    .mobile-principle-icon {

        order: -1;

        width: 58px;

        height: 58px;

        font-size: 22px;

    }


    .mobile-principle h3 {

        font-size: 24px;

    }


    .mobile-principle p {

        font-size: 15px;

        line-height: 1.7;

    }

}

/*=========================================================
PART 4 — STATIONARY PLANT RESPONSIVE
=========================================================*/


/*=========================================================
MEDIUM SCREENS
=========================================================*/

@media(max-width:1000px){

    .stationary-scenarios{

        grid-template-columns:1fr;

    }


    .contextual-cta{

        align-items:flex-start;

        flex-direction:column;

        gap:25px;

    }


    .contextual-cta-button{

        align-self:flex-start;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:768px){

    .stationary-plant-section
    .section-introduction{

        font-size:19px;

        line-height:1.75;

    }


    .stationary-scenarios{

        gap:18px;

        margin-top:40px;

    }


    .stationary-scenario-card{

        gap:20px;

        padding:28px;

    }


    .stationary-scenario-number{

        flex-basis:52px;

        width:52px;

        height:52px;

        font-size:15px;

    }


    .stationary-scenario-content h3{

        font-size:21px;

    }


    .stationary-scenario-content p{

        font-size:16px;

        line-height:1.7;

    }


    .stationary-plant-takeaway{

        margin-top:40px;

        padding:28px;

    }


    .stationary-plant-takeaway p{

        font-size:17px;

    }


    .contextual-cta{

        margin-top:40px;

        padding:28px;

    }


    .contextual-cta h3{

        font-size:21px;

    }


    .contextual-cta-button{

        width:100%;

        white-space:normal;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

    .stationary-scenario-card{

        flex-direction:column;

        gap:18px;

        padding:24px;

    }


    .stationary-scenario-number{

        flex-basis:auto;

        width:48px;

        height:48px;

    }


    .stationary-scenario-content h3{

        font-size:20px;

    }


    .stationary-scenario-content p{

        font-size:15px;

    }


    .stationary-plant-takeaway{

        padding:24px;

    }


    .contextual-cta{

        padding:24px;

    }


    .contextual-cta-button{

        width:100%;

        min-height:50px;

        padding:14px 18px;

    }

}

/*=========================================================
PART 5 — PRODUCTION REQUIREMENTS RESPONSIVE
=========================================================*/


/*=========================================================
MEDIUM SCREENS
=========================================================*/

@media(max-width:1000px){

    .production-requirements-grid{

        grid-template-columns:1fr;

    }


    .production-question-list{

        grid-template-columns:1fr;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:768px){

    .production-requirements-section
    .section-introduction{

        font-size:19px;

        line-height:1.75;

    }


    .production-requirements-grid{

        gap:18px;

        margin-top:40px;

    }


    .production-requirement-card{

        gap:20px;

        padding:28px;

    }


    .production-requirement-icon{

        flex-basis:52px;

        width:52px;

        height:52px;

        font-size:19px;

    }


    .production-requirement-content h3{

        font-size:21px;

    }


    .production-requirement-content p{

        font-size:16px;

        line-height:1.7;

    }


    .production-decision-framework{

        margin-top:45px;

        padding:30px;

    }


    .production-decision-heading h3{

        font-size:24px;

    }


    .production-question-list{

        margin-top:28px;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

    .production-requirement-card{

        flex-direction:column;

        gap:18px;

        padding:24px;

    }


    .production-requirement-icon{

        flex-basis:auto;

        width:48px;

        height:48px;

        font-size:18px;

    }


    .production-requirement-content h3{

        font-size:20px;

    }


    .production-requirement-content p{

        font-size:15px;

    }


    .production-decision-framework{

        padding:24px;

    }


    .production-decision-heading h3{

        font-size:22px;

    }


    .production-question{

        gap:12px;

    }

}

/* ============================================================
   PROJECT SITUATIONS — TABLET
   ============================================================ */

@media (max-width: 900px){

    .situation-grid{

        grid-template-columns:
            1fr;

    }

    .contextual-cta{

        grid-template-columns:
            1fr;

        gap:28px;

    }

    .contextual-cta-action{

        display:flex;

        justify-content:flex-start;

    }

}


/* ============================================================
   PROJECT SITUATIONS — MOBILE
   ============================================================ */

@media (max-width: 768px){

    .situation-grid{

        gap:20px;

        margin-top:40px;

    }


    .situation-card{

        gap:20px;

        padding:28px;

    }


    .situation-card-number{

        width:46px;

        height:46px;

        font-size:15px;

    }


    .situation-card h3{

        font-size:21px;

    }


    .situation-card p{

        font-size:16px;

        line-height:1.75;

    }


    .situation-question{

        padding:16px 17px;

    }


    .contextual-cta{

        margin-top:45px;

        padding:28px;

    }


    .contextual-cta h3{

        font-size:22px;

    }


    .contextual-cta p{

        font-size:16px;

    }


    .contextual-cta-action{

        width:100%;

    }


    .secondary-cta-button{

        width:100%;

        box-sizing:border-box;

        white-space:normal;

        text-align:center;

    }

}

/* ============================================================
   FIXED PRODUCTION — TABLET
   ============================================================ */

@media (max-width: 900px){

    .fixed-scenario-grid{

        grid-template-columns:
            1fr;

    }


    .fixed-contextual-cta{

        grid-template-columns:
            1fr;

        gap:28px;

    }


    .fixed-contextual-cta-action{

        display:flex;

        justify-content:flex-start;

    }

}


/* ============================================================
   FIXED PRODUCTION — MOBILE
   ============================================================ */

@media (max-width:768px){

    .fixed-scenario-grid{

        gap:20px;

        margin-top:40px;

    }


    .fixed-scenario-card{

        gap:20px;

        padding:28px;

    }


    .fixed-scenario-icon{

        width:46px;

        height:46px;

        font-size:18px;

    }


    .fixed-scenario-card h3{

        font-size:21px;

    }


    .fixed-scenario-card p{

        font-size:16px;

        line-height:1.75;

    }


    .fixed-decision-panel{

        flex-direction:column;

        gap:20px;

        margin-top:45px;

        padding:28px;

    }


    .fixed-decision-marker span{

        width:46px;

        height:46px;

        font-size:14px;

    }


    .fixed-decision-content h3{

        font-size:22px;

    }


    .fixed-decision-content p{

        font-size:16px;

    }


    .fixed-contextual-cta{

        margin-top:45px;

        padding:28px;

    }


    .fixed-contextual-cta h3{

        font-size:22px;

    }


    .fixed-contextual-cta p{

        font-size:16px;

    }


    .fixed-contextual-cta-action{

        width:100%;

    }


    .fixed-contextual-cta-action
    .secondary-cta-button{

        width:100%;

        box-sizing:border-box;

        white-space:normal;

        text-align:center;

    }

}


/*=========================================================
MOBILITY STRATEGY — RESPONSIVE
=========================================================*/


/*=========================================================
TABLET / MEDIUM SCREENS
=========================================================*/

@media(max-width:1100px){

    .mobility-scenario-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:20px;

    }


    .mobility-scenario-card{

        gap:20px;

        padding:28px;

    }


    .mobility-scenario-content h3{

        font-size:22px;

    }


    .mobility-contextual-cta{

        grid-template-columns:
            minmax(0,1fr);

        gap:28px;

    }


    .mobility-contextual-cta-action{

        justify-content:flex-start;

    }

}



/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

    .mobility-scenario-grid{

        grid-template-columns:1fr;

        gap:18px;

        margin-top:40px;

    }


    .mobility-scenario-card{

        gap:18px;

        padding:26px;

    }


    .mobility-scenario-icon{

        flex-basis:52px;

        width:52px;

        height:52px;

        font-size:20px;

    }


    .mobility-scenario-label{

        font-size:10px;

        letter-spacing:1.7px;

    }


    .mobility-scenario-content h3{

        margin-bottom:12px;

        font-size:21px;

    }


    .mobility-scenario-content p{

        font-size:16px;

        line-height:1.75;

    }


    /*-----------------------------------------------------
      DECISION PANEL
    -----------------------------------------------------*/

    .mobility-decision-panel{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:50px;

        padding:28px 24px;

    }


    .mobility-decision-marker{

        width:58px;

        height:58px;

    }


    .mobility-decision-marker span{

        font-size:18px;

    }


    .mobility-decision-content h3{

        font-size:23px;

    }


    .mobility-decision-content p{

        font-size:16px;

        line-height:1.75;

    }


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

    .mobility-contextual-cta{

        gap:25px;

        margin-top:30px;

        padding:28px 24px;

    }


    .mobility-contextual-cta-content h3{

        font-size:22px;

    }


    .mobility-contextual-cta-content p{

        font-size:15px;

        line-height:1.75;

    }


    .mobility-contextual-cta-action{

        width:100%;

    }


    .mobility-contextual-cta .secondary-cta-button{

        width:100%;

        min-width:0;

        box-sizing:border-box;

        padding:17px 20px;

    }

}



/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

    .mobility-scenario-card{

        flex-direction:column;

        padding:24px;

    }


    .mobility-scenario-icon{

        flex-basis:auto;

        width:50px;

        height:50px;

    }


    .mobility-scenario-content h3{

        font-size:20px;

    }


    .mobility-scenario-content p{

        font-size:15.5px;

    }


    .mobility-decision-panel{

        padding:25px 20px;

    }


    .mobility-contextual-cta{

        padding:25px 20px;

    }


    .mobility-contextual-cta-content h3{

        font-size:21px;

    }

}

/*=========================================================
PLANT SELECTION FRAMEWORK
RESPONSIVE SYSTEM
=========================================================*/


/*=========================================================
TABLET / SMALL DESKTOP
=========================================================*/

@media(max-width:1100px){

    /*-----------------------------------------------------
    VARIABLE GRID
    -----------------------------------------------------*/

    .selection-variable-grid{

        grid-template-columns:1fr;

    }


    .selection-variable-card:nth-child(odd){

        border-right:0;

    }


    /*-----------------------------------------------------
    CONFIGURATION PROFILES
    -----------------------------------------------------*/

    .configuration-profile-grid{

        grid-template-columns:1fr;

    }


    .configuration-profile-card--wide{

        grid-column:auto;

    }


    /*-----------------------------------------------------
    MOBILITY
    -----------------------------------------------------*/

    .mobility-framework{

        grid-template-columns:1fr;

        gap:45px;

    }


    /*-----------------------------------------------------
    ROADMASTER
    -----------------------------------------------------*/

    .roadmaster-architecture-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .roadmaster-architecture-card:last-child{

        grid-column:1 / -1;

    }

}


/*=========================================================
TABLET
=========================================================*/

@media(max-width:900px){

    /*-----------------------------------------------------
    CONFIGURATION WIDE PROFILE
    -----------------------------------------------------*/

    .configuration-profile-wide-content{

        grid-template-columns:1fr;

        gap:30px;

    }


    /*-----------------------------------------------------
    ROADMASTER INTRO
    -----------------------------------------------------*/

    .roadmaster-selection-intro{

        grid-template-columns:1fr;

        gap:20px;

    }


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

    .roadmaster-selection-cta{

        align-items:flex-start;

        flex-direction:column;

    }


    .secondary-cta-button{

        width:auto;

    }

}


/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){


    /*-----------------------------------------------------
    SECTION
    -----------------------------------------------------*/

    .plant-selection-framework{

        margin-top:0;

    }


    /*-----------------------------------------------------
    VARIABLE GRID
    -----------------------------------------------------*/

    .selection-variable-grid{

        margin-top:40px;

    }


    .selection-variable-card{

        gap:18px;

        padding:28px 22px;

    }


    .selection-variable-number{

        width:42px;

        height:42px;

        font-size:13px;

    }


    .selection-variable-card h3{

        font-size:20px;

    }


    .selection-variable-card p{

        font-size:16px;

        line-height:1.7;

    }


    /*-----------------------------------------------------
    TRANSITION
    -----------------------------------------------------*/

    .selection-transition{

        grid-template-columns:1fr;

        gap:18px;

        margin:60px 0 70px;

    }


    .selection-transition-line{

        width:45px;

        margin:auto;

    }


    .selection-transition p{

        font-size:17px;

        line-height:1.7;

    }


    /*-----------------------------------------------------
    CONFIGURATION
    -----------------------------------------------------*/

    .configuration-heading{

        margin-bottom:35px;

    }


    .configuration-heading h3{

        font-size:28px;

    }


    .configuration-profile-card{

        padding:27px;

    }


    .configuration-profile-card h4{

        font-size:21px;

    }


    .configuration-profile-top{

        margin-bottom:20px;

    }


    .configuration-profile-type{

        font-size:9px;

        letter-spacing:1.5px;

    }


    .configuration-profile-wide-content{

        gap:25px;

    }


    /*-----------------------------------------------------
    MOBILITY
    -----------------------------------------------------*/

    .mobility-framework{

        gap:40px;

        margin-top:75px;

        padding:35px 26px;

        border-radius:8px;

    }


    .mobility-framework-content h3{

        font-size:28px;

    }


    .mobility-framework-content p{

        font-size:16px;

        line-height:1.75;

    }


    .mobility-point{

        gap:14px;

    }


    .mobility-point-icon{

        width:40px;

        height:40px;

        font-size:15px;

    }


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

    .roadmaster-selection-block{

        margin-top:75px;

        border-radius:8px;

    }


    .roadmaster-selection-header{

        align-items:flex-start;

        flex-direction:column;

        padding:35px 25px 28px;

        gap:20px;

    }


    .roadmaster-selection-header h3{

        font-size:28px;

    }


    .roadmaster-selection-tag{

        font-size:9px;

    }


    /*-----------------------------------------------------
    ROADMASTER BODY
    -----------------------------------------------------*/

    .roadmaster-selection-body{

        padding:35px 25px;

    }


    .roadmaster-architecture-grid{

        grid-template-columns:1fr;

    }


    .roadmaster-architecture-card:last-child{

        grid-column:auto;

    }


    .roadmaster-architecture-card{

        padding:25px;

    }


    /*-----------------------------------------------------
    ROADMASTER NOTE
    -----------------------------------------------------*/

    .roadmaster-selection-note{

        gap:15px;

        padding:22px 18px;

    }


    .roadmaster-selection-note p{

        font-size:15px;

        line-height:1.65;

    }


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

    .roadmaster-selection-cta{

        padding:30px 25px;

        gap:25px;

    }


    .roadmaster-selection-cta h4{

        font-size:21px;

    }


    .secondary-cta-button{

        width:100%;

        box-sizing:border-box;

        padding:17px 20px;

    }


    /*-----------------------------------------------------
    ENDPOINT
    -----------------------------------------------------*/

    .plant-selection-endpoint{

        margin-top:70px;

        padding-top:32px;

    }


    .plant-selection-endpoint h3{

        font-size:26px;

    }


    .plant-selection-endpoint p{

        font-size:16px;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){


    .selection-variable-card{

        flex-direction:column;

        gap:15px;

        padding:25px 20px;

    }


    .selection-variable-number{

        width:38px;

        height:38px;

    }


    .configuration-profile-card{

        padding:24px 21px;

    }


    .configuration-profile-top{

        align-items:flex-start;

        flex-direction:column;

        gap:12px;

    }


    .configuration-profile-type{

        text-align:left;

    }


    .mobility-framework{

        padding:30px 20px;

    }


    .roadmaster-selection-header{

        padding:30px 20px 25px;

    }


    .roadmaster-selection-body{

        padding:30px 20px;

    }


    .roadmaster-selection-cta{

        padding:28px 20px;

    }


    .plant-selection-endpoint h3{

        font-size:24px;

    }

}

/*=========================================================
FINAL CTA — RESPONSIVE
=========================================================*/


/*=========================================================
TABLET / SMALL DESKTOP
=========================================================*/


@media(max-width:1100px){

    .article-final-cta{

        grid-template-columns:
            minmax(0,0.9fr)
            minmax(0,1.1fr);

        margin-top:100px;

    }


    .final-cta-visual{

        min-height:680px;

    }


    .final-cta-content{

        padding:58px 46px;

    }


    .article-final-cta h2{

        font-size:36px;

    }


    .final-cta-introduction{

        font-size:16px;

        margin-bottom:34px;

    }

}


/*=========================================================
TABLET
=========================================================*/


@media(max-width:900px){

    .article-final-cta{

        grid-template-columns:1fr;

    }


    /* -----------------------------------------------
       Image becomes horizontal visual header
       ----------------------------------------------- */

    .final-cta-visual{

        width:100%;

        min-height:0;

        aspect-ratio:16 / 8;

    }


    .final-cta-visual img{

        width:100%;

        height:100%;

        object-fit:cover;

    }


    .final-cta-content{

        padding:56px 48px 60px;

    }


    .article-final-cta h2{

        max-width:700px;

        font-size:38px;

    }


    .final-cta-introduction{

        max-width:700px;

    }

}


/*=========================================================
MOBILE
=========================================================*/


@media(max-width:768px){

    .article-final-cta{

        width:100%;

        margin-top:80px;

        margin-bottom:20px;

        border-radius:10px;

    }


    /* -----------------------------------------------
       Controlled image ratio
       Prevents excessive vertical stretching
       ----------------------------------------------- */

    .final-cta-visual{

        aspect-ratio:16 / 9;

    }


    .final-cta-visual img{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center;

    }


    .final-cta-image-label{

        left:22px;

        bottom:20px;

        font-size:9px;

        letter-spacing:1.8px;

    }


    .final-cta-image-label-line{

        width:24px;

    }


    .final-cta-content{

        padding:44px 26px 48px;

    }


    .article-final-cta .section-eyebrow{

        margin-bottom:16px;

        font-size:10px;

        letter-spacing:2px;

    }


    .article-final-cta h2{

        font-size:30px;

        line-height:1.2;

        letter-spacing:-.02em;

    }


    .final-cta-introduction{

        margin:22px 0 34px;

        font-size:16px;

        line-height:1.75;

    }


    .final-cta-paths{

        gap:10px;

    }


    .final-cta-path{

        grid-template-columns:40px minmax(0,1fr);

        gap:14px;

        padding:18px 0;

    }


    .final-cta-path-number{

        width:36px;

        height:36px;

        font-size:10px;

    }


    .final-cta-path-label{

        font-size:9px;

        letter-spacing:1.4px;

    }


    .final-cta-path h3{

        font-size:16px;

        line-height:1.45;

    }


    .final-cta-secondary-link{

        font-size:13px;

    }


    .final-cta-path-featured{

        padding:18px 14px;

    }


    .final-cta-primary-button{

        width:100%;

        box-sizing:border-box;

        padding:15px 16px;

        text-align:center;

    }


    .final-cta-contact{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

        margin-top:28px;

        padding-top:20px;

    }


    .final-cta-contact address{

        font-size:11px;

        line-height:1.6;

    }

}


/*=========================================================
SMALL MOBILE
=========================================================*/


@media(max-width:480px){

    .article-final-cta{

        margin-top:65px;

    }


    .final-cta-visual{

        aspect-ratio:4 / 3;

    }


    .final-cta-content{

        padding:38px 20px 40px;

    }


    .article-final-cta h2{

        font-size:27px;

    }


    .final-cta-introduction{

        font-size:15px;

    }


    .final-cta-path{

        grid-template-columns:36px minmax(0,1fr);

        gap:11px;

    }


    .final-cta-path-number{

        width:32px;

        height:32px;

    }


    .final-cta-path-featured{

        padding:16px 12px;

    }


    .final-cta-primary-button{

        font-size:13px;

    }

}

/*NEW RESPONSIVES FIXING THE BLOG.CSS CODE

PRODUCTION STRATEGIES*/

/*=========================================================
RESPONSIVE — TABLET
=========================================================*/

@media(max-width:1000px){

    .project-scenario-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:22px;

    }

    .project-scenario-card{

        padding:30px;

    }

    .project-scenario-card h3{

        font-size:24px;

    }

    .project-strategy-callout{

        padding:34px;

    }

}


/*=========================================================
RESPONSIVE — MOBILE
=========================================================*/

@media(max-width:768px){

    .project-strategies-section
    .section-introduction{

        font-size:19px;

        line-height:1.75;

    }


    .project-scenario-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }


    .project-scenario-card{

        padding:28px;

    }


    .project-scenario-number{

        top:20px;

        right:22px;

    }


    .project-scenario-icon{

        width:56px;

        height:56px;

        margin-bottom:20px;

        font-size:21px;

    }


    .project-scenario-card h3{

        font-size:23px;

    }


    .project-scenario-card > p{

        font-size:16px;

        line-height:1.75;

    }


    .project-scenario-insight{

        padding:20px;

    }


    .project-strategy-callout{

        grid-template-columns:1fr;

        gap:22px;

        margin-top:50px;

        padding:28px;

    }


    .project-strategy-callout-marker{

        width:52px;

        height:52px;

        font-size:22px;

    }


    .project-strategy-callout h3{

        font-size:26px;

    }


    .project-strategy-callout-content > p{

        font-size:16px;

        line-height:1.75;

    }


    .project-strategy-question strong{

        font-size:18px;

    }

}


/*SECTION 05 READY MIX*/
/*=========================================================
RESPONSIVE — LARGE TABLET
=========================================================*/

@media(max-width:1100px){

    .readymix-model-grid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }


    .readymix-model-card:last-child{

        grid-column:
            1 / -1;

    }


    .readymix-decision-points{

        grid-template-columns:
            repeat(3,minmax(0,1fr));

    }


    .readymix-contextual-cta{

        align-items:flex-start;

    }

}


/*=========================================================
RESPONSIVE — TABLET
=========================================================*/

@media(max-width:900px){

    .readymix-decision-panel{

        grid-template-columns:1fr;

        gap:22px;

        padding:34px;

    }


    .readymix-decision-points{

        grid-template-columns:1fr;

    }


    .readymix-contextual-cta{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }


    .readymix-contextual-cta-action{

        width:100%;

    }


    .readymix-contextual-cta
    .secondary-cta-button{

        width:100%;

        box-sizing:border-box;

    }

}


/*=========================================================
RESPONSIVE — MOBILE
=========================================================*/

@media(max-width:768px){

    .readymix-producers-section
    .section-introduction{

        font-size:19px;

        line-height:1.75;

    }


    .readymix-model-grid{

        grid-template-columns:1fr;

        gap:20px;

        margin-top:40px;

    }


    .readymix-model-card{

        padding:28px;

    }


    .readymix-model-card:last-child{

        grid-column:auto;

    }


    .readymix-model-icon{

        width:54px;

        height:54px;

        font-size:20px;

    }


    .readymix-model-card h3{

        font-size:23px;

    }


    .readymix-model-card > p{

        font-size:16px;

        line-height:1.75;

    }


    .readymix-decision-panel{

        margin-top:50px;

        padding:28px;

    }


    .readymix-decision-content h3{

        font-size:26px;

    }


    .readymix-decision-content > p{

        font-size:16px;

        line-height:1.75;

    }


    .readymix-decision-point{

        padding:20px;

    }


    .readymix-contextual-cta{

        margin-top:35px;

        padding:28px;

    }


    .readymix-contextual-cta h3{

        font-size:22px;

    }


    .readymix-contextual-cta-content p{

        font-size:15px;

    }

}


/*nuevo: arreglo del CTA FINAL*/

/*=========================================================
FINAL CTA — RESPONSIVE SYSTEM
=========================================================*/


/*=========================================================
FINAL CTA — RESPONSIVE SYSTEM
=========================================================*/

/*
===========================================================
TABLET / COMPACT DESKTOP
1100px AND BELOW

At this point the two-column desktop composition
is intentionally removed.

The visual structure becomes:

IMAGE
↓
CONTENT
===========================================================
*/

@media (max-width: 1100px){

    .article-final-cta{

        display:grid;

        grid-template-columns:
            minmax(0, 1fr);

        width:100%;

        margin-top:80px;

        border-radius:12px;

        overflow:hidden;

    }


    /*=====================================================
    IMAGE — FULL WIDTH / TOP
    =====================================================*/

    .final-cta-visual{

        width:100%;

        height:clamp(
            320px,
            42vw,
            460px
        );

        min-height:320px;

        position:relative;

        overflow:hidden;

    }


    .final-cta-visual img{

        width:100%;

        height:100%;

        display:block;

        object-fit:cover;

        object-position:center;

    }


    /*=====================================================
    CONTENT — FULL WIDTH / BELOW IMAGE
    =====================================================*/

    .final-cta-content{

        width:100%;

        min-width:0;

        padding:
            56px
            48px
            48px;

    }


    .article-final-cta h2{

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

    }


    .final-cta-introduction{

        margin-top:20px;

        margin-bottom:36px;

        font-size:15px;

        line-height:1.75;

    }


    /*=====================================================
    DECISION PATHS
    =====================================================*/

    .final-cta-path{

        grid-template-columns:
            42px
            minmax(0,1fr);

        gap:16px;

        padding:20px 0;

    }


    .final-cta-path-number{

        width:40px;

        height:40px;

    }


    .final-cta-path h3{

        font-size:18px;

        line-height:1.45;

    }


    .final-cta-path-featured{

        padding:
            22px
            18px;

    }


    .final-cta-primary-button{

        max-width:100%;

    }


    /*=====================================================
    CONTACT INFORMATION
    =====================================================*/

    .final-cta-contact{

        gap:12px;

    }

}


/*=========================================================
FINAL CTA — 900px
=========================================================

This breakpoint does NOT change the layout.

The image remains ABOVE the content.

It only reduces spacing and image height so the
component remains proportionate at narrower widths.
=========================================================*/

@media (max-width: 900px){

    .article-final-cta{

        margin-top:72px;

        border-radius:12px;

    }


    /*=====================================================
    IMAGE
    =====================================================*/

    .final-cta-visual{

        height:clamp(
            300px,
            48vw,
            400px
        );

        min-height:300px;

    }


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

    .final-cta-content{

        padding:
            48px
            36px
            42px;

    }


    .article-final-cta h2{

        font-size:clamp(
            30px,
            5vw,
            38px
        );

        line-height:1.15;

    }


    .final-cta-introduction{

        margin-top:18px;

        margin-bottom:30px;

        font-size:15px;

        line-height:1.7;

    }


    /*=====================================================
    PATHS
    =====================================================*/

    .final-cta-path{

        grid-template-columns:
            40px
            minmax(0,1fr);

        gap:14px;

        padding:18px 0;

    }


    .final-cta-path-number{

        width:38px;

        height:38px;

    }


    .final-cta-path h3{

        font-size:17px;

        line-height:1.45;

    }


    .final-cta-path-featured{

        padding:
            20px
            16px;

    }

}


/*=========================================================
FINAL CTA — MOBILE
768px AND BELOW
=========================================================*/

@media (max-width: 768px){

    .article-final-cta{

        margin-top:60px;

        border-radius:12px;

    }


    /*=====================================================
    IMAGE — STILL TOP
    =====================================================*/

    .final-cta-visual{

        width:100%;

        height:clamp(
            240px,
            58vw,
            340px
        );

        min-height:240px;

    }


    /*=====================================================
    CONTENT — STILL BELOW
    =====================================================*/

    .final-cta-content{

        width:100%;

        padding:
            40px
            24px
            34px;

    }


    .article-final-cta h2{

        font-size:clamp(
            28px,
            7vw,
            34px
        );

    }


    .final-cta-introduction{

        margin-top:20px;

        margin-bottom:32px;

        font-size:15px;

        line-height:1.75;

    }


    /*=====================================================
    PATHS
    =====================================================*/

    .final-cta-path{

        grid-template-columns:
            40px
            minmax(0,1fr);

        gap:14px;

        padding:18px 0;

    }


    .final-cta-path-number{

        width:38px;

        height:38px;

    }


    .final-cta-path h3{

        font-size:16px;

    }


    .final-cta-path-featured{

        padding:
            20px
            16px;

    }


    .final-cta-primary-button{

        width:100%;

        justify-content:center;

        text-align:center;

    }


    .final-cta-contact{

        flex-direction:column;

        align-items:flex-start;

    }

}


/*=========================================================
FINAL CTA — SMALL MOBILE
480px AND BELOW
=========================================================*/

@media (max-width: 480px){

    .article-final-cta{

        margin-top:50px;

        border-radius:10px;

    }


    /*=====================================================
    IMAGE — TOP
    =====================================================*/

    .final-cta-visual{

        width:100%;

        height:240px;

        min-height:240px;

    }


    .final-cta-image-label{

        left:20px;

        bottom:20px;

        font-size:9px;

        letter-spacing:2px;

    }


    .final-cta-image-label-line{

        width:26px;

    }


    /*=====================================================
    CONTENT — BELOW IMAGE
    =====================================================*/

    .final-cta-content{

        padding:
            34px
            20px
            28px;

    }


    .article-final-cta h2{

        font-size:28px;

    }


    .final-cta-path{

        grid-template-columns:
            36px
            minmax(0,1fr);

        gap:12px;

    }


    .final-cta-path-number{

        width:34px;

        height:34px;

        font-size:10px;

    }


    .final-cta-path-featured{

        padding:
            18px
            14px;

    }

}


/*fix to TOC responsive*/


/*=========================================================
DOMAT BLOG — TOC RESPONSIVE OVERRIDE
=========================================================*/


/*=========================================================
DESKTOP
1221px AND ABOVE
=========================================================*/

@media (min-width:1221px){

    .domat-article .blog-sidebar{

        position:relative;

        width:auto;

        min-width:0;

        display:block;

        pointer-events:auto;

    }


    .domat-article .toc-panel{

        position:fixed;

        right:32px;

        bottom:32px;

        left:auto;

        top:auto;

        width:220px;

        z-index:99999;

        transform:none;

    }


    .domat-article .toc-toggle{

        width:100%;

        height:70px !important;

        min-height:70px;

        max-height:70px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:18px 22px;

        border:none;

        border-radius:14px;

        background:#f7b600;

        color:#000000;

        cursor:pointer;

        box-shadow:
            0 18px 45px rgba(0,0,0,.18);

    }

}


/*=========================================================
TABLET / SMALL DESKTOP
1220px AND BELOW
=========================================================*/

@media (max-width:1220px){

    /*
    IMPORTANT:
    The sidebar is removed from the document layout,
    but the TOC itself remains visible.
    */

    .domat-article .blog-layout{

        grid-template-columns:
            minmax(0,1fr);

        gap:0;

    }


    .domat-article .blog-sidebar{

        display:block !important;

        position:static;

        width:0 !important;

        min-width:0 !important;

        height:0;

        margin:0;

        padding:0;

        pointer-events:none;

    }


    /*
    TOC FLOATING BUTTON
    */

    .domat-article .toc-panel{

        position:fixed !important;

        left:50% !important;

        right:auto !important;

        top:auto !important;

        bottom:22px !important;

        width:auto !important;

        height:auto;

        z-index:999999 !important;

        transform:translateX(-50%) !important;

        pointer-events:auto !important;

    }


    /*
    CIRCULAR BUTTON
    */

    .domat-article .toc-toggle{

        width:64px !important;

        height:64px !important;

        min-width:64px !important;

        min-height:64px !important;

        max-width:64px !important;

        max-height:64px !important;

        padding:0 !important;

        margin:0;

        display:flex !important;

        align-items:center !important;

        justify-content:center !important;

        border:none !important;

        border-radius:50% !important;

        background:#f7b600 !important;

        color:#101010 !important;

        box-shadow:
            0 12px 35px rgba(0,0,0,.25);

    }


    /*
    HAMBURGER ICON
    */

    .domat-article .toc-toggle .toc-icon{

        display:flex !important;

        align-items:center;

        justify-content:center;

        width:100%;

        height:100%;

        font-size:24px;

        line-height:1;

    }


    /*
    HIDE "CONTENTS"
    */

    .domat-article .toc-toggle > span:not(.toc-icon){

        display:none !important;

    }


    /*
    TOC MENU
    */

    .domat-article .toc-navigation{

        position:absolute !important;

        left:50% !important;

        right:auto !important;

        bottom:78px !important;

        width:290px !important;

        max-width:
            calc(100vw - 30px);

        max-height:
            min(70vh,700px);

        overflow-y:auto;

        margin:0 !important;

        transform:
            translateX(-50%)
            translateY(15px);

    }


    /*
    OPEN STATE
    */

    .domat-article .toc-navigation.active{

        transform:
            translateX(-50%)
            translateY(0);

    }

}


/*=========================================================
TABLET
769px — 1020px
=========================================================*/

@media (min-width:769px) and (max-width:1020px){

    .domat-article .toc-panel{

        bottom:24px !important;

    }

}


/*=========================================================
MOBILE
768px AND BELOW
=========================================================*/

@media (max-width:768px){

    .domat-article .toc-panel{

        bottom:
            max(16px, env(safe-area-inset-bottom))
            !important;

    }


    .domat-article .toc-toggle{

        width:60px !important;

        height:60px !important;

        min-width:60px !important;

        min-height:60px !important;

        max-width:60px !important;

        max-height:60px !important;

    }


    .domat-article .toc-toggle .toc-icon{

        font-size:22px;

    }


    .domat-article .toc-navigation{

        bottom:74px !important;

        width:290px !important;

        max-width:
            calc(100vw - 24px);

    }

}


/*=========================================================
SMALL MOBILE
480px AND BELOW
=========================================================*/

@media (max-width:480px){

    .domat-article .toc-panel{

        bottom:
            max(14px, env(safe-area-inset-bottom))
            !important;

    }


    .domat-article .toc-toggle{

        width:56px !important;

        height:56px !important;

        min-width:56px !important;

        min-height:56px !important;

        max-width:56px !important;

        max-height:56px !important;

    }


    .domat-article .toc-toggle .toc-icon{

        font-size:21px;

    }


    .domat-article .toc-navigation{

        bottom:68px !important;

        width:280px !important;

        max-width:
            calc(100vw - 20px);

    }

}/* End custom CSS */