/* home: page-specific styles extracted from resources/views/home.blade.php. */
/* =========================================================
        HOME PAGE LOCAL OVERRIDES
        - keeps existing design
        - fixes Make-the-switch plane containment
        - aligns the six agency feature cards
        - replaces slide-in text with fixed-position write reveal
        ========================================================= */

        .agency-vibe-card .agency-vibe-text{
         color: #d0cfcf;
        }

     .draggable .slick-track{
        gap:12px !important;
     }

     /* ---------- Make the switch: keep plane inside dark section ---------- */
     .sm-switch-container{
        position:relative;
        overflow:clip !important;
     }

     .sm-switch-container > .container > .row{
        align-items:flex-start;
     }

     .sm-switch-left{
        position:sticky;
        top:90px;
        align-self:flex-start;
        z-index:3;
     }

     .sm-switch-container .sm-plane-icon.setimggoogle{
        display:block !important;
        position:relative !important;
        inset:auto !important;
        width:min(330px, 92%) !important;
        height:auto !important;
        max-height:290px !important;
        object-fit:contain;
        margin:28px 0 0 !important;
        opacity:1 !important;
        visibility:visible !important;
        z-index:4;
     }

     .setimggoogle{
        max-width:100%;
     }

     /* ---------- Six feature cards: exact icon / title / copy alignment ---------- */
     .agency-vibe-section .row.g-4 > [class*="col-"]{
        display:flex;
     }

     .agency-vibe-card{
        width:100%;
        height:100%;
        min-width:0;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding:18px clamp(14px, 2vw, 26px) 24px;
        overflow:visible;
     }

     .agency-vibe-icon-stage{
        width:100%;
        min-height:176px;
        display:flex;
        align-items:center;
        justify-content:center;
        margin:0 0 18px;
        flex:0 0 auto;
        overflow:hidden;
     }

     .agency-vibe-icon-stage .agency-img-fluid{
        display:block !important;
        width:min(100%, 250px) !important;
        height:168px !important;
        max-width:100% !important;
        max-height:168px !important;
        object-fit:contain !important;
        object-position:center !important;
        margin:0 auto !important;
        flex:none;
     }

     .agency-vibe-heading{
        width:100%;
        min-height:0;
        margin:0 0 12px !important;
        line-height:1.18 !important;
        text-wrap:balance;
        overflow-wrap:anywhere;
        word-break:normal;
     }

     .agency-vibe-text{
        width:100%;
        max-width:390px;
        margin:0 auto !important;
        line-height:1.62 !important;
        overflow-wrap:anywhere;
        word-break:normal;
     }

     /* ---------- Robust text animation baseline ----------
        IMPORTANT: content stays visible by default. JavaScript only adds
        a temporary reveal animation when the element enters the viewport.
        If JavaScript/IntersectionObserver fails, no text can remain hidden. */
     .addanimation,
     .addanimation1,
     .sm-write-animation{
        opacity:1 !important;
        visibility:visible !important;
        transform:none !important;
        translate:none !important;
        transition:none !important;
        animation:none !important;
     }

     .sm-icon-animation{
        opacity:1;
        visibility:visible;
     }

     /* During a JS reveal, keep the element in its exact layout position. */
     .sm-reveal-running{
        will-change:clip-path;
     }

     @media (max-width:991.98px){
        .sm-switch-left{
           position:relative;
           top:auto;
        }

        .agency-vibe-icon-stage{
           height:170px;
           flex-basis:170px;
        }

        .agency-vibe-icon-stage .agency-img-fluid{
           max-width:220px !important;
           max-height:160px !important;
        }
     }

     @media (max-width:767px){
        .agency-vibe-section .row.mb-5{
           margin-bottom:24px !important;
        }

        .agency-vibe-card{
           padding:6px 10px 26px;
        }

        .agency-vibe-icon-stage{
           height:150px;
           flex-basis:150px;
           margin-bottom:10px;
        }

        .agency-vibe-icon-stage .agency-img-fluid{
           max-width:205px !important;
           max-height:145px !important;
        }

        .agency-vibe-heading{
           min-height:0;
           margin-bottom:8px !important;
        }

        .agency-vibe-text{
           max-width:520px;
        }
     }

     /* ---------- Trusted logos: consistent optical sizing without stretching ---------- */
     .ts-custom-trusted-section .ts-card{
        width:240px !important;
        height:126px !important;
        padding:14px 18px !important;
        border-radius:14px !important;
     }
     .ts-custom-trusted-section .ts-card .ts-logo-canvas{
        width:100%;
        height:82px;
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
     }
     .ts-custom-trusted-section .ts-card img{
        width:calc(100% * var(--logo-scale, .82)) !important;
        height:78px !important;
        max-width:100% !important;
        max-height:78px !important;
        object-fit:contain !important;
        object-position:center !important;
        margin:0 auto !important;
     }

     /* Accessibility: always show content for reduced-motion users. */
     @media (prefers-reduced-motion:reduce){
        .addanimation,
        .addanimation1,
        .sm-write-animation,
        .sm-icon-animation{
           opacity:1 !important;
           visibility:visible !important;
           clip-path:none !important;
           transform:none !important;
           transition:none !important;
           animation:none !important;
        }
     }

     /* =========================================================
        DESKTOP RESPONSIVE FIX - MAKE THE SWITCH
        Prevents feature text/images from overlapping on
        1024px, 1280px, 1366px, 1440px and wider desktop screens.
        Mobile/tablet rules below remain unchanged.
        ========================================================= */
     @media (min-width:992px){
        .sm-switch-container,
        .sm-switch-container *{
           box-sizing:border-box;
        }

        .sm-switch-container > .container{
           width:100%;
           max-width:1320px;
           padding-left:clamp(18px, 2.4vw, 38px);
           padding-right:clamp(18px, 2.4vw, 38px);
        }

        .sm-switch-container > .container > .row{
           --bs-gutter-x:clamp(26px, 3.2vw, 52px);
           align-items:flex-start !important;
        }

        /* Both Bootstrap columns are allowed to shrink correctly. */
        .sm-switch-container .sm-switch-left,
        .sm-switch-container .col-lg-7{
           min-width:0;
        }

        /*
         * Important:
         * The feature block uses a real grid instead of relying on
         * fixed/absolute widths. Because text and artwork own separate
         * grid columns, they can never occupy the same horizontal space.
         */
        .sm-switch-container .sm-feature-block,
        .sm-switch-container .sm-feature-block.reverse{
           position:relative !important;
           inset:auto !important;
           left:auto !important;
           right:auto !important;
           top:auto !important;
           bottom:auto !important;
           transform:none !important;

           display:grid !important;
           align-items:center !important;
           width:100% !important;
           max-width:100% !important;
           min-width:0 !important;
           height:auto !important;
           min-height:0 !important;

           column-gap:clamp(20px, 2.5vw, 38px);
           row-gap:18px;
           margin-left:0 !important;
           margin-right:0 !important;
           margin-bottom:clamp(58px, 7vw, 96px) !important;
           padding-left:0 !important;
           padding-right:0 !important;
           overflow:visible !important;
        }

        /* Normal blocks: text | image */
        .sm-switch-container .sm-feature-block{
           grid-template-columns:minmax(0, 1.08fr) minmax(190px, .92fr);
        }

        /* Reverse blocks already have image first in the HTML: image | text */
        .sm-switch-container .sm-feature-block.reverse{
           grid-template-columns:minmax(190px, .92fr) minmax(0, 1.08fr);
        }

        .sm-switch-container .sm-feature-block > .sm-feature-content,
        .sm-switch-container .sm-feature-block > .sm-feature-img{
           order:0 !important;
           float:none !important;
        }

        .sm-switch-container .sm-feature-content{
           position:relative !important;
           inset:auto !important;
           left:auto !important;
           right:auto !important;
           top:auto !important;
           bottom:auto !important;
           transform:none !important;

           width:auto !important;
           max-width:none !important;
           min-width:0 !important;
           margin:0 !important;
           padding:0 !important;
           z-index:2;
        }

        .sm-switch-container .sm-feature-title,
        .sm-switch-container .sm-feature-text{
           position:relative !important;
           left:auto !important;
           right:auto !important;
           top:auto !important;
           bottom:auto !important;
           transform:none !important;
           width:100% !important;
           max-width:100% !important;
           min-width:0 !important;
           overflow-wrap:break-word;
           word-break:normal;
        }

        .sm-switch-container .sm-feature-img,
        .sm-switch-container .sm-feature-img.setotherwidth{
           position:relative !important;
           inset:auto !important;
           left:auto !important;
           right:auto !important;
           top:auto !important;
           bottom:auto !important;
           transform:none !important;

           width:100% !important;
           max-width:310px !important;
           min-width:0 !important;
           height:auto !important;
           margin:0 auto !important;
           padding:0 !important;
           justify-self:center;
           align-self:center;
           z-index:1;
        }

        .sm-switch-container .sm-feature-img img,
        .sm-switch-container .sm-feature-img.setotherwidth img{
           display:block !important;
           position:static !important;
           inset:auto !important;
           transform:none !important;
           width:100% !important;
           max-width:100% !important;
           height:auto !important;
           max-height:340px !important;
           margin:0 auto !important;
           object-fit:contain !important;
        }

        /* Protect against any old special positioning class. */
        .sm-switch-container .sm-feature-block.setposition{
           position:relative !important;
           inset:auto !important;
           transform:none !important;
        }
     }

     /*
      * Compact desktop / small laptop.
      * Bootstrap switches to col-lg at 992px, so this is the range where
      * overlap happened most often. Artwork is reduced and text scales
      * down slightly while the desktop two-column section is preserved.
      */
     @media (min-width:992px) and (max-width:1199.98px){
        .sm-switch-container .sm-feature-block{
           grid-template-columns:minmax(0, 1fr) minmax(170px, 205px);
           column-gap:18px;
        }

        .sm-switch-container .sm-feature-block.reverse{
           grid-template-columns:minmax(170px, 205px) minmax(0, 1fr);
           column-gap:18px;
        }

        .sm-switch-container .sm-feature-img,
        .sm-switch-container .sm-feature-img.setotherwidth{
           max-width:205px !important;
        }

        .sm-switch-container .sm-feature-img img,
        .sm-switch-container .sm-feature-img.setotherwidth img{
           max-height:245px !important;
        }

        .sm-switch-container .sm-feature-title{
           font-size:clamp(27px, 3vw, 34px) !important;
           line-height:1.12 !important;
           margin-bottom:12px !important;
        }

        .sm-switch-container .sm-feature-text{
           font-size:clamp(16px, 1.85vw, 20px) !important;
           line-height:1.48 !important;
        }
     }

     /* Mid-size desktop: keep artwork proportional without crowding text. */
     @media (min-width:1200px) and (max-width:1399.98px){
        .sm-switch-container .sm-feature-img,
        .sm-switch-container .sm-feature-img.setotherwidth{
           max-width:265px !important;
        }
     }

     /* =========================================================
        FEATURE 1 DESKTOP FIX
        - makes the expert/boy artwork larger
        - places the related heading + paragraph BELOW the artwork
        - copy stays under the board side (not under the boy side)
        - normal document flow prevents text/image overlap
        ========================================================= */
     @media (min-width:992px){

        /* Only the first "Managed by experts" feature */
        .sm-switch-container .sm-feature-block.setposition{
           display:grid !important;
           grid-template-columns:minmax(0, 1fr) !important;
           grid-template-areas:
              "expert-visual"
              "expert-copy" !important;
           align-items:start !important;
           justify-items:center !important;
           column-gap:0 !important;
           row-gap:clamp(6px, .8vw, 14px) !important;

           width:100% !important;
           max-width:100% !important;
           min-width:0 !important;
           height:auto !important;
           overflow:visible !important;
        }

        /* Put the boy/board image FIRST even though it is second in the HTML */
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-img.setotherwidth{
           grid-area:expert-visual !important;
           order:1 !important;

           width:min(100%, 540px) !important;
           max-width:540px !important;
           min-width:0 !important;
           height:auto !important;

           margin:0 auto !important;
           padding:0 !important;

           position:relative !important;
           inset:auto !important;
           transform:none !important;

           justify-self:center !important;
           align-self:start !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-img.setotherwidth img{
           display:block !important;
           position:static !important;

           width:100% !important;
           max-width:100% !important;
           height:auto !important;
           max-height:none !important;

           object-fit:contain !important;
           margin:0 auto !important;
           transform:none !important;
        }

        /*
         * Copy comes BELOW the illustration.
         * The right margin keeps it visually under the board/cloud side,
         * while leaving the boy side visually clear.
         */
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           grid-area:expert-copy !important;
           order:2 !important;

           width:min(72%, 430px) !important;
           max-width:430px !important;
           min-width:0 !important;

           margin:0 21% 0 0 !important;
           padding:0 !important;

           position:relative !important;
           inset:auto !important;
           transform:none !important;

           justify-self:center !important;
           align-self:start !important;
           z-index:2;
           text-align:center !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-title,
        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-text{
           width:100% !important;
           max-width:100% !important;
           margin-left:0 !important;
           margin-right:0 !important;
           text-align:center !important;
           position:relative !important;
           inset:auto !important;
           transform:none !important;
           overflow-wrap:break-word;
        }

        /* Bootstrap utility must not force this first title to another alignment */
        .sm-switch-container .sm-feature-block.setposition
        .text-lg-end{
           text-align:center !important;
        }
     }

     /* 1024 / small laptop desktop */
     @media (min-width:992px) and (max-width:1199.98px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-img.setotherwidth{
           width:min(100%, 370px) !important;
           max-width:370px !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           width:min(76%, 315px) !important;
           max-width:315px !important;
           margin-right:18% !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-title{
           font-size:clamp(26px, 2.9vw, 32px) !important;
           line-height:1.12 !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-text{
           font-size:clamp(16px, 1.75vw, 19px) !important;
           line-height:1.45 !important;
        }
     }

     /* 1200–1399 desktop */
     @media (min-width:1200px) and (max-width:1399.98px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-img.setotherwidth{
           width:min(100%, 465px) !important;
           max-width:465px !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           width:min(73%, 385px) !important;
           max-width:385px !important;
           margin-right:20% !important;
        }
     }

     /* Large desktop */
     @media (min-width:1400px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-img.setotherwidth{
           width:min(100%, 540px) !important;
           max-width:540px !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           width:min(72%, 430px) !important;
           max-width:430px !important;
           margin-right:21% !important;
        }
     }

     /* =========================================================
        FINAL DESKTOP GAP FIX - MANAGED BY EXPERTS
        The standboy.webp artwork is a square canvas: the board is
        at the top/left and the boy continues lower on the right.
        Pulling ONLY the copy upward uses the naturally empty area
        below the board, so the board -> text relationship is clear
        without touching the visible boy/board artwork.
        ========================================================= */
     @media (min-width:992px){
        .sm-switch-container .sm-feature-block.setposition{
           row-gap:0 !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           /* Default desktop: move copy into the clear space below board */
           margin-top:-170px !important;
           margin-bottom:0 !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-title{
           margin-top:0 !important;
           margin-bottom:14px !important;
        }

        .sm-switch-container .sm-feature-block.setposition
        .sm-feature-text{
           margin-top:0 !important;
           margin-bottom:0 !important;
        }
     }

     /* Small desktop / 1024-ish laptop */
     @media (min-width:992px) and (max-width:1199.98px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           margin-top:-118px !important;
           margin-right:18% !important;
        }
     }

     /* 1200 - 1399 desktop */
     @media (min-width:1200px) and (max-width:1399.98px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           margin-top:-155px !important;
           margin-right:20% !important;
        }
     }

     /* 1400+ desktop */
     @media (min-width:1400px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           margin-top:-205px !important;
           margin-right:21% !important;
        }
     }

     /* Very wide desktops: do not keep increasing the negative offset */
     @media (min-width:1800px){
        .sm-switch-container .sm-feature-block.setposition
        > .sm-feature-content{
           margin-top:-210px !important;
        }
     }