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

:root {
    --font-sans: "Google Sans Flex", "Google Sans";
    /* variable font: any value between 400–700 works (e.g. 430, 450, 480) */
    --font-regular: 450;
    --font-bold: 700;
    --header-bg: #fff;
    --text: #1a1a1a;
    --text-muted: #5a5a5a;
    --accent: #c45c26;
    --brand-blue: #3174f1;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration: 0.35s;
}

html {
    scroll-behavior: smooth;
    /* clip (not hidden) so position:sticky still works for Mission/Vision pin */
    overflow-x: clip;
    overscroll-behavior-y: none;
    /* account for sticky header when jumping to sidebar/nav anchors */
    scroll-padding-top: clamp(.5rem, 10vw, 1rem);
}

body {
    font-family: var(--font-sans);
    font-weight: var(--font-regular);
    color: var(--text);
    background: #fff;
    overflow-x: clip;
    overscroll-behavior-y: none;
}

/* Front layer scrolls over fixed Contact Us back layer */
:root {
    /* how much of the front layer stays stuck at the top when Contact reveals */
    --contact-peek: clamp(72px, 12vh, 140px);
}

@media (max-width: 1150px) {
    :root {
        /* small screens: front layer scrolls away fully */
        --contact-peek: 0px;
    }
}

.site-front {
    position: relative;
    z-index: 2;
    background: #fff;
    /* bleed brand blue under the front edge to kill iOS 1px white seams */
    /* box-shadow: 0 2px 0 0 var(--brand-blue); */
}

/* .site-front::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 6px;
    background: var(--brand-blue);
    pointer-events: none;
    z-index: 3;
} */

.contact-scroll-spacer {
    position: relative;
    z-index: 0;
    /* full reveal room — JS sets exact height from viewport − peek */
    height: calc(100svh - var(--contact-peek));
    min-height: 280px;
    pointer-events: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

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

#home,
#about,
#services,
#company-life,
#contact {
    scroll-margin-top: clamp(2rem, 6vw, 4rem);
}

/* -----------------------header----------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--header-bg);
    margin: 0 auto;
    padding: 1.5rem 0 1.15rem;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08);
    transition:
        box-shadow var(--duration) var(--ease-out),
        padding var(--duration) var(--ease-out),
        background-color var(--duration) var(--ease-out),
        transform var(--duration) var(--ease-out),
        opacity var(--duration) var(--ease-out);
    animation: header-in 0.7s var(--ease-out) both;
}

.site-header.is-scrolled {
    padding: 1.1rem 0 0.85rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

/* slide header away while Contact back-layer is revealed */
.site-header.is-contact-reveal {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    box-shadow: none;
}

@keyframes header-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* logo */
.logo-container {
    width: clamp(52px, 5.5vw, 68px);
    flex-shrink: 0;
    transition: transform var(--duration) var(--ease-out);
}

.logo-mobile {
    display: none;
}

.logo-container:hover {
    transform: scale(1.06);
}

.logo-container:active {
    transform: scale(0.97);
}

.logo-container img {
    width: clamp(42px, 10vw, 55px);
}

/* mobile burger — desktop hidden */
.nav-burger {
    display: none;
    border: 0;
    padding: 0.45rem;
    margin: 0;
    background: transparent;
    cursor: pointer;
    line-height: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.nav-burger-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #12161f;
    transition: background 0.25s var(--ease-out);
}

.nav-burger-icon::before,
.nav-burger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #12161f;
    transition: transform 0.28s var(--ease-out), top 0.28s var(--ease-out), width 0.28s var(--ease-out);
}

.nav-burger-icon::before {
    top: -7px;
}

.nav-burger-icon::after {
    top: 7px;
    /* width: 16px; */
}

.nav-burger[aria-expanded="true"] .nav-burger-icon {
    background: transparent;
}

.nav-burger[aria-expanded="true"] .nav-burger-icon::before {
    top: 0;
    width: 22px;
    transform: rotate(45deg);
}

.nav-burger[aria-expanded="true"] .nav-burger-icon::after {
    top: 0;
    width: 22px;
    transform: rotate(-45deg);
}

/* mobile sidebar drawer */
.mobile-nav {
    display: none;
}

/* nav bar */
.menu-container {
    position: relative;
    width: clamp(260px, 40vw, 560px);
    margin: 0 2.5rem;
    flex-shrink: 1;
}

.menu-container > img {
    width: 100%;
    pointer-events: none;
}

.menu-container nav {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* optical lift — stronger on small screens where the bar is short */
    transform: translateY(clamp(-6px, -8px + 1.2vw, -1px));
}

.menu-container nav ul {
    display: flex;
    list-style-type: none;
    justify-content: space-between;
    align-items: center;
    width: 72%;
}

.menu-container nav ul li a {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: clamp(0.7rem, 1.2vw, 1rem);
    font-weight: var(--font-regular);
    line-height: 1;
    white-space: nowrap;
    color: var(--text);
    opacity: 0.88;
    transition:
        opacity var(--duration) var(--ease-out),
        color var(--duration) var(--ease-out),
        transform var(--duration) var(--ease-out);
}

.menu-container nav ul li a:hover,
.menu-container nav ul li a:focus-visible {
    opacity: 1;
    color: var(--accent);
    transform: translateY(-1px);
}

.menu-container nav ul li a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 2px;
}

/* contact us — image used as button */
.nav-contact-us-container {
    display: inline-flex;
    width: clamp(120px, 15vw, 180px);
    flex-shrink: 0;
}

.nav-contact-us-container img {
    width: 100%;
}

