/* ==========================
   CUSTOM FONT
========================== */
@font-face {
    font-family: "AbeatbyKai";
    src: url("../fonts/ABEAKRG.TTF") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue: #034883;
    --yellow: #ECD12D;
    --red: #FF1726;
    --darkred: #9B2C39;
    --green: #028743;
    --cream: #f6e7d0;
    --black: #101010;
    --white: #fff
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    /* font-family: Inter, system-ui, sans-serif; */
    font-family: "AbeatbyKai", cursive;
    background: var(--cream);
    color: var(--black);
    overflow-x: hidden
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

.preloader {
    position: fixed;
    inset: 0;
    background: var(--red);
    z-index: 9999;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    transition: transform 1s cubic-bezier(.76, 0, .24, 1), opacity .8s
}

.preloader.hide {
    transform: translateY(-110%);
    opacity: .98
}

.loader-bg-text {
    position: absolute;
    /* font-family: Bungee, cursive; */
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(5rem, 22vw, 24rem);
    color: rgba(255, 255, 255, .12);
    -webkit-text-stroke: 4px #fff;
    line-height: .8;
    animation: pulse 1.5s infinite alternate
}

.loader-mascot {
    width: min(380px, 72vw);
    z-index: 2;
    filter: drop-shadow(0 30px 25px rgba(0, 0, 0, .28));
    animation: dropIn 1s cubic-bezier(.34, 1.56, .64, 1)
}

.loader-logo {
    position: absolute;
    top: 9vh;
    width: 150px;
    animation: bounce .9s .35s both
}

.preloader p {
    position: absolute;
    bottom: 12vh;
    /* font-family: Baloo 2, cursive; */
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(1.8rem, 6vw, 5rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, .22)
}

@keyframes dropIn {
    from {
        transform: translateY(-120vh) rotate(-8deg)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes bounce {
    from {
        transform: scale(0)
    }

    70% {
        transform: scale(1.15)
    }

    to {
        transform: scale(1)
    }
}

@keyframes pulse {
    to {
        transform: scale(1.03)
    }
}

.site-header {
    position: fixed;
    z-index: 1000;
    left: 0;
    right: 0;
    top: 0;
    padding: 22px clamp(18px, 4vw, 58px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none
}

.brand,
.desktop-nav,
.menu-btn {
    pointer-events: auto
}

.brand img {
    width: 112px;
    filter: drop-shadow(0 7px 0 #fff)
}

.desktop-nav {
    background: rgba(255, 255, 255, .72);
    border: 2px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    padding: 12px 18px;
    backdrop-filter: blur(10px);
    display: flex;
    gap: 20px;
    /* font-family: Baloo 2; */
    font-family: "AbeatbyKai", cursive;
    font-weight: 900
}

.desktop-nav a:hover {
    color: var(--red)
}

.menu-btn {
    border: 2px solid rgba(0, 0, 0, .2);
    background: rgba(255, 255, 255, .72);
    border-radius: 999px;
    width: 70px;
    height: 52px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px
}

.menu-btn span {
    width: 28px;
    height: 3px;
    background: #111
}

.mobile-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(380px, 100%);
    background: #111;
    color: #fff;
    z-index: 1200;
    transform: translateX(105%);
    transition: .45s cubic-bezier(.76, 0, .24, 1);
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobile-menu.open {
    transform: none
}

.mobile-menu img {
    width: 130px
}

.mobile-menu a {
    /* font-family: Bungee; */
    font-family: "AbeatbyKai", cursive;
    font-size: 2rem
}

.close-btn {
    position: absolute;
    right: 25px;
    top: 20px;
    background: none;
    color: #fff;
    border: 0;
    font-size: 50px
}

.comic-panel {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--cream);
    border-bottom-left-radius: 6vw;
    border-bottom-right-radius: 6vw
}

.grain:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, .7) 0 4px, transparent 5px), radial-gradient(circle at 95% 15%, rgba(0, 0, 0, .09) 0 3px, transparent 5px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(0, 0, 0, .025) 29px);
    opacity: .7
}

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 25px 60px
}

.mega-text {
    position: absolute;
    left: 1.5vw;
    right: 1.5vw;
    text-align: center;
    /* font-family: Bungee, cursive; */
    font-family: "AbeatbyKai", cursive;
    line-height: .78;
    margin: 0;
    color: var(--red);
    font-size: clamp(5rem, 17vw, 20rem);
    letter-spacing: -.08em;
    -webkit-text-stroke: 8px #fff;
    text-shadow: 0 8px 0 #fff;
    transform: rotate(-1deg)
}

.mega-text span {
    display: block
}

.logo-burst {
    position: absolute;
    top: 17%;
    left: 8%;
    background: #fff;
    border: 8px solid #111;
    border-radius: 42% 58% 49% 51%/62% 37% 63% 38%;
    padding: 15px 34px;
    box-shadow: 12px 12px 0 #111;
    transform: rotate(-4deg);
    z-index: 3
}

.logo-burst img {
    width: 180px
}

.hero-mascot {
    position: relative;
    z-index: 4;
    width: min(520px, 72vw);
    filter: drop-shadow(0 34px 22px rgba(0, 0, 0, .28));
    animation: floaty 3s ease-in-out infinite
}

.hero-copy {
    position: absolute;
    z-index: 5;
    width: min(330px, 34vw);
    /* font-family: Baloo 2, cursive; */
    font-family: "AbeatbyKai", cursive;
    font-weight: 900;
    font-size: clamp(1rem, 1.8vw, 1.65rem);
    line-height: 1.05
}

.left-blurb {
    left: 3vw;
    bottom: 9vh
}

.right-blurb {
    right: 3vw;
    bottom: 8vh;
    text-align: right
}

.sticker {
    position: absolute;
    z-index: 5;
    /* font-family: Bungee; */
    font-family: "AbeatbyKai", cursive;
    color: #ffb000;
    background: #fff;
    border: 6px solid #fff;
    border-radius: 18px;
    text-shadow: 2px 2px 0 var(--red);
    transform: rotate(8deg);
    font-size: clamp(1.1rem, 2.2vw, 2.2rem);
    /* font-size: clamp(1.5rem, 3vw, 3.5rem); */
    /* font-size: clamp(1.8rem, 3.5vw, 4rem); */
    line-height: .9
}

.sticker-1 {
    left: 14%;
    top: 30%
}

.sticker-2 {
    right: 13%;
    top: 60%;
    transform: rotate(-12deg)
}

.hero-cta {
    position: absolute;
    z-index: 6;
    bottom: 26px;
    display: flex;
    gap: 14px
}

.hero-cta a {
    /* font-family: Baloo 2; */
    font-family: "AbeatbyKai", cursive;
    font-weight: 900;
    background: #111;
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    border: 3px solid #111;
    box-shadow: 5px 5px 0 var(--red)
}

.hero-cta a+a {
    background: #fff;
    color: #111;
    box-shadow: 5px 5px 0 var(--yellow)
}

.scroll-note {
    position: absolute;
    bottom: 92px;
    /* font-family: Baloo 2; */
    font-family: "AbeatbyKai", cursive;
    font-weight: 900;
    text-transform: uppercase
}

.section-inner {
    width: min(1220px, 92%);
    margin: auto
}

.about-section {
    background: var(--yellow);
    padding: 130px 0 150px;
    position: relative;
    overflow: hidden
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center
}

.eyebrow {
    /* font-family: Bungee; */
    font-family: "AbeatbyKai", cursive;
    color: var(--red);
    margin: 0 0 16px
}

.eyebrow.light {
    color: #fff;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .2)
}

h2 {
    /* font-family: Baloo 2, cursive; */
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(3rem, 7vw, 7.8rem);
    line-height: .86;
    margin: 0;
    letter-spacing: -.05em
}

.about-card {
    background: #fff;
    border: 6px solid #111;
    border-radius: 40px;
    padding: 38px;
    box-shadow: 14px 14px 0 #111;
    font-size: 1.18rem;
    font-weight: 650
}

.stick-man {
    height: 150px;
    position: relative
}

.stick-man:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 42px;
    height: 42px;
    border: 5px solid #111;
    border-radius: 50%
}

.stick-man:after {
    content: "";
    position: absolute;
    left: calc(50% + 17px);
    top: 55px;
    width: 7px;
    height: 80px;
    background: #111;
    border-radius: 6px
}

.stick-man span:before,
.stick-man span:after {
    content: "";
    position: absolute;
    top: 76px;
    width: 80px;
    height: 6px;
    background: #111;
    border-radius: 6px
}

.stick-man span:before {
    left: calc(50% - 70px);
    transform: rotate(-28deg)
}

.stick-man span:after {
    left: calc(50% + 15px);
    transform: rotate(28deg)
}

.wave-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    height: 85px;
    background: radial-gradient(60px 35px at 10% 80%, transparent 98%, #111 100%) repeat-x;
    background-size: 220px 85px;
    opacity: .2
}

.services-section {
    background: var(--red);
    color: #fff;
    padding: 115px 0;
    position: relative;
    border-radius: 6vw 6vw 0 0;
    margin-top: -60px;
    overflow: hidden
}

.services-title {
    -webkit-text-stroke: 2px rgba(255, 255, 255, .3);
    max-width: 980px
}

.service-stage {
    display: grid;
    grid-template-columns: .9fr 1.5fr;
    gap: 30px;
    align-items: end;
    margin-top: 50px
}

.service-mascot {
    width: 360px;
    justify-self: center;
    filter: drop-shadow(16px 25px 0 rgba(0, 0, 0, .2));
    animation: push 2.4s ease-in-out infinite
}

.service-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px
}

.service-track article {
    background: #fff;
    color: #111;
    border: 5px solid #111;
    border-radius: 30px;
    padding: 28px;
    box-shadow: 10px 10px 0 #111;
    min-height: 160px;
    transform: rotate(var(--r, -1deg))
}

.service-track article:nth-child(even) {
    --r: 1.5deg
}

.service-track b {
    display: block;
    /* font-family: Baloo 2; */
    font-family: "AbeatbyKai", cursive;
    font-size: 2rem;
    line-height: .95;
    margin-bottom: 10px
}

.service-track span {
    font-weight: 700
}

.work-section {
    background: var(--green);
    color: #fff;
    padding: 120px 0
}

.work-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 55px;
    align-items: center
}

.work-logo-card {
    background: #fff;
    border: 7px solid #111;
    border-radius: 45px;
    padding: 30px;
    box-shadow: 16px 16px 0 #111
}

.work-logo-card img:first-child {
    width: 320px;
    margin: auto
}

.work-logo-card img:last-child {
    width: 170px;
    margin: 20px auto 0
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 35px
}

.stats div {
    background: rgba(255, 255, 255, .14);
    border: 2px solid rgba(255, 255, 255, .32);
    border-radius: 25px;
    padding: 20px
}

.stats strong {
    display: block;
    font-family: "AbeatbyKai", cursive;
    font-size: 2.3rem
}

.contact-section {
    background: #111;
    padding: 115px 0;
    color: #fff
}

.contact-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: var(--blue);
    border-radius: 44px;
    padding: clamp(28px, 5vw, 70px);
    border: 6px solid #fff;
    box-shadow: 15px 15px 0 var(--yellow)
}

.contact-panel p {
    font-size: 1.1rem
}

.contact-panel form {
    display: grid;
    gap: 14px
}

input,
textarea {
    width: 100%;
    border: 4px solid #111;
    border-radius: 18px;
    padding: 16px 18px;
    font: 700 1rem Inter;
    background: #fff
}

textarea {
    min-height: 140px;
    resize: vertical
}

button[type=submit] {
    font-family: "AbeatbyKai", cursive;
    background: var(--yellow);
    border: 4px solid #111;
    border-radius: 999px;
    padding: 16px 22px;
    box-shadow: 7px 7px 0 #111;
    cursor: pointer
}

.footer-wave {
    background: #F8DF09;
    padding: 50px 6%;
    color: #fff
}

.footer-wave div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.footer-wave img {
    width: 110px
}

@keyframes floaty {
    50% {
        transform: translateY(-18px) rotate(2deg)
    }
}

