@font-face {
    font-family: "Gilmer";
    src: url("../../assets/fonts/Gilmer Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilmer";
    src: url("../../assets/fonts/Gilmer Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilmer";
    src: url("../../assets/fonts/Gilmer Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilmer";
    src: url("../../assets/fonts/Gilmer Heavy.otf") format("opentype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gilmer";
    src: url("../../assets/fonts/Gilmer Heavy.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "The Andallass";
    src: url("../../assets/fonts/The Andallass.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --stack-red: #ed302b;
    --stack-blue: #1c509d;
    --white: #ffffff;
    --black: #000000;
    --dark-navy: #020914;
    --hero-pad-x: clamp(24px, 4.4vw, 70px);
    --scroll-progress: 0;
    --video-wrap-scale: 1;
    --video-scale: 1.035;
    --scan-opacity: 0.18;
    --scan-x: -26%;
    --hint-opacity: 1;
    --mx: 0;
    --my: 0;

    /* Font family variables */
    --font-primary: "Gilmer", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: "Gilmer", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-script: "The Andallass", cursive;

    /* Breakpoint reference variables (mirrored in native @media rules below) */
    --bp-xxl: 1660px;
    --bp-xl: 1440px;
    --bp-lg: 1280px;
    --bp-md-lg: 1199px;
    --bp-md: 1180px;
    --bp-tablet: 820px;
    --bp-mobile-lg: 767px;
    --bp-mobile: 480px;
    --bp-mobile-sm: 440px;

    /* Hero responsive variables */
    --hero-height: 170vh;
    --hero-min-height: 1040px;
    --hero-sticky-min-height: 680px;
    --hero-video-area-width: 57.5%;
    --hero-header-padding-top: 32px;
    --hero-header-align-items: flex-start;
    --hero-logo-width: clamp(138px, 11vw, 215px);
    --hero-nav-gap: 16px;
    --hero-content-top: 50%;
    --hero-eyebrow-font: clamp(28px, 2.65vw, 44px);
    --hero-eyebrow-padding: clamp(15px, 1.25vw, 22px) clamp(24px, 2.5vw, 42px);
    --hero-eyebrow-letter-spacing: 0px;
    --hero-title-margin-top: clamp(52px, 5.6vw, 76px);
    --hero-title-font: clamp(72px, 8.2vw, 148px);
    --hero-title-line-height: 0.92;
    --hero-title-gap: clamp(22px, 2.05vw, 34px);
    --hero-title-letter-spacing: 0px;
    --hero-title-small-font: clamp(48px, 5.45vw, 96px);
    --explore-margin-top: clamp(52px, 4.4vw, 70px);
    --explore-width: clamp(205px, 15vw, 245px);
    --explore-height: clamp(58px, 4.2vw, 70px);
    --explore-font: clamp(16px, 1.08vw, 19px);
    --watermark-bottom: clamp(-32px, -2.2vw, -18px);
    --watermark-font: clamp(104px, 12.7vw, 230px);
    --scroll-hint-bottom: 28px;
    --talk-display: inline-flex;
    --talk-height: clamp(54px, 3.8vw, 64px);
    --talk-min-width: clamp(150px, 10vw, 174px);
    --talk-padding-x: 33px;
    --talk-font: clamp(15px, 1.04vw, 18px);
    --menu-height: clamp(48px, 3.2vw, 56px);
    --menu-padding: 0 21px 0 24px;
    --menu-gap: 15px;
    --menu-font: clamp(14px, 0.95vw, 17px);

    /* Brand trust responsive variables */
    --brand-card-padding-top: clamp(54px, 4.45vw, 84px);
    --brand-card-padding-x: clamp(52px, 6.25vw, 126px);
    --brand-card-radius: clamp(44px, 4.2vw, 70px) clamp(44px, 4.2vw, 70px) 0 0;
    --brand-card-min-height: clamp(420px, 30vw, 545px);
    --brand-grid-columns: minmax(280px, 430px) 1px minmax(470px, 1fr);
    --brand-grid-gap: clamp(38px, 4.2vw, 76px);
    --brand-heading-align: center;
    --brand-divider-width: 1px;
    --brand-divider-height: clamp(132px, 11vw, 184px);
    --brand-divider-bg: linear-gradient(180deg, transparent 0%, rgba(237,48,43,0.58) 18%, rgba(237,48,43,0.66) 82%, transparent 100%);
    --brand-heading-span-font: clamp(30px, 2.55vw, 48px);
    --brand-heading-strong-font: clamp(50px, 4.8vw, 88px);
    --brand-copy-line-height: 1.62;
    --trusted-row-grid: 1fr auto 1fr;
    --trusted-row-gap: clamp(24px, 2.25vw, 42px);
    --trusted-row-margin: clamp(58px, 4.9vw, 86px) auto clamp(42px, 3.4vw, 62px);
    --trusted-title-font: clamp(40px, 3.5vw, 68px);
    --trusted-title-white-space: nowrap;
    --trusted-title-line-height: 1;
    --trusted-row-text-align: left;
    --trusted-line-width: auto;
    --logo-marquee-width: calc(100% + clamp(52px, 12vw, 260px));
    --logo-marquee-margin-left: calc(var(--brand-card-padding-x) * -1);
    --logo-track-gap: clamp(11px, 1.05vw, 20px);
    --logo-track-duration: 90s;
    --logo-card-basis: clamp(205px, 14.6vw, 286px);
    --logo-card-height: clamp(92px, 7.7vw, 142px);
    --logo-card-radius: clamp(12px, 1vw, 18px);
    --logo-card-padding: clamp(15px, 1.35vw, 25px) clamp(20px, 1.8vw, 32px);

    /* Stack91 global responsive system from client notes */
    --font-h1: 120px;
    --font-h2: 72px;
    --font-h3: 60px;
    --font-h4: 36px;
    --font-h5: 24px;
    --font-h6: 20px;
    --font-p: 22px;
    --font-list: 24px;
    --section-padding-y: 120px;
    --section-padding-x: 85px;
    --section-padding-small-y: 85px;
    --section-padding-small-x: 85px;
    --section-max-width: 1920px;
}

html {
    scroll-behavior: smooth;
    background: #000;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--black);
    color: var(--white);
    font-family: var(--font-primary);
}


body.is-loading {
    overflow: hidden;
}


/* ================= STACK91 START LOADER ================= */
.stack91-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(28,80,157,0.16), transparent 32%),
        radial-gradient(circle at 50% 58%, rgba(237,48,43,0.10), transparent 34%),
        #000;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition:
        opacity 0.85s cubic-bezier(.19,1,.22,1),
        visibility 0.85s cubic-bezier(.19,1,.22,1);
}

body.loader-done .stack91-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-inner {
    width: min(320px, 70vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    transform: translate3d(0, 0, 0);
    animation: loaderFloat 1.8s ease-in-out infinite alternate;
}

.loader-logo {
    width: min(220px, 58vw);
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 42px rgba(255,255,255,0.08));
}

.loader-line {
    position: relative;
    width: min(280px, 64vw);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    box-shadow: 0 0 26px rgba(28,80,157,0.20);
}

.loader-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent 0%, #ffffff 22%, var(--stack-red) 58%, transparent 100%);
    animation: loaderLine 1.15s cubic-bezier(.76,0,.24,1) infinite;
}

@keyframes loaderFloat {
    from { transform: translate3d(0, 8px, 0); }
    to { transform: translate3d(0, -4px, 0); }
}

@keyframes loaderLine {
    0% { transform: translate3d(-120%, 0, 0); }
    100% { transform: translate3d(260%, 0, 0); }
}


/* ================= STACK91 GLOBAL TAG / PADDING / SVG SYSTEM =================
   Use this section for full-site consistency.
   Desktop notes:
   h1 120px | h2 72px | h3 60px | h4 36px | h5 24px | h6 20px
   paragraph: 22px at 1920, 20px at 1660, 18px at 1440, 16px at 1280
   ul/li: 24px at 1920, 22px at 1660, 20px at 1440
   section padding: 120px/85px at 1920, 100px/65px at 1660,
   90px/50px at 1440, 80px/40px at 1280, 70px at 1199,
   60px at mobile, 45px at small mobile.
============================================================================= */

.h1-size {
    font-family: var(--font-display);
    font-size: var(--font-h1);
    line-height: var(--hero-title-line-height);
    font-weight: 800;
    letter-spacing: 0px;
}

.h2-size {
    font-family: var(--font-display);
    font-size: var(--font-h2);
    line-height: 0.98;
    font-weight: 800;
    letter-spacing: 0px;
}

.h3-size {
    font-family: var(--font-display);
    font-size: var(--font-h3);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: 0px;
}

.h4-size {
    font-family: var(--font-display);
    font-size: var(--font-h4);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: 0px;
}

.h5-size {
    font-family: var(--font-display);
    font-size: var(--font-h5);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0px;
}

.h6-size {
    font-family: var(--font-display);
    font-size: var(--font-h6);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0px;
}

.p-size {
    font-size: var(--font-p);
    line-height: 1.65;
    font-weight: 300;
    letter-spacing: 0px;
}

.list-size,
.list-size li {
    font-size: var(--font-list);
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0px;
}

.section-padding {
    padding: var(--section-padding-y) var(--section-padding-x);
}

.section-padding-block {
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

.section-padding-inline {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

.section-padding-small {
    padding: var(--section-padding-small-y) var(--section-padding-small-x);
}

.stack-container {
    width: min(var(--section-max-width), 100% - (var(--section-padding-x) * 2));
    margin-inline: auto;
}

.svg-asset,
.svg-icon,
.svg-logo {
    display: block;
    max-width: 100%;
    height: auto;
}

.svg-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.svg-logo {
    width: auto;
    max-height: 100%;
}

img[src$=".svg"] {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1660px) {
    :root {
        --font-h1: 104px;
        --font-h2: 66px;
        --font-h3: 54px;
        --font-h4: 34px;
        --font-h5: 23px;
        --font-h6: 20px;
        --font-p: 20px;
        --font-list: 22px;
        --section-padding-y: 100px;
        --section-padding-x: 65px;
        --section-padding-small-y: 65px;
        --section-padding-small-x: 65px;
    }
}

@media (max-width: 1440px) {
    :root {
        --font-h1: 92px;
        --font-h2: 60px;
        --font-h3: 48px;
        --font-h4: 32px;
        --font-h5: 22px;
        --font-h6: 19px;
        --font-p: 18px;
        --font-list: 20px;
        --section-padding-y: 90px;
        --section-padding-x: 50px;
        --section-padding-small-y: 50px;
        --section-padding-small-x: 50px;
    }
}

@media (max-width: 1280px) {
    :root {
        --font-h1: 82px;
        --font-h2: 54px;
        --font-h3: 44px;
        --font-h4: 30px;
        --font-h5: 21px;
        --font-h6: 18px;
        --font-p: 16px;
        --font-list: 18px;
        --section-padding-y: 80px;
        --section-padding-x: 40px;
        --section-padding-small-y: 40px;
        --section-padding-small-x: 40px;
    }
}

@media (max-width: 1199px) {
    :root {
        --font-h1: 72px;
        --font-h2: 48px;
        --font-h3: 40px;
        --font-h4: 28px;
        --font-h5: 20px;
        --font-h6: 18px;
        --font-p: 16px;
        --font-list: 18px;
        --section-padding-y: 70px;
        --section-padding-x: 32px;
        --section-padding-small-y: 70px;
        --section-padding-small-x: 32px;
    }
}

@media (max-width: 767px) {
    :root {
        --font-h1: 52px;
        --font-h2: 40px;
        --font-h3: 32px;
        --font-h4: 26px;
        --font-h5: 19px;
        --font-h6: 17px;
        --font-p: 15px;
        --font-list: 16px;
        --section-padding-y: 60px;
        --section-padding-x: 20px;
        --section-padding-small-y: 60px;
        --section-padding-small-x: 20px;
    }
}

@media (max-width: 440px) {
    :root {
        --font-h1: 44px;
        --font-h2: 34px;
        --font-h3: 28px;
        --font-h4: 23px;
        --font-h5: 18px;
        --font-h6: 16px;
        --font-p: 15px;
        --font-list: 16px;
        --section-padding-y: 45px;
        --section-padding-x: 16px;
        --section-padding-small-y: 45px;
        --section-padding-small-x: 16px;
    }
}


a,
button {
    font: inherit;
}

@media (pointer: fine) {
    body,
    a,
    button {
        cursor: none;
    }
}

.cursor-dot,
.cursor-ring {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform, width, height, opacity, border-color, background;
}

.cursor-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 18px rgba(255,255,255,0.55);
    mix-blend-mode: difference;
}

.cursor-ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.025);
    backdrop-filter: blur(2px);
    transition:
        width 0.28s ease,
        height 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        opacity 0.28s ease;
}

body.cursor-ready .cursor-dot,
body.cursor-ready .cursor-ring {
    opacity: 1;
}

body.cursor-hover .cursor-ring {
    width: 72px;
    height: 72px;
    border-color: rgba(237,48,43,0.92);
    background: rgba(237,48,43,0.08);
}

body.cursor-hover .cursor-dot {
    background: var(--stack-red);
    mix-blend-mode: normal;
}

.stack91-hero {
    position: relative;
    height: var(--hero-height);
    min-height: var(--hero-min-height);
    background: #000;
}

.hero-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: var(--hero-sticky-min-height);
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(90deg, #000 0%, #000 48%, #03070d 100%);
}

.hero-video-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--hero-video-area-width);
    z-index: -6;
    overflow: hidden;
    background: #020914;
    transform: scale(var(--video-wrap-scale));
    transform-origin: center;
    will-change: transform;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.78) contrast(1.13) saturate(1.08);
    transform: scale(var(--video-scale));
    will-change: transform;
}

.hero-left-fade {
    position: absolute;
    inset: 0;
    z-index: -5;
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 43%,
            rgba(0, 0, 0, 0.92) 48%,
            rgba(0, 0, 0, 0.48) 61%,
            rgba(0, 0, 0, 0.10) 74%,
            rgba(0, 0, 0, 0.30) 100%),
        radial-gradient(circle at 72% 32%, rgba(28, 80, 157, 0.20), transparent 38%);
}

.hero-vignette {
    position: absolute;
    inset: 0;
    z-index: -4;
    pointer-events: none;
    background:
        radial-gradient(circle at 74% 45%, transparent 0 33%, rgba(0,0,0,0.32) 66%, rgba(0,0,0,0.72) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.40));
}

.hero-noise {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.17;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.07) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 65%, rgba(255,255,255,0.045) 0 1px, transparent 1px);
    background-size: 42px 42px, 68px 68px;
    mix-blend-mode: screen;
}

.hero-scan-light {
    position: absolute;
    inset: -35% -20%;
    z-index: -2;
    pointer-events: none;
    opacity: var(--scan-opacity);
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 47%, transparent 61%);
    transform: translate3d(var(--scan-x), 0, 0) rotate(4deg);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.hero-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 10px 0px;
    display: flex;
    align-items: var(--hero-header-align-items);
    justify-content: space-between;
}

.hero-logo {
    width: var(--hero-logo-width);
    display: inline-flex;
    text-decoration: none;
    transform-origin: left top;
}

.hero-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-nav {
    display: flex;
    align-items: center;
    gap: var(--hero-nav-gap);
}

.btn,
.btn-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transform-style: preserve-3d;
}

.btn::before,
.btn-menu::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,0.20), transparent 38%, rgba(255,255,255,0.08));
    opacity: 0;
    transition: opacity 0.35s ease;
}

.btn:hover::before,
.btn-menu:hover::before {
    opacity: 1;
}

.btn-talk {
    display: var(--talk-display);
    height: var(--talk-height);
    min-width: var(--talk-min-width);
    padding: 0 var(--talk-padding-x);
    background: var(--stack-red);
    color: #fff;
    font-size: var(--talk-font);
    font-weight: 900;
    letter-spacing: 0px;
    box-shadow:
        0 20px 46px rgba(237,48,43,0.30),
        inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.btn-talk:hover {
    box-shadow:
        0 24px 54px rgba(237,48,43,0.38),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-explore:hover {
    transform: translateY(-4px) translateZ(18px);
    box-shadow:
        0 28px 66px rgba(237,48,43,0.46),
        inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-menu {
    height: var(--menu-height);
    padding: var(--menu-padding);
    gap: var(--menu-gap);
    color: #fff;
    background: rgba(2, 9, 20, 0.44);
    border: 1px solid rgba(28,80,157,0.70);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 16px 36px rgba(0,0,0,0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.btn-menu:hover {
    background: rgba(7, 20, 44, 0.58);
    border-color: rgba(28,80,157,1);
}

/* Header/logo/menu stay clean and fixed; only hero content animates on scroll. */
.hero-header,
.hero-logo,
.hero-nav,
.btn-talk,
.btn-menu {
    will-change: auto;
}

.hero-logo:hover,
.btn-talk:hover,
.btn-menu:hover {
    transform: none;
}

.btn-menu span:first-child {
    font-size: var(--menu-font);
    font-weight: 500;
    letter-spacing: 0px;
}

.menu-dots {
    position: relative;
    width: 5px;
    height: 24px;
    display: inline-block;
}

.menu-dots::before,
.menu-dots::after {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 8px 0 #fff;
}

.menu-dots::before { top: 3px; }
.menu-dots::after { bottom: 1px; box-shadow: none; }

.hero-content {
    position: absolute;
    left: 0;
    top: var(--hero-content-top);
    z-index: 6;
    width: min(850px, 100%);
    padding-left: var(--hero-pad-x);
    transform: translate3d(0, -50%, 0);
    transform-style: preserve-3d;
    will-change: auto;
}

.hero-eyebrow {
    width: fit-content;
    max-width: calc(100vw - var(--hero-pad-x) * 2);
    padding: var(--hero-eyebrow-padding);
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 9, 20, 0.56);
    border: 1px solid rgba(28,80,157,0.85);
    box-shadow:
        0 0 30px rgba(28,80,157,0.17),
        inset 0 0 0 1px rgba(255,255,255,0.025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0px;
    font-size: xx-large;
}

.hero-title {
    display: flex;
    flex-direction: column;    
    color: #fff;
    font-size: var(--hero-title-font);
    line-height: var(--hero-title-line-height);
    font-weight: 950;    
    text-shadow:
        0 1px 0 rgba(255,255,255,0.10),
        0 20px 48px rgba(0,0,0,0.50);
    perspective: 1000px;
}

.title-line {
    display: block;
    transform-origin: left center;
    will-change: transform, opacity, filter;
}

.hero-title .title-line {
    word-spacing: 0.035em;
    margin-top: 20px;
}

.title-small {
    font-size: var(--hero-title-small-font);
    line-height: 1.02;
}

.title-small strong {
    color: #ffffff;
    font-weight: inherit;
    text-shadow:
        0 0 18px rgba(237,48,43,0.18),
        0 14px 36px rgba(237,48,43,0.20);
}

.btn-explore {
    margin-top: var(--explore-margin-top);
    width: var(--explore-width);
    height: var(--explore-height);
    background: var(--stack-red);
    color: #fff;
    font-size: var(--explore-font);
    font-weight: 950;
    letter-spacing: 0px;
    box-shadow:
        0 23px 52px rgba(237,48,43,0.32),
        inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.stack-watermark {
    position: absolute;
    left: clamp(16px, 2.4vw, 38px);
    bottom: var(--watermark-bottom);
    z-index: 2;
    color: rgba(237,48,43,0.11);
    font-size: var(--watermark-font);
    line-height: 0.72;
    font-weight: 950;
    letter-spacing: 0px;
    pointer-events: none;
    user-select: none;
    transform: translate3d(0, 0, 0);
    will-change: opacity, filter;
}

/* Hero text stays visible on page refresh.
   While scrolling, the whole hero text fades slowly together; no staggered movement. */
.scroll-reveal {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
    will-change: transform, opacity, filter;
}

/* ================= HERO LOAD TEXT INTRO =================
   After the loader, hero copy enters in clean line-by-line motion.
   Scroll animation still fades the whole content together after intro completes. */
body.hero-intro-prep:not(.hero-intro-done) .hero-content .scroll-reveal,
body.hero-intro-prep:not(.hero-intro-done) .stack-watermark.scroll-reveal {
    opacity: 0;
    filter: blur(14px);
    transform: translate3d(0, 72px, 0) scale(0.965);
}

body.hero-intro-play:not(.hero-intro-done) .hero-eyebrow.scroll-reveal {
    animation: stack91TextLineIn 0.95s cubic-bezier(.19,1,.22,1) 0.08s both;
}

body.hero-intro-play:not(.hero-intro-done) .hero-title .title-line:nth-child(1) {
    animation: stack91TextLineIn 1.02s cubic-bezier(.19,1,.22,1) 0.30s both;
}

body.hero-intro-play:not(.hero-intro-done) .hero-title .title-line:nth-child(2) {
    animation: stack91TextLineIn 1.02s cubic-bezier(.19,1,.22,1) 0.52s both;
}

body.hero-intro-play:not(.hero-intro-done) .btn-explore.scroll-reveal {
    animation: stack91TextButtonIn 0.95s cubic-bezier(.19,1,.22,1) 0.78s both;
}

body.hero-intro-play:not(.hero-intro-done) .stack-watermark.scroll-reveal {
    animation: stack91TextWatermarkIn 1.15s cubic-bezier(.19,1,.22,1) 0.96s both;
}

@keyframes stack91TextLineIn {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translate3d(0, 76px, 0) rotateX(9deg) scale(0.965);
    }
    58% {
        opacity: 1;
        filter: blur(0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
    }
}

@keyframes stack91TextButtonIn {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 48px, 0) scale(0.94);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes stack91TextWatermarkIn {
    0% {
        opacity: 0;
        filter: blur(18px);
        transform: translate3d(0, 44px, 0) scale(0.98);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 768px) {
    body.hero-intro-prep:not(.hero-intro-done) .hero-content .scroll-reveal,
    body.hero-intro-prep:not(.hero-intro-done) .stack-watermark.scroll-reveal {
        transform: translate3d(0, 48px, 0) scale(0.975);
        filter: blur(10px);
    }
    .hero-eyebrow {
    width: fit-content;
    max-width: calc(100vw - var(--hero-pad-x) * 2);
    padding: var(--hero-eyebrow-padding);
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 9, 20, 0.56);
    border: 1px solid rgba(28, 80, 157, 0.85);
    box-shadow: 0 0 30px rgba(28, 80, 157, 0.17), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0px;
    font-size: 18px;
}
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: var(--scroll-hint-bottom);
    z-index: 9;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0px;
    transform: translateX(-50%);
    opacity: var(--hint-opacity);
    pointer-events: none;
}

.scroll-hint i {
    position: relative;
    display: block;
    width: 42px;
    height: 1px;
    background: rgba(255,255,255,0.32);
    overflow: hidden;
}

.scroll-hint i::before {
    content: "";
    position: absolute;
    left: -50%;
    top: 0;
    width: 50%;
    height: 100%;
    background: var(--stack-red);
    animation: scrollLine 1.3s ease-in-out infinite;
}


/* Smooth hero-to-next-section bridge */
main {
    background: #000;
}

.brand-trust-section {
    position: relative;
    margin-top: -1px;
    padding: 80px var(--section-padding-x) clamp(72px, 6.2vw, 80px);
    background: #000;
    overflow: hidden;
}

.brand-trust-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, #000 0%, transparent 16%, transparent 84%, #000 100%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.035), transparent 32%);
    z-index: 2;
}

.brand-trust-card {
    position: relative;
    z-index: 1;
    width: min(1760px, 100%);
    min-height: var(--brand-card-min-height);
    margin: 0 auto;
    padding: var(--brand-card-padding-top) var(--brand-card-padding-x) 0;
    border-radius: var(--brand-card-radius);
    background: linear-gradient(180deg, #751a1b 0%, #450e10 48%, #190406 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 40px 80px rgba(0,0,0,0.52);
    overflow: hidden;
    transform-style: preserve-3d;
}

.brand-trust-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 38%),
        radial-gradient(circle at 50% 115%, rgba(0,0,0,0.62), transparent 48%);
    mix-blend-mode: screen;
    opacity: 0.55;
}

.brand-trust-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(118px, 9.8vw, 180px);
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 38%, rgba(0,0,0,0.78) 100%);
    z-index: 4;
}

.brand-top-grid {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: var(--brand-grid-columns);
    align-items: start;
    gap: var(--brand-grid-gap);
}

.brand-heading {
    color: #fff;
    line-height: 0.94;
    letter-spacing: 0px;
    text-align: var(--brand-heading-align);
}

.brand-heading span {
    display: block;
    font-size: var(--brand-heading-span-font);
    font-weight: 400;
    line-height: 1;
}

.brand-heading strong {
    display: block;
    margin-top: 4px;
    font-size: 70px;
    line-height: 1.10;
    font-weight: 950;
}

.brand-divider {
    width: var(--brand-divider-width);
    height: var(--brand-divider-height);
    background: var(--brand-divider-bg);
}

.brand-copy {
    max-width: 1050px;
    color: #fff;
    font-size: 26px;
    line-height: var(--brand-copy-line-height);
    font-weight: 300;
    letter-spacing: 0px;
    text-wrap: pretty;
}

.trusted-row {
    position: relative;
    z-index: 5;
    margin: var(--trusted-row-margin);
    width: min(1520px, 100%);
    display: grid;
    grid-template-columns: var(--trusted-row-grid);
    align-items: center;
    gap: var(--trusted-row-gap);
    text-align: var(--trusted-row-text-align);
}

.trusted-line {
    display: block;
    width: var(--trusted-line-width);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(237,48,43,0.60), transparent);
}

.trusted-row h2 {
    color: #fff;
    font-size: 51px;
    line-height: var(--trusted-title-line-height);
    font-weight: 300;
    letter-spacing: 0px;
    white-space: var(--trusted-title-white-space);
}

.trusted-row strong {
    font-weight: 950;
}

.brand-logo-marquee {
    position: relative;
    z-index: 6;
    width: var(--logo-marquee-width);
    margin-left: var(--logo-marquee-margin-left);
    overflow: hidden;
    padding: 0 0 clamp(28px, 2.5vw, 42px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.brand-logo-track {
    display: flex;
    align-items: center;
    gap: var(--logo-track-gap);
    width: max-content;
    animation: trustedLogoSlide var(--logo-track-duration) linear infinite;
    will-change: transform;
}

.brand-logo-marquee:hover .brand-logo-track {
    animation-play-state: paused;
}

.brand-logo-card {
    flex: 0 0 var(--logo-card-basis);
    height: var(--logo-card-height);
    border-radius: var(--logo-card-radius);
    background: linear-gradient(90deg, rgba(255,255,255,0.72), #fff 30%, #fff 70%, rgba(255,255,255,0.74));
    display: grid;
    place-items: center;
/*     padding: var(--logo-card-padding); */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 18px 42px rgba(0,0,0,0.28);
    overflow: hidden;
    transform: translateZ(0);
}

.brand-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
section#process {
    padding-top: 35px;
}
section#work {
    padding-top: 120px;
}
.observe-reveal {
    opacity: 0;
    transform: translate3d(0, 66px, 0) rotateX(8deg);
    filter: blur(14px);
    transition:
        opacity 0.95s cubic-bezier(.19,1,.22,1),
        transform 0.95s cubic-bezier(.19,1,.22,1),
        filter 0.95s cubic-bezier(.19,1,.22,1);
    transition-delay: var(--delay, 0s);
    will-change: transform, opacity, filter;
}

.observe-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateX(0deg);
    filter: blur(0);
}

@keyframes trustedLogoSlide {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes scrollLine {
    0% { transform: translateX(0); }
    100% { transform: translateX(300%); }
}




/* ================= WHY DIGITAL MARKETING SECTION =================
   Background video plays at normal/original speed.
   Text comes upward on scroll without any blur effect.
=============================================================== */
.why-digital-section {
    --why-video-progress: 0;
    --why-title-progress: 0;
    --why-headline-progress: 0;
    --why-pill-progress: 0;
    --why-copy-progress: 0;
    position: relative;
    min-height: clamp(720px, 43vw, 860px);
    margin-top: -1px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.why-video-bg,
.why-video-bg::after,
.why-video-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.why-video-bg {
    z-index: -4;
    overflow: hidden;
    opacity: calc(0.42 + (var(--why-video-progress) * 0.22));
}

.why-video-bg::after {
    content: "";
    z-index: 2;
    background:
        radial-gradient(circle at 46% 34%, rgba(237,48,43,0.12), transparent 28%),
        linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.06) 18%, rgba(0,0,0,0.08) 72%, rgba(0,0,0,0.28) 100%);
    mix-blend-mode: screen;
    opacity: 0.82;
}

.why-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.64;
    filter: brightness(0.62) contrast(1.16) saturate(1.04);
    transform: scale(calc(1.015 + (var(--why-video-progress) * 0.018)));
    transform-origin: center;
}

