:root {

    /* -----------------------------------------
       MONOCHROME COLOR PALETTE
    ----------------------------------------- */

    --black: #000000;

    --near-black: #080808;

    --dark: #111111;

    --dark-gray: #1c1c1c;

    --gray: #555555;

    --medium-gray: #777777;

    --light-gray: #cfcfcf;

    --off-white: #f3f3f3;

    --white: #ffffff;


    /* -----------------------------------------
       BORDERS
    ----------------------------------------- */

    --border-light:
        rgba(0, 0, 0, 0.15);

    --border-dark:
        rgba(255, 255, 255, 0.18);


    /* -----------------------------------------
       LAYOUT
    ----------------------------------------- */

    --container-width: 1440px;

    --container-padding: 60px;


    /* -----------------------------------------
       TRANSITIONS
    ----------------------------------------- */

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --ease-fast:
        cubic-bezier(
            0.25,
            0.46,
            0.45,
            0.94
        );

}


/* =========================================================
   02 · RESET
========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        "Montserrat",
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    background:
        var(--white);

    color:
        var(--black);

    line-height:
        1.6;

    overflow-x:
        hidden;

}


/* Prevent scrolling while mobile menu is open */

body.menu-open {

    overflow:
        hidden;

}


img,
video {

    display:
        block;

    width:
        100%;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font:
        inherit;

}


/* =========================================================
   03 · TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
h4,
h5 {

    font-weight:
        500;

    line-height:
        1;

    letter-spacing:
        -0.05em;

}


h1 {

    font-size:
        clamp(
            4rem,
            9vw,
            10rem
        );

}


h2 {

    font-size:
        clamp(
            3rem,
            6vw,
            7rem
        );

}


h3 {

    font-size:
        clamp(
            2rem,
            4vw,
            4.5rem
        );

}


p {

    font-size:
        1rem;

}


::selection {

    background:
        var(--black);

    color:
        var(--white);

}


/* =========================================================
   04 · CONTAINER
========================================================= */

.container {

    width:
        min(
            calc(
                100% -
                (
                    var(--container-padding) * 2
                )
            ),
            var(--container-width)
        );

    margin:
        0 auto;

}


/* =========================================================
   05 · BUTTONS & LINKS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        20px;

    padding:
        18px 28px;

    border:
        1px solid transparent;

    font-size:
        0.75rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

    transition:

        background
        0.4s
        var(--ease),

        color
        0.4s
        var(--ease),

        border-color
        0.4s
        var(--ease),

        transform
        0.4s
        var(--ease);

}


.btn:hover {

    transform:
        translateY(-4px);

}


.btn-dark {

    background:
        var(--black);

    color:
        var(--white);

}


.btn-dark:hover {

    background:
        var(--white);

    color:
        var(--black);

    border-color:
        var(--black);

}


.btn-arrow {

    font-size:
        1.1rem;

    transition:
        transform
        0.4s
        var(--ease);

}


.btn:hover
.btn-arrow {

    transform:
        translate(
            4px,
            0
        );

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        40px;

    padding-bottom:
        8px;

    border-bottom:
        1px solid
        var(--black);

    font-size:
        0.75rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

}


.text-link span {

    transition:
        transform
        0.4s
        var(--ease);

}


.text-link:hover span {

    transform:
        translate(
            4px,
            -4px
        );

}


/* =========================================================
   06 · PAGE LOADER
========================================================= */

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--black);

    color:
        var(--white);

    transition:
        opacity
        0.8s
        var(--ease),

        visibility
        0.8s
        var(--ease);

}


.page-loader.loaded {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

}


.loader-logo {

    font-size:
        2rem;

    font-weight:
        800;

    letter-spacing:
        -0.08em;

}


.loader-logo span {

    font-size:
        1.3em;

}


.loader-line {

    width:
        120px;

    height:
        1px;

    margin-top:
        30px;

    background:
        var(--white);

    transform-origin:
        left;

    animation:
        loaderLine
        1.5s
        var(--ease)
        infinite;

}


@keyframes loaderLine {

    0% {

        transform:
            scaleX(0);

    }

    50% {

        transform:
            scaleX(1);

    }

    100% {

        transform:
            scaleX(0);

        transform-origin:
            right;

    }

}


/* =========================================================
   07 · NAVIGATION
========================================================= */

.site-header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        10000;

    color:
        var(--white);

    transition:

        background
        0.5s
        var(--ease),

        color
        0.5s
        var(--ease),

        backdrop-filter
        0.5s
        var(--ease);

}


.site-header.scrolled {

    background:
        rgba(
            0,
            0,
            0,
            0.9
        );

    backdrop-filter:
        blur(
            15px
        );

}


.navbar {

    width:
        min(
            calc(
                100% -
                80px
            ),
            var(--container-width)
        );

    height:
        90px;

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}

.logo {

    font-size:
        1.6rem;

    font-weight:
        800;

    letter-spacing:
        -0.08em;

}


.logo span {

    font-size:
        1.2em;

}

.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        40px;

}


.nav-links a {

    position:
        relative;

    font-size:
        0.75rem;

    font-weight:
        500;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


.nav-links a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        -8px;

    width:
        0;

    height:
        1px;

    background:
        currentColor;

    transition:
        width
        0.4s
        var(--ease);

}


.nav-links a:hover::after {

    width:
        100%;

}