@keyframes push {
    50% {
        transform: translateX(18px)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(45px);
    transition: 1s cubic-bezier(.16, 1, .3, 1)
}

.reveal.show {
    opacity: 1;
    transform: none
}

@media(max-width:900px) {
    .desktop-nav {
        display: none
    }

    .menu-btn {
        display: flex
    }

    .site-header {
        padding: 16px
    }

    .brand img {
        width: 90px
    }

    .hero {
        padding-top: 100px;
        min-height: 100svh
    }

    .mega-text {
        font-size: clamp(4.2rem, 26vw, 9rem);
        -webkit-text-stroke: 4px #fff
    }

    .logo-burst {
        left: 50%;
        top: 14%;
        transform: translateX(-50%) rotate(-3deg);
        padding: 10px 22px
    }

    .logo-burst img {
        width: 125px
    }

    .hero-mascot {
        width: min(390px, 86vw);
        margin-top: 50px
    }

    .hero-copy {
        display: none
    }

    .sticker-1 {
        left: 4%;
        top: 35%
    }

    .sticker-2 {
        right: 3%;
        top: 58%
    }

    .hero-cta {
        bottom: 22px;
        flex-wrap: wrap;
        justify-content: center
    }

    .scroll-note {
        display: none
    }

    .about-grid,
    .service-stage,
    .work-grid,
    .contact-panel {
        grid-template-columns: 1fr
    }

    .about-section,
    .services-section,
    .work-section,
    .contact-section {
        padding: 80px 0
    }

    .service-track {
        grid-template-columns: 1fr
    }

    .service-mascot {
        width: 270px
    }

    .stats {
        grid-template-columns: 1fr
    }

    .footer-wave div {
        flex-direction: column;
        text-align: center
    }
}

@media(max-width:520px) {
    h2 {
        font-size: 3.2rem
    }

    .about-card {
        padding: 24px;
        border-width: 4px;
        box-shadow: 8px 8px 0 #111
    }

    .service-track article {
        padding: 22px
    }

    .contact-panel {
        border-width: 4px;
        box-shadow: 8px 8px 0 var(--yellow)
    }

    .preloader p {
        bottom: 8vh
    }

    .loader-logo {
        top: 7vh
    }

    .loader-mascot {
        width: 78vw
    }
}

/* FINAL CRAV-STYLE SEAN HERO UPDATE */
body {
    background: var(--yellow)
}

.minimal-header {
    padding: 26px clamp(18px, 4vw, 46px);
    align-items: flex-start
}

.desktop-nav {
    display: none !important
}

.mini-brand img {
    width: 118px;
    filter: drop-shadow(0 6px 0 #fff)
}

.minimal-header .menu-btn {
    display: flex !important;
    position: relative;
    width: 74px;
    height: 58px;
    border-radius: 999px;
    border: 2px solid rgba(17, 17, 17, .22);
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(8px);
    box-shadow: none;
    gap: 6px;
    transition: transform .25s ease, background .25s ease
}

.minimal-header .menu-btn:hover {
    transform: scale(1.06);
    background: #fff
}

.minimal-header .menu-btn span {
    width: 30px;
    height: 3px;
    background: #111;
    border-radius: 99px;
    margin: 0
}

.mobile-menu {
    background: #111;
    color: #fff;
    border-left: 8px solid var(--yellow)
}

.mobile-menu a {
    font-size: clamp(2rem, 8vw, 4.6rem);
    line-height: .88;
    color: #fff;
    text-transform: uppercase;
    transition: color .25s ease, transform .25s ease
}

.mobile-menu a:hover {
    color: var(--yellow);
    transform: translateX(8px)
}

.mobile-menu img {
    width: 150px;
    margin-bottom: 20px
}

.close-btn {
    cursor: pointer
}

.crav-hero {
    /* background: var(--yellow) !important; */
    background: #F8DF09;
    /* background: #034883; */
    min-height: 170vh;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 32px 80px;
    isolation: isolate
}

/* .crav-hero:after {
    content: "";
    position: absolute;
    inset: auto -5% -12% -5%;
    height: 28vh;
    background: rgba(255, 255, 255, .12);
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    z-index: 0;
    pointer-events: none
} */
/* .crav-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 230px;

    background: rgba(255, 255, 255, 0.14);

    clip-path: path("M0,90 C180,10 330,10 520,120 C700,220 850,130 1020,60 C1200,-10 1370,120 1536,30 L1536,230 L0,230 Z"
        );

    z-index: 0;
    pointer-events: none;
} */

.crav-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 230px;

    /* background: rgba(255, 255, 255, 0.14); */
    background: #3E51D1;

    clip-path: path("M0,90 C180,10 330,10 520,120 C700,220 850,130 1020,60 C1200,-10 1370,120 1536,30 L1536,230 L0,230 Z"
        );

    animation: cravWave 5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes cravWave {

    /* 0%, */
    100% {
        clip-path: path("M0,90 C180,10 330,10 520,120 C700,220 850,130 1020,60 C1200,-10 1370,120 1536,30 L1536,230 L0,230 Z"
            );
    }

    50% {
        clip-path: path("M0,120 C180,40 330,30 520,95 C700,180 850,170 1020,85 C1200,20 1370,90 1536,55 L1536,230 L0,230 Z"
            );
    }
}

.crav-hero .grain:before {
    background: radial-gradient(circle at 9% 21%, rgba(255, 255, 255, .38) 0 4px, transparent 5px), radial-gradient(circle at 95% 16%, rgba(0, 0, 0, .10) 0 3px, transparent 5px), repeating-linear-gradient(0deg, transparent 0 28px, rgba(0, 0, 0, .035) 29px);
    opacity: .45
}

.hero-topline {
    position: absolute;
    z-index: 8;
    top: 120px;
    left: clamp(24px, 5vw, 78px);
    right: clamp(24px, 7vw, 130px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none
}

.small-business {
    font-family: "AbeatbyKai", cursive;
    font-weight: 900;
    font-size: clamp(1.7rem, 4vw, 5.2rem);
    line-height: .9;
    color: #111;
    letter-spacing: -.05em;
    text-transform: capitalize;
    transform: rotate(-1deg);
    text-shadow: 2px 2px 0 rgba(255, 255, 255, .35)
}

.hero-logo-mark {
    background: #111;
    border-radius: 18px;
    padding: 8px 11px;
    box-shadow: 8px 8px 0 rgba(255, 255, 255, .42);
    transform: rotate(1deg)
}

.hero-logo-mark img {
    width: clamp(78px, 9vw, 150px)
}

.crav-title {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    font-family: "AbeatbyKai", cursive;
    color: var(--red);
    font-size: clamp(5.3rem, 17vw, 21rem);
    line-height: .72;
    letter-spacing: -.09em;
    -webkit-text-stroke: clamp(5px, .8vw, 12px) #fff;
    text-shadow: 0 clamp(4px, .7vw, 10px) 0 #fff, 0 18px 40px rgba(0, 0, 0, .08);
    transform: rotate(-1deg);
    white-space: nowrap
}

.crav-title span {
    display: block
}

/* .crav-mascot {
    position: relative;
    z-index: 5;
    width: min(690px, 51vw);
    max-height: 70vh;
    object-fit: contain;
    filter: drop-shadow(0 35px 22px rgba(0, 0, 0, .30));
    animation: floaty 3.4s ease-in-out infinite
} */

.crav-mascot {
    position: relative;
    top: -60px;
    /* adjust */
    z-index: 5;
    width: min(690px, 51vw);
    max-height: 70vh;
    object-fit: contain;
    filter: drop-shadow(0 35px 22px rgba(0, 0, 0, .30));
    animation: floaty 3.4s ease-in-out infinite;
}



.crav-hero .hero-copy {
    z-index: 7;
    color: #111;
    width: min(380px, 32vw);
    font-family: "AbeatbyKai", cursive;
    font-weight: 900;
    font-size: clamp(1rem, 1.65vw, 1.72rem);
    line-height: 1.02;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, .25)
}

.crav-hero .left-blurb {
    left: clamp(22px, 3vw, 56px);
    bottom: clamp(58px, 8vh, 110px);
    text-align: left
}

.crav-hero .right-blurb {
    right: clamp(22px, 3vw, 56px);
    bottom: clamp(58px, 8vh, 110px);
    text-align: right
}

.crav-hero .sticker {
    background: #fff;
    color: #ffd00e;
    border: 6px solid #fff;
    text-shadow: 2px 2px 0 var(--red);
    box-shadow: 0 10px 0 rgba(0, 0, 0, .06);
    z-index: 8
}

.crav-hero .sticker-1 {
    left: 14%;
    top: 27%;
    transform: rotate(12deg)
}

.crav-hero .sticker-2 {
    right: 14%;
    top: 62%;
    transform: rotate(-10deg)
}

.crav-hero .scroll-note {
    z-index: 8;
    bottom: 26px;
    color: #111;
    opacity: .8
}

@media(max-width:900px) {
    .mini-brand img {
        width: 88px
    }

    .minimal-header .menu-btn {
        width: 62px;
        height: 50px
    }

    .hero-topline {
        top: 94px;
        left: 20px;
        right: 20px
    }

    .hero-logo-mark img {
        width: 72px
    }

    .small-business {
        font-size: clamp(1.45rem, 8vw, 3rem)
    }

    .crav-hero {
        padding: 110px 18px 64px;
        min-height: 100svh
    }

    .crav-title {
        font-size: clamp(4.4rem, 23vw, 9.5rem);
        line-height: .78;
        -webkit-text-stroke: 4px #fff;
        letter-spacing: -.075em
    }

    .crav-mascot {
        width: min(390px, 84vw);
        margin-top: 38px
    }

    .crav-hero .hero-copy {
        display: block;
        width: 42vw;
        font-size: clamp(.82rem, 3.1vw, 1rem);
        bottom: 56px
    }

    .crav-hero .left-blurb {
        left: 18px;
        text-align: left
    }

    .crav-hero .right-blurb {
        right: 18px;
        text-align: right
    }

    .crav-hero .sticker {
        font-size: .96rem;
        border-width: 4px
    }

    .crav-hero .sticker-1 {
        left: 10%;
        top: 34%
    }

    .crav-hero .sticker-2 {
        right: 8%;
        top: 62%
    }
}

@media(max-width:540px) {
    .mini-brand img {
        width: 76px
    }

    .minimal-header {
        padding: 18px
    }

    .minimal-header .menu-btn {
        width: 54px;
        height: 44px
    }

    .minimal-header .menu-btn span {
        width: 24px;
        height: 3px
    }

    .hero-topline {
        top: 76px
    }

    .hero-logo-mark {
        display: none
    }

    .small-business {
        font-size: 1.7rem
    }

    .crav-title {
        font-size: 24vw;
        line-height: .82;
        -webkit-text-stroke: 3px #fff
    }

    .crav-mascot {
        width: 88vw
    }

    .crav-hero .hero-copy {
        display: none
    }

    .crav-hero .sticker-1 {
        top: 30%;
        left: 4%
    }

    .crav-hero .sticker-2 {
        right: 4%;
        top: 66%
    }

    .mobile-menu {
        width: 100%;
        padding: 32px 24px
    }

    .mobile-menu a {
        font-size: 3rem
    }
}

.hero-description {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);

    width: 850px;
    max-width: 90%;

    text-align: center;

    /* font-family: 'Luckiest Guy', cursive; */
    /* font-family: 'Baloo 2', cursive; */
    font-family: "AbeatbyKai", cursive;
    /* font-family: 'Fredoka', sans-serif; */
    /* font-family: 'Bungee', cursive; */




    font-size: 50px;
    line-height: 1.1;
    font-weight: 400;

    color: #ffffff;

    z-index: 20;
    /* text-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.7); */

}

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

@media (max-width: 1024px) {

    .hero-description {
        width: 85%;
        font-size: 32px;
        line-height: 1.15;
        bottom: 40px;
    }

}

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

@media (max-width: 768px) {

    .crav-hero {
        min-height: 100vh;
        padding: 80px 20px 40px;
    }

    .crav-mascot {
        width: 90vw;
        max-height: 45vh;
    }

    .hero-description {
        width: 92%;
        font-size: 22px;
        line-height: 1.2;
        bottom: 25px;
    }

    .sticker-1 {
        font-size: 14px;
        top: 90px;
        left: 20px;
    }

    .sticker-2 {
        font-size: 16px;
        right: 20px;
        bottom: 180px;
    }
}

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

@media (max-width: 480px) {

    .hero-description {
        width: 94%;
        font-size: 18px;
        line-height: 1.25;
        bottom: 20px;
    }

    .crav-mascot {
        width: 95vw;
        max-height: 40vh;
    }

    .sticker-1,
    .sticker-2 {
        font-size: 12px;
    }
}

/* =========================================================
   MOBILE RESPONSIVE FIXES - added for full responsive layout
   These overrides keep the desktop design and improve tablet/mobile.
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

.site-header,
.minimal-header {
    max-width: 100vw;
}

.minimal-header {
    align-items: center;
}

.menu-btn,
.close-btn {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu {
    max-width: 100vw;
    overflow-y: auto;
}

.crav-hero {
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
}

.crav-mascot {
    max-width: 100%;
}

.hero-description {
    overflow-wrap: anywhere;
}

/* Large laptops and small desktops */
@media (max-width: 1200px) {
    .crav-mascot {
        width: min(600px, 58vw);
    }

    .crav-hero .sticker-1 {
        left: 8%;
        top: 25%;
    }

    .crav-hero .sticker-2 {
        right: 8%;
        top: 61%;
    }

    .hero-description {
        font-size: 36px;
        width: min(760px, 88vw);
    }
}

/* Tablets */
@media (max-width: 900px) {
    .minimal-header {
        padding: 16px 18px;
    }

    .mobile-menu {
        width: min(420px, 100vw);
        padding: 34px 26px;
    }

    .mobile-menu img {
        width: 120px;
    }

    .mobile-menu a {
        font-size: clamp(2rem, 9vw, 3.6rem);
    }

    .crav-hero {
        padding: 96px 18px 34px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 18px;
    }

    .crav-mascot {
        top: 0;
        margin-top: 0;
        width: min(520px, 86vw);
        max-height: 54vh;
        object-fit: contain;
        animation-duration: 4s;
    }

    .hero-description {
        position: relative;
        left: auto;
        bottom: auto;
        transform: none;
        width: min(720px, 92vw);
        max-width: 92vw;
        font-size: clamp(24px, 4.4vw, 34px);
        line-height: 1.14;
        margin: 0 auto;
        padding: 0 4px;
    }

    .crav-hero .sticker {
        font-size: clamp(14px, 3vw, 24px);
        border-width: 4px;
        border-radius: 14px;
    }

    .crav-hero .sticker-1 {
        left: 6%;
        top: 19%;
    }

    .crav-hero .sticker-2 {
        right: 6%;
        top: 53%;
        bottom: auto;
    }
}

/* Phones */
@media (max-width: 600px) {
    .preloader p {
        width: 92vw;
        text-align: center;
        line-height: .95;
    }

    .loader-logo {
        width: 112px;
    }

    .minimal-header {
        padding: 14px 14px;
    }

    .minimal-header .menu-btn {
        width: 52px;
        height: 42px;
        background: rgba(255, 255, 255, .72);
    }

    .minimal-header .menu-btn span {
        width: 23px;
    }

    .mobile-menu {
        width: 100vw;
        border-left: 0;
        padding: 30px 22px;
        gap: 20px;
    }

    .mobile-menu img {
        width: 110px;
        margin-bottom: 12px;
    }

    .mobile-menu a {
        font-size: clamp(2.3rem, 15vw, 3.2rem);
        line-height: .9;
    }

    .close-btn {
        right: 18px;
        top: 14px;
        font-size: 44px;
    }

    .crav-hero {
        min-height: 100vh;
        min-height: 100svh;
        padding: 74px 14px 24px;
        justify-content: center;
        gap: 14px;
    }

    .crav-hero:after {
        height: 20vh;
        bottom: -9%;
    }

    .crav-mascot {
        width: min(430px, 96vw);
        max-height: 50vh;
        filter: drop-shadow(0 22px 14px rgba(0, 0, 0, .25));
    }

    .hero-description {
        width: 94vw;
        max-width: 94vw;
        font-size: clamp(19px, 6.1vw, 27px);
        line-height: 1.15;
        /* text-shadow: 3px 3px 0 rgba(255, 255, 255, .65); */
    }

    .crav-hero .sticker {
        font-size: clamp(12px, 4vw, 16px);
        line-height: .95;
        border-width: 3px;
        border-radius: 10px;
        text-shadow: 1.5px 1.5px 0 var(--red);
    }

    .crav-hero .sticker-1 {
        top: 15%;
        left: 4%;
    }

    .crav-hero .sticker-2 {
        top: 50%;
        right: 4%;
    }

    .footer-wave {
        padding: 34px 18px;
    }

    .footer-wave img {
        width: 92px;
    }
}

/* Small phones */
@media (max-width: 390px) {
    .crav-hero {
        padding-top: 66px;
        gap: 10px;
    }

    .crav-mascot {
        width: 98vw;
        max-height: 47vh;
    }

    .hero-description {
        font-size: clamp(17px, 6vw, 22px);
        line-height: 1.17;
    }

    .crav-hero .sticker-1 {
        top: 13%;
    }

    .crav-hero .sticker-2 {
        top: 48%;
    }
}

/* Short mobile screens / landscape phones */
@media (max-height: 560px) and (max-width: 900px) {
    .crav-hero {
        min-height: auto;
        padding-top: 78px;
        padding-bottom: 26px;
    }

    .crav-mascot {
        max-height: 64vh;
        width: min(360px, 72vw);
    }

    .hero-description {
        font-size: clamp(17px, 3.8vw, 24px);
    }

    .crav-hero .sticker {
        display: none;
    }
}

/* .brand-hero-content {
  background: #e5b300;
  padding: 80px 20px 100px;
  position: relative;
  z-index: 2;
}

.hero-description {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.hero-description b {
  display: block;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  margin-bottom: 24px;
}

.hero-subtext {
  max-width: 720px;
  margin: 0 auto 16px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #4a4a4a;
}

.hero-buttons {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: all .3s ease;
}

.btn-primary {
  background: #111;
  color: #fff;
}

.btn-secondary {
  background: #fff;
  color: #111;
  border: 2px solid #111;
}

@media (max-width:768px) {
  .brand-hero-content {
    padding: 55px 16px 70px;
  }

  .hero-subtext {
    font-size: 1rem;
    line-height: 1.7;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 320px;
  }
} */

/* FIX: stop hero-description from behaving like banner text inside this section */
.brand-hero-content .hero-description {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;

    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    z-index: auto !important;
}

/* New section */
.brand-hero-content {
    display: block;
    width: 100%;
    clear: both;
    background: #E1AD01;
    padding: 90px 20px 110px;
    position: relative;
    overflow: hidden;
}

/* Heading */
.brand-hero-content .hero-description b {
    display: block;
    /* font-size: clamp(2.5rem, 6vw, 5rem); */
    /* font-size: clamp(2rem, 4vw, 3.5rem); */
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    /* font-size: clamp(1rem, 2vw, 1.75rem); */
    line-height: 1.05;
    margin-bottom: 28px;
}

.hero-description h2 {
    font-size: clamp(2.3rem, 5vw, 4.5rem);

}

/* Paragraph */
.brand-hero-content .hero-subtext {
    max-width: 820px;
    margin: 0 auto 16px;
    /* font-size: 1.4rem; */
    font-size: 1.15rem;
    line-height: 1.5;
    color: #ffffff;
}

/* Buttons */
.brand-hero-content .hero-buttons {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.brand-hero-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 500;
    text-decoration: none;
    transition: all .3s ease;
}

.brand-hero-content .btn-primary {
    background: #ECD12D;
    color: #fff;
}

.brand-hero-content .btn-secondary {
    background: #FF1726;
    color: #ffffff;
    border: 2px solid #111;
}

/* Mobile */
@media (max-width: 768px) {
    .brand-hero-content {
        padding: 60px 16px 80px;
    }

    .brand-hero-content .hero-subtext {
        font-size: 1rem;
        line-height: 1.7;
    }

    .brand-hero-content .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .brand-hero-content .btn {
        width: 100%;
        max-width: 320px;
    }
}

.brand-hero-content {
    background: #3E51D1;
    padding: 10px 20px 70px;
}

.brand-hero-content .hero-description b {
    margin-bottom: 15px;
}

.hero-subtext {
    margin: 0 auto 10px;
}

.hero-buttons {
    margin-top: 20px;
}

/* .brand-hero-content::after{
    content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 230px;

    background:#830318;

   
       clip-path: path(
  "M0,180
   C200,230 350,230 520,140
   C700,40 850,80 1020,160
   C1200,240 1370,180 1536,210
   L1536,230
   L0,230
   Z"
);

  animation: cravWave 5s ease-in-out infinite;


    z-index:0;
} */

.wave-image-section {
    position: relative;
    background: #830318;
    min-height: 650px;
    overflow: hidden;
    padding-top: 180px;
}

.wave-shape {
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 220px;
    background: #e5b300;

    clip-path: path("M0,90 C180,10 330,10 520,120 C700,220 850,130 1020,60 C1200,-10 1370,120 1536,30 L1536,0 L0,0 Z"
        );

    animation: waveMove 8s linear infinite;
    z-index: 2;
}

@keyframes waveMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-25%);
    }
}