.why-video-shade {
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.05) 42%, rgba(0,0,0,0.18) 100%),
        radial-gradient(circle at 50% 48%, rgba(75,0,0,0.20), transparent 38%);
}

.why-section-inner {
    position: relative;
    z-index: 3;
    width: min(100%, 1920px);
    min-height: clamp(720px, 43vw, 860px);
    margin: 0 auto;
    padding: clamp(88px, 8vw, 150px) clamp(70px, 8.65vw, 165px) clamp(72px, 6.4vw, 122px);
}

.why-main-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(26px, 2.25vw, 46px);
    width: 100%;    
}

.why-script {
    display: inline-block;
    color: #fff;
    font-family: var(--font-script), "The Andallass", "Brush Script MT", cursive;
    font-size: clamp(86px, 7.3vw, 154px);
    font-weight: 400;
    line-height: 0.72;
    letter-spacing: 0px;
    transform: translateY(5px) rotate(-2deg);
    text-shadow: 0 12px 34px rgba(255,255,255,0.13);
}

.why-main-title h2 {
    color: var(--stack-red, #ed312b);
    font-size: clamp(88px, 6.3vw, 138px);
    line-height: 0.82;
    font-weight: 950;
    letter-spacing: 0px;
    margin: 0;
    text-shadow: 0 22px 46px rgba(237,48,43,0.18);
}

.why-content-grid {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(520px, 0.94fr);
    align-items: start;
    gap: clamp(58px, 5.1vw, 105px);
    margin-top: clamp(92px, 7.6vw, 145px);
}

.why-left-copy h3 {
    color: #fff;
    font-size: clamp(64px, 3.80vw, 93px);
    line-height: 1.02;
    font-weight: 950;
    letter-spacing: 0px;
    margin: 0;
    text-shadow: 0 20px 44px rgba(0,0,0,0.38);
}

.why-left-copy h3 strong {
    color: var(--stack-red, #ed312b);
    font-weight: inherit;
}

.why-pill-row {
    width: fit-content;
    max-width: 100%;
    margin-top: clamp(24px, 2vw, 36px);
    padding: clamp(15px, 1.15vw, 22px) clamp(26px, 1.9vw, 38px);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(16,58,107,0.98), rgba(7,37,80,0.98));
    border: 2px solid rgba(28,80,157,0.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.13),
        0 20px 44px rgba(0,0,0,0.34),
        0 0 38px rgba(28,80,157,0.18);
    display: flex;
    align-items: center;
    gap: clamp(13px, 1.05vw, 12px);
    overflow: hidden;
}

.why-pill-row span {
    color: #fff;
    font-size: clamp(20px, 1.35vw, 30px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0px;
    white-space: nowrap;
}

.why-pill-row i {
    width: clamp(11px, 0.72vw, 15px);
    height: clamp(11px, 0.72vw, 15px);
    border-radius: 50%;
    background: var(--stack-red, #ed312b);
    flex: 0 0 auto;
    box-shadow: 0 0 12px rgba(237,48,43,0.45);
}

.why-copy {
    color: #fff;
    max-width: 760px;
    font-size: clamp(26px, 1.62vw, 30px);
    line-height: 1.72;
    font-weight: 400;
    letter-spacing: 0px;
    margin: 0;
    text-wrap: pretty;
    text-shadow: 0 16px 38px rgba(0,0,0,0.42);
}

.why-scroll-item {
    opacity: 0;
    transform: translate3d(0, 78px, 0) rotateX(8deg) scale(0.985);
    filter: none !important;
    will-change: opacity, transform;
}

.why-scroll-title {
    opacity: var(--why-title-progress);
    transform: translate3d(0, calc((1 - var(--why-title-progress)) * 76px), 0) rotateX(calc((1 - var(--why-title-progress)) * 8deg)) scale(calc(0.985 + (var(--why-title-progress) * 0.015)));
}

.why-scroll-headline {
    opacity: var(--why-headline-progress);
    transform: translate3d(0, calc((1 - var(--why-headline-progress)) * 76px), 0) rotateX(calc((1 - var(--why-headline-progress)) * 7deg)) scale(calc(0.985 + (var(--why-headline-progress) * 0.015)));
}

.why-scroll-pill {
    opacity: var(--why-pill-progress);
    transform: translate3d(0, calc((1 - var(--why-pill-progress)) * 54px), 0) scale(calc(0.975 + (var(--why-pill-progress) * 0.025)));
}

.why-scroll-copy {
    opacity: var(--why-copy-progress);
    transform: translate3d(0, calc((1 - var(--why-copy-progress)) * 74px), 0) rotateX(calc((1 - var(--why-copy-progress)) * 6deg)) scale(calc(0.985 + (var(--why-copy-progress) * 0.015)));
}

@media (max-width: 1360px) {
    .why-section-inner {
        padding-left: clamp(42px, 5vw, 70px);
        padding-right: clamp(42px, 5vw, 70px);
    }

    .why-content-grid {
        grid-template-columns: minmax(430px, 1fr) minmax(430px, 0.94fr);
        gap: 48px;
    }
}

@media (max-width: 1024px) {
    .why-digital-section,
    .why-section-inner {
        min-height: auto;
    }

    .why-section-inner {
        padding: 94px 34px 86px;
    }

    .why-main-title {
        justify-content: flex-start;
        padding-right: 0;
    }

    .why-content-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 74px;
    }

    .why-copy {
        max-width: 820px;
    }
}

@media (max-width: 720px) {
    .why-bg-video {
        object-position: 61% center;
        opacity: 0.56;
        filter: brightness(0.52) contrast(1.16) saturate(1.02);
    }

    .why-section-inner {
        padding: 78px 20px 72px;
    }

    .why-main-title {
        align-items: flex-start;
        gap: 16px;
    }

    .why-script {
        font-size: clamp(54px, 17vw, 80px);
        transform: translateY(2px) rotate(-2deg);
    }

    .why-main-title h2 {
        font-size: clamp(52px, 15vw, 76px);
    }

    .why-content-grid {
        margin-top: 70px;
        gap: 32px;
    }

    .why-left-copy h3 {
        font-size: clamp(42px, 12.4vw, 64px);
        letter-spacing: 0px;
    }

    .why-pill-row {
        width: 100%;
        padding: 16px 18px;
        border-radius: 28px;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px 14px;
    }

    .why-pill-row span {
        font-size: clamp(17px, 4.8vw, 22px);
    }

    .why-copy {
        font-size: clamp(20px, 5.4vw, 25px);
        line-height: 1.55;
        letter-spacing: 0px;
    }
}

@media (max-width: 430px) {
    .why-main-title {
        gap: 12px;
    }

    .why-script {
        font-size: 52px;
    }

    .why-main-title h2 {
        font-size: 50px;
    }

    .why-left-copy h3 {
        font-size: 40px;
    }
}


/* ================= RESPONSIVE VARIABLE OVERRIDES =================
   All major layout/font/padding changes are controlled from variables here.
   Browser CSS cannot reliably use var() inside @media conditions, so breakpoint
   numbers are mirrored from the :root breakpoint reference variables above.
=================================================================== */

@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(58px, 5.6vw, 98px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(36px, 3.35vw, 62px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(23px, 1.78vw, 34px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    :root {
        --hero-video-area-width: 100%;
        --brand-card-padding-x: clamp(24px, 5vw, 58px);
        --brand-grid-columns: minmax(260px, 360px) 1px 1fr;
        --brand-grid-gap: clamp(26px, 3.4vw, 48px);
        --brand-heading-align: left;
        --brand-copy-line-height: 1.65;
        --logo-marquee-width: calc(100% + (var(--brand-card-padding-x) * 2));
        --logo-marquee-margin-left: calc(var(--brand-card-padding-x) * -1);
    }

    .hero-left-fade {
        background:
            linear-gradient(90deg,
                rgba(0,0,0,1) 0%,
                rgba(0,0,0,0.96) 48%,
                rgba(0,0,0,0.58) 100%),
            radial-gradient(circle at 78% 38%, rgba(28,80,157,0.20), transparent 40%);
    }
}

@media (max-width: 820px) {
    :root {
        --brand-card-min-height: auto;
        --brand-card-padding-top: 48px;
        --brand-card-padding-x: 22px;
        --brand-card-radius: 34px 34px 0 0;
        --brand-grid-columns: 1fr;
        --brand-grid-gap: 26px;
        --brand-divider-width: 100%;
        --brand-divider-height: 1px;
        --brand-divider-bg: linear-gradient(90deg, transparent 0%, rgba(237,48,43,0.66) 18%, rgba(237,48,43,0.66) 82%, transparent 100%);
        --brand-heading-align: left;
        --brand-heading-span-font: clamp(32px, 8.8vw, 46px);
        --brand-heading-strong-font: clamp(52px, 14vw, 76px);
        --brand-copy-line-height: 1.58;
        --trusted-row-margin: 54px auto 42px;
        --trusted-row-grid: 1fr;
        --trusted-row-gap: 18px;
        --trusted-title-font: clamp(34px, 9vw, 48px);
        --trusted-title-white-space: normal;
        --trusted-title-line-height: 1.08;
        --trusted-row-text-align: center;
        --trusted-line-width: 100%;
        --logo-marquee-width: calc(100% + 44px);
        --logo-marquee-margin-left: -22px;
        --logo-track-gap: 12px;
        --logo-track-duration: 100s;
        --logo-card-basis: 218px;
        --logo-card-height: 106px;
        --logo-card-padding: 16px 22px;
    }
}

@media (max-width: 760px) {
    :root {
        --hero-pad-x: 20px;
        --hero-height: 165vh;
        --hero-min-height: 900px;
        --hero-sticky-min-height: 100svh;
        --hero-header-padding-top: 24px;
        --hero-header-align-items: center;
        --hero-logo-width: 138px;
        --hero-nav-gap: 9px;
        --talk-height: 45px;
        --talk-min-width: auto;
        --talk-padding-x: 17px;
        --talk-font: 13px;
        --menu-height: 43px;
        --menu-padding: 0 14px 0 16px;
        --menu-gap: 10px;
        --menu-font: 13px;
        --hero-content-top: 55%;
        --hero-eyebrow-font: clamp(22px, 7vw, 31px);
        --hero-eyebrow-padding: 14px 19px 15px;
        --hero-eyebrow-letter-spacing: 0px;
        --hero-title-margin-top: 48px;
        --hero-title-font: clamp(56px, 15vw, 84px);
        --hero-title-line-height: 0.96;
        --hero-title-gap: 20px;
        --hero-title-letter-spacing: 0px;
        --hero-title-small-font: clamp(39px, 10.4vw, 58px);
        --explore-margin-top: 42px;
        --explore-width: 184px;
        --explore-height: 56px;
        --explore-font: 14px;
        --watermark-bottom: -12px;
        --watermark-font: 92px;
        --scroll-hint-bottom: 20px;
    }
}

@media (max-width: 480px) {
    :root {
        --hero-logo-width: 116px;
        --talk-display: none;
        --hero-title-font: 54px;
        --hero-title-small-font: 37px;
    }
}

@media (max-width: 460px) {
    :root {
        --brand-card-padding-top: 42px;
        --brand-card-padding-x: 18px;
        --brand-card-radius: 28px 28px 0 0;
        --brand-heading-strong-font: 50px;
        --brand-copy-line-height: 1.62;
        --trusted-title-font: 32px;
        --logo-marquee-width: calc(100% + 36px);
        --logo-marquee-margin-left: -18px;
        --logo-card-basis: 190px;
        --logo-card-height: 94px;
        --logo-card-radius: 14px;
        --logo-card-padding: 14px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-logo-track {
        animation-duration: 90s;
    }

    .observe-reveal {
        transition-duration: 0.01ms;
        transform: none;
        filter: none;
    }
}

@media (pointer: coarse) {
    .cursor-dot,
    .cursor-ring {
        display: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    body.hero-intro-prep:not(.hero-intro-done) .hero-content .scroll-reveal,
    body.hero-intro-prep:not(.hero-intro-done) .stack-watermark.scroll-reveal {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }
}
/* ================================
   Services reel section
   Added below Why Digital Marketing
   ================================ */
.services-reel-section {
    --service-progress: 0;
    --service-active: 0;
    position: relative;
    height: 420vh;
    min-height: 2800px;
    background: #020407;
    overflow: clip;
}

.services-reel-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 680px;
    overflow: hidden;
    isolation: isolate;
    background: #020407;
}

.services-video-layer {
    position: absolute;
    inset: 0;
    z-index: -8;
    background: #020407;
    overflow: hidden;
}

.service-reel-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.12);
    filter: saturate(1.06) contrast(1.12) brightness(0.58);
    transition: opacity 0.45s ease, filter 0.45s ease;
    will-change: opacity, transform, filter;
}

.service-reel-video.is-active {
    opacity: 1;
}

.services-dark-overlay {
    position: absolute;
    inset: 0;
    z-index: -7;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 34%, rgba(28, 80, 157, 0.23), rgba(28, 80, 157, 0) 32%),
        linear-gradient(90deg, rgba(2, 4, 7, 0.97) 0%, rgba(2, 4, 7, 0.80) 34%, rgba(2, 4, 7, 0.22) 100%),
        linear-gradient(180deg, rgba(2, 4, 7, 0.82) 0%, rgba(2, 4, 7, 0.08) 42%, rgba(2, 4, 7, 0.96) 100%);
}

.services-blue-glow,
.services-red-glow {
    position: absolute;
    z-index: -6;
    aspect-ratio: 1;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(22px);
    will-change: transform, opacity;
}

.services-blue-glow {
    right: -10%;
    top: 2%;
    width: clamp(270px, 34vw, 620px);
    background: radial-gradient(circle, rgba(28, 80, 157, 0.42), rgba(28, 80, 157, 0) 68%);
    opacity: calc(0.22 + (var(--service-progress) * 0.35));
    transform: translate3d(calc(var(--service-progress) * 70px), calc(var(--service-progress) * -32px), 0) scale(calc(0.92 + (var(--service-progress) * 0.22)));
}

.services-red-glow {
    left: -14%;
    bottom: -10%;
    width: clamp(270px, 32vw, 610px);
    background: radial-gradient(circle, rgba(237, 48, 43, 0.42), rgba(237, 48, 43, 0) 68%);
    opacity: calc(0.28 + (var(--service-progress) * 0.25));
    transform: translate3d(calc(var(--service-progress) * -48px), calc(var(--service-progress) * 28px), 0) scale(calc(0.9 + (var(--service-progress) * 0.28)));
}

.services-copy-stage {
    position: absolute;
    left: clamp(24px, 5.6vw, 104px);
    right: clamp(22px, 5vw, 88px);
    bottom: clamp(64px, 10vh, 126px);
    z-index: 4;
    min-height: clamp(320px, 45vh, 520px);
    color: #fff;
    pointer-events: none;
    transform-style: preserve-3d;
}

.service-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(1180px, 100%);
    opacity: 0;
    transform: translate3d(0, 92px, 0) scale(0.985) rotateX(5deg);
    visibility: hidden;
    will-change: transform, opacity;
}

.service-panel.is-active {
    visibility: visible;
}

.service-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(74px, 7.4vw, 130px);
    margin-bottom: clamp(18px, 2.25vw, 32px);
    color: var(--stack-red, #ed302b);
    font-family: var(--font-display);
    font-size: clamp(58px, 8.2vw, 138px);
    font-weight: 900;
    line-height: 0.78;
    letter-spacing: 0px;
    text-shadow: 0 0 46px rgba(237, 48, 43, 0.44);
}

.service-panel h2 {
    max-width: 1120px;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(58px, 10vw, 156px);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: 0px;
    word-spacing: 0.04em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 28px 90px rgba(0, 0, 0, 0.64), 0 0 56px rgba(28, 80, 157, 0.16);
}

.service-panel h2 span {
    display: block;
}

.service-panel p {
    max-width: 680px;
    margin-top: clamp(22px, 2.4vw, 34px);
    color: rgba(255, 255, 255, 0.82);
    font-size: clamp(16px, 1.22vw, 22px);
    font-weight: 500;
    line-height: 1.56;
    letter-spacing: 0px;
}

.service-connect-link {
    width: max-content;
    margin-top: clamp(26px, 3vw, 42px);
    padding: 15px 22px 14px;
    border: 1px solid rgba(28, 80, 157, 0.62);
    border-radius: 999px;
    background: rgba(4, 15, 33, 0.56);
    color: rgba(255, 255, 255, 0.94);
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    font-size: clamp(12px, 0.95vw, 15px);
    font-weight: 900;
    letter-spacing: 0px;
    pointer-events: auto;
    backdrop-filter: blur(14px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 18px 42px rgba(0,0,0,0.22);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.service-connect-link:hover {
    border-color: rgba(237, 48, 43, 0.68);
    background: rgba(237, 48, 43, 0.18);
}

.service-connect-link i {
    color: var(--stack-red, #ed302b);
    font-style: normal;
    font-size: 1.15em;
}

@media (max-width: 1024px) {
    .services-reel-section {
        height: 390vh;
        min-height: 2450px;
    }

    .services-reel-sticky {
        min-height: 100svh;
    }

    .services-dark-overlay {
        background:
            radial-gradient(circle at 76% 25%, rgba(28, 80, 157, 0.2), rgba(28, 80, 157, 0) 34%),
            linear-gradient(180deg, rgba(2, 4, 7, 0.54) 0%, rgba(2, 4, 7, 0.42) 34%, rgba(2, 4, 7, 0.98) 100%);
    }

    .services-copy-stage {
        left: 24px;
        right: 24px;
        bottom: clamp(58px, 9vh, 94px);
    }

    .service-panel h2 {
        font-size: clamp(54px, 13vw, 118px);
        line-height: 0.86;
    }
}

@media (max-width: 767px) {
    .services-reel-section {
        height: 360vh;
        min-height: 2250px;
    }

    .service-reel-video {
        object-position: center center;
        transform: scale(1.18);
        filter: saturate(1.04) contrast(1.08) brightness(0.52);
    }

    .services-copy-stage {
        left: 18px;
        right: 18px;
        bottom: 52px;
        min-height: 390px;
    }

    .service-number {
        font-size: clamp(46px, 15vw, 72px);
        margin-bottom: 10px;
    }

    .service-panel h2 {
        max-width: 94vw;
        font-size: clamp(42px, 15vw, 72px);
        line-height: 0.9;
        letter-spacing: 0px;
    }

    .service-panel p {
        max-width: 92vw;
        margin-top: 18px;
        font-size: 15px;
        line-height: 1.5;
    }

    .service-connect-link {
        margin-top: 22px;
        padding: 13px 18px 12px;
        font-size: 11px;
    }
}

@media (max-width: 440px) {
    .services-copy-stage {
        bottom: 44px;
    }

    .service-panel h2 {
        font-size: clamp(38px, 14.5vw, 58px);
    }
}

/* ================================
   Stack91 services overlay section
   Added below Why Digital Marketing only
   ================================ */
.stack-services-section {
    position: relative;
    height: 260vh;
    min-height: 1880px;
    background: #020914;
    overflow: clip;
    isolation: isolate;
}

.stack-services-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    background: #020914;
    isolation: isolate;
}

.stack-services-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #020914;
}

.stack-service-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1.08);
    filter: brightness(0.82) contrast(1.08) saturate(1.08);
    transition: opacity 0.85s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1);
    will-change: opacity, transform;
}

.stack-service-video.is-active {
    opacity: 0.88;
    transform: scale(1.02);
}

.stack-services-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 25, 52, 0.78) 0%, rgba(5, 25, 52, 0.62) 42%, rgba(5, 25, 52, 0.28) 72%, rgba(5, 25, 52, 0.46) 100%),
        radial-gradient(circle at 72% 22%, rgba(28, 80, 157, 0.10), transparent 36%),
        linear-gradient(180deg, rgba(4, 18, 38, 0.16), rgba(4, 18, 38, 0.56));
}

.stack-services-blue,
.stack-services-red {
    position: absolute;
    z-index: 2;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(35px);
    opacity: 0.42;
}

.stack-services-blue {
    top: -18%;
    right: -9%;
    width: clamp(360px, 42vw, 720px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(28, 80, 157, 0.48), transparent 66%);
}

.stack-services-red {
    left: -15%;
    bottom: -22%;
    width: clamp(280px, 34vw, 580px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(237, 48, 43, 0.32), transparent 68%);
}

.stack-services-content {
    position: relative;
    z-index: 4;
    width: min(1600px, calc(100% - clamp(42px, 8vw, 190px)));
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.stack-service-card {
    position: absolute;
    left: 0;
    width: min(1120px, 100%);
    padding-top: clamp(26px, 3.6vw, 58px);
    color: #ffffff;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 86px, 0);
    transition:
        opacity 0.86s cubic-bezier(.19,1,.22,1),
        transform 0.86s cubic-bezier(.19,1,.22,1),
        visibility 0.86s cubic-bezier(.19,1,.22,1);
    will-change: opacity, transform;
}

.stack-service-card.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

.stack-service-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(190px, 14vw, 250px);
    height: clamp(58px, 5vw, 84px);
    margin-bottom: clamp(100px, 14vh, 180px);
    padding: 0 clamp(28px, 3vw, 48px);
    border-radius: 999px;
    background: rgba(28, 80, 157, 0.82);
    color: #ffffff;
    font-family: var(--font-primary, "Gilmer", Arial, sans-serif);
    font-size: clamp(20px, 1.65vw, 30px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 80px rgba(0,0,0,0.18);
}

.stack-service-card h2 {
    max-width: 1200px;
    color: #ffffff;
    font-family: var(--font-display, "Gilmer", Arial, sans-serif);
    font-size: clamp(64px, 6.2vw, 72px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: 0px;
    word-spacing: 0.04em;
    text-wrap: balance;
    padding-top: 50px;
}

.stack-service-card h2 span {
    display: inline-block;
}


.stack-service-card p {
    max-width: 940px;
    margin-top: clamp(0px, 1vw, 10px);
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--font-primary, "Gilmer", Arial, sans-serif);
    font-size: clamp(24px, 2vw, 24px);
    font-weight: 400;
    line-height: 1.42;
    letter-spacing: 0px;
}

.stack-service-line {
    width: min(960px, 100%);
    height: 1px;
    margin: clamp(34px, 3vw, 54px) 0 clamp(24px, 1.6vw, 0px);
    background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(28,80,157,0.35), rgba(255,255,255,0.08));
}

.stack-service-points {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: clamp(22px, 0vw, 0px) clamp(0px, 0vw, 0px);
    list-style: none;
}

.stack-service-points li {
    position: relative;
    padding-left: 34px;
    color: #ffffff;
    font-family: var(--font-primary, "Gilmer", Arial, sans-serif);
    font-size: clamp(22px, 1.85vw, 26px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: 0px;
}

.stack-service-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--stack-red, #ed302b);
    box-shadow: 0 0 18px rgba(237, 48, 43, 0.35);
}

.stack-service-btn {
    width: max-content;
    min-width: clamp(235px, 19vw, 332px);
    height: clamp(68px, 6vw, 88px);
    margin-top: clamp(44px, 4.3vw, 70px);
    padding: 0 clamp(34px, 3.4vw, 54px);
    border-radius: 999px;
    background: var(--stack-red, #ed302b);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-display, "Gilmer", Arial, sans-serif);
    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0px;
    box-shadow: 0 28px 80px rgba(237, 48, 43, 0.24), inset 0 1px 0 rgba(255,255,255,0.18);
    transition: transform 0.32s ease, box-shadow 0.32s ease;
}
span.stack-service-pill.h5-size {
    margin: 70px 0px;
}

.stack-service-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 94px rgba(237, 48, 43, 0.34), inset 0 1px 0 rgba(255,255,255,0.22);
}