.nav-cta {

    padding:
        12px 22px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.6
        );

    font-size:
        0.7rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

    transition:
        background
        0.4s
        var(--ease),

        color
        0.4s
        var(--ease);

}


.nav-cta:hover {

    background:
        var(--white);

    color:
        var(--black);

}


/* =========================================================
   08 · MOBILE NAVIGATION
========================================================= */

.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    padding: 5px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-toggle span {

    display:
        block;

    width:
        25px;

    height:
        1px;

    margin:
        7px auto;

    background:
        currentColor;

    transition:
        transform
        0.4s
        var(--ease);

}


.menu-toggle.active
span:first-child {

    transform:
        translateY(
            4px
        )
        rotate(
            45deg
        );

}


.menu-toggle.active
span:last-child {

    transform:
        translateY(
            -4px
        )
        rotate(
            -45deg
        );

}




.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;              
    display: flex;
    align-items: center;
    background-color: #000000;  
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    isolation: isolate;         
    transform: translateY(-20px);
    transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease), transform 0.5s var(--ease);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-menu__inner {
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    padding: 40px;
}


.mobile-menu__inner a {

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        18px 0;

    border-bottom:
        1px solid
        var(--border-dark);

    font-size:
        clamp(
            2rem,
            8vw,
            4rem
        );

    letter-spacing:
        -0.04em;

}


.mobile-menu__inner a span {

    font-size:
        0.7rem;

    opacity:
        0.5;

}


/* =========================================================
   09 · HERO
========================================================= */

.hero {

    position:
        relative;

    width:
        100%;

    height:
        100vh;

    min-height:
        700px;

    overflow:
        hidden;

    background:
        var(--black);

}


.hero-video {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(
            100%
        );

    transform:
        scale(
            1.05
        );

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(
            0,
            0,
            0,
            0.25
        );

}


.hero-meta {

    position:
        absolute;

    top:
        130px;

    left:
        60px;

    right:
        60px;

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--white);

    font-size:
        0.65rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;

}


.hero__scroll {

    position:
        absolute;

    bottom:
        40px;

    left:
        60px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    color:
        var(--white);

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;

}


.hero__scroll .line {

    width:
        60px;

    height:
        1px;

    background:
        var(--white);

    transform-origin:
        left;

    animation:
        scrollLine
        2s
        ease-in-out
        infinite;

}


@keyframes scrollLine {

    0% {

        transform:
            scaleX(
                0
            );

        opacity:
            0;

    }

    50% {

        transform:
            scaleX(
                1
            );

        opacity:
            1;

    }

    100% {

        transform:
            scaleX(
                0
            );

        opacity:
            0;

    }

}


/* =========================================================
   10 · SECTION UTILITIES
========================================================= */

section {

    position:
        relative;

}


.section-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-bottom:
        35px;

    border-bottom:
        1px solid
        var(--border-light);

}


.section-label {

    margin:
        0;

    font-size:
        0.7rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.18em;

}


.section-label::before {

     content: "-";

    margin-right:
        12px;

}


.section-number {

    font-size:
        0.7rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    opacity:
        0.5;

}


/* =========================================================
   11 · WHAT WE DO
========================================================= */

.what-we-do {

    padding:
        180px 0;

    background:
        var(--white);

}


.what-we-do__content {

    padding-top:
        100px;

}


.what-we-do__content h1 {

    max-width:
        1200px;

    font-size:
        clamp(
            4rem,
            10vw,
            11rem
        );

    font-weight:
        500;

    line-height:
        0.85;

    letter-spacing:
        -0.07em;

}


.what-we-do__content h1 span {

    display:
        block;

}


.what-we-do__content
.outline {

    color:
        transparent;

    -webkit-text-stroke:
        1px
        var(--black);

}


.what-we-do__bottom {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;

    margin-top:
        100px;

}


.what-we-do__bottom p {

    max-width:
        550px;

    font-size:
        1.15rem;

    line-height:
        1.7;

    color:
        var(--gray);

}


/* =========================================================
   12 · WHO WE ARE
========================================================= */

.who-we-are {

    padding:
        180px 0 220px;

    background:
        var(--black);

    color:
        var(--white);

}


.who-we-are
.section-top {

    border-color:
        var(--border-dark);

}


.who-we-are__grid {

    display:
        grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    gap:
        120px;

    padding-top:
        120px;

}


.who-we-are__heading h2 {

    max-width:
        900px;

    font-size:
        clamp(
            3.5rem,
            6vw,
            7rem
        );

}


.who-we-are__heading h2 span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        var(--white);

}


.who-we-are__content {

    align-self:
        end;

    max-width:
        550px;

}


.who-we-are__content
.large-text {

    margin-bottom:
        35px;

    font-size:
        1.4rem;

    line-height:
        1.6;

}


.who-we-are__content p:not(.large-text) {

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

}


.who-we-are
.text-link {

    color:
        var(--white);

    border-color:
        var(--white);

}


.who-we-are__visual {

    position:
        relative;

    height:
        550px;

    margin-top:
        150px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--dark-gray);

    overflow:
        hidden;

}


.visual-photos {

    display:
        grid;

    grid-template-columns:
        1.4fr
        1fr;

    grid-template-rows:
        1fr
        1fr;

    gap:
        2px;

    width:
        100%;

    height:
        100%;

}


.visual-photo {

    position:
        relative;

    overflow:
        hidden;

}


.visual-photo--main {

    grid-row:
        1 / 3;

}


