/* ═══════════════════════════════════════════
   About Us — Page Styles
   assets/css/pages/about-us.css
═══════════════════════════════════════════ */

/* ───────────────────────────────────────────
   Hero Banner
─────────────────────────────────────────── */

.au-banner {
    position: relative;
    min-height: 100vh;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #050505;
}

/* Dark overlay — heavier at edges to keep globe visible */
/* .au-banner__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.65) 100%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.55) 100%);
    z-index: 0;
} */

.au-banner__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* gap: 1.25rem; */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* ── Heading ── */
.au-banner__heading {
    /* font-size: clamp(2rem, 5.5vw, 5rem); */
    font-size: clamp(29px, 4.2vw, 80px);
    line-height: 120%;
    /* line-height: 125%; */
    font-weight: 300;
    color: #fff;
    /* line-height: 1.15; */
    text-transform: uppercase;
    /* margin: 0; */
    margin-bottom: clamp(20px, 5vw, 32px);
}

/* Yellow accent — "AI TRANSFORMATION" */
.au-banner__accent {
    color: #ebf441;
}

.au-banner__accent.has-rotator {
    display: inline-grid;
    vertical-align: middle;
    overflow: hidden;
}

.rotator-word {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
    white-space: nowrap;
}

.rotator-word.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

.rotator-word.is-leaving {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}

/* ── Description ── */
.au-banner__desc {
    font-size: clamp(14px, 1.05vw, 1.25rem);
    color: rgba(255, 255, 255, 0.65);
    line-height: 150%;
    margin-bottom: 2.35vw;
    max-width: 480px;
}

/* ── CTA Button — yellow pill with dark icon badge ── */
.au-banner .btn-primary:hover {
    border: 2px solid var(--primary);
}

.au-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: #ebf441;
    color: #111;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    padding: 0.65rem 1.25rem 0.65rem 1.6rem;
    border-radius: 999px;
    margin-top: 0.5rem;
    transition: background 0.25s, transform 0.2s;
}

.au-banner__btn:hover {
    background: #d8e03a;
    transform: translateY(-2px);
    color: #111;
}

.au-banner__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #111;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s;
}

.au-banner__btn-icon svg {
    stroke: #ebf441;
}

.au-banner__btn:hover .au-banner__btn-icon {
    background: #000;
}


/* ── Responsive ── */
@media (max-width: 767px) {
    /* .au-banner__heading {
        font-size: clamp(1.8rem, 8vw, 3rem);
    } */

    .au-banner__desc br {
        display: none;
    }
}


/* ───────────────────────────────────────────
   Our Goal Section
─────────────────────────────────────────── */

.au-goal {
    background: #000;
    padding: clamp(50px, 5.25vw, 100px) 0 clamp(50px, 5.25vw, 100px) 0px;
    /* padding: max(5vw, 50px) 0; */
}

.au-goal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
}

/* Label — re-centres the global .slabel */
/* .au-goal__label {
    margin: 0 auto;
    justify-content: center;
} */

/* Statement text */
.au-goal__statement {
    font-size: clamp(26px, 3.65vw, 70px);
    font-weight: 400;
    line-height: 140%;
    color: rgba(255, 255, 255, 0.25);
    /* base grey — chars override */
    margin: 0;
    max-width: 1460px;
    /* Prevent layout shift during char wrap */
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Individual character spans — scroll-driven fill */
.au-goal__char {
    display: inline;
    color: rgba(255, 255, 255, 0.2);
    transition: color 0.25s ease;
}

.au-goal__char.is-lit {
    color: #fff;
}

@media (max-width: 767px) {
    /* .au-goal__statement {
        font-size: clamp(1.35rem, 5.5vw, 2rem);
    } */

    .au-stack__tagline p br {
        display: none;
    }

    /* .au-stack {
        padding-top: 0px !important;
    } */
}


/* ───────────────────────────────────────────
   Full-width image sections
─────────────────────────────────────────── */

/* Full-width image sections */
.au-bg-image-section {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #000;
}

.au-bg-image-section__image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: cover;
}

/* Stack Cards */
:root {
    --sc-header: var(--header-h, 80px);
    /* site nav height — uses the dynamic var set by sticky-header JS */
    --sc-intro-offset: calc(0.5rem + 1vw);
    /* breathing room below sticky header */
    --sc-collapsed: 86px;
    /* number-bar height per card — must exceed font-size × line-height */
    --sc-seam-overlap: 1px;
    /* hides sub-pixel hairlines between stacked cards */
    --sc-intro-height: clamp(90px, 10vw, 220px);
    /* sticky intro space above cards */
    --sc-stack-release: clamp(120px, 16vh, 180px);
    /* short scroll runway for the final card */
    --sc-radius: 1rem;
}