@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(54px, 5.2vw, 92px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(34px, 3.1vw, 58px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(22px, 1.65vw, 32px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    .stack-services-section {
        height: 240vh;
        min-height: 1680px;
    }

    .stack-services-sticky {
        min-height: 700px;
    }

    .stack-services-content {
        width: calc(100% - 48px);
    }

    .stack-service-pill {
        margin-bottom: clamp(72px, 9vh, 120px);
    }

    .stack-service-card h2 {
        font-size: clamp(58px, 8.3vw, 92px);
    }

    .stack-service-card p {
        max-width: 780px;
        font-size: clamp(21px, 2.45vw, 29px);
    }

    .stack-service-points li {
        font-size: clamp(19px, 2.35vw, 27px);
    }
}

@media (max-width: 767px) {
    .stack-services-section {
        height: auto;
        min-height: 0;
        padding: 70px 0;
    }

    .stack-services-sticky {
        position: relative;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .stack-services-content {
        width: calc(100% - 36px);
        min-height: auto;
        display: block;
    }

    .stack-service-video {
        position: absolute;
        min-height: 100%;
        transform: scale(1.12);
    }

    .stack-service-video.is-active {
        opacity: 0.72;
        transform: scale(1.08);
    }

    .stack-service-card {
        position: relative;
        width: 100%;
        padding-top: 0;
        margin-bottom: 58px;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .stack-service-card:last-child {
        margin-bottom: 0;
    }

    .stack-service-pill {
        min-width: 160px;
        height: 54px;
        margin-bottom: 62px;
        padding: 0 28px;
        font-size: 19px;
    }

    .stack-service-card h2 {
        font-size: clamp(45px, 13vw, 68px);
        line-height: 0.94;
        letter-spacing: 0px;
    }

    .stack-service-card p {
        max-width: 100%;
        margin-top: 24px;
        font-size: 21px;
        line-height: 1.4;
        letter-spacing: 0px;
    }

    .stack-service-line {
        margin: 30px 0 26px;
    }

    .stack-service-points {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .stack-service-points li {
        padding-left: 28px;
        font-size: 21px;
        line-height: 1.2;
    }

    .stack-service-points li::before {
        width: 12px;
        height: 12px;
    }

    .stack-service-btn {
        min-width: 220px;
        height: 66px;
        margin-top: 36px;
        font-size: 21px;
    }
}

@media (max-width: 420px) {
    .stack-services-section {
        padding: 58px 0;
    }

    .stack-services-content {
        width: calc(100% - 28px);
    }

    .stack-service-pill {
        margin-bottom: 52px;
    }

    .stack-service-card h2 {
        font-size: 42px;
    }

    .stack-service-card p,
    .stack-service-points li {
        font-size: 18px;
    }
}

/* ================================
   Service section text spacing polish
   Scope: text/layout only. Original background/video styling remains untouched.
   ================================ */
@media (min-width: 768px) {
    .stack-services-content {
        width: 100%;
        max-width: none;
        margin: 0;
        padding-left: clamp(38px, 2.65vw, 52px);
        padding-right: 0;
        align-items: flex-start;
    }

    .stack-service-card {
        top: clamp(22px, 2.75vh, 28px);
        left: clamp(38px, 2.65vw, 52px);
        width: min(760px, calc(48.35vw - clamp(78px, 5.4vw, 104px)));
        padding-top: 0;
    }

    .stack-service-pill {
        min-width: clamp(206px, 12.08vw, 218px);
        height: clamp(62px, 7.95vh, 69px);
        margin-bottom: clamp(130px, 18vh, 156px);
        padding: 0 clamp(30px, 2.25vw, 40px);
        font-size: clamp(22px, 1.35vw, 25px);
        letter-spacing: 0px;
    }

    /* .stack-service-card h2,
    .stack-service-card p,
    .stack-service-line,
    .stack-service-points {
        margin-left: clamp(14px, 0.95vw, 18px);
    } */

    .stack-service-card h2 {
        max-width: 720px;
        font-size: clamp(60px, 4.33vw, 78px);
        line-height: 0.94;
        letter-spacing: 0px;
        word-spacing: 0.03em;
    }

    .stack-service-card p {
        max-width: 675px;
        margin-top: clamp(30px, 3.7vh, 36px);
        font-size: clamp(24px, 1.55vw, 28px);
        line-height: 1.42;
        letter-spacing: 0px;
    }

    .stack-service-line {
        width: min(662px, calc(100% - clamp(14px, 0.95vw, 18px)));
        margin-top: clamp(36px, 4.8vh, 43px);
        margin-bottom: clamp(28px, 3.3vh, 32px);
    }

    .stack-service-points {
        width: min(680px, calc(100% - clamp(14px, 0.95vw, 18px)));
        grid-template-columns: minmax(248px, 0.9fr) minmax(330px, 1.2fr);
        column-gap: clamp(32px, 2.1vw, 38px);
        row-gap: clamp(26px, 3.3vh, 31px);
    }

    .stack-service-points li {
        padding-left: 34px;
        font-size: clamp(23px, 1.5vw, 27px);
        line-height: 1.16;
        letter-spacing: 0px;
    }

    .stack-service-points li::before {
        top: 0.44em;
        width: 15px;
        height: 15px;
    }

    .stack-service-btn {
        min-width: clamp(260px, 16.1vw, 291px);
        height: clamp(70px, 8.75vh, 76px);
        margin-top: clamp(43px, 5.3vh, 48px);
        margin-left: clamp(8px, 0.65vw, 12px);
        padding: 0 clamp(34px, 2.45vw, 44px);
        font-size: clamp(21px, 1.38vw, 25px);
        letter-spacing: 0px;
    }
}

/* ================================
   Full site equal container alignment
   Scope: only left/right container consistency from top to bottom.
   Backgrounds, videos, animations and existing content styling remain untouched.
   ================================ */
:root {
    --site-container-max-width: 1760px;
    --hero-pad-x: var(--section-padding-x);
}

.stack-container {
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
}

.hero-header {
    left: 50%;
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    padding-left: 0;
    padding-right: 0;
    transform: translateX(-50%);
}

.hero-content {
    left: 50%;
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    max-width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    padding-left: 0;
    transform: translate3d(-50%, -50%, 0);
}

.hero-eyebrow {
    max-width: 100%;
}

.stack-watermark {
    left: max(var(--section-padding-x), calc((100% - var(--site-container-max-width)) / 2));
}

.brand-trust-section {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
}

.brand-trust-card {
    width: min(var(--site-container-max-width), 100%);
}

.why-section-inner {
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    padding-left: 0;
    padding-right: 0;
}

.stack-services-content {
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    max-width: var(--site-container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.stack-service-card {
    left: 0;
}

@media (max-width: 767px) {
    .hero-header,
    .hero-content,
    .why-section-inner,
    .stack-services-content,
    .stack-container {
        width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    }

    .stack-services-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ================================
   Stack91 class-based typography lock
   Final font sizes are controlled from HTML utility classes only:
   h1-size / h2-size / h3-size / h4-size / h5-size / h6-size / p-size / list-size.
   This keeps all headings, paragraphs, lists and buttons consistent across the full site.
   ================================ */
.h1-size { font-size: var(--font-h1) !important; }
.h2-size { font-size: var(--font-h2) !important; }
.h3-size { font-size: var(--font-h3) !important; }
.h4-size { font-size: var(--font-h4) !important; }
.h5-size { font-size: var(--font-h5) !important; }
.h6-size { font-size: var(--font-h6) !important; }
.p-size { font-size: var(--font-p) !important; }
.list-size,
.list-size > li,
.list-size li { font-size: var(--font-list) !important; }


/* ================================
   Stack91 CTA section
   Uses existing stack-container, section-padding-block and tag-size utility classes.
   ================================ */
.stack-cta-section {
    position: relative;
    background: #000;
    overflow: hidden;
}

.stack-cta-card {
    position: relative;
    min-height: clamp(340px, 21.8vw, 420px);
    border-radius: clamp(24px, 1.9vw, 36px);
    overflow: hidden;
    background: #841b1d;
    isolation: isolate;
    box-shadow:
        0 42px 90px rgba(0,0,0,0.38),
        inset 0 1px 0 rgba(255,255,255,0.08);
}

.stack-cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(132,27,29,1) 0%,
            rgba(132,27,29,1) 47%,
            rgba(132,27,29,0.92) 58%,
            rgba(132,27,29,0.52) 70%,
            rgba(0,0,0,0.06) 100%);
}

.stack-cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 45%, rgba(0,0,0,0.12)),
        radial-gradient(circle at 24% 50%, rgba(237,48,43,0.20), transparent 48%);
}

.stack-cta-content {
    position: relative;
    z-index: 4;
    min-height: inherit;
    width: min(1180px, 72%);
    padding: clamp(50px, 5.8vw, 112px) clamp(46px, 6vw, 116px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.stack-cta-content h2 {
    color: #fff;
    max-width: none;
    margin: 0;
    white-space: nowrap;
    text-shadow: 0 18px 44px rgba(0,0,0,0.28);
}

.stack-cta-content p {
    max-width: 650px;
    margin: clamp(18px, 1.4vw, 26px) 0 0;
    color: rgba(255,255,255,0.95);
}

.stack-cta-btn {
    margin-top: clamp(24px, 1.9vw, 34px);
    min-width: clamp(210px, 12.9vw, 248px);
    min-height: clamp(62px, 4.4vw, 72px);
    padding: 0 clamp(28px, 2.2vw, 42px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(237,48,43,0.88);
    border-radius: 999px;
    background: rgba(178,20,19,0.28);
    color: #fff;
    text-decoration: none;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 22px 54px rgba(0,0,0,0.24);
    transition: transform 0.32s ease, background 0.32s ease, box-shadow 0.32s ease;
}

.stack-cta-btn:hover {
    background: rgba(237,48,43,0.34);
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 28px 64px rgba(0,0,0,0.28);
}

.stack-cta-visual {
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: clamp(560px, 38.5%, 666px);
    height: 100%;
    pointer-events: none;
}

.stack-cta-visual img {
    width: 100%;
    height: 101%;
    display: block;
    object-fit: cover;
    object-position: right center;
}


@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(54px, 5.2vw, 92px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(34px, 3.1vw, 58px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(22px, 1.65vw, 32px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    .stack-cta-card::before {
        background:
            linear-gradient(90deg,
                rgba(132,27,29,1) 0%,
                rgba(132,27,29,1) 54%,
                rgba(132,27,29,0.84) 70%,
                rgba(0,0,0,0.16) 100%);
    }

    .stack-cta-content {
        width: min(900px, 78%);
        padding: clamp(46px, 5vw, 72px) clamp(34px, 5vw, 62px);
    }

    .stack-cta-visual {
        width: clamp(500px, 46%, 620px);
    }
}

@media (max-width: 767px) {
    .stack-cta-card {
        min-height: 560px;
    }

    .stack-cta-card::before {
        background:
            linear-gradient(180deg,
                rgba(132,27,29,1) 0%,
                rgba(132,27,29,0.98) 48%,
                rgba(132,27,29,0.74) 68%,
                rgba(0,0,0,0.24) 100%);
    }

    .stack-cta-content {
        width: 100%;
        min-height: auto;
        padding: 42px 28px;
        justify-content: flex-start;
    }

    .stack-cta-content h2,
    .stack-cta-content p {
        max-width: 100%;
    }

    .stack-cta-content h2 {
        white-space: normal;
    }

    .stack-cta-visual {
        inset: auto 0 0 0;
        width: 100%;
        height: 48%;
    }
}

@media (max-width: 440px) {
    .stack-cta-card {
        min-height: 520px;
        border-radius: 22px;
    }

    .stack-cta-content {
        padding: 36px 22px;
    }
}



/* ================================
   Stack91 Our Work + Testimonials
   Text sizes use existing HTML utility classes.
   Our Work uses drag/scroll, no buttons.
   ================================ */
.stack-work-section {
    position: relative;
    background: #000;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.stack-work-section::before {
    content: "";
    position: absolute;
    inset: auto -12% -28% auto;
    width: 42vw;
    height: 42vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,48,43,0.16), transparent 64%);
    pointer-events: none;
}

.stack-work-card {
    position: relative;
    overflow: hidden;
    border-radius: clamp(28px, 2.2vw, 44px);
    background: linear-gradient(180deg, #092a58 0%, #06182f 100%);
    padding: clamp(54px, 5vw, 92px) clamp(46px, 5.2vw, 96px) clamp(60px, 5.6vw, 104px);
    box-shadow: 0 42px 100px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}

.stack-work-head {
    display: grid;
    grid-template-columns: minmax(280px, 0.56fr) 1px minmax(420px, 1fr);
    align-items: center;
    gap: clamp(34px, 3.2vw, 64px);
    margin-bottom: clamp(44px, 4vw, 76px);
}

.stack-work-head h2,
.stack-work-head h3,
.stack-work-head p {
    margin: 0;
}

.stack-work-head h2,
.stack-work-head h3 {
    color: #fff;
    letter-spacing: 0px;
    text-align: left;
}

.stack-work-head > span {
    display: block;
    width: 1px;
    height: clamp(72px, 6vw, 112px);
    background: rgba(78,137,255,0.85);
}

.stack-work-head p {
    max-width: 964px;
    margin-top: clamp(10px, 0.9vw, 16px);
    color: rgba(255,255,255,0.9);
    line-height: 1.35;    
}

.stack-work-slider {
    position: relative;
}

.stack-work-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    user-select: none;
}

.stack-work-viewport::-webkit-scrollbar {
    display: none;
}

.stack-work-viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.stack-work-viewport.is-dragging .stack-work-item {
    pointer-events: none;
}

.stack-work-track {
    display: flex;
    gap: clamp(28px, 2.6vw, 52px);
    width: max-content;
    will-change: transform;
}

.stack-work-item {
    flex: 0 0 min(560px, 39vw);
    min-height: clamp(300px, 25vw, 480px);
    border-radius: clamp(22px, 1.6vw, 34px);
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 28px 60px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
}

.stack-work-item img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transform: scale(1.02);
    transition: transform 0.5s ease;
}

.stack-work-item:hover img {
    transform: scale(1.07);
}

.stack-testimonial-slider {
    position: relative;
    overflow: hidden;
    margin-top: clamp(46px, 4.8vw, 92px);
}

.stack-testimonial-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(.76,0,.24,1);
    will-change: transform;
}

.stack-testimonial-card {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 14vw, 280px);
    gap: clamp(32px, 4vw, 80px);
    align-items: center;
    min-height: clamp(190px, 16vw, 290px);
}

.stack-testimonial-copy p,
.stack-testimonial-copy span {
    margin: 0;
}

.stack-testimonial-copy p {
    max-width: 980px;
    color: #fff;
    line-height: 1.34;
    letter-spacing: 0px;
}

.stack-testimonial-copy span {
    display: block;
    margin-top: clamp(18px, 1.4vw, 28px);
    color: rgba(255,255,255,0.72);
}

.stack-testimonial-card img {
    width: 100%;
    max-height: clamp(96px, 8.4vw, 160px);
    object-fit: contain;
    justify-self: end;
    padding: clamp(14px, 1.4vw, 26px);
    border-radius: clamp(18px, 1.4vw, 28px);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 24px 54px rgba(0,0,0,0.26);
}


@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(54px, 5.2vw, 92px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(34px, 3.1vw, 58px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(22px, 1.65vw, 32px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    .stack-work-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .stack-work-head > span {
        width: 100%;
        height: 1px;
    }

    .stack-work-item {
        flex-basis: min(520px, 85vw);
    }
}

@media (max-width: 767px) {
    .stack-work-card {
        padding: 34px 20px 44px;
        border-radius: 24px;
    }

    .stack-work-item {

        min-height: 300px;
    }

    .stack-testimonial-card {
        grid-template-columns: 1fr;
    }

    .stack-testimonial-card img {
        justify-self: center;
        max-width: 220px;
    }
}

/* ================================
   Stack91 How We Work section
   Section spacing and text size use existing classes in HTML:
   stack-container, section-padding-block, h1-size, h3-size, h5-size, h6-size, p-size, list-size.
   ================================ */
.how-work-section{--how-progress:0;--how-rotation:0deg;--how-rotation-negative:0deg;position:relative;min-height:calc(100vh * 5.2);background:#000;color:#fff;overflow:visible;isolation:isolate;}
.how-work-section::before{content:"";position:absolute;inset:0;z-index:-3;background:radial-gradient(circle at 68% 54%,rgba(237,48,43,.16),transparent 34%),radial-gradient(circle at 16% 70%,rgba(28,80,157,.12),transparent 34%),#000;}
.how-work-section>.stack-container{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;}
.how-work-heading{position:relative;z-index:3;text-align:center;margin-bottom:clamp(48px,5.2vw,94px);}
.how-work-heading h2{margin:0;letter-spacing: 0px;line-height:.88;white-space:nowrap;}
.how-work-heading p{margin:clamp(14px,1.25vw,22px) 0 0;color:#fff;font-weight:800;line-height:1.12;}
.how-work-heading span,.how-work-heading strong,.how-work-kicker{color:var(--stack-red);}
.how-work-board{position:relative;z-index:2;min-height:clamp(560px,58vh,700px);display:grid;grid-template-columns:minmax(420px,.92fr) minmax(560px,1.08fr);gap:clamp(46px,5vw,96px);align-items:center;}
.how-work-bg{position:absolute;left:max(-190px,-13vw);bottom:max(-260px,-17vw);width:min(760px,54vw);z-index:-2;opacity:.28;filter:blur(5px) brightness(.6) saturate(1.2);pointer-events:none;}
.how-work-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 46% 48%,transparent 0 34%,rgba(0,0,0,.52) 64%,#000 100%);}
.how-work-bg img{width:100%;height:auto;transform:rotate(-12deg) scale(1.26);transform-origin:left bottom;}
.how-work-copy{position:relative;min-height:clamp(420px,34vw,520px);z-index:4;}
.how-work-panel{position:absolute;inset:0;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translate3d(0,28px,0);transition:opacity .42s ease,visibility .42s ease,transform .42s ease;}
.how-work-panel.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0);}
.how-work-kicker{display:block;margin-bottom:clamp(14px,1.4vw,22px);font-weight:900;line-height:1;}
.how-work-panel h3{max-width:700px;margin:0;letter-spacing: 0px;line-height:.98;}
.how-work-panel p{max-width:720px;margin:clamp(22px,2vw,34px) 0 0;color:rgba(255,255,255,.86);}
.how-work-points{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:clamp(18px,1.8vw,34px);margin:clamp(26px,2.6vw,42px) 0 0;padding:0px;list-style:none;}
.how-work-points li{position:relative;padding-left:1.25em;color:rgba(255,255,255,.92);white-space:nowrap;}
.how-work-points li::before{content:"";position:absolute;left:0;top:.56em;width:.42em;height:.42em;border-radius:50%;background:var(--stack-red);box-shadow:0 0 18px rgba(237,48,43,.45);}
.how-work-dots{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:clamp(12px,1.1vw,20px);}
.how-work-dots button{width:clamp(38px,2.8vw,48px);height:clamp(38px,2.8vw,48px);border-radius:50%;border:1px solid rgba(28,80,157,.92);background:rgba(1,20,44,.82);color:#fff;display:grid;place-items:center;transition:transform .28s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease;}
.how-work-dots button.is-active{background:var(--stack-red);border-color:var(--stack-red);transform:translateY(-2px);box-shadow:0 18px 34px rgba(237,48,43,.28);}
.how-work-orbit{--orbit-size:min(620px,42vw);--orbit-radius:calc(var(--orbit-size) * .45);position:relative;width:var(--orbit-size);aspect-ratio:1;margin-left:auto;display:grid;place-items:center;isolation:isolate;}
.how-work-orbit::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,rgba(237,48,43,.2),transparent 67%);filter:blur(10px);opacity:.9;animation:howOrbitGlow 4.8s ease-in-out infinite;}
.how-orbit-ring{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at center,#b81f24 0%,#9e1b1f 42%,#721417 100%);box-shadow:inset 0 0 0 2px rgba(237,48,43,.82),inset 0 0 0 28px rgba(255,255,255,.06),inset 0 0 0 62px rgba(0,0,0,.22),0 32px 80px rgba(0,0,0,.55);transform:rotate(var(--how-rotation,0deg));transform-origin:center;will-change:transform;}
.how-orbit-ring::before,.how-orbit-ring::after{content:"";position:absolute;border-radius:50%;pointer-events:none;}
.how-orbit-ring::before{inset:17%;border:2px solid rgba(237,48,43,.72);}
.how-orbit-ring::after{inset:29%;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);}
.how-orbit-core{position:relative;z-index:3;width:36%;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#050505;box-shadow:0 24px 70px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);}
.how-orbit-core strong{display:block;line-height:.85;font-size:clamp(68px,6.1vw,104px);font-weight:900;color:var(--stack-red);letter-spacing: 0px;}.how-orbit-core span{display:block;margin-top:4px;font-size:clamp(12px,.95vw,16px);font-weight:800;letter-spacing: 0px;color:rgba(255,255,255,.88);}
.how-orbit-node{position:absolute;left:50%;top:50%;z-index:4;width:clamp(110px,8vw,136px);min-height:clamp(96px,7.2vw,124px);padding:12px 10px;border:2px solid rgba(255,255,255,.68);border-radius:clamp(18px,1.2vw,26px);background:rgba(8,8,8,.92);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;transform:translate(-50%,-50%) rotate(calc(var(--angle) + var(--how-rotation,0deg))) translateX(var(--orbit-radius)) rotate(calc(var(--angle-negative) + var(--how-rotation-negative,0deg)));transform-origin:center;box-shadow:0 20px 48px rgba(0,0,0,.34);transition:background .32s ease,border-color .32s ease,box-shadow .32s ease,transform .32s ease;will-change:transform;}
.how-orbit-node strong{line-height:.86;font-weight:900;color:#fff;letter-spacing: 0px;}
.how-orbit-node span{color:#fff;line-height:1;font-weight:800;letter-spacing: 0px;text-transform:uppercase;}
.how-orbit-node span.h6-size{font-size:calc(var(--font-h6) - 3px) !important;}
.how-orbit-node.is-active{background:var(--stack-red);border-color:var(--stack-red);box-shadow:0 28px 64px rgba(237,48,43,.36),0 0 0 10px rgba(237,48,43,.08);}
@keyframes howOrbitGlow{0%,100%{transform:scale(.98);opacity:.72;}50%{transform:scale(1.05);opacity:1;}}
@media (max-width:1180px){.how-work-section{min-height:auto;}.how-work-section>.stack-container{position:relative;top:auto;min-height:auto;display:block;}.how-work-heading h2{white-space:normal;}.how-work-board{grid-template-columns:1fr;min-height:auto;}.how-work-copy{min-height:520px;order:2;}.how-work-orbit{--orbit-size:min(560px,78vw);--orbit-radius:calc(var(--orbit-size) * .45);margin-inline:auto;order:1;}.how-work-bg{width:min(720px,82vw);}}
@media (max-width:767px){.how-work-heading{text-align:left;margin-bottom:42px;}.how-work-board{gap:38px;}.how-work-copy{min-height:570px;}.how-work-orbit{--orbit-size:min(410px,92vw);--orbit-radius:calc(var(--orbit-size) * .44);}.how-orbit-node{width:78px;min-height:70px;padding:6px;}.how-orbit-node span{display:none;}.how-work-points{grid-template-columns:1fr;}.how-orbit-core strong{font-size:58px;}}
@media (max-width:440px){.how-work-copy{min-height:620px;}.how-work-dots{gap:10px;}.how-work-dots button{width:36px;height:36px;}.how-orbit-core strong{font-size:42px;}.how-orbit-node{width:64px;min-height:56px;}}


/* ================================
   Stack91 Footer
   ================================ */
.stack-footer {
    background: #000;
    color: #fff;
    overflow: hidden;
}
nav.stack-footer-legal {
    gap: 53px;
}

.stack-footer-container {
    width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2)));
    margin: 0 auto;
}

.stack-footer-top {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
    gap: clamp(56px, 8vw, 150px);
    align-items: start;
    padding: clamp(0px, 0vw, 0px) 0 clamp(54px, 5vw, 86px);
}

.stack-footer-logo {
    display: inline-flex;
    align-items: center;
    width: min(330px, 100%);
}

.stack-footer-logo img {
    display: block;
    width: 100%;
    height: auto;
}

.stack-footer-brand p {
    max-width: 650px;
    margin: clamp(24px, 2.2vw, 36px) 0 0;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.45;
}

.stack-footer-connect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(34px, 3.6vw, 58px);
    padding-top: 11%;
    margin: 0px 0px 0px 29%;
}

.stack-footer-email {
    color: #fff;
    text-decoration: none;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0px;
    transition: color 0.28s ease;
}

.stack-footer-email:hover {
    color: var(--stack-red);
}

.stack-footer-social,
.stack-footer-legal {
    display: flex;
    align-items: center;
    gap: clamp(38px, 5vw, 92px);
}

.stack-footer a {
    color: #fff;
    text-decoration: none;
}

.stack-footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.stack-footer-social-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
}

.stack-footer-social-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
}

.stack-footer-social a,
.stack-footer-legal a,
.stack-footer-bottom p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1;
    transition: color 0.28s ease;
}

.stack-footer-social a:hover,
.stack-footer-legal a:hover {
    color: var(--stack-red);
}

.stack-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: clamp(34px, 3.2vw, 54px) 0 clamp(58px, 5.4vw, 50px);
}

.stack-footer-bottom p {
    margin: 0;
}


@media (max-width: 980px) {
    .stack-footer-top {
        grid-template-columns: 1fr;
        gap: clamp(0px, 5vw, 0px);
    }

    .stack-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .stack-footer-social,
    .stack-footer-legal {
        flex-wrap: wrap;
        gap: 22px 42px;
    }
    .stack-footer-connect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 3.6vw, 40px);
    padding-top: 32px;
    margin: 0px;
    }
}

@media (max-width: 560px) {
    .stack-footer-email {
        font-size: clamp(30px, 10vw, 54px) !important;
    }
.stack-footer-connect {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 24px;
    margin: 0px;
}

    .stack-footer-logo {
        width: min(260px, 100%);
    }
}
/* ================================
   Footer CTA section
   Added as a second CTA above footer.
   Old CTA classes are not touched.
   Fully responsive desktop / tablet / mobile.
   ================================ */
.footer-cta-section {
    position: relative;
    background: #000;
    overflow: visible;
}

.footer-cta-card {
    position: relative;
    min-height: clamp(300px, 22.5vw, 380px);
    border-radius: clamp(22px, 1.75vw, 30px);
    overflow: visible;
    isolation: isolate;
}

.footer-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    overflow: hidden;
    background: #06111f;
}

.footer-cta-bg img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
}

.footer-cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(2, 12, 27, 0.06) 0%,
            rgba(2, 12, 27, 0.08) 26%,
            rgba(2, 12, 27, 0.30) 42%,
            rgba(2, 12, 27, 0.78) 58%,
            rgba(2, 12, 27, 0.96) 100%
        );
}

.footer-cta-visual {
    position: absolute;
    left: clamp(28px, 9vw, 190px);
    bottom: -1px;
    z-index: 4;
    width: clamp(270px, 26vw, 500px);
    pointer-events: none;
}

.footer-cta-visual img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-cta-content {
    position: relative;
    z-index: 5;
    min-height: inherit;
    padding: clamp(40px, 4vw, 68px) clamp(34px, 7vw, 130px) clamp(40px, 4vw, 68px) clamp(430px, 48%, 830px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.footer-cta-content h2 {
    max-width: 660px;
    margin: 0;
    color: #fff;
    line-height: 0.98;
    letter-spacing: 0px;
}

.footer-cta-content h2 span {
    color: #da3227;
}

.footer-cta-content p {
    max-width: 520px;
    margin: clamp(14px, 1.35vw, 20px) 0 0;
    color: rgba(255, 255, 255, 0.92);
}

.footer-cta-btn {
    margin: clamp(22px, 1.8vw, 28px) 0 0 clamp(0px, 1.6vw, 0px);
    min-height: clamp(50px, 3.8vw, 58px);
    padding: 0 clamp(22px, 2vw, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    background: #da3227;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(218, 50, 39, 0.30);
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    background: #ef3a30;
    box-shadow: 0 18px 42px rgba(218, 50, 39, 0.36);
}

@media (max-width: 1280px) {
    .footer-cta-card {
        min-height: clamp(290px, 26vw, 345px);
    }

    .footer-cta-visual {
        left: clamp(18px, 4vw, 54px);
        width: clamp(245px, 30vw, 350px);
    }

    .footer-cta-content {
        padding-left: clamp(345px, 43%, 500px);
        padding-right: clamp(30px, 5vw, 62px);
    }
}

@media (max-width: 1024px) {
    .footer-cta-card {
        min-height: 330px;
    }

    .footer-cta-visual {
        left: clamp(10px, 2.5vw, 26px);
        width: clamp(230px, 30vw, 300px);
    }

    .footer-cta-content {
        padding-top: 36px;
        padding-bottom: 36px;
        padding-left: clamp(300px, 40%, 390px);
        padding-right: clamp(26px, 4vw, 44px);
    }

    .footer-cta-content h2 {
        max-width: 500px;
    }

    .footer-cta-content p {
        max-width: 440px;
    }
}

@media (max-width: 860px) {
    .footer-cta-card {
        min-height: 560px;
        border-radius: 24px;
    }

    .footer-cta-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 12, 27, 0.08) 0%,
                rgba(2, 12, 27, 0.20) 30%,
                rgba(2, 12, 27, 0.82) 62%,
                rgba(2, 12, 27, 0.98) 100%
            );
    }

    .footer-cta-visual {
        left: 50%;
        top: -24px;
        bottom: auto;
        width: min(76vw, 330px);
        transform: translateX(-50%);
    }

    .footer-cta-content {
        min-height: inherit;
        padding: 270px 28px 34px;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
    }

    .footer-cta-content h2,
    .footer-cta-content p {
        max-width: 560px;
    }

    .footer-cta-btn {
        margin-left: 0;
    }
}

