@media (max-width: 1000px) {
    html {
        font-size: 55%;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .heroCarousel,
    .carouselGlowRing::before,
    .videoCarouselRingBackgroundImg,
    .socialCard {
        animation: none !important;
    }
}

@media (max-width: 1050px) {

    .navbar {
        width: calc(100% - 4rem);
    }

    .navbarInner {
        position: relative;

        grid-template-columns: 1fr auto;

        min-height: 7rem;

        padding: 1rem 1.2rem 1rem 2rem;
    }

    .navLinks,
    .navCta {
        display: none;
    }

    .navBurger {
        display: flex;
    }

}

/* /HERO SECTION/ */

@media (max-width: 1250px) {

    .hero {
        padding-left: 1.2rem;
    }

    .heroText {
        position: relative;
        z-index: 5;

        /* Needed so the pseudo-element can extend beyond the text */
        isolation: isolate;
    }

    .heroText::before {
        content: "";

        position: absolute;

        /* Extend the protection beyond the actual text */
        top: -2.5rem;
        right: -2rem;
        bottom: -2.5rem;
        left: -2rem;

        z-index: -1;

        /*
            Strongest underneath the text on the left,
            then disappears toward the carousel.
        */
        background: linear-gradient(
            90deg,
            rgba(247, 243, 237, 0.98) 0%,
            rgba(247, 243, 237, 0.94) 35%,
            rgba(247, 243, 237, 0.78) 60%,
            rgba(247, 243, 237, 0.35) 82%,
            transparent 100%
        );

        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);

        /*
            Fades the top/bottom edges as well,
            preventing it looking like a rectangle.
        */
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 18%,
            black 82%,
            transparent 100%
        );

        pointer-events: none;
    }

    .heroBtnSecondary {
        background: #fff;
    }


}

@media (max-width: 650px) {

    .heroBtn {
        min-width: 25rem;
    }

    .heroBtnBox {
        flex-direction: column;
    }

    .heroStats {
        display: none;
    }

    .hero {
        padding: 2.4rem 2.4rem 2.4rem 0;
    }

    .heroGrowText {
        font-size: 15rem;
        left: -55%;
    }

    .heroContainer {
        padding: 0 2.4rem 0 4.8rem;
    }


}

@media (max-width: 1000px) {

    /* =====================================================
       1. GIVE THE ENTIRE CAROUSEL ITS OWN COMPOSITING LAYER
    ===================================================== */

    .heroCarousel {
        will-change: transform;

        /*
            Tiny Z translation forces GPU compositing
            without visibly changing the geometry.
        */
        transform: translateZ(0);

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        /*
            18–20s can actually look smoother than very slow
            rotation because fewer tiny sub-pixel movements
            are perceptible.
        */
        animation-duration: 20s;
    }


    /* =====================================================
       2. PROMOTE EACH CARD TO ITS OWN GPU LAYER
    ===================================================== */

    .carouselCard {
        will-change: transform;

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        /*
            Prevent neighbouring layout/paint work from
            affecting each card.
        */
        contain: paint;

        /*
            Keep mobile shadows inexpensive.
        */
        box-shadow:
            0 0.8rem 1.8rem rgba(0, 0, 0, 0.11);

        -webkit-box-reflect: unset;
    }


    /* =====================================================
       3. STABILISE IMAGE TEXTURES
    ===================================================== */

    .carouselCard img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;

        /*
            Helps prevent texture flickering / resampling
            while rotateY is changing.
        */
        transform: translateZ(0.01px);

        will-change: transform;
    }


    /* =====================================================
       4. STOP THE GLOW RING COMPETING WITH THE CAROUSEL
       
       The animated conic gradient + mask + shadows can
       consume a surprising amount of mobile GPU time.
    ===================================================== */

    .carouselGlowRing::before {
        animation: none;

        filter:
            drop-shadow(
                0 0 0.35rem
                rgba(137, 29, 40, 0.45)
            );
    }


    .carouselGlowRing::after {
        filter: blur(0.6rem);
    }


    .carouselGlowRing {
        box-shadow:
            0 0 0.4rem rgba(137, 29, 40, 0.4),
            0 0 1rem rgba(137, 29, 40, 0.16);
    }


    /* =====================================================
       5. AVOID VERY LARGE PERSPECTIVE SURFACES
    ===================================================== */

    .heroCarouselContainer {
        /*
            Slightly tighter perspective gives the browser
            a smaller effective 3D scene to rasterise.
        */
        perspective: 100rem;

        /*
            Isolate this visual from the rest of the hero.
        */

    }

}

/* /VIDEO CAROUSEL SECTION/ */