.wave-image-content {
    position: relative;
    z-index: 3;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.wave-image-content img {
    width: 100%;
    max-width: 700px;
    display: block;
    margin: 0 auto;
}

/* Mobile */
@media (max-width: 768px) {
    .wave-image-section {
        min-height: 480px;
        padding-top: 120px;
    }

    .wave-shape {
        height: 150px;
    }
}

.image-wave-section {
    position: relative;
    width: 100%;
    height: 850px;
    overflow: hidden;
    background-color: #f6e7d0;
}

.image-wave-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TOP WAVE */
.top-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
}

.top-wave path {
    fill: #3E51D1;
    animation: topWaveMove 4s ease-in-out infinite;
}

/* BOTTOM WAVE */
.bottom-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 2;
}

.bottom-wave path {
    fill: #034883;
    animation: bottomWaveMove 4s ease-in-out infinite;
}

/* Wave movement */
@keyframes topWaveMove {

    0%,
    100% {
        d: path("M0,0 C180,160 360,160 540,60 C720,-40 900,20 1080,90 C1260,160 1350,80 1440,0 L1440,0 L0,0 Z");
    }

    50% {
        d: path("M0,0 C180,80 360,120 540,90 C720,30 900,-20 1080,70 C1260,140 1350,120 1440,0 L1440,0 L0,0 Z");
    }
}

@keyframes bottomWaveMove {

    0%,
    100% {
        d: path("M0,180 C180,20 360,20 540,120 C720,220 900,160 1080,90 C1260,20 1350,100 1440,180 L1440,180 L0,180 Z");
    }

    50% {
        d: path("M0,180 C180,100 360,60 540,90 C720,150 900,210 1080,110 C1260,40 1350,60 1440,180 L1440,180 L0,180 Z");
    }
}

.memory-brand-section {
    position: relative;
    background: linear-gradient(135deg, #061f3f 0%, #034883 55%, #061f3f 100%);
    padding: 100px 7%;
    overflow: hidden;
}

.memory-brand-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(229, 179, 0, .25), transparent 30%),
        radial-gradient(circle at 85% 70%, rgba(255, 255, 255, .12), transparent 28%);
    z-index: 0;
}

.memory-brand-container {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 70px;
}

.memory-brand-content {
    flex: 1;
    color: #fff;
}

.memory-tag {
    display: inline-block;
    background: #e5b300;
    color: #111;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.memory-brand-content h2 {
    font-size: clamp(2.4rem, 5vw, 4.8rem);
    line-height: 1.05;
    margin-bottom: 25px;
    max-width: 700px;
}

.memory-brand-content p {
    max-width: 620px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
    margin-bottom: 16px;
}

.memory-btn {
    display: inline-flex;
    margin-top: 24px;
    background: #e5b300;
    color: #111;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: .3s ease;
}

.memory-btn:hover {
    transform: translateY(-4px);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .25);
}

.memory-brand-visual {
    flex: 1;
    min-height: 430px;
    position: relative;
}