/* ----- mobile header + freestyle sidebar ----- */
@media (max-width: 900px) {
    .site-header {
        justify-content: space-between;
        width: 100%;
        padding: 0.85rem clamp(1rem, 4vw, 1.35rem);
        gap: 1rem;
    }

    .site-header.is-scrolled {
        padding: 0.7rem clamp(1rem, 4vw, 1.35rem);
    }

    .logo-desktop,
    .menu-container,
    .nav-contact-us-container {
        display: none;
    }

    .logo-mobile {
        display: block;
        width: clamp(72px, 22vw, 96px);
    }

    .nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 200;
        pointer-events: none;
        visibility: hidden;
    }

    .mobile-nav.is-open {
        pointer-events: auto;
        visibility: visible;
    }

    .mobile-nav-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(8, 16, 36, 0.48);
        opacity: 0;
        transition: opacity 0.35s var(--ease-out);
        backdrop-filter: blur(4px);
    }

    .mobile-nav.is-open .mobile-nav-backdrop {
        opacity: 1;
    }

    .mobile-nav-panel {
        position: absolute;
        top: 0;
        right: 0;
        width: min(86vw, 360px);
        height: 100%;
        padding: 1.1rem 1.35rem 1.75rem;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        background:
            linear-gradient(165deg, #ffffff 0%, #f4f7ff 48%, #eaf1ff 100%);
        box-shadow: -18px 0 48px rgba(12, 28, 70, 0.22);
        transform: translateX(104%);
        transition: transform 0.42s var(--ease-out);
        overflow: hidden;
    }

    .mobile-nav.is-open .mobile-nav-panel {
        transform: translateX(0);
    }

    .mobile-nav-panel-glow {
        position: absolute;
        right: -20%;
        top: 18%;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(49, 116, 241, 0.22), transparent 68%);
        pointer-events: none;
    }

    .mobile-nav-panel-glow::after {
        content: "";
        position: absolute;
        left: -80px;
        bottom: -140px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(245, 180, 0, 0.16), transparent 70%);
    }

    .mobile-nav-top {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .mobile-nav-logo {
        width: clamp(78px, 24vw, 100px);
    }

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

    .mobile-nav-close {
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 8px 20px rgba(20, 40, 80, 0.12);
        cursor: pointer;
        position: relative;
    }

    .mobile-nav-close span,
    .mobile-nav-close span::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 2px;
        background: #1a1a1a;
        border-radius: 2px;
    }

    .mobile-nav-close span {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .mobile-nav-close span::before {
        transform: rotate(-90deg);
        left: 0%;
        top: 0%;
    }

    .mobile-nav-links {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        margin-top: 0.5rem;
    }

    .mobile-nav-links a {
        display: flex;
        align-items: baseline;
        gap: 0.85rem;
        padding: 0.85rem 0.35rem;
        border-bottom: 1px solid rgba(26, 40, 80, 0.08);
        font-family: var(--font-sans);
        font-size: clamp(1.35rem, 5.5vw, 1.7rem);
        font-weight: var(--font-bold);
        letter-spacing: -0.02em;
        color: #10141c;
        transform: translateX(18px);
        opacity: 0;
        transition:
            color 0.25s var(--ease-out),
            transform 0.45s var(--ease-out),
            opacity 0.45s var(--ease-out);
    }

    .mobile-nav-links a span {
        font-size: 0.72rem;
        font-weight: var(--font-bold);
        letter-spacing: 0.08em;
        color: var(--brand-blue);
        min-width: 1.5rem;
    }

    .mobile-nav.is-open .mobile-nav-links a {
        transform: translateX(0);
        opacity: 1;
    }

    .mobile-nav.is-open .mobile-nav-links a:nth-child(1) { transition-delay: 0.06s; }
    .mobile-nav.is-open .mobile-nav-links a:nth-child(2) { transition-delay: 0.1s; }
    .mobile-nav.is-open .mobile-nav-links a:nth-child(3) { transition-delay: 0.14s; }
    .mobile-nav.is-open .mobile-nav-links a:nth-child(4) { transition-delay: 0.18s; }
    .mobile-nav.is-open .mobile-nav-links a:nth-child(5) { transition-delay: 0.22s; }

    .mobile-nav-links a:hover,
    .mobile-nav-links a:focus-visible {
        color: var(--brand-blue);
    }

    .mobile-nav-cta {
        position: relative;
        z-index: 1;
        display: block;
        width: min(100%, 240px);
        margin-top: auto;
        transform: translateY(12px);
        opacity: 0;
        transition:
            opacity 0.4s var(--ease-out) 0.2s,
            transform 0.4s var(--ease-out) 0.2s;
    }

    .mobile-nav.is-open .mobile-nav-cta {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-nav-cta img {
        width: 100%;
        height: auto;
        display: block;
    }

    .mobile-nav-foot {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
        opacity: 0;
        transition: opacity 0.35s var(--ease-out) 0.28s;
    }

    .mobile-nav.is-open .mobile-nav-foot {
        opacity: 1;
    }

    .mobile-nav-foot p {
        margin: 0;
        font-size: 0.78rem;
        font-weight: var(--font-bold);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(16, 20, 28, 0.45);
    }

    .mobile-nav-social {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    .mobile-nav-social a {
        width: 40px;
    }

    .mobile-nav-social img {
        width: 100%;
        height: auto;
        display: block;
        filter: brightness(0) saturate(100%);
        opacity: 0.75;
    }

    body.nav-open {
        overflow: hidden;
    }
}

/* reusable: image CTAs / interactive image content */
.img-btn {
    cursor: pointer;
    transition:
        transform var(--duration) var(--ease-out),
        filter var(--duration) var(--ease-out);
    will-change: transform;
}

.img-btn:hover {
    transform: scale(1.04) translateY(-1px);
    filter: brightness(1.05);
}

.img-btn:active {
    transform: scale(0.97);
    filter: brightness(0.98);
}

.img-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* -----------------------hero----------------------- */
.hero-section {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 5rem);
    padding: clamp(2rem, 5vw, 4rem) 1rem clamp(3rem, 6vw, 5rem);
    overflow: hidden;
    background-color: #f7f8fa;
    background-image: url("assets/section1/bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.hero-inner {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: min(820px, 100%);
    gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

.hero-eyebrow {
    width: clamp(180px, 28vw, 303px);
}

.hero-title {
    margin: 0;
    width: clamp(260px, 72vw, 779px);
}

.hero-title img {
    width: 100%;
}

.hero-desc {
    width: clamp(220px, 48vw, 420px);
}

.hero-cta {
    display: inline-flex;
    width: clamp(140px, 18vw, 185px);
    margin-top: 0.35rem;
}

.hero-cta img {
    width: 100%;
}

.hero-visual {
    width: min(980px, 100%);
}

/* Mobile hero — hidden on desktop */
.hero-mobile {
    display: none;
}

.hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    max-width: 900px;
    margin: 0 auto;
}

/* Center photo */
.hero-main-photo {
    position: absolute;
    left: 50%;
    top: 35%;
    transform: translate(-50%, -50%);
    width: clamp(320px, 46vw, 550px);
    aspect-ratio: 609 / 352;
    z-index: 2;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(20, 40, 80, 0.16);
}

.hero-main-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Rotating ads pill over bottom of center photo */
.hero-ads-switch {
    --ads-color: #e11d2e;
    position: absolute;
    left: 50%;
    top: 68%;
    transform: translateX(-50%);
    z-index: 5;
    min-width: clamp(280px, 28vw, 450px);
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(20, 40, 80, 0.16);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.12em;
    color: var(--ads-color);
    white-space: nowrap;
    transition: color 0.35s var(--ease-out);
}

.hero-ads-switch__text {
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 2.5vw, 2.7rem);
    font-weight: var(--font-bold);
    letter-spacing: 0.01em;
    white-space: nowrap;
    line-height: 1.15;
}

/* Single text cursor — the | blinks while typing */
.hero-ads-switch em {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: clamp(1.5rem, 2vw, 2.7rem);
    font-weight: var(--font-regular);
    line-height: 1.15;
    opacity: 0.85;
    flex-shrink: 0;
}

.hero-ads-switch.is-typing em {
    animation: ads-caret 0.85s step-end infinite;
}

@keyframes ads-caret {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.hero-ads-switch[data-tone="blue"] {
    --ads-color: #2563eb;
}

.hero-ads-switch[data-tone="red"] {
    --ads-color: #e11d2e;
}

.hero-ads-switch[data-tone="yellow"] {
    --ads-color: #eab308;
}

.hero-tag {
    position: absolute;
    width: clamp(96px, 16vw, 160px);
    z-index: 6;
    filter: drop-shadow(0 8px 14px rgba(20, 40, 80, 0.12));
}

.hero-tag-solutions {
    left: -4%;
    top: 8%;
}

.hero-tag-service {
    left: 10%;
    top: 22%;
}

.hero-tag-key {
    right: 14%;
    top: 48%;
}

.hero-board-slot {
    position: absolute;
    filter: drop-shadow(0 14px 28px rgba(20, 40, 80, 0.14));
}

.hero-board-slot img {
    width: 100%;
    display: block;
}

.hero-board-copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05em;
    font-family: var(--font-sans);
    line-height: 1.1;
    pointer-events: none;
    z-index: 2;
}

.hero-board-kicker {
    font-size: clamp(0.55rem, 1.05vw, 0.85rem);
    font-weight: var(--font-bold);
    color: #111827;
}

.hero-board-value {
    font-size: clamp(1.1rem, 2.4vw, 1.85rem);
    font-weight: var(--font-bold);
    letter-spacing: -0.02em;
}

.hero-board-label {
    font-size: clamp(0.5rem, 0.95vw, 0.75rem);
    font-weight: var(--font-regular);
    color: #374151;
}

/* Qualified Leads — top right */
.hero-board-leads {
    width: clamp(200px, 28vw, 280px);
    right: 2%;
    top: 1%;
    z-index: 4;
}

.hero-board-leads .hero-board-copy {
    left: 11%;
    bottom: 10%;
    align-items: flex-start;
}

.hero-board-leads .hero-board-value {
    color: #2563eb;
    font-weight: var(--font-regular);
}

/* ROAS — mid-left; negative left = further past the stage edge */
.hero-board-roas {
    width: clamp(200px, 26vw, 300px);
    left: clamp(-22%, -14vw, -16%);
    bottom: clamp(20%, 40%, 48%);
    z-index: 4;
}

.hero-board-roas .hero-board-copy {
    left: 8%;
    top: 10%;
    bottom: 20%;
    max-width: 52%;
    justify-content: space-between;
}

.hero-board-roas .hero-board-kicker {
    align-self: flex-start;
    font-weight: var(--font-regular);
    font-size: clamp(0.8rem, 1.2vw, 1.2rem);
}

.hero-board-roas .hero-board-value {
    color: #2563eb;
    align-self: flex-start;
    font-size: clamp(1.2rem, 2.4vw, 2.9rem);
}

/* Conversion Rate — mid-right; big % sits in the card’s open left area */
.hero-board-conversion {
    width: clamp(160px, 24vw, 300px);
    right: clamp(-18%, -11vw, -10%);
    bottom: clamp(14%, 30%, 30%);
    z-index: 4;
}

.hero-board-conversion .hero-board-copy {
    left: 6%;
    top: 54%;
    max-width: 48%;
}

.hero-board-conversion .hero-board-value {
    color: #f5b400;
    font-size: clamp(1.15rem, 2.35vw, 2.4rem);
}

.float-motion {
    animation: float-y 5.5s ease-in-out infinite;
}

.float-motion-alt {
    animation: float-y-alt 6.5s ease-in-out infinite;
}

@keyframes float-y {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes float-y-alt {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* -----------------------about us----------------------- */
.about-section {
    width: 100%;
    padding: clamp(3rem, 6vw, 5rem) 0 0;
    background: #fff;
}

.about-mobile {
    display: none;
}

.about-inner {
    width: min(1240px, 94%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.about-title {
    width: clamp(140px, 22vw, 220px);
}

.about-timeline {
    --timeline-blue: #2f6bff;
    --timeline-grey: #c5ccd6;
    --timeline-grey-strong: #9aa3b2;
    --dot-size: clamp(12px, 1.4vw, 16px);
    --stack-overlap: 22%;
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(170px, 0.85fr) minmax(300px, 1.15fr) minmax(340px, 1.35fr);
    grid-template-rows: auto auto auto;
    column-gap: clamp(1.25rem, 3vw, 2.75rem);
    row-gap: clamp(2rem, 4vw, 3.25rem);
    align-items: center;
}

.about-timeline-track {
    position: absolute;
    left: calc(var(--dot-size) / 2);
    top: 0;
    bottom: 0;
    width: 2px;
    border-radius: 999px;
    background: var(--timeline-grey);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    transform: translateX(-50%);
}

.about-timeline-progress {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--timeline-grey-strong);
    transform: scaleY(0);
    transform-origin: top center;
    will-change: transform;
}

.about-step {
    grid-column: 1;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    opacity: 0;
    transform: translateX(-18px);
    transition:
        opacity 0.55s var(--ease-out),
        transform 0.55s var(--ease-out);
}

.about-step.is-in {
    opacity: 1;
    transform: translateX(0);
}

.about-step:nth-child(2) { grid-row: 1; }
.about-step:nth-child(4) { grid-row: 2; }
.about-step:nth-child(6) { grid-row: 3; }

.about-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--timeline-grey);
    border: 3px solid var(--timeline-grey);
    box-shadow: 0 0 0 0 rgba(47, 107, 255, 0);
    transform: scale(0.85);
    transition:
        border-color 0.3s var(--ease-out),
        background-color 0.3s var(--ease-out),
        transform 0.3s var(--ease-out),
        box-shadow 0.3s var(--ease-out);
}

.about-step.is-in .about-dot {
    border-color: var(--timeline-blue);
    background: var(--timeline-blue);
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(47, 107, 255, 0.14);
}

.about-label-text {
    width: clamp(120px, 14vw, 210px);
}

.about-para {
    grid-column: 3;
    width: 100%;
    max-width: 520px;
    opacity: 0;
    transform: translateX(22px);
    transition:
        opacity 0.55s var(--ease-out) 0.06s,
        transform 0.55s var(--ease-out) 0.06s;
}

.about-para.is-in {
    opacity: 1;
    transform: translateX(0);
}

.about-para:nth-child(3) { grid-row: 1; }
.about-para:nth-child(5) { grid-row: 2; }
.about-para:nth-child(7) { grid-row: 3; }

.about-para img {
    width: 100%;
}

/* middle stacked photos — design-sized */
.about-timeline-stack {
    grid-column: 2;
    grid-row: 1 / -1;
    width: min(100%, 380px);
    justify-self: center;
    align-self: center;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 2;
}

.about-stack-item {
    position: relative;
    width: 100%;
    opacity: 0;
    transform: translateY(28px) scale(0.96);
    transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
}

.about-stack-item.is-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.about-stack-item + .about-stack-item {
    margin-top: calc(var(--stack-overlap) * -1);
}

.about-stack-item:nth-child(1) { z-index: 1; transition-delay: 0.05s; }
.about-stack-item:nth-child(2) { z-index: 2; transition-delay: 0.1s; }
.about-stack-item:nth-child(3) { z-index: 3; transition-delay: 0.15s; }

.about-stack-item.is-in:nth-child(1) { transition-delay: 0.05s; }
.about-stack-item.is-in:nth-child(2) { transition-delay: 0.1s; }
.about-stack-item.is-in:nth-child(3) { transition-delay: 0.15s; }

.about-stack-item img {
    width: 100%;
    display: block;
    border-radius: clamp(18px, 2.2vw, 28px);
    box-shadow: 0 16px 34px rgba(20, 40, 80, 0.16);
}

/* Outcrod-style sticky card stack: pin → Mission rises → Vision stacks → carousel */
.about-mv {
    width: 100%;
    /* tuck under timeline so there’s no big empty band */
    margin-top: clamp(-1.25rem, -2vh, -0.5rem);
    /* room below Vision stack before carousel */
    margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.about-mv-track {
    position: relative;
    height: 125vh;
}

.about-mv-pin {
    position: sticky;
    /* header is not sticky anymore — keep cards near the timeline */
    top: clamp(0.75rem, 2vh, 1.25rem);
    height: clamp(210px, 36vh, 300px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 clamp(0.75rem, 3vw, 1.5rem);
    overflow: visible;
    background: #fff;
    z-index: 2;
}

.about-mv-item {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(920px, 94%);
    margin: 0;
    will-change: transform, opacity;
    transform-origin: center center;
    transform-style: preserve-3d;
    pointer-events: none;
    backface-visibility: hidden;
}

/* start just below the fold — short rise, not a full-card drop-in */
.about-mv-item--mission {
    z-index: 1;
    transform: translate3d(-50%, 28%, 0) rotateZ(0deg);
    opacity: 0;
}

.about-mv-item--vision {
    z-index: 2;
    transform: translate3d(-50%, 100%, 0) rotateZ(0deg);
    opacity: 0;
}

.about-mv-item.is-active {
    pointer-events: auto;
}

.about-mv-item img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 16px 36px rgba(20, 40, 80, 0.14));
}

.about-banner {
    width: 100%;
    margin-top: clamp(3.5rem, 10vw, 10.5rem);
    overflow: hidden;
}

.about-banner-track {
    display: flex;
    width: max-content;
    animation: about-carousel 45s linear infinite;
    will-change: transform;
}

.about-banner-track img {
    width: auto;
    height: clamp(140px, 22vw, 280px);
    flex-shrink: 0;
    display: block;
    user-select: none;
    pointer-events: none;
}

@keyframes about-carousel {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* -----------------------services----------------------- */
.services-section {
    width: 100%;
    background: #fff;
}

.services-mobile {
    display: none;
}

.services-top {
    width: min(1280px, 94%);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.services-title {
    width: clamp(130px, 18vw, 200px);
}

.services-grid-wrap {
    --services-line: #cfd5e0a7;
    position: relative;
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    border: 1px solid var(--services-line);
    /* border-radius: clamp(12px, 1.5vw, 18px); */
    background: #fff;
}

.services-grid-line {
    position: absolute;
    background: var(--services-line);
    pointer-events: none;
    z-index: 0;
}

/* full horizontal divider between row 123 and 456 */
.services-grid-line-h {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

/* short vertical dividers — not touching outer border or middle line */
.services-grid-line-v {
    width: 1px;
    height: 40%;
    transform: translateX(-50%);
}

.services-grid-line-v.v1 { left: 33.333%; }
.services-grid-line-v.v2 { left: 66.666%; }
.services-grid-line-v.top { top: 5%; }
.services-grid-line-v.bottom { bottom: 5%; top: auto; }

.services-grid {
    position: relative;
    z-index: 1;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3rem);
}

.services-card {
    width: 100%;
    height: auto;
    display: block;
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.45s var(--ease-out);
}

.services-card.reveal.is-visible:hover {
    transform: translateY(-6px) scale(1.015);
}

.services-grid-wrap.reveal-frame {
    transform: translateY(32px) scale(0.985);
    transition: transform 0.7s var(--ease-out);
}

.services-grid-wrap.reveal-frame.is-visible {
    transform: translateY(0) scale(1);
}

.services-grid-wrap.reveal-frame .services-grid-line-h {
    transform: translateY(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.75s var(--ease-out) 0.12s;
}

.services-grid-wrap.reveal-frame.is-visible .services-grid-line-h {
    transform: translateY(-50%) scaleX(1);
}

.services-grid-wrap.reveal-frame .services-grid-line-v {
    transform: translateX(-50%) scaleY(0);
    transform-origin: center;
    transition: transform 0.7s var(--ease-out) 0.22s;
}

.services-grid-wrap.reveal-frame.is-visible .services-grid-line-v {
    transform: translateX(-50%) scaleY(1);
}

/* -----------------------reviews----------------------- */
.reviews-mobile {
    display: none;
}

.reviews-section {
    width: 100%;
    background: #fff;
    padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 6.5rem);
    overflow: hidden;
}

.reviews-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 8vw, 10.25rem);
}   

.reviews-heading {
    width: min(1100px, 92%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.85rem, 1.5vw, 1.5rem);
    text-align: center;
}

.reviews-title {
    width: clamp(240px, 48vw, 520px);
}

.reviews-sub {
    width: clamp(180px, 28vw, 280px);
}

.reviews-marquee {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.reviews-track {
    --reviews-stagger: clamp(1.75rem, 4vw, 2.55rem);
    display: flex;
    align-items: flex-start;
    width: max-content;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: calc(var(--reviews-stagger) + 0.5rem) 0;
    animation: reviews-marquee 90s linear infinite;
    will-change: transform;
}

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

.reviews-card {
    width: clamp(240px, 28vw, 480px);
    height: auto;
    flex-shrink: 0;
    display: block;
    transition: transform 0.35s var(--ease-out);
}

.reviews-card--up {
    transform: translateY(calc(var(--reviews-stagger) * -1));
}

.reviews-card--down {
    transform: translateY(var(--reviews-stagger));
}

.reviews-card--up:hover {
    transform: translateY(calc(var(--reviews-stagger) * -1 - 6px));
}

.reviews-card--down:hover {
    transform: translateY(calc(var(--reviews-stagger) - 6px));
}

@keyframes reviews-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* -----------------------people / company life----------------------- */
.people-mobile {
    display: none;
}

.people-section {
    --people-blue: var(--brand-blue);
    --people-red: #dc4437;
    --people-yellow: #f5b400;
    --people-muted: #cbcbcb;
    --people-ink: #0a0d12;
    width: 100%;
    background: var(--brand-blue);
    padding: clamp(4.5rem, 9vw, 7.5rem) 0 0;
    /* overlap contact layer by 1px to avoid iOS hairline gaps */
    margin-bottom: -1px;
}

.people-stage {
    position: relative;
    width: 100%;
    overflow-x: clip;
    background: #f8f8f8;
    margin-bottom: -1px;
}

.people-watermark {
    width: 100%;
    line-height: 0;
    overflow: hidden;
    margin-bottom: -1px;
}

.people-watermark img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center bottom;
}

.people-content {
    position: absolute;
    top: clamp(3.5rem, 7vw, 6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: min(1680px, 90%);
    display: flex;
    flex-direction: column;
    gap: clamp(3.25rem, 10vw, 10.25rem);
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.people-copy {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.people-copy-left,
.people-copy-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.1rem, 2.2vw, 1.75rem);
}

.people-strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    height: clamp(260px, 18vw, 310px);
    overflow: hidden;
}

.people-strip-track {
    display: flex;
    width: max-content;
    height: 100%;
    animation: people-strip-marquee 55s linear infinite;
    will-change: transform;
}

.people-strip-track img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
    display: block;
    user-select: none;
    pointer-events: none;
}

@keyframes people-strip-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.people-title {
    width: clamp(180px, 22vw, 300px);
}

.people-lead {
    width: min(100%, 480px);
}

.people-body {
    margin: 0;
    /* max-width: 42rem; */
    color: var(--people-muted);
    font-family: var(--font-sans);
    font-weight: var(--font-regular);
    font-size: clamp(1.35rem, 2.15vw, 1.9rem);
    line-height: 1.5;
}

.people-body .split-word {
    display: inline-block;
    white-space: nowrap;
}

.people-body .split-letter {
    display: inline-block;
    position: relative;
    color: var(--people-muted);
    will-change: color;
}

.people-hl {
    font-weight: var(--font-bold);
}

.people-hl-blue,
.people-hl-red,
.people-hl-yellow {
    color: inherit;
}

.people-btn {
    display: inline-flex;
    width: clamp(200px, 24vw, 280px);
}

.people-btn img {
    width: 100%;
}

.people-content.reveal-frame {
    transform: translateX(-50%) translateY(28px);
    transition: transform 0.7s var(--ease-out);
}

.people-content.reveal-frame.is-visible {
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 1150px) {
    .people-content {   
        width: min(920px, 90%);
        gap: 1.75rem;
    }

    .people-copy {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .people-title {
        width: min(100%, 220px);
    }

    .people-lead {
        width: min(100%, 300px);
    }

    .people-lead,
    .people-body {
        max-width: 100%;
    }

    .people-strip {
        height: clamp(110px, 28vw, 180px);
        /* nudge strip higher on small screens */
        transform: translateY(clamp(-48px, -8vw, -28px));
    }
}

/* -----------------------contact us (fixed back layer)----------------------- */
.contact-section {
    --contact-blue: var(--brand-blue);
    --contact-ink: #1a1a1a;
    --contact-muted: rgba(255, 255, 255, 0.9);
    position: fixed;
    left: 0;
    right: 0;
    /* overlap front edge slightly (helps iOS sub-pixel white gaps) */
    top: calc(var(--contact-peek) - 2px);
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: auto;
    background: var(--contact-blue);
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
}

.contact-shell {
    width: min(1640px, 86%);
    min-height: 100%;
    margin: 0 auto;
    padding: clamp(1.25rem, 3vh, 2.5rem) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(0.75rem, 1.6vh, 1.25rem);
    box-sizing: border-box;
}

/* Contact content + footer sit together near the bottom */
.contact-main {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(320px, 1.15fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-content: start;
    align-items: start;
    padding-bottom: 0;
}

.contact-heading {
    font-size: clamp(2.4rem, 5vw, 3.6rem);
    font-weight: var(--font-bold);
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.contact-offices,
.contact-channels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
}

.contact-office h3,
.contact-channel h3,
.contact-hours h3 {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: var(--font-bold);
    margin-bottom: 0.45rem;
    color: rgba(240, 240, 240, 0.616);
}

.contact-office p,
.contact-hours p {
    font-size: clamp(0.88rem, 1.25vw, 0.98rem);
    line-height: 1.55;
    color: var(--contact-muted);
}

.contact-channel a {
    font-size: clamp(0.92rem, 1.35vw, 1.05rem);
    color: #fff;
    word-break: break-word;
}

.contact-channel a:hover {
    text-decoration: underline;
}

/* CSS stand-in for section7/line.png */
.contact-dot-line {
    width: 100%;
    height: 1px;
    margin: clamp(1.1rem, 2.2vw, 1.6rem) 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0.9px, transparent 1.1px);
    background-size: 7px 1px;
    background-repeat: repeat-x;
    background-position: left center;
}

.contact-hours p + p {
    margin-top: 0.15rem;
}

.contact-form-card {
    background: #fff;
    color: var(--contact-ink);
    border-radius: clamp(14px, 3vw, 18px);
    padding: clamp(1.4rem, 3vw, 2.2rem);
    box-shadow: 0 18px 40px rgba(10, 30, 80, 0.18);
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.95rem, 8vw, 2.95rem);
}

.contact-field {
    display: grid;
    gap: 0.4rem;
    font-size: 0.86rem;
    font-weight: var(--font-regular);
    color: #3a3a3a;
}

.contact-field span i {
    color: #e23b3b;
    font-style: normal;
    margin-left: 0.15rem;
}

.contact-field--full {
    grid-column: 1 / -1;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: #efefef;
    padding: 0.9rem 1rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: var(--font-regular);
    color: var(--contact-ink);
    outline: none;
    transition:
        box-shadow var(--duration) var(--ease-out),
        background-color var(--duration) var(--ease-out);
    resize: vertical;
}

.contact-field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #777 50%),
        linear-gradient(135deg, #777 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 52%,
        calc(100% - 12px) 52%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    color: #777;
}

.contact-field select:valid {
    color: var(--contact-ink);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: #9a9a9a;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    background: #f5f5f5;
    box-shadow: 0 0 0 3px rgba(49, 116, 241, 0.18);
}

.contact-submit {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 0.2rem auto 0;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    width: clamp(170px, 22vw, 206px);
}

.contact-submit img {
    width: 100%;
    height: auto;
}

.site-footer {
    width: 100%;
    flex-shrink: 0;
    margin-top: 7%;
    padding: clamp(0.55rem, 1.2vw, 0.85rem) 0 clamp(0.75rem, 1.5vw, 1.1rem);
}

.site-footer-rule {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.55);
    margin-bottom: clamp(1.55rem, 1.2vw, 0.8rem);
}