@media (max-width: 600px) {
    .footer-cta-card {
        min-height: 535px;
        border-radius: 22px;
    }

    .footer-cta-visual {
        top: -18px;
        width: min(82vw, 300px);
    }

    .footer-cta-content {
        padding: 252px 22px 30px;
    }
}

@media (max-width: 440px) {
    .footer-cta-card {
        min-height: 505px;
        border-radius: 20px;
    }

    .footer-cta-visual {
        top: -14px;
        width: min(84vw, 270px);
    }

    .footer-cta-content {
        padding: 226px 18px 26px;
    }

    .footer-cta-content h2 {
        line-height: 1;
        letter-spacing: 0px;
    }

    .footer-cta-btn {
        min-height: 50px;
        padding: 0 22px;
    }
}
.cursor-dot,
.cursor-ring {
    z-index: 2147483600;
}

body.stack-menu-open {
    overflow: hidden;
}

.stack-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 58px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.34s ease, visibility 0.34s ease;
}

.stack-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.stack-menu-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 92% 12%, rgba(218, 50, 39, 0.18), transparent 28%),
        radial-gradient(circle at 8% 92%, rgba(28, 80, 157, 0.18), transparent 30%),
        rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.stack-menu-panel {
    position: relative;
    z-index: 2;
    width: min(100%, 1280px);
    min-height: clamp(500px, 68vh, 700px);
    border-radius: clamp(24px, 3vw, 36px);
    padding: clamp(46px, 5.6vw, 78px);
    display: grid;
    grid-template-columns: minmax(300px, 0.78fr) minmax(420px, 0.92fr);
    align-items: center;
    gap: clamp(44px, 7vw, 110px);
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.97), rgba(0, 0, 0, 0.93)),
        url('../../assets/home-img/cta-2.jpg') center / cover no-repeat;
    box-shadow: 0 46px 110px rgba(0, 0, 0, 0.58);
    transform: translateY(28px) scale(0.985);
    transition: transform 0.42s cubic-bezier(.22,.9,.25,1);
}

.stack-menu-overlay.is-open .stack-menu-panel {
    transform: translateY(0) scale(1);
}

.stack-menu-panel::before,
.stack-menu-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.stack-menu-panel::before {
    inset: 0;
    background:
        radial-gradient(circle at 97% 0%, rgba(218, 50, 39, 0.20), transparent 24%),
        radial-gradient(circle at 4% 100%, rgba(218, 50, 39, 0.16), transparent 22%);
}

.stack-menu-panel::after {
    left: -80px;
    bottom: -90px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: rgba(218, 50, 39, 0.12);
    filter: blur(42px);
}

.stack-menu-close {
    position: fixed;
    top: clamp(28px, 5vw, 72px);
    right: clamp(28px, 5vw, 72px);
    z-index: 10000;
    width: clamp(48px, 4.2vw, 62px);
    height: clamp(48px, 4.2vw, 62px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.stack-menu-close:hover {
    transform: rotate(90deg) scale(1.03);
    background: rgba(218, 50, 39, 0.88);
    border-color: rgba(218, 50, 39, 0.95);
}

.stack-menu-close span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 2px;
    border-radius: 4px;
    background: #ffffff;
    transform-origin: center;
}

.stack-menu-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.stack-menu-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.stack-menu-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(22px, 3.2vw, 36px);
}

.stack-menu-links a,
.stack-menu-contact-card a,
.stack-menu-close {
    cursor: pointer;
}