.visual-photo img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(1)
        contrast(1.1);

    transform:
        scale(1.02);

    transition:
        filter
        1.2s
        var(--ease),
        transform
        1.2s
        var(--ease);

}


.who-we-are__visual:hover
.visual-photo img {

    filter:
        grayscale(0.2)
        contrast(1.05);

    transform:
        scale(1.08);

}


.visual-caption {

    position:
        absolute;

    z-index:
        2;

    bottom:
        30px;

    left:
        30px;

    padding:
        8px
        16px;

    background:
        rgba(0, 0, 0, 0.55);

    backdrop-filter:
        blur(6px);

    font-size:
        0.7rem;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;

    color:
        var(--white);

    opacity:
        0.9;

}

/* =========================================================
   SERVICES · INTERACTIVE SHOWCASE
========================================================= */

.services {

    position:
        relative;

    background:
        var(--white);

    padding-top:
        120px;

}


/* =========================================================
   SERVICES INTRO
========================================================= */

.services__intro {

    padding:
        120px 0 160px;

}


.services__intro h2 {

    max-width:
        1100px;

    font-size:
        clamp(
            4rem,
            8vw,
            9rem
        );

    line-height:
        0.9;

    letter-spacing:
        -0.07em;

}


.services__intro h2 span {

    display:
        block;

}


.services__intro h2 em {

    font-style:
        normal;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        var(--black);

}


/* =========================================================
   SERVICES SHOWCASE
========================================================= */

.services-showcase {

    position:
        relative;

    width:
        100%;

    background:
        var(--black);

    padding:
        30px 60px 120px;

}


/* =========================================================
   PROGRESS INDICATOR
========================================================= */

.services-progress {

    position:
        sticky;

    top:
        110px;

    z-index:
        20;

    width:
        150px;

    margin-left:
        auto;

    margin-bottom:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    color:
        var(--white);

    font-size:
        0.65rem;

    font-weight:
        600;

    letter-spacing:
        0.12em;

}


.services-progress__line {

    width:
        50px;

    height:
        1px;

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

}


.services-progress__current {

    opacity:
        1;

}


.services-progress__total {

    opacity:
        0.4;

}


/* =========================================================
   SERVICE PANEL
========================================================= */

.service-panel {

    position:
        relative;

    min-height:
        520px;

    padding:
        70px;

    margin-bottom:
        20px;

    display:
        grid;

    grid-template-columns:
        80px
        1.2fr
        1fr
        80px;

    align-items:
        center;

    gap:
        50px;

    overflow:
        hidden;

    background:
        var(--dark-gray);

    color:
        var(--white);

    cursor:
        pointer;

    transition:

        min-height
        0.8s
        var(--ease),

        background
        0.8s
        var(--ease),

        transform
        0.8s
        var(--ease);

}


.service-panel:hover {

    transform:
        translateY(
            -5px
        );

}


/* =========================================================
   ACTIVE PANEL
========================================================= */

.service-panel.active {

    min-height:
        650px;

    background:
        var(--white);

    color:
        var(--black);

}


/* =========================================================
   NUMBER
========================================================= */

.service-panel__number {

    align-self:
        start;

    font-size:
        0.7rem;

    font-weight:
        600;

    letter-spacing:
        0.15em;

    opacity:
        0.5;

}


/* =========================================================
   CONTENT
========================================================= */

.service-panel__content h3 {

    font-size:
        clamp(
            4rem,
            8vw,
            9rem
        );

    line-height:
        0.85;

    letter-spacing:
        -0.07em;

}


.service-panel__content p {

    max-width:
        450px;

    margin-top:
        50px;

    font-size:
        1rem;

    line-height:
        1.7;

    opacity:
        0.6;

}


.service-panel__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        35px;

    padding-bottom:
        8px;

    border-bottom:
        1px solid
        currentColor;

    font-size:
        0.7rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

}


.service-panel__link span {

    transition:
        transform
        0.4s
        var(--ease);

}


.service-panel__link:hover span {

    transform:
        translate(
            5px,
            -5px
        );

}


/* =========================================================
   VISUAL AREA
========================================================= */

.service-panel__visual {

    position:
        relative;

    height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        var(--black);

}


.service-panel.active
.service-panel__visual {

    background:
        var(--off-white);

}


.service-panel__visual svg {

    width:
        clamp(
            90px,
            10vw,
            150px
        );

    height:
        auto;

    overflow:
        visible;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    transition:
        transform
        1s
        var(--ease),
        color
        0.4s
        ease;

}


.service-panel.active
.service-panel__visual svg {

    color:
        var(--black);

}


.service-panel:hover
.service-panel__visual svg {

    transform:
        scale(
            1.12
        );

}


/* =========================================================
   ARROW
========================================================= */

.service-panel__arrow {

    width:
        70px;

    height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.35
        );

    border-radius:
        50%;

    font-size:
        1.3rem;

    color:
        rgba(
            255,
            255,
            255,
            0.35
        );

    transition:
        transform
        0.5s
        var(--ease),
        border-color
        0.4s
        ease,
        color
        0.4s
        ease;

}


.service-panel.active
.service-panel__arrow {

    border-color:
        var(--black);

    color:
        var(--black);

}


.service-panel:hover
.service-panel__arrow {

    transform:
        rotate(
            45deg
        );

}



/* =========================================================
   14 · CLIENTS
========================================================= */