.memory-brand-visual img {
    width: min(100%, 430px);
    position: absolute;
    bottom: 0;
    right: 50px;
    z-index: 3;
    animation: mascotFloat 4s ease-in-out infinite;
}

.floating-card {
    position: absolute;
    background: #fff;
    color: #111;
    padding: 12px 18px;
    border-radius: 18px;
    font-weight: 800;
    box-shadow: 8px 8px 0 rgba(0, 0, 0, .18);
    z-index: 2;
    animation: cardFloat 5s ease-in-out infinite;
}

.card-search {
    top: 40px;
    right: 230px;
}

.card-social {
    top: 130px;
    right: 20px;
    animation-delay: .5s;
}

.card-growth {
    bottom: 120px;
    right: 310px;
    animation-delay: 1s;
}

.card-strategy {
    bottom: 35px;
    right: 40px;
    animation-delay: 1.5s;
}

@keyframes mascotFloat {

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

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

@keyframes cardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

/* Mobile */
@media (max-width: 900px) {
    .memory-brand-section {
        padding: 70px 20px;
    }

    .memory-brand-container {
        flex-direction: column;
        text-align: center;
        gap: 35px;
    }

    .memory-brand-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .memory-brand-visual {
        width: 100%;
        min-height: 320px;
    }

    .memory-brand-visual img {
        width: 260px;
        right: 50%;
        transform: translateX(50%);
    }

    .floating-card {
        font-size: .8rem;
        padding: 9px 13px;
    }

    .card-search {
        top: 10px;
        right: 55%;
    }

    .card-social {
        top: 80px;
        right: 8%;
    }

    .card-growth {
        bottom: 80px;
        right: 60%;
    }

    .card-strategy {
        bottom: 20px;
        right: 15%;
    }
}


/* Base Sticker */

.brand-sticker {
    position: absolute;
    z-index: 1;
    animation: stickerFloat 4s ease-in-out infinite;
    pointer-events: none;
}

.brand-sticker img {
    width: 220px;
    /* Increased from 130px */
    height: auto;
    display: block;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .20));
}

/* Desktop Positions */

.sticker-seo {
    top: 40px;
    left: 2%;
    transform: rotate(-12deg);
}

.sticker-social {
    top: 40px;
    right: 2%;
    transform: rotate(10deg);
    animation-delay: .7s;
}

.sticker-branding {
    bottom: 40px;
    left: 3%;
    transform: rotate(-8deg);
    animation-delay: 1s;
}

.sticker-growth {
    bottom: 40px;
    right: 3%;
    transform: rotate(8deg);
    animation-delay: 1.4s;
}

@keyframes stickerFloat {

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

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

.image-wave-section {
    position: relative;
    background: #f3e4cf;
    min-height: 720px;
    overflow: hidden;
    padding: 170px 7% 190px;
}

.top-wave,
.bottom-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 1;
    pointer-events: none;
}

.top-wave {
    top: -1px;
}

.bottom-wave {
    bottom: -1px;
}

.top-wave path {
    fill: #3E51D1;
}

.bottom-wave path {
    fill: #3DB548;
}

.wave-content {
    position: relative;
    z-index: 3;
    max-width: 1250px;
    margin: 0 auto;
    font-family: "AbeatbyKai", cursive;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;
    gap: 70px;
}

.wave-text h2 {
    font-size: clamp(2.3rem, 5vw, 4.5rem);
    line-height: 1.05;
    color: #111;
    margin-bottom: 24px;
}

.wave-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
    max-width: 560px;
}

.wave-images {
    position: relative;
    height: 430px;
    width: 400px;
}

.wave-img {
    position: absolute;
    width: 280px;
    height: 360px;
    object-fit: cover;
    border-radius: 24px;
    box-shadow: 0 18px 35px rgba(0, 0, 0, .22);
}

.img-one {
    left: 0;
    top: 35px;
    transform: rotate(-5deg);
}

.img-two {
    left: 240px;
    top: 0;
    transform: rotate(3deg);
    z-index: 2;
}

.img-three {
    right: 0;
    top: 45px;
    transform: rotate(7deg);
}

/* Mobile */
@media (max-width: 900px) {
    .image-wave-section {
        padding: 130px 20px 150px;
    }

    .wave-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .wave-text p {
        margin: 0 auto;
    }

    .wave-images {
        height: auto;
        display: flex;
        gap: 14px;
        overflow-x: auto;
        padding: 20px 5px;
    }

    .wave-img {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        min-width: 220px;
        height: 280px;
    }
}

.services-push-section {
    position: relative;
    overflow: hidden;
    background: #3DB548;
    padding: 90px 20px;
}

.services-header {
    text-align: center;
    margin-bottom: 45px;
    font-family: "AbeatbyKai", cursive;
    /* text-shadow: 3px 3px 0 rgba(19, 17, 17, 0.65); */

}

.services-header h2 {
    color: #fff;
    /* font-size: clamp(2.2rem, 5vw, 4rem); */
    font-size: clamp(2.3rem, 5vw, 4.5rem);

}

.services-header p {
    color: rgba(255, 255, 255, .9);
    font-size: 1.15rem;
}

.single-push-stage {
    position: relative;
    width: 100vw;
    height: 370px;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
}

.push-slide {
    position: absolute;
    top: 50%;
    left: -900px;
    display: flex;
    align-items: center;
    gap: 20px;
    transform: translateY(-50%);
}

.push-slide.animate {
    /* animation: pushOneService 6s ease-in-out forwards; */
    animation: pushOneService 6s ease-in-out forwards;

}

.push-mascot {
    width: 330px;
    height: auto;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .25));
    animation: mascotWalk .6s ease-in-out infinite;
}

.service-card {
    width: 430px;
    min-height: 155px;
    background: #fff;
    border: 4px solid #111;
    border-radius: 28px;
    padding: 24px 28px;
    box-shadow: 8px 8px 0 #e5b300;
    text-align: left;
    font-family: "AbeatbyKai", cursive;

}

.service-card span {
    font-size: 2rem;
}

.service-card h3 {
    margin: 8px 0;
    color: #034883;
    font-size: 1.5rem;
}

.service-card p {
    margin: 0;
    color: #444;
    line-height: 1.55;
}

@keyframes pushOneService {
    0% {
        left: -900px;
        opacity: 0;
        transform: translateY(-50%);
    }

    15% {
        opacity: 1;
    }

    35% {
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    55% {
        left: 50%;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    90% {
        left: calc(100vw + 900px);
        opacity: 1;
        transform: translateY(-50%);
    }

    100% {
        left: calc(100vw + 900px);
        opacity: 0;
        transform: translateY(-50%);
    }
}

@keyframes mascotWalk {

    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-7px) rotate(1deg);
    }
}

.services-action {
    text-align: center;
    margin-top: 40px;
    font-family: "AbeatbyKai", cursive;

}

.services-btn {
    display: inline-flex;
    background: #e5b300;
    color: #111;
    padding: 16px 36px;
    border-radius: 999px;
    border: 3px solid #111;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .25);
}

@media (max-width: 768px) {
    .single-push-stage {
        height: 420px;
    }

    .push-slide {
        left: -520px;
        flex-direction: column;
        gap: 10px;
    }

    .push-mascot {
        width: 220px;
    }

    .service-card {
        width: 90vw;
        max-width: 350px;
        text-align: center;
    }

    @keyframes pushOneService {
        0% {
            left: -520px;
            opacity: 0;
            transform: translateY(-50%);
        }

        15% {
            opacity: 1;
        }

        35% {
            left: 50%;
            opacity: 1;
            transform: translate(-50%, -50%);
        }

        55% {
            left: 50%;
            opacity: 1;
            transform: translate(-50%, -50%);
        }

        90% {
            left: calc(100vw + 520px);
            opacity: 1;
            transform: translateY(-50%);
        }

        100% {
            left: calc(100vw + 520px);
            opacity: 0;
            transform: translateY(-50%);
        }
    }
}

.service-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 10px;
    margin-bottom: 35px;
    font-family: "AbeatbyKai", cursive;

}

.service-tab {
    padding: 10px 18px;

    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .75);

    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 999px;

    font-size: .92rem;
    font-weight: 600;

    transition: .35s ease;
}

.service-tab.active {
    background: #e5b300;
    color: #111;
    border-color: #e5b300;

    transform: translateY(-3px);

    box-shadow:
        0 6px 15px rgba(229, 179, 0, .35);
}

.why-content-wrapper {
    position: relative;
    z-index: 3;

    max-width: 1200px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    align-items: center;

    padding: 120px 20px;
}

.why-card-slider {
    position: relative;
    height: 340px;
}

.why-slide {
    position: absolute;
    inset: 0;

    background: #fff;

    border-radius: 30px;
    border: 4px solid #111;

    padding: 35px;

    text-align: center;

    box-shadow: 10px 10px 0 #e5b300;

    opacity: 0;

    animation: fadeCards 16s infinite;
}

.why-slide img {
    width: 100px;
    margin-bottom: 20px;
}

.why-slide h3 {
    font-family: "AbeatbyKai", cursive;
    color: #034883;
    font-size: 2rem;
    margin-bottom: 10px;
}

.why-slide p {
    color: #555;
    line-height: 1.7;
}

.why-slide:nth-child(1) {
    animation-delay: 0s;
}

.why-slide:nth-child(2) {
    animation-delay: 4s;
}

.why-slide:nth-child(3) {
    animation-delay: 8s;
}

.why-slide:nth-child(4) {
    animation-delay: 12s;
}

@keyframes fadeCards {

    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    75% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.why-text h2 {
    font-family: "AbeatbyKai", cursive;
    color: #fff;
    /* font-size: clamp(2.5rem, 5vw, 4.5rem); */
    /* font-size: clamp(2.3rem, 5vw, 4.5rem); */
    font-size: clamp(2.3rem, 5vw, 4.5rem);


    line-height: 1;
    margin-bottom: 20px;
}

.why-text p {
    color: #fff;
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 30px;
    font-family: "AbeatbyKai", cursive;
    text-shadow: 5px 5px 0 rgba(227, 227, 227, 0.22)
}

.why-tag {
    display: inline-block;

    background: #e5b300;
    color: #111;

    padding: 8px 18px;

    border-radius: 999px;

    margin-bottom: 20px;

    font-weight: 700;
    font-family: "AbeatbyKai", cursive;

}

.why-btn {
    display: inline-flex;

    padding: 16px 30px;

    background: #fff;
    color: #034883;

    text-decoration: none;

    border-radius: 999px;

    font-weight: 700;

    border: 3px solid #111;

    box-shadow: 6px 6px 0 #e5b300;
    font-family: "AbeatbyKai", cursive;
}

.why-wave-section {
    position: relative;
    background: #f3e4cf;
    overflow: hidden;
    padding: 130px 20px 150px;
}

.why-wave-section .top-wave,
.why-wave-section .bottom-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
    pointer-events: none;
}

.why-wave-section .top-wave {
    top: -1px;
}

.why-wave-section .bottom-wave {
    bottom: -1px;
}

.why-wave-section .top-wave path {
    fill: #3DB548;
}

.why-wave-section .bottom-wave path {
    fill: #C90008;
}

.why-content-wrapper {
    position: relative;
    z-index: 5;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.why-card-slider {
    position: relative;
    height: 310px;
}

.why-slide {
    position: absolute;
    inset: 0;

    background: #fff;
    border: 4px solid #111;
    border-radius: 30px;
    padding: 40px 35px;
    text-align: center;

    box-shadow: 12px 12px 0 #e5b300;

    opacity: 0;
    transform: translateY(20px);
    animation: whyFade 16s infinite;
}

.why-slide:nth-child(1) {
    animation-delay: 0s;
}

.why-slide:nth-child(2) {
    animation-delay: 4s;
}

.why-slide:nth-child(3) {
    animation-delay: 8s;
}

.why-slide:nth-child(4) {
    animation-delay: 12s;
}

.why-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;

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

    background: #034883;
    color: #fff;
    border-radius: 22px;
    font-size: 2.2rem;
}

.why-slide h3 {
    font-family: "AbeatbyKai", cursive;
    font-size: 2rem;
    color: #034883;
    margin-bottom: 12px;
}