.stack-menu-links a {
    position: relative;
    display: inline-flex;
    width: fit-content;
    color: #ffffff;
    font-size: clamp(42px, 4.45vw, 70px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: 0px;
    text-decoration: none !important;
    border: 0 !important;
    outline: none;
    background-image: linear-gradient(#da3227, #da3227);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 4px;
    transition: color 0.28s ease, background-size 0.34s ease, transform 0.34s ease;
}

.stack-menu-links a::before,
.stack-menu-links a::after {
    display: none !important;
    content: none !important;
}

.stack-menu-links a:hover,
.stack-menu-links a:focus-visible {
    color: #ffffff;
    background-size: 100% 4px;
    transform: translateX(8px);
}

.stack-menu-contact-card {
    justify-self: end;
    width: min(100%, 560px);
    overflow: hidden;
    border-radius: clamp(24px, 3vw, 38px);
    background: #141b2a;
    border: 1px solid rgba(255, 255, 255, 0.055);
    box-shadow: 0 34px 74px rgba(0, 0, 0, 0.36);
}

.stack-menu-consultation {
    width: min(74%, 420px);
    min-height: clamp(58px, 5vw, 76px);
    margin: clamp(36px, 4vw, 58px) auto clamp(40px, 4.4vw, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #da3227;
    color: #ffffff;
    font-size: clamp(19px, 1.8vw, 28px);
    font-weight: 800;
    text-align: center;
    text-decoration: none !important;
    border: 0 !important;
    box-shadow: 0 18px 46px rgba(218, 50, 39, 0.22);
    transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.stack-menu-consultation:hover,
.stack-menu-consultation:focus-visible {
    transform: translateY(-3px);
    background: #e33a30;
    box-shadow: 0 24px 54px rgba(218, 50, 39, 0.34);
}

.stack-menu-contact-main {
    padding: 0 clamp(28px, 4.2vw, 58px) clamp(44px, 4.2vw, 58px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 2.2vw, 34px);
    text-align: center;
}

.stack-menu-email,
.stack-menu-phone {
    color: #ffffff;
    text-decoration: none !important;
    border: 0 !important;
    line-height: 1;
    transition: color 0.25s ease;
}

.stack-menu-email {
    font-size: clamp(25px, 2.4vw, 38px);
    font-weight: 800;
    letter-spacing: 0px;
}

.stack-menu-phone {
    font-size: clamp(36px, 3.4vw, 52px);
    font-weight: 900;
    letter-spacing: 0px;
}

.stack-menu-email:hover,
.stack-menu-phone:hover,
.stack-menu-social a:hover {
    color: #da3227;
}

.stack-menu-social {
    padding: clamp(28px, 3vw, 42px) clamp(28px, 4.2vw, 58px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.stack-menu-social a {
    color: #ffffff;
    font-size: clamp(18px, 1.65vw, 27px);
    font-weight: 700;
    text-decoration: none !important;
    border: 0 !important;
    transition: color 0.25s ease, transform 0.25s ease;
}

.stack-menu-social a:hover {
    transform: translateY(-2px);
}

@media (max-width: 1080px) {
    .stack-menu-panel {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 42px;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        padding: clamp(42px, 6vw, 64px);
    }

    .stack-menu-contact-card {
        justify-self: start;
        width: min(100%, 640px);
    }

    .stack-menu-links a {
        font-size: clamp(42px, 8vw, 70px);
    }
}

@media (max-width: 640px) {
    .stack-menu-overlay {
        padding: 16px;
        align-items: stretch;
    }

    .stack-menu-panel {
        min-height: auto;
        height: calc(100vh - 32px);
        border-radius: 24px;
        padding: 74px 24px 28px;
        gap: 32px;
    }

    .stack-menu-close {
        top: 28px;
        right: 28px;
        width: 48px;
        height: 48px;
    }

    .stack-menu-links {
        gap: 22px;
    }

    .stack-menu-links a {
        font-size: clamp(38px, 12vw, 54px);
        letter-spacing: 0px;
        background-size: 0% 3px;
    }

    .stack-menu-links a:hover,
    .stack-menu-links a:focus-visible {
        background-size: 100% 3px;
        transform: translateX(5px);
    }

    .stack-menu-consultation {
        width: calc(100% - 36px);
        min-height: 56px;
        margin: 28px auto 34px;
        font-size: 19px;
    }

    .stack-menu-contact-main {
        padding: 0 22px 34px;
    }

    .stack-menu-email {
        font-size: clamp(21px, 6.6vw, 28px);
    }

    .stack-menu-phone {
        font-size: clamp(32px, 9vw, 42px);
    }

    .stack-menu-social {
        padding: 24px 22px;
        flex-wrap: wrap;
        justify-content: center;
    }
}


/* ================================
   Requested hero-only fixes
   1) Hero text stays visible and only blurs near the end.
   2) While scrolling, only the compact two-line MENU button stays visible.
   No other sections are touched.
   ================================ */
body.hero-scrolled-menu-only .hero-header {
    position: fixed;
    top: clamp(16px, 2vw, 28px);
    z-index: 999;
    pointer-events: none;
}

body.hero-scrolled-menu-only .hero-logo,
body.hero-scrolled-menu-only .btn-talk {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.hero-scrolled-menu-only .hero-nav {
    margin-left: auto;
    pointer-events: auto;
}

body.hero-scrolled-menu-only .btn-menu {
    width: clamp(48px, 4.4vw, 58px);
    min-width: clamp(48px, 4.4vw, 58px);
    height: clamp(48px, 4.4vw, 58px);
    padding: 0;
    border-radius: 50%;
    gap: 0;
    background: rgba(2, 9, 20, 0.66);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}

body.hero-scrolled-menu-only .btn-menu span:first-child {
    display: none;
}

body.hero-scrolled-menu-only .menu-dots {
    width: 22px;
    height: 14px;
}

body.hero-scrolled-menu-only .menu-dots::before,
body.hero-scrolled-menu-only .menu-dots::after {
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
}

body.hero-scrolled-menu-only .menu-dots::before {
    top: 2px;
}

body.hero-scrolled-menu-only .menu-dots::after {
    bottom: 2px;
}

body.hero-scrolled-menu-only.stack-menu-open .hero-header {
    pointer-events: none;
}

/* ================================
   Fixed page-wide compact menu
   Keeps the 2-line menu visible across the full page after hero scroll.
   ================================ */
.site-fixed-menu {
    position: fixed;
    top: clamp(16px, 2vw, 28px);
    right: max(var(--section-padding-x), calc((100vw - var(--site-container-max-width)) / 2));
    z-index: 1200;
    width: clamp(48px, 4.4vw, 58px);
    min-width: clamp(48px, 4.4vw, 58px);
    height: clamp(48px, 4.4vw, 58px);
    padding: 0;
    border-radius: 50%;
    gap: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(2, 9, 20, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateZ(0);
    transition: opacity 0.28s ease, visibility 0.28s ease, background 0.28s ease, border-color 0.28s ease;
}

.site-fixed-menu span:first-child {
    display: none;
}

.site-fixed-menu .menu-dots {
    width: 22px;
    height: 14px;
}

.site-fixed-menu .menu-dots::before,
.site-fixed-menu .menu-dots::after {
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
}

.site-fixed-menu .menu-dots::before {
    top: 2px;
}

.site-fixed-menu .menu-dots::after {
    bottom: 2px;
}

.site-fixed-menu:hover {
    background: rgba(7, 20, 44, 0.84);
    border-color: rgba(255, 255, 255, 0.38);
}

body.hero-scrolled-menu-only .site-fixed-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.hero-scrolled-menu-only .hero-header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.stack-menu-open .site-fixed-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* Fixed STACK91 wordmark - appears with compact menu after hero scroll. */
.site-fixed-wordmark {
    position: fixed;
    top: clamp(16px, 2vw, 28px);
    left: max(var(--section-padding-x), calc((100vw - var(--site-container-max-width)) / 2));
    z-index: 1200;
    min-height: clamp(48px, 4.4vw, 58px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: var(--font-primary);
    font-size: clamp(20px, 1.55vw, 30px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateZ(0);
    transition: opacity 0.28s ease, visibility 0.28s ease, color 0.28s ease;
}

body.hero-scrolled-menu-only .site-fixed-wordmark {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.stack-menu-open .site-fixed-wordmark {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Fixed LET'S CONNECT button - appears with compact menu after hero scroll. */
.site-fixed-connect {
    position: fixed;
    top: clamp(16px, 2vw, 28px);
    right: calc(max(var(--section-padding-x), calc((100vw - var(--site-container-max-width)) / 2)) + clamp(48px, 4.4vw, 58px) + 12px);
    z-index: 1200;
    min-height: clamp(48px, 4.4vw, 58px);
    padding: 0 clamp(20px, 2.1vw, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--stack-red);
    color: #ffffff;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow:
        0 20px 46px rgba(218, 50, 39, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateZ(0);
    transition: opacity 0.28s ease, visibility 0.28s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease;
}

.site-fixed-connect:hover {
    background: #ef3d31;
    transform: translateY(-2px) translateZ(0);
    box-shadow:
        0 24px 54px rgba(218, 50, 39, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.hero-scrolled-menu-only .site-fixed-connect {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.stack-menu-open .site-fixed-connect {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


@media (max-width: 767px) {
    .site-fixed-wordmark {
        top: 16px;
        left: 18px;
        min-height: 48px;
        font-size: 20px;
    }
}

@media (max-width: 420px) {
    .site-fixed-wordmark {
        font-size: 18px;
        letter-spacing: 0px;
    }
}

@media (max-width: 767px) {
    .site-fixed-connect {
        top: 16px;
        right: 78px;
        min-height: 48px;
        padding: 0 16px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .site-fixed-connect {
        padding: 0 13px;
        font-size: 11px;
    }
}

@media (max-width: 767px) {
    .site-fixed-menu {
        top: 16px;
        right: 18px;
        width: 48px;
        min-width: 48px;
        height: 48px;
    }
}
/* ================================
   Floating quick contact button
   Only adds WhatsApp + Mail action icons.
   ================================ */
.stack-floating-contact {
    position: fixed;
    right: clamp(18px, 2.2vw, 34px);
    bottom: clamp(18px, 2.2vw, 34px);
    z-index: 9800;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

.stack-floating-contact-toggle,
.stack-floating-contact-link {
    pointer-events: auto;
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none !important;
    isolation: isolate;
    transform: translateZ(0);
}

.stack-floating-contact-toggle {
    width: clamp(58px, 4.6vw, 72px);
    height: clamp(58px, 4.6vw, 72px);
    background: #da3227;
    box-shadow:
        0 0 0 0 rgba(218, 50, 39, 0.44),
        0 18px 44px rgba(218, 50, 39, 0.34),
        0 10px 28px rgba(0, 0, 0, 0.38);
    animation: stackFloatButton 3.6s ease-in-out infinite, stackGlowPulse 2.2s ease-in-out infinite;
    transition: transform 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.stack-floating-contact-toggle span {
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 300;
    line-height: 1;
    transform: translateY(-2px);
    transition: transform 0.28s ease;
}

.stack-floating-contact.is-open .stack-floating-contact-toggle span {
    transform: translateY(-2px) rotate(45deg);
}

.stack-floating-contact-toggle:hover {
    background: #ef3d31;
    transform: translateY(-4px);
    box-shadow:
        0 0 0 10px rgba(218, 50, 39, 0.10),
        0 22px 54px rgba(218, 50, 39, 0.44),
        0 12px 30px rgba(0, 0, 0, 0.40);
}

.stack-floating-contact-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(0.92);
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
}

.stack-floating-contact.is-open .stack-floating-contact-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.stack-floating-contact-link {
    width: clamp(48px, 3.7vw, 58px);
    height: clamp(48px, 3.7vw, 58px);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0px;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    animation: stackMiniFloat 3.2s ease-in-out infinite;
    transition: transform 0.26s ease, box-shadow 0.26s ease, filter 0.26s ease;
}

.stack-floating-whatsapp {
    background: #1fbf63;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(31, 191, 99, 0.30);
}

.stack-floating-mail {
    background: #1c509d;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.32),
        0 0 24px rgba(28, 80, 157, 0.34);
    animation-delay: 0.18s;
}

.stack-floating-contact-link:hover {
    transform: translateY(-4px) scale(1.04);
    filter: brightness(1.08);
}

@keyframes stackFloatButton {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@keyframes stackMiniFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes stackGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(218, 50, 39, 0.40),
            0 18px 44px rgba(218, 50, 39, 0.34),
            0 10px 28px rgba(0, 0, 0, 0.38);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(218, 50, 39, 0.08),
            0 22px 54px rgba(218, 50, 39, 0.44),
            0 12px 30px rgba(0, 0, 0, 0.40);
    }
}

@media (max-width: 767px) {
    .stack-floating-contact {
        right: 18px;
        bottom: 18px;
        gap: 12px;
    }

    .stack-floating-contact-toggle {
        width: 58px;
        height: 58px;
    }

    .stack-floating-contact-link {
        width: 48px;
        height: 48px;
    }
}
.stack-floating-contact-icon {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.stack-floating-contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* WhatsApp-only floating contact update */
.stack-floating-whatsapp-only {
    width: clamp(58px, 4.6vw, 72px);
    height: clamp(58px, 4.6vw, 72px);
    background: #1fbf63;
    box-shadow:
        0 0 0 0 rgba(31, 191, 99, 0.44),
        0 18px 44px rgba(31, 191, 99, 0.34),
        0 10px 28px rgba(0, 0, 0, 0.38);
    animation: stackFloatButton 3.6s ease-in-out infinite, stackWhatsappGlowPulse 2.2s ease-in-out infinite;
}

.stack-floating-whatsapp-only .stack-floating-contact-icon {
    width: clamp(30px, 2.3vw, 38px);
    height: clamp(30px, 2.3vw, 38px);
}

.stack-floating-whatsapp-only:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow:
        0 0 0 10px rgba(31, 191, 99, 0.10),
        0 22px 54px rgba(31, 191, 99, 0.44),
        0 12px 30px rgba(0, 0, 0, 0.40);
}

@keyframes stackWhatsappGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(31, 191, 99, 0.40),
            0 18px 44px rgba(31, 191, 99, 0.34),
            0 10px 28px rgba(0, 0, 0, 0.38);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(31, 191, 99, 0.08),
            0 22px 54px rgba(31, 191, 99, 0.44),
            0 12px 30px rgba(0, 0, 0, 0.40);
    }
}

@media (max-width: 767px) {
    .stack-floating-whatsapp-only {
        width: 58px;
        height: 58px;
    }

    .stack-floating-whatsapp-only .stack-floating-contact-icon {
        width: 30px;
        height: 30px;
    }
}

/* ================================
   Mobile service section animation fix
   Desktop-style sticky service animation on all mobile screens only.
   ================================ */
@media (max-width: 767px) {
    .stack-services-section {
        height: 430vh !important;
        min-height: 3000px !important;
        padding: 0 !important;
        overflow: clip !important;
    }

    .stack-services-sticky {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 660px !important;
        overflow: hidden !important;
        background: #020914 !important;
    }

    .stack-services-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .stack-service-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(1.12) !important;
        transition: opacity 0.78s cubic-bezier(.19,1,.22,1), transform 0.95s cubic-bezier(.19,1,.22,1), visibility 0.78s cubic-bezier(.19,1,.22,1) !important;
    }

    .stack-service-video.is-active {
        opacity: 0.74 !important;
        visibility: visible !important;
        transform: scale(1.04) !important;
    }

    .stack-services-content {
        position: relative !important;
        z-index: 4 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: clamp(72px, 12vh, 96px) 20px clamp(34px, 7vh, 52px) !important;
        display: block !important;
    }

    .stack-service-card {
        position: absolute !important;
        left: 20px !important;
        right: 20px !important;
        top: 50% !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 46px, 0) translateY(-50%) !important;
        pointer-events: none !important;
        transition: opacity 0.82s cubic-bezier(.19,1,.22,1), transform 0.82s cubic-bezier(.19,1,.22,1), visibility 0.82s cubic-bezier(.19,1,.22,1) !important;
        will-change: opacity, transform !important;
    }

    .stack-service-card.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) translateY(-50%) !important;
        pointer-events: auto !important;
    }

    .stack-service-card:last-child {
        margin-bottom: 0 !important;
    }

    .stack-service-pill {
        min-width: auto !important;
        height: 42px !important;
        margin-bottom: clamp(34px, 7vh, 50px) !important;
        padding: 0 20px !important;
        font-size: 16px !important;
        line-height: 1 !important;
    }

    .stack-service-card h2 {
        max-width: 100% !important;
        font-size: clamp(34px, 10.8vw, 54px) !important;
        line-height: 0.96 !important;
        letter-spacing: 0px;
        word-spacing: 0.03em !important;
    }

    .stack-service-card p {
        max-width: 100% !important;
        margin-top: 18px !important;
        font-size: clamp(16px, 4.4vw, 19px) !important;
        line-height: 1.42 !important;
    }

    .stack-service-line {
        width: 100% !important;
        margin: 22px 0 18px !important;
    }

    .stack-service-points {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .stack-service-points li {
        padding-left: 24px !important;
        font-size: clamp(15px, 4.1vw, 18px) !important;
        line-height: 1.22 !important;
    }

    .stack-service-points li::before {
        width: 10px !important;
        height: 10px !important;
        top: 0.42em !important;
    }

    .stack-service-btn {
        min-width: 190px !important;
        height: 52px !important;
        margin-top: 26px !important;
        padding: 0 26px !important;
        font-size: 16px !important;
    }
}

@supports (height: 100svh) {
    @media (max-width: 767px) {
        .stack-services-section {
            height: 430svh !important;
        }

        .stack-services-sticky {
            height: 100svh !important;
        }
    }
}

@media (max-width: 420px) {
    .stack-services-sticky {
        min-height: 640px !important;
    }

    .stack-service-card {
        left: 16px !important;
        right: 16px !important;
    }

    .stack-services-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .stack-service-pill {
        margin-bottom: 34px !important;
    }
}

@media (max-width: 360px) {
    .stack-services-sticky {
        min-height: 620px !important;
    }

    .stack-service-card h2 {
        font-size: 32px !important;
    }

    .stack-service-card p,
    .stack-service-points li {
        font-size: 15px !important;
    }

    .stack-service-btn {
        height: 50px !important;
        min-width: 178px !important;
    }
}

/* Mobile only: hide How We Work circle/orbit, keep panels/dots animation running */
@media (max-width: 767px) {
    .how-work-section .how-work-orbit {
        display: none !important;
    }
}

/* ================================
   Mobile responsive animation parity
   Mobile-only: keeps desktop untouched while making remaining sections behave
   with the same premium scroll-animation feel as the service section.
   ================================ */
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .observe-reveal {
        transform: translate3d(0, 46px, 0) rotateX(0deg) !important;
        filter: blur(8px) !important;
        transition-duration: 0.78s !important;
    }

    .observe-reveal.is-visible {
        transform: translate3d(0, 0, 0) rotateX(0deg) !important;
        filter: blur(0) !important;
    }

    .brand-trust-section {
        padding-top: 0 !important;
        padding-bottom: clamp(64px, 18vw, 92px) !important;
    }

    .brand-trust-card {
        border-radius: 28px !important;
        min-height: auto !important;
        padding-bottom: 34px !important;
        text-align: center;
    }

    .brand-top-grid,
    .trusted-row {
        transform: translateZ(0);
    }

    .why-digital-section {
        height: 240vh !important;
        min-height: 1680px !important;
        overflow: visible !important;
    }

    .why-video-bg,
    .why-video-shade {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 100svh !important;
    }

    .why-video-bg {
        z-index: 0 !important;
        margin-bottom: -100vh !important;
    }

    .why-video-bg::after {
        z-index: 1 !important;
    }

    .why-video-shade {
        z-index: 1 !important;
        margin-bottom: -100vh !important;
    }

    .why-section-inner {
        position: sticky !important;
        top: 0 !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        padding: clamp(76px, 13vh, 96px) 0 clamp(46px, 8vh, 70px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

    .why-main-title {
        width: 100% !important;
        justify-content: center !important;
    }

    .why-content-grid {
        width: 100% !important;
        margin-top: clamp(46px, 10vh, 70px) !important;
        gap: clamp(24px, 5vh, 34px) !important;
    }

    .why-pill-row {
        max-width: 100% !important;
    }

    .stack-work-section {
        overflow: hidden !important;
    }

    .stack-work-card {
        padding: 34px 20px 42px !important;
    }

    .stack-work-head {
        margin-bottom: 34px !important;
    }

    .stack-work-viewport {
        scroll-snap-type: x mandatory !important;
        touch-action: pan-x pan-y !important;
    }

    .stack-work-track {
        gap: 18px !important;
    }

    .stack-work-item {
        flex: 0 0 min(82vw, 360px) !important;
        scroll-snap-align: center !important;
        min-height: clamp(240px, 70vw, 340px) !important;
    }

    .stack-testimonial-slider {
        margin-top: 42px !important;
    }

    .stack-testimonial-card {
        min-height: auto !important;
        gap: 24px !important;
        text-align: center;
    }

    .footer-cta-section {
        overflow: visible !important;
    }
}

/* Mobile only: How We Work keeps desktop-style scroll animation, but the circle/orbit stays hidden. */
@media (max-width: 767px) {
    .how-work-section {
        min-height: 430vh !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .how-work-section > .stack-container {
        position: sticky !important;
        top: 0 !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: clamp(72px, 12vh, 100px) !important;
        padding-bottom: clamp(42px, 8vh, 70px) !important;
        overflow: hidden !important;
    }

    .how-work-heading {
        margin-bottom: clamp(28px, 6vh, 44px) !important;
    }

    .how-work-board {
        display: block !important;
        min-height: calc(100vh - 220px) !important;
        min-height: calc(100svh - 220px) !important;
    }

    .how-work-bg,
    .how-work-orbit {
        display: none !important;
    }

    .how-work-copy {
        position: relative !important;
        min-height: calc(100vh - 255px) !important;
        min-height: calc(100svh - 255px) !important;
        z-index: 4 !important;
    }

    .how-work-panel {
        position: absolute !important;
        inset: 0 !important;
        display: flex !important;
        justify-content: center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 42px, 0) scale(0.985) !important;
        transition: opacity 0.72s cubic-bezier(.19,1,.22,1), transform 0.72s cubic-bezier(.19,1,.22,1), visibility 0.72s cubic-bezier(.19,1,.22,1) !important;
        pointer-events: none !important;
    }

    .how-work-panel.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        pointer-events: auto !important;
        text-align: center;
    }

    .how-work-panel h3 {
        max-width: 100% !important;
        line-height: 1 !important;
    }

    .how-work-panel p {
        max-width: 100% !important;
        margin-top: 18px !important;
        line-height: 1.46 !important;
    }

    .how-work-points {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-top: 22px !important;
    }

    .how-work-points li {
        white-space: normal !important;
    }

    .how-work-dots {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }
}

@media (max-width: 420px) {
    .why-digital-section {
        min-height: 1560px !important;
    }

    .why-section-inner {
        padding-top: 72px !important;
        padding-bottom: 52px !important;
    }

    .how-work-section > .stack-container {
        padding-top: 64px !important;
        padding-bottom: 54px !important;
    }

    .how-work-board {
        min-height: calc(100vh - 190px) !important;
        min-height: calc(100svh - 190px) !important;
    }

    .how-work-copy {
        min-height: calc(100vh - 225px) !important;
        min-height: calc(100svh - 225px) !important;
    }

    .how-work-dots button {
        width: 34px !important;
        height: 34px !important;
    }
}


/* ================================
   Mobile-only final fixes requested by client
   Desktop remains untouched.
   ================================ */
@media (max-width: 767px) {
    /* 1) Our Work: keep auto-slide but allow natural manual drag/swipe */
    .stack-work-viewport {
        overflow-x: auto !important;
        cursor: grab !important;
        touch-action: pan-y !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 14px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .stack-work-viewport.is-dragging {
        cursor: grabbing !important;
        scroll-snap-type: none !important;
    }

    .stack-work-track {
        width: max-content !important;
        display: flex !important;
    }

    .stack-work-item {
        scroll-snap-align: center !important;
    }

    /* 2) Client testimonials: mobile drag/swipe support like Our Work */
    .stack-testimonial-slider {
        cursor: grab !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .stack-testimonial-slider.is-dragging {
        cursor: grabbing !important;
    }

    .stack-testimonial-slider.is-dragging .stack-testimonial-card {
        pointer-events: none !important;
    }

    .stack-testimonial-track {
        will-change: transform !important;
    }

    /* 3 + 4) How We Work: remove mobile gap and show description only by number click */
    .how-work-section {
        min-height: auto !important;
        padding-top: clamp(68px, 16vw, 92px) !important;
        padding-bottom: clamp(70px, 16vw, 96px) !important;
        overflow: hidden !important;
    }

    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .how-work-heading {
        margin-bottom: 22px !important;
    }

    .how-work-board {
        display: block !important;
        min-height: auto !important;
        gap: 0 !important;
    }

    .how-work-bg,
    .how-work-orbit {
        display: none !important;
    }

    .how-work-copy {
        position: relative !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .how-work-dots {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 20px !important;
        padding: 0 !important;
    }

    .how-work-panel {
        position: relative !important;
        inset: auto !important;
        order: 2 !important;
        display: none !important;
        min-height: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 14px, 0) !important;
        pointer-events: none !important;
    }

    .how-work-panel.is-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    .how-work-kicker {
        margin-bottom: 12px !important;
    }

    .how-work-panel p {
        margin-top: 16px !important;
    }

    .how-work-points {
        margin-top: 18px !important;
    }

    /* 5) Why Digital Marketing: remove mobile text scroll animation; show content directly */
    .why-digital-section {
        height: auto !important;
        min-height: auto !important;
        overflow: hidden !important;
    }

    .why-video-bg,
    .why-video-shade {
        position: absolute !important;
        inset: 0 !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    .why-section-inner {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        /* padding-top: clamp(78px, 18vw, 104px) !important;         */
        display: block !important;
        overflow: visible !important;
    }

    .why-scroll-item,
    .why-scroll-title,
    .why-scroll-headline,
    .why-scroll-pill,
    .why-scroll-copy {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .why-content-grid {
        margin-top: 42px !important;
        text-align: center;
    }

    /* 6) Hero mobile: keep Growth text inside screen and avoid overflow */
    .hero-content {
        width: calc(100vw - 40px) !important;
        max-width: calc(100vw - 40px) !important;
        overflow: visible !important;
    }

    .hero-title {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .hero-title .title-line {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    .hero-title .title-small {
        font-size: clamp(34px, 9.8vw, 54px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0px;
    }

    .hero-title .title-small strong {
        display: inline-block !important;
    }

    .stack-watermark {
        left: 50px !important;
        /* right: 20px !important; */
        max-width: calc(100vw - 40px) !important;
        font-size: clamp(54px, 17vw, 86px) !important;
        line-height: 0.82 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 420px) {
    .hero-title .title-small {
        font-size: clamp(31px, 9.5vw, 40px) !important;
    }

    .stack-watermark {
        font-size: clamp(48px, 16vw, 68px) !important;
    }

    .how-work-dots {
        gap: 8px !important;
    }
}

@media (max-width: 767px) {
    .why-video-bg,
    .why-video-shade {
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
        min-height: 100% !important;
    }
}
.why-section-inner {
    padding-right: 70px;
    padding-left: 70px;
}
section#process {
    padding-right: 100px;
    padding-left: 100px;
}
/* ================================
   Final hero text + tablet/mobile menu fit fix
   Scope: hero copy polish and menu overlay only.
   ================================ */
.hero-content {
    max-width: min(920px, calc(100% - (var(--section-padding-x) * 2)));
}

.hero-eyebrow {
    max-width: min(100%, 780px);
}

.hero-title {
    margin-top: clamp(34px, 4.2vw, 64px);
    max-width: 920px;
    gap: 0;
}

.hero-title .title-line {
    margin-top: 0 !important;
    letter-spacing: 0px;
    white-space: nowrap;
}

.hero-title .title-line + .title-line {
    margin-top: clamp(16px, 1.75vw, 28px) !important;
}

.hero-title .title-line.h1-size {
    font-size: 41px !important;
}

.hero-title .title-line.title-small {
    font-size: var(--hero-title-small-font) !important;
}


@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(54px, 5.2vw, 92px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(34px, 3.1vw, 58px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(22px, 1.65vw, 32px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    .hero-content {
        top: 52%;
        max-width: min(760px, calc(100% - (var(--section-padding-x) * 2)));
    }
}

@media (max-width: 760px) {
    :root {
        --hero-content-top: 56%;
        --hero-eyebrow-font: clamp(17px, 5.3vw, 24px);
        --hero-eyebrow-padding: 12px 16px 13px;
        --hero-title-font: clamp(44px, 13vw, 62px);
        --hero-title-small-font: clamp(30px, 8.8vw, 42px);
        --explore-margin-top: 34px;
    }

    .hero-content {
        top: var(--hero-content-top);
        max-width: calc(100% - (var(--section-padding-x) * 2));
    }

    .hero-title {
        margin-top: 32px;
    }

    .hero-title .title-line + .title-line {
        margin-top: 14px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --hero-title-font: clamp(42px, 12vw, 52px);
        --hero-title-small-font: clamp(29px, 8.2vw, 36px);
        --explore-width: 170px;
        --explore-height: 52px;
    }

    .hero-title {
        margin-top: 28px;
    }
}

@media (max-width: 360px) {
    :root {
        --hero-title-font: 40px;
        --hero-title-small-font: 28px;
        --hero-eyebrow-font: 16px;
    }
}

@media (max-width: 1080px) {
    .stack-menu-overlay {
        height: 100vh;
        height: 100svh;
        padding: clamp(14px, 2.4vw, 24px);
        align-items: center;
    }

    .stack-menu-panel {
        width: 100%;
        height: calc(100vh - 32px);
        height: calc(100svh - 32px);
        min-height: 0;
        max-height: none;
        overflow: hidden;
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, auto);
        align-items: center;
        align-content: normal;
        gap: clamp(16px, 2.7vh, 28px);
        padding: clamp(62px, 8vh, 84px) clamp(26px, 5vw, 52px) clamp(20px, 3.5vh, 36px);
    }

    .stack-menu-links {
        gap: clamp(12px, 2vh, 20px);
        align-items: center;
    }

    .stack-menu-links a {
        font-size: clamp(30px, 6.4vw, 52px);
        line-height: 0.95;
        letter-spacing: 0px;
    }

    .stack-menu-contact-card {
        justify-self: stretch;
        align-self: end;
        width: min(100%, 640px);
        max-width: 640px;
        border-radius: clamp(20px, 2.8vw, 30px);
    }

    .stack-menu-consultation {
        width: min(86%, 380px);
        min-height: clamp(44px, 6vh, 56px);
        margin: clamp(16px, 2.6vh, 24px) auto clamp(18px, 2.8vh, 26px);
        font-size: clamp(15px, 2.6vw, 20px);
    }

    .stack-menu-contact-main {
        padding: 0 clamp(20px, 3.5vw, 34px) clamp(18px, 3vh, 28px);
        gap: clamp(10px, 1.8vh, 16px);
    }

    .stack-menu-email {
        font-size: clamp(18px, 3.2vw, 26px);
    }

    .stack-menu-phone {
        font-size: clamp(26px, 5vw, 38px);
    }

    .stack-menu-social {
        padding: clamp(14px, 2.5vh, 22px) clamp(18px, 3.5vw, 30px);
        gap: clamp(12px, 2vw, 20px);
        flex-wrap: nowrap;
    }

    .stack-menu-social a {
        font-size: clamp(14px, 2.3vw, 18px);
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .stack-menu-overlay {
        padding: 10px;
    }

    .stack-menu-panel {
        height: calc(100vh - 20px);
        height: calc(100svh - 20px);
        border-radius: 22px;
        padding: 62px 18px 18px;
        gap: 18px;
    }

    .stack-menu-close {
        top: 22px;
        right: 22px;
        width: 44px;
        height: 44px;
    }

    .stack-menu-links {
        gap: 12px;
    }

    .stack-menu-links a {
        font-size: 50px;
        line-height: 1.20;
    }

    .stack-menu-consultation {
        width: calc(100% - 30px);
        min-height: 46px;
        margin: 16px auto 18px;
        font-size: 15px;
    }

    .stack-menu-contact-main {
        padding: 0 16px 18px;
        gap: 9px;
    }

    .stack-menu-email {
        font-size: clamp(17px, 5vw, 22px);
    }

    .stack-menu-phone {
        font-size: clamp(24px, 7.4vw, 32px);
    }

    .stack-menu-social {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 14px 14px;
        gap: 8px;
        text-align: center;
    }

    .stack-menu-social a {
        font-size: clamp(12px, 3.3vw, 14px);
    }
}

@media (max-width: 420px) {
    .stack-menu-panel {
        padding-top: 58px;
        gap: 14px;
    }

    .stack-menu-links {
        gap: 10px;
    }

    .stack-menu-links a {
        font-size: clamp(25px, 8.5vw, 34px);
    }

    .stack-menu-consultation {
        min-height: 43px;
        margin: 14px auto 16px;
    }

    .stack-menu-phone {
        font-size: clamp(23px, 7vw, 30px);
    }
}

@media (max-width: 1080px) and (max-height: 720px) {
    .stack-menu-panel {
        padding-top: 0px;
        padding-bottom: 20px;
        gap: 20px;
    }

    .stack-menu-close {
        top: 18px;
        right: 18px;
        width: 42px;
        height: 42px;
    }

    .stack-menu-links {
        gap: 20px;
    }

    .stack-menu-links a {
        font-size: clamp(24px, 6.8vh, 34px);
    }

    .stack-menu-consultation {
        min-height: 40px;
        margin: 12px auto 12px;
        font-size: 14px;
    }

    .stack-menu-contact-main {
        padding-bottom: 12px;
        gap: 7px;
    }

    .stack-menu-email {
        font-size: 16px;
    }

    .stack-menu-phone {
        font-size: 24px;
    }

    .stack-menu-social {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

@media (max-width: 1080px) and (max-height: 640px) and (orientation: landscape) {
    .stack-menu-panel {
        grid-template-columns: minmax(220px, 0.75fr) minmax(300px, 1fr);
        grid-template-rows: 1fr;
        gap: 22px;
        align-items: center;
        padding: 48px 22px 16px;
    }

    .stack-menu-links a {
        font-size: clamp(24px, 5vw, 38px);
    }

    .stack-menu-contact-card {
        justify-self: end;
    }
}

/* ================================
   Final requested fixes
   1) Restore desktop hero exactly to the earlier desktop treatment.
   2) Make testimonial drag available on desktop too.
   3) Reduce only the mobile gap between Trusted and Why Digital Marketing.
   Mobile hero sizing remains untouched.
   ================================ */
@media (min-width: 1081px) {
    .hero-content {
        max-width: min(var(--site-container-max-width), calc(100% - (var(--section-padding-x) * 2))) !important;
    }

    .hero-eyebrow {
        max-width: 100% !important;
    }

    .hero-title {
        margin-top: 0 !important;
        max-width: none !important;
        gap: initial !important;
    }

    .hero-title .title-line {
        margin-top: 50px !important;
        white-space: normal !important;
    }

    .hero-title .title-line + .title-line {
        margin-top: 20px !important;
    }

    .hero-title .title-line.h1-size {
        font-size: 41px !important;
    }

    .hero-title .title-line.title-small {
        font-size: var(--font-h2) !important;
        line-height: 1.02 !important;
    }
}

.stack-testimonial-slider {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.stack-testimonial-slider.is-dragging {
    cursor: grabbing;
}

.stack-testimonial-slider.is-dragging .stack-testimonial-card {
    pointer-events: none;
}

@media (max-width: 767px) {
    .brand-trust-section {
        padding-bottom: clamp(26px, 8vw, 44px) !important;
    }

    .brand-trust-card {
        margin-bottom: 0 !important;
    }

    .why-section-inner {
        padding-top: clamp(46px, 12vw, 64px) !important;
    }
}

/* ================================
   Latest requested mobile-only fixes
   1) Show LET'S TALK beside the hero menu on mobile.
   2) Remove black side shadow from Trusted section on mobile.
   3) Make hero background video clearer on mobile.
   No desktop styles are changed.
   ================================ */
@media (max-width: 767px) {
    .hero-header .btn-talk {
        display: inline-flex !important;
        height: 40px;
        min-width: auto;
        padding: 0 13px;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0px;
        box-shadow:
            0 12px 28px rgba(237,48,43,0.28),
            inset 0 1px 0 rgba(255,255,255,0.20);
    }

    .hero-header .hero-nav {
        gap: 7px;
        flex: 0 0 auto;
    }

    .hero-video {
        filter: brightness(0.96) contrast(1.12) saturate(1.12);
        object-position: center center;
    }

    .hero-left-fade {
        background:
            linear-gradient(90deg,
                rgba(0,0,0,0.78) 0%,
                rgba(0,0,0,0.54) 43%,
                rgba(0,0,0,0.18) 100%),
            linear-gradient(180deg,
                rgba(0,0,0,0.24) 0%,
                rgba(0,0,0,0.10) 44%,
                rgba(0,0,0,0.54) 100%),
            radial-gradient(circle at 72% 36%, rgba(28,80,157,0.18), transparent 42%);
    }

    .hero-vignette {
        background:
            radial-gradient(circle at 68% 42%, transparent 0 40%, rgba(0,0,0,0.16) 72%, rgba(0,0,0,0.38) 100%),
            linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.24));
    }

    .brand-trust-section::before {
        display: none;
    }

    .brand-logo-marquee {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 480px) {
    .hero-header .btn-menu {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 50%;
        gap: 0;
    }

    .hero-header .btn-menu span:first-child {
        display: none;
    }

    .hero-header .btn-menu .menu-dots {
        width: 20px;
        height: 13px;
    }

    .hero-header .btn-menu .menu-dots::before,
    .hero-header .btn-menu .menu-dots::after {
        left: 0;
        width: 20px;
        height: 2px;
        border-radius: 999px;
        box-shadow: none;
    }

    .hero-header .btn-menu .menu-dots::before {
        top: 2px;
    }

    .hero-header .btn-menu .menu-dots::after {
        bottom: 2px;
    }

    .hero-header .btn-talk {
        height: 40px;
        padding: 0 12px;
        font-size: 11px;
    }
}
.how-work-heading.observe-reveal.is-visible {
    text-align: center;
}
@media (max-width: 767px) {
.brand-copy {
    font-weight: 400;
}
.brand-heading {
    color: #fff;
    line-height: 0.94;
    letter-spacing: 0px;
    text-align: center;
}
nav.stack-footer-legal {
    gap: 10px;
    display: grid;
}
.stack-work-head p {
    text-align: center;
}
span.stack-service-pill.h5-size {
    margin: 0px;
}
.how-work-points {
    padding: 0px 85px;
}
.brand-heading strong {
    display: ruby-text;
    font-size: 30px !important;
}
}
.stack-video-testimonials {
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 8vw, 130px) 20px;
    color: #ffffff;
    font-family: inherit;
}

.stack-video-testimonials__head {
    text-align: center;
    margin-bottom: clamp(34px, 4vw, 56px);
}

.stack-video-testimonials__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.stack-video-testimonials__eyebrow span {
    width: 4px;
    height: 24px;
    display: block;
    background: #da3227;
    border-radius: 999px;
}

.stack-video-testimonials__head h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(36px, 5vw, 78px);
    line-height: 0.95;
    font-weight: 900;
    letter-spacing: 0px;
}

.stack-video-testimonials__head h2 strong {
    color: #da3227;
    font-weight: 900;
}

.stack-video-testimonials__stage {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    user-select: none;
}

.stack-video-testimonials__cards {
    position: relative;
    height: clamp(430px, 42vw, 560px);
    cursor: grab;
}

.stack-video-testimonials__cards.is-dragging {
    cursor: grabbing;
}

.stack-video-testimonial-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 320px;
    overflow: hidden;
    border-radius: 12px;
    background: #080b10;
    border:0px !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.42);
    transform: translate(-50%, -50%) scale(0.86);
    opacity: 0;
    pointer-events: none;
    transition:
        width 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        border-color 0.45s ease;
}

.stack-video-testimonial-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.04) contrast(1.04);
}

.stack-video-testimonial-card__shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.66)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 48%, rgba(0, 0, 0, 0.28));
    pointer-events: none;
}

.stack-video-testimonial-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #da3227;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 4;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.38);
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.stack-video-testimonial-card__play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #da3227;
    color: #ffffff;
}

.stack-video-testimonial-card__play span {
    width: 0;
    height: 0;
    margin-left: 4px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid currentColor;
}

.stack-video-testimonial-card__info {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 3;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.stack-video-testimonial-card__info h3 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.stack-video-testimonial-card__info p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.stack-video-testimonial-card__vertical {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-transform: uppercase;
    text-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
    transition: opacity 0.35s ease;
}

.stack-video-testimonial-card.is-active {
    width: min(560px, 52vw);
    height: clamp(360px, 35vw, 440px);
    border-color: rgba(218, 50, 39, 0.46);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

.stack-video-testimonial-card.is-active .stack-video-testimonial-card__info {
    opacity: 1;
    transform: translateY(0);
}

.stack-video-testimonial-card.is-active .stack-video-testimonial-card__vertical {
    opacity: 0;
}

.stack-video-testimonial-card.is-left-1 {
    transform: translate(calc(-50% - 380px), -50%) scale(0.96);
    opacity: 1;
    z-index: 5;
    pointer-events: auto;
}

.stack-video-testimonial-card.is-left-2 {
    transform: translate(calc(-50% - 510px), -50%) scale(0.88);
    opacity: 0.82;
    z-index: 4;
    pointer-events: auto;
}

.stack-video-testimonial-card.is-right-1 {
    transform: translate(calc(-50% + 380px), -50%) scale(0.96);
    opacity: 1;
    z-index: 5;
    pointer-events: auto;
}

.stack-video-testimonial-card.is-right-2 {
    transform: translate(calc(-50% + 510px), -50%) scale(0.88);
    opacity: 0.82;
    z-index: 4;
    pointer-events: auto;
}

.stack-video-testimonials__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 22px;
}

.stack-video-testimonials__arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.stack-video-testimonials__arrow:hover {
    background: #da3227;
    border-color: #da3227;
    transform: translateY(-2px);
}

.stack-video-testimonials__dots {
    display: flex;
    align-items: center;
    gap: 10px;
}

.stack-video-testimonials__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
    cursor: pointer;
    transition: width 0.25s ease, background 0.25s ease;
}

.stack-video-testimonials__dots button.is-active {
    width: 34px;
    border-radius: 999px;
    background: #da3227;
}

@media (max-width: 1024px) {
    .stack-video-testimonials__cards {
        height: 520px;
    }

    .stack-video-testimonial-card.is-active {
        width: min(520px, 64vw);
        height: 390px;
    }

    .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - 320px), -50%) scale(0.9);
    }

    .stack-video-testimonial-card.is-left-2 {
        transform: translate(calc(-50% - 420px), -50%) scale(0.78);
        opacity: 0.55;
    }

    .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + 320px), -50%) scale(0.9);
    }

    .stack-video-testimonial-card.is-right-2 {
        transform: translate(calc(-50% + 420px), -50%) scale(0.78);
        opacity: 0.55;
    }
}

@media (max-width: 767px) {
    .stack-video-testimonials {
        padding: 70px 16px;
    }

    .stack-video-testimonials__cards {
        height: 520px;
    }

    .stack-video-testimonial-card {
        width: 64px;
        height: 250px;
        border-radius: 10px;
    }

    .stack-video-testimonial-card.is-active {
        width: min(100%, 330px);
        height: 390px;
    }

    .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - 205px), -50%) scale(0.84);
        opacity: 0.62;
    }

    .stack-video-testimonial-card.is-left-2 {
        transform: translate(calc(-50% - 275px), -50%) scale(0.72);
        opacity: 0.28;
    }

    .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + 205px), -50%) scale(0.84);
        opacity: 0.62;
    }

    .stack-video-testimonial-card.is-right-2 {
        transform: translate(calc(-50% + 275px), -50%) scale(0.72);
        opacity: 0.28;
    }

    .stack-video-testimonial-card__vertical {
        font-size: 13px;
        letter-spacing: 0px;
    }

    .stack-video-testimonial-card__info {
        left: 20px;
        bottom: 22px;
    }

    .stack-video-testimonials__nav {
        gap: 16px;
        margin-top: 10px;
    }

    .stack-video-testimonials__arrow {
        width: 42px;
        height: 42px;
    }
}
section#work {
    padding-bottom: 120px;
}
span.h6-size {
    font-size: 22px !important;
}
/* Client testimonials mute/unmute button */
.stack-video-testimonial-card__mute {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.48);
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 6;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.stack-video-testimonial-card.is-active .stack-video-testimonial-card__mute {
    display: inline-flex;
}

.stack-video-testimonial-card__mute:hover {
    transform: scale(1.08);
    background: #da3227;
    border-color: #da3227;
}

.stack-video-testimonial-card__mute:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    .stack-video-testimonial-card__mute {
        top: 14px;
        right: 14px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ================================
   Responsive hardening
   Final mobile and tablet layer for stable widths, readable type, and
   natural section flow across small screens.
   ================================ */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

@media (max-width: 1024px) {
    :root {
        --section-padding-x: clamp(28px, 5vw, 56px);
        --section-padding-y: clamp(76px, 9vw, 100px);
        --section-padding-small-x: clamp(28px, 5vw, 56px);
        --section-padding-small-y: clamp(60px, 8vw, 82px);
        --font-h1: clamp(62px, 8.2vw, 86px);
        --font-h2: clamp(44px, 6vw, 62px);
        --font-h3: clamp(38px, 5vw, 52px);
        --font-h4: clamp(26px, 3.6vw, 36px);
        --font-h5: clamp(19px, 2.6vw, 24px);
        --font-h6: clamp(15px, 2vw, 18px);
        --font-p: clamp(17px, 2.25vw, 21px);
        --font-list: clamp(17px, 2.35vw, 22px);
    }

    .stack-container,
    .stack-footer-container,
    .hero-header,
    .hero-content,
    .why-section-inner,
    .stack-services-content {
        width: min(100% - (var(--section-padding-x) * 2), var(--site-container-max-width)) !important;
    }

    .brand-trust-section {
        padding-left: var(--section-padding-x) !important;
        padding-right: var(--section-padding-x) !important;
    }

    .brand-trust-card {
        width: 100% !important;
    }

    .stack-cta-content h2,
    .footer-cta-content h2,
    .how-work-heading h2,
    .stack-footer-email {
        overflow-wrap: anywhere;
        white-space: normal !important;
    }

    .stack-services-sticky,
    .hero-sticky {
        height: 100svh;
    }
}

@media (max-width: 860px) {
    .stack-menu-overlay {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .stack-menu-panel {
        height: auto !important;
        min-height: calc(100svh - 28px);
        overflow: visible !important;
    }

    .brand-top-grid,
    .stack-work-head,
    .why-content-grid,
    .stack-footer-top {
        grid-template-columns: 1fr !important;
    }

    .brand-divider,
    .stack-work-head > span {
        width: 100% !important;
        height: 1px !important;
    }

    .trusted-row {
        grid-template-columns: 1fr !important;
    }

    .trusted-row h2,
    .brand-heading,
    .stack-work-head h2,
    .stack-work-head h3,
    .stack-work-head p {
        text-align: center !important;
    }

    .stack-cta-card {
        min-height: auto !important;
        display: grid;
    }

    .stack-cta-card::before {
        background: linear-gradient(180deg, rgba(132,27,29,0.98) 0%, rgba(132,27,29,0.88) 58%, rgba(0,0,0,0.28) 100%);
    }

    .stack-cta-content {
        width: 100% !important;
        min-height: 460px;
        padding: clamp(34px, 7vw, 52px) clamp(22px, 6vw, 42px) !important;
        justify-content: flex-start;
    }

    .stack-cta-visual {
        inset: auto 0 0 auto;
        width: min(92vw, 440px);
        height: 58%;
        opacity: 0.72;
    }

    .stack-footer-connect {
        margin: 0 !important;
        padding-top: clamp(20px, 5vw, 34px) !important;
    }

    .stack-footer-social,
    .stack-footer-legal {
        gap: 14px 24px !important;
    }
}

@media (max-width: 767px) {
    :root {
        --section-padding-x: clamp(18px, 5vw, 28px);
        --section-padding-y: clamp(58px, 14vw, 78px);
        --section-padding-small-x: clamp(18px, 5vw, 28px);
        --section-padding-small-y: clamp(48px, 12vw, 64px);
        --font-h1: clamp(42px, 12vw, 58px);
        --font-h2: clamp(34px, 9vw, 46px);
        --font-h3: clamp(30px, 8vw, 40px);
        --font-h4: clamp(24px, 6.4vw, 31px);
        --font-h5: clamp(18px, 4.8vw, 22px);
        --font-h6: clamp(14px, 3.7vw, 17px);
        --font-p: clamp(15px, 4.1vw, 18px);
        --font-list: clamp(15px, 4.1vw, 18px);
    }

    body {
        min-width: 0;
    }

    img,
    video {
        max-width: 100%;
    }


    .hero-header {
        top: 0;
        align-items: center;
        gap: 12px;
    }

    .hero-logo {
        width: clamp(104px, 30vw, 138px) !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    .hero-nav {
        flex-shrink: 0;
    }

    .hero-content {
        left: 50% !important;
        width: calc(100% - (var(--section-padding-x) * 2)) !important;
        max-width: calc(100% - (var(--section-padding-x) * 2)) !important;
        padding-left: 0 !important;
    }

    .hero-title {
        gap: 0 !important;
    }

    .hero-title .title-line {
        max-width: 100%;
        letter-spacing: 0px;
        white-space: normal !important;
    }

    .stack-watermark {
        left: 6% !important;
        width: 100%;
        text-align: center;
        transform: translateX(-50%);
        font-size: clamp(60px, 19vw, 120px) !important;
        letter-spacing: 0px;
    }

    .brand-trust-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .brand-trust-card,
    .stack-work-card,
    .stack-cta-card,
    .footer-cta-card {
        border-radius: 18px !important;
    }

    .brand-heading strong {
        display: block !important;
        font-size: var(--font-h2) !important;
    }

    .brand-copy {
        max-width: 100%;
        text-align: center;
    }

    .why-digital-section,
    .stack-services-section,
    .how-work-section {
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .why-section-inner,
    .stack-services-sticky,
    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        height: auto !important;
    }

    .why-main-title {
        align-items: flex-start;
    }

    .why-pill-row {
        width: 100%;
        justify-content: center;
    }

    .stack-services-content {
        min-height: clamp(620px, 170vw, 760px) !important;
    }

    .stack-service-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .stack-service-points,
    .how-work-points {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .how-work-heading {
        text-align: center !important;
    }

    .how-work-copy {
        min-height: auto !important;
        display: block !important;
    }

    .how-work-panel {
        display: none !important;
        min-height: auto !important;
    }

    .how-work-panel.is-active {
        display: flex !important;
    }

    .how-work-dots {
        position: relative !important;
        margin-top: 22px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .stack-work-card {
        padding: clamp(28px, 7vw, 38px) clamp(16px, 5vw, 24px) !important;
    }

    .stack-work-track {
        gap: 16px !important;
    }

    .stack-work-item {
        flex-basis: min(82vw, 360px) !important;
        min-height: clamp(230px, 68vw, 330px) !important;
    }

    .stack-video-testimonials {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .stack-video-testimonials__cards {
        height: clamp(401px, 0vw, 0px) !important;
        overflow: hidden;
    }

    .stack-video-testimonial-card.is-active {
        width: min(calc(100vw - 44px), 330px) !important;
        height: min(390px, 108vw) !important;
    }

    .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - min(54vw, 205px)), -50%) scale(0.82) !important;
    }

    .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + min(54vw, 205px)), -50%) scale(0.82) !important;
    }

    .stack-video-testimonial-card.is-left-2,
    .stack-video-testimonial-card.is-right-2 {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .footer-cta-card {
        min-height: auto !important;
    }

    .footer-cta-visual {
        top: -27px !important;
        width: min(76vw, 280px) !important;
    }

    .footer-cta-content {
        padding: clamp(214px, 62vw, 250px) 18px 28px !important;
    }

    .stack-footer-bottom,
    .stack-footer-social,
    .stack-footer-legal {
        align-items: flex-start !important;
    }
}

@media (max-width: 420px) {
    :root {
        --section-padding-x: 16px;
        --font-h1: clamp(38px, 11.4vw, 46px);
        --font-h2: clamp(30px, 8.8vw, 38px);
        --font-h3: clamp(27px, 7.7vw, 34px);
        --font-p: 15px;
        --font-list: 15px;
    }

    .hero-header .btn-talk {
        max-width: 116px;
        padding: 0 10px !important;
    }

    .hero-eyebrow {
        max-width: 100% !important;
        white-space: normal !important;
        border-radius: 18px !important;
    }

    .stack-menu-links a {
        font-size: clamp(28px, 10vw, 38px) !important;
    }


    .trusted-row h2,
    .stack-video-testimonials__head h2,
    .footer-cta-content h2 {
        line-height: 1.04 !important;
    }

    .stack-cta-content {
        min-height: 420px;
    }

    .stack-footer-email {
        font-size: clamp(27px, 8.7vw, 36px) !important;
    }
}

/* ================================
   Complete tablet/mobile content flow
   Every section and panel remains visible below desktop widths.
   ================================ */
@media (max-width: 1024px) {
    .observe-reveal,
    .observe-reveal.is-visible,
    .why-scroll-item,
    .why-scroll-title,
    .why-scroll-headline,
    .why-scroll-pill,
    .why-scroll-copy {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }

    .brand-trust-section,
    .why-digital-section,
    .stack-services-section,
    .stack-cta-section,
    .how-work-section,
    .stack-work-section,
    .footer-cta-section,
    .stack-footer {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .brand-trust-card,
    .why-section-inner,
    .stack-services-sticky,
    .stack-services-content,
    .stack-cta-card,
    .how-work-section > .stack-container,
    .how-work-board,
    .how-work-copy,
    .stack-work-card,
    .footer-cta-card,
    .stack-footer-container {
        min-height: auto !important;
        height: auto !important;
    }

    .stack-services-sticky,
    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        display: block !important;
    }

    .stack-services-section {
        padding: var(--section-padding-y) 0 !important;
        background: #020914 !important;
    }

    .stack-services-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
    }

    .stack-services-content {
        position: relative !important;
        z-index: 4 !important;
        width: min(100% - (var(--section-padding-x) * 2), var(--site-container-max-width)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(28px, 5vw, 46px) !important;
        align-items: stretch !important;
    }

    .stack-service-card,
    .stack-service-card.is-active {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: clamp(24px, 4.5vw, 36px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 18px;
        background: rgba(0,0,0,0.42);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .stack-service-pill {
        width: fit-content !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 0 clamp(18px, 3vw, 26px) !important;
        padding: 11px 18px !important;
    }

    .stack-service-card h2,
    .stack-service-card p,
    .stack-service-line,
    .stack-service-points,
    .stack-service-btn {
        margin-left: 0 !important;
    }

    .stack-service-card h2 {
        max-width: 100% !important;
        font-size: var(--font-h2) !important;
        line-height: 1.02 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .stack-service-card h2 span {
        display: inline !important;
    }

    .stack-service-card p {
        max-width: 100% !important;
        margin-top: clamp(16px, 2.8vw, 22px) !important;
        font-size: var(--font-p) !important;
    }

    .stack-service-line {
        width: 100% !important;
        margin-top: clamp(18px, 3vw, 26px) !important;
        margin-bottom: clamp(18px, 3vw, 26px) !important;
    }

    .stack-service-points {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 18px !important;
    }

    .stack-service-points li,
    .how-work-points li {
        white-space: normal !important;
    }

    .stack-service-btn {
        min-width: 0 !important;
        width: fit-content !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 52px !important;
        margin-top: clamp(22px, 4vw, 32px) !important;
        padding: 0 24px !important;
    }

    .how-work-section {
        padding: var(--section-padding-y) 0 !important;
    }

    .how-work-board {
        display: block !important;
    }

    .how-work-bg,
    .how-work-orbit,
    .how-work-dots {
        display: none !important;
    }

    .how-work-copy {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(18px, 3.5vw, 28px) !important;
    }

    .how-work-panel,
    .how-work-panel.is-active {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        min-height: auto !important;
        padding: clamp(22px, 4vw, 34px) !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        pointer-events: auto !important;
        text-align: left !important;
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 18px;
        background: rgba(255,255,255,0.045);
    }

    .how-work-panel h3,
    .how-work-panel p {
        max-width: 100% !important;
    }

    .how-work-panel h3 {
        line-height: 1.05 !important;
    }

    .how-work-points {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 18px !important;
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    .stack-service-points,
    .how-work-points {
        grid-template-columns: 1fr !important;
    }

    .stack-service-card,
    .stack-service-card.is-active,
    .how-work-panel,
    .how-work-panel.is-active {
        padding: clamp(20px, 6vw, 28px) !important;
        border-radius: 16px;
    }

    .stack-service-btn {
        width: 100% !important;
    }
}

/* ================================
   Final services-only tablet/mobile animation restore
   Keeps Our Services working like desktop sticky scroll animation below laptop sizes.
   ================================ */
@media (max-width: 1024px) {
    .stack-services-section {
        display: block !important;
        position: relative !important;
        height: 430vh !important;
        min-height: 3000px !important;
        padding: 0 !important;
        overflow: clip !important;
        background: #020914 !important;
        isolation: isolate !important;
    }

    .stack-services-sticky {
        position: sticky !important;
        top: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100vh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        background: #020914 !important;
        isolation: isolate !important;
    }

    .stack-services-video-wrap {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
        z-index: 0 !important;
        background: #020914 !important;
    }

    .stack-service-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: scale(1.1) !important;
        filter: brightness(0.82) contrast(1.08) saturate(1.08) !important;
        transition: opacity 0.85s cubic-bezier(.19,1,.22,1), transform 1.1s cubic-bezier(.19,1,.22,1), visibility 0.85s cubic-bezier(.19,1,.22,1) !important;
        will-change: opacity, transform !important;
    }

    .stack-service-video.is-active {
        opacity: 0.82 !important;
        visibility: visible !important;
        transform: scale(1.03) !important;
    }

    .stack-services-shade,
    .stack-services-blue,
    .stack-services-red {
        display: block !important;
        pointer-events: none !important;
    }

    .stack-services-content {
        position: relative !important;
        z-index: 4 !important;
        width: min(100% - clamp(40px, 8vw, 96px), 920px) !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        align-items: center !important;
    }

    .stack-service-card,
    .stack-service-card.is-active {
        inset: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .stack-service-card {
        position: absolute !important;
        left: 0 !important;
        width: min(860px, 100%) !important;
        max-width: 100% !important;
        padding: clamp(10px, 2.4vw, 24px) 0 0 !important;
        color: #ffffff !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 72px, 0) !important;
        pointer-events: none !important;
        transition: opacity 0.86s cubic-bezier(.19,1,.22,1), transform 0.86s cubic-bezier(.19,1,.22,1), visibility 0.86s cubic-bezier(.19,1,.22,1) !important;
        will-change: opacity, transform !important;
    }

    .stack-service-card.is-active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    .stack-service-pill {
        display: inline-flex !important;
        width: auto !important;
        min-width: clamp(150px, 24vw, 220px) !important;
        height: clamp(48px, 7vw, 68px) !important;
        margin: 0 0 clamp(54px, 10vh, 100px) !important;
        padding: 0 clamp(22px, 3.8vw, 38px) !important;
        border-radius: 999px !important;
        background: rgba(28, 80, 157, 0.82) !important;
        font-size: clamp(17px, 2.8vw, 25px) !important;
        line-height: 1 !important;
    }

    .stack-service-card h2,
    .stack-service-card p,
    .stack-service-line,
    .stack-service-points,
    .stack-service-btn {
        margin-left: 0 !important;
    }

    .stack-service-card h2 {
        max-width: 100% !important;
        padding-top: 0 !important;
        font-size: clamp(48px, 8vw, 72px) !important;
        line-height: 0.94 !important;
        letter-spacing: 0px;
        word-spacing: 0.04em !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-wrap: balance !important;
    }

    .stack-service-card h2 span {
        display: block !important;
    }

    .stack-service-card p {
        max-width: min(680px, 100%) !important;
        margin-top: clamp(18px, 3vh, 28px) !important;
        font-size: clamp(17px, 2.4vw, 21px) !important;
        line-height: 1.42 !important;
    }

    .stack-service-line {
        width: min(620px, 100%) !important;
        margin-top: clamp(22px, 3.5vh, 34px) !important;
        margin-bottom: clamp(22px, 3.2vh, 32px) !important;
    }

    .stack-service-points {
        width: min(700px, 100%) !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: clamp(12px, 2.1vw, 18px) clamp(18px, 3vw, 32px) !important;
    }

    .stack-service-points li {
        white-space: normal !important;
        padding-left: 26px !important;
        font-size: clamp(16px, 2.2vw, 19px) !important;
        line-height: 1.28 !important;
    }

    .stack-service-points li::before {
        width: 10px !important;
        height: 10px !important;
        top: 0.46em !important;
    }

    .stack-service-btn {
        display: inline-flex !important;
        width: fit-content !important;
        min-width: clamp(188px, 26vw, 230px) !important;
        max-width: 100% !important;
        height: clamp(52px, 7vw, 64px) !important;
        min-height: 0 !important;
        margin-top: clamp(24px, 4vh, 40px) !important;
        padding: 0 clamp(24px, 4vw, 36px) !important;
    }
}

@supports (height: 100svh) {
    @media (max-width: 1024px) {
        .stack-services-section {
            height: 430svh !important;
        }

        .stack-services-sticky {
            height: 100svh !important;
        }
    }
}

@media (max-width: 767px) {
    .stack-services-section {
        height: 440vh !important;
        min-height: 2720px !important;
    }

    .stack-services-content {
        width: calc(100% - clamp(32px, 9vw, 52px)) !important;
        align-items: center !important;
    }

    .stack-service-card {
        width: 100% !important;
        padding: 0 !important;
        transform: translate3d(0, 54px, 0) !important;
    }

    .stack-service-card.is-active {
        transform: translate3d(0, 0, 0) !important;
    }

    .stack-service-pill {
        min-width: 0 !important;
        height: 42px !important;
        margin-bottom: clamp(30px, 7vh, 52px) !important;
        padding: 0 20px !important;
        font-size: 16px !important;
    }

    .stack-service-card h2 {
        font-size: clamp(34px, 10.6vw, 52px) !important;
        line-height: 0.96 !important;
        text-wrap: balance !important;
    }

    .stack-service-card p {
        margin-top: 18px !important;
        font-size: clamp(15px, 4vw, 18px) !important;
        line-height: 1.4 !important;
    }

    .stack-service-line {
        width: 100% !important;
        margin: 20px 0 18px !important;
    }

    .stack-service-points {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .stack-service-points li {
        padding-left: 24px !important;
        font-size: clamp(14px, 3.8vw, 17px) !important;
        line-height: 1.22 !important;
    }

    .stack-service-btn {
        width: fit-content !important;
        min-width: 184px !important;
        height: 50px !important;
        margin-top: 24px !important;
        padding: 0 24px !important;
        font-size: 15px !important;
    }
}

@supports (height: 100svh) {
    @media (max-width: 767px) {
        .stack-services-section {
            height: 440svh !important;
        }
    }
}

@media (max-width: 380px) {
    .stack-services-content {
        width: calc(100% - 30px) !important;
    }

    .stack-service-pill {
        margin-bottom: 26px !important;
    }

    .stack-service-card h2 {
        font-size: clamp(31px, 9.7vw, 38px) !important;
    }

    .stack-service-card p,
    .stack-service-points li {
        font-size: 14px !important;
    }

    .stack-service-line {
        margin: 16px 0 14px !important;
    }

    .stack-service-btn {
        height: 48px !important;
        min-width: 172px !important;
        margin-top: 20px !important;
    }
}

/* ================================
   Header alignment polish
   Keeps logo, CTA and menu button locked to one clean center line.
   Mobile logo is slightly smaller as requested.
   ================================ */
.hero-header {
    align-items: center;
}

.hero-logo,
.hero-nav,
.btn-talk,
.btn-menu {
    align-self: center;
}

.hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 0;
    transform-origin: left center;
}

.hero-logo img {
    display: block;
    line-height: 0;
}

.hero-nav {
    min-height: var(--menu-height);
}

@media (max-width: 767px) {
    :root {
        --hero-logo-width: 108px;
    }

    .hero-header {
        align-items: center;
    }
}

@media (max-width: 480px) {
    :root {
        --hero-logo-width: 102px;
    }
}
@media (max-width: 767px) {
    .hero-logo img{
        max-width: 150px;
    }
}

/* ================================
   How We Work final requested update
   - No sticky pinning
   - Circle rotates slowly forever
   - Number clicks update description + active circle color
   ================================ */
.how-work-section {
    min-height: auto !important;
    overflow: hidden !important;
}

.how-work-section > .stack-container {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    display: block !important;
    justify-content: initial !important;
    overflow: visible !important;
}

.how-work-board {
    --how-rotation: 0deg;
    --how-rotation-negative: 0deg;
}

.how-orbit-ring,
.how-orbit-node {
    will-change: transform;
}

.how-work-dots button,
.how-orbit-node {
    cursor: pointer;
}

@media (max-width: 767px) {
    .how-work-section {
        min-height: auto !important;
        padding-top: clamp(68px, 16vw, 92px) !important;
        padding-bottom: clamp(70px, 16vw, 96px) !important;
        overflow: hidden !important;
    }

    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .how-work-board {
        display: flex !important;
        flex-direction: column !important;
        min-height: auto !important;
        gap: 28px !important;
    }

    .how-work-bg {
        display: none !important;
    }

    .how-work-orbit {
        display: grid !important;
        --orbit-size: min(390px, 88vw);
        --orbit-radius: calc(var(--orbit-size) * .44);
        order: 1 !important;
        margin: 0 auto 8px !important;
    }

    .how-work-copy {
        position: relative !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        order: 2 !important;
    }

    .how-work-dots {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 1 !important;
        justify-content: center !important;
        margin: 0 0 20px !important;
    }

    .how-work-panel {
        position: relative !important;
        inset: auto !important;
        order: 2 !important;
        display: none !important;
        min-height: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 14px, 0) !important;
        pointer-events: none !important;
    }

    .how-work-panel.is-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    .how-orbit-node {
        width: 70px !important;
        min-height: 62px !important;
        padding: 6px !important;
    }

    .how-orbit-node span {
        display: none !important;
    }
}

@media (max-width: 440px) {
    .how-work-orbit {
        --orbit-size: min(330px, 86vw);
        --orbit-radius: calc(var(--orbit-size) * .43);
    }

    .how-orbit-node {
        width: 58px !important;
        min-height: 52px !important;
    }
}

/* Smooth continuous orbit movement: keep hover/active color transitions without transform lag. */
.how-orbit-node {
    transition: background .32s ease, border-color .32s ease, box-shadow .32s ease !important;
}

/* ================================
   How We Work mobile/tablet orbit parity
   Requested: keep desktop-perfect interaction, show the same
   infinite rotating circle on tablet/mobile, without sticky pinning.
   ================================ */
@media (min-width: 768px) and (max-width: 1180px) {
    .how-work-section {
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
        padding-top: clamp(76px, 10vw, 118px) !important;
        padding-bottom: clamp(78px, 10vw, 122px) !important;
    }

    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .how-work-heading {
        margin-bottom: clamp(34px, 5vw, 58px) !important;
    }

    .how-work-board {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: center !important;
        gap: clamp(34px, 5.5vw, 58px) !important;
        min-height: auto !important;
    }

    .how-work-orbit {
        --orbit-size: min(560px, 68vw) !important;
        --orbit-radius: calc(var(--orbit-size) * .40) !important;
        display: grid !important;
        order: 1 !important;
        margin: 0 auto !important;
    }

    .how-work-copy {
        order: 2 !important;
        width: min(720px, 100%) !important;
        min-height: clamp(380px, 48vw, 470px) !important;
        margin: 0 auto !important;
    }

    .how-work-panel {
        display: flex !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .how-work-panel h3,
    .how-work-panel p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .how-work-points {
        justify-content: center !important;
    }

    .how-work-dots {
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

@media (max-width: 767px) {
    .how-work-section {
        min-height: auto !important;
        height: auto !important;
        overflow: hidden !important;
        padding-top: clamp(62px, 15vw, 86px) !important;
        padding-bottom: clamp(66px, 16vw, 92px) !important;
    }

    .how-work-section > .stack-container {
        position: relative !important;
        top: auto !important;
        min-height: auto !important;
        height: auto !important;
        display: block !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .how-work-heading {
        text-align: center !important;
        margin-bottom: clamp(26px, 8vw, 38px) !important;
    }

    .how-work-board {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(24px, 7vw, 34px) !important;
        min-height: auto !important;
    }

    .how-work-bg {
        display: none !important;
    }

    .how-work-orbit {
        --orbit-size: min(430px, 82vw) !important;
        --orbit-radius: calc(var(--orbit-size) * .37) !important;
        display: grid !important;
        order: 1 !important;
        width: var(--orbit-size) !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .how-orbit-node {
        width: clamp(52px, 17vw, 78px) !important;
        min-height: clamp(48px, 15vw, 70px) !important;
        padding: clamp(5px, 1.6vw, 8px) !important;
        border-radius: clamp(12px, 4vw, 18px) !important;
    }

    .how-orbit-node span {
        display: none !important;
    }

    .how-orbit-core {
        width: 34% !important;
    }

    .how-orbit-core strong {
        font-size: clamp(34px, 12vw, 58px) !important;
    }

    .how-orbit-core span {
        font-size: clamp(8px, 2.5vw, 11px) !important;
        letter-spacing: 0px;
    }

    .how-work-copy {
        order: 2 !important;
        position: relative !important;
        width: 100% !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        margin: 0 auto !important;
    }

    .how-work-dots {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        order: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 0 clamp(18px, 5vw, 24px) !important;
        padding: 0 !important;
    }

    .how-work-dots button {
        width: clamp(34px, 10vw, 42px) !important;
        height: clamp(34px, 10vw, 42px) !important;
    }

    .how-work-panel {
        position: relative !important;
        inset: auto !important;
        order: 2 !important;
        display: none !important;
        min-height: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 14px, 0) !important;
        pointer-events: none !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        transition: opacity .42s ease, visibility .42s ease, transform .42s ease !important;
    }

    .how-work-panel.is-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
        pointer-events: auto !important;
    }

    .how-work-panel h3,
    .how-work-panel p {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .how-work-panel p {
        margin-top: 14px !important;
        line-height: 1.46 !important;
    }

    .how-work-points {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        gap: 10px !important;
        margin-top: 16px !important;
        padding: 0 !important;
    }

    .how-work-points li {
        white-space: normal !important;
    }
}

/* Tablet How We Work: keep only clicked/active description visible, matching desktop behavior. */
@media (min-width: 768px) and (max-width: 1180px) {
    .how-work-copy {
        position: relative !important;
        display: block !important;
        min-height: clamp(390px, 46vw, 470px) !important;
    }

    .how-work-panel {
        position: absolute !important;
        inset: 0 0 76px 0 !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 18px, 0) !important;
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
    }

    .how-work-panel.is-active {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .how-work-dots {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
    }
}

/* Shared button manager class - keeps every site button controlled from one base class. */
.stack91-btn {
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}


.stack91-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.86);
    outline-offset: 4px;
}

/* Work image hover headline/sub-headline. */
.stack-work-item {
    position: relative;
}

.stack-work-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.72) 100%);
    opacity: 0;
    transition: opacity 0.42s ease;
}

.stack-work-hover-content {
    position: absolute;
    left: clamp(18px, 2vw, 30px);
    right: clamp(18px, 2vw, 30px);
    bottom: clamp(18px, 2vw, 30px);
    z-index: 2;
    padding: clamp(16px, 1.5vw, 24px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: clamp(16px, 1.2vw, 22px);
    background: rgba(6, 8, 14, 0.58);
    color: #ffffff;
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.42s ease, transform 0.42s ease;
    pointer-events: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.stack-work-hover-content h3 {
    margin: 0;
    color: #ffffff;
    line-height: 1.02;
    letter-spacing: 0px;
}

.stack-work-hover-content p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.35;
}

.stack-work-item:hover::after,
.stack-work-item:focus-within::after {
    opacity: 1;
}

.stack-work-item:hover .stack-work-hover-content,
.stack-work-item:focus-within .stack-work-hover-content {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* ================================
   Our Services heading font fix
   Keeps the services heading on the same site-wide font system.
   ================================ */
.stack-services-section .stack-service-pill,
.stack-services-section .stack-service-card h2,
.stack-services-section .stack-service-card h2 span {
    font-family: var(--font-display, "Gilmer", "Neue Haas Grotesk Display Pro", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
    font-style: normal !important;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.stack-services-section .stack-service-card h2,
.stack-services-section .stack-service-card h2 span {
    font-weight: 800 !important;
    letter-spacing: 0px;
}
@media (min-width: 1280px) and (max-width: 1440px) {
  .stack-footer-connect {
     margin: 0px 0px 0px 23%;
  }
}
/* ================================
   Home Blog + Client Testimonials Split
   Professional split layout matching the provided reference.
   ================================ */
.stack-work-section {
    background:
        radial-gradient(circle at 50% 50%, rgba(218, 50, 39, 0.08), transparent 24%),
        radial-gradient(circle at 78% 18%, rgba(28, 80, 157, 0.10), transparent 28%),
        #000000;
}

.stack-work-section .stack-container {
    max-width: 1760px;
}

.home-split-showcase {
    position: relative;
    display: grid;
    grid-template-columns: minmax(620px, 1.14fr) minmax(360px, 0.86fr);
    gap: clamp(44px, 5vw, 96px);
    align-items: center;
    min-height: clamp(720px, 82vh, 980px);
    padding: clamp(34px, 3.4vw, 62px) 0;
}

.home-split-showcase__divider {
    position: absolute;
    top: 7%;
    bottom: 7%;
    left: 56.5%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.14), transparent);
    pointer-events: none;
}

.home-split-showcase__divider::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #da3227;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 28px rgba(218, 50, 39, 0.9);
}

.home-split-eyebrow,
.home-testimonial-panel .stack-video-testimonials__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
    color: #ffffff;
    font-size: clamp(11px, 0.8vw, 13px);
    font-weight: 800;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.home-split-eyebrow span,
.home-testimonial-panel .stack-video-testimonials__eyebrow span {
    width: 3px;
    height: 20px;
    border-radius: 999px;
    background: #da3227;
}

.home-blog-panel {
    position: relative;
    z-index: 2;
    max-width: 660px;
}

.home-split-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(34px, 3.75vw, 72px);
    line-height: 0.96;
    font-weight: 900;
    letter-spacing: 0px;
    text-transform: none;
}

.home-split-title strong {
    color: #da3227;
    font-weight: 900;
}

.home-split-copy,
.home-testimonial-copy {
    max-width: 560px;
    margin: 18px 0 0;
    color: rgba(255,255,255,0.72);
    font-size: clamp(14px, 1vw, 17px);
    line-height: 1.52;
}

.home-blog-list {
    display: grid;
    gap: clamp(14px, 1.1vw, 20px);
    margin-top: clamp(32px, 3vw, 52px);
}

.home-blog-card {
    display: grid;
    grid-template-columns: minmax(155px, 0.92fr) minmax(210px, 1.08fr);
    gap: clamp(16px, 1.3vw, 26px);
    align-items: center;
    min-height: clamp(150px, 9.6vw, 184px);
    padding: clamp(10px, 0.8vw, 14px);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: clamp(18px, 1.15vw, 24px);
    background: linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025));
    box-shadow: 0 24px 70px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.07);
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}

.home-blog-card:hover,
.home-blog-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(218,50,39,0.52);
    background: linear-gradient(135deg, rgba(218,50,39,0.13), rgba(255,255,255,0.035));
}