.clients {

    position:
        relative;

    padding:
        180px 0 160px;

    background:
        var(--white);

    color:
        var(--black);

    overflow:
        hidden;

}


.clients
.section-top {

    border-color:
        var(--border-light);

}


/* =========================================================
   CLIENT INTRO
========================================================= */

.clients__intro {

    padding:
        120px 0 140px;

}


.clients__intro-grid {

    display:
        grid;

    grid-template-columns:
        1.4fr
        0.6fr;

    gap:
        100px;

    align-items:
        end;

}


.clients__intro h2 {

    max-width:
        1000px;

    font-size:
        clamp(
            4rem,
            7vw,
            8rem
        );

    line-height:
        0.88;

    letter-spacing:
        -0.07em;

}


.clients__intro h2 span {

    display:
        block;

}


.clients__intro-text {

    max-width:
        420px;

    margin-bottom:
        10px;

    font-size:
        1rem;

    line-height:
        1.8;

    color:
        var(--gray);

}


/* =========================================================
   CLIENT GRID
========================================================= */

.clients-grid {

    display:
        grid;

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

    width:
        100%;

    border-top:
        1px solid
        var(--border-light);

    border-left:
        1px solid
        var(--border-light);

}


/* =========================================================
   CLIENT LOGO
========================================================= */

.client-logo {

    position:
        relative;

    min-height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px;

    border-right:
        1px solid
        var(--border-light);

    border-bottom:
        1px solid
        var(--border-light);

    overflow:
        hidden;

    transition:
        background
        0.5s
        var(--ease);

}


/* =========================================================
   LOGO IMAGE
========================================================= */

.client-logo img {

    width:
        70%;

    max-width:
        180px;

    max-height:
        90px;

    object-fit:
        contain;

    filter:
        grayscale(
            100%
        );

    opacity:
        0.6;

    transition:

        transform
        0.6s
        var(--ease),

        opacity
        0.6s
        var(--ease),

        filter
        0.6s
        var(--ease);

}


/* =========================================================
   HOVER
========================================================= */

.client-logo:hover {

    background:
        var(--off-white);

}


.client-logo:hover img {

    transform:
        scale(
            1.12
        );

    opacity:
        1;

    filter:
        grayscale(
            0%
        );

}


/* =========================================================
   CLIENT CTA
========================================================= */

.clients__cta {

    display:
        flex;

    justify-content:
        center;

    padding-top:
        100px;

}


.btn-outline-light {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    padding:
        20px 30px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.5
        );

    color:
        var(--white);

    font-size:
        0.7rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

    transition:

        background
        0.4s
        var(--ease),

        color
        0.4s
        var(--ease);

}


.btn-outline-light:hover {

    background:
        var(--white);

    color:
        var(--black);

}


.btn-outline-light
.btn-arrow {

    transition:
        transform
        0.4s
        var(--ease);

}


.btn-outline-light:hover
.btn-arrow {

    transform:
        translate(
            5px,
            0
        );

}



/* =========================================================
   15 · CAREERS
========================================================= */

.careers {

    position:
        relative;

    padding:
        180px 0;

    background:
        var(--black);

    color:
        var(--white);

    overflow:
        hidden;

}


.careers__bg {

    position:
        absolute;

    inset:
        0;

    z-index:
        0;

}


.careers__bg img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    filter:
        grayscale(0.5)
        brightness(0.55);

}


.careers__bg-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0.85)
        );

}


.careers
.container {

    position:
        relative;

    z-index:
        1;

}


.careers
.section-top {

    border-color:
        var(--border-dark);

}


.careers
.careers__content
h2
span {

    -webkit-text-stroke-color:
        var(--white);

}


.careers
.careers__bottom
p {

    color:
        rgba(255, 255, 255, 0.75);

}


.careers__content {

    padding-top:
        120px;

}


.careers__content h2 {

    max-width:
        1100px;

    font-size:
        clamp(
            4rem,
            9vw,
            10rem
        );

}


.careers__content h2 span {

    display:
        block;

    color:
        transparent;

    -webkit-text-stroke:
        1px
        var(--black);

}


.careers__bottom {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;

    margin-top:
        100px;

}


.careers__bottom p {

    max-width:
        550px;

    font-size:
        1.1rem;

    line-height:
        1.7;

    color:
        var(--gray);

}


/* =========================================================
   16 · CONTACT CTA
========================================================= */

.contact-cta {

    padding:
        200px 0;

    background:
        var(--off-white);

    text-align:
        center;

}


.contact-cta
.section-label {

    margin-bottom:
        60px;

}


.contact-cta h2 {

    max-width:
        1100px;

    margin:
        0 auto;

    font-size:
        clamp(
            3rem,
            7vw,
            8rem
        );

}


.contact-cta h2 span {

    display:
        block;

    color:
        var(--gray);

}


.contact-cta__link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        25px;

    margin-top:
        70px;

    padding-bottom:
        12px;

    border-bottom:
        1px solid
        var(--black);

    font-size:
        0.8rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;

}


.contact-cta__link span {

    font-size:
        1.3rem;

    transition:
        transform
        0.4s
        var(--ease);

}


.contact-cta__link:hover span {

    transform:
        translate(
            5px,
            -5px
        );

}


/* =========================================================
   17 · FOOTER
========================================================= */

.footer {

    padding-top: clamp(50px, 8vw, 120px);
    padding-bottom: clamp(20px, 3vw, 30px);

    background:
        var(--black);

    color:
        var(--white);

}