.why-slide p {
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
}

@keyframes whyFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    8% {
        opacity: 1;
        transform: translateY(0);
    }

    22% {
        opacity: 1;
        transform: translateY(0);
    }

    30% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.why-text {
    text-align: left;
}

.why-tag {
    display: inline-block;
    background: #e5b300;
    color: #111;
    padding: 10px 20px;
    border-radius: 999px;
    border: 3px solid #111;
    font-weight: 800;
    margin-bottom: 22px;
}

.why-text h2 {
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    line-height: 1;
    color: #C90008;
    margin-bottom: 24px;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, .22)
}

.why-text p {
    color: #222;
    font-size: 1.15rem;
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 560px;


}

.why-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: #fff;
    color: #034883;
    padding: 15px 32px;
    border-radius: 999px;

    border: 3px solid #111;
    box-shadow: 6px 6px 0 #e5b300;

    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 768px) {
    .why-wave-section {
        padding: 110px 16px 130px;
    }

    .why-content-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .why-text {
        text-align: center;
    }

    .why-text p {
        margin-left: auto;
        margin-right: auto;
    }

    .why-card-slider {
        height: 300px;
    }

    .why-slide {
        padding: 30px 24px;
    }
}

.service-waiting {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    text-align: center;

    opacity: 0;

    transition: .4s ease;

    z-index: 2;
}

.service-waiting.show {
    opacity: 1;
}

.service-waiting img {
    width: 220px;
    animation: waitingBounce 2s ease-in-out infinite;
}

.service-waiting p {
    margin-top: 10px;

    color: #fff;

    font-family: "AbeatbyKai", cursive;
    font-size: 1.2rem;
}

@keyframes waitingBounce {

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

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

.why-showcase {
    position: relative;
    height: 500px;
    width: 100%;
}

.why-slide {
    position: absolute;
    inset: 0;

    border-radius: 35px;
    overflow: hidden;

    opacity: 0;

    animation: whyFade 16s infinite;
}

.why-slide:nth-child(1) {
    animation-delay: 0s;
}

.why-slide:nth-child(2) {
    animation-delay: 4s;
}

.why-slide:nth-child(3) {
    animation-delay: 8s;
}

.why-slide:nth-child(4) {
    animation-delay: 12s;
}

.why-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .85),
            rgba(0, 0, 0, .4),
            transparent);
}

.why-overlay h3 {
    font-family: "AbeatbyKai", cursive;
    color: #fff;
    font-size: 2.3rem;
    margin-bottom: 8px;
}

.why-overlay p {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    font-family: "AbeatbyKai", cursive;
}

@keyframes whyFade {

    0% {
        opacity: 0;
        transform: scale(1.05);
    }

    8% {
        opacity: 1;
        transform: scale(1);
    }

    22% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 0;
        transform: scale(1.05);
    }

    100% {
        opacity: 0;
    }
}

/* ================================
   TALES OF TRANSFORMATION SECTION
================================ */

.trans-stories-section {
    position: relative;
    background: #C90008;
    overflow: hidden;
    padding: 150px 20px 170px;
}

/* Waves */

.trans-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 130px;
    z-index: 1;
    pointer-events: none;
}

.trans-wave-top {
    top: -1px;
    animation: transWaveTopMove 6s ease-in-out infinite;
}

.trans-wave-bottom {
    bottom: -1px;
    animation: transWaveBottomMove 7s ease-in-out infinite;
}

.trans-wave path {
    fill: #f3e4cf;
}

@keyframes transWaveTopMove {

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

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

@keyframes transWaveBottomMove {

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

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

/* Content */

.trans-inner {
    position: relative;
    z-index: 5;
    max-width: 1250px;
    margin: 0 auto;
}

.trans-heading {
    text-align: center;
    margin-bottom: 65px;
}

.trans-heading h2 {
    font-family: "AbeatbyKai", cursive;
    /* font-size: clamp(2.8rem, 6vw, 5.2rem); */
    font-size: clamp(2.3rem, 5vw, 4.5rem);

    line-height: 1;
    color: #fff;
    margin-bottom: 18px;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, .22);

}

.trans-heading p {
    font-family: "AbeatbyKai", cursive;
    /* text-shadow: 5px 5px 0 rgba(0, 0, 0, .22); */

    color: rgba(255, 255, 255, .92);
    font-size: 1.2rem;
    line-height: 1.7;
}

/* Broken page/card */

.trans-break-card {
    position: relative;
    background: #fff;
    border: 4px solid #111;
    border-radius: 36px;
    padding: 70px 42px 52px;
    box-shadow: 14px 14px 0 #e5b300;
    overflow: hidden;
}

/* animated crack/ripped paper */

.trans-crack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58px;
    background: #3E51D1;
    z-index: 3;

    clip-path: polygon(0 0,
            7% 70%,
            14% 25%,
            23% 78%,
            32% 30%,
            41% 74%,
            50% 22%,
            59% 76%,
            68% 28%,
            77% 72%,
            87% 24%,
            95% 70%,
            100% 40%,
            100% 0);

    animation: crackShake 1.2s ease-in-out infinite;
}

@keyframes crackShake {

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

    50% {
        transform: translateY(4px);
    }
}

/* Logos */