.home-blog-card__media {
    position: relative;
    min-height: clamp(126px, 8.2vw, 158px);
    margin: 0;
    border-radius: clamp(14px, 0.9vw, 18px);
    overflow: hidden;
    background: #080808;
}

.home-blog-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, rgba(218,50,39,0.18), transparent 55%);
    pointer-events: none;
}

.home-blog-card__media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: block;
    object-fit: cover;
    filter: saturate(0.96) contrast(1.04) brightness(0.88);
    transform: scale(1.03);
    transition: transform 0.45s ease;
}

.home-blog-card:hover .home-blog-card__media img,
.home-blog-card:focus-visible .home-blog-card__media img {
    transform: scale(1.08);
}

.home-blog-card__content {
    padding-right: clamp(8px, 0.8vw, 14px);
}

.home-blog-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.home-blog-card__meta span {
    color: #da3227;
}

.home-blog-card__meta em {
    color: rgba(255,255,255,0.58);
    font-style: normal;
}

.home-blog-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(17px, 1.15vw, 22px);
    line-height: 1.15;
    letter-spacing: 0px;
    font-weight: 900;
}

.home-blog-card p {
    margin: 10px 0 0;
    color: rgba(255,255,255,0.68);
    font-size: clamp(12px, 0.86vw, 14px);
    line-height: 1.42;
}

.home-blog-card b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 0px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0px;
    text-transform: uppercase;
}