.site-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer-social {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.site-footer-social-label {
    font-size: 0.95rem;
    margin-right: 0.25rem;
}

.site-footer-social a {
    width: clamp(34px, 4vw, 40px);
    filter: brightness(0) invert(1);
}

.site-footer-social img {
    width: 100%;
    height: auto;
}

.site-footer-copy {
    font-size: clamp(0.8rem, 1.2vw, 0.92rem);
    color: rgba(255, 255, 255, 0.92);
}

/* Industries We Serve */
.industries-mobile {
    display: none;
}

.industries-section {
    --industries-red: #dc4437;
    width: 100%;
    padding: clamp(3rem, 8vw, 9rem) clamp(0.75rem, 3vw, 1.5rem);
    background-color: #2f6bff;
}

.industries-panel {
    position: relative;
    width: min(1580px, 90%);
    margin: 0 auto;
    border-radius: clamp(22px, 3vw, 36px);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 40px rgba(10, 30, 80, 0.18);
}

.industries-panel-inner {
    position: relative;
    z-index: 1;
    padding: clamp(3.5rem, 5vw, 7.6rem) clamp(4rem, 8vw, 9.6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(.8rem, 3.5vw, .85rem);
}

.industries-copy {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(1.25rem, 3vw, 2.5rem);
}

.industries-copy-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    flex: 0 1 auto;
}

.industries-title {
    width: clamp(240px, 36vw, 440px);
    height: auto;
}

.industries-tags {
    margin: 0;
    color: #6b7280;
    font-family: var(--font-sans);
    font-weight: var(--font-regular);
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.industries-copy-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    max-width: min(100%, 34rem);
    padding-top: 0.2rem;
}

.industries-sub {
    width: min(100%, 460px);
    height: auto;
}

.industries-btn {
    display: inline-flex;
    width: clamp(160px, 20vw, 240px);
}

.industries-btn img {
    width: 100%;
}

.industries-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.25rem 0 0.5rem;
}