.trans-logo-grid {
    position: relative;
    z-index: 4;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.trans-logo {
    background: #f8f8f8;
    border: 3px solid #111;
    border-radius: 22px;
    height: 105px;

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

    padding: 18px;

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

    opacity: 0;
    transform: translateY(-110px) scale(.7) rotate(-8deg);

    animation:
        transLogoBurst .9s ease forwards,
        transLogoFloat 4.5s ease-in-out infinite;
}

.trans-logo img {
    max-width: 100%;
    max-height: 70px;
    object-fit: contain;
    display: block;
}

/* staggered entry */

.trans-logo:nth-child(1) {
    animation-delay: .05s, 1.1s;
}

.trans-logo:nth-child(2) {
    animation-delay: .15s, 1.3s;
}

.trans-logo:nth-child(3) {
    animation-delay: .25s, 1.5s;
}

.trans-logo:nth-child(4) {
    animation-delay: .35s, 1.7s;
}

.trans-logo:nth-child(5) {
    animation-delay: .45s, 1.9s;
}

.trans-logo:nth-child(6) {
    animation-delay: .55s, 2.1s;
}

.trans-logo:nth-child(7) {
    animation-delay: .65s, 2.3s;
}

.trans-logo:nth-child(8) {
    animation-delay: .75s, 2.5s;
}

.trans-logo:nth-child(9) {
    animation-delay: .85s, 2.7s;
}

.trans-logo:nth-child(10) {
    animation-delay: .95s, 2.9s;
}

.trans-logo:nth-child(11) {
    animation-delay: 1.05s, 3.1s;
}

.trans-logo:nth-child(12) {
    animation-delay: 1.15s, 3.3s;
}

.trans-logo:nth-child(13) {
    animation-delay: 1.25s, 3.5s;
}

.trans-logo:nth-child(14) {
    animation-delay: 1.35s, 3.7s;
}

.trans-logo:nth-child(15) {
    animation-delay: 1.45s, 3.9s;
}

.trans-logo:nth-child(16) {
    animation-delay: 1.55s, 4.1s;
}

@keyframes transLogoBurst {
    0% {
        opacity: 0;
        transform: translateY(-120px) scale(.45) rotate(-12deg);
    }

    65% {
        opacity: 1;
        transform: translateY(12px) scale(1.08) rotate(3deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}

@keyframes transLogoFloat {

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

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

/* slight variation */

.trans-logo:nth-child(even) {
    animation-duration: .9s, 5.3s;
}

.trans-logo:nth-child(odd) {
    animation-duration: .9s, 4.6s;
}

/* Mobile */

@media (max-width: 900px) {
    .trans-stories-section {
        padding: 125px 16px 145px;
    }

    .trans-break-card {
        padding: 58px 22px 38px;
        border-radius: 28px;
    }

    .trans-logo-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .trans-logo {
        height: 90px;
        padding: 14px;
    }

    .trans-logo img {
        max-height: 58px;
    }
}

@media (max-width: 480px) {
    .trans-logo-grid {
        grid-template-columns: 1fr;
    }
}

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

.trans-break-card {

    background: #fff;
    border-radius: 40px;

    padding: 45px;

    box-shadow: 0 30px 60px rgba(0, 0, 0, .15);

    display: grid;

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

    gap: 28px;

    justify-items: center;

    align-items: center;

    position: relative;

    overflow: hidden;
}


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

.floating-logo {

    width: 170px;
    height: 135px;

    background: #fff;

    border-radius: 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 18px;

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

    transition: .35s;

    animation: floatLogo 6s ease-in-out infinite;

}

.floating-logo:hover {

    transform: translateY(-10px) scale(1.05);

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

}


/* ===========================================
   LOGO IMAGES
=========================================== */

.floating-logo img {

    max-width: 100%;

    max-height: 90px;

    width: auto;

    height: auto;

    object-fit: contain;

    display: block;

}


/* ===========================================
   INDIVIDUAL LOGO ADJUSTMENTS
=========================================== */

/* Wide logos */

.logo1 img,
.logo6 img,
.logo8 img,
.logo11 img,
.logo12 img,
.logo15 img {
    max-width: 140px;
}

/* Very tall logos */

.logo13 img,
.logo14 img,
.logo17 img {
    max-height: 105px;
}

/* Small logos */

.logo2 img,
.logo4 img,
.logo9 img,
.logo10 img,
.logo16 img,
.logo18 img {
    max-width: 115px;
}

/* Skinvibes */

.logo5 img {
    max-width: 130px;
}

/* SA Homes */

.logo3 img {
    max-width: 120px;
}


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

.logo1 {
    animation-delay: 0s;
}

.logo2 {
    animation-delay: .3s;
}

.logo3 {
    animation-delay: .6s;
}

.logo4 {
    animation-delay: .9s;
}

.logo5 {
    animation-delay: 1.2s;
}

.logo6 {
    animation-delay: 1.5s;
}

.logo7 {
    animation-delay: 1.8s;
}

.logo8 {
    animation-delay: 2.1s;
}

.logo9 {
    animation-delay: 2.4s;
}

.logo10 {
    animation-delay: 2.7s;
}

.logo11 {
    animation-delay: 3s;
}

.logo12 {
    animation-delay: 3.3s;
}

.logo13 {
    animation-delay: 3.6s;
}

.logo14 {
    animation-delay: 3.9s;
}

.logo15 {
    animation-delay: 4.2s;
}

.logo16 {
    animation-delay: 4.5s;
}

.logo17 {
    animation-delay: 4.8s;
}

.logo18 {
    animation-delay: 5.1s;
}


@keyframes floatLogo {

    0% {

        transform:
            translateY(0) rotate(-2deg);

    }

    25% {

        transform:
            translateY(-8px) translateX(4px) rotate(2deg);

    }

    50% {

        transform:
            translateY(-15px) translateX(-5px) rotate(-2deg);

    }

    75% {

        transform:
            translateY(-8px) translateX(5px) rotate(1deg);

    }

    100% {

        transform:
            translateY(0) rotate(-2deg);

    }

}


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

@media(max-width:1200px) {

    .trans-break-card {

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

    }

}

@media(max-width:768px) {

    .trans-break-card {

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

        padding: 30px;

        gap: 18px;

    }

    .floating-logo {

        width: 140px;
        height: 110px;

        padding: 15px;

    }

    .floating-logo img {

        max-height: 70px;

    }

}

@media(max-width:520px) {

    .trans-break-card {

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

    }

    .floating-logo {

        width: 130px;
        height: 100px;

    }

    .floating-logo img {

        max-height: 60px;

    }

}

/* =====================================
   FINAL CTA SECTION
===================================== */

.cta-wave-section {
    position: relative;
    overflow: hidden;

    /* background:linear-gradient(
        135deg,
        #FFD60A,
        #FFC300
    ); */
    background: #3DB548;

    padding: 140px 20px;
}

/* Waves */

.cta-top-wave,
.cta-bottom-wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: 130px;
    z-index: 1;
}

.cta-top-wave {
    top: 0;
    animation: waveMoveTop 6s ease-in-out infinite;
}

.cta-bottom-wave {
    bottom: 0;
    animation: waveMoveBottom 7s ease-in-out infinite;
}

.cta-top-wave path,
.cta-bottom-wave path {
    fill: #3E51D1;
}

@keyframes waveMoveTop {

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

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

@keyframes waveMoveBottom {

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

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

/* Layout */

.cta-container {
    position: relative;
    z-index: 5;

    max-width: 1300px;
    margin: auto;

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

    gap: 80px;
}

/* Mascot Area */

.cta-mascot-wrap {
    position: relative;
}

.cta-mascot {
    width: 420px;
    max-width: 100%;

    animation: mascotFloat 4s ease-in-out infinite;
}

@keyframes mascotFloat {

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

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

/* Floating Icons */

.floating-icon {
    position: absolute;

    font-size: 2rem;

    animation: iconFloat 4s ease-in-out infinite;
}

.icon1 {
    top: 20px;
    left: -20px;
}

.icon2 {
    top: 120px;
    right: -20px;
}

.icon3 {
    bottom: 40px;
    left: -10px;
}

.icon4 {
    bottom: 60px;
    right: -30px;
}

@keyframes iconFloat {

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

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

/* Content */

.cta-content {
    max-width: 600px;
}

.cta-content h2 {

    font-family: "AbeatbyKai", cursive;

    /* font-size: clamp(3rem, 6vw, 5.5rem); */
    font-size: clamp(2.3rem, 5vw, 4.5rem);


    line-height: 1;

    color: #ffffff;

    margin-bottom: 25px;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, .22);

}

.cta-content p {
    font-family: "AbeatbyKai", cursive;

    font-size: 1.15rem;

    line-height: 1.9;

    color: #ffffff;
    /* text-shadow: 5px 5px 0 rgba(0, 0, 0, .22); */


    margin-bottom: 35px;
}

/* Button */

.cta-button {
    font-family: "AbeatbyKai", cursive;

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

    text-decoration: none;

    background: #F8DF09;
    color: #000000;

    padding: 18px 38px;

    border-radius: 999px;

    font-weight: 700;

    border: 3px solid #111;

    box-shadow: 10px 10px 0 #ffffff;

    transition: .3s;
}

.cta-button:hover {

    transform:
        translateY(-5px) scale(1.03);

    box-shadow: 14px 14px 0 #FF6B35;
}

/* Mobile */

@media(max-width:992px) {

    .cta-container {

        flex-direction: column;

        text-align: center;

        gap: 40px;
    }

    .cta-mascot {
        width: 300px;
    }

    .cta-content {
        max-width: 100%;
    }

    .cta-content p {
        font-size: 1rem;
    }

    .cta-button {
        width: 100%;
        max-width: 420px;
    }
}

.premium-footer {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 100px 20px 70px;

    background: linear-gradient(180deg,
            #3DB548 0%,
            #F8DF09 25%,
            #DF4D13 55%,
            #C90008 75%,
            #3E51D1 100%);
}

.footer-card {
    max-width: 1100px;
    margin: auto;
    padding: 60px 40px;
    border-radius: 40px;

    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .22);
}

.footer-logo {
    width: 120px;
    margin-bottom: 20px;
    animation: footerFloat 4s ease-in-out infinite;
}

.footer-brand-name {
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 1;
    color: #F5F5F5;
    margin-bottom: 12px;

    text-shadow:
        4px 4px 0 rgba(0, 0, 0, .35),
        0 8px 25px rgba(0, 0, 0, .28);

    animation: footerFloat 4s ease-in-out infinite;
}

.footer-tagline {
    font-family: "AbeatbyKai", cursive;
    color: #F5F5F5;
    letter-spacing: 4px;
    font-size: 1rem;
}

.footer-divider {
    width: 230px;
    height: 8px;
    border-radius: 999px;
    margin: 28px auto;

    background: linear-gradient(90deg,
            #3DB548,
            #F8DF09,
            #DF4D13,
            #C90008,
            #3E51D1);
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.footer-links a {
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.footer-links a:hover {
    color: #F8DF09;
}

.footer-links span {
    color: rgba(255, 255, 255, .7);
}

.footer-address {
    max-width: 760px;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, .95);
    line-height: 1.8;
    font-weight: 600;
}

.footer-copy {
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
}

@keyframes footerFloat {

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

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

@media(max-width:768px) {
    .footer-card {
        padding: 45px 22px;
        border-radius: 30px;
    }

    .footer-links {
        flex-direction: column;
        gap: 8px;
    }

    .footer-links span {
        display: none;
    }

    .footer-tagline {
        letter-spacing: 2px;
    }
}

/* #elephantCursor,
#antCursor{
    position:fixed;
    pointer-events:none;
    z-index:99999;
    transform:translate(-50%,-50%);
}

#elephantCursor{
    width:70px;
}

#antCursor{
    width:55px;
} */

.custom-pointer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.custom-pointer.show {
    opacity: 1;
    visibility: visible;
}

#elephantCursor,
#antCursor {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#elephantCursor {
    width: 75px;
}

#antCursor {
    width: 55px;
}



/* PRELOADER CONTENT SWAP ONLY - SUGGESTION */

.preloader-hero-img {
    width: min(620px, 82vw);
    z-index: 2;
    position: relative;
    filter: drop-shadow(0 30px 25px rgba(0, 0, 0, .28));
    animation: dropIn 1s cubic-bezier(.34, 1.56, .64, 1), floaty 3s ease-in-out infinite 1s;
}

.preloader-sticker {
    position: absolute;
    z-index: 4;
    font-family: "AbeatbyKai", cursive;
    /* color: #ffb000;
    background: #fff;
    border: 6px solid #fff; */
    color: #ffffff;
    background: #000000;
    border: 6px solid #000000;
    border-radius: 15px;
    text-shadow: 2px 2px 0 var(--red);
    font-size: clamp(1.1rem, 2.2vw, 2.2rem);
    line-height: .9;
    box-shadow: 0 10px 0 rgba(0, 0, 0, .12);
}

.preloader-sticker-1 {
    left: 14%;
    top: 30%;
    transform: rotate(12deg);
}

.preloader-sticker-2 {
    right: 13%;
    top: 60%;
    transform: rotate(-12deg);
}

/* YELLOW HERO CONTENT SWAP ONLY */

.crav-hero {
    background: #F8DF09;
}

.hero-bg-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(5rem, 22vw, 24rem);
    /* color: #C90008; */
    color: rgba(255, 255, 255, .22);
    -webkit-text-stroke: 4px #fff;
    line-height: .8;
    z-index: 0;
    animation: pulse 1.5s infinite alternate;
}

.hero-main-logo {
    position: absolute;
    top: 9vh;
    width: 150px;
    z-index: 5;
    animation: bounce .9s .35s both;
}

.crav-hero .crav-mascot {
    width: min(520px, 72vw);
    z-index: 4;
    top: 0;
    animation: dropIn 1s cubic-bezier(.34, 1.56, .64, 1), floaty 3s ease-in-out infinite 1s;
}

.hero-brand-name {
    position: absolute;
    bottom: 14vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;

    width: 90%;
    max-width: 900px;
    text-align: center;
    text-transform: uppercase;
    pointer-events: none;
}

.hero-line-1 {
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(1rem, 1.7vw, 1.7rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: 2px;
    line-height: 1.1;
    text-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
}

.hero-to {
    display: block;
    width: fit-content;
    margin: 8px auto 6px;
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(.8rem, 1.2vw, 1.1rem);
    font-weight: 900;
    color: #fff;
    padding: 0 22px;
    border-bottom: 3px solid #fff;
}

.hero-line-2 {
    font-family: "AbeatbyKai", cursive;
    font-size: clamp(1.8rem, 3.4vw, 3.8rem);
    color: #C90008;
    -webkit-text-stroke: 2px #fff;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, .18);
    line-height: .95;
}

.ready-grow-btn {
    position: absolute;
    bottom: 11vh;
    z-index: 6;
    background: var(--red);
    color: #fff;
    font-family: "AbeatbyKai", cursive;
    font-size: 1.4rem;
    font-weight: 900;
    padding: 14px 34px;
    border-radius: 999px;
    border: 4px solid #111;
    box-shadow: 6px 6px 0 #111;
}

/* Mobile */

@media(max-width:768px) {
    .preloader-hero-img {
        width: 88vw;
    }

    .preloader-sticker {
        font-size: .95rem;
        border-width: 4px;
    }

    .preloader-sticker-1 {
        left: 5%;
        top: 32%;
    }

    .preloader-sticker-2 {
        right: 5%;
        top: 62%;
    }

    .hero-main-logo {
        width: 110px;
    }

    .crav-hero .crav-mascot {
        width: 82vw;
    }

    .hero-brand-name {
        bottom: 20vh;
        text-align: center;
    }

    .ready-grow-btn {
        bottom: 10vh;
        font-size: 1.1rem;
    }
}

/* PRELOADER CONTENT SWAP ONLY - SUGGESTION */

.services-push-section {
    transition: background-color .8s ease;
}

.services-push-section {
    --service-color: #F8DF09;

    position: relative;
    overflow: hidden;
    background: var(--service-color);
    padding: 90px 20px;
    transition: background-color 0.8s ease;
}

.bottom-wave path {
    fill: var(--service-color);
    transition: fill 0.8s ease;
}



/* 2026 responsive, navigation and accessibility refinements */
:root {
    --sean-yellow: #F8DF09;
    --sean-orange: #DF4D13;
    --sean-blue: #3E51D1;
    --sean-green: #3DB548;
    --sean-red: #C90008;
    --body-font: system-ui, -apple-system, "Segoe UI", Arial, sans-serif
}

body {
    font-family: var(--body-font);
    font-size: 16px;
    line-height: 1.6
}

h1,
h2,
h3,
.hero-brand-name,
.service-tab,
.btn,
.cta-button,
.why-btn,
.footer-brand-name {
    font-family: "AbeatbyKai", var(--body-font)
}

.site-header {
    pointer-events: none
}

.menu-btn {
    display: flex !important;
    pointer-events: auto;
    width: 56px;
    height: 46px;
    background: var(--sean-yellow);
    border: 3px solid #111;
    box-shadow: 4px 4px 0 #111;
    cursor: pointer
}

.menu-btn:focus-visible,
.mobile-menu a:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 4px solid #fff;
    outline-offset: 3px
}

.mobile-menu {
    background: #111;
    padding: 72px 30px 34px;
    gap: 18px
}

.mobile-menu nav {
    display: grid;
    gap: 12px
}

.mobile-menu a {
    font-family: "AbeatbyKai", var(--body-font);
    font-size: clamp(1.15rem, 4vw, 1.55rem);
    line-height: 1.2;
    padding: 12px 16px;
    border: 2px solid #111;
    border-radius: 14px;
    color: #111;
    box-shadow: 4px 4px 0 #fff
}

.mobile-menu .menu-home {
    background: var(--sean-yellow)
}

.mobile-menu .menu-about {
    background: var(--sean-orange)
}

.mobile-menu .menu-services {
    background: var(--sean-blue);
    color: #fff
}

.mobile-menu .menu-testimonials {
    background: var(--sean-green)
}

.mobile-menu .menu-contact {
    background: var(--sean-red);
    color: #fff
}

.mobile-menu img {
    margin-bottom: 8px
}

.close-btn {
    cursor: pointer
}

.seo-badge {
    position: absolute;
    z-index: 8;
    top: 95px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 8px 15px;
    border: 2px solid #111;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 700 .78rem/1.2 var(--body-font);
    white-space: nowrap;
    box-shadow: 4px 4px 0 #111
}

section[id] {
    scroll-margin-top: 70px
}

.contact-section {
    padding: 90px max(20px, 6vw);
    background: #111
}

.contact-panel {
    max-width: 1180px;
    margin: auto
}

.contact-copy h2 {
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1.05;
    margin: 8px 0 18px
}

.contact-kicker {
    display: inline-block;
    background: var(--sean-yellow);
    color: #111;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 800
}

.contact-details {
    display: grid;
    gap: 8px;
    margin-top: 24px
}

.contact-details a {
    text-decoration: underline;
    text-underline-offset: 4px
}

.contact-panel label {
    display: grid;
    gap: 6px;
    font-weight: 700
}

.contact-panel input,
.contact-panel textarea,
.contact-panel select {
    width: 100%;
    border: 3px solid #111;
    border-radius: 14px;
    padding: 13px 15px;
    font: inherit;
    background: #fff;
    color: #111
}

.contact-panel textarea {
    min-height: 130px;
    resize: vertical
}

.website-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}

.form-status {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-weight: 700
}

.premium-footer {
    font-family: var(--body-font)
}

@media(max-width:900px) {
    .contact-panel {
        grid-template-columns: 1fr
    }

    .hero-description,
    .wave-text p,
    .cta-content p {
        font-size: 1rem
    }

    .service-nav {
        gap: 8px
    }

    .service-tab {
        font-size: .8rem
    }

    .seo-badge {
        top: 82px;
        max-width: calc(100% - 30px);
        white-space: normal;
        text-align: center
    }
}

@media(max-width:600px) {
    .site-header {
        padding: 16px
    }

    .mobile-menu {
        width: 100%
    }

    .hero-brand-name {
        font-size: clamp(1.35rem, 7vw, 2.3rem)
    }

    .hero-description h2,
    .services-header h2,
    .wave-text h2,
    .why-text h2,
    .trans-heading h2,
    .cta-content h2 {
        font-size: clamp(1.8rem, 9vw, 2.7rem)
    }

    .hero-description {
        padding-inline: 20px
    }

    .services-push-section {
        padding-inline: 16px
    }

    .service-nav {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .service-tab {
        padding: 9px 8px
    }

    .footer-links {
        flex-direction: column !important
    }

    .footer-links span {
        display: none
    }

    .contact-section {
        padding: 70px 15px
    }

    .contact-panel {
        padding: 24px 18px;
        border-width: 4px;
        box-shadow: 8px 8px 0 var(--sean-yellow)
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

/* =====================================================
   MOBILE READABILITY & SECTION SPACING FIXES — 2026-07
===================================================== */
@media (max-width: 900px) {

    /* Touch devices do not need the decorative mouse-following pointers. */
    #customPointer,
    #elephantCursor,
    #antCursor {
        display: none !important;
        visibility: hidden !important;
    }

    /* Keep decorative stickers from covering the introduction copy. */
    .brand-hero-content .brand-sticker {
        display: none !important;
    }

    .brand-hero-content {
        padding: 58px 20px 78px !important;
        min-height: auto !important;
    }

    .brand-hero-content .hero-description {
        width: 100%;
        max-width: 680px;
        padding: 0 !important;
    }

    .brand-hero-content .hero-description h2 {
        max-width: 100%;
        margin: 0 auto 20px;
        font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .brand-hero-content .hero-subtext,
    .brand-hero-content .hero-description b {
        font-size: 1rem !important;
        line-height: 1.65;
    }

    /* Make the audience section images clear and contained on mobile. */
    .image-wave-section {
        min-height: auto !important;
        padding: 125px 18px 145px !important;
    }

    .wave-content {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 34px !important;
        width: 100%;
    }

    .wave-text {
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
    }

    .wave-text h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
        line-height: 1.12;
        margin-bottom: 18px;
        overflow-wrap: anywhere;
    }

    .wave-text p {
        font-family: "AbeatbyKai", cursive;
        font-size: 1rem !important;
        line-height: 1.65;
    }

    .wave-images {
        position: relative;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: min(100%, 560px) !important;
        height: auto !important;
        margin: 0 auto;
        padding: 0 !important;
        overflow: visible !important;
    }

    .wave-img,
    .wave-img.img-two,
    .wave-img.img-three {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        transform: none !important;
        border-radius: 18px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    }

    /* Prevent the Why section from colliding with Tales of Transformation. */
    .why-wave-section {
        min-height: auto !important;
        padding: 115px 18px 155px !important;
        overflow: hidden;
    }

    .why-content-wrapper {
        display: flex !important;
        flex-direction: column;
        gap: 34px !important;
        width: 100%;
    }

    .why-showcase {
        position: relative;
        order: 2;
        width: min(100%, 560px);
        height: 390px !important;
        margin: 0 auto;
        flex: 0 0 390px;
    }

    .why-text {
        order: 1;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        text-align: center !important;
    }

    .why-text h2 {
        font-size: clamp(1.9rem, 8.5vw, 2.75rem) !important;
        line-height: 1.12;
        margin-bottom: 18px;
        text-shadow: 3px 3px 0 rgba(0, 0, 0, .16);
        overflow-wrap: anywhere;
    }

    .why-text p {
        /* font-family: var(--body-font, Arial, sans-serif); */
        font-family: "AbeatbyKai", cursive;
        font-size: 1rem !important;
        line-height: 1.65;
        margin: 0 auto 24px;
    }

    .why-btn {
        margin: 5px 5px 8px;
        padding: 13px 21px;
        font-size: .92rem;
    }

    .why-slide {
        padding: 0 !important;
        border-radius: 24px !important;
    }

    .why-overlay {
        padding: 24px 18px !important;
    }

    .why-overlay h3 {
        font-size: 1.65rem !important;
    }

    .why-overlay p {
        font-size: .95rem !important;
        line-height: 1.5;
    }

    .trans-stories-section {
        position: relative;
        clear: both;
        margin-top: 0 !important;
        padding-top: 135px !important;
    }
}

@media (max-width: 520px) {
    .wave-images {
        grid-template-columns: 1fr;
        width: min(100%, 330px) !important;
    }

    .wave-img,
    .wave-img.img-two,
    .wave-img.img-three {
        aspect-ratio: 4 / 3;
    }

    .why-showcase {
        height: 320px !important;
        flex-basis: 320px;
    }

    .why-wave-section {
        padding-bottom: 145px !important;
    }
}

/* =====================================================
   READY-TO-HOST MOBILE PARITY, SOCIAL LINKS & SAFETY
   Keeps the desktop visual language while fitting it cleanly on phones.
===================================================== */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    overflow-x: clip;
}

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

.top-social-bar {
    position: fixed;
    z-index: 90;
    top: 20px;
    left: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.top-social-bar a,
.footer-social-links a,
.mobile-menu-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 13px;
    border: 2px solid #111;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font: 800 .78rem/1 var(--body-font);
    text-decoration: none;
    box-shadow: 3px 3px 0 #111;
    transition: transform .2s ease, box-shadow .2s ease;
}

.top-social-bar a:hover,
.footer-social-links a:hover,
.mobile-menu-social a:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 #111;
}

.top-social-bar a:nth-child(1),
.footer-social-links a:nth-child(1) {
    background: #DF4D13;
    color: #fff;
}

.top-social-bar a:nth-child(2),
.footer-social-links a:nth-child(2) {
    background: #3E51D1;
    color: #fff;
}

.top-social-bar a:nth-child(3),
.footer-social-links a:nth-child(3) {
    background: #3DB548;
}

.mobile-menu-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.mobile-menu-social a {
    box-shadow: 3px 3px 0 #fff;
}

.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 20px auto 24px;
}

@media (max-width: 900px) {
    .top-social-bar {
        position: absolute;
        top: 18px;
        left: 16px;
        max-width: calc(100% - 94px);
        gap: 6px;
    }

    .top-social-bar a {
        min-height: 36px;
        padding: 7px 10px;
        font-size: .68rem;
    }

    /* Hero: same composition as desktop, proportionally reduced. */
    .crav-hero {
        min-height: 100svh !important;
        height: 100svh !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .hero-bg-text {
        font-size: clamp(7rem, 43vw, 15rem) !important;
        -webkit-text-stroke-width: 2px !important;
    }

    .hero-main-logo {
        top: 8.5svh !important;
        width: clamp(92px, 26vw, 120px) !important;
    }

    .crav-hero .crav-mascot {
        position: absolute !important;
        top: 18svh !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: min(88vw, 480px) !important;
        max-height: 48svh !important;
        object-fit: contain !important;
    }

    .hero-brand-name {
        bottom: 9svh !important;
        width: calc(100% - 30px) !important;
    }

    .hero-line-1 {
        font-size: clamp(.9rem, 4vw, 1.2rem) !important;
        letter-spacing: 1px !important;
    }

    .hero-to {
        margin: 5px auto !important;
        font-size: .78rem !important;
        padding: 0 16px !important;
    }

    .hero-line-2 {
        font-size: clamp(2rem, 10.5vw, 3.4rem) !important;
        -webkit-text-stroke-width: 1px !important;
    }

    /* Preserve section personality but remove desktop overlaps/cropping. */
    main>section {
        width: 100%;
    }

    .services-header,
    .trans-heading,
    .cta-content {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
    }

    .single-push-stage {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
    }

    .push-slide {
        max-width: 100%;
    }

    .service-card {
        max-width: min(86vw, 430px);
    }

    .trans-break-card {
        width: 100% !important;
        max-width: 680px;
        margin-inline: auto;
        overflow: hidden;
    }

    .cta-container {
        width: 100% !important;
        max-width: 680px;
        padding-inline: 18px !important;
    }

    .cta-mascot-wrap,
    .cta-content {
        min-width: 0;
    }

    .premium-footer {
        padding-inline: 14px;
    }

    .footer-card {
        width: 100%;
        max-width: 680px;
        padding-inline: 18px !important;
    }
}

@media (max-width: 600px) {
    .site-header {
        z-index: 100;
    }

    .menu-btn {
        width: 50px;
        height: 42px;
    }

    .mobile-menu {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .mobile-menu nav {
        width: 100%;
    }

    .mobile-menu a {
        width: 100%;
        text-align: center;
    }

    .mobile-menu-social {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%;
    }

    .mobile-menu-social a {
        font-size: .68rem;
        padding-inline: 6px;
    }

    .brand-hero-content,
    .image-wave-section,
    .services-push-section,
    .why-wave-section,
    .trans-stories-section,
    .cta-wave-section {
        box-sizing: border-box;
    }

    .service-nav {
        width: 100%;
        max-width: 430px;
        margin-inline: auto;
    }

    .push-mascot {
        max-width: 46vw !important;
    }

    .service-card {
        padding: 22px 16px !important;
    }

    .service-card h3 {
        font-size: clamp(1.4rem, 7vw, 2rem) !important;
    }

    .service-card p {
        font-size: .92rem !important;
        line-height: 1.5;
    }

    .trans-stories-section {
        padding-inline: 14px !important;
    }

    .trans-break-card {
        min-height: 520px !important;
    }

    .floating-logo {
        max-width: 82px !important;
        max-height: 82px !important;
    }

    .cta-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
        text-align: center;
    }

    .cta-mascot-wrap {
        width: min(100%, 340px) !important;
        margin-inline: auto;
    }

    .cta-content h2 {
        overflow-wrap: anywhere;
    }

    .cta-button {
        display: inline-flex;
        width: min(100%, 350px);
        justify-content: center;
        text-align: center;
    }

    .footer-social-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .footer-social-links a {
        padding-inline: 6px;
        font-size: .7rem;
    }

    .footer-address {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 390px) {
    .top-social-bar a {
        padding: 7px 8px;
        font-size: .62rem;
    }

    .hero-brand-name {
        bottom: 7svh !important;
    }

    .crav-hero .crav-mascot {
        top: 20svh !important;
        width: 92vw !important;
    }

    .hero-line-1 {
        font-size: .82rem !important;
    }

    .hero-line-2 {
        font-size: 2rem !important;
        letter-spacing: 0 !important;
    }
}

/* =====================================================
   MOBILE IMAGE VISIBILITY + ICON-ONLY SOCIAL LINKS
===================================================== */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.top-social-bar a,
.mobile-menu-social a,
.footer-social-links a {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 50%;
}

.top-social-bar svg,
.mobile-menu-social svg,
.footer-social-links svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: 0 0 auto;
}

.mobile-menu-social,
.footer-social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 768px) {

    /* Never crop responsive media. */
    .brand-hero-content img,
    .image-wave-section img,
    .services-push-section img,
    .why-wave-section img,
    .trans-stories-section img,
    .cta-wave-section img {
        max-width: 100% !important;
        height: auto;
    }

    /* Intro section and decorative sticker images. */
    .brand-hero-content {
        min-height: auto !important;
        padding: 76px 18px 70px !important;
        overflow: hidden !important;
    }

    .brand-hero-content .hero-description {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        text-align: center !important;
        transform: none !important;
    }

    .brand-hero-content .hero-buttons {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .brand-sticker {
        position: relative !important;
        inset: auto !important;
        display: inline-flex !important;
        width: calc(50% - 8px) !important;
        max-width: 155px !important;
        margin: 12px 4px 0 !important;
        transform: none !important;
        vertical-align: top;
    }

    .brand-sticker img {
        width: 100% !important;
        max-height: 130px !important;
        object-fit: contain !important;
    }

    /* Audience section: two balanced, fully visible cards. */
    .image-wave-section:not(.why-wave-section) {
        min-height: auto !important;
        padding: 105px 16px 115px !important;
        overflow: hidden !important;
    }

    .wave-content {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 28px !important;
    }

    .wave-text {
        width: 100% !important;
        max-width: none !important;
        text-align: center !important;
    }

    .wave-images {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 560px !important;
        height: auto !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .wave-img,
    .wave-img.img-two,
    .wave-img.img-three {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 4/5 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
        border-radius: 18px !important;
    }

    /* Why section: show every image, not an overlapping desktop stack. */
    .why-showcase {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 620px !important;
        height: auto !important;
        min-height: 0 !important;
        flex-basis: auto !important;
        margin: 0 auto !important;
    }

    .why-slide,
    .why-slide:nth-child(n) {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }

    .why-slide img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .why-overlay {
        position: absolute !important;
        inset: auto 0 0 !important;
    }

    /* Client section: all logos visible in an orderly grid. */
    .trans-break-card {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 650px !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 18px !important;
        overflow: visible !important;
    }

    .floating-logo,
    .floating-logo:nth-child(n) {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 88px !important;
        padding: 10px !important;
        margin: 0 !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        border-radius: 14px !important;
    }

    .floating-logo img {
        width: 100% !important;
        height: 64px !important;
        max-width: 100% !important;
        max-height: 64px !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    /* CTA artwork must remain fully inside the viewport. */
    .cta-mascot,
    .cta-mascot-wrap img {
        display: block !important;
        width: 100% !important;
        max-width: 360px !important;
        max-height: 390px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .top-social-bar {
        gap: 7px;
    }

    .top-social-bar a {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .top-social-bar svg {
        width: 18px;
        height: 18px;
    }

    .mobile-menu-social a,
    .footer-social-links a {
        width: 44px !important;
        height: 44px !important;
    }

    .wave-images {
        grid-template-columns: 1fr !important;
        max-width: 340px !important;
    }

    .wave-img,
    .wave-img.img-two,
    .wave-img.img-three {
        aspect-ratio: 4/3 !important;
    }

    .why-showcase {
        grid-template-columns: 1fr !important;
        max-width: 350px !important;
    }

    .why-slide,
    .why-slide:nth-child(n) {
        min-height: 300px !important;
    }

    .trans-break-card {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        padding: 12px !important;
    }

    .floating-logo,
    .floating-logo:nth-child(n) {
        min-height: 82px !important;
        padding: 8px !important;
    }

    .floating-logo img {
        height: 58px !important;
        max-height: 58px !important;
    }
}
/* =========================================================
   MOBILE-ONLY FINAL CORRECTIONS
   Header alignment, wave continuity, image visibility and footer logo.
   Desktop/tablet views above 768px remain unchanged.
========================================================= */
@media (max-width: 768px) {
    /* Header: logo centered, socials left, hamburger right. */
    .site-header.minimal-header,
    .minimal-header.site-header,
    .minimal-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-height: 76px !important;
        padding: 12px 14px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .minimal-header .brand,
    .minimal-header .mini-brand,
    .site-header .brand,
    .site-header .mini-brand {
        position: absolute !important;
        top: 10px !important;
        left: 50% !important;
        right: auto !important;
        margin: 0 !important;
        transform: translateX(-50%) !important;
        z-index: 4 !important;
    }

    .minimal-header .brand img,
    .minimal-header .mini-brand img,
    .site-header .brand img,
    .site-header .mini-brand img {
        display: block !important;
        width: 78px !important;
        max-width: 78px !important;
        height: auto !important;
        margin: 0 auto !important;
    }

    .top-social-bar {
        position: absolute !important;
        top: 18px !important;
        left: 12px !important;
        right: auto !important;
        z-index: 5 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        max-width: calc(50% - 50px) !important;
    }

    .top-social-bar a {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        box-shadow: 2px 2px 0 #111 !important;
    }

    .top-social-bar svg {
        width: 16px !important;
        height: 16px !important;
    }

    .minimal-header .menu-btn,
    .site-header .menu-btn {
        position: absolute !important;
        top: 14px !important;
        right: 12px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 5 !important;
        width: 48px !important;
        height: 40px !important;
    }

    /* Keep animated/decorative waves joined edge-to-edge on phones. */
    .crav-hero::after,
    .image-wave-section .top-wave,
    .image-wave-section .bottom-wave,
    .why-wave-section .top-wave,
    .why-wave-section .bottom-wave,
    .top-wave,
    .bottom-wave {
        left: -2px !important;
        width: calc(100% + 4px) !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .crav-hero::after {
        height: 150px !important;
        bottom: -2px !important;
        clip-path: polygon(0 40%, 8% 34%, 17% 29%, 27% 34%, 38% 48%, 49% 58%, 60% 51%, 71% 38%, 82% 29%, 91% 34%, 100% 25%, 100% 100%, 0 100%) !important;
        animation: none !important;
    }

    .top-wave,
    .bottom-wave,
    .image-wave-section .top-wave,
    .image-wave-section .bottom-wave,
    .why-wave-section .top-wave,
    .why-wave-section .bottom-wave {
        height: 105px !important;
    }

    .top-wave svg,
    .bottom-wave svg,
    .image-wave-section .top-wave svg,
    .image-wave-section .bottom-wave svg,
    .why-wave-section .top-wave svg,
    .why-wave-section .bottom-wave svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Audience images: show every image fully and keep the second image visible. */
    .wave-images {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 560px !important;
        height: auto !important;
        gap: 12px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .wave-img,
    .wave-img.img-one,
    .wave-img.img-two,
    .wave-img.img-three {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 280px !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        object-fit: contain !important;
        object-position: center !important;
        background: rgba(255, 255, 255, .2) !important;
    }

    .wave-img.img-two {
        z-index: 2 !important;
        grid-column: auto !important;
    }

    /* Why Business section: force all cards and their images to render. */
    .why-showcase,
    .why-card-slider {
        position: relative !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 620px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .why-slide,
    .why-slide:nth-child(n) {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: 285px !important;
        min-height: 285px !important;
        padding: 0 !important;
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }

    .why-slide > img,
    .why-slide img,
    .why-icon {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #fff !important;
    }

    .why-overlay {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 3 !important;
    }

    /* Footer: center the logo without changing other footer content. */
    .footer-wave div,
    .premium-footer .footer-card,
    .footer-card {
        position: relative !important;
    }

    .footer-wave img,
    .premium-footer .footer-logo,
    .footer-card .footer-logo,
    .footer-logo img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-wave div {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .minimal-header .brand img,
    .minimal-header .mini-brand img,
    .site-header .brand img,
    .site-header .mini-brand img {
        width: 70px !important;
        max-width: 70px !important;
    }

    .top-social-bar {
        top: 19px !important;
        left: 9px !important;
        gap: 4px !important;
    }

    .top-social-bar a {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        min-height: 29px !important;
    }

    .top-social-bar svg {
        width: 14px !important;
        height: 14px !important;
    }

    .minimal-header .menu-btn,
    .site-header .menu-btn {
        right: 9px !important;
        width: 44px !important;
        height: 38px !important;
    }

    .wave-images,
    .why-showcase,
    .why-card-slider {
        grid-template-columns: 1fr !important;
        max-width: 350px !important;
    }

    .wave-img,
    .wave-img.img-one,
    .wave-img.img-two,
    .wave-img.img-three {
        height: auto !important;
        min-height: 250px !important;
        aspect-ratio: 4 / 3 !important;
    }

    .why-slide,
    .why-slide:nth-child(n) {
        height: 315px !important;
        min-height: 315px !important;
    }
}


/* =========================================================
   FINAL MOBILE-ONLY CORRECTIONS
   Desktop/tablet styling above 768px remains unchanged.
========================================================= */
@media (max-width: 768px) {

    /* 1. Smooth animated first wave — no sharp/mobile broken edges */
    .crav-hero {
        position: relative;
        overflow: hidden;
        padding-bottom: 112px !important;
    }

    .crav-hero::after {
        content: "";
        position: absolute;
        left: -35%;
        bottom: -46px;
        width: 170%;
        height: 126px;
        background: #3E51D1;
        clip-path: none !important;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        transform-origin: center bottom;
        animation: seanMobileSmoothWave 5.5s ease-in-out infinite !important;
        pointer-events: none;
        z-index: 0;
        will-change: transform, border-radius;
    }

    @keyframes seanMobileSmoothWave {
        0%,
        100% {
            transform: translateX(-2%) translateY(0) rotate(-1deg);
            border-radius: 46% 54% 0 0 / 88% 100% 0 0;
        }

        50% {
            transform: translateX(2%) translateY(-8px) rotate(1deg);
            border-radius: 56% 44% 0 0 / 100% 84% 0 0;
        }
    }

    /* 2. Reduce space between hero/banner image and Sean transforms caption */
    .crav-hero {
        gap: 4px !important;
    }

    .crav-mascot {
        top: 0 !important;
        margin-top: 0 !important;
        margin-bottom: -12px !important;
    }

    .hero-description {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: -8px auto 0 !important;
        padding: 0 8px !important;
    }

    .brand-hero-content {
        padding-top: 18px !important;
    }

    .brand-hero-content .hero-description {
        margin-top: 0 !important;
    }

    .brand-hero-content .hero-description b,
    .brand-hero-content .hero-description h2 {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }

    /* 3. Does Your Audience Remember — show every image separately */
    .image-wave-section {
        height: auto !important;
        min-height: 0 !important;
        padding: 120px 16px 145px !important;
        overflow: hidden !important;
    }

    .wave-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .wave-images {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 430px !important;
        height: auto !important;
        margin: 26px auto 0 !important;
        padding: 0 !important;
        gap: 20px !important;
        overflow: visible !important;
    }

    .wave-img,
    .wave-images .wave-img,
    .wave-images img {
        position: relative !important;
        inset: auto !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
        z-index: 3 !important;
    }

    .wave-images .img-one,
    .wave-images .img-two,
    .wave-images .img-three,
    .wave-images img:nth-child(1),
    .wave-images img:nth-child(2),
    .wave-images img:nth-child(3) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        transform: none !important;
    }

    /* 4. Why Business Chooses section — reveal every card/image separately */
    .why-content-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .why-card-slider {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        height: auto !important;
        gap: 22px !important;
        overflow: visible !important;
    }

    .why-slide,
    .why-card-slider .why-slide {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    .why-slide img,
    .why-card-slider .why-slide img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        width: min(180px, 70%) !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        margin: 0 auto 18px !important;
        transform: none !important;
    }

    /* 5. Justify readable body text on mobile */
    p,
    li,
    .hero-subtext,
    .wave-text p,
    .why-text p,
    .why-slide p,
    .service-card p,
    .memory-brand-content p,
    .about-card p,
    .contact-panel p {
        text-align: justify !important;
        text-justify: inter-word;
        overflow-wrap: anywhere;
        hyphens: auto;
    }

    /* Keep titles, labels and controls visually centred/aligned */
    h1,
    h2,
    h3,
    h4,
    .why-tag,
    .memory-tag,
    .service-tab,
    .hero-buttons,
    .services-action {
        text-align: center;
    }
}

@media (max-width: 420px) {
    .crav-hero::after {
        left: -45%;
        width: 190%;
        height: 112px;
        bottom: -43px;
    }

    .crav-mascot {
        margin-bottom: -16px !important;
    }

    .hero-description {
        margin-top: -10px !important;
    }

    .wave-images {
        gap: 16px !important;
    }

    .why-card-slider {
        gap: 18px !important;
    }
}