/* Section wrapper */
.au-stack {
    background: #000;
    /* padding-top: 5rem;
    padding-bottom: 0; */
    padding: 3vw 0px;
    padding: clamp(50px, 5.25vw, 100px) 0 clamp(25px, 2.8vw, 50px) 0px;
    position: relative;
}

/* Intro two-column row */
.au-stack__intro-shell {
    position: sticky;
    top: calc(var(--sc-header) + var(--sc-intro-offset));
    z-index: 20;
    min-height: var(--sc-intro-height);
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    background: #000;
    /* padding-bottom: clamp(1.5rem, 3vw, 3rem); */
    transform: translateY(var(--sc-intro-release-y, 0px));
    will-change: transform;
    backface-visibility: hidden;
}

.au-stack__intro {
    width: 100%;
    margin-bottom: 0 !important;
}

/* .au-stack__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
    padding-bottom: 3rem;
} */

.au-stack__label {
    padding-top: 0.35rem;
    /* optical align to tagline first line */
}

.au-stack__tagline {
    /* font-size: clamp(1.15rem, 2vw, 1.65rem); */
    font-weight: 400;
    color: #fff;
    /* line-height: 1.5; */
    font-size: clamp(26px, 2.3vw, 46px);
    line-height: 140%;
    margin: 0;
}

/* WYSIWYG content inside stack-card headings */
.au-stack__tagline p {
    margin: 0;
}

/* ── Card Track ── */
.au-stack__track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.au-stack__track::after {
    content: "";
    display: block;
    flex: 0 0 var(--sc-stack-release);
}

/* ── Individual Card ── */
.sc-card {
    position: sticky;
    /* Each card sticks below the previous collapsed bar */
    top: calc(var(--sc-header) + var(--sc-intro-offset) + var(--sc-intro-height) + var(--card-idx) * (var(--sc-collapsed) - var(--sc-seam-overlap)));

    /* Height fills from sticky top to bottom of viewport */
    /* min-height: calc(100vh - var(--sc-header) - var(--card-idx) * var(--sc-collapsed)); */

    border-radius: var(--sc-radius) var(--sc-radius) 0 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: calc(1 + var(--card-idx));

    /* Background image — set via inline style in PHP */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #050f12;
    /* fallback */

    /* Cards above are dimmed */
    transition: filter 0.4s ease;
    transform: translateY(var(--sc-card-release-y, 0px));
    will-change: transform;
    backface-visibility: hidden;
}

/* Dimming for cards that have been stacked over */
/* .sc-card.is-past {
    filter: brightness(0.55);
} */

/* ── Inner layout ── */
.sc-card__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 1rem;
    padding-bottom: 3rem;
}

/* Number bar — always visible at top */
.sc-card__header {
    height: var(--sc-collapsed);
    display: flex;
    align-items: center;
    margin-bottom: max(2.8vw, 26px);
    /* margin-bottom: max(2 vw, 20px); */
}

.sc-card__num {
    /* font-size: 1.1rem; */
    /* font-weight: 700; */
    color: #ebf441;
    /* letter-spacing: 0.04em; */
    font-size: clamp(24px, 2.5vw, 44px);
    line-height: 145%;
}

/* Content — sits in the lower portion of the card */
.sc-card__body {
    margin-top: auto;
    max-width: 760px;
    /* max-width: 580px; */
}

.sc-card__heading {
    /* font-size: clamp(1.4rem, 2.2vw, 2rem); */
    /* font-weight: 600; */
    color: #fff;
    margin: 0 0 max(14px, 1vw);
    /* line-height: 1.3; */
    font-size: clamp(22px, 2.5vw, 44px);
    line-height: 145%;
}

.sc-card__text {
    /* font-size: clamp(0.8rem, 0.95vw, 0.95rem); */
    /* font-size: clamp(14px, 0.835vw, 16px); */
    /* line-height: 150%; */
    color: rgba(255, 255, 255, 0.6);
    /* line-height: 1.7; */
    margin: 0 0 1rem;
    font-size: clamp(14px, 1.05vw, 1.25rem);
    line-height: 150%;

}

.sc-card__text:last-child {
    margin-bottom: 0;
}

.sc-card__text p {
    margin: 0 0 1rem;
}

.sc-card__text p:last-child {
    margin-bottom: 0;
}

/* ── Background layer — dark overlay over the photo ── */
.sc-card__bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.60) 60%,
            rgba(0, 0, 0, 0.80) 100%);
}





/* ───────────────────────────────────────────
   Our Clients — Dual Marquee
─────────────────────────────────────────── */



/* ── Marquee core layout (home.css not loaded here, so re-declare) ── */