.industries-shot {
    width: min(42%, 440px);
    flex-shrink: 0;
    position: relative;
}

.industries-photo {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s var(--ease-out);
    will-change: transform;
}

.industries-shot:nth-child(1) {
    z-index: 1;
    margin-right: -4%;
}

.industries-shot:nth-child(2) {
    z-index: 2;
    margin-top: 10%;
}

.industries-shot:nth-child(3) {
    z-index: 2;
    margin-left: -4%;
}

.industries-shot.is-visible .industries-photo {
    animation: industries-float 5.5s ease-in-out infinite;
}

.industries-shot:nth-child(2).is-visible .industries-photo {
    animation-duration: 6.2s;
    animation-delay: 0.35s;
}

.industries-shot:nth-child(3).is-visible .industries-photo {
    animation-duration: 5.8s;
    animation-delay: 0.7s;
}

.industries-shot:hover .industries-photo {
    animation-play-state: paused;
    transform: translateY(-8px);
}

@keyframes industries-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.industries-panel.reveal-frame {
    transform: translateY(36px) scale(0.985);
    transition: transform 0.7s var(--ease-out);
}

.industries-panel.reveal-frame.is-visible {
    transform: translateY(0) scale(1);
}

.industries-shot.reveal-from-left {
    transform: translate(-32px, 28px);
}