.footer-top {

    display:
        grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

     gap: clamp(25px, 4vw, 70px);

    padding-bottom: clamp(35px, 6vw, 100px);

}


.footer-logo {

    font-size:
        3rem;

    font-weight:
        800;

    letter-spacing:
        -0.08em;

}


.footer-logo span {

    font-size:
        1.2em;

}


.footer-brand p {

    margin-top: clamp(10px, 2vw, 20px);

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

     gap: clamp(8px, 1.5vw, 15px);

}


.footer-column h4 {

    margin-bottom:
        15px;

    font-size:
        0.7rem;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        0.15em;

}


.footer-column a {

    font-size:
        0.85rem;

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    transition:
        color
        0.3s
        ease;

}


.footer-column a:hover {

    color:
        var(--white);

}


.footer-bottom {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding-top: clamp(15px, 2vw, 30px);

    border-top:
        1px solid
        var(--border-dark);

    font-size:
        0.7rem;

    color:
        rgba(
            255,
            255,
            255,
            0.4
        );

}


.footer-bottom div {

    display:
        flex;

    gap:
        30px;

}


/* =========================================================
   18 · REVEAL ANIMATIONS
========================================================= */

.reveal {

    opacity:
        0;

    transform:
        translateY(
            60px
        );

    transition:

        opacity
        1s
        var(--ease),

        transform
        1s
        var(--ease);

}


.reveal.active {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


/* =========================================================
   TEXT REVEAL
========================================================= */

.text-reveal span {

    display:
        block;

    opacity:
        0;

    transform:
        translateY(
            100%
        );

    transition:

        opacity
        1s
        var(--ease),

        transform
        1s
        var(--ease);

}


.text-reveal.active span {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


.text-reveal.active
span:nth-child(1) {

    transition-delay:
        0.1s;

}


.text-reveal.active
span:nth-child(2) {

    transition-delay:
        0.25s;

}


.text-reveal.active
span:nth-child(3) {

    transition-delay:
        0.4s;

}




/* =========================================================
   20 · INNER PAGE HERO
========================================================= */

.page-hero {

    position: relative;

    min-height: 70vh;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    padding: 220px 0 90px;

    background: var(--black);

    color: var(--white);

    overflow: hidden;

}


.page-hero__bg {

    position: absolute;

    inset: 0;

    z-index: 0;

    opacity: 0.35;

}


.page-hero__bg img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.page-hero__bg::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, var(--black) 92%);

}


.page-hero .container {

    position: relative;

    z-index: 1;

}


.breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 40px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    opacity: 0.6;

}


.breadcrumb a {

    opacity: 0.85;

    transition: opacity 0.3s var(--ease);

}


.breadcrumb a:hover {

    opacity: 1;

}


.page-hero__eyebrow {

    display: block;

    margin-bottom: 24px;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    opacity: 0.6;

}


.page-hero__eyebrow::before {

     content: "-";

}


.page-hero h1 {

    max-width: 1100px;

    font-size: clamp(2.6rem, 6.5vw, 6rem);

    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -0.01em;

}


.page-hero h1 span {

    display: block;

    color: var(--light-gray);

}


.page-hero__lead {

    max-width: 640px;

    margin-top: 34px;

    font-size: 1.05rem;

    color: var(--light-gray);

}


/* =========================================================
   21 · PAGE INTRO / LEAD SECTIONS
========================================================= */

.page-intro {

    padding: 130px 0 40px;

}


.page-intro__grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;

}


.page-intro h2 {

    font-size: clamp(2rem, 4vw, 3.2rem);

    font-weight: 700;

    line-height: 1.15;

}


.page-intro h2 span {

    color: var(--gray);

}


.page-intro p {

    font-size: 1.05rem;

    color: var(--gray);

    max-width: 520px;

}


.page-intro p + p {

    margin-top: 22px;

}


.content-section {

    padding: 90px 0;

}


.content-section--tight {

    padding: 50px 0 90px;

}


.content-section--dark {

    background: var(--black);

    color: var(--white);

}


/* =========================================================
   22 · STATS
========================================================= */

.stats-grid {

    display: grid;

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

    gap: 40px;

    padding-top: 60px;

    border-top: 1px solid var(--border-light);

}


.stat-card {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.stat-card__number {

    font-size: clamp(2.2rem, 4vw, 3.6rem);

    font-weight: 800;

    letter-spacing: -0.02em;

}


.stat-card__label {

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--gray);

}


/* =========================================================
   23 · VALUE / FEATURE CARDS
========================================================= */

.value-grid {

    display: grid;

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

    gap: 1px;

    background: var(--border-light);

    border: 1px solid var(--border-light);

}


.value-card {

    background: var(--white);

    padding: 50px 40px;

    transition: background 0.4s var(--ease), color 0.4s var(--ease);

}


.value-card:hover {

    background: var(--black);

    color: var(--white);

}


.value-card__index {

    display: block;

    margin-bottom: 30px;

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    opacity: 0.5;

}


.value-card h3 {

    font-size: 1.3rem;

    font-weight: 700;

    margin-bottom: 16px;

}


.value-card p {

    font-size: 0.95rem;

    color: var(--gray);

}


.value-card:hover p {

    color: var(--light-gray);

}


/* =========================================================
   24 · PROCESS / TIMELINE
========================================================= */

.process-list {

    display: flex;

    flex-direction: column;

}