.home-blog-card b i,
.home-blog-view-all span {
    color: #da3227;
    font-style: normal;
    transition: transform 0.25s ease;
}

.home-blog-card:hover b i,
.home-blog-card:focus-visible b i,
.home-blog-view-all:hover span,
.home-blog-view-all:focus-visible span {
    transform: translateX(4px);
}

.home-blog-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: clamp(220px, 15vw, 270px);
    margin-top: clamp(22px, 2vw, 34px);
    padding: 16px 28px;
    border: 1px solid #da3227;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0px;
    text-transform: uppercase;
    background: rgba(218,50,39,0.02);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.home-blog-view-all:hover,
.home-blog-view-all:focus-visible {
    background: #da3227;
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(218,50,39,0.25);
}

.home-blog-view-all:hover span,
.home-blog-view-all:focus-visible span {
    color: #ffffff;
}

.home-testimonial-panel.stack-video-testimonials {
    padding: 0;
    overflow: visible;
    align-self: center;
}

.home-testimonial-panel .stack-video-testimonials__head {
    max-width: 780px;
    margin: 0 auto clamp(24px, 2.5vw, 42px);
    text-align: center;
}

.home-testimonial-panel .stack-video-testimonials__head h2 {
    font-size: clamp(40px, 4.4vw, 82px);
}

.home-testimonial-copy {
    margin-left: auto;
    margin-right: auto;
}

.home-testimonial-panel .stack-video-testimonials__stage {
    max-width: 920px;
}

.home-testimonial-panel .stack-video-testimonials__cards {
    height: clamp(330px, 31vw, 445px);
}

.home-testimonial-panel .stack-video-testimonial-card {
    width: 70px;
    height: clamp(220px, 20vw, 300px);
    border-radius: 13px;
}

.home-testimonial-panel .stack-video-testimonial-card.is-active {
    width: min(640px, 100%);
    height: clamp(330px, 30vw, 430px);
    border-color: rgba(218, 50, 39, 0.74);
    box-shadow: 0 34px 90px rgba(0,0,0,0.45), 0 0 0 1px rgba(218,50,39,0.12);
}

.home-testimonial-panel .stack-video-testimonial-card.is-left-1 {
    transform: translate(calc(-50% - 330px), -50%) scale(0.95);
}

.home-testimonial-panel .stack-video-testimonial-card.is-left-2 {
    transform: translate(calc(-50% - 430px), -50%) scale(0.88);
}

.home-testimonial-panel .stack-video-testimonial-card.is-right-1 {
    transform: translate(calc(-50% + 330px), -50%) scale(0.95);
}

.home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
    transform: translate(calc(-50% + 430px), -50%) scale(0.88);
}

.home-testimonial-panel .stack-video-testimonial-card__play {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(218,50,39,0.55);
    background: rgba(0,0,0,0.18);
    color: #ffffff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.home-testimonial-panel .stack-video-testimonial-card__info {
    left: 24px;
    bottom: 22px;
}

.home-testimonial-panel .stack-video-testimonials__nav {
    margin-top: clamp(16px, 1.7vw, 26px);
}

.home-testimonial-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    max-width: 920px;
    margin: clamp(28px, 3vw, 52px) auto 0;
    padding: clamp(20px, 1.8vw, 30px) clamp(18px, 2.2vw, 36px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: clamp(18px, 1.2vw, 26px);
    background: linear-gradient(135deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
    box-shadow: 0 30px 90px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.07);
}

.home-testimonial-stats div {
    display: grid;
    gap: 4px;
    justify-items: center;
    text-align: center;
    position: relative;
}

.home-testimonial-stats div + div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255,255,255,0.09);
}

.home-testimonial-stats strong {
    color: #ffffff;
    font-size: clamp(22px, 1.8vw, 34px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0px;
}

.home-testimonial-stats span {
    color: rgba(255,255,255,0.62);
    font-size: clamp(11px, 0.82vw, 13px);
    line-height: 1.25;
}

@media (max-width: 1366px) {
    .home-split-showcase {
        grid-template-columns: minmax(560px, 1.18fr) minmax(330px, 0.82fr);
        gap: clamp(32px, 3.8vw, 58px);
    }

    .home-split-showcase__divider {
        left: 58.5%;
    }

    .home-blog-card {
        grid-template-columns: 145px 1fr;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active {
        width: min(560px, 100%);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - 285px), -50%) scale(0.95);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-2 {
        transform: translate(calc(-50% - 370px), -50%) scale(0.88);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + 285px), -50%) scale(0.95);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        transform: translate(calc(-50% + 370px), -50%) scale(0.88);
    }
}

@media (max-width: 1100px) {
    .home-split-showcase {
        grid-template-columns: 1fr;
        gap: 70px;
        min-height: 0;
    }

    .home-split-showcase__divider {
        display: none;
    }

    .home-blog-panel {
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
    }

    .home-split-copy {
        margin-left: auto;
        margin-right: auto;
    }

    .home-blog-card {
        text-align: left;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active {
        width: min(560px, 70vw);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - 350px), -50%) scale(0.95);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-2 {
        transform: translate(calc(-50% - 455px), -50%) scale(0.88);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + 350px), -50%) scale(0.95);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        transform: translate(calc(-50% + 455px), -50%) scale(0.88);
    }
}

@media (max-width: 767px) {
    .home-split-showcase {
        gap: 54px;
        padding: 10px 0 22px;
    }

    .home-blog-panel,
    .home-testimonial-panel .stack-video-testimonials__head {
        text-align: left;
    }

    .home-split-eyebrow,
    .home-testimonial-panel .stack-video-testimonials__eyebrow {
        justify-content: flex-start;
        gap: 10px;
    }

    .home-split-copy,
    .home-testimonial-copy {
        margin-left: 0;
        margin-right: 0;
    }

    .home-blog-card {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .home-blog-card__media {
        min-height: 190px;
    }

    .home-blog-view-all {
        width: 100%;
        min-width: 0;
    }

    .home-testimonial-panel .stack-video-testimonials__stage {
        max-width: 100%;
        overflow: hidden;
    }

    .home-testimonial-panel .stack-video-testimonials__cards {
        height: 410px;
    }

    .home-testimonial-panel .stack-video-testimonial-card {
        width: 58px;
        height: 260px;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active {
        width: min(100%, 340px);
        height: 300px;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-1 {
        transform: translate(calc(-50% - 225px), -50%) scale(0.90);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-left-2 {
        transform: translate(calc(-50% - 292px), -50%) scale(0.82);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-1 {
        transform: translate(calc(-50% + 225px), -50%) scale(0.90);
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        transform: translate(calc(-50% + 292px), -50%) scale(0.82);
    }

    .home-testimonial-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 0;
    }

    .home-testimonial-stats div:nth-child(3)::before {
        display: none;
    }
}

/* ================================
   Home split section update: client left + blog right
   Simple testimonial slider without side preview cards
   ================================ */
.home-split-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(44px, 4.5vw, 84px);
    align-items: center;
}

.home-split-showcase__divider {
    left: 50%;
}

.home-testimonial-panel.stack-video-testimonials,
.home-blog-panel {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
}

.home-testimonial-panel .stack-video-testimonials__head,
.home-blog-panel {
    text-align: center;
}
.home-blog-card__content {
    text-align: left;
}
.home-testimonial-panel .stack-video-testimonials__head {
    max-width: 720px;
    margin: 0 auto clamp(24px, 2.2vw, 38px);
}

.home-testimonial-panel .stack-video-testimonials__head h2,
.home-split-title {
    font-size: clamp(38px, 3.45vw, 66px);
    line-height: 0.98;
}

.home-testimonial-copy,
.home-split-copy {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.home-testimonial-panel .stack-video-testimonials__stage {
    max-width: 610px;
    margin: 0 auto;
    overflow: visible;
}

.home-testimonial-panel .stack-video-testimonials__cards {
    height: clamp(350px, 27vw, 460px);
    cursor: default;
}

.home-testimonial-panel .stack-video-testimonial-card,
.home-testimonial-panel .stack-video-testimonial-card.is-left-1,
.home-testimonial-panel .stack-video-testimonial-card.is-left-2,
.home-testimonial-panel .stack-video-testimonial-card.is-right-1,
.home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
    width: min(560px, 100%);
    height: clamp(315px, 24vw, 400px);
    border-radius: clamp(16px, 1.1vw, 22px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.985);
    z-index: 1;
    border-color: rgba(218, 50, 39, 0.28);
}

.home-testimonial-panel .stack-video-testimonial-card.is-active {
    width: 400px;
    height: clamp(315px, 24vw, 400px);
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10;
    border-color: rgba(218, 50, 39, 0.78);
    box-shadow: 0 34px 90px rgba(0,0,0,0.48), 0 0 0 1px rgba(218,50,39,0.18);
}

.home-testimonial-panel .stack-video-testimonial-card__vertical {
    display: none;
}

.home-testimonial-panel .stack-video-testimonial-card__info {
    left: clamp(20px, 1.8vw, 28px);
    bottom: clamp(20px, 1.8vw, 28px);
}

.home-testimonial-panel .stack-video-testimonial-card__play {
    width: clamp(54px, 4vw, 66px);
    height: clamp(54px, 4vw, 66px);
}

.home-testimonial-stats {
    display: none;
}

.home-blog-list {
    margin-top: clamp(26px, 2.2vw, 42px);
}

.home-blog-card {
    min-height: clamp(138px, 8.7vw, 168px);
}

.home-blog-card__media {
    min-height: clamp(118px, 7.4vw, 146px);
}

@media (max-width: 1366px) {
    .home-split-showcase {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(32px, 3.5vw, 58px);
    }

    .home-split-showcase__divider {
        left: 50%;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active,
    .home-testimonial-panel .stack-video-testimonial-card,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-2,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        width: min(510px, 100%);
    }
}

@media (max-width: 1100px) {
    .home-split-showcase {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .home-split-showcase__divider {
        display: none;
    }

    .home-testimonial-panel.stack-video-testimonials,
    .home-blog-panel {
        max-width: 820px;
    }

    .home-blog-panel {
        order: 2;
    }

    .home-testimonial-panel {
        order: 1;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active,
    .home-testimonial-panel .stack-video-testimonial-card,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-2,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        width: min(560px, 100%);
    }
}

@media (max-width: 767px) {
    .home-testimonial-panel .stack-video-testimonials__head,
    .home-blog-panel {
        text-align: left;
    }

    .home-testimonial-copy,
    .home-split-copy {
        margin-left: 0;
        margin-right: 0;
    }

    .home-testimonial-panel .stack-video-testimonials__stage {
        max-width: 100%;
        overflow: visible;
    }

    .home-testimonial-panel .stack-video-testimonials__cards {
        height: 330px;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active,
    .home-testimonial-panel .stack-video-testimonial-card,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-2,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        width: 100%;
        height: 300px;
    }
}

/* Targeted home split refinement: two blog cards with balanced spacing */
.home-split-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
}

.home-testimonial-panel.stack-video-testimonials,
.home-blog-panel {
    min-height: clamp(560px, 52vw, 720px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-blog-panel .home-split-title {
    font-size:65px;
    letter-spacing: 0px;
}

.home-blog-panel .home-split-copy {
    max-width: 360px;
    margin-top: 14px;
}

.home-blog-list {
    gap: clamp(18px, 1.6vw, 28px);
    margin-top: clamp(28px, 2.6vw, 44px);
}

.home-blog-card {
    min-height: clamp(160px, 10.8vw, 205px);
}

.home-blog-card__media {
    min-height: clamp(140px, 16vw, 230px);
}

.home-blog-view-all {
    margin-top: clamp(28px, 2.2vw, 40px);
}

@media (max-width: 1023px) {
    .home-testimonial-panel.stack-video-testimonials,
    .home-blog-panel {
        min-height: auto;
    }
}


/* What Sets Us Apart - octopus section */
.stack-octopus-apart {
    position: relative;
    background:
        radial-gradient(circle at 8% 88%, rgba(237, 48, 43, 0.26) 0%, rgba(237, 48, 43, 0.1) 18%, rgba(237, 48, 43, 0) 42%),
        radial-gradient(circle at 100% 0%, rgba(237, 48, 43, 0.34) 0%, rgba(237, 48, 43, 0.12) 16%, rgba(237, 48, 43, 0) 42%),
        radial-gradient(circle at 0% 26%, rgba(12, 47, 101, 0.28) 0%, rgba(12, 47, 101, 0.12) 20%, rgba(12, 47, 101, 0) 46%),
        linear-gradient(180deg, #030303 0%, #000000 100%);
    overflow: hidden;
}

.stack-octopus-apart::before,
.stack-octopus-apart::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.stack-octopus-apart::before {
    width: clamp(260px, 24vw, 380px);
    height: clamp(260px, 24vw, 380px);
    left: -8%;
    top: 6%;
    background: radial-gradient(circle, rgba(28,80,157,0.18) 0%, rgba(28,80,157,0.08) 40%, rgba(28,80,157,0) 75%);
    filter: blur(18px);
}

.stack-octopus-apart::after {
    width: clamp(280px, 28vw, 440px);
    height: clamp(280px, 28vw, 440px);
    right: -8%;
    top: -8%;
    background: radial-gradient(circle, rgba(237,48,43,0.32) 0%, rgba(237,48,43,0.12) 34%, rgba(237,48,43,0) 72%);
    filter: blur(16px);
}

.stack-octopus-apart__wrap {
    position: relative;
    padding:0px;
}

.stack-octopus-apart__header {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.stack-octopus-apart__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #ed302b;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.stack-octopus-apart__eyebrow span {
    width: clamp(72px, 7vw, 108px);
    height: 2px;
    background: linear-gradient(90deg, rgba(237,48,43,0), rgba(237,48,43,0.95), rgba(237,48,43,0));
}

.stack-octopus-apart__title {
    margin: 0;
    color: #fff;
    font-size: clamp(3.3rem, 7vw, 7rem);
    line-height: 0.94;
    letter-spacing: 0px;
}

.stack-octopus-apart__title strong {
    color: #ed302b;
    font: inherit;
}

.stack-octopus-apart__copy {
    max-width: 980px;
    margin: 22px auto 0;
    color: rgba(255,255,255,0.94);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    line-height: 1.55;
}

.stack-octopus-apart__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(210px, 300px) minmax(460px, 760px) minmax(210px, 300px);
    align-items: end;
    justify-content: center;
    gap: clamp(18px, 1.7vw, 34px);
    margin-top: clamp(26px, 3vw, 42px);
}

.stack-octopus-apart__side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(-7px, 0vw, 0px);
    min-height: clamp(346px, 39vw, 640px);
    padding-bottom: clamp(21px, 17.8vw, 178px);
}

.stack-octopus-apart__side--left {
    align-items: flex-start;
}

.stack-octopus-apart__side--right {
    align-items: flex-end;
}

.stack-octopus-apart__visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    min-height: clamp(420px, 44vw, 720px);
}

.stack-octopus-apart__visual::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: clamp(240px, 32vw, 460px);
    height: clamp(80px, 10vw, 140px);
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(237,48,43,0.3) 0%, rgba(237,48,43,0.1) 45%, rgba(237,48,43,0) 78%);
    filter: blur(28px);
    pointer-events: none;
}

.stack-octopus-apart__visual img {
    position: relative;
    z-index: 2;
    width: 1200px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 24px 44px rgba(0,0,0,0.52));
}

.stack-octopus-metric-card {
    position: relative;
    width: min(100%, 260px);
    padding: 10px 0 14px;
}

.stack-octopus-metric-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 6px;
    left: -10px;
    width: 1px;
    background: linear-gradient(180deg, rgba(237,48,43,0) 0%, rgba(237,48,43,0.65) 18%, rgba(237,48,43,0.65) 82%, rgba(237,48,43,0) 100%);
}

.stack-octopus-apart__side--right .stack-octopus-metric-card::before {
    left: auto;
    right: -10px;
}

.stack-octopus-metric-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 92%;
    height: 2px;
    background: linear-gradient(90deg, rgba(237,48,43,0.98) 0%, rgba(237,48,43,0.16) 56%, rgba(237,48,43,0) 100%);
    box-shadow: 0 0 14px rgba(237,48,43,0.35);
}

.stack-octopus-apart__side--right .stack-octopus-metric-card::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg, rgba(237,48,43,0.98) 0%, rgba(237,48,43,0.16) 56%, rgba(237,48,43,0) 100%);
}

.stack-octopus-metric-card__number {
    margin: 0;
    color: #fff;
    font-family: var(--font-display);
    font-size: clamp(4rem, 5vw, 5.7rem);
    line-height: 0.92;
    letter-spacing: 0px;
    text-shadow: 0 0 18px rgba(255,255,255,0.18), 0 0 28px rgba(237,48,43,0.16);
}

.stack-octopus-metric-card__label {
    margin: 16px 0 0;
    color: rgba(255,255,255,0.96);
    font-size: clamp(1.2rem, 1.45vw, 1.85rem);
    line-height: 1.1;
}

.stack-octopus-apart__side--right .stack-octopus-metric-card {
    text-align: right;
}


@media (min-width: 1191px) {
    .home-case-title {
        font-size: clamp(54px, 5.2vw, 92px) !important;
    }

    .home-case-card--large .home-case-name {
        font-size: clamp(34px, 3.1vw, 58px) !important;
    }

    .home-case-card--small .home-case-name {
        font-size: clamp(22px, 1.65vw, 32px) !important;
    }

    .home-case-copy {
        max-width: 560px;
        font-size: clamp(14px, 1vw, 18px) !important;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-more-link {
        font-size: clamp(12px, 0.78vw, 15px) !important;
    }
}

@media (max-width: 1180px) {
    .stack-octopus-apart__grid {
        grid-template-columns: minmax(180px, 1fr) minmax(360px, 620px) minmax(180px, 1fr);
        gap: 18px;
    }

    .stack-octopus-apart__title {
        font-size: clamp(3rem, 6vw, 5.6rem);
    }

    .stack-octopus-metric-card__number {
        font-size: clamp(3.3rem, 4.6vw, 4.8rem);
    }

    .stack-octopus-metric-card__label {
        font-size: clamp(1rem, 1.5vw, 1.45rem);
    }
}

@media (max-width: 991px) {
    .stack-octopus-apart__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .stack-octopus-apart__visual {
        order: -1;
        min-height: auto;
        max-width: 640px;
        margin: 0 auto;
    }

    .stack-octopus-apart__side {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 24px;
        min-height: auto;
        padding-bottom: 0;
    }

    .stack-octopus-apart__side--left,
    .stack-octopus-apart__side--right {
        align-items: stretch;
    }

    .stack-octopus-apart__side--right .stack-octopus-metric-card {
        text-align: left;
    }

    .stack-octopus-apart__side--right .stack-octopus-metric-card::before {
        left: 0;
        right: auto;
    }

    .stack-octopus-apart__side--right .stack-octopus-metric-card::after {
        left: 0;
        right: auto;
        background: linear-gradient(90deg, rgba(237,48,43,0.98) 0%, rgba(237,48,43,0.16) 56%, rgba(237,48,43,0) 100%);
    }
}

@media (max-width: 767px) {
    .stack-octopus-apart__wrap {
        padding-top: 8px;
    }

    .stack-octopus-apart__header {
        max-width: 100%;
    }

    .stack-octopus-apart__eyebrow {
        gap: 12px;
        margin-bottom: 14px;
    }

    .stack-octopus-apart__eyebrow span {
        width: 34px;
    }

    .stack-octopus-apart__copy {
        margin-top: 16px;
    }

    .stack-octopus-apart__side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stack-octopus-metric-card {
        padding: 20px 15px;
    }

    .stack-octopus-metric-card__number {
        font-size: clamp(38px, 12vw, 58px);
    }
}
section.stack-octopus-apart.section-padding-block {
    padding-bottom: 0px;
}
/* ================================
   Home case studies preview
   Intro content open on left + 3 case study cards with animated stats
   ================================ */
.home-case-studies-section {
    position: relative;
    overflow: clip;
    isolation: isolate;
    padding: clamp(68px, 5.6vw, 104px) 0;
    background:
        radial-gradient(circle at 12% 46%, rgba(218,50,39,0.11), transparent 30%),
        radial-gradient(circle at 88% 24%, rgba(28,80,157,0.18), transparent 36%),
        linear-gradient(180deg, #030303 0%, #05070b 54%, #020914 100%);
}

.home-case-studies-section::before,
.home-case-studies-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.home-case-studies-section::before {
    left: -14%;
    top: 8%;
    width: 42%;
    height: 68%;
    background: radial-gradient(circle at 50% 50%, rgba(218,50,39,0.10), transparent 64%);
    filter: blur(18px);
}

.home-case-studies-section::after {
    right: -10%;
    bottom: -8%;
    width: 34%;
    height: 56%;
    background: radial-gradient(circle at 50% 50%, rgba(28,80,157,0.16), transparent 62%);
    filter: blur(22px);
}

.home-case-studies-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(28,80,157,0.055) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: radial-gradient(circle at 50% 48%, #000 0%, rgba(0,0,0,0.92) 58%, transparent 82%);
}

.home-case-studies-inner {
    position: relative;
    z-index: 2;
}

.home-case-heading {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0 0 20px;
    text-align: left;
}

.home-case-heading-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: max-content;
    padding: 13px 20px;
    border: 1px solid rgb(255 0 0 / 29%);
    border-radius: 999px;
    color: rgba(255,255,255,0.94);
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: none;
}

.home-case-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 0.96fr) minmax(340px, 1.06fr);
    grid-template-areas:
        "intro feature side-top"
        "intro feature side-bottom";
    gap: clamp(20px, 1.6vw, 30px);
    align-items: stretch;
}

.home-case-intro {
    grid-area: intro;
    min-height: clamp(500px, 37vw, 590px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(20px, 1.3vw, 28px) clamp(14px, 1.2vw, 22px) clamp(20px, 1.3vw, 28px) 0;
}

.home-case-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --glow-x: 50%;
    --glow-y: 50%;
    position: relative;
    min-height: 240px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: clamp(20px, 1.4vw, 28px);
    overflow: hidden;
    background: rgba(5,7,11,0.84);
    transform: perspective(1200px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    transition: transform 0.36s cubic-bezier(.19,1,.22,1), border-color 0.36s ease, box-shadow 0.36s ease;
    box-shadow: 0 28px 80px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(28,80,157,0.08);
    will-change: transform;
}

.home-case-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(218,50,39,0.16), transparent 34%), radial-gradient(circle at calc(var(--glow-x) + 12%) calc(var(--glow-y) + 10%), rgba(28,80,157,0.16), transparent 42%);
    transition: opacity 0.35s ease;
}

.home-case-card:hover {
    border-color: rgba(218,50,39,0.72);
    box-shadow: 0 38px 105px rgba(218,50,39,0.10), 0 34px 88px rgba(0,0,0,0.56), inset 0 0 0 1px rgba(28,80,157,0.14);
}

.home-case-card:hover::before {
    opacity: 1;
}

.home-case-card--feature {
    grid-area: feature;
    min-height: clamp(500px, 37vw, 590px);
}

.home-case-card--small:nth-of-type(2) {
    grid-area: side-top;
}

.home-case-card--small:nth-of-type(3) {
    grid-area: side-bottom;
}

.home-case-card--small {
    min-height: clamp(240px, 16.4vw, 286px);
}

.home-case-link {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: inherit;
    color: inherit;
    text-decoration: none;
}

.home-case-media,
.home-case-overlay {
    position: absolute;
    inset: 0;
}

.home-case-media {
    z-index: 0;
    overflow: hidden;
}

.home-case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    filter: none;
    transform: scale(1.02);
    transition: transform 0.9s cubic-bezier(.19,1,.22,1);
}

.home-case-card:hover .home-case-media img {
    opacity: 1;
    filter: none;
    transform: scale(1.06);
}

.home-case-overlay,
.home-case-card--small .home-case-overlay {
    z-index: 1;
    background: transparent !important;
}

.home-case-content {
    position: relative;
    z-index: 3;    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(28px, 2.2vw, 40px);
}

.home-case-card--feature .home-case-link {
    display: flex;
    align-items: flex-end;
}

.home-case-content--feature {
    width: 100%;
    padding: clamp(30px, 2.3vw, 42px);
}

.home-case-card--small .home-case-content {
    padding: clamp(24px, 1.9vw, 34px);
}

/* Keep case study thumbnails clear; text remains readable with shadow only. */
.home-case-content {
    text-shadow: 0 2px 18px rgba(0,0,0,0.76);
}

.home-case-card--feature .home-case-copy {
    display: none;
}

.home-case-meta {
    display: inline-flex;
    align-items: center;
    gap: clamp(12px, 1vw, 18px);
    color: rgba(255,255,255,0.82);
    font-family: var(--font-primary);
    font-weight: 800;
    letter-spacing: 0px;
    text-transform: none;
}

.home-case-icon {
    width: clamp(36px, 2.2vw, 44px);
    height: clamp(36px, 2.2vw, 44px);
    border: 1px solid rgba(218,50,39,0.58);
    border-radius: 11px;
    display: inline-grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(218,50,39,0.12), rgba(28,80,157,0.16));
    box-shadow: 0 12px 28px rgba(28,80,157,0.13);
}

.home-case-icon svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-case-title {
    margin-top: 0;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(40px, 4vw, 64px) !important;
    line-height: 0.95;
    letter-spacing: 0px;
    text-shadow: 0 18px 52px rgba(255,255,255,0.06);
}

.home-case-title strong {
    color: var(--stack-red);
    font-weight: 900;
}

.home-case-name {
    max-width: 460px;
    margin-top: clamp(18px, 1.5vw, 26px);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 1.04;
    letter-spacing: 0px;
    text-wrap: balance;
}

.home-case-card--feature .home-case-name {
    font-size: clamp(30px, 2.45vw, 44px) !important;
}

.home-case-card--small .home-case-name {
    max-width: 460px;
    margin-top: clamp(14px, 1.05vw, 20px);
    font-size: clamp(22px, 1.55vw, 30px) !important;
    line-height: 1.08;
}

.home-case-copy {
    max-width: 420px;
    margin-top: clamp(14px, 1vw, 18px);
    color: #fff;
    line-height: 1.58;
}

.home-case-card--feature .home-case-copy::before,
.home-case-card--small .home-case-stats::before,
.home-case-cta--primary::before {
    display: block;
    width: 58px;
    height: 1px;
    margin-bottom: 12px;    
    box-shadow: 0 0 18px rgba(237,48,43,0.5);
}

.home-case-points {
    display: grid;
    gap: 12px;
    margin-top: clamp(22px, 1.5vw, 28px);
}

.home-case-points span {
    position: relative;
    padding-left: 18px;
    color: #fff;
}

.home-case-points span::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--stack-red), var(--stack-blue));
    box-shadow: 0 0 14px rgba(218,50,39,0.45);
    transform: translateY(-50%);
}

.home-case-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 1.2vw, 18px);
    margin-top: auto;
    padding-top: clamp(20px, 1.7vw, 28px);
}

.home-case-stats span {
    min-width: clamp(92px, 6vw, 118px);
    padding-right: clamp(12px, 1.2vw, 18px);
    border-right: 1px solid rgba(255,255,255,0.2);
}

.home-case-stats span:last-child {
    border-right: 0;
    padding-right: 0;
}