/* Logo images — white */



/* Rerponsive */


@media screen and (max-width: 767px) {

    .au-banner {
        padding: 24vw 0 10vw 0;
        min-height: 600px;
        height: 600px;
    }

}


@media (max-width: 767px) {

    :root {
        --sc-header: var(--header-h, 64px);
        --sc-intro-offset: 0px;
        --sc-collapsed: 64px;
        --sc-intro-height: auto;
    }

    /* ── Intro shell: must stick right under the header ── */
    .au-stack__intro-shell {
        /* Override clamp-based min-height so it shrinks to content */
        min-height: 0 !important;
        /* padding-top: 1rem;
        padding-bottom: 1rem; */
        /* Re-declare sticky top using the mobile header var */
        top: var(--header-h, 64px);
    }

    /* Force the Bootstrap grid columns to stack on mobile */
    .au-stack__intro {
        flex-direction: column;
        row-gap: 1rem;
    }

    .au-stack__intro>.col-4,
    .au-stack__intro>.col-8 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .au-stack__tagline {
        /* font-size: clamp(20px, 6vw, 28px); */
    }

    /* ── Cards: recalc their sticky top based on real measured intro height ── */
    /* The JS reads computed 'top', so we just need a sensible fallback.
       We use a fixed approach: header + a reasonable intro estimate. */
    .sc-card {
        top: calc(var(--header-h, 64px) + var(--card-intro-h, 100px) + var(--card-idx) * (var(--sc-collapsed) - var(--sc-seam-overlap)));
        /* Cards should be tall enough to show content */
        /* min-height: 70vh; */
    }
}

/* ───────────────────────────────────────────
   People Section
─────────────────────────────────────────── */

.au-people {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: max(5vw, 60px) 0;
    overflow: hidden;
    background-color: #050505;
}

/* Dark gradient overlay */
.au-people__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 0;
}

.au-people__inner {
    position: relative;
    z-index: 1;
}

.au-people__heading {
    color: #fff;
    /* font-size: clamp(32px, 3.5vw, 60px); */
    /* line-height: 120%; */
    font-size: clamp(26px, 2.5vw, 48px);
    line-height: 140%;
    font-weight: 300;
    margin-bottom: max(20px, 1.5vw);
}

.au-people__accent {
    color: #ebf441;
    font-weight: 600;
}

.au-people__desc {
    color: rgba(255, 255, 255, 0.65);
    /* font-size: clamp(14px, 1.05vw, 18px); */
    /* line-height: 160%; */
    font-size: clamp(14px, 1.05vw, 1.25rem);
    line-height: 150%;
    margin: 0;
    /* max-width: 580px; */
}

@media (max-width: 767px) {
    .au-people__overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0.2) 100%);
    }
}

@media (max-width: 1560px) {
    :root {
        /* hides sub-pixel hairlines between stacked cards */
        --sc-intro-height: clamp(90px, 9.5vw, 220px);

    }

}

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

/* ───────────────────────────────────────────
   Think Stepped Animation Section
─────────────────────────────────────────── */

.au-think-anim {
    background: #000;
    /* padding: clamp(25px, 2.8vw, 50px) 0px clamp(50px, 5.25vw, 100px)  0px; */
    padding: clamp(35px, 3.5vw, 65px) 0px clamp(60px, 6vw, 115px)  0px;
    overflow: hidden;
}

.au-think-anim__inner {
    display: flex;
    justify-content: flex-start;
}

.au-think-anim__text {
    display: flex;
    align-items: center;
    font-size: clamp(50px, 6vw, 120px);
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.au-think-static {
    font-weight: 300;
    margin-right: clamp(10px, 1.5vw, 24px);
}

.au-think-mask {
    position: relative;
    overflow: visible;
    flex: 1;
}

.au-think-queue {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.5vw, 24px);
    position: relative;
    will-change: transform;
}

.think-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    /* Fixes safari rounded border clipping */
}

.think-item.item-imenso {
    border-radius: 0px;
}

.think-pill {
    position: absolute;
    inset: 0;
    border: 1px solid #fff;
    border-radius: 999px;
    z-index: 1;
}

.think-word {
    position: relative;
    z-index: 2;
    padding: 0.15em 0.5em;
    display: inline-block;
    will-change: transform, font-weight, opacity;
}

/* Base states for the pills */
.item-bold .think-word {
    font-weight: 400;
    /* Bolder animation done via JS */
}

.item-beyond .think-word {
    font-style: italic;
    font-weight: 300;
}

.item-big .think-word {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.item-imenso .think-word {
    font-weight: 700;
    color: #ebf441;
    padding: 0;
    /* No pill padding needed */
}

.item-imenso .think-pill {
    display: none;
}