.process-item {

    display: grid;

    grid-template-columns: 90px 220px 1fr;

    gap: 40px;

    align-items: baseline;

    padding: 38px 0;

    border-bottom: 1px solid var(--border-light);

}


.process-item:first-child {

    border-top: 1px solid var(--border-light);

}


.process-item__index {

    font-size: 0.85rem;

    font-weight: 700;

    letter-spacing: 0.1em;

    opacity: 0.45;

}


.process-item h3 {

    font-size: 1.4rem;

    font-weight: 700;

}


.process-item p {

    color: var(--gray);

    max-width: 620px;

}


/* =========================================================
   25 · OFFERINGS LIST (Services overview)
========================================================= */

.offering-list {

    display: flex;

    flex-direction: column;

}


.offering-item {

    display: grid;

    grid-template-columns: 90px 1fr auto;

    align-items: center;

    gap: 30px;

    padding: 48px 0;

    border-bottom: 1px solid var(--border-light);

    transition: padding 0.4s var(--ease);

}


.offering-item:first-child {

    border-top: 1px solid var(--border-light);

}


.offering-item:hover {

    padding-left: 20px;

}


.offering-item__index {

    font-size: 0.85rem;

    font-weight: 700;

    opacity: 0.45;

}


.offering-item__body h3 {

    font-size: clamp(1.6rem, 3vw, 2.4rem);

    font-weight: 700;

    margin-bottom: 12px;

}


.offering-item__body p {

    max-width: 560px;

    color: var(--gray);

}


.offering-item__link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 60px;

    height: 60px;

    border: 1px solid var(--black);

    border-radius: 50%;

    font-size: 1.2rem;

    flex-shrink: 0;

    transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);

}


.offering-item:hover .offering-item__link {

    background: var(--black);

    color: var(--white);

    transform: translateX(4px);

}


/* Mobile-only "normal arrow" link (mirrors .service-panel__link).
   Hidden by default on all non-phone screens; swapped in for the
   circular animated arrow at the phone breakpoint below. */
.offering-item__link-mobile {

    display: none;

}


/* =========================================================
   26 · CAPABILITY GRID (Service detail pages)
========================================================= */

.capability-grid {

    display: grid;

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

    gap: 24px;

    counter-reset: capability-counter;

}


.capability-item {

    position: relative;

    padding: 44px 32px 32px;

    border: 1px solid var(--border-light);

    background: var(--white);

    counter-increment: capability-counter;

    transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.4s var(--ease), box-shadow 0.4s var(--ease);

}


.capability-item::before {

    content: counter(capability-counter, decimal-leading-zero);

    display: block;

    font-size: 0.8rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    color: var(--medium-gray);

    margin-bottom: 26px;

    transition: color 0.4s var(--ease);

}


.capability-item h3 {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 12px;

}


.capability-item p {

    font-size: 0.92rem;

    color: var(--gray);

    max-width: 90%;

}


.capability-item:hover {

    border-color: var(--black);

    transform: translateY(-6px);

    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);

}


a.capability-item {

    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;

}

a.capability-item h3 {

    display: inline-flex;
    align-items: center;
    gap: 8px;

}

a.capability-item h3::after {

    content: "→";
    font-weight: 400;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;

}

a.capability-item:hover h3::after {

    opacity: 1;
    transform: translateX(0);

}

a.capability-item:hover::before {

    color: var(--black);

}

.content-section--dark a.capability-item {

    color: var(--white);

}

.content-section--dark .capability-item {

    border-color: var(--border-dark);
    background: transparent;

}

.content-section--dark .capability-item::before {

    color: var(--light-gray);

}

.content-section--dark .capability-item p {

    color: var(--light-gray);

}

.content-section--dark .capability-item:hover {

    border-color: var(--white);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);

}

.content-section--dark a.capability-item:hover::before {

    color: var(--white);

}


/* =========================================================
   27 · JOBS / CAREERS LISTING
========================================================= */

.job-list {

    display: flex;

    flex-direction: column;

}


.job-item {

    display: grid;

    grid-template-columns: 1fr auto auto auto;

    align-items: center;

    gap: 30px;

    padding: 34px 0;

    border-bottom: 1px solid var(--border-light);

}


.job-item:first-child {

    border-top: 1px solid var(--border-light);

}


.job-item__title {

    font-size: 1.15rem;

    font-weight: 700;

}


.job-item__tag {

    font-size: 0.72rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--gray);

    white-space: nowrap;

}


.job-item__link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    white-space: nowrap;

}


.job-item__link span {

    transition: transform 0.4s var(--ease);

}


.job-item__link:hover span {

    transform: translate(4px, -4px);

}


.perks-grid {

    display: grid;

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

    gap: 40px;

}


.perk-card {

    text-align: left;

}


.perk-card__icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    margin-bottom: 22px;

    border: 1px solid var(--border-light);

    border-radius: 50%;

    font-size: 1.1rem;

}


.perk-card h3 {

    font-size: 1.05rem;

    font-weight: 700;

    margin-bottom: 10px;

}


.perk-card p {

    font-size: 0.9rem;

    color: var(--gray);

}


/* =========================================================
   28 · CONTACT PAGE
========================================================= */

.contact-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: start;

}


.contact-info__block {

    margin-bottom: 44px;

}


.contact-info__block h4 {

    font-size: 0.72rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--gray);

    margin-bottom: 14px;

}