.industries-shot.reveal-from-right {
    transform: translate(32px, 28px);
}

.industries-shot.reveal-from-left.is-visible,
.industries-shot.reveal-from-right.is-visible {
    transform: translate(0, 0);
}

@media (max-width: 1150px) {
    .services-grid-wrap {
        width: min(920px, 100%);
    }

    .services-grid {
        gap: clamp(0.85rem, 2vw, 1.25rem);
    }

    .industries-copy {
        flex-direction: column;
        gap: 1.25rem;
    }

    .industries-copy-left,
    .industries-copy-right {
        max-width: 100%;
    }

    .industries-title {
        width: min(100%, 400px);
    }

    .industries-sub {
        width: min(100%, 420px);
    }

    .industries-shot {
        width: min(36%, 240px);
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin: 0 auto;
    }

    .services-grid-line-h,
    .services-grid-line-v {
        display: none;
    }

    .industries-shot {
        width: 38%;
    }

    .industries-shot:nth-child(1) {
        margin-right: -6%;
    }

    .industries-shot:nth-child(3) {
        margin-left: -6%;
    }
}

@media (max-width: 980px) {
    .about-timeline {
        --stack-overlap: 18%;
        grid-template-columns: minmax(150px, 0.9fr) minmax(240px, 1.1fr) minmax(260px, 1.25fr);
    }

    .about-timeline-stack {
        width: min(100%, 320px);
    }
}