@media (max-width: 1400px) {

    .videoCarouselContainer {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .videoCarouselProcess {
        grid-row: 1/2;
    }

    .videoCarouselIntro {
        justify-self: center;
        align-items: center;
        text-align: center;
        gap: 0.1rem;
    }

    .videoCarouselText {
        max-width: 60rem;
        text-align: center;
        margin-top: 1rem;
    }

    .videoCarouselHeadingAccent {
        text-align: center;
    }

    .videoCarouselEyebrow {
        text-align: center;
    }

    .videoCarouselEyebrowLine {
        margin-bottom: 1rem;
    }

    .videoCarouselProcess {
        gap: 2.4rem;
    }

    .videoCarouselStage {
        margin: 0rem;
    }
}

@media (max-width: 1050px) {

    /* =========================
       STAGE
    ========================= */

    .videoCarouselStage {
        max-width: 92rem;

        height: 34rem;

        margin-top: -2rem;

        perspective: 110rem;
    }


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

    .videoCarouselTrack {
        height: 25rem;

        top: 50%;
    }


    /* =========================
       ALL CARDS
    ========================= */

    .videoCarouselCard {
        width: 31rem;
        height: 20rem;

        border-radius: 1rem;

        box-shadow:
            0 1.8rem 3.5rem rgba(33, 25, 20, 0.14),
            0 0.5rem 1.2rem rgba(33, 25, 20, 0.07);
    }


    /* =========================
       CENTER
    ========================= */

    .videoCarouselPositionCenter {
        transform:
            translate(-50%, -50%)
            translateX(0)
            translateY(0)
            translateZ(8rem)
            rotateY(0deg)
            scale(1.04);
    }


    /* =========================
       INNER LEFT
    ========================= */

    .videoCarouselPositionLeft {
        transform:
            translate(-50%, -50%)
            translateX(-20rem)
            translateY(1.2rem)
            translateZ(-2rem)
            rotateY(31deg)
            scale(0.86);
    }


    /* =========================
       INNER RIGHT
    ========================= */

    .videoCarouselPositionRight {
        transform:
            translate(-50%, -50%)
            translateX(20rem)
            translateY(1.2rem)
            translateZ(-2rem)
            rotateY(-31deg)
            scale(0.86);
    }


    /* =========================
       FAR LEFT
    ========================= */

    .videoCarouselPositionFarLeft {
        transform:
            translate(-50%, -50%)
            translateX(-32rem)
            translateY(2.5rem)
            translateZ(-8rem)
            rotateY(48deg)
            scale(0.66);

        opacity: 0.68;
    }


    /* =========================
       FAR RIGHT
    ========================= */

    .videoCarouselPositionFarRight {
        transform:
            translate(-50%, -50%)
            translateX(32rem)
            translateY(2.5rem)
            translateZ(-8rem)
            rotateY(-48deg)
            scale(0.66);

        opacity: 0.68;
    }


    /* =========================
       BACKGROUND ART
    ========================= */

    .videoCarouselRingBackground {
        width: 105rem;

        top: 51%;
    }

    .videoCarouselRingBackgroundImg {
        width: 112rem;

        margin-left: -2rem;
    }


    /* =========================
       OLD CSS ELLIPSES
       IF YOU'RE STILL USING THEM
    ========================= */

    .videoCarouselStage::before {
        width: 88rem;
        height: 22rem;
    }

    .videoCarouselStage::after {
        width: 70rem;
        height: 17rem;
    }


    /* =========================
       FLOOR SHADOW
    ========================= */

    .videoCarouselTrack::after {
        width: 46rem;
        height: 5rem;

        bottom: -2rem;

        filter: blur(1.2rem);
    }


    /* =========================
       DOTS
    ========================= */

    .videoCarouselDots {
        bottom: 0.5rem;
    }

}

@media (max-width: 850px) {

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

}

@media (max-width: 700px) {

    .videoCarouselStage {
        max-width: 100%;

        height: 29rem;

        margin-top: -1rem;

        perspective: 90rem;

        overflow: hidden;
    }


    .videoCarouselTrack {
        height: 22rem;
        top: 49%;
    }


    .videoCarouselCard {
        width: 25rem;
        height: 16rem;

        border-radius: 0.9rem;

        box-shadow:
            0 1.4rem 2.6rem rgba(33, 25, 20, 0.13),
            0 0.4rem 0.9rem rgba(33, 25, 20, 0.06);
    }


    .videoCarouselPositionCenter {
        transform:
            translate(-50%, -50%)
            translateX(0)
            translateY(0)
            translateZ(6rem)
            rotateY(0deg)
            scale(1.02);
    }


    .videoCarouselPositionLeft {
        transform:
            translate(-50%, -50%)
            translateX(-15rem)
            translateY(0.8rem)
            translateZ(-2rem)
            rotateY(34deg)
            scale(0.80);

        opacity: 0.88;
    }


    .videoCarouselPositionRight {
        transform:
            translate(-50%, -50%)
            translateX(15rem)
            translateY(0.8rem)
            translateZ(-2rem)
            rotateY(-34deg)
            scale(0.80);

        opacity: 0.88;
    }


    .videoCarouselPositionFarLeft {
        transform:
            translate(-50%, -50%)
            translateX(-24rem)
            translateY(1.6rem)
            translateZ(-7rem)
            rotateY(58deg)
            scale(0.52);

        opacity: 0.42;
    }


    .videoCarouselPositionFarRight {
        transform:
            translate(-50%, -50%)
            translateX(24rem)
            translateY(1.6rem)
            translateZ(-7rem)
            rotateY(-58deg)
            scale(0.52);

        opacity: 0.42;
    }


    .videoCarouselRingBackground {
        width: 76rem;
        top: 50%;
    }


    .videoCarouselRingBackgroundImg {
        width: 80rem;

        margin-left: -1rem;

        opacity: 0.68;
    }


    .videoCarouselStage::before {
        width: 64rem;
        height: 16rem;
    }


    .videoCarouselStage::after {
        width: 52rem;
        height: 12rem;
    }


    .videoCarouselTrack::after {
        width: 34rem;
        height: 4rem;

        bottom: -1.4rem;

        filter: blur(0.9rem);
    }


    .videoCarouselDots {
        bottom: 0;
        gap: 0.7rem;
    }


    .videoCarouselDot {
        width: 0.7rem;
        height: 0.7rem;
    }

}

@media (max-width: 440px) {

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

}


/* =========================================================
   SOCIAL SECTION — RESPONSIVE
   Add this AFTER your existing Social Section CSS
========================================================= */


/* =========================================================
   <= 1200px
   SMALL DESKTOP / LANDSCAPE TABLET
========================================================= */

@media (max-width: 1522px) {

    .socialSection {
        min-height: 70rem;
        padding: 5rem 3rem 1rem;
    }

    .socialContainer {
        width: 100%;
        min-height: 60rem;
    }

    .socialTitleTop,
    .socialTitleBottom {
        font-size: clamp(5.8rem, 7.5vw, 8rem);
    }

    .socialVisual {
        grid-template-columns:
            minmax(26rem, 1fr)
            minmax(24rem, 31rem)
            minmax(24rem, 1fr);

        gap: 2rem;

        min-height: 43rem;

        margin-top: -3rem;

        perspective: 85rem;
        perspective-origin: 50% 43%;
    }

    .socialWebsiteCard {
        width: 34rem;
        height: 30rem;

        transform:
            rotateY(30deg)
            rotateZ(-1.8deg);
    }

    .socialVideoCard {
        width: 27rem;
        height: 38rem;

        margin-right: 0 !important;

        transform:
            translateX(2rem)
            translateZ(-2rem)
            rotateX(-4deg)
            rotateY(-50deg)
            rotateZ(-1deg);
    }

    .socialCenter {
        padding-top: 7rem;
    }

    .socialCenterText {
        max-width: 27rem;
        font-size: 1.3rem;
    }
}


/* =========================================================
   <= 900px
   TABLET
========================================================= */

@media (max-width: 1170px) {

    .socialSection {
        min-height: auto;

        padding:
            5rem
            2.5rem
            1rem;

        overflow: hidden;
    }

    .socialContainer {
        width: 100%;
        min-height: auto;
    }

    .socialHeading {
        width: 100%;
        padding: 0 1rem;
    }

    .socialEyebrow {
        margin-bottom: 1.2rem;

        font-size: 1.1rem;
        letter-spacing: 0.16em;
    }

    .socialTitle {
        line-height: 0.9;
    }

    .socialTitleTop,
    .socialTitleBottom {
        font-size: clamp(5rem, 10vw, 7.2rem);
    }

    .socialVisual {
        display: grid;

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

        grid-template-areas:
            "website video"
            "center center";

        align-items: center;

        column-gap: 3rem;
        row-gap: 1rem;

        min-height: auto;

        margin-top: 2rem;

        perspective: 100rem;
        perspective-origin: 50% 42%;
    }

    .socialWebsiteArea {
        grid-area: website;

        width: 100%;

        justify-content: flex-end;
    }

    .socialVideoArea {
        grid-area: video;

        width: 100%;

        justify-content: flex-start;
    }

    .socialCenter {
        grid-area: center;

        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .socialCenterText {
        max-width: 48rem;

        margin: 1.5rem auto;

        font-size: 1.35rem;
        line-height: 1.7;
    }

    .socialWebsiteCard {
        width: min(34rem, 43vw);
        height: 29rem;

        transform:
            rotateY(24deg)
            rotateZ(-1.5deg);
    }

    .socialVideoCard {
        width: min(25rem, 32vw);
        height: 35rem;

        margin-right: 0 !important;

        transform:
            translateX(5rem)
            translateZ(-1rem)
            rotateX(-3deg)
            rotateY(-38deg)
            rotateZ(-1deg);
    }

    .socialConnectorLine {
        height: 3.5rem;
    }

    .socialOrbit {
        width: 52rem;
        height: 52rem;

        opacity: 0.4;
    }

    .socialOrbitLeft {
        left: -30rem;
    }

    .socialOrbitRight {
        right: -30rem;
    }
}


/* =========================================================
   <= 700px
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .socialSection {
        min-height: auto;

        padding:
            5rem
            2rem
            7rem;

        overflow: hidden;
    }

    .socialContainer {
        width: 100%;
        min-height: auto;
    }

    .socialHeading {
        width: 100%;

        padding: 0;

        text-align: center;
    }

    .socialEyebrow {
        margin-bottom: 1.2rem;

        font-size: 1rem;

        letter-spacing: 0.15em;
    }

    .socialTitle {
        width: 100%;

        line-height: 0.92;

        letter-spacing: -0.035em;
    }

    .socialTitleTop,
    .socialTitleBottom {
        font-size: clamp(4.4rem, 13vw, 6.2rem);
    }

    .socialVisual {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 3.5rem;

        min-height: auto;

        margin-top: 4rem;

        perspective: 90rem;
        perspective-origin: 50% 50%;
    }

    .socialWebsiteArea {
        width: 100%;

        display: flex;

        justify-content: center;

        order: 1;
    }

    .socialCenter {
        width: 100%;

        order: 2;

        padding-top: 0;
    }

    .socialVideoArea {
        width: 100%;

        display: flex;

        justify-content: center;

        order: 3;
    }

    .socialWebsiteCard {
        width: min(38rem, 88vw);
        height: auto;

        aspect-ratio: 40 / 35;

        transform:
            rotateY(12deg)
            rotateZ(-1.3deg);

        transform-origin: center center;

        animation: none;
    }

    .socialVideoCard {
        width: min(27rem, 70vw);
        height: auto;

        aspect-ratio: 31 / 43;

        margin-right: 0 !important;

        transform:
            translateX(0)
            translateZ(0)
            rotateX(-2deg)
            rotateY(-18deg)
            rotateZ(-1deg);

        transform-origin: center bottom;

        animation: none;
    }

    .socialCenterText {
        width: 100%;

        max-width: 40rem;

        margin: 1.3rem auto;

        padding: 0 1rem;

        font-size: 1.3rem;
        line-height: 1.7;
    }

    .socialConnectorLine {
        height: 3rem;
    }

    .socialCardBadge {
        min-height: 3.4rem;

        padding: 0.55rem 1.2rem;

        font-size: 0.9rem;
    }

    .socialWebsiteBadge {
        left: 1.1rem;
        bottom: 1rem;
    }

    .socialFacebookBadge {
        right: 1.1rem;
        top: 1.1rem;
    }

    .socialOrbit {
        width: 44rem;
        height: 44rem;

        opacity: 0.28;
    }

    .socialOrbitLeft {
        left: -32rem;
    }

    .socialOrbitRight {
        right: -32rem;
    }

    .socialAmbientGlow {
        width: 60rem;
        height: 55rem;

        top: 48%;
    }

    .socialWebsiteArea::after,
    .socialVideoArea::after {
        width: 23rem;
        height: 5rem;
    }

    .socialWebsiteArea::after {
        right: 50%;

        transform:
            translateX(50%)
            translateY(2rem)
            rotate(1deg);
    }

    .socialVideoArea::after {
        left: 50%;

        transform:
            translateX(-50%)
            translateY(2rem)
            rotate(-1deg);
    }
}


/* =========================================================
   <= 480px
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .socialSection {
        padding:
            4.5rem
            1.5rem
            1rem;
    }

    .socialEyebrow {
        font-size: 0.95rem;

        letter-spacing: 0.13em;
    }

    .socialTitleTop,
    .socialTitleBottom {
        font-size: clamp(4rem, 14vw, 5.4rem);
    }

    .socialVisual {
        gap: 3rem;

        margin-top: 3.5rem;

        perspective: 80rem;
    }

    .socialWebsiteCard {
        width: 88vw;

        transform:
            rotateY(8deg)
            rotateZ(-1deg);
    }

    .socialVideoCard {
        width: 68vw;

        margin-right: 0 !important;

        transform:
            translateX(0)
            translateZ(0)
            rotateX(-1deg)
            rotateY(-12deg)
            rotateZ(-0.8deg);
    }

    .socialCenterText {
        max-width: 34rem;

        padding: 0;

        font-size: 1.2rem;
        line-height: 1.65;
    }

    .socialConnectorLine {
        height: 2.5rem;
    }

    .socialOrbit {
        width: 38rem;
        height: 38rem;

        opacity: 0.22;
    }

    .socialOrbitLeft {
        left: -29rem;
    }

    .socialOrbitRight {
        right: -29rem;
    }

    .socialAmbientGlow {
        width: 48rem;
        height: 48rem;
    }

    .socialCardBadge {
        min-height: 3.2rem;

        padding:
            0.5rem
            1rem;

        gap: 0.6rem;

        font-size: 0.82rem;
    }

    .socialBadgeGlobe {
        font-size: 1.5rem;
    }

    .socialFacebookIcon {
        width: 1.7rem;
        height: 1.7rem;

        font-size: 1.25rem;
    }

    .socialWebsiteArea::after,
    .socialVideoArea::after {
        width: 19rem;
        height: 4rem;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .socialWebsiteCard,
    .socialVideoCard {
        animation: none !important;
    }
}



@media (orientation: portrait) {

    .hero {
        min-height: auto;
        height: auto;

        padding-top: 15rem;
        padding-bottom: 4rem;
    }

    .heroBox {
        height: auto;
        min-height: 0;
    }

    .heroContainer {
        height: auto;
        min-height: 0;

        align-items: start;
    }

}

/* =========================================================
   FOLDER SECTION — RESPONSIVE OVERRIDES
   PUT THIS AT THE VERY END OF YOUR FOLDER CSS
========================================================= */


/* =========================================================
   LARGE DESKTOP / SMALL LAPTOP
   1350px and below
========================================================= */

@media (max-width: 1350px) {

    .folder {
        padding:
            5rem
            3rem;
    }


    .folderContainer {
        grid-template-columns:
            minmax(0, 1.15fr)
            minmax(34rem, 0.85fr);

        gap: 3rem;
    }


    .folderVisual {
        min-height: 64rem;

        transform:
            scale(0.9);

        transform-origin:
            center center;
    }


    .folderContent {
        max-width: 44rem;
    }


    .folderCornerImg {
        width: 27rem;

        top: -6rem;
        left: -6rem;
    }

}


/* =========================================================
   TABLET LANDSCAPE
   1100px and below
========================================================= */

@media (max-width: 1100px) {

    .folder {
        padding:
            5rem
            2.5rem;
    }


    .folderContainer {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(30rem, 0.78fr);

        gap: 2rem;
    }


    .folderVisual {
        min-height: 58rem;

        transform:
            scale(0.8);

        transform-origin:
            center center;
    }


    .folderContent {
        max-width: 38rem;
    }


    .folderHeading {
        margin-top: 2.5rem;
    }


    .folderHeadingScript {
        font-size:
            clamp(
                4.2rem,
                5vw,
                5.6rem
            );
    }


    .folderHeadingMain {
        font-size:
            clamp(
                4.4rem,
                5vw,
                5.8rem
            );
    }


    .folderHeadingLine {
        margin-top: 3rem;
    }


    .folderDescription {
        margin-top: 2.8rem;

        font-size: 1.5rem;
        line-height: 1.65;
    }


    .folderButton {
        margin-top: 3rem;

        min-width: 20rem;

        padding:
            1.6rem
            2.1rem;
    }


    .folderCornerImg {
        width: 24rem;

        top: -5rem;
        left: -7rem;
    }

}


/* =========================================================
   STACK INTO ONE COLUMN
   850px and below
========================================================= */
@media (max-width: 970px) {
    .folderContent {
        width: min(55rem, 100%);
        max-width: none;

        margin:
            -1rem
            auto
            0;

        align-items: center;

        text-align: center;
    }

}
@media (max-width: 850px) {

    .folder {
        padding:
            5rem
            2rem
            7rem;
    }


    .folderContainer {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 1rem;
    }


    /* visual first */
    .folderVisual {
        width: 100%;

        min-height: 58rem;

        transform:
            scale(0.78);

        transform-origin:
            center center;
    }


    /* copy below visual */
    .folderContent {
        width: min(55rem, 100%);
        max-width: none;

        margin:
            -1rem
            auto
            0;

        align-items: center;

        text-align: center;
    }


    .folderEyebrow {
        font-size: 1.1rem;
    }


    .folderHeading {
        margin-top: 2.5rem;

        align-items: center;
    }


    .folderHeadingScript {
        margin-left: 0;

        font-size:
            clamp(
                4.7rem,
                9vw,
                6rem
            );
    }


    .folderHeadingMain {
        font-size:
            clamp(
                4.8rem,
                9vw,
                6.2rem
            );
    }


    .folderHeadingLine {
        margin-top: 3rem;
    }


    .folderDescription {
        max-width: 40rem;

        margin:
            2.8rem
            auto
            0;

        font-size: 1.5rem;
    }


    .folderButton {
        margin-top: 3rem;
    }


    .folderCornerImg {
        width: 21rem;

        top: -5rem;
        left: -8rem;

        opacity: 0.9;
    }

}


/* =========================================================
   MOBILE
   650px and below
========================================================= */

@media (max-width: 650px) {

    .folder {
        padding:
            4rem
            1.5rem
            6rem;
    }


    .folderContainer {
        gap: 0;
    }


    /*
        Your original visual is about 70rem high.
        At scale(.64), visually it becomes ~45rem.
        So we reduce the layout height too.
    */

    .folderVisual {
        min-height: 47rem;

        transform:
            scale(0.64);

        transform-origin:
            center center;
    }


    .folderContent {
        margin-top: 0;
    }


    .folderEyebrow {
        font-size: 1rem;

        padding-bottom: 0.9rem;
    }


    .folderHeading {
        margin-top: 2.2rem;
    }


    .folderHeadingScript {
        font-size:
            clamp(
                4rem,
                13vw,
                5.2rem
            );
    }


    .folderHeadingMain {
        margin-top: 0.8rem;

        font-size:
            clamp(
                4rem,
                13vw,
                5.2rem
            );
    }


    .folderHeadingLine {
        width: 4rem;

        margin-top: 2.5rem;
    }


    .folderDescription {
        max-width: 34rem;

        margin-top: 2.4rem;

        font-size: 1.4rem;

        line-height: 1.65;
    }


    .folderButton {
        width: min(23rem, 100%);

        min-width: 0;

        margin-top: 2.8rem;

        padding:
            1.6rem
            2rem;
    }


    .folderCornerImg {
        width: 18rem;

        top: -4.5rem;
        left: -7rem;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    .folder {
        padding:
            3.5rem
            1.2rem
            5rem;
    }


    .folderVisual {
        min-height: 40rem;

        transform:
            scale(0.53);

        transform-origin:
            center center;
    }


    .folderContent {
        width: 100%;
    }


    .folderHeadingScript {
        font-size:
            clamp(
                3.8rem,
                14vw,
                4.8rem
            );
    }


    .folderHeadingMain {
        font-size:
            clamp(
                3.8rem,
                14vw,
                4.8rem
            );
    }


    .folderDescription {
        max-width: 31rem;

        font-size: 1.35rem;
    }


    .folderButton {
        width: min(22rem, 100%);
    }


    .folderCornerImg {
        width: 15rem;

        top: -4rem;
        left: -6rem;

        opacity: 0.82;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .folderVisual {
        min-height: 36rem;

        transform:
            scale(0.46);
    }


    .folderHeadingScript {
        font-size: 3.7rem;
    }


    .folderHeadingMain {
        font-size: 3.7rem;
    }


    .folderDescription {
        max-width: 28rem;
    }

}

@media (max-width: 1600px) {
    .googleProfileContainer {
        width: calc(100% - 5rem);
    }

    .googleProfileContent {
        width: 51%;
        grid-template-columns: minmax(0, 48rem) 14rem;
        column-gap: 4rem;
    }

    .googleProfileIntro {
        width: 48rem;
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: 6.6rem;
    }

    .googleProfileText {
        max-width: 43rem;
        font-size: 1.8rem;
    }

    .googleProfileBusinessMini {
        padding-left: 3rem;
        transform: translate(-1rem, -2rem);
    }

    .googleProfileBusinessMiniText {
        font-size: 2rem;
    }

    .googleProfileBenefits {
        width: 78rem;
    }

    .googleProfileListing {
        left: 53%;
    }

    .googleProfileMapArea {
        width: 31vw;
    }

    .googleProfileLocation {
        left: 75%;
        top: 46%;
    }

    .googleProfileReviewCard {
        width: 19rem;
        min-height: 9.5rem;
        padding: 1.2rem 1.3rem;
        grid-template-columns: 3.5rem 1fr;
        gap: 0.8rem;
    }

    .googleProfileReviewGoogle {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
    }

    .googleProfileReviewGoogle img {
        width: 2.4rem !important;
        height: 2.4rem !important;
        max-width: 2.4rem !important;
        max-height: 2.4rem !important;
    }

    .googleProfileReviewContent p {
        font-size: 1.15rem;
    }

    .googleProfileReviewStars {
        font-size: 1.35rem;
    }

    .googleProfileReviewCardOne {
        right: -0.8rem;
    }

    .googleProfileReviewCardTwo {
        right: -0.8rem;
    }
}

@media (max-width: 1450px) {
    .googleProfileBgBurgundy {
        right: 31%;
    }

    .googleProfileBgCream {
        width: 35%;
    }

    .googleProfileBgCurve {
        left: 67%;
        width: 40rem;
    }

    .googleProfileContainer {
        width: calc(100% - 4rem);
    }

    .googleProfileContent {
        width: 50%;
        grid-template-columns: minmax(0, 45rem) 13rem;
        column-gap: 3rem;
    }

    .googleProfileIntro {
        width: 45rem;
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: 6.1rem;
    }

    .googleProfileText {
        max-width: 41rem;
        font-size: 1.7rem;
    }

    .googleProfileButton {
        min-width: 26rem;
        font-size: 1.4rem;
    }

    .googleProfileBusinessMini {
        padding-left: 2.7rem;
        transform: translate(-0.5rem, -2rem);
    }

    .googleProfileGoogleIcon {
        width: 6rem;
        height: 6rem;
        flex-basis: 6rem;
    }

    .googleProfileGoogleIcon img {
        width: 5.6rem !important;
        height: 5.6rem !important;
        max-width: 5.6rem !important;
        max-height: 5.6rem !important;
    }

    .googleProfileBusinessMiniText {
        font-size: 1.8rem;
    }

    .googleProfileBenefits {
        width: 72rem;
        grid-template-columns: repeat(3, 1fr) 5rem;
    }

    .googleProfileBenefit {
        padding: 0 1.3rem;
        grid-template-columns: 4.2rem 1fr;
        gap: 1rem;
    }

    .googleProfileBenefitIcon {
        width: 4rem;
        height: 4rem;
        font-size: 1.9rem;
    }

    .googleProfileBenefitCopy strong {
        font-size: 1.3rem;
    }

    .googleProfileBenefitCopy span {
        font-size: 1.05rem;
    }

    .googleProfileListing {
        left: 52%;
        width: 43.5rem;
    }

    .googleProfileListingImageWrap {
        height: 16.5rem;
    }

    .googleProfileListingTitle {
        font-size: 2.7rem;
    }

    .googleProfileListingGoogleBadge {
        right: -4rem;
        width: 7.2rem;
        height: 7.2rem;
    }

    .googleProfileListingGoogleBadge img {
        width: 4.4rem !important;
        height: 4.4rem !important;
        max-width: 4.4rem !important;
        max-height: 4.4rem !important;
    }

    .googleProfileMapArea {
        width: 32vw;
    }

    .googleProfileLocation {
        left: 74%;
        transform: translate(-50%, -50%) scale(0.92);
    }

    .googleProfileReviewCard {
        width: 18rem;
    }
}

@media (max-width: 1350px) {
    .googleProfile,
    .googleProfileContainer {
        min-height: 72rem;
    }

    .googleProfileBgBurgundy {
        right: 34%;
    }

    .googleProfileBgCream {
        width: 40%;
    }

    .googleProfileBgCurve {
        left: 62%;
        width: 36rem;
    }

    .googleProfileOrbitOne {
        left: 28%;
        width: 80rem;
        height: 70rem;
    }

    .googleProfileOrbitTwo {
        left: 20%;
        width: 84rem;
    }

    .googleProfileContent {
        width: 58%;
        min-height: 72rem;
        padding-top: 5rem;
        grid-template-columns: minmax(0, 1fr) 12rem;
        column-gap: 2.5rem;
    }

    .googleProfileIntro {
        width: min(43rem, 100%);
    }

    .googleProfileHeading {
        margin-top: 4rem;
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: 5.5rem;
    }

    .googleProfileText {
        max-width: 39rem;
        font-size: 1.6rem;
    }

    .googleProfileBusinessMini {
        padding-left: 2rem;
    }

    .googleProfileBusinessMini::before {
        height: 21rem;
    }

    .googleProfileBusinessMiniText {
        font-size: 1.65rem;
    }

    .googleProfileBenefits {
        width: 100%;
        max-width: 69rem;
    }

    .googleProfileListing {
        left: auto;
        right: 1rem;
        width: 41rem;
    }

    .googleProfileListingImageWrap {
        height: 15.5rem;
    }

    .googleProfileListingBrand {
        width: 7.2rem;
        height: 7.2rem;
        left: 2rem;
    }

    .googleProfileListingBrandMark {
        font-size: 3.7rem;
    }

    .googleProfileListingBody {
        padding: 1.6rem 1.7rem 0;
    }

    .googleProfileListingTitle {
        font-size: 2.5rem;
    }

    .googleProfileListingRatingRow strong {
        font-size: 1.5rem;
    }

    .googleProfileListingStars {
        font-size: 1.5rem;
    }

    .googleProfileListingMeta {
        font-size: 1.3rem;
    }

    .googleProfileListingActionIcon {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }

    .googleProfileListingAction {
        font-size: 1rem;
    }

    .googleProfileListingAddress {
        grid-template-columns: 4rem 1fr 10rem;
    }

    .googleProfileListingAddressText {
        font-size: 1.2rem;
    }

    .googleProfileListingGoogleBadge {
        right: -2.2rem;
        width: 6.5rem;
        height: 6.5rem;
        border-width: 0.5rem;
    }

    .googleProfileListingGoogleBadge img {
        width: 4rem !important;
        height: 4rem !important;
        max-width: 4rem !important;
        max-height: 4rem !important;
    }

    .googleProfileMapArea {
        width: 36%;
        right: 0;
    }

    .googleProfileLocation {
        left: 64%;
        top: 46%;
        transform: translate(-50%, -50%) scale(0.78);
    }

    .googleProfileReviewCard {
        width: 16.5rem;
        min-height: 8.5rem;
        padding: 1rem;
    }

    .googleProfileReviewContent p {
        font-size: 1rem;
    }

    .googleProfileReviewCardOne {
        top: 8rem;
        right: 0.5rem;
    }

    .googleProfileReviewCardTwo {
        top: 48rem;
        right: 0.5rem;
    }
}

@media (max-width: 1100px) {
    .googleProfile {
        min-height: 78rem;
    }

    .googleProfileContainer {
        min-height: 78rem;
        width: calc(100% - 4rem);
    }

    .googleProfileBgBurgundy {
        right: 36%;
    }

    .googleProfileBgCream {
        width: 42%;
    }

    .googleProfileBgCurve {
        left: 60%;
        width: 30rem;
    }

    .googleProfileContent {
        width: 58%;
        min-height: 78rem;
        padding-top: 4.5rem;
        display: block;
    }

    .googleProfileIntro {
        width: min(40rem, 100%);
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: 5rem;
    }

    .googleProfileText {
        max-width: 35rem;
        font-size: 1.5rem;
    }

    .googleProfileButton {
        min-width: 24rem;
        padding: 1.4rem 1.8rem;
        font-size: 1.25rem;
    }

    .googleProfileBusinessMini {
        position: absolute;
        top: 19rem;
        right: 0;
        width: 11rem;
        min-height: auto;
        padding-left: 2rem;
        transform: none;
    }

    .googleProfileBusinessMini::before {
        height: 18rem;
    }

    .googleProfileGoogleIcon {
        width: 5.2rem;
        height: 5.2rem;
        flex-basis: 5.2rem;
    }

    .googleProfileGoogleIcon img {
        width: 4.8rem !important;
        height: 4.8rem !important;
        max-width: 4.8rem !important;
        max-height: 4.8rem !important;
    }

    .googleProfileBusinessMiniText {
        font-size: 1.45rem;
    }

    .googleProfileBenefits {
        bottom: 2rem;
        width: 100%;
        max-width: 60rem;
        min-height: 8.5rem;
        padding: 1rem;
        grid-template-columns: repeat(3, 1fr);
    }

    .googleProfileBenefitEnd {
        display: none;
    }

    .googleProfileBenefit {
        min-height: 5.8rem;
        padding: 0 1rem;
        grid-template-columns: 3.8rem 1fr;
        gap: 0.8rem;
    }

    .googleProfileBenefitIcon {
        width: 3.6rem;
        height: 3.6rem;
        font-size: 1.65rem;
    }

    .googleProfileBenefitCopy strong {
        font-size: 1.15rem;
    }

    .googleProfileBenefitCopy span {
        font-size: 0.95rem;
    }

    .googleProfileListing {
        top: 6rem;
        right: 1rem;
        width: 36rem;
    }

    .googleProfileListingImageWrap {
        height: 13rem;
    }

    .googleProfileListingBrand {
        width: 6.5rem;
        height: 6.5rem;
        border-width: 0.45rem;
    }

    .googleProfileListingBrandMark {
        font-size: 3.2rem;
    }

    .googleProfileListingTitle {
        font-size: 2.15rem;
    }

    .googleProfileListingRatingRow {
        gap: 0.5rem;
    }

    .googleProfileListingRatingRow strong,
    .googleProfileListingStars {
        font-size: 1.3rem;
    }

    .googleProfileListingReviewCount {
        font-size: 1.1rem;
    }

    .googleProfileListingMeta {
        font-size: 1.15rem;
    }

    .googleProfileListingActions {
        margin-top: 1.4rem;
        padding: 1rem 0 1.3rem;
    }

    .googleProfileListingActionIcon {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.55rem;
    }

    .googleProfileListingAction {
        font-size: 0.85rem;
    }

    .googleProfileListingAddress {
        min-height: 6.8rem;
        grid-template-columns: 3.5rem 1fr 8.5rem;
    }

    .googleProfileListingAddressIcon {
        font-size: 2rem;
    }

    .googleProfileListingAddressText {
        font-size: 1.05rem;
    }

    .googleProfileListingReviews {
        min-height: 7rem;
        padding: 1rem 0.3rem;
    }

    .googleProfileListingReviewsText > span {
        font-size: 1.15rem;
    }

    .googleProfileListingReviewsScore strong {
        font-size: 1.7rem;
    }

    .googleProfileListingReviewsScore > span {
        font-size: 0.95rem;
    }

    .googleProfileListingReviewsArrow {
        font-size: 3rem;
    }

    .googleProfileListingGoogleBadge {
        right: -1.5rem;
        width: 5.8rem;
        height: 5.8rem;
    }

    .googleProfileListingGoogleBadge img {
        width: 3.5rem !important;
        height: 3.5rem !important;
        max-width: 3.5rem !important;
        max-height: 3.5rem !important;
    }

    .googleProfileMapArea {
        width: 38%;
    }

    .googleProfileLocation {
        left: 62%;
        top: 48%;
        transform: translate(-50%, -50%) scale(0.65);
    }

    .googleProfileReviewCard {
        width: 14rem;
        min-height: 7.5rem;
        grid-template-columns: 2.8rem 1fr;
        gap: 0.6rem;
    }

    .googleProfileReviewGoogle {
        width: 2.6rem;
        height: 2.6rem;
        flex-basis: 2.6rem;
    }

    .googleProfileReviewGoogle img {
        width: 2rem !important;
        height: 2rem !important;
        max-width: 2rem !important;
        max-height: 2rem !important;
    }

    .googleProfileReviewContent p {
        font-size: 0.9rem;
    }

    .googleProfileReviewStars {
        font-size: 1.1rem;
    }
}

@media (max-width: 850px) {
    .googleProfile {
        min-height: 128rem;
    }

    .googleProfileContainer {
        width: calc(100% - 3rem);
        min-height: 128rem;
    }

    .googleProfileBgBurgundy {
        inset: 0 0 47% 0;
    }

    .googleProfileBgCream {
        top: 53%;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 47%;
    }

    .googleProfileBgCurve {
        top: 45%;
        left: -10%;
        width: 125%;
        height: 24rem;
        transform: rotate(-5deg);
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    }

    .googleProfileMapTexture {
        top: 53%;
        width: 100%;
        height: 47%;
    }

    .googleProfileOrbitOne {
        left: -15rem;
        top: 5rem;
        width: 72rem;
        height: 62rem;
    }

    .googleProfileOrbitTwo {
        left: 50%;
        bottom: 24rem;
        width: 75rem;
        transform: translateX(-50%) rotate(-8deg);
    }

    .googleProfileContent {
        width: 100%;
        min-height: 61rem;
        padding: 5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .googleProfileIntro {
        width: min(52rem, 100%);
        text-align: center;
        align-self: center;
    }

    .googleProfileEyebrow {
        justify-content: center;
        font-size: 1.35rem;
    }

    .googleProfileEyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .googleProfileHeading {
        margin-top: 3.5rem;
        align-items: center;
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: clamp(4.8rem, 9vw, 6rem);
        white-space: normal;
    }

    .googleProfileText {
        max-width: 45rem;
        margin-left: auto;
        margin-right: auto;
        font-size: 1.55rem;
    }

    .googleProfileButton {
        min-width: 25rem;
    }

    .googleProfileBusinessMini {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        min-height: 9rem;
        margin-top: 3rem;
        padding: 2rem 0 0;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

    .googleProfileBusinessMini::before {
        top: 0;
        left: 50%;
        width: 18rem;
        height: 1px;
        transform: translateX(-50%);
        background:
            linear-gradient(
                to right,
                transparent,
                rgba(255, 255, 255, 0.3),
                transparent
            );
    }

    .googleProfileBusinessMiniText {
        font-size: 1.45rem;
        text-align: left;
    }

    .googleProfileBenefits {
        display: none;
    }

    .googleProfileBenefit {
        width: 100%;
        min-height: 7rem;
        padding: 1rem 0;
        grid-template-columns: 4.3rem 1fr;
    }

    .googleProfileBenefit + .googleProfileBenefit {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .googleProfileBenefitIcon {
        width: 4rem;
        height: 4rem;
    }

    .googleProfileBenefitCopy span {
        max-width: none;
    }

    .googleProfileListing {
        top: 63rem;
        left: 50%;
        right: auto;
        width: min(46rem, calc(100% - 3rem));
        transform: translateX(-50%);
    }

    .googleProfileListingImageWrap {
        height: 16rem;
    }

    .googleProfileListingTitle {
        font-size: 2.4rem;
    }

    .googleProfileListingGoogleBadge {
        right: -1rem;
    }

    .googleProfileMapArea {
        top: 53%;
        right: 0;
        width: 100%;
        height: 47%;
    }

    .googleProfileLocation {
        left: 72%;
        top: 40%;
        transform: translate(-50%, -50%) scale(0.72);
    }

    .googleProfileReviewCard {
        width: 17rem;
        min-height: 8rem;
    }

    .googleProfileReviewCardOne {
        top: auto;
        right: 2rem;
        bottom: 8rem;
    }

    .googleProfileReviewCardTwo {
        top: auto;
        left: 2rem;
        right: auto;
        bottom: 3rem;
    }
}

@media (max-width: 550px) {
    .googleProfile {
        min-height: 118rem;
    }

    .googleProfileContainer {
        width: calc(100% - 2rem);
        min-height: 118rem;
    }

    .googleProfileContent {
        min-height: 58rem;
        padding: 4rem 0 2rem;
    }

    .googleProfileEyebrow {
        font-size: 1.15rem;
    }

    .googleProfileHeading {
        margin-top: 3rem;
    }

    .googleProfileHeadingMain,
    .googleProfileHeadingAccent {
        font-size: clamp(4.2rem, 13vw, 5.2rem);
    }

    .googleProfileText {
        max-width: 34rem;
        font-size: 1.4rem;
    }

    .googleProfileButton {
        min-width: min(26rem, 100%);
        padding: 1.45rem 1.8rem;
        font-size: 1.15rem;
    }

    .googleProfileGoogleIcon {
        width: 4.8rem;
        height: 4.8rem;
        flex-basis: 4.8rem;
    }

    .googleProfileGoogleIcon img {
        width: 4.4rem !important;
        height: 4.4rem !important;
        max-width: 4.4rem !important;
        max-height: 4.4rem !important;
    }

    .googleProfileBusinessMiniText {
        font-size: 1.3rem;
    }

    .googleProfileBenefits {
        width: calc(100% - 1rem);
    }

    .googleProfileBenefit {
        grid-template-columns: 4rem 1fr;
    }

    .googleProfileBenefitIcon {
        width: 3.7rem;
        height: 3.7rem;
        font-size: 1.6rem;
    }

    .googleProfileListing {
        top: 60rem;
        width: calc(100% - 1rem);
        border-radius: 1.6rem;
    }

    .googleProfileListingImageWrap {
        width: calc(100% - 1.4rem);
        height: 14rem;
        margin-top: 0.7rem;
    }

    .googleProfileListingBrand {
        left: 1.2rem;
        width: 6rem;
        height: 6rem;
        border-width: 0.4rem;
    }

    .googleProfileListingBrandMark {
        font-size: 3rem;
    }

    .googleProfileListingBody {
        padding: 1.5rem 1.3rem 0;
    }

    .googleProfileListingTitle {
        font-size: 2.1rem;
    }

    .googleProfileListingRatingRow strong,
    .googleProfileListingStars {
        font-size: 1.2rem;
    }

    .googleProfileListingMeta {
        font-size: 1.05rem;
    }

    .googleProfileListingActions {
        gap: 0.3rem;
    }

    .googleProfileListingAction {
        font-size: 0.75rem;
    }

    .googleProfileListingActionIcon {
        width: 3.3rem;
        height: 3.3rem;
        font-size: 1.4rem;
    }

    .googleProfileListingAddress {
        grid-template-columns: 3rem 1fr 7rem;
    }

    .googleProfileListingAddressText {
        font-size: 0.95rem;
    }

    .googleProfileListingReviewsText > span {
        font-size: 1rem;
    }

    .googleProfileListingReviewsScore strong {
        font-size: 1.5rem;
    }

    .googleProfileListingReviewsScore > span {
        font-size: 0.85rem;
    }

    .googleProfileListingReviewsArrow {
        font-size: 2.7rem;
    }

    .googleProfileListingGoogleBadge {
        top: 2.5rem;
        right: -0.5rem;
        width: 5rem;
        height: 5rem;
        border-width: 0.4rem;
    }

    .googleProfileListingGoogleBadge img {
        width: 3rem !important;
        height: 3rem !important;
        max-width: 3rem !important;
        max-height: 3rem !important;
    }

    .googleProfileLocation {
        left: 70%;
        top: 35%;
        transform: translate(-50%, -50%) scale(0.55);
    }

    .googleProfileReviewCard {
        width: calc(50% - 1.5rem);
        min-height: 7.5rem;
        padding: 0.9rem;
        grid-template-columns: 2.5rem 1fr;
    }

    .googleProfileReviewGoogle {
        width: 2.3rem;
        height: 2.3rem;
        flex-basis: 2.3rem;
    }

    .googleProfileReviewGoogle img {
        width: 1.8rem !important;
        height: 1.8rem !important;
        max-width: 1.8rem !important;
        max-height: 1.8rem !important;
    }

    .googleProfileReviewContent p {
        font-size: 0.8rem;
    }

    .googleProfileReviewStars {
        font-size: 0.95rem;
    }

    .googleProfileReviewCardOne {
        right: 0.5rem;
        bottom: 5rem;
    }

    .googleProfileReviewCardTwo {
        left: 0.5rem;
        bottom: 1.5rem;
    }

    .googleProfileOrbitThree {
        display: none;
    }
}

@media (max-width: 1600px) {
    .emailResponseContainer {
        width: calc(100% - 6rem);
        grid-template-columns: 56% 44%;
    }

    .emailResponseCream {
        inset: 0 45% 0 0;
    }

    .emailResponseBurgundy {
        width: 51%;
    }

    .emailResponseGlow {
        left: 40%;
        width: 88rem;
        height: 54rem;
    }

    .emailResponseOrbit {
        left: 40%;
    }

    .emailResponseOrbitOuter {
        width: 100rem;
        height: 62rem;
    }

    .emailResponseOrbitInner {
        width: 94rem;
        height: 56rem;
    }

    .emailResponseImageWrap {
        width: 84rem;
        margin-left: -2rem;
    }

    .emailResponseContent {
        padding-left: 6rem;
    }

    .emailResponseContentInner {
        max-width: 54rem;
    }

    .emailResponseHeadingMain {
        font-size: 6.4rem;
    }

    .emailResponseHeadingAccent {
        font-size: 6.6rem;
    }

    .emailResponseText {
        max-width: 49rem;
        font-size: 1.65rem;
    }

    .emailResponseFeatures {
        column-gap: 3.5rem;
    }

    .emailResponseFeature {
        grid-template-columns: 5.7rem minmax(0, 1fr);
        gap: 1.4rem;
    }

    .emailResponseFeatureIcon {
        width: 5.7rem;
        height: 5.7rem;
    }

    .emailResponseFeatureCopy strong {
        font-size: 1.5rem;
    }

    .emailResponseFeatureCopy span {
        font-size: 1.1rem;
    }
}

@media (max-width: 1450px) {
    .emailResponse,
    .emailResponseContainer,
    .emailResponseVisual,
    .emailResponseContent {
        min-height: 82rem;
    }

    .emailResponseContainer {
        width: calc(100% - 5rem);
        grid-template-columns: 55% 45%;
    }

    .emailResponseCream {
        inset: 0 46% 0 0;
    }

    .emailResponseBurgundy {
        width: 52%;
    }

    .emailResponseGlow {
        left: 38%;
        width: 80rem;
        height: 50rem;
    }

    .emailResponseOrbit {
        left: 38%;
    }

    .emailResponseOrbitOuter {
        width: 92rem;
        height: 57rem;
    }

    .emailResponseOrbitInner {
        width: 86rem;
        height: 52rem;
    }

    .emailResponseImageWrap {
        width: 76rem;
        margin-left: -2.5rem;
    }

    .emailResponseContent {
        padding-left: 4.5rem;
    }

    .emailResponseContentInner {
        max-width: 50rem;
    }

    .emailResponseEyebrow {
        font-size: 1.3rem;
    }

    .emailResponseHeading {
        margin-top: 3.8rem;
    }

    .emailResponseHeadingMain {
        font-size: 5.8rem;
    }

    .emailResponseHeadingAccent {
        font-size: 6rem;
    }

    .emailResponseText {
        max-width: 45rem;
        margin-top: 2.6rem;
        font-size: 1.55rem;
    }

    .emailResponseFeatures {
        margin-top: 4rem;
        column-gap: 2.8rem;
        row-gap: 3.2rem;
    }

    .emailResponseFeature {
        grid-template-columns: 5.2rem minmax(0, 1fr);
        gap: 1.2rem;
    }

    .emailResponseFeatureIcon {
        width: 5.2rem;
        height: 5.2rem;
    }

    .emailResponseFeatureIcon span {
        font-size: 2.2rem;
    }

    .emailResponseFeatureCopy strong {
        font-size: 1.4rem;
    }

    .emailResponseFeatureCopy span {
        max-width: 17rem;
        font-size: 1.05rem;
    }

    .emailResponseFeature::after {
        left: 6.4rem;
    }
}

@media (max-width: 1300px) {
    .emailResponse,
    .emailResponseContainer,
    .emailResponseVisual,
    .emailResponseContent {
        min-height: 76rem;
    }

    .emailResponseContainer {
        width: calc(100% - 4rem);
        grid-template-columns: 54% 46%;
    }

    .emailResponseCream {
        inset: 0 48% 0 0;
    }

    .emailResponseBurgundy {
        width: 54%;
    }

    .emailResponseGlow {
        left: 36%;
        width: 72rem;
        height: 45rem;
    }

    .emailResponseOrbit {
        left: 36%;
    }

    .emailResponseOrbitOuter {
        width: 82rem;
        height: 51rem;
    }

    .emailResponseOrbitInner {
        width: 77rem;
        height: 46rem;
    }

    .emailResponseImageWrap {
        width: 68rem;
        margin-left: -3rem;
    }

    .emailResponseContent {
        padding-left: 3.5rem;
    }

    .emailResponseContentInner {
        max-width: 46rem;
    }

    .emailResponseHeadingMain {
        font-size: 5.1rem;
    }

    .emailResponseHeadingAccent {
        font-size: 5.3rem;
    }

    .emailResponseText {
        max-width: 41rem;
        font-size: 1.45rem;
        line-height: 1.65;
    }

    .emailResponseFeatures {
        margin-top: 3.5rem;
        grid-template-columns: 1fr;
        row-gap: 2.4rem;
    }

    .emailResponseFeature {
        grid-template-columns: 5rem minmax(0, 1fr);
    }

    .emailResponseFeatureIcon {
        width: 5rem;
        height: 5rem;
    }

    .emailResponseFeatureCopy span {
        max-width: 30rem;
    }

    .emailResponseFeature::after {
        left: 6.2rem;
        bottom: -1.2rem;
    }

    .emailResponseFeature:nth-last-child(-n + 2)::after {
        display: block;
    }

    .emailResponseFeature:last-child::after {
        display: none;
    }
}

@media (max-width: 1100px) {
    .emailResponse {
        min-height: 112rem;
    }

    .emailResponseContainer {
        width: calc(100% - 4rem);
        min-height: 112rem;
        display: flex;
        flex-direction: column;
    }

    .emailResponseCream {
        inset: 0 0 49% 0;
    }

    .emailResponseBurgundy {
        top: 51%;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .emailResponseGlow {
        left: 50%;
        top: 35%;
        width: 78rem;
        height: 46rem;
    }

    .emailResponseOrbit {
        left: 50%;
        top: 34%;
    }

    .emailResponseOrbitOuter {
        width: 88rem;
        height: 52rem;
    }

    .emailResponseOrbitInner {
        width: 82rem;
        height: 47rem;
    }

    .emailResponseDots {
        top: auto;
        right: 3rem;
        bottom: 4rem;
    }

    .emailResponseVisual {
        width: 100%;
        min-height: 57rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .emailResponseImageWrap {
        width: min(82rem, 94%);
        margin-left: 0;
        transform: translateY(1rem) rotate(-0.4deg);
    }

    .emailResponseContent {
        width: 100%;
        min-height: 55rem;
        padding: 5rem 4rem 6rem;
        align-items: flex-start;
        justify-content: center;
    }

    .emailResponseContentInner {
        width: min(72rem, 100%);
        max-width: none;
        transform: none;
    }

    .emailResponseHeadingMain {
        font-size: 5.8rem;
    }

    .emailResponseHeadingAccent {
        font-size: 6rem;
    }

    .emailResponseText {
        max-width: 60rem;
        font-size: 1.55rem;
    }

    .emailResponseFeatures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 4rem;
        row-gap: 3.2rem;
    }

    .emailResponseFeatureCopy span {
        max-width: 23rem;
    }

    .emailResponseFeature:nth-last-child(-n + 2)::after {
        display: none;
    }
}

@media (max-width: 850px) {
    .emailResponse {
        min-height: 138rem;
    }

    .emailResponseContainer {
        width: 100%;
        min-height: 138rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .emailResponseCream {
        inset: 0 0 50% 0;
    }

    .emailResponseBurgundy {
        top: 50%;
        right: 0;
        bottom: 0;
        width: 100%;
    }

    .emailResponseGlow {
        left: 50%;
        top: 31%;
        width: 72rem;
        height: 46rem;
    }

    .emailResponseOrbit {
        left: 50%;
        top: 31%;
    }

    .emailResponseOrbitOuter {
        width: 76rem;
        height: 48rem;
    }

    .emailResponseOrbitInner {
        width: 70rem;
        height: 43rem;
    }

    .emailResponseDots {
        top: auto;
        right: 1.5rem;
        bottom: 3rem;
        width: 13rem;
        height: 12rem;
    }

    .emailResponseVisual {
        width: 100%;
        min-height: 78rem;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .emailResponseImageWrap {
        width: 96vw;
        max-width: none;
        margin-left: 0;
        transform: translateY(1rem);
    }

    .emailResponseImageWrap .emailResponseImage:first-child {
        display: none;
    }

    .emailResponseImageMobile {
        display: block;
        width: 100%;
        height: auto;
    }

    .emailResponseContent {
        width: 100%;
        min-height: 60rem;
        padding: 5rem 3rem 5.5rem;
        align-items: flex-start;
        justify-content: center;
    }

    .emailResponseContentInner {
        width: min(60rem, 100%);
        max-width: none;
        text-align: center;
        transform: none;
    }

    .emailResponseEyebrow {
        justify-content: center;
        font-size: 1.3rem;
    }

    .emailResponseEyebrow::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .emailResponseHeading {
        align-items: center;
        margin-top: 3.5rem;
    }

    .emailResponseHeadingMain,
    .emailResponseHeadingAccent {
        font-size: clamp(4.5rem, 8vw, 5.6rem);
        white-space: normal;
        text-align: center;
    }

    .emailResponseText {
        max-width: 50rem;
        margin: 2.6rem auto 0;
        font-size: 1.45rem;
    }

    .emailResponseFeatures {
        width: min(54rem, 100%);
        margin: 4rem auto 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 3rem;
        row-gap: 3rem;
        text-align: left;
    }

    .emailResponseFeature {
        grid-template-columns: 5rem minmax(0, 1fr);
        gap: 1.3rem;
    }

    .emailResponseFeatureIcon {
        width: 5rem;
        height: 5rem;
    }

    .emailResponseFeatureIcon span {
        font-size: 2rem;
    }

    .emailResponseFeatureCopy strong {
        font-size: 1.35rem;
    }

    .emailResponseFeatureCopy span {
        max-width: 18rem;
        font-size: 1.05rem;
    }

    .emailResponseFeature::after {
        left: 6.3rem;
    }

    .emailResponseFeature:nth-last-child(-n + 2)::after {
        display: none;
    }
}

@media (max-width: 650px) {
    .emailResponse {
        min-height: 132rem;
    }

    .emailResponseContainer {
        min-height: 132rem;
    }

    .emailResponseCream {
        inset: 0 0 48% 0;
    }

    .emailResponseBurgundy {
        top: 52%;
    }

    .emailResponseGlow {
        top: 29%;
        width: 58rem;
        height: 38rem;
    }

    .emailResponseOrbit {
        top: 29%;
    }

    .emailResponseOrbitOuter {
        width: 62rem;
        height: 40rem;
        border-width: 0.35rem;
    }

    .emailResponseOrbitInner {
        width: 57rem;
        height: 35rem;
    }

    .emailResponseDots {
        width: 10rem;
        height: 9rem;
        right: 1rem;
        bottom: 2rem;
    }

    .emailResponseVisual {
        min-height: 72rem;
    }

    .emailResponseImageWrap {
        width: 102vw;
        margin-left: 0;
        transform: translateY(1rem);
    }

    .emailResponseContent {
        min-height: 60rem;
        padding: 4.5rem 2rem 5rem;
    }

    .emailResponseContentInner {
        width: min(46rem, 100%);
    }

    .emailResponseEyebrow {
        font-size: 1.15rem;
    }

    .emailResponseHeading {
        margin-top: 3rem;
    }

    .emailResponseHeadingMain,
    .emailResponseHeadingAccent {
        font-size: clamp(4rem, 11vw, 5rem);
    }

    .emailResponseText {
        max-width: 40rem;
        font-size: 1.35rem;
    }

    .emailResponseFeatures {
        width: 100%;
        margin-top: 3.5rem;
        grid-template-columns: 1fr;
        row-gap: 2.6rem;
    }

    .emailResponseFeature {
        grid-template-columns: 4.8rem minmax(0, 1fr);
        gap: 1.3rem;
    }

    .emailResponseFeatureIcon {
        width: 4.8rem;
        height: 4.8rem;
    }

    .emailResponseFeatureIcon span {
        font-size: 2rem;
    }

    .emailResponseFeatureCopy strong {
        font-size: 1.35rem;
    }

    .emailResponseFeatureCopy span {
        max-width: none;
        font-size: 1.05rem;
    }

    .emailResponseFeature::after {
        left: 6.1rem;
        display: block;
    }

    .emailResponseFeature:nth-last-child(-n + 2)::after {
        display: block;
    }

    .emailResponseFeature:last-child::after {
        display: none;
    }
}

@media (max-width: 500px) {
    .emailResponse {
        min-height: 124rem;
    }

    .emailResponseContainer {
        min-height: 124rem;
    }

    .emailResponseCream {
        inset: 0 0 45% 0;
    }

    .emailResponseBurgundy {
        top: 55%;
    }

    .emailResponseGlow {
        top: 27%;
        width: 48rem;
        height: 31rem;
    }

    .emailResponseOrbit {
        top: 27%;
    }

    .emailResponseOrbitOuter {
        width: 52rem;
        height: 33rem;
    }

    .emailResponseOrbitInner {
        width: 47rem;
        height: 29rem;
    }

    .emailResponseVisual {
        min-height: 66rem;
    }

    .emailResponseImageWrap {
        width: 108vw;
        margin-left: 0;
        transform: translateY(0.5rem);
    }

    .emailResponseContent {
        min-height: 58rem;
        padding: 4rem 1.5rem 4.5rem;
    }

    .emailResponseContentInner {
        width: 100%;
    }

    .emailResponseEyebrow {
        font-size: 1.05rem;
        letter-spacing: 0.11em;
    }

    .emailResponseHeadingMain,
    .emailResponseHeadingAccent {
        font-size: clamp(3.7rem, 12vw, 4.5rem);
    }

    .emailResponseText {
        max-width: 34rem;
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .emailResponseFeatures {
        width: 100%;
        margin-top: 3rem;
    }

    .emailResponseFeature {
        grid-template-columns: 4.3rem minmax(0, 1fr);
        gap: 1.1rem;
    }

    .emailResponseFeatureIcon {
        width: 4.3rem;
        height: 4.3rem;
    }

    .emailResponseFeatureIcon span {
        font-size: 1.8rem;
    }

    .emailResponseFeatureCopy strong {
        font-size: 1.25rem;
    }

    .emailResponseFeatureCopy span {
        font-size: 0.98rem;
        line-height: 1.45;
    }

    .emailResponseFeature::after {
        left: 5.4rem;
    }
}

@media (max-width: 1400px) {
    .getFoundSection {
        min-height: auto;
    }

    .getFoundContainer {
        width: min(118rem, calc(100% - 5rem));
        min-height: auto;
        padding: 6rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5.5rem;
    }

    .getFoundIntro {
        width: 100%;
        max-width: 78rem;
        height: auto;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .getFoundEyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundHeading {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .getFoundHeadingScript,
    .getFoundHeadingMain {
        width: auto;
        text-align: center;
    }

    .getFoundAccentLine {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundIntroText {
        width: 100%;
        max-width: 64rem;
        margin-left: auto;
        margin-right: auto;
        padding-right: 0;
        text-align: center;
    }

    .getFoundButton {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundTrust {
        width: auto;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundCards {
        width: 100%;
        max-width: 112rem;
        height: auto;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.4rem;
        overflow: visible;
    }

    .getFoundCard {
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
    }

    .getFoundCardImageWrap {
        position: relative;
        inset: auto;
        width: 100%;
        height: 28rem;
    }

    .getFoundCardImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
        filter: none;
    }

    .getFoundCardBody {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        min-height: 33rem;
        padding: 4.8rem 2.3rem 2.4rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        background: transparent;
    }

    .getFoundCardBadge {
        left: 2.4rem;
        bottom: -3rem;
        width: 6.4rem;
        height: 6.4rem;
        transform: none;
    }

    .getFoundCardBadge span {
        font-size: 2.6rem;
    }

    .getFoundBackgroundOrbOne {
        top: -20rem;
        left: -20rem;
    }

    .getFoundBackgroundOrbTwo {
        top: 22rem;
        left: 34%;
    }

    .getFoundBackgroundOrbThree {
        right: -24rem;
        bottom: -24rem;
    }

    .getFoundBackgroundLineOne {
        top: 22rem;
        left: -5%;
    }

    .getFoundBackgroundLineTwo {
        right: -10%;
        bottom: 4rem;
    }
}

@media (max-width: 1200px) {
    .getFoundContainer {
        width: min(105rem, calc(100% - 4rem));
        padding: 5.5rem 0;
        gap: 5rem;
    }

    .getFoundIntro {
        max-width: 72rem;
    }

    .getFoundHeadingScript {
        font-size: 5.6rem;
    }

    .getFoundHeadingMain {
        font-size: 8rem;
    }

    .getFoundIntroText {
        max-width: 58rem;
        font-size: 1.65rem;
    }

    .getFoundCards {
        max-width: 100rem;
        gap: 2rem;
    }

    .getFoundCardImageWrap {
        height: 25rem;
    }

    .getFoundCardBody {
        min-height: 31rem;
        padding: 4.6rem 2rem 2.2rem;
    }

    .getFoundCardBody h3 {
        font-size: 2.4rem;
    }

    .getFoundCardBody > p {
        font-size: 1.25rem;
    }

    .getFoundCardList li {
        font-size: 1.05rem;
    }

    .getFoundCardLink {
        font-size: 1.15rem;
    }
}

@media (max-width: 1050px) and (orientation: landscape) {
    .getFoundContainer {
        width: calc(100% - 3rem);
        padding: 5rem 0;
        gap: 4.5rem;
    }

    .getFoundIntro {
        max-width: 66rem;
    }

    .getFoundHeadingScript {
        font-size: 5.2rem;
    }

    .getFoundHeadingMain {
        font-size: 7.2rem;
    }

    .getFoundIntroText {
        max-width: 54rem;
        font-size: 1.55rem;
    }

    .getFoundCards {
        max-width: 92rem;
        gap: 1.6rem;
    }

    .getFoundCardImageWrap {
        height: 22rem;
    }

    .getFoundCardBody {
        min-height: 29rem;
        padding: 4.4rem 1.8rem 2rem;
    }

    .getFoundCardBody h3 {
        font-size: 2.2rem;
    }

    .getFoundCardBody > p {
        font-size: 1.15rem;
    }

    .getFoundCardList {
        gap: 0.9rem;
    }

    .getFoundCardList li {
        font-size: 0.98rem;
    }

    .getFoundCardLink {
        font-size: 1.05rem;
    }
}

@media (max-width: 1024px) and (orientation: portrait) {
    .getFoundSection {
        min-height: auto;
    }

    .getFoundContainer {
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 5rem 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4rem;
    }

    .getFoundIntro {
        width: calc(100% - 4rem);
        max-width: 72rem;
        height: auto;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .getFoundEyebrow {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundHeading {
        align-items: center;
        text-align: center;
    }

    .getFoundHeadingScript,
    .getFoundHeadingMain {
        text-align: center;
        white-space: normal;
    }

    .getFoundAccentLine {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundIntroText {
        max-width: 58rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .getFoundButton {
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundTrust {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .getFoundCards {
        width: calc(100% - 4rem);
        max-width: 76rem;
        height: 48rem;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 1.2rem;
        overflow: visible;
    }

    .getFoundCard {
        position: relative;
        flex: 0 0 7rem;
        width: 7rem;
        min-width: 7rem;
        max-width: none;
        height: 100%;
        overflow: hidden;
        cursor: pointer;
        border-radius: 1.8rem;
        transition:
            flex-basis 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            width 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 0.35s ease,
            transform 0.35s ease,
            opacity 0.35s ease;
    }

    .getFoundCard.getFoundCardActive {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        height: 100%;
        cursor: default;
        box-shadow:
            0 2.8rem 5rem rgba(81, 47, 31, 0.14),
            0 0.6rem 1.3rem rgba(81, 47, 31, 0.05);
    }

    .getFoundCard:not(.getFoundCardActive) {
        opacity: 0.92;
    }

    .getFoundCard:not(.getFoundCardActive):hover {
        transform: translateY(-0.4rem);
        opacity: 1;
    }

    .getFoundCardImageWrap {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .getFoundCardImage {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        transition:
            transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.35s ease;
    }

    .getFoundCard.getFoundCardActive .getFoundCardImage {
        transform: scale(1.02);
        filter: none;
    }

    .getFoundCard:not(.getFoundCardActive) .getFoundCardImage {
        transform: scale(1.15);
        filter: brightness(0.78) saturate(0.9);
    }

    .getFoundCardImageWrap::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
            linear-gradient(
                to top,
                rgba(31, 9, 11, 0.88) 0%,
                rgba(55, 12, 18, 0.48) 30%,
                rgba(55, 12, 18, 0.08) 60%,
                transparent 100%
            );
        transition: opacity 0.35s ease;
    }

    .getFoundCard.getFoundCardActive .getFoundCardImageWrap::after {
        opacity: 0.5;
    }

    .getFoundCard:not(.getFoundCardActive) .getFoundCardImageWrap::after {
        opacity: 0.95;
    }

    .getFoundCardBadge {
        position: absolute;
        left: 50%;
        bottom: 2rem;
        width: 4.8rem;
        height: 4.8rem;
        transform: translateX(-50%);
        z-index: 8;
        transition:
            left 0.45s ease,
            bottom 0.45s ease,
            transform 0.45s ease,
            width 0.45s ease,
            height 0.45s ease;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge {
        left: 2.2rem;
        bottom: 2.2rem;
        width: 5.6rem;
        height: 5.6rem;
        transform: none;
    }

    .getFoundCardBadge span {
        font-size: 2rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge span {
        font-size: 2.3rem;
    }

    .getFoundCardBody {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 0;
        padding: 3rem 3rem 2.6rem 9.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        background:
            linear-gradient(
                to top,
                rgba(255, 251, 247, 0.98) 0%,
                rgba(255, 251, 247, 0.96) 76%,
                rgba(255, 251, 247, 0.88) 100%
            );
        opacity: 0;
        visibility: hidden;
        transform: translateY(2rem);
        pointer-events: none;
        transition:
            opacity 0.32s ease 0.12s,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
            visibility 0s linear 0.45s;
        z-index: 6;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBody {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition:
            opacity 0.3s ease 0.14s,
            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
            visibility 0s linear 0s;
    }

    .getFoundCardBody h3 {
        font-size: 2.5rem;
    }

    .getFoundCardBody > p {
        width: 100%;
        max-width: 42rem;
        font-size: 1.2rem;
    }

    .getFoundCardList {
        margin-top: 1.6rem;
        gap: 0.8rem;
    }

    .getFoundCardList li {
        font-size: 1rem;
    }

    .getFoundCardLink {
        margin-top: 1.8rem;
        padding-top: 0;
    }

    .getFoundBackgroundOrbOne {
        top: -12rem;
        left: -28rem;
        width: 72rem;
        height: 72rem;
    }

    .getFoundBackgroundOrbTwo {
        top: 30%;
        left: 22%;
        width: 64rem;
        height: 64rem;
    }

    .getFoundBackgroundOrbThree {
        right: -30rem;
        bottom: -18rem;
        width: 78rem;
        height: 78rem;
    }

    .getFoundBackgroundLineOne {
        top: 20rem;
        left: -30%;
        width: 86rem;
        height: 40rem;
    }

    .getFoundBackgroundLineTwo {
        right: -38%;
        bottom: 8rem;
        width: 82rem;
        height: 36rem;
    }
}

@media (max-width: 850px) and (orientation: portrait) {
    .getFoundContainer {
        padding: 4.8rem 0;
        gap: 3.8rem;
    }

    .getFoundIntro {
        width: calc(100% - 3rem);
        max-width: 64rem;
    }

    .getFoundEyebrow {
        min-height: 4.5rem;
        padding: 0.7rem 1.6rem;
        font-size: 1.15rem;
    }

    .getFoundEyebrowIcon {
        width: 2.4rem;
        height: 2.4rem;
        flex-basis: 2.4rem;
        font-size: 1.9rem;
    }

    .getFoundHeading {
        margin-top: 3rem;
    }

    .getFoundHeadingScript {
        font-size: 5rem;
    }

    .getFoundHeadingMain {
        margin-top: 0.7rem;
        font-size: 7rem;
    }

    .getFoundAccentLine {
        margin-top: 3rem;
    }

    .getFoundIntroText {
        max-width: 52rem;
        margin-top: 2.5rem;
        font-size: 1.5rem;
    }

    .getFoundButton {
        width: 28rem;
        min-height: 5.8rem;
        margin-top: 2.8rem;
    }

    .getFoundTrust {
        margin-top: 2.1rem;
    }

    .getFoundCards {
        width: calc(100% - 3rem);
        height: 45rem;
        gap: 1rem;
    }

    .getFoundCard {
        flex-basis: 6rem;
        width: 6rem;
        min-width: 6rem;
    }

    .getFoundCardBadge {
        width: 4.3rem;
        height: 4.3rem;
        bottom: 1.6rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge {
        left: 1.8rem;
        bottom: 1.8rem;
        width: 5.2rem;
        height: 5.2rem;
    }

    .getFoundCardBody {
        padding: 2.6rem 2.2rem 2.3rem 8.5rem;
    }

    .getFoundCardBody h3 {
        font-size: 2.25rem;
    }

    .getFoundCardBody > p {
        font-size: 1.08rem;
    }

    .getFoundCardList {
        margin-top: 1.35rem;
        gap: 0.7rem;
    }

    .getFoundCardList li {
        font-size: 0.92rem;
    }

    .getFoundCardLink {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 700px) {
    .getFoundContainer {
        padding: 4.5rem 0;
        gap: 3.5rem;
    }

    .getFoundIntro {
        width: calc(100% - 3rem);
    }

    .getFoundHeadingScript {
        font-size: 4.7rem;
    }

    .getFoundHeadingMain {
        font-size: 6.4rem;
    }

    .getFoundIntroText {
        max-width: 45rem;
        font-size: 1.4rem;
    }

    .getFoundCards {
        width: calc(100% - 2.5rem);
        height: 42rem;
        gap: 0.9rem;
    }

    .getFoundCard {
        flex-basis: 5.2rem;
        width: 5.2rem;
        min-width: 5.2rem;
        border-radius: 1.5rem;
    }

    .getFoundCardBadge {
        width: 4rem;
        height: 4rem;
        bottom: 1.5rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge {
        left: 1.7rem;
        bottom: 1.7rem;
        width: 5rem;
        height: 5rem;
    }

    .getFoundCardBadge span {
        font-size: 1.7rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge span {
        font-size: 2rem;
    }

    .getFoundCardBody {
        padding: 2.4rem 2rem 2.2rem 8rem;
    }

    .getFoundCardBody h3 {
        font-size: 2.15rem;
    }

    .getFoundCardBody > p {
        font-size: 1.05rem;
        line-height: 1.5;
    }

    .getFoundCardList {
        margin-top: 1.3rem;
        gap: 0.7rem;
    }

    .getFoundCardList li {
        font-size: 0.9rem;
    }

    .getFoundCardLink {
        margin-top: 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 550px) {
    .getFoundContainer {
        padding: 4rem 0;
        gap: 3.2rem;
    }

    .getFoundIntro {
        width: calc(100% - 2.5rem);
    }

    .getFoundEyebrow {
        min-height: 4rem;
        padding: 0.6rem 1.35rem;
        font-size: 1rem;
    }

    .getFoundHeading {
        margin-top: 2.6rem;
    }

    .getFoundHeadingScript {
        font-size: 4.2rem;
    }

    .getFoundHeadingMain {
        font-size: 5.8rem;
    }

    .getFoundAccentLine {
        width: 6rem;
        margin-top: 2.6rem;
    }

    .getFoundIntroText {
        max-width: 38rem;
        margin-top: 2.2rem;
        font-size: 1.3rem;
        line-height: 1.65;
    }

    .getFoundButton {
        width: min(30rem, 100%);
        min-height: 5.5rem;
        margin-top: 2.5rem;
        padding: 1.2rem 2rem;
        font-size: 1.25rem;
    }

    .getFoundTrust {
        margin-top: 1.9rem;
        gap: 1rem;
        font-size: 1rem;
    }

    .getFoundCards {
        width: calc(100% - 2rem);
        height: 40rem;
        gap: 0.75rem;
    }

    .getFoundCard {
        flex-basis: 4.7rem;
        width: 4.7rem;
        min-width: 4.7rem;
        border-radius: 1.4rem;
    }

    .getFoundCardBadge {
        width: 3.7rem;
        height: 3.7rem;
        bottom: 1.3rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge {
        left: 1.5rem;
        bottom: 1.5rem;
        width: 4.7rem;
        height: 4.7rem;
    }

    .getFoundCardBadge span {
        font-size: 1.55rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge span {
        font-size: 1.85rem;
    }

    .getFoundCardBody {
        padding: 2.1rem 1.7rem 1.9rem 7.2rem;
    }

    .getFoundCardBody h3 {
        font-size: 2rem;
    }

    .getFoundCardBody > p {
        font-size: 0.98rem;
    }

    .getFoundCardList {
        margin-top: 1.15rem;
        gap: 0.6rem;
    }

    .getFoundCardList li {
        font-size: 0.84rem;
    }

    .getFoundCardLink {
        margin-top: 1.35rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 400px) {
    .getFoundContainer {
        padding: 3.7rem 0;
        gap: 3rem;
    }

    .getFoundIntro {
        width: calc(100% - 2rem);
    }

    .getFoundHeadingScript {
        font-size: 3.9rem;
    }

    .getFoundHeadingMain {
        font-size: 5.2rem;
    }

    .getFoundIntroText {
        max-width: 34rem;
        font-size: 1.2rem;
    }

    .getFoundCards {
        width: calc(100% - 1.5rem);
        height: 38rem;
        gap: 0.6rem;
    }

    .getFoundCard {
        flex-basis: 4.1rem;
        width: 4.1rem;
        min-width: 4.1rem;
        border-radius: 1.2rem;
    }

    .getFoundCardBadge {
        width: 3.3rem;
        height: 3.3rem;
        bottom: 1rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge {
        left: 1.2rem;
        bottom: 1.2rem;
        width: 4.2rem;
        height: 4.2rem;
    }

    .getFoundCardBadge span {
        font-size: 1.4rem;
    }

    .getFoundCard.getFoundCardActive .getFoundCardBadge span {
        font-size: 1.7rem;
    }

    .getFoundCardBody {
        padding: 1.8rem 1.3rem 1.6rem 6.3rem;
    }

    .getFoundCardBody h3 {
        font-size: 1.8rem;
    }

    .getFoundCardBody > p {
        font-size: 0.9rem;
        line-height: 1.45;
    }

    .getFoundCardList {
        margin-top: 1rem;
        gap: 0.5rem;
    }

    .getFoundCardList li {
        grid-template-columns: 1.25rem minmax(0, 1fr);
        gap: 0.55rem;
        font-size: 0.78rem;
    }

    .getFoundCheck {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.68rem;
    }

    .getFoundCardLink {
        margin-top: 1.2rem;
        font-size: 0.88rem;
    }
}

@media (max-width: 1600px) {
    .contactContent {
        width: min(152rem, calc(100% - 6rem));
        grid-template-columns: 46% 54%;
    }

    .contactLeft {
        max-width: 65rem;
    }

    .contactHeadingMain {
        font-size: 8.8rem;
    }

    .contactHeadingAccent {
        font-size: 8.2rem;
    }

    .contactIntroText {
        font-size: 1.95rem;
    }

    .contactBenefits {
        max-width: 61rem;
    }

    .contactBenefit {
        padding: 0 2.2rem;
    }

    .contactBenefitIcon {
        width: 7rem;
        height: 7rem;
        font-size: 3.3rem;
    }

    .contactBenefit h3 {
        font-size: 1.45rem;
    }

    .contactBenefit p {
        font-size: 1.25rem;
    }

    .contactTrust {
        max-width: 61rem;
    }

    .contactClipboard {
        width: 55rem;
        height: 72rem;
        transform:
            translate3d(1rem, 0, 0)
            rotateX(2deg)
            rotateY(-12deg)
            rotateZ(4deg);
    }

    .contactPaperInner {
        padding: 4.3rem 4.4rem 3.8rem;
    }

    .contactFormHeading h3 {
        font-size: 3.9rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.9rem;
    }

    .contactFormField textarea {
        min-height: 12.5rem;
    }

    .contactClipboardClip {
        width: 29rem !important;
    }
}

@media (max-width: 1400px) {
    .contactSection {
        min-height: 86rem;
    }

    .contactContent {
        width: min(132rem, calc(100% - 5rem));
        min-height: 86rem;
        grid-template-columns: 45% 55%;
    }

    .contactFormSide {
        min-height: 86rem;
    }

    .contactLeft {
        max-width: 57rem;
        padding-left: 1rem;
    }

    .contactEyebrow {
        min-height: 4.7rem;
        gap: 1.1rem;
        padding: 0.6rem 1.8rem 0.6rem 0.7rem;
        font-size: 1.15rem;
    }

    .contactEyebrowIcon {
        width: 3.3rem;
        height: 3.3rem;
        flex-basis: 3.3rem;
    }

    .contactHeading {
        margin-top: 4rem;
    }

    .contactHeadingMain {
        font-size: 7.8rem;
    }

    .contactHeadingAccent {
        margin-top: 1rem;
        font-size: 7.3rem;
    }

    .contactIntroRow {
        margin-top: 4.3rem;
        gap: 2.2rem;
    }

    .contactIntroText {
        max-width: 43rem;
        font-size: 1.75rem;
    }

    .contactBenefits {
        max-width: 55rem;
        margin-top: 4.8rem;
    }

    .contactBenefit {
        padding: 0 1.8rem;
    }

    .contactBenefit:not(:last-child)::after {
        top: 3.2rem;
        height: 11.5rem;
    }

    .contactBenefitIcon {
        width: 6.3rem;
        height: 6.3rem;
        font-size: 3rem;
    }

    .contactBenefit h3 {
        margin-top: 1.8rem;
        font-size: 1.3rem;
    }

    .contactBenefit p {
        margin-top: 0.8rem;
        font-size: 1.15rem;
    }

    .contactTrust {
        max-width: 55rem;
        min-height: 11rem;
        margin-top: 4.5rem;
        padding: 1.8rem 2rem;
    }

    .contactTrustAvatar {
        width: 4.8rem;
        height: 4.8rem;
        flex-basis: 4.8rem;
    }

    .contactTrustCount {
        width: 5.4rem;
        height: 5.4rem;
        flex-basis: 5.4rem;
    }

    .contactTrustDivider {
        margin: 0 1.8rem;
    }

    .contactTrustStars {
        font-size: 1.7rem;
        gap: 0.4rem;
    }

    .contactTrustCopy p {
        font-size: 1.1rem;
    }

    .contactClipboard {
        width: 50rem;
        height: 66rem;
        transform:
            translate3d(1rem, 0, 0)
            rotateX(2deg)
            rotateY(-10deg)
            rotateZ(4deg);
    }

    .contactPaper {
        top: 4.7rem;
        left: 3.5rem;
        right: 3.5rem;
        bottom: 3.6rem;
    }

    .contactPaperInner {
        padding: 3.8rem 3.8rem 3.3rem;
    }

    .contactFormHeading {
        margin-bottom: 1.3rem;
    }

    .contactFormHeading h3 {
        font-size: 3.6rem;
    }

    .contactFormHeadingLine {
        width: 7rem;
        margin-top: 0.9rem;
    }

    .contactFormRow {
        grid-template-columns: 3.3rem minmax(0, 1fr);
        gap: 1.2rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.6rem;
    }

    .contactFormIcon {
        height: 4.7rem;
        font-size: 2.1rem;
    }

    .contactFormRowMessage .contactFormIcon {
        padding-top: 2.2rem;
    }

    .contactFormField label {
        margin-bottom: 0.55rem;
        font-size: 1.12rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 1.16rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 4.7rem;
    }

    .contactFormField textarea {
        min-height: 11.2rem;
    }

    .contactFormButton {
        width: calc(100% - 4.5rem);
        min-height: 5.1rem;
        margin-top: 2.2rem;
        margin-left: 4.5rem;
        font-size: 1.3rem;
    }

    .contactClipboardClip {
        top: -5.2rem;
        width: 27rem !important;
    }

    .contactClipShadow {
        width: 27rem;
    }

    .contactCustomSelectMenu button {
        padding: 0.65rem 1rem;
        font-size: 1.1rem;
    }
}

@media (max-width: 650px) {
.heroHeaderAccent {
display: inline-block;
width: fit-content;
background: linear-gradient(
270deg,
rgba(247, 243, 237, 0.98) 0%,
rgba(247, 243, 237, 0.94) 35%,
rgba(247, 243, 237, 0.78) 60%,
rgba(247, 243, 237, 0.35) 82%,
transparent 100%
);
}
}

@media (max-width: 1200px) {
    .contactSection {
        min-height: auto;
    }

    .contactContent {
        width: min(110rem, calc(100% - 4rem));
        min-height: auto;
        padding: 8rem 0 10rem;
        grid-template-columns: 42% 58%;
        gap: 1rem;
    }

    .contactFormSide {
        min-height: 75rem;
    }

    .contactLeft {
        max-width: 48rem;
        padding-left: 0;
    }

    .contactHeadingMain {
        font-size: 6.6rem;
    }

    .contactHeadingAccent {
        font-size: 6.2rem;
    }

    .contactIntroRow {
        margin-top: 3.5rem;
    }

    .contactIntroText {
        font-size: 1.55rem;
        line-height: 1.55;
    }

    .contactBenefits {
        max-width: 46rem;
        margin-top: 4rem;
    }

    .contactBenefit {
        padding: 0 1.3rem;
    }

    .contactBenefitIcon {
        width: 5.7rem;
        height: 5.7rem;
        font-size: 2.6rem;
    }

    .contactBenefit h3 {
        font-size: 1.2rem;
    }

    .contactBenefit p {
        font-size: 1rem;
        line-height: 1.55;
    }

    .contactTrust {
        max-width: 46rem;
        margin-top: 4rem;
        padding: 1.5rem;
    }

    .contactTrustAvatar {
        width: 4rem;
        height: 4rem;
        flex-basis: 4rem;
    }

    .contactTrustCount {
        width: 4.7rem;
        height: 4.7rem;
        flex-basis: 4.7rem;
    }

    .contactTrustCount span {
        font-size: 1.3rem;
    }

    .contactTrustDivider {
        height: 5rem;
        margin: 0 1.4rem;
    }

    .contactTrustStars {
        font-size: 1.45rem;
    }

    .contactTrustCopy p {
        margin-top: 0.7rem;
        font-size: 0.95rem;
    }

    .contactClipboard {
        width: 46rem;
        height: 61rem;
        transform:
            translate3d(0, 0, 0)
            rotateX(2deg)
            rotateY(-8deg)
            rotateZ(3deg);
    }

    .contactPaper {
        top: 4.3rem;
        left: 3.2rem;
        right: 3.2rem;
        bottom: 3.2rem;
    }

    .contactPaperInner {
        padding: 3.4rem 3.4rem 3rem;
    }

    .contactFormHeading h3 {
        font-size: 3.3rem;
    }

    .contactFormRow {
        grid-template-columns: 3rem minmax(0, 1fr);
        gap: 1rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.3rem;
    }

    .contactFormIcon {
        height: 4.2rem;
        font-size: 1.9rem;
    }

    .contactFormField label {
        font-size: 1rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 4.2rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 1.05rem;
    }

    .contactFormField textarea {
        min-height: 9.8rem;
        padding: 1.1rem 1.2rem;
    }

    .contactFormButton {
        width: calc(100% - 4rem);
        min-height: 4.6rem;
        margin-top: 1.8rem;
        margin-left: 4rem;
        font-size: 1.15rem;
    }

    .contactClipboardClip {
        top: -4.8rem;
        width: 24rem !important;
    }

    .contactCustomSelectMenu {
        top: calc(100% + 0.5rem);
        padding: 0.5rem;
    }

    .contactCustomSelectMenu button {
        min-height: 1rem;
        padding: 0.5rem 0.9rem;
        font-size: 1rem;
    }
}

@media (max-width: 1050px) {
    .contactSection {
        min-height: auto;
    }

    .contactContent {
        width: min(88rem, calc(100% - 4rem));
        padding: 8rem 0 12rem;
        grid-template-columns: 1fr;
        gap: 7rem;
    }

    .contactLeft {
        width: 100%;
        max-width: 72rem;
        margin: 0 auto;
        align-items: center;
        text-align: center;
    }

    .contactHeading {
        align-items: center;
    }

    .contactHeadingMain {
        font-size: 8.2rem;
    }

    .contactHeadingAccent {
        font-size: 7.6rem;
    }

    .contactIntroRow {
        justify-content: center;
    }

    .contactIntroText {
        max-width: 52rem;
        font-size: 1.8rem;
        text-align: left;
    }

    .contactBenefits {
        max-width: 68rem;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .contactBenefit {
        padding: 0 2.7rem;
    }

    .contactBenefit:first-child {
        padding-left: 0;
    }

    .contactBenefit:last-child {
        padding-right: 0;
    }

    .contactBenefitIcon {
        width: 7rem;
        height: 7rem;
        font-size: 3.2rem;
    }

    .contactBenefit h3 {
        font-size: 1.4rem;
    }

    .contactBenefit p {
        font-size: 1.2rem;
    }

    .contactTrust {
        max-width: 65rem;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
    }

    .contactTrustAvatar {
        width: 5rem;
        height: 5rem;
        flex-basis: 5rem;
    }

    .contactTrustCount {
        width: 5.7rem;
        height: 5.7rem;
        flex-basis: 5.7rem;
    }

    .contactTrustCount span {
        font-size: 1.5rem;
    }

    .contactTrustStars {
        font-size: 1.8rem;
    }

    .contactTrustCopy p {
        font-size: 1.1rem;
    }

    .contactFormSide {
        min-height: 76rem;
    }

    .contactClipboard {
        width: 55rem;
        height: 72rem;
        transform:
            translate3d(0, 0, 0)
            rotateX(1deg)
            rotateY(-6deg)
            rotateZ(3deg);
    }

    .contactPaper {
        top: 4.8rem;
        left: 3.8rem;
        right: 3.8rem;
        bottom: 3.8rem;
    }

    .contactPaperInner {
        padding: 4rem 4rem 3.5rem;
    }

    .contactFormHeading h3 {
        font-size: 3.8rem;
    }

    .contactFormRow {
        grid-template-columns: 3.6rem minmax(0, 1fr);
        gap: 1.2rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.7rem;
    }

    .contactFormIcon {
        height: 4.8rem;
        font-size: 2.2rem;
    }

    .contactFormField label {
        font-size: 1.15rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 4.8rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 1.15rem;
    }

    .contactFormField textarea {
        min-height: 11rem;
    }

    .contactFormButton {
        width: calc(100% - 4.8rem);
        min-height: 5.2rem;
        margin-top: 2rem;
        margin-left: 4.8rem;
        font-size: 1.3rem;
    }

    .contactClipboardClip {
        width: 28rem !important;
    }

    .contactBackgroundHaloOne {
        left: 5%;
        bottom: 10rem;
    }

    .contactBackgroundHaloTwo {
        right: -45rem;
        top: 48%;
    }

    .contactBackgroundGlowTwo {
        left: 5%;
        bottom: -30rem;
    }
}

@media (max-width: 850px) {
    .contactContent {
        width: min(72rem, calc(100% - 3rem));
        padding: 7rem 0 10rem;
        gap: 6rem;
    }

    .contactLeft {
        max-width: 62rem;
    }

    .contactEyebrow {
        font-size: 1.1rem;
    }

    .contactHeading {
        margin-top: 3.8rem;
    }

    .contactHeadingMain {
        font-size: 7rem;
    }

    .contactHeadingAccent {
        font-size: 6.6rem;
    }

    .contactIntroRow {
        margin-top: 3.7rem;
    }

    .contactIntroText {
        font-size: 1.6rem;
    }

    .contactBenefits {
        max-width: 58rem;
    }

    .contactBenefit {
        padding: 0 1.9rem;
    }

    .contactBenefitIcon {
        width: 6.4rem;
        height: 6.4rem;
        font-size: 3rem;
    }

    .contactBenefit h3 {
        font-size: 1.25rem;
    }

    .contactBenefit p {
        font-size: 1.08rem;
    }

    .contactTrust {
        max-width: 58rem;
    }

    .contactFormSide {
        min-height: 68rem;
    }

    .contactClipboard {
        width: 49rem;
        height: 65rem;
        transform:
            translate3d(0, 0, 0)
            rotateX(1deg)
            rotateY(-4deg)
            rotateZ(2.5deg);
    }

    .contactPaper {
        top: 4.4rem;
        left: 3.4rem;
        right: 3.4rem;
        bottom: 3.4rem;
    }

    .contactPaperInner {
        padding: 3.5rem 3.4rem 3rem;
    }

    .contactFormHeading h3 {
        font-size: 3.4rem;
    }

    .contactFormRow {
        grid-template-columns: 3.2rem minmax(0, 1fr);
        gap: 1rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.45rem;
    }

    .contactFormIcon {
        height: 4.4rem;
        font-size: 2rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 4.4rem;
    }

    .contactFormField textarea {
        min-height: 10rem;
    }

    .contactFormButton {
        width: calc(100% - 4.2rem);
        margin-left: 4.2rem;
    }

    .contactClipboardClip {
        top: -4.7rem;
        width: 25rem !important;
    }

    .contactBackgroundGlowOne {
        width: 60rem;
        height: 60rem;
        left: -25rem;
    }

    .contactBackgroundGlowTwo {
        width: 75rem;
        height: 75rem;
    }

    .contactBackgroundGlowThree {
        width: 60rem;
        height: 60rem;
        right: -30rem;
    }

    .contactBackgroundHaloOne {
        width: 90rem;
        height: 40rem;
        left: -5rem;
    }
}

@media (max-width: 650px) {
    .contactContent {
        width: calc(100% - 2.4rem);
        padding: 6rem 0 8rem;
        gap: 5rem;
    }

    .contactLeft {
        max-width: 100%;
    }

    .contactEyebrow {
        min-height: 4.3rem;
        gap: 0.9rem;
        padding: 0.5rem 1.5rem 0.5rem 0.6rem;
        font-size: 0.95rem;
        letter-spacing: 0.11em;
    }

    .contactEyebrowIcon {
        width: 3rem;
        height: 3rem;
        flex-basis: 3rem;
        font-size: 1.3rem;
    }

    .contactHeadingMain {
        font-size: clamp(5.4rem, 16vw, 7rem);
    }

    .contactHeadingAccent {
        font-size: clamp(5rem, 15vw, 6.5rem);
    }

    .contactIntroRow {
        width: 100%;
        max-width: 45rem;
        margin-top: 3.3rem;
        gap: 1.8rem;
    }

    .contactIntroLine {
        min-height: 6rem;
    }

    .contactIntroText {
        max-width: none;
        font-size: 1.45rem;
        line-height: 1.6;
    }

    .contactBenefits {
        width: 100%;
        max-width: 45rem;
        margin-top: 4rem;
        grid-template-columns: 1fr;
        gap: 2.2rem;
        text-align: left;
    }

    .contactBenefit,
    .contactBenefit:first-child,
    .contactBenefit:last-child {
        min-height: 7rem;
        padding: 0 0 0 8.5rem;
    }

    .contactBenefit:not(:last-child)::after {
        top: auto;
        right: 0;
        bottom: -1.1rem;
        left: 8.5rem;
        width: auto;
        height: 0.1rem;
        background:
            linear-gradient(
                90deg,
                rgba(255, 126, 112, 0.4),
                transparent
            );
    }

    .contactBenefitIcon {
        position: absolute;
        top: 0;
        left: 0;
        width: 6rem;
        height: 6rem;
        font-size: 2.7rem;
    }

    .contactBenefit h3 {
        margin-top: 0;
        padding-top: 0.4rem;
        font-size: 1.35rem;
    }

    .contactBenefit p {
        margin-top: 0.65rem;
        font-size: 1.15rem;
    }

    .contactTrust {
        width: 100%;
        max-width: 45rem;
        min-height: 0;
        margin-top: 4rem;
        padding: 2rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.7rem;
    }

    .contactTrustPeople {
        width: 100%;
    }

    .contactTrustAvatar {
        width: 4.8rem;
        height: 4.8rem;
        flex-basis: 4.8rem;
    }

    .contactTrustCount {
        width: 5.5rem;
        height: 5.5rem;
        flex-basis: 5.5rem;
    }

    .contactTrustDivider {
        width: 100%;
        height: 0.1rem;
        margin: 0;
        flex-basis: auto;
        background:
            linear-gradient(
                90deg,
                rgba(255, 128, 112, 0.46),
                transparent
            );
    }

    .contactTrustStars {
        font-size: 1.8rem;
    }

    .contactTrustCopy p {
        max-width: 34rem;
        font-size: 1.1rem;
    }

    .contactFormSide {
        min-height: 60rem;
    }

    .contactClipboard {
        width: min(44rem, 90vw);
        height: 58rem;
        transform:
            translate3d(0, 0, 0)
            rotateX(0deg)
            rotateY(-2deg)
            rotateZ(2deg);
    }

    .contactClipboardBoard {
        border-radius: 2.4rem;
    }

    .contactPaper {
        top: 3.9rem;
        left: 2.7rem;
        right: 2.7rem;
        bottom: 2.8rem;
        border-radius: 1.5rem;
    }

    .contactPaperInner {
        padding: 3rem 2.8rem 2.5rem;
    }

    .contactFormHeading {
        margin-bottom: 1.1rem;
    }

    .contactFormHeading h3 {
        font-size: 3rem;
    }

    .contactFormHeadingLine {
        width: 6rem;
        height: 0.2rem;
        margin-top: 0.7rem;
    }

    .contactFormRow {
        grid-template-columns: 2.8rem minmax(0, 1fr);
        gap: 0.8rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 1.1rem;
    }

    .contactFormIcon {
        height: 4rem;
        font-size: 1.8rem;
    }

    .contactFormRowMessage .contactFormIcon {
        padding-top: 2rem;
    }

    .contactFormField label {
        margin-bottom: 0.45rem;
        font-size: 0.95rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 4rem;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 0.95rem;
    }

    .contactFormField textarea {
        min-height: 8.4rem;
        padding: 1rem 1.1rem;
    }

    .contactFormButton {
        width: calc(100% - 3.6rem);
        min-height: 4.4rem;
        margin-top: 1.5rem;
        margin-left: 3.6rem;
        padding: 1rem 1.5rem;
        font-size: 1.1rem;
    }

    .contactClipboardClip {
        top: -4.2rem;
        width: 21rem !important;
    }

    .contactClipShadow {
        top: 6.4rem;
        width: 22rem;
    }

    .contactCustomSelectMenu {
        top: calc(100% + 0.4rem);
        padding: 0.4rem;
        border-radius: 0.8rem;
    }

    .contactCustomSelectMenu button {
        min-height: 0;
        padding: 0.5rem 0.8rem;
        border-radius: 0.5rem;
        font-size: 0.92rem;
    }

    .contactBackgroundHaloOne {
        width: 70rem;
        height: 30rem;
        left: -15rem;
        bottom: 8rem;
    }

    .contactBackgroundHaloTwo {
        width: 60rem;
        height: 28rem;
        right: -35rem;
    }

    .contactBackgroundBeamOne {
        width: 60rem;
        left: 5%;
    }

    .contactBackgroundBeamTwo {
        width: 50rem;
        left: 15%;
    }
}

@media (max-width: 480px) {
    .contactContent {
        width: calc(100% - 2rem);
        padding: 5rem 0 7rem;
    }

    .contactHeading {
        margin-top: 3rem;
    }

    .contactHeadingMain {
        font-size: clamp(4.8rem, 16vw, 6rem);
    }

    .contactHeadingAccent {
        margin-top: 0.7rem;
        font-size: clamp(4.5rem, 15vw, 5.7rem);
    }

    .contactIntroText {
        font-size: 1.3rem;
    }

    .contactBenefits {
        max-width: 38rem;
    }

    .contactBenefit,
    .contactBenefit:first-child,
    .contactBenefit:last-child {
        padding-left: 7.2rem;
    }

    .contactBenefit:not(:last-child)::after {
        left: 7.2rem;
    }

    .contactBenefitIcon {
        width: 5.3rem;
        height: 5.3rem;
        font-size: 2.4rem;
    }

    .contactBenefit h3 {
        font-size: 1.2rem;
    }

    .contactBenefit p {
        font-size: 1.05rem;
    }

    .contactTrust {
        max-width: 38rem;
        padding: 1.7rem;
    }

    .contactTrustAvatar {
        width: 4.2rem;
        height: 4.2rem;
        flex-basis: 4.2rem;
    }

    .contactTrustAvatar + .contactTrustAvatar {
        margin-left: -1.1rem;
    }

    .contactTrustCount {
        width: 5rem;
        height: 5rem;
        flex-basis: 5rem;
    }

    .contactTrustStars {
        font-size: 1.55rem;
    }

    .contactFormSide {
        min-height: 54rem;
    }

    .contactClipboard {
        width: min(39rem, 92vw);
        height: 52rem;
        transform:
            rotateX(0deg)
            rotateY(0deg)
            rotateZ(1.4deg);
    }

    .contactPaper {
        top: 3.5rem;
        left: 2.2rem;
        right: 2.2rem;
        bottom: 2.4rem;
    }

    .contactPaperInner {
        padding: 2.6rem 2.2rem 2rem;
    }

    .contactFormHeading h3 {
        font-size: 2.7rem;
    }

    .contactFormRow {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 0.7rem;
    }

    .contactFormIcon {
        height: 3.7rem;
        font-size: 1.6rem;
    }

    .contactFormRow + .contactFormRow {
        margin-top: 0.9rem;
    }

    .contactFormField label {
        font-size: 0.88rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 3.7rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 0.88rem;
    }

    .contactFormField textarea {
        min-height: 7.3rem;
    }

    .contactFormButton {
        width: calc(100% - 3.2rem);
        min-height: 4rem;
        margin-top: 1.2rem;
        margin-left: 3.2rem;
        font-size: 1rem;
    }

    .contactClipboardClip {
        top: -3.7rem;
        width: 18.5rem !important;
    }

    .contactClipShadow {
        top: 5.5rem;
        width: 18rem;
    }

    .contactCustomSelectMenu button {
        padding: 0.42rem 0.7rem;
        font-size: 0.84rem;
    }

    .contactBackgroundDots {
        width: 24rem;
        height: 24rem;
        opacity: 0.25;
    }
}

@media (max-width: 380px) {
    .contactContent {
        width: calc(100% - 1.6rem);
    }

    .contactEyebrow {
        font-size: 0.82rem;
    }

    .contactHeadingMain {
        font-size: 4.5rem;
    }

    .contactHeadingAccent {
        font-size: 4.3rem;
    }

    .contactIntroText {
        font-size: 1.2rem;
    }

    .contactTrust {
        padding: 1.4rem;
    }

    .contactTrustAvatar {
        width: 3.8rem;
        height: 3.8rem;
        flex-basis: 3.8rem;
    }

    .contactTrustCount {
        width: 4.6rem;
        height: 4.6rem;
        flex-basis: 4.6rem;
    }

    .contactFormSide {
        min-height: 50rem;
    }

    .contactClipboard {
        width: min(35rem, 94vw);
        height: 48rem;
    }

    .contactPaper {
        top: 3.2rem;
        left: 1.8rem;
        right: 1.8rem;
        bottom: 2rem;
    }

    .contactPaperInner {
        padding: 2.3rem 1.8rem 1.7rem;
    }

    .contactFormHeading h3 {
        font-size: 2.4rem;
    }

    .contactFormRow {
        grid-template-columns: 2.2rem minmax(0, 1fr);
        gap: 0.55rem;
    }

    .contactFormIcon {
        font-size: 1.45rem;
    }

    .contactFormField label {
        font-size: 0.82rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactCustomSelectTrigger {
        height: 3.4rem;
    }

    .contactFormField input,
    .contactFormField select,
    .contactFormField textarea,
    .contactCustomSelectTrigger {
        font-size: 0.8rem;
    }

    .contactFormField textarea {
        min-height: 6.6rem;
    }

    .contactFormButton {
        min-height: 3.7rem;
        font-size: 0.9rem;
    }

    .contactClipboardClip {
        top: -3.4rem;
        width: 17rem !important;
    }

    .contactCustomSelectMenu button {
        padding: 0.38rem 0.6rem;
        font-size: 0.78rem;
    }
}

@media (max-width: 1050px) {
    .testimonialSection {
        padding: 8rem 3rem 7rem;
    }

    .testimonialContainer {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .testimonialIntro {
        max-width: 55rem;
        margin: 0 auto;
        text-align: center;
    }

    .testimonialEyebrowLine {
        margin-left: auto;
        margin-right: auto;
    }

    .testimonialHeading {
        align-items: center;
    }

    .testimonialIntroText {
        margin-left: auto;
        margin-right: auto;
    }

    .testimonialScene {
        min-height: 55rem;
    }

    .testimonialStats {
        width: 100%;
        gap: 4rem;
    }
}

@media (max-width: 700px) {
    .testimonialSection {
        padding: 7rem 2rem 6rem;
    }

    .testimonialHeadingMain {
        font-size: 5rem;
    }

    .testimonialHeadingAccent {
        font-size: 5.7rem;
    }

    .testimonialScene {
        min-height: 48rem;
        perspective: 100rem;
    }

    .testimonialSlateStack {
        width: 100%;
        height: 42rem;
    }

    .testimonialSlate {
        width: min(31rem, 78vw);
        height: 38rem;
    }

    .testimonialSlateFront {
        transform:
            translate(-50%, -50%)
            translateX(-2rem)
            translateZ(8rem)
            rotateY(-8deg)
            rotateZ(0.8deg);
    }

    .testimonialSlateMiddle {
        transform:
            translate(-50%, -50%)
            translateX(10rem)
            translateZ(-4rem)
            rotateY(-3deg)
            scale(0.91);
    }

    .testimonialSlateBack {
        transform:
            translate(-50%, -50%)
            translateX(18rem)
            translateZ(-10rem)
            scale(0.84);
    }

    .testimonialSlateInner {
        padding: 3rem 2.5rem;
    }

    .testimonialQuote {
        font-size: 1.3rem;
    }

    .testimonialQuoteFeatured {
        font-size: 1.45rem;
    }

    .testimonialStamp {
        display: none;
    }

    .testimonialControls {
        right: 50%;
        bottom: -1rem;
        transform: translateX(50%);
    }

    .testimonialStats {
        flex-direction: column;
        gap: 2rem;
        border-top: 0;
    }

    .testimonialStatDivider {
        width: 12rem;
        height: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonialSlate,
    .testimonialArrow,
    .testimonialButton {
        transition: none;
    }
}

@media (max-width: 1200px) {
    .opportunitySection {
        padding: 1rem 3rem;
    }

    .opportunityContainer {
        grid-template-columns:
            minmax(28rem, 36rem)
            1fr;
        gap: 4rem;
    }

    .opportunityProjectCard {
        width: 43rem;
    }

    .opportunityClientCard {
        width: 16rem;
    }

    .opportunityMiniCard {
        min-width: 15rem;
    }
}

@media (max-width: 1200px) and (min-width: 951px) {
    .opportunityProjectCard {
        width: 34rem;
        height: 21rem;
    }

    .opportunityProjectContent {
        padding: 2rem 1.8rem;
    }

    .opportunityProjectStatus {
        margin-bottom: 1rem;
        padding: 0.5rem 1.1rem;
        font-size: 0.85rem;
    }

    .opportunityProjectTitle {
        font-size: 1.5rem;
    }

    .opportunityProjectDistance {
        margin-top: 0.6rem;
        font-size: 0.85rem;
    }

    .opportunityProjectDivider {
        margin: 1.2rem 0;
    }

    .opportunityProjectDetails {
        gap: 0.7rem;
    }

    .opportunityProjectDetails li {
        gap: 0.7rem;
        font-size: 0.78rem;
    }

    .opportunityProjectButton {
        padding: 0.8rem 1rem;
        font-size: 0.8rem;
    }

    .opportunityProjectVisual {
        padding: 1.5rem 1.2rem;
    }

    .opportunityBlueprint {
        width: 11rem;
        height: 14rem;
    }

    .opportunityClientCard {
        width: 12.5rem;
        min-height: 17rem;
        padding: 1.3rem 1.2rem;
    }

    .opportunityClientImageWrap {
        width: 8.5rem;
        height: 8.5rem;
    }

    .opportunityClientCheck {
        width: 3rem;
        height: 3rem;
        border-width: 0.35rem;
        font-size: 1rem;
    }

    .opportunityClientLabel {
        margin-top: 1.2rem;
        font-size: 1rem;
    }

    .opportunityClientLine {
        width: 3.5rem;
        margin-top: 1rem;
    }

    .opportunityConnection {
        width: 12rem;
    }
}

@media (max-width: 950px) {
    .opportunitySection {
        min-height: auto;
        padding: 1rem 3rem 8rem;
    }

    .opportunityContainer {
        grid-template-columns: 1fr;
        gap: 5rem;
    }

    .opportunityIntro {
        max-width: 55rem;
        margin: 0 auto;
        text-align: center;
    }

    .opportunityEyebrowLine {
        margin-left: auto;
        margin-right: auto;
    }

    .opportunityHeading {
        align-items: center;
    }

    .opportunityIntroText {
        margin-left: auto;
        margin-right: auto;
    }

    .opportunityMap {
        width: min(85rem, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 700px) {
    .opportunitySection {
        padding: 1rem 2rem 7rem;
    }

    .opportunityHeadingAccent {
        font-size: clamp(4.7rem, 13vw, 6rem);
    }

    .opportunityHeadingMain {
        font-size: clamp(4.4rem, 12vw, 5.5rem);
    }

    .opportunityIntroText {
        max-width: 40rem;
        font-size: 1.35rem;
    }

    .opportunityButton {
        min-width: min(26rem, 100%);
    }

    .opportunityMap {
        aspect-ratio: 4 / 5;
        border-radius: 2rem;
    }

    .opportunityMapImage {
        object-position: center;
    }

    .opportunityProjectCard {
        left: 50%;
        top: 57%;
        width: min(36rem, 88%);
        min-height: auto;
        grid-template-columns: 1fr;
        transform: translate(-50%, -50%);
    }

    .opportunityProjectCard:hover {
        transform: translate(-50%, -50%);
    }

    .opportunityProjectVisual {
        display: none;
    }

    .opportunityMiniCard {
        min-width: 13rem;
        padding: 1rem 1.1rem;
    }

    .opportunityMiniCardOne {
        left: 3%;
        top: 7%;
    }

    .opportunityMiniCardTwo {
        right: 3%;
        top: 12%;
    }

    .opportunityMiniCardThree {
        right: 4%;
        bottom: 5%;
    }

    .opportunityConnection {
        display: none;
    }

    .opportunityClientCard {
        display: none;
    }

    .opportunityPin {
        scale: 0.82;
    }
}

@media (max-width: 480px) {
    .opportunitySection {
        padding: 1rem 1.5rem 6rem;
    }

    .opportunityMap {
        aspect-ratio: 3 / 4;
    }

    .opportunityMiniCard {
        display: none;
    }

    .opportunityProjectCard {
        width: 90%;
    }

    .opportunityProjectContent {
        padding: 2.3rem 2rem;
    }

    .opportunityProjectTitle {
        font-size: 1.7rem;
    }

    .opportunityPin {
        scale: 0.72;
    }
}

@media (max-width: 1600px) {
    .opportunityIntro {
        transform: translateX(4rem);
    }

    .opportunityMap {
        margin-left: -12rem;
    }
}

@media (max-width: 1450px) {
    .opportunityIntro {
        transform: translateX(2rem);
    }

    .opportunityMap {
        margin-left: -8rem;
    }
}

@media (max-width: 1300px) {
    .opportunityIntro {
        transform: translateX(0);
    }

    .opportunityMap {
        margin-left: -4rem;
    }
}

@media (max-width: 950px) {
    .opportunityMap {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .opportunityPinPulse {
        animation: none;
    }

    .opportunityPin,
    .opportunityProjectCard,
    .opportunityMiniCard,
    .opportunityButton {
        transition: none;
    }
}

@media (max-width: 1100px) {
    .webDevSection {
        padding: 6rem 3rem;
    }

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

    .webDevContent {
        padding: 5rem 4rem;
    }

    .webDevText {
        font-size: 1.5rem;
    }

    .webDevMedia {
        min-height: 43rem;
        margin: 2.5rem 2.5rem 2.5rem 0;
    }

    .webDevOrbitOne {
        right: -10rem;
        width: 50rem;
        height: 27rem;
    }
}

@media (max-width: 850px) {
    .webDevPanel {
        grid-template-columns: 1fr;
    }

    .webDevContent {
        padding: 5rem 4rem 3rem;
        text-align: center;
        align-items: center;
    }

    .webDevEyebrowLine {
        margin-left: auto;
        margin-right: auto;
    }

    .webDevText {
        max-width: 55rem;
    }

    .webDevActions {
        justify-content: center;
    }

    .webDevMedia {
        width: calc(100% - 5rem);
        min-height: 42rem;
        margin: 0 auto 2.5rem;
    }

    .webDevOrbitOne {
        right: -10rem;
        top: auto;
        bottom: 2rem;
        width: 52rem;
        height: 26rem;
    }

    .webDevOrbitTwo {
        display: none;
    }
}

@media (max-width: 600px) {
    .webDevSection {
        padding: 5rem 1.5rem;
    }

    .webDevPanel {
        border-radius: 2rem;
    }

    .webDevContent {
        padding: 4rem 2.4rem 2.5rem;
    }

    .webDevHeadingMain {
        font-size: clamp(4.2rem, 13vw, 5.4rem);
    }

    .webDevHeadingAccent {
        font-size: clamp(4.8rem, 14vw, 6rem);
    }

    .webDevText {
        font-size: 1.35rem;
    }

    .webDevActions {
        width: 100%;
        flex-direction: column;
        gap: 1.2rem;
    }

    .webDevPrimaryButton,
    .webDevArrowButton {
        width: 100%;
        min-width: 0;
    }

    .webDevArrowButton {
        height: 5.5rem;
    }

    .webDevMedia {
        width: calc(100% - 3rem);
        min-height: 30rem;
        border-radius: 1.6rem;
    }

    .webDevPlayButton {
        width: 7rem;
        height: 7rem;
    }

    .webDevPlayIcon {
        border-top-width: 1.1rem;
        border-bottom-width: 1.1rem;
        border-left-width: 1.8rem;
    }

    .webDevOrbitOne {
        right: -17rem;
        width: 42rem;
        height: 22rem;
        opacity: 0.65;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webDevPrimaryButton,
    .webDevArrowButton,
    .webDevPlayButton {
        transition: none;
    }

    .webDevOrbitOne {
        animation: none;
    }
}

@media (max-width: 1200px) {
.folder {
padding:
7rem
3rem;
}

.folderContainer {
grid-template-columns:
minmax(0, 1.15fr)
minmax(32rem, 0.85fr);
gap: 4rem;
}
}

@media (max-width: 850px) {
.folder {
padding:
6rem
2rem;
}

.folderContainer {
min-height: auto;
grid-template-columns: 1fr;
gap: 6rem;
}
}

@media (max-width: 1000px) {
.folderContent {
max-width: 42rem;
}

.folderHeading {
margin-top: 3rem;
}

.folderHeadingScript {
margin-left: 0.5rem;
}

.folderHeadingLine {
margin-top: 3.5rem;
}

.folderDescription {
margin-top: 3rem;
}

.folderButton {
margin-top: 3.5rem;
}
}

@media (max-width: 750px) {
.folderContent {
max-width: 55rem;
margin:
0
auto;
align-items: center;
text-align: center;
}

.folderHeading {
align-items: center;
}

.folderHeadingScript {
margin-left: 0;
}

.folderDescription {
margin-left: auto;
margin-right: auto;
}

.folderButton {
justify-content: center;
}
}

@media (max-width: 1200px) {
.folderVisual {
min-height: 62rem;
transform:
scale(0.86);
transform-origin:
center center;
}
}

@media (max-width: 850px) {
.folderVisual {
min-height: 60rem;
transform:
scale(0.82);
transform-origin:
center top;
}
}

@media (max-width: 600px) {
.folderVisual {
min-height: 54rem;
transform:
scale(0.68);
transform-origin:
center top;
}
}

@media (max-width: 950px) {
.footerHero {
min-height: 78rem;
background-position:
center bottom;
}

.footerHeroContent {
width:
min(
70rem,
calc(100% - 6rem)
);
grid-template-columns:
1fr
1fr;
gap:
5rem
6rem;
padding-top: 10rem;
}

.footerHeroDivider {
display: none;
}

.footerHeroNewsletter {
grid-column:
1 / -1;
grid-row: 1;
width: 100%;
}

.footerHeroLinks {
grid-column: 1;
grid-row: 2;
}

.footerHeroContact {
grid-column: 2;
grid-row: 2;
}

.footerHeroNewsletter {
background-color: #a95738;
padding: 2.4rem;
border-radius: 26px;
}
}

@media (max-width: 650px) {
.footerHero {
min-height: auto;
background-position:
50% bottom;
}

.footerHeroOverlay {
background:
linear-gradient(
to bottom,
transparent 0%,
rgba(169, 87, 56, 0.55) 22%,
#a95738 40%,
#a95738 100%
);
}

.footerHeroContent {
width:
calc(100% - 4rem);
padding:
15rem
0
5rem;
grid-template-columns:
1fr;
gap: 4.5rem;
text-align: center;
}

.footerHeroNewsletter,
.footerHeroLinks,
.footerHeroContact {
grid-column: 1;
}

.footerHeroNewsletter {
grid-row: 1;
}

.footerHeroLinks {
grid-row: 2;
align-items: center;
}

.footerHeroContact {
grid-row: 3;
align-items: center;
text-align: center;
}

.footerHeroContactDetails {
margin-top: 2.5rem;
}

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

.footerHeroForm button {
min-height: 4.3rem;
}

.footerHeroBottom {
padding:
2rem;
flex-direction: column;
justify-content: center;
gap: 1.3rem;
text-align: center;
}
}

@media (min-width: 768px) and (max-width: 1024px) {
    .googleProfile {
        min-height: auto;
        height: auto;
        padding: 1rem 0;
    }
}

@media (max-width: 767px) {
    .testimonialControls {
        bottom: -5rem !important;
    }
}

@media (max-width: 767px) {

    .folderVisual {
        min-height: 58rem;
        margin-top: 5rem;
    }

    .folderCard.folderPositionBack {
        transform:
            translate(-50%, -50%)
            translateX(0)
            translateY(-22rem)
            translateZ(-4rem)
            rotateY(0deg)
            rotateZ(0deg);
    }
}

@media (max-width: 767px) {

    .folderContainer {
        grid-template-columns: 1fr;
        min-height: 0;
        gap: 0;
    }

    .folderVisual {
        min-height: 42rem;
        margin-top: 5rem;
    }

    .folderContent {
        margin-top: 0;
    }
}


@media (max-width: 650px) {
.contactFormSide {
min-height: 68rem;
}

.contactClipboard {
width: min(46rem, 96vw);
height: 66rem;
}

.contactPaper {
top: 4rem;
left: 2.4rem;
right: 2.4rem;
bottom: 2.8rem;
}

.contactPaperInner {
padding: 3.4rem 2.8rem 2.8rem;
}

.contactFormHeading {
margin-bottom: 1.8rem;
}

.contactFormHeading h3 {
font-size: 3.4rem;
}

.contactFormRow {
grid-template-columns: 3.2rem minmax(0, 1fr);
gap: 1rem;
}

.contactFormRow + .contactFormRow {
margin-top: 1.5rem;
}

.contactFormIcon {
height: 4.8rem;
font-size: 2rem;
}

.contactFormField label {
margin-bottom: 0.6rem;
font-size: 1.1rem;
}

.contactFormField input,
.contactFormField select,
.contactCustomSelectTrigger {
height: 4.8rem;
padding-left: 1.3rem;
padding-right: 1.3rem;
}

.contactFormField input,
.contactFormField select,
.contactFormField textarea,
.contactCustomSelectTrigger {
font-size: 1.1rem;
}

.contactFormField textarea {
min-height: 10rem;
padding: 1.2rem 1.3rem;
}

.contactFormButton {
width: calc(100% - 4.2rem);
min-height: 5rem;
margin-top: 2rem;
margin-left: 4.2rem;
font-size: 1.25rem;
}

.contactCustomSelectMenu button {
padding: 0.7rem 1rem;
font-size: 1.05rem;
}
}

@media (max-width: 650px) {
p,
a,
button,
input,
textarea,
select,
label {
font-size: max(14px, 1.4rem) !important;
}
}

@media (max-width: 650px) {
.testimonialSlateInner {
padding: 2.8rem 3rem 2.6rem;
}

.testimonialQuoteMark {
height: 4.2rem;
}

.testimonialQuote {
margin: 0.8rem 0 1.4rem;
}

.testimonialQuoteDivider {
margin-bottom: 1.4rem;
}

.testimonialAuthor {
gap: 0.2rem;
}

.testimonialStars {
margin-top: 0.9rem;
}
}

@media (max-width: 650px) {
.contactBackground::before {
animation: none;
}

.contactBackgroundGlow {
animation: none;
filter: none;
mix-blend-mode: normal;
will-change: auto;
}

.contactBackgroundGlowOne {
opacity: 0.28;
}

.contactBackgroundGlowTwo {
opacity: 0.35;
}

.contactBackgroundGlowThree {
opacity: 0.24;
}

.contactBackgroundHalo {
animation: none;
will-change: auto;
}

.contactBackgroundHaloOne,
.contactBackgroundHaloTwo {
animation: none;
box-shadow: none;
}

.contactBackgroundHaloOne::before,
.contactBackgroundHaloOne::after,
.contactBackgroundHaloTwo::before,
.contactBackgroundHaloTwo::after {
box-shadow: none;
}

.contactClipboardShadow {
filter: none;
opacity: 0.4;
}

.contactClipboardBoardGlow {
filter: none;
opacity: 0.35;
}

.contactClipboardClip {
filter: none;
}
}

@media (max-width: 767px) {

    .carouselGlowRing::before,
    .videoCarouselStepGlow,
    .videoCarouselStepNode,
    .videoCarouselProcessBaselineGlow,
    .videoCarouselRingBackgroundImg,

    .webDevOrbitOne,

    .folderHaloRingOne,
    .folderHaloRingTwo,
    .folderHaloRingThree,

    .emailResponseGlow,
    .emailResponseOrbitOuter,
    .emailResponseOrbitInner,

    .getFoundBackground::before,
    .getFoundBackgroundOrbOne,
    .getFoundBackgroundOrbTwo,
    .getFoundBackgroundOrbThree,
    .getFoundBackgroundGrid,
    .getFoundBackgroundLineOne,
    .getFoundBackgroundLineTwo,
    .getFoundBackground::after,

    .contactBackground::before,
    .contactBackgroundGlowOne,
    .contactBackgroundGlowTwo,
    .contactBackgroundGlowThree,
    .contactBackgroundHaloOne,
    .contactBackgroundHaloTwo,
    .contactBackgroundBeamOne,
    .contactBackgroundBeamTwo,
    .contactBackgroundBeamThree,
    .contactBackgroundDots {
        animation: none !important;
    }
}