.contact-info__block a,
.contact-info__block p {

    font-size: 1.05rem;

    font-weight: 500;

}


.contact-info__socials {

    display: flex;

    gap: 24px;

    margin-top: 50px;

}


.contact-info__socials a {

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    padding-bottom: 6px;

    border-bottom: 1px solid var(--black);

}


.contact-form {

    display: flex;

    flex-direction: column;

    gap: 30px;

}


.form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}


.form-group {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.form-group label {

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.1em;

    color: var(--gray);

}


.form-group input,
.form-group textarea,
.form-group select {

    width: 100%;

    padding: 16px 2px;

    border: none;

    border-bottom: 1px solid var(--border-light);

    background: transparent;

    font-family: inherit;

    font-size: 1rem;

    color: var(--black);

    transition: border-color 0.3s var(--ease);

}


.form-group textarea {

    resize: vertical;

    min-height: 110px;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    outline: none;

    border-color: var(--black);

}


.form-group input::placeholder,
.form-group textarea::placeholder {

    color: var(--medium-gray);

}


.contact-form .btn {

    align-self: flex-start;

    margin-top: 10px;

    border: none;

    cursor: pointer;

}


.form-note {

    font-size: 0.82rem;

    color: var(--medium-gray);

}


/* =========================================================
   29 · GENERIC PAGE CTA
========================================================= */

.page-cta {

    padding: 160px 0;

    background: var(--off-white);

    text-align: center;

}


.page-cta.page-cta--dark {

    background: var(--black);

    color: var(--white);

}


.page-cta h2 {

    max-width: 900px;

    margin: 0 auto;

    font-size: clamp(2.4rem, 5.5vw, 5.5rem);

    font-weight: 800;

    line-height: 1.1;

}


.page-cta h2 span {

    display: block;

    color: var(--gray);

}


.page-cta.page-cta--dark h2 span {

    color: var(--light-gray);

}


.page-cta__actions {

    display: flex;

    justify-content: center;

    gap: 24px;

    margin-top: 55px;

    flex-wrap: wrap;

}




/* =========================================================
   LIFE @ LUMO — photo gallery (careers page)
========================================================= */

.life-gallery{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 220px;
    gap: 20px;
}

.life-gallery__item{
    overflow: hidden;
    position: relative;
}

.life-gallery__item--tall{
    grid-row: span 2;
}

.life-gallery__item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(1.05);
    transition: transform 0.6s var(--ease), filter 0.4s ease;
}

.life-gallery__item:hover img{
    transform: scale(1.05);
    filter: grayscale(60%) contrast(1.05);
}


/* placeholder-figure disclaimer */
.stats-disclaimer{
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--medium-gray);
    font-style: italic;
}
/* ============================================================
   RESPONSIVE SYSTEM — consolidated, phone-tested
============================================================ */

@media (max-width: 1100px) {
  :root{ --container-padding: 40px; }
  .nav-links{ gap: 20px; }
  .who-we-are__grid{ grid-template-columns: 1fr; gap: 70px; }
  .who-we-are__content{ max-width: 650px; }
  .footer-top{ grid-template-columns: 1fr 1fr; }
  .page-intro__grid{ grid-template-columns: 1fr; gap: 40px; }
  .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .value-grid{ grid-template-columns: 1fr; }
  .capability-grid{ grid-template-columns: repeat(2, 1fr); }
  .perks-grid{ grid-template-columns: repeat(2, 1fr); }
  .contact-grid{ grid-template-columns: 1fr; gap: 70px; }
  .process-item{ grid-template-columns: 60px 1fr; }
  .process-item h3{ grid-column: 2; }
  .process-item p{ grid-column: 2; margin-top: 10px; }
  .clients__intro-grid{ grid-template-columns: 1fr; gap: 50px; }
}

@media (max-width: 1100px) {
  .hero{
    height: 100vh;
    height: 100svh;   /* dynamic viewport height — ignores mobile URL-bar jitter */
    min-height: 560px;
    max-height: 900px; /* stop it growing huge on tall/landscape screens */
    background: var(--black); /* letterbox bars blend into this */
  }

}