@media (max-width: 800px) {
    .about-timeline {
        --stack-overlap: 20%;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: 1rem;
    }

    .about-timeline-track {
        display: none;
    }

    .about-step,
    .about-para,
    .about-timeline-stack {
        grid-column: 1;
        grid-row: auto;
    }

    .about-timeline-stack {
        order: 2;
        width: min(100%, 340px);
        justify-self: start;
        margin: 0.5rem 0 1rem;
    }

    .about-step:nth-child(2) { order: 1; }
    .about-para:nth-child(3) { order: 3; }
    .about-step:nth-child(4) { order: 4; }
    .about-para:nth-child(5) { order: 5; }
    .about-step:nth-child(6) { order: 6; }
    .about-para:nth-child(7) { order: 7; }

    .about-mv-track {
        height: 115vh;
    }

    .about-mv-pin {
        top: clamp(0.5rem, 1.5vh, 1rem);
        height: clamp(190px, 34vh, 280px);
    }
}

@media (max-width: 1150px) {
    .contact-section {
        top: 0;
    }

    .contact-shell {
        width: min(920px, 90%);
        padding-top: clamp(1.1rem, 3.5vw, 1.75rem);
    }

    .contact-main {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .site-footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* short desktop / laptop height: fit Contact without clipping */
@media (max-height: 900px) and (min-width: 1151px) {
    :root {
        --contact-peek: clamp(36px, 7vh, 64px);
    }

    .contact-shell {
        padding-top: clamp(1rem, 2.8vh, 1.75rem);
    }

    .contact-heading {
        font-size: clamp(1.85rem, 4.2vh, 2.6rem);
        margin-bottom: clamp(0.7rem, 1.6vh, 1.1rem);
    }

    .contact-dot-line {
        margin: clamp(0.65rem, 1.4vh, 1rem) 0;
    }

    .contact-form-card {
        padding: clamp(1rem, 2.2vh, 1.6rem);
    }

    .contact-form {
        gap: 1.7rem 0.9rem;
    }

    .contact-field textarea {
        max-height: 7.5rem;
    }

    .site-footer {
        padding: 0.45rem 0 0.7rem;
    }
}

@media (max-width: 640px) {
    .contact-offices,
    .contact-channels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-banner-track img {
        height: clamp(120px, 34vw, 180px);
    }

    .about-banner-track {
        animation-duration: 35s;
    }
}

/*
  Reusable for future image-heavy sections:
  add class="reveal" on image blocks / groups
*/
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s var(--ease-out),
        transform 0.7s var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }
.reveal-delay-6 { transition-delay: 0.48s; }

@media (max-width: 900px) {
    .hero-section {
        min-height: calc(87vw * 1525 / 750);
        /* padding: 0.35rem 0 2.75rem; */
        overflow: visible;
        background-image: url("mobile_assets/Section%201/bg.png");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }

    .hero-desktop {
        display: none;
    }

    .hero-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(460px, 94%);
        margin: 0 auto;
        padding-top: .6rem;
        /* gap: 1.1rem; */
    }

    .hero-mobile-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: clamp(200px, 45vw, 320px);
        gap: 0.7rem;
        transform: translateY(clamp(-3.5rem, -7vw, -1.75rem));
    }

    .hero-mobile-eyebrow {
        width: min(76%, 290px);
    }

    .hero-mobile-title {
        margin: 0;
        margin-top: 0.8rem;
        width: clamp(260px, 60vw, 4800px);
    }

    .hero-mobile-title img,
    .hero-mobile-eyebrow,
    .hero-mobile-desc,
    .hero-mobile-cta img {
        width: 100%;
        height: auto;
        display: block;
    }

    .hero-mobile-desc {
        width: clamp(260px, 50vw, 350px);
    }

    .hero-mobile-cta {
        display: inline-flex;
        width: clamp(160px, 36vw, 250px);
        margin-top: 0.6rem;
    }

    .hero-mobile-visual {
        width: 100%;
        margin-top: clamp(-3.5rem, -7vw, -1.75rem);
        padding: 0 0.35rem;
    }

    .hero-mobile-stage {
        position: relative;
        width: 100%;
        aspect-ratio: 11 / 15;
        max-width: 430px;
        margin: 0 auto;
    }

    .hero-mobile-photo {
        position: absolute;
        left: 50%;
        top: clamp(80px, 20vw, 200px);
        transform: translateX(-50%);
        width: 82vw;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 14px 32px rgba(20, 40, 80, 0.18);
        z-index: 2;
    }

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

    .hero-ads-switch--mobile {
        top: clamp(38rem, 94vw, 51rem);
        min-width: 0;
        width: clamp(21rem, 46vw, 25rem);
        aspect-ratio: 536 / 90;
        padding: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        gap: 0.08em;
    }

    .hero-ads-switch-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: fill;
        pointer-events: none;
        z-index: 0;
    }

    .hero-ads-switch--mobile .hero-ads-switch__text,
    .hero-ads-switch--mobile em {
        position: relative;
        z-index: 1;
        font-size: clamp(0.95rem, 4.5vw, 3.25rem);
        padding: 0;
        line-height: 1;
    }

    .hero-mobile-tag {
        position: absolute;
        width: clamp(78px, 25vw, 112px);
        height: auto;
        display: block;
        z-index: 6;
        filter: drop-shadow(0 8px 16px rgba(20, 40, 80, 0.12));
    }

    .hero-mobile-tag-solutions {
        right: clamp(24.5rem, 54vw, 29rem);
        top: 1%;
        width: clamp(130px, 18vw, 150px);
    }

    .hero-mobile-tag-service {
        right: clamp(8.5rem, 39vw, 16rem);
        top: 13%;
        width: clamp(130px, 18vw, 150px);
    }

    .hero-mobile-tag-key {
        width: clamp(8rem, 18vw, 10rem);
        left: clamp(24rem, 53vw, 29rem);
        top: clamp(14rem, 36vw, 20rem);
    }

    .hero-mobile-board {
        position: absolute;
        height: auto;
        display: block;
        z-index: 4;
        filter: drop-shadow(0 12px 24px rgba(20, 40, 80, 0.14));
    }

    .hero-mobile-board-leads {
        width: clamp(14rem, 30vw, 16rem);
        right: clamp(14.8rem, 37vw, 17.8rem);
        top: clamp(23rem, 57vw, 32rem);
    }

    .hero-mobile-board-roas {
        width: clamp(140px, 43vw, 290px);
        left: clamp(175px, 29vw, 300px);
        top: clamp(15px, 2vw, 80px);
    }

    .hero-mobile-board-conversion {
        width: clamp(15rem, 37vw, 20rem);
        left: clamp(14.8rem, 41vw, 17.8rem);
        top: clamp(23rem, 58vw, 36rem);
    }
}

@media (max-width: 640px) {
    .hero-mobile {
        width: min(100%, 420px);
        /* gap: 0.95rem; */
    }

    .hero-mobile-stage {
        aspect-ratio: 10 / 14.5;
    }

    /* .hero-mobile-photo {
        width: clamp(200px, 66vw, 270px);
        top: 35%;
    } */

    .hero-ads-switch--mobile {
        width: clamp(18rem, 55vw, 20rem);
        top: clamp(26rem, 93vw, 37rem);
    }

    .hero-mobile-board-leads {
        width: clamp(8rem, 32vw, 13rem);
        right: clamp(13rem, 36vw, 14rem);
        top: clamp(15rem, 60vw, 24rem);
    }

    .hero-mobile-board-conversion {
        width: clamp(8rem, 36vw, 15rem);
        right: clamp(15rem, 52vw, 16.5rem);
        top: clamp(15rem, 63vw, 25rem);
    }

    .hero-mobile-board-roas {
        width: clamp(9rem, 33vw, 14rem);
        left: clamp(14.5rem, 36vw, 14rem);
        top: clamp(15px, 4vw, 2rem);
    }

    .hero-mobile-tag-solutions {
        width: clamp(6rem, 21vw, 8rem);
        right: clamp(17rem, 64vw, 22rem);
        top: 1%;
    }

    .hero-mobile-tag-service {
        right: clamp(12.5rem, 42vw, 14rem);
        width: clamp(6rem, 21vw, 8rem);
        top: clamp(1rem, 11vw, 6rem);
    }

    .hero-mobile-tag-key {
        width: clamp(6rem, 21vw, 8rem);
        left: clamp(18rem, 67vw, 22.5rem);
        top: clamp(8rem, 31vw, 13rem);
    }
}

