.hero{

    position:relative;

    overflow:hidden;

    height:100dvh;

    min-height:850px;

    background:#2B2B2B;

    display:flex;

    align-items:center;

   padding-top:50px;
padding-right:417px;
padding-bottom:156px;
padding-left:10px; /* Navbar height */

}

/* ==========================
   Hero Heading
========================== */

.min_header{
    font-family: "Carisma Classic", serif;
    font-weight: normal;
    font-size: 64px;
    line-height: 130%;
    letter-spacing: 0;
    color: #FFFFFF;
    margin-bottom: 32px;
    white-space: nowrap;
    opacity:0;
    transform:translateY(60px);
    animation: heroTitle 1s ease forwards;
    animation-delay: .5s;
}
.min_header .apostrophe {
    font-family: "Inter", sans-serif;
}


.hero-content{position:relative;z-index:5;width:100%;}
.left{
    position:relative;
    z-index:5;

    width:100%;
    max-width:760px;
}
.left .hero-description { width:928px; height:78px; }
.hero-btn 
{ display:inline-flex; 
    align-items:center; 
    justify-content:center;
     padding:20px 20px;
      
       color:#fff; 
       background:linear-gradient(90deg,#fe6b3d,#ef3176,#7b2cbf);
        font:500 22px/1 Inter,sans-serif; 
        text-decoration:none;
         transition:.4s; }
         .hero-btn:hover
          { transform:translateY(-6px);
             box-shadow:0 20px 45px rgba(239,49,118,.35); }
.left p{

font-family:"Inter";

font-size:20px;

font-weight:500;

line-height:130%;

letter-spacing:0;

color:#E4E4E4;

max-width:900px;
max-height:max-content;

margin-bottom:48px;


}
.hero::before{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(circle at 20% 30%,rgba(239,49,118,.10),transparent 40%),
radial-gradient(circle at 80% 70%,rgba(123,44,191,.10),transparent 40%);

animation:heroGlow 10s ease-in-out infinite alternate;

}
.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:20px 44px;

font-size:22px;

font-weight:600;

border-radius:0;

background:linear-gradient(90deg,#FE6B3D,#EF3176,#7B2CBF);

transition:.4s;

}
.hero-btn:hover{

transform:translateY(-6px);

box-shadow:0 20px 45px rgba(239,49,118,.35);

}

/* Preserves the desktop spacing without using empty line-break elements. */
.mobile-line-break{
    display:none;
}

/* Shown only on phones so desktop and laptop process titles stay unchanged. */
.process-mobile-break{
    display:none;
}

.hero-button-gap{
    display:block;
    height:48px;
}

/*=================================================
        WHY BRAND & THOUGHT CO.
==================================================*/

.why{

    background:linear-gradient(
        90deg,
       #FE7028 0%, #EF3176 50%, #A025A1 100%, #5B2CB0
    );

    width:100%;

    padding:80px 96px;

    text-align:center;

}

.why .container{

    max-width:1248px;

    margin:auto;

}

/* Heading */

.why h2{

    font-family:"Inter",sans-serif;

    font-weight:600;

    font-size:40px;

    line-height:130%;

    letter-spacing:0;

    color:#FFFFFF;

    margin-bottom:12px;

}

/* Subtitle */

.why p{

    font-family:"Inter",sans-serif;

    font-weight:400;

    font-size:18px;

    line-height:130%;

    color:#FFFFFF;

    margin-bottom:40px;

}

/* Feature Row */

.features{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    flex-wrap:nowrap;

}

/* Text */

.features span{

    font-family:"Inter",sans-serif;

    font-size:18px;

    font-weight:500;

    color:#FFFFFF;

    white-space:nowrap;

}

/* Arrow */

.features .arrow{

    font-size:26px;

    font-weight:300;

}
/* =========================================================
   INDUSTRIES WE SERVE
========================================================= */

/* =========================================================
   INDUSTRIES WE SERVE
========================================================= */

.industries {
    width: 100%;
    background: #fff7f8;

    padding-top: 80px;
    padding-right: 96px;
    padding-bottom: 90px;
    padding-left: 96px;
}


/* SAME WIDTH AS SERVICES / DIGITAL MARKETING */

.industries .container {
    width: 100%;
    max-width: 1248px;

    margin: 0 auto;
}


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

.industries h2 {
    margin: 0 0 14px;

    font-family: "Inter", sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: 0;

    color: #222;
    text-align: center;
}


.industry-subtitle {
    margin: 0 auto 42px;

    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 500;
    font-style: normal;
    line-height: 130%;
    letter-spacing: 0;

    color: #888;
    text-align: center;
}


/* =========================================================
   CAROUSEL
========================================================= */

.industry-carousel {
    width: 100%;
    max-width: 1248px;

    margin: 0 auto;

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

    gap: 28px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.industry-viewport {
    width: 1200px;

    overflow: hidden;

    padding: 10px 0 20px;

    flex-shrink: 0;
}


/* =========================================================
   MOVING TRACK
========================================================= */

.industry-track {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    width: max-content;

    will-change: transform;
}


/* =========================================================
   INDUSTRY CARD
========================================================= */

.industry-card {
    flex: 0 0 200px;

    width: 200px;

    text-align: center;

    background: transparent;

    color: #111;

    border: none;

    padding: 0;

    margin: 0;

    cursor: pointer;
}


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

.industry-image {
    width: 200px;
    height: 200px;

    overflow: hidden;

    border-radius: 18px;

    background: #eee;

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.45s ease;
}


.industry-image img {
    width: 200px;
    height: 200px;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s cubic-bezier(.22, 1, .36, 1);
}


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

.industry-card:hover .industry-image {
    transform: translateY(-6px) scale(1.02);

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.14);
}


.industry-card:hover .industry-image img {
    transform: scale(1.06);
}


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

.industry-card h3 {
    margin: 18px 0 0;

    font-family: "Inter", sans-serif;

    font-size: 20px;
    font-weight: 500;

    line-height: 130%;
    letter-spacing: 0;

    color: #111;

    text-align: center;
}


/* =========================================================
   ARROWS
========================================================= */

.industry-arrow {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    min-width: 48px;
    min-height: 48px;

    padding: 0;

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

    border: 1px solid rgba(0, 0, 0, 0.12);

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-family: "Inter", sans-serif;
    font-size: 23px;
    font-weight: 400;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.07);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


.industry-arrow span {
    display: block;

    line-height: 1;

    transition: transform 0.3s ease;
}


.industry-prev:hover {
    transform: translateX(-4px);

    background: #111;
    color: #fff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.14);
}


.industry-prev:hover span {
    transform: translateX(-2px);
}


.industry-next:hover {
    transform: translateX(4px);

    background: #111;
    color: #fff;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.14);
}


.industry-next:hover span {
    transform: translateX(2px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .industries {
        padding-left: 40px;
        padding-right: 40px;
    }

    .industry-carousel {
        gap: 20px;
    }

    .industry-viewport {
        width: calc(100vw - 160px);
        max-width: 1000px;
    }

}


@media (max-width: 900px) {

    .industries {
        padding-left: 24px;
        padding-right: 24px;
    }

    .industry-viewport {
        width: 680px;
    }

}


@media (max-width: 760px) {

    .industries {
        padding: 65px 20px 70px;
    }

    .industries h2 {
        font-size: 34px;
    }

    .industry-subtitle {
        font-size: 18px;
    }

    .industry-viewport {
        width: 440px;
    }

    .industry-carousel {
        gap: 12px;
    }

}


@media (max-width: 540px) {

    .industries {
        padding-left: 16px;
        padding-right: 16px;
    }

    .industries h2 {
        font-size: 30px;
    }

    .industry-subtitle {
        font-size: 16px;
    }

    .industry-viewport {
        width: 200px;
    }

    .industry-carousel {
        gap: 8px;
    }

    .industry-arrow {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

}
/*==========================================================
                    OUR PROCESS
==========================================================*/

/*==========================================================
                    OUR PROCESS
==========================================================*/

.process{
    width:100%;
    background:#2B2B2B;
    padding:88px 96px 100px;
}

.process .container{
    max-width:1248px;
    margin:0 auto;
}

/*==========================
        Heading
==========================*/

.process h2{
    font-family:"Inter",sans-serif;
    font-size:40px;
    font-weight:600;
    line-height:130%;
    color:#fff;
    text-align:center;
    margin-bottom:16px;
}

.process-subtitle{
    max-width:640px;
    margin:0 auto 64px;

    font-family:"Inter",sans-serif;
    font-size:16px;
    font-weight:500;
    line-height:130%;

    color:#8A8A8A;
    text-align:center;
}

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

.process-grid{
    display:grid;
    grid-template-columns:repeat(4,288px);
    justify-content:center;
    column-gap:32px;
    row-gap:32px;
}

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

.process-card{
    width:288px;
    min-height:169px;

    background:#2F2F2F;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;

    padding:24px;

    position:relative;
    overflow:hidden;

    transition:.4s ease;

    display:flex;
    flex-direction:column;
}

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

.process-card img{
    width:70px;
    height:70px;
    margin-bottom:18px;

    transition:.5s;
    animation:floatIcon 4s ease-in-out infinite;
}

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

.process-number{
    font-family:"Inter",sans-serif;
    font-size:20px;
    font-weight:500;

    color:#808080;

    margin-bottom:12px;
}

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

.process-title{
    font-family:"Inter";
    font-size:24px;
    font-weight:500;
    line-height:130%;
    color:#fff;
}

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

.process-card:hover{
    transform:translateY(-8px);
    background:#343434;
    border-color:#555;
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.process-card:hover img{
    transform:rotate(12deg) scale(1.1);
}

.process-card::after{
    content:"";
    position:absolute;
    left:24px;
    bottom:0;

    width:0;
    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #FE7028,
        #EF3176,
        #7B2CBF
    );

    transition:.4s;
}

.process-card:hover::after{
    width:90px;
}

/*==========================
      FLOAT ANIMATION
==========================*/

@keyframes floatIcon{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

.process-card:nth-child(2) img{animation-delay:.5s;}
.process-card:nth-child(3) img{animation-delay:1s;}
.process-card:nth-child(4) img{animation-delay:1.5s;}
.process-card:nth-child(5) img{animation-delay:2s;}
.process-card:nth-child(6) img{animation-delay:2.5s;}
.process-card:nth-child(7) img{animation-delay:3s;}
.process-card:nth-child(8) img{animation-delay:3.5s;}

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

@media(max-width:1200px){

.process{
    padding:80px 24px;
}

.process-grid{
    grid-template-columns:repeat(2,288px);
    gap:24px;
}

.process h2{
    font-size:42px;
}

.process-subtitle{
    width:100%;
}

}

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

@media(max-width:768px){

.process-grid{
    grid-template-columns:1fr;
}

.process-card{
    width:100%;
    max-width:340px;
    margin:auto;
}

.process h2{
    font-size:34px;
}

.process-subtitle{
    font-size:16px;
}

}
/* ==========================================================OUR CORE SERVICES PART 1 =========================================================== */



/*==========================================
        OUR CORE SERVICES TITLE
==========================================*/

.services{

    background:#fff;

    padding-top:100px;

    padding-right:96px;

    padding-bottom:20px;

    padding-left:96px;

}

.services .container{

    max-width:1248px;

    margin:auto;

}

.services h2{

    font-family:"Inter",sans-serif;

    font-weight:600;

    font-size:40px;

    line-height:130%;

    letter-spacing:0;

    color:#111111;

    text-align:center;

    margin-bottom:18px;

}

.services .subtitle{

    font-family:"Inter",sans-serif;

    font-weight:500;

    font-size:16px;

    line-height:130%;

    letter-spacing:0;

    color:#8A8A8A;

    text-align:center;

    max-width:900px;

    margin:0 auto 60px;

}

/* Service Row */
/*==========================================
        SERVICE ROW
==========================================*/

.service-box{

    display:grid;

    grid-template-columns:420px 1fr;

    align-items:center;

    gap:100px;

    margin-bottom:60px;
    opacity:0;
    transform:translateY(100px) scale(.95);
    transition:1s cubic-bezier(.22,1,.36,1);
}

.service-box.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

.service-img{
    overflow:hidden;
}

.service-img img{
    width:100%;
    max-width:450px;
    transition:1.2s ease;
    transform:scale(.8) rotate(-8deg);
}

.service-box.show .service-img img{
    transform:scale(1) rotate(0deg);
}
.service-content h3,
.service-content p,
.service-content li{

    opacity:0;
    transform:translateX(40px);
    transition:.8s ease;
}

.service-box.show h3{
    opacity:1;
    transform:translateX(0);
    transition-delay:.2s;
}

.service-box.show p{
    opacity:1;
    transform:translateX(0);
    transition-delay:.4s;
}

.service-box.show li{
    opacity:1;
    transform:translateX(0);
}

.service-box.show li:nth-child(1){
    transition-delay:.55s;
}

.service-box.show li:nth-child(2){
    transition-delay:.65s;
}

.service-box.show li:nth-child(3){
    transition-delay:.75s;
}

.service-box.show li:nth-child(4){
    transition-delay:.85s;
}

.services .service-box:last-child{

    margin-bottom:20px;

}

/* Alternate Layout */

.service-box:nth-child(even){

    grid-template-columns:1fr 420px;

}

.service-box:nth-child(even) .service-img{

    order:2;

}

.service-box:nth-child(even) .service-content{

    order:1;

}

/* Image */

.service-img{

    display:flex;

    justify-content:center;

    align-items:center;

}

.service-img img{

    width:100%;

    max-width:450px;

    height:auto;

    object-fit:contain;

}

/* Text */

.service-content h3{

    font-family:"Inter",sans-serif;

    font-size:28px;

    font-weight:700;

    color:#111;

    margin-bottom:24px;

}

.service-content p{

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:165%;

    color:#555;

    margin-bottom:28px;

}

.service-content ul{

    list-style:none;

}

.service-content li{

    font-family:"Inter",sans-serif;

    font-size:16px;

    font-weight:500;

    color:#555;

    margin-bottom:16px;

}

.service-content ul li::before{

    content:"✓ ";

    color:#ff4b85;

    font-weight:bold;

}

/* Mobile */

@media (max-width:991px){

.service-box{

grid-template-columns:1fr;

gap:50px;

text-align:center;

margin-bottom:90px;

}


.service-box:nth-child(even){

grid-template-columns:1fr;

}

.service-box:nth-child(even) .service-img,

.service-box:nth-child(even) .service-content{

order:unset;

}

.service-img img{

max-width:280px;

}

}



/*==========================================================
                CLIENT ENGAGEMENT MODEL
==========================================================*/

.engagement{

    background:#FFFFFF;

    padding:100px 96px;

}

.engagement .container{

    max-width:1248px;

    margin:auto;

}
.engagement-card p{

color:#666;

line-height:170%;

font-size:16px;

}
/*==========================
        Heading
===========================*/

.engagement h2{

    font-family:"Inter",sans-serif;

    font-weight:600;

    font-size:40px;

    line-height:130%;

    letter-spacing:0;

    text-align:center;

    color:#111111;

    margin-bottom:18px;

}
.engagement-card h3{

transition:.35s;

}

.engagement-card:hover h3{

color:#EF3176;

letter-spacing:.5px;

}
/*==========================
        Subtitle
===========================*/

.engagement-subtitle{

    font-family:"Inter",sans-serif;

    font-weight:500;

    font-size:16px;

    line-height:130%;

    letter-spacing:0;

    text-align:center;

    color:#8A8A8A;

    margin-bottom:90px;

}

/*==========================
        Grid
===========================*/

.engagement-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:90px;

}

/*==========================
        Item
===========================*/

.engagement-item{

    display:flex;

    align-items:flex-start;

    gap:30px;

    position:relative;

    padding:12px 0 35px;

    margin-bottom:35px;

    transition:.4s ease;

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s forwards;

}
.engagement-card{

    display:flex;
    align-items:flex-start;
    gap:24px;

    padding:30px;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:18px;

    position:relative;

    overflow:hidden;

    transition:.45s cubic-bezier(.22,1,.36,1);

    box-shadow:0 8px 25px rgba(0,0,0,.04);

}
.engagement-card{

opacity:0;

transform:translateY(60px);

transition:
1s cubic-bezier(.22,1,.36,1);

}

.engagement-card.show{

opacity:1;

transform:translateY(0);

}
.engagement-card:hover{

    transform:translateY(-10px);

    border-color:#EF3176;

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

}
.engagement-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:linear-gradient(
90deg,
#FE7028,
#EF3176,
#7B2CBF);

transition:.45s;

}

.engagement-card:hover::after{

width:100%;

}

/*==========================
        SVG Icon
===========================*/

.engagement-card img{

width:68px;

transition:.45s;

}

.engagement-card:hover img{

transform:

scale(1.1)

rotate(8deg);

filter:

drop-shadow(0 0 12px rgba(239,49,118,.35));

}

/*==========================
        Content
===========================*/

.engagement-content{

    flex:1;

}

/*==========================
        Heading
===========================*/

.engagement-card h3{

    font-family:"Inter",sans-serif;

    font-weight:600;

    font-size:32px;

    line-height:100%;

    letter-spacing:0;

    color:#111111;

    margin-bottom:16px;

}


/*==========================
        Paragraph
===========================*/

.engagement-card p{

    font-family:"Inter",sans-serif;

    font-weight:500;

    font-size:16px;

    line-height:140%;

    letter-spacing:0;

    color:#8A8A8A;

    max-width:430px;

}

/*==========================
        Divider
===========================*/

.engagement-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:1px;

    background:#D8D8D8;

}

.engagement-item::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:linear-gradient(
        90deg,
        #FE7028,
        #EF3176,
        #7B2CBF
    );

    transition:.5s;

}



/*==========================
        Responsive
===========================*/

@media(max-width:991px){

    .engagement{

        padding:80px 24px;

    }

    .engagement-grid{

        grid-template-columns:1fr;

        gap:0;

    }

    .engagement h2{

        font-size:32px;

    }

    .engagement-subtitle{

        margin-bottom:60px;

    }

    .engagement-content h3{

        font-size:28px;

    }

}
/*==========================================
OUR PROMISE
==========================================*/

.promise-section{

    background:#2d2d2d;

    padding:100px 8%;

}

.promise-section h2{

    text-align:center;

    color:#fff;

    font-size:44px;

    margin-bottom:15px;

}

.promise-subtitle{

    text-align:center;

    color:#999;

    margin-bottom:70px;

    font-size:17px;

}

.promise-grid{

    display:grid;

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

    gap:30px;

    max-width:900px;

    margin:auto;

}

.promise-card{
    width:391px;
    height:61px;

    background:#F8EEF1;
    border-radius:0;

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

    text-align:center;

    font-family:"Inter", sans-serif;
    font-weight:500;
    font-size:20px;
    line-height:130%;
    letter-spacing:0;

    color:#222;

    cursor:pointer;
    transition:.3s ease;
}

.promise-card:hover{

    background:linear-gradient(90deg,#ff5a5f,#ff3c88,#7a3cff);

    color:#fff;

    transform:translateY(-8px);

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

}

/* Responsive */

@media(max-width:900px){

.promise-grid{
    display:grid;
    grid-template-columns:repeat(2,391px);
    justify-content:center;
    gap:24px;
    max-width:900px;
    margin:auto;
}
.promise-card{

font-size:20px;

}

}



/* ==========================================================
   HERO UNION DECORATION
========================================================== */

.hero-union{
position:absolute;
right:-260px;
top:-120px;
width:1300px;
opacity:.9;
z-index:1;
pointer-events:none;
transform-origin:center;
animation:rotateUnion 45s linear infinite,floatUnion 12s ease-in-out infinite;
}
.left{position:relative;z-index:5;width:58%;}

/* =========================================================
   HOME PAGE — PHONE LAYOUT
   Mobile only
   Desktop styles remain unchanged
========================================================= */

@media (max-width: 767px) {

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

    .hero {
        position: relative;

        width: 100%;
        /* Fallback order keeps the hero full-screen on older mobile browsers,
           iOS Safari, and newer dynamic-browser-chrome devices. */
        height: 100vh;
        min-height: 100vh;
        height: 100svh;
        min-height: 100svh;
        height: 100dvh;
        min-height: 100dvh;

        box-sizing: border-box;

        padding: 70px 20px 40px;

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

        overflow: hidden;

        background: #2B2B2B;
    }


    /* =====================================================
       HERO CONTAINER
    ===================================================== */

    .hero .container {
        width: 100%;
        max-width: 100%;

        margin: 0;
        padding: 0;

        box-sizing: border-box;
    }


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

    .hero-content {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        z-index: 5;

        text-align: center;
    }


    /* =====================================================
       HERO LEFT
    ===================================================== */

    .left {
        position: relative;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;

        z-index: 5;

        text-align: center;
    }


    /* =====================================================
       HERO UNION
    ===================================================== */

    .hero-union {
        position: absolute;

        width: 610px;

        top: -10px;
        right: -345px;

        opacity: .72;

        z-index: 1;

        pointer-events: none;
    }


    /* =====================================================
       HERO HEADING
       
       Mobile:
       
       We Don't Just Market
       Brands. We Build
       Market Leaders.
    ===================================================== */

    .min_header {
        font-family: "Carisma Classic", serif;

        font-weight: 600;

        font-size: clamp(28px, 8.54vw, 32px);

        line-height: 120%;

        letter-spacing: 0;

        color: #FFFFFF;

        width: 100%;
        max-width: 327px;

        margin: 0 auto 16px;

        text-align: center;

        /* The intentional mobile line breaks keep this heading identical
           across phone widths. */
        white-space: nowrap;

        opacity: 0;

        transform: translateY(60px);

        animation: heroTitle 1s ease forwards;

        animation-delay: .5s;
    }


    /* Apostrophe */

    .min_header .apostrophe {
        font-family: "Inter", sans-serif;
    }

    .mobile-line-break {
        display: block;
    }

    .process-mobile-break {
        display: block;
    }

    .desktop-line-break {
        display: none;
    }


    /* =====================================================
       HERO DESCRIPTION
    ===================================================== */

    .left .hero-description {
        width: 327px;

        height: 84px;

        max-width: 100%;

        margin: 0 auto 18px;

        font-family: "Inter", sans-serif;

        font-size: 16px;

        font-weight: 500;

        line-height: 130%;

        color: #E4E4E4;

        text-align: center;
    }


    /*
       Hide desktop <br> elements in description
       so mobile text can wrap naturally.
    */

    .hero-description br {
        display: none;
    }

    .hero-button-gap {
        height: 0;
    }


    /* =====================================================
       HERO BUTTON
    ===================================================== */

    .hero-btn {
        display: inline-flex;

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

        min-width: 240px;

        min-height: 56px;

        padding: 12px 18px;

        box-sizing: border-box;

        font-family: "Inter", sans-serif;

        font-size: 16px;

        font-weight: 600;

        line-height: 1;

        color: #FFFFFF;

        text-decoration: none;

        border-radius: 0;

        background:
            linear-gradient(
                90deg,
                #FE6B3D,
                #EF3176,
                #7B2CBF
            );

        transition: .4s;
    }


    .hero-btn:hover {
        transform: translateY(-3px);

        box-shadow:
            0 12px 25px rgba(239, 49, 118, .30);
    }


    /* =====================================================
       WHY BRAND & THOUGHT
    ===================================================== */

    .why {
        width: 100%;

        box-sizing: border-box;

        padding: 24px 20px 21px;
    }


    .why .container {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }


    .why h2,
    .services h2,
    .industries h2,
    .process h2,
    .engagement h2,
    .promise-section h2 {
        font-size: 22px;
        line-height: 130%;
    }


    .why p {
        font-size: 12px;

        line-height: 130%;

        margin-bottom: 18px;
    }


    .features {
        flex-direction: column;

        gap: 7px;
    }


    .features span {
        font-size: 15px;

        transform: none;

        box-shadow: none;

        white-space: normal;

        text-align: center;
    }


    .features .arrow {
        font-size: 0;

        line-height: 1;
    }


    .features .arrow::after {
        content: "↓";

        font-size: 20px;
    }


    /* =====================================================
       SERVICES
    ===================================================== */

    .services {
        width: 100%;

        box-sizing: border-box;

        padding: 24px 18px 20px;
    }


    .services .container {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }


    .services .subtitle {
        max-width: 310px;

        margin: 0 auto 17px;

        font-size: 12px;

        line-height: 1.25;
    }


    .service-box,
    .service-box:nth-child(even) {
        grid-template-columns: 1fr;

        gap: 0;

        margin-bottom: 12px;

        text-align: left;
    }


    .service-box .service-img {
        display: none;
    }


    .service-box.is-open .service-img {
        display: flex;

        margin: 0 0 16px;
    }


    .service-img img {
        width: 100%;

        max-width: 145px;
    }


    .service-content h3 {
        position: relative;

        padding-left: 25px;

        font-size: 15px;

        line-height: 1.25;

        margin-bottom: 10px;

        cursor: pointer;

        outline: none;
    }


    .service-content h3::before {
        content: "+";

        position: absolute;

        top: 50%;
        left: 0;

        width: 20px;
        height: 20px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background: #FFFFFF;

        box-shadow:
            0 2px 10px rgba(0, 0, 0, .20);

        color: #111111;

        font-size: 16px;

        font-weight: 400;

        line-height: 1;

        transform: translateY(-50%);
    }


    .service-box.is-open .service-content h3::before {
        content: "−";
    }


    .service-content h3:focus-visible {
        outline: 2px solid #EF3176;

        outline-offset: 5px;
    }


    .service-content p,
    .service-content li,
    .service-content ul {
        display: none;

        font-size: 12px;

        line-height: 1.25;
    }


    .service-box.is-open .service-content p,
    .service-box.is-open .service-content li,
    .service-box.is-open .service-content ul {
        display: block;
    }


    .service-content p {
        margin-bottom: 12px;
    }


    .service-content li {
        margin-bottom: 6px;
    }


    /* =====================================================
       INDUSTRIES
    ===================================================== */

    .industries {
        width: 100%;

        box-sizing: border-box;

        padding: 50px 12px 55px;
    }


    .industries .container {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }


    .industry-subtitle {
        font-size: 14px;

        line-height: 130%;

        margin-bottom: 28px;
    }


    .industry-carousel {
        display: block;

        width: 100%;
    }


    .industry-viewport {
        width: 100%;

        overflow-x: auto;

        overflow-y: hidden;

        padding: 6px 0 14px 20px;

        scroll-snap-type: x mandatory;

        scroll-behavior: smooth;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .industry-viewport::-webkit-scrollbar {
        display: none;
    }


    .industry-track {
        gap: 16px;

        padding-right: 20px;
    }


    .industry-arrow {
        display: none;
    }


    .industry-card,
    .industry-image,
    .industry-image img {
        width: min(72vw, 260px);
    }


    .industry-card {
        flex-basis: min(72vw, 260px);

        scroll-snap-align: start;
    }


    .industry-image,
    .industry-image img {
        height: min(72vw, 260px);

        border-radius: 12px;
    }


    .industry-card h3 {
        font-size: 14px;

        margin-top: 10px;
    }


    .industry-dots {
        display: flex;

        justify-content: center;

        gap: 8px;

        margin-top: 8px;
    }


    .industry-dot {
        width: 8px;
        height: 8px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        background: #D5D5D5;

        cursor: pointer;

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


    .industry-dot.is-active {
        background:
            linear-gradient(
                90deg,
                #FE7028,
                #EF3176,
                #7B2CBF
            );

        transform: scale(1.2);
    }


    /* =====================================================
       PROCESS
    ===================================================== */

    .process {
        width: 100%;

        box-sizing: border-box;

        padding: 55px 20px 60px;
    }


    .process .container {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }


    .process-subtitle {
        margin-bottom: 32px;

        font-size: 14px;
    }


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

        gap: 12px;
    }


    .process-card {
        width: 100%;

        min-height: 142px;

        padding: 16px;

        border-radius: 12px;

        box-sizing: border-box;
    }


    .process-card img {
        width: 42px;
        height: 42px;

        margin-bottom: 12px;
    }


    .process-number {
        font-size: 13px;

        margin-bottom: 7px;
    }


    .process-title {
        font-size: 15px;
        line-height: 130%;
        min-height: 39px;
    }


    /* =====================================================
       CLIENT ENGAGEMENT
    ===================================================== */

    .engagement {
        width: 100%;

        box-sizing: border-box;

        padding: 55px 20px;
    }


    .engagement .container {
        width: 100%;
        max-width: 100%;

        padding: 0;
    }


    .engagement-subtitle {
        margin-bottom: 32px;

        font-size: 14px;
    }


    .engagement-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .engagement-card {
        width: 100%;

        box-sizing: border-box;

        gap: 14px;

        padding: 18px;

        border-radius: 12px;
    }


    .engagement-card img {
        width: 40px;
    }


    
    .engagement-content h3 {
        font-size: 20px;

        margin-bottom: 8px;
    }


    .engagement-card p {
        font-size: 13px;

        line-height: 1.45;
    }


    /* =====================================================
       PROMISE
    ===================================================== */

    .promise-section {
        width: 100%;

        box-sizing: border-box;

        padding: 55px 20px;
    }


    .promise-subtitle {
        margin-bottom: 30px;

        font-size: 14px;
    }


    .promise-grid {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .promise-card {
        width: 100%;

        height: 42px;

        font-size: 13px;

        box-sizing: border-box;
    }
}