.home-case-stats strong {
    display: block;
    color: var(--stack-red);
    font-size: clamp(22px, 1.55vw, 32px);
    line-height: 1;
    letter-spacing: 0px;
}

.home-case-stats small {
    display: block;
    margin-top: 8px;
    color: #fff;
    font-size: clamp(10px, 0.64vw, 12px);
    font-weight: 300;
    line-height: 1.1;
    text-transform: uppercase;
}

.home-case-stats--compact {
    gap: clamp(10px, 0.92vw, 16px);
    margin-top: clamp(18px, 1.25vw, 22px);
    padding-top: clamp(14px, 1vw, 18px);
}

.home-case-stats--compact span {
    min-width: 0;
    flex: 1 1 0;
    padding-right: clamp(10px, 0.8vw, 14px);
}

.home-case-stats--compact strong {
    font-size: clamp(18px, 1.2vw, 24px);
}

.home-case-stats--compact small {
    margin-top: 6px;
    font-size: clamp(9px, 0.58vw, 11px);
}

.home-case-cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-top: clamp(16px, 1.4vw, 24px);
    color: #fff;
    font-family: var(--font-primary);
    font-weight: 800;
    text-decoration: none;
    transition: color 0.28s ease, transform 0.28s ease;
}

.home-case-cta--primary {
    margin-top: clamp(26px, 2vw, 34px);
    color: var(--stack-red);
}

.home-case-card--small .home-case-cta,
.home-case-card--feature .home-case-cta {
    margin-top: auto;
    padding-top: clamp(14px, 1.2vw, 18px);
}

.home-case-cta i {
    position: relative;
    width: 18px;
    height: 18px;
    display: inline-block;
    transition: transform 0.28s ease;
}

.home-case-cta i::before {
    content: "";
    position: absolute;
    inset: 4px 5px 4px 2px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.home-case-cta i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}

.home-case-card:hover .home-case-cta,
.home-case-cta--primary:hover {
    color: var(--stack-red);
    transform: translateX(4px);
}

.home-case-card:hover .home-case-cta i,
.home-case-cta--primary:hover i {
    transform: translateX(4px);
}

.home-case-card:hover .home-case-cta i::after,
.home-case-cta--primary:hover i::after {
    transform: translateY(-50%) scaleX(1);
}

@media (max-width: 1280px) {
    .home-case-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "intro feature"
            "side-top side-bottom";
    }

    .home-case-intro {
        min-height: 465px;
        padding-right: 12px;
    }

    .home-case-card--small {
        min-height: clamp(265px, 22vw, 320px);
    }
}

@media (max-width: 900px) {
    .home-case-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "intro"
            "feature"
            "side-top"
            "side-bottom";
    }

    .home-case-intro,
    .home-case-card--feature,
    .home-case-card--small {
        min-height: auto;
    }

    .home-case-intro {
        min-height: 395px;
        padding: 0;
    }

    .home-case-card--feature,
    .home-case-card--small {
        min-height: 380px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .home-case-card--small .home-case-link {
        display: flex;
        align-items: flex-end;
    }

    .home-case-card--small .home-case-content {
        width: 100%;
    }

    .how-work-panel {
        text-align: center;
        align-items: center;
    }

    .how-work-panel h3,
    .how-work-panel p {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .how-work-points {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, max-content)) !important;
        justify-content: center;
        align-items: center;
        column-gap: 26px;
    }
}

@media (max-width: 767px) {
    .home-case-studies-section {
        padding: 50px 0 84px;
    }

    .home-case-heading {
        margin-bottom: 18px;
    }

    .home-case-heading-eyebrow {
        padding: 11px 17px;
        letter-spacing: 0;
    }

    .home-case-grid {
        gap: 18px;
    }

    .home-case-intro {
        min-height: auto;
        padding: 0;
    }

    .home-case-card {
        border-radius: 18px;
        transform: none !important;
    }

    .home-case-card--feature,
    .home-case-card--small {
        min-height: 420px;
    }

    .home-case-overlay,
    .home-case-card--small .home-case-overlay {
        background: transparent !important;
    }

    .home-case-content,
    .home-case-content--feature,
    .home-case-card--small .home-case-content {
        padding: 26px;
    }

    .home-case-title {
        font-size: clamp(34px, 10vw, 52px) !important;
    }

    .home-case-card--feature .home-case-name,
    .home-case-card--small .home-case-name {
        max-width: 100%;
        font-size: clamp(28px, 7.2vw, 38px) !important;
    }

    .home-case-copy {
        max-width: 100%;
        font-size: 15px !important;
    }

    .home-case-stats {
        gap: 14px;
        padding-top: 24px;
    }

    .home-case-stats span {
        min-width: calc(50% - 10px);
        flex: 1 1 calc(50% - 10px);
        border-right: 0;
        padding-right: 0;
    }

    .home-case-stats strong {
        font-size: 28px;
    }

    .home-case-stats--compact strong {
        font-size: 22px;
    }

    .home-case-meta,
    .home-case-cta,
    .home-case-points span {
        font-size: 14px !important;
    }
}

@media (max-width: 420px) {
    .home-case-card--feature,
    .home-case-card--small {
        min-height: 400px;
    }

    .home-case-content,
    .home-case-content--feature,
    .home-case-card--small .home-case-content {
        padding: 22px;
    }

    .home-case-meta {
        gap: 10px;
    }

    .home-case-icon {
        width: 36px;
        height: 36px;
    }
}
a.stack-footer-email.h2-size {
    font-size: 56px !important;
}


/* ================================
   Stack91 Our Work + Testimonials
   Text sizes use existing HTML utility classes.
   Our Work uses drag/scroll, no buttons.
   ================================ */
.stack-work-section {
    position: relative;
    background: #000;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.stack-work-section::before {
    content: "";
    position: absolute;
    inset: auto -12% -28% auto;
    width: 42vw;
    height: 42vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(237,48,43,0.16), transparent 64%);
    pointer-events: none;
}

.stack-work-card {
    position: relative;
    overflow: hidden;
    border-radius: clamp(28px, 2.2vw, 44px);
    background: linear-gradient(180deg, #092a58 0%, #06182f 100%);
    padding: clamp(54px, 5vw, 92px) clamp(46px, 5.2vw, 96px) clamp(60px, 5.6vw, 104px);
    box-shadow: 0 42px 100px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.08);
}

.stack-work-head {
    display: grid;
    grid-template-columns: minmax(280px, 0.56fr) 1px minmax(420px, 1fr);
    align-items: center;
    gap: clamp(34px, 3.2vw, 64px);
    margin-bottom: clamp(44px, 4vw, 76px);
}

.stack-work-head h2,
.stack-work-head h3,
.stack-work-head p {
    margin: 0;
}

.stack-work-head h2,
.stack-work-head h3 {
    color: #fff;
    letter-spacing: 0px;
    text-align: left;
}

.stack-work-head > span {
    display: block;
    width: 1px;
    height: clamp(72px, 6vw, 112px);
    background: rgba(78,137,255,0.85);
}

.stack-work-head p {
    max-width: 760px;
    margin-top: clamp(10px, 0.9vw, 16px);
    color: rgba(255,255,255,0.9);
    line-height: 1.35;    
}

.stack-work-slider {
    position: relative;
}

.stack-work-viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    scroll-snap-type: none;
    scroll-behavior: auto;
    touch-action: pan-y;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    user-select: none;
}

.stack-work-viewport::-webkit-scrollbar {
    display: none;
}

.stack-work-viewport.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.stack-work-viewport.is-dragging .stack-work-item {
    pointer-events: none;
}

.stack-work-track {
    display: flex;
    gap: clamp(28px, 2.6vw, 52px);
    width: max-content;
    will-change: transform;
}

.stack-work-item {
    flex: 0 0 min(560px, 39vw);
    min-height: clamp(300px, 25vw, 480px);
    border-radius: clamp(22px, 1.6vw, 34px);
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    box-shadow: 0 28px 60px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.08);
}

.stack-work-item img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transform: scale(1.02);
    transition: transform 0.5s ease;
}

.stack-work-item:hover img {
    transform: scale(1.07);
}

.stack-testimonial-slider {
    position: relative;
    overflow: hidden;
    margin-top: clamp(46px, 4.8vw, 92px);
}

.stack-testimonial-track {
    display: flex;
    transition: transform 0.7s cubic-bezier(.76,0,.24,1);
    will-change: transform;
}

.stack-testimonial-card {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 14vw, 280px);
    gap: clamp(32px, 4vw, 80px);
    align-items: center;
    min-height: clamp(190px, 16vw, 290px);
}

.stack-testimonial-copy p,
.stack-testimonial-copy span {
    margin: 0;
}

.stack-testimonial-copy p {
    max-width: 980px;
    color: #fff;
    line-height: 1.34;
    letter-spacing: -0.02em;
}

.stack-testimonial-copy span {
    display: block;
    margin-top: clamp(18px, 1.4vw, 28px);
    color: rgba(255,255,255,0.72);
}

.stack-testimonial-card img {
    width: 100%;
    max-height: clamp(96px, 8.4vw, 160px);
    object-fit: contain;
    justify-self: end;
    padding: clamp(14px, 1.4vw, 26px);
    border-radius: clamp(18px, 1.4vw, 28px);
    background: rgba(255,255,255,0.94);
    box-shadow: 0 24px 54px rgba(0,0,0,0.26);
}

@media (max-width: 1180px) {
    .stack-work-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .stack-work-head > span {
        width: 100%;
        height: 1px;
    }

    .stack-work-item {
        flex-basis: min(520px, 85vw);
    }
}

@media (max-width: 767px) {
    .stack-work-card {
        padding: 34px 20px 44px;
        border-radius: 24px;
    }

    .stack-work-item {

        min-height: 300px;
    }

    .stack-testimonial-card {
        grid-template-columns: 1fr;
    }

    .stack-testimonial-card img {
        justify-self: center;
        max-width: 220px;
    }
}


/* Journal images clickable to Portfolio page. */
.stack-work-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.stack-work-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Journal portfolio redirect click fix */
.stack-work-item .stack-work-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    cursor: pointer;
}

.stack-work-item .stack-work-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stack-work-item .stack-work-hover-content {
    z-index: 4;
    pointer-events: none;
}
nav.stack-footer-legal {
    padding: 0 3%;
}

@media (min-width: 1024px) and (max-width: 1440px) {
    a.stack-footer-email.h2-size {
    font-size: 48px !important;
    padding-top: 30px;
}
}
/* Stack91 brand arrow icon - replaces default text arrows across links and CTAs. */
.stack91-brand-arrow {
    width: 1.35em;
    height: 1.35em;
    min-width: 1.35em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
    line-height: 0;
    vertical-align: middle;
    transform-origin: center;
    transition: transform 0.28s ease, color 0.28s ease;
}

.stack91-brand-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.stack91-brand-arrow__line,
.stack91-brand-arrow__head {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.15;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.stack91-brand-arrow--up-right {
    transform: rotate(-45deg);
}

.stack91-brand-arrow--left {
    transform: rotate(180deg);
}

.home-blog-card b .stack91-brand-arrow,
.home-blog-view-all .stack91-brand-arrow,
.stack-blog-read .stack91-brand-arrow,
.case-project-cta .stack91-brand-arrow,
.more-case-link .stack91-brand-arrow,
.stack-blog-feature-btn .stack91-brand-arrow {
    color: #da3227;
}

.home-blog-card:hover b .stack91-brand-arrow--right,
.home-blog-card:focus-visible b .stack91-brand-arrow--right,
.home-blog-view-all:hover .stack91-brand-arrow--right,
.home-blog-view-all:focus-visible .stack91-brand-arrow--right,
.case-project-card:hover .case-project-cta .stack91-brand-arrow--right,
.case-project-card:focus-visible .case-project-cta .stack91-brand-arrow--right,
.footer-cta-btn:hover .stack91-brand-arrow--right,
.footer-cta-btn:focus-visible .stack91-brand-arrow--right,
.contact-submit:hover .stack91-brand-arrow--right,
.contact-submit:focus-visible .stack91-brand-arrow--right,
.contact-audit-btn:hover .stack91-brand-arrow--right,
.contact-audit-btn:focus-visible .stack91-brand-arrow--right {
    transform: translateX(5px);
}

.stack-blog-card a:hover .stack-blog-read .stack91-brand-arrow--up-right,
.stack-blog-card a:focus-visible .stack-blog-read .stack91-brand-arrow--up-right,
.blog-related-card-link:hover .stack91-brand-arrow--up-right,
.blog-related-card-link:focus-visible .stack91-brand-arrow--up-right,
.more-case-link:hover .stack91-brand-arrow--up-right,
.more-case-link:focus-visible .stack91-brand-arrow--up-right,
.stack-blog-feature-btn:hover .stack91-brand-arrow--up-right,
.stack-blog-feature-btn:focus-visible .stack91-brand-arrow--up-right {
    transform: rotate(-45deg) translateX(5px);
}

.stack-video-testimonials__arrow .stack91-brand-arrow,
.partnered-arrow .stack91-brand-arrow {
    color: currentColor;
    width: 1.1em;
    height: 1.1em;
}

.stack-video-testimonials__arrow .stack91-brand-arrow--left,
.partnered-arrow .stack91-brand-arrow--left {
    transform: rotate(180deg);
}

/* Mobile-only fix: home testimonials + blog centered stack */
@media screen and (max-width: 767px) {
    .home-split-showcase {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 46px;
        padding: 18px 0 30px;
        text-align: center;
    }

    .home-testimonial-panel.stack-video-testimonials,
    .home-blog-panel {
        width: 100%;
        max-width: 430px;
        margin-left: auto;
        margin-right: auto;
        align-items: center;
        text-align: center;
    }

    .home-testimonial-panel {
        order: 1;
    }

    .home-blog-panel {
        order: 2;
    }

    .home-testimonial-panel .stack-video-testimonials__head,
    .home-blog-panel,
    .home-blog-card,
    .home-blog-card__content {
        text-align: center;
    }

    .home-split-eyebrow,
    .home-testimonial-panel .stack-video-testimonials__eyebrow,
    .home-blog-card__meta,
    .home-blog-card b,
    .home-blog-view-all {
        justify-content: center;
    }

    .home-testimonial-copy,
    .home-split-copy {
        max-width: 340px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-testimonial-panel .stack-video-testimonials__stage {
        width: 100%;
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

    .home-testimonial-panel .stack-video-testimonials__cards {
        width: 100%;
        height: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .home-testimonial-panel .stack-video-testimonial-card.is-active,
    .home-testimonial-panel .stack-video-testimonial-card,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-left-2,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-1,
    .home-testimonial-panel .stack-video-testimonial-card.is-right-2 {
        width: min(100%, 330px);
        height: 300px;
    }

    .home-blog-list {
        width: 100%;
        max-width: 390px;
        margin-left: auto;
        margin-right: auto;
        justify-items: center;
    }

    .home-blog-card {
        width: 100%;
        max-width: 390px;
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .home-blog-card__media {
        width: 100%;
        min-height: 190px;
    }

    .home-blog-card__content {
        width: 100%;
        padding-right: 0;
    }

    .home-blog-view-all {
        width: min(100%, 175px);
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 767px) {
  a.stack-footer-email.h2-size {
    font-size: 36px !important;
  }
  .stack-octopus-metric-card::before {
    left: 0px;
}
.home-blog-panel .home-split-title {
    font-size: 36px;
}
.home-testimonial-panel .stack-video-testimonials__head h2, .home-split-title {
    font-size: 36px;
}
}
/* =========================================================
   Requested home page refinements - 2026-07-10
   Only the five requested visual changes are included below.
   ========================================================= */

/* 1. Keep the header Let's Talk button the same size as the Menu button. */
.hero-header .btn-talk {
    height: var(--menu-height);
    min-width: 0;
    padding: var(--menu-padding);
    font-size: inherit;
}

/* 4. Remove metric lines and turn the numbers red on hover. */
.stack-octopus-metric-card::before,
.stack-octopus-metric-card::after {
    display: none !important;
}

.stack-octopus-metric-card__number {
    transition: color 0.28s ease, text-shadow 0.28s ease, transform 0.28s ease;
}

.stack-octopus-metric-card:hover .stack-octopus-metric-card__number {
    color: var(--stack-red);
    text-shadow: 0 0 24px rgba(218,50,39,0.42);
    transform: translateY(-2px);
}

/* 5. Make From Our Clients and Latest Blogs equal in overall panel size. */
.home-split-showcase {
    align-items: stretch;
}

.home-testimonial-panel.stack-video-testimonials,
.home-blog-panel {
    min-height: 100%;
    height: 100%;
}

.home-testimonial-panel.stack-video-testimonials {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.home-blog-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

@media (max-width: 767px) {
    .hero-header .btn-talk {
        height: var(--menu-height);
        padding: var(--menu-padding);
    }

    .home-testimonial-panel.stack-video-testimonials,
    .home-blog-panel {
        min-height: 0;
        height: auto;
    }
}

/* WHY CHOOSE US compact pill border - requested update */
.stack-octopus-apart__eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: max-content;
    padding: 13px 20px;
    border: 1px solid rgb(255 0 0 / 29%);
    border-radius: 999px;
    gap: 0;
    color: rgba(255,255,255,0.94);
    font-family: var(--font-primary);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.stack-octopus-apart__eyebrow span {
    display: none;
}


/* Home transition artwork above the Trusted by Growing Brands section. */
.home-section-merge {
    position: relative;
    z-index: 4;
    width: 100%;
    height: clamp(100px, 10vw, 151px);
    margin-top: -1px;
    margin-bottom: -1px;
    overflow: hidden;
    background: transparent;
    pointer-events: none;
}

.home-section-merge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
span.title-line.h1-size.scroll-reveal {
    margin-top: 26px !important;
}
.hero-content {
    padding-top: 25px;
}
/* Home testimonials + blogs reference layout — requested update only */
.home-split-showcase {
    grid-template-columns: minmax(390px, .95fr) minmax(520px, 1.15fr);
    gap: clamp(54px, 5vw, 86px);
    align-items: center;
}
.home-split-showcase__divider { display: none !important; }
.home-testimonial-panel.stack-video-testimonials {
    min-height: 0;
    height: auto;
    max-width: 520px;
    padding: clamp(28px, 2.4vw, 42px);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 38px;
    background: #030303;
    justify-content: flex-start;
}
.home-testimonial-panel .stack-video-testimonials__head {
    display: flex;
    align-items: center;
    gap: clamp(0px, 10vw, 23%);
    max-width: none;
    margin: 0 0 30px 40px;
    text-align: left;
}
.home-testimonial-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 145px;
    min-height: 48px;
    padding: 10px 24px;
    border: 1px solid rgba(28,80,157,.75);
    border-radius: 999px;
    color: #fff;
    font-size: 16px;
    line-height: 1;
}
.home-testimonial-panel .stack-video-testimonials__head h2 {
    margin: 0;
    font-size: clamp(34px, 3vw, 50px);
    line-height: 1;
    white-space: nowrap;
}
.home-testimonial-panel .stack-video-testimonials__head h2 strong { color: var(--stack-red); }
.home-testimonial-panel .stack-video-testimonials__stage {
    width: 100%;
    max-width: none;
    margin: 0;
}
.home-testimonial-panel .stack-video-testimonials__cards {
    height: clamp(350px, 31vw, 410px);
}
.home-testimonial-panel .stack-video-testimonial-card,
.home-testimonial-panel .stack-video-testimonial-card.is-left-1,
.home-testimonial-panel .stack-video-testimonial-card.is-left-2,
.home-testimonial-panel .stack-video-testimonial-card.is-right-1,
.home-testimonial-panel .stack-video-testimonial-card.is-right-2,
.home-testimonial-panel .stack-video-testimonial-card.is-active {
    width: 100%;
    height: 100%;
    border-radius: 24px;
}
.home-testimonial-panel .stack-video-testimonial-card.is-active {    
    box-shadow: none;
}
.home-testimonial-panel .stack-video-testimonial-card__shade,
.home-testimonial-panel .stack-video-testimonial-card__info,
.home-testimonial-panel .stack-video-testimonial-card__vertical,
.home-testimonial-panel .stack-video-testimonials__arrow,
.home-testimonial-stats { display: none !important; }
.home-testimonial-panel .stack-video-testimonials__nav {
    margin-top: 18px;
    justify-content: center;
}
.home-testimonial-panel .stack-video-testimonials__dots {
    padding: 9px 12px;
    border-radius: 999px;
    background: #000;
}
.home-blog-panel {
    min-height: 0;
    height: auto;
    max-width: 650px;
    padding: 0;
    text-align: left;
    justify-content: flex-start;
}
.home-blog-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 30px;
}
.home-blog-panel .home-split-title {
    margin: 0;
    font-size: clamp(40px, 4vw, 58px);
    line-height: 1;
}
.home-blog-panel .home-blog-view-all {
    min-width: 150px;
    margin: 0;
    padding: 14px 24px;
    border: 0;
    background: #ed2f27;
    font-size: 14px;
    text-transform: none;
}
.home-blog-list {
    gap: 28px;
    margin-top: 0;
}
.home-blog-card {
    grid-template-columns: 43% 57%;
    gap: 0;
    min-height: 190px;
    padding: 10px;
    border-radius: 18px;
    background: linear-gradient(110deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}
.home-blog-card__media {
    min-height: 170px;
    border-radius: 13px;
}
.home-blog-card__content { padding: 12px 18px; }
.home-blog-card h3 { font-size: clamp(20px, 1.55vw, 27px); }
.home-blog-card p { font-size: 13px; }
.home-blog-card b { font-size: 11px; }

@media (max-width: 1100px) {
    .home-split-showcase { grid-template-columns: 1fr; }
    .home-testimonial-panel.stack-video-testimonials,
    .home-blog-panel { max-width: 720px; margin-inline: auto; }
}
@media (max-width: 767px) {
    .home-testimonial-panel.stack-video-testimonials { padding: 22px 16px; border-radius: 26px; }
    .home-testimonial-panel .stack-video-testimonials__head { gap: 12px; margin-bottom: 22px; }
    .home-testimonial-label { min-width: auto; min-height: 40px; padding: 8px 16px; font-size: 13px; }
    .home-testimonial-panel .stack-video-testimonials__head h2 { font-size: 30px; white-space: normal; }
    .home-testimonial-panel .stack-video-testimonials__cards { height: 300px; }
    .home-blog-panel__head { align-items: center; }
    .home-blog-panel .home-split-title { font-size: 36px; }
    .home-blog-panel .home-blog-view-all { min-width: auto; padding: 16px 0px; font-size: 16px; }
    .home-blog-card { grid-template-columns: 1fr; }
    .home-blog-card__media { min-height: 190px; }
}

/* Requested size adjustment: home testimonial and latest blog cards only */
@media (min-width: 1700px) {
    .home-split-showcase {
        grid-template-columns: 734px 819px;
        gap: 64px;
        justify-content: center;
        align-items: start;
    }

    .home-testimonial-panel.stack-video-testimonials {
        width: 734px;
        max-width: 734px;
        height: 866px;
        padding: 42px;
    }

    .home-testimonial-panel .stack-video-testimonials__cards {
        height: 682px;
    }

    .home-blog-panel {
        width: 819px;
        max-width: 819px;
    }

    .home-blog-list {
        gap: 28px;
    }

    .home-blog-card {
        width: 819px;
        max-width: 819px;
        height: 355px;
        min-height: 355px;
        grid-template-columns: 44% 56%;
        padding: 14px;
    }

    .home-blog-card__media {
        min-height: 327px;
        height: 327px;
    }

    .home-blog-card__content {
        padding: 26px 30px;
        justify-content: center;
    }

    .home-blog-card__meta {
        font-size: 13px;
        margin-bottom: 12px;
    }

    .home-blog-card h3 {
        font-size: 34px;
        line-height: 1.08;
        margin-bottom: 14px;
    }

    .home-blog-card p {
        font-size: 16px;
        line-height: 1.45;
        margin-bottom: 18px;
    }

    .home-blog-card b {
        font-size: 13px;
    }
}

/* Requested adjustment: reduce only the overall height of the home testimonial + blog section */
.stack-work-section.section-padding-block {
    padding-top: clamp(32px, 3vw, 52px);
    padding-bottom: clamp(32px, 3vw, 52px);
}

.stack-work-section .home-split-showcase {
    min-height: 0;
    padding-top: clamp(14px, 1.5vw, 24px);
    padding-bottom: clamp(14px, 1.5vw, 24px);
}

/* Requested adjustment: keep the home testimonial + blogs showcase at 700px on large desktop */
@media (min-width: 1700px) {
    .stack-work-section .home-split-showcase {
        height: 700px;
        min-height: 700px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .home-testimonial-panel.stack-video-testimonials {
        height: 700px;
    }

    .home-testimonial-panel .stack-video-testimonials__cards {
        height: 516px;
    }

    .home-blog-list {
        gap: 20px;
    }

    .home-blog-card {
        height: 290px;
        min-height: 290px;
    }

    .home-blog-card__media {
        height: 262px;
        min-height: 262px;
    }
}

/* Requested refinement: compact testimonial video with visible controls, and equal blog image spacing */
.home-testimonial-panel .stack-video-testimonials__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-testimonial-panel .stack-video-testimonials__cards {
    width: calc(100% - 48px);
    max-width: 620px;
}

.home-testimonial-panel .stack-video-testimonial-card,
.home-testimonial-panel .stack-video-testimonial-card.is-left-1,
.home-testimonial-panel .stack-video-testimonial-card.is-left-2,
.home-testimonial-panel .stack-video-testimonial-card.is-right-1,
.home-testimonial-panel .stack-video-testimonial-card.is-right-2,
.home-testimonial-panel .stack-video-testimonial-card.is-active {
    width: 100%;
}

.home-testimonial-panel .stack-video-testimonials__nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
}

.home-testimonial-panel .stack-video-testimonials__arrow {
    display: inline-flex !important;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}

.home-testimonial-panel .stack-video-testimonials__dots {
    margin: 0;
}

.home-blog-card,
.home-blog-card:nth-child(2) {
    align-items: stretch;
    padding-top: 14px;
    padding-bottom: 14px;
}

.home-blog-card__media,
.home-blog-card:nth-child(2) .home-blog-card__media {
    margin-top: 0;
    margin-bottom: 0;
    align-self: stretch;
}

.home-blog-card__media img,
.home-blog-card:nth-child(2) .home-blog-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

@media (min-width: 1700px) {
    .home-testimonial-panel .stack-video-testimonials__cards {
        width: calc(100% - 72px);
        height: 455px;
    }

    .home-testimonial-panel .stack-video-testimonials__nav {
        margin-top: 12px;
    }
}

@media (max-width: 767px) {
    .home-testimonial-panel .stack-video-testimonials__cards {
        width: 100%;
    }

    .home-testimonial-panel .stack-video-testimonials__arrow {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
    }
}
.stack-video-testimonials__nav {
    margin-top: 40px !important;
}
/* Mobile-only portfolio slider arrow controls */
.stack-work-mobile-nav {
    display: none;
}

@media only screen and (min-width: 320px) and (max-width: 767px) {
    .stack-work-mobile-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 18px;
    }

    .stack-work-mobile-arrow {
        width: 44px;
        height: 44px;
        min-width: 44px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 50%;
        background: transparent;
        color: #fff;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .stack-work-mobile-arrow:active {
        transform: scale(0.94);
    }
}