@media (max-width: 425px) {

    .hero-ads-switch--mobile {
        width: 18.5rem;
        top: 22rem;
        filter: drop-shadow(0 8px 14px rgba(20, 40, 80, 0.22));
    }

    .hero-mobile-board-leads {
        width: clamp(7rem, 32vw, 8rem);
        right: clamp(10rem, 48vw, 13rem);
        top: clamp(13rem, 56vw, 15rem);
    }

    .hero-mobile-board-conversion {
        width: clamp(3rem, 48vw, 9rem);
        left: clamp(11rem, 55vw, 15rem);
        top: clamp(15rem, 63vw, 25rem);
    }

    .hero-mobile-board-roas {
        width: clamp(5rem, 31vw, 8rem);
        left: clamp(9.5rem, 52vw, 14rem);
        top: clamp(1rem, 6vw, 2rem);
    }

    .hero-mobile-tag-solutions {
        width: 5rem;
        right: clamp(13rem, 63vw, 17rem);
        top: 1%;
    }

    .hero-mobile-tag-service {
        left: clamp(7rem, 19vw, 13rem);
        width: 5rem;
        top: clamp(1rem, 11vw, 6rem);
    }

    .hero-mobile-tag-key {
        width: 5rem;
        left: clamp(11rem, 71vw, 19.5rem);
        top: clamp(8rem, 31vw, 13rem);
    }
}