@media (max-width: 768px) {
  .hero{
    min-height: 500px;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  /* mobile hero video: fit the frame, then size it up a bit so the
     text in the video reads bigger instead of sitting small inside
     tall letterbox bars. Slight left/right crop is the trade-off.
     Restricted to portrait so a rotated (landscape) phone falls back
     to the normal desktop cover/zoom treatment, matching the desktop
     video that now plays there too. */
  .hero-video{
    object-fit: contain;
    transform: scale(1.1);
  }
}

@media (max-width: 480px) {
  .hero{
    min-height: 460px;
  }
}

@media (max-width: 900px){
  .clients-grid{ grid-template-columns: repeat(3, 1fr); }
  .life-gallery{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
}

@media (max-width: 768px) {
  :root{ --container-padding: 20px; }

  /* nav */
  .navbar{ width: calc(100% - 40px); height: 75px; }
  .nav-links, .nav-cta{ display: none; }
  .menu-toggle{ display: block; color: var(--white); }

  /* hero */
  .hero{ height: 100svh; min-height: 500px; }
  .hero__scroll{ left: 20px; bottom: 25px; }

  /* section spacing */
  .what-we-do, .who-we-are, .clients, .careers{ padding: 110px 0; }
  .what-we-do__content, .careers__content{ padding-top: 70px; }
  .what-we-do__bottom, .careers__bottom{
    flex-direction: column; align-items: flex-start; gap: 40px; margin-top: 70px;
  }
  .who-we-are__grid{ padding-top: 70px; }
  .who-we-are__visual{ height: 350px; margin-top: 90px; }
  .visual-photos{ grid-template-columns: 1fr 1fr; }

  /* homepage services showcase */
  .services{ padding-top: 90px; }
  .services__intro{ padding: 80px 0 100px; }
  .services-showcase{ padding: 20px 20px 80px; }
  .services-progress{ position: relative; top: auto; margin: 10px 0 30px; }
  .service-panel{
    min-height: auto; padding: 40px 25px;
    grid-template-columns: 36px 1fr 46px; gap: 20px;
  }
  .service-panel.active{ min-height: auto; }
  .service-panel__visual{ grid-column: 2 / 4; height: 200px; margin-top: 30px; }
  .service-panel__content p{ margin-top: 26px; }
  .service-panel__arrow{ width: 46px; height: 46px; }

  /* clients */
  .clients__intro{ padding: 80px 0; }
  .clients-grid{ grid-template-columns: repeat(2, 1fr); }
  .client-logo{ min-height: 160px; padding: 25px; }
  .client-logo img{ width: 80%; max-height: 60px; }
  .clients__cta{ padding-top: 70px; }

  .contact-cta{ padding: 130px 0; }

 .footer{
    padding-top:55px;
    padding-bottom:20px;
}

.footer-top{
    grid-template-columns:1fr;
    gap:32px;
    padding-bottom:40px;
}

.footer-column{
    gap:10px;
}

.footer-brand p{
    margin-top:12px;
}

.footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding-top:18px;
}

.footer-bottom div{
    gap:16px;
    flex-wrap:wrap;
}

  /* inner pages */
  .page-hero{ min-height: 55vh; padding: 160px 0 60px; }
  .capability-grid{ grid-template-columns: 1fr; }
  .perks-grid{ grid-template-columns: 1fr; }
  .offering-item{ display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Restore the opacity/transform transition that .offering-item's own
     "transition: padding" declaration overrides, so the scroll-reveal
     fade/slide-up animates smoothly on phone screens, matching the
     content sections below (job-item, life-gallery, etc). Scoped to
     this phone breakpoint only — tablet/desktop are unaffected. */
  .offering-item{ transition: padding 0.4s var(--ease), opacity 1s var(--ease), transform 1s var(--ease); }
  .offering-item__link{ display: none; }
  .offering-item__link-mobile{ display: inline-flex; }
  .job-item{ grid-template-columns: 1fr; gap: 12px; }
  .form-row{ grid-template-columns: 1fr; }
  .page-cta{ padding: 100px 0; }
  .life-gallery{ grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .life-gallery__item--tall{ grid-row: span 1; }
}

@media (max-width: 600px){
  .clients{ padding: 100px 0; }
  .clients__intro{ padding: 80px 0 90px; }
  .clients-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------
   PHONES — every big display heading gets a safe minimum so
   text never gets clipped by overflow-x:hidden on the body.
----------------------------------------------------------- */
@media (max-width: 480px) {

  .hero{ min-height: 460px; }

  h1{ font-size: clamp(2.6rem, 11vw, 4rem); }
  h2{ font-size: clamp(2.2rem, 9vw, 3.2rem); }
  h3{ font-size: clamp(1.6rem, 7vw, 2.4rem); }

  .section-top{ padding-bottom: 25px; }

  .what-we-do__content h1{ font-size: clamp(2.6rem, 12vw, 4rem); }
  .what-we-do__bottom p, .careers__bottom p{ font-size: 1rem; }

  .who-we-are__heading h2{ font-size: clamp(2.2rem, 9vw, 3.2rem); }
  .who-we-are__content .large-text{ font-size: 1.15rem; }
  .who-we-are__visual{ height: auto; }
  .visual-photos{ grid-template-columns: 1fr; grid-template-rows: none; gap: 4px; }
  .visual-photo--main{ grid-row: auto; aspect-ratio: 4/3; }
  .visual-photo{ aspect-ratio: 4/3; }

  .services__intro h2{ font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .service-panel{ grid-template-columns: 30px 1fr 40px; padding: 32px 20px; gap: 14px; }
  .service-panel__content h3{ font-size: clamp(1.8rem, 11vw, 2.8rem); }
  .service-panel__number{ font-size: 0.6rem; }
  .service-panel__arrow{ width: 40px; height: 40px; font-size: 1rem; }

  .clients__intro h2{ font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .clients__intro-text{ font-size: 0.95rem; }

  .careers__content h2{ font-size: clamp(2.4rem, 11vw, 3.6rem); }

  .contact-cta h2{ font-size: clamp(2rem, 10vw, 2.8rem); }
  .contact-cta__link{ margin-top: 45px; }

  .page-hero h1{ font-size: clamp(2rem, 10vw, 3rem); }
  .page-cta h2{ font-size: clamp(1.8rem, 9vw, 2.6rem); }

  .stats-grid{ grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 380px){
  .logo{ font-size: 1.3rem; }
  .navbar{ height: 68px; }
  .service-panel__content h3{ font-size: clamp(1.6rem, 12vw, 2.3rem); }
  .what-we-do__content h1{ font-size: clamp(2.2rem, 13vw, 3.2rem); }
}