@media (max-width: 900px) {
    .about-section {
        padding: clamp(3.5rem, 12vw, 5rem) 0 0;
        overflow-x: clip;
        overflow-y: visible;
    }

    .about-inner,
    .about-mv,
    .about-banner {
        display: none;
    }

    .about-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .about-mobile-title {
        width: clamp(150px, 48vw, 220px);
        height: auto;
        display: block;
        margin-bottom: clamp(2.5rem, 10vw, 4rem);
    }

    .about-mobile-timeline {
        --mobile-timeline-progress: 0;
        position: relative;
        width: min(90%, 520px);
        display: flex;
        flex-direction: column;
        gap: clamp(3.25rem, 14vw, 5rem);
    }

    .about-mobile-timeline::before {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 8px;
        width: 3px;
        border-radius: 999px;
        background: url("mobile_assets/Section%202/Timeline1.png") center / 100% 100% no-repeat;
    }

    .about-mobile-timeline::after {
        content: "";
        position: absolute;
        top: 8px;
        bottom: 8px;
        left: 8px;
        width: 3px;
        border-radius: 999px;
        background: #2f6bff;
        transform: scaleY(var(--mobile-timeline-progress));
        transform-origin: top center;
        transition: transform 0.08s linear;
        will-change: transform;
    }

    .about-mobile-story {
        position: relative;
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: clamp(0.85rem, 4vw, 1.25rem);
        align-items: start;
    }

    .about-mobile-dot {
        position: relative;
        width: 18px;
        height: 18px;
        margin-top: 4px;
        border-radius: 50%;
        background: url("mobile_assets/Section%202/Ellipse%202.png") center / contain no-repeat;
        transform: scale(0.9);
        transition: transform 0.35s var(--ease-out), filter 0.35s var(--ease-out);
        z-index: 2;
    }

    .about-mobile-story.is-active .about-mobile-dot {
        background-image: url("mobile_assets/Section%202/Ellipse%201.png");
        transform: scale(1.08);
        filter: drop-shadow(0 0 7px rgba(47, 107, 255, 0.45));
    }

    .about-mobile-story-content {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(1rem, 4vw, 1.4rem);
        opacity: 0.4;
        transform: translateX(10px);
        transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    }

    .about-mobile-story.is-active .about-mobile-story-content {
        opacity: 1;
        transform: translateX(0);
    }

    .about-mobile-label {
        width: clamp(150px, 48vw, 220px);
        max-width: 70%;
        height: auto;
        display: block;
    }

    .about-mobile-label--wide {
        width: clamp(190px, 58vw, 270px);
        max-width: 88%;
    }

    .about-mobile-image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: clamp(14px, 4vw, 22px);
        box-shadow: 0 14px 30px rgba(20, 40, 80, 0.14);
    }

    .about-mobile-para {
        width: min(100%, 440px);
        height: auto;
        display: block;
    }

    .about-mobile-mv {
        width: 100%;
        margin-top: clamp(4rem, 16vw, 6.5rem);
    }

    .about-mobile-mv-track {
        position: relative;
        height: 120svh;
        min-height: 760px;
    }

    .about-mobile-mv-pin {
        position: sticky;
        top: clamp(5.5rem, 12vh, 7rem);
        width: min(92%, 560px);
        height: clamp(350px, 105vw, 620px);
        margin: 0 auto;
        overflow: visible;
    }

    .about-mobile-mv-card {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0 14px 28px rgba(20, 40, 80, 0.12));
        will-change: transform, opacity;
        transform-origin: center center;
        backface-visibility: hidden;
    }

    .about-mobile-mv-card--mission {
        z-index: 1;
        opacity: 0;
        transform: translate3d(-50%, 24%, 0);
    }

    .about-mobile-mv-card--vision {
        z-index: 2;
        opacity: 0;
        transform: translate3d(-50%, 110%, 0);
    }

    .about-mobile-banner {
        width: 100%;
        margin-top: clamp(3rem, 12vw, 5rem);
        overflow: hidden;
    }

    .about-mobile-banner-track {
        display: flex;
        width: max-content;
        animation: about-carousel 45s linear infinite;
        will-change: transform;
    }

    .about-mobile-banner-track img {
        width: auto;
        height: clamp(175px, 50vw, 260px);
        display: block;
        flex-shrink: 0;
        user-select: none;
        pointer-events: none;
    }

    .services-top {
        display: none;
    }

    .services-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: clamp(3.5rem, 13vw, 5.5rem) 4% clamp(4rem, 14vw, 6rem);
        background: #fff url("mobile_assets/Section%203/bg.png") center top / 100% 100% no-repeat;
    }

    .services-mobile-title {
        position: sticky;
        top: clamp(5.25rem, 11vh, 6.5rem);
        z-index: 20;
        width: clamp(145px, 46vw, 220px);
        height: auto;
        display: block;
        margin-bottom: clamp(2rem, 8vw, 3rem);
        filter: drop-shadow(0 4px 10px rgba(255, 255, 255, 0.95));
    }

    .services-mobile-list {
        position: relative;
        width: min(100%, 600px);
        height: 360svh;
        min-height: 2200px;
        overflow: visible;
    }

    .services-mobile-stage {
        position: sticky;
        top: clamp(9.5rem, 18vh, 11rem);
        width: 100%;
        height: clamp(230px, 62vw, 340px);
        overflow: visible;
    }

    .services-mobile-card {
        --stack-offset: 0px;
        position: absolute;
        top: var(--stack-offset);
        left: 0;
        width: 100%;
        margin: 0;
        overflow: hidden;
        border: 1px solid #d9dde5;
        border-radius: clamp(10px, 3vw, 16px);
        background: #fff;
        box-shadow: 0 10px 24px rgba(20, 40, 80, 0.09);
        opacity: 0;
        transform: translate3d(0, 100%, 0);
        transform-origin: center center;
        backface-visibility: hidden;
        will-change: transform, opacity;
    }

    .services-mobile-card:nth-child(1) { --stack-offset: 0px; z-index: 1; }
    .services-mobile-card:nth-child(2) { --stack-offset: 20px; z-index: 2; }
    .services-mobile-card:nth-child(3) { --stack-offset: 40px; z-index: 3; }
    .services-mobile-card:nth-child(4) { --stack-offset: 60px; z-index: 4; }
    .services-mobile-card:nth-child(5) { --stack-offset: 80px; z-index: 5; }
    .services-mobile-card:nth-child(6) { --stack-offset: 100px; z-index: 6; }

    .services-mobile-card img {
        width: 100%;
        height: auto;
        display: block;
    }

    .industries-section {
        display: none;
    }

    .industries-mobile {
        display: block;
        width: 100%;
        padding: clamp(3.5rem, 12vw, 5rem) 4%;
        background: #3475ee url("mobile_assets/Section%204/bg.png") center / 100% 100% no-repeat;
    }

    .industries-mobile-panel {
        width: min(94%, 560px);
        margin: 0 auto;
        padding: clamp(2.5rem, 9vw, 4rem) clamp(1.1rem, 5vw, 2rem) clamp(2rem, 7vw, 3rem);
        overflow: hidden;
        border-radius: clamp(26px, 8vw, 42px);
        background: #fff url("mobile_assets/Section%204/Rectangle.png") center / 100% 100% no-repeat;
        box-shadow: 0 20px 42px rgba(11, 37, 105, 0.2);
    }

    .industries-mobile-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        text-align: center;
    }

    .industries-mobile-title {
        width: min(100%, 480px);
        height: auto;
        display: block;
    }

    .industries-mobile-sub {
        width: min(92%, 430px);
        height: auto;
        display: block;
        margin-top: 0;
    }

    .industries-mobile-btn {
        display: inline-flex;
        width: clamp(190px, 58vw, 290px);
        margin-top: clamp(1.4rem, 6vw, 2.25rem);
    }

    .industries-mobile-btn img {
        width: 100%;
        height: auto;
        display: block;
    }

    .industries-mobile-media {
        position: relative;
        width: 100%;
        height: clamp(480px, 130vw, 710px);
        margin-top: clamp(2rem, 8vw, 3.5rem);
    }

    .industries-mobile-photo {
        position: absolute;
        width: min(68%, 350px);
        height: auto;
        display: block;
        filter: drop-shadow(0 16px 28px rgba(20, 40, 80, 0.2));
    }

    .industries-mobile-photo--one {
        top: 0;
        left: 17%;
        z-index: 1;
    }

    .industries-mobile-photo--two {
        top: 28%;
        right: 35%;
        z-index: 2;
    }

    .industries-mobile-photo--three {
        top: 50%;
        left: 37%;
        z-index: 3;
    }

    .industries-mobile-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: clamp(1.5rem, 6vw, 2.5rem);
        text-align: center;
    }

    .reviews-section {
        padding: 0;
        background: #fff url("mobile_assets/Section%205/bg.png") center / 100% 100% no-repeat;
    }

    .reviews-inner {
        display: none;
    }

    .reviews-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: clamp(4rem, 14vw, 6rem) 0 clamp(4.5rem, 16vw, 7rem);
        gap: clamp(2.5rem, 10vw, 4rem);
    }

    .reviews-mobile-heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(90%, 520px);
        gap: clamp(0.9rem, 4vw, 1.4rem);
        text-align: center;
    }

    .reviews-mobile-title {
        width: clamp(230px, 72vw, 390px);
        height: auto;
        display: block;
    }

    .reviews-mobile-sub {
        width: clamp(180px, 50vw, 280px);
        height: auto;
        display: block;
    }

    .reviews-mobile-marquee {
        width: 100%;
        overflow: hidden;
        background: #fff;
        mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }

    .reviews-mobile-track {
        display: flex;
        align-items: center;
        width: max-content;
        gap: 1rem;
        padding: 0 0.75rem;
        animation: reviews-mobile-marquee 65s linear infinite;
        will-change: transform;
    }

    .reviews-mobile-card {
        width: min(82vw, 430px);
        height: auto;
        display: block;
        flex-shrink: 0;
        /* filter: drop-shadow(0 14px 28px rgba(20, 40, 80, 0.12)); */
    }

    .reviews-mobile-marquee:hover .reviews-mobile-track {
        animation-play-state: paused;
    }

    .people-section {
        padding: 0;
        background: #f8f9fb;
    }

    .people-stage {
        display: none;
    }

    .people-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        min-height: min(calc(100vw * 3.1613), 1500px);
        padding: clamp(4.5rem, 15vw, 6.5rem) 0 0;
        background: #f8f9fb url("mobile_assets/Section%206/bg.png") center / 100% 100% no-repeat;
    }

    .people-mobile-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: min(88%, 560px);
    }

    .people-mobile-title {
        width: clamp(235px, 72vw, 370px);
        height: auto;
        display: block;
    }

    .people-mobile-lead {
        width: 80%;
        height: auto;
        display: block;
        margin-top: clamp(1.5rem, 6vw, 2.5rem);
    }

    .people-mobile-body {
        width: 100%;
        margin: clamp(3.5rem, 12vw, 5rem) 0 0;
        color: var(--people-muted);
        font-family: var(--font-sans);
        font-size: clamp(1.45rem, 6.5vw, 1.9rem);
        font-weight: var(--font-regular);
        line-height: 1.55;
    }

    .people-mobile-body .split-word,
    .people-mobile-body .split-letter {
        display: inline-block;
    }

    .people-mobile-body .split-word {
        white-space: nowrap;
    }

    .people-mobile-btn {
        display: inline-flex;
        width: clamp(210px, 62vw, 320px);
        margin-top: clamp(2rem, 8vw, 3rem);
    }

    .people-mobile-btn img {
        width: 100%;
        height: auto;
        display: block;
    }

    .people-mobile-strip {
        width: 100vw;
        height: clamp(180px, 52vw, 290px);
        margin-top: clamp(3.5rem, 12vw, 5rem);
        margin-left: calc(50% - 50vw);
        margin-bottom: 0;
        flex-shrink: 0;
        overflow: hidden;
    }

    .people-mobile-strip-track {
        display: flex;
        width: max-content;
        height: 100%;
        animation: people-strip-marquee 55s linear infinite;
        will-change: transform;
    }

    .people-mobile-strip-track img {
        width: auto;
        height: 100%;
        display: block;
        flex-shrink: 0;
        user-select: none;
        pointer-events: none;
    }

    .site-footer-inner {
        align-items: center;
        text-align: center;
    }

    .site-footer-social {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 0.8rem;
        row-gap: 0.55rem;
    }

    .site-footer-social-label {
        flex: 0 0 100%;
        margin: 0;
        text-align: center;
    }

    .site-footer-copy {
        width: 100%;
        text-align: center;
    }
}

@keyframes reviews-mobile-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 0.5rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

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

    .float-motion,
    .float-motion-alt,
    .about-banner-track,
    .about-mobile-banner-track,
    .reviews-mobile-track,
    .people-strip-track,
    .people-mobile-strip-track {
        animation: none;
    }

    .about-step,
    .about-para,
    .about-stack-item,
    .about-dot {
        transition: none !important;
    }

    .about-step,
    .about-para,
    .about-stack-item {
        opacity: 1;
        transform: none;
    }

    .about-dot {
        transform: scale(1);
    }

    .site-header,
    .logo-container,
    .img-btn,
    .menu-container nav ul li a {
        transition: none